.box_dashboard{
	display: block;
    font-size: 15px;
    margin-top: 38px;
    white-space: nowrap;
    margin-inline-start: 19px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dashboard inline styles (moved from dashboard.php) */
.box-header>.box-tools { display: none; }
.sidebar-collapse #barChart { height: 100% !important; }
.sidebar-collapse #lineChart { height: 100% !important; }
.tooltip-inner { max-width: 135px; }
canvas { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }

/* Chart.js v4 responsive sizing — override AdminLTE's !important width
   so Chart.js can manage canvas dimensions programmatically. */
.chart canvas {
    width: 100%;
}
.chart-responsive canvas {
    max-width: 100%;
    max-height: 400px;
}

/* Save buttons: override btn-info in box-footer to use brand primary */
.box-footer .btn-info,
.box-footer .btn-info:visited {
    background-color: var(--sk-primary);
    border-color: var(--sk-primary);
    color: #fff;
}
.box-footer .btn-info:hover,
.box-footer .btn-info:focus {
    background-color: var(--sk-primary-dark);
    border-color: var(--sk-primary-dark);
    color: #fff;
}

/* DataTable export toolbar: 44px touch targets */
.dt-button {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* DataTable wrapper: horizontal scroll on overflow */
.dataTables_wrapper {
    overflow-x: auto;
}
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================
   Print helpers — consolidated from 40+ admin views
   Each view previously declared its own @media print block.
   They all resolve to these three patterns.
   ========================================================== */
@media print {
    .no-print,
    .no-print * {
        display: none !important;
    }
    .no-print-vh,
    .no-print-vh * {
        display: none !important;
        visibility: hidden !important;
    }
    .noprint {
        visibility: hidden !important;
    }
}

/* .print class hides elements on screen (timetableList.php) */
.print,
.print * {
    display: none;
}

/* Common tiny utility classes extracted from views */
.liststyle1 {
    margin: 0;
    list-style: none;
    line-height: 28px;
}
.qty_error {
    display: none;
}
.addbtnright {
    position: absolute;
    inset-inline-end: 0;
    top: -46px;
}
.relative {
    position: relative;
}
.timeresponsive {
    overflow-x: auto;
    overflow-y: hidden;
}
@media (max-width: 767px) {
    .timeresponsive .dropdown-menu {
        z-index: 1060;
        bottom: 0 !important;
        height: 250px;
        padding: 20px;
    }
    .tablewidthRS {
        width: 690px;
    }
}

/* ================================================================
   Kindergarten Daily Report — Detail View behaviour badges
   (extracted from user/kindergartendailyreport/detailView.php)
   ================================================================ */
.detail-behaviour.behaviour-calme        { background: #D4EDDA; color: #155724; }
.detail-behaviour.behaviour-agite        { background: #FFF3CD; color: #856404; }
.detail-behaviour.behaviour-collaboratif { background: #D1ECF1; color: #0C5460; }
.detail-behaviour.behaviour-tres_agite   { background: #F8D7DA; color: #721C24; }

.detail-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    background: var(--sk-warm-sunken, #F6ECE3);
    border-radius: var(--sk-radius-sm, 8px);
}
.detail-info-item .detail-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sk-text-muted-warm, #A69888);
}
.detail-info-item .detail-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--sk-text-primary, #2A2420);
}

/* ================================================================
   UI Enhancements — CSS classes for ui-enhancements.js
   (replaces JS-injected inline styles)
   ================================================================ */

/* Sidebar overlay (mobile) */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1019;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.sidebar-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Collapsed-sidebar tooltip */
.sk-sidebar-tooltip {
    position: fixed;
    background: rgba(15, 23, 42, .95);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    z-index: 9999;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
    opacity: 0;
    transition: opacity .15s ease;
}
.sk-sidebar-tooltip.is-visible { opacity: 1; }

/* Page progress bar (NProgress-style, JS-injected div.page-progress) */
.page-progress {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    height: 3px;
    width: 0;
    background: var(--sk-primary, #D4845A);
    z-index: 9999;
    opacity: 0;
    transition: width .4s ease, opacity .2s ease;
    pointer-events: none;
}
.page-progress.active {
    width: 80%;
    opacity: 1;
}

/* Card hover lift — CSS-only (replaces JS event listeners) */
.box, .card {
    transition: box-shadow .2s ease, transform .2s ease;
}
.box:hover, .card:hover {
    transform: translateY(-2px);
}
/* Info-box: smaller lift */
.info-box:hover {
    transform: translateY(-1px);
}
/* Disable lift when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .box:hover, .card:hover, .info-box:hover { transform: none; }
}

/* Mobile search form — drops below the navbar row when toggled open */
@media (max-width: 991px) {
    .sk-mobile-search-open {
        position: absolute;
        top: 100%;
        inset-inline-start: 0;
        inset-inline-end: 0;
        background: var(--sk-warm-surface, #fff);
        border-top: 1px solid var(--sk-border, #E8DDD5);
        padding: 8px 12px;
        z-index: 1025;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
        flex: none !important;
        max-width: none !important;
        width: 100% !important;
    }
    .sk-mobile-search-open .input-group {
        border-radius: var(--sk-radius-pill, 999px);
    }
}

/* ── Locked / platform-managed fields (Settings page) ─────────────────── */
.sk-locked-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    background: var(--sk-warm-bg, #FDF6F0);
    border: 1.5px dashed #D8CCC4;
    border-radius: 8px;
    color: #7A6A62;
    font-size: 0.9rem;
    user-select: none;
}
.sk-locked-icon {
    color: #B8A89E;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.sk-locked-example {
    margin-inline-start: auto;
    font-size: 0.78rem;
    color: #A89890;
}
.sk-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-inline-start: 0.75rem;
    padding: 0.15rem 0.6rem;
    background: #F3EDE8;
    border: 1px solid #D8CCC4;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    color: #8A7068;
    vertical-align: middle;
}
.sk-platform-note {
    margin-block-start: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #F5F0EC;
    border-inline-start: 3px solid var(--sk-warning, #E8A838);
    border-radius: 0 6px 6px 0;
    font-size: 0.82rem;
    color: #7A6A62;
}

/* ── ID auto-generation live preview ──────────────────────────────────── */
.sk-id-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    background: var(--sk-warm-bg, #FDF6F0);
    border: 2px solid var(--sk-primary, #D4845A);
    border-radius: 10px;
    margin-block-end: 1.25rem;
}
.sk-id-preview__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sk-primary-dark, #B56940);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.sk-id-preview__value {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--sk-primary, #D4845A);
    letter-spacing: 0.08em;
}

/* ── Registration wizard ──────────────────────────────────────────────── */
.sk-wizard-steps {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-block-end: 1.75rem;
    counter-reset: step;
}
.sk-wizard-steps__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}
.sk-wizard-steps__item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    inset-inline-start: 50%;
    width: 100%;
    height: 2px;
    background: #E8DDD5;
    z-index: 0;
}
.sk-wizard-steps__item.done:not(:last-child)::after,
.sk-wizard-steps__item.active:not(:last-child)::after {
    background: var(--sk-primary, #D4845A);
}
.sk-wizard-steps__dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    border: 2px solid #E8DDD5;
    background: #fff;
    color: #B8A89E;
    z-index: 1;
    position: relative;
    transition: all 0.2s;
}
.sk-wizard-steps__item.active .sk-wizard-steps__dot {
    border-color: var(--sk-primary, #D4845A);
    background: var(--sk-primary, #D4845A);
    color: #fff;
}
.sk-wizard-steps__item.done .sk-wizard-steps__dot {
    border-color: var(--sk-secondary, #5B8C5A);
    background: var(--sk-secondary, #5B8C5A);
    color: #fff;
}
.sk-wizard-steps__label {
    margin-block-start: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #B8A89E;
    text-align: center;
}
.sk-wizard-steps__item.active .sk-wizard-steps__label,
.sk-wizard-steps__item.done .sk-wizard-steps__label {
    color: var(--sk-primary, #D4845A);
}
.sk-wizard-step { display: none; }
.sk-wizard-step.active { display: block; }
.sk-wizard-summary {
    background: var(--sk-warm-bg, #FDF6F0);
    border: 1px solid #E8DDD5;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-block-end: 1rem;
    font-size: 0.88rem;
}
.sk-wizard-summary dt {
    font-weight: 600;
    color: #7A6A62;
    float: inline-start;
    min-width: 9rem;
}
.sk-wizard-summary dd {
    margin-inline-start: 9rem;
    color: #333;
    margin-block-end: 0.4rem;
}
.sk-phone-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.65rem;
    background: var(--sk-warm-bg, #FDF6F0);
    border: 2px solid #E8DDD5;
    border-inline-end: none;
    border-radius: 10px 0 0 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #7A6A62;
    white-space: nowrap;
}

/* backend/bootstrap/css/bootstrap_20250929.min.css is actually Bootstrap
   3.3.5 (confirmed via its own header comment) — .row there has no
   display:flex, just BS3's margin/clearfix grid. A handful of views
   (dashboard stat-card rows, calendar) already use BS5-only utilities
   like align-items-stretch expecting a real flex row. Under BS3's block
   layout, equal-height alignment silently breaks whenever one card's
   translated label wraps onto more lines than its row siblings — visible
   in French/Arabic, where several dashboard labels run noticeably longer
   than their English source strings. Scoped to align-items-stretch rows
   only, so the many other .row usages elsewhere keep BS3's existing
   layout unchanged. */
.row.align-items-stretch {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}