/* SIFMA V90 — minimal, role-aware application shell */
@media screen {
  :root {
    --v90-accent: #7c2a95;
    --v90-accent-strong: #642078;
    --v90-accent-soft: #f5eff8;
    --v90-bg: #f5f6f8;
    --v90-surface: #ffffff;
    --v90-surface-soft: #fafafa;
    --v90-text: #20232a;
    --v90-muted: #6b7280;
    --v90-line: #e6e7eb;
    --v90-shadow: 0 4px 16px rgba(31, 35, 48, .055);
    --v90-radius: 12px;
    --radius: 12px;
    --shadow: var(--v90-shadow);
  }

  html[data-theme="dark"],
  body.theme-dark {
    --v90-accent: #c16ad8;
    --v90-accent-strong: #dda7eb;
    --v90-accent-soft: rgba(193, 106, 216, .12);
    --v90-bg: #111217;
    --v90-surface: #191a21;
    --v90-surface-soft: #202128;
    --v90-text: #f2f3f5;
    --v90-muted: #a6a8b1;
    --v90-line: #2e3038;
    --v90-shadow: 0 5px 18px rgba(0, 0, 0, .18);
  }

  body,
  html[data-theme="dark"] body,
  body.theme-dark {
    background: var(--v90-bg);
    color: var(--v90-text);
  }

  .app-shell { align-items: flex-start; }

  .sidebar {
    width: 264px;
    flex: 0 0 264px;
    padding: 14px 12px;
    background: var(--v90-surface);
    border-right: 1px solid var(--v90-line);
    box-shadow: none;
    backdrop-filter: none;
  }

  .brand-card,
  html[data-theme="dark"] .brand-card,
  body.theme-dark .brand-card {
    min-height: 60px;
    margin: 0 0 10px;
    padding: 9px 10px;
    border: 1px solid var(--v90-line);
    border-radius: 12px;
    background: var(--v90-surface);
  }

  .brand-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    background: var(--v90-accent);
    box-shadow: none;
    font-size: 13px;
  }

  .brand-card strong { color: var(--v90-text); font-size: 14px; }
  .brand-card span { color: var(--v90-muted); font-size: 10px; line-height: 1.35; }

  .nav-menu { gap: 2px; padding: 0 3px 12px 0; scrollbar-width: thin; }

  .sidebar-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 8px;
    padding: 0;
  }

  .sidebar-search-wrap > span {
    position: absolute;
    left: 11px;
    z-index: 1;
    color: var(--v90-muted);
    font-size: 17px;
    pointer-events: none;
  }

  .sidebar-search {
    height: 38px;
    padding: 8px 10px 8px 34px;
    border: 1px solid var(--v90-line);
    border-radius: 10px;
    background: var(--v90-surface-soft);
    color: var(--v90-text);
    box-shadow: none;
  }

  .sidebar-search:focus {
    border-color: rgba(124, 42, 149, .5);
    box-shadow: 0 0 0 3px rgba(124, 42, 149, .08);
  }

  .nav-section {
    margin: 15px 9px 5px;
    color: var(--v90-muted);
    font-size: 9px;
    letter-spacing: .14em;
  }

  .nav-menu a,
  .nav-cluster summary {
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--v90-muted);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    transition: background .15s ease, color .15s ease;
  }

  .nav-menu a:hover,
  html[data-theme="dark"] .nav-menu a:hover,
  body.theme-dark .nav-menu a:hover,
  .nav-cluster summary:hover {
    transform: none;
    background: var(--v90-accent-soft);
    color: var(--v90-accent-strong);
  }

  .nav-menu a.active,
  html[data-theme="dark"] .nav-menu a.active,
  body.theme-dark .nav-menu a.active {
    background: var(--v90-accent-soft);
    color: var(--v90-accent-strong);
    box-shadow: inset 3px 0 0 var(--v90-accent);
  }

  .nav-menu a > span,
  .nav-cluster summary > span {
    width: 20px;
    flex: 0 0 20px;
    font-size: 14px;
    filter: saturate(.72);
  }

  .nav-cluster {
    margin: 3px 0;
    border: 0;
  }

  .nav-cluster summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
  }

  .nav-cluster summary::-webkit-details-marker { display: none; }
  .nav-cluster summary b { margin-left: auto; font-size: 12px; transition: transform .15s ease; }
  .nav-cluster[open] summary b { transform: rotate(180deg); }
  .nav-cluster-links { margin: 2px 0 5px 15px; padding-left: 7px; border-left: 1px solid var(--v90-line); }
  .nav-cluster-links a { min-height: 35px; font-size: 12px; }

  .sidebar-footer { padding-top: 10px; }
  .logout { padding: 9px 12px; border-radius: 9px; font-size: 12px; }

  .main-content {
    width: calc(100% - 264px);
    max-width: calc(100vw - 264px);
    min-height: 100vh;
    padding: 20px clamp(16px, 2.3vw, 32px);
  }

  .main-content > .alert,
  .main-content > .toolbar,
  .main-content > .card,
  .main-content > .form-card,
  .main-content > .table-card,
  .main-content > .card-grid,
  .main-content > .private-request-page,
  .main-content > .request-simple-page,
  .main-content > .payment-edit-page {
    margin-left: 0;
    margin-right: 0;
  }

  .topbar {
    min-height: 57px;
    margin: 0 0 20px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--v90-line);
  }

  .topbar-title-wrap { display: flex; align-items: center; gap: 11px; }
  .eyebrow { margin-bottom: 3px; color: var(--v90-muted); font-size: 9px; letter-spacing: .13em; }
  .eyebrow span { margin: 0 3px; color: var(--v90-line); }
  .topbar h1 { color: var(--v90-text); font-size: clamp(20px, 2vw, 26px); letter-spacing: -.025em; }
  .topbar-actions { gap: 7px; flex-wrap: nowrap; }

  .theme-toggle,
  html[data-theme="dark"] .theme-toggle,
  body.theme-dark .theme-toggle {
    min-height: 36px;
    padding: 7px 10px;
    border-color: var(--v90-line);
    border-radius: 9px;
    background: var(--v90-surface);
    color: var(--v90-text);
    box-shadow: none;
    font-size: 11px;
  }

  .theme-toggle:hover { transform: none; background: var(--v90-surface-soft); }
  .push-enable-button .push-button-label { display: none; }
  .push-enable-button { width: 36px; padding: 7px; }
  .notification-top span:last-child { font-size: 0; }
  .notification-top span:last-child::after { content: "Notifikasi"; font-size: 11px; }

  .topbar-user,
  html[data-theme="dark"] .topbar-user,
  body.theme-dark .topbar-user {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 9px 5px 5px;
    border: 1px solid var(--v90-line);
    border-radius: 10px;
    background: var(--v90-surface);
    box-shadow: none;
  }

  .topbar-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid !important;
    place-items: center;
    border-radius: 8px;
    background: var(--v90-accent-soft);
    color: var(--v90-accent-strong) !important;
    font-size: 12px;
    font-weight: 900;
  }

  .topbar-user-copy { display: block !important; min-width: 0; }
  .topbar-user-copy strong { display: block; max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--v90-text); font-size: 11.5px; }
  .topbar-user-copy small { margin-top: 1px; color: var(--v90-muted); font-size: 9.5px; }

  .card,
  .form-card,
  .table-card,
  .print-card,
  html[data-theme="dark"] .card,
  html[data-theme="dark"] .form-card,
  html[data-theme="dark"] .table-card,
  body.theme-dark .card,
  body.theme-dark .form-card,
  body.theme-dark .table-card {
    border: 1px solid var(--v90-line);
    border-radius: var(--v90-radius);
    background: var(--v90-surface);
    box-shadow: var(--v90-shadow);
  }

  .card,
  .form-card { padding: clamp(15px, 1.8vw, 22px); }
  .table-card { margin-bottom: 18px; overflow: visible; }
  .table-card > .table-wrap { border-radius: 12px; overflow: auto; }

  .card-grid { gap: 12px; margin-bottom: 16px; }
  .stat,
  html[data-theme="dark"] .stat,
  body.theme-dark .stat {
    min-height: 100px;
    padding: 16px;
    border: 1px solid var(--v90-line);
    border-radius: 12px;
    background: var(--v90-surface);
    box-shadow: var(--v90-shadow);
  }
  .stat::after { display: none; }
  .stat span { color: var(--v90-muted); font-size: 10.5px; }
  .stat strong { margin-top: 5px; color: var(--v90-text); font-size: clamp(21px, 2.4vw, 27px); letter-spacing: -.025em; }
  .stat small { color: var(--v90-muted); }

  table { line-height: 1.4; }
  th, td { padding: 11px 13px; border-color: var(--v90-line); }
  th,
  html[data-theme="dark"] th,
  body.theme-dark th {
    background: var(--v90-surface-soft);
    color: var(--v90-muted);
    font-size: 10px;
    letter-spacing: .065em;
  }
  td { color: var(--v90-text); font-size: 12.5px; }
  table tbody tr:hover td { background: var(--v90-surface-soft); }

  .toolbar { min-height: 42px; margin-bottom: 13px; }
  .toolbar h2, .toolbar h3 { margin: 0; color: var(--v90-text); font-size: 18px; }
  .toolbar form { row-gap: 8px !important; }
  .btn {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    box-shadow: none !important;
    font-size: 12px;
    font-weight: 800;
  }
  .btn:hover { transform: none; filter: brightness(.97); }
  .btn.primary { background: var(--v90-accent); box-shadow: none; }
  .btn.light,
  html[data-theme="dark"] .btn.light,
  body.theme-dark .btn.light {
    border-color: var(--v90-line);
    background: var(--v90-surface);
    color: var(--v90-text);
  }
  .btn.small { min-height: 31px; padding: 6px 9px; border-radius: 8px; font-size: 10.5px; }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  html[data-theme="dark"] input,
  html[data-theme="dark"] select,
  html[data-theme="dark"] textarea,
  body.theme-dark input,
  body.theme-dark select,
  body.theme-dark textarea {
    min-height: 41px;
    padding: 9px 11px;
    border-color: var(--v90-line);
    border-radius: 9px;
    background: var(--v90-surface);
    color: var(--v90-text);
    box-shadow: none;
    font-size: 13px;
  }
  textarea { min-height: 92px; }
  input:focus, select:focus, textarea:focus {
    border-color: rgba(124, 42, 149, .58);
    box-shadow: 0 0 0 3px rgba(124, 42, 149, .08);
  }
  .form-group label, label { color: var(--v90-text); font-size: 12px; }
  .form-grid { gap: 14px; }
  .helper { color: var(--v90-muted); }

  .badge {
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 7px;
    font-size: 10px;
    letter-spacing: .01em;
  }
  .badge.green { background: #eaf8f0; color: #237348; }
  .badge.yellow { background: #fff5db; color: #8a6510; }
  .badge.blue { background: #ebf3ff; color: #2b5f9d; }
  .badge.purple { background: var(--v90-accent-soft); color: var(--v90-accent-strong); }

  .alert {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 12px;
  }
  .alert-dismiss {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 18px;
  }
  .alert-dismiss:hover { background: rgba(0, 0, 0, .06); }

  .page-intro-card,
  html[data-theme="dark"] .page-intro-card,
  body.theme-dark .page-intro-card {
    min-height: 92px;
    padding: 17px 19px;
    color: var(--v90-text);
    border: 1px solid var(--v90-line);
    border-left: 4px solid var(--v90-accent);
    border-radius: 12px;
    background: var(--v90-surface);
    box-shadow: var(--v90-shadow);
  }
  .page-intro-card h2 { margin: 2px 0 4px; color: var(--v90-text); font-size: 20px; }
  .page-intro-card p { color: var(--v90-muted); font-size: 12.5px; }
  .page-kicker { color: var(--v90-accent-strong); font-size: 9px; }
  .page-intro-icon { width: 43px; height: 43px; flex-basis: 43px; border-radius: 10px; background: var(--v90-accent-soft); font-size: 19px; }
  .page-intro-card > .badge { background: var(--v90-accent-soft); color: var(--v90-accent-strong); border-color: transparent; }
  .page-intro-card > .btn { background: var(--v90-accent); color: #fff; border-color: var(--v90-accent); }

  .action-dropdown-menu,
  html[data-theme="dark"] .action-dropdown-menu,
  body.theme-dark .action-dropdown-menu {
    padding: 6px;
    border: 1px solid var(--v90-line);
    border-radius: 10px;
    background: var(--v90-surface);
    box-shadow: 0 12px 28px rgba(26, 29, 38, .14);
  }
  .action-dropdown-menu a,
  .action-dropdown-menu button { border-radius: 7px; font-size: 11.5px; }

  /* Role-aware dashboard */
  .dashboard-v90 { display: grid; gap: 16px; }
  .dashboard-hero-v90 {
    min-height: 132px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid #6f2485;
    border-radius: 14px;
    background: #76288d;
    color: #fff;
  }
  .dashboard-kicker { display: block; margin-bottom: 7px; color: var(--v90-accent-strong); font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
  .dashboard-hero-v90 .dashboard-kicker { color: rgba(255,255,255,.73); }
  .dashboard-hero-v90 h2 { margin: 0 0 6px; color: #fff; font-size: clamp(23px, 3vw, 32px); letter-spacing: -.035em; }
  .dashboard-hero-v90 p { max-width: 730px; margin: 0; color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.55; }
  .dashboard-date-v90 { min-width: 150px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(255,255,255,.09); }
  .dashboard-date-v90 span, .dashboard-date-v90 strong { display: block; }
  .dashboard-date-v90 span { margin-bottom: 3px; color: rgba(255,255,255,.65); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
  .dashboard-date-v90 strong { color: #fff; font-size: 12px; }

  .dashboard-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .dashboard-metric {
    min-height: 104px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 16px;
    border: 1px solid var(--v90-line);
    border-radius: 12px;
    background: var(--v90-surface);
    box-shadow: var(--v90-shadow);
  }
  .dashboard-metric-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--v90-accent-soft);
    color: var(--v90-accent-strong);
    font-size: 14px;
    font-weight: 900;
  }
  .dashboard-metric.warning .dashboard-metric-icon { background: #fff4d9; color: #8b6714; }
  .dashboard-metric.green .dashboard-metric-icon { background: #e8f7ef; color: #26734b; }
  .dashboard-metric.blue .dashboard-metric-icon { background: #ebf3ff; color: #285e9d; }
  .dashboard-metric span, .dashboard-metric strong, .dashboard-metric small { display: block; }
  .dashboard-metric span { color: var(--v90-muted); font-size: 10.5px; font-weight: 800; }
  .dashboard-metric strong { margin-top: 3px; color: var(--v90-text); font-size: 24px; letter-spacing: -.025em; }
  .dashboard-metric small { margin-top: 3px; color: var(--v90-muted); font-size: 9.5px; }

  .dashboard-main-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 16px; }
  .dashboard-panel { padding: 18px; border: 1px solid var(--v90-line); border-radius: 12px; background: var(--v90-surface); box-shadow: var(--v90-shadow); }
  .dashboard-panel .section-heading { margin-bottom: 13px; }
  .dashboard-panel .section-heading h3 { margin: 0 0 3px; color: var(--v90-text); font-size: 16px; }
  .dashboard-panel .dashboard-kicker { margin-bottom: 4px; }

  .quick-actions-v90 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .quick-action-v90 {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 10px;
    border: 1px solid var(--v90-line);
    border-radius: 10px;
    background: var(--v90-surface-soft);
  }
  .quick-action-v90:hover { border-color: rgba(124,42,149,.28); background: var(--v90-accent-soft); }
  .quick-action-icon { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 8px; background: var(--v90-surface); color: var(--v90-accent-strong); font-weight: 900; }
  .quick-action-v90 strong, .quick-action-v90 small { display: block; }
  .quick-action-v90 strong { color: var(--v90-text); font-size: 11.5px; }
  .quick-action-v90 small { margin-top: 2px; color: var(--v90-muted); font-size: 9.5px; }
  .quick-action-v90 b { margin-left: auto; color: var(--v90-muted); font-size: 18px; font-weight: 500; }

  .workflow-grid-v90 { display: grid; gap: 8px; }
  .workflow-step-v90 { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--v90-line); }
  .workflow-step-v90:last-child { border-bottom: 0; }
  .workflow-step-v90 > span { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border-radius: 8px; background: var(--v90-accent-soft); color: var(--v90-accent-strong); font-size: 9px; font-weight: 900; }
  .workflow-step-v90 strong { color: var(--v90-text); font-size: 11.5px; }
  .workflow-step-v90 p { margin: 3px 0 0; color: var(--v90-muted); font-size: 10.5px; line-height: 1.45; }
  .dashboard-recent-v90 { padding: 0; overflow: hidden; }
  .dashboard-recent-v90 > .section-heading { align-items: center; padding: 16px 17px 12px; margin: 0; }
  .dashboard-recent-v90 table { min-width: 760px; }

  .empty-state-v90 { padding: 22px 12px; text-align: center; }
  .empty-state-v90 strong, .empty-state-v90 span { display: block; }
  .empty-state-v90 strong { color: var(--v90-text); font-size: 12px; }
  .empty-state-v90 span { margin-top: 4px; color: var(--v90-muted); font-size: 10.5px; }

  /* Login stays familiar, but quieter and easier to scan. */
  .landing-page { background: var(--v90-bg); }
  .modern-login-panel { padding: clamp(24px, 4vw, 46px); background: var(--v90-surface); backdrop-filter: none; }
  .modern-login-card { max-width: 410px; padding: 29px; border-radius: 14px; border-color: var(--v90-line); box-shadow: 0 12px 35px rgba(25, 28, 37, .1); }
  .login-submit { border-radius: 9px; }

  @media (max-width: 1180px) {
    .dashboard-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-main-grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 900px) {
    .sidebar { width: min(290px, 87vw); flex-basis: auto; }
    .main-content { width: 100%; max-width: 100%; padding: 14px 13px; }
    .topbar { align-items: center; flex-direction: row; }
    .topbar-actions { width: auto; margin-left: auto; }
    .notification-top span:last-child,
    .theme-toggle-text,
    .topbar-user-copy { display: none !important; }
    .notification-top span:last-child::after { content: ""; }
    .notification-top,
    .theme-toggle { width: 36px; padding: 7px; }
    .topbar-user { padding: 3px; border: 0; background: transparent; }
    .topbar-avatar { width: 34px; height: 34px; }
    .dashboard-hero-v90 { align-items: flex-start; flex-direction: column; }
    .dashboard-date-v90 { min-width: 0; width: 100%; }
  }

  @media (max-width: 760px) {
    .dashboard-v90 { gap: 11px; }
    .dashboard-metric-grid { gap: 8px; }
    .dashboard-metric { min-height: 96px; padding: 12px; }
    .dashboard-metric strong { font-size: 21px; }
    .dashboard-panel { padding: 14px; }
    .quick-actions-v90 { grid-template-columns: 1fr; }

    .toolbar,
    .toolbar form,
    .toolbar > .actions { width: 100%; }
    .toolbar form input,
    .toolbar form select { width: 100% !important; min-width: 0 !important; }

    .table-card > .table-wrap:has(.v90-responsive-table),
    .dashboard-recent-v90 > .table-wrap { overflow: visible; }
    table.v90-responsive-table { min-width: 0 !important; border-collapse: separate; border-spacing: 0 9px; }
    table.v90-responsive-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    table.v90-responsive-table tbody { display: grid; gap: 9px; }
    table.v90-responsive-table tbody tr {
      display: block;
      overflow: hidden;
      border: 1px solid var(--v90-line);
      border-radius: 10px;
      background: var(--v90-surface);
    }
    table.v90-responsive-table tbody td {
      min-height: 40px;
      display: grid;
      grid-template-columns: minmax(96px, 38%) 1fr;
      align-items: center;
      gap: 10px;
      padding: 9px 11px;
      border-bottom: 1px solid var(--v90-line);
      background: transparent !important;
      text-align: right;
      word-break: break-word;
    }
    table.v90-responsive-table tbody td:last-child { border-bottom: 0; }
    table.v90-responsive-table tbody td::before {
      content: attr(data-label);
      color: var(--v90-muted);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .06em;
      text-align: left;
      text-transform: uppercase;
    }
    table.v90-responsive-table tbody td[colspan] { display: block; text-align: center; }
    table.v90-responsive-table tbody td[colspan]::before { display: none; }
    table.v90-responsive-table .action-stack,
    table.v90-responsive-table .actions { justify-content: flex-end; margin-left: auto; }
    .dashboard-recent-v90 { padding: 14px; }
    .dashboard-recent-v90 > .section-heading { padding: 0 0 8px; }
  }

  @media (max-width: 520px) {
    .topbar h1 { font-size: 18px; }
    .eyebrow { font-size: 8px; }
    .push-enable-button { display: none; }
    .dashboard-hero-v90 { min-height: 0; padding: 18px; }
    .dashboard-hero-v90 h2 { font-size: 23px; }
    .dashboard-metric-grid { grid-template-columns: 1fr 1fr; }
    .dashboard-metric { display: block; }
    .dashboard-metric-icon { margin-bottom: 9px; }
    .page-intro-card { padding: 15px; }
  }
}