/*
    SriSoft LMS UI Components CSS - Canonical Version
    Place at: assets/css/ui_components.css
    Include once from includes/header.php after style.css.

    This file is now the single source of truth for UI component styling.
    Do not keep another older ui_components.css in a different folder.
*/

.ui-admin-topbar{gap:12px;flex-wrap:wrap}.ui-topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.ui-theme-switch{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-weight:850;color:#0b2c4d;margin:0}.ui-theme-switch input{display:none}.ui-theme-slider{width:52px;height:28px;border-radius:999px;background:linear-gradient(135deg,#e7edf5,#cbd5e1);position:relative;box-shadow:inset 0 1px 4px rgba(0,0,0,.16);transition:.2s}.ui-theme-knob{position:absolute;width:22px;height:22px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(15,23,42,.25);transition:.2s}.ui-theme-slider:before{content:"☀";position:absolute;left:8px;top:5px;font-size:11px;line-height:1;color:#f58220;z-index:1}.ui-theme-slider:after{content:"☾";position:absolute;right:8px;top:5px;font-size:12px;line-height:1;color:#64748b}.ui-theme-switch input:checked+.ui-theme-slider{background:linear-gradient(135deg,#0b2c4d,#f58220)}.ui-theme-switch input:checked+.ui-theme-slider .ui-theme-knob{transform:translateX(24px)}.ui-theme-text{font-size:12px;color:#64748b}.ui-welcome-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(11,44,77,.10);background:#fff;border-radius:999px;padding:6px 11px;font-size:12px;box-shadow:0 4px 12px rgba(11,44,77,.06)}.ui-welcome-chip span{color:#64748b;font-weight:800}.ui-welcome-chip strong{color:#0b2c4d;font-weight:850}
            .ui-page-header,.ui-action-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid rgba(15,44,77,.12);border-radius:12px;padding:12px 14px;box-shadow:0 5px 16px rgba(0,0,0,.06);margin-top:14px}.ui-page-header h3,.ui-action-bar h5{margin:0;color:#0b2c4d;font-weight:900}.ui-page-subtitle,.ui-action-subtitle{font-size:12px;color:#6c757d;font-weight:700}.ui-page-actions,.ui-action-bar-buttons{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
            .ui-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}.ui-stat-card{background:#fff;border:1px solid rgba(15,44,77,.12);border-radius:12px;padding:13px;box-shadow:0 5px 16px rgba(0,0,0,.06);border-left:5px solid #0b2c4d}.ui-stat-title{font-size:12px;color:#6c757d;font-weight:900;text-transform:uppercase}.ui-stat-value{font-size:26px;font-weight:950;color:#0b2c4d;line-height:1.1}.ui-stat-note{font-size:12px;color:#6c757d;font-weight:700}.ui-stat-success{border-left-color:#198754}.ui-stat-warning{border-left-color:#ffc107}.ui-stat-danger{border-left-color:#dc3545}.ui-stat-info{border-left-color:#0d6efd}.ui-stat-orange{border-left-color:#ff8c00}
            .ui-section{background:#fff;border:1px solid rgba(15,44,77,.12);border-radius:12px;padding:14px;box-shadow:0 5px 16px rgba(0,0,0,.06);margin-top:14px}.ui-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}.ui-section-head h5{margin:0;color:#0b2c4d;font-weight:900}.ui-section-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
            .ui-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:900;border:1px solid transparent}.ui-badge-success{background:#e8f7ef;color:#146c43;border-color:#cdebd9}.ui-badge-secondary{background:#eef1f5;color:#495057;border-color:#dfe5ec}.ui-badge-danger{background:#fdebed;color:#b02a37;border-color:#f5c2c7}.ui-badge-warning{background:#fff8df;color:#7a5600;border-color:#ffe69c}.ui-badge-info{background:#eef5ff;color:#084298;border-color:#bfd7ff}
            .ui-action-row-right{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}.ui-action-row-center,.ui-table-actions{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap}.ui-search-input{max-width:470px}.ui-empty-state{text-align:center;padding:26px 12px;color:#6c757d}.ui-empty-icon{font-size:28px;margin-bottom:6px}
            .ui-progress{height:8px;background:#e8edf4;border-radius:20px;overflow:hidden}.ui-progress-bar{height:100%;background:linear-gradient(90deg,#ff8c00,#ffc064)}.ui-progress-label{font-size:12px;color:#6c757d;font-weight:800;margin-top:4px;text-align:right}
            .ui-feedback-content{border:0;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.22);overflow:hidden}.ui-feedback-content::before{content:"";display:block;height:7px;background:#0d6efd}.ui-feedback-success::before{background:#198754}.ui-feedback-danger::before{background:#dc3545}.ui-feedback-warning::before{background:#ffc107}.ui-feedback-info::before{background:#0d6efd}.ui-feedback-icon{width:58px;height:58px;margin:0 auto 12px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;background:#eef5ff;color:#0d6efd}.ui-feedback-success .ui-feedback-icon{background:#e8f7ef;color:#198754}.ui-feedback-danger .ui-feedback-icon{background:#fdebed;color:#dc3545}.ui-feedback-warning .ui-feedback-icon{background:#fff8df;color:#9a6a00}.ui-feedback-title{font-weight:900;color:#0b2c4d;margin-bottom:6px}.ui-feedback-message{color:#495057;margin:0;font-weight:700}
            @media(max-width:1100px){.ui-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:576px){.ui-stat-grid{grid-template-columns:1fr}.ui-page-actions,.ui-action-bar-buttons,.ui-action-row-right,.ui-action-row-center,.ui-table-actions{justify-content:stretch;width:100%}.ui-page-actions .btn,.ui-action-bar-buttons .btn,.ui-action-row-right .btn,.ui-action-row-center .btn,.ui-table-actions .btn{flex:1}.ui-search-input{max-width:none}}

/* Backward-compatible aliases and mobile card helpers */

.ui-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px;margin-bottom:14px}
.ui-mobile-card{display:none}
@media(max-width:1100px){.ui-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){
    .ui-mobile-card{display:block;border:1px solid #e9edf3;border-radius:12px;padding:12px;margin-bottom:10px;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.04)}
    .ui-mobile-card-head{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px}
    .ui-mobile-card-head small{display:block;color:#6c757d;margin-top:2px;font-size:12px}
    .ui-mobile-row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid #f0f2f5;font-size:13px}
    .ui-mobile-row span{color:#6c757d}.ui-mobile-row strong{text-align:right;font-weight:700}
    .ui-mobile-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid #f0f2f5}
    .ui-hide-mobile-table table{display:none}
}
body.dark-mode .ui-page-header,body.dark-mode .ui-action-bar,body.dark-mode .ui-section,body.dark-mode .ui-stat-card,body.dark-mode .ui-mobile-card,body.dark-mode .ui-welcome-chip{background:#1f2937;border-color:#374151;color:#fff}
body.dark-mode .ui-page-header h3,body.dark-mode .ui-action-bar h5,body.dark-mode .ui-section-head h5,body.dark-mode .ui-stat-value,body.dark-mode .ui-welcome-chip strong{color:#fff}
body.dark-mode .ui-page-subtitle,body.dark-mode .ui-action-subtitle,body.dark-mode .ui-stat-title,body.dark-mode .ui-stat-note,body.dark-mode .ui-theme-text,body.dark-mode .ui-welcome-chip span{color:#cbd5e1}

/* =====================================================
   SaylanSoft common shape system
   Keeps older and newer admin screens visually consistent.
   ===================================================== */
:root{
    --ui-radius-card:14px;
    --ui-radius-control:10px;
    --ui-radius-pill:999px;
}
.ui-page-header,.ui-action-bar,.ui-section,.ui-stat-card,.dashboard-card,.card,.modal-content{
    border-radius:var(--ui-radius-card)!important;
}
.form-control,.form-select,.ui-input,
input:not([type]),input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="search"],input[type="tel"],input[type="url"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],input[type="file"],textarea,select{
    border-radius:var(--ui-radius-control)!important;
}
.btn,.ui-button,button.ui-button,a.ui-button{
    border-radius:var(--ui-radius-pill)!important;
}
.btn-group>.btn{border-radius:0!important}.btn-group>.btn:first-child{border-radius:var(--ui-radius-pill) 0 0 var(--ui-radius-pill)!important}.btn-group>.btn:last-child{border-radius:0 var(--ui-radius-pill) var(--ui-radius-pill) 0!important}
.table-responsive,.ui-table-wrap,.list-group{
    border-radius:var(--ui-radius-card);
    overflow:hidden;
}
/* =====================================================
   SriSoft LMS - Common Input Styling
   Purpose: Apply LMS input background + focus colors globally.
   Important: Keep this file loaded AFTER Bootstrap/style.css.
   ===================================================== */

:root {
    --ui-input-bg: #f7faff;
    --ui-input-focus-bg: #fff8d9;
    --ui-input-border: #c9d7e8;
    --ui-input-focus-border: #0d6efd;
    --ui-input-text: #212529;
    --ui-input-placeholder: #8a97a8;
    --ui-input-readonly-bg: #eceff3;
    --ui-input-disabled-bg: #e9ecef;
}

/*
   Covers Bootstrap inputs AND plain HTML inputs used in older screens.
   Excludes checkbox/radio/button/submit/reset/file/range/color/hidden.
*/
.form-control,
.form-select,
.ui-input,
input:not([type]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select {
    background-color: var(--ui-input-bg) !important;
    border-color: var(--ui-input-border) !important;
    color: var(--ui-input-text) !important;
    transition: background-color .20s ease, border-color .20s ease, box-shadow .20s ease !important;
}

.form-control::placeholder,
.ui-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--ui-input-placeholder) !important;
    opacity: 1 !important;
}

.form-control:focus,
.form-select:focus,
.ui-input:focus,
input:not([type]):focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
textarea:focus,
select:focus {
    background-color: var(--ui-input-focus-bg) !important;
    border-color: var(--ui-input-focus-border) !important;
    box-shadow: 0 0 0 0.18rem rgba(13,110,253,.15) !important;
    color: var(--ui-input-text) !important;
    outline: none !important;
}

.form-control[readonly],
.ui-input[readonly],
input[readonly],
textarea[readonly] {
    background-color: var(--ui-input-readonly-bg) !important;
    color: #666 !important;
}

.form-control:disabled,
.form-select:disabled,
.ui-input:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    background-color: var(--ui-input-disabled-bg) !important;
    color: #666 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* Browser autofill can hide custom backgrounds unless forced. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--ui-input-bg) inset !important;
    -webkit-text-fill-color: var(--ui-input-text) !important;
    caret-color: var(--ui-input-text) !important;
}

input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--ui-input-focus-bg) inset, 0 0 0 0.18rem rgba(13,110,253,.15) !important;
}

body.dark-mode {
    --ui-input-bg: #111827;
    --ui-input-focus-bg: #1f2937;
    --ui-input-border: #4b5563;
    --ui-input-focus-border: #f58220;
    --ui-input-text: #f9fafb;
    --ui-input-placeholder: #9ca3af;
    --ui-input-readonly-bg: #263142;
    --ui-input-disabled-bg: #1f2937;
}