:root{--sidebar:#f5f8fc;--sidebar2:#eef3f8;--sidebar-text:#3f4f67;--sidebar-text-muted:#718096;--sidebar-active:#dce9f9;--accent:#315fd5;--bg:#f4f6fa;--border:#dfe5ee}*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;background:var(--bg);color:#202838;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:260px;background:linear-gradient(180deg,var(--sidebar),var(--sidebar2));color:var(--sidebar-text);display:flex;flex-direction:column;z-index:1000;border-right:1px solid #d8e0eb;transition:width .2s,transform .2s}.sidebar-brand{min-height:72px;display:flex;align-items:center;padding:10px 16px;font-weight:700;font-size:15px;border-bottom:1px solid #d8e0eb;color:#27364d}.app-logo{width:46px;height:46px;border-radius:10px;object-fit:cover;background:#fff;flex:0 0 auto;margin-right:10px}.sidebar-brand-text{line-height:1.2}.sidebar .nav{padding:14px 10px}.sidebar .nav-link{color:var(--sidebar-text);border-radius:10px;margin:3px 0;padding:11px 13px;display:flex;gap:10px;align-items:center;font-weight:500}.sidebar .nav-link:hover,.sidebar .nav-link.active{background:var(--sidebar-active);color:#1f4e9a}.sidebar-bottom{margin-top:auto;padding:16px;border-top:1px solid #d8e0eb}.main-content{margin-left:260px;min-height:100vh;transition:margin-left .2s}.topbar{height:72px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 20px;position:sticky;top:0;z-index:500}.sidebar-toggle{width:42px;height:40px;padding:0;font-size:20px}.topbar-title-wrap{min-width:0}.page-title{font-size:21px;margin:0}.app-name-small{font-size:11px;color:#8a95a8;margin-top:1px}.user-menu-wrap{position:relative}.user-menu-button{display:flex;align-items:center;gap:9px;border:1px solid #dfe5ee;background:#fff;border-radius:10px;padding:5px 9px;cursor:pointer}.user-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#e8eef9;display:inline-grid;place-items:center}.user-avatar-fallback{font-weight:700;color:#3457a4}.user-menu-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}.user-menu-text strong{font-size:12px}.user-menu-text small{font-size:10px;color:#76839a;margin-top:3px}.user-chevron{font-size:12px;color:#718096}.user-dropdown{position:absolute;right:0;top:calc(100% + 7px);width:210px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 30px rgba(20,35,60,.14);padding:7px;z-index:1500}.user-dropdown-head{padding:9px 10px;border-bottom:1px solid #edf0f5;margin-bottom:4px;display:flex;flex-direction:column}.user-dropdown-head strong{font-size:13px}.user-dropdown-head span{font-size:11px;color:#76839a;margin-top:2px}.user-dropdown a{display:block;padding:9px 10px;border-radius:8px;color:#27364d;text-decoration:none}.user-dropdown a:hover{background:#f3f6fa}.content-area{padding:22px}.card{border:1px solid var(--border);box-shadow:0 2px 10px rgba(20,30,55,.04);border-radius:14px;background:#fff}.metric-card{padding:18px}.metric-value{font-size:28px;font-weight:800}.muted-label{font-size:12px;color:#7c879b;text-transform:uppercase;letter-spacing:.05em}.notes-fab{position:fixed;right:24px;bottom:24px;width:54px;height:54px;border:0;border-radius:50%;background:var(--accent);color:#fff;font-size:22px;box-shadow:0 10px 25px rgba(49,95,213,.35);z-index:1200}.notes-popover{display:none;position:fixed;right:24px;bottom:90px;width:330px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:0 16px 40px rgba(30,40,70,.18);z-index:1201}.notes-popover.show{display:block}.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#eef3fb,#f8fafc)}.login-card{width:min(420px,92vw);background:#fff;border:1px solid var(--border);border-radius:18px;padding:30px;box-shadow:0 20px 50px rgba(33,50,80,.12)}.login-logo{display:block;width:84px;height:84px;object-fit:cover;border-radius:16px;margin:0 auto}.login-card h1{text-align:center;font-size:22px;margin:14px 0 5px}.login-card p{text-align:center}.custom-data-table{min-width:2600px;border-collapse:separate;border-spacing:0;font-size:12px}.project-table-shell{overflow:auto;max-width:100%;max-height:68vh;border:1px solid var(--border);border-radius:8px;background:#fff}.custom-data-table th,.custom-data-table td{white-space:nowrap;background:#fff;border-color:#e4e8f0!important;vertical-align:middle}.custom-data-table thead th{position:sticky;top:0;z-index:20;background:#f3f6fa;color:#39465b;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.custom-data-table th:nth-child(1),.custom-data-table td:nth-child(1){position:sticky;left:0;z-index:30;min-width:130px;width:130px;background:#fff;box-shadow:1px 0 0 rgba(40,55,80,.08)}.custom-data-table th:nth-child(2),.custom-data-table td:nth-child(2){position:sticky;left:130px;z-index:30;min-width:115px;width:115px;background:#fff;box-shadow:4px 0 7px -7px rgba(40,55,80,.55)}.custom-data-table thead th:nth-child(1),.custom-data-table thead th:nth-child(2){z-index:40;background:#edf2f7}.custom-data-table tbody tr:hover td{background:#fbfcfe}.custom-data-table tbody tr.new-project-row td{background:#eaf3ff!important;border-top:2px solid #6a95df!important;border-bottom:2px solid #6a95df!important}.custom-data-table tbody tr.is-row-editing td{background:#fffbea!important}.custom-data-table .excel-editor{min-width:115px;border:1px solid #cfd8e6;border-radius:4px;background:#fff;color:#202838;font-size:12px;padding:4px 6px}.custom-data-table textarea.excel-editor{min-height:42px;resize:vertical;white-space:normal}.custom-data-table .excel-editor:focus{border-color:#3563e9;box-shadow:0 0 0 2px rgba(53,99,233,.13);outline:none}.custom-data-table .table-actions-cell{min-width:130px}.custom-data-table .table-actions{display:flex;align-items:center;justify-content:center;gap:4px}.custom-data-table .row-save,.custom-data-table .row-cancel,.custom-data-table .row-edit,.custom-data-table .row-clear{padding:2px 7px;line-height:1.25}.new-badge{display:block;margin-top:3px;text-align:center;font-size:9px;font-weight:700;color:#3563e9;letter-spacing:.04em}.status-pill{display:inline-block;font-size:10px;padding:3px 7px;border-radius:999px;font-weight:700}.status-completed{background:#e7f7ed;color:#147d3f}.status-pending{background:#fff3db;color:#a56600}.status-onprocess{background:#e9efff;color:#3153a5}.status-reject{background:#fde7e7;color:#a02323}.table-toolbar-actions .form-control,.table-toolbar-actions .form-select{height:32px}.readonly-box{background:#f8fafc;border:1px solid var(--border);border-radius:8px;padding:10px}.section-title{font-size:15px;font-weight:700;border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:14px}.sidebar-collapsed .sidebar{width:78px}.sidebar-collapsed .main-content{margin-left:78px}.sidebar-collapsed .sidebar-brand{justify-content:center;padding:10px}.sidebar-collapsed .sidebar-brand-text,.sidebar-collapsed .nav-label,.sidebar-collapsed .sidebar-bottom{display:none}.sidebar-collapsed .app-logo{margin-right:0}.sidebar-collapsed .nav-link{justify-content:center;padding-left:8px;padding-right:8px}.notification-badge{font-size:9px}@media(max-width:767px){.sidebar{transform:translateX(-100%);width:260px}.sidebar-open .sidebar{transform:translateX(0)}.main-content{margin-left:0}.content-area{padding:14px}.topbar{padding:0 12px}.user-menu-text{display:none}.user-menu-button{padding:5px 7px}.notes-popover{right:12px;left:12px;width:auto}}
.employee-photo-preview { object-fit: cover; border-radius: 50%; border: 1px solid #dee2e6; }

/* Employee modal fallback: edit/add works even when Bootstrap JS CDN is unavailable. */
.modal-open{overflow:hidden}
@media(max-width:767px){.modal.show{overflow-y:auto}}


/* v28 mobile responsiveness: only Actions (column 1) remains frozen on phones. */
.sidebar-overlay{display:none}
@media (max-width:767px){
  body{overflow-x:hidden}
  .app-shell{width:100%;overflow-x:hidden}
  .sidebar-overlay{display:block;position:fixed;inset:0;background:rgba(19,31,52,.38);z-index:900;opacity:0;pointer-events:none;transition:opacity .2s}
  .sidebar-open .sidebar-overlay{opacity:1;pointer-events:auto}
  .main-content{width:100%;min-width:0}
  .content-area{padding:10px}
  .topbar{min-height:60px;height:auto;padding:8px 10px;gap:8px}
  .topbar-title-wrap{overflow:hidden}
  .page-title{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sidebar-toggle{width:38px;height:38px;flex:0 0 38px}
  .topbar > .ms-auto{min-width:0;gap:5px!important}
  .topbar > .ms-auto > a.btn{width:36px;height:36px;padding:0;display:grid;place-items:center}
  .user-menu-button{max-width:46px;padding:4px}
  .user-menu-text,.user-chevron{display:none}
  .user-avatar{width:32px;height:32px}
  .user-dropdown{right:0;top:calc(100% + 5px);width:200px;max-width:calc(100vw - 20px)}
  .card-body{padding:12px}
  .project-table-heading{align-items:stretch!important}
  .project-table-heading > div:first-child{width:100%}
  .table-toolbar-actions{width:100%;margin-left:0!important;display:grid!important;grid-template-columns:1fr 1fr;gap:7px!important}
  .table-toolbar-actions .btn{width:100%}
  .table-toolbar-actions #addProjectDtBtn{grid-column:1 / -1}
  .table-toolbar-actions .form-control,.table-toolbar-actions .form-select{width:100%!important;min-width:0}
  .project-table-shell{max-height:calc(100vh - 255px);min-height:240px;border-radius:7px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .custom-data-table{min-width:2600px;font-size:11px}
  .custom-data-table th:nth-child(1),.custom-data-table td:nth-child(1){left:0;min-width:92px;width:92px;max-width:92px}
  .custom-data-table th:nth-child(2),.custom-data-table td:nth-child(2){position:static!important;left:auto!important;min-width:110px;width:110px;max-width:none;box-shadow:none!important;z-index:auto!important}
  .custom-data-table thead th:nth-child(1){z-index:45!important;position:sticky!important;left:0!important;background:#edf2f7}
  .custom-data-table thead th:nth-child(2){position:sticky!important;top:0!important;background:#edf2f7;z-index:20!important}
  .custom-data-table .table-actions-cell{min-width:92px;width:92px;max-width:92px;padding:3px}
  .custom-data-table .table-actions{justify-content:flex-start;overflow-x:auto;max-width:86px;padding-bottom:1px;-webkit-overflow-scrolling:touch}
  .custom-data-table .table-actions .btn{flex:0 0 auto;font-size:10px;padding:2px 5px}
  .custom-data-table .excel-editor{min-width:105px;font-size:11px}
  .custom-data-table th,.custom-data-table td{padding:5px 6px}
  .notes-fab{right:12px;bottom:12px;width:48px;height:48px}
  .notes-popover{right:10px;left:10px;bottom:70px;max-height:70vh;overflow:auto}
  .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-responsive>.table{min-width:650px}
  .modal-dialog{margin:.5rem}
  .modal-content{max-height:calc(100vh - 1rem);overflow:auto}
  .modal-body{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .form-control,.form-select,.btn{min-height:38px}
  .btn-sm{min-height:32px}
  .login-card{width:min(420px,94vw);padding:22px}
  .login-logo{width:72px;height:72px}
  .metric-card{padding:14px}
  .metric-value{font-size:24px}
}

@media (max-width:420px){
  .table-toolbar-actions{grid-template-columns:1fr}
  .table-toolbar-actions #addProjectDtBtn{grid-column:auto}
  .project-table-shell{max-height:calc(100vh - 275px)}
  .content-area{padding:8px}
  .card-body{padding:10px}
}