/* ============================================================
   EduCloud — Blue & White Theme Overrides
   Loaded after the base AdminPro `style.css` so these rules win.
   ============================================================ */

:root {
    /* Brand palette — matches the landing page (indigo / violet) */
    --ec-primary: #6366f1;
    --ec-primary-dark: #534ab7;
    --ec-primary-light: #818cf8;
    --ec-accent: #a5b4fc;
    --ec-soft: #eef2ff;
    --ec-bg: #f4f8fc;
    --ec-text: #1a2238;
    --ec-muted: #6c7a93;
    --ec-border: #e2ecf6;
    --ec-shadow: 0 4px 14px rgba(99, 102, 241, 0.08);

    /* Sidebar palette (indigo) */
    --ec-side-bg-top: #3730a3;
    --ec-side-bg-bot: #312e81;
    --ec-side-text: #eef2ff;
    --ec-side-text-dim: #c7d2fe;
    --ec-side-section: #a5b4fc;
    --ec-side-active-bg: rgba(255, 255, 255, 0.10);
    --ec-side-active-bar: #818cf8;
    --ec-side-hover-bg: rgba(255, 255, 255, 0.06);
    --ec-side-divider: rgba(255, 255, 255, 0.08);
}

/* ── Global background ───────────────────────────────── */
body,
.pcoded,
.pcoded-content,
.pcoded-main-container,
.pcoded-inner-content,
.pcoded-wrapper,
.main-body {
    background-color: var(--ec-bg) !important;
    color: var(--ec-text);
}

/* ── Global page padding so content never touches edges ─ */
.pcoded-inner-content {
    padding: 24px 28px !important;
}
@media (max-width: 768px) {
    .pcoded-inner-content { padding: 16px !important; }
}
.page-body { padding-top: 4px; }

/* ── Headers / Navbar ─────────────────────────────────────
   The EduCloud gradient is the DEFAULT look, but it must step aside the moment the
   Style Selector sets "Header color" to something other than the template default
   (theme1) — otherwise these !important rules silently win and the option looks
   broken. Every themed option below follows the same "default value or absent"
   pattern. Defaults: header-theme=theme1, logo-theme=theme4,
   active-item-theme=theme1, menu-title-theme=theme5. */
.pcoded-header:not([header-theme]),
.pcoded-header[header-theme="theme1"],
.pcoded-header:not([header-theme]) .navbar-wrapper,
.pcoded-header[header-theme="theme1"] .navbar-wrapper,
.pcoded-header:not([header-theme]) .navbar-brand-box,
.pcoded-header[header-theme="theme1"] .navbar-brand-box {
    background: linear-gradient(135deg, var(--ec-primary-dark) 0%, var(--ec-primary) 60%, var(--ec-primary-light) 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 12px rgba(99,102,241, 0.18);
}

/* Brand/logo area: transparent by default so the header gradient shows through.
   Steps aside once a "Header Brand color" (logo-theme) is chosen. */
.pcoded-header .navbar-logo:not([logo-theme]),
.pcoded-header .navbar-logo[logo-theme="theme4"],
.pcoded-header .navbar-logo:not([logo-theme]) .b-bg,
.pcoded-header .navbar-logo[logo-theme="theme4"] .b-bg {
    background: transparent !important;
}

/* White header icons/text — only while the header is the EduCloud gradient, since a
   chosen header theme may be light. */
.pcoded-header:not([header-theme]) .navbar-container .nav-left > li > a,
.pcoded-header[header-theme="theme1"] .navbar-container .nav-left > li > a,
.pcoded-header:not([header-theme]) .navbar-container .nav-right > li > a,
.pcoded-header[header-theme="theme1"] .navbar-container .nav-right > li > a,
.pcoded-header:not([header-theme]) .navbar-container .nav-left > li > a > i,
.pcoded-header[header-theme="theme1"] .navbar-container .nav-left > li > a > i,
.pcoded-header:not([header-theme]) .navbar-container .nav-right > li > a > i,
.pcoded-header[header-theme="theme1"] .navbar-container .nav-right > li > a > i,
.pcoded-header:not([header-theme]) .navbar-container .nav-right > li .user-profile span,
.pcoded-header[header-theme="theme1"] .navbar-container .nav-right > li .user-profile span {
    color: #fff !important;
}

/* ── Sidebar (dark navy for strong contrast) ─────────────
   Default look only. As soon as the Customizer picks a "Navbar/Menu background"
   other than the template default (theme1), these step aside so the chosen preset
   is what actually paints the sidebar. */
.pcoded .pcoded-navbar:not([navbar-theme]),
.pcoded .pcoded-navbar[navbar-theme=theme1],
.pcoded .pcoded-navbar:not([navbar-theme]) .main-menu,
.pcoded .pcoded-navbar[navbar-theme=theme1] .main-menu,
.pcoded .pcoded-navbar:not([navbar-theme]) .main-menu .main-menu-header,
.pcoded .pcoded-navbar[navbar-theme=theme1] .main-menu .main-menu-header,
.pcoded .pcoded-navbar:not([navbar-theme]) .pcoded-inner-navbar,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-inner-navbar {
    background: linear-gradient(180deg, var(--ec-side-bg-top) 0%, var(--ec-side-bg-bot) 100%) !important;
    background-color: var(--ec-side-bg-top) !important;
    border-right: 0 !important;
    box-shadow: 4px 0 18px rgba(10, 37, 64, 0.18);
}

/* The scroll wrapper must never paint over the sidebar, whichever theme is chosen. */
.pcoded .pcoded-navbar .mCustomScrollBox,
.pcoded .pcoded-navbar .mCSB_container,
.pcoded .pcoded-navbar .mCSB_inside > .mCSB_container,
.pcoded .pcoded-navbar .main-menu .main-menu-content {
    background: transparent !important;
}

/* Brand area at top of sidebar */
.pcoded-navbar .pcoded-navigation,
.pcoded-navbar .navbar-brand,
.pcoded-navbar .navbar-logo {
    background: transparent !important;
    border-bottom: 1px solid var(--ec-side-divider) !important;
}

/* Section label (e.g. "Navigation", "Academics") — typography always applies. */
.pcoded .pcoded-navbar .pcoded-navigatio-lavel,
.pcoded .pcoded-navbar[navbar-theme] .pcoded-navigatio-lavel,
.pcoded .pcoded-navbar[navbar-theme=themelight1] .pcoded-navigatio-lavel {
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase;
    padding: 18px 22px 8px !important;
    opacity: 0.85;
    background: transparent !important;
}

/* …but the colour steps aside for a chosen "Menu Caption color" (default theme5). */
.pcoded .pcoded-navbar .pcoded-navigatio-lavel:not([menu-title-theme]),
.pcoded .pcoded-navbar .pcoded-navigatio-lavel[menu-title-theme="theme5"] {
    color: var(--ec-side-section) !important;
}

/* Top-level menu items. The light text is only correct on the dark default sidebar —
   on a light Customizer preset it would be invisible, so it is gated too. Spacing and
   transitions are safe on any theme and stay unconditional. */
.pcoded .pcoded-navbar .pcoded-item > li > a {
    border-left: 4px solid transparent !important;
    transition: background .15s, border-color .15s, color .15s;
}

.pcoded .pcoded-navbar:not([navbar-theme]) .pcoded-item > li > a,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-item > li > a,
.pcoded .pcoded-navbar:not([navbar-theme]) .pcoded-item > li > a .pcoded-mtext,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-item > li > a .pcoded-mtext,
.pcoded .pcoded-navbar:not([navbar-theme]) .pcoded-item > li > a .pcoded-micon,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-item > li > a .pcoded-micon,
.pcoded .pcoded-navbar:not([navbar-theme]) .pcoded-item > li > a .pcoded-micon i,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-item > li > a .pcoded-micon i {
    color: var(--ec-side-text) !important;
}

.pcoded .pcoded-navbar:not([navbar-theme]) .pcoded-item > li > a .pcoded-micon,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-item > li > a .pcoded-micon {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px;
}

/* Hover — same story: only for the dark default sidebar. */
.pcoded .pcoded-navbar:not([navbar-theme]) .pcoded-item > li:hover > a,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-item > li:hover > a {
    background: var(--ec-side-hover-bg) !important;
    color: #fff !important;
    border-left-color: var(--ec-side-active-bar) !important;
}

.pcoded .pcoded-navbar:not([navbar-theme]) .pcoded-item > li:hover > a .pcoded-mtext,
.pcoded .pcoded-navbar:not([navbar-theme]) .pcoded-item > li:hover > a .pcoded-micon i,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-item > li:hover > a .pcoded-mtext,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-item > li:hover > a .pcoded-micon i {
    color: #fff !important;
}

/* Active — the EduCloud highlight is the default, but steps aside for a chosen
   "Active link color" (default theme1). */
.pcoded .pcoded-navbar:not([active-item-theme]) .pcoded-item > li.active > a,
.pcoded .pcoded-navbar:not([active-item-theme]) .pcoded-item > li.pcoded-trigger > a,
.pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item > li.active > a,
.pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item > li.pcoded-trigger > a {
    background: var(--ec-side-active-bg) !important;
    color: #fff !important;
    border-left: 4px solid var(--ec-side-active-bar) !important;
}

.pcoded .pcoded-navbar:not([active-item-theme]) .pcoded-item > li.active > a .pcoded-mtext,
.pcoded .pcoded-navbar:not([active-item-theme]) .pcoded-item > li.active > a .pcoded-micon i,
.pcoded .pcoded-navbar:not([active-item-theme]) .pcoded-item > li.pcoded-trigger > a .pcoded-mtext,
.pcoded .pcoded-navbar:not([active-item-theme]) .pcoded-item > li.pcoded-trigger > a .pcoded-micon i,
.pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item > li.active > a .pcoded-mtext,
.pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item > li.active > a .pcoded-micon i,
.pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item > li.pcoded-trigger > a .pcoded-mtext,
.pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item > li.pcoded-trigger > a .pcoded-micon i {
    color: #fff !important;
}

.pcoded .pcoded-navbar:not([active-item-theme]) .pcoded-item > li.active > a .pcoded-micon,
.pcoded .pcoded-navbar:not([active-item-theme]) .pcoded-item > li.pcoded-trigger > a .pcoded-micon,
.pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item > li.active > a .pcoded-micon,
.pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item > li.pcoded-trigger > a .pcoded-micon {
    background: var(--ec-side-active-bar) !important;
}

/* Submenu — indentation/size are safe on any theme; colours are for the dark default
   sidebar only, so they are gated on navbar-theme like everything else above. */
.pcoded .pcoded-navbar .pcoded-submenu > li > a {
    padding-left: 58px !important;
    font-size: 13px !important;
}

.pcoded .pcoded-navbar:not([navbar-theme]) .pcoded-submenu,
.pcoded .pcoded-navbar:not([navbar-theme]) .pcoded-hasmenu .pcoded-submenu,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-submenu,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-hasmenu .pcoded-submenu {
    background: rgba(0, 0, 0, 0.22) !important;
    border-left: 0 !important;
}

.pcoded .pcoded-navbar:not([navbar-theme]) .pcoded-submenu > li > a,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-submenu > li > a,
.pcoded .pcoded-navbar:not([navbar-theme]) .pcoded-submenu > li > a:before,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-submenu > li > a:before {
    color: var(--ec-side-text-dim) !important;
}

.pcoded .pcoded-navbar:not([navbar-theme]) .pcoded-submenu > li > a:hover,
.pcoded .pcoded-navbar:not([navbar-theme]) .pcoded-submenu > li.active > a,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-submenu > li > a:hover,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-submenu > li.active > a {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

.pcoded .pcoded-navbar:not([navbar-theme]) .pcoded-submenu > li:hover > a:before,
.pcoded .pcoded-navbar:not([navbar-theme]) .pcoded-submenu > li.active > a:before,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-submenu > li:hover > a:before,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-submenu > li.active > a:before {
    color: var(--ec-side-active-bar) !important;
}

/* Caret arrow on items with submenu */
.pcoded .pcoded-navbar:not([navbar-theme]) .pcoded-hasmenu > a:after,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-hasmenu > a:after {
    color: var(--ec-side-text-dim) !important;
}

.pcoded .pcoded-navbar .pcoded-hasmenu:hover > a:after,
.pcoded .pcoded-navbar .pcoded-hasmenu.pcoded-trigger > a:after {
    color: #fff !important;
}

/* Sidebar scrollbar tweak */
.pcoded-navbar ::-webkit-scrollbar { width: 6px; }
.pcoded-navbar ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 4px; }
.pcoded-navbar ::-webkit-scrollbar-track { background: transparent; }

/* ── Cards ───────────────────────────────────────────── */
.card {
    border: 1px solid var(--ec-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--ec-shadow) !important;
    background: #fff;
}

.card .card-header {
    background: #fff !important;
    border-bottom: 1px solid var(--ec-border) !important;
    border-radius: 12px 12px 0 0 !important;
}

.card .card-header h5 {
    color: var(--ec-primary-dark) !important;
    font-weight: 600;
}

/* ── Page header ─────────────────────────────────────── */
.page-header {
    background: #fff !important;
    border-radius: 12px;
    padding: 16px 20px !important;
    margin-bottom: 18px !important;
    box-shadow: var(--ec-shadow);
    border: 1px solid var(--ec-border);
}

.page-header-title h4,
.page-header-title h5 {
    color: var(--ec-primary-dark) !important;
    font-weight: 700;
}

.breadcrumb-title .breadcrumb-item a {
    color: var(--ec-primary) !important;
}

/* ── Buttons ─────────────────────────────────────────── */
.btn-primary,
button.btn.btn-primary,
a.btn.btn-primary {
    background: linear-gradient(135deg, var(--ec-primary) 0%, var(--ec-primary-light) 100%) !important;
    border-color: var(--ec-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(99,102,241, 0.25);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(135deg, var(--ec-primary-dark) 0%, var(--ec-primary) 100%) !important;
    border-color: var(--ec-primary-dark) !important;
    box-shadow: 0 4px 10px rgba(99,102,241, 0.35);
}

.btn-outline-primary {
    color: var(--ec-primary) !important;
    border-color: var(--ec-primary) !important;
}

.btn-outline-primary:hover {
    background: var(--ec-primary) !important;
    color: #fff !important;
}

.btn-info,
.btn-secondary {
    background: var(--ec-accent) !important;
    border-color: var(--ec-accent) !important;
    color: #fff !important;
}

.btn-light {
    background: #fff !important;
    color: var(--ec-primary-dark) !important;
    border-color: var(--ec-border) !important;
}

.btn-light:hover {
    background: var(--ec-soft) !important;
    color: var(--ec-primary-dark) !important;
    border-color: var(--ec-primary-light) !important;
}

/* ── Badges / chips ──────────────────────────────────── */
.badge-primary { background: var(--ec-primary) !important; color: #fff !important; }
.badge-info    { background: var(--ec-accent) !important; color: #fff !important; }
.bg-primary    { background: var(--ec-primary) !important; color: #fff !important; }
.bg-info       { background: var(--ec-accent) !important; color: #fff !important; }
.text-primary  { color: var(--ec-primary) !important; }
.text-info     { color: var(--ec-accent) !important; }

.bg-success    { background: linear-gradient(135deg, #26a69a, #00897b) !important; color: #fff !important; }
.bg-warning    { background: linear-gradient(135deg, #ffb74d, #fb8c00) !important; color: #fff !important; }
.bg-danger     { background: linear-gradient(135deg, #ef5350, #e53935) !important; color: #fff !important; }

/* ── Forms ───────────────────────────────────────────── */
.form-control {
    border: 1px solid var(--ec-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--ec-text) !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus {
    border-color: var(--ec-primary) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241, 0.12) !important;
    outline: none;
}

label {
    color: var(--ec-text);
    font-weight: 500;
}

/* ── Tables ──────────────────────────────────────────── */
.table thead th {
    background: var(--ec-soft) !important;
    color: var(--ec-primary-dark) !important;
    border-bottom: 2px solid var(--ec-primary-light) !important;
    font-weight: 600;
}

.table tbody tr:hover {
    background: var(--ec-soft) !important;
}

/* ── Alerts ──────────────────────────────────────────── */
.alert-success { background: #e8f5e9 !important; color: #1b5e20 !important; border-color: #a5d6a7 !important; }
.alert-info    { background: var(--ec-soft) !important; color: var(--ec-primary-dark) !important; border-color: var(--ec-accent) !important; }
.alert-warning { background: #fff8e1 !important; color: #ef6c00 !important; border-color: #ffcc80 !important; }
.alert-danger  { background: #ffebee !important; color: #b71c1c !important; border-color: #ef9a9a !important; }

/* ── Breadcrumb / scrollbar tints ────────────────────── */
.breadcrumb {
    background: transparent !important;
}

/* Tweaks for the loader rings → blue */
.theme-loader .ring .frame {
    border-color: var(--ec-primary) !important;
}

/* Section / module gradient headers used throughout new pages */
.tt-grid th { background: linear-gradient(135deg, var(--ec-primary-dark), var(--ec-primary)) !important; }

/* Generic class for top-bar page banner if needed */
.ec-page-banner {
    background: linear-gradient(135deg, var(--ec-primary-dark) 0%, var(--ec-primary-light) 100%);
    color: #fff;
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 16px;
    box-shadow: var(--ec-shadow);
}

/* Top performer card border helper used on Student dashboard */
.border-success  { border-left-color: #26a69a !important; }
.border-primary  { border-left-color: var(--ec-primary) !important; }
.border-warning  { border-left-color: #fb8c00 !important; }
.border-info     { border-left-color: var(--ec-accent) !important; }