/* =========================================
   THEME VARIABLES
   ========================================= */
:root {
  --bg:        #0d0f13;
  --panel:     #141822;
  --text:      #e9edf5;
  --muted:     #9aa7bd;

  --brand:     #6aa6ff;
  --brand2:    #9a6aff;
  --ok:        #29d68e;
  --danger:    #ff6b6b;

  --header:    rgba(10,12,18,.7);
  --input:     #0e1117;
  --border:    rgba(255,255,255,.12);
  --hover:     rgba(255,255,255,.08);
  --backdrop:  rgba(0,0,0,.6);

  --radius:    14px;
  --shadow:    0 10px 30px rgba(0,0,0,.25);
}

/* Light mode overrides */
body.light,
body.theme-classic {
  --bg:        #f5f6fa;
  --panel:     #ffffff;
  --text:      #1e1f23;
  --muted:     #5f6b7a;

  --brand:     #2a73ff;
  --brand2:    #6c2aff;
  --ok:        #1f9e6d;
  --danger:    #d32f2f;

  --header:    rgba(255,255,255,.9);
  --input:     #ffffff;
  --border:    rgba(0,0,0,.10);
  --hover:     rgba(0,0,0,.06);
  --backdrop:  rgba(0,0,0,.45);

  --shadow:    0 8px 24px rgba(0,0,0,.08);
}

body.theme-university {
  --bg:        #f6f7fb;
  --panel:     #ffffff;
  --text:      #1a2433;
  --muted:     #607084;

  --brand:     #1f4e8c;
  --brand2:    #c99a2e;
  --ok:        #188a5a;
  --danger:    #c43434;

  --header:    rgba(255,255,255,.92);
  --input:     #ffffff;
  --border:    rgba(20,35,55,.12);
  --hover:     rgba(31,78,140,.08);
  --backdrop:  rgba(15,23,42,.48);

  --shadow:    0 10px 26px rgba(31,55,88,.10);
}

body.theme-green {
  --bg:        #f4faf7;
  --panel:     #ffffff;
  --text:      #15231d;
  --muted:     #607067;

  --brand:     #16815a;
  --brand2:    #31c48d;
  --ok:        #16a667;
  --danger:    #c73636;

  --header:    rgba(255,255,255,.93);
  --input:     #ffffff;
  --border:    rgba(17,94,89,.13);
  --hover:     rgba(22,129,90,.08);
  --backdrop:  rgba(10,35,27,.45);

  --shadow:    0 10px 26px rgba(19,86,62,.10);
}

body.theme-admin-focus {
  --bg:        #f3f5f8;
  --panel:     #ffffff;
  --text:      #1f242d;
  --muted:     #5f6b7a;

  --brand:     #2563eb;
  --brand2:    #334155;
  --ok:        #16a34a;
  --danger:    #dc2626;

  --header:    rgba(255,255,255,.94);
  --input:     #ffffff;
  --border:    rgba(15,23,42,.11);
  --hover:     rgba(37,99,235,.07);
  --backdrop:  rgba(15,23,42,.50);

  --shadow:    0 8px 22px rgba(15,23,42,.08);
}

/* =========================================
   RESETS & BASICS
   ========================================= */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 system-ui, Segoe UI, Roboto, Arial, sans-serif;
  --btn-primary-bg: linear-gradient(135deg, var(--brand), var(--brand2));
  --btn-primary-bg-hover: linear-gradient(135deg, color-mix(in oklab, var(--brand) 88%, #000), color-mix(in oklab, var(--brand2) 88%, #000));
  --btn-primary-border: color-mix(in oklab, var(--brand) 70%, transparent);
  --btn-primary-text: #fff;
  --btn-soft-bg: color-mix(in oklab, var(--brand) 9%, var(--panel));
  --btn-soft-bg-hover: color-mix(in oklab, var(--brand) 15%, var(--panel));
  --btn-soft-border: color-mix(in oklab, var(--brand) 24%, var(--border));
  --btn-soft-text: var(--text);
  --topbar-action-bg: var(--panel);
  --topbar-action-fg: #e9edf5;
  --topbar-action-hover: var(--brand);
  --topbar-action-border: var(--border);
  --topbar-action-shadow: 0 8px 22px rgba(0,0,0,.18);
}
body.light,
body.theme-classic {
  --topbar-action-bg: #ffffff;
  --topbar-action-fg: #111827;
  --topbar-action-hover: var(--brand);
  --topbar-action-border: rgba(17,24,39,.14);
  --topbar-action-shadow: 0 8px 22px rgba(15,23,42,.08);
}
body.theme-university {
  --btn-primary-bg: linear-gradient(135deg, #1f4e8c, #c99a2e);
  --btn-primary-bg-hover: linear-gradient(135deg, #173b6f, #aa7f20);
  --btn-primary-border: color-mix(in oklab, var(--brand) 62%, var(--brand2));
  --btn-soft-bg: color-mix(in oklab, var(--brand) 7%, #fff);
  --btn-soft-bg-hover: #ffffff;
  --btn-soft-border: color-mix(in oklab, var(--brand) 36%, transparent);
  --btn-soft-text: var(--brand);
  --topbar-action-bg: #ffffff;
  --topbar-action-fg: var(--brand);
  --topbar-action-hover: var(--brand2);
  --topbar-action-border: color-mix(in oklab, var(--brand) 24%, transparent);
  --topbar-action-shadow: 0 8px 22px rgba(31,78,140,.10);
}
body.theme-green {
  --btn-primary-bg: linear-gradient(135deg, #16815a, #31c48d);
  --btn-primary-bg-hover: linear-gradient(135deg, #116746, #249f70);
  --btn-primary-border: color-mix(in oklab, var(--brand) 72%, transparent);
  --btn-soft-bg: color-mix(in oklab, var(--brand) 7%, #fff);
  --btn-soft-bg-hover: #ffffff;
  --btn-soft-border: color-mix(in oklab, var(--brand) 34%, transparent);
  --btn-soft-text: #126344;
  --topbar-action-bg: #ffffff;
  --topbar-action-fg: #126344;
  --topbar-action-hover: var(--brand2);
  --topbar-action-border: color-mix(in oklab, var(--brand) 24%, transparent);
  --topbar-action-shadow: 0 8px 22px rgba(19,86,62,.10);
}
body.theme-admin-focus {
  --btn-primary-bg: linear-gradient(135deg, #2563eb, #334155);
  --btn-primary-bg-hover: linear-gradient(135deg, #1d4ed8, #1f2937);
  --btn-primary-border: color-mix(in oklab, var(--brand) 70%, transparent);
  --btn-soft-bg: color-mix(in oklab, var(--brand) 7%, #fff);
  --btn-soft-bg-hover: #ffffff;
  --btn-soft-border: color-mix(in oklab, var(--brand) 28%, transparent);
  --btn-soft-text: #1e293b;
  --topbar-action-bg: #ffffff;
  --topbar-action-fg: #1e293b;
  --topbar-action-hover: var(--brand);
  --topbar-action-border: rgba(15,23,42,.13);
  --topbar-action-shadow: 0 8px 22px rgba(15,23,42,.08);
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.flash { color: var(--ok); min-height: 1.2em; }
main { width: min(1100px,94%); margin: 24px auto; }
.page { animation: fade .2s ease; }
@keyframes fade { from { opacity:.6; transform: translateY(4px); } to { opacity:1; transform:none; } }

/* =========================================
   HEADER & NAV
   ========================================= */
.site-header{
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px;
  background: var(--header);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 800; }
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: max-content;
}
.site-header .brand-lockup {
  border: 0;
  background: transparent !important;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.site-header .brand-lockup:hover,
.site-header .brand-lockup:active,
.site-header .brand-lockup:focus {
  background: transparent !important;
}
.site-header .brand-lockup:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--brand) 48%, transparent);
  outline-offset: 4px;
  border-radius: 12px;
}
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: var(--brand-logo-size, 36px);
  height: var(--brand-logo-size, 36px);
  border-radius: var(--brand-logo-radius, 10px);
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 8px 18px color-mix(in oklab, var(--brand) 24%, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}
.brand-mark.has-logo {
  overflow: visible;
  box-shadow: none;
}
.brand-mark.adaptive-logo {
  overflow: visible;
  box-shadow: none;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: inherit;
}
.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.brand-adaptive-svg {
  filter: drop-shadow(0 8px 14px color-mix(in oklab, var(--brand) 18%, transparent));
}
.site-header .brand-lockup:hover .brand-mark,
.site-header .brand-lockup:focus-visible .brand-mark {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px color-mix(in oklab, var(--brand) 34%, transparent);
}
.brand-copy {
  display: grid;
  gap: 1px;
  transform: translate(var(--brand-copy-x, 0px), var(--brand-copy-y, 0px));
}
.brand-name {
  color: var(--brand-name-color, var(--text));
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}
.brand-name.has-image {
  display: flex;
  align-items: center;
  min-height: var(--brand-wordmark-height, 22px);
}
.brand-name.has-image img {
  display: block;
  width: auto;
  max-width: 180px;
  height: var(--brand-wordmark-height, 22px);
  object-fit: contain;
}
.brand-slogan {
  color: var(--brand-slogan-color, var(--muted));
  font-size: 11px;
  font-weight: 750;
  line-height: 1.15;
  white-space: nowrap;
  transform: translate(var(--brand-slogan-x, 0px), var(--brand-slogan-y, 0px));
}
.brand-lockup.text-logo-brand .brand-name {
  color: #0b1b32 !important;
  font-weight: 950;
}
.brand-lockup.text-logo-brand .brand-slogan:not(.has-image) {
  color: #0b1b32 !important;
  font-weight: 850;
}
body:not(.theme-classic):not(.theme-university):not(.theme-green):not(.light) .brand-lockup.text-logo-brand .brand-name,
body:not(.theme-classic):not(.theme-university):not(.theme-green):not(.light) .brand-lockup.text-logo-brand .brand-slogan:not(.has-image) {
  color: var(--text) !important;
}
.brand-slogan.has-image {
  display: flex;
  align-items: center;
  min-height: var(--brand-slogan-img-height, 13px);
}
.brand-slogan.has-image img {
  display: block;
  width: auto;
  max-width: 220px;
  height: var(--brand-slogan-img-height, 13px);
  object-fit: contain;
}
.nav .link{
  background: transparent; border: 0; color: var(--muted);
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
}
.nav .link.active, .nav .link:hover{
  color: var(--text); background: var(--hover);
}
.actions{ margin-left: auto; display:flex; align-items:center; gap:8px; }
.lang{
  background: var(--input); color: var(--text);
  border:1px solid var(--border); border-radius: 10px; padding: 8px 10px;
}

input[data-image-picker] {
  cursor: copy;
}
input[data-image-picker].is-uploading {
  opacity: .72;
  background-image: linear-gradient(90deg, transparent, color-mix(in oklab, var(--brand) 10%, transparent), transparent);
}

.topbar-lang-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  min-width: 88px;
  padding: 0 30px 0 12px;
  border: 1px solid var(--topbar-action-border);
  border-radius: 12px;
  background: var(--topbar-action-bg);
  color: var(--topbar-action-fg);
  box-shadow: var(--topbar-action-shadow);
  transition: border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.topbar-lang-wrap:hover,
.topbar-lang-wrap:focus-within {
  color: var(--topbar-action-hover);
  border-color: color-mix(in oklab, var(--topbar-action-hover) 46%, transparent);
  transform: translateY(-1px);
}

.topbar-lang {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.topbar-lang-wrap .topbar-svg-icon {
  display: none;
}

.topbar-lang-wrap::before {
  content: "";
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("/icons/ui/language.svg") center / contain no-repeat;
  mask: url("/icons/ui/language.svg") center / contain no-repeat;
  pointer-events: none;
}

.topbar-lang-current {
  pointer-events: none;
  color: currentColor;
  font-weight: 900;
  line-height: 1;
}

.topbar-lang-wrap::after {
  content: "v";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: currentColor;
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
}

.header-actions {
  gap: 10px;
  min-width: 0;
}

.topbar-user {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-icon {
  position: relative;
  width: 42px;
  min-width: 42px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--topbar-action-border);
  border-radius: 12px;
  background: var(--topbar-action-bg);
  font-weight: 800;
  overflow: visible;
  color: var(--topbar-action-fg);
  box-shadow: var(--topbar-action-shadow);
  transition: border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.menu-icon {
  width: 19px;
  height: 19px;
  display: block;
  object-fit: contain;
  filter: invert(1);
}

body.light .menu-icon {
  filter: none;
}

.topbar-icon .topbar-svg-icon {
  display: none;
}

.topbar-icon::before {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  margin: auto;
  background: currentColor;
  -webkit-mask: var(--topbar-icon-mask) center / contain no-repeat;
  mask: var(--topbar-icon-mask) center / contain no-repeat;
}

#btnMessages {
  --topbar-icon-mask: url("/icons/ui/message.svg");
}

#btnNotifications {
  --topbar-icon-mask: url("/icons/ui/bell.svg");
}

.topbar-icon:hover,
.topbar-icon:focus-visible {
  color: var(--topbar-action-hover);
  border-color: color-mix(in oklab, var(--topbar-action-hover) 46%, transparent);
  transform: translateY(-1px);
}

.topbar-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--topbar-action-border);
  border-radius: 999px;
  background: var(--topbar-action-bg);
  color: var(--topbar-action-fg);
  cursor: pointer;
  box-shadow: var(--topbar-action-shadow);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.topbar-profile:hover {
  border-color: color-mix(in oklab, var(--topbar-action-hover) 46%, transparent);
  transform: translateY(-1px);
}

.topbar-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  font-weight: 900;
  font-size: 12px;
}

.topbar-avatar.large {
  width: 40px;
  height: 40px;
  font-size: 14px;
}

.topbar-profile-text {
  display: grid;
  min-width: 0;
  text-align: left;
  line-height: 1.15;
}

#userName {
  max-width: 120px;
  overflow: hidden;
  color: var(--text);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#userRoleLabel {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.topbar-profile .topbar-profile-text,
.topbar-profile .topbar-caret {
  display: none;
}

.topbar-caret {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.topbar-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 10040;
  width: 260px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 20px 52px rgba(15, 23, 42, 0.24);
}

.topbar-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.topbar-menu-name {
  max-width: 178px;
  overflow: hidden;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-menu-email {
  max-width: 178px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-menu .menu-item,
.topbar-submenu .menu-item {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.topbar-menu .menu-item > span,
.topbar-submenu .menu-item > span {
  min-width: 0;
  flex: 1 1 auto;
}

.topbar-menu .menu-item.danger .menu-icon,
.topbar-submenu .menu-item.danger .menu-icon {
  filter: invert(24%) sepia(88%) saturate(2466%) hue-rotate(346deg) brightness(88%) contrast(92%);
}

.topbar-menu .menu-item:hover,
.topbar-submenu .menu-item:hover {
  background: var(--hover);
}

.topbar-menu .menu-item.danger,
.topbar-submenu .menu-item.danger {
  color: #dc2626;
}

.topbar-submenu {
  position: static;
  width: 100%;
  min-width: 0;
  margin: 4px 0 6px;
  padding: 6px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--bg) 65%, var(--panel));
  box-shadow: none;
}

@media (max-width: 860px) {
  .site-header {
    flex-wrap: wrap;
  }
  .nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
  .topbar-profile {
    min-width: 44px;
    padding-right: 8px;
  }
  .topbar-profile-text,
  .topbar-caret {
    display: none;
  }
  .topbar-menu {
    right: 0;
    width: min(280px, calc(100vw - 24px));
  }
}

.action {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center; /* Ensure vertical alignment of button and note */
}
.callouti {
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  margin-bottom: 0; /* Remove bottom margin to align better */
  flex-grow: 1; /* Allows callout to take up remaining space */
}

/* =========================================
   CARDS, GRIDS, PANELS
   ========================================= */
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.panel-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.list{ list-style:none; padding:0; margin:0; }

/* =========================================
   HERO & CAROUSEL
   ========================================= */
.hero{ text-align:center; margin:24px 0 18px; }
.carousel{
  position:relative; border-radius:16px; overflow:hidden;
  background: var(--panel);
  border:1px solid var(--border); margin-bottom:16px;
}
.carousel .slides{ display:flex; transform:translateX(0); transition: transform .4s ease; }
.carousel .slides img{ width:100%; height:220px; object-fit:cover; }
.carousel button{
  position:absolute; top:50%; transform:translateY(-50%);
  background: var(--hover); border: 1px solid var(--border);
  color: var(--text); font-size:24px; width:38px; height:38px;
  border-radius: 999px; cursor:pointer;
}
.carousel .prev{ left:8px; } .carousel .next{ right:8px; }

/* =========================================
   BUTTONS
   ========================================= */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px;
  border:1px solid var(--border);
  background: var(--hover); color: var(--text);
  cursor:pointer; text-decoration:none;
}
.btn.primary{ border:0; background: linear-gradient(135deg, var(--brand), var(--brand2)); color: #fff; }
.btn.danger{ background: color-mix(in oklab, var(--danger) 20%, transparent); border-color: var(--border); }
.btn.ghost{ background: transparent; }

.start-add-btn {
  width: auto;
  min-width: 0;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  font-weight: 700;
  white-space: nowrap;
}

/* =========================================
   FORMS
   ========================================= */
.form .field{ display:grid; gap:6px; margin-bottom:12px; }
.form input, .form textarea, .form select{
  background: var(--input);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px; border-radius: 10px; outline: none;
}
.form input::placeholder, .form textarea::placeholder { color: color-mix(in oklab, var(--muted) 80%, transparent); }
.form input:focus, .form textarea:focus, .form select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 30%, transparent);
}
fieldset{
  border: 1px solid var(--border);
  border-radius: 12px; margin: 10px 0; padding: 10px;
}
legend{ color: var(--muted); }

/* =========================================
   MODALS
   ========================================= */
.modal{ border:0; border-radius:14px; padding:0; }
.modal::backdrop{ background: var(--backdrop); }
.modal .form{ padding:18px; min-width:300px; }

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width:800px){
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .carousel .slides img{ height:160px; }
  .site-header .brand-slogan {
    display: none;
  }
  .site-header .brand-mark {
    width: 34px;
    height: 34px;
  }
}

/* =========================================
   RTL fine-tune
   ========================================= */
[dir="rtl"] .nav .link{ direction: rtl; }

/* ===== Long landing sections ===== */
.section { margin: 48px 0; }
.section h2 { margin: 6px 0 14px; }

/* ===== Professional Home Page ===== */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: 22px;
  align-items: stretch;
  margin: 22px 0 28px;
}

.home-hero-media,
.home-hero-copy,
.home-section,
.home-final-cta {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.home-hero-media {
  overflow: hidden;
  min-height: 430px;
}

.home-hero .carousel {
  height: 100%;
  min-height: 430px;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.home-hero .carousel .slides,
.home-hero .carousel .slides img {
  height: 100%;
}

.home-hero .carousel .slides {
  display: block;
  position: relative;
  transform: none;
}

.home-hero .carousel .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .45s ease;
}

.home-hero .carousel .slide.active {
  opacity: 1;
  z-index: 1;
}

.home-hero .carousel button {
  z-index: 3;
  pointer-events: auto;
}

.home-hero .carousel .slides img {
  width: 100%;
  min-height: 430px;
  object-fit: cover;
}

.home-hero .slide-overlay {
  position: absolute;
  inset: auto 0 0;
  padding: 24px;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(15, 23, 42, .72));
}

.home-hero .slide-title,
.home-hero .slide-subtitle {
  margin: 0;
  color: #fff;
}

.home-hero .slide-subtitle {
  margin-top: 6px;
}

.home-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 34px;
}

.home-eyebrow {
  display: none;
  width: max-content;
  max-width: 100%;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.home-hero-actions {
  justify-content: center;
}

.home-hero-copy h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.02;
}

.home-hero-copy p,
.home-section p,
.home-final-cta p {
  color: var(--muted);
}

.home-trust-row,
.home-featured-unis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 8px;
}

.home-trust-row span,
.home-featured-unis article {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--muted);
}

.home-trust-row strong,
.home-featured-unis strong {
  display: block;
  color: var(--text);
  font-size: 20px;
}

.home-featured-unis {
  overflow: hidden;
  padding-top: 8px;
  --uni-card-gap: 10px;
  --uni-card-width: 180px;
}

.rotating-three.is-switching,
.rotating-two.is-switching {
  opacity: .35;
  transform: translateY(4px);
}

.home-featured-unis .home-university-track {
  display: flex;
  gap: var(--uni-card-gap);
  width: max-content;
  will-change: transform;
  animation: homeUniversityMove var(--uni-speed, 28s) linear infinite;
}

.home-featured-unis:hover .home-university-track {
  animation-play-state: paused;
}

.home-featured-unis.is-static .home-university-track {
  width: 100%;
  animation: none;
}

.home-featured-unis .university-card {
  flex: 0 0 var(--uni-card-width);
  width: var(--uni-card-width);
  min-width: var(--uni-card-width);
}

@keyframes homeUniversityMove {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - (var(--uni-card-gap) / 2))); }
}

.home-band {
  margin: 22px 0;
}

.home-section {
  margin: 22px 0;
  padding: 24px;
}

.section-head {
  margin-bottom: 18px;
}

.section-head.split {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.section-head h2,
.home-final-cta h2 {
  margin: 6px 0 0;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.12;
}

.journey-grid,
.program-grid,
.why-grid,
.home-ann-grid,
.testimonial-grid {
  display: grid;
  gap: 14px;
}

.journey-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.journey-grid article,
.program-card,
.why-grid article,
.home-ann-card,
.testimonial {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}

.journey-grid article {
  min-height: 220px;
  display: flex;
  flex-direction: column;
}

.journey-grid strong {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
}

.journey-grid h3 {
  margin: 12px 0 14px;
}

.journey-sketch {
  position: relative;
  flex: 1;
  min-height: 118px;
  border: 1px dashed color-mix(in oklab, var(--brand) 42%, var(--border));
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--brand) 8%, transparent), transparent),
    var(--panel);
  overflow: hidden;
}

.journey-sketch::before,
.journey-sketch::after,
.journey-sketch i,
.journey-sketch b,
.journey-sketch span,
.journey-sketch em {
  content: "";
  position: absolute;
  display: block;
  box-sizing: border-box;
}

.sketch-profile i {
  width: 42px;
  height: 42px;
  left: 24px;
  top: 24px;
  border: 3px solid var(--text);
  border-radius: 50%;
}

.sketch-profile b {
  width: 74px;
  height: 38px;
  left: 8px;
  bottom: 18px;
  border: 3px solid var(--text);
  border-radius: 60px 60px 14px 14px;
  border-bottom-color: transparent;
}

.sketch-profile span,
.sketch-profile em {
  height: 8px;
  right: 18px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand) 70%, var(--text));
}

.sketch-profile span {
  width: 78px;
  top: 36px;
}

.sketch-profile em {
  width: 52px;
  top: 58px;
}

.sketch-docs i,
.sketch-docs b,
.sketch-docs span {
  width: 78px;
  height: 94px;
  border: 3px solid var(--text);
  border-radius: 8px;
  background: var(--panel);
}

.sketch-docs i { left: 28px; top: 14px; transform: rotate(-8deg); opacity: .45; }
.sketch-docs b { left: 52px; top: 18px; transform: rotate(5deg); opacity: .65; }
.sketch-docs span { left: 42px; top: 26px; }
.sketch-docs em {
  width: 38px;
  height: 38px;
  right: 20px;
  bottom: 18px;
  border-radius: 50%;
  border: 3px solid var(--brand);
}
.sketch-docs em::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 11px;
  width: 16px;
  height: 8px;
  border-left: 3px solid var(--brand);
  border-bottom: 3px solid var(--brand);
  transform: rotate(-45deg);
}

.sketch-track::before {
  left: 24px;
  right: 24px;
  top: 58px;
  border-top: 3px dashed color-mix(in oklab, var(--text) 58%, transparent);
}

.sketch-track i,
.sketch-track b,
.sketch-track span {
  width: 24px;
  height: 24px;
  top: 47px;
  border-radius: 50%;
  background: var(--panel);
  border: 3px solid var(--brand);
}

.sketch-track i { left: 28px; }
.sketch-track b { left: calc(50% - 12px); }
.sketch-track span { right: 28px; }
.sketch-track em {
  width: 64px;
  height: 46px;
  left: calc(50% - 32px);
  bottom: 12px;
  border: 3px solid var(--text);
  border-radius: 10px;
}
.sketch-track em::before,
.sketch-track em::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  height: 4px;
  border-radius: 999px;
  background: var(--brand);
}
.sketch-track em::before { top: 13px; }
.sketch-track em::after { top: 26px; width: 26px; right: auto; }

.sketch-offer i {
  width: 96px;
  height: 72px;
  left: 24px;
  top: 24px;
  border: 3px solid var(--text);
  border-radius: 8px;
  background: var(--panel);
}

.sketch-offer i::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 14%, 50% 66%, 0 14%);
  background: color-mix(in oklab, var(--brand) 24%, transparent);
}

.sketch-offer b {
  width: 52px;
  height: 52px;
  right: 22px;
  bottom: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
}

.sketch-offer span,
.sketch-offer em {
  width: 16px;
  height: 34px;
  right: 40px;
  bottom: 0;
  background: color-mix(in oklab, var(--brand2) 72%, var(--panel));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
}

.sketch-offer em {
  right: 22px;
  background: color-mix(in oklab, var(--brand) 72%, var(--panel));
}

.program-grid,
.home-ann-grid,
.testimonial-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-ann-carousel {
  position: relative;
}

.home-ann-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  color: #111827;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
  opacity: .78;
  transform: translateY(-50%);
  transition: opacity .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.home-ann-nav.prev {
  left: 14px;
}

.home-ann-nav.next {
  right: 14px;
}

.home-ann-carousel:hover .home-ann-nav,
.home-ann-nav:hover,
.home-ann-nav:focus-visible,
.home-ann-nav:active {
  opacity: 1;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 36px rgba(15, 23, 42, .24);
}

.home-ann-nav:hover,
.home-ann-nav:focus-visible {
  transform: translateY(-50%) scale(1.04);
}

.home-ann-grid {
  transition: opacity .2s ease, transform .2s ease;
}

.home-ann-grid.is-switching {
  opacity: .35;
  transform: translateX(8px);
}

.why-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.program-card span,
.home-ann-type {
  color: var(--brand);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
}

.program-card.skeleton {
  min-height: 260px;
  background: linear-gradient(90deg, var(--bg), var(--hover), var(--bg));
}

.rotating-three,
.rotating-two {
  transition: opacity .22s ease, transform .22s ease;
}

.media-card {
  overflow: hidden;
}

.home-card-photo,
.university-photo {
  display: block;
  width: calc(100% + 36px);
  max-width: none;
  height: 150px;
  margin: -18px -18px 16px;
  object-fit: cover;
  object-position: center center;
  transform: scale(1);
  transform-origin: center center;
  transition: transform .45s ease, filter .45s ease;
  border-bottom: 1px solid var(--border);
}

.media-card:hover .home-card-photo,
.why-card:hover .home-card-photo,
.university-card:hover .university-photo {
  transform: scale(1.075);
  filter: saturate(1.04);
}

.why-card {
  min-height: 360px;
  color: inherit;
  text-decoration: none;
}

.why-card.clickable {
  cursor: pointer;
}

.why-card.clickable:hover {
  border-color: var(--brand);
}

.why-card .home-card-photo {
  height: 220px;
}

.home-ann-card {
  display: flex;
  flex-direction: column;
  min-height: 190px;
  overflow: hidden;
}

.home-ann-card.skeleton {
  min-height: 170px;
  background: linear-gradient(90deg, var(--bg), var(--hover), var(--bg));
}

.home-ann-media {
  display: block;
  width: calc(100% + 36px);
  max-width: none;
  height: 180px;
  margin: -18px -18px 16px;
  object-fit: cover;
  object-position: center center;
  transform: scale(1);
  transform-origin: center center;
  transition: transform .45s ease, filter .45s ease;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--hover), var(--bg));
}

.home-ann-card:hover .home-ann-media {
  transform: scale(1.075);
  filter: saturate(1.04);
}

.home-ann-media.placeholder {
  position: relative;
}

.home-ann-media.placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 18%, transparent), transparent);
}

.home-ann-card h3 {
  margin: 8px 0;
}

.home-ann-card .actions {
  margin-top: auto;
  justify-content: flex-start;
  align-items: center;
}

.home-ann-like {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.home-ann-like span {
  font-size: 25px;
  line-height: 1;
}

.home-ann-like strong {
  font-size: 14px;
}

.home-ann-like:hover,
.home-ann-like:focus-visible {
  background: color-mix(in oklab, var(--danger, #e11d48) 10%, transparent);
  color: var(--danger, #e11d48);
  transform: translateY(-1px);
}

.home-ann-like.active {
  color: var(--danger, #e11d48);
}

.home-ann-like.active span {
  font-weight: 900;
}

.home-stats .stat {
  min-height: 130px;
}

.university-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.university-strip article,
.university-card {
  min-height: 110px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 10%, var(--panel)), var(--bg));
}

.university-strip strong,
.university-strip span,
.university-card strong,
.university-card span {
  display: block;
}

.university-card {
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.university-card.clickable {
  cursor: pointer;
}

.university-card.clickable:hover {
  border-color: var(--brand);
}

.university-card .university-photo {
  height: 86px;
  margin: -18px -18px 12px;
}

.compact-moving .university-card {
  min-height: 150px;
}

.compact-moving .university-card strong {
  font-size: 15px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.compact-moving .university-card span {
  color: var(--muted);
}

.home-dynamic-panels {
  margin: 22px 0;
}

.home-final-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin: 22px 0;
  padding: 28px;
}

.site-footer {
  margin-top: 28px;
}

@media (max-width: 1100px) {
  .home-hero,
  .journey-grid,
  .program-grid,
  .why-grid,
  .home-ann-grid,
  .testimonial-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .home-hero,
  .journey-grid,
  .program-grid,
  .why-grid,
  .home-ann-grid,
  .testimonial-grid,
  .home-trust-row,
  .home-featured-unis {
    grid-template-columns: 1fr;
  }
  .home-hero-copy {
    padding: 24px;
  }
  .home-final-cta,
  .section-head.split {
    flex-direction: column;
    align-items: stretch;
  }
  .home-ann-nav {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }
  .home-ann-nav.prev {
    left: 8px;
  }
  .home-ann-nav.next {
    right: 8px;
  }
}

.features-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;
}
.feature {
  background: var(--panel); border:1px solid var(--border); border-radius: var(--radius);
  padding:16px; box-shadow: var(--shadow);
}
.feature .icon { font-size:28px; }
.feature h3 { margin:6px 0 8px; }

/* Stats */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
.stat { text-align:center; background: var(--panel); border:1px solid var(--border);
  border-radius: var(--radius); padding:18px; box-shadow: var(--shadow); }
.stat big { font-size:28px; font-weight:800; display:block; }

/* Steps timeline */
.timeline { list-style:none; padding:0; margin:0; counter-reset: step; }
.timeline li {
  position:relative; background: var(--panel); border:1px solid var(--border);
  border-radius: var(--radius); padding:16px 16px 16px 52px; margin:10px 0; box-shadow: var(--shadow);
}
.timeline li::before {
  counter-increment: step; content: counter(step);
  position:absolute; left:14px; top:14px; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; font-weight:700;
}

/* Testimonials */
.testimonials { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.testimonial { background: var(--panel); border:1px solid var(--border); border-radius: var(--radius); padding:16px; box-shadow: var(--shadow); }
.testimonial .who { color: var(--muted); margin-top:8px; }

/* Partners */
.partners { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; align-items:center; }
.partner { background: var(--panel); border:1px solid var(--border); border-radius: 12px; padding:14px; text-align:center; color: var(--muted); }

/* FAQ */
.faq .item { background: var(--panel); border:1px solid var(--border); border-radius: var(--radius); margin:8px 0; }
.faq .q { width:100%; text-align:left; padding:14px; background:transparent; border:0; color:var(--text); cursor:pointer; }
.faq .a { padding:0 14px 14px; color: var(--muted); display:none; }
.faq .item.open .a { display:block; }
.faq .item.open .q { background: var(--hover); border-radius: var(--radius) var(--radius) 0 0; }

/* Reveal on scroll */
.reveal { opacity:0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.reveal.in { opacity:1; transform:none; }

/* Sticky community notice (legacy) */
.sticky-notice {
  position: fixed; left:0; right:0; bottom:0; z-index: 30;
  display:flex; gap:12px; align-items:center; justify-content:center;
  background: var(--panel); border-top:1px solid var(--border);
  padding: 12px 16px;
}

/* Sticky CTA (matches #communityJoinBar markup) */
.sticky-cta {
  position: fixed; left:0; right:0; bottom:0; z-index: 30;
  background: var(--panel); border-top:1px solid var(--border);
  padding: 12px 16px;
}
.sticky-cta .cta-inner {
  max-width: 1100px; margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

/* Guest-disabled look for forms/buttons */
.disabled, .disabled *[type="submit"] { pointer-events:none; opacity:.65; }

/* Locked profile (after Save) */
.form.is-locked input:disabled,
.form.is-locked select:disabled,
.form.is-locked textarea:disabled {
  opacity: .7;
  cursor: not-allowed;
  background: var(--surface-2, #f3f4f6);
}

/* Settings menu (popover) */
.menu{
  position:absolute; right:0; top:44px;
  background: var(--panel, #fff);
  border:1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  min-width: 200px;
  padding: 8px;
  z-index: 10050;
  opacity: 1;
  backdrop-filter: none;
}
.menu-title{
  font-weight: 600; color: var(--muted);
  padding: 6px 8px 8px; border-bottom:1px solid var(--border); margin-bottom:6px;
}
.menu .menu-item{
  width:100%; text-align:left;
  background:transparent; border:0; color:var(--text);
  padding:8px 10px; border-radius:10px; cursor:pointer;
}
.menu .menu-item:hover{ background: var(--hover); }
.menu .menu-item.danger{ color: var(--danger); }
.close-x{
  position:absolute; top:8px; right:8px;
  background: transparent; border:0; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer;
}

#modal-changePass,
#modal-deleteAccount,
#modal-help,
#modal-codes,
#cropModal,
#modal-signin,
#modal-signup,
#modal-access {
  background: var(--panel, #fff) !important;
  color: var(--text, #111827) !important;
  opacity: 1 !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.34) !important;
  backdrop-filter: none !important;
}

#modal-changePass::backdrop,
#modal-deleteAccount::backdrop,
#modal-help::backdrop,
#modal-codes::backdrop,
#cropModal::backdrop,
#modal-signin::backdrop,
#modal-signup::backdrop,
#modal-access::backdrop {
  background: rgba(15, 23, 42, 0.62) !important;
  backdrop-filter: none !important;
}

#modal-changePass .form,
#modal-deleteAccount .form,
#modal-help .form,
#modal-codes .form,
#cropModal .form,
#modal-signin .form,
#modal-signup .form,
#modal-access .form {
  background: var(--panel, #fff) !important;
  color: var(--text, #111827) !important;
  opacity: 1 !important;
}

#modal-signin,
#modal-signup,
#modal-access {
  width: min(520px, calc(100vw - 40px)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 40px) !important;
  max-height: calc(100vh - 40px) !important;
  overflow-y: auto !important;
  padding: 0 !important;
}

#modal-signin .form,
#modal-signup .form,
#modal-access .form {
  padding: 24px !important;
  min-width: 0 !important;
}

#modal-signin .auth-brand,
#modal-signup .auth-brand {
  margin-bottom: 14px;
}

#modal-signin .btn-row,
#modal-signup .btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ===== Admin extras ===== */
#panelList .card { margin:6px 0; }

/* ===== Admin shell (sidebar layout) ===== */
.admin-shell{ display:grid; grid-template-columns: 240px 1fr; gap:14px; }
.admin-nav{
  position:sticky; top:74px; align-self:start;
  background: var(--panel); border:1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding:10px; height:max-content;
}
.admin-nav-title{ font-weight:700; margin:6px 6px 10px; color: var(--muted); }
.admin-nav-item{
  width:100%; text-align:left; background:transparent; border:0; color:var(--text);
  padding:10px 12px; border-radius:10px; cursor:pointer;
}
.admin-nav-item:hover{ background: var(--hover); }
.admin-nav-item.active{ background: color-mix(in oklab, var(--brand) 16%, transparent); }
.admin-nav-item[disabled]{ opacity:.5; cursor:not-allowed; }

.admin-main{
  display:block;
  min-width: 0;
  overflow-x: hidden;
}

#adminContent {
  width: 100%;
  min-width: 0;
  max-width: none;
}
.admin-topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.admin-topbar #adminViewTitle{ font-weight:700; }
.kpi-row .kpi{ text-align:center; }
.kpi .kpi-num{ font-size:28px; font-weight:800; }

/* ===== User Manager table ===== */
.admin-toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.admin-toolbar .field { min-width:160px; }
.table-wrap {
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling: touch;
}
.user-table {
  width:100%;
  min-width: 980px;
  border-collapse: collapse;
}
.user-table th, .user-table td {
  padding:10px; border-bottom:1px solid var(--border); vertical-align: middle;
}
.user-row:hover { background: var(--hover); }
.avatar { width:34px; height:34px; border-radius:999px; background:#a6b3c6; object-fit:cover; display:inline-block; }

/* Status / payment pills */
.pill { padding:4px 8px; border-radius:999px; font-size:12px; display:inline-block; }
.pill.ok    { background: color-mix(in oklab, var(--ok) 25%, transparent); color:#0f5132; }
.pill.warn  { background: #fff3cd; color:#664d03; }
.pill.danger{ background: #f8d7da; color:#842029; }
.pill.muted { background: rgba(255,255,255,.06); color: var(--muted); }

/* Row actions (dropright) */
.row-actions { position: relative; }
.row-actions .menu {
  position:absolute; right:0; top:28px; min-width:180px;
}
.row-actions .menu .menu-item { display:block; width:100%; }

/* Expandable details */
.user-details.hidden { display:none; }
.details {
  background: color-mix(in oklab, var(--brand) 3%, transparent);
  border-left:3px solid color-mix(in oklab, var(--brand) 40%, transparent);
  border-radius: 10px; padding: 12px; margin: 8px 0;
}
.details .grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:10px; }

#slideModal,
#statModal,
#panelModal,
#testimonialModal,
#partnerModal,
#footerModal {
  width: min(960px, calc(100vw - 48px)) !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100vh - 48px) !important;
  overflow: auto !important;
  background: var(--panel, #fff) !important;
  color: var(--text, #111827) !important;
  opacity: 1 !important;
}

#slideModal .form,
#statModal .form,
#panelModal .form,
#testimonialModal .form,
#partnerModal .form,
#footerModal .form {
  min-width: 0 !important;
  background: var(--panel, #fff) !important;
  color: var(--text, #111827) !important;
}

#panelTabContent,
#panelTabContent .card {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

#panelTabContent .table-wrap {
  overflow-x: auto;
}

/* Responsive sidebar */
@media (max-width: 900px){
  .admin-shell{ grid-template-columns: 1fr; }
  .admin-nav{ position:relative; top:auto; display:flex; gap:6px; overflow:auto; }
  .admin-nav-title{ display:none; }
  .admin-nav-item{ white-space:nowrap; }
}

/* =========================================
   Apply Wizard - Milestone Topbar (refined)
   ========================================= */

.milestones-bar {
  position: relative;
  padding: 20px 0;
  background: transparent;
  overflow: visible;
}

/*  Old progress bar container is kept but hidden;
   JS can still touch it without visual effect. */
.milestones-bar .track {
  position: absolute;
  inset: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}
.milestones-bar .track .fill { width: 0; height: 0; }

/* Horizontal scroll container */
.scroll-wrapper {
  position: relative;          /* establish containing block */
  overflow-x: auto;
  padding: 0 40px;
}

/* The actual milestones row */
.milestones {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  min-width: 1000px;
  padding: 0 0 20px;
  z-index: 0;                  /* for stacking with ::before line */
}

/* Link The linked line that stays centered with spheres and scrolls with them */
.milestones::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;                    /* stretches across full milestones width */
  top: 15px;                   /* = half of circle (30px) -> centers through spheres */
  height: 4px;
  background: color-mix(in oklab, var(--muted) 18%, transparent);
  border-radius: 4px;
  z-index: 0;                  /* stays behind circles */
}

/* Individual step */
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  min-width: 100px;
  text-align: center;

  /* Dynamic feel */
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
  transform-origin: center bottom;
}

/* The sphere */
.step .circle {
  background: #e53e3e;         /* default red */
  color: #fff;
  font-weight: bold;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  transition: background .3s ease, box-shadow .18s ease, transform .18s ease;
  position: relative;          /* lift above the line */
  z-index: 1;
}

/* Active/current step made grey by JS (inline style or class) */
.step.active .circle {
  background: #9ca3af;
}

/* Proximity "zoom out" presentation:
   - Hovered milestone gets BIGGER than others.
   - Neighbors stay near 1.0 or slightly smaller.
   - Everyone else shrinks a bit for contrast. */
.milestones:has(.step:hover) .step {
  transform: scale(0.92);
  filter: saturate(.9);
  opacity: .95;
}

.milestones .step:hover {
  transform: translateY(-2px) scale(1.30);
  filter: none;
  opacity: 1;
}
.milestones .step:hover .circle {
  box-shadow: 0 10px 24px rgba(0,0,0,.25),
              0 0 0 6px color-mix(in oklab, var(--brand) 18%, transparent);
}

/* Nearest neighbors (next) */
.milestones .step:hover + .step {
  transform: translateY(-1px) scale(1.00);
  opacity: .98;
}
/* Second next neighbor */
.milestones .step:hover + .step + .step {
  transform: scale(0.96);
  opacity: .97;
}

/* Nearest neighbors (previous) using :has to look ahead */
.milestones .step:has(+ .step:hover) {
  transform: translateY(-1px) scale(1.00);
  opacity: .98;
}
/* Second previous neighbor */
.milestones .step:has(+ .step + .step:hover) {
  transform: scale(0.96);
  opacity: .97;
}

/* Keyboard accessibility mirrors hover pop */
.step:focus-within,
.step:focus {
  outline: none;
  transform: translateY(-2px) scale(1.24);
}
.step:focus-within .circle,
.step:focus .circle {
  box-shadow: 0 10px 24px rgba(0,0,0,.25),
              0 0 0 6px color-mix(in oklab, var(--brand) 20%, transparent);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .step, .step .circle,
  .milestones,
  .milestones .step:hover,
  .milestones:has(.step:hover) .step {
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================
   Account layout bits
   ========================================= */
.flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.grid-name-photo {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

.photo-placeholder {
  display: inline-block;
  width: 120px;
  height: 150px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: var(--hover);
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.photo-placeholder:hover {
  border-color: var(--brand);
  background: color-mix(in oklab, var(--brand) 8%, transparent);
}

.photo-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.upload-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--muted);
  font-weight: 600;
  pointer-events: none;
  background: rgba(255,255,255,0.6);
  padding: 4px 10px;
  border-radius: 8px;
}

.name-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.zoom-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.zoom-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.crop-area {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 10px 0;
}

#cropFrame {
  width: 120px;
  height: 150px;
  border: 2px dashed #ccc;
  overflow: hidden;
  position: relative;
  background: #f4f4f4;
}

#cropFrame img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: grab;
  transform-origin: center;
  transition: transform 0.1s ease;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #111827;
}

/* required field hint (JS inserts) */
.field-hint{
  color:#b91c1c;            /* red-700 */
  font-size:12px;
  margin:4px 2px 0;
}

/* Small hint for the yes/no switch button */
.switch-hint {
  color: #888;
  font-size: 12px;
  font-style: italic;
  margin-left: 4px;
  user-select: none;
}
/* =========================================
   Milestones line fix - make row as wide as content
   ========================================= */

/* Ensure the scroller still scrolls */
.scroll-wrapper {
  position: relative;
  overflow-x: auto;
  padding: 0 40px; /* keep your side paddings */
}

/* Make the milestones strip grow to the total width of all steps */
.milestones {
  position: relative;
  display: inline-flex;         /* inline-flex so width = content width */
  justify-content: flex-start;  /* no stretching; spacing comes from gap */
  gap: 40px;
  min-width: 0;                 /* allow natural width */
  width: max-content;           /* key: expand to the sum of children */
  padding: 0 15px 20px;         /* 15px = half of 30px circle; centers line ends */
  z-index: 0;
}

/* the connected line that scrolls with the row */
.milestones::before {
  content: "";
  position: absolute;
  left: 0;                      /* now aligned with the 15px padding above */
  right: 0;
  top: 15px;                    /* = 30px circle / 2, so it passes through centers */
  height: 4px;
  background: color-mix(in oklab, var(--muted) 18%, transparent);
  border-radius: 4px;
  z-index: 0;                   /* keep behind spheres */
}

/* Prevent steps from flexing/shrinking so they contribute to width */
.step {
  flex: 0 0 auto;
}

/* Spheres stay above the line */
.step .circle {
  position: relative;
  z-index: 1;
}

/* My Applications table (responsive + centered) */
.apps-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: color-mix(in oklab, var(--panel) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.apps-table th, .apps-table td {
  text-align: center;             /* center cells */
  padding: 12px 14px;
  white-space: nowrap;
}
.apps-table thead th {
  background: color-mix(in oklab, var(--panel) 72%, var(--brand) 3%);
  font-weight: 700;
  letter-spacing: .2px;
}
.apps-table tbody tr:not(:last-child) td {
  border-bottom: 1px dashed var(--border);
}
.apps-table tbody tr:hover {
  background: color-mix(in oklab, var(--panel) 95%, var(--brand) 5%);
}

/* styles.css */
.btn-danger { background:#e74c3c; color:#fff; }
.btn-danger:hover { background:#c0392b; }

/* Make Address field take full width */
#ref-address {
  width: 100%;
  box-sizing: border-box;
}

.flash.local {
  margin-bottom: 10px;
}

/* the small grey circle button */
.help-tip{
  position: relative;              /* needed for the tooltip positioning */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: 50%;
  background: #e5e7eb;            /* grey */
  color: #111;
  font-size: 11px;
  line-height: 1;
  cursor: help;
  user-select: none;
  -webkit-user-drag: none;
}

/* the visible "?" inside the circle */
.help-tip::before{
  content: '?';
  font-weight: 700;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  transform: translateY(-0.5px);   /* small optical tweak */
}

/* tooltip container */
.help-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f0f2f5;       /* light gray background */
  border: 2px solid #3b82f6; /* blue accent border */
  color: #3b82f6;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* hover effect */
.help-tip:hover {
  background: #3b82f6;
  color: #fff;
  transform: scale(1.1);
}

/* modern "info" icon */
.help-tip::before {
  content: "?";
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  font-family: "Segoe UI Symbol", sans-serif;
}

/* tooltip bubble (unchanged size & rules) */
.help-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  width: 120px;
  white-space: normal;
  padding: 8px;
  border-radius: 6px;
  background: rgba(17,17,17,0.9);
  color: #fff;
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 50;
}

/* show bubble on hover */
.help-tip:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-3px);
}

/* ==== Community Page ==== */
.community{
  display:grid; grid-template-columns: 260px 1fr; gap:14px;
}
.c-left{
  position:sticky; top:74px; align-self:start;
  background: var(--panel); border:1px solid var(--border);
  border-radius: var(--radius); padding:12px;
}
.c-filter-title{ margin:10px 0 6px; color: var(--muted); }
/* --- Collapsible filter groups (with small caret) --- */
.c-filter-group{
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 10px;
   /* Change overall box dimensions */
  min-height: 44px;      /* controls collapsed height */
  width: 100%;           /* can narrow or widen */
  background: color-mix(in oklab, var(--panel) 95%, transparent);
}

.c-filter-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding: 4px 10px; cursor:pointer; user-select:none;
  border-radius: 10px 10px 0 0;
}
.c-filter-head:hover{ background: var(--hover); }

/* Tiny caret (SVG mask so it adapts to theme colors) */
.c-caret{
  width: 30px; height: 30px; flex:0 0 30px;
  background: currentColor;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M7 10l5 5 5-5z'/></svg>") center / 18px 18px no-repeat;
  opacity: .8; transition: transform .18s ease, opacity .18s ease;
}

/* Hidden list by default; slide/fade on reveal */
/* Hidden by default */
.c-checklist{
  overflow: hidden;                 /* no scroll when closed */
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height .28s ease, opacity .2s ease, visibility .2s step-end;
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 10px 8px;
}

/* Open on hover (desktop) */
.c-filter-group:hover .c-checklist{
  max-height: 360px; opacity: 1; visibility: visible;
  transition: max-height .28s ease, opacity .2s ease, visibility 0s step-start;
}
.c-filter-group:hover .c-caret{ transform: rotate(180deg); opacity: 1; }

/* Open when toggled (mobile/touch) */
.c-filter-group.open .c-checklist{
  max-height: 360px; opacity: 1; visibility: visible;
}
.c-filter-group.open .c-caret{ transform: rotate(180deg); opacity: 1; }

/* Reveal on hover */
.c-filter-group:hover .c-checklist,
.c-filter-group.open .c-checklist{
  max-height: 320px;                /* <= visible window height */
  opacity: 1;
  visibility: visible;
  overflow-y: auto;                  /* <-- scroll when content exceeds */
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
}

/* Optional: nicer thin scrollbar */
.c-filter-group .c-checklist::-webkit-scrollbar { width: 8px; }
.c-filter-group .c-checklist::-webkit-scrollbar-thumb {
  background: var(--hover);
  border-radius: 8px;
}
.c-filter-group .c-checklist{ scrollbar-width: thin; }

/* --- Each option on its own line, with hover/select effects --- */
.c-checklist label{
  display:flex; align-items:center; gap:10px;
  padding:8px; border-radius:8px; cursor:pointer;
  transition: background .15s ease, transform .12s ease;
}
.c-checklist label:hover{
  background: var(--hover);
  transform: translateX(2px);
}

/* put the label text in a span so we can style on :checked */
.c-checklist label span{ flex:1; }

/* highlight selected option */
.c-checklist input[type="checkbox"]:checked + span{
  font-weight: 600;
  color: var(--text);
}

/* subtle focus for keyboard users */
.c-checklist input[type="checkbox"]:focus-visible + span{
  outline: 2px solid color-mix(in oklab, var(--brand) 40%, transparent);
  outline-offset: 2px;
}


.c-main{ display:flex; flex-direction:column; gap:12px; }

/* Top bar: 3-column grid: [search] [title] [add] */
/* Top bar: keep 3 tracks; animate the first track via a variable */
.c-top {
  display: grid;
  /* [search] [title] [add]  - always 3 tracks */
  grid-template-columns: var(--search-col, 120px) 1fr auto;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1px 12px;

  /* smooth column width animation */
  transition: grid-template-columns .65s cubic-bezier(.22,1,.36,1);
}

/* when active, search column grows to fill available space */
.c-top.search-active {
  --search-col: 1fr;
}

/* Title: fade/slide instead of display:none for smoothness */
.c-title {
  justify-self: center;
  transform: translateX(-20px);
  font-size: 24px;
  font-weight: 800;
  cursor: pointer;
  opacity: 1;
  transition: opacity .55s ease, transform .55s ease;
  font-family: "Georgia", serif;   /* change font */
  font-style: italic;              /* make italic */
  letter-spacing: 1px;             /* more spacing */
}


.c-title:hover {
  color: var(--brand);
}

.c-top.search-active .c-title {
  opacity: 0;
  transform: translateX(-20px) translateY(-4px);
  pointer-events: none;
  /* keep element in flow so grid interpolation stays smooth */
}

/* Search pill: let inner input animate its width for a "breathing" effect */
.c-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 8px;

  /* soften the feel as width grows */
  transition: border-color .45s ease, padding .35s ease, background-color .35s ease;
}

.c-search input{
  border:0;
  background:transparent;
  outline:none;
  color:var(--text);

  /* start slightly narrow and expand smoothly */
  width: 140px;
  transition: width .65s cubic-bezier(.22,1,.36,1);
}

.c-top.search-active .c-search { /* the pill itself stays responsive via grid */
  /* optional: slightly more padding when expanded */
  padding: 6px 10px;
}

.c-top.search-active .c-search input{
  width: 100%; /* animate to full track width */
}

/* Feed / post cards */
.c-feed{ display:flex; flex-direction:column; gap:12px; }
/* ==== Community - Post Card (theme-aware) ==== */
.c-post{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.c-post .head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom: 10px;
}
.c-post .who{ display:flex; align-items:center; gap:12px; }
.c-post .avatar{
  width:52px; height:52px; border-radius:999px; object-fit:cover;
  background:#a6b3c6; outline:2px solid var(--border);
}

.c-post .title{
  font-weight:800; margin:10px 0 8px; font-size: clamp(16px, 2vw, 20px);
  color: var(--text);
}
.c-post .body{
  color: var(--text);
  opacity:.95;
}
.c-post .body .more{ color: var(--muted); }

.c-post .media{
  margin-top: 14px;
  background: color-mix(in oklab, var(--hover) 50%, transparent);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
}
.c-post .c-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; }

/* Post footer (views + actions row) */
.c-post .foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}

.c-post .foot-left{ display:flex; flex-direction:column; gap:6px; }
.c-post .foot-left .views{ font-size:14px; color: var(--text); }

.c-post .actions{
  display:flex; align-items:center; gap:14px;
}
.c-post .actions .likes{
  display:inline-flex; align-items:center;
  background: var(--hover); border:1px solid var(--border); /*box*/
  border-radius:999px; overflow:hidden;
}
.c-post .actions .likes button{
  padding:6px 12px; border:0; background:transparent;
  font-size:14px; color: var(--text); cursor:pointer;
}
.c-post .actions .likes button + button{
  border-left:1px solid var(--border);         /*box / */
}
.c-post .actions .comments{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; color: var(--text);
  cursor:pointer;
}
.c-post .pills{ display:flex; gap:8px; }
.c-post .pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--border); background: var(--hover); color: var(--text);
  font-size: 13px;
}

/* Comment input strip (dark bar) */
.c-post .comment-strip{
  margin-top: 0; /* sits flush to card edge */
  border-radius: 0 0 var(--radius) var(--radius);
  background: color-mix(in oklab, var(--bg) 92%, #000);
  border-top: 1px solid var(--border);
  padding: 10px 12px;
}
.c-post .comment-box{
  display:flex; align-items:center; gap:10px;
  background: transparent;
}
.c-post .comment-box .avatar{ width:34px; height:34px; }
.c-post .comment-input{
  flex:1; background: var(--input); border:1px solid var(--border);
  color: var(--text); border-radius:999px; padding:10px 12px; outline:none;
}

/* Comments list section (below) */
.c-post .comments-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top: 12px; color: var(--text);
}
.c-post .comments{ background: color-mix(in oklab, var(--panel) 92%, transparent);
  border:1px solid var(--border); border-radius:0 0 var(--radius) var(--radius); }
.c-comment{ padding:10px 12px; border-top:10px solid var(--border); }
.c-comment .meta{ color: var(--muted); font-size:12px; }
.c-comment .reply{ margin-left:38px; border-left:2px solid var(--border); padding-left:8px; }


/* .row{ display:flex; gap:8px; align-items:center; }*/
.row.between{ justify-content:space-between; }
.row.end{ justify-content:flex-end; }


@media (max-width: 900px){
  .community{ grid-template-columns: 1fr; }
  .c-left{ position:relative; top:auto; }
  /* On mobile, let search be full width by default */
  .c-top{ grid-template-columns: 1fr auto; }
  .c-title{ display:none; }
}
/* Switch */
.switch {
  position: relative;
  width: 46px;
  height: 26px;
  display: inline-block;
}
.switch input {
  display: none;
}
.switch span {
  position: absolute;
  inset: 0;
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background .25s ease, border .25s ease;
}
.switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);  /* adjust this */
  transition: left .25s ease, background .25s ease;
}

/* ON state: gradient like Add button */
.switch input:checked + span {
  border: 0;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
}
.switch input:checked + span::after {
  left: 23px;
  background: #fff; /* knob stays white for contrast */
}

/* Whole group box (base) */
.c-filter-group{
  border: 1px solid var(--border);
  border-radius: 8px;          /* slightly tighter corners */
  margin-top: 8px;
  background: color-mix(in oklab, var(--panel) 95%, transparent);
  overflow: hidden;            /* keep the rounded shape clean */
}

/* ON look only when selections exist AND list is collapsed */
.c-filter-group.has-sel:not(:hover){
  background: color-mix(in oklab, var(--brand) 10%, var(--panel));
  border-color: color-mix(in oklab, var(--brand) 40%, var(--border));
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--brand) 30%, transparent);
}

/* Header - more compact */
.c-filter-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 8px;
  padding: 6px 10px;           /* reduced height */
  cursor: pointer;
  user-select: none;
  background: transparent;
}
.c-filter-head:hover{ background: var(--hover); }

/* Tiny selection badge */
.c-badge{
  display: none;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  transform: translateY(0);
  transition: transform .18s ease, opacity .18s ease;
}

/* Show badge only when selections exist AND list is collapsed */
.c-filter-group.has-sel:not(:hover) .c-badge{ display: inline-flex; }
.c-filter-group:hover .c-badge{ display: none; }

/* Caret stays on the far right */
.c-caret{ margin-left: auto; }

.ico-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: inline-block;
  filter: invert(1);
}

body.light .ico-img {
  filter: none;
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-nav-item .menu-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* same hover effect as before */




/* Apply the hover effect and keep it after clicking (active state) for both like and dislike */
.c-post .likes button:hover .ico-img,
.c-post .likes .like-btn.active .ico-img {
  filter: brightness(1.4) contrast(1.2) drop-shadow(0 0 2px #4374fa);
  transform: scale(1.08);  /* subtle zoom */
  transition: filter .2s ease, transform .2s ease;
}

.c-post .likes .dislike-btn.active .ico-img {
  filter: brightness(1.4) contrast(1.2) drop-shadow(0 0 2px #4374fa);
  transform: scale(1.08);  /* subtle zoom */
  transition: filter .2s ease, transform .2s ease;
}


.c-post .comment-count:hover .ico-img {
  filter:
    brightness(1.4)            /* brighten the icon */
    contrast(1.2)              /* make it pop */
    drop-shadow(0 0 2px #4374fa);
  transform: scale(1.08);      /* subtle zoom */
  transition: filter .2s ease, transform .2s ease;
}

/* Comment counter (right side): no box, no border */
.c-post .comment-count{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background: transparent;     /* no box */
  border: 0;                    /* no border */
  padding: 0;                   /* remove default button padding */
  color: var(--text);
  font-size:14px;
  cursor:pointer;
}

/* Icon + count perfectly aligned */
.c-post .comment-count .ico-img{
  width:18px; height:18px;
  object-fit:contain;
  display:inline-block;
  vertical-align:middle;
  transition: filter .15s ease, transform .15s ease;
}
.c-post .comment-count span{
  line-height:18px;            /* align baseline with the icon */
  display:inline-block;
}

/* Hover: brighten + subtle faux-stroke via drop-shadows */
.c-post .comment-count:hover{
  color: var(--brand);
}
.c-post .comment-count:hover .ico-img{
  /* subtle "stroke on" look for raster icons */
  filter:
    brightness(1.15) contrast(1.15)
    drop-shadow(0 0 0.5px currentColor)
    drop-shadow(0 0 0.5px currentColor);
  transform: translateY(-1px) scale(1.04);
}
/* default look */
.c-post .views {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 14px;
  transition: color .2s ease;
}

.c-post .views .ico-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  transition: filter .2s ease, transform .2s ease;
}

/* hover: light up icon + text */
.c-post .views:hover {
  color: #4374fa; /* both text and icon adopt brand color */
}

.c-post .views:hover .ico-img {
  filter:
    brightness(1.5)
    contrast(1.2)
    drop-shadow(0 0 2px #4374fa);
  transform: scale(1.08);
}
.comment-box {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 8px;
  align-items: center;
}
.comment-box .btn.send {
  padding: 6px 10px;
  border-radius: 8px;
}
/* Peek comments under feed card: compact spacing */
.c-comments-peek .c-comment.peek {
  padding: 8px 10px;
  border-top: 1px solid var(--border);
}
.c-comments-peek .c-comment.peek .meta { color: var(--muted); }
/* Peek toggle pill (under each post) */
/* Peek toggle pill (under each post) */
.c-peek-toggle {
  width: 100%;
  padding: 6px 12px;          /* shorter height */
  border: 1px solid var(--border, rgba(255,255,255,.15));
  background: transparent;
  color: var(--text, #ddd);
  border-radius: 999px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: .95;
  cursor: pointer;

  /* Remove native browser styling */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none !important;
}

.c-peek-toggle:hover {
  background: var(--card, rgba(255,255,255,.06));
  border-color: var(--accent, rgba(100,140,255,.6));
  box-shadow: inset 0 0 0 1px var(--accent, rgba(100,140,255,.4));
}

/* Only show the chevron text (v or ^) */
.c-peek-toggle .chev {
  font-size: 12px;
  line-height: 1;
  transition: transform .18s ease;
  /* Ensure the chevron arrows are the only visible content */
  display: inline-block;
}

.c-peek-toggle[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}


/* Hide any default icons */
.c-peek-toggle .chev::before {
  content: none;
}

/* Add a simple label text style */
.c-peek-toggle .label {
  font-size: 14px; /* Modify as needed */
  text-align: center;
}
/* Remove frame for Like & Reply in comments */
.c-comment .btn[data-cl],
.c-comment .btn[data-reply] {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 2px 4px;       /* tighter fit */
  font-size: 13px;
  color: var(--text, #aaa);
  cursor: pointer;
}

/* Hover styles */
.c-comment .btn[data-cl]:hover,
.c-comment .btn[data-reply]:hover {
  color: var(--accent, #4374fa);
  filter: brightness(1.2);
}

/* Normal style (flat) */
.c-comment .btn[data-cl] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 2px 4px;
  font-size: 13px;
  color: var(--text, #aaa);
  cursor: pointer;
}

/* Hover preview */
.c-comment .btn[data-cl]:hover .ico-img {
  filter: brightness(1.4) contrast(1.2) drop-shadow(0 0 2px #4374fa);
  transform: scale(1.08);
  transition: filter .2s ease, transform .2s ease;
}

/* Active (persist when clicked) */
.c-comment .btn[data-cl].active .ico-img {
  filter: brightness(1.6) contrast(1.3) drop-shadow(0 0 3px #4374fa);
  transform: scale(1.1);
}

/* Reply button stays flat but has hover color */
.c-comment .btn[data-reply] {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 2px 4px;
  font-size: 13px;
  color: var(--text, #aaa);
  cursor: pointer;
}
.c-comment .btn[data-reply]:hover {
  color: var(--accent, #4374fa);
}

/* Flat, frameless buttons */
.c-comment .btn[data-cl],
.c-comment .btn[data-reply]{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 2px 4px;
  display:inline-flex; align-items:center; gap:4px;
  font-size:13px; color: var(--text, #aaa);
  cursor:pointer;
}



/* Persist "on" only when pressed */
.c-comment .btn[data-cl][aria-pressed="true"] .ico-img{
  filter: brightness(1.6) contrast(1.3) drop-shadow(0 0 3px #4374fa);
  transform: scale(1.08);
}

/* Busy (during request) */
.c-comment .btn[data-cl][aria-busy="true"]{
  opacity:.6; pointer-events:none;
}


/* base comment */
.c-comment { margin-top: 10px; }
.c-comment .row { display: flex; gap: 10px; align-items: flex-start; }
.c-comment .meta { font-size: 12px; color: #667085; }

/* replies appear indented like FB */
.c-comment.reply {
  margin-left: 44px;              /* indent under parent */
  border-left: 2px solid #eef2f7; /* subtle thread line */
  padding-left: 12px;
}

/* smaller avatar in replies */
.c-comment.reply .avatar { width: 24px; height: 24px; }

/* compact action buttons */
.c-comment .btn { font-size: 12px; padding: 2px 6px; }
.c-comment .btn + .btn { margin-left: 6px; }

/* inline reply input shares reply visuals */
.reply-input-row input.replyInput {
  width: 100%;
  border: 1px solid #d0d7de;
  border-radius: 16px;
  padding: 6px 10px;
  outline: none;
}
.reply-input-row input.replyInput:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148,163,184,.2);
}
.more {
  cursor: pointer;
  color: #3b82f6;        /* same light blue as Reply */
  font-size: 0.9em;
  font-weight: 500;
  background: none;
  border: none;
  padding: 0;
}

.more:hover {
  text-decoration: underline;
}
/* Remove background/box from kebab menu buttons */
button.kebab {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 4px !important;
  cursor: pointer;
  font-size: 18px;       /* keep the ... nice and visible */
  line-height: 1;
  color: #555;           /* neutral gray, matches your UI */
}

button.kebab:hover {
  color: #000;           /* darken on hover */
  background: none !important;
}
/* Fullscreen backdrop */
.img-lightbox {
  border: 0;
  padding: 0;
  background: rgba(0,0,0,0.9);
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 9999;            /* ensure over everything */
}

/* reset: never show when not open */
.img-lightbox:not([open]) { display: none !important; }

/* only when open, make it fullscreen */
.img-lightbox[open] {
  border: 0;
  padding: 0;
  background: rgba(0,0,0,0.9);
  width: 100vw;
  height: 100vh;
  display: flex;             /* <-- moved here from base rule */
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.img-lightbox::backdrop { background: rgba(0,0,0,0.1); }

/* frame and inside stay the same */
:root { --lb-w: 700px; --lb-h: 700px; }
.lb-frame { position: relative; width: min(var(--lb-w), 90vw); height: min(var(--lb-h), 88vh); display: flex; align-items: center; justify-content: center; }
.lb-frame img {  width: auto; height: auto; background: #111; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.55); transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--scale, 1)); transform-origin: center center; transition: transform 0.2s ease; cursor: zoom-in; }
/* when zoomed, show "-" cursor */
.lb-frame img.zoomed {
  cursor: zoom-out;         /* shows "-" */
}

/* (optional) nicer drag cursor while panning */
.lb-frame img.zoomed.dragging {
  cursor: grabbing;
}
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.55); color: #fff; font-size: 28px; display: grid; place-items: center; cursor: pointer; user-select: none; }
.lb-nav:hover { background: rgba(0,0,0,0.75); }
.lb-prev { left: -56px; }
.lb-next { right: -56px; }
.lb-counter { position: absolute; bottom: -34px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.5); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 12px; }
.img-lightbox[data-single="1"] .lb-nav,
.img-lightbox[data-single="1"] .lb-counter { display: none; }

/* ===== Announcements ===== */
.a-top{
  display:grid;
  grid-template-columns: 140px 1fr auto; /* search | title | add */
  align-items:center; gap:12px;
}
/* Top bar page title only */
#aTitle{
  justify-self:center;
  font-size:24px;
  font-weight:800;
  margin:0;
  transform:none;        /* remove the offset that was breaking card titles */
  text-align:center;
}

.a-search{
  display:flex; align-items:center; gap:8px;
  background: var(--input);
  border:1px solid var(--border);
  border-radius:999px; padding:4px 8px; width:100%;
  transition: width .25s ease, background .25s ease, border-color .25s ease;
}
.a-search input{ border:0; background:transparent; outline:none; color:var(--text); width:100%; }

.a-top.search-active{ grid-template-columns: 1fr auto; }
.a-top.search-active #aTitle{ display:none; }
.a-top.search-active .a-search{ width:100%; }

.a-toolbar{
  display:flex; flex-wrap:wrap; gap:10px;
  margin: 10px 0; align-items:center;
}

.a-feed{ display:flex; flex-direction:column; gap:12px; }

.a-card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:16px;
}
.a-card .meta{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  color: var(--muted); font-size: 13px; margin-top: 4px;
}
.a-badges{ display:flex; gap:6px; flex-wrap:wrap; }
.a-badge{
  padding:2px 8px; border-radius:999px; font-size:12px;
  background: color-mix(in oklab, var(--brand) 16%, transparent);
  color:#fff;
}
.a-badge.alert{ background: #ef4444; }
.a-badge.deadline{ background:#f59e0b; color:#111; }
.a-badge.event{ background:#22c55e; color:#111; }

.a-card .title{ font-weight:800; font-size:18px; margin:6px 0 4px; }
.a-card .body{ opacity:.95; }

.a-card .actions{ display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:10px; }
.a-card .actions .btn{ padding:6px 10px; }

@media (max-width:900px){
  #announcementsPage .a-top{ grid-template-columns: 1fr auto; }
  #announcementsPage #aTitle{ display:none; }

}

/* ===== Announcements - card style like mock ===== */
.a-feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}

.a-card{
  --shadow:0 1px 1px rgba(0,0,0,.03), 0 6px 18px rgba(0,0,0,.06);
  background:var(--panel,#fff);
  border:1px solid var(--border,#e5e7eb);
  border-radius:14px; padding:14px 14px 12px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:10px;
}

.a-head{
  display:block;
  justify-content:space-between;
  align-items:flex-start;   /* <<< new: align top edge */
  gap:10px;
}

/* The Details button in the card header */
.a-head .btn-details{
  align-self:flex-start;      /* stay at top even if title wraps */
  white-space:nowrap;         /* keep "Details >>" on one line */
  height:30px;                /* optional: match your slim buttons */
  padding:0 10px;
  border-radius:8px;
}


.a-card .a-title{
  font-size:16px;
  line-height:1.3;
  margin:.25rem 0 0;
  font-weight:700;
  color:var(--fg,#111827);
  word-break:break-word;
  max-width:100%;

  /* NEW: show up to 2 lines, then ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;   /* old Safari/WebKit */
  line-clamp: 2;           /* standard property */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


.a-sub{color:var(--muted,#6b7280); font-size:13px}
.a-body{color:var(--muted,#6b7280); margin:.25rem 0 .35rem; font-size:14px}
.a-tags{display:flex; flex-wrap:wrap; gap:8px; margin:.25rem 0}
.a-tag{
  font-size:12px; font-weight:700; cursor:pointer;
  color:#2563eb; text-decoration:none;
}
.a-tag:hover{ text-decoration:underline; }

.a-cta-row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px}
/* keep CTAs on one line and space them correctly */
.a-cta-row { flex-wrap: nowrap; }
.a-cta-row .row.between {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  flex: 1 1 auto;
  flex-wrap: nowrap;
}

/* badge like "Scholarships", "Event", "Pinned", etc. */
.a-badges{display:flex; gap:6px; flex-wrap:wrap}
.badge{
  --bg:#eef2ff; --fg:#3730a3; 
  display:inline-flex; align-items:center; gap:6px;
  height:24px; padding:0 10px; border-radius:999px;
  background:var(--bg); color:var(--fg); font-size:12px; font-weight:700;
  border:1px solid color-mix(in oklab, var(--fg) 15%, transparent);
}

/* small meta chips (location, lang, date, mode) */
.chips{display:flex; gap:10px; flex-wrap:wrap; color:var(--muted,#6b7280); font-size:12px}
.chip{display:inline-flex; align-items:center; gap:6px}
.chip img{width:14px;height:14px;opacity:.7}

/* CTAs */
.btn.slim{height:30px; padding:0 12px; border-radius:8px; font-weight:700}
.btn.pill{border-radius:999px}
.btn.primary.blue{background:#2563eb; border-color:#2563eb}
.btn.primary.green{background:#16a34a; border-color:#16a34a}
.btn.primary.orange{background:#f97316; border-color:#f97316}
.btn.primary.purple{background:#7c3aed; border-color:#7c3aed}

/* type color presets */
.badge.type-Event{--bg:#e0f2fe; --fg:#0369a1}
.badge.type-Deadline{--bg:#fee2e2; --fg:#b91c1c}
.badge.type-Alert{--bg:#fff7ed; --fg:#9a3412}
.badge.type-Internship{--bg:#ecfdf5; --fg:#065f46}
.badge.type-Competition{--bg:#f5f3ff; --fg:#6d28d9}
.badge.type-Grants{--bg:#eff6ff; --fg:#1d4ed8}
.badge.pinned{--bg:#f1f5f9; --fg:#0f172a}

#aDetailBody {
  min-width: 600px;   /* adjust this value as needed */
  max-width: 600px;    /* make sure it stays responsive */
}
#announcementsPage .chips { display: none; }


/* ===== Announcements: favorites & controls ===== */
.a-feed .a-card{ position: relative; }
.a-fav{
  position:absolute; left:10px; bottom:10px;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:999px;
  border:1px solid var(--border); background:var(--panel);
  cursor:pointer; font-size:18px; line-height:1;
}
.a-fav.active{ box-shadow:0 0 0 2px color-mix(in oklab, var(--brand) 35%, transparent); }
.btn-toggle.active{ outline:2px solid var(--brand); }


/* Hide admin-only actions unless body has .is-admin */
.admin-only { display: none; }
.is-admin .admin-only { display: flex; }

/* Visually "on" state for either inline fav-btn or fallback a-fav */
.fav-btn.active,
.a-fav.active { filter: saturate(1.2) brightness(1.1); }

/* OPTIONAL (only used if fallback .a-fav gets created) */
.a-card { position: relative; }
.a-card .a-fav{
  position:absolute; left:10px; bottom:10px;
  background:none; border:1px solid var(--border);
  border-radius:999px; padding:4px 8px; opacity:.7; cursor:pointer;
}
.a-card .a-fav:hover{ opacity:1; }
.details-btn,
.apply-btn,
.ann-detail-action {
  min-width: 90px; /* adjust to taste */
  text-align: center;
}
/* Details button custom style */
.details-btn {
  border: 1.5px solid var(--border);   /* subtle gray stroke */
  color: var(--text);                  /* normal text color */
  background: transparent;             /* no fill */
  transition: all 0.2s ease;
}

/* Hover highlight */
.details-btn:hover {
  border-color: var(--brand);          /* brand color stroke */
  color: var(--brand);
  background: color-mix(in oklab, var(--brand) 8%, transparent); /* soft tint */
}

/* ===== Detail dialog layout ===== */
.a-detail-modal .a-detail-inner{
  display:flex; flex-direction:column;
  width:min(720px, 96vw);
  max-height:min(80vh, 820px);
  padding:0;  /* card already has padding; we'll handle inner spacing */
}

.a-detail-modal .a-detail-body{
  overflow:auto;
  padding:16px;         /* space for your content */
}

.a-detail-modal .a-detail-footer{
  position: sticky;     /* stays visible while body scrolls */
  bottom: 0;
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  background: var(--panel);
  border-top: 1px solid var(--border);
}

/* optional: match sizes between Details/Apply wherever used */
.details-btn, .apply-btn, .ann-detail-action {
  min-width: 90px;
  text-align: center;
}

/* your earlier hover stroke for Details (kept here for convenience) */
.details-btn {
  border: 1.5px solid var(--border);
  background: transparent;
  transition: all .2s ease;
}
.details-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: color-mix(in oklab, var(--brand) 8%, transparent);
}
.fav-btn {
  color: #888;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.fav-btn .fav-icon,
.ann-filter-favorites .menu-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.ann-card-fav {
  block-size: 38px;
  min-height: 38px;
  padding: 0 10px;
  border: 0 !important;
  background: transparent !important;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: none;
  line-height: 1;
  white-space: nowrap;
  color: var(--text);
  font-weight: 800;
}

.ann-card-fav:hover,
.ann-card-fav:focus-visible {
  background: color-mix(in oklab, var(--danger, #e11d48) 10%, transparent) !important;
  color: var(--danger, #e11d48);
  transform: translateY(-1px);
}

.ann-card-fav .ann-heart-glyph {
  font-size: 25px;
  line-height: 1;
}

.ann-card-fav .fav-count {
  display: inline-flex;
  align-items: center;
  color: currentColor;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.fav-btn.active {
  color: #c62828;
}

.ann-card-fav.active {
  background: transparent !important;
  color: var(--danger, #e11d48);
}

.fav-btn.active .fav-icon,
.ann-filter-favorites.active .menu-icon {
  filter: invert(18%) sepia(93%) saturate(2814%) hue-rotate(343deg) brightness(92%) contrast(92%);
}

.ann-card-fav.active .ann-heart-glyph {
  font-weight: 900;
}

.ann-filter-favorites {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ann-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
}

.ann-tabs button {
  height: 32px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
}

.ann-tabs button.active {
  background: #111827;
  color: #fff;
}

.ann-card {
  overflow: hidden;
  padding: 0;
  border-radius: 10px;
}

.ann-card-media {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  object-position: center center;
  border-bottom: 1px solid var(--border);
  transform: scale(1);
  transform-origin: center center;
  transition: transform .45s ease, filter .28s ease;
  will-change: transform;
}

.ann-card:hover .ann-card-media {
  transform: scale(1.055);
  filter: saturate(1.06) contrast(1.04);
}

.ann-card > :not(.ann-card-media) {
  margin-left: 14px;
  margin-right: 14px;
}

.ann-card .a-cta-row {
  margin-bottom: 14px;
}

.ann-card .a-cta-row .row {
  align-items: center;
}

.ann-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ann-card-actions .ann-card-fav {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center;
  gap: 5px;
}

.ann-card-actions .ann-card-fav .ann-heart-glyph,
.ann-card-actions .ann-card-fav .fav-count {
  flex: 0 0 auto;
}

.ann-card-actions .ann-share-btn,
.ann-card-actions .apply-btn,
.ann-card-actions .ann-detail-action {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}

.ann-card-actions .ann-share-icon-btn {
  inline-size: 38px;
  min-width: 38px;
  min-height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  background: transparent;
  justify-content: center;
}

.ann-card-actions .ann-share-icon-btn:hover,
.ann-card-actions .ann-share-icon-btn:focus-visible {
  border-color: var(--brand);
  background: color-mix(in oklab, var(--brand) 8%, transparent);
  transform: translateY(-1px);
}

.ann-card-actions .ann-share-icon {
  width: 19px;
  height: 19px;
  display: block;
  transition: filter .2s ease, transform .2s ease;
}

.ann-card-actions .ann-share-icon-btn:hover .ann-share-icon,
.ann-card-actions .ann-share-icon-btn:focus-visible .ann-share-icon {
  filter: invert(34%) sepia(94%) saturate(2417%) hue-rotate(213deg) brightness(99%) contrast(97%);
}

.ann-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 14px;
}

.ann-apply-top {
  margin-left: auto;
}

.ann-share-btn {
  min-width: 76px;
}

.ann-share-menu {
  position: fixed;
  z-index: 10050;
  width: 190px;
  padding: 8px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.22);
}

.ann-share-title {
  padding: 8px 10px 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.ann-share-menu button,
.ann-share-menu a {
  display: flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #111827;
  font: inherit;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ann-share-menu button:hover,
.ann-share-menu a:hover {
  background: #f1f5f9;
}

.ann-type,
.ann-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid transparent;
}

.ann-type {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.ann-type.type-Deadline {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fed7aa;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px #fb923c;
}

.ann-type.type-Alert {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.ann-type.type-Event {
  background: #ecfdf5;
  color: #047857;
  border-color: #bbf7d0;
}

.ann-chip.pinned {
  background: #f8fafc;
  color: #0f172a;
  border-color: #e2e8f0;
}

.ann-chip.code {
  background: #eef2ff;
  color: #3730a3;
  border-color: #c7d2fe;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.ann-chip.important {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

.ann-chip.urgent {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.ann-priority-important {
  border-left: 4px solid #f59e0b;
}

.ann-priority-urgent {
  border-left: 4px solid #ef4444;
}

.ann-card:has(.ann-type.type-Deadline),
.ann-card.ann-kind-Deadline {
  border-color: #f97316;
  border-width: 2px;
  box-shadow: 0 12px 34px rgba(249, 115, 22, 0.18);
}

.ann-card:has(.ann-type.type-Deadline) .a-title,
.ann-card.ann-kind-Deadline .a-title {
  font-weight: 900;
  color: #9a3412;
}

.ann-card-meta .ann-deadline-date {
  color: #9a3412;
  background: #ffedd5;
  border: 1px solid #fdba74;
  font-weight: 900;
}

.ann-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.ann-card-meta span {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-secondary);
}

.ann-detail-media {
  display: block;
  width: calc(100% + 32px);
  height: 220px;
  margin: -16px -16px 14px;
  object-fit: cover;
  object-position: center center;
  border-bottom: 1px solid var(--border);
  background: #0f172a;
  transform: scale(1);
  transform-origin: center center;
  transition: transform .45s ease, filter .28s ease;
  will-change: transform;
}

.a-detail-body:hover .ann-detail-media {
  transform: scale(1.035);
  filter: saturate(1.06) contrast(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .ann-card-media,
  .ann-detail-media {
    transition: none;
    transform: none !important;
  }
}

.ann-video-fallback {
  display: none;
  padding: 12px 14px;
  color: #b45309;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  font-weight: 700;
}

.ann-video-fallback:not(.hidden) {
  display: block;
}


/* =========================================================
    ANNOUNCEMENT CREATE / EDIT DIALOG (wide layout)
========================================================= */
.a-create-modal {
  border: none;
  background: transparent;
  padding: 0;
}

.a-create-modal::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.a-create-modal .form {
  background: var(--panel);
  border-radius: 10px;
  width: min(720px, 96vw);
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

/* ===== Announcements guest-mode rules =====
   When the user is logged out (body.has .is-guest),
   hide: (a) the favorites icon/button on cards,
         (b) the favorites filter control in the top bar. */
body.is-guest .ann-fav,
body.is-guest .ann-filter-favorites {
  display: none !important;
}
/* ===== Announcements guest-mode rules ===== */
body.is-guest .ann-filter-favorites {
  display: none !important;
}
.fav-btn.active {
  color: var(--danger);
}

/* ===== Announcements top bar (grid layout: left search, centered title, right actions) ===== */
:root {
  --a-top-h: 78px;                 /* desktop bar height */
  --a-top-h-sm: 68px;              /* mobile bar height */
  --a-search-min: 360px;           /* min visible search width (desktop) */
  --a-search-max: 180px;           /* default search width (desktop) */
  --a-content-max: 1100px;         /* max width of the whole top bar */
}

#announcementsPage .a-top {
  display: grid;
  grid-template-columns: minmax(var(--a-search-min), 1fr) auto auto;
  align-items: center;
  column-gap: 12px;
  height: var(--a-top-h);
  padding: 4px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: column-gap .25s ease, padding .25s ease, height .2s ease;
  max-width: var(--a-content-max);
  margin-inline: auto; /* centered container */
}

/* search pill */
#announcementsPage .a-search {
  grid-column: 1;
  display: flex;
  align-items: center;            /* keep vertically centered */
  align-self: center;
  gap: 8px;
  min-width: 0;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 12px;
  inline-size: var(--a-search-max); /* base width */
  max-inline-size: 100%;
  transition: inline-size .35s ease, box-shadow .2s ease, background .2s ease;
  justify-self: start;
  align-self: center;
}
#announcementsPage .a-search:focus-within {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 30%, transparent);
  background: color-mix(in oklab, var(--input) 90%, transparent);
}
#announcementsPage .a-search .ico-img { width: 18px; height: 18px; opacity: .65; }
#announcementsPage #aSearch {
  flex: 1 1 auto;
  background: transparent; border: 0; color: var(--text); outline: none; font: inherit;
  font-size: clamp(14px, 1.6vw, 16px);
  min-width: 60px; /* keeps icon from colliding */
}

/* centered title */
#announcementsPage .a-top .a-title {
  grid-column: 2; margin: 0; text-align: center; white-space: nowrap;
  font-weight: 600; font-size: clamp(16px, 1.9vw, 22px);
  transition: opacity .25s ease, transform .35s ease; /* slide with fade */
  font-family: "Georgia", serif;   /* change font */
  font-style: italic;              /* make italic */
  letter-spacing: 1px;             /* more spacing */
  transform: translateX(-340px);

  
}

/* right-side actions */
#announcementsPage .a-actions {
  grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 8px;
  transition: opacity .2s ease, transform .2s ease;
  
}

/* === EXPAND BEHAVIOR (no :has required) ===
   Hover/focus on the pill expands it to HALF width of the whole bar and hides title/actions.
   We temporarily span the pill across all columns so `inline-size: 50%` is relative to the bar. */
#announcementsPage .a-search:hover,
#announcementsPage .a-search:focus-within {
     /* grid-column: 1 / -1; span across */
  inline-size: 50%;       /* expand to HALF of the bar */
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 30%, transparent);
  background: color-mix(in oklab, var(--input) 90%, transparent);

}
#announcementsPage .a-search:hover ~ .a-title,
#announcementsPage .a-search:focus-within ~ .a-title { opacity: 0; transform: translateX(100%); pointer-events: none; }
#announcementsPage .a-search:hover ~ .a-actions,
#announcementsPage .a-search:focus-within ~ .a-actions { opacity: 0; transform: translateY(-6px); pointer-events: none; }

/* === CLASS-BASED (typing/focus) BEHAVIOR === */
#announcementsPage .a-top.searching .a-search { grid-column: 1 / -1; inline-size: 50%; }
#announcementsPage .a-top.searching .a-title { opacity: 0; transform: translateX(100%); pointer-events: none; }
#announcementsPage .a-top.searching .a-actions { opacity: 0; transform: translateY(-6px); pointer-events: none; }

/* Small screens */
@media (max-width: 720px) {
  #announcementsPage .a-top { grid-template-columns: 1fr; row-gap: 8px; height: var(--a-top-h-sm); }
  #announcementsPage .a-title { order: -1; grid-column: 1; width: 100%; text-align: center; }
  #announcementsPage .a-search { grid-column: 1; inline-size: var(--a-search-max); }
  /* On mobile you may want full width expansion instead of half; change to 100% if desired */
  #announcementsPage .a-search:hover,
  #announcementsPage .a-search:focus-within,
  #announcementsPage .a-top.searching .a-search { grid-column: 1; inline-size: 50%; }
}

/* ===== Behavior: expand + fade title while searching (JS assist for typing) ===== */
function bindAnnouncementSearchRow() {
  const top     = q('#announcementsPage .a-top');
  const input   = q('#aSearch');
  const search  = q('#announcementsPage .a-search');
  if (!top || !input || !search) return;
  const favBtn  = q('#aFavOnly');

  const activeNow = () => document.activeElement === input || (input.value || '').trim().length > 0;
  const update = () => top.classList.toggle('searching', activeNow());

  input.addEventListener('focus', update);
  input.addEventListener('blur',  () => setTimeout(update, 0));
  input.addEventListener('input', () => {
    update();
    const favOnly = favBtn?.classList.contains('active') || false;
    window.renderAnnouncements?.(true, input.value.trim(), favOnly);
  });

  // Esc clears
  input.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      input.value = '';
      input.blur();
      update();
      const favOnly = favBtn?.classList.contains('active') || false;
      window.renderAnnouncements?.(true, '', favOnly);
    }
  });

  // Initialize state
  update();
}

/* ===== Optional helpers: expected DOM ===== */
/*
  <div id="announcementsPage">
    <div class="a-top">
      <div class="a-search">[icon]<input id="aSearch" /></div>
      <h2 class="a-title">Announcements</h2>
      <div class="a-actions">
        <button id="aFavOnly" class="pill"><img src="/icons/ui/heart.svg" alt=""></button>
        <button id="aAdd" class="btn">New</button>
      </div>
    </div>
  </div>
*/ 

/* Announcements title hover effect */
#announcementsPage .a-title {
  cursor: pointer;              /* shows hand cursor */
  transition: color .2s ease;   /* smooth change */
}

#announcementsPage .a-title:hover {
  color: var(--brand, blue);    /* use your theme brand color or fallback to blue */
}
/* Base pill styling (scoped to the Community page section) */
[data-page="community"] .c-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  transition: box-shadow .2s ease, background .2s ease;
}

/* Show the blue "stroke highlight" when input is focused */
[data-page="community"] .c-search:focus-within {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 30%, transparent);
  background: color-mix(in oklab, var(--input) 90%, transparent);
}

/* Also show it when your JS sets the bar to search-active (hover/enter in your code) */
[data-page="community"] .c-top.search-active .c-search {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 30%, transparent);
  background: color-mix(in oklab, var(--input) 90%, transparent);
}

/* Nice-to-have: make the text field seamless */
#cSearch {
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font: inherit;
}
/* Only show this bulk bar when the announcements section is in admin mode */
#announcementsPage .a-bulkbar { display: none; margin: 10px 0 6px; gap: 8px; align-items: center; }
#announcementsPage.admin-mode .a-bulkbar { display: flex; }

#announcementsPage .a-bulkbar .bulk-actions.hidden { display: none; }
#announcementsPage.admin-mode .a-bulkbar .bulk-actions { display: inline-flex; gap: 8px; }

/* Card selection visuals; cards already carry data-ann-id per your scripting */
#announcementsPage .a-card { position: relative; transition: outline-color .15s ease, box-shadow .15s ease; }
#announcementsPage .a-card .sel-checkbox {
  position: absolute; left: 10px; top: 10px;
  width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--panel);
  display: none; align-items: center; justify-content: center;
  font-weight: 700; line-height: 1; cursor: pointer; user-select: none;
}
#announcementsPage.sel-mode .a-card .sel-checkbox { display: inline-flex; }
#announcementsPage .a-card.selected {
  outline: 2px solid color-mix(in oklab, var(--brand) 50%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand) 30%, transparent) inset;
}
/* selection chip the JS injects */
#aFeed .a-card .sel-checkbox{
  position:absolute; top:10px; left:10px; z-index:2;
  border:1px solid var(--border); background:var(--panel);
  border-radius:999px; width:24px; height:24px; line-height:22px;
  font-weight:700; opacity:.75;
}
#aFeed .a-card.selected{ outline:2px solid var(--brand); outline-offset:2px; }
.a-bulkbar .bulk-actions.hidden{ display:none }
/* When selection mode is on, force-show the actions even if .hidden is still present */
#announcementsPage.sel-mode .a-bulkbar .bulk-actions { 
  display: inline-flex !important; 
}
/* === Share & View buttons inside post cards only === */

/* Scope strictly to post cards */
.c-post .share-btn,
.c-post .view-post-btn {
  background: #fff !important;
  border: none !important;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 6px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); /* subtle neutral shadow */
  transition: all 0.2s ease-in-out;
}

/* Hover: blue glow with smooth scaling */
.c-post .share-btn:hover,
.c-post .view-post-btn:hover {
  background: #f0f4ff !important; /* very light blue tint */
  transform: scale(1.06);
  box-shadow: 0 0 8px color-mix(in oklab, var(--brand) 60%, transparent);
}

/* Icons inside remain clean and consistent */
.c-post .share-btn .ico-img,
.c-post .view-post-btn .ico-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: none;
}
/* Ensure Share and View buttons stay clickable and above overlays */
.c-post .share-btn,
.c-post .view-post-btn {
  position: relative;
  z-index: 5;
  pointer-events: auto;
}

/* If inside footer or overlapping content, lift them visually */
.c-post .foot .share-btn,
.c-post .foot .view-post-btn {
  position: relative;
  z-index: 10;
}
.status-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  background: var(--bg-secondary, #f5f5f7);
  color: var(--text, #222);
  white-space: nowrap;
}

/* neutrals */
.status--draft      { background: rgba(107,114,128,.12); color: #374151; border-color: rgba(107,114,128,.28); }  /* gray */
.status--submitted  { background: rgba(59,130,246,.12);  color: #2563eb; border-color: rgba(59,130,246,.28); }   /* blue */
.status--received   { background: rgba(99,102,241,.12);  color: #4f46e5; border-color: rgba(99,102,241,.28); }   /* indigo */
.status--inprocess  { background: rgba(245,158,11,.12);  color: #b45309; border-color: rgba(245,158,11,.28); }   /* amber */
.status--inreview   { background: rgba(168,85,247,.12);  color: #7e22ce; border-color: rgba(168,85,247,.28); }   /* purple */
.status--preadmitted{ background: rgba(20,184,166,.12);  color: #0f766e; border-color: rgba(20,184,166,.28); }   /* teal */

/* your requested ones */
.status--admitted   { background: rgba(34,197,94,.12);   color: #22c55e; border-color: rgba(34,197,94,.28); }    /* green */
.status--rejected   { background: rgba(239,68,68,0.12); color: #ef4444; border-color: rgba(239,68,68,0.28); }
.status--revoked    { background: rgba(251,191,36,.18);  color: #a16207; border-color: rgba(251,191,36,.35); }   /* yellow */
.payment--paid      { background: rgba(34,197,94,.12); color: #0f5132; border-color: rgba(34,197,94,.28); }
.payment--partial   { background: #fff3cd; color: #664d03; border-color: rgba(245,158,11,.35); }
.payment--unpaid    { background: #f8d7da; color: #842029; border-color: rgba(239,68,68,.28); }

/* add to public/admin.css or styles.css */
.inbox { display:grid; grid-template-columns: 300px 1fr; gap:16px; }
.inbox-left { border-right:1px solid var(--border); padding-right:12px; }
.thread-list { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.thread-item { padding:8px; border-radius:8px; border:1px solid var(--border); cursor:pointer; }
.thread-item.active { border-color: var(--primary); background: var(--bg-soft); }
.thread-item .sub { font-size:12px; color: var(--text-muted); }
.thread-item .unread {
  font-size:11px; padding:2px 6px; border-radius:10px;
  background: rgba(229,57,53,0.12); color:#e53935; font-weight:700;
  border:1px solid rgba(229,57,53,0.25);
}
.thread-item.is-unread {
  border-color: rgba(229,57,53,0.45);
  background: rgba(229,57,53,0.06);
  font-weight: 600;
}


/* =========================================================
   MESSAGES SECTION - CSS ADDITIONS
   Add these to your existing styles.css
   ========================================================= */

/* Update existing .inbox to add height */
.inbox {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  height: calc(100vh - 200px);
  min-height: 500px;
}

/* Make thread list scrollable */
.thread-list {
  overflow-y: auto;
  max-height: calc(100vh - 350px);
}

/* Improve thread item hover */
.thread-item {
  transition: all 0.15s ease;
}

.thread-item:hover {
  background: var(--hover);
  transform: translateX(2px);
}

.thread-item.active {
  border-color: var(--brand);
  background: color-mix(in oklab, var(--brand) 8%, transparent);
}

/* Unread indicator */
.thread-item.is-unread {
  border-color: rgba(229, 57, 53, 0.35);
  background: rgba(229, 57, 53, 0.04);
  font-weight: 500;
}

.thread-item.is-unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: #e53935;
  border-radius: 0 3px 3px 0;
}

/* Messages scroll area */
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: color-mix(in oklab, var(--bg) 97%, transparent);
}

/* Message bubbles */
.msg {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.4;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.msg.me {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  border-bottom-right-radius: 4px;
}

.msg.them {
  align-self: flex-start;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.msg time {
  display: block;
  font-size: 10px;
  opacity: 0.6;
  margin-top: 4px;
}

/* Reply form improvements */
.reply input.form-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--input);
  color: var(--text);
}

.reply input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 20%, transparent);
}

/* Send button */
#btnSend {
  padding: 10px 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

#btnSend:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}

#btnSend:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Compose button */
#btnCompose {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
}

#btnCompose:hover {
  background: var(--hover);
  border-color: var(--brand);
}

/* Badge */
#msgBadge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

#msgBadge.hidden {
  display: none;
}

#btnMessages {
  position: relative;
}

/* Responsive */
@media (max-width: 768px) {
  .inbox {
    grid-template-columns: 1fr;
    height: auto;
  }

  .inbox-left {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    padding-bottom: 12px;
  }

  .thread-list {
    max-height: 300px;
  }

  .inbox-right {
    height: 500px;
  }

  .msg {
    max-width: 85%;
  }
}
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.58);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.modal {
  background: var(--panel, #fff);
  border-radius: 12px;
  padding: 24px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  animation: pop 0.2s ease;
  opacity: 1;
  backdrop-filter: none;
}

@keyframes pop {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Closed conversation notice */
.thread-closed-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  margin: 16px auto 0;
  max-width: 300px;
  background: color-mix(in oklab, var(--muted) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.thread-closed-notice svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* Toast notification */
.thread-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-size: 14px;
  color: var(--text);
  z-index: 9999;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Hide reply form when closed */
.reply.hidden {
  display: none;
}

/* Message file attachments */
.msg-files {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.msg.them .msg-files {
  border-top-color: var(--border);
}

.msg-file {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(0,0,0,0.1);
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 4px;
}

.msg.them .msg-file {
  background: rgba(0,0,0,0.05);
}

.msg-file:last-child {
  margin-bottom: 0;
}
/* Message file attachments */
.msg-files {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.msg.them .msg-files {
  border-top-color: var(--border);
}

.msg-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.15);
  border-radius: 8px;
  font-size: 12px;
  transition: background 0.2s;
}

.msg.them .msg-file {
  background: rgba(0,0,0,0.05);
}

.msg-file:hover {
  background: rgba(0,0,0,0.25);
}

.msg.them .msg-file:hover {
  background: rgba(0,0,0,0.1);
}

.msg-file .file-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.msg-file .file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.msg-file .file-size {
  font-size: 10px;
  flex-shrink: 0;
}

.btn-file-action {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  transition: background 0.2s;
  flex-shrink: 0;
}

.btn-file-action:hover {
  background: rgba(255,255,255,0.1);
}

.msg.them .btn-file-action:hover {
  background: rgba(0,0,0,0.1);
}

/* File preview modal */
.file-preview-modal {
  z-index: 10000;
}

.file-preview {
  max-width: 90vw;
  max-height: 90vh;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  margin: 0;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
/* ===== MESSAGES PAGE ===== */
.inbox {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 0;
  height: calc(100vh - 200px);
  min-height: 600px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
}

/* Left sidebar */
.inbox-left {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--bg);
  overflow: hidden;
}

.inbox-header {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
}

/* OK Scrollable thread list */
.thread-list-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

#threadList {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px;
}

/* Thread item */
.thread-item {
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
  position: relative;
  background: var(--panel);
}

.thread-item:hover {
  background: var(--hover);
  transform: translateX(2px);
}

.thread-item.active {
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  border-left: 3px solid var(--brand);
}

.thread-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-weight: 600;
  gap: 8px;
}

.thread-item .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
  flex-shrink: 0;
}

.thread-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}

.thread-app-number {
  font-weight: 600;
  color: var(--text);
}

.thread-status {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.thread-status.admitted { background: #d4edda; color: #155724; }
.thread-status.submitted { background: #d1ecf1; color: #0c5460; }
.thread-status.draft { background: #f8d7da; color: #721c24; }

.unread {
  display: inline-block;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* Right conversation view */
.inbox-right {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}

.thread-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
}

.thread-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

/* OK Scrollable messages area */
.messages-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: color-mix(in oklab, var(--bg) 97%, transparent);
}

/* Message bubbles */
.msg {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  animation: fadeIn 0.3s ease;
  word-wrap: break-word;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.msg.me {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  border-bottom-right-radius: 4px;
}

.msg.them {
  align-self: flex-start;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.msg-body {
  margin-bottom: 4px;
}

.msg-time {
  font-size: 10px;
  opacity: 0.7;
  margin-top: 4px;
}

/* OK Fixed reply form at bottom */
.reply-form {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
}

.reply-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.reply-input-row .form-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--input);
  color: var(--text);
  font-size: 14px;
}

.reply-input-row .form-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 15%, transparent);
}

.btn-attach {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  padding: 0;
  transition: all 0.2s;
}

.btn-attach:hover {
  background: var(--hover);
  transform: scale(1.1);
}

#btnSend {
  padding: 12px 24px;
  border-radius: 24px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border: none;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

#btnSend:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

#btnSend:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Compose modal - enhanced */
.compose-modal .modal {
  width: 500px;
  max-width: 90vw;
}

.compose-modal h3 {
  font-size: 22px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.compose-modal .form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input);
  color: var(--text);
  font-size: 14px;
  transition: border-color 0.2s;
}

.compose-modal .form-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 15%, transparent);
}

.compose-modal textarea {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
}

/* Responsive */
@media (max-width: 968px) {
  .inbox {
    grid-template-columns: 1fr;
    height: auto;
  }

  .inbox-left {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    max-height: 300px;
  }

  .inbox-right {
    height: 500px;
  }
}
 /* User dropdown for admin compose */
  .user-dropdown {
    position: absolute;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-top: 4px;
  }

  .user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    cursor: pointer;
    transition: background 0.2s;
  }

  .user-item:hover {
    background: var(--hover-bg);
  }

  .user-item.muted {
    cursor: default;
    justify-content: center;
  }

  .avatar-small {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
  }

  .selected-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--primary-light);
    border-radius: 8px;
    margin-top: 8px;
  }

  .btn-remove-user {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--danger);
    padding: 4px 8px;
  }

  .btn-remove-user:hover {
    background: rgba(255,0,0,0.1);
    border-radius: 4px;
  }

  .app-status-display {
    display: flex;
    gap: 8px;
    padding: 8px;
    background: var(--bg-secondary);
    border-radius: 6px;
    align-items: center;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
  }

  .form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
  }

  /* Selected users chips */
  .selected-users-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
  }

  .selected-user-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--primary-light);
    border-radius: 16px;
    font-size: 13px;
  }

  .avatar-tiny {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
  }

  .btn-remove-chip {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--danger);
    padding: 0 4px;
    margin-left: 2px;
  }

  .btn-remove-chip:hover {
    color: var(--danger-dark);
  }

  /* Clickable app number link */
  .thread-app-number {
    text-decoration: none;
    color: var(--primary);
    font-weight: 500;
  }

  .thread-app-number:hover {
    text-decoration: underline;
  }

   /* Enhanced compose modal */
  .compose-modal {
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
  }

  .modal-header h3 {
    margin: 0;
  }

  .btn-close-modal {
    font-size: 20px;
    padding: 4px 8px;
  }

  .modal-body {
    flex: 1;
    overflow-y: auto;
  }

  .form-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 6px;
  }

  .compose-files-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
  }

  .compose-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border-radius: 6px;
    font-size: 13px;
  }

  .compose-file-item .file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .compose-file-item .file-size {
    font-size: 11px;
  }

  .btn-remove-file {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--danger);
    font-size: 14px;
    padding: 0 4px;
  }

  .btn-remove-file:hover {
    color: var(--danger-dark);
  }

  .success-toast {
    background: var(--ok) !important;
    color: white !important;
  }

  /* Improve user dropdown positioning */
  .user-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-top: 4px;
  }

  .app-status-display {
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 6px;
    border-left: 3px solid var(--primary);
  }

  /* Wider, responsive compose modal */
.compose-modal {
  max-width: 780px;              /* was 600px */
  width: min(92vw, 780px);
}

/* Body spacing + avoid inner scrollbars fighting each other */
.compose-modal .modal-body {
  padding: 18px 20px;
  overflow: auto;
}

/* Grid layout for fields */
.compose-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 14px;
  align-items: start;
}

/* Field block: label above input */
.compose-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Full-width rows (textarea, attachments, selected users, etc.) */
.compose-field--full {
  grid-column: 1 / -1;
}

/* Inputs should fill width and not shrink */
.compose-grid .form-input,
.compose-grid textarea {
  width: 100%;
  min-width: 0;
}

/* Textarea sane sizing */
.compose-grid textarea {
  min-height: 140px;
  resize: vertical;
}

/* Selected users & app status blocks */
.selected-users-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selected-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border-radius: 999px;
  font-size: 12px;
}

/* Attachments list full width */
.compose-files-list { margin-top: 6px; }

/* Footer pinned to bottom of scrollable body area */
.compose-modal .modal-footer {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 12px 0 0;
  margin-top: 8px;
}

/* Make user dropdown sit over grid */
.user-dropdown { z-index: 1000; }

/* Responsive: stack on small screens */
@media (max-width: 640px) {
  .compose-grid {
    grid-template-columns: 1fr;
  }
}

/* Make items obviously clickable */
.user-dropdown .user-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  cursor:pointer;
  border-radius:8px;
}
.user-dropdown .user-item:hover{
  background:var(--bg-secondary);
}

.thread-item { position: relative; overflow: visible; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--bg); }
.thread-item.closed { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger) inset; }

.thread-row {
  display: grid;
  grid-template-columns: 1fr auto auto; /* content | date | actions */
  align-items: start;
  gap: 12px;
}

.thread-started {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  margin-top:2px;
}

.thread-actions { position: relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }

.thread-menu-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  cursor:pointer; font-size:18px; line-height:1;
  background:none; border:none; color:var(--muted); z-index:100;
}
.thread-menu-btn:hover { background: var(--bg-secondary); }

.thread-menu {
  position:fixed; top:auto; right:auto;
  min-width:180px; background:var(--panel, #fff);
  border:1px solid var(--border); border-radius:8px;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
  display:none; z-index:10050; pointer-events:auto;
  opacity: 1;
}
.thread-menu.open { display:block; }

.thread-menu .menu-item { padding:10px 12px; font-size:13px; cursor:pointer; }
.thread-menu .menu-item:hover { background: var(--bg-secondary); }
.thread-menu .menu-item.danger { color: var(--danger); }

.thread-app-link {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.thread-app-link:hover {
  text-decoration: underline;
}

.thread-closed-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.25);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.app-multi-select {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel, #fff);
  margin-top: 8px;
}

.app-multi-select summary {
  cursor: pointer;
  padding: 9px 12px;
  font-weight: 700;
  list-style: none;
}

.app-multi-select summary::-webkit-details-marker {
  display: none;
}

.app-multi-options {
  display: grid;
  gap: 6px;
  max-height: 190px;
  overflow: auto;
  padding: 0 10px 10px;
}

.app-multi-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
}

.app-multi-option:hover {
  background: var(--bg-secondary, #f3f4f6);
}

.application-number-title {
  color: var(--brand, #2563eb);
}

.admin-assign-box {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  max-width: 760px;
}

.admin-assign-box .field-label {
  display: block;
  margin: 10px 0 6px;
  font-weight: 600;
}

.admin-assign-box .user-dropdown {
  position: relative;
  margin-top: 6px;
  max-height: 240px;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
  z-index: 40;
}

.admin-assign-box .selected-users-container {
  margin-top: 10px;
}

.link-btn {
  border: 0;
  background: transparent;
  color: var(--brand, #2563eb);
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.link-btn:hover {
  text-decoration: underline;
}

.app-assign-inline {
  position: relative;
  display: inline-grid;
  grid-template-columns: minmax(150px, 220px) auto;
  align-items: start;
  gap: 6px;
  margin-right: 8px;
  vertical-align: top;
}

.app-assign-search {
  min-height: 34px;
}

.app-assign-dropdown {
  position: absolute;
  top: 38px;
  left: 0;
  width: min(360px, 80vw);
  max-height: 260px;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .18);
  z-index: 1500;
}

.app-assign-chips {
  grid-column: 1 / -1;
  max-width: 360px;
}

.external-apply-btn,
.external-status {
  border: 1px solid transparent;
  font-weight: 700;
}

.external-apply-not-applied {
  background: #fff3e0;
  color: #b45309;
  border-color: #fdba74;
}

.external-apply-incomplete {
  background: #fef9c3;
  color: #854d0e;
  border-color: #fde047;
}

.external-apply-applied {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}

.external-app-modal {
  align-items: stretch;
  justify-content: stretch;
  padding: 8px;
}

.external-app-panel {
  width: calc(100vw - 16px) !important;
  height: calc(100vh - 16px) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--bg);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.external-app-header {
  align-items: flex-start;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.external-close-x {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 22px;
  line-height: 1;
}

.external-app-header h3,
.external-section-head h4 {
  margin: 0;
}

.external-app-header p,
.external-section-head p {
  margin: 4px 0 0;
}

.external-app-body {
  display: block;
  gap: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: none;
  height: 100%;
  min-height: 0;
  padding: 16px;
  background: #f6f8fb;
  scroll-padding-top: 16px;
  overflow-anchor: none;
  align-items: stretch;
  justify-content: flex-start;
}

.external-editor-card,
.external-list-card {
  min-width: 0;
  min-height: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  position: relative;
}

.external-editor-card {
  display: flow-root;
  overflow: visible;
  z-index: 1;
  margin-bottom: 16px;
}

.external-list-card {
  display: grid;
  grid-template-rows: auto minmax(220px, auto);
  overflow: visible;
  z-index: 0;
  clear: both;
}

.external-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.external-app-list {
  min-height: 0;
  overflow: hidden;
}

.external-table-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: auto;
  background: var(--panel);
}

.external-apps-table {
  min-width: 980px;
}

.external-apps-table th {
  white-space: nowrap;
}

.external-apps-table td {
  vertical-align: middle;
}

.external-record {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.external-status {
  display: inline-flex;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  text-transform: capitalize;
}

.external-mini-actions,
.external-record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.external-app-form {
  min-width: 0;
}

.external-editor-layout {
  display: flex;
  gap: 14px;
  align-items: start;
  min-height: 0;
  overflow: visible;
}

.external-core-fields {
  display: grid;
  gap: 10px;
  flex: 1 1 640px;
  min-width: 520px;
  min-height: 0;
  align-content: start;
  overflow-y: visible;
  overflow-x: hidden;
  padding: 2px;
  overflow-anchor: none;
}

.external-extra-grid {
  display: grid;
  grid-template-columns: 1fr;
  flex: 0 0 min(38%, 640px);
  gap: 12px;
  min-width: 360px;
  min-height: 0;
  overflow: visible;
}

.external-primary-grid {
  position: static;
  margin: 0;
  padding: 0;
  background: transparent;
  border-bottom: 0;
}

.external-status-field select {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
  font-weight: 700;
}

.deadline-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.deadline-range input {
  min-width: 0;
}

.external-extra-panel {
  display: grid;
  grid-template-rows: auto minmax(0, auto) auto;
  min-width: 0;
  min-height: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  overflow: visible;
}

.external-extra-panel h4 {
  margin: 0 0 8px;
}

.external-funding-block {
  margin: 10px 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
}

.external-repeat {
  display: grid;
  align-content: start;
  gap: 8px;
  overflow-anchor: none;
  min-height: 0;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 4px;
}

.external-empty {
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg);
}

.external-app-panel .grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 980px) {
  .external-editor-layout {
    flex-direction: column;
  }
  .external-core-fields,
  .external-extra-grid {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
  }
  .external-app-panel .grid-4,
  .external-extra-grid {
    grid-template-columns: 1fr;
  }
}

.external-repeat-row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr auto;
  gap: 8px;
  align-items: start;
}

.external-repeat-stack {
  grid-template-columns: 1fr auto;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

.external-repeat-stack .field {
  grid-column: 1;
  margin: 0;
}

.external-repeat-stack [data-remove-repeat] {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
}

.external-repeat-stack textarea {
  min-height: 126px;
  resize: vertical;
}

.external-repeat-row input,
.external-repeat-row textarea {
  width: 100%;
}

.admin-app-pro {
  display: grid;
  gap: 12px;
  color: #1f2937;
}

.admin-app-pro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
}

.admin-app-pro-head h2 {
  margin: 0 0 2px;
  font-size: 22px;
  line-height: 1.2;
}

.admin-app-kpis {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-app-kpis span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

.admin-app-pro-filters {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 220px;
  gap: 10px;
}

.admin-app-pro-filters .form-input {
  height: 42px;
}

.admin-app-workspace {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(520px, 1fr);
  gap: 0;
  min-height: 650px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
}

.case-panel {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  overflow: hidden;
}

.case-panel + .case-panel {
  border-left: 1px solid var(--border);
}

.case-users,
.case-apps,
.case-drawer {
  overflow: auto;
  max-height: calc(100vh - 210px);
}

.case-apps {
  overflow-x: auto;
}

.case-apps > div {
  min-width: 980px;
}

.case-drawer {
  overflow-x: auto;
}

.case-drawer > div {
  min-width: 430px;
}

.case-user-card,
.case-app-card {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.case-app-item {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.case-app-item.active {
  background: #fbfdff;
}

.case-user-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 12px;
  min-height: 72px;
}

.case-user-card img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.case-user-card span,
.case-app-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.case-user-card strong,
.case-user-card small,
.case-app-main strong,
.case-app-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case-user-card small,
.case-app-card small,
.case-section-title span {
  color: var(--muted);
}

.case-user-card.active,
.case-app-card.active {
  background: #eef4ff;
  box-shadow: inset 3px 0 0 #2563eb;
}

.case-section-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-height: 64px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: #fbfcfe;
}

.case-section-title div {
  display: grid;
  gap: 3px;
}

.case-app-list-head,
.case-app-card {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 150px 120px 120px 72px;
  align-items: center;
  gap: 10px;
}

.case-app-list-head {
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.case-app-card {
  min-height: 66px;
  padding: 10px 14px;
  border-bottom: 0;
  cursor: default;
}

.case-cell-select,
.case-app-card .external-status {
  justify-content: center;
  width: 100%;
  min-height: 28px;
  margin: 0;
}

.case-cell-select {
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 28px 0 12px;
  font-weight: 700;
  cursor: pointer;
  background: #fff;
}

.case-cell-select.info {
  color: #2563eb;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.case-cell-select.warning {
  color: #b45309;
  background: #fffbeb;
  border-color: #fde68a;
}

.case-cell-select.success {
  color: #15803d;
  background: #ecfdf5;
  border-color: #bbf7d0;
}

.case-cell-select.danger {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}

.case-cell-select.muted {
  color: var(--muted);
  background: #f8fafc;
}

.case-university-cell {
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 800;
}

.case-university-cell:hover {
  box-shadow: inset 0 0 0 1px currentColor;
}

.case-action-wrap {
  position: relative;
  display: inline-flex;
  justify-content: center;
}

.case-dot-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
}

.case-dot-btn:hover {
  background: #f8fafc;
}

.case-row-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 2600;
  display: none;
  min-width: 160px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}

.case-row-menu.open {
  display: grid;
}

.case-row-menu button {
  height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  padding: 0 10px;
  cursor: pointer;
}

.case-row-menu button:hover {
  background: #f1f5f9;
}

.case-row-menu button.danger {
  color: #b91c1c;
}

.case-drawer-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  min-height: 76px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: #fbfcfe;
}

.case-drawer-head h3,
.case-drawer-head p {
  margin: 0;
}

.case-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--border);
}

.case-tabs button {
  height: 42px;
  border: 0;
  border-right: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  color: var(--muted);
}

.case-tabs button:last-child {
  border-right: 0;
}

.case-tabs button.active {
  color: #2563eb;
  box-shadow: inset 0 -2px 0 #2563eb;
}

.case-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.case-facts span {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
}

.case-block {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

.case-block h4 {
  margin: 0;
}

.case-block label {
  display: grid;
  gap: 5px;
  font-weight: 600;
}

.case-block select {
  width: 100%;
  min-width: 0;
  height: 38px;
}

.case-control-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.case-actions-row,
.case-actions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.case-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.case-inline-detail {
  margin: 0 14px 14px;
  overflow-x: auto;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #f8fbff;
}

.case-inline-detail > * {
  min-width: 780px;
}

.case-inline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.case-inline-head div {
  display: grid;
  gap: 2px;
}

.case-inline-head span {
  color: var(--muted);
}

.case-inline-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) minmax(260px, 1fr);
  gap: 10px;
  padding: 12px;
}

.case-fixed-btn,
.case-full-btn {
  min-height: 38px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.case-full-btn {
  width: 100%;
  justify-content: center;
}

.pane-title {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--muted);
}

.padded {
  padding: 16px;
}

.admin-app-focus-overlay {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  padding: 24px;
  background: rgba(15, 23, 42, 0.55);
}

.admin-app-focus-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1500px, 100%);
  height: min(900px, 100%);
  margin: auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.28);
}

.admin-app-focus-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: #fbfcfe;
}

.admin-app-focus-head div {
  display: grid;
  gap: 2px;
}

.admin-app-focus-head span {
  color: var(--muted);
}

.admin-app-focus-grid {
  display: grid;
  grid-template-columns: minmax(520px, 1.2fr) minmax(440px, 0.8fr);
  min-height: 0;
  overflow: hidden;
}

.admin-app-focus-grid.single {
  grid-template-columns: 1fr;
}

.admin-app-focus-grid .case-apps,
.admin-app-focus-grid .case-drawer {
  max-height: none;
}

.admin-app-focus-grid .case-apps > div {
  min-width: 980px;
}

.admin-app-focus-grid .case-drawer > div {
  min-width: 680px;
}

@media (max-width: 1120px) {
  .admin-app-workspace {
    grid-template-columns: 1fr;
  }
  .case-users,
  .case-apps,
  .case-drawer {
    max-height: none;
  }
}

@media (max-width: 1320px) {
  .admin-app-workspace {
    grid-template-columns: 260px minmax(520px, 1fr);
  }
  .case-actions-grid {
    grid-template-columns: 1fr;
  }
  .case-inline-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1120px) {
  .admin-app-workspace {
    grid-template-columns: 1fr;
  }
  .admin-app-focus-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 840px) {
  .external-app-body {
    height: auto;
  }
  .external-repeat-row {
    grid-template-columns: 1fr;
  }
}

.icon-btn { position: relative; border: 0; background: transparent; cursor: pointer; }
.icon-btn .badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; line-height: 16px; text-align: center;
  font-size: 10px; border-radius: 999px; padding: 0 4px;
  background: #ef4444; color: #fff;
}
#notifList .notif-item {
  padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer;
}
#notifList .notif-item.unread { background: var(--bg-hover); font-weight: 600; }
#notifList .meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
/* Match icon buttons. */
/* === Compact correction for topbar buttons === */
#userBox .btn {
  width: 34px;
  height: 34px;
  font-size: 17px;       /* keep emoji same as before */
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#userBox .topbar-icon {
  width: 42px;
  min-width: 42px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  font-size: 0;
}

#msgBadge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

/* logout icon size to match emoji visually */
#btnLogout .ico-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
  filter: brightness(0) invert(0.1);
}

#btnLogout:hover .ico-img {
  filter: brightness(0) invert(0); /* subtle hover */
}

/* Adjust ghost and danger variants */
.btn.ghost {
  background: #fff;
  border: 1px solid #e5e7eb;
}

.btn.ghost:hover {
  background: #f3f4f6;
}

.btn.danger {
  background: #fee2e2;
  border: 1px solid #fecaca;
}

.btn.danger:hover {
  background: #fecaca;
}

/* PNG icon inside button (same height as emoji icons) */
.btn .ico-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
}

/* Optional: slight color tweak for visibility on red bg */
.btn.danger .ico-img {
  filter: brightness(0) invert(0.1);
}

/* --- Announcement bulk bar --- */
.a-bulkbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}

.bulk-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.bulk-actions.hidden {
  display: none;
}

/* ===== Custom Close Button (Community Detail) ===== */
.btn-close-post {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: color-mix(in oklab, var(--panel) 90%, transparent);
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.btn-close-post:hover {
  background: var(--hover);
  color: var(--text);
  transform: scale(1.08);
}

.btn-close-post:active {
  transform: scale(0.95);
  opacity: 0.85;
}

.btn-close-post:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 35%, transparent);
}


/* ===================================================
   COMMUNITY POST MODAL (separate style)
   =================================================== */
.cpost-modal::backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
}

/* Container */
.cpost-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  padding: 28px;
  width: 95%;
  max-width: 860px; /* OK wider for editing posts */
  animation: fadeIn 0.25s ease;
  position: relative;
}

/* Title */
.cpost-modal h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

/* Fields */
.cpost-modal .field {
  margin-bottom: 16px;
}

.cpost-modal input[type="text"],
.cpost-modal textarea,
.cpost-modal input[type="file"] {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 8px 10px;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
}

/* Buttons layout */
.cpost-modal .row.end {
  margin-top: 20px;
}

/* Close button (top-right) */
.cpost-modal .close-x {
  position: absolute;
  top: 12px;
  right: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cpost-modal .close-x:hover {
  background: var(--hover, rgba(0, 0, 0, 0.05));
  transform: rotate(90deg);
}



.oauth-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 1rem;
}

.btn.oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.btn.oauth:hover { background: #f5f5f5; }

.btn.oauth img {
  width: 20px;
  height: 20px;
}

.btn.oauth.google { border-color: #db4437; color: #db4437; }
.btn.oauth.facebook { border-color: #4267B2; color: #4267B2; }
.btn.oauth.email { border-color: #555; color: #333; }

.email-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 1rem;
}
.email-section.hidden { display: none; }

.btn-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 1rem;
}

/* Centered Close button when email section is hidden */
.actions {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}


.btn-row .btn {
  flex: 1;
  height: 42px;
  font-weight: 500;
}

.btn.primary {
  background: #2563eb;
  color: #fff;
  border: none;
  transition: background 0.2s;
}
.btn.primary:hover { background: #1d4ed8; }

/* Message attachment previews and solid floating menus */
.reply-files-preview,
.compose-files-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reply-files-preview.has-files {
  margin-bottom: 10px;
}

.attach-preview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel, #fff);
  box-shadow: 0 2px 8px rgba(15,23,42,.08);
}

.attach-preview img,
.attach-preview-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary, #f3f4f6);
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}

.attach-preview-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

.attach-preview-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}

.attach-preview-remove {
  border: 0;
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  font-weight: 700;
}

.btn-attach.has-files {
  background: var(--ok);
  color: #fff;
}

.msg-file {
  max-width: 280px;
}

.msg-file-thumb {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.thread-menu,
.menu,
.floating-menu,
.msg-actions-menu,
.user-dropdown {
  background: var(--panel, #fff) !important;
  opacity: 1 !important;
  z-index: 10060 !important;
  backdrop-filter: none !important;
}

.thread-menu {
  min-width: 190px;
  padding: 6px;
}

.thread-menu-portal {
  position: fixed !important;
  display: block !important;
  z-index: 2147483000 !important;
  background: #fff !important;
  color: #111827 !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

.thread-menu .menu-item {
  border-radius: 8px;
}

/* Classic theme icon clarity: cancel old dark-mode filters on light UI */
body.theme-classic .menu-icon,
body.theme-classic .ico-img,
body.theme-classic img[src*="/icons/ui/"],
body.theme-classic img[src*="icons/ui/"] {
  filter: none;
  opacity: 1;
}

body.theme-classic .btn:not(.primary):not(.danger) .menu-icon,
body.theme-classic .btn:not(.primary):not(.danger) .ico-img,
body.theme-classic .menu-item:not(.danger) .menu-icon,
body.theme-classic .admin-nav-item .menu-icon,
body.theme-classic .icon-btn .menu-icon {
  filter: none;
  opacity: 1;
}

body.theme-classic .btn.primary .menu-icon,
body.theme-classic .btn.primary .ico-img,
body.theme-classic .btn-attach.has-files .ico-img {
  filter: brightness(0) invert(1);
  opacity: 1;
}

body.theme-classic .topbar-menu .menu-item.danger .menu-icon,
body.theme-classic .topbar-submenu .menu-item.danger .menu-icon,
body.theme-classic .btn.danger .ico-img,
body.theme-classic #btnLogout .ico-img {
  filter: invert(24%) sepia(88%) saturate(2466%) hue-rotate(346deg) brightness(88%) contrast(92%);
  opacity: 1;
}

body.theme-classic .c-post .likes button:hover .ico-img,
body.theme-classic .c-post .likes .like-btn.active .ico-img,
body.theme-classic .c-post .likes .dislike-btn.active .ico-img,
body.theme-classic .c-comment .btn[data-cl]:hover .ico-img,
body.theme-classic .c-comment .btn[data-cl].active .ico-img,
body.theme-classic .c-comment .btn[data-cl][aria-pressed="true"] .ico-img {
  filter: brightness(1.15) contrast(1.15) drop-shadow(0 0 2px color-mix(in oklab, var(--brand) 45%, transparent));
  opacity: 1;
}

/* Light themed modes share the same readable icon behavior. */
body.theme-green .menu-icon,
body.theme-green .ico-img,
body.theme-green img[src*="/icons/ui/"],
body.theme-green img[src*="icons/ui/"],
body.theme-university .menu-icon,
body.theme-university .ico-img,
body.theme-university img[src*="/icons/ui/"],
body.theme-university img[src*="icons/ui/"] {
  filter: none;
  opacity: 1;
}

body.theme-green .btn.primary .menu-icon,
body.theme-green .btn.primary .ico-img,
body.theme-green .btn-attach.has-files .ico-img,
body.theme-university .btn.primary .menu-icon,
body.theme-university .btn.primary .ico-img,
body.theme-university .btn-attach.has-files .ico-img {
  filter: brightness(0) invert(1);
  opacity: 1;
}

body.theme-green .topbar-menu .menu-item.danger .menu-icon,
body.theme-green .topbar-submenu .menu-item.danger .menu-icon,
body.theme-green .btn.danger .ico-img,
body.theme-green #btnLogout .ico-img,
body.theme-university .topbar-menu .menu-item.danger .menu-icon,
body.theme-university .topbar-submenu .menu-item.danger .menu-icon,
body.theme-university .btn.danger .ico-img,
body.theme-university #btnLogout .ico-img {
  filter: invert(24%) sepia(88%) saturate(2466%) hue-rotate(346deg) brightness(88%) contrast(92%);
  opacity: 1;
}

/* Theme-aware buttons and readable hover states */
.btn:not(.danger):not(.primary),
button.btn:not(.danger):not(.primary),
a.btn:not(.danger):not(.primary),
.start-add-btn,
.panel-tab,
.ann-share-btn,
.ann-card-actions .ann-share-icon-btn,
.c-post .share-btn {
  border-color: var(--btn-soft-border);
  background: var(--btn-soft-bg);
  color: var(--btn-soft-text);
}

.btn:not(.danger):not(.primary):hover,
button.btn:not(.danger):not(.primary):hover,
a.btn:not(.danger):not(.primary):hover,
.start-add-btn:hover,
.panel-tab:hover,
.ann-share-btn:hover,
.ann-card-actions .ann-share-icon-btn:hover,
.c-post .share-btn:hover {
  border-color: var(--btn-primary-border);
  background: var(--btn-soft-bg-hover);
  color: var(--brand);
  box-shadow: 0 8px 20px color-mix(in oklab, var(--brand) 13%, transparent);
}

.btn.primary,
button.btn.primary,
a.btn.primary,
.msg-send-btn,
#btnAddSlide,
.panel-tab.active,
.comment-box .btn.send,
.btn-attach.has-files {
  border-color: var(--btn-primary-border) !important;
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
}

.btn.primary:hover,
button.btn.primary:hover,
a.btn.primary:hover,
.msg-send-btn:hover,
#btnAddSlide:hover,
.panel-tab.active:hover,
.comment-box .btn.send:hover,
.btn-attach.has-files:hover {
  border-color: var(--btn-primary-border) !important;
  background: var(--btn-primary-bg-hover) !important;
  color: var(--btn-primary-text) !important;
  opacity: 1 !important;
  box-shadow: 0 10px 24px color-mix(in oklab, var(--brand) 20%, transparent);
}

body.theme-university .btn.primary.blue,
body.theme-university .btn.primary.green,
body.theme-university .btn.primary.orange,
body.theme-university .btn.primary.purple {
  border-color: var(--btn-primary-border) !important;
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
}

body.theme-university .btn.primary.blue:hover,
body.theme-university .btn.primary.green:hover,
body.theme-university .btn.primary.orange:hover,
body.theme-university .btn.primary.purple:hover {
  background: var(--btn-primary-bg-hover) !important;
  color: var(--btn-primary-text) !important;
}

body.theme-green .btn.primary.blue,
body.theme-green .btn.primary.green,
body.theme-green .btn.primary.orange,
body.theme-green .btn.primary.purple {
  border-color: var(--btn-primary-border) !important;
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
}

body.theme-green .btn.primary.blue:hover,
body.theme-green .btn.primary.green:hover,
body.theme-green .btn.primary.orange:hover,
body.theme-green .btn.primary.purple:hover {
  background: var(--btn-primary-bg-hover) !important;
  color: var(--btn-primary-text) !important;
}

.legal-page {
  max-width: 920px;
  margin: 28px auto;
  padding: 34px;
}

.legal-page-head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 18px;
  margin-bottom: 22px;
}

.legal-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--brand);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.legal-page h1 {
  margin: 0;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
}

.legal-content {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
  white-space: normal;
}

.legal-content p {
  margin: 0 0 16px;
}

.ann-card-actions .ann-card-fav.active,
.ann-card-actions .ann-card-fav.active:hover,
.ann-card-actions .ann-card-fav[aria-pressed="true"] {
  color: var(--danger) !important;
  background: transparent !important;
}

.ann-card-actions .ann-card-fav.active .ann-heart-glyph,
.ann-card-actions .ann-card-fav[aria-pressed="true"] .ann-heart-glyph {
  color: var(--danger) !important;
}

/* Application form refinements */
#applyForm .checkbox,
#applyForm label.checkbox,
#applyForm .doc-option {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  text-align: left;
  width: auto;
  max-width: 100%;
  line-height: 1.35;
}

#applyForm .checkbox input[type="checkbox"],
#applyForm .checkbox input[type="radio"],
#applyForm .doc-option input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
}

#applyForm .doc-row.doc-disabled {
  background: color-mix(in oklab, var(--muted) 8%, var(--panel));
}

#applyForm .doc-row.doc-disabled input[type="file"] {
  pointer-events: none;
  filter: grayscale(1);
  opacity: .55;
}

#applyForm .rec-service-fields {
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: color-mix(in oklab, var(--brand) 5%, var(--panel));
}

#docsList .doc-row > .grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

#docsList .doc-row .doc-option,
#docsList .doc-row > label.checkbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: none !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  white-space: normal !important;
  text-align: left !important;
  line-height: 1.35;
}

#docsList .doc-row .doc-option input,
#docsList .doc-row > label.checkbox input {
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  display: block !important;
  flex: 0 0 16px !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Contact Manager */
.contact-manager {
  display: grid;
  gap: 16px;
}

.admin-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.cm-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}

.cm-tab {
  border: 0;
  background: transparent;
  color: var(--muted-text, var(--muted));
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 700;
  border-bottom: 3px solid transparent;
}

.cm-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.cm-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.cm-toolbar input {
  flex: 1;
}

.cm-layout {
  display: grid;
  grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
  gap: 14px;
  min-height: 620px;
}

.cm-list,
.cm-detail,
.cm-settings-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.cm-list {
  overflow: auto;
  max-height: 70vh;
  padding: 8px;
}

.cm-row {
  display: grid;
  gap: 6px;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
}

.cm-row:hover,
.cm-row.active {
  background: color-mix(in oklab, var(--brand) 9%, var(--panel));
  border-color: color-mix(in oklab, var(--brand) 35%, var(--border));
}

.cm-row-title {
  font-weight: 800;
  color: var(--text);
}

.cm-row-meta,
.cm-row-foot {
  color: var(--muted);
  font-size: 13px;
}

.cm-row-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cm-detail {
  min-width: 0;
  padding: 18px;
  overflow: auto;
  max-height: 70vh;
}

.cm-detail-head,
.cm-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cm-message-body {
  margin: 16px 0;
  padding: 16px;
  background: color-mix(in oklab, var(--brand) 5%, var(--panel));
  border: 1px solid var(--border);
  border-radius: 10px;
  line-height: 1.65;
}

.cm-replies {
  margin-top: 18px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.cm-reply-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin: 10px 0;
  background: color-mix(in oklab, var(--panel) 92%, var(--bg));
}

.cm-reply-form {
  margin-top: 18px;
}

.cm-settings-card {
  padding: 20px;
}

.cm-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 12px 0 20px;
}

.cm-email-preview {
  margin: 12px 0;
}

.cm-email-card {
  max-width: 520px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.cm-email-head {
  min-height: 76px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  color: var(--brand);
  background: #fff;
  border: 2px solid var(--brand);
  border-bottom: 0;
}

.cm-email-head img {
  max-height: 54px;
  max-width: 220px;
  object-fit: contain;
}

.cm-email-content {
  padding: 20px;
  color: #111827;
}

.cm-email-content a {
  display: inline-block;
  margin-top: 10px;
  color: #fff;
  border-radius: 999px;
  padding: 9px 14px;
}

.cm-email-content .cm-preview-action {
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.cm-compose-modal::backdrop {
  background: rgba(15, 23, 42, .58);
}

.cm-compose-card {
  width: min(980px, calc(100vw - 40px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.cm-compose-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding-right: 42px;
}

.cm-compose-preview {
  margin-top: 14px;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: color-mix(in oklab, var(--brand) 4%, var(--panel));
}

.cm-email-foot {
  padding: 14px 20px;
  border-top: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.cm-email-foot a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 700;
}

@media (max-width: 900px) {
  .cm-layout {
    grid-template-columns: 1fr;
  }
}