/*
 * U-Turn internal platform consistency layer.
 * Scoped to authenticated app content so public campaigns and customer pages keep
 * their own visual identities. This file changes palette and type only; page
 * layouts remain owned by their templates.
 */

body.reflect-app .app-content {
    --platform-bg: #F4F1EB;
    --platform-surface: #FAF7F1;
    --platform-surface-strong: #FFFDF9;
    --platform-text: #0C1B33;
    --platform-muted: #23324A;
    --platform-accent: #B98552;
    --platform-border: #DED7CA;
    --platform-inner-border: #E8E1D6;
    --platform-card-hover: #EFE6DB;
    --platform-alert-hover: #FFF1F1;
    color: var(--platform-text);
    font-family: "Tajawal", Tahoma, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
}

body.reflect-app .app-content :is(h1, .page-title) {
    color: var(--platform-text) !important;
    font-size: clamp(31px, 5vw, 43px);
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

body.reflect-app .app-content :is(h2, .section-title, .card-title) {
    color: var(--platform-text) !important;
    font-size: 18px;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

body.reflect-app .app-content h3 {
    color: var(--platform-text) !important;
    font-size: 18px;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

body.reflect-app .app-content :is(
    .page-description,
    .page-subtitle,
    .header-description,
    .section-description,
    .card-description,
    .description,
    .subtitle
) {
    color: var(--platform-muted) !important;
    font-size: 16px;
    line-height: 1.8 !important;
}

body.reflect-app .app-content :is(.muted, .text-muted, small, .helptext, .help-text, .hint, .note, .meta) {
    color: var(--platform-muted) !important;
}

body.reflect-app .app-content :is(.helptext, .help-text, .hint, .note, .meta) {
    font-size: 13px;
    line-height: 1.65 !important;
}

/* Primary page surfaces. */
body.reflect-app .app-content :is(
    .card,
    .panel,
    .box,
    .widget,
    [class$="-card"],
    [class*="-card "],
    [class$="-panel"],
    [class*="-panel "],
    [class$="-box"],
    [class*="-box "],
    [class$="-widget"],
    [class*="-widget "]
):not([class*="success"]):not([class*="warning"]):not([class*="danger"]):not([class*="error"]):not([class*="alert"]):not([class*="destructive"]) {
    background-color: var(--platform-surface) !important;
    border-color: var(--platform-border) !important;
    color: var(--platform-text) !important;
}

/* Filters, summaries and table containers use the same main surface. */
body.reflect-app .app-content :is(
    .filters,
    .filter-bar,
    .filter-panel,
    .toolbar,
    .summary,
    .table-wrap,
    .table-container,
    .data-table,
    [class$="-filters"],
    [class*="-filters "],
    [class$="-toolbar"],
    [class*="-toolbar "],
    [class$="-summary"],
    [class*="-summary "]
) {
    background-color: var(--platform-surface) !important;
    border-color: var(--platform-border) !important;
}

/* Inner information blocks. */
body.reflect-app .app-content :is(
    .item,
    .metric,
    .stat,
    .detail,
    .info,
    [class$="-item"],
    [class*="-item "],
    [class$="-metric"],
    [class*="-metric "],
    [class$="-stat"],
    [class*="-stat "],
    [class$="-detail"],
    [class*="-detail "],
    [class$="-info"],
    [class*="-info "]
):not([class*="success"]):not([class*="warning"]):not([class*="danger"]):not([class*="error"]):not([class*="alert"]) {
    background-color: var(--platform-surface-strong) !important;
    border-color: var(--platform-inner-border) !important;
}

/* Clickable cards: warm inner surface, then the agreed cream hover. */
body.reflect-app .app-content :is(a, button, [role="button"], [role="link"], [data-href]):is(
    .card,
    [class$="-card"],
    [class*="-card "],
    [class$="-item"],
    [class*="-item "],
    [class$="-tile"],
    [class*="-tile "]
):not([class*="notification"]):not([class*="alert"]):not([class*="danger"]):not([class*="error"]):not([class*="destructive"]) {
    background-color: var(--platform-surface-strong) !important;
    border-color: var(--platform-inner-border) !important;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        color .18s ease,
        transform .12s ease !important;
}

body.reflect-app .app-content :is(a, button, [role="button"], [role="link"], [data-href]):is(
    .card,
    [class$="-card"],
    [class*="-card "],
    [class$="-item"],
    [class*="-item "],
    [class$="-tile"],
    [class*="-tile "]
):not([class*="notification"]):not([class*="alert"]):not([class*="danger"]):not([class*="error"]):not([class*="destructive"]):hover {
    background-color: var(--platform-card-hover) !important;
    border-color: var(--platform-accent) !important;
}

/* Notification and alert cards use the very light red hover. */
body.reflect-app .app-content :is(
    .notification-card,
    .alert-card,
    [class*="notification-card"],
    [class*="alert-card"]
) {
    background-color: var(--platform-surface-strong) !important;
    border-color: var(--platform-inner-border) !important;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .12s ease !important;
}

body.reflect-app .app-content :is(
    .notification-card,
    .alert-card,
    [class*="notification-card"],
    [class*="alert-card"]
):hover {
    background-color: var(--platform-alert-hover) !important;
    border-color: #F0CACA !important;
}

/* Forms. */
body.reflect-app .app-content :is(input, select, textarea) {
    background-color: var(--platform-surface-strong) !important;
    border-color: var(--platform-inner-border) !important;
    color: var(--platform-text) !important;
    font-family: "Tajawal", Tahoma, Arial, sans-serif !important;
    font-size: 14px;
}

body.reflect-app .app-content :is(input, select, textarea)::placeholder {
    color: #765C27 !important;
    opacity: 1;
}

body.reflect-app .app-content :is(input, select, textarea):focus {
    border-color: var(--platform-accent) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(185, 133, 82, .16) !important;
}

body.reflect-app .app-content label {
    color: var(--platform-text) !important;
    font-size: 13px;
    font-weight: 700 !important;
}

/* Tables. */
body.reflect-app .app-content table {
    color: var(--platform-text) !important;
}

body.reflect-app .app-content :is(th, thead td) {
    background-color: var(--platform-surface-strong) !important;
    border-color: var(--platform-border) !important;
    color: var(--platform-text) !important;
    font-size: 13px;
    font-weight: 800 !important;
}

body.reflect-app .app-content tbody td {
    border-color: var(--platform-inner-border) !important;
    color: var(--platform-text) !important;
    font-size: 14px;
}

body.reflect-app .app-content tbody tr:hover td {
    background-color: #F8F2EA !important;
}

/* Supporting labels and metrics. */
body.reflect-app .app-content :is(
    .badge,
    .pill,
    .tag,
    .chip,
    .status,
    [class$="-badge"],
    [class*="-badge "],
    [class$="-pill"],
    [class*="-pill "],
    [class$="-tag"],
    [class*="-tag "],
    [class$="-chip"],
    [class*="-chip "]
) {
    font-size: 12px;
    font-weight: 700 !important;
}

body.reflect-app .app-content :is(.stat-label, .metric-label, [class$="-stat-label"], [class$="-metric-label"]) {
    color: var(--platform-muted) !important;
    font-size: 13px;
}

body.reflect-app .app-content :is(.stat-value, .metric-value, [class$="-stat-value"], [class$="-metric-value"]) {
    color: var(--platform-text) !important;
    font-size: clamp(30px, 4vw, 38px);
    font-weight: 800 !important;
    line-height: 1.1 !important;
}

/* Controls. */
body.reflect-app .app-content :is(.btn, button, input[type="submit"], input[type="button"]) {
    font-family: "Tajawal", Tahoma, Arial, sans-serif !important;
    font-size: 14px;
}

body.reflect-app .app-content :is(
    .btn-primary,
    .primary-button,
    .button-primary,
    [class$="-primary-button"],
    [class*="-primary-button "]
) {
    background-color: var(--platform-text) !important;
    border-color: var(--platform-text) !important;
    color: #FFFFFF !important;
}

body.reflect-app .app-content :is(
    .btn-secondary,
    .secondary-button,
    .button-secondary,
    [class$="-secondary-button"],
    [class*="-secondary-button "]
) {
    background-color: var(--platform-card-hover) !important;
    border-color: var(--platform-border) !important;
    color: var(--platform-text) !important;
}

body.reflect-app .app-content :is(
    .btn-danger,
    .danger-button,
    .button-danger,
    [class$="-danger-button"],
    [class*="-danger-button "]
) {
    background-color: #A13B3B !important;
    border-color: #A13B3B !important;
    color: #FFFFFF !important;
}

/* Preserve semantic meaning while aligning surfaces. */
body.reflect-app .app-content :is(
    .success,
    [class*="success-card"],
    [class*="success-message"]
) {
    border-color: #CCE8D4 !important;
    background-color: #EEF8F1 !important;
    color: #1F6B3B !important;
}

body.reflect-app .app-content :is(
    .warning,
    [class*="warning-card"],
    [class*="warning-message"]
) {
    border-color: #EFD7A5 !important;
    background-color: #FFF8E8 !important;
    color: #7C5E24 !important;
}

body.reflect-app .app-content :is(
    .danger-card,
    .error-card,
    .alert,
    [class*="danger-card"],
    [class*="error-card"],
    [class*="error-message"]
) {
    border-color: #F0CACA !important;
    background-color: var(--platform-alert-hover) !important;
    color: #A13B3B !important;
}

@media (max-width: 900px) {
    body.reflect-app .app-content {
        font-size: 16px;
    }

    body.reflect-app .app-content :is(input, select, textarea) {
        font-size: 14px;
    }

    body.reflect-app .app-content :is(h1, .page-title) {
        font-size: clamp(31px, 5vw, 43px);
    }
}

/* ===== Strict U-Turn manager-page normalization (v2) =====
 * These aliases replace page-local legacy palettes while keeping semantic
 * success, warning, danger, and chart colors intact.
 */
body.reflect-app .app-content {
    --delete-bg: #F4F1EB;
    --delete-surface: #FAF7F1;
    --delete-text: #0C1B33;
    --delete-muted: #23324A;
    --delete-border: #DED7CA;

    --staff-bg: #F4F1EB;
    --staff-surface: #FAF7F1;
    --staff-text: #0C1B33;
    --staff-muted: #23324A;
    --staff-border: #DED7CA;
    --staff-primary: #0C1B33;
    --staff-accent: #B98552;

    --shared-bg: #F4F1EB;
    --shared-surface: #FAF7F1;
    --shared-text: #0C1B33;
    --shared-muted: #23324A;
    --shared-border: #DED7CA;
    --shared-primary: #0C1B33;
    --shared-primary-hover: #23324A;
    --shared-accent: #B98552;

    --users-bg: #F4F1EB;
    --users-surface: #FAF7F1;
    --users-text: #0C1B33;
    --users-muted: #23324A;
    --users-border: #DED7CA;
    --users-primary: #0C1B33;
    --users-primary-hover: #23324A;
    --users-accent: #B98552;

    --branches-bg: #F4F1EB;
    --branches-surface: #FAF7F1;
    --branches-text: #0C1B33;
    --branches-muted: #23324A;
    --branches-border: #DED7CA;
    --branches-primary: #0C1B33;
    --branches-primary-hover: #23324A;
    --branches-accent: #B98552;

    --dashboard-bg: #F4F1EB;
    --dashboard-surface: #FAF7F1;
    --dashboard-text: #0C1B33;
    --dashboard-muted: #23324A;
    --dashboard-border: #DED7CA;
    --dashboard-primary: #0C1B33;
    --dashboard-primary-hover: #23324A;
    --dashboard-accent: #B98552;

    --admin-bg: #F4F1EB;
    --admin-surface: #FAF7F1;
    --admin-surface-strong: #FFFDF9;
    --admin-text: #0C1B33;
    --admin-muted: #23324A;
    --admin-border: #DED7CA;
    --admin-primary: #0C1B33;
    --admin-primary-hover: #23324A;
    --admin-accent: #B98552;

    --plans-bg: #F4F1EB;
    --plans-surface: #FAF7F1;
    --plans-surface-strong: #FFFDF9;
    --plans-text: #0C1B33;
    --plans-muted: #23324A;
    --plans-border: #DED7CA;
    --plans-primary: #0C1B33;
    --plans-primary-hover: #23324A;
    --plans-accent: #B98552;

    --setup-bg: #F4F1EB;
    --setup-surface: #FAF7F1;
    --setup-soft: #FFFDF9;
    --setup-text: #0C1B33;
    --setup-muted: #23324A;
    --setup-border: #DED7CA;
    --setup-accent: #B98552;

    --cx-bg: #F4F1EB;
    --cx-surface: #FAF7F1;
    --cx-text: #0C1B33;
    --cx-muted: #23324A;
    --cx-border: #DED7CA;
    --cx-primary: #0C1B33;
    --cx-accent: #B98552;

    --sub-bg: #F4F1EB;
    --sub-surface: #FAF7F1;
    --sub-soft: #FFFDF9;
    --sub-text: #0C1B33;
    --sub-muted: #23324A;
    --sub-border: #DED7CA;
    --sub-accent: #B98552;

    --notif-bg: #F4F1EB;
    --notif-surface: #FAF7F1;
    --notif-soft: #FFFDF9;
    --notif-text: #0C1B33;
    --notif-muted: #23324A;
    --notif-border: #DED7CA;
    --notif-accent: #B98552;

    --redeem-bg: #F4F1EB;
    --redeem-surface: #FAF7F1;
    --redeem-text: #0C1B33;
    --redeem-muted: #23324A;
    --redeem-border: #DED7CA;
    --redeem-primary: #0C1B33;
    --redeem-primary-hover: #23324A;
    --redeem-accent: #B98552;

    --participation-bg: #F4F1EB;
    --participation-surface: #FAF7F1;
    --participation-text: #0C1B33;
    --participation-muted: #23324A;
    --participation-border: #DED7CA;
    --participation-primary: #0C1B33;
    --participation-primary-hover: #23324A;
    --participation-accent: #B98552;

    --signup-bg: #F4F1EB;
    --signup-surface: #FAF7F1;
    --signup-soft: #FFFDF9;
    --signup-text: #0C1B33;
    --signup-muted: #23324A;
    --signup-border: #DED7CA;
    --signup-accent: #B98552;

    --detail-bg: #F4F1EB;
    --detail-surface: #FAF7F1;
    --detail-soft: #FFFDF9;
    --detail-text: #0C1B33;
    --detail-muted: #23324A;
    --detail-border: #DED7CA;
    --detail-accent: #B98552;
}

/* Normalize main and inner surfaces without changing page layout. */
body.reflect-app .app-content :is(
    [class*="card"],
    [class*="panel"],
    [class*="box"],
    [class*="widget"],
    [class*="summary"]
):not([class*="grid"]):not([class*="list"]):not([class*="group"]):not([class*="success"]):not([class*="warning"]):not([class*="danger"]):not([class*="error"]):not([class*="alert"]) {
    background-color: var(--platform-surface) !important;
    border-color: var(--platform-border) !important;
    color: var(--platform-text) !important;
}

body.reflect-app .app-content :is(
    [class*="-item"],
    [class*="-row"],
    [class*="-tile"],
    [class$="-metric"],
    [class*="-metric "],
    [class$="-stat"],
    [class*="-stat "],
    [class*="impact-main"],
    [class*="impact-stat"],
    [class*="limit-row"]
):not([class*="grid"]):not([class*="list"]):not([class*="progress"]):not([class*="success"]):not([class*="warning"]):not([class*="danger"]):not([class*="error"]):not([class*="alert"]) {
    background-color: var(--platform-surface-strong) !important;
    border-color: var(--platform-inner-border) !important;
}

/* Typography follows the manager dashboard scale on every internal page. */
body.reflect-app .app-content :is(p, li, dt, dd) {
    color: var(--platform-muted) !important;
    font-size: 16px;
    line-height: 1.8 !important;
}

body.reflect-app .app-content :is(
    [class*="-note"],
    [class*="-help"],
    [class*="-hint"],
    [class*="-meta"],
    [class*="-caption"],
    small,
    .helptext
) {
    color: var(--platform-muted) !important;
    font-size: 13px;
    line-height: 1.65 !important;
}

body.reflect-app .app-content :is(
    [class*="-label"],
    [class*="-eyebrow"],
    [class*="-kicker"],
    label
) {
    color: var(--platform-text) !important;
    font-size: 13px;
    font-weight: 700 !important;
    line-height: 1.5 !important;
}

body.reflect-app .app-content :is(
    [class*="-description"],
    [class*="-subtitle"],
    .description,
    .subtitle
) {
    color: var(--platform-muted) !important;
    font-size: 16px;
    line-height: 1.8 !important;
}

body.reflect-app .app-content :is(
    [class*="-title"],
    .card-title,
    .section-title
) {
    color: var(--platform-text) !important;
    font-size: 18px;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}

body.reflect-app .app-content :is(h1, .page-title, .dashboard-title) {
    color: var(--platform-text) !important;
    font-size: clamp(31px, 5vw, 43px);
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

body.reflect-app .app-content h2 {
    font-size: 20px;
}

body.reflect-app .app-content h3 {
    font-size: 18px;
}

body.reflect-app .app-content h4 {
    color: var(--platform-text) !important;
    font-size: 16px;
    font-weight: 700 !important;
}

body.reflect-app .app-content :is(
    [class*="card"],
    [class*="panel"],
    [class*="item"],
    [class*="row"]
) p {
    font-size: 16px;
    line-height: 1.7 !important;
}

body.reflect-app .app-content :is(
    [class$="-stat"],
    [class*="-stat "],
    [class$="-metric"],
    [class*="-metric "]
) :is(span, .label) {
    color: var(--platform-muted) !important;
    font-size: 13px;
}

body.reflect-app .app-content :is(
    [class$="-stat"],
    [class*="-stat "],
    [class$="-metric"],
    [class*="-metric "]
) :is(strong, .value, .number) {
    color: var(--platform-text) !important;
    font-size: clamp(30px, 4vw, 38px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
}

/* Controls and tables use the same readable scale. */
body.reflect-app .app-content :is(
    button,
    .btn,
    [class*="-button"],
    [class*="-link"],
    input[type="submit"],
    input[type="button"]
) {
    font-family: "Tajawal", Tahoma, Arial, sans-serif !important;
    font-size: 14px;
}

body.reflect-app .app-content :is(input, select, textarea) {
    background-color: var(--platform-surface-strong) !important;
    border-color: var(--platform-inner-border) !important;
    color: var(--platform-text) !important;
    font-size: 14px;
}

body.reflect-app .app-content th {
    background-color: var(--platform-surface-strong) !important;
    border-color: var(--platform-border) !important;
    color: var(--platform-text) !important;
    font-size: 13px;
}

body.reflect-app .app-content td {
    border-color: var(--platform-inner-border) !important;
    color: var(--platform-text) !important;
    font-size: 14px;
}

/* Clickable cards keep their effects and use the approved cream hover. */
body.reflect-app .app-content :is(
    a[class*="card"],
    button[class*="card"],
    [role="button"][class*="card"],
    [role="link"][class*="card"],
    [class*="action-card"]
):not([class*="notification"]):not([class*="alert"]):not([class*="danger"]):not([class*="error"]) {
    background-color: var(--platform-surface-strong) !important;
    border-color: var(--platform-inner-border) !important;
}

body.reflect-app .app-content :is(
    a[class*="card"],
    button[class*="card"],
    [role="button"][class*="card"],
    [role="link"][class*="card"],
    [class*="action-card"]
):not([class*="notification"]):not([class*="alert"]):not([class*="danger"]):not([class*="error"]):hover {
    background-color: var(--platform-card-hover) !important;
    border-color: var(--platform-accent) !important;
}

/* Notification cards retain the requested very light red hover. */
body.reflect-app .app-content :is(
    [class*="notification-card"],
    [class*="alert-card"]
):hover {
    background-color: var(--platform-alert-hover) !important;
    border-color: #F0CACA !important;
}

/* Semantic states remain distinct. */
body.reflect-app .app-content :is(
    .success,
    [class*="success-card"],
    [class*="success-message"]
) {
    background-color: #EEF8F1 !important;
    border-color: #CCE8D4 !important;
    color: #1F6B3B !important;
}

body.reflect-app .app-content :is(
    .warning,
    [class*="warning-card"],
    [class*="warning-message"]
) {
    background-color: #FFF8E8 !important;
    border-color: #EFD7A5 !important;
    color: #7C5E24 !important;
}

body.reflect-app .app-content :is(
    .danger-card,
    .error-card,
    .alert,
    [class*="danger-card"],
    [class*="error-card"],
    [class*="error-message"]
) {
    background-color: #FFF1F1 !important;
    border-color: #F0CACA !important;
    color: #A13B3B !important;
}

@media (max-width: 900px) {
    body.reflect-app .app-content :is(input, select, textarea) {
        font-size: 14px;
    }

    body.reflect-app .app-content :is(h1, .page-title, .dashboard-title) {
        font-size: clamp(31px, 5vw, 43px);
    }
}