:root{
    --green-900:#062A1F;
    --green-800:#0F4C3A;
    --green-700:#13573F;
    --green-600:#1A6B4F;
    --green-500:#2E8B6A;
    --green-50:#E8F1ED;
    --accent-rgb:15,122,92;   /* drives sidebar active-state glow; updated by theme engine */
    --ink:#1F2937;
    --muted:#6B7280;
    --border:#E5E7EB;
    --bg:#F4F5F7;
    --card:#FFFFFF;
    --gold:#C9A86A;
    --amber:#D9A441;
    --red:#D34B4B;
    --blue:#3B82F6;

    /* Customizable design tokens (controlled from Settings → Edit Design) */
    --card-h:124px;
    --card-p:16px;
    --card-num-size:21px;
    --card-icon-size:48px;
    --card-gap:14px;
    --hero-h:275px;
    --hero-scale:1;
    --card-radius:16px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{background:var(--bg);font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;color:var(--ink);font-size:14px;line-height:1.5}
  body{min-height:100vh;background:transparent;font-family:inherit;color:inherit;font-size:inherit;line-height:inherit;position:relative;z-index:1}

  /* Layout: in RTL with grid, first column = right side, second column = left side */
  .app{display:grid;grid-template-columns:230px 1fr;height:100vh;overflow:hidden;transition:grid-template-columns .25s ease;}
  body.sidebar-collapsed .app{grid-template-columns:72px 1fr;}
  /* The content column scrolls on its own (so the sidebar stays put and no empty
     gap appears under it when a page is tall). */
  .main{padding:18px 22px 18px 22px;display:flex;flex-direction:column;gap:16px;min-width:0;height:100vh;overflow-y:auto;overflow-x:hidden;}
  .main::-webkit-scrollbar{width:9px}
  .main::-webkit-scrollbar-track{background:transparent}
  .main::-webkit-scrollbar-thumb{background:rgba(15,76,58,0.18);border-radius:8px}
  .main::-webkit-scrollbar-thumb:hover{background:rgba(15,76,58,0.32)}
  .main{scrollbar-width:thin;scrollbar-color:rgba(15,76,58,0.22) transparent}

  /* Sidebar — first child in DOM so it sits on the RIGHT in RTL */
  /* Default watermark SVG (Kaaba + mosque minarets + Mina tents) — used as the
     fallback background image for the sidebar watermark behind the settings area.
     Stored as a CSS variable so JS can override on user upload, and a Reset action
     can fall back to this default by clearing the inline style. */
  :root{
    --watermark-default:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120' preserveAspectRatio='xMidYMax meet'><g fill='%23d8f3e8'><rect x='30' y='62' width='2.5' height='50'/><polygon points='27.5,62 35,62 31.25,54'/><circle cx='31.25' cy='51' r='1.8'/><rect x='30.5' y='44' width='1.5' height='7'/><rect x='207.5' y='62' width='2.5' height='50'/><polygon points='205,62 212.5,62 208.75,54'/><circle cx='208.75' cy='51' r='1.8'/><rect x='208' y='44' width='1.5' height='7'/><path d='M88 92 Q88 78 102 78 Q116 78 116 92 Z'/><path d='M124 92 Q124 78 138 78 Q152 78 152 92 Z'/><path d='M98 78 Q98 60 120 60 Q142 60 142 78 Z'/><rect x='119' y='52' width='2' height='10'/><circle cx='120' cy='50' r='2'/><rect x='112' y='90' width='16' height='22'/><polygon points='8,112 22,112 15,104'/><rect x='8' y='110' width='14' height='2'/><polygon points='26,112 40,112 33,104'/><rect x='26' y='110' width='14' height='2'/><polygon points='44,112 58,112 51,104'/><rect x='44' y='110' width='14' height='2'/><polygon points='62,112 76,112 69,104'/><rect x='62' y='110' width='14' height='2'/><polygon points='80,112 94,112 87,104'/><rect x='80' y='110' width='14' height='2'/><polygon points='146,112 160,112 153,104'/><rect x='146' y='110' width='14' height='2'/><polygon points='164,112 178,112 171,104'/><rect x='164' y='110' width='14' height='2'/><polygon points='182,112 196,112 189,104'/><rect x='182' y='110' width='14' height='2'/><polygon points='200,112 214,112 207,104'/><rect x='200' y='110' width='14' height='2'/><polygon points='218,112 232,112 225,104'/><rect x='218' y='110' width='14' height='2'/></g></svg>");
  }

  .sidebar{
    position:sticky;top:0;align-self:start;height:100vh;
    padding:6px 14px 18px;
    display:flex;flex-direction:column;gap:8px;
    border-start-start-radius:0;
    border-start-end-radius:14px;
    border-end-end-radius:14px;
    border-end-start-radius:0;
    color:#fff;
    overflow:hidden;
    transition:padding .25s ease;
    /* Single continuous gradient covering the full sidebar height — dark at top,
       slightly lighter toward the bottom. Uses the theme color scale so it
       changes with the chosen site color (Settings → Site Color). */
    background:linear-gradient(180deg,
      var(--green-900) 0%,
      var(--green-800) 35%,
      var(--green-700) 65%,
      var(--green-600) 100%);
    box-shadow:
      inset 1px 0 0 rgba(216,243,232,0.10),
      inset 0 1px 0 rgba(216,243,232,0.06),
      -4px 0 16px -6px rgba(0,0,0,0.18);
  }
  /* Fixed top (brand) and bottom (collapse + settings); only the middle scrolls */
  .sidebar .brand{flex:none}
  .sidebar-foot{flex:none;display:flex;flex-direction:column;gap:8px;position:relative;z-index:2}
  .sidebar-scroll{
    flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
    display:flex;flex-direction:column;gap:8px;position:relative;z-index:2;
    margin:0 -6px;padding:0 6px;
  }
  /* Subtle sidebar scrollbar (on the middle area) */
  .sidebar-scroll::-webkit-scrollbar{width:7px}
  .sidebar-scroll::-webkit-scrollbar-track{background:transparent}
  .sidebar-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.18);border-radius:8px}
  .sidebar-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.30)}
  .sidebar-scroll{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.22) transparent}
  /* LTR: mirror inset/drop shadows so highlight + soft edge stay on the inner (content-facing) side */
  [dir="ltr"] .sidebar{
    box-shadow:
      inset -1px 0 0 rgba(216,243,232,0.10),
      inset 0 1px 0 rgba(216,243,232,0.06),
      4px 0 16px -6px rgba(0,0,0,0.18);
  }

  /* Decorative watermark at the bottom — a quiet 10% Islamic silhouette,
     no repeat, contained, blended naturally over the gradient. */
  .sidebar-watermark{
    position:absolute;
    bottom:0;
    inset-inline:0;
    height:180px;
    pointer-events:none;
    background-image:var(--watermark-default);
    background-position:bottom center;
    background-size:contain;
    background-repeat:no-repeat;
    opacity:0.10;
    z-index:0;
  }
  body.dark .sidebar-watermark{opacity:0.13}
  .sidebar .brand,
  .sidebar .nav-item,
  .sidebar .sidebar-collapse-btn{position:relative;z-index:1}
  body.sidebar-collapsed .sidebar-watermark{
    height:110px;
    opacity:0.08;
  }
  body.sidebar-collapsed .sidebar{padding:6px 8px 18px}
  body.sidebar-collapsed .sidebar .nav-item{
    justify-content:center;padding:10px 6px;
  }
  body.sidebar-collapsed .sidebar .nav-item .label{
    /* Hide label, keep accessible for screen readers via aria-label fallback */
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  }
  body.sidebar-collapsed .sidebar .brand-mark .brand-text{display:none}
  /* Tooltip on hover when collapsed */
  body.sidebar-collapsed .sidebar .nav-item{position:relative}
  body.sidebar-collapsed .sidebar .nav-item:hover::after{
    content:attr(data-tooltip);
    position:absolute;
    inset-inline-end:calc(100% + 8px);
    top:50%;transform:translateY(-50%);
    background:#0F4C3A;color:#fff;
    padding:6px 10px;border-radius:6px;
    font-size:12px;font-weight:500;white-space:nowrap;
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
    pointer-events:none;z-index:50;
    animation:fadeInTooltip .15s ease;
  }
  @keyframes fadeInTooltip{from{opacity:0;transform:translateY(-50%) translateX(4px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}

  /* Collapsed: expandable groups show only the head icon (no sub-items, no labels/chevrons) */
  body.sidebar-collapsed .sidebar .nav-subitems{max-height:0 !important;overflow:hidden;transition:none !important;margin-top:0 !important}
  body.sidebar-collapsed .sidebar .nav-group-head{justify-content:center;padding:10px 6px;position:relative}
  body.sidebar-collapsed .sidebar .nav-group-head .label,
  body.sidebar-collapsed .sidebar .nav-group-chev{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  }
  body.sidebar-collapsed .sidebar .nav-group-head:hover::after{
    content:attr(data-tooltip);
    position:absolute;inset-inline-end:calc(100% + 8px);top:50%;transform:translateY(-50%);
    background:#0F4C3A;color:#fff;padding:6px 10px;border-radius:6px;
    font-size:12px;font-weight:500;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,0.2);
    pointer-events:none;z-index:50;animation:fadeInTooltip .15s ease;
  }

  .brand{
    display:flex;align-items:center;justify-content:center;
    padding:4px 0 14px;
    margin-bottom:10px;
    position:relative;
  }
  .brand::after{
    content:"";position:absolute;bottom:0;left:18%;width:64%;height:1px;
    background:linear-gradient(90deg, transparent, rgba(216,243,232,0.5), transparent);
  }
  .brand-mark{
    width:100%;height:80px;
    display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none;
  }
  .brand-mark img{max-width:100%;max-height:100%;object-fit:contain;display:block}
  .brand-mark .logo-compact{display:none}
  body.sidebar-collapsed .brand-mark{height:48px}
  body.sidebar-collapsed .brand-mark .logo-full{display:none}
  body.sidebar-collapsed .brand-mark .logo-compact{display:block}

  /* Collapse toggle — small icon-only button pinned to bottom, above settings */
  .sidebar-collapse-btn{
    align-self:center;
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;
    background:transparent;
    border:1px solid rgba(216,243,232,0.18);
    border-radius:10px;
    color:#d8f3e8;
    cursor:pointer;
    padding:0;
    margin-bottom:8px;
    transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
  }
  .sidebar-collapse-btn:hover{
    background:rgba(216,243,232,0.10);
    border-color:rgba(216,243,232,0.32);
    color:#fff;
  }
  .sidebar-collapse-btn svg{width:18px;height:18px}
  /* Only the inner arrow flips to indicate collapse/expand; the panel stays put. */
  .st-collapse-arrow{transition:transform .25s ease;transform-origin:center}
  [dir="ltr"] .st-collapse-arrow{transform:rotate(180deg)}
  body.sidebar-collapsed .st-collapse-arrow{transform:rotate(180deg)}
  [dir="ltr"] body.sidebar-collapsed .st-collapse-arrow{transform:rotate(0deg)}

  /* Settings nav item — pin to bottom (toggle sits above it) */
  #settings-nav{
    padding-top:14px;
    border-top:1px solid rgba(216,243,232,0.10);
  }
  .sidebar-collapse-btn + #settings-nav{
    margin-top:0;
  }

  .nav-item{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:10px 12px;border-radius:10px;cursor:pointer;
    color:#d8f3e8;font-size:13.5px;font-weight:500;
    position:relative;
    transition:background .2s ease, color .2s ease, box-shadow .2s ease, padding .2s ease;
  }
  .nav-item:hover{
    background:rgba(216,243,232,0.08);
    color:#fff;
    padding-inline-end:16px;
  }
  .nav-item.active{
    background:linear-gradient(135deg, rgba(var(--accent-rgb),0.55) 0%, rgba(var(--accent-rgb),0.72) 100%);
    color:#fff;font-weight:600;
    border:1px solid rgba(216,243,232,0.22);
    box-shadow:
      0 0 24px rgba(var(--accent-rgb),0.45),
      0 2px 8px rgba(0,0,0,0.18),
      inset 0 1px 0 rgba(255,255,255,0.14);
  }
  .nav-item .label{flex:1;text-align:start}
  .nav-item .ico{width:18px;height:18px;flex:none;display:flex;align-items:center;justify-content:center}
  .nav-item.active .ico svg{stroke:#fff;filter:drop-shadow(0 0 4px rgba(216,243,232,0.6))}
  .nav-item .ico svg{stroke:#d8f3e8;width:18px;height:18px;fill:none;stroke-width:1.8;transition:filter .2s ease}
  .nav-item:hover .ico svg{filter:drop-shadow(0 0 3px rgba(216,243,232,0.4))}

  /* Expandable nav group (Housing Management) */
  .nav-group-chev{width:14px;height:14px;flex:none;display:flex;align-items:center;justify-content:center;transition:transform .25s ease}
  .nav-group-chev svg{width:14px;height:14px;stroke:#d8f3e8}
  .nav-group.open .nav-group-chev{transform:rotate(180deg)}
  .nav-subitems{
    overflow:hidden;max-height:0;
    transition:max-height .28s ease;
    display:flex;flex-direction:column;gap:2px;
    margin-top:2px;
  }
  .nav-group.open .nav-subitems{max-height:400px}
  .nav-subitem{
    display:flex;align-items:center;gap:9px;
    padding:8px 12px 8px 28px;border-radius:9px;cursor:pointer;
    color:#bfe6d6;font-size:12.5px;font-weight:500;
    transition:background .2s ease, color .2s ease;
  }
  .nav-subitem:hover{background:rgba(216,243,232,0.08);color:#fff}
  .nav-subitem.active{
    background:linear-gradient(135deg, rgba(var(--accent-rgb),0.45) 0%, rgba(var(--accent-rgb),0.6) 100%);
    color:#fff;font-weight:600;
  }
  .nav-sub-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;opacity:.6}
  .nav-subitem.active .nav-sub-dot{opacity:1}

  /* Top bar */
  .topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:6px 4px 4px;
  }
  .topbar-right{display:flex;align-items:center;gap:18px}
  .topbar-left{display:flex;align-items:center;gap:10px}
  /* In RTL, margin-left:auto pushes element to the RIGHT visually */
  .topnav{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:flex-start}
  .topnav a{
    color:#374151;text-decoration:none;font-size:13.5px;font-weight:500;
    position:relative;padding:6px 2px;
  }
  .topnav a.active{color:var(--green-700);font-weight:700}
  .topnav a.active::after{
    content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
    width:26px;height:2.5px;border-radius:2px;background:var(--green-600);
  }
  .topnav a:hover{color:var(--green-700)}

  /* ===== Profile dropdown ===== */
  .profile{
    position:relative;
    display:flex;align-items:center;gap:10px;
    padding:5px 12px 5px 8px;
    background:#fff;border:1px solid #ECEEF0;border-radius:11px;
    cursor:pointer;user-select:none;
    transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .profile:hover{background:#FAFBFA;border-color:#D9E3DE}
  .profile.open{box-shadow:0 0 0 3px rgba(15,76,58,0.08);border-color:#C9DACF}

  .avatar{
    width:32px;height:32px;border-radius:50%;
    background:linear-gradient(135deg, var(--green-700) 0%, var(--green-500) 100%);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:13px;letter-spacing:.3px;flex:none;
  }
  .avatar.md{width:40px;height:40px;font-size:15px}

  .profile-info{
    display:flex;flex-direction:column;line-height:1.2;text-align:right;gap:1px;
  }
  .profile-name{font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:.1px}
  .profile-role{font-size:10.5px;color:#9CA3AF;font-weight:500}
  .profile .chev{width:13px;height:13px;color:#6B7280;flex:none;margin-right:2px;transition:transform .18s ease}
  .profile.open .chev{transform:rotate(180deg)}

  .profile-menu{
    position:absolute;
    top:calc(100% + 8px);left:0;
    min-width:230px;
    background:#fff;
    border:1px solid #ECEEF0;
    border-radius:12px;
    box-shadow:0 12px 32px rgba(11,31,24,0.12);
    padding:6px;
    opacity:0;visibility:hidden;transform:translateY(-4px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    z-index:200;
  }
  .profile.open .profile-menu{opacity:1;visibility:visible;transform:translateY(0)}

  .profile-menu-header{
    display:flex;align-items:center;gap:11px;
    padding:10px 10px 12px;text-align:right;
  }
  .pm-name{font-size:13px;font-weight:700;color:var(--ink)}
  .pm-email{font-size:11px;color:#9CA3AF;margin-top:2px}
  .pm-divider{height:1px;background:#ECEEF0;margin:2px 4px}

  .menu-item{
    display:flex;align-items:center;gap:10px;width:100%;
    padding:9px 10px;
    background:transparent;border:0;
    font-family:inherit;font-size:13px;color:#374151;font-weight:500;
    border-radius:8px;cursor:pointer;text-align:right;
    transition:background .12s ease;
  }
  .menu-item span{flex:1;text-align:right}
  .menu-item svg{width:16px;height:16px;flex:none;color:#6B7280}
  .menu-item:hover{background:#F4F5F7}
  body.dark .menu-item{color:#E5E7EB}
  body.dark .menu-item svg{color:#9CA3AF}
  body.dark .menu-item:hover{background:rgba(255,255,255,0.06)}
  .menu-item.danger{color:#B72D2D}
  .menu-item.danger svg{color:#B72D2D}
  .menu-item.danger:hover{background:#FEF1F1}
  body.dark .menu-item.danger{color:#F87171}
  body.dark .menu-item.danger svg{color:#F87171}
  body.dark .menu-item.danger:hover{background:rgba(220,38,38,0.15)}

  /* notification dot */
  .icon-btn{position:relative}
  .notif-dot{
    position:absolute;top:7px;right:7px;
    width:7px;height:7px;border-radius:50%;
    background:#D34B4B;border:1.5px solid #fff;
  }

  /* keep old icon-btn rules */
  .icon-btn{
    width:34px;height:34px;border-radius:8px;background:#fff;border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;cursor:pointer;color:#4B5563;
    transition:background .15s;
  }
  .icon-btn:hover{background:#F9FAFB}
  /* ===== Language selector ===== */
  .lang-selector{
    position:relative;
    display:flex;align-items:center;gap:6px;
    padding:7px 10px 7px 8px;
    background:#fff;border:1px solid #ECEEF0;border-radius:10px;
    cursor:pointer;user-select:none;
    transition:background .15s, border-color .15s, box-shadow .15s;
  }
  .lang-selector:hover{background:#FAFBFA;border-color:#D9E3DE}
  .lang-selector.open{box-shadow:0 0 0 3px rgba(15,76,58,0.08);border-color:#C9DACF}
  .lang-selector .globe-ico{width:15px;height:15px;color:var(--green-700);flex:none}
  .lang-selector .lang-current{font-size:12.5px;font-weight:600;color:var(--ink)}
  .lang-selector .chev{width:11px;height:11px;color:#6B7280;flex:none;transition:transform .18s}
  .lang-selector.open .chev{transform:rotate(180deg)}

  .lang-menu{
    position:absolute;top:calc(100% + 8px);left:0;
    min-width:180px;
    background:#fff;
    border:1px solid #ECEEF0;border-radius:12px;
    box-shadow:0 12px 32px rgba(11,31,24,0.12);
    padding:6px;
    opacity:0;visibility:hidden;transform:translateY(-4px);
    transition:opacity .18s, transform .18s, visibility .18s;
    z-index:200;
  }
  .lang-selector.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}

  .lang-item{
    display:flex;align-items:center;gap:10px;width:100%;
    padding:8px 10px;
    background:transparent;border:0;
    font-family:inherit;font-size:13px;font-weight:500;color:#374151;
    border-radius:8px;cursor:pointer;text-align:right;
    transition:background .12s;
  }
  .lang-item > span:last-child{flex:1;text-align:right}
  .lang-flag{font-size:15px;flex:none;line-height:1}
  .lang-item:hover{background:#F4F5F7}
  .lang-item.active{background:#EAF2EE;color:var(--green-800);font-weight:700}

  /* Hero — image on LEFT (Kaaba), green panel on RIGHT with text */
  /* ====== Left-edge decorative backdrop ======
     A faint vertical strip on the visual left of the page,
     user-customizable from Settings (image + opacity).
     Sits at z-index:-1 so it never bleeds onto cards or content. */
  .page-bg-deco{
    position:fixed;
    top:0;left:0;
    width:clamp(160px, 18vw, 320px);
    height:100vh;
    background-image:var(--page-bg-image, none);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    opacity:var(--page-bg-opacity, 0.10);
    pointer-events:none;
    z-index:-1;
    /* Fade out on the right edge so it blends smoothly with the page */
    -webkit-mask-image:linear-gradient(to right, #000 0%, #000 50%, transparent 100%);
    mask-image:linear-gradient(to right, #000 0%, #000 50%, transparent 100%);
    transition:opacity .3s ease;
  }

  /* ====== Hero (slideshow container) ====== */
  .hero{
    position:relative;border-radius:16px;overflow:hidden;
    background:rgba(var(--accent-rgb,11,61,46),1);  /* base color follows site theme */
    height:var(--hero-h);
    color:#fff;
    padding:calc(20px * var(--hero-scale,1)) calc(36px * var(--hero-scale,1)) calc(34px * var(--hero-scale,1));
    display:flex;flex-direction:column;justify-content:space-between;
    box-shadow:0 1px 2px rgba(0,0,0,0.04);
    transition:height .2s ease, padding .2s ease;
  }
  /* Slides stack behind everything — cross-fade animation */
  .hero-slides{
    position:absolute;inset:0;
    z-index:0;
    overflow:hidden;
  }
  .hero-slide{
    position:absolute;inset:0;
    opacity:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    transition:opacity 1.1s ease, transform 7s ease;
    transform:scale(1.0);
  }
  .hero-slide.active{
    opacity:1;
    transform:scale(1.04);  /* slow Ken Burns zoom while active */
  }
  /* Gradient overlay on top of slides — keeps text readable */
  .hero-fade{
    position:absolute;inset:0;
    z-index:1;
    pointer-events:none;
    background:
      linear-gradient(265deg,
        rgba(var(--accent-rgb,11,61,46),0.92) 0%,
        rgba(var(--accent-rgb,11,61,46),0.75) 28%,
        rgba(var(--accent-rgb,11,61,46),0.42) 55%,
        rgba(var(--accent-rgb,11,61,46),0.05) 88%,
        rgba(var(--accent-rgb,11,61,46),0) 100%
      );
  }
  /* Place content above slides + fade */
  .hero-content,
  .hero-info-panel,
  .hero-slide-nav{position:relative;z-index:2}
  .hero-content{margin-right:0;margin-left:auto;text-align:right;max-width:480px;padding-top:4px}

  /* Live status pill */
  .hero-status{
    display:inline-flex;align-items:center;gap:8px;
    padding:5px 12px;border-radius:999px;
    background:rgba(255,255,255,0.12);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,0.18);
    color:#e7f0eb;font-size:11.5px;font-weight:500;letter-spacing:.2px;
    margin-bottom:calc(10px * var(--hero-scale,1));
  }
  .hero-status-dot{
    width:7px;height:7px;border-radius:50%;
    background:#5DE3B0;
    box-shadow:0 0 0 0 rgba(93,227,176,0.7);
    animation:hero-pulse 2.2s infinite;
  }
  .hero-status-sep{opacity:.45}
  @keyframes hero-pulse{
    0%{box-shadow:0 0 0 0 rgba(93,227,176,0.55)}
    70%{box-shadow:0 0 0 7px rgba(93,227,176,0)}
    100%{box-shadow:0 0 0 0 rgba(93,227,176,0)}
  }

  /* Dynamic slide title / description — fades in on slide change */
  .hero-slide-text{
    opacity:1;
    transition:opacity .35s ease, transform .35s ease;
  }
  .hero-slide-text.swapping{
    opacity:0;
    transform:translateY(6px);
  }
  .hero-slide-title{
    font-size:calc(30px * var(--hero-scale,1));
    font-weight:800;
    line-height:1.2;
    letter-spacing:.2px;
    margin:0;
    text-shadow:0 2px 12px rgba(0,0,0,0.20);
  }
  .hero-slide-desc{
    font-size:calc(13px * var(--hero-scale,1));
    line-height:1.65;
    color:#dde9e1;
    margin:calc(8px * var(--hero-scale,1)) 0 0;
    max-width:440px;
    text-shadow:0 1px 6px rgba(0,0,0,0.18);
  }

  /* Slideshow controls — arrows + dots, positioned at the bottom of the hero */
  .hero-slide-nav{
    position:absolute;
    bottom:14px;
    inset-inline-start:36px;
    display:flex;align-items:center;gap:10px;
  }
  .hero-arrow{
    width:32px;height:32px;
    border-radius:50%;
    background:rgba(255,255,255,0.14);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,0.20);
    color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:background .2s ease, transform .2s ease;
    flex-shrink:0;
  }
  .hero-arrow svg{width:14px;height:14px}
  .hero-arrow:hover{
    background:rgba(255,255,255,0.22);
    transform:scale(1.06);
  }
  .hero-arrow:focus-visible{outline:2px solid #5DE3B0;outline-offset:2px}
  /* In RTL the "next" arrow visually points the other way — flip the SVG */
  html[dir="rtl"] .hero-arrow svg{transform:scaleX(-1)}

  .hero-dots{
    display:flex;align-items:center;gap:6px;
  }
  .hero-dot{
    width:7px;height:7px;border-radius:50%;
    background:rgba(255,255,255,0.30);
    border:none;
    cursor:pointer;
    padding:0;
    transition:all .25s ease;
  }
  .hero-dot:hover{background:rgba(255,255,255,0.55)}
  .hero-dot.active{
    background:#fff;
    width:22px;border-radius:99px;
    box-shadow:0 0 8px rgba(255,255,255,0.45);
  }
  .hero h1{
    font-weight:700;font-size:calc(32px * var(--hero-scale,1));line-height:1.15;letter-spacing:.5px;
    margin-bottom:calc(4px * var(--hero-scale,1));text-shadow:0 1px 2px rgba(0,0,0,0.15);
    transition:font-size .2s ease;
  }
  .hero h1 .row2{display:block;margin-top:2px;font-weight:500;opacity:.85;font-size:calc(20px * var(--hero-scale,1))}
  .hero p{
    margin-top:calc(8px * var(--hero-scale,1));
    font-size:calc(13px * var(--hero-scale,1));color:#d6e6dd;line-height:1.65;font-weight:400;max-width:420px;
    transition:font-size .2s ease;
  }
  .hero-services{
    display:flex;gap:calc(10px * var(--hero-scale,1));justify-content:flex-start;
    margin-top:calc(14px * var(--hero-scale,1));flex-wrap:wrap;
    margin-right:0;margin-left:auto;
    transform-origin:bottom right;
    transition:gap .2s ease, margin-top .2s ease;
  }
  /* Hero stat chip — icon + big value + small label, dashboard-style */
  .hs{
    display:flex;flex-direction:column;align-items:flex-start;
    gap:2px;
    padding:8px 12px 8px 10px;
    border-radius:10px;
    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,0.12);
    min-width:calc(92px * var(--hero-scale,1));
    color:#fff;
    transition:background .2s ease;
  }
  .hs:hover{background:rgba(255,255,255,0.13)}
  .hs-ico{
    width:calc(22px * var(--hero-scale,1));height:calc(22px * var(--hero-scale,1));
    border-radius:0;border:0;background:transparent;
    display:flex;align-items:center;justify-content:flex-start;
    margin-bottom:1px;
    transition:width .2s ease, height .2s ease;
  }
  .hs-ico svg{
    width:calc(15px * var(--hero-scale,1));height:calc(15px * var(--hero-scale,1));
    stroke:#9fd8c0;fill:none;stroke-width:1.6;
    transition:width .2s ease, height .2s ease;
  }
  .hs-val{
    font-size:calc(16px * var(--hero-scale,1));font-weight:700;
    color:#fff;letter-spacing:.3px;line-height:1.1;
  }
  .hs-lbl{
    font-size:calc(10.5px * var(--hero-scale,1));font-weight:400;
    color:#b9d4c6;letter-spacing:.1px;
  }

  /* ===== KPI cards — refined ===== */
  /* ============================================================
     SECTION TITLES — Clean header bar inside each container
     ============================================================ */
  .dash-section{margin-top:22px;margin-bottom:18px}
  .dash-section:last-of-type{margin-bottom:0}

  .section-title{
    display:flex;align-items:center;gap:9px;
    font-size:13.5px;font-weight:600;
    color:var(--ink);
    margin:0;
    letter-spacing:-0.1px;
    line-height:1.3;
  }
  .section-title::before{
    content:'';
    width:5px;height:5px;
    border-radius:50%;
    background:#2EC48C;
    box-shadow:0 0 0 3px rgba(46,196,140,0.12);
    flex:none;
  }
  body.dark .section-title{color:#E5E7EB}

  /* Section head — sits INSIDE each container as a header bar */
  .section-head{
    display:flex;align-items:center;justify-content:space-between;
    gap:10px;
    padding:0 0 12px 0;
    margin:0 0 12px 0;
    position:relative;
    border-bottom:1px solid rgba(0,0,0,0.06);
    flex-shrink:0;
  }
  body.dark .section-head{border-bottom-color:rgba(255,255,255,0.08)}
  .section-head .section-title{margin:0}

  .section-head-left{
    display:flex;align-items:center;gap:9px;
    min-width:0;
  }

  /* Pill badge */
  .section-badge{
    display:inline-flex;align-items:center;gap:5px;
    padding:2px 8px;
    font-size:10px;font-weight:600;
    background:rgba(46,196,140,0.10);
    color:#0F7A5C;
    border-radius:99px;
    letter-spacing:.2px;
    line-height:1.5;
    font-variant-numeric:tabular-nums;
  }
  body.dark .section-badge{
    background:rgba(46,196,140,0.14);
    color:#5DE3B0;
  }

  /* Right meta — small icon + text */
  .section-meta{
    display:flex;align-items:center;gap:5px;
    font-size:10px;font-weight:500;
    color:#9CA3AF;
    letter-spacing:.2px;
    flex-shrink:0;
  }
  body.dark .section-meta{color:#6B7280}
  .section-meta-dot{
    width:5px;height:5px;border-radius:50%;
    background:#10B981;
    box-shadow:0 0 0 2px rgba(16,185,129,0.20);
  }

  /* For dark-background containers (kept for compatibility) */
  .afm-sidebar.dark-bg .section-title{color:#fff}
  .afm-sidebar.dark-bg .section-title::before{
    background:#5DE3B0;
    box-shadow:0 0 0 3px rgba(93,227,176,0.18);
  }

  /* For the dark glass map header */
  .ops-map-frame .section-title{color:var(--ink)}
  body.dark .ops-map-frame .section-title{color:#E5E7EB}
  .ops-map-frame .section-head{
    border-bottom-color:rgba(0,0,0,0.06);
  }
  body.dark .ops-map-frame .section-head{
    border-bottom-color:rgba(255,255,255,0.08);
  }

  /* Edit pin — small circular pencil button next to section title */
  .edit-pin{
    width:28px;height:28px;border-radius:50%;
    border:1px solid var(--border);background:#fff;color:#6B7280;
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;font-family:inherit;flex:none;
    transition:all .18s ease;
  }
  .edit-pin svg{width:14px;height:14px}
  .edit-pin:hover{
    background:var(--green-50);color:var(--green-700);border-color:var(--green-700);
    transform:rotate(-5deg);
  }
  .edit-pin.active{
    background:var(--green-700);color:#fff;border-color:var(--green-700);
  }
  body.dark .edit-pin{background:var(--card);color:#B7BFC9;border-color:var(--border)}
  body.dark .edit-pin:hover{background:rgba(46,139,106,0.18);color:#5DD8A0;border-color:var(--green-500)}
  body.dark .edit-pin.active{background:var(--green-700);color:#fff}

  /* Hero edit pin — overlay on the hero corner */
  .edit-pin--hero{
    position:absolute;top:14px;inset-inline-end:14px;z-index:2;
    background:rgba(255,255,255,0.92);backdrop-filter:blur(6px);
    border-color:rgba(255,255,255,0.4);
  }
  .edit-pin--hero:hover{background:#fff}

  /* Edit popover (floating panel) */
  .edit-popover{
    position:fixed;z-index:200;
    background:#fff;border:1px solid var(--border);border-radius:14px;
    width:340px;max-width:calc(100vw - 24px);
    box-shadow:0 16px 40px rgba(16,24,40,0.18);
    padding:14px;
    animation:popIn .18s ease;
  }
  .edit-popover[hidden]{display:none}
  @keyframes popIn{
    from{opacity:0;transform:translateY(-6px) scale(.97)}
    to  {opacity:1;transform:translateY(0)    scale(1)}
  }
  body.dark .edit-popover{background:var(--card);border-color:var(--border)}

  .ep-header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:10px;padding-bottom:10px;
    border-bottom:1px solid var(--border);
  }
  .ep-header h4{
    font-size:14px;font-weight:700;color:var(--ink);margin:0;letter-spacing:.1px;
  }
  .ep-close{
    width:26px;height:26px;border-radius:6px;border:0;background:transparent;
    color:#6B7280;display:flex;align-items:center;justify-content:center;
    cursor:pointer;
  }
  .ep-close:hover{background:#F1F3F5;color:var(--ink)}
  body.dark .ep-close:hover{background:#232F3C;color:var(--ink)}

  .ep-body{display:flex;flex-direction:column;gap:8px}
  .ep-body .size-row{margin-top:0}
  .ep-footer{display:flex;justify-content:flex-end;margin-top:6px}
  .ep-footer .ep-reset{padding:6px 12px;font-size:12px}
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--card-gap);transition:gap .2s ease;}
  @media (max-width:980px){.kpis{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:560px){.kpis{grid-template-columns:1fr}}

  /* 5-col grid for the new General-Statistics row */
  .kpis.kpis-6{grid-template-columns:repeat(5,1fr)}
  @media (max-width:1180px){.kpis.kpis-6{grid-template-columns:repeat(3,1fr)}}
  @media (max-width:780px){.kpis.kpis-6{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:520px){.kpis.kpis-6{grid-template-columns:1fr}}

  /* Compact half-donut on the LEFT of the Kingdom card */
  .v4-halfchart{
    width:90px;height:68px;flex:none;
    display:flex;align-items:center;justify-content:center;
    position:relative;z-index:1;
    cursor:default;
    transform:translate(var(--chart-x,0px), var(--chart-y,0px));
    transition:transform .15s ease;
    touch-action:auto;
    user-select:none;
  }
  /* Drag only enabled inside edit mode */
  body.chart-edit-mode .v4-halfchart{
    cursor:grab;
    outline:2px dashed var(--accent);
    outline-offset:6px;
    border-radius:6px;
    touch-action:none;
    animation:editPulse 1.5s ease-in-out infinite;
  }
  body.chart-edit-mode .v4-halfchart.dragging{
    cursor:grabbing;
    transition:none;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,0.18));
    z-index:5;
    animation:none;
  }
  @keyframes editPulse{
    0%,100%{outline-color:var(--accent)}
    50%{outline-color:rgba(46,139,106,0.35)}
  }
  .v4-halfchart svg{
    width:100%;height:100%;display:block;overflow:visible;
    transform:scale(var(--chart-scale,1));
    transform-origin:center center;
    transition:transform .2s ease;
  }
  .v4-hd-bg{fill:none;stroke:#EEF1EF;stroke-width:10;stroke-linecap:round}
  .v4-hd-fg{
    fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;
    transition:stroke-dashoffset .6s ease;
    filter:drop-shadow(0 1px 2px rgba(46,139,106,0.25));
  }
  .v4-hd-num{
    font-size:22px;font-weight:800;fill:var(--accent);
    font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;
    font-variant-numeric:tabular-nums;letter-spacing:.5px;
  }
  body.dark .v4-hd-bg{stroke:#2A3441}
  body.dark .v4-hd-num{fill:var(--accent)}

  /* ============================================================
     KPI cards — v4 — asymmetric: icon badge + number + delta
     ============================================================ */
  .kpi-v4{
    --accent:#13573F;
    --accent-bg:#E8F1ED;
    position:relative;
    background:linear-gradient(135deg,#fff 55%,var(--accent-bg) 145%);
    border:1px solid #ECEEF0;border-radius:var(--card-radius);
    padding:var(--card-p);
    display:flex;align-items:center;gap:12px;
    min-height:var(--card-h);
    box-shadow:0 1px 2px rgba(16,24,40,0.03);
    transition:transform .22s ease, box-shadow .22s ease, min-height .2s ease, padding .2s ease;
  }
  .kpi-v4:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,24,40,0.07)}

  /* Top accent strip (kept on every card) */
  .kpi-v4::before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--accent) 0%,var(--accent) 60%,rgba(0,0,0,0) 100%);
    border-radius:var(--card-radius) var(--card-radius) 0 0;
  }

  /* Icon badge */
  .v4-icon{
    width:var(--card-icon-size,48px);
    height:var(--card-icon-size,48px);
    border-radius:12px;
    background:var(--accent-bg);
    display:flex;align-items:center;justify-content:center;
    flex:none;position:relative;z-index:1;
    transition:width .2s ease, height .2s ease;
  }
  .v4-icon svg{
    width:calc(var(--card-icon-size,48px) * 0.5);
    height:calc(var(--card-icon-size,48px) * 0.5);
    stroke:var(--accent);fill:none;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
    transition:width .2s ease, height .2s ease;
  }

  /* Text block */
  .v4-body{
    flex:1;display:flex;flex-direction:column;gap:3px;
    min-width:0;position:relative;z-index:1;
  }
  .v4-label{
    font-size:11.5px;color:#6B7280;font-weight:600;letter-spacing:.1px;
    line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
  }
  .v4-metric{display:flex;align-items:baseline;gap:5px;margin-top:2px;flex-wrap:wrap}
  .v4-val{
    font-size:var(--card-num-size);font-weight:800;color:var(--ink);
    line-height:1;letter-spacing:.2px;font-variant-numeric:tabular-nums;
    transition:font-size .2s ease;
  }
  .v4-unit{font-size:11px;color:#9CA3AF;font-weight:500}
  .v4-delta{
    font-size:10.5px;font-weight:700;color:var(--accent);
    letter-spacing:.1px;margin-top:2px;line-height:1.3;
  }

  /* Color variants */
  .kpi-v4.k-total   { --accent:#0F4C3A; --accent-bg:#E1ECE6; }
  .kpi-v4.k-mashaaer{ --accent:#2E8B6A; --accent-bg:#E5F2EC; }
  .kpi-v4.k-sakan   { --accent:#3879B5; --accent-bg:#E4EFF7; }
  .kpi-v4.k-naql    { --accent:#107C8C; --accent-bg:#DDEFF1; }
  .kpi-v4.k-safety  { --accent:#C58A1C; --accent-bg:#FBF1DC; }

  /* Dark mode */
  body.dark .kpi-v4{
    background:linear-gradient(135deg,var(--card) 55%,rgba(255,255,255,0.04) 145%);
    border-color:var(--border);
    box-shadow:0 1px 2px rgba(0,0,0,0.3);
  }
  body.dark .kpi-v4:hover{box-shadow:0 8px 24px rgba(0,0,0,0.4)}
  body.dark .v4-label{color:#B7BFC9}
  body.dark .v4-unit{color:var(--muted)}
  body.dark .v4-icon{background:rgba(255,255,255,0.06)}

/* ===== Middle grid: refined card design ===== */
  .grid{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:16px;align-items:stretch;}

  .card{
    background:#fff;
    border:1px solid #ECEEF0;
    border-radius:16px;
    padding:18px 20px;
    box-shadow:0 1px 2px rgba(16,24,40,0.04), 0 0 0 0 rgba(0,0,0,0);
    display:flex;flex-direction:column;gap:14px;
    transition:box-shadow .25s ease, transform .25s ease;
  }

  .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .card-title{
    font-size:15.5px;font-weight:700;color:var(--ink);text-align:right;flex:1;
    letter-spacing:.1px;
  }
  .card-title .live{
    display:inline-flex;align-items:center;gap:5px;
    font-size:10.5px;font-weight:600;color:#0F8A5F;
    background:#E6F4EE;border-radius:999px;padding:3px 8px;margin-right:8px;
    vertical-align:middle;
  }
  .card-title .live::before{
    content:"";width:5px;height:5px;border-radius:50%;background:#0F8A5F;
    animation:pulse 1.6s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.4;transform:scale(.85)}
  }

  .pill{
    display:inline-flex;align-items:center;gap:6px;
    border:1px solid #E5E7EB;border-radius:8px;
    padding:6px 11px;font-size:12px;color:#374151;cursor:pointer;background:#fff;
    font-family:inherit;font-weight:500;
    transition:border-color .15s,background .15s;
  }
  .pill:hover{border-color:#CBD5D0;background:#FAFBFB}
  .pill svg{width:11px;height:11px;stroke:#6B7280;fill:none;stroke-width:2}

  /* ===== Map card ===== */
  .map-svg{
    position:relative;border-radius:12px;overflow:hidden;flex:1;min-height:230px;
    background:linear-gradient(180deg,#F2F6F0 0%,#E9F0E5 100%);
    border:1px solid #E8EDE6;
  }
  .map-svg > svg{width:100%;height:100%;display:block}
  .legend{
    position:absolute;bottom:12px;right:12px;
    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.6);
    border-radius:10px;padding:9px 12px;font-size:11px;
    display:flex;flex-direction:column;gap:6px;
    box-shadow:0 4px 12px rgba(0,0,0,0.06);
  }
  .legend .row{display:flex;align-items:center;gap:8px;color:#374151;font-weight:500}
  .dot{width:8px;height:8px;border-radius:50%;display:inline-block;box-shadow:0 0 0 2px rgba(255,255,255,0.9)}
  .map-stamp{
    position:absolute;top:12px;left:12px;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(6px);
    border-radius:999px;padding:4px 10px;font-size:10.5px;color:#0F4C3A;font-weight:600;
    display:flex;align-items:center;gap:6px;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
  }
  .map-stamp::before{
    content:"";width:6px;height:6px;border-radius:50%;background:#0F8A5F;
    animation:pulse 1.6s ease-in-out infinite;
  }

  /* ===== Chart card ===== */
  .chart-wrap{flex:1;display:flex;flex-direction:column;gap:10px}
  .chart-stats{
    display:flex;gap:18px;justify-content:flex-end;padding-bottom:4px;
  }
  .chart-stats .stat{display:flex;align-items:center;gap:8px}
  .chart-stats .stat .sw{width:3px;height:18px;border-radius:2px}
  .chart-stats .stat .col{display:flex;flex-direction:column;line-height:1.1}
  .chart-stats .stat .name{font-size:10.5px;color:#6B7280;font-weight:500}
  .chart-stats .stat .val{font-size:14px;color:var(--ink);font-weight:700;letter-spacing:.2px}
  .chart-host{position:relative;flex:1;min-height:180px}
  .chart-host svg{width:100%;height:100%;display:block;overflow:visible}

  /* ===== Services card ===== */
  .svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;flex:1}
  .svc{
    background:#fff;border:1px solid #ECEEF0;border-radius:12px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
    padding:14px 6px;color:#374151;font-size:12.5px;font-weight:600;cursor:pointer;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    position:relative;
  }
  .svc:hover{
    transform:translateY(-1px);
    border-color:#D9E5DE;
    box-shadow:0 4px 12px rgba(15,76,58,0.08);
  }
  .svc .svc-ico{
    width:38px;height:38px;border-radius:10px;
    background:linear-gradient(135deg,#E8F1ED 0%,#F4F8F5 100%);
    display:flex;align-items:center;justify-content:center;
    transition:background .18s ease;
  }
  .svc:hover .svc-ico{background:linear-gradient(135deg,#D9E9E0 0%,#EAF2EC 100%)}
  .svc svg{width:20px;height:20px;stroke:var(--green-700);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .svc-cta{
    margin-top:8px;background:var(--green-800);color:#fff;border:0;border-radius:12px;
    padding:12px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:10px;
    transition:background .18s ease, gap .18s ease;
    box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 10px rgba(15,76,58,0.18);
  }
  .svc-cta:hover{background:var(--green-700);gap:14px}
  .svc-cta svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

  /* Bottom alert */
  .alert{
    background:#fff;border:1px solid #EEF0F2;border-radius:12px;padding:12px 16px;
    display:flex;align-items:center;gap:12px;box-shadow:0 1px 2px rgba(16,24,40,0.03);
  }
  .alert .a-ico{
    width:34px;height:34px;border-radius:50%;background:#FFF6E5;
    display:flex;align-items:center;justify-content:center;flex:none;
  }
  .alert .a-ico svg{width:18px;height:18px;stroke:#C58A1C;fill:none;stroke-width:1.8}
  .alert .a-text{flex:1;text-align:right;font-size:13px;color:#374151}
  .alert .a-text b{display:block;font-weight:700;color:var(--ink);margin-bottom:2px}
  .alert .a-btn{
    background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px 14px;
    font-family:inherit;font-size:12.5px;color:#374151;cursor:pointer;font-weight:500;
    display:flex;align-items:center;gap:6px;
  }
  .alert .a-btn svg{width:12px;height:12px;stroke:#6B7280;fill:none;stroke-width:2}

  @media (max-width: 1280px){
    .topnav{gap:16px}
    .search{width:200px}
  }
  @media (max-width: 1100px){
    .grid{grid-template-columns:1fr 1fr;}
    .grid > .card:nth-child(3){grid-column:span 2}
    .topnav a:nth-child(n+5){display:none}
  }
  @media (max-width: 900px){
    .kpis{grid-template-columns:repeat(2,1fr)}
    .grid{grid-template-columns:1fr}
    .grid > .card{grid-column:auto}
    .hero{padding:24px;min-height:260px;background-position:center}
    .hero h1{font-size:30px}
  }

  /* ===== Settings modal ===== */
  /* ===== Page system (replaces modal) ===== */
  .page[hidden]{display:none !important}
  .page-settings,
  .page-profile{
    animation: pageIn .25s ease;
  }
  @keyframes pageIn{
    from{opacity:0;transform:translateY(6px)}
    to  {opacity:1;transform:translateY(0)}
  }

  /* ===== Profile page ===== */
  .profile-avatar-section{
    display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  }
  .profile-avatar-large{
    width:88px;height:88px;border-radius:50%;
    background:linear-gradient(135deg, var(--green-700) 0%, var(--green-500) 100%);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:32px;font-weight:700;letter-spacing:.5px;
    flex:none;
    background-size:cover;background-position:center;
    box-shadow:0 4px 12px rgba(15,76,58,0.15);
  }
  .profile-avatar-large.has-img{
    color:transparent;
  }
  .profile-avatar-actions{
    display:flex;gap:8px;flex-wrap:wrap;
  }

  /* ===== Profile hero banner ===== */
  .profile-hero{
    position:relative;border-radius:20px;overflow:hidden;margin-bottom:18px;
    border:1px solid #EFF2F5;background:#fff;box-shadow:0 1px 3px rgba(16,24,40,0.04);
  }
  body.dark .profile-hero{background:var(--card);border-color:rgba(255,255,255,0.08)}
  .profile-hero-bg{
    height:92px;
    background:linear-gradient(120deg,#0B3D2E 0%,#0F4C3A 55%,#13573F 100%);
    position:relative;
  }
  .profile-hero-bg::after{content:'';position:absolute;inset-inline-end:-30px;top:-30px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,0.06)}
  .profile-hero-bg::before{content:'';position:absolute;inset-inline-end:80px;bottom:-50px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,0.05)}
  .profile-hero-inner{
    display:flex;align-items:flex-end;gap:18px;padding:0 24px 20px;margin-top:-44px;position:relative;flex-wrap:wrap;
  }
  .profile-hero .profile-avatar-large{
    width:96px;height:96px;border:4px solid #fff;box-shadow:0 6px 18px rgba(15,76,58,0.22);
  }
  body.dark .profile-hero .profile-avatar-large{border-color:var(--card)}
  .profile-hero-info{flex:1;min-width:200px;padding-bottom:2px}
  .profile-hero .profile-display-name{font-size:20px;font-weight:800;color:var(--ink);margin:0 0 2px}
  body.dark .profile-hero .profile-display-name{color:#F1F5F9}
  .profile-hero-sub{font-size:12.5px;color:#64748B;font-weight:600;margin-bottom:10px}
  body.dark .profile-hero-sub{color:#94A3B8}
  .profile-hero-actions{display:flex;gap:8px;flex-wrap:wrap}

  /* ===== Section cards with icon ===== */
  .hrp-card-head{display:flex;align-items:center;gap:11px}
  .hrp-card-ico{
    width:38px;height:38px;border-radius:10px;flex:none;
    display:flex;align-items:center;justify-content:center;
    background:#F1F5F9;color:#0F4C3A;
  }
  .hrp-card-ico svg{width:19px;height:19px}
  body.dark .hrp-card-ico{background:rgba(255,255,255,0.06);color:#5DE3B0}

  .profile-form{
    display:grid;grid-template-columns:1fr 1fr;gap:11px 18px;
  }
  @media (max-width:680px){ .profile-form{grid-template-columns:1fr} }
  .profile-form-row{
    display:flex;flex-direction:column;align-items:stretch;gap:4px;
    padding:0;border-bottom:none;
  }
  .profile-form-row:last-child{border-bottom:none}
  .profile-form-label{
    color:#5C6770;font-weight:600;font-size:11.5px;
  }
  .profile-form-input{
    width:100%;
    height:44px;
    padding:0 12px;
    border:1px solid #E5E7EB;
    border-radius:8px;
    font-family:inherit;font-size:13px;color:var(--ink);
    background:#fff;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  textarea.profile-form-input{height:auto;min-height:56px;padding:9px 12px;line-height:1.45}
  .profile-form-input:focus{
    outline:none;
    border-color:var(--green-700);
    box-shadow:0 0 0 3px rgba(15,76,58,0.08);
  }

  .profile-actions{
    display:flex;gap:10px;justify-content:flex-end;
    margin-top:8px;
  }
  .profile-actions .btn-primary,
  .profile-actions .btn-secondary{flex:none;min-width:140px}

  /* ============================================================
     NEW PROFILE DESIGN (profile2)
     ============================================================ */
  /* ===== Modern single-page profile (profile3) ===== */
  .profile3{width:100%;max-width:none;margin:0;padding-bottom:90px;display:flex;flex-direction:column;gap:11px;font-family:'IBM Plex Sans Arabic',system-ui,sans-serif}
  .profile3 input,.profile3 select,.profile3 textarea,.profile3 button,
  .profile3 .profile-form-label,.profile3 .hrp-ss-opt,.profile3 .hrp-ss-trigger{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif}
  /* Big header */
  .profile3-header{
    position:relative;border-radius:24px;overflow:hidden;
    border:1px solid #EFF2F5;
    background:#fff;
    box-shadow:0 10px 30px -12px rgba(16,24,40,0.18);
  }
  body.dark .profile3-header{background:var(--card);border-color:rgba(255,255,255,0.08)}
  /* Cover: green band only at the very top */
  .profile3-cover{
    height:116px;position:relative;
    background:var(--profile-cover, linear-gradient(120deg,#0B3D2E 0%,#0F4C3A 50%,#13715A 100%));
  }
  .profile3-cover::after{content:'';position:absolute;inset-inline-end:-40px;top:-50px;width:210px;height:210px;border-radius:50%;background:rgba(255,255,255,0.07)}
  .profile3-cover::before{content:'';position:absolute;inset-inline-end:130px;top:-30px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,0.05)}
  /* White curved wave separating green and white */
  .profile3-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:44px;display:block}
  .profile3-wave path{fill:#fff}
  body.dark .profile3-wave path{fill:var(--card)}
  /* Body sits BELOW the cover (white area). Only the avatar overlaps upward. */
  .profile3-head-body{
    display:flex;align-items:flex-start;gap:20px;padding:0 26px 22px;position:relative;flex-wrap:wrap;
  }
  .profile3-avatar-wrap{position:relative;flex:none;margin-top:-54px}
  .profile3-avatar{
    width:116px;height:116px;border:4px solid #fff;box-shadow:0 10px 26px rgba(15,76,58,0.28);font-size:40px;
  }
  body.dark .profile3-avatar{border-color:#1E2730}
  .profile3-cam{
    position:absolute;inset-inline-end:3px;bottom:3px;width:34px;height:34px;border-radius:50%;
    background:var(--green-700);color:#fff;border:3px solid #fff;display:flex;align-items:center;justify-content:center;
    cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.22);transition:background .15s ease, transform .15s ease;
  }
  .profile3-cam:hover{background:var(--green-600);transform:scale(1.06)}
  body.dark .profile3-cam{border-color:#1E2730}
  /* Name + meta in the WHITE area, aligned with the row top */
  .profile3-identity{flex:1;min-width:200px;padding-top:14px}
  .profile3-name{font-size:26px;font-weight:800;color:var(--ink);margin:0 0 6px;line-height:1.1;letter-spacing:-.3px}
  body.dark .profile3-name{color:#F8FAFC}
  .profile3-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:#64748B;font-weight:600}
  body.dark .profile3-meta{color:#94A3B8}
  .profile3-meta-dot{color:#CBD5E1}
  .profile3-remove-link{
    margin-top:10px;background:none;border:none;color:#94A3B8;font-size:11.5px;font-weight:600;
    cursor:pointer;font-family:inherit;padding:0;text-decoration:underline;display:inline-block;
  }
  .profile3-remove-link:hover{color:#DC2626}
  /* Completion ring on the opposite edge, in the white area */
  .profile3-completion{flex:none;padding-top:14px}
  .profile3-ring-box{position:relative;width:92px;height:92px}
  .profile3-ring-svg{width:92px;height:92px;transform:rotate(-90deg)}
  .profile3-ring-bg{fill:none;stroke:#E8EDF2;stroke-width:9}
  body.dark .profile3-ring-bg{stroke:rgba(255,255,255,0.10)}
  .profile3-ring-fg{fill:none;stroke:#16A34A;stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1), stroke .4s ease}
  .profile3-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
  .profile3-ring-val{font-size:19px;font-weight:800;color:var(--ink);line-height:1}
  body.dark .profile3-ring-val{color:#F8FAFC}
  .profile3-ring-lbl{font-size:8.5px;color:#94A3B8;font-weight:700}
  @media (max-width:600px){
    .profile3-head-body{flex-direction:column;align-items:center;text-align:center}
    .profile3-identity{padding-top:6px}
    .profile3-meta{justify-content:center}
    .profile3-completion{order:3;padding-top:0}
  }
  /* Stat cards */
  .profile3-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  @media (max-width:680px){ .profile3-stats{grid-template-columns:repeat(2,1fr)} }
  .profile3-stat{
    display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:18px;
    border:1px solid #EFF2F5;background:#fff;
    box-shadow:0 4px 16px -8px rgba(16,24,40,0.12);transition:transform .15s ease, box-shadow .15s ease;
  }
  .profile3-stat:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(16,24,40,0.2)}
  body.dark .profile3-stat{background:var(--card);border-color:rgba(255,255,255,0.08)}
  .profile3-stat-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#F1F5F9;color:#0F4C3A}
  .profile3-stat-ico svg{width:18px;height:18px}
  body.dark .profile3-stat-ico{background:rgba(255,255,255,0.06);color:#5DE3B0}
  .profile3-stat-val{font-size:26px;font-weight:800;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
  body.dark .profile3-stat-val{color:#F8FAFC}
  .profile3-stat-lbl{font-size:11.5px;color:#64748B;font-weight:600}
  body.dark .profile3-stat-lbl{color:#94A3B8}
  /* Section cards */
  .profile3-card{
    border-radius:20px;padding:22px 24px;
    border:1px solid #EFF2F5;background:#fff;
    box-shadow:0 6px 22px -12px rgba(16,24,40,0.14);
  }
  body.dark .profile3-card{background:var(--card);border-color:rgba(255,255,255,0.08)}
  .profile3-card-head{display:flex;align-items:center;gap:11px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid rgba(15,23,42,0.07)}
  body.dark .profile3-card-head{border-bottom-color:rgba(255,255,255,0.08)}
  .profile3-card-head h3{margin:0;font-size:16px;font-weight:700;color:var(--ink)}
  body.dark .profile3-card-head h3{color:#F1F5F9}
  /* Sticky action bar */
  .profile2-actionbar{
    position:sticky;bottom:0;z-index:5;display:flex;gap:10px;justify-content:flex-end;
    margin-top:4px;padding:14px 0;background:linear-gradient(to top, var(--bg) 70%, transparent);
  }
  .profile2-actionbar .btn-primary,
  .profile2-actionbar .btn-secondary{flex:none;min-width:150px}

  body.dark .profile-form-row{border-bottom-color:var(--border)}
  body.dark .profile-form-label{color:#9CA3AF}
  body.dark .profile-form-input{
    background:var(--card);border-color:var(--border);color:var(--ink);
  }
  body.dark .profile-form-input:focus{
    border-color:var(--green-500);
    box-shadow:0 0 0 3px rgba(15,122,92,0.18);
  }

  /* Avatar with custom image */
  .avatar.has-img{
    background-size:cover;background-position:center;
    color:transparent;
    background-image:var(--user-avatar-bg, none);
  }

  @media (max-width:640px){
    .profile-form-row{grid-template-columns:1fr;gap:6px}
    .profile-actions{justify-content:stretch;flex-direction:column}
    .profile-actions .btn-primary,
    .profile-actions .btn-secondary{min-width:0}
  }

  .settings-header{
    display:flex;align-items:center;justify-content:flex-start;gap:14px;
    margin-bottom:22px;padding-bottom:18px;
    border-bottom:1px solid var(--border);
  }
  .settings-header .settings-title-wrap{flex:1;text-align:right;align-items:flex-start}
  [dir="ltr"] .settings-header .settings-title-wrap{text-align:left}
  .settings-back{
    display:inline-flex;align-items:center;gap:6px;
    background:#fff;border:1px solid var(--border);border-radius:10px;
    padding:8px 14px;font-family:inherit;font-size:13px;font-weight:600;
    color:var(--ink);cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
  }
  .settings-back:hover{background:var(--green-50);border-color:var(--green-700);color:var(--green-700)}
  body.dark .settings-back{background:var(--card);border-color:var(--border);color:var(--ink)}
  body.dark .settings-back:hover{background:rgba(46,139,106,0.15);border-color:var(--green-500);color:#5DD8A0}

  .settings-title{
    font-size:24px;font-weight:800;color:var(--ink);
    letter-spacing:.3px;line-height:1.2;
  }
  body.dark .settings-title{color:var(--ink)}
  .settings-title-wrap{display:flex;flex-direction:column;gap:2px}
  .settings-subtitle{font-size:13px;color:var(--muted);font-weight:500;line-height:1.3}
  body.dark .settings-subtitle{color:#9CA3AF}

  /* Tabs */
  .settings-tabs{
    display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;
    background:#F1F4F2;border-radius:12px;padding:5px;
    width:fit-content;max-width:100%;
  }
  body.dark .settings-tabs{background:#1E2A36}
  .settings-tab{
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 16px;border-radius:9px;
    border:0;background:transparent;cursor:pointer;
    font-family:inherit;font-size:13.5px;font-weight:600;
    color:#5C6770;
    transition:background .18s ease, color .18s ease, box-shadow .18s ease;
  }
  .settings-tab svg{width:16px;height:16px;flex:none}
  .settings-tab:hover{color:var(--green-800)}
  .settings-tab.active{
    background:#fff;color:var(--green-800);
    box-shadow:0 1px 3px rgba(0,0,0,0.08);
  }
  body.dark .settings-tab{color:#9CA3AF}
  body.dark .settings-tab:hover{color:#E5E7EB}
  body.dark .settings-tab.active{background:var(--card);color:#E5E7EB;box-shadow:0 1px 3px rgba(0,0,0,0.4)}

  .settings-tab-panel{animation:tabIn .25s ease}
  .settings-tab-panel[hidden]{display:none}
  @keyframes tabIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

  /* ====== Legacy settings-card (used by the profile page) ======
     Plain card without colored icon badges — clean & minimal. */
  .settings-card{
    background:#fff;border:1px solid #ECEEF0;border-radius:12px;
    padding:16px 18px;margin-bottom:12px;
    box-shadow:0 1px 2px rgba(16,24,40,0.03);
  }
  body.dark .settings-card{background:var(--card);border-color:var(--border)}
  .settings-card-head{
    margin-bottom:12px;
    padding-bottom:12px;
    border-bottom:1px dashed var(--border);
  }
  .settings-card-text h3{
    font-size:14px;font-weight:700;color:var(--ink);
    margin:0 0 3px;letter-spacing:.1px;
  }
  .settings-card-text p{
    font-size:12px;color:var(--muted);margin:0;line-height:1.5;
  }
  body.dark .settings-card-text p{color:#9CA3AF}
  .settings-card-body{display:flex;flex-direction:column;gap:10px}
  .settings-actions{display:flex;gap:8px;flex-wrap:wrap}

  /* ====== Settings — compact grid layout ======
     Cards arranged in a grid (2-3 per row) instead of stretching full-width vertically. */
  .settings-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
    gap:12px;
  }

  /* Compact settings card (.sc) — horizontal layout: thumb on side + info+actions */
  .sc{
    background:#fff;
    border:1px solid #ECEEF0;
    border-radius:12px;
    padding:12px;
    display:flex;flex-direction:row;gap:12px;
    box-shadow:0 1px 2px rgba(16,24,40,0.03);
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .sc:hover{
    border-color:#C7DED1;
    box-shadow:0 4px 12px rgba(15,76,58,0.06);
  }
  body.dark .sc{background:var(--card);border-color:var(--border)}
  body.dark .sc:hover{border-color:rgba(93,216,160,0.30);box-shadow:0 4px 12px rgba(0,0,0,0.30)}

  .sc-thumb-col{
    flex-shrink:0;
    width:100px;
    display:flex;align-items:center;justify-content:center;
  }
  .sc-thumb{
    width:100px;height:64px;
    border-radius:8px;
    background-size:cover;background-position:center;
    background-color:#E8EDE6;
    border:1px solid #E5E7EB;
  }
  /* Override modal-thumb when used inside .sc-thumb-col */
  .sc-thumb.modal-thumb{aspect-ratio:auto;max-width:100px;width:100px;height:64px}
  .sc-thumb.modal-thumb--logo{
    background-color:var(--green-700);
    background-size:contain;background-repeat:no-repeat;background-position:center;
    width:100px;height:64px;
  }
  .sc-thumb.modal-thumb--compact-logo{
    background-color:var(--green-700);
    background-size:contain;background-repeat:no-repeat;background-position:center;
    width:64px;height:64px;border-radius:10px;
  }
  .sc-thumb.modal-thumb--watermark{
    background-color:var(--green-700);
    background-size:contain;background-repeat:no-repeat;background-position:center;
    width:100px;height:64px;
  }

  .sc-info-col{
    flex:1;min-width:0;
    display:flex;flex-direction:column;justify-content:center;gap:3px;
  }
  .sc-title{
    font-size:13px;font-weight:700;color:var(--ink);
    margin:0;line-height:1.25;
  }
  .sc-desc{
    font-size:11px;color:var(--muted);
    margin:0;line-height:1.45;
  }
  body.dark .sc-desc{color:#9CA3AF}
  .sc-actions{
    display:flex;gap:6px;margin-top:6px;
  }

  /* Small button variant for compact cards */
  .btn-sm{
    padding:5px 10px !important;
    font-size:11px !important;
    border-radius:6px !important;
  }

  /* ====== Bulletin Editors — compact horizontal panels ====== */
  .bulletin-editors{
    display:flex;flex-direction:column;gap:12px;
  }
  .be{
    background:var(--bg-soft,#F8FAF9);
    border:1px solid var(--border);
    border-radius:14px;
    padding:16px 18px;
  }
  body.dark .be{background:rgba(255,255,255,0.02);border-color:var(--border)}
  .be-head{
    display:flex;align-items:center;gap:9px;
    margin-bottom:10px;
    padding-bottom:9px;
    border-bottom:1px dashed var(--border);
  }
  .be-head .be-num{flex:1}
  .be-head .be-last{flex-shrink:0}
  .be-head .be-reset{flex-shrink:0;margin-inline-start:4px}
  .be-dot{
    width:9px;height:9px;border-radius:3px;
    background:var(--c, #2EC48C);
    box-shadow:0 0 8px var(--c, #2EC48C);
  }
  .be-num{
    font-size:13px;font-weight:700;color:var(--ink);
    margin:0;letter-spacing:.2px;
  }
  /* Last-update label inside editor header */
  .be-last{
    font-size:10.5px;color:#9CA3AF;font-weight:500;
    margin-inline-start:8px;
    white-space:nowrap;
  }
  .be-last strong{color:#6B7280;font-weight:600}
  body.dark .be-last{color:#6B7280}
  body.dark .be-last strong{color:#9CA3AF}
  .be-reset{
    padding:4px 10px;
    font-size:10.5px;font-weight:500;
    background:transparent;
    border:1px solid #E5E7EB;
    border-radius:6px;
    color:#6B7280;
    cursor:pointer;
    transition:all .15s ease;
  }
  .be-reset:hover{
    background:#F9FAFB;
    color:#111827;
    border-color:#D1D5DB;
  }
  body.dark .be-reset{border-color:rgba(255,255,255,0.10);color:#9CA3AF}
  body.dark .be-reset:hover{background:rgba(255,255,255,0.05);color:#E5E7EB}

  .be-body{
    display:grid;
    grid-template-columns:130px 1fr;
    gap:14px;
  }
  .be-img-col{
    display:flex;flex-direction:column;gap:6px;align-items:stretch;
  }
  .be-img-preview{
    width:130px;height:78px;
    border-radius:8px;
    background:#F3F4F6;
    background-size:cover;background-position:center;
    border:1px solid #E5E7EB;
    position:relative;
    overflow:hidden;
  }
  body.dark .be-img-preview{background-color:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.08)}
  .be-img-preview::before{
    /* Default placeholder icon when no image */
    content:'';
    position:absolute;inset:0;
    background:
      linear-gradient(135deg, transparent 0%, rgba(0,0,0,0.04) 100%),
      url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center/28px no-repeat;
    opacity:.5;
    pointer-events:none;
  }
  .be-img-preview.has-image::before{opacity:0}
  .be-img-btn{width:100%}

  .be-form-col{
    display:flex;flex-direction:column;gap:8px;
    min-width:0;
  }

  /* Form fields */
  .ff{display:flex;flex-direction:column;gap:3px;min-width:0}
  .ff label{
    font-size:10px;font-weight:600;
    color:#6B7280;letter-spacing:.3px;
    text-transform:uppercase;
  }
  body.dark .ff label{color:#9CA3AF}
  .ff input[type="text"],
  .ff textarea,
  .ff select{
    width:100%;
    padding:7px 10px;
    font-size:12px;font-family:inherit;
    color:var(--ink);
    background:#F9FAFB;
    border:1px solid #E5E7EB;
    border-radius:7px;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
    box-sizing:border-box;
    line-height:1.5;
  }
  body.dark .ff input[type="text"],
  body.dark .ff textarea,
  body.dark .ff select{
    background:rgba(255,255,255,0.04);
    border-color:rgba(255,255,255,0.10);
    color:#E5E7EB;
  }
  .ff textarea{resize:vertical;min-height:42px;font-family:inherit}
  .ff input[type="text"]:focus,
  .ff textarea:focus,
  .ff select:focus{
    outline:none;
    background:#fff;
    border-color:var(--green-500, #2EC48C);
    box-shadow:0 0 0 3px rgba(46,196,140,0.10);
  }
  body.dark .ff input[type="text"]:focus,
  body.dark .ff textarea:focus,
  body.dark .ff select:focus{
    background:rgba(255,255,255,0.06);
  }
  .ff-row{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
  }

  /* Full-width settings card (spans the grid) */
  .sc--full{grid-column:1 / -1}
  .sc-slider-row{
    display:flex;align-items:center;gap:10px;
    margin-top:8px;
  }
  .sc-slider-label{
    font-size:11px;font-weight:500;color:#6B7280;flex-shrink:0;
    min-width:90px;
  }
  body.dark .sc-slider-label{color:#9CA3AF}
  .sc-slider{flex:1;height:4px;accent-color:#0F7A5C}
  .sc-slider-val{
    font-size:11px;font-weight:600;color:var(--green-700);
    min-width:36px;text-align:end;font-variant-numeric:tabular-nums;
  }
  body.dark .sc-slider-val{color:#5DD8A0}

  /* Slide manager header */
  .slide-mgr-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin-top:18px;margin-bottom:10px;
    padding-top:14px;
    border-top:1px dashed var(--border);
  }
  .slide-mgr-title{
    font-size:14px;font-weight:700;color:var(--ink);
    margin:0;display:flex;align-items:center;gap:8px;
  }
  .slide-mgr-count{
    font-size:11px;font-weight:500;color:#6B7280;
    padding:2px 8px;background:#F3F4F6;border-radius:99px;
  }
  body.dark .slide-mgr-count{background:rgba(255,255,255,0.06);color:#9CA3AF}
  .slide-mgr-actions{
    display:flex;align-items:center;gap:10px;
  }
  .slide-autoplay-toggle{
    display:inline-flex;align-items:center;gap:6px;
    font-size:11.5px;font-weight:500;color:#6B7280;
    cursor:pointer;user-select:none;
  }
  .slide-autoplay-toggle input{accent-color:#0F7A5C;cursor:pointer}
  body.dark .slide-autoplay-toggle{color:#9CA3AF}

  /* Slide list */
  .slide-list{
    display:flex;flex-direction:column;gap:10px;
  }
  .slide-editor{
    background:var(--bg-soft,#F8FAF9);
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px 16px;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .slide-editor.is-active{
    border-color:#5DD8A0;
    box-shadow:0 0 0 3px rgba(46,196,140,0.12);
    background:var(--card,#fff);
  }
  body.dark .slide-editor{background:rgba(255,255,255,0.02);border-color:var(--border)}
  body.dark .slide-editor.is-active{border-color:#5DD8A0;box-shadow:0 0 0 3px rgba(46,196,140,0.18)}
  .slide-editor-head{
    display:flex;align-items:center;gap:9px;
    margin-bottom:10px;
    padding-bottom:9px;
    border-bottom:1px dashed var(--border);
  }
  .slide-num{
    width:24px;height:24px;border-radius:7px;
    background:#E8F7F1;color:#0F7A5C;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:700;
    flex-shrink:0;
  }
  body.dark .slide-num{background:rgba(46,196,140,0.18);color:#5DD8A0}
  .slide-name{
    flex:1;font-size:13px;font-weight:700;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .slide-active-pill{
    font-size:10px;font-weight:600;color:#0F7A5C;
    padding:2px 8px;background:#E8F7F1;border-radius:99px;
    display:inline-flex;align-items:center;gap:4px;
  }
  body.dark .slide-active-pill{background:rgba(46,196,140,0.18);color:#5DD8A0}
  .slide-active-pill::before{
    content:'';width:5px;height:5px;border-radius:50%;background:currentColor;
  }
  .slide-delete{
    width:26px;height:26px;border-radius:6px;
    background:transparent;border:1px solid #E5E7EB;
    color:#9CA3AF;
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all .15s ease;
    flex-shrink:0;
  }
  .slide-delete svg{width:13px;height:13px}
  .slide-delete:hover{
    background:#FEE2E2;border-color:#FCA5A5;color:#DC2626;
  }
  body.dark .slide-delete{border-color:rgba(255,255,255,0.10);color:#9CA3AF}
  body.dark .slide-delete:hover{background:rgba(220,38,38,0.16);border-color:#7F1D1D;color:#FCA5A5}

  .slide-editor-body{
    display:grid;
    grid-template-columns:140px 1fr;
    gap:14px;
  }
  .slide-img-col{display:flex;flex-direction:column;gap:6px;align-items:stretch}
  .slide-img-preview{
    width:140px;height:84px;
    border-radius:8px;
    background:#F3F4F6;
    background-size:cover;background-position:center;
    border:1px solid #E5E7EB;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    transition:border-color .2s ease;
  }
  body.dark .slide-img-preview{background-color:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.08)}
  .slide-img-preview:hover{border-color:#5DD8A0}
  .slide-img-preview::before{
    content:'';
    position:absolute;inset:0;
    background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center/30px no-repeat;
    opacity:.45;pointer-events:none;
  }
  .slide-img-preview.has-image::before{opacity:0}
  .slide-form-col{display:flex;flex-direction:column;gap:8px;min-width:0}
  .slide-confirm-row{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-top:4px;
    padding-top:8px;
    border-top:1px dashed var(--border);
  }

  @media (max-width:720px){
    .slide-editor-body{grid-template-columns:1fr}
    .slide-img-col{flex-direction:row;align-items:center}
    .slide-img-preview{width:100px;height:64px;flex-shrink:0}
  }

  /* ============================================================
     LOADING STATE — content stays hidden until dataStore loads,
     so the user never sees the defaults flash and get replaced.
     `body.data-loaded` class is added by dataStore after first load.
     ============================================================ */
  /* Hide the app from the very first paint until data has loaded — not just
     after `is-authenticated` is set. This closes the brief window on refresh
     where the default profile (— / ·) was visible before the session check ran. */
  body:not(.data-loaded) .app{
    opacity:0;
    pointer-events:none;
  }
  body.data-loaded .app{
    opacity:1;
    transition:opacity .4s ease;
  }
  /* Centered spinner shown while data loads */
  .app-loader{
    position:fixed;inset:0;
    z-index:5000;
    display:none;
    align-items:center;
    justify-content:center;
    background:var(--bg, #F4F5F7);
    pointer-events:none;
  }
  body:not(.data-loaded) .app-loader{display:flex}
  .app-loader-inner{
    display:flex;flex-direction:column;align-items:center;gap:14px;
  }
  .app-loader-spinner{
    width:42px;height:42px;
    border:3.5px solid rgba(15,122,92,0.15);
    border-top-color:#0F7A5C;
    border-radius:50%;
    animation:app-spin .9s linear infinite;
  }
  .app-loader-text{
    font-size:12.5px;
    color:#6B7280;
    letter-spacing:.3px;
    font-weight:500;
  }
  @keyframes app-spin{to{transform:rotate(360deg)}}

  /* Custom loading logo (uploaded from Settings) — replaces spinner + text */
  .app-loader-logo{
    max-width:160px; max-height:120px; width:auto; height:auto;
    object-fit:contain;
    animation:app-logo-pulse 1.4s ease-in-out infinite;
  }
  .app-loader-inner.has-logo .app-loader-spinner,
  .app-loader-inner.has-logo .app-loader-text{ display:none; }
  @keyframes app-logo-pulse{
    0%,100%{ opacity:.55; transform:scale(0.97); }
    50%{ opacity:1; transform:scale(1.03); }
  }

  /* Page-transition loader — covers content instantly, fades out only */
  .page-loader{
    position:fixed;inset:0;
    z-index:4000;
    display:flex;align-items:center;justify-content:center;
    background:var(--bg, #F4F5F7);
    opacity:0;visibility:hidden;
    pointer-events:none;
  }
  /* Shown: instant (no fade-in so the page never flashes through) */
  .page-loader.show{opacity:1;visibility:visible}
  /* Fading out: smooth */
  .page-loader.fading{
    opacity:0;visibility:visible;
    transition:opacity .14s ease;
  }
  body.dark .page-loader{background:var(--bg, #121821)}

  /* ============================================================
     ADMIN-ONLY CONTROLS — hidden for regular users (body.is-admin is added
     by dataStore.loadAll() when the user's profile.role === 'admin')
     ============================================================ */
  body:not(.is-admin) #settings-nav,
  body:not(.is-admin) #menu-settings,
  body:not(.is-admin) .be-img-btn,
  body:not(.is-admin) .be-confirm,
  body:not(.is-admin) .be-reset,
  body:not(.is-admin) .be-img-preview,
  body:not(.is-admin) .be-lang-grid input,
  body:not(.is-admin) .be-lang-grid textarea,
  body:not(.is-admin) .slide-img-btn,
  body:not(.is-admin) .slide-confirm,
  body:not(.is-admin) .slide-delete,
  body:not(.is-admin) #slide-add-btn,
  body:not(.is-admin) #page-bg-upload,
  body:not(.is-admin) #page-bg-clear,
  body:not(.is-admin) #page-bg-opacity,
  body:not(.is-admin) #change-btn,
  body:not(.is-admin) #reset-btn,
  body:not(.is-admin) #change-logo-btn,
  body:not(.is-admin) #reset-logo-btn,
  body:not(.is-admin) #change-compact-logo-btn,
  body:not(.is-admin) #reset-compact-logo-btn,
  body:not(.is-admin) #change-watermark-btn,
  body:not(.is-admin) #reset-watermark-btn,
  body:not(.is-admin) .admin-only-inline{
    display:none !important;
  }
  body:not(.is-admin) .be-lang-grid input,
  body:not(.is-admin) .be-lang-grid textarea{
    pointer-events:none;
    background:#F9FAFB !important;
  }

  /* ============================================================
     AUTH SCREEN — Login / Signup / Password reset
     ============================================================ */

  /* Always honour the [hidden] HTML attribute, regardless of display rules.
     Without this, .auth-error { display:flex } shows the empty error box. */
  [hidden]{ display:none !important; }

  .auth-screen{
    position:fixed;inset:0;
    z-index:9999;
    display:flex;
    background:#F4F7F5;
    overflow:hidden;
    opacity:1;
  }
  /* Safety net: once authenticated, the auth screen must never block the app,
     even if a JS fade/hide step is interrupted. */
  body.is-authenticated .auth-screen{ display:none !important; opacity:0 !important; pointer-events:none !important; visibility:hidden !important; }
  /* Fade in only when actually unhidden via JS (not on initial page load) */
  .auth-screen:not([hidden]){
    animation:authFadeIn .35s ease;
    animation-fill-mode:forwards;
  }
  @keyframes authFadeIn{
    from{opacity:0}
    to{opacity:1}
  }

  /* ===== Animated background ===== */
  .auth-bg{
    position:absolute;inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
  }
  .auth-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    opacity:0.55;
    animation:blobFloat 14s ease-in-out infinite;
  }
  .auth-blob-1{
    width:520px;height:520px;
    background:radial-gradient(circle, #5DE3B0 0%, transparent 70%);
    top:-180px;left:-160px;
    animation-delay:0s;
  }
  .auth-blob-2{
    width:600px;height:600px;
    background:radial-gradient(circle, #0F7A5C 0%, transparent 70%);
    bottom:-220px;right:-180px;
    animation-delay:-5s;
  }
  .auth-blob-3{
    width:400px;height:400px;
    background:radial-gradient(circle, #C9A86A 0%, transparent 70%);
    top:50%;left:40%;
    opacity:0.30;
    animation-delay:-9s;
  }
  @keyframes blobFloat{
    0%, 100%{transform:translate(0, 0) scale(1)}
    33%     {transform:translate(40px, -30px) scale(1.05)}
    66%     {transform:translate(-30px, 40px) scale(0.95)}
  }
  .auth-grid{
    position:absolute;inset:0;
    background-image:
      linear-gradient(rgba(15,122,92,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,122,92,0.05) 1px, transparent 1px);
    background-size:46px 46px;
    mask-image:radial-gradient(ellipse at center, #000 0%, transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse at center, #000 0%, transparent 75%);
  }

  /* ===== Brand side panel ===== */
  .auth-side{
    position:relative;
    z-index:1;
    flex:1;
    max-width:540px;
    background:linear-gradient(135deg, #0B5D46 0%, #0F7A5C 60%, #14906F 100%);
    color:#fff;
    display:flex;
    align-items:center;
    padding:48px;
    overflow:hidden;
  }
  /* Decorative texture on the side panel */
  .auth-side::before{
    content:'';
    position:absolute;inset:0;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(255,255,255,0.10) 0%, transparent 40%),
      radial-gradient(circle at 80% 70%, rgba(201,168,106,0.18) 0%, transparent 40%);
    pointer-events:none;
  }
  .auth-side::after{
    content:'';
    position:absolute;inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size:32px 32px;
    mask-image:linear-gradient(to bottom, transparent 0%, #000 50%, transparent 100%);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 50%, transparent 100%);
    pointer-events:none;
  }
  .auth-side-inner{
    position:relative;z-index:1;
    width:100%;
    display:flex;flex-direction:column;gap:48px;
  }

  .auth-brand{
    display:flex;align-items:center;gap:14px;
  }
  .auth-brand-mark{
    width:64px;height:64px;
    filter:drop-shadow(0 8px 16px rgba(0,0,0,0.25));
  }
  .auth-brand-text{display:flex;flex-direction:column;gap:4px}
  .auth-brand-title{
    font-size:22px;font-weight:700;letter-spacing:.2px;
    margin:0;
  }
  .auth-brand-tag{
    font-size:13px;font-weight:400;
    color:rgba(255,255,255,0.78);
    margin:0;
  }

  .auth-features{
    display:flex;flex-direction:column;gap:20px;
    margin-block:auto;
  }
  .auth-feature{
    display:flex;align-items:flex-start;gap:14px;
    padding:14px 16px;
    background:rgba(255,255,255,0.07);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.10);
    border-radius:14px;
    transition:transform .3s ease, background .3s ease;
  }
  .auth-feature:hover{
    transform:translateX(6px);
    background:rgba(255,255,255,0.10);
  }
  html[dir="rtl"] .auth-feature:hover{transform:translateX(-6px)}
  .auth-feature-ico{
    width:38px;height:38px;flex-shrink:0;
    border-radius:10px;
    background:rgba(255,255,255,0.12);
    color:#A9F0D1;
    display:flex;align-items:center;justify-content:center;
  }
  .auth-feature-ico svg{width:19px;height:19px}
  .auth-feature div{display:flex;flex-direction:column;gap:2px}
  .auth-feature strong{
    font-size:14px;font-weight:600;color:#fff;
  }
  .auth-feature span{
    font-size:12px;color:rgba(255,255,255,0.65);line-height:1.5;
  }

  .auth-side-footer{
    display:flex;align-items:center;gap:8px;
    font-size:11.5px;color:rgba(255,255,255,0.55);
    letter-spacing:.3px;
  }
  .auth-side-dot{opacity:.4}

  /* ===== Main side (form) ===== */
  .auth-main{
    position:relative;z-index:1;
    flex:1;
    display:flex;align-items:center;justify-content:center;
    padding:32px;
    overflow-y:auto;
  }
  .auth-card{
    position:relative;
    width:100%;max-width:440px;
    background:#fff;
    border-radius:20px;
    padding:36px 36px 32px;
    box-shadow:
      0 25px 60px -15px rgba(11,93,70,0.18),
      0 10px 25px rgba(0,0,0,0.05),
      0 0 0 1px rgba(11,93,70,0.04);
  }

  /* Language toggle */
  .auth-lang-toggle{
    position:absolute;
    top:16px;
    inset-inline-end:16px;
    display:inline-flex;align-items:center;gap:5px;
    padding:6px 11px;
    font-size:11px;font-weight:500;
    color:#6B7280;
    background:#F9FAFB;
    border:1px solid #E5E7EB;
    border-radius:99px;
    cursor:pointer;
    transition:all .15s ease;
    font-family:inherit;
  }
  .auth-lang-toggle:hover{
    background:#F3F4F6;
    color:#111827;
    border-color:#D1D5DB;
  }
  .auth-lang-toggle svg{width:13px;height:13px}

  /* Mobile-only brand mark in the card */
  .auth-card-brand{
    display:none;
    margin-bottom:20px;
    text-align:center;
  }
  .auth-card-brand svg{width:48px;height:48px}

  /* ===== Tabs ===== */
  .auth-tabs{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    margin-bottom:28px;
    border-bottom:1px solid #E5E7EB;
  }
  .auth-tab{
    background:none;border:none;cursor:pointer;
    padding:12px 0;
    font-family:inherit;font-size:13.5px;font-weight:600;
    color:#9CA3AF;
    transition:color .2s ease;
    position:relative;
    z-index:1;
  }
  .auth-tab:hover{color:#4B5563}
  .auth-tab.active{color:#0F7A5C}
  .auth-tab-indicator{
    position:absolute;
    bottom:-1px;
    height:2.5px;
    background:linear-gradient(90deg, #0F7A5C, #2EC48C);
    border-radius:2px 2px 0 0;
    width:50%;
    transition:transform .35s cubic-bezier(.4,.0,.2,1);
    box-shadow:0 0 8px rgba(46,196,140,0.40);
  }
  html[dir="ltr"] .auth-tab-indicator{left:0}
  html[dir="rtl"] .auth-tab-indicator{right:0}
  .auth-tabs[data-active="signup"] .auth-tab-indicator{
    transform:translateX(-100%);
  }
  html[dir="ltr"] .auth-tabs[data-active="signup"] .auth-tab-indicator{
    transform:translateX(100%);
  }

  /* ===== Panels ===== */
  .auth-panel{
    animation:authPanelIn .35s ease;
  }
  @keyframes authPanelIn{
    from{opacity:0; transform:translateY(8px)}
    to  {opacity:1; transform:translateY(0)}
  }
  .auth-panel-head{margin-bottom:22px}
  .auth-panel-head h2{
    font-size:22px;font-weight:700;color:#111827;
    margin:0 0 5px;letter-spacing:.1px;
  }
  .auth-panel-head p{
    font-size:13px;color:#6B7280;
    margin:0;line-height:1.55;
  }

  /* ===== Form ===== */
  .auth-form{
    display:flex;flex-direction:column;gap:16px;
  }
  .auth-field{display:flex;flex-direction:column;gap:6px}
  .auth-field label{
    font-size:11.5px;font-weight:600;
    color:#374151;letter-spacing:.2px;
  }
  .auth-field-row{
    display:flex;align-items:center;justify-content:space-between;
  }

  .auth-input-wrap{
    position:relative;
    display:flex;align-items:center;
  }
  .auth-input-ico{
    position:absolute;
    inset-inline-start:13px;
    width:17px;height:17px;
    color:#9CA3AF;
    pointer-events:none;
  }
  .auth-input-wrap input{
    width:100%;
    padding:12px 14px 12px 40px;  /* extra padding for the icon */
    font-family:inherit;font-size:13.5px;
    color:#111827;
    background:#F9FAFB;
    border:1.5px solid #E5E7EB;
    border-radius:10px;
    transition:all .15s ease;
    outline:none;
  }
  html[dir="rtl"] .auth-input-wrap input{
    padding:12px 40px 12px 14px;
  }
  .auth-input-wrap input:hover{border-color:#D1D5DB}
  .auth-input-wrap input:focus{
    background:#fff;
    border-color:#2EC48C;
    box-shadow:0 0 0 4px rgba(46,196,140,0.12);
  }
  .auth-input-wrap input:focus + .auth-eye,
  .auth-input-wrap input:not(:placeholder-shown) ~ .auth-eye{opacity:1}
  .auth-input-wrap input::placeholder{color:#9CA3AF}

  /* Show/hide password button */
  .auth-eye{
    position:absolute;
    inset-inline-end:10px;
    width:30px;height:30px;
    background:none;border:none;
    color:#9CA3AF;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    border-radius:6px;
    transition:all .15s ease;
    opacity:.65;
  }
  .auth-eye:hover{
    background:rgba(0,0,0,0.04);
    color:#4B5563;
    opacity:1;
  }
  .auth-eye svg{width:16px;height:16px}
  .auth-eye.is-visible svg{color:#0F7A5C}

  /* Checkbox */
  .auth-check{
    display:flex;align-items:center;gap:9px;
    font-size:12.5px;color:#4B5563;
    cursor:pointer;user-select:none;
    line-height:1.4;
  }
  .auth-check input{
    width:16px;height:16px;flex-shrink:0;
    accent-color:#0F7A5C;
    cursor:pointer;
    margin:0;
  }

  /* Inline link */
  .auth-link{
    background:none;border:none;padding:0;
    color:#0F7A5C;font-size:12px;font-weight:600;
    font-family:inherit;
    cursor:pointer;
    transition:color .15s ease;
  }
  .auth-link:hover{color:#0B5D46;text-decoration:underline}
  .auth-link-strong{font-size:12.5px}

  /* Password strength meter */
  .auth-strength{
    display:flex;align-items:center;gap:9px;
    margin-top:5px;
    font-size:10.5px;
  }
  .auth-strength-bar{
    flex:1;height:4px;
    background:#E5E7EB;
    border-radius:2px;
    overflow:hidden;
  }
  .auth-strength-bar span{
    display:block;height:100%;
    width:0;
    background:#EF4444;
    border-radius:2px;
    transition:width .3s ease, background .3s ease;
  }
  .auth-strength[data-level="1"] .auth-strength-bar span{width:25%; background:#EF4444}
  .auth-strength[data-level="2"] .auth-strength-bar span{width:50%; background:#F59E0B}
  .auth-strength[data-level="3"] .auth-strength-bar span{width:75%; background:#2EC48C}
  .auth-strength[data-level="4"] .auth-strength-bar span{width:100%;background:#0F7A5C}
  .auth-strength-label{color:#9CA3AF;font-weight:500;flex-shrink:0}
  .auth-strength[data-level="1"] .auth-strength-label{color:#EF4444}
  .auth-strength[data-level="2"] .auth-strength-label{color:#F59E0B}
  .auth-strength[data-level="3"] .auth-strength-label{color:#2EC48C}
  .auth-strength[data-level="4"] .auth-strength-label{color:#0F7A5C}

  /* Error message */
  .auth-error{
    display:flex;align-items:flex-start;gap:8px;
    padding:10px 13px;
    background:#FEF2F2;
    border:1px solid #FCA5A5;
    border-radius:9px;
    color:#B91C1C;
    font-size:12.5px;
    line-height:1.5;
    animation:authShake .4s ease;
  }
  @keyframes authShake{
    0%, 100%{transform:translateX(0)}
    20%, 60%{transform:translateX(-4px)}
    40%, 80%{transform:translateX(4px)}
  }

  /* Success message */
  .auth-success{
    display:flex;align-items:center;gap:9px;
    padding:10px 13px;
    background:#ECFDF5;
    border:1px solid #6EE7B7;
    border-radius:9px;
    color:#047857;
    font-size:12.5px;
    line-height:1.5;
  }
  .auth-success svg{width:17px;height:17px;flex-shrink:0}

  /* Submit button */
  .auth-submit{
    position:relative;
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 20px;
    font-family:inherit;font-size:13.5px;font-weight:600;
    color:#fff;
    background:linear-gradient(135deg, #0F7A5C 0%, #14906F 100%);
    border:none;
    border-radius:10px;
    cursor:pointer;
    transition:all .2s ease;
    box-shadow:0 4px 12px rgba(15,122,92,0.30);
    overflow:hidden;
    margin-top:6px;
  }
  .auth-submit::before{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(135deg, #14906F 0%, #19A47D 100%);
    opacity:0;transition:opacity .25s ease;
  }
  .auth-submit > *{position:relative;z-index:1}
  .auth-submit:hover::before{opacity:1}
  .auth-submit:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(15,122,92,0.40);
  }
  .auth-submit:active{transform:translateY(0)}
  .auth-submit:focus-visible{outline:3px solid rgba(46,196,140,0.30);outline-offset:2px}
  .auth-submit:disabled{
    opacity:.7;cursor:not-allowed;
    transform:none !important;
  }
  .auth-submit-arrow{width:16px;height:16px;transition:transform .25s ease}
  html[dir="rtl"] .auth-submit-arrow{transform:scaleX(-1)}
  .auth-submit:hover .auth-submit-arrow{transform:translateX(3px)}
  html[dir="rtl"] .auth-submit:hover .auth-submit-arrow{transform:scaleX(-1) translateX(3px)}

  /* Loading spinner inside button */
  .auth-spinner{
    width:16px;height:16px;
    border:2px solid rgba(255,255,255,0.30);
    border-top-color:#fff;
    border-radius:50%;
    animation:authSpin .8s linear infinite;
    display:none;
  }
  @keyframes authSpin{to{transform:rotate(360deg)}}
  .auth-submit.is-loading .auth-submit-text,
  .auth-submit.is-loading .auth-submit-arrow{display:none}
  .auth-submit.is-loading .auth-spinner{display:block}

  /* Switch line at the bottom */
  .auth-switch{
    text-align:center;
    font-size:12.5px;color:#6B7280;
    margin:6px 0 0;
  }
  .auth-switch button{margin-inline-start:4px}

  /* ===== Responsive ===== */
  @media (max-width:920px){
    .auth-side{display:none}
    .auth-card-brand{display:block}
    .auth-main{padding:20px}
    .auth-card{padding:28px 24px 24px;border-radius:18px}
  }
  @media (max-width:480px){
    .auth-card{padding:24px 20px 22px;border-radius:16px}
    .auth-panel-head h2{font-size:19px}
    .auth-panel-head p{font-size:12.5px}
    .auth-feature{padding:12px 14px}
  }

  /* ==================================================================
     LOGIN REDESIGN — video background + emerald glassmorphism card
     ================================================================== */
  .auth-screen{ background:#04130E; display:block; }
  .auth-screen .auth-bg,
  .auth-screen .auth-side{ display:none !important; }

  /* Auth loading overlay — covers the login screen until ready */
  .auth-loader{
    position:absolute; inset:0; z-index:30;
    display:flex; align-items:center; justify-content:center;
    background:#04130E;
    transition:opacity .4s ease, visibility .4s ease;
  }
  .auth-loader.hide{ opacity:0; visibility:hidden; }
  .auth-loader .app-loader-spinner{
    border-color:rgba(159,240,206,0.25);
    border-top-color:#5DE3B0;
  }
  .auth-loader .app-loader-text{ color:#9FF0CE; }

  /* Fullscreen YouTube video, scaled to cover the viewport */
  .auth-video-bg{
    position:absolute; inset:0; z-index:0; overflow:hidden;
    pointer-events:none; background:#04130E;
  }
  .auth-video-bg iframe{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:100vw; height:56.25vw;          /* 16:9 relative to width  */
    min-height:100vh; min-width:177.78vh; /* 16:9 relative to height */
    border:0; pointer-events:none;
  }
  /* Emerald → black overlay for readability */
  .auth-video-overlay{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(120% 90% at 85% 50%, rgba(var(--accent-rgb,11,93,70),0.18) 0%, var(--green-900,#04130E) 62%, rgba(2,10,7,0.96) 100%),
      linear-gradient(115deg, rgba(var(--accent-rgb,11,93,70),0.55) 0%, rgba(var(--accent-rgb,11,93,70),0.20) 45%, rgba(2,10,7,0.82) 100%);
  }

  /* Card centered in the middle of the screen */
  .auth-main{
    position:absolute; z-index:2; inset:0;
    display:flex; align-items:center; justify-content:center;
    padding:32px; overflow-y:auto;
  }

  /* Glassmorphism card */
  .auth-screen .auth-card{
    width:100%; max-width:420px;
    background:linear-gradient(155deg, rgba(16,52,42,0.55) 0%, rgba(7,28,21,0.62) 100%);
    border:1px solid rgba(125,240,196,0.18);
    border-radius:22px;
    padding:38px 34px 30px;
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    box-shadow:
      0 30px 70px -20px rgba(0,0,0,0.65),
      inset 0 1px 0 rgba(255,255,255,0.08);
    color:#EAF6F0;
  }

  /* Diamond logo + brand name */
  .auth-screen .auth-card-brand{
    display:flex !important;
    flex-direction:column; align-items:center; gap:10px;
    margin-bottom:20px; text-align:center;
  }
  .auth-gem{
    width:58px; height:58px;
    filter:drop-shadow(0 8px 20px rgba(93,227,176,0.35));
  }
  .auth-card-brand-name{
    font-size:15px; font-weight:700; letter-spacing:2px;
    color:#9FF0CE;
  }
  /* Uploaded custom login logo */
  .auth-logo-img{
    max-width:200px; max-height:96px; width:auto; height:auto;
    object-fit:contain;
    filter:drop-shadow(0 8px 22px rgba(0,0,0,0.45));
  }
  .auth-card-brand.has-logo .auth-gem,
  .auth-card-brand.has-logo .auth-card-brand-name{ display:none; }

  /* Site color picker (Settings) */
  .theme-swatches{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 10px; }
  .theme-swatch{
    width:28px; height:28px; border-radius:50%; cursor:pointer;
    border:2px solid transparent; box-shadow:0 0 0 1px rgba(0,0,0,.12);
    transition:transform .12s ease, border-color .12s ease;
  }
  .theme-swatch:hover{ transform:scale(1.1); }
  .theme-swatch.active{ border-color:#fff; box-shadow:0 0 0 2px var(--green-700); }
  .theme-custom{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; color:var(--muted); cursor:pointer;
  }
  .theme-custom input[type="color"]{
    width:34px; height:28px; padding:0; border:1px solid var(--border);
    border-radius:8px; background:none; cursor:pointer;
  }

  /* Language toggle — glassy on dark */
  .auth-screen .auth-lang-toggle{
    background:rgba(255,255,255,0.07);
    border-color:rgba(255,255,255,0.14);
    color:#CFEEE0;
  }
  .auth-screen .auth-lang-toggle:hover{
    background:rgba(255,255,255,0.13);
    color:#fff; border-color:rgba(255,255,255,0.25);
  }

  /* Tabs */
  .auth-screen .auth-tabs{ border-bottom-color:rgba(255,255,255,0.12); }
  .auth-screen .auth-tab{ color:rgba(234,246,240,0.55); }
  .auth-screen .auth-tab:hover{ color:rgba(234,246,240,0.85); }
  .auth-screen .auth-tab.active{ color:#9FF0CE; }

  /* Heading + labels */
  .auth-screen .auth-panel-head h2{ color:#FFFFFF; }
  .auth-screen .auth-panel-head p{ color:rgba(234,246,240,0.70); }
  .auth-screen .auth-field label{ color:rgba(234,246,240,0.85); }

  /* Inputs on glass */
  .auth-screen .auth-input-ico{ color:rgba(159,240,206,0.65); }
  .auth-screen .auth-input-wrap input{
    background:rgba(255,255,255,0.06);
    border:1.5px solid rgba(255,255,255,0.14);
    color:#F3FBF7;
  }
  .auth-screen .auth-input-wrap input::placeholder{ color:rgba(234,246,240,0.40); }
  .auth-screen .auth-input-wrap input:hover{ border-color:rgba(159,240,206,0.40); }
  .auth-screen .auth-input-wrap input:focus{
    background:rgba(255,255,255,0.10);
    border-color:#5DE3B0;
    box-shadow:0 0 0 4px rgba(93,227,176,0.16);
  }
  .auth-screen .auth-eye{ color:rgba(234,246,240,0.55); }
  .auth-screen .auth-eye:hover{ background:rgba(255,255,255,0.08); color:#fff; }
  .auth-screen .auth-eye.is-visible svg{ color:#5DE3B0; }

  /* Remember-me + links */
  .auth-screen .auth-check{ color:rgba(234,246,240,0.80); }
  .auth-screen .auth-check input{ accent-color:#5DE3B0; }
  .auth-screen .auth-link{ color:#9FF0CE; }
  .auth-screen .auth-link:hover{ color:#CFF8E6; }
  .auth-screen .auth-switch{ color:rgba(234,246,240,0.65); }

  /* Submit button — brighter emerald for contrast on glass */
  .auth-screen .auth-submit{
    background:linear-gradient(135deg, #16A075 0%, #1FBE8C 100%);
    box-shadow:0 8px 22px rgba(31,190,140,0.35);
  }

  /* Divider "أو" */
  .auth-divider{
    display:flex; align-items:center; gap:12px;
    color:rgba(234,246,240,0.45);
    font-size:11.5px; font-weight:600;
    margin:2px 0;
  }
  .auth-divider::before, .auth-divider::after{
    content:''; flex:1; height:1px;
    background:rgba(255,255,255,0.14);
  }

  /* National Single Sign-On (Nafath) button */
  .auth-nafath{
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; padding:12px 18px;
    font-family:inherit; font-size:13px; font-weight:600;
    color:#EAF6F0; cursor:pointer;
    background:rgba(255,255,255,0.06);
    border:1.5px solid rgba(159,240,206,0.30);
    border-radius:10px;
    transition:all .18s ease;
  }
  .auth-nafath:hover{
    background:rgba(159,240,206,0.12);
    border-color:rgba(159,240,206,0.55);
    transform:translateY(-1px);
  }
  .auth-nafath:active{ transform:translateY(0); }
  .auth-nafath-logo{
    display:flex; align-items:center; justify-content:center;
    width:24px; height:24px; flex:none; color:#5DE3B0;
  }
  .auth-nafath-logo svg{ width:20px; height:20px; }

  /* Error / success boxes on dark glass */
  .auth-screen .auth-error{
    background:rgba(127,29,29,0.35);
    border-color:rgba(248,113,113,0.45);
    color:#FECACA;
  }
  .auth-screen .auth-success{
    background:rgba(6,78,59,0.40);
    border-color:rgba(110,231,183,0.45);
    color:#A7F3D0;
  }

  /* Responsive: center the card on small screens */
  @media (max-width:680px){
    .auth-main{ position:absolute; inset:0; width:auto; padding:20px; }
    .auth-video-overlay{
      background:linear-gradient(180deg, rgba(var(--accent-rgb,11,93,70),0.45) 0%, rgba(2,10,7,0.90) 100%);
    }
  }

  /* Bilingual grid — AR / EN side by side per field */
  .be-lang-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 12px;
  }
  /* Tiny AR / EN flag tag inside labels */
  .ff-lang{
    display:flex;align-items:center;gap:6px;
  }
  .ff-flag{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:20px;height:14px;padding:0 5px;
    font-size:8.5px;font-weight:700;letter-spacing:.4px;
    border-radius:3px;
    line-height:1;
  }
  .ff-ar{background:#E8F7F1;color:#0F7A5C}
  .ff-en{background:#E0F4F7;color:#0891B2}
  body.dark .ff-ar{background:rgba(46,196,140,0.15);color:#5DD8A0}
  body.dark .ff-en{background:rgba(8,145,178,0.15);color:#5DC4DD}

  /* ============================================================
     USERS MANAGEMENT (admin-only settings tab)
     ============================================================ */
  .users-mgr{
    display:flex;flex-direction:column;gap:14px;
  }
  .users-mgr-head{
    display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
    padding-bottom:14px;
    border-bottom:1px solid var(--border);
    flex-wrap:wrap;
  }
  .users-mgr-title{
    display:flex;align-items:center;gap:10px;
    font-size:16px;font-weight:700;color:var(--ink);
    margin:0;
  }
  .users-mgr-count{
    font-size:11px;font-weight:600;
    background:var(--green-50);color:var(--green-700);
    padding:2px 9px;border-radius:99px;
    font-variant-numeric:tabular-nums;
  }
  body.dark .users-mgr-count{background:rgba(15,122,92,0.20);color:#5DD8A0}
  .users-mgr-subtitle{
    font-size:12px;color:#6B7280;margin:4px 0 0;
  }
  .users-mgr-actions{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  }
  .users-search{
    position:relative;display:flex;align-items:center;
  }
  .users-search svg{
    position:absolute;
    inset-inline-start:10px;
    color:#9CA3AF;pointer-events:none;
  }
  .users-search input{
    padding:7px 12px 7px 34px;
    border:1px solid var(--border);
    border-radius:8px;
    font-family:inherit;font-size:12.5px;
    background:#fff;color:var(--ink);
    width:200px;outline:none;
    transition:border-color .15s ease;
  }
  html[dir="rtl"] .users-search input{padding:7px 34px 7px 12px}
  body.dark .users-search input{background:#1E2A36;border-color:rgba(255,255,255,0.10);color:#E5E7EB}
  .users-search input:focus{
    border-color:var(--green-600);
    box-shadow:0 0 0 3px rgba(15,122,92,0.10);
  }

  /* User row */
  .users-list{
    display:flex;flex-direction:column;gap:8px;
    min-height:200px;
    position:relative;
  }
  .user-row{
    display:flex;align-items:center;gap:14px;
    padding:12px 14px;
    background:#fff;
    border:1px solid #ECEEF0;
    border-radius:11px;
    box-shadow:0 1px 2px rgba(16,24,40,0.03);
    transition:all .15s ease;
  }
  .user-row:hover{
    border-color:#D1D5DB;
    box-shadow:0 2px 6px rgba(16,24,40,0.06);
  }
  body.dark .user-row{background:var(--card);border-color:var(--border)}
  body.dark .user-row:hover{border-color:rgba(255,255,255,0.18)}
  .user-row.is-self{
    background:linear-gradient(to right, rgba(46,196,140,0.04), transparent 30%);
    border-color:#A7E5C9;
  }
  body.dark .user-row.is-self{
    background:linear-gradient(to right, rgba(46,196,140,0.10), transparent 30%);
    border-color:rgba(46,196,140,0.30);
  }
  .user-row-avatar{
    width:40px;height:40px;
    border-radius:50%;
    background:var(--green-50);color:var(--green-700);
    display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:700;
    background-size:cover;background-position:center;
    flex-shrink:0;
  }
  body.dark .user-row-avatar{background-color:rgba(15,122,92,0.20);color:#5DD8A0}
  .user-row-avatar.has-img{color:transparent}
  .user-row-info{
    flex:1;min-width:0;
    display:flex;flex-direction:column;gap:2px;
  }
  .user-row-name{
    font-size:13.5px;font-weight:600;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    display:flex;align-items:center;gap:8px;
  }
  .user-row-self-tag{
    font-size:9.5px;font-weight:600;color:var(--green-700);
    background:var(--green-50);
    padding:1px 6px;border-radius:99px;
    letter-spacing:.3px;
  }
  body.dark .user-row-self-tag{background:rgba(46,196,140,0.18);color:#5DD8A0}
  .user-row-email{
    font-size:11.5px;color:#6B7280;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .user-row-role{
    font-size:11px;font-weight:600;
    padding:3px 10px;border-radius:99px;
    display:inline-flex;align-items:center;gap:5px;
    flex-shrink:0;
  }
  .user-row-role.is-admin{
    background:#FEF3C7;color:#92400E;
  }
  body.dark .user-row-role.is-admin{background:rgba(252,211,77,0.18);color:#FCD34D}
  .user-row-role.is-user{
    background:#E5E7EB;color:#4B5563;
  }
  body.dark .user-row-role.is-user{background:rgba(255,255,255,0.08);color:#9CA3AF}
  .user-row-role::before{
    content:'';width:5px;height:5px;border-radius:50%;background:currentColor;
  }
  .user-row-actions{
    display:flex;align-items:center;gap:4px;
    flex-shrink:0;
  }
  .user-row-btn{
    width:32px;height:32px;
    border-radius:8px;
    background:transparent;
    border:1px solid var(--border);
    color:#6B7280;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:all .15s ease;
  }
  .user-row-btn:hover{
    background:#F3F4F6;color:#111827;border-color:#D1D5DB;
  }
  body.dark .user-row-btn{border-color:rgba(255,255,255,0.10);color:#9CA3AF}
  body.dark .user-row-btn:hover{background:rgba(255,255,255,0.06);color:#E5E7EB}
  .user-row-btn.danger:hover{
    background:#FEE2E2;color:#DC2626;border-color:#FCA5A5;
  }
  body.dark .user-row-btn.danger:hover{background:rgba(220,38,38,0.16);color:#FCA5A5;border-color:#7F1D1D}

  .users-empty{
    text-align:center;
    padding:40px 20px;
    color:#9CA3AF;
  }
  .users-empty svg{color:#D1D5DB;margin:0 auto 12px}
  .users-empty p{margin:0;font-size:13px}

  .users-loading{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
    padding:40px 20px;
    color:#6B7280;font-size:12px;
  }
  .users-loading[hidden]{display:none !important}

  @media (max-width:640px){
    .users-mgr-head{flex-direction:column}
    .users-mgr-actions{width:100%}
    .users-search input{width:100%}
    .user-row{flex-wrap:wrap}
    .user-row-info{flex-basis:calc(100% - 54px)}
    .user-row-role,.user-row-actions{margin-inline-start:54px}
  }

  /* ============================================================
     USER MODAL — create / edit / delete confirm
     ============================================================ */
  .user-modal{
    position:fixed;inset:0;
    z-index:6000;
    display:flex;align-items:center;justify-content:center;
    padding:20px;
    animation:authFadeIn .2s ease forwards;
  }
  .user-modal-backdrop{
    position:absolute;inset:0;
    background:rgba(15,23,42,0.62);
  }
  .user-modal-card{
    position:relative;
    width:100%;max-width:520px;
    background:#fff;
    border-radius:16px;
    box-shadow:0 25px 60px -15px rgba(0,0,0,0.30);
    max-height:calc(100vh - 40px);
    overflow:hidden;
    display:flex;flex-direction:column;
    animation:userModalIn .25s cubic-bezier(.4,0,.2,1);
  }
  body.dark .user-modal-card{background:var(--card)}
  .user-modal-card--sm{max-width:380px}
  @keyframes userModalIn{
    from{opacity:0;transform:translateY(20px) scale(.96)}
    to  {opacity:1;transform:translateY(0)    scale(1)}
  }
  .user-modal-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 20px;
    border-bottom:1px solid var(--border);
  }
  .user-modal-head h3{
    font-size:15px;font-weight:700;margin:0;color:var(--ink);
  }
  .user-modal-close{
    width:32px;height:32px;
    border-radius:8px;
    background:transparent;border:none;
    color:#6B7280;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s ease;
  }
  .user-modal-close:hover{background:rgba(0,0,0,0.06)}
  body.dark .user-modal-close:hover{background:rgba(255,255,255,0.08)}

  .user-modal-body{
    padding:20px;
    overflow-y:auto;
    display:flex;flex-direction:column;gap:14px;
  }
  .user-modal-create-only{
    display:flex;flex-direction:column;gap:14px;
    padding:14px;
    background:#F9FAFB;
    border:1px dashed var(--border);
    border-radius:10px;
  }
  body.dark .user-modal-create-only{background:rgba(255,255,255,0.03)}
  .user-modal-field{
    display:flex;flex-direction:column;gap:5px;
  }
  .user-modal-field label{
    font-size:11.5px;font-weight:600;color:#374151;
  }
  body.dark .user-modal-field label{color:#D1D5DB}
  .user-modal-field input{
    padding:10px 12px;
    border:1.5px solid var(--border);
    border-radius:9px;
    font-family:inherit;font-size:13px;
    background:#fff;color:var(--ink);
    outline:none;transition:all .15s ease;
  }
  body.dark .user-modal-field input{background:#1E2A36;color:#E5E7EB;border-color:rgba(255,255,255,0.10)}
  .user-modal-field input:focus{
    border-color:var(--green-600);
    box-shadow:0 0 0 4px rgba(46,196,140,0.10);
  }
  .user-modal-hint{
    font-size:10.5px;color:#9CA3AF;line-height:1.4;
  }
  .user-modal-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:14px;
  }

  .user-role-toggle{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    margin-top:2px;
  }
  .user-role-option{cursor:pointer;display:block}
  .user-role-option input{display:none}
  .user-role-card{
    display:flex;align-items:flex-start;gap:10px;
    padding:12px 14px;
    border:1.5px solid var(--border);
    border-radius:10px;
    transition:all .15s ease;
    background:#fff;
  }
  body.dark .user-role-card{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.10)}
  .user-role-option:hover .user-role-card{border-color:#9CA3AF}
  .user-role-option input:checked + .user-role-card{
    border-color:var(--green-600);
    background:linear-gradient(135deg, rgba(46,196,140,0.06), rgba(15,122,92,0.04));
    box-shadow:0 0 0 3px rgba(46,196,140,0.10);
  }
  body.dark .user-role-option input:checked + .user-role-card{
    background:linear-gradient(135deg, rgba(46,196,140,0.10), rgba(15,122,92,0.06));
  }
  .user-role-icon{
    width:32px;height:32px;
    border-radius:8px;
    background:var(--green-50);color:var(--green-700);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  body.dark .user-role-icon{background:rgba(46,196,140,0.18);color:#5DD8A0}
  .user-role-info{display:flex;flex-direction:column;gap:1px;min-width:0}
  .user-role-info strong{
    font-size:12.5px;font-weight:700;color:var(--ink);
  }
  .user-role-info span{
    font-size:10.5px;color:#9CA3AF;
  }

  .user-modal-foot{
    display:flex;align-items:center;justify-content:flex-end;gap:8px;
    padding:14px 20px;
    border-top:1px solid var(--border);
    background:#FAFBFC;
  }
  body.dark .user-modal-foot{background:rgba(255,255,255,0.02)}

  .user-modal-error{
    padding:10px 13px;
    background:#FEF2F2;
    border:1px solid #FCA5A5;
    border-radius:9px;
    color:#B91C1C;
    font-size:12px;line-height:1.5;
    animation:authShake .35s ease;
  }
  body.dark .user-modal-error{background:rgba(220,38,38,0.10);border-color:rgba(220,38,38,0.30);color:#FCA5A5}

  .user-delete-icon{
    width:64px;height:64px;
    border-radius:50%;
    background:#FEE2E2;color:#DC2626;
    display:inline-flex;align-items:center;justify-content:center;
    margin-bottom:4px;
  }
  body.dark .user-delete-icon{background:rgba(220,38,38,0.18);color:#FCA5A5}

  .btn-danger{
    background:#DC2626;color:#fff;
    border:none;
    padding:8px 14px;
    border-radius:8px;
    font-family:inherit;font-size:12.5px;font-weight:600;
    cursor:pointer;
    display:inline-flex;align-items:center;gap:6px;
    transition:all .15s ease;
  }
  .btn-danger:hover{background:#B91C1C}
  .btn-danger:disabled{opacity:.6;cursor:not-allowed}

  @media (max-width:520px){
    .user-modal-grid{grid-template-columns:1fr}
    .user-role-toggle{grid-template-columns:1fr}
  }

  /* ============================================================
     ARRIVAL FLIGHTS PAGE
     ============================================================ */
  .flights-header{
    display:flex;align-items:flex-start;justify-content:space-between;
    gap:16px;flex-wrap:wrap;
    margin-bottom:20px;
  }
  .flights-title{
    font-size:24px;font-weight:800;color:var(--ink);
    margin:0 0 4px;letter-spacing:-0.3px;
  }
  body.dark .flights-title{color:#fff}
  .flights-subtitle{
    font-size:13px;color:#6B7280;margin:0;
  }
  .flights-header-actions{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  }
  .flights-search{position:relative;display:flex;align-items:center}
  .flights-search svg{position:absolute;inset-inline-start:11px;color:#9CA3AF;pointer-events:none}
  .flights-search input{
    padding:9px 14px 9px 36px;
    border:1px solid var(--border);border-radius:9px;
    font-family:inherit;font-size:13px;
    background:#fff;color:var(--ink);
    width:260px;outline:none;transition:border-color .15s ease;
  }
  html[dir="rtl"] .flights-search input{padding:9px 36px 9px 14px}
  body.dark .flights-search input{background:#1E2A36;border-color:rgba(255,255,255,0.10);color:#E5E7EB}
  .flights-search input:focus{border-color:var(--green-600);box-shadow:0 0 0 3px rgba(15,122,92,0.10)}

  /* Export buttons */
  .flights-export-btn{display:inline-flex;align-items:center;gap:6px}
  .flights-export-btn span{font-size:12.5px;font-weight:600}

  /* Filter toolbar */
  .flights-filters{
    display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;
    background:#fff;border:1px solid #EFF2F5;border-radius:14px;
    padding:14px 16px;margin-bottom:16px;
    box-shadow:0 1px 3px rgba(16,24,40,0.03);
    position:relative;overflow:visible;z-index:1;
    font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;
  }
  .flights-filters label,.flights-filters select,.flights-filters button,.flights-filters input{
    font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;
  }
  /* When a dropdown is open inside the filters, lift the whole bar above the table */
  .flights-filters:has(.nsel.open){z-index:9000}
  body.dark .flights-filters{background:var(--card);border-color:rgba(255,255,255,0.08)}
  .flights-filter{display:flex;flex-direction:column;gap:5px}
  .flights-filter label{font-size:11px;font-weight:600;color:#64748B}
  body.dark .flights-filter label{color:#94A3B8}
  .flights-filter select{
    padding:8px 12px;border:1.5px solid var(--border);border-radius:9px;
    font-family:inherit;font-size:12.5px;background:#fff;color:var(--ink);
    outline:none;cursor:pointer;min-width:130px;transition:border-color .15s ease;
  }
  body.dark .flights-filter select{background:#1E2A36;color:#E5E7EB;border-color:rgba(255,255,255,0.10)}
  .flights-filter select:focus{border-color:var(--green-600);box-shadow:0 0 0 3px rgba(46,196,140,0.10)}
  .flights-filter-clear{
    padding:8px 14px;border:1.5px solid var(--border);border-radius:9px;
    background:transparent;color:#64748B;font-family:inherit;font-size:12px;font-weight:600;
    cursor:pointer;transition:all .15s ease;align-self:flex-end;
  }
  .flights-filter-clear:hover{background:#F1F5F9;color:#0F172A;border-color:#CBD5E1}
  body.dark .flights-filter-clear{border-color:rgba(255,255,255,0.12);color:#94A3B8}
  body.dark .flights-filter-clear:hover{background:rgba(255,255,255,0.06)}
  .flights-filter-pagesize{margin-inline-start:auto}
  .flights-filter-pagesize select{min-width:90px}

  /* Pagination */
  .flights-pagination{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 18px;border-top:1px solid #F1F3F6;gap:12px;flex-wrap:wrap;
  }
  body.dark .flights-pagination{border-top-color:rgba(255,255,255,0.06)}
  .flights-pagination[hidden]{display:none !important}
  .flights-page-info{font-size:12px;color:#64748B;font-weight:500}
  body.dark .flights-page-info{color:#94A3B8}
  .flights-page-controls{display:flex;align-items:center;gap:6px}
  .flights-page-numbers{display:flex;align-items:center;gap:4px}
  .flights-page-btn{
    min-width:32px;height:32px;padding:0 8px;border-radius:8px;
    border:1px solid var(--border);background:#fff;color:#475569;
    font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    transition:all .15s ease;
  }
  .flights-page-btn:hover:not(:disabled){background:#F1F5F9;border-color:#CBD5E1}
  .flights-page-btn:disabled{opacity:.4;cursor:default}
  .flights-page-btn.active{background:var(--green-700);color:#fff;border-color:var(--green-700)}
  body.dark .flights-page-btn{background:#1E2A36;border-color:rgba(255,255,255,0.10);color:#CBD5E1}
  body.dark .flights-page-btn:hover:not(:disabled){background:rgba(255,255,255,0.06)}
  body.dark .flights-page-btn.active{background:var(--green-600);border-color:var(--green-600);color:#fff}
  .flights-page-dots{padding:0 4px;color:#94A3B8;font-weight:700}

  /* Summary stats */
  .flights-stats{
    display:grid;grid-template-columns:repeat(6,1fr);gap:12px;
    margin-bottom:20px;
  }
  .fstat{
    background:#fff;
    border:1px solid #EFF2F5;
    border-radius:16px;
    padding:15px 16px;
    display:flex;align-items:center;gap:12px;
    box-shadow:0 1px 3px rgba(16,24,40,0.04);
    transition:transform .15s ease, box-shadow .15s ease;
    position:relative;overflow:hidden;
  }
  .fstat:hover{transform:translateY(-2px);box-shadow:0 8px 20px -6px rgba(16,24,40,0.12)}
  body.dark .fstat{background:var(--card);border-color:rgba(255,255,255,0.08)}
  /* accent strip on the inline-start edge */
  .fstat::before{
    content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
    background:var(--green-600);opacity:.9;
  }
  .fstat-flights::before{background:#0F7A5C}
  .fstat-pilgrims::before{background:#7C3AED}
  .fstat-contracts::before{background:#0284C7}
  .fstat-missing::before{background:#DC2626}
  .fstat-ring::before{background:transparent;width:0}

  .fstat-icon{
    width:42px;height:42px;border-radius:11px;flex:none;
    display:flex;align-items:center;justify-content:center;
    background:#F1F5F9;color:#475569;
  }
  body.dark .fstat-icon{background:rgba(255,255,255,0.06);color:#94A3B8}
  .fstat-icon svg{width:20px;height:20px}
  .fstat-flights .fstat-icon{background:rgba(15,122,92,0.10);color:#0F7A5C}
  .fstat-pilgrims .fstat-icon{background:rgba(124,58,237,0.10);color:#7C3AED}
  .fstat-contracts .fstat-icon{background:rgba(2,132,199,0.10);color:#0284C7}
  .fstat-missing .fstat-icon{background:rgba(220,38,38,0.10);color:#DC2626}
  body.dark .fstat-flights .fstat-icon{background:rgba(46,196,140,0.15);color:#5DE3B0}
  body.dark .fstat-pilgrims .fstat-icon{background:rgba(124,58,237,0.20);color:#C4B5FD}
  body.dark .fstat-contracts .fstat-icon{background:rgba(2,132,199,0.20);color:#7DD3FC}
  body.dark .fstat-missing .fstat-icon{background:rgba(220,38,38,0.18);color:#F87171}

  .fstat-body{display:flex;flex-direction:column;gap:2px;min-width:0}
  .fstat-val{
    font-size:24px;font-weight:800;color:var(--ink);
    font-variant-numeric:tabular-nums;line-height:1.05;
  }
  body.dark .fstat-val{color:#F1F5F9}
  .fstat-missing .fstat-val{color:#DC2626}
  body.dark .fstat-missing .fstat-val{color:#F87171}
  .fstat-lbl{font-size:11.5px;color:#64748B;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fstat-lbl.strong{font-size:12px;color:#334155;font-weight:700}
  body.dark .fstat-lbl{color:#94A3B8}
  body.dark .fstat-lbl.strong{color:#E2E8F0}
  .fstat-sub{font-size:10px;color:#9AA4B2;font-weight:500}

  /* Progress ring (percentage cards) */
  .fstat-ring-wrap{position:relative;width:48px;height:48px;flex:none}
  .fstat-ring-svg{width:48px;height:48px;transform:rotate(-90deg)}
  .fstat-ring-bg{fill:none;stroke:#EEF1F5;stroke-width:4}
  body.dark .fstat-ring-bg{stroke:rgba(255,255,255,0.08)}
  .fstat-ring-fg{
    fill:none;stroke-width:4;stroke-linecap:round;
    stroke-dasharray:113.1;       /* 2πr, r=18 */
    stroke-dashoffset:113.1;       /* start empty; JS sets it */
    transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1);
  }
  .fstat-ring-fg.arrived{stroke:#0F7A5C}
  .fstat-ring-fg.data{stroke:#0284C7}
  .fstat-ring-val{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;
  }
  body.dark .fstat-ring-val{color:#F1F5F9}

  /* Table card */
  .flights-table-card{
    background:#fff;
    border:1px solid #F1F3F6;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(16,24,40,0.03);
  }
  body.dark .flights-table-card{background:var(--card);border-color:rgba(255,255,255,0.06)}
  .flights-table-scroll{overflow-x:auto;position:relative;min-height:200px}
  .flights-table-scroll::-webkit-scrollbar{height:8px}
  .flights-table-scroll::-webkit-scrollbar-track{background:transparent}
  .flights-table-scroll::-webkit-scrollbar-thumb{background:#E2E7ED;border-radius:5px}
  .flights-table-scroll::-webkit-scrollbar-thumb:hover{background:#C5CDD7}
  body.dark .flights-table-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12)}

  .flights-table{
    width:100%;border-collapse:separate;border-spacing:0;
    font-size:12.5px;white-space:nowrap;
  }

  /* Column header row — green brand header */
  .flights-col-row th{
    text-align:center;
    padding:12px;
    font-size:11px;font-weight:700;color:#fff;
    background:linear-gradient(135deg, var(--green-800) 0%, var(--green-700) 100%);
    border-inline-end:1px solid rgba(255,255,255,0.10);
    letter-spacing:.2px;
    position:sticky;top:0;z-index:1;
  }
  .flights-col-row th:last-child{border-inline-end:none}
  body.dark .flights-col-row th{
    background:linear-gradient(135deg, var(--green-900) 0%, var(--green-800) 100%);
    border-inline-end-color:rgba(255,255,255,0.06);
  }
  .col-idx{width:40px}
  .col-actions{width:1%}

  /* Body cells — centered, light grid lines (both directions) */
  .flights-table tbody td{
    padding:9px 12px;
    border-bottom:1px solid #EEF1F5;
    border-inline-end:1px solid #F2F4F7;
    color:#3D4859;
    vertical-align:middle;
    text-align:center;
  }
  .flights-table tbody td:last-child{border-inline-end:none}
  body.dark .flights-table tbody td{
    border-bottom-color:rgba(255,255,255,0.05);
    border-inline-end-color:rgba(255,255,255,0.04);
    color:#C0C8D2;
  }
  .flights-table tbody tr{transition:background .12s ease;cursor:pointer}
  .flights-table tbody tr:hover{background:#F8FCFA}
  body.dark .flights-table tbody tr:hover{background:rgba(46,196,140,0.05)}
  .flights-table tbody tr:last-child td{border-bottom:none}
  .td-center{text-align:center}
  .col-idx{color:#B4BCC7;font-weight:600}

  /* Estimated Makkah arrival badge */
  .fl-eta{
    display:inline-flex;align-items:center;gap:4px;
    padding:3px 9px;border-radius:7px;
    background:#FEF9E7;color:#B7791F;
    font-size:11.5px;font-weight:700;
    font-variant-numeric:tabular-nums;direction:ltr;
  }
  .fl-eta::before{
    content:'';width:11px;height:11px;flex:none;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  body.dark .fl-eta{background:rgba(183,121,31,0.18);color:#FCD34D}

  /* ===== Arrival / ETA date-time cell (plain, no boxes) ===== */
  .fl-arrival{
    display:inline-flex;flex-direction:column;align-items:center;gap:1px;
    direction:rtl;
  }
  .fl-arrival-date{
    display:flex;flex-direction:column;align-items:center;gap:0;
  }
  .fl-date-greg{
    font-size:11.5px;font-weight:700;color:#1E293B;direction:ltr;
    font-variant-numeric:tabular-nums;letter-spacing:.2px;
  }
  body.dark .fl-date-greg{color:#F1F5F9}
  .fl-date-hijri{
    font-size:10px;font-weight:500;color:#94A3B8;direction:rtl;
    font-variant-numeric:tabular-nums;
  }
  body.dark .fl-date-hijri{color:#8A95A3}
  .fl-arrival-time{
    display:flex;align-items:center;justify-content:center;gap:4px;
    direction:rtl;
    font-size:11.5px;font-weight:700;color:#0F766E;
    font-variant-numeric:tabular-nums;
  }
  body.dark .fl-arrival-time{color:#5EEAD4}
  .fl-arrival-time::before{
    content:'';width:10px;height:10px;flex:none;opacity:.7;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .fl-arrival-time .t-num{font-variant-numeric:tabular-nums;direction:ltr}
  .fl-arrival-time .t-period{font-size:10px;font-weight:500;opacity:.8}
  .fl-eta-time{color:#B7791F !important}
  body.dark .fl-eta-time{color:#FCD34D !important}

  /* Transport badge color per type */
  .fl-transport-badge.train{color:#0284C7}
  body.dark .fl-transport-badge.train{color:#7DD3FC}
  .fl-transport-badge.private{color:#7C3AED}
  body.dark .fl-transport-badge.private{color:#C4B5FD}

  /* Pilgrims pill: estimated vs confirmed */
  .fl-pill-num.est{background:#FEF3C7;color:#B45309}
  body.dark .fl-pill-num.est{background:rgba(217,119,6,0.18);color:#FCD34D}
  .fl-pill-num.confirmed{background:#DCFCE7;color:#15803D}
  body.dark .fl-pill-num.confirmed{background:rgba(34,197,94,0.18);color:#4ADE80}

  /* Arrival confirmation cell */
  .fl-confirm-cell{min-width:130px}
  .fl-confirm-btn{
    display:inline-flex;align-items:center;gap:5px;
    padding:6px 12px;border-radius:8px;
    background:var(--green-700);color:#fff;border:none;
    font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;
    transition:all .15s ease;
  }
  .fl-confirm-btn:hover{background:var(--green-800);transform:translateY(-1px)}
  .fl-confirm-done{display:inline-flex;align-items:center;gap:8px}
  .fl-confirm-check{
    width:24px;height:24px;border-radius:50%;flex:none;
    background:#DCFCE7;color:#15803D;
    display:flex;align-items:center;justify-content:center;
  }
  .fl-confirm-check svg{width:13px;height:13px}
  body.dark .fl-confirm-check{background:rgba(34,197,94,0.20);color:#4ADE80}
  .fl-confirm-meta{display:flex;flex-direction:column;align-items:flex-start;line-height:1.3}
  .fl-confirm-num{font-size:12px;font-weight:700;color:#15803D}
  body.dark .fl-confirm-num{color:#4ADE80}
  .fl-confirm-by{font-size:9.5px;color:#94A3B8}

  /* Confirm modal icon + estimate box */
  .fl-confirm-icon{
    width:54px;height:54px;border-radius:50%;margin:0 auto;
    background:linear-gradient(135deg,#DCFCE7,#BBF7D0);color:#15803D;
    display:flex;align-items:center;justify-content:center;
  }
  body.dark .fl-confirm-icon{background:rgba(34,197,94,0.16);color:#4ADE80}
  .fl-confirm-est{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 14px;border-radius:9px;
    background:#FEF9E7;border:1px solid #FDE68A;
    font-size:12.5px;color:#92400E;
  }
  .fl-confirm-est strong{font-size:16px;font-variant-numeric:tabular-nums}
  body.dark .fl-confirm-est{background:rgba(217,119,6,0.12);border-color:rgba(217,119,6,0.30);color:#FCD34D}

  /* ===== Attachment Viewer (in-site preview) ===== */
  .att-viewer{
    position:fixed;inset:0;z-index:7000;
    display:flex;align-items:center;justify-content:center;
    padding:24px;
    animation:authFadeIn .2s ease forwards;
  }
  .att-viewer-backdrop{
    position:absolute;inset:0;
    background:rgba(15,23,42,0.78);
  }
  .att-viewer-card{
    position:relative;
    width:100%;max-width:960px;height:88vh;
    background:#fff;border-radius:16px;
    box-shadow:0 30px 70px -15px rgba(0,0,0,0.45);
    display:flex;flex-direction:column;overflow:hidden;
    animation:userModalIn .25s cubic-bezier(.4,0,.2,1);
  }
  body.dark .att-viewer-card{background:#1A2128}
  .att-viewer-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:13px 18px;border-bottom:1px solid var(--border);flex-shrink:0;
  }
  .att-viewer-head h3{font-size:14px;font-weight:700;margin:0;color:var(--ink)}
  body.dark .att-viewer-head h3{color:#fff}
  .att-viewer-head-actions{display:flex;align-items:center;gap:6px}
  .att-viewer-body{
    flex:1;min-height:0;
    background:#F1F3F6;
    display:flex;align-items:center;justify-content:center;
    overflow:auto;
  }
  body.dark .att-viewer-body{background:#0F1419}
  .att-viewer-imgwrap{
    width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    padding:16px;
  }
  .att-viewer-body img{max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:6px;box-shadow:0 4px 20px rgba(0,0,0,0.15)}
  .att-viewer-body iframe{width:100%;height:100%;border:none;background:#fff}

  .fl-strong{font-weight:600;color:#1E293B}
  body.dark .fl-strong{color:#E2E8F0}
  .fl-mono{font-family:ui-monospace,'SF Mono',monospace;font-size:11.5px;letter-spacing:-.2px;direction:ltr;display:inline-block}
  .fl-date{font-size:11.5px;color:#5A6573}
  body.dark .fl-date{color:#94A3B8}
  .fl-time{display:block;font-size:9.5px;color:#AEB7C2;margin-top:1px;direction:ltr}
  .fl-acc-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;display:inline-block;vertical-align:middle}
  .fl-dash{color:#D2D9E0}
  body.dark .fl-dash{color:#475569}

  /* Service center badge */
  .fl-sc-badge{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:34px;height:24px;padding:0 8px;
    background:#F1F5F9;color:#475569;
    border-radius:7px;font-weight:700;font-size:12px;
    font-variant-numeric:tabular-nums;direction:ltr;
  }
  body.dark .fl-sc-badge{background:rgba(255,255,255,0.06);color:#CBD5E1}

  .fl-flag{
    width:22px;height:15px;border-radius:3px;object-fit:cover;
    box-shadow:0 0 0 1px rgba(0,0,0,0.08);
    margin-inline-end:6px;flex:none;
  }
  .fl-nat-cell{display:inline-flex;align-items:center;justify-content:center;font-weight:500}

  /* Pilgrims pill */
  .fl-pill-num{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:30px;height:24px;padding:0 8px;
    background:#E7F7F0;color:#0F7A5C;
    border-radius:7px;font-weight:700;font-size:12px;
    font-variant-numeric:tabular-nums;
  }
  body.dark .fl-pill-num{background:rgba(46,196,140,0.15);color:#5DE3B0}
  .fl-pill-num.soft{background:#F1F5F9;color:#64748B}
  body.dark .fl-pill-num.soft{background:rgba(255,255,255,0.06);color:#94A3B8}

  .fl-airport-badge{
    display:inline-flex;align-items:center;justify-content:center;
    padding:3px 11px;border-radius:99px;
    font-size:11px;font-weight:700;
  }
  .fl-airport-badge.madina{background:#EDE9FE;color:#6D28D9}
  body.dark .fl-airport-badge.madina{background:rgba(139,92,246,0.18);color:#C4B5FD}
  .fl-airport-badge.jeddah{background:#DBEAFE;color:#1D4ED8}
  body.dark .fl-airport-badge.jeddah{background:rgba(59,130,246,0.18);color:#93C5FD}

  .fl-transport-badge{
    display:inline-flex;align-items:center;justify-content:center;gap:5px;
    font-size:11.5px;font-weight:600;color:#5A6573;
  }
  body.dark .fl-transport-badge{color:#94A3B8}
  .fl-transport-badge svg{width:14px;height:14px;flex:none}

  .fl-masar{
    display:inline-flex;align-items:center;justify-content:center;gap:5px;
    padding:3px 10px;border-radius:99px;
    font-size:10.5px;font-weight:600;
  }
  .fl-masar::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
  .fl-masar.active{background:#DCFCE7;color:#15803D}
  body.dark .fl-masar.active{background:rgba(34,197,94,0.18);color:#4ADE80}
  .fl-masar.inactive{background:#FEE2E2;color:#B91C1C}
  body.dark .fl-masar.inactive{background:rgba(239,68,68,0.16);color:#FCA5A5}

  /* Inline value + attachment chip */
  .fl-with-chip{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
  }
  .fl-att-chip{
    width:26px;height:26px;flex:none;
    border-radius:7px;
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all .15s ease;
    /* default = no file: glass dashed */
    background:rgba(148,163,184,0.10);
    border:1.5px dashed #CBD5E1;
    color:#94A3B8;
  }
  .fl-att-chip svg{width:13px;height:13px}
  .fl-att-chip:hover{
    border-color:#94A3B8;color:#64748B;
    background:rgba(148,163,184,0.18);
  }
  body.dark .fl-att-chip{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.15);color:#64748B}
  /* has file = solid green glass */
  .fl-att-chip.has{
    background:rgba(46,196,140,0.12);
    border:1.5px solid rgba(46,196,140,0.40);
    color:#0F7A5C;
  }
  .fl-att-chip.has:hover{
    background:rgba(46,196,140,0.22);
    border-color:#2EC48C;
    transform:translateY(-1px);
    box-shadow:0 3px 8px rgba(46,196,140,0.25);
  }
  body.dark .fl-att-chip.has{background:rgba(46,196,140,0.16);border-color:rgba(46,196,140,0.40);color:#5DE3B0}

  /* Stacked transport cell: vehicle label on top, attachment chip beneath */
  .fl-transport-stack,.fl-contract-stack,.fl-acc-stack{
    display:inline-flex;flex-direction:column;align-items:center;gap:4px;
  }
  /* Labeled square chip (icon + text) used for الاعتماد / التذكرة / العقد */
  .fl-labeled-chip{
    display:inline-flex;align-items:center;gap:5px;
    padding:3px 8px;border-radius:7px;cursor:pointer;
    font-family:inherit;font-size:10px;font-weight:700;
    background:rgba(148,163,184,0.10);
    border:1.5px dashed #CBD5E1;color:#94A3B8;
    transition:all .15s ease;
  }
  .fl-labeled-chip .flc-icon{display:inline-flex}
  .fl-labeled-chip .flc-icon svg{width:11px;height:11px}
  .fl-labeled-chip:hover{border-color:#94A3B8;color:#64748B;background:rgba(148,163,184,0.18)}
  body.dark .fl-labeled-chip{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.15);color:#64748B}
  .fl-labeled-chip.has{
    background:rgba(46,196,140,0.12);
    border:1.5px solid rgba(46,196,140,0.40);
    color:#0F7A5C;
  }
  .fl-labeled-chip.has:hover{
    background:rgba(46,196,140,0.22);border-color:#2EC48C;
    transform:translateY(-1px);box-shadow:0 3px 8px rgba(46,196,140,0.22);
  }
  body.dark .fl-labeled-chip.has{background:rgba(46,196,140,0.16);border-color:rgba(46,196,140,0.40);color:#5DE3B0}

  .fl-row-actions{display:flex;gap:4px;justify-content:center}
  .fl-row-btn{
    width:29px;height:29px;border-radius:7px;
    background:transparent;border:1px solid #E5EAF0;
    color:#7A8595;display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all .15s ease;
  }
  .fl-row-btn:hover{background:#F1F5F9;color:#0F172A}
  body.dark .fl-row-btn{border-color:rgba(255,255,255,0.10);color:#94A3B8}
  body.dark .fl-row-btn:hover{background:rgba(255,255,255,0.06)}
  .fl-row-btn.danger:hover{background:#FEE2E2;color:#DC2626;border-color:#FCA5A5}
  .fl-row-btn.warn:hover{background:#FEF3E2;color:#B45309;border-color:#FCD9A5}
  body.dark .fl-row-btn.warn:hover{background:rgba(217,119,6,0.18);color:#fbbf24;border-color:rgba(217,119,6,0.4)}

  .flights-empty,.flights-loading{
    text-align:center;padding:50px 20px;color:#9CA3AF;
  }
  .flights-empty svg{color:#D1D5DB;margin:0 auto 12px;display:block}
  .flights-empty p{margin:0;font-size:13px}
  .flights-loading{display:flex;flex-direction:column;align-items:center;gap:12px;font-size:12px}
  .flights-loading[hidden]{display:none !important}

  @media (max-width:1280px){
    .flights-stats{grid-template-columns:repeat(3,1fr)}
  }
  @media (max-width:760px){
    .flights-stats{grid-template-columns:repeat(2,1fr)}
    .flights-search input{width:100%}
    .flights-header-actions{width:100%}
  }

  /* ============================================================
     FLIGHT MODAL (add/edit/detail)
     ============================================================ */
  .flight-modal{
    position:fixed;inset:0;z-index:6000;
    display:flex;align-items:center;justify-content:center;
    padding:20px;
    animation:authFadeIn .2s ease forwards;
  }
  .flight-modal-backdrop{
    position:absolute;inset:0;
    background:rgba(15,23,42,0.62);
  }
  .flight-modal-card{
    position:relative;width:100%;max-width:920px;
    background:#fff;border-radius:18px;
    box-shadow:0 25px 60px -15px rgba(0,0,0,0.30);
    max-height:calc(100vh - 32px);
    overflow:hidden;display:flex;flex-direction:column;
    animation:userModalIn .25s cubic-bezier(.4,0,.2,1);
    font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;
  }
  .flight-modal-card input,.flight-modal-card select,.flight-modal-card textarea,
  .flight-modal-card button,.flight-modal-card label,.flight-modal-card h3,
  .flight-modal-card .nsel-trigger,.flight-modal-card .nsel-opt,.flight-modal-card .nsel-search{
    font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;
  }
  body.dark .flight-modal-card{background:var(--card)}
  .flight-modal-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 22px;border-bottom:1px solid var(--border);flex-shrink:0;
  }
  .flight-modal-head h3{font-size:16px;font-weight:700;margin:0;color:var(--ink)}
  body.dark .flight-modal-head h3{color:#fff}
  .flight-modal-body{
    padding:20px 22px;overflow-y:auto;
    display:flex;flex-direction:column;gap:20px;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .flight-modal-foot{
    display:flex;align-items:center;justify-content:flex-end;gap:8px;
    padding:14px 22px;border-top:1px solid var(--border);
    background:#FAFBFC;flex-shrink:0;
  }
  body.dark .flight-modal-foot{background:rgba(255,255,255,0.02)}

  .flight-section{
    display:flex;flex-direction:column;gap:12px;
  }
  .flight-section-title{
    display:flex;align-items:center;gap:8px;
    font-size:13px;font-weight:700;color:var(--green-700);
    padding-bottom:8px;border-bottom:1px solid var(--border);
  }
  body.dark .flight-section-title{color:#5DE3B0;border-bottom-color:rgba(255,255,255,0.08)}
  .flight-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:13px;
  }
  .flight-field{display:flex;flex-direction:column;gap:5px}
  .flight-field-wide{grid-column:span 2}
  .flight-field label{font-size:11px;font-weight:600;color:#374151}
  body.dark .flight-field label{color:#D1D5DB}
  .flight-field input,.flight-field select,.flight-field textarea{
    padding:9px 11px;
    border:1.5px solid var(--border);border-radius:8px;
    font-family:inherit;font-size:12.5px;
    background:#fff;color:var(--ink);outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
    width:100%;box-sizing:border-box;
  }
  .flight-field textarea{resize:vertical;min-height:64px;line-height:1.5}
  body.dark .flight-field input,body.dark .flight-field select,body.dark .flight-field textarea{
    background:#1E2A36;color:#E5E7EB;border-color:rgba(255,255,255,0.10);
  }
  .flight-field input:focus,.flight-field select:focus,.flight-field textarea:focus{
    border-color:var(--green-600);box-shadow:0 0 0 3px rgba(46,196,140,0.10);
  }

  /* Transport toggle */
  .flight-transport-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .flight-transport-toggle-3{grid-template-columns:1fr 1fr 1fr}

  /* Train route visual */
  .flight-train-route{
    margin-top:14px;padding:14px;
    background:#F8FAFC;border:1px solid #E8EDF2;border-radius:12px;
  }
  body.dark .flight-train-route{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.08)}
  .flight-route-steps{
    display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
    font-size:11.5px;font-weight:600;color:#475569;
  }
  body.dark .flight-route-steps{color:#94A3B8}
  .flight-route-step{display:inline-flex;align-items:center;gap:6px}
  .frs-dot{width:8px;height:8px;border-radius:50%;background:#94A3B8}
  .frs-dot.train{background:#0284C7}
  .frs-dot.end{background:#0F7A5C}
  .flight-route-arrow{color:#B4BCC7;font-size:13px}
  .flight-transport-option{cursor:pointer;display:block}
  .flight-transport-option input{display:none}
  .flight-transport-card{
    display:flex;align-items:center;gap:10px;
    padding:13px 16px;border:1.5px solid var(--border);
    border-radius:10px;background:#fff;
    font-size:13px;font-weight:600;color:var(--ink);
    transition:all .15s ease;
  }
  body.dark .flight-transport-card{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.10);color:#E5E7EB}
  .flight-transport-option:hover .flight-transport-card{border-color:#9CA3AF}
  .flight-transport-option input:checked + .flight-transport-card{
    border-color:var(--green-600);
    background:linear-gradient(135deg,rgba(46,196,140,0.08),rgba(15,122,92,0.04));
    color:var(--green-700);
    box-shadow:0 0 0 3px rgba(46,196,140,0.10);
  }
  body.dark .flight-transport-option input:checked + .flight-transport-card{color:#5DE3B0}
  .flight-bus-approval{margin-top:4px}

  /* Attachments */
  .flight-attachments{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .flight-attach-label{font-size:11.5px;font-weight:600;color:#374151;margin-bottom:6px}
  body.dark .flight-attach-label{color:#D1D5DB}
  .flight-attach-drop{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
    padding:18px 12px;
    border:1.5px dashed var(--border);border-radius:11px;
    background:#F9FAFB;color:#9CA3AF;
    cursor:pointer;transition:all .15s ease;text-align:center;
  }
  body.dark .flight-attach-drop{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.12)}
  .flight-attach-drop:hover{border-color:var(--green-600);background:rgba(46,196,140,0.04);color:var(--green-700)}
  .flight-attach-drop.has-file{
    border-style:solid;border-color:var(--green-600);
    background:rgba(46,196,140,0.06);color:var(--green-700);
  }
  body.dark .flight-attach-drop.has-file{color:#5DE3B0}
  .flight-attach-text{font-size:11.5px;font-weight:500;word-break:break-word;line-height:1.4}

  /* Detail modal layout */
  .fl-detail-section{margin-bottom:18px}
  .fl-detail-section:last-child{margin-bottom:0}
  .fl-detail-section-title{
    display:flex;align-items:center;gap:8px;
    font-size:12.5px;font-weight:700;color:var(--green-700);
    padding-bottom:7px;margin-bottom:11px;
    border-bottom:1px solid var(--border);
  }
  body.dark .fl-detail-section-title{color:#5DE3B0;border-bottom-color:rgba(255,255,255,0.08)}
  .fl-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px 16px}
  .fl-detail-item{display:flex;flex-direction:column;gap:2px}
  .fl-detail-item-label{font-size:10.5px;color:#9CA3AF;font-weight:500}
  .fl-detail-item-value{font-size:13px;font-weight:600;color:var(--ink)}
  body.dark .fl-detail-item-value{color:#E5E7EB}
  .fl-detail-attachments{display:flex;flex-wrap:wrap;gap:10px}
  .fl-detail-attach-link{
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 14px;border-radius:9px;
    background:#F9FAFB;border:1px solid var(--border);
    font-size:12.5px;font-weight:600;color:var(--green-700);
    text-decoration:none;transition:all .15s ease;
    cursor:pointer;font-family:inherit;
  }
  body.dark .fl-detail-attach-link{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.10);color:#5DE3B0}
  .fl-detail-attach-link:hover{background:rgba(46,196,140,0.08);border-color:var(--green-600)}
  .fl-detail-attach-link.empty{color:#9CA3AF;cursor:default;pointer-events:none}
  body.dark .fl-detail-attach-link.empty{color:#6B7280}

  @media (max-width:640px){
    .flight-grid{grid-template-columns:1fr 1fr}
    .flight-field-wide{grid-column:span 2}
    .flight-attachments{grid-template-columns:1fr}
    .fl-detail-grid{grid-template-columns:1fr 1fr}
    .flight-transport-toggle{grid-template-columns:1fr}
  }

  /* Stack to single column on narrow screens */
  @media (max-width:900px){
    .be-lang-grid{grid-template-columns:1fr}
  }

  /* Confirm row at bottom of each bulletin editor */
  .be-confirm-row{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-top:6px;
    padding-top:8px;
    border-top:1px dashed var(--border);
  }
  .be-dirty{
    font-size:11px;font-weight:500;
    color:#D97706;letter-spacing:.1px;
  }
  body.dark .be-dirty{color:#F59E0B}
  .be-confirm{
    display:inline-flex;align-items:center;gap:5px;
    white-space:nowrap;
  }
  .be-confirm svg{flex-shrink:0}
  .be-confirm:disabled{
    opacity:.5;
    cursor:not-allowed;
  }
  /* Briefly highlight after a successful confirm */
  .be.just-confirmed{
    animation:beConfirmPulse 1.2s ease;
  }
  @keyframes beConfirmPulse{
    0%   { box-shadow:0 0 0 0 rgba(15,122,92,0.30) }
    35%  { box-shadow:0 0 0 5px rgba(15,122,92,0.18) }
    100% { box-shadow:0 0 0 0 rgba(15,122,92,0) }
  }

  /* Responsive: stack image+form on narrow screens */
  @media (max-width:720px){
    .be-body{grid-template-columns:1fr}
    .be-img-col{flex-direction:row;align-items:center}
    .be-img-preview{width:90px;height:60px;flex-shrink:0}
    .be-img-btn{flex:1}
    .ff-row{grid-template-columns:1fr}
    .settings-grid{grid-template-columns:1fr}
    .sc-thumb-col{width:80px}
    .sc-thumb,.sc-thumb.modal-thumb,
    .sc-thumb.modal-thumb--logo,
    .sc-thumb.modal-thumb--watermark{width:80px;height:54px}
    .sc-thumb.modal-thumb--compact-logo{width:54px;height:54px}
  }

  /* Info tip (kept for any future use) */
  .settings-tip{
    display:flex;align-items:flex-start;gap:10px;
    background:#F1F8F4;border:1px solid #C7DED1;border-radius:10px;
    padding:12px 14px;font-size:12.5px;color:var(--green-800);
    line-height:1.5;font-weight:500;
  }
  .settings-tip svg{width:18px;height:18px;flex:none;margin-top:1px;stroke:var(--green-700)}
  body.dark .settings-tip{background:rgba(46,139,106,0.12);border-color:rgba(46,139,106,0.3);color:#5DD8A0}
  body.dark .settings-tip svg{stroke:#5DD8A0}

  /* ===== Modal-section styles (reused on the settings page) ===== */
  .modal-section{
    background:#FAFBFA;border:1px solid #ECEEF0;border-radius:12px;
    padding:16px;margin-bottom:14px;
  }
  .modal-section:last-of-type{margin-bottom:0}
  .modal-section h3{
    font-size:14px;font-weight:700;color:var(--ink);
    margin-bottom:6px;display:flex;align-items:center;gap:8px;
  }
  .modal-section h3 svg{
    width:16px;height:16px;stroke:var(--green-700);fill:none;stroke-width:1.8;
  }
  .modal-section p{
    font-size:12.5px;color:#6B7280;margin-bottom:12px;line-height:1.7;
  }
  .modal-thumb{
    width:100%;max-width:520px;aspect-ratio:16/5;
    border-radius:12px;
    background-size:cover;background-position:center;
    background-color:#E8EDE6;
    border:1px solid #E5E7EB;
    display:block;
  }
  .modal-thumb--logo{
    width:100%;max-width:280px;aspect-ratio:200/90;
    background-color:var(--green-700);
    background-size:contain;background-repeat:no-repeat;background-position:center;
  }
  .modal-thumb--compact-logo{
    width:100%;max-width:120px;aspect-ratio:1/1;
    background-color:var(--green-700);
    background-size:contain;background-repeat:no-repeat;background-position:center;
    border-radius:12px;
  }
  .modal-thumb--watermark{
    width:100%;max-width:280px;aspect-ratio:240/120;
    background-color:var(--green-800);
    background-image:var(--watermark-default);
    background-size:100% auto;background-repeat:no-repeat;background-position:center bottom;
  }
  .modal-actions{display:flex;gap:8px}
  .btn-primary{
    background:var(--green-800);color:#fff;border:0;border-radius:10px;
    padding:10px 16px;font-family:inherit;font-size:13px;font-weight:600;
    cursor:pointer;flex:1;
    transition:background .15s;
  }
  .btn-primary:hover{background:var(--green-700)}
  .btn-secondary{
    background:#fff;color:#374151;
    border:1px solid var(--border);border-radius:10px;
    padding:10px 16px;font-family:inherit;font-size:13px;font-weight:500;
    cursor:pointer;
    transition:background .15s;
  }
  .btn-secondary:hover{background:#F9FAFB}

  /* toast for feedback */
  .toast{
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(10px);
    background:var(--green-800);color:#fff;
    padding:10px 18px;border-radius:10px;font-size:13px;font-weight:500;
    box-shadow:0 8px 24px rgba(0,0,0,0.2);
    opacity:0;pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
    z-index:1100;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  /* ============================================================
     DARK MODE  — activated via body.dark
     ============================================================ */
  /* sun/moon toggle */
  .ico-moon{display:none}
  body.dark .ico-sun{display:none}
  body.dark .ico-moon{display:inline-block}

  body.dark{
    --bg:#0E1620;
    --card:#1A2530;
    --ink:#E5E7EB;
    --muted:#9CA3AF;
    --border:#2A3441;
    --green-50:#1F3A2D;
    background:var(--bg);
    color:var(--ink);
  }

  /* Surfaces — cards, dropdowns, buttons, modal */
  body.dark .kpi,
  body.dark .card,
  body.dark .icon-btn,
  body.dark .profile,
  body.dark .profile-menu,
  body.dark .lang-selector,
  body.dark .lang-menu,
  body.dark .modal{
    background:var(--card);
    border-color:var(--border);
    color:var(--ink);
  }
  body.dark .kpi{box-shadow:0 1px 2px rgba(0,0,0,0.3)}
  body.dark .kpi:hover{box-shadow:0 8px 24px rgba(0,0,0,0.4)}
  body.dark .profile-menu,
  body.dark .lang-menu{box-shadow:0 12px 28px rgba(0,0,0,0.5)}

  /* Hover states for menu items / icon buttons */
  body.dark .icon-btn:hover,
  body.dark .lang-item:hover,
  body.dark .profile-menu-item:hover,
  body.dark .pm-item:hover,
  body.dark .pill-btn{background:#232F3C}
  body.dark .lang-item.active{background:#1F3A2D;color:#E5E7EB}
  body.dark .lang-item{color:#E5E7EB}
  body.dark .pill-btn{color:var(--ink)}

  /* Profile dropdown internals */
  body.dark .pm-header{background:#232F3C;border-bottom-color:var(--border)}
  body.dark .pm-divider{background:var(--border)}
  body.dark .pm-email{color:var(--muted)}
  body.dark .pm-role{color:var(--muted)}

  /* Chart track strokes & subtle borders */
  body.dark .hd-bg,
  body.dark .fd-bg{stroke:#2A3441}
  body.dark .card-half .card-foot{border-top-color:var(--border)}
  body.dark .kpi-label{color:#B7BFC9}
  body.dark .hero-sub,
  body.dark .card-half .foot-num em{color:var(--muted)}

  /* Tone down the bright corner glow in dark mode */
  body.dark .kpi::after{opacity:0.18}
  body.dark .card-hero .hero-ico{background:rgba(255,255,255,0.06)}
  body.dark .card-full .status-badge{background:rgba(255,255,255,0.06)}

  /* Section titles */
  body.dark .section-title{color:var(--ink)}

  /* Settings modal internals */
  body.dark .modal-title{color:var(--ink)}
  body.dark .modal-section{background:transparent;border-color:var(--border)}
  body.dark .modal-section h3{color:var(--ink)}
  body.dark .modal-section p{color:var(--muted)}
  body.dark .modal-thumb{background-color:#2A3441;border-color:var(--border)}
  /* Logo & illustration previews actually render on the green sidebar / themed
     login page (which stay green in dark mode too), so keep their themed green
     backdrop here instead of the dark slate above — otherwise dark-content
     logos blend into the slate and become hard to see. */
  body.dark .modal-thumb--logo,
  body.dark .modal-thumb--compact-logo{background-color:var(--green-700)}
  body.dark .modal-thumb--watermark{background-color:var(--green-800)}

  /* Card-image thumbs in settings: icon-preview tiles */
  .card-thumbs{
    display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px;
  }
  .card-thumbs .ct{
    background:#fff;border:1px solid var(--border);border-radius:12px;
    padding:14px 10px 10px;cursor:pointer;font-family:inherit;
    display:flex;flex-direction:column;align-items:center;gap:8px;
    transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .card-thumbs .ct:hover{
    border-color:var(--green-700);transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(16,24,40,0.08);
  }
  .ct-preview{
    width:64px;height:64px;border-radius:12px;
    background-color:var(--accent-bg,#E8F1ED);
    display:flex;align-items:center;justify-content:center;flex:none;
    background-size:cover;background-position:center;
    overflow:hidden;
  }
  .ct-preview[data-accent="green"]{--accent-bg:#E1ECE6;--accent-fg:#0F4C3A}
  .ct-preview[data-accent="blue"] {--accent-bg:#E4EFF7;--accent-fg:#3879B5}
  .ct-preview[data-accent="teal"] {--accent-bg:#DDEFF1;--accent-fg:#107C8C}
  .ct-preview[data-accent="amber"]{--accent-bg:#FBF1DC;--accent-fg:#C58A1C}
  .ct-icon{width:30px;height:30px;color:var(--accent-fg,#0F4C3A);stroke:currentColor;fill:none}
  .ct-preview.has-img .ct-icon{display:none}
  .ct-preview.has-img{background-color:transparent}
  .ct-label{
    font-size:12px;font-weight:600;color:#5C6770;text-align:center;
    line-height:1.35;
  }
  body.dark .card-thumbs .ct{background:var(--card);border-color:var(--border)}
  body.dark .card-thumbs .ct:hover{border-color:var(--green-500)}
  body.dark .ct-preview{background-color:rgba(255,255,255,0.06)}
  body.dark .ct-label{color:#B7BFC9}
  body.dark .ct-preview[data-accent]{background-color:rgba(255,255,255,0.06)}

  @media (max-width:900px){
    .card-thumbs{grid-template-columns:repeat(3,1fr)}
  }
  @media (max-width:560px){
    .card-thumbs{grid-template-columns:repeat(2,1fr)}
  }

  /* Chart-size / design slider row */
  .size-row{
    display:flex;align-items:center;gap:12px;
    background:#F8F9FA;border:1px solid #ECEEF0;border-radius:10px;
    padding:10px 14px;margin-top:8px;
  }
  body.dark .size-row{background:#2A3441;border-color:var(--border)}
  .size-label{
    font-size:12px;color:#6B7280;font-weight:600;flex:none;
    min-width:110px;line-height:1.3;
  }
  body.dark .size-label{color:#B7BFC9}
  .size-value{
    font-size:12.5px;font-weight:700;color:var(--green-700);
    font-variant-numeric:tabular-nums;min-width:46px;text-align:end;flex:none;
  }
  body.dark .size-value{color:#5DD8A0}
  .size-slider{
    flex:1;-webkit-appearance:none;appearance:none;min-width:0;
    height:6px;border-radius:99px;background:#E5E7EB;
    outline:none;cursor:pointer;
  }
  body.dark .size-slider{background:#3A4654}
  .size-slider::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:18px;height:18px;border-radius:50%;
    background:var(--green-700);
    border:2px solid #fff;
    box-shadow:0 1px 3px rgba(0,0,0,0.2);cursor:grab;
  }
  .size-slider::-moz-range-thumb{
    width:18px;height:18px;border-radius:50%;
    background:var(--green-700);
    border:2px solid #fff;
    box-shadow:0 1px 3px rgba(0,0,0,0.2);cursor:grab;
  }
  body.dark .size-slider::-webkit-slider-thumb{border-color:#1A2530}
  body.dark .size-slider::-moz-range-thumb{border-color:#1A2530}

  /* Edit-mode toggle row */
  .edit-toggle-row{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin-top:14px;padding:12px 14px;
    background:#F8F9FA;border:1px solid #ECEEF0;border-radius:10px;
  }
  body.dark .edit-toggle-row{background:#2A3441;border-color:var(--border)}

  /* iOS-style toggle switch */
  .toggle{
    display:inline-flex;align-items:center;gap:10px;cursor:pointer;
    user-select:none;
  }
  .toggle input{
    position:absolute;width:0;height:0;opacity:0;pointer-events:none;
  }
  .toggle-slider{
    position:relative;display:inline-block;
    width:40px;height:22px;flex:none;
    background:#D5D9DD;border-radius:99px;
    transition:background .2s ease;
  }
  .toggle-slider::before{
    content:"";position:absolute;
    width:16px;height:16px;background:#fff;border-radius:50%;
    top:3px;inset-inline-start:3px;
    box-shadow:0 1px 3px rgba(0,0,0,0.2);
    transition:transform .2s ease;
  }
  .toggle input:checked + .toggle-slider{background:var(--green-700)}
  .toggle input:checked + .toggle-slider::before{
    transform:translateX(-18px);
  }
  /* In LTR direction, the thumb should slide right */
  html[dir="ltr"] .toggle input:checked + .toggle-slider::before{
    transform:translateX(18px);
  }
  body.dark .toggle-slider{background:#3A4654}

  .toggle-text{
    font-size:13px;font-weight:600;color:var(--ink);
  }

  /* Status pill: locked / editing */
  .edit-status{
    display:inline-flex;align-items:center;
    font-size:11.5px;font-weight:700;letter-spacing:.2px;
    padding:4px 10px;border-radius:99px;
  }
  .edit-status.locked{background:#F1F3F5;color:#6B7280}
  .edit-status.editing{background:#FFF4E0;color:#B5680E}
  body.dark .edit-status.locked{background:#2A3441;color:#9CA3AF}
  body.dark .edit-status.editing{background:rgba(217,164,65,0.18);color:#F4B649}

  .edit-hint-text{
    font-size:12px;color:#6B7280;
    margin-top:8px;line-height:1.55;
  }
  body.dark .edit-hint-text{color:#9CA3AF}

  /* Disabled state for confirm/cancel buttons */
  .btn-primary[disabled],
  .btn-secondary[disabled]{
    opacity:.5;cursor:not-allowed;pointer-events:none;
  }

  /* When a card has a custom image, swap the icon */
  .v4-icon.has-img{background:transparent !important;padding:0;overflow:hidden}
  .v4-icon.has-img > svg{display:none}
  .v4-icon .v4-img{
    width:100%;height:100%;object-fit:cover;border-radius:16px;display:block;
    transition:filter .2s ease;
  }
  /* In dark mode, convert uploaded card images to white silhouettes for legibility */
  body.dark .v4-icon.has-img{background:rgba(255,255,255,0.06) !important}
  body.dark .v4-icon .v4-img{filter:brightness(0) invert(1)}
  body.dark .btn-secondary{
    background:var(--card);border-color:var(--border);color:var(--ink);
  }
  body.dark .btn-secondary:hover{background:#232F3C}

  /* ===== Africa map + nationality sidebar ===== */
  .africa-layout{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:16px;
    background:#fff;
    border:1px solid #ECEEF0;
    border-radius:var(--card-radius,16px);
    padding:18px 20px;
    box-shadow:0 1px 2px rgba(16,24,40,0.03);
  }
  body.dark .africa-layout{background:var(--card);border-color:var(--border)}

  #africaMapContainer{display:flex;flex-direction:column;gap:10px;min-width:0}
  .afm-wrap{
    position:relative;
    border-radius:18px;
    padding:0;
    overflow:hidden;
    flex:1;min-height:0;
    display:flex;align-items:center;justify-content:center;
    /* Crystal white — layered translucent whites with subtle cool tint */
    background:
      radial-gradient(ellipse 80% 60% at 30% 20%, rgba(255,255,255,0.95) 0%, transparent 60%),
      radial-gradient(ellipse 70% 60% at 80% 90%, rgba(232,241,237,0.55) 0%, transparent 55%),
      linear-gradient(135deg, #FAFCFB 0%, #F4F8F6 35%, #EDF3F0 65%, #F6F9F7 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.90),
      inset 0 -1px 0 rgba(15,76,58,0.05);
  }
  /* Inner crystal sheen ring */
  .afm-wrap::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.75),
      inset 0 0 40px rgba(255,255,255,0.40);
    z-index:1;
  }
  /* Diagonal sheen for crystal effect */
  .afm-wrap::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:
      linear-gradient(135deg, rgba(255,255,255,0.30) 0%, transparent 30%, transparent 70%, rgba(46,196,140,0.04) 100%);
    z-index:2;
  }
  body.dark .afm-wrap{
    background:
      linear-gradient(135deg, #1A2128 0%, #1F2730 50%, #1A2128 100%);
    box-shadow:inset 0 -1px 0 rgba(0,0,0,0.2);
  }
  /* In dark mode the white crystal sheen looks like odd corner lights — remove it */
  body.dark .afm-wrap::before{
    box-shadow:none;
  }
  body.dark .afm-wrap::after{
    background:none;
  }
  body.dark .afm-svg{
    filter:drop-shadow(0 4px 12px rgba(0,0,0,0.30));
  }
  .afm-svg{
    display:block;width:100%;height:100%;max-height:100%;
    position:relative;z-index:3;
    filter:drop-shadow(0 6px 16px rgba(15,76,58,0.10));
  }

  /* ====== Operations Dashboard 2-column layout ======
     Center: bordered map frame (wide) — stretches to match countries height
     Right (end in RTL): nationality breakdown list */
  .ops-dashboard{margin-top:14px}
  .ops-grid{
    display:grid;
    grid-template-columns:300px minmax(0,1fr) 290px;
    gap:14px;
    align-items:stretch;
    height:clamp(300px, calc(100vh - 400px), 700px);
  }
  .ops-col{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0}
  .ops-col .section-head{margin-bottom:0;flex-shrink:0}
  .ops-col .section-title{font-size:14px}
  /* Both column bodies fill remaining vertical space inside the column */
  .ops-col-map .ops-map-frame,
  .ops-col-countries .afm-sidebar,
  .ops-col-bulletins .bulletin-frame{
    flex:1;
    min-height:0;
  }

  /* ====== Bulletin Cards — daily news/updates ======
     3 cards stacked vertically in the right column (start in RTL).
     Each card has: image with category tag, title, description, and meta info (time + source). */
  /* Bulletin frame — outer card wrapper that holds the header + list */
  .bulletin-frame{
    background:#fff;
    border:1px solid #ECEEF0;
    border-radius:16px;
    padding:14px 14px 12px;
    box-shadow:0 1px 2px rgba(16,24,40,0.03);
    display:flex;flex-direction:column;
    flex:1;min-height:0;
    overflow:hidden;
  }
  body.dark .bulletin-frame{
    background:var(--card);
    border-color:var(--border);
    box-shadow:0 1px 3px rgba(0,0,0,0.20);
  }
  .bulletin-list{
    display:flex;flex-direction:column;
    gap:10px;
    overflow-y:auto;
    overflow-x:hidden;
    padding-inline-end:4px;
    flex:1;min-height:0;
  }
  .bulletin-list::-webkit-scrollbar{width:6px}
  .bulletin-list::-webkit-scrollbar-track{background:transparent}
  .bulletin-list::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.10);border-radius:3px}
  body.dark .bulletin-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.10)}

  .bulletin-card{
    background:#fff;
    border:1px solid #ECEFF2;
    border-radius:12px;
    overflow:hidden;
    display:flex;flex-direction:column;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    cursor:pointer;
    flex-shrink:0;
  }
  .bulletin-card:hover{
    transform:translateY(-2px);
    box-shadow:
      0 10px 24px -6px rgba(11,93,70,0.12),
      0 4px 10px rgba(0,0,0,0.04);
    border-color:#D8F3E8;
  }
  body.dark .bulletin-card{
    background:#1F2937;
    border-color:rgba(255,255,255,0.06);
  }
  body.dark .bulletin-card:hover{
    box-shadow:
      0 10px 24px -6px rgba(0,0,0,0.40),
      0 4px 10px rgba(0,0,0,0.20);
    border-color:rgba(93,216,160,0.30);
  }

  /* Image area — placeholder SVG art with category tag overlay */
  .bc-image{
    position:relative;
    height:78px;
    background:var(--bc-bg, linear-gradient(135deg,#9CA3AF,#6B7280));
    overflow:hidden;
    flex-shrink:0;
  }
  .bc-image-art{
    width:100%;height:100%;display:block;
  }
  .bc-image img{
    width:100%;height:100%;
    object-fit:cover;display:block;
  }

  /* Category tag overlay on image */
  .bc-tag{
    position:absolute;
    top:8px;inset-inline-start:8px;
    padding:2px 8px;
    font-size:9.5px;font-weight:700;letter-spacing:.4px;
    border-radius:4px;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    box-shadow:0 2px 6px rgba(0,0,0,0.12);
  }
  .bc-tag--success{color:#0F7A5C}
  .bc-tag--info   {color:#0891B2}
  .bc-tag--warn   {color:#7C3AED}

  /* Card body */
  .bc-body{
    padding:10px 12px 11px;
    display:flex;flex-direction:column;gap:4px;
    flex:1;
  }
  .bc-title{
    font-size:12.5px;font-weight:700;
    color:#111827;letter-spacing:.1px;
    line-height:1.35;
    margin:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  body.dark .bc-title{color:#fff}
  .bc-desc{
    font-size:11px;
    color:#6B7280;
    line-height:1.5;
    margin:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  body.dark .bc-desc{color:#B7BFC9}
  .bc-meta{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    margin-top:auto;
    padding-top:6px;
    border-top:1px solid #F1F3F4;
    font-size:10px;
  }
  body.dark .bc-meta{border-top-color:rgba(255,255,255,0.06)}
  .bc-time{
    display:inline-flex;align-items:center;gap:4px;
    color:#9CA3AF;font-weight:500;
  }
  .bc-time svg{width:11px;height:11px;flex-shrink:0;opacity:.7}
  .bc-source{
    color:#0F7A5C;font-weight:600;
    padding:1px 6px;
    background:#E8F7F1;
    border-radius:4px;
  }
  body.dark .bc-source{color:#5DD8A0;background:rgba(46,196,140,0.12)}

  /* ====== Hero — text content + weather/date info panel on the left ======
     Layout: flex-row. Hero text on the right (start in RTL), info panel on the left (end in RTL). */
  .hero{display:flex;flex-direction:row;align-items:stretch;gap:18px}
  .hero-content{
    flex:1;min-width:0;max-width:none;
    margin:0;
    display:flex;flex-direction:column;justify-content:center;
    padding-block:0;
  }
  .hero h1{font-size:calc(30px * var(--hero-scale,1));margin-bottom:calc(4px * var(--hero-scale,1));line-height:1.2}
  .hero h1 .row2{font-size:calc(19px * var(--hero-scale,1));font-weight:500;opacity:.88}
  .hero p{font-size:calc(13px * var(--hero-scale,1));margin-top:calc(8px * var(--hero-scale,1));line-height:1.65;max-width:440px;color:#d8e8de}
  .hero-status{
    display:inline-flex;align-items:center;gap:8px;
    margin-bottom:calc(10px * var(--hero-scale,1));
    padding:5px 13px;
    font-size:11.5px;font-weight:500;
    background:rgba(255,255,255,0.12);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:999px;
    color:#e7f0eb;letter-spacing:.2px;
    align-self:flex-start;
    width:fit-content;
  }

  /* ====== Info Panel — glass card with weather + date ====== */
  .hero-info-panel{
    flex:0 0 200px;
    background:
      linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 100%);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:14px;
    padding:16px 16px 18px;
    display:flex;flex-direction:column;justify-content:center;gap:12px;
    color:#fff;
    box-shadow:
      0 12px 28px rgba(0,0,0,0.20),
      inset 0 1px 0 rgba(255,255,255,0.14),
      inset 0 -1px 0 rgba(0,0,0,0.10);
    align-self:stretch;
    position:relative;
    overflow:hidden;
    animation:panelFloat 5.5s ease-in-out infinite;
  }
  /* Floating glass weather + date pill — top-left of banner */
  .hero-weather-pill{
    position:absolute;
    top:16px;
    left:20px;
    right:auto;
    z-index:6;
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 15px;
    border-radius:999px;
    background:rgba(255,255,255,0.13);
    backdrop-filter:blur(10px) saturate(140%);
    -webkit-backdrop-filter:blur(10px) saturate(140%);
    border:1px solid rgba(255,255,255,0.22);
    box-shadow:0 6px 20px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.18);
    color:#fff;
    font-size:12.5px;font-weight:600;
    white-space:nowrap;
    direction:rtl;
  }
  .hero-weather-pill .hwp-icon{width:20px;height:20px;flex:none;display:inline-flex}
  .hero-weather-pill .hwp-icon .weather-sun{width:100%;height:100%;filter:drop-shadow(0 0 5px rgba(255,193,7,0.6))}
  .hero-weather-pill .hwp-temp{font-size:14px;font-weight:800;letter-spacing:.3px}
  .hero-weather-pill .hwp-sep{opacity:.45;font-weight:400}
  .hero-weather-pill .hwp-loc{font-weight:700}
  .hero-weather-pill .hwp-cond{font-weight:500;opacity:.9}
  .hero-weather-pill .hwp-date{font-weight:600;opacity:.88;font-variant-numeric:tabular-nums}
  @media (max-width:760px){ .hero-weather-pill .hwp-cond, .hero-weather-pill .hwp-date{display:none} .hero-weather-pill .hwp-cond + .hwp-sep, .hero-weather-pill .hwp-loc + .hwp-sep{display:none} }
  /* Trim hero padding when an info panel is present so the panel has more vertical room */
  .hero{padding:calc(14px * var(--hero-scale,1)) calc(36px * var(--hero-scale,1)) calc(18px * var(--hero-scale,1))}
  /* Subtle gradient accent at top-left corner */
  .hero-info-panel::before{
    content:"";
    position:absolute;
    top:-30px;inset-inline-end:-30px;
    width:110px;height:110px;
    background:radial-gradient(circle, rgba(93,227,176,0.18) 0%, transparent 60%);
    pointer-events:none;
    z-index:0;
  }
  .hero-info-panel > *{position:relative;z-index:1}

  @keyframes panelFloat{
    0%, 100% { transform: translateY(0) }
    50%      { transform: translateY(-2.5px) }
  }

  /* Weather block */
  .hip-weather{display:flex;align-items:center;gap:12px}
  .hip-w-icon{width:58px;height:58px;flex-shrink:0;position:relative}
  .weather-sun{
    width:100%;height:100%;
    filter:drop-shadow(0 0 8px rgba(255,193,7,0.55)) drop-shadow(0 0 16px rgba(255,165,30,0.25));
  }
  .sun-rays{
    transform-origin:32px 32px;
    transform-box:fill-box;
    animation:sunRotate 22s linear infinite;
  }
  .sun-core{
    transform-origin:32px 32px;
    transform-box:fill-box;
    animation:sunPulse 2.8s ease-in-out infinite;
  }
  @keyframes sunRotate{
    to { transform: rotate(360deg) }
  }
  @keyframes sunPulse{
    0%, 100% { transform: scale(1);    opacity: 0.95 }
    50%      { transform: scale(1.07); opacity: 1.00 }
  }

  .hip-w-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .hip-w-temp{
    display:flex;align-items:baseline;
    line-height:1;
    margin-bottom:1px;
  }
  .hip-w-temp-num{
    font-size:30px;font-weight:700;color:#fff;
    letter-spacing:-.5px;font-variant-numeric:tabular-nums;
    text-shadow:0 1px 8px rgba(0,0,0,0.18);
  }
  .hip-w-temp-unit{
    font-size:22px;font-weight:500;
    color:rgba(255,255,255,0.65);margin-inline-start:1px;
  }
  .hip-w-cond{
    font-size:11.5px;font-weight:500;
    color:rgba(255,255,255,0.88);letter-spacing:.2px;
  }
  .hip-w-loc{
    display:flex;align-items:center;gap:4px;
    font-size:10.5px;color:rgba(255,255,255,0.62);
    margin-top:3px;
  }
  .hip-w-loc-ico{width:11px;height:11px;flex-shrink:0;opacity:.85}

  /* Divider */
  .hip-divider{
    height:1px;flex-shrink:0;
    background:linear-gradient(to right,
      transparent,
      rgba(255,255,255,0.20) 50%,
      transparent);
  }

  /* Date block */
  .hip-date{display:flex;flex-direction:column;gap:5px}
  .hip-day{
    font-size:11px;font-weight:600;
    color:rgba(255,255,255,0.72);letter-spacing:.4px;
    text-transform:uppercase;
    margin-bottom:1px;
  }
  .hip-hijri{
    display:flex;align-items:baseline;gap:7px;flex-wrap:nowrap;
    font-variant-numeric:tabular-nums;
    line-height:1.2;
  }
  .hip-hijri-num{
    font-size:19px;font-weight:700;color:#fff;
    letter-spacing:-.2px;
  }
  .hip-hijri-month{
    font-size:13.5px;font-weight:600;color:#fff;
  }
  .hip-hijri-year{
    font-size:11px;font-weight:500;color:rgba(255,255,255,0.65);
  }
  .hip-greg{
    font-size:11px;font-weight:400;
    color:rgba(255,255,255,0.62);
    font-variant-numeric:tabular-nums;letter-spacing:.3px;
    margin-top:1px;
  }

  /* Responsive */
  @media (max-width:1280px){
    .hero-info-panel{flex:0 0 240px;padding:12px 14px}
    .hip-w-temp-num{font-size:26px}
    .hip-w-temp-unit{font-size:19px}
    .hip-w-icon{width:50px;height:50px}
    .hip-hijri-num{font-size:16px}
    .hip-hijri-month{font-size:12px}
  }
  @media (max-width:980px){
    .hero{flex-direction:column;height:auto !important;padding-bottom:14px !important}
    .hero-info-panel{flex:none;align-self:stretch;max-height:none;max-width:none;flex-direction:row;align-items:center;height:auto}
    .hero-info-panel .hip-divider{display:none}
    .hip-date{margin-inline-start:auto;text-align:end}
  }

  /* ============================================================
     MAP FRAME — Plain white outer card
     ============================================================ */
  .ops-map-frame{
    position:relative;
    background:#fff;
    border:1px solid #ECEEF0;
    border-radius:16px;
    padding:14px;
    box-shadow:0 1px 2px rgba(16,24,40,0.03);
    display:flex;flex-direction:column;gap:12px;
    overflow:hidden;
  }
  body.dark .ops-map-frame{
    background:var(--card);
    border:1px solid rgba(255,255,255,0.10);
    box-shadow:0 1px 3px rgba(0,0,0,0.20);
  }

  .ops-map-frame .afm-legend{
    margin-top:auto;
    padding-top:10px;
    border-top:1px solid rgba(0,0,0,0.06);
  }
  body.dark .ops-map-frame .afm-legend{border-top-color:rgba(255,255,255,0.06)}

  /* Country list column — fills column height via flex, list scrolls internally */
  .ops-col-countries .afm-sidebar{
    width:100%;margin:0;
    display:flex;flex-direction:column;
  }
  .ops-col-countries .afs-list{
    flex:1;min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding-inline-end:4px;
  }
  /* Slim scrollbar for the list */
  .ops-col-countries .afs-list::-webkit-scrollbar{width:6px}
  .ops-col-countries .afs-list::-webkit-scrollbar-track{background:transparent}
  .ops-col-countries .afs-list::-webkit-scrollbar-thumb{background:rgba(216,243,232,0.18);border-radius:3px}
  .ops-col-countries .afs-list::-webkit-scrollbar-thumb:hover{background:rgba(216,243,232,0.32)}

  /* Responsive */
  @media (max-width:1280px){
    .ops-grid{grid-template-columns:minmax(0,1fr) 260px;gap:10px}
    .kpis-hero{grid-template-columns:repeat(5, minmax(0,1fr));gap:6px}
    .kpis-hero .kpi-v4{padding:8px 10px;gap:8px}
    .kpis-hero .v4-val{font-size:15px}
    .kpis-hero .v4-label{font-size:10px}
  }
  @media (max-width:980px){
    /* stacked single column AND release the fixed row height (otherwise the
       three stacked columns share a small clamped height and collapse) */
    .ops-grid{grid-template-columns:1fr;gap:12px;height:auto}
    .ops-col{min-height:0}
    .ops-col-bulletins .bulletin-frame{flex:none;height:auto}
    .bulletin-list{flex:none;height:auto;max-height:none;overflow:visible}
    .ops-col-map .ops-map-frame{flex:none;height:auto}
    .ops-col-map .afm-wrap{flex:none;height:auto;min-height:0;display:block;padding:8px}
    .afm-svg{height:auto;max-height:none;width:100%;aspect-ratio:2050/1100}
    .ops-col-countries .afm-sidebar{flex:none;height:auto;max-height:none}
    .kpis.kpis-hero{grid-template-columns:repeat(3, 1fr)}
  }
  @media (max-width:600px){
    .kpis.kpis-hero{grid-template-columns:repeat(2, 1fr)}
  }

  /* Base country fill — context (non-data) countries: soft slate for crystal white background */
  .afm-country{
    fill:#D8DEE4;
    stroke:rgba(255,255,255,0.65);
    stroke-width:0.45;
    stroke-linejoin:round;
    transition:fill .2s ease, filter .2s ease, transform .2s ease;
    transform-origin:center;
    transform-box:fill-box;
  }
  body.dark .afm-country{fill:#3A4754;stroke:rgba(255,255,255,0.06);stroke-width:0.4}

  /* Background tile under flag for highlighted countries */
  .afm-country.reg-bg{
    fill:#E2E8EC;
    stroke:rgba(255,255,255,0.80);
    stroke-width:0.55;
  }
  body.dark .afm-country.reg-bg{fill:#42505C;stroke:rgba(255,255,255,0.10)}

  /* Interactive border layer on top of flag images */
  .afm-country.reg{
    fill:transparent;
    stroke:rgba(255,255,255,0.95);
    stroke-width:1.4;
    stroke-linejoin:round;
    cursor:pointer;
    transition:stroke .2s ease, stroke-width .2s ease, fill .2s ease, filter .25s ease;
    filter:drop-shadow(0 1px 2px rgba(15,76,58,0.12));
  }
  body.dark .afm-country.reg{
    fill:transparent;
    stroke:rgba(255,255,255,0.78);
  }
  .afm-country.reg:hover,
  .afm-country.reg.highlight{
    stroke:#2EC48C;
    stroke-width:2.6;
    fill:rgba(46,196,140,0.10);
    filter:drop-shadow(0 4px 12px rgba(46,196,140,0.35)) drop-shadow(0 0 4px rgba(46,196,140,0.25));
  }
  body.dark .afm-country.reg:hover,
  body.dark .afm-country.reg.highlight{
    stroke:#5DE3B0;
    stroke-width:2.6;
    fill:rgba(93,227,176,0.14);
    filter:drop-shadow(0 4px 12px rgba(93,227,176,0.55)) drop-shadow(0 0 4px rgba(93,227,176,0.35));
  }
  .afm-country.reg.tbd{stroke-dasharray:3,2}

  /* Flag image — fills country shape with natural proportions (clipped to border) */
  .afm-flag-img{
    opacity:0.95;
    pointer-events:none;
  }
  .afm-flag-img.tbd{filter:grayscale(0.85);opacity:0.45}

  /* Region labels (subtle, in unused water/space) */
  .afm-region-label{
    font-size:14px;
    font-weight:600;
    fill:#9CA3AF;
    font-family:inherit;
    letter-spacing:.4px;
    opacity:0.75;
    pointer-events:none;
  }
  body.dark .afm-region-label{fill:#6B7280}

  /* Legend */
  .afm-legend{
    display:flex;gap:18px;flex-wrap:wrap;
    padding:6px 4px 0;font-size:12px;color:var(--muted);
  }
  body.dark .afm-legend{color:#9CA3AF}
  .afm-leg-item{display:inline-flex;align-items:center;gap:6px}
  .afm-leg-dot{display:inline-block;width:18px;height:11px;border-radius:3px}
  .afm-leg-dot.flag{
    background:linear-gradient(90deg,#C8102E 0 33%,#fff 33% 66%,#006847 66% 100%);
    border:1px solid rgba(0,0,0,0.08);
  }
  .afm-leg-dot.tbd{background:#E0E0E0;filter:grayscale(0.8);opacity:0.55}
  .afm-leg-dot.gray{background:#DCE2E5}
  .afm-leg-dot.intl{
    background:linear-gradient(90deg,#0F4C3A 0%,#0F4C3A 50%,#2E8B6A 50%,#2E8B6A 100%);
    border:1px dashed rgba(255,255,255,0.5);
  }
  body.dark .afm-leg-dot.gray{background:#3A4654}

  /* ============================================================
     NATIONALITY BREAKDOWN — Plain white sidebar
     ============================================================ */
  .afm-sidebar{
    position:relative;
    background:#fff;
    color:var(--ink);
    border:1px solid #ECEEF0;
    border-radius:16px;
    padding:14px;
    display:flex;flex-direction:column;gap:12px;
    box-shadow:0 1px 2px rgba(16,24,40,0.03);
    overflow:hidden;
  }
  body.dark .afm-sidebar{
    background:var(--card);
    color:#E5E7EB;
    border:1px solid rgba(255,255,255,0.10);
    box-shadow:0 1px 3px rgba(0,0,0,0.20);
  }

  /* Stats row */
  .afs-stats-row{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  }
  .afs-stat{
    background:#F9FAFB;
    border:1px solid #ECEEF0;
    border-radius:10px;
    padding:10px 6px;
    text-align:center;
  }
  body.dark .afs-stat{
    background:rgba(255,255,255,0.04);
    border-color:rgba(255,255,255,0.08);
  }
  .afs-stat-val{
    font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;
    margin-bottom:2px;line-height:1.1;
    color:var(--green-700);
  }
  body.dark .afs-stat-val{color:#5DE3B0}
  .afs-stat-sub{font-size:11px;opacity:0.65;font-weight:600;color:var(--ink)}
  body.dark .afs-stat-sub{color:#9CA3AF}
  .afs-stat-lbl{font-size:10.5px;color:#6B7280;font-weight:500}
  body.dark .afs-stat-lbl{color:#9CA3AF}

  .afs-title{
    font-size:12px;font-weight:600;
    color:#6B7280;
    padding-bottom:8px;
    border-bottom:1px solid rgba(0,0,0,0.06);
    margin-top:2px;
    letter-spacing:.2px;
  }
  body.dark .afs-title{color:#9CA3AF;border-bottom-color:rgba(255,255,255,0.08)}

  .afs-list{
    display:flex;flex-direction:column;gap:5px;
    max-height:420px;overflow-y:auto;
    padding-inline-end:4px;
    flex:1;min-height:0;
  }
  .afs-list::-webkit-scrollbar{width:4px}
  .afs-list::-webkit-scrollbar-track{background:transparent}
  .afs-list::-webkit-scrollbar-thumb{background:rgba(15,76,58,0.15);border-radius:2px}
  .afs-list::-webkit-scrollbar-thumb:hover{background:rgba(15,76,58,0.28)}
  body.dark .afs-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15)}

  .afs-nat{
    display:grid;grid-template-columns:24px 1fr auto;
    align-items:center;gap:10px;
    padding:8px 10px;
    background:#F9FAFB;
    border:1px solid #ECEEF0;
    border-radius:9px;
    cursor:pointer;
    transition:all .18s ease;
  }
  body.dark .afs-nat{
    background:rgba(255,255,255,0.03);
    border-color:rgba(255,255,255,0.06);
  }
  .afs-nat:hover,
  .afs-nat.highlight{
    background:rgba(46,196,140,0.08);
    border-color:rgba(46,196,140,0.25);
    transform:translateX(-2px);
  }
  body.dark .afs-nat:hover,
  body.dark .afs-nat.highlight{
    background:rgba(46,196,140,0.10);
    border-color:rgba(46,196,140,0.20);
  }
  .afs-nat-flag{
    width:24px;height:16px;border-radius:3px;object-fit:cover;
    box-shadow:0 1px 3px rgba(0,0,0,0.12);
  }
  .afs-nat-name{font-size:12.5px;font-weight:500;color:var(--ink)}
  body.dark .afs-nat-name{color:#E5E7EB}
  .afs-nat-total{
    font-size:13px;font-weight:700;color:var(--ink);
    font-variant-numeric:tabular-nums;
  }
  body.dark .afs-nat-total{color:#E5E7EB}
  .afs-nat.tbd{opacity:0.55}
  .afs-nat.tbd .afs-nat-total{font-size:10.5px;font-weight:500}

  @media (max-width:980px){
    .africa-layout{grid-template-columns:1fr}
  }

  /* Search input (if any) */
  body.dark input,
  body.dark .search-input{
    background:var(--card);border-color:var(--border);color:var(--ink);
  }
  body.dark input::placeholder{color:var(--muted)}

  /* Topnav links */
  body.dark .topnav a{color:#B7BFC9}
  body.dark .topnav a.active,
  body.dark .topnav a:hover{color:var(--ink)}

  /* Notification red dot keeps color */
  body.dark .notif-dot{box-shadow:0 0 0 2px var(--card)}

  /* Toast */
  body.dark .toast{background:#0F1A23;color:var(--ink);border-color:var(--border)}
/* ============================================================
   PERFORMANCE — promote animated overlays to GPU layers
   so opening modals/viewers stays at 60fps (no repaint thrash)
   ============================================================ */
.flight-modal-card,
.user-modal-card,
.att-viewer-card,
.flight-modal,
.att-viewer,
.user-modal{
  will-change:transform,opacity;
  transform:translateZ(0);
  backface-visibility:hidden;
}
/* PDF/image preview: isolate so it doesn't repaint the whole page */
.att-viewer-body{contain:layout paint;transform:translateZ(0)}
.att-viewer-body iframe{will-change:auto}
/* Table rows: cheaper hover (only background, already set) + contain reflow */
.flights-table-scroll{contain:layout paint}

/* ===================== INTER-CITY TRAVEL ===================== */
.ic-route{
  display:inline-flex;align-items:center;gap:6px;direction:rtl;
  font-size:11.5px;font-weight:600;color:#334155;
}
body.dark .ic-route{color:#E2E8F0}
.ic-route-city{white-space:nowrap}
.ic-route-arrow{color:#0F7A5C;flex:none;display:inline-flex}
body.dark .ic-route-arrow{color:#5DE3B0}
/* status badges */
.ic-status{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;
}
.ic-status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.ic-status-sched{background:#EFF6FF;color:#2563EB}
.ic-status-dep{background:#FEF9E7;color:#B7791F}
.ic-status-done{background:#DCFCE7;color:#15803D}
.ic-status-cancel{background:#FEE2E2;color:#DC2626}
body.dark .ic-status-sched{background:rgba(37,99,235,.18);color:#93C5FD}
body.dark .ic-status-dep{background:rgba(183,121,31,.18);color:#FCD34D}
body.dark .ic-status-done{background:rgba(34,197,94,.18);color:#4ADE80}
body.dark .ic-status-cancel{background:rgba(220,38,38,.18);color:#F87171}

/* Inter-city: import-from-flight box + route hint */
.ic-import-box{
  background:linear-gradient(135deg,rgba(15,122,92,.06),rgba(46,196,140,.04));
  border:1px solid rgba(15,122,92,.18);border-radius:12px;
  padding:13px 15px;margin-bottom:18px;
}
body.dark .ic-import-box{background:rgba(46,196,140,.06);border-color:rgba(46,196,140,.2)}
.ic-import-label{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:#0F7A5C;margin-bottom:8px}
body.dark .ic-import-label{color:#5DE3B0}
.ic-import-box select{
  width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:9px;
  font-family:inherit;font-size:12.5px;background:#fff;color:var(--ink);cursor:pointer;
}
body.dark .ic-import-box select{background:#1E2A36;color:#E5E7EB;border-color:rgba(255,255,255,.1)}
.ic-import-help{margin:8px 0 0;font-size:10.5px;color:#94A3B8;line-height:1.5}
.ic-route-hint{margin:10px 0 0;font-size:11px;font-weight:600;color:#0F7A5C;display:flex;align-items:center;gap:5px}
body.dark .ic-route-hint{color:#5DE3B0}

/* Inter-city: train trips stat accent */
.fstat-train::before{background:#0284C7}
.fstat-train .fstat-icon{background:rgba(2,132,199,0.10);color:#0284C7}
body.dark .fstat-train .fstat-icon{background:rgba(2,132,199,0.20);color:#7DD3FC}

/* Inter-city: vehicle depart/arrive times inside transport cell */
.ic-vtime{display:flex;align-items:center;gap:4px;direction:rtl;font-size:10.5px;font-weight:600;color:#475569;font-variant-numeric:tabular-nums}
body.dark .ic-vtime{color:#94A3B8}
.ic-vtime-lbl{font-size:9.5px;font-weight:500;opacity:.75}
.ic-vtime-val{font-weight:700;color:#0F766E}
body.dark .ic-vtime-val{color:#5EEAD4}
.ic-vtime .t-num{direction:ltr}
.ic-vtime .t-period{font-size:9px;opacity:.8}

/* Inter-city: route from/to cell — city + housing name + contract chip */
.ic-loc-stack{display:inline-flex;flex-direction:column;align-items:center;gap:3px}
.ic-loc-city{font-size:11.5px;font-weight:700;color:#0F4C3A}
body.dark .ic-loc-city{color:#5DE3B0}
.ic-loc-name{font-size:10.5px;font-weight:500;color:#64748B;max-width:130px;line-height:1.3}
body.dark .ic-loc-name{color:#94A3B8}

/* Inter-city: location pin chip (red) beside contract chip */
.ic-loc-chips{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center}
.ic-loc-pin{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;flex:none;padding:0;cursor:pointer;
  border:1.5px solid #FCA5A5;border-radius:7px;background:#FEF2F2;color:#DC2626;
  transition:all .15s ease;
}
.ic-loc-pin svg{width:13px;height:13px}
.ic-loc-pin:hover{background:#DC2626;color:#fff;border-color:#DC2626;transform:translateY(-1px)}
body.dark .ic-loc-pin{background:rgba(220,38,38,.15);border-color:rgba(220,38,38,.4);color:#F87171}
body.dark .ic-loc-pin:hover{background:#DC2626;color:#fff}

/* Inter-city: nationality cell with flag */
.ic-nat{display:inline-flex;align-items:center;gap:6px;direction:rtl;font-size:11.5px;font-weight:600}
.ic-flag{width:20px;height:14px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.08);flex:none}
body.dark .ic-flag{box-shadow:0 0 0 1px rgba(255,255,255,.15)}

/* ===================== NOTIFICATIONS PANEL ===================== */
.notif-wrap{position:relative;display:inline-flex}
.notif-panel{
  position:absolute;top:calc(100% + 10px);inset-inline-end:0;
  width:340px;max-width:90vw;z-index:200;
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 16px 40px rgba(16,24,40,0.18);overflow:hidden;
}
body.dark .notif-panel{background:#1E2730;border-color:rgba(255,255,255,0.08)}
.notif-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;border-bottom:1px solid var(--border);
}
.notif-panel-title{font-size:13.5px;font-weight:800;color:var(--ink)}
body.dark .notif-panel-title{color:#F1F5F9}
.notif-readall{
  background:none;border:none;cursor:pointer;font-family:inherit;
  font-size:11px;font-weight:700;color:#0F7A5C;padding:0;
}
body.dark .notif-readall{color:#5DE3B0}
.notif-readall:hover{text-decoration:underline}
.notif-list{max-height:380px;overflow-y:auto}
.notif-item{
  display:flex;gap:11px;padding:12px 16px;cursor:pointer;
  border-bottom:1px solid var(--border);transition:background .12s ease;position:relative;
}
.notif-item:hover{background:rgba(15,122,92,0.04)}
body.dark .notif-item:hover{background:rgba(255,255,255,0.03)}
.notif-item:not(.read)::before{
  content:'';position:absolute;inset-inline-start:6px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:#0F7A5C;
}
.notif-item.read{opacity:.62}
.notif-item-icon{
  width:32px;height:32px;flex:none;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
}
.notif-item-icon svg{width:16px;height:16px}
.notif-info .notif-item-icon{background:rgba(37,99,235,0.10);color:#2563EB}
.notif-success .notif-item-icon{background:rgba(34,197,94,0.12);color:#15803D}
.notif-warning .notif-item-icon{background:rgba(217,119,6,0.12);color:#B7791F}
.notif-danger .notif-item-icon{background:rgba(220,38,38,0.12);color:#DC2626}
.notif-item-body{flex:1;min-width:0}
.notif-item-title{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.4}
body.dark .notif-item-title{color:#E5E7EB}
.notif-item-text{font-size:11.5px;color:#6B7280;margin-top:2px;line-height:1.45}
.notif-item-time{font-size:10px;color:#9AA4B2;margin-top:4px;font-weight:500}
.notif-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 16px;color:#9AA4B2}
.notif-empty p{font-size:12px;margin:0}

/* Settings: manage notifications list */
.notif-manage-row{
  display:flex;align-items:center;gap:11px;padding:11px 0;
  border-bottom:1px solid var(--border);
}
.notif-mr-icon{width:30px;height:30px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center}
.notif-mr-icon svg{width:15px;height:15px}
.notif-mr-icon.notif-info{background:rgba(37,99,235,0.10);color:#2563EB}
.notif-mr-icon.notif-success{background:rgba(34,197,94,0.12);color:#15803D}
.notif-mr-icon.notif-warning{background:rgba(217,119,6,0.12);color:#B7791F}
.notif-mr-icon.notif-danger{background:rgba(220,38,38,0.12);color:#DC2626}
.notif-mr-body{flex:1;min-width:0}
.notif-mr-title{font-size:12.5px;font-weight:700;color:var(--ink)}
body.dark .notif-mr-title{color:#E5E7EB}
.notif-mr-text{font-size:11px;color:#6B7280;margin-top:2px}
.notif-mr-time{font-size:10px;color:#9AA4B2;margin-top:3px}
.notif-mr-del{
  width:30px;height:30px;flex:none;border:1px solid var(--border);border-radius:8px;
  background:none;cursor:pointer;color:#DC2626;display:flex;align-items:center;justify-content:center;
  transition:all .12s ease;
}
.notif-mr-del:hover{background:#FEE2E2;border-color:#FCA5A5}
body.dark .notif-mr-del:hover{background:rgba(220,38,38,0.15)}

/* ===================== HOUSING READINESS DASHBOARD ===================== */
/* === Control-center layout === */
/* 1. Hero: big gauge + integrated stat strip */
.hr-hero{
  display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:stretch;
  margin:4px 0 16px;
}
@media (max-width:900px){ .hr-hero{grid-template-columns:1fr} }
.hr-hero-gauge{
  background:linear-gradient(135deg, rgba(15,76,58,0.04), rgba(15,122,92,0.02));
  border:1px solid var(--border);border-radius:20px;
  display:flex;align-items:center;justify-content:center;padding:16px;
  box-shadow:0 1px 3px rgba(16,24,40,0.04);
}
body.dark .hr-hero-gauge{background:linear-gradient(135deg,#1E2730,#1A222B);border-color:rgba(255,255,255,0.07)}
.hr-gauge-wrap{position:relative;width:132px;height:132px}
.hr-gauge-svg{width:100%;height:100%;transform:rotate(-90deg)}
.hr-gauge-bg{fill:none;stroke:rgba(15,122,92,0.10);stroke-width:10}
body.dark .hr-gauge-bg{stroke:rgba(255,255,255,0.08)}
.hr-gauge-fg{fill:none;stroke:#16A34A;stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1), stroke .4s ease}
.hr-gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.hr-gauge-val{font-size:30px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:.5px}
body.dark .hr-gauge-val{color:#F8FAFC}
.hr-gauge-lbl{font-size:10.5px;color:#6B7280;font-weight:600}
.hr-gauge-status{margin-top:4px;font-size:9.5px;font-weight:800;color:#fff;padding:2px 10px;border-radius:999px;background:#16A34A}
/* Hero stat strip */
.hr-hero-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
@media (max-width:560px){ .hr-hero-stats{grid-template-columns:repeat(2,1fr)} }
.hr-hstat{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:16px 18px;display:flex;align-items:center;gap:13px;position:relative;overflow:hidden;
  box-shadow:0 1px 3px rgba(16,24,40,0.04);transition:transform .18s ease, box-shadow .18s ease;
}
.hr-hstat:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(16,24,40,0.10)}
body.dark .hr-hstat{background:#1E2730;border-color:rgba(255,255,255,0.07)}
.hr-hstat::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px}
.hr-hstat.tone-blue::before{background:#2563EB}
.hr-hstat.tone-green::before{background:#16A34A}
.hr-hstat.tone-amber::before{background:#CA8A04}
.hr-hstat.tone-red::before{background:#DC2626}
.hr-hstat.tone-teal::before{background:#0D9488}
.hr-hstat.tone-violet::before{background:#7C3AED}
.hr-hstat-icon{width:42px;height:42px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center}
.hr-hstat-icon svg{width:20px;height:20px}
.hr-hstat.tone-blue   .hr-hstat-icon{background:rgba(37,99,235,0.10);color:#2563EB}
.hr-hstat.tone-green  .hr-hstat-icon{background:rgba(22,163,74,0.10);color:#16A34A}
.hr-hstat.tone-amber  .hr-hstat-icon{background:rgba(202,138,4,0.12);color:#CA8A04}
.hr-hstat.tone-red    .hr-hstat-icon{background:rgba(220,38,38,0.10);color:#DC2626}
.hr-hstat.tone-teal   .hr-hstat-icon{background:rgba(13,148,136,0.10);color:#0D9488}
.hr-hstat.tone-violet .hr-hstat-icon{background:rgba(124,58,237,0.10);color:#7C3AED}
body.dark .hr-hstat.tone-blue   .hr-hstat-icon{background:rgba(37,99,235,0.20);color:#93C5FD}
body.dark .hr-hstat.tone-green  .hr-hstat-icon{background:rgba(22,163,74,0.20);color:#86EFAC}
body.dark .hr-hstat.tone-amber  .hr-hstat-icon{background:rgba(202,138,4,0.22);color:#FCD34D}
body.dark .hr-hstat.tone-red    .hr-hstat-icon{background:rgba(220,38,38,0.18);color:#F87171}
body.dark .hr-hstat.tone-teal   .hr-hstat-icon{background:rgba(13,148,136,0.20);color:#5EEAD4}
body.dark .hr-hstat.tone-violet .hr-hstat-icon{background:rgba(124,58,237,0.20);color:#C4B5FD}
.hr-hstat-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.hr-hstat-val{font-size:24px;font-weight:800;color:var(--ink);line-height:1.1}
body.dark .hr-hstat-val{color:#F1F5F9}
.hr-hstat-lbl{font-size:11.5px;color:#6B7280;font-weight:600}
body.dark .hr-hstat-lbl{color:#9CA3AF}

/* Generic block + heading */
.hr-block{margin-bottom:20px}
.hr-block-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.hr-block-title{font-size:15px;font-weight:800;color:var(--ink);margin:0}
body.dark .hr-block-title{color:#F1F5F9}
.hr-block-hint{font-size:11.5px;color:#9AA4B2;font-weight:500}
.hr-crit-count{margin-inline-start:auto;background:rgba(202,138,4,0.12);color:#B7791F;font-size:12px;font-weight:800;padding:3px 12px;border-radius:999px}
.hr-crit-count.danger{background:rgba(220,38,38,0.12);color:#DC2626}
body.dark .hr-crit-count{background:rgba(202,138,4,0.18)}
body.dark .hr-crit-count.danger{background:rgba(220,38,38,0.18)}

/* 2. Section interactive cards */
.hr-sections-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media (max-width:1280px){ .hr-sections-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .hr-sections-grid{grid-template-columns:repeat(2,1fr)} }
.hr-sec-card{
  background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 13px;
  display:flex;align-items:center;gap:11px;cursor:pointer;text-align:start;width:100%;
  font-family:inherit;box-shadow:0 1px 3px rgba(16,24,40,0.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hr-sec-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(16,24,40,0.12);border-color:rgba(15,122,92,0.3)}
body.dark .hr-sec-card{background:#1E2730;border-color:rgba(255,255,255,0.07)}
body.dark .hr-sec-card:hover{border-color:rgba(93,227,176,0.3)}
.hr-sec-ring-wrap{position:relative;width:50px;height:50px;flex:none}
.hr-sec-ring{width:100%;height:100%;transform:rotate(-90deg)}
.hr-sec-ring-bg{fill:none;stroke:rgba(15,122,92,0.10);stroke-width:5}
body.dark .hr-sec-ring-bg{stroke:rgba(255,255,255,0.08)}
.hr-sec-ring-fg{fill:none;stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .8s ease}
.hr-sec-ring-ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:17px}
.hr-sec-ico-grey{color:#64748B}
body.dark .hr-sec-ico-grey{color:#94A3B8}
.hr-sec-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.hr-sec-name{font-size:12px;font-weight:700;color:var(--ink)}
body.dark .hr-sec-name{color:#E5E7EB}
.hr-sec-pct{font-size:17px;font-weight:800;line-height:1}
.hr-sec-counts{display:flex;gap:9px;margin-top:2px}
.hr-sec-done{font-size:10px;color:#16A34A;font-weight:700}
.hr-sec-remain{font-size:10px;color:#9AA4B2;font-weight:700}

/* 3 + 4 two-column */
.hr-two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
@media (max-width:900px){ .hr-two-col{grid-template-columns:1fr} }
.hr-critical-list, .hr-notready-list{
  background:var(--card);border:1px solid var(--border);border-radius:16px;padding:8px;
  max-height:340px;overflow-y:auto;box-shadow:0 1px 3px rgba(16,24,40,0.04);
}
body.dark .hr-critical-list, body.dark .hr-notready-list{background:#1E2730;border-color:rgba(255,255,255,0.07)}
.hr-feed-empty{text-align:center;color:#16A34A;font-weight:700;font-size:13px;padding:30px 12px}
/* critical rows */
.hr-crit-row{display:flex;gap:11px;padding:11px 12px;border-bottom:1px solid var(--border)}
.hr-crit-row:last-child{border-bottom:none}
body.dark .hr-crit-row{border-color:rgba(255,255,255,0.06)}
.hr-crit-dot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:5px}
.hr-crit-body{flex:1;min-width:0}
.hr-crit-label{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.4}
body.dark .hr-crit-label{color:#E5E7EB}
.hr-crit-meta{display:flex;gap:10px;margin-top:3px;flex-wrap:wrap}
.hr-crit-housing{font-size:11px;color:#6B7280;font-weight:600}
.hr-crit-sec{font-size:11px;color:#9AA4B2;font-weight:500}
.hr-crit-note{font-size:11px;color:#B7791F;margin-top:4px;background:rgba(202,138,4,0.08);padding:4px 9px;border-radius:7px}
body.dark .hr-crit-note{background:rgba(202,138,4,0.14)}
/* not-ready rows */
.hr-nr-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--border);width:100%;background:none;border-left:none;border-right:none;border-top:none;cursor:pointer;font-family:inherit;text-align:start;transition:background .15s ease}
.hr-nr-row:last-child{border-bottom:none}
.hr-nr-row:hover{background:rgba(15,122,92,0.04)}
body.dark .hr-nr-row{border-color:rgba(255,255,255,0.06)}
body.dark .hr-nr-row:hover{background:rgba(255,255,255,0.03)}
.hr-nr-ring-wrap{position:relative;width:44px;height:44px;flex:none}
.hr-nr-ring{width:100%;height:100%;transform:rotate(-90deg)}
.hr-nr-bg{fill:none;stroke:rgba(15,122,92,0.10);stroke-width:4}
body.dark .hr-nr-bg{stroke:rgba(255,255,255,0.08)}
.hr-nr-fg{fill:none;stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .7s ease}
.hr-nr-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800}
.hr-nr-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hr-nr-name{font-size:13px;font-weight:700;color:var(--ink)}
body.dark .hr-nr-name{color:#E5E7EB}
.hr-nr-city{font-size:11px;color:#9AA4B2;font-weight:500}
.hr-nr-arrow{color:#9AA4B2;flex:none}

/* Section drill-down modal list */
.hr-sd-list{display:flex;flex-direction:column;gap:4px}
.hr-sd-row{display:flex;align-items:center;gap:12px;padding:10px 6px;border-bottom:1px solid var(--border)}
.hr-sd-row:last-child{border-bottom:none}
body.dark .hr-sd-row{border-color:rgba(255,255,255,0.06)}
.hr-sd-main{display:flex;flex-direction:column;gap:2px;min-width:130px;flex:none}
.hr-sd-name{font-size:13px;font-weight:700;color:var(--ink)}
body.dark .hr-sd-name{color:#E5E7EB}
.hr-sd-city{font-size:11px;color:#9AA4B2}
.hr-sd-bar{flex:1;height:8px;border-radius:99px;background:rgba(15,122,92,0.10);overflow:hidden}
body.dark .hr-sd-bar{background:rgba(255,255,255,0.08)}
.hr-sd-fill{height:100%;border-radius:99px;transition:width .6s ease}
.hr-sd-pct{font-size:14px;font-weight:800;min-width:42px;text-align:end}

/* Filter selects in header */
.hr-filter-select{
  border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--ink);
  padding:8px 12px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
}
body.dark .hr-filter-select{background:#1E2730;border-color:rgba(255,255,255,0.10);color:#E5E7EB}

/* Table readiness cell */
.hr-ready-cell{display:flex;align-items:center;gap:8px;justify-content:center;min-width:110px}
.hr-ready-bar{flex:1;max-width:70px;height:6px;border-radius:99px;background:rgba(15,122,92,0.12);overflow:hidden}
body.dark .hr-ready-bar{background:rgba(255,255,255,0.10)}
.hr-ready-fill{height:100%;border-radius:99px;transition:width .5s ease}
.hr-ready-pct{font-size:12px;font-weight:800;min-width:34px;text-align:start}

/* Readiness modal — wider/taller with checklist */
.hr-modal-card{max-width:860px;width:94vw}
.hr-modal-head-score{
  margin-inline-start:auto;margin-inline-end:14px;
  background:rgba(15,122,92,0.08);border-radius:999px;padding:5px 16px;
}
body.dark .hr-modal-head-score{background:rgba(255,255,255,0.06)}
.hr-modal-head-score span{font-size:16px;font-weight:800}
/* Checklist */
.hr-cl-section{margin-top:16px;border:1px solid var(--border);border-radius:14px;overflow:hidden}
body.dark .hr-cl-section{border-color:rgba(255,255,255,0.08)}
.hr-cl-head{
  display:flex;align-items:center;gap:9px;padding:11px 14px;
  background:rgba(15,122,92,0.04);
}
body.dark .hr-cl-head{background:rgba(255,255,255,0.03)}
.hr-cl-ico{font-size:16px}
.hr-cl-name{flex:1;font-size:13px;font-weight:800;color:var(--ink)}
body.dark .hr-cl-name{color:#F1F5F9}
.hr-cl-score{font-size:13px;font-weight:800}
.hr-cl-items{padding:6px 14px 12px}
.hr-item{padding:10px 0;border-bottom:1px solid var(--border)}
.hr-item:last-child{border-bottom:none}
body.dark .hr-item{border-color:rgba(255,255,255,0.06)}
.hr-item-row{display:flex;align-items:center;gap:12px;justify-content:space-between}
.hr-item-label{flex:1;font-size:12.5px;color:var(--ink);font-weight:500;line-height:1.4}
body.dark .hr-item-label{color:#D1D5DB}
.hr-item-opts{display:flex;gap:5px;flex:none}
.hr-opt{
  border:1px solid var(--border);background:var(--card);color:#6B7280;
  border-radius:8px;padding:5px 11px;font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;
  transition:all .15s ease;
}
body.dark .hr-opt{background:#252E38;border-color:rgba(255,255,255,0.10);color:#9CA3AF}
.hr-opt:hover{border-color:#9AA4B2}
.hr-opt-yes.on{background:#16A34A;border-color:#16A34A;color:#fff}
.hr-opt-no.on{background:#DC2626;border-color:#DC2626;color:#fff}
.hr-opt-na.on{background:#6B7280;border-color:#6B7280;color:#fff}
.hr-item-note{
  width:100%;margin-top:8px;border:1px solid var(--border);border-radius:8px;
  padding:7px 11px;font-family:inherit;font-size:12px;background:var(--bg);color:var(--ink);
}
body.dark .hr-item-note{background:#1A2128;border-color:rgba(255,255,255,0.08);color:#E5E7EB}
.hr-item-note::placeholder{color:#9AA4B2}
/* Per-item photo attach */
.hr-item-bottom{display:flex;align-items:center;gap:8px;margin-top:8px}
.hr-item-bottom .hr-item-note{margin-top:0;flex:1}
.hr-item-photo-btn{
  flex:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:1px solid var(--border);border-radius:8px;padding:7px 11px;
  background:var(--bg);color:#475569;font-family:inherit;font-size:11.5px;font-weight:600;
  white-space:nowrap;transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.hr-item-photo-btn:hover{border-color:#0F7A5C;color:#0F7A5C}
.hr-item-photo-btn.has{border-color:#0F7A5C;color:#0F7A5C;background:rgba(15,122,92,0.06)}
.hr-item-photo-btn:disabled{opacity:.6;cursor:default}
.hr-item-photo-btn svg{flex:none}
body.dark .hr-item-photo-btn{background:#1A2128;border-color:rgba(255,255,255,0.08);color:#9AA4B2}
body.dark .hr-item-photo-btn:hover,body.dark .hr-item-photo-btn.has{border-color:#5DE3B0;color:#5DE3B0}
.hr-item-photo-thumb{position:relative;display:inline-block;margin-top:8px}
.hr-item-photo-thumb[hidden]{display:none}
.hr-item-photo-img{width:72px;height:72px;object-fit:cover;border-radius:9px;border:1px solid var(--border);cursor:pointer;display:block}
.hr-item-photo-remove{
  position:absolute;top:-7px;inset-inline-end:-7px;width:20px;height:20px;border-radius:50%;
  border:none;background:#DC2626;color:#fff;font-size:14px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.2);
}
/* Nationality cell with flag */
.hr-nat{display:inline-flex;align-items:center;gap:6px;justify-content:center}
.hr-nat-flag{width:18px;height:13px;object-fit:cover;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
/* Read-only form view (no editing) */
.flight-modal.view-mode .hr-opt{pointer-events:none}
.flight-modal.view-mode .hr-item-note{pointer-events:none;background:transparent;border-color:transparent;padding-inline:0;color:var(--ink)}
.flight-modal.view-mode .hr-item-photo-btn,
.flight-modal.view-mode .hr-item-photo-remove{display:none}
.flight-modal.view-mode .hr-item-photo-img{cursor:zoom-in}
/* Housing-data contracts */
.hd-contracts-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.hd-contracts-empty{font-size:12px;color:#9AA4B2;padding:4px 0}
.hd-contract-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hd-contract-no{flex:1;min-width:120px;border:1px solid var(--border);border-radius:8px;padding:7px 11px;font-family:inherit;font-size:12px;background:var(--bg);color:var(--ink)}
body.dark .hd-contract-no{background:#1A2128;border-color:rgba(255,255,255,0.08);color:#E5E7EB}
.hd-contract-attach,.hd-contract-view{flex:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:1px solid var(--border);border-radius:8px;padding:7px 11px;background:var(--bg);color:#475569;font-family:inherit;font-size:11.5px;font-weight:600;white-space:nowrap}
.hd-contract-attach.has{border-color:#0F7A5C;color:#0F7A5C;background:rgba(15,122,92,0.06)}
.hd-contract-attach:hover,.hd-contract-view:hover{border-color:#0F7A5C;color:#0F7A5C}
.hd-contract-attach:disabled{opacity:.6;cursor:default}
body.dark .hd-contract-attach,body.dark .hd-contract-view{background:#1A2128;border-color:rgba(255,255,255,0.08);color:#9AA4B2}
.hd-contract-remove{flex:none;width:26px;height:26px;border-radius:7px;border:1px solid var(--border);background:transparent;color:#DC2626;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.hd-add-contract-btn{display:inline-flex;align-items:center;gap:6px}
.hd-contracts-badge{display:inline-flex;align-items:center;gap:4px;cursor:pointer;border:1px solid #0F7A5C;color:#0F7A5C;background:rgba(15,122,92,0.07);border-radius:999px;padding:3px 10px;font-family:inherit;font-size:11.5px;font-weight:700;white-space:nowrap}
.hd-contracts-badge:hover{background:rgba(15,122,92,0.14)}
body.dark .hd-contracts-badge{border-color:#5DE3B0;color:#5DE3B0;background:rgba(93,227,176,0.1)}
.hd-cv-list{display:flex;flex-direction:column;gap:8px}
.hd-cv-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px}
.hd-cv-no{font-weight:700;font-size:13px;color:var(--ink)}
.hd-cv-view{cursor:pointer;border:1px solid #0F7A5C;color:#0F7A5C;background:transparent;border-radius:8px;padding:6px 12px;font-family:inherit;font-size:12px;font-weight:600}
.hd-cv-view:hover{background:rgba(15,122,92,0.08)}
body.dark .hd-cv-view{border-color:#5DE3B0;color:#5DE3B0}
/* Housing-readiness detail (read-only) view */
.hr-detail-overall{display:flex;align-items:center;gap:12px}
.hr-detail-overall-pct{font-size:24px;font-weight:800;flex:none;min-width:56px}
.hr-detail-bar{flex:1;height:10px;border-radius:99px;background:rgba(15,122,92,0.12);overflow:hidden}
.hr-detail-bar > span{display:block;height:100%;border-radius:99px}
.hr-detail-secpct{margin-inline-start:auto;font-weight:800;font-size:13px}
.hr-detail-items{display:flex;flex-direction:column;gap:8px}
.hr-detail-item{padding:9px 0;border-bottom:1px solid var(--border)}
.hr-detail-item:last-child{border-bottom:none}
body.dark .hr-detail-item{border-color:rgba(255,255,255,0.06)}
.hr-detail-item-top{display:flex;align-items:center;gap:10px;justify-content:space-between}
.hr-detail-item-label{flex:1;font-size:12.5px;color:var(--ink);line-height:1.4}
body.dark .hr-detail-item-label{color:#D1D5DB}
.hr-detail-badge{flex:none;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px}
.hr-detail-badge.yes{background:rgba(22,163,74,0.12);color:#16A34A}
.hr-detail-badge.no{background:rgba(220,38,38,0.12);color:#DC2626}
.hr-detail-badge.na{background:rgba(100,116,139,0.14);color:#64748B}
.hr-detail-badge.none{background:rgba(100,116,139,0.10);color:#94A3B8}
.hr-detail-item-note{margin-top:6px;font-size:12px;color:var(--muted);background:rgba(15,122,92,0.04);border-radius:8px;padding:6px 10px}
body.dark .hr-detail-item-note{background:rgba(255,255,255,0.04)}
.hr-detail-item-photo{margin-top:8px}
.hr-detail-photo-cap{display:block;font-size:10.5px;color:#94A3B8;font-weight:600;margin-bottom:5px}
.hr-detail-item-photo img{width:120px;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--border);cursor:zoom-in}
/* HR profile form extras */
.hrp-req{color:#DC2626;font-weight:700}
.hrp-invalid{outline:2px solid #DC2626 !important;outline-offset:1px}
.hrp-file{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hrp-file-btn{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;
  border:1px dashed var(--border);background:#F8FAFB;color:var(--green-700);
  font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s ease;
}
.hrp-file-btn:hover{border-color:var(--green-600);background:var(--green-50);color:var(--green-800)}
body.dark .hrp-file-btn{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.14);color:#5DE3B0}
body.dark .hrp-file-btn:hover{background:rgba(255,255,255,0.08);border-color:#5DE3B0}
.hrp-file-chip{
  display:inline-flex;align-items:center;gap:8px;padding:7px 10px 7px 12px;border-radius:9px;
  background:rgba(15,122,92,0.08);border:1px solid rgba(15,122,92,0.18);
  text-decoration:none;color:var(--green-800);transition:background .15s ease;max-width:230px;
}
.hrp-file-chip:hover{background:rgba(15,122,92,0.14)}
body.dark .hrp-file-chip{background:rgba(93,227,176,0.10);border-color:rgba(93,227,176,0.22);color:#9EF0CD}
.hrp-file-chip-ico{display:inline-flex;flex:none}
.hrp-file-chip-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.hrp-file-chip-open{display:inline-flex;flex:none;opacity:.7}
.hrp-file-chip.pending{background:rgba(234,138,30,0.10);border-color:rgba(234,138,30,0.25);color:#B45309;cursor:default}
.hrp-file-chip.pending .hrp-file-chip-open{display:none}
body.dark .hrp-file-chip.pending{background:rgba(234,138,30,0.14);border-color:rgba(234,138,30,0.3);color:#FBBF24}

/* ===== Phone field (country code + number) ===== */
.hrp-phone{display:flex;gap:8px;align-items:stretch;direction:ltr}
.hrp-phone-num{
  flex:1;min-width:0;height:44px;padding:0 12px;border:1px solid #E5E7EB;border-radius:8px;
  font-family:inherit;font-size:13px;color:var(--ink);background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.hrp-phone-num:focus{outline:none;border-color:var(--green-700);box-shadow:0 0 0 3px rgba(15,76,58,0.08)}
body.dark .hrp-phone-num{background:#1E2A36;color:#E5E7EB;border-color:rgba(255,255,255,0.10)}
/* Country-code picker (compact) */
.hrp-cc-ss{flex:none;width:108px}
.hrp-cc-trigger{padding:0 10px;gap:6px}
.hrp-cc-flag-sel{display:inline-flex;align-items:center;line-height:0}
.hrp-cc-flag{width:22px;height:16px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,0.06);flex:none}
.hrp-cc-code-sel{font-size:13px;font-weight:600;color:var(--ink)}
body.dark .hrp-cc-code-sel{color:#E5E7EB}
.hrp-cc-ss .hrp-ss-panel{width:250px;right:auto;left:0}
.hrp-cc-ss .hrp-ss-opt{display:flex;align-items:center;gap:10px}
.hrp-cc-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrp-cc-code{color:#94A3B8;font-size:12px;font-weight:600;flex:none}
body.dark .hrp-cc-code{color:#94A3B8}

/* ===== Searchable select (combobox) ===== */
.hrp-ss{position:relative}
.hrp-ss-trigger{
  width:100%;height:44px;padding:0 12px;border:1px solid #E5E7EB;border-radius:8px;background:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;
  font-family:inherit;font-size:13px;color:var(--ink);transition:border-color .15s ease, box-shadow .15s ease;
}
.hrp-ss-trigger:hover{border-color:#CBD5E1}
.hrp-ss.open .hrp-ss-trigger{border-color:var(--green-700);box-shadow:0 0 0 3px rgba(15,76,58,0.08)}
.hrp-ss-value{flex:1;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrp-ss-value.placeholder{color:#9AA4AF}
.hrp-ss-chev{flex:none;color:#94A3B8;transition:transform .2s ease}
.hrp-ss.open .hrp-ss-chev{transform:rotate(180deg)}
body.dark .hrp-ss-trigger{background:#1E2A36;color:#E5E7EB;border-color:rgba(255,255,255,0.10)}
.hrp-ss-panel{
  position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;
  background:#fff;border:1px solid #E5E7EB;border-radius:12px;
  box-shadow:0 12px 32px -8px rgba(16,24,40,0.22);overflow:hidden;
  animation:ssIn .14s ease;
}
@keyframes ssIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
body.dark .hrp-ss-panel{background:#1A2530;border-color:rgba(255,255,255,0.10)}
.hrp-ss-search-wrap{
  display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #F1F3F5;color:#94A3B8;
}
body.dark .hrp-ss-search-wrap{border-bottom-color:rgba(255,255,255,0.08)}
.hrp-ss-search{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:13px;color:var(--ink)}
.hrp-ss-list{max-height:230px;overflow-y:auto;padding:6px}
.hrp-ss-opt{
  padding:9px 12px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--ink);
  transition:background .12s ease;
}
.hrp-ss-opt:hover{background:#F4F6F8}
.hrp-ss-opt.selected{background:var(--green-50);color:var(--green-800);font-weight:700}
body.dark .hrp-ss-opt:hover{background:rgba(255,255,255,0.06)}
body.dark .hrp-ss-opt.selected{background:#1F3A2D;color:#9EF0CD}
.hrp-ss-list::-webkit-scrollbar{width:8px}
.hrp-ss-list::-webkit-scrollbar-thumb{background:#D1D9E0;border-radius:8px}
body.dark .hrp-ss-list::-webkit-scrollbar-thumb{background:#3A4654}

/* Invoice form attachments */
.inv-attach{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.inv-attach-list{display:flex;flex-wrap:wrap;gap:8px}
.inv-attach-chip{
  display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 10px;border-radius:9px;
  background:rgba(15,122,92,0.08);border:1px solid rgba(15,122,92,0.18);color:var(--green-800);max-width:240px;
}
body.dark .inv-attach-chip{background:rgba(93,227,176,0.10);border-color:rgba(93,227,176,0.22);color:#9EF0CD}
.inv-attach-chip.pending{background:rgba(234,138,30,0.10);border-color:rgba(234,138,30,0.25);color:#B45309}
body.dark .inv-attach-chip.pending{background:rgba(234,138,30,0.14);border-color:rgba(234,138,30,0.3);color:#FBBF24}
.inv-attach-chip-ico{display:inline-flex;flex:none}
.inv-attach-chip-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:inherit;max-width:160px}
a.inv-attach-chip-name:hover{text-decoration:underline}
.inv-attach-chip-del{
  flex:none;width:18px;height:18px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(0,0,0,0.08);color:inherit;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.inv-attach-chip-del:hover{background:rgba(220,38,38,0.2);color:#DC2626}
body.dark .inv-attach-chip-del{background:rgba(255,255,255,0.12)}
.hrp-gate-banner{
  background:linear-gradient(135deg, rgba(202,138,4,0.12), rgba(202,138,4,0.06));
  border:1px solid rgba(202,138,4,0.4); color:#92660A;
  border-radius:12px; padding:13px 16px; margin-bottom:16px; font-size:13.5px; font-weight:600;
}
body.dark .hrp-gate-banner{ color:#FBBF24; }
/* When gated, hide the profile back button so the user can't escape */
body.hr-profile-gated #profile-back{ display:none; }
/* HR profile: compact multi-column fields (label stacked above input) */
#hr-profile-sections .profile-form{
  display:grid; grid-template-columns:repeat(3,1fr); gap:11px 18px;
}
#hr-profile-sections .profile-form-row{
  display:flex; flex-direction:column; align-items:stretch; gap:4px;
  grid-template-columns:none; padding:0; border-bottom:none;
}
#hr-profile-sections .hrp-file{grid-column:1 / -1}
/* textarea-type fields span full width */
#hr-profile-sections .profile-form-row:has(textarea){grid-column:1 / -1}
@media (max-width:1024px){
  #hr-profile-sections .profile-form{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  #hr-profile-sections .profile-form{ grid-template-columns:1fr; }
}
/* Denser section cards */
.profile3-card{padding:18px 20px}
.profile3-card-head{margin-bottom:14px;padding-bottom:11px;display:flex;align-items:center;gap:11px}
.profile3-card-head h3{flex:1;min-width:0}

/* Per-section edit button */
.profile3-edit-btn{
  flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;
  border:1px solid #E5E7EB;background:#fff;color:#475569;cursor:pointer;transition:all .15s ease;
}
.profile3-edit-btn:hover{border-color:var(--green-600);color:var(--green-700);background:var(--green-50)}
.profile3-edit-btn.active{background:var(--green-700);border-color:var(--green-700);color:#fff}
body.dark .profile3-edit-btn{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);color:#CBD5E1}
body.dark .profile3-edit-btn:hover{color:#5DE3B0;border-color:#5DE3B0;background:rgba(255,255,255,0.07)}
body.dark .profile3-edit-btn.active{background:var(--green-700);border-color:var(--green-700);color:#fff}

/* Locked section: fields are read-only / non-interactive */
.profile3-card.locked .profile-form-input,
.profile3-card.locked .hrp-phone-num{
  background:#F8FAFB;color:#475569;pointer-events:none;border-color:#EEF1F4;
}
body.dark .profile3-card.locked .profile-form-input,
body.dark .profile3-card.locked .hrp-phone-num{
  background:rgba(255,255,255,0.03);color:#9CA3AF;border-color:rgba(255,255,255,0.07);
}
.profile3-card.locked .hrp-ss-trigger,
.profile3-card.locked .hrp-file-btn,
.profile3-card.locked .hrp-cc-trigger{
  pointer-events:none;opacity:.7;
}
.profile3-card.locked .hrp-ss-chev,
.profile3-card.locked .hrp-file-btn svg{opacity:.5}
.hrp-hint{display:inline-block;margin-top:4px;font-size:11px;font-weight:600}
.hrp-hint.bad{color:#DC2626}
.hrp-hint.ok{color:#16A34A}
.profile-display-name{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:4px}
body.dark .profile-display-name{color:#E5E7EB}
.td-muted{color:var(--muted);font-size:12px}
/* Invoice form full-width field + status badges */
.flight-field-full{grid-column:1 / -1}
.inv-badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 12px;border-radius:999px}
.inv-badge.ok{background:rgba(22,163,74,0.12);color:#16A34A}
.inv-badge.warn{background:rgba(234,138,30,0.14);color:#EA8A1E}
.inv-badge.info{background:rgba(2,132,199,0.12);color:#0284C7}
.inv-badge.bad{background:rgba(220,38,38,0.12);color:#DC2626}
.inv-badge.muted{background:rgba(100,116,139,0.14);color:#64748B}

/* ============================================================
   Global searchable-select (.nsel) — elegant dropdown used
   site-wide, mirrors the profile .hrp-ss component.
   ============================================================ */
.nsel{position:relative;display:block;width:100%}
.nsel.open{z-index:9999;position:relative}
/* When a dropdown opens inside a modal, keep the BODY scrollable but allow the
   panel to show; the card itself stays clipped so the footer (save button) never
   gets pushed off-screen. The panel is height-capped below so it fits. */
.flight-modal-body.nsel-open-within{overflow-y:auto}
.flight-modal-body:has(.hrp-ss.open){overflow-y:auto}
.nsel-native{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nsel-trigger{
  width:100%;height:40px;padding:0 12px;border:1px solid var(--border);border-radius:9px;background:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;
  font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;font-size:13px;color:var(--ink);transition:border-color .15s ease, box-shadow .15s ease;
}
.nsel-trigger,.nsel-value,.nsel-opt,.nsel-search{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif}
.nsel-trigger:hover{border-color:#CBD5E1}
.nsel.open .nsel-trigger{border-color:var(--green-600);box-shadow:0 0 0 3px rgba(46,196,140,0.12)}
.nsel-value{flex:1;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nsel-value.placeholder{color:#9AA4AF}
.nsel-chev{flex:none;color:#94A3B8;transition:transform .2s ease}
.nsel.open .nsel-chev{transform:rotate(180deg)}
body.dark .nsel-trigger{background:#1E2A36;color:#E5E7EB;border-color:rgba(255,255,255,0.10)}
.nsel-panel{
  position:absolute;z-index:9999;top:calc(100% + 6px);left:0;right:0;
  background:#fff;border:1px solid #E5E7EB;border-radius:12px;
  box-shadow:0 12px 32px -8px rgba(16,24,40,0.22);overflow:hidden;animation:nselIn .14s ease;
  display:flex;flex-direction:column;min-width:200px;
  transform:translateX(var(--nsel-dx,0px));
}
@keyframes nselIn{from{opacity:0;transform:translate(var(--nsel-dx,0px),-4px)}to{opacity:1;transform:translate(var(--nsel-dx,0px),0)}}
body.dark .nsel-panel{background:#1A2530;border-color:rgba(255,255,255,0.10)}
.nsel-search-wrap{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #F1F3F5;color:#94A3B8;flex:none}
body.dark .nsel-search-wrap{border-bottom-color:rgba(255,255,255,0.08)}
.nsel-search{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:13px;color:var(--ink)}
.nsel-list{flex:1 1 auto;min-height:0;max-height:240px;overflow-y:auto;padding:6px}
/* Simple filter dropdown: show all options, no search. Scroll only if it would exceed the screen. */
.nsel-simple .nsel-list{max-height:min(60vh,520px);overflow-y:auto}
.nsel-simple .nsel-list::-webkit-scrollbar{width:0}
/* Simple/filter panels size to their trigger instead of the 200px default,
   so the short "rows per page" select doesn't render as an oversized cramped box. */
.nsel-simple .nsel-panel{min-width:100%;width:max-content;max-width:min(86vw,320px);inset-inline-start:0;inset-inline-end:auto;left:auto;right:auto}
.flights-filter .nsel-panel,.flights-filters .nsel-panel{min-width:100%;width:max-content;max-width:min(86vw,320px)}
.nsel-simple .nsel-opt{padding:10px 16px;text-align:start}
.flights-filter-pagesize .nsel-panel{min-width:120px;width:max-content}
.nsel-opt{padding:9px 12px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--ink);transition:background .12s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nsel-opt:hover{background:#F4F6F8}
.nsel-opt.selected{background:var(--green-50);color:var(--green-800);font-weight:700}
.nsel-opt.disabled{opacity:.5;cursor:default}
body.dark .nsel-opt:hover{background:rgba(255,255,255,0.06)}
body.dark .nsel-opt.selected{background:#1F3A2D;color:#9EF0CD}
.nsel-list::-webkit-scrollbar{width:8px}
.nsel-list::-webkit-scrollbar-thumb{background:#D1D9E0;border-radius:8px}
body.dark .nsel-list::-webkit-scrollbar-thumb{background:#3A4654}

/* Match filter-bar select height when inside a filter */
.flights-filter .nsel-trigger{height:38px}
/* Match form-field select look inside flight modals */
.flight-field .nsel-trigger{height:auto;min-height:40px;border-width:1.5px;font-size:12.5px}

/* ===== Seasonal recruitment placeholder pages ===== */
.recruit-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:10px;padding:70px 24px;margin-top:8px;
  background:#fff;border:1px solid #EFF2F5;border-radius:16px;
  box-shadow:0 1px 3px rgba(16,24,40,0.03);
  font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;
}
body.dark .recruit-placeholder{background:var(--card);border-color:rgba(255,255,255,0.06)}
.recruit-ph-icon{
  width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--green-50);color:var(--green-700);margin-bottom:4px;
}
body.dark .recruit-ph-icon{background:rgba(255,255,255,0.05);color:#5DE3B0}
.recruit-placeholder h3{margin:0;font-size:18px;font-weight:800;color:var(--ink)}
.recruit-placeholder p{margin:0;font-size:13.5px;color:#64748B}
body.dark .recruit-placeholder p{color:#94A3B8}

/* ============================================================
   Contract documentation page (Contract Card)
   ============================================================ */
.ctr-wrap{
  max-width:100%;margin:0;display:flex;flex-direction:column;gap:16px;padding-bottom:40px;
  font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;
}
/* Header */
.ctr-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:linear-gradient(120deg, var(--green-900) 0%, var(--green-800) 55%, var(--green-700) 100%);
  border-radius:20px;padding:22px 24px;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 14px 34px -16px rgba(11,61,46,0.55);
}
.ctr-head::after{content:'';position:absolute;inset-inline-start:-50px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,0.06)}
.ctr-head-main{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.ctr-head-icon{
  width:54px;height:54px;border-radius:15px;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.14);color:#fff;backdrop-filter:blur(2px);
}
.ctr-title{margin:0;font-size:24px;font-weight:800;color:#fff;letter-spacing:-0.3px}
.ctr-sub{margin:3px 0 0;font-size:13px;color:rgba(255,255,255,0.82)}
.ctr-head-side{display:flex;flex-direction:column;align-items:flex-end;gap:9px;position:relative;z-index:1}
.ctr-status-badge{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,0.16);font-size:13px;font-weight:700;color:#fff;
}
.ctr-status-dot{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,0.25)}
.ctr-status-badge.is-signed .ctr-status-dot{background:#4ADE80;box-shadow:0 0 0 3px rgba(74,222,128,0.3)}
.ctr-status-badge.is-pending .ctr-status-dot{background:#FBBF24;box-shadow:0 0 0 3px rgba(251,191,36,0.3)}
.ctr-status-badge.is-expired .ctr-status-dot{background:#F87171;box-shadow:0 0 0 3px rgba(248,113,113,0.3)}
.ctr-no{font-size:12.5px;font-weight:600;color:rgba(255,255,255,0.9);background:rgba(0,0,0,0.14);padding:4px 12px;border-radius:8px}

/* Progress */
.ctr-progress-card{background:#fff;border:1px solid #EEF1F4;border-radius:16px;padding:16px 18px;box-shadow:0 1px 3px rgba(16,24,40,0.03)}
body.dark .ctr-progress-card{background:var(--card);border-color:rgba(255,255,255,0.06)}
.ctr-progress-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ctr-progress-label{font-size:13px;font-weight:600;color:#64748B}
body.dark .ctr-progress-label{color:#94A3B8}
.ctr-progress-val{font-size:15px;font-weight:800;color:var(--green-700)}
body.dark .ctr-progress-val{color:#5DE3B0}
.ctr-progress-track{height:9px;border-radius:999px;background:#EEF2F5;overflow:hidden}
body.dark .ctr-progress-track{background:rgba(255,255,255,0.08)}
.ctr-progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green-600),var(--green-500,#22C55E));transition:width .5s ease}

/* Quick stats */
.ctr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ctr-stat{
  display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #EEF1F4;border-radius:16px;padding:15px 16px;
  box-shadow:0 1px 3px rgba(16,24,40,0.03);
}
body.dark .ctr-stat{background:var(--card);border-color:rgba(255,255,255,0.06)}
.ctr-stat-ic{
  width:42px;height:42px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--green-50);color:var(--green-700);
}
body.dark .ctr-stat-ic{background:rgba(255,255,255,0.05);color:#5DE3B0}
.ctr-stat-body{display:flex;flex-direction:column;min-width:0}
.ctr-stat-val{font-size:17px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctr-stat-lbl{font-size:11.5px;color:#94A3B8;font-weight:600;margin-top:2px}

/* Info cards */
.ctr-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ctr-card{background:#fff;border:1px solid #EEF1F4;border-radius:18px;padding:18px 20px;box-shadow:0 1px 3px rgba(16,24,40,0.03)}
body.dark .ctr-card{background:var(--card);border-color:rgba(255,255,255,0.06)}
.ctr-card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #F1F4F7}
body.dark .ctr-card-head{border-bottom-color:rgba(255,255,255,0.06)}
.ctr-card-ic{width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--green-50);color:var(--green-700)}
body.dark .ctr-card-ic{background:rgba(255,255,255,0.05);color:#5DE3B0}
.ctr-card-head h3{margin:0;font-size:15px;font-weight:800;color:var(--ink)}
.ctr-rows{display:flex;flex-direction:column}
.ctr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed #EEF1F4}
.ctr-row:last-child{border-bottom:0}
body.dark .ctr-row{border-bottom-color:rgba(255,255,255,0.05)}
.ctr-row-lbl{font-size:12.5px;color:#94A3B8;font-weight:600;flex:none}
.ctr-row-val{font-size:13.5px;color:var(--ink);font-weight:700;text-align:end}

/* Section titles */
.ctr-section-title{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:15px;font-weight:800;color:var(--ink)}
.ctr-section-title::before{content:'';width:4px;height:18px;border-radius:3px;background:var(--green-600)}

/* Files */
.ctr-files{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ctr-file-card{
  background:#fff;border:1px solid #EEF1F4;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 1px 3px rgba(16,24,40,0.03);
}
body.dark .ctr-file-card{background:var(--card);border-color:rgba(255,255,255,0.06)}
.ctr-file-top{display:flex;align-items:center;gap:11px}
.ctr-file-ic{width:44px;height:44px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--green-50);color:var(--green-700)}
body.dark .ctr-file-ic{background:rgba(255,255,255,0.05);color:#5DE3B0}
.ctr-file-meta{display:flex;flex-direction:column;min-width:0}
.ctr-file-name{font-size:13.5px;font-weight:800;color:var(--ink)}
.ctr-file-state{font-size:11.5px;font-weight:600;margin-top:2px}
.ctr-file-state.ok{color:#16A34A}
.ctr-file-state.missing{color:#94A3B8}
.ctr-file-actions{display:flex;gap:8px}
.ctr-file-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;border-radius:9px;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:700;border:1px solid var(--border);background:#fff;color:#475569;transition:all .15s ease;
}
.ctr-file-btn:hover:not(:disabled){border-color:var(--green-600);color:var(--green-700);background:var(--green-50)}
.ctr-file-btn.primary{background:var(--green-700);border-color:var(--green-700);color:#fff}
.ctr-file-btn.primary:hover:not(:disabled){background:var(--green-800)}
.ctr-file-btn:disabled{opacity:.45;cursor:not-allowed}
body.dark .ctr-file-btn{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);color:#CBD5E1}

/* Signatures */
.ctr-sign-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.ctr-sign-card{background:#fff;border:1px solid #EEF1F4;border-radius:16px;padding:16px 18px;box-shadow:0 1px 3px rgba(16,24,40,0.03)}
body.dark .ctr-sign-card{background:var(--card);border-color:rgba(255,255,255,0.06)}
.ctr-sign-lbl{display:block;font-size:12.5px;font-weight:700;color:#64748B;margin-bottom:10px}
body.dark .ctr-sign-lbl{color:#94A3B8}
.ctr-sign-box{
  height:92px;border-radius:12px;border:1.5px dashed #D9E1E7;display:flex;align-items:center;justify-content:center;
  background:#FAFBFC;overflow:hidden;
}
body.dark .ctr-sign-box{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.12)}
.ctr-sign-box img{max-width:100%;max-height:100%;object-fit:contain}
.ctr-sign-empty{font-size:12.5px;color:#AEB7C0;font-weight:600}
.ctr-sign-date-card{display:flex;flex-direction:column}
.ctr-sign-date{
  flex:1;display:flex;align-items:center;justify-content:center;height:92px;border-radius:12px;background:var(--green-50);
  color:var(--green-800);font-size:16px;font-weight:800;
}
body.dark .ctr-sign-date{background:rgba(255,255,255,0.04);color:#9EF0CD}

/* Footer action */
.ctr-actions{display:flex;justify-content:center;margin-top:6px}
.ctr-download-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 30px;font-size:14px;border-radius:11px}

/* Responsive */
@media (max-width:1024px){
  .ctr-stats{grid-template-columns:repeat(2,1fr)}
  .ctr-files{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .ctr-info-grid{grid-template-columns:1fr}
  .ctr-sign-grid{grid-template-columns:1fr}
  .ctr-stats{grid-template-columns:1fr 1fr}
  .ctr-files{grid-template-columns:1fr}
  .ctr-head{padding:18px}
  .ctr-title{font-size:20px}
}

/* ===== Contract templates admin ===== */
.ctpl-editor{
  width:100%;min-height:60vh;border:1px solid #E5E7EB;border-radius:10px;padding:14px;
  font-family:'IBM Plex Sans Arabic',monospace;font-size:13px;line-height:1.8;color:var(--ink);
  background:#FAFBFC;resize:vertical;direction:rtl;
}
.ctpl-editor:focus{outline:none;border-color:var(--green-600);box-shadow:0 0 0 3px rgba(46,196,140,0.1)}
body.dark .ctpl-editor{background:rgba(255,255,255,0.03);color:#E5E7EB;border-color:rgba(255,255,255,0.1)}
.ctpl-vars-box{display:flex;flex-wrap:wrap;gap:7px;padding:14px 16px;background:#fff;border:1px solid #EEF1F4;border-radius:14px}
body.dark .ctpl-vars-box{background:var(--card);border-color:rgba(255,255,255,0.06)}
.ctpl-vars-box code{
  background:var(--green-50);color:var(--green-800);padding:5px 10px;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer;
  font-family:'IBM Plex Sans Arabic',monospace;transition:background .12s ease;
}
.ctpl-vars-box code:hover{background:var(--green-100,#dcfce7)}
body.dark .ctpl-vars-box code{background:rgba(255,255,255,0.06);color:#9EF0CD}

/* Contract: admin documentation button (in header) */
.ctr-doc-btn{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:10px;cursor:pointer;
  font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;font-size:13px;font-weight:700;
  background:#fff;color:var(--green-800);border:1px solid rgba(255,255,255,0.6);transition:all .15s ease;
}
.ctr-doc-btn:hover{background:#F0FBF6;color:var(--green-900)}
/* Contract modal: file pickers + note */
.ctrm-file{display:flex;align-items:center;gap:10px}
.ctrm-file-btn{
  display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:9px;cursor:pointer;flex:none;
  font-family:inherit;font-size:12.5px;font-weight:700;border:1px solid var(--border);background:#fff;color:#475569;transition:all .15s ease;
}
.ctrm-file-btn:hover{border-color:var(--green-600);color:var(--green-700);background:var(--green-50)}
body.dark .ctrm-file-btn{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);color:#CBD5E1}
.ctrm-file-name{font-size:12px;color:#64748B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.dark .ctrm-file-name{color:#94A3B8}
.ctrm-self-note{margin:12px 0 0;font-size:12px;color:#64748B;line-height:1.6;background:var(--green-50);padding:10px 12px;border-radius:9px}
body.dark .ctrm-self-note{background:rgba(255,255,255,0.04);color:#94A3B8}

/* Contract: employee self-sign button */
.ctr-sign-btn{
  margin-top:10px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:38px;border-radius:9px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:700;
  border:1px solid var(--green-600);background:var(--green-50);color:var(--green-700);transition:all .15s ease;
}
.ctr-sign-btn:hover:not(:disabled){background:var(--green-700);border-color:var(--green-700);color:#fff}
.ctr-sign-btn:disabled{opacity:.6;cursor:default}
body.dark .ctr-sign-btn{background:rgba(255,255,255,0.04);color:#5DE3B0;border-color:rgba(94,227,176,0.4)}

/* Contract: "signed" text stamp inside a signature box */
.ctr-sign-box.signed{border-style:solid;border-color:rgba(22,163,74,0.35);background:var(--green-50)}
body.dark .ctr-sign-box.signed{background:rgba(34,197,94,0.10);border-color:rgba(34,197,94,0.30)}
.ctr-sign-stamp{display:flex;flex-direction:column;align-items:center;gap:3px;color:#16A34A;text-align:center}
body.dark .ctr-sign-stamp{color:#4ADE80}
.ctr-sign-stamp-txt{font-size:14px;font-weight:800}
.ctr-sign-stamp-sub{font-size:11px;font-weight:600;color:#64748B}
body.dark .ctr-sign-stamp-sub{color:#94A3B8}

/* ============================================================
   Official document page (participation application)
   ============================================================ */
.doc-wrap{
  max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:16px;padding-bottom:40px;
  font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;
}
/* Toolbar */
.doc-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:linear-gradient(120deg, var(--green-900) 0%, var(--green-800) 55%, var(--green-700) 100%);
  border-radius:18px;padding:16px 20px;color:#fff;box-shadow:0 12px 30px -16px rgba(11,61,46,0.55);
}
.doc-toolbar-title{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:800}
.doc-print-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;font-size:13.5px;border-radius:10px}
/* The sheet */
.doc-sheet{
  background:#fff;border:1px solid #EAEEF1;border-radius:18px;padding:40px 44px;
  box-shadow:0 4px 20px -8px rgba(16,24,40,0.10);position:relative;
}
body.dark .doc-sheet{background:#fff;color:#1f2937} /* keep the document white even in dark mode (it's a printable doc) */
/* Dark mode: the sheet stays a white printable document, so force its inner colours
   back to the light palette (the global dark vars would otherwise turn the green-50
   chips and ink text dark, making everything look black). */
body.dark .doc-sheet .doc-title,
body.dark .doc-sheet .doc-section-title,
body.dark .doc-sheet .doc-cell-lbl,
body.dark .doc-sheet .doc-contact-val,
body.dark .doc-sheet .doc-foot-lbl{color:#16321f}
body.dark .doc-sheet .doc-subtitle{color:#13573F}
body.dark .doc-sheet .doc-cell-val{color:#374151}
body.dark .doc-sheet .doc-list li{color:#3f4753}
body.dark .doc-sheet .doc-contact-lbl{color:#6b7280}
body.dark .doc-sheet .doc-foot-line{color:#374151;border-bottom-color:#B9C4CC}
body.dark .doc-sheet .doc-logo-fallback{color:#0F4C3A}
/* green-50 backed chips → restore the light green tint */
body.dark .doc-sheet .doc-cell-lbl,
body.dark .doc-sheet .doc-contact-item{background:#E8F1ED}
body.dark .doc-sheet .doc-contact-ic{background:#fff;color:#13573F}
/* borders inside the sheet */
body.dark .doc-sheet .doc-rows,
body.dark .doc-sheet .doc-row:not(:last-child),
body.dark .doc-sheet .doc-cell:first-child{border-color:#EEF1F4}
body.dark .doc-sheet .doc-head{border-bottom-color:#13573F}
/* coloured accents that use --green-600 stay green (var is fine), nothing to override there */
.doc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:2px solid var(--green-700)}
.doc-logo{display:flex;align-items:center;gap:10px;min-height:46px}
.doc-logo-img{max-height:46px;max-width:180px;object-fit:contain}
.doc-logo-fallback{font-size:22px;font-weight:800;color:var(--green-800);letter-spacing:-.3px}
.doc-logo-img[src^="data:image/gif"]{display:none}              /* hide the 1px placeholder */
.doc-logo-img:not([src^="data:image/gif"]) + .doc-logo-fallback{display:none} /* hide text if a real logo loaded */
.doc-barcode{height:46px;width:200px;background-repeat:repeat-x;background-size:auto 100%}
/* Title */
.doc-title-block{text-align:center;padding:26px 0 22px}
.doc-title{margin:0;font-size:24px;font-weight:800;color:#16321f;letter-spacing:-.3px}
.doc-subtitle{margin:6px 0 0;font-size:15px;font-weight:700;color:var(--green-700)}
/* Data rows (like the reference table, but borderless cards) */
.doc-rows{display:flex;flex-direction:column;border:1px solid #EAEEF1;border-radius:12px;overflow:hidden;margin-bottom:26px}
.doc-row{display:grid;grid-template-columns:1fr 1fr}
.doc-row:not(:last-child){border-bottom:1px solid #EEF1F4}
.doc-cell{display:flex;align-items:center;gap:12px;padding:13px 16px}
.doc-cell:first-child{border-inline-end:1px solid #EEF1F4}
.doc-cell-lbl{font-size:12.5px;font-weight:700;color:#16321f;background:var(--green-50);padding:5px 10px;border-radius:7px;flex:none}
.doc-cell-val{font-size:13.5px;font-weight:600;color:#374151;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Sections */
.doc-section{margin-bottom:22px}
.doc-section-title{
  margin:0 0 12px;font-size:15px;font-weight:800;color:#16321f;
  display:flex;align-items:center;gap:9px;
}
.doc-section-title::before{content:'';width:4px;height:17px;border-radius:3px;background:var(--green-600);flex:none}
.doc-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.doc-list li{position:relative;padding-inline-start:20px;font-size:13px;line-height:1.7;color:#3f4753}
.doc-list li::before{content:'';position:absolute;inset-inline-start:4px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--green-600)}
/* Contact */
.doc-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.doc-contact-item{display:flex;align-items:center;gap:11px;background:var(--green-50);border-radius:11px;padding:12px 14px}
.doc-contact-ic{width:36px;height:36px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--green-700)}
.doc-contact-lbl{display:block;font-size:11.5px;color:#6b7280;font-weight:600}
.doc-contact-val{display:block;font-size:13px;color:#16321f;font-weight:700;margin-top:1px}
/* Footer signatures */
.doc-footer{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:34px;padding-top:8px}
.doc-foot-item{display:flex;flex-direction:column;gap:18px}
.doc-foot-lbl{font-size:12.5px;font-weight:700;color:#16321f}
.doc-foot-line{border-bottom:1.5px dashed #B9C4CC;min-height:22px;font-size:13px;color:#374151;display:flex;align-items:flex-end;padding-bottom:3px}

@media (max-width:680px){
  .doc-sheet{padding:26px 20px}
  .doc-row{grid-template-columns:1fr}
  .doc-cell:first-child{border-inline-end:0;border-bottom:1px solid #EEF1F4}
  .doc-contact-grid,.doc-footer{grid-template-columns:1fr;gap:18px}
  .doc-title{font-size:20px}
}

/* ===== Print: show only the document sheet ===== */
@media print{
  body * { visibility:hidden !important; }
  #reg-sheet, #reg-sheet * { visibility:visible !important; }
  #reg-sheet{
    position:absolute;inset:0;margin:0;width:100%;border:0;border-radius:0;box-shadow:none;padding:24px 30px;
  }
  .doc-toolbar, .sidebar, .topbar, .page-loader, .page-bg-deco { display:none !important; }
  @page { margin:14mm; }
}

/* Application doc: single-column footer (date only), centered */
.doc-footer.doc-footer-single{grid-template-columns:1fr;max-width:320px;margin-inline:auto;text-align:center}
.doc-footer.doc-footer-single .doc-foot-item{align-items:center}
.doc-footer.doc-footer-single .doc-foot-line{justify-content:center;min-width:200px}

/* Contract modal: signed toggle (checkbox) */
.ctrm-toggle{display:inline-flex;align-items:center;gap:9px;cursor:pointer;height:40px;user-select:none}
.ctrm-toggle input{position:absolute;opacity:0;width:0;height:0}
.ctrm-toggle-box{
  width:22px;height:22px;border-radius:7px;border:1.5px solid var(--border);background:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;transition:all .15s ease;
}
.ctrm-toggle-box::after{content:'';width:11px;height:6px;border-inline-start:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) scale(0);transition:transform .15s ease;margin-top:-2px}
.ctrm-toggle input:checked + .ctrm-toggle-box{background:var(--green-600);border-color:var(--green-600)}
.ctrm-toggle input:checked + .ctrm-toggle-box::after{transform:rotate(-45deg) scale(1)}
.ctrm-toggle-txt{font-size:13px;font-weight:700;color:var(--ink)}
body.dark .ctrm-toggle-box{background:#1E2A36;border-color:rgba(255,255,255,0.14)}

/* ============================================================
   Participation record page (per-user, card timeline)
   ============================================================ */
.rec-wrap{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:16px;padding-bottom:40px;
  font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;}
.rec-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rec-timeline{display:flex;flex-direction:column;gap:12px}
/* Participation card */
.rec-card{
  display:flex;align-items:center;gap:16px;background:#fff;border:1px solid #EEF1F4;border-radius:16px;
  padding:16px 18px;box-shadow:0 1px 3px rgba(16,24,40,0.03);position:relative;overflow:hidden;
}
body.dark .rec-card{background:var(--card);border-color:rgba(255,255,255,0.06)}
.rec-card::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--green-600)}
.rec-card-logo{
  width:52px;height:52px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--green-50);color:var(--green-700);font-weight:800;font-size:15px;overflow:hidden;
}
body.dark .rec-card-logo{background:rgba(255,255,255,0.05);color:#5DE3B0}
.rec-card-logo img{width:100%;height:100%;object-fit:contain}
.rec-card-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.rec-card-role{font-size:15px;font-weight:800;color:var(--ink);line-height:1.4}
.rec-card-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;color:#64748B}
body.dark .rec-card-meta{color:#94A3B8}
.rec-card-meta span{display:inline-flex;align-items:center;gap:5px}
.rec-card-meta svg{width:13px;height:13px;opacity:.7;flex:none}
.rec-card-side{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none}
.rec-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700}
.rec-badge .dot{width:7px;height:7px;border-radius:50%}
.rec-badge.accepted{background:rgba(22,163,74,0.10);color:#16A34A}
.rec-badge.accepted .dot{background:#16A34A}
.rec-badge.pending{background:rgba(234,138,30,0.12);color:#C2710C}
.rec-badge.pending .dot{background:#EA8A1E}
.rec-badge.rejected{background:rgba(239,68,68,0.10);color:#DC2626}
.rec-badge.rejected .dot{background:#DC2626}
body.dark .rec-badge.accepted{background:rgba(34,197,94,0.12);color:#4ADE80}
.rec-card-date{font-size:12px;color:#94A3B8;font-weight:600}
/* Empty + loading */
.rec-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:50px 24px;
  background:#fff;border:1px solid #EFF2F5;border-radius:16px}
body.dark .rec-empty{background:var(--card);border-color:rgba(255,255,255,0.06)}
.rec-empty h3{margin:0;font-size:17px;font-weight:800;color:var(--ink)}
.rec-empty p{margin:0;font-size:13px;color:#64748B;max-width:360px}
body.dark .rec-empty p{color:#94A3B8}
.rec-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:40px;color:#64748B;font-size:13.5px;font-weight:600}
.rec-spinner{width:18px;height:18px;border:2.5px solid #E2E8F0;border-top-color:var(--green-600);border-radius:50%;animation:rec-spin .7s linear infinite}
@keyframes rec-spin{to{transform:rotate(360deg)}}
@media (max-width:680px){
  .rec-stats{grid-template-columns:1fr}
  .rec-card{flex-wrap:wrap}
  .rec-card-side{align-items:flex-start;width:100%;flex-direction:row;justify-content:space-between}
}

/* Pilgrims/groups status badge (reuses flights table look) */
.frow-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700}
.frow-badge.ok{background:rgba(22,163,74,0.10);color:#16A34A}
.frow-badge.muted{background:#F1F5F9;color:#64748B}
body.dark .frow-badge.ok{background:rgba(34,197,94,0.12);color:#4ADE80}
body.dark .frow-badge.muted{background:rgba(255,255,255,0.06);color:#94A3B8}

/* Group modal: pilgrims (passport) sub-section */
.pg-pilgrims-section{margin-top:18px;padding-top:16px;border-top:1px solid #EEF1F4}
body.dark .pg-pilgrims-section{border-top-color:rgba(255,255,255,0.08)}
.pg-pilgrims-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pg-pilgrims-head h4{margin:0;font-size:15px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px}
.pg-pilgrims-head h4::before{content:'';width:4px;height:16px;border-radius:3px;background:var(--green-600)}
.pg-pilgrims-count{font-size:13px;font-weight:700;color:var(--green-700);background:var(--green-50);padding:4px 12px;border-radius:999px}
body.dark .pg-pilgrims-count{background:rgba(255,255,255,0.05);color:#5DE3B0}
.pg-add-row,.pg-mrz-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px}
.pg-pilgrims-list{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto;margin-top:4px}
.pg-hrow{display:flex;align-items:center;gap:12px;background:#F8FAFB;border:1px solid #EEF1F4;border-radius:11px;padding:9px 13px}
body.dark .pg-hrow{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.07)}
.pg-hrow-idx{width:26px;height:26px;flex:none;border-radius:7px;background:var(--green-600);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.pg-hrow-main{flex:1;min-width:0;display:flex;flex-direction:column}
.pg-hrow-name{font-size:13.5px;font-weight:700;color:var(--ink)}
.pg-hrow-meta{font-size:11.5px;color:#94A3B8;font-weight:600}
.pg-hrow-del{width:30px;height:30px;flex:none;border-radius:8px;border:1px solid var(--border);background:#fff;color:#94A3B8;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.pg-hrow-del:hover{background:#FEE2E2;color:#DC2626;border-color:#FCA5A5}
body.dark .pg-hrow-del{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.10)}
.pg-hlist-empty{font-size:12.5px;color:#94A3B8;text-align:center;padding:14px}

/* Groups table: AM/PM (صباحاً/مساءً) suffix on arrival time */
.pg-ampm{display:inline-block;font-size:11px;font-weight:700;color:var(--green-700);background:var(--green-50);padding:2px 7px;border-radius:6px;margin-inline-start:4px}
body.dark .pg-ampm{background:rgba(255,255,255,0.06);color:#5DE3B0}

/* ============================================================
   Custom date & time pickers (site-wide)
   ============================================================ */
.dt-field{position:relative;width:100%}
.dt-native{
  /* keep in DOM for value, but visually hide the browser control */
  position:absolute !important;opacity:0 !important;width:1px !important;height:1px !important;
  padding:0 !important;margin:0 !important;border:0 !important;pointer-events:none !important;
  clip:rect(0 0 0 0);overflow:hidden;
}
.dt-trigger{
  width:100%;display:flex;align-items:center;gap:9px;cursor:pointer;text-align:start;
  height:42px;padding:0 13px;border-radius:10px;
  border:1px solid var(--border);background:#fff;color:var(--ink);
  font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;font-size:13.5px;font-weight:600;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.dt-trigger:hover{border-color:#cbd5e1}
.dt-trigger:focus-visible{outline:none;border-color:var(--green-600);box-shadow:0 0 0 3px var(--green-50)}
.dt-trigger svg{flex:none;color:var(--green-700)}
.dt-trigger .dt-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-trigger:not(.has-val) .dt-value{color:#9aa4b2;font-weight:500}
body.dark .dt-trigger{background:#1E2A36;border-color:rgba(255,255,255,0.12);color:#E6EDF3}
body.dark .dt-trigger svg{color:#5DE3B0}

/* typeable date/time box: text input + icon button */
.dt-input-box{padding:0;cursor:text;overflow:hidden}
.dt-input-box:focus-within{border-color:var(--green-600);box-shadow:0 0 0 3px var(--green-50)}
body.dark .dt-input-box:focus-within{box-shadow:0 0 0 3px rgba(34,197,94,0.15)}
.dt-text{
  flex:1;min-width:0;height:100%;border:0;background:transparent;outline:none;
  padding:0 13px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);
}
.dt-text::placeholder{color:#9aa4b2;font-weight:500}
body.dark .dt-text{color:#E6EDF3}
.dt-icon-btn{
  flex:none;width:38px;height:100%;border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--green-700);
  border-inline-start:1px solid var(--border);transition:background .15s;
}
.dt-icon-btn:hover{background:var(--green-50)}
body.dark .dt-icon-btn{color:#5DE3B0;border-inline-start-color:rgba(255,255,255,0.12)}
body.dark .dt-icon-btn:hover{background:rgba(255,255,255,0.05)}

/* masked field: keep digits comfortably spaced */
.dt-mask{letter-spacing:1.5px;font-variant-numeric:tabular-nums}
.dt-time-mask{max-width:74px;flex:none}

/* TIME box: clock icon on the LEFT, time + AM/PM label on the RIGHT */
.dt-time-box .dt-icon-btn{border-inline-start:1px solid var(--border);border-inline-end:0}
body.dark .dt-time-box .dt-icon-btn{border-inline-start-color:rgba(255,255,255,0.12)}
.dt-time-box .dt-text{flex:none;width:70px;text-align:center;padding-inline:8px}
.dt-ap-label{
  flex:1;min-width:0;font-family:inherit;font-size:12.5px;font-weight:700;
  color:var(--green-700);white-space:nowrap;padding-inline-start:6px;
}
body.dark .dt-ap-label{color:#5DE3B0}

/* floating panel */
.dt-panel{
  background:#fff;border:1px solid #E7ECEF;border-radius:14px;
  box-shadow:0 16px 40px -12px rgba(16,24,40,0.30), 0 2px 8px rgba(16,24,40,0.06);
  padding:12px;font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;
  animation:dt-pop .12s ease-out;
}
@keyframes dt-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
body.dark .dt-panel{background:#16212C;border-color:rgba(255,255,255,0.10)}

/* calendar */
.dt-cal-panel{width:268px}
.dt-cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.dt-cal-title{display:flex;align-items:center;gap:6px}
.dt-cal-my{background:transparent;border:0;cursor:pointer;font-family:inherit;font-size:14px;font-weight:800;color:var(--ink);padding:4px 8px;border-radius:7px}
.dt-cal-my:hover{background:var(--green-50);color:var(--green-700)}
.dt-cal-my-static{font-size:14px;font-weight:800;color:var(--ink)}
body.dark .dt-cal-my,body.dark .dt-cal-my-static{color:#E6EDF3}
body.dark .dt-cal-my:hover{background:rgba(255,255,255,0.06);color:#5DE3B0}
.dt-nav{width:30px;height:30px;flex:none;border-radius:8px;border:1px solid var(--border);background:#fff;color:#64748b;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.dt-nav:hover{border-color:var(--green-600);color:var(--green-700);background:var(--green-50)}
body.dark .dt-nav{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);color:#94A3B8}
.dt-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.dt-cal-dow span{text-align:center;font-size:11px;font-weight:700;color:#94A3B8;padding:4px 0}
.dt-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dt-cell{aspect-ratio:1;border:0;background:transparent;border-radius:9px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background .12s}
.dt-cell:hover:not(.dt-cell-empty){background:var(--green-50);color:var(--green-800)}
.dt-cell-empty{cursor:default}
.dt-cell.today{box-shadow:inset 0 0 0 1.5px var(--green-600);color:var(--green-700)}
.dt-cell.selected{background:var(--green-600);color:#fff;font-weight:800}
.dt-cell.selected:hover{background:var(--green-700);color:#fff}
body.dark .dt-cell{color:#E6EDF3}
body.dark .dt-cell:hover:not(.dt-cell-empty){background:rgba(255,255,255,0.06);color:#9EF0CD}
.dt-cal-foot{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #EEF1F4}
body.dark .dt-cal-foot{border-top-color:rgba(255,255,255,0.08)}
.dt-foot-btn{flex:1;height:34px;border-radius:8px;border:1px solid var(--border);background:#fff;color:#475569;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:700;transition:all .15s}
.dt-foot-btn:hover{background:#F1F5F9}
.dt-foot-primary{background:var(--green-700);border-color:var(--green-700);color:#fff}
.dt-foot-primary:hover{background:var(--green-800)}
body.dark .dt-foot-btn{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);color:#CBD5E1}

/* month/year quick picker */
.dt-my-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.dt-my-cell{height:40px;border:1px solid var(--border);background:#fff;border-radius:9px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;color:var(--ink);transition:all .15s}
.dt-my-cell:hover{border-color:var(--green-600);background:var(--green-50);color:var(--green-700)}
.dt-my-cell.selected{background:var(--green-600);border-color:var(--green-600);color:#fff}
body.dark .dt-my-cell{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.10);color:#E6EDF3}

/* time picker */
.dt-time-panel{width:240px}
.dt-time-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.dt-tcol{display:flex;flex-direction:column;gap:3px;max-height:200px;overflow-y:auto;padding-inline-end:2px}
.dt-tcol::-webkit-scrollbar{width:6px}
.dt-tcol::-webkit-scrollbar-thumb{background:#d8e0e6;border-radius:6px}
body.dark .dt-tcol::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15)}
.dt-apcol{overflow:visible}
.dt-topt{height:38px;border:0;background:transparent;border-radius:9px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background .12s}
.dt-topt:hover{background:var(--green-50);color:var(--green-800)}
.dt-topt.selected{background:var(--green-600);color:#fff}
body.dark .dt-topt{color:#E6EDF3}
body.dark .dt-topt:hover{background:rgba(255,255,255,0.06);color:#9EF0CD}

/* ============================================================
   Pilgrims table: grouped two-row header (Company / Pilgrim / Nusuk / Status)
   ============================================================ */
#ph-table thead .ph-group-row th.ph-group{
  text-align:center;padding:11px 12px;font-size:12px;font-weight:800;color:#fff;
  letter-spacing:.3px;border-inline-end:1px solid rgba(255,255,255,0.18);
  background:linear-gradient(135deg, var(--green-900) 0%, var(--green-800) 100%);
  position:sticky;top:0;z-index:3;height:40px;
}
#ph-table thead .ph-group-row th.col-idx,
#ph-table thead .ph-group-row th.col-actions{
  position:sticky;top:0;z-index:3;
  background:linear-gradient(135deg, var(--green-900) 0%, var(--green-800) 100%);
}
.ph-grp-company,.ph-grp-hajj,.ph-grp-nusuk,.ph-grp-status{
  background:linear-gradient(135deg, var(--green-900) 0%, var(--green-800) 100%);
}
body.dark .ph-grp-company,body.dark .ph-grp-hajj,body.dark .ph-grp-nusuk,body.dark .ph-grp-status,
body.dark #ph-table thead .ph-group-row th.col-idx,
body.dark #ph-table thead .ph-group-row th.col-actions{
  background:linear-gradient(135deg, var(--green-900) 0%, var(--green-800) 100%);
}
/* sub-header row matches the standard table header gradient (like the groups table) */
#ph-table thead .flights-col-row th{top:40px;z-index:2;background:linear-gradient(135deg, var(--green-800) 0%, var(--green-700) 100%)}
body.dark #ph-table thead .flights-col-row th{background:linear-gradient(135deg, var(--green-900) 0%, var(--green-800) 100%)}

/* Pilgrim modal section titles */
.ph-modal-section-title{font-size:13px;font-weight:800;color:var(--green-700);margin:16px 0 9px;display:flex;align-items:center;gap:8px}
.ph-modal-section-title:first-of-type{margin-top:2px}
.ph-modal-section-title::before{content:'';width:4px;height:15px;border-radius:3px;background:var(--green-600)}
body.dark .ph-modal-section-title{color:#5DE3B0}

/* ============================================================
   Visitor preview mode — show only Home + Seasonal Recruitment
   (what a not-yet-hired applicant sees). Applied via body.visitor-mode
   ============================================================ */
body.visitor-mode #epath-group,
body.visitor-mode #trips-group,
body.visitor-mode #housing-group,
body.visitor-mode #hr-group,
body.visitor-mode #passports-group,
body.visitor-mode #finance-group,
body.visitor-mode #indicators-nav,
body.visitor-mode #sitemap-nav,
body.visitor-mode #transport-group,
body.visitor-mode #mashaer-group,
body.role-user #epath-group,
body.role-user #trips-group,
body.role-user #housing-group,
body.role-user #hr-group,
body.role-user #passports-group,
body.role-user #finance-group,
body.role-user #indicators-nav,
body.role-user #sitemap-nav,
body.role-user #transport-group,
body.role-user #mashaer-group{ display:none !important; }

/* sites dashboard is operational/admin — keep it out of light roles */
body.preview-visitor #sitemap-nav, body.preview-employee #sitemap-nav,
body.preview-fresh #sitemap-nav{ display:none !important; }

/* ---- Role preview modes (admin previewing as a given role) ---- */
/* إدارة المراكز is admin-only — hide it in every role preview */
body.preview-visitor #centers-nav, body.preview-employee #centers-nav,
body.preview-fresh #centers-nav, body.preview-supervisor #centers-nav,
body.preview-center_manager #centers-nav, body.preview-job #centers-nav{ display:none !important; }
/* VISITOR / applicant & EMPLOYEE: only Home + Recruitment */
body.preview-visitor #epath-group, body.preview-visitor #trips-group, body.preview-visitor #housing-group,
body.preview-visitor #hr-group, body.preview-visitor #passports-group, body.preview-visitor #finance-group,
body.preview-visitor #indicators-nav, body.preview-visitor #mashaer-group, body.preview-visitor #transport-group,
body.preview-employee #epath-group, body.preview-employee #trips-group, body.preview-employee #housing-group,
body.preview-employee #hr-group, body.preview-employee #passports-group, body.preview-employee #finance-group,
body.preview-employee #indicators-nav, body.preview-employee #mashaer-group, body.preview-employee #transport-group,
/* SUPERVISOR: Home + Trips + Housing (hide the rest) */
body.preview-supervisor #epath-group, body.preview-supervisor #hr-group,
body.preview-supervisor #finance-group, body.preview-supervisor #recruit-group,
body.preview-supervisor #indicators-nav, body.preview-supervisor #mashaer-group,
/* CENTER MANAGER: Home + Trips + Housing + Passports + Recruitment (hide e-path, HR, finance) */
body.preview-center_manager #epath-group, body.preview-center_manager #hr-group,
body.preview-center_manager #finance-group{ display:none !important; }

/* FRESH user preview: under Recruitment, show ONLY "الوظائف" (like a brand-new user) */
body.preview-fresh #recruit-register-nav,
body.preview-fresh #recruit-records-nav,
body.preview-fresh #recruit-contract-nav,
body.preview-fresh #recruit-templates-nav{ display:none !important; }


/* Regular user recruitment journey (stages):
   New journey for the applicant (role-user):
   - الوظائف + طلباتي + ملفاتي : always visible
   - العرض الوظيفي : only after an offer was sent (stage-offer)
   - توثيق العقد : only after the offer is accepted (stage-accepted)
   Admins (no role-user class) always see everything. */
body.role-user #recruit-offer-nav{ display:none; }
body.role-user.stage-offer #recruit-offer-nav{ display:flex; }
body.role-user #recruit-contract-nav{ display:none; }
body.role-user.stage-accepted #recruit-contract-nav{ display:flex; }
/* once an offer is accepted, the jobs board + the offer page disappear —
   the user is now on the employment track (contract documentation). */
body.role-user.stage-accepted #recruit-jobs-nav,
body.role-user.stage-contracted #recruit-jobs-nav,
body.role-user.stage-accepted #recruit-offer-nav,
body.role-user.stage-contracted #recruit-offer-nav{ display:none !important; }
/* legacy items (register/records/templates) fully retired from the applicant journey */
body.role-user #recruit-register-nav,
body.role-user #recruit-records-nav,
body.role-user #recruit-templates-nav{ display:none; }
/* applicants & offers is admin-only — never show to regular users / previews */
body.role-user #recruit-applicants-nav,
body.preview-visitor #recruit-applicants-nav,
body.preview-employee #recruit-applicants-nav,
body.preview-center_manager #recruit-applicants-nav,
body.preview-fresh #recruit-applicants-nav,
body:not(.is-admin) #recruit-applicants-nav{ display:none !important; }
/* preview-fresh: brand-new user sees only الوظائف (+ طلباتي) */
body.preview-fresh #recruit-offer-nav,
body.preview-fresh #recruit-contract-nav{ display:none !important; }

/* a small banner shown while previewing the visitor view */
.visitor-preview-bar{
  position:fixed;top:0;left:0;right:0;z-index:4000;
  display:none;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(120deg,var(--green-800),var(--green-700));
  color:#fff;padding:9px 16px;font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;font-size:13.5px;font-weight:700;
  box-shadow:0 4px 14px -4px rgba(0,0,0,0.3);
}
body.visitor-mode .visitor-preview-bar,
body.preview-active .visitor-preview-bar{display:flex}
.visitor-preview-bar .vpb-exit{
  display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--green-800);
  border:0;border-radius:8px;padding:6px 14px;font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer;
}
.visitor-preview-bar .vpb-exit:hover{background:#f0f0f0}
body.visitor-mode{padding-top:0}

/* ============================================================
   Seasonal jobs — PREMIUM job-board design
   ============================================================ */
.page-recruit-jobs{padding-bottom:50px}

/* ---------- HERO ---------- */
.jobs-hero{
  position:relative;overflow:hidden;border-radius:26px;margin-bottom:26px;
  background:
    radial-gradient(1200px 400px at 85% -10%, rgba(201,168,106,0.22), transparent 60%),
    linear-gradient(135deg, var(--green-900) 0%, var(--green-800) 50%, var(--green-700) 100%);
  box-shadow:0 24px 60px -26px rgba(6,42,31,0.65);
}
.jobs-hero-deco{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,0.10) 0 2px, transparent 3px),
    radial-gradient(circle at 90% 70%, rgba(255,255,255,0.08) 0 2px, transparent 3px),
    repeating-linear-gradient(60deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 26px);
}
.jobs-hero-deco::after{
  content:'';position:absolute;inset-inline-end:-60px;top:50%;transform:translateY(-50%);
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle, rgba(201,168,106,0.30) 0%, transparent 70%);
  filter:blur(8px);
}
.jobs-hero-inner{position:relative;padding:46px 46px 38px;max-width:760px}
.jobs-hero-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.18);color:#fff;font-size:12.5px;font-weight:700;backdrop-filter:blur(6px)}
.jobs-hero-badge svg{color:var(--gold)}
.jobs-hero-title{margin:18px 0 12px;font-size:34px;line-height:1.25;font-weight:800;color:#fff;letter-spacing:-.5px}
.jobs-hero-sub{margin:0 0 26px;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,0.85);max-width:620px}
.jobs-hero-search{position:relative;display:flex;align-items:center;background:#fff;border-radius:14px;padding:0 16px;height:56px;box-shadow:0 14px 30px -12px rgba(0,0,0,0.4);max-width:560px}
.jobs-hero-search svg{color:var(--green-700);flex:none}
.jobs-hero-search input{flex:1;border:0;outline:none;background:transparent;height:100%;padding:0 12px;font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;font-size:14.5px;font-weight:600;color:var(--ink)}
.jobs-hero-search input::placeholder{color:#9aa4b2;font-weight:500}
body.dark .jobs-hero-search{background:#1A2530;box-shadow:0 14px 30px -12px rgba(0,0,0,0.6)}
body.dark .jobs-hero-search svg{color:#5DE3B0}
body.dark .jobs-hero-search input{color:#E5E7EB}
body.dark .jobs-hero-search input::placeholder{color:#6b7785}
.jobs-hero-stats{display:flex;align-items:center;gap:22px;margin-top:28px}
.jhs-item{display:flex;flex-direction:column}
.jhs-num{font-size:26px;font-weight:800;color:#fff;line-height:1}
.jhs-lbl{font-size:12px;font-weight:600;color:rgba(255,255,255,0.7);margin-top:5px}
.jhs-sep{width:1px;height:34px;background:rgba(255,255,255,0.18)}

/* ---------- applied banner ---------- */
.jobs-applied-banner{display:flex;align-items:center;gap:11px;background:var(--green-50);border:1px solid rgba(26,107,79,0.18);border-radius:14px;padding:13px 17px;margin-bottom:18px;font-size:13.5px;font-weight:700;color:var(--green-800)}
.jobs-applied-banner .jab-ic{width:30px;height:30px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--green-600);color:#fff}
body.dark .jobs-applied-banner{background:rgba(34,197,94,0.08);border-color:rgba(34,197,94,0.22);color:#9EF0CD}

/* ---------- tabs ---------- */
.jobs-tabs-row{position:relative;margin-bottom:26px}
.jobs-tabs{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.jobs-tabs::-webkit-scrollbar{height:6px}
.jobs-tabs::-webkit-scrollbar-thumb{background:#d8e0e6;border-radius:6px}
body.dark .jobs-tabs::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.14)}
.jobs-tab{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:1px solid var(--border);background:#fff;color:#475569;border-radius:999px;padding:9px 17px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .18s}
.jobs-tab svg{opacity:.7}
.jobs-tab:hover{border-color:var(--green-600);color:var(--green-700);transform:translateY(-1px)}
.jobs-tab.active{background:linear-gradient(135deg,var(--green-700),var(--green-600));border-color:transparent;color:#fff;box-shadow:0 8px 18px -8px rgba(19,87,63,0.5)}
.jobs-tab.active svg{opacity:1}
body.dark .jobs-tab{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);color:#CBD5E1}

/* ---------- featured strip ---------- */
.jobs-featured{margin-bottom:34px}
.jobs-featured-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.jobs-featured-head h3{margin:0;font-size:19px;font-weight:800;color:var(--ink)}
.jobs-featured-tag{display:inline-flex;align-items:center;font-size:11.5px;font-weight:800;color:#8a6d2f;background:linear-gradient(135deg,#f7eedb,#efdcb6);padding:4px 12px;border-radius:999px;border:1px solid rgba(201,168,106,0.4)}
body.dark .jobs-featured-tag{background:rgba(201,168,106,0.16);color:var(--gold);border-color:rgba(201,168,106,0.35)}
.jobs-featured-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}

/* ---------- category sections ---------- */
.jobs-wrap{display:flex;flex-direction:column;gap:38px}
.jobs-cat-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.jobs-cat-ic{width:38px;height:38px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--green-50);color:var(--green-700)}
body.dark .jobs-cat-ic{background:rgba(255,255,255,0.05);color:#5DE3B0}
.jobs-cat-head h3{margin:0;font-size:18px;font-weight:800;color:var(--ink)}
.jobs-cat-count{font-size:12px;font-weight:700;color:var(--green-700);background:var(--green-50);padding:4px 12px;border-radius:999px}
body.dark .jobs-cat-count{background:rgba(255,255,255,0.05);color:#5DE3B0}

/* fewer, larger cards */
.jobs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}

/* ---------- job card (large, detailed) ---------- */
.job-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:20px;padding:22px;box-shadow:0 2px 6px rgba(16,24,40,0.05);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;overflow:hidden}
.job-card::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--green-600),var(--green-500));opacity:0;transition:opacity .2s}
.job-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -20px rgba(16,24,40,0.28);border-color:#d7e3da}
.job-card:hover::before{opacity:1}
body.dark .job-card{background:#16212C;border-color:rgba(255,255,255,0.08)}
body.dark .job-card:hover{border-color:rgba(94,227,176,0.3)}
.job-card.is-applied{border-color:var(--green-600)}
.job-card.is-applied::before{opacity:1}
.job-card--feat{background:linear-gradient(180deg,#ffffff,#fcfaf4);border-color:rgba(201,168,106,0.35)}
body.dark .job-card--feat{background:linear-gradient(180deg,#1a2730,#1c2620);border-color:rgba(201,168,106,0.25)}

.job-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.job-card-ic{width:52px;height:52px;flex:none;border-radius:15px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--green-50),#dcefe3);color:var(--green-700);box-shadow:inset 0 0 0 1px rgba(26,107,79,0.08)}
body.dark .job-card-ic{background:rgba(255,255,255,0.06);color:#5DE3B0}
.job-card-top-tags{display:flex;align-items:center;gap:6px}
.job-card-star{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f7eedb,#efdcb6);color:#b8902f}
body.dark .job-card-star{background:rgba(201,168,106,0.18);color:var(--gold)}
.job-card-flag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:var(--green-700);background:var(--green-50);padding:5px 10px;border-radius:999px}
body.dark .job-card-flag{background:rgba(34,197,94,0.12);color:#5DE3B0}
.job-card-title{margin:0 0 7px;font-size:17.5px;font-weight:800;color:var(--ink);line-height:1.3}
.job-card-cat{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--green-600)}
.job-card-cat svg{opacity:.7}
body.dark .job-card-cat{color:#5DE3B0}
.job-card-desc{margin:12px 0 16px;font-size:13px;line-height:1.65;color:var(--muted);flex:1}
.job-card-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.jcm{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:#64748b;background:#F4F6F8;padding:5px 10px;border-radius:8px}
.jcm svg{opacity:.8}
.jcm-type{color:var(--green-700);background:var(--green-50);font-weight:700}
body.dark .jcm{background:rgba(255,255,255,0.04);color:#94A3B8}
body.dark .jcm-type{background:rgba(34,197,94,0.12);color:#5DE3B0}
.job-card-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;border-radius:13px;border:1px solid var(--green-700);background:linear-gradient(135deg,var(--green-700),var(--green-600));color:#fff;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:all .18s;box-shadow:0 8px 18px -10px rgba(19,87,63,0.55)}
.job-card-btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 12px 22px -10px rgba(19,87,63,0.6)}
.job-card-btn.applied{background:#fff;color:#DC2626;border-color:#FCA5A5;box-shadow:none}
.job-card-btn.applied:hover{background:#FEE2E2;filter:none}
body.dark .job-card-btn.applied{background:rgba(255,255,255,0.04);color:#F87171;border-color:rgba(248,113,113,0.4)}
body.dark .job-card-btn.applied:hover{background:rgba(248,113,113,0.12)}

/* ---------- empty ---------- */
.jobs-empty{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:54px 20px;color:#94A3B8}
.jobs-empty svg{color:#cbd5e1}
.jobs-empty p{margin:0;font-size:14px;font-weight:600}

/* ---------- responsive ---------- */
@media (max-width:680px){
  .jobs-hero-inner{padding:34px 24px 28px}
  .jobs-hero-title{font-size:25px}
  .jobs-hero-stats{gap:16px}
  .jobs-grid,.jobs-featured-grid{grid-template-columns:1fr}
}

/* applicants page: extra badge colours + offer modal */
.frow-badge.info{background:#E0F2FE;color:#0369A1}
.frow-badge.danger{background:#FEE2E2;color:#B91C1C}
body.dark .frow-badge.info{background:rgba(56,189,248,0.16);color:#7dd3fc}
body.dark .frow-badge.danger{background:rgba(248,113,113,0.16);color:#fca5a5}
.ap-offer-applicant{margin:0 0 14px;font-size:13.5px;font-weight:700;color:var(--green-800);background:var(--green-50);padding:11px 14px;border-radius:10px}
body.dark .ap-offer-applicant{background:rgba(34,197,94,0.08);color:#9EF0CD}

/* ============================================================
   Sites Dashboard (لوحة معلومات المواقع) — ArcGIS-style
   ============================================================ */
.page-sitemap{padding:0}
.smap-shell{display:flex;gap:0;height:calc(100vh - 150px);min-height:640px;border-radius:18px;overflow:hidden;border:1px solid var(--border);box-shadow:0 10px 30px -16px rgba(16,24,40,0.25)}
body.dark .smap-shell{border-color:rgba(255,255,255,0.08)}

/* rail search box (inside dark rail) */
.smap-rail-search{display:flex;align-items:center;gap:8px;background:#16241e;border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:0 11px;height:38px;margin-bottom:10px}
.smap-rail-search svg{color:#7fb39d;flex:none}
.smap-rail-search input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:#e6f0ea;font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;font-size:12.5px;height:100%}
.smap-rail-search input::placeholder{color:#5f8a78}

/* donut charts (license & readiness rates) */
.smap-donuts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.smap-donut{position:relative;display:flex;flex-direction:column;align-items:center;background:#16241e;border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:14px 10px 12px}
.smap-donut-svg{width:96px;height:96px;transform:rotate(-90deg)}
.smap-donut-bg{fill:none;stroke:#1f3329;stroke-width:12}
.smap-donut-fg{fill:none;stroke:#2E8B6A;stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1)}
.smap-donut-fg.blue{stroke:#3DA8E0}
.smap-donut-center{position:absolute;top:14px;width:96px;height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.smap-donut-pct{font-size:21px;font-weight:800;color:#fff;line-height:1}
.smap-donut-cnt{font-size:11px;font-weight:700;color:#7fb39d;margin-top:2px}
.smap-donut-lbl{font-size:11px;font-weight:600;color:#9fc3b4;text-align:center;margin-top:9px;line-height:1.35}

/* table section below the map */
.smap-table-section{margin-top:26px}
.page-sitemap .smap-table-section .flights-header{margin-bottom:18px}
.smap-map-col{flex:1;display:flex;flex-direction:column;min-width:0}
.smap-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:linear-gradient(120deg,var(--green-900),var(--green-800));color:#fff}
.smap-toolbar-title{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:800}
.smap-toolbar-title svg{color:var(--gold)}
.smap-toolbar-actions{display:flex;gap:9px}
.smap-toolbar-actions .btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;font-size:13px;font-weight:700;line-height:1;
  padding:9px 15px;height:auto;border-radius:10px;
  background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.28);color:#fff;
  backdrop-filter:blur(4px);transition:background .15s,border-color .15s,transform .15s;white-space:nowrap;
}
.smap-toolbar-actions .btn-secondary svg{margin:0;flex:none;opacity:.95}
.smap-toolbar-actions .btn-secondary span{display:inline-block}
.smap-toolbar-actions .btn-secondary:hover{background:rgba(255,255,255,0.26);border-color:rgba(255,255,255,0.45);transform:translateY(-1px)}
.smap-map-wrap{position:relative;flex:1;min-height:0}
#smap-map{position:absolute;inset:0;width:100%;height:100%;background:#dfe6ea}
.smap-hint{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:600;background:var(--green-800);color:#fff;font-size:12.5px;font-weight:700;padding:8px 16px;border-radius:999px;box-shadow:0 6px 16px -6px rgba(0,0,0,0.4)}

/* dark stats rail */
.smap-rail{width:360px;flex:none;background:#0f1b16;color:#e6f0ea;display:flex;flex-direction:column;padding:22px 20px;overflow-y:auto}
.smap-rail-head{margin-bottom:16px}
.smap-rail-kicker{font-size:11px;font-weight:700;color:#7fb39d;letter-spacing:.5px}
.smap-rail-head h3{margin:3px 0 0;font-size:20px;font-weight:800;color:#fff}
.smap-gauges{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.smap-gauge{display:flex;flex-direction:column;align-items:center;gap:7px}
.smap-gauge-ring{width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:#fff;background:conic-gradient(var(--green-500) 0 100%, #1b2b24 0);box-shadow:inset 0 0 0 8px #14241d}
.smap-gauge-lbl{font-size:12px;font-weight:600;color:#9fc3b4;text-align:center}
.smap-bigstat{background:linear-gradient(135deg,var(--green-700),var(--green-500));border-radius:14px;padding:16px;text-align:center;margin-bottom:18px}
.smap-bigstat-lbl{display:block;font-size:12px;font-weight:600;color:#cdeadd}
.smap-bigstat-val{display:block;font-size:38px;font-weight:800;color:#fff;margin-top:4px;letter-spacing:.5px}
.smap-rail-list-head{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:800;color:#9fc3b4;padding:0 2px 8px;border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:8px}
.smap-zone-list{display:flex;flex-direction:column;gap:7px}
.smap-zone-item{display:flex;align-items:center;gap:10px;width:100%;text-align:start;background:#16241e;border:1px solid rgba(255,255,255,0.06);border-radius:11px;padding:10px 12px;cursor:pointer;transition:all .15s;color:#e6f0ea;font-family:inherit}
.smap-zone-item:hover{background:#1b2c24;border-color:rgba(46,139,106,0.5)}
.smap-zi-dot{width:10px;height:10px;border-radius:50%;flex:none}
.smap-zi-green{background:#2E8B6A}.smap-zi-blue{background:#3b82f6}
.smap-zi-body{flex:1;min-width:0;display:flex;flex-direction:column}
.smap-zi-body b{font-size:13px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.smap-zi-sub{font-size:11px;color:#9fc3b4}
.smap-empty{text-align:center;color:#7fb39d;padding:30px 10px;font-size:13px}
.smap-empty-sub{font-size:12px;color:#5f8a78;margin-top:6px}
.smap-badge{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.smap-badge.ok{background:rgba(46,139,106,0.25);color:#86efac}
.smap-badge.info{background:rgba(59,130,246,0.22);color:#93c5fd}
.smap-badge.danger{background:rgba(248,113,113,0.22);color:#fca5a5}

/* map labels + pins (Leaflet divIcons) */
.smap-zone-label{background:transparent !important;border:0 !important}
.smap-zone-label span{display:inline-block;background:rgba(255,255,255,0.9);color:#0f1b16;font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;font-size:11px;font-weight:800;padding:2px 8px;border-radius:6px;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,0.25);transform:translateX(-50%)}
.smap-pin{background:transparent !important;border:0 !important}
.smap-pin span{display:block;width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 1px 4px rgba(0,0,0,0.4);border:2px solid #fff}
.smap-pin-green span{background:#1A6B4F}.smap-pin-blue span{background:#1d4ed8}

/* popup */
.smap-popup-wrap .leaflet-popup-content{margin:0}
.smap-popup{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;min-width:200px;padding:4px 2px}
.smap-popup-title{font-size:15px;font-weight:800;color:#0f1b16;margin-bottom:8px}
.smap-popup-title span{font-size:12px;color:#1A6B4F;font-weight:700}
.smap-popup-row{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:12.5px;padding:4px 0;border-top:1px solid #eef1f4}
.smap-popup-row span{color:#64748b}.smap-popup-row b{color:#0f1b16}
.smap-popup-notes{margin-top:8px;font-size:12px;color:#475569;background:#f4f6f8;padding:8px 10px;border-radius:8px;line-height:1.5}
.smap-popup-edit{margin-top:10px;width:100%;height:34px;border:1px solid var(--green-700);background:var(--green-700);color:#fff;border-radius:9px;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.smap-popup-edit:hover{background:var(--green-800)}
.smap-badge.ok{}

@media (max-width:900px){
  .smap-shell{flex-direction:column;height:auto}
  /* flex:none so the explicit height wins (flex-basis:0 would otherwise collapse
     the map to ~0 height in a column flex, hiding the Leaflet map) */
  .smap-map-col{flex:none;width:100%}
  .smap-map-wrap{flex:none;height:420px;min-height:420px}
  #smap-map,#tr-map{height:420px !important}
  .smap-rail{width:auto;flex:none}
}

/* ============================================================
   Recruitment journey pages (طلباتي / العرض الوظيفي / ملفاتي)
   Full-width, dashboard cards, Almasiah identity.
   ============================================================ */
.rj-head{margin-bottom:22px}
.rj-title{margin:0 0 5px;font-size:25px;font-weight:800;color:var(--ink)}
.rj-sub{margin:0;font-size:14px;color:var(--muted)}

/* journey progress steps */
.rj-steps{display:flex;align-items:center;gap:0;margin-bottom:24px;background:var(--card,#fff);border:1px solid var(--border);border-radius:16px;padding:18px 22px;overflow-x:auto}
body.dark .rj-steps{background:#16212C;border-color:rgba(255,255,255,0.08)}
.rj-step{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none;min-width:74px}
.rj-step-dot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;background:#EEF1F4;color:#94A3B8;border:2px solid transparent;transition:all .25s}
.rj-step-lbl{font-size:11.5px;font-weight:700;color:#94A3B8;white-space:nowrap}
.rj-step.done .rj-step-dot{background:var(--green-600);color:#fff}
.rj-step.done .rj-step-lbl{color:var(--green-700)}
.rj-step.current .rj-step-dot{background:#fff;color:var(--green-700);border-color:var(--green-600);box-shadow:0 0 0 4px var(--green-50)}
.rj-step.current .rj-step-lbl{color:var(--green-700)}
body.dark .rj-step-dot{background:rgba(255,255,255,0.08)}
body.dark .rj-step.current .rj-step-dot{background:#16212C}
.rj-step-line{flex:1;height:2px;background:#E5E7EB;min-width:18px}
body.dark .rj-step-line{background:rgba(255,255,255,0.1)}

/* cards */
.rj-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rj-card-main{grid-column:1 / -1}
.rj-card{background:var(--card,#fff);border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:0 2px 6px rgba(16,24,40,0.05)}
body.dark .rj-card{background:#16212C;border-color:rgba(255,255,255,0.08)}
.rj-card-top{display:flex;align-items:flex-start;gap:14px}
.rj-card-icon{width:50px;height:50px;flex:none;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--green-50),#dcefe3);color:var(--green-700)}
body.dark .rj-card-icon{background:rgba(255,255,255,0.06);color:#5DE3B0}
.rj-card-kicker{font-size:12px;font-weight:600;color:var(--muted)}
.rj-card-title{margin:3px 0 0;font-size:20px;font-weight:800;color:var(--ink)}
.rj-card-status{margin-inline-start:auto}
.rj-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.rj-card-head h4{margin:0;font-size:15px;font-weight:800;color:var(--ink)}
.rj-badge{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:5px 13px;border-radius:999px}
.rj-badge.ok{background:#E7F6EF;color:#16734F}
.rj-badge.info{background:#E0F2FE;color:#0369A1}
.rj-badge.muted{background:#EEF1F4;color:#64748B}
.rj-badge.danger{background:#FEE2E2;color:#B91C1C}
body.dark .rj-badge.ok{background:rgba(34,197,94,0.16);color:#86EFAC}
body.dark .rj-badge.info{background:rgba(56,189,248,0.16);color:#7DD3FC}
body.dark .rj-badge.muted{background:rgba(255,255,255,0.08);color:#CBD5E1}
body.dark .rj-badge.danger{background:rgba(248,113,113,0.16);color:#FCA5A5}
.rj-meta-row{display:flex;flex-wrap:wrap;gap:26px;margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
body.dark .rj-meta-row{border-color:rgba(255,255,255,0.08)}
.rj-meta{display:flex;flex-direction:column;gap:4px}
.rj-meta span{font-size:12px;color:var(--muted)}
.rj-meta b{font-size:14px;font-weight:700;color:var(--ink)}
.rj-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rj-mini-grid>div{display:flex;flex-direction:column;gap:4px}
.rj-mini-grid span{font-size:12px;color:var(--muted)}
.rj-mini-grid b{font-size:14.5px;font-weight:700;color:var(--ink)}
.rj-note{margin:0;font-size:13.5px;line-height:1.7;color:var(--muted)}
.rj-inline-actions{margin-top:18px;display:flex;gap:10px}

/* offer page */
.rj-offer-banner{display:flex;align-items:center;gap:11px;padding:14px 18px;border-radius:14px;font-size:14px;font-weight:700;margin-bottom:18px}
.rj-offer-banner.info{background:#E0F2FE;color:#0369A1}
.rj-offer-banner.ok{background:#E7F6EF;color:#16734F}
.rj-offer-banner.danger{background:#FEE2E2;color:#B91C1C}
body.dark .rj-offer-banner.info{background:rgba(56,189,248,0.12);color:#7DD3FC}
body.dark .rj-offer-banner.ok{background:rgba(34,197,94,0.12);color:#86EFAC}
body.dark .rj-offer-banner.danger{background:rgba(248,113,113,0.12);color:#FCA5A5}
.rj-offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
body.dark .rj-offer-grid{border-color:rgba(255,255,255,0.08)}
.rj-of{display:flex;flex-direction:column;gap:5px}
.rj-of span{font-size:12px;color:var(--muted)}
.rj-of b{font-size:16px;font-weight:800;color:var(--ink)}
.rj-offer-actions{display:flex;gap:12px;margin-top:22px}
.rj-offer-actions .btn-primary{min-width:150px}
.btn-secondary.rj-reject{color:#DC2626;border-color:#FCA5A5}
.btn-secondary.rj-reject:hover{background:#FEE2E2}
body.dark .btn-secondary.rj-reject{color:#F87171;border-color:rgba(248,113,113,0.4)}

/* empty states */
.rj-empty{text-align:center;padding:54px 20px;background:var(--card,#fff);border:1px solid var(--border);border-radius:18px}
body.dark .rj-empty{background:#16212C;border-color:rgba(255,255,255,0.08)}
.rj-empty-ic{width:74px;height:74px;border-radius:20px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;background:var(--green-50);color:var(--green-600)}
body.dark .rj-empty-ic{background:rgba(255,255,255,0.05);color:#5DE3B0}
.rj-empty h3{margin:0 0 8px;font-size:18px;font-weight:800;color:var(--ink)}
.rj-empty p{margin:0 0 18px;font-size:14px;color:var(--muted)}

/* my files */
.rj-files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.rj-file-card{display:flex;align-items:center;gap:14px;background:var(--card,#fff);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 2px 6px rgba(16,24,40,0.05);position:relative}
body.dark .rj-file-card{background:#16212C;border-color:rgba(255,255,255,0.08)}
.rj-file-card.has{border-color:rgba(26,107,79,0.3)}
.rj-file-ic{width:46px;height:46px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--green-50);color:var(--green-700)}
.rj-file-card.missing .rj-file-ic{background:#F1F5F9;color:#94A3B8}
body.dark .rj-file-ic{background:rgba(255,255,255,0.06);color:#5DE3B0}
body.dark .rj-file-card.missing .rj-file-ic{background:rgba(255,255,255,0.04);color:#64748B}
.rj-file-body{flex:1;min-width:0}
.rj-file-body h4{margin:0 0 5px;font-size:14.5px;font-weight:700;color:var(--ink)}
.rj-file-state{font-size:12px;font-weight:700}
.rj-file-state.ok{color:var(--green-600)}
.rj-file-state.muted{color:#94A3B8}
.rj-file-val{position:absolute;inset-inline-end:18px;top:18px;font-size:11px;font-weight:700;color:var(--muted);background:var(--green-50);padding:3px 8px;border-radius:6px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.dark .rj-file-val{background:rgba(255,255,255,0.06)}
.rj-file-hint{grid-column:1 / -1;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);background:var(--green-50);border:1px dashed rgba(26,107,79,0.25);border-radius:14px;padding:14px 18px}
body.dark .rj-file-hint{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12)}
.rj-file-hint svg{color:var(--green-600);flex:none}

@media (max-width:760px){
  .rj-cards{grid-template-columns:1fr}
  .rj-offer-grid{grid-template-columns:1fr 1fr}
  .rj-mini-grid{grid-template-columns:1fr}
}

/* avatar change confirmation preview */
.avatar-confirm-preview{
  width:120px;height:120px;border-radius:50%;margin:0 auto;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  border:3px solid var(--green-50);box-shadow:0 6px 20px -8px rgba(16,24,40,0.35);
}
body.dark .avatar-confirm-preview{border-color:rgba(255,255,255,0.1)}

/* service centers settings list */
.centers-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.centers-chip{display:inline-flex;align-items:center;gap:8px;background:var(--green-50);border:1px solid rgba(26,107,79,0.18);border-radius:999px;padding:7px 8px 7px 14px;font-size:12.5px;font-weight:700;color:var(--green-800)}
body.dark .centers-chip{background:rgba(34,197,94,0.10);border-color:rgba(34,197,94,0.22);color:#9EF0CD}
.centers-del{width:22px;height:22px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(220,38,38,0.1);color:#DC2626;cursor:pointer;transition:background .15s}
.centers-del:hover{background:rgba(220,38,38,0.2)}
.centers-empty{font-size:13px;color:var(--muted)}

/* applicant document uploads inside the apply modal */
.jobs-apply-card{max-width:680px;width:calc(100% - 32px)}
.jobs-apply-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.jobs-apply-left{min-width:0}
.jobs-docs{margin-top:0;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--green-50)}
body.dark .jobs-docs{border-color:rgba(255,255,255,0.1);background:rgba(255,255,255,0.03)}
.jobs-docs-head{font-size:12.5px;font-weight:800;color:var(--ink);margin-bottom:11px}
.jobs-docs-grid{display:flex;flex-direction:column;gap:8px}
.jobs-doc{display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:11px;padding:10px 12px;cursor:pointer;transition:all .15s;background:#fff}
body.dark .jobs-doc{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.1)}
.jobs-doc:hover{border-color:var(--green-600);transform:translateY(-1px)}
.jobs-doc.busy{opacity:.6;pointer-events:none}
.jobs-doc-ic{width:30px;height:30px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--green-50);color:var(--green-700)}
body.dark .jobs-doc-ic{background:rgba(255,255,255,0.06);color:#5DE3B0}
.jobs-doc-name{flex:1;min-width:0;font-size:12.5px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jobs-doc-state{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.jobs-doc-check{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--green-600);color:#fff;box-shadow:0 2px 6px -1px rgba(15,76,58,0.5)}
.jobs-doc.done{border-color:rgba(26,107,79,0.45);background:#fff}
.jobs-doc.done .jobs-doc-state{color:var(--green-700)}
body.dark .jobs-doc.done{background:rgba(34,197,94,0.08)}
body.dark .jobs-doc.done .jobs-doc-state{color:#86EFAC}
@media (max-width:620px){ .jobs-apply-layout{grid-template-columns:1fr} }

/* my-files view link */
.rj-file-link{margin-inline-start:auto;font-size:12px;font-weight:700;color:var(--green-700);background:var(--green-50);padding:6px 12px;border-radius:8px;text-decoration:none;white-space:nowrap}
.rj-file-link:hover{background:var(--green-600);color:#fff}
body.dark .rj-file-link{background:rgba(34,197,94,0.12);color:#86EFAC}

/* my-files CTA button (go to profile) */
.rj-file-cta{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;font-size:13.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--green-700),var(--green-600));border:0;border-radius:14px;padding:15px 18px;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 8px 20px -10px rgba(15,76,58,0.5)}
.rj-file-cta:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(15,76,58,0.6)}
.rj-file-cta svg{flex:none}

/* offer modal — fixed (applicant-chosen) fields display */
.ap-offer-fixed{display:flex;gap:12px;flex-wrap:wrap;margin:4px 0 16px;padding:14px 16px;background:var(--green-50);border:1px solid rgba(26,107,79,0.18);border-radius:12px}
body.dark .ap-offer-fixed{background:rgba(34,197,94,0.08);border-color:rgba(34,197,94,0.2)}
.ap-fixed-item{display:flex;flex-direction:column;gap:4px;min-width:140px}
.ap-fixed-lbl{font-size:11.5px;font-weight:600;color:var(--muted)}
.ap-fixed-val{font-size:15px;font-weight:800;color:var(--green-800)}
body.dark .ap-fixed-val{color:#9EF0CD}

/* bigger confirm button in the apply modal */

/* multiple offer items */
.rj-offer-item.is-accepted{border-color:rgba(26,107,79,0.45);box-shadow:0 0 0 1px rgba(26,107,79,0.25)}
.rj-offer-item.is-rejected{opacity:.7}
.rj-offer-item.is-rejected .rj-card-title{text-decoration:line-through;text-decoration-color:rgba(220,38,38,0.4)}

/* apply-modal attachments: thumbnail preview + required markers */
.jobs-doc-thumb{flex:none;width:30px;height:30px;border-radius:7px;background-size:cover;background-position:center;background-repeat:no-repeat;border:2px solid var(--green-600);box-shadow:0 2px 6px -2px rgba(0,0,0,0.3)}
.jobs-doc-req{color:#DC2626;margin-inline-start:3px;font-weight:800}
.jobs-doc-missing{border-color:#DC2626 !important;animation:jobsDocShake .4s}
@keyframes jobsDocShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.jobs-field-error select,.jobs-field-error .nsel-trigger{border-color:#DC2626 !important}
/* the icon now sits at the end; thumbnail/check lead on the start side */
.jobs-doc .jobs-doc-ic{margin-inline-start:auto}
/* bigger confirm button */
#jobs-apply-confirm{font-size:15.5px;font-weight:800;padding:15px 36px;border-radius:13px;min-width:200px}

/* bigger CTA inside My Applications cards */
.rj-big-btn{font-size:15px;font-weight:800;padding:14px 32px;border-radius:12px;min-width:230px}

/* ===== Applicant detail panel (المتقدّمون والعروض) ===== */
.apd-head{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border,#E5E7EB)}
.apd-name{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:var(--ink,#1F2937)}
.apd-sub{margin-top:4px;font-size:13px;color:var(--muted,#6B7280);direction:ltr;text-align:start}
.apd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 18px;margin-bottom:14px}
.apd-cell{display:flex;flex-direction:column;gap:3px}
.apd-lbl{font-size:12px;color:var(--muted,#6B7280);font-weight:600}
.apd-val{font-size:14px;color:var(--ink,#1F2937);font-weight:600}
.apd-notes{margin-bottom:14px;padding:10px 12px;background:var(--green-50,#F0FAF6);border-radius:10px}
.apd-notes p{margin:4px 0 0;font-size:13px;color:var(--ink,#374151);line-height:1.6}
.apd-section{margin-top:14px}
.apd-docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:10px}
.apd-doc{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border:1px solid var(--border,#E5E7EB);border-radius:12px;overflow:hidden;background:var(--bg-soft,#F8FAF9);cursor:pointer;font-family:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.apd-doc:hover{border-color:var(--green-400,#5BC79E);box-shadow:0 6px 16px -8px rgba(15,76,58,0.25);transform:translateY(-1px)}
.apd-doc-img{display:block;width:100%;height:120px;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#EEF2F0}
.apd-doc-pdf{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:120px;background:var(--green-50,#F0FAF6);color:var(--green-700,#0F7A5C);font-size:12px;font-weight:700}
.apd-doc-cap{padding:9px 10px;font-size:12.5px;font-weight:700;color:var(--ink,#1F2937);text-align:center;border-top:1px solid var(--border)}
.apd-offers{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.apd-offer{padding:10px 12px;border:1px solid var(--border,#E5E7EB);border-radius:10px}
.apd-offer-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.apd-offer-role{font-size:14px;font-weight:700;color:var(--ink,#1F2937)}
.apd-offer-meta{margin-top:4px;font-size:12.5px;color:var(--muted,#6B7280);direction:ltr;text-align:start}
.apd-muted{font-size:13px;color:var(--muted,#9CA3AF)}
body.dark .apd-doc{border-color:rgba(255,255,255,0.12);background:rgba(255,255,255,0.02)}
body.dark .apd-doc-pdf{background:rgba(93,216,160,0.1);color:#5DD8A0}
body.dark .apd-doc-cap{color:#E5E7EB}
body.dark .apd-offer{border-color:rgba(255,255,255,0.10)}
body.dark .apd-notes{background:#1F3A2D}

/* ===== Sites Dashboard — zone detail panel (right rail) ===== */
.smap-detail{position:absolute;top:14px;inset-inline-end:14px;z-index:520;width:330px;max-width:calc(100% - 28px);max-height:calc(100% - 28px);overflow-y:auto;background:var(--card,#fff);border:1px solid var(--border,#E5E7EB);border-radius:16px;box-shadow:0 18px 50px -12px rgba(0,0,0,0.35);padding:18px 18px 16px}
.smap-detail[hidden]{display:none}
body.dark .smap-detail{background:#13241c;border-color:rgba(255,255,255,0.10)}
.smap-detail-close{position:absolute;top:12px;inset-inline-start:12px;width:32px;height:32px;border-radius:9px;border:none;background:var(--bg-soft,#F1F3F5);color:var(--muted,#6B7280);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.smap-detail-close:hover{background:var(--green-50,#F0FAF6);color:var(--green-700,#0F7A5C)}
body.dark .smap-detail-close{background:rgba(255,255,255,0.06);color:#cbd5e1}
.smap-d-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:14px;padding-inline-start:38px}
.smap-d-title{margin:0;font-size:17px;font-weight:800;color:var(--ink,#1F2937)}
body.dark .smap-d-title{color:#fff}
.smap-d-center{font-size:13px;font-weight:700;color:var(--muted,#6B7280);direction:ltr}
.smap-d-rows{display:flex;flex-direction:column;gap:1px;border-radius:12px;overflow:hidden;background:var(--bg-soft,#F4F6F8)}
body.dark .smap-d-rows{background:rgba(255,255,255,0.04)}
.smap-d-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px;background:var(--card,#fff)}
body.dark .smap-d-row{background:rgba(255,255,255,0.02)}
.smap-d-lbl{font-size:12.5px;color:var(--muted,#6B7280);font-weight:600}
.smap-d-val{font-size:13.5px;color:var(--ink,#1F2937);font-weight:700;text-align:end}
body.dark .smap-d-val{color:#fff}
.smap-d-notes{margin-top:12px;padding:11px 13px;border-radius:10px;background:var(--bg-soft,#F4F6F8);font-size:13px;line-height:1.6;color:var(--ink,#374151)}
body.dark .smap-d-notes{background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.85)}
.smap-d-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.smap-d-photo{position:relative;display:block;padding:0;border:1px solid var(--border,#E5E7EB);border-radius:12px;overflow:hidden;cursor:pointer;background:var(--bg-soft,#F4F6F8);transition:border-color .15s,transform .15s}
.smap-d-photo:hover{border-color:var(--green-400,#4FCF9B);transform:translateY(-2px)}
.smap-d-photo img{display:block;width:100%;height:96px;object-fit:cover}
.smap-d-photo-cap{display:block;padding:7px 9px;font-size:11.5px;font-weight:700;color:var(--muted,#6B7280);text-align:center}
body.dark .smap-d-photo{border-color:rgba(255,255,255,0.12);background:rgba(255,255,255,0.04)}
body.dark .smap-d-photo-cap{color:rgba(255,255,255,0.8)}
@media (max-width:560px){ .smap-d-photos{grid-template-columns:1fr} .smap-detail{width:auto;inset-inline:14px} }

/* zone modal image upload preview */
.smz-img-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.smz-img-prev{width:64px;height:64px;border-radius:10px;border:1px dashed var(--border,#D1D5DB);background:var(--bg-soft,#F8FAFB);flex:none;overflow:hidden;display:flex;align-items:center;justify-content:center}
.smz-img-prev.has-img{border-style:solid}
.smz-img-prev img{width:100%;height:100%;object-fit:cover}
body.dark .smz-img-prev{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12)}

/* image lightbox */
.smap-lightbox{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.88);display:flex;align-items:center;justify-content:center;padding:32px}
.smap-lightbox[hidden]{display:none}
.smap-lightbox img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,0.6)}
.smap-lightbox-close{position:absolute;top:18px;inset-inline-end:18px;width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,0.14);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.smap-lightbox-close:hover{background:rgba(255,255,255,0.28)}

/* ===== Centers Management page ===== */
.cm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px;margin-top:18px}
.cm-card{background:var(--card,#fff);border:1px solid var(--border,#E8ECEF);border-radius:16px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,0.04);transition:box-shadow .15s,transform .15s}
.cm-card:hover{box-shadow:0 10px 28px rgba(0,0,0,0.08);transform:translateY(-2px)}
body.dark .cm-card{background:var(--card);border-color:rgba(255,255,255,0.07)}
.cm-card-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:13px}
.cm-card-badge{flex:none;min-width:46px;height:46px;padding:0 10px;border-radius:12px;background:linear-gradient(135deg,var(--green-800),var(--green-600));color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;direction:ltr}
.cm-card-titles{flex:1;min-width:0}
.cm-card-name{margin:0;font-size:15px;font-weight:800;color:var(--ink,#1F2937);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-card-mgr{font-size:12.5px;color:var(--muted,#6B7280);font-weight:600}
.cm-card-edit{flex:none;width:32px;height:32px;border-radius:9px;border:1px solid var(--border,#E5E7EB);background:transparent;color:var(--muted,#6B7280);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.cm-card-edit:hover{background:var(--green-50,#F0FAF6);color:var(--green-700,#0F7A5C);border-color:var(--green-300,#86E0C0)}
body.dark .cm-card-edit{border-color:rgba(255,255,255,0.12)}
.cm-card-rows{display:flex;flex-direction:column;gap:1px;border-radius:10px;overflow:hidden;margin-bottom:12px}
.cm-card-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;background:var(--bg-soft,#F8FAFB)}
body.dark .cm-card-row{background:rgba(255,255,255,0.03)}
.cm-r-lbl{font-size:12px;color:var(--muted,#6B7280);font-weight:600}
.cm-r-val{font-size:13.5px;color:var(--ink,#1F2937);font-weight:700}
.cm-card-flags{display:flex;flex-wrap:wrap;gap:6px}
.cm-flag-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 4px;border-radius:999px;background:var(--green-50,#F0FAF6);font-size:12px;font-weight:700;color:var(--green-800,#0B5D46)}
.cm-flag-chip img{width:18px;height:13px;object-fit:cover;border-radius:2px}
body.dark .cm-flag-chip{background:rgba(93,216,160,0.12);color:#7DF0C4}
.cm-card-flags.cm-muted{font-size:12px;color:var(--muted,#9CA3AF);font-weight:600}
.cm-muted{color:var(--muted,#9CA3AF)}

/* nationality picker (in center modal) */
.cm-nat-picker{border:1px solid var(--border,#E5E7EB);border-radius:12px;padding:10px;background:var(--bg-soft,#F8FAFB)}
body.dark .cm-nat-picker{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.10)}
.cm-nat-search{display:flex;align-items:center;gap:7px;padding:7px 10px;background:var(--card,#fff);border:1px solid var(--border,#E5E7EB);border-radius:9px;color:var(--muted,#6B7280)}
.cm-nat-search input{border:none;background:transparent;outline:none;font-family:inherit;font-size:13px;width:100%;color:var(--ink,#1F2937)}
body.dark .cm-nat-search{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.10)}
body.dark .cm-nat-search input{color:#E5E7EB}
.cm-nat-selected{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.cm-nat-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 5px 4px 9px;border-radius:999px;background:var(--green-700,#0F7A5C);color:#fff;font-size:12.5px;font-weight:700}
.cm-nat-tag img{width:18px;height:13px;object-fit:cover;border-radius:2px}
.cm-nat-tag button{width:18px;height:18px;border:none;border-radius:50%;background:rgba(255,255,255,0.25);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.cm-nat-tag button:hover{background:rgba(255,255,255,0.45)}
.cm-nat-options{display:flex;flex-wrap:wrap;gap:6px;max-height:180px;overflow-y:auto}
.cm-nat-opt{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:9px;border:1px solid var(--border,#E5E7EB);background:var(--card,#fff);cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink,#374151);transition:all .12s}
.cm-nat-opt:hover{border-color:var(--green-400,#4FCF9B);background:var(--green-50,#F0FAF6)}
.cm-nat-opt img{width:18px;height:13px;object-fit:cover;border-radius:2px}
body.dark .cm-nat-opt{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.10);color:#D1D5DB}

/* zone modal nationality display (read-only, from selected center) */
.smz-nat-display{display:flex;flex-wrap:wrap;gap:6px;min-height:36px;align-items:center;padding:8px 10px;border:1px solid var(--border,#E5E7EB);border-radius:10px;background:var(--bg-soft,#F8FAFB)}
body.dark .smz-nat-display{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.10)}

/* zone detail panel — nationalities section */
.smap-d-natsec{margin-top:14px}
.smap-d-nats{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.smap-d-nat{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 5px;border-radius:999px;background:var(--green-50,#F0FAF6);font-size:12.5px;font-weight:700;color:var(--green-800,#0B5D46)}
body.dark .smap-d-nat{background:rgba(93,216,160,0.12);color:#7DF0C4}
.smap-d-nat img{width:18px;height:13px;object-fit:cover;border-radius:2px}

/* ===== Mashaaer Readiness — Command Center dashboard ===== */
/* overall summary panel (dark ops-room header) */
.mr-summary{margin-top:20px;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,var(--green-900) 0%,var(--green-800) 55%,var(--green-700) 100%);color:#fff;box-shadow:0 18px 44px -20px rgba(11,61,46,.6);position:relative}
.mr-summary::after{content:'';position:absolute;inset-inline-end:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,0.04);pointer-events:none}
.mr-sum-tiles{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:1px;background:rgba(255,255,255,0.08);position:relative;z-index:1}
.mr-sum-tile{display:flex;align-items:center;gap:14px;padding:18px 22px;background:rgba(0,0,0,0.12)}
.mr-sum-gaugetile{gap:16px}
.mr-sum-ico{width:44px;height:44px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.1)}
.mr-sum-ico svg{width:22px;height:22px}
.mr-sum-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.mr-sum-val{font-size:27px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.mr-sum-lbl{font-size:11.5px;font-weight:600;color:rgba(255,255,255,0.7)}
.mr-sum-gauge{position:relative;width:64px;height:64px;flex:none}
.mr-sum-gauge svg{width:64px;height:64px;transform:rotate(-90deg)}
.mr-gauge-bg{fill:none;stroke:rgba(255,255,255,0.14);stroke-width:3.2}
.mr-gauge-fg{fill:none;stroke-width:3.2;stroke-linecap:round;transition:stroke-dasharray .8s cubic-bezier(.4,0,.2,1)}
.mr-sum-gauge.ok .mr-gauge-fg{stroke:#34d399}.mr-sum-gauge.warn .mr-gauge-fg{stroke:#D4A017}.mr-sum-gauge.bad .mr-gauge-fg{stroke:#f87171}
.mr-gauge-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800}
.mr-gauge-num span{font-size:10px;margin-top:2px}

/* site cards — 3-up grid, banner image on top (reference design) */
.mr-dash{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.mr-dcard{border-radius:18px;border:1px solid var(--border,#E8ECEF);background:var(--card,#fff);cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s;position:relative;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 30px -18px rgba(16,24,40,0.22)}
.mr-dcard:hover{transform:translateY(-4px);box-shadow:0 22px 50px -22px rgba(16,24,40,0.34)}
.mr-dcard.ok:hover{border-color:#86E0C0}.mr-dcard.warn:hover{border-color:#F2C879}.mr-dcard.bad:hover{border-color:#F4A8A8}
body.dark .mr-dcard{background:var(--card);border-color:rgba(255,255,255,0.08)}
.mr-dcard.soon{cursor:default}.mr-dcard.soon:hover{transform:none;box-shadow:0 10px 30px -18px rgba(16,24,40,0.22)}
/* status accent bar on the leading edge (runs full height) */
.mr-dcard::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;z-index:4}
.mr-dcard.ok::before{background:linear-gradient(#16a34a,#22c55e)}
.mr-dcard.warn::before{background:linear-gradient(#d97706,#f59e0b)}
.mr-dcard.bad::before{background:linear-gradient(#dc2626,#ef4444)}
.mr-dcard.soon::before{background:#cbd5e1}
/* banner image — full width, ~200px tall, cover + dark overlay */
.mr-banner{height:200px;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative}
.mr-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.18) 0%,rgba(0,0,0,0.05) 45%,rgba(0,0,0,0.22) 100%)}
.mr-banner-ph{background:linear-gradient(135deg,#0B3D2E,#146B52);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.85)}
/* card body */
.mr-dcard-body{display:flex;flex-direction:column;align-items:center;gap:9px;padding:0 16px 14px;position:relative}
/* badge floats up overlapping the banner bottom edge */
.mr-badge-wrap{margin-top:-15px;z-index:3}
.mr-bigbadge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:800;box-shadow:0 6px 16px -4px rgba(0,0,0,0.3)}
.mr-bigbadge .mr-dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.mr-bigbadge.ok{background:#DCFCE7;color:#16a34a}
.mr-bigbadge.warn{background:#FEF3E2;color:#b45309}
.mr-bigbadge.bad{background:#FEE2E2;color:#dc2626}
.mr-bigbadge.soon{background:#F1F5F9;color:#64748B}
body.dark .mr-bigbadge.ok{background:rgba(34,197,94,.2);color:#4ade80}
body.dark .mr-bigbadge.warn{background:rgba(245,158,11,.2);color:#fbbf24}
body.dark .mr-bigbadge.bad{background:rgba(248,113,113,.2);color:#f87171}
body.dark .mr-bigbadge.soon{background:rgba(255,255,255,0.08);color:#94A3B8}
.mr-dcard-name{margin:0;font-size:27px;font-weight:800;color:var(--ink,#1F2937);letter-spacing:-.5px;line-height:1;text-align:center}
body.dark .mr-dcard-name{color:#fff}
.mr-dcard-count{font-size:13px;font-weight:700;color:var(--muted,#9AA4B2)}
/* donut (20% smaller: 96px) */
.mr-donut-wrap{display:flex;justify-content:center;padding:3px 0 1px}
.mr-donut{position:relative;width:96px;height:96px}
.mr-donut svg{width:96px;height:96px;transform:rotate(-90deg)}
.mr-donut-bg{fill:none;stroke:var(--bg-soft,#EEF2F4);stroke-width:3.4}
body.dark .mr-donut-bg{stroke:rgba(255,255,255,0.08)}
.mr-donut-fg{fill:none;stroke-width:3.4;stroke-linecap:round;transition:stroke-dasharray .8s cubic-bezier(.4,0,.2,1)}
.mr-donut.ok .mr-donut-fg{stroke:#16a34a}
.mr-donut.warn .mr-donut-fg{stroke:#D4A017}
.mr-donut.bad .mr-donut-fg{stroke:#dc2626}
.mr-donut-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:var(--ink,#1F2937);font-variant-numeric:tabular-nums}
body.dark .mr-donut-num{color:#fff}
.mr-donut.ok .mr-donut-num{color:#16a34a}.mr-donut.warn .mr-donut-num{color:#D4A017}.mr-donut.bad .mr-donut-num{color:#dc2626}
.mr-donut-num span{font-size:11px;font-weight:700;margin-top:5px;margin-inline-start:1px}
.mr-donut.soon .mr-donut-num{color:var(--muted,#9AA4B2);font-size:20px}
/* 3 stat boxes — bigger numbers */
.mr-ratio-row{display:flex;gap:9px;width:100%}
.mr-ratio{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 6px;border-radius:12px;background:var(--bg-soft,#F8FAFB);border:1px solid var(--border,#EEF1F5)}
body.dark .mr-ratio{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.06)}
.mr-ratio-num{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;color:var(--ink,#1F2937)}
body.dark .mr-ratio-num{color:#fff}
.mr-ratio.ok .mr-ratio-num{color:#16a34a}.mr-ratio.bad .mr-ratio-num{color:#dc2626}
.mr-ratio-lbl{font-size:11.5px;font-weight:600;color:var(--muted,#6B7280)}
/* footer */
.mr-dcard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding-top:11px;margin-top:2px;border-top:1px solid var(--border,#F1F4F6)}
body.dark .mr-dcard-foot{border-top-color:rgba(255,255,255,0.06)}
.mr-dupdated{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--muted,#9AA4B2);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mr-dcard-cta{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;color:var(--green-700,#0F7A5C);flex:none}
body.dark .mr-dcard-cta{color:#5DD8A0}
.mr-dcard:hover .mr-dcard-cta{gap:8px}
@media (max-width:760px){
  .mr-dash{grid-template-columns:1fr}
  .mr-sum-tiles{grid-template-columns:1fr 1fr}
}

/* ===== Mashaaer Readiness page ===== */

.mr-back{display:inline-flex;align-items:center;gap:6px;background:transparent;border:none;color:var(--green-700,#0F7A5C);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:6px 2px;margin:18px 0 6px}
.mr-back:hover{text-decoration:underline}
.mr-site-title{margin:4px 0 16px;font-size:20px;font-weight:800;color:var(--ink,#1F2937)}
.mr-soon{padding:40px;text-align:center;color:var(--muted,#9CA3AF);font-size:14px;font-weight:600}

/* readiness % ring */
.mr-ring,.mr-ov-ring{--p:0;position:relative;flex:none;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--ring-c,#16a34a) calc(var(--p)*1%), var(--ring-bg,#E5E7EB) 0)}
.mr-ring::before,.mr-ov-ring::before{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--card,#fff)}
.mr-ring span,.mr-ov-ring span{position:relative;font-size:13px;font-weight:800;color:var(--ink,#1F2937)}
body.dark .mr-ring::before,body.dark .mr-ov-ring::before{background:var(--card)}
.mr-ring.ok,.mr-ov-ring.ok{--ring-c:#16a34a}
.mr-ring.warn,.mr-ov-ring.warn{--ring-c:#D4A017}
.mr-ring.bad,.mr-ov-ring.bad{--ring-c:#dc2626}
body.dark .mr-ring,body.dark .mr-ov-ring{--ring-bg:rgba(255,255,255,0.12)}

.mr-card-top{display:flex;align-items:center;gap:13px;margin-bottom:13px}
.mr-card .cm-card-titles{flex:1;min-width:0}
.mr-badge{min-width:auto;height:auto;padding:2px 9px;font-size:12px;border-radius:8px;display:inline-flex;margin-bottom:5px}
.mr-card-form{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:7px 11px;border-radius:9px;border:1px solid var(--green-300,#86E0C0);color:var(--green-700,#0F7A5C);text-decoration:none;font-size:12.5px;font-weight:700;width:100%;justify-content:center}
.mr-card-form:hover{background:var(--green-50,#F0FAF6)}
body.dark .mr-card-form{border-color:rgba(93,216,160,0.3);color:#5DD8A0}

/* readiness form modal — large, clear layout */
/* the modal body for the readiness form must be a normal block (not the default flex column) */
#mr-form-body{display:block!important;gap:0!important}
.mr-form-sub{display:block;font-size:14px;color:var(--muted,#6B7280);font-weight:600;margin-top:3px;direction:ltr;text-align:start}
.mr-form-overall{display:flex;align-items:center;gap:18px;padding:18px 26px;border-bottom:1px solid var(--border,#E5E7EB);background:var(--bg-soft,#F8FAFB)}
body.dark .mr-form-overall{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.08)}
.mr-ov-txt{display:flex;flex-direction:column;gap:3px}
.mr-ov-txt b{font-size:16px;color:var(--ink,#1F2937)}
.mr-ov-txt span{font-size:13px;color:var(--muted,#6B7280)}
.mr-ov-ring{width:72px!important;height:72px!important}
.mr-ov-ring span{font-size:16px!important}
.mr-sec{display:block;margin-bottom:18px;border:1px solid var(--border,#E8ECEF);border-radius:14px;overflow:visible}
body.dark .mr-sec{border-color:rgba(255,255,255,0.08)}
.mr-sec-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--green-50,#F0FAF6);border-top-left-radius:14px;border-top-right-radius:14px}
body.dark .mr-sec-head{background:rgba(93,216,160,0.08)}
.mr-sec-name{font-size:16px;font-weight:800;color:var(--green-800,#0B5D46)}
body.dark .mr-sec-name{color:#7DF0C4}
.mr-sec-pct{font-size:16px;font-weight:800;color:var(--muted,#6B7280)}
.mr-sec-pct.ok{color:#16a34a}.mr-sec-pct.warn{color:#D4A017}.mr-sec-pct.bad{color:#dc2626}
.mr-sec-body{display:block;padding:4px 18px 8px}
.mr-q{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid var(--border,#F1F3F5)}
.mr-q:last-child{border-bottom:none}
body.dark .mr-q{border-color:rgba(255,255,255,0.05)}
.mr-q-head{display:flex;gap:11px;align-items:flex-start;flex:1 1 240px;min-width:240px}
.mr-q-n{flex:none;width:30px;height:30px;border-radius:9px;background:var(--bg-soft,#EEF2F4);color:var(--muted,#6B7280);font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center}
body.dark .mr-q-n{background:rgba(255,255,255,0.06)}
.mr-q-txt{font-size:15.5px;font-weight:600;color:var(--ink,#374151);line-height:1.6;padding-top:3px}
.mr-q-cam{font-size:14px}
.mr-ans-row{display:flex;gap:10px;flex:none}
.mr-ans{min-width:74px;padding:11px 18px;border-radius:11px;border:2px solid var(--border,#E5E7EB);background:var(--card,#fff);cursor:pointer;font-family:inherit;font-size:15px;font-weight:800;color:var(--muted,#6B7280);transition:all .12s}
.mr-ans:hover{border-color:var(--green-400,#4FCF9B);transform:translateY(-1px)}
.mr-ans.yes.on{background:#16a34a;border-color:#16a34a;color:#fff;box-shadow:0 6px 16px -6px rgba(22,163,74,.5)}
.mr-ans.no.on{background:#dc2626;border-color:#dc2626;color:#fff;box-shadow:0 6px 16px -6px rgba(220,38,38,.5)}
.mr-ans.na.on{background:#6B7280;border-color:#6B7280;color:#fff}
.mr-ans:disabled{opacity:.6;cursor:default}
body.dark .mr-ans{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.14)}
@media (max-width:560px){ .mr-q{gap:10px} .mr-ans-row{padding-inline-start:41px} .mr-ans{flex:1} }
.cm-site-tag{display:inline-block;padding:1px 7px;border-radius:6px;background:var(--green-100,#D6F5E8);color:var(--green-800,#0B5D46);font-size:11px;font-weight:700}
body.dark .cm-site-tag{background:rgba(93,216,160,0.14);color:#7DF0C4}

/* ===== Mashaaer Readiness — card tools, sketch, assign bar ===== */
.mr-card-actions{display:flex;align-items:center;gap:8px;margin-top:10px}
.mr-card-actions .mr-open-form{flex:1}
.mr-card-tool{flex:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--border,#E5E7EB);background:transparent;color:var(--green-700,#0F7A5C);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.mr-card-tool:hover{background:var(--green-50,#F0FAF6);border-color:var(--green-300,#86E0C0)}
body.dark .mr-card-tool{border-color:rgba(255,255,255,0.12);color:#5DD8A0}
.mr-sketch-thumb{display:block;width:100%;margin-top:10px;padding:0;border:1px solid var(--border,#E5E7EB);border-radius:11px;overflow:hidden;cursor:pointer;background:var(--bg-soft,#F8FAFB);transition:border-color .15s}
.mr-sketch-thumb:hover{border-color:var(--green-400,#4FCF9B)}
.mr-sketch-thumb img{display:block;width:100%;height:110px;object-fit:cover}
.mr-sketch-thumb span{display:block;padding:6px 9px;font-size:12px;font-weight:700;color:var(--muted,#6B7280);text-align:center}
body.dark .mr-sketch-thumb{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.10)}
.mr-assign{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;padding:14px 18px;border:1px solid var(--border,#E8ECEF);border-radius:14px;background:var(--card,#fff);box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.mr-assign-lbl{font-size:14px;font-weight:700;color:var(--ink,#1F2937)}
.mr-assign select{flex:1;min-width:220px;max-width:340px;padding:10px 13px;border-radius:10px;border:1px solid var(--border,#E5E7EB);background:var(--card,#fff);font-family:inherit;font-size:14px;color:var(--ink,#1F2937)}
.mr-assign #mr-assign-btn{padding:10px 22px;font-size:14px}
body.dark .mr-assign{background:var(--card);border-color:rgba(255,255,255,0.08)}
body.dark .mr-assign select{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.12);color:#E5E7EB}

/* hex text input next to the theme color picker */
.theme-hex-wrap{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--border,#E5E7EB);border-radius:9px;padding:4px 10px;background:var(--card,#fff)}
.theme-hex-wrap span{color:var(--muted,#9CA3AF);font-weight:700;font-size:13px}
.theme-hex-wrap input{border:none;outline:none;background:transparent;font-family:inherit;font-size:13px;font-weight:700;width:74px;letter-spacing:0.5px;color:var(--ink,#1F2937);text-transform:uppercase}
body.dark .theme-hex-wrap{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.12)}
body.dark .theme-hex-wrap input{color:#E5E7EB}

/* ===== Mashaaer Readiness — housing-ready-style form items ===== */
.mr-item{padding:14px 0;border-bottom:1px solid var(--border,#F1F3F5)}
.mr-item:last-child{border-bottom:none}
body.dark .mr-item{border-color:rgba(255,255,255,0.06)}
.mr-item-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mr-item-label{flex:1 1 260px;min-width:240px;display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:600;color:var(--ink,#374151);line-height:1.6}
.mr-item-opts{display:flex;gap:8px;flex:none}
.mr-opt{min-width:64px;padding:9px 15px;border-radius:10px;border:2px solid var(--border,#E5E7EB);background:var(--card,#fff);cursor:pointer;font-family:inherit;font-size:14px;font-weight:800;color:var(--muted,#6B7280);transition:all .12s}
.mr-opt:hover{border-color:var(--green-400,#4FCF9B)}
.mr-opt-yes.on{background:#16a34a;border-color:#16a34a;color:#fff}
.mr-opt-no.on{background:#dc2626;border-color:#dc2626;color:#fff}
.mr-opt-na.on{background:#6B7280;border-color:#6B7280;color:#fff}
.mr-opt:disabled{opacity:.6;cursor:default}
body.dark .mr-opt{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.14)}
.mr-item-bottom{display:flex;align-items:center;gap:10px;margin-top:11px;flex-wrap:wrap}
.mr-item-note{flex:1;min-width:180px;padding:9px 12px;border-radius:9px;border:1px solid var(--border,#E5E7EB);background:var(--card,#fff);font-family:inherit;font-size:13.5px;color:var(--ink,#374151)}
body.dark .mr-item-note{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);color:#E5E7EB}
.mr-item-photo-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:9px;border:1px dashed var(--green-400,#4FCF9B);background:transparent;color:var(--green-700,#0F7A5C);cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;white-space:nowrap}
.mr-item-photo-btn:hover{background:var(--green-50,#F0FAF6)}
.mr-item-photo-btn.has{border-style:solid}
body.dark .mr-item-photo-btn{color:#5DD8A0;border-color:rgba(93,216,160,0.35)}
.mr-item-photo-thumb{position:relative;margin-top:10px;width:120px;border-radius:10px;overflow:hidden;border:1px solid var(--border,#E5E7EB)}
.mr-item-photo-thumb[hidden]{display:none}
.mr-item-photo-img{display:block;width:100%;height:88px;object-fit:cover}
.mr-item-photo-remove{position:absolute;top:4px;inset-inline-end:4px;width:24px;height:24px;border-radius:50%;border:none;background:rgba(0,0,0,0.6);color:#fff;cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center}

/* site logo banner */
.mr-logo-banner{display:flex;align-items:center;gap:18px;margin:14px 0 18px;padding:18px;border-radius:16px;border:1px solid var(--border,#E8ECEF);background:var(--card,#fff);box-shadow:0 1px 2px rgba(0,0,0,0.04)}
body.dark .mr-logo-banner{background:var(--card);border-color:rgba(255,255,255,0.08)}
.mr-logo-box{flex:none;width:120px;height:120px;border-radius:16px;overflow:hidden;background:var(--green-50,#F0FAF6);display:flex;align-items:center;justify-content:center}
.mr-logo-box img{width:100%;height:100%;object-fit:contain}
.mr-logo-ph{font-size:22px;font-weight:800;color:var(--green-700,#0F7A5C);text-align:center;padding:8px}
body.dark .mr-logo-box{background:rgba(93,216,160,0.08)}
.mr-logo-meta{display:flex;flex-direction:column;gap:8px}
.mr-logo-meta .mr-site-title{margin:0}
.mr-logo-btn{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;padding:9px 15px;border-radius:10px;border:1px solid var(--border,#E5E7EB);background:transparent;color:var(--green-700,#0F7A5C);cursor:pointer;font-family:inherit;font-size:13px;font-weight:700}
.mr-logo-btn:hover{background:var(--green-50,#F0FAF6);border-color:var(--green-300,#86E0C0)}
body.dark .mr-logo-btn{color:#5DD8A0;border-color:rgba(255,255,255,0.12)}
@media (max-width:560px){ .mr-logo-box{width:84px;height:84px} .mr-item-opts{flex:1} .mr-opt{flex:1} }

/* ===== Transport Dashboard (لوحة معلومات النقل) — live tracking ===== */
#tr-map{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit}
.tr-live-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;background:rgba(22,163,74,0.12);color:#16a34a;font-size:13px;font-weight:800}
.tr-live-dot{width:9px;height:9px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,0.6);animation:trPulse 1.6s infinite}
@keyframes trPulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,0.55)}70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.tr-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:800}
.tr-chip-live{background:rgba(22,163,74,0.12);color:#16a34a}
body.dark .tr-chip-live{background:rgba(22,163,74,0.2);color:#4ade80}
.tr-li{display:block;width:100%;text-align:start;padding:13px 14px;margin-bottom:8px;border-radius:13px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s}
.tr-li:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.2)}
.tr-li-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.tr-li-name{font-size:14.5px;font-weight:800;color:#fff}
.tr-li-sub{font-size:12.5px;color:rgba(255,255,255,0.7);direction:ltr;text-align:start}
.tr-li-meta{margin-top:3px;font-size:12px;color:rgba(255,255,255,0.5);direction:ltr;text-align:start}
.tr-maplink{display:block;margin-top:12px;padding:10px;border-radius:10px;background:var(--green-700,#0F7A5C);color:#fff;text-align:center;text-decoration:none;font-size:13px;font-weight:700}
.tr-maplink:hover{background:var(--green-800,#0B5D46)}
/* live bus marker */
.tr-marker{background:none;border:none}
.tr-marker-pin{width:34px;height:34px;border-radius:50%;background:var(--green-700,#0F7A5C);border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;position:relative}
.tr-marker-pin::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(22,163,74,0.5);animation:trPulse 1.8s infinite}
/* transport detail close button uses the same .smap-detail-close styling */
.tr-li-kind{display:inline-block;padding:1px 7px;border-radius:6px;background:rgba(255,255,255,0.12);font-size:10.5px;font-weight:700}

/* ===== Flights: dedicated trip column + location pin chip ===== */
.col-trip{white-space:nowrap}
.fl-trip-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:9px;border:none;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:800;white-space:nowrap;transition:filter .15s,transform .1s}
.fl-trip-pill:active{transform:scale(.97)}
.fl-trip-pill.start{background:var(--green-700,#0F7A5C);color:#fff}
.fl-trip-pill.start:hover{filter:brightness(1.08)}
.fl-trip-pill.ended{background:#FEE2E2;color:#B91C1C}
.fl-trip-pill.ended:hover{filter:brightness(.97)}
body.dark .fl-trip-pill.ended{background:rgba(220,38,38,0.18);color:#fca5a5}
.fl-trip-dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.fl-trip-dot.live{background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.6);animation:trPulse 1.5s infinite}
.fl-loc-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;border:1px solid var(--border,#E5E7EB);background:var(--card,#fff);color:var(--green-700,#0F7A5C);text-decoration:none;font-size:12px;font-weight:700;max-width:130px}
.fl-loc-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-loc-chip:hover{background:var(--green-50,#F0FAF6);border-color:var(--green-300,#86E0C0)}
.fl-loc-chip.static{cursor:default}
.fl-loc-chip svg{flex:none;color:#16a34a}
body.dark .fl-loc-chip{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);color:#5DD8A0}
.fl-dash{color:var(--muted,#9CA3AF)}

/* Transport toolbar text must be light on the dark-green toolbar */
#page-transport .smap-toolbar .flights-title{color:#fff;font-size:16px;margin:0}
#page-transport .smap-toolbar .flights-subtitle{color:rgba(255,255,255,0.78);margin:2px 0 0}
#page-transport .smap-toolbar-title{flex-direction:column;align-items:flex-start;gap:2px}
#page-transport .smap-toolbar-actions{display:flex;align-items:center;gap:10px}
#page-transport .tr-live-badge{background:rgba(255,255,255,0.16);color:#fff}
#page-transport .tr-live-badge .tr-live-dot{background:#7CFFC4}

/* ===== Settings: Mashaaer logo slots ===== */
.ml-logos{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}
.ml-logo-slot{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border,#E5E7EB);border-radius:12px;background:var(--bg-soft,#F8FAFB);min-width:220px;flex:1}
body.dark .ml-logo-slot{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.1)}
.ml-logo-prev{flex:none;width:56px;height:56px;border-radius:12px;overflow:hidden;background:var(--green-50,#F0FAF6);display:flex;align-items:center;justify-content:center}
.ml-logo-prev img{width:100%;height:100%;object-fit:contain}
.ml-logo-ph{font-size:12px;font-weight:700;color:var(--green-700,#0F7A5C);text-align:center;padding:4px}
body.dark .ml-logo-prev{background:rgba(93,216,160,0.08)}
.ml-logo-info{display:flex;flex-direction:column;gap:6px}
.ml-logo-name{font-size:14px;font-weight:800;color:var(--ink,#1F2937)}
.ml-logo-btns{display:flex;gap:8px;align-items:center}
.ml-rm{background:transparent;border:none;color:#dc2626;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:4px 6px}
.ml-rm:hover{text-decoration:underline}
/* site picker card with a custom logo */
.mr-site-ico.has-logo{width:120px;height:120px;border-radius:20px;background:#fff;padding:10px;box-shadow:0 2px 10px rgba(0,0,0,0.06)}
body.dark .mr-site-ico.has-logo{background:#fff}
.mr-site-ico.has-logo img{width:100%;height:100%;object-fit:contain}

/* Profile page title — smaller heading */
#page-profile .settings-title h1{font-size:24px;line-height:1.2}
#page-profile .settings-title p{font-size:13.5px}
@media (max-width:560px){ #page-profile .settings-title h1{font-size:20px} }

/* flag images inside searchable selects (nationality, etc.) */
.nsel-flag{width:20px;height:14px;object-fit:cover;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,0.08)}
.nsel-value{display:inline-flex;align-items:center;gap:8px;min-width:0}
.nsel-value span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nsel-opt{display:flex;align-items:center;gap:9px}
.nsel-opt .nsel-flag{margin:0}
.tr-arrow{color:var(--green-400,#4FCF9B);font-weight:800;margin:0 2px}

/* location pin (icon-only, red) in flights table */
.fl-loc-pin{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--border,#E5E7EB);background:var(--card,#fff);color:#dc2626;text-decoration:none;transition:all .15s}
.fl-loc-pin:hover{background:#FEF2F2;border-color:#FCA5A5}
.fl-loc-pin.static{cursor:default}
body.dark .fl-loc-pin{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);color:#f87171}



/* contract modal — company auto-sign note */
.ctrm-auto-note{margin:8px 0 0;font-size:12px;font-weight:600;color:var(--green-700,#0F7A5C);line-height:1.5}
body.dark .ctrm-auto-note{color:#5DD8A0}

/* ============================================================
   JOB PERMISSIONS — settings UI (owner) + employee scoping
   ============================================================ */
/* Permissions tab is owner-only */
body:not(.is-admin) .owner-only-tab{ display:none !important; }

/* ----- settings: permissions panel ----- */
.perm-wrap{display:flex;flex-direction:column;gap:16px}
.perm-rolebar{display:flex;flex-direction:column;gap:7px}
.perm-rolebar-lbl{font-size:13px;font-weight:700;color:var(--ink,#1F2937)}
body.dark .perm-rolebar-lbl{color:#E5E9EE}
.perm-editrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid var(--border,#E8ECEF);border-radius:13px;background:var(--bg-soft,#F8FAFB)}
body.dark .perm-editrow{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.07)}
.perm-editrow-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.perm-editrow-title{font-size:14px;font-weight:800;color:var(--ink,#1F2937)}
body.dark .perm-editrow-title{color:#fff}
.perm-editrow-sub{font-size:12px;font-weight:500;color:var(--muted,#6B7280);line-height:1.5}
/* toggle switch */
.perm-switch{position:relative;display:inline-flex;flex:none;width:46px;height:26px;cursor:pointer}
.perm-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.perm-switch-box{position:absolute;inset:0;border-radius:999px;background:#CBD5E1;transition:background .18s}
.perm-switch-box::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,0.25)}
.perm-switch input:checked + .perm-switch-box{background:var(--green-600,#16a34a)}
.perm-switch input:checked + .perm-switch-box::after{transform:translateX(20px)}
[dir="rtl"] .perm-switch input:checked + .perm-switch-box::after{transform:translateX(-20px)}
.perm-sections-head{font-size:13px;font-weight:800;color:var(--ink,#1F2937);margin-top:2px}
body.dark .perm-sections-head{color:#E5E9EE}
.perm-sections{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
@media (max-width:620px){ .perm-sections{grid-template-columns:1fr} }
.perm-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:4px}
@media (max-width:620px){ .perm-fields{grid-template-columns:1fr 1fr} }
.perm-chip{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--border,#E8ECEF);border-radius:11px;cursor:pointer;transition:border-color .15s,background .15s;user-select:none}
.perm-chip:hover{border-color:#86E0C0}
.perm-chip.on{border-color:var(--green-600,#16a34a);background:rgba(22,163,74,0.06)}
body.dark .perm-chip{border-color:rgba(255,255,255,0.08)}
body.dark .perm-chip.on{background:rgba(34,197,94,0.1)}
.perm-chip input{position:absolute;opacity:0;width:0;height:0}
.perm-chip-box{width:20px;height:20px;flex:none;border-radius:6px;border:2px solid #CBD5E1;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .15s}
.perm-chip.on .perm-chip-box{background:var(--green-600,#16a34a);border-color:var(--green-600,#16a34a)}
.perm-chip-box svg{opacity:0;transition:opacity .15s}
.perm-chip.on .perm-chip-box svg{opacity:1}
.perm-chip-lbl{font-size:13.5px;font-weight:600;color:var(--ink,#1F2937)}
body.dark .perm-chip-lbl{color:#E5E9EE}
.perm-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
.perm-actions .perm-save{margin-inline-start:auto}
.btn-sm,.perm-selectall,.perm-clearall{font-size:13px;padding:8px 14px}
.perm-saved-note{margin:6px 0 0;font-size:12.5px;font-weight:700;color:var(--green-700,#0F7A5C)}
body.dark .perm-saved-note{color:#5DD8A0}

/* ----- employee scope: reveal only granted sidebar sections ----- */
/* a hired employee is role-user + perm-scoped; granted groups get .perm-grant.
   The same applies in preview-job mode (admin previewing a specific job). */
/* a hired employee is role-user + perm-scoped; granted groups get .perm-grant.
   The same applies in preview-job mode (admin previewing a specific job).
   Groups are block-level (head stacks above subitems); only the standalone
   nav-item / nav-subitem are flex. Forcing flex on a group breaks its layout. */
body.role-user.perm-scoped #epath-group.perm-grant,
body.role-user.perm-scoped #trips-group.perm-grant,
body.role-user.perm-scoped #housing-group.perm-grant,
body.role-user.perm-scoped #mashaer-group.perm-grant,
body.role-user.perm-scoped #transport-group.perm-grant,
body.role-user.perm-scoped #passports-group.perm-grant,
body.role-user.perm-scoped #finance-group.perm-grant,
body.role-user.perm-scoped #hr-group.perm-grant,
body.preview-job #epath-group.perm-grant,
body.preview-job #trips-group.perm-grant,
body.preview-job #housing-group.perm-grant,
body.preview-job #mashaer-group.perm-grant,
body.preview-job #transport-group.perm-grant,
body.preview-job #passports-group.perm-grant,
body.preview-job #finance-group.perm-grant,
body.preview-job #hr-group.perm-grant{ display:block !important; }

body.role-user.perm-scoped #sitemap-nav.perm-grant,
body.role-user.perm-scoped #indicators-nav.perm-grant,
body.preview-job #sitemap-nav.perm-grant,
body.preview-job #indicators-nav.perm-grant{ display:flex !important; }

/* ----- view-only mode: hide add / edit / delete affordances ----- */
body.perm-readonly .fl-row-btn.danger,
body.perm-readonly .fl-row-btn.warn,
body.perm-readonly .cm-add-btn,
body.perm-readonly #hd-add-btn,
body.perm-readonly #hr-add-btn,
body.perm-readonly .hd-row-edit,
body.perm-readonly .hd-row-del,
body.perm-readonly .mr-card-tool,
body.perm-readonly .be-img-btn,
body.perm-readonly [data-act="del"],
body.perm-readonly [data-act="edit"],
body.perm-readonly .add-btn-primary{ display:none !important; }

/* "open application" job card — distinct featured look */
.job-card--general{border:1.5px dashed var(--green-400,#4ECDA0);background:linear-gradient(180deg,rgba(22,163,74,0.04),transparent)}
body.dark .job-card--general{border-color:rgba(93,216,160,0.4);background:linear-gradient(180deg,rgba(34,197,94,0.08),transparent)}
.job-card--general .job-card-ic{background:var(--green-600,#16a34a);color:#fff}

/* dedicated "accept application" button in the offer modal */
.btn-accept{display:inline-flex;align-items:center;justify-content:center;gap:2px;padding:10px 18px;border-radius:10px;border:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;background:#16A34A;color:#fff;transition:background .15s,transform .1s}
.btn-accept:hover{background:#138a3e}
.btn-accept:active{transform:translateY(1px)}
.btn-accept:disabled{opacity:.6;cursor:default}
body.dark .btn-accept{background:#16A34A;color:#fff}

/* cancel-application button in طلباتي (only shown before acceptance) */
.btn-cancel-app{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 20px;border-radius:10px;border:1.5px solid #FCA5A5;background:#FEF2F2;color:#DC2626;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;transition:background .15s,border-color .15s}
.btn-cancel-app:hover{background:#FEE2E2;border-color:#F87171}
body.dark .btn-cancel-app{background:rgba(220,38,38,0.12);border-color:rgba(248,113,113,0.4);color:#fca5a5}
body.dark .btn-cancel-app:hover{background:rgba(220,38,38,0.2)}

/* ===== Map dashboard fullscreen (sitemap + transport) ===== */
.smap-fs-btn{margin-inline-start:6px}
.smap-shell.smap-fullscreen{
  position:fixed; inset:0; z-index:100000; width:100vw; height:100vh;
  margin:0; border:0; border-radius:0; background:var(--bg,#0B141A);
  padding:0; gap:0;
}
.smap-shell.smap-fullscreen .smap-map-col{height:100%}
.smap-shell.smap-fullscreen .smap-map-wrap{height:100%; min-height:0}
.smap-shell.smap-fullscreen #smap-map,
.smap-shell.smap-fullscreen #tr-map{height:100% !important}
.smap-shell.smap-fullscreen .smap-rail{max-height:100%; overflow-y:auto}
/* native :fullscreen safety (Esc / F11 paths) */
.smap-shell:fullscreen{width:100vw;height:100vh;padding:0;background:var(--bg,#0B141A)}
.smap-shell:-webkit-full-screen{width:100vw;height:100vh;padding:0;background:var(--bg,#0B141A)}

/* offer fields dictated by job settings (read-only / disabled) */
.locked-field{background:var(--bg-soft,#F1F5F9) !important;cursor:not-allowed;opacity:.85}
.locked-field:disabled{color:#94A3B8}
body.dark .locked-field{background:rgba(255,255,255,0.04) !important}

/* Section headings inside the settings grid (group cards into labeled sections) */
.settings-section-head{
  grid-column:1 / -1;
  display:flex;align-items:center;gap:10px;
  margin:6px 0 2px;font-size:13px;font-weight:800;letter-spacing:.2px;
  color:var(--green-800);text-transform:none;
}
.settings-section-head::before{content:"";width:4px;height:16px;border-radius:3px;background:var(--green-700);flex:none}
.settings-section-head::after{content:"";flex:1;height:1px;background:var(--border)}
.settings-section-head:first-child{margin-top:0}
body.dark .settings-section-head{color:#5DD8A0}
body.dark .settings-section-head::after{background:rgba(255,255,255,0.08)}

/* ============================================================
   SETTINGS — Enterprise rebuild (.set-* big grouped cards)
   ============================================================ */
.settings-tab-panel[data-tab-panel="general"]{display:flex;flex-direction:column;gap:18px}
.set-card{
  background:var(--card,#fff);border:1px solid #E8ECEA;border-radius:18px;
  padding:22px 24px;box-shadow:0 1px 2px rgba(16,24,40,0.04);
}
body.dark .set-card{background:var(--card);border-color:var(--border)}
.set-card-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.set-card-ic{
  flex:none;width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--green-800),var(--green-700));color:#fff;
}
.set-card-ic svg{width:22px;height:22px}
.set-card-htext h3{margin:0 0 3px;font-size:16.5px;font-weight:800;color:var(--ink);letter-spacing:.2px}
.set-card-htext p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
body.dark .set-card-htext p{color:#9CA3AF}

/* media tiles grid (logos + images) */
.set-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:14px}
.set-media{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--bg-soft,#F8FAF9);display:flex;flex-direction:column;transition:border-color .18s,box-shadow .18s}
.set-media:hover{border-color:#C7DED1;box-shadow:0 6px 16px -8px rgba(15,76,58,0.18)}
body.dark .set-media{background:rgba(255,255,255,0.02);border-color:var(--border)}
.set-media .sc-thumb,
.set-media .sc-thumb.modal-thumb,
.set-media .sc-thumb.modal-thumb--logo,
.set-media .sc-thumb.modal-thumb--compact-logo,
.set-media .sc-thumb.modal-thumb--watermark{
  width:100% !important;max-width:none !important;height:150px !important;
  border-radius:0;border:0;border-bottom:1px solid var(--border);
  background-size:cover;background-position:center;
}
/* logos keep their full artwork visible (contained) but the tile is full-width */
.set-media .sc-thumb.modal-thumb--logo,
.set-media .sc-thumb.modal-thumb--compact-logo{background-size:contain;background-repeat:no-repeat}
.set-media-b{padding:11px 13px;display:flex;flex-direction:column;gap:9px;flex:1}
.set-media-t{font-size:13px;font-weight:700;color:var(--ink)}
.set-media-act{display:flex;gap:7px;margin-top:auto}
.set-media-act .btn-sm{padding:6px 12px;font-size:12px}

.set-divider{height:1px;background:var(--border);margin:20px 0}

/* primary color row */
.set-color-row{display:flex;flex-direction:column;align-items:stretch;gap:16px}
.set-color-left{display:flex;align-items:center;gap:14px}
.set-color-swatch{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--bg-soft,#F1F5F4);border:1px solid var(--border);flex:none}
.set-color-swatch #theme-color-dot,.set-color-swatch #cover-color-dot{width:34px;height:34px;border-radius:50%;display:block;box-shadow:0 0 0 3px rgba(255,255,255,.6),0 2px 8px rgba(0,0,0,.2)}
.set-color-left .set-media-t{display:block}
.set-color-sub{display:block;font-size:12px;color:var(--muted);margin-top:2px}
body.dark .set-color-sub{color:#9CA3AF}
.set-color-right{display:flex;flex-direction:column;gap:14px;align-items:stretch;width:100%}
.set-color-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* generic setting rows (system + reports cards) */
.set-rows{display:flex;flex-direction:column;gap:4px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px dashed var(--border)}
.set-row:last-child{border-bottom:0}
.set-row-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.set-row-ctl{display:flex;align-items:center;gap:9px;flex:none}
.set-row-ctl--wide{flex:1;justify-content:flex-end;max-width:560px;flex-wrap:wrap}
.set-input{height:38px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:var(--card,#fff);color:var(--ink);font-family:inherit;font-size:13.5px;min-width:0}
.set-row-ctl--wide .set-input{flex:1;min-width:200px}
.set-input:focus{outline:none;border-color:var(--green-600);box-shadow:0 0 0 3px rgba(var(--accent-rgb,15,76,58),0.12)}
body.dark .set-input{background:rgba(255,255,255,0.03);border-color:var(--border)}

/* segmented toggle (lang / xlsx dir) */
.set-segmented{display:inline-flex;background:var(--bg-soft,#F1F4F2);border:1px solid var(--border);border-radius:11px;padding:3px;gap:3px}
body.dark .set-segmented{background:#1E2A36}
.set-segmented button{border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;color:#5C6770;padding:7px 16px;border-radius:8px;transition:background .15s,color .15s}
.set-segmented button.active{background:var(--card,#fff);color:var(--green-800);box-shadow:0 1px 3px rgba(0,0,0,0.08)}
body.dark .set-segmented button{color:#9CA3AF}
body.dark .set-segmented button.active{background:var(--card);color:#5DD8A0}

/* mashaaer — horizontal row of 3 sites */
.set-mashaer{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:760px){.set-mashaer{grid-template-columns:1fr}}

/* ===== Inline color picker (settings → primary color) ===== */
.cpick{display:flex;gap:18px;align-items:stretch;flex-wrap:wrap;padding:4px 0}
.cpick-sl{position:relative;width:260px;height:168px;border-radius:14px;overflow:hidden;cursor:crosshair;border:1px solid var(--border);background:hsl(160,100%,50%);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.04)}
.cpick-sl-white{position:absolute;inset:0;background:linear-gradient(to right,#fff,rgba(255,255,255,0))}
.cpick-sl-black{position:absolute;inset:0;background:linear-gradient(to top,#000,rgba(0,0,0,0))}
.cpick-knob{position:absolute;width:18px;height:18px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.45);transform:translate(-50%,-50%);pointer-events:none;top:0;left:100%}
.cpick-side{display:flex;flex-direction:column;gap:16px;justify-content:center;min-width:190px;flex:1}
.cpick-hue{-webkit-appearance:none;appearance:none;width:100%;height:16px;border-radius:10px;outline:none;cursor:pointer;
  background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)}
.cpick-hue::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.4);cursor:pointer}
.cpick-hue::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.3);cursor:pointer}
.cpick-readout{display:flex;align-items:center;gap:12px}
.cpick-preview{width:46px;height:46px;border-radius:12px;border:1px solid var(--border);flex:none;box-shadow:inset 0 0 0 3px #fff,0 1px 4px rgba(0,0,0,.12)}
.cpick-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px dashed var(--border)}
body.dark .cpick-sl,body.dark .cpick-preview{border-color:rgba(255,255,255,0.15)}
/* the hex field inside the picker — make it prominent */
.cpick-readout .theme-hex-wrap{flex:1;height:42px;font-size:15px;font-weight:700;letter-spacing:.5px}
.cpick-readout .theme-hex-wrap input{font-size:15px;font-weight:700}

/* ===== Mashaaer site cards (settings) — big image on top, vertical ===== */
.set-mashaer .ml-logo-slot{
  flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;
  min-width:0;border-radius:14px;
}
.set-mashaer .ml-logo-prev{
  width:100%;height:150px;border-radius:0;border-bottom:1px solid var(--border);
  background:var(--green-50,#F0FAF6);
}
.set-mashaer .ml-logo-prev img{width:100%;height:100%;object-fit:cover}
.set-mashaer .ml-logo-info{padding:13px 15px;flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
.set-mashaer .ml-logo-name{font-size:15px;font-weight:800}
.set-mashaer .ml-logo-btns{gap:7px}
.set-mashaer .ml-logo-btns .btn-sm{padding:6px 13px;font-size:12px}
.set-mashaer .ml-rm{background:none;border:0;color:#DC2626;font-weight:700;font-size:12.5px;cursor:pointer;font-family:inherit;padding:6px 6px}
.set-mashaer .ml-rm:hover{text-decoration:underline}

/* Side-backdrop opacity control — contained so it doesn't overlap siblings */
.set-bg-opacity{display:flex;align-items:center;gap:12px;flex:none;min-width:240px;max-width:340px}
.set-bg-opacity .sc-slider{flex:1;min-width:120px}
.set-bg-opacity .sc-slider-label{font-size:13px;color:var(--muted);white-space:nowrap;flex:none}
.set-bg-opacity .sc-slider-val{font-size:13px;font-weight:700;color:var(--green-700);min-width:42px;text-align:end;flex:none}
@media (max-width:680px){.set-bg-opacity{min-width:100%;max-width:100%;margin-top:10px}}

/* permission save status note */
.perm-note-error{color:#B91C1C !important;background:#FEF2F2;border:1px solid #FCA5A5;border-radius:10px;padding:10px 12px;white-space:pre-line;font-weight:600;font-size:13px}
.perm-note-ok{color:#15803D !important;background:#F0FDF4;border:1px solid #86EFAC;border-radius:10px;padding:10px 12px;font-weight:600;font-size:13px}
body.dark .perm-note-error{background:rgba(220,38,38,0.12);border-color:rgba(248,113,113,0.4);color:#fca5a5 !important}
body.dark .perm-note-ok{background:rgba(34,197,94,0.12);border-color:rgba(134,239,172,0.4);color:#86efac !important}

/* locked/disabled enhanced date field in the offer modal */
.dt-field.dt-disabled{opacity:.7;cursor:not-allowed}
.dt-field.dt-disabled .dt-text,.dt-field.dt-disabled .dt-icon-btn{pointer-events:none;background:var(--bg-soft,#F1F5F9);color:#94A3B8}
body.dark .dt-field.dt-disabled .dt-text,body.dark .dt-field.dt-disabled .dt-icon-btn{background:rgba(255,255,255,0.04);color:#64748B}

/* view button on an attached application document */
.jobs-doc-view{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--green-50,#F0FAF6);color:var(--green-700);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s}
.jobs-doc-view:hover{background:var(--green-100,#DCFCE7);border-color:var(--green-600)}
body.dark .jobs-doc-view{background:rgba(93,216,160,0.1);border-color:rgba(255,255,255,0.12);color:#5DD8A0}

/* ============================================================
   RESPONSIVE — full mobile & tablet support (desktop untouched)
   Breakpoints: tablet ≤1024px · mobile ≤900px · phone ≤600px ≤420px
   ============================================================ */

/* hamburger + backdrop are desktop-hidden; shown only on mobile below */
.mobile-nav-toggle{display:none}
.mobile-nav-backdrop{display:none}

/* ---------- Tablet (≤1024px) ---------- */
@media (max-width:1024px){
  .app{grid-template-columns:200px 1fr}
  body.sidebar-collapsed .app{grid-template-columns:72px 1fr}
  .main{padding:16px 18px}
  /* reduce dense multi-column grids by one step */
  .hr-sections-grid{grid-template-columns:repeat(2,1fr)}
  .profile3-stats{grid-template-columns:repeat(2,1fr)}
  .kpis.kpis-6{grid-template-columns:repeat(3,1fr)}
}

/* ---------- Mobile (≤900px): off-canvas sidebar drawer ---------- */
@media (max-width:900px){
  /* clip the off-screen drawer so it can't be revealed by horizontal scroll */
  html,body{overflow-x:hidden;max-width:100%}
  /* single-column shell; content scrolls with the page */
  .app{grid-template-columns:1fr;height:auto;min-height:100vh;overflow:visible;overflow-x:hidden;width:100%;max-width:100%}
  body.sidebar-collapsed .app{grid-template-columns:1fr}
  .main{height:auto;min-height:100vh;overflow:visible;overflow-x:hidden;width:100%;max-width:100%;padding:14px 14px 28px;padding-top:64px}

  /* Off-canvas drawer. Physical positioning (not logical) so the hide transform
     is unambiguous in both RTL and LTR. Default document dir is RTL → drawer on
     the right, hidden by sliding fully to the right. */
  .sidebar{
    position:fixed;top:0;bottom:0;right:0;left:auto;
    width:280px;max-width:86vw;height:100vh;height:100dvh;z-index:1200;
    border-radius:0;flex-direction:column;flex-wrap:nowrap;gap:8px;
    padding:14px 16px 20px;
    transform:translateX(110%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:-12px 0 40px -12px rgba(0,0,0,.45);
    will-change:transform;
  }
  /* the middle area scrolls; allow momentum + keep scroll inside the drawer, and
     leave bottom room so the last items clear the iOS toolbar / home indicator */
  .sidebar-scroll{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:24px}
  /* LTR: drawer on the left, hidden by sliding fully to the left */
  html[dir="ltr"] .sidebar{right:auto;left:0;transform:translateX(-110%);box-shadow:12px 0 40px -12px rgba(0,0,0,.45)}
  /* open state (wins via higher specificity for both directions) */
  body.nav-open .sidebar{transform:translateX(0)}
  /* keep the collapse-to-icons button out of mobile (drawer is full width) */
  body.sidebar-collapsed .sidebar{width:280px;max-width:86vw;padding:14px 16px 20px}
  .sidebar-collapse-btn{display:none}

  /* hamburger button — fixed top corner; hidden while the drawer is open */
  .mobile-nav-toggle{
    display:flex;align-items:center;justify-content:center;
    position:fixed;top:12px;inset-inline-end:12px;z-index:1100;
    width:44px;height:44px;border-radius:12px;cursor:pointer;
    background:var(--green-800,#0F4C3A);color:#fff;border:0;
    box-shadow:0 6px 18px -6px rgba(0,0,0,.35)}
  .mobile-nav-toggle:active{transform:scale(.96)}
  body.nav-open .mobile-nav-toggle{opacity:0;pointer-events:none}

  /* backdrop */
  .mobile-nav-backdrop{position:fixed;inset:0;z-index:1150;background:rgba(0,0,0,.45);backdrop-filter:blur(1px);border:0}
  body.nav-open .mobile-nav-backdrop{display:block}

  /* content density */
  .hero{min-height:200px;padding:20px}
  .hero h1{font-size:24px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .hr-sections-grid{grid-template-columns:repeat(2,1fr)}

  /* generic: turn common row layouts into stacked columns on mobile */
  .set-row,.perm-editrow,.ctr-row,.frow,.fl-row,
  .profile-form-row,.section-head,.settings-section-head,
  .profile3-card-head,.ctr-head,.flights-col-row,.ph-group-row,
  .hr-nr-row,.smap-toolbar-actions,.chart-stats{
    flex-direction:column;align-items:stretch;gap:10px}
  /* keep small inline button rows horizontal */
  .profile-actions,.doc-footer{grid-template-columns:1fr;gap:14px}

  /* multi-column grids → single column */
  .profile-form,.hr-two-col,.jobs-apply-layout,.be-lang-grid,
  .rj-mini-grid,.perm-fields,.set-mashaer,.profile3-stats,.smap-d-photos{
    grid-template-columns:1fr !important}

  /* modals: near full-width, comfortable height */
  .flight-modal,.user-modal,.set-modal,.settings-modal{
    width:94vw !important;max-width:94vw !important;max-height:92vh !important}

  /* tables already scroll horizontally — make them feel native on touch */
  .flights-table-scroll{-webkit-overflow-scrolling:touch}
  .flights-table-scroll table{min-width:640px}

  /* fullscreen map: rail stacks under map */
  .smap-shell.smap-fullscreen{flex-direction:column}

  /* decorative top nav links are replaced by the drawer on mobile */
  .topnav{display:none}
  .topbar-right{display:none}
  /* profile + controls: right-aligned (RTL), wrap cleanly, no crowding */
  .topbar{justify-content:flex-start;gap:8px;flex-wrap:wrap;padding:6px 2px 4px}
  .topbar-left{gap:8px;flex-wrap:wrap;width:100%}
  .profile{padding:5px 10px 5px 7px;max-width:100%;min-width:0}
  .profile-info{min-width:0}
  .profile-name{max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ===== Homepage operations grid → stack into one column ===== */
  /* desktop packs 3 columns into a fixed-height row; on mobile that squeezes the
     bulletin list and the map to ~0 height. Stack them with natural heights. */
  .ops-grid{grid-template-columns:1fr !important;height:auto !important;gap:14px}
  .ops-col{min-height:0}
  /* bulletins: frame + list grow to fit all cards (no 0-height scroll trap) */
  .ops-col-bulletins .bulletin-frame{flex:none;height:auto}
  .bulletin-list{flex:none;height:auto;max-height:none;overflow:visible}
  /* nationalities map: let the SVG size by its own aspect ratio so it shows */
  .ops-col-map .ops-map-frame{flex:none;height:auto}
  .ops-col-map .afm-wrap{flex:none;height:auto;min-height:0;display:block;padding:8px}
  .afm-svg{height:auto !important;max-height:none;width:100%;aspect-ratio:2050/1100}
  /* countries breakdown: natural height with its own scroll if long */
  .ops-col-countries .afm-sidebar{flex:none;height:auto;max-height:none}
}

/* ---------- Phone (≤600px) ---------- */
@media (max-width:600px){
  html{font-size:13.5px}
  .main{padding:12px 11px 26px;padding-top:62px}
  .kpis,.kpis.kpis-6,.hr-sections-grid,.profile3-stats,.hr-hero-stats{grid-template-columns:1fr}
  .hero{min-height:170px;padding:16px}
  .hero h1{font-size:21px}
  /* card padding trims */
  .card,.set-card,.fl-card{padding:14px}
  /* buttons full-width in footers for easy tapping */
  .doc-footer .btn-primary,.doc-footer .btn-secondary,
  .modal-foot .btn-primary,.modal-foot .btn-secondary{width:100%}
  /* tighten table min so less horizontal scroll where possible */
  .flights-table-scroll table{min-width:560px}
}

/* ---------- Small phone (≤420px) ---------- */
@media (max-width:420px){
  html{font-size:13px}
  .sidebar{width:90vw;max-width:90vw}
  body.nav-open .mobile-nav-toggle{inset-inline-start:calc(90vw + 4px)}
  .hero h1{font-size:19px}
  .mobile-nav-toggle{width:42px;height:42px}
}

/* Employee detail: termination reason box + fire button */
.emp-term-box{border:1px solid #FCA5A5 !important;background:#FEF2F2 !important;border-radius:12px;padding:12px 14px}
.emp-term-box .apd-lbl{color:#B91C1C}
.emp-term-box p{margin:6px 0 0;color:#7F1D1D;font-size:13.5px;line-height:1.6}
.emp-term-date{display:block;margin-top:8px;font-size:12px;color:#B91C1C;font-weight:600}
body.dark .emp-term-box{border-color:rgba(248,113,113,0.4) !important;background:rgba(248,113,113,0.08) !important}
body.dark .emp-term-box .apd-lbl,body.dark .emp-term-box p,body.dark .emp-term-date{color:#FCA5A5}
.emp-detail-fire{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:10px;border:1px solid #FCA5A5;background:#FEF2F2;color:#B91C1C;font-weight:700;font-family:inherit;font-size:13px;cursor:pointer;width:auto;height:auto}
.emp-detail-fire:hover{background:#FEE2E2;border-color:#F87171}
body.dark .emp-detail-fire{background:rgba(248,113,113,0.1);border-color:rgba(248,113,113,0.4);color:#FCA5A5}

/* ===== Decorative spinning globe in the nationalities/partners map card ===== */
.map-globe-deco{
  position:absolute; top:11px; inset-inline-end:18px;   /* up in the header, clear of the rounded edge */
  width:34px; height:34px; z-index:4;
  pointer-events:none;                                   /* decorative — never blocks the map */
  color:var(--green-700);                                /* monochrome green ink */
  opacity:.92;
  filter:drop-shadow(0 0 4px rgba(15,122,92,0.26)) drop-shadow(0 0 8px rgba(201,162,39,0.15)); /* soft green/gold glow */
}
body.dark .map-globe-deco{
  color:#5DE3B0; opacity:.88;
  filter:drop-shadow(0 0 7px rgba(93,227,176,0.36)) drop-shadow(0 0 12px rgba(201,162,39,0.20));
}
.map-globe-deco svg{width:100%;height:100%;display:block;overflow:visible}
.mg-spin{animation:mg-scroll 10s linear infinite}
@keyframes mg-scroll{to{transform:translateX(-280px)}}
.mg-whirl{transform-box:fill-box;transform-origin:center;animation:mg-rotate 3.6s linear infinite}
.mg-whirl-2{animation-duration:6s;animation-direction:reverse}
@keyframes mg-rotate{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .mg-spin,.mg-whirl,.mg-whirl-2{animation:none} }
/* keep the "عرض عالمي" label clear of the globe in the corner */
.ops-col-map .section-head{padding-inline-end:48px}
/* mobile: shrink, then hide on the smallest screens to avoid crowding */
@media (max-width:600px){ .map-globe-deco{width:30px;height:30px;top:10px;inset-inline-end:14px} .ops-col-map .section-head{padding-inline-end:40px} }
@media (max-width:420px){ .map-globe-deco{display:none} .ops-col-map .section-head{padding-inline-end:0} }