/* ==========================================================================
   EXAMS MODERN THEME  ·  public/css/exams-modern-theme.css
   --------------------------------------------------------------------------
   A styling-only skin for the exam admin / teacher dashboard.
   - CSS only: no markup, Vue, JS, routes or data are changed.
   - Link it LAST, after app.css, exams-rtl-demo.css and exams-admin-ui.css.
   - Scoped to the dashboard shell (the layout with the dark side menu), so
     student exam pages, the login page and the file manager are untouched.
   - Works in English (LTR) and Arabic (RTL): only logical properties
     (inline-start / inline-end) are used, side-menu positioning is untouched.
   - Rollback: remove the <link> line.

   ONE SET OF COLOURS FOR EVERY SITE
   Change only --xm-primary (and optionally --xm-side-bg) per site; every
   tint, ring and hover colour below is derived from it automatically.
     Blue (default) #2563eb  ·  Indigo #4f46e5  ·  Teal #0d9488
     Emerald #059669         ·  Maroon #9f1239  ·  Navy #1e3a8a
   ========================================================================== */

:root {
  /* Brand ------------------------------------------------------------- */
  --xm-primary: #2563eb;
  --xm-primary-hover: color-mix(in srgb, var(--xm-primary) 85%, #000);
  --xm-primary-soft: color-mix(in srgb, var(--xm-primary) 9%, #fff);
  --xm-primary-line: color-mix(in srgb, var(--xm-primary) 25%, #fff);
  --xm-primary-ring: color-mix(in srgb, var(--xm-primary) 20%, transparent);

  /* Neutrals (slate) -------------------------------------------------- */
  --xm-bg: #f4f6fa;
  --xm-surface: #ffffff;
  --xm-surface-2: #f8fafc;
  --xm-border: #e6eaf0;
  --xm-border-strong: #cfd6e0;
  --xm-text: #0f172a;
  --xm-text-2: #475569;
  --xm-muted: #94a3b8;

  /* Side menu --------------------------------------------------------- */
  --xm-side-bg: #0f172a;
  --xm-side-bg-2: #131f38;
  --xm-side-line: rgba(255, 255, 255, .07);
  --xm-side-text: #9aa8bd;
  --xm-side-text-hover: #e2e8f0;
  --xm-side-hover: rgba(148, 163, 184, .10);
  --xm-side-active: color-mix(in srgb, var(--xm-primary) 26%, transparent);
  --xm-side-accent: color-mix(in srgb, var(--xm-primary) 55%, #fff);

  /* Status ------------------------------------------------------------ */
  --xm-success: #16a34a;  --xm-success-text: #15803d;  --xm-success-soft: #dcfce7;
  --xm-warning: #d97706;  --xm-warning-text: #b45309;  --xm-warning-soft: #fef3c7;
  --xm-danger:  #dc2626;  --xm-danger-text:  #b91c1c;  --xm-danger-soft:  #fee2e2;
  --xm-info:    #0284c7;  --xm-info-text:    #0369a1;  --xm-info-soft:    #e0f2fe;

  /* Shape ------------------------------------------------------------- */
  --xm-radius: 14px;
  --xm-radius-md: 10px;
  --xm-radius-sm: 8px;
  --xm-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --xm-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .05);
  --xm-shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);
  --xm-ease: .18s ease;
}

/* ==========================================================================
   1. Page shell
   ========================================================================== */
.min-h-screen:has(> nav.w-60) {
  background: var(--xm-bg);
  color: var(--xm-text);
}
.min-h-screen:has(> nav.w-60) ::selection { background: var(--xm-primary-ring); }

/* ==========================================================================
   2. Side menu
   ========================================================================== */
.min-h-screen:has(> nav.w-60) > nav.w-60 {
  background:
    radial-gradient(120% 45% at 0% 0%, color-mix(in srgb, var(--xm-primary) 24%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, var(--xm-side-bg) 0%, var(--xm-side-bg-2) 100%);
  border-inline-end: 1px solid var(--xm-side-line);
  box-shadow: none;
}

/* Logo, in its own soft tile (also styles the alt text if the image is missing) */
.min-h-screen:has(> nav.w-60) > nav.w-60 > a:first-child {
  min-height: 56px;
  margin: 14px 12px 16px;
  padding: 10px 14px;
  border: 1px solid var(--xm-side-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
}
.min-h-screen:has(> nav.w-60) > nav.w-60 > a:first-child img {
  max-height: 38px;
  width: auto;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
}

.min-h-screen:has(> nav.w-60) > nav.w-60 nav {
  padding: 0 12px 64px;
  color: var(--xm-side-text);
  font-size: 14px;
}

/* Top-level links and group headers */
.min-h-screen:has(> nav.w-60) > nav.w-60 nav > a,
.min-h-screen:has(> nav.w-60) > nav.w-60 nav > div > div.justify-between {
  position: relative;
  margin: 3px 0;
  padding: 7px 10px;
  border-radius: 12px;
  color: var(--xm-side-text);
  font-weight: 500;
  transition: background var(--xm-ease), color var(--xm-ease), box-shadow var(--xm-ease);
}

/* Icons sit in rounded tiles */
.min-h-screen:has(> nav.w-60) > nav.w-60 nav > a > span:first-child,
.min-h-screen:has(> nav.w-60) > nav.w-60 nav > div > div.justify-between > div > span:first-child {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  margin-inline-end: 12px;
  border-radius: 10px;
  background: rgba(148, 163, 184, .10);
  color: #cbd5e1;
  transition: background var(--xm-ease), color var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) > nav.w-60 nav > a > span:first-child svg,
.min-h-screen:has(> nav.w-60) > nav.w-60 nav > div > div.justify-between > div > span:first-child svg {
  width: 18px;
  height: 18px;
  margin: 0;
}

/* Hover */
.min-h-screen:has(> nav.w-60) > nav.w-60 nav > a:hover,
.min-h-screen:has(> nav.w-60) > nav.w-60 nav > div > div.justify-between:hover {
  background: var(--xm-side-hover);
  color: #fff;
}
.min-h-screen:has(> nav.w-60) > nav.w-60 nav > a:hover > span:first-child,
.min-h-screen:has(> nav.w-60) > nav.w-60 nav > div > div.justify-between:hover > div > span:first-child {
  background: rgba(148, 163, 184, .18);
  color: #fff;
}

/* Current page: brand gradient pill with a soft glow */
.min-h-screen:has(> nav.w-60) > nav.w-60 nav > a.text-green-400 {
  background: linear-gradient(90deg, var(--xm-primary) 0%, color-mix(in srgb, var(--xm-primary) 72%, #7c3aed) 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 10px 22px -10px var(--xm-primary);
}
.min-h-screen:has(> nav.w-60) > nav.w-60 nav > a.text-green-400 > span:first-child {
  background: rgba(255, 255, 255, .20);
  color: #fff;
}

/* Group that holds the current page */
.min-h-screen:has(> nav.w-60) > nav.w-60 nav > div > div.justify-between.text-green-400,
.min-h-screen:has(> nav.w-60) > nav.w-60 nav > div:has(.mb-4 a.text-green-400) > div.justify-between {
  color: #fff;
  font-weight: 600;
}
.min-h-screen:has(> nav.w-60) > nav.w-60 nav > div > div.justify-between.text-green-400 > div > span:first-child,
.min-h-screen:has(> nav.w-60) > nav.w-60 nav > div:has(.mb-4 a.text-green-400) > div.justify-between > div > span:first-child {
  background: var(--xm-primary);
  color: #fff;
  box-shadow: 0 6px 14px -6px var(--xm-primary);
}

/* Sub-menu: a thin rail with a dot on the current page */
.min-h-screen:has(> nav.w-60) > nav.w-60 nav .mb-4 {
  margin: 2px 0 10px;
  margin-inline-start: 26px;
  padding-inline-start: 12px;
  border-inline-start: 1px solid rgba(148, 163, 184, .20);
}
.min-h-screen:has(> nav.w-60) > nav.w-60 nav .mb-4 a {
  position: relative;
  margin: 2px 0;
  padding: 8px 12px;
  border-radius: 9px;
  color: var(--xm-side-text);
  font-size: 13px;
  transition: background var(--xm-ease), color var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) > nav.w-60 nav .mb-4 a:hover {
  background: var(--xm-side-hover);
  color: #fff;
}
.min-h-screen:has(> nav.w-60) > nav.w-60 nav .mb-4 a.text-green-400 {
  background: var(--xm-side-active);
  color: #fff;
  font-weight: 600;
}
.min-h-screen:has(> nav.w-60) > nav.w-60 nav .mb-4 a.text-green-400::before {
  content: "";
  position: absolute;
  inset-inline-start: -16px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--xm-side-accent);
  box-shadow: 0 0 0 3px var(--xm-side-bg), 0 0 10px var(--xm-side-accent);
}

/* ==========================================================================
   3. Top bar
   ========================================================================== */
.min-h-screen:has(> nav.w-60) header.bg-white {
  height: 68px;
  padding-inline: 24px;
  background: #ffffff;
  border-bottom: 1px solid var(--xm-border);
  box-shadow: 0 10px 30px -24px rgba(15, 23, 42, .35);
}
@media (max-width: 767px) {
  .min-h-screen:has(> nav.w-60) header.bg-white { position: relative; padding-inline: 14px; }
}
/* Thin brand gradient line along the top */
.min-h-screen:has(> nav.w-60) header.bg-white::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--xm-primary) 0%, #7c3aed 55%, #06b6d4 100%);
  pointer-events: none;
}

/* Page title with a gradient icon tile */
.min-h-screen:has(> nav.w-60) header.bg-white .form-icon a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  color: var(--xm-text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.min-h-screen:has(> nav.w-60) header.bg-white .form-icon a::before {
  content: "\f0e4";
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--xm-primary) 0%, color-mix(in srgb, var(--xm-primary) 55%, #7c3aed) 100%);
  box-shadow: 0 8px 18px -8px var(--xm-primary);
  color: #fff;
  font-family: FontAwesome;
  font-size: 17px;
  font-weight: normal;
}

/* Right-hand tools: one evenly spaced row */
.min-h-screen:has(> nav.w-60) header.bg-white > div.flex.items-center { gap: 10px; }
.min-h-screen:has(> nav.w-60) header.bg-white > div.flex.items-center > * { margin-inline: 0; }

/* Date / time: a compact two-row card (date on top, time below) */
.min-h-screen:has(> nav.w-60) header.bg-white .tmBox {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 3px;
  width: auto;
  height: auto;
  margin-inline-end: 4px;
  padding: 6px 14px;
  border: 1px solid var(--xm-primary-line);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--xm-primary-soft) 0%, color-mix(in srgb, #7c3aed 7%, #fff) 100%);
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.min-h-screen:has(> nav.w-60) header.bg-white .tmBox,
.min-h-screen:has(> nav.w-60) header.bg-white .tmBox * { color: var(--xm-primary); }
.min-h-screen:has(> nav.w-60) header.bg-white .tmBox .pi {
  justify-self: center;
  font-size: 12px;
  opacity: .8;
}
.min-h-screen:has(> nav.w-60) header.bg-white .tmBox .currentDateIDdata,
.min-h-screen:has(> nav.w-60) header.bg-white .tmBox .currenttimeIDdata {
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
}

/* Language and currency switchers as pills */
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls button {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--xm-border);
  border-radius: 999px;
  background: var(--xm-surface);
  transition: background var(--xm-ease), border-color var(--xm-ease), box-shadow var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls button:hover,
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls button:focus {
  border-color: var(--xm-primary-line);
  background: var(--xm-primary-soft);
}
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls .langtitle {
  color: var(--xm-text);
  font-size: 13px;
  font-weight: 600;
}
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls .lngclsd img {
  width: 22px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
}

/* Language switcher as a globe icon button, with the current flag as a small badge */
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls:has(.lngclsd) button {
  position: relative;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  color: var(--xm-text-2);
}
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls:has(.lngclsd) button:hover,
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls:has(.lngclsd) button:focus { color: var(--xm-primary); }
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls .lngclsd {
  position: static;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  height: 100%;
}
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls .lngclsd::before {
  content: "\f0ac";
  color: inherit;
  font-family: FontAwesome;
  font-size: 18px;
  line-height: 1;
}
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls .lngclsd::after { display: none; }
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls .lngclsd .langtitle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls .lngclsd img {
  position: absolute;
  bottom: 5px;
  inset-inline-end: 4px;
  width: 15px;
  height: 10px;
  border: 1.5px solid #fff;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
  object-fit: cover;
}

/* Round icon buttons (apps, wallet, chat, notifications) */
.min-h-screen:has(> nav.w-60) header.bg-white .notificationlistd > div > div > a {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--xm-border);
  border-radius: 12px;
  background: var(--xm-surface);
  color: var(--xm-text-2);
  transition: background var(--xm-ease), border-color var(--xm-ease), color var(--xm-ease), transform var(--xm-ease), box-shadow var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) header.bg-white .notificationlistd > div > div > a i { color: inherit; font-size: 16px; }
.min-h-screen:has(> nav.w-60) header.bg-white .notificationlistd > div > div > a:hover {
  border-color: var(--xm-primary-line);
  background: var(--xm-primary-soft);
  color: var(--xm-primary);
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -10px var(--xm-primary);
}
/* Unread count bubbles (only shown when they hold a number) */
.min-h-screen:has(> nav.w-60) header.bg-white .notificationlistd > div > div > a > span:not(:empty) {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--xm-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* Profile picture with a gradient ring and online dot, set apart by a divider */
.min-h-screen:has(> nav.w-60) header.bg-white .profileimg {
  margin-inline-start: 4px;
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--xm-border);
}
.min-h-screen:has(> nav.w-60) header.bg-white .profileimg button {
  position: relative;
  padding: 2px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--xm-primary) 0%, #7c3aed 55%, #06b6d4 100%);
  transition: box-shadow var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) header.bg-white .profileimg button:hover { box-shadow: 0 0 0 4px var(--xm-primary-ring); }
.min-h-screen:has(> nav.w-60) header.bg-white .profileimg img {
  width: 36px;
  height: 36px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--xm-primary-soft);
}
.min-h-screen:has(> nav.w-60) header.bg-white .profileimg button::after {
  content: "";
  position: absolute;
  bottom: 1px;
  inset-inline-end: 1px;
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--xm-success);
}

/* Mobile menu button */
.min-h-screen:has(> nav.w-60) header.bg-white > button.btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--xm-border);
  border-radius: 12px;
  background: var(--xm-surface);
  color: var(--xm-text-2);
}

/* Drop-down menus that open from the top bar */
.min-h-screen:has(> nav.w-60) header.bg-white .arabicbutton {
  margin-top: 10px;
  border: 1px solid var(--xm-border);
  border-radius: 14px;
  background: var(--xm-surface);
  box-shadow: var(--xm-shadow-lg);
  overflow: hidden;
}

/* ==========================================================================
   4. Page title row
   ========================================================================== */
.min-h-screen:has(> nav.w-60) .page-heading,
.min-h-screen:has(> nav.w-60) section h2 {
  color: var(--xm-text);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
}

/* ==========================================================================
   5. Cards and panels
   ========================================================================== */
.min-h-screen:has(> nav.w-60) main .card,
.min-h-screen:has(> nav.w-60) main .bg-white.shadow,
.min-h-screen:has(> nav.w-60) main .bg-white.rounded.shadow,
.min-h-screen:has(> nav.w-60) main .shadow.sm\:rounded-sm,
.min-h-screen:has(> nav.w-60) main .shadow.sm\:rounded-md {
  background: var(--xm-surface);
  border: 1px solid var(--xm-border);
  border-radius: var(--xm-radius);
  box-shadow: var(--xm-shadow);
}
/* A panel inside a panel draws no second frame */
.min-h-screen:has(> nav.w-60) main :is(.shadow.sm\:rounded-sm, .shadow.sm\:rounded-md) .bg-white.shadow {
  border: 0;
  border-radius: var(--xm-radius) var(--xm-radius) 0 0;
  box-shadow: none;
}
/* Panel footer bar (Save) */
.min-h-screen:has(> nav.w-60) main .shadow .bg-gray-50.justify-end {
  background: var(--xm-surface-2);
  border-top: 1px solid var(--xm-border);
  border-radius: 0 0 var(--xm-radius) var(--xm-radius);
  padding-block: 14px;
}
/* Section dividers on settings pages */
.min-h-screen:has(> nav.w-60) main .border-t.border-gray-200 { border-color: var(--xm-border); }
.min-h-screen:has(> nav.w-60) main h3.text-base.font-medium.text-gray-900 {
  font-size: 16px;
  font-weight: 600;
  color: var(--xm-text);
}
.min-h-screen:has(> nav.w-60) main p.text-gray-600 { color: var(--xm-text-2); }

/* Tinted info box (e.g. "Enable User Registration") */
.min-h-screen:has(> nav.w-60) main .bg-blue-50.rounded {
  background: var(--xm-primary-soft);
  border: 1px solid var(--xm-primary-line);
  border-radius: var(--xm-radius-md);
}

/* ==========================================================================
   6. Dashboard statistic cards
   ========================================================================== */
.min-h-screen:has(> nav.w-60) main .grid > .bg-white.rounded.shadow.items-start {
  position: relative;
  overflow: hidden;
  padding: 22px 24px 20px;
  transition: transform var(--xm-ease), box-shadow var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) main .grid > .bg-white.rounded.shadow.items-start::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--xm-primary);
}
.min-h-screen:has(> nav.w-60) main .grid > .bg-white.rounded.shadow.items-start:nth-child(6n+2)::before { background: var(--xm-success); }
.min-h-screen:has(> nav.w-60) main .grid > .bg-white.rounded.shadow.items-start:nth-child(6n+3)::before { background: var(--xm-warning); }
.min-h-screen:has(> nav.w-60) main .grid > .bg-white.rounded.shadow.items-start:nth-child(6n+4)::before { background: var(--xm-info); }
.min-h-screen:has(> nav.w-60) main .grid > .bg-white.rounded.shadow.items-start:nth-child(6n+5)::before { background: #7c3aed; }
.min-h-screen:has(> nav.w-60) main .grid > .bg-white.rounded.shadow.items-start:nth-child(6n+6)::before { background: var(--xm-danger); }
.min-h-screen:has(> nav.w-60) main .grid > .bg-white.rounded.shadow.items-start:hover {
  transform: translateY(-2px);
  box-shadow: var(--xm-shadow-lg);
}
.min-h-screen:has(> nav.w-60) main .grid > .bg-white.rounded.shadow.items-start > div { padding-inline-start: 0; }
.min-h-screen:has(> nav.w-60) main .grid > .bg-white.rounded.shadow.items-start h3 {
  margin-bottom: 10px;
  color: var(--xm-text-2);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.min-h-screen:has(> nav.w-60) main .grid > .bg-white.rounded.shadow.items-start h2 {
  color: var(--xm-text);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Quick links: a card of clickable tiles */
.min-h-screen:has(> nav.w-60) main .maindidd {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 1024px) {
  .min-h-screen:has(> nav.w-60) main .maindidd {
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    grid-auto-rows: min-content;
  }
  .min-h-screen:has(> nav.w-60) main .maindidd > .bg-white.rounded.shadow { grid-row: 1 / span 3; }
  .min-h-screen:has(> nav.w-60) main .maindidd > .btnifift { grid-column: 2; }
}
.min-h-screen:has(> nav.w-60) main .maindidd > .bg-white.rounded.shadow {
  float: none;
  width: auto;
  min-width: 0;
  padding: 22px 24px;
}
.min-h-screen:has(> nav.w-60) main .maindidd h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  color: var(--xm-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}
.min-h-screen:has(> nav.w-60) main .maindidd h4::before {
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 4px;
  background: var(--xm-primary);
}
.min-h-screen:has(> nav.w-60) main .maindidd .grid {
  display: grid;
  gap: 8px 14px;
  align-items: start;
}
.min-h-screen:has(> nav.w-60) main .maindidd ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.min-h-screen:has(> nav.w-60) main .maindidd li { margin: 0; }
.min-h-screen:has(> nav.w-60) main .maindidd li a {
  --xm-dot: var(--xm-primary);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--xm-border);
  border-radius: 12px;
  background: var(--xm-surface-2);
  color: var(--xm-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--xm-ease), border-color var(--xm-ease), color var(--xm-ease), box-shadow var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) main .maindidd ul + ul li a { --xm-dot: var(--xm-success); }
.min-h-screen:has(> nav.w-60) main .maindidd li a::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--xm-dot);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--xm-dot) 15%, transparent);
}
.min-h-screen:has(> nav.w-60) main .maindidd li a::after {
  content: "\2192";
  margin-inline-start: auto;
  color: var(--xm-muted);
  transition: transform var(--xm-ease), color var(--xm-ease);
}
html[dir="rtl"] .min-h-screen:has(> nav.w-60) main .maindidd li a::after { content: "\2190"; }
.min-h-screen:has(> nav.w-60) main .maindidd li a:hover {
  background: var(--xm-surface);
  border-color: color-mix(in srgb, var(--xm-dot) 35%, #fff);
  color: var(--xm-text);
  text-decoration: none;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--xm-dot) 45%, transparent);
}
.min-h-screen:has(> nav.w-60) main .maindidd li a:hover::after {
  color: var(--xm-dot);
  transform: translateX(3px);
}
html[dir="rtl"] .min-h-screen:has(> nav.w-60) main .maindidd li a:hover::after { transform: translateX(-3px); }

/* "Go to" boxes: bold gradient action cards (the whole card is clickable) */
.min-h-screen:has(> nav.w-60) main .maindidd > .btnifift {
  position: relative;
  overflow: hidden;
  float: none;
  width: auto;
  margin: 0;
  padding: 24px;
  align-items: center;
  border: 0;
  border-radius: var(--xm-radius);
  background: linear-gradient(135deg, var(--xm-primary) 0%, color-mix(in srgb, var(--xm-primary) 65%, #4c1d95) 100%);
  box-shadow: 0 14px 28px -14px var(--xm-primary);
  transition: transform var(--xm-ease), box-shadow var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) main .maindidd > .btnifift ~ .btnifift {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  box-shadow: 0 14px 28px -14px rgba(15, 23, 42, .7);
}
.min-h-screen:has(> nav.w-60) main .maindidd > .btnifift::after {
  content: "";
  position: absolute;
  top: -40px;
  inset-inline-end: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  pointer-events: none;
}
.min-h-screen:has(> nav.w-60) main .maindidd > .btnifift:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 34px -14px var(--xm-primary);
}
.min-h-screen:has(> nav.w-60) main .maindidd > .btnifift ~ .btnifift:hover { box-shadow: 0 20px 34px -14px rgba(15, 23, 42, .8); }
.min-h-screen:has(> nav.w-60) main .maindidd > .btnifift > div,
.min-h-screen:has(> nav.w-60) main .maindidd > .btnifift > div > div { width: 100%; }
.min-h-screen:has(> nav.w-60) main .maindidd > .btnifift a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.min-h-screen:has(> nav.w-60) main .maindidd > .btnifift a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.min-h-screen:has(> nav.w-60) main .maindidd > .btnifift a::after {
  content: "\2192";
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  font-size: 16px;
  transition: transform var(--xm-ease), background var(--xm-ease);
}
html[dir="rtl"] .min-h-screen:has(> nav.w-60) main .maindidd > .btnifift a::after { content: "\2190"; }
.min-h-screen:has(> nav.w-60) main .maindidd > .btnifift:hover a::after {
  background: rgba(255, 255, 255, .28);
  transform: translateX(3px);
}
html[dir="rtl"] .min-h-screen:has(> nav.w-60) main .maindidd > .btnifift:hover a::after { transform: translateX(-3px); }

/* ==========================================================================
   7. Buttons
   ========================================================================== */
.min-h-screen:has(> nav.w-60) .qt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--xm-radius-md);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: var(--xm-shadow-sm);
  transition: background var(--xm-ease), border-color var(--xm-ease), box-shadow var(--xm-ease), transform var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) .qt-btn:active { transform: translateY(1px); }
.min-h-screen:has(> nav.w-60) .qt-btn:focus-visible { box-shadow: 0 0 0 4px var(--xm-primary-ring); }

/* Main action (New …) */
.min-h-screen:has(> nav.w-60) .qt-btn-success {
  background: var(--xm-primary);
  color: #fff;
}
.min-h-screen:has(> nav.w-60) .qt-btn-success:hover {
  background: var(--xm-primary-hover);
  box-shadow: 0 6px 16px var(--xm-primary-ring);
}
/* Secondary action (Import …) */
.min-h-screen:has(> nav.w-60) .qt-btn-primary {
  background: var(--xm-surface);
  border-color: var(--xm-border-strong);
  color: var(--xm-text);
}
.min-h-screen:has(> nav.w-60) .qt-btn-primary:hover {
  background: var(--xm-surface-2);
  border-color: var(--xm-muted);
}
.min-h-screen:has(> nav.w-60) .qt-btn-danger { background: var(--xm-danger); color: #fff; }
.min-h-screen:has(> nav.w-60) .qt-btn-danger:hover { background: var(--xm-danger-text); }

/* Settings-page buttons (Save, Clear cache …) */
.min-h-screen:has(> nav.w-60) main button.inline-flex.bg-gray-800 {
  padding: 10px 20px;
  border-radius: var(--xm-radius-md);
  background: var(--xm-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  box-shadow: var(--xm-shadow-sm);
  transition: background var(--xm-ease), box-shadow var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) main button.inline-flex.bg-gray-800:hover {
  background: var(--xm-primary-hover);
  box-shadow: 0 6px 16px var(--xm-primary-ring);
}
/* Outline buttons (Select a new image …) */
.min-h-screen:has(> nav.w-60) main button.inline-flex.bg-white.border-gray-300 {
  padding: 9px 18px;
  border-color: var(--xm-border-strong);
  border-radius: var(--xm-radius-md);
  color: var(--xm-text);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.min-h-screen:has(> nav.w-60) main button.inline-flex.bg-white.border-gray-300:hover { background: var(--xm-surface-2); }

/* PrimeVue: plain primary buttons */
.min-h-screen:has(> nav.w-60) .p-button:not([class*="p-button-"]) {
  border-radius: var(--xm-radius-md);
  background: var(--xm-primary);
  border-color: var(--xm-primary);
}
.min-h-screen:has(> nav.w-60) .p-button:not([class*="p-button-"]):enabled:hover {
  background: var(--xm-primary-hover);
  border-color: var(--xm-primary-hover);
}

/* PrimeVue: row action icons (edit, schedule, report, delete) */
.min-h-screen:has(> nav.w-60) .p-button.p-button-text.p-button-icon-only {
  width: 34px;
  height: 34px;
  margin-inline-end: 2px;
  border-radius: var(--xm-radius-sm);
  color: var(--xm-text-2);
  transition: background var(--xm-ease), color var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) .p-button.p-button-text.p-button-icon-only:enabled:hover {
  background: var(--xm-primary-soft);
  color: var(--xm-primary);
}
.min-h-screen:has(> nav.w-60) .p-button.p-button-text.p-button-danger.p-button-icon-only { color: var(--xm-danger); }
.min-h-screen:has(> nav.w-60) .p-button.p-button-text.p-button-danger.p-button-icon-only:enabled:hover {
  background: var(--xm-danger-soft);
  color: var(--xm-danger-text);
}
.min-h-screen:has(> nav.w-60) .p-button:focus { box-shadow: 0 0 0 3px var(--xm-primary-ring); }

/* PrimeVue: two-state switches (Yes/No …) keep their shape, take the brand colour */
.min-h-screen:has(> nav.w-60) .p-selectbutton .p-button.p-highlight,
.min-h-screen:has(> nav.w-60) .p-selectbutton .p-button.p-highlight:hover {
  background: var(--xm-primary);
  border-color: var(--xm-primary);
  color: #fff;
}

/* ==========================================================================
   8. Tables (vue-good-table)
   ========================================================================== */
.min-h-screen:has(> nav.w-60) main .card { padding: 6px; }
.min-h-screen:has(> nav.w-60) main .card-body { padding: 14px; }
.min-h-screen:has(> nav.w-60) .vgt-wrap,
.min-h-screen:has(> nav.w-60) .vgt-inner-wrap {
  border-radius: var(--xm-radius-md);
  box-shadow: none;
}
.min-h-screen:has(> nav.w-60) table.vgt-table {
  border: 1px solid var(--xm-border);
  border-radius: var(--xm-radius-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--xm-surface);
  font-size: 14px;
}
.min-h-screen:has(> nav.w-60) table.vgt-table thead th {
  padding: 12px 14px;
  background: var(--xm-surface-2);
  border: 0;
  border-bottom: 1px solid var(--xm-border);
  color: var(--xm-text-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: middle;
}
.min-h-screen:has(> nav.w-60) table.vgt-table thead tr + tr th {
  padding-block: 10px;
  background: var(--xm-surface);
}
.min-h-screen:has(> nav.w-60) table.vgt-table td {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--xm-border);
  color: var(--xm-text);
  vertical-align: middle;
}
.min-h-screen:has(> nav.w-60) table.vgt-table tbody tr:last-child td { border-bottom: 0; }
.min-h-screen:has(> nav.w-60) table.vgt-table tbody tr { transition: background var(--xm-ease); }
.min-h-screen:has(> nav.w-60) table.vgt-table tbody tr:hover td { background: var(--xm-primary-soft); }
.min-h-screen:has(> nav.w-60) table.vgt-table .vgt-center-align .text-disabled,
.min-h-screen:has(> nav.w-60) .vgt-text-disabled { color: var(--xm-muted); }

/* Column filters */
.min-h-screen:has(> nav.w-60) .vgt-input,
.min-h-screen:has(> nav.w-60) .vgt-select {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--xm-border-strong);
  border-radius: var(--xm-radius-sm);
  background-color: var(--xm-surface);
  color: var(--xm-text);
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color var(--xm-ease), box-shadow var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) .vgt-input::placeholder { color: var(--xm-muted); }
.min-h-screen:has(> nav.w-60) .vgt-input:focus,
.min-h-screen:has(> nav.w-60) .vgt-select:focus {
  outline: none;
  border-color: var(--xm-primary);
  box-shadow: 0 0 0 3px var(--xm-primary-ring);
}

/* Footer: rows per page + paging */
.min-h-screen:has(> nav.w-60) .vgt-wrap__footer {
  padding: 14px 6px 4px;
  border: 0;
  background: transparent;
  color: var(--xm-text-2);
  font-size: 13px;
}
.min-h-screen:has(> nav.w-60) .vgt-wrap__footer .footer__row-count__label {
  color: var(--xm-text-2);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
}
.min-h-screen:has(> nav.w-60) .vgt-wrap__footer .footer__row-count__select {
  padding: 4px 8px;
  border: 1px solid var(--xm-border-strong);
  border-radius: var(--xm-radius-sm);
  background-color: var(--xm-surface);
  color: var(--xm-text);
}
.min-h-screen:has(> nav.w-60) .vgt-wrap__footer .footer__navigation__page-info,
.min-h-screen:has(> nav.w-60) .vgt-wrap__footer .footer__navigation__page-btn span { color: var(--xm-text-2); }
.min-h-screen:has(> nav.w-60) .vgt-wrap__footer .footer__navigation__page-info__current-entry {
  border: 1px solid var(--xm-primary-line);
  border-radius: var(--xm-radius-sm);
  background: var(--xm-primary-soft);
  color: var(--xm-primary);
  font-weight: 700;
}
.min-h-screen:has(> nav.w-60) .vgt-wrap__footer .footer__navigation__page-btn .chevron.left::after { border-right-color: var(--xm-text-2); }
.min-h-screen:has(> nav.w-60) .vgt-wrap__footer .footer__navigation__page-btn .chevron.right::after { border-left-color: var(--xm-text-2); }

/* ==========================================================================
   9. Tags and status badges
   ========================================================================== */
/* Code chips (quiz_…, que_…, ugp_…, MSA …) */
.min-h-screen:has(> nav.w-60) .p-tag:is(.p-tag-info, :not([class*="p-tag-"])) {
  padding: 4px 9px;
  border: 1px solid var(--xm-primary-line);
  border-radius: var(--xm-radius-sm);
  background: var(--xm-primary-soft);
  color: var(--xm-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  transition: background var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) .p-tag:is(.p-tag-info, :not([class*="p-tag-"])):hover { background: color-mix(in srgb, var(--xm-primary) 16%, #fff); }
.min-h-screen:has(> nav.w-60) .p-tag .p-tag-icon { opacity: .7; }

.min-h-screen:has(> nav.w-60) .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.min-h-screen:has(> nav.w-60) .badge-success { background: var(--xm-success-soft); color: var(--xm-success-text); }
.min-h-screen:has(> nav.w-60) .badge-danger  { background: var(--xm-danger-soft);  color: var(--xm-danger-text); }
.min-h-screen:has(> nav.w-60) :is(.badge-success, .badge-danger)::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Link-style actions (Edit language, Update instruction on the Languages page) */
.min-h-screen:has(> nav.w-60) main a:is(.badge, .badge-sm) {
  padding: 5px 12px;
  border: 1px solid var(--xm-primary-line);
  border-radius: var(--xm-radius-sm);
  background: var(--xm-primary-soft);
  color: var(--xm-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  transition: background var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) main a:is(.badge, .badge-sm)::before { content: none; }
.min-h-screen:has(> nav.w-60) main a:is(.badge, .badge-sm):hover { background: color-mix(in srgb, var(--xm-primary) 16%, #fff); }
.min-h-screen:has(> nav.w-60) main a.block.bg-green-600 {
  border-radius: var(--xm-radius-md);
  background: var(--xm-primary);
  opacity: 1;
  box-shadow: var(--xm-shadow-sm);
  transition: background var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) main a.block.bg-green-600:hover { background: var(--xm-primary-hover); }

/* ==========================================================================
   10. Form fields
   ========================================================================== */
.min-h-screen:has(> nav.w-60) main label.block {
  margin-bottom: 6px;
  color: var(--xm-text-2);
  font-size: 13px;
  font-weight: 600;
}
.min-h-screen:has(> nav.w-60) main :is(
  input[type="text"], input[type="email"], input[type="number"], input[type="password"],
  input[type="url"], input[type="search"], input[type="tel"], input[type="date"],
  input[type="time"], input[type="datetime-local"], textarea, select
):not(.vgt-input):not(.vgt-select):not(.multiselect__input):not(.vs__search):not(.footer__row-count__select) {
  padding: 10px 12px;
  border: 1px solid var(--xm-border-strong);
  border-radius: var(--xm-radius-md);
  background-color: var(--xm-surface);
  color: var(--xm-text);
  font-size: 14px;
  box-shadow: none;
  transition: border-color var(--xm-ease), box-shadow var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) main :is(input, textarea, select):not(.vgt-input):not(.vgt-select):not(.multiselect__input):not(.vs__search):focus {
  outline: none;
  border-color: var(--xm-primary);
  box-shadow: 0 0 0 4px var(--xm-primary-ring);
}
.min-h-screen:has(> nav.w-60) main input[type="file"] { color: var(--xm-text-2); font-size: 13px; }
.min-h-screen:has(> nav.w-60) main input[type="file"]::file-selector-button {
  margin-inline-end: 10px;
  padding: 8px 14px;
  border: 1px solid var(--xm-border-strong);
  border-radius: var(--xm-radius-sm);
  background: var(--xm-surface-2);
  color: var(--xm-text);
  font-weight: 600;
  cursor: pointer;
}

/* Searchable selects (vue-multiselect) */
.min-h-screen:has(> nav.w-60) .multiselect__tags {
  min-height: 42px;
  border: 1px solid var(--xm-border-strong);
  border-radius: var(--xm-radius-md);
}
.min-h-screen:has(> nav.w-60) .multiselect--active .multiselect__tags {
  border-color: var(--xm-primary);
  box-shadow: 0 0 0 4px var(--xm-primary-ring);
}
.min-h-screen:has(> nav.w-60) .multiselect__content-wrapper {
  border-color: var(--xm-border);
  border-radius: 0 0 var(--xm-radius-md) var(--xm-radius-md);
  box-shadow: var(--xm-shadow-lg);
}
.min-h-screen:has(> nav.w-60) .multiselect__option--highlight,
.min-h-screen:has(> nav.w-60) .multiselect__option--highlight::after,
.min-h-screen:has(> nav.w-60) .multiselect__tag { background: var(--xm-primary); }
.min-h-screen:has(> nav.w-60) .multiselect__tag-icon:hover { background: var(--xm-primary-hover); }

/* Searchable selects (vue-select: Choose Skill, Choose Evaluation …) */
.min-h-screen:has(> nav.w-60) .v-select .vs__dropdown-toggle {
  min-height: 42px;
  padding: 2px 6px 4px;
  border: 1px solid var(--xm-border-strong);
  border-radius: var(--xm-radius-md);
  background: var(--xm-surface);
  transition: border-color var(--xm-ease), box-shadow var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) .v-select.vs--open .vs__dropdown-toggle {
  border-color: var(--xm-primary);
  box-shadow: 0 0 0 4px var(--xm-primary-ring);
}
.min-h-screen:has(> nav.w-60) .v-select .vs__search,
.min-h-screen:has(> nav.w-60) .v-select .vs__search:focus {
  border: 0;
  box-shadow: none;
  color: var(--xm-text);
  font-size: 14px;
}
.min-h-screen:has(> nav.w-60) .v-select .vs__selected { color: var(--xm-text); }
.min-h-screen:has(> nav.w-60) .v-select .vs__open-indicator,
.min-h-screen:has(> nav.w-60) .v-select .vs__clear { fill: var(--xm-muted); }
.min-h-screen:has(> nav.w-60) .v-select .vs__dropdown-menu {
  border-color: var(--xm-border);
  border-radius: 0 0 var(--xm-radius-md) var(--xm-radius-md);
  box-shadow: var(--xm-shadow-lg);
}
.min-h-screen:has(> nav.w-60) .v-select .vs__dropdown-option--highlight { background: var(--xm-primary); color: #fff; }

/* PrimeVue inputs */
.min-h-screen:has(> nav.w-60) :is(.p-inputtext, .p-dropdown, .p-multiselect, .p-calendar .p-inputtext, .p-inputnumber-input) {
  border-color: var(--xm-border-strong);
  border-radius: var(--xm-radius-md);
}
.min-h-screen:has(> nav.w-60) :is(.p-inputtext:enabled:focus, .p-dropdown:not(.p-disabled).p-focus, .p-multiselect:not(.p-disabled).p-focus) {
  border-color: var(--xm-primary);
  box-shadow: 0 0 0 4px var(--xm-primary-ring);
}
.min-h-screen:has(> nav.w-60) .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider,
.min-h-screen:has(> nav.w-60) .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
  background: var(--xm-primary);
}
.min-h-screen:has(> nav.w-60) .p-checkbox .p-checkbox-box.p-highlight,
.min-h-screen:has(> nav.w-60) .p-radiobutton .p-radiobutton-box.p-highlight {
  background: var(--xm-primary);
  border-color: var(--xm-primary);
}

/* ==========================================================================
   11. Messages
   ========================================================================== */
.min-h-screen:has(> nav.w-60) .p-message {
  margin-block: 12px 0;
  border: 1px solid;
  border-inline-start-width: 4px;
  border-radius: var(--xm-radius-md);
  box-shadow: none;
}
.min-h-screen:has(> nav.w-60) .p-message.p-message-success { background: #f0fdf4; border-color: #bbf7d0; border-inline-start-color: var(--xm-success); color: #166534; }
.min-h-screen:has(> nav.w-60) .p-message.p-message-info    { background: var(--xm-info-soft); border-color: #bae6fd; border-inline-start-color: var(--xm-info); color: var(--xm-info-text); }
.min-h-screen:has(> nav.w-60) .p-message.p-message-warn    { background: #fffbeb; border-color: #fde68a; border-inline-start-color: var(--xm-warning); color: var(--xm-warning-text); }
.min-h-screen:has(> nav.w-60) .p-message.p-message-error   { background: #fef2f2; border-color: #fecaca; border-inline-start-color: var(--xm-danger); color: var(--xm-danger-text); }
.min-h-screen:has(> nav.w-60) .p-message .p-message-wrapper { padding: 12px 16px; }

/* ==========================================================================
   12. Import Questions page: full width, form and reference side by side
   ========================================================================== */
.min-h-screen:has(> nav.w-60) main > .py-12:has(form input[type="file"]) { padding-block: 8px 32px; }
.min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) {
  width: 100%;
  max-width: none;
  padding-inline: 1rem;
}
@media (min-width: 640px)  { .min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) { padding-inline: 2rem; } }

.min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) > .bg-white.shadow { overflow: hidden; }
@media (min-width: 1024px) {
  .min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) > .bg-white.shadow {
    display: grid;
    grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr);
    align-items: stretch;
  }
  .min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) > .bg-white.shadow > .border-b { grid-column: 1 / -1; }
  .min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) > .bg-white.shadow > hr { display: none; }
  .min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) > .bg-white.shadow > .p-6:has(form) {
    border-inline-end: 1px solid var(--xm-border);
  }
}
/* Upload form panel */
.min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) > .bg-white.shadow > .p-6:has(form) {
  padding: 28px;
  background: linear-gradient(180deg, var(--xm-primary-soft) 0%, var(--xm-surface) 55%);
}
.min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) form label {
  color: var(--xm-text);
  font-size: 13px;
  font-weight: 600;
}
.min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) form input[type="file"] {
  padding: 14px;
  border: 1.5px dashed var(--xm-border-strong);
  border-radius: 12px;
  background: var(--xm-surface);
  transition: border-color var(--xm-ease), background var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) form input[type="file"]:hover {
  border-color: var(--xm-primary);
  background: var(--xm-primary-soft);
}
.min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) form .qt-btn { min-width: 160px; }

/* Top bar with the sample download */
.min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) > .bg-white.shadow > .border-b {
  padding: 12px 16px;
  border-color: var(--xm-border);
  background: var(--xm-surface);
}
.min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) > .bg-white.shadow > .border-b a {
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--xm-border-strong);
  border-radius: var(--xm-radius-md);
  background: var(--xm-surface);
  color: var(--xm-text);
  font-weight: 600;
  transition: background var(--xm-ease), border-color var(--xm-ease), color var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) > .bg-white.shadow > .border-b a:hover {
  border-color: #86efac;
  background: #f0fdf4;
  color: #15803d;
}

/* Reference tables (question types, codes) */
.min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) > .bg-white.shadow > .p-6:not(:has(form)) { padding: 28px; }
.min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--xm-text);
  font-size: 15px;
  font-weight: 700;
}
.min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) h4::before {
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 4px;
  background: var(--xm-primary);
}
.min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) table.table-auto {
  border: 1px solid var(--xm-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--xm-radius-md);
  overflow: hidden;
  font-size: 14px;
}
.min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) table.table-auto th {
  padding: 11px 16px;
  border: 0;
  border-bottom: 1px solid var(--xm-border);
  background: var(--xm-surface-2);
  color: var(--xm-text-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) table.table-auto td {
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--xm-border);
  color: var(--xm-text);
}
.min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) table.table-auto :is(th, td) + :is(th, td) { border-inline-start: 1px solid var(--xm-border); }
.min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) table.table-auto tbody tr:last-child td { border-bottom: 0; }
.min-h-screen:has(> nav.w-60) main > .py-12 > .mx-auto:has(form input[type="file"]) table.table-auto tbody tr:hover td { background: var(--xm-primary-soft); }

/* ==========================================================================
   13. Pop-ups opened from the dashboard (dialogs, side drawers, menus)
   They are attached to <body>, so they are scoped by the page that opens them.
   ========================================================================== */
body:has(.min-h-screen > nav.w-60) .p-dialog {
  border-radius: var(--xm-radius);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
  overflow: hidden;
}
body:has(.min-h-screen > nav.w-60) .p-dialog .p-dialog-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--xm-border);
}
body:has(.min-h-screen > nav.w-60) .p-dialog .p-dialog-header .p-dialog-title { font-weight: 700; color: var(--xm-text); }
body:has(.min-h-screen > nav.w-60) .p-dialog .p-dialog-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--xm-border);
  background: var(--xm-surface-2);
}
body:has(.min-h-screen > nav.w-60) .p-sidebar { box-shadow: 0 0 60px rgba(15, 23, 42, .25); }
body:has(.min-h-screen > nav.w-60) .p-component-overlay { background: rgba(15, 23, 42, .45); }
body:has(.min-h-screen > nav.w-60) :is(.p-dropdown-panel, .p-multiselect-panel, .p-menu, .p-tieredmenu) {
  border: 1px solid var(--xm-border);
  border-radius: var(--xm-radius-md);
  box-shadow: var(--xm-shadow-lg);
}
body:has(.min-h-screen > nav.w-60) :is(.p-dropdown-panel, .p-multiselect-panel) .p-highlight {
  background: var(--xm-primary-soft);
  color: var(--xm-primary);
}

/* ==========================================================================
   14. Small screens
   ========================================================================== */
@media (max-width: 767px) {
  .min-h-screen:has(> nav.w-60) .page-heading,
  .min-h-screen:has(> nav.w-60) section h2 { font-size: 19px; }
  .min-h-screen:has(> nav.w-60) main .grid > .bg-white.rounded.shadow.items-start h2 { font-size: 26px; }
  .min-h-screen:has(> nav.w-60) header.bg-white .tmBox { display: none; }
}

/* Respect "reduce motion" */
@media (prefers-reduced-motion: reduce) {
  .min-h-screen:has(> nav.w-60) * { transition: none !important; }
}

/* ==========================================================================
   Sections 15-17 were added on the live site on 2026-11-03, after the
   sections above: medium-screen top bar, profile menu, apps and
   notifications menus.
   ========================================================================== */

/* ==========================================================================
   15. Top bar on medium screens (laptops with zoom, tablets)
   Keeps the top bar inside the screen between 768px and 1023px wide.
   ========================================================================== */
@media (max-width: 1023px) {
  .min-h-screen:has(> nav.w-60) header.bg-white .tmBox { display: none; }
  .min-h-screen:has(> nav.w-60) header.bg-white { padding-inline: 14px; }
  .min-h-screen:has(> nav.w-60) header.bg-white > div.flex.items-center { gap: 6px; }
  .min-h-screen:has(> nav.w-60) header.bg-white .form-icon a::before { display: none; }
  .min-h-screen:has(> nav.w-60) header.bg-white .languagecls button { padding: 0 10px; }
  .min-h-screen:has(> nav.w-60) header.bg-white .languagecls:has(.lngclsd) button { width: 36px; height: 36px; padding: 0; }
  .min-h-screen:has(> nav.w-60) header.bg-white .notificationlistd > div > div > a { width: 36px; height: 36px; }
  .min-h-screen:has(> nav.w-60) header.bg-white .profileimg { margin-inline-start: 0; padding-inline-start: 8px; }
}

/* ==========================================================================
   16. Profile menu (opens from the profile picture)
   ========================================================================== */
.min-h-screen:has(> nav.w-60) header.bg-white .profileimg .arabicbutton {
  width: 240px;
  padding: 6px;
}
.min-h-screen:has(> nav.w-60) header.bg-white .profileimg .arabicbutton > div {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
/* The round gradient ring and online dot above are for the profile picture only */
.min-h-screen:has(> nav.w-60) header.bg-white .profileimg .arabicbutton :is(a, form button)::after { content: none; display: none; }
/* "Manage Account" label */
.min-h-screen:has(> nav.w-60) header.bg-white .profileimg .arabicbutton > div > div.text-xs {
  padding: 8px 12px 6px;
  color: var(--xm-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Dividers */
.min-h-screen:has(> nav.w-60) header.bg-white .profileimg .arabicbutton .border-t {
  margin: 6px;
  border-color: var(--xm-border);
}
/* Menu items: Profile, Dashboard, Logout */
.min-h-screen:has(> nav.w-60) header.bg-white .profileimg .arabicbutton :is(a, form button) {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--xm-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: start;
  text-decoration: none;
  transition: background var(--xm-ease), color var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) header.bg-white .profileimg .arabicbutton :is(a, form button)::before {
  content: "\f007";
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--xm-surface-2);
  box-shadow: inset 0 0 0 1px var(--xm-border);
  color: var(--xm-text-2);
  font-family: FontAwesome;
  font-size: 14px;
  font-weight: normal;
  transition: background var(--xm-ease), color var(--xm-ease), box-shadow var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) header.bg-white .profileimg .arabicbutton a.arc-dropdown-linkdashboard::before { content: "\f0e4"; }
.min-h-screen:has(> nav.w-60) header.bg-white .profileimg .arabicbutton :is(a, form button):hover,
.min-h-screen:has(> nav.w-60) header.bg-white .profileimg .arabicbutton :is(a, form button):focus-visible {
  outline: none;
  background: var(--xm-primary-soft);
  box-shadow: none;
  color: var(--xm-primary);
}
.min-h-screen:has(> nav.w-60) header.bg-white .profileimg .arabicbutton :is(a, form button):is(:hover, :focus-visible)::before {
  background: var(--xm-primary);
  box-shadow: none;
  color: #fff;
}
/* Logout in red */
.min-h-screen:has(> nav.w-60) header.bg-white .profileimg .arabicbutton form button { color: var(--xm-danger-text); }
.min-h-screen:has(> nav.w-60) header.bg-white .profileimg .arabicbutton form button::before {
  content: "\f08b";
  background: var(--xm-danger-soft);
  box-shadow: none;
  color: var(--xm-danger);
}
html[dir="rtl"] .min-h-screen:has(> nav.w-60) header.bg-white .profileimg .arabicbutton form button::before { transform: scaleX(-1); }
.min-h-screen:has(> nav.w-60) header.bg-white .profileimg .arabicbutton form button:is(:hover, :focus-visible) {
  background: var(--xm-danger-soft);
  box-shadow: none;
  color: var(--xm-danger-text);
}
.min-h-screen:has(> nav.w-60) header.bg-white .profileimg .arabicbutton form button:is(:hover, :focus-visible)::before {
  background: var(--xm-danger);
  color: #fff;
}

/* ==========================================================================
   17. Apps menu (grid icon) and Notifications menu (bell) in the top bar
   app.css styles these with !important, so the overrides here need it too.
   ========================================================================== */
.min-h-screen:has(> nav.w-60) header.bg-white .notificationlistd .arabicbutton:has(.thimiDroping),
.min-h-screen:has(> nav.w-60) header.bg-white .notificationlistd .arabicbutton:has(.notiInma) {
  margin-top: 12px;
  padding: 0;
  border: 1px solid var(--xm-border);
  border-radius: 18px;
  background: var(--xm-surface);
  box-shadow: 0 24px 48px -16px rgba(15, 23, 42, .28);
}
.min-h-screen:has(> nav.w-60) header.bg-white .notificationlistd .arabicbutton:has(.thimiDroping) > div,
.min-h-screen:has(> nav.w-60) header.bg-white .notificationlistd .arabicbutton:has(.notiInma) > div {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.min-h-screen:has(> nav.w-60) header.bg-white .notificationlistd .arabicbutton:is(:has(.thimiDroping), :has(.notiInma)) > div > .border-t:last-child { display: none; }

/* ---- Apps menu ---- */
.min-h-screen:has(> nav.w-60) header.bg-white .notificationlistd .arabicbutton:has(.thimiDroping) { width: 344px; }
.min-h-screen:has(> nav.w-60) header.bg-white ul.thimiDroping {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.min-h-screen:has(> nav.w-60) header.bg-white ul.lisitThemeIcon {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  max-height: 440px;
  margin: 0;
  padding: 12px;
  overflow-y: auto;
}
.min-h-screen:has(> nav.w-60) header.bg-white ul.lisitThemeIcon li {
  width: auto !important;
  float: none !important;
  margin: 0;
}
.min-h-screen:has(> nav.w-60) header.bg-white ul.lisitThemeIcon li a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 14px 6px 12px !important;
  border: 1px solid transparent;
  border-radius: 14px;
  text-decoration: none;
  transition: background var(--xm-ease), border-color var(--xm-ease), box-shadow var(--xm-ease);
}
/* App icons; a picture that fails to load shows a brand tile instead of a broken image */
.min-h-screen:has(> nav.w-60) header.bg-white ul.lisitThemeIcon li a img {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  max-width: none;
  margin: 0 !important;
  border-radius: 50%;
  object-fit: contain;
  font-size: 0;
  color: transparent;
  transition: transform var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) header.bg-white ul.lisitThemeIcon li a img::after {
  content: "\f009";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--xm-primary) 0%, color-mix(in srgb, var(--xm-primary) 55%, #7c3aed) 100%);
  color: #fff;
  font-family: FontAwesome;
  font-size: 19px;
}
.min-h-screen:has(> nav.w-60) header.bg-white ul.lisitThemeIcon li a span {
  color: var(--xm-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}
.min-h-screen:has(> nav.w-60) header.bg-white ul.lisitThemeIcon li:not(.btnMoreNlc) a:hover {
  border-color: var(--xm-primary-line);
  background: var(--xm-primary-soft) !important;
  box-shadow: 0 8px 18px -12px var(--xm-primary);
}
.min-h-screen:has(> nav.w-60) header.bg-white ul.lisitThemeIcon li:not(.btnMoreNlc) a:hover img { transform: translateY(-2px) scale(1.06); }
.min-h-screen:has(> nav.w-60) header.bg-white ul.lisitThemeIcon li:not(.btnMoreNlc) a:hover span { color: var(--xm-primary); }

/* "More From NELC": a full-width button under the grid */
.min-h-screen:has(> nav.w-60) header.bg-white ul.lisitThemeIcon li.btnMoreNlc {
  grid-column: 1 / -1;
  width: auto !important;
  margin-top: 6px;
  padding-top: 12px !important;
  border-top: 1px solid var(--xm-border) !important;
}
html body .min-h-screen:has(> nav.w-60) header.bg-white ul.lisitThemeIcon li.btnMoreNlc a {
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
  margin: 0;
  padding: 11px 16px !important;
  border: 1px solid var(--xm-primary-line);
  border-radius: 12px !important;
  background: var(--xm-primary-soft) !important;
}
.min-h-screen:has(> nav.w-60) header.bg-white ul.lisitThemeIcon li.btnMoreNlc a span { color: var(--xm-primary); font-size: 14px; font-weight: 700; }
.min-h-screen:has(> nav.w-60) header.bg-white ul.lisitThemeIcon li.btnMoreNlc a::after {
  content: "\2192";
  color: var(--xm-primary);
  font-weight: 700;
  transition: transform var(--xm-ease), color var(--xm-ease);
}
html[dir="rtl"] .min-h-screen:has(> nav.w-60) header.bg-white ul.lisitThemeIcon li.btnMoreNlc a::after { content: "\2190"; }
html body .min-h-screen:has(> nav.w-60) header.bg-white ul.lisitThemeIcon li.btnMoreNlc a:hover {
  border-color: var(--xm-primary);
  background: var(--xm-primary) !important;
  box-shadow: 0 10px 20px -12px var(--xm-primary);
}
.min-h-screen:has(> nav.w-60) header.bg-white ul.lisitThemeIcon li.btnMoreNlc a:hover :is(span, *) { color: #fff !important; }
.min-h-screen:has(> nav.w-60) header.bg-white ul.lisitThemeIcon li.btnMoreNlc a:hover::after { color: #fff; transform: translateX(3px); }
html[dir="rtl"] .min-h-screen:has(> nav.w-60) header.bg-white ul.lisitThemeIcon li.btnMoreNlc a:hover::after { transform: translateX(-3px); }

/* ---- Notifications menu ---- */
.min-h-screen:has(> nav.w-60) header.bg-white .notificationlistd .arabicbutton:has(.notiInma) { width: 360px; }
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma {
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: start;
}
/* Title row with a bell tile */
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma .tino h4 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--xm-border);
  color: var(--xm-text);
  font-size: 16px;
  font-weight: 700;
  text-align: start;
}
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma .tino h4::before {
  content: "\f0f3";
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--xm-primary) 0%, color-mix(in srgb, var(--xm-primary) 55%, #7c3aed) 100%);
  box-shadow: 0 8px 16px -8px var(--xm-primary);
  color: #fff;
  font-family: FontAwesome;
  font-size: 15px;
  font-weight: normal;
}
/* "New" pill and "See All" link */
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma .xbi_new {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 12px 18px 6px;
  border-bottom: 0;
}
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma span.wen_xd {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--xm-primary-soft);
  color: var(--xm-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma .xbi_new a {
  float: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--xm-primary) !important;
  font-size: 13px;
  font-weight: 600;
  transition: background var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma .xbi_new a::after { content: "\2192"; }
html[dir="rtl"] .min-h-screen:has(> nav.w-60) header.bg-white .notiInma .xbi_new a::after { content: "\2190"; }
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma .xbi_new a:hover { background: var(--xm-primary-soft) !important; }
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma .xbi_new a span { color: inherit; }

/* The list */
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma ul.notiful.addnotifi {
  max-height: 340px;
  margin: 0;
  padding: 4px 10px 10px;
  overflow-y: auto;
}
/* Nothing new: a quiet bell-slash icon instead of an empty gap */
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma ul.notiful.addnotifi:empty::before {
  content: "\f1f6";
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 10px auto 6px;
  border-radius: 50%;
  background: var(--xm-surface-2);
  box-shadow: inset 0 0 0 1px var(--xm-border);
  color: var(--xm-muted);
  font-family: FontAwesome;
  font-size: 20px;
}
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma ul.notiful li:not(.lis_lasto) {
  position: relative;
  display: block;
  margin: 2px 0;
  padding: 10px 30px 10px 12px;
  padding-inline: 12px 30px;
  border: 0 !important;
  border-radius: 12px;
  transition: background var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma ul.notiful li:not(.lis_lasto):hover { background: var(--xm-surface-2); }
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma ul.notiful li a { color: var(--xm-text); font-size: 13px; font-weight: 500; line-height: 1.45; }
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma ul.notiful li a img { border-radius: 10px; }
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma .neimi { float: none; width: auto; margin: 4px 0 0; }
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma .neimi a {
  color: var(--xm-muted) !important;
  font-size: 12px;
  font-weight: 500 !important;
  line-height: 1.4;
  text-align: start !important;
}
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma ._dot_neimi {
  inset-inline-end: 12px;
  top: 50%;
  float: none;
  margin-top: -4px;
  line-height: 0;
}
html[dir="rtl"] .min-h-screen:has(> nav.w-60) header.bg-white .notiInma ._dot_neimi { right: auto; }
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma ._dot_neimi span {
  width: 8px !important;
  height: 8px !important;
  margin: 0;
  background: var(--xm-primary);
  box-shadow: 0 0 0 3px var(--xm-primary-ring);
}

/* Bottom buttons: Show All (outline) and Mark All Read (filled) */
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma .sepratediv {
  display: block;
  border-top: 1px solid var(--xm-border);
  background: var(--xm-surface-2);
}
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma ul.lis_lastogg { margin: 0; padding: 12px 14px; }
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma li.lis_lasto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0 !important;
}
html body .min-h-screen:has(> nav.w-60) header.bg-white .notiInma li.lis_lasto a {
  width: auto;
  float: none;
  padding: 0 !important;
}
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma li.lis_lasto a span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--xm-border-strong);
  border-radius: 10px;
  background: var(--xm-surface);
  color: var(--xm-text);
  font-size: 13px;
  font-weight: 600;
  transition: background var(--xm-ease), border-color var(--xm-ease), box-shadow var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma li.lis_lasto a:hover span {
  border-color: var(--xm-muted);
  background: var(--xm-surface);
  box-shadow: var(--xm-shadow-sm);
}
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma li.lis_lasto a + a span {
  border-color: var(--xm-primary);
  background: var(--xm-primary);
  color: #fff;
}
.min-h-screen:has(> nav.w-60) header.bg-white .notiInma li.lis_lasto a + a:hover span {
  border-color: var(--xm-primary-hover);
  background: var(--xm-primary-hover);
  box-shadow: 0 6px 14px -8px var(--xm-primary);
}
/* Phones: both menus open as a full-width card under the top bar */
@media (max-width: 640px) {
  .min-h-screen:has(> nav.w-60) header.bg-white .notificationlistd .arabicbutton:is(:has(.thimiDroping), :has(.notiInma)) {
    position: fixed;
    top: 64px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
  }
}

/* ==========================================================================
   18. Language menu (opens from the globe button)
   Flag and name on each row; the current language is highlighted with a tick.
   ========================================================================== */
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls:has(.lngclsd) .arabicbutton {
  width: 210px;
  max-width: none;
  margin-top: 10px;
  padding: 6px;
  border: 1px solid var(--xm-border);
  border-radius: 14px;
  background: var(--xm-surface);
  box-shadow: 0 18px 40px -14px rgba(15, 23, 42, .25);
}
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls:has(.lngclsd) .arabicbutton > div {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls:has(.lngclsd) .arabicbutton > div > .border-t:last-child { display: none; }
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls:has(.lngclsd) .langcls { display: block; width: 100%; }
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls:has(.lngclsd) .langcls + .langcls {
  margin-top: 4px;
  border-top: 0;
}
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls:has(.lngclsd) .langcls a {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--xm-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: start;
  text-decoration: none;
  transition: background var(--xm-ease), color var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls:has(.lngclsd) .langcls a img {
  flex-shrink: 0;
  float: none;
  width: 26px;
  max-width: none;
  height: 18px;
  margin: 0 !important;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .10), 0 1px 2px rgba(15, 23, 42, .12);
}
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls:has(.lngclsd) .langcls a .langname { flex: 1; }
.min-h-screen:has(> nav.w-60) header.bg-white .languagecls:has(.lngclsd) .langcls a:hover {
  background: var(--xm-surface-2);
  color: var(--xm-text);
}
/* Current language */
html[lang="en"] .min-h-screen:has(> nav.w-60) header.bg-white .languagecls:has(.lngclsd) .langcls a[href*="/langenglishch/en"],
html[lang="ar"] .min-h-screen:has(> nav.w-60) header.bg-white .languagecls:has(.lngclsd) .langcls a[href*="/langenglishch/ar"] {
  background: var(--xm-primary-soft);
  color: var(--xm-primary);
  font-weight: 700;
}
html[lang="en"] .min-h-screen:has(> nav.w-60) header.bg-white .languagecls:has(.lngclsd) .langcls a[href*="/langenglishch/en"]::after,
html[lang="ar"] .min-h-screen:has(> nav.w-60) header.bg-white .languagecls:has(.lngclsd) .langcls a[href*="/langenglishch/ar"]::after {
  content: "\2713";
  margin-inline-start: auto;
  color: var(--xm-primary);
  font-size: 15px;
  font-weight: 700;
}

/* ==========================================================================
   19. Settings pages (General, Localization, Home Page, Email, Maintenance)
   --------------------------------------------------------------------------
   Append this block to the END of public/css/exams-modern-theme.css.
   CSS only. Each settings section becomes one split card:
   a tinted info panel with a numbered tile on one side, the form on the other.
   Logical properties only, so Arabic (RTL) mirrors automatically.
   ========================================================================== */

/* Page container: less empty space at the top */
.min-h-screen:has(> nav.w-60) main .max-w-7xl:has(> .md\:grid.md\:grid-cols-3) {
  counter-reset: xm-set;
  padding-top: 12px;
  padding-bottom: 40px;
}

/* Divider rows between sections become simple spacing */
.min-h-screen:has(> nav.w-60) main .max-w-7xl > .hidden.sm\:block .py-8 { padding-block: 10px; }
.min-h-screen:has(> nav.w-60) main .max-w-7xl > .hidden.sm\:block .border-t { border-color: transparent; }

/* Section = one split card */
.min-h-screen:has(> nav.w-60) main .max-w-7xl > .md\:grid.md\:grid-cols-3 {
  --xm-sec: var(--xm-primary);
  counter-increment: xm-set;
  overflow: hidden;
  margin-bottom: 0;
  border: 1px solid var(--xm-border);
  border-radius: 18px;
  background: var(--xm-surface);
  box-shadow: var(--xm-shadow);
  transition: border-color var(--xm-ease), box-shadow var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > .md\:grid.md\:grid-cols-3:nth-child(6n+3) { --xm-sec: #7c3aed; }
.min-h-screen:has(> nav.w-60) main .max-w-7xl > .md\:grid.md\:grid-cols-3:nth-child(6n+5) { --xm-sec: #0891b2; }
@media (min-width: 768px) {
  .min-h-screen:has(> nav.w-60) main .max-w-7xl > .md\:grid.md\:grid-cols-3 { gap: 0; }
}
/* The section you are editing gets a soft coloured ring */
.min-h-screen:has(> nav.w-60) main .max-w-7xl > .md\:grid.md\:grid-cols-3:focus-within {
  border-color: color-mix(in srgb, var(--xm-sec) 35%, #fff);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--xm-sec) 10%, transparent), var(--xm-shadow);
}

/* Info panel: numbered tile + title + description */
.min-h-screen:has(> nav.w-60) main .max-w-7xl > .md\:grid.md\:grid-cols-3 > .md\:col-span-1 {
  position: relative;
  padding: 24px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--xm-sec) 9%, #fff) 0%, var(--xm-surface) 75%);
  border-bottom: 1px solid var(--xm-border);
}
@media (min-width: 768px) {
  .min-h-screen:has(> nav.w-60) main .max-w-7xl > .md\:grid.md\:grid-cols-3 > .md\:col-span-1 {
    padding: 28px;
    border-bottom: 0;
    border-inline-end: 1px solid var(--xm-border);
  }
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > .md\:grid.md\:grid-cols-3 > .md\:col-span-1 > div {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  padding: 0;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > .md\:grid.md\:grid-cols-3 > .md\:col-span-1 > div::before {
  content: counter(xm-set, decimal-leading-zero);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--xm-sec) 0%, color-mix(in srgb, var(--xm-sec) 60%, #1e1b4b) 100%);
  box-shadow: 0 10px 20px -10px var(--xm-sec);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > .md\:grid.md\:grid-cols-3 > .md\:col-span-1 h3 {
  margin: 2px 0 0;
  color: var(--xm-text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > .md\:grid.md\:grid-cols-3 > .md\:col-span-1 p {
  margin-top: 6px;
  color: var(--xm-text-2);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Form side: the old inner card loses its own frame */
.min-h-screen:has(> nav.w-60) main .max-w-7xl > .md\:grid.md\:grid-cols-3 > .md\:col-span-2 {
  min-width: 0;
  margin-top: 0;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > .md\:grid.md\:grid-cols-3 > .md\:col-span-2 :is(.shadow, .bg-white.shadow) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > .md\:grid.md\:grid-cols-3 > .md\:col-span-2 .bg-white:not(button) {
  padding: 26px 28px;
  background: var(--xm-surface);
}

/* Fields: full width, short text fields two per row on wide screens */
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 { gap: 20px; }
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 > .sm\:col-span-4 { grid-column: span 6 / span 6; }
@media (min-width: 1024px) {
  .min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 > .sm\:col-span-4:has(> input:is([type="text"], [type="email"], [type="number"], [type="password"], [type="url"], [type="tel"])) {
    grid-column: span 3 / span 3;
  }
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 label.block {
  margin-bottom: 7px;
  color: var(--xm-text);
  font-size: 13px;
  font-weight: 600;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 :is(input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="url"], input[type="tel"]) {
  height: 44px;
  margin-top: 0;
  background: var(--xm-surface-2);
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 textarea {
  min-height: 110px;
  margin-top: 0;
  background: var(--xm-surface-2);
  line-height: 1.55;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 :is(input, textarea):focus { background: var(--xm-surface); }

/* On / off settings (e.g. Enable User Registration) as a clean row with a status chip */
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 > .bg-blue-50.rounded {
  display: grid;
  grid-column: span 6 / span 6;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--xm-border);
  border-radius: 14px;
  background: var(--xm-surface-2);
}
/* Label and status on the left, switch on the right */
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 > .bg-blue-50.rounded > label {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  color: var(--xm-text);
  font-size: 14px;
  font-weight: 600;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 > .bg-blue-50.rounded > .flex { display: contents; }
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 > .bg-blue-50.rounded > .flex > span:first-child {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 > .bg-blue-50.rounded > .flex > .p-inputswitch {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 > .bg-blue-50.rounded > .mt-2 {
  grid-column: 1 / -1;
  margin: 0;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 > .bg-blue-50.rounded .flex > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--xm-border);
  color: var(--xm-text-2);
  font-size: 12px;
  font-weight: 600;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 > .bg-blue-50.rounded .flex > span:first-child::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 > .bg-blue-50.rounded:has(.p-inputswitch-checked) .flex > span:first-child {
  background: var(--xm-success-soft);
  color: var(--xm-success-text);
}

/* Logo / icon preview in a checkerboard frame */
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 .mt-2:has(> img),
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 .mt-2:has(> span.block.h-20) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  margin-top: 4px;
  padding: 18px;
  border: 1px dashed var(--xm-border-strong);
  border-radius: 14px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 .mt-2 > img {
  width: auto;
  max-width: 100%;
  height: 88px;
  object-fit: contain;
  color: var(--xm-muted);
  font-size: 13px;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 .mt-2 > span.block.h-20 {
  width: 100%;
  height: 88px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* "Select a new logo" as an upload button */
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 button.inline-flex.bg-white.border-gray-300 {
  gap: 8px;
  margin-top: 14px;
  padding: 10px 16px;
  border: 1px dashed color-mix(in srgb, var(--xm-primary) 45%, #fff);
  border-radius: 12px;
  background: var(--xm-primary-soft);
  color: var(--xm-primary);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  transition: background var(--xm-ease), border-color var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 button.inline-flex.bg-white.border-gray-300::before {
  content: "\f093";
  font-family: FontAwesome;
  font-size: 14px;
  font-weight: normal;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 button.inline-flex.bg-white.border-gray-300:hover {
  border-color: var(--xm-primary);
  background: color-mix(in srgb, var(--xm-primary) 14%, #fff);
}

/* Save bar */
.min-h-screen:has(> nav.w-60) main .max-w-7xl > .md\:grid.md\:grid-cols-3 .bg-gray-50.justify-end {
  padding: 14px 28px;
  border-top: 1px solid var(--xm-border);
  border-radius: 0;
  background: var(--xm-surface-2);
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > .md\:grid.md\:grid-cols-3 form .bg-gray-50.justify-end button.bg-gray-800 {
  gap: 8px;
  min-width: 120px;
  justify-content: center;
  padding: 11px 22px;
  border-radius: 12px;
  font-size: 14px;
  box-shadow: 0 8px 18px -10px var(--xm-primary);
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > .md\:grid.md\:grid-cols-3 form .bg-gray-50.justify-end button.bg-gray-800::before {
  content: "\f00c";
  font-family: FontAwesome;
  font-size: 13px;
  font-weight: normal;
}
/* "Saved" message that appears after saving, as a green chip */
.min-h-screen:has(> nav.w-60) main .max-w-7xl > .md\:grid.md\:grid-cols-3 .bg-gray-50.justify-end .mr-3 > div {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-end: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--xm-success-soft);
  color: var(--xm-success-text);
  font-size: 13px;
  font-weight: 600;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > .md\:grid.md\:grid-cols-3 .bg-gray-50.justify-end .mr-3 > div::before {
  content: "\f00c";
  font-family: FontAwesome;
  font-size: 12px;
}

/* Maintenance page: description text and action button inside the card */
.min-h-screen:has(> nav.w-60) main .max-w-7xl > .md\:grid.md\:grid-cols-3 > .md\:col-span-2 > .bg-white .max-w-xl {
  max-width: none;
  color: var(--xm-text-2);
  font-size: 14px;
  line-height: 1.6;
}

/* ==========================================================================
   20. Notification bell: open the menu, do not leave the page
   The bell link ignores clicks, so the click reaches the menu toggle around it.
   ========================================================================== */
.min-h-screen:has(> nav.w-60) header.bg-white .notificationlistd > div > div:has(> a > .fa-bell) {
  cursor: pointer;
}
.min-h-screen:has(> nav.w-60) header.bg-white .notificationlistd a:has(> .fa-bell) {
  pointer-events: none;
}
.min-h-screen:has(> nav.w-60) header.bg-white .notificationlistd > div > div:has(> a > .fa-bell):hover > a {
  border-color: var(--xm-primary-line);
  background: var(--xm-primary-soft);
  color: var(--xm-primary);
  transform: translateY(-1px);
}

/* ==========================================================================
   21. Languages page: "Update Instruction" as a normal-size button
   under the table, aligned to the end (right in English, left in Arabic)
   ========================================================================== */
.min-h-screen:has(> nav.w-60) main > .container:has(.card a[href*="examInstruction"]) {
  margin-top: -16px;
  padding-top: 0;
}
.min-h-screen:has(> nav.w-60) main .card:has(a[href*="examInstruction"]) {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.min-h-screen:has(> nav.w-60) main .card:has(a[href*="examInstruction"]) .card-body {
  display: flex;
  justify-content: flex-end;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.min-h-screen:has(> nav.w-60) main .card a[href*="examInstruction"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  margin: 0;
  padding: 12px 22px;
  border: 0;
  border-radius: 12px;
  background: var(--xm-primary);
  box-shadow: 0 10px 20px -10px var(--xm-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  opacity: 1;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.min-h-screen:has(> nav.w-60) main .card a[href*="examInstruction"]::before {
  content: "\f044";
  font-family: FontAwesome;
  font-size: 15px;
  font-weight: normal;
}
.min-h-screen:has(> nav.w-60) main .card a[href*="examInstruction"]:hover {
  background: var(--xm-primary-hover);
  box-shadow: 0 14px 24px -12px var(--xm-primary);
  color: #fff;
  transform: translateY(-1px);
}
.min-h-screen:has(> nav.w-60) main .card a[href*="examInstruction"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--xm-primary-ring);
}

/* ==========================================================================
   22. File manager popup: blurred navy backdrop (the panel itself is styled
   in public/vendor/file-manager/css/file-manager.css)
   ========================================================================== */
body:has(.min-h-screen > nav.w-60) .filediv > iframe {
  padding: 40px;
  background-color: rgba(15, 23, 42, .6) !important;
  border-radius: 0 !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
@media (max-width: 767px) {
  body:has(.min-h-screen > nav.w-60) .filediv > iframe { padding: 12px; }
}

/* EXAM-SELECTBUTTON-FIX-1 (THE DESK on Marc's yes, 4 Nov 2026): the not-selected half of a two-choice switch stays readable */
.min-h-screen:has(> nav.w-60) .p-selectbutton .p-button:not(.p-highlight) { background: var(--xm-surface); border-color: var(--xm-border-strong); color: var(--xm-text); }
.min-h-screen:has(> nav.w-60) .p-selectbutton .p-button:not(.p-highlight):enabled:hover { background: var(--xm-surface-2); border-color: var(--xm-border-strong); color: var(--xm-text); }

/* ==========================================================================
   23. Tables, code chips and settings fields: polish
   --------------------------------------------------------------------------
   Append this block to the END of public/css/exams-modern-theme.css.
   CSS only. Found while checking every admin page on exams.masterstudy.ai;
   the same file works on every site that uses this dashboard.
   ========================================================================== */

/* Tables: the last column (row actions or status) is only as wide as its
   content, so names and titles get the room instead of wrapping onto 3 lines.
   !important is needed because the table sets a fixed 12rem width inline. */
.min-h-screen:has(> nav.w-60) table.vgt-table thead tr:first-child th:last-child {
  width: 1% !important;
  min-width: 0 !important;
  max-width: none !important;
}
.min-h-screen:has(> nav.w-60) table.vgt-table tbody td:last-child:not([colspan]) {
  width: 1%;
  white-space: nowrap;
}

/* Slightly tighter cells and filter row, so the search boxes show their hint */
.min-h-screen:has(> nav.w-60) table.vgt-table th,
.min-h-screen:has(> nav.w-60) table.vgt-table td { padding-inline: 12px; }
.min-h-screen:has(> nav.w-60) table.vgt-table thead tr + tr th { padding: 8px 6px; }
.min-h-screen:has(> nav.w-60) table.vgt-table thead tr + tr th:first-child { padding-inline-start: 12px; }
.min-h-screen:has(> nav.w-60) table.vgt-table thead tr + tr th:last-child { padding-inline-end: 12px; }
.min-h-screen:has(> nav.w-60) .vgt-input,
.min-h-screen:has(> nav.w-60) .vgt-select {
  padding: 0 8px;
  font-size: 12.5px;
}

/* Code chips (quiz_…, en, ar …) fit their text instead of stretching across a wide column */
.min-h-screen:has(> nav.w-60) table.vgt-table .p-tag.w-full {
  width: auto;
  max-width: 100%;
}

/* Settings pages: a short text field is half width only when it sits next to
   another short field (Site name + Tag line, Email fields). A field on its own
   (Home Hero Title, CTA Text) uses the full width instead of leaving a gap. */
@media (min-width: 1024px) {
  .min-h-screen:has(> nav.w-60) main .max-w-7xl .grid.grid-cols-6 > .sm\:col-span-4:has(> input:is([type="text"], [type="email"], [type="number"], [type="password"], [type="url"], [type="tel"])):not(:has(+ .sm\:col-span-4 > input:is([type="text"], [type="email"], [type="number"], [type="password"], [type="url"], [type="tel"]))):not(.sm\:col-span-4:has(> input:is([type="text"], [type="email"], [type="number"], [type="password"], [type="url"], [type="tel"])) + *) {
    grid-column: span 6 / span 6;
  }
}

/* ==========================================================================
   24. Pages that were not designed yet: step tabs on create pages,
       empty tables ("No Records Found") and the Profile page
   --------------------------------------------------------------------------
   Append this block to the END of public/css/exams-modern-theme.css (after 23).
   CSS only, same colours as the rest of the theme.
   ========================================================================== */

/* --- A. Create / edit pages: header with step tabs ------------------------
   (New Assignment, New Practice Set: Details, Settings, Section, Questions, Schedules) */
.min-h-screen:has(> nav.w-60) main .container > .w-full.bg-white.py-5:has(ul li .rounded-full) {
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid var(--xm-border);
  border-radius: var(--xm-radius);
  background: var(--xm-surface);
  box-shadow: var(--xm-shadow);
}
.min-h-screen:has(> nav.w-60) main .container > .w-full.bg-white.py-5:has(ul li .rounded-full) h2 {
  color: var(--xm-text);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.min-h-screen:has(> nav.w-60) main .container > .w-full.bg-white.py-5:has(ul li .rounded-full) h2 + p {
  margin-top: 2px;
  color: var(--xm-text-2);
  font-size: 13px;
}
.min-h-screen:has(> nav.w-60) main .container > .w-full.bg-white.py-5:has(ul li .rounded-full) .h-12 {
  height: auto;
  background: transparent;
}
/* Steps as rounded pills that wrap instead of running off the card */
.min-h-screen:has(> nav.w-60) main .container > .w-full.bg-white.py-5 ul:has(li .rounded-full) {
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.min-h-screen:has(> nav.w-60) main .container > .w-full.bg-white.py-5 ul:has(li .rounded-full) > li {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--xm-border);
  border-radius: 999px;
  background: var(--xm-surface);
  box-shadow: none;
  transition: background var(--xm-ease), border-color var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) main .container > .w-full.bg-white.py-5 ul:has(li .rounded-full) > li > div.flex {
  margin: 0;
  padding: 0;
}
/* the old green underline under each tab */
.min-h-screen:has(> nav.w-60) main .container > .w-full.bg-white.py-5 ul:has(li .rounded-full) > li > div.h-1 { display: none; }
.min-h-screen:has(> nav.w-60) main .container > .w-full.bg-white.py-5 ul:has(li .rounded-full) > li .rounded-full {
  width: 28px;
  height: 28px;
  background: #e8edf4;
  transition: background var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) main .container > .w-full.bg-white.py-5 ul:has(li .rounded-full) > li .rounded-full p {
  color: var(--xm-text-2);
  font-size: 12px;
  font-weight: 700;
}
.min-h-screen:has(> nav.w-60) main .container > .w-full.bg-white.py-5 ul:has(li .rounded-full) > li span {
  margin-inline-start: 10px;
  color: var(--xm-text-2);
  font-size: 13.5px;
  font-weight: 600;
}
/* hover */
.min-h-screen:has(> nav.w-60) main .container > .w-full.bg-white.py-5 ul:has(li .rounded-full) > li:hover {
  border-color: var(--xm-primary-line);
  background: var(--xm-primary-soft);
}
.min-h-screen:has(> nav.w-60) main .container > .w-full.bg-white.py-5 ul:has(li .rounded-full) > li:hover span { color: var(--xm-primary); }
.min-h-screen:has(> nav.w-60) main .container > .w-full.bg-white.py-5 ul:has(li .rounded-full) > li:hover .rounded-full { background: var(--xm-primary-line); }
/* current step */
.min-h-screen:has(> nav.w-60) main .container > .w-full.bg-white.py-5 ul:has(li .rounded-full) > li:has(.rounded-full.bg-green-600) {
  border-color: var(--xm-primary-line);
  background: var(--xm-primary-soft);
}
.min-h-screen:has(> nav.w-60) main .container > .w-full.bg-white.py-5 ul:has(li .rounded-full) > li .rounded-full.bg-green-600 {
  background: var(--xm-primary);
  box-shadow: 0 6px 14px -6px var(--xm-primary);
}
.min-h-screen:has(> nav.w-60) main .container > .w-full.bg-white.py-5 ul:has(li .rounded-full) > li .rounded-full.bg-green-600 p { color: #fff; }
.min-h-screen:has(> nav.w-60) main .container > .w-full.bg-white.py-5 ul:has(li .rounded-full) > li:has(.rounded-full.bg-green-600) span { color: var(--xm-primary); }
/* phone view: the step picker button */
.min-h-screen:has(> nav.w-60) main .container > .w-full.bg-white.py-5 .sm\:hidden button.bg-green-600 {
  border-radius: 12px;
  background: var(--xm-primary);
}

/* --- B. Empty tables: "No Records Found" + Create New ----------------------- */
.min-h-screen:has(> nav.w-60) table.vgt-table td section.max-w-lg { padding-block: 36px 28px; }
.min-h-screen:has(> nav.w-60) table.vgt-table td section.max-w-lg h2 {
  margin: 0;
  color: var(--xm-text);
  font-size: 16px;
  font-weight: 700;
}
.min-h-screen:has(> nav.w-60) table.vgt-table td section.max-w-lg h2::before {
  content: "\f01c";
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 16px;
  background: var(--xm-primary-soft);
  color: var(--xm-primary);
  font-family: FontAwesome;
  font-size: 24px;
  font-weight: normal;
}
.min-h-screen:has(> nav.w-60) table.vgt-table td section.max-w-lg :is(a, button).qt-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  padding: 10px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--xm-primary);
  box-shadow: 0 8px 18px -10px var(--xm-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  transition: background var(--xm-ease);
}
.min-h-screen:has(> nav.w-60) table.vgt-table td section.max-w-lg :is(a, button).qt-btn-sm::before {
  content: "\f067";
  font-family: FontAwesome;
  font-size: 12px;
  font-weight: normal;
}
.min-h-screen:has(> nav.w-60) table.vgt-table td section.max-w-lg :is(a, button).qt-btn-sm:hover {
  background: var(--xm-primary-hover);
  color: #fff;
}

/* --- C. Profile page: same split cards as the Settings pages ---------------
   (here each section sits inside one extra wrapper, so section 19 did not reach it) */
.min-h-screen:has(> nav.w-60) main .max-w-7xl:has(> div > .md\:grid.md\:grid-cols-3) {
  counter-reset: xm-set;
  padding-top: 12px;
  padding-bottom: 40px;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > div > .hidden.sm\:block .py-8 { padding-block: 10px; }
.min-h-screen:has(> nav.w-60) main .max-w-7xl > div > .hidden.sm\:block .border-t { border-color: transparent; }
.min-h-screen:has(> nav.w-60) main .max-w-7xl > div > .md\:grid.md\:grid-cols-3.mt-10 { margin-top: 0; }
/* a wrapper with no section left in it (only a divider) takes no space */
.min-h-screen:has(> nav.w-60) main .max-w-7xl:has(> div > .md\:grid.md\:grid-cols-3) > div:not(:has(.md\:grid.md\:grid-cols-3)) { display: none; }
.min-h-screen:has(> nav.w-60) main .max-w-7xl > div:nth-child(3n+2) > .md\:grid.md\:grid-cols-3 { --xm-sec: #7c3aed; }
.min-h-screen:has(> nav.w-60) main .max-w-7xl > div:nth-child(3n+3) > .md\:grid.md\:grid-cols-3 { --xm-sec: #0891b2; }
.min-h-screen:has(> nav.w-60) main .max-w-7xl > div > .md\:grid.md\:grid-cols-3 {
  --xm-sec: var(--xm-primary);
  counter-increment: xm-set;
  overflow: hidden;
  margin-bottom: 0;
  border: 1px solid var(--xm-border);
  border-radius: 18px;
  background: var(--xm-surface);
  box-shadow: var(--xm-shadow);
  transition: border-color var(--xm-ease), box-shadow var(--xm-ease);
}
@media (min-width: 768px) {
  .min-h-screen:has(> nav.w-60) main .max-w-7xl > div > .md\:grid.md\:grid-cols-3 { gap: 0; }
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > div > .md\:grid.md\:grid-cols-3:focus-within {
  border-color: color-mix(in srgb, var(--xm-sec) 35%, #fff);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--xm-sec) 10%, transparent), var(--xm-shadow);
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > div > .md\:grid.md\:grid-cols-3 > .md\:col-span-1 {
  position: relative;
  padding: 24px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--xm-sec) 9%, #fff) 0%, var(--xm-surface) 75%);
  border-bottom: 1px solid var(--xm-border);
}
@media (min-width: 768px) {
  .min-h-screen:has(> nav.w-60) main .max-w-7xl > div > .md\:grid.md\:grid-cols-3 > .md\:col-span-1 {
    padding: 28px;
    border-bottom: 0;
    border-inline-end: 1px solid var(--xm-border);
  }
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > div > .md\:grid.md\:grid-cols-3 > .md\:col-span-1 > div {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  padding: 0;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > div > .md\:grid.md\:grid-cols-3 > .md\:col-span-1 > div::before {
  content: counter(xm-set, decimal-leading-zero);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--xm-sec) 0%, color-mix(in srgb, var(--xm-sec) 60%, #1e1b4b) 100%);
  box-shadow: 0 10px 20px -10px var(--xm-sec);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > div > .md\:grid.md\:grid-cols-3 > .md\:col-span-1 h3 {
  margin: 2px 0 0;
  color: var(--xm-text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > div > .md\:grid.md\:grid-cols-3 > .md\:col-span-1 p {
  margin-top: 6px;
  color: var(--xm-text-2);
  font-size: 13.5px;
  line-height: 1.55;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > div > .md\:grid.md\:grid-cols-3 > .md\:col-span-2 {
  min-width: 0;
  margin-top: 0;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > div > .md\:grid.md\:grid-cols-3 > .md\:col-span-2 :is(.shadow, .bg-white.shadow) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > div > .md\:grid.md\:grid-cols-3 > .md\:col-span-2 .bg-white:not(button) {
  padding: 26px 28px;
  background: var(--xm-surface);
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > div > .md\:grid.md\:grid-cols-3 .bg-gray-50.justify-end {
  padding: 14px 28px;
  border-top: 1px solid var(--xm-border);
  border-radius: 0;
  background: var(--xm-surface-2);
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > div > .md\:grid.md\:grid-cols-3 form .bg-gray-50.justify-end button.bg-gray-800 {
  gap: 8px;
  min-width: 120px;
  justify-content: center;
  padding: 11px 22px;
  border-radius: 12px;
  font-size: 14px;
  box-shadow: 0 8px 18px -10px var(--xm-primary);
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > div > .md\:grid.md\:grid-cols-3 form .bg-gray-50.justify-end button.bg-gray-800::before {
  content: "\f00c";
  font-family: FontAwesome;
  font-size: 13px;
  font-weight: normal;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > div > .md\:grid.md\:grid-cols-3 .bg-gray-50.justify-end .mr-3 > div {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-end: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--xm-success-soft);
  color: var(--xm-success-text);
  font-size: 13px;
  font-weight: 600;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > div > .md\:grid.md\:grid-cols-3 .bg-gray-50.justify-end .mr-3 > div::before {
  content: "\f00c";
  font-family: FontAwesome;
  font-size: 12px;
}
.min-h-screen:has(> nav.w-60) main .max-w-7xl > div > .md\:grid.md\:grid-cols-3 > .md\:col-span-2 > .bg-white .max-w-xl {
  max-width: none;
  color: var(--xm-text-2);
  font-size: 14px;
  line-height: 1.6;
}