/* =====================================================================
   LUMAFRICA THEME — override layer
   Loaded AFTER style.css / main.css / custom.css so it wins the cascade.
   Inspired by the baobab logo + Sahel palette:
   navy trunk · gold reaching figure · green canopy.
   Safe & reversible: remove the <link> to fully restore the old look.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --lf-navy-900: #0B1C34;
  --lf-navy-800: #102746;
  --lf-navy-700: #15315c;
  --lf-navy:     #1B3A6B;
  --lf-navy-400: #2f5aa0;

  --lf-green-600:#23774C;
  --lf-green:    #2C8A5B;
  --lf-green-400:#34C77B;

  --lf-gold:     #E0A826;
  --lf-gold-400: #F5C24B;

  --lf-bg:       #F3F6FB;
  --lf-card:     #FFFFFF;
  --lf-ink:      #1E2A44;
  --lf-muted:    #6B7A90;
  --lf-line:     #E7ECF3;

  --lf-shadow:   0 10px 30px -12px rgba(16, 39, 70, 0.18);
  --lf-shadow-lg:0 24px 60px -24px rgba(16, 39, 70, 0.28);
  --lf-r:        14px;

  /* re-map Bootstrap primary to Lumafrica navy */
  --bs-primary: #1B3A6B;
  --bs-primary-rgb: 27, 58, 107;
  --bs-link-color: #1B3A6B;
  --bs-link-hover-color: #2C8A5B;
}

/* ── Base type & canvas ──────────────────────────────────────────── */
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--lf-ink);
}
.home-section, .home-content, body { background-color: var(--lf-bg) !important; }

h1,h2,h3,h4,h5,h6 { color: var(--lf-navy-800); font-weight: 700; letter-spacing: -0.2px; }
a { color: var(--lf-navy); }
a:hover { color: var(--lf-green); }

/* Pretty, on-brand scrollbars */
* { scrollbar-color: var(--lf-navy-400) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(27,58,107,.28); border-radius: 20px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(27,58,107,.45); }


/* ── SIDEBAR — deep Sahel-night navy with a baobab-gold accent ───── */
.sidebar {
  background: linear-gradient(185deg, var(--lf-navy-800) 0%, var(--lf-navy-900) 60%, #081222 100%) !important;
  box-shadow: 14px 0 40px -28px rgba(0,0,0,.6) !important;
  border-right: 1px solid rgba(255,255,255,.04);
}
.sidebar .logo-details { border-bottom: 1px solid rgba(255,255,255,.06); }
.sidebar .logo-details .logo_name {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; letter-spacing: .4px;
}

/* accent rail: blue -> gold */
.sidebar .nav-links > li .iocn-link::before,
.sidebar .nav-links > li.showMenu .iocn-link::before {
  background: linear-gradient(180deg, var(--lf-gold-400), var(--lf-gold)) !important;
  width: 4px !important; height: 26px !important;
  box-shadow: 0 0 14px rgba(224,168,38,.55);
}

.sidebar .nav-links > li .iocn-link { border-radius: 10px; margin: 2px 10px; transition: background .25s; }
.sidebar .nav-links > li:hover .iocn-link,
.sidebar .nav-links > li.showMenu .iocn-link {
  background: rgba(255,255,255,.05);
}

/* active / open icon: gold instead of blue */
.sidebar .nav-links > li.showMenu .iocn-link a .sidebar_icon svg,
.sidebar .nav-links > li:hover .sidebar_icon svg {
  color: var(--lf-gold-400) !important; fill: var(--lf-gold-400) !important;
}
.sidebar .nav-links > li a .link_name { font-weight: 600; letter-spacing: .1px; }
.sidebar .nav-links > li.showMenu a .link_name { color: #fff; }

/* submenu panel */
.sidebar .nav-links > li .sub-menu {
  background: rgba(8, 18, 34, .6) !important;
  border-radius: 0 0 12px 12px; margin: -8px 10px 4px;
  padding-left: 50px !important;
}
.sidebar .nav-links > li .sub-menu a { border-radius: 6px; }
.sidebar .nav-links > li .sub-menu a.active span,
.sidebar .nav-links > li .sub-menu a:hover span { color: var(--lf-gold-400); }
.sidebar .nav-links > li .sub-menu a.active { opacity: 1; }
.sidebar .nav-links > li .sub-menu a.active::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lf-gold-400); margin-right: 9px; vertical-align: middle;
}


/* ── TOP HEADER ──────────────────────────────────────────────────── */
.home-header {
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: 0 12px 30px -20px rgba(16,39,70,.35) !important;
  border-bottom: 1px solid var(--lf-line);
}
.header_notification .notification_icon { background: #E3F5EA !important; }
.header_notification .notification_icon i,
.header_notification p span { color: var(--lf-green) !important; }
.eLogut_btn {
  background: linear-gradient(135deg, var(--lf-navy) 0%, var(--lf-navy-700) 100%) !important;
  border-radius: 10px !important; box-shadow: 0 8px 18px -8px rgba(27,58,107,.6);
  transition: transform .18s, box-shadow .18s;
}
.eLogut_btn:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -8px rgba(44,138,91,.6); }


/* ── BUTTONS ─────────────────────────────────────────────────────── */
.btn { border-radius: 10px; font-weight: 600; }
.btn-primary {
  --bs-btn-bg: var(--lf-navy); --bs-btn-border-color: var(--lf-navy);
  --bs-btn-hover-bg: var(--lf-navy-700); --bs-btn-hover-border-color: var(--lf-navy-700);
  --bs-btn-active-bg: var(--lf-navy-800); --bs-btn-active-border-color: var(--lf-navy-800);
  background: linear-gradient(135deg, var(--lf-navy) 0%, var(--lf-navy-700) 100%) !important;
  border-color: var(--lf-navy) !important;
  box-shadow: 0 10px 22px -12px rgba(27,58,107,.7);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-success { --bs-btn-bg: var(--lf-green); --bs-btn-border-color: var(--lf-green);
  background: var(--lf-green) !important; border-color: var(--lf-green) !important; }
.btn-outline-primary { --bs-btn-color: var(--lf-navy); --bs-btn-border-color: var(--lf-navy);
  --bs-btn-hover-bg: var(--lf-navy); --bs-btn-hover-border-color: var(--lf-navy); color: var(--lf-navy); border-color: var(--lf-navy); }
.btn-warning, .btn-gold {
  background: linear-gradient(135deg, var(--lf-gold-400), var(--lf-gold)) !important;
  border-color: var(--lf-gold) !important; color: #3a2a05 !important;
}


/* ── LINKS / TEXT / BG UTILITIES re-skin ─────────────────────────── */
.text-primary { color: var(--lf-navy) !important; }
.bg-primary { background-color: var(--lf-navy) !important; }
.badge.bg-primary { background: var(--lf-navy) !important; }
.badge.bg-info { background: var(--lf-navy-400) !important; }
.text-info { color: var(--lf-navy-400) !important; }
.bg-info { background-color: var(--lf-navy-400) !important; }


/* ── CARDS & DASHBOARD WIDGETS ───────────────────────────────────── */
.card, .e-card, .dashboard-card, .eCard, .mainSection {
  border: 1px solid var(--lf-line) !important;
  border-radius: var(--lf-r) !important;
  box-shadow: var(--lf-shadow) !important;
}
.card { background: var(--lf-card); }
.card:hover { box-shadow: var(--lf-shadow-lg) !important; }

/* generic "stat" tiles often use .card with an icon — add a top sheen */
.card { position: relative; overflow: hidden; }
.card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--lf-navy), var(--lf-green), var(--lf-gold));
  opacity: .0; transition: opacity .3s;
}
.card:hover::after { opacity: .9; }


/* ── TABLES ──────────────────────────────────────────────────────── */
.table { --bs-table-hover-bg: #eef3fb; border-color: var(--lf-line); }
.table > thead { background: #eef2f8; }
.table > thead th {
  color: var(--lf-navy-800); font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; font-size: 11.5px; border-bottom: 1px solid var(--lf-line);
}
.table > tbody td { vertical-align: middle; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.pagination .page-item.active .page-link {
  background: var(--lf-navy) !important; border-color: var(--lf-navy) !important; color: #fff !important;
}
.pagination .page-link { color: var(--lf-navy); border-radius: 8px; margin: 0 2px; border-color: var(--lf-line); }


/* ── FORMS ───────────────────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: 10px; border-color: var(--lf-line); color: var(--lf-ink);
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--lf-green-400);
  box-shadow: 0 0 0 .2rem rgba(52,199,123,.18);
}
.input-group-text { background: #eef2f8; border-color: var(--lf-line); color: var(--lf-navy); border-radius: 10px; }
.form-check-input:checked { background-color: var(--lf-green); border-color: var(--lf-green); }
.form-label { font-weight: 600; color: var(--lf-navy-800); }

/* soft badge tints (keep semantics, refresh hues) */
.badge.bg-success { background: var(--lf-green) !important; }
.badge.bg-warning { background: var(--lf-gold) !important; color:#3a2a05 !important; }


/* ── BREADCRUMB / SECTION TITLE ──────────────────────────────────── */
.mainSection-title h1, .mainSection-title h2, .breadcrumb-title { color: var(--lf-navy-800); }
.breadcrumb-item.active { color: var(--lf-green); }


/* =====================================================================
   LOGIN PAGE  (layouts/signin_page + auth/login)
   ===================================================================== */
body { background: var(--lf-bg); }

.login-image {
  background:
    linear-gradient(150deg, rgba(11,28,52,.86) 0%, rgba(21,49,92,.72) 45%, rgba(44,138,91,.55) 100%),
    url('public/assets/images/login.png');
  background-size: cover !important;
  background-position: center !important;
  position: relative;
}
/* baobab-gold glow + tagline on the image panel */
.login-image::before {
  content: ""; position: absolute; left: 50%; top: 30%;
  width: 520px; height: 520px; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(245,194,75,.30), transparent 62%);
  pointer-events: none;
}
.login-image::after {
  content: "Renforcer l'éducation au Niger — écoles, familles et ministère réunis.";
  position: absolute; left: 56px; right: 56px; bottom: 64px;
  color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700;
  font-size: 26px; line-height: 1.35; letter-spacing: -.3px;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

.primary-form { max-width: 420px; }
.primary-form .form-logo img { filter: drop-shadow(0 8px 18px rgba(27,58,107,.18)); }
.login-form .form-group { margin-bottom: 18px; }
.login-form .form-label { font-weight: 600; color: var(--lf-navy-800); }
.login-form .input-group { box-shadow: var(--lf-shadow); border-radius: 12px; overflow: hidden; }
.login-form .input-group-text { background: #fff; border: 1px solid var(--lf-line); border-right: 0; color: var(--lf-green); }
.login-form .form-control { border: 1px solid var(--lf-line); border-left: 0; padding: 12px 14px; }
.login-form .form-control:focus { box-shadow: none; border-color: var(--lf-line); }
.login-form .btn-primary {
  height: 50px; border-radius: 12px; font-size: 15px; font-weight: 700; letter-spacing: .3px;
  margin-top: 8px;
}
.login-form a { color: var(--lf-navy); font-weight: 600; }
.login-form a:hover { color: var(--lf-green); }

@media (max-width: 991px) {
  .login-image::after { font-size: 20px; left: 28px; right: 28px; bottom: 40px; }
}

/* =====================================================================
   LUMAFRICA #10 / #11 — Mobile responsiveness (attendance + announcements)
   ===================================================================== */
@media (max-width: 767.98px) {
  /* #10 Attendance: wide day-grid scrolls horizontally instead of squashing/overflowing */
  .att-table { overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; width: 100%; }
  .att-table table { min-width: 560px; }
  .att-filter-form, .att-filter, .attendance-filter { flex-wrap: wrap !important; gap: 8px; }
  .att-filter-option { flex: 1 1 46%; min-width: 130px; }
  .att-filter-btn { flex: 1 1 100%; }

  /* #11 Announcements + calendar: prevent overlap; let the month grid scroll on small screens */
  .calendar-body { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 2px; }
  #calendar, .notice-calendar-section { min-width: 0; max-width: 100%; }
  .fc .fc-toolbar.fc-header-toolbar { flex-direction: column; gap: 10px; align-items: stretch; }
  .fc .fc-toolbar-title { font-size: 1.05rem; text-align: center; }
  .fc-view-harness { min-height: 430px; }
  .notice-calendar-section .fc-scrollgrid, .fc .fc-scrollgrid { min-width: 520px; }
  #top { flex-wrap: wrap; }
}


/* ── Toastr on-brand ─────────────────────────────────────────────── */
.toast-success { background-color: var(--lf-green) !important; }
.toast-info { background-color: var(--lf-navy) !important; }


/* ── Misc literal #00a3ff cleanups via common classes ────────────── */
.text-blue, .eColor_Blue { color: var(--lf-navy) !important; }
.bg-soft-blue { background: #E7EEF8 !important; color: var(--lf-navy) !important; }


/* =====================================================================
   DASHBOARD  (all roles)
   ===================================================================== */

/* Section title → soft welcome bar */
.mainSection-title {
  background: linear-gradient(120deg, #ffffff 0%, #f1f6fd 100%);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-r);
  padding: 20px 24px;
  box-shadow: var(--lf-shadow);
  position: relative; overflow: hidden;
}
.mainSection-title::before {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, var(--lf-gold-400), var(--lf-gold));
}

/* Stat tiles */
.dashboard_ShortListItem {
  border: 1px solid var(--lf-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--lf-shadow) !important;
  position: relative; overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.dashboard_ShortListItem::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--lf-navy), var(--lf-green), var(--lf-gold));
}
.dashboard_ShortListItem:hover { transform: translateY(-5px); box-shadow: var(--lf-shadow-lg) !important; }
.dsBody .total_no { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--lf-navy-800); }

/* icon chips → brand tints */
.dsHeader .ds_link { border-radius: 10px !important; }
.dsHeader .ds_link.ds_sutdent { background: #E7EEF8 !important; }
.dsHeader .ds_link.ds_teacher { background: #E3F5EA !important; }
.dsHeader .ds_link.ds_parent  { background: #FCF3DD !important; }
.dsHeader .ds_link.ds_staff   { background: #FDE7EC !important; }
.dsHeader .ds_link.ds_sutdent svg path { fill: var(--lf-navy) !important; }
.dsHeader .ds_link.ds_teacher svg path { fill: var(--lf-green) !important; }
.dsHeader .ds_link.ds_parent  svg path { fill: var(--lf-gold) !important; }

/* Big report cards → rich gradients (was flat blue / green / pink) */
.dashboard_report { border-radius: 18px !important; box-shadow: var(--lf-shadow-lg) !important; position: relative; overflow: hidden; }
.dashboard_report::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
  pointer-events: none;
}
.dashboard_attendance {
  background: linear-gradient(135deg, var(--lf-navy) 0%, var(--lf-navy-700) 55%, var(--lf-green-600) 135%) !important;
}
.dashboard_income_report {
  background: linear-gradient(135deg, var(--lf-green) 0%, var(--lf-green-600) 100%) !important;
}
.dashboard_upcoming_events {
  background: linear-gradient(135deg, #E0892A 0%, #C9651C 100%) !important;
}
.ds_attend_percent { background: rgba(255,255,255,.20) !important; }
.upcoming_events_items > li::before { background: var(--lf-gold-400) !important; }
.all_report_btn { border-color: rgba(255,255,255,.45) !important; border-radius: 10px !important; }
.all_report_btn:hover { background: rgba(255,255,255,.18) !important; }
.all_report_btn_2 { border-radius: 8px !important; }


/* =====================================================================
   LEARNING-THEMED ANIMATED BACKGROUND (authenticated pages, site-wide)
   ===================================================================== */
html { background: radial-gradient(120% 80% at 50% -10%, #ffffff 0%, #F3F6FB 45%, #ECF1F8 100%) fixed; }
body, .home-section, .home-content { background: transparent !important; }

body::before, body::after {
  content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420' fill='none' stroke='%231B3A6B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg%3E%3Cpath d='M40 78 L78 62 L116 78 L78 94 Z'/%3E%3Cpath d='M116 78 v18'/%3E%3Cpath d='M58 86 v14 a20 7 0 0 0 40 0 v-14'/%3E%3C/g%3E%3Cg stroke='%232C8A5B'%3E%3Cpath d='M250 60 q22 -9 44 0 v44 q-22 -9 -44 0 z'/%3E%3Cpath d='M294 60 q22 -9 44 0 v44 q-22 -9 -44 0 z'/%3E%3Cpath d='M294 60 v44'/%3E%3C/g%3E%3Cg stroke='%23E0A826'%3E%3Cpath d='M300 300 l44 -44 l14 14 l-44 44 l-18 4 z'/%3E%3Cpath d='M330 270 l14 14'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='96' cy='300' r='20'/%3E%3Cpath d='M86 322 h20 M89 330 h14'/%3E%3C/g%3E%3Cg stroke='%232C8A5B'%3E%3Ccircle cx='210' cy='220' r='5'/%3E%3Cellipse cx='210' cy='220' rx='30' ry='11'/%3E%3Cellipse cx='210' cy='220' rx='30' ry='11' transform='rotate(60 210 220)'/%3E%3Cellipse cx='210' cy='220' rx='30' ry='11' transform='rotate(120 210 220)'/%3E%3C/g%3E%3Ctext x='168' y='372' font-size='44' fill='%23E0A826' stroke='none' font-family='serif'%3E%CF%80%3C/text%3E%3Ctext x='300' y='180' font-size='30' fill='%231B3A6B' stroke='none' font-weight='700' font-family='sans-serif'%3EAa%3C/text%3E%3C/svg%3E");
  background-size: 420px 420px;
  opacity: .05;
  animation: lf-edu-drift 90s linear infinite;
}
body::after { background-size: 300px 300px; opacity: .04; animation: lf-edu-drift2 140s linear infinite; }
@keyframes lf-edu-drift  { from { background-position: 0 0; } to { background-position: 420px -420px; } }
@keyframes lf-edu-drift2 { from { background-position: 0 0; } to { background-position: -300px 300px; } }

/* keep the dark sidebar opaque above the animation */
.sidebar { z-index: 100; }
.home-header { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } }

/* =====================================================================
   LUMAFRICA — UX smoothness + polish (menu transitions, loading, mobile)
   ===================================================================== */

/* Slim top progress bar shown during page navigation */
.lf-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:99999;
  background:linear-gradient(90deg,#1B3A6B 0%,#2C8A5B 50%,#E0A826 100%);
  box-shadow:0 0 10px rgba(43,138,91,.5); opacity:0; pointer-events:none;
  transition:width .2s ease, opacity .3s ease; }
.lf-progress.run{ width:88%; opacity:1; transition:width 9s cubic-bezier(.05,.7,.25,1), opacity .2s ease; }
.lf-progress.done{ width:100%; opacity:0; transition:width .2s ease, opacity .45s ease .12s; }

/* Content fades in on each page load (softens the full-reload feel) */
@keyframes lf-fade-in{ from{ opacity:0; transform:translateY(7px) } to{ opacity:1; transform:none } }
.main_content{ animation:lf-fade-in .34s ease both; }

/* Smoother sidebar hover */
.sidebar .nav-links > li .iocn-link, .sidebar .nav-links > li a{ transition:background .2s ease, color .2s ease; }
.sidebar .nav-links > li .iocn-link:hover{ background:rgba(255,255,255,.045); }

/* Desktop: animate submenu open/close (base theme used display:none -> instant) */
@media (min-width: 992px){
  .sidebar:not(.close) .nav-links > li .sub-menu{
    display:block !important; max-height:0; overflow:hidden; opacity:0;
    padding-top:0 !important; padding-bottom:0 !important;
    transition:max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, padding .35s ease; }
  .sidebar:not(.close) .nav-links > li.showMenu .sub-menu{
    max-height:640px; opacity:1; padding-top:20px !important; padding-bottom:14px !important; }
}
/* Mobile: the drawer is OPEN when it has .close — animate submenus there too */
@media (max-width: 991.98px){
  .sidebar.close .nav-links > li .sub-menu{
    display:block !important; max-height:0; overflow:hidden; opacity:0;
    padding-top:0 !important; padding-bottom:0 !important;
    transition:max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, padding .35s ease; }
  .sidebar.close .nav-links > li.showMenu .sub-menu{
    max-height:640px; opacity:1; padding-top:6px !important; padding-bottom:14px !important; }
}

/* Mobile off-canvas sidebar: dim backdrop behind the open drawer */
.lf-sidebar-backdrop{ position:fixed; inset:0; background:rgba(11,28,52,.45);
  z-index:99; opacity:0; visibility:hidden; transition:opacity .3s ease; }
.lf-sidebar-backdrop.show{ opacity:1; visibility:visible; }
@media (min-width: 992px){ .lf-sidebar-backdrop{ display:none !important; } }

/* Buttons + inputs: subtle motion + on-brand focus ring */
.btn{ transition:transform .12s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease; }
.btn:active{ transform:translateY(1px); }
.form-control:focus, .form-select:focus, .eForm-control:focus{ border-color:#2C8A5B; box-shadow:0 0 0 .18rem rgba(43,138,91,.15); }

/* select2 sized to match the form controls */
.select2-container--default .select2-selection--single{ height:auto; min-height:42px; padding:6px 8px; border:1px solid #E7ECF3; border-radius:8px; }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:40px; }
.select2-container{ width:100% !important; }

/* General mobile polish */
@media (max-width: 767.98px){
  .mainSection-title{ padding:16px 16px; }
  .home-header .row{ row-gap:8px; }
  .table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .btn, .eBtn{ min-height:40px; }
  /* 16px inputs stop iOS from auto-zooming on focus */
  .form-control, .form-select, .eForm-control, input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea{ font-size:16px; }
}

/* =====================================================================
   LUMAFRICA — long-text wrapping (notes/messages/cells never overflow)
   ===================================================================== */
/* Break long unbroken strings so they wrap inside their card/cell/column */
td, th, strong,
.total_no, .total_info,
.lf-noti .ttl, .lf-noti .msg,
.lf-med-item .val, .lf-med-card .val,
.events_info, .events_info .title, .events_info a,
.val, .msg, .note, .lf-note-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Flex/grid children need min-width:0 or long words push past the parent */
.dsBody, .ds_item_details, .lf-noti > div, .events_info,
.dAdmin_info_name, .dAdmin_profile_name, .ds_report_left { min-width: 0; }
.dashboard_ShortListItem, .lf-noti, .lf-med-item, .ds_item_details { overflow: hidden; }
/* A "stat" slot that actually holds a note/announcement/certificate title:
   keep it readable and clamp to 2 lines (the full text lives in the list below) */
.lf-stat-text{
  font-size: 16px !important; font-weight: 800; line-height: 1.35;
  overflow-wrap: anywhere; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* =====================================================================
   LUMAFRICA — top header alignment (language selector + profile)
   ===================================================================== */
/* The language selector had an inline margin-top:14px that pushed it below the
   profile on every screen. Neutralise it so the row's align-items:center centres it. */
.home-header .adminTable-action{ margin-top: 0 !important; }
.home-header .col-auto.d-flex{ align-items: center; }

/* Mobile: keep hamburger | language | profile on one centred row (was wrapping) */
@media (max-width: 991.98px){
  .home-header .row{ flex-wrap: nowrap !important; align-items: center !important; }
  .home-header .col-auto.d-flex{ margin-left: auto !important; align-items: center !important; }
  .home-header .adminTable-action{ margin-right: 8px !important; }
  .home-header .header-menu ul{ margin-bottom: 0; }
  .home-header .user-name{ max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .home-header .user-title{ font-size: 11px; }
}

/* =====================================================================
   LUMAFRICA — fully responsive data tables (stack into cards on mobile)
   JS adds .lf-stack + per-cell data-label to normal list tables (<=8 cols).
   Wide matrix tables (attendance grid) & the calendar keep horizontal scroll.
   ===================================================================== */
@media (max-width: 767.98px){
  /* stacked tables no longer need the horizontal-scroll wrapper */
  .lf-stacked-wrap{ overflow-x: visible !important; }

  table.lf-stack{ border:0 !important; background:transparent !important; min-width:0 !important; }
  table.lf-stack, table.lf-stack tbody, table.lf-stack tr, table.lf-stack td{ display:block; width:auto; }
  table.lf-stack thead{ display:none; }             /* headers move into each cell's label */

  table.lf-stack tr{
    margin:0 0 12px; padding:10px 14px;
    border:1px solid var(--lf-line); border-radius:12px;
    background:#fff; box-shadow:var(--lf-shadow);
  }
  table.lf-stack td{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:8px 0; border:0; border-bottom:1px solid #f1f4f9;
    min-height:38px; text-align:right; overflow-wrap:anywhere;
  }
  table.lf-stack tr td:last-child{ border-bottom:0; }
  table.lf-stack td[data-label]::before{
    content:attr(data-label); font-weight:700; color:var(--lf-muted);
    font-size:11px; text-transform:uppercase; letter-spacing:.4px;
    flex:0 0 38%; max-width:38%; text-align:left; overflow-wrap:anywhere;
  }
  /* cells with no header label (actions, empty-state) span the full width */
  table.lf-stack td:not([data-label]){ justify-content:center; text-align:center; }
  /* keep row-number cells subtle */
  table.lf-stack td[data-label="#"]{ color:var(--lf-muted); }
}

/* Stacked-table value wrapping: neutralise the base theme's fixed min-width utilities
   and let value content shrink/wrap inside the card cell */
@media (max-width: 767.98px){
  table.lf-stack td > *{ min-width:0 !important; max-width:100%; overflow-wrap:anywhere; }
  table.lf-stack td [class*="min-w-"]{ min-width:0 !important; }
  table.lf-stack td p{ margin-bottom:0; }
  table.lf-stack td .dAdmin_profile{ justify-content:flex-end; gap:8px; }
  table.lf-stack td[data-label]::before{ flex-basis:32%; max-width:32%; }
}