:root{--bg: #f4f6f7;--surface: #ffffff;--ink: #102022;--accent: #0a7ea4;--accent-dark: #085f7d;--warning: #ab2f2f;--ok: #237d3f;--border: #d9e0e4;--shadow: 0 12px 32px rgba(16, 32, 34, .12)}*{box-sizing:border-box}body{margin:0;font-family:Space Grotesk,sans-serif;color:var(--ink);background:radial-gradient(circle at 10% 10%,#d7eef4 0,transparent 32%),radial-gradient(circle at 90% 20%,#e8f5d7 0,transparent 30%),linear-gradient(180deg,#ecf2f4 0%,var(--bg) 100%)}a{color:var(--accent-dark)}.app-shell{width:min(1200px,95vw);margin:0 auto;padding:24px 0 40px}.app-shell-dashboard{width:min(1400px,96vw);display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start}.app-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}.app-brand-block{display:grid;gap:8px;max-width:100%}.app-header h1{margin:0;font-size:clamp(1.4rem,2vw,2rem)}.app-header p{margin:4px 0 0;opacity:.8}.app-header nav{display:flex;align-items:center;gap:10px}.dashboard-main{min-width:0}.dashboard-topbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}.dashboard-topbar h1{margin:0;font-size:clamp(1.2rem,2vw,1.7rem)}.dashboard-topbar p{margin:4px 0 0;opacity:.78}.topbar-heading{display:flex;align-items:center;gap:10px;min-width:0}.dss-branding{display:inline-flex;align-items:center;gap:10px;max-width:100%;min-width:0}.dss-logo{display:block;object-fit:contain}.dss-logo-seal{width:46px;height:46px;border-radius:50%}.dss-logo-wide{height:46px;max-width:min(620px,100%)}.dss-branding-compact .dss-logo-seal{width:38px;height:38px}.dss-branding-compact .dss-logo-wide{height:34px}.dss-branding-icon .dss-logo-seal{width:30px;height:30px}.dss-branding-icon .dss-logo-wide{display:none}.dss-logo-fallback{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:32px;padding:0 10px;border-radius:8px;background:#e6f4f9;border:1px solid #b9dce6;color:#0b607c;font-weight:700;letter-spacing:.04em}.side-brand .dss-branding{margin-bottom:4px;width:100%;min-width:0}.side-brand .dss-branding-compact .dss-logo-seal{display:none}.side-brand .dss-branding-compact .dss-logo-wide{width:100%;max-width:100%;height:auto}.login-branding{margin-bottom:10px}.dashboard-body{display:grid;gap:18px}.menu-toggle{display:none;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--ink);font-weight:700;padding:8px 12px}.side-nav{position:sticky;top:18px;max-height:calc(100vh - 36px);display:grid;grid-template-rows:auto 1fr auto;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--shadow);overflow-y:auto;overflow-x:hidden}.side-brand h2{margin:0;font-size:1rem}.side-brand p{margin:4px 0 0;font-size:.9rem;opacity:.78}.side-menu{display:grid;gap:12px}.side-section{display:grid;gap:8px}.side-section-title{margin:0;text-transform:uppercase;letter-spacing:.05em;font-size:.73rem;color:#587076}.side-links{display:grid;gap:6px}.side-link{padding:9px 10px;border-radius:10px;border:1px solid transparent;color:#183338;text-decoration:none;font-weight:600;transition:background .2s ease,border-color .2s ease}.side-link:hover{background:#f2f8fa;border-color:#d1e2e7}.side-link.active{background:#e6f4f9;border-color:#b9dce6;color:#0b607c}.side-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.side-overlay{display:none}.pill{padding:6px 10px;border-radius:999px;background:#e1eef2;font-size:.85rem}main{display:grid;gap:18px}.hero-grid{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:18px}.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}.card-auth{animation:reveal .5s ease-out}.callout{animation:reveal .7s ease-out}.stack{display:grid;gap:16px}.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}.employee-form-compact{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;align-items:end}.employee-form-compact input{padding:8px 10px}.employee-form-compact .file-upload-field{grid-column:span 2}.employee-form-compact .file-upload-control{padding:8px}.employee-form-compact>button[type=submit]{justify-self:start;width:auto;padding:9px 14px}.vendor-card{overflow:hidden}.vendor-form{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start}.vendor-form>input,.vendor-form>label,.vendor-form>div{min-width:0}.vendor-row{grid-column:1 / -1;display:grid;gap:10px;min-width:0}.vendor-row.two-col{grid-template-columns:repeat(2,minmax(220px,1fr))}.date-input-with-picker{position:relative;display:flex;align-items:center;min-width:0}.date-input-with-picker input[type=text]{flex:1;min-width:0;padding-right:44px}.calendar-icon-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:#4a6268;padding:0}.calendar-icon-btn svg{width:16px;height:16px;fill:currentColor}.calendar-icon-btn:hover{background:#e7f2f6;color:#0a7ea4}.calendar-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.file-upload-field{display:grid;gap:6px}.file-upload-control{display:flex;align-items:center;gap:10px;min-width:0;padding:10px;border:1px dashed var(--border);border-radius:10px;background:#f7fbfc;flex-wrap:wrap}.file-trigger{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--accent-dark);border-radius:8px;background:var(--accent);color:#fff;font-weight:700;padding:7px 10px;cursor:pointer;text-decoration:none;white-space:nowrap;flex-shrink:0}.file-trigger:hover{background:var(--accent-dark)}.visually-hidden-file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.file-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;opacity:.9}.form-actions{grid-column:1 / -1;display:flex;justify-content:flex-end}.form-actions button{width:auto;min-width:220px}.credential-panel{margin-top:10px;border:1px solid var(--border);border-radius:12px;padding:12px;background:#f3fbf8}.credential-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.copy-btn{padding:7px 12px;min-width:90px}label{display:grid;gap:6px;font-weight:500}input,select,button,textarea{border:1px solid var(--border);border-radius:10px;padding:10px;font:inherit}button{cursor:pointer;border:none;background:var(--accent);color:#fff;font-weight:700;transition:background .2s ease}button:hover{background:var(--accent-dark)}button:disabled{opacity:.65;cursor:not-allowed}.ghost-btn{background:transparent;color:var(--ink);border:1px solid var(--border)}.error{color:var(--warning);font-weight:600}.success{color:var(--ok);font-weight:600}.toast{position:sticky;top:8px;z-index:25;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid transparent;box-shadow:0 8px 22px #00000014}.toast-error{background:#fff2f2;border-color:#f1c7c7;color:#8d2626}.toast-success{background:#ecf9f0;border-color:#c3e6ce;color:#1d6e39}.toast-close{min-width:28px;width:28px;height:28px;border:1px solid currentColor;border-radius:8px;background:transparent;color:inherit;font-size:1rem;line-height:1;padding:0}.toast-close:hover{background:#0000000d}.note{font-size:.9rem;opacity:.8}.search-row{margin-top:10px}.filter-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.search-input{width:min(420px,100%);background:#fff}.checkbox-row{display:inline-flex;align-items:center;gap:8px;font-weight:600}.checkbox-row input[type=checkbox]{width:16px;height:16px;margin:0}.doc-lock-note{margin:0;align-self:center;color:#6a4444}table{width:100%;border-collapse:collapse;overflow:hidden}th,td{border-bottom:1px solid var(--border);text-align:left;padding:10px 8px;vertical-align:top}.due-date{font-weight:700;color:var(--warning)}.doc-review-cell{min-width:220px}.doc-review-badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:.78rem;font-weight:700}.doc-review-badge.rejected{background:#fdeeee;color:#ab2f2f}.doc-review-badge.pending{background:#fff6e8;color:#9a6115}.doc-review-badge.approved{background:#e9f7ee;color:#1f7a3f}.doc-review-badge.neutral{background:#eef3f5;color:#4f666c}.doc-review-list{margin:6px 0 0;padding-left:16px;font-size:.85rem}.employee-card{border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:10px}.employee-card header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.profile-thumb{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--border);background:#eef3f5}.doc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin:10px 0}.doc-item{border:1px dashed var(--border);border-radius:10px;padding:8px;display:grid;gap:6px}.doc-status{display:inline-block;width:fit-content;padding:3px 8px;border-radius:999px;font-size:.78rem;font-weight:700}.doc-status-pending{background:#eef3f5;color:#4f666c}.doc-status-approved{background:#e9f7ee;color:#1f7a3f}.doc-status-rejected{background:#fdeeee;color:#ab2f2f}.doc-remarks{color:#6b3636}.inline-actions{display:flex;gap:8px;flex-wrap:wrap}.id-card-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;padding:10px}.vendor-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}.vendor-summary-card{border:1px solid var(--border);border-radius:12px;padding:12px;background:linear-gradient(180deg,#f8fcfe,#fff)}.vendor-summary-card-btn{width:100%;text-align:left;color:var(--ink);font:inherit;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}.vendor-summary-card-btn:hover{background:linear-gradient(180deg,#eef8fc,#fff);border-color:#b6d6e2}.vendor-summary-card-btn.active{border-color:var(--accent);box-shadow:0 0 0 2px #0a7ea426}.vendor-name{margin:0 0 8px;font-weight:700}.vendor-count{margin:0;font-size:1.4rem;font-weight:800;color:var(--accent-dark)}.vendor-meta{margin:4px 0 0;font-size:.88rem;opacity:.78}.calendar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}.calendar-card{border:1px solid var(--border);border-radius:10px;padding:10px;background:#f7fbfc}.id-card-page{min-height:100vh;display:grid;place-items:center;gap:.8rem;padding:1rem}.id-card-stack{display:grid;grid-template-columns:repeat(2,53.98mm);gap:1.8mm;align-items:start}.id-card-printable{width:53.98mm;height:85.6mm;background:#fffefb;color:#171717;border:.35mm solid #4c4c4c;border-radius:2mm;padding:1.4mm 1.6mm;display:grid;grid-template-rows:auto 1fr;gap:1.2mm;overflow:hidden;box-shadow:0 12px 30px #0d20362e;font-family:Arial Narrow,Trebuchet MS,Segoe UI,sans-serif;print-color-adjust:exact;-webkit-print-color-adjust:exact}.id-card-front{position:relative}.nsry-title{padding:0;font-size:4.2mm;line-height:1;font-weight:700;text-align:center;letter-spacing:.03mm}.nsry-front-top{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:2mm}.nsry-logo{width:18mm;height:18mm;object-fit:cover;border-radius:50%;border:.22mm solid #4b4b4b;justify-self:center}.nsry-photo{width:18mm;height:20mm;object-fit:cover;border:.22mm solid #4b4b4b;justify-self:center}.nsry-barcode-block{display:grid;gap:.25mm}.id-card-barcode-wrap{width:100%;height:10.5mm;display:flex;align-items:center;justify-content:center;overflow:hidden}.id-card-barcode-wrap svg{width:100%;height:100%}.nsry-barcode-text{margin:0;font-size:2mm;line-height:1;font-weight:700;letter-spacing:.06mm;text-align:center}.nsry-info-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:2.1mm;line-height:2.15}.nsry-info-table th,.nsry-info-table td{border:0;border-bottom:0;margin:0;padding:.5mm 0;text-align:left;vertical-align:top}.nsry-info-table th{width:18mm;font-weight:700;padding-right:1.2mm;background:transparent}.nsry-info-table td{font-weight:400;overflow-wrap:anywhere;word-break:break-word}.nsry-issuing-authority{margin:0;border-top:.22mm solid #4b4b4b;padding-top:.5mm;padding-bottom:.5mm;font-size:2.15mm;font-weight:700;line-height:1.1}.id-card-backside{display:grid;grid-template-rows:auto 1fr auto auto;gap:1mm}.nsry-back-title{padding:0;font-size:2.5mm;line-height:1.05;font-weight:700;text-align:center;text-decoration:underline;letter-spacing:.03mm}.nsry-back-list{margin:0;padding-left:4.2mm;display:grid;gap:.45mm;font-size:2.4mm;line-height:1.2}.nsry-back-list li{margin:0}.nsry-validity-heading{margin:0;font-size:3.8mm;line-height:1;text-align:center}.nsry-validity-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:2.55mm}.nsry-validity-table th,.nsry-validity-table td{border:.23mm solid #4b4b4b;padding:.9mm .8mm;text-align:left;height:6.2mm}.nsry-validity-table th{height:auto;text-align:center;font-weight:700;background:#f7f5ef}@keyframes reveal{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:860px){.hero-grid{grid-template-columns:1fr}.employee-form-compact .file-upload-field{grid-column:auto}.employee-form-compact>button[type=submit]{justify-self:stretch;width:100%}.vendor-row.two-col{grid-template-columns:1fr}.app-header{flex-direction:column;align-items:flex-start}.dss-logo-wide{height:32px;max-width:100%}.topbar-heading{align-items:flex-start}.file-upload-control{flex-direction:column;align-items:stretch}.file-name{white-space:normal;word-break:break-word}.form-actions{justify-content:stretch}.form-actions button{width:100%;min-width:0}}@media(max-width:980px){.app-shell-dashboard{grid-template-columns:1fr}.menu-toggle{display:inline-flex}.side-nav{position:fixed;top:0;left:0;width:min(85vw,320px);height:100vh;max-height:none;border-radius:0 14px 14px 0;z-index:1002;transform:translate(-110%);transition:transform .22s ease}.side-nav.open{transform:translate(0)}.side-overlay.show{display:block;position:fixed;top:0;right:0;bottom:0;left:0;border:none;margin:0;padding:0;background:#00000052;z-index:1001}}@media print{@page{size:107.96mm 85.6mm;margin:0}html,body{width:107.96mm;height:85.6mm;margin:0;padding:0;background:#fff}body{background:#fff}.dashboard-topbar,.side-nav,.side-overlay,.inline-actions{display:none!important}.app-shell,.app-shell-dashboard{display:block!important;width:auto!important;margin:0!important;padding:0!important}.id-card-page{display:block;min-height:0;padding:0;margin:0;gap:0}.id-card-stack{display:grid;grid-template-columns:repeat(2,53.98mm);gap:0}.id-card-printable{width:53.98mm;height:85.6mm;border-radius:0;box-shadow:none;margin:0}.id-card-page>button{display:none}}
