/* =========================================================================
       REFINED DESIGN SYSTEM: INTER TYPOGRAPHY & FINTECH PALETTES
       ========================================================================= */
    body {
      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    :root {
      --font-tabular: tabular-nums lining-nums;
    }

    /* Tabular numbers for perfect spreadsheet alignment with Inter */
    .budget-number,
    .font-mono,
    .budget-grid-input,
    td,
    th,
    input[type="text"] {
      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-variant-numeric: tabular-nums lining-nums;
      font-feature-settings: "tnum" 1, "lnum" 1;
      letter-spacing: -0.01em;
    }

    /* Standard Budget Row typography: Inter 13px / 500 */
    tr.data-row td,
    tr.sub-item-row td,
    tr.data-row .sticky-col-left,
    tr.sub-item-row .sticky-col-left,
    tr.data-row span.row-name,
    tr.sub-item-row span.row-name,
    .budget-grid-input,
    .row-name {
      font-size: 13px !important;
      font-weight: 500 !important;
      line-height: 1rem;
    }

    /* Category Row typography: Inter 13px / 600 */
    tr.cat-header-row,
    tr.cat-header-row td,
    tr.cat-header-row .sticky-col-left,
    tr.cat-header-row span.category-name,
    .category-name {
      font-size: 13px !important;
      font-weight: 600 !important;
      line-height: 1rem;
      letter-spacing: 0.01em;
    }

    /* Table header */
    .budget-table thead th {
      font-size: 13px;
      font-weight: 600;
      line-height: 1rem;
    }

    /* Summary rows typography */
    tr.total-row-inc td,
    tr.total-row-exp td,
    tr.total-row-net td {
      font-size: 13px !important;
      font-weight: 600 !important;
      line-height: 1rem;
    }

    /* -------------------------------------------------------------------------
       1. LIGHT MODE PALETTE (Fintech Controller Aesthetic, Slate Canvas, Crisp Surfaces)
       ------------------------------------------------------------------------- */
    html.light {
      color-scheme: light;
      --bg-page: #F1F5F9;
      --bg-surface: #FFFFFF;
      --bg-header: #F8FAFC;
      --bg-section: #F1F5F9;
      --bg-hover: #F8FAFC;
      --bg-summary: #F1F5F9;
      --border-subtle: #E2E8F0;
      --border-strong: #CBD5E1;
      --text-primary: #1E293B;
      --text-secondary: #475569;
      --text-muted: #64748B;
      --color-pos: #047857;
      --bg-pos: #ECFDF5;
      --color-neg: #BE123C;
      --bg-neg: #FFF1F2;
      --color-focus: #059669;
      --bg-focus: #ECFDF5;
      --color-warn: #A16207;
      --bg-warn: #FEF3C7;
      --bg-selected-row: #ECFDF5;
      --border-selected-row: #10B981;
    }

    html.light, html.light body {
      background-color: #F1F5F9 !important;
      color: #1E293B !important;
    }

    /* Light Mode Scrollbars */
    html.light ::-webkit-scrollbar-track {
      background: #F1F5F9 !important;
    }
    html.light ::-webkit-scrollbar-thumb {
      background: #CBD5E1 !important;
    }
    html.light ::-webkit-scrollbar-thumb:hover {
      background: #94A3B8 !important;
    }

    /* Light Mode Layout & Main Canvas */
    html.light #mainContainer,
    html.light #mobileMonthView,
    html.light #mobileAnalysisView {
      background-color: #F1F5F9 !important;
    }

    html.light header {
      background-color: #FFFFFF !important;
      border-bottom: 1px solid #E2E8F0 !important;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
    }

    html.light #monthNavToolbar {
      background-color: #FFFFFF !important;
      border-bottom: 1px solid #E2E8F0 !important;
    }

    html.light #matrixViewContainer {
      background-color: #F1F5F9 !important;
    }

    html.light #matrixViewContainer table,
    html.light .budget-table {
      background-color: #FFFFFF !important;
      border: 1px solid #E2E8F0 !important;
      border-radius: 12px;
      box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.05);
      border-collapse: separate !important;
      border-spacing: 0 !important;
      font-size: 13px !important;
    }

    /* Cell borders in Light Mode */
    html.light .budget-table th,
    html.light .budget-table td {
      border-bottom: 1px solid #E2E8F0 !important;
      border-top: none !important;
      border-right: 1px solid #E2E8F0 !important;
      border-left: none !important;
    }

    /* Sticky columns & headers */
    html.light .sticky-col-left {
      background-color: #F8FAFC !important;
      border-right: 1px solid #E2E8F0 !important;
      color: #1E293B !important;
    }

    html.light thead th {
      background-color: #F8FAFC !important;
      color: #475569 !important;
      border-bottom: 2px solid #CBD5E1 !important;
      font-size: 13px !important;
    }

    /* Category Header Section Rows */
    html.light tr.cat-header-row,
    html.light tr.cat-header-row td {
      background-color: #F1F5F9 !important;
      border-top: 2px solid #CBD5E1 !important;
      border-bottom: 1px solid #E2E8F0 !important;
      color: #1E293B !important;
      font-weight: 600 !important;
    }
    html.light tr.cat-header-row .sticky-col-left {
      background-color: #F1F5F9 !important;
      color: #1E293B !important;
    }

    /* Data Rows & Hover */
    html.light tr.data-row td {
      background-color: #FFFFFF;
      color: #1E293B !important;
    }
    html.light tr.data-row:hover td,
    html.light tr.data-row:hover .sticky-col-left {
      background-color: #F8FAFC !important;
    }

    /* Sub-items Rows */
    html.light tr.sub-item-row,
    html.light tr.sub-item-row td {
      background-color: #F8FAFC !important;
      border-left: 2px solid #CBD5E1 !important;
      color: #1E293B !important;
    }
    html.light tr.sub-item-row .sticky-col-left {
      background-color: #F8FAFC !important;
      color: #1E293B !important;
    }

    /* Info / Mortgage Rows in Light Mode */
    html.light tr.sub-item-row.sub-info,
    html.light tr.sub-item-row.sub-info td,
    html.light tr.sub-item-row.sub-info .sticky-col-left {
      background-color: #F0F9FF !important;
      color: #075985 !important;
      border-left-color: #BAE6FD !important;
    }
    html.light tr.sub-item-row.sub-formula,
    html.light tr.sub-item-row.sub-formula td,
    html.light tr.sub-item-row.sub-formula .sticky-col-left {
      background-color: #ECFDF5 !important;
      color: #047857 !important;
      border-left-color: #10B981 !important;
    }

    /* HELÅR & SNITT/MÅN Columns (Light Mode: #F1F5F9 with text #1E293B and left divider #CBD5E1) */
    html.light .col-summary-year,
    html.light .col-summary-avg {
      background-color: #F1F5F9 !important;
      color: #1E293B !important;
      font-weight: 600 !important;
    }
    html.light .col-summary-year {
      border-left: 2px solid #CBD5E1 !important;
    }

    /* Cell Focus & Inputs in Light Mode */
    html.light .budget-cell.cell-focused {
      box-shadow: inset 0 0 0 2px #059669 !important;
      background-color: #ECFDF5 !important;
    }
    html.light .budget-grid-input {
      color: #1E293B !important;
      font-size: 13px !important;
    }
    html.light .budget-grid-input:focus {
      background-color: #ECFDF5 !important;
    }
    html.light .fill-handle {
      background-color: #059669 !important;
      border: 1px solid #FFFFFF !important;
    }

    /* Positive Financial Rows (Incomes) in Light Mode */
    html.light tr.total-row-inc,
    html.light tr.total-row-inc td {
      background-color: #ECFDF5 !important;
      color: #047857 !important;
      border-top: 2px solid #059669 !important;
      font-size: 13px !important;
    }
    html.light tr.total-row-inc .sticky-col-left {
      background-color: #ECFDF5 !important;
      color: #047857 !important;
    }

    /* Outflow Financial Rows (Expenses) in Light Mode */
    html.light tr.total-row-exp,
    html.light tr.total-row-exp td {
      background-color: #FFF1F2 !important;
      color: #BE123C !important;
      border-top: 2px solid #E11D48 !important;
      font-size: 13px !important;
    }
    html.light tr.total-row-exp .sticky-col-left {
      background-color: #FFF1F2 !important;
      color: #BE123C !important;
    }

    /* Net Cashflow Row in Light Mode */
    html.light tr.total-row-net,
    html.light tr.total-row-net td {
      background-color: #FFFFFF !important;
      border-top: 2px solid #1E293B !important;
      font-size: 13.5px !important;
    }
    html.light tr.total-row-net .sticky-col-left {
      background-color: #FFFFFF !important;
      color: #1E293B !important;
    }
    html.light tr.total-row-net td.net-pos {
      background-color: #ECFDF5 !important;
      color: #047857 !important;
    }
    html.light tr.total-row-net td.net-neg {
      background-color: #FFF1F2 !important;
      color: #BE123C !important;
    }

    /* Header controls & buttons in Light Mode */
    html.light #userAuthBtn,
    html.light #syncStatusBtn,
    html.light #undoBtn,
    html.light #themeToggleBtn,
    html.light #mobileToolsMenuBtn,
    html.light #budgetYearSelect,
    html.light #budgetProfileSelect {
      background-color: #FFFFFF !important;
      color: #1E293B !important;
      border-color: #E2E8F0 !important;
    }
    html.light #userAuthBtn:hover,
    html.light #syncStatusBtn:hover,
    html.light #undoBtn:hover,
    html.light #themeToggleBtn:hover,
    html.light #mobileToolsMenuBtn:hover {
      background-color: #F8FAFC !important;
      border-color: #CBD5E1 !important;
    }
    html.light input:not([type="checkbox"]):not([type="radio"]):not(.budget-grid-input),
    html.light select,
    html.light textarea {
      background-color: #FFFFFF !important;
      color: #1E293B !important;
      border-color: #CBD5E1 !important;
    }

    /* Modal Backdrop in Light Mode */
    html.light .bg-black\/80,
    html.light .bg-black\/85,
    html.light .bg-black\/90 {
      background-color: rgba(15, 23, 42, 0.45) !important;
    }

    /* -------------------------------------------------------------------------
       2. REFINED DARK MODE PALETTE
       ------------------------------------------------------------------------- */
    html.dark {
      color-scheme: dark;
      --bg-page: #070B14;
      --bg-surface: #0B1120;
      --bg-row-alt: #101A2C;
      --bg-header: #0F172A;
      --bg-section: #1A2942;
      --bg-subitem: #0D1728;
      --bg-hover: #1B2B45;
      --bg-summary: #142039;
      --border-subtle: #202C40;
      --border-row: #26344A;
      --border-strong: #40506A;
      --text-primary: #E7EDF6;
      --text-secondary: #A3AFC0;
      --text-muted: #8290A6;
      --color-pos: #34D399;
      --bg-pos: #0B2922;
      --color-neg: #FB7185;
      --bg-neg: #32121C;
      --color-focus: #60A5FA;
      --bg-focus: rgba(96, 165, 250, 0.15);
    }

    html.dark, html.dark body {
      background-color: #070B14 !important;
      color: #E7EDF6 !important;
    }

    html.dark header,
    html.dark #matrixViewContainer,
    html.dark .bg-slate-950 {
      background-color: #0B1120 !important;
    }

    html.dark #monthNavToolbar {
      background-color: var(--bg-header) !important;
      border-color: var(--border-subtle) !important;
    }

    html.dark tr.cat-header-row,
    html.dark tr.cat-header-row td,
    html.dark tr.cat-header-row .sticky-col-left {
      background-color: var(--bg-section) !important;
      border-top: 2px solid var(--border-strong) !important;
      border-bottom: 1px solid var(--border-row) !important;
      color: var(--text-primary) !important;
    }

    html.dark tr.data-row td,
    html.dark tr.data-row .sticky-col-left {
      background-color: var(--bg-surface);
      border-bottom: 1px solid var(--border-row) !important;
    }

    html.dark tr.data-row.row-alt td,
    html.dark tr.data-row.row-alt .sticky-col-left {
      background-color: var(--bg-row-alt);
    }

    html.dark tr.data-row:hover td,
    html.dark tr.data-row:hover .sticky-col-left {
      background-color: var(--bg-hover) !important;
    }

    html.dark tr.sub-item-row,
    html.dark tr.sub-item-row td {
      background-color: var(--bg-subitem) !important;
      border-left: 2px solid var(--border-strong) !important;
      border-bottom: 1px solid var(--border-subtle) !important;
    }

    /* Mobilens månadskort använder samma hierarki som helårstabellen. */
    html.dark #mobileMonthView .mobile-category-card {
      background-color: var(--bg-surface) !important;
      border-color: var(--border-row) !important;
      box-shadow: 0 8px 22px rgba(2, 6, 23, 0.24);
    }
    html.dark #mobileMonthView .mobile-category-header {
      background-color: var(--bg-section) !important;
      border-bottom: 1px solid var(--border-strong) !important;
    }
    html.dark #mobileMonthView .mobile-category-rows {
      background-color: var(--bg-surface) !important;
    }
    html.dark #mobileMonthView .mobile-budget-row {
      background-color: var(--bg-surface);
    }
    html.dark #mobileMonthView .mobile-budget-row.mobile-row-alt {
      background-color: var(--bg-row-alt);
    }
    html.dark #mobileMonthView .mobile-budget-row:hover,
    html.dark #mobileMonthView .mobile-budget-row:active {
      background-color: var(--bg-hover) !important;
    }
    html.dark #mobileMonthView .mobile-budget-row + .mobile-budget-row {
      border-top: 1px solid var(--border-row) !important;
    }
    html.dark #mobileMonthView .mobile-subitems {
      border-left-color: var(--border-strong) !important;
    }
    html.dark #mobileMonthView .mobile-subitem-card {
      background-color: var(--bg-subitem) !important;
      border-color: var(--border-subtle) !important;
    }
    html.dark #mobileMonthView .mobile-amount-control:focus-within {
      border-color: var(--color-focus) !important;
      box-shadow: 0 0 0 2px var(--bg-focus);
    }

    html.dark .col-summary-year,
    html.dark .col-summary-avg {
      background-color: var(--bg-summary) !important;
      color: var(--text-primary) !important;
      font-weight: 600 !important;
    }
    html.dark .col-summary-year {
      border-left: 2px solid var(--border-strong) !important;
    }

    html.dark tr.data-row .sticky-col-left,
    html.dark tr.sub-item-row .sticky-col-left,
    html.dark tr.cat-header-row .sticky-col-left {
      border-right: 2px solid var(--border-strong) !important;
    }

    html.dark tr.data-row td.cell-paid {
      background-color: rgba(16, 185, 129, 0.08) !important;
    }

    html.dark tr.total-row-exp .sticky-col-left {
      color: var(--text-primary) !important;
    }

    html.dark .budget-cell.cell-focused {
      box-shadow: inset 0 0 0 2px #60A5FA !important;
      background-color: rgba(96, 165, 250, 0.15) !important;
    }
    /* Scrollbars */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-track {
      background: #0f172a;
    }
    ::-webkit-scrollbar-thumb {
      background: #334155;
      border-radius: 3px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #475569;
    }

    /* Fixed table elements */
    .sticky-col-left {
      position: sticky;
      left: 0;
      z-index: 20;
    }
    .sticky-header {
      position: sticky;
      top: 0;
      z-index: 30;
    }
    .sticky-header th {
      position: sticky;
      top: 0;
      z-index: 30;
      background-color: #F8FAFC;
    }
    html.dark .sticky-header th {
      background-color: var(--bg-header);
      border-bottom: 2px solid var(--border-strong) !important;
    }
    .sticky-header th.sticky-col-left {
      z-index: 35;
      background-color: #F8FAFC;
    }
    html.dark .sticky-header th.sticky-col-left {
      background-color: var(--bg-header);
      border-right: 2px solid var(--border-strong) !important;
    }

    /* Drag & Drop Visual cues */
    .drop-line-top {
      border-top: 3px solid #10b981 !important;
      background-color: rgba(16, 185, 129, 0.08) !important;
    }
    .drop-line-bottom {
      border-bottom: 3px solid #10b981 !important;
      background-color: rgba(16, 185, 129, 0.08) !important;
    }
    .drop-group-target {
      outline: 2px dashed #10b981 !important;
      background-color: rgba(16, 185, 129, 0.18) !important;
    }
    .dragging-row {
      opacity: 0.35;
    }

    /* Cell styling & Excel Fill Handle */
    .budget-cell {
      position: relative;
    }
    .budget-cell.cell-focused {
      box-shadow: inset 0 0 0 2px #10b981;
      background-color: rgba(16, 185, 129, 0.12);
    }
    .budget-cell.cell-fill-target {
      background-color: rgba(16, 185, 129, 0.25) !important;
      outline: 2px dashed #10b981;
    }

    /* Autofill Square Handle */
    .fill-handle {
      position: absolute;
      right: -1px;
      bottom: -1px;
      width: 8px;
      height: 8px;
      background-color: #10b981;
      border: 1px solid #ffffff;
      cursor: crosshair;
      z-index: 25;
      display: none;
    }
    .budget-cell.cell-focused:not(.cell-paid) .fill-handle {
      display: block;
    }

    /* Quick Fill-Forward Action Pill */
    .fill-forward-btn {
      position: absolute;
      bottom: -24px;
      right: 0;
      z-index: 25;
      display: none;
    }
    .budget-cell.cell-focused:not(:hover) .fill-forward-btn,
    .budget-cell.cell-focused .fill-forward-btn {
      display: flex;
    }

    /* Utfalls- / Betalstatus & Låsning */
    .cell-paid {
      background-color: rgba(16, 185, 129, 0.08);
      position: relative;
    }
    .cell-forecast {
      position: relative;
    }
    .cell-partial {
      position: relative;
    }
    .paid-check-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.15s ease;
      z-index: 10;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0;
    }
    .budget-cell:hover .paid-check-btn,
    .cell-paid .paid-check-btn,
    .cell-partial .paid-check-btn {
      opacity: 1;
    }
    .paid-check-icon {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      transition: all 0.15s ease;
    }
    .cell-paid-indicator {
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: #10b981;
      position: absolute;
      left: 3px;
      top: 3px;
    }
    .month-header-paid-btn {
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0;
    }

    /* Pulse animation for remote real-time update */
    @keyframes remoteSyncPulse {
      0% { background-color: rgba(16, 185, 129, 0.4); }
      100% { background-color: transparent; }
    }
    .remote-updated {
      animation: remoteSyncPulse 1.2s ease-out;
    }

    /* PRINT / BANK PDF STYLING */
    @media print {
      body {
        background: #ffffff !important;
        color: #000000 !important;
        overflow: visible !important;
      }
      header, .status-bar, button, .fill-handle, .fill-forward-btn, #toast, .paid-check-btn, #chartModal, #spreadModal, #syncModal, #backupModal, #monthNavToolbar, #mobileRowActionModal, #appUpdateBanner {
        display: none !important;
      }
      #mobileMonthView, #mobileAnalysisView {
        display: none !important;
      }
      #matrixViewContainer {
        display: block !important;
      }
      .sticky-col-left, .sticky-header {
        position: static !important;
        background: #f8fafc !important;
        color: #0f172a !important;
      }
      table {
        font-size: 8pt !important;
        width: 100% !important;
        border-collapse: collapse !important;
      }
      th, td {
        border: 1px solid #cbd5e1 !important;
        color: #0f172a !important;
        padding: 4px 6px !important;
        background: transparent !important;
      }
      .print-header {
        display: block !important;
        margin-bottom: 12px;
      }
      .print-header h1 {
        font-size: 18pt;
        font-weight: bold;
        color: #0f172a;
      }
      .print-header p {
        font-size: 10pt;
        color: #475569;
      }
    }
    .print-header {
      display: none;
    }
    html.dark select { color-scheme: dark; }
    html.light select { color-scheme: light; }
    html.dark select option, html.dark select optgroup { background: #0f172a; color: #e2e8f0; }
    html.light select option, html.light select optgroup { background: #fff; color: #0f172a; }

/* Mina budgetar och personväljare */

.bp-dialog{--bp-bg:#fff;--bp-panel:#f8fafc;--bp-line:#e2e8f0;--bp-ink:#0f172a;--bp-muted:#64748b;font-family:Inter,system-ui,sans-serif;width:min(740px,calc(100vw - 24px));max-height:90dvh;margin:auto;padding:24px;border:1px solid var(--bp-line);border-radius:20px;background:var(--bp-bg);color:var(--bp-ink);box-shadow:0 24px 80px #02061740}
.dark .bp-dialog{--bp-bg:#0b1120;--bp-panel:#0f172a;--bp-line:#334155;--bp-ink:#e2e8f0;--bp-muted:#94a3b8;color-scheme:dark}
.bp-dialog::backdrop{background:#020617a8;backdrop-filter:blur(4px)}.bp-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--bp-line);padding-bottom:16px;margin-bottom:16px}.bp-dialog h2{font-size:22px;font-weight:600;letter-spacing:-.03em}.bp-dialog h3{font-size:15px;font-weight:600;margin:14px 0 8px}.bp-dialog p{margin:8px 0;font-size:13px;line-height:1.6;color:var(--bp-muted)}.bp-dialog button{min-height:34px;padding:7px 12px;margin:4px 4px 4px 0;border:1px solid var(--bp-line);border-radius:9px;font-size:12px;font-weight:600;background:var(--bp-panel);color:var(--bp-ink);cursor:pointer}.bp-dialog button:hover{border-color:#38bdf8}.bp-dialog button:focus-visible,.bp-dialog input:focus-visible,.bp-dialog select:focus-visible{outline:2px solid #38bdf8;outline-offset:2px}.bp-dialog button:disabled{opacity:.45;cursor:not-allowed}.bp-dialog .bp-primary{background:#0369a1;border-color:#0369a1;color:#fff}.bp-dialog .bp-danger{color:#e11d48}.bp-dialog label{display:block;font-size:12px;font-weight:600;margin:14px 0}.bp-dialog input,.bp-dialog select{display:block;width:100%;padding:10px;border:1px solid var(--bp-line);border-radius:9px;background:var(--bp-panel);color:var(--bp-ink);margin-top:6px;box-sizing:border-box}.bp-card{padding:16px;margin:12px 0;border:1px solid var(--bp-line);border-radius:14px;background:var(--bp-panel);overflow-wrap:anywhere}.bp-card h3{margin-top:0}.bp-badge{display:inline-block;padding:3px 8px;border-radius:6px;background:#0ea5e918;color:#0284c7;font-size:11px;font-weight:600}.dark .bp-badge{color:#7dd3fc}.bp-dialog [role=status]{color:#b45309;min-height:20px}.dark .bp-dialog [role=status]{color:#fbbf24}.bp-only{min-width:0;max-width:100%}.bp-person{max-width:150px;min-width:0;border:1px solid #cbd5e1;border-radius:6px;padding:4px;background:#fff;color:#0f172a;font-size:12px}.bp-people-button{width:26px;min-width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:#475569;font-size:11px;display:inline-flex;align-items:center;justify-content:center}.bp-people-button:hover{background:#e2e8f0;color:#0369a1}.dark .bp-person{background:#0f172a;color:#e2e8f0;border-color:#334155;color-scheme:dark}.dark .bp-people-button{color:#cbd5e1}.dark .bp-people-button:hover{background:#334155;color:#7dd3fc}.bp-readonly{opacity:.6}@media(max-width:480px){.bp-dialog{padding:16px}.bp-dialog h2{font-size:20px}.bp-card{padding:12px}}
.bp-budget-trigger { display:flex; align-items:center; gap:6px; flex:1 1 auto; max-width:190px; }
.bp-budget-trigger-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:480px) { .bp-budget-trigger { max-width:150px; } }

.bp-badge{display:inline-flex;align-items:center;gap:5px}.bp-badge-private{background:#64748b18;color:#475569}.bp-badge-shared{background:#0ea5e918;color:#0284c7}.dark .bp-badge-private{color:#cbd5e1}.dark .bp-badge-shared{color:#7dd3fc}.bp-person-header{display:flex;align-items:center;gap:8px;margin:0 0 10px 0;font-weight:600;color:var(--bp-ink)}.bp-budget-intro{margin-bottom:14px}.bp-budget-legend{display:flex;align-items:center;gap:8px;margin:7px 0;color:var(--bp-muted);font-size:13px}.bp-danger-zone{margin-top:22px;padding:14px;border:1px solid #e11d4838;border-radius:14px;background:#e11d4808}.bp-danger-zone h3{color:#be123c}.dark .bp-danger-zone h3{color:#fda4af}.bp-new-item{border-color:#38bdf8;box-shadow:0 0 0 3px #38bdf824;transition:border-color .25s,box-shadow .25s}

/* Kontoidentitet och faktisk sparstatus: gemensam presentation för desktop/mobil. */
.account-heading { min-width: 0; max-width: calc(100% - 116px); }
.account-heading #userAuthBtn { max-width: 100%; }
.budget-recovery[hidden], .budget-readonly[hidden], #cloudSaveBtn[hidden] { display: none; }
.budget-storage-status { display: inline-flex; align-items: center; gap: 5px; font-family: Inter, sans-serif; color: #94a3b8; }
.budget-storage-status.is-cloud { color: #34d399; }
.budget-storage-status.is-pending { color: #fbbf24; }
.budget-storage-status.is-error { color: #fb7185; }
.budget-recovery { padding: 8px 12px; background: #fff1f2; color: #9f1239; border-bottom: 1px solid #fecdd3; font-size: 12px; }
.dark .budget-recovery { background: #27121d; color: #fda4af; border-color: #713044; }
.budget-recovery-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.budget-recovery-actions button { padding: 5px 9px; border: 1px solid currentColor; border-radius: 6px; font-weight: 600; }
.budget-readonly { padding: 3px 12px; font-size: 11px; color: #64748b; }
.dark .budget-readonly { color: #94a3b8; }
@media (min-width: 768px) {
  .account-heading { max-width: 30%; }
  .account-heading #userAuthBtn { flex-shrink: 1; min-width: 0; }
}

/* Personvalet ska inte krympas bort av kontonamn eller budgetnamn. */
#budgetPersonSelect { flex: 0 0 auto; min-width: 88px; max-width: 150px; }
#budgetAppHeader .budget-selectors { flex-shrink: 0; }
@media (min-width: 768px) and (max-width: 1199px) {
  #budgetAppHeader { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 8px; }
  #budgetAppHeader .account-heading { max-width: calc(100% - 340px); }
  #budgetAppHeader .budget-selectors { order: 4; width: 100%; }
}

/* Samma reserverade plats för personvalet i den utloggade exempelbudgeten. */
#budgetProfileSelect { order: 3; flex: 0 0 auto; min-width: 88px; max-width: 150px; }

/* Verktyg och lån använder samma neutrala ytor som budgetens dialoger. */
.loan-dialog { width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow:auto; padding:22px; border:1px solid #cbd5e1; border-radius:16px; color:#0f172a; background:#fff; }
.loan-dialog::backdrop { background:rgb(2 6 23 / .65); }
.loan-dialog h2 { font-size:20px; font-weight:600; margin-bottom:12px; }
.loan-dialog p { font-size:13px; margin:12px 0; line-height:1.5; }
.loan-dialog label { display:block; margin:10px 0; font-size:13px; font-weight:500; }
.loan-dialog input, .loan-dialog select { display:block; width:100%; margin-top:4px; padding:8px; border-radius:8px; border:1px solid #cbd5e1; background:#f8fafc; color:#0f172a; }
.loan-dialog option { background:#f8fafc; color:#0f172a; }
.loan-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.loan-actions button { padding:8px 12px; border:1px solid #cbd5e1; border-radius:8px; font-size:13px; }
.loan-actions .loan-primary { background:#0369a1; color:white; border-color:#0369a1; }
.loan-preview { padding:10px; background:#f0f9ff; border-radius:8px; }
.loan-origin { display:block; font-size:9px; color:#64748b; padding-right:8px; line-height:12px; }
.dark .loan-dialog { background:#0f172a; color:#e2e8f0; border-color:#334155; }
.dark .loan-dialog input, .dark .loan-dialog select, .dark .loan-dialog option { background:#020617; color:#e2e8f0; border-color:#334155; color-scheme:dark; }
.dark .loan-preview { background:#082f49; }
.dark .loan-origin { color:#94a3b8; }
@media (min-width:768px) { .loan-tools-trigger { width:auto; padding:0 9px; gap:6px; } }

/* Tillgänglig typografi: Standard behåller kalkylarkstätheten på dator.
   Kompakt ger en tätare visning; Större ger ökad läsbarhet.
   Lokala visningspreferenser påverkar aldrig budgetdata. */
@media screen {
  html.text-size-compact [class~="text-[10px]"] { font-size:9px !important; }
  html.text-size-compact [class~="text-[11px]"] { font-size:10px !important; }
  html.text-size-compact [class~="text-[12px]"] { font-size:11px !important; }
  html.text-size-compact [class~="text-[13px]"] { font-size:12px !important; }
  html.text-size-compact [class~="text-[14px]"] { font-size:13px !important; }
  html.text-size-compact [class~="text-[15px]"] { font-size:14px !important; }
  html.text-size-compact .text-xs { font-size:11px !important; line-height:1rem !important; }
  html.text-size-compact .text-sm { font-size:13px !important; line-height:1.2rem !important; }
  html.text-size-compact .text-base { font-size:15px !important; line-height:1.4rem !important; }
  html.text-size-compact .bp-dialog p,
  html.text-size-compact .bp-dialog button,
  html.text-size-compact .bp-dialog label,
  html.text-size-compact .bp-dialog input,
  html.text-size-compact .bp-dialog select,
  html.text-size-compact .loan-dialog p,
  html.text-size-compact .loan-dialog button,
  html.text-size-compact .loan-dialog label,
  html.text-size-compact .loan-dialog input,
  html.text-size-compact .loan-dialog select { font-size:12px; }

  html.text-size-large [class~="text-[9px]"] { font-size:11px !important; }
  html.text-size-large [class~="text-[10px]"] { font-size:12px !important; }
  html.text-size-large [class~="text-[11px]"] { font-size:13px !important; }
  html.text-size-large [class~="text-[12px]"] { font-size:14px !important; }
  html.text-size-large [class~="text-[13px]"] { font-size:15px !important; }
  html.text-size-large [class~="text-[14px]"] { font-size:16px !important; }
  html.text-size-large [class~="text-[15px]"] { font-size:17px !important; }
  html.text-size-large .text-xs { font-size:14px !important; line-height:1.25rem !important; }
  html.text-size-large .text-sm { font-size:16px !important; line-height:1.4rem !important; }
  html.text-size-large .text-base { font-size:18px !important; line-height:1.5rem !important; }
  html.text-size-large .status-bar { height:auto !important; min-height:40px; }
  html.text-size-large .bp-dialog p,
  html.text-size-large .bp-dialog button,
  html.text-size-large .bp-dialog label,
  html.text-size-large .bp-dialog input,
  html.text-size-large .bp-dialog select,
  html.text-size-large .loan-dialog p,
  html.text-size-large .loan-dialog button,
  html.text-size-large .loan-dialog label,
  html.text-size-large .loan-dialog input,
  html.text-size-large .loan-dialog select { font-size:14px; }
  html.text-size-large .bp-dialog button,
  html.text-size-large .loan-dialog button { min-height:40px; }
}

/* Ett KPI-kluster används i både mobilens månadsfält och datorns toppfält. */
@media screen and (min-width:1280px) {
  #desktopSummarySlot #budgetSummaryGrid {
    width:auto;
    grid-template-columns:repeat(3, minmax(76px, 1fr));
    gap:4px;
  }
  #desktopSummarySlot [data-summary-card] {
    min-width:76px;
    padding:4px 6px;
    align-items:center !important;
    box-shadow:none;
  }
  #desktopSummarySlot .budget-summary-label { font-size:9px !important; }
  #desktopSummarySlot .budget-summary-value { font-size:13px !important; }
  html.text-size-compact #desktopSummarySlot .budget-summary-label { font-size:8.5px !important; }
  html.text-size-compact #desktopSummarySlot .budget-summary-value { font-size:12px !important; }
  html.text-size-large #desktopSummarySlot .budget-summary-label { font-size:10px !important; }
  html.text-size-large #desktopSummarySlot .budget-summary-value { font-size:14px !important; }
}

@media screen and (max-width:767px) {
  #demoModeBanner { font-size:13px !important; line-height:1.35; }
  #demoModeBanner button { min-height:36px; font-size:12px !important; }

  #budgetAppHeader button,
  #monthNavToolbar button { min-height:40px; }
  #budgetAppHeader button.w-8,
  #monthNavToolbar button.w-8 { width:40px !important; height:40px !important; }
  #budgetAppHeader .h-8 { height:40px !important; }
  #budgetYearSelect,
  #budgetProfileSelect { min-height:32px; font-size:14px !important; }
  #activeCurrencyBadge,
  #summaryLabelIncome,
  #summaryLabelOutflow,
  #summaryLabelNet { font-size:11px !important; }
  #activeMonthSelect { font-size:15px !important; min-height:40px; }

  #mobileMonthView .category-name,
  #mobileMonthView .mobile-category-header > div:last-child > span { font-size:14px !important; }
  #mobileMonthView .row-name {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    white-space:normal !important;
    text-overflow:clip;
    line-height:1.3;
    font-size:15px !important;
  }
  #mobileMonthView .budget-grid-input,
  #mobileMonthView .mobile-amount-control > div { font-size:15px !important; }
  #mobileMonthView [class~="text-[9px]"] { font-size:11px !important; }

  #mobileMonthView .mobile-budget-row > .flex > .flex:last-child .mobile-amount-control > *,
  #mobileMonthView .mobile-budget-row > .flex > .flex:last-child > button.w-8 {
    height:40px !important;
    min-height:40px;
  }
  #mobileMonthView .mobile-budget-row > .flex > .flex:last-child > button.w-8 { width:40px !important; }
  #mobileMonthView .mobile-budget-row button.w-7,
  #mobileMonthView .mobile-subitem-card .mobile-amount-control > * {
    width:36px;
    height:36px !important;
    min-height:36px;
  }
  #mobileMonthView .mobile-subitem-card .mobile-amount-control input {
    width:80px;
    min-width:80px;
  }
  html.text-size-compact #mobileMonthView .row-name,
  html.text-size-compact #mobileMonthView .budget-grid-input,
  html.text-size-compact #mobileMonthView .mobile-amount-control > div { font-size:13px !important; }
  html.text-size-compact #mobileMonthView .category-name,
  html.text-size-compact #mobileMonthView .mobile-category-header > div:last-child > span { font-size:13px !important; }
  html.text-size-compact #mobileMonthView [class~="text-[9px]"],
  html.text-size-compact #activeCurrencyBadge,
  html.text-size-compact #summaryLabelIncome,
  html.text-size-compact #summaryLabelOutflow,
  html.text-size-compact #summaryLabelNet { font-size:10px !important; }

  html.text-size-large #mobileMonthView .row-name,
  html.text-size-large #mobileMonthView .budget-grid-input,
  html.text-size-large #mobileMonthView .mobile-amount-control > div { font-size:17px !important; }
  html.text-size-large #mobileMonthView .category-name,
  html.text-size-large #mobileMonthView .mobile-category-header > div:last-child > span { font-size:16px !important; }
  html.text-size-large #mobileMonthView [class~="text-[9px]"],
  html.text-size-large #activeCurrencyBadge,
  html.text-size-large #summaryLabelIncome,
  html.text-size-large #summaryLabelOutflow,
  html.text-size-large #summaryLabelNet { font-size:12px !important; }
}

@media screen and (max-width:359px) {
  #mobileMonthView .mobile-row-layout,
  #mobileMonthView .mobile-subitem-card { flex-wrap:wrap; }
  #mobileMonthView .mobile-row-layout > .mobile-row-meta,
  #mobileMonthView .mobile-subitem-card > .mobile-row-meta { flex-basis:100%; }
  #mobileMonthView .mobile-row-layout > .mobile-row-value-actions,
  #mobileMonthView .mobile-subitem-card > .mobile-row-value-actions { margin-left:auto; }
}