/* ============================================================
   مركز شادي القدري الطبي — Medical Center Unified Theme
   ============================================================ */

:root {
    --mc-blue: #2b5daa;
    --mc-blue-dark: #1e4d91;
    --mc-blue-light: #f0f4ff;
    --mc-sidebar: #2f67d8;
    --mc-sidebar-hover: #1d4fb8;
    --mc-green: #28a745;
    --mc-green-dark: #218838;
    --mc-orange: #e08e0b;
    --mc-purple: #6f42c1;
    --mc-red: #dc3545;
    --mc-teal: #17a2b8;
    --mc-gray: #6c757d;
    --mc-gray-dark: #545b62;
    --mc-bg: #f1f1f1;
    --mc-surface: #ffffff;
    --mc-text: #333333;
    --mc-muted: #777777;
    --mc-shadow-sm: 0 2px 10px rgba(43, 93, 170, 0.07);
    --mc-shadow-md: 0 4px 18px rgba(43, 93, 170, 0.09);
    --mc-radius-sm: 8px;
    --mc-radius-md: 14px;
    --mc-radius-lg: 18px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Tahoma, sans-serif;
    background: var(--mc-bg);
    color: var(--mc-text);
    overflow-x: hidden;
    max-width: 100vw;
    -webkit-text-size-adjust: 100%;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    /* Fluid base type: grows on large monitors, stays readable on tablets/phones */
    font-size: clamp(16px, 0.95rem + 0.45vw, 19px);
}

@media (min-width: 1600px) {
    html {
        font-size: clamp(17px, 1rem + 0.45vw, 20px);
    }
}

@media (max-width: 767px) {
    html {
        font-size: clamp(16px, 3.8vw, 18px);
    }
}

/* ----- App shell (sidebar layout) ----- */
.mc-layout {
    display: flex;
    min-height: 100vh;
}

.mc-sidebar {
    width: 240px;
    background: var(--mc-sidebar);
    min-height: 100vh;
    padding: 16px 12px;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.mc-brand-logo {
    object-fit: contain;
    display: block;
    background: transparent;
}
.mc-brand-logo--sidebar {
    width: 72px;
    height: auto;
    max-height: 80px;
    margin: 0 auto 6px;
    border-radius: 0;
}
.mc-brand-logo--hero {
    width: 88px;
    height: auto;
    max-height: 96px;
    border-radius: 0;
    box-shadow: none;
}
.mc-brand-logo--login {
    width: 150px;
    height: auto;
    max-height: 170px;
    border-radius: 0;
    margin: 0 auto 14px;
}
.mc-brand-logo--nav {
    width: 56px;
    height: auto;
    max-height: 62px;
    border-radius: 0;
}

.mc-sidebar-logo {
    text-align: center;
    margin-bottom: 20px;
    padding: 10px 8px 6px;
    background: transparent;
    border: none;
}

.mc-sidebar-logo-icon {
    font-size: 52px;
    margin-bottom: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mc-sidebar-logo-text {
    color: #7dd3fc;
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}

.mc-role-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--mc-radius-sm);
    padding: 7px 12px;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: bold;
}

.mc-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    padding: 12px 14px;
    margin-bottom: 6px;
    border-radius: var(--mc-radius-sm);
    transition: background 0.2s;
    min-height: 48px;
    font-size: 15px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mc-nav-link > * {
    pointer-events: none;
}

.mc-nav-icon {
    font-size: 20px;
    width: 28px;
    flex-shrink: 0;
    text-align: center;
    line-height: 1;
    opacity: 0.95;
}

.mc-nav-text { flex: 1; min-width: 0; }

.mc-nav-section {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 14px 14px 6px;
    margin-top: 4px;
}

.mc-nav-dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: #fff;
    padding: 12px 14px;
    margin-bottom: 6px;
    border-radius: var(--mc-radius-sm);
    min-height: 48px;
    font-size: 15px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mc-nav-dropdown-toggle > * {
    pointer-events: none;
}

.mc-nav-dropdown-label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.mc-nav-dropdown-arrow {
    font-size: 10px;
    opacity: 0.7;
}

.mc-nav-link:hover {
    background: var(--mc-sidebar-hover);
}

.mc-nav-link.on {
    background: #fff;
    color: var(--mc-blue);
    font-weight: 700;
}

.mc-nav-dropdown-menu .mc-nav-link.on {
    background: rgba(255, 255, 255, 0.95);
    color: var(--mc-blue);
}

.mc-nav-dropdown-group {
    color: rgba(255, 255, 255, 0.45);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 10px 18px 4px;
    margin-top: 4px;
}

.mc-nav-dropdown-group:first-child {
    margin-top: 0;
}

.mc-nav-dropdown.active > .mc-nav-dropdown-toggle {
    background: var(--mc-sidebar-hover);
}

.mc-nav-dropdown-menu {
    display: none;
    background: var(--mc-sidebar-hover);
    border-radius: var(--mc-radius-sm);
    margin-top: 4px;
    overflow: hidden;
}

.mc-nav-dropdown.active .mc-nav-dropdown-menu {
    display: block;
}

.mc-nav-dropdown-menu .mc-nav-link {
    padding: 12px 18px 12px 14px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    font-size: 14px;
    min-height: 48px;
}

.mc-nav-dropdown-toggle:hover {
    background: var(--mc-sidebar-hover);
}

.mc-sidebar-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.mc-content {
    flex: 1;
    padding: 30px;
    min-width: 0;
    width: 100%;
}

/* ----- Mobile top bar (hidden on desktop) ----- */
.mc-mobile-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 1200;
    background: var(--mc-sidebar);
    color: #fff;
    padding: 10px 14px;
    padding-top: max(10px, env(safe-area-inset-top));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.mc-menu-btn,
.mc-sidebar-close {
    border: 0;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 22px;
    cursor: pointer;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

.mc-mobile-bar-title {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.mc-mobile-bar-name {
    display: block;
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-mobile-bar-role {
    display: block;
    font-size: 11px;
    opacity: 0.85;
}

.mc-mobile-bar-action {
    min-width: 52px;
    min-height: 52px;
    padding: 0 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mc-mobile-bar-action > * {
    pointer-events: none;
}

.mc-mobile-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mc-sidebar-overlay {
    display: none;
}

.mc-sidebar-close {
    display: none;
    margin-bottom: 10px;
    margin-right: auto;
}

/* ----- Standalone pages (login, home hero) ----- */
.mc-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.mc-page-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
}

.mc-page-header {
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
}

.mc-page-header h1 {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

/* ----- Cards & stats — touch-friendly for phone/tablet ----- */
.mc-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.mc-card-link {
    background: var(--mc-surface);
    border-radius: 14px;
    padding: 18px 20px;
    text-decoration: none;
    color: var(--mc-text);
    border: 1px solid #dce6f5;
    box-shadow: 0 2px 8px rgba(43, 93, 170, 0.06);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 84px;
}

.mc-card-link:hover,
.mc-card-link:active {
    transform: translateY(-2px);
    border-color: #a8c4e8;
    box-shadow: 0 6px 18px rgba(43, 93, 170, 0.12);
}

.mc-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--mc-blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    line-height: 1;
}

.mc-card-body { flex: 1; min-width: 0; }

.mc-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--mc-blue);
    margin-bottom: 5px;
    line-height: 1.4;
}

.mc-card-subtitle {
    font-size: 14px;
    color: var(--mc-muted);
    line-height: 1.5;
}

/* ----- Home page ----- */
.mc-home-hero {
    background: linear-gradient(135deg, #1a5f6b 0%, #0f766e 55%, #14b8a6 100%);
    color: #fff;
    border-radius: 16px;
    padding: 22px 26px;
    margin-bottom: 18px;
    box-shadow: 0 8px 28px rgba(15, 118, 110, 0.18);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}

.mc-home-hero-brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mc-home-hero-logo {
    width: 78px;
    height: 86px;
    border-radius: 0;
    background: transparent;
    display: grid;
    place-items: center;
    overflow: visible;
    border: none;
    flex-shrink: 0;
    padding: 0;
    box-sizing: border-box;
}

.mc-home-hero h1 { margin: 0 0 6px; font-size: 26px; font-weight: 700; }
.mc-home-hero .en { opacity: 0.85; font-size: 13px; margin-bottom: 8px; letter-spacing: 0.02em; }
.mc-home-hero .tagline { margin: 0; opacity: 0.9; font-size: 15px; line-height: 1.65; max-width: 560px; }
.mc-home-welcome { text-align: left; font-size: 14px; opacity: 0.9; }

.mc-home-hero--reception {
    background: linear-gradient(135deg, #1e4d91 0%, #2b5daa 55%, #4a7fd4 100%);
    box-shadow: 0 8px 28px rgba(43, 93, 170, 0.2);
}
.mc-home-hero--lab {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 55%, #2dd4bf 100%);
    box-shadow: 0 8px 28px rgba(15, 118, 110, 0.2);
}
.mc-home-hero--nurse {
    background: linear-gradient(135deg, #166534 0%, #22c55e 55%, #4ade80 100%);
    box-shadow: 0 8px 28px rgba(34, 197, 94, 0.18);
}
.mc-home-hero--management {
    background: linear-gradient(135deg, #4c1d95 0%, #6f42c1 55%, #8b5cf6 100%);
    box-shadow: 0 8px 28px rgba(111, 66, 193, 0.2);
}
.mc-home-hero--doctor {
    background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 55%, #0ea5e9 100%);
    box-shadow: 0 8px 28px rgba(3, 105, 161, 0.2);
}

.mc-home-hero-logo--lg {
    width: 96px;
    height: 106px;
}
.mc-home-hero-logo .mc-brand-logo--hero {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
}

.mc-role-home-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.mc-role-home {
    background: #fff;
    border-radius: 16px;
    padding: 22px 24px 24px;
    box-shadow: var(--mc-shadow);
    margin-bottom: 18px;
}

.mc-role-home-title {
    margin: 0 0 16px;
    font-size: 18px;
    color: var(--mc-blue);
}

.mc-cards-grid--role-home {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.mc-card-link--primary {
    border: 2px solid var(--mc-blue);
    background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
    min-height: 110px;
}

.mc-card-link--primary .mc-card-title {
    font-size: 17px;
    color: var(--mc-blue);
}

.mc-home-hero--lab + .mc-role-home .mc-card-link--primary { border-color: #0f766e; }
.mc-home-hero--lab + .mc-role-home .mc-card-link--primary .mc-card-title { color: #0f766e; }
.mc-home-hero--management + .mc-role-home .mc-card-link--primary { border-color: #6f42c1; }
.mc-home-hero--management + .mc-role-home .mc-card-link--primary .mc-card-title { color: #6f42c1; }
.mc-home-hero--nurse + .mc-role-home .mc-card-link--primary { border-color: #16a34a; }
.mc-home-hero--nurse + .mc-role-home .mc-card-link--primary .mc-card-title { color: #16a34a; }

.mc-home-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--mc-blue);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8eef8;
}

.mc-home-section-title .mc-icon-sm { font-size: 20px; }

.mc-home-section-note {
    color: var(--mc-muted);
    font-size: 14px;
    margin: -2px 0 16px;
    line-height: 1.65;
}

.mc-home-group { margin-bottom: 22px; }

.mc-hospital-map {
    background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
    border: 1px solid #dbeafe;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.mc-hospital-map-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--mc-blue);
    margin-bottom: 12px;
}
.mc-hospital-map-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.mc-hospital-map-item {
    background: white;
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    font-size: 13px;
    line-height: 1.5;
}
.mc-hospital-map-item strong {
    display: block;
    margin-bottom: 4px;
    color: #1e293b;
}

.mc-portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 22px;
}

.mc-portal {
    background: var(--mc-surface);
    border-radius: 16px;
    border: 2px solid #e8eef5;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(43, 93, 170, 0.06);
}

.mc-portal--patient { border-top: 4px solid #0f766e; }
.mc-portal--ops { border-top: 4px solid var(--mc-blue); }
.mc-portal--mgmt { border-top: 4px solid #6f42c1; grid-column: 1 / -1; }

.mc-portal-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px 14px;
    background: #fafbfd;
    border-bottom: 1px solid #eef2f8;
}

.mc-portal-icon { font-size: 32px; line-height: 1; }
.mc-portal-head h2 { margin: 0 0 4px; font-size: 18px; color: var(--mc-blue); }
.mc-portal-head p { margin: 0; font-size: 13px; color: var(--mc-muted); line-height: 1.5; }

.mc-portal-body { padding: 18px 22px 22px; }

.mc-portal-main-link {
    display: block;
    padding: 16px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f0fdfa, #ecfeff);
    border: 2px solid #99f6e4;
    text-decoration: none;
    color: inherit;
    margin-bottom: 12px;
}

.mc-portal-main-link--mgmt {
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    border-color: #c4b5fd;
}

.mc-portal-main-link strong { display: block; font-size: 16px; color: #0f766e; margin-bottom: 4px; }
.mc-portal-main-link--mgmt strong { color: #6f42c1; }
.mc-portal-main-link span { font-size: 13px; color: var(--mc-muted); }

.mc-link-row--compact {
    padding: 12px 14px;
    min-height: auto;
    margin-bottom: 8px;
}

.mc-link-row--compact h3 { font-size: 14px; margin: 0 0 4px; }

.mc-link-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: #fafbfd;
    border: 1px solid #dce6f5;
    border-radius: 14px;
    margin-bottom: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 76px;
}

.mc-link-row:hover { border-color: #a8c4e8; box-shadow: 0 4px 12px rgba(43, 93, 170, 0.08); }

.mc-link-row-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #ecfdf5;
    color: #0f766e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    line-height: 1;
}

.mc-link-row-body { flex: 1; min-width: 0; }
.mc-link-row-body h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #1e3a5f; }
.mc-link-row-body p { margin: 0; font-size: 14px; color: #64748b; }

.mc-link-row-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
}

.mc-link-row-actions .mc-btn-sm,
.mc-link-row-actions .mc-copy-btn {
    padding: 10px 18px;
    font-size: 14px;
    min-height: 44px;
    min-width: 72px;
    border-radius: 10px;
}

.mc-public-url-inline {
    font-size: 12px;
    color: #0f766e;
    word-break: break-all;
    margin-top: 6px;
    font-family: Consolas, monospace;
}

.mc-copy-btn {
    border: 0;
    border-radius: 10px;
    padding: 10px 18px;
    cursor: pointer;
    background: #0f766e;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    min-height: 44px;
}

.mc-copy-btn:hover { filter: brightness(1.06); }

.mc-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.mc-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 14px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    min-height: 88px;
    text-align: center;
    transition: transform 0.15s, filter 0.15s;
    border: none;
}

.mc-action-btn:hover,
.mc-action-btn:active {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.mc-action-btn-icon {
    font-size: 32px;
    line-height: 1;
}

.mc-action-btn--blue { background: var(--mc-blue); }
.mc-action-btn--green { background: var(--mc-green); }
.mc-action-btn--orange { background: var(--mc-orange); }
.mc-action-btn--purple { background: var(--mc-purple); }
.mc-action-btn--teal { background: #0f766e; }

.mc-quick-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.mc-chip-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 14px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    min-height: 88px;
    border: 1px solid transparent;
    transition: filter 0.15s, transform 0.15s;
    color: #fff;
    text-align: center;
}

.mc-chip-btn:hover { filter: brightness(1.06); transform: translateY(-2px); }
.mc-chip-btn .mc-icon-sm { font-size: 32px; line-height: 1; }

.mc-chip-btn--blue { background: var(--mc-blue); color: #fff; }
.mc-chip-btn--green { background: var(--mc-green); color: #fff; }
.mc-chip-btn--orange { background: var(--mc-orange); color: #fff; }
.mc-chip-btn--purple { background: var(--mc-purple); color: #fff; }
.mc-chip-btn--teal { background: #0f766e; color: #fff; }

.mc-icon-sm {
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mc-panel--home {
    padding: 22px 24px;
    border-radius: 16px;
    border: 1px solid #eef2f8;
    box-shadow: 0 2px 10px rgba(43, 93, 170, 0.05);
}

.mc-home-footer {
    text-align: center;
    color: var(--mc-muted);
    font-size: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eef2f8;
}

.mc-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.mc-stat-card {
    background: var(--mc-surface);
    border-radius: var(--mc-radius-md);
    padding: 20px;
    box-shadow: var(--mc-shadow-sm);
    border-top: 4px solid var(--mc-blue);
}

.mc-stat-card.income { border-top-color: var(--mc-green); }
.mc-stat-card.expense { border-top-color: var(--mc-red); }
.mc-stat-card.net { border-top-color: var(--mc-purple); }
.mc-stat-card.waiting { border-top-color: var(--mc-orange); }

.mc-stat-label {
    color: var(--mc-muted);
    font-size: 14px;
    margin-bottom: 8px;
}

.mc-stat-value {
    font-size: 28px;
    font-weight: bold;
    color: var(--mc-blue);
}

/* ----- Buttons ----- */
.mc-btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--mc-blue);
    color: #fff;
    border: none;
    padding: 11px 20px;
    border-radius: var(--mc-radius-sm);
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s;
    min-height: 44px;
}

.mc-btn:hover,
.btn:hover {
    background: var(--mc-blue-dark);
    color: #fff;
}

.mc-btn-sm, .btn-sm {
    padding: 10px 18px;
    font-size: 14px;
    min-height: 44px;
}
.mc-btn-green, .btn-green { background: var(--mc-green); }
.mc-btn-green:hover, .btn-green:hover { background: var(--mc-green-dark); }
.mc-btn-orange, .btn-orange { background: var(--mc-orange); }
.mc-btn-purple, .btn-purple { background: var(--mc-purple); }
.mc-btn-red, .btn-red { background: var(--mc-red); }
.mc-btn-gray, .btn-gray, .btn.secondary, .mc-btn-secondary {
    background: var(--mc-gray);
}
.mc-btn-gray:hover, .btn-gray:hover, .btn.secondary:hover, .mc-btn-secondary:hover {
    background: var(--mc-gray-dark);
}

/* ----- Panels & tables ----- */
.mc-panel {
    background: var(--mc-surface);
    border-radius: var(--mc-radius-md);
    padding: 22px;
    box-shadow: var(--mc-shadow-sm);
    margin-bottom: 20px;
}

.mc-panel-title {
    color: var(--mc-blue);
    font-size: 1.2rem;
    margin-bottom: 16px;
}

.mc-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--mc-radius-md);
}

.mc-table-wrap::after,
.table-wrapper::after,
.table-section::after {
    content: '';
    display: block;
    height: 0;
}

.mc-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

.mc-table th {
    background: var(--mc-blue);
    color: #fff;
    padding: 12px;
    text-align: center;
    font-size: 14px;
}

.mc-table td {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.mc-table tr:hover {
    background: #f8fbff;
}

/* ----- Forms ----- */
.mc-form-group, .form-group {
    margin-bottom: 16px;
}

.mc-form-group label, .form-group label {
    display: block;
    font-weight: bold;
    color: var(--mc-blue);
    margin-bottom: 6px;
}

/* Form inputs — 16px prevents iOS auto-zoom on focus */
.mc-input,
.mc-select,
.mc-textarea,
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="email"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: var(--mc-radius-sm);
    font-size: 16px;
    font-family: inherit;
}

.mc-form-row, .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* ----- Alerts ----- */
.mc-alert {
    padding: 14px 18px;
    border-radius: var(--mc-radius-sm);
    margin-bottom: 18px;
    font-weight: bold;
}

.mc-alert-success { background: #d4edda; color: #155724; }
.mc-alert-error { background: #f8d7da; color: #721c24; }
.mc-alert-warning { background: #fff3cd; color: #856404; }

.alert { border-radius: 10px; padding: 12px 18px; margin-bottom: 16px; font-size: 14px; }
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-info { background: #cce5ff; color: #004085; border: 1px solid #b8daff; }
.alert-warning { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }

/* ----- Access denied ----- */
.mc-access-denied {
    max-width: 640px;
    margin: 40px auto;
    text-align: center;
}

.mc-access-denied-icon {
    font-size: 72px;
    margin-bottom: 20px;
}

.mc-access-denied h1 {
    color: var(--mc-blue);
    margin-bottom: 12px;
}

.mc-access-denied p {
    color: var(--mc-muted);
    line-height: 1.7;
    margin-bottom: 24px;
}

.mc-access-role-box {
    background: var(--mc-blue-light);
    border: 1px solid #d6e6ff;
    border-radius: var(--mc-radius-md);
    padding: 16px;
    margin-bottom: 24px;
    font-weight: bold;
    color: var(--mc-blue);
}

/* ----- Modals (lightweight) ----- */
.mc-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mc-modal-overlay.active {
    display: flex;
}

.mc-modal {
    background: var(--mc-surface);
    border-radius: var(--mc-radius-lg);
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.mc-modal-header {
    background: var(--mc-blue);
    color: #fff;
    padding: 18px 24px;
    border-radius: var(--mc-radius-lg) var(--mc-radius-lg) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mc-modal-body { padding: 24px; }
.mc-modal-footer {
    padding: 0 24px 24px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ----- Dashboard & report pages (shared legacy class names) ----- */
:root {
    --blue: var(--mc-blue);
    --blue-dark: var(--mc-blue-dark);
    --blue-light: var(--mc-blue-light);
    --green: var(--mc-green);
    --orange: var(--mc-orange);
    --purple: var(--mc-purple);
    --red: var(--mc-red);
    --teal: var(--mc-teal);
    --gray: var(--mc-gray);
    --shadow-sm: var(--mc-shadow-sm);
    --shadow-md: var(--mc-shadow-md);
    --radius-sm: var(--mc-radius-sm);
    --radius-md: var(--mc-radius-md);
    --radius-lg: var(--mc-radius-lg);
}

.dashboard { max-width: 1700px; margin: 0 auto; }

.header {
    background: var(--mc-surface);
    border-radius: var(--radius-lg);
    padding: 22px 28px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}
.header h1 { color: var(--blue); font-size: 24px; line-height: 1.2; }
.header-meta { color: var(--mc-muted); font-size: 13px; margin-top: 5px; line-height: 1.6; }
.header-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.btn-teal { background: var(--teal); }
.btn-teal:hover { background: #138496; }
.btn-outline {
    background: transparent;
    color: var(--blue);
    border: 2px solid var(--blue);
}
.btn-outline:hover { background: var(--blue-light); }
.btn-xs { padding: 5px 11px; font-size: 12px; border-radius: 6px; }
.btn-whatsapp { background: #25d366; }
.btn-whatsapp:hover { background: #1ebe5d; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.stat-card {
    background: var(--mc-surface);
    border-radius: var(--radius-md);
    padding: 20px 16px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border-top: 5px solid var(--blue);
    transition: transform 0.18s, box-shadow 0.18s;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(43, 93, 170, 0.12); }
.stat-card.green { border-top-color: var(--green); }
.stat-card.orange { border-top-color: var(--orange); }
.stat-card.red { border-top-color: var(--red); }
.stat-card.purple { border-top-color: var(--purple); }
.stat-card.teal { border-top-color: var(--teal); }
.stat-num {
    font-size: 30px;
    font-weight: bold;
    color: var(--blue);
    line-height: 1.1;
    word-break: break-all;
}
.stat-card.green .stat-num { color: var(--green); }
.stat-card.orange .stat-num { color: var(--orange); }
.stat-card.red .stat-num { color: var(--red); }
.stat-card.purple .stat-num { color: var(--purple); }
.stat-card.teal .stat-num { color: var(--teal); }
.stat-label { color: #666; font-size: 12px; margin-top: 8px; line-height: 1.4; }

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf2fa;
}
.section-title { font-size: 17px; font-weight: bold; color: var(--blue); }
.section-sub { font-size: 12px; color: #888; margin-top: 4px; line-height: 1.5; }

.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    border: 1px solid #e0e8f5;
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}
.table-wrapper table { width: 100%; border-collapse: collapse; min-width: 720px; }
.table-wrapper thead th {
    background: var(--blue);
    color: #fff;
    padding: 13px 14px;
    text-align: right;
    font-size: 13px;
    white-space: nowrap;
}
.table-wrapper tbody tr { border-bottom: 1px solid #f0f4fa; transition: background 0.12s; }
.table-wrapper tbody tr:hover { background: #f5f8ff; }
.table-wrapper tbody td {
    padding: 12px 14px;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    vertical-align: middle;
}
.table-wrapper tfoot td {
    background: var(--blue-light);
    font-weight: bold;
    padding: 13px 14px;
    font-size: 13px;
    border-top: 2px solid var(--blue);
}

.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}
.badge-paid { background: #d4edda; color: #155724; border: 1px solid var(--green); }
.badge-unpaid { background: #f8d7da; color: #721c24; border: 1px solid var(--red); }
.badge-neutral { background: #f1f3f5; color: #555; border: 1px solid #ccc; }
.badge-warning { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }
.badge-percentage { background: #e8f4fd; color: #0c5380; border: 1px solid #3b82f6; }
.badge-per-visit { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }
.badge-monthly { background: #d4edda; color: #155724; border: 1px solid var(--green); }
.badge-fixed { background: #f3e8ff; color: #5a32a3; border: 1px solid var(--purple); }
.badge-pending { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }
.badge-progress { background: #cce5ff; color: #004085; border: 1px solid #3b82f6; }
.badge-ready, .badge-done { background: #d4edda; color: #155724; border: 1px solid var(--green); }
.badge-delivered { background: #d1ecf1; color: #0c5460; border: 1px solid #17a2b8; }
.badge-low { background: #f8d7da; color: #721c24; border: 1px solid var(--red); }
.badge-ok { background: #d4edda; color: #155724; border: 1px solid var(--green); }

.amount-positive { color: var(--green); font-weight: bold; }
.amount-negative { color: var(--red); font-weight: bold; }
.amount-neutral { color: var(--blue); font-weight: bold; }

.filter-bar {
    background: var(--mc-surface);
    border: 1px solid #dce6f0;
    border-radius: var(--radius-md);
    padding: 14px 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.filter-group { display: flex; flex-direction: column; gap: 5px; }
.filter-group label { font-size: 12px; font-weight: bold; color: var(--blue); }

.tabs-wrapper {
    background: var(--mc-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-bottom: 20px;
}
.tabs-nav {
    display: flex;
    background: #f4f7fc;
    border-bottom: 2px solid #dce6f0;
    flex-wrap: wrap;
}
.tab-btn {
    flex: 1;
    min-width: 150px;
    padding: 16px 12px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 3px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.tab-btn:hover { background: #eaf0fb; color: var(--blue); }
.tab-btn.active { background: #fff; color: var(--blue); border-bottom-color: var(--blue); }
.tab-badge {
    background: var(--blue);
    color: #fff;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: bold;
}
.tab-badge.orange { background: var(--orange); }
.tab-badge.green { background: var(--green); }
.tab-badge.red { background: var(--red); }
.tab-content { display: none; padding: 26px 28px; }
.tab-content.active { display: block; }

.sub-tabs-nav { display: flex; gap: 0; margin-bottom: 0; border-bottom: 2px solid #dce6f0; }
.sub-tab-btn {
    padding: 11px 20px;
    border: none;
    background: #f8faff;
    font-size: 13px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 10px 10px 0 0;
    margin-left: 4px;
}
.sub-tab-btn.active { background: #fff; color: var(--blue); border-bottom-color: var(--blue); }
.sub-tab-content { display: none; }
.sub-tab-content.active { display: block; }

.pipeline { display: flex; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.pipeline-box {
    flex: 1;
    min-width: 200px;
    background: #f8faff;
    border-radius: 14px;
    padding: 16px;
    border: 2px solid #dce6f0;
}
.pipeline-box.active-blue { border-color: var(--blue); background: #f0f4ff; }
.pipeline-box.active-orange { border-color: var(--orange); background: #fff8ee; }
.pipeline-box.active-green { border-color: var(--green); background: #f0fff4; }
.pipeline-box.active-red { border-color: var(--red); background: #fff5f5; }
.pipeline-title { font-size: 13px; font-weight: bold; color: #555; margin-bottom: 10px; }
.pipeline-count { font-size: 28px; font-weight: bold; color: var(--blue); }

.expense-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.expense-cat-card {
    background: var(--mc-surface);
    border-radius: var(--radius-md);
    padding: 18px;
    border-right: 5px solid var(--orange);
    box-shadow: var(--shadow-sm);
}
.expense-cat-title { font-size: 15px; font-weight: bold; color: var(--blue); margin-bottom: 6px; }
.expense-cat-amount { font-size: 24px; font-weight: bold; color: var(--orange); margin-bottom: 8px; }
.expense-cat-count { font-size: 12px; color: #888; }

.payment-form-card {
    background: #f8faff;
    border: 1px solid #dce6f0;
    border-radius: var(--radius-md);
    padding: 24px;
    max-width: 600px;
    box-shadow: var(--shadow-sm);
}
.payment-form-card h3 {
    color: var(--blue);
    font-size: 16px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #dce6f0;
}

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 50, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.modal-overlay.active { display: flex; }
.modal-box {
    background: var(--mc-surface);
    border-radius: var(--radius-lg);
    width: 520px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}
.modal-header {
    background: var(--blue);
    color: #fff;
    padding: 18px 24px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header.green { background: var(--green); }
.modal-header.orange { background: var(--orange); }
.modal-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 17px;
    cursor: pointer;
}
.modal-body { padding: 22px 24px; }
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; padding: 4px 24px 22px; flex-wrap: wrap; }

.whatsapp-preview {
    background: #f0fdf4;
    border: 2px solid #25d366;
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 20px;
}
.message-bubble {
    background: #dcf8c6;
    border-radius: 14px 14px 0 14px;
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1.75;
    max-width: 500px;
    white-space: pre-wrap;
    word-break: break-word;
}
.var-chip {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
}

.empty-state { text-align: center; padding: 50px 20px; color: #bbb; }
.empty-state .empty-icon { font-size: 50px; margin-bottom: 14px; display: block; }

.alert-banner {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
    color: #856404;
}

#toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    pointer-events: none;
}
.toast {
    padding: 13px 28px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.toast.success { background: var(--green); }
.toast.error { background: var(--red); }
.toast.info { background: var(--blue); }

.mc-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}
.mc-metric-card-link { text-decoration: none; color: inherit; display: block; }
.mc-metric-card {
    background: var(--mc-surface);
    border-radius: var(--radius-md);
    padding: 25px 20px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border-top: 5px solid var(--blue);
    transition: transform 0.2s, box-shadow 0.2s;
}
.mc-metric-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.mc-metric-card.purple { border-top-color: var(--purple); }
.mc-metric-card.green { border-top-color: var(--green); }
.mc-metric-card.orange { border-top-color: var(--orange); }
.mc-metric-value { font-size: 34px; font-weight: bold; color: var(--mc-text); }
.mc-metric-title { font-size: 14px; color: var(--mc-muted); font-weight: bold; margin-top: 8px; }
.mc-metric-hint { font-size: 11px; color: var(--mc-muted); margin-top: 6px; line-height: 1.4; }
.mc-metric-card.teal { border-top-color: var(--teal); }
.mc-metric-card.red { border-top-color: var(--red); }

.mc-period-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--mc-surface);
    padding: 14px 18px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}
.mc-period-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mc-period-pill {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    background: #eef1f8;
    color: var(--mc-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s, color 0.2s;
}
.mc-period-pill:hover { background: #dde4f5; }
.mc-period-pill.active { background: var(--blue); color: #fff; }
.mc-period-pill-label { font-size: 12px; color: var(--mc-muted); margin-right: 4px; }
.mc-period-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mc-period-form input[type="date"] {
    padding: 7px 10px;
    border: 1px solid #d5dae8;
    border-radius: 8px;
    font-family: inherit;
}
.mc-period-sep { color: var(--mc-muted); font-size: 12px; }

.mc-detail-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}
.mc-detail-stat {
    background: var(--mc-surface);
    padding: 14px 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    min-width: 140px;
    text-align: center;
}
.mc-detail-stat-value { font-size: 22px; font-weight: bold; color: var(--mc-text); }
.mc-detail-stat-label { font-size: 12px; color: var(--mc-muted); margin-top: 4px; }
.mc-detail-stat--purple .mc-detail-stat-value { color: var(--purple); }
.mc-detail-stat--teal .mc-detail-stat-value { color: var(--teal); }

.mc-detail-panel {
    background: var(--mc-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    overflow: hidden;
}
.mc-detail-panel-head {
    padding: 14px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e8eef5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.mc-detail-panel-head h2 {
    margin: 0;
    font-size: 16px;
    color: var(--mc-blue);
    font-weight: 800;
}
.mc-detail-panel-body { padding: 18px; }
.mc-detail-panel--donation { border-top: 3px solid var(--purple); }
.mc-detail-panel--table { border-top: 3px solid var(--teal); }

.mc-form-row-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.mc-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #e2e8f0;
}
.mc-form-hint {
    font-size: 12px;
    color: var(--mc-muted);
    margin: 0;
}

.mc-table tfoot td {
    font-weight: bold;
    background: #f0f3fa;
    border-top: 2px solid #d5dae8;
}

.mc-print-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.mc-print-card { background: var(--mc-surface); border-radius: var(--radius-md); padding: 22px; box-shadow: var(--shadow-sm); border-top: 4px solid var(--blue); }
.mc-print-card-icon { font-size: 36px; margin-bottom: 8px; }
.mc-print-card h3 { margin: 0 0 8px; font-size: 18px; }
.mc-print-card p { font-size: 13px; color: var(--mc-muted); margin: 0 0 14px; line-height: 1.5; }
.mc-print-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mc-print-form select, .mc-print-form input[type="date"] { padding: 7px 10px; border: 1px solid #d5dae8; border-radius: 8px; font-family: inherit; }
.mc-print-page { max-width: 900px; margin: 0 auto; }
.mc-print-toolbar { display: flex; gap: 10px; margin-bottom: 16px; }
.mc-print-header { text-align: center; margin-bottom: 24px; border-bottom: 2px solid #333; padding-bottom: 16px; }
.mc-print-header h1 { margin: 0; font-size: 22px; }
.mc-print-header h2 { margin: 8px 0; font-size: 18px; color: #444; }
.mc-print-meta { font-size: 12px; color: #666; }
.mc-print-summary { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.mc-print-summary th, .mc-print-summary td { border: 1px solid #ccc; padding: 8px 12px; text-align: right; font-size: 13px; }
.mc-print-summary th { background: #f5f5f5; width: 22%; }
.mc-print-section { font-size: 16px; margin: 20px 0 8px; border-right: 4px solid var(--blue); padding-right: 10px; }
.mc-print-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 16px; }
.mc-print-table th, .mc-print-table td { border: 1px solid #ccc; padding: 6px 8px; text-align: right; }
.mc-print-table thead th { background: #eee; }
.mc-print-table tfoot td { font-weight: bold; background: #f9f9f9; }
.mc-print-footer { margin-top: 30px; text-align: center; font-size: 11px; color: #888; border-top: 1px dashed #ccc; padding-top: 12px; }
.mc-insights-alerts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.mc-insight-alert { padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.mc-insight-alert.high { background: #fde8e8; color: #c0392b; border: 1px solid #f5b7b1; }
.mc-insight-alert.medium { background: #fff8e1; color: #856404; border: 1px solid #ffe082; }
.mc-insights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mc-insights-panel { background: var(--mc-surface); border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-sm); }
.mc-chart-row { margin-bottom: 14px; }
.mc-chart-label { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.mc-chart-bars { display: flex; flex-direction: column; gap: 4px; }
.mc-chart-bar-wrap { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.mc-chart-bar { height: 14px; border-radius: 4px; min-width: 2px; }
.mc-chart-bar.previous { background: #b0bec5; }
.mc-chart-legend { display: flex; gap: 16px; font-size: 12px; color: var(--mc-muted); margin-top: 10px; }
.mc-chart-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 4px; vertical-align: middle; }
.mc-chart-legend .dot.current { background: var(--green); }
.mc-chart-legend .dot.previous { background: #b0bec5; }
.mc-rec-list { display: flex; flex-direction: column; gap: 12px; max-height: 600px; overflow-y: auto; }
.mc-rec-card { border-radius: 8px; padding: 14px; border-right: 4px solid #ccc; background: #fafbfc; }
.mc-rec-card.high { border-right-color: var(--red); background: #fff8f8; }
.mc-rec-card.medium { border-right-color: #ffc107; background: #fffdf5; }
.mc-rec-card.low { border-right-color: var(--green); }
.mc-rec-head { display: flex; align-items: flex-start; gap: 10px; }
.mc-rec-icon { font-size: 22px; }
.mc-rec-title { font-weight: 700; font-size: 14px; }
.mc-rec-cat { font-size: 11px; color: var(--mc-muted); }
.mc-rec-priority { margin-right: auto; font-size: 10px; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; background: #eee; }
.mc-rec-card.high .mc-rec-priority { background: #fde8e8; color: #c0392b; }
.mc-rec-detail { font-size: 13px; color: #444; margin: 8px 0 4px; line-height: 1.5; }
.mc-rec-action { font-size: 12px; color: var(--blue); margin: 0; }
.mc-insights-grand-total, .mc-insights-totals { margin-top: 20px; }
.mc-ai-advisor-panel {
    border: 1px solid #dbeafe;
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 55%);
}
.mc-ai-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 4px 4px;
}
.mc-ai-empty-icon {
    font-size: 42px;
    line-height: 1;
    opacity: 0.85;
    flex-shrink: 0;
}
.mc-ai-empty-body {
    flex: 1;
    min-width: 220px;
}
.mc-ai-empty-body strong {
    display: block;
    font-size: 15px;
    color: #1e3a5f;
    margin-bottom: 6px;
}
.mc-ai-empty-body p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.55;
}
.mc-ai-dev-hint {
    width: 100%;
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
}
.mc-ai-dev-hint summary {
    cursor: pointer;
    color: var(--blue);
    font-weight: 600;
    padding: 6px 0;
    list-style: none;
}
.mc-ai-dev-hint summary::-webkit-details-marker { display: none; }
.mc-ai-dev-hint pre {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 11px;
    overflow-x: auto;
    margin: 8px 0 0;
    color: #334155;
}
.mc-ai-status { font-size: 13px; color: #64748b; padding: 10px 0; }
.mc-ai-output {
    white-space: pre-wrap;
    line-height: 1.65;
    font-size: 14px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 16px 18px;
    margin-top: 10px;
    border: 1px solid #e2e8f0;
    max-height: 480px;
    overflow-y: auto;
}
.mc-table-compact th, .mc-table-compact td { padding: 6px 10px; font-size: 13px; }
.mc-insights-grand-total { background: var(--mc-surface); padding: 18px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-bottom: 20px; }
.mc-print-grand-total { margin-top: 24px; padding-top: 16px; border-top: 2px solid #333; }

.mc-hub-section { margin-bottom: 20px; }
.mc-hub-section-header {
    background: var(--mc-blue);
    color: #fff;
    padding: 14px 18px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}
.mc-hub-section-header.expense { background: var(--mc-orange); }
.mc-hub-section-header.admin { background: var(--mc-purple); }
.mc-hub-section-body {
    background: #f4f5fb;
    padding: 16px;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.mc-hub-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--mc-blue);
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    background: var(--mc-surface);
    padding: 13px;
    border-radius: var(--radius-sm);
    margin: 10px 0;
    transition: 0.2s;
}
.mc-hub-link:hover { background: var(--blue-light); transform: translateY(-2px); }

@media print {
    .mc-sidebar, .header-actions, .top-buttons, .filter-bar,
    .mc-period-bar, .mc-metric-grid, .no-print, .mc-print-toolbar,
    .tabs-nav, .mc-nav-dropdown, .mc-alert { display: none !important; }
    .mc-content { padding: 0; margin: 0; }
    .mc-layout { display: block; }
    .stat-card, .table-wrapper, .mc-table-wrap, .mc-insights-panel { box-shadow: none; border: 1px solid #ddd; }
    .mc-print-page, #insights-report { max-width: 100%; }
    .mc-insights-grid { grid-template-columns: 1fr; }
    .mc-insights-grand-total { box-shadow: none; border: 2px solid #333; page-break-inside: avoid; }
    body { background: #fff; }
}

@media (max-width: 960px) {
    .mc-insights-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   RESPONSIVE — Phone, iPad, Tablet sync
   ============================================================ */

/* iPad & small laptops */
@media (max-width: 1024px) {
    .mc-mobile-bar { display: flex; }

    .mc-layout { flex-direction: column; }

    .mc-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        width: min(300px, 88vw);
        height: 100vh;
        height: 100dvh;
        z-index: 1300;
        transform: translateX(100%);
        transition: transform 0.28s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    body.mc-nav-open .mc-sidebar {
        transform: translateX(0);
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.25);
    }

    .mc-sidebar-close { display: grid; }

    .mc-sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 1250;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
    }

    body.mc-nav-open .mc-sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .mc-content {
        padding: 16px;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .mc-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
    }

    .mc-modal-overlay {
        padding: 12px;
        align-items: flex-end;
    }

    .mc-modal {
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: var(--mc-radius-lg) var(--mc-radius-lg) 0 0;
    }

    .header { padding: 16px 18px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .mc-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Phones */
@media (max-width: 768px) {
    .header h1 { font-size: 19px; }
    .header-meta { font-size: 12px; }
    .stat-num { font-size: 24px; }
    .tab-content { padding: 16px; }
    .pipeline { flex-direction: column; }

    .mc-form-row, .form-row, .form-row-3, .money-grid, .mc-form-row-4 {
        grid-template-columns: 1fr !important;
    }

    .mc-cards-grid,
    .stats-grid,
    .stat-grid,
    .mc-stat-grid,
    .mc-action-grid {
        grid-template-columns: 1fr;
    }

    .mc-card-link {
        padding: 20px 18px;
        min-height: 92px;
    }

    .mc-card-icon {
        width: 56px;
        height: 56px;
        font-size: 30px;
    }

    .mc-link-row {
        flex-wrap: wrap;
        padding: 18px 16px;
    }

    .mc-link-row-actions {
        width: 100%;
        justify-content: stretch;
    }

    .mc-link-row-actions .mc-btn,
    .mc-link-row-actions .mc-copy-btn {
        flex: 1;
        justify-content: center;
    }

    .mc-action-btn {
        min-height: 96px;
    }

    .mc-action-btn-icon {
        font-size: 36px;
    }

    .mc-home-hero { padding: 18px 16px; flex-direction: column; text-align: center; }
    .mc-home-hero-brand { flex-direction: column; text-align: center; }
    .mc-home-hero h1 { font-size: 22px; }
    .mc-public-url-box { flex-direction: column; align-items: stretch; }

    .btn, .mc-btn {
        min-height: 44px;
        padding: 12px 16px;
    }

    .table-wrapper table,
    .mc-table,
    table { min-width: 600px; }

    .table-wrapper tbody td,
    .table-wrapper thead th {
        white-space: normal;
        font-size: 12px;
        padding: 10px 8px;
    }

    .mc-modal { width: 100%; max-width: 100%; }
    .mc-panel { padding: 16px; }
}

/* ----- Management hub & nav ----- */
.mc-mgmt-nav {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
    padding: 12px; background: white; border-radius: var(--mc-radius-md);
    box-shadow: var(--mc-shadow-sm); border: 1px solid #e2e8f5;
}
.mc-mgmt-nav-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 14px; border-radius: 10px; text-decoration: none;
    color: var(--mc-text); font-size: 13px; font-weight: 600;
    background: #f8fafc; border: 1px solid #e2e8f0;
}
.mc-mgmt-nav-item:hover { background: var(--mc-blue-light); color: var(--mc-blue-dark); }
.mc-mgmt-nav-item.active { background: var(--mc-blue); color: white; border-color: var(--mc-blue); }
.mc-mgmt-hero {
    background: linear-gradient(135deg, #1e4d91, #2f67d8); color: white;
    border-radius: var(--mc-radius-lg); padding: 28px; margin-bottom: 24px;
}
.mc-mgmt-hero h1 { margin: 0 0 8px; font-size: 26px; }
.mc-mgmt-hero p { margin: 0; opacity: 0.92; }
.mc-mgmt-hero-meta { margin-top: 12px !important; font-size: 14px; opacity: 0.9; }
.mc-mgmt-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px; margin-bottom: 24px;
}
.mc-mgmt-card {
    display: block; padding: 22px; border-radius: var(--mc-radius-lg);
    text-decoration: none; color: inherit; background: white;
    border: 2px solid #e2e8f5; box-shadow: var(--mc-shadow-sm);
    transition: transform 0.15s, box-shadow 0.15s;
}
.mc-mgmt-card:hover { transform: translateY(-2px); box-shadow: var(--mc-shadow-md); }
.mc-mgmt-card-icon { font-size: 32px; display: block; margin-bottom: 10px; }
.mc-mgmt-card h2 { margin: 0 0 6px; font-size: 18px; color: var(--mc-blue-dark); }
.mc-mgmt-card p { margin: 0 0 12px; font-size: 13px; color: var(--mc-muted); line-height: 1.5; }
.mc-mgmt-badge {
    display: inline-block; font-size: 12px; padding: 6px 10px;
    border-radius: 999px; background: #f1f5f9; color: #475569; font-weight: 600;
}
.mc-mgmt-card--teal { border-color: #99f6e4; }
.mc-mgmt-card--orange { border-color: #fed7aa; }
.mc-mgmt-card--purple { border-color: #ddd6fe; }
.mc-mgmt-card--blue { border-color: #bfdbfe; }
.mc-mgmt-card--green { border-color: #bbf7d0; }
.mc-mgmt-card--indigo { border-color: #c7d2fe; }
.mc-mgmt-checklist {
    background: white; border-radius: var(--mc-radius-lg); padding: 22px;
    border: 1px solid #e2e8f5;
}
.mc-mgmt-checklist h3 { margin: 0 0 14px; color: var(--mc-blue-dark); }
.mc-mgmt-checklist ul { list-style: none; padding: 0; margin: 0; }
.mc-mgmt-checklist li { padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px; }

/* Live department alerts + saved sound toggle */
.mc-alert-sound-toggle {
    width: 100%;
    margin: 8px 0 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #0f172a;
    background: #0f172a;
    color: #fff;
    font: inherit;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
}
.mc-alert-sound-toggle:hover { filter: brightness(1.08); }
.mc-sidebar .mc-alert-sound-toggle,
.mc-mobile-bar .mc-alert-sound-toggle {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.mc-sidebar .mc-alert-sound-toggle:hover,
.mc-mobile-bar .mc-alert-sound-toggle:hover { background: rgba(255, 255, 255, 0.2); }
.mc-alert-sound-toggle[aria-pressed="true"],
.mc-sidebar .mc-alert-sound-toggle[aria-pressed="true"],
.mc-mobile-bar .mc-alert-sound-toggle[aria-pressed="true"] {
    background: #059669;
    border-color: #34d399;
    color: #fff;
}
.mc-alert-sound-toggle--bar {
    width: auto;
    max-width: min(46vw, 220px);
    margin: 0;
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.25;
    flex-shrink: 0;
}
.dept-live-alerts {
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    padding: 12px 14px;
    margin: 0 0 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
.dept-live-alerts--strip {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid #94a3b8;
    border-radius: 6px;
    padding: 4px 8px;
    margin: 0 0 8px;
    min-height: 32px;
    max-height: 36px;
    overflow: hidden;
    box-shadow: none;
}
.dept-live-alerts--strip .dept-live-alerts__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.dept-live-alerts--strip .dept-live-chip {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
}
.dept-live-alerts--strip .dept-alert-inbox { display: none !important; }
.dept-live-alerts.is-changed { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25); }
.dept-live-alerts__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: #1e4d91;
    font-size: 0.95rem;
    gap: 10px;
}
.dept-live-alerts__pulse { font-size: 0.78rem; color: #64748b; }
.dept-live-alerts__pulse.is-tick { color: #059669; font-weight: 800; }
.dept-live-alerts__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dept-live-alerts__idle { color: #94a3b8; font-size: 0.85rem; }
.dept-live-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 800;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
}
.dept-live-chip--ready { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.dept-live-chip--warn { background: #fff7ed; border-color: #fdba74; color: #9a3412; animation: deptAlertPulse 1.4s ease infinite; }
.dept-live-chip--new { outline: 2px solid #f59e0b; }
@keyframes deptAlertPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.mc-alert-toast {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10055;
    background: #0f766e;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    padding: 12px 18px;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(15, 118, 110, 0.28);
    max-width: min(520px, calc(100vw - 24px));
    text-align: center;
}
.mc-alert-toast[hidden] { display: none !important; }

/* Small phones */
@media (max-width: 480px) {
    .mc-content { padding: 12px; }
    .mc-mobile-bar-name { font-size: 14px; }
    .header-actions { width: 100%; }
    .header-actions .btn { flex: 1; justify-content: center; }
}