/* ==========================================================================
   Malawi School ERP — mobile-first base stylesheet
   --------------------------------------------------------------------------
   Every rule in this file targets the 360 px baseline. All enhancements
   for wider viewports live in _enhance.css (min-width only).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Breakpoint ladder — documentation only, media queries can't read vars */
    --bp-sm: 600px;
    --bp-md: 840px;
    --bp-lg: 1200px;
    --bp-xl: 1600px;

    /* Brand */
    --md-primary:              #1a5632;
    --md-primary-dark:         #0d3b1e;
    --md-primary-light:        #2d7a4a;
    --md-on-primary:           #ffffff;
    --md-accent:               #f9a825;
    --md-error:                #dc2626;

    /* Surfaces (light) */
    --md-surface:              #ffffff;
    --md-surface-1:            #f8faf8;
    --md-surface-2:            #f0f4f1;
    --md-surface-3:            #e8ede9;
    --md-surface-bright:       #f5f7f5;

    /* Text */
    --md-on-surface:           #161b18;
    --md-on-surface-variant:   #5a6660;

    /* Outlines */
    --md-outline:              #b8c2bb;
    --md-outline-variant:      #dde4df;

    /* Status */
    --status-success-bg:       #d9f0e0;
    --status-success-fg:       #1a5632;
    --status-warning-bg:       #fef3d0;
    --status-warning-fg:       #8a6200;
    --status-danger-bg:        #fde2e2;
    --status-danger-fg:        #b91c1c;
    --status-info-bg:          #d6ecf7;
    --status-info-fg:          #0c5a7a;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Radius — mobile base (larger, softer) */
    --md-radius-sm: 6px;
    --md-radius:    10px;
    --md-radius-lg: 12px;
    --md-radius-xl: 16px;
    --md-radius-2xl: 20px;

    /* Type */
    --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --fs-body:   15px;   /* mobile base */
    --fs-small:  13px;
    --fs-xs:     11px;
    --fs-h1:     22px;
    --fs-h2:     18px;
    --fs-h3:     16px;

    /* Layout */
    --app-bar-height:      56px;
    --bottom-nav-height:   64px;
    --sidebar-rail-width:  72px;
    --sidebar-width:       260px;
    --container-max:       1440px;

    /* Minimum touch target */
    --tap-min: 44px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.15);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.25);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; border-spacing: 0; }
ul, ol { list-style: none; }

/* --------------------------------------------------------------------------
   3. Base typography
   -------------------------------------------------------------------------- */
body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--md-on-surface);
    background: var(--md-surface-bright);
    min-height: 100dvh;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
a { color: var(--md-primary); }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   4. App shell — mobile base: top bar · main · bottom nav
   -------------------------------------------------------------------------- */
.app-shell {
    display: grid;
    grid-template-rows: var(--app-bar-height) 1fr var(--bottom-nav-height);
    grid-template-areas:
        "topbar"
        "main"
        "bottomnav";
    height: 100dvh;
    overflow: hidden;
}
.app-main {
    grid-area: main;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
}

/* Sidebar is hidden on mobile; bottom nav takes over. */
.sidebar { display: none; }

/* --- App bar (mobile: menu · title · actions) --- */
.app-bar {
    grid-area: topbar;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: var(--app-bar-height);
    background: color-mix(in srgb, var(--md-surface) 92%, transparent);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid var(--md-outline-variant);
    z-index: 50;
}
.app-bar-menu,
.app-bar-collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--md-radius);
    color: var(--md-on-surface);
}
.app-bar-menu { display: inline-flex; }
.app-bar-collapse { display: none; }
.app-bar-title {
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-bar-search,
.app-bar-breadcrumb { display: none; }
.app-bar-actions { display: flex; align-items: center; gap: 2px; }
.app-bar-actions .search-icon { display: inline-flex; }

.notif-bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--md-radius);
    font-size: 18px;
    cursor: pointer;
}
.notif-dot {
    position: absolute;
    top: 8px; right: 8px;
    width: 8px; height: 8px;
    background: var(--md-error);
    border-radius: 50%;
}

/* --- Bottom nav (mobile only) --- */
.bottom-nav {
    grid-area: bottomnav;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: var(--bottom-nav-height);
    background: var(--md-surface);
    border-top: 1px solid var(--md-outline-variant);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 40;
}
.bottom-nav > * {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 10px;
    font-weight: 500;
    color: var(--md-on-surface-variant);
    padding: 6px 4px;
    min-height: 44px;
}
.bottom-nav > * i { font-size: 20px; }
.bottom-nav > *.active { color: var(--md-primary); }

/* --- FAB --- */
.fab {
    position: fixed;
    right: 16px;
    bottom: calc(var(--bottom-nav-height) + 16px + env(safe-area-inset-bottom));
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--md-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 6px 20px rgba(26,86,50,0.35);
    z-index: 30;
}
.toolbar-add { display: none; }

/* --- Page scaffolding --- */
.page-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.page-title { font-size: var(--fs-h1); font-weight: 700; }
.toolbar { display: flex; flex-direction: column; gap: 8px; }
.toolbar > * { width: 100%; }

/* --------------------------------------------------------------------------
   5. Buttons (mobile: 48 px touch targets)
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 48px;
    padding: 0 16px;
    border-radius: var(--md-radius-lg);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    line-height: 1;
    min-height: var(--tap-min);
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.btn-block { display: flex; width: 100%; }
.btn-sm { height: 40px; padding: 0 12px; font-size: 14px; }
.btn-lg { height: 56px; padding: 0 20px; font-size: 16px; }
.btn-icon { width: 44px; padding: 0; }

.btn-primary { background: linear-gradient(180deg, #1a5632 0%, #164a2b 100%); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(180deg, #1e6239 0%, #1a5632 100%); color: #fff; }
.btn-primary:active { transform: translateY(0.5px); }

.btn-secondary { background: var(--md-surface); color: var(--md-on-surface); border-color: var(--md-outline-variant); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { background: var(--md-surface-bright); border-color: var(--md-outline); color: var(--md-on-surface); }

.btn-ghost { background: transparent; color: var(--md-on-surface-variant); border-color: transparent; }
.btn-ghost:hover { background: rgba(0,0,0,0.05); color: var(--md-on-surface); }

.btn-danger { background: linear-gradient(180deg, #dc2626, #b91c1c); color: #fff; }
.btn-danger:hover { background: linear-gradient(180deg, #ef4444, #dc2626); color: #fff; }

/* --------------------------------------------------------------------------
   6. Inputs (mobile: 48 px, 16 px font to prevent iOS zoom)
   -------------------------------------------------------------------------- */
.input {
    height: 48px;
    padding: 0 14px;
    border-radius: var(--md-radius-lg);
    border: 1px solid var(--md-outline-variant);
    background: var(--md-surface);
    font-size: 16px;
    color: var(--md-on-surface);
    width: 100%;
    min-height: var(--tap-min);
    transition: border-color 0.12s, box-shadow 0.12s;
}
.input:hover { border-color: var(--md-outline); }
.input:focus { outline: none; border-color: var(--md-primary); box-shadow: 0 0 0 3px rgba(26,86,50,0.12); }
.input::placeholder { color: var(--md-on-surface-variant); opacity: 0.6; }

.input-search {
    padding-left: 40px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%235a6660'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
}

/* Form rows — mobile: stacked */
.form-row { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; }
.form-row .form-label { font-size: 13px; font-weight: 500; color: var(--md-on-surface-variant); text-align: left; }

/* --------------------------------------------------------------------------
   7. Cards (mobile: full-width, generous radius)
   -------------------------------------------------------------------------- */
.card {
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-radius-xl);
    transition: border-color 0.12s, box-shadow 0.12s;
}
.card-body { padding: 16px; }
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--md-outline-variant);
}
.card-title { font-size: 15px; font-weight: 600; margin: 0; }
.card-hover:hover { border-color: var(--md-outline); box-shadow: var(--shadow-md); }

.card-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.stat-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* --------------------------------------------------------------------------
   8. Data tables — mobile base: rows become cards
   -------------------------------------------------------------------------- */
.data-table { display: block; width: 100%; border: 0; }
.data-table thead { display: none; }
.data-table tbody,
.data-table tr,
.data-table td { display: block; width: 100%; }
.data-table tr {
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-radius-lg);
    padding: 12px;
    margin-bottom: 8px;
    box-shadow: var(--shadow-xs);
}
.data-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--md-outline-variant);
    font-size: 14px;
    text-align: right;
}
.data-table td:last-child { border-bottom: 0; }
.data-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--md-on-surface-variant);
    margin-right: 12px;
    text-align: left;
    flex-shrink: 0;
}
.data-table td:not([data-label])::before,
.data-table td[data-label=""]::before { display: none; }

/* --------------------------------------------------------------------------
   9. Badges & avatars
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--status-success-bg); color: var(--status-success-fg); }
.badge-warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.badge-danger  { background: var(--status-danger-bg);  color: var(--status-danger-fg); }
.badge-info    { background: var(--status-info-bg);    color: var(--status-info-fg); }

.avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--md-primary);
    flex-shrink: 0;
}
.avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.avatar-lg { width: 44px; height: 44px; font-size: 15px; }
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: 999px;
    background: var(--md-surface-bright);
    font-size: 13px;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   10. Sidebar (mobile hidden — structure defined here, shown in _enhance.css)
   -------------------------------------------------------------------------- */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.sidebar-brand-mark {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px; }
.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--md-radius);
    color: rgba(255,255,255,0.78);
    font-size: 14px;
    font-weight: 500;
    min-height: var(--tap-min);
    border-left: 3px solid transparent;
    transition: background 0.12s, color 0.12s;
}
.sidebar-nav .nav-link i { font-size: 18px; flex-shrink: 0; }
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-nav .nav-link.active {
    background: rgba(255,255,255,0.14);
    color: #fff;
    border-left-color: var(--md-accent);
}
.sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.12);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sidebar-user-info { display: flex; align-items: center; gap: 12px; color: #fff; }
.sidebar-user-info .avatar { background: rgba(255,255,255,0.2); }

/* --------------------------------------------------------------------------
   11. Modals — mobile: bottom sheet
   -------------------------------------------------------------------------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: fade-in 0.15s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
    width: 100%;
    background: var(--md-surface);
    border-radius: var(--md-radius-2xl) var(--md-radius-2xl) 0 0;
    padding: 20px;
    max-height: 90dvh;
    overflow-y: auto;
    animation: sheet-up 0.25s cubic-bezier(0.2,0,0,1);
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* --------------------------------------------------------------------------
   12. Drawers — mobile: full-screen
   -------------------------------------------------------------------------- */
.drawer {
    position: fixed;
    inset: 0;
    background: var(--md-surface);
    z-index: 200;
    overflow-y: auto;
    animation: slide-up 0.25s cubic-bezier(0.2,0,0,1);
}
@keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* --------------------------------------------------------------------------
   13. Dropdowns
   -------------------------------------------------------------------------- */
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 4px;
    z-index: 60;
}
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--md-radius);
    font-size: 15px;
    color: var(--md-on-surface);
}
.dropdown-item:hover { background: rgba(0,0,0,0.05); }
.dropdown-item.danger { color: var(--md-error); }
.dropdown-sep { height: 1px; background: var(--md-outline-variant); margin: 4px 0; }

/* --------------------------------------------------------------------------
   14. Tabs — mobile: horizontal scroll
   -------------------------------------------------------------------------- */
.tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid var(--md-outline-variant);
    margin-bottom: 16px;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    flex-shrink: 0;
    height: 44px;
    padding: 0 14px;
    border-radius: var(--md-radius) var(--md-radius) 0 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--md-on-surface-variant);
    position: relative;
    white-space: nowrap;
}
.tab:hover { color: var(--md-on-surface); }
.tab.active { color: var(--md-primary); font-weight: 600; }
.tab.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--md-primary);
    border-radius: 1px 1px 0 0;
}

/* --------------------------------------------------------------------------
   15. Skeletons
   -------------------------------------------------------------------------- */
.skeleton {
    background: linear-gradient(90deg,
        var(--md-surface-bright) 25%,
        var(--md-outline-variant) 50%,
        var(--md-surface-bright) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--md-radius-sm);
}
@keyframes skeleton-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
.skeleton-text { height: 12px; width: 100%; }
.skeleton-text.short { width: 60%; }
.skeleton-avatar { width: 32px; height: 32px; border-radius: 50%; }
.skeleton-row { display: flex; align-items: center; gap: 12px; padding: 12px; }

/* --------------------------------------------------------------------------
   16. Empty states
   -------------------------------------------------------------------------- */
.empty-state { padding: 48px 24px; text-align: center; color: var(--md-on-surface-variant); }
.empty-icon {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    border-radius: var(--md-radius-xl);
    background: var(--md-surface-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.empty-state h3 { font-size: 16px; font-weight: 600; color: var(--md-on-surface); margin-bottom: 4px; }
.empty-state p { font-size: 14px; margin-bottom: 16px; }

/* --------------------------------------------------------------------------
   17. Command palette — mobile: full-screen search page
   -------------------------------------------------------------------------- */
.cmdk-backdrop {
    position: fixed;
    inset: 0;
    background: var(--md-surface);
    z-index: 300;
    display: none;
    flex-direction: column;
    animation: slide-up 0.2s cubic-bezier(0.2,0,0,1);
}
.cmdk-backdrop.open { display: flex; }
.cmdk {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--md-surface);
}
.cmdk-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--md-outline-variant);
    min-height: 56px;
    padding-top: calc(10px + env(safe-area-inset-top));
}
.cmdk-close, .cmdk-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 6px;
    font-size: 15px;
    color: var(--md-primary);
    font-weight: 500;
}
.cmdk-search-icon { display: none; color: var(--md-on-surface-variant); font-size: 18px; }
.cmdk-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    color: var(--md-on-surface);
}
.cmdk-input::placeholder { color: var(--md-on-surface-variant); opacity: 0.7; }
.cmdk-results { overflow-y: auto; padding: 8px; flex: 1; }
.cmdk-section {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--md-on-surface-variant);
    padding: 12px 12px 4px;
}
.cmdk-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 8px 12px;
    border-radius: var(--md-radius);
    font-size: 15px;
    cursor: pointer;
    color: var(--md-on-surface);
}
.cmdk-item.active, .cmdk-item:hover { background: var(--md-surface-2); }
.cmdk-item i { color: var(--md-on-surface-variant); font-size: 18px; }
.cmdk-item .cmdk-item-label { flex: 1; }
.cmdk-item .cmdk-hint { color: var(--md-on-surface-variant); font-size: 12px; }
.cmdk-empty { padding: 40px; text-align: center; color: var(--md-on-surface-variant); }
.cmdk-footer { display: none; }   /* no keyboard hints on mobile */
.kbd { display: none; }            /* kbd chips only on desktop */

/* --------------------------------------------------------------------------
   18. Dropzone
   -------------------------------------------------------------------------- */
.dropzone-wrapper { margin-bottom: 16px; }
.dropzone-native-input { display: none !important; }
.dropzone-area {
    border: 2px dashed #c0c9c1;
    border-radius: var(--md-radius-lg);
    padding: 28px 16px;
    text-align: center;
    cursor: pointer;
    background: #f8faf8;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background-color 0.15s;
}
.dropzone-area:hover { border-color: var(--md-primary); background: #f0f7f2; }
.dropzone-area.dropzone-active { border-color: var(--md-primary); background: #e8f5e9; }
.dropzone-icon { font-size: 2rem; color: var(--md-primary); display: block; margin-bottom: 8px; }
.dropzone-text { font-size: 14px; }
.dropzone-hint { margin-top: 4px; font-size: 12px; color: var(--md-on-surface-variant); }
.dropzone-preview {
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-radius-lg);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.dropzone-image-preview { width: 64px; height: 64px; object-fit: cover; border-radius: var(--md-radius); flex-shrink: 0; }
.dropzone-file-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }

/* --------------------------------------------------------------------------
   19. Utilities
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 16px; }
.text-muted-sm { font-size: 13px; color: var(--md-on-surface-variant); }
.divider { height: 1px; background: var(--md-outline-variant); margin: 12px 0; }
.stack-sm > * + * { margin-top: 8px; }
.gallery-section { margin-bottom: 40px; }
.gallery-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Bootstrap interop — keep existing templates working */
.card .table { font-size: 14px; }
.card .table th { font-weight: 600; color: var(--md-on-surface-variant); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
.alert { border-radius: var(--md-radius-lg); border: 0; }
.alert-success { background: var(--status-success-bg); color: var(--status-success-fg); }
.alert-danger, .alert-error { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.alert-warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.alert-info { background: var(--status-info-bg); color: var(--status-info-fg); }