/*
 * CARLREM Design System v2 — Phase D
 * This file is the canonical UI override layer from Phase D onward.
 * Keep legacy app.css for compatibility; new cross-module UI rules belong here.
 */
:root{
  --ds-sidebar:252px;
  --ds-sidebar-collapsed:78px;
  --ds-topbar:68px;
  --ds-content-max:1540px;
  --ds-gap-1:6px;
  --ds-gap-2:10px;
  --ds-gap-3:14px;
  --ds-gap-4:18px;
  --ds-gap-5:24px;
  --ds-surface:#fff;
  --ds-surface-2:#f7fafc;
  --ds-surface-3:#eef5f8;
  --ds-line:#dce7ec;
  --ds-line-strong:#cadbe3;
  --ds-text:#132839;
  --ds-muted:#71838e;
  --ds-maroon:#7f173e;
  --ds-maroon-dark:#5c102c;
  --ds-blue:#69bfe8;
  --ds-blue-soft:#eaf7fd;
  --ds-success:#23815c;
  --ds-warning:#9a6a19;
  --ds-danger:#b73b45;
  --ds-shadow:0 8px 26px rgba(37,64,80,.08);
  --ds-shadow-raised:0 16px 42px rgba(37,64,80,.13);
  --ds-radius-sm:10px;
  --ds-radius:14px;
  --ds-radius-lg:18px;
}

/* ---------- Global rhythm ---------- */
.carlrem-ui-v2{
  color:var(--ds-text);
}
.carlrem-ui-v2 .main{
  margin-left:var(--ds-sidebar);
  transition:margin-left .18s ease;
}
.carlrem-ui-v2 .sidebar{
  width:var(--ds-sidebar);
  padding:14px 12px 12px;
  transition:width .18s ease,padding .18s ease;
}
.carlrem-ui-v2 .content{
  width:100%;
  max-width:none;
  padding:22px clamp(16px,2.2vw,34px) 50px;
}
.carlrem-ui-v2 .content>*{
  width:min(100%,var(--ds-content-max));
  margin-left:auto;
  margin-right:auto;
}
.carlrem-ui-v2 .topbar{
  height:var(--ds-topbar);
  padding:0 clamp(14px,2vw,28px);
  grid-template-columns:minmax(200px,.85fr) minmax(280px,580px) minmax(240px,.85fr);
  background:rgba(255,255,255,.94);
  box-shadow:0 4px 18px rgba(35,62,78,.045);
}
.carlrem-ui-v2 .top-brand-copy small{
  max-width:180px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.carlrem-ui-v2 .top-search-wrap{
  height:40px;
  background:#f1f6f8;
  border:1px solid #edf2f5;
}
.carlrem-ui-v2 .top-search-wrap:focus-within{
  background:#fff;
  border-color:#bcddeb;
  box-shadow:0 0 0 4px rgba(105,191,232,.11);
}
.search-clear{
  width:26px;height:26px;border:0;border-radius:50%;background:#e8f0f4;color:#657984;
  display:grid;place-items:center;font-size:16px;line-height:1;
}
.search-clear:hover{background:#dceaf0;color:#385d70}

/* ---------- Sidebar ---------- */
.carlrem-ui-v2 .brand{
  min-height:48px;
  padding:0 4px 11px;
  justify-content:space-between;
}
.brand-home{
  display:flex;align-items:center;gap:10px;min-width:0;
}
.sidebar-collapse-btn{
  width:28px;height:28px;flex:0 0 28px;border:1px solid rgba(255,255,255,.11);border-radius:8px;
  display:grid;place-items:center;background:rgba(255,255,255,.07);color:#e9f5fb;font-size:20px;
  transition:.15s ease;
}
.sidebar-collapse-btn:hover{background:rgba(255,255,255,.14)}
.carlrem-ui-v2 .sidebar-profile{
  margin:2px 2px 10px;
  padding:10px;
  min-height:62px;
}
.carlrem-ui-v2 .side-nav{gap:2px}
.carlrem-ui-v2 .side-nav a{
  min-height:39px;
  padding:7px 9px;
  border-radius:10px;
  font-size:12px;
  gap:9px;
}
.carlrem-ui-v2 .nav-icon{
  width:25px;height:25px;flex-basis:25px;font-size:12px;
}
.carlrem-ui-v2 .nav-group-toggle{
  min-height:31px;
}
.carlrem-ui-v2 .sidebar-foot{
  padding-top:9px;
}
.carlrem-ui-v2 .signout-link{
  display:flex;align-items:center;width:100%;min-height:34px;padding:6px 8px;border-radius:9px;
}
.carlrem-ui-v2 .signout-link:hover{background:rgba(255,255,255,.08)}

/* Desktop collapsed sidebar */
@media(min-width:1051px){
  body.sidebar-collapsed .sidebar{width:var(--ds-sidebar-collapsed);padding-left:9px;padding-right:9px}
  body.sidebar-collapsed .main{margin-left:var(--ds-sidebar-collapsed)}
  body.sidebar-collapsed .brand{justify-content:center;flex-direction:column;gap:5px}
  body.sidebar-collapsed .brand-copy,
  body.sidebar-collapsed .sidebar-profile-copy,
  body.sidebar-collapsed .side-nav a>span:last-child,
  body.sidebar-collapsed .nav-group-toggle,
  body.sidebar-collapsed .sidebar-foot .signout-link{font-size:0}
  body.sidebar-collapsed .brand-home{justify-content:center}
  body.sidebar-collapsed .sidebar-profile{justify-content:center;padding:8px 2px;background:transparent;border-color:transparent}
  body.sidebar-collapsed .sidebar-profile .avatar{width:38px;height:38px;flex-basis:38px}
  body.sidebar-collapsed .nav-group-links{display:block!important}
  body.sidebar-collapsed .side-nav a{justify-content:center;padding:7px 3px}
  body.sidebar-collapsed .nav-icon{width:31px;height:31px;flex-basis:31px}
  body.sidebar-collapsed .sidebar-foot .signout-link::before{content:"↪";font-size:15px}
  body.sidebar-collapsed .sidebar-foot .signout-link{justify-content:center}
  body.sidebar-collapsed .sidebar-collapse-btn{transform:rotate(180deg)}
}

/* ---------- Page headers ---------- */
.carlrem-ui-v2 .page-head,
.carlrem-ui-v2 .page-title-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}
.carlrem-ui-v2 .page-head>div:first-child,
.carlrem-ui-v2 .page-title-row>div:first-child{min-width:0}
.carlrem-ui-v2 .page-head h1,
.carlrem-ui-v2 .page-title-row h1{
  margin:3px 0 4px;
  font-size:clamp(25px,2.15vw,34px);
  line-height:1.08;
  letter-spacing:-.035em;
}
.carlrem-ui-v2 .page-head p,
.carlrem-ui-v2 .page-title-row p{
  max-width:820px;
  margin:0;
  color:var(--ds-muted);
  font-size:12px;
  line-height:1.55;
}
.carlrem-ui-v2 .page-actions{
  display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap;
}
.carlrem-ui-v2 .page-actions form{margin:0}

/* ---------- Cards ---------- */
.carlrem-ui-v2 .card,
.carlrem-ui-v2 .composer-card,
.carlrem-ui-v2 .social-post,
.carlrem-ui-v2 .side-panel{
  border:1px solid var(--ds-line);
  border-radius:var(--ds-radius);
  background:var(--ds-surface);
  box-shadow:var(--ds-shadow);
}
.carlrem-ui-v2 .card{padding:16px}
.carlrem-ui-v2 .card:hover{border-color:var(--ds-line-strong)}
.carlrem-ui-v2 .card-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;
}
.carlrem-ui-v2 .card-head h2{font-size:16px;letter-spacing:-.01em}
.carlrem-ui-v2 .muted{color:var(--ds-muted)}
.carlrem-ui-v2 .notice{
  border-radius:11px;
  border-color:#cce3ee;
  background:#f6fbfd;
  line-height:1.5;
}

/* ---------- KPI design system ---------- */
.ds-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin:0 auto 14px;
}
.ds-kpi{
  position:relative;
  min-height:96px;
  padding:13px 14px;
  border:1px solid var(--ds-line);
  border-radius:13px;
  background:linear-gradient(145deg,#fff,#f8fbfd);
  box-shadow:0 6px 20px rgba(37,64,80,.055);
  overflow:hidden;
}
.ds-kpi::after{
  content:"";
  position:absolute;inset:auto -26px -32px auto;width:88px;height:88px;border-radius:50%;
  background:rgba(105,191,232,.10);
}
.ds-kpi[data-tone="maroon"]::after{background:rgba(127,23,62,.08)}
.ds-kpi[data-tone="warning"]::after{background:rgba(154,106,25,.09)}
.ds-kpi[data-tone="success"]::after{background:rgba(35,129,92,.09)}
.ds-kpi span,.ds-kpi strong,.ds-kpi small{position:relative;z-index:1;display:block}
.ds-kpi span{font-size:7px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#7b8e99}
.ds-kpi strong{margin:5px 0 2px;font-size:22px;line-height:1;color:#203d4e}
.ds-kpi small{font-size:7px;color:#83949e;line-height:1.4}

/* ---------- Buttons ---------- */
.carlrem-ui-v2 .btn{
  min-height:36px;
  padding:8px 12px;
  border-radius:10px;
  font-size:8px;
  font-weight:850;
  letter-spacing:.005em;
  box-shadow:none;
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,background .12s ease;
}
.carlrem-ui-v2 .btn:hover{transform:translateY(-1px)}
.carlrem-ui-v2 .btn.primary{
  background:linear-gradient(135deg,#8b1744,#8e2348 52%,#64bbe5);
  box-shadow:0 6px 16px rgba(127,23,62,.14);
}
.carlrem-ui-v2 .btn.primary:hover{box-shadow:0 8px 20px rgba(127,23,62,.19)}
.carlrem-ui-v2 .mini-link,
.carlrem-ui-v2 .button-link{
  border-radius:8px;
  font-size:7.5px;
  font-weight:800;
}

/* ---------- Forms ---------- */
.carlrem-ui-v2 label{
  color:#425d6c;
  font-size:8px;
  font-weight:750;
}
.carlrem-ui-v2 input,
.carlrem-ui-v2 select,
.carlrem-ui-v2 textarea{
  min-height:39px;
  border:1px solid #d7e3e8;
  border-radius:10px;
  background:#fff;
  font-size:9px;
  transition:border-color .12s ease,box-shadow .12s ease,background .12s ease;
}
.carlrem-ui-v2 textarea{min-height:86px}
.carlrem-ui-v2 input:hover,
.carlrem-ui-v2 select:hover,
.carlrem-ui-v2 textarea:hover{border-color:#c6dbe4}
.carlrem-ui-v2 input:focus,
.carlrem-ui-v2 select:focus,
.carlrem-ui-v2 textarea:focus{
  border-color:#79bfe0;
  box-shadow:0 0 0 4px rgba(105,191,232,.11);
  outline:0;
}
.carlrem-ui-v2 .form-section-title{
  color:var(--ds-maroon);
  font-size:8px;
  letter-spacing:.1em;
}

/* ---------- Tables ---------- */
.carlrem-ui-v2 .table-card{
  padding:0;
  overflow:hidden;
}
.carlrem-ui-v2 .table-scroll{
  overflow:auto;
  scrollbar-width:thin;
}
.carlrem-ui-v2 table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.carlrem-ui-v2 table thead th{
  padding:10px 11px;
  background:#f5f9fb;
  color:#627986;
  border-bottom:1px solid var(--ds-line);
  font-size:7px;
  font-weight:900;
  letter-spacing:.045em;
  text-transform:uppercase;
  white-space:nowrap;
}
.carlrem-ui-v2 table tbody td{
  padding:10px 11px;
  border-bottom:1px solid #edf2f4;
  background:#fff;
  font-size:8.5px;
  line-height:1.38;
}
.carlrem-ui-v2 table tbody tr:last-child td{border-bottom:0}
.carlrem-ui-v2 table tbody tr:hover td{background:#fbfdfe}
.carlrem-ui-v2 table td strong{color:#294858}
.carlrem-ui-v2 table td small{color:#81919a}

/* ---------- Status badge normalization ---------- */
.carlrem-ui-v2 .badge{
  display:inline-flex;align-items:center;min-height:23px;padding:4px 8px;border:1px solid #dde7eb;border-radius:999px;
  background:#f5f8fa;color:#58707e;font-size:6.5px;font-weight:900;line-height:1.1;text-transform:capitalize;
}
.carlrem-ui-v2 .badge[data-status*="approved"],
.carlrem-ui-v2 .badge[data-status*="accepted"],
.carlrem-ui-v2 .badge[data-status*="active"],
.carlrem-ui-v2 .badge[data-status*="completed"],
.carlrem-ui-v2 .badge[data-status*="released"],
.carlrem-ui-v2 .badge[data-status*="healthy"],
.carlrem-ui-v2 .badge[data-status*="validated"]{
  background:#edf8f3;border-color:#cbe8dc;color:#287156;
}
.carlrem-ui-v2 .badge[data-status*="pending"],
.carlrem-ui-v2 .badge[data-status*="review"],
.carlrem-ui-v2 .badge[data-status*="submitted"],
.carlrem-ui-v2 .badge[data-status*="validation"],
.carlrem-ui-v2 .badge[data-status*="progress"]{
  background:#fff8e9;border-color:#ebdbad;color:#8a651d;
}
.carlrem-ui-v2 .badge[data-status*="returned"],
.carlrem-ui-v2 .badge[data-status*="rejected"],
.carlrem-ui-v2 .badge[data-status*="inactive"],
.carlrem-ui-v2 .badge[data-status*="missing"],
.carlrem-ui-v2 .badge[data-status*="cancelled"],
.carlrem-ui-v2 .badge[data-status*="archived"]{
  background:#fff0f2;border-color:#efccd2;color:#a43c49;
}
.carlrem-ui-v2 .badge[data-status*="day-off"],
.carlrem-ui-v2 .badge[data-status*="leave"],
.carlrem-ui-v2 .badge[data-status*="locked"]{
  background:#eef6fa;border-color:#d2e6f0;color:#426f86;
}

/* ---------- Flash messages ---------- */
.carlrem-ui-v2 .flash{
  position:relative;
  display:flex;align-items:flex-start;gap:9px;
  padding:11px 42px 11px 12px;
  border-radius:11px;
  box-shadow:0 6px 18px rgba(37,64,80,.07);
}
.flash-dismiss{
  position:absolute;right:8px;top:7px;width:26px;height:26px;border:0;border-radius:50%;
  background:transparent;color:inherit;font-size:15px;opacity:.65;
}
.flash-dismiss:hover{background:rgba(0,0,0,.045);opacity:1}

/* ---------- Modals ---------- */
.carlrem-ui-v2 .modal{
  background:rgba(16,31,41,.50);
  backdrop-filter:blur(7px);
}
.carlrem-ui-v2 .modal-dialog{
  border:1px solid rgba(255,255,255,.8);
  border-radius:18px;
  box-shadow:0 28px 80px rgba(13,29,40,.25);
}
.carlrem-ui-v2 .modal-head{
  padding:16px 18px;
  background:linear-gradient(135deg,#fff,#f3f9fc);
}
.carlrem-ui-v2 .modal-body{padding:16px 18px}

/* ---------- Quick create ---------- */
.carlrem-ui-v2 .quick-grid a{
  border:1px solid var(--ds-line);
  background:#fff;
  box-shadow:0 4px 13px rgba(37,64,80,.05);
}
.carlrem-ui-v2 .quick-grid a:hover{
  border-color:#bcdde9;
  transform:translateY(-2px);
  box-shadow:var(--ds-shadow);
}
.carlrem-ui-v2 .quick-icon{
  background:linear-gradient(135deg,#f7eaf0,#e9f7fd);
}

/* ---------- Workspace details ---------- */
.carlrem-ui-v2 .workspace-stat-grid>a,
.carlrem-ui-v2 .phase-strip>a,
.carlrem-ui-v2 .quick-action-btn{
  border-color:var(--ds-line);
}
.carlrem-ui-v2 .workspace-stat-grid>a:hover,
.carlrem-ui-v2 .phase-strip>a:hover,
.carlrem-ui-v2 .quick-action-btn:hover{
  border-color:#bddde9;
  box-shadow:0 7px 18px rgba(37,64,80,.07);
}

/* ---------- Phase D page-specific polish ---------- */
.attendance-exception-row td{background:#fffdf8!important}
.attendance-missing-row td{background:#fff7f8!important}
.payroll-summary-strip{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px;
}
.payroll-summary-strip>div{
  padding:11px 12px;border:1px solid var(--ds-line);border-radius:11px;background:#fff;
}
.payroll-summary-strip span,.payroll-summary-strip strong,.payroll-summary-strip small{display:block}
.payroll-summary-strip span{font-size:6.5px;color:#7f919b;text-transform:uppercase;font-weight:900}
.payroll-summary-strip strong{margin:3px 0;font-size:15px;color:#274655}
.payroll-summary-strip small{font-size:6.5px;color:#87969e}
.directory-toolbar{
  display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;
}
.directory-toolbar-copy{font-size:8px;color:#71848f}
.directory-toolbar-copy strong{color:#314f60}
.bundy-mini-summary{margin-top:-4px}

/* ---------- Responsive table cards ---------- */
@media(max-width:760px){
  .carlrem-ui-v2 .table-card{background:transparent;border:0;box-shadow:none;overflow:visible}
  .carlrem-ui-v2 .table-card>.table-scroll{overflow:visible}
  .carlrem-ui-v2 table.ds-responsive-table,
  .carlrem-ui-v2 table.ds-responsive-table tbody{
    display:block;width:100%;
  }
  .carlrem-ui-v2 table.ds-responsive-table thead{display:none}
  .carlrem-ui-v2 table.ds-responsive-table tbody tr{
    display:block;
    margin:0 0 9px;
    padding:4px 11px;
    border:1px solid var(--ds-line);
    border-radius:13px;
    background:#fff;
    box-shadow:0 5px 16px rgba(37,64,80,.055);
  }
  .carlrem-ui-v2 table.ds-responsive-table tbody tr[hidden]{display:none!important}
  .carlrem-ui-v2 table.ds-responsive-table tbody td{
    display:grid;
    grid-template-columns:minmax(88px,34%) minmax(0,1fr);
    gap:10px;
    align-items:start;
    width:100%;
    padding:8px 0;
    border:0;
    border-bottom:1px solid #edf2f4;
    background:transparent!important;
    font-size:9px;
  }
  .carlrem-ui-v2 table.ds-responsive-table tbody td:last-child{border-bottom:0}
  .carlrem-ui-v2 table.ds-responsive-table tbody td::before{
    content:attr(data-label);
    color:#81919a;
    font-size:6.5px;
    font-weight:900;
    letter-spacing:.045em;
    text-transform:uppercase;
  }
  .carlrem-ui-v2 table.ds-responsive-table tbody td[colspan]{
    display:block;padding:8px 0;
  }
  .carlrem-ui-v2 table.ds-responsive-table tbody td[colspan]::before{display:none}
  .carlrem-ui-v2 table.ds-responsive-table .row-actions{
    justify-content:flex-start;flex-wrap:wrap;
  }
}

/* ---------- Mobile ---------- */
@media(max-width:1050px){
  .carlrem-ui-v2 .main{margin-left:0}
  .carlrem-ui-v2 .sidebar{width:min(86vw,310px)}
  .sidebar-collapse-btn{display:none}
}
@media(max-width:760px){
  .carlrem-ui-v2 .content{
    padding:14px 12px calc(84px + env(safe-area-inset-bottom));
  }
  .carlrem-ui-v2 .topbar{
    height:58px;
    padding:0 10px;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:8px;
  }
  .carlrem-ui-v2 .top-search-wrap{
    height:36px;
    min-width:0;
  }
  .carlrem-ui-v2 .top-brand-copy strong{font-size:11px}
  .carlrem-ui-v2 .top-brand-copy small{font-size:8px;max-width:105px}
  .carlrem-ui-v2 .page-head,
  .carlrem-ui-v2 .page-title-row{
    align-items:stretch;
    flex-direction:column;
    gap:10px;
    margin-bottom:12px;
  }
  .carlrem-ui-v2 .page-head h1,
  .carlrem-ui-v2 .page-title-row h1{font-size:25px}
  .carlrem-ui-v2 .page-actions{
    justify-content:flex-start;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  .carlrem-ui-v2 .page-actions::-webkit-scrollbar{display:none}
  .carlrem-ui-v2 .page-actions>*{flex:0 0 auto}
  .carlrem-ui-v2 .card{padding:13px}
  .ds-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .ds-kpi{min-height:84px;padding:11px}
  .ds-kpi strong{font-size:19px}
  .payroll-summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .payroll-summary-strip>div:last-child{grid-column:1/-1}
  .directory-toolbar{align-items:flex-start;flex-direction:column}
  .carlrem-ui-v2 .modal{padding:0;align-items:flex-end}
  .carlrem-ui-v2 .modal-dialog{width:100%;max-height:94vh;margin:auto 0 0;border-radius:20px 20px 0 0}
  .carlrem-ui-v2 .modal-head{position:sticky;top:0;z-index:3;padding:14px}
  .carlrem-ui-v2 .modal-body{padding:14px calc(13px + env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) calc(13px + env(safe-area-inset-left))}
  .carlrem-ui-v2 .bottom-nav{
    border-top:1px solid #dae6eb;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(13px);
    box-shadow:0 -8px 24px rgba(37,64,80,.09);
  }
}
@media(max-width:420px){
  .ds-kpi-grid{grid-template-columns:1fr 1fr}
  .carlrem-ui-v2 .profile-pill-name{display:none}
}

/* ---------- Print hygiene ---------- */
@media print{
  .sidebar-collapse-btn,.search-clear{display:none!important}
}


/* =========================================================
   Phase D Hotfix — Desktop Alignment + Mobile Motion Restore
   ========================================================= */

/*
 * Legacy app.css still contains:
 * @media (min-width:821px) and (pointer:fine) {
 *   .main { margin-left:270px!important; }
 * }
 *
 * Phase D deliberately uses a 252px desktop sidebar and a 78px
 * collapsed sidebar, so the canonical design layer must override
 * that old !important rule.
 */
@media(min-width:1051px){
  body.carlrem-ui-v2 .sidebar{
    width:var(--ds-sidebar)!important;
  }
  body.carlrem-ui-v2 .main{
    margin-left:var(--ds-sidebar)!important;
  }

  body.carlrem-ui-v2.sidebar-collapsed .sidebar{
    width:var(--ds-sidebar-collapsed)!important;
    padding-left:8px;
    padding-right:8px;
  }
  body.carlrem-ui-v2.sidebar-collapsed .main{
    margin-left:var(--ds-sidebar-collapsed)!important;
  }

  /* Hide real child typography instead of only setting parent font-size:0. */
  body.carlrem-ui-v2.sidebar-collapsed .brand-copy,
  body.carlrem-ui-v2.sidebar-collapsed .sidebar-profile-copy,
  body.carlrem-ui-v2.sidebar-collapsed .side-nav a>span:last-child,
  body.carlrem-ui-v2.sidebar-collapsed .nav-group-toggle{
    display:none!important;
  }

  body.carlrem-ui-v2.sidebar-collapsed .brand{
    min-height:auto;
    padding:0 0 10px;
    flex-direction:column;
    justify-content:center;
    gap:6px;
  }
  body.carlrem-ui-v2.sidebar-collapsed .brand-home{
    width:100%;
    justify-content:center;
  }
  body.carlrem-ui-v2.sidebar-collapsed .brand .brand-logo-image{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
  }
  body.carlrem-ui-v2.sidebar-collapsed .sidebar-collapse-btn{
    width:32px;
    height:25px;
    flex-basis:25px;
    transform:rotate(180deg);
  }
  body.carlrem-ui-v2.sidebar-collapsed .sidebar-profile{
    min-height:48px;
    margin:0 0 8px;
    padding:4px 0;
    justify-content:center;
    background:transparent;
    border-color:transparent;
  }
  body.carlrem-ui-v2.sidebar-collapsed .sidebar-profile .avatar{
    width:40px;
    height:40px;
    flex-basis:40px;
  }
  body.carlrem-ui-v2.sidebar-collapsed .side-nav{
    padding-right:0;
  }
  body.carlrem-ui-v2.sidebar-collapsed .nav-primary,
  body.carlrem-ui-v2.sidebar-collapsed .nav-group-links{
    width:100%;
  }
  body.carlrem-ui-v2.sidebar-collapsed .nav-group{
    margin:0;
    padding:0;
    border:0;
  }
  body.carlrem-ui-v2.sidebar-collapsed .nav-group-links{
    display:block!important;
  }
  body.carlrem-ui-v2.sidebar-collapsed .side-nav a{
    width:100%;
    min-height:44px;
    padding:6px 0;
    justify-content:center;
    gap:0;
  }
  body.carlrem-ui-v2.sidebar-collapsed .side-nav a:hover{
    transform:none;
  }
  body.carlrem-ui-v2.sidebar-collapsed .nav-icon{
    width:34px;
    height:34px;
    flex:0 0 34px;
    margin:0 auto;
  }
  body.carlrem-ui-v2.sidebar-collapsed .sidebar-foot{
    padding:8px 0 0;
  }
  body.carlrem-ui-v2.sidebar-collapsed .sidebar-foot .signout-link{
    min-height:42px;
    padding:0;
    justify-content:center;
    font-size:0;
  }
  body.carlrem-ui-v2.sidebar-collapsed .sidebar-foot .signout-link::before{
    content:"↪";
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:rgba(255,255,255,.07);
    font-size:16px;
  }
}

/* Smooth content entrance. Kept short so the PWA feels responsive. */
@keyframes dsPageIn{
  from{opacity:.25;transform:translateY(7px)}
  to{opacity:1;transform:none}
}
@keyframes dsFadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes dsSheetUp{
  from{opacity:.65;transform:translateY(34px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes dsMenuIn{
  from{opacity:0;transform:translateY(-5px) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes dsMobileModalIn{
  from{opacity:.7;transform:translateY(28px)}
  to{opacity:1;transform:translateY(0)}
}

body.carlrem-ui-v2.ui-ready #pageContent{
  animation:dsPageIn .20s ease-out both;
}
body.carlrem-ui-v2 .profile-menu.show{
  animation:dsMenuIn .16s ease-out both;
}

/* Restore PWA/mobile interaction movement that Phase-D's blanket
   reduced-motion rule unintentionally suppressed. */
@media(max-width:1050px){
  body.carlrem-ui-v2 .sidebar{
    transition:transform .22s cubic-bezier(.2,.8,.2,1)!important;
  }
  body.carlrem-ui-v2 .sidebar-overlay.show{
    animation:dsFadeIn .18s ease-out both;
  }
}

@media(max-width:820px){
  body.carlrem-ui-v2 .quick-sheet.show{
    animation:dsFadeIn .18s ease-out both;
  }
  body.carlrem-ui-v2 .quick-sheet.show .sheet-card{
    animation:dsSheetUp .24s cubic-bezier(.18,.82,.24,1) both;
  }
  body.carlrem-ui-v2 .modal.show .modal-dialog{
    animation:dsMobileModalIn .22s cubic-bezier(.18,.82,.24,1) both;
  }
  body.carlrem-ui-v2 .bottom-nav>a,
  body.carlrem-ui-v2 .bottom-nav>button{
    transition:transform .13s ease,background .13s ease,color .13s ease;
  }
  body.carlrem-ui-v2 .bottom-nav>a:active,
  body.carlrem-ui-v2 .bottom-nav>button:active{
    transform:scale(.94);
  }
  body.carlrem-ui-v2 .create-fab{
    transition:transform .14s ease,box-shadow .14s ease!important;
  }
  body.carlrem-ui-v2 .create-fab:active{
    transform:scale(.92);
  }
}

/*
 * Accessibility remains supported without disabling functional UI motion.
 * Users asking for reduced motion still avoid smooth scrolling and long,
 * decorative image zooms, while drawer/sheet state changes remain visible.
 */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  body.carlrem-ui-v2 .feed-photo-item img{
    transition:none!important;
  }
  body.carlrem-ui-v2.ui-ready #pageContent{
    animation-duration:.10s;
    transform:none;
  }
}


/* =========================================================
   Phase E — Employee 201 File
   ========================================================= */
.employee-201-head{
  width:min(100%,var(--ds-content-max));margin:0 auto 12px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px;border:1px solid var(--ds-line);border-radius:18px;
  background:linear-gradient(135deg,#fff 0%,#f9fcfd 56%,#eef8fd 100%);
  box-shadow:var(--ds-shadow);
}
.employee-201-identity{display:flex;align-items:center;gap:14px;min-width:0}
.employee-201-photo{width:78px;height:78px;flex:0 0 78px;border-radius:20px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#8a1643,#70c4eb);color:#fff;font-size:24px;font-weight:900;box-shadow:0 9px 25px rgba(72,68,91,.17)}
.employee-201-photo img{width:100%;height:100%;object-fit:cover}
.employee-201-title{min-width:0}
.employee-201-title h1{margin:3px 0 4px;font-size:clamp(25px,2.2vw,35px);line-height:1.05;letter-spacing:-.04em}
.employee-201-title p{margin:0;color:#6f8490;font-size:11px}
.employee-201-badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.employee-201-head-actions{display:flex;gap:7px;align-items:center;justify-content:flex-end;flex-wrap:wrap}

.employee-201-completeness{
  width:min(100%,var(--ds-content-max));margin:0 auto 12px;padding:11px 14px;
  border:1px solid #d9e7ed;border-radius:13px;background:#fff;box-shadow:0 5px 17px rgba(37,64,80,.05)
}
.employee-201-progress-copy{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:center}
.employee-201-progress-copy span{font-size:6.5px;font-weight:900;letter-spacing:.08em;color:#718690}
.employee-201-progress-copy strong{font-size:15px;color:#7f173e}
.employee-201-progress-copy small{font-size:7px;color:#87969e}
.employee-201-progress{height:7px;margin:8px 0;border-radius:999px;background:#edf3f6;overflow:hidden}
.employee-201-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8d1744,#65bee7)}
.employee-checklist summary{cursor:pointer;font-size:7px;font-weight:850;color:#597384}
.employee-checklist-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:8px}
.employee-checklist-grid>div{display:flex;align-items:center;gap:6px;padding:7px 8px;border:1px solid #e2eaee;border-radius:9px;font-size:7px}
.employee-checklist-grid>div span{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;font-weight:900}
.employee-checklist-grid .complete span{background:#e8f6ef;color:#237451}
.employee-checklist-grid .incomplete span{background:#fff1f2;color:#aa3f4a}

.employee-201-tabs{
  width:min(100%,var(--ds-content-max));margin:0 auto 14px;
  display:flex;gap:4px;padding:5px;border:1px solid var(--ds-line);border-radius:12px;background:#fff;
  overflow-x:auto;scrollbar-width:none;box-shadow:0 4px 15px rgba(37,64,80,.04)
}
.employee-201-tabs::-webkit-scrollbar{display:none}
.employee-201-tabs a{flex:0 0 auto;padding:8px 11px;border-radius:8px;color:#667d89;font-size:7.5px;font-weight:850;white-space:nowrap}
.employee-201-tabs a:hover{background:#f2f7f9;color:#395e71}
.employee-201-tabs a.active{background:linear-gradient(135deg,#7f173e,#9a234e 55%,#6bbfe6);color:#fff;box-shadow:0 5px 12px rgba(127,23,62,.13)}

.employee-profile-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(310px,.75fr);gap:12px;margin-bottom:12px}
.employee-detail-grid em{display:block;margin-top:2px;font-size:6.5px;font-style:normal;color:#8b999f}
.employee-summary-list{display:grid;gap:0}
.employee-summary-list>div{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #edf2f4}
.employee-summary-list>div:last-child{border-bottom:0}
.employee-summary-list span{font-size:7px;color:#7b8e98}
.employee-summary-list strong{font-size:8px;text-align:right;color:#345465}

.profile-health-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.profile-health-grid>div{padding:10px;border:1px solid #e0e9ed;border-radius:10px;background:#f9fbfc}
.profile-health-grid span,.profile-health-grid strong{display:block}
.profile-health-grid span{font-size:6.5px;text-transform:uppercase;color:#80909a;font-weight:900}
.profile-health-grid strong{margin-top:3px;font-size:16px;color:#294959}

.employment-timeline{position:relative;display:grid;gap:0;padding-left:17px}
.employment-timeline::before{content:"";position:absolute;left:5px;top:9px;bottom:9px;width:2px;background:#dfe9ed}
.employment-timeline article{position:relative;padding:0 0 16px 15px}
.employment-timeline article:last-child{padding-bottom:0}
.timeline-dot{position:absolute;left:-17px;top:6px;width:11px;height:11px;border:2px solid #fff;border-radius:50%;background:#9baeb8;box-shadow:0 0 0 2px #dbe6eb}
.employment-timeline article.current .timeline-dot{background:#7f173e;box-shadow:0 0 0 3px #f0dfe6}
.timeline-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.timeline-content h3{margin:4px 0 2px;font-size:10px;color:#2f4f5f}
.timeline-content p{margin:0;font-size:7.5px;color:#6f8490}
.timeline-content small{display:block;margin-top:3px;color:#8b999f;font-size:6.5px}

.org-profile-stack{display:grid;gap:8px;margin-bottom:12px}
.org-profile-stack>div{padding:11px 12px;border:1px solid #e0e9ed;border-radius:10px;background:#f8fbfc}
.org-profile-stack span,.org-profile-stack strong{display:block}
.org-profile-stack span{font-size:6.5px;color:#82939d;text-transform:uppercase;font-weight:900}
.org-profile-stack strong{margin-top:3px;font-size:10px;color:#294959}

.schedule-preview-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.schedule-preview-grid>div{min-height:88px;padding:10px;border:1px solid #dde8ec;border-radius:11px;background:#f9fbfc}
.schedule-preview-grid>div.day-off{background:#f2f5f7;border-style:dashed}
.schedule-preview-grid span,.schedule-preview-grid strong,.schedule-preview-grid small{display:block}
.schedule-preview-grid span{font-size:6.5px;color:#7d8e98;text-transform:uppercase;font-weight:900}
.schedule-preview-grid strong{margin:5px 0;font-size:12px;color:#2a4959}
.schedule-preview-grid small{font-size:6.5px;color:#6f838e;line-height:1.4}

.pay-profile-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:8px}
.pay-profile-hero>div{padding:12px;border-radius:11px;background:#f6fafc;border:1px solid #dce8ed}
.pay-profile-hero span,.pay-profile-hero strong{display:block}
.pay-profile-hero span{font-size:6.5px;color:#7a8e99;text-transform:uppercase;font-weight:900}
.pay-profile-hero strong{margin-top:4px;font-size:16px;color:#274756}
.payslip-split-profile{display:grid;grid-template-columns:3fr 2fr;margin-bottom:10px;border-radius:11px;overflow:hidden}
.payslip-split-profile>div{padding:11px 12px}.payslip-split-profile>div:first-child{background:#f7eaf0}.payslip-split-profile>div:last-child{background:#eaf7fd}
.payslip-split-profile span,.payslip-split-profile strong{display:block}.payslip-split-profile span{font-size:6.5px;font-weight:900}.payslip-split-profile strong{margin-top:2px;font-size:15px}
.compact-history{display:grid;gap:7px}
.compact-history>div{padding:9px 10px;border:1px solid #e1e9ed;border-radius:9px;background:#fafcfd}
.compact-history>div>div{display:flex;justify-content:space-between;gap:8px}.compact-history strong{font-size:8.5px}.compact-history span{font-size:7px;color:#7f173e;font-weight:850}.compact-history small{display:block;margin-top:3px;font-size:6.5px;color:#81919a}

.leave-balance-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.leave-balance-grid>div{padding:10px;border:1px solid #e0e9ed;border-radius:10px;background:#f9fbfc}
.leave-balance-grid span,.leave-balance-grid strong{display:block}.leave-balance-grid span{font-size:6.5px;color:#7d909a}.leave-balance-grid strong{margin-top:3px;font-size:15px;color:#2b4a5a}

.employee-document-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.employee-document-grid article{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px;border:1px solid #dfe8ec;border-radius:11px;background:#fbfdfe}
.employee-document-grid article.expiring{border-color:#ead79d;background:#fffaf0}
.employee-document-grid article.expired{border-color:#efc6ce;background:#fff5f6}
.employee-doc-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#f4e7ed,#e5f5fc);font-size:7px;font-weight:900;color:#6e3550}
.employee-doc-copy strong,.employee-doc-copy span,.employee-doc-copy small{display:block}
.employee-doc-copy strong{font-size:8.5px;color:#294959}.employee-doc-copy span{margin-top:2px;font-size:7px;color:#71848f}.employee-doc-copy small{margin-top:3px;font-size:6.5px;color:#8a989f}
.employee-doc-actions{display:flex;gap:4px;align-items:center}

.activity-list{display:grid;gap:0}
.activity-list>div{display:grid;grid-template-columns:95px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px solid #edf2f4}
.activity-list>div:last-child{border-bottom:0}
.activity-list>div>span{font-size:6.5px;color:#85949c}.activity-list strong{display:block;font-size:8px;color:#345363}.activity-list small{display:block;margin-top:2px;font-size:6.5px;color:#87959c}

@media(max-width:1000px){
  .employee-profile-grid{grid-template-columns:1fr}
  .employee-checklist-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .schedule-preview-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:700px){
  .employee-201-head{align-items:flex-start;flex-direction:column;padding:14px}
  .employee-201-photo{width:64px;height:64px;flex-basis:64px;border-radius:16px}
  .employee-201-title h1{font-size:25px}
  .employee-201-head-actions{width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}
  .employee-201-head-actions>*{flex:0 0 auto}
  .employee-201-progress-copy{grid-template-columns:auto auto}.employee-201-progress-copy small{grid-column:1/-1}
  .employee-checklist-grid{grid-template-columns:1fr 1fr}
  .employee-201-tabs{position:sticky;top:58px;z-index:12;border-radius:10px;margin-bottom:10px}
  .profile-health-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile-health-grid>div:last-child{grid-column:1/-1}
  .schedule-preview-grid{display:flex;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.schedule-preview-grid::-webkit-scrollbar{display:none}.schedule-preview-grid>div{min-width:112px}
  .pay-profile-hero{grid-template-columns:1fr}
  .leave-balance-grid{grid-template-columns:1fr 1fr}
  .employee-document-grid{grid-template-columns:1fr}
  .employee-document-grid article{grid-template-columns:42px minmax(0,1fr)}.employee-doc-actions{grid-column:2;justify-content:flex-start}
  .activity-list>div{grid-template-columns:78px minmax(0,1fr)}
}


/* =========================================================
   Phase E mobile UI hotfix — Employee 201 File
   ========================================================= */
.employee-201-tabs{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.employee-201-tabs a{scroll-snap-align:start}
.employee-attendance-table td strong,
.employee-leave-table td strong{display:block}
.employee-attendance-table td small,
.employee-leave-table td small{display:block;margin-top:3px}
.employee-attendance-table .badge,
.employee-leave-table .badge{justify-content:center;min-width:max-content}

@media(max-width:760px){
  .employee-201-completeness{padding:10px 12px}
  .employee-201-tabs{
    position:sticky;top:58px;z-index:12;border-radius:12px;margin-bottom:10px;
    padding:6px;gap:6px;box-shadow:0 8px 18px rgba(37,64,80,.08)
  }
  .employee-201-tabs a{padding:9px 10px;font-size:7px}
  .employee-201-tabs a.active{box-shadow:0 6px 14px rgba(127,23,62,.17)}
  .employee-201-tabs::after{content:'';flex:0 0 2px}

  .employee-attendance-table tbody td,
  .employee-leave-table tbody td{
    grid-template-columns:minmax(74px,31%) minmax(0,1fr);
    gap:10px;
    padding:10px 0;
  }
  .employee-attendance-table tbody td::before,
  .employee-leave-table tbody td::before{font-size:6px;letter-spacing:.055em}
  .employee-attendance-table tbody td strong,
  .employee-leave-table tbody td strong{font-size:11px;line-height:1.25;color:#234556}
  .employee-attendance-table tbody td small,
  .employee-leave-table tbody td small{font-size:6.5px;line-height:1.35;color:#7d8f99}
  .employee-attendance-table tbody tr,
  .employee-leave-table tbody tr{padding:6px 12px;border-radius:14px}
  .employee-attendance-table tbody td[data-label="Status"] .badge,
  .employee-leave-table tbody td[data-label="Status"] .badge{justify-self:start}
  .employee-attendance-table tbody td[data-label="Date"] strong{font-size:13px}
}

@media(max-width:420px){
  .employee-201-tabs{top:56px;margin-left:-2px;margin-right:-2px}
  .employee-201-tabs a{padding:9px 9px;font-size:6.7px}
  .employee-attendance-table tbody td,
  .employee-leave-table tbody td{grid-template-columns:minmax(68px,29%) minmax(0,1fr);gap:8px}
  .employee-attendance-table tbody td strong,
  .employee-leave-table tbody td strong{font-size:10px}
}


/* =========================================================
   Phase E mobile width fix — responsive attendance table
   ========================================================= */
@media(max-width:760px){
  .carlrem-ui-v2 table.data-table.ds-responsive-table{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    table-layout:fixed;
  }
  .carlrem-ui-v2 .table-card>.table-scroll{
    overflow:visible!important;
    max-width:100%;
  }
  .carlrem-ui-v2 table.data-table.ds-responsive-table tbody tr{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  .carlrem-ui-v2 table.data-table.ds-responsive-table tbody td{
    min-width:0;
    overflow:hidden;
  }
  .carlrem-ui-v2 table.data-table.ds-responsive-table tbody td > strong,
  .carlrem-ui-v2 table.data-table.ds-responsive-table tbody td > small,
  .carlrem-ui-v2 table.data-table.ds-responsive-table tbody td > span,
  .carlrem-ui-v2 table.data-table.ds-responsive-table tbody td{
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .carlrem-ui-v2 .employee-attendance-table tbody td[data-label="Date"] strong,
  .carlrem-ui-v2 .employee-attendance-table tbody td[data-label="Actual"] strong,
  .carlrem-ui-v2 .employee-attendance-table tbody td[data-label="Credited"] strong,
  .carlrem-ui-v2 .employee-attendance-table tbody td[data-label="Late / UT"] strong,
  .carlrem-ui-v2 .employee-attendance-table tbody td[data-label="Approved OT"] strong{
    font-size:10.5px;
    line-height:1.28;
  }
  .carlrem-ui-v2 .employee-attendance-table tbody td[data-label="Status"] .badge,
  .carlrem-ui-v2 .employee-leave-table tbody td[data-label="Status"] .badge{
    max-width:100%;
    white-space:nowrap;
  }
}


/* =========================================================
   Phase F — Operations Workflow
   ========================================================= */
.ops-center-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.operations-module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.operations-module-grid>a{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px;border:1px solid var(--ds-line);border-radius:14px;background:#fff;box-shadow:var(--ds-shadow)}
.operations-module-grid>a:hover{border-color:#bcdce8;transform:translateY(-1px)}
.ops-module-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#f5e7ed,#e4f5fc);font-size:18px;color:#6d2947}.operations-module-grid strong,.operations-module-grid small{display:block}.operations-module-grid strong{font-size:10px;color:#29495a}.operations-module-grid small{margin-top:3px;font-size:7px;line-height:1.45;color:#7b8e99}.operations-module-grid b{font-size:7px;color:#7f173e}
.operations-feed{display:grid;gap:0}.operations-feed article{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:9px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #edf2f4}.operations-feed article:last-child{border-bottom:0}.ops-feed-dot{width:9px;height:9px;margin-top:4px;border-radius:50%;background:linear-gradient(135deg,#8a1744,#6fc2e9)}.operations-feed strong,.operations-feed small{display:block}.operations-feed strong{font-size:8.5px}.operations-feed small{margin-top:2px;font-size:6.5px;color:#84939b}.operations-feed p{margin:3px 0 0;font-size:7px;color:#6f838e}
.operations-create-layout{align-items:start}.operations-workflow-steps{display:grid;gap:8px}.operations-workflow-steps>div{display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;align-items:center;padding:9px;border:1px solid #e0e9ed;border-radius:10px;background:#f9fbfc}.operations-workflow-steps>b{}.operations-workflow-steps>div>b{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,#8a1744,#6fc2e9);color:#fff;font-size:9px}.operations-workflow-steps span strong,.operations-workflow-steps span small{display:block}.operations-workflow-steps span strong{font-size:8px}.operations-workflow-steps span small{margin-top:2px;font-size:6.5px;color:#7b8d97}
.request-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.request-card{padding:13px;border:1px solid var(--ds-line);border-radius:13px;background:#fff;box-shadow:0 5px 16px rgba(37,64,80,.055)}.request-card[data-priority="urgent"]{border-color:#e7bdc5}.request-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.request-card-head>div{display:flex;gap:5px}.request-card h3{margin:9px 0 4px;font-size:11px;color:#29495a}.request-card>p{min-height:38px;margin:0;color:#6f838e;font-size:7.5px;line-height:1.5}.request-route{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:7px;align-items:center;margin:10px 0;padding:8px;border-radius:9px;background:#f6fafc}.request-route span{font-size:7px;font-weight:850;color:#496775}.request-route span:last-child{text-align:right}.request-route b{color:#8b3150}.request-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px}.request-meta span{font-size:6.5px;color:#7f9099}.request-meta b{display:block;margin-bottom:1px;color:#486574}.request-status-note{margin-top:8px;padding:8px;border-left:3px solid #83c8e7;border-radius:7px;background:#f3f9fc;font-size:7px;color:#587380}.request-actions{margin-top:9px}
.task-workflow-board .kanban-head{display:flex;justify-content:space-between;align-items:center}.task-workflow-board .kanban-head span{min-width:22px;height:22px;display:grid;place-items:center;border-radius:999px;background:#eaf2f6;font-size:7px;font-weight:900}.task-owner{margin:8px 0;padding:7px 8px;border-radius:8px;background:#f7fafc}.task-owner span,.task-owner strong{display:block}.task-owner span{font-size:6px;color:#84949d;text-transform:uppercase;font-weight:900}.task-owner strong{margin-top:2px;font-size:7.5px;color:#345464}
.document-custody-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.document-custody-card{padding:13px;border:1px solid var(--ds-line);border-radius:13px;background:#fff;box-shadow:0 5px 16px rgba(37,64,80,.055)}.document-card-top{display:flex;justify-content:space-between;align-items:center}.document-custody-card h3{margin:9px 0 2px;font-size:11px}.document-custody-card>p{margin:0;color:#7d8f99;font-size:7px}.document-current-holder{margin:9px 0;padding:9px;border-radius:9px;background:#f5fafc}.document-current-holder span,.document-current-holder strong,.document-current-holder small{display:block}.document-current-holder span{font-size:6px;text-transform:uppercase;color:#7b8e99;font-weight:900}.document-current-holder strong{margin-top:3px;font-size:9px;color:#2d4e5f}.document-current-holder small{margin-top:3px;font-size:6.5px;color:#986a1e}.document-history{margin-top:7px;border-top:1px solid #edf2f4;padding-top:7px}.document-history summary{cursor:pointer;font-size:7px;font-weight:850;color:#597382}.document-history-list{display:grid;gap:0;margin-top:5px}.document-history-list>div{padding:6px 0;border-bottom:1px dashed #e5ebee}.document-history-list span,.document-history-list strong,.document-history-list small{display:block}.document-history-list span{font-size:6px;color:#89979e}.document-history-list strong{margin-top:1px;font-size:7.5px}.document-history-list small{margin-top:2px;font-size:6.3px;color:#7c8e97}.document-actions{margin-top:9px}
@media(max-width:1100px){.request-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.ops-center-kpis{grid-template-columns:1fr 1fr}.operations-module-grid{grid-template-columns:1fr}.operations-module-grid>a{grid-template-columns:42px minmax(0,1fr) auto;padding:11px}.ops-module-icon{width:40px;height:40px}.request-board,.document-custody-grid{grid-template-columns:1fr}.request-card>p{min-height:0}.request-meta{grid-template-columns:1fr 1fr}.operations-feed article{grid-template-columns:12px minmax(0,1fr)}.operations-feed article>.badge{grid-column:2;justify-self:start}.task-workflow-board{display:flex;overflow-x:auto;scroll-snap-type:x proximity}.task-workflow-board .kanban-column{min-width:min(86vw,330px);scroll-snap-align:start}.document-history-list small{line-height:1.45}}


/* =========================================================
   Phase F hotfix — Department-owned request handling
   ========================================================= */
.requester-identity{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px}
.requester-identity>div{padding:10px 11px;border:1px solid #dfe9ed;border-radius:10px;background:#f8fbfc}
.requester-identity span,.requester-identity strong{display:block}.requester-identity span{font-size:6.5px;font-weight:900;letter-spacing:.07em;color:#81939c}.requester-identity strong{margin-top:3px;font-size:9px;color:#2d4d5e}
.request-card.request-unclaimed{border-color:#e7d39a;background:linear-gradient(180deg,#fff,#fffcf4)}
.request-unclaimed-badge{background:#fff4d8!important;border-color:#e9d097!important;color:#88621c!important}
.request-actions .inline-form{display:inline-flex;margin:0}
.request-actions .btn.tiny{min-height:28px;padding:5px 9px}
@media(max-width:700px){.requester-identity{grid-template-columns:1fr}.request-actions{align-items:stretch}.request-actions .inline-form,.request-actions .inline-form button{width:100%}.request-actions>.mini-link,.request-actions>.button-link{justify-content:center}}


/* Phase F department inbox permission hotfix */
.request-inbox-intro{margin-bottom:12px}
.request-inbox-intro .operations-workflow-steps.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){
  .request-inbox-intro .operations-workflow-steps.compact{grid-template-columns:1fr}
}


/* =========================================================
   Phase F.1 — Department Requests Consolidation
   ========================================================= */
.request-inbox-tabs{width:min(100%,var(--ds-content-max));margin:0 auto 12px;display:flex;gap:6px;padding:5px;border:1px solid var(--ds-line);border-radius:13px;background:#fff;overflow-x:auto;scrollbar-width:none;box-shadow:0 5px 16px rgba(37,64,80,.05)}
.request-inbox-tabs::-webkit-scrollbar{display:none}.request-inbox-tabs a{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:9px;color:#647b87;font-size:7.5px;font-weight:850}.request-inbox-tabs a b{min-width:21px;height:21px;display:grid;place-items:center;border-radius:999px;background:#edf3f6;color:#607783;font-size:6.5px}.request-inbox-tabs a.active{background:linear-gradient(135deg,#7f173e,#932149 60%,#68bee6);color:#fff}.request-inbox-tabs a.active b{background:rgba(255,255,255,.22);color:#fff}
.request-inbox-note{display:flex;gap:9px;align-items:center;margin-bottom:10px;padding:10px 12px;border:1px solid #dce9ee;border-radius:11px;background:#f8fbfc}.request-inbox-note strong{font-size:8px;color:#305264}.request-inbox-note span{font-size:7px;color:#738792}
.request-board-v2{grid-template-columns:repeat(3,minmax(0,1fr))}.request-card-v2{position:relative}.request-card-v2.request-overdue{border-color:#e7c1c8}.request-card-title{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.request-card-title h3{margin-right:auto}.request-card-title>span{margin-top:8px;padding:3px 6px;border-radius:999px;background:#fff0f1;color:#a13c49;font-size:6px;font-weight:900}.request-meta-v2{margin-top:9px}.request-card-v2 .request-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.request-empty{grid-column:1/-1}
.request-detail-head{width:min(100%,var(--ds-content-max));margin:0 auto 12px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}.request-detail-head h1{margin:5px 0;font-size:clamp(24px,2.4vw,36px);letter-spacing:-.04em}.request-detail-badges{display:flex;gap:6px;flex-wrap:wrap}.badge.overdue{background:#fff0f1!important;color:#a53a48!important;border-color:#efcbd1!important}
.request-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:12px;align-items:start}.request-detail-main{display:grid;gap:12px}.request-detail-side{display:grid;gap:12px;position:sticky;top:72px}.request-route-large{margin-top:0}.request-route-large span{display:grid;gap:2px;font-size:9px}.request-route-large small{font-size:6px;color:#8a9aa2;letter-spacing:.06em}.request-description{font-size:10px;line-height:1.65;color:#405f6e}.request-detail-note{display:grid;gap:4px;margin-top:10px;padding:9px 10px;border-radius:9px;background:#f6fafc}.request-detail-note strong{font-size:7px;color:#557280}.request-detail-note span{font-size:8px}.request-detail-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:12px}.request-detail-facts>div{padding:9px;border:1px solid #e0e9ed;border-radius:9px;background:#fbfdfe}.request-detail-facts span,.request-detail-facts strong{display:block}.request-detail-facts span{font-size:6px;text-transform:uppercase;color:#86969f;font-weight:900}.request-detail-facts strong{margin-top:3px;font-size:8px;color:#315163}.request-primary-actions{display:flex;gap:7px;flex-wrap:wrap}.request-status-note.wide{display:grid;gap:3px;margin-top:10px}.request-status-note.wide strong{font-size:6.5px;text-transform:uppercase}
.request-conversation{display:grid;gap:9px}.request-conversation article{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;max-width:88%}.request-conversation article.mine{margin-left:auto;grid-template-columns:minmax(0,1fr) 34px}.request-conversation article.mine>.request-comment-avatar{grid-column:2;grid-row:1}.request-conversation article.mine>div:last-child{grid-column:1;grid-row:1;background:#f4e9ee}.request-comment-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#8a1744,#69bee6);color:#fff;font-size:8px;font-weight:900}.request-conversation article>div:last-child{padding:9px 10px;border-radius:12px;background:#f3f8fa}.request-comment-head{display:flex;justify-content:space-between;gap:8px}.request-comment-head strong{font-size:7.5px}.request-comment-head span{font-size:6px;color:#89989f}.request-comment-type{display:block;margin-top:2px;color:#8b3150;font-size:6px;font-weight:850}.request-conversation p{margin:5px 0 0;font-size:8px;line-height:1.5;color:#456371}.request-comment-form{display:grid;gap:7px;margin-top:12px;padding-top:12px;border-top:1px solid #e6edef}.request-comment-form textarea{width:100%}.request-comment-form>div{display:flex;justify-content:flex-end;gap:7px;align-items:center}.mini-upload{display:inline-flex!important;align-items:center!important;min-height:34px;padding:7px 10px;border:1px solid #d9e4e8;border-radius:9px;background:#fff;cursor:pointer;font-size:7px!important}.mini-upload input{display:none}
.request-timeline{position:relative;display:grid;gap:0;padding-left:18px}.request-timeline::before{content:'';position:absolute;left:5px;top:5px;bottom:5px;width:2px;background:#e1eaee}.request-timeline article{position:relative;padding:0 0 13px 12px}.request-timeline article>span{position:absolute;left:-18px;top:4px;width:10px;height:10px;border-radius:50%;background:#7f173e;border:2px solid #fff;box-shadow:0 0 0 2px #e3cdd6}.request-timeline strong,.request-timeline small{display:block}.request-timeline strong{font-size:7.5px}.request-timeline small{margin-top:2px;font-size:6px;color:#89979e}.request-timeline p{margin:4px 0 0;font-size:7px;color:#597481}.request-side-list{display:grid}.request-side-list>div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #edf2f4}.request-side-list>div:last-child{border-bottom:0}.request-side-list span{font-size:6.5px;color:#84949d}.request-side-list strong{text-align:right;font-size:7.5px;color:#315263}.request-files{display:grid;gap:7px}.request-files a{display:grid;gap:2px;padding:8px;border:1px solid #e1e9ed;border-radius:9px;background:#fafcfd}.request-files span{font-size:6px;color:#8b3150;font-weight:900}.request-files strong{font-size:7px;overflow-wrap:anywhere}.request-files small{font-size:6px;color:#89979e}
.operations-module-grid-f1{grid-template-columns:repeat(3,minmax(0,1fr))}.ops-center-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1100px){.request-board-v2{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-center-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.operations-module-grid-f1{grid-template-columns:1fr 1fr}.request-detail-grid{grid-template-columns:1fr}.request-detail-side{position:static;grid-template-columns:1fr 1fr}}
@media(max-width:760px){.request-inbox-tabs{position:sticky;top:58px;z-index:12;margin-bottom:9px}.request-inbox-tabs a{padding:9px 10px}.request-board-v2{grid-template-columns:1fr}.request-detail-head{align-items:flex-start;flex-direction:column}.request-detail-head .page-actions{width:100%}.request-detail-facts{grid-template-columns:1fr 1fr}.request-detail-side{grid-template-columns:1fr}.request-conversation article{max-width:96%}.operations-module-grid-f1{grid-template-columns:1fr}.ops-center-kpis{grid-template-columns:1fr 1fr}.request-primary-actions>*{flex:1 1 auto}.request-primary-actions form button,.request-primary-actions>button{width:100%}.request-inbox-note{align-items:flex-start;flex-direction:column}}