/* ==========================================================================
   TALIB base layout & primitives.
   Class names are unchanged from v1 on purpose — every existing page keeps
   working; only the values behind them were restyled to the IT Service Desk
   mockup (light canvas, navy rail, blue accent, denser rows).
   ========================================================================== */

*, *::before, *::after{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin:0; font-family: var(--font-sans); font-size: var(--fs-body);
  line-height: var(--lh-body); color: var(--text-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
button, input, select, textarea{ font-family: inherit; font-size: inherit; color: inherit; }
button{ cursor:pointer; }

::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-thumb{ background: var(--scrollbar); border-radius: 8px; }
::-webkit-scrollbar-track{ background: transparent; }

:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.h-page-title{ font-size: var(--fs-page-title); font-weight: 650; letter-spacing: -0.01em; margin:0; }
.h-section-title{ font-size: var(--fs-section-title); font-weight: 650; margin:0; }
.h-card-title{ font-size: var(--fs-card-title); font-weight: 650; margin:0; }
.text-meta{ font-size: var(--fs-meta); color: var(--text-secondary); }
.text-label{ font-size: var(--fs-label); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
.text-small{ font-size: var(--fs-small); color: var(--text-tertiary); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ======================= Layout shell ======================= */
#app-root{ display:flex; min-height:100vh; }

/* ---- Sidebar: dark navy rail, same in both themes (see tokens.css) ---- */
#sidebar{
  width: var(--sidebar-width); flex-shrink:0;
  background: var(--sidebar-bg); color: var(--sidebar-text);
  border-right: 1px solid var(--sidebar-border);
  display:flex; flex-direction:column; padding: 0;
  transition: width var(--t-med) var(--ease);
  position: sticky; top:0; height:100vh; z-index: var(--z-sidebar);
}
#sidebar.collapsed{ width: 64px; }
#sidebar.collapsed .nav-label,
#sidebar.collapsed .brand-text,
#sidebar.collapsed .nav-section-label,
#sidebar.collapsed .sb-user-meta{ display:none; }
#sidebar.collapsed .nav-item{ justify-content:center; }
#sidebar.collapsed .sb-user{ justify-content:center; }

.brand{
  display:flex; align-items:center; gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--sidebar-border);
  min-height: 60px;
}
.brand-mark{
  width:30px; height:30px; border-radius: var(--radius-md); background: var(--accent);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; flex-shrink:0;
}
.brand-text{ font-weight:700; letter-spacing:-0.01em; color: var(--sidebar-text-strong); font-size:15px; line-height:1.15; }
.brand-text small{ display:block; font-size:9.5px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color: var(--sidebar-text); opacity:.75; margin-top:1px; }

.nav-section-label{ padding: var(--space-4) var(--space-4) var(--space-1); color: rgba(255,255,255,.38); }
.nav-list{ display:flex; flex-direction:column; gap:1px; padding: var(--space-2) var(--space-2); }
.nav-item{
  display:flex; align-items:center; gap: var(--space-3); padding: 9px var(--space-3);
  border-radius: var(--radius-md); color: var(--sidebar-text); font-weight:500; font-size:13px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease-out);
  position: relative; white-space:nowrap; overflow:hidden;
}
.nav-item .icon{ width:16px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; opacity:.85; transition: transform var(--t-fast) var(--ease-out); }
.nav-item:hover{ background: var(--sidebar-hover); color: var(--sidebar-text-strong); padding-left: calc(var(--space-3) + 3px); }
.nav-item:hover .icon{ transform: scale(1.08); }
.nav-item.active{ background: var(--sidebar-active-bg); color:#fff; font-weight:600; box-shadow: 0 2px 8px rgba(82,82,91,.35); }
.nav-item.active .icon{ opacity:1; }
.nav-item.active::before{
  content:""; position:absolute; left:0; top:50%; transform: translateY(-50%);
  width:3px; height:60%; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; background:#fff;
}
.nav-item .nav-count{
  margin-left:auto; font-size:10.5px; font-weight:700; padding:1px 6px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.14); color:#fff;
}
.nav-item.active .nav-count{ background: rgba(255,255,255,.25); }

#sidebar-spacer{ flex:1; }

/* User block pinned to the bottom of the rail (mockup: avatar + name + role) */
.sb-user{
  display:flex; align-items:center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--sidebar-border);
}
.sb-user .avatar{ width:30px; height:30px; font-size:12px; }
.sb-user-meta{ min-width:0; }
.sb-user-name{ font-size:12.5px; font-weight:600; color: var(--sidebar-text-strong);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-user-role{ font-size:10.5px; color: var(--sidebar-text); opacity:.8; }
.sb-logout{
  display:flex; align-items:center; gap: var(--space-3); padding: 10px var(--space-4);
  color: var(--sidebar-text); font-size:12.5px; border-top: 1px solid var(--sidebar-border);
  background:transparent; border-left:none; border-right:none; border-bottom:none; width:100%; text-align:left;
}
.sb-logout:hover{ background: var(--sidebar-hover); color: var(--sidebar-text-strong); }

.sidebar-collapse-btn{
  display:flex; align-items:center; justify-content:center; padding: 7px;
  margin: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  color: var(--sidebar-text); border:1px solid var(--sidebar-border); background:transparent; font-size:11px;
}
.sidebar-collapse-btn:hover{ background: var(--sidebar-hover); color: var(--sidebar-text-strong); }

/* ---- Mobile (<880px): sidebar becomes an off-canvas drawer ---- */
.mobile-menu-btn{ display:none; }
@media (max-width: 880px){
  #sidebar{
    position:fixed; left:0; top:0; z-index: var(--z-drawer);
    transform: translateX(-100%); transition: transform var(--t-med) var(--ease-out);
    box-shadow: var(--shadow-3);
  }
  #sidebar.mobile-open{ transform: translateX(0); }
  .sidebar-collapse-btn{ display:none; } /* collapse-to-icons doesn't apply once it's an overlay */
  .mobile-menu-btn{ display:flex; }
  #page-content{ padding: var(--space-4) var(--space-4) var(--space-7); }
  #topbar{ padding: 0 var(--space-3); gap: var(--space-2); }
  .topbar-search{ max-width:none; }
  .topbar-search .kbd{ display:none; }
}
@media (max-width: 560px){
  .topbar-search input::placeholder{ color: transparent; }
  .topbar-search::after{ content:"Search"; color: var(--text-tertiary); font-size:12.5px; }
  .topbar-search input{ width:0; flex:0; }
}

/* ---- Main column & topbar ---- */
#main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }

#topbar{
  height: 56px; flex-shrink:0; display:flex; align-items:center; gap: var(--space-3);
  padding: 0 var(--space-5); border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  position: sticky; top:0; z-index: var(--z-topbar);
}
.topbar-section-label{ font-weight:650; font-size: 13.5px; flex-shrink:0; }
.topbar-search{
  flex:1; max-width: 420px; display:flex; align-items:center; gap: var(--space-2);
  background: var(--bg-elevated-2); border:1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: 7px 11px; color: var(--text-tertiary); cursor:pointer;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.topbar-search:hover{ border-color: var(--border-glass); background: var(--bg-elevated); }
.topbar-search:focus-within{ border-color: var(--accent); box-shadow: var(--shadow-focus); background: var(--bg-elevated); }
.topbar-search input{ border:none; background:transparent; outline:none; flex:1; color: var(--text-primary); cursor:pointer; font-size:12.5px; }
.kbd{
  font-size: 10.5px; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border-glass);
  color: var(--text-tertiary); background: var(--bg-elevated);
}
.topbar-spacer{ flex:1; }
.icon-btn{
  width:32px; height:32px; border-radius: var(--radius-md); display:flex; align-items:center; justify-content:center;
  color: var(--text-secondary); background:transparent; border:none; position:relative; font-size:14px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-spring);
}
.icon-btn:hover{ background: var(--row-hover); color: var(--text-primary); transform: translateY(-1px); }
.icon-btn:active{ transform: scale(.92); }
.icon-btn .dot{
  position:absolute; top:5px; right:5px; width:7px; height:7px; border-radius:50%; background: var(--status-critical);
  border: 2px solid var(--bg-elevated);
}
.avatar{
  width:32px; height:32px; border-radius:50%; background: var(--accent);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:12px;
  flex-shrink:0; border:none;
}

#page-content{
  flex:1; padding: var(--space-5) var(--space-6) var(--space-8); max-width: var(--content-max-width);
  width:100%; margin: 0 auto;
  animation: page-in 260ms var(--ease-out);
}
@keyframes page-in{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ #page-content{ animation:none; } }

/* ======================= Cards / surfaces ======================= */
/* Depth model: box-shadow is a comma-separated list, so the inset top
   highlight and the two outer shadows stack in one declaration — inset
   values don't clip/replace the outer ones. Border goes faint since the
   shadow pair now does the actual "lifted off the canvas" work; a
   full-strength border on top of a real shadow reads as a flat outline
   again and cancels the 3D effect. */
.surface{
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-inset-top), var(--shadow-1);
  transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
/* v1 used frosted glass everywhere. In the light helpdesk theme "glass" is
   just a plain elevated card, so old markup using .glass still looks right. */
.glass{
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-inset-top), var(--shadow-2);
  transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
[data-theme="dark"] .glass{
  background: var(--bg-glass); border-color: var(--border-glass);
  backdrop-filter: blur(var(--blur-md)); box-shadow: var(--shadow-inset-top), var(--shadow-glass);
}
/* Any card that's actually a clickable target lifts on hover, like Shopify's
   resource cards. Applied only where markup opts in via .clickable, so
   static info cards stay still — motion should mean "you can act on this". */
.clickable{ cursor:pointer; }
.clickable:hover{ box-shadow: var(--shadow-inset-top), var(--shadow-3); transform: translateY(-3px); border-color: var(--border-glass); }
.clickable:active{ transform: translateY(-1px) scale(.997); }
/* Any card that already navigates on click (onclick="location.href=...") gets
   the same lift automatically, site-wide, with no markup changes needed on
   any individual page — this is how every dashboard/app/report card across
   all 14 screens gets the interaction without touching each file. */
.surface[onclick]:hover, .glass[onclick]:hover{
  box-shadow: var(--shadow-inset-top), var(--shadow-3); transform: translateY(-3px); border-color: var(--border-glass); cursor:pointer;
}
.surface[onclick]:active, .glass[onclick]:active{ transform: translateY(-1px) scale(.99); }
.card{ padding: var(--space-5); }
.card-row{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-3); }

.grid{ display:grid; gap: var(--space-4); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-5{ grid-template-columns: repeat(5, 1fr); }
.grid-6{ grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1400px){ .grid-5, .grid-6{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 1100px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } .grid-5, .grid-6{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 720px){ .grid-2, .grid-3, .grid-4, .grid-5, .grid-6{ grid-template-columns: 1fr; } }

/* ======================= Buttons ======================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--space-2);
  padding: 8px 14px; border-radius: var(--radius-md); font-weight:600; font-size: 12.5px;
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease);
}
.btn:active{ transform: scale(0.97); }
.btn-primary{ background: var(--accent); color:#fff; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.btn-primary:hover{ background: var(--accent-strong); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn-primary:active{ transform: translateY(0) scale(.97); box-shadow: var(--shadow-1); }
.btn-secondary{ background: var(--bg-elevated); border-color: var(--border-subtle); color: var(--text-primary); }
.btn-secondary:hover{ background: var(--row-hover); border-color: var(--border-glass); transform: translateY(-1px); }
.btn-ghost{ background: transparent; color: var(--text-secondary); }
.btn-ghost:hover{ color: var(--text-primary); background: var(--row-hover); }
.btn-success{ background: var(--status-success); color:#fff; }
.btn-success:hover{ opacity:.9; transform: translateY(-1px); }
.btn-danger{ background: var(--status-critical); color:#fff; border-color: transparent; }
.btn-danger:hover{ opacity:.9; transform: translateY(-1px); }
.btn-sm{ padding: 5px 10px; font-size: 11.5px; }
.btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* ======================= Form fields ======================= */
input.field, textarea.field, select.field{
  width:100%; background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 8px 11px; color: var(--text-primary); outline:none;
  font-size: 12.5px; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
input.field::placeholder, textarea.field::placeholder{ color: var(--text-tertiary); }
input.field:focus, textarea.field:focus, select.field:focus{
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.app-checkbox-list{
  display:flex; flex-direction:column; gap:2px; background: var(--bg-elevated-2);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding:6px;
}
.app-checkbox-item{
  display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:6px;
  cursor:pointer; font-size:12.5px; color: var(--text-primary);
  transition: background var(--t-fast) var(--ease);
}
.app-checkbox-item:hover{ background: var(--row-hover); }
.app-checkbox-item input[type="checkbox"]{ width:15px; height:15px; accent-color: var(--accent); cursor:pointer; }
.field-label{ display:block; margin-bottom: 5px; font-size: 12px; font-weight:600; color: var(--text-secondary); }
.field-group{ margin-bottom: var(--space-4); }
.field-hint{ font-size: 11px; color: var(--text-tertiary); margin-top:4px; }

/* ======================= Badges ======================= */
.badge{
  display:inline-flex; align-items:center; gap:5px; font-size: 11px; font-weight:600;
  padding: 2px 8px; border-radius: var(--radius-sm); white-space:nowrap;
}
.badge .dot{ width:5px; height:5px; border-radius:50%; }
.badge-success{ background: var(--tint-success); color: var(--status-success); }
.badge-success .dot{ background: var(--status-success); }
.badge-warning{ background: var(--tint-warning); color: var(--status-warning); }
.badge-warning .dot{ background: var(--status-warning); }
.badge-critical{ background: var(--tint-critical); color: var(--status-critical); }
.badge-critical .dot{ background: var(--status-critical); }
.badge-info{ background: var(--tint-info); color: var(--status-info); }
.badge-info .dot{ background: var(--status-info); }
.badge-neutral{ background: var(--tint-neutral); color: var(--status-neutral); }
.badge-neutral .dot{ background: var(--status-neutral); }

/* ======================= Table ======================= */
table.data-table{ width:100%; border-collapse: collapse; }
table.data-table thead th{
  text-align:left; font-size: 10.5px; text-transform: uppercase; letter-spacing:.05em; color: var(--text-tertiary);
  font-weight:650; padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-elevated-2);
  white-space:nowrap;
}
table.data-table thead th:first-child{ border-top-left-radius: var(--radius-lg); }
table.data-table thead th:last-child{ border-top-right-radius: var(--radius-lg); }
table.data-table tbody td{ padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); font-size: 12px; transition: padding var(--t-fast) var(--ease-out); }
table.data-table tbody tr{ transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
table.data-table tbody tr:hover{ background: var(--row-hover); box-shadow: inset 3px 0 0 var(--accent); }
table.data-table tbody tr:hover td:first-child{ padding-left: 15px; }
table.data-table tbody tr:last-child td{ border-bottom:none; }
.table-wrap{ overflow-x:auto; }

/* Rows fade+rise in on load, staggered slightly — one deliberate moment,
   not a per-hover effect. Capped at 12 rows so a long table doesn't leave
   the last rows waiting on a visible queue. */
@keyframes row-in{ from{ opacity:0; transform: translateY(4px); } to{ opacity:1; transform:none; } }
table.data-table tbody tr, .req-table tbody tr{ animation: row-in 220ms var(--ease-out) backwards; }
table.data-table tbody tr:nth-child(1),  .req-table tbody tr:nth-child(1) { animation-delay: 0ms; }
table.data-table tbody tr:nth-child(2),  .req-table tbody tr:nth-child(2) { animation-delay: 15ms; }
table.data-table tbody tr:nth-child(3),  .req-table tbody tr:nth-child(3) { animation-delay: 30ms; }
table.data-table tbody tr:nth-child(4),  .req-table tbody tr:nth-child(4) { animation-delay: 45ms; }
table.data-table tbody tr:nth-child(5),  .req-table tbody tr:nth-child(5) { animation-delay: 60ms; }
table.data-table tbody tr:nth-child(6),  .req-table tbody tr:nth-child(6) { animation-delay: 75ms; }
table.data-table tbody tr:nth-child(7),  .req-table tbody tr:nth-child(7) { animation-delay: 90ms; }
table.data-table tbody tr:nth-child(8),  .req-table tbody tr:nth-child(8) { animation-delay: 105ms; }
table.data-table tbody tr:nth-child(9),  .req-table tbody tr:nth-child(9) { animation-delay: 120ms; }
table.data-table tbody tr:nth-child(10), .req-table tbody tr:nth-child(10){ animation-delay: 135ms; }
table.data-table tbody tr:nth-child(n+11), .req-table tbody tr:nth-child(n+11){ animation-delay: 150ms; }
@media (prefers-reduced-motion: reduce){
  table.data-table tbody tr, .req-table tbody tr{ animation:none; }
}

/* ======================= Skeletons ======================= */
.skel{ background: linear-gradient(90deg, var(--bg-elevated-2) 25%, var(--row-hover) 37%, var(--bg-elevated-2) 63%); background-size: 400% 100%; animation: skel-shine 1.4s ease infinite; border-radius: var(--radius-md); }
@keyframes skel-shine{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }
.skel-row{ height: 40px; margin-bottom: 8px; }
.skel-line{ height: 11px; margin-bottom: 8px; }

/* ======================= Empty / error states ======================= */
.state-block{ text-align:center; padding: var(--space-9) var(--space-4); color: var(--text-secondary); }
.state-block .state-icon{ font-size: 26px; margin-bottom: var(--space-3); color: var(--text-tertiary); }
.state-block h3{ margin: 0 0 6px; color: var(--text-primary); font-size: 14px; }
.state-block p{ margin: 0 0 var(--space-4); font-size: 12.5px; }

/* ======================= Chips / filters / tabs ======================= */
.chip-row{ display:flex; gap: var(--space-2); flex-wrap:wrap; }
.chip{
  padding: 6px 12px; border-radius: var(--radius-md); font-size: 12px; font-weight:600;
  background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-subtle);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-out);
}
.chip:hover{ border-color: var(--border-glass); transform: translateY(-1px); }
.chip.active{ background: var(--accent); color:#fff; border-color: var(--accent); }

/* Pill tab strip (Automation, Reports, Admin Console, Profile) — the
   active tab gets a solid rounded-pill background instead of an
   underline, matching .detail-tab in components.css (used by the ticket
   detail page's Conversations/Details/Tasks/... row). */
.tab-strip{ display:flex; gap: var(--space-2); flex-wrap:wrap; margin-bottom: var(--space-5); }
.tab-strip .tab{
  padding: 8px 16px; font-size: 12.5px; font-weight:600; color: var(--text-secondary);
  background:none; border: 1px solid transparent; border-radius: var(--radius-pill);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tab-strip .tab:hover{ color: var(--text-primary); background: var(--bg-elevated-2); }
.tab-strip .tab.active{ color:#fff; background: var(--accent); border-color: var(--accent); box-shadow: var(--shadow-1); }

/* Utility */
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.gap-1{ gap: var(--space-1); } .gap-2{ gap: var(--space-2); } .gap-3{ gap: var(--space-3); } .gap-4{ gap: var(--space-4); }
.mt-2{ margin-top: var(--space-2); } .mt-3{ margin-top: var(--space-3); } .mt-4{ margin-top: var(--space-4); } .mt-6{ margin-top: var(--space-6); }
.mb-2{ margin-bottom: var(--space-2); } .mb-3{ margin-bottom: var(--space-3); } .mb-4{ margin-bottom: var(--space-4); }
.w-full{ width:100%; }

.talib-footer{
  padding: 14px var(--space-6); text-align: center;
  border-top: 1px solid var(--border-subtle); margin-top: var(--space-5);
}