/* ==================================================================
   Sheriff Bygg — Kalkylator (kalk.sbygg.nu)
   Main stylesheet (extracted from index.html in v44)
   ==================================================================
   Generated automatically. Do not edit unless you understand impact.
   Source of truth: this file. All UI styling lives here.
   ================================================================== */

:root {
      --primary: #2D4A3E;
      --primary-foreground: #FDFBF7;
      --foreground: #1a1a1a;
      --muted-foreground: #6b6b6b;
      --background: #FDFBF7;
      --card: #ffffff;
      --border: rgba(216, 212, 199, 0.7);
      --terracotta: #C57B57;
      --gold: #E8B87A;
      --rot: #3a5a4d;
      --shadow-md: 0 4px 16px rgba(20, 30, 25, 0.08);
      --shadow-lg: 0 8px 32px rgba(20, 30, 25, 0.12);
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      padding: 0;
      font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--background);
      color: var(--foreground);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    /* ==== LAYOUT ==== */
    .app {
      display: grid;
      grid-template-columns: 260px 1fr;
      min-height: 100vh;
    }

    .sidebar {
      background: var(--primary);
      color: var(--primary-foreground);
      padding: 24px 18px;
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
    }

    .sidebar-logo {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.4rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      margin-bottom: 4px;
    }

    .sidebar-tag {
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--gold);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 28px;
    }

    .sidebar-nav {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .sidebar-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 10px;
      color: rgba(253, 251, 247, 0.85);
      font-weight: 600;
      font-size: 0.94rem;
      cursor: pointer;
      border: none;
      background: transparent;
      text-align: left;
      font-family: inherit;
      transition: 0.15s ease;
    }

    .sidebar-item:hover {
      background: rgba(255,255,255,0.08);
      color: var(--primary-foreground);
    }

    .sidebar-item.active {
      background: rgba(255,255,255,0.14);
      color: var(--primary-foreground);
      box-shadow: inset 3px 0 0 var(--gold);
    }

    .sidebar-icon {
      font-size: 1.2rem;
      width: 22px;
      text-align: center;
    }

    /* v72: Buton vizibil DOAR pe mobile (≤900px) — pentru a accesa Historik când sidebar Historik e ascuns */
    .sidebar-item-mobile-only {
      display: none;
    }

    .sidebar-divider {
      height: 1px;
      background: rgba(255,255,255,0.12);
      margin: 18px 0;
    }

    .sidebar-section-title {
      font-size: 0.7rem;
      font-weight: 800;
      color: rgba(232, 184, 122, 0.85);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin: 0 0 10px 14px;
    }

    .sidebar-history {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .history-item {
      padding: 10px 14px;
      border-radius: 8px;
      color: rgba(253, 251, 247, 0.75);
      font-size: 0.85rem;
      cursor: pointer;
      background: transparent;
      border: none;
      text-align: left;
      font-family: inherit;
      line-height: 1.3;
    }

    .history-item:hover {
      background: rgba(255,255,255,0.08);
      color: var(--primary-foreground);
    }

    .history-item .history-meta {
      font-size: 0.72rem;
      color: rgba(232, 184, 122, 0.7);
      margin-top: 2px;
    }

    .history-empty {
      padding: 10px 14px;
      color: rgba(253, 251, 247, 0.5);
      font-size: 0.82rem;
      font-style: italic;
    }

    /* ==== MAIN CONTENT ==== */
    .main {
      padding: 32px 40px 60px;
      max-width: 1100px;
    }

    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 28px;
      flex-wrap: wrap;
      gap: 16px;
    }

    .page-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 600;
      letter-spacing: -0.02em;
      margin: 0;
    }

    .page-subtitle {
      color: var(--muted-foreground);
      font-size: 0.95rem;
      margin: 4px 0 0;
    }

    .action-bar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border-radius: 10px;
      font-weight: 700;
      font-size: 0.88rem;
      border: none;
      cursor: pointer;
      font-family: inherit;
      text-decoration: none;
      transition: 0.15s ease;
      white-space: nowrap;
    }

    .btn-primary {
      background: var(--primary);
      color: var(--primary-foreground);
    }

    .btn-primary:hover {
      background: #244034;
    }

    .btn-secondary {
      background: #fff;
      color: var(--primary);
      border: 1.5px solid var(--primary);
    }

    .btn-secondary:hover {
      background: rgba(45, 74, 62, 0.06);
    }

    .btn-ghost {
      background: transparent;
      color: var(--muted-foreground);
      border: 1px solid var(--border);
    }

    .btn-ghost:hover {
      color: var(--foreground);
      background: rgba(0,0,0,0.03);
    }

    /* ==== CALC PANEL ==== */
    .calc-panel {
      display: none;
    }

    .calc-panel.active {
      display: block;
    }

    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 26px 28px;
      margin-bottom: 20px;
      box-shadow: var(--shadow-md);
    }

    .card h3 {
      font-family: 'Manrope', sans-serif;
      font-size: 0.88rem;
      font-weight: 800;
      color: var(--primary);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin: 0 0 18px;
    }

    /* ==== FORM ==== */
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .form-grid .full { grid-column: 1 / -1; }

    .field label {
      display: block;
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--muted-foreground);
      margin-bottom: 6px;
    }

    .input-group {
      display: flex;
      align-items: center;
      background: #f8f6f0;
      border: 1.5px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      transition: 0.15s ease;
    }

    .input-group:focus-within {
      border-color: var(--primary);
      background: #fff;
    }

    .input-group input,
    .input-group select {
      flex: 1;
      padding: 12px 14px;
      border: none;
      background: transparent;
      font: inherit;
      font-weight: 600;
      color: var(--foreground);
      outline: none;
      min-width: 0;
      width: 100%;
    }

    .input-group .unit {
      padding: 0 14px;
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--muted-foreground);
      background: rgba(0,0,0,0.03);
      align-self: stretch;
      display: flex;
      align-items: center;
    }

    /* Slider with linked input */
    .slider-row {
      display: grid;
      grid-template-columns: 1fr 130px;
      gap: 12px;
      align-items: center;
    }

    .slider-row input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 6px;
      background: linear-gradient(to right, var(--primary) 0%, var(--primary) var(--pct, 50%), #ddd var(--pct, 50%), #ddd 100%);
      border-radius: 3px;
      outline: none;
    }

    .slider-row input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 22px;
      height: 22px;
      background: var(--primary);
      border-radius: 50%;
      cursor: pointer;
      box-shadow: var(--shadow-md);
      transition: 0.15s ease;
    }

    .slider-row input[type="range"]::-webkit-slider-thumb:hover {
      transform: scale(1.1);
    }

    .slider-row input[type="range"]::-moz-range-thumb {
      width: 22px;
      height: 22px;
      background: var(--primary);
      border-radius: 50%;
      cursor: pointer;
      border: none;
    }

    .slider-range {
      display: flex;
      justify-content: space-between;
      font-size: 0.75rem;
      color: var(--muted-foreground);
      margin-top: 4px;
    }

    /* ==== KUNDTYP SWITCHER (FAKTURA) ==== */
    .kundtyp-switcher {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 20px;
    }

    .kundtyp-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 18px 16px;
      background: #fff;
      border: 2px solid var(--border);
      border-radius: 14px;
      cursor: pointer;
      transition: 0.15s ease;
      font-family: inherit;
      color: var(--foreground);
    }

    .kundtyp-btn:hover {
      border-color: var(--primary);
      transform: translateY(-2px);
    }

    .kundtyp-btn.active {
      background: linear-gradient(135deg, #2C4A2E, #1F3421);
      border-color: #2C4A2E;
      color: #fdfbf7;
    }

    .kundtyp-btn.active .kundtyp-sub {
      color: rgba(253, 251, 247, 0.75);
    }

    .kundtyp-icon {
      font-size: 2rem;
    }

    .kundtyp-label {
      font-weight: 700;
      font-size: 1.05rem;
    }

    .kundtyp-sub {
      font-size: 0.75rem;
      color: var(--muted-foreground);
    }

    /* ==== KUNDTYP END ==== */

    /* ==== FRI OFFERT RADER ==== */
    .fri-rad {
      display: grid;
      grid-template-columns: 100px 1fr 70px 70px 90px 100px 32px;
      gap: 8px;
      align-items: center;
      padding: 10px;
      background: #f8f6f0;
      border: 1.5px solid var(--border);
      border-radius: 10px;
      margin-bottom: 8px;
      transition: 0.15s ease;
    }

    .fri-rad:hover {
      border-color: var(--primary);
    }

    .fri-rad input,
    .fri-rad select {
      padding: 8px 10px;
      border: 1.5px solid var(--border);
      border-radius: 6px;
      font: inherit;
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--foreground);
      background: #fff;
      outline: none;
      width: 100%;
      box-sizing: border-box;
    }

    .fri-rad input:focus,
    .fri-rad select:focus {
      border-color: var(--primary);
    }

    .fri-rad input[type="number"] {
      text-align: right;
    }

    .fri-rad-summa {
      font-weight: 700;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.05rem;
      text-align: right;
      color: var(--foreground);
    }

    .fri-rad-delete {
      padding: 6px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 6px;
      cursor: pointer;
      color: #c33;
      font-size: 0.95rem;
      transition: 0.15s ease;
    }

    .fri-rad-delete:hover {
      background: #c33;
      color: #fff;
      border-color: #c33;
    }

    /* Colorcoded typ selector */
    .fri-rad select[data-typ="arbete"] { background: #152c49; color: #fff; border-color: #152c49; font-weight: 700; }
    .fri-rad select[data-typ="material"] { background: #C1622F; color: #fff; border-color: #C1622F; font-weight: 700; }
    .fri-rad select[data-typ="tillval"] { background: #E8B87A; color: #3d3929; border-color: #E8B87A; font-weight: 700; }

    @media (max-width: 800px) {
      .fri-rad {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
      }
      .fri-rad-summa, .fri-rad-delete {
        grid-column: span 1;
      }
    }

    /* ==== FRI OFFERT END ==== */

    /* ==== EDIT MODE BANNER ==== */
    .edit-mode-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 18px;
      background: linear-gradient(135deg, #E8B87A, #d4a35e);
      border: 2px solid #c89048;
      border-radius: 12px;
      margin-bottom: 18px;
      color: #3d3929;
      font-size: 0.92rem;
      animation: edit-banner-pulse 2s ease-in-out;
    }

    .edit-mode-text {
      flex: 1;
      line-height: 1.4;
    }

    @keyframes edit-banner-pulse {
      0% { box-shadow: 0 0 0 0 rgba(232, 184, 122, 0.7); }
      70% { box-shadow: 0 0 0 12px rgba(232, 184, 122, 0); }
      100% { box-shadow: 0 0 0 0 rgba(232, 184, 122, 0); }
    }

    /* ==== END EDIT MODE BANNER ==== */

    /* ==== UTGIFT LIST ==== */
    .utg-item {
      display: flex;
      gap: 14px;
      padding: 14px 16px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      cursor: pointer;
      transition: 0.15s ease;
      align-items: center;
    }

    .utg-item:hover {
      border-color: var(--primary);
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .utg-item-icon {
      font-size: 1.6rem;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8f6f0;
      border-radius: 10px;
      flex-shrink: 0;
    }

    .utg-item-info {
      flex: 1;
      min-width: 0;
      overflow: hidden;
    }

    .utg-item-title {
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--foreground);
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .utg-item-desc {
      font-size: 0.8rem;
      color: var(--muted-foreground);
      line-height: 1.4;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .utg-item-meta {
      font-size: 0.72rem;
      color: var(--muted-foreground);
      margin-top: 2px;
    }

    .utg-item-amount {
      flex-shrink: 0;
      text-align: right;
    }

    .utg-item-amount .belopp {
      font-weight: 800;
      font-size: 1rem;
      color: var(--foreground);
      white-space: nowrap;
    }

    .utg-item-amount .moms {
      font-size: 0.72rem;
      color: var(--muted-foreground);
      margin-top: 2px;
    }

    .utg-item-bilaga {
      flex-shrink: 0;
      font-size: 1rem;
      color: var(--muted-foreground);
    }

    .utg-empty {
      text-align: center;
      padding: 40px 20px;
      color: var(--muted-foreground);
      font-size: 0.95rem;
    }

    @media (max-width: 600px) {
      .utg-item {
        padding: 12px;
        gap: 10px;
      }
      .utg-item-icon {
        width: 36px;
        height: 36px;
        font-size: 1.3rem;
      }
    }

    /* ==== END UTGIFT LIST ==== */

    /* ==== KÖRJOURNAL LIST ==== */
    .kor-item {
      display: flex;
      gap: 14px;
      padding: 14px 16px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      cursor: pointer;
      transition: 0.15s ease;
      align-items: center;
    }

    .kor-item:hover {
      border-color: var(--primary);
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .kor-item.privat {
      border-left: 3px solid #888;
      opacity: 0.85;
    }

    .kor-item.tjanst {
      border-left: 3px solid #2C4A2E;
    }

    .kor-item-icon {
      font-size: 1.6rem;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8f6f0;
      border-radius: 10px;
      flex-shrink: 0;
    }

    .kor-item-info {
      flex: 1;
      min-width: 0;
      overflow: hidden;
    }

    .kor-item-route {
      font-weight: 700;
      font-size: 0.92rem;
      color: var(--foreground);
      margin-bottom: 2px;
    }

    .kor-item-route .arrow {
      color: var(--muted-foreground);
      margin: 0 4px;
    }

    .kor-item-meta {
      font-size: 0.78rem;
      color: var(--muted-foreground);
      line-height: 1.4;
    }

    .kor-item-amount {
      flex-shrink: 0;
      text-align: right;
    }

    .kor-item-amount .km {
      font-weight: 800;
      font-size: 1.05rem;
      color: var(--foreground);
      white-space: nowrap;
    }

    .kor-item-amount .ersattning {
      font-size: 0.72rem;
      color: var(--muted-foreground);
      margin-top: 2px;
    }

    @media (max-width: 600px) {
      .kor-item {
        padding: 12px;
        gap: 10px;
      }
      .kor-item-icon {
        width: 36px;
        height: 36px;
        font-size: 1.3rem;
      }
    }

    /* ==== END KÖRJOURNAL LIST ==== */

    /* ==== DAGRAPPORT LIST ==== */
    .dag-item {
      display: flex;
      gap: 14px;
      padding: 14px 16px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      cursor: pointer;
      transition: 0.15s ease;
    }

    .dag-item:hover {
      border-color: var(--primary);
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .dag-item.klar {
      border-left: 3px solid #2C4A2E;
    }

    .dag-item-date-block {
      flex-shrink: 0;
      width: 56px;
      text-align: center;
      padding: 8px 0;
      background: #f8f6f0;
      border-radius: 10px;
    }

    .dag-item-date-day {
      font-weight: 800;
      font-size: 1.2rem;
      color: var(--foreground);
      line-height: 1;
    }

    .dag-item-date-month {
      font-size: 0.7rem;
      color: var(--muted-foreground);
      text-transform: uppercase;
      margin-top: 4px;
    }

    .dag-item-info {
      flex: 1;
      min-width: 0;
      overflow: hidden;
    }

    .dag-item-projekt {
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--foreground);
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .dag-item-arbete {
      font-size: 0.82rem;
      color: var(--muted-foreground);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .dag-item-meta {
      font-size: 0.72rem;
      color: var(--muted-foreground);
      margin-top: 4px;
    }

    .dag-item-amount {
      flex-shrink: 0;
      text-align: right;
    }

    .dag-item-amount .timmar {
      font-weight: 800;
      font-size: 1.05rem;
      color: var(--foreground);
      white-space: nowrap;
    }

    .dag-item-amount .photos {
      font-size: 0.72rem;
      color: var(--muted-foreground);
      margin-top: 2px;
    }

    /* Foto thumbnails grid în modal */
    .dag-foto-thumb {
      position: relative;
      aspect-ratio: 1;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      background: #f8f6f0;
      border: 1px solid var(--border);
    }

    .dag-foto-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .dag-foto-thumb-remove {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 24px;
      height: 24px;
      background: rgba(204, 51, 51, 0.9);
      color: #fff;
      border: none;
      border-radius: 50%;
      font-size: 0.85rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.15s ease;
    }

    .dag-foto-thumb-remove:hover {
      background: rgba(204, 51, 51, 1);
      transform: scale(1.1);
    }

    @media (max-width: 600px) {
      .dag-item {
        padding: 12px;
        gap: 10px;
      }
      .dag-item-date-block {
        width: 48px;
      }
    }

    /* ==== END DAGRAPPORT LIST ==== */

    /* ==== SNABBPOSTER (prislista) ==== */
    .snabbpost-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 8px;
      transition: 0.15s ease;
    }

    .snabbpost-item:hover {
      border-color: var(--primary);
    }

    .snabbpost-item-info {
      flex: 1;
      min-width: 0;
    }

    .snabbpost-item-label {
      font-weight: 700;
      font-size: 0.92rem;
      color: var(--foreground);
    }

    .snabbpost-item-meta {
      font-size: 0.78rem;
      color: var(--muted-foreground);
      margin-top: 2px;
    }

    .snabbpost-item-price {
      font-weight: 700;
      color: var(--primary);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .snabbpost-item-actions {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }

    .snabbpost-item-actions button {
      padding: 4px 8px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.85rem;
    }

    .snabbpost-item-actions button:hover {
      border-color: var(--primary);
    }

    .snabbpost-picker-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      background: #f8f6f0;
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      transition: 0.15s ease;
    }

    .snabbpost-picker-item:hover {
      background: #efe9d9;
      border-color: var(--primary);
    }

    /* ==== END SNABBPOSTER ==== */

    /* ==== CHECKLISTS ==== */
    .cl-instance-item {
      display: flex;
      gap: 12px;
      padding: 14px 16px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      cursor: pointer;
      transition: 0.15s ease;
    }
    .cl-instance-item:hover {
      border-color: var(--primary);
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    .cl-instance-item.completed {
      border-left: 3px solid #2C4A2E;
    }
    .cl-instance-icon {
      flex-shrink: 0;
      width: 48px;
      height: 48px;
      border-radius: 10px;
      background: #f8f6f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
    }
    .cl-instance-info {
      flex: 1;
      min-width: 0;
    }
    .cl-instance-title {
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--foreground);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .cl-instance-meta {
      font-size: 0.78rem;
      color: var(--muted-foreground);
      margin-top: 4px;
    }
    .cl-progress-bar {
      flex-shrink: 0;
      width: 80px;
      text-align: right;
    }
    .cl-progress-bar .progress-track {
      background: #eee;
      border-radius: 4px;
      height: 6px;
      overflow: hidden;
      margin-bottom: 4px;
    }
    .cl-progress-bar .progress-fill {
      background: #2C4A2E;
      height: 100%;
      transition: width 0.3s;
    }
    .cl-progress-bar .progress-text {
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--foreground);
    }

    /* Item in checklist */
    .cl-item {
      display: flex;
      gap: 10px;
      padding: 10px 12px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 8px;
      align-items: flex-start;
      transition: 0.15s ease;
    }
    .cl-item.klar {
      background: #f0f7f0;
      border-color: #2C4A2E;
    }
    .cl-item.klar .cl-item-text {
      text-decoration: line-through;
      color: var(--muted-foreground);
    }
    .cl-item input[type="checkbox"] {
      width: 22px;
      height: 22px;
      cursor: pointer;
      flex-shrink: 0;
      accent-color: #2C4A2E;
    }
    .cl-item-text {
      flex: 1;
      font-size: 0.9rem;
      line-height: 1.5;
    }

    /* Mall edit area */
    .cl-mallar-section {
      margin-bottom: 14px;
    }
    .cl-mallar-header {
      font-weight: 700;
      color: var(--primary);
      font-size: 0.95rem;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .cl-mallar-list textarea {
      width: 100%;
      min-height: 120px;
      padding: 10px 12px;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      font: inherit;
      font-size: 0.85rem;
      line-height: 1.6;
      resize: vertical;
      background: #fff;
    }
    /* ==== END CHECKLISTS ==== */

    /* ==== ÄTA ==== */
    .ata-item {
      display: flex;
      gap: 12px;
      padding: 14px 16px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      cursor: pointer;
      transition: 0.15s ease;
      align-items: flex-start;
    }
    .ata-item:hover {
      border-color: var(--primary);
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    .ata-item-icon {
      flex-shrink: 0;
      width: 48px;
      height: 48px;
      border-radius: 10px;
      background: #f8f6f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
    }
    .ata-item-info {
      flex: 1;
      min-width: 0;
    }
    .ata-item-title {
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--foreground);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ata-item-rubrik {
      font-size: 0.85rem;
      color: var(--muted-foreground);
      margin-top: 2px;
    }
    .ata-item-meta {
      font-size: 0.75rem;
      color: var(--muted-foreground);
      margin-top: 4px;
    }
    .ata-item-status-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 0.7rem;
      font-weight: 700;
      color: #fff;
      margin-right: 6px;
    }
    .ata-item-amount {
      flex-shrink: 0;
      text-align: right;
    }
    .ata-item-amount .price {
      font-weight: 800;
      font-size: 1.05rem;
      color: var(--foreground);
      white-space: nowrap;
    }
    .ata-item-amount .extra {
      font-size: 0.72rem;
      color: var(--muted-foreground);
      margin-top: 2px;
    }

    /* ÄTA rad table */
    .ata-rad {
      display: grid;
      grid-template-columns: 90px 1fr 80px 70px 90px 100px 30px;
      gap: 6px;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
      font-size: 0.85rem;
    }
    .ata-rad input, .ata-rad select {
      padding: 6px 8px;
      border: 1px solid var(--border);
      border-radius: 6px;
      font: inherit;
      background: #fff;
      width: 100%;
    }
    .ata-rad button {
      padding: 4px 6px;
      background: transparent;
      border: none;
      color: #c33;
      cursor: pointer;
      font-size: 1rem;
    }
    @media (max-width: 768px) {
      .ata-rad {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
      }
    }
    /* ==== END ÄTA ==== */

    /* ==== WORKER LINKS ==== */
    .wl-item {
      display: flex;
      gap: 12px;
      padding: 14px 16px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      cursor: pointer;
      transition: 0.15s ease;
      align-items: flex-start;
    }
    .wl-item:hover {
      border-color: var(--primary);
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    .wl-item.pending {
      border-left: 3px solid #E8B87A;
    }
    .wl-item.approved {
      border-left: 3px solid #2C4A2E;
    }
    .wl-item.rejected {
      border-left: 3px solid #c33;
      opacity: 0.7;
    }
    .wl-item.expired {
      opacity: 0.5;
    }
    .wl-item-icon {
      flex-shrink: 0;
      width: 48px;
      height: 48px;
      border-radius: 10px;
      background: #f8f6f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
    }
    .wl-item-info {
      flex: 1;
      min-width: 0;
    }
    .wl-item-title {
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--foreground);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .wl-item-meta {
      font-size: 0.78rem;
      color: var(--muted-foreground);
      margin-top: 4px;
    }
    .wl-item-actions {
      display: flex;
      gap: 6px;
      margin-top: 8px;
      flex-wrap: wrap;
    }
    .wl-item-actions button {
      padding: 6px 10px;
      border: 1px solid var(--border);
      background: transparent;
      border-radius: 6px;
      cursor: pointer;
      font: inherit;
      font-size: 0.78rem;
    }
    .wl-item-actions button:hover {
      border-color: var(--primary);
      background: #f8f6f0;
    }
    /* ==== END WORKER LINKS ==== */

    /* ==== PROJEKT ==== */
    .prj-item {
      display: flex;
      gap: 14px;
      padding: 16px 18px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      cursor: pointer;
      transition: 0.15s ease;
    }
    .prj-item:hover {
      border-color: var(--primary);
      box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    .prj-item.aktiv { border-left: 4px solid #E8B87A; }
    .prj-item.planerad { border-left: 4px solid #888; }
    .prj-item.klar { border-left: 4px solid #2C4A2E; }
    .prj-item.arkiverad { border-left: 4px solid #888; opacity: 0.7; }

    .prj-item-icon {
      flex-shrink: 0;
      width: 56px;
      height: 56px;
      border-radius: 12px;
      background: #f8f6f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
    }
    .prj-item-info { flex: 1; min-width: 0; }
    .prj-item-title {
      font-weight: 800;
      font-size: 1rem;
      color: var(--foreground);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 4px;
    }
    .prj-item-kund {
      font-size: 0.85rem;
      color: var(--muted-foreground);
    }
    .prj-item-stats {
      font-size: 0.75rem;
      color: var(--muted-foreground);
      margin-top: 6px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    .prj-item-stats span {
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .prj-item-amounts {
      flex-shrink: 0;
      text-align: right;
      min-width: 130px;
    }
    .prj-amount-row {
      font-size: 0.78rem;
      color: var(--muted-foreground);
      margin-bottom: 2px;
    }
    .prj-amount-row strong {
      color: var(--foreground);
      font-weight: 700;
    }
    .prj-amount-vinst {
      font-size: 1.05rem;
      font-weight: 800;
      margin-top: 4px;
      padding-top: 4px;
      border-top: 1px dashed var(--border);
    }
    .prj-amount-vinst.green { color: #2C4A2E; }
    .prj-amount-vinst.yellow { color: #7a5e00; }
    .prj-amount-vinst.red { color: #c33; }

    /* Detail page */
    .prj-detail-header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 18px;
    }
    .prj-detail-back {
      background: transparent;
      border: 1px solid var(--border);
      padding: 8px 14px;
      border-radius: 8px;
      cursor: pointer;
      font: inherit;
      flex-shrink: 0;
    }
    .prj-detail-back:hover { border-color: var(--primary); }

    .prj-detail-section {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 18px 20px;
      margin-bottom: 14px;
    }
    .prj-detail-section h3 {
      font-size: 1rem;
      color: var(--primary);
      margin-bottom: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .prj-detail-section h3 .count {
      font-size: 0.78rem;
      background: #f8f6f0;
      padding: 2px 8px;
      border-radius: 12px;
      font-weight: 700;
    }
    .prj-lonsamhet-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 12px;
      margin-bottom: 14px;
    }
    .prj-lonsamhet-card {
      padding: 14px 16px;
      border-radius: 10px;
      text-align: center;
    }
    .prj-lonsamhet-card .label {
      font-size: 0.78rem;
      color: var(--muted-foreground);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .prj-lonsamhet-card .value {
      font-size: 1.4rem;
      font-weight: 800;
    }
    .prj-lonsamhet-card.intakt { background: #e8f5e9; color: #2C4A2E; }
    .prj-lonsamhet-card.kostnad { background: #fff3cd; color: #7a5e00; }
    .prj-lonsamhet-card.vinst.green { background: #d4edda; color: #155724; }
    .prj-lonsamhet-card.vinst.yellow { background: #fff3cd; color: #7a5e00; }
    .prj-lonsamhet-card.vinst.red { background: #f8d7da; color: #721c24; }

    .prj-link-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .prj-link-item {
      padding: 10px 12px;
      background: #f8f6f0;
      border-radius: 8px;
      font-size: 0.88rem;
      cursor: pointer;
      transition: 0.15s;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }
    .prj-link-item:hover {
      background: #efe9d9;
    }
    /* ==== END PROJEKT ==== */

    /* ==== GLOBAL SEARCH ==== */
    .global-search-trigger {
      position: fixed;
      top: 16px;
      right: 16px;
      z-index: 50;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 16px;
      cursor: pointer;
      font: inherit;
      font-size: 0.85rem;
      color: var(--muted-foreground);
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
      transition: 0.15s ease;
    }
    .global-search-trigger:hover {
      border-color: var(--primary);
      box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    }
    .global-search-trigger kbd {
      background: #f8f6f0;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 0.7rem;
      border: 1px solid var(--border);
      font-family: inherit;
    }
    @media (max-width: 768px) {
      .global-search-trigger { padding: 8px 10px; }
      .global-search-trigger .search-trigger-text { display: none; }
      .global-search-trigger kbd { display: none; }
    }

    .global-search-content {
      max-width: 700px;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      padding: 0 !important;
    }
    .global-search-header {
      display: flex;
      align-items: center;
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
      gap: 10px;
    }
    .global-search-header input {
      flex: 1;
      border: none !important;
      background: transparent !important;
      font-size: 1.05rem !important;
      padding: 6px 0 !important;
      outline: none;
    }
    .global-search-header .modal-close {
      position: static !important;
      flex-shrink: 0;
    }
    .global-search-hints {
      padding: 10px 18px;
      font-size: 0.82rem;
      color: var(--muted-foreground);
      background: #f8f6f0;
      border-bottom: 1px solid var(--border);
    }
    .global-search-results {
      flex: 1;
      overflow-y: auto;
      max-height: 60vh;
    }
    .gs-section {
      padding: 8px 18px 4px;
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--muted-foreground);
      background: #fff;
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 1;
    }
    .gs-result {
      padding: 10px 18px;
      cursor: pointer;
      border-bottom: 1px solid #f0eedf;
      transition: 0.1s;
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .gs-result:hover {
      background: #f8f6f0;
    }
    .gs-result-icon {
      flex-shrink: 0;
      font-size: 1.2rem;
    }
    .gs-result-text {
      flex: 1;
      min-width: 0;
    }
    .gs-result-title {
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--foreground);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .gs-result-sub {
      font-size: 0.75rem;
      color: var(--muted-foreground);
      margin-top: 2px;
    }
    .gs-result-amount {
      flex-shrink: 0;
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--foreground);
    }
    /* ==== END GLOBAL SEARCH ==== */

    /* ==== ACTIVITY FEED ==== */
    .activity-feed {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .activity-item {
      display: flex;
      gap: 10px;
      padding: 10px 12px;
      background: #f8f6f0;
      border-radius: 8px;
      font-size: 0.85rem;
      align-items: center;
    }
    .activity-item .icon {
      flex-shrink: 0;
      font-size: 1.2rem;
    }
    .activity-item .text {
      flex: 1;
      min-width: 0;
    }
    .activity-item .ts {
      font-size: 0.72rem;
      color: var(--muted-foreground);
      flex-shrink: 0;
    }
    /* ==== END ACTIVITY FEED ==== */

    /* ==== BULK OPERATIONS ==== */
    .bulk-toolbar {
      position: sticky;
      top: 60px;
      z-index: 10;
      background: var(--primary);
      color: #fff;
      padding: 10px 16px;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    .bulk-toolbar .count {
      font-weight: 700;
    }
    .bulk-toolbar .actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .bulk-toolbar button {
      padding: 6px 12px;
      background: rgba(255,255,255,0.15);
      color: #fff;
      border: 1px solid rgba(255,255,255,0.3);
      border-radius: 6px;
      cursor: pointer;
      font: inherit;
      font-size: 0.82rem;
    }
    .bulk-toolbar button:hover { background: rgba(255,255,255,0.25); }
    .bulk-checkbox {
      width: 20px;
      height: 20px;
      cursor: pointer;
      flex-shrink: 0;
    }
    /* ==== END BULK OPERATIONS ==== */

    /* ==== CLOUD SYNC BAR ==== */
    .sync-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      margin: 8px 12px 0 12px;
      background: #f8f6f0;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 0.78rem;
    }

    .sync-indicator {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: default;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .sync-indicator[data-status="syncing"] span:first-child {
      animation: sync-spin 1s linear infinite;
    }

    @keyframes sync-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .sync-now-btn {
      padding: 4px 8px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.85rem;
      transition: 0.15s ease;
    }

    .sync-now-btn:hover {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }

    .sync-now-btn:disabled {
      opacity: 0.5;
      cursor: wait;
    }

    /* ==== END CLOUD SYNC BAR ==== */

    /* ==== MALLAR BAR ==== */
    .mallar-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      padding: 12px 16px;
      background: #f8f6f0;
      border: 1.5px solid var(--border);
      border-radius: 12px;
      margin-bottom: 20px;
    }

    .mallar-bar-label {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--muted-foreground);
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .mallar-select {
      flex: 1;
      min-width: 150px;
      padding: 8px 12px;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      background: #fff;
      font: inherit;
      font-size: 0.88rem;
      color: var(--foreground);
      font-weight: 500;
      cursor: pointer;
    }

    .mallar-select:focus {
      outline: none;
      border-color: var(--primary);
    }

    .btn-sm {
      padding: 6px 12px !important;
      font-size: 0.82rem !important;
    }

    @media (max-width: 680px) {
      .mallar-bar {
        padding: 10px 12px;
        gap: 6px;
      }
      .mallar-bar-label {
        width: 100%;
        margin-bottom: 4px;
      }
    }

    /* ==== MALLAR BAR END ==== */

    /* ==== DASHBOARD ==== */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
      margin-bottom: 20px;
    }

    .kpi-card {
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: 14px;
      padding: 18px 20px;
      transition: 0.15s ease;
    }

    .kpi-card:hover {
      border-color: var(--primary);
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(45, 74, 62, 0.08);
    }

    .kpi-card.kpi-accent {
      background: linear-gradient(135deg, #2C4A2E, #1F3421);
      border-color: #2C4A2E;
      color: #fdfbf7;
    }

    .kpi-card.kpi-warning {
      background: linear-gradient(135deg, #c33, #a32020);
      border-color: #c33;
      color: #fff;
    }

    .kpi-warning .kpi-label,
    .kpi-warning .kpi-value,
    .kpi-warning .kpi-sub {
      color: #fff;
    }

    .kpi-warning .kpi-value {
      color: #ffd700;
    }

    .kpi-label {
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--muted-foreground);
      margin-bottom: 6px;
    }

    .kpi-accent .kpi-label {
      color: rgba(253, 251, 247, 0.75);
    }

    .kpi-value {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2rem;
      font-weight: 700;
      line-height: 1.1;
      color: var(--foreground);
    }

    .kpi-accent .kpi-value {
      color: #E8B87A;
    }

    .kpi-sub {
      font-size: 0.82rem;
      color: var(--muted-foreground);
      margin-top: 4px;
    }

    .kpi-accent .kpi-sub {
      color: rgba(253, 251, 247, 0.7);
    }

    /* Status split */
    .status-split {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 12px;
    }

    .status-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .status-row-label {
      width: 130px;
      font-size: 0.9rem;
      color: var(--foreground);
      font-weight: 600;
    }

    .status-row-bar-wrap {
      flex: 1;
      height: 24px;
      background: #f8f6f0;
      border-radius: 6px;
      overflow: hidden;
      position: relative;
    }

    .status-row-bar {
      height: 100%;
      border-radius: 6px;
      transition: width 0.3s ease;
    }

    .status-row-count {
      width: 40px;
      text-align: right;
      font-weight: 700;
      font-size: 0.9rem;
      color: var(--foreground);
    }

    /* Chart */
    .dash-chart-empty {
      padding: 40px;
      text-align: center;
      color: var(--muted-foreground);
      font-size: 0.9rem;
    }

    .dash-bar-chart {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 8px;
      height: 180px;
      padding: 0 4px;
    }

    .dash-bar-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .dash-bar {
      width: 100%;
      max-width: 60px;
      background: linear-gradient(180deg, #2C4A2E, #1F3421);
      border-radius: 6px 6px 0 0;
      min-height: 4px;
      position: relative;
      transition: 0.2s ease;
    }

    .dash-bar:hover {
      background: linear-gradient(180deg, #3a5e3d, #2C4A2E);
    }

    .dash-bar-value {
      position: absolute;
      top: -22px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--foreground);
      white-space: nowrap;
    }

    .dash-bar-label {
      font-size: 0.72rem;
      color: var(--muted-foreground);
      font-weight: 600;
    }

    /* Top kategorier / kunder lists */
    .dash-rank-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 10px;
    }

    .dash-rank-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      background: #f8f6f0;
      border-radius: 10px;
      font-size: 0.9rem;
    }

    .dash-rank-num {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--primary);
      color: #fdfbf7;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.82rem;
      flex-shrink: 0;
    }

    .dash-rank-name {
      flex: 1;
      color: var(--foreground);
      font-weight: 600;
    }

    .dash-rank-value {
      color: var(--muted-foreground);
      font-weight: 600;
      font-size: 0.82rem;
    }

    /* Aktiva list item */
    .dash-aktiv-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 14px;
      background: #f8f6f0;
      border-radius: 10px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: 0.15s ease;
    }

    .dash-aktiv-item:hover {
      background: rgba(45, 74, 62, 0.08);
    }

    .dash-aktiv-info {
      flex: 1;
      min-width: 0;
    }

    .dash-aktiv-title {
      font-weight: 700;
      color: var(--foreground);
      font-size: 0.95rem;
    }

    .dash-aktiv-meta {
      font-size: 0.8rem;
      color: var(--muted-foreground);
      margin-top: 2px;
    }

    .dash-aktiv-price {
      font-weight: 700;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.1rem;
      color: var(--foreground);
      text-align: right;
      flex-shrink: 0;
      margin-left: 12px;
    }

    .dash-empty {
      padding: 20px;
      text-align: center;
      color: var(--muted-foreground);
      font-size: 0.9rem;
      background: #f8f6f0;
      border-radius: 10px;
    }

    /* ==== KEYBOARD SHORTCUTS HELP ==== */
    .shortcuts-help-content {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .shortcut-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 12px;
      background: #f8f6f0;
      border-radius: 8px;
      gap: 12px;
    }

    .shortcut-desc {
      color: var(--foreground);
      font-size: 0.9rem;
    }

    .shortcut-keys {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }

    .shortcut-key {
      padding: 3px 8px;
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: 6px;
      font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--foreground);
      box-shadow: 0 1px 0 rgba(0,0,0,0.05);
    }

    /* ==== DASHBOARD END ==== */

    /* ==== HISTORY TABS (Offerter / Fakturor) ==== */
    .history-tabs {
      display: flex;
      gap: 4px;
      padding: 0 12px 6px 12px;
    }

    .history-tab {
      flex: 1;
      padding: 6px 8px;
      background: transparent;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      font-family: inherit;
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--muted-foreground);
      cursor: pointer;
      transition: 0.15s ease;
    }

    .history-tab:hover {
      background: rgba(45, 74, 62, 0.06);
    }

    .history-tab.active {
      background: var(--primary);
      color: #fdfbf7;
      border-color: var(--primary);
    }

    /* ==== HISTORY STATUS FILTERS ==== */
    .history-filters {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      padding: 0 12px 8px 12px;
    }

    .history-filter-btn {
      padding: 4px 8px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-family: inherit;
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--muted-foreground);
      cursor: pointer;
      transition: 0.15s ease;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .history-filter-btn:hover {
      background: rgba(45, 74, 62, 0.06);
      color: var(--foreground);
    }

    .history-filter-btn.active {
      background: var(--primary);
      color: #fdfbf7;
      border-color: var(--primary);
    }

    .filter-count {
      background: rgba(0,0,0,0.15);
      padding: 1px 5px;
      border-radius: 8px;
      font-size: 0.65rem;
      display: none;
    }

    .history-filter-btn.active .filter-count {
      background: rgba(255,255,255,0.25);
    }

    /* Status dot în history item */
    .status-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 6px;
      flex-shrink: 0;
    }

    .history-item-line {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .history-item-title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ==== HISTORY STATUS FILTERS END ==== */

    /* ==== KUNDREGISTER ==== */
    .kund-card {
      background: #f8f6f0;
      border: 1.5px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px;
      cursor: pointer;
      transition: 0.15s ease;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }

    .kund-card:hover {
      background: rgba(45, 74, 62, 0.06);
      border-color: var(--primary);
    }

    .kund-card-info {
      flex: 1;
      min-width: 0;
    }

    .kund-card-namn {
      font-weight: 700;
      font-size: 1rem;
      color: var(--foreground);
      margin-bottom: 3px;
    }

    .kund-card-meta {
      font-size: 0.82rem;
      color: var(--muted-foreground);
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .kund-card-actions {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
    }

    .kund-card-btn {
      padding: 6px 10px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.78rem;
      font-family: inherit;
      color: var(--muted-foreground);
      transition: 0.15s ease;
    }

    .kund-card-btn:hover {
      background: #fff;
      color: var(--foreground);
      border-color: var(--primary);
    }

    /* Autocomplete dropdown */
    .autocomplete-wrap {
      position: relative;
    }

    .autocomplete-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 500;
      background: #fff;
      border: 1.5px solid var(--primary);
      border-radius: 10px;
      margin-top: 4px;
      max-height: 240px;
      overflow-y: auto;
      box-shadow: 0 8px 24px rgba(20, 30, 25, 0.12);
      display: none;
    }

    .autocomplete-dropdown.visible {
      display: block;
    }

    .autocomplete-item {
      padding: 10px 14px;
      cursor: pointer;
      border-bottom: 1px solid var(--border);
      transition: background 0.1s;
    }

    .autocomplete-item:last-child {
      border-bottom: none;
    }

    .autocomplete-item:hover, .autocomplete-item.active {
      background: rgba(45, 74, 62, 0.08);
    }

    .autocomplete-item-name {
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--foreground);
      margin-bottom: 2px;
    }

    .autocomplete-item-meta {
      font-size: 0.78rem;
      color: var(--muted-foreground);
    }

    /* "Spara som kund" hint sub kund-namn */
    .kund-save-hint {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 0.78rem;
      color: var(--primary);
      cursor: pointer;
      margin-top: 4px;
      text-decoration: underline;
    }

    .kund-save-hint:hover {
      color: var(--foreground);
    }

    /* ==== KUNDREGISTER END ==== */

    /* ==== SHARE MODAL ==== */
    .share-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(20, 30, 25, 0.45);
      z-index: 10000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      animation: fadeIn 0.15s ease;
    }

    .share-modal-backdrop.visible {
      display: flex;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .share-modal {
      background: #fff;
      border-radius: 18px;
      padding: 24px;
      max-width: 420px;
      width: 100%;
      max-height: 85vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      box-shadow: 0 16px 48px rgba(20, 30, 25, 0.3);
      animation: slideUp 0.2s ease;
    }

    @keyframes slideUp {
      from { transform: translateY(20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    .share-modal h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem;
      font-weight: 600;
      margin: 0 0 6px;
      color: var(--foreground);
      text-transform: none;
      letter-spacing: 0;
    }

    .share-modal .share-subtitle {
      color: var(--muted-foreground);
      font-size: 0.88rem;
      margin-bottom: 20px;
    }

    .share-options {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .share-option {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      background: #f8f6f0;
      border: 1.5px solid var(--border);
      border-radius: 12px;
      cursor: pointer;
      transition: 0.15s ease;
      font-family: inherit;
      text-align: left;
      width: 100%;
    }

    .share-option:hover {
      background: rgba(45, 74, 62, 0.06);
      border-color: var(--primary);
    }

    .share-option-icon {
      font-size: 1.5rem;
      flex-shrink: 0;
      width: 36px;
      text-align: center;
    }

    .share-option-text {
      flex: 1;
    }

    .share-option-title {
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--foreground);
      margin-bottom: 2px;
    }

    .share-option-desc {
      font-size: 0.78rem;
      color: var(--muted-foreground);
      line-height: 1.4;
    }

    .share-modal-close {
      margin-top: 16px;
      width: 100%;
      padding: 12px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--muted-foreground);
      font-family: inherit;
      font-weight: 600;
      cursor: pointer;
      font-size: 0.9rem;
    }

    .share-modal-close:hover {
      background: rgba(0,0,0,0.04);
      color: var(--foreground);
    }

    /* ==== SHARE MODAL END ==== */

    /* ==== GENERIC MODAL ==== */
    .modal {
      position: fixed;
      inset: 0;
      background: rgba(20, 30, 25, 0.55);
      z-index: 9000;
      align-items: center;
      justify-content: center;
      padding: 20px;
      animation: fadeIn 0.15s ease;
    }
    .modal.visible {
      display: flex !important;
    }
    .modal-content {
      background: var(--card);
      border-radius: 14px;
      padding: 24px;
      max-width: 600px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }
    .modal-content h3 {
      font-size: 1.1rem;
      color: var(--primary);
      margin-bottom: 14px;
      padding-right: 30px;
    }
    .modal-close {
      position: absolute;
      top: 12px;
      right: 16px;
      background: transparent;
      border: none;
      font-size: 1.7rem;
      line-height: 1;
      cursor: pointer;
      color: var(--muted-foreground);
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      transition: 0.15s;
    }
    .modal-close:hover {
      background: rgba(0,0,0,0.06);
      color: var(--foreground);
    }
    @media (max-width: 768px) {
      .modal {
        padding: 0;
        align-items: flex-end;
      }
      .modal-content {
        border-radius: 14px 14px 0 0;
        max-height: 92vh;
        padding: 20px;
      }
    }
    /* ==== END GENERIC MODAL ==== */

    /* v87: Fix modal pe mobile — bottom bar (80px) nu acoperă conținutul */
    body.is-mobile .modal {
      padding-bottom: 80px !important;
      z-index: 9100 !important;
    }
    body.is-mobile .modal-content {
      max-height: calc(100vh - 100px) !important;
      padding-bottom: 24px !important;
    }
    /* Bottom bar trebuie să rămână sub modal când modal e deschis */
    body.is-mobile .modal.visible ~ .mobile-bottom-bar,
    body.is-mobile.modal-open .mobile-bottom-bar {
      z-index: 8000 !important;
    }
    /* === END v87 === */

    /* ==== TAB PANELS (checklists, worker links) ==== */
    .cl-tab-panel,
    .wl-tab-panel {
      animation: fadeIn 0.15s ease;
    }
    /* ==== END TAB PANELS ==== */

    /* ==== BULK SELECTED ==== */
    .history-item.bulk-selected {
      background: #f0f7f0 !important;
      border-color: #2C4A2E !important;
      border-width: 2px !important;
    }
    /* ==== END BULK SELECTED ==== */

    /* ==== SUMMARY GRID (Fri offert) ==== */
    .summary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 10px;
      margin-bottom: 12px;
    }
    .summary-pill {
      background: #f8f6f0;
      border-radius: 10px;
      padding: 10px 12px;
      text-align: center;
    }
    .summary-pill .pill-label {
      font-size: 0.72rem;
      color: var(--muted-foreground);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .summary-pill .pill-value {
      font-size: 1rem;
      font-weight: 800;
      color: var(--foreground);
    }
    /* ==== END SUMMARY GRID ==== */

    /* ==== PWA UPDATE BANNER ==== */
    #pwa-update-banner {
      position: fixed;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10000;
      max-width: 92vw;
      width: 480px;
      animation: slideUp 0.3s ease;
    }
    .pwa-banner-content {
      background: var(--primary);
      color: #fff;
      padding: 14px 18px;
      border-radius: 14px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.25);
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .pwa-banner-icon {
      font-size: 1.4rem;
      flex-shrink: 0;
    }
    .pwa-banner-text {
      flex: 1;
      font-weight: 600;
      font-size: 0.92rem;
      min-width: 100px;
    }
    .pwa-banner-btn {
      padding: 8px 14px;
      border-radius: 8px;
      font: inherit;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid rgba(255,255,255,0.3);
      background: rgba(255,255,255,0.1);
      color: #fff;
      transition: 0.15s;
    }
    .pwa-banner-btn:hover {
      background: rgba(255,255,255,0.2);
    }
    .pwa-banner-btn.primary {
      background: var(--accent);
      color: var(--primary);
      border-color: var(--accent);
      font-weight: 700;
    }
    .pwa-banner-btn.primary:hover {
      background: #efc78a;
    }
    @media (max-width: 540px) {
      .pwa-banner-content { padding: 12px 14px; }
      .pwa-banner-text { font-size: 0.85rem; }
    }
    /* ==== END PWA UPDATE BANNER ==== */

    /* ==== ONLINE/OFFLINE INDICATOR ==== */
    #online-indicator {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9500;
      background: #c33;
      color: #fff;
      padding: 8px 16px;
      text-align: center;
      font-size: 0.85rem;
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .online-dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      background: #fff;
      border-radius: 50%;
      animation: pulse-dot 2s ease infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }
    /* Compensează pentru offline indicator când e visible — push content down */
    body.offline-mode {
      padding-top: 36px;
    }
    /* ==== END ONLINE/OFFLINE INDICATOR ==== */

    /* ==== INSTALL APP BUTTON (i settings) ==== */
    #pwa-install-btn {
      background: linear-gradient(135deg, var(--primary), #1f3d5f);
      color: #fff;
      border: none;
      padding: 12px 20px;
      border-radius: 10px;
      font: inherit;
      font-weight: 700;
      font-size: 0.95rem;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      transition: 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    #pwa-install-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    #pwa-install-btn.installed {
      background: #2C4A2E;
      cursor: default;
    }
    #pwa-install-btn:disabled {
      cursor: default;
      transform: none;
    }
    /* ==== END INSTALL APP BUTTON ==== */

    /* ==== BEIJER MATERIAL ==== */
    .beijer-item {
      display: flex;
      gap: 12px;
      padding: 12px 14px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      cursor: pointer;
      transition: 0.15s ease;
      align-items: flex-start;
    }
    .beijer-item:hover {
      border-color: var(--primary);
      background: #fafaf6;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }
    .beijer-item.has-override {
      border-left: 3px solid #E8B87A;
    }
    .beijer-item-icon {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: #f8f6f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
    }
    .beijer-item-info {
      flex: 1;
      min-width: 0;
    }
    .beijer-item-name {
      font-weight: 700;
      font-size: 0.92rem;
      color: var(--foreground);
      line-height: 1.4;
      word-wrap: break-word;
    }
    .beijer-item-meta {
      font-size: 0.74rem;
      color: var(--muted-foreground);
      margin-top: 4px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .beijer-item-meta .artnr {
      font-family: ui-monospace, "SF Mono", monospace;
      background: #f8f6f0;
      padding: 1px 6px;
      border-radius: 3px;
    }
    .beijer-item-prices {
      flex-shrink: 0;
      text-align: right;
      min-width: 130px;
    }
    .beijer-pris-row {
      font-size: 0.78rem;
      color: var(--muted-foreground);
      line-height: 1.5;
      white-space: nowrap;
    }
    .beijer-pris-row.kost strong {
      color: var(--foreground);
      font-weight: 700;
    }
    .beijer-pris-row.salj {
      color: #2C4A2E;
      font-weight: 700;
      font-size: 0.92rem;
      margin-top: 2px;
      padding-top: 2px;
      border-top: 1px dashed var(--border);
    }
    .beijer-pris-row.salj small {
      font-size: 0.72rem;
      font-weight: normal;
      color: var(--muted-foreground);
    }
    .beijer-rabatt-pct {
      display: inline-block;
      font-size: 0.7rem;
      background: #e8f5e9;
      color: #155724;
      padding: 1px 5px;
      border-radius: 3px;
      font-weight: 700;
    }

    @media (max-width: 600px) {
      .beijer-item {
        flex-direction: column;
        gap: 8px;
      }
      .beijer-item-prices {
        text-align: left;
        min-width: auto;
        border-top: 1px solid var(--border);
        padding-top: 8px;
        width: 100%;
      }
      .beijer-pris-row.salj {
        border-top: none;
      }
    }

    /* Drop zone hover state */
    #beijer-drop-zone.dragover {
      border-color: var(--primary) !important;
      background: #e8f0ff !important;
    }
    #beijer-drop-zone:hover {
      border-color: var(--primary);
      background: #f0eedf;
    }
    /* ==== END BEIJER MATERIAL ==== */

    /* ==== BEIJER SHOPPING CART (în calkulatorer) ==== */
    .beijer-shop-content {
      max-width: 720px !important;
      width: 100% !important;
      max-height: 92vh !important;
      display: flex !important;
      flex-direction: column !important;
    }
    .beijer-shop-item {
      display: flex;
      gap: 10px;
      padding: 10px 12px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 8px;
      align-items: flex-start;
      transition: 0.1s;
    }
    .beijer-shop-item.selected {
      border-color: var(--primary);
      background: #f0f7ff;
      border-width: 2px;
      padding: 9px 11px;
    }
    .beijer-shop-checkbox {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      cursor: pointer;
      margin-top: 2px;
    }
    .beijer-shop-info {
      flex: 1;
      min-width: 0;
    }
    .beijer-shop-name {
      font-weight: 600;
      font-size: 0.85rem;
      line-height: 1.3;
      color: var(--foreground);
    }
    .beijer-shop-meta {
      font-size: 0.72rem;
      color: var(--muted-foreground);
      margin-top: 3px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .beijer-shop-meta .artnr {
      font-family: monospace;
      background: #f8f6f0;
      padding: 0 5px;
      border-radius: 3px;
    }
    .beijer-shop-prices {
      flex-shrink: 0;
      text-align: right;
      min-width: 100px;
      font-size: 0.78rem;
      color: var(--muted-foreground);
    }
    .beijer-shop-prices strong {
      color: #2C4A2E;
      font-size: 0.9rem;
      font-weight: 800;
      display: block;
    }
    .beijer-shop-qty {
      flex-shrink: 0;
      width: 70px;
    }
    .beijer-shop-qty input {
      width: 100%;
      padding: 5px 8px !important;
      font-size: 0.85rem !important;
      text-align: center;
      border: 1.5px solid var(--border) !important;
      border-radius: 6px !important;
    }
    .beijer-shop-qty input:focus {
      border-color: var(--primary) !important;
    }
    /* ==== END BEIJER SHOPPING CART ==== */

    /* ==== LÖNSAMHET CARD ==== */
    .lonsamhet-card {
      animation: fadeIn 0.3s ease;
    }
    .lonsamhet-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 0;
      font-size: 0.88rem;
    }
    .lonsamhet-row.indent {
      padding-left: 20px;
      color: var(--muted-foreground);
      font-size: 0.82rem;
    }
    .lonsamhet-row.total {
      border-top: 2px solid #2C4A2E;
      margin-top: 10px;
      padding-top: 12px;
      font-weight: 800;
      color: #2C4A2E;
      font-size: 1rem;
    }
    .lonsamhet-row.total .lonsamhet-pct {
      font-size: 0.85rem;
      font-weight: 700;
      background: #2C4A2E;
      color: #fff;
      padding: 2px 8px;
      border-radius: 4px;
      margin-left: 8px;
    }
    .lonsamhet-warning {
      font-size: 0.78rem;
      color: #7a5e00;
      background: #fff3cd;
      padding: 8px 12px;
      border-radius: 6px;
      margin-top: 12px;
      line-height: 1.4;
    }
    /* Hide on print */
    @media print {
      .no-print, .lonsamhet-card { display: none !important; }
    }
    /* ==== END LÖNSAMHET CARD ==== */

    /* ==== BEIJER ROW INDICATOR (în Fri offert) ==== */
    .fri-rad-beijer-badge {
      display: inline-block;
      background: #f0eedf;
      color: var(--primary);
      font-size: 0.65rem;
      font-weight: 700;
      padding: 1px 5px;
      border-radius: 3px;
      margin-left: 6px;
      vertical-align: middle;
    }
    .fri-rad.from-beijer {
      border-left: 3px solid var(--accent);
    }
    /* ==== END BEIJER ROW INDICATOR ==== */

    /* ==== BEIJER EXTRAS (Altan/Snickeri/Målning/Renovering) ==== */
    .beijer-extras-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .beijer-extra-row {
      display: flex;
      gap: 10px;
      padding: 10px 12px;
      background: #fafaf6;
      border: 1px solid var(--border);
      border-left: 3px solid var(--accent);
      border-radius: 8px;
      align-items: center;
    }
    .beijer-extra-icon {
      flex-shrink: 0;
      font-size: 1.2rem;
    }
    .beijer-extra-info {
      flex: 1;
      min-width: 0;
    }
    .beijer-extra-name {
      font-weight: 600;
      font-size: 0.88rem;
      color: var(--foreground);
      line-height: 1.3;
    }
    .beijer-extra-meta {
      font-size: 0.74rem;
      color: var(--muted-foreground);
      margin-top: 2px;
    }
    .beijer-extra-meta .artnr {
      font-family: monospace;
      background: #f0eedf;
      padding: 0 5px;
      border-radius: 3px;
    }
    .beijer-extra-qty {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .beijer-extra-qty input {
      width: 70px;
      padding: 6px 8px !important;
      font-size: 0.85rem !important;
      text-align: center;
      border: 1.5px solid var(--border) !important;
      border-radius: 6px !important;
      background: #fff !important;
    }
    .beijer-extra-qty .be-enhet {
      font-size: 0.78rem;
      color: var(--muted-foreground);
      min-width: 28px;
    }
    .beijer-extra-summa {
      flex-shrink: 0;
      font-weight: 800;
      color: var(--foreground);
      min-width: 75px;
      text-align: right;
      font-size: 0.92rem;
    }
    .beijer-extra-delete {
      flex-shrink: 0;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 5px;
      font-size: 1rem;
      transition: 0.15s;
    }
    .beijer-extra-delete:hover {
      background: #ffe6e6;
    }
    @media (max-width: 600px) {
      .beijer-extra-row {
        flex-wrap: wrap;
      }
      .beijer-extra-info {
        flex-basis: 100%;
      }
      .beijer-extra-summa {
        margin-left: auto;
      }
    }
    /* ==== END BEIJER EXTRAS ==== */

    /* ==== ALTAN MATERIAL ROWS (v41) ==== */
    .al-material-row {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 12px 14px;
      background: #fafaf6;
      border: 1px solid var(--border);
      border-left: 3px solid var(--accent);
      border-radius: 8px;
    }
    .al-material-row.fallback {
      border-left-color: #c33;
      background: #fef5f5;
    }
    .al-material-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .al-material-grupp-label {
      font-weight: 700;
      font-size: 0.92rem;
      color: var(--primary);
    }
    .al-material-grupp-label .icon {
      margin-right: 4px;
    }
    .al-material-artikel {
      font-size: 0.82rem;
      color: var(--foreground);
      line-height: 1.4;
      flex: 1;
      min-width: 0;
    }
    .al-material-artikel .artnr {
      font-family: monospace;
      background: #f0eedf;
      padding: 0 5px;
      border-radius: 3px;
      font-size: 0.78rem;
    }
    .al-material-andra-btn {
      flex-shrink: 0;
      background: #fff;
      border: 1px solid var(--border);
      padding: 5px 10px;
      border-radius: 6px;
      cursor: pointer;
      font: inherit;
      font-size: 0.78rem;
      color: var(--primary);
      font-weight: 600;
      transition: 0.15s;
    }
    .al-material-andra-btn:hover {
      background: var(--primary);
      color: #fff;
    }
    .al-material-detail {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: flex-end;
      font-size: 0.85rem;
    }
    .al-material-qty-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 130px;
    }
    .al-material-qty-group label {
      font-size: 0.74rem;
      color: var(--muted-foreground);
      font-weight: 600;
    }
    .al-material-qty-row {
      display: flex;
      gap: 4px;
      align-items: center;
    }
    .al-material-qty-row input {
      width: 75px;
      padding: 5px 8px !important;
      font-size: 0.85rem !important;
      text-align: center;
      border: 1.5px solid var(--border) !important;
      border-radius: 5px !important;
    }
    .al-material-qty-row .qty-unit {
      font-size: 0.75rem;
      color: var(--muted-foreground);
      min-width: 28px;
    }
    .al-material-qty-row .auto-badge {
      font-size: 0.65rem;
      background: #e0f0e0;
      color: #155724;
      padding: 1px 5px;
      border-radius: 3px;
      font-weight: 700;
    }
    .al-material-qty-row .auto-reset-btn {
      background: transparent;
      border: 1px solid var(--border);
      padding: 2px 7px;
      border-radius: 4px;
      cursor: pointer;
      font: inherit;
      font-size: 0.7rem;
    }
    .al-material-qty-row .auto-reset-btn:hover {
      background: var(--primary);
      color: #fff;
    }
    .al-material-pricing {
      flex: 1;
      text-align: right;
      min-width: 200px;
      font-size: 0.85rem;
    }
    .al-material-pricing .kost {
      color: var(--muted-foreground);
      font-size: 0.78rem;
    }
    .al-material-pricing .salj {
      color: #2C4A2E;
      font-weight: 800;
      font-size: 0.95rem;
      margin-top: 2px;
    }
    .al-material-pricing .marg-pct {
      font-size: 0.7rem;
      background: #2C4A2E;
      color: #fff;
      padding: 1px 5px;
      border-radius: 3px;
      margin-left: 4px;
    }

    /* Beijer picker modal items */
    .beijer-picker-item {
      display: flex;
      gap: 10px;
      padding: 10px 12px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      align-items: center;
      transition: 0.1s;
    }
    .beijer-picker-item:hover {
      border-color: var(--primary);
      background: #f0f7ff;
    }
    .beijer-picker-item.selected {
      border: 2px solid var(--primary);
      background: #e8f0ff;
      padding: 9px 11px;
    }
    .beijer-picker-info {
      flex: 1;
      min-width: 0;
    }
    .beijer-picker-name {
      font-weight: 600;
      font-size: 0.86rem;
      line-height: 1.3;
      color: var(--foreground);
    }
    .beijer-picker-meta {
      font-size: 0.72rem;
      color: var(--muted-foreground);
      margin-top: 3px;
    }
    .beijer-picker-pris {
      flex-shrink: 0;
      font-weight: 800;
      color: #2C4A2E;
      font-size: 0.92rem;
    }
    /* ==== END ALTAN MATERIAL ROWS ==== */

    /* ==== STATISTIK ==== */
    .stat-bar-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 0;
    }
    .stat-bar-label {
      flex-shrink: 0;
      width: 80px;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--muted-foreground);
    }
    .stat-bar-track {
      flex: 1;
      height: 24px;
      background: #f0eedf;
      border-radius: 6px;
      position: relative;
      overflow: hidden;
    }
    .stat-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #2C4A2E, #3a6a3c);
      border-radius: 6px;
      transition: width 0.4s ease;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 0 8px;
      color: #fff;
      font-weight: 700;
      font-size: 0.78rem;
      min-width: 60px;
      box-sizing: border-box;
    }
    .stat-bar-fill.negative {
      background: linear-gradient(90deg, #c33, #d54);
    }
    .stat-bar-value {
      flex-shrink: 0;
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--foreground);
      min-width: 80px;
      text-align: right;
    }

    .stat-projekt-row {
      display: flex;
      gap: 12px;
      padding: 12px 14px;
      background: #f8f6f0;
      border-radius: 8px;
      margin-bottom: 6px;
      align-items: center;
    }
    .stat-projekt-rank {
      flex-shrink: 0;
      font-size: 1.4rem;
      font-weight: 800;
      width: 32px;
      text-align: center;
    }
    .stat-projekt-info {
      flex: 1;
      min-width: 0;
    }
    .stat-projekt-name {
      font-weight: 700;
      font-size: 0.92rem;
    }
    .stat-projekt-meta {
      font-size: 0.78rem;
      color: var(--muted-foreground);
      margin-top: 2px;
    }
    .stat-projekt-vinst {
      flex-shrink: 0;
      text-align: right;
      font-size: 0.95rem;
      font-weight: 800;
      color: #2C4A2E;
    }
    .stat-projekt-vinst .pct {
      display: block;
      font-size: 0.72rem;
      color: var(--muted-foreground);
      font-weight: 600;
    }

    .konv-funnel {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .konv-step {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 8px;
    }
    .konv-step-icon { font-size: 1.4rem; flex-shrink: 0; }
    .konv-step-label {
      flex: 1;
      font-weight: 700;
      font-size: 0.92rem;
    }
    .konv-step-count {
      flex-shrink: 0;
      font-weight: 800;
      font-size: 1rem;
      color: var(--primary);
    }
    .konv-step-pct {
      flex-shrink: 0;
      font-size: 0.78rem;
      background: #2C4A2E;
      color: #fff;
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: 700;
    }

    /* ==== Notifikation banner ==== */
    .notif-banner {
      position: fixed;
      top: 70px;
      right: 16px;
      max-width: 380px;
      background: #fff;
      border: 1px solid var(--border);
      border-left: 4px solid #E8B87A;
      border-radius: 10px;
      padding: 12px 14px;
      box-shadow: 0 4px 14px rgba(0,0,0,0.12);
      z-index: 9700;
      display: none;
      animation: slideUp 0.3s ease;
    }
    .notif-banner.urgent { border-left-color: #c33; }
    .notif-banner.info { border-left-color: #4a90e2; }
    .notif-banner-title {
      font-weight: 700;
      font-size: 0.92rem;
      color: var(--primary);
      margin-bottom: 4px;
    }
    .notif-banner-text {
      font-size: 0.85rem;
      color: var(--foreground);
      line-height: 1.4;
      margin-bottom: 8px;
    }
    .notif-banner-actions {
      display: flex;
      gap: 6px;
      justify-content: flex-end;
    }
    .notif-banner-btn {
      padding: 5px 10px;
      border-radius: 6px;
      font: inherit;
      font-size: 0.78rem;
      cursor: pointer;
      border: 1px solid var(--border);
      background: #fff;
      color: var(--foreground);
    }
    .notif-banner-btn.primary {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
      font-weight: 600;
    }
    /* ==== END STATISTIK ==== */

    /* ==== PROJEKT HUB (v46) ==== */
    .hub-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 18px;
      background: linear-gradient(135deg, #2D4A3E 0%, #3a6a3c 100%);
      color: #fff;
      border-radius: 12px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }
    .hub-header .prj-detail-back {
      background: rgba(255,255,255,0.15);
      color: #fff;
      border: 1px solid rgba(255,255,255,0.3);
      padding: 6px 12px;
      border-radius: 6px;
      cursor: pointer;
      font: inherit;
      font-size: 0.85rem;
      flex-shrink: 0;
    }
    .hub-header .prj-detail-back:hover {
      background: rgba(255,255,255,0.25);
    }
    .hub-header-info {
      flex: 1;
      min-width: 0;
    }
    .hub-title {
      margin: 0;
      font-size: 1.35rem;
      font-weight: 700;
      color: #fff;
      line-height: 1.2;
    }
    .hub-subtitle {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.85);
      margin-top: 4px;
      line-height: 1.4;
    }
    .hub-header-actions {
      flex-shrink: 0;
    }
    .hub-header .btn {
      background: rgba(255,255,255,0.18);
      color: #fff;
      border: 1px solid rgba(255,255,255,0.3);
    }
    .hub-header .btn:hover {
      background: rgba(255,255,255,0.28);
    }

    /* Tabbar */
    .hub-tabbar {
      display: flex;
      gap: 4px;
      overflow-x: auto;
      padding: 4px;
      background: #f0eedf;
      border-radius: 10px;
      margin-bottom: 10px;
      scrollbar-width: thin;
    }
    .hub-tabbar::-webkit-scrollbar { height: 4px; }
    .hub-tabbar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 4px; }
    .hub-tab {
      flex: 1;
      min-width: 90px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 8px 12px;
      background: transparent;
      border: none;
      border-radius: 7px;
      cursor: pointer;
      font: inherit;
      color: var(--muted-foreground);
      transition: 0.15s;
      position: relative;
      white-space: nowrap;
    }
    .hub-tab:hover {
      background: rgba(0,0,0,0.04);
    }
    .hub-tab.active {
      background: #fff;
      color: var(--primary);
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }
    .hub-tab-icon {
      font-size: 1.1rem;
    }
    .hub-tab-label {
      font-size: 0.78rem;
      font-weight: 600;
    }
    .hub-tab.active .hub-tab-label {
      font-weight: 700;
    }
    .hub-tab-badge {
      position: absolute;
      top: 4px;
      right: 8px;
      background: #E8B87A;
      color: #2D4A3E;
      font-size: 0.65rem;
      font-weight: 800;
      padding: 1px 5px;
      border-radius: 8px;
      min-width: 16px;
      text-align: center;
    }
    .hub-tab.active .hub-tab-badge {
      background: var(--primary);
      color: #fff;
    }

    /* Quick-add */
    .hub-quickadd {
      display: flex;
      gap: 6px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }
    .hub-qa-btn {
      flex: 1;
      min-width: 130px;
      padding: 10px 12px;
      background: #fff;
      color: var(--primary);
      border: 1.5px dashed var(--border);
      border-radius: 8px;
      cursor: pointer;
      font: inherit;
      font-size: 0.85rem;
      font-weight: 600;
      transition: 0.15s;
    }
    .hub-qa-btn:hover {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
      border-style: solid;
    }

    /* Content area */
    .hub-content {
      animation: fadeIn 0.2s ease;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Status timeline */
    .hub-status-timeline {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      background: #f8f6f0;
      border-radius: 8px;
      flex-wrap: wrap;
    }
    .hub-timeline-step {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 11px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 0.85rem;
      color: var(--muted-foreground);
      opacity: 0.6;
    }
    .hub-timeline-step.passed {
      opacity: 1;
      background: #e9f3eb;
      border-color: #2D4A3E;
      color: #2D4A3E;
    }
    .hub-timeline-step.active {
      opacity: 1;
      background: #2D4A3E;
      border-color: #2D4A3E;
      color: #fff;
      font-weight: 700;
    }
    .hub-ts-arrow {
      color: var(--muted-foreground);
      font-weight: 700;
      flex-shrink: 0;
    }

    /* Budget bar */
    .hub-budget-bar {
      margin-top: 12px;
      position: relative;
      height: 28px;
      background: #f0eedf;
      border-radius: 6px;
      overflow: hidden;
    }
    .hub-budget-fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      transition: width 0.3s ease;
    }
    .hub-budget-fill.ok { background: linear-gradient(90deg, #2D4A3E, #3a6a3c); }
    .hub-budget-fill.warning { background: linear-gradient(90deg, #E8B87A, #f5c989); }
    .hub-budget-fill.over { background: linear-gradient(90deg, #c33, #e54); }
    .hub-budget-pct {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.78rem;
      font-weight: 700;
      color: #fff;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }

    /* Stats grid */
    .hub-stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 8px;
    }
    .hub-stat-card {
      background: #f8f6f0;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px 10px;
      text-align: center;
    }
    .hub-stat-icon {
      font-size: 1.4rem;
      margin-bottom: 4px;
    }
    .hub-stat-num {
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--primary);
      line-height: 1.1;
    }
    .hub-stat-lbl {
      font-size: 0.72rem;
      color: var(--muted-foreground);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-top: 4px;
      font-weight: 600;
    }

    /* Empty states */
    .hub-empty {
      text-align: center;
      padding: 20px 14px;
      background: #f8f6f0;
      border-radius: 8px;
      color: var(--muted-foreground);
      font-size: 0.88rem;
      line-height: 1.5;
    }
    .hub-more-info {
      text-align: center;
      font-size: 0.78rem;
      color: var(--muted-foreground);
      margin-top: 8px;
    }

    /* Link badge inside list items */
    .hub-link-badge {
      display: inline-block;
      font-size: 0.7rem;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 3px;
      background: #f0eedf;
      color: var(--primary);
      margin-left: 4px;
    }

    /* Pengar — kategori bars */
    .hub-kat-row {
      display: grid;
      grid-template-columns: 200px 1fr auto;
      gap: 10px;
      align-items: center;
      font-size: 0.85rem;
    }
    .hub-kat-label {
      font-weight: 600;
      color: var(--foreground);
    }
    .hub-kat-bar {
      height: 10px;
      background: #f0eedf;
      border-radius: 4px;
      overflow: hidden;
    }
    .hub-kat-fill {
      height: 100%;
      background: linear-gradient(90deg, #E8B87A, #f5c989);
      transition: width 0.3s ease;
    }
    .hub-kat-sum {
      font-weight: 700;
      color: var(--primary);
      text-align: right;
      min-width: 100px;
    }
    @media (max-width: 600px) {
      .hub-kat-row {
        grid-template-columns: 1fr auto;
      }
      .hub-kat-bar {
        grid-column: 1 / -1;
      }
    }

    /* Foton grid */
    .hub-foton-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 8px;
    }
    .hub-foto-item {
      position: relative;
      aspect-ratio: 1;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      background: #f0eedf;
      transition: transform 0.15s;
    }
    .hub-foto-item:hover {
      transform: scale(1.02);
    }
    .hub-foto-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .hub-foto-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 6px 8px;
      background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
      color: #fff;
      font-size: 0.72rem;
      font-weight: 600;
    }
    .hub-foto-lightbox {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.92);
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      animation: fadeIn 0.2s ease;
    }
    .hub-foto-lightbox img {
      max-width: 100%;
      max-height: 85vh;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    }
    .hub-foto-lightbox-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      color: #fff;
      border: 1px solid rgba(255,255,255,0.3);
      cursor: pointer;
      font-size: 1.5rem;
      line-height: 1;
    }
    .hub-foto-lightbox-info {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255,255,255,0.1);
      color: #fff;
      padding: 10px 16px;
      border-radius: 8px;
      font-size: 0.88rem;
      max-width: 90%;
      text-align: center;
      line-height: 1.5;
    }

    /* Checklist progress */
    .hub-cl-progress {
      display: inline-block;
      width: 60px;
      height: 8px;
      background: #f0eedf;
      border-radius: 4px;
      overflow: hidden;
      vertical-align: middle;
      margin-right: 6px;
    }
    .hub-cl-fill {
      height: 100%;
      background: linear-gradient(90deg, #2D4A3E, #3a6a3c);
      transition: width 0.3s ease;
    }
    /* ==== END PROJEKT HUB ==== */

    /* Sub-tab switcher (pentru Målning, Renovering) */
    .subtab-switcher {
      display: flex;
      gap: 6px;
      padding: 6px;
      background: #f8f6f0;
      border: 1px solid var(--border);
      border-radius: 14px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .subtab-btn {
      flex: 1 1 auto;
      min-width: 120px;
      padding: 10px 16px;
      border: none;
      background: transparent;
      color: var(--muted-foreground);
      font-family: inherit;
      font-weight: 700;
      font-size: 0.88rem;
      cursor: pointer;
      border-radius: 10px;
      transition: 0.15s ease;
      white-space: nowrap;
    }

    .subtab-btn:hover {
      background: rgba(0,0,0,0.04);
      color: var(--foreground);
    }

    .subtab-btn.active {
      background: var(--primary);
      color: var(--primary-foreground);
      box-shadow: var(--shadow-md);
    }

    .subtab-panel {
      display: none;
    }

    .subtab-panel.active {
      display: block;
    }

    /* Checkboxes (tillval) */
    .tillval-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
    }

    .tillval-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 14px;
      background: #f8f6f0;
      border: 1.5px solid var(--border);
      border-radius: 10px;
      cursor: pointer;
      transition: 0.15s ease;
    }

    .tillval-item:hover {
      border-color: var(--primary);
    }

    .tillval-item input[type="checkbox"] {
      margin-top: 3px;
      width: 18px;
      height: 18px;
      accent-color: var(--primary);
      flex-shrink: 0;
    }

    .tillval-item.checked {
      background: rgba(45, 74, 62, 0.06);
      border-color: var(--primary);
    }

    .tillval-label {
      font-weight: 600;
      font-size: 0.92rem;
      color: var(--foreground);
      line-height: 1.35;
    }

    .tillval-desc {
      font-size: 0.78rem;
      color: var(--muted-foreground);
      margin-top: 2px;
    }

    /* ==== OFFERT TABLE ==== */
    .offert-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 14px;
    }

    .offert-table thead th {
      text-align: left;
      font-size: 0.78rem;
      font-weight: 800;
      color: var(--muted-foreground);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 10px 0;
      border-bottom: 2px solid var(--border);
    }

    .offert-table thead th.right { text-align: right; }

    .offert-table tbody td {
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
      font-size: 0.95rem;
    }

    .offert-table tbody td.right {
      text-align: right;
      font-variant-numeric: tabular-nums;
      font-weight: 600;
    }

    .offert-table tbody td.type-label {
      font-size: 0.75rem;
      font-weight: 800;
      color: var(--muted-foreground);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      width: 80px;
    }

    .offert-table tbody td.type-label.arbete { color: var(--primary); }
    .offert-table tbody td.type-label.material { color: #9D6245; }  /* v107.5: morkare an --terracotta for att na WCAG AA (4.92:1) pa vitt */
    .offert-table tbody td.type-label.tillval { color: #8A6D2A; }  /* v107.5: morkare for WCAG AA (4.88:1) pa vitt */

    .offert-table tr.total-row td {
      border-top: 2px solid var(--foreground);
      border-bottom: none;
      padding-top: 16px;
      font-weight: 700;
      font-size: 1rem;
    }

    .offert-table tr.rot-row td {
      color: var(--rot);
      font-weight: 700;
      padding-top: 6px;
      padding-bottom: 6px;
      border-bottom: none;
    }

    .offert-table tr.final-row td {
      border-top: 2px solid var(--primary);
      padding-top: 16px;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.45rem;
      font-weight: 700;
      color: var(--primary);
      border-bottom: none;
    }

    .total-summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 14px;
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
    }

    .summary-pill {
      padding: 14px 18px;
      border-radius: 14px;
      background: #f8f6f0;
      border: 1px solid var(--border);
    }

    .summary-pill.highlight {
      background: var(--primary);
      color: #FFFFFF;
      border: none;
    }
    /* Forțăm text alb pe pill-ul highlight (fix v43 — contrast vizual) */
    .summary-pill.highlight .pill-label {
      color: #FFFFFF;
      opacity: 0.92;
    }
    .summary-pill.highlight .pill-value {
      color: #FFFFFF;
      font-weight: 800;
      text-shadow: 0 1px 2px rgba(0,0,0,0.15);
    }

    .summary-pill .pill-label {
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      opacity: 0.7;
    }

    .summary-pill .pill-value {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem;
      font-weight: 700;
      margin-top: 2px;
      font-variant-numeric: tabular-nums;
    }

    /* ==== MOBILE ==== */
    @media (max-width: 900px) {
      .app {
        grid-template-columns: 1fr;
      }

      .sidebar {
        position: static;
        height: auto;
        padding: 12px 12px 14px !important;
        overflow: visible !important;
        overflow-y: visible !important;
        touch-action: auto;
      }

      .sidebar-logo {
        font-size: 1.15rem !important;
        margin-bottom: 0 !important;
      }

      .sidebar-tag {
        margin-bottom: 10px !important;
        font-size: 0.65rem !important;
      }

      .sidebar-nav {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 6px;
        margin-bottom: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 4px;
      }

      .sidebar-item {
        padding: 8px 12px !important;
        white-space: nowrap;
        font-size: 0.82rem !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        flex-basis: auto !important;
        min-width: auto !important;
        width: auto !important;
        gap: 6px !important;
      }

      /* v73: Sync-bar compact pe mobile - doar icon, fără text */
      .sync-bar {
        padding: 4px 8px !important;
        margin: 6px 0 8px 0 !important;
        font-size: 0.72rem !important;
        gap: 4px !important;
        background: rgba(255,255,255,0.06) !important;
        border-color: rgba(255,255,255,0.1) !important;
        max-width: fit-content;
      }
      .sync-bar .sync-indicator {
        flex: 0 0 auto !important;
        color: rgba(253, 251, 247, 0.85);
      }
      .sync-bar .sync-indicator > span:nth-child(2) {
        font-size: 0.7rem;
      }
      .sync-bar .sync-now-btn {
        padding: 2px 6px !important;
        font-size: 0.85rem !important;
      }

      .sidebar-icon {
        font-size: 1rem !important;
      }

      /* v72: Activez butonul mobile-only */
      .sidebar-item-mobile-only {
        display: flex !important;
      }

      .sidebar-divider {
        display: none;
      }

      /* v72: Historik buton ASCUNS PE MOBILE complet — Historik are tab dedicat în sidebar nav */
      .sidebar-section-title {
        display: none !important;
      }

      .sidebar > .history-tabs,
      .sidebar > .history-filters,
      .sidebar-history {
        display: none !important;
      }

      .main {
        padding: 18px 14px 32px;
      }

      .form-grid {
        grid-template-columns: 1fr;
      }

      .slider-row {
        grid-template-columns: 1fr;
      }
    }

    /* ==== AUTH GATE ==== */
    .auth-gate {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--background);
      z-index: 9999;
      padding: 20px;
    }

    .auth-box {
      max-width: 380px;
      text-align: center;
      padding: 40px 32px;
      background: #fff;
      border-radius: 18px;
      box-shadow: var(--shadow-lg);
      border: 1px solid var(--border);
    }

    .auth-box h1 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.8rem;
      font-weight: 600;
      margin: 0 0 8px;
    }

    .auth-box p {
      color: var(--muted-foreground);
      font-size: 0.92rem;
      margin: 0 0 20px;
    }

    .auth-box input {
      width: 100%;
      padding: 12px 14px;
      border: 1.5px solid var(--border);
      border-radius: 10px;
      font: inherit;
      font-size: 1rem;
      margin-bottom: 12px;
      outline: none;
    }

    .auth-box input:focus {
      border-color: var(--primary);
    }

    .auth-error {
      color: #c94a4a;
      font-size: 0.85rem;
      margin-top: 8px;
    }

    /* ==== PRINT STYLES (för PDF-export) ==== */
    @media print {
      @page { margin: 1.5cm; size: A4; }
      .sidebar, .page-header .action-bar, .btn, #form-section, .print-hide { display: none !important; }
      body, html { background: #fff !important; }
      .main { padding: 0; max-width: 100%; }
      .app { grid-template-columns: 1fr; }
      .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; page-break-inside: avoid; }
      .offert-table { font-size: 10pt; }
      .print-only { display: block !important; }
    }

    .print-only { display: none; }

    .print-header {
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 2px solid var(--primary);
    }

    .print-header h1 {
      font-family: 'Cormorant Garamond', serif;
      color: var(--primary);
      margin: 0;
    }

    .print-header .contact-line {
      color: var(--muted-foreground);
      font-size: 0.9rem;
      margin-top: 4px;
    }
/* ==== PROJEKT FAKTURA MODAL (v47) ==== */
.pf-radio-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: #fafaf6;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: 0.15s;
}
.pf-radio-row:hover {
  border-color: var(--primary);
}
.pf-radio-row input[type="radio"] {
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}
.pf-radio-row input[type="radio"]:checked + div {
  color: var(--primary);
}
.pf-radio-row:has(input:checked) {
  border-color: var(--primary);
  background: #f0f7f0;
  border-width: 2px;
  padding: 9px 11px;
}

.pf-pct-btn {
  background: #fff;
  border: 1.5px solid var(--border);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  transition: 0.15s;
}
.pf-pct-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.pf-pct-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.pf-include-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: #fafaf6;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.pf-include-row:has(input:checked) {
  border-color: var(--primary);
  background: #f0f7f0;
}
.pf-include-row input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
  width: 16px;
  height: 16px;
}
.pf-include-row .pf-inc-label {
  flex: 1;
  font-weight: 600;
  font-size: 0.88rem;
}
.pf-include-row .pf-inc-desc {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 2px;
}
.pf-include-row .pf-inc-amount {
  flex-shrink: 0;
  font-weight: 800;
  font-size: 0.95rem;
  color: #2C4A2E;
}
.pf-include-row.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pf-include-row.disabled:hover {
  border-color: var(--border);
}
/* ==== END PROJEKT FAKTURA MODAL ==== */

/* ==== LOGISTICS CARD (v48) ==== */
.logistics-card {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f0f5ff 0%, #fff 100%);
  border: 1px solid var(--border);
  border-left: 3px solid #4a90e2;
}
.logistics-card.logistics-success {
  border-left-color: #2C4A2E;
  background: linear-gradient(135deg, #f0f7f0 0%, #fff 100%);
}
.logistics-card.logistics-warning {
  border-left-color: #E8B87A;
  background: #fff7e6;
}
.logistics-card.logistics-empty {
  border-left-color: #ccc;
  background: #fafafa;
}
.logistics-card h3 {
  margin: 0 0 8px;
  color: #152c49;
  font-size: 1.05rem;
}

.logistics-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #ddd;
  border-top-color: #152c49;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

.logistics-stats-row {
  display: flex;
  gap: 12px;
  margin: 12px 0;
}
.logistics-stat-cell {
  flex: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
}
.logistics-stat-cell strong {
  font-size: 1.15rem;
  color: var(--primary);
  font-weight: 800;
}
.logistics-stat-cell span {
  font-size: 0.72rem;
  color: var(--muted-foreground);
  margin-top: 2px;
}

.logistics-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.logistics-form-field label {
  font-size: 0.72rem;
  color: var(--muted-foreground);
  font-weight: 600;
  display: block;
  margin-bottom: 3px;
}
.logistics-form-field input {
  width: 100%;
  padding: 6px 8px !important;
  font-size: 0.85rem !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 6px !important;
  background: #fff !important;
  text-align: center;
}
.logistics-form-field input:focus {
  border-color: var(--primary) !important;
}

.logistics-trangsel-warning {
  background: #fff3cd;
  border: 1px solid #ffe5a0;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.85rem;
  color: #7a5e00;
  margin: 12px 0;
  line-height: 1.5;
}

.logistics-summary {
  margin-top: 12px;
  padding: 12px 14px;
  background: #fafaf6;
  border-radius: 8px;
  font-size: 0.88rem;
}
.logistics-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  line-height: 1.5;
}
.logistics-row.total {
  border-top: 2px solid var(--primary);
  margin-top: 8px;
  padding-top: 10px;
  font-weight: 800;
  color: var(--primary);
  font-size: 1rem;
}
/* ==== END LOGISTICS CARD ==== */

/* ==== SNABBKALKYL & PRELIMINÄR (v51) ==== */
#snk-meddelande {
  font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
  font-size: 0.92rem;
}

/* Range price display */
#snk-pris-troligt {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Preliminar status badge — ⚡ blå */
.status-badge[data-status="preliminar"],
.status-pill.status-preliminar {
  background: #4a90e215;
  color: #3B73B4;  /* v107.5: morkare an bakgrundens kalla for WCAG AA */
  border-color: #4a90e2;
}

/* Konverterad status — lila */
.status-badge[data-status="konverterad"],
.status-pill.status-konverterad {
  background: #9b59b615;
  color: #9b59b6;
  border-color: #9b59b6;
}

/* Preliminär stamp i offert (för PDF/print) */
.preliminar-stamp {
  display: inline-block;
  background: #3B73B4;  /* v107.5: morkare for att vit text ska na WCAG AA (4.89:1) */
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  vertical-align: middle;
  margin-left: 8px;
}
.preliminar-disclaimer {
  background: #f0f5ff;
  border-left: 3px solid #4a90e2;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
  color: #1a4380;
  line-height: 1.6;
  margin: 14px 0;
}

@media (max-width: 600px) {
  /* Pris-display responsive */
  #snk-pris-troligt { font-size: 1.8rem !important; }
  #snk-pris-min, #snk-pris-max { font-size: 1.1rem !important; }
}
/* ==== END SNABBKALKYL ==== */

/* ==== v58: Customer Experience Suite ==== */
/* Suggestions widget */
.cx-suggestion-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
}
.cx-sug-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.cx-sug-content {
  flex: 1;
  min-width: 0;
}
.cx-sug-header {
  font-size: 0.92rem;
  margin-bottom: 3px;
}
.cx-sug-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  margin-left: 4px;
}
.cx-sug-text {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--foreground);
}
.cx-sug-meta {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 3px;
}
.cx-sug-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-self: center;
}
.cx-sug-btn-action {
  background: #152c49;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.cx-sug-btn-action:hover {
  background: #2a4060;
}
.cx-sug-btn-dismiss {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
}
.cx-sug-btn-dismiss:hover {
  background: #c33;
  color: #fff;
  border-color: #c33;
}

/* Customer rating modal — stars */
.cx-stars {
  display: flex;
  gap: 4px;
  font-size: 1.6rem;
  color: #d0d0d0;
  line-height: 1;
}
.cx-stars.interactive .cx-star {
  cursor: pointer;
  transition: 0.1s;
}
.cx-stars.interactive .cx-star:hover {
  transform: scale(1.15);
}
.cx-star {
  user-select: none;
}
.cx-star.filled {
  color: #E8B87A;
}

/* Customer tags */
.cx-tags-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cx-tag-btn {
  padding: 6px 12px;
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: 16px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--foreground);
  transition: 0.15s;
}
.cx-tag-btn:hover {
  border-color: var(--primary);
}
.cx-tag-btn.active {
  font-weight: 700;
}

/* Customer feedback row */
.cx-section {
  margin-bottom: 20px;
}
.cx-section h3 {
  font-size: 0.95rem;
  margin: 0 0 8px;
  color: var(--primary);
}
.cx-feedback-item {
  background: #f8f6f0;
  padding: 8px 12px;
  border-radius: 8px;
  margin-top: 6px;
}
.cx-feedback-text {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--foreground);
  margin: 4px 0;
}
.cx-feedback-meta {
  font-size: 0.74rem;
  color: var(--muted-foreground);
}
.cx-projekt-row {
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.cx-projekt-row:last-child {
  border-bottom: none;
}
.cx-projekt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* SM-tab content */
.sm-tab-content {
  padding-top: 4px;
}
/* ==== End v58 ==== */

/* ==== v59: App Version Footer ==== */
.app-footer {
  margin-top: 28px;
  padding: 16px 20px 24px;
  border-top: 1px solid var(--border);
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.02) 100%);
}
.app-footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--muted-foreground);
  font-family: 'SF Mono', 'Monaco', monospace;
}
.app-footer-name {
  font-weight: 600;
  color: var(--foreground);
}
.app-footer-app {
  color: var(--muted-foreground);
  font-weight: 400;
}
.app-footer-version {
  background: var(--primary);
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}
.app-footer-meta {
  font-size: 0.74rem;
  opacity: 0.7;
}
@media (max-width: 600px) {
  .app-footer { padding: 12px 14px 20px; }
  .app-footer-inner { font-size: 0.72rem; }
}
/* ==== End v59 footer ==== */

/* ==== v75: SIDEBAR MOBILE — unific cele 4 nav-uri într-un singur scroll ==== */
/* Pe mobile, .sidebar conține: logo, tag, sync-bar, nav, divider, nav, divider, nav, divider, nav */
/* Trebuie să facem cele 4 nav-uri să curgă într-un SINGUR rând orizontal scroll-abil */

body.is-mobile .sidebar {
  position: static !important;
  height: auto !important;
  padding: 12px 12px 14px !important;
  overflow: visible !important;
  display: block !important;
}

/* Logo + tag + sync-bar rămân block */
body.is-mobile .sidebar-logo,
body.is-mobile .sidebar-tag,
body.is-mobile .sync-bar {
  display: block !important;
  width: auto !important;
}

body.is-mobile .sync-bar {
  display: inline-flex !important;
  max-width: fit-content !important;
}

/* v80: regulile sidebar-nav row sunt în secțiunea v80 mai jos */
/* Wrapper container pentru toate nav-urile — flex row, scroll horizontal */
/* Soluție: aplic flex chiar pe .sidebar > nav grupare */
body.is-mobile .sidebar-nav {
  /* v80: gestionat în regula body.is-mobile .sidebar > nav.sidebar-nav mai jos */
}

/* Container care înglobează toate nav-urile + dividere — devine scroll */
body.is-mobile .sidebar > nav.sidebar-nav {
  /* Fiecare nav individual nu mai e block, ci inline */
}

/* Trick: aplicăm overflow + scroll pe un wrapper. Dar fără wrapper, fac sidebar-nav fiecare să aibă display inline-flex */
/* Și dividerele să fie inline */

/* v76: divider-ele sunt gestionate în secțiunea de mai sus (.mobile-nav-scroller > .sidebar-divider) */

/* Container scroll: aplicăm pe .sidebar > (zona de nav-uri) */
/* Dar pentru că nav-urile sunt direct children în .sidebar fără wrapper, trebuie să fac asta diferit */
/* Soluția corectă: wrapper-ul vine din JS sau un parinte */

body.is-mobile .sidebar-item {
  padding: 8px 12px !important;
  white-space: nowrap !important;
  font-size: 0.82rem !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: auto !important;
  gap: 6px !important;
  display: inline-flex !important;
  align-items: center;
}

body.is-mobile .sidebar-icon {
  font-size: 1rem !important;
  width: auto !important;
}

body.is-mobile .sidebar-section-title {
  display: none !important;
}

body.is-mobile .sidebar > .history-tabs,
body.is-mobile .sidebar > .history-filters,
body.is-mobile .sidebar-history {
  display: none !important;
}

body.is-mobile .sidebar-item-mobile-only {
  display: inline-flex !important;
}

body.is-mobile .sync-bar {
  padding: 4px 8px !important;
  margin: 6px 0 10px 0 !important;
  font-size: 0.72rem !important;
  gap: 4px !important;
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

body.is-mobile .sync-bar .sync-indicator {
  flex: 0 0 auto !important;
  color: rgba(253, 251, 247, 0.85) !important;
}

body.is-mobile .sync-bar .sync-now-btn {
  padding: 2px 6px !important;
  font-size: 0.85rem !important;
}

body.is-mobile .sidebar-logo {
  font-size: 1.15rem !important;
  margin-bottom: 0 !important;
}

body.is-mobile .sidebar-tag {
  margin-bottom: 6px !important;
  font-size: 0.65rem !important;
}

/* ==== v91: Galleri features — filter chips, source badge, lightbox nav ==== */
.gallery-filter-chip {
  background: #fff;
  border: 1px solid var(--border, #e0d8c5);
  color: var(--foreground, #1f2926);
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.gallery-filter-chip:hover {
  border-color: var(--gold, #E8B87A);
  background: rgba(232, 184, 122, 0.06);
}
.gallery-filter-chip.active {
  background: #2C4A2E;
  border-color: #2C4A2E;
  color: #fff;
}

.hub-foto-source-badge {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  align-self: flex-start;
}

.hub-foto-overlay {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  padding: 8px !important;
}

.hub-foto-overlay .hub-foto-date {
  background: rgba(0, 0, 0, 0.55);
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 0.72rem;
  align-self: flex-end;
}

/* Lightbox navigation arrows */
.lb-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  transition: background 0.15s ease;
  font-family: serif;
}
.lb-nav:hover {
  background: rgba(255, 255, 255, 0.28);
}
.lb-prev { left: 20px; }
.lb-next { right: 20px; }

@media (max-width: 600px) {
  .lb-nav {
    width: 44px;
    height: 44px;
    font-size: 2rem;
  }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
}
/* ==== END v91 GALLERY ==== */

/* ==== v100: Clickable KPI cards on dashboard ==== */
.kpi-card.kpi-clickable {
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.kpi-card.kpi-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  border-color: var(--gold, #E8B87A);
}
.kpi-card.kpi-clickable:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
/* ==== END v100 KPI CLICKABLE ==== */

/* ==== v83: MOBILE BOTTOM TAB BAR + BOTTOM SHEETS ==== */

/* Bottom bar — HIDDEN by default, visible only on mobile */
.mobile-bottom-bar {
  display: none;
}

body.is-mobile .mobile-bottom-bar {
  display: flex !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9000 !important;
  background: #152c49 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0)) 0 !important;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15) !important;
  justify-content: space-around;
  align-items: stretch;
  font-family: 'Manrope', -apple-system, sans-serif;
}

body.is-mobile .mbb-item {
  flex: 1;
  background: transparent;
  border: none;
  color: rgba(253, 251, 247, 0.65);
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 500;
  transition: color 0.15s ease, background 0.15s ease;
  border-radius: 8px;
  margin: 0 2px;
}

body.is-mobile .mbb-item:active {
  background: rgba(255, 255, 255, 0.08);
}

body.is-mobile .mbb-item.active {
  color: var(--gold, #E8B87A);
}

body.is-mobile .mbb-icon {
  font-size: 1.35rem;
  line-height: 1;
}

body.is-mobile .mbb-label {
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}

/* Padding bottom pe main pentru a nu fi acoperit de bottom bar */
body.is-mobile .main {
  padding-bottom: 100px !important;
}

/* v83 fix: dacă alte reguli folosesc padding shorthand, asigur că padding-bottom rămâne mare */
body.is-mobile main.main,
body.is-mobile .app > main,
body.is-mobile .app > .main {
  padding-bottom: 100px !important;
}

/* App-footer trebuie să rămână vizibil deasupra bottom bar-ului */
body.is-mobile .app-footer {
  margin-bottom: 8px !important;
  padding-bottom: 8px !important;
}

/* Hide sidebar nav-uri pe mobile — folosim bottom bar în loc */
body.is-mobile .sidebar > nav.sidebar-nav,
body.is-mobile .sidebar > .sidebar-divider,
body.is-mobile .sidebar-section-title,
body.is-mobile .sidebar > .history-tabs,
body.is-mobile .sidebar > .history-filters,
body.is-mobile .sidebar-history {
  display: none !important;
}

/* Sidebar pe mobile: doar header (logo + tag + sync-bar), compact */
body.is-mobile .sidebar {
  padding: 10px 14px 8px !important;
  height: auto !important;
}

/* ==== Bottom Sheet (drawer din jos) ==== */
.bottom-sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 25, 0.5);
  z-index: 9500;
  align-items: flex-end;
  justify-content: center;
  animation: bsFadeIn 0.2s ease;
}

.bottom-sheet-backdrop.visible {
  display: flex;
}

@keyframes bsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bottom-sheet {
  background: var(--background, #f5f3ed);
  width: 100%;
  max-width: 600px;
  border-radius: 18px 18px 0 0;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0));
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 -8px 32px rgba(20, 30, 25, 0.3);
  animation: bsSlideUp 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes bsSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.bs-handle {
  width: 40px;
  height: 4px;
  background: rgba(20, 30, 25, 0.2);
  border-radius: 2px;
  margin: 4px auto 12px;
}

.bs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 4px;
}

.bs-header h3 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--foreground, #1f2926);
}

.bs-close {
  background: rgba(20, 30, 25, 0.08);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--foreground, #1f2926);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bs-close:active {
  background: rgba(20, 30, 25, 0.18);
}

.bs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-bottom: 8px;
}

.bs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 8px;
  background: #fff;
  border: 1px solid rgba(20, 30, 25, 0.08);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--foreground, #1f2926);
  transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
}

.bs-item:active {
  background: rgba(232, 184, 122, 0.08);
  border-color: var(--gold, #E8B87A);
  transform: scale(0.97);
}

.bs-item-icon {
  font-size: 1.7rem;
  line-height: 1;
}

.bs-item-label {
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.01em;
}

/* ==== END v83 ==== */

/* ==== v81: NUCLEAR mobile constraint — orice element nu depășește viewport ==== */
/* Cauza vw=822 pe phone 412: există elemente cu lățime fixă mare.
   Fix nuclear: forțat box-sizing + max-width pe tot */
body.is-mobile * {
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

/* Excepții pentru elemente care DEBE să aibă lățime mai mare (scrollabile) */
body.is-mobile .sidebar-nav,
body.is-mobile .sidebar-nav *,
body.is-mobile .mobile-nav-scroller,
body.is-mobile .mobile-nav-scroller * {
  max-width: none !important;  /* Permit conținut larger pentru scroll horizontal */
}

/* Dar parent-ul lor (sidebar) tot constrânge */
body.is-mobile .sidebar {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* Modal-uri și backdrops — vizibilitate completă */
body.is-mobile .share-modal-backdrop,
body.is-mobile .share-modal-backdrop *,
body.is-mobile #critical-sync-warning,
body.is-mobile #pwa-update-banner {
  max-width: 100vw !important;
}

/* Forțat html și body */
html, body {
  max-width: 100% !important;
}

body.is-mobile {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100vw !important;
}

html {
  overflow-x: hidden !important;
}
/* ==== END v81 ==== */

/* ==== v80: REVERT design — 4 nav-uri pe rânduri SEPARATE, fiecare cu scroll horizontal ==== */
/* User feedback: vrea grupuri separate pe rânduri, nu toate înghesuite pe 1 rând */

/* OPRESC JS wrap din v75 — fac ca scroller-ul (dacă există) să se comporte ca block layout */
body.is-mobile .mobile-nav-scroller {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

/* Fiecare nav e propriu rând cu scroll orizontal individual */
body.is-mobile .mobile-nav-scroller > nav.sidebar-nav,
body.is-mobile .sidebar > nav.sidebar-nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin;
  padding: 0 0 6px 0 !important;
  margin: 0 0 4px 0 !important;
  box-sizing: border-box !important;
  /* Indicator vizibil scroll cu shadow gradient pe margine dreaptă */
  mask-image: linear-gradient(to right, black calc(100% - 20px), transparent);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 20px), transparent);
}

/* Divider-ele între nav-uri pe mobile devin separator HORIZONTAL subtle */
body.is-mobile .mobile-nav-scroller > .sidebar-divider,
body.is-mobile .sidebar > .sidebar-divider {
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  margin: 6px 0 !important;
  background: rgba(255,255,255,0.1) !important;
}

/* ==== END v80 ==== */

/* ==== v79: PREVENT HORIZONTAL OVERFLOW (the real root cause) ==== */
/* Cauza găsită prin debug box pe phone:
   window.innerWidth raporta 2558px pe un device cu 412px lățime fizică.
   Asta înseamnă că UN element în pagină avea lățime mai mare decât viewport-ul
   și forța întregul body să se extindă orizontal. */

body.is-mobile {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

body.is-mobile .app {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  width: 100% !important;
}

body.is-mobile .main {
  max-width: 100vw !important;
  width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

body.is-mobile .sidebar {
  max-width: 100vw !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.is-mobile .mobile-nav-scroller {
  max-width: calc(100vw - 24px) !important;
  width: calc(100vw - 24px) !important;
  box-sizing: border-box !important;
}

/* Forțat orice card/form să nu depășească viewport-ul */
body.is-mobile .card,
body.is-mobile .calc-panel,
body.is-mobile .field,
body.is-mobile .input-group {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Imagini/embed-uri responsive */
body.is-mobile img,
body.is-mobile iframe,
body.is-mobile table,
body.is-mobile pre {
  max-width: 100% !important;
}

/* Tabele cu scroll propriu pe mobile (nu împing body) */
body.is-mobile table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
/* ==== END v79 OVERFLOW FIX ==== */

/* v76: Al 4-lea divider rămâne în sidebar (între nav și Historik section) — ascund pe mobile pentru a nu apărea ca element gol */
body.is-mobile .sidebar > .sidebar-divider {
  display: none !important;
}

/* DAR cele care sunt în scroller să fie vizibile */
body.is-mobile .mobile-nav-scroller > .sidebar-divider {
  display: inline-block !important;
  width: 1px !important;
  height: 20px !important;
  margin: 0 4px !important;
  background: rgba(255,255,255,0.2) !important;
  vertical-align: middle;
  flex-shrink: 0;
}

/* === v75 CRITICAL: wrap-er pentru cele 4 nav-uri într-un singur scroll === */
/* Adăugat prin JS în init() */
body.is-mobile .mobile-nav-scroller {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 6px !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 4px !important;
  align-items: center;
}

body.is-mobile .main {
  padding: 14px 14px 100px !important;
}

body.is-mobile .form-grid {
  grid-template-columns: 1fr !important;
}

body.is-mobile .app {
  grid-template-columns: 1fr !important;
  display: grid !important;
}
/* ==== END v75 ==== */

/* v107.27: kollapsbar sidebar — mer plats at sidan man jobbar pa.
   Tillstandet sparas i localStorage sa det haller sig kvar mellan besok. */
.sidebar-collapse-btn {
  position: absolute;
  top: 14px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(253, 251, 247, 0.25);
  background: rgba(253, 251, 247, 0.08);
  color: var(--primary-foreground);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-collapse-btn:hover { background: rgba(253, 251, 247, 0.18); }

.sidebar-expand-btn {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 60;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border, #e5e1d8);
  background: #fff;
  color: #152c49;
  font-size: 1.15rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  align-items: center;
  justify-content: center;
}

body.sidebar-collapsed .sidebar { display: none !important; }
body.sidebar-collapsed .app { grid-template-columns: 1fr !important; }
body.sidebar-collapsed .sidebar-expand-btn { display: flex; }

@media (max-width: 900px) {
  /* Pa mobil ar sidebaren redan en smal horisontell rad (inte en 260px-kolumn)
     — kollapsad ger bara lite extra hojd, men knappen fungerar likadant. */
  .sidebar-collapse-btn { top: 6px; right: 6px; }
}

/* v107.28: nar sidebaren ar dold, fyll ut platsen den lamnade — tar bort
   den gamla 1100px-begransningen pa .main. Standardvyn (sidebar synlig)
   ar ORORD, 1100px galler dar precis som forut. */
body.sidebar-collapsed .main { max-width: none; }

/* v107.29: "bara ikoner" — ett tredje lage mellan full meny och helt dold,
   valbart i Installningar. Samma kollaps-knapp togglar till det lage man
   valt dar (sidebar-collapsed ELLER sidebar-icons-only), aldrig bada. */
body.sidebar-icons-only .app { grid-template-columns: 68px 1fr !important; }
body.sidebar-icons-only .main { max-width: none; }
body.sidebar-icons-only .sidebar {
  padding: 50px 6px 16px !important;
  /* overflow-y:auto arvs fran .sidebar-basreglen — INTE overflow:visible har,
     annars kan inte menyn scrolla for sig sjalv och hela sidan blir langre
     istallet (det var buggen i v107.29). */
}
body.sidebar-icons-only .sidebar-logo,
body.sidebar-icons-only .sidebar-tag,
body.sidebar-icons-only .sync-bar,
body.sidebar-icons-only .sidebar-item-mobile-only {
  display: none !important;
}
body.sidebar-icons-only .sidebar-nav { gap: 3px; }
body.sidebar-icons-only .sidebar-item {
  justify-content: center;
  padding: 11px 2px !important;
  gap: 0 !important;
  position: relative;
}
body.sidebar-icons-only .sidebar-item .sidebar-icon { font-size: 1.3rem; }
/* Dolj bara etikett-spannet (det oklassade) — ikon och notis-badge ska synas kvar */
body.sidebar-icons-only .sidebar-item > span:not(.sidebar-icon):not(.dok-badge):not(.ep-badge) {
  display: none;
}
body.sidebar-icons-only .sidebar-item .dok-badge,
body.sidebar-icons-only .sidebar-item .ep-badge {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  left: auto !important;
  margin: 0 !important;
  font-size: 0.6rem !important;
  min-width: 15px !important;
  padding: 0 3px !important;
  line-height: 14px !important;
  text-align: center;
}
body.sidebar-icons-only .sidebar-divider { margin: 10px 4px; }
/* Kollaps-knappen stannar synlig (smal meny har plats) — centrerad istallet
   for hornet-positionerad, och pilen pekar nu at höger (expandera). */
body.sidebar-icons-only .sidebar-collapse-btn {
  position: static;
  margin: 0 auto 12px;
  display: flex;
}

/* v107.29: flytande spara-rad pa Installningar — alltid synlig, oavsett
   hur langt ner man scrollat pa denna langa sida. */
.st-sticky-save {
  position: fixed;
  bottom: 20px;
  right: 24px;
  z-index: 200;
  display: flex;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border, #e5e1d8);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
@media (max-width: 900px) {
  .st-sticky-save { left: 12px; right: 12px; bottom: 12px; justify-content: center; }
}

/* ==== v107.38: Inställningar i flikar + sök ==== */
.st-sok { margin: 0 0 12px; }
.st-sok input[type="search"] {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.95rem;
  background: #fff;
  color: var(--foreground);
  border: 1px solid var(--border, #e5e1d8);
  border-radius: 12px;
}
.st-sok input[type="search"]:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.st-sok-info { min-height: 1.1em; margin-top: 6px; font-size: 0.82rem; color: var(--muted-foreground); }

.st-tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  padding: 6px;
  margin-bottom: 20px;
  background: #f8f6f0;
  border: 1px solid var(--border, #e5e1d8);
  border-radius: 14px;
}
.st-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  border-radius: 10px;
  transition: 0.15s ease;
}
.st-tab:hover { background: rgba(0, 0, 0, 0.04); color: var(--foreground); }
.st-tab.active { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-md); }
.st-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.st-tab-ikon { font-size: 1.05rem; }
@media (max-width: 900px) {
  .st-tabs { grid-template-columns: repeat(3, 1fr); }
  .st-tab { flex-direction: column; gap: 2px; font-size: 0.8rem; padding: 8px 4px; }
}

/* Utan JS visas alla kort som förut; JS lägger på .st-flikar-pa */
.st-grupp-rubrik { display: none; margin: 0 0 12px; font-size: 1.05rem; font-weight: 700; color: var(--muted-foreground); }
#page-settings.st-flikar-pa .st-grupp { display: none; }
#page-settings.st-flikar-pa .st-grupp.active { display: block; }
#page-settings.st-flikar-pa.st-soker .st-grupp { display: block; }
#page-settings.st-flikar-pa.st-soker .st-grupp-rubrik { display: block; }
#page-settings.st-flikar-pa .st-grupp[hidden],
#page-settings .card.st-dold { display: none !important; }
#page-settings.st-soker .st-tab.active { background: transparent; color: var(--muted-foreground); box-shadow: none; }

/* Flytande Spara-raden behövs bara där det finns formulärfält som kräver Spara */
#page-settings.st-flikar-pa[data-grupp="sakerhet"]:not(.st-soker) .st-sticky-save,
#page-settings.st-flikar-pa[data-grupp="data"]:not(.st-soker) .st-sticky-save,
#page-settings.st-flikar-pa[data-grupp="enhet"]:not(.st-soker) .st-sticky-save { display: none; }