/* ═══════════════════════════════════════════════════════════════════
   GLOBAL THEME — MedicalPRO Association Hub
   ═══════════════════════════════════════════════════════════════════ */

/* ── CSS Variables ── */
:root {
    --sidebar-bg: #0D1117;
    --main-bg: #F5F5F0;
    --teal: #3DBDB5;
    --blue: #4A7EC7;
    --cta: linear-gradient(135deg, #3DBDB5, #4A7EC7);
    --navy: #0B1826;
    --card-bg: #F6F9FB;
    --border: #E2EAF0;
    --text-primary: #0B1826;
    --text-secondary: #3D5166;
    --text-muted: #6B8099;
    --success: #27AE60;
    --warning: #F39C12;
    --error: #E74C3C;
    --radius-card: 10px;
    --radius-btn: 6px;
    --radius-pill: 20px;
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
    --font-heading: 'DM Sans', sans-serif;
    --font-body: 'DM Sans', sans-serif;
}

/* ── Base ── */
body {
    font-family: var(--font-body);
    background: var(--main-bg);
    color: var(--text-primary);
}

/* ── Bootstrap Overrides ── */
.btn-primary {
    background: var(--cta);
    border: none;
    color: #fff;
    border-radius: var(--radius-btn);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    transition: all 0.15s;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: linear-gradient(135deg, #35aaa3, #4072b5);
    border: none;
    color: #fff;
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: none;
}
.btn-primary:disabled { opacity: 0.6; transform: none; filter: none; }

.btn-secondary {
    background: #fff;
    border: 1.5px solid var(--teal);
    color: var(--teal);
    border-radius: var(--radius-btn);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    transition: all 0.15s;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background: rgba(61, 189, 181, 0.08);
    border-color: var(--teal);
    color: var(--teal);
    box-shadow: none;
}

/* ── Sidebar Toggle ── */
#btnToggleSidebar {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--text-primary);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}
#btnToggleSidebar:hover { color: var(--teal); }

/* Desktop: toggle collapses sidebar */
body.sidebarCollapsed #sidebarAssoc { transform: translateX(-240px); }
body.sidebarCollapsed #main.main { margin-left: 0; }
#sidebarAssoc { transition: transform 0.3s ease; }
#main.main { transition: margin-left 0.3s ease; }

/* Tablet/Mobile: sidebar is off-canvas by default, toggle opens it */
@media (max-width: 992px) {
    #main.main { margin-left: 0 !important; }
    #sidebarAssoc { transform: translateX(-240px); }
    body.sidebarOpen #sidebarAssoc { transform: translateX(0); }
    body.sidebarCollapsed #sidebarAssoc { transform: translateX(-240px); }
}

/* ── Additional Button Styles ── */
.btn-outline-danger {
    background: transparent;
    border: 1.5px solid var(--error);
    color: var(--error);
    border-radius: var(--radius-btn);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
}
.btn-outline-danger:hover { background: rgba(231, 76, 60, 0.08); color: var(--error); }

.btn-ghost {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text-secondary);
    border-radius: var(--radius-btn);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
}
.btn-ghost:hover { border-color: var(--text-muted); }

/* ── Pills / Badges ── */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
}
.pillGreen { background: #e8f8f0; color: #1e8c4e; }
.pillAmber { background: #fef3e2; color: #c47d0a; }
.pillRed { background: #fde8e6; color: #b93025; }
.pillTeal { background: #e3f7f6; color: #2a9e97; }
.pillNavy { background: #e8edf3; color: #2a3f5a; }
.pillLightAmber { background: #fefae9; color: #c47d0a; }
.pillGrey { background: #f0f2f5; color: #6b8099; }

/* ── Page Header ── */
.pageHeader { padding: 24px 28px 0; }
.pageTitle {
    font-family: var(--font-heading);
    font-size: 26px;
    color: var(--navy);
    line-height: 1.2;
}
.pageSubtitle { color: var(--text-muted); font-size: 14px; margin-top: 4px; }

/* ── Section Label ── */
.sectionLabel {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Table Card ── */
.tableCard {
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 24px;
}
.tableCard .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tableCard .table { margin-bottom: 0; min-width: 700px; white-space: nowrap; }
.tableCard .table th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-muted);
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    padding: 10px 14px;
}
.tableCard .table td {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(226, 234, 240, 0.6);
    vertical-align: middle;
}
.tableCard .table tr:last-child td { border-bottom: none; }
.tableCard .table tr:hover td { background: rgba(61, 189, 181, 0.03); }
.tableHeader {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.tableFooter {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Teal Link ── */
.tealLink { color: var(--teal); text-decoration: none; font-weight: 500; }
.tealLink:hover { color: #30a9a1; }

/* ── Action Links ── */
.actionLinks { display: flex; gap: 12px; }
.actionLink {
    color: var(--teal);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.actionLink:hover { color: #30a9a1; }
.actionLinkRed { color: var(--error); font-size: 12px; font-weight: 500; cursor: pointer; }
.actionLinkRed:hover { color: #c0392b; }

/* ── Type Badge ── */
.typeBadge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; }
.typeIcon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.typeIndividual .typeIcon { background: rgba(61, 189, 181, 0.12); }
.typeInstitutional .typeIcon { background: rgba(74, 126, 199, 0.12); }

/* ── Stat Cards ── */
.statGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.statCard {
    background: #fff;
    border-radius: var(--radius-card);
    padding: 18px 20px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    position: relative;
    overflow: hidden;
}
.statCard.navyLeft { border-left-color: var(--navy); }
.statCard.tealLeft { border-left-color: var(--teal); }
.statCard.amberLeft { border-left-color: var(--warning); }
.statCard.redLeft { border-left-color: var(--error); }
.statLabel {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.statValue { font-size: 32px; font-family: var(--font-heading); color: var(--navy); line-height: 1; }
.statSub { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.statIcon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 28px; opacity: 0.12; }

/* ── Cards ── */
.cardCustom {
    background: var(--card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
    padding: 20px;
}

/* ── Toggle Switch ── */
.toggleSwitch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.toggleSwitch input { display: none; }
.toggleTrack {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: #ccc;
    transition: background 0.2s;
    position: relative;
}
.toggleTrack::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
}
.toggleSwitch input:checked + .toggleTrack { background: var(--teal); }
.toggleSwitch input:checked + .toggleTrack::after { transform: translateX(16px); }

/* ── Filter Bar ── */
.filterBar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    background: #fff;
}
.filterInput {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--main-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 12px;
    flex: 1;
    min-width: 160px;
}
.filterInput input {
    border: none;
    background: transparent;
    font-size: 13px;
    font-family: var(--font-body);
    color: var(--text-primary);
    outline: none;
    width: 100%;
}
.filterSelect {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 13px;
    font-family: var(--font-body);
    color: var(--text-secondary);
    background: #fff;
    cursor: pointer;
    outline: none;
}

/* ── Stats Strip ── */
.statsStrip {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
    background: #fff;
}
.statsStripItem { padding: 0 12px; border-right: 1px solid var(--border); }
.statsStripItem:first-child { padding-left: 0; }
.statsStripItem:last-child { border-right: none; }
.statsStripItem strong { color: var(--text-primary); }

/* ── Bulk Action Bar ── */
.bulkBar {
    position: sticky;
    bottom: 0;
    background: var(--navy);
    color: #fff;
    padding: 12px 20px;
    display: none;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    z-index: 10;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.bulkBar.visible { display: flex; }

/* ── Slide Panel ── */
.panelOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
}
.panelOverlay.open { display: block; }
.slidePanel {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 400px;
    background: #fff;
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1050;
}
.slidePanel.open { transform: translateX(0); }
.panelAvatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-heading);
    margin: 0 auto 12px;
}
.panelName { font-family: var(--font-heading); font-size: 20px; text-align: center; color: var(--navy); }
.panelRole { font-size: 12px; text-align: center; color: var(--text-muted); margin-top: 4px; }
.panelSectionLabel {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.detailRow { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 13px; }
.detailLabel { color: var(--text-muted); }
.detailValue { color: var(--text-primary); font-weight: 500; text-align: right; }

/* ── Form Controls ── */
.formLabel { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.formInput {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 13px;
    font-family: var(--font-body);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s;
}
.formInput:focus { border-color: var(--teal); }

/* ── Toast ── */
.toastCustom {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--success);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.25s ease;
    max-width: 320px;
}
.toastCustom.show { transform: translateY(0); opacity: 1; }
.toastCustom.toastError { background: var(--error); }

/* ── Greeting ── */
.greetingLine { font-family: var(--font-heading); font-size: 28px; color: var(--navy); margin-bottom: 4px; }
.greetingSub { font-size: 14px; color: var(--text-muted); }

/* ── Message Items ── */
.messageItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    gap: 8px;
}
.messageItem:last-child { border-bottom: none; }
.messageTitle { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.messageRecipients { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.messageMeta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 12px; color: var(--text-muted); }

/* ── Automation Items ── */
.autoItem { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.autoItem:last-child { border-bottom: none; }
.autoDot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.autoName { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.autoDetail { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.autoStatus { font-size: 12px; color: var(--success); font-weight: 500; }

/* ── Automation Section ── */
.automationSection {
    background: #fff;
    border-radius: var(--radius-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-top: 20px;
}
.automationItem {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}
.automationItem:last-child { border-bottom: none; }
.automationTitle { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.automationDesc { font-size: 12px; color: var(--text-muted); }

/* ── Auto Status Card ── */
.autoStatusCard {
    background: #fff;
    border-radius: var(--radius-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--teal);
    box-shadow: var(--shadow-card);
    padding: 16px 20px;
    margin-bottom: 20px;
}
.autoStatusTitle {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--teal);
    margin-bottom: 4px;
}
.autoStatusDesc { font-size: 13px; color: var(--text-secondary); }

/* ── Badge Overview ── */
.badgeOverview {
    background: var(--card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 24px;
}
.badgeNavyBand {
    background: var(--navy);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.badgeLogo {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.badgeAssocName { color: #fff; font-size: 16px; font-weight: 600; }
.badgeAssocSub { color: rgba(255, 255, 255, 0.6); font-size: 12px; margin-top: 2px; }
.badgeStatValue { color: #fff; font-size: 22px; font-family: var(--font-heading); }
.badgeStatLabel { color: rgba(255, 255, 255, 0.5); font-size: 11px; }
.badgeCtxGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 20px; border-bottom: 1px solid var(--border); }
.badgeCtxCard { background: #fff; border-radius: 8px; padding: 16px; border: 1px solid var(--border); }
.badgeCtxLabel { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.badgeCtxCheck { color: var(--success); font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.badgeCtxDesc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 12px; }

/* ── Settings ── */
.settingsCard {
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 16px;
}
.settingsCardHead { padding: 16px 20px; border-bottom: 1px solid var(--border); background: #f8fafc; }
.settingsCardLabel { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.settingsCardBody { padding: 20px; }
.settingsFormRow {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(226, 234, 240, 0.6);
}
.settingsFormRow:last-child { border-bottom: none; }
.settingsFormLabel { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.settingsFormValue { font-size: 13px; color: var(--text-primary); }

/* ── Integration Row ── */
.integrationRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.integrationRow:last-child { border-bottom: none; }
.statusDotGreen { width: 8px; height: 8px; border-radius: 50%; background: var(--success); display: inline-block; }

/* ── Message Preview ── */
.msgPreview {
    background: var(--main-bg);
    border-radius: 8px;
    padding: 14px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    border: 1px solid var(--border);
}

/* ── CSV Import ── */
.dropZone {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
}
.dropZone:hover { border-color: var(--teal); background: rgba(61, 189, 181, 0.04); }

/* ── Check / X Marks ── */
.checkMark { color: var(--teal); font-weight: 600; }
.xMark { color: var(--text-muted); }

/* ── History Items ── */
.histItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.histItem:last-child { border-bottom: none; }

/* ── Bootstrap Modal Overrides (match sample design) ── */
.modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}
.modal-header .modal-title {
    font-family: var(--font-heading);
    font-size: 20px;
    color: var(--navy);
    font-weight: 600;
}
.modal-body { padding: 24px; }
.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
}

/* ── SweetAlert2 Theme Override ── */
.swal2-popup {
    border-radius: 12px !important;
    font-family: var(--font-body) !important;
    padding: 28px 24px !important;
}
.swal2-title {
    font-family: var(--font-heading) !important;
    font-size: 20px !important;
    color: var(--navy) !important;
    font-weight: 600 !important;
}
.swal2-html-container {
    font-size: 14px !important;
    color: var(--text-secondary) !important;
    line-height: 1.6 !important;
}
.swal2-confirm {
    background: var(--cta) !important;
    border: none !important;
    border-radius: var(--radius-btn) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    box-shadow: none !important;
}
.swal2-confirm:hover { filter: brightness(1.1) !important; }
.swal2-cancel {
    background: #fff !important;
    border: 1.5px solid var(--teal) !important;
    color: var(--teal) !important;
    border-radius: var(--radius-btn) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    box-shadow: none !important;
}
.swal2-cancel:hover { background: rgba(61, 189, 181, 0.08) !important; }
.swal2-icon { margin-bottom: 12px !important; }

/* ── Responsive ── */

/* Tablet (≤992px) */
@media (max-width: 992px) {
    .statGrid { grid-template-columns: repeat(2, 1fr); }
    .badgeCtxGrid { grid-template-columns: 1fr 1fr; }
    .badgeNavyBand { flex-direction: column; align-items: flex-start; }
    .settingsFormRow { grid-template-columns: 1fr; gap: 4px; }
    .slidePanel { width: 340px; }
    .pageHeader { padding: 16px 16px 0; }
    .filterBar { padding: 12px 16px; }
    .statsStrip { padding: 10px 16px; flex-wrap: wrap; gap: 4px; }
    .tableHeader { padding: 14px 16px; }
    .tableFooter { padding: 10px 16px; }
    .automationItem { flex-direction: column; gap: 8px; }
}

/* Mobile (≤576px) */
@media (max-width: 576px) {
    .statGrid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .statCard { padding: 14px; }
    .statCard .statValue { font-size: 24px; }
    .statIcon { display: none; }
    .greetingLine { font-size: 20px; }
    .greetingSub { font-size: 12px; }
    .pageTitle { font-size: 20px; }
    .pageSubtitle { font-size: 12px; }
    .pageHeader { padding: 12px 12px 0; }

    .badgeCtxGrid { grid-template-columns: 1fr; }
    .badgeNavyBand { padding: 16px; }
    .badgeStatValue { font-size: 18px; }

    .slidePanel { width: 100%; }
    .bulkBar { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
    .filterBar { gap: 6px; }
    .filterSelect { font-size: 12px; padding: 6px 8px; }

    .messageItem { flex-direction: column; align-items: flex-start; gap: 4px; }
    .messageMeta { align-self: flex-end; }

    .autoStatusCard { flex-direction: column; }

    .settingsCard { margin-bottom: 12px; }
    .settingsCardBody { padding: 14px; }

    .cardCustom { padding: 14px; }
    .tableCard .table th,
    .tableCard .table td { padding: 8px 10px; font-size: 12px; }
}