/* Medications — responsive desktop (>= 900px). */

@media (min-width: 900px) {
    /* La marque occupe toujours 215 px ; seule la navigation se rétracte. */
    :root { --sidebar-open: 215px; }
    html.sidebar-collapsed { --sidebar: 72px; }
    .app-shell .sidebar {
        --sidebar-row-height: 42px;
        top: var(--desktop-topbar-height);
        height: calc(100vh - var(--desktop-topbar-height));
        height: calc(100dvh - var(--desktop-topbar-height));
        padding: 12px 12px 16px !important;
        backdrop-filter: none;
        transition: width .24s ease;
    }
    .sidebar .nav-list {
        min-width: 0;
        min-height: 0;
        flex: 1 1 auto;
        align-content: start;
        grid-auto-rows: 42px;
        gap: 4px;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
    }
    .sidebar .nav-link {
        min-width: 0;
        min-height: 0;
        height: var(--sidebar-row-height);
        padding-block: 0;
        line-height: 1.2;
    }
    .sidebar .nav-icon { width: min(27px, var(--sidebar-row-height)); height: min(27px, var(--sidebar-row-height)); flex-basis: min(27px, var(--sidebar-row-height)); }
    .sidebar .nav-icon .ui-icon { width: min(25px, var(--sidebar-row-height)); height: min(25px, var(--sidebar-row-height)); }
    .sidebar .nav-label { min-width: 0; white-space: nowrap; }
    .sidebar .sidebar-foot { min-height: 24px; flex-shrink: 0; padding-block: 0; }
    .sidebar .sidebar-head {
        position: fixed;
        top: 0;
        left: 0;
        width: var(--sidebar-open);
        height: var(--desktop-topbar-height);
        min-height: 0;
        margin: 0;
        padding: 0 18px;
        border-bottom: 1px solid var(--border);
        background: color-mix(in srgb, var(--bg) 88%, transparent);
        backdrop-filter: blur(16px);
    }
    .sidebar-head .brand { padding: 0; gap: 9px; }
    .desktop-sidebar-toggle {
        display: grid;
        place-items: center;
        flex: 0 0 32px;
        width: 32px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--text);
        cursor: pointer;
    }
    .desktop-sidebar-toggle:hover { background: var(--surface-soft); }
    .desktop-sidebar-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
    .app-shell .main-area { transition: margin-left .24s ease; }
    .app-shell .topbar {
        margin-left: calc(var(--sidebar-open) - var(--sidebar));
        height: var(--desktop-topbar-height);
        transition: margin-left .24s ease;
    }
    .topbar .topbar-inner { height: 100%; min-height: 0; }
    html.sidebar-collapsed .sidebar .nav-link { justify-content: center; gap: 0; padding-inline: 0; }
    html.sidebar-collapsed .sidebar .nav-label {
        position: fixed;
        top: var(--nav-label-top, 0px);
        left: var(--nav-label-left, 84px);
        z-index: 1;
        width: max-content;
        max-width: 240px;
        padding: 8px 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface-solid);
        color: var(--text);
        box-shadow: 0 4px 16px rgba(0,0,0,.12);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    html.sidebar-collapsed .sidebar .nav-link:hover .nav-label,
    html.sidebar-collapsed .sidebar .nav-link:focus-visible .nav-label { opacity: 1; visibility: visible; }
    html.sidebar-collapsed .sidebar .nav-badge { position: absolute; right: -4px; top: -3px; min-width: 18px; height: 18px; padding: 0 3px; font-size: .65rem; }
    html.sidebar-collapsed .sidebar-foot { display: none; }
    .archived-medication-table .medication-dashboard-head,
    .archived-medication-table .medication-dashboard-row {
        grid-template-columns:
            minmax(220px, 1.25fr)
            minmax(190px, 1fr)
            minmax(140px, .68fr)
            minmax(150px, .72fr)
            92px;
        gap: 14px;
    }
}

@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
    .app-shell .sidebar, .app-shell .main-area, .app-shell .topbar { transition: none; }
}