/**
 * Caring Squad — Compact Design System
 * Default UI standard for dashboards, cards, forms, tables, and sections.
 */

:root {
    --cs-compact-radius: 17px;
    --cs-compact-radius-sm: 12px;
    --cs-stat-value-size: 17px;
    --cs-stat-title-size: 14.5px;
    --cs-stat-icon-size: 44px;
    --cs-stat-icon-font: 19px;
    --cs-stat-card-min-height: 118px;
    --cs-stat-card-padding: 15px 16px;
    --cs-stat-gap: 22px;
    --cs-stat-inner-gap: 12px;
    --cs-btn-height: 42px;
    --cs-btn-padding-x: 20px;
    --cs-btn-font: 14px;
    --cs-btn-weight: 500;
    --cs-section-gap: 24px;
    --cs-card-padding: 20px;
    --cs-panel-title-size: 24px;
    --cs-panel-subtitle-size: 13px;
    --cs-form-field-height: 40px;
    --cs-form-label-size: 12px;
    --cs-form-gap: 12px;
    --cs-table-head-py: 10px;
    --cs-table-head-px: 10px;
    --cs-table-cell-py: 10px;
    --cs-table-cell-px: 10px;
    --cs-line-tight: 1.2;
    --cs-line-snug: 1.3;
}

/* ── Statistic cards (admin & expert dashboards) ── */
body.admin-body .stat-card,
body.expert-dashboard .stat-card {
    min-height: var(--cs-stat-card-min-height);
    padding: var(--cs-stat-card-padding);
    border-radius: var(--cs-compact-radius);
    gap: var(--cs-stat-inner-gap);
}

body.admin-body .stats-grid,
body.expert-dashboard .stats-grid {
    gap: var(--cs-stat-gap);
}

body.admin-body .stat-icon,
body.expert-dashboard .stat-icon {
    width: var(--cs-stat-icon-size);
    height: var(--cs-stat-icon-size);
    font-size: var(--cs-stat-icon-font);
    border-radius: 14px;
}

body.admin-body .stat-card strong,
body.expert-dashboard .stat-value {
    font-size: var(--cs-stat-value-size);
    font-weight: 600;
    line-height: var(--cs-line-tight);
}

body.admin-body .stat-card span:not(.badge):not(.status),
body.expert-dashboard .stat-title {
    font-size: var(--cs-stat-title-size);
    font-weight: 500;
    line-height: var(--cs-line-snug);
}

body.expert-dashboard .stat-subtitle {
    display: none;
}

body.expert-dashboard .stat-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

body.expert-dashboard .stat-value {
    margin: 0;
    padding: 0;
}

body.expert-dashboard .stat-title {
    margin: 0;
    line-height: 1.2;
}

/* Stat cards: icon + value + title only — avoid subtitles unless essential */

/* ── Section cards & panels ── */
.admin-card,
.dashboard-panel,
.form-card,
.filters-box,
.table-box {
    padding: var(--cs-card-padding);
    border-radius: var(--cs-compact-radius);
}

/* Admin card headings use .section-title / .section-subtitle in admin.css */
.admin-card h2:not(.section-title):not(.card-title),
.admin-card .card-title:not(.section-title),
.panel-title {
    font-size: var(--cs-panel-title-size);
    line-height: 1.2;
    margin-bottom: 10px;
}

.admin-card .card-sub:not(.section-subtitle),
.panel-subtitle {
    font-size: var(--cs-panel-subtitle-size);
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 14px;
}

.dashboard-sections {
    gap: var(--cs-section-gap);
}

.dashboard-stats {
    margin-bottom: var(--cs-section-gap);
}

body.admin-dashboard .stats-grid,
body.admin-dashboard .dashboard-grid {
    margin-bottom: var(--cs-section-gap);
    gap: var(--cs-stat-gap);
}

body.admin-dashboard .admin-content > .admin-card {
    margin-bottom: var(--cs-section-gap);
}

/* ── Compact buttons ── */
.btn,
.btn-pill,
button[type="submit"]:not(.unstyled) {
    min-height: var(--cs-btn-height);
    padding: 0 var(--cs-btn-padding-x);
    font-size: var(--cs-btn-font);
    font-weight: var(--cs-btn-weight);
    border-radius: var(--cs-compact-radius-sm);
}

.btn-pill {
    padding: 0 var(--cs-btn-padding-x);
    border-radius: 999px;
}

.btn-sm {
    min-height: 34px;
    padding: 0 12px;
    font-size: 12px;
}

/* ── Compact forms ── */
.form-group,
.filter-group {
    gap: 5px;
}

.form-group label,
.filter-group label {
    font-size: var(--cs-form-label-size);
}

.form-group input,
.form-group select,
.form-group textarea,
.filter-group input,
.filter-group select,
.search-box input {
    min-height: var(--cs-form-field-height);
    height: var(--cs-form-field-height);
    padding: 0 12px;
    font-size: 13px;
}

.form-group textarea {
    height: 100px;
    padding: 10px 12px;
}

.form-grid {
    gap: var(--cs-form-gap);
}

.form-actions {
    margin-top: 14px;
    gap: 8px;
}

.search-box button,
.filter-actions .apply-btn,
.filter-actions .reset-btn {
    min-height: var(--cs-form-field-height);
    height: var(--cs-form-field-height);
    padding: 0 16px;
    font-size: 13px;
}

/* ── Compact tables ── */
.doctors-table thead th,
.admin-table thead th {
    padding: var(--cs-table-head-py) var(--cs-table-head-px);
    font-size: 10.5px;
}

.doctors-table tbody td,
.admin-table tbody td {
    padding: var(--cs-table-cell-py) var(--cs-table-cell-px);
    font-size: 12px;
}

.table-toolbar,
.pagination-bar {
    padding: 10px 14px;
}

/* ── Expert dashboard header & toolbar ── */
body.expert-dashboard .expert-content {
    padding: 24px;
}

.dashboard-hero {
    margin-bottom: 18px;
    gap: 16px;
}

.dashboard-name {
    font-size: 28px;
    margin-bottom: 4px;
}

.dashboard-tagline,
.dashboard-greeting {
    font-size: 13px;
    line-height: var(--cs-line-snug);
}

.dashboard-toolbar {
    margin-bottom: var(--cs-section-gap);
    padding: 12px 16px;
    gap: 12px;
}

.dashboard-search input {
    min-height: var(--cs-form-field-height);
    height: var(--cs-form-field-height);
    font-size: 13px;
}

.dashboard-date {
    font-size: 13px;
}

.panel-empty {
    padding: 20px 14px;
    font-size: 13px;
    gap: 8px;
}

.panel-empty i {
    font-size: 22px;
}

body.expert-dashboard .quick-action {
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--cs-compact-radius-sm);
}

/* ── Expert auth / login ── */
.expert-auth-card {
    padding: 28px 26px 24px;
}

.expert-auth-card h1 {
    font-size: 28px;
}

/* ── Admin stat row (horizontal layout) ── */
body.admin-body .stat-card {
    padding: var(--cs-stat-card-padding);
    gap: var(--cs-stat-inner-gap);
    border-radius: var(--cs-compact-radius);
}

body.admin-body .stat-card strong {
    font-size: var(--cs-stat-value-size);
    font-weight: 600;
}

body.admin-body .stat-card span {
    font-size: var(--cs-stat-desc-size);
    font-weight: 400;
}

body.admin-body .stat-icon {
    width: var(--cs-stat-icon-size);
    height: var(--cs-stat-icon-size);
    font-size: var(--cs-stat-icon-font);
}

/* ── Expert Panel — global compact standard ── */
body.expert-body .expert-content {
    padding: var(--exp-section-gap);
}

body.expert-body .btn,
body.expert-body .ep-btn,
body.expert-body .ed-btn,
body.expert-body .eef-btn {
    min-height: var(--exp-btn-h);
    font-size: var(--exp-btn-font);
    font-weight: var(--exp-btn-weight);
    border-radius: 12px;
}

body.expert-profile .ep-empty,
body.expert-dashboard .ed-empty {
    padding: 18px 12px;
}

/* ── Membership / apply forms ── */
.membership-panel,
.apply-panel,
.wizard-step-card {
    padding: var(--cs-card-padding);
}

@media (max-width: 767px) {
    body.expert-dashboard .expert-content {
        padding: 18px 16px 22px;
    }

    .dashboard-name {
        font-size: 24px;
    }

    body.expert-dashboard .stat-value,
    .admin-body .stat-card strong {
        font-size: 18px;
    }

    body.expert-dashboard .stat-title {
        font-size: 16px;
    }
}