/*
 * ============================================================================
 * medreminder.css — Birthday Reminder admin panel theme.
 * Replicates the VISUAL DESIGN of the BlockerMode "MedReminder" admin panel
 * (clean, green-accent, light sidebar, rounded cards, light/dark toggle).
 * Own branding + own markup/logic — only the look is replicated.
 * Loaded on top of Bootstrap's grid; provides the whole shell + components.
 * ============================================================================ */

:root {
    --bg: #f4f6f8;
    --surface: #ffffff;
    --surface-2: #fafbfc;
    --border: #e7e9ee;
    --text: #101828;
    --muted: #667085;
    --faint: #98a2b3;
    --accent: #16a34a;
    --accent-strong: #15803d;
    --accent-weak: #e9f7ef;
    --accent-line: #22c55e;
    --danger: #ef4444;
    --danger-weak: #fdecec;
    --sidebar: #ffffff;
    --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.04);
    --radius: 16px;
    --sidebar-w: 264px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body.dark-mode {
    --bg: #0f1115;
    --surface: #171a20;
    --surface-2: #1b1f26;
    --border: #262b33;
    --text: #e7eaef;
    --muted: #98a1ad;
    --faint: #6b7280;
    --accent: #22c55e;
    --accent-strong: #4ade80;
    --accent-weak: rgba(34,197,94,.14);
    --accent-line: #22c55e;
    --danger: #f87171;
    --danger-weak: rgba(248,113,113,.12);
    --sidebar: #14171c;
    --shadow: none;
}

* { box-sizing: border-box; }
body {
    margin: 0; background: var(--bg); color: var(--text);
    font-family: var(--font); font-size: 14px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }

/* ---- Shell layout ---- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
    background: var(--sidebar); border-right: 1px solid var(--border);
    position: fixed; inset: 0 auto 0 0; height: 100vh;
    display: flex; flex-direction: column; z-index: 40;
}
.app-main {
    margin-left: var(--sidebar-w); flex: 1 1 auto;
    display: flex; flex-direction: column; min-width: 0;
}
.app-content { padding: 26px 30px 60px; }
@media (max-width: 991px) {
    .sidebar { transform: translateX(-100%); transition: transform .2s; }
    .sidebar.open { transform: none; }
    .app-main { margin-left: 0; }
}

/* ---- Sidebar brand ---- */
.brand { display: flex; align-items: center; gap: 12px; padding: 20px 20px 16px; }
.brand-logo {
    width: 42px; height: 42px; border-radius: 12px; flex: 0 0 42px;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700;
}
.brand-name { font-weight: 700; font-size: 16px; color: var(--text); line-height: 1.15; }
.brand-sub { font-size: 12px; color: var(--faint); }

/* ---- Sidebar menu ---- */
.side-scroll { flex: 1 1 auto; overflow-y: auto; padding: 6px 12px; }
.side-scroll::-webkit-scrollbar { width: 6px; }
.side-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
.menu-group { font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
    color: var(--faint); font-weight: 600; padding: 14px 12px 6px; }
.menu-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 2px 0;
    border-radius: 10px; color: var(--muted); font-weight: 500; transition: background .12s, color .12s;
}
.menu-item i { font-size: 19px; }
.menu-item:hover { background: var(--surface-2); color: var(--text); }
body.dark-mode .menu-item:hover { background: rgba(255,255,255,.04); }
.menu-item.active { background: var(--accent-weak); color: var(--accent-strong); font-weight: 600; }
.menu-item.active i { color: var(--accent); }
.side-foot { padding: 14px 20px; font-size: 12px; color: var(--faint); border-top: 1px solid var(--border); }

/* ---- Topbar ---- */
.topbar {
    height: 68px; display: flex; align-items: center; gap: 16px;
    padding: 0 30px; border-bottom: 1px solid var(--border);
    background: var(--bg); position: sticky; top: 0; z-index: 30;
}
.topbar-title { font-size: 21px; font-weight: 700; margin: 0; }
.topbar-spacer { flex: 1 1 auto; }
.topbar-search {
    display: flex; align-items: center; gap: 8px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px;
    color: var(--faint); min-width: 230px;
}
.topbar-search input { border: 0; background: transparent; outline: none; color: var(--text); width: 100%; font-size: 13px; }
.kbd { border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; font-size: 11px; color: var(--muted); }
.icon-btn {
    width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--surface); color: var(--muted); display: flex; align-items: center;
    justify-content: center; cursor: pointer; position: relative; font-size: 20px;
}
.icon-btn:hover { color: var(--text); }
.icon-badge {
    position: absolute; top: -5px; right: -5px; background: var(--danger); color: #fff;
    font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.topbar-user { display: flex; align-items: center; gap: 10px; }
.user-meta { text-align: right; line-height: 1.1; }
.user-name { font-weight: 600; font-size: 14px; }
.user-role { font-size: 12px; color: var(--faint); }

/* ---- Cards ---- */
.card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); color: var(--text);
}
.card-body { padding: 22px; }
.card-title { font-weight: 600; font-size: 15px; margin: 0 0 16px; }

/* Stat card */
.stat-card { padding: 22px 24px; }
.stat-label { color: var(--muted); font-size: 13.5px; font-weight: 500; margin-bottom: 12px; }
.stat-value { font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.stat-sub { color: var(--faint); font-size: 12.5px; margin-top: 10px; }
.stat-sub .up { color: var(--accent); font-weight: 600; }

/* ---- Tables ---- */
.table { width: 100%; border-collapse: collapse; color: var(--text); font-size: 13.5px; }
.table thead th {
    text-align: left; font-weight: 600; color: var(--muted); font-size: 12px;
    text-transform: uppercase; letter-spacing: .03em; padding: 12px 16px;
    border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-2); }
.table-wrap { overflow-x: auto; }

/* ---- Pagination (Bootstrap 5 markup, themed) ---- */
.table-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; padding-top: 14px; margin-top: 4px;
    border-top: 1px solid var(--border);
}
.table-footer .result-count { color: var(--muted); font-size: 13px; }
.pagination { display: flex; list-style: none; margin: 0; padding: 0; gap: 6px; }
.pagination .page-item .page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); color: var(--text);
    font-size: 14px; font-weight: 500; text-decoration: none; transition: none;
}
.pagination .page-item .page-link:hover { background: var(--surface-2); }
.pagination .page-item.active .page-link {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.pagination .page-item.disabled .page-link {
    opacity: .45; pointer-events: none; background: var(--surface-2);
}
/* Bootstrap injects SVG chevrons for prev/next; keep them centred + on-theme. */
.pagination .page-link svg { width: 14px; height: 14px; fill: currentColor; }
/* Hide the tiny screen-reader-only text Bootstrap adds inside links. */
.pagination .page-link .visually-hidden { display: none; }

/* ---- Badges ---- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; }
.badge-green { background: var(--accent-weak); color: var(--accent-strong); }
.badge-gray { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.badge-red { background: var(--danger-weak); color: var(--danger); }
.badge-blue { background: rgba(59,130,246,.12); color: #2563eb; }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 10px;
    font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
/* Force green in every state — overrides Bootstrap's blue .btn-primary:hover/focus/active. */
.btn-primary,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active,
.btn-primary:disabled {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.btn-primary { transition: background-color .12s, box-shadow .12s; }
/* Hover: same green, just a touch darker, with a soft shadow. */
.btn-primary:hover {
    background-color: var(--accent-strong) !important;
    border-color: var(--accent-strong) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(22,163,74,.32) !important;
}
.btn-outline,
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
    background-color: var(--surface); border-color: var(--border); color: var(--text); box-shadow: none;
}
.btn-danger-outline { background: transparent; border-color: var(--border); color: var(--danger); }
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* ---- Forms ---- */
.form-label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--text); }
.form-control, .form-select {
    width: 100%; padding: 10px 13px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); color: var(--text); font-size: 14px; font-family: var(--font); outline: none;
}
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.form-control::placeholder { color: var(--faint); }
.form-text { color: var(--faint); font-size: 12.5px; margin-top: 5px; }
textarea.form-control { min-height: 90px; resize: vertical; }

/* Toggle switch */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { display: none; }
.switch span { position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: .15s; cursor: pointer; }
.switch span::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%; transition: .15s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::before { transform: translateX(20px); }

/* ---- Page title bar ---- */
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-head h4 { font-size: 20px; font-weight: 700; margin: 0; }

/* ---- Alerts ---- */
.alert { border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; border: 1px solid transparent; }
.alert-success { background: var(--accent-weak); color: var(--accent-strong); border-color: var(--accent-weak); }
.alert-danger { background: var(--danger-weak); color: var(--danger); }

/* ---- Utility ---- */
.grid-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
@media (max-width: 1100px) { .grid-cards { grid-template-columns: repeat(2, 1fr); } .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grid-cards { grid-template-columns: 1fr; } }
.mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 22px; } .mt-3 { margin-top: 16px; }
.text-muted { color: var(--muted) !important; } .text-faint { color: var(--faint); }
.d-flex { display: flex; } .align-center { align-items: center; } .gap-2 { gap: 10px; } .gap-3 { gap: 16px; }
.justify-between { justify-content: space-between; } .flex-wrap { flex-wrap: wrap; } .text-end { text-align: right; }
.w-100 { width: 100%; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-weak);
    color: var(--accent-strong); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }

/* ============================================================================
   BOOTSTRAP BLUE OVERRIDES
   Bootstrap's default $primary is blue (#0d6efd) and it leaks through on any
   component we hadn't explicitly restyled — checkboxes/switches, outline
   buttons, .bg-primary icon circles, focus rings, links. Everything below
   re-points those at the panel's green accent so the theme stays consistent.
   ========================================================================== */

/* Let Bootstrap's own variables carry the accent wherever we missed a rule. */
:root {
    --bs-primary: #16a34a;
    --bs-primary-rgb: 22, 163, 74;
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent-strong);
    --bs-focus-ring-color: var(--accent-weak);
}

/* Checkboxes, radios and switches (Users "premium only", App-update maintenance). */
.form-check-input:checked {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.form-check-input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-weak) !important;
}
.form-check-input:focus:not(:checked) {
    /* Bootstrap paints a blue knob into the switch via an inline SVG. */
    background-image: none !important;
}

/* Outline buttons (Subscriptions status filter tabs). */
.btn-outline-primary {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* Solid/soft primary surfaces (stat-card icon circles on Dashboard + Revenue). */
.bg-primary { background-color: var(--accent) !important; }
.bg-primary.bg-soft { background-color: var(--accent-weak) !important; }
.text-primary { color: var(--accent) !important; }
.border-primary { border-color: var(--accent) !important; }
.link-primary { color: var(--accent) !important; }

/* Any remaining focus ring (Bootstrap 5.3 uses this on most interactive bits). */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.page-link:focus {
    box-shadow: 0 0 0 3px var(--accent-weak) !important;
    outline: none !important;
}

/* Misc components that default to blue. */
.progress-bar { background-color: var(--accent) !important; }
.spinner-border.text-primary { color: var(--accent) !important; }
.nav-pills .nav-link.active,
.list-group-item.active {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.alert-info {
    background: var(--accent-weak) !important;
    border-color: var(--accent) !important;
    color: var(--accent-strong) !important;
}

/* ---- Checkboxes / radios ------------------------------------------------
   Bootstrap's default unchecked box is white with a very light grey border,
   which all but disappears on our white cards (and looked "missing" on the
   Users page "Premium only" filter). Style it explicitly so the box is always
   visible in both themes, and give the checked state the green accent + tick.
   ------------------------------------------------------------------------ */
.form-check {
    display: flex; align-items: center; gap: 8px;
    padding-left: 0; min-height: auto; margin-bottom: 0;
}
.form-check .form-check-input { float: none; margin-left: 0; margin-top: 0; }

.form-check-input {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; flex: 0 0 18px;
    border: 1.5px solid var(--muted);
    border-radius: 5px;
    background-color: var(--surface);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 72%;
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:hover { border-color: var(--accent); }

.form-check-input:checked {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    /* White tick, inlined so it needs no extra request. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
.form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.form-check-label { cursor: pointer; user-select: none; }

/* Search box: show a spinner-ish hint while live search is pending. */
.is-searching { opacity: .65; }

/* ---- Topbar page-search suggestions ------------------------------------ */
.topbar-search { position: relative; }
.search-suggestions {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    margin: 0; padding: 6px; list-style: none; z-index: 60;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.14);
    max-height: 340px; overflow-y: auto;
}
.search-suggestions li {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; border-radius: 9px; cursor: pointer;
    color: var(--text); font-size: 13.5px;
}
.search-suggestions li i { color: var(--muted); font-size: 16px; }
.search-suggestions li .sug-group {
    margin-left: auto; font-size: 11.5px; color: var(--faint);
}
/* Highlighted by hover OR by arrow-key navigation. */
.search-suggestions li:hover,
.search-suggestions li.is-active { background: var(--accent-weak); }
.search-suggestions li:hover i,
.search-suggestions li.is-active i { color: var(--accent); }
.search-suggestions li mark {
    background: transparent; color: var(--accent-strong); font-weight: 700; padding: 0;
}
.search-suggestions .sug-empty {
    color: var(--faint); cursor: default; justify-content: center;
}
.search-suggestions .sug-empty:hover { background: transparent; }

/* ---- Stat card icon ------------------------------------------------------
   A soft green circle holding the metric's icon, sitting to the right of the
   label/value. Used by the Revenue cards; the Dashboard cards stay icon-less.
   -------------------------------------------------------------------------- */
.stat-card-row { display: flex; align-items: flex-start; gap: 14px; }
.stat-card-row > .stat-card-main { flex: 1 1 auto; min-width: 0; }
.stat-icon {
    flex: 0 0 44px; width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--accent-weak);
    color: var(--accent-strong);
    font-size: 22px;
}