:root{--side:#15324b;--side2:#224e70;--bg:#f3f6f9;--accent:#2477d8}*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Inter,Segoe UI,Arial,sans-serif;color:#24313d}.app{display:flex;min-height:100vh}.sidebar{width:275px;background:linear-gradient(180deg,var(--side),#0d263a);color:#fff;position:fixed;inset:0 auto 0 0;overflow:auto}.brand{padding:19px;font-size:19px;border-bottom:1px solid #ffffff18;display:flex;gap:10px;align-items:center}.brand small{font-size:10px;color:#96c8ed}.sidebar nav{padding:10px}.sidebar a{display:flex;align-items:center;gap:10px;color:#dbe8f2;text-decoration:none;padding:9px 12px;border-radius:8px;margin:2px 0;font-size:13.5px}.sidebar a:hover,.sidebar a.active{background:var(--side2);color:#fff}.nav-title{font-size:10px;letter-spacing:1.1px;color:#8fb0ca;padding:14px 12px 5px}.content{margin-left:275px;flex:1}.topbar{min-height:72px;background:#fff;border-bottom:1px solid #dde3e8;display:flex;justify-content:space-between;align-items:center;padding:0 24px;position:sticky;top:0;z-index:10}.page{padding:24px}.user-chip{background:#f0f5fa;border:1px solid #dae4ee;border-radius:18px;padding:7px 12px}.kpi{background:#fff;border:1px solid #e2e8ee;border-radius:12px;padding:18px;height:100%}.kpi .n{font-size:26px;font-weight:700}.kpi .trend{font-size:12px;color:#6f8191}.card{border:1px solid #e1e6eb;border-radius:12px}.table thead th{font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:#667788;background:#f8fafb;white-space:nowrap}.table td{vertical-align:middle}.status{font-size:11px;padding:4px 8px;border-radius:20px;background:#eef4fa;white-space:nowrap}.pdc-popup{position:fixed;right:18px;bottom:18px;width:370px;max-height:410px;overflow:auto;background:#fff;border-radius:12px;border:1px solid #dfe5eb;z-index:100}.pdc-head{padding:12px 14px;background:#fff5e8;border-bottom:1px solid #f0dfc6;display:flex;justify-content:space-between}.pdc-head a{text-decoration:none}.pdc-item{padding:10px 14px;display:flex;justify-content:space-between;border-bottom:1px solid #eef2f4}.module-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.module-tile{background:#fff;border:1px solid #e1e6eb;border-radius:10px;padding:15px;text-decoration:none;color:inherit}.module-tile:hover{border-color:#9ebfe1;box-shadow:0 3px 12px #0000000d}.nowrap{white-space:nowrap}@media(max-width:900px){.sidebar{width:75px}.sidebar a span,.nav-title,.brand span{display:none}.sidebar a i{font-size:18px}.content{margin-left:75px}.pdc-popup{width:calc(100% - 110px)}.topbar{padding:0 12px}}/* v2.1 company profile + executive dashboard */
.sidebar-logo{width:34px;height:34px;object-fit:contain;background:#fff;border-radius:8px;padding:3px}.company-logo-preview{max-width:150px;max-height:72px;object-fit:contain;border:1px solid #e1e6eb;border-radius:8px;padding:5px;background:#fff}.dashboard-hero{background:linear-gradient(120deg,#173b61,#276eaa);color:#fff;border-radius:16px;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 8px 24px #123b5d22}.dashboard-logo{width:72px;height:72px;object-fit:contain;background:#fff;border-radius:14px;padding:7px}.dashboard-logo-fallback{width:72px;height:72px;border-radius:14px;background:#ffffff22;display:grid;place-items:center;font-size:30px}.eyebrow{font-size:11px;letter-spacing:1.4px;font-weight:700;opacity:.8}.hero-date{background:#ffffff18;border:1px solid #ffffff2f;border-radius:20px;padding:8px 13px;white-space:nowrap}
.kpi{overflow:hidden}.kpi-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.kpi-label{font-size:12px;font-weight:700;letter-spacing:.25px;opacity:.8;text-transform:uppercase}.kpi-value{font-size:clamp(16px,1.25vw,21px);font-weight:800;line-height:1.12;margin-top:8px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.kpi-icon{font-size:27px;opacity:.75}.kpi-foot{font-size:11px;margin-top:14px;opacity:.75}.kpi-color-blue{background:linear-gradient(135deg,#e8f2ff,#fff);border-left:5px solid #2477d8}.kpi-color-teal{background:linear-gradient(135deg,#e5fbf8,#fff);border-left:5px solid #159d92}.kpi-color-purple{background:linear-gradient(135deg,#f1eaff,#fff);border-left:5px solid #7950c9}.kpi-color-red{background:linear-gradient(135deg,#ffecee,#fff);border-left:5px solid #dc4c64}.kpi-color-orange{background:linear-gradient(135deg,#fff3df,#fff);border-left:5px solid #e88a1a}.kpi-color-indigo{background:linear-gradient(135deg,#ebefff,#fff);border-left:5px solid #526ed3}.kpi-color-green{background:linear-gradient(135deg,#eaf9ee,#fff);border-left:5px solid #2c9c50}.kpi-color-cyan{background:linear-gradient(135deg,#e8f8fc,#fff);border-left:5px solid #2795ad}.dashboard-pdc{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid #eef2f4}.dashboard-pdc:last-child{border-bottom:0}.flow-chip{background:#edf4fb;color:#30516f;border:1px solid #d9e6f2}
@media(max-width:650px){.dashboard-hero{align-items:flex-start;gap:14px;flex-direction:column}.hero-date{align-self:flex-start}.kpi-value{font-size:18px}}

/* v2.2 authentication */
.auth-bg{background:radial-gradient(circle at top right,#e7f3ff 0,#f5f8fb 42%,#eef3f7 100%);min-height:100vh}
.auth-card{border-radius:18px;overflow:hidden}
.auth-logo{width:min(290px,82%);height:150px;object-fit:contain;object-position:center}

/* v2.3 compact branded authentication screens */
.auth-bg{position:relative;min-height:100vh;background-image:url('auth-background.png');background-size:cover;background-position:center center;background-repeat:no-repeat;background-attachment:fixed;overflow-x:hidden}
.auth-bg::before{content:"";position:fixed;inset:0;background:linear-gradient(90deg,rgba(8,34,58,.56),rgba(18,63,98,.24) 42%,rgba(5,31,55,.50));z-index:0;pointer-events:none}
.auth-overlay{position:fixed;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(4,27,48,.16));backdrop-filter:blur(1.6px);z-index:0;pointer-events:none}
.auth-page{position:relative;z-index:1}
.auth-panel-col{width:100%;max-width:340px;padding:14px}
.auth-card{border-radius:16px;overflow:hidden;background:rgba(255,255,255,.965);box-shadow:0 18px 55px rgba(4,29,49,.32)!important;border:1px solid rgba(255,255,255,.6)!important}
.auth-card-body{padding:24px 25px 22px}
.auth-logo{width:min(220px,78%);height:104px;object-fit:contain;object-position:center}
.auth-subtitle{font-size:12px;letter-spacing:.25px}
.auth-input{min-height:40px;font-size:14px;border-radius:8px}
.auth-btn{min-height:41px;font-size:14px;font-weight:700;border-radius:8px;box-shadow:0 5px 15px rgba(36,119,216,.2)}
.auth-trust{font-size:10.5px;color:#7b8b98;letter-spacing:.12px}
.auth-bg-logout .auth-card-body{padding-top:25px;padding-bottom:24px}
@media(max-width:576px){.auth-bg{background-position:56% center;background-attachment:scroll}.auth-panel-col{max-width:320px;padding:12px}.auth-card-body{padding:21px 21px 20px}.auth-logo{height:92px;width:min(205px,78%)}}

/* v2.4.3 professional job card */
.job-shell{background:#fff;border:1px solid #dfe7ef;border-radius:16px;overflow:hidden;box-shadow:0 8px 28px rgba(25,54,78,.06)}
.job-head{background:linear-gradient(115deg,#143d63,#236ca4);color:#fff;padding:22px 24px}
.job-head-grid{display:flex;justify-content:space-between;gap:22px;align-items:flex-start}
.job-number{font-size:28px;font-weight:800;letter-spacing:.2px;line-height:1.05}
.job-sub{font-size:12px;opacity:.82;margin-top:7px}.job-badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.job-badge{font-size:10px;font-weight:800;letter-spacing:.45px;padding:5px 9px;border-radius:20px;background:#ffffff20;border:1px solid #ffffff32}
.job-control{background:#fff;padding:14px 18px;border-bottom:1px solid #e8eef3}.job-control .form-select,.job-control .form-control{font-size:12px;min-height:36px}
.job-section{padding:18px 20px;border-bottom:1px solid #edf1f4}.job-section:last-child{border-bottom:0}
.job-section-title{font-size:11px;text-transform:uppercase;letter-spacing:1px;font-weight:800;color:#597188;margin-bottom:13px}
.job-info{background:#f8fafc;border:1px solid #e7edf2;border-radius:10px;padding:11px 12px;height:100%}
.job-info-label{font-size:10px;text-transform:uppercase;letter-spacing:.45px;color:#7a8b99;font-weight:700;margin-bottom:4px}
.job-info-value{font-size:13px;font-weight:700;color:#263b4c;overflow-wrap:anywhere}
.job-description{font-size:13px;line-height:1.55;color:#425667;background:#f8fafc;border-left:3px solid #2477d8;border-radius:6px;padding:12px 14px}
.job-finance .kpi{padding:14px}.job-finance .kpi .n{font-size:18px;overflow-wrap:anywhere}.job-finance .text-muted{font-size:11px}
.job-progress{display:grid;grid-template-columns:repeat(11,minmax(90px,1fr));gap:6px;overflow-x:auto;padding-bottom:5px}
.job-step{position:relative;text-align:center;background:#f4f7fa;border:1px solid #dfe7ee;border-radius:8px;padding:10px 7px;min-width:90px}
.job-step .step-no{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;margin:0 auto 6px;background:#dbe8f3;color:#315b7b;font-size:10px;font-weight:800}
.job-step .step-name{font-size:9.5px;font-weight:700;color:#536b7d;line-height:1.2}
.job-step.active{background:#e9f4ff;border-color:#91bce0}.job-step.active .step-no{background:#2477d8;color:#fff}
.job-timeline-item{position:relative;border-left:2px solid #dbe6ef;padding:0 0 16px 18px;margin-left:5px}
.job-timeline-item:before{content:"";position:absolute;left:-6px;top:3px;width:10px;height:10px;border-radius:50%;background:#2477d8;border:2px solid #fff;box-shadow:0 0 0 1px #a9c6dd}
.job-timeline-time{font-size:10px;color:#81919d}.job-timeline-title{font-size:12px;font-weight:800;color:#334c60}.job-timeline-text{font-size:11px;color:#617482}
.job-table td,.job-table th{font-size:11px}
@media print{.sidebar,.topbar,.pdc-popup,.job-control,.no-print{display:none!important}.content{margin-left:0!important}.page{padding:0!important}.job-shell{box-shadow:none;border:0}.job-head{-webkit-print-color-adjust:exact;print-color-adjust:exact}.job-section{break-inside:avoid}}
@media(max-width:900px){.job-head-grid{flex-direction:column}.job-number{font-size:23px}.job-progress{grid-template-columns:repeat(11,100px)}}

/* v2.4.4 approved Create Job Card UI */
.job-create-board{border:3px solid #178ee8;border-radius:14px;background:#fff;padding:10px;box-shadow:0 10px 30px rgba(23,89,145,.08)}
.job-create-head{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 14px;border-bottom:1px solid #d9e9f6}.job-create-title{font-size:25px;font-weight:800;color:#124b87}.job-create-sub{font-size:12px;color:#56738d}.job-create-brand{text-align:right;color:#11509a;font-weight:800}
.job-form-section{border:1px solid #cfe4f5;border-radius:9px;margin:10px 0;overflow:hidden}.job-form-section-title{background:linear-gradient(90deg,#e9f4ff,#d9ebfb);padding:8px 13px;color:#0c4d9b;font-weight:800;font-size:14px}.job-form-body{padding:12px}
.job-create-board .form-label{font-weight:800!important;color:#123f76;font-size:11px!important;text-transform:uppercase;letter-spacing:.15px;margin-bottom:5px}.job-create-board .form-control,.job-create-board .form-select{border-color:#a9c8e3;font-size:12px;min-height:38px}.job-create-board .form-control:focus,.job-create-board .form-select:focus{border-color:#168ee8;box-shadow:0 0 0 .18rem rgba(22,142,232,.12)}.req{color:#dc3545}.job-actions{display:flex;justify-content:flex-end;gap:9px;padding:8px 2px 2px}.job-actions .btn{min-width:130px;font-weight:700}
@media(max-width:768px){.job-create-head{align-items:flex-start;flex-direction:column;gap:8px}.job-create-brand{text-align:left}.job-create-board{border-width:2px}.job-actions{flex-direction:column}.job-actions .btn{width:100%}}

/* ImportFlow ERP v2.4.5 - unified approved Job Card appearance */
:root{--if-blue:#075c9f;--if-blue2:#0b79c9;--if-line:#26a9f4;--if-soft:#edf6ff;--if-soft2:#dfefff;--if-ink:#123d68}
.page>.card,.page>.row>.col-lg-4>.card,.page>.row>.col-lg-5>.card,.page>.row>.col-lg-6>.card,.page>.row>.col-lg-7>.card,.page>.row>.col-lg-8>.card,.page>.row>.col-lg-9>.card{
 border:1.5px solid #8fcaf0;border-radius:12px;box-shadow:0 4px 15px rgba(20,74,115,.055);overflow:hidden
}
.page .card-body{padding:17px 18px}
.page .card-body>h5:first-child,.page .card-body>h4:first-child,.page .card-body>h3:first-child{
 color:var(--if-ink);font-weight:800;border-bottom:1px solid #c9e5f8;
 background:linear-gradient(90deg,var(--if-soft2),#f7fbff);
 margin:-17px -18px 16px;padding:11px 16px;font-size:15px
}
.page label,.page .form-label{font-weight:800;color:#0b3f78;font-size:11px;text-transform:uppercase;letter-spacing:.18px}
.page .form-control,.page .form-select{border:1px solid #a9cbe4;border-radius:7px;min-height:38px;font-size:12px}
.page .form-control:focus,.page .form-select:focus{border-color:#159ee9;box-shadow:0 0 0 .16rem rgba(21,158,233,.13)}
.page textarea.form-control{min-height:72px}
.page .btn{border-radius:6px;font-weight:700;font-size:12px}
.page .btn-primary{background:linear-gradient(180deg,#168bd8,#0871bd);border-color:#0871bd}
.page .table{border:1px solid #b9d8ec}
.page .table thead th{background:linear-gradient(180deg,#e7f3fd,#d7ebfa);color:#0d467c;font-weight:800;text-transform:uppercase;font-size:10px;border-color:#b9d8ec;white-space:nowrap}
.page .table tbody td{font-size:11.5px;border-color:#e0ebf3;vertical-align:middle}
.page .table tbody tr:hover{background:#f3f9fe}
.page .alert{border-radius:8px;border-width:1px}
.page .kpi{border:1.5px solid #9dcff0;border-top:4px solid #168bd8;border-radius:10px;box-shadow:0 3px 12px rgba(20,74,115,.05)}
.page .kpi .n,.page .kpi-value{font-size:clamp(16px,1.2vw,20px)!important}
.page .status{font-weight:800}
.module-blue-frame{border:2px solid var(--if-line)!important;border-radius:12px!important;box-shadow:0 0 0 4px rgba(38,169,244,.055)!important}
.module-section-title{font-size:12px;text-transform:uppercase;letter-spacing:.35px;font-weight:800;color:#0753a1;background:linear-gradient(90deg,#dceeff,#f4f9ff);border-radius:6px;padding:8px 10px;margin-bottom:12px}
.topbar h5{font-weight:800;color:#123f69}.sidebar{background:linear-gradient(180deg,#073e6b,#062f52)}
.sidebar a:hover{background:#0b73b9}.sidebar a.active{background:#0b84d5;color:#fff}
@media(max-width:768px){.page .card-body{padding:14px}.page .card-body>h5:first-child,.page .card-body>h4:first-child,.page .card-body>h3:first-child{margin:-14px -14px 14px}.page label,.page .form-label{font-size:10px}}