/* =========================================================
   Modern Admin Theme — layered override for eSchool panel
   Loaded LAST so it wins over style.css / rtl.css.
   Scope: sidebar, topbar, cards, tables, forms, buttons.
   ========================================================= */

:root{
    --ma-sidebar-w: 268px;
    --ma-bg: #f4f6fb;
    --ma-surface: #ffffff;
    --ma-border: #eaedf3;
    --ma-text: #2b2f3a;
    --ma-text-muted: #8a90a2;
    --ma-radius: 14px;
    --ma-radius-sm: 10px;
    --ma-shadow-sm: 0 1px 2px rgba(20, 24, 40, .05), 0 1px 3px rgba(20, 24, 40, .06);
    --ma-shadow-md: 0 4px 10px rgba(20, 24, 40, .06), 0 2px 4px rgba(20, 24, 40, .04);
    --ma-shadow-lg: 0 12px 28px rgba(20, 24, 40, .10), 0 4px 10px rgba(20, 24, 40, .06);
    --ma-accent: var(--theme-color, #4f6df5);
    --ma-accent-soft: color-mix(in srgb, var(--ma-accent) 12%, white);
    --ma-accent-softer: color-mix(in srgb, var(--ma-accent) 6%, white);
}

/* ---------- Arabic typeface: Cairo (self-hosted, variable font) ---------- */
@font-face{
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url('../fonts/Cairo-Arabic.woff2') format('woff2-variations'), url('../fonts/Cairo-Arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face{
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url('../fonts/Cairo-Latin.woff2') format('woff2-variations'), url('../fonts/Cairo-Latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body,
.sidebar, .sidebar .nav, .navbar,
.content-wrapper, .card, .table, .btn, .badge,
.form-control, .select2-container, .dropdown-menu, .modal,
label, input, select, textarea, button,
h1, h2, h3, h4, h5, h6,
.page-title, .card-title, .menu-title{
    font-family: 'Cairo', 'Roboto-Regular', -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

*{ scrollbar-width: thin; scrollbar-color: #c7cbdb transparent; }
*::-webkit-scrollbar{ width: 8px; height: 8px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{ background: #c7cbdb; border-radius: 20px; }
*::-webkit-scrollbar-thumb:hover{ background: #a7adc4; }

html{ scroll-behavior: smooth; }
body{ background: var(--ma-bg) !important; color: var(--ma-text); }

/* ---------- Topbar ---------- */
.navbar.default-layout-navbar{
    background: var(--ma-surface) !important;
    border-bottom: 1px solid var(--ma-border);
    box-shadow: var(--ma-shadow-sm);
    height: 64px;
}
.navbar .navbar-brand-wrapper{
    width: var(--ma-sidebar-w) !important;
    background: transparent;
    border-inline-end: 1px solid var(--ma-border);
    height: 64px;
}
.navbar .navbar-brand-wrapper .brand-logo img{ max-height: 36px; }
.navbar-toggler{
    border-radius: 10px;
    transition: background .15s ease;
}
.navbar-toggler:hover{ background: var(--ma-accent-softer); }
.navbar-nav-right .badge{
    border-radius: 999px;
    padding: .4em .8em;
    font-weight: 600;
    letter-spacing: .2px;
}
.navbar .nav-profile-img img{
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--ma-surface), 0 0 0 3.5px var(--ma-accent-soft);
}
.navbar-dropdown{
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius-sm);
    box-shadow: var(--ma-shadow-lg);
    padding: 8px;
}
.navbar-dropdown .dropdown-item{
    border-radius: 8px;
    padding: .55rem .75rem;
    transition: background .12s ease;
}
.navbar-dropdown .dropdown-item:hover{ background: var(--ma-accent-softer); }
.navbar-dropdown .dropdown-divider{ margin: 4px 0; }

/* ---------- Sidebar shell ---------- */
.sidebar-fixed .sidebar{
    width: var(--ma-sidebar-w) !important;
    background: var(--ma-surface) !important;
    border-inline-end: 1px solid var(--ma-border);
    box-shadow: none;
}
/* margin-inline-start (not margin-left): this panel is Arabic/RTL, where the
   sidebar sits on the right and rtl.css itself pushes content with
   margin-right — a hardcoded margin-left here would push the wrong edge. */
.sidebar-fixed .main-panel{ margin-inline-start: var(--ma-sidebar-w) !important; }

/* ---------- Collapsed ("hide sidebar" / icon-only) mode ----------
   Toggled by the header's minimize button, which adds .sidebar-icon-only
   to <body> (see assets/js/misc.js). The vendor theme shrinks the sidebar
   to 70px here, but our !important width/margin above was overriding that
   unconditionally, so the sidebar visually never collapsed. */
.sidebar-fixed.sidebar-icon-only .sidebar{ width: 70px !important; }
.sidebar-fixed.sidebar-icon-only .main-panel{ margin-inline-start: 70px !important; }
.sidebar-icon-only .navbar .navbar-brand-wrapper{ width: 70px !important; }
.sidebar-icon-only .sidebar-search-wrapper{ display: none; }
.sidebar-icon-only .sidebar > .nav > .nav-item > .nav-link{
    justify-content: center;
    padding-inline: 0 !important;
}
.sidebar-icon-only .sidebar > .nav > .nav-item > .nav-link .menu-title,
.sidebar-icon-only .sidebar > .nav > .nav-item > .nav-link .menu-arrow{
    display: none;
}
.sidebar-icon-only .sidebar .nav .sub-menu{ display: none !important; }
.sidebar-icon-only .sidebar > .nav > .nav-item.active > .nav-link::before{ display: none; }

/* independently-scrollable nav list, thin themed scrollbar */
.sidebar-fixed .sidebar .nav{
    padding: 10px 12px 24px 12px !important;
    scrollbar-width: thin;
    scrollbar-color: var(--ma-accent-soft) transparent;
}
.sidebar-fixed .sidebar .nav::-webkit-scrollbar{ width: 6px; }
.sidebar-fixed .sidebar .nav::-webkit-scrollbar-thumb{
    background: color-mix(in srgb, var(--ma-accent) 35%, #c7cbdb);
    border-radius: 20px;
}
.sidebar-fixed .sidebar .nav::-webkit-scrollbar-thumb:hover{
    background: var(--ma-accent);
}

/* ---------- Sidebar search ---------- */
.sidebar .sidebar-search-wrapper{
    padding: 4px 6px 12px 6px !important;
    position: sticky;
    top: 0;
    background: var(--ma-surface);
    z-index: 3;
}
.sidebar-search{
    position: relative;
}
.sidebar-search input{
    width: 100%;
    border: 1px solid var(--ma-border);
    background: var(--ma-bg);
    border-radius: 10px;
    padding-block: 9px;
    padding-inline: 34px 12px;
    font-size: 13.5px;
    color: var(--ma-text);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.sidebar-search input:focus{
    background: var(--ma-surface);
    border-color: var(--ma-accent);
    box-shadow: 0 0 0 3px var(--ma-accent-soft);
}
.sidebar-search::before{
    content: "\f002";
    font-family: FontAwesome;
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ma-text-muted);
    font-size: 12.5px;
    pointer-events: none;
}
.sidebar-search-empty{
    display: none;
    padding: 14px 10px;
    text-align: center;
    color: var(--ma-text-muted);
    font-size: 12.5px;
}

/* ---------- Sidebar nav items ---------- */
.sidebar .nav .nav-item{
    padding: 0 !important;
    margin-bottom: 2px;
}
.sidebar .nav .nav-item > .nav-link{
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 9px 12px !important;
    border-radius: 10px;
    color: var(--ma-text) !important;
    font-size: 13.6px;
    font-weight: 500;
    line-height: 1.3;
    transition: background .14s ease, color .14s ease, transform .1s ease;
    white-space: normal;
}
.sidebar .nav .nav-item > .nav-link:hover{
    background: var(--ma-accent-softer);
    color: var(--ma-accent) !important;
}
.sidebar .nav .nav-item > .nav-link:active{ transform: scale(.99); }

.sidebar .nav .nav-item > .nav-link .menu-icon{
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    border-radius: 9px;
    background: var(--ma-accent-softer);
    color: var(--ma-accent);
    font-size: 14px;
    transition: background .14s ease, color .14s ease;
}
.sidebar .nav .nav-item > .nav-link:hover .menu-icon{
    background: var(--ma-accent);
    color: #fff;
}

.sidebar .nav .nav-item > .nav-link .menu-title{
    flex: 1 1 auto;
    color: inherit;
}

.sidebar .nav .nav-item > .nav-link .menu-arrow{
    flex: 0 0 auto;
    font-size: 11px !important;
    color: var(--ma-text-muted);
    transition: transform .2s ease;
}
.sidebar .nav .nav-item > .nav-link[aria-expanded="true"] .menu-arrow{
    transform: rotate(-90deg);
    color: var(--ma-accent);
}

/* active top-level item: accent pill + a bar on the reading-start edge.
   Uses logical properties throughout (this app never actually adds a
   ".rtl" class anywhere — its RTL page just sets dir="rtl" on <html> — so
   a ".rtl ..." selector here would silently never match; inset-inline-start
   etc. read the real, live direction instead and need no such class.) */
.sidebar .nav > .nav-item.active > .nav-link,
.sidebar .nav > .nav-item > .nav-link.active{
    background: var(--ma-accent-soft);
    color: var(--ma-accent) !important;
    font-weight: 600;
    position: relative;
}
.sidebar .nav > .nav-item.active > .nav-link::before,
.sidebar .nav > .nav-item > .nav-link.active::before{
    content: "";
    position: absolute;
    inset-inline-start: -12px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 4px;
    background: var(--ma-accent);
}
.sidebar .nav > .nav-item.active > .nav-link .menu-icon,
.sidebar .nav > .nav-item > .nav-link.active .menu-icon{
    background: var(--ma-accent);
    color: #fff;
}

/* ---------- Sub-menus: clear indent hierarchy ---------- */
.sidebar .nav .sub-menu{
    padding: 4px 0 6px 0 !important;
    position: relative;
    margin-inline-start: 27px;
    border-inline-start: 1.5px solid var(--ma-border);
}

.sidebar .nav .sub-menu .nav-item{ margin-bottom: 1px; }
.sidebar .nav .sub-menu .nav-item .nav-link{
    padding-block: 7px !important;
    padding-inline: 16px 12px !important;
    font-size: 13px;
    font-weight: 450;
    color: var(--ma-text-muted) !important;
    border-radius: 8px;
}
.sidebar .nav .sub-menu .nav-item .nav-link:hover{
    background: var(--ma-accent-softer);
    color: var(--ma-accent) !important;
}
.sidebar .nav .sub-menu .nav-item .nav-link.active{
    background: var(--ma-accent-soft);
    color: var(--ma-accent) !important;
    font-weight: 600;
}

/* collapse open/close smoothing already handled by bootstrap collapse+CSS transition on arrow */
.sidebar .collapse{ transition: height .2s ease; }

/* dashboard link (top, no submenu) spacing matches group items */
.sidebar > .nav > .nav-item:first-child{ margin-top: 2px; }

/* ---------- Content area ---------- */
.main-panel{ background: var(--ma-bg); }
.content-wrapper{
    padding: 22px 26px !important;
    background: var(--ma-bg);
}
.page-header{
    margin-bottom: 20px !important;
    padding-bottom: 0;
}
.page-title{
    font-size: 20px;
    font-weight: 700;
    color: var(--ma-text);
    display: flex;
    align-items: center;
}
.page-title-icon{
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ma-shadow-sm);
}

/* ---------- Cards ---------- */
.card{
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius);
    box-shadow: var(--ma-shadow-sm);
    background: var(--ma-surface);
    transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover{ box-shadow: var(--ma-shadow-md); }
.card .card-body{ padding: 1.4rem 1.5rem; }
.card-title{
    font-weight: 700;
    font-size: 15.5px;
    color: var(--ma-text);
    margin-bottom: 1rem;
}
.card[class*="bg-gradient-"]{ border: none; }
.card[class*="bg-gradient-"]:hover{ transform: translateY(-2px); box-shadow: var(--ma-shadow-lg); }

/* ---------- Tables ---------- */
.table{ color: var(--ma-text); margin-bottom: 0; }
.table thead th{
    border-bottom: 1.5px solid var(--ma-border) !important;
    border-top: none !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--ma-text-muted);
    font-weight: 700;
    padding: .55rem .75rem !important;
    background: var(--ma-bg);
    white-space: nowrap;
}
.table td{
    border-top: 1px solid var(--ma-border) !important;
    vertical-align: middle;
    padding: .4rem .75rem !important;
    font-size: 13.3px;
    line-height: 1.35;
}
.table-hover tbody tr{ transition: background .12s ease; }
.table-hover tbody tr:hover{ background: var(--ma-accent-softer); }
.table-responsive{ border-radius: var(--ma-radius-sm); }
.table-bordered, .table-bordered td, .table-bordered th{ border-color: var(--ma-border) !important; }

.fixed-table-container{
    border: 1px solid var(--ma-border) !important;
    border-radius: var(--ma-radius-sm);
}
.fixed-table-container .fixed-table-header{ background: var(--ma-bg); }
.fixed-table-toolbar{ margin-bottom: 12px; }
.fixed-table-toolbar .search input{
    border-radius: 9px !important;
    border: 1px solid var(--ma-border) !important;
    font-size: 13px;
}
.fixed-table-pagination{
    padding: 8px 12px;
    font-size: 12.5px;
    color: var(--ma-text-muted);
}
.fixed-table-pagination .page-list .btn{
    font-size: 12.5px;
    padding: .3rem .6rem;
}

/* Compact, consistently-sized action icon-buttons inside table rows —
   the vendor theme's .btn-icon is 42x42 with zero padding, which alone
   forces every data row to grow past 60px; this is what made row height
   look inconsistent/bloated across every list in the panel. */
.table td .btn.btn-icon,
.table td a.btn-icon{
    width: 26px !important;
    height: 26px !important;
    min-width: 26px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    vertical-align: middle;
    margin: 0 2px;
    box-shadow: none;
}
.table td .btn.btn-icon + .btn.btn-icon{ margin-inline-start: 4px; }

/* Action cells sometimes wrap one icon in a <div class="dropdown"> (e.g. the
   "generate document" menu) for its dropdown-menu JS. A <div> is block-level
   by default, so it drops to its own line no matter how small the icon is —
   that's what produced the two-row action column. Keep it inline instead. */
.table td .dropdown{
    display: inline-flex !important;
    vertical-align: middle;
    margin: 0 2px;
}
.table td .dropdown .btn.btn-icon{ margin: 0; }

.table td{ white-space: nowrap; }
.table td.wrap, .table td[data-field="description"], .table td[data-field="content"]{
    white-space: normal;
}

/* ---------- Buttons ---------- */
.btn{
    border-radius: 9px;
    font-weight: 600;
    font-size: 13.5px;
    padding: .5rem 1.1rem;
    letter-spacing: .1px;
}
.btn-sm{ border-radius: 7px; padding: .32rem .75rem; }
.btn-inverse-info, .btn-info{ box-shadow: var(--ma-shadow-sm); }

/* ---------- Forms ---------- */
.form-control, .select2-container--default .select2-selection--single{
    border-radius: 9px !important;
    border: 1px solid var(--ma-border) !important;
    background: var(--ma-surface);
    font-size: 13.5px;
}
.form-control:focus{
    border-color: var(--ma-accent) !important;
    box-shadow: 0 0 0 3px var(--ma-accent-soft) !important;
}
label{ font-weight: 600; font-size: 13px; color: var(--ma-text); }

/* ---------- Badges & misc ---------- */
.badge{ border-radius: 999px; font-weight: 600; letter-spacing: .2px; }
.pagination .page-link{ border-radius: 8px !important; margin: 0 2px; border: 1px solid var(--ma-border); }
.pagination .page-item.active .page-link{ background: var(--ma-accent); border-color: var(--ma-accent); }

/* ---------- Responsive ---------- */
@media (max-width: 991px){
    .sidebar-fixed .main-panel{ margin-inline-start: 0 !important; }
    .navbar .navbar-brand-wrapper{ width: auto !important; border-inline-end: none; }
}