/*
   ALEA TYPOGRAPHY V2
   Shared readable type scale for professional, platform admin and public UI.
   Load LAST, after module/page CSS.
*/

:root {
    --type-xs: 13px;
    --type-sm: 14px;
    --type-md: 15px;
    --type-lg: 18px;
    --type-xl: 22px;
    --type-2xl: 28px;
    --type-3xl: 40px;

    --leading-tight: 1.2;
    --leading-ui: 1.35;
    --leading-body: 1.55;
}

/* ---------------------------------------------------------
   Global defaults
   --------------------------------------------------------- */

html {
    font-size: 16px;
}

body,
button,
input,
select,
textarea {
    font-family: var(--sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
}

body {
    font-size: var(--type-md);
    line-height: var(--leading-body);
}

button,
input,
select,
textarea {
    font-size: var(--type-md);
}

input,
select,
textarea {
    line-height: var(--leading-ui);
}

small {
    font-size: var(--type-xs);
    line-height: 1.45;
}

label {
    font-size: var(--type-sm);
}

h1,
h2,
h3,
p {
    text-wrap: pretty;
}

h1,
h2,
h3 {
    text-wrap: balance;
}

/* ---------------------------------------------------------
   Main navigation / account
   --------------------------------------------------------- */

.desktop-nav a,
.mobile-nav a {
    font-size: var(--type-md) !important;
}

.account-trigger,
.account-menu,
.account-menu a,
.account-menu button,
.account-menu-name,
.account-menu-company {
    font-size: var(--type-sm) !important;
}

/* ---------------------------------------------------------
   Shared page typography
   --------------------------------------------------------- */

.page h1,
.settings-page h1,
.clients-page h1,
.client-activity-page h1 {
    line-height: 1.02;
}

.page > p,
.settings-page > p,
.clients-heading p,
.client-activity-head p {
    font-size: var(--type-md) !important;
    line-height: var(--leading-body) !important;
}

.primary-action,
.secondary-action {
    font-size: var(--type-sm) !important;
}

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

.settings-field label,
.client-grid label > span,
.client-wide-field > span,
.client-label,
.agenda-drawer label,
.agenda-field label,
.register-card label > span,
.register-card legend {
    font-size: var(--type-sm) !important;
    line-height: var(--leading-ui) !important;
}

.settings-input,
.settings-select,
.client-grid input,
.client-grid select,
.client-wide-field textarea,
.client-notes,
.agenda-drawer input,
.agenda-drawer select,
.agenda-drawer textarea,
.register-card input,
.register-card select,
.register-card textarea {
    font-size: var(--type-md) !important;
    line-height: var(--leading-ui) !important;
}

.settings-field-hint,
.settings-section-hint,
.client-wide-field small,
.client-help,
.client-section-title p,
.register-card small,
.register-approval-note,
.register-whatsapp-notify small {
    font-size: var(--type-xs) !important;
    line-height: 1.5 !important;
}

.client-drawer-header h2,
.settings-drawer h2,
.agenda-drawer h2 {
    line-height: 1.05;
}

.client-section h3,
.settings-drawer-section h3,
.agenda-drawer h3 {
    font-size: var(--type-md) !important;
    line-height: var(--leading-tight) !important;
}

/* Buttons inside drawers / forms */
.client-save,
.client-cancel,
.client-danger-quiet,
.client-delete-button,
.client-approve-button,
.settings-save,
.settings-cancel,
.settings-danger,
.agenda-drawer button,
.register-submit,
.register-whatsapp-button {
    font-size: var(--type-sm) !important;
}

/* ---------------------------------------------------------
   Services / Locations / Professionals / Company
   --------------------------------------------------------- */

.settings-detail-row > span,
.settings-detail-value,
.settings-notification-summary strong {
    font-size: var(--type-md) !important;
}

.settings-notification-summary small {
    font-size: var(--type-xs) !important;
}

.settings-list-row h2,
.location-row h2,
.professional-row h2,
.service-row h2 {
    font-size: var(--type-lg) !important;
}

.settings-list-row p,
.location-row p,
.professional-row p,
.service-row p,
.settings-list-row span,
.location-row span,
.professional-row span,
.service-row span {
    font-size: var(--type-sm) !important;
}

/* ---------------------------------------------------------
   Clients list
   --------------------------------------------------------- */

.client-identity h2 {
    font-size: var(--type-md) !important;
}

.client-identity p,
.client-preferences strong,
.client-preferences span,
.client-source span {
    font-size: var(--type-sm) !important;
}

.client-status-pill,
.client-row-actions a,
.clients-count,
.clients-registration-link,
.clients-registration-link code {
    font-size: var(--type-xs) !important;
}

.client-service-options label {
    font-size: var(--type-sm) !important;
}

/* ---------------------------------------------------------
   Client history / upcoming
   --------------------------------------------------------- */

.client-activity-actions a,
.client-history-filter-field label,
.client-history-filter-button,
.client-history-filter-clear,
.client-history-period {
    font-size: var(--type-sm) !important;
}

.client-history-filter-field select {
    font-size: var(--type-md) !important;
}

.client-kpi span {
    font-size: var(--type-sm) !important;
}

.client-kpi strong {
    font-size: var(--type-xl) !important;
}

.client-activity-date strong,
.client-activity-date span,
.client-activity-main strong,
.client-activity-main span,
.client-activity-main small,
.client-activity-value strong,
.client-activity-value span,
.activity-status {
    font-size: var(--type-sm) !important;
}

.client-activity-main strong {
    font-size: var(--type-md) !important;
}

/* ---------------------------------------------------------
   Today
   --------------------------------------------------------- */

.day-summary {
    font-size: var(--type-sm) !important;
}

.summary-item > span:last-child {
    font-size: var(--type-sm) !important;
}

.summary-item strong {
    font-family: var(--serif) !important;
    font-size: 36px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

.summary-symbol {
    font-size: 0 !important;
}

.today-client-alerts-head span,
.today-client-alert-row span,
.today-client-alert-row em {
    font-size: var(--type-sm) !important;
}

.today-client-alert-row strong {
    font-size: var(--type-md) !important;
}

.session-card,
.session-card p,
.session-card span,
.session-card small {
    font-size: var(--type-sm) !important;
}

.session-card h2,
.session-card h3,
.today-session-title {
    font-size: var(--type-lg) !important;
}

/* ---------------------------------------------------------
   Agenda
   --------------------------------------------------------- */

.agenda-toolbar,
.agenda-toolbar button,
.agenda-toolbar a,
.agenda-filter-field label,
.agenda-filter-select,
.agenda-view-controls,
.agenda-segmented a,
.agenda-interval-control a {
    font-size: var(--type-sm) !important;
}

.agenda-event-time,
.agenda-event-meta,
.agenda-event-client,
.agenda-event-pending,
.agenda-compact-meta,
.agenda-compact-client,
.agenda-capacity,
.agenda-status {
    font-size: var(--type-sm) !important;
}

.agenda-event-link strong,
.agenda-compact-event h3,
.agenda-event-title {
    font-size: var(--type-md) !important;
}

.agenda-client-name,
.agenda-client-search input,
.agenda-drawer-client-search input,
.agenda-drawer-client-select,
.agenda-drawer-add-button {
    font-size: var(--type-sm) !important;
}

/* Share preview keeps stronger hierarchy */
.agenda-share-time-label,
.agenda-share-vacancy > span,
.agenda-share-kicker {
    font-size: var(--type-xs) !important;
}

.agenda-share-time,
.agenda-share-vacancy > strong,
.agenda-share-meta-line,
.agenda-share-session li {
    font-size: var(--type-md) !important;
}

.agenda-share-session h3 {
    font-size: var(--type-lg) !important;
}

/* ---------------------------------------------------------
   Public Join
   --------------------------------------------------------- */

.register-card {
    font-size: var(--type-md);
}

.register-card > p {
    font-size: var(--type-md) !important;
}

.register-eyebrow {
    font-size: var(--type-xs) !important;
}

.register-options label {
    font-size: var(--type-md) !important;
}

.register-card h1 {
    line-height: 1.05;
}

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

.login-panel,
.login-panel p,
.login-field label,
.login-remember,
.login-help {
    font-size: var(--type-md) !important;
}

.login-panel input,
.login-panel button {
    font-size: var(--type-md) !important;
}

/* ---------------------------------------------------------
   Responsive
   Customer/public flows stay especially readable on mobile.
   --------------------------------------------------------- */

@media (max-width: 820px) {
    :root {
        --type-xs: 13px;
        --type-sm: 14px;
        --type-md: 16px;
        --type-lg: 18px;
        --type-xl: 22px;
    }

    .desktop-nav a {
        font-size: var(--type-md) !important;
    }

    .client-status-pill,
    .client-row-actions a,
    .clients-count {
        font-size: var(--type-sm) !important;
    }

    .agenda-toolbar,
    .agenda-toolbar button,
    .agenda-toolbar a,
    .agenda-filter-select {
        font-size: var(--type-sm) !important;
    }

    .register-card input,
    .register-card select,
    .register-card textarea,
    .register-submit,
    .register-whatsapp-button {
        font-size: var(--type-md) !important;
    }

    .summary-item strong {
        font-size: 31px !important;
    }
}

/* ---------------------------------------------------------
   ALEA platform backoffice
   The original admin module used 8–11px labels extensively.
   Keep the dense layout, but use the same readable floor as
   the professional and client experiences.
   --------------------------------------------------------- */

.platform-body,
.platform-login-body {
    font-family: var(--sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    font-size: var(--type-md);
    line-height: var(--leading-body);
}

.platform-body button,
.platform-body input,
.platform-body select,
.platform-login-body button,
.platform-login-body input,
.platform-login-body select {
    font-size: var(--type-sm) !important;
    line-height: var(--leading-ui) !important;
}

.platform-body label,
.platform-body small,
.platform-login-body label,
.platform-login-body small,
.platform-label,
.platform-kicker,
.platform-card-head > span,
.platform-row-time,
.platform-row-main small,
.platform-row-meta small,
.platform-error-company small,
.platform-progress-heading > div > span,
.platform-progress-heading small,
.platform-progress-kpis p {
    font-size: var(--type-xs) !important;
    line-height: var(--leading-ui) !important;
}

.platform-body p,
.platform-body dd,
.platform-login-body p,
.platform-tab,
.platform-row-main p,
.platform-row-meta strong,
.platform-error-title small,
.platform-error-detail dd,
.platform-company-card > small,
.platform-client-card dd,
.platform-progress-kpis h3 {
    font-size: var(--type-sm) !important;
    line-height: var(--leading-body) !important;
}

.platform-row-title strong,
.platform-error-title strong,
.platform-company-head h3,
.platform-client-head h3,
.platform-card-head h2,
.platform-progress-heading h2,
.platform-login-panel-head p {
    font-size: var(--type-md) !important;
    line-height: var(--leading-tight) !important;
}

.platform-body code,
.platform-body time,
.platform-body dt,
.platform-badge,
.platform-error-state-counts > span,
.platform-error-action,
.platform-maintenance label,
.platform-maintenance > div span,
.platform-login-shell > header > span,
.platform-login-panel-head > span,
.platform-login-note {
    font-size: 12px !important;
    line-height: var(--leading-ui) !important;
}

.platform-heading h1 {
    font-size: clamp(46px, 6vw, 58px) !important;
    line-height: 1 !important;
}

.platform-login-intro h1 {
    font-size: clamp(48px, 7vw, 76px) !important;
}

.platform-login-panel-head h2 {
    font-size: clamp(34px, 5vw, 40px) !important;
}

@media (max-width: 820px) {
    .platform-body,
    .platform-login-body {
        font-size: 16px;
    }

    .platform-body input,
    .platform-body select,
    .platform-login-body input {
        font-size: 16px !important;
    }
}

/* Printing should remain compact but readable. */
@media print {
    body {
        font-size: 12px;
    }

    .agenda-share-session li,
    .agenda-share-meta-line,
    .agenda-share-time,
    .agenda-share-vacancy > strong {
        font-size: 12px !important;
    }
}

/* ---------------------------------------------------------
   Readability normalization
   Keep secondary UI compact, but never visually miniature.
   --------------------------------------------------------- */

.account-menu-label,
.account-menu-identity span,
.company-notifications-kicker,
.company-notification-side time,
.company-notification-side em,
.company-notification-new,
.company-notification-bell-count,
.admin-kicker,
.admin-filter label,
.admin-card-head > span,
.admin-row-time,
.admin-row-main small,
.admin-row-meta small,
.admin-row-meta code,
.admin-badge,
.admin-error-row summary code,
.admin-error-detail dt,
.admin-client-card dt,
.admin-client-head a,
.admin-client-card > small,
.wl-kicker,
.wl-status,
.bm-kicker,
.bm-row code,
.br-kicker,
.br-date,
.location-status-refined .status {
    font-size: var(--type-xs) !important;
    line-height: var(--leading-ui) !important;
}

.account-menu-identity strong,
.company-notifications-head > a,
.company-notifications-summary,
.company-notification-copy > span,
.admin-stats span,
.admin-row-main p,
.admin-error-title small,
.admin-error-detail dd,
.admin-client-card dd,
.wl-secondary,
.wl-primary,
.wl-danger,
.wl-whatsapp,
.wl-link-danger,
.wl-stats span,
.wl-position strong,
.wl-main p,
.wl-main small,
.bm-stats span,
.bm-row time,
.bm-row small,
.br-main p,
.locations-primary-action {
    font-size: var(--type-sm) !important;
    line-height: var(--leading-ui) !important;
}

.company-notification-copy > strong,
.wl-main > strong,
.bm-row strong,
.bm-row span,
.br-main strong {
    font-size: var(--type-md) !important;
}
/* Agenda details that previously remained at 8.5–11px in module CSS. */
.agenda-time-rail span,
.agenda-unavailability-block > span,
.agenda-staff-filter label,
.agenda-working-hours-warning > div span,
.agenda-working-hours-warning > label,
.agenda-share-message small,
.agenda-vacancy-kicker,
.agenda-vacancy-person small,
.agenda-vacancy-sent {
    font-size: var(--type-xs) !important;
    line-height: var(--leading-ui) !important;
}

.agenda-availability-button,
.agenda-share-message label,
.agenda-share-message textarea,
.agenda-share-instagram,
.agenda-working-hours-warning > div strong,
.agenda-vacancy-seats,
.agenda-vacancy-mode strong,
.agenda-vacancy-mode span,
.agenda-vacancy-empty,
.agenda-vacancy-send,
.agenda-vacancy-refresh,
.agenda-vacancy-person strong {
    font-size: var(--type-sm) !important;
    line-height: var(--leading-ui) !important;
}

.account-menu-avatar,
.agenda-beta-count {
    font-size: var(--type-sm) !important;
}

@media (max-width: 820px) {
    .mobile-nav a,
    .app-header .mobile-nav a,
    .agenda-segmented a {
        font-size: 14px !important;
    }
}