/* CSS-variabler för light mode (standard) */
    :root {
      --bg-primary: #f5f5f5;
      --bg-secondary: #fff;
      --bg-tertiary: #f8f8f8;
      --bg-quaternary: #fafafa;
      --bg-input: #fff;
      --bg-modal: #fff;
      --bg-table: #fff;
      --bg-table-header: #f8f8f8;
      --bg-table-hover: #fafafa;
      --bg-table-row-hover: #f5f5f5;
      --bg-placering-rubrik: #f0f0f0;
      --text-primary: #333;
      --text-secondary: #666;
      --text-tertiary: #999;
      --text-white: #fff;
      --text-success: #2e7d32;
      --text-error: #c62828;
      --border-color: #ddd;
      --border-color-light: #e0e0e0;
      --border-color-dark: #333;
      --border-color-strong: #ccc;
      --shadow: rgba(0,0,0,0.1);
      --shadow-light: rgba(0,0,0,0.05);
      --button-primary: #4a90e2;
      --button-primary-hover: #357abd;
      --button-secondary: #666;
      --button-secondary-hover: #555;
      --button-success: #4caf50;
      --button-success-hover: #388e3c;
      --button-danger: #d32f2f;
      --button-danger-hover: #b71c1c;
      --button-warning: #ff9800;
      --button-warning-hover: #f57c00;
      --button-default: #333;
      --button-default-hover: #555;
      --button-info: #1976d2;
      --button-info-hover: #1565c0;
      --required-color: #d32f2f;
    }
    
    /* CSS-variabler för dark mode */
    [data-theme="dark"] {
      --bg-primary: #1a1a1a;
      --bg-secondary: #2d2d2d;
      --bg-tertiary: #3a3a3a;
      --bg-quaternary: #404040;
      --bg-input: #2d2d2d;
      --bg-modal: #2d2d2d;
      --bg-table: #2d2d2d;
      --bg-table-header: #3a3a3a;
      --bg-table-hover: #404040;
      --bg-table-row-hover: #353535;
      --bg-placering-rubrik: #404040;
      --text-primary: #e0e0e0;
      --text-secondary: #b0b0b0;
      --text-tertiary: #808080;
      --text-white: #fff;
      --text-success: #66bb6a;
      --text-error: #ef5350;
      --border-color: #444;
      --border-color-light: #555;
      --border-color-dark: #666;
      --border-color-strong: #555;
      --shadow: rgba(0,0,0,0.3);
      --shadow-light: rgba(0,0,0,0.2);
      --button-primary: #5ba3f5;
      --button-primary-hover: #4a90e2;
      --button-secondary: #888;
      --button-secondary-hover: #777;
      --button-success: #66bb6a;
      --button-success-hover: #4caf50;
      --button-danger: #ef5350;
      --button-danger-hover: #e53935;
      --button-warning: #ffa726;
      --button-warning-hover: #ff9800;
      --button-default: #555;
      --button-default-hover: #666;
      --button-info: #5ba3f5;
      --button-info-hover: #4a90e2;
      --required-color: #ef5350;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--bg-primary);
      margin: 0; 
      padding: 0;
      min-height: 100vh;
      color: var(--text-primary);
      /* Förhindra scroll-hopp på mobil */
      overscroll-behavior: none;
      -webkit-overflow-scrolling: touch;
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    
    /* Säkerställ att body centrerar innehåll korrekt */
    body > #loginContainer {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-direction: column !important;
    }
    
    /* Förhindra scroll-hopp på mobil */
    html {
      overscroll-behavior: none;
      -webkit-overflow-scrolling: touch;
    }
    
    /* Använd dynamic viewport height på mobil för att undvika hopp när tangentbordet dyker upp */
    @media (max-width: 768px) {
      body {
        min-height: 100dvh; /* Dynamic viewport height */
      }
      
      .container {
        /* Ta bort min-height: 100dvh för att förhindra vitt utrymme när innehåll är dolt */
        /* min-height: 100dvh; */
        transition: background-color 0.3s ease;
      }
      
      .screen-container {
        min-height: 100dvh;
      }
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      position: relative;
      background: var(--bg-secondary);
      /* Ta bort min-height: 100vh för att förhindra vitt utrymme när innehåll är dolt */
      /* min-height: 100vh; */
      /* Förhindra scroll-hopp */
      overscroll-behavior: none;
      transition: background-color 0.3s ease;
    }
    
    /* Optimera container för mobil */
    @media (max-width: 768px) {
      .container {
        padding: 12px !important;
      }
      
      #inventeraVisning {
        padding: 0 !important;
        margin: 0 !important;
      }
    }
    h1 { text-align: center; margin-top: 0; margin-bottom: 24px; font-size: 1.5em; font-weight: 600; color: var(--text-primary); }
    h2 { margin-top: 32px; margin-bottom: 16px; border-bottom: 1px solid var(--border-color-light); padding-bottom: 8px; font-size: 1.2em; font-weight: 600; color: var(--text-primary); }
    h3 { font-size: 1em; margin-top: 20px; margin-bottom: 10px; font-weight: 600; color: var(--text-primary); }
    #artiklarTableWrapper {
      max-height: 500px;
      overflow-y: auto;
      border: 1px solid var(--border-color-light);
      margin-bottom: 20px;
      transition: border-color 0.3s ease;
    }
    table { 
      width: 100%; 
      border-collapse: collapse; 
      margin: 0; 
      background-color: var(--bg-table);
      transition: background-color 0.3s ease;
    }
    th, td { 
      padding: 8px 10px; 
      text-align: left; 
      border-bottom: 1px solid var(--border-color-light); 
      font-size: 0.9em; 
      color: var(--text-primary);
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    th { 
      background-color: var(--bg-table-header); 
      color: var(--text-primary); 
      position: sticky; 
      top: 0; 
      z-index: 10; 
      font-weight: 600;
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    td {
      background-color: var(--bg-table);
      transition: background-color 0.3s ease;
    }
    tr:hover { 
      background-color: var(--bg-table-hover);
      transition: background-color 0.3s ease;
    }
    /* Alternerande rader för bättre läsbarhet */
    tbody tr:nth-child(even) {
      background-color: var(--bg-quaternary);
    }
    [data-theme="dark"] tbody tr:nth-child(even) {
      background-color: var(--bg-tertiary);
    }
    
    /* ========== GENERISKA TABELL-KLASSER ========== */
    .table-container {
      max-height: 400px;
      overflow-y: auto;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      background: var(--bg-table);
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    
    .data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9em;
    }
    
    .data-table thead tr {
      background: var(--bg-tertiary);
    }
    
    .data-table th {
      padding: 10px;
      text-align: left;
      border-bottom: 1px solid var(--border-color);
      font-weight: 600;
      color: var(--text-primary);
    }
    
    .data-table td {
      padding: 10px;
      border-bottom: 1px solid var(--border-color-light);
      color: var(--text-primary);
    }
    
    .data-table tbody tr:hover {
      background-color: var(--bg-table-row-hover);
      transition: background-color 0.3s ease;
    }
    
    /* Variant för större tabeller */
    .table-container-large {
      max-height: 600px;
    }
    
    /* Variant för små tabeller */
    .table-container-small {
      max-height: 300px;
    }
    input, select, textarea { 
      width: 100%; 
      box-sizing: border-box; 
      padding: 8px; 
      border: 1px solid var(--border-color-light); 
      font-size: 0.9em; 
      background: var(--bg-input); 
      color: var(--text-primary);
      margin-bottom: 10px;
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    
    /* Förbättrad styling för select/dropdown i dark mode */
    select {
      background-color: var(--bg-input);
      color: var(--text-primary);
      cursor: pointer;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 8px center;
      background-size: 16px;
      padding-right: 32px;
    }
    
    [data-theme="dark"] select {
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
      background-color: var(--bg-input);
      border-color: var(--border-color);
    }
    
    select:focus {
      border-color: var(--button-primary);
      outline: none;
      box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
    }
    
    [data-theme="dark"] select:focus {
      box-shadow: 0 0 0 2px rgba(91, 163, 245, 0.3);
      border-color: var(--button-primary);
    }
    
    input:focus, select:focus, textarea:focus {
      outline: none;
      border-color: var(--button-primary);
      box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
    }
    
    [data-theme="dark"] input:focus,
    [data-theme="dark"] select:focus,
    [data-theme="dark"] textarea:focus {
      box-shadow: 0 0 0 2px rgba(91, 163, 245, 0.3);
    }
    
    /* Option styling för dark mode */
    select option {
      background-color: var(--bg-input);
      color: var(--text-primary);
      padding: 8px;
    }
    
    [data-theme="dark"] select option {
      background-color: var(--bg-secondary);
      color: var(--text-primary);
    }
    input:focus, select:focus { outline: none; border-color: var(--text-tertiary); }
    input[type="number"] { width: 80px; margin-bottom: 0; }
    .required { color: var(--required-color); font-weight: 600; }
    [data-theme="dark"] .required { color: var(--required-color); }
    .bristlista { 
      padding: 16px; 
      margin-top: 16px; 
      background: var(--bg-tertiary); 
      border-radius: 4px;
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    .success { 
      padding: 12px; 
      text-align: center; 
      margin-top: 12px; 
      background: rgba(76, 175, 80, 0.1); 
      color: #2e7d32; 
      border-radius: 4px;
      border: 1px solid rgba(76, 175, 80, 0.3);
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    
    [data-theme="dark"] .success {
      background: rgba(76, 175, 80, 0.2);
      color: #66bb6a;
      border-color: rgba(76, 175, 80, 0.4);
    }
    
    .error { 
      padding: 12px; 
      margin-bottom: 15px; 
      background: rgba(211, 47, 47, 0.1); 
      color: #c62828; 
      border-radius: 4px;
      border: 1px solid rgba(211, 47, 47, 0.3);
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    
    [data-theme="dark"] .error {
      background: rgba(211, 47, 47, 0.2);
      color: #ef5350;
      border-color: rgba(211, 47, 47, 0.4);
    }
    
    [data-theme="dark"] .error-box {
      background: rgba(211, 47, 47, 0.2);
      color: #ef5350;
      border-color: rgba(211, 47, 47, 0.4);
    }
    label { font-weight: 500; font-size: 0.9em; display: block; margin-bottom: 4px; }
    .nav { 
      display: flex; 
      flex-direction: column;
      gap: 4px; 
      justify-content: flex-end; 
      margin-bottom: 24px; 
      padding-bottom: 12px; 
      border-bottom: 1px solid var(--border-color-light);
      transition: border-color 0.3s ease;
    }
    
    .nav-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      cursor: default; /* Förhindra frågetecken vid hovring */
    }
    
    /* Profilbild - säkerställ att den alltid är rund */
    #currentUserProfilbild {
      width: 32px !important;
      height: 32px !important;
      min-width: 32px !important;
      min-height: 32px !important;
      max-width: 32px !important;
      max-height: 32px !important;
      border-radius: 50% !important;
      object-fit: cover !important;
      flex-shrink: 0 !important;
      aspect-ratio: 1 / 1 !important;
    }
    
    .mobile-menu-toggle {
      display: none !important;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      transition: color 0.3s ease;
      cursor: pointer;
      padding: 8px 12px;
      font-size: 1.2em;
      border-radius: 4px;
      min-width: 44px;
      min-height: 44px;
    }
    
    .mobile-menu-toggle:hover {
      background: var(--bg-primary);
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    
    /* Säkerställ att mobile-menu-toggle är dold på desktop */
    @media (min-width: 769px) {
      .mobile-menu-toggle {
        display: none !important;
      }
    }
    
    .nav-menu {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    
    .nav button { 
      border: none; 
      background: transparent; 
      color: var(--text-secondary);
      transition: color 0.3s ease; 
      cursor: pointer; 
      padding: 8px 16px; 
      font-size: 0.9em; 
      border-radius: 4px; 
    }
    .nav button:hover { background: var(--bg-tertiary); }
    .nav button.active { background: var(--button-primary); color: var(--text-white); }
    .nav button {
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    .artikel-sok-container {
      margin-bottom: 12px;
    }
    button[type="submit"] {
      padding: 10px 24px;
      background: var(--button-primary);
      color: var(--text-white);
      border: none;
      cursor: pointer;
      font-size: 1em;
      margin-top: 16px;
      border-radius: 4px;
      font-weight: 500;
      transition: background-color 0.3s ease;
    }
    
    button:hover {
      background: var(--button-primary-hover);
    }
    button[type="submit"]:hover {
      background: var(--button-primary-hover);
    }
    .arkivlista { margin-top: 18px; }
    .arkivrow { 
      border-bottom:1px solid var(--border-color); 
      padding:8px 0; 
      cursor:pointer;
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    .arkivrow:hover { 
      background: var(--bg-table-hover); 
    }
    .arkiv-detail { 
      background:var(--bg-tertiary);
      border-radius:4px;
      padding:12px 13px;
      margin:8px 0;
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    .arkiv-detail h4 { margin-bottom:7px; }
    #arkivContent {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    /* Certinventering arkiv - stapla bognummer vertikalt */
    #certinventeringArkivContent {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    
    .bogmapp { 
      padding: 8px 12px; 
      margin-bottom: 8px;
      margin-right: 8px;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
      font-size: 0.95em;
      min-width: 150px;
      flex: 0 0 auto;
    }
    
    /* Bognummer i certinventering arkiv ska ta full bredd */
    #certinventeringArkivContent .bogmapp {
      width: 100%;
      margin-right: 0;
    }
    .bogmapp:hover { 
      background: var(--bg-primary);
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    .datummapp { 
      padding: 6px 10px; 
      margin-bottom: 4px; 
      font-size: 0.9em;
      border: 1px solid transparent;
    }
    .datummapp:hover {
      background: var(--bg-primary);
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    
    /* Dölj filter toggle-knappar på desktop */
    #arkivFilterToggle,
    #certinventeringArkivFilterToggle {
      display: none;
    }
    
    /* Visa filter-innehåll på desktop */
    #certinventeringArkivFilterContent {
      display: grid;
    }
    
    .dashboard-block {
      resize: none !important;
      overflow: auto;
      margin: 0 !important;
      padding: 0 !important;
      background: var(--bg-secondary);
      transition: background-color 0.3s ease;
    }
    #dashboardContent {
      margin: 0;
      padding: 0;
      background: var(--bg-secondary);
      transition: background-color 0.3s ease;
    }
    
    #dashboardVisning {
      background: var(--bg-secondary);
      transition: background-color 0.3s ease;
    }
    
    #dashboardContainer {
      background: var(--bg-secondary);
      transition: background-color 0.3s ease;
    }
    
    /* Statistikrutor styling */
    .statistik-box {
      margin-bottom: 20px;
      padding: 15px;
      background: var(--bg-tertiary);
      border-radius: 8px;
      transition: background-color 0.3s ease;
    }
    
    .statistik-box h3 {
      margin-top: 0;
      margin-bottom: 15px;
      text-align: center;
      color: var(--text-primary);
      transition: color 0.3s ease;
    }
    
    .statistik-box p {
      color: var(--text-secondary);
      transition: color 0.3s ease;
    }
    
    .statistik-item {
      text-align: center;
    }
    
    .statistik-value {
      font-size: 2em;
      font-weight: bold;
      color: var(--button-primary);
      transition: color 0.3s ease;
    }
    
    .statistik-label {
      color: var(--text-secondary);
      font-size: 0.9em;
      transition: color 0.3s ease;
    }
    
    /* Certinventering statistik box */
    .certinventering-statistik-box {
      margin-bottom: 20px;
      padding: 12px;
      background: var(--bg-tertiary);
      border-radius: 6px;
      border: 1px solid var(--border-color-light);
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    
    .certinventering-statistik-box h2 {
      margin: 0 0 10px 0;
      font-size: 1em;
      color: var(--text-primary);
      font-weight: 600;
      transition: color 0.3s ease;
    }
    
    /* Certinventering form section */
    .certinventering-form-section {
      margin-bottom: 20px;
      padding: 16px 0;
      background: #e3f2fd;
      border-radius: 0;
      border-left: none;
      border-right: none;
      border-top: 1px solid #2196f3;
      border-bottom: 1px solid #2196f3;
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    
    [data-theme="dark"] .certinventering-form-section {
      background: var(--bg-tertiary);
      border-top-color: var(--button-primary);
      border-bottom-color: var(--button-primary);
    }
    
    .certinventering-info-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 12px;
      padding: 0 12px;
    }
    
    .certinventering-info-grid strong {
      color: var(--text-primary);
      transition: color 0.3s ease;
    }
    
    .certinventering-motor-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 16px;
      padding: 0 12px;
    }
    
    .certinventering-input {
      width: 100%;
      padding: 8px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      font-size: 0.9em;
      min-height: 44px;
      box-sizing: border-box;
      background: var(--bg-input);
      color: var(--text-primary);
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    
    .certinventering-input:focus {
      outline: none;
      border-color: var(--button-primary);
      box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
    }

.cert-date-wrapper {
  display: flex;
  gap: 6px;
  align-items: center;
}

.cert-date-type {
  min-width: 120px;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 0.9em;
  box-sizing: border-box;
}

[data-theme="dark"] .cert-date-type {
  border-color: var(--border-color);
  background: var(--bg-input);
  color: var(--text-primary);
}

.cert-date-input {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .cert-date-input {
  border-color: var(--border-color);
  background: var(--bg-input);
  color: var(--text-primary);
    }
    
    [data-theme="dark"] .certinventering-input:focus {
      box-shadow: 0 0 0 2px rgba(91, 163, 245, 0.3);
    }
    
    .certinventering-textarea {
      width: 100%;
      padding: 8px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      font-size: 0.9em;
      resize: vertical;
      min-height: 60px;
      box-sizing: border-box;
      background: var(--bg-input);
      color: var(--text-primary);
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    
    .certinventering-textarea:focus {
      outline: none;
      border-color: var(--button-primary);
      box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
    }
    
    [data-theme="dark"] .certinventering-textarea:focus {
      box-shadow: 0 0 0 2px rgba(91, 163, 245, 0.3);
    }
    
    .certinventering-form-section label {
      display: block;
      margin-bottom: 4px;
      font-weight: 500;
      color: var(--text-primary);
      transition: color 0.3s ease;
    }

    /* Certinventering detail view */
    .certinventering-detail-card {
      background: var(--bg-secondary);
      padding: 20px;
      border-radius: 6px;
      border: 1px solid var(--border-color);
      color: var(--text-primary);
      box-shadow: 0 2px 6px var(--shadow-light);
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    }

    .certinventering-detail-title {
      margin: 0 0 16px 0;
      color: var(--text-primary);
    }

    .certinventering-detail-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 16px;
      margin-bottom: 16px;
      color: var(--text-primary);
    }

    .certinventering-detail-grid strong {
      color: var(--text-primary);
    }

    .certinventering-detail-note {
      margin-bottom: 16px;
      padding: 12px;
      background: var(--bg-tertiary);
      border-radius: 4px;
      border: 1px solid var(--border-color-light);
      color: var(--text-primary);
    }

    .certinventering-detail-certifikat {
      margin-bottom: 16px;
    }

    .certinventering-detail-subtitle {
      margin: 0 0 12px 0;
      color: var(--text-primary);
    }

    .certinventering-detail-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9em;
      background: var(--bg-table);
    }

    .certinventering-detail-table th,
    .certinventering-detail-table td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid var(--border-color-light);
      color: var(--text-primary);
    }

    .certinventering-detail-table thead tr {
      background: var(--bg-table-header);
    }

    .certinventering-detail-table tbody tr:hover {
      background: var(--bg-table-hover);
    }

    .certinventering-detail-actions {
      display: flex;
      gap: 8px;
      margin-top: 16px;
      flex-wrap: wrap;
    }

    .certinventering-detail-loading {
      padding: 16px;
      text-align: center;
      color: var(--text-secondary);
    }
    
    /* Artikel lista container och items */
    .artikel-lista-container {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    
    .artikel-lista-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px;
      background: #f0f0f0;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }
    
    [data-theme="dark"] .artikel-lista-item {
      background: var(--bg-tertiary);
    }
    
    .artikel-lista-nummer {
      font-size: 0.9em;
      color: var(--text-primary);
      transition: color 0.3s ease;
    }
    
    .artikel-lista-nummer strong {
      color: var(--text-primary);
      transition: color 0.3s ease;
    }
    
    .artikel-lista-antal {
      font-size: 0.85em;
      color: var(--text-secondary);
      transition: color 0.3s ease;
    }
    
    /* Dashboard widget styling */
    .dashboard-widget {
      position: relative;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color-light);
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    
    [data-theme="dark"] .dashboard-widget {
      background: var(--bg-tertiary);
      border-color: var(--border-color);
    }
    
    .widget-title {
      color: var(--text-primary);
      font-size: 1em;
      font-weight: 600;
      margin-bottom: 12px;
      transition: color 0.3s ease;
    }
    
    .widget-content {
      color: var(--text-primary);
      transition: color 0.3s ease;
    }
    .sokfalt {
      padding: 8px;
      margin-bottom: 12px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      width: 100%;
      box-sizing: border-box;
      font-size: 0.95em;
      background: var(--bg-input);
      color: var(--text-primary);
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    
    .sokfalt:focus {
      outline: none;
      border-color: var(--button-primary);
      box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
    }
    
    [data-theme="dark"] .sokfalt:focus {
      box-shadow: 0 0 0 2px rgba(91, 163, 245, 0.3);
    }
    .arkivlista { margin-top: 18px; }
    .arkivrow { 
      border-bottom: 1px solid var(--border-color-light); 
      padding: 12px 0; 
      cursor: pointer;
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    .arkivrow:hover { 
      background: var(--bg-table-hover); 
    }
    .arkiv-detail { 
      background: var(--bg-tertiary); 
      border-radius: 4px; 
      padding: 16px; 
      margin: 12px 0;
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    .arkiv-detail h4 { margin-bottom: 12px; font-weight: 600; }
    #arkivContent {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    /* Certinventering arkiv - stapla bognummer vertikalt */
    #certinventeringArkivContent {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    
    .bogmapp { 
      padding: 12px 16px; 
      margin-bottom: 8px;
      margin-right: 8px;
      border: 1px solid var(--border-color-light);
      background: var(--bg-secondary);
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
      font-size: 0.95em;
      min-width: 150px;
      flex: 0 0 auto;
      border-radius: 4px;
      cursor: pointer;
    }
    
    /* Bognummer i certinventering arkiv ska ta full bredd */
    #certinventeringArkivContent .bogmapp {
      width: 100%;
      margin-right: 0;
    }
    .bogmapp:hover { 
      background: var(--bg-tertiary);
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
      border-color: var(--border-color-strong);
    }
    .datummapp { 
      padding: 10px 14px; 
      margin-bottom: 6px; 
      font-size: 0.9em;
      border: 1px solid transparent;
      border-radius: 4px;
      cursor: pointer;
    }
    .datummapp:hover {
      background: var(--bg-tertiary);
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    .sokfalt {
      padding: 10px;
      margin-bottom: 12px;
      border: 1px solid var(--border-color-light);
      border-radius: 4px;
      width: 100%;
      box-sizing: border-box;
      font-size: 0.95em;
      background: var(--bg-secondary);
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    .sokfalt:focus {
      outline: none;
      border-color: var(--text-tertiary);
    }
    button {
      border: none;
      background: var(--button-default);
      color: var(--text-white);
      cursor: pointer;
      padding: 8px 16px;
      font-size: 0.9em;
      border-radius: 4px;
      font-weight: 500;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background: var(--button-default-hover);
    }
    button.secondary {
      background: var(--button-secondary);
    }
    button.secondary:hover {
      background: var(--button-secondary-hover);
    }
    button.danger {
      background: var(--button-danger);
    }
    button.danger:hover {
      background: var(--button-danger-hover);
    }
    button.warning {
      background: var(--button-warning);
    }
    button.warning:hover {
      background: var(--button-warning-hover);
    }
    button.info {
      background: var(--button-info);
    }
    button.info:hover {
      background: var(--button-info-hover);
    }
    button.success {
      background: var(--button-success);
    }
    button.success:hover {
      background: var(--button-success-hover);
    }
    .bog-sok-container {
      margin-bottom: 8px;
    }
    .bog-sok-container input {
      width: 100%;
      box-sizing: border-box;
    }
    .listfil:hover {
      background: var(--bg-tertiary) !important;
      transition: background-color 0.3s ease;
    }
    h3[onclick="toggleLanHistorik()"] {
      cursor: pointer;
      padding: 8px;
      border-radius: 4px;
    }
    h3[onclick="toggleLanHistorik()"]:hover {
      background: var(--bg-tertiary);
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    
    /* Placering rubriker i inventeringsformuläret */
    .placering-rubrik {
      background-color: var(--bg-placering-rubrik) !important;
      font-weight: 600;
      font-size: 1em;
      border-bottom: 2px solid var(--border-color-dark) !important;
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    .placering-rubrik td {
      padding: 12px 8px !important;
      border-bottom: 2px solid var(--border-color-dark) !important;
    }
    
    /* ========== MOBIL RESPONSIVE ========== */
    @media (max-width: 768px) {
      * {
        -webkit-tap-highlight-color: rgba(0,0,0,0.1);
      }
      
      body {
        font-size: 16px; /* Förhindra zoom på iOS */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      
      /* Förbättra touch-targets globalt */
      a, button, input, select, textarea, label {
        touch-action: manipulation;
      }
      
      /* Förhindra text-selektion på knappar */
      button {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      
      /* Väljarsida (selectionScreen) - mobil optimering */
      #selectionScreen {
        padding: 16px !important;
        padding-bottom: 80px !important; /* Ge plats för ticker-baren för att förhindra scroll-hopp */
        /* Förhindra scroll-hopp */
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
        /* Förhindra layout shifts */
        contain: layout style paint;
      }
      
      #selectionScreen > div {
        max-width: 100% !important;
        padding: 24px 20px !important;
        border-radius: 12px !important;
        /* Förhindra layout shifts */
        will-change: auto;
      }
      
      #selectionScreen h1 {
        font-size: 1.8em !important;
        margin-bottom: 24px !important;
      }
      
      #selectionScreen h2 {
        font-size: 1.3em !important;
        margin-bottom: 20px !important;
      }
      
      #selectionScreen > div > div {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        align-items: start !important;
      }
      
      #selectionScreen button,
      #selectionScreen button.btn-selection,
      #selectionScreen button.btn-selection.primary,
      #selectionScreen button.btn-selection.dark,
      #selectionScreen button.btn-selection.success,
      #selectionScreen button.btn-selection.warning,
      #selectionScreen button.btn-selection.danger,
      #selectionScreen button.btn-selection.gray {
        height: 100px !important;
        min-height: 100px !important;
        max-height: 100px !important;
        padding: 20px !important;
        font-size: 1.1em !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        line-height: 1.2 !important;
      }
      
      #selectionScreen button span:first-child {
        font-size: 2.5em !important;
      }
      
      /* Hemskärm (homeScreen) - mobil optimering */
      #homeScreen {
        padding: 16px !important;
      }
      
      #homeScreenButtons {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        align-items: start !important;
      }
      
      #homeScreen > div {
        max-width: 100% !important;
        padding: 24px 20px !important;
        border-radius: 12px !important;
      }
      
      #homeScreen h1 {
        font-size: 1.8em !important;
        margin-bottom: 24px !important;
      }
      
      #homeScreen h2 {
        font-size: 1.3em !important;
        margin-bottom: 20px !important;
      }
      
      #homeScreenButtons button {
        height: 100px !important;
        min-height: 100px !important;
        max-height: 100px !important;
        font-size: 0.95em !important;
        padding: 20px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
      }
      
      #homeScreenButtons button:active {
        transform: scale(0.98);
        transition: transform 0.1s;
      }
      
      #homeScreen > div > div:last-child {
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 24px !important;
      }
      
      #homeScreen > div > div:last-child button {
        width: 100% !important;
        min-height: 44px !important;
        padding: 12px 20px !important;
      }
      
      /* Lager hemskärm (lagerHomeScreen) - mobil optimering */
      #lagerHomeScreen {
        padding: 16px !important;
      }
      
      #lagerHomeScreenButtons {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        align-items: start !important;
      }
      
      #lagerHomeScreen > div {
        max-width: 100% !important;
        padding: 24px 20px !important;
        border-radius: 12px !important;
      }
      
      #lagerHomeScreen h1 {
        font-size: 1.8em !important;
        margin-bottom: 24px !important;
      }
      
      #lagerHomeScreenButtons button {
        height: 100px !important;
        min-height: 100px !important;
        max-height: 100px !important;
        font-size: 0.95em !important;
        padding: 20px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
      }
      
      #lagerHomeScreenButtons button:active {
        transform: scale(0.98);
        transition: transform 0.1s;
      }
      
      #lagerHomeScreen > div > div:last-child {
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 24px !important;
      }
      
      #lagerHomeScreen > div > div:last-child button {
        width: 100% !important;
        min-height: 44px !important;
        padding: 12px 20px !important;
      }
      
      /* Certinventering hemskärm (certinventeringHomeScreen) - mobil optimering */
      #certinventeringHomeScreen {
        padding: 16px !important;
      }
      
      #certinventeringHomeScreenButtons {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        align-items: start !important;
      }
      
      #certinventeringHomeScreen > div {
        max-width: 100% !important;
        padding: 24px 20px !important;
        border-radius: 12px !important;
      }
      
      #certinventeringHomeScreen h1 {
        font-size: 1.8em !important;
        margin-bottom: 24px !important;
      }
      
      #certinventeringHomeScreenButtons button,
      #certinventeringHomeScreenButtons button.btn-home,
      #certinventeringHomeScreenButtons button.btn-home.success,
      #certinventeringHomeScreenButtons button.btn-home.info,
      #certinventeringHomeScreenButtons button.btn-home.orange {
        height: 100px !important;
        min-height: 100px !important;
        max-height: 100px !important;
        font-size: 1.1em !important;
        padding: 20px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        line-height: 1.2 !important;
        flex-direction: column !important;
        gap: 10px !important;
      }
      
      #certinventeringHomeScreenButtons button:active {
        transform: scale(0.98);
        transition: transform 0.1s;
      }
      
      #certinventeringHomeScreen > div > div:last-child {
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 24px !important;
      }
      
      #certinventeringHomeScreen > div > div:last-child button {
        width: 100% !important;
        min-height: 44px !important;
        padding: 12px 20px !important;
      }
      
      /* Inloggningssida (loginContainer) - mobil optimering */
      #loginContainer {
        padding: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
      }
      
      #loginContainer h1 {
        font-size: 2em !important;
        margin-bottom: 32px !important;
      }
      
      #loginForm {
        min-width: 320px !important;
        max-width: 400px !important;
        width: auto !important;
        margin: 0 auto !important;
      }
      
      #loginForm input {
        padding: 14px !important;
        font-size: 16px !important;
        min-height: 48px !important;
      }
      
      #loginForm button {
        padding: 14px !important;
        font-size: 1.1em !important;
        min-height: 48px !important;
      }
      
      /* Ticker-bar på mobil */
      #selectionScreenTicker {
        font-size: 0.85em !important;
        padding: 10px 0 !important;
      }
      
      #homeScreenTicker {
        font-size: 0.85em !important;
        padding: 10px 0 !important;
      }
      
      /* Login-title på mobil */
      .login-title {
        font-size: 2.2em !important;
      }
      
      .container {
        max-width: 100%;
        margin: 0;
        padding: 12px;
        border: none;
        /* Ta bort min-height: 100vh för att förhindra vitt utrymme när innehåll är dolt */
        /* min-height: 100vh; */
        box-sizing: border-box;
      }
      
      h1 {
        font-size: 1.3em;
        margin-top: 8px;
        margin-bottom: 16px;
      }
      
      h2 {
        font-size: 1.1em;
        margin-top: 16px;
      }
      
      h3 {
        font-size: 1em;
      }
      
      /* Navigation - dropdown meny på mobil */
      .nav {
        margin-bottom: 12px;
        padding-bottom: 0;
        border-bottom: 1px solid var(--border-color-light);
        transition: border-color 0.3s ease;
      }
      
      .nav-header {
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border-color-light);
        transition: border-color 0.3s ease;
      }
      
      /* Profilbild - säkerställ att den är rund på mobil */
      #currentUserProfilbild {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
        aspect-ratio: 1 / 1 !important;
      }
      
      .mobile-menu-toggle {
        display: block !important;
      }
      
      .nav-menu {
        display: none;
        flex-direction: column;
        gap: 0;
        width: 100%;
        background: var(--bg-secondary);
      color: var(--text-primary);
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        border: 1px solid var(--border-color-light);
        border-radius: 4px;
        margin-top: 8px;
        box-shadow: 0 2px 8px var(--shadow);
        overflow: hidden;
      }
      
      .nav-menu.mobile-open {
        display: flex;
      }
      
      .nav-menu button {
        width: 100%;
        padding: 12px 16px;
        font-size: 1em;
        min-height: 44px; /* Touch-friendly size */
        text-align: left;
        border: none;
        border-bottom: 1px solid var(--border-color-light);
        background: var(--bg-secondary);
      color: var(--text-primary);
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
      }
      
      .nav-menu button:last-child {
        border-bottom: none;
      }
      
      .nav-menu button:hover {
        background: var(--bg-primary);
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease;
      }
      
      .nav-menu button.active {
        background: var(--button-primary);
        color: var(--text-white);
      }
      
      #currentUser {
        padding: 8px;
        font-size: 0.9em;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
      }
      
      /* Profilbild - säkerställ att den är rund på mobil */
      #currentUserProfilbild {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
        aspect-ratio: 1 / 1 !important;
      }
      
      /* Formulärfält större på mobil */
      input, select {
        padding: 12px;
        font-size: 16px; /* Förhindra zoom på iOS */
        min-height: 44px;
        border-radius: 4px;
      }
      
      input[type="number"] {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        min-height: 44px;
      }
      
      label {
        font-size: 0.95em;
        margin-bottom: 4px;
        display: block;
      }
      
      button[type="submit"] {
        width: 100%;
        padding: 14px 20px;
        font-size: 1.1em;
        min-height: 48px;
        margin-top: 20px;
      }
      
      /* Tabeller - horizontalt scroll på mobil (gammal regel - ersatt av mer specifik styling nedan) */
      
      #artiklarTable th {
        position: sticky;
        top: 0;
        background-color: var(--bg-table-header);
        z-index: 10;
        box-shadow: 0 2px 2px -1px var(--shadow);
        transition: background-color 0.3s ease;
      }
      
      /* Gammal styling - ersatt av mobil-specifik styling nedan */
      
      #artiklarTable input[type="number"] {
        width: 100%;
        min-width: 80px;
      }
      
      /* Sökfält */
      .sokfalt {
        padding: 12px;
        font-size: 16px;
        min-height: 44px;
        margin-bottom: 12px;
      }
      
      .artikel-sok-container input {
        padding: 12px;
        font-size: 16px;
        min-height: 44px;
      }
      
      /* Bognummer-mappar - full width på mobil */
      #arkivContent {
        flex-direction: column;
        gap: 8px;
      }
      
      .bogmapp {
        width: 100%;
        padding: 12px;
        margin-right: 0;
        min-height: 48px;
        font-size: 1em;
        display: flex;
        align-items: center;
      }
      
      .datummapp {
        padding: 10px;
        min-height: 44px;
        font-size: 0.95em;
      }
      
      /* Arkiv-detaljer */
      .arkiv-detail {
        padding: 12px;
        margin: 8px 0;
      }
      
      .arkiv-detail h4 {
        font-size: 1.1em;
      }
      
      .arkiv-detail button {
        width: 100%;
        padding: 12px;
        margin: 6px 0;
        min-height: 44px;
        font-size: 1em;
      }
      
      /* Admin-panel */
      #anvandareLista table {
        font-size: 0.85em;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      
      #anvandareLista table th,
      #anvandareLista table td {
        padding: 10px 8px;
        min-width: 100px;
      }
      
      #anvandareLista table button {
        width: 100%;
        padding: 8px;
        margin: 4px 0;
        min-height: 40px;
        font-size: 0.9em;
      }
      
      /* Logg-tabell */
      #loggContent table {
        font-size: 0.8em;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      
      #loggContent table th,
      #loggContent table td {
        padding: 8px 6px;
        min-width: 80px;
      }
      
      /* Bristlista */
      .bristlista {
        padding: 12px;
        margin-top: 16px;
      }
      
      .bristlista table {
        font-size: 0.85em;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      
      .bristlista table th,
      .bristlista table td {
        padding: 8px 6px;
        min-width: 80px;
      }
      
      /* Knappar generellt */
      button {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 1em;
        touch-action: manipulation; /* Förhindra dubbel-tap zoom */
      }
      
      /* Tillbaka-knapp */
      button[onclick*="gaTillbakaTillOversikt"] {
        width: 100%;
        padding: 12px;
        margin-bottom: 12px;
      }
      
      /* Listfiler i arkiv */
      .listfil {
        padding: 12px;
        margin-bottom: 8px;
        min-height: 44px;
        font-size: 0.95em;
      }
      
      /* Formulär i admin */
      #skapaAnvandareForm input {
        width: 100%;
        margin-bottom: 12px;
      }
      
      #skapaAnvandareForm button {
        width: 100%;
      }
      
      /* Resultat-meddelanden */
      .success, .error {
        padding: 12px;
        font-size: 0.95em;
        margin-top: 12px;
      }
      
      /* Login-formulär */
      #loginContainer form {
        margin-top: 20px;
      }
      
      #loginContainer input {
        margin-bottom: 16px;
      }
      
      #loginContainer button {
        width: 100%;
        margin-top: 8px;
      }
      
      #loginError {
        margin-top: 16px;
      }
      
      /* Låne-sektion */
      #aktivaLan table,
      #lanHistorik table {
        font-size: 0.85em;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      
      #aktivaLan table th,
      #aktivaLan table td,
      #lanHistorik table th,
      #lanHistorik table td {
        padding: 8px 6px;
        min-width: 100px;
      }
      
      #aktivaLan table button {
        width: 100%;
        padding: 8px;
        margin: 4px 0;
        min-height: 40px;
        font-size: 0.9em;
      }
    }
    
    /* Extra små skärmar (iPhone SE, etc) */
    @media (max-width: 375px) {
      .container {
        padding: 8px;
      }
      
      h1 {
        font-size: 1.2em;
      }
      
      #artiklarTable {
        min-width: 450px;
      }
      
      /* Gammal styling - ersatt av mobil-specifik styling nedan */
    }
    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
    
    .login-title {
      font-family: 'Orbitron', monospace;
      font-size: 3.5em;
      font-weight: 900;
      text-align: center;
      margin-bottom: 40px;
      background: linear-gradient(45deg, #87CEEB, #4FC3F7, #29B6F6, #03A9F4, #0288D1, #4FC3F7, #87CEEB, #B3E5FC, #81D4FA);
      background-size: 400% 400%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmer 4s ease-in-out infinite, pulse 2.5s ease-in-out infinite, float 3s ease-in-out infinite;
      letter-spacing: 4px;
      text-transform: uppercase;
      filter: drop-shadow(0 0 15px rgba(79, 195, 247, 0.6)) drop-shadow(0 0 30px rgba(79, 195, 247, 0.4)) drop-shadow(0 0 45px rgba(79, 195, 247, 0.2));
      transform: perspective(1000px) rotateX(5deg);
      position: relative;
    }
    
    .login-title::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 120%;
      height: 120%;
      background: radial-gradient(circle, rgba(79, 195, 247, 0.3) 0%, transparent 70%);
      border-radius: 50%;
      z-index: -1;
      animation: glowPulse 3s ease-in-out infinite;
      pointer-events: none;
    }
    
    @keyframes glowPulse {
      0%, 100% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(1);
      }
      50% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.2);
      }
    }
    
    @keyframes shimmer {
      0% { 
        background-position: 0% 50%;
        filter: drop-shadow(0 0 15px rgba(79, 195, 247, 0.6)) drop-shadow(0 0 30px rgba(79, 195, 247, 0.4)) drop-shadow(0 0 45px rgba(79, 195, 247, 0.2));
      }
      50% { 
        background-position: 100% 50%;
        filter: drop-shadow(0 0 25px rgba(79, 195, 247, 0.8)) drop-shadow(0 0 50px rgba(79, 195, 247, 0.6)) drop-shadow(0 0 75px rgba(79, 195, 247, 0.4));
      }
      100% { 
        background-position: 0% 50%;
        filter: drop-shadow(0 0 15px rgba(79, 195, 247, 0.6)) drop-shadow(0 0 30px rgba(79, 195, 247, 0.4)) drop-shadow(0 0 45px rgba(79, 195, 247, 0.2));
      }
    }
    
    @keyframes pulse {
      0%, 100% {
        transform: perspective(1000px) rotateX(5deg) scale(1);
      }
      50% {
        transform: perspective(1000px) rotateX(5deg) scale(1.05);
      }
    }
    
    @keyframes float {
      0%, 100% {
        transform: perspective(1000px) rotateX(5deg) translateY(0px);
      }
      50% {
        transform: perspective(1000px) rotateX(5deg) translateY(-10px);
      }
    }
    
    @keyframes scrollText {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }
    
    .ticker-animating {
      /* Use CSS var so JS can adapt speed to content length */
      animation: scrollText var(--ticker-duration, 40s) linear infinite !important;
    }
    
    /* ========== TOAST NOTIFICATIONS ========== */
    .toast-container {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 10000;
      display: flex;
      flex-direction: column;
      gap: 4px;
      max-width: 320px;
    }
    
    .toast {
      padding: 11px 11px;
      border-radius: 6px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.12);
      display: flex;
      align-items: center;
      gap: 10px;
      animation: toastSlideIn 0.3s ease-out;
      min-width: 240px;
      max-width: 320px;
    }
    
    .toast-success {
      background: #4caf50;
      color: #fff;
    }
    
    .toast-error {
      background: #f44336;
      color: #fff;
    }
    
    .toast-info {
      background: #2196f3;
      color: #fff;
    }
    
    .toast-warning {
      background: #ff9800;
      color: #fff;
    }
    
    .toast-icon {
      font-size: 1.25em;
      flex-shrink: 0;
    }
    
    .toast-message {
      flex: 1;
      font-size: 0.9em;
      line-height: 1.4;
    }
    
    .toast-close {
      background: transparent;
      border: none;
      color: #fff;
      font-size: 1em;
      cursor: pointer;
      padding: 0;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.8;
      flex-shrink: 0;
    }
    
    .toast-close:hover {
      opacity: 1;
    }
    
    @keyframes toastSlideIn {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }
    
    @keyframes toastSlideOut {
      from {
        transform: translateX(0);
        opacity: 1;
      }
      to {
        transform: translateX(100%);
        opacity: 0;
      }
    }
    
    .toast.hiding {
      animation: toastSlideOut 0.3s ease-in forwards;
    }
    
    /* ========== LOADING SPINNERS ========== */
    .spinner {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(255,255,255,0.3);
      border-top: 3px solid #fff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      vertical-align: middle;
      margin-right: 8px;
    }
    
    .spinner-dark {
      border: 3px solid rgba(0,0,0,0.1);
      border-top: 3px solid #333;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .loading-container {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      color: var(--text-secondary);
      transition: color 0.3s ease;
    }
    
    .loading-text {
      margin-left: 8px;
    }
    
    /* ========== SMOOTH TRANSITIONS ========== */
    .tab-content {
      transition: opacity 0.2s ease-in-out;
    }
    
    .tab-content.hiding {
      opacity: 0;
    }
    
    .tab-content.showing {
      opacity: 1;
    }
    
    button, .bogmapp, .datummapp, .listfil {
      transition: all 0.2s ease-in-out;
    }
    
    /* ========== BREADCRUMBS ========== */
    .breadcrumbs {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      padding: 8px 0;
      font-size: 0.9em;
      flex-wrap: wrap;
    }
    
    .breadcrumb-item {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text-secondary);
      transition: color 0.3s ease;
    }
    
    .breadcrumb-item:last-child {
      color: var(--text-primary);
      transition: color 0.3s ease;
      font-weight: 500;
    }
    
    .breadcrumb-link {
      color: #1976d2;
      text-decoration: none;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      transition: background 0.2s ease;
    }
    
    .breadcrumb-link:hover {
      background: var(--bg-primary);
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease;
      text-decoration: underline;
    }
    
    .breadcrumb-separator {
      color: #999;
      user-select: none;
    }
    
    /* ========== IKONER OCH VISUELLA INDIKATORER ========== */
    .icon {
      display: inline-block;
      margin-right: 6px;
      font-size: 1em;
    }
    
    .badge {
      display: inline-block;
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 0.75em;
      font-weight: 600;
      line-height: 1;
      vertical-align: middle;
    }
    
    .badge-danger {
      background: #f44336;
      color: #fff;
    }
    
    .badge-success {
      background: #4caf50;
      color: #fff;
    }
    
    .badge-warning {
      background: #ff9800;
      color: #fff;
    }
    
    .badge-info {
      background: #2196f3;
      color: #fff;
    }
    
    /* ========== EMPTY STATES ========== */
    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: #999;
    }
    
    .empty-state-icon {
      font-size: 4em;
      margin-bottom: 16px;
      opacity: 0.5;
    }
    
    .empty-state-title {
      font-size: 1.2em;
      font-weight: 600;
      margin-bottom: 8px;
      color: var(--text-secondary);
      transition: color 0.3s ease;
    }
    
    .empty-state-text {
      font-size: 0.95em;
      margin-bottom: 16px;
    }
    
    /* ========== SEARCH ENHANCEMENTS ========== */
    .search-container {
      position: relative;
      display: flex;
      align-items: center;
    }
    
    .search-icon {
      position: absolute;
      left: 12px;
      color: var(--text-tertiary);
      pointer-events: none;
      z-index: 1;
      transition: color 0.3s ease;
    }
    
    .search-input {
      padding-left: 40px !important;
      padding-right: 40px !important;
    }
    
    .search-clear {
      position: absolute;
      right: 12px;
      background: transparent;
      border: none;
      color: #999;
      cursor: pointer;
      padding: 4px 8px;
      font-size: 1.2em;
      display: none;
      z-index: 1;
    }
    
    .search-container input:not(:placeholder-shown) ~ .search-clear {
      display: block;
    }
    
    .search-clear:hover {
      color: var(--text-primary);
      transition: color 0.3s ease;
    }
    
    .search-results-count {
      font-size: 0.85em;
      color: var(--text-secondary);
      transition: color 0.3s ease;
      margin-top: 8px;
      margin-bottom: 12px;
    }
    
    /* ========== TABLE ENHANCEMENTS ========== */
    table tbody tr:nth-child(even) {
      background-color: var(--bg-quaternary);
      transition: background-color 0.3s ease;
    }
    
    [data-theme="dark"] table tbody tr:nth-child(even) {
      background-color: var(--bg-tertiary);
    }
    
    table tbody tr:hover {
      background-color: var(--bg-table-row-hover);
      transition: background-color 0.3s ease;
    }
    
    .sortable-header {
      cursor: pointer;
      user-select: none;
      position: relative;
      padding-right: 24px;
    }
    
    .sortable-header:hover {
      background-color: var(--bg-table-row-hover);
      transition: background-color 0.3s ease;
    }
    
    .sortable-header::after {
      content: '⇅';
      position: absolute;
      right: 8px;
      color: var(--text-tertiary);
      font-size: 0.8em;
      transition: color 0.3s ease;
    }
    
    .sortable-header.sort-asc::after {
      content: '↑';
      color: var(--text-primary);
      transition: color 0.3s ease;
    }
    
    .sortable-header.sort-desc::after {
      content: '↓';
      color: var(--text-primary);
      transition: color 0.3s ease;
    }
    
    /* ========== FORM ENHANCEMENTS ========== */
    .form-group {
      position: relative;
      margin-bottom: 16px;
    }
    
    .floating-label {
      position: absolute;
      left: 12px;
      top: 12px;
      color: #999;
      font-size: 0.9em;
      pointer-events: none;
      transition: all 0.2s ease;
      background: var(--bg-secondary);
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease;
      padding: 0 4px;
    }
    
    .form-input:focus ~ .floating-label,
    .form-input:not(:placeholder-shown) ~ .floating-label {
      top: -8px;
      font-size: 0.75em;
      color: var(--text-primary);
      transition: color 0.3s ease;
    }
    
    .form-input {
      padding: 12px;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      font-size: 0.9em;
      width: 100%;
      box-sizing: border-box;
      transition: border-color 0.2s ease;
    }
    
    .form-input:focus {
      outline: none;
      border-color: #1976d2;
    }
    
    .form-input.error {
      border-color: #f44336;
    }
    
    .form-error {
      color: #f44336;
      font-size: 0.85em;
      margin-top: 4px;
      display: none;
    }
    
    .form-input.error ~ .form-error {
      display: block;
    }
    
    .form-help {
      font-size: 0.85em;
      color: var(--text-secondary);
      transition: color 0.3s ease;
      margin-top: 4px;
    }
    
    /* ========== MOBILE ENHANCEMENTS ========== */
    @media (max-width: 768px) {
      .nav {
        flex-wrap: wrap;
        position: sticky;
        top: 0;
        background: var(--bg-secondary);
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease;
        z-index: 100;
        padding: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      
      .nav button {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
        padding: 10px 14px;
        font-size: 0.95em;
        border-radius: 4px;
      }
      
      /* Fixa knappar och textfält för mobil */
      button {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 1em;
        border-radius: 4px;
        touch-action: manipulation;
      }
      
      input[type="text"],
      input[type="number"],
      input[type="date"],
      input[type="password"],
      textarea,
      select {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 1em;
        border-radius: 4px;
        box-sizing: border-box;
        width: 100%;
      }
      
      textarea {
        min-height: 80px;
        resize: vertical;
      }
      
      /* Arkiv filter dropdown på mobil */
      #arkivFilterToggle {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
      }
      
      #arkivFilterContent {
        display: none !important;
        flex-direction: column;
        gap: 12px;
        margin-top: 12px;
      }
      
      #arkivFilterContent.show {
        display: flex !important;
      }
      
      #arkivFilterButtons {
        display: none !important;
        margin-top: 12px;
      }
      
      #arkivFilterContent.show ~ #arkivFilterButtons {
        display: flex !important;
      }
      
      #arkivVisning > div:first-child > div:first-child h3 {
        margin-bottom: 0;
      }
      
      #arkivFilterToggle {
        display: block !important;
      }
      
      #certinventeringArkivFilterContent {
        display: none !important;
        flex-direction: column;
        gap: 12px;
        margin-top: 12px;
      }
      
      #certinventeringArkivFilterContent.show {
        display: flex !important;
      }
      
      #certinventeringArkivFilterButtons {
        display: none !important;
        margin-top: 12px;
      }
      
      #certinventeringArkivFilterContent.show ~ #certinventeringArkivFilterButtons {
        display: flex !important;
      }
      
      #certinventeringArkivVisning > div:first-child > div:first-child h3 {
        margin-bottom: 0;
      }
      
      #certinventeringArkivFilterToggle {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
      }
      
      /* Lager checkbox - mobilvänlig */
      #lagerTab label[for="lagerVisaLagaNivaer"],
      #lagerTab label:has(input#lagerVisaLagaNivaer) {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        user-select: none !important;
        padding: 8px 12px !important;
        border-radius: 4px !important;
        transition: background 0.2s !important;
        margin: 0 !important;
      }
      
      #lagerTab input#lagerVisaLagaNivaer {
        width: 20px !important;
        height: 20px !important;
        cursor: pointer !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
      }
      
      #lagerTab label:has(input#lagerVisaLagaNivaer) span {
        line-height: 1.4 !important;
        display: inline-block !important;
      }
      
      label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
      }
      
      /* Fixa grid-layout för mobil */
      .search-container {
        margin-bottom: 12px;
      }
      
      .empty-state {
        padding: 40px 20px;
      }
      
      .empty-state-icon {
        font-size: 3em;
      }
      
      /* Lagerhistorik filter - mobilvänlig */
      #lagerhistorikVisning > div:first-of-type {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
      }
      #lagerhistorikVisning > div:first-of-type > div:last-child {
        width: 100% !important;
        justify-content: flex-start !important;
        margin-top: 8px;
      }
      #lagerhistorikVisning > div:first-of-type > div:last-child button {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 0.9em !important;
      }
      #lagerhistorikVisning > div:first-of-type > div:last-child > div:first-child {
        font-size: 0.85em;
      }
      
      #lagerhistorikVisning > div:nth-of-type(2) {
        padding: 12px !important;
      }
      
      #lagerhistorikVisning > div:nth-of-type(2) > div {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
      }
      
      #lagerhistorikVisning table {
        font-size: 0.85em;
      }
      
      #lagerhistorikVisning table th,
      #lagerhistorikVisning table td {
        padding: 8px 6px !important;
        white-space: nowrap;
      }
      
      #lagerhistorikVisning table th:nth-child(7),
      #lagerhistorikVisning table td:nth-child(7),
      #lagerhistorikVisning table th:nth-child(8),
      #lagerhistorikVisning table td:nth-child(8) {
        display: none; /* Dölj "Registrerad av" och "Registrerad tid" på mobil */
      }
      
      /* Bulk modal - mobilvänlig */
      .ta-fran-lager-modal {
        padding: 16px !important;
        max-width: 100% !important;
        margin: 10px !important;
      }
      
      .ta-fran-lager-modal h3 {
        font-size: 1.2em !important;
      }
      
      .ta-fran-lager-form-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
      }
      
      .ta-fran-lager-form-row > div:last-child {
        margin-top: 0;
      }
      
      .ta-fran-lager-form-row > div:last-child button {
        width: 100%;
      }
      
      #taFranLagerBulkLista > div {
        max-height: 200px !important;
      }
      
      #taFranLagerBulkLista > div > div {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 12px !important;
      }
      
      #taFranLagerBulkLista > div > div > div {
        width: 100%;
      }
      
      #taFranLagerBulkLista button {
        width: 100%;
        margin-top: 4px;
        min-height: 44px;
      }
      
      .ta-fran-lager-buttons {
        flex-direction: column !important;
      }
      
      .ta-fran-lager-buttons button {
        width: 100% !important;
        margin: 4px 0 !important;
      }
      
      /* Lägg till i lager modal - mobilvänlig */
      .lagg-till-lager-modal {
        padding: 16px !important;
        max-width: 100% !important;
        margin: 10px !important;
      }
      
      /* Flytta lager modal - mobilvänlig */
      .flytta-lager-modal {
        padding: 16px !important;
        max-width: 100% !important;
        margin: 10px !important;
      }
      
      /* Bulk-operationer modal - mobilvänlig */
      .bulk-operationer-modal {
        padding: 16px !important;
        max-width: 100% !important;
        margin: 10px !important;
      }
      
      .bulk-operationer-modal > div {
        margin-bottom: 16px !important;
      }
      
      /* Lager-knappar - mobil optimering */
      #lagerTab > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
      }
      
      #lagerTab > div:first-child h2 {
        width: 100% !important;
        margin-bottom: 0 !important;
        font-size: 1.3em !important;
      }
      
      #lagerTab > div:first-child > div:last-child {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
      }
      
      #lagerTab > div:first-child > div:last-child button {
        width: 100% !important;
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 0.9em !important;
        justify-content: center !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        text-align: center !important;
      }
      
      #lagerTab > div:first-child > div:last-child button i {
        margin-right: 6px !important;
      }
      
      /* Lager filter-sektion - mobil optimering */
      #lagerTab > div:nth-child(2) {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
      }
      
      #lagerTab > div:nth-child(2) > div {
        width: 100% !important;
      }
      
      #lagerTab > div:nth-child(2) select,
      #lagerTab > div:nth-child(2) input[type="checkbox"] {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 16px !important;
      }
      
      #lagerTab > div:nth-child(2) label {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 8px !important;
        cursor: pointer !important;
      }
      
      /* Lager-knappar hover-effekter */
      #lagerTab button[onclick*="visaPlaceringskarta"],
      #lagerTab button[onclick*="laggTillLager"],
      #lagerTab button[onclick*="taFranLager"],
      #lagerTab button[onclick*="flyttaMellanLager"],
      #lagerTab button[onclick*="exporteraLager"],
      #lagerTab button[onclick*="bulkOperationer"] {
        transition: all 0.2s ease;
      }
      
      #lagerTab button[onclick*="visaPlaceringskarta"]:hover {
        background: var(--bg-table-hover) !important;
        border-color: var(--border-color) !important;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px var(--shadow);
      }
      
      [data-theme="dark"] #lagerTab button[onclick*="visaPlaceringskarta"]:hover {
        background: var(--bg-quaternary) !important;
      }
      
      #lagerTab button[onclick*="laggTillLager"]:hover {
        background: rgba(76, 175, 80, 0.2) !important;
        border-color: rgba(76, 175, 80, 0.4) !important;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(46,125,50,0.2);
      }
      
      [data-theme="dark"] #lagerTab button[onclick*="laggTillLager"]:hover {
        background: rgba(76, 175, 80, 0.3) !important;
        border-color: rgba(76, 175, 80, 0.5) !important;
      }
      
      #lagerTab button[onclick*="taFranLager"]:hover {
        background: rgba(255, 152, 0, 0.2) !important;
        border-color: rgba(255, 152, 0, 0.4) !important;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(230,81,0,0.2);
      }
      
      [data-theme="dark"] #lagerTab button[onclick*="taFranLager"]:hover {
        background: rgba(255, 152, 0, 0.3) !important;
        border-color: rgba(255, 152, 0, 0.5) !important;
      }
      
      #lagerTab button[onclick*="flyttaMellanLager"]:hover {
        background: rgba(25, 118, 210, 0.2) !important;
        border-color: rgba(25, 118, 210, 0.4) !important;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(21,101,192,0.2);
      }
      
      [data-theme="dark"] #lagerTab button[onclick*="flyttaMellanLager"]:hover {
        background: rgba(91, 163, 245, 0.3) !important;
        border-color: rgba(91, 163, 245, 0.5) !important;
      }
      
      #lagerTab button[onclick*="exporteraLager"]:hover {
        background: rgba(156, 39, 176, 0.2) !important;
        border-color: rgba(156, 39, 176, 0.4) !important;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(106,27,154,0.2);
      }
      
      [data-theme="dark"] #lagerTab button[onclick*="exporteraLager"]:hover {
        background: rgba(156, 39, 176, 0.3) !important;
        border-color: rgba(156, 39, 176, 0.5) !important;
      }
      
      #lagerTab button[onclick*="bulkOperationer"]:hover {
        background: var(--bg-table-hover) !important;
        border-color: var(--border-color) !important;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px var(--shadow);
      }
      
      [data-theme="dark"] #lagerTab button[onclick*="bulkOperationer"]:hover {
        background: var(--bg-quaternary) !important;
      }
      
      /* Ticker-bar - samma som desktop */
      #selectionScreenTicker {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(0, 0, 0, 0.8) !important;
        color: #fff !important;
        padding: 12px 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        font-size: 0.9em !important;
        z-index: 1000 !important;
        /* Förhindra scroll-hopp och layout shifts */
        transform: translateZ(0);
        will-change: transform;
        contain: layout style paint;
        /* Förhindra att ticker-baren påverkar scroll */
        pointer-events: auto;
        /* Förhindra overscroll */
        overscroll-behavior: none;
      }
      
      #homeScreenTicker {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(0, 0, 0, 0.8) !important;
        color: #fff !important;
        padding: 12px 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        font-size: 0.9em !important;
        z-index: 1000 !important;
        /* Förhindra scroll-hopp */
        transform: translateZ(0);
        will-change: transform;
      }
      
      /* Förhindra overscroll behavior som kan orsaka hopp */
      body, html {
        overscroll-behavior-y: none;
        overscroll-behavior-x: none;
      }
      
      /* Förhindra scroll-hopp på scrollbara element */
      .container,
      .screen-container,
      #mainContainer,
      [style*="overflow"] {
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
      }
      
      #tickerContent {
    display: inline-block !important;
    padding-left: 0 !important;
    will-change: transform !important;
      }
      
      /* Optimera inventeringsformulär för mobil */
      #inventeringForm {
        padding: 0 !important;
        margin: 0 !important;
      }
      
      #inventeraVisning h1 {
        font-size: 1.3em !important;
        margin-bottom: 12px !important;
        padding: 0 !important;
      }
      
      /* Bognummer-sektion - kompaktare */
      #inventeringForm > div:first-child {
        align-items: center !important;
        margin-bottom: 8px !important;
        gap: 6px !important;
      }
      
      #inventeringForm > div:first-child label {
        margin-bottom: 0;
        font-size: 0.9em !important;
      }
      
      #inventeringForm > div:first-child select {
        min-height: 44px;
        height: 44px;
        font-size: 0.9em !important;
        padding: 8px !important;
      }
      
      #toggleFavoritBtn,
      #toggleFavoritBognummerBtn {
        min-height: 44px !important;
        height: 44px !important;
        padding: 8px 10px !important;
        font-size: 0.9em !important;
      }
      
      #toggleFavoritBognummerBtn {
        font-size: 0.85em !important;
      }
      
      /* Favoritlista - kompaktare */
      #favoritBognummerLista {
        margin-bottom: 8px !important;
        padding: 8px !important;
        font-size: 0.85em !important;
      }
      
      /* Sagesman, Kontakt, Datum - stacka vertikalt på mobil */
      #inventeringForm > div:nth-child(3) {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
      }
      
      #inventeringForm > div:nth-child(3) label {
        flex: 1 !important;
        width: 100% !important;
        margin-bottom: 0 !important;
        font-size: 0.9em !important;
      }
      
      #inventeringForm > div:nth-child(3) input {
        min-height: 44px !important;
        height: 44px !important;
        font-size: 0.9em !important;
        padding: 8px !important;
      }
      
      /* Artiklar-sektion - kompaktare */
      #inventeringForm h3 {
        font-size: 1em !important;
        margin-top: 12px !important;
        margin-bottom: 8px !important;
      }
      
      .artikel-sok-container {
        margin-bottom: 8px !important;
      }
      
      .artikel-sok-container input {
        min-height: 44px !important;
        height: 44px !important;
        font-size: 0.9em !important;
        padding: 8px 8px 8px 36px !important;
      }
      
      /* Tabell - kompaktare och scrollbar */
      #artiklarTableWrapper {
        max-height: 350px !important;
        overflow-y: auto !important;
        margin-bottom: 8px !important;
        border: 1px solid var(--border-color-light) !important;
        border-radius: 4px !important;
        -webkit-overflow-scrolling: touch;
      }
      
      #artiklarTable {
        font-size: 0.8em !important;
        width: 100% !important;
        table-layout: fixed !important; /* Fixerad layout för bättre kontroll */
        border-collapse: separate !important;
        border-spacing: 0 !important;
      }
      
      #artiklarTable th,
      #artiklarTable td {
        box-sizing: border-box !important;
        overflow: hidden !important;
      }
      
      /* Kolumnbredder för mobil - optimerade för att passa på skärmen */
      /* Använd specifika pixel-värden för bättre kontroll */
      #artiklarTable th:nth-child(1),
      #artiklarTable td:nth-child(1) {
        width: 50px !important; /* Fbet - fast bredd */
        max-width: 50px !important;
        min-width: 50px !important;
        padding: 6px 2px !important;
        font-size: 0.7em !important;
        word-break: break-all !important; /* Aggressiv brytning */
        overflow-wrap: anywhere !important;
        hyphens: auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        line-height: 1.1 !important;
        vertical-align: top !important;
      }
      
      #artiklarTable th:nth-child(2),
      #artiklarTable td:nth-child(2) {
        width: auto !important; /* Fben - tar resterande utrymme automatiskt */
        max-width: none !important;
        min-width: 0 !important;
        padding: 6px 4px !important;
        font-size: 0.75em !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        vertical-align: top !important;
      }
      
      #artiklarTable th:nth-child(3),
      #artiklarTable td:nth-child(3) {
        width: 50px !important; /* Standard - fast bredd */
        max-width: 50px !important;
        min-width: 50px !important;
        padding: 6px 2px !important;
        font-size: 0.7em !important;
        text-align: center !important;
        white-space: nowrap !important;
      }
      
      #artiklarTable th:nth-child(4),
      #artiklarTable td:nth-child(4) {
        width: 60px !important; /* Inventerat antal - fast bredd */
        max-width: 60px !important;
        min-width: 60px !important;
        padding: 6px 2px !important;
        font-size: 0.8em !important;
        white-space: nowrap !important;
      }
      
      #artiklarTable th:nth-child(5),
      #artiklarTable td:nth-child(5) {
        width: 50px !important; /* Ändrat - fast bredd */
        max-width: 50px !important;
        min-width: 50px !important;
        padding: 6px 2px !important;
        font-size: 0.65em !important;
        color: var(--text-secondary) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }
      
      #artiklarTable th {
        font-size: 0.75em !important;
        font-weight: 600 !important;
        position: sticky !important;
        top: 0 !important;
        background: var(--bg-table-header) !important;
        z-index: 10 !important;
        padding: 8px 4px !important;
        border-bottom: 2px solid var(--border-color) !important;
        transition: background-color 0.3s ease, border-color 0.3s ease;
      }
      
      #artiklarTable td {
        padding: 8px 4px !important;
        font-size: 0.8em !important;
        vertical-align: middle !important;
        background-color: var(--bg-table) !important;
        transition: background-color 0.3s ease;
      }
      
      #artiklarTable input[type="number"] {
        width: 100% !important;
        min-height: 40px !important;
        height: 40px !important;
        padding: 6px 8px !important;
        font-size: 0.95em !important;
        border: 2px solid var(--button-primary) !important;
        border-radius: 4px !important;
        text-align: center !important;
        font-weight: 600 !important;
        background: var(--bg-input) !important;
        color: var(--text-primary) !important;
        transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
      }
      
      #artiklarTable input[type="number"]:focus {
        border-color: var(--button-primary) !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1) !important;
      }
      
      [data-theme="dark"] #artiklarTable input[type="number"]:focus {
        box-shadow: 0 0 0 3px rgba(91, 163, 245, 0.3) !important;
      }
      
      /* Placering-rubrik styling för mobil */
      #artiklarTable .placering-rubrik {
        font-size: 0.85em !important;
        padding: 8px 4px !important;
      }
      
      /* Hover-effekt för rader */
      #artiklarTable tbody tr:hover {
        background: var(--bg-table-hover) !important;
        transition: background-color 0.3s ease;
      }
      
      /* Alternerande färger för bättre läsbarhet */
      #artiklarTable tbody tr:nth-child(even) {
        background: var(--bg-quaternary) !important;
        transition: background-color 0.3s ease;
      }
      
      [data-theme="dark"] #artiklarTable tbody tr:nth-child(even) {
        background: var(--bg-tertiary) !important;
      }
      
      #artiklarTable tbody tr:nth-child(even):hover {
        background: var(--bg-table-hover) !important;
        transition: background-color 0.3s ease;
      }
      
      /* Kommentar - kompaktare */
      #inventeringForm > div:last-of-type:not(:has(button)) {
        margin-bottom: 8px !important;
      }
      
      #inventeringForm label:has(#inventeringKommentar) {
        font-size: 0.9em !important;
        margin-bottom: 4px !important;
      }
      
      #inventeringKommentar {
        min-height: 60px !important;
        max-height: 80px !important;
        padding: 8px !important;
        font-size: 0.9em !important;
        resize: vertical !important;
      }
      
      /* Spara-knapp - kompaktare */
      #inventeringForm button[type="submit"] {
        width: 100% !important;
        min-height: 48px !important;
        height: 48px !important;
        font-size: 1em !important;
        font-weight: 600 !important;
        margin-top: 8px !important;
        margin-bottom: 0 !important;
        padding: 12px !important;
      }
      
      /* Resultat-meddelanden - kompaktare */
      #resultat {
        margin-top: 8px !important;
        font-size: 0.9em !important;
      }
      
      #resultat .success,
      #resultat .error {
        padding: 10px !important;
        font-size: 0.9em !important;
        margin-bottom: 8px !important;
      }
      
      /* Fixa alignment för artikelformuläret */
      #skapaArtikelForm label {
        margin-bottom: 8px;
      }
      
      #skapaArtikelForm input[type="number"],
      #skapaArtikelForm input[type="text"],
      #skapaArtikelForm select {
        min-height: 44px;
        height: 44px;
      }
      
      /* Fixa bild-input och ta bild-knappen */
      #skapaArtikelForm label:has(#artikelBild) {
        display: block;
      }
      
      #skapaArtikelForm label:has(#artikelBild) > div {
        display: flex;
        gap: 8px;
        align-items: center;
      }
      
      #skapaArtikelForm label:has(#artikelBild) input[type="text"] {
        min-height: 44px;
        height: 44px;
        flex: 1;
      }
      
      #skapaArtikelForm label:has(#artikelBild) button {
        min-height: 44px !important;
        height: 44px !important;
        padding: 10px 16px !important;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    
    /* ========== ACCESSIBILITY ========== */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }
    
    button:focus,
    a:focus,
    input:focus,
    select:focus,
    textarea:focus {
      outline: 2px solid var(--button-primary);
      outline-offset: 2px;
    }
    
    [aria-label] {
      cursor: pointer;
    }
    
    /* ========== DASHBOARD WIDGET ENHANCEMENTS ========== */
    .dashboard-widget {
      position: relative;
    }
    
    .widget-value {
      font-size: 2em;
      font-weight: 700;
      margin: 8px 0;
    }
    
    .widget-trend {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 0.9em;
      margin-top: 4px;
    }
    
    .trend-up {
      color: var(--button-success);
    }
    
    .trend-down {
      color: var(--button-danger);
    }
    
    .trend-neutral {
      color: var(--text-tertiary);
    }
    
    /* ========== INLINE STYLE REPLACEMENTS ========== */
    /* Login/Selection Screen Containers */
    .screen-container {
      display: flex;
      background: url('../loginbackground.jpeg') center center/cover no-repeat;
      min-height: 100vh;
      align-items: center;
      justify-content: center;
      padding: 20px;
      flex-direction: column;
      position: relative;
      /* Förhindra scroll-hopp */
      overscroll-behavior: none;
      -webkit-overflow-scrolling: touch;
    }
    
    /* Specifik centrering för loginContainer */
    #loginContainer {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-direction: column !important;
      width: 100% !important;
      min-height: 100vh !important;
      position: relative !important;
      margin: 0 !important;
      padding: 20px !important;
    }
    
    /* Centrera login-title */
    #loginContainer .login-title {
      margin-left: auto !important;
      margin-right: auto !important;
      text-align: center !important;
      width: auto !important;
      display: block !important;
      align-self: center !important;
    }
    
    /* Säkerställ att #loginForm också är centrerad */
    #loginForm {
      margin: 0 auto !important;
      display: block !important;
      width: auto !important;
      max-width: 400px !important;
    }
    
    /* Centrera formuläret i loginContainer */
    #loginContainer .form-container {
      margin: 0 auto !important;
      align-self: center !important;
      position: relative !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      bottom: auto !important;
      transform: none !important;
      float: none !important;
    }
    
    /* Centrera login-title */
    #loginContainer .login-title {
      margin-left: auto !important;
      margin-right: auto !important;
      text-align: center !important;
    }
    
    /* Specifik fix för val-sidan på mobil */
    @media (max-width: 768px) {
      #selectionScreen.screen-container {
        /* Förhindra scroll-hopp genom att ge plats för ticker-baren */
        padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
        /* Förhindra layout shifts */
        contain: layout style paint;
        /* Förhindra overscroll */
        overscroll-behavior-y: none;
        overscroll-behavior-x: none;
      }
    }
    
    .screen-container.hidden {
      display: none !important;
      visibility: hidden !important;
      position: absolute !important;
      top: -9999px !important;
      left: -9999px !important;
      width: 0 !important;
      height: 0 !important;
      min-height: 0 !important;
      max-height: 0 !important;
      overflow: hidden !important;
      z-index: -1 !important;
    }
    
    /* Säkerställ att platsVisning är dold när användaren inte är inloggad */
    #platsVisning[style*="display: none"],
    #platsVisning.hidden {
      display: none !important;
      visibility: hidden !important;
      position: absolute !important;
      top: -9999px !important;
      left: -9999px !important;
      width: 0 !important;
      height: 0 !important;
      min-height: 0 !important;
      max-height: 0 !important;
      overflow: hidden !important;
      z-index: -1 !important;
      pointer-events: none !important;
    }
    
    /* Specifik fix för loginContainer när den är dold */
    #loginContainer.hidden {
      display: none !important;
      visibility: hidden !important;
      position: absolute !important;
      top: -9999px !important;
      left: -9999px !important;
      width: 0 !important;
      height: 0 !important;
      min-height: 0 !important;
      max-height: 0 !important;
      overflow: hidden !important;
      z-index: -1 !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    
    /* Display utility classes */
    .hidden {
      display: none !important;
    }
    
    .visible {
      display: block;
    }
    
    .visible-flex {
      display: flex;
    }
    
    .visible-inline-block {
      display: inline-block;
    }
    
    .visible-inline-flex {
      display: inline-flex;
    }
    
.tab-content:not(.visible):not(.visible-flex):not(.visible-inline-block):not(.visible-inline-flex) {
  display: none !important;
}

/* Extra säkerhet för lager-beställningslistan även om fel klass hamnar kvar */
#lagerbestallningslistaVisning:not(.visible):not(.visible-flex):not(.visible-inline-block):not(.visible-inline-flex),
#lagerbestallningslistaVisning.hidden {
  display: none !important;
}

    .screen-content-box {
      background: rgba(255,255,255,0.9);
      padding: 40px;
      border-radius: 8px;
      max-width: 600px;
      width: 100%;
      position: relative;
      box-shadow: 0 4px 20px var(--shadow);
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    }
    
    /* Dark mode för screen-content-box */
    [data-theme="dark"] .screen-content-box {
      background: rgba(45, 45, 45, 0.95);
      color: var(--text-primary);
      box-shadow: 0 4px 20px var(--shadow);
      transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    }
    
    .screen-content-box.large {
      max-width: 900px;
    }

    .screen-content-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    
    .welcome-block {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
      flex: 1;
      text-align: center;
    }
    
    .btn-contacts {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      padding: 0 !important;
      margin: 0 !important;
      box-sizing: border-box;
      align-self: flex-start;
      flex: 0 0 auto;
      border: none;
      border-radius: 12px;
      background: var(--button-primary);
      color: #fff;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 3px 12px var(--shadow);
      transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    }
    
    .btn-contacts:hover {
      background: var(--button-primary-hover);
      transform: translateY(-1px);
      box-shadow: 0 6px 18px var(--shadow);
    }
    
    .btn-contacts:active {
      transform: translateY(0);
      box-shadow: 0 3px 12px var(--shadow);
    }
    
    .btn-contacts-icon {
      font-size: 1.2em;
      line-height: 1;
    }
    
    [data-theme="dark"] .btn-contacts {
      background: var(--button-primary-hover);
      box-shadow: 0 4px 14px var(--shadow);
    }
    
    .contacts-overlay {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      padding: 24px;
      background: rgba(0,0,0,0.35);
      z-index: 1200;
      overflow-y: auto;
    }
    
    .contacts-panel {
      width: min(460px, 100%);
      max-width: min(460px, calc(100vw - 24px));
      max-height: min(85vh, 820px);
      background: var(--bg-secondary);
      color: var(--text-primary);
      border-radius: 14px;
      box-shadow: 0 10px 30px var(--shadow);
      display: flex;
      flex-direction: column;
      padding: 18px;
      gap: 12px;
      box-sizing: border-box;
    }
    
    [data-theme="dark"] .contacts-panel {
      background: #2b2b2b;
      box-shadow: 0 10px 30px var(--shadow);
    }
    
    .contacts-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    
    .contacts-panel-header > div {
      flex: 1;
      min-width: 0;
    }
    
    .contacts-title {
      font-size: 1.3em;
      font-weight: 700;
      margin: 0;
      word-break: break-word;
    }
    
    .contacts-subtitle {
      color: var(--text-secondary);
      font-size: 0.95em;
      margin-top: 2px;
      word-break: break-word;
      white-space: normal;
    }
    
    .contacts-close-btn {
      border: none;
      background: transparent;
      color: var(--text-secondary);
      font-size: 1.2em;
      cursor: pointer;
      padding: 6px;
      line-height: 1;
      border-radius: 8px;
      transition: background-color 0.2s ease, color 0.2s ease;
      flex-shrink: 0;
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
    }
    
    .contacts-close-btn:hover {
      background: var(--bg-quaternary);
      color: var(--text-primary);
    }
    
    .contacts-search {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--bg-tertiary);
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
    }
    
    [data-theme="dark"] .contacts-search {
      background: #333;
      border-color: var(--border-color-light);
    }
    
    .contacts-search-icon {
      font-size: 1.1em;
      color: var(--text-secondary);
    }
    
    .contacts-search input {
      flex: 1;
      border: none;
      background: transparent;
      color: var(--text-primary);
      font-size: 1em;
      outline: none;
      min-width: 0;
    }
    
    .contacts-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow-y: auto;
      padding-right: 4px;
    }
    
    .contact-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: var(--bg-tertiary);
      box-shadow: 0 2px 8px var(--shadow-light);
    }
    
    [data-theme="dark"] .contact-item {
      background: #353535;
      border-color: var(--border-color-light);
    }
    
    .contact-main {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    
    .contact-avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      overflow: hidden;
      background: linear-gradient(135deg, var(--button-primary), var(--button-primary-hover));
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 700;
      flex-shrink: 0;
    }
    
    .contact-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    
    .contact-avatar-fallback {
      font-size: 1.05em;
      letter-spacing: 0.4px;
    }
    
    .contact-text {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    
    .contact-name {
      font-weight: 700;
      color: var(--text-primary);
      word-break: break-word;
    }
    
    .contact-roles {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    
    .contact-bogs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      margin-top: 4px;
      color: var(--text-secondary);
      font-size: 0.9em;
      line-height: 1.3;
      word-break: break-word;
    }
    
    .contact-bogs-label {
      font-weight: 600;
    }
    
    .bog-chip {
      padding: 4px 8px;
      border-radius: 10px;
      background: var(--bg-quaternary);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
      font-weight: 600;
      font-size: 0.85em;
      white-space: nowrap;
    }
    
    [data-theme="dark"] .bog-chip {
      background: rgba(255,255,255,0.06);
      border-color: var(--border-color-light);
      color: var(--text-primary);
    }
    
    .contact-chip {
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 0.78em;
      font-weight: 600;
      letter-spacing: 0.2px;
      background: var(--bg-quaternary);
      color: var(--text-secondary);
      border: 1px solid var(--border-color);
    }
    
    .chip-admin { background: rgba(211,47,47,0.12); color: #b71c1c; border-color: rgba(211,47,47,0.3); }
    .chip-operator { background: rgba(25,118,210,0.12); color: #0d47a1; border-color: rgba(25,118,210,0.35); }
    .chip-vpl { background: rgba(255,152,0,0.14); color: #e65100; border-color: rgba(255,152,0,0.3); }
    .chip-user { background: rgba(0,0,0,0.06); color: var(--text-secondary); border-color: var(--border-color); }
    
    [data-theme="dark"] .chip-admin { background: rgba(239,83,80,0.2); color: #ef9a9a; border-color: rgba(239,83,80,0.35); }
    [data-theme="dark"] .chip-operator { background: rgba(90,163,245,0.2); color: #90caf9; border-color: rgba(90,163,245,0.35); }
    [data-theme="dark"] .chip-vpl { background: rgba(255,167,38,0.2); color: #ffcc80; border-color: rgba(255,167,38,0.35); }
    [data-theme="dark"] .chip-user { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
    
    .contact-phone {
      white-space: nowrap;
      font-weight: 600;
      color: var(--text-primary);
      word-break: break-word;
    }
    
    .contact-phone a {
      color: inherit;
      text-decoration: none;
      word-break: break-all;
    }
    
    .contact-phone a:hover {
      text-decoration: underline;
    }
    
    .contact-phone.missing {
      color: var(--text-tertiary);
      font-weight: 500;
    }
    
    .contacts-empty {
      text-align: center;
      color: var(--text-secondary);
      padding: 16px;
      border-radius: 10px;
      border: 1px dashed var(--border-color);
      background: var(--bg-tertiary);
    }

    @media (max-width: 640px) {
      .screen-content-header {
        align-items: center;
      }
      .welcome-block {
        text-align: left;
      }
      .btn-contacts {
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        border-radius: 10px;
      }
      .contacts-overlay {
        align-items: flex-start;
        justify-content: center;
        padding: 12px;
      }
      .contacts-panel {
        width: 100%;
        max-width: calc(100vw - 12px);
        min-width: 0;
        box-sizing: border-box;
        max-height: 90vh;
        padding: 12px;
        gap: 10px;
      }
      .contacts-panel-header {
        align-items: flex-start;
        gap: 8px;
        width: 100%;
      }
      .contacts-title {
        font-size: 1.15em;
      }
      .contacts-subtitle {
        font-size: 0.9em;
      }
      .contacts-close-btn {
        width: 32px;
        height: 32px;
        font-size: 1.05em;
      }
      .contacts-search {
        padding: 8px 10px;
        width: 100%;
        box-sizing: border-box;
      }
      .contacts-list {
        gap: 8px;
        width: 100%;
      }
      .contact-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 10px;
      }
      .contact-phone {
        width: 100%;
        text-align: left;
      }
    }
    
    /* Form Styles */
    .form-container {
      min-width: 320px;
      max-width: 400px;
      width: auto;
      background: transparent;
      padding: 20px;
      border-radius: 8px;
      box-shadow: none;
      margin: 0 auto; /* Centrera formuläret */
      align-self: center; /* Ytterligare centrering i flex-container */
    }
    
    /* Dark mode för form-container */
    [data-theme="dark"] .form-container {
      background: transparent;
      box-shadow: none;
    }
    
    .form-group {
      margin-bottom: 16px;
    }
    
    .form-group label {
      color: var(--text-primary);
      transition: color 0.3s ease;
    }
    
    /* Dark mode för form-group label */
    [data-theme="dark"] .form-group label {
      color: var(--text-primary);
      transition: color 0.3s ease;
    }
    
    .form-group-large {
      margin-bottom: 20px;
    }
    
    .form-input-login {
      width: 100%;
      padding: 10px;
      border: 1px solid var(--border-color-light);
      border-radius: 4px;
      font-size: 1em;
      box-sizing: border-box;
      background: var(--bg-primary);
      color: var(--text-primary);
      font-weight: 500;
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    
    .form-input-login:focus {
      background: var(--bg-input);
      border-color: var(--button-primary);
      outline: none;
    }
    
    /* Dark mode för form-input-login */
    [data-theme="dark"] .form-input-login {
      background: var(--bg-input);
      color: var(--text-primary);
      border-color: var(--border-color-light);
    }
    
    [data-theme="dark"] .form-input-login:focus {
      background: var(--bg-input);
      border-color: var(--button-primary);
    }
    
    .btn-submit-full {
      width: 100%;
      padding: 12px;
      background: var(--button-default);
      color: var(--text-white);
      border: none;
      border-radius: 4px;
      font-size: 1em;
      cursor: pointer;
      font-weight: 500;
      transition: background-color 0.3s ease;
    }
    
    .btn-submit-full:hover {
      background: var(--button-default-hover);
    }
    
    /* Dark mode för btn-submit-full */
    [data-theme="dark"] .btn-submit-full {
      background: var(--button-primary);
      transition: background-color 0.3s ease;
    }
    
    [data-theme="dark"] .btn-submit-full:hover {
      background: var(--button-primary-hover);
    }
    
    /* Button Variants */
    .btn-selection {
      padding: 30px;
      color: var(--text-white);
      border: none;
      border-radius: 8px;
      font-size: 1.2em;
      cursor: pointer;
      font-weight: 500;
      transition: background 0.2s;
      height: 120px;
      min-height: 120px;
      max-height: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 10px;
      box-sizing: border-box;
      overflow: hidden;
    }
    
    .btn-selection.primary {
      background: var(--button-primary);
    }
    
    .btn-selection.primary:hover {
      background: var(--button-primary-hover);
    }
    
    .btn-selection.dark {
      background: var(--button-secondary);
    }
    
    .btn-selection.dark:hover {
      background: var(--button-secondary-hover);
    }
    
    .btn-selection.success {
      background: var(--button-success);
      margin: 0;
      color: var(--text-white) !important;
    }
    
    .btn-selection.success:hover {
      background: var(--button-success-hover);
      color: var(--text-white) !important;
    }
    
    .btn-selection.success span {
      color: var(--text-white) !important;
    }
    
    .btn-selection.warning {
      background: var(--button-warning);
    }
    
    .btn-selection.warning:hover {
      background: var(--button-warning-hover);
    }
    
    .btn-selection.gray {
      background: #6c757d;
    }
    
    .btn-selection.gray:hover {
      background: #5a6268;
    }
    
    .btn-selection-icon {
      font-size: 2em;
    }
    
    .btn-home {
      padding: 30px;
      background: var(--button-default);
      color: var(--text-white);
      border: none;
      border-radius: 8px;
      font-size: 1.2em;
      cursor: pointer;
      font-weight: 500;
      transition: background 0.2s;
      height: 120px;
      min-height: 120px;
      max-height: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 10px;
      box-sizing: border-box;
      overflow: hidden;
      line-height: 1.2;
    }
    
    /* Säkerställ att alla varianter av btn-home har samma höjd */
    .btn-home.success,
    .btn-home.info,
    .btn-home.orange,
    .btn-home.danger {
      height: 120px !important;
      min-height: 120px !important;
      max-height: 120px !important;
    }
    
    /* Säkerställ att alla varianter av btn-selection har samma höjd */
    .btn-selection.primary,
    .btn-selection.dark,
    .btn-selection.success,
    .btn-selection.warning,
    .btn-selection.danger,
    .btn-selection.gray {
      height: 120px !important;
      min-height: 120px !important;
      max-height: 120px !important;
    }
    
    .btn-home:hover {
      background: var(--button-secondary-hover);
    }
    
    .btn-home.danger {
      background: var(--button-danger);
    }
    
    .btn-home.danger:hover {
      background: var(--button-danger-hover);
    }
    
    .btn-home.info {
      background: var(--button-primary);
    }
    
    .btn-home.info:hover {
      background: var(--button-primary-hover);
    }
    
    .btn-home.orange {
      background: var(--button-warning);
    }
    
    .btn-home.orange:hover {
      background: var(--button-warning-hover);
    }
    
    .btn-home.success {
      background: var(--button-success);
      margin: 0;
      color: var(--text-white) !important;
    }
    
    .btn-home.success:hover {
      background: var(--button-success-hover);
      color: var(--text-white) !important;
    }
    
    .btn-home.success * {
      color: var(--text-white) !important;
    }
    
    .btn-secondary {
      padding: 10px 20px;
      background: transparent;
      color: var(--text-secondary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      font-size: 0.9em;
      cursor: pointer;
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    
    .btn-secondary:hover {
      background: var(--bg-tertiary);
      color: var(--text-primary);
      border-color: var(--border-color-light);
    }
    
    /* Text Styles */
    .text-center {
      text-align: center;
    }
    
    .text-muted {
      color: var(--text-secondary);
    }
    
    /* Födelsedag text styling */
    #födelsedagsText {
      text-align: center;
      color: var(--text-secondary);
      font-size: 0.9em;
      margin-top: -10px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    
    /* Profilbild i födelsedags-text */
    .födelsedags-profilbild {
      width: 32px !important;
      height: 32px !important;
      min-width: 32px !important;
      min-height: 32px !important;
      max-width: 32px !important;
      max-height: 32px !important;
      border-radius: 50% !important;
      object-fit: cover !important;
      flex-shrink: 0 !important;
      aspect-ratio: 1 / 1 !important;
      border: 2px solid var(--border-color-light);
      vertical-align: middle;
      display: inline-block !important;
      transition: border-color 0.3s ease;
    }
    
    [data-theme="dark"] .födelsedags-profilbild {
      border-color: var(--border-color);
    }
    
    /* Se till att födelsedags-text är flex när den visas */
    #födelsedagsText[style*="display: block"],
    #födelsedagsText[style*="display:block"] {
      display: flex !important;
    }
    
    .heading-welcome {
      text-align: center;
      margin-top: 0;
      margin-bottom: 30px;
      color: var(--text-primary);
      transition: color 0.3s ease;
      font-size: 1.5em;
    }
    
    .text-subtitle {
      text-align: center;
      color: var(--text-secondary);
      transition: color 0.3s ease;
      margin-bottom: 40px;
      font-size: 1.1em;
    }
    
    .text-subtitle-small {
      text-align: center;
      color: var(--text-secondary);
      transition: color 0.3s ease;
      margin-bottom: 30px;
      font-size: 1em;
    }
    
    /* Layout */
    .grid-3-col {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      width: 100%;
      align-items: start;
      justify-items: stretch;
    }
    
    .grid-3-col button {
      width: 100%;
      align-self: start;
    }
    
    .grid-3-col-small {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      width: 100%;
      align-items: start;
    }
    
    .flex-center {
      text-align: center;
      margin-top: 30px;
      display: flex;
      gap: 10px;
      justify-content: center;
    }
    
    /* Error Messages */
    .error-box {
      margin-top: 15px;
      padding: 10px;
      background: rgba(211, 47, 47, 0.1);
      border: 1px solid rgba(211, 47, 47, 0.3);
      color: var(--text-error);
      text-align: center;
      font-size: 0.9em;
      border-radius: 4px;
      display: none;
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    
    [data-theme="dark"] .error-box {
      background: rgba(211, 47, 47, 0.2);
      border-color: rgba(211, 47, 47, 0.4);
      color: var(--text-error);
    }
    
    .error-box.show {
      display: block;
    }
    
    /* Settings box styling */
    .settings-box {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 24px;
      box-shadow: 0 2px 4px var(--shadow-light);
      margin-top: 24px;
      transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }
    
    .settings-box h3 {
      margin-top: 0;
      margin-bottom: 8px;
      color: var(--text-primary);
      font-size: 1.2em;
      transition: color 0.3s ease;
    }
    
    .settings-box p {
      color: var(--text-secondary);
      margin-bottom: 20px;
      font-size: 0.95em;
      transition: color 0.3s ease;
    }
    
    .settings-box label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
      color: var(--text-primary);
      transition: color 0.3s ease;
    }
    
    .settings-box select,
    .settings-box input {
      width: 100%;
      padding: 12px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      box-sizing: border-box;
      font-size: 1em;
      min-height: 44px;
      background: var(--bg-input);
      color: var(--text-primary);
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    
    .settings-box small {
      color: var(--text-secondary);
      display: block;
      margin-top: 4px;
      font-size: 0.85em;
      transition: color 0.3s ease;
    }
    
    .settings-box button[type="submit"] {
      width: 100%;
      padding: 14px 24px;
      background: var(--button-primary);
      color: var(--text-white);
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 1em;
      font-weight: 500;
      min-height: 48px;
      transition: background-color 0.2s;
    }
    
    .settings-box button[type="submit"]:hover {
      background: var(--button-primary-hover);
    }
    
    .settings-box button {
      width: 100%;
      padding: 14px 24px;
      background: var(--button-primary);
      color: var(--text-white);
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 1em;
      font-weight: 500;
      min-height: 48px;
      transition: background-color 0.2s;
    }
    
    .settings-box button:hover {
      background: var(--button-primary-hover);
    }
    
    /* Admin formulär */
    .admin-form-box {
      margin-bottom: 20px;
      background: var(--bg-tertiary);
      padding: 16px;
      border-radius: 4px;
      border: 1px solid var(--border-color);
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    
    .admin-form-box label {
      color: var(--text-primary);
      transition: color 0.3s ease;
    }
    
    .admin-form-box input,
    .admin-form-box select,
    .admin-form-box textarea {
      width: 100%;
      padding: 6px;
      border: 1px solid var(--border-color);
      box-sizing: border-box;
      font-size: 0.9em;
      background: var(--bg-input);
      color: var(--text-primary);
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    
    .admin-form-box input:focus,
    .admin-form-box select:focus,
    .admin-form-box textarea:focus {
      outline: none;
      border-color: var(--button-primary);
    }
    
    /* Roll-dropdown i admin-användartabellen */
    select[id^="rollSelect_"] {
      padding: 4px 8px;
      font-size: 0.85em;
      margin-right: 4px;
      min-width: 140px;
      min-height: 28px;
      height: 28px;
      border: 2px solid var(--border-color);
      border-radius: 4px;
      background: var(--bg-input);
      color: var(--text-primary);
      cursor: pointer;
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    
    select[id^="rollSelect_"]:hover {
      border-color: var(--button-primary);
    }
    
    select[id^="rollSelect_"]:focus {
      outline: none;
      border-color: var(--button-primary);
      box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
    }
    
    .admin-bulk-box {
      margin: 20px 0;
      padding: 16px;
      background: var(--bg-tertiary);
      border-radius: 4px;
      border: 1px solid var(--border-color);
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    
    /* Användare jämförelse */
    .anvandare-jamforelse {
      margin-top: 24px;
      border-top: 2px solid var(--border-color);
      padding-top: 20px;
      transition: border-color 0.3s ease;
    }
    
    .anvandare-jamforelse h3 {
      margin-top: 0;
      margin-bottom: 16px;
      font-size: 1.1em;
      color: var(--text-primary);
      transition: color 0.3s ease;
    }
    
    .graf-container {
      background: var(--bg-tertiary);
      padding: 20px;
      border-radius: 4px;
      border: 1px solid var(--border-color);
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    
    .graf-container h4 {
      margin-top: 0;
      margin-bottom: 16px;
      color: var(--text-primary);
      transition: color 0.3s ease;
    }
    
    .graf-bar-container {
      flex: 1;
      height: 32px;
      background: var(--bg-quaternary);
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      transition: background-color 0.3s ease;
    }
    
    .graf-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border-color);
      transition: border-color 0.3s ease;
    }
    
    .graf-legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .graf-legend-color {
      width: 16px;
      height: 16px;
      border-radius: 3px;
      border: 1px solid var(--border-color);
      transition: border-color 0.3s ease;
    }
    
    .graf-legend-label {
      font-size: 0.85em;
      color: var(--text-secondary);
      transition: color 0.3s ease;
    }
    
    .graf-tab-container {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      border-bottom: 2px solid var(--border-color);
      transition: border-color 0.3s ease;
    }
    
    .graf-tab {
      padding: 10px 20px;
      background: var(--button-secondary);
      color: var(--text-white);
      border: none;
      border-radius: 4px 4px 0 0;
      cursor: pointer;
      font-size: 0.9em;
      font-weight: 500;
      transition: background-color 0.3s ease;
    }
    
    .graf-tab.active {
      background: var(--button-primary);
    }
    
    .graf-tab:hover {
      background: var(--button-primary-hover);
    }
    
    .graf-stat-label {
      min-width: 120px;
      font-size: 0.9em;
      font-weight: 500;
      color: var(--text-primary);
      transition: color 0.3s ease;
    }
    
    .graf-stat-value {
      min-width: 60px;
      text-align: right;
      font-weight: 600;
      color: var(--text-primary);
      transition: color 0.3s ease;
    }
    
    /* Ticker */
    .ticker-fixed {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0,0,0,0.8);
      color: #fff;
      padding: 12px 0;
      overflow: hidden;
      white-space: nowrap;
      font-size: 0.9em;
      z-index: 1000;
    }
    
    .ticker-content {
      display: inline-block;
      padding-left: 0;
      will-change: transform;
      opacity: 0;
    }
    
    .ticker-content.visible {
      opacity: 1;
    }
    
    /* Login Title Spacing */
    .login-title-spacing {
      margin-bottom: 40px;
    }
    
    /* Grid 2 columns for certinventering home */
    .grid-2-col {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      width: 100%;
      align-items: start;
    }
    
    /* ========== DASHBOARD WIDGETS - DARK MODE ========== */
    [data-theme="dark"] .dashboard-widget[style*="background:#f8f8f8"],
    [data-theme="dark"] .dashboard-widget[style*="background: #f8f8f8"] {
      background: var(--bg-tertiary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] .dashboard-widget[style*="color:#666"],
    [data-theme="dark"] .dashboard-widget[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .dashboard-widget[style*="color:#333"],
    [data-theme="dark"] .dashboard-widget[style*="color: #333"] {
      color: var(--text-primary) !important;
    }
    
    /* Dashboard warning boxes */
    [data-theme="dark"] div[style*="background:#fff3cd"],
    [data-theme="dark"] div[style*="background: #fff3cd"] {
      background: rgba(255, 152, 0, 0.15) !important;
      border-color: var(--button-warning) !important;
    }
    
    [data-theme="dark"] div[style*="background:#ffebee"],
    [data-theme="dark"] div[style*="background: #ffebee"] {
      background: rgba(244, 67, 54, 0.15) !important;
      border-color: var(--button-danger) !important;
    }
    
    [data-theme="dark"] div[style*="color:#856404"],
    [data-theme="dark"] div[style*="color: #856404"] {
      color: var(--text-warning) !important;
    }
    
    [data-theme="dark"] div[style*="color:#c62828"],
    [data-theme="dark"] div[style*="color: #c62828"] {
      color: var(--text-error) !important;
    }
    
    /* Dashboard tables */
    [data-theme="dark"] .dashboard-widget table th[style*="background:#fff"],
    [data-theme="dark"] .dashboard-widget table tr[style*="background:#fff"] {
      background: var(--bg-table-header) !important;
    }
    
    [data-theme="dark"] .dashboard-widget table td[style*="color:#666"],
    [data-theme="dark"] .dashboard-widget table td[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    /* Dashboard - all text ska vara ljus i dark mode */
    [data-theme="dark"] .dashboard-widget,
    [data-theme="dark"] .dashboard-widget * {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .dashboard-widget .widget-value {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .dashboard-widget h3,
    [data-theme="dark"] .dashboard-widget h4 {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .dashboard-widget p {
      color: var(--text-secondary) !important;
    }
    
    /* Dashboard - alla divs med ljusa bakgrunder */
    [data-theme="dark"] div[style*="background:#f8f8f8"],
    [data-theme="dark"] div[style*="background: #f8f8f8"] {
      background: var(--bg-tertiary) !important;
      border-color: var(--border-color) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] div[style*="background:#f8f8f8"] *,
    [data-theme="dark"] div[style*="background: #f8f8f8"] * {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] div[style*="background:#f8f8f8"] p,
    [data-theme="dark"] div[style*="background: #f8f8f8"] p {
      color: var(--text-secondary) !important;
    }
    
    /* Senaste inventering info - dark mode */
    #senasteInventeringInfo {
      background: #f0f7ff;
      border: 1px solid #4a90e2;
      border-radius: 4px;
      padding: 12px;
      margin-bottom: 16px;
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    
    [data-theme="dark"] #senasteInventeringInfo {
      background: rgba(74, 144, 226, 0.15) !important;
      border-color: var(--button-primary) !important;
    }
    
    [data-theme="dark"] #senasteInventeringInfo strong,
    [data-theme="dark"] #senasteInventeringInfo i {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] #senasteInventeringInfo div[style*="color:#666"],
    [data-theme="dark"] #senasteInventeringInfo div[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] #senasteInventeringInfo strong[style*="color:#333"],
    [data-theme="dark"] #senasteInventeringInfo strong[style*="color: #333"] {
      color: var(--text-primary) !important;
    }
    
    /* Tabell-rader - dark mode med kontrast */
    /* Placering-rubrik */
    [data-theme="dark"] .placering-rubrik,
    [data-theme="dark"] .placering-rubrik[style*="background-color"],
    [data-theme="dark"] tr.placering-rubrik,
    [data-theme="dark"] tr.placering-rubrik[style*="background-color: rgb(232, 232, 232)"] {
      background-color: var(--bg-placering-rubrik) !important;
    }
    
    [data-theme="dark"] .placering-rubrik td,
    [data-theme="dark"] .placering-rubrik td[style*="background-color"],
    [data-theme="dark"] .placering-rubrik td[style*="color:#333"],
    [data-theme="dark"] .placering-rubrik td[style*="background-color:#e8e8e8"],
    [data-theme="dark"] .placering-rubrik td[style*="color: #333"] {
      background-color: var(--bg-placering-rubrik) !important;
      color: var(--text-primary) !important;
      border-bottom-color: var(--border-color) !important;
    }
    
    /* Sats-rubrik - ljusare än placering-rubrik för kontrast */
    [data-theme="dark"] .sats-rubrik,
    [data-theme="dark"] .sats-rubrik[style*="background-color"],
    [data-theme="dark"] tr.sats-rubrik,
    [data-theme="dark"] tr.sats-rubrik[style*="background-color: rgb(212, 228, 247)"] {
      background-color: rgba(33, 150, 243, 0.25) !important;
    }
    
    [data-theme="dark"] .sats-rubrik td,
    [data-theme="dark"] .sats-rubrik td[style*="background-color"],
    [data-theme="dark"] .sats-rubrik td[style*="color:#1976d2"],
    [data-theme="dark"] .sats-rubrik td[style*="background-color:#d4e4f7"],
    [data-theme="dark"] .sats-rubrik td[style*="color: #1976d2"] {
      background-color: rgba(33, 150, 243, 0.25) !important;
      color: var(--text-primary) !important;
      border-bottom-color: rgba(33, 150, 243, 0.4) !important;
    }
    
    /* Sats-artikel-rad - ljusare än utrymme-artikel-rad för kontrast */
    [data-theme="dark"] .sats-artikel-rad,
    [data-theme="dark"] .sats-artikel-rad[style*="background-color"],
    [data-theme="dark"] tr.sats-artikel-rad,
    [data-theme="dark"] tr.sats-artikel-rad[style*="background-color: rgb(240, 248, 255)"] {
      background-color: rgba(33, 150, 243, 0.12) !important;
    }
    
    [data-theme="dark"] .sats-artikel-rad td,
    [data-theme="dark"] .sats-artikel-rad td[style*="color:#555"],
    [data-theme="dark"] .sats-artikel-rad td[style*="color: #555"] {
      color: var(--text-secondary) !important;
    }
    
    /* Utrymme-artikel-rad - mörkare än sats-artikel-rad för kontrast */
    [data-theme="dark"] .utrymme-artikel-rad,
    [data-theme="dark"] .utrymme-artikel-rad[style*="background-color"],
    [data-theme="dark"] tr.utrymme-artikel-rad,
    [data-theme="dark"] tr.utrymme-artikel-rad[style*="background-color: rgb(250, 250, 250)"] {
      background-color: var(--bg-table) !important;
    }
    
    [data-theme="dark"] .utrymme-artikel-rad td {
      color: var(--text-primary) !important;
    }
    
    /* Input-rutor i tabellen - dark mode */
    [data-theme="dark"] .antal-input,
    [data-theme="dark"] .antal-input[style*="background-color:#fff"],
    [data-theme="dark"] .antal-input[style*="background-color: #fff"],
    [data-theme="dark"] input.antal-input {
      background-color: var(--bg-input) !important;
      border-color: var(--button-primary) !important;
      color: var(--text-primary) !important;
    }
    
    /* Lager-tabell - dark mode */
    [data-theme="dark"] .lager-table,
    [data-theme="dark"] table.lager-table {
      background: var(--bg-table) !important;
      color: var(--text-primary) !important;
    }
    
    /* Lager-tabell rader - dark mode */
    [data-theme="dark"] .lager-table tr,
    [data-theme="dark"] .lager-table tr[style*="background:#fafafa"],
    [data-theme="dark"] .lager-table tr[style*="background: #fafafa"],
    [data-theme="dark"] .lager-table tr[style*="background:#fff"],
    [data-theme="dark"] .lager-table tr[style*="background: #fff"] {
      background-color: var(--bg-table) !important;
    }
    
    [data-theme="dark"] .lager-table tr:nth-child(even),
    [data-theme="dark"] .lager-table tr[style*="background:#fafafa"]:nth-child(even) {
      background-color: var(--bg-quaternary) !important;
    }
    
    /* Lager-tabell celler - dark mode */
    [data-theme="dark"] .lager-table td,
    [data-theme="dark"] .lager-table td[style*="border-bottom:1px solid #e8e8e8"],
    [data-theme="dark"] .lager-table td[style*="border-bottom: 1px solid #e8e8e8"] {
      border-bottom-color: var(--border-color) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .lager-table td[style*="color:#666"],
    [data-theme="dark"] .lager-table td[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .lager-table td[style*="color:#333"],
    [data-theme="dark"] .lager-table td[style*="color: #333"] {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .lager-table td[style*="color:#999"],
    [data-theme="dark"] .lager-table td[style*="color: #999"] {
      color: var(--text-tertiary) !important;
    }
    
    /* Lager-tabell spans och divs med inline-styles - dark mode */
    [data-theme="dark"] .lager-table span[style*="color:#666"],
    [data-theme="dark"] .lager-table span[style*="color: #666"],
    [data-theme="dark"] .lager-table div[style*="color:#666"],
    [data-theme="dark"] .lager-table div[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .lager-table span[style*="color:#333"],
    [data-theme="dark"] .lager-table span[style*="color: #333"],
    [data-theme="dark"] .lager-table div[style*="color:#333"],
    [data-theme="dark"] .lager-table div[style*="color: #333"] {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .lager-table span[style*="color:#999"],
    [data-theme="dark"] .lager-table span[style*="color: #999"],
    [data-theme="dark"] .lager-table div[style*="color:#999"],
    [data-theme="dark"] .lager-table div[style*="color: #999"],
    [data-theme="dark"] .lager-table small[style*="color:#999"],
    [data-theme="dark"] .lager-table small[style*="color: #999"] {
      color: var(--text-tertiary) !important;
    }
    
    [data-theme="dark"] .lager-table i[style*="color:#999"],
    [data-theme="dark"] .lager-table i[style*="color: #999"] {
      color: var(--text-tertiary) !important;
    }
    
    /* Lager-tabell badges - dark mode */
    [data-theme="dark"] .lager-table span[style*="background:#ffebee"],
    [data-theme="dark"] .lager-table span[style*="background: #ffebee"],
    [data-theme="dark"] .lager-table span[style*="background:#ffebee"][style*="color:#c62828"] {
      background: rgba(244, 67, 54, 0.2) !important;
      color: var(--text-error) !important;
    }
    
    /* Lager-tabell progress bars - dark mode */
    [data-theme="dark"] .lager-table div[style*="background:#f5f5f5"],
    [data-theme="dark"] .lager-table div[style*="background: #f5f5f5"] {
      background: var(--bg-tertiary) !important;
    }
    
    /* Lager-tabell actions cell - dark mode */
    [data-theme="dark"] .lager-table .col-actions,
    [data-theme="dark"] .lager-table td.col-actions,
    [data-theme="dark"] .lager-table td[style*="border-bottom:1px solid #ddd"] {
      border-bottom-color: var(--border-color) !important;
    }
    
    /* Ta bort min-width från alla kolumner för smalare tabell */
    .lager-table th,
    .lager-table td,
    .lager-table th.col-fbet,
    .lager-table td.col-fbet,
    .lager-table th.col-fben,
    .lager-table td.col-fben,
    .lager-table th.col-lager,
    .lager-table td.col-lager,
    .lager-table th.col-plats,
    .lager-table td.col-plats,
    .lager-table th.col-lager-antal,
    .lager-table td.col-lager-antal,
    .lager-table th.col-actions,
    .lager-table td.col-actions,
    .lager-table th.col-andrad,
    .lager-table td.col-andrad {
      min-width: 0 !important;
    }
    
    /* Säkerställ att kolumner kan vara så smala som möjligt */
    .lager-table th.col-actions,
    .lager-table .col-actions {
      width: auto !important;
    }
    
    /* ========== DELETE BUTTON I MODAL - ALLTID SYNlig ========== */
    /* Delete-knapp i modalen - alltid synlig på alla skärmar */
    .delete-lager-btn-mobile,
    button.delete-lager-btn-mobile {
      display: flex !important;
      visibility: visible !important;
    }
    
    /* Delete-knapp i tabellen - visa på desktop */
    .lager-table .delete-lager-btn {
      display: flex !important;
    }
    
    /* Mobile - dölj delete-knappen i tabellen, men behåll den i modalen */
    @media (max-width: 768px) {
      .lager-table .delete-lager-btn,
      .lager-table td.col-actions .delete-lager-btn {
        display: none !important;
      }
      
      /* Säkerställ att delete-knappen i modalen alltid är synlig på mobil */
      .delete-lager-btn-mobile,
      button.delete-lager-btn-mobile {
        display: flex !important;
        visibility: visible !important;
      }
    }
    
    /* Lager-tabell ändrad kolumn - enhetlig styling med övriga kolumner */
    .lager-table th.col-andrad {
      text-align: left !important;
      padding: 12px 8px !important;
      font-weight: 600 !important;
      font-size: 0.95em !important;
      color: var(--text-primary) !important;
      background: var(--bg-table-header) !important;
      border-bottom: 2px solid var(--border-color) !important;
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    
    .lager-table td.col-andrad {
      padding: 8px 6px;
      text-align: left !important;
      vertical-align: middle;
      font-size: 0.9em;
      color: var(--text-primary);
      transition: color 0.3s ease;
      border-bottom: 1px solid var(--border-color);
    }
    
    .lager-table .col-andrad div {
      text-align: left;
      line-height: 1.3;
    }
    
    /* Överskriv center-alignment från inline-styles */
    .lager-table .col-andrad div[style*="text-align:center"],
    .lager-table .col-andrad div[style*="text-align: center"],
    .lager-table td.col-andrad[style*="text-align:center"],
    .lager-table td.col-andrad[style*="text-align: center"],
    .lager-table th.col-andrad[style*="text-align:center"],
    .lager-table th.col-andrad[style*="text-align: center"] {
      text-align: left !important;
    }
    
    .lager-table .col-andrad div[style*="font-size:0.85em"],
    .lager-table .col-andrad div[style*="font-size: 0.85em"] {
      font-size: 0.9em !important;
      font-weight: 500;
      color: var(--text-primary) !important;
      transition: color 0.3s ease;
    }
    
    .lager-table .col-andrad div[style*="font-size:0.8em"],
    .lager-table .col-andrad div[style*="font-size: 0.8em"] {
      font-size: 0.85em !important;
      color: var(--text-secondary) !important;
      transition: color 0.3s ease;
    }
    
    .lager-table .col-andrad span[style*="color:#999"],
    .lager-table .col-andrad span[style*="color: #999"],
    .lager-table .col-andrad span[style*="font-size:0.85em"] {
      color: var(--text-tertiary) !important;
      font-size: 0.85em !important;
      transition: color 0.3s ease;
    }
    
    [data-theme="dark"] .lager-table td.col-andrad {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .lager-table th.col-andrad {
      text-align: left !important;
      color: var(--text-primary) !important;
      background: var(--bg-table-header) !important;
      border-bottom-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] .lager-table .col-andrad div[style*="color:#333"],
    [data-theme="dark"] .lager-table .col-andrad div[style*="color: #333"] {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .lager-table .col-andrad div[style*="color:#666"],
    [data-theme="dark"] .lager-table .col-andrad div[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .lager-table .col-andrad span[style*="color:#999"],
    [data-theme="dark"] .lager-table .col-andrad span[style*="color: #999"] {
      color: var(--text-tertiary) !important;
    }
    
    /* Lager-tabell mobile view - dark mode */
    [data-theme="dark"] .lager-table .mobile-only div[style*="color:#666"],
    [data-theme="dark"] .lager-table .mobile-only div[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .lager-table .mobile-only div[style*="color:#2e7d32"],
    [data-theme="dark"] .lager-table .mobile-only div[style*="color: #2e7d32"] {
      color: var(--button-success) !important;
    }
    
    /* Lager-tabell strong element med färger - dark mode */
    [data-theme="dark"] .lager-table strong[style*="color:#1976d2"],
    [data-theme="dark"] .lager-table strong[style*="color: #1976d2"] {
      color: var(--button-primary) !important;
    }
    
    [data-theme="dark"] .lager-table strong i[style*="color:#999"],
    [data-theme="dark"] .lager-table strong i[style*="color: #999"] {
      color: var(--text-tertiary) !important;
    }
    
    /* Lager-tabell desktop-only spans - dark mode */
    [data-theme="dark"] .lager-table .desktop-only {
      color: inherit;
    }
    
    /* Lager-tabell borders - dark mode */
    [data-theme="dark"] .lager-table tr[style*="border-left:3px solid #c62828"] {
      border-left-color: var(--button-danger) !important;
    }
    
    [data-theme="dark"] .lager-table tr[style*="border-left:3px solid #4caf50"] {
      border-left-color: var(--button-success) !important;
    }
    
    /* Lager-tabell header - dark mode */
    [data-theme="dark"] .lager-table thead,
    [data-theme="dark"] .lager-table th {
      background: var(--bg-table-header) !important;
      color: var(--text-primary) !important;
      border-bottom-color: var(--border-color) !important;
    }
    
    /* Lager-tabell edit buttons - dark mode */
    [data-theme="dark"] .lager-table .edit-lager-btn {
      background: var(--button-primary) !important;
      color: var(--text-white) !important;
    }
    
    [data-theme="dark"] .lager-table .edit-lager-btn:hover {
      background: var(--button-primary-hover) !important;
    }
    
    /* ========== LAGER MODALER - DARK MODE ========== */
    /* Modals - dark mode */
    [data-theme="dark"] .lagg-till-lager-modal,
    [data-theme="dark"] .ta-fran-lager-modal,
    [data-theme="dark"] .flytta-lager-modal,
    [data-theme="dark"] .bulk-operationer-modal,
    [data-theme="dark"] .qr-scanner-modal > div,
    [data-theme="dark"] #qrEtikettContent {
      background: var(--bg-modal) !important;
      border-color: var(--border-color) !important;
      box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
    }
    
    /* Modal headers */
    [data-theme="dark"] .lagg-till-lager-modal h3,
    [data-theme="dark"] .ta-fran-lager-modal h3,
    [data-theme="dark"] .flytta-lager-modal h3,
    [data-theme="dark"] .bulk-operationer-modal h3,
    [data-theme="dark"] .qr-scanner-modal h3 {
      color: var(--text-primary) !important;
    }
    
    /* Modal buttons */
    [data-theme="dark"] .lagg-till-lager-modal button,
    [data-theme="dark"] .ta-fran-lager-modal button,
    [data-theme="dark"] .flytta-lager-modal button,
    [data-theme="dark"] .bulk-operationer-modal button,
    [data-theme="dark"] .qr-scanner-modal button {
      color: var(--text-white) !important;
    }
    
    [data-theme="dark"] .qr-scanner-modal .qr-scanner-close {
      color: var(--text-secondary) !important;
    }
    
    /* Info boxes inside modals */
    [data-theme="dark"] .lagg-till-lager-modal div[style*="background:#f5f5f5"],
    [data-theme="dark"] .lagg-till-lager-modal div[style*="background: #f5f5f5"],
    [data-theme="dark"] .lagg-till-lager-modal div[style*="background:#e3f2fd"],
    [data-theme="dark"] .lagg-till-lager-modal div[style*="background: #e3f2fd"],
    [data-theme="dark"] .bulk-operationer-modal div[style*="background:#e3f2fd"],
    [data-theme="dark"] .bulk-operationer-modal div[style*="background: #e3f2fd"] {
      background: var(--bg-secondary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] .bulk-operationer-modal div[style*="background:#fff3e0"],
    [data-theme="dark"] .bulk-operationer-modal div[style*="background: #fff3e0"] {
      background: rgba(255, 152, 0, 0.15) !important;
      border-color: var(--button-warning) !important;
    }
    
    /* Text colors inside info boxes */
    [data-theme="dark"] .lagg-till-lager-modal h4,
    [data-theme="dark"] .bulk-operationer-modal h4 {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .lagg-till-lager-modal small[style*="color:#666"],
    [data-theme="dark"] .bulk-operationer-modal small[style*="color:#666"] {
      color: var(--text-secondary) !important;
    }
    
    /* Bulk lists and article lists */
    [data-theme="dark"] #laggTillLagerBulkLista > div,
    [data-theme="dark"] #taFranLagerBulkLista > div,
    [data-theme="dark"] #bulkValdaArtiklar > div,
    [data-theme="dark"] #bulkArtiklarLista {
      background: var(--bg-table) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] #laggTillLagerBulkLista div[style*="background:#f9f9f9"],
    [data-theme="dark"] #laggTillLagerBulkLista div[style*="background: #f9f9f9"],
    [data-theme="dark"] #taFranLagerBulkLista div[style*="background:#f9f9f9"],
    [data-theme="dark"] #taFranLagerBulkLista div[style*="background: #f9f9f9"],
    [data-theme="dark"] #bulkValdaArtiklar div[style*="background:#f9f9f9"],
    [data-theme="dark"] #bulkValdaArtiklar div[style*="background: #f9f9f9"] {
      background: var(--bg-quaternary) !important;
    }
    
    [data-theme="dark"] #laggTillLagerBulkLista div[style*="background:#fff"],
    [data-theme="dark"] #laggTillLagerBulkLista div[style*="background: #fff"],
    [data-theme="dark"] #taFranLagerBulkLista div[style*="background:#fff"],
    [data-theme="dark"] #taFranLagerBulkLista div[style*="background: #fff"],
    [data-theme="dark"] #bulkValdaArtiklar div[style*="background:#fff"],
    [data-theme="dark"] #bulkValdaArtiklar div[style*="background: #fff"] {
      background: var(--bg-table) !important;
    }
    
    [data-theme="dark"] #laggTillLagerBulkLista strong,
    [data-theme="dark"] #taFranLagerBulkLista strong,
    [data-theme="dark"] #bulkValdaArtiklar strong {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] #laggTillLagerBulkLista small,
    [data-theme="dark"] #taFranLagerBulkLista small,
    [data-theme="dark"] #bulkValdaArtiklar small {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] #laggTillLagerBulkLista button,
    [data-theme="dark"] #taFranLagerBulkLista button,
    [data-theme="dark"] #bulkValdaArtiklar button {
      background: var(--button-danger) !important;
      color: var(--text-white) !important;
    }
    
    /* Artikel-val-item i listor */
    [data-theme="dark"] .artikel-val-item {
      background: var(--bg-table) !important;
      border-bottom-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] .artikel-val-item:hover {
      background: var(--bg-table-hover) !important;
    }
    
    [data-theme="dark"] .artikel-val-item[data-selected-artikel="true"] {
      background: rgba(74, 144, 226, 0.2) !important;
    }
    
    [data-theme="dark"] .artikel-val-item div[style*="color:#333"] {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .artikel-val-item div[style*="color:#666"] {
      color: var(--text-secondary) !important;
    }
    
    /* Rubriker i artikellistor */
    [data-theme="dark"] #laggTillLagerArtikelLista div[style*="background:#f0f7ff"],
    [data-theme="dark"] #laggTillLagerArtikelLista div[style*="background: #f0f7ff"] {
      background: rgba(74, 144, 226, 0.15) !important;
      color: var(--button-primary) !important;
      border-bottom-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] #laggTillLagerArtikelLista div[style*="background:#f9f9f9"],
    [data-theme="dark"] #laggTillLagerArtikelLista div[style*="background: #f9f9f9"] {
      background: var(--bg-quaternary) !important;
      color: var(--text-secondary) !important;
      border-bottom-color: var(--border-color) !important;
      border-top-color: var(--border-color) !important;
    }
    
    /* Bulk-operationer specifika element */
    [data-theme="dark"] #bulkArtiklarLista div[style*="background:#fff"],
    [data-theme="dark"] #bulkArtiklarLista div[style*="background: #fff"] {
      background: var(--bg-table) !important;
    }
    
    [data-theme="dark"] #bulkArtiklarLista div[style*="border-bottom:1px solid #eee"] {
      border-bottom-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] #bulkArtiklarLista strong {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] #bulkArtiklarLista small {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] #bulkArtiklarLista button {
      background: var(--button-success) !important;
      color: var(--text-white) !important;
    }
    
    [data-theme="dark"] #bulkArtiklarLista button[disabled] {
      background: var(--bg-tertiary) !important;
      color: var(--text-tertiary) !important;
    }
    
    /* QR-etikett modal */
    [data-theme="dark"] #qrEtikettContent {
      background: var(--bg-modal) !important;
      border-color: var(--border-color) !important;
    }
    
    /* Generella regler för alla element inuti modaler - catch-all */
    [data-theme="dark"] .lagg-till-lager-modal [style*="color:#333"],
    [data-theme="dark"] .ta-fran-lager-modal [style*="color:#333"],
    [data-theme="dark"] .flytta-lager-modal [style*="color:#333"],
    [data-theme="dark"] .bulk-operationer-modal [style*="color:#333"],
    [data-theme="dark"] .qr-scanner-modal [style*="color:#333"],
    [data-theme="dark"] #qrEtikettContent [style*="color:#333"] {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .lagg-till-lager-modal [style*="color:#666"],
    [data-theme="dark"] .ta-fran-lager-modal [style*="color:#666"],
    [data-theme="dark"] .flytta-lager-modal [style*="color:#666"],
    [data-theme="dark"] .bulk-operationer-modal [style*="color:#666"],
    [data-theme="dark"] .qr-scanner-modal [style*="color:#666"],
    [data-theme="dark"] #qrEtikettContent [style*="color:#666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .lagg-till-lager-modal [style*="color:#999"],
    [data-theme="dark"] .ta-fran-lager-modal [style*="color:#999"],
    [data-theme="dark"] .flytta-lager-modal [style*="color:#999"],
    [data-theme="dark"] .bulk-operationer-modal [style*="color:#999"],
    [data-theme="dark"] .qr-scanner-modal [style*="color:#999"],
    [data-theme="dark"] #qrEtikettContent [style*="color:#999"] {
      color: var(--text-tertiary) !important;
    }
    
    [data-theme="dark"] .lagg-till-lager-modal [style*="border:1px solid #ddd"],
    [data-theme="dark"] .ta-fran-lager-modal [style*="border:1px solid #ddd"],
    [data-theme="dark"] .flytta-lager-modal [style*="border:1px solid #ddd"],
    [data-theme="dark"] .bulk-operationer-modal [style*="border:1px solid #ddd"],
    [data-theme="dark"] .qr-scanner-modal [style*="border:1px solid #ddd"],
    [data-theme="dark"] #qrEtikettContent [style*="border:1px solid #ddd"] {
      border-color: var(--border-color) !important;
    }
    
    /* ========== TA FRÅN LAGER MODAL - SPECIFIKA DARK MODE REGLER ========== */
    /* Info-box med ljus bakgrund */
    [data-theme="dark"] .ta-fran-lager-modal div[style*="background:#f5f5f5"],
    [data-theme="dark"] .ta-fran-lager-modal div[style*="background: #f5f5f5"] {
      background: var(--bg-secondary) !important;
      border-color: var(--border-color) !important;
    }
    
    /* Info-box med blå bakgrund */
    [data-theme="dark"] .ta-fran-lager-modal div[style*="background:#e3f2fd"],
    [data-theme="dark"] .ta-fran-lager-modal div[style*="background: #e3f2fd"] {
      background: rgba(33, 150, 243, 0.15) !important;
      border-color: var(--button-primary) !important;
    }
    
    /* Headers i info-boxar */
    [data-theme="dark"] .ta-fran-lager-modal h4,
    [data-theme="dark"] .ta-fran-lager-modal h4[style*="margin:0"] {
      color: var(--text-primary) !important;
    }
    
    /* Labels */
    [data-theme="dark"] .ta-fran-lager-modal label,
    [data-theme="dark"] .ta-fran-lager-modal label[style*="font-weight:500"] {
      color: var(--text-primary) !important;
    }
    
    /* Select och input - specifika IDs */
    [data-theme="dark"] .ta-fran-lager-modal #taFranLagerLager,
    [data-theme="dark"] .ta-fran-lager-modal #taFranLagerPlats,
    [data-theme="dark"] .ta-fran-lager-modal #taFranLagerArtikel,
    [data-theme="dark"] .ta-fran-lager-modal #taFranLagerAntal,
    [data-theme="dark"] .ta-fran-lager-modal #taFranLagerTagetAv,
    [data-theme="dark"] .ta-fran-lager-modal #taFranLagerDatum,
    [data-theme="dark"] .ta-fran-lager-modal select[style*="background:#fff"],
    [data-theme="dark"] .ta-fran-lager-modal select[style*="background: #fff"],
    [data-theme="dark"] .ta-fran-lager-modal input[style*="background:#fff"],
    [data-theme="dark"] .ta-fran-lager-modal input[style*="background: #fff"] {
      background: var(--bg-input) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-color) !important;
    }
    
    /* Small text */
    [data-theme="dark"] .ta-fran-lager-modal small,
    [data-theme="dark"] .ta-fran-lager-modal small[style*="color:#666"],
    [data-theme="dark"] .ta-fran-lager-modal small[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    /* Paragraphs */
    [data-theme="dark"] .ta-fran-lager-modal p,
    [data-theme="dark"] .ta-fran-lager-modal p[style*="color:#666"],
    [data-theme="dark"] .ta-fran-lager-modal p[style*="color: #666"],
    [data-theme="dark"] .ta-fran-lager-modal p[style*="font-style:italic"] {
      color: var(--text-secondary) !important;
    }
    
    /* Buttons */
    [data-theme="dark"] .ta-fran-lager-modal button[disabled],
    [data-theme="dark"] .ta-fran-lager-modal button[style*="opacity:0.5"] {
      opacity: 0.6 !important;
    }
    
    /* Resultat-div */
    [data-theme="dark"] #taFranLagerResultat {
      color: var(--text-primary) !important;
    }
    
    /* Bulk-lista paragraph */
    [data-theme="dark"] #taFranLagerBulkLista p,
    [data-theme="dark"] #taFranLagerBulkLista p[style*="color:#666"],
    [data-theme="dark"] #taFranLagerBulkLista p[style*="color: #666"],
    [data-theme="dark"] #taFranLagerBulkLista p[style*="font-style:italic"] {
      color: var(--text-secondary) !important;
    }
    
    /* ========== LAGERSTATISTIK - DARK MODE ========== */
    [data-theme="dark"] #lagerstatistikVisning,
    [data-theme="dark"] #lagerstatistikVisning h2[style*="color:#333"] {
      color: var(--text-primary) !important;
    }
    
    /* Statistik-boxar */
    [data-theme="dark"] #lagerstatistikVisning div[style*="background:#e3f2fd"],
    [data-theme="dark"] #lagerstatistikVisning div[style*="background: #e3f2fd"] {
      background: rgba(33, 150, 243, 0.15) !important;
      border-color: var(--button-primary) !important;
    }
    
    [data-theme="dark"] #lagerstatistikVisning div[style*="color:#666"],
    [data-theme="dark"] #lagerstatistikVisning div[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] #lagerstatistikVisning div[style*="color:#1976d2"],
    [data-theme="dark"] #lagerstatistikVisning div[style*="color: #1976d2"] {
      color: var(--button-primary) !important;
    }
    
    [data-theme="dark"] #lagerstatistikVisning div[style*="color:#d32f2f"],
    [data-theme="dark"] #lagerstatistikVisning div[style*="color: #d32f2f"] {
      color: var(--button-danger) !important;
    }
    
    [data-theme="dark"] #lagerstatistikVisning div[style*="background:#f5f5f5"],
    [data-theme="dark"] #lagerstatistikVisning div[style*="background: #f5f5f5"] {
      background: var(--bg-secondary) !important;
    }
    
    [data-theme="dark"] #lagerstatistikVisning h3[style*="color:#333"],
    [data-theme="dark"] #lagerstatistikVisning h3[style*="color: #333"] {
      color: var(--text-primary) !important;
    }
    
    /* Statistik per lager boxar */
    [data-theme="dark"] #lagerstatistikVisning div[style*="background:#fff"],
    [data-theme="dark"] #lagerstatistikVisning div[style*="background: #fff"] {
      background: var(--bg-table) !important;
    }
    
    [data-theme="dark"] #lagerstatistikVisning div[style*="border-left:4px solid #1976d2"],
    [data-theme="dark"] #lagerstatistikVisning div[style*="border-left: 4px solid #1976d2"] {
      border-left-color: var(--button-primary) !important;
    }
    
    [data-theme="dark"] #lagerstatistikVisning div[style*="color:#1976d2"][style*="font-weight:600"],
    [data-theme="dark"] #lagerstatistikVisning div[style*="font-weight:600"][style*="color:#1976d2"] {
      color: var(--button-primary) !important;
    }
    
    [data-theme="dark"] #lagerstatistikVisning span[style*="color:#333"],
    [data-theme="dark"] #lagerstatistikVisning span[style*="color: #333"] {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] #lagerstatistikVisning span[style*="color:#666"],
    [data-theme="dark"] #lagerstatistikVisning span[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] #lagerstatistikVisning div[style*="border-top:1px solid rgba(25,118,210,0.2)"] {
      border-top-color: rgba(91, 163, 245, 0.3) !important;
    }
    
    /* ========== LAGERHISTORIK FILTER - DARK MODE ========== */
    [data-theme="dark"] .lagerhistorik-filter-container,
    [data-theme="dark"] .lagerhistorik-filter-container[style*="background:#f5f5f5"],
    [data-theme="dark"] .lagerhistorik-filter-container[style*="background: #f5f5f5"] {
      background: var(--bg-secondary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] .lagerhistorik-filter-container label {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .lagerhistorik-filter-container input,
    [data-theme="dark"] .lagerhistorik-filter-container select {
      background: var(--bg-input) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-color) !important;
    }
    
    /* ========== LÅNSTATISTIK - DARK MODE ========== */
    [data-theme="dark"] #lanstatistikContent,
    [data-theme="dark"] #lanstatistikStats,
    [data-theme="dark"] #lanstatistikStats[style*="background:#f5f5f5"],
    [data-theme="dark"] #lanstatistikStats[style*="background: #f5f5f5"] {
      background: var(--bg-secondary) !important;
    }
    
    [data-theme="dark"] #lanstatistikContent div[style*="color:#666"],
    [data-theme="dark"] #lanstatistikContent div[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] #lanstatistikContent div[style*="color:#4a90e2"],
    [data-theme="dark"] #lanstatistikContent div[style*="color: #4a90e2"],
    [data-theme="dark"] #lanstatistikDetails h3[style*="color:#4a90e2"],
    [data-theme="dark"] #lanstatistikDetails h3[style*="color: #4a90e2"] {
      color: var(--button-primary) !important;
    }
    
    [data-theme="dark"] #lanstatistikContent div[style*="color:#ff9800"],
    [data-theme="dark"] #lanstatistikContent div[style*="color: #ff9800"],
    [data-theme="dark"] #lanstatistikDetails h3[style*="color:#ff9800"],
    [data-theme="dark"] #lanstatistikDetails h3[style*="color: #ff9800"] {
      color: var(--button-warning) !important;
    }
    
    [data-theme="dark"] #lanstatistikContent div[style*="color:#f44336"],
    [data-theme="dark"] #lanstatistikContent div[style*="color: #f44336"],
    [data-theme="dark"] #lanstatistikDetails h3[style*="color:#f44336"],
    [data-theme="dark"] #lanstatistikDetails h3[style*="color: #f44336"] {
      color: var(--button-danger) !important;
    }
    
    /* Lånstatistik details boxar */
    [data-theme="dark"] #lanstatistikDetails div[style*="background:white"],
    [data-theme="dark"] #lanstatistikDetails div[style*="background: white"],
    [data-theme="dark"] #lanstatistikDetails div[style*="background:#fff"],
    [data-theme="dark"] #lanstatistikDetails div[style*="background: #fff"] {
      background: var(--bg-table) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] #lanstatistikDetails div[style*="border:1px solid #e0e0e0"],
    [data-theme="dark"] #lanstatistikDetails div[style*="border: 1px solid #e0e0e0"] {
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] #lanstatistikDetails p[style*="color:#666"],
    [data-theme="dark"] #lanstatistikDetails p[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] #lanstatistikDetails h3[style*="margin-top:0"] {
      color: var(--text-primary) !important;
    }
    
    /* ========== HEM-KNAPP - TEXTFÄRG ========== */
    /* Matcha textfärgen med övriga knappar i menyn */
    button[aria-label="Hem"],
    button[onclick*="closeMobileMenu"][onclick*="showHomeScreen"],
    button[aria-label="Hem"][style*="color:#fff"],
    button[aria-label="Hem"][style*="color: #fff"] {
      color: var(--text-black) !important;
    }
    
    [data-theme="dark"] button[aria-label="Hem"],
    [data-theme="dark"] button[onclick*="closeMobileMenu"][onclick*="showHomeScreen"],
    [data-theme="dark"] button[aria-label="Hem"][style*="color:#666"],
    [data-theme="dark"] button[aria-label="Hem"][style*="color: #666"] {
      color: var(--text-white) !important;
    }
    
    /* ========== MODALER - DARK MODE (GENERAL MODALS) ========== */
    /* Alla modaler skapade av createModal */
    [data-theme="dark"] div[style*="background:#fff"][style*="border-radius:8px"][style*="padding:24px"],
    [data-theme="dark"] div[style*="background: #fff"][style*="border-radius:8px"][style*="padding:24px"],
    [data-theme="dark"] div[id*="Modal"] > div[style*="background:#fff"],
    [data-theme="dark"] div[id*="Modal"] > div[style*="background: #fff"],
    [data-theme="dark"] div[id*="modal"] > div[style*="background:#fff"],
    [data-theme="dark"] div[id*="modal"] > div[style*="background: #fff"] {
      background: var(--bg-modal) !important;
      border-color: var(--border-color) !important;
      box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
    }
    
    /* Modal headers */
    [data-theme="dark"] div[style*="background:#fff"] h3,
    [data-theme="dark"] div[style*="background: #fff"] h3,
    [data-theme="dark"] div[style*="background:#fff"] h3[style*="color:#333"],
    [data-theme="dark"] div[style*="background: #fff"] h3[style*="color: #333"],
    [data-theme="dark"] div[id*="Modal"] h3,
    [data-theme="dark"] div[id*="modal"] h3 {
      color: var(--text-primary) !important;
    }
    
    /* Modal close buttons */
    [data-theme="dark"] button[id*="_close"][style*="color:#666"],
    [data-theme="dark"] button[id*="_close"][style*="color: #666"],
    [data-theme="dark"] button[id*="close"] {
      color: var(--text-secondary) !important;
    }
    
    /* Modal labels */
    [data-theme="dark"] div[style*="background:#fff"] label,
    [data-theme="dark"] div[style*="background: #fff"] label,
    [data-theme="dark"] div[id*="Modal"] label,
    [data-theme="dark"] div[id*="modal"] label {
      color: var(--text-primary) !important;
    }
    
    /* Modal inputs, selects, textareas */
    [data-theme="dark"] div[style*="background:#fff"] input,
    [data-theme="dark"] div[style*="background: #fff"] input,
    [data-theme="dark"] div[style*="background:#fff"] select,
    [data-theme="dark"] div[style*="background: #fff"] select,
    [data-theme="dark"] div[style*="background:#fff"] textarea,
    [data-theme="dark"] div[style*="background: #fff"] textarea,
    [data-theme="dark"] div[id*="Modal"] input,
    [data-theme="dark"] div[id*="Modal"] select,
    [data-theme="dark"] div[id*="Modal"] textarea,
    [data-theme="dark"] div[id*="modal"] input,
    [data-theme="dark"] div[id*="modal"] select,
    [data-theme="dark"] div[id*="modal"] textarea {
      background: var(--bg-input) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-color) !important;
    }
    
    /* Modal paragraphs and small text */
    [data-theme="dark"] div[style*="background:#fff"] p,
    [data-theme="dark"] div[style*="background: #fff"] p,
    [data-theme="dark"] div[style*="background:#fff"] small,
    [data-theme="dark"] div[style*="background: #fff"] small,
    [data-theme="dark"] div[id*="Modal"] p,
    [data-theme="dark"] div[id*="Modal"] small,
    [data-theme="dark"] div[id*="modal"] p,
    [data-theme="dark"] div[id*="modal"] small {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] div[style*="background:#fff"] p[style*="color:#666"],
    [data-theme="dark"] div[style*="background: #fff"] p[style*="color: #666"],
    [data-theme="dark"] div[style*="background:#fff"] small[style*="color:#666"],
    [data-theme="dark"] div[style*="background: #fff"] small[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    /* Modal bold text */
    [data-theme="dark"] div[style*="background:#fff"] b,
    [data-theme="dark"] div[style*="background: #fff"] b,
    [data-theme="dark"] div[id*="Modal"] b,
    [data-theme="dark"] div[id*="modal"] b {
      color: var(--text-primary) !important;
    }
    
    /* Modal info boxes */
    [data-theme="dark"] div[style*="background:#f8f8f8"],
    [data-theme="dark"] div[style*="background: #f8f8f8"],
    [data-theme="dark"] div[id*="Modal"] div[style*="background:#f8f8f8"],
    [data-theme="dark"] div[id*="Modal"] div[style*="background: #f8f8f8"],
    [data-theme="dark"] div[id*="modal"] div[style*="background:#f8f8f8"],
    [data-theme="dark"] div[id*="modal"] div[style*="background: #f8f8f8"] {
      background: var(--bg-secondary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] div[style*="background:#f8f8f8"] label,
    [data-theme="dark"] div[style*="background: #f8f8f8"] label,
    [data-theme="dark"] div[style*="background:#f8f8f8"] label[style*="color:#333"],
    [data-theme="dark"] div[style*="background: #f8f8f8"] label[style*="color: #333"] {
      color: var(--text-primary) !important;
    }
    
    /* Modal readonly/disabled fields */
    [data-theme="dark"] div[id*="Enhet"][style*="background:#f5f5f5"],
    [data-theme="dark"] div[id*="Enhet"][style*="background: #f5f5f5"],
    [data-theme="dark"] div[style*="background:#f5f5f5"][style*="color:#666"],
    [data-theme="dark"] div[style*="background: #f5f5f5"][style*="color: #666"] {
      background: var(--bg-tertiary) !important;
      color: var(--text-secondary) !important;
      border-color: var(--border-color) !important;
    }
    
    /* Modal spans */
    [data-theme="dark"] div[style*="background:#fff"] span,
    [data-theme="dark"] div[style*="background: #fff"] span,
    [data-theme="dark"] div[id*="Modal"] span,
    [data-theme="dark"] div[id*="modal"] span {
      color: inherit;
    }
    
    /* Specific modal styling - Redigera lager modal */
    [data-theme="dark"] #redigeraLagerForm,
    [data-theme="dark"] #redigeraLagerForm * {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] #redigeraLagerForm p,
    [data-theme="dark"] #redigeraLagerForm small {
      color: var(--text-secondary) !important;
    }
    
    /* Specific modal styling - Individnummer modal */
    [data-theme="dark"] #individnummerModal,
    [data-theme="dark"] #individnummerModal_content {
      color: var(--text-primary) !important;
    }
    
    /* Specific modal styling - Cert modal */
    [data-theme="dark"] #certModal,
    [data-theme="dark"] #certModal_content {
      color: var(--text-primary) !important;
    }
    
    /* Modal result divs */
    [data-theme="dark"] #redigeraLagerResultat,
    [data-theme="dark"] #individnummerResultat,
    [data-theme="dark"] #certResultat {
      color: var(--text-primary) !important;
    }
    
    /* ========== BESTÄLLNINGSLISTA RESULTAT - DARK MODE ========== */
    /* Huvudcontainer */
    [data-theme="dark"] #bestallningslistaResultat,
    [data-theme="dark"] #bestallningslistaResultat div[style*="background:#fff"],
    [data-theme="dark"] #bestallningslistaResultat div[style*="background: #fff"] {
      background: var(--bg-table) !important;
      border-color: var(--button-success) !important;
      color: var(--text-primary) !important;
    }
    
    /* Borders */
    [data-theme="dark"] #bestallningslistaResultat div[style*="border:2px solid #4caf50"],
    [data-theme="dark"] #bestallningslistaResultat div[style*="border: 2px solid #4caf50"],
    [data-theme="dark"] #bestallningslistaResultat div[style*="border-bottom:2px solid #4caf50"],
    [data-theme="dark"] #bestallningslistaResultat div[style*="border-bottom: 2px solid #4caf50"],
    [data-theme="dark"] #bestallningslistaResultat div[style*="border:1px solid #4caf50"],
    [data-theme="dark"] #bestallningslistaResultat div[style*="border: 1px solid #4caf50"] {
      border-color: var(--button-success) !important;
    }
    
    /* Headers och titlar */
    [data-theme="dark"] #bestallningslistaResultat h3,
    [data-theme="dark"] #bestallningslistaResultat h3[style*="color:#2e7d32"],
    [data-theme="dark"] #bestallningslistaResultat h3[style*="color: #2e7d32"],
    [data-theme="dark"] #bestallningslistaResultat h4,
    [data-theme="dark"] #bestallningslistaResultat h4[style*="color:#2e7d32"],
    [data-theme="dark"] #bestallningslistaResultat h4[style*="color: #2e7d32"] {
      color: var(--button-success) !important;
    }
    
    /* Paragraphs */
    [data-theme="dark"] #bestallningslistaResultat p,
    [data-theme="dark"] #bestallningslistaResultat p[style*="color:#666"],
    [data-theme="dark"] #bestallningslistaResultat p[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    /* Tables */
    [data-theme="dark"] #bestallningslistaResultat table {
      background: var(--bg-table) !important;
      color: var(--text-primary) !important;
    }
    
    /* Table headers */
    [data-theme="dark"] #bestallningslistaResultat thead,
    [data-theme="dark"] #bestallningslistaResultat th,
    [data-theme="dark"] #bestallningslistaResultat tr[style*="background:#f5f5f5"],
    [data-theme="dark"] #bestallningslistaResultat tr[style*="background: #f5f5f5"] {
      background: var(--bg-table-header) !important;
      color: var(--text-primary) !important;
      border-bottom-color: var(--button-success) !important;
    }
    
    [data-theme="dark"] #bestallningslistaResultat th[style*="border-bottom:2px solid #4caf50"],
    [data-theme="dark"] #bestallningslistaResultat th[style*="border-bottom: 2px solid #4caf50"],
    [data-theme="dark"] #bestallningslistaResultat th[style*="border-bottom:1px solid #ddd"],
    [data-theme="dark"] #bestallningslistaResultat th[style*="border-bottom: 1px solid #ddd"] {
      border-bottom-color: var(--button-success) !important;
    }
    
    /* Table rows */
    [data-theme="dark"] #bestallningslistaResultat tbody tr,
    [data-theme="dark"] #bestallningslistaResultat tr[style*="background:#fff"],
    [data-theme="dark"] #bestallningslistaResultat tr[style*="background: #fff"] {
      background: var(--bg-table) !important;
      border-bottom-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] #bestallningslistaResultat tr[style*="background:#f9f9f9"],
    [data-theme="dark"] #bestallningslistaResultat tr[style*="background: #f9f9f9"] {
      background: var(--bg-quaternary) !important;
    }
    
    /* Table cells */
    [data-theme="dark"] #bestallningslistaResultat td {
      color: var(--text-primary) !important;
      border-bottom-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] #bestallningslistaResultat td[style*="color:#666"],
    [data-theme="dark"] #bestallningslistaResultat td[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] #bestallningslistaResultat td[style*="color:#d32f2f"],
    [data-theme="dark"] #bestallningslistaResultat td[style*="color: #d32f2f"] {
      color: var(--button-danger) !important;
    }
    
    /* Table borders */
    [data-theme="dark"] #bestallningslistaResultat div[style*="border:1px solid #e0e0e0"],
    [data-theme="dark"] #bestallningslistaResultat div[style*="border: 1px solid #e0e0e0"],
    [data-theme="dark"] #bestallningslistaResultat tr[style*="border-bottom:1px solid #e0e0e0"],
    [data-theme="dark"] #bestallningslistaResultat tr[style*="border-bottom: 1px solid #e0e0e0"] {
      border-color: var(--border-color) !important;
    }
    
    /* Bognummer headers (blå bakgrund) */
    [data-theme="dark"] #bestallningslistaResultat div[style*="background:#4a90e2"],
    [data-theme="dark"] #bestallningslistaResultat div[style*="background: #4a90e2"] {
      background: var(--button-primary) !important;
      color: var(--text-white) !important;
    }
    
    /* Info-boxar (grön bakgrund) */
    [data-theme="dark"] #bestallningslistaResultat div[style*="background:#e8f5e9"],
    [data-theme="dark"] #bestallningslistaResultat div[style*="background: #e8f5e9"] {
      background: rgba(76, 175, 80, 0.2) !important;
      border-color: var(--button-success) !important;
    }
    
    [data-theme="dark"] #bestallningslistaResultat div[style*="background:#e8f5e9"] span,
    [data-theme="dark"] #bestallningslistaResultat div[style*="background: #e8f5e9"] span,
    [data-theme="dark"] #bestallningslistaResultat div[style*="background:#e8f5e9"] span[style*="color:#2e7d32"],
    [data-theme="dark"] #bestallningslistaResultat div[style*="background: #e8f5e9"] span[style*="color: #2e7d32"],
    [data-theme="dark"] #bestallningslistaResultat div[style*="background:#e8f5e9"] span[style*="color:#d32f2f"],
    [data-theme="dark"] #bestallningslistaResultat div[style*="background: #e8f5e9"] span[style*="color: #d32f2f"] {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] #bestallningslistaResultat div[style*="background:#e8f5e9"] span[style*="color:#d32f2f"],
    [data-theme="dark"] #bestallningslistaResultat div[style*="background: #e8f5e9"] span[style*="color: #d32f2f"] {
      color: var(--button-danger) !important;
    }
    
    /* Scrollable containers */
    [data-theme="dark"] #bestallningslistaResultat div[style*="max-height:300px"],
    [data-theme="dark"] #bestallningslistaResultat div[style*="max-height: 300px"] {
      background: var(--bg-table) !important;
      border-color: var(--border-color) !important;
    }
    
    /* Spans med färger */
    [data-theme="dark"] #bestallningslistaResultat span {
      color: inherit;
    }
    
    /* Generella färger i bestallningslistaResultat */
    [data-theme="dark"] #bestallningslistaResultat [style*="color:#666"],
    [data-theme="dark"] #bestallningslistaResultat [style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] #bestallningslistaResultat [style*="color:#2e7d32"],
    [data-theme="dark"] #bestallningslistaResultat [style*="color: #2e7d32"] {
      color: var(--button-success) !important;
    }
    
    [data-theme="dark"] #bestallningslistaResultat [style*="color:#d32f2f"],
    [data-theme="dark"] #bestallningslistaResultat [style*="color: #d32f2f"] {
      color: var(--button-danger) !important;
    }
    
    [data-theme="dark"] #bestallningslistaResultat [style*="color:#333"],
    [data-theme="dark"] #bestallningslistaResultat [style*="color: #333"] {
      color: var(--text-primary) !important;
    }
    
    /* ========== LAGER BESTÄLLNINGSLISTA VISNING - DARK MODE ========== */
    /* Huvudcontainer */
    [data-theme="dark"] #lagerbestallningslistaVisning,
    [data-theme="dark"] #lagerbestallningslistaVisning[style*="background:rgb(255,255,255)"],
    [data-theme="dark"] #lagerbestallningslistaVisning[style*="background: rgb(255, 255, 255)"],
    [data-theme="dark"] #lagerbestallningslistaVisning[style*="color:rgb(51,51,51)"],
    [data-theme="dark"] #lagerbestallningslistaVisning[style*="color: rgb(51, 51, 51)"] {
      background: var(--bg-primary) !important;
      color: var(--text-primary) !important;
    }
    
    /* Info-box */
    [data-theme="dark"] #lagerbestallningslistaVisning div[style*="background:#f8f8f8"],
    [data-theme="dark"] #lagerbestallningslistaVisning div[style*="background: #f8f8f8"] {
      background: var(--bg-secondary) !important;
      border-color: var(--border-color) !important;
    }
    
    /* Paragraphs och text */
    [data-theme="dark"] #lagerbestallningslistaVisning p,
    [data-theme="dark"] #lagerbestallningslistaVisning p[style*="color:#333"],
    [data-theme="dark"] #lagerbestallningslistaVisning p[style*="color: #333"] {
      color: var(--text-secondary) !important;
    }
    
    /* Labels */
    [data-theme="dark"] #lagerbestallningslistaVisning label,
    [data-theme="dark"] #lagerbestallningslistaVisning label[style*="color:#333"],
    [data-theme="dark"] #lagerbestallningslistaVisning label[style*="color: #333"] {
      color: var(--text-primary) !important;
    }
    
    /* Select */
    [data-theme="dark"] #lagerbestallningslistaVisning select,
    [data-theme="dark"] #lagerbestallningslistaVisning select[style*="background:#fff"],
    [data-theme="dark"] #lagerbestallningslistaVisning select[style*="background: #fff"],
    [data-theme="dark"] #lagerBestallningslistaLagerVal {
      background: var(--bg-input) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-color) !important;
    }
    
    /* Resultat-container (använder samma struktur som bestallningslistaResultat) */
    [data-theme="dark"] #lagerBestallningslistaResultat,
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="background:#fff"],
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="background: #fff"] {
      background: var(--bg-table) !important;
      border-color: var(--button-success) !important;
      color: var(--text-primary) !important;
    }
    
    /* Headers */
    [data-theme="dark"] #lagerBestallningslistaResultat h3,
    [data-theme="dark"] #lagerBestallningslistaResultat h3[style*="color:#2e7d32"],
    [data-theme="dark"] #lagerBestallningslistaResultat h3[style*="color: #2e7d32"],
    [data-theme="dark"] #lagerBestallningslistaResultat h4,
    [data-theme="dark"] #lagerBestallningslistaResultat h4[style*="color:#2e7d32"],
    [data-theme="dark"] #lagerBestallningslistaResultat h4[style*="color: #2e7d32"] {
      color: var(--button-success) !important;
    }
    
    /* Paragraphs */
    [data-theme="dark"] #lagerBestallningslistaResultat p,
    [data-theme="dark"] #lagerBestallningslistaResultat p[style*="color:#666"],
    [data-theme="dark"] #lagerBestallningslistaResultat p[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    /* Tables */
    [data-theme="dark"] #lagerBestallningslistaResultat table {
      background: var(--bg-table) !important;
      color: var(--text-primary) !important;
    }
    
    /* Table headers */
    [data-theme="dark"] #lagerBestallningslistaResultat thead,
    [data-theme="dark"] #lagerBestallningslistaResultat th,
    [data-theme="dark"] #lagerBestallningslistaResultat tr[style*="background:#f5f5f5"],
    [data-theme="dark"] #lagerBestallningslistaResultat tr[style*="background: #f5f5f5"] {
      background: var(--bg-table-header) !important;
      color: var(--text-primary) !important;
      border-bottom-color: var(--button-success) !important;
    }
    
    /* Table rows */
    [data-theme="dark"] #lagerBestallningslistaResultat tbody tr,
    [data-theme="dark"] #lagerBestallningslistaResultat tr[style*="background:#fff"],
    [data-theme="dark"] #lagerBestallningslistaResultat tr[style*="background: #fff"],
    [data-theme="dark"] #lagerBestallningslistaResultat tr[style*="background:#f9f9f9"],
    [data-theme="dark"] #lagerBestallningslistaResultat tr[style*="background: #f9f9f9"] {
      background: var(--bg-table) !important;
      border-bottom-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] #lagerBestallningslistaResultat tr[style*="background:#f9f9f9"]:nth-child(even) {
      background: var(--bg-quaternary) !important;
    }
    
    /* Table cells */
    [data-theme="dark"] #lagerBestallningslistaResultat td {
      color: var(--text-primary) !important;
      border-bottom-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] #lagerBestallningslistaResultat td[style*="color:#666"],
    [data-theme="dark"] #lagerBestallningslistaResultat td[style*="color: #666"],
    [data-theme="dark"] #lagerBestallningslistaResultat td[style*="color:#d32f2f"],
    [data-theme="dark"] #lagerBestallningslistaResultat td[style*="color: #d32f2f"] {
      color: var(--button-danger) !important;
    }
    
    /* Borders */
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="border:2px solid #4caf50"],
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="border: 2px solid #4caf50"],
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="border-bottom:2px solid #4caf50"],
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="border-bottom: 2px solid #4caf50"],
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="border:1px solid #e0e0e0"],
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="border: 1px solid #e0e0e0"],
    [data-theme="dark"] #lagerBestallningslistaResultat th[style*="border-bottom:2px solid #4caf50"],
    [data-theme="dark"] #lagerBestallningslistaResultat th[style*="border-bottom: 2px solid #4caf50"] {
      border-color: var(--button-success) !important;
    }
    
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="border:1px solid #4caf50"],
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="border: 1px solid #4caf50"] {
      border-color: var(--button-success) !important;
    }
    
    /* Info-boxar */
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="background:#e8f5e9"],
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="background: #e8f5e9"] {
      background: rgba(76, 175, 80, 0.2) !important;
      border-color: var(--button-success) !important;
    }
    
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="background:#e8f5e9"] span,
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="background: #e8f5e9"] span {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="background:#e8f5e9"] span[style*="color:#2e7d32"],
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="background: #e8f5e9"] span[style*="color: #2e7d32"],
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="background:#e8f5e9"] span[style*="color:#d32f2f"],
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="background: #e8f5e9"] span[style*="color: #d32f2f"] {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="background:#e8f5e9"] span[style*="color:#d32f2f"],
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="background: #e8f5e9"] span[style*="color: #d32f2f"] {
      color: var(--button-danger) !important;
    }
    
    /* Scrollable containers */
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="max-height:300px"],
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="max-height: 300px"] {
      background: var(--bg-table) !important;
      border-color: var(--border-color) !important;
    }
    
    /* ========== LAGER TAB - DARK MODE ========== */
    /* Huvudcontainer */
    [data-theme="dark"] #lagerTab {
      background: var(--bg-primary) !important;
      color: var(--text-primary) !important;
    }
    
    /* Filter-sektion med knappar */
    [data-theme="dark"] #lagerTab div[style*="display:flex"],
    [data-theme="dark"] #lagerTab label {
      color: var(--text-primary) !important;
    }
    
    /* Select i filter */
    [data-theme="dark"] #lagerTab select,
    [data-theme="dark"] #lagerVal {
      background: var(--bg-input) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-color) !important;
    }
    
    /* Input i filter */
    [data-theme="dark"] #lagerTab input,
    [data-theme="dark"] #lagerSok {
      background: var(--bg-input) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-color) !important;
    }
    
    /* Checkbox label */
    [data-theme="dark"] #lagerTab label[for="lagerVisaLagaNivaer"] span {
      color: var(--text-primary) !important;
    }
    
    /* Knappar i lagerTab header */
    [data-theme="dark"] #lagerTab button[onclick*="oppnaQRKodSkanner"] {
      background: var(--button-primary) !important;
      color: var(--text-white) !important;
    }
    
    [data-theme="dark"] #lagerTab button[onclick*="laggTillLager"] {
      background: rgba(76, 175, 80, 0.15) !important;
      color: var(--button-success) !important;
      border-color: var(--button-success) !important;
    }
    
    [data-theme="dark"] #lagerTab button[onclick*="taFranLager"] {
      background: rgba(255, 152, 0, 0.15) !important;
      color: var(--button-warning) !important;
      border-color: var(--button-warning) !important;
    }
    
    [data-theme="dark"] #lagerTab button[onclick*="flyttaMellanLager"] {
      background: rgba(33, 150, 243, 0.15) !important;
      color: var(--button-primary) !important;
      border-color: var(--button-primary) !important;
    }
    
    [data-theme="dark"] #lagerTab button[onclick*="exporteraLager"] {
      background: rgba(156, 39, 176, 0.15) !important;
      color: #ba68c8 !important;
      border-color: #ba68c8 !important;
    }
    
    [data-theme="dark"] #lagerTab button[onclick*="bulkOperationer"] {
      background: var(--bg-secondary) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-color) !important;
    }
    
    /* Inventeringsformulär - säkerställ att knappen är i linje med input-fälten */
    #inventeringFormFooter {
      align-items: flex-end;
    }
    
    #inventeringFormFooter label {
      display: flex;
      flex-direction: column;
    }
    
    #inventeringFormFooter button[type="submit"] {
      height: calc(44px + 2px); /* Input height + border */
      min-height: calc(44px + 2px);
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      align-self: flex-end;
      margin-bottom: 0;
    }
    
    /* Säkerställ att knappen är på samma nivå som input-rutorna */
    #inventeringFormFooter > div {
      display: flex;
      align-items: flex-end;
    }
    
    #inventeringFormFooter > div label {
      margin-bottom: 0;
    }
    
    @media (max-width: 768px) {
      #inventeringFormFooter {
        align-items: stretch;
      }
      
      #inventeringFormFooter button[type="submit"] {
        height: 48px;
        min-height: 48px;
        align-self: stretch;
      }
    }
    
    /* Kommentar-textarea dark mode */
    #inventeringKommentar {
      background: var(--bg-input);
      color: var(--text-primary);
      border: 1px solid var(--border-color);
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    
    /* Arkiv filter-fönster dark mode */
    [data-theme="dark"] #arkivVisning div[style*="background:#f8f8f8"],
    [data-theme="dark"] #arkivVisning div[style*="background: #f8f8f8"] {
      background: var(--bg-tertiary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] #arkivVisning div[style*="background:#f8f8f8"] h3,
    [data-theme="dark"] #arkivVisning div[style*="background: #f8f8f8"] h3 {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] #arkivVisning div[style*="background:#f8f8f8"] p,
    [data-theme="dark"] #arkivVisning div[style*="background: #f8f8f8"] p {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] #arkivVisning div[style*="background:#f8f8f8"] label {
      color: var(--text-primary) !important;
    }
    
    /* ========== ENHETLIG DESIGN FÖR ALLA INPUT-RUTOR, SELECT OCH KNAPPAR ========== */
    /* Global regel för alla input-rutor och select-element (överskrivs av specifika regler vid behov) */
    input[type="text"]:not(#artiklarTable input):not(.antal-input),
    input[type="date"],
    input[type="tel"],
    input[type="email"],
    input[type="number"]:not(#artiklarTable input):not(.antal-input),
    input[type="password"],
    select:not(#artiklarTable select),
    textarea {
      min-height: 44px !important;
      padding: 10px 12px !important;
      font-size: 1em !important;
      border: 1px solid var(--border-color) !important;
      border-radius: 4px;
      box-sizing: border-box;
      width: 100%;
      background: var(--bg-input);
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    
    /* Överskriv inline-styles för input-rutor */
    input[style*="padding:8px"],
    input[style*="padding: 8px"],
    input[style*="padding:6px"],
    input[style*="padding: 6px"] {
      min-height: 44px !important;
      padding: 10px 12px !important;
      font-size: 1em !important;
    }
    
    input[style*="font-size:0.9em"],
    input[style*="font-size: 0.9em"],
    input[style*="font-size:0.95em"],
    input[style*="font-size: 0.95em"] {
      font-size: 1em !important;
    }
    
    select[style*="padding:8px"],
    select[style*="padding: 8px"],
    select[style*="padding:6px"],
    select[style*="padding: 6px"] {
      min-height: 44px !important;
      padding: 10px 12px !important;
      font-size: 1em !important;
    }
    
    select[style*="font-size:0.9em"],
    select[style*="font-size: 0.9em"] {
      font-size: 1em !important;
    }
    
    input:not(#artiklarTable input):not(.antal-input):focus,
    select:not(#artiklarTable select):focus,
    textarea:focus {
      outline: none;
      border-color: var(--button-primary);
      box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
    }
    
    [data-theme="dark"] input:not(#artiklarTable input):not(.antal-input):focus,
    [data-theme="dark"] select:not(#artiklarTable select):focus,
    [data-theme="dark"] textarea:focus {
      box-shadow: 0 0 0 3px rgba(91, 163, 245, 0.3);
    }
    
    textarea {
      min-height: 80px;
      resize: vertical;
      font-family: inherit;
    }
    
    /* Labels - enhetlig design */
    label {
      font-size: 0.85em;
      display: block;
      margin-bottom: 4px;
      color: var(--text-primary);
      transition: color 0.3s ease;
    }
    
    /* Buttons - enhetlig design */
    button:not(.btn-selection):not(.btn-home):not(.admin-sektion-toggle):not(.admin-back-btn):not(.search-clear):not(.icon-only):not(.badge) {
      min-height: 44px !important;
      padding: 10px 16px !important;
      font-size: 1em !important;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 500;
      transition: background-color 0.3s ease, color 0.3s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-sizing: border-box;
    }
    
    /* Överskriv inline-styles för knappar med !important */
    button:not(.btn-selection):not(.btn-home):not(.admin-sektion-toggle):not(.admin-back-btn):not(.search-clear):not(.icon-only):not(.badge)[style*="padding:8px 16px"],
    button:not(.btn-selection):not(.btn-home):not(.admin-sektion-toggle):not(.admin-back-btn):not(.search-clear):not(.icon-only):not(.badge)[style*="padding: 8px 16px"],
    button:not(.btn-selection):not(.btn-home):not(.admin-sektion-toggle):not(.admin-back-btn):not(.search-clear):not(.icon-only):not(.badge)[style*="padding:6px 16px"],
    button:not(.btn-selection):not(.btn-home):not(.admin-sektion-toggle):not(.admin-back-btn):not(.search-clear):not(.icon-only):not(.badge)[style*="padding: 6px 16px"],
    button:not(.btn-selection):not(.btn-home):not(.admin-sektion-toggle):not(.admin-back-btn):not(.search-clear):not(.icon-only):not(.badge)[style*="padding:6px 12px"],
    button:not(.btn-selection):not(.btn-home):not(.admin-sektion-toggle):not(.admin-back-btn):not(.search-clear):not(.icon-only):not(.badge)[style*="padding: 6px 12px"] {
      min-height: 44px !important;
      padding: 10px 16px !important;
      font-size: 1em !important;
    }
    
    button:not(.btn-selection):not(.btn-home):not(.admin-sektion-toggle):not(.admin-back-btn):not(.search-clear):not(.icon-only):not(.badge)[style*="min-height:36px"],
    button:not(.btn-selection):not(.btn-home):not(.admin-sektion-toggle):not(.admin-back-btn):not(.search-clear):not(.icon-only):not(.badge)[style*="min-height: 36px"] {
      min-height: 44px !important;
    }
    
    button:not(.btn-selection):not(.btn-home):not(.admin-sektion-toggle):not(.admin-back-btn):not(.search-clear):not(.icon-only):not(.badge)[style*="font-size:0.9em"],
    button:not(.btn-selection):not(.btn-home):not(.admin-sektion-toggle):not(.admin-back-btn):not(.search-clear):not(.icon-only):not(.badge)[style*="font-size: 0.9em"],
    button:not(.btn-selection):not(.btn-home):not(.admin-sektion-toggle):not(.admin-back-btn):not(.search-clear):not(.icon-only):not(.badge)[style*="font-size:0.85em"],
    button:not(.btn-selection):not(.btn-home):not(.admin-sektion-toggle):not(.admin-back-btn):not(.search-clear):not(.icon-only):not(.badge)[style*="font-size: 0.85em"] {
      font-size: 1em !important;
    }
    
    /* Arkiv filter input-rutor och dropdown - enhetlig storlek */
    #arkivFilterContent input,
    #arkivFilterContent select {
      min-height: 44px;
      padding: 10px 12px;
      font-size: 1em;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      box-sizing: border-box;
      width: 100%;
      background: var(--bg-input);
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    
    /* Beställningslista input-ruta - enhetlig storlek */
    #bestallningslistaDatum {
      min-height: 44px;
      padding: 10px 12px;
      font-size: 1em;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      box-sizing: border-box;
      width: 100%;
      background: var(--bg-input);
      color: var(--text-primary);
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    
    /* Beställningslista knapp - i linje med input */
    #bestallningslistaVisning div[style*="display:flex"] button {
      height: calc(44px + 2px);
      min-height: calc(44px + 2px);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* Allmän regel för knappar i flex-containers med input-rutor - säkerställ i linje */
    div[style*="display:flex"][style*="align-items"] button,
    div[style*="display:flex"][style*="align-items:flex-end"] button {
      height: calc(44px + 2px);
      min-height: calc(44px + 2px);
    }
    
    /* Säkerställ att alla knappar bredvid input-rutor är i linje */
    label + button,
    input + button,
    select + button {
      align-self: flex-end;
    }
    
    /* Beställningslista-fönster dark mode */
    [data-theme="dark"] #bestallningslistaVisning div[style*="background:#f8f8f8"],
    [data-theme="dark"] #bestallningslistaVisning div[style*="background: #f8f8f8"] {
      background: var(--bg-tertiary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] #bestallningslistaVisning div[style*="background:#f8f8f8"] p,
    [data-theme="dark"] #bestallningslistaVisning div[style*="background: #f8f8f8"] p {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] #bestallningslistaVisning div[style*="background:#f8f8f8"] label {
      color: var(--text-primary) !important;
    }
    
    /* ========== COMPREHENSIVE MOBILE UI FIXES ========== */
    @media (max-width: 768px) {
      /* ========== MODALS & POPUPS ========== */
      /* Alla modaler ska vara touch-vänliga och responsiva */
      [style*="position: fixed"][style*="z-index"] {
        padding: 12px !important;
      }
      
      [style*="position: fixed"][style*="z-index"] > div {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 20px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
      }
      
      /* Modal-knappar */
      .bulk-operationer-modal button,
      .ta-fran-lager-modal button,
      [id*="Modal"] button,
      [id*="modal"] button {
        min-height: 44px !important;
        padding: 12px 16px !important;
        font-size: 1em !important;
        touch-action: manipulation !important;
        margin: 4px 0 !important;
      }
      
      /* Modal-formulär */
      .bulk-operationer-modal input,
      .bulk-operationer-modal select,
      .bulk-operationer-modal textarea,
      .ta-fran-lager-modal input,
      .ta-fran-lager-modal select,
      .ta-fran-lager-modal textarea,
      [id*="Modal"] input,
      [id*="Modal"] select,
      [id*="Modal"] textarea,
      [id*="modal"] input,
      [id*="modal"] select,
      [id*="modal"] textarea {
        min-height: 44px !important;
        font-size: 16px !important;
        padding: 10px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }
      
      /* ========== ALL TABLES ========== */
      /* Säkerställ att alla tabeller fungerar utan horisontell scroll */
      table:not(#artiklarTable) {
        width: 100% !important;
        table-layout: auto !important;
        font-size: 0.85em !important;
      }
      
      /* Artiklar-tabellen har sin egen specifika layout */
      #artiklarTable {
        width: 100% !important;
        table-layout: fixed !important;
        font-size: 0.8em !important;
      }
      
      /* Tabell-containers med scroll */
      .table-container,
      [id*="TableWrapper"],
      [id*="tableWrapper"] {
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: 400px !important;
      }
      
      /* Tabell-header och celler */
      table th,
      table td {
        padding: 8px 6px !important;
        font-size: 0.85em !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        vertical-align: top !important;
      }
      
      table th {
        position: sticky !important;
        top: 0 !important;
        background: var(--bg-table-header) !important;
        z-index: 10 !important;
        font-weight: 600 !important;
        transition: background-color 0.3s ease;
      }
      
      /* Tabell-knappar */
      table button {
        min-height: 40px !important;
        padding: 8px 12px !important;
        font-size: 0.9em !important;
        width: 100% !important;
        margin: 2px 0 !important;
      }
      
      /* ========== ALL FORMS ========== */
      /* Alla formulär ska vara touch-vänliga */
      form {
        width: 100% !important;
      }
      
      form label {
        display: block !important;
        margin-bottom: 6px !important;
        font-size: 0.95em !important;
        font-weight: 500 !important;
      }
      
      form input[type="text"],
      form input[type="number"],
      form input[type="date"],
      form input[type="password"],
      form input[type="email"],
      form input[type="tel"],
      form select,
      form textarea {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 16px !important; /* Förhindra zoom på iOS */
        padding: 10px 12px !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
        margin-bottom: 12px !important;
      }
      
      form textarea {
        min-height: 80px !important;
        resize: vertical !important;
      }
      
      form input[type="checkbox"],
      form input[type="radio"] {
        width: 20px !important;
        height: 20px !important;
        min-height: 20px !important;
        margin-right: 8px !important;
      }
      
      form button[type="submit"],
      form button[type="button"] {
        width: 100% !important;
        min-height: 48px !important;
        padding: 12px 20px !important;
        font-size: 1em !important;
        margin: 8px 0 !important;
        touch-action: manipulation !important;
      }
      
      /* ========== ALL BUTTONS ========== */
      /* Säkerställ att alla knappar är touch-vänliga */
      button:not(.btn-selection):not(.btn-home) {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 10px 16px !important;
        font-size: 1em !important;
        touch-action: manipulation !important;
        border-radius: 4px !important;
      }
      
      /* Knappar i flex-containers */
      .flex-center button,
      [style*="display: flex"] button {
        min-height: 44px !important;
        padding: 12px 20px !important;
      }
      
      /* ========== DASHBOARD ========== */
      #dashboardVisning {
        padding: 12px !important;
        background: var(--bg-secondary);
        transition: background-color 0.3s ease;
      }
      
      #dashboardContainer {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        background: var(--bg-secondary);
        transition: background-color 0.3s ease;
      }
      
      .dashboard-widget {
        padding: 16px !important;
        font-size: 0.9em !important;
        background: var(--bg-tertiary) !important;
        border: 1px solid var(--border-color-light) !important;
        transition: background-color 0.3s ease, border-color 0.3s ease;
      }
      
      [data-theme="dark"] .dashboard-widget {
        background: var(--bg-tertiary) !important;
        border-color: var(--border-color) !important;
      }
      
      .widget-value {
        font-size: 1.8em !important;
        color: var(--text-primary) !important;
        transition: color 0.3s ease;
      }
      
      /* ========== ADMIN PANEL ========== */
      #adminVisning {
        padding: 12px !important;
        background: var(--bg-secondary);
        transition: background-color 0.3s ease;
      }
      
      #adminVisning h2,
      #adminVisning h3 {
        font-size: 1.2em !important;
        margin-bottom: 12px !important;
        color: var(--text-primary);
        transition: color 0.3s ease;
      }
      
      #adminVisning section {
        margin-bottom: 20px !important;
        padding: 12px !important;
        background: var(--bg-secondary);
        transition: background-color 0.3s ease;
      }
      
      /* ========== ARKIV VYER ========== */
      #arkivVisning,
      #certinventeringArkivVisning {
        padding: 12px !important;
      }
      
      #arkivContent,
      #certinventeringArkivContent {
        flex-direction: column !important;
        gap: 8px !important;
      }
      
      .bogmapp,
      .datummapp,
      .listfil {
        width: 100% !important;
        padding: 12px !important;
        min-height: 48px !important;
        font-size: 0.95em !important;
        margin: 0 0 8px 0 !important;
      }
      
      /* ========== LÅN-SIDOR ========== */
      #lanVisning {
        padding: 12px !important;
      }
      
      #lanVisning h2,
      #lanVisning h3 {
        font-size: 1.2em !important;
        margin-bottom: 12px !important;
      }
      
      #lanFilterForm input,
      #lanFilterForm select {
        width: 100% !important;
        margin-bottom: 12px !important;
      }
      
      /* ========== LAGER-SIDOR ========== */
      #lagerTab {
        padding: 12px !important;
      }
      
      #lagerTab h2,
      #lagerTab h3 {
        font-size: 1.2em !important;
        margin-bottom: 12px !important;
      }
      
      /* ========== CERTINVENTERING ========== */
      #certinventeringVisning {
        padding: 12px !important;
      }
      
      #certinventeringVisning h2,
      #certinventeringVisning h3 {
        font-size: 1.2em !important;
        margin-bottom: 12px !important;
      }
      
      /* ========== BESTÄLLNINGSLISTA ========== */
      #bestallningslistaVisning {
        padding: 12px !important;
      }
      
      #bestallningslistaVisning h2 {
        font-size: 1.2em !important;
        margin-bottom: 12px !important;
      }
      
      /* ========== ARTIKLAR-SIDOR ========== */
      #artiklarVisning {
        padding: 12px !important;
      }
      
      #artiklarVisning h2 {
        font-size: 1.2em !important;
        margin-bottom: 12px !important;
      }
      
      /* ========== SEARCH FIELDS ========== */
      .sokfalt,
      .artikel-sok-container input,
      input[type="search"],
      [id*="sok"],
      [id*="Sok"],
      [id*="search"],
      [id*="Search"] {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 16px !important;
        padding: 10px 12px !important;
        margin-bottom: 12px !important;
        box-sizing: border-box !important;
      }
      
      /* ========== STATISTIK & CHARTS ========== */
      #statistikVisning,
      #lanstatistikVisning {
        padding: 12px !important;
      }
      
      #statistikVisning h2,
      #lanstatistikVisning h2 {
        font-size: 1.2em !important;
        margin-bottom: 12px !important;
      }
      
      /* ========== MESSAGES & ALERTS ========== */
      .success,
      .error,
      .warning,
      .info,
      #resultat .success,
      #resultat .error {
        padding: 12px !important;
        font-size: 0.95em !important;
        margin: 8px 0 !important;
        border-radius: 4px !important;
        word-break: break-word !important;
      }
      
      /* ========== LOGG ========== */
      #loggVisning {
        padding: 12px !important;
      }
      
      #loggVisning h2 {
        font-size: 1.2em !important;
        margin-bottom: 12px !important;
      }
      
      /* ========== PLACERINGSKARTA ========== */
      #placeringskartaVisning {
        padding: 12px !important;
      }
      
      #placeringskartaVisning h2 {
        font-size: 1.2em !important;
        margin-bottom: 12px !important;
      }
      
      /* ========== GENERAL TEXT SIZES ========== */
      p {
        font-size: 0.95em !important;
        line-height: 1.5 !important;
      }
      
      /* ========== FIX OVERFLOW ISSUES ========== */
      /* Förhindra att element går utanför skärmen */
      img,
      video,
      iframe {
        max-width: 100% !important;
        height: auto !important;
      }
      
      /* Säkerställ box-sizing för alla element */
      *,
      *::before,
      *::after {
        box-sizing: border-box !important;
      }
      
      /* ========== IMPROVE TOUCH TARGETS ========== */
      a,
      button,
      input,
      select,
      textarea,
      label,
      [role="button"] {
        touch-action: manipulation !important;
      }
      
      /* ========== FIX SCROLLING ========== */
      .container,
      .screen-container,
      #mainContainer,
      [id*="Visning"],
      [id*="visning"] {
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
      }
      
      /* ========== TA BORT PROBLEMATISKA MIN-WIDTH ========== */
      /* Ta bort min-width som gör att element hamnar utanför skärmen */
      .bogmapp {
        min-width: 0 !important;
        width: 100% !important;
      }
      
      #anvandareLista table th,
      #anvandareLista table td {
        min-width: 0 !important;
      }
      
      #loggContent table th,
      #loggContent table td {
        min-width: 0 !important;
      }
      
      .bristlista table th,
      .bristlista table td {
        min-width: 0 !important;
      }
      
      #artiklarTable input[type="number"] {
        min-width: 0 !important;
      }
      
      .toast {
        min-width: 0 !important;
        max-width: calc(100vw - 40px) !important;
      }
      
      .form-container {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
      }
      
      /* ========== KNAPPAR MED ENDAST SYMBOLER PÅ MOBIL ========== */
      /* Ersätt text med enbart symboler på knappar på mobil */
      .btn-selection span:not(.btn-selection-icon),
      .btn-home span:not(.btn-selection-icon) {
        display: none !important;
      }
      
      .btn-selection .btn-selection-icon,
      .btn-home .btn-selection-icon {
        font-size: 3em !important;
        display: block !important;
        margin: 0 !important;
      }
      
      /* Knappar utan icon-klass - visa text men gör dem kompaktare */
      .btn-secondary,
      button.btn-secondary {
        padding: 10px 16px !important;
        font-size: 0.9em !important;
        min-height: 44px !important;
      }
      
      /* Knappar i modaler och formulär - kompaktare */
      button[type="submit"],
      button[type="button"]:not(.btn-selection):not(.btn-home) {
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 0.9em !important;
      }
      
      /* ========== STANDARDISERA INPUTS OCH KNAPPAR ========== */
      /* Alla inputs, selects och textareas - samma höjd som knappar */
      input[type="text"],
      input[type="number"],
      input[type="date"],
      input[type="email"],
      input[type="password"],
      input[type="search"],
      select,
      textarea {
        min-height: 44px !important;
        height: 44px !important;
        padding: 10px 12px !important;
        font-size: 16px !important; /* Förhindra zoom på iOS */
        box-sizing: border-box !important;
        border: 1px solid var(--border-color-light) !important;
        border-radius: 4px !important;
        background: var(--bg-input) !important;
        color: var(--text-primary) !important;
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
      }
      
      textarea {
        height: auto !important;
        min-height: 88px !important;
        resize: vertical !important;
      }
      
      /* Dark mode för inputs */
      [data-theme="dark"] input[type="text"],
      [data-theme="dark"] input[type="number"],
      [data-theme="dark"] input[type="date"],
      [data-theme="dark"] input[type="email"],
      [data-theme="dark"] input[type="password"],
      [data-theme="dark"] input[type="search"],
      [data-theme="dark"] select,
      [data-theme="dark"] textarea {
        background: var(--bg-input) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color-light) !important;
      }
      
      [data-theme="dark"] input:focus,
      [data-theme="dark"] select:focus,
      [data-theme="dark"] textarea:focus {
        background: var(--bg-input) !important;
        border-color: var(--button-primary) !important;
        outline: none !important;
      }
      
      /* Labels - alignment med inputs */
      label {
        display: block !important;
        margin-bottom: 6px !important;
        font-size: 0.9em !important;
        font-weight: 500 !important;
        color: var(--text-primary) !important;
      }
      
      /* Form-grupper - konsistent spacing */
      .form-group,
      form > div:not(:last-child) {
        margin-bottom: 16px !important;
      }
      
      /* Flex-containers med inputs och knappar - alignment */
      div[style*="display:flex"] input,
      div[style*="display:flex"] select,
      div[style*="display:flex"] button {
        align-self: flex-end !important;
      }
      
      /* ========== DARK MODE FIXAR FÖR MOBIL ========== */
      /* Säkerställ att alla element har dark mode på mobil */
      [data-theme="dark"] .screen-content-box {
        background: rgba(45, 45, 45, 0.95) !important;
        color: var(--text-primary) !important;
      }
      
      [data-theme="dark"] .bogmapp {
        background: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
      }
      
      [data-theme="dark"] .datummapp {
        background: var(--bg-tertiary) !important;
        color: var(--text-primary) !important;
      }
      
      [data-theme="dark"] table {
        background: var(--bg-table) !important;
        color: var(--text-primary) !important;
      }
      
      [data-theme="dark"] table th {
        background: var(--bg-table-header) !important;
        color: var(--text-primary) !important;
      }
      
      [data-theme="dark"] table td {
        background: var(--bg-table) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
      }
      
      /* ========== FIXA KNAPPAR I MODALER ========== */
      /* Knappar i modaler - kompaktare och bättre alignment */
      .lagg-till-lager-modal button,
      .ta-fran-lager-modal button,
      .flytta-lager-modal button,
      .bulk-operationer-modal button,
      .qr-scanner-modal button,
      div[style*="background:#fff"][style*="border-radius:8px"] button,
      div[style*="background: #fff"][style*="border-radius:8px"] button {
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 0.9em !important;
        box-sizing: border-box !important;
      }
      
      /* ========== FIXA NAVIGATION KNAPPAR ========== */
      /* Navigation-knappar - kompaktare på mobil */
      .nav-menu button {
        min-height: 44px !important;
        padding: 12px 16px !important;
        font-size: 0.95em !important;
        text-align: left !important;
        color: var(--text-primary) !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
      }
      
      /* Säkerställ att alla nav-menu knappar är vänsterjusterade */
      .nav-menu button[aria-label="Hem"],
      .nav-menu button[onclick*="showHomeScreen"],
      .nav-menu button[id="logoutBtn"],
      .nav-menu button[aria-label="Logga ut"],
      .nav-menu button[onclick*="logout()"] {
        text-align: left !important;
        justify-content: flex-start !important;
        align-items: center !important;
        display: flex !important;
        width: 100% !important;
        padding: 12px 16px !important;
        border: none !important;
        border-bottom: 1px solid var(--border-color-light) !important;
        background: var(--bg-secondary) !important;
      }
      
      /* Plocklista-knappen - respektera inline display styles */
      .nav-menu button[id="plocklistaTabBtn"][style*="display: none"] {
        display: none !important;
      }
      
      .nav-menu button[id="plocklistaTabBtn"][style*="display: inline-block"] {
        text-align: left !important;
        justify-content: flex-start !important;
        align-items: center !important;
        display: flex !important;
        width: 100% !important;
        padding: 12px 16px !important;
        border: none !important;
        border-bottom: 1px solid var(--border-color-light) !important;
        background: var(--bg-secondary) !important;
      }
      
      /* Override ALL inline styles för Hem-knappen specifikt */
      .nav-menu button[aria-label="Hem"],
      .nav-menu button[onclick*="showHomeScreen"] {
        background: var(--bg-secondary) !important;
        border: none !important;
        border-bottom: 1px solid var(--border-color-light) !important;
        padding: 12px 16px !important;
        color: var(--text-primary) !important;
        font-size: 0.95em !important;
        border-radius: 0 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
      }
      
      /* Plocklista-knappen - styling men inte display */
      .nav-menu button[id="plocklistaTabBtn"] {
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
      }
      
      /* Respektera inline display styles för plocklista */
      .nav-menu button[id="plocklistaTabBtn"][style*="display: none"] {
        display: none !important;
      }
      
      .nav-menu button[id="plocklistaTabBtn"][style*="display: inline-block"] {
        display: flex !important;
      }
      
      /* Override inline styles för Logga ut-knappen */
      .nav-menu button[id="logoutBtn"],
      .nav-menu button[aria-label="Logga ut"],
      .nav-menu button[onclick*="logout()"] {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
      }
      
      .nav-menu button[style*="color:#666"] {
        color: var(--text-primary) !important;
      }
      
      [data-theme="dark"] .nav-menu button[style*="color:#666"] {
        color: var(--text-primary) !important;
      }
      
      /* Override inline styles som kan påverka alignment */
      .nav-menu button[style*="background:transparent"] {
        background: var(--bg-secondary) !important;
      }
      
      .nav-menu button[style*="background:transparent"]:hover {
        background: var(--bg-primary) !important;
      }
      
      /* Säkerställ att ikoner är alignerade korrekt */
      .nav-menu button .icon,
      .nav-menu button i {
        margin-right: 8px !important;
        flex-shrink: 0 !important;
      }
      
      /* ========== MOBIL DARK MODE - ARTIKLAR TABLE ========== */
      [data-theme="dark"] #artiklarTable .placering-rubrik[style*="background-color: rgb(232, 232, 232)"],
      [data-theme="dark"] #artiklarTable .placering-rubrik[style*="background-color:#e8e8e8"] {
        background-color: var(--bg-placering-rubrik) !important;
      }
      
      [data-theme="dark"] #artiklarTable .placering-rubrik td[style*="background-color:#e8e8e8"],
      [data-theme="dark"] #artiklarTable .placering-rubrik td[style*="color:#333"] {
        background-color: var(--bg-placering-rubrik) !important;
        color: var(--text-primary) !important;
      }
      
      [data-theme="dark"] #artiklarTable .sats-rubrik[style*="background-color: rgb(212, 228, 247)"],
      [data-theme="dark"] #artiklarTable .sats-rubrik[style*="background-color:#d4e4f7"] {
        background-color: rgba(33, 150, 243, 0.25) !important;
      }
      
      [data-theme="dark"] #artiklarTable .sats-rubrik td[style*="background-color:#d4e4f7"],
      [data-theme="dark"] #artiklarTable .sats-rubrik td[style*="color:#1976d2"] {
        background-color: rgba(33, 150, 243, 0.25) !important;
        color: var(--text-primary) !important;
      }
      
      [data-theme="dark"] #artiklarTable .sats-artikel-rad[style*="background-color: rgb(240, 248, 255)"],
      [data-theme="dark"] #artiklarTable .sats-artikel-rad[style*="background-color:#f0f8ff"] {
        background-color: rgba(33, 150, 243, 0.12) !important;
      }
      
      [data-theme="dark"] #artiklarTable .sats-artikel-rad td[style*="color:#555"] {
        color: var(--text-secondary) !important;
      }
      
      [data-theme="dark"] #artiklarTable .utrymme-artikel-rad[style*="background-color: rgb(250, 250, 250)"],
      [data-theme="dark"] #artiklarTable .utrymme-artikel-rad[style*="background-color:#fafafa"] {
        background-color: var(--bg-table) !important;
      }
      
      /* ========== MOBIL DARK MODE - PLOCKLISTA ========== */
      [data-theme="dark"] div[style*="background:#f5f5f5"][style*="border-radius:8px"] {
        background: var(--bg-secondary) !important;
      }
      
      [data-theme="dark"] div[style*="background:#f5f5f5"] h2,
      [data-theme="dark"] div[style*="background:#f5f5f5"] p {
        color: var(--text-primary) !important;
      }
      
      [data-theme="dark"] div[style*="background:#f5f5f5"] table th[style*="background:#4a90e2"] {
        background: var(--button-primary) !important;
        color: var(--text-white) !important;
      }
      
      [data-theme="dark"] div[style*="background:#f5f5f5"] table tr[style*="background:#fff"],
      [data-theme="dark"] div[style*="background:#f5f5f5"] table td {
        background: var(--bg-table) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
      }
      
      /* ========== MOBIL DARK MODE - PLOCKLISTA RESULTAT ========== */
      [data-theme="dark"] #plocklistaResultat div[style*="background:#fff"] {
        background: var(--bg-secondary) !important;
        border-color: var(--button-success) !important;
      }
      
      [data-theme="dark"] #plocklistaResultat h3[style*="color:#2e7d32"],
      [data-theme="dark"] #plocklistaResultat p[style*="color:#666"] {
        color: var(--text-primary) !important;
      }
      
      [data-theme="dark"] #plocklistaResultat table th[style*="background:#f5f5f5"] {
        background: var(--bg-table-header) !important;
        color: var(--text-primary) !important;
      }
      
      [data-theme="dark"] #plocklistaResultat table tr[style*="background:#fff"],
      [data-theme="dark"] #plocklistaResultat table tr[style*="background:#f9f9f9"],
      [data-theme="dark"] #plocklistaResultat table td {
        background: var(--bg-table) !important;
        color: var(--text-primary) !important;
      }
      
      [data-theme="dark"] #plocklistaResultat table tr[style*="background:#f9f9f9"] {
        background: var(--bg-tertiary) !important;
      }
      
      /* ========== FIXA FILTER OCH SÖK-KNAPPAR ========== */
      /* Filter-knappar - kompaktare */
      #arkivFilterButtons button,
      #certinventeringArkivFilterButtons button,
      #lagerhistorikFilterButtons button {
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 0.9em !important;
      }
      
      /* ========== KNAPPAR MED IKONER PÅ MOBIL ========== */
      /* Alla knappar - kompaktare på mobil */
      button {
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 0.9em !important;
        box-sizing: border-box !important;
      }
      
      /* Större knappar behåller sin storlek */
      .btn-selection,
      .btn-home {
        min-height: 100px !important;
        padding: 20px !important;
      }
      
      /* ========== FIXA TABELLER PÅ MOBIL ========== */
      /* Tabeller - ta bort min-width och gör dem responsiva */
      table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
      }
      
      table th,
      table td {
        min-width: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
      }
      
      /* Plocklista - mobilvänlig vy utan att röra desktop */
      #plocklistaResultat .pl-fbet-mobile,
      #plocklistaResultat .pl-radnr-mobile {
        display: none;
      }
      #plocklistaResultat .pl-lagerplats {
        white-space: nowrap;
      }
      
      @media (max-width: 768px) {
        #plocklistaResultat .plocklista-table thead {
          display: none;
        }
        /* Dra ut mot kanter och minska padding/border */
        #plocklistaVisning > div[style*="background:#f8f8f8"] {
          padding: 8px !important;
          margin: 0 !important;
          border: none !important;
        }
        #plocklistaResultat > div[style*="background:#fff"] {
          padding: 8px !important;
          margin: 0 !important;
          border: 1px solid var(--border-color-light) !important;
          border-radius: 6px !important;
          box-shadow: none !important;
        }
        #plocklistaResultat > div[style*="background:#fff"] > div[style*="display:flex"] {
          padding-bottom: 8px !important;
          margin-bottom: 8px !important;
          border-bottom: 1px solid var(--border-color-light) !important;
        }
        #plocklistaResultat .plocklista-table {
          width: 100% !important;
          border-collapse: collapse !important;
        }
        #plocklistaResultat .plocklista-table tr {
          display: grid;
          grid-template-columns: 1.1fr 1.1fr 0.8fr 0.8fr;
          align-items: start;
          gap: 6px;
          margin: 0 0 6px 0;
          border: 1px solid var(--border-color-light);
          border-radius: 6px;
          background: var(--bg-secondary) !important;
          padding: 6px;
        }
        #plocklistaResultat .plocklista-table td,
        #plocklistaResultat .plocklista-table th {
          padding: 2px 4px !important;
          border-bottom: none !important;
          display: block;
          background: inherit !important;
          background-color: inherit !important;
        }
        /* Dölj checkbox-, brist- och separata Fbet-kolumnen */
        #plocklistaResultat .pl-col-check,
        #plocklistaResultat .pl-col-brist,
        #plocklistaResultat .pl-col-fbet {
          display: none !important;
        }
        /* Fben/Fbet/löpnummer staplat */
        #plocklistaResultat .pl-col-fben {
          display: block !important;
        }
        #plocklistaResultat .pl-fben-name {
          font-size: 1rem;
          font-weight: 600;
          margin-bottom: 2px;
        }
        #plocklistaResultat .pl-fbet-mobile,
        #plocklistaResultat .pl-radnr-mobile {
          display: block;
          color: var(--text-secondary);
          font-size: 0.9rem;
          line-height: 1.2;
        }
        #plocklistaResultat .pl-radnr-mobile {
          color: var(--text-tertiary);
          font-size: 0.85rem;
        }
        /* Lagerkolumn - primär först, alternativ mindre */
        #plocklistaResultat .pl-col-lager {
          font-size: 0.95rem;
          line-height: 1.3;
        }
        #plocklistaResultat .pl-lagerplats {
          white-space: normal !important;
        }
        #plocklistaResultat .pl-lagerplats.alt {
          font-size: 0.85rem;
          color: var(--text-secondary);
        }
        /* Saldon och plocka kompakt och högerställda */
        #plocklistaResultat .pl-col-saldo,
        #plocklistaResultat .pl-col-plocka {
          text-align: right !important;
          font-weight: 600;
        }
        #plocklistaResultat .pl-col-plocka {
          color: var(--button-danger);
        }
        #plocklistaResultat .pl-row-selected {
          border: 2px solid var(--button-success) !important;
          border-color: var(--button-success) !important;
          background: rgba(76, 175, 80, 0.08) !important;
          box-shadow: 0 0 0 1px var(--button-success) inset;
        }
        /* Dra in plocklista-boxen till 3px från kant */
        #plocklistaResultat > div[style*="border:2px solid #4caf50"] {
          margin-left: 3px !important;
          margin-right: 3px !important;
          width: calc(100% - 6px) !important;
        }
        /* Ta bort grå wrapper-bårder runt tabellen på mobil */
        #plocklistaResultat > div[style*="max-height:500px"][style*="overflow-y:auto"] {
          border: none !important;
          border-radius: 0 !important;
          padding: 0 !important;
        }
      }
      
      /* ========== FIXA MODALER PÅ MOBIL ========== */
      /* Modaler - enhetlig bredd på mobil */
      div[style*="position:fixed"][style*="z-index:10000"] > div[style*="background:#fff"],
      div[style*="position:fixed"][style*="z-index:10000"] > div[style*="background: #fff"],
      .lagg-till-lager-modal,
      .ta-fran-lager-modal,
      .flytta-lager-modal,
      .bulk-operationer-modal,
      .qr-scanner-modal,
      div[style*="background:#fff"][style*="border-radius:8px"],
      div[style*="background: #fff"][style*="border-radius:8px"] {
        max-width: calc(100vw - 32px) !important;
        width: calc(100vw - 32px) !important;
        margin: 16px !important;
        padding: 16px !important;
        box-sizing: border-box !important;
      }
      
      /* ========== FIXA OVERFLOW PROBLEM ========== */
      /* Förhindra horisontell scroll */
      * {
        max-width: 100% !important;
      }
      
      /* Undantag för element som ska kunna scrolla */
      .table-container,
      div[style*="overflow-x"],
      div[style*="overflow-x: auto"],
      div[style*="overflow-x:scroll"] {
        max-width: 100% !important;
        width: 100% !important;
      }
    }
    
    /* ========== ADMIN FLIK - DARK MODE FIXAR ========== */
    /* Admin-mobile-header - dark mode */
    [data-theme="dark"] .admin-mobile-header {
      background: var(--bg-modal) !important;
      border-bottom-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] .admin-mobile-header h3 {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .admin-mobile-header button.admin-back-btn {
      color: var(--button-primary) !important;
    }
    
    /* Admin-mobile-content - dark mode */
    [data-theme="dark"] .admin-mobile-content {
      background: var(--bg-secondary) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .admin-mobile-content p[style*="color:#666"],
    [data-theme="dark"] .admin-mobile-content p[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .admin-mobile-content h4 {
      color: var(--text-primary) !important;
    }
    
    /* Admin-sektion-header på mobil - dark mode */
    [data-theme="dark"] .admin-sektion-header[style*="background:#fff"],
    [data-theme="dark"] .admin-sektion-header[style*="background: #fff"] {
      background: var(--bg-tertiary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] .admin-sektion.open .admin-sektion-content {
      background: var(--bg-secondary) !important;
      color: var(--text-primary) !important;
    }
    
    /* Admin-sektion-content - dark mode för alla element */
    [data-theme="dark"] .admin-sektion-content,
    [data-theme="dark"] .admin-sektion.open .admin-sektion-content {
      background: var(--bg-secondary) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .admin-sektion-content p,
    [data-theme="dark"] .admin-sektion-content p[style*="color:#666"],
    [data-theme="dark"] .admin-sektion-content p[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .admin-sektion-content h4 {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .admin-sektion-content div[style*="background:#fff3cd"],
    [data-theme="dark"] .admin-sektion-content div[style*="background: #fff3cd"] {
      background: rgba(255, 152, 0, 0.15) !important;
      border-color: var(--button-warning) !important;
    }
    
    [data-theme="dark"] .admin-sektion-content div[style*="color:#856404"],
    [data-theme="dark"] .admin-sektion-content div[style*="color: #856404"] {
      color: var(--text-primary) !important;
    }
    
    /* ========== STANDARDISERA MODAL-BREDDER ========== */
    /* Alla modaler - enhetlig max-width på desktop */
    div[style*="background:#fff"][style*="border-radius:8px"][style*="max-width:500px"],
    div[style*="background: #fff"][style*="border-radius:8px"][style*="max-width:500px"],
    div[style*="background:#fff"][style*="border-radius:8px"][style*="max-width:600px"],
    div[style*="background: #fff"][style*="border-radius:8px"][style*="max-width:600px"],
    div[style*="background:#fff"][style*="border-radius:8px"][style*="max-width:800px"],
    div[style*="background: #fff"][style*="border-radius:8px"][style*="max-width:800px"],
    div[style*="background:#fff"][style*="border-radius:8px"][style*="max-width:900px"],
    div[style*="background: #fff"][style*="border-radius:8px"][style*="max-width:900px"] {
      max-width: 600px !important;
    }
    
    /* Större modaler (artiklar i sats/utrymme) - större max-width */
    div[style*="background:#fff"][style*="border-radius:8px"]:has(h2:contains("Redigera artiklar")) {
      max-width: 800px !important;
    }
    
    /* ========== LAGER MODALER - DARK MODE OCH BREDD ========== */
    /* Alla lager-modaler - dark mode för alla element */
    [data-theme="dark"] div[style*="background:#fff"][style*="border-radius:8px"],
    [data-theme="dark"] div[style*="background: #fff"][style*="border-radius:8px"] {
      background: var(--bg-modal) !important;
      border-color: var(--border-color) !important;
      box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
    }
    
    [data-theme="dark"] div[style*="background:#fff"] h3,
    [data-theme="dark"] div[style*="background: #fff"] h3,
    [data-theme="dark"] div[style*="background:#fff"] h2,
    [data-theme="dark"] div[style*="background: #fff"] h2 {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] div[style*="background:#fff"] p,
    [data-theme="dark"] div[style*="background: #fff"] p,
    [data-theme="dark"] div[style*="background:#fff"] label,
    [data-theme="dark"] div[style*="background: #fff"] label {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] div[style*="background:#fff"] p[style*="color:#666"],
    [data-theme="dark"] div[style*="background: #fff"] p[style*="color:#666"],
    [data-theme="dark"] div[style*="background:#fff"] small[style*="color:#666"],
    [data-theme="dark"] div[style*="background: #fff"] small[style*="color:#666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] div[style*="background:#fff"] input,
    [data-theme="dark"] div[style*="background: #fff"] input,
    [data-theme="dark"] div[style*="background:#fff"] select,
    [data-theme="dark"] div[style*="background: #fff"] select,
    [data-theme="dark"] div[style*="background:#fff"] textarea,
    [data-theme="dark"] div[style*="background: #fff"] textarea {
      background: var(--bg-input) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] div[style*="background:#fff"] div[style*="background:#f5f5f5"],
    [data-theme="dark"] div[style*="background: #fff"] div[style*="background:#f5f5f5"],
    [data-theme="dark"] div[style*="background:#fff"] div[style*="background: #f5f5f5"] {
      background: var(--bg-secondary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] div[style*="background:#fff"] div[style*="background:#f8f8f8"],
    [data-theme="dark"] div[style*="background: #fff"] div[style*="background:#f8f8f8"],
    [data-theme="dark"] div[style*="background:#fff"] div[style*="background: #f8f8f8"] {
      background: var(--bg-secondary) !important;
      border-color: var(--border-color) !important;
    }
    
    /* ========== ADMIN-FORM-BOX DARK MODE DJUPARE ========== */
    /* Alla element i admin-form-box - dark mode */
    [data-theme="dark"] .admin-form-box * {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .admin-form-box p,
    [data-theme="dark"] .admin-form-box small,
    [data-theme="dark"] .admin-form-box p[style*="color:#666"],
    [data-theme="dark"] .admin-form-box small[style*="color:#666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .admin-form-box table,
    [data-theme="dark"] .admin-form-box table th,
    [data-theme="dark"] .admin-form-box table td {
      background: var(--bg-table) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] .admin-form-box table th {
      background: var(--bg-table-header) !important;
    }
    
    /* ========== ADMIN MOBILE HEADER/CONTENT - INLINE STYLE OVERRIDES ========== */
    /* Override inline styles för dark mode */
    [data-theme="dark"] .admin-mobile-header[style*="background:#fff"],
    [data-theme="dark"] .admin-mobile-header[style*="background: #fff"] {
      background: var(--bg-modal) !important;
      border-bottom-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] .admin-sektion.open .admin-sektion-content[style*="background:#fff"],
    [data-theme="dark"] .admin-sektion.open .admin-sektion-content[style*="background: #fff"] {
      background: var(--bg-secondary) !important;
    }
    
    [data-theme="dark"] .admin-sektion-header[style*="background:#fff"],
    [data-theme="dark"] .admin-sektion-header[style*="background: #fff"] {
      background: var(--bg-tertiary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] .admin-sektion-header[style*="background:#fff"]:active,
    [data-theme="dark"] .admin-sektion-header[style*="background: #fff"]:active,
    [data-theme="dark"] .admin-sektion-header[style*="background:#f5f5f5"],
    [data-theme="dark"] .admin-sektion-header[style*="background: #f5f5f5"] {
      background: var(--bg-quaternary) !important;
    }
    
    [data-theme="dark"] .admin-back-btn[style*="color:#4a90e2"],
    [data-theme="dark"] .admin-back-btn[style*="color: #4a90e2"] {
      color: var(--button-primary) !important;
    }
    
    [data-theme="dark"] .admin-back-btn[style*="background:#f0f0f0"]:active,
    [data-theme="dark"] .admin-back-btn[style*="background: #f0f0f0"]:active {
      background: var(--bg-quaternary) !important;
    }
    
    /* ========== ADMIN SECTION HEADERS MOBIL - DARK MODE ========== */
    @media (max-width: 768px) {
      [data-theme="dark"] .admin-sektion-header[style*="background:#fff"],
      [data-theme="dark"] .admin-sektion-header[style*="background: #fff"],
      [data-theme="dark"] .admin-sektion-header {
        background: var(--bg-tertiary) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
      }
      
      [data-theme="dark"] .admin-sektion-header[style*="background:#fff"]:active,
      [data-theme="dark"] .admin-sektion-header[style*="background: #fff"]:active,
      [data-theme="dark"] .admin-sektion-header:active {
        background: var(--bg-quaternary) !important;
      }
      
      [data-theme="dark"] .admin-sektion-header[style*="background:#fff"] h3,
      [data-theme="dark"] .admin-sektion-header[style*="background: #fff"] h3,
      [data-theme="dark"] .admin-sektion-header h3 {
        color: var(--text-primary) !important;
      }
      
      [data-theme="dark"] .admin-sektion-header .admin-sektion-toggle {
        color: var(--text-secondary) !important;
      }
    }
    
    /* ========== PLOCKLISTA BOGNUMMER SELECT - DARK MODE ========== */
    [data-theme="dark"] #plocklistaBognummer[style*="background:#fff"],
    [data-theme="dark"] select#plocklistaBognummer[style*="background:#fff"],
    [data-theme="dark"] #plocklistaBognummer,
    [data-theme="dark"] select#plocklistaBognummer {
      background: var(--bg-input) !important;
      border-color: var(--border-color) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] #plocklistaBognummer option {
      background: var(--bg-input) !important;
      color: var(--text-primary) !important;
    }
    
    /* ========== PLOCKLISTA BOGNUMMER SELECT - MOBIL DARK MODE ========== */
    @media (max-width: 768px) {
      [data-theme="dark"] #plocklistaBognummer,
      [data-theme="dark"] select#plocklistaBognummer {
        background: var(--bg-input) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
      }
    }
    
    /* ========== LÅGA SALDON TOGGLE KNAPP ========== */
    .laga-saldon-toggle {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      cursor: pointer;
      user-select: none;
      transition: all 0.2s ease;
      font-size: 0.9em;
      font-weight: 500;
      color: var(--text-primary);
      min-height: 44px;
      box-sizing: border-box;
    }
    
    .laga-saldon-toggle:hover {
      background: var(--bg-tertiary);
      border-color: var(--button-primary);
    }
    
    .laga-saldon-toggle.active {
      background: var(--button-primary);
      border-color: var(--button-primary);
      color: var(--text-white);
    }
    
    .laga-saldon-toggle input[type="checkbox"] {
      display: none;
    }
    
    .laga-saldon-toggle .toggle-indicator {
      width: 44px;
      height: 24px;
      background: var(--bg-quaternary);
      border-radius: 12px;
      position: relative;
      transition: background 0.2s ease;
      flex-shrink: 0;
      border: 2px solid var(--border-color);
    }
    
    .laga-saldon-toggle.active .toggle-indicator {
      background: rgba(255, 255, 255, 0.3);
      border-color: rgba(255, 255, 255, 0.5);
    }
    
    .laga-saldon-toggle .toggle-indicator::after {
      content: '';
      position: absolute;
      width: 18px;
      height: 18px;
      background: var(--text-secondary);
      border-radius: 50%;
      top: 1px;
      left: 1px;
      transition: transform 0.2s ease, background 0.2s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    .laga-saldon-toggle.active .toggle-indicator::after {
      transform: translateX(20px);
      background: var(--text-white);
    }
    
    .laga-saldon-toggle span:not(.toggle-indicator) {
      font-weight: 500;
      white-space: nowrap;
    }
    
    [data-theme="dark"] .laga-saldon-toggle {
      background: var(--bg-secondary);
      border-color: var(--border-color);
      color: var(--text-primary);
    }
    
    [data-theme="dark"] .laga-saldon-toggle:hover {
      background: var(--bg-tertiary);
      border-color: var(--button-primary);
    }
    
    [data-theme="dark"] .laga-saldon-toggle.active {
      background: var(--button-primary);
      border-color: var(--button-primary);
      color: var(--text-white);
    }
    
    [data-theme="dark"] .laga-saldon-toggle .toggle-indicator {
      background: var(--bg-quaternary);
      border-color: var(--border-color);
    }
    
    [data-theme="dark"] .laga-saldon-toggle.active .toggle-indicator {
      background: rgba(255, 255, 255, 0.3);
      border-color: rgba(255, 255, 255, 0.5);
    }
    
    /* ========== STANDARDISERA ALLA MODAL-BREDDER ========== */
    /* Desktop - enhetlig max-width */
    @media (min-width: 769px) {
      div[style*="background:#fff"][style*="max-width:500px"],
      div[style*="background: #fff"][style*="max-width:500px"] {
        max-width: 600px !important;
        width: 90% !important;
      }
      
      div[style*="background:#fff"][style*="max-width:800px"],
      div[style*="background: #fff"][style*="max-width:800px"] {
        max-width: 800px !important;
        width: 90% !important;
      }
      
      div[style*="background:#fff"][style*="max-width:900px"],
      div[style*="background: #fff"][style*="max-width:900px"] {
        max-width: 900px !important;
        width: 90% !important;
      }
    }
    
    /* Mobil - enhetlig bredd */
    @media (max-width: 768px) {
      div[style*="background:#fff"][style*="border-radius:8px"],
      div[style*="background: #fff"][style*="border-radius:8px"] {
        max-width: calc(100vw - 32px) !important;
        width: calc(100vw - 32px) !important;
        margin: 16px !important;
      }
    }
    
    /* ========== LAGER MODALER - ALLA INTERNA ELEMENT ========== */
    [data-theme="dark"] .lagg-till-lager-modal *,
    [data-theme="dark"] .ta-fran-lager-modal *,
    [data-theme="dark"] .flytta-lager-modal *,
    [data-theme="dark"] .bulk-operationer-modal *,
    [data-theme="dark"] .qr-scanner-modal * {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .lagg-till-lager-modal div[style*="background:#e3f2fd"],
    [data-theme="dark"] .lagg-till-lager-modal div[style*="background: #e3f2fd"],
    [data-theme="dark"] .ta-fran-lager-modal div[style*="background:#e3f2fd"],
    [data-theme="dark"] .ta-fran-lager-modal div[style*="background: #e3f2fd"],
    [data-theme="dark"] .bulk-operationer-modal div[style*="background:#e3f2fd"],
    [data-theme="dark"] .bulk-operationer-modal div[style*="background: #e3f2fd"] {
      background: rgba(33, 150, 243, 0.15) !important;
      border-color: var(--button-primary) !important;
    }
    
    [data-theme="dark"] .lagg-till-lager-modal div[style*="background:#fff3e0"],
    [data-theme="dark"] .lagg-till-lager-modal div[style*="background: #fff3e0"],
    [data-theme="dark"] .bulk-operationer-modal div[style*="background:#fff3e0"],
    [data-theme="dark"] .bulk-operationer-modal div[style*="background: #fff3e0"] {
      background: rgba(255, 152, 0, 0.15) !important;
      border-color: var(--button-warning) !important;
    }
    
    /* ========== ALLA MODALER MED HARDCODED WHITE BACKGROUND ========== */
    [data-theme="dark"] div[style*="background:white"],
    [data-theme="dark"] div[style*="background: white"] {
      background: var(--bg-modal) !important;
    }
    
    [data-theme="dark"] div[style*="background:white"] *,
    [data-theme="dark"] div[style*="background: white"] * {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] div[style*="background:white"] p[style*="color:#666"],
    [data-theme="dark"] div[style*="background: white"] p[style*="color:#666"],
    [data-theme="dark"] div[style*="background:white"] small[style*="color:#666"],
    [data-theme="dark"] div[style*="background: white"] small[style*="color:#666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] div[style*="background:white"] input,
    [data-theme="dark"] div[style*="background: white"] input,
    [data-theme="dark"] div[style*="background:white"] select,
    [data-theme="dark"] div[style*="background: white"] select,
    [data-theme="dark"] div[style*="background:white"] textarea,
    [data-theme="dark"] div[style*="background: white"] textarea {
      background: var(--bg-input) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-color) !important;
    }
    
    /* ========== ARTIKLAR TABLE - MOBIL DARK MODE ========== */
    /* Fix inline styles i mobil version */
    [data-theme="dark"] #artiklarTable .placering-rubrik[style*="background-color: rgb(232, 232, 232)"],
    [data-theme="dark"] #artiklarTable .placering-rubrik[style*="background-color:#e8e8e8"] {
      background-color: var(--bg-placering-rubrik) !important;
    }
    
    [data-theme="dark"] #artiklarTable .placering-rubrik td[style*="background-color:#e8e8e8"],
    [data-theme="dark"] #artiklarTable .placering-rubrik td[style*="color:#333"] {
      background-color: var(--bg-placering-rubrik) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] #artiklarTable .sats-rubrik[style*="background-color: rgb(212, 228, 247)"],
    [data-theme="dark"] #artiklarTable .sats-rubrik[style*="background-color:#d4e4f7"] {
      background-color: rgba(33, 150, 243, 0.25) !important;
    }
    
    [data-theme="dark"] #artiklarTable .sats-rubrik td[style*="background-color:#d4e4f7"],
    [data-theme="dark"] #artiklarTable .sats-rubrik td[style*="color:#1976d2"] {
      background-color: rgba(33, 150, 243, 0.25) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] #artiklarTable .sats-artikel-rad[style*="background-color: rgb(240, 248, 255)"],
    [data-theme="dark"] #artiklarTable .sats-artikel-rad[style*="background-color:#f0f8ff"] {
      background-color: rgba(33, 150, 243, 0.12) !important;
    }
    
    [data-theme="dark"] #artiklarTable .sats-artikel-rad td[style*="color:#555"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] #artiklarTable .utrymme-artikel-rad[style*="background-color: rgb(250, 250, 250)"],
    [data-theme="dark"] #artiklarTable .utrymme-artikel-rad[style*="background-color:#fafafa"] {
      background-color: var(--bg-table) !important;
    }
    
    [data-theme="dark"] #artiklarTable .antal-input[style*="background-color:#fff"] {
      background-color: var(--bg-input) !important;
      border-color: var(--button-primary) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] #artiklarTable .artikel-timestamp[style*="color: rgb(76, 175, 80)"] {
      color: var(--button-success) !important;
    }
    
    [data-theme="dark"] #artiklarTable .artikel-timestamp span[style*="color:#999"] {
      color: var(--text-tertiary) !important;
    }
    
    /* ========== PLOCKLISTA - DARK MODE ========== */
    [data-theme="dark"] div[style*="background:#f5f5f5"][style*="border-radius:8px"] {
      background: var(--bg-secondary) !important;
    }
    
    [data-theme="dark"] div[style*="background:#f5f5f5"] h2,
    [data-theme="dark"] div[style*="background:#f5f5f5"] p {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] div[style*="background:#f5f5f5"] table th[style*="background:#4a90e2"],
    [data-theme="dark"] div[style*="background:#f5f5f5"] table th[style*="background: #4a90e2"] {
      background: var(--button-primary) !important;
      color: var(--text-white) !important;
    }
    
    [data-theme="dark"] div[style*="background:#f5f5f5"] table tr[style*="background:#fff"],
    [data-theme="dark"] div[style*="background:#f5f5f5"] table td {
      background: var(--bg-table) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] div[style*="background:#f5f5f5"] table td[style*="color:#e24a4a"] {
      color: var(--button-danger) !important;
    }
    
    /* ========== PLOCKLISTA RESULTAT - DARK MODE ========== */
    [data-theme="dark"] #plocklistaResultat div[style*="background:#fff"],
    [data-theme="dark"] #plocklistaResultat div[style*="background: #fff"] {
      background: var(--bg-secondary) !important;
      border-color: var(--button-success) !important;
    }
    
    [data-theme="dark"] #plocklistaResultat h3[style*="color:#2e7d32"] {
      color: var(--button-success) !important;
    }
    
    [data-theme="dark"] #plocklistaResultat p[style*="color:#666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] #plocklistaResultat table th[style*="background:#f5f5f5"] {
      background: var(--bg-table-header) !important;
      color: var(--text-primary) !important;
      border-bottom-color: var(--button-success) !important;
    }
    
    [data-theme="dark"] #plocklistaResultat table tr[style*="background:#fff"],
    [data-theme="dark"] #plocklistaResultat table tr[style*="background:#f9f9f9"],
    [data-theme="dark"] #plocklistaResultat table td {
      background: var(--bg-table) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] #plocklistaResultat table tr[style*="background:#f9f9f9"] {
      background: var(--bg-tertiary) !important;
    }
    
    [data-theme="dark"] #plocklistaResultat table td[style*="color:#e24a4a"] {
      color: var(--button-danger) !important;
    }
    
    [data-theme="dark"] #plocklistaResultat div[style*="border:1px solid #e0e0e0"] {
      border-color: var(--border-color) !important;
    }
    
    /* ========== ADMIN SEKTION CONTENT - DARK MODE (DESKTOP) ========== */
    /* När admin-sektion inte är open på desktop */
    [data-theme="dark"] .admin-sektion:not(.open) .admin-sektion-content {
      background: var(--bg-secondary) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .admin-sektion-content h4 {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .admin-sektion-content form label {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .admin-sektion-content #anvandareLista,
    [data-theme="dark"] .admin-sektion-content #anvandareStatistik {
      color: var(--text-primary) !important;
    }
    
    /* ========== NAV MENU KNAPPAR - ALIGNMENT ========== */
    /* Fix alignment för Hem-knappen och Plocklista-knappen */
    /* Alla nav-menu knappar ska ha samma styling och vänsterjusteras */
    .nav-menu button {
      text-align: left !important;
      color: var(--text-primary) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
    }
    
    /* Säkerställ att specifika knappar också är vänsterjusterade */
    .nav-menu button[aria-label="Hem"],
    .nav-menu button[onclick*="showHomeScreen"],
    .nav-menu button[id="logoutBtn"],
    .nav-menu button[aria-label="Logga ut"],
    .nav-menu button[onclick*="logout()"] {
      text-align: left !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
    }
    
    /* Plocklista-knappen - respektera inline display styles på desktop */
    .nav-menu button[id="plocklistaTabBtn"][style*="display: none"] {
      display: none !important;
    }
    
    .nav-menu button[id="plocklistaTabBtn"][style*="display: inline-block"] {
      text-align: left !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
    }
    
    /* Override inline styles för Hem-knappen */
    .nav-menu button[aria-label="Hem"][style*="background:transparent"],
    .nav-menu button[onclick*="showHomeScreen"][style*="background:transparent"] {
      background: var(--bg-secondary) !important;
    }
    
    [data-theme="dark"] .nav-menu button[aria-label="Hem"],
    [data-theme="dark"] .nav-menu button[onclick*="showHomeScreen"] {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .nav-menu button {
      color: var(--text-primary) !important;
    }
    
    .nav-menu button[style*="color:#666"] {
      color: var(--text-primary) !important;
    }
    
    /* ========== ARTIKEL-KORT I GRID - DARK MODE ========== */
    [data-theme="dark"] div[style*="display:grid"][style*="grid-template-columns:repeat(auto-fill,minmax(300px"] > div[style*="border:1px solid #e0e0e0"][style*="background:#fff"],
    [data-theme="dark"] div[style*="border:1px solid #e0e0e0"][style*="background:#fff"] {
      background: var(--bg-secondary) !important;
      border-color: var(--border-color) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] div[style*="border:1px solid #e0e0e0"][style*="background:#fff"] h4 {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] div[style*="border:1px solid #e0e0e0"][style*="background:#fff"] p[style*="color:#333"],
    [data-theme="dark"] div[style*="border:1px solid #e0e0e0"][style*="background:#fff"] p[style*="color: #333"] {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] div[style*="border:1px solid #e0e0e0"][style*="background:#fff"] p[style*="color:#1976d2"],
    [data-theme="dark"] div[style*="border:1px solid #e0e0e0"][style*="background:#fff"] p[style*="color: #1976d2"] {
      color: var(--button-primary) !important;
    }
    
    [data-theme="dark"] div[style*="border:1px solid #e0e0e0"][style*="background:#fff"] p[style*="color:#666"],
    [data-theme="dark"] div[style*="border:1px solid #e0e0e0"][style*="background:#fff"] p[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    /* ========== LAGERSTATISTIK BOXAR - DARK MODE OCH STYLING ========== */
    [data-theme="dark"] div[style*="background:#f5f5f5"][style*="border-radius:4px"] {
      background: var(--bg-secondary) !important;
    }
    
    [data-theme="dark"] div[style*="background:#f5f5f5"] h3[style*="color:#333"],
    [data-theme="dark"] div[style*="background:#f5f5f5"] h3[style*="color: #333"] {
      color: var(--text-primary) !important;
    }
    
    /* Lagerstatistik-boxar - matcha lagerBestallningslistaResultat-stil */
    [data-theme="dark"] div[style*="background:#fff"][style*="border-left:4px solid #1976d2"],
    [data-theme="dark"] div[style*="background: #fff"][style*="border-left:4px solid #1976d2"],
    [data-theme="dark"] div[style*="background:#fff"][style*="border:1px solid #e0e0e0"][style*="border-left:4px solid #1976d2"],
    [data-theme="dark"] div[style*="background: #fff"][style*="border:1px solid #e0e0e0"][style*="border-left:4px solid #1976d2"] {
      background: var(--bg-tertiary) !important;
      border-color: var(--border-color) !important;
      border-left-color: var(--button-primary) !important;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    }
    
    [data-theme="dark"] div[style*="border-left:4px solid #1976d2"] div[style*="font-weight:600"][style*="color:#1976d2"],
    [data-theme="dark"] div[style*="border-left:4px solid #1976d2"] div[style*="color:#1976d2"] {
      color: var(--button-primary) !important;
    }
    
    [data-theme="dark"] div[style*="border-left:4px solid #1976d2"] span[style*="color:#666"],
    [data-theme="dark"] div[style*="border-left:4px solid #1976d2"] span[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] div[style*="border-left:4px solid #1976d2"] span[style*="color:#333"],
    [data-theme="dark"] div[style*="border-left:4px solid #1976d2"] span[style*="color: #333"] {
      color: var(--text-primary) !important;
    }
    
    /* ========== LAGER BESTÄLLNINGSLISTA RESULTAT - DARK MODE ========== */
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="background:#fff"][style*="border:2px solid #4caf50"] {
      background: var(--bg-secondary) !important;
      border-color: var(--button-success) !important;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    }
    
    [data-theme="dark"] #lagerBestallningslistaResultat h3[style*="color:#2e7d32"] {
      color: var(--button-success) !important;
    }
    
    [data-theme="dark"] #lagerBestallningslistaResultat p[style*="color:#666"],
    [data-theme="dark"] #lagerBestallningslistaResultat span[style*="color:#666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] #lagerBestallningslistaResultat h4[style*="color:#2e7d32"] {
      color: var(--button-success) !important;
    }
    
    [data-theme="dark"] #lagerBestallningslistaResultat table th[style*="background:#f5f5f5"] {
      background: var(--bg-table-header) !important;
      color: var(--text-primary) !important;
      border-bottom-color: var(--button-success) !important;
    }
    
    [data-theme="dark"] #lagerBestallningslistaResultat table tr[style*="background:#fff"],
    [data-theme="dark"] #lagerBestallningslistaResultat table tr[style*="background:#f9f9f9"],
    [data-theme="dark"] #lagerBestallningslistaResultat table td {
      background: var(--bg-table) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] #lagerBestallningslistaResultat table tr[style*="background:#f9f9f9"] {
      background: var(--bg-tertiary) !important;
    }
    
    [data-theme="dark"] #lagerBestallningslistaResultat div[style*="background:#e8f5e9"] {
      background: rgba(76, 175, 80, 0.15) !important;
      border-color: var(--button-success) !important;
    }
    
    [data-theme="dark"] #lagerBestallningslistaResultat span[style*="color:#2e7d32"] {
      color: var(--button-success) !important;
    }
    
    [data-theme="dark"] #lagerBestallningslistaResultat span[style*="color:#d32f2f"] {
      color: var(--button-danger) !important;
    }
    
    /* ========== ARTIKEL-KORT - ALLA INTERNA ELEMENT DARK MODE ========== */
    /* Bilder i artikel-kort */
    [data-theme="dark"] div[style*="border:1px solid #e0e0e0"][style*="background:#fff"] img {
      border-color: var(--border-color) !important;
      background: var(--bg-tertiary) !important;
    }
    
    /* Placering-text */
    [data-theme="dark"] div[style*="border:1px solid #e0e0e0"][style*="background:#fff"] p[style*="color:#666"] strong {
      color: var(--text-secondary) !important;
    }
    
    /* ========== GRID CONTAINER - DARK MODE ========== */
    [data-theme="dark"] div[style*="display:grid"][style*="grid-template-columns:repeat(auto-fill,minmax(300px"] {
      gap: 16px !important;
    }
    
    /* ========== CERT-STATISTIK ELEMENT - DARK MODE ========== */
    [data-theme="dark"] .cert-statistik-lista {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .cert-statistik-lista p[style*="color:#666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .cert-statistik-bat[style*="background:#fff"] {
      background: var(--bg-secondary) !important;
      border-color: var(--border-color) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .cert-statistik-bognummer[style*="color:#333"] {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .cert-statistik-ansvarig[style*="color:#666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .cert-statistik-badge[style*="background:#f5f5f5"] {
      background: var(--bg-tertiary) !important;
      border-color: var(--border-color) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .cert-statistik-badge span[style*="font-weight:500"] {
      color: var(--text-primary) !important;
    }
    
    /* Behåll färgerna för dagar-text (röd, orange, gul, grön) */
    [data-theme="dark"] .cert-statistik-badge span[style*="color:#d32f2f"] {
      color: var(--button-danger) !important;
    }
    
    [data-theme="dark"] .cert-statistik-badge span[style*="color:#f57c00"] {
      color: #ff9800 !important; /* Orange */
    }
    
    [data-theme="dark"] .cert-statistik-badge span[style*="color:#fbc02d"] {
      color: #ffc107 !important; /* Gul */
    }
    
    [data-theme="dark"] .cert-statistik-badge span[style*="color:#388e3c"] {
      color: var(--button-success) !important; /* Grön */
    }
    
    [data-theme="dark"] .cert-statistik-badge span[style*="color:#666"] {
      color: var(--text-secondary) !important;
    }
    
    /* ========== DÖLJ ARTIKELBILD INPUT-FÄLT ========== */
    /* Dölj input-fältet */
    #artikelBild,
    input#artikelBild {
      display: none !important;
    }
    
    /* Dölj hela label-elementet som innehåller artikelBild */
    label:has(#artikelBild),
    label:has(input#artikelBild) {
      display: none !important;
    }
    
    /* Fallback för webbläsare som inte stöder :has() - dölj via parent selector */
    label > input#artikelBild {
      display: none !important;
    }
    
    /* Dölj även knappen och preview om de finns */
    label:has(#artikelBild) button,
    label:has(input#artikelBild) button,
    label:has(#artikelBild) #artikelBildPreview,
    label:has(input#artikelBild) #artikelBildPreview {
      display: none !important;
    }
    
    /* ========== ARTIKLAR TABLE WRAPPER - DARK MODE ========== */
    [data-theme="dark"] #artiklarTableWrapper {
      border-color: var(--border-color) !important;
      background: var(--bg-secondary) !important;
    }
    
    [data-theme="dark"] #artiklarTableWrapper td[style*="color:#666"] {
      color: var(--text-secondary) !important;
    }
    
    /* ========== SATS ARTIKLAR PREVIEW - DARK MODE ========== */
    [data-theme="dark"] #satsArtiklarPreview[style*="background:#fff"],
    [data-theme="dark"] #satsArtiklarPreview[style*="background: #fff"] {
      background: var(--bg-secondary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] #satsArtiklarPreview p[style*="color:#666"],
    [data-theme="dark"] #satsArtiklarPreview p[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    /* ========== MALL UTRYMmen LISTA - DARK MODE ========== */
    [data-theme="dark"] #mallUtrymmenLista[style*="background:#fff"],
    [data-theme="dark"] #mallUtrymmenLista[style*="background: #fff"] {
      background: var(--bg-secondary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] #mallUtrymmenLista p[style*="color:#666"],
    [data-theme="dark"] #mallUtrymmenLista p[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    /* ========== MALL UTRYMmen ARTIKLAR CONTENT - DARK MODE ========== */
    [data-theme="dark"] #mallUtrymmenArtiklarContent[style*="background:#fff"],
    [data-theme="dark"] #mallUtrymmenArtiklarContent[style*="background: #fff"] {
      background: var(--bg-secondary) !important;
      border-color: var(--border-color) !important;
    }
    
    /* ========== MALL UTRYMme SECTION - DARK MODE ========== */
    [data-theme="dark"] .mall-utrymme-section[style*="background: rgb(248, 248, 248)"],
    [data-theme="dark"] .mall-utrymme-section[style*="background:#f8f8f8"],
    [data-theme="dark"] .mall-utrymme-section[style*="background: #f8f8f8"] {
      background: var(--bg-secondary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] .mall-utrymme-section div[style*="background:#e8e8e8"],
    [data-theme="dark"] .mall-utrymme-section div[style*="background: #e8e8e8"],
    [data-theme="dark"] .mall-utrymme-section div[style*="background:rgb(232, 232, 232)"] {
      background: var(--bg-tertiary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] .mall-utrymme-section h4[style*="color:#333"],
    [data-theme="dark"] .mall-utrymme-section h4[style*="color: #333"] {
      color: var(--text-primary) !important;
    }
    
    /* ========== MALL UTRYMme CONTENT - DARK MODE ========== */
    [data-theme="dark"] .mall-utrymme-content {
      background: var(--bg-secondary) !important;
    }
    
    [data-theme="dark"] .mall-utrymme-content label[style*="color:#666"],
    [data-theme="dark"] .mall-utrymme-content label[style*="color: #666"],
    [data-theme="dark"] .mall-utrymme-content p[style*="color:#666"],
    [data-theme="dark"] .mall-utrymme-content p[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .mall-utrymme-content label[style*="border:1px solid #ddd"],
    [data-theme="dark"] .mall-utrymme-content label[style*="border: 1px solid #ddd"] {
      border-color: var(--border-color) !important;
      background: var(--bg-tertiary) !important;
    }
    
    [data-theme="dark"] .mall-utrymme-content label[style*="background:#fff"],
    [data-theme="dark"] .mall-utrymme-content label[style*="background: #fff"] {
      background: var(--bg-tertiary) !important;
    }
    
    [data-theme="dark"] .mall-utrymme-content span[style*="color:#333"],
    [data-theme="dark"] .mall-utrymme-content span[style*="color: #333"] {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .mall-utrymme-content input[style*="border:1px solid #ddd"],
    [data-theme="dark"] .mall-utrymme-content input[style*="border: 1px solid #ddd"] {
      border-color: var(--border-color) !important;
      background: var(--bg-input) !important;
      color: var(--text-primary) !important;
    }
    
    /* ========== MALL UTRYMme ARTIKEL LABEL - DARK MODE ========== */
    [data-theme="dark"] .mall-utrymme-artikel-label[style*="background:#e3f2fd"],
    [data-theme="dark"] .mall-utrymme-artikel-label[style*="background: #e3f2fd"],
    [data-theme="dark"] .mall-utrymme-artikel-label[style*="background:rgb(227, 242, 253)"] {
      background: var(--bg-tertiary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] .mall-utrymme-artikel-label div[style*="color:#333"],
    [data-theme="dark"] .mall-utrymme-artikel-label div[style*="color: #333"] {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .mall-utrymme-artikel-label div[style*="color:#666"],
    [data-theme="dark"] .mall-utrymme-artikel-label div[style*="color: #666"] {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .mall-utrymme-content div[style*="border-top:1px solid #ddd"],
    [data-theme="dark"] .mall-utrymme-content div[style*="border-top: 1px solid #ddd"] {
      border-top-color: var(--border-color) !important;
    }
    
    /* ========== MALL UTRYMme CHECKBOX LABELS - DARK MODE ========== */
    /* Generella regler för alla labels med checkbox i mall-utrymme-sektioner */
    [data-theme="dark"] #mallUtrymmenArtiklarContent label[style*="background:#fff"],
    [data-theme="dark"] #mallUtrymmenArtiklarContent label[style*="background: #fff"],
    [data-theme="dark"] .mall-utrymme-content label[style*="background:#fff"],
    [data-theme="dark"] .mall-utrymme-content label[style*="background: #fff"],
    [data-theme="dark"] label[style*="background:#fff"][style*="border:1px solid #ddd"],
    [data-theme="dark"] label[style*="background: #fff"][style*="border:1px solid #ddd"],
    [data-theme="dark"] label[style*="background:#fff"][style*="border: 1px solid #ddd"],
    [data-theme="dark"] label[style*="background: #fff"][style*="border: 1px solid #ddd"] {
      background: var(--bg-tertiary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] #mallUtrymmenArtiklarContent label span[style*="font-weight:500"],
    [data-theme="dark"] .mall-utrymme-content label span[style*="font-weight:500"],
    [data-theme="dark"] label[style*="background:#fff"] span[style*="font-weight:500"],
    [data-theme="dark"] label[style*="background: #fff"] span[style*="font-weight:500"] {
      color: var(--text-primary) !important;
    }
    
    /* ========== MALL UTRYMme SATS CHECKBOX LABELS - DARK MODE ========== */
    [data-theme="dark"] .mall-utrymme-sats-checkbox,
    [data-theme="dark"] input.mall-utrymme-sats-checkbox {
      accent-color: var(--button-primary) !important;
    }
    
    [data-theme="dark"] label:has(.mall-utrymme-sats-checkbox)[style*="background:#fff"],
    [data-theme="dark"] label:has(.mall-utrymme-sats-checkbox)[style*="background: #fff"] {
      background: var(--bg-tertiary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] label:has(.mall-utrymme-sats-checkbox) span[style*="font-weight:500"],
    [data-theme="dark"] label:has(.mall-utrymme-sats-checkbox) span[style*="font-weight:500"] {
      color: var(--text-primary) !important;
    }
    
    /* ========== MALL UTRYMme CHECKBOX (för utrymme-val) - DARK MODE ========== */
    [data-theme="dark"] .mall-utrymme-checkbox,
    [data-theme="dark"] input.mall-utrymme-checkbox {
      accent-color: var(--button-primary) !important;
    }
    
    [data-theme="dark"] label:has(.mall-utrymme-checkbox)[style*="background:#fff"],
    [data-theme="dark"] label:has(.mall-utrymme-checkbox)[style*="background: #fff"] {
      background: var(--bg-tertiary) !important;
      border-color: var(--border-color) !important;
    }
    
    [data-theme="dark"] label:has(.mall-utrymme-checkbox) span[style*="font-weight:500"],
    [data-theme="dark"] label:has(.mall-utrymme-checkbox) span[style*="font-weight:500"] {
      color: var(--text-primary) !important;
    }