/* ==========================================================================
   ID Card Creator - theme
   Keeps the look of the original app: dark body, green heading bar, blue tabs.
   ========================================================================== */

:root {
  --heading: #0b7a3d;          /* the original used plain "green" */
  --heading-dark: #075c2d;
  --body: #141414;
  --panel: #0e0e0e;
  --tab: rgb(0, 117, 250);
  --tab-dark: #06c;
  --line: #262626;
}

html, body { height: 100%; }
body {
  background: var(--body);
  font-size: 14px;
  overflow-x: hidden;
}

/* ------------------------------------------------------------------ topbar */
:root { --topbar-h: 52px; }
.idc-topbar {
  background: var(--heading) !important;
  border-bottom: 1px solid rgba(0,0,0,.4);
  padding: .25rem .75rem;
  min-height: var(--topbar-h);
}
/* short laptop screens (1366 x 768 and the like): a thinner app bar leaves more height for the card */
@media (max-height: 820px) {
  :root { --topbar-h: 40px; }
  .idc-topbar { padding-top: 0; padding-bottom: 0; }
  .idc-topbar .nav-link { padding-top: .2rem; padding-bottom: .2rem; }
  .idc-topbar .navbar-brand { padding-top: 0; padding-bottom: 0; font-size: 1.1rem; }
}
.idc-topbar .navbar-brand { color: #fff; font-weight: 600; letter-spacing: .2px; }
/* Super Admin only: maintenance mode is on (server move) */
.idc-maint-bar { background: #b45309; color: #fff; font-size: 13px; padding: 4px 12px; text-align: center; }
.idc-maint-bar a { color: #fff; text-decoration: underline; margin-left: 6px; }
/* a small red dot on a top-bar tab that needs attention (Backup) */
.nav-alert-dot.nav-alert-amber { background: #f5a524; }
.nav-alert-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; vertical-align: top; margin-left: 1px; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
.idc-topbar .nav-link { color: rgba(255,255,255,.85); padding: .35rem .7rem; border-radius: 6px; }
.idc-topbar .nav-link:hover, .idc-topbar .nav-link.active { color: #fff; background: rgba(0,0,0,.18); }
.idc-topbar .navbar-toggler { border-color: rgba(255,255,255,.4); }
.idc-main { padding: 1rem 1.25rem 3rem; }

.idc-toasts { position: fixed; right: 14px; bottom: 14px; z-index: 20000; display: flex; flex-direction: column; gap: 8px; }
.toast-item {
  background: #1f2937; color: #fff; border-left: 4px solid var(--tab);
  padding: 10px 14px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.5);
  min-width: 220px; max-width: 380px; animation: slideIn .18s ease-out;
}
.toast-item.err { border-left-color: #dc3545; }
.toast-item.ok  { border-left-color: #198754; }
@keyframes slideIn { from { transform: translateX(20px); opacity: 0 } to { transform: none; opacity: 1 } }

/* ------------------------------------------------------------------- login */
.idc-blank { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh;   /* dvh = the phone's visible height, so the login card sits in the real middle */
  background: radial-gradient(1200px 600px at 50% -10%, #10432a 0%, #0b0b0b 60%); }
.login-wrap { width: 100%; padding: 1rem; display: grid; place-items: center; }
.login-card { width: 100%; max-width: 380px; background: #16181d; border: 1px solid #242832;
  border-radius: 14px; padding: 28px 26px; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
/* login brand title: Nunito ExtraBold (SIL Open Font License), kept in the app so it works without Google Fonts */
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('../webfonts/nunito-800.woff2') format('woff2'); }
/* Nepali / Hindi letters look about a quarter smaller than English at the same size (room for the marks above and below):
   this face is used for Devanagari characters only, 25% bigger - English text keeps its own font and size */
@font-face { font-family: 'IDC Devanagari'; size-adjust: 125%; unicode-range: U+0900-097F, U+1CD0-1CFF, U+A8E0-A8FF;
  src: local('Nirmala UI'), local('NirmalaUI'), local('Noto Sans Devanagari'), local('NotoSansDevanagari-Regular'),
       local('Kohinoor Devanagari'), local('Devanagari Sangam MN'), local('Mangal'); }
.login-logo { width: 84px; height: 84px; }
.login-title { font: 800 1.5rem 'Nunito', system-ui, sans-serif; color: #fff; }
.idc-topbar .brand-logo { width: 32px; height: 32px; }
/* the app's name, in the login title's font (the name is fixed here, not taken from config.php) */
.idc-topbar .brand-title { font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; letter-spacing: .2px; }

/* -------------------------------------------------------------- dashboard */
.stat-box { background: #17191f; border: 1px solid var(--line); border-radius: 10px; padding: 8px 4px; }
.stat-box strong { display: block; font-size: 20px; line-height: 1.1; }
.stat-box span { color: #9ca3af; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.stat-box.big { padding: 18px; }
.stat-box.big strong { font-size: 30px; }
.project-card { background: #16181d; border: 1px solid var(--line); }
.project-card:hover { border-color: #333; }
.empty-state { text-align: center; padding: 60px 20px; border: 1px dashed #333; border-radius: 14px; }
.empty-state i { font-size: 54px; color: #4ade80; }

/* =========================================================================
   DESIGNER
   ========================================================================= */
.designer { display: flex; height: calc(100vh - var(--topbar-h)); overflow: hidden; margin: -1rem -1.25rem -3rem; }

/* ------------------------------------------------------------ left panel */
.dp-left {
  width: 26%; min-width: 320px; max-width: 480px;
  background: var(--body); border-right: 1px solid var(--line);
  overflow-y: auto; overflow-x: hidden;
}
.dp-left::-webkit-scrollbar { width: 8px; }
.dp-left::-webkit-scrollbar-thumb { background: #333; border-radius: 8px; }

.dp-project-name {
  background: var(--heading); color: #fff; padding: 6px 10px;
  font-weight: 600; display: flex; align-items: center; position: sticky; top: 0; z-index: 5;
}

.tab-btns {
  background: var(--heading); height: 37px; line-height: 30px; padding-left: 6px;
  display: flex; align-items: center; gap: 3px; width: 100%;
}
.tablink, .tablink2 {
  background: var(--tab); color: #fff; cursor: pointer; display: inline-block;
  min-width: 80px; padding: 3px 10px; text-align: center; font-size: 13px;
  border-radius: 4px 4px 0 0; line-height: 20px; user-select: none;
}
.tablink:hover, .tablink2:hover { background: #1e90ff; }
.atab, .atab2 { background: var(--heading-dark); }
/* "Editing: Front | Back": the side being edited is white with a tick, the other an outline */
.side-switch { gap: 0; padding: 4px 0; align-items: center; }
.side-switch .tablink2 { background: transparent; border: 1.5px solid #fff; border-radius: 0; color: #fff; padding: 3px 14px; }
.side-switch .tablink2:first-of-type { border-radius: 6px 0 0 6px; }
.side-switch .tablink2:last-of-type { border-radius: 0 6px 6px 0; border-left: 0; }
.side-switch .tablink2:hover { background: rgba(255,255,255,.15); }
.side-switch .tablink2.atab2 { background: #fff; color: #0a5c22; font-weight: 600; }
.side-switch .tablink2.atab2::before { content: "\2713  "; }
.side-switch .tablink2.side-dim:not(.atab2) { color: rgba(255,255,255,.55); }
/* long checkbox lists (project access, who can open it): search + scrolling box */
.picker-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.picker-head input { max-width: 240px; }
.picker-list { max-height: 240px; overflow-y: auto; border: 1px solid #3a3f45; border-radius: 6px; padding: 6px 10px; }
.picker-list .form-check { margin: 3px 0; }
.picker-group { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; font-size: .9rem; cursor: pointer; }
.picker-sub { padding-left: 22px; }
/* project bundle working in the background: a chip in the corner */
.bundle-chip { position: fixed; right: 16px; bottom: 16px; z-index: 1080; display: flex; align-items: center; gap: 8px;
  background: #212529; border: 1px solid #495057; border-radius: 22px; padding: 7px 8px 7px 14px; color: #e9ecef;
  font-size: 13px; box-shadow: 0 6px 22px rgba(0,0,0,.5); cursor: pointer; }
.bundle-chip.ready { background: #146c43; border-color: #198754; }
.bundle-chip .bc-bar { width: 70px; height: 5px; background: #343a40; border-radius: 3px; overflow: hidden; }
.bundle-chip .bc-bar i { display: block; height: 100%; background: #0d6efd; }
.bundle-chip .btn-close { font-size: 10px; }
/* the preview's Back while there is no back to show */
/* exactly the card's size: the last card's size when there was one (set in doRender), else the card's fit rule */
.preview-back-msg { width: min(100cqw, calc(100cqh * var(--card-ar, .64))); aspect-ratio: var(--card-ar, .64); background: #1a1d20;
  border: 2px dashed #495057; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  text-align: center; color: #adb5bd; font-size: 16px; line-height: 1.4; }
.preview-back-msg[hidden] { display: none; }
.preview-wrap.back-msg > .preview-loading { display: none !important; }
.preview-wrap.back-msg { box-shadow: none; }
/* the back's settings while "Back side" is off */
.back-off > :not(:first-child) { opacity: .45; }
.options, .options_back { padding: 2px 4px 40px; }

.collapsible {
  border-radius: 0; color: #fff; cursor: pointer; padding: 6px 10px; width: 100%;
  border: none; text-align: left; outline: none; font-size: 14px; margin-top: 2px;
  background: var(--tab); position: relative;
}
.collapsible:hover { background: #1e90ff; }
.collapsible:after { content: "+"; color: #fff; font-weight: 700; float: right; }
.collapsible.active { background: var(--heading); }
.collapsible.active:after { content: "\2212"; }
.content {
  padding: 0 12px; max-height: 0; overflow: hidden; transition: max-height .22s ease-out;
  background: #080808; border-left: 3px solid var(--heading);
}
.content.open { max-height: 4000px; padding: 10px 12px 16px; }

.ogrid { display: block; margin-bottom: 8px; }
.rangelist { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.rangelist label { width: 100%; }
.rangelist input[type=range] { flex: 1 1 120px; width: auto; min-width: 80px; }
.rangelist .num, input.num {
  width: 74px; flex: 0 0 74px; background: #1b1b1b; border: 1px solid #333;
  color: #eee; border-radius: 6px; padding: 2px 6px; font-size: 12px;
}
output { vertical-align: top; color: #9ca3af; font-size: 12px; }
.content hr { border-color: #2a2a2a; margin: 10px 0; }
.form-text { color: #7c8598 !important; font-size: 11px; }
.form-label.small, label.small { font-size: 12px; color: #cfd3dc; }
select.font_select { min-width: 100px; }
.content .form-control, .content .form-select { background: #1b1b1b; border-color: #333; color: #eee; }

/* "Hide data" chips instead of a select2 box */
.chip-select { display: flex; flex-wrap: wrap; gap: 4px; }
.info-tip { color: #868e96; cursor: help; font-size: .9em; margin-left: 2px; }
.more-toggle { display: inline-block; margin-top: 8px; color: #6ea8fe; text-decoration: none; }
.more-toggle .bi { transition: transform .15s; display: inline-block; }
.more-toggle.open .bi { transform: rotate(90deg); }
.info-tip:hover, .info-tip:focus { color: #ced4da; outline: none; }
.chip {
  background: #1f2229; color: #9ca3af; border: 1px solid #333; border-radius: 999px;
  padding: 3px 10px; font-size: 12px; line-height: 1.4;
}
.chip.on { background: var(--tab); border-color: var(--tab); color: #fff; }
.chip:hover { border-color: #4b5563; }

.extra-block {
  border: 1px solid #4b5563; padding: 8px 10px 10px; margin: 8px 0; border-radius: 6px;
  background: #0d0d0d;
}
.extra-block legend {
  color: #7dd3fc !important; font-size: 12px; padding: 0 6px; width: auto;
  border: none; float: none; display: flex; gap: 6px; align-items: center;
}
.extra-block .token { color: #7dd3fc; text-decoration: none; margin-right: 6px; }
.extra-block .token:hover { text-decoration: underline; }
.qr-preview { width: 54px; height: 54px; background: #fff; border-radius: 4px; padding: 2px; }

/* ----------------------------------------------------------- right panel */
.dp-right { flex: 1; display: flex; flex-direction: column; background: var(--panel); overflow: hidden; min-width: 0; }
.dp-right .tab-btns { flex-wrap: nowrap; overflow-x: auto; }
/* tab names stay on one line; each tab is as wide as its text */
.dp-right .tab-btns .tablink { white-space: nowrap; flex-shrink: 0; width: auto !important; }
.dp-right .tab-btns .tools-btn { height: 30px; font-size: 13px; line-height: 16px; margin: 2px 6px; }
#types { display: inline-block; width: auto; max-width: 160px; height: 29px; margin: 3px 6px 3px 0; padding: 1px 28px 1px 6px; font-size: 13px; text-overflow: ellipsis; }   /* right padding: room for the arrow */
.dp-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: auto; padding: 12px; }
.dp-panel[hidden] { display: none; }

.preview-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 10px; background: #121212; border: 1px solid var(--line); border-radius: 8px;
  margin-bottom: 10px;
}
/* big screens: the toolbar as it always was; the compact-only bits are hidden */
.preview-toolbar .pt-compact { display: none; }
/* compact toolbar - one slim line, icons, a ⋯ menu - on short screens (14"/15" laptops) and in windows too narrow
   for the toolbar above to fit on one line; IDC.layout sets the class */
body.toolbar-compact .preview-toolbar { gap: 6px; padding: 5px 8px; margin-bottom: 6px; }
body.toolbar-compact .preview-toolbar .pt-full { display: none; }
body.toolbar-compact .preview-toolbar .pt-compact { display: inline-block; }
body.toolbar-compact .preview-toolbar .dropdown-toggle::after { display: none; }
body.toolbar-compact #ptMoreMenu .form-check { margin-bottom: .25rem !important; }
.preview-stage {
  flex: 1; min-height: 0; overflow: auto;
  background: #111;
  display: flex; align-items: flex-start; justify-content: center; padding: 4px 12px; min-height: 220px;   /* was 480: on a laptop screen it pushed the card's bottom off-screen */
  border: 1px solid var(--line); border-radius: 8px;
  position: relative;
  /* makes this box's own real, computed size queryable by the image below
     via cqw/cqh units - so the card's max size tracks exactly how much
     room this panel actually has, instead of a fixed guess subtracted
     from the whole browser window */
  container-type: size;
}
/* the wrap's SIZE always comes straight from the browser's own layout of the
   img (max-width/max-height below) - never from JS math - so a settings edit
   that swaps img.src can never change how big the card appears on screen.
   Manual zoom is a separate transform layer on top, touched only by the
   zoom buttons/fit button, never by a routine render. */
/* Tools menu: groups in one column (a line between them), two columns with headings when the window is short */
.tools-menu { overflow-y: auto; }
.tools-menu .tools-group + .tools-group { border-top: 1px solid var(--bs-border-color-translucent); margin-top: .35rem; padding-top: .35rem; }
.tools-menu .tools-h { display: none; padding: .3rem 1rem .15rem; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); }
.tools-menu.tools-2col { columns: 2; column-gap: .5rem; width: 500px; }
.tools-menu.tools-2col .tools-group { break-inside: avoid; border-top: 0; margin-top: 0; padding-top: 0; }
.tools-menu.tools-2col .tools-h { display: block; }
.tools-menu.tools-2col .dropdown-item { white-space: normal; }
.badge-acrylic { background: #6f42c1; color: #fff; font-weight: 600; vertical-align: middle; }
.acr-strip { position: absolute; left: 12px; bottom: 10px; z-index: 6; line-height: 1.4; display: flex; gap: 8px; align-items: center; }
.acr-name { font-size: .8rem; font-weight: 600; color: #ffc800; background: rgba(0,0,0,.55); padding: 3px 8px; border-radius: 6px; }
.acr-cut { font-size: .8rem; font-weight: 600; color: #fff; background: #b4780a; border: 0; padding: 3px 9px; border-radius: 6px; }
.preview-wrap {
  position: relative; line-height: 0; box-shadow: 0 12px 40px rgba(0,0,0,.6);
  transform-origin: top center; transition: none;
}
.place-mode .preview-wrap img { cursor: crosshair; }
.preview-wrap img {
  display: block;
  /* fallback for browsers without container query support (Safari <16,
     older Chrome/Firefox) - the previous fixed-viewport-guess approach */
  max-width: 100%; max-height: calc(100vh - 300px);
  width: auto; height: auto;
}
@supports (container-type: size) {
  .preview-wrap img {
    max-width: 100cqw; max-height: 100cqh;
  }
}
/* preview loading: a card-shaped placeholder until the first card arrives, then (next / previous student)
   the old card dims under a spinner and the student's name until the new one is ready */
.preview-wrap:not(.has-card) { box-shadow: none; }
.preview-wrap:not(.has-card) > img, .preview-loading { display: none; }
.preview-wrap:not(.has-card) > .preview-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  height: 420px; height: min(480px, 90cqh); max-width: 100%; padding: 12px; text-align: center;
  border: 2px dashed #3a3f48; border-radius: 10px; color: #aab1bd; font-size: 13px; line-height: 1.3;
}
.preview-wrap.has-card.is-loading > img { opacity: .45; }
.preview-wrap.has-card.is-loading > .preview-loading {
  pointer-events: none;   /* only a sign: the card and the panel stay usable while it redraws */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  position: absolute; inset: 0; z-index: 5; color: #fff; font-size: 13px; line-height: 1.3; text-shadow: 0 1px 3px #000;
}
.pl-skel { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pl-skel i { width: 54px; height: 66px; background: #22262e; border-radius: 4px; }
.pl-skel b { width: 90px; height: 8px; background: #22262e; border-radius: 4px; }
.pl-skel b + b { width: 70px; }
.has-card .pl-skel { display: none; }
.pl-spin { width: 28px; height: 28px; border: 3px solid #3a3f48; border-top-color: #4ea1ff; border-radius: 50%; animation: pl-spin .8s linear infinite; }
.preview-loading.is-error .pl-spin { display: none; }
@keyframes pl-spin { to { transform: rotate(360deg); } }
/* actual size (1:1): a wider/taller card scrolls instead of being cut off on the left */
.preview-stage.actual { justify-content: safe center; }
.preview-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(13,110,253,.9); color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5; box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.preview-nav:hover { background: #0d6efd; }
.preview-nav:disabled { opacity: .35; cursor: default; }
.preview-nav-prev { left: 14px; }
.preview-nav-next { right: 14px; }
.preview-toolbar-toggle {
  background: none; border: none; color: #6b7280; font-size: 12px; padding: 2px 6px;
  cursor: pointer; display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.preview-toolbar-toggle:hover { color: #9ca3af; }
.preview-toolbar-toggle i { transition: transform .15s ease; }
.preview-toolbar-toggle.collapsed i { transform: rotate(180deg); }
/* collapsing hides every OTHER toolbar control, but never the toggle
   button itself - it lives inside the same bar it collapses, so it must
   stay visible or there would be no way to bring the controls back */
.preview-toolbar.collapsed > *:not(.preview-toolbar-toggle) { display: none; }
.preview-toolbar.collapsed { padding-top: 4px; padding-bottom: 4px; justify-content: flex-end; }

/* -------------------------------------------------------------- admin overview */
.admin-kpi-num { font-size: 28px; font-weight: 700; line-height: 1.1; }
.admin-kpi-label { color: #9ca3af; font-size: 12.5px; margin-top: 2px; }
.admin-kpi-sub { color: #6b7280; font-size: 11.5px; margin-top: 6px; }
.admin-trend { display: flex; align-items: flex-end; gap: 4px; height: 100px; padding-top: 10px; }
.admin-trend-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.admin-trend-bar-fill { width: 100%; max-width: 22px; background: linear-gradient(180deg, #4dabf7, #1c7ed6); border-radius: 3px 3px 0 0; }
.admin-trend-bar-label { font-size: 10px; color: #6b7280; margin-top: 4px; }

/* -------------------------------------------------------------- welcome note (once after signing in) */
.welcome-note {
  position: fixed; right: 16px; top: 58px; z-index: 2000; display: flex; align-items: center; gap: 10px;
  background: #1f2429; border: 1px solid #39424a; border-radius: 10px; padding: 9px 16px 9px 10px; color: #e5e7eb;
  box-shadow: 0 6px 18px rgba(0,0,0,.45); opacity: 0; pointer-events: none;
}
.welcome-note.show { animation: welcomeNote 6.2s ease-in-out forwards; }   /* fully shown for 5 seconds */
.welcome-note b { display: block; font-size: 13px; font-weight: 600; }
.welcome-note small { display: block; font-size: 11px; color: #9ca3af; margin-top: 2px; }
.welcome-logo { width: 30px; height: 30px; border-radius: 50%; }
@keyframes welcomeNote { 0% { opacity: 0; } 8% { opacity: 1; } 89% { opacity: 1; } 100% { opacity: 0; } }
.preview-canvas { position: absolute; inset: 0; pointer-events: none; }
.guide { position: absolute; background: #22d3ee; opacity: .8; display: none; pointer-events: none; }
.guide-t { left: 0; right: 0; height: 1px; }
.guide-l { top: 0; bottom: 0; width: 1px; }
.guide-x { top: 0; bottom: 0; width: 1px; background: #f472b6; }
.guide-y { left: 0; right: 0; height: 1px; background: #f472b6; }
.safe-area-box { position: absolute; border: 1px dashed #fb923c; background: transparent; pointer-events: none; display: none; box-sizing: border-box; }
.safe-area-label {
  position: absolute; display: none; pointer-events: none; white-space: nowrap;
  font-size: 10px; line-height: 1.4; color: #fff; background: rgba(251,146,60,.9);
  padding: 1px 4px; border-radius: 3px; font-family: system-ui, sans-serif;
}
.center-guide { position: absolute; background: #34d399; opacity: .85; pointer-events: none; display: none; }
.center-guide-h { left: 0; right: 0; height: 1px; }
.center-guide-v { top: 0; bottom: 0; width: 1px; }
/* wrap width of the data block (preview only): cyan, red when it cannot work */
.wrap-guide { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed #22d3ee; pointer-events: none; display: none; }
.wrap-guide.bad { border-left-color: #ef4444; }
.wrap-guide-label {
  position: absolute; display: none; pointer-events: none; white-space: nowrap;
  font-size: 10px; line-height: 1.4; color: #000; background: rgba(34,211,238,.95);
  padding: 1px 5px; border-radius: 3px; font-family: system-ui, sans-serif; transform: translateX(-50%);
}
.wrap-guide-label.bad { background: rgba(239,68,68,.95); color: #fff; }
@keyframes btnPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,53,69,.7); } 50% { box-shadow: 0 0 0 8px rgba(220,53,69,0); } }
.btn-pulse { animation: btnPulse 0.6s ease-in-out 3; }

/* -------------------------------------------------------------- dashboard */
.dash-layout { display: flex; gap: 20px; align-items: flex-start; }
.dash-left {
  flex: 0 0 260px; display: flex; flex-direction: column; gap: 10px;
  position: sticky; top: 12px;
}
.dash-right { flex: 1 1 auto; min-width: 0; }
@media (max-width: 900px) {
  .dash-layout { flex-direction: column; }
  .dash-left { flex: 1 1 auto; width: 100%; position: static; }
}

.dash-stat {
  background: #14171f; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 16px;
}
.dash-stat-num { font-size: 24px; font-weight: 700; line-height: 1.15; }
.dash-stat-label { font-size: 12px; color: #9ca3af; margin-top: 2px; }

.dash-sub { padding: 12px 16px; }
.dash-sub-line { font-size: 13.5px; }
.dash-sub-range { border-top: 1px solid var(--line); padding-top: 8px; }

.proj-search-wrap { position: relative; flex: 1 1 160px; min-width: 140px; max-width: 420px; }
/* Super Admin: "Web user" / "Phone app user" search boxes - one user's projects; small starting widths keep the
   toolbar on one line down to a half-screen window, wider screens let them grow */
.uf-box { position: relative; flex: 1 1 165px; min-width: 145px; max-width: 230px; }
.uf-input.uf-chosen { border-color: #4f8cff; color: #8fbaff; background: rgba(79,140,255,.12); }
.uf-box[data-all] .uf-input::placeholder { color: var(--bs-body-color); opacity: .85; }   /* "All web users" reads as the current choice, not a hint */
.uf-menu { min-width: 280px; max-width: 340px; margin-top: 4px; }
.uf-box[data-kind="app"] .uf-menu { right: 0; left: auto; }   /* the right-hand box: its list opens leftwards, never past the screen edge */
.uf-item { padding: 6px 12px; white-space: normal; }
.uf-name { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.uf-sub { font-size: 12px; opacity: .7; }
/* Users Log -> Sign-ins: a sign-in from outside India */
.si-table tr.si-abroad > td { background: rgba(245,165,36,.10); }
.uf-item.uf-off .uf-name { opacity: .55; }
.uf-count { font-size: 12px; color: #8b93a3; padding: 5px 12px; border-top: 1px solid var(--line); }
.proj-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: #6b7280; font-size: 14px; pointer-events: none;
}
.proj-search-input {
  padding-left: 34px; border-radius: 20px; background: #14171f;
  border: 1px solid var(--line); transition: border-color .15s ease, box-shadow .15s ease;
}
.proj-search-input:focus {
  border-color: #4f8cff; box-shadow: 0 0 0 3px rgba(79,140,255,.2);
  background: #171b26;
}

.proj-list-head {
  display: flex; align-items: center; gap: 12px; padding: 6px 10px;
  font-size: 11px; text-transform: uppercase; color: #6b7280; letter-spacing: .03em;
  border-bottom: 1px solid var(--line);
}
.proj-list-row {
  display: flex; align-items: center; gap: 12px; padding: 10px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
  cursor: pointer; border-radius: 8px; margin-bottom: 2px;
  transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.proj-list-row:hover, .proj-list-row:focus-visible {
  background: #1b2130; transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  outline: none;
}
.proj-list-row:active { transform: translateY(0); }
.proj-col-thumb { flex: 0 0 44px; }
.proj-col-name { flex: 1 1 220px; min-width: 180px; }
.proj-col-updated { flex: 0 0 110px; }
.proj-col-creator { flex: 0 0 130px; }
.proj-col-actions { flex: 0 0 auto; margin-left: auto; }
.proj-col-actions { cursor: default; }
.proj-thumb {
  width: 40px; height: 40px; object-fit: cover; border-radius: 6px;
  background: #1b1e27; border: 1px solid var(--line);
}
.proj-thumb-empty { display: flex; align-items: center; justify-content: center; color: #4b5563; font-size: 16px; }
#quickStartChevron { transition: transform .15s ease; }

/* one shared column definition for the list header and every row, so each
   heading sits directly above its data - the Action column has a fixed
   width, so its buttons can't resize the other columns (phones keep the
   stacked layout: the header is hidden there) */
/* People / Selected / Photos: own columns; on a phone (stacked rows) each number says what it is */
.proj-col-num { font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) {
  .proj-list-row .proj-col-num { font-size: 13px; color: #9ca3af; }
  .proj-list-row .proj-col-num::after { content: " " attr(data-label); }
}
@media (min-width: 768px) {
  .proj-list-head, .proj-list-row {
    display: grid;
    grid-template-columns: 44px minmax(150px, 3fr) 64px 70px 64px 100px 120px 262px;
    column-gap: 0;
  }
  /* a table: a header row with its own background, thin column lines, numbers right-aligned under their heading */
  .proj-list-head { background: #191d21; border-bottom: 1px solid #39424a; border-radius: 6px 6px 0 0; padding: 7px 0; }
  .proj-list-row { padding: 8px 0; border-radius: 0; margin-bottom: 0; }
  .proj-list-head > *, .proj-list-row > * { padding: 0 10px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .proj-list-head > * + *, .proj-list-row > * + * { border-left: 1px solid #22282d; }
  .proj-list-head > .proj-col-thumb + *, .proj-list-row > .proj-col-thumb + * { border-left: 0; }
  .proj-list-row .proj-col-actions { flex-direction: row; align-items: center; }
  .proj-col-num { text-align: right; align-items: flex-end; }
  .proj-list-row .proj-col-num { font-size: 13px; }
  .proj-list-head > *, .proj-list-row > * { min-width: 0; }
  .proj-list-row .proj-col-actions, .proj-list-head .proj-col-actions { margin-left: 0; }
  .proj-col-name, .proj-col-creator { overflow-wrap: anywhere; }
}
@media (min-width: 1300px) {
  .proj-list-head, .proj-list-row {   /* the Action column fits all seven buttons on one line */
    grid-template-columns: 50px minmax(180px, 3fr) 64px 72px 64px 100px 120px 318px;
  }
}
.preview-info { color: #9ca3af; }

.table-scroll { max-height: calc(100vh - 210px); overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.table-scroll table { margin-bottom: 0; }
.table-dark { --bs-table-bg: #121212; --bs-table-striped-bg: #171717; }
/* selected rows (checked for generation): solid wine, white text 10.1:1 (unlike the blue buttons); boxes a shade darker with a light edge */
#reportBody tr.row-selected > td, #selBody tr.row-selected > td { background: #7a2048; color: #fff; }
#reportBody tr.row-selected > td input[type="text"], #reportBody tr.row-selected > td .sel-cell, #selBody tr.row-selected > td input[type="text"], #selBody tr.row-selected > td .sel-cell { background: #621a3a; color: #fff; border-color: #f0a3c4; }
#reportBody tr.row-selected:hover > td, #selBody tr.row-selected:hover > td { background: #8c2654; }
/* delete (x) button on a selected row: white outline and white x; filled white on hover */
#reportBody tr.row-selected .btn-outline-danger { color: #fff; border-color: #fff; }
#reportBody tr.row-selected .btn-outline-danger:hover,
#reportBody tr.row-selected .btn-outline-danger:focus-visible { background: #fff; border-color: #fff; color: #7a2048; }
/* hover: one shade lighter, no flashing */
#reportBody tr:not(.row-selected):hover > td, #selBody tr:not(.row-selected):hover > td { background: #2c3237; }
/* the row being edited: white lines round the row, the cell white with a blue edge (a table row's own outline is not drawn reliably) */
#selBody tr:focus-within > td { box-shadow: inset 0 2px 0 #fff, inset 0 -2px 0 #fff; }
#selBody tr:focus-within > td:first-child { box-shadow: inset 2px 0 0 #fff, inset 0 2px 0 #fff, inset 0 -2px 0 #fff; }
#selBody tr:focus-within > td:last-child { box-shadow: inset -2px 0 0 #fff, inset 0 2px 0 #fff, inset 0 -2px 0 #fff; }
#selHead th.sel-col-on { background: #1e3a8a; color: #fff; box-shadow: inset 0 -3px 0 #60a5fa; }
/* "Pin headings" switch: the heading row with its filters stays at the top while the students scroll */
#selectionTable.sel-sticky thead th { position: sticky; top: calc(-1 * var(--bs-modal-padding, 1rem)); z-index: 3; background: #2b3035; }   /* minus the window padding: no gap above it */
#selectionTable.sel-sticky thead th.sel-pin { z-index: 5; }
#selectionTable.sel-sticky thead th.sel-col-on { background: #1e3a8a; }
/* the student whose card is in the card window */
#selBody tr.peek-on > td:first-child { box-shadow: inset 4px 0 0 #ffc078; }
/* card preview: the card large in the middle of the screen, sized by IDC.peek.layout() */
.card-peek { position: fixed; inset: 0; z-index: 1070; background: rgba(0,0,0,.78); display: flex; align-items: center; justify-content: center; }
.card-peek[hidden] { display: none; }
.card-peek-box { background: #1f2327; border: 1px solid #495057; border-radius: 12px; padding: 12px 16px 14px; box-shadow: 0 18px 60px rgba(0,0,0,.6); max-width: calc(100vw - 24px); }
.card-peek-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #fff; }
.card-peek-head strong { max-width: 50vw; }
.card-peek-cards { display: grid; gap: 16px; justify-content: center; }
.card-peek-cards img { display: block; border-radius: 8px; background: #fff; cursor: zoom-in; box-shadow: 0 4px 18px rgba(0,0,0,.45); transition: opacity .15s; }
.card-peek-cards img.loading { opacity: .35; }
.card-peek.one .card-peek-cards img { cursor: zoom-out; }
.card-peek.one .card-peek-cards img.dim { display: none; }
/* text boxes only: the tick box must keep its own small size, or it pushes the serial number under the photo */
#reportTable input:not([type=checkbox]):not([type=radio]), #reportTable .sel-cell, #selectionTable input[type=text], #selectionTable .sel-cell {
  background: #1b1b1b; border: 1px solid #333; color: #eee; border-radius: 4px;
  padding: 3px 6px 2px; font-size: 12px; width: 100%; min-width: 70px;   /* 3px on top: room for the marks above Nepali / Hindi letters */
}
#reportTable, #selectionTable, #reportTable input, #selectionTable input, #selectionTable textarea { font-family: 'IDC Devanagari', var(--bs-body-font-family); }
#reportTable td, #selectionTable td { padding: 3px 5px; }
/* Selection panel: columns take their content's width, the table scrolls sideways when wider than the screen */
#selectionTable { width: 100%; table-layout: fixed; }   /* fits the window; min-width (set by the code) only when even narrow columns don't fit */
#selectionTable .sel-pin { position: sticky; z-index: 2; background: var(--bs-table-bg, #212529); }
#selectionTable thead .sel-pin { z-index: 3; }
#selectionTable tr > .sel-pin:nth-child(3) { box-shadow: inset -2px 0 0 #444; }
/* cells are text areas so long text can wrap ("Wrap text" switch on); off = one line, like a text box */
#selectionTable .sel-cell { display: block; overflow: hidden; line-height: 1.35; min-height: 26px; overflow-wrap: anywhere; cursor: text; }
#selectionTable:not(.sel-wrap) .sel-cell { white-space: nowrap; text-overflow: ellipsis; }
.row-photo { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; background: #222; }
.row-photo-btn { cursor: pointer; }
.row-flag { cursor: help; font-size: 13px; }
/* Adjust photo: dashed box over the photo on the preview card + a small floating pill */
.pa-box { position: absolute; z-index: 5; outline: 2px dashed #ffc107; outline-offset: 2px; cursor: grab; touch-action: none; background: rgba(255, 193, 7, .06); }
.pa-box.pa-dragging { cursor: grabbing; }
.pa-pill { position: absolute; z-index: 6; top: 8px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; white-space: nowrap;
  line-height: 1.2; font-size: 12px; color: #eee; background: rgba(20, 20, 20, .88); border: 1px solid #555; border-radius: 999px; padding: 3px 8px; }
.pa-pill.pa-adjusted { border-color: #ffc107; }
.pa-pill.pa-adjusted #paLabel { color: #ffc107; }
.pa-pill button { background: transparent; color: #eee; border: 1px solid #555; border-radius: 6px; min-width: 22px; height: 22px; padding: 0 4px; line-height: 1; }
.pa-pill button:hover { background: #333; }
#paZoom { min-width: 36px; text-align: center; }
#photoAdjustBtn.active { background: #ffc107; color: #111; border-color: #ffc107; }
/* Field Styles section */
.fs-row { border: 1px solid #333; border-radius: 6px; margin-bottom: 4px; }
.fs-head { display: flex; justify-content: space-between; gap: 6px; width: 100%; background: none; border: 0; color: #ddd; padding: 5px 8px; font-size: 13px; text-align: left; }
.fs-head small { color: #8b95a5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-row.styled .fs-head small { color: #ffc107; }
.fs-body { padding: 4px 8px 8px; }
.fs-body .t { font-size: 11px; color: #8b95a5; margin: 6px 0 2px; }
.fs-body input[type=number] { width: 64px; }
.fs-body input[type=color] { width: 34px; height: 26px; padding: 1px; }
.photo-cell { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.photo-cell-icons { display: flex; flex-direction: column; gap: 2px; }
/* small dark round chip, so the icon stays clear on normal and wine (selected) rows alike */
.photo-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.25); color: #fff;
  font-size: 13px; line-height: 1;
}
.photo-icon-btn:hover { background: #1e90ff; border-color: #1e90ff; }
.preview-person-picker { position: relative; width: 220px; }
.preview-person-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  background: #1a1d23; border: 1px solid var(--line); border-radius: 6px;
  max-height: 260px; overflow-y: auto; margin-top: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.preview-person-item { padding: 6px 10px; cursor: pointer; font-size: 13px; }
.preview-person-item:hover { background: #2a2f38; }

/* -------------------------------------------------- rendering overlay */
.render-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(5, 8, 14, 0.72);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(1px);
}
.render-window {
  display: flex; width: min(1200px, 94vw); height: min(760px, 88vh);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.render-log-pane {
  flex: 1.4; display: flex; flex-direction: column;
  background: rgba(18, 26, 46, 0.82);
  border-right: 1px solid rgba(255,255,255,.08);
}
.render-info-pane {
  flex: 1; display: flex; flex-direction: column;
  background: rgba(8, 10, 16, 0.93);
}
.render-pane-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; font-weight: 600; font-size: 15px; color: #e8ebf2;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.render-dismiss-btn {
  background: #2f6fed; color: #fff; border: none; border-radius: 6px;
  padding: 6px 16px; font-size: 13px; font-weight: 500; cursor: pointer;
}
.render-dismiss-btn:hover { background: #4a83f0; }
.render-log-body {
  flex: 1; overflow-y: auto; padding: 14px 18px;
  font-family: 'Consolas', 'Menlo', monospace; font-size: 13px; line-height: 1.85;
  color: #3ee06b;
}
.render-log-body .render-log-heading { color: #5fb0ff; margin-bottom: 4px; }
.render-log-body .render-log-old { color: #3a7a4d; }
.render-log-body .render-log-total { color: #9fd8ff; margin-top: 6px; }
.render-info-body { flex: 1; overflow-y: auto; padding: 22px; text-align: left; }
.render-icon { text-align: center; font-size: 42px; color: #e05a3e; margin-bottom: 16px; }
.render-stat { color: #3ee06b; font-size: 14px; margin-bottom: 6px; }
.render-stat span { font-weight: 700; }
.render-info-body hr { border-color: rgba(255,255,255,.1); margin: 14px 0; }
.render-totals { color: #3ee06b; font-size: 14px; margin-bottom: 10px; }
.render-progress-track {
  height: 22px; border-radius: 4px; background: rgba(255,255,255,.08);
  overflow: hidden; position: relative;
}
.render-progress-fill {
  height: 100%; background: #2f6fed; display: flex; align-items: center; justify-content: center;
  transition: width .25s ease; min-width: 0;
}
.render-progress-fill span { font-size: 12px; color: #fff; font-weight: 600; }
.render-error-log { margin-top: 18px; font-size: 12px; color: #ff8a8a; white-space: pre-wrap; }

/* ------------------------------------------------- 3-section Report tab */
.report3col { display: flex; gap: 12px; height: calc(100vh - 220px); min-height: 400px; }
.report3col-pane {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  background: #14171f; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.report3col-header {
  padding: 10px 14px; font-weight: 600; font-size: 14px; text-align: center;
  background: rgba(255,255,255,.04); border-bottom: 1px solid var(--line);
}
.report3col-body { flex: 1; overflow-y: auto; padding: 10px 14px; font-size: 13px; }
.report-info-total { font-size: 14px; margin-bottom: 6px; }
.report-info-total .badge { font-size: 13px; }
.report-count-table { width: 100%; margin-top: 10px; border-collapse: collapse; }
.report-count-table td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,.06); }
.report-count-table .rc-value { background: rgba(46, 160, 67, .18); }
.report-count-detail { font-size: 11px; }
.report-count-detail th { font-weight: 600; color: #9aa3b2; }
.report-count-detail code { font-size: 10px; }
.qr-brand-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; background: #222; border: 1px solid var(--line); }
.dm-subtab { min-width: 110px; }
.dm-subpanel { padding-top: 2px; }
.report-missing-row, .report-extra-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,.06); cursor: pointer;
}
.report-missing-row:hover, .report-extra-row:hover { background: rgba(255,255,255,.04); }
.report-missing-row .sr { color: #6b7280; margin-right: 6px; }
.report-extra-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; margin-right: 8px; background: #222; }
.gen-progress { background: #121212; border: 1px solid var(--line); border-radius: 8px; padding: 14px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 992px) {
  .designer { flex-direction: column; height: auto; }
  .dp-left { width: 100%; max-width: none; height: auto; }
  .dp-right { height: auto; }
  .preview-stage { min-height: 300px; }
  .table-scroll { max-height: 60vh; }
}

/* -------------------------------------------------------------- smallish */
code { color: #7dd3fc; }
.btn-primary { background: var(--tab); border-color: var(--tab); }
.btn-primary:hover, .btn-primary:focus { background: #1e90ff; border-color: #1e90ff; }
.progress { background: #1f2229; height: 12px; }

/* -------------------------------------------- no header ribbon (non-Super-Admin) */
.no-topbar .designer { height: 100vh; }

/* ------------------------------------------------ focus mode (F / the toolbar button; Esc leaves) */
.focus-strip { display: none; }
body.focus-mode .idc-topbar, body.focus-mode .idc-corner, body.focus-mode .dp-right > .tab-btns { display: none !important; }
body.focus-mode .designer { height: 100vh; }
body.focus-mode .dp-left { display: none; }
body.focus-mode .focus-strip {
  display: flex; align-items: center; justify-content: center; flex: none; width: 30px;
  background: var(--heading); color: #fff; border: 0; border-right: 1px solid var(--line); font-size: 16px; cursor: pointer;
}
body.focus-mode .focus-strip:hover { background: #1e90ff; }
/* settings opened from the strip: the panel starts under the preview toolbar (IDC.focusMode.place) and lies over
   the empty space beside the card - the toolbar and the card stay exactly as they are */
body.focus-mode.focus-panel .dp-left {
  display: block; position: fixed; left: 30px; top: var(--focus-panel-top, 0); bottom: 0; z-index: 1030; width: 360px; max-width: calc(100vw - 30px);
  box-shadow: 8px 0 30px rgba(0,0,0,.6);
}
body.focus-mode #focusModeBtn { background: #ffc107; color: #111; border-color: #ffc107; }
.no-topbar .dp-left { padding-bottom: 52px; }            /* room for the corner menu */
.idc-corner { position: fixed; left: 12px; bottom: 12px; z-index: 1040; }   /* below Bootstrap modals (1050+) so dialogs cover it */
.idc-corner-btn {
  background: var(--heading); color: #fff; border: 1px solid rgba(0,0,0,.4);
  border-radius: 20px; padding: 4px 12px; box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.idc-corner-btn:hover, .idc-corner-btn:focus, .idc-corner-btn.show { color: #fff; filter: brightness(1.12); }

/* ------------------------------------------------ dashboard: who is logged in */
.dash-user-line { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }

/* ------------------------------------------ dashboard: sub-projects under parent */
.proj-sub-icon { color: #7dd3fc; margin-right: 5px; font-size: .95em; }
.proj-list-row.is-sub .proj-col-name { padding-left: calc(var(--depth, 1) * 18px); }
/* Projects -> Compact: a spreadsheet-like table, one line per project, each school's sub-projects under it */
.proj-cmp { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.proj-cmp th { font-size: 11px; text-transform: uppercase; color: #8b949e; letter-spacing: .03em; font-weight: 500; padding: 7px 10px; background: #191d21; border-bottom: 1px solid #39424a; white-space: nowrap; }
.proj-cmp td { padding: 0 10px; height: 32px; border-bottom: 1px solid #22282d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-cmp th + th, .proj-cmp td + td { border-left: 1px solid #22282d; }
.proj-cmp tr:not(.is-sub) > td { border-top: 1px solid #39424a; }
.proj-cmp .num { text-align: right; font-variant-numeric: tabular-nums; }
.proj-cmp-row { cursor: pointer; }
.proj-cmp-row:hover > td, .proj-cmp-row:focus-visible > td { background: #1f262c; outline: none; }
.proj-cmp-thumb { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; vertical-align: middle; margin-right: 8px; display: inline-flex; background: #1b1e27; border: 1px solid var(--line); font-size: 10px; }
.proj-cmp-sub { color: #4b5563; padding-left: calc(var(--depth, 1) * 28px); margin-right: 6px; }
.proj-cmp-orphan { display: none; color: #cbd5e1; }
.proj-cmp-row.orphan .proj-cmp-orphan { display: inline; }
.proj-cmp-ds { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 4px; background: #2b3238; color: #cbd5e1; vertical-align: middle; }
.proj-cmp-ds.sub { background: #1e3a4a; color: #7dd3fc; }
.proj-cmp-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; margin-left: 6px; vertical-align: middle; }
.proj-cmp-assign { color: #6b7280; margin-left: 6px; font-size: 12px; }
.proj-cmp .proj-col-actions { overflow: visible; }
.proj-cmp-row:hover .proj-cmp-open { background: var(--bs-primary, #0d6efd); color: #fff; }
.proj-more { padding: 2px 6px; }
/* Projects -> Grid: one card per school (card design on top, datasets as rows) */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.proj-grid[hidden] { display: none; }
.proj-gcard { background: #16181d; border: 1px solid var(--line); border-radius: 12px; height: 100%; display: flex; flex-direction: column; }
.proj-gcard:hover { border-color: #3b82f6; }
.proj-gprev { display: flex; align-items: center; justify-content: center; height: 150px; background: #101215; border-bottom: 1px solid var(--line); padding: 10px; border-radius: 12px 12px 0 0; }
.proj-gprev img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.5); }
.proj-gprev .proj-thumb-empty { font-size: 36px; }
.proj-gbody { padding: 10px 12px 10px; display: flex; flex-direction: column; flex: 1; }
.proj-gname { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-gmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #8b949e; font-size: 12px; margin: 2px 0 6px; }
.proj-grid-ds { border-top: 1px solid #242a30; padding: 6px 0; }
.proj-gds-head { display: flex; align-items: center; gap: 6px; }
.proj-gnums { margin-left: auto; color: #9ca3af; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.proj-gbar { height: 4px; background: #2b3238; border-radius: 3px; margin-top: 5px; overflow: hidden; }
.proj-gbar i { display: block; height: 100%; background: #22c55e; }
.proj-gds-head .proj-cmp-open { padding: 1px 8px; font-size: 12px; }
.proj-grid-ds:hover .proj-cmp-open { background: var(--bs-primary, #0d6efd); color: #fff; }
.proj-gfoot { margin-top: auto; padding-top: 6px; color: #6b7280; font-size: 11px; }
.proj-grid-item.is-sub .project-card { border-left: 3px solid rgba(125, 211, 252, .55); }
.proj-parent-hint { color: #9ca3af; font-size: 12px; }
.proj-assigned { color: #9ca3af; font-size: 12px; }

/* --------------------------------------- designer left panel: Home + Edit Project */
.dp-head-btns { display: flex; gap: 4px; margin-left: 8px; }
.dp-head-btn {
  color: #fff; background: transparent; border: 0; border-radius: 6px;
  font-size: 1.2rem; line-height: 1; padding: 3px 6px;               /* a little larger than the old home icon */
}
.dp-head-btn:hover, .dp-head-btn:focus-visible { background: rgba(0,0,0,.2); color: #fff; }

/* ------------------------------------ preview student picker: no stray caret */
#previewPersonSearch.picker-idle { caret-color: transparent; cursor: pointer; }
.preview-person-item.active { background: #2a2f38; }

/* ------------------------------------ colour swatch + hex box (paste a colour in one click) */
.idc-hex-wrap { display: inline-flex; gap: 4px; align-items: center; width: 100%; max-width: 100%; }
.idc-hex-wrap > input[type=color] { flex: 0 0 42px; width: 42px !important; }
.idc-hex-wrap > .idc-hex { flex: 1 1 auto; min-width: 72px; max-width: 120px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; padding: 2px 6px; }

/* Promotion Manager: the Preview / Start session window - most of the screen, the list scrolls, phones full screen */
#genericModal .modal-dialog.ay-big { max-width: min(1200px, 94vw); }
#genericModal .ay-big .modal-content { height: min(92vh, 1000px); }
#genericModal .ay-big .modal-body { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.ay-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; }
.ay-card { text-align: left; background: transparent; border: 1px solid var(--line, #333); border-radius: 8px; padding: 6px 10px; color: inherit; }
.ay-card .n { font-size: 1.35rem; font-weight: 600; line-height: 1.2; } .ay-card .l { font-size: .75rem; opacity: .75; }
.ay-card.on { border: 2px solid #7A2048; background: rgba(122, 32, 72, .18); }
.ay-list { flex: 1 1 auto; min-height: 120px; overflow: auto; border: 1px solid var(--line, #333); border-radius: 8px; }
.ay-list thead th { position: sticky; top: 0; z-index: 2; background: #1b1f29; }
.ay-list tr.ay-grp td { background: #161a22; font-weight: 600; }
@media (max-width: 575.98px) { #genericModal .modal-dialog.ay-big { max-width: none; margin: 0; } #genericModal .ay-big .modal-content { height: 100vh; border-radius: 0; } }

/* Promotion Manager on a phone: each student a card (name, class now, action, destination) */
@media (max-width: 575.98px) {
  #ayBox table thead { display: none; }
  #ayBox table, #ayBox tbody, #ayBox tr, #ayBox td { display: block; width: 100%; }
  #ayBox tbody tr { position: relative; padding: 8px 4px 8px 34px; border-bottom: 1px solid var(--line, #333); }
  #ayBox tbody td { border: 0; padding: 2px 0; }
  #ayBox tbody td:first-child { position: absolute; left: 6px; top: 10px; width: auto; }
  #ayBox tbody td:nth-child(2) { font-weight: 600; }
  #ayBox .d-flex.gap-2 { flex-wrap: wrap; }
}

/* one photo uploading: the page waits (nothing else can be clicked) */
#photoWait { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .55); display: none; align-items: center; justify-content: center; }
#photoWait.on { display: flex; }
#photoWait .photo-wait-box { background: #1b1f29; color: #fff; border: 1px solid #333; border-radius: 12px; padding: 20px 24px; width: min(340px, 90vw); text-align: center; }
img.photo-busy { opacity: .4; }

/* ------------------------------------------------------------------- announcements (Projects page) */
.ann-c-blue  { --ann-head: #1f4fa8; --ann-bg: #21345c; --ann-line: #3c5a96; --ann-link: #82b4ff; }
.ann-c-green { --ann-head: #1e7a46; --ann-bg: #173d2a; --ann-line: #2f7a52; --ann-link: #7fe0a6; }
.ann-c-amber { --ann-head: #a8650c; --ann-bg: #4a3510; --ann-line: #8a6420; --ann-link: #ffd27a; }
.ann-c-wine  { --ann-head: #7a2048; --ann-bg: #4a1730; --ann-line: #8a3a60; --ann-link: #f3a6c8; }
.ann-c-red   { --ann-head: #a8232f; --ann-bg: #4d1a1f; --ann-line: #8f3540; --ann-link: #ff9aa2; }
.ann-bar { display: flex; align-items: center; gap: .6rem; background: var(--ann-bg); border: 1px solid var(--ann-line); color: #e8eaee;
  border-radius: 8px; padding: .55rem .9rem; margin-bottom: 1rem; }
.ann-bar-text { min-width: 0; }
.ann-bar .ann-link { color: var(--ann-link); font-weight: 600; white-space: nowrap; text-decoration: none; }
.ann-card { background: #1c1f26; border: 1px solid #464c5a; border-radius: 14px; overflow: hidden; color: #e8eaee; }
.ann-card-head { display: flex; align-items: center; gap: .8rem; background: var(--ann-head); color: #fff; padding: 1rem 1.2rem; }
.ann-btn { background: var(--ann-head); border-color: var(--ann-head); color: #fff; }
.ann-btn:hover { filter: brightness(1.15); color: #fff; }
.ann-inline { background: var(--ann-bg); border: 1px solid var(--ann-line); border-left: 5px solid var(--ann-head); border-radius: 10px;
  color: #e8eaee; padding: .9rem 1.1rem; margin-bottom: 1rem; }
.ann-corner { position: fixed; right: 18px; bottom: 18px; width: min(360px, calc(100vw - 32px)); z-index: 1080;
  box-shadow: 0 14px 40px rgba(0,0,0,.55); animation: annIn .35s ease-out; }
.ann-corner .ann-title, .ann-inline .ann-title { font-size: 1.05rem; }
@keyframes annIn { from { transform: translateY(24px); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .ann-corner { animation: none; } }
.ann-preview { background: #111318; border-radius: 8px; padding: 1rem; }
.ann-preview .ann-corner { position: static; margin-left: auto; animation: none; }
.ann-dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--ann-head); vertical-align: middle; }

/* ------------------------------------------------------------------- brand block (logo, Make My ID, Developed by) */
.idc-brand { display: inline-flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.idc-brand-logo { width: 38px; height: 38px; }
.idc-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.idc-brand-name { font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 1.15rem; color: #fff; white-space: nowrap; }
.idc-brand-by { font-size: .72rem; color: #aab0bd; white-space: nowrap; letter-spacing: .1px; }
.idc-brand-sep { width: 1px; height: 32px; background: #3a3f4b; }
.idc-brand-menu .idc-brand-logo { width: 34px; height: 34px; }
.idc-brand-menu .idc-brand-name { font-size: 1rem; }
/* on the Designer's green tab bar: smaller, white; the "Developed by" line goes first when space runs out, then the block */
.idc-brand-bar { gap: .45rem; padding: 0 .4rem; }
.idc-brand-bar .idc-brand-logo { width: 26px; height: 26px; }
.idc-brand-bar .idc-brand-name { font-size: .9rem; }
.idc-brand-bar .idc-brand-by { font-size: .62rem; color: #dcefe2; }
.idc-brand-bar.no-by .idc-brand-by { display: none; }
.idc-topbar .idc-brand-by { font-size: .66rem; }
.login-by { font-size: .85rem; color: #aab0bd; letter-spacing: .2px; margin: .35rem 0 0; }

/* Designer: right-click menu on the card preview (Copy / Download card) */
.card-copy-menu { position: fixed; z-index: 1085; min-width: 240px; }

/* Sheet Builder: an A4 sheet with the 10 card slots in their real places */
.sb-page { position: relative; width: 100%; background: #fff; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.sb-slot { position: absolute; border: 2px dashed #9aa6bd; border-radius: 4px; background: #eef2f8; cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: #5b6578; font-size: .8rem; text-align: center; }
.sb-slot:hover, .sb-slot:focus { border-color: #0d6efd; outline: none; }
.sb-slot.sb-selected { border: 3px solid #0d6efd; box-shadow: 0 0 0 3px rgba(13,110,253,.25); }
.sb-slot.sb-filled { border-style: solid; background: #fff; }
.sb-slot img { width: 100%; height: 100%; object-fit: contain; }
.sb-slot .sb-label { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.65); color: #fff; font-size: .65rem;
  padding: 1px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-plus { line-height: 1.3; }
.sb-note { position: absolute; left: 0; right: 0; bottom: 1.5%; text-align: center; color: #7a8394; font-size: .72rem; }

/* Designer: floating quick uploads (Design / Excel / Photo) at the top right of the card area */
.qa-strip { position: absolute; top: 10px; right: 10px; z-index: 6; display: flex; flex-direction: column; gap: 8px; padding: 8px;
  background: rgba(30,33,40,.92); border: 1px solid #3c414d; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.qa-btn { width: 62px; height: 58px; border-radius: 10px; border: 1px solid transparent; color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; font: 600 11px/1 system-ui, 'Segoe UI', sans-serif; transition: filter .15s, outline-color .15s; }
.qa-btn i { font-size: 22px; line-height: 1; }
.qa-btn .qa-ico { width: 24px; height: 24px; display: block; box-shadow: 0 0 0 1.5px rgba(255,255,255,.55); border-radius: 5px; }   /* Photoshop / Excel look-alike badges */
.qa-btn:hover, .qa-btn:focus-visible { filter: brightness(1.18); outline: 3px solid #9ec5ff; outline-offset: 0; }
.qa-btn.qa-over { outline: 3px dashed #fff; filter: brightness(1.25); }
.qa-design { background: #1f4fa8; } .qa-excel { background: #1d6f42; } .qa-photo { background: #a8501c; } .qa-more { background: #3a3f4b; display: none; }
.qa-strip.qa-compact .qa-more { display: flex; }
.qa-strip.qa-compact:not(.qa-open) [data-qa] { display: none; }
/* Download: one small panel next to the button, a row per download (it moves up or down to stay in the preview area: --dy) */
.qa-dl { background: #5b3fa8; }
.qa-strip.qa-compact:not(.qa-open) .qd { display: none; }
.qd { position: relative; }
.qd.qd-open .qa-dl { box-shadow: 0 0 0 3px rgba(255,214,102,.65); }
.qd-fan { position: absolute; right: calc(100% + 10px); top: 50%; z-index: 7; display: none; padding: 8px 10px 6px;
  background: rgba(30,33,40,.98); border: 1px solid #4a5060; border-radius: 10px; box-shadow: 0 8px 22px rgba(0,0,0,.55);
  color: #fff; font: 12px/1 system-ui, 'Segoe UI', sans-serif; transform: translateY(calc(-50% + var(--dy, 0px))); }
.qd.qd-open .qd-fan { display: block; }
.qd-fan::before { content: "Download"; display: block; color: #9ca3af; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 4px; }
.qd-card { display: flex; align-items: center; gap: 6px; padding: 5px 0; white-space: nowrap; border-top: 1px solid #353b48; }
.qd-card:first-child { border-top: 0; }
.qd-card b { font-weight: 600; min-width: 52px; }
.qd-card .qd-ic { display: flex; font-size: 18px; width: 22px; } .qd-card .qd-ic .qa-ico { width: 20px; height: 20px; }
.qd-card button, .qd-card a { border: 1px solid #5d6475; background: #2b3040; color: #fff; border-radius: 6px; padding: 4px 8px; font-size: 12px; text-decoration: none; cursor: pointer; }
.qd-card button:hover, .qd-card a:hover, .qd-card button:focus-visible, .qd-card a:focus-visible { background: #3d4560; border-color: #9ec5ff; outline: none; }
.qd-card .qd-n { display: inline-block; min-width: 16px; padding: 1px 4px; margin-left: 2px; border-radius: 8px; background: #0d6efd; font-size: 11px; }
.qd-card .qd-off { opacity: .4; pointer-events: none; }
/* Users & access: own project / given labels, and the lock that stands in for an own project's tick box */
.acc-tag { display: inline-block; font-size: .7rem; padding: 0 .4rem; border-radius: 6px; white-space: nowrap; }
.acc-own { background: rgba(25,135,84,.2); color: #75d6a4; } .acc-given { background: rgba(13,110,253,.2); color: #8bb9fe; }
#u_access .form-check { position: relative; }
#u_access .form-check[data-own="1"] .form-check-input { visibility: hidden; }
#u_access .own-lock { position: absolute; left: .1rem; top: .2rem; font-size: .8rem; color: var(--bs-secondary-color); }
/* Bulk photo upload: uploaded (solid) then optimised and waiting (light) in one bar */
.bp-prep { background: #85b7eb !important; }
.bp-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; background: var(--bs-primary); }
/* Photo guide (assets/js/photo_guide.js): the big yes / no, and the camera shape rows */
.pg-ans { border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.pg-ans .pg-q { font-size: 1.15rem; font-weight: 600; }
.pg-ok { background: rgba(25,135,84,.15); color: #75d6a4; } .pg-bad { background: rgba(220,53,69,.15); color: #f19aa3; }
.pg-row { display: flex; gap: 10px; align-items: baseline; width: 100%; padding: 5px 8px; font-size: .85rem; text-align: left;
  background: transparent; border: 1px solid transparent; border-bottom-color: var(--bs-border-color-translucent); color: inherit; border-radius: 6px; }
.pg-row:hover { background: var(--bs-tertiary-bg); } .pg-row.on { border-color: #6ea8fe; }
.pg-row .pg-n { width: 38px; font-weight: 600; }
#pgPrint, #pgSide { max-width: 100%; border-radius: 4px; }
body.focus-mode .qa-strip { opacity: .35; } body.focus-mode .qa-strip:hover { opacity: 1; }

/* Selection: a field this student's card prints under another name (Swap field name) */
.swap-tag{display:inline-block;font-size:11px;line-height:1.5;background:rgba(13,110,253,.25);color:#9ec5fe;border-radius:4px;padding:0 5px;margin-bottom:2px;white-space:nowrap}

/* Super Admin menu: two columns on laptop-sized screens (one column would run off the bottom), one on big screens */
@media (min-width: 992px) and (max-height: 880px), (min-width: 992px) and (max-width: 1450px) {
  .sa-menu.show { display: flex; }
  .sa-menu .sa-col + .sa-col { border-left: 1px solid var(--bs-border-color-translucent); }
}

/* Smaller screens (laptops): the floating buttons become a thin icon column (names on hover) and the Tools menu
   slimmer, so the menu fits between the card and the buttons (designer.js stops it left of them). Big screens: as before */
@media (max-width: 1599.98px) {
  .qa-strip { padding: 4px; gap: 5px; border-radius: 10px; right: 6px; }
  .qa-strip .qa-btn { width: 34px; height: 34px; border-radius: 7px; }
  .qa-strip .qa-btn > span { display: none; }
  .qa-strip .qa-btn i { font-size: 17px; }
  .qa-strip .qa-btn .qa-ico { width: 20px; height: 20px; }
  .tools-menu:not(.tools-2col) { font-size: calc(.8rem + 1px); --bs-dropdown-min-width: 0; }
  .tools-menu:not(.tools-2col) .dropdown-item { padding: .2rem .7rem; }
}

/* Selection panel: cells read like plain text until the row is hovered or a cell is being edited */
#selectionTable .sel-cell { min-width: 0; }
#selBody .sel-cell, #selBody tr.row-selected > td .sel-cell { background: transparent; border-color: transparent; }
#selBody tr:hover > td .sel-cell { border-color: #555; background: rgba(0,0,0,.18); }
#selBody tr.row-selected:hover > td .sel-cell { border-color: #f0a3c4; background: #621a3a; }
#selHead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
/* the filter box and its contains / Blank choice fit narrow columns */
.sel-filter-box { display: block; width: 100%; height: 28px; border: 0; background: transparent; }   /* a heading's filter box (designer.js filterBox) */
#selHead select[data-colblank] { min-width: 0; padding-right: 1.6rem; text-overflow: ellipsis; }
.sel-view-menu { padding: 6px 12px; min-width: 170px; }
.sel-view-menu .form-check { display: block; margin: 4px 0; }

/* Selection panel edit box: floats over the cell being edited - a tiny page of its own (iframe), so typing stays quick; the text box inside is styled in designer.js */
.cell-editor { display: none; position: fixed; z-index: 1060; padding: 0; background: #fff;
  border: 2px solid #ffe100; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.45); }   /* yellow while editing (and saving), green saved, red failed */
#reportTable .sel-cell { display: block; max-width: 160px; min-height: 25px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; }
#reportHead th.sel-col-on { background: #1e3a8a; color: #fff; box-shadow: inset 0 -3px 0 #60a5fa; }
#reportBody tr.sel-edit-row > td, #selBody tr.sel-edit-row > td { box-shadow: inset 0 2px 0 #fff, inset 0 -2px 0 #fff; }

/* save status pill (IDC.saving): a tiny page of its own (iframe) of fixed size; its look is written into it by designer.js */
.save-pill { width: 172px; height: 26px; flex: none; border: 0; margin-left: 8px; background: transparent; }

/* a cell's save as a ring round it (IDC.saving.mark): colour only, so it is just repainted - yellow saving, green saved (fades), red failed */
sel-cell.cell-saving { box-shadow: inset 0 0 0 2px #ffe100; }
sel-cell.cell-saved { animation: cellSaved 1.2s forwards; }
sel-cell.cell-failed { box-shadow: inset 0 0 0 2px #ff4d4d; }
@keyframes cellSaved { 0%, 40% { box-shadow: inset 0 0 0 2px #4ade80; } 100% { box-shadow: inset 0 0 0 2px transparent; } }