/* ==========================================================================
   TeamHub — native-app shell for tablets & phones (<=1100px)
   Desktop (>1100px) is intentionally untouched by this file.
   ========================================================================== */

/* ---------- 1. Touch / app-feel primitives (all viewports, harmless on desktop) */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
button,a,.btn,.nav a,.iconbtn,.tabbar a,.pill,.badge,label,select{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
/* Kill sticky :hover artefacts on touch devices */
@media (hover:none){
  .card:hover{box-shadow:var(--shadow)}
  .nav a:hover{background:transparent;color:#5d6b64}
  .nav a.active:hover{background:var(--green);color:#fff}
  tbody tr:hover{background:transparent}
  .btn:hover{background:var(--green)}
  .btn.ghost:hover{background:var(--panel)}
  .iconbtn:hover{background:var(--panel)}
}

/* ---------- 2. Shared bits rendered on every viewport but only shown small */
.drawer-scrim{display:none}
.tabbar{display:none}
.appbar-search-btn{display:none}
.drawer-head{display:none}

/* ==========================================================================
   TABLET + PHONE  (<=1100px)
   ========================================================================== */
@media(max-width:1100px){

  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

  /* sticky needs a non-scrolling body; overflow-x:clip does not create one */
  @supports (overflow:clip){ body{overflow-x:clip} }

  body{
    overscroll-behavior-y:none;
    background:var(--bg);
  }

  /* ---- 2.1 Shell ---- */
  body .shell{
    display:block;
    min-height:100dvh;
  }

  .main{
    --app-pad-x:16px;
    --app-pad-y:12px;
    --tabbar-h:62px;
    padding:var(--app-pad-y) var(--app-pad-x)
            calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 26px);
    min-width:0;
    animation:app-page-in .26s ease both;
  }
  @keyframes app-page-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){ .main{animation:none} }

  /* ---- 2.2 Sidebar becomes an off-canvas drawer ---- */
  body .sidebar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    z-index:1300;
    width:min(84vw,300px);
    height:100dvh;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    gap:2px;
    padding:calc(env(safe-area-inset-top) + 14px) 14px
            calc(env(safe-area-inset-bottom) + 16px);
    background:var(--panel);
    border-right:1px solid var(--line);
    border-bottom:0;
    overflow:hidden auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    transform:translateX(-102%);
    opacity:1;
    pointer-events:auto;
    box-shadow:none;
    transition:transform .28s cubic-bezier(.32,.72,0,1),box-shadow .28s ease;
    -webkit-user-select:none;
    user-select:none;
  }
  /* the desktop "collapsed" class must not fight the drawer */
  html.sb-collapsed body .sidebar{
    transform:translateX(-102%);
    opacity:1;
    padding:calc(env(safe-area-inset-top) + 14px) 14px
            calc(env(safe-area-inset-bottom) + 16px);
    pointer-events:auto;
  }
  html.sb-collapsed body .shell{grid-template-columns:none}

  html.drawer-open body .sidebar,
  html.drawer-open.sb-collapsed body .sidebar{
    transform:translateX(0);
    box-shadow:0 0 60px rgba(15,46,34,.28);
  }
  html.drawer-open{overflow:hidden}
  html.drawer-open body{overflow:hidden}

  .drawer-scrim{
    display:block;
    position:fixed;
    inset:0;
    z-index:1290;
    background:rgba(12,28,22,.45);
    backdrop-filter:blur(2px);
    opacity:0;
    pointer-events:none;
    transition:opacity .28s ease;
  }
  html.drawer-open .drawer-scrim{opacity:1;pointer-events:auto}

  body .sidebar .brand{
    justify-content:flex-start;
    padding:0 4px 12px;
    flex-shrink:0;
  }
  body .sidebar .brand img{height:52px!important;width:auto}

  body .sidebar .nav{
    display:flex!important;
    flex-direction:column;
    flex-wrap:nowrap;
    grid-template-columns:none;
    gap:4px;
    flex:0 0 auto;
    overflow:visible!important;
  }
  body .sidebar .nav a{
    padding:13px 14px;
    border-radius:13px;
    gap:13px;
    font-size:14.5px;
    min-height:48px;
    transition:transform .12s ease,background .15s ease;
  }
  .sidebar .nav a .ic{width:20px}
  .sidebar .nav a .ic svg{width:19px;height:19px}
  .sidebar .nav a:active{transform:scale(.975)}
  body .sidebar .promo{
    display:block;
    margin-top:14px;
    padding:16px;
    flex-shrink:0;
  }

  /* ---- 2.3 Top bar becomes a native app bar ---- */
  .topbar{
    position:sticky;
    top:0;
    z-index:950;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    flex-wrap:nowrap;
    gap:8px;
    margin:calc(-1 * var(--app-pad-y)) calc(-1 * var(--app-pad-x)) 16px;
    padding:calc(env(safe-area-inset-top) + 9px) var(--app-pad-x) 9px;
    background:var(--panel);
    border-bottom:1px solid var(--line);
    -webkit-user-select:none;
    user-select:none;
  }
  .topbar .title{
    flex:1;
    min-width:0;
    align-items:center!important;
    gap:10px!important;
  }
  .topbar .title>div{min-width:0}
  .topbar .title h1{
    font-size:18px;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .topbar .crumbs{display:none}

  body .sb-toggle{
    width:42px;
    height:42px;
    border-radius:13px;
    flex-shrink:0;
    transition:transform .12s ease,background .15s ease;
  }
  body .sb-toggle:active{transform:scale(.92)}

  .appbar-clock{
    flex-shrink:0;
    text-align:right!important;
    line-height:1.1;
  }
  .appbar-clock #current-time{font-size:14.5px!important;font-weight:600}
  .appbar-clock #current-date{display:none}

  .topbar .tools{
    width:auto;
    flex:0 0 auto;
    flex-wrap:nowrap;
    gap:6px;
  }
  .topbar .appbar-search-btn{order:1}
  .topbar #theme-toggle{order:2}
  .topbar .userchip{
    order:3;
    width:auto;
    flex:0 0 auto;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:flex-end;
    padding-top:0;
  }
  .topbar .iconbtn,
  .iconbtn{
    width:42px;
    height:42px;
    border-radius:13px;
    flex-shrink:0;
    transition:transform .12s ease,background .15s ease;
  }
  .iconbtn:active{transform:scale(.92)}

  .appbar-search-btn{display:grid}

  /* search collapses behind an icon and slides over the app bar */
  .topbar .search{
    display:none;
    order:0;
    width:auto;
    min-width:0;
  }
  html.search-open .topbar .search{
    display:flex;
    /* the element carries an inline position:relative to anchor its results
       dropdown, so this needs !important to lift it over the app bar */
    position:absolute!important;
    left:var(--app-pad-x);
    right:calc(var(--app-pad-x) + 48px);
    top:calc(env(safe-area-inset-top) + 9px);
    height:42px;
    z-index:5;
    padding:0 14px;
    border-radius:13px;
    animation:app-search-in .18s ease both;
  }
  @keyframes app-search-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
  html.search-open .topbar .search input{font-size:15px}
  #global-search-dropdown{width:100%!important;max-width:none!important}

  .userchip{gap:0}
  .userchip .who,
  .userchip svg{display:none}
  .userchip .av{width:40px;height:40px;font-size:14px}
  #user-menu-btn{transition:transform .12s ease}
  #user-menu-btn:active{transform:scale(.92)}
  #user-dropdown{min-width:220px}

  /* ---- 2.4 Bottom tab bar ---- */
  .tabbar{
    display:flex;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1000;
    align-items:stretch;
    gap:2px;
    padding:5px 6px calc(5px + env(safe-area-inset-bottom));
    background:var(--panel);
    border-top:1px solid var(--line);
    box-shadow:0 -1px 14px rgba(20,40,30,.06);
    -webkit-user-select:none;
    user-select:none;
  }
  @supports (backdrop-filter:blur(1px)){
    .tabbar{backdrop-filter:saturate(180%) blur(14px)}
  }
  .tabbar a,
  .tabbar button{
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:5px 2px 4px;
    border:0;
    background:none;
    cursor:pointer;
    color:var(--muted);
    font-family:inherit;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.01em;
    transition:color .16s ease;
  }
  .tabbar .tab-ic{
    display:grid;
    place-items:center;
    width:52px;
    height:30px;
    border-radius:16px;
    transition:background .2s ease,transform .16s cubic-bezier(.32,.72,0,1);
  }
  .tabbar .tab-ic svg{width:21px;height:21px}
  .tabbar .tab-lab{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .tabbar a:active .tab-ic,
  .tabbar button:active .tab-ic{transform:scale(.9)}
  .tabbar a.active{color:var(--green)}
  .tabbar a.active .tab-ic{background:var(--mint)}
  html.drawer-open .tabbar button .tab-ic{background:var(--mint)}
  html.drawer-open .tabbar button{color:var(--green)}

  /* ---- 2.5 Touch-sized controls & no iOS zoom on focus ---- */
  input,select,textarea{
    font-size:16px;
    padding:12px 13px;
    border-radius:13px;
  }
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
  .btn{
    font-size:14px;
    padding:12px 18px;
    border-radius:13px;
    min-height:44px;
    transition:transform .12s ease,background .15s ease;
  }
  .btn:active{transform:scale(.97)}
  .btn.sm{padding:9px 14px;font-size:13px;min-height:38px}
  .nep-trigger{font-size:15px;padding:12px 13px;border-radius:13px;min-height:46px}
  .field label{font-size:13px}

  /* ---- 2.6 Panels / cards ---- */
  .grid-2.flip{grid-template-columns:1fr}
  .card{border-radius:16px}
  .grid-2 > .card{min-width:0}
  .request-stack,
  .request-stack>.card,
  .request-stack>.panel,
  .settings-form{min-width:0;max-width:100%}
  .settings-form .inline{grid-template-columns:minmax(0,1fr);min-width:0}
  .settings-form input,
  .settings-form select,
  .settings-form textarea{min-width:0;max-width:100%;box-sizing:border-box}
  .settings-form input[type="date"],
  .settings-form input[type="time"]{
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
    -webkit-appearance:none;
    appearance:none;
    height:46px;
    padding:12px 13px;
    border-radius:13px;
  }
  .card:active{transform:none}
  .panel{border-radius:16px}
  .panel .phead{padding:16px 16px 12px;gap:12px}
  .panel .phead h2{font-size:16px}
  .controls{width:100%}
  .responsive-sync-action{display:block;margin:0 0 14px}
  .responsive-sync-action .btn{width:100%;justify-content:center}
  .flash{border-radius:13px;font-size:13.5px;padding:13px 16px}

  /* horizontal scrollers get momentum + no visible bar */
  .panel{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .panel::-webkit-scrollbar{display:none}

  /* The mini month calendar is a layout table, not a data table: the
     .panel table min-widths in app.css would force it 560-640px wide and
     push the whole page into a horizontal scroll. */
  .panel table.cal{min-width:0;width:100%;table-layout:fixed}
  .calmonth{min-width:0}
}

/* ==========================================================================
   PHONE & TABLET-PORTRAIT  (<=900px)
   Data tables become cards, dialogs become bottom sheets.
   ========================================================================== */
@media(max-width:900px){

  /* ---- 3.1 Tables render as tap-friendly cards ---- */
  .panel:has(> .stack-table),
  .panel:has(.stack-table){overflow-x:visible}
  .stack-table{min-width:0!important;display:block;width:100%}
  .stack-table thead{display:none}
  .stack-table tbody{display:block}
  .stack-table tbody tr{
    display:block;
    margin:0 14px 10px;
    padding:4px 0;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:15px;
    box-shadow:0 1px 2px rgba(20,40,30,.04);
  }
  .stack-table tbody tr:first-child{margin-top:2px}
  .stack-table tbody td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    width:auto;
    padding:10px 14px;
    border:0;
    font-size:13.5px;
    text-align:right;
    white-space:normal;
  }
  .stack-table tbody td:not(:last-child){border-bottom:1px solid var(--line)}
  /* The leading cell identifies the record, so it heads the card instead of
     being just another label/value pair. */
  .stack-table tbody td:first-child{
    justify-content:flex-start;
    text-align:left;
    padding:12px 14px;
    font-size:14.5px;
    font-weight:600;
  }
  .stack-table tbody td:first-child::before{display:none}
  .stack-table tbody td:first-child>*{margin-left:0}
  .stack-table tbody td:first-child .emp{margin-left:0;justify-content:flex-start}
  .stack-table tbody td::before{
    content:attr(data-label);
    flex:0 0 38%;
    text-align:left;
    color:var(--muted);
    font-size:12px;
    font-weight:600;
  }
  .stack-table tbody td:not([data-label])::before{display:none}
  .stack-table tbody td>*{margin-left:auto}
  .stack-table tbody td .emp{margin-left:auto;justify-content:flex-end;text-align:left}
  .stack-table tbody td.table-actions,
  .stack-table tbody td.table-actions>form,
  .stack-table tbody td.table-actions>div{white-space:normal}
  .stack-table tbody td.table-actions{gap:8px;flex-wrap:wrap}
  .stack-table tbody td.table-preview{max-width:none}
  .stack-table tbody td .man-time-pair,
  .stack-table tbody td .lv-date-range{white-space:normal;overflow-wrap:anywhere;text-align:right}
  .stack-table tbody td.table-actions{
    display:flex!important;
    align-items:center;
    justify-content:space-between;
  }
  .stack-table tbody td.table-actions>form,
  .stack-table tbody td.table-actions>.lv-actions{
    display:inline-flex;
    width:max-content;
    max-width:100%;
    margin-left:0!important;
    flex:0 0 auto;
    margin-left:auto!important;
    justify-content:flex-end!important;
  }
  .stack-table tbody td.table-actions>form,
  .stack-table tbody td.table-actions>.lv-actions{justify-content:flex-end}
  .stack-table tbody td.table-actions>form{display:flex;flex-wrap:wrap}
  .stack-table tbody td.table-actions>form .btn{flex:1 1 120px;justify-content:center}
  .stack-table tbody td.table-actions>.lv-actions .btn{flex:0 0 auto}
  .stack-table tbody td.table-actions .btn.icon-action,
  .stack-table tbody td.table-actions>.lv-actions .btn.icon-action{
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    padding:0!important;
    font-size:0!important;
    flex:0 0 44px!important;
  }
  .stack-table tbody td.table-actions .btn.icon-action svg,
  .stack-table tbody td.table-actions>.lv-actions .btn.icon-action svg{
    width:18px!important;
    height:18px!important;
  }
  .stack-table tbody td.late-timesheet-time-col{
    align-items:flex-start;
  }
  .stack-table tbody td.late-timesheet-time-col .late-timesheet-time-cell{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    text-align:right;
    min-width:0;
    max-width:100%;
    margin-left:auto;
  }
  .stack-table tbody td.late-timesheet-time-col .late-timesheet-in-out{
    white-space:nowrap;
    font-weight:600;
    text-align:right;
  }
  .stack-table tbody td.late-timesheet-time-col .late-timesheet-breaks{
    margin-top:3px;
    line-height:1.35;
    font-size:11px;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    text-align:right;
    gap:2px;
    max-width:100%;
  }
  .stack-table tbody td.late-timesheet-time-col .late-timesheet-breaks span{
    display:block;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
    text-align:right;
  }
  .late-timesheet-table tbody td.late-timesheet-actions-cell{
    display:block;
    padding:12px 14px 14px;
    border-top:0;
    overflow-x:auto;
  }
  .late-timesheet-table tbody td.late-timesheet-actions-cell::before{display:none}
  .late-timesheet-table tbody td.late-timesheet-actions-cell{width:auto;min-width:0}
  .late-timesheet-actions{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:8px;
    width:max-content;
    min-width:100%;
  }
  .late-timesheet-actions>form,
  .late-timesheet-actions>button{flex:0 0 auto;min-width:0;margin:0}
  .late-timesheet-actions .btn{justify-content:center;white-space:nowrap;line-height:1.2}
  .late-timesheet-actions .btn.sm{min-height:42px;padding:8px 10px}
  .late-timesheet-actions .icon-action{width:48px;min-width:48px;height:48px;padding:0}
  .late-timesheet-actions .icon-action svg{width:19px;height:19px}
  /* full-width rows: empty states, colspan summaries */
  .stack-table tbody td[colspan]{
    justify-content:center;
    text-align:center;
    color:var(--muted);
  }
  .stack-table tbody td[colspan]::before{display:none}
  .stack-table tbody td[colspan]>*{margin-left:0}
  .stack-table tbody tr.stack-plain{
    background:transparent;
    border:0;
    box-shadow:none;
    margin:0;
  }
  .stack-table tfoot{display:block}
  .stack-table tfoot tr{display:block;margin:0 14px}
  .stack-table tfoot td{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border:0}

  .tfoot{flex-direction:column;align-items:stretch;gap:12px;padding:14px 16px}
  .tfoot .pager-wrapper,.tfoot .pager{justify-content:center}
  .pager-nav,.pager-scroll a,.pager-scroll span,.pager a,.pager span{
    min-width:38px;height:38px;font-size:13px;
  }
  .pager-scroll{max-width:min(60vw,260px)}

  /* ---- 3.2 Modals become bottom sheets ---- */
  .read-detail-modal,
  .confirm-modal,
  .control-modal{
    align-items:flex-end;
    padding:0;
  }
  #recovery-form-slot.is-open{align-items:flex-end;padding:0}
  .read-detail-card,
  .confirm-card,
  .control-modal-card,
  .recovery-modal-card{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    max-height:88dvh!important;
    border-radius:22px 22px 0 0!important;
    border-bottom:0!important;
    padding:10px 18px calc(20px + env(safe-area-inset-bottom))!important;
    animation:app-sheet-up .3s cubic-bezier(.32,.72,0,1) both;
    overscroll-behavior:contain;
  }
  .read-detail-card > *,
  .confirm-card > *,
  .control-modal-card > *,
  .recovery-modal-card > *,
  .control-modal-card form,
  .recovery-modal-card form,
  .control-modal-card .field,
  .recovery-modal-card .field,
  .control-modal-card .inline,
  .recovery-modal-card .inline{
    min-width:0;
    max-width:100%;
  }
  .control-modal-card input:not([type="hidden"]),
  .control-modal-card select,
  .control-modal-card textarea,
  .recovery-modal-card input:not([type="hidden"]),
  .recovery-modal-card select,
  .recovery-modal-card textarea,
  .control-modal-card .nep-wrap,
  .recovery-modal-card .nep-wrap{
    width:100%;
    min-width:0;
    max-width:100%;
  }
  .control-modal-card .inline,
  .recovery-modal-card .inline{
    grid-template-columns:minmax(0,1fr);
  }
  #mid-day-leave-modal .inline{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  #mid-day-leave-modal,
  #mid-day-leave-modal .control-modal-card,
  #mid-day-leave-modal form{
    max-width:100%;
    overflow-x:hidden;
  }
  #mid-day-leave-modal .inline,
  #mid-day-leave-modal .inline > .field,
  #mid-day-leave-modal input[type="time"]{
    min-width:0;
    max-width:100%;
    width:100%;
  }
  #mid-day-leave-modal .inline > .field{
    min-width:0;
    max-width:100%;
  }
  #mid-day-leave-modal .inline > .field label{
    overflow-wrap:anywhere;
  }
  .control-modal-head h2{
    min-width:0;
    overflow-wrap:anywhere;
  }
  .control-modal-card .btn,
  .recovery-modal-card .btn{
    max-width:100%;
  }
  .leave-decision-card{
    max-height:calc(100dvh - 8px)!important;
    overflow-y:auto;
  }
  .leave-decision-reason{
    max-height:96px;
    overflow-y:auto;
  }
  .leave-decision-actions{
    position:sticky;
    bottom:calc(-1 * env(safe-area-inset-bottom));
    margin:0 -18px calc(-1 * env(safe-area-inset-bottom));
    padding:10px 18px calc(10px + env(safe-area-inset-bottom));
    background:var(--panel);
    border-top:1px solid var(--line);
  }
  .leave-decision-actions .btn{
    min-height:44px;
    flex:1;
    justify-content:center;
  }
  .confirm-card{gap:12px;border-radius:22px 22px 0 0!important}
  .confirm-actions{justify-content:stretch;margin-top:8px}
  .confirm-actions .btn{flex:1;justify-content:center}
  @keyframes app-sheet-up{from{transform:translateY(100%)}to{transform:none}}
  @media (prefers-reduced-motion:reduce){
    .read-detail-card,.control-modal-card,.recovery-modal-card{animation:none}
  }
  .read-detail-card::before,
  .confirm-card::before,
  .control-modal-card::before,
  .recovery-modal-card::before{
    content:'';
    display:block;
    width:40px;
    height:4px;
    margin:2px auto 14px;
    border-radius:99px;
    background:var(--line);
  }
  .read-detail-fields{grid-template-columns:1fr}

  /* ---- 3.3 Filters & control rows stack ---- */
  .late-controls{flex-direction:column;gap:12px}
  .late-controls>.card:first-child,
  .late-controls>.late-filter-control,
  .late-filter-card{width:100%;flex:1 1 auto}
  .late-filter-form,.leave-filter-form{grid-template-columns:1fr}
  .late-filter-actions,.leave-filter-actions{grid-column:auto}
  .late-notice-table-wrap,.late-notice-modal-body{overflow-x:auto}
  .late-notice-table,.late-notice-full-table{min-width:520px}
  .late-notice-desktop-table{display:none}
  .late-notice-mobile-cards{display:block!important}
  .late-notice-modal-card,
  .late-notice-detail-card{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    max-height:88dvh!important;
    border-radius:22px 22px 0 0!important;
    padding:10px 18px calc(20px + env(safe-area-inset-bottom))!important;
  }
  .late-notice-modal-card{
    height:88dvh!important;
  }
  .late-notice-modal-body{
    flex:1 1 0;
    min-height:0;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .late-notice-detail-card{
    max-height:calc(100dvh - 24px)!important;
    overflow:hidden!important;
    padding:14px!important;
  }
  .late-notice-detail-card .control-modal-head{margin-bottom:12px}
  .late-notice-modal-header,
  .late-notice-detail-card .control-modal-head{padding:0}
  .late-notice-modal-header{
    flex-direction:column;
    align-items:stretch!important;
    gap:12px;
    padding:16px!important;
  }
  .late-notice-modal-header h2{
    flex:0 0 auto;
    white-space:nowrap;
  }
  .late-notice-modal-header>div{
    width:100%;
    min-width:0;
    justify-content:space-between;
    gap:10px!important;
  }
  .late-notice-modal-header>div>div{
    flex:1 1 auto;
    min-width:0;
    gap:8px!important;
  }
  .late-notice-modal-header #notice-month-filter{
    flex:1 1 0;
    width:100%!important;
    min-width:0!important;
    max-width:100%;
    box-sizing:border-box;
    padding:8px 10px!important;
  }
  .late-notice-modal-header .control-modal-close{flex:0 0 36px}
  .late-notice-month-filter{justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
  .late-notice-month-filter select{width:100%;min-width:0}
  .late-notice-detail-summary{grid-template-columns:1fr;gap:6px;padding:10px}
  .late-notice-detail-summary div{display:grid;grid-template-columns:1fr auto;justify-content:space-between;gap:4px 8px}
  .late-notice-detail-summary span{display:block}
  .late-notice-detail-reason{margin-top:10px}
  .late-notice-detail-reason-content{min-height:40px;padding:10px;white-space:normal;overflow-wrap:anywhere}
  .dna-issue-list label{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;line-height:1.45}
  .dna-issue-list input[type="checkbox"]{margin-top:3px;flex-shrink:0}
  .dna-form-actions{display:flex;flex-wrap:wrap;gap:8px}
  .dna-form-actions .btn{flex:1 1 140px;justify-content:center}
  .late-notice-card{padding:0}
  .late-notice-heading{padding:12px 14px;gap:10px;align-items:flex-start}
  .late-notice-heading .section-title{font-size:12px}
  .late-notice-viewall{width:100%;padding:8px 10px;border-radius:10px;background:var(--green-soft,rgba(46,125,50,.08));border:1px solid rgba(46,125,50,.18)}
  .late-employee-panel .phead{align-items:flex-start}
  .late-employee-panel .phead>div:last-child{width:100%;justify-content:flex-start;gap:6px}
  .late-employee-panel .phead>div:last-child .btn{flex:0 0 auto;width:auto}
  .late-employee-panel details[open]>div{padding:14px!important}
  .late-filter-actions .btn,.leave-filter-actions .btn{flex:1;justify-content:center}
  .lv-filter-bar,.man-filter-bar{padding:14px 16px}
  .lv-filter-bar .field,.man-filter-bar .field{min-width:0;width:100%}
  .lv-filter-bar .lv-filter-actions,.man-filter-bar .man-filter-clear{width:100%}
  .lv-filter-bar .lv-filter-actions .btn,.man-filter-bar .man-filter-clear .btn{width:100%;justify-content:center}
  .lv-emp-card{grid-template-columns:1fr}
  .request-table tbody td.table-actions form{width:100%;margin-left:0}
  .request-table tbody td.table-actions form .btn{flex:1;justify-content:center}
  .request-table tbody td.table-actions .lv-actions{
    display:inline-flex;
    width:auto;
    max-width:100%;
    gap:6px;
    margin-left:auto!important;
    align-items:center;
    align-self:flex-end;
  }
  .request-table tbody td.table-actions>form{
    width:auto!important;
    margin-left:auto!important;
    align-self:flex-end;
  }
  .request-table tbody td.table-actions .btn.icon-action{
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    flex:0 0 44px!important;
    padding:0!important;
    font-size:0!important;
  }
  .request-table tbody td.table-actions .btn.icon-action svg{
    width:18px!important;
    height:18px!important;
  }
  .stack-table tbody td.table-actions,
  .request-table tbody td.table-actions{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:space-between!important;
  }
  .stack-table tbody td.table-actions::before,
  .request-table tbody td.table-actions::before{
    flex:0 0 38%;
  }
  .stack-table tbody td.table-actions>form,
  .stack-table tbody td.table-actions>.lv-actions,
  .request-table tbody td.table-actions>form,
  .request-table tbody td.table-actions>.lv-actions{
    margin-left:auto!important;
    align-self:center!important;
    flex:0 0 auto!important;
  }
  .controls{flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:10px}
  .controls>input,
  .controls>select,
  .controls>.nep-wrap,
  .controls>.field{flex:1 1 100%;width:100%;min-width:0}
  .controls>.btn,
  .controls>button{flex:1 1 auto;width:auto;justify-content:center}
  .controls>div:not(.nep-wrap):not(.field){flex:1 1 auto;min-width:0}
  .controls>div:not(.nep-wrap):not(.field)>.btn{width:100%;justify-content:center}
  .controls .nep-wrap .nep-trigger{width:100%}
  .nep-pop{width:min(300px,calc(100vw - 32px));max-width:calc(100vw - 32px);box-sizing:border-box}

  /* ---- 3.4 Density ---- */
  .kpi{gap:12px}
  .stat-card{min-height:0}

  /* ---- 3.5 Toast sits above the tab bar ---- */
  #scheduler-toast{
    left:14px;
    right:14px;
    bottom:calc(var(--tabbar-h,62px) + env(safe-area-inset-bottom) + 14px);
    max-width:none;
    border-radius:14px;
    text-align:center;
  }
}

@media(max-width:600px){
  #mid-day-leave-modal .inline{grid-template-columns:minmax(0,1fr)}
}

/* ==========================================================================
   PHONE ONLY  (<=700px)
   ========================================================================== */
@media(max-width:700px){
  .main{--app-pad-x:14px}
  .topbar .title h1{font-size:17px}
  .appbar-clock{display:none}
  .stat-number{font-size:34px}
  .calgrid{grid-template-columns:1fr;gap:10px;padding:12px}
  .tabbar .tab-ic{width:46px}
  .tabbar a,.tabbar button{font-size:10px}
}

/* ==========================================================================
   Login screen — full-bleed app splash on small screens
   ========================================================================== */
@media(max-width:1100px){
  .login-wrap{
    min-height:100dvh;
    padding:calc(env(safe-area-inset-top) + 24px) 16px
            calc(env(safe-area-inset-bottom) + 24px);
  }
  .login-card .btn{width:100%;justify-content:center}
}
@media(max-width:600px){
  .login-card{
    width:100%;
    border-radius:24px;
    padding:28px 22px;
    box-shadow:0 18px 50px rgba(15,46,34,.20);
  }
}

/* ==========================================================================
   Dark theme touch-ups for the app shell
   ========================================================================== */
[data-theme="dark"] .tabbar{box-shadow:0 -1px 14px rgba(0,0,0,.35)}
[data-theme="dark"] .drawer-scrim{background:rgba(0,0,0,.58)}
[data-theme="dark"] .stack-table tbody tr{box-shadow:0 1px 2px rgba(0,0,0,.25)}
[data-theme="dark"] .tabbar a.active .tab-ic,
[data-theme="dark"].drawer-open .tabbar button .tab-ic{background:var(--mint-2)}

/* ==========================================================================
   Installed-PWA (standalone) refinements
   ========================================================================== */
@media (display-mode:standalone){
  body{overscroll-behavior:none}
  .topbar{-webkit-user-select:none;user-select:none}
}