/* Base typography & layout */
body{font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;padding-top:72px;background-color:#f8f9fa}

/* Cards */
.card{border-radius:.75rem}
.card-header{border-top-left-radius:.75rem;border-top-right-radius:.75rem}

/* Tables */
.table th,.table td{vertical-align:middle}
.table thead th{background-color:#f8f9fa}
.table tbody tr:hover{background-color:#fff}

/* Admin table enhancements */
.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}
.table-toolbar .input-group .input-group-text{background:#fafafa;border-color:#dee2e6}
.table-toolbar .form-control{border-color:#dee2e6}
.admin-table thead th{position:sticky;top:0;z-index:2;background:#fafafa}
.admin-table tbody tr:nth-child(even){background-color:#fcfcfc}
.admin-table th,.admin-table td{padding:.75rem 1rem}
.admin-table{border:1px solid #eee;border-radius:var(--radius);overflow:hidden}

/* Upload zone */
.upload-zone{display:flex;gap:1rem;align-items:center}
.upload-zone .form-control[type="file"]{flex:1}

/* Status badges */
.badge-status{font-size:.85rem;border-radius:.375rem;padding:.35em .6em}
.badge-status.approved{background-color:#28a745;color:#fff}
.badge-status.rejected{background-color:#dc3545;color:#fff}
.badge-status.pending{background-color:#ff8c00;color:#fff}

/* Actions & links */
.table td .btn{white-space:nowrap}
.filename{text-decoration:none}
.filename:hover{text-decoration:underline}

/* Approve/Reject buttons */
.btn-approve{background-color:#198754;color:#fff;border-color:#198754}
.btn-approve:hover{background-color:#157347;color:#fff;border-color:#146c43}
.btn-reject{background-color:#dc3545;color:#fff;border-color:#dc3545}
.btn-reject:hover{background-color:#bb2d3b;color:#fff;border-color:#b02a37}

/* Admin preview modal styles */
.modal-iframe{height:80vh}
@media (max-width:576px){.modal-iframe{height:70vh}}

/* Reject panel spacing inside tables */
tr.reject-row td{padding:0 1rem 1rem}

/* Auth page improvements */
.password-toggle{z-index:2}
.form-floating .form-control{border-radius:.5rem}
.form-floating .form-control:focus{box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}

/* Auth page (split layout) */
.auth-page{padding-top:0;min-height:100vh;background:var(--color-bg);position:relative}
.auth-page::after{content:"";position:fixed;inset:0;background-image:radial-gradient(rgba(0,0,0,.05) 1px,transparent 1px),radial-gradient(rgba(0,0,0,.03) 1px,transparent 1px);background-size:24px 24px,40px 40px;background-position:0 0,12px 12px;pointer-events:none}
.auth-container{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:center;max-width:1100px;padding:2rem;margin:0 auto}

/* Left panel */
.auth-left{padding:1rem 2rem;background:linear-gradient(135deg, rgba(31,166,226,.08), rgba(20,84,164,.06));border-inline-end:1px solid #eee}
.auth-left .brand{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-bottom:1rem;text-align:center}
.logo-mark{display:inline-block;width:44px;height:44px;background:none;border-radius:.5rem;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'><defs><linearGradient id='g' x1='0' x2='1' y1='0' y2='1'><stop offset='0' stop-color='%231fa6e2'/><stop offset='1' stop-color='%231454a4'/></linearGradient></defs><rect rx='20' width='160' height='160' fill='%230b1c3b'/><g fill='url(%23g)' font-family='Tahoma' font-weight='700' font-size='72'><text x='28' y='95'>HR</text></g><text x='44' y='130' font-family='Tahoma' font-size='28' fill='%23c7e4f5'>Tech</text></svg>");background-size:cover;box-shadow:0 8px 18px rgba(0,0,0,.2)}
.brand-name{font-weight:700;font-size:1.25rem}
.welcome-title{font-size:2rem;font-weight:700;margin-bottom:.5rem}
.welcome-sub{color:#6c757d;margin-bottom:1rem}

.social{display:flex;gap:.5rem}
.social-link{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #dee2e6;border-radius:50%;color:#212529;text-decoration:none;font-weight:700}
.social-link:hover{border-color:#dc3545;color:#dc3545}

/* Right card */
.login-card{border-radius:.75rem;background:#fff;box-shadow:0 10px 25px rgba(0,0,0,.08)}
.btn-auth{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.btn-auth:hover{background:#1454a4;border-color:#1454a4;color:#fff}

/* Welcome card */
.welcome-card{border-radius:.75rem;background:#fff;box-shadow:0 10px 25px rgba(0,0,0,.08)}

/* Unified auth card (two columns) */
.auth-card{display:flex;gap:0;background:#fff;border-radius:.75rem;box-shadow:0 10px 25px rgba(0,0,0,.08);overflow:hidden;max-width:1100px;margin:0 auto}
.auth-card .auth-left,.auth-card .auth-right{flex:1}
.auth-card .auth-right{border-inline-start:1px solid #eee;border-left:0}
.auth-container{display:block}
@media (max-width:992px){.auth-card{flex-direction:row}.auth-card .auth-right{border-inline-start:1px solid #eee;border-top:0}}

/* Responsive */
@media (max-width:992px){.auth-container{grid-template-columns:1fr;text-align:center}.auth-left{padding:1rem}.auth-left .brand{justify-content:center}}
@media (max-width:576px){.welcome-title{font-size:1.5rem}.auth-container{padding:1.25rem}}

/* Client page theme (red/white/black) */
:root{--color-primary:#1fa6e2;--color-secondary:#1a6fb5;--color-accent:#50c2ec;--color-bg:#c7e4f5;--color-dark:#0b1c3b;--color-black:#041435;--color-white:#fff;--color-gray:#748cac}
/* Primary buttons (palette aligned) */
.btn-primary{background-color:var(--color-primary);border-color:var(--color-primary)}
.btn-primary:hover{background-color:#1454a4;border-color:#1454a4}
.btn-outline-primary{color:var(--color-primary);border-color:var(--color-primary)}
.btn-outline-primary:hover{color:#fff;background-color:var(--color-primary);border-color:var(--color-primary)}
/* Warning buttons aligned with palette */
.btn-warning{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}
.btn-warning:hover{background-color:#1454a4;border-color:#1454a4;color:#fff}
/* Client hero */
.client-hero{background:#fff;border:1px solid #eee;border-radius:.75rem;box-shadow:0 10px 25px rgba(0,0,0,.08)}
.hero-title{font-weight:700;color:var(--color-black)}
.hero-sub{color:var(--color-gray)}
/* Document grid & cards */
.doc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.doc-card{background:#fff;border:1px solid #eee;border-radius:.75rem;box-shadow:0 10px 25px rgba(0,0,0,.06);overflow:hidden;min-height:240px}
.doc-card-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:#fafafa;border-bottom:1px solid #f0f0f0}
.doc-card-title{font-weight:600;color:var(--color-black)}
.doc-card-body{padding:1.25rem}
.doc-meta{display:grid;row-gap:.35rem}
.meta-item{display:flex;gap:.5rem}
.meta-label{color:#888;font-size:.875rem}
.meta-value{color:var(--color-black);font-weight:500}
.doc-actions{display:flex;gap:.5rem;margin-top:.5rem}
/* Slightly larger inputs & buttons inside doc cards */
.doc-card .form-control,.doc-card .form-select{padding:.6rem .75rem;font-size:.95rem}
.doc-card .btn{padding:.5rem .8rem;font-size:.95rem}
/* Badges adjustments for theme */
.badge-status{border-radius:.5rem;padding:.35em .6em;font-weight:600}
.badge-status.rejected{background-color:#dc3545;color:#fff}
.badge-status.pending{background-color:#ff8c00;color:#fff}
@media (max-width:576px){.doc-grid{grid-template-columns:1fr}}

/* Professional black/white/red theme + animations */

/* Global transitions */
.btn,.nav-link,.navbar-brand,.card,.doc-card,.form-control,.badge,.table tbody tr,.modal-content{transition:all .25s ease}

/* Body and container */
.bg-light{background-color:var(--color-white)!important}

/* Navbar styling */
.navbar.navbar-dark.bg-dark{background-color:var(--color-black)!important;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.navbar .navbar-brand{color:var(--color-white);font-weight:700;letter-spacing:.2px}
.navbar .nav-link{color:#bbb;position:relative}
.navbar .nav-link:hover,.navbar .nav-link.active{color:var(--color-white)}
.navbar .nav-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--color-primary);transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.navbar .nav-link:hover::after,.navbar .nav-link.active::after{transform:scaleX(1)}

/* Cards entry animation */
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.card,.doc-card,.auth-card{animation:slideUp .35s ease both}

/* Page fade-in */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.container,.auth-container{animation:fadeIn .35s ease both}

/* Interactive buttons */
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 16px rgba(0,0,0,.08)}
.btn:active{transform:none;box-shadow:none}

/* Table row hover enhancement */
.table tbody tr{transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease}
.table tbody tr:hover{background-color:#fff;transform:translateY(-1px);box-shadow:0 6px 12px rgba(0,0,0,.06)}

/* Modal subtle pop */
.modal-content{border-radius:.75rem}
.modal.fade .modal-dialog{transition:transform .25s ease-out;transform:translateY(10px)}
.modal.show .modal-dialog{transform:translateY(0)}
/* Backdrop tuning for better visibility */
.modal-backdrop{opacity:.35}

/* Auth/logo accent + focus */
.logo-mark{background-image:url('/static/logo.svg');background-color:transparent;background-repeat:no-repeat;background-size:cover}
.site-logo{height:36px;display:inline-block;margin-inline-end:.5rem}
.form-floating .form-control:focus{box-shadow:0 0 0 .25rem rgba(31,166,226,.25)}

/* Doc cards hover */
.doc-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.12)}

/* File link color */
a.filename{color:var(--color-black)}
a.filename:hover{color:var(--color-primary)}

/* Theme color overrides */
.bg-primary{background-color:var(--color-primary)!important;border-color:var(--color-primary)!important}
.bg-secondary{background-color:var(--color-black)!important;border-color:var(--color-black)!important}

/* Professional refinements */
:root{--radius:.75rem;--shadow-soft:0 10px 25px rgba(0,0,0,.08);--shadow-hover:0 12px 30px rgba(0,0,0,.12);--border:1px solid #eee}
.container:not(.auth-container){max-width:1100px}
.card,.doc-card,.auth-card,.modal-content{border-radius:var(--radius)}
.card{box-shadow:var(--shadow-soft)}
.card:hover{box-shadow:var(--shadow-hover)}
.table thead th{background:#fafafa;border-bottom:1px solid #eee}
.table{border-radius:var(--radius);overflow:hidden}
.form-control,.form-select{border-color:#dee2e6}
.form-control:focus,.form-select:focus{border-color:var(--color-primary);box-shadow:0 0 0 .25rem rgba(31,166,226,.15)}
.btn:focus-visible{outline:2px solid rgba(31,166,226,.4);outline-offset:2px}
::selection{background:rgba(31,166,226,.15)}
.navbar .navbar-brand .logo-mark{margin-inline-end:.5rem}
.badge-status{letter-spacing:.2px}
.modal-header{border-bottom:var(--border)}
.modal-body{background:#fff}
.modal-footer{border-top:var(--border)}
/* Polished file inputs */
.upload-zone .form-control[type="file"]{border:1px dashed #ccc}
.upload-zone .form-control[type="file"]:hover{border-color:var(--color-primary)}
/* Dark-mode placeholder for future extension */
/* [data-theme="dark"] body{background:#0f0f10;color:#e5e5e5} */

/* Admin offcanvas panel */
.offcanvas-bottom{height:60vh;max-height:85vh;border-top-left-radius:.75rem;border-top-right-radius:.75rem;box-shadow:0 -10px 25px rgba(0,0,0,.08)}
.offcanvas-bottom .offcanvas-body{overflow-y:auto}
.offcanvas-bottom .offcanvas-header{border-bottom:1px solid #eee}
@media (max-width:576px){.offcanvas-bottom{height:75vh}}

/* Inline reject panel */
.reject-row .reject-panel{background:#fff;border:1px solid #eee;border-radius:.5rem;box-shadow:0 6px 20px rgba(0,0,0,.06);padding:1rem}
.reject-row .reject-form .form-control{border-color:#dee2e6}
.reject-row .reject-form .form-control:focus{border-color:var(--color-primary);box-shadow:0 0 0 .25rem rgba(31,166,226,.15)}

/* Support notice toast */
#supportNotice{position:fixed;right:1rem;bottom:1rem;z-index:1080;max-width:320px;opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;box-shadow:0 6px 18px rgba(0,0,0,.12);border:1px solid #b6d4fe}
#supportNotice.show{opacity:1;transform:translateY(0)}
#supportNotice.alert-info{background:#e7f1ff;color:#0d6efd}
.auth-page .site-logo{height:160px;width:auto;display:block;margin:0 auto 1rem}
.auth-left .brand-name{font-size:1.75rem;color:var(--color-black);letter-spacing:.2px}
.welcome-title{font-size:1.75rem}
.auth-container{padding:2rem}
@media (max-width:992px){.auth-page .site-logo{height:140px}}
@media (max-width:576px){.auth-page .site-logo{height:120px}}
/* Login page adjustments */
.fb-logo{width:96px;height:auto;display:block;margin:0 auto .75rem}
@media (max-width:576px){.fb-logo{width:80px}}
.auth-box{background:#fff;padding:1rem 1.25rem;border:1px solid #e5e5e5;border-radius:0;display:flex;flex-direction:column;gap:.75rem;box-shadow:0 10px 25px rgba(0,0,0,.08)}
.auth-box .mb-3{margin-bottom:0}
.auth-box .form-control{border-radius:0;height:44px}
.auth-box .btn-fb{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff;border-radius:0;height:44px;width:100%}
.auth-box .btn-fb:hover{background-color:#1454a4;border-color:#1454a4}
/* Doc strip (sticky chips bar) */
.doc-strip{position:sticky;top:72px;z-index:1030;border-radius:.75rem;box-shadow:var(--shadow-soft)}
.doc-strip .card-body{padding:.5rem 1rem}
.doc-strip .d-flex{gap:.5rem;overflow-x:auto;padding-bottom:.25rem}
.doc-chip{display:flex;align-items:center;gap:.5rem;padding:.35rem .6rem;border:1px solid #dee2e6;border-radius:999px;background:#fff;color:var(--color-black);cursor:pointer;font-size:.9rem;white-space:nowrap}
.doc-chip:hover{border-color:var(--color-primary);box-shadow:0 6px 14px rgba(0,0,0,.08);transform:translateY(-1px)}
.doc-chip .chip-label{font-weight:600}
.doc-chip .chip-status{padding:.2rem .5rem;border-radius:999px;font-weight:600;font-size:.8rem}
.chip-status.approved{background-color:#28a745;color:#fff}
.chip-status.rejected{background-color:#dc3545;color:#fff}
.chip-status.pending{background-color:#ff8c00;color:#fff}
@media (max-width:576px){.doc-strip{top:56px}.doc-chip{font-size:.85rem;padding:.3rem .5rem}}
/* Highlight target card on navigation */
.doc-card{scroll-margin-top:88px}
.doc-card.is-highlighted{outline:2px solid var(--color-primary);box-shadow:0 0 0 4px rgba(31,166,226,.2),var(--shadow-hover);transform:translateY(-2px)}

/* Client page theme (red/white/black) */
:root{--color-primary:#1fa6e2;--color-secondary:#1a6fb5;--color-accent:#50c2ec;--color-bg:#c7e4f5;--color-dark:#0b1c3b;--color-black:#041435;--color-white:#fff;--color-gray:#748cac}
/* Primary buttons (palette aligned) */
.btn-primary{background-color:var(--color-primary);border-color:var(--color-primary)}
.btn-primary:hover{background-color:#1454a4;border-color:#1454a4}
.btn-outline-primary{color:var(--color-primary);border-color:var(--color-primary)}
.btn-outline-primary:hover{color:#fff;background-color:var(--color-primary);border-color:var(--color-primary)}
/* Warning buttons aligned with palette */
.btn-warning{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}
.btn-warning:hover{background-color:#1454a4;border-color:#1454a4;color:#fff}
/* Client hero */
.client-hero{background:#fff;border:1px solid #eee;border-radius:.75rem;box-shadow:0 10px 25px rgba(0,0,0,.08)}
.hero-title{font-weight:700;color:var(--color-black)}
.hero-sub{color:var(--color-gray)}
/* Document grid & cards */
.doc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.doc-card{background:#fff;border:1px solid #eee;border-radius:.75rem;box-shadow:0 10px 25px rgba(0,0,0,.06);overflow:hidden}
.doc-card-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:#fafafa;border-bottom:1px solid #f0f0f0}
.doc-card-title{font-weight:600;color:var(--color-black)}
.doc-card-body{padding:1.25rem}
.doc-meta{display:grid;row-gap:.35rem}
.meta-item{display:flex;gap:.5rem}
.meta-label{color:#888;font-size:.875rem}
.meta-value{color:var(--color-black);font-weight:500}
.doc-actions{display:flex;gap:.5rem;margin-top:.5rem}
/* Badges adjustments for theme */
.badge-status{border-radius:.5rem;padding:.35em .6em;font-weight:600}
.badge-status.rejected{background-color:#dc3545;color:#fff}
.badge-status.pending{background-color:#ff8c00;color:#fff}
@media (max-width:576px){.doc-grid{grid-template-columns:1fr}}

/* Professional black/white/red theme + animations */

/* Global transitions */
.btn,.nav-link,.navbar-brand,.card,.doc-card,.form-control,.badge,.table tbody tr,.modal-content{transition:all .25s ease}

/* Body and container */
.bg-light{background-color:var(--color-white)!important}

/* Navbar styling */
.navbar.navbar-dark.bg-dark{background-color:var(--color-black)!important;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.navbar .navbar-brand{color:var(--color-white);font-weight:700;letter-spacing:.2px}
.navbar .nav-link{color:#bbb;position:relative}
.navbar .nav-link:hover,.navbar .nav-link.active{color:var(--color-white)}
.navbar .nav-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--color-primary);transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.navbar .nav-link:hover::after,.navbar .nav-link.active::after{transform:scaleX(1)}

/* Cards entry animation */
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.card,.doc-card,.auth-card{animation:slideUp .35s ease both}

/* Page fade-in */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.container,.auth-container{animation:fadeIn .35s ease both}

/* Interactive buttons */
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 16px rgba(0,0,0,.08)}
.btn:active{transform:none;box-shadow:none}

/* Table row hover enhancement */
.table tbody tr{transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease}
.table tbody tr:hover{background-color:#fff;transform:translateY(-1px);box-shadow:0 6px 12px rgba(0,0,0,.06)}

/* Modal subtle pop */
.modal-content{border-radius:.75rem}
.modal.fade .modal-dialog{transition:transform .25s ease-out;transform:translateY(10px)}
.modal.show .modal-dialog{transform:translateY(0)}
/* Backdrop tuning for better visibility */
.modal-backdrop{opacity:.35}

/* Auth/logo accent + focus */
.logo-mark{background-image:url('/static/logo.svg');background-color:transparent;background-repeat:no-repeat;background-size:cover}
.site-logo{height:36px;display:inline-block;margin-inline-end:.5rem}
.form-floating .form-control:focus{box-shadow:0 0 0 .25rem rgba(31,166,226,.25)}

/* Doc cards hover */
.doc-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.12)}

/* File link color */
a.filename{color:var(--color-black)}
a.filename:hover{color:var(--color-primary)}

/* Theme color overrides */
.bg-primary{background-color:var(--color-primary)!important;border-color:var(--color-primary)!important}
.bg-secondary{background-color:var(--color-black)!important;border-color:var(--color-black)!important}

/* Professional refinements */
:root{--radius:.75rem;--shadow-soft:0 10px 25px rgba(0,0,0,.08);--shadow-hover:0 12px 30px rgba(0,0,0,.12);--border:1px solid #eee}
.container:not(.auth-container){max-width:1100px}
.card,.doc-card,.auth-card,.modal-content{border-radius:var(--radius)}
.card{box-shadow:var(--shadow-soft)}
.card:hover{box-shadow:var(--shadow-hover)}
.table thead th{background:#fafafa;border-bottom:1px solid #eee}
.table{border-radius:var(--radius);overflow:hidden}
.form-control,.form-select{border-color:#dee2e6}
.form-control:focus,.form-select:focus{border-color:var(--color-primary);box-shadow:0 0 0 .25rem rgba(31,166,226,.15)}
.btn:focus-visible{outline:2px solid rgba(31,166,226,.4);outline-offset:2px}
::selection{background:rgba(31,166,226,.15)}
.navbar .navbar-brand .logo-mark{margin-inline-end:.5rem}
.badge-status{letter-spacing:.2px}
.modal-header{border-bottom:var(--border)}
.modal-body{background:#fff}
.modal-footer{border-top:var(--border)}
/* Polished file inputs */
.upload-zone .form-control[type="file"]{border:1px dashed #ccc}
.upload-zone .form-control[type="file"]:hover{border-color:var(--color-primary)}
/* Dark-mode placeholder for future extension */
/* [data-theme="dark"] body{background:#0f0f10;color:#e5e5e5} */

/* Admin offcanvas panel */
.offcanvas-bottom{height:60vh;max-height:85vh;border-top-left-radius:.75rem;border-top-right-radius:.75rem;box-shadow:0 -10px 25px rgba(0,0,0,.08)}
.offcanvas-bottom .offcanvas-body{overflow-y:auto}
.offcanvas-bottom .offcanvas-header{border-bottom:1px solid #eee}
@media (max-width:576px){.offcanvas-bottom{height:75vh}}

/* Inline reject panel */
.reject-row .reject-panel{background:#fff;border:1px solid #eee;border-radius:.5rem;box-shadow:0 6px 20px rgba(0,0,0,.06);padding:1rem}
.reject-row .reject-form .form-control{border-color:#dee2e6}
.reject-row .reject-form .form-control:focus{border-color:var(--color-primary);box-shadow:0 0 0 .25rem rgba(31,166,226,.15)}

/* Support notice toast */
#supportNotice{position:fixed;right:1rem;bottom:1rem;z-index:1080;max-width:320px;opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;box-shadow:0 6px 18px rgba(0,0,0,.12);border:1px solid #b6d4fe}
#supportNotice.show{opacity:1;transform:translateY(0)}
#supportNotice.alert-info{background:#e7f1ff;color:#0d6efd}
.auth-page .site-logo{height:160px;width:auto;display:block;margin:0 auto 1rem}
.auth-left .brand-name{font-size:1.75rem;color:var(--color-black);letter-spacing:.2px}
.welcome-title{font-size:1.75rem}
.auth-container{padding:2rem}
@media (max-width:992px){.auth-page .site-logo{height:140px}}
@media (max-width:576px){.auth-page .site-logo{height:120px}}
/* Login page adjustments */
.fb-logo{width:96px;height:auto;display:block;margin:0 auto .75rem}
@media (max-width:576px){.fb-logo{width:80px}}
.auth-box{background:#fff;padding:1rem 1.25rem;border:1px solid #e5e5e5;border-radius:0;display:flex;flex-direction:column;gap:.75rem;box-shadow:0 10px 25px rgba(0,0,0,.08)}
.auth-box .mb-3{margin-bottom:0}
.auth-box .form-control{border-radius:0;height:44px}
.auth-box .btn-fb{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff;border-radius:0;height:44px;width:100%}
.auth-box .btn-fb:hover{background-color:#1454a4;border-color:#1454a4}
/* Doc strip (sticky chips bar) */
.doc-strip{position:sticky;top:72px;z-index:1030;border-radius:.75rem;box-shadow:var(--shadow-soft)}
.doc-strip .card-body{padding:.5rem 1rem}
.doc-strip .d-flex{gap:.5rem;overflow-x:auto;padding-bottom:.25rem}
.doc-chip{display:flex;align-items:center;gap:.5rem;padding:.35rem .6rem;border:1px solid #dee2e6;border-radius:999px;background:#fff;color:var(--color-black);cursor:pointer;font-size:.9rem;white-space:nowrap}
.doc-chip:hover{border-color:var(--color-primary);box-shadow:0 6px 14px rgba(0,0,0,.08);transform:translateY(-1px)}
.doc-chip .chip-label{font-weight:600}
.doc-chip .chip-status{padding:.2rem .5rem;border-radius:999px;font-weight:600;font-size:.8rem}
.chip-status.approved{background-color:#28a745;color:#fff}
.chip-status.rejected{background-color:#dc3545;color:#fff}
.chip-status.pending{background-color:#ff8c00;color:#fff}
@media (max-width:576px){.doc-strip{top:56px}.doc-chip{font-size:.85rem;padding:.3rem .5rem}}
/* Highlight target card on navigation */
.doc-card{scroll-margin-top:88px}
.doc-card.is-highlighted{outline:2px solid var(--color-primary);box-shadow:0 0 0 4px rgba(31,166,226,.2),var(--shadow-hover);transform:translateY(-2px)}

/* Client page theme (red/white/black) */
:root{--color-primary:#1fa6e2;--color-secondary:#1a6fb5;--color-accent:#50c2ec;--color-bg:#c7e4f5;--color-dark:#0b1c3b;--color-black:#041435;--color-white:#fff;--color-gray:#748cac}
/* Primary buttons (palette aligned) */
.btn-primary{background-color:var(--color-primary);border-color:var(--color-primary)}
.btn-primary:hover{background-color:#1454a4;border-color:#1454a4}
.btn-outline-primary{color:var(--color-primary);border-color:var(--color-primary)}
.btn-outline-primary:hover{color:#fff;background-color:var(--color-primary);border-color:var(--color-primary)}
/* Warning buttons aligned with palette */
.btn-warning{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}
.btn-warning:hover{background-color:#1454a4;border-color:#1454a4;color:#fff}
/* Client hero */
.client-hero{background:#fff;border:1px solid #eee;border-radius:.75rem;box-shadow:0 10px 25px rgba(0,0,0,.08)}
.hero-title{font-weight:700;color:var(--color-black)}
.hero-sub{color:var(--color-gray)}
/* Document grid & cards */
.doc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.doc-card{background:#fff;border:1px solid #eee;border-radius:.75rem;box-shadow:0 10px 25px rgba(0,0,0,.06);overflow:hidden;min-height:240px}
.doc-card-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:#fafafa;border-bottom:1px solid #f0f0f0}
.doc-card-title{font-weight:600;color:var(--color-black)}
.doc-card-body{padding:1.25rem}
.doc-meta{display:grid;row-gap:.35rem}
.meta-item{display:flex;gap:.5rem}
.meta-label{color:#888;font-size:.875rem}
.meta-value{color:var(--color-black);font-weight:500}
.doc-actions{display:flex;gap:.5rem;margin-top:.5rem}
/* Slightly larger inputs & buttons inside doc cards */
.doc-card .form-control,.doc-card .form-select{padding:.6rem .75rem;font-size:.95rem}
.doc-card .btn{padding:.5rem .8rem;font-size:.95rem}
/* Badges adjustments for theme */
.badge-status{border-radius:.5rem;padding:.35em .6em;font-weight:600}
.badge-status.rejected{background-color:#dc3545;color:#fff}
.badge-status.pending{background-color:#ff8c00;color:#fff}
@media (max-width:576px){.doc-grid{grid-template-columns:1fr}}

/* Professional black/white/red theme + animations */

/* Global transitions */
.btn,.nav-link,.navbar-brand,.card,.doc-card,.form-control,.badge,.table tbody tr,.modal-content{transition:all .25s ease}

/* Body and container */
.bg-light{background-color:var(--color-white)!important}

/* Navbar styling */
.navbar.navbar-dark.bg-dark{background-color:var(--color-black)!important;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.navbar .navbar-brand{color:var(--color-white);font-weight:700;letter-spacing:.2px}
.navbar .nav-link{color:#bbb;position:relative}
.navbar .nav-link:hover,.navbar .nav-link.active{color:var(--color-white)}
.navbar .nav-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--color-primary);transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.navbar .nav-link:hover::after,.navbar .nav-link.active::after{transform:scaleX(1)}

/* Cards entry animation */
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.card,.doc-card,.auth-card{animation:slideUp .35s ease both}

/* Page fade-in */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.container,.auth-container{animation:fadeIn .35s ease both}

/* Interactive buttons */
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 16px rgba(0,0,0,.08)}
.btn:active{transform:none;box-shadow:none}

/* Table row hover enhancement */
.table tbody tr{transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease}
.table tbody tr:hover{background-color:#fff;transform:translateY(-1px);box-shadow:0 6px 12px rgba(0,0,0,.06)}

/* Modal subtle pop */
.modal-content{border-radius:.75rem}
.modal.fade .modal-dialog{transition:transform .25s ease-out;transform:translateY(10px)}
.modal.show .modal-dialog{transform:translateY(0)}
/* Backdrop tuning for better visibility */
.modal-backdrop{opacity:.35}

/* Auth/logo accent + focus */
.logo-mark{background-image:url('/static/logo.svg');background-color:transparent;background-repeat:no-repeat;background-size:cover}
.site-logo{height:36px;display:inline-block;margin-inline-end:.5rem}
.form-floating .form-control:focus{box-shadow:0 0 0 .25rem rgba(31,166,226,.25)}

/* Doc cards hover */
.doc-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.12)}

/* File link color */
a.filename{color:var(--color-black)}
a.filename:hover{color:var(--color-primary)}

/* Theme color overrides */
.bg-primary{background-color:var(--color-primary)!important;border-color:var(--color-primary)!important}
.bg-secondary{background-color:var(--color-black)!important;border-color:var(--color-black)!important}

/* Professional refinements */
:root{--radius:.75rem;--shadow-soft:0 10px 25px rgba(0,0,0,.08);--shadow-hover:0 12px 30px rgba(0,0,0,.12);--border:1px solid #eee}
.container:not(.auth-container){max-width:1100px}
.card,.doc-card,.auth-card,.modal-content{border-radius:var(--radius)}
.card{box-shadow:var(--shadow-soft)}
.card:hover{box-shadow:var(--shadow-hover)}
.table thead th{background:#fafafa;border-bottom:1px solid #eee}
.table{border-radius:var(--radius);overflow:hidden}
.form-control,.form-select{border-color:#dee2e6}
.form-control:focus,.form-select:focus{border-color:var(--color-primary);box-shadow:0 0 0 .25rem rgba(31,166,226,.15)}
.btn:focus-visible{outline:2px solid rgba(31,166,226,.4);outline-offset:2px}
::selection{background:rgba(31,166,226,.15)}
.navbar .navbar-brand .logo-mark{margin-inline-end:.5rem}
.badge-status{letter-spacing:.2px}
.modal-header{border-bottom:var(--border)}
.modal-body{background:#fff}
.modal-footer{border-top:var(--border)}
/* Polished file inputs */
.upload-zone .form-control[type="file"]{border:1px dashed #ccc}
.upload-zone .form-control[type="file"]:hover{border-color:var(--color-primary)}
/* Dark-mode placeholder for future extension */
/* [data-theme="dark"] body{background:#0f0f10;color:#e5e5e5} */

/* Admin offcanvas panel */
.offcanvas-bottom{height:60vh;max-height:85vh;border-top-left-radius:.75rem;border-top-right-radius:.75rem;box-shadow:0 -10px 25px rgba(0,0,0,.08)}
.offcanvas-bottom .offcanvas-body{overflow-y:auto}
.offcanvas-bottom .offcanvas-header{border-bottom:1px solid #eee}
@media (max-width:576px){.offcanvas-bottom{height:75vh}}

/* Inline reject panel */
.reject-row .reject-panel{background:#fff;border:1px solid #eee;border-radius:.5rem;box-shadow:0 6px 20px rgba(0,0,0,.06);padding:1rem}
.reject-row .reject-form .form-control{border-color:#dee2e6}
.reject-row .reject-form .form-control:focus{border-color:var(--color-primary);box-shadow:0 0 0 .25rem rgba(31,166,226,.15)}

/* Support notice toast */
#supportNotice{position:fixed;right:1rem;bottom:1rem;z-index:1080;max-width:320px;opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;box-shadow:0 6px 18px rgba(0,0,0,.12);border:1px solid #b6d4fe}
#supportNotice.show{opacity:1;transform:translateY(0)}
#supportNotice.alert-info{background:#e7f1ff;color:#0d6efd}