/* =========================================================
   AstroPortal — Shivaa Speaks theme
   Primary Yellow: #f7c600  |  Charcoal: #1f1f1f
   Soft Gold: #fff2ae       |  White Cards: #ffffff
   ========================================================= */

:root {
    --ap-yellow: #f7c600;
    --ap-yellow-dark: #d6a700;
    --ap-yellow-light: #fff2ae;
    --ap-gold-soft: #fffaf0;
    --ap-surface: #fffef9;
    --ap-surface-strong: #ffffff;
    --ap-charcoal: #1f1f1f;
    --ap-charcoal-soft: #353535;
    --ap-text: #1f1f1f;
    --ap-muted: #6e6758;
    --ap-border: #ece3be;
    --ap-sidebar-bg: #fffdf8;
    --ap-sidebar-text: #2f2a21;
    --ap-shadow: 0 16px 36px rgba(31, 31, 31, 0.08);
    --ap-shadow-soft: 0 8px 20px rgba(31, 31, 31, 0.05);
    --ap-saffron: #d4651a;
}

html, body {
    height: 100%;
}

body {
    background:
        radial-gradient(circle at top left, rgba(247, 198, 0, 0.12), transparent 24%),
        linear-gradient(180deg, #fffaf0 0%, #fffdf8 42%, #fffefc 100%);
    color: var(--ap-text);
    font-family: 'Inter', 'Noto Sans', 'Noto Sans Gujarati', 'Noto Sans Devanagari', sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6,
.ap-heading {
    font-family: 'Playfair Display', 'Noto Serif Gujarati', 'Noto Serif Devanagari', serif;
    font-weight: 600;
    color: var(--ap-text);
}

/* Language-specific font overrides */
html[lang="hi-IN"] body { font-family: 'Noto Sans Devanagari', 'Inter', sans-serif; }
html[lang="gu-IN"] body { font-family: 'Noto Sans Gujarati', 'Inter', sans-serif; }
html[lang="hi-IN"] h1, html[lang="hi-IN"] h2, html[lang="hi-IN"] h3,
html[lang="hi-IN"] h4, html[lang="hi-IN"] h5, html[lang="hi-IN"] h6 {
    font-family: 'Noto Serif Devanagari', serif;
}
html[lang="gu-IN"] h1, html[lang="gu-IN"] h2, html[lang="gu-IN"] h3,
html[lang="gu-IN"] h4, html[lang="gu-IN"] h5, html[lang="gu-IN"] h6 {
    font-family: 'Noto Serif Gujarati', serif;
}

/* ---------- Layout shell ---------- */

.ap-shell {
    display: flex;
    min-height: 100vh;
}

.ap-sidebar {
    width: 240px;
    background: linear-gradient(180deg, #fffdf8 0%, #fff9ea 100%);
    color: var(--ap-sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid rgba(234, 223, 157, 0.72);
}

.ap-sidebar .ap-logo {
    padding: 14px 16px 12px;
    text-align: center;
    border-bottom: 1px solid rgba(234, 223, 157, 0.72);
}

.ap-brand-logo {
    display: block;
    width: 100%;
    height: auto;
    padding: 8px;
    background: linear-gradient(180deg, #ffcb0a 0%, #f7c600 100%);
    border: 1px solid rgba(214, 167, 0, 0.45);
    border-radius: 14px;
    object-fit: contain;
    box-shadow: 0 8px 18px rgba(214, 167, 0, 0.18);
}

.ap-brand-logo--sidebar {
    max-width: 100px;
    margin: 0 auto;
}

.ap-brand-logo--login {
    max-width: 240px;
    margin: 0 auto 18px;
}

/* (sidebar user block removed — user info lives in topbar dropdown) */

.ap-sidebar .ap-nav {
    flex: 1;
    padding: 18px 12px;
    overflow-y: auto;
}

.ap-sidebar .ap-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    color: var(--ap-sidebar-text);
    text-decoration: none;
    font-size: 14px;
    border-left: 0;
    border-radius: 14px;
    margin-bottom: 6px;
    transition: all 0.18s ease;
}

.ap-sidebar .ap-nav a:hover {
    background: rgba(247, 198, 0, 0.16);
    color: var(--ap-charcoal);
    transform: translateX(2px);
}

.ap-sidebar .ap-nav a.active {
    background: linear-gradient(90deg, rgba(247, 198, 0, 0.24), rgba(247, 198, 0, 0.08));
    color: var(--ap-charcoal);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--ap-yellow-dark);
}

.ap-sidebar .ap-nav-section {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    padding: 14px 14px 6px;
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ap-sidebar .ap-nav-icon {
    width: 22px;
    text-align: center;
    opacity: 0.75;
    font-size: 15px;
}

.ap-sidebar .ap-sidebar-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--ap-border);
    font-size: 12px;
    color: var(--ap-muted);
}

/* (sidebar-actions removed — lang + logout moved to topbar right) */

/* ---------- Main content ---------- */

.ap-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ap-topbar {
    background: rgba(255, 253, 246, 0.95);
    border-bottom: 1px solid rgba(234, 223, 157, 0.72);
    padding: 10px 20px 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 100;
}

.ap-topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ap-topbar .ap-page-title {
    font-family: 'Playfair Display', serif;
    font-size: 17px;
    margin: 0;
    color: var(--ap-text);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Topbar right cluster ── */
.ap-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Language button (compact icon + code) */
.ap-lang-btn {
    background: transparent;
    border: 1px solid var(--ap-border);
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ap-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background .15s, border-color .15s;
}
.ap-lang-btn:hover, .ap-lang-btn:focus {
    background: var(--ap-yellow-light);
    border-color: var(--ap-yellow-dark);
    color: var(--ap-charcoal);
    box-shadow: none;
}
.ap-lang-btn::after { margin-left: 2px; }
.ap-lang-icon { font-size: 13px; line-height: 1; }
.ap-lang-label { letter-spacing: .04em; }

/* Shared topbar dropdown menu */
.ap-topbar-menu {
    border: 1px solid var(--ap-border);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(31, 31, 31, .14);
    padding: 6px;
    min-width: 180px;
    background: #fff;
}
.ap-topbar-menu .dropdown-item {
    border-radius: 8px;
    font-size: 13.5px;
    padding: 8px 12px;
    color: var(--ap-charcoal);
}
.ap-topbar-menu .dropdown-item:hover, .ap-topbar-menu .dropdown-item:focus {
    background: var(--ap-yellow-light);
    color: var(--ap-charcoal);
}

/* User avatar button */
.ap-topbar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2f2a21 0%, #4a4030 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .03em;
    border: 2px solid var(--ap-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    /* remove Bootstrap default dropdown-toggle caret */
}
.ap-topbar-avatar::after { display: none; }
.ap-topbar-avatar:hover, .ap-topbar-avatar:focus {
    border-color: var(--ap-yellow);
    box-shadow: 0 0 0 3px rgba(247, 198, 0, .22);
    outline: none;
}

/* User dropdown */
.ap-user-dropdown {
    min-width: 220px;
}

/* Header row inside user dropdown */
.ap-user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 8px;
    pointer-events: none;
}
.ap-udh-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2f2a21 0%, #4a4030 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ap-udh-info { min-width: 0; }
.ap-udh-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ap-charcoal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ap-udh-role {
    font-size: 11px;
    color: var(--ap-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-top: 1px;
}

/* Menu items with SVG icon */
.ap-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: none;
}
.ap-menu-icon {
    width: 16px;
    height: 16px;
    opacity: .6;
    flex-shrink: 0;
}
.ap-menu-logout { color: #b91c1c !important; }
.ap-menu-logout .ap-menu-icon { opacity: .75; }
.ap-menu-logout:hover, .ap-menu-logout:focus {
    background: #fee2e2 !important;
    color: #b91c1c !important;
}

.ap-content {
    padding: 28px;
    flex: 1;
    background: transparent;
}

.ap-footer {
    background: rgba(255, 253, 246, 0.72);
    border-top: 1px solid rgba(234, 223, 157, 0.72);
    padding: 10px 24px;
    text-align: center;
    font-size: 12px;
    color: var(--ap-muted);
}

/* ---------- Language switcher (topbar version — see .ap-lang-btn above) ---------- */

/* ---------- Cards ---------- */

.ap-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(234, 223, 157, 0.86);
    border-left: 0;
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 16px;
    box-shadow: var(--ap-shadow);
}

.ap-card-header {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--ap-charcoal);
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(234, 223, 157, 0.9);
}

/* ---------- Buttons ---------- */

.btn-ap-primary {
    background: var(--ap-yellow);
    color: var(--ap-charcoal);
    border: 1px solid var(--ap-yellow);
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: 700;
    transition: all 0.15s;
}

.btn-ap-primary:hover {
    background: var(--ap-yellow-dark);
    border-color: var(--ap-yellow-dark);
    color: var(--ap-charcoal);
}

.btn-ap-outline {
    background: rgba(255, 255, 255, 0.84);
    color: var(--ap-charcoal);
    border: 1px solid rgba(214, 167, 0, 0.8);
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: var(--ap-shadow-soft);
}

.btn-ap-outline:hover {
    background: var(--ap-yellow);
    color: var(--ap-charcoal);
}

.btn-ap-saffron {
    background: var(--ap-saffron);
    color: #fff;
    border: 1px solid var(--ap-saffron);
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: var(--ap-shadow-soft);
    transition: all 0.15s;
}

.btn-ap-saffron:hover {
    background: #b0540a;
    border-color: #b0540a;
    color: #fff;
}

/* ---------- Forms ---------- */

.form-control:focus, .form-select:focus {
    border-color: var(--ap-yellow-dark);
    box-shadow: 0 0 0 0.2rem rgba(247, 198, 0, 0.18);
}

.form-label {
    font-weight: 500;
    color: var(--ap-text);
    margin-bottom: 4px;
    font-size: 13px;
}

/* ---------- Login page ---------- */

.ap-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 20%, rgba(247,198,0,0.12), transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(247,198,0,0.08), transparent 35%),
        linear-gradient(180deg, #fffaf0 0%, #fffef9 100%);
    padding: 20px;
}

.ap-login-card {
    background: #fff;
    width: 100%;
    max-width: 430px;
    border-radius: 18px;
    padding: 36px 32px;
    box-shadow: 0 18px 40px rgba(31, 31, 31, 0.18);
    border: 2px solid rgba(247, 198, 0, 0.35);
}

/* Divider with Om/flourish - decorative */
.ap-divider {
    text-align: center;
    color: var(--ap-yellow-dark);
    font-size: 18px;
    margin: 8px 0 18px;
}

/* ---------- Utility ---------- */

.text-ap-green { color: var(--ap-yellow-dark) !important; }
.text-ap-saffron { color: var(--ap-yellow-dark) !important; }
.bg-ap-green-light { background: var(--ap-yellow-light) !important; }

/* Forgot-password link on login screen */
.ap-forgot-link {
    color: #6b7280;
    font-size: .85rem;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color .15s ease, border-color .15s ease;
}
.ap-forgot-link:hover {
    color: var(--ap-yellow-dark);
    border-bottom-color: var(--ap-yellow-dark);
}

/* ---------- Astrology Number toggle buttons ---------- */
.ap-num-btn {
    min-width: 34px;
    padding: 3px 7px;
    font-size: 13px;
    font-weight: 600;
    background: var(--ap-surface-strong);
    border: 1px solid var(--ap-border);
    border-radius: 8px;
    color: var(--ap-charcoal-soft);
    transition: background .12s, color .12s, border-color .12s;
    cursor: pointer;
}
.btn-check:checked + .ap-num-btn,
.ap-num-btn.active {
    background: var(--ap-yellow);
    border-color: var(--ap-yellow-dark);
    color: var(--ap-charcoal);
    box-shadow: 0 2px 6px rgba(214,167,0,.3);
}
.ap-num-btn:hover:not(.active) {
    background: var(--ap-yellow-light);
    border-color: var(--ap-yellow-dark);
}
.ap-num-clear {
    color: var(--ap-muted);
    font-size: 11px;
    min-width: 28px;
}
.btn-check:checked + .ap-num-clear {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
    box-shadow: none;
}

/* ---------- Remedy delete button ---------- */
.remedy-del-btn {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin-top: 2px;       /* align with top of input */
    padding: 0;
    background: none;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    color: #f87171;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s;
}
.remedy-del-btn:hover {
    background: #fee2e2;
    border-color: #ef4444;
    color: #b91c1c;
}

/* ---------- Customer Search Suggest ---------- */
.cs-wrap {
    position: relative;
}

.cs-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--ap-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(31,31,31,.13);
    z-index: 200;
    overflow: hidden;
}
.cs-dropdown.open { display: block; }

.cs-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem .75rem;
    cursor: pointer;
    font-size: .82rem;
    transition: background .12s;
}
.cs-item:hover { background: var(--ap-yellow-light); }

.cs-name {
    font-weight: 600;
    color: var(--ap-charcoal);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cs-mobile {
    font-size: .75rem;
    color: var(--ap-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---------- LUSO (Lo Shu) Grid ---------- */

.luso-table {
    border-collapse: collapse;
    margin: 0 auto;
}

.luso-cell {
    width: 64px;
    height: 64px;
    border: 2px solid var(--ap-border);
    text-align: center;
    vertical-align: middle;
    position: relative;
    font-size: 11px;
    color: #ccc;
    background: #fafafa;
    transition: background 0.2s, border-color 0.2s;
    padding: 0;
}

.luso-cell.luso-filled {
    background: var(--ap-yellow-light);
    border-color: var(--ap-yellow-dark);
    color: var(--ap-charcoal);
}

.luso-label {
    display: block;
    font-size: 9px;
    color: #bbb;
    line-height: 1;
    margin-top: 6px;
}

.luso-cell.luso-filled .luso-label {
    color: var(--ap-muted);
}

.luso-val {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1px;
    color: var(--ap-charcoal);
    min-height: 22px;
}

.ap-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}

.ap-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
}

.ap-nav-toggle-icon {
    font-size: 18px;
    line-height: 1;
}

.ap-logout-button {
    min-width: auto;
}

/* =========================================================
   DASHBOARD STATS + CHARTS  (db- prefix)
   ========================================================= */

/* Stat cards grid */
.db-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .7rem;
}

.db-stat-card {
    border-radius: 12px;
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    border: 1px solid transparent;
    box-shadow: var(--ap-shadow-soft);
}

.db-stat-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.db-stat-num  { font-size: 1.5rem; font-weight: 800; line-height: 1.1; font-family: 'Playfair Display', serif; }
.db-stat-label{ font-size: .72rem; color: rgba(0,0,0,.55); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

.db-stat-yellow { background: #fffbeb; border-color: #fde68a; }
.db-stat-blue   { background: #eff6ff; border-color: #bfdbfe; }
.db-stat-green  { background: #f0fdf4; border-color: #bbf7d0; }
.db-stat-purple { background: #faf5ff; border-color: #ddd6fe; }
.db-stat-orange { background: #fff7ed; border-color: #fed7aa; }
.db-stat-teal   { background: #f0fdfa; border-color: #99f6e4; }

/* Bar chart */
.db-bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: .4rem;
    height: 130px;
    padding: .5rem 0 .25rem;
}

.db-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
}

.db-bar-count {
    font-size: .72rem;
    font-weight: 700;
    color: var(--ap-charcoal);
    min-height: 16px;
    margin-bottom: 2px;
}

.db-bar-track {
    flex: 1;
    width: 100%;
    max-width: 32px;
    background: #f3f0e4;
    border-radius: 6px 6px 0 0;
    display: flex;
    align-items: flex-end;
}

.db-bar-fill {
    width: 100%;
    background: linear-gradient(180deg, var(--ap-yellow) 0%, var(--ap-yellow-dark) 100%);
    border-radius: 6px 6px 0 0;
    min-height: 3px;
    transition: height .4s ease;
}

.db-bar-label {
    font-size: .65rem;
    color: var(--ap-muted);
    margin-top: 4px;
    text-align: center;
    white-space: nowrap;
}

/* Feedback list */
.db-feedback-list { display: flex; flex-direction: column; gap: .55rem; }

.db-fb-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.db-fb-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.db-fb-label {
    font-size: .78rem;
    font-weight: 600;
    width: 72px;
    flex-shrink: 0;
    color: var(--ap-charcoal-soft);
}

.db-fb-bar-wrap {
    flex: 1;
    height: 8px;
    background: #f0ece0;
    border-radius: 4px;
    overflow: hidden;
}

.db-fb-bar {
    display: block;
    height: 100%;
    border-radius: 4px;
    min-width: 3px;
    transition: width .4s ease;
}

.db-fb-num {
    font-size: .78rem;
    font-weight: 700;
    color: var(--ap-charcoal);
    width: 28px;
    text-align: right;
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .db-stat-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 575.98px) {
    .db-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .db-stat-num  { font-size: 1.25rem; }
}

/* ── existing dashboard hero below ── */
.ap-dashboard-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px;
    margin-bottom: 24px;
    border: 1px solid rgba(234, 223, 157, 0.86);
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(247, 198, 0, 0.14), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 251, 237, 0.92));
    box-shadow: var(--ap-shadow);
}

.ap-dashboard-kicker {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ap-muted);
    margin-bottom: 10px;
}

.ap-dashboard-title {
    margin: 0 0 8px;
    font-size: 30px;
}

.ap-dashboard-subtitle {
    margin: 0;
    max-width: 640px;
    color: var(--ap-muted);
    font-size: 15px;
}

.ap-dashboard-badge {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    padding: 14px 16px;
    min-width: 120px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(234, 223, 157, 0.86);
    box-shadow: var(--ap-shadow-soft);
}

.ap-dashboard-badge-label {
    font-size: 12px;
    color: var(--ap-muted);
}

.ap-dashboard-badge-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--ap-charcoal);
}

.ap-dashboard-card,
.ap-dashboard-panel {
    height: 100%;
    min-height: 210px;
    padding: 22px;
    border-radius: 20px;
    border: 1px solid rgba(234, 223, 157, 0.82);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--ap-shadow);
}

.ap-dashboard-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ap-dashboard-card:hover {
    transform: translateY(-3px);
    border-color: rgba(214, 167, 0, 0.9);
    box-shadow: 0 20px 36px rgba(31, 31, 31, 0.12);
    color: inherit;
}

.ap-dashboard-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(247, 198, 0, 0.18), rgba(247, 198, 0, 0.06));
    color: var(--ap-charcoal);
    font-size: 24px;
    box-shadow: inset 0 0 0 1px rgba(214, 167, 0, 0.2);
}

.ap-dashboard-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ap-dashboard-card-title {
    font-family: 'Playfair Display', 'Noto Serif Gujarati', 'Noto Serif Devanagari', serif;
    font-size: 24px;
    line-height: 1.15;
    color: var(--ap-charcoal);
}

.ap-dashboard-card-text,
.ap-dashboard-panel-text {
    color: var(--ap-muted);
    font-size: 14px;
    line-height: 1.6;
}

.ap-dashboard-panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 250, 240, 0.92));
}

.ap-dashboard-panel-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ap-muted);
}

.ap-dashboard-panel-value {
    font-family: 'Playfair Display', 'Noto Serif Gujarati', 'Noto Serif Devanagari', serif;
    font-size: 28px;
    line-height: 1.1;
}

.ap-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(31, 31, 31, 0.38);
    border: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1030;
}

.ap-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ap-table-wrap table {
    min-width: 100%;
}

#entryForm > .row,
#entryForm > .ap-card,
#entryForm > .text-center {
    max-width: 100%;
}

#entryForm .row {
    --bs-gutter-x: 1rem;
}

/* Table inputs: reasonable desktop minimum, shrinks freely on mobile */
#entryForm .table .form-control,
#entryForm .table .form-select {
    min-width: 64px;
    width: 100%;
}

@media (max-width: 991.98px) {
    body.ap-nav-open {
        overflow: hidden;
    }

    .ap-shell {
        display: block;
    }

    .ap-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: min(82vw, 300px);
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        z-index: 1040;
        box-shadow: 0 18px 34px rgba(31, 31, 31, 0.18);
    }

    body.ap-nav-open .ap-sidebar {
        transform: translateX(0);
    }

    body.ap-nav-open .ap-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .ap-sidebar-user {
        margin-left: 16px;
        margin-right: 16px;
    }

    .ap-topbar {
        position: sticky;
        top: 0;
        z-index: 1020;
        padding: 12px 16px;
        gap: 10px;
        align-items: flex-start;
    }

    .ap-topbar-left {
        min-width: 0;
        gap: 10px;
    }

    .ap-page-title {
        font-size: 18px;
        line-height: 1.2;
        flex: 1 1 auto;
        min-width: 0;
        word-break: break-word;
    }

    .ap-content,
    .ap-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ap-content {
        padding-top: 16px;
        padding-bottom: 20px;
    }

    .ap-card {
        padding: 14px;
        margin-bottom: 14px;
        border-radius: 12px;
    }

    .ap-card-header {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .ap-login-card {
        padding: 24px 18px;
        border-radius: 14px;
    }

    .luso-cell {
        width: 52px;
        height: 52px;
    }

    .luso-val {
        font-size: 15px;
    }

    .ap-dashboard-hero {
        padding: 20px;
        border-radius: 18px;
    }

    .ap-dashboard-title {
        font-size: 24px;
    }

    .ap-dashboard-card,
    .ap-dashboard-panel {
        min-height: 190px;
        padding: 18px;
        border-radius: 18px;
    }

    .ap-dashboard-card-title {
        font-size: 21px;
    }
}

@media (max-width: 767.98px) {
    /* Topbar: left shrinks, right stays compact */
    .ap-topbar {
        padding: 8px 12px;
    }

    .ap-topbar-left {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        flex: 1;
    }

    .ap-nav-toggle {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .ap-topbar-left .ap-nav-toggle.btn-ap-outline {
        width: 36px;
        min-width: 36px;
        height: 36px;
        padding: 0;
    }

    .ap-topbar-left .ap-page-title {
        font-size: 15px;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Hide lang label on very small screens, keep globe icon */
    .ap-lang-label { display: none; }
    .ap-lang-btn   { padding: 5px 7px; }

    .btn-ap-primary,
    .btn-ap-outline {
        width: 100%;
        padding: 10px 14px;
    }

    #entryForm .ap-card .btn {
        width: 100%;
    }

    .ap-dashboard-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .ap-dashboard-badge {
        align-items: flex-start;
        min-width: 0;
    }

    .ap-dashboard-title {
        font-size: 22px;
    }

    .ap-sidebar .ap-logo {
        padding: 10px 12px;
    }

    .ap-brand-logo--sidebar {
        max-width: 80px;
    }
}

@media (min-width: 992px) {
    .ap-content {
        padding: 20px 20px 24px;
    }

    .ap-card {
        padding: 16px 18px;
    }

    body.ap-sidebar-collapsed .ap-sidebar {
        width: 84px;
    }

    body.ap-sidebar-collapsed .ap-sidebar .ap-logo {
        padding-left: 10px;
        padding-right: 10px;
    }

    body.ap-sidebar-collapsed .ap-sidebar-user,
    body.ap-sidebar-collapsed .ap-sidebar-actions,
    body.ap-sidebar-collapsed .ap-sidebar-footer {
        display: none;
    }

    body.ap-sidebar-collapsed .ap-brand-logo--sidebar {
        max-width: 56px;
        padding: 6px;
    }

    body.ap-sidebar-collapsed .ap-sidebar .ap-nav a {
        justify-content: center;
        padding-left: 12px;
        padding-right: 12px;
        font-size: 0;
    }

    body.ap-sidebar-collapsed .ap-sidebar .ap-nav-icon {
        margin-right: 0;
        width: auto;
        font-size: 18px;
    }

}

/* ══════════════════════════════════════════════════════════════
   Mobile table fixes — prevent horizontal scrollbars on phones
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {

    /* Kill the scroll wrapper overflow — let tables reflow instead */
    .ap-table-wrap {
        overflow-x: visible;
    }

    /* All form tables: compact cells, allow text wrap, no forced width */
    #entryForm .table {
        font-size: 11px;
        width: 100%;
        table-layout: fixed;
    }

    #entryForm .table th,
    #entryForm .table td {
        padding: 3px 4px;
        white-space: normal;
        word-break: break-word;
    }

    /* Inputs inside table cells: fill cell, no enforced minimum */
    #entryForm .table .form-control,
    #entryForm .table .form-select {
        min-width: 0;
        font-size: 11px;
        padding: 2px 4px;
    }

    /* ── CSL table: 6 equal columns ── */
    #cslTable { table-layout: fixed; }
    #cslTable th, #cslTable td { width: 16.66%; }

    /* ── Dasha table: 5 equal columns ── */
    #dashaTable { table-layout: fixed; }
    #dashaTable th, #dashaTable td { width: 20%; }

    /* ── Planet Positions: label cols stay narrow, input cols fill rest ── */
    #planetTable { table-layout: fixed; }
    #planetTable td:nth-child(1),
    #planetTable td:nth-child(3) { width: 30px; }  /* planet label */

    /* ── RP table: label col narrow, two input cols share remainder ── */
    #rpTable { table-layout: fixed; }
    #rpTable td:first-child { width: 28px; }

    /* ── LUSO grid: already fixed size, prevent it from breaking layout ── */
    .luso-table { font-size: 11px; }
    .luso-cell  { width: 50px !important; height: 50px !important; }
    .luso-val   { font-size: 14px; }
}


/* =========================================================
   CLIENT LIST PAGE  (cl- prefix)
   Views/Consultation/List.cshtml
   ========================================================= */

/* ── Page header ── */
.cl-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.1rem;
}

.cl-page-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ap-charcoal);
    font-family: 'Playfair Display', serif;
}

.cl-total-badge {
    display: inline-block;
    margin-left: .55rem;
    padding: .15rem .6rem;
    background: var(--ap-yellow-light);
    border: 1px solid var(--ap-border);
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--ap-muted);
    vertical-align: middle;
    letter-spacing: .02em;
}

/* ── Filter bar ── */
.cl-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .65rem .85rem;
    margin-bottom: .9rem;
    background: var(--ap-surface-strong);
    border: 1px solid var(--ap-border);
    border-radius: 10px;
    box-shadow: var(--ap-shadow-soft);
}

/* Live search */
.cl-search-wrap {
    position: relative;
    flex: 1 1 200px;
    min-width: 160px;
    max-width: 340px;
}

.cl-search-icon {
    position: absolute;
    left: .55rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .85rem;
    pointer-events: none;
    color: var(--ap-muted);
    line-height: 1;
}

.cl-search-input {
    padding-left: 1.75rem;
    padding-right: 1.8rem;
    border-radius: 7px;
    border-color: var(--ap-border);
    background: var(--ap-surface);
    font-size: .82rem;
}

.cl-search-input:focus {
    border-color: var(--ap-yellow);
    box-shadow: 0 0 0 3px rgba(247, 198, 0, .18);
}

.cl-search-clear {
    position: absolute;
    right: .45rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0 .15rem;
    font-size: .8rem;
    color: var(--ap-muted);
    cursor: pointer;
    line-height: 1;
    opacity: .7;
}
.cl-search-clear:hover { opacity: 1; color: #991b1b; }

/* Date range */
.cl-date-range {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
}

.cl-filter-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ap-muted);
    white-space: nowrap;
}

.cl-date-input {
    width: 130px;
    font-size: .8rem;
    border-color: var(--ap-border);
    background: var(--ap-surface);
    border-radius: 7px;
}
.cl-date-input:focus {
    border-color: var(--ap-yellow);
    box-shadow: 0 0 0 3px rgba(247, 198, 0, .18);
}

/* Feedback dropdown */
.cl-feedback-wrap { flex-shrink: 0; }

.cl-select {
    font-size: .8rem;
    border-color: var(--ap-border);
    background: var(--ap-surface);
    border-radius: 7px;
    min-width: 130px;
}
.cl-select:focus {
    border-color: var(--ap-yellow);
    box-shadow: 0 0 0 3px rgba(247, 198, 0, .18);
}

/* Reset button */
.cl-reset-btn {
    font-size: .78rem;
    white-space: nowrap;
}

/* ── Table card ── */
.cl-table-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--ap-border);
    box-shadow: var(--ap-shadow-soft);
    background: var(--ap-surface-strong);
}

/* ── Empty state ── */
.cl-empty-state {
    padding: 3.5rem 1rem;
    text-align: center;
}

.cl-empty-icon {
    font-size: 2.5rem;
    margin-bottom: .5rem;
    opacity: .45;
}

.cl-empty-text {
    font-weight: 600;
    color: var(--ap-charcoal);
    font-size: 1rem;
    margin-bottom: .25rem;
}

/* ── Table ── */
.cl-table {
    font-size: .83rem;
}

.cl-th {
    padding: .65rem .85rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ap-muted);
    background: var(--ap-gold-soft);
    border-bottom: 1.5px solid var(--ap-border) !important;
    white-space: nowrap;
    vertical-align: middle;
}

.cl-td {
    padding: .65rem .85rem;
    vertical-align: middle;
    border-bottom: 1px solid #f3edd5;
    color: var(--ap-text);
}

.cl-td-num {
    font-size: .75rem;
    color: var(--ap-muted);
    font-weight: 500;
}

/* Row shading */
.cl-row:hover td { background: rgba(247, 198, 0, .06); }
.cl-row-draft  {}
.cl-row-final td { background: rgba(209, 250, 229, .18); }
.cl-row-final:hover td { background: rgba(209, 250, 229, .38); }

/* ── Avatar + client cell ── */
.cl-client-cell {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.cl-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ap-yellow) 0%, var(--ap-yellow-dark) 100%);
    color: var(--ap-charcoal);
    font-size: .72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .03em;
    box-shadow: 0 1px 4px rgba(214, 167, 0, .35);
}

.cl-client-info { line-height: 1.3; min-width: 0; }

.cl-client-name {
    font-weight: 600;
    color: var(--ap-charcoal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.cl-client-meta {
    font-size: .75rem;
    color: var(--ap-muted);
}

/* ── Date / time / mode / horary ── */
.cl-date {
    font-weight: 500;
    font-size: .82rem;
    white-space: nowrap;
}
.cl-time {
    font-size: .73rem;
    color: var(--ap-muted);
}
.cl-mode {
    font-size: .78rem;
    color: var(--ap-charcoal-soft);
}
.cl-horary {
    font-size: .83rem;
    font-weight: 600;
    color: var(--ap-charcoal);
}

/* ── Feedback badge ── */
.cl-badge {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 20px;
    font-size: .73rem;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: .01em;
}

/* ── Status pill ── */
.cl-status-pill {
    display: inline-block;
    padding: .18rem .55rem;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.cl-status-final {
    background: #d1fae5;
    color: #065f46;
}
.cl-status-draft {
    background: #f3f4f6;
    color: #6b7280;
}

/* ── Action buttons ── */
.cl-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
}

.cl-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--ap-border);
    background: var(--ap-surface);
    color: var(--ap-muted);
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
    flex-shrink: 0;
}
.cl-action-btn:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

.cl-action-view:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}
.cl-action-edit:hover {
    background: #fefce8;
    border-color: var(--ap-yellow);
    color: var(--ap-yellow-dark);
}
.cl-action-print:hover {
    background: #f0f9ff;
    border-color: #7dd3fc;
    color: #0369a1;
}
.cl-action-warn:hover {
    background: #fff7ed;
    border-color: #fdba74;
    color: #c2410c;
}
.cl-action-del:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}
.cl-row-inactive td { opacity: .5; }

/* ── Pagination ── */
.cl-pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .75rem .25rem;
    margin-top: .75rem;
}

.cl-pagination-wrap .page-link {
    border-color: var(--ap-border);
    color: var(--ap-charcoal);
    background: var(--ap-surface-strong);
    font-size: .8rem;
    padding: .3rem .58rem;
}
.cl-pagination-wrap .page-item.active .page-link {
    background: var(--ap-yellow);
    border-color: var(--ap-yellow-dark);
    color: var(--ap-charcoal);
    font-weight: 700;
}
.cl-pagination-wrap .page-link:hover:not(.active) {
    background: var(--ap-yellow-light);
    border-color: var(--ap-yellow);
    color: var(--ap-charcoal);
}
.cl-pagination-wrap .page-item.disabled .page-link {
    opacity: .45;
}

/* ── Responsive tweaks ── */
@media (max-width: 575.98px) {
    .cl-filter-bar {
        padding: .5rem .6rem;
        gap: .65rem;
    }
    .cl-search-wrap {
        max-width: 100%;
        flex: 1 1 100%;
    }
    .cl-date-range {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .cl-date-input {
        width: 45%;
        flex: 1 1 auto;
    }
    .cl-feedback-wrap {
        flex: 1 1 100%;
    }
    .cl-select {
        width: 100%;
    }
    .cl-table-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .cl-client-name {
        max-width: 130px;
    }
    .cl-th, .cl-td {
        padding: .5rem .55rem;
    }
}


/* =========================================================
   MASTERS PAGE  (ms- prefix)
   Views/Masters/Index.cshtml
   ========================================================= */

/* ── Tab bar ── */
.ms-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--ap-border);
    padding-bottom: .5rem;
}

.ms-tab {
    background: none;
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    padding: .45rem 1.1rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ap-muted);
    cursor: pointer;
    transition: background .14s, color .14s, border-color .14s;
}
.ms-tab:hover {
    background: var(--ap-yellow-light);
    color: var(--ap-charcoal);
}
.ms-tab.active {
    background: var(--ap-yellow);
    border-color: var(--ap-yellow-dark);
    color: var(--ap-charcoal);
    box-shadow: 0 2px 6px rgba(214,167,0,.25);
}

/* ── Panel ── */
.ms-panel { display: none; }
.ms-panel.active { display: block; }

.ms-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .7rem;
}

.ms-count {
    font-size: .78rem;
    color: var(--ap-muted);
    font-weight: 500;
}

/* ── Table ── */
.ms-table { font-size: .83rem; }

.ms-th {
    padding: .6rem .85rem;
    font-size: .71rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ap-muted);
    background: var(--ap-gold-soft);
    border-bottom: 1.5px solid var(--ap-border) !important;
    white-space: nowrap;
    vertical-align: middle;
}

.ms-td {
    padding: .6rem .85rem;
    vertical-align: middle;
    border-bottom: 1px solid #f3edd5;
}

.ms-td-num {
    font-size: .74rem;
    color: var(--ap-muted);
}

.ms-row-inactive td { opacity: .5; }

/* ── Status pills ── */
.ms-pill {
    display: inline-block;
    padding: .17rem .55rem;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ms-pill-active   { background: #d1fae5; color: #065f46; }
.ms-pill-inactive { background: #f3f4f6; color: #6b7280; }

.ms-cat-badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 600;
    background: var(--ap-yellow-light);
    color: var(--ap-charcoal-soft);
    border: 1px solid var(--ap-border);
}

/* ── Action buttons ── */
.ms-actions {
    display: flex;
    justify-content: flex-end;
    gap: .25rem;
}

.ms-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--ap-border);
    background: var(--ap-surface);
    font-size: .78rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .13s, border-color .13s;
    line-height: 1;
}
.ms-btn-edit:hover { background: #fefce8; border-color: var(--ap-yellow); }
.ms-btn-warn:hover { background: #fff7ed; border-color: #fdba74; }
.ms-btn-ok:hover   { background: #f0fdf4; border-color: #86efac; }
.ms-btn-del:hover  { background: #fee2e2; border-color: #fca5a5; }

/* ── Modal ── */
.ms-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(31,31,31,.38);
    z-index: 1040;
}
.ms-modal-backdrop.open { display: block; }

.ms-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.95);
    width: min(480px, 96vw);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 48px rgba(31,31,31,.2);
    border: 1px solid var(--ap-border);
    z-index: 1050;
    transition: transform .18s ease, opacity .18s ease;
    opacity: 0;
}
.ms-modal.open {
    display: block;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.ms-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.2rem .7rem;
    border-bottom: 1px solid var(--ap-border);
}

.ms-modal-title {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ap-charcoal);
}

.ms-modal-close {
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--ap-muted);
    cursor: pointer;
    padding: .2rem .4rem;
    border-radius: 6px;
    transition: background .12s;
}
.ms-modal-close:hover { background: #fee2e2; color: #b91c1c; }

.ms-modal-body {
    padding: 1rem 1.2rem .6rem;
}

.ms-modal-error {
    min-height: 1.2em;
    font-size: .8rem;
    color: #b91c1c;
    margin-top: .3rem;
}

.ms-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .7rem 1.2rem .9rem;
    border-top: 1px solid var(--ap-border);
}

/* ── Toast notification ── */
.ms-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    padding: .65rem 1.2rem;
    border-radius: 10px;
    font-size: .84rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(31,31,31,.18);
    z-index: 1060;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .22s, transform .22s;
    pointer-events: none;
}
.ms-toast.show { opacity: 1; transform: translateY(0); }
.ms-toast-ok    { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.ms-toast-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

@media (max-width: 575.98px) {
    .ms-tab { padding: .38rem .7rem; font-size: .78rem; }
    .ms-th, .ms-td { padding: .45rem .55rem; }
}


/* =========================================================
   ADMIN · ROLES · USERS · PROFILE  — polish + mobile
   Applies across: /users, /users/{id}/edit, /roles, /roles/{id}/edit,
   /roles/compare, /me
   ========================================================= */

/* ── Tabs (ap-tabs) — horizontally scrollable on narrow screens ── */
.ap-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ap-tabs::-webkit-scrollbar { display: none; }
.ap-tabs .nav-item { flex: 0 0 auto; }
.ap-tabs .nav-link {
    white-space: nowrap;
    border-radius: 8px 8px 0 0;
    transition: color .15s, background .15s, border-color .15s;
}
.ap-tabs .nav-link:hover:not(.active) {
    color: var(--ap-charcoal, #111827);
    background: var(--ap-yellow-light, #fff8dc);
}

/* ── Role cards (rm-card) — lift on hover, cleaner stats ── */
.rm-card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    border-left: 3px solid transparent;
}
.rm-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -10px rgba(109, 40, 217, .18), 0 2px 6px rgba(0,0,0,.06);
    border-left-color: var(--ap-primary, #6d28d9);
}
.rm-card-name {
    display: flex; align-items: center; gap: .4rem;
}

/* ── Role matrix (Compare) — nicer sticky col + subtle zebra ── */
.rm-grid thead .cl-th { background: #fafafa; }
.rm-grid tbody .rm-perm-row:hover td { background: #fcfbf5; }
.rm-chk { transition: transform .12s; }
.rm-chk:hover { transform: scale(1.15); }

/* Scroll hint on mobile Compare table */
.rm-scroll-hint {
    display: none;
    font-size: .72rem; color: var(--ap-muted, #6b7280);
    padding: .25rem .5rem .4rem; text-align: right;
}

/* ── Profile /me — avatar ring + better spacing ── */
.me-card { overflow: hidden; }
.me-avatar {
    position: relative;
    box-shadow: 0 8px 20px -6px rgba(109,40,217,.35), 0 0 0 4px #fff,
                0 0 0 5px rgba(167,139,250,.45);
    transition: transform .25s;
}
.me-card:hover .me-avatar { transform: scale(1.04) rotate(-2deg); }
.me-name  { letter-spacing: .01em; }
.me-meta strong { color: #111827; }

/* ── Danger zone card — consistent warning look ── */
.ap-danger-zone {
    border: 1px solid #fecaca !important;
}
.ap-danger-zone .ap-card-header {
    background: #fef2f2; color: #991b1b;
}

/* ── User-mgmt permission group — tighter on xs ── */
.um-perm-group .form-check-input { margin-top: .2rem; }

/* ── Mini buttons on Compare matrix column header ── */
.rm-mini-btn { transition: background .14s, border-color .14s, color .14s; }

/* =========================================================
   MOBILE (<= 767px) — shared admin polish
   ========================================================= */
@media (max-width: 767.98px) {
    /* Page header: title row + button row stack cleanly */
    .cl-page-header { gap: .75rem; }
    .cl-page-header > .d-flex { width: 100%; }
    .cl-page-header > .d-flex .btn { flex: 1 1 auto; }
    .cl-page-title { font-size: 1.15rem; }

    /* Tabs — a little tighter */
    .ap-tabs .nav-link { padding: .45rem .7rem; font-size: .82rem; }

    /* Role cards — stack actions full-width */
    .rm-card-actions { flex-direction: row; }
    .rm-card-actions .btn { flex: 1 1 auto; }
    .rm-card-stats { gap: 1rem; padding: .45rem 0; }
    .rm-card-name { font-size: .95rem; }

    /* Profile page — stack meta centered */
    .me-avatar { width: 64px; height: 64px; font-size: 1.4rem; }

    /* Role matrix on small screens: show a swipe hint */
    .rm-scroll-hint { display: block; }
    .rm-grid { font-size: .8rem; }
    .rm-grid .rm-feature-col,
    .rm-grid .rm-perm-row td:first-child { min-width: 180px; }
    .rm-grid .rm-role-col { min-width: 110px; }
    .rm-perm-key { display: none; }

    /* Danger-zone button fills row on xs */
    .ap-danger-zone .p-3 { flex-direction: column; align-items: stretch !important; gap: .75rem; }
    .ap-danger-zone form { width: 100%; }
    .ap-danger-zone form button { width: 100%; }
}

/* =========================================================
   EXTRA-SMALL (<= 575px)
   ========================================================= */
@media (max-width: 575.98px) {
    /* Users list: meta row truncates, role pill stays compact */
    .um-row .cl-client-name,
    .um-row .cl-client-meta {
        max-width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Action icons stay inline and tight */
    .um-row .cl-actions {
        gap: .2rem;
    }
    .um-row .cl-action-btn {
        width: 28px; height: 28px;
    }

    /* Page-header buttons wrap to full width on very small */
    .cl-page-header > .d-flex.gap-2 { flex-wrap: wrap; }

    /* Compare matrix: first column narrower */
    .rm-grid .rm-feature-col,
    .rm-grid .rm-perm-row td:first-child { min-width: 150px; }
    .rm-group-row td.rm-group-title { padding: .35rem .6rem; font-size: .65rem; }

    /* /me password form columns stack */
    .me-card { text-align: center; }

    /* Admin section heading in sidebar — tighter padding */
    .ap-sidebar .ap-nav-section { padding: 10px 12px 4px; }
}

/* ─────────────────────────────────────────────────────────────── */
/*  REPORTS — hub cards, KPIs, heatmap, charts                     */
/* ─────────────────────────────────────────────────────────────── */

.rp-group-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6b7280;
    margin: 18px 0 10px;
    padding-left: 4px;
}

.rp-card-link { text-decoration: none; color: inherit; display: block; height: 100%; }
.rp-card {
    display: flex; align-items: flex-start; gap: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px 18px;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position: relative; overflow: hidden;
}
.rp-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, #8b5cf6, #6366f1);
    opacity: 0; transition: opacity .18s ease;
}
.rp-card-link:hover .rp-card {
    transform: translateY(-3px);
    border-color: #c4b5fd;
    box-shadow: 0 10px 28px -12px rgba(139, 92, 246, .35);
}
.rp-card-link:hover .rp-card::before { opacity: 1; }

.rp-card-icon {
    font-size: 1.6rem; line-height: 1;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #ede9fe, #e0e7ff);
    border-radius: 12px; flex-shrink: 0;
}
.rp-card-title    { font-size: 1rem; font-weight: 700; color: #111827; margin-bottom: 2px; }
.rp-card-tagline  { font-size: .82rem; color: #6b7280; line-height: 1.35; }
.rp-card-arrow    { margin-left: auto; color: #9ca3af; font-size: 1.2rem; transition: transform .18s ease, color .18s ease; }
.rp-card-link:hover .rp-card-arrow { color: #6366f1; transform: translateX(4px); }

/* KPI tiles */
.rp-kpi {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    height: 100%;
}
.rp-kpi-label   { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin-bottom: 4px; }
.rp-kpi-value   { font-size: 1.6rem; font-weight: 700; color: #111827; line-height: 1.1; }
.rp-kpi-sub     { font-size: .75rem; margin-top: 2px; }
.rp-kpi-up      { color: #059669; font-weight: 600; }
.rp-kpi-down    { color: #dc2626; font-weight: 600; }
.rp-kpi-inline  { display: inline-flex; flex-direction: column; gap: 2px; padding-right: 16px; border-right: 1px solid #e5e7eb; }
.rp-kpi-inline:last-child { border-right: none; }
.rp-kpi-inline .rp-kpi-label { margin-bottom: 0; }

/* Count pill (used in ranked tables) */
.rp-count-pill {
    display: inline-block;
    min-width: 34px;
    padding: 2px 10px;
    background: linear-gradient(135deg, #ede9fe, #e0e7ff);
    color: #4338ca;
    border-radius: 999px;
    font-weight: 700;
    font-size: .82rem;
    text-align: center;
}

/* Inline % bar (used in Top Remedies / By City / References) */
.rp-bar-track { height: 8px; background: #f3f4f6; border-radius: 999px; overflow: hidden; }
.rp-bar-fill  { height: 100%; background: linear-gradient(90deg, #8b5cf6, #6366f1); border-radius: 999px; }

/* Heatmap */
.rp-heatmap { border-collapse: separate; border-spacing: 2px; font-size: .72rem; }
.rp-heatmap th {
    font-weight: 600; color: #6b7280; text-align: center;
    padding: 4px 2px; font-size: .66rem;
}
.rp-heatmap td {
    width: 30px; height: 26px; text-align: center;
    border-radius: 4px; color: #374151;
    font-variant-numeric: tabular-nums;
    transition: transform .12s ease, box-shadow .12s ease;
    cursor: default;
}
.rp-heatmap td:hover { transform: scale(1.12); box-shadow: 0 2px 8px rgba(0,0,0,.15); z-index: 1; position: relative; }
.rp-hm-dow { font-weight: 700; color: #374151 !important; padding-right: 8px !important; }
.rp-hm-legend { display: flex; align-items: center; gap: 4px; margin-top: 12px; font-size: .72rem; }
.rp-hm-swatch { display: inline-block; width: 20px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.06); }

/* Filter bar (shared _Filter partial) */
.rp-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.rp-preset-group { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.rp-preset { border-radius: 8px; }

/* Mobile */
@media (max-width: 767.98px) {
    .rp-card { padding: 12px 14px; }
    .rp-card-icon { width: 38px; height: 38px; font-size: 1.3rem; }
    .rp-card-title { font-size: .92rem; }
    .rp-card-tagline { font-size: .75rem; }
    .rp-kpi-value { font-size: 1.25rem; }
    .rp-heatmap td { width: 22px; height: 22px; font-size: .62rem; }
    .rp-kpi-inline { padding-right: 10px; }
}

/* Floating Print / PDF button (shown only on report detail pages) */
.rp-print-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-weight: 600;
    font-size: .88rem;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    box-shadow: 0 10px 26px -8px rgba(99, 102, 241, .55), 0 4px 10px rgba(0,0,0,.08);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.rp-print-fab:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 14px 32px -8px rgba(99, 102, 241, .7), 0 4px 12px rgba(0,0,0,.1);
}
.rp-print-fab:active { transform: translateY(0); }

@media (max-width: 575.98px) {
    .rp-print-fab { right: 12px; bottom: 12px; padding: 10px 14px; }
    .rp-print-fab-text { display: none; }
}

/* Print */
@media print {
    .ap-sidebar, .ap-topbar, .ap-footer,
    .cl-page-header .btn, .rp-filter-bar, .rp-print-fab,
    form, .btn { display: none !important; }
    .ap-main, .ap-content, .ap-layout { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; }
    .ap-card, .rp-kpi { break-inside: avoid; page-break-inside: avoid; border: 1px solid #ddd !important; box-shadow: none !important; }
    .rp-card { break-inside: avoid; }
    body { background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .cl-page-title { font-size: 1.3rem; }
    canvas { max-width: 100% !important; height: auto !important; }
    a[href]:after { content: ""; }  /* suppress URL appending */
    .cl-table thead { background: #f3f4f6 !important; }
    .rp-count-pill, .rp-bar-fill, .rp-card-icon { background: #ede9fe !important; color: #4338ca !important; }
}

/* Auto-filled readonly astro fields */
.ap-autofill[readonly] { background-color: #f0fdf4; border-color: #86efac; color: #166534; font-weight: 500; }

/* =========================================================
   ENTRY FORM — Remedy autocomplete dropdown
   ========================================================= */

/* Wrapper gives the dropdown a positioning context */
.remedy-input-wrap {
    position: relative;
}

/* The custom suggestion dropdown panel */
.remedy-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--ap-border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 8px 24px -6px rgba(31,31,31,.18);
    z-index: 900;
    max-height: 220px;
    overflow-y: auto;
}
.remedy-dropdown.open { display: block; }

/* Individual suggestion row */
.remedy-drop-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: background .12s;
}
.remedy-drop-item:last-child { border-bottom: none; }
.remedy-drop-item:hover,
.remedy-drop-item.active {
    background: var(--ap-yellow-light, #fff8dc);
}

/* Remedy name inside suggestion */
.remedy-drop-name {
    font-size: .83rem;
    font-weight: 600;
    color: var(--ap-charcoal, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Description snippet inside suggestion */
.remedy-drop-desc {
    font-size: .73rem;
    color: var(--ap-muted, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Description shown below the selected remedy input — styled info badge */
.remedy-desc {
    display: none;                      /* hidden until a remedy is selected */
    margin-top: 4px;
    padding: 4px 8px;
    background: #eff6ff;                /* light blue tint */
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    font-size: .72rem;
    color: #1e40af;
    line-height: 1.45;
    word-break: break-word;
}
.remedy-desc::before {
    content: '\2139\FE0F\00A0';         /* ℹ️ + non-breaking space */
    font-style: normal;
}
.remedy-desc.has-desc { display: block; }