/*
 * هوية مركز رعاية الطفولة وبيوت الشباب (Child Care Center GL 2024)
 * Source: business/childcare-system — colours from the guideline's primary
 * palette, typeface PINGAR LT. Loaded after Bootstrap by every layout.
 */

/* ===================== Typeface ===================== */
@font-face { font-family: 'PINGAR LT'; src: url('../fonts/pingar/pingar-lt-light.otf') format('opentype');   font-weight: 300; font-display: swap; }
@font-face { font-family: 'PINGAR LT'; src: url('../fonts/pingar/pingar-lt-regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'PINGAR LT'; src: url('../fonts/pingar/pingar-lt-medium.otf') format('opentype');  font-weight: 500; font-display: swap; }
@font-face { font-family: 'PINGAR LT'; src: url('../fonts/pingar/pingar-lt-bold.otf') format('opentype');    font-weight: 600 700; font-display: swap; }
@font-face { font-family: 'PINGAR LT'; src: url('../fonts/pingar/pingar-lt-black.otf') format('opentype');   font-weight: 800 900; font-display: swap; }

/* ===================== Tokens ===================== */
:root {
    /* Guideline primary palette */
    --brand-purple: #62569A;
    --brand-cyan:   #3AACCD;
    --brand-lime:   #CCCE59;
    --brand-red:    #B14750;
    --brand-ink:    #321E43;   /* deep purple base used behind the logo */

    /* Text-safe variants (≥4.5:1 on white) for cyan / lime */
    --brand-cyan-ink: #1A7A9A;
    --brand-lime-ink: #6E7114;

    --brand-purple-dark:  #4A3F7E;
    --brand-purple-light: #8A80BC;
    --brand-purple-tint:  #EFEDF7;

    --brand-font: 'PINGAR LT', 'Segoe UI', Tahoma, sans-serif;

    /* Bootstrap 5.3 overrides */
    --bs-primary: #62569A;
    --bs-primary-rgb: 98, 86, 154;
    --bs-primary-text-emphasis: #3B3366;
    --bs-primary-bg-subtle: #EFEDF7;
    --bs-primary-border-subtle: #C9C3E2;
    --bs-info: #3AACCD;
    --bs-info-rgb: 58, 172, 205;
    --bs-danger: #B14750;
    --bs-danger-rgb: 177, 71, 80;
    --bs-link-color: #62569A;
    --bs-link-color-rgb: 98, 86, 154;
    --bs-link-hover-color: #4A3F7E;
    --bs-link-hover-color-rgb: 74, 63, 126;
    --bs-focus-ring-color: rgba(98, 86, 154, 0.25);
    --bs-body-font-family: var(--brand-font);
}

/* ===================== Bootstrap components ===================== */
.btn-primary {
    --bs-btn-bg: #62569A;
    --bs-btn-border-color: #62569A;
    --bs-btn-hover-bg: #4A3F7E;
    --bs-btn-hover-border-color: #4A3F7E;
    --bs-btn-active-bg: #3F356B;
    --bs-btn-active-border-color: #3F356B;
    --bs-btn-disabled-bg: #62569A;
    --bs-btn-disabled-border-color: #62569A;
    --bs-btn-focus-shadow-rgb: 98, 86, 154;
}
.btn-outline-primary {
    --bs-btn-color: #62569A;
    --bs-btn-border-color: #62569A;
    --bs-btn-hover-bg: #62569A;
    --bs-btn-hover-border-color: #62569A;
    --bs-btn-active-bg: #4A3F7E;
    --bs-btn-active-border-color: #4A3F7E;
    --bs-btn-disabled-color: #62569A;
    --bs-btn-disabled-border-color: #62569A;
    --bs-btn-focus-shadow-rgb: 98, 86, 154;
}
.btn-danger {
    --bs-btn-bg: #B14750;
    --bs-btn-border-color: #B14750;
    --bs-btn-hover-bg: #963A42;
    --bs-btn-hover-border-color: #963A42;
    --bs-btn-active-bg: #8A3540;
    --bs-btn-active-border-color: #8A3540;
}
.btn-outline-danger {
    --bs-btn-color: #B14750;
    --bs-btn-border-color: #B14750;
    --bs-btn-hover-bg: #B14750;
    --bs-btn-hover-border-color: #B14750;
    --bs-btn-active-bg: #8A3540;
    --bs-btn-active-border-color: #8A3540;
}
.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: #1A7A9A;
    --bs-btn-border-color: #1A7A9A;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #156681;
    --bs-btn-hover-border-color: #156681;
}

.pagination {
    --bs-pagination-color: #62569A;
    --bs-pagination-hover-color: #4A3F7E;
    --bs-pagination-focus-color: #4A3F7E;
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(98, 86, 154, 0.25);
    --bs-pagination-active-bg: #62569A;
    --bs-pagination-active-border-color: #62569A;
}
.nav-pills {
    --bs-nav-pills-link-active-bg: #62569A;
}
.nav-link { --bs-nav-link-color: #62569A; --bs-nav-link-hover-color: #4A3F7E; }
.nav-tabs .nav-link.active { color: var(--brand-ink); }
.dropdown-menu { --bs-dropdown-link-active-bg: #62569A; }
.list-group { --bs-list-group-active-bg: #62569A; --bs-list-group-active-border-color: #62569A; }
.progress, .progress-stacked { --bs-progress-bar-bg: #62569A; }

.form-control:focus,
.form-select:focus {
    border-color: #A79FD0;
    box-shadow: 0 0 0 0.2rem rgba(98, 86, 154, 0.18);
}
.form-check-input:checked {
    background-color: #62569A;
    border-color: #62569A;
}
.form-check-input:focus {
    border-color: #A79FD0;
    box-shadow: 0 0 0 0.2rem rgba(98, 86, 154, 0.18);
}
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23A79FD0'/%3e%3c/svg%3e");
}
.form-range::-webkit-slider-thumb { background-color: #62569A; }
.form-range::-moz-range-thumb { background-color: #62569A; }

/* Four-colour stripe taken from the logo's building blocks */
.brand-stripe {
    height: 3px;
    background: linear-gradient(to left,
        var(--brand-red) 0 25%,
        var(--brand-cyan) 25% 50%,
        var(--brand-lime) 50% 75%,
        var(--brand-purple) 75% 100%);
}

/* =====================================================================
 * Inner pages — neutrals, semantic colours and components
 * ===================================================================== */
:root {
    --bs-body-color: #22192e;
    --bs-body-color-rgb: 34, 25, 46;
    --bs-secondary-color: #6b6580;            /* .text-muted */
    --bs-border-color: #e4e1ee;
    --bs-border-color-translucent: rgba(50, 30, 67, 0.12);
    --bs-tertiary-bg: #f4f2f9;
    --bs-secondary-bg: #ece9f4;

    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.4rem;
    --bs-border-radius-lg: 0.85rem;
    --bs-border-radius-xl: 1.1rem;

    --bs-secondary: #6B6580;  --bs-secondary-rgb: 107, 101, 128;
    --bs-light: #F4F2F9;      --bs-light-rgb: 244, 242, 249;
    --bs-dark: #321E43;       --bs-dark-rgb: 50, 30, 67;
    --bs-warning: #E0A33B;    --bs-warning-rgb: 224, 163, 59;

    --bs-danger-text-emphasis: #7a2f37;   --bs-danger-bg-subtle: #f7e8ea;   --bs-danger-border-subtle: #eac3c7;
    --bs-info-text-emphasis: #155f78;     --bs-info-bg-subtle: #e4f4f9;     --bs-info-border-subtle: #b7e0ec;
    --bs-warning-text-emphasis: #6e4e10;  --bs-warning-bg-subtle: #fbf2e1;  --bs-warning-border-subtle: #f2d9a8;
    --bs-secondary-text-emphasis: #3f3a50; --bs-secondary-bg-subtle: #efedf5; --bs-secondary-border-subtle: #d8d4e4;
    --bs-light-text-emphasis: #4a4458;    --bs-light-bg-subtle: #faf9fc;    --bs-light-border-subtle: #e4e1ee;
    --bs-dark-text-emphasis: #321e43;     --bs-dark-bg-subtle: #d9d3e0;     --bs-dark-border-subtle: #b9b0c6;
}

/* ---------- Buttons ---------- */
.btn { --bs-btn-font-weight: 500; }
.btn-outline-secondary {
    --bs-btn-color: #5b5570;
    --bs-btn-border-color: #d8d4e4;
    --bs-btn-hover-color: #321E43;
    --bs-btn-hover-bg: #f1eff6;
    --bs-btn-hover-border-color: #c9c3da;
    --bs-btn-active-color: #321E43;
    --bs-btn-active-bg: #e9e6f1;
    --bs-btn-active-border-color: #c9c3da;
    --bs-btn-focus-shadow-rgb: 107, 101, 128;
}
.btn-secondary {
    --bs-btn-bg: #6B6580; --bs-btn-border-color: #6B6580;
    --bs-btn-hover-bg: #57526a; --bs-btn-hover-border-color: #57526a;
    --bs-btn-active-bg: #4c475d; --bs-btn-active-border-color: #4c475d;
}
.btn-outline-warning {
    --bs-btn-color: #9a6c18;
    --bs-btn-border-color: #e9c27e;
    --bs-btn-hover-color: #321E43;
    --bs-btn-hover-bg: #E0A33B;
    --bs-btn-hover-border-color: #E0A33B;
    --bs-btn-active-color: #321E43;
    --bs-btn-active-bg: #d1932b;
    --bs-btn-active-border-color: #d1932b;
}
.btn-warning {
    --bs-btn-color: #321E43; --bs-btn-bg: #E0A33B; --bs-btn-border-color: #E0A33B;
    --bs-btn-hover-color: #321E43; --bs-btn-hover-bg: #d1932b; --bs-btn-hover-border-color: #d1932b;
}
.btn-outline-info {
    --bs-btn-color: #1A7A9A; --bs-btn-border-color: #8fd0e3;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1A7A9A; --bs-btn-hover-border-color: #1A7A9A;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #156681; --bs-btn-active-border-color: #156681;
}
.btn-light {
    --bs-btn-bg: #f4f2f9; --bs-btn-border-color: #e4e1ee;
    --bs-btn-hover-bg: #ebe8f3; --bs-btn-hover-border-color: #d8d4e4;
}
.btn-dark {
    --bs-btn-bg: #321E43; --bs-btn-border-color: #321E43;
    --bs-btn-hover-bg: #24152f; --bs-btn-hover-border-color: #24152f;
}

/* ---------- Badges: pill, like the wayfinding signs ---------- */
.badge {
    --bs-badge-font-weight: 500;
    --bs-badge-padding-x: 0.75em;
    --bs-badge-padding-y: 0.42em;
    --bs-badge-border-radius: 999px;
}
.badge.bg-warning { color: #321E43; }
.badge.bg-light { color: #4a4458; }

/* ---------- Cards ---------- */
.card {
    --bs-card-border-color: #e9e6f1;
    --bs-card-border-radius: 0.875rem;
    --bs-card-inner-border-radius: calc(0.875rem - 1px);
    --bs-card-cap-bg: #ffffff;
}
.card-header { font-weight: 600; color: var(--brand-ink); }
.card-header h5, .card-header h6, .card-header .card-title { color: var(--brand-ink); }

/* ---------- Tables ---------- */
.table {
    --bs-table-striped-bg: rgba(98, 86, 154, 0.035);
    --bs-table-hover-bg: rgba(98, 86, 154, 0.05);
    --bs-table-border-color: #ece9f3;
}
.table > thead > tr > th { color: var(--brand-ink); }
.table-light {
    --bs-table-color: #321E43;
    --bs-table-bg: #f4f2f9;
    --bs-table-border-color: #e4e1ee;
    --bs-table-striped-bg: #eeebf5;
    --bs-table-hover-bg: #e9e6f1;
}

/* ---------- Tabs ---------- */
.nav-tabs { --bs-nav-tabs-link-active-color: var(--brand-ink); --bs-nav-tabs-border-color: #e4e1ee; }

/* =====================================================================
 * Tones — brand discs for stat / section / report icons
 * (converted from the old inline Bootstrap tints)
 * ===================================================================== */
.tone-purple   { --tone: #62569A; --tone-on: #fff; }
.tone-cyan     { --tone: #3AACCD; --tone-on: #fff; }
.tone-lime     { --tone: #CCCE59; --tone-on: #321E43; }
.tone-red      { --tone: #B14750; --tone-on: #fff; }
.tone-ink      { --tone: #321E43; --tone-on: #fff; }
.tone-lavender { --tone: #8A80BC; --tone-on: #fff; }
.tone-gray     { --tone: #8A849C; --tone-on: #fff; }

:is(.tone-purple, .tone-cyan, .tone-lime, .tone-red, .tone-ink, .tone-lavender, .tone-gray) {
    background: var(--tone) !important;
    color: var(--tone-on) !important;
}
:is(.tone-purple, .tone-cyan, .tone-lime, .tone-red, .tone-ink, .tone-lavender, .tone-gray) :is(i, svg) {
    color: var(--tone-on) !important;
}

.tone-soft-purple   { background: rgba(98, 86, 154, 0.08); }
.tone-soft-cyan     { background: rgba(58, 172, 205, 0.10); }
.tone-soft-lime     { background: rgba(204, 206, 89, 0.16); }
.tone-soft-red      { background: rgba(177, 71, 80, 0.08); }
.tone-soft-ink      { background: rgba(50, 30, 67, 0.06); }
.tone-soft-lavender { background: rgba(138, 128, 188, 0.10); }
.tone-soft-gray     { background: rgba(107, 101, 128, 0.08); }

/* =====================================================================
 * Success → brand lime (the palette has no green)
 * text / borders use the text-safe olive; badges & buttons are lime pills
 * ===================================================================== */
:root {
    --bs-success: #6E7114;
    --bs-success-rgb: 110, 113, 20;
    --bs-success-text-emphasis: #4a4c0d;
    --bs-success-bg-subtle: #f4f5dc;
    --bs-success-border-subtle: #dfe0a6;
    --bs-form-valid-color: #6E7114;
    --bs-form-valid-border-color: #a9ab3a;
}
.badge.bg-success,
.progress-bar.bg-success { background-color: #CCCE59 !important; color: #321E43 !important; }
.btn-success {
    --bs-btn-color: #321E43; --bs-btn-bg: #CCCE59; --bs-btn-border-color: #CCCE59;
    --bs-btn-hover-color: #321E43; --bs-btn-hover-bg: #b9bb47; --bs-btn-hover-border-color: #b9bb47;
    --bs-btn-active-color: #321E43; --bs-btn-active-bg: #a9ab3a; --bs-btn-active-border-color: #a9ab3a;
    --bs-btn-disabled-color: #321E43; --bs-btn-disabled-bg: #CCCE59; --bs-btn-disabled-border-color: #CCCE59;
    --bs-btn-focus-shadow-rgb: 204, 206, 89;
}
.btn-outline-success {
    --bs-btn-color: #6E7114; --bs-btn-border-color: #b9bb47;
    --bs-btn-hover-color: #321E43; --bs-btn-hover-bg: #CCCE59; --bs-btn-hover-border-color: #CCCE59;
    --bs-btn-active-color: #321E43; --bs-btn-active-bg: #b9bb47; --bs-btn-active-border-color: #b9bb47;
    --bs-btn-focus-shadow-rgb: 204, 206, 89;
}
.badge-active { background-color: #CCCE59 !important; color: #321E43 !important; }

/* =====================================================================
 * Icon-only action buttons → soft brand discs (wayfinding style)
 * ===================================================================== */
.btn.btn-icon {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    width: 32px; height: 32px;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex; align-items: center; justify-content: center;
    border-color: transparent;
    font-size: 0.9rem;
    vertical-align: middle;
}
.btn.btn-icon.btn-outline-primary   { background: rgba(98, 86, 154, 0.10);  color: #62569A; }
.btn.btn-icon.btn-outline-info      { background: rgba(58, 172, 205, 0.13); color: #1A7A9A; }
.btn.btn-icon.btn-outline-warning   { background: rgba(224, 163, 59, 0.16); color: #9a6c18; }
.btn.btn-icon.btn-outline-danger    { background: rgba(177, 71, 80, 0.10);  color: #B14750; }
.btn.btn-icon.btn-outline-success   { background: rgba(204, 206, 89, 0.24); color: #6E7114; }
.btn.btn-icon.btn-outline-secondary { background: rgba(107, 101, 128, 0.10); color: #5b5570; }
.btn.btn-icon.btn-outline-primary:hover   { background: #62569A; color: #fff; }
.btn.btn-icon.btn-outline-info:hover      { background: #1A7A9A; color: #fff; }
.btn.btn-icon.btn-outline-warning:hover   { background: #E0A33B; color: #321E43; }
.btn.btn-icon.btn-outline-danger:hover    { background: #B14750; color: #fff; }
.btn.btn-icon.btn-outline-success:hover   { background: #CCCE59; color: #321E43; }
.btn.btn-icon.btn-outline-secondary:hover { background: #6B6580; color: #fff; }
.btn-group > .btn.btn-icon + .btn.btn-icon,
td .btn.btn-icon + .btn.btn-icon,
td .btn.btn-icon + form,
td form + .btn.btn-icon { margin-inline-start: 4px; }

/* =====================================================================
 * Card-header icons → small disc in the current app's section colour
 * ===================================================================== */
.card-header :is(h5, h6, .card-title) > i.bi:first-child,
.card-header > i.bi:first-child {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--app-fill, #62569A) 16%, #fff);
    color: var(--app-color, #62569A) !important;   /* beats .text-primary & co. */
    font-size: 0.85rem;
    vertical-align: middle;
    margin-inline-end: 0.5rem !important;
}

/* =====================================================================
 * Print — official letterhead on every page
 * ===================================================================== */
.lh-header, .lh-footer { display: none; }
.lh-frame, .lh-frame > tbody, .lh-frame > tbody > tr, .lh-frame > tbody > tr > td { display: block; width: 100%; }
.lh-frame > thead, .lh-frame > tfoot { display: none; }

@media print {
    @page { size: A4; margin: 10mm 12mm 8mm; }
    html, body { background: #fff !important; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    .lh-header {
        display: flex; align-items: flex-start; justify-content: space-between;
        position: fixed; top: 0; left: 0; right: 0; height: 22mm;
    }
    .lh-logo { height: 14mm; width: auto; }
    .lh-meta { font-size: 8pt; line-height: 1.55; color: #6b6580; text-align: left; }

    .lh-footer {
        display: block; text-align: center;
        position: fixed; bottom: 0; left: 0; right: 0; height: 16mm;
    }
    .lh-contact { display: flex; justify-content: center; gap: 5mm; font-size: 7.5pt; line-height: 1.6; color: #4a4458; }
    .lh-band { display: block; width: 100%; height: auto; margin-top: 2mm; }

    /* thead/tfoot spacers repeat on each page and keep content clear */
    .lh-frame { display: table; width: 100%; border-collapse: collapse; }
    .lh-frame > thead { display: table-header-group; }
    .lh-frame > tfoot { display: table-footer-group; }
    .lh-frame > tbody { display: table-row-group; }
    .lh-frame > tbody > tr, .lh-frame > thead > tr, .lh-frame > tfoot > tr { display: table-row; }
    .lh-frame > tbody > tr > td, .lh-frame > thead > tr > td, .lh-frame > tfoot > tr > td { display: table-cell; padding: 0; }
    .lh-spacer-top { height: 25mm; }
    .lh-spacer-bottom { height: 19mm; }

    /* App chrome never prints */
    .gov-topbar, .module-submenu, .no-print, .pagination, .alert-dismissible,
    .breadcrumb, .btn, .apps-search, .dropdown-menu { display: none !important; }
    .main-content, .main-content.no-submenu { margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
    .card, .stat-card { box-shadow: none !important; }
    .stat-card, .report-section { break-inside: avoid; }
}

/* Print keeps the desktop grid: A4 is narrower than Bootstrap's md breakpoint */
@media print {
    .row > [class*="col-md-"], .row > [class*="col-lg-"], .row > [class*="col-xl-"] { flex: 0 0 auto; }
    .row > .col-md-1, .row > .col-lg-1 { width: 8.3333%; }
    .row > .col-md-2, .row > .col-lg-2 { width: 16.6667%; }
    .row > .col-md-3, .row > .col-lg-3, .row > .col-xl-3 { width: 25%; }
    .row > .col-md-4, .row > .col-lg-4, .row > .col-xl-4 { width: 33.3333%; }
    .row > .col-md-5, .row > .col-lg-5 { width: 41.6667%; }
    .row > .col-md-6, .row > .col-lg-6, .row > .col-xl-6 { width: 50%; }
    .row > .col-md-7, .row > .col-lg-7 { width: 58.3333%; }
    .row > .col-md-8, .row > .col-lg-8 { width: 66.6667%; }
    .row > .col-md-9, .row > .col-lg-9 { width: 75%; }
    .row > .col-md-12, .row > .col-lg-12 { width: 100%; }
    .card:has(canvas) { break-inside: avoid; }
}
@media print {
    .lh-frame { table-layout: fixed; }                       /* wide tables must not widen the page */
    canvas { max-width: 100% !important; }   /* Chart.js re-measures on beforeprint (layout) */
    .table-responsive { overflow: visible !important; }
    .table { font-size: 8.5pt; }
}

/* ---------- Phones: two stat cards per row, compact ---------- */
@media (max-width: 575.98px) {
    .row > [class*="col-"]:has(.stat-card):not(:has(.row)) { flex: 0 0 auto; width: 50%; }
    .btn { white-space: nowrap; }
    .stat-card .card-body { padding: 12px; gap: 10px !important; }
    .stat-card .stat-icon { width: 38px !important; height: 38px !important; font-size: 1rem !important; }
    .stat-card h3, .stat-card .fs-3, .stat-card .fs-4 { font-size: 1.15rem !important; }
    .app-tile { padding: 10px 10px 10px 14px; gap: 12px; }
    .app-tile-icon { width: 48px; height: 48px; }
    .app-tile-icon svg { width: 28px; height: 28px; }
}