/* Shared desktop presentation; screen-only rules preserve physical label sizes. */
@media screen {
  body[data-stock-page] {
    --stock-ui-bg: #101316;
    --stock-ui-panel: #1b2025;
    --stock-ui-panel-raised: #222930;
    --stock-ui-line: #35404a;
    --stock-ui-text: #edf1f4;
    --stock-ui-muted: #a9b3bc;
    --stock-ui-focus: #b7d5ee;
    display: block;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--stock-ui-bg);
    color: var(--stock-ui-text);
    font: 13px/1.45 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    color-scheme: dark;
  }

  .wrapper.stock-app-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .stock-app-navigation {
    position: sticky;
    top: 0;
    z-index: 80;
    flex: none;
    min-width: 0;
    padding: 0 14px;
    border-bottom: 1px solid var(--stock-ui-line);
    background: linear-gradient(145deg, #222930, #181d22);
    box-shadow: 0 3px 12px #0003;
  }

  .stock-app-brandbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 58px;
    padding: 7px 0;
  }

  .stock-app-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--stock-ui-text);
    text-decoration: none;
  }

  .stock-app-brand img {
    display: block;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 7px;
    object-fit: contain;
  }

  .stock-app-brand span,
  .stock-app-user {
    display: grid;
    gap: 1px;
    min-width: 0;
  }

  .stock-app-brand strong { font-size: 14px; font-weight: 750; }
  .stock-app-brand small,
  .stock-app-user small { font-size: 10px; color: var(--stock-ui-muted); }
  .stock-app-account { display: flex; align-items: center; gap: 12px; }
  .stock-app-user { text-align: right; }
  .stock-app-user strong { font-size: 12px; overflow-wrap: anywhere; }
  .stock-app-logout { margin: 0; }

  .stock-app-tabs {
    display: flex;
    align-items: stretch;
    gap: 5px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    padding: 0;
  }

  .stock-app-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: none;
    min-height: 37px;
    padding: 8px 13px;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: 7px 7px 0 0;
    color: var(--stock-ui-muted);
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
  }

  .stock-app-tabs a:hover { background: #ffffff08; color: var(--stock-ui-text); }
  .stock-app-tabs a.active,
  .stock-app-tabs a[aria-current="page"] {
    border-color: #687784;
    border-bottom-color: #c4ccd4;
    background: linear-gradient(#3b4650, #2c343c);
    color: #fff;
  }

  .stock-app-shell > .main {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 12px 14px 18px;
  }

  .stock-app-shell > .main > .user { display: none; }
  .stock-app-shell .user { flex: none; margin-bottom: 8px; color: var(--stock-ui-muted); font-size: 11px; }
  .stock-app-shell .header-bar {
    flex: none;
    gap: 8px;
    min-height: 38px;
    margin-bottom: 10px;
    padding: 8px 11px;
    border-radius: 9px;
    background: linear-gradient(145deg, #252d35, #1b2127);
  }

  body:not([data-stock-page="scan.php"]) .stock-app-shell .header-bar {
    border-color: var(--stock-ui-line);
  }
  body:not([data-stock-page="scan.php"]) .stock-app-shell .mode-indicator {
    color: #d8e0e7;
    font-size: 12px;
    letter-spacing: .04em;
  }

  .stock-app-shell :is(.toolbar, .filter-bar) {
    gap: 8px;
    padding: 9px 10px;
    margin-bottom: 10px;
    border-color: var(--stock-ui-line);
    border-radius: 9px;
    background: #1d242b;
    box-shadow: none;
  }

  .stock-app-shell :is(.group, .date-filter, .form-row, .button-row) { gap: 8px; }
  .stock-app-shell .button-row { margin-top: 14px; }
  .stock-app-shell .search-input { width: 240px; padding-right: 32px; }

  .stock-app-shell :is(input, select, textarea) {
    max-width: 100%;
    border-color: #46535f;
    border-radius: 7px;
    background: #141a20;
    color: var(--stock-ui-text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 550;
    accent-color: #90bde3;
  }

  .stock-app-shell :is(input, select):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .stock-app-shell .field :is(input, select):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    min-height: 33px;
    padding: 7px 9px;
  }
  .stock-app-shell textarea { padding: 8px 9px; line-height: 1.45; }
  .stock-app-shell :is(input, select, textarea):focus {
    border-color: var(--stock-ui-focus);
    box-shadow: 0 0 0 2px #b7d5ee20;
  }
  .stock-app-shell label { color: #bdc7cf; font-size: 11px; font-weight: 650; }

  .stock-app-shell :is(.glass, .btn, .btn-save, .btn-delete, .btn-reset, .btn-password) {
    min-height: 33px;
    padding: 7px 11px;
    border: 1px solid #56636e;
    border-radius: 7px;
    background: linear-gradient(180deg, #4b5762, #303940);
    color: #f2f5f7;
    font-family: inherit;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: inset 0 1px 0 #ffffff1c;
  }

  .stock-app-shell :is(.glass, .btn, .btn-save, .btn-delete, .btn-reset, .btn-password):hover {
    border-color: #9baab7;
    background: linear-gradient(180deg, #596570, #3a444d);
    transform: none;
    box-shadow: inset 0 1px 0 #ffffff24;
  }
  .stock-app-shell :is(button, a, input, select, textarea):focus-visible {
    outline: 2px solid var(--stock-ui-focus);
    outline-offset: 2px;
  }
  .stock-app-shell :is(button, input, select, textarea):disabled { cursor: default; opacity: .65; }

  .stock-app-shell :is(.btn-green, .btn-save, .password-ok) {
    border-color: #518c69;
    background: linear-gradient(#316547, #244934);
    color: #dcfce7;
  }
  .stock-app-shell :is(.btn-red, .btn-danger, .btn-delete, .password-required) {
    border-color: #935b63;
    background: linear-gradient(#633b43, #442a30);
    color: #ffe0e3;
  }
  .stock-app-shell :is(.btn-orange, .btn-reset) {
    border-color: #88704b;
    background: linear-gradient(#66563b, #453d2d);
    color: #fde6b4;
  }

  .stock-app-shell .stock-panel { background: #181e24; border-color: var(--stock-ui-line); }
  .stock-app-shell .stock-item { background: #171d23; border-top-color: var(--stock-ui-line); border-right-color: var(--stock-ui-line); border-bottom-color: var(--stock-ui-line); }
  .stock-app-shell .stock-numbers div { background: #28333d; }
  body[data-stock-page] :is(.modal-box, dialog) { border-color: #52616e; border-radius: 11px; background: #1b2229; color: var(--stock-ui-text); font-family: inherit; }
  body[data-stock-page] .modal-box { padding: 18px; }
  body[data-stock-page] :is(.modal-box, dialog) :is(input, select, textarea) { max-width: 100%; border-radius: 7px; background: #141a20; color: var(--stock-ui-text); border-color: #46535f; }

  .stock-app-shell .card {
    min-width: 0;
    border-color: var(--stock-ui-line);
    border-radius: 10px;
    background: linear-gradient(145deg, #20272e, #181e24);
    box-shadow: none;
  }
  .stock-app-shell .card:hover { border-color: #52616e; transform: none; box-shadow: none; }
  .stock-app-shell .card-header,
  .stock-app-shell .card > h3 {
    margin: 0;
    padding: 9px 11px;
    border-color: var(--stock-ui-line);
    background: #252e37;
    color: #dce4eb;
    font-size: 12px;
    font-weight: 700;
  }
  .stock-app-shell .card-body { padding: 12px; background: transparent; }
  .stock-app-shell :is(.table-wrapper, .table-wrap, .linked-table-wrapper) {
    min-width: 0;
    min-height: 0;
    border-radius: 7px;
    background: #181e24;
    scrollbar-width: thin;
  }
  .stock-app-shell table { font-size: 12px; }
  .stock-app-shell :is(th, td) { padding: 8px 9px; border-color: #34414c; font-size: 12px; line-height: 1.4; }
  .stock-app-shell th { background: #28333d; color: #dce4eb; font-size: 11px; }
  .stock-app-shell :is(.badge, .role-badge) { padding: 3px 7px; font-size: 10px; }

  /* Independent list and editor scrolling keeps every field reachable. */
  body:is([data-stock-page="artikelen.php"], [data-stock-page="leveranciers.php"]) .main { overflow: hidden; }
  body:is([data-stock-page="artikelen.php"], [data-stock-page="leveranciers.php"]) .content-grid {
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
    gap: 10px;
    flex: 1 1 0;
    min-height: 0;
  }
  .stock-app-shell :is(.article-list, .supplier-list, .form-container) { background: #171d23; }
  .stock-app-shell :is(.article-topbar, .article-item, .supplier-item) { padding: 9px 11px; border-color: #303c47; }
  .stock-app-shell .article-topbar { background: #222c35; }
  .stock-app-shell :is(.article-item, .supplier-item):hover { background: #28333d; transform: none; }
  .stock-app-shell :is(.article-item, .supplier-item).active { border-left-color: #c4ccd4; background: #34414d; }
  .stock-app-shell :is(.article-name, .supplier-name) { font-size: 13px; line-height: 1.35; }
  .stock-app-shell :is(.article-meta, .supplier-meta) { margin-top: 3px; color: var(--stock-ui-muted); font-size: 11px; }
  .stock-app-shell .form-container { padding: 12px; }
  .stock-app-shell .form-grid { gap: 9px; }
  .stock-app-shell .field { gap: 5px; padding: 9px; border-radius: 8px; background: #202831; }
  .stock-app-shell .field:hover { background: #252f39; }
  .stock-app-shell .field:focus-within { border-color: #819aac; box-shadow: 0 0 0 2px #b7d5ee12; }
  .stock-app-shell :is(.history-wrap, .code-preview, .linked-card) { margin-top: 20px; padding-top: 14px; }
  .stock-app-shell :is(.history-title, .code-title, .linked-header) { color: #d1dce5; font-size: 13px; margin-bottom: 10px; }
  .stock-app-shell .history-item { padding: 8px 10px; margin-bottom: 7px; border-radius: 8px; background: #222b34; }
  .stock-app-shell .code-grid { gap: 10px; }
  .stock-app-shell .code-box { padding: 10px; border-radius: 8px; background: #222b34; }

  body[data-stock-page="voorraad_alerts.php"] .main { display: block; }
  body[data-stock-page="voorraad_alerts.php"] .alerts-layout {
    grid-template-columns: minmax(300px, 1fr) minmax(340px, 1.15fr);
    gap: 12px;
  }
  body[data-stock-page="voorraad_alerts.php"] .alerts-recipients { gap: 10px; }
  body[data-stock-page="voorraad_alerts.php"] .alerts-editor h2 { font-size: 16px; margin-bottom: 10px; }
  body[data-stock-page="voorraad_alerts.php"] .alerts-layout .table-wrap { max-height: 55vh; }
  body[data-stock-page="voorraad_alerts.php"] .form-row input { min-width: 180px; }
  body[data-stock-page="voorraad_alerts.php"] td .btn { margin: 2px 3px 2px 0; }

  body[data-stock-page="users.php"] .main { display: block; }
  body[data-stock-page="users.php"] .main > .card { margin-bottom: 12px; }
  body[data-stock-page="users.php"] .form-row { grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) 150px 130px; gap: 8px; }
  body[data-stock-page="users.php"] .user-table { min-width: 800px; }
  body[data-stock-page="users.php"] .user-table .btn-password { min-width: 110px; }

  .stock-app-shell .stats-grid { gap: 9px; margin-bottom: 10px; flex: none; }
  .stock-app-shell .stat-card { padding: 11px 12px; border-color: #56636f; border-radius: 10px; background: #222b34; box-shadow: none; }
  .stock-app-shell .stat-card:hover { transform: none; box-shadow: none; }
  .stock-app-shell :is(.stat-label, .stat-card .label) { margin-bottom: 4px; color: var(--stock-ui-muted); font-size: 11px; }
  .stock-app-shell :is(.stat-value, .stat-card .value) { font-size: 23px; line-height: 1.25; color: #dce6ee; font-weight: 750; }
  body[data-stock-page="logs.php"] .main { overflow: hidden; }
  body[data-stock-page="logs.php"] .main > .card { flex: none; margin-bottom: 10px; }
  body[data-stock-page="logs.php"] .main > .logs-card { flex: 1 1 0; margin-bottom: 0; }
  body[data-stock-page="logs.php"] .logs-card .table-wrapper { flex: 1 1 0; }
  body[data-stock-page="logs.php"] :is(.message-cell, .details-cell) { min-width: 220px; }
  body[data-stock-page="logs.php"] .filter-bar { margin-bottom: 0; }

  body[data-stock-page="onderhoud_db.php"] .main { overflow: hidden; }
  body[data-stock-page="onderhoud_db.php"] .content-scroll { flex: 1 1 0; min-height: 0; overflow: auto; }
  body[data-stock-page="onderhoud_db.php"] .grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; margin-bottom: 12px; }
  body[data-stock-page="onderhoud_db.php"] .card { padding: 12px; }
  body[data-stock-page="onderhoud_db.php"] .card > h3 { padding: 0 0 9px; margin-bottom: 10px; border-bottom: 1px solid #35404a; background: transparent; }
  body[data-stock-page="onderhoud_db.php"] :is(input[type="file"], select) { margin-bottom: 9px; }
  body[data-stock-page="onderhoud_db.php"] .danger-zone { border-color: #80535d; }
  body[data-stock-page="onderhoud_db.php"] .danger-zone h3 { color: #f2b3bb; }
  body[data-stock-page="onderhoud_db.php"] .progress { height: 12px; margin-top: 10px; }

  /* These two pages receive a main wrapper but retain their specific content. */
  body[data-stock-page="change_password.php"] .main { display: block; }
  body[data-stock-page="change_password.php"] .main > .card { width: min(100%, 480px); margin: 20px auto; }
  body[data-stock-page="change_password.php"] .field { margin-bottom: 10px; }
  body[data-stock-page="change_password.php"] .info { margin-bottom: 14px; color: var(--stock-ui-muted); }
  body[data-stock-page="change_password.php"] .card-body button { width: 100%; min-height: 36px; border-radius: 7px; font-size: 12px; }
  .stock-app-shell > .stock-standalone-main { display: block; }
  .stock-app-shell .stock-standalone-main > .card { width: min(100%, 650px); margin: 20px auto; padding: 18px; }
  .stock-app-shell .stock-standalone-main h1 { margin: 0 0 12px; font-size: 20px; line-height: 1.3; }
  .stock-app-shell .stock-standalone-main .amount { padding: 14px; margin: 16px 0; }
  .stock-app-shell .stock-standalone-main .amount input { min-height: 48px; padding: 4px; font-size: 34px; font-weight: 750; }
  .stock-app-shell .stock-standalone-main .button { margin: 3px 0; padding: 9px 13px; font-size: 13px; }
  body[data-stock-page="print_labels.php"] .main { display: block; }
  body[data-stock-page="print_labels.php"] .labels-toolbar { position: sticky; top: 0; margin-bottom: 12px; }
  body[data-stock-page="print_labels.php"] .labels { gap: 12px; }

  .stock-app-shell { scrollbar-color: #677683 #171d23; scrollbar-width: thin; }
  .stock-app-shell ::-webkit-scrollbar { width: 9px; height: 9px; }
  .stock-app-shell ::-webkit-scrollbar-track { background: #171d23; }
  .stock-app-shell ::-webkit-scrollbar-thumb { background: #677683; border: 2px solid #171d23; border-radius: 8px; }
  .stock-app-shell ::-webkit-scrollbar-thumb:hover { background: #8a9aa8; }

  /* Login has no authenticated shell and remains a focused, scrollable card. */
  body[data-stock-role="guest"] {
    display: grid;
    place-items: center;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: auto;
    padding: 20px;
    background: radial-gradient(ellipse at 50% 0, #303a44, transparent 60%), #101316;
  }
  body[data-stock-role="guest"] .container {
    width: min(100%, 360px);
    max-width: 360px;
    padding: 25px;
    border: 1px solid #4a5865;
    border-radius: 12px;
    background: linear-gradient(145deg, #252e37, #1b2229);
    box-shadow: 0 16px 40px #0004;
    box-sizing: border-box;
  }
  body[data-stock-role="guest"] .logo { margin-bottom: 8px; font-size: 32px; }
  body[data-stock-role="guest"] .title { color: #edf1f4; font-size: 23px; }
  body[data-stock-role="guest"] .subtitle { margin-bottom: 18px; color: #b7c2cc; font-size: 12px; }
  body[data-stock-role="guest"] input {
    width: 100%;
    margin: 5px 0;
    padding: 11px;
    border: 1px solid #4a5865;
    border-radius: 7px;
    background: #141a20;
    color: #edf1f4;
    font: inherit;
    box-sizing: border-box;
  }
  body[data-stock-role="guest"] button {
    margin-top: 12px;
    padding: 11px;
    border: 1px solid #8ba0b2;
    border-radius: 7px;
    background: linear-gradient(#647c91, #3b5061);
    color: #fff;
    font: 700 13px/1.45 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  body[data-stock-role="guest"] :is(input, button):focus-visible { outline: 2px solid #b7d5ee; outline-offset: 2px; }
  body[data-stock-role="guest"] .error { color: #ffb1b8; font-size: 12px; }
}

@media screen and (max-width: 1000px) {
  body[data-stock-page="voorraad_alerts.php"] .alerts-layout { grid-template-columns: minmax(0, 1fr); }
  body[data-stock-page="users.php"] .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:is([data-stock-page="artikelen.php"], [data-stock-page="leveranciers.php"]) .content-grid { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); }
}

@media screen and (max-width: 760px) {
  .stock-app-navigation { padding: 0 10px; }
  .stock-app-brandbar { gap: 8px; min-height: 54px; }
  .stock-app-brand img { width: 31px; height: 31px; }
  .stock-app-brand strong { font-size: 12px; }
  .stock-app-account { gap: 8px; }
  .stock-app-user strong { font-size: 11px; max-width: 120px; }
  .stock-app-tabs a { padding: 8px 10px; }
  .stock-app-shell > .main { padding: 10px; }
  .stock-app-shell :is(.toolbar, .filter-bar) { flex-direction: row; align-items: center; }
  .stock-app-shell .group { flex-wrap: wrap; }
  .stock-app-shell .group.right { margin-left: 0; }
  .stock-app-shell .search-wrapper { flex: 1 1 200px; min-width: 0; }
  .stock-app-shell .search-input { width: 100%; }
  body:is([data-stock-page="artikelen.php"], [data-stock-page="leveranciers.php"]) .main { overflow: auto; }
  body:is([data-stock-page="artikelen.php"], [data-stock-page="leveranciers.php"]) .content-grid { display: grid; grid-template-columns: minmax(0, 1fr); flex: none; overflow: visible; }
  body:is([data-stock-page="artikelen.php"], [data-stock-page="leveranciers.php"]) .content-grid > .card { min-height: 240px; }
  .stock-app-shell :is(.article-list, .supplier-list) { max-height: 300px; }
  .stock-app-shell .form-container { overflow: visible; }
  .stock-app-shell .form-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-stock-page="users.php"] .form-row { grid-template-columns: minmax(0, 1fr); }
  body[data-stock-page="logs.php"] .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  .stock-app-navigation { display: none; }
  .wrapper.stock-app-shell { display: block; height: auto; overflow: visible; }
  .stock-app-shell > .main { display: block; height: auto; padding: 0; overflow: visible; }
}