/* Promedico Expiratie
   Visueel thema geïnspireerd op Apotheekhoudende Huisartsenpraktijk de Vlaswiek:
   - zachte vlas-blauwe primaire kleur (vlasbloem)
   - warme crème/zand als rustige achtergrondtinten
   - ruime witruimte, subtiele afronding, duidelijke leesbaarheid
*/

:root {
    /* Vlas-blauw (primair) */
    --vw-blue-900: #2a3d57;
    --vw-blue-700: #3f5f86;
    --vw-blue-500: #6b8fb5;
    --vw-blue-300: #a9bfd7;
    --vw-blue-050: #eef3f8;

    /* Warme neutralen (zand / crème) */
    --vw-sand-100: #f7f3ea;
    --vw-sand-200: #efe7d6;
    --vw-sand-300: #e1d4b8;

    /* Tekst / grijswaarden */
    --vw-ink-900: #1f2937;
    --vw-ink-700: #3f4a5a;
    --vw-ink-500: #6a7486;
    --vw-ink-300: #c9d0da;
    --vw-ink-100: #edf0f4;
    --vw-ink-050: #f6f7f9;
    --vw-white:   #ffffff;

    /* Status (iets zachter dan standaard) */
    --vw-red:        #a33428;
    --vw-red-bg:     #f7d9d3;
    --vw-amber:      #a25b12;
    --vw-amber-bg:   #fbe4c8;
    --vw-yellow:     #8a6a15;
    --vw-yellow-bg:  #f6ecc7;
    --vw-green:      #35694a;
    --vw-green-bg:   #d7e8dc;

    --radius:     8px;
    --radius-lg:  12px;
    --shadow:     0 1px 2px rgba(42, 61, 87, .05), 0 1px 3px rgba(42, 61, 87, .07);
    --shadow-lg:  0 6px 20px rgba(42, 61, 87, .10);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--vw-ink-900);
    background: var(--vw-sand-100);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--vw-blue-700); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
.container.narrow { max-width: 720px; }

.muted { color: var(--vw-ink-500); }
.small { font-size: 12px; }

h1, h2, h3 {
    color: var(--vw-blue-900);
    font-family: "Source Serif Pro", Georgia, "Times New Roman", serif;
    font-weight: 600;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}
h1 { font-size: 22px; }
h2 { font-size: 20px; }

/* ---------- Topbar ---------- */
.topbar {
    background: var(--vw-white);
    border-bottom: 1px solid var(--vw-sand-300);
    box-shadow: var(--shadow);
}
.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    max-width: 1100px;
    margin: 0 auto;
}
.topbar nav { display: flex; gap: 8px; align-items: center; }

/* Dun blauw accent-randje bovenaan */
.topbar::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--vw-blue-500), var(--vw-blue-700));
}

/* ---------- Brand ---------- */
.brand { display: flex; align-items: center; gap: 14px; }
.brand h1 { margin: 0; }
.brand .muted { margin: 2px 0 0; }
.brand-sm .brand-mark { width: 38px; height: 38px; font-size: 14px; border-radius: 50%; }

.brand-mark {
    width: 52px; height: 52px;
    background: var(--vw-blue-700);
    background-image:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 55%),
        linear-gradient(135deg, var(--vw-blue-700), var(--vw-blue-500));
    color: #fff;
    border-radius: 50%;
    display: grid; place-items: center;
    font-family: "Source Serif Pro", Georgia, serif;
    font-weight: 600; font-size: 22px;
    box-shadow: var(--shadow);
    letter-spacing: 0.5px;
    border: 2px solid var(--vw-white);
    outline: 1px solid var(--vw-blue-300);
}

/* ---------- Login ---------- */
.login-body {
    min-height: 100vh;
    display: grid; place-items: center;
    background:
        radial-gradient(900px 420px at 50% -10%, var(--vw-blue-050), transparent 70%),
        var(--vw-sand-100);
    padding: 24px;
}
.login-card {
    width: min(420px, 92vw);
    background: var(--vw-white);
    padding: 30px 30px 22px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border-top: 4px solid var(--vw-blue-500);
}
.login-card form { display: grid; gap: 10px; margin-top: 18px; }
.login-card .brand { margin-bottom: 4px; }
.footer-note { margin-top: 18px; color: var(--vw-ink-500); font-size: 12px; text-align: center; }

/* ---------- Stat cards ---------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
@media (max-width: 820px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

.stat {
    background: var(--vw-white);
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--vw-sand-300);
    display: flex; flex-direction: column; gap: 2px;
    color: var(--vw-ink-900);
    box-shadow: var(--shadow);
    text-decoration: none !important;
    transition: transform .08s ease, border-color .2s ease;
}
.stat:hover { transform: translateY(-1px); border-color: var(--vw-blue-300); }
.stat.is-active { border-color: var(--vw-blue-500); box-shadow: 0 0 0 2px var(--vw-blue-050); }
.stat-num   { font-family: "Source Serif Pro", Georgia, serif; font-size: 28px; font-weight: 600; color: var(--vw-blue-900); }
.stat-label { font-size: 12px; color: var(--vw-ink-500); text-transform: uppercase; letter-spacing: .06em; }
.stat-expired .stat-num { color: var(--vw-red); }
.stat-soon    .stat-num { color: var(--vw-amber); }
.stat-later   .stat-num { color: var(--vw-yellow); }
.stat-ok      .stat-num { color: var(--vw-green); }

/* ---------- Toolbar / Search ---------- */
.toolbar {
    display: flex; gap: 8px; margin: 0 0 14px;
    align-items: center;
}
.toolbar input[type="search"] {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--vw-sand-300);
    border-radius: var(--radius);
    background: var(--vw-white);
}
.toolbar input[type="search"]:focus {
    outline: 2px solid var(--vw-blue-050);
    border-color: var(--vw-blue-500);
}

/* ---------- Card / Table ---------- */
.card {
    background: var(--vw-white);
    border: 1px solid var(--vw-sand-300);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.card.pad { padding: 26px 28px; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.data-table th,
.data-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--vw-ink-100);
    vertical-align: top;
}
.data-table th {
    background: var(--vw-sand-100);
    color: var(--vw-ink-700);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}
.data-table th a { color: inherit; }
.data-table tbody tr:hover { background: var(--vw-blue-050); }
.data-table .num   { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .right { text-align: right; white-space: nowrap; }
.data-table .empty {
    text-align: center; padding: 34px; color: var(--vw-ink-500);
}

tr.row-expired td:first-child { border-left: 3px solid var(--vw-red); }
tr.row-soon    td:first-child { border-left: 3px solid var(--vw-amber); }
tr.row-later   td:first-child { border-left: 3px solid var(--vw-yellow); }
tr.row-ok      td:first-child { border-left: 3px solid var(--vw-green); }

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.badge-expired { background: var(--vw-red-bg);    color: var(--vw-red); }
.badge-soon    { background: var(--vw-amber-bg);  color: var(--vw-amber); }
.badge-later   { background: var(--vw-yellow-bg); color: var(--vw-yellow); }
.badge-ok      { background: var(--vw-green-bg);  color: var(--vw-green); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 9px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--vw-sand-300);
    background: var(--vw-white);
    color: var(--vw-ink-900);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { background: var(--vw-sand-100); border-color: var(--vw-blue-300); text-decoration: none; }
.btn-sm   { padding: 6px 10px; font-size: 12px; }

.btn-primary {
    background: var(--vw-blue-700);
    color: #fff;
    border-color: var(--vw-blue-700);
}
.btn-primary:hover {
    background: var(--vw-blue-900);
    border-color: var(--vw-blue-900);
    box-shadow: 0 0 0 3px var(--vw-blue-050);
}

.btn-ghost  { background: transparent; }
.btn-ghost:hover { background: var(--vw-sand-100); }

.btn-danger { background: var(--vw-red); color: #fff; border-color: var(--vw-red); }
.btn-danger:hover { background: #862819; border-color: #862819; }

/* ---------- Forms ---------- */
label { font-weight: 500; font-size: 13px; color: var(--vw-ink-700); display: block; }
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea, select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--vw-sand-300);
    border-radius: var(--radius);
    background: var(--vw-white);
    color: var(--vw-ink-900);
    font-size: 14px;
    font-family: inherit;
    margin-top: 4px;
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--vw-blue-050);
    border-color: var(--vw-blue-500);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    margin-top: 14px;
}
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.form-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 8px;
}

/* ---------- Alerts ---------- */
.alert {
    padding: 10px 12px;
    border-radius: var(--radius);
    margin: 10px 0;
    font-size: 14px;
}
.alert-error { background: var(--vw-red-bg); color: var(--vw-red); border: 1px solid #e9bfb6; }

/* ---------- Praktijk-footer ---------- */
.practice-footer {
    margin: 28px auto 18px;
    padding: 18px 22px;
    max-width: 1100px;
    background: var(--vw-white);
    border: 1px solid var(--vw-sand-300);
    border-left: 4px solid var(--vw-blue-500);
    border-radius: var(--radius);
    display: flex; flex-wrap: wrap; gap: 16px 28px;
    align-items: center;
    font-size: 13px;
    color: var(--vw-ink-700);
}
.practice-footer strong { color: var(--vw-blue-900); }
.practice-footer .sep { color: var(--vw-ink-300); }

/* ---------- Misc ---------- */
.confirm-list {
    background: var(--vw-sand-100);
    padding: 12px 18px;
    border-radius: var(--radius);
    list-style: none;
    margin: 12px 0;
}
.confirm-list li { padding: 3px 0; }

/* ---------- Main-nav links ---------- */
.main-nav { gap: 10px; }
.nav-link {
    padding: 8px 10px;
    border-radius: var(--radius);
    color: var(--vw-ink-700);
    font-weight: 500;
    font-size: 14px;
}
.nav-link:hover { background: var(--vw-sand-100); text-decoration: none; }
.nav-link.is-active {
    background: var(--vw-blue-050);
    color: var(--vw-blue-900);
}

/* ---------- Page header row ---------- */
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin: 8px 0 16px;
}
.page-head h2 { margin: 0; }
.page-head p.muted { margin: 2px 0 0; }
.page-actions { display: flex; gap: 8px; }

/* ---------- Bag cards ---------- */
.bag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.bag-card {
    display: block;
    background: var(--vw-white);
    border: 1px solid var(--vw-sand-300);
    border-left: 4px solid var(--vw-blue-500);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    color: var(--vw-ink-900);
    box-shadow: var(--shadow);
    text-decoration: none !important;
    transition: transform .1s ease, box-shadow .15s ease, border-color .2s ease;
}
.bag-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}
.bag-expired { border-left-color: var(--vw-red); }
.bag-soon    { border-left-color: var(--vw-amber); }
.bag-later   { border-left-color: var(--vw-yellow); }
.bag-ok      { border-left-color: var(--vw-green); }
.bag-none    { border-left-color: var(--vw-ink-300); }

.bag-card-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}
.bag-card-head h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.25;
}

.bag-meta {
    margin: 8px 0 12px;
    font-size: 13px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 10px;
}
.bag-meta dt { color: var(--vw-ink-500); }
.bag-meta dd { margin: 0; color: var(--vw-ink-900); }
.bag-meta.two-col {
    grid-template-columns: max-content 1fr;
    gap: 6px 18px;
    font-size: 14px;
}

.bag-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed var(--vw-ink-100);
    padding-top: 10px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--vw-ink-500);
}
.bag-count strong { color: var(--vw-ink-900); font-variant-numeric: tabular-nums; }

.mini-stats { display: inline-flex; gap: 4px; }
.mini {
    display: inline-block;
    min-width: 22px;
    text-align: center;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mini-expired { background: var(--vw-red-bg);    color: var(--vw-red); }
.mini-soon    { background: var(--vw-amber-bg);  color: var(--vw-amber); }
.mini-later   { background: var(--vw-yellow-bg); color: var(--vw-yellow); }
.mini-ok      { background: var(--vw-green-bg);  color: var(--vw-green); }

/* "none" badge (tas zonder datum) */
.badge-none {
    background: var(--vw-ink-100);
    color: var(--vw-ink-500);
}