/* ============================================================
   HEADER CUSTOM SKIN + RESPONSIVE
   ------------------------------------------------------------
   Moved out of public/themes/edugator/header.blade.php so the
   header styling is managed from a CSS file instead of inline
   <style> blocks.

   MUST be loaded LAST (after custom.css and arabic.css) — these
   rules deliberately match/beat the theme's own selector strength
   in both LTR and RTL. See the <link> in header.blade.php.

   Sections:
     1. Dashboard tab bar skin      (was <style id="cw-tabbar-skin">)
     2. Inbithaq header skin        (was <style id="inbithaq-header-skin">)
     3. Responsive / overflow fixes (new)
   ============================================================ */


/* ============================================================
   1. Dashboard tab bar -> Lovable style. Covers BOTH candidate
   menus (menuNav desktop+mobile, and dashboard-menu) in LTR+RTL.
   Matches the theme's own selector strength so it always wins.
   ============================================================ */

/* ---- .menuNav : DASHBOARD / MY SCHEDULE ... top tab bar ---- */
.custom_header ul.navbar-nav.menuNav li a,
.custom_header ul.navbar-nav.menuNav.menuMobi li a,
.custom_header ul.navbar-nav.menuNav.menuDecktop li a{
    color:#1f2d54 !important;
    text-transform:uppercase !important;
    font-weight:700 !important;
    background:transparent !important;
}
.custom_header ul.navbar-nav.menuNav li.nav-item.active a,
.custom_header ul.navbar-nav.menuNav.menuMobi li.nav-item.active a,
.custom_header ul.navbar-nav.menuNav.menuDecktop li.nav-item.active a{
    color:#e23744 !important;
    border-bottom:3px solid #e23744 !important;
}
.custom_header ul.navbar-nav.menuNav li a:hover{
    color:#e23744 !important;
}

/* ---- .dashboard-menu : "My file / Attachments / Weekly ..." ---- */
.custom_header ul.dashboard-menu li a,
.dashboard-menu-col ul.dashboard-menu li a{
    text-transform:uppercase !important;
    font-weight:700 !important;
}
.custom_header ul.dashboard-menu li.active a,
.dashboard-menu-col ul.dashboard-menu li.active a{
    color:#e23744 !important;
    background:transparent !important;
    border-bottom:3px solid #e23744 !important;
}
.custom_header ul.dashboard-menu li a:hover,
.dashboard-menu-col ul.dashboard-menu li a:hover{
    color:#e23744 !important;
    background:transparent !important;
}


/* ============================================================
   2. INBITHAQ HEADER SKIN — pixel-match to the reference:
   inbithaq.com/.../abha_diploma_theme/html/inbithaq/courses/1/publish.html
   Design tokens: primary #1B2B4B (navy), accent #A63A4A (maroon),
   bg #FDFBF5 (cream), muted #F2EBDC, font Tajawal.
   Scoped to .custom_header, loaded LAST so it wins over
   custom.css / arabic.css.
   ============================================================ */

/* NOTE: this skin ONLY recolors / reshapes elements. It deliberately does
   NOT change the header's layout mechanism (the theme uses a two-row
   float/inline-block layout: top row = logo+menu+icons, second row =
   .menuNav tab bar). Forcing flex here collapses the two rows into one. */
:root{
  --ib-primary:#1B2B4B; --ib-accent:#A63A4A;
  --ib-bg:#FDFBF5; --ib-muted:#F2EBDC;

  /* ---- Header sizing scale ----------------------------------------
     EVERY control in the right-side cluster (icon buttons, language +
     currency chips, avatar) is sized from these three variables, and
     the logo from the fourth. To rescale the whole header at a
     breakpoint, override ONLY these in a @media block (see section 3)
     — never re-declare per-element widths again. */
  --ib-icon:40px;      /* round icon button diameter            */
  --ib-icon-fs:15px;   /* glyph size inside the icon button     */
  --ib-chip-h:40px;    /* language / currency pill height       */
  --ib-logo:52px;      /* logo max-height                       */
  --ib-gap:8px;        /* gap between cluster items             */
}

/* ---- sticky cream bar ---- */
.main-navbar-wrap.custom_header{
  position:sticky; top:0; z-index:40;
  background:rgba(253,251,245,.97) !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(27,43,75,.10);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
/* Tajawal on TEXT only — via inheritance from the container.
   Do NOT use a universal (*) selector: it overrides FontAwesome /
   LineAwesome / Material Icons and breaks every icon glyph. */
.custom_header{ font-family:'Tajawal','Noto Kufi Arabic',sans-serif; }
.custom_header .navbar{ background:transparent !important; box-shadow:none !important; }

/* ---- logo ---- */
.custom_header a.navbar-brand.site-main-logo img,
.custom_header .containerMain a.navbar-brand.site-main-logo img{
  height:auto !important; max-height:var(--ib-logo) !important; width:auto !important; object-fit:contain;
}

/* ---- main menu -> pills (keep the theme's original inline flow) ---- */
.custom_header ul.menuHomeMain{ margin:0; padding:0; list-style:none; }
.custom_header ul.menuHomeMain li{ display:inline-block !important; margin:0 2px; vertical-align:middle; }
.custom_header ul.menuHomeMain li a{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  border-radius:9999px; border:1px solid transparent;
  padding:7px 14px !important;
  font-size:12.5px !important; font-weight:500 !important; line-height:1.4 !important;
  color:rgba(27,43,75,.75) !important; background:transparent !important;
  text-transform:none !important; transition:.15s;
}
.custom_header ul.menuHomeMain li a:hover{
  background:rgba(166,58,74,.06) !important; color:var(--ib-primary) !important;
}
.custom_header ul.menuHomeMain li a.active{
  background:var(--ib-accent) !important; color:#fff !important; border-color:var(--ib-accent) !important;
}
/* leading home-icon pill (bordered, icon only) */
.custom_header ul.menuHomeMain li.ibHomePill a{
  padding:7px 14px !important; border:1px solid rgba(27,43,75,.15) !important;
  color:var(--ib-primary) !important; background:transparent !important;
}
.custom_header ul.menuHomeMain li.ibHomePill a:hover{ background:rgba(166,58,74,.06) !important; }
.custom_header ul.menuHomeMain li.ibHomePill svg{ width:16px; height:16px; }

/* ---- second-row dashboard tab bar (.menuNav): reference look ---- */
.custom_header ul.navbar-nav.menuNav li a{ text-transform:none !important; font-weight:600 !important; }
.custom_header ul.navbar-nav.menuNav li.nav-item.active a{
  color:var(--ib-accent) !important; border-bottom-color:var(--ib-accent) !important;
}
.custom_header ul.navbar-nav.menuNav li a:hover{ color:var(--ib-accent) !important; }

/* ---- right-side controls: one centered row, all items same height ---- */
.custom_header .main-nav-auth-profile-wrap{
  display:inline-flex !important; align-items:center !important; gap:var(--ib-gap) !important;
  margin:0 !important; padding:0 !important; list-style:none; flex-wrap:nowrap;
}
.custom_header .main-nav-auth-profile-wrap > li{
  display:inline-flex !important; align-items:center; margin:0 !important;
  float:none !important; vertical-align:middle; height:var(--ib-icon);
}
.custom_header .main-nav-auth-profile-wrap > li .dropdown{
  display:inline-flex; align-items:center; height:100%;
}

/* language + currency dropdowns -> rounded chips (same 40px height as icon buttons) */
.custom_header li.main-nav-right-menu.btn_lang .dropdown > a.dropdown-button{
  display:inline-flex; align-items:center; gap:4px; height:var(--ib-chip-h);
  border:1px solid rgba(27,43,75,.15); border-radius:9999px;
  padding:0 12px; font-size:11px; font-weight:600; line-height:1; white-space:nowrap;
  color:rgba(27,43,75,.75) !important; background:rgba(27,43,75,.04);
}
/* currency chip keeps its small flag (if any) */
.custom_header li.main-nav-right-menu.btn_lang.udsing .dropdown > a.dropdown-button img{
  height:14px !important; width:auto !important; margin:0 0 0 4px !important; border-radius:2px;
}
/* language button: globe + the CURRENTLY SELECTED language name (English / Arabic) */
.custom_header li.main-nav-right-menu.btn_lang:not(.udsing) .dropdown > a.dropdown-button img{ display:none !important; }
/* kill the leftover inline caret markup (the real caret is ::after, styled below) */
.custom_header li.main-nav-right-menu.btn_lang:not(.udsing) .dropdown > a.dropdown-button .material-icons,
.custom_header li.main-nav-right-menu.btn_lang:not(.udsing) .dropdown > a.dropdown-button .caret{ display:none !important; content:none !important; }
.custom_header li.main-nav-right-menu.btn_lang:not(.udsing) .dropdown > a.dropdown-button{
  display:inline-flex !important; align-items:center; justify-content:center; gap:5px;
  height:var(--ib-chip-h); padding:0 14px !important; white-space:nowrap;
  border-radius:9999px; border:1px solid rgba(27,43,75,.15);
  background:rgba(27,43,75,.04);
}
.custom_header li.main-nav-right-menu.btn_lang:not(.udsing) .dropdown > a.dropdown-button:hover{
  background:rgba(166,58,74,.06); border-color:rgba(166,58,74,.25);
}
.custom_header li.main-nav-right-menu.btn_lang:not(.udsing) .dropdown > a.dropdown-button .languagecls{
  display:inline-block !important; visibility:visible !important;
  font-size:11px; font-weight:600; color:rgba(27,43,75,.8) !important;
}
.custom_header li.main-nav-right-menu.btn_lang:not(.udsing) .dropdown > a.dropdown-button::before{
  content:"\f0ac"; font-family:'FontAwesome'; font-weight:400; font-size:14px;
  margin:0; color:rgba(27,43,75,.8);
}
/* ---- NEUTRALISE THE THEME'S LEGACY CHIP METRICS -------------------
   assets/css/custom.css declares:

       .btn_lang a{ line-height:57px; margin-top:3px; }

   57px line-height comes from the theme's ORIGINAL tall header bar. It
   forces the anchor's content box taller than our pill, and margin-top
   pushes it off-centre — so the chip never lines up with the round icon
   buttons no matter what height we set. Reset both here, on every
   anchor inside .btn_lang (not just .dropdown-button, because the
   theme's selector is the broad `.btn_lang a`). */
.custom_header li.main-nav-right-menu.btn_lang a,
.custom_header li.main-nav-right-menu.btn_lang .dropdown > a,
.custom_header li.main-nav-right-menu.btn_lang .dropdown > a.dropdown-button{
  line-height:1 !important;
  margin:0 !important;
  margin-top:0 !important;
  vertical-align:middle !important;
}

/* ---- DROPDOWN CARET on BOTH chips (language + currency) ------------
   The caret is NOT in the markup — it is a pseudo-element from
   assets/css/custom.css:509:

       .btn_lang a.dropdown-button:after{
         position:absolute; right:3px; top:14px;
         font:normal normal normal 20px/1 FontAwesome;
         content:"\f107"; color:#000;
       }

   Absolute + 20px + top:14px is why it sat oversized, black and hanging
   off the pill (it was positioned against the old, taller layout).
   Re-declare it as a normal in-flow flex child so it simply follows the
   label and centres itself — and so it scales with the chip instead of
   staying pinned at a fixed offset. */
.custom_header li.main-nav-right-menu.btn_lang .dropdown > a.dropdown-button::after{
  position:static !important;
  right:auto !important; top:auto !important; left:auto !important; bottom:auto !important;
  width:auto !important; height:auto !important;
  content:"\f107" !important;
  font:normal normal normal 11px/1 FontAwesome !important;
  color:rgba(27,43,75,.55) !important;
  margin:0 0 0 1px !important; padding:0 !important;
  align-self:center !important; flex:0 0 auto !important;
  transform:translateY(1px);
}
.custom_header li.main-nav-right-menu.btn_lang .dropdown > a.dropdown-button:hover::after{
  color:var(--ib-accent) !important;
}

/* currency chip: same inner spacing as the language chip */
.custom_header li.main-nav-right-menu.btn_lang.udsing .dropdown > a.dropdown-button{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  gap:5px !important; line-height:1 !important;
}
.custom_header li.main-nav-right-menu.btn_lang.udsing .dropdown > a.dropdown-button .languagecls{
  font-size:11px !important; font-weight:600 !important;
  color:rgba(27,43,75,.8) !important; line-height:1 !important;
}

/* Both chips: keep every child on one centred line, never taller than
   the pill itself (stops the text/flag/caret pushing the chip out of
   alignment with the round icon buttons beside it). */
.custom_header li.main-nav-right-menu.btn_lang .dropdown > a.dropdown-button > *{
  align-self:center !important; line-height:1 !important;
}
.custom_header li.main-nav-right-menu.btn_lang .dropdown{ height:var(--ib-chip-h) !important; }

/* hide the green date/time clock strip to match the clean reference */
.custom_header li.main-nav-right-menu.btn_timing{ display:none !important; }
/* ---- round icon buttons -------------------------------------------
   Covers EVERY icon <li> in the cluster. The header markup uses five
   different class combos for what are visually the same button:
     .msg_icon              cart / file-manager / wallet / wishlist / chat
     .msg_icon.iconiInformi info
     .mid_noit              apps grid / bell / notifications
   Both the plain `> a` and the `> a.dropdown-button` variants are
   matched, because some items are dropdown triggers and some are not.
   !important on background/border/color: the theme's own custom.css
   styles these anchors dark, and without it only *some* icons picked
   up the skin — which is why the row looked inconsistent. */
.custom_header li.main-nav-right-menu.msg_icon > a,
.custom_header li.main-nav-right-menu.msg_icon > .dropdown > a,
.custom_header li.main-nav-right-menu.iconiInformi > a,
.custom_header li.main-nav-right-menu.iconiInformi > .dropdown > a,
.custom_header li.main-nav-right-menu.mid_noit > a,
.custom_header li.main-nav-right-menu.mid_noit > .dropdown > a{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  height:var(--ib-icon) !important; width:var(--ib-icon) !important;
  min-width:var(--ib-icon) !important; flex:0 0 auto !important;
  padding:0 !important; margin:0 !important;
  border-radius:9999px !important;
  border:1px solid rgba(27,43,75,.12) !important;
  color:var(--ib-primary) !important;
  background:transparent !important;
  box-shadow:none !important;
  transition:.15s; position:relative; overflow:visible;
}
/* glyphs inside the buttons — FontAwesome AND Material Icons */
.custom_header li.main-nav-right-menu.msg_icon > a > i,
.custom_header li.main-nav-right-menu.msg_icon > .dropdown > a > i,
.custom_header li.main-nav-right-menu.iconiInformi > a > i,
.custom_header li.main-nav-right-menu.iconiInformi > .dropdown > a > i,
.custom_header li.main-nav-right-menu.mid_noit > a > i,
.custom_header li.main-nav-right-menu.mid_noit > .dropdown > a > i{
  font-size:var(--ib-icon-fs) !important; line-height:1 !important;
  color:inherit !important; margin:0 !important; padding:0 !important;
  width:auto !important; height:auto !important; vertical-align:middle;
}
.custom_header li.main-nav-right-menu.msg_icon > a:hover,
.custom_header li.main-nav-right-menu.msg_icon > .dropdown > a:hover,
.custom_header li.main-nav-right-menu.iconiInformi > a:hover,
.custom_header li.main-nav-right-menu.iconiInformi > .dropdown > a:hover,
.custom_header li.main-nav-right-menu.mid_noit > a:hover,
.custom_header li.main-nav-right-menu.mid_noit > .dropdown > a:hover{
  background:rgba(166,58,74,.06) !important; color:var(--ib-accent) !important;
}

/* The intermediate .dropdown wrapper must not add its own box, or the
   round button ends up offset inside a taller/wider parent. */
.custom_header li.main-nav-right-menu.msg_icon > .dropdown,
.custom_header li.main-nav-right-menu.iconiInformi > .dropdown,
.custom_header li.main-nav-right-menu.mid_noit > .dropdown{
  display:inline-flex !important; align-items:center !important;
  height:var(--ib-icon) !important; margin:0 !important; padding:0 !important;
  background:none !important; border:0 !important;
}

/* ---- info button (#infoIconi) -------------------------------------
   Targeted by ID because the theme sizes this glyph independently and an
   ID beats the class selectors above. Without this the `fa-info` "i"
   renders at full inherited size and reads as a solid dark bar. */
.custom_header li.main-nav-right-menu a#infoIconi{
  height:var(--ib-icon) !important; width:var(--ib-icon) !important;
  min-width:var(--ib-icon) !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  padding:0 !important; font-size:0 !important;   /* kill any inherited text size */
  border-radius:9999px !important;
  border:1px solid rgba(27,43,75,.12) !important;
  background:transparent !important; color:var(--ib-primary) !important;
}
.custom_header li.main-nav-right-menu a#infoIconi > i,
.custom_header li.main-nav-right-menu a#infoIconi > i.fa{
  font-size:var(--ib-icon-fs) !important; line-height:1 !important;
  width:auto !important; height:auto !important;
  margin:0 !important; padding:0 !important;
  color:inherit !important; background:none !important;
}

/* ---- avatar / profile chip (.vsn_vx) — same height as the buttons ---- */
.custom_header li.main-nav-right-menu.vsn_vx{ height:var(--ib-icon); }
.custom_header li.main-nav-right-menu.vsn_vx img,
.custom_header li.main-nav-right-menu.vsn_vx #header_pic{
  height:var(--ib-icon) !important; width:var(--ib-icon) !important;
  min-width:var(--ib-icon) !important;
  border-radius:9999px !important; object-fit:cover !important;
}

/* ---- count badges stay pinned to the button corner at every size ---- */
.custom_header li.main-nav-right-menu .badge{
  position:absolute !important; top:-4px; inset-inline-end:-4px;
  min-width:16px; height:16px; padding:0 4px;
  font-size:9px !important; line-height:16px !important;
  border-radius:9999px; text-align:center;
}
/* empty badges must not render as a floating dot */
.custom_header li.main-nav-right-menu .badge:not(.red){
  display:none !important;
}
.custom_header li.main-nav-right-menu .badge.red,
.custom_header li.main-nav-right-menu .badge.red.round{
  background:var(--ib-accent) !important; color:#fff !important;
}


/* ============================================================
   3. RESPONSIVE / OVERFLOW FIXES
   ------------------------------------------------------------
   The header previously had NO @media rules of its own, so on
   narrow-desktop widths the top row (logo + menu + control chips)
   and the second-row tab bar pushed past the viewport and produced
   a horizontal scrollbar.

   IMPORTANT — do not fight the theme's own breakpoint:
   assets/css/custom.css @media (max-width:991px) hides
   ul.navbar-nav.menuNav.menuDecktop and shows the mobile drawer
   (#mainNavbarContent1 / .forMobile). Every rule below that touches
   menuDecktop is therefore wrapped in (min-width:992px) so the
   mobile drawer keeps working exactly as before.
   ============================================================ */

/* Never let the header push the page sideways.
   overflow-x:clip (NOT hidden) so the language / currency / profile
   dropdowns can still overflow VERTICALLY. `hidden` would force the
   other axis to auto and clip every dropdown. */
.main-navbar-wrap.custom_header{
  max-width:100%;
  overflow-x:clip;
}

/* Desktop tab bar: scroll internally instead of overflowing the page. */
@media (min-width:992px){
  .custom_header ul.navbar-nav.menuNav.menuDecktop{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;      /* Firefox */
    -ms-overflow-style:none;   /* old Edge */
  }
  .custom_header ul.navbar-nav.menuNav.menuDecktop::-webkit-scrollbar{ display:none; }
  .custom_header ul.navbar-nav.menuNav.menuDecktop li a{ white-space:nowrap; }
}

/* ---- THE SCALE ------------------------------------------------------
   Each breakpoint only overrides the :root variables. Because every
   control (icon buttons, chips, avatar, logo, gaps) is sized from those
   variables, the ENTIRE header rescales consistently — no per-element
   rules, nothing left behind at a size that no longer matches.
   Add a breakpoint by copying one block and changing the numbers. */

@media (max-width:1399px){
  :root{ --ib-icon:38px; --ib-icon-fs:14px; --ib-chip-h:38px; --ib-logo:48px; --ib-gap:6px; }
}
@media (max-width:1199px){
  :root{ --ib-icon:36px; --ib-icon-fs:13.5px; --ib-chip-h:36px; --ib-logo:44px; --ib-gap:5px; }
}
@media (max-width:991px){
  :root{ --ib-icon:36px; --ib-icon-fs:13.5px; --ib-chip-h:36px; --ib-logo:42px; --ib-gap:6px; }
}
@media (max-width:767px){
  :root{ --ib-icon:34px; --ib-icon-fs:13px; --ib-chip-h:34px; --ib-logo:38px; --ib-gap:5px; }
}
@media (max-width:575px){
  :root{ --ib-icon:32px; --ib-icon-fs:12.5px; --ib-chip-h:32px; --ib-logo:34px; --ib-gap:4px; }
}
@media (max-width:420px){
  :root{ --ib-icon:30px; --ib-icon-fs:12px; --ib-chip-h:30px; --ib-logo:30px; --ib-gap:3px; }
}

/* Top nav pills shrink alongside the scale. */
@media (max-width:1280px){
  .custom_header ul.menuHomeMain li a{ padding:6px 10px !important; font-size:12px !important; }
}
@media (max-width:1100px){
  .custom_header ul.menuHomeMain li a{ padding:5px 8px !important; font-size:11.5px !important; }
}

/* The icon cluster must never overflow: allow it to wrap, and keep it
   right-aligned so it stays visually anchored to the edge. */
@media (max-width:1199px){
  .custom_header .main-nav-auth-profile-wrap{
    flex-wrap:wrap !important;
    justify-content:flex-end !important;
    row-gap:6px !important;
  }
}

/* Very small screens: the language + currency chips are the widest items
   in the cluster and the least critical. The theme already tags them
   .itbnHideMbo ("hide mobile"), so honour that intent below 480px and
   let the icon buttons keep a single tidy row. */
@media (max-width:480px){
  .custom_header li.main-nav-right-menu.btn_lang.itbnHideMbo{ display:none !important; }
}

/* Mobile drawer tab bar (menuMobi) — the theme reveals this <=991px.
   Keep the items full-width and readable inside the 320px drawer. */
@media (max-width:991px){
  .custom_header ul.navbar-nav.menuNav.menuMobi li{ width:100%; }
  .custom_header ul.navbar-nav.menuNav.menuMobi li a{
    display:block; width:100%; white-space:normal; word-break:break-word;
  }
}