/**
 * @nhom        : Giao diện
 * @chucnang    : Lớp nhận diện hành chính công (navy IOC + đỏ cờ/vàng sao) và responsive dùng chung cho mọi phân hệ
 * @lienquan    : styles/tokens.css, styles/arar-demo.css, styles/theme-modern.css, auth-redirect.js
 * @alias       : gov-theme, hanh-chinh-cong, ioc, responsive
 *
 * Nạp SAU arar-demo.css. Chỉ thay đổi trình bày: không đổi ID, class nghiệp vụ,
 * sự kiện hay dữ liệu. Màu lấy từ token --gov-* trong styles/tokens.css.
 */

/* ============================================================
   1. NỀN TẢNG — font, nền, nhịp chữ
   ============================================================ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-sans) !important;
  font-feature-settings: "tnum" 0;
  text-rendering: optimizeLegibility;
}
body :is(input, select, textarea, button, table, h1, h2, h3, h4, h5, h6) { font-family: inherit; }
body :is(h1, h2, h3, h4) { letter-spacing: -.01em; }
body :is(.kpi, .kpi-card, .kpi-value, .kpi-val-num, .sum-card, .val, .tm-kpi-value, .stat, .metric, .qlvb-stat, td) { font-variant-numeric: tabular-nums; }

/* Dải cờ mảnh ở mép trên mọi trang — chi tiết nhận diện hành chính công. */
body::before {
  background: var(--gov-stripe);
  content: "";
  height: 3px;
  inset: 0 0 auto 0;
  pointer-events: none;
  position: fixed;
  z-index: 1000;
}

/* ============================================================
   2. SIDEBAR — navy kiểu Trung tâm điều hành
   ============================================================ */
body .sidebar {
  background: linear-gradient(180deg, var(--gov-navy-900) 0%, var(--gov-navy-950) 100%);
  border-right: 0;
  box-shadow: 1px 0 0 rgba(255, 255, 255, .04), 6px 0 24px rgba(6, 26, 51, .12);
  color: #d6e2f1;
  padding-top: 3px;
}
body .sidebar-brand { border-bottom: 1px solid rgba(255, 255, 255, .08); padding: 24px 18px 18px; }
body .sidebar-brand h2 { color: #9fb4cf; font-size: 11px; }
body .sidebar-demo-badge { background: rgba(245, 197, 66, .14); color: var(--gov-gold-300); border: 1px solid rgba(245, 197, 66, .28); }
body .sidebar-nav { scrollbar-color: rgba(255, 255, 255, .18) transparent; scrollbar-width: thin; }
body .sidebar-section {
  color: var(--gov-gold-300) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  opacity: .85;
  text-transform: uppercase;
}
body .sidebar-link,
body .sidebar-submenu .sidebar-link,
body button.sidebar-link {
  color: #c8d6e8;
  font-weight: 500;
  min-height: 40px;
}
body .sidebar-link .icon,
body .sidebar-link .ui-icon { color: #8fa9c9; }
body .sidebar-link:hover,
body .sidebar-submenu .sidebar-link:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}
body .sidebar-link:hover .icon,
body .sidebar-link:hover .ui-icon { color: #fff; }
body .sidebar-link.active,
body .sidebar-submenu .sidebar-link.active,
body .sidebar-qlvb-toggle.active {
  background: linear-gradient(90deg, rgba(200, 16, 46, .30), rgba(200, 16, 46, .06));
  box-shadow: inset 3px 0 0 var(--gov-red-500);
  color: #fff;
  font-weight: 700;
}
body .sidebar-link.active .icon,
body .sidebar-link.active .ui-icon { color: var(--gov-gold-500); }
body .sidebar-chevron { color: #8fa9c9; }
body .sidebar-user { border-top: 1px solid rgba(255, 255, 255, .08); color: #fff; }
body .sidebar-avatar { background: var(--gov-red-600) !important; color: #fff !important; box-shadow: 0 0 0 2px rgba(245, 197, 66, .55); }
body .sidebar-user-name { color: #fff; }
body .sidebar-user-role { color: #9fb4cf; }
body .sidebar .noti-bell { color: #c8d6e8; }
body .sidebar .noti-bell:hover { background: rgba(255, 255, 255, .08); color: #fff; }
body .sidebar-link:focus-visible { outline-color: var(--gov-gold-500); }

/* ============================================================
   3. TIÊU ĐỀ TRANG & HERO
   ============================================================ */
body .ui-page-hero { border-top: 0 !important; }
body .ui-page-hero h1 { font-weight: 800 !important; }
body .ui-page-hero:not(.page-header) h1::before { color: var(--gov-gold-300); }

/* KTXH theme-modern: tiêu đề nhấn vàng sao trên nền navy, đốm sáng đỏ cờ. */
body .tm-hero-title span { color: var(--gov-gold-500) !important; }
body .tm-hero-kicker { color: var(--gov-gold-300) !important; }
body .tm-hero-rule { background: var(--gov-stripe) !important; }
body .tm-hero-blobs span:nth-child(2) { background: var(--gov-red-600) !important; opacity: .32 !important; }
/* Số KPI nhấn giữ màu trung tính để không bị hiểu là cảnh báo. */
body .tm-kpi--accent .tm-kpi-value,
body .tm-skin .sum-row .sum-card:nth-child(2) .val { color: var(--gov-navy-900) !important; }
body .tm-kpi--accent .tm-kpi-sub { color: var(--gov-red-600) !important; }

/* Trang công khai */
body .public-hero { background:
    radial-gradient(circle at 6% -24%, rgba(23, 80, 143, .80), transparent 44%),
    radial-gradient(circle at 94% 112%, rgba(200, 16, 46, .32), transparent 40%),
    var(--gov-navy-900) !important; }
body .hero-rule { background: var(--gov-stripe) !important; }
body .kpi.accent { --kpi-colour: var(--gov-red-600) !important; }

/* ============================================================
   4. THẺ, KHỐI, TIÊU ĐỀ KHỐI
   ============================================================ */
body .main-content :is(.panel, .card, .chart-card, .dash-card, .kpi-card, .org-card, .alert-card, .sync-panel, .history-panel, .table-wrap, .tm-card) {
  border-color: var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(10, 38, 71, .05), 0 1px 1px rgba(10, 38, 71, .03);
}
body :is(.chart-title, .section-heading, .detail-section-title, .tm-card-title, .panel-header h2, .panel-header h3, .section-head h2, .section-head h3, .panel > h2, .panel > h3) {
  color: var(--gov-navy-900);
  font-weight: 700;
}
/* Vạch đỏ cờ trước tiêu đề khối — nhịp thị giác thống nhất giữa các phân hệ. */
body :is(.chart-title, .panel > h2, .panel > h3, .section-head > h2, .section-head > h3)::before {
  background: var(--gov-red-600);
  border-radius: 2px;
  content: "";
  display: inline-block;
  height: .95em;
  margin-right: 8px;
  vertical-align: -.12em;
  width: 3px;
}

/* KPI: số lớn, nhãn gọn, đường nhấn dưới theo ngữ nghĩa trang đã chọn. */
body :is(.kpi-value, .kpi-val-num) { color: var(--gov-navy-900); font-weight: 800; letter-spacing: -.02em; }
body .kpi-label { color: var(--color-text-muted); font-weight: 600; letter-spacing: .02em; }

/* Tab */
body :is(.tab, .qlvb-tab, .overview-tab).active,
body :is(.tab, .qlvb-tab, .overview-tab)[aria-selected="true"] { color: var(--gov-navy-900); border-bottom-color: var(--gov-red-600); }

/* Bảng dữ liệu */
body .main-content table th,
body .public-main table th {
  background: var(--gov-navy-50);
  color: var(--gov-navy-900);
  font-weight: 700;
}
body .main-content table tbody tr:hover td { background: #f6f9fd; }

/* Nhãn demo */
body .arar-demo-badge { background: var(--gov-gold-50); color: #7a5a00; border: 1px solid #f3dc92; }
body .sidebar .arar-demo-badge { background: rgba(245, 197, 66, .14); color: var(--gov-gold-300); border-color: rgba(245, 197, 66, .28); }

/* Trang đăng nhập */
body.arar-login .product-intro {
  background:
    radial-gradient(circle at 0% 0%, rgba(23, 80, 143, .70), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(200, 16, 46, .30), transparent 42%),
    var(--gov-navy-900);
  position: relative;
}
body.arar-login .product-copy h1 span { color: var(--gov-gold-500); }
body.arar-login .capability-index { border-color: rgba(245, 197, 66, .45); color: var(--gov-gold-300); }
body.arar-login .btn-primary { --button-bg: var(--gov-navy-900); }
body.arar-login .login-eyebrow { color: var(--gov-red-600); }
body .arar-public h1 span { color: var(--gov-gold-500); }
body.arar-login .product-copy h1,
body .arar-public h1 { letter-spacing: -.03em; }

/* ============================================================
   5. RESPONSIVE DÙNG CHUNG
   ============================================================ */
/* Phần tử con của grid/flex không được đẩy trang tràn ngang. */
body .main-content,
body .main-content :is(.panel, .card, .chart-card, section, article) { min-width: 0; }
body .main-content :is([class*="grid"], [class*="-row"], .charts-row, .dashboard-grid) > * { min-width: 0; }
body .main-content img, body .main-content svg, body .main-content video { max-width: 100%; }
body .chart-host { max-width: 100%; }

/* Bảng rộng cuộn trong khung của chính nó thay vì bóp chữ. */
body .main-content :is(.panel, .card, .table-wrap, .table-scroll, .summary-table-wrap, section, div):has(> table) {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Hộp thoại luôn vừa màn hình nhỏ. */
body :is(.modal-box, .modal, .modal-panel) { max-width: min(100%, calc(100vw - 24px)); }

/* Dashboard KTXH: tránh chèn ép khối thông báo và bộ lọc ở laptop/tablet. */
@media (max-width: 1440px) {
  body .hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 1280px) {
  body .compact-filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body .dashboard-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 1100px) {
  body .hero-summary .sum-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body .hero-summary .status-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body .charts-row { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Máy tính bảng & điện thoại: thanh ứng dụng cố định + menu trượt có nền mờ. */
@media (max-width: 900px) {
  body:has(.sidebar) .main-content { padding: 72px 16px 32px !important; }
  body:has(.sidebar)::after {
    align-items: center;
    background: var(--gov-navy-900);
    box-shadow: 0 2px 10px rgba(6, 26, 51, .25);
    color: #fff;
    content: "HỆ THỐNG ĐIỀU HÀNH TẬP TRUNG";
    display: flex;
    font: 700 12px/1 var(--font-sans);
    height: 56px;
    inset: 0 0 auto 0;
    justify-content: center;
    letter-spacing: .12em;
    padding: 0 64px;
    position: fixed;
    z-index: 90;
  }
  body .sidebar-toggle {
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    color: #fff !important;
    height: 40px;
    left: 10px !important;
    top: 10px !important;
    width: 40px;
  }
  body .sidebar { width: min(300px, 86vw); z-index: 1001; }
  body .sidebar.open { box-shadow: 12px 0 40px rgba(6, 26, 51, .45); }
  body .gov-nav-backdrop {
    background: rgba(6, 26, 51, .52);
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity .2s ease;
    z-index: 1000;
  }
  body .sidebar.open ~ .gov-nav-backdrop,
  body.gov-nav-open .gov-nav-backdrop { opacity: 1; pointer-events: auto; }
  body.gov-nav-open { overflow: hidden; }

  body .ui-page-hero { border-radius: var(--radius-lg) !important; }
}

@media (max-width: 760px) {
  body .main-content table { min-width: 560px; }
  body .main-content table :is(th, td) { padding-inline: 10px; }
  body .hero-summary .sum-row,
  body .hero-summary .status-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body .compact-filter-panel { grid-template-columns: minmax(0, 1fr) !important; }
  body :is(.modal-box, .modal-panel) { border-radius: var(--radius-lg) !important; max-height: calc(100vh - 24px); overflow-y: auto; }
  body :is(.page-header, .toolbar, .import-toolbar, .section-head) { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  body:has(.sidebar)::after { content: "ĐIỀU HÀNH TẬP TRUNG"; font-size: 11px; }
  body:has(.sidebar) .main-content { padding-inline: 12px !important; }
  body .ui-page-hero { padding: var(--space-5) var(--space-4) var(--space-8) !important; }
  body .ui-page-hero h1 { font-size: 1.2rem !important; }
}

/* Thiết bị cảm ứng: vùng chạm tối thiểu 40px. */
@media (pointer: coarse) {
  body :is(.ui-button, .btn, .sidebar-link, .tab, .qlvb-tab, .overview-tab) { min-height: 40px; }
}

/* Máy chiếu / màn hình lớn: tận dụng bề rộng, chữ lớn hơn một bậc. */
@media (min-width: 1680px) {
  body .main-content { max-width: 1600px; }
  body { font-size: 15px; }
}

@media print {
  body::before, body::after, body .gov-nav-backdrop { display: none !important; }
}

/* Quốc hiệu / tên cơ quan trên đầu báo cáo KTXH: xếp dọc khi màn hình hẹp. */
@media (max-width: 560px) {
  body .hdr-l > div:first-child { align-items: center !important; flex-direction: column !important; gap: 12px; }
  body .hdr-l > div:first-child > div { text-align: center !important; }
}

/* Nút phụ đặt trên nền navy của hero: viền sáng để đủ tương phản. */
body .ui-page-hero :is(.btn-ghost, .btn-o, .btn-default, .ui-button--outline, .ui-button--ghost) {
  --button-bg: rgba(255, 255, 255, .08) !important;
  --button-fg: #fff !important;
  --button-border: rgba(255, 255, 255, .38) !important;
  background: var(--button-bg) !important;
  border-color: var(--button-border) !important;
  color: var(--button-fg) !important;
}
body .ui-page-hero :is(.btn-ghost, .btn-o, .btn-default, .ui-button--outline, .ui-button--ghost):hover:not(:disabled) {
  --button-bg: rgba(255, 255, 255, .16) !important;
}
/* Nút chính trong hero: đỏ cờ — hành động nổi bật nhất của màn hình. */
body .ui-page-hero :is(.btn-primary, .ui-button--primary, .btn-blue, .btn-b) {
  --button-bg: var(--gov-red-600) !important;
  --button-border: var(--gov-red-600) !important;
  --button-fg: #fff !important;
}
body .ui-page-hero :is(.btn-primary, .ui-button--primary, .btn-blue, .btn-b):hover:not(:disabled) {
  --button-bg: var(--gov-red-700) !important;
  --button-border: var(--gov-red-700) !important;
}

/* Thẻ điểm DVC và thẻ tổng hợp dùng nền navy thống nhất. */
body .score-card {
  background:
    radial-gradient(circle at 100% 100%, rgba(200, 16, 46, .30), transparent 50%),
    linear-gradient(135deg, var(--gov-navy-900), var(--gov-navy-700)) !important;
  border: 0 !important;
}
body .score-card .score-value { color: var(--gov-gold-500); }

@media (min-width: 360px) and (max-width: 560px) {
  body .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Chữ phụ trong hero dùng màu sáng dù trang đặt màu chữ tối nội tuyến. */
body .ui-page-hero .hint span[style*="color"] { color: #fff !important; }

/* KPI hai cột trên điện thoại thay vì một cột dài. */
@media (min-width: 360px) and (max-width: 640px) {
  body .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body .kpi-grid .kpi { padding: 12px 10px; }
}

@media (max-width: 560px) {
  /* Cổng 1022: nhãn – thanh – giá trị vừa khung 360–420px. */
  body .bar-row { grid-template-columns: minmax(84px, 1fr) minmax(0, 1.3fr) 52px !important; gap: 8px !important; }
  /* Tiêu đề thẻ biểu đồ KTXH: cho phép xuống dòng thay vì bóp chữ. */
  body .c-ttl { flex-wrap: wrap; row-gap: 6px; }
  body .c-ttl .c-ttl-text { flex: 1 1 150px; min-width: 0; }
}