*{box-sizing:border-box}
:root{--bg:#f5f7fb;--panel:#fff;--line:#dfe5ee;--text:#1c2635;--muted:#6b778c;--nav:#0f2742;--primary:#1666c5;--primary2:#0d4f9e;--green:#1d9b69;--amber:#e2a52f;--red:#c94242}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button{cursor:pointer}
.app-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{background:linear-gradient(180deg,var(--nav),#0b1e33);color:#fff;padding:20px 14px;position:sticky;top:0;height:100vh;overflow:auto}.brand{display:flex;gap:12px;align-items:center;padding:2px 6px 18px}.brand-mark{width:42px;height:42px;border-radius:12px;background:#fff;color:var(--nav);display:grid;place-items:center;font-weight:800}.brand-title{font-weight:800}.brand-sub{font-size:12px;color:#bdc9d8;margin-top:2px}
.role-box{background:#ffffff10;border:1px solid #ffffff1c;border-radius:12px;padding:10px;margin:8px 0 16px}.role-box label{font-size:12px;color:#c9d4e2;display:block;margin-bottom:7px}.role-box select{width:100%;background:#173b61;color:#fff;border:1px solid #3a5d7f;border-radius:8px;padding:9px;margin-bottom:7px}.nav-item{width:100%;border:0;background:transparent;color:#cfdae7;text-align:left;padding:11px 12px;border-radius:9px;margin:3px 0}.nav-item:hover,.nav-item.active{background:#ffffff14;color:#fff}.sidebar-note{font-size:11px;color:#90a2b7;margin-top:18px;padding:12px}
.main{min-width:0;padding:0 24px 40px}.topbar{display:flex;justify-content:space-between;align-items:center;padding:24px 0 18px}.topbar h1{margin:0;font-size:26px}.topbar p{margin:4px 0 0;color:var(--muted)}.top-actions{display:flex;gap:10px;align-items:center}.pill{font-size:12px;font-weight:800;padding:6px 10px;border-radius:999px;background:#dbeaff;color:#1659a4}.view{display:none}.view.active{display:block}
.toolbar,.section-head,.dashboard-filters{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.toolbar{margin-bottom:10px}.toolbar-group{display:flex;gap:8px;align-items:center}.month-label{font-size:20px;font-weight:800;margin-left:8px}.btn{border:1px solid transparent;border-radius:9px;padding:9px 13px;font-weight:700}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary2)}.btn-light{background:#fff;border-color:var(--line);color:#314056}.btn-danger{background:#fff2f2;color:#b52e2e;border-color:#ffd0d0}.btn-success{background:#eaf8f2;color:#197c57;border-color:#b9e9d5}.input{border:1px solid #d8dee9;border-radius:8px;padding:9px 10px;background:#fff;outline:none;width:100%}.small-input{width:240px}.input:focus{border-color:#6ba4e5;box-shadow:0 0 0 3px #2d7dd21a}
.legend{display:flex;gap:18px;color:var(--muted);font-size:13px;margin:8px 0 12px}.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px}.dot-plan{background:#8ea9c8}.dot-open{background:#e2a52f}.dot-done{background:#1d9b69}.calendar{display:grid;grid-template-columns:repeat(7,1fr);background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}.cal-head{background:#f0f3f8;font-weight:800;text-align:center;padding:10px;border-right:1px solid var(--line)}.cal-day{min-height:150px;padding:8px;border-right:1px solid var(--line);border-top:1px solid var(--line);position:relative}.cal-day.muted{background:#fafbfc;color:#a0a8b4}.cal-day.today{box-shadow:inset 0 0 0 2px #5f9fe5}.day-num{font-weight:800;font-size:13px;margin-bottom:5px}.job-chip{border-left:4px solid #8ea9c8;background:#f4f7fb;border-radius:7px;padding:6px 7px;margin:5px 0;font-size:11px;cursor:pointer}.job-chip.open{border-color:#e2a52f;background:#fff9ec}.job-chip.closed{border-color:#1d9b69;background:#effaf6}.job-chip b{display:block}.job-chip .small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.more-jobs{font-size:11px;color:var(--primary);margin-top:5px;cursor:pointer}
.section-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:18px}.section-head{margin-bottom:15px}.section-head h2,.section-card h3{margin:0 0 4px}.section-head p,.section-card p{margin:0;color:var(--muted)}.job-list{display:grid;gap:10px}.job-row{display:grid;grid-template-columns:1.1fr 1fr 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:12px}.meta{font-size:12px;color:var(--muted);margin-top:4px}.status{display:inline-flex;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:800}.status-open{background:#fff5d8;color:#9b6d00}.status-closed{background:#e6f7f0;color:#167852}.status-plan{background:#edf2f7;color:#5a697b}.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.project-card{border:1px solid var(--line);border-radius:12px;padding:14px}.project-card h3{margin:0 0 6px}.project-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}.project-stat div{background:#f6f8fb;padding:9px;border-radius:8px;text-align:center}.project-stat b{display:block;font-size:16px}
.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px}th,td{padding:10px;border-bottom:1px solid #e8edf3;text-align:left;vertical-align:top}th{background:#f4f7fa}.dashboard-filters{background:#fff;border:1px solid var(--line);padding:12px;border-radius:12px;margin-bottom:14px}.dashboard-filters .input{width:auto;min-width:160px}.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:14px}.kpi-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px}.kpi-card span{font-size:12px;color:var(--muted)}.kpi-card b{display:block;font-size:25px;margin-top:4px}.dashboard-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}.bar-chart{display:grid;gap:9px;margin-top:15px}.bar-row{display:grid;grid-template-columns:100px 1fr 45px;gap:10px;align-items:center}.bar-track{height:16px;background:#eef2f6;border-radius:8px;overflow:hidden}.bar-fill{height:100%;background:linear-gradient(90deg,#2b70c9,#6ba5ea);border-radius:8px}.export-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:16px}.export-card{border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:8px}.export-card span{color:var(--muted);font-size:13px}
.modal{position:fixed;inset:0;background:#0a1730a6;display:none;align-items:center;justify-content:center;padding:20px;z-index:50}.modal.open{display:flex}.modal-panel{background:#fff;border-radius:15px;width:min(680px,96vw);max-height:90vh;overflow:auto;padding:18px}.modal-lg{width:min(900px,96vw)}.modal-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:15px}.modal-head h2{margin:0}.modal-head p{margin:4px 0 0;color:var(--muted)}.icon-btn{border:0;background:#f1f4f8;width:34px;height:34px;border-radius:9px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid label{font-size:13px;font-weight:700;display:grid;gap:6px}.span-2{grid-column:1/-1}.field-label{font-size:13px;font-weight:700;margin-bottom:7px}.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:7px;border:1px solid var(--line);padding:10px;border-radius:10px;max-height:220px;overflow:auto}.check-item{display:flex;gap:8px;align-items:center;font-size:13px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}.day-job-card{border:1px solid var(--line);border-radius:11px;padding:12px;margin:10px 0}.day-job-head{display:flex;justify-content:space-between;gap:10px}.tag-list{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}.tag{font-size:11px;background:#edf3fa;padding:4px 7px;border-radius:999px}.report-line{display:grid;grid-template-columns:40px 1.4fr .7fr 1.5fr 40px;gap:7px;align-items:center;margin:8px 0}.report-line .idx{text-align:center;font-weight:800}.remove-line{border:0;background:#fff0f0;color:#ba3535;border-radius:7px;height:36px}.report-meta{margin-top:12px}.toast{position:fixed;right:22px;bottom:22px;background:#172a42;color:#fff;padding:11px 14px;border-radius:10px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;z-index:100}.toast.show{opacity:1;transform:none}.hidden{display:none!important}
@media(max-width:1100px){.app-shell{grid-template-columns:210px 1fr}.kpi-grid{grid-template-columns:repeat(3,1fr)}.calendar{font-size:12px}.cal-day{min-height:130px}.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:780px){.app-shell{display:block}.sidebar{position:relative;height:auto}.main{padding:0 12px 25px}.calendar{grid-template-columns:repeat(7,minmax(110px,1fr));overflow:auto}.cal-day{min-height:125px}.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.job-row{grid-template-columns:1fr}.kpi-grid{grid-template-columns:repeat(2,1fr)}}

.login-screen{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0d2744,#1b5c9f);padding:20px}
.login-card{width:min(430px,94vw);background:#fff;border-radius:18px;padding:28px;box-shadow:0 20px 60px #00172f55}
.login-logo{width:58px;height:58px;border-radius:16px;background:#0f4f8a;color:#fff;display:grid;place-items:center;font-weight:900;font-size:20px;margin-bottom:15px}
.login-card h1{margin:0 0 4px;font-size:24px}.login-card>p{margin:0 0 20px;color:#6b778c}
.login-card form{display:grid;gap:12px}.login-card label{display:grid;gap:6px;font-size:13px;font-weight:700}.login-btn{width:100%;margin-top:4px;padding:11px}
.login-error{min-height:22px;color:#b93434;font-size:13px;margin-top:8px}.login-card small{color:#78869a}
.current-user{font-weight:800;margin-top:4px}.current-title{font-size:12px;color:#b8c7d8;margin-top:3px}.small-input{width:auto!important;min-width:170px}
.meta{font-size:12px;color:#6b778c}.section-card .meta{margin-top:3px}
.action-row{display:flex;gap:6px;flex-wrap:wrap}
.file-list{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.file-link{font-size:11px;padding:5px 7px;border:1px solid #dbe4ef;border-radius:7px;background:#f8fafc;color:#135ca8;cursor:pointer}
.login-screen.hidden{display:none!important}

/* ===== v0.3 ONLINE / MOBILE ===== */
.mobile-menu-btn,.mobile-bottom-nav,.mobile-calendar-switch,.mobile-agenda,.sidebar-backdrop{display:none}
.assigned-badge{display:inline-flex;align-items:center;gap:4px;background:#e8f1ff;color:#155da8;font-size:10px;font-weight:800;padding:3px 6px;border-radius:999px;margin-top:4px}
.mobile-agenda-card{background:#fff;border:1px solid var(--line);border-left:5px solid var(--amber);border-radius:12px;padding:13px;margin:10px 0;box-shadow:0 3px 12px #183a6210}
.mobile-agenda-card.closed{border-left-color:var(--green)}
.mobile-agenda-card .agenda-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.mobile-agenda-card h3{font-size:15px;margin:0}.mobile-agenda-card p{font-size:13px;color:var(--muted);margin:7px 0}
.mobile-agenda-card .agenda-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.mobile-agenda-empty{background:#fff;border:1px dashed var(--line);border-radius:12px;padding:24px;text-align:center;color:var(--muted)}

@media(max-width:780px){
  body{padding-bottom:74px;background:#f3f6fa}
  .app-shell{display:block;min-height:100vh}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);height:100vh;z-index:90;transform:translateX(-105%);transition:transform .22s ease;box-shadow:12px 0 40px #07192e55}
  .sidebar.mobile-open{transform:translateX(0)}
  .sidebar-backdrop{display:block;position:fixed;inset:0;background:#06162988;z-index:85;opacity:0;pointer-events:none;transition:.2s}
  .sidebar-backdrop.open{opacity:1;pointer-events:auto}
  .main{padding:0 10px 20px}
  .topbar{position:sticky;top:0;z-index:40;background:#f3f6faf2;backdrop-filter:blur(8px);padding:10px 2px;border-bottom:1px solid #e3e8ef;gap:8px}
  .mobile-menu-btn{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:20px}
  .topbar-title{min-width:0;flex:1}.topbar h1{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar p{display:none}
  .top-actions{gap:5px}.top-actions #refreshBtn{display:none}.top-actions #logoutBtn{font-size:0;width:40px;height:40px;padding:0}.top-actions #logoutBtn:after{content:'↪';font-size:19px}.pill{font-size:9px;padding:5px 7px}
  .toolbar{align-items:stretch;gap:8px}.toolbar-group{width:100%;justify-content:space-between}.toolbar-group:first-child .btn{padding:8px 10px}.toolbar-group:nth-child(2){display:grid;grid-template-columns:1fr auto}.toolbar-group:nth-child(2) .input{min-width:0}
  .month-label{font-size:16px;margin:0;text-transform:capitalize;text-align:center;flex:1}
  .legend{font-size:11px;margin:6px 0}
  .mobile-calendar-switch{display:grid;grid-template-columns:auto auto 1fr;gap:7px;margin:8px 0 10px}.mobile-calendar-switch .input{min-width:0}.mobile-mode-btn.active{background:#dbeaff;border-color:#9cc2ee;color:#124f91}
  .mobile-agenda{display:block}
  .calendar{display:none;grid-template-columns:repeat(7,1fr);border-radius:12px}
  body.mobile-month-mode .calendar{display:grid}
  body.mobile-month-mode .mobile-agenda{display:none}
  .cal-head{font-size:10px;padding:7px 2px}.cal-day{min-height:70px;padding:4px;overflow:hidden}.day-num{font-size:11px;margin-bottom:2px}.job-chip{padding:3px 4px;margin:2px 0;border-left-width:3px;border-radius:5px;min-height:10px}.job-chip b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.job-chip .small{display:none}.more-jobs{font-size:9px;margin-top:2px}
  .section-card{padding:12px;border-radius:12px}.section-head{align-items:stretch}.section-head .small-input{width:100%!important}.job-row{grid-template-columns:1fr;padding:11px;gap:7px}.job-row .action-row .btn{flex:1}
  .table-wrap{border:1px solid var(--line);border-radius:10px}.table-wrap table{min-width:680px}
  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:8px}.kpi-card{padding:11px}.kpi-card b{font-size:21px}.dashboard-grid{grid-template-columns:1fr}.dashboard-filters{display:grid;grid-template-columns:1fr 1fr;padding:10px}.dashboard-filters .input{width:100%;min-width:0}.dashboard-filters .btn{grid-column:1/-1}
  .modal{padding:0;align-items:flex-end}.modal-panel,.modal-lg{width:100%;max-width:none;max-height:92vh;border-radius:18px 18px 0 0;padding:14px}.modal-head{position:sticky;top:-14px;background:#fff;z-index:3;padding-top:14px}.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.check-grid{grid-template-columns:1fr;max-height:190px}.check-item{padding:4px 0}.modal-actions{position:sticky;bottom:-14px;background:#fff;padding:12px 0 14px;margin-top:14px}.modal-actions .btn{min-height:43px}.report-line{grid-template-columns:28px 1fr 64px 36px;grid-template-areas:'idx device qty del' 'idx note note del';border:1px solid var(--line);padding:7px;border-radius:9px}.report-line .idx{grid-area:idx}.report-line .device{grid-area:device}.report-line .qty{grid-area:qty}.report-line .note{grid-area:note}.report-line .remove-line{grid-area:del;height:100%}
  .mobile-bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;height:66px;background:#fff;border-top:1px solid #dfe5ee;z-index:80;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -4px 18px #102b4a14}
  .mobile-nav-item{flex:1;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#63758b;min-width:0}.mobile-nav-item span{font-size:19px}.mobile-nav-item small{font-size:10px}.mobile-nav-item.active{color:var(--primary);font-weight:800}.mobile-nav-item.hidden{display:none!important}
  .export-grid{grid-template-columns:1fr}.login-card{padding:22px 18px}.login-card h1{font-size:21px}
  .toast{left:12px;right:12px;bottom:78px;text-align:center}
}

/* ===== v0.3.1 UI SYNC + MOBILE SAFE AREA ===== */
.calendar-scroll{width:100%;}
body.modal-open{overflow:hidden;}
.modal{z-index:130;}

/* Báo cáo: tách vùng cuộn và footer hành động để không bị thanh điều hướng che */
.report-modal-panel{display:flex;flex-direction:column;overflow:hidden;}
.report-modal-body{min-height:0;overflow:auto;padding:2px 2px 6px;-webkit-overflow-scrolling:touch;}
.report-modal-actions{flex:0 0 auto;background:#fff;}

@media(max-width:780px){
  :root{--mobile-safe-bottom:env(safe-area-inset-bottom,0px);}
  body{padding-bottom:calc(72px + var(--mobile-safe-bottom));}
  body.modal-open{padding-bottom:0;}

  /* Cùng phong cách với desktop: card trắng, viền nhẹ, màu xanh Đồng Tâm */
  .main{padding:0 12px calc(24px + var(--mobile-safe-bottom));}
  .topbar{background:#fff;border:1px solid #e0e6ef;border-radius:0 0 14px 14px;margin:0 -12px 10px;padding:10px 12px;box-shadow:0 4px 16px #102b4a0c;}
  .mobile-menu-btn{border-color:#d9e3ef;color:var(--primary);font-weight:800;}
  .topbar h1{font-size:19px;color:#1c2635;}
  .pill{background:#dbeaff;color:#1659a4;border:1px solid #bfd8f5;}

  .toolbar{background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px;box-shadow:0 2px 10px #102b4a08;}
  .legend{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;}
  .mobile-calendar-switch{background:#fff;border:1px solid var(--line);border-radius:12px;padding:7px;}
  .mobile-mode-btn{min-height:40px;}

  .mobile-agenda .section-head{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;align-items:center;}
  .mobile-agenda-card{border-radius:12px;box-shadow:0 2px 10px #102b4a0a;}
  .mobile-agenda-card .agenda-actions .btn{min-height:40px;}

  /* Chế độ tháng dùng cùng bố cục lịch desktop và cuộn ngang, không ép ô quá nhỏ */
  body.mobile-month-mode .calendar-scroll{overflow-x:auto;overflow-y:hidden;margin:0 -12px;padding:0 12px 10px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;}
  body.mobile-month-mode .calendar{display:grid;min-width:760px;border-radius:12px;overflow:hidden;}
  body.mobile-month-mode .cal-head{font-size:11px;padding:9px 5px;}
  body.mobile-month-mode .cal-day{min-height:108px;padding:6px;overflow:hidden;}
  body.mobile-month-mode .day-num{font-size:12px;margin-bottom:4px;}
  body.mobile-month-mode .job-chip{padding:5px 6px;margin:4px 0;border-left-width:4px;border-radius:6px;}
  body.mobile-month-mode .job-chip b{font-size:10px;}
  body.mobile-month-mode .job-chip .small{display:block;font-size:9px;}
  body.mobile-month-mode .more-jobs{font-size:10px;}

  /* Modal luôn ở trên menu dưới và Safari safe-area */
  .modal{z-index:130;padding:0;align-items:flex-end;}
  .modal-panel,.modal-lg{max-height:calc(100dvh - 18px);border-radius:20px 20px 0 0;padding:14px 14px calc(14px + var(--mobile-safe-bottom));box-shadow:0 -12px 40px #07192e33;}
  .modal-head{top:-14px;padding:14px 0 12px;margin-bottom:12px;}
  .modal-head h2{font-size:22px;line-height:1.15;}

  /* Riêng modal báo cáo: header + nội dung cuộn + footer sticky */
  #reportModal .report-modal-panel{height:min(92dvh,880px);padding:0;}
  #reportModal .modal-head{position:relative;top:auto;flex:0 0 auto;padding:18px 16px 14px;margin:0;border-bottom:1px solid var(--line);}
  #reportModal .report-modal-body{flex:1 1 auto;overflow-y:auto;padding:14px 16px 18px;overscroll-behavior:contain;}
  #reportModal .report-modal-actions{position:relative;bottom:auto;margin:0;padding:12px 16px calc(12px + var(--mobile-safe-bottom));border-top:1px solid var(--line);box-shadow:0 -7px 20px #102b4a12;display:grid;grid-template-columns:.8fr 1.6fr;gap:9px;z-index:6;}
  #reportModal .report-modal-actions .btn{width:100%;min-height:46px;}
  #reportModal #submitReport{font-size:14px;}

  /* Các modal khác vẫn có footer dễ bấm và chừa safe area */
  .modal-actions{bottom:calc(-14px - var(--mobile-safe-bottom));padding:12px 0 calc(14px + var(--mobile-safe-bottom));z-index:5;}

  /* Khi popup mở, ẩn menu app bên dưới để không che nút xác nhận */
  body.modal-open .mobile-bottom-nav{display:none!important;}
  .mobile-bottom-nav{height:calc(66px + var(--mobile-safe-bottom));padding-bottom:var(--mobile-safe-bottom);z-index:80;}
  .mobile-nav-item{padding-top:4px;}
  .mobile-nav-item.active{background:#f1f6fd;box-shadow:inset 0 3px 0 var(--primary);}

  .section-card{box-shadow:0 2px 10px #102b4a08;}
  .btn{border-radius:9px;}
  .btn-primary{box-shadow:0 3px 8px #1666c526;}
  .toast{bottom:calc(78px + var(--mobile-safe-bottom));}
  body.modal-open .toast{bottom:calc(18px + var(--mobile-safe-bottom));}
}

/* ===== v0.3.2 MOBILE MONTH DEFAULT + ACCOUNT SECURITY ===== */
.account-action-btn{margin-top:10px;width:100%;border:1px solid #ffffff26;background:#ffffff12;color:#fff;border-radius:8px;padding:8px 10px;text-align:left;font-weight:700}
.account-action-btn:hover{background:#ffffff1c}
.field-help{display:block;margin-top:5px;color:var(--muted);font-weight:400;line-height:1.35}
@media(max-width:780px){
  /* Điện thoại mặc định dùng đúng bố cục lịch tháng như desktop; cuộn ngang để giữ nội dung dễ đọc */
  .mobile-calendar-switch{grid-template-columns:auto auto 1fr}
  body:not(.mobile-month-mode) .mobile-calendar-switch #mobileDayPicker{display:block}
  body.mobile-month-mode .mobile-calendar-switch #mobileDayPicker{visibility:hidden;pointer-events:none}
  body.mobile-month-mode .calendar-scroll{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity}
  body.mobile-month-mode .calendar{min-width:760px}
  body.mobile-month-mode .cal-head{position:sticky;top:0;z-index:2;background:#f0f3f8}
  .account-action-btn{min-height:42px}
}


/* ===== v0.3.3 IPHONE: ALWAYS MONTH CALENDAR ===== */
@media(max-width:780px){
  /* Mobile chỉ dùng lịch tháng; không chuyển sang danh sách ngày */
  .mobile-agenda{display:none!important;}
  .mobile-calendar-title{display:flex!important;align-items:center;justify-content:center;min-height:40px;padding:8px 10px;font-weight:800;color:#315a87;text-align:center;}
  .mobile-calendar-title #mobileDayPicker{display:none!important;}

  /* Lịch luôn hiển thị 7 cột như desktop và co vừa chiều rộng iPhone */
  .calendar-scroll{overflow-x:hidden!important;margin:0!important;padding:0 0 10px!important;width:100%;}
  .calendar{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;min-width:0!important;width:100%!important;border-radius:12px;overflow:hidden;}
  .cal-head{font-size:10px!important;padding:7px 1px!important;min-width:0;}
  .cal-day{min-height:88px!important;padding:3px!important;min-width:0;overflow:hidden;}
  .day-num{font-size:11px!important;margin-bottom:2px!important;}
  .job-chip{padding:3px 3px!important;margin:2px 0!important;border-left-width:3px!important;border-radius:4px!important;min-width:0;}
  .job-chip b{font-size:8px!important;line-height:1.15;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .job-chip .small{display:none!important;}
  .job-chip .assigned-badge{display:none!important;}
  .more-jobs{font-size:8px!important;line-height:1.1;}
}

/* ===== v0.3.4 IPHONE: PC-LIKE MONTH CALENDAR ===== */
@media(max-width:780px){
  /* Không dùng giao diện danh sách ngày; lịch tháng là màn hình chính giống PC */
  .mobile-agenda,.mobile-calendar-title{display:none!important;}

  /* Giữ nguyên tỷ lệ lịch desktop và cho phép vuốt ngang trên iPhone.
     Không nén 7 cột khiến Job mất nội dung. */
  .calendar-scroll{
    width:calc(100% + 24px)!important;
    margin:0 -12px!important;
    padding:0 12px 14px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
  }
  .calendar{
    display:grid!important;
    grid-template-columns:repeat(7,minmax(138px,1fr))!important;
    min-width:980px!important;
    width:980px!important;
    border-radius:14px!important;
    overflow:hidden!important;
    background:#fff;
  }
  .cal-head{
    font-size:13px!important;
    padding:10px 6px!important;
    min-width:138px!important;
    background:#f0f3f8!important;
    position:sticky;
    top:0;
    z-index:2;
  }
  .cal-day{
    min-height:150px!important;
    padding:8px!important;
    min-width:138px!important;
    overflow:hidden!important;
  }
  .day-num{
    font-size:13px!important;
    margin-bottom:5px!important;
  }
  .job-chip{
    padding:6px 7px!important;
    margin:5px 0!important;
    border-left-width:4px!important;
    border-radius:7px!important;
    min-width:0;
    font-size:11px!important;
  }
  .job-chip b{
    font-size:11px!important;
    line-height:1.25!important;
    display:block!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .job-chip .small{
    display:block!important;
    font-size:10px!important;
    line-height:1.25!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .job-chip .assigned-badge{
    display:inline-block!important;
    font-size:9px!important;
    margin-top:3px;
  }
  .more-jobs{font-size:10px!important;line-height:1.2!important;margin-top:4px!important;}

  /* Toolbar mang cùng cấu trúc desktop, chỉ xếp gọn để vừa điện thoại */
  .toolbar{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;}
  .toolbar .toolbar-group{width:100%;}
  .toolbar .toolbar-group:first-child{display:grid;grid-template-columns:40px auto 40px 1fr;gap:6px;align-items:center;}
  .toolbar .toolbar-group:last-child{display:grid;grid-template-columns:1fr auto;gap:7px;}
  .month-label{font-size:16px!important;margin-left:4px!important;white-space:nowrap;}
  #calendarSearch{min-width:0;}
  #addJobBtn{white-space:nowrap;}

  /* Dấu hiệu nhỏ để người dùng biết lịch có thể vuốt ngang */
  #calendarView::after{
    content:'← Vuốt ngang để xem đủ lịch như trên máy tính →';
    display:block;
    margin:5px 0 0;
    text-align:center;
    color:#7b8798;
    font-size:11px;
  }
}

/* ===== v1.0 SPEC FINAL ===== */
.modal-xl{width:min(1500px,96vw)!important;max-width:1500px!important}
.btn-danger{background:#fff1f1;color:#b42318;border:1px solid #f3c5c5}.btn-danger:hover{background:#ffe4e4}
.btn-small{padding:6px 9px;font-size:12px}.danger{color:#b42318!important}.hidden{display:none!important}.static-actions{position:static!important;margin-top:14px!important}
.dot-plan{background:#8a94a3}.job-chip.plan{border-left-color:#8a94a3;background:#f5f6f8}.job-card.plan{border-left-color:#8a94a3}.status-plan{background:#eef1f4;color:#5f6975}
.filter-grid{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:8px;margin:10px 0 14px}.notice{padding:10px 12px;background:#f6f9fc;border:1px solid #dce5ef;border-radius:9px;margin:10px 0;color:#526170}
.summary-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:10px 0 18px}.summary-strip>div{background:#f6f9fc;border:1px solid #dfe7f1;border-radius:12px;padding:12px;text-align:center}.summary-strip b{font-size:24px;color:#104f8c;display:block}.summary-strip span{font-size:12px;color:#687586}
.mini-card{border:1px solid #e1e7ef;border-radius:10px;padding:10px 12px;margin:7px 0;display:flex;align-items:center;gap:10px;justify-content:space-between}.empty{padding:16px;text-align:center;color:#7a8696;background:#fafbfd;border-radius:10px}
.customer-card{text-align:left;width:100%;cursor:pointer;background:#fff}.customer-card:hover{border-color:#87b4df;box-shadow:0 4px 16px #12385f16}.project-status{max-width:160px}.progressbar{height:8px;background:#eef2f6;border-radius:99px;overflow:hidden;margin:9px 0}.progressbar i{height:100%;display:block;background:#2c88d9;border-radius:99px}
.file-row{display:inline-flex;align-items:center;gap:4px;margin:3px 4px 3px 0}.file-list{margin-top:9px}.file-link{border:0;background:#f1f6fb;color:#145996;padding:6px 8px;border-radius:7px;cursor:pointer;font-size:12px}.file-link:hover{background:#e5f0fa}
.travel-group{display:grid;grid-template-columns:100px 1fr 90px;gap:12px;align-items:center;border-bottom:1px solid #edf0f4;padding:12px 4px}.date-badge{font-weight:800;color:#155a9b}.travel-one{text-align:right;font-weight:800;color:#277557}
.attendance-scroll{overflow:auto;border:1px solid #e0e6ee;border-radius:10px;max-height:68vh}.attendance-matrix{border-collapse:separate;border-spacing:0;min-width:1500px;font-size:11px}.attendance-matrix th,.attendance-matrix td{min-width:42px;padding:6px 4px;text-align:center;border-right:1px solid #e5e9ef;border-bottom:1px solid #e5e9ef}.attendance-matrix .sticky-col{position:sticky;left:0;z-index:3;min-width:180px;text-align:left;background:#fff}.attendance-matrix thead .sticky-col{z-index:5;background:#eef4fa}.att-cell{cursor:default}.att-cell[onclick]{cursor:pointer}.att-cell[onclick]:hover{outline:2px solid #4c94d4;outline-offset:-2px}.att-cell small{display:block;font-size:8px;color:#316d9f}.att-cell.sunday{background:#fff7ed}.att-cell.travel{box-shadow:inset 0 -3px #76b995}
.attention-list{display:grid;gap:7px}.attention{padding:9px 11px;border-radius:8px;border-left:4px solid #89a2bd;background:#f7f9fb}.attention.danger{background:#fff3f2;border-left-color:#d92d20;color:#8f241b}.attention.warning{background:#fffaeb;border-left-color:#f79009;color:#7a4b00}.attention.info{background:#eff8ff;border-left-color:#2e90fa;color:#175a98}
.donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center}.donut{--a:40%;--b:70%;width:190px;height:190px;border-radius:50%;background:conic-gradient(#22a06b 0 var(--a),#e85151 var(--a) var(--b),#98a2b3 var(--b) 100%);display:grid;place-items:center;position:relative}.donut:after{content:'';position:absolute;inset:28px;border-radius:50%;background:white}.donut>div{z-index:1;text-align:center}.donut b{display:block;font-size:30px;color:#18344f}.donut span{font-size:12px;color:#758193}.donut-legend{display:grid;gap:7px;font-size:13px}.donut-legend span:before{content:'● ';}.donut-legend .g{color:#18865a}.donut-legend .r{color:#c43e3e}.donut-legend .n{color:#6b7480}
.bar-row{display:grid;grid-template-columns:150px 1fr 55px;align-items:center;gap:8px;margin:9px 0}.bar-row>i{height:14px;background:#3c8ed0;border-radius:4px;min-width:2px}.bar-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-row b{text-align:right}
.excel-viewer{overflow:auto;max-height:72vh;border:1px solid #dfe5ed;border-radius:10px;background:#fff;zoom:1}.excel-viewer table{border-collapse:collapse;min-width:100%}.excel-viewer th{position:sticky;left:0;background:#eef3f8;z-index:2}.excel-viewer td,.excel-viewer th{border:1px solid #e2e6eb;padding:5px 7px;white-space:nowrap;font-size:11px}.report-line{display:grid;grid-template-columns:1.5fr 100px 1.5fr 150px 38px;gap:7px;margin:7px 0;align-items:center}.audit-detail{max-width:440px;white-space:normal;word-break:break-word}
.sidebar-note{font-size:11px}.desktop-export{}
@media(max-width:1000px){.filter-grid{grid-template-columns:1fr 1fr}.summary-strip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){
 .desktop-export{display:none!important}.filter-grid{grid-template-columns:1fr}.summary-strip{grid-template-columns:repeat(2,1fr)}.report-line{grid-template-columns:1fr 75px}.report-line .note,.report-line .line-status{grid-column:span 1}.travel-group{grid-template-columns:80px 1fr}.travel-one{grid-column:2}.bar-row{grid-template-columns:105px 1fr 42px}.modal-xl{width:100%!important}.excel-viewer{max-height:64vh}.project-grid{grid-template-columns:1fr!important}.dashboard-filters{grid-template-columns:1fr!important}.top-actions .btn:not(#globalSearchBtn){display:none}.attendance-scroll{max-height:64vh}
}

/* ===== v1.0.2 FIX ALL ===== */
.dot-issue{background:#d92d20}
.check-item{display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;width:max-content;max-width:100%;font-size:13px}
.check-item span{min-width:0;white-space:normal}
.check-item input{flex:0 0 auto;margin:0}

/* Calendar: 7 equal columns, content wraps, row height grows with actual jobs. */
.calendar{grid-template-columns:repeat(7,minmax(0,1fr))!important;align-items:stretch;overflow:visible}
.cal-head,.cal-day{min-width:0!important}
.cal-day{min-height:150px;height:auto!important;overflow:visible!important;align-self:stretch}
.job-chip{min-width:0;overflow:hidden}
.job-chip-title{font-weight:800;font-size:11px;line-height:1.3;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.job-chip-meta{color:var(--muted);font-size:10px;line-height:1.3;white-space:normal;overflow-wrap:anywhere;word-break:break-word;margin-top:2px}
.job-chip-alert{margin-top:5px;padding:3px 6px;border-radius:6px;background:#b42318;color:#fff;font-weight:900;font-size:9px;letter-spacing:.02em}
.job-chip.issue{border-left-color:#d92d20;background:#fff1f0;box-shadow:inset 0 0 0 1px #f7c7c2}
.job-chip.reported-warning{border-left-color:#f79009;background:#fffaeb}
.job-card.issue{border:1px solid #f5b7b1;border-left:5px solid #d92d20;background:#fff8f7}
.job-card.reported-warning{border-left:5px solid #f79009;background:#fffcf3}
.status-issue{background:#fee4e2;color:#b42318}
.status-reported-warning{background:#fef0c7;color:#93370d}
.issue-banner,.issue-inline{margin-top:7px;color:#b42318;font-weight:800;font-size:12px}
.issue-banner{padding:8px 10px;background:#fee4e2;border:1px solid #fecdca;border-radius:8px}
.progress-row.issue,.mini-card.issue{border-color:#f5b7b1;background:#fff8f7;box-shadow:inset 4px 0 #d92d20}

/* Project acceptance workflow. */
.project-card.project-waiting{border:2px solid #f79009;background:#fffcf5;box-shadow:0 5px 18px #f7900917}
.project-card.project-accepted{border-color:#75c6a3;background:#f3fbf7}
.acceptance-badge,.accepted-badge{display:inline-flex;margin-top:7px;padding:4px 7px;border-radius:999px;font-size:10px;font-weight:900}
.acceptance-badge{background:#fef0c7;color:#93370d;border:1px solid #fedf89}
.accepted-badge{background:#d1fadf;color:#05603a;border:1px solid #a6f4c5}
.project-status-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.waiting-card{border-color:#fedf89;background:#fffcf5}.waiting-card b{color:#b54708}
.accepted-card{border-color:#a6f4c5;background:#f3fbf7}.accepted-card b{color:#067647}
.acceptance-list{display:grid;gap:8px}
.acceptance-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid #fedf89;border-left:5px solid #f79009;border-radius:10px;background:#fffcf5}

/* Nested modal: JS assigns increasing z-index; keep panels interactive and readable. */
.modal.open{isolation:isolate}

@media(max-width:780px){
  /* Preserve PC-like month calendar on phone with horizontal swipe; do not squeeze text into unreadable cells. */
  .calendar-scroll{width:calc(100% + 24px)!important;margin:0 -12px!important;padding:0 12px 14px!important;overflow-x:auto!important;overflow-y:visible!important;-webkit-overflow-scrolling:touch!important}
  .calendar{grid-template-columns:repeat(7,minmax(138px,1fr))!important;min-width:980px!important;width:980px!important;overflow:visible!important}
  .cal-day{min-width:138px!important;min-height:150px!important;padding:7px!important;overflow:visible!important}
  .job-chip{padding:5px 6px!important;margin:4px 0!important}
  .job-chip-title{font-size:10px!important;line-height:1.3!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  .job-chip-meta{display:block!important;font-size:9px!important;line-height:1.25!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  .job-chip-alert{font-size:8px!important}
  .check-item{width:100%;justify-content:flex-start}
  .project-status-cards{grid-template-columns:1fr 1fr!important}
  .project-status-cards .kpi-card:first-child{grid-column:1/-1}
  .acceptance-row{align-items:flex-start;flex-direction:column}
}

/* ===== v1.1.0 OFFICIAL BRAND HEADER ===== */
.topbar{
  display:grid!important;
  grid-template-columns:minmax(210px,1fr) auto minmax(210px,1fr)!important;
  align-items:center!important;
  gap:18px!important;
  min-height:104px;
  padding:16px 0 14px!important;
}
.topbar-left{display:flex;align-items:center;justify-content:flex-start;min-width:0}
.topbar-logo{display:block;width:min(210px,18vw);height:72px;object-fit:contain;object-position:left center}
.topbar-title{justify-self:center;text-align:center;min-width:0}
.topbar-title h1{font-size:30px!important;line-height:1.05;margin:0;font-weight:900;letter-spacing:.01em;color:#10263f}
.topbar-title p{margin:6px 0 0!important;text-align:center;color:var(--muted);font-size:13px}
.top-actions{justify-self:end;justify-content:flex-end}

@media(max-width:1100px){
  .topbar{grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr)!important;gap:10px!important}
  .topbar-logo{width:150px;height:60px}
  .topbar-title h1{font-size:25px!important}
}

@media(max-width:780px){
  .topbar{display:grid!important;grid-template-columns:auto 1fr auto!important;min-height:64px!important;padding:8px 10px!important;gap:8px!important}
  .topbar-left{gap:7px}
  .topbar-logo{width:86px;height:42px;object-fit:contain}
  .topbar-title{min-width:0;text-align:center;justify-self:stretch}
  .topbar-title h1{font-size:18px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar-title p{display:none!important}
  .top-actions{gap:5px}
}

/* ===== v1.2.0 PO WORKFLOW ===== */
.po-list{display:grid;gap:9px}
.po-row{width:100%;display:grid;grid-template-columns:minmax(260px,1.4fr) minmax(160px,.7fr) minmax(180px,.8fr);gap:14px;align-items:center;text-align:left;border:1px solid #dfe6ee;border-left:5px solid #98a2b3;background:#fff;border-radius:11px;padding:12px 14px;cursor:pointer;color:inherit}
.po-row:hover{box-shadow:0 5px 18px #173d6316;border-color:#a8c7e4}
.po-row.po-running{border-left-color:#2e90fa}.po-row.po-waiting{border-left-color:#f79009;background:#fffcf5}.po-row.po-accepting{border-left-color:#7f56d9;background:#faf9ff}.po-row.po-accepted{border-left-color:#12b76a;background:#f5fff9}
.po-progress-mini{display:grid;gap:4px}.po-progress-mini .progressbar{margin:0}.po-progress-mini>span{font-weight:800;color:#315a87;font-size:12px}
.po-detail-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}.po-detail-summary>div{border:1px solid #e0e7ef;background:#f8fafc;border-radius:10px;padding:11px}.po-detail-summary span{display:block;color:#738094;font-size:11px}.po-detail-summary b{display:block;margin-top:3px;color:#18344f}
.po-status-control{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(240px,1.2fr) auto;gap:8px;align-items:center;margin:12px 0 18px}
.po-item-complete{background:#f3fbf7}.po-item-complete td:nth-child(8){color:#067647;font-weight:800}
.po-items-head{display:flex;align-items:center;justify-content:space-between;margin:14px 0 8px}.po-items-editor{display:grid;gap:8px}.po-item-edit{display:grid;grid-template-columns:35px minmax(180px,1.5fr) 85px 130px minmax(150px,1fr) minmax(150px,1fr) minmax(130px,1fr) 38px;gap:7px;align-items:center;padding:8px;border:1px solid #e2e8f0;border-radius:9px;background:#fafcfe}.po-item-stt{font-weight:900;text-align:center;color:#567087}.po-method-other:disabled{background:#eef2f6;color:#98a2b3}
.po-filter-grid{grid-template-columns:2fr 1fr 1fr auto}.po-status-chart{display:grid;gap:9px}.po-bar{display:grid;grid-template-columns:190px 1fr 50px;gap:8px;align-items:center}.po-bar i{height:14px;background:#3c8ed0;border-radius:5px;min-width:2px}.po-bar b{text-align:right}.po-bar span{font-size:12px}
.certificate-filter{grid-template-columns:repeat(3,minmax(150px,1fr)) auto}.cert-qty{min-width:95px;max-width:110px}.cert-inline{grid-column:1/-1;color:#7a4b00;background:#fffaeb;border-radius:6px;padding:3px 6px;width:max-content}
.status{display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;background:#eef3f8;color:#3c526b;font-size:11px;font-weight:800}
@media(max-width:1100px){.po-item-edit{grid-template-columns:35px 1fr 90px 130px 1fr}.po-item-edit .po-requirement,.po-item-edit .po-note{grid-column:span 2}.po-filter-grid,.certificate-filter{grid-template-columns:1fr 1fr}.po-detail-summary{grid-template-columns:1fr 1fr}}
@media(max-width:780px){.po-row{grid-template-columns:1fr;gap:7px}.po-detail-summary{grid-template-columns:1fr}.po-status-control{grid-template-columns:1fr}.po-item-edit{grid-template-columns:30px 1fr 75px}.po-item-edit .po-method,.po-item-edit .po-method-other,.po-item-edit .po-requirement,.po-item-edit .po-note{grid-column:2/-1}.po-filter-grid,.certificate-filter{grid-template-columns:1fr}.po-bar{grid-template-columns:120px 1fr 38px}.table-wrap{overflow-x:auto}}
/* v1.2.0 PO dashboard */
.po-dashboard-filter{grid-template-columns:1.2fr 1fr 1fr 1fr .8fr .8fr auto}
.po-donut-wrap{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap;padding:8px 0}
.po-donut{width:190px;height:190px;border-radius:50%;display:grid;place-items:center;position:relative;flex:0 0 auto}
.po-donut:after{content:'';position:absolute;inset:32px;background:#fff;border-radius:50%;box-shadow:0 0 0 1px #e9eef4}
.po-donut span{position:relative;z-index:1;font-size:30px;font-weight:900;color:#18344f}
.po-legend{display:grid;gap:7px;min-width:260px}.po-legend>div{display:grid;grid-template-columns:12px 1fr auto;gap:8px;align-items:center;font-size:12px}.po-legend i{width:10px;height:10px;border-radius:50%}.po-legend b{color:#18344f}.danger-text{color:#b42318!important;font-weight:900}
@media(max-width:1200px){.po-dashboard-filter{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.po-dashboard-filter{grid-template-columns:1fr}.po-donut{width:165px;height:165px}.po-legend{min-width:220px;width:100%}}