/* =========================================================
   GLOBAL LAYOUT & PAGE BACKGROUND
   ========================================================= */

:root {
    --app-bg: var(--app-bg);
    --app-surface: #ffffff;
    --app-white: #ffffff;
    --app-text: #111827;
    --app-ink: #111111;
    --app-black: #000000;
    --app-muted: #6b7280;
    --app-border: var(--app-border);
    --app-border-strong: var(--app-border-strong);
    --app-border-dark: rgba(15,23,42,0.18);
    --app-border-dark-strong: rgba(15,23,42,0.30);
    --app-dark: var(--app-dark);
    --app-text-soft: #4b5563;
    --app-text-secondary: #374151;
    --app-success-text: #16a34a;
    --app-success-bg: #dcfce7;
    --app-success-border: #bbf7d0;
    --app-success-strong: var(--app-success-strong);
    --app-success-dark: var(--app-success-dark);
    --app-warn-bg: var(--app-warn-bg);
    --app-warn-text: #78350f;
    --app-warn-border: #fcd34d;
    --app-warn-border-strong: var(--app-warn-border-strong);
    --app-soft-surface: #f9fafb;
    --app-shadow-soft: 0 1px 2px rgba(15,23,42,0.08), 0 1px 3px rgba(15,23,42,0.12);
    --app-shadow-strong: 0 4px 5px rgba(0,0,0,0.14), 0 1px 10px rgba(0,0,0,0.12);
    --app-card-border: rgba(15,23,42,0.06);
    --app-card-shadow: 0 4px 6px rgba(15,23,42,0.12), 0 1px 3px rgba(15,23,42,0.18);
    --app-card-shadow-strong: 0 8px 12px rgba(15,23,42,0.16), 0 3px 6px rgba(15,23,42,0.22);
    --app-card-hero-shadow: 0 10px 24px rgba(0,0,0,0.16);
    --app-card-hover-border: rgba(37,99,235,0.3);
    --app-modal-shadow: 0 20px 40px rgba(15,23,42,0.25);
    --app-btn-shadow: 0 4px 10px rgba(0,0,0,0.18);
    --app-btn-shadow-strong: 0 6px 14px rgba(0,0,0,0.2);
    --app-ring-shadow: 0 2px 4px rgba(15,23,42,0.18), 0 0 0 1px rgba(15,23,42,0.10);
    --app-ring-shadow-strong: 0 2px 6px rgba(0,0,0,0.18);
    --app-sheet-shadow: 0 -6px 24px rgba(0,0,0,0.25);
    --app-sheet-shadow-strong: 0 -6px 18px rgba(0,0,0,0.18), 0 -2px 6px rgba(0,0,0,0.16);
    --app-menu-shadow: 0 18px 45px rgba(15,23,42,0.28), 0 5px 10px rgba(15,23,42,0.18);
    --app-menu-border: rgba(148,163,184,0.35);
    --app-menu-hover: 0 4px 12px rgba(0,0,0,0.06);
    --app-menu-drag: 0 6px 16px rgba(0,0,0,0.08);
    --app-overlay-dim: rgba(0,0,0,0.35);
    --app-shadow-heavy: 0 1px 3px rgba(0,0,0,0.35);
    --app-btn-shadow-base: 0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15);
    --app-btn-shadow-heavy: 0 4px 10px rgba(0,0,0,0.32);
    --app-card-shadow-light: 0 10px 28px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04);
    --app-badge-shadow: 0 1px 2px rgba(15,23,42,0.25);
    --app-ghost-hover: rgba(15,23,42,0.16);
    --app-input-bg: var(--app-white);
    --app-input-border: var(--app-border);
    --app-input-radius: 10px;
    --app-input-padding: 0.6rem 0.8rem;
    --app-form-gap: 1rem;
    --app-form-label: 0.9rem;
    --app-form-label-gap: 0.25rem;
    --app-table-padding: 0.55rem 0.75rem;
    --app-table-border: var(--app-border-strong);
    --app-primary: #3b82f6;
    --app-primary-strong: #1d4ed8;
    --app-primary-soft: #eff6ff;
    --app-navy: #1b4965;
    --app-navy-soft: #c2e2eb;
    --app-danger: #b91c1c;
    --app-danger-strong: #ef4444;
    --app-danger-soft: #fee2e2;
    --app-danger-soft-border: #fecdd3;
    --app-danger-dark: #991b1b;
    --app-slate-ink: var(--app-slate-ink);
    --app-slate-border: var(--app-slate-border);
    --app-slate-bg: var(--app-slate-bg);
    --app-info-soft: var(--app-info-soft);
}

body.app-layout {
    background: var(--app-bg);
    margin: 0;
    font-family: Arial, sans-serif;
}

/* Global h3 defaults */
h3 {
    font-weight: 600 !important;
    font-size: 1.10rem !important;
    margin-bottom:1.1rem;
    color: var(--app-text-soft);
}

    /* Titel på sagskort på /fixtur */
    #fix-case-card a {
    text-decoration: none !important;
}

h4 {
    font-weight: 450 !important;
    font-size: 1.0rem !important;
}

/* Page widths & wrappers */
.app-page {
    max-width: 960px;
    margin: 1.5rem auto 2rem;
}
.app-page--mini {
    max-width: 480px;
}

.app-page-header {
    margin-bottom: 0.75rem;
}
.app-page-title {
    margin: 0;
}

.app-muted {
    color: var(--app-muted);
}

/* Toolbar wrapper til søgefelter over et app-card */
.app-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem 0.8rem;
    margin-bottom: 0.75rem;
}
.app-toolbar-left {
    flex: 1 1 220px;
    max-width: 260px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}
.app-toolbar-search {
    flex: 1 1 220px;
    padding: 0.4rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--app-border);
    min-width: 0;
}

.app-flex {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.app-flex-auto { flex: 1 1 auto; }
.app-min-0 { min-width: 0; }
.app-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.app-flex-start { justify-content: flex-start; }
.app-flex-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}
.app-flex-1 { flex: 1 1 0; }
.app-overflow-visible { overflow: visible; }

.app-gap-03 { gap: 0.3rem; }

.app-fs-085 {font-size: 0.85rem;}
.app-fs-075 { font-size: 0.75rem; }

.app-mt-0 { margin-top: 0; }
.app-mt-025 { margin-top: 0.25rem; }
.app-mt-05 { margin-top: 0.5rem; }
.app-mt-035 { margin-top: 0.35rem; }
.app-mt-075 { margin-top: 0.75rem; }
.app-mt-1 { margin-top: 1rem; }
.app-mt-15 { margin-top: 1.5rem; }
.app-mt-2 { margin-top: 2rem; }
.app-mt-25 { margin-top: 2.5rem; }
.app-mt-125 { margin-top: 1.25rem; }
.app-mt-175 { margin-top: 1.75rem; }
.app-mb-0 { margin-bottom: 0; }
.app-mb-1 { margin-bottom: 1rem; }
.app-mb-2 { margin-bottom: 2rem; }
.app-mb-05 { margin-bottom: 0.5rem; }
.app-mb-175 { margin-bottom: 1.75rem; }
.app-mr-1 { margin-right: 1rem; }
.app-mb-04 { margin-bottom: 0.4rem; }
.app-mb-075 { margin-bottom: 0.75rem; }
.app-mb-15 { margin-bottom: 1.5rem; }
.app-ml-05 { margin-left: 0.5rem; }
.app-mr-06 { margin-right: 6px; }
.app-ml-20 { margin-left: 20px; }
.app-ml-53 { margin-left: 53px; display: inline-block; }
.app-gap-05 { gap: 0.5rem; }
.app-gap-035 { gap: 0.35rem; }
.app-gap-075 { gap: 0.75rem; }
.app-mx-auto { margin-left: auto; margin-right: auto; }
.app-max-960 { max-width: 960px; }
.app-max-900 { max-width: 900px; }
.app-max-600 { max-width: 600px; }
.app-max-480 { max-width: 480px; }
.app-max-460 { max-width: 460px; }
.app-pl-0 { padding-left: 0; }
.app-pl-08 { padding-left: 0.8rem; }
.app-self-end { align-self: flex-end; }
.app-w-100 { width: 100%; }
.app-btn-reset { background: none; border: none; padding: 0; }
.app-text-left { text-align: left; }
.app-text-center { text-align: center; }
.app-fs-08 { font-size: 0.8rem; }
.app-fs-09 { font-size: 0.9rem; }
.app-fs-095 { font-size: 0.95rem; }
.app-fs-066 { font-size: 0.66rem; }
.app-fw-700 { font-weight: 700; }
.app-lh-14 { line-height: 1.4; }
.app-text-success { color: var(--app-success-text); }
.app-w-45 { width: 45px; }
.app-w-120 { width: 120px; }
.app-w-140 { width: 140px; }
.is-hidden { display: none; }
.app-items-center { align-items: center; }
.app-items-end { align-items: flex-end; }
.app-items-start { align-items: flex-start; }
.app-card-title-sm { margin: 0 0 5px; font-weight: 600; font-size: 0.9rem; }
.app-inline-flex { display: inline-flex; }
.app-inline-block { display: inline-block; }
.app-m-0 { margin: 0; }
.app-cursor-pointer { cursor: pointer; }
.app-cursor-not-allowed { cursor: not-allowed; }
.app-disabled { opacity: 0.7; }
.app-z-1000 { z-index: 1000; position: relative; }
.app-justify-end { justify-content: flex-end; }
.app-justify-center { justify-content: center; }
.app-mb-025 { margin-bottom: 0.25rem; }
.app-mb-035 { margin-bottom: 0.35rem; }
.app-mb-03 { margin-bottom: 0.3rem; }
.app-gap-06 { gap: 0.6rem; }
.app-gap-04 { gap: 0.4rem; }
.app-text-right { text-align: right; }
.app-no-underline { text-decoration: none; }
.app-fs-14 { font-size: 1.4rem; }
.app-btn-dark { background: var(--app-ink); color: var(--app-white); }
.app-bg-warn { background: var(--app-warn-bg); color: var(--app-warn-text); border: 1px solid var(--app-warn-border); }
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.drx-status-col-name { width: 28%; }
.drx-status-col-amount { width: 16%; }
.drx-status-col-unit { width: 20%; }
.drx-status-col-price { width: 14%; }
.drx-status-col-value { width: 14%; }
.drx-status-col-action { width: 8%; text-align: right; }
.drx-diverse-col-name { width: 40%; }
.drx-diverse-col { width: 20%; }
.drx-fb-place-filter { margin-top:0.65rem; flex-wrap:wrap; }
.drx-search-box { flex: 1 1 260px; max-width: 320px; }
.drx-cocktail-col-name { width:26%; min-width:240px; max-width:320px; }
.drx-cocktail-col-10 { width:10%; }
.drx-cocktail-col-7 { width:7%; }
.drx-fb-col-date { width:80px; }
.drx-fb-col-name { width:230px; }
.drx-fb-col-adv { width:90px; }
.drx-fb-col-place { width:80px; }
.drx-fb-col-pax { width:60px; }
.drx-fb-col-duration { width:60px; }
.drx-fb-col-note { width:260px; }
.drx-fb-col-70 { width:70px; }
.drx-fb-col-110 { width:110px; }
.drx-fb-col-130 { width:130px; }
.drx-fb-col-140 { width:140px; }
.drx-fb-col-150 { width:150px; }
.drx-fb-col-110 { width:110px; }
.drx-fb-col-120 { width:120px; }
.drx-fb-col-60 { width:60px; }
.drx-fb-col-18p { width:18%; }
.drx-fb-col-12p { width:12%; }
.drx-fb-col-22p { width:22%; }
.drx-fb-col-8p { width:8%; }
.drx-fb-col-40p { width:40%; }
.drx-fb-col-20p { width:20%; }
.drx-fb-col-45p { width:45%; }
.drx-fb-col-15p { width:15%; }
.drx-fb-col-60p { width:60%; }
.drx-print-col-66 { width:66px; display:inline-block; }
.drx-bottle-col-name { width:40%; }
.drx-bottle-col-12 { width:12%; }
.drx-bottle-col-24 { width:24%; }
.drx-bottle-col-balance { width:12%; }
.drx-grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.app-icon-btn-36 { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0; }
.app-link-danger { color:var(--app-danger); text-decoration:underline; background:none; border:none; padding:0; cursor:pointer; }
.app-mb-0 { margin-bottom: 0; }
.drx-fb-menu-grid .drx-fb-menu-input[type="text"] { line-height: 1.3; }
.drx-fb-menu-grid textarea.drx-fb-menu-input {
    height: auto;
    min-height: 72px;
    resize: vertical;
    padding: 0.35rem 0.55rem;
    font-family: arial;
}
.drx-ing-card-edit {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--app-ink);
    color: var(--app-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.drx-ing-card-edit:hover { background: var(--app-black); }
.drx-ing-card-edit.is-saving { opacity: 0.7; cursor: progress; }
.drx-ing-price-input { width: 90px; max-width:100%; padding:0.2rem 0.35rem; border:1px solid var(--app-border); border-radius:6px; font-size:0.9rem; box-sizing:border-box; }
.drx-status-detail { background: var(--app-soft-surface); }
.drx-status-detail td { border-top: 0; }
.drx-status-summary-row { cursor: pointer; }
.drx-status-summary-row td { font-weight: 600; }
.drx-status-total td { font-weight: 800; border-top: 2px solid var(--app-ink); }
.app-border { border: 1px solid var(--app-border-strong); }
.app-pad-12 { padding: 1rem 1.2rem; }
.app-pad-10 { padding: 1rem; }
.app-relative { position: relative; }
.app-icon-btn {
    border-radius: 50%;
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.bst-row-ingredient { flex: 1 1 55%; }
.bst-row-unit { flex: 0 0 140px; }
.bst-row-premix { flex: 1 1 40%; }
.fix-badge-dark { background: var(--app-ink); color: var(--app-white); }
.drx-status-round { width:39px; height:39px; border-radius:50%; border:none; background:var(--app-ink); color:var(--app-white); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.drx-status-round i { pointer-events:none; }
.drx-status-round:hover { background:var(--app-black); }
.drx-status-round--sm { width:32px; height:32px; }
.drx-status-round--xs { width: 28px; height: 28px; }
.drx-status-round--xxs { width: 20px; height: 20px; }
.drx-status-card-body { background: var(--app-white); }
.drx-status-table { background: var(--app-white); }
.drx-note-card-body { background: var(--app-soft-surface); padding: 0.75rem; }
.drx-clear-empty-btn { background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; width:100%; text-align:center; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; }
.drx-clear-empty-icon { font-size:1.2em; line-height:1; }
.drx-fb-equipment { height: 450px; }
.drx-grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.fix-app-grid { max-width:960px; margin:2.5rem auto 2rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; }
.fix-app-card { display:flex; align-items:center; padding:1.4rem 1.6rem; height:110px; min-height:110px; box-sizing:border-box; border-radius:1rem; background:var(--app-black); color:var(--app-soft-surface); text-decoration:none; box-shadow:none; transition:transform 0.08s ease, box-shadow 0.08s ease, background-color 0.08s ease; }
.fix-app-card:hover { transform: translateY(-2px); box-shadow: var(--app-card-hero-shadow); }
.fix-app-icon { flex:0 0 auto; width:3.4rem; height:3.4rem; display:flex; align-items:center; justify-content:center; margin-right:1.2rem; }
.fix-app-icon img { display:block; width:34px; height:34px; object-fit: contain; filter: brightness(1); }
.fix-app-text { flex:1 1 auto; min-width:0; }
.fix-app-title { font-weight:600; font-size:1.05rem; margin-bottom:0.15rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fix-app-desc { font-size:0.9rem; opacity:0.9; line-height:1.35; }
.fix-app-select-all { margin-top:0.25rem; font-size:0.8rem; }
.drx-fb-prep-overlay { position:fixed; inset:0; z-index:9999; background:transparent; backdrop-filter:none; }

/* Nytår */
.nytaar-stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.nytaar-stat-label { font-size:0.9rem; color: var(--app-muted); margin-bottom:0.2rem; }
.nytaar-stat-value { font-size:2.2rem; font-weight:700; line-height:1; }
.nytaar-stat-delta { font-size:0.8rem; font-weight:600; margin-left:0.4rem; color: var(--app-muted); }
.nytaar-legend { display:flex; align-items:center; gap:12px; font-size:0.9rem; color:var(--app-slate-ink); margin-bottom:0.4rem; }
.nytaar-legend-wrap { flex-wrap:wrap; }
.nytaar-legend-item { display:inline-flex; align-items:center; gap:6px; }
.nytaar-legend-dot { width:14px; height:14px; border-radius:4px; display:inline-block; border:1px solid transparent; }
.nytaar-dot-red { background:#DB4C40; border-color:#DB4C40; }
.nytaar-dot-navy { background:#0E1C36; border-color:#0E1C36; }
.nytaar-dot-pink { background:#FBACBE; border-color:#FBACBE; }
.nytaar-dot-orange { background:#FE4E00; border-color:#FE4E00; }
.nytaar-dot-green { background:#004F2D; border-color:#004F2D; }
.nytaar-chart-wrap { position:relative; overflow-x:auto; padding-bottom:8px; }
.nytaar-chart-fade { pointer-events:none; position:absolute; top:0; bottom:12px; width:36px; z-index:1; }
.nytaar-chart-fade-left { left:0; background:linear-gradient(90deg, var(--app-white) 0%, rgba(255,255,255,0) 100%); }
.nytaar-chart-fade-right { right:0; background:linear-gradient(270deg, var(--app-white) 0%, rgba(255,255,255,0) 100%); }
.nytaar-chart-canvas { display:block; height:260px; min-height:260px; max-height:260px; position:relative; z-index:2; }
.nytaar-chart-cum { display:block; height:520px; min-height:520px; max-height:520px; width:100%; position:relative; z-index:2; }
.nytaar-chart-cum-wrap { position:relative; overflow:hidden; padding-bottom:8px; }
.nytaar-range-row { display:flex; align-items:center; gap:10px; font-size:0.85rem; color: var(--app-muted); margin-bottom:0.4rem; flex-wrap:wrap; }
.nytaar-range { flex:1; accent-color:var(--app-black); height:18px; padding:4px 0; }
.nytaar-range-label { min-width:40px; }
.nytaar-pre { white-space:pre-wrap; }
.nytaar-settings-notice { margin-bottom:12px; padding:8px 10px; border:1px solid var(--app-border); background:#ecfdf3; }
.fix-form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.nytaar-settings-label { display:flex; flex-direction:column; font-size:0.95rem; color:var(--app-text-secondary); }
.nytaar-settings-label-text { margin-bottom:6px; font-weight:600; }
.nytaar-settings-input { padding:10px; border:1px solid var(--app-border); border-radius:8px; font-size:1rem; }

.drx-fb-prep-picker { position:absolute; left:0; top:0; z-index:20; background:var(--app-white); border:1px solid var(--app-border); border-radius:10px; box-shadow: var(--app-shadow-strong); padding:0.95rem; min-width:460px; }
.drx-fb-cal-shell { display:flex; flex-direction:column; gap:0.75rem; border-left:1px solid var(--app-border-strong); padding-left:0.75rem; min-width:300px; }
.drx-fb-cal-nav { display:block; position:relative; }
.drx-fb-cal-months { display:grid; grid-template-columns:repeat(2, minmax(200px, 1fr)); gap:0.6rem; }
.drx-fb-cal-month { padding:0.15rem 0.25rem 0.05rem; }
.drx-fb-cal-month-title { font-weight:700; color:var(--app-ink); margin-bottom:9px; font-size:13px; display:flex; align-items:center; justify-content:center; gap:0.3rem; text-align:center; position:relative; padding:0 18px; }
.drx-fb-cal-grid { display:grid; grid-template-columns:32px repeat(7, 1fr); gap:0.1rem; align-items:center; }
.drx-fb-week { font-size:10px; color:var(--app-navy); display:flex; align-items:center; justify-content:center; height:32px; box-sizing:border-box; }
.drx-fb-day { width:100%; height:32px; border:0; background:#eef2f5; border-radius:8px; color:var(--app-ink); font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:11px; transition:background 0.15s, color 0.15s; box-sizing:border-box; line-height:32px; }
.drx-fb-day--weekday { background:transparent; color:var(--app-navy); font-weight:600; cursor:default; pointer-events:none; margin-left:-2px; }
.drx-fb-day:hover { background:var(--app-navy-soft); }
.drx-fb-day-empty { visibility:hidden; cursor:default; }
.drx-fb-day.in-range { background:var(--app-navy-soft); color:var(--app-navy); }
.drx-fb-day.range-start,
.drx-fb-day.range-end { background:var(--app-navy); color:var(--app-white); border-radius:50%; }
.drx-fb-day.range-start.in-range,
.drx-fb-day.range-end.in-range { color:var(--app-white); }
.drx-fb-prep-preset { background:var(--app-white) !important; color:var(--app-ink) !important; border:0 !important; border-radius:0; width:100%; text-align:left; justify-content:flex-start; font-size:12px; box-shadow:none !important; transform:none !important; }
.drx-fb-prep-preset:hover { background:var(--app-bg) !important; box-shadow:none !important; transform:none !important; }
.drx-fb-prep-preset.is-active { background:var(--app-navy-soft) !important; color:var(--app-navy) !important; box-shadow:none !important; transform:none !important; }
.drx-fb-cal-label { font-weight:700; color:var(--app-text-secondary); flex:1 1 auto; text-align:center; }
.drx-fb-cal-nav button { width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0; }
.drx-fb-cal-nav button i { font-size:10px; line-height:1; }
.drx-fb-cal-btn { position:absolute; top:0px; }
.drx-fb-cal-btn--prev { left:4px; }
.drx-fb-cal-btn--next { right:4px; }
.drx-fb-prep-layout { display:grid; grid-template-columns:180px 1fr; gap:0.75rem; align-items:start; }
.drx-fb-cal-presets { display:flex; flex-direction:column; gap:0.4rem; }
.drx-fb-menu-status { margin-top:0.35rem; color:var(--app-success-text); font-size:0.9rem; }
.drx-print-break { margin-top:20px; border-top:1px solid var(--app-black); padding-top:6px; }
.drx-print-divider { width:350px; max-width:90%; height:1px; background:var(--app-slate-ink); margin:0 auto 30px auto; }
.drx-print-single { font-weight:500; }
.drx-print-single.mt-7 { margin-top:7px; }
.drx-print-single.mb-7 { margin-bottom:7px; }

@media (max-width: 640px) {
    .drx-fb-prep-picker { min-width:0; width:calc(100vw - 40px); right:20px; left:20px; }
    .drx-fb-cal-shell { min-width:0; }
    .drx-fb-day { width:24px; height:24px; }
}
.drx-note-textarea {
    width: 100%;
    max-width: 100%;
    height: 200px;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    padding: 0.5rem;
    resize: vertical;
    box-sizing: border-box;
}
.drx-status-card-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: none;
    background: var(--app-dark);
    color: var(--app-white);
    padding: 0.75rem 1rem 0.4rem;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
}
.drx-status-card-title {
    color: var(--app-white);
    padding-bottom: 0;
}
.fix-badge-dark { background: var(--app-ink); color: var(--app-white); }
.drx-status-round--xs { width: 28px; height: 28px; }

/* Dashboard cards - bruges til styling af alle dashboards sitewide */
.app-dashboard-grid,
.fix-app-grid {
    max-width: 960px;
    margin: 2.5rem auto 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.app-dashboard-card-title {
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-dashboard-card-text {
    font-size: 0.9rem;
    opacity: 0.9;
    line-height: 1.35;
}

/* Ingredient rows (cocktail forms) */
.drx-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: stretch;
    margin-bottom: 0;
    padding: 0;
    border-top: 1px solid var(--app-border);
}
.drx-row:first-child { border-top: none; }
.drx-row:last-child { border-bottom: 1px solid var(--app-border); }
.drx-ing-table .drx-row:first-child {
    border-top: 1px solid var(--app-border);
}
.drx-ing-table {
    width: 100%;
    margin-top: 0.25rem;
    border-top: 1px solid var(--app-border);
}
.drx-ing-header {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--app-border);
}
.drx-ing-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--app-text-secondary);
    text-align: center;
    padding: 0.35rem 0.6rem;
    background: transparent;
    box-sizing: border-box;
}
.drx-ing-header-amount {
    flex: 0 0 110px;
    border-right: 1px solid var(--app-border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0;
}
.drx-ing-header-unit {
    flex: 0 0 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.drx-ing-header-ingredient {
    flex: 3 1 360px;
    min-width: 260px;
    border-left: 1px solid var(--app-border);
    padding-left: 0.8rem;
    display: flex;
    align-items: center;
}
.drx-ing-header-premix {
    flex: 0 0 90px;
    border-left: 1px solid var(--app-border);
    border-right: 1px solid var(--app-border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.drx-ing-table .drx-row-block {
    flex: 0 0 190px;
}

/* Premix per flaske grid – tabel layout */
.drx-premix-table {
    width: 100%;
    border: 1px solid var(--app-border);
    border-top: 0;
}
.drx-premix-header {
    display: flex;
    align-items: center;
    gap: 0;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
    min-height: 34px;
}
.drx-premix-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--app-border);
    border-bottom: 0;
    font-size: 0.88rem;
    min-height: 34px;
}
.drx-premix-col {
    padding: 0.35rem 0.55rem;
    flex: 1 1 0;
    box-sizing: border-box;
    border-left: 1px solid var(--app-border);
    border-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}
.drx-premix-header .drx-premix-col:first-child,
.drx-premix-row .drx-premix-col:first-child {
    border-left: 0;
}
.drx-premix-header .drx-premix-ing,
.drx-premix-row .drx-premix-ing {
    border-left: 0 !important;
    padding-left: 0;
}
.drx-premix-header .drx-premix-col:last-child,
.drx-premix-row .drx-premix-col:last-child {
    border-right: 0;
}
.drx-premix-ing,
.drx-premix-perc,
.drx-premix-perb {
    width: 100%;
    text-align: center;
    height: 100%;
}
.drx-premix-ing,
.drx-premix-perc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.drx-premix-perb {
    padding: 0 !important;
    display: flex;
    align-items: stretch;
}
.drx-premix-input {
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--app-border);
    font-size: 0.88rem;
    box-sizing: border-box;
    text-align: center;
    align-self: stretch;
    min-height: 34px;
}
.drx-row-block {
    display: flex;
    flex: 0 0 190px;
    gap: 0;
    align-items: stretch;
}
.drx-row-block .fix-select-wrapper,
.drx-row-block select {
    width: 100%;
}
.drx-row-block .fix-form-group {
    flex: 1 1 0;
    border-right: 1px solid var(--app-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.drx-row-block .fix-form-group:last-child {
    border-right: none;
}
.drx-row-block .fix-form-group:first-child input {
    text-align: center;
}
.drx-row-unit {
    flex: 0 0 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.drx-row-ingredient {
    flex: 3 1 360px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--app-border);
}
.drx-row-premix {
    flex: 0 0 90px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    border-left: 1px solid var(--app-border);
    border-right: 1px solid var(--app-border);
    padding: 0;
}
.drx-row-premix::before,
.drx-row-remove::before {
    content: '';
    display: none;
}
.drx-row:first-child .drx-row-premix::before {
    display: none;
}
.drx-row-remove {
    flex: 0 0 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    min-width: 40px;
    margin-left: 0;
}

@media (min-width: 641px) {
    .drx-row-remove {
        transform: none;
    }
    .drx-row:first-child .drx-row-remove {
        transform: none;
    }
    .drx-row:first-child .drx-row-remove::before {
        display: none;
    }
}
.drx-row .fix-form-group {
    margin-bottom: 0;
}
.drx-row label {
    font-size: 0.88rem;
    color: var(--app-text-secondary);
}
.drx-row .drx-row-premix label.drx-row-label {
    display: none;
}
.drx-row:not(:first-child) .drx-row-label {
    display: none;
}
.drx-row .drx-row-label {
    display: none !important;
}
.drx-row input[type="text"],
.drx-row input[type="number"],
.drx-row select {
    height: 100%;
    padding: 0 0.8rem;
    border-radius: 0;
    border: none;
    font-size: 0.88rem;
    color: var(--app-text);
    box-sizing: border-box;
    box-shadow: none;
    background: transparent;
}
/* Hide native arrow in IE/Edge */
.drx-row select::-ms-expand {
    display: none;
}
.drx-row .fix-select-wrapper select {
    padding: 0 0.8rem;
}
.drx-row .fix-select-wrapper {
    border: none;
}
.drx-row .drx-row-premix input[type="checkbox"] {
    height: auto;
    width: auto;
    margin: 0;
    align-self: center;
}
.drx-row .drx-row-premix label {
    align-items: center;
    margin-bottom: 0;
}

/* Force ingredient-row inputs to match form-table style */
.drx-row .fix-form-group input[type="text"],
.drx-row .fix-form-group input[type="number"],
.drx-row .fix-select-wrapper select {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.55rem 0.8rem;
    height: 100%;
    font-size: 0.88rem;
    box-shadow: none;
    color: var(--app-text);
}
.drx-premix-toggle {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    cursor: pointer;
    gap: 0;
    position: relative;
    width: 100%;
    height: 100%;
}
.drx-premix-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.drx-premix-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    background: var(--app-danger-soft);
    color: var(--app-danger-dark);
    border: none;
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.1;
    min-height: 100%;
    min-width: 100%;
    height: 100%;
    width: 100%;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

/* Generic pill toggles (tekst altid synlig) */
.drx-pill-group {
    gap: 0.4rem;
}
.drx-pill-toggle {
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}
.drx-pill-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.drx-pill-toggle input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.drx-pill-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: var(--app-border-strong);
    color: var(--app-text-secondary);
    border: 1px solid var(--app-border);
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.1;
    min-height: 28px;
    transition: all 0.15s ease;
}
.drx-pill-chip.drx-pill-off {
    background: var(--app-danger-soft);
    color: var(--app-danger-dark);
    border-color: var(--app-danger-soft-border);
}
.drx-pill-chip.drx-pill-on {
    background: var(--app-success-bg);
    color: var(--app-success-strong);
    border-color: var(--app-success-border);
}
.drx-pill-warning {
    background: var(--app-warn-bg) !important;
    color: #854d0e !important;
    border-color: var(--app-warn-border-strong) !important;
}
.drx-pill-chip.drx-pill-warning {
    background: var(--app-warn-bg) !important;
    color: #854d0e !important;
    border-color: var(--app-warn-border-strong) !important;
}
.drx-pill-toggle input[type="checkbox"]:checked + .drx-pill-chip,
.drx-pill-toggle input[type="radio"]:checked + .drx-pill-chip {
    background: var(--app-success-bg);
    color: var(--app-success-strong);
    border-color: var(--app-success-border);
}

/* Hvis vi bruger premix-pill til de andre pill-toggles */
.drx-pill-toggle input[type="checkbox"]:checked + .drx-premix-pill,
.drx-pill-toggle input[type="radio"]:checked + .drx-premix-pill {
    background: var(--app-success-bg);
    color: var(--app-success-strong);
    border-color: var(--app-success-border);
}

.drx-pill-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #def7e6;
    color: var(--app-success-dark);
    border-radius: 999px;
    padding: 0;
    width: 28px;
    height: 28px;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1;
}
.drx-pill-check:before {
    content: '✓';
    font-weight: 900;
    color: var(--app-success-dark);
}
.drx-fb-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.drx-fb-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: auto;
}
.drx-fb-check .drx-fb-check-pill {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--app-border);
    background: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    box-shadow: inset 0 0 0 0 var(--app-success-bg);
}
.drx-fb-check input[type="checkbox"]:checked + .drx-fb-check-pill {
    background: var(--app-success-bg);
    border-color: var(--app-success-border);
    box-shadow: inset 0 0 0 2px var(--app-success-bg);
}

/* Runde badges til serveres på (Struktur/Textur) */
.drx-serve-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    border: 1px solid transparent;
    line-height: 1;
}
.drx-serve-chip-structure {
    background: #e6f6ea;
    color: var(--app-success-dark);
    border-color: #c5e8d1;
}
.drx-serve-chip-textur {
    background: var(--app-info-soft);
    color: var(--app-primary-strong);
    border-color: #bfdbfe;
}
.drx-serve-chip-pd {
    background: #fef3c7;
    color: #92400e;
    border-color: var(--app-warn-border-strong);
}

.drx-row:first-child .drx-premix-toggle {
    margin-top: 0;
}
.drx-row:first-child .drx-circle-btn {
    margin-top: 0;
}
.drx-premix-toggle input[type="checkbox"]:checked + .drx-premix-pill {
    background: var(--app-success-bg);
    color: var(--app-success-strong);
    border-color: var(--app-success-border);
}

@media (max-width: 640px) {
    html {
        margin-top: 0 !important;
    }
input,
textarea,
select,
button {
    font-size: 16px !important;
}
    .drx-row {
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        padding-right: 36px; /* plads til X-knap */
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
        border-bottom: 1px solid var(--app-slate-border);
    }
    .drx-row-block,
    .drx-row-ingredient,
    .drx-row-premix,
    .drx-row-remove {
        width: 100%;
        flex: 1 1 auto;
    }
    .drx-row-premix,
    .drx-row-remove {
        justify-content: flex-start;
        margin-left: 0;
    }
    .drx-row-remove {
        position: absolute;
        top: 50%;
        right: 0;
        min-width: 26px;
        width: 26px;
        height: 26px;
        transform: translateY(-50%);
    }
    .drx-row-premix {
        align-items: flex-start;
        justify-content: flex-start;
    }
    .drx-row .drx-row-premix label.drx-row-label {
        transform: none;
        margin-top: 0;
        text-align: left;
    }
    .drx-row .drx-row-premix input[type="checkbox"] {
        align-self: flex-start;
    }
    .drx-row:last-child {
        border-bottom: 0;
    }
}
.drx-ingredient-autocomplete {
    position: relative;
}
.drx-ingredient-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid var(--app-border-strong);
    background: var(--app-white);
    max-height: 220px;
    overflow: auto;
    z-index: 30;
    display: none;
    font-size: 0.8rem;
}

/* Modal / overlay (ny ingrediens) */
.drx-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.7);
    z-index: 100000;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: auto;
}
.drx-modal-open {
    overflow: hidden;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.drx-modal-open #wpadminbar {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
}
html.drx-modal-open,
body.drx-modal-open {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.drx-modal {
    background: var(--app-white);
    border-radius: 0.75rem;
    max-width: 720px;
    width: min(720px, 92vw);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--app-modal-shadow);
}
.drx-modal-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--app-border-strong);
}
.drx-modal-title {
    margin: 0;
    font-size: 1rem;
}
.drx-modal-body {
    flex: 1 1 auto;
}
.drx-modal-iframe {
    border: 0;
    width: 100%;
    height: 60vh;
}

/* Barprep / preplister */
.drx-preplist-area {
    max-width: 960px;
    margin: 1.5rem auto 2rem;
}
.drx-preplist-header {
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.drx-preplist-title {
    margin: 0;
}
.drx-preplist-subtitle {
    margin: 0;
    font-size: 0.9rem;
    color: var(--app-muted);
}
.drx-preplist-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.drx-preplist-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem 1.2rem;
}
.drx-preplist-card {
    box-shadow: none;
    border: none;
    padding: 0.4rem 0.6rem;
    page-break-inside: avoid;
}
.drx-preplist-card h5 {
    font-weight: 550;
    margin: 0 0 0.2rem 0;
}
.drx-preplist-card table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.drx-preplist-card td {
    border: none;
    padding: 0.05rem 0;
    text-align: left;
}

.drx-preplist-screen-only {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

@media (max-width: 780px) {
    .drx-preplist-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media print {
    @page {
        size: A5 portrait;
        margin: 5mm 7mm 7mm 7mm;
    }

    html, body {
        margin: 0;
        padding: 0;
        height: auto !important;
        font-family: "Helvetica Neue", Arial, sans-serif !important;
    }

    .drx-preplist-area {
        padding-left: 25px;
        font-family: "Helvetica Neue", Arial, sans-serif !important;
    }

    .drx-preplist-screen-only {
        display: none !important;
    }

    .drx-preplist-card h5 {
        font-size: 10px !important;
        margin: 0 !important;
        font-weight: 550;
    }

    .drx-preplist-card table {
        font-size: 10px !important;
        font-weight: 350;
    }

    .drx-preplist-card table td {
        padding: 0.6mm 0 0.1mm 0;
    }

    .drx-preplist-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 0;
    }
}

/* Table utilities */
.drx-table-small {
    font-size: 0.8rem;
    margin-left: auto !important;
    margin-right: auto !important;
}
.drx-table-small input[type="text"],
.drx-table-small input[type="number"],
.drx-table-small select {
    height: 36px;
    padding: 0.35rem 0.55rem;
    border-radius: var(--app-input-radius);
    border: 1px solid var(--app-input-border);
    font-size: 0.95rem;
    color: var(--app-text);
    box-sizing: border-box;
}
.drx-w-100 { width: 100px; }
.drx-w-120 { width: 120px; }
.drx-w-180 { width: 180px; }
.drx-input-full {
    width: 100%;
    max-width: 100%;
}
.drx-col-price {
    white-space: nowrap;
    text-align: center;
}
.drx-col-server {
    margin-left: 30px !important;
}
.drx-cocktail-table th,
.drx-cocktail-table td {
    padding: var(--app-table-padding);
    font-size: 0.88rem;
    border-bottom: 1px solid var(--app-table-border);
}
.drx-cocktail-table th.drx-col-price {
    text-align: center;
}
.drx-table-wrap-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.drx-weekly .drx-table-wrap-center {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.drx-weekly .drx-table-wrap-center > table {
    width: 100%;
}
.drx-ingredient-table {
    table-layout: fixed;
    width: 100%;
}
.drx-ingredient-table th,
.drx-ingredient-table td {
    width: 20%;
    padding: var(--app-table-padding);
    border-bottom: 1px solid var(--app-table-border);
}
.drx-ingredient-table .drx-ing-use {
    width: 8%;
    text-align: center;
}
.drx-ingredient-table .drx-ing-name {
    width: 32%;
}
.drx-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.drx-cocktail-table {
    min-width: 760px;
}
.drx-cocktail-table th.drx-col-name,
.drx-cocktail-table td.drx-col-name {
    position: sticky;
    left: 0;
    background: var(--app-white);
    z-index: 2;
}
.drx-circle-btn {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 9999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    line-height: 1;
    box-sizing: border-box;
    border: 1px solid transparent;
}
.drx-row-remove .drx-circle-btn.fix-btn,
.drx-row-remove .drx-circle-btn.fix-btn-secondary {
    padding: 0;
    min-height: 20px;
    min-width: 20px;
    width: 20px;
    height: 20px;
}
.drx-weekly .drx-garnish-remove,
.drx-weekly .drx-note-remove {
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    padding: 0;
    border-radius: 9999px;
    font-size: 0.5rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Notes / garnish blocks */
.drx-note-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: relative;
}
.drx-note-block input[type="text"],
.drx-note-block textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.6rem !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 8px !important;
    font-size: 0.95rem !important;
    font-family: arial !important;
    background: var(--app-white) !important;
    color: var(--app-text) !important;
    line-height: 1.4 !important;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none !important;
}
.drx-note-block input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: checkbox;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    box-shadow: none;
    border: none;
}
.drx-note-block textarea {
    min-height: 4.8em; /* ca. tre linjer */
    resize: vertical;
}
.drx-note-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.15rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.drx-note-flags {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    align-items: center;
}
.drx-bottle-table {
    table-layout: fixed;
}
@media (min-width: 641px) {
    .drx-bottle-table col:nth-child(1) { width: 40%; }
    .drx-bottle-table col:nth-child(2),
    .drx-bottle-table col:nth-child(3),
    .drx-bottle-table col:nth-child(4),
    .drx-bottle-table col:nth-child(5) { width: 15%; }
}
.drx-bottle-table.drx-readonly-count {
    max-width: none;
}
.drx-bottle-table.drx-readonly-count td:first-child,
.drx-bottle-table.drx-readonly-count th:first-child {
    width: 40% !important;
}
.drx-bottle-table.drx-readonly-count td:nth-child(2),
.drx-bottle-table.drx-readonly-count th:nth-child(2),
.drx-bottle-table.drx-readonly-count td:nth-child(3),
.drx-bottle-table.drx-readonly-count th:nth-child(3),
.drx-bottle-table.drx-readonly-count td:nth-child(4),
.drx-bottle-table.drx-readonly-count th:nth-child(4),
.drx-bottle-table.drx-readonly-count td:nth-child(5),
.drx-bottle-table.drx-readonly-count th:nth-child(5) {
    width: 15% !important;
}
.drx-bottle-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--app-white);
    border-bottom: 1px solid var(--app-table-border) !important;
    box-shadow: inset 0 -1px 0 var(--app-border-strong);
}
.drx-copy-bottles-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--app-text);
    color: var(--app-white);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: var(--app-btn-shadow);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.drx-copy-bottles-btn:hover,
.drx-copy-bottles-btn:focus {
    background: var(--app-dark);
    color: var(--app-white);
    transform: translateY(-1px);
    box-shadow: var(--app-btn-shadow-strong);
}
.fix-grow { flex: 1 1 auto; min-width: 0; }
.drx-hidden { display: none; }
.drx-type-fields { display: none; }
.drx-sirup-mode,
.drx-juice-mode { display: none; }
.drx-col-name { min-width: 105px; }
.drx-inline-note { display: block; margin-top: 0.1rem; }
.fix-btn-danger {
    background: var(--app-danger);
    border-color: var(--app-danger);
    color: var(--app-white);
}

/* Weekly count / overview */
.drx-weekly-header {
    margin-bottom: 0.75rem;
}
.drx-weekly-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}
.drx-weekly-top {
    padding-left: 0;
    padding-right: 0;
}
.drx-weekly-tab-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.drx-weekly-tab-buttons .fix-tab-nav-btn {
    border-radius: 999px;
    padding: 0.2rem 0.8rem;
    border: 1px solid var(--app-border);
    text-decoration: none;
    font-size: 0.85rem;
    color: var(--app-text-secondary);
    background: var(--app-white);
}
.drx-weekly-tab-buttons .fix-tab-nav-btn:hover {
    background: var(--app-primary-soft);
    border-color: var(--app-primary);
    color: var(--app-text);
}
.drx-weekly-tab-buttons .fix-tab-nav-btn.is-active {
    background: var(--app-text);
    color: var(--app-white);
    border-color: var(--app-text);
}
.drx-overview-section {
    border-radius: 1rem;
    border: 1px solid rgba(148,163,184,0.4);
    background: var(--app-white);
    margin-top: 1rem;
    overflow: hidden;
}
.drx-overview-toggle {
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    background: var(--app-text);
    color: var(--app-soft-surface);
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95rem;
    font-weight: 600;
}
.drx-overview-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.drx-overview-icon {
    transition: transform 0.18s ease-out;
    font-size: 0.9rem;
    opacity: 0.9;
}
.drx-overview-section.is-open .drx-overview-icon {
    transform: rotate(180deg);
}
.drx-overview-body {
    display: none;
    padding: 0.75rem 1rem 1rem 1rem;
    background: var(--app-white);
}
.drx-overview-section.is-open .drx-overview-body {
    display: block;
}

/* Weekly count: struktur/textur sortable tables */
.drx-count-form {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.drx-count-form .fix-user-table {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border: 0;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
    background: var(--app-white);
    width: 100%;
}
.drx-count-form th:first-child,
.drx-count-form td:first-child {
    text-align: right;
    font-weight: 700;
    width: 50%;
    min-width: 0;
    position: relative;
    padding-left: 1.4rem;
    padding-right: 0.8rem;
}
.drx-count-form th:last-child,
.drx-count-form td:last-child {
    width: 50%;
}
.drx-count-form td:last-child {
    padding: 0;
}
.drx-count-form th:not(:first-child),
.drx-count-form td:not(:first-child) {
    text-align: right;
}
.drx-count-form td,
.drx-count-form th {
    vertical-align: middle;
    padding: 1rem 0.85rem;
    font-size: 0.9rem;
}
.drx-count-form thead th {
    background: var(--app-soft-surface);
    font-weight: 700;
    color: var(--app-text-secondary);
}
.drx-count-form thead { display: none; }
.drx-count-form tbody tr + tr td {
    border-top: 1px solid var(--app-border-strong);
}
.drx-count-form tbody td + td,
.drx-count-form thead th + th {
    border-left: 1px solid var(--app-border-strong);
}
.drx-count-form tbody tr:last-child td {
    border-bottom: 0;
}
.drx-count-form .drx-sort-handle {
    display: inline-flex;
    align-items: center;
    cursor: grab;
    position: absolute;
    left: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}
.drx-count-form input[type="number"],
.drx-count-form input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    padding: 0.45rem 0.6rem;
    border: none;
    border-radius: 0;
    font-size: 0.95rem;
}
.drx-count-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 2.6rem !important;
    border: none;
    border-radius: 0;
    font-size: 0.95rem;
}
.drx-count-form .drx-form-input {
    height: 100%;
    padding: 0;
}
.drx-count-form .drx-form-input input {
    height: 100%;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: none;
    border-radius: 0;
}
.drx-count-form .drx-form-input input[type="number"] {
    text-align: right;
}

.drx-count-value {
    text-align: right;
    padding: 0.45rem 0.6rem;
    font-size: 0.95rem;
}
.drx-count-label {
    text-align: right;
    font-weight: 700;
    padding-left: 1.4rem;
    padding-right: 0.8rem;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}
.drx-count-form .drx-count-label {
    padding-left: 1.4rem !important;
    padding-right: 0.8rem !important;
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
}
.drx-readonly-count .drx-count-label {
    padding-left: 1.4rem !important;
    padding-right: 0.8rem !important;
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
}
.drx-bottle-table .drx-count-label {
    text-align: left;
}

.drx-max-620 {
    max-width: 620px;
}

/* Readonly count tables */
.drx-readonly-count {
    table-layout: fixed;
    width: 100%;
    background: var(--app-white);
}
.drx-count-form td,
.drx-count-form th {
    padding: 0.50rem 0.85rem !important;
    line-height: 1.4;
}
.drx-readonly-count td,
.drx-readonly-count th {
    padding: 0.50rem 0.85rem !important;
    line-height: 1.4;
    font-size: 0.9rem;
    background: var(--app-white);
}
.drx-count-form td:last-child,
.drx-count-form th:last-child,
.drx-readonly-count td:last-child,
.drx-readonly-count th:last-child {
    padding: 0 !important;
}
.drx-count-form td:first-child,
.drx-count-form th:first-child,
.drx-readonly-count td:first-child,
.drx-readonly-count th:first-child {
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
}
.drx-readonly-count td:first-child {
    width: 50%;
    min-width: 0;
}
.drx-readonly-count td:last-child,
.drx-readonly-count th:last-child {
    width: 50%;
}

@media (max-width: 640px) {
    .drx-weekly .drx-table-wrap-center {
        max-width: 100%;
        overflow-x: auto;
    }
    .fix-container.drx-weekly {
        padding-left: 5px;
        padding-right: 5px;
    }
    .drx-weekly-top {
        padding-left: 9px;
        padding-right: 9px;
    }
    .drx-count-form .fix-user-table,
    .drx-readonly-count {
        max-width: 100%;
        table-layout: auto;
        width: 100%;
    }
    .drx-bottle-table {
        width: 100% !important;
        table-layout: auto !important;
    }
    .drx-bottle-table col {
        width: auto !important;
    }
    .drx-bottle-table.drx-readonly-count td:first-child,
    .drx-bottle-table.drx-readonly-count th:first-child {
        width: auto !important;
        min-width: 0 !important;
    }
    .drx-bottle-table.drx-readonly-count th:first-child,
    .drx-bottle-table.drx-readonly-count td:first-child {
        position: sticky;
        left: 0;
        background: var(--app-white);
        z-index: 3;
        white-space: nowrap;
    }
    .drx-count-form th:first-child,
    .drx-count-form td:first-child,
    .drx-readonly-count td:first-child {
        width: 220px;
        min-width: 220px;
    }
    .drx-count-form th:last-child,
    .drx-count-form td:last-child,
    .drx-readonly-count td:last-child,
    .drx-readonly-count th:last-child {
        width: auto;
    }
    .drx-count-form input[type="number"],
    .drx-count-form input[type="text"] {
        font-size: 16px; /* 16px på mobil for at undgå zoom */
    }
    /* Garnish antal-felt på mobil */
    .drx-garnish-qty-cell {
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        justify-content: flex-start;
        position: relative;
    }
    .drx-garnish-qty-cell input[type="text"],
    .drx-garnish-qty-cell input[type="number"] {
        width: 45px !important;
        flex: 0 0 45px;
    }
    .drx-garnish-qty-cell .drx-garnish-remove {
        flex: 0 0 auto;
    }
    /* Skjul slet-knap på mobil; swipe håndterer sletning */
    .drx-weekly .drx-garnish-remove {
        display: none !important;
    }
    /* Swipe-indikator ved sletning */
    .drx-garnish-row.is-swiping {
        background: rgba(239, 68, 68, 0.08);
        transition: background 0.2s ease;
    }
    .drx-garnish-row {
        position: relative;
        overflow: hidden;
    }
    .drx-swipe-delete {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translate(120%, -50%);
        background: var(--app-danger-strong);
        color: var(--app-white);
        border-radius: 999px;
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        transition: transform 0.15s ease, opacity 0.15s ease;
        opacity: 0;
        pointer-events: none;
    }
    .drx-garnish-row.is-swiping .drx-swipe-delete,
    .drx-garnish-row.is-swipe-armed .drx-swipe-delete {
        transform: translate(0, -50%);
        opacity: 1;
    }
    /* Samme anti-zoom for felter på Preplister-tabben */
    .drx-weekly input[type="text"],
    .drx-weekly input[type="number"],
    .drx-weekly textarea,
    .drx-weekly select {
        font-size: 16px;
    }
    /* Kort labels på min/max i preplister-tabeller */
    .drx-min-col,
    .drx-max-col {
        position: relative;
        color: transparent;
        font-size: 0;
    }
    .drx-min-col::after,
    .drx-max-col::after,
    .drx-optalt-col::after {
        position: absolute;
        left: 6px;
        top: 12px;
        color: var(--app-text-secondary);
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.2;
        display: block;
        text-align: left;
        width: 100%;
    }
    .drx-min-col::after { content: "Min."; }
    .drx-max-col::after { content: "Max."; }
    .drx-optalt-col {
        position: relative;
        color: transparent;
        font-size: 0;
    }
    .drx-optalt-col::after { content: "Optalt"; }
    .drx-overview-body {
        padding-left: 5px;
        padding-right: 5px;
    }
    /* Preplister-tabben: kolonnebredder på mobil */
    .drx-notes-table th:nth-child(2),
    .drx-notes-table th:nth-child(3),
    .drx-notes-table th:nth-child(4),
    .drx-notes-table td:nth-child(2),
    .drx-notes-table td:nth-child(3),
    .drx-notes-table td:nth-child(4),
    .drx-garnish-table th:nth-child(2),
    .drx-garnish-table th:nth-child(3),
    .drx-garnish-table th:nth-child(4),
    .drx-garnish-table td:nth-child(2),
    .drx-garnish-table td:nth-child(3),
    .drx-garnish-table td:nth-child(4) {
        width: 50px;
    }
    /* Skjul kolonne 2 og 3 i garnish-tabeller på mobil via col IDs */
    #drx-garnish-col2-struktur,
    #drx-garnish-col3-struktur,
    #drx-garnish-col2-textur,
    #drx-garnish-col3-textur {
        display: none !important;
    }
    /* Preplister-tabben: vis alle kolonner på mobil */
    .drx-garnish-table th,
    .drx-garnish-table td,
    .drx-notes-table th,
    .drx-notes-table td {
        display: table-cell !important;
    }
}
.drx-garnish-qty-cell {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
}
.drx-garnish-add-btn,
.drx-note-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: var(--app-ink);
    color: var(--app-white);
    border: none;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.drx-garnish-add-btn:hover,
.drx-garnish-add-btn:focus,
.drx-note-add-btn:hover,
.drx-note-add-btn:focus {
    background: var(--app-black);
    color: var(--app-white);
}
/* =========================================================
   HEADER: LAYOUT, LOGO, BADGE & KLOKKE
   ========================================================= */

/* Overordnet header (senere definition – denne vinder over den første) */
.fix-app-header {
    padding: 0.4rem 0 0.5rem;
}

/* Én bar: logo (venstre), badge (center), klokke (højre) */
.fix-app-header-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-inline: 1.5rem;
    position: relative; /* gør det muligt at absolut-placere center */
}

/* Venstre: logo */
.fix-header-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Midten: badge, altid centreret i hele barens bredde */
.fix-header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto; /* så knappen kan klikkes */
}

/* Højre: klokke */
.fix-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Logo-tekst */
.fix-logo {
    display: inline-flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--app-ink);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fix-logo:hover {
    opacity: 0.8;
}

.fix-logo-icon-btn {
    display: none;
    position: relative;
    border: none;
    background: rgba(15,23,42,0.06);
    padding: 0.25rem;
    border-radius: 999px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.08s ease;
}

.fix-logo-icon-btn:hover {
    background: var(--app-ghost-hover);
    box-shadow: var(--app-ring-shadow);
    transform: translateY(-1px);
}

/* Lidt tightere padding på headeren på mobil */
@media (max-width: 640px) {
    html {
        margin-top: 0;
    }
    .app-layout {
        padding-top: 0rem; /* samme afstand ved load og sticky */
        padding-bottom: 88px; /* plads til bottom-sticky header */
    }
    /* Skjul tekst-logo og brug ikon-knap i stedet */
    .fix-logo {
        display: none;
    }
    .fix-logo-icon-btn {
        display: inline-flex;
    }
    .fix-app-header-inner {
        padding: 0 18px;
        position: static;
        max-width: 100vw !important;
        width: 100vw !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns: repeat(5, 1fr);
        align-items: center;
        justify-items: center;
        gap: 0;
    }
    .fix-header-left,
    .fix-header-center,
    .fix-header-right {
        display: contents;
    }
    /* Ens knapper, iOS-tabbar-lignende */
    .fix-app-header-inner .fix-notify-bell-btn,
    .fix-app-header-inner .fix-logo-icon-btn,
    .fix-app-header-inner .fix-user-chip,
    .fix-app-header-inner .fix-home-btn-site {
        margin: 0;
        width: 52px;
        height: 52px;
        border-radius: 14px;
        background: transparent;
        border: none;
        box-shadow: none;
        color: var(--app-white) !important;
        opacity: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s ease, transform 0.1s ease;
    }
    /* Rækkefølge på mobil: profil, klokke, site-forside, app-forside, tilbage */
    .fix-app-header-inner .fix-user-chip { order: 1; }
    .fix-app-header-inner #fix-notify-bell-btn { order: 2; }
    .fix-app-header-inner .fix-home-btn-site { order: 3; }
    .fix-app-header-inner .fix-logo-icon-btn { order: 4; }
    /* Knap-interaktioner */
    .fix-app-header-inner .fix-notify-bell-btn:hover,
    .fix-app-header-inner .fix-logo-icon-btn:hover,
    .fix-app-header-inner .fix-home-btn-site:hover {
        background: rgba(255,255,255,0.08);
        transform: translateY(-1px);
    }
    .fix-app-header {
        position: fixed;
        top: auto;
        bottom: 0; /* lægger sig helt ned til bunden */
        left: 0;
        right: 0;
        z-index: 1200;
        background: #0b1220; /* mørk og uigennemsigtig på mobil */
        border-radius: 0; /* flade hjørner på mobil */
        padding: 8px 12px 14px;
        box-shadow: var(--app-sheet-shadow);
        margin-top: 0 !important;
        margin-bottom: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .fix-header-center {
        position: static;
        transform: none;
    }
    .fix-header-left,
    .fix-header-right {
        justify-content: center;
    }
    /* Nulstil default baggrund/skygge på mobile knapper */
    .fix-app-header .fix-notify-bell-btn,
    .fix-app-header .fix-home-btn,
    .fix-app-header .fix-logo-icon-btn,
    .fix-app-header .fix-home-btn-site,
    .fix-app-header .fix-user-chip {
        background: transparent !important;
        box-shadow: none;
        border: none;
    }
    .fix-home-svg {
        fill: var(--app-white);
        opacity: 1;
    }
    /* Tving ikon-fill til hvid på mobil (undtagen profilbadge) */
    .fix-app-header .fix-notify-bell-icon svg,
    .fix-app-header .fix-home-icon svg {
        fill: var(--app-white) !important;
    }
    /* Større ikonstørrelser på mobil */
    .fix-notify-bell-icon,
    .fix-home-icon {
        width: 30px;
        height: 30px;
    }
    .fix-home-svg {
        width: 30px;
        height: 30px;
    }
    /* Profilbadge lidt større når knappen er større */
    .fix-user-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }
}

/* Header layout med logo – navn – klokke
   (gentaget header-layout – supplerer ovenstående, fjerner ikke noget) */
.fix-app-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Fint at være eksplicit her */
.fix-header-left {
    display: flex;
    align-items: center;
}

.fix-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Mobil overrides – sørg for jævn spacing i menubaren */
@media (max-width: 640px) {
    .fix-app-header {
        left: 0;
        right: 0;
        padding: 12px 0 14px;
        box-shadow: var(--app-sheet-shadow-strong);
    }
    .fix-app-header-inner {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr);
        max-width: 480px !important;
        width: calc(100% - 24px) !important;
        margin: 0 auto !important;
        padding: 0;
        align-items: center;
        justify-items: center;
        gap: 18px;
        position: relative;
        top: -7px;
    }
    /* Skjul center-badge, vis mobil-badge i ikonrækken */
    .fix-header-center .fix-user-chip {
        display: none !important;
    }
    .fix-user-chip-mobile {
        display: inline-flex !important;
    }
    .fix-app-header-inner .fix-user-chip,
    .fix-app-header-inner .fix-user-chip-mobile,
    .fix-app-header-inner #fix-notify-bell-btn,
    .fix-app-header-inner .fix-home-btn-site,
    .fix-app-header-inner .fix-logo-icon-btn {
        order: initial;
        margin: 0;
    }
    /* Rækkefølge: profil, klokke, site-hjem, app-hjem, tilbage */
    .fix-app-header-inner .fix-user-chip-mobile { order: 1; }
    .fix-app-header-inner #fix-notify-bell-btn { order: 2; }
    .fix-app-header-inner .fix-home-btn-site { order: 3; }
    .fix-app-header-inner .fix-logo-icon-btn { order: 4; }

    /* Centrer ikonrækken samlet (fix-header-right) */
    .fix-header-right {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px; position: relative; top: -7px;
        grid-column: 1 / -1;
    }
}


/* =========================================================
   BRUGER-BADGE / CHIP (I HEADER & ANDRE STEDER)
   ========================================================= */

/* Knap med badge (uden navn) i midten – første definition */
.fix-user-chip {
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--app-text);
}

.fix-user-chip:hover {
    background: rgba(15,23,42,0.06);
}

.fix-user-chip-mobile {
    display: none;
}

@media (min-width: 641px) {
    .fix-user-chip-mobile {
        display: none !important;
    }
}

.fix-user-avatar {
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--app-white);
}

/* BRUGER-BADGE / CHIP – gentaget blok (samme værdier, bevaret) */

/* Knap med badge (uden navn) i midten */
.fix-user-chip {
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--app-text);
}

.fix-user-chip:hover {
    background: rgba(15,23,42,0.06);
}

/* Selve badget (initialer) */
.fix-user-avatar {
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--app-white);
}

.fix-user-chip-dual {
    position: relative;
    width: 52px;
    height: 40px;
    padding: 0.2rem;
}

.fix-user-avatar-original {
    position: absolute;
    bottom: 0;
    left: 0;
}

.fix-user-avatar-viewas {
    position: absolute;
    top: 0;
    left: 15px;
    box-shadow: var(--app-ring-shadow-strong);
}

/* =========================================================
   NOTIFIKATIONSKLOKKE & NOTIFIKATIONS-OVERLAY
   ========================================================= */

/* Klokke-knap – altid med lys baggrund */
.fix-notify-bell-btn {
    position: relative;
    border: none;
    background: rgba(15,23,42,0.06); /* "hover"-agtig som default */
    padding: 0.25rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.08s ease;
}

/* Hover: lidt mørkere + subtil skygge */
.fix-notify-bell-btn:hover {
    background: var(--app-ghost-hover);
    box-shadow: var(--app-ring-shadow);
    transform: translateY(-1px);
}

/* Fokus (tastatur/tab) – lille blå ring */
.fix-notify-bell-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--app-primary-soft),
        0 0 0 4px var(--app-primary);
}

/* Fladt, sort bell-ikon */
.fix-notify-bell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

.fix-notify-bell-icon .fa-bell {
    font-size: 1.05rem;
    color: var(--app-text);
    line-height: 1;
}

/* Mobil: større ikonstørrelser på alle menuknapper (undtagen profil-badge farve) */
@media (max-width: 640px) {
    .fix-notify-bell-icon,
    .fix-home-icon,
    .fix-shortcut-icon {
        width: 30px !important;
        height: 30px !important;
    }
    .fix-home-svg {
        width: 30px !important;
        height: 30px !important;
    }
    .fix-notify-bell-icon .fa-bell {
        font-size: 1.35rem !important;
        color: var(--app-white) !important;
        line-height: 1 !important;
    }
    .fix-shortcut-icon .fa-up-right-from-square {
        font-size: 1.35rem !important;
        color: var(--app-white) !important;
        line-height: 1 !important;
    }
    .fix-shortcut-btn {
        background: transparent !important;
        border: none;
        box-shadow: none;
    }
    .fix-home-icon img,
    .fix-home-img {
        width: 30px !important;
        height: 30px !important;
    }
    .fix-home-icon .fa-house,
    .fix-home-fa {
        font-size: 1.35rem !important;
        color: var(--app-white) !important;
        line-height: 1 !important;
    }
}

/* Lille rød prik (dot) i stedet for tal */
.fix-notify-bell-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--app-danger-strong);
    box-shadow: 0 0 0 2px var(--app-white);
    display: none; /* styres via .has-unseen */
}

/* Når der er ulæste notifikationer */
.fix-notify-bell-btn.has-unseen .fix-notify-bell-dot {
    display: inline-block;
}

@media (max-width: 640px) {
    /* Større knapper i mobil-bundbaren → flyt dot lidt ind */
    .fix-notify-bell-dot {
        top: 10px;
        right: 10px;
    }
}

.fix-home-btn {
    text-decoration: none;
}

.fix-home-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

.fix-home-icon img,
.fix-home-img {
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
}

.fix-home-svg {
    width: 100%;
    height: 100%;
    fill: var(--app-text);
}
.fix-home-icon .fa-house,
.fix-home-fa {
    font-size: 1.1rem;
    color: var(--app-text);
    line-height: 1;
}
.fix-shortcut-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}
.fix-shortcut-icon .fa-up-right-from-square {
    font-size: 1.05rem;
    color: var(--app-text);
    line-height: 1;
}
.fix-shortcut-settings-btn {
    border: none;
    background: var(--app-dark);
    width: 27px;
    height: 27px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.fix-shortcut-settings-btn:hover {
    background: var(--app-text);
    transform: translateY(-1px);
}
.fix-shortcut-settings-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--app-primary-soft),
        0 0 0 4px var(--app-primary);
}
.fix-shortcut-settings-btn .fa-gear {
    color: var(--app-white);
    font-size: 0.8rem;
}

.fix-shortcut-favicon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: contain;
}

.fix-shortcut-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
}

/* Notifikations-menu: samme kort-stil som brugermenuen */
#fix-notify-overlay .fix-user-overlay-inner {
    width: 338px;
    max-width: calc(100% - 2rem);
    background: var(--app-white);
    border-radius: 14px;
    box-shadow: var(--app-menu-shadow);
    border: 1px solid var(--app-menu-border);
    overflow: hidden;
    font-size: 0.9rem;
    padding: 0.85rem 0.9rem 0.9rem;
}

/* Liste i notifikations-overlay */
.fix-notify-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
}

/* Liste i notifikations-overlay – gentaget blok (suppleret længere nede) */
.fix-notify-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
}

.fix-notify-item + .fix-notify-item {
    margin-top: 0.35rem;
}

.fix-notify-link {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.75rem;
    text-decoration: none;
    background: var(--app-soft-surface);
    border: 1px solid rgba(15,23,42,0.06);
}

.fix-notify-link:hover {
    background: #eef2ff;
    border-color: rgba(79,70,229,0.45);
}

.fix-notify-icon {
    font-size: 1.1rem;
    line-height: 1;
    margin-top: 0.05rem;
}

.fix-notify-text {
    flex: 1;
}

.fix-notify-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--app-text);
    margin-bottom: 0.1rem;
}

.fix-notify-excerpt {
    font-size: 0.82rem;
    color: var(--app-text-soft);
}

/* Notifikations-menu næsten fuld bredde på mobil */
@media (max-width: 640px) {
    #fix-notify-overlay {
        align-items: flex-end;
        justify-content: center;
        padding: 0 0 90px;
        background: linear-gradient(
            to bottom,
            var(--app-overlay-dim) 0%,
            var(--app-overlay-dim) 65%,
            rgba(0,0,0,0) 100%
        );
        z-index: 1100;
    }
    #fix-notify-overlay .fix-user-overlay-inner {
        position: fixed;
        width: 80vw !important;
        max-width: 80vw !important;
        box-sizing: border-box !important;
        height: auto !important;
        max-height: 80vh !important;
        padding-top: 0 !important;
        border-radius: 16px 16px 0 0;
        transform: translate(-50%, 120%);
        left: 50%;
        right: auto;
        top: auto;
        bottom: 100px !important;
        transition: transform 0.18s ease;
        z-index: 1105; /* lig under menubar */
        visibility: visible !important;
    }
    /* Bottom-sheet overlays på mobil (brugermenu + genveje) */
    #fix-user-overlay,
    #fix-shortcut-overlay {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 0 90px !important;
        background: linear-gradient(
            to bottom,
            var(--app-overlay-dim) 0%,
            var(--app-overlay-dim) 65%,
            rgba(0,0,0,0) 100%
        ) !important;
        z-index: 1100 !important;
    }
    #fix-user-overlay .fix-user-overlay-inner {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        max-height: 70vh !important;
        overflow: hidden !important;
    }
    #fix-user-overlay .fix-user-panel {
        position: fixed !important;
        left: 50% !important;
        transform: translate(-50%, 120%);
        bottom: 87px !important;
        top: auto !important;
        width: 80vw !important;
        max-width: 80vw !important;
        box-sizing: border-box !important;
        height: auto !important;
        max-height: 70vh !important;
        overflow: hidden !important;
        border-radius: 16px 16px 0 0 !important;
        transition: transform 0.25s ease;
        z-index: 1105 !important;
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: 8px !important;
    }
    /* Fuldskærmstilstand til "Vis som..."-listen */
    #fix-user-overlay .fix-user-panel.view-as-expanded {
        height: 85vh !important;
        max-height: 85vh !important;
    }

    #fix-shortcut-overlay .fix-user-overlay-inner {
        position: fixed;
        padding-bottom: 2.5rem !important;
        left: 50%;
        transform: translate(-50%, 120%);
        bottom: 87px;
        top: auto;
        width: 80vw;
        max-width: 80vw;
        height: auto;
        max-height: 75vh;
        padding-top: 0;
        border-radius: 16px 16px 0 0;
        transition: transform 0.18s ease;
        z-index: 1105;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #fix-shortcut-list {
        max-height: 55vh;
    }

    #fix-notify-overlay .fix-user-overlay-inner.is-open,
    #fix-shortcut-overlay .fix-user-overlay-inner.is-open {
        transform: translate(-50%, 0);
    }

    #fix-user-overlay .fix-user-panel.is-open {
        transform: translate(-50%, 0) !important;
    }
}

.fix-shortcut-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.fix-shortcut-header h3 {
    margin: 0;
}

.fix-shortcut-form {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.fix-shortcut-input {
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--app-border-strong);
    border-radius: 10px;
}

.fix-shortcut-empty {
    color: var(--app-muted);
    font-size: 0.9rem;
    display: none;
}

/* Titel inde i notifikations-boksen */
#fix-notify-overlay h3 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
}



/* Teksten "Du har ingen ulæste notifikationer." */
#fix-notify-empty {
    font-size: 0.85rem;
    color: var(--app-muted);
    margin-top: 0.35rem;
}

/* Notifikations-overlay: gør selve kortet fleksibelt og scroll inde i listen */
#fix-notify-overlay .fix-user-overlay-inner {
    max-height: 80vh;      /* kortet må max fylde 80% af viewport-højden */
    display: flex;
    flex-direction: column;
}

/* Shortcut-menu: genbrug notifikationsstyling */
#fix-shortcut-overlay .fix-user-overlay-inner {
    width: 338px;
    max-width: calc(100% - 2rem);
    background: var(--app-white);
    border-radius: 14px;
    box-shadow:
        0 18px 45px rgba(15,23,42,0.28),
        0 5px 10px rgba(15,23,42,0.18);
    border: 1px solid rgba(148,163,184,0.35);
    overflow: hidden;
    font-size: 0.9rem;
    padding: 0.85rem 0.9rem 0.9rem;
    height: auto;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

#fix-shortcut-list {
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    max-height: none;
}

/* Mobil: lille “handle” øverst på notifikations-panelet */
.fix-handle-hit {
    display: none;
}

.fix-notify-handle {
    display: none;
}

@media (max-width: 640px) {
    .fix-handle-hit {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px 0 10px;
        cursor: grab;
        touch-action: none;
    }

    .fix-handle-hit:active {
        cursor: grabbing;
    }

    .fix-notify-handle {
        display: block;
        width: 60px;
        height: 6px;
        border-radius: 999px;
        background: var(--app-border-strong);
        margin: 0 auto;
        pointer-events: none; /* hitbox håndteres af wrapperen */
    }
}

/* Liste med notifikationer scroller, mens header + knapper bliver */
#fix-notify-overlay .fix-notify-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    flex: 1 1 auto;        /* fyld “midter-området” */
    min-height: 0;         /* vigtig for scroll i flexbox */
    overflow-y: auto;      /* HER sker scrollet */
}

/* “Ingen notifikationer”-tekst tager bare plads, men skubber ikke knapper ud */
#fix-notify-overlay #fix-notify-empty {
    margin-top: 0.75rem;
    flex: 0 0 auto;
}


/* =========================================================
   PRIMÆRE KNAPPER & SMÅ KNAPPER
   ========================================================= */

/* KNAPPER – material-ish (fælles base) */
.fix-btn,
.fix-btn-secondary,
.fix-btn-danger,
.fix-btn-warning,
.fix-btn-small,
.fix-btn-small-fw {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.6rem;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    background: var(--app-ink);
    color: var(--app-white);
    box-shadow: var(--app-shadow-soft);
    transition:
        background 0.14s ease,
        color 0.14s ease,
        box-shadow 0.14s ease,
        transform 0.08s ease;
}

/* Røde knapper (Luk sag, Log ud osv.) */
.fix-btn-danger {
    background: var(--app-danger-strong);
    color: var(--app-white);
}

/* Gul knap til "Midlertidigt løst" */
.fix-btn-warning {
    background: #facc15;
    color: var(--app-text);
}

.fix-btn-warning:hover {
    background: #eab308;
}

.fix-btn:hover {
    box-shadow:
        0 4px 5px rgba(0,0,0,0.28),
        0 1px 10px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

.fix-btn-compact {
    padding: 0.25rem 0.8rem;
    font-size: 0.8rem;
}

.fix-btn-medium {
    padding: 0.45rem 1.1rem;
    font-size: 0.85rem;
}

.fix-btn:active {
    box-shadow: var(--app-shadow-soft);
    transform: translateY(0);
}

.fix-btn-icon {
    padding: 0.55rem 0.75rem;
    gap: 0.35rem;
    width: 60px;
    margin-top: auto;
    margin-bottom: auto;
}

.fix-icon-plane {
    font-size: 1.05rem;
    line-height: 1;
    color: var(--app-white);
}

.fix-message-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    width: 100%;
    justify-items: start;
}

.fix-form-group-file {
    margin-bottom: 0;
    text-align: left;
    width: 100%;
}

.fix-btn-danger:hover {
    background: var(--app-danger);
}

/* Knap i "loading"-state */
.fix-btn[disabled] {
    opacity: 0.7;
    cursor: default;
    transform: none;
    box-shadow: var(--app-btn-shadow-base);
}


.fix-btn-small {
    font-size: 0.8rem;
    padding: 0.31rem 0.9rem; /* +2px højere samlet */
    border-radius: 8px;
}

/* Små fuldbredde knapper i overlays (profil + notifikationer) */
.fix-btn-small-fw {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 0.6rem; /* +2px højere samlet */
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    background: var(--app-ink);
    color: var(--app-white);
    -webkit-appearance: none;
    appearance: none;
    box-shadow: var(--app-btn-shadow-base);
    transition:
        background 0.14s ease,
        color 0.14s ease,
        box-shadow 0.14s ease,
        transform 0.08s ease;
    width: calc(100% - 1.2rem);
    margin: 0 auto 0.8rem;
}

.fix-btn-small-fw:hover {
    background: var(--app-black);
    box-shadow:
        var(--app-btn-shadow-heavy),
        0 2px 4px rgba(0,0,0,0.18);
    transform: translateY(-0.5px);
}

.drx-form-table {
    border: 0;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
    border-radius: 0;
    overflow: hidden;
    margin-bottom: var(--app-form-gap);
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    width: 100%;
    box-sizing: border-box;
}
.drx-form-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    border-top: 1px solid var(--app-border);
}
.drx-form-row:first-child {
    border-top: none;
}
.drx-form-row:last-child {
    border-bottom: none;
}
.drx-form-gap {
    height: var(--app-form-gap);
}
.drx-form-label {
    padding: 0.65rem 0.8rem 0.65rem 1.5rem;
    background: var(--app-white);
    border-right: 1px solid var(--app-border);
    font-size: var(--app-form-label);
    font-weight: 700;
    color: var(--app-text-secondary);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.drx-form-input {
    padding: 0;
    display: flex;
    align-items: stretch;
}
.drx-form-row.drx-type-fields {
    grid-template-columns: 1fr 2fr;
}
.drx-form-row.drx-type-fields .drx-form-input {
    align-items: center;
}
.drx-form-row.drx-type-fields .drx-form-input input,
.drx-form-row.drx-type-fields .drx-form-input select,
.drx-form-row.drx-type-fields .drx-form-input textarea {
    padding: 0.65rem 0.8rem;
    height: 100%;
    width: 100%;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
}
.drx-form-input input,
.drx-form-input select {
    width: 100%;
    font-size: 0.88rem;
    border: none;
    box-shadow: none;
    padding: 0.55rem 0.8rem;
    height: 100%;
    box-sizing: border-box;
}
.drx-form-options {
    display: flex;
    gap: 0;
    width: 100%;
}
.drx-form-option {
    flex: 1 1 0;
    display: inline-flex;
}
.drx-form-options .drx-premix-pill {
    width: 100%;
    height: 100%;
    border-radius: 0 !important;
    justify-content: center;
    text-align: center;
    margin: 0;
    padding: 0.75rem 0.4rem;
    border: none !important;
    box-sizing: border-box;
}
.drx-form-option + .drx-form-option .drx-premix-pill {
    border-left: 0;
}
.drx-form-option {
    flex: 1 1 0;
    display: inline-flex;
    margin: 0;
}

/* =========================================================
   TOPKNAPPER PÅ DASHBOARD & FILTERKNAPPER
   ========================================================= */

/* Top-knapper på dashboard */
.fix-dashboard-top-buttons {
    display: flex;
    flex-direction: column; /* mobil: under hinanden */
    align-items: stretch;
    gap: 0.6rem;
    margin-top: 2.0rem;     /* ekstra luft ned fra topbaren */
    margin-bottom: 2.0rem;  /* ekstra luft ned til "Åbne sager" */
}

/* Vedligehold-knapper (kategori 2) */
.fix-dashboard-top-buttons .fix-btn-maint {
    background: var(--app-white);
    color: var(--app-ink);
    border: 1px solid var(--app-border-dark);
    box-shadow: var(--app-shadow-soft);
}

/* Hover for vedligehold-knapper – forbliver hvide, men "popper" */
.fix-dashboard-top-buttons .fix-btn-maint:hover {
    background: var(--app-white); /* behold hvid baggrund */
    color: var(--app-ink);
    border-color: var(--app-border-dark-strong);
    box-shadow: var(--app-shadow-strong);
    transform: translateY(-1px);
}

/* Knapper i topbaren */
.fix-dashboard-top-buttons .fix-btn {
    width: 100%;            /* mobil: full width */
    box-sizing: border-box; /* inkluder padding i de 100% */
    text-align: center;
}

/* På større skærme: alle knapper på én linje */
@media (min-width: 900px) {
    .fix-dashboard-top-buttons {
        flex-direction: row;  /* desktop: på række */
        justify-content: center;
        align-items: stretch; /* gør alle knapper lige høje */
    }

    .fix-dashboard-top-buttons .fix-btn {
        width: auto;          /* ikke 100% længere, bare automatisk bredde */
        min-width: 170px;     /* så de ikke bliver mikroskopiske */
    }
}

/* Filterbar på dashboardet */
.fix-filter-row {
    margin: 0.5rem 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.85rem;
}

.fix-filter-label {
    font-size: 0.8rem;
    color: var(--app-muted);
    margin-right: 0.40rem;
    margin-left: 0.4rem;
}

.fix-filter-btn {
    border-radius: 999px;
    padding: 0.2rem 0.8rem;
    border: 1px solid var(--app-border);
    text-decoration: none;
    font-size: 0.85rem;
    color: var(--app-text-secondary);
    background: var(--app-white);
}

.fix-filter-btn:hover {
    background: var(--app-primary-soft);
    border-color: var(--app-primary);
    color: var(--app-text);
}

.fix-filter-btn.is-active {
    background: var(--app-text);
    color: var(--app-white);
    border-color: var(--app-text);
}


/* =========================================================
   CONTAINER, MAIN & FORMS
   ========================================================= */

.fix-user-password-form {
    margin-top: 0.4rem;
}

.fix-app-main {
    padding-bottom: 2rem;
    margin-left: 5px;
    margin-right: 5px;
}

.fix-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
}

/* Formulargrupper */
.fix-form-group {
    margin-bottom: var(--app-form-gap);
}

.fix-form-group label {
    display: block;
    font-size: var(--app-form-label);
    margin-bottom: var(--app-form-label-gap);
}

.fix-form-group input[type="text"],
.fix-form-group input[type="password"],
.fix-form-group input[type="email"],
.fix-form-group textarea,
.fix-form-group select,
.fix-form-group input[type="date"] {
    width: 100%;
    padding: var(--app-input-padding);
    border-radius: var(--app-input-radius);
    border: 1px solid var(--app-input-border);
    background: var(--app-input-bg);
    font-size: 0.95rem;
    box-sizing: border-box;
}

.fix-multi-select {
    width: 100%;
    padding: 0.5rem;
    border-radius: var(--app-input-radius);
    border: 1px solid var(--app-input-border);
    box-sizing: border-box;
}

.fix-form-group textarea {
    min-height: 120px;
}

/* Select styling */
.fix-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.fix-select-wrapper select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--app-white);
    padding-right: 2rem;
}
.fix-select-wrapper select::-ms-expand {
    display: none;
}

.fix-select-wrapper::after {
    content: '';
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    pointer-events: none;
}

/* Alerts */
.fix-alert {
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.fix-alert-error {
    background: #ffe4e4;
    color: #7a0000;
}

.fix-alert-success {
    background: #e4ffe8;
    color: #006b1b;
}


/* =========================================================
   BRUGERADMINISTRATION (TABEL, ROLLER, HANDLINGER)
   ========================================================= */

/* Brugeradministration */
.fix-user-wrap {
    max-width: 900px;
    margin: 0 auto;
}

.fix-user-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.fix-user-table th,
.fix-user-table td {
    padding: var(--app-table-padding);
    border-bottom: 1px solid var(--app-table-border);
}

.fix-user-table th {
    text-align: left;
    font-weight: 600;
    color: var(--app-text-soft);
}

.fix-user-email {
    font-size: 0.8rem;
    color: var(--app-muted);
}

/* Rolle-badges */
.fix-user-role-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
}

.fix-user-role-admin {
    background: var(--app-danger-soft);
    color: var(--app-danger);
}

.fix-user-role-leader {
    background: var(--app-info-soft);
    color: var(--app-primary-strong);
}

.fix-user-role-employee {
    background: var(--app-success-bg);
    color: #15803d;
}

.fix-user-actions {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

/* =========================================================
   OVERLAYS (PROFIL, STATUS, GLOBAL LOADING)
   ========================================================= */

/**
 * STYLING AF PROFIL-KNAP OVERLAY
 */

/* Brugermenu-overlay: dropdown/overlay uden mørklæggende baggrund */
.fix-user-overlay {
    position: fixed;
    inset: 0;
    display: none; /* toggles via JS */
    background: transparent;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0;
}

.fix-user-overlay.is-open {
    display: block;
}
#fix-shortcut-overlay.is-open {
    display: flex;
}

#fix-user-overlay {
    z-index: 10000;
}

#fix-notify-overlay,
#fix-shortcut-overlay {
    z-index: 1100;
}

#fix-user-overlay .fix-user-overlay-inner {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* Selve panelet (menuen) – centreret vandret under headeren */
#fix-user-overlay .fix-user-panel {
    position: absolute;          /* vigtig: absolut ift. overlay-inner */
    top: 6rem;                   /* afstand fra top */
    left: 50%;                   /* midt på skærmen */
    transform: translateX(-50%); /* træk halvdelen af bredden tilbage = centreret */

    width: 260px;
    max-width: calc(100% - 2rem);
    background: var(--app-white);
    border-radius: 14px;
    box-shadow:
        0 18px 45px rgba(15,23,42,0.28),
        0 5px 10px rgba(15,23,42,0.18);
    border: 1px solid rgba(148,163,184,0.35);
    overflow: hidden;
    font-size: 0.9rem;
}

/* Indre padding i brugermenuen */
.app-user-panel-inner {
    padding: 0.85rem 0.9rem 0.9rem;
}

/* Lodret afstand mellem sektioner i menuen */
.app-user-panel-section {
    margin-bottom: 0.75rem;
}

.app-user-panel-section:last-child {
    margin-bottom: 0;
}

#fix-push-toggle-row {
    display: none;
}

.fix-section-divider {
    border-top: 1px solid var(--app-border-strong);
    margin: 0.5rem 0 0.7rem;
}

.fix-btn-ghost {
    background: var(--app-bg);
    color: var(--app-dark);
}

.fix-btn-ghost:hover {
    background: var(--app-border-strong);
}

.fix-view-as-note {
    margin: -0.35rem 0 0.6rem;
    font-size: 0.82rem;
    color: #475569;
    text-align: center;
}

.fix-view-as-list {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.55rem 0.55rem 0.65rem;
    margin: 0.15rem 0 0.2rem;
}

.fix-view-as-title {
    font-weight: 600;
    color: var(--app-dark);
    font-size: 0.85rem;
    margin: 0 0 0.35rem;
}

.fix-view-as-users {
    display: grid;
    gap: 0.3rem;
    max-height: 240px;
    overflow: auto;
}

.fix-view-as-user {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    border: 1px solid var(--app-slate-border);
    background: var(--app-white);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}

.fix-view-as-user:hover {
    border-color: var(--app-slate-border);
    box-shadow: var(--app-menu-hover);
    transform: translateY(-0.5px);
}

.fix-view-as-name {
    color: var(--app-dark);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 0.35rem;
}

.fix-view-as-role {
    background: var(--app-dark);
    color: var(--app-white);
    font-size: 0.62rem;
    text-transform: uppercase;
    padding: 0.16rem 0.42rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
    max-width: 38%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.fix-view-as-empty {
    text-align: center;
    font-size: 0.8rem;
    color: #475569;
    margin: 0.25rem 0 0;
}

#fix-view-as-btn,
#fix-view-as-stop {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}


/* Status-overlays (luk/genåbn/midlertidigt) */
.app-status-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.app-status-overlay-inner {
    background: var(--app-white);
    border-radius: 16px;
    padding: 1rem;
    width: 90%;
    max-width: 420px;
}



/* =========================================================
   CARDS, DASHBOARD-SEKTIONER & CASE META
   ========================================================= */

       .fix-case-list {
          margin-top: 1rem;
        }

.app-card {
    border-radius: 18px;
    padding: 1rem 1.1rem;
    background: var(--app-white);
    border: 1px solid var(--app-card-border);
    box-shadow: var(--app-card-shadow);
    margin-bottom: 0.9rem;
    transition:
        box-shadow 0.14s ease,
        transform 0.14s ease,
        background 0.14s ease,
        border-color 0.14s ease;
}

.app-card:hover {
    transform: none;
    border-color: var(--app-card-hover-border);
    box-shadow: var(--app-card-shadow-strong);
}

.app-card h3 {
    margin: 0.4rem 0 0.1rem;
    font-size: 1.02rem;
}

.app-card-ghost {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Header-layout til årshjul-kort (titel/meta + badges) */
.fix-maint-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.fix-maint-card-main {
    flex: 1 1 auto;
    min-width: 0;
}

.fix-maint-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: flex-end;
}

.fix-case-meta {
    font-size: 0.8rem;
    color: #555;
}

.fix-case-meta-badges {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.fix-case-meta-restaurant {
    font-weight: 600;
    color: var(--app-text);
    font-size: 0.95rem;
}

.fix-dashboard h2 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}


/* =========================================================
   GENERELLE BADGES (STATUS, PRIORITET, SUBSCRIBERS)
   ========================================================= */

/* Generelle status-badges */
.fix-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #e5f4ff;
    color: #005b96;
    margin-left: 0.25rem;
}

.fix-badge-closed {
    background: #eee;
    color: #555;
}

.fix-badge-temp {
    background: #fff3d6;
    color: #a66300;
}

/* Subscriber-badges (fx på sager) */
.fix-notify-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    font-size: 0.8rem;
    min-width: 120px;
}

.fix-notify-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
}

.fix-notify-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    position: relative;
}

.fix-notify-inline .fix-switch {
    position: relative;
    top: 3px;
}

.fix-subscriber-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: flex-end;
}

.fix-subscriber-badge {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--app-white);
    box-shadow: var(--app-badge-shadow);
}

.fix-subscriber-badge[data-badge-color],
.fix-activity-author-badge[data-badge-color] {
    background: var(--app-dark);
}

.fix-subscriber-badge[data-badge-color="0ea5e9"],
.fix-activity-author-badge[data-badge-color="0ea5e9"] { background: #0ea5e9; }
.fix-subscriber-badge[data-badge-color="3b82f6"],
.fix-activity-author-badge[data-badge-color="3b82f6"] { background: var(--app-primary); }
.fix-subscriber-badge[data-badge-color="6366f1"],
.fix-activity-author-badge[data-badge-color="6366f1"] { background: #6366f1; }
.fix-subscriber-badge[data-badge-color="22c55e"],
.fix-activity-author-badge[data-badge-color="22c55e"] { background: #22c55e; }
.fix-subscriber-badge[data-badge-color="16a34a"],
.fix-activity-author-badge[data-badge-color="16a34a"] { background: var(--app-success-text); }
.fix-subscriber-badge[data-badge-color="eab308"],
.fix-activity-author-badge[data-badge-color="eab308"] { background: #eab308; }
.fix-subscriber-badge[data-badge-color="f97316"],
.fix-activity-author-badge[data-badge-color="f97316"] { background: #f97316; }
.fix-subscriber-badge[data-badge-color="ef4444"],
.fix-activity-author-badge[data-badge-color="ef4444"] { background: var(--app-danger-strong); }
.fix-subscriber-badge[data-badge-color="ec4899"],
.fix-activity-author-badge[data-badge-color="ec4899"] { background: #ec4899; }
.fix-subscriber-badge[data-badge-color="a855f7"],
.fix-activity-author-badge[data-badge-color="a855f7"] { background: #a855f7; }
.fix-subscriber-badge[data-badge-color="14b8a6"],
.fix-activity-author-badge[data-badge-color="14b8a6"] { background: #14b8a6; }

/* Badge til afsender af besked/begivenhed i aktivitets-feed */
.fix-activity-author-badge {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--app-white);
    box-shadow: var(--app-badge-shadow);
    flex-shrink: 0;
}

/* Planlagt vedligehold – årshjul */
.fix-maint-restaurant-section {
    border-radius: 1rem;
    border: 1px solid rgba(148,163,184,0.4);
    background: var(--app-soft-surface);
    margin-top: 1rem;
    overflow: hidden;
}

.fix-maint-restaurant-toggle {
    width: 100%;
    text-align: left;
    padding: 0.85rem 1rem;
    background: var(--app-text);
    color: var(--app-soft-surface);
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 600;
}

.fix-maint-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.fix-maint-toggle-icon {
    transition: transform 0.18s ease-out;
    font-size: 0.9rem;
    opacity: 0.9;
}

.fix-maint-restaurant-section.is-open .fix-maint-toggle-icon {
    transform: rotate(180deg);
}

.fix-maint-restaurant-body {
    display: none;
    padding: 0.5rem 1rem 1rem 1rem;
    background: var(--app-soft-surface);
}

.fix-maint-restaurant-section.is-open .fix-maint-restaurant-body {
    display: block;
}

.fix-maint-month-block {
    margin-top: 0.75rem;
}

.fix-maint-month-block h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    border-top: 1px solid rgba(148,163,184,0.35);
    padding-top: 0.4rem;
    text-transform: capitalize;
}


/* =========================================================
   TOGGLES / SWITCHES
   ========================================================= */

.fix-subscribe-toggle {
    display: inline-block;
}

.fix-switch {
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    border: none;
    background: var(--app-slate-border);
    padding: 0;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--app-border-dark);
}

.fix-switch-handle {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--app-white);
    transition: transform 0.2s ease;
    box-shadow: var(--app-shadow-heavy);
}

.fix-switch.is-on {
    background: #22c55e;
}

.fix-switch.is-on .fix-switch-handle {
    transform: translateX(20px);
}


/* =========================================================
   CASE INFO, GALLERI & SEKTIONER PÅ SAGSSIDEN
   ========================================================= */

/* Sagsinfo */
.fix-case-info {
    margin-top: 0.8rem;
    font-size: 0.85rem;
    background: #fafafa;
    padding: 0.7rem 0.8rem;
    border-radius: 8px;
}

.fix-case-info-compact {
    margin-top: 0.2rem;
}

.fix-case-info-row {
    margin-bottom: 0.2rem;
}

/* Indhold på sager */
/* Galleri på enkeltsager */
.fix-case-gallery {
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.fix-case-title {
    margin: 20px 0 0;
}

/* Hvert billede-link */
.fix-case-gallery a {
    display: block;
    flex: 1 1 48%;
    max-width: 48%;
}

/* Selve billedet – nedskaleret thumbnail-størrelse */
.fix-case-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: var(--app-shadow-strong);
}

/* På små skærme: ét billede pr. række */
@media (max-width: 640px) {
    .fix-case-gallery a {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Sektioner på sagssiden (Beskrivelse, Hvad der allerede er forsøgt osv.) */
.fix-section h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}

.fix-section p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}


/* =========================================================
   AKTIVITETS-FEED
   ========================================================= */

.fix-activity {
    margin-top: 1.4rem;
}

.fix-activity-item {
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    border: 1px solid var(--app-border-strong);
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
    background: var(--app-white);
    box-shadow: var(--app-shadow-soft);
}

/* Meta-linje med label + tekst */
.fix-activity-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    color: var(--app-muted);
    margin-bottom: 0.2rem;
}

.fix-activity-meta-text {
    opacity: 0.9;
}

/* Lille ikon-chip i aktivitetsfeedet (besked/begivenhed) */
.fix-activity-icon {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.fix-activity-icon-message {
    background: var(--app-info-soft);
    color: var(--app-primary-strong);
}

.fix-activity-icon-event {
    background: var(--app-border-strong);
    color: var(--app-text-secondary);
}

/* Beskeder – tydeligt blå “chat”-kort */
.fix-activity-message {
    border-color: rgba(59,130,246,0.35);
    background: var(--app-primary-soft);
    border-left-width: 3px;
    border-left-color: var(--app-primary);
}

/* Begivenheder – mere neutral, men tydeligt anderledes */
.fix-activity-event {
    border-color: rgba(148,163,184,0.8);
    background: var(--app-soft-surface);
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: var(--app-muted);
}

/* Tekst i begge typer */
.fix-activity-message .fix-activity-content,
.fix-activity-event .fix-activity-content {
    white-space: pre-wrap;
    margin: 0;
}

/* Begivenheder beholder let “system”-feel */
.fix-activity-event .fix-activity-content {
    font-style: italic;
}

.fix-activity-images {
    margin-top: 0.35rem;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}


/* =========================================================
   ADMIN-ACTIONS & SUBSCRIBER-VÆLGER
   ========================================================= */

.fix-admin-actions {
    margin-top: 0.6rem;
}

.fix-admin-actions-row {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.fix-admin-actions-row + .fix-admin-actions-row {
    margin-top: 0.4rem;
}

.fix-admin-subscribers {
    margin-top: 0.2rem;
    font-size: 0.75rem;
    text-align: right;
    order: 1;
}

.fix-admin-subscribers form {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.fix-admin-subscribers select {
    font-size: 0.8rem;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--app-border);
    background: var(--app-white);
}

.fix-add-subscriber-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--app-ink);
    color: var(--app-white);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.12s ease;
}

.fix-add-subscriber-btn:hover,
.fix-add-subscriber-btn:focus-visible {
    background: var(--app-black);
    transform: translateY(-1px);
}

.fix-add-subscriber-btn:active {
    transform: translateY(0);
}


/* =========================================================
   PROFIL-OVERLAY – NOTIFIKATIONSINDSTILLINGER
   ========================================================= */

.fix-user-notification-settings {
    margin-top: 1rem;
    margin-bottom: 1.4rem; /* ekstra luft ned til knapperne */
}

.fix-user-pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 0.6rem;
}

.fix-user-pref-label {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
}

.fix-user-pref-label > strong {
    font-weight: 600;
    font-size: 0.92rem;
}

.fix-user-pref-label > span {
    font-size: 0.8rem;
    color: var(--app-muted);
}


/* =========================================================
   ANDRE SMÅTING & WP-SPECIFIKKE TILPASNINGER
   ========================================================= */

/* Skjul "Written by ..." blokken på enkeltsager */
/* Link til redigering af sagsinfo */
.fix-edit-meta-link {
    margin-top: 0.4rem;
    text-align: center;
    font-size: 0.85rem;
}

.fix-edit-meta-link a {
    text-decoration: underline;
    cursor: pointer;
}

/* =========================================================
   FRI BAR – UI TILFØJELSER
   ========================================================= */

.drx-fb-sort-list {
    border: 1px dashed var(--app-border);
    border-radius: 12px;
    padding: 0.65rem;
    min-height: 140px;
    background: linear-gradient(180deg, var(--app-white) 0%, var(--app-soft-surface) 100%);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}
.drx-fb-sort-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--app-border-strong);
    border-radius: 10px;
    background: var(--app-white);
    cursor: grab;
    margin-bottom: 0.4rem;
    transition: box-shadow 0.12s ease, transform 0.12s ease;
    font-size: 0.8rem;
}
.drx-fb-sort-item:last-child { margin-bottom: 0; }
.drx-fb-sort-item:hover { box-shadow: var(--app-menu-hover); transform: translateY(-1px); }
.drx-fb-sort-item.dragging { opacity: 0.65; box-shadow: var(--app-menu-drag); }
.drx-fb-sort-item i { color: #9ca3af; font-size: 0.8rem; }
.drx-fb-sort-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.drx-fb-message {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.9rem;
    margin: 0.7rem 0 0.7rem 0;
}
.drx-fb-message.success {
    background: #ecfdf3;
    color: var(--app-success-strong);
    border: 1px solid var(--app-success-border);
}
.drx-fb-message.error {
    background: #fef2f2;
    color: var(--app-danger);
    border: 1px solid #fecaca;
}

.drx-fb-ing-autocomplete {
    position: relative;
}
.drx-fb-ing-results {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--app-white);
    border: 1px solid var(--app-border-strong);
    border-radius: 10px;
    box-shadow: var(--app-menu-hover);
    z-index: 20;
    display: none;
    max-height: 240px;
    overflow-y: auto;
}
.drx-fb-ing-results button {
    display: block;
    width: 100%;
    padding: 0.5rem 0.7rem;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.92rem;
}
.drx-fb-ing-results button:hover,
.drx-fb-ing-results button:focus {
    background: var(--app-bg);
}

.drx-fb-row:hover td {
    background: var(--app-slate-bg);
}
.drx-cocktail-row:hover td,
.drx-ingredient-row:hover td {
    background: var(--app-slate-bg);
}
.drx-fb-print-link:hover {
    background: var(--app-slate-bg);
}
.drx-fb-print-dropdown {
    position: relative;
    z-index: 999;
}
.drx-fb-print-link {
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--app-text);
    text-decoration: none;
    font-size: 0.9rem;
}
.drx-fb-print-menu {
    position: absolute;
    top: 100%;
    margin-top: 6px;
    right: 0;
    background: var(--app-surface);
    border: 1px solid var(--app-border-strong);
    border-radius: 10px;
    box-shadow: var(--app-shadow-strong);
    min-width: 160px;
    z-index: 999;
    display: none;
}
.drx-form-label-strong { font-weight: 600; }
.drx-form-input-readonly { font-weight: 400; font-size: 0.9rem; line-height: 1.4; color: var(--app-text); padding-left: 0.8rem; display:flex; align-items:center; }
.drx-fb-print-dropdown.is-open .drx-fb-print-menu {
    display: block;
}
/* Match pre-dillute inputs with cocktail edit secondary table */
#drx-fb-pre-table input[type="number"],
#drx-fb-pre-table input[type="text"] {
    background: transparent;
    border: 1px solid var(--app-border-strong);
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
    height: 38px;
    font-size: 0.9rem;
    box-shadow: none;
    color: var(--app-text);
}
#drx-fb-pre-table .drx-fb-ing-autocomplete {
    width: 100%;
}
#drx-fb-pre-table .drx-fb-pre-remove {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
.drx-premix-row-print span {
    padding-right: 5px;
}
.drx-premix-row-print {
    display: flex;
}
.drx-premix-row-print span:nth-child(1) {
    width: 66px; 
    flex: 0 0 66px;
    text-align: right;
}
.drx-premix-row-print span:nth-child(2) {
    width: 67px;
    flex: 0 0 67px;
    text-align: left;
}
.drx-premix-row-print span:nth-child(3) {
    flex: 1 1 auto;
    text-align: left;
}
.drx-fb-menu-table tbody tr:hover td:first-child,
.drx-fb-menu-table tbody tr:hover td:nth-child(2) {
    font-weight: 700;
}
.drx-round-add-btn {
    background: var(--app-text);
    color: var(--app-white);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: var(--app-btn-shadow);
}
.drx-round-add-btn i {
    font-size: 14px;
    line-height: 1;
}
.drx-round-add-btn:hover {
    background: var(--app-dark);
}
.drx-fb-table tbody tr {
    height: 45px;
}
.drx-fb-table tbody td {
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
}
.drx-fb-table th[data-align-center],
.drx-fb-table td[data-align-center] {
    text-align: center;
}

.app-table {
    width: 100%;
    border-collapse: collapse;
}

.app-table th,
.app-table td {
    padding: var(--app-table-padding);
    border-bottom: 1px solid var(--app-table-border);
}

.app-table thead th {
    font-weight: 700;
    color: var(--app-text-secondary);
}

.app-table tbody tr:last-child td { border-bottom: none; }

.drx-fb-table {
    width: 100%;
    border-collapse: collapse;
}
.drx-fb-table th,
.drx-fb-table td {
    padding: var(--app-table-padding);
    border-bottom: 1px solid var(--app-table-border);
}
.drx-fb-table thead th {
    font-weight: 700;
    color: var(--app-text-secondary);
}

.drx-notes-table,
.drx-garnish-table {
    width: 100%;
    border-collapse: collapse;
}

.drx-notes-table th,
.drx-notes-table td,
.drx-garnish-table th,
.drx-garnish-table td {
    padding: var(--app-table-padding);
    border-bottom: 1px solid var(--app-table-border);
}

.drx-notes-table thead th,
.drx-garnish-table thead th {
    font-weight: 700;
    color: var(--app-text-secondary);
}

.drx-notes-table tbody tr:last-child td,
.drx-garnish-table tbody tr:last-child td {
    border-bottom: none;
}
.drx-fb-table tbody tr:last-child td {
    border-bottom: none;
}
.drx-fb-table col:first-child {
    width: 70px !important;
}
.drx-fb-table th:first-child,
.drx-fb-table td:first-child {
    padding-left: 0;
    padding-right: 0;
}
.drx-fb-table tbody td:first-child {
    padding-left: 0;
    padding-right: 0;
}

.bst-note-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: var(--app-black);
    color: var(--app-white);
    padding: 0;
    cursor: pointer;
    box-shadow: var(--app-shadow-soft);
    position: relative;
}

.bst-note-wrap {
    position: relative;
    display: inline-block;
}

.bst-note-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--app-white), 0 0 0 4px var(--app-text);
}

.bst-note-pop {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: var(--app-white);
    color: var(--app-text);
    padding: 0.55rem 0.65rem;
    border-radius: 12px;
    border: 1px solid var(--app-border-strong);
    box-shadow: var(--app-menu-shadow);
    white-space: normal;
    min-width: 180px;
    max-width: 260px;
    z-index: 20;
    font-size: 0.9rem;
}

.bst-note-pop::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 12px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: transparent transparent var(--app-border-strong) transparent;
}

.bst-note-pop::after {
    content: "";
    position: absolute;
    top: -7px;
    right: 12px;
    border-width: 0 7px 7px 7px;
    border-style: solid;
    border-color: transparent transparent var(--app-white) transparent;
}
@media (max-width: 640px) {
    .drx-fb-menu-grid > .app-card {
        width: 100%;
    }
}
.drx-fb-menu-grid > .app-card {
    box-sizing: border-box;
    padding: 0.75rem 0.85rem !important;
}
.drx-fb-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.drx-fb-card {
    border-radius: 14px;
    box-shadow: var(--app-card-shadow-light);
}

.drx-fb-table th {
    font-weight: 600;
    color: var(--app-text-secondary);
}
.drx-fb-table td {
    vertical-align: middle;
}

.drx-fb-pop-sum {
    font-weight: 700;
    background: #fef3c7;
    text-align: left;
    padding-left: 0.5rem;
}
}