/* 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 */
    }
    
    .mobile-menu-toggle {
      display: none;
      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;
    }
    
    .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;
    }
    
    /* 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;
      }
      
      .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;
      }
      
      /* 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 {
      animation: scrollText 60s linear infinite !important;
    }
    
    /* ========== TOAST NOTIFICATIONS ========== */
    .toast-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 10000;
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-width: 400px;
    }
    
    .toast {
      padding: 16px 20px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      display: flex;
      align-items: center;
      gap: 12px;
      animation: toastSlideIn 0.3s ease-out;
      min-width: 300px;
      max-width: 400px;
    }
    
    .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.5em;
      flex-shrink: 0;
    }
    
    .toast-message {
      flex: 1;
      font-size: 0.95em;
      line-height: 1.4;
    }
    
    .toast-close {
      background: transparent;
      border: none;
      color: #fff;
      font-size: 1.2em;
      cursor: pointer;
      padding: 0;
      width: 24px;
      height: 24px;
      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: 100% !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;
    }
    
    /* 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;
    }
    
    .screen-content-box {
      background: rgba(255,255,255,0.9);
      padding: 40px;
      border-radius: 8px;
      max-width: 600px;
      width: 100%;
      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;
    }
    
    /* 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;
    }
    
    .btn-selection.success:hover {
      background: var(--button-success-hover);
    }
    
    .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;
    }
    
    .btn-home.success:hover {
      background: var(--button-success-hover);
    }
    
    .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: none;
      transition: color 0.3s ease;
    }
    
    .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);
    }
    
    .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: 100%;
      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;
    }
    
    /* ========== 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;
      }
    }