*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Inter,Arial,sans-serif;background:#f5f7fa;color:#1f2937}body{overflow:hidden}.app-shell{height:100vh;display:flex}.sidebar{width:300px;flex:0 0 300px;background:#18202b;color:#fff;transition:.2s;overflow:hidden}.app-shell.collapsed .sidebar{width:64px;flex-basis:64px}.sidebar-brand{height:58px;display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08);font-weight:700;white-space:nowrap}.brand-mark{width:42px;height:42px;border-radius:10px;background:#fff;color:#18202b;display:grid;place-items:center;font-weight:800}.brand-mark.small{width:34px;height:34px;min-width:34px}.nav-menu{padding:10px 8px}.nav-item{width:100%;border:0;font:inherit;display:flex;align-items:center;gap:12px;color:#d5dae1;text-decoration:none;padding:10px 12px;border-radius:8px;white-space:nowrap;margin:3px 0;background:transparent;cursor:pointer;text-align:left}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.1);color:#fff}.nav-icon{display:inline-flex;width:18px;min-width:18px;justify-content:center}.nav-text{min-width:0}.nav-chevron{margin-left:auto;font-size:20px;line-height:1;transition:transform .18s}.nav-group.open .nav-chevron{transform:rotate(90deg)}.nav-submenu{display:none;margin:2px 0 6px 42px;border-left:1px solid rgba(255,255,255,.12);padding-left:8px}.nav-group.open .nav-submenu{display:block}.nav-subitem{display:block;color:#bfc7d1;text-decoration:none;padding:8px 10px;border-radius:6px;font-size:13px;margin:2px 0;white-space:nowrap}.nav-subitem:hover,.nav-subitem.active{background:rgba(255,255,255,.09);color:#fff}.app-shell.collapsed .sidebar-label,.app-shell.collapsed .nav-submenu{display:none}.main-shell{min-width:0;flex:1;display:flex;flex-direction:column}.topbar{height:58px;flex:0 0 58px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:10px;padding:0 14px;position:sticky;top:0;z-index:20}.topbar-spacer{flex:1}.user-chip{font-size:13px;color:#4b5563}.page-viewport{height:calc(100vh - 58px);padding:12px;overflow:hidden}.page-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;min-width:0}.fill-height{height:100%;display:flex;flex-direction:column}.page-toolbar{min-height:64px;padding:10px 14px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto}.page-toolbar h1{margin:0;font-size:19px}.page-subtitle{margin-top:2px}.toolbar-actions{display:flex;gap:8px;align-items:center}.content-scroll{overflow:auto;min-height:0;flex:1;padding:14px}.grid-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.metric-card{border:1px solid #e5e7eb;border-radius:9px;padding:14px;display:flex;flex-direction:column;gap:7px}.metric-label,.muted{color:#6b7280;font-size:12px}.empty-state{margin-top:14px;border:1px dashed #d1d5db;border-radius:9px;padding:28px;text-align:center;color:#6b7280}.compact-empty{margin-top:0}.btn,.icon-btn{border:1px solid #d1d5db;background:#fff;border-radius:7px;padding:8px 12px;cursor:pointer}.btn:disabled{opacity:.48;cursor:not-allowed}.icon-btn{padding:7px 10px}.btn.primary{background:#18202b;color:#fff;border-color:#18202b}.btn.ghost{background:transparent}.search-box input{width:210px;border:1px solid #d1d5db;border-radius:7px;padding:8px 10px;font-size:13px}.table-shell{min-height:0;flex:1;overflow:auto}.data-table{border-collapse:separate;border-spacing:0;width:100%;min-width:720px;font-size:13px}.data-table th,.data-table td{padding:10px 12px;border-bottom:1px solid #edf0f3;text-align:left;white-space:nowrap}.data-table thead th{position:sticky;top:0;z-index:5;background:#f7f9fb;color:#4b5563;font-size:12px;font-weight:700;border-bottom:1px solid #dfe4ea}.data-table tbody tr:hover{background:#fafbfc}.table-empty{text-align:center!important;color:#6b7280;padding:30px!important}.status-pill{display:inline-flex;align-items:center;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:700}.status-pill.active{background:#ecfdf3;color:#047857}.status-pill.inactive{background:#f3f4f6;color:#6b7280}.login-body{display:grid;place-items:center;background:#eef1f5;overflow:auto}.login-card{width:min(390px,calc(100vw - 28px));background:#fff;border:1px solid #dde2e8;border-radius:12px;padding:26px;box-shadow:0 12px 30px rgba(17,24,39,.08)}.login-card h1{margin:14px 0 4px}.stack{display:grid;gap:13px;margin-top:18px}.stack label{display:grid;gap:6px;font-size:13px}.stack input{width:100%;border:1px solid #cfd5dc;border-radius:7px;padding:10px 11px;font-size:14px}.alert{padding:9px 11px;border-radius:7px;margin-top:12px;font-size:13px}.alert.error{background:#fff1f2;color:#9f1239;border:1px solid #fecdd3}@media(max-width:760px){.sidebar{position:fixed;z-index:40;height:100vh;transform:translateX(-100%);width:280px;flex-basis:280px}.app-shell.mobile-open .sidebar{transform:translateX(0)}.grid-cards{grid-template-columns:1fr}.user-chip{display:none}.page-viewport{padding:8px}.page-toolbar{align-items:flex-start}.toolbar-actions{width:100%;justify-content:flex-end}.search-box{flex:1}.search-box input{width:100%}}
.btn-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:inherit}.btn.primary.btn-link{color:#fff}.page-alert{flex:0 0 auto;margin:10px 14px 0;padding:9px 11px;border-radius:7px;font-size:13px}.page-alert.success{background:#ecfdf3;border:1px solid #a7f3d0;color:#047857}.page-alert.error{background:#fff1f2;border:1px solid #fecdd3;color:#9f1239}.select-col{width:38px;min-width:38px;padding-left:12px!important;padding-right:6px!important}.row-selector{display:block;width:14px;height:14px;border:1px solid #aeb7c2;border-radius:50%;background:#fff}.selectable-table tbody tr[data-row-id]{cursor:pointer;outline:none}.selectable-table tbody tr.selected{background:#eef4fb}.selectable-table tbody tr.selected:hover{background:#e8f0fa}.selectable-table tbody tr.selected .row-selector{border:4px solid #18202b}.form-page{height:100%;display:flex;flex-direction:column;min-height:0}.form-content{background:#fafbfc}.form-panel{background:#fff;border:1px solid #e1e5ea;border-radius:9px;padding:16px}.compact-form-panel{max-width:920px}.form-grid{display:grid;gap:14px}.form-grid.two-col{grid-template-columns:minmax(180px,.6fr) minmax(280px,1.4fr)}.form-grid.one-col{grid-template-columns:1fr}.field-group{display:grid;gap:6px}.field-label{font-size:12px;font-weight:700;color:#374151}.field-label b{color:#b42318}.field-group input[type=text],.field-group input[type=email],.field-group input[type=number],.field-group input[type=time],.field-group select{width:100%;height:36px;border:1px solid #cfd5dc;border-radius:7px;padding:7px 10px;font:inherit;font-size:13px;background:#fff;color:#111827;outline:none}.field-group input:focus,.field-group select:focus{border-color:#7f8b99;box-shadow:0 0 0 2px rgba(24,32,43,.08)}.field-group small,.switch-field small{display:block;color:#6b7280;font-size:11px;font-weight:400;margin-top:1px}.status-row{margin-top:18px;padding-top:15px;border-top:1px solid #edf0f3}.switch-field{display:flex;align-items:center;gap:10px;cursor:pointer;width:max-content;max-width:100%}.switch-field>input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}.switch-ui{width:36px;height:20px;border-radius:999px;background:#c9cfd6;position:relative;transition:.15s;flex:0 0 auto}.switch-ui:after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:2px;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:.15s}.switch-field>input[type=checkbox]:checked+.switch-ui{background:#18202b}.switch-field>input[type=checkbox]:checked+.switch-ui:after{transform:translateX(16px)}.switch-field strong{display:block;font-size:13px}.form-errors{max-width:920px;margin-bottom:12px;padding:9px 11px;border:1px solid #fecdd3;background:#fff1f2;color:#9f1239;border-radius:7px;font-size:12px;display:grid;gap:3px}@media(max-width:760px){.form-grid.two-col{grid-template-columns:1fr}.compact-form-panel{max-width:none}.page-toolbar{flex-wrap:wrap}.page-toolbar>div:first-child{min-width:0}.page-alert{margin:8px 8px 0}.select-col{width:32px;min-width:32px}.toolbar-actions .btn{white-space:nowrap}}

/* =========================================================
   VOUCHER MAKAN - MOBILE COMPACT BASELINE
   Employee & Canteen are designed mobile-first.
   Keep touch targets usable while minimizing wasted space.
   ========================================================= */
@media (max-width:760px){
  html,body{height:100%;min-height:100%;font-size:13px}
  .app-shell{height:100dvh;min-height:100dvh}
  .main-shell{height:100dvh;min-height:0}

  /* Compact application chrome */
  .topbar{height:44px;flex:0 0 44px;padding:0 6px;gap:5px}
  .topbar .icon-btn{width:34px;height:34px;padding:0;display:grid;place-items:center;border-radius:6px;font-size:16px}
  .topbar .btn{height:32px;padding:5px 8px;font-size:11px;border-radius:6px}
  .page-viewport{height:calc(100dvh - 44px);padding:4px;overflow:hidden}
  .page-card{border-radius:6px}

  /* Drawer remains comfortable to tap but wastes less width */
  .sidebar{width:238px;flex-basis:238px}
  .sidebar-brand{height:46px;padding:0 9px;gap:8px;font-size:13px}
  .brand-mark.small{width:30px;height:30px;min-width:30px;border-radius:7px;font-size:12px}
  .nav-menu{padding:5px}
  .nav-item{min-height:38px;margin:1px 0;padding:7px 9px;gap:9px;border-radius:6px;font-size:13px}
  .nav-icon{width:16px;min-width:16px}
  .nav-submenu{margin:1px 0 3px 31px;padding-left:6px}
  .nav-subitem{min-height:34px;margin:1px 0;padding:6px 8px;font-size:12px}

  /* Dense page header/action bar: actions stay in one horizontal bar */
  .page-toolbar{min-height:46px;padding:5px 7px;gap:5px;align-items:center;flex-wrap:nowrap;overflow:hidden}
  .page-toolbar>div:first-child{min-width:0;flex:1 1 auto}
  .page-toolbar h1{font-size:15px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .page-subtitle{font-size:10px;line-height:1.15;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .toolbar-actions{width:auto;min-width:0;max-width:64%;flex:0 1 auto;justify-content:flex-end;gap:4px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none}
  .toolbar-actions::-webkit-scrollbar{display:none}
  .toolbar-actions .btn,.toolbar-actions .icon-btn{height:32px;min-height:32px;padding:5px 8px;border-radius:6px;font-size:11px;flex:0 0 auto}
  .toolbar-actions .btn.primary{padding-left:9px;padding-right:9px}
  .search-box{flex:1 1 96px;min-width:72px;max-width:145px}
  .search-box input{width:100%;height:32px;padding:5px 7px;border-radius:6px;font-size:11px}

  /* Content density */
  .content-scroll{padding:6px}
  .grid-cards{gap:5px}
  .metric-card{min-height:0;padding:7px 8px;border-radius:6px;gap:2px}
  .metric-label,.muted{font-size:10px}
  .metric-card strong{font-size:13px}
  .empty-state{margin-top:6px;padding:12px 8px;border-radius:6px;font-size:11px}
  .page-alert{margin:4px 5px 0;padding:6px 7px;border-radius:5px;font-size:11px}

  /* Dense data grid; horizontal scroll stays inside table area */
  .data-table{font-size:11px;min-width:620px}
  .data-table th,.data-table td{height:32px;padding:5px 7px}
  .data-table thead th{font-size:10px}
  .select-col{width:28px;min-width:28px;padding-left:7px!important;padding-right:3px!important}
  .row-selector{width:12px;height:12px}
  .status-pill{padding:2px 6px;font-size:9px}
  .table-empty{padding:16px 7px!important}

  /* Compact forms */
  .form-content{padding:5px}
  .form-panel{padding:8px;border-radius:6px}
  .form-grid{gap:7px}
  .form-grid.two-col{grid-template-columns:1fr}
  .field-group{gap:3px}
  .field-label{font-size:10px}
  .field-group input[type=text],.field-group input[type=email],.field-group input[type=number],.field-group input[type=time],.field-group input[type=password],.field-group select{height:34px;padding:5px 7px;border-radius:6px;font-size:12px}
  .field-group small,.switch-field small{font-size:9px;line-height:1.15}
  .status-row{margin-top:8px;padding-top:8px}
  .switch-field{gap:7px}
  .switch-field strong{font-size:11px}
  .switch-ui{width:32px;height:18px}
  .switch-ui:after{width:14px;height:14px}
  .switch-field>input[type=checkbox]:checked+.switch-ui:after{transform:translateX(14px)}
  .form-errors{margin-bottom:5px;padding:6px 7px;border-radius:5px;font-size:10px;gap:2px}

  /* Inline margins authored for desktop must not create blank mobile bands */
  .form-grid + .form-grid{margin-top:7px!important}

  /* Login also uses the available phone screen efficiently */
  .login-card{width:calc(100vw - 14px);padding:14px;border-radius:8px}
  .login-card h1{margin:8px 0 2px;font-size:19px}
  .stack{gap:8px;margin-top:11px}
  .stack label{gap:4px;font-size:11px}
  .stack input{height:36px;padding:6px 8px;font-size:13px}

  /* Operational roles get the tightest chrome. Their business pages will
     use dedicated mobile cards/scanner components in later patches. */
  body.role-employee .page-viewport,
  body.role-canteen .page-viewport{padding:2px}
  body.role-employee .page-card,
  body.role-canteen .page-card{border-radius:4px}
  body.role-employee .content-scroll,
  body.role-canteen .content-scroll{padding:4px}
}

@media (max-width:380px){
  .page-toolbar{padding-left:5px;padding-right:5px}
  .page-toolbar h1{font-size:14px}
  .page-subtitle{display:none}
  .toolbar-actions{max-width:68%}
  .search-box{max-width:112px}
  .data-table th,.data-table td{padding-left:6px;padding-right:6px}
}