/* V47 UI polish: visual refinement layer only. Sits on top of v46-ui.css. */

:root{
  --pc-font: 'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.2,.8,.2,1);
  --shadow-lift: 0 20px 40px rgba(15,23,42,.12);
}

html, body { font-family: var(--pc-font); }
.page-title, .v46-brand b, .kpi b, .period-title, h1, h2, h3 { font-family: var(--pc-font); letter-spacing: -.02em; }

/* Subtle premium scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#C6CBD5; border-radius:999px; border:2px solid #F4F5F7; }
::-webkit-scrollbar-thumb:hover{ background:#98A0AE; }

/* Accessible focus ring, consistent everywhere */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #8E9DF2; outline-offset: 2px; border-radius: 8px;
}

/* Sidebar: richer depth + subtle top glow */
/* Guard to desktop only: on mobile v46-ui.css sets position:fixed to slide the
   sidebar off-canvas; an unconditional position:relative here loaded after
   v46-ui.css defeated that, leaving the sidebar in-flow and pushing all content
   down by a full column (big blank gap at the top of every page). */
/* `sticky` chứ không phải `relative`: file này nạp SAU v46-ui.css nên nó quyết
   định `position` cuối cùng trên desktop, mà sidebar cần dính đỉnh để cuộn
   được độc lập với trang. `sticky` vẫn là phần tử đã định vị nên vẫn neo được
   `:before` bên dưới, đúng mục đích ban đầu của dòng này. Vẫn phải giữ trong
   @media(min-width:901px) — xem ghi chú ngay trên. */
@media(min-width:901px){ .v46-sidebar{ position: sticky; top: 0; } }
/* Bỏ vệt sáng radial ở đỉnh sidebar: nó pha xanh lam vào nền mực, làm mục menu
   trên cùng nằm trên nền khác mục dưới — đúng lý do đã bỏ gradient dọc. */
.v46-logo{ position:relative; transition: transform .25s var(--ease); }
.v46-brand:hover .v46-logo{ transform: rotate(-4deg) scale(1.04); }
.v46-nav a, .v46-config summary{ transition: background .18s var(--ease), color .18s var(--ease), transform .12s var(--ease), border-color .18s var(--ease); }
/* Bỏ `transform: translateX(2px)` khi hover: mục menu nhích ngang làm cả
   cột điều hướng rung khi rê chuột dọc danh sách. Đổi nền là đủ phản hồi. */
.v46-nav a.active{ position:relative; }
.v46-nav a.active:before{
  content:""; position:absolute; left:-8px; top:50%; transform:translateY(-50%);
  width:4px; height:60%; border-radius:999px; background:#8E9DF2;
  box-shadow:0 0 12px rgba(147,197,253,.7);
}

/* Topbar: crisper title, gentle accent underline */
.page-title{ color: var(--ink); }
.page-kicker{ position:relative; }

/* Cards: smoother lift + depth on hover where it makes sense */
.card{ transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease); }
.card:hover{ box-shadow: 0 16px 36px rgba(15,23,42,.10); }
.kpi{ transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.kpi:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.kpi b{ font-variant-numeric: tabular-nums; }

/* KPI icon slot: if a kpi contains .kpi-ico, style it as a soft badge */
.kpi{ position:relative; overflow:hidden; }
.kpi-ico{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:11px; background:rgba(37,99,235,.10); font-size:16px; margin-bottom:8px;
}
.kpi.ok .kpi-ico{ background:rgba(22,163,74,.12); }
.kpi.warn .kpi-ico{ background:rgba(217,119,6,.14); }
.kpi.danger .kpi-ico{ background:rgba(220,38,38,.12); }
.kpi.info .kpi-ico{ background:rgba(37,99,235,.12); }

/* Buttons: satisfying press + subtle shadow on primary actions */
button, .btn{ transition: background .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease), transform .08s var(--ease); }
.btn:not(.ghost):not(.secondary):not(.warning):not(.danger), button:not(.ghost):not(.secondary):not(.warning):not(.danger){
  box-shadow: 0 8px 18px rgba(37,99,235,.22);
}
.btn:active, button:active{ transform: translateY(1px); }

/* Tables: calmer header, clearer row hover */
.table-scroll-x, .tablewrap, .requests-table-wrap{ scrollbar-width: thin; }
tr td{ transition: background .12s var(--ease); }

/* ============================================================
   V47.1 — Compact tables + fix horizontal-scroll / clipping bugs
   Root cause: v46-ui.css forces `table{min-width:820px}` and
   style.css forces `.requests-table{min-width:1180px}` with
   `white-space:nowrap`, even inside cards narrower than that.
   Since .card has overflow:visible and the page has
   overflow-x:hidden, the extra width was silently clipped
   (invisible, unreachable columns) instead of scrolling — and
   on the Requests page it forced horizontal scrolling on any
   window/screen narrower than ~1180px+sidebar. Tighten padding,
   drop the forced min-widths, and let cell text wrap so tables
   fit their card at any width without hidden content or scroll.
   ============================================================ */
th, td{ padding:9px 11px; font-size:13px; }
table{ min-width:0; width:100%; table-layout:auto; }
.cell-subtle, .content-main{ white-space:normal; }
.truncate{ white-space:normal; overflow-wrap:anywhere; }

.requests-table{ min-width:0; }
.requests-table.compact-requests-table{ table-layout:fixed; }
.requests-table th, .requests-table td{ white-space:normal; overflow-wrap:anywhere; }
.requests-table .money, .requests-table .status-badge, .requests-table .nowrap,
.requests-table .request-actions-cell{ white-space:nowrap; }

/* Close a gap where an older rule (max-width:900px) forced the requests table
   into literal table columns instead of stacked cards, causing scroll on
   tablet-width screens (~768–900px). Make it consistently stack like <767px. */
@media (max-width:900px){
  table.requests-table.responsive,
  .requests-table.responsive tbody,
  .requests-table.responsive tr,
  .requests-table.responsive td,
  .requests-table.responsive th{ display:block !important; }
  .requests-table.responsive tr:first-child{ display:none !important; }
  .requests-table.responsive tr{
    background:#fff !important; border:1px solid var(--line) !important; border-radius:16px !important;
    margin:12px 0 !important; padding:12px !important; box-shadow:0 10px 24px rgba(15,23,42,.06) !important;
  }
  .requests-table.responsive td{
    display:flex !important; width:auto !important; min-width:0 !important; max-width:none !important;
    border:0 !important; padding:8px 0 !important; white-space:normal !important; text-align:right !important;
    justify-content:space-between !important; align-items:flex-start !important; gap:12px !important;
  }
  .requests-table.responsive td::before{
    content:attr(data-label) !important; display:block !important; min-width:96px !important;
    flex:0 0 96px !important; text-align:left !important; color:#737B8A !important; font-weight:700 !important; font-size:12px !important;
  }
  .requests-table.responsive td:first-child{ border-bottom:1px solid var(--line) !important; padding-bottom:10px !important; margin-bottom:4px !important; }
  .requests-table-wrap{ overflow:visible !important; border:0 !important; background:transparent !important; }
}
th{ background:#F9FAFB; }

/* Status badges: small dot for quicker scanning */
.status-badge{ display:inline-flex; align-items:center; gap:6px; }
.status-badge:before{ content:""; width:6px; height:6px; border-radius:999px; background:currentColor; opacity:.7; }

/* Empty states: friendlier, centered, with icon */
.empty{ text-align:center; padding:34px 18px; }
.empty:before{ content:"🗂️"; display:block; font-size:26px; margin-bottom:8px; opacity:.7; }

/* Login card: extra polish */
body.pc-guest .login{ backdrop-filter: blur(6px); }

/* Notice / priority cards: slightly richer */
.notice-card{ background:linear-gradient(135deg,#fff,#f5f9ff); }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  *{ transition-duration: .001ms !important; animation-duration: .001ms !important; }
}