@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    --brand-red: #dc2626;
    --brand-red-hover: #b91c1c;
    --brand-red-light: #fef2f2;
    --bg-body: #f8fafc;
    --card-bg: #ffffff;
    --border-color: #e2e8f0;
}

* {
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #f8fafc;
    background-image: 
        radial-gradient(at 0% 0%, rgba(220, 38, 38, 0.04) 0px, transparent 40%),
        radial-gradient(at 100% 100%, rgba(239, 68, 68, 0.03) 0px, transparent 40%),
        radial-gradient(at 50% 0%, rgba(244, 63, 94, 0.02) 0px, transparent 60%);
    background-attachment: fixed;
    color: #1e293b;
    min-height: 100vh;
}

/* Hide scrollbar for clean horizontal swipe on mobile */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Crisp Clean Medical Cards */
.med-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 10px -2px rgba(15, 23, 42, 0.04), 0 1px 4px -1px rgba(15, 23, 42, 0.02);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.med-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 20px -4px rgba(220, 38, 38, 0.07);
}

/* Mobile Off-canvas Drawer transition */
.sidebar-drawer {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Signature Pad (Pristine Official White Sheet Style) */
.signature-wrapper {
    position: relative;
    border: 1.5px dashed #cbd5e1;
    border-radius: 14px;
    background: #ffffff;
    touch-action: none !important;
    overflow: hidden;
    transition: border-color 0.2s;
    user-select: none;
    -webkit-user-select: none;
    overscroll-behavior: none !important;
}

.signature-wrapper:hover,
.signature-wrapper:active {
    border-color: #dc2626;
}

canvas.signature-pad {
    width: 100%;
    height: 220px;
    display: block;
    cursor: crosshair;
    touch-action: none !important;
    -webkit-touch-callout: none;
    overscroll-behavior: none !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Status Badges */
.badge-pending {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.badge-approved {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.badge-rejected {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* Print Styling for Official Leave Permit Form */
@media print {
    @page {
        size: A4 portrait;
        margin: 8mm 12mm 8mm 12mm;
    }
    *, *::before, *::after {
        box-shadow: none !important;
        text-shadow: none !important;
    }
    html, body {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        color: #000000 !important;
        overflow: visible !important;
        font-size: 12pt !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    body > *:not(#printPermitContainer),
    .no-print,
    header,
    aside,
    main,
    nav,
    footer,
    button,
    [class*="modal"],
    [id*="modal"],
    [id*="Modal"],
    [id*="pwa"],
    [id*="Pwa"],
    [id*="Banner"],
    [id*="banner"],
    #loginModal,
    #newRequestModal,
    #requestDetailModal,
    #adminResetPwdModal,
    #changePasswordModal,
    #newUserModal,
    #mobileSidebarBackdrop,
    #pwaInstallBanner,
    #pwaIosModal,
    #requestSuccessModal,
    #firstTimePasswordModal,
    #newLeaveTypeModal {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        max-height: 0 !important;
        width: 0 !important;
        max-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: none !important;
        opacity: 0 !important;
    }
    #printPermitContainer,
    #printPermitContainer.hidden {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: #ffffff !important;
        color: #0f172a !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
        page-break-after: avoid !important;
        page-break-inside: avoid !important;
    }
    #printPermitContainer * {
        visibility: visible !important;
    }
    #printPermitContainer .no-print,
    #printPermitContainer [id*="pwa"],
    #printPermitContainer [id*="Pwa"],
    #printPermitContainer button {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
    }
}

/* ================= MOBILE & ALL PHONE SIZES RESPONSIVE OPTIMIZATIONS ================= */
:root {
    --sat: env(safe-area-inset-top, 0px);
    --sar: env(safe-area-inset-right, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
}

/* Prevent iOS Safari automatic zoom-in on input focus */
@media screen and (max-width: 640px) {
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Native momentum scrolling on iOS */
    .overflow-y-auto, .overflow-x-auto, [class*="overflow-"] {
        -webkit-overflow-scrolling: touch;
    }

    /* Safe bottom spacing for modern bezel-less phones */
    body {
        padding-bottom: var(--sab);
    }

    /* Mobile modal fixes: Ensure flex items shrink and don't push buttons offscreen */
    #loginModal, #newRequestModal, #requestDetailModal {
        padding-top: max(0.5rem, var(--sat)) !important;
        padding-bottom: max(0.5rem, var(--sab)) !important;
        padding-left: max(0.5rem, var(--sal)) !important;
        padding-right: max(0.5rem, var(--sar)) !important;
    }

    /* Smooth touch action */
    button, [role="button"], a {
        touch-action: manipulation;
    }

    /* Cards list scroll isolation so the outer page never moves */
    #empCardsListContainer,
    #mgrCardsListContainer,
    #sysCardsListContainer {
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        overscroll-behavior-y: contain !important;
    }

    .emp-login-card,
    .mgr-login-card,
    .sys-login-card {
        touch-action: pan-y !important;
    }
}