/* Iseld v14 – samlet mobilrettelse for dashboard, innstillinger og adminlister. */

@media (max-width: 768px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  /*
   * Visningslås:
   * Main Hub har display:block !important lenger nede for mobiloppsettet.
   * Denne regelen må derfor være minst like spesifikk, ellers overstyres
   * .hidden og Main Hub havner under kalenderen.
   */
  #mainHubView.main-hub.hidden {
    display: none !important;
  }

  /* Varslingsknappen følger samme dokumentflyt som de andre knappene. */
  .iseld-notification-center.mobile-flow,
  .iseld-notification-center.inline {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
  .iseld-notification-center.mobile-flow .iseld-notification-bell {
    width: 100% !important;
    min-width: 48px !important;
    height: 44px !important;
  }
  .module-topbar .actions .iseld-notification-center.mobile-flow {
    width: 100% !important;
    order: 20;
  }
  #mainHubView .mainhub-nav-links .iseld-notification-center.mobile-flow {
    flex: 0 0 auto !important;
  }
  #mainHubView .mainhub-nav-links .iseld-notification-center.mobile-flow .iseld-notification-bell {
    width: 48px !important;
  }
  .iseld-notification-center.inline .iseld-notification-panel {
    position: fixed !important;
    inset: max(68px, env(safe-area-inset-top)) 10px auto 10px !important;
    width: auto !important;
    max-height: calc(100svh - 86px) !important;
    z-index: 10060 !important;
  }

  /* Mobil dashboard: fullstendig årstall og ryddig kontrollrad. */
  #dashboardView .month-navigation {
    grid-template-columns: 44px minmax(112px, 1fr) 106px 44px !important;
  }
  #dashboardView .month-select {
    min-width: 0 !important;
  }
  #dashboardView .year-select {
    width: 106px !important;
    min-width: 106px !important;
    padding-left: 15px !important;
    padding-right: 28px !important;
    font-variant-numeric: tabular-nums;
  }

  /* Undermenyen skal åpnes som et kompakt panel, ikke strekke toppmenyen. */
  #dashboardView .dashboard-settings-dropdown:not(.hidden) {
    position: fixed !important;
    top: max(76px, calc(env(safe-area-inset-top) + 58px)) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: calc(100svh - 96px) !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 12px !important;
    z-index: 10020 !important;
    border-radius: 20px !important;
    background: linear-gradient(160deg, #172554, #0b1731) !important;
    box-shadow: 0 24px 70px rgba(2, 6, 23, .42) !important;
  }
  #dashboardView .dashboard-settings-dropdown button {
    min-height: 42px !important;
    width: 100% !important;
  }

  /* Fullskjerm-innstillinger: header, meny og innhold i stabil rekkefølge. */
  #settingsModal .settings-modal {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
  }
  #settingsModal .settings-modal-head {
    position: relative !important;
    order: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 72px !important;
    padding: max(16px, env(safe-area-inset-top)) 16px 14px !important;
  }
  #settingsModal .settings-shell {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex-direction: column !important;
    overflow: hidden !important;
    order: 2 !important;
  }
  #settingsModal .settings-menu {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 34svh !important;
    flex: 0 0 auto !important;
    overflow-y: auto !important;
    padding: 14px !important;
  }
  #settingsModal .settings-menu-brand {
    display: none !important;
  }
  #settingsModal .settings-panel {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow-y: auto !important;
    padding: 16px 14px max(28px, env(safe-area-inset-bottom)) !important;
  }

  /* Main Hub: én kompakt horisontal meny som ikke gjør siden bredere. */
  #mainHubView.main-hub {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  #mainHubView .mainhub-nav {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: max(10px, env(safe-area-inset-top)) 10px 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    scrollbar-width: none;
  }
  #mainHubView .mainhub-nav::-webkit-scrollbar { display: none; }
  #mainHubView .mainhub-nav-brand {
    flex: 0 0 auto !important;
    width: 86px !important;
    margin: 0 !important;
    padding: 0 10px 0 0 !important;
    border: 0 !important;
  }
  #mainHubView .mainhub-nav-brand img {
    width: 74px !important;
    height: auto !important;
  }
  #mainHubView .mainhub-nav-brand span,
  #mainHubView .mainhub-nav-footer {
    display: none !important;
  }
  #mainHubView .mainhub-nav-links {
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  #mainHubView .mainhub-nav .dashboard-nav-link {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 44px !important;
    padding: 9px 12px !important;
    border-radius: 16px !important;
    white-space: nowrap !important;
  }
  #mainHubView .mainhub-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 12px 32px !important;
    overflow-x: hidden !important;
  }
  #mainHubView .main-hub-card {
    padding: 16px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  /* Kunder/firmaer og brukere vises som komplette kort i stedet for avkuttede tabeller. */
  #mainHubView .main-hub-table-wrap,
  #mainHubView .main-hub-table-wrap.nested {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  #mainHubView .main-hub-table,
  #mainHubView .main-hub-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #mainHubView .main-hub-table thead {
    display: none !important;
  }
  #mainHubView .main-hub-table tr {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 14px !important;
    padding: 8px 14px !important;
    border: 1px solid #dbe6f5 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(15,23,42,.06) !important;
  }
  #mainHubView .main-hub-table tr.hidden {
    display: none !important;
  }
  #mainHubView .main-hub-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #edf2f7 !important;
    background: transparent !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  #mainHubView .main-hub-table td > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #mainHubView .main-hub-table td:last-child {
    border-bottom: 0 !important;
  }
  #mainHubView .main-hub-table td::before {
    display: block;
    content: attr(data-label);
    margin-bottom: 5px;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  #mainHubView .mainhub-company-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #mainHubView .mainhub-company-actions button,
  #mainHubView .main-hub-table td > button {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;
  }
  #mainHubView .hub-table-input,
  #mainHubView .hub-table-select {
    min-width: 0 !important;
    width: 100% !important;
  }
  #mainHubView .mainhub-company-users {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #mainHubView .mainhub-company-users > td {
    display: block !important;
    padding: 0 !important;
  }
  #mainHubView .mainhub-company-users > td::before {
    display: none !important;
  }

  /* Materiallisten får samme kortvisning, slik at innpris, utsalg og handlinger alltid er synlige. */
  .materials-list-card .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .materials-list-card .data-table,
  .materials-list-card .data-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .materials-list-card .data-table thead {
    display: none !important;
  }
  .materials-list-card .data-table tr {
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 0 12px !important;
    margin-bottom: 14px !important;
    padding: 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(15,23,42,.06) !important;
  }
  .materials-list-card .data-table td {
    display: grid !important;
    grid-template-columns: minmax(76px, .42fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: 9px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #edf2f7 !important;
    overflow-wrap: anywhere !important;
  }
  .materials-list-card .data-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .materials-list-card .data-table td[data-label="Bilde"] {
    grid-row: 1 / span 3;
    grid-column: 1;
    display: block !important;
    border: 0 !important;
  }
  .materials-list-card .data-table td:not([data-label="Bilde"]) {
    grid-column: 2;
  }
  .materials-list-card .data-table td:last-child {
    border-bottom: 0 !important;
  }
  .materials-list-card .material-thumb {
    width: 62px !important;
    height: 62px !important;
  }
  .materials-list-card td[data-label="Handling"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .materials-list-card td[data-label="Handling"]::before {
    display: none !important;
  }
  .materials-list-card td[data-label="Handling"] button {
    width: 100% !important;
    margin: 0 !important;
  }
}

@media (max-width: 420px) {
  #dashboardView .month-navigation {
    grid-template-columns: 42px minmax(94px, 1fr) 102px 42px !important;
  }
  #dashboardView .year-select {
    width: 102px !important;
    min-width: 102px !important;
  }
}