/* ==========================================================
   CareSuit Clinic — Dashboard theme (Bootstrap 5 overrides)
   ========================================================== */
:root {
    --cs-primary: #0d6efd;
    --cs-primary-dark: #0a58ca;
    --cs-sidebar: #0f2744;
    --cs-sidebar-2: #13315a;
    --cs-sidebar-text: #b9c6d8;
    --cs-bg: #f3f6fb;
    --cs-card: #ffffff;
    --cs-border: #dfe5ee;
    --cs-input-border: #b8c3d3;
    --cs-text: #1c2738;
    --cs-muted: #5f6d82;
    --cs-label: #26354b;
    --sidebar-w: 260px;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

body {
    background: var(--cs-bg);
    color: var(--cs-text);
    font-family: var(--bs-body-font-family);
    font-size: .925rem;
}

a { text-decoration: none; }

/* ---------- Sidebar (original colours; Hospital-MIS-style layout, font and scrollbar) ---------- */
.sidebar {
    --nav-text: var(--cs-sidebar-text); --nav-icon: var(--cs-sidebar-text);
    --nav-muted: #7f93ad; --nav-line: rgba(255,255,255,.08); --nav-hover: rgba(255,255,255,.07);
    --nav-active-bg: var(--cs-primary); --nav-active-shadow: 0 4px 12px rgba(13,110,253,.35);
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--cs-sidebar) 0%, var(--cs-sidebar-2) 100%);
    color: var(--nav-text); z-index: 1040; display: flex; flex-direction: column;
    transition: transform .25s ease;
}
.sidebar-brand {
    display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--nav-line); color: #fff;
}
.sidebar-brand .logo {
    width: 40px; height: 40px; border-radius: 10px; background: #fff; color: var(--cs-primary);
    display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0;
}
.sidebar-brand .name { font-weight: 600; font-size: 1rem; line-height: 1.2; }
.sidebar-brand small { color: var(--nav-muted); font-size: .74rem; }

.sidebar-nav {
    flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .5rem 0 1.5rem;
    /* thin, quiet scrollbar */
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.32); }

.nav-group { padding: .35rem .75rem; }
.nav-group + .nav-group { border-top: 1px solid var(--nav-line); }
.sidebar-nav .nav-section {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: 0; cursor: pointer; text-align: left;
    font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--nav-muted);
    padding: .7rem .75rem .45rem; font-weight: 600;
}
.sidebar-nav .nav-section:hover { color: #c3d1dc; }
.sidebar-nav .nav-section .chev { font-size: .75rem; transition: transform .2s ease; }
.nav-group.collapsed .nav-section .chev { transform: rotate(-90deg); }
.nav-group.collapsed .nav-group-items { display: none; }

.sidebar-nav .nav-link {
    position: relative; display: flex; align-items: center; gap: .85rem; color: var(--nav-text);
    padding: .62rem .75rem; border-radius: 8px; font-weight: 400; font-size: .94rem; margin-bottom: 1px;
    transition: background .15s ease, color .15s ease;
}
.sidebar-nav .nav-link i { font-size: 1.12rem; width: 22px; text-align: center; color: var(--nav-icon); transition: color .15s ease; }
.sidebar-nav .nav-link:hover { background: var(--nav-hover); color: #fff; }
.sidebar-nav .nav-link:hover i { color: #fff; }
.sidebar-nav .nav-link.active { background: var(--nav-active-bg); color: #fff; font-weight: 500; box-shadow: var(--nav-active-shadow); }
.sidebar-nav .nav-link.active i { color: #fff; }
.sidebar-super { background: linear-gradient(180deg, #1d1b3a 0%, #2b2560 100%); --nav-active-bg: #6f42c1; --nav-active-shadow: 0 4px 12px rgba(111,66,193,.4); }
/* Letterhead & Urdu text on printouts */
.letterhead { border-bottom-width: 3px; border-bottom-style: solid; }
.letterhead-logo { max-height: 64px; max-width: 140px; object-fit: contain; }
.ur { font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif; direction: rtl; line-height: 2.1; }
.rx-ur { font-size: .95rem; color: #26354b; text-align: right; }

/* Plan / subscription pill in the top bar (owners) */
.plan-pill { align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; font-size: .8rem; border: 1px solid; white-space: nowrap; }
.plan-pill:hover { filter: brightness(.97); }
.plan-pill-sep { width: 1px; height: 14px; background: currentColor; opacity: .3; }
.plan-pill-success { background: #ecf8f1; color: #146c43; border-color: #b7e2c8; }
.plan-pill-info { background: #e8f6fa; color: #087990; border-color: #ade3ee; }
.plan-pill-warning { background: #fff6e0; color: #8a5a00; border-color: #f3d9a4; }
.plan-pill-danger { background: #fdecee; color: #b02a37; border-color: #f3b9c0; }
.trial-banner { background: #fff4de; color: #7a4a00; border-bottom: 1px solid #f3d9a4; padding: .6rem 1.5rem; font-size: .88rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.trial-banner a { color: #7a4a00; font-weight: 700; text-decoration: underline; }

/* ---------- Permission matrix / plan cards ---------- */
.perm-group { border: 1px solid var(--cs-border); border-radius: 10px; padding: .85rem 1rem; height: 100%; background: #fff; }
.perm-group h6 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cs-primary); font-weight: 700; margin-bottom: .6rem; }
.perm-group .form-check { margin-bottom: .35rem; }
.plan-card { border: 2px solid var(--cs-border); border-radius: 14px; padding: 1.25rem; height: 100%; background: #fff; position: relative; }
.plan-card.featured { border-color: var(--cs-primary); box-shadow: 0 8px 24px rgba(13,110,253,.12); }
.plan-card.current { border-color: #198754; }
.plan-card .price { font-size: 1.6rem; font-weight: 700; }
.plan-card ul { padding-left: 0; list-style: none; margin: 1rem 0 0; }
.plan-card li { padding: .25rem 0; font-size: .88rem; }
.plan-card li i { color: #198754; margin-right: .4rem; }
.specialty-option { border: 1.5px solid var(--cs-input-border); border-radius: 10px; padding: .6rem .75rem; display: flex; gap: .5rem; align-items: center; cursor: pointer; font-weight: 500; font-size: .87rem; height: 100%; color: var(--cs-label); }
.btn-check:checked + .specialty-option { border-color: var(--cs-primary); background: #eef4ff; color: var(--cs-primary); }
.specialty-option i { font-size: 1.15rem; }

/* ---------- Main ---------- */
.main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
    background: #fff; border-bottom: 1px solid var(--cs-border); height: 64px;
    display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; position: sticky; top: 0; z-index: 1030;
}
.topbar .search { max-width: 380px; width: 100%; }
.topbar .avatar, .avatar {
    width: 38px; height: 38px; border-radius: 50%; background: #e3edff; color: var(--cs-primary);
    display: inline-grid; place-items: center; font-weight: 700; font-size: .85rem; flex-shrink: 0;
}
.avatar.lg { width: 72px; height: 72px; font-size: 1.5rem; }
.content { padding: 1.5rem; flex: 1; }
.footer { padding: 1rem 1.5rem; color: var(--cs-muted); font-size: .8rem; border-top: 1px solid var(--cs-border); background: #fff; }

.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.page-header h1 { font-size: 1.4rem; font-weight: 700; margin: 0; color: var(--cs-text); }
.page-header .breadcrumb { margin: .25rem 0 0; font-size: .8rem; }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--cs-border); border-radius: 12px; box-shadow: 0 1px 3px rgba(16,24,40,.05); }
.card-header {
    background: #fff; border-bottom: 1px solid var(--cs-border); padding: .9rem 1.25rem;
    font-weight: 600; border-radius: 12px 12px 0 0 !important; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.card-header .title { display: flex; align-items: center; gap: .5rem; font-size: .98rem; color: var(--cs-text); }
.card-header .title i { color: var(--cs-primary); }
.card-body { padding: 1.25rem; }

.stat-card { padding: 1.15rem 1.25rem; display: flex; align-items: center; gap: 1rem; height: 100%; }
.stat-card .icon { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; font-size: 1.45rem; flex-shrink: 0; }
.stat-card .value { font-size: 1.55rem; font-weight: 700; line-height: 1.1; color: var(--cs-text); }
.stat-card .label { color: var(--cs-muted); font-size: .82rem; font-weight: 500; }
.bg-soft-primary { background: #e7f0ff; color: #0d6efd; }
.bg-soft-success { background: #e3f6ec; color: #198754; }
.bg-soft-warning { background: #fff4de; color: #b26a00; }
.bg-soft-danger  { background: #fde8ea; color: #dc3545; }
.bg-soft-info    { background: #e0f6fa; color: #0a8aa3; }
.bg-soft-purple  { background: #efe8ff; color: #6f42c1; }

/* ---------- Forms (high-visibility) ---------- */
.form-label { font-weight: 600; color: var(--cs-label); font-size: .85rem; margin-bottom: .35rem; }
.form-label .req { color: #dc3545; margin-left: 2px; }
.form-control, .form-select {
    border: 1px solid var(--cs-input-border); border-radius: 8px; background-color: #fff;
    color: var(--cs-text); font-size: .925rem; padding: .55rem .8rem; min-height: 42px;
}
.form-control::placeholder { color: #8c97a8; opacity: 1; }
.form-control:focus, .form-select:focus {
    border-color: var(--cs-primary); box-shadow: 0 0 0 .2rem rgba(13,110,253,.18);
}
.form-control:disabled, .form-control[readonly] { background: #eef2f7; color: #45536a; }
.form-control.is-invalid, .form-select.is-invalid { border-color: #dc3545; background-color: #fffafa; }
.invalid-feedback { font-weight: 500; font-size: .8rem; }
.form-text { color: var(--cs-muted); font-size: .78rem; }
.input-group-text { background: #eef2f7; border-color: var(--cs-input-border); color: #45536a; font-weight: 500; }
.form-check-input { border-color: var(--cs-input-border); width: 1.1em; height: 1.1em; }
.form-check-label { color: var(--cs-label); font-weight: 500; }
.form-section-title {
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--cs-primary); border-bottom: 1px dashed var(--cs-border); padding-bottom: .5rem; margin: .5rem 0 1rem;
}
.form-actions {
    display: flex; gap: .5rem; justify-content: flex-end; padding: 1rem 1.25rem;
    border-top: 1px solid var(--cs-border); background: #fafbfd; border-radius: 0 0 12px 12px;
}
.ts-wrapper .ts-control { border: 1px solid var(--cs-input-border) !important; border-radius: 8px !important; min-height: 42px; padding: .5rem .8rem; font-size: .925rem; }
.ts-wrapper.focus .ts-control { border-color: var(--cs-primary) !important; box-shadow: 0 0 0 .2rem rgba(13,110,253,.18) !important; }
.ts-wrapper.is-invalid .ts-control { border-color: #dc3545 !important; }
.ts-dropdown { font-size: .9rem; }

/* ---------- Tables ---------- */
.table { margin: 0; color: var(--cs-text); }
.table > thead th {
    background: #f5f7fb; color: #4a5a72; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
    font-weight: 700; border-bottom: 1px solid var(--cs-border); padding: .75rem 1rem; white-space: nowrap;
}
.table > tbody td { padding: .75rem 1rem; vertical-align: middle; border-color: #edf1f6; }
.table-hover > tbody > tr:hover > * { background: #f8fbff; }
.table .fw-semibold a { color: var(--cs-text); }
.table .fw-semibold a:hover { color: var(--cs-primary); }
.table-items td { padding: .45rem .5rem; }
.table-items .form-control, .table-items .form-select { min-height: 38px; padding: .4rem .6rem; }

.badge { font-weight: 600; padding: .4em .7em; border-radius: 6px; }
.badge-soft-primary { background: #e7f0ff; color: #0b5ed7; }
.badge-soft-success { background: #ddf4e7; color: #146c43; }
.badge-soft-danger { background: #fde4e7; color: #b02a37; }
.badge-soft-warning { background: #fff1d6; color: #995c00; }
.badge-soft-info { background: #dcf3f8; color: #087990; }
.badge-soft-secondary { background: #eceff3; color: #4b5563; }

.filter-bar { background: #fff; border: 1px solid var(--cs-border); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.filter-bar .form-label { font-size: .75rem; }
.filter-bar .btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 42px; }

/* ---------- Detail view ---------- */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem 1.5rem; }
.detail-item .dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cs-muted); font-weight: 600; margin-bottom: .2rem; }
.detail-item .dd { font-weight: 600; color: var(--cs-text); word-break: break-word; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--cs-muted); }
.empty-state i { font-size: 2.4rem; display: block; margin-bottom: .5rem; color: #a7b3c4; }

.btn { border-radius: 8px; font-weight: 500; }
.btn-icon { width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; }
.pagination { margin: 0; }

/* ---------- Auth ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-hero {
    background: linear-gradient(140deg, #0f2744 0%, #0d6efd 100%); color: #fff; padding: 3rem;
    display: flex; flex-direction: column; justify-content: space-between;
}
.auth-hero h2 { font-weight: 700; font-size: 2rem; }
.auth-hero .feature { display: flex; gap: .75rem; margin-bottom: 1rem; color: #dbe7ff; }
.auth-form { display: grid; place-items: center; padding: 2rem; background: #fff; }
.auth-form .inner { width: 100%; max-width: 400px; }

/* ---------- Print ---------- */
.print-sheet { background: #fff; max-width: 860px; margin: 0 auto; padding: 2rem; border: 1px solid var(--cs-border); border-radius: 12px; }
.print-head { border-bottom: 3px solid var(--cs-primary); padding-bottom: 1rem; margin-bottom: 1rem; }
.rx-symbol { font-size: 2rem; font-weight: 700; color: var(--cs-primary); font-family: Georgia, serif; }

@media print {
    .sidebar, .topbar, .footer, .no-print, .page-header { display: none !important; }
    .main { margin: 0 !important; }
    .content { padding: 0 !important; }
    body { background: #fff; }
    .print-sheet { border: none; padding: 0; max-width: 100%; }
}

/* ---------- Responsive ---------- */
.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    body.sidebar-open .sidebar { transform: none; }
    body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1035; }
    .main { margin-left: 0; }
    .content { padding: 1rem; }
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-hero { display: none; }
}

/* ---------- Analytics dashboard & drill-down ---------- */
.min-w-0 { min-width: 0; }
.stat-link { color: inherit; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.stat-link:hover { color: inherit; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,39,68,.09); border-color: #c5d3e8; }
.kpi-card { position: relative; align-items: flex-start; padding-right: 2.25rem; }
.kpi-card .label { margin-bottom: .2rem; }
.kpi-card .value { font-size: 1.5rem; }
.kpi-foot { font-size: .76rem; margin-top: .35rem; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; line-height: 1.3; }
.kpi-go { position: absolute; top: .9rem; right: .95rem; color: #b3c0d1; font-size: .9rem; transition: color .15s ease, transform .15s ease; }
.stat-link:hover .kpi-go { color: var(--cs-primary); transform: translate(2px, -2px); }
.delta { display: inline-flex; align-items: center; font-weight: 600; border-radius: 999px; padding: .05rem .45rem .05rem .2rem; }
.delta.up { background: #e3f6ec; color: #146c43; }
.delta.down { background: #fde8ea; color: #b02a37; }
.section-sub { font-size: .74rem; color: var(--cs-muted); font-weight: 500; }
.legend-row { display: flex; align-items: center; gap: .55rem; padding: .4rem .55rem; border-radius: 8px; color: var(--cs-text); }
a.legend-row:hover { background: #f1f5fb; color: var(--cs-text); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.bar-track { height: 7px; background: #edf1f7; border-radius: 6px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 6px; }
.stack-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: #edf1f7; }
.stack-bar span { display: block; height: 100%; }
.mix-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem; border: 1px solid var(--cs-border); border-radius: 999px; font-size: .8rem; color: var(--cs-text); }
a.mix-chip:hover { background: #f1f5fb; color: var(--cs-text); }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; line-height: 1.1; }
.date-chip { width: 42px; flex-shrink: 0; text-align: center; border-radius: 8px; background: #eef4ff; color: #0b5ed7; padding: .2rem 0; line-height: 1.05; }
.date-chip span { display: block; font-weight: 700; font-size: 1.05rem; }
.date-chip small { font-size: .66rem; text-transform: uppercase; }
tr[data-href] { cursor: pointer; }
.drilldown-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: -.35rem 0 1rem; }
.drill-chip { display: inline-flex; align-items: center; gap: .2rem; background: #e7f0ff; color: #0b5ed7; border-radius: 999px; padding: .2rem .45rem .2rem .75rem; font-size: .8rem; font-weight: 500; }
.drill-chip:hover { background: #d4e4ff; color: #0a58ca; }
.report-card .value { font-size: 1.25rem; }
@media (max-width: 575.98px) {
    .kpi-card { padding: .9rem .85rem; padding-right: 1.6rem; gap: .6rem; }
    .kpi-card .icon { width: 38px; height: 38px; font-size: 1.1rem; border-radius: 10px; }
    .kpi-card .value { font-size: 1.15rem; }
    .kpi-card .label { font-size: .74rem; }
    .kpi-go { top: .7rem; right: .7rem; font-size: .8rem; }
}