/* REVOO AI ID | FRONTEND V85 REVISI 36
   Modern Soft UI: presentational layer only. Loaded after R34 base.
   Keep all original KPI, tables, filters, forms, functionality, dark mode and print.
   NO content changes, calculations, endpoints, navigation or data mutation. */

@media screen {
  :root {
    --background:#f7f6f2;
    --surface:#ffffff;
    --text:#243246;
    --muted:#68778a;
    --border:#e2e7e7;
    --primary:#087fba;
    --primary-dark:#075985;
    --primary-soft:#e8f2fa;
    --shadow:0 12px 28px rgba(38,65,75,.075);
    --shadow-soft:0 8px 24px rgba(38,65,75,.065);
    --revoo-sage:#e5eee8;
    --revoo-peach:#f9ddd3;
    --revoo-cream:#fff0c9;
    --revoo-sky:#e4eefb;
    --revoo-panel-shadow:0 8px 26px rgba(60,70,72,.065),0 2px 7px rgba(60,70,72,.035);
  }
  body {font-family: "Segoe UI", Arial, Helvetica, sans-serif;letter-spacing:.002em;}
  html:not([data-theme="dark"]) body,
  html:not([data-theme="dark"]) .app-shell,
  html:not([data-theme="dark"]) .main-area,
  html:not([data-theme="dark"]) .page-content {
    background:#f7f6f2;
  }
  html:not([data-theme="dark"]) .main-area {
    background-image:radial-gradient(circle at 92% 4%,rgba(243,220,207,.18),transparent 33%);
  }

  /* Sidebar: floating sage panel for desktop, original drawer behavior for mobile */
  html:not([data-theme="dark"]) .sidebar {
    background:linear-gradient(165deg,#e3eee8 0%,#eaf1e8 55%,#e2eae6 100%) !important;
    border-color:#d4e3da !important;
    box-shadow:0 11px 28px rgba(45,80,71,.085);
  }
  html:not([data-theme="dark"]) .sidebar-brand {
    background:rgba(255,255,255,.28);
    border-bottom:1px solid rgba(125,158,137,.20);
  }
  .sidebar-nav {padding:13px 11px 20px;}
  .sidebar-heading {font-size:10.5px;letter-spacing:.075em;text-transform:uppercase;}
  html:not([data-theme="dark"]) .sidebar-heading {color:#627a70 !important;}
  .sidebar-link {border-radius:13px;gap:10px;min-height:43px;padding:7px 10px;border-left-color:transparent !important;transition:background .16s,box-shadow .16s,transform .16s;}
  html:not([data-theme="dark"]) .sidebar-link {color:#344a45 !important;}
  html:not([data-theme="dark"]) .sidebar-link:hover {background:rgba(255,255,255,.55)!important;transform:translateX(1px);}
  html:not([data-theme="dark"]) .sidebar-link.active {
    background:#ffffff!important;color:#243e44!important;
    border-left-color:transparent!important;
    box-shadow:0 5px 17px rgba(49,87,68,.09),0 1px 2px rgba(49,87,68,.03);
  }
  .sidebar-icon {
    width:32px!important;height:32px;flex:0 0 32px!important;
    border-radius:11px;display:grid;place-items:center;font-size:15px!important;
    background:rgba(255,255,255,.58);
  }
  html:not([data-theme="dark"]) .sidebar-link.active .sidebar-icon {background:#e1eee9;color:#287b70!important;}
  html:not([data-theme="dark"]) .sidebar-user,
  html:not([data-theme="dark"]) .sidebar-account-settings {background:rgba(255,255,255,.24);border-color:#d4e2d9;}
  .sidebar-account-button {border-radius:12px;}
  .sidebar-account-icon {border-radius:11px;}
  @media (min-width:1150px) {
    .sidebar {top:12px;bottom:12px;left:12px;border:1px solid!important;border-radius:25px;width:254px!important;overflow-x:hidden;}
    .main-area {margin-left:278px!important;}
  }
  @media (max-width:1149px) {
    .sidebar {border-radius:0 23px 23px 0;}
  }

  /* Topbar and page rhythm */
  html:not([data-theme="dark"]) .topbar {
    background:rgba(255,253,249,.93)!important;border:1px solid #eee8dd!important;
    box-shadow:var(--revoo-panel-shadow);border-radius:20px;
  }
  .topbar {margin:12px 18px 0;padding:11px 19px!important;min-height:66px;}
  .topbar h1 {font-weight:800;letter-spacing:-.025em;}
  .page-content {padding:20px 18px 26px!important;}
  .page-stack {gap:17px;}
  .page-header h2,.page-heading h2,.section-title-row h3 {letter-spacing:-.024em;}
  html:not([data-theme="dark"]) .page-header p,
  html:not([data-theme="dark"]) .page-heading p {color:#68778a;}

  /* Shared card language; deliberately leave grid, sizes and form DOM alone */
  .page-content .card,.page-content .table-card,.page-content .filter-card,
  .page-content .form-card,.page-content .info-card,.page-content .cash-table-card,
  .page-content .invoice-form,.page-content .stock-table-card,
  .page-content .profile-card,.page-content .income-recap-card {
    border-radius:21px;
  }
  html:not([data-theme="dark"]) .page-content .card,
  html:not([data-theme="dark"]) .page-content .table-card,
  html:not([data-theme="dark"]) .page-content .filter-card,
  html:not([data-theme="dark"]) .page-content .form-card,
  html:not([data-theme="dark"]) .page-content .info-card,
  html:not([data-theme="dark"]) .page-content .cash-table-card,
  html:not([data-theme="dark"]) .page-content .income-recap-card {
    background:#fffefa;
    border-color:#e8e9e3;
    box-shadow:var(--revoo-panel-shadow);
  }
  .page-content .stat-card,.page-content .summary-card {border-radius:19px;}

  /* Soft welcome banner, if present on the active dashboard */
  html:not([data-theme="dark"]) .dashboard-welcome-card {
    background:linear-gradient(108deg,#fce6dc 0%,#f9d9cd 60%,#f7d6cb 100%);
    border:1px solid #f2d8ce;border-left:0;border-radius:24px;
    box-shadow:0 10px 25px rgba(174,104,83,.095);
    padding:22px 24px;min-height:118px;
  }
  html:not([data-theme="dark"]) .dashboard-welcome-avatar {
    background:linear-gradient(140deg,#e8a78f,#ed806d);border-color:#fff6f0;
    border-radius:20px;color:#fff;box-shadow:0 9px 20px rgba(185,109,86,.15);
  }
  html:not([data-theme="dark"]) .dashboard-welcome-copy h2 {color:#463931;}
  html:not([data-theme="dark"]) .dashboard-welcome-copy p {color:#735d55;}

  /* Dashboard: preserve ticker + 5 KPI + 6-month chart + donut + tables */
  .finance-dashboard-v81 {gap:17px;}
  .finance-dashboard-v81 .finance-news-row-v211 {gap:12px;}
  html:not([data-theme="dark"]) .finance-news-ticker {
    background:linear-gradient(110deg,#fbe6dd 0%,#fae0d5 100%)!important;
    border:1px solid #f2d7cd!important;border-radius:21px;
    box-shadow:0 9px 23px rgba(176,116,95,.07);
  }
  html:not([data-theme="dark"]) .finance-news-ticker-label {
    background:#fffaf4!important;border-radius:13px;color:#9c5e4b!important;
  }
  html:not([data-theme="dark"]) .finance-news-item {color:#5d5050;}
  html:not([data-theme="dark"]) .finance-notification-button-v211 {
    background:#fffefa;border:1px solid #e6e8e1;box-shadow:var(--revoo-panel-shadow);
    border-radius:15px;
  }
  .finance-kpi-grid {gap:15px;}
  .finance-dashboard-v81 .finance-kpi-card {
    border-radius:23px;min-height:126px;padding:20px 18px;
    box-shadow:0 12px 23px rgba(59,72,74,.085);
    transition:transform .17s ease,box-shadow .17s ease;
  }
  .finance-dashboard-v81 .finance-kpi-card:hover {
    transform:translateY(-2px);
    box-shadow:0 16px 28px rgba(59,72,74,.13);
  }
  html:not([data-theme="dark"]) .finance-dashboard-v81 .finance-kpi-card.kpi-cash {
    background:linear-gradient(140deg,#e7f1ec 0%,#d5e9e4 100%)!important;
    border:1px solid #cee4de!important;
  }
  html:not([data-theme="dark"]) .finance-dashboard-v81 .finance-kpi-card.kpi-bank {
    background:linear-gradient(140deg,#e9f0fa 0%,#dce9f8 100%)!important;
    border:1px solid #d3e2f3!important;
  }
  html:not([data-theme="dark"]) .finance-dashboard-v81 .finance-kpi-card.kpi-income {
    background:linear-gradient(140deg,#fce8df 0%,#f8d7ca 100%)!important;
    border:1px solid #f4d4c8!important;
  }
  html:not([data-theme="dark"]) .finance-dashboard-v81 .finance-kpi-card.kpi-expense {
    background:linear-gradient(140deg,#fff2d5 0%,#f8e7bc 100%)!important;
    border:1px solid #f0dfad!important;
  }
  html:not([data-theme="dark"]) .finance-dashboard-v81 .finance-kpi-card.kpi-invoice {
    background:linear-gradient(140deg,#edf0fa 0%,#e4e5f5 100%)!important;
    border:1px solid #dbdff2!important;
  }
  html:not([data-theme="dark"]) .finance-dashboard-v81 .finance-kpi-label {color:#3a5052!important;font-size:12px;font-weight:760;}
  html:not([data-theme="dark"]) .finance-dashboard-v81 .finance-kpi-card strong {
    color:#263b47!important;-webkit-text-fill-color:#263b47!important;
    font-size:clamp(16px,1.55vw,22px);
    letter-spacing:-.025em;
  }
  html:not([data-theme="dark"]) .finance-dashboard-v81 .finance-kpi-card small {color:#556b71!important;font-weight:650;}
  html:not([data-theme="dark"]) .finance-dashboard-v81 .finance-kpi-card small.trend-positive {color:#126c51!important;}
  html:not([data-theme="dark"]) .finance-dashboard-v81 .finance-kpi-card small.trend-negative {color:#a64747!important;}
  .finance-dashboard-v81 .finance-kpi-icon {
    flex:0 0 46px;width:46px;height:46px;border-radius:16px!important;
    box-shadow:0 7px 15px rgba(39,74,74,.10);
  }
  html:not([data-theme="dark"]) .finance-dashboard-v81 .finance-kpi-icon {
    background:rgba(255,255,255,.82)!important;border:1px solid rgba(255,255,255,.82)!important;
  }
  html:not([data-theme="dark"]) .finance-dashboard-v81 .kpi-cash .finance-kpi-icon {color:#287d71!important;}
  html:not([data-theme="dark"]) .finance-dashboard-v81 .kpi-bank .finance-kpi-icon {color:#427cac!important;}
  html:not([data-theme="dark"]) .finance-dashboard-v81 .kpi-income .finance-kpi-icon {color:#d47761!important;}
  html:not([data-theme="dark"]) .finance-dashboard-v81 .kpi-expense .finance-kpi-icon {color:#bb8439!important;}
  html:not([data-theme="dark"]) .finance-dashboard-v81 .kpi-invoice .finance-kpi-icon {color:#727bb0!important;}

  html:not([data-theme="dark"]) .finance-dashboard-v81 .finance-dashboard-main-grid>.card,
  html:not([data-theme="dark"]) .finance-dashboard-v81 .finance-dashboard-bottom-grid>.card {
    background:#fffefa!important;border:1px solid #e8e9e3!important;
    border-radius:24px!important;box-shadow:var(--revoo-panel-shadow)!important;
  }
  .finance-panel-head h3 {font-weight:800;font-size:15px;letter-spacing:-.02em;}
  html:not([data-theme="dark"]) .finance-panel-badge {
    background:#f6f4ed;border:1px solid #ebe7dc;color:#6d6b64;border-radius:999px;
  }
  html:not([data-theme="dark"]) .finance-dashboard-v81 .finance-dashboard-period {
    background:#fffaf3!important;border-color:#e9dccc!important;
    color:#735e4d!important;border-radius:999px;
  }
  html:not([data-theme="dark"]) .finance-dashboard-v81 .finance-transactions-scroll {
    background:#fffefa;border-color:#e5ebe7;border-radius:18px;
  }
  html:not([data-theme="dark"]) .finance-dashboard-v81 .finance-transaction-table thead th {
    background:#eaf1ed;color:#3f5b56;border-bottom-color:#d7e4dc;
  }
  .finance-dashboard-v81 .finance-dashboard-main-grid>.card,
  .finance-dashboard-v81 .finance-dashboard-bottom-grid>.card {min-width:0;}

  /* Shared data tables and forms - visual only, no column width/layout changes */
  .page-content :is(.table-scroll,.table-wrap,.responsive-table) {border-radius:15px;}
  html:not([data-theme="dark"]) .page-content :is(.table-scroll,.table-wrap,.responsive-table) {
    border-color:#e0e7e3;
  }
  html:not([data-theme="dark"]) .page-content table thead th {
    background-color:#ebf1ee;color:#354f50;border-bottom-color:#d4e3dd;
  }
  html:not([data-theme="dark"]) .page-content table tbody tr:hover td {
    background-color:#f8faf5;
  }
  /* Arus Kas R33/R34 thicker border and soft shadow must remain visible. */
  html:not([data-theme="dark"]) .cash-layout > .cash-table-card {
    border:2px solid #c4d8d6!important;background:#fffefa!important;
    border-radius:21px!important;
    box-shadow:0 4px 12px rgba(40,77,75,.08),0 14px 28px rgba(40,77,75,.10)!important;
  }
  html:not([data-theme="dark"]) .cash-layout > .cash-table-card > .table-scroll {
    background:#fff;border-color:#cbdcd8!important;
    box-shadow:0 2px 8px rgba(35,69,110,.07),0 6px 16px rgba(35,69,110,.045);
  }
  html:not([data-theme="dark"]) .cash-layout > .cash-table-card > .table-scroll > table thead th {
    background:#e9f1ee;border-bottom-color:#c8d9d3;
  }

  .page-content :is(.field input,.field select,.field textarea,
                    .cash-form input,.cash-form select,.cash-form textarea,
                    .invoice-field input,.invoice-field select,.invoice-field textarea) {
    border-radius:12px;
  }
  html:not([data-theme="dark"]) .page-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select,textarea) {
    border-color:#d8e2df;
    background-color:#fffefa;
  }
  html:not([data-theme="dark"]) .page-content :is(input,select,textarea):focus {
    border-color:#79afa7;
    box-shadow:0 0 0 3px rgba(112,177,162,.15);
  }
  .button,.icon-button,.sync-button {border-radius:12px;}
  html:not([data-theme="dark"]) .button-primary,
  html:not([data-theme="dark"]) .sync-button {
    background:linear-gradient(135deg,#157db7,#086da2);
    box-shadow:0 6px 14px rgba(11,111,163,.13);
  }
  html:not([data-theme="dark"]) .button-outline {
    background:#fffefa;border-color:#d5e2de;color:#386c72;
  }

  /* Login: soft gradient in the same visual language as the dashboard */
  html:not([data-theme="dark"]) .login-page {
    background:radial-gradient(circle at 11% 25%,rgba(192,226,214,.43),transparent 34%),
               radial-gradient(circle at 86% 74%,rgba(249,209,189,.32),transparent 31%),
               linear-gradient(125deg,#f9f8f2,#f4f7f5 55%,#fdf6f1)!important;
  }
  html:not([data-theme="dark"]) .login-card {
    border-radius:29px;background:rgba(255,254,250,.97)!important;
    border:1px solid rgba(232,231,222,.95)!important;
    box-shadow:0 18px 42px rgba(58,81,77,.105)!important;
  }
  html:not([data-theme="dark"]) .login-showcase-feature-card,
  html:not([data-theme="dark"]) .login-showcase-quote {border-radius:19px;}
  html:not([data-theme="dark"]) .login-form input {
    border:1px solid #dce5e1!important;background:#fffefa!important;border-radius:13px;
  }
  html:not([data-theme="dark"]) .login-form input:focus {border-color:#70aea3!important;box-shadow:0 0 0 4px rgba(100,168,154,.14)!important;}
  html:not([data-theme="dark"]) .login-form .button-primary {
    border-radius:13px;background:linear-gradient(110deg,#147eb5,#096c9f)!important;
  }

  /* Dark mode: only shape and elevation are refreshed; existing dark colors stay */
  html[data-theme="dark"] .sidebar {border-radius:0 22px 22px 0;}
  html[data-theme="dark"] .sidebar-link.active {border-radius:13px;}
  html[data-theme="dark"] .sidebar-icon {background:#1a2e3e;}
  html[data-theme="dark"] .topbar {border-radius:20px;}
  html[data-theme="dark"] .page-content .card,
  html[data-theme="dark"] .page-content .cash-table-card {border-radius:21px;}
  html[data-theme="dark"] .finance-dashboard-v81 .finance-kpi-card {border-radius:23px;}
  html[data-theme="dark"] .finance-dashboard-v81 .finance-dashboard-main-grid>.card,
  html[data-theme="dark"] .finance-dashboard-v81 .finance-dashboard-bottom-grid>.card {border-radius:24px;}
  @media (min-width:1150px) {
    html[data-theme="dark"] .sidebar {border-radius:25px;}
  }
  @media (max-width:760px) {
    .topbar {margin:0;border-radius:0!important;min-height:58px;padding:9px 13px!important;}
    .page-content {padding:14px 12px 20px!important;}
    .finance-dashboard-v81 .finance-kpi-card {min-height:108px;padding:15px 13px;}
    .finance-dashboard-v81 .finance-kpi-icon {width:40px;height:40px;flex-basis:40px;}
    .finance-dashboard-v81 .finance-kpi-card strong {font-size:clamp(15px,4vw,21px)!important;}
    .dashboard-welcome-card {padding:16px!important;}
  }
  @media (prefers-reduced-motion:reduce) {
    .finance-dashboard-v81 .finance-kpi-card,.sidebar-link {transition:none;}
    .finance-dashboard-v81 .finance-kpi-card:hover,.sidebar-link:hover {transform:none;}
  }
}