/* Workspace visual system. Scoped to screen so payslip/invoice print layouts stay independent. */
@media screen {
  :root {--ui-canvas:#f5f7f8;--ui-card:#fff;--ui-line:#e2e8e8;--ui-text:#233531;--ui-subtle:#667a74;--ui-shadow:0 3px 18px #17352c05;}
  :root[data-mode="dark"] {--ui-canvas:#121b1f;--ui-card:#1a262b;--ui-line:#34434a;--ui-text:#e5eeeb;--ui-subtle:#aec0b9;--ui-shadow:0 3px 18px #00000010;}
  .shell {background:var(--ui-canvas);color:var(--ui-text);font-size:14px;}
  .shell > .sidebar,.navigation-drawer .sidebar {background:var(--ui-card);border-color:var(--ui-line);padding:24px 14px;}
  .sidebar .brand{font-size:25px;letter-spacing:-1.1px;padding:0 12px;line-height:1.05;}
  .sidebar .brand small{font-size:9px;letter-spacing:1.5px;margin-top:9px;color:var(--ui-subtle);}
  .sidebar .nav{margin-top:28px;gap:4px;}
  .sidebar .nav button{border-radius:10px;font-size:13px;min-height:44px;padding:10px 12px;color:var(--ui-subtle);font-weight:500;}
  .sidebar .nav button:hover{background:var(--theme-soft);color:var(--md-primary);}
  .sidebar .nav button.active{background:var(--theme-soft);color:var(--md-primary);box-shadow:inset 3px 0 var(--md-primary);font-weight:700;}
  .sidebar .nav .action-icon{width:18px;height:18px;flex-basis:18px;}
  .sidebar .nav-group-label{font-size:9px;letter-spacing:1.5px;font-weight:700;color:var(--ui-subtle);margin:22px 12px 6px;}
  .shell .topbar{background:var(--ui-card);border:1px solid var(--ui-line);box-shadow:var(--ui-shadow);border-radius:14px;margin:16px 20px 0;min-height:64px;padding:10px 18px;}
  .topbar > div > strong{font-size:13px;letter-spacing:.1px;}
  .topbar .top-actions{gap:10px;}
  .topbar #tenant-select{border-radius:10px;background:var(--ui-canvas);border-color:var(--ui-line);min-height:42px;font-size:13px;}
  .content > .page{padding:24px 24px 32px;}
  .page > .page-header{margin-bottom:22px;padding-bottom:0;align-items:center;}
  .page h1{font-size:28px;line-height:1.2;letter-spacing:-.9px;font-weight:750;color:var(--ui-text);margin:0;}
  .page h2{font-size:16px;line-height:1.4;letter-spacing:-.25px;font-weight:700;color:var(--ui-text);}
  .page h3{font-size:14px;letter-spacing:-.1px;color:var(--ui-text);}
  .page .page-header p{font-size:12px;line-height:1.65;max-width:76ch;color:var(--ui-subtle);margin-top:8px;}
  .shell .muted,.attendance-modal .muted{color:var(--ui-subtle);line-height:1.6;}
  .page .card,.page .queue-item,.page .org-person,.page .workload-metric{background:var(--ui-card);border:1px solid var(--ui-line);border-radius:16px;box-shadow:var(--ui-shadow);}
  .page .card{padding:18px;margin-bottom:16px;}
  .page .cards .card,.page .grid .card,.page .dashboard-balanced .card{margin-bottom:0;}
  .page .cards,.page .grid,.page .queue{gap:14px;}
  .page .row{border-color:var(--ui-line);padding-block:11px;}
  .page .row:last-child{border-bottom:0;}
  .shell .btn,.attendance-modal .btn{border-radius:11px;box-shadow:none;font-size:12px;}
  .shell .btn:not(.primary):not(.danger),.attendance-modal .btn:not(.primary):not(.danger){background:var(--ui-card);border-color:var(--ui-line);color:var(--md-primary);}
  .shell .btn:hover:not(:disabled),.attendance-modal .btn:hover:not(:disabled){background:var(--theme-soft);border-color:var(--md-primary);}
  .shell .btn.primary,.attendance-modal .btn.primary{background:var(--md-primary);color:var(--md-on-primary);border-color:transparent;box-shadow:0 2px 5px #123d3012;}
  .shell .btn.primary:hover:not(:disabled),.attendance-modal .btn.primary:hover:not(:disabled){background:var(--theme-hover);color:var(--md-on-primary);}
  .shell .btn.icon-action,.attendance-modal .btn.icon-action{width:44px;min-width:44px;min-height:44px;}
  .page .section-pages{display:flex;gap:5px;padding:5px;background:var(--ui-line);border-radius:12px;width:fit-content;max-width:100%;margin:0 0 20px;flex-wrap:wrap;}
  .page .section-pages .btn{border:0;background:transparent;min-height:38px;font-size:12px;padding:8px 14px;color:var(--ui-subtle);border-radius:9px;box-shadow:none;}
  .page .section-pages .btn[aria-pressed="true"]{background:var(--ui-card);color:var(--ui-text);box-shadow:0 2px 5px #123d3010;}
  .shell input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),.shell select,.shell textarea,.attendance-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),.attendance-modal select,.attendance-modal textarea{border:1px solid var(--ui-line);border-radius:9px;background:var(--ui-card);color:var(--ui-text);font-size:13px;min-height:42px;}
  .shell :is(input,select,textarea):focus-visible,.attendance-modal :is(input,select,textarea):focus-visible{outline:2px solid var(--md-primary);outline-offset:2px;border-color:var(--md-primary);}
  .shell .field,.attendance-modal .field{font-size:12px;color:var(--ui-subtle);gap:7px;}
  .page .table-tools{background:var(--ui-canvas);border:1px solid var(--ui-line);border-radius:10px;padding:10px 12px;gap:12px;margin:12px 0;}
  .table-tools label{font-size:10px;letter-spacing:.1px;color:var(--ui-subtle);}
  .page .work-table{font-size:12px;}
  .page .work-table th{background:var(--ui-canvas);color:var(--ui-subtle);font-size:10px;text-transform:uppercase;letter-spacing:.5px;padding:12px;border-bottom:1px solid var(--ui-line);}
  .page .work-table td{padding:12px;border-color:var(--ui-line);line-height:1.5;}
  .page .work-table tbody tr:hover{background:var(--theme-soft);}
  .page .pagination{border-top:1px solid var(--ui-line);margin-top:10px;padding-top:12px;font-size:11px;color:var(--ui-subtle);}
  .page .badge{font-size:10px;line-height:1.5;padding:4px 8px;border-radius:7px;letter-spacing:.15px;}
  .page .home-welcome{background:var(--ui-card);border:1px solid var(--ui-line);border-radius:16px;box-shadow:var(--ui-shadow);padding:18px 20px;}
  .page .home-welcome h1{color:var(--ui-text);font-size:27px;letter-spacing:-.7px;}
  .page .home-eyebrow{font-size:9px;letter-spacing:1.3px;color:var(--md-primary);}
  .page .home-welcome p,.page .home-today{color:var(--ui-subtle);}
  .page .dashboard-symbol,.page .welcome-calendar{background:var(--theme-soft);border-radius:12px;color:var(--md-primary);}
  .page .day-stat > strong,.page .metric > strong{letter-spacing:-1px;font-weight:750;color:var(--ui-text);}
  .page .calendar-date{border-color:var(--ui-line);background:var(--ui-card);border-radius:10px;}
  .page .calendar-date:hover{background:var(--theme-soft);}
  .page .org-person{padding:16px;}
  .page .org-match{outline:2px solid var(--md-primary);outline-offset:1px;}
  .attendance-modal{background:var(--ui-card);color:var(--ui-text);border:1px solid var(--ui-line);border-radius:20px;box-shadow:0 22px 90px #09211b33;}
  .attendance-modal::backdrop{background:#152d2659;backdrop-filter:blur(3px);}
  .attendance-modal .modal-card{background:var(--ui-card);padding:24px;border-radius:20px;}
  .attendance-modal h2{font-size:21px;line-height:1.3;letter-spacing:-.6px;margin-top:0;color:var(--ui-text);}
  .attendance-modal .modal-actions{padding-top:16px;margin-top:12px;border-top:1px solid var(--ui-line);gap:10px;}
  .attendance-modal .modal-close{background:var(--ui-canvas);color:var(--ui-subtle);border:1px solid var(--ui-line);border-radius:11px;}
  .profile-dropdown,.create-dropdown{background:var(--ui-card);color:var(--ui-text);border:1px solid var(--ui-line);border-radius:14px;box-shadow:0 12px 44px #102d291a;}
  .profile-dropdown .btn{justify-content:flex-start;}
  .page .profile-section{border-color:var(--ui-line);border-radius:12px;background:var(--ui-card);}
  .page .message:not(:empty){font-size:12px;line-height:1.6;}
  @media(min-width:901px){.shell{grid-template-columns:232px minmax(0,1fr);}}
  @media(max-width:900px){.shell .topbar{margin:10px 12px 0;padding:10px 12px;}.content > .page{padding:20px 16px 28px;}.navigation-drawer{background:var(--ui-card);border-right:1px solid var(--ui-line);}.navigation-drawer .sidebar{padding:20px 14px;}.navigation-drawer .sidebar .nav{margin-top:0;}}
  @media(max-width:600px){.content > .page{padding:16px 12px 24px;}.page h1{font-size:24px;}.page > .page-header{margin-bottom:16px;}.page .card{padding:14px;border-radius:13px;}.page .section-pages{width:100%;overflow-x:auto;flex-wrap:nowrap;}.page .section-pages .btn{flex-shrink:0;padding-inline:12px;}.page .table-tools{padding:10px;gap:8px;}.page .table-tools label{min-width:0;}.page .table-tools input{max-width:100%;}.attendance-modal .modal-card{padding:20px 16px;}.page .home-welcome h1{font-size:24px;}}
  @media(prefers-reduced-motion:reduce){.shell *,.attendance-modal *{transition:none!important;scroll-behavior:auto!important;}}
}
@media screen {
  .page .home-workspace-layout .cards.admin-home-metrics{grid-template-columns:repeat(4,minmax(0,1fr));}
  .page .admin-home-metrics .card{padding:14px;}
  .page .admin-home-metrics .metric strong{font-size:26px;}
  .page .admin-home-metrics .dashboard-symbol{width:34px;height:34px;margin-bottom:6px;}
  @media(max-width:1100px){.page .home-workspace-layout .cards.admin-home-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}}
}
@media screen {
  .page .admin-home-metrics .visual-metric{grid-template-columns:32px minmax(0,1fr);gap:4px 8px;align-content:start;}
  .page .admin-home-metrics .visual-metric > .dashboard-symbol{grid-row:1 / 3;width:32px;height:32px;}
  .page .admin-home-metrics .visual-metric > .muted{font-size:11px;line-height:1.4;}
  .page .admin-home-metrics .visual-metric > .muted:last-child{grid-column:1 / -1;margin-top:4px;}
}
@media screen {
  .page .table-tools{align-items:flex-end;}
  .page .table-tools > .btn{align-self:flex-end;}
  .page .table-tools :is(input,select){height:44px;min-height:44px;}
}
@media screen {
  .page :is(#calendar-month,#leave-year,#approved-year){height:44px;min-height:44px;}
}
@media screen {
  /* Keep every labelled filter input level with its 44px action, not only dates. */
  .page .button-row > .field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select){height:44px;min-height:44px;}
  .page .form-grid > .field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select){height:44px;min-height:44px;}
  /* Let wide timesheet tables scroll inside their card instead of widening the page. */
  .page .grid > .card{min-width:0;}
  #work-summary{max-width:100%;overflow-x:auto;}
}