@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* =========================================================================
   Iberry / mikifi — professional dashboard design system (light theme)
   All legacy class names + CSS variables preserved; values refined.
   ========================================================================= */
:root {
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --primary-rgb: 79, 70, 229;
    --primary-soft: #eef0fe;
    --primary-line: #dfe1fc;

    --bg-main: #f6f7fb;
    --bg-card: #ffffff;
    --bg-subtle: #f3f5fb;
    --bg-hover: #eceffa;

    --text-main: #161824;
    --text-muted: #666d84;
    --text-subtle: #9aa0b6;

    --border: #e7e9f3;
    --border-strong: #d7dbeb;

    --success: #127a58; --success-weak: #e7f4ee;
    --warning: #9a5b0b; --warning-weak: #f8efe0;
    --danger:  #bf2f4d; --danger-weak: #fbedf0;
    --info:    #2258c9; --info-weak: #e9f0fd;

    /* Sidebar is a hair cooler than the cards so the nav rail reads as chrome
       rather than content. Width is a variable so the collapse toggle can
       animate it from one place. */
    --bg-sidebar: #fbfcfe;
    --sidebar-w: 258px;

    --radius-sm: 9px;
    --radius: 12px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 2px rgba(20,24,40,.04), 0 2px 8px rgba(20,24,40,.05);
    --shadow-md: 0 4px 14px rgba(20,24,40,.07), 0 2px 6px rgba(20,24,40,.05);
    --shadow-lg: 0 16px 40px rgba(20,24,40,.14);

    /* legacy aliases */
    --glass-blur: blur(12px);
    --glass-shadow: 0 10px 40px rgba(20,24,40,.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

body {
    background: var(--bg-main);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14.5px;
    line-height: 1.5;
}

/* Typography */
h1, h2, h3, h4 { color: var(--text-main); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; }
a { color: var(--primary); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Buttons: restrained hierarchy ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.6rem 1.05rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.15s ease, border-color 0.15s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 6px 16px -8px var(--primary);
}
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 10px 22px -8px var(--primary); }

.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #0e6547; }

.btn-outline { background: var(--bg-card); border: 1px solid var(--border-strong); color: var(--text-main); }
.btn-outline:hover { background: var(--bg-hover); border-color: var(--text-subtle); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #a52642; }

.btn-sm { padding: 0.4rem 0.75rem; font-size: 0.8rem; border-radius: 7px; }

/* ---------- Native form controls, made professional ---------- */
select, .form-control, input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="number"], input[type="search"], textarea {
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--text-main);
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0.62rem 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--text-subtle); }
select:focus, .form-control:focus, input:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

/* Custom styled <select> with chevron */
select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 2.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666d84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
}

/* File inputs — style the selector button */
input[type="file"] {
    font-size: 0.88rem;
    color: var(--text-muted);
    border: 1.5px dashed var(--border-strong);
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.85rem;
    width: 100%;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
input[type="file"]:hover { border-color: var(--primary); background: var(--primary-soft); }
input[type="file"]::file-selector-button {
    font: inherit;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.45rem 0.9rem;
    margin-right: 0.9rem;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: var(--bg-card);
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.15s ease;
}
input[type="file"]::file-selector-button:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Login form label reset (uppercased) */
.form-group { margin-bottom: 1.3rem; }
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.76rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.alert {
    padding: 0.8rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.3rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.alert-error { background: var(--danger-weak); border: 1px solid rgba(191,47,77,.22); color: #a01f3a; }

/* ---------- Login page ---------- */
.login-container {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden; padding: 1.5rem;
    background: radial-gradient(900px circle at 12% 10%, #eef0ff 0%, transparent 42%),
                radial-gradient(900px circle at 90% 90%, #e9f2ff 0%, transparent 42%),
                var(--bg-main);
}
.orb { position: absolute; border-radius: 50%; filter: blur(90px); z-index: 0; animation: float 12s infinite ease-in-out alternate; }
.orb-1 { width: 320px; height: 320px; background: rgba(99,102,241,.28); top: 8%; left: 16%; }
.orb-2 { width: 400px; height: 400px; background: rgba(56,189,248,.22); bottom: 8%; right: 8%; animation-delay: -6s; }
@keyframes float { 0% { transform: translateY(0) scale(1);} 100% { transform: translateY(-28px) scale(1.06);} }

.login-card {
    background: rgba(255,255,255,.95);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.6rem;
    width: 100%; max-width: 410px; z-index: 1;
    box-shadow: var(--shadow-lg);
}
.login-card h2 { margin-bottom: 0.35rem; font-size: 1.65rem; font-weight: 800; }
.login-card p { color: var(--text-muted); margin-bottom: 1.9rem; font-size: 0.95rem; }

/* ---------- Dashboard shell ---------- */
.dashboard-wrapper { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    padding: 1.15rem 0.85rem;
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    transition: width 0.22s cubic-bezier(.4,0,.2,1), padding 0.22s cubic-bezier(.4,0,.2,1);
}
.brand {
    font-size: 1.22rem; font-weight: 800; color: var(--text-main);
    margin-bottom: 1.4rem; padding: 0.3rem 0.5rem;
    display: flex; align-items: center; gap: 10px; letter-spacing: -0.02em;
    white-space: nowrap; overflow: hidden;
}
.brand span { color: var(--primary); }
.brand i { color: var(--primary); }

/* Brand lockup: the Iberry mark replaces the generic wifi glyph. */
.brand-logo {
    width: 34px; height: 34px;
    object-fit: contain; flex-shrink: 0;
    border-radius: 8px; background: #fff;
    padding: 2px;
    border: 1px solid var(--border);
}
.brand-text { display: inline-flex; align-items: baseline; gap: 5px; }

.login-logo {
    display: block; margin: 0 auto 1.1rem;
    width: 76px; height: 76px; object-fit: contain;
    border-radius: 14px; background: #fff; padding: 6px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.nav-links { list-style: none; display: flex; flex-direction: column; gap: 0.15rem; }
.nav-item a {
    display: flex; align-items: center;
    padding: 0.62rem 0.7rem;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
    font-weight: 550; font-size: 0.9rem; gap: 11px;
}
.nav-item a i { width: 18px; height: 18px; opacity: 0.9; flex-shrink: 0; }
.nav-item a:hover { background: var(--bg-hover); color: var(--text-main); }
.nav-item a.active { background: var(--primary); color: #fff; font-weight: 600; box-shadow: 0 6px 16px -8px var(--primary); }
.nav-item a.active i { opacity: 1; }
.nav-label { white-space: nowrap; overflow: hidden; }

/* ---------- Collapsible sidebar (desktop) ---------- */
.sidebar-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex-shrink: 0;
    margin-right: 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sidebar-toggle:hover { background: var(--bg-hover); color: var(--primary); border-color: var(--primary-line); }
.sidebar-toggle i { width: 17px; height: 17px; }
/* Restoring a saved collapsed state must not animate on first paint. */
body.no-sidebar-anim .sidebar { transition: none !important; }

@media (min-width: 769px) {
    body.sidebar-collapsed { --sidebar-w: 76px; }
    body.sidebar-collapsed .sidebar { padding-left: 0.6rem; padding-right: 0.6rem; }

    /* Hide every label, keep every icon. */
    body.sidebar-collapsed .nav-label,
    body.sidebar-collapsed .brand-text,
    body.sidebar-collapsed .user-meta,
    body.sidebar-collapsed .logout-label { display: none; }

    body.sidebar-collapsed .brand { justify-content: center; padding: 0.3rem 0; }
    body.sidebar-collapsed .nav-item a { justify-content: center; padding: 0.68rem 0; gap: 0; }
    body.sidebar-collapsed .user-info { justify-content: center; padding: 0; }
    body.sidebar-collapsed .sidebar-footer .btn { padding-left: 0; padding-right: 0; }
    body.sidebar-collapsed .sidebar-footer .btn i { margin-right: 0 !important; }

    /* Labels are gone, so the icon needs to name itself on hover. */
    body.sidebar-collapsed .nav-item a { position: relative; }
    body.sidebar-collapsed .nav-item a::after {
        content: attr(data-label);
        position: absolute; left: calc(100% + 12px); top: 50%;
        transform: translateY(-50%) translateX(-4px);
        background: var(--text-main); color: #fff;
        padding: 6px 11px; border-radius: var(--radius-sm);
        font-size: 0.78rem; font-weight: 600; white-space: nowrap;
        opacity: 0; pointer-events: none; z-index: 60;
        box-shadow: var(--shadow-md);
        transition: opacity 0.15s ease, transform 0.15s ease;
    }
    body.sidebar-collapsed .nav-item a:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.sidebar-footer { margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--border); }
.user-info { display: flex; align-items: center; gap: 10px; margin-bottom: 0.9rem; padding: 0 0.3rem; }
.avatar {
    width: 38px; height: 38px;
    background: linear-gradient(135deg, var(--primary), #7b74ff);
    color: #fff; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; flex-shrink: 0;
    box-shadow: 0 4px 12px -4px var(--primary);
}

.main-content { flex: 1; padding: 1.75rem 2.25rem; overflow-y: auto; min-width: 0; }

.desktop-top-bar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border);
}
.breadcrumb { font-size: 0.98rem; color: var(--text-muted); }
.breadcrumb strong { color: var(--text-main); font-weight: 650; }

.btn-logout-top {
    display: flex; align-items: center; gap: 8px;
    padding: 0.5rem 0.9rem; background: var(--bg-card);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    color: var(--text-main); font-size: 0.85rem; font-weight: 600;
    transition: all 0.2s ease; box-shadow: var(--shadow-sm);
}
.btn-logout-top:hover { background: var(--danger); color: #fff; border-color: var(--danger); box-shadow: 0 6px 16px -8px var(--danger); }
.btn-logout-top i { width: 16px; height: 16px; }

.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.6rem; gap: 1rem; flex-wrap: wrap; }
.page-header h2 { font-size: 1.45rem; }

/* ---------- Cards & stat tiles ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.1rem; margin-bottom: 1.6rem; }

.stat-card, .card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.35rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card h3 { font-size: 1.9rem; margin-top: 0.35rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat-card span { color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 650; }
/* Clean tiles: neutralize legacy inline colored top-stripes across all pages */
.stat-card { border-top: 1px solid var(--border) !important; }

/* ---------- Tables ---------- */
.table-container {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
    box-shadow: var(--shadow-sm);
}
.table-header {
    padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.8rem;
}
/* Wide data tables: a plain width:100% table just squeezes its columns and the
   container's overflow-x never triggers, so no horizontal scrollbar appears and
   dense columns (action buttons) wrap into an unreadable stack. Giving the table
   a min-width lets it genuinely overflow, which is what turns the scrollbar on. */
table.table-wide { min-width: 1180px; }

/* A badge is a single token — letting it wrap mid-value ("Exp: / 2026-08- / 09
   12:27") is what makes a dense table look broken. */
.badge { white-space: nowrap; }

/* Make that scrollbar an obvious affordance rather than a hairline. */
.table-container { scrollbar-width: thin; scrollbar-color: var(--border-strong) var(--bg-subtle); }
.table-container::-webkit-scrollbar { height: 12px; }
.table-container::-webkit-scrollbar-track {
    background: var(--bg-subtle);
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
}
.table-container::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border: 3px solid var(--bg-subtle);
    border-radius: 8px;
}
.table-container::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }

/* Keep the header visible while scrolling a long room list. */
.table-container table.table-wide thead th { position: sticky; top: 0; z-index: 2; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.85rem 1.25rem; text-align: left; border-bottom: 1px solid var(--border); }
th {
    background: var(--bg-subtle);
    color: var(--text-subtle);
    font-weight: 700; font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.06em;
}
td { font-size: 0.9rem; }
tbody tr { transition: background 0.15s ease; }
tr:hover td { background: var(--bg-subtle); }
tr:last-child td { border-bottom: none; }

/* ---------- Row action toolbars ---------- */
/* Actions must stay on one line; wrapping is what makes them look "not properly
   shown". The column refuses to shrink and the table scrolls instead. */
th.col-actions, td.col-actions { white-space: nowrap; width: 1%; }
.row-actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.row-actions form { display: inline-flex; margin: 0; }

/* Pin the actions column to the right edge of the scroll container.

   table.table-wide is 1180px by design, so on any normal laptop the Actions
   column sits off-screen — and it holds Send SMS, the control reception uses
   more than anything else on the page. Reaching it meant scrolling sideways
   once per guest. Pinning it keeps it on screen at every width; the shadow on
   its left edge shows the row continues underneath. */
.table-container table.table-wide th.col-actions,
.table-container table.table-wide td.col-actions {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--bg-card);
    box-shadow: -10px 0 12px -10px rgba(15, 23, 42, 0.25);
}
/* The header cell is pinned on BOTH axes, so it has to outrank the rest of its
   own sticky header row and the body cells that scroll under it. */
.table-container table.table-wide thead th.col-actions {
    top: 0;
    z-index: 4;
    background: var(--bg-subtle);
}
/* "tr:hover td" loses to the class selector above, so without this the pinned
   cell stays card-coloured while the rest of the row lights up — which reads as
   the column being detached from its row. */
.table-container table.table-wide tbody tr:hover td.col-actions {
    background: var(--bg-subtle);
}
@media (max-width: 768px) {
    /* On a phone the pinned column would otherwise eat most of the screen and
       leave nothing to scroll. Drop the labels and keep the icons: all four
       controls fit in about a third of the width. Feather replaces each <i>
       with an <svg> carrying explicit width/height, so font-size:0 removes the
       label without shrinking the glyph. */
    .table-container table.table-wide td.col-actions .btn-sm {
        font-size: 0;
        padding: 7px 9px;
    }
    .table-container table.table-wide td.col-actions .btn-sm svg { margin-right: 0; }
}

.btn-sm {
    padding: 6px 11px;
    font-size: 0.75rem;
    font-weight: 650;
    border-radius: var(--radius-sm);
    line-height: 1.2;
    white-space: nowrap;
}
.btn-sm i, .btn-sm svg { width: 13px; height: 13px; margin-right: 5px; vertical-align: middle; }
.btn-sm.btn-icon { padding: 6px 9px; }
.btn-sm.btn-icon i, .btn-sm.btn-icon svg { margin-right: 0; }

/* ---------- Pagination ---------- */
.pagination-bar {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 0.9rem;
    margin-top: 1.1rem;
    padding: 0.85rem 1.1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.pagination-info { font-size: 0.84rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pagination-info strong { color: var(--text-main); font-weight: 700; }
.pagination-controls { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.page-btn {
    min-width: 34px; height: 34px;
    padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 0.82rem; font-weight: 650;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.page-btn:hover:not(:disabled):not(.active) { background: var(--bg-hover); border-color: var(--border-strong); }
.page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; cursor: default; }
.page-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.page-ellipsis { padding: 0 4px; color: var(--text-subtle); font-weight: 700; user-select: none; }

.page-size-select {
    height: 34px; padding: 0 30px 0 10px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background-color: var(--bg-card); color: var(--text-main);
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
}

@media (max-width: 640px) {
    .pagination-bar { flex-direction: column; align-items: stretch; }
    .pagination-controls { justify-content: center; }
    .pagination-info { text-align: center; }
}

/* ---------- Mobile header ---------- */
.mobile-header {
    display: none; justify-content: space-between; align-items: center;
    padding: 0.7rem 1.15rem; background: var(--bg-card);
    border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1000;
}
.mobile-header .brand { margin-bottom: 0; font-size: 1.1rem; }
.menu-toggle { background: none; border: none; color: var(--text-main); cursor: pointer; display: flex; align-items: center; }
.mobile-header-actions { display: flex; align-items: center; gap: 15px; }
.mobile-logout-btn { color: var(--text-muted); display: flex; align-items: center; transition: color 0.2s; }
.mobile-logout-btn:hover { color: var(--danger); }
.sidebar-mobile-header { display: none; }

/* ---------- Badges / status pills ---------- */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em;
}
.badge-waiting { background: var(--info-weak); color: var(--info); }
.badge-active { background: var(--success-weak); color: var(--success); }
.badge-used { background: var(--danger-weak); color: var(--danger); }

/* Utilities */
.flex { display: flex; } .items-center { align-items: center; }
.gap-2 { gap: 0.5rem; } .gap-4 { gap: 1rem; }
.flex-group { display: flex; gap: 1rem; } .mb-4 { margin-bottom: 1rem; }
.text-muted { color: var(--text-muted); }

/* ---------- Modals ---------- */
.modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(20,24,40,.5); backdrop-filter: blur(4px);
    z-index: 3000; align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.active { display: flex; }
.modal {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); width: 100%; max-width: 500px;
    max-height: 90vh; overflow-y: auto; padding: 1.7rem;
    box-shadow: var(--shadow-lg);
    animation: modalSlideIn 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.4rem; }
.modal-header h3 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-muted); line-height: 1; transition: color 0.2s; }
.modal-close:hover { color: var(--text-main); }
@keyframes modalSlideIn { from { opacity: 0; transform: translateY(-14px) scale(.98);} to { opacity: 1; transform: translateY(0) scale(1);} }

/* Spinner */
.spinner-small { width: 16px; height: 16px; border: 2px solid var(--border-strong); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Responsive ---------- */
/* Set the variable, not the width — otherwise this would beat the collapsed state. */
@media (max-width: 992px) { body { --sidebar-w: 220px; } .main-content { padding: 1.75rem; } }
@media (max-width: 768px) {
    .mobile-header { display: flex; }
    .sidebar { position: fixed; left: -100%; top: 0; bottom: 0; width: 280px; z-index: 2000; transition: left 0.3s ease; box-shadow: 24px 0 60px rgba(20,24,40,.14); height: 100vh; }
    .sidebar.active { left: 0; }
    .sidebar-mobile-header { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
    .menu-close { background: none; border: none; color: var(--text-muted); cursor: pointer; }
    .main-content { padding: 1.35rem 1rem; }
    .desktop-top-bar { display: none; }
    .page-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .page-header .btn { width: 100%; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 0.9rem; }
    .table-header { flex-direction: column; gap: 1rem; align-items: flex-start; }
    .modal { width: 95%; padding: 1.5rem; }
    .flex { flex-wrap: wrap; }
    .flex-group { flex-direction: column; gap: 0; }
    .modal .flex { flex-direction: column; gap: 0 !important; }
    .modal .form-group { width: 100% !important; }
    body.sidebar-open { overflow: hidden; }
    .login-card { padding: 2rem 1.5rem; width: 92%; }
}
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .nav-item a { padding: 0.6rem 0.8rem; }
    .brand { font-size: 1.2rem; }
}

/* ---------- Page-specific overrides (kept) ---------- */
.coupons-filter-bar { justify-content: space-between; align-items: center; }
@media (max-width: 768px) {
    .coupons-filter-bar { flex-direction: column; align-items: stretch; }
    .filter-tabs { overflow-x: auto; padding-bottom: 0.5rem; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
    .filter-tabs .btn { flex: 0 0 auto; }
    .search-and-actions { flex-direction: column; align-items: stretch; }
    .search-and-actions form, .search-and-actions input, .search-and-actions button { width: 100% !important; margin: 0; }
    .search-and-actions form { display: flex; gap: 10px; }
}
.portal-manage-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 992px) { .portal-manage-grid { grid-template-columns: 1fr; } }