/* Sollar.IO brand board: solar gold, petroleum blue, navy and Inter.
   Screen-only styling leaves the commercial proposal's print contract intact. */
@media screen {
  :root {
    --sio-navy-950: #05131f;
    --sio-navy-800: #003c53;
    --sio-slate-600: #64748b;
    --sio-surface-soft: #edf2f6;
    --sio-border: #e2e8f0;
    --sio-solar-500: #ffb703;
    --sio-radius: 16px;
    --sio-sidebar-width: 258px;
    --sio-shadow: 0 4px 8px #142f4403, 0 16px 40px #142f4406;
    --sio-solar: #ffb703;
    --sio-solar-light: #ffd16a;
    --sio-petroleum: #003c53;
    --sio-display: "Inter", "Segoe UI Variable Display", sans-serif;
    --sio-body: "Inter", "Segoe UI Variable Text", sans-serif;
    --sio-spring: cubic-bezier(.32,.72,0,1);
    font-family: var(--sio-body);
  }
  body { -webkit-font-smoothing: antialiased; }
  .app-shell { background: #05131f; padding: 0 12px 12px 0; }
  .main-scroll { background: var(--bg); border-radius: 18px; }
  .app-shell .topbar { border-color: #ffffff12; margin-top: 4px; }
  .topbar h1 { color: #f8fafc; }
  .topbar .eyebrow { color: #c3cfda; }
  .topbar .profile-summary { background: #ffffff08; border-color: #ffffff14; box-shadow: none; color: #f8fafc; }
  .topbar .profile-copy span { color: #acbfcd; }
  .topbar .profile-avatar { background: #ffb703; color: #0f172a; }
  /* Use the alpha of the supplied logo; no redrawing of the mark or lettering. */
  .brand-logo {
    position: relative;
    width: 190px;
    height: 64px;
    background: #fff;
    mask: url("./assets/brand-v2/sollar-logo-original.png") center / contain no-repeat;
    -webkit-mask: url("./assets/brand-v2/sollar-logo-original.png") center / contain no-repeat;
  }
  .brand-logo::after { content: ""; position: absolute; inset: 0; background: var(--yellow); clip-path: polygon(0 0, 25% 0, 25% 100%, 0 100%, 0 0, 77% 0, 100% 0, 100% 100%, 77% 100%, 77% 0); }
  .brand-logo-light { background: #0f172a; }
  .brand-mark { background-image: url("./assets/brand-v2/app-icon.png"); background-size: contain; background-position: center; border-radius: 10px; }
  .nav-icon { width: 18px; height: 18px; flex: 0 0 18px; background: currentColor; mask: var(--nav-icon) center / contain no-repeat; -webkit-mask: var(--nav-icon) center / contain no-repeat; opacity: .9; }
  [data-view="dashboard"] { --nav-icon: url("./assets/brand-v2/icons/house.svg"); }
  [data-view="opportunities"] { --nav-icon: url("./assets/brand-v2/icons/target.svg"); }
  [data-view="invoices"] { --nav-icon: url("./assets/brand-v2/icons/receipt.svg"); }
  [data-view="catalog"] { --nav-icon: url("./assets/brand-v2/icons/cube.svg"); }
  [data-view="projects"] { --nav-icon: url("./assets/brand-v2/icons/folder.svg"); }
  [data-view="payables"] { --nav-icon: url("./assets/brand-v2/icons/wallet.svg"); }
  [data-view="revenues"] { --nav-icon: url("./assets/brand-v2/icons/trend-up.svg"); }
  [data-view="cashflow"] { --nav-icon: url("./assets/brand-v2/icons/chart-line.svg"); }
  [data-view="users"] { --nav-icon: url("./assets/brand-v2/icons/users.svg"); }
  [data-view="suppliers"] { --nav-icon: url("./assets/brand-v2/icons/truck.svg"); }
  [data-view="catalogImport"] { --nav-icon: url("./assets/brand-v2/icons/download-simple.svg"); }
  [data-view="settings"] { --nav-icon: url("./assets/brand-v2/icons/gear-six.svg"); }
  [data-view="privacy"] { --nav-icon: url("./assets/brand-v2/icons/shield-check.svg"); }
  [data-view="audit"] { --nav-icon: url("./assets/brand-v2/icons/clock-counter-clockwise.svg"); }
  .dashboard-brand-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; border-radius: 14px; color: #f8fafc; background: linear-gradient(90deg, #003c53f2, #05131fbb 50%, #05131f22), url("./assets/brand-v2/solar-horizon.png") center 61% / cover no-repeat #003c53; }
  .dashboard-brand-intro .eyebrow { color: #ffd16a; margin-bottom: 8px; }
  .dashboard-brand-intro h2 { font-size: 1.45rem; margin: 0 0 8px; }
  .dashboard-brand-intro p:last-child { color: #cbd5e1; font-size: .79rem; margin-bottom: 0; }
  .dashboard-brand-caption { font-size: .68rem; line-height: 1.6; text-align: right; text-shadow: 0 1px 5px #000; flex-shrink: 0; }
  h1, h2, h3 { font-family: var(--sio-display); letter-spacing: -.025em; text-wrap: balance; }
  h1 { font-weight: 600; }
  h2 { font-size: 1.13rem; font-weight: 600; }
  ::selection { background: #ffe4a3; color: var(--ink); }
  :focus-visible { outline: 3px solid var(--sio-petroleum); outline-offset: 3px; }
  .sidebar :focus-visible, .login-copy :focus-visible { outline-color: var(--sio-solar-light); }
  .eyebrow { color: var(--sio-petroleum); font-size: .65rem; letter-spacing: .13em; font-weight: 800; }

  /* The navy frame anchors the workspace; the content remains light and dense. */
  .sidebar {
    margin: 12px 0 12px 12px;
    border-radius: 22px;
    padding: 24px 14px;
    gap: 28px;
    background: radial-gradient(ellipse at top left, #163648, transparent 55%), var(--sidebar-bg);
    border: 1px solid #94dadd1a;
    box-shadow: inset 0 1px #ffffff0d;
    scrollbar-width: thin;
    scrollbar-color: #345466 transparent;
  }
  .sidebar .brand { flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 10px; }
  .sidebar .brand .brand-logo + div strong { display: none; }
  .sidebar .brand small { color: #b3c7d4; font-size: .72rem; margin: 0; }
  .nav-list { gap: 22px; }
  .nav-group { gap: 4px; }
  .nav-group-label { color: #8eaaba; letter-spacing: .14em; font-size: .6rem; margin-bottom: 5px; }
  .nav-item {
    position: relative;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 12px;
    color: #c1d1dc;
    font-size: .8rem;
    font-weight: 600;
    background: transparent;
    transition: transform 220ms var(--sio-spring), background-color 220ms var(--sio-spring), color 220ms var(--sio-spring);
  }
  .nav-item:hover { color: #fff; background: #ffffff09; border-color: transparent; transform: translateX(2px); }
  .nav-item.active { background: #ffb70316; color: var(--sio-solar-light); border-color: #ffb70323; box-shadow: inset 0 1px #ffffff05; }
  .nav-item.active::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sio-solar); margin-left: auto; flex-shrink: 0; }
  .topbar { margin: 12px 20px 0; padding: 12px 6px 18px; min-height: 80px; background: transparent; box-shadow: none; border-color: var(--line); }
  .topbar h1 { font-size: 1.6rem; }
  .profile-summary { border-radius: 999px; padding: 6px 14px 6px 6px; border-color: #e2e8f080; box-shadow: var(--shadow); }
  .profile-avatar { background: #fff2d1; color: var(--sio-petroleum); width: 36px; height: 36px; font-family: var(--sio-display); }
  .profile-menu[open] .profile-popover { animation: sio-enter 200ms var(--sio-spring); }
  .main-scroll { padding: 24px 26px; }
  .view { gap: 20px; }
  .panel, .card { border-radius: 16px; border-color: #e2e8f099; box-shadow: var(--shadow), inset 0 1px #fff; }
  .panel { padding: 20px; }
  .panel > h2 { margin-bottom: 20px; }
  .flow-header { gap: 22px; }
  .flow-header h2 { font-size: 1.4rem; }
  .page-header { gap: 20px; }
  .page-header > div { min-width: 0; }
  .view[data-view="dashboard"] > .page-header { display: grid; grid-template-columns: minmax(0, 1fr); }
  .view[data-view="dashboard"] .page-actions { width: 100%; }
  .dashboard-period-form { width: 100%; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; padding: 14px; border: 1px solid #e2e8f099; border-radius: 14px; background: #ffffff80; }
  .dashboard-period-form:has([name="startDate"]:enabled) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid { gap: 16px; }
  .metric, .metric-card { padding: 20px; border-radius: 16px; min-height: 116px; }
  .metric span, .metric-card span { color: var(--muted); font-size: .75rem; font-weight: 600; }
  .metric strong, .metric-card strong { font-family: var(--sio-display); font-weight: 600; font-size: clamp(1.35rem, 2vw, 1.85rem); letter-spacing: -.045em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .view[data-view="dashboard"] > .grid.four:first-of-type {
    background: radial-gradient(ellipse at top right, #14435b, transparent 65%), var(--sio-navy-800);
    padding: 8px;
    border-radius: 22px;
    gap: 6px;
    box-shadow: inset 0 1px #ffffff1a, 0 12px 32px #003c530d;
  }
  .view[data-view="dashboard"] > .grid.four:first-of-type .metric { color: #fff; background: #ffffff04; border: 1px solid #ffffff08; box-shadow: inset 0 1px #ffffff05; }
  .view[data-view="dashboard"] > .grid.four:first-of-type .metric span { color: #b7ced8; }
  .view[data-view="dashboard"] > .grid.four:first-of-type .metric strong { color: #fff; }
  .view[data-view="dashboard"] > .grid.four:first-of-type .metric:first-child strong { color: var(--sio-solar-light); }
  .summary-row { padding-block: 12px; border-color: #e2e8f080; font-size: .81rem; }
  .summary-row strong, .cell-money { font-variant-numeric: tabular-nums; }
  .summary-row strong { font-weight: 700; }
  .record-header { border-radius: 18px; border-color: var(--line); background: linear-gradient(120deg, #fff, #eef4f8); }
  .context-nav, .detail-tabs { border-radius: 14px; }
  .tab-button { border-radius: 10px; min-height: 44px; }
  .stage-chip-circle { transition: transform 200ms var(--sio-spring), background-color 200ms var(--sio-spring); }
  .stage-chip:hover .stage-chip-circle { transform: translateY(-2px); }
  .notice, .empty-state, .metric-card, .check-row { border-radius: 12px; }
  .empty-state { background: #f6f9fa; }
  .data-table { border-radius: 14px; }
  .data-table th { background: #f2f6f7; color: var(--muted); font-size: .71rem; font-weight: 700; }
  .data-table td { border-color: #e2e8f080; }
  .data-table tbody tr:hover { background: #fff9e9; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 44px; border-radius: 10px; border-color: #d3dfe5; background: #fcfdfd; }
  input:focus, select:focus, textarea:focus { border-color: var(--sio-petroleum); box-shadow: 0 0 0 3px #ffb70313; }
  .btn { min-height: 44px; border-radius: 10px; padding: 10px 18px; font-size: .8rem; font-weight: 800; background: var(--yellow); color: var(--ink); box-shadow: inset 0 1px #ffffff52, 0 4px 10px #ffb70319; transition: transform 200ms var(--sio-spring), background-color 200ms var(--sio-spring), box-shadow 200ms var(--sio-spring); }
  .btn:hover, .btn:focus-visible { transform: translateY(-1px); filter: none; box-shadow: 0 5px 16px #142f4412; }
  .btn:active { transform: scale(.98); }
  .btn.secondary { background: #fff; color: #31495a; border-color: var(--line); box-shadow: inset 0 1px #fff; }
  .btn.danger { background: #b42318; color: #fff; }
  .btn.warning { background: #fff0c4; color: #674b08; }
  .btn:disabled { transform: none; box-shadow: none; opacity: .55; }
  .drawer-panel { border-radius: 24px 0 0 24px; animation: sio-drawer 260ms var(--sio-spring); }
  .menu-toggle { width: 44px; height: 44px; border-radius: 12px; position: relative; }
  .menu-toggle span { transition: transform 240ms var(--sio-spring), opacity 160ms var(--sio-spring); }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* Public entry: the portfolio's editorial split, scaled for a login task. */
  .login-screen {
    min-height: 100dvh;
    padding: clamp(24px, 6vw, 88px);
    background: linear-gradient(90deg, #03121df5 0%, #03121dde 35%, #03121d77 70%, #03121d33), url("./assets/brand-v2/solar-horizon.png") center / cover no-repeat #05131f;
  }
  .login-layout { width: min(1120px, 100%); grid-template-columns: minmax(0, 1.2fr) minmax(320px, .85fr); gap: clamp(32px, 7vw, 110px); }
  .login-copy { gap: 18px; min-width: 0; }
  .login-copy .brand-logo { width: min(360px, 100%); height: 120px; margin-bottom: 14px; }
  .login-copy .eyebrow { color: #97cbd2; font-size: .64rem; letter-spacing: .16em; margin: 0; }
  .login-copy .login-product-name { font-family: var(--sio-display); color: #bfd0da; font-size: .95rem; margin: 0 0 -8px; }
  .login-copy h1 { font-size: clamp(2.3rem, 3.7vw, 3.55rem); line-height: 1.12; letter-spacing: -.05em; }
  .login-copy h1 span { color: var(--sio-solar-light); }
  .login-copy p { margin-bottom: 0; font-size: .95rem; color: #c5d6df; line-height: 1.7; }
  .login-copy .login-description { max-width: 390px; color: #95acbb; font-size: .84rem; margin-top: -6px; }
  .login-environment { border: 1px solid #ffd16a18; border-radius: 12px; padding: 12px 16px; background: #ffffff04; margin-top: 6px; }
  .login-environment span { color: #93b3c4; font-size: .58rem; letter-spacing: .14em; }
  .login-environment strong { font-size: .8rem; font-weight: 600; }
  .login-workflow { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 20px; padding-top: 22px; border-top: 1px solid #ffd16a18; }
  .login-workflow span { color: #82c7cd; font-size: .65rem; display: flex; gap: 8px; }
  .login-workflow b { color: #afc5d2; font-weight: 500; }
  .login-card { position: relative; gap: 20px; border: 1px solid #ffffff70; border-radius: 24px; padding: clamp(24px, 3vw, 40px); background: #f9fbfc; box-shadow: 0 0 0 8px #ffffff05, 0 0 0 9px #b0e4e310, 0 24px 60px #00000014; }
  .login-card-eyebrow { color: var(--sio-petroleum); text-transform: uppercase; letter-spacing: .14em; font-size: .59rem; font-weight: 800; }
  .login-card h2 { font-size: 1.8rem; line-height: 1.15; margin: -6px 0 -10px; }
  .login-card p { font-size: .79rem; line-height: 1.6; margin: 0; }
  .login-card label { color: #31495a; font-size: .76rem; font-weight: 700; gap: 9px; }
  .login-card input { background: #fff; min-height: 50px; font-size: 1rem; }
  .login-card .btn { min-height: 50px; margin-top: 4px; }
  .login-feedback { overflow-wrap: anywhere; }
  .login-security { padding-top: 16px; border-top: 1px solid var(--line); font-size: .66rem; color: var(--muted); text-align: center; }
  .login-layout.compact h1 { font-size: clamp(2rem, 3.5vw, 3rem); }
  @keyframes sio-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes sio-drawer { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
  @media (prefers-reduced-motion: no-preference) {
    .login-copy { animation: sio-enter 600ms var(--sio-spring); }
    .login-card { animation: sio-enter 600ms 80ms var(--sio-spring) backwards; }
  }
  @media (max-width: 1100px) and (min-width: 901px) {
    :root { --sio-sidebar-width: 220px; }
    .main-scroll { padding: 20px; }
    .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 900px) {
    .app-shell { padding: 0 10px 10px; }
    .sidebar { margin: 8px; border-radius: 20px; visibility: hidden; transition: transform 280ms var(--sio-spring), visibility 280ms; }
    .sidebar.menu-open { visibility: visible; }
    .sidebar-backdrop { display: block; visibility: hidden; opacity: 0; transition: opacity 220ms var(--sio-spring), visibility 220ms; }
    .sidebar-backdrop.is-open { visibility: visible; opacity: 1; }
    .topbar { margin: 0 14px; padding: 14px 0; gap: 12px; }
    .main-scroll { padding: 18px 14px; }
    .login-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr); gap: 32px; }
    .login-screen { padding: 32px; }
    .login-copy h1 { font-size: 2.6rem; }
    .login-workflow { gap: 12px; }
  }
  @media (max-width: 640px) {
    .app-shell { padding: 0; }
    .main-scroll { border-radius: 18px 18px 0 0; }
    .dashboard-brand-intro { padding: 20px; }
    .dashboard-brand-intro h2 { font-size: 1.2rem; }
    .dashboard-brand-caption { display: none; }
    .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-period-form, .dashboard-period-form:has([name="startDate"]:enabled) { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
    .dashboard-period-form .btn { width: 100%; }
    .login-screen { padding: 32px 22px; }
    .login-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 440px; }
    .login-copy { gap: 12px; }
    .login-copy .brand-logo { width: 235px; height: 78px; margin-bottom: 8px; }
    .login-copy h1 { font-size: clamp(1.95rem, 8.3vw, 2.65rem); }
    .login-copy .login-description, .login-workflow { display: none; }
    .login-copy .login-product-name { margin-bottom: 0; }
    .login-environment { margin-top: 0; padding: 8px 12px; }
    .login-card { padding: 24px; gap: 18px; border-radius: 20px; }
    .login-card h2 { font-size: 1.6rem; }
    .topbar h1 { font-size: 1.35rem; }
    .topbar .eyebrow { font-size: .57rem; letter-spacing: .08em; }
    .view { gap: 16px; }
    .panel { padding: 16px; border-radius: 14px; }
    .grid { gap: 12px; }
    .metric, .metric-card { min-height: 96px; padding: 16px; }
    .metric strong, .metric-card strong { font-size: 1.5rem; }
    .drawer-panel { border-radius: 20px 20px 0 0; }
    .profile-summary { max-width: 100%; }
    .btn, .tab-button, .back-button.compact { min-height: 44px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
}