:root {
  --navy: #10265f;
  --primary: #075bd8;
  --action: #0878f9;
  --pale-blue: #eaf4ff;
  --surface: #ffffff;
  --canvas: #f3f8ff;
  --muted: #58677f;
  --border: #d7e5f6;
  --success: #147a4f;
  --warning: #b76305;
  --error: #b4233c;
  --service-accent: #075bd8;
  --service-soft: #eaf4ff;
  --shadow-sm: 0 8px 24px rgba(16, 38, 95, .08);
  --shadow-lg: 0 22px 70px rgba(16, 38, 95, .13);
  color: var(--navy);
  background: var(--canvas);
  font-family: "Segoe UI", "Noto Sans", Arial, sans-serif;
  font-synthesis: none;
  line-height: 1.55;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--navy); }
a { color: var(--primary); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, .button { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); }

.next-shell { width: min(1120px, calc(100% - 28px)); margin: 24px auto; }
.next-card {
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.next-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.next-head h1, .next-head h2 { margin: 0 0 8px; line-height: 1.25; }
.muted { color: var(--muted); }

.button, button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 11px;
  padding: 10px 16px;
  background: var(--primary);
  color: #fff;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.button:hover, button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(7, 91, 216, .2); }
.button:active, button:active { transform: translateY(0); }
.button.secondary, button.secondary { background: var(--pale-blue); color: var(--primary); }
.button.danger, button.danger { background: var(--error); }
button:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(8, 120, 249, .36);
  outline-offset: 2px;
}

.message {
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid #c7dcf7;
  border-radius: 12px;
  background: #eef7ff;
  white-space: pre-wrap;
}
.message.error { border-color: #fac6ce; background: #fff2f4; color: #951c34; }
.message.success { border-color: #bde8d2; background: #edfdf5; color: #14643f; }
.progress { width: 100%; height: 12px; margin-top: 14px; accent-color: var(--service-accent); }
.warning { border-left: 4px solid var(--warning); background: #fff9e9; padding: 12px; }

.field { display: grid; gap: 7px; margin: 13px 0; }
.field label, .field-label { font-weight: 700; }
.field input, .field select, .field textarea,
.toolbar input, .toolbar select, .toolbar textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid #b9d0ec;
  border-radius: 11px;
  padding: 10px 12px;
  background: #fff;
  color: var(--navy);
}
.field textarea, .toolbar textarea { min-height: 112px; resize: vertical; }
.required { color: var(--error); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 12px; }
.grid-table { width: 100%; min-width: 900px; border-collapse: collapse; background: #fff; }
.grid-table th, .grid-table td { padding: 10px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.grid-table th { position: sticky; top: 0; background: var(--pale-blue); }
.grid-table tbody tr { cursor: pointer; }
.grid-table tbody tr:hover { background: #f5faff; }
.toolbar { display: grid; grid-template-columns: 2fr repeat(3, 1fr) auto; gap: 8px; margin: 14px 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.details pre { max-height: 400px; overflow: auto; border-radius: 10px; padding: 13px; background: #f7fbff; white-space: pre-wrap; word-break: break-word; }
.file-list, .news-list { display: grid; gap: 7px; }
.status-pill { display: inline-block; border-radius: 999px; padding: 5px 9px; background: var(--pale-blue); font-size: 12px; font-weight: 750; }
.news-item { border: 1px solid var(--border); border-radius: 11px; padding: 11px; }

/* PHASE 17M-B2: unified internal service-form design system. */
.form-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 0 0, rgba(76, 172, 255, .14), transparent 30rem),
    linear-gradient(180deg, #eef7ff 0, #f8fbff 34rem, #f3f8ff 100%);
}
.form-shell { width: min(1220px, calc(100% - 32px)); margin: 22px auto 54px; }
.service-hero {
  --service-accent: #075bd8;
  --service-soft: #eaf4ff;
  position: relative;
  min-height: 400px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr);
  border: 1px solid color-mix(in srgb, var(--service-accent) 22%, #fff);
  border-radius: 28px;
  background: linear-gradient(122deg, #fff 0 48%, var(--service-soft) 100%);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.service-hero::before {
  position: absolute;
  z-index: -1;
  width: 420px;
  height: 420px;
  right: -130px;
  top: -180px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--service-accent) 13%, transparent);
  content: "";
}
.service-hero__content { position: relative; z-index: 2; min-width: 0; align-self: center; padding: 42px 16px 42px 48px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 28px; color: #66758c; font-size: 14px; }
.breadcrumbs a { color: #3f5573; font-weight: 650; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.service-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--service-accent); font-size: 14px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.service-kicker > span:first-child { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: var(--service-soft); font-size: 18px; }
.service-hero h1 { max-width: 660px; margin: 0; overflow-wrap: anywhere; color: #0e2559; font-size: clamp(30px, 4vw, 50px); line-height: 1.1; letter-spacing: -.025em; }
.service-subtitle { max-width: 650px; margin: 16px 0 0; color: var(--service-accent); font-size: clamp(18px, 2vw, 22px); font-weight: 700; line-height: 1.38; }
.service-description { max-width: 650px; margin: 10px 0 0; color: #51627c; font-size: 16px; }
.service-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.service-code-badge, .privacy-note { display: inline-flex; min-height: 30px; align-items: center; border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 750; }
.service-code-badge { max-width: 100%; overflow: hidden; background: #eef2f7; color: #4c5d74; text-overflow: ellipsis; white-space: nowrap; }
.privacy-note { background: #ebf9f1; color: #176442; }
.hero-back { margin-top: 24px; background: var(--service-accent); }
.service-hero__visual { position: relative; min-width: 0; min-height: 400px; margin: 0; align-self: stretch; }
.service-hero__visual::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0, rgba(255,255,255,.2) 22%, transparent 48%);
  pointer-events: none;
  content: "";
}
.service-hero__visual img { width: 100%; height: 100%; min-height: 400px; display: block; object-fit: cover; object-position: center; }
.service-hero--error { min-height: 260px; grid-template-columns: 1fr; }
.service-hero--error .service-hero__visual { display: none; }
.page-message { margin: 20px 0; }

.form-workspace { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 22px; margin-top: 24px; }
.form-guide { position: sticky; top: 18px; border: 1px solid var(--border); border-radius: 20px; padding: 20px; background: #fff; box-shadow: var(--shadow-sm); }
.guide-eyebrow { margin: 0 0 16px; color: var(--service-accent); font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.form-guide ol { display: grid; gap: 19px; margin: 0; padding: 0; list-style: none; }
.form-guide li { display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: start; }
.form-guide li > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--service-soft); color: var(--service-accent); font-weight: 850; }
.form-guide strong, .form-guide small { display: block; }
.form-guide small { margin-top: 2px; color: #6b7890; line-height: 1.45; }
.guide-help { display: flex; gap: 10px; margin-top: 24px; border-radius: 14px; padding: 12px; background: #f4f8fd; }
.guide-help > span { font-size: 20px; }
.guide-help p { margin: 0; }

.form-panel { overflow: hidden; border: 1px solid var(--border); border-radius: 22px; background: #fff; box-shadow: var(--shadow-sm); }
.form-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 26px 30px; border-bottom: 1px solid var(--border); }
.form-panel__head h2 { margin: 2px 0 0; font-size: 25px; line-height: 1.2; }
.form-step { margin: 0; color: var(--service-accent); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.field-count-badge { border-radius: 999px; padding: 7px 11px; background: var(--service-soft); color: var(--service-accent); font-size: 13px; font-weight: 750; white-space: nowrap; }
#serviceForm { padding: 4px 30px 30px; }

.form-section { min-width: 0; margin: 25px 0; padding: 0; border: 0; }
.form-section + .form-section { padding-top: 26px; border-top: 1px solid var(--border); }
.form-section legend { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 17px; padding: 0; color: #10265f; font-size: 19px; font-weight: 800; }
.section-number { display: inline-grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: var(--service-soft); color: var(--service-accent); font-size: 13px; }
.form-section__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 20px; }
.counseling-notice { margin-bottom: 18px; border: 1px solid #b8d9f7; border-left: 5px solid #1d78d2; border-radius: 14px; padding: 15px 17px; background: linear-gradient(135deg,#eff8ff,#fff); color: #294c76; }
.counseling-notice strong { display: block; color: #143f78; }
.counseling-notice p { margin: 5px 0 0; }
.grade-class-control { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 12px; }
.grade-class-control > select { min-width: 0; max-width: 100%; }
.form-section .field { min-width: 0; align-content: start; margin: 0; }
.field--wide { grid-column: 1 / -1; }
.field-label { display: block; color: #1b315d; font-size: 14px; font-weight: 750; line-height: 1.45; }
.form-section .field input:not([type="checkbox"]):not([type="file"]),
.form-section .field select,
.form-section .field textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid #b9cde6;
  border-radius: 12px;
  padding: 11px 13px;
  background: #fff;
  color: #10265f;
  box-shadow: 0 1px 2px rgba(16, 38, 95, .03);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.form-section .field textarea { min-height: 120px; resize: vertical; }
.form-section .field select { padding-right: 38px; text-overflow: ellipsis; }
.form-section .field input:hover, .form-section .field select:hover, .form-section .field textarea:hover { border-color: #8eb4df; }
.form-section .field input:focus, .form-section .field select:focus, .form-section .field textarea:focus {
  border-color: var(--service-accent);
  outline: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--service-accent) 14%, transparent);
}
.form-section .field input:disabled, .form-section .field select:disabled, .form-section .field textarea:disabled { background: #edf2f8; color: #748197; cursor: not-allowed; }
.form-section .date-input { min-height: 50px; cursor: pointer; color-scheme: light; }
.form-section .date-input::-webkit-calendar-picker-indicator { width: 24px; height: 24px; cursor: pointer; opacity: .8; }
.form-section .field--date, .form-section .field--date .field-label { cursor: pointer; }
.field-help { color: #69778e; font-size: 12.5px; line-height: 1.45; }
.field-error { color: var(--error); font-size: 13px; font-weight: 650; }
.field--invalid input, .field--invalid select, .field--invalid textarea, .field--invalid .choice-card, .field--invalid .file-drop { border-color: var(--error) !important; background: #fff8f9 !important; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.choice-card--disabled { opacity: .52; cursor: not-allowed; }
.choice-card { position: relative; display: flex; min-height: 48px; align-items: center; gap: 10px; border: 1px solid #bfd1e8; border-radius: 12px; padding: 10px 12px; background: #fff; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, transform .16s ease; }
.choice-card:hover { border-color: var(--service-accent); background: var(--service-soft); transform: translateY(-1px); }
.choice-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice-indicator { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border: 2px solid #9fb6d2; border-radius: 7px; }
.choice-card:has(input:checked) { border-color: var(--service-accent); background: var(--service-soft); }
.choice-card input:checked + .choice-indicator { border-color: var(--service-accent); background: var(--service-accent); }
.choice-card input:checked + .choice-indicator::after { color: #fff; content: "✓"; font-size: 14px; font-weight: 900; }
.choice-card:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--service-accent) 28%, transparent); outline-offset: 2px; }

.file-upload { overflow: hidden; border: 1px solid #bfd1e8; border-radius: 14px; background: #fbfdff; }
.file-upload > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-drop { display: flex; min-height: 112px; align-items: center; justify-content: center; gap: 14px; padding: 20px; text-align: left; cursor: pointer; transition: background-color .16s ease; }
.file-drop:hover { background: var(--service-soft); }
.file-drop__icon { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border-radius: 14px; background: var(--service-soft); color: var(--service-accent); font-size: 25px; font-weight: 900; }
.file-drop strong, .file-drop small { display: block; }
.file-drop small { margin-top: 3px; color: #6c7890; font-weight: 500; }
.file-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #dce7f4; padding: 10px 13px; background: #f5f9fe; }
.file-selection { display: flex; min-width: 0; flex-wrap: wrap; gap: 6px; color: #65738a; font-size: 12.5px; }
.file-item { display: inline-flex; max-width: 100%; align-items: center; flex-wrap: wrap; gap: 6px; }
.file-chip { max-width: 100%; overflow: hidden; border-radius: 999px; padding: 5px 9px; background: #fff; color: #304766; text-overflow: ellipsis; white-space: nowrap; }
.pdf-conversion-option { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 9px; background: #eaf4ff; color: #174f8a; font-weight: 700; }
.pdf-conversion-option input { width: 16px; height: 16px; margin: 0; }
.file-conversion-options { display: grid; gap: 7px; margin-top: 8px; }
.text-button { min-height: 34px; padding: 6px 9px; background: transparent; color: var(--error); font-size: 12px; box-shadow: none; white-space: nowrap; }
.text-button:hover { background: #fff0f2; box-shadow: none; transform: none; }

.error-summary { margin: 22px 30px 0; border: 1px solid #f1b3bd; border-left: 5px solid var(--error); border-radius: 13px; padding: 14px 16px; background: #fff5f6; color: #8e1e32; }
.error-summary ul { margin: 7px 0 0; padding-left: 22px; }
.error-summary a { color: #8e1e32; }

.turnstile-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 28px 0 0; border: 1px solid #cce0ef; border-radius: 16px; padding: 17px; background: linear-gradient(135deg, #f7fbff, var(--service-soft)); }
.turnstile-card__copy { display: flex; min-width: 0; align-items: center; gap: 12px; }
.turnstile-card__icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 13px; background: #fff; font-size: 22px; }
.turnstile-card h3 { margin: 0; font-size: 16px; }
.turnstile-card p { margin: 3px 0 0; color: #617087; font-size: 13px; }
.turnstile-box { min-width: 300px; min-height: 65px; display: grid; place-items: center; }
.turnstile-loading, .turnstile-ready, .turnstile-failed { border-radius: 999px; padding: 7px 11px; background: #fff; color: #627087; font-size: 12.5px; font-weight: 700; }
.turnstile-ready { color: var(--success); }
.turnstile-failed { color: var(--error); }

.form-submit-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 24px; border-top: 1px solid var(--border); padding-top: 22px; }
.submit-assurance { display: flex; align-items: center; gap: 8px; color: #65738a; font-size: 13px; }
.submit-assurance > span:first-child { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #e9f8f1; color: var(--success); font-weight: 900; }
.form-submit-bar #submitButton { min-width: 210px; background: var(--service-accent); }

/* Secondary login after Cloudflare Access. */
.admin-login-card { max-width: 520px; margin: 70px auto; }
.admin-login-card .login-shield { display: grid; width: 58px; height: 58px; margin-bottom: 16px; place-items: center; border-radius: 18px; background: var(--pale-blue); font-size: 28px; }
.admin-login-card h1 { margin: 0 0 7px; }
.admin-login-card form { margin-top: 20px; }
.admin-session-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; border-radius: 13px; padding: 10px 13px; background: #eef7ff; }

@media (max-width: 980px) {
  .service-hero { grid-template-columns: minmax(0, 1fr) 380px; }
  .service-hero__content { padding-left: 34px; }
  .form-workspace { grid-template-columns: 1fr; }
  .form-guide { position: static; }
  .form-guide ol { grid-template-columns: repeat(3, 1fr); }
  .guide-help { display: none; }
  .turnstile-card { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 760px) {
  .next-shell { width: min(100% - 16px, 1120px); margin: 10px auto; }
  .next-card { padding: 14px; }
  .toolbar, .two-col { grid-template-columns: 1fr; }
  .next-head { align-items: stretch; flex-direction: column; }
  .next-head > .button { width: 100%; }
  .form-shell { width: min(100% - 16px, 1220px); margin-top: 8px; }
  .service-hero { min-height: 0; grid-template-columns: 1fr; border-radius: 22px; }
  .service-hero__content { order: 2; padding: 25px 20px 28px; }
  .service-hero__visual { order: 1; min-height: 220px; max-height: 280px; }
  .service-hero__visual img { min-height: 220px; object-position: 68% center; }
  .service-hero__visual::after { background: linear-gradient(0deg, #fff 0, transparent 45%); }
  .breadcrumbs { margin-bottom: 18px; }
  .service-hero h1 { font-size: clamp(28px, 7.5vw, 34px); }
  .service-subtitle { font-size: 17px; }
  .service-description { font-size: 14px; }
  .service-code-badge { display: none; }
  .hero-back { width: 100%; }
  .form-workspace { margin-top: 14px; }
  .form-guide { padding: 16px; }
  .form-guide ol { grid-template-columns: 1fr; gap: 12px; }
  .form-panel { border-radius: 18px; }
  .form-panel__head { align-items: flex-start; padding: 20px; }
  .field-count-badge { white-space: normal; text-align: right; }
  #serviceForm { padding: 2px 18px 22px; }
  .form-section__grid { grid-template-columns: 1fr; gap: 15px; }
  .field--wide { grid-column: auto; }
  .choice-grid { grid-template-columns: 1fr; }
  .grade-class-control { grid-template-columns: 1fr; }
  .turnstile-box { width: 100%; min-width: 0; overflow: hidden; justify-content: start; }
  .turnstile-box iframe { max-width: 100%; transform-origin: left top; }
  .form-submit-bar { align-items: stretch; flex-direction: column; }
  .form-submit-bar .actions { flex-direction: column-reverse; }
  .form-submit-bar .actions > * { width: 100%; }
  .error-summary { margin: 18px 18px 0; }
  .file-meta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 390px) {
  .service-hero__content { padding-inline: 16px; }
  .form-panel__head { flex-direction: column; }
  .turnstile-card { padding: 13px; }
  .turnstile-card__copy { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* PHASE 17M-B3: scoped professional Admin system. */
body.admin-page { min-width: 320px; margin: 0; background: #f3f6f8; color: #172b2a; font-family: Inter, "Segoe UI", Arial, sans-serif; }
.admin-page button, .admin-page input, .admin-page select, .admin-page textarea { font: inherit; }
.admin-login-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(300px, .8fr) minmax(430px, 1.2fr); background: #eef4f1; }
.admin-login-brand { display: grid; align-content: center; justify-items: start; padding: clamp(38px, 7vw, 110px); background: linear-gradient(145deg, #07483d, #0d6e5e 58%, #12816c); color: #fff; }
.admin-login-emblem, .admin-brand__mark { display: grid; place-items: center; border-radius: 18px; background: #fff; color: #0c6657; font-weight: 900; letter-spacing: -.04em; box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.admin-login-emblem { width: 82px; height: 82px; margin-bottom: 34px; font-size: 30px; }
.admin-login-brand p { margin: 0 0 8px; color: #cbe6df; font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.admin-login-brand strong { max-width: 560px; font-size: clamp(27px, 3vw, 46px); line-height: 1.14; }
.admin-login-brand small { margin-top: 22px; color: #d9eee9; font-size: 16px; }
.admin-login-screen > .admin-login-card { width: min(470px, calc(100% - 40px)); align-self: center; justify-self: center; margin: 40px; padding: 40px; border: 0; box-shadow: 0 22px 70px rgba(20,58,51,.14); }
.admin-login-card .login-shield { background: #e7f5f1; color: #0b6d5c; font-size: 25px; font-weight: 900; }
.admin-eyebrow { margin: 0 0 7px; color: #0d7260; font-size: 12px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.admin-layout { min-height: 100vh; display: grid; grid-template-columns: 280px minmax(0,1fr); }
.admin-sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; width: 280px; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.08); padding: 20px 14px; background: #073e36; color: #fff; }
.admin-brand { display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 12px; min-height: 78px; padding: 8px 10px 20px; border-bottom: 1px solid rgba(255,255,255,.13); }
.admin-brand__mark { width: 48px; height: 48px; border-radius: 14px; font-size: 18px; }
.admin-brand small, .admin-brand strong { display: block; }
.admin-brand small { margin-bottom: 4px; color: #a9d3ca; font-size: 9px; font-weight: 750; line-height: 1.3; letter-spacing: .04em; }
.admin-brand strong { font-size: 13px; line-height: 1.35; }
.admin-nav { display: grid; gap: 5px; margin-top: 20px; overflow-y: auto; }
.admin-nav button { min-height: 46px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 9px; border: 0; border-radius: 11px; padding: 9px 12px; background: transparent; color: #c9e3dd; text-align: left; box-shadow: none; }
.admin-nav button:hover { background: rgba(255,255,255,.08); color: #fff; transform: none; box-shadow: none; }
.admin-nav button.active { background: #fff; color: #075348; font-weight: 800; box-shadow: 0 7px 18px rgba(0,0,0,.15); }
.admin-nav button > span:first-child { font-size: 20px; text-align: center; }
.admin-sidebar__footer { display: grid; grid-template-columns: 12px 1fr; align-items: center; gap: 10px; margin-top: auto; border-radius: 12px; padding: 12px; background: rgba(255,255,255,.07); }
.admin-sidebar__footer strong, .admin-sidebar__footer small { display: block; }
.admin-sidebar__footer small { margin-top: 2px; color: #abd2ca; font-size: 11px; }
.admin-status-dot { width: 10px; height: 10px; border-radius: 50%; background: #4ce0a3; box-shadow: 0 0 0 4px rgba(76,224,163,.15); }
.admin-main { grid-column: 2; min-width: 0; }
.admin-topbar { position: sticky; z-index: 30; top: 0; min-height: 72px; display: grid; grid-template-columns: auto minmax(280px,600px) 1fr; align-items: center; gap: 18px; border-bottom: 1px solid #dae4e1; padding: 10px 28px; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
.admin-icon-button { width: 44px; height: 44px; min-height: 44px; display: grid; place-items: center; border: 1px solid #d6e2df; border-radius: 11px; padding: 0; background: #fff; color: #264b45; font-size: 22px; box-shadow: none; }
.admin-icon-button:hover { background: #edf6f3; transform: none; box-shadow: none; }
#drawerButton { display: none; }
.admin-global-search { min-height: 46px; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; border: 1px solid #cfddda; border-radius: 12px; padding: 0 12px; background: #f7faf9; color: #608079; }
.admin-global-search input { min-width: 0; border: 0; outline: 0; background: transparent; }
.admin-global-search kbd { border: 1px solid #d7e2df; border-radius: 6px; padding: 2px 6px; background: #fff; color: #70847f; font-size: 10px; }
.admin-account { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.admin-account > div { min-width: 0; }
.admin-account strong, .admin-account small { display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-account small { color: #6a807b; font-size: 11px; }
.admin-avatar { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 50%; background: #dff1ec; color: #086454; font-weight: 900; }
.admin-account button { min-height: 40px; padding: 8px 11px; }
.admin-content { width: min(1480px,100%); margin: 0 auto; padding: 28px clamp(18px,3vw,42px) 60px; }
.admin-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.admin-page-head h1 { margin: 0; color: #173c36; font-size: clamp(27px,3vw,36px); letter-spacing: -.025em; }
.admin-page-head > div > p:last-child { margin: 7px 0 0; color: #687e79; }
.admin-breadcrumb { margin: 0 0 8px !important; color: #14806d !important; font-size: 12px; font-weight: 800; }
.admin-module { display: grid; gap: 18px; }
.admin-card { min-width: 0; overflow: hidden; border: 1px solid #dbe6e3; border-radius: 17px; padding: 20px; background: #fff; box-shadow: 0 4px 16px rgba(30,65,58,.045); }
.admin-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.admin-card__head h2 { margin: 0; color: #1d3e39; font-size: 18px; }
.admin-card__head p { margin: 4px 0 0; color: #738783; font-size: 13px; }
.admin-filter-card { padding: 15px; }
.admin-filter-grid { display: grid; grid-template-columns: repeat(4,minmax(150px,1fr)); align-items: end; column-gap: 18px; row-gap: 18px; }
.admin-filter-grid--tickets { grid-template-columns: 1.4fr repeat(3,minmax(140px,1fr)); }
.admin-filter-grid .field { margin: 0; }
.admin-filter-grid .field--wide { grid-column: 1 / -1; }
.admin-filter-grid label { font-size: 12px; font-weight: 750; }
.admin-filter-grid input, .admin-filter-grid select, .admin-filter-grid textarea, .admin-page .admin-card > form > .field input, .admin-page .admin-card > form > .field select { min-height: 44px; width: 100%; border: 1px solid #cbdad6; border-radius: 10px; padding: 9px 11px; background: #fff; color: #193b35; }
.admin-filter-grid textarea { min-height: 88px; resize: vertical; }
.admin-filter-grid button { min-height: 44px; }
.admin-kpis { display: grid; grid-template-columns: repeat(4,minmax(180px,1fr)); gap: 15px; }
.admin-kpi { position: relative; isolation: isolate; overflow: hidden; min-width: 0; min-height: 132px; display: flex; flex-direction: column; justify-content: center; border: 1px solid #dce8e5; border-radius: 15px; padding: 17px; background: #fff; }
.admin-kpi::after { position: absolute; z-index: 0; width: 65px; height: 65px; right: -20px; bottom: -25px; border-radius: 50%; background: #dcefeb; content: ""; }
.admin-kpi span, .admin-kpi strong, .admin-kpi small { position: relative; z-index: 1; display: block; overflow-wrap: anywhere; }
.admin-kpi span { color: #657b76; font-size: 12px; font-weight: 750; line-height: 1.45; }
.admin-kpi strong { margin: 8px 0 6px; color: #173c36; font-size: 29px; }
.admin-kpi small { padding-right: 20px; color: #82928f; font-size: 10px; line-height: 1.45; }
.admin-kpi--completed::after { background: #d8f2e4; }.admin-kpi--processing::after { background: #dceafa; }.admin-kpi--supplement::after { background: #fff0c7; }.admin-kpi--rejected::after { background: #f9dfe3; }
.admin-kpi--invalid::after { background: #eadff5; }.admin-kpi--cancelled::after { background: #ebe5e8; }
.admin-dashboard-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.admin-card--wide { grid-column: 1 / -1; }
.admin-line-chart { width: 100%; min-height: 210px; }
.admin-line-chart .grid { fill: none; stroke: #d9e5e2; stroke-width: 1; }.admin-line-chart .series { fill: none; stroke: #0d7966; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }.admin-line-chart circle { fill: #fff; stroke: #0d7966; stroke-width: 3; }
.admin-bars { display: grid; gap: 11px; }
.admin-bars > div { display: grid; grid-template-columns: minmax(105px,1fr) minmax(100px,2fr) 40px; align-items: center; gap: 9px; font-size: 12px; }
.admin-bars span { overflow: hidden; color: #526d67; text-overflow: ellipsis; white-space: nowrap; }.admin-bars i { height: 8px; overflow: hidden; border-radius: 99px; background: #e8efed; }.admin-bars b { height: 100%; display: block; border-radius: 99px; background: linear-gradient(90deg,#0a6858,#1b9a82); }
.admin-summary-list, .admin-compact-list { display: grid; gap: 0; }
.admin-summary-list > div, .admin-compact-list > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; border-bottom: 1px solid #edf2f1; padding: 11px 4px; }
.admin-summary-list small, .admin-compact-list small { grid-column: 1 / -1; color: #768985; font-size: 11px; }
.admin-table-wrap { max-width: 100%; overflow: auto; border: 1px solid #e0e9e7; border-radius: 12px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { position: sticky; z-index: 1; top: 0; padding: 11px 12px; background: #eff5f3; color: #58716b; font-size: 11px; text-align: left; text-transform: uppercase; white-space: nowrap; }
.admin-table td { max-width: 290px; border-top: 1px solid #e8efed; padding: 12px; color: #2f4d47; vertical-align: middle; }
.admin-table tbody tr { cursor: pointer; }.admin-table tbody tr:hover, .admin-table tbody tr:focus { outline: none; background: #f4faf8; }
.admin-table td small, .admin-table__primary { display: block; }.admin-table td small { margin-top: 3px; color: #778985; font-size: 10px; }
.admin-badge { display: inline-flex; min-height: 27px; align-items: center; border-radius: 99px; padding: 4px 9px; background: #edf1f1; color: #536663; font-size: 11px; font-weight: 800; white-space: nowrap; }
.admin-badge--new { background: #e6f1ff; color: #255f9c; }.admin-badge--received { background: #e6f2fb; color: #326681; }.admin-badge--processing { background: #e4f5ef; color: #0c705d; }.admin-badge--supplement { background: #fff2d4; color: #885c00; }.admin-badge--completed { background: #def4e6; color: #1b7040; }.admin-badge--rejected { background: #fbe2e6; color: #9a2e42; }.admin-badge--cancelled { background: #eee8ea; color: #6d5260; }.admin-badge--invalid { background: #eee4f7; color: #69408d; }
.admin-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 17px; }.admin-pager button { min-height: 40px; }
.admin-empty { min-height: 180px; display: grid; align-content: center; justify-items: center; padding: 24px; color: #738783; text-align: center; }.admin-empty > span { font-size: 35px; }.admin-empty strong { color: #3e5c56; }.admin-empty p { margin: 6px 0 0; }
.admin-loading { min-height: 220px; display: grid; align-content: center; justify-items: center; color: #6f837e; }.admin-loading span { width: 84px; height: 10px; position: relative; overflow: hidden; border-radius: 99px; background: #dce9e5; }.admin-loading span::after { position: absolute; inset: 0; transform: translateX(-70%); border-radius: inherit; background: linear-gradient(90deg,transparent,#63a99b,transparent); animation: admin-loading-calm 1.8s ease-in-out infinite; content: ""; }.admin-loading p { margin: 12px 0; }@keyframes admin-loading-calm { 50% { transform: translateX(70%); } 100% { transform: translateX(140%); } }@media (prefers-reduced-motion: reduce) { .admin-loading span::after { transform: none; animation: none; background: #78aa9f; opacity: .55; } }
.admin-case-workspace{min-width:0;overflow-x:clip;overflow-anchor:none;scrollbar-gutter:stable}.admin-case-content{position:relative;min-width:0;min-height:1280px;overflow-x:clip;contain:layout paint}.admin-case-view{min-width:0;overflow-anchor:none}.admin-case-table-region{position:relative;min-height:260px}.admin-case-table-loading{min-height:260px;display:grid;place-content:center;justify-items:center;color:#607772}.admin-case-table-loading span{width:72px;height:8px;overflow:hidden;position:relative;border-radius:99px;background:#dce9e5}.admin-case-table-loading span::after{position:absolute;inset:0;transform:translateX(-70%);border-radius:inherit;background:linear-gradient(90deg,transparent,#3f9a88,transparent);animation:admin-loading-calm 1.4s ease-in-out infinite;content:""}.admin-case-table-loading p{margin:10px 0 0}.admin-case-view.is-refreshing .admin-case-table-region::after{position:absolute;top:0;right:0;width:42px;height:3px;border-radius:99px;background:#178977;animation:admin-case-refresh 1s ease-in-out infinite;content:""}.admin-case-soft-status{margin:0 0 10px;padding:8px 11px;border:1px solid #eed7a4;border-radius:10px;background:#fff9e9;color:#765d1d;font-size:.88rem}@keyframes admin-case-refresh{0%,100%{opacity:.35;transform:translateX(-30px)}50%{opacity:1;transform:translateX(0)}}@media(max-width:800px){.admin-case-content{min-height:1100px;contain:layout}.admin-case-table-region,.admin-case-table-loading{min-height:220px}}@media(prefers-reduced-motion:reduce){.admin-case-table-loading span::after,.admin-case-view.is-refreshing .admin-case-table-region::after{animation:none}}
.admin-dialog { width: min(1050px,calc(100% - 30px)); max-height: calc(100vh - 30px); overflow: hidden; border: 0; border-radius: 19px; padding: 0; color: #193a34; box-shadow: 0 30px 100px rgba(10,42,36,.3); }.admin-dialog::backdrop { background: rgba(5,30,26,.66); backdrop-filter: blur(3px); }.admin-dialog--small { width: min(500px,calc(100% - 30px)); }
.admin-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid #e0e9e7; padding: 19px 22px; background: #f8fbfa; }.admin-dialog__head h2 { margin: 0; font-size: 22px; }.admin-dialog__body { max-height: calc(100vh - 120px); overflow: auto; padding: 22px; }.admin-dialog--small .admin-dialog__body { max-height: none; }
.admin-detail-hero { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 20px; border-radius: 14px; padding: 18px; background: linear-gradient(135deg,#e9f5f1,#f8fbfa); }.admin-detail-hero h3 { margin: 10px 0 3px; }.admin-detail-hero p { margin: 0; color: #687d78; }.admin-detail-hero > div:last-child span,.admin-detail-hero > div:last-child strong { display: block; text-align: right; }
.admin-workflow-form { margin: 18px 0; background: #fcfefd; }
.admin-detail-section { margin-top: 25px; }.admin-detail-section > h3 { border-bottom: 1px solid #e4ecea; margin: 0 0 14px; padding-bottom: 9px; color: #22453f; }
.admin-data-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0; }.admin-data-grid > div { border-radius: 10px; padding: 11px 13px; background: #f6f9f8; }.admin-data-grid dt { color: #6f837e; font-size: 11px; font-weight: 700; }.admin-data-grid dd { margin: 5px 0 0; overflow-wrap: anywhere; color: #203f39; }
.admin-file-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.admin-file { display: grid; grid-template-columns: 35px 1fr; align-items: center; gap: 10px; border: 1px solid #dce8e5; border-radius: 11px; padding: 10px; color: #234b43; text-decoration: none; }.admin-file small,.admin-file strong { display: block; }
.admin-timeline { position: relative; display: grid; gap: 17px; margin: 0; padding: 0; list-style: none; }.admin-timeline::before { position: absolute; left: 7px; top: 7px; bottom: 7px; width: 2px; background: #dce7e4; content: ""; }.admin-timeline li { position: relative; display: grid; grid-template-columns: 16px 1fr; gap: 12px; }.admin-timeline li > span { z-index: 1; width: 16px; height: 16px; margin-top: 2px; border: 4px solid #e3f2ee; border-radius: 50%; background: #0d7664; }.admin-timeline small { display: block; margin-top: 3px; color: #748681; }.admin-timeline p { margin: 6px 0 0; }.admin-internal-note { border-left: 3px solid #e4a82f; padding-left: 8px; color: #7d5a16; }
.admin-technical { margin-top: 25px; border-radius: 10px; padding: 11px; background: #eff4f3; color: #536b66; }.admin-technical dl { display: grid; grid-template-columns: 150px 1fr; }.admin-technical dd { overflow-wrap: anywhere; }
.admin-service-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }.admin-service-grid article { display: grid; grid-template-columns: 42px 1fr; gap: 12px; border: 1px solid #e0e9e7; border-radius: 12px; padding: 13px; }.admin-service-grid article > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #e8f4f1; color: #0e6d5d; font-weight: 900; }.admin-service-grid h3 { margin: 0; font-size: 14px; }.admin-service-grid p { margin: 5px 0 9px; color: #70837f; font-size: 12px; }.admin-service-grid small { margin-left: 8px; color: #6d817c; }
.admin-history-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }.admin-history-list li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; border-bottom: 1px solid #e7eeec; padding: 13px 4px; }.admin-history-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #e9f4f1; color: #096d5b; font-size: 19px; }.admin-history-list p { margin: 5px 0; color: #536b66; }.admin-history-list small { color: #758783; }.admin-link-button { min-height: 30px; margin-left: 10px; border: 0; padding: 3px 7px; background: transparent; color: #087463; box-shadow: none; text-decoration: underline; }
.admin-receipt { position: relative; border: 1px solid #cadbd7; border-radius: 14px; padding: 22px; text-align: center; }.admin-receipt > div:first-child p { margin: 0 0 3px; font-size: 11px; }.admin-receipt > div:first-child strong,.admin-receipt > div:first-child small { display: block; }.admin-receipt h3 { margin: 24px 0; }.admin-receipt dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; text-align: left; }.admin-receipt dl > div { border-radius: 9px; padding: 9px; background: #f5f9f8; }.admin-receipt dt { color: #687e78; font-size: 10px; }.admin-receipt dd { margin: 4px 0 0; font-weight: 700; }.admin-qr svg { width: min(280px,100%); height: auto; }.admin-qr small { display: block; }.admin-receipt .actions { justify-content: center; margin-top: 18px; }
.admin-recon-item { border: 1px solid #dce7e4; border-radius: 13px; margin-bottom: 12px; padding: 14px; }.admin-recon-item > div:first-child strong,.admin-recon-item > div:first-child small { display: block; }.admin-recon-amount { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 12px 0; }.admin-recon-amount span { border-radius: 8px; padding: 8px; background: #f2f7f5; font-size: 11px; }.admin-recon-amount strong { display: block; margin-top: 3px; font-size: 14px; }
.admin-report-contract { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 17px; }.admin-report-contract span { border-radius: 99px; padding: 6px 9px; background: #e8f5f1; color: #176b5b; font-size: 11px; font-weight: 750; }
.admin-danger-card { border-color: #efd4d9; background: linear-gradient(180deg,#fff,#fffbfb); }.admin-page .danger { background: #a72c44; }.admin-page .danger:hover { background: #8e2036; }
.admin-count-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 8px; margin: 12px 0; }.admin-count-grid > div { border-radius: 9px; padding: 9px; background: #f2f7f5; }.admin-count-grid span,.admin-count-grid strong { display: block; }.admin-count-grid span { color: #657b76; font-size: 10px; text-transform: capitalize; }.admin-operation { border: 1px solid #d6e4e0; border-radius: 11px; margin-top: 13px; padding: 13px; background: #f8fbfa; }.admin-operation small { display: block; margin-top: 4px; overflow-wrap: anywhere; color: #667d78; }
.admin-safe-steps { display: grid; gap: 10px; counter-reset: safe; margin: 0; padding: 0; list-style: none; }.admin-safe-steps li { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 9px; }.admin-safe-steps li::before { counter-increment: safe; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #e6f3ef; color: #0d6f5e; font-weight: 900; content: counter(safe); }.admin-two-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.admin-two-list p { overflow-wrap: anywhere; }
.admin-user-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.admin-user-grid article { display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 10px; border: 1px solid #dfe9e6; border-radius: 12px; padding: 12px; }.admin-user-grid h3,.admin-user-grid p { margin: 0; }.admin-user-grid p { margin: 3px 0 7px; color: #6c817c; font-size: 12px; }.admin-user-grid .admin-badge { margin-right: 4px; }
.admin-check { display: flex; min-height: 44px; align-items: center; align-self: end; gap: 10px; border: 1px solid #cbdad6; border-radius: 10px; padding: 9px 11px; background: #fff; color: #193b35; }.admin-check input { width: 18px; height: 18px; accent-color: #126254; }
.admin-month-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(90px,.8fr); gap: 8px; }
.admin-definition { display: grid; grid-template-columns: 150px 1fr; gap: 10px; margin: 0; }.admin-definition dt { color: #6c807b; font-size: 11px; }.admin-definition dd { margin: 0; overflow-wrap: anywhere; font-weight: 650; }
.admin-drawer-overlay { position: fixed; z-index: 35; inset: 0; background: rgba(3,27,23,.55); }
.reconciliation-result { white-space: normal; }.reconciliation-result__details { display: grid; gap: 3px; margin: 12px 0; }.reconciliation-result__details p { margin: 0; }.reconciliation-result__qr svg { width: min(300px,100%); height: auto; background: #fff; }.reconciliation-result .actions { margin-top: 10px; }

/* B6A-R1: keep dense Admin forms visually separated and balanced. */
#organizationForm > .actions { margin-top: 20px; border-top: 1px solid #e7efed; padding-top: 18px; }
#organizationForm > .actions > * { min-height: 44px; }
#monthlyReconForm > .admin-filter-grid { margin-bottom: 18px; }
#monthlyReconForm > .admin-table-wrap { margin-bottom: 18px; }
#monthlyReconForm > .message { margin: 0 0 16px; }
#customReportForm > fieldset { margin: 20px 0; border: 1px solid #dce7e4; border-radius: 12px; padding: 16px; }
#customReportForm > .actions { margin: 18px 0 16px; }
#customReportForm + .admin-compact-list { margin-top: 14px; }
#siteForm, #classForm, #routingForm { border-top: 1px solid #e7efed; padding: 20px 0; }
#siteForm > *, #classForm > *, #routingForm > * { min-width: 0; }
#siteForm { grid-template-columns: repeat(3,minmax(180px,1fr)); margin-top: 4px; }
#classForm { grid-template-columns: repeat(6,minmax(0,1fr)); }
#routingForm { grid-template-columns: repeat(4,minmax(150px,1fr)); padding-bottom: 4px; }
#routingForm .admin-check { height: 44px; margin: 0; }
#siteForm > button, #classForm > button, #routingForm > button { width: 100%; min-width: 0; }
#noCodeForm > button[type="submit"] { grid-column: 1 / -1; width: fit-content; margin-top: 2px; }
#noCodeForm + .admin-table-wrap { margin-top: 20px; }

@media (max-width: 1220px) {
  .admin-filter-grid,.admin-filter-grid--tickets { grid-template-columns: repeat(3,minmax(140px,1fr)); }
  #siteForm, #classForm { grid-template-columns: repeat(3,minmax(140px,1fr)); }
  #routingForm { grid-template-columns: repeat(2,minmax(180px,1fr)); }
}
@media (max-width: 980px) {
  .admin-layout { grid-template-columns: 1fr; }.admin-main { grid-column: 1; }.admin-sidebar { transform: translateX(-102%); transition: transform .2s ease; }.admin-sidebar.open { transform: translateX(0); }#drawerButton { display: grid; }.admin-topbar { grid-template-columns: auto minmax(200px,1fr) auto; }.admin-account > div { display: none; }.admin-content { padding-inline: 20px; }
}
@media (max-width: 760px) {
  .admin-login-screen { grid-template-columns: 1fr; }.admin-login-brand { min-height: 230px; padding: 30px 24px; }.admin-login-emblem { width: 58px; height: 58px; margin-bottom: 18px; font-size: 21px; }.admin-login-screen > .admin-login-card { width: min(100% - 24px,470px); margin: -28px auto 28px; padding: 24px; }.admin-topbar { min-height: 64px; grid-template-columns: auto 1fr auto; gap: 8px; padding: 8px 12px; }.admin-global-search kbd { display: none; }.admin-account .admin-avatar { display: none; }.admin-account button { padding: 7px 9px; font-size: 12px; }.admin-content { padding: 20px 10px 45px; }.admin-page-head { align-items: flex-start; flex-direction: column; }.admin-page-head > .actions { width: 100%; }.admin-page-head > .actions button { width: 100%; }.admin-filter-grid,.admin-filter-grid--tickets,#siteForm,#classForm,#routingForm { grid-template-columns: 1fr; }.admin-filter-grid .field--wide { grid-column: auto; }.admin-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }.admin-dashboard-grid { grid-template-columns: 1fr; }.admin-card--wide { grid-column: auto; }.admin-card { padding: 14px; }.admin-card__head { align-items: stretch; flex-direction: column; }.admin-card__head > .actions { flex-direction: column; }.admin-service-grid,.admin-user-grid,.admin-file-grid { grid-template-columns: 1fr; }.admin-data-grid { grid-template-columns: 1fr; }.admin-detail-hero { grid-template-columns: 1fr; }.admin-detail-hero > div:last-child span,.admin-detail-hero > div:last-child strong { text-align: left; }.admin-receipt dl { grid-template-columns: 1fr; }.admin-recon-amount { grid-template-columns: 1fr; }.admin-two-list { grid-template-columns: 1fr; }.admin-user-grid article { grid-template-columns: 42px 1fr; }.admin-user-grid article > button { grid-column: 1 / -1; }.admin-dialog__body { padding: 15px; }.admin-definition { grid-template-columns: 1fr; gap: 2px; }.admin-definition dd { margin-bottom: 9px; }#noCodeForm > button[type="submit"] { grid-column: auto; width: 100%; }
}
@media (max-width: 430px) { .admin-kpis { grid-template-columns: 1fr; }.admin-global-search input::placeholder { color: transparent; }.admin-content { padding-inline: 8px; }.admin-card { border-radius: 13px; } }
@media print {
  body.admin-page * { visibility: hidden !important; }.admin-dialog[open],.admin-dialog[open] .admin-receipt,.admin-dialog[open] .admin-receipt * { visibility: visible !important; }.admin-dialog[open] { position: absolute; inset: 0; width: 100%; max-height: none; box-shadow: none; }.admin-dialog[open] .admin-receipt { position: absolute; inset: 0; border: 0; }.admin-receipt .actions { display: none !important; }
  .reconciliation-result,.reconciliation-result * { visibility: visible !important; }.reconciliation-result { position: absolute; inset: 0; }
}


/* THMH UI polish: Admin alignment, organization forms, bank modal and dashboard KPI. */
.admin-kpi--total {
  border-color: #8fcfc1;
  background: linear-gradient(145deg, #e7f7f2 0%, #ffffff 72%);
  box-shadow: 0 10px 28px rgba(8, 105, 87, .11);
}
.admin-kpi--total::after { background: #bfe8de; }
.admin-kpi--total span { color: #176c5d; }
.admin-kpi--total strong { color: #075a4b; }

#organizationForm > .admin-filter-grid,
#organizationRoleForm,
#organizationPersonForm {
  align-items: start;
}
#organizationForm > .admin-filter-grid > .field,
#organizationRoleForm > .field,
#organizationPersonForm > .field {
  align-content: start;
  min-width: 0;
}
#organizationForm > .admin-filter-grid > .field > label,
#organizationRoleForm > .field > label,
#organizationPersonForm > .field > label {
  min-height: 18px;
  display: flex;
  align-items: flex-end;
}
#organizationForm > .admin-filter-grid input,
#organizationForm > .admin-filter-grid select,
#organizationRoleForm input,
#organizationRoleForm select,
#organizationPersonForm input,
#organizationPersonForm select {
  min-height: 46px;
}
#organizationForm > .admin-filter-grid textarea,
#organizationPersonForm textarea {
  min-height: 108px;
}
#organizationRoleForm {
  margin-bottom: 24px;
  border-bottom: 1px solid #e3ece9;
  padding-bottom: 24px;
}
#organizationRoleForm > button[type="submit"] {
  grid-column: 1 / -1;
  width: fit-content;
  min-width: 210px;
  margin-top: 0;
}
#organizationPersonForm {
  margin-top: 0;
  padding-top: 2px;
}
#organizationPersonForm > .actions {
  grid-column: 1 / -1;
  margin-top: 4px;
  border-top: 1px solid #e7efed;
  padding-top: 18px;
}
#organizationPersonForm + .admin-table-wrap {
  margin-top: 20px;
}

#bankForm > .message {
  margin: 0 0 20px;
}
#bankForm > .admin-filter-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  column-gap: 18px;
  row-gap: 18px;
}
#bankForm > .admin-filter-grid > .field {
  min-width: 0;
  margin: 0;
}
#bankForm > .admin-filter-grid > .field:nth-child(5),
#bankForm > .admin-filter-grid > .field:nth-child(6) {
  grid-column: span 2;
}
#bankForm > button[type="submit"] {
  margin-top: 20px;
}

@media (max-width: 980px) {
  .admin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #bankForm > .admin-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #bankForm > .admin-filter-grid > .field:nth-child(5),
  #bankForm > .admin-filter-grid > .field:nth-child(6) { grid-column: span 1; }
}
@media (max-width: 760px) {
  #organizationRoleForm > button[type="submit"] { width: 100%; min-width: 0; }
  #bankForm > .admin-filter-grid { grid-template-columns: 1fr; }
  #bankForm > button[type="submit"] { width: 100%; }
}


/* UI9 — Admin nghiệp vụ tập trung */
.admin-page{--admin-brand:#0b5f91;--admin-accent:#1d9a7c;--admin-ink:#183349;background:#eef4f8;color:var(--admin-ink)}
.admin-sidebar{background:linear-gradient(180deg,#073f69 0%,#07517b 55%,#08665e 100%);box-shadow:16px 0 50px rgba(5,43,70,.18)}
.admin-brand{padding:22px 18px 18px;border-bottom:1px solid rgba(255,255,255,.13)}.admin-brand__mark,.admin-login-emblem{display:grid;place-items:center;background:rgba(255,255,255,.96);box-shadow:0 10px 28px rgba(0,0,0,.16)}.admin-brand__mark img,.admin-login-emblem img{display:block;max-width:78%;max-height:78%}
.admin-nav{gap:6px;padding:14px 10px}.admin-nav button{position:relative;grid-template-columns:30px 26px 1fr;gap:9px;padding:11px 12px;border-radius:13px;color:rgba(255,255,255,.82);text-align:left}.admin-nav button:hover{background:rgba(255,255,255,.1);color:#fff}.admin-nav button.active{background:#fff;color:#0a527c;box-shadow:0 12px 26px rgba(0,0,0,.16)}.admin-nav-index{font-size:.68rem;font-weight:800;letter-spacing:.08em;opacity:.58}.admin-nav button.active .admin-nav-index{color:#159071;opacity:1}
.admin-main{background:radial-gradient(circle at 90% 0,rgba(34,159,126,.1),transparent 24%),#eef4f8}.admin-topbar{background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid #dae7ee}.admin-content{max-width:1660px}.admin-page-head{padding:8px 0 2px}.admin-page-head h1{color:#0a4c77;letter-spacing:-.02em}.admin-breadcrumb{color:#16866f;font-weight:800}
.admin-card{border:1px solid #dce8ee;border-radius:20px;box-shadow:0 12px 32px rgba(25,69,96,.08)}.admin-kpi{border-radius:19px}.admin-table-wrap{border:1px solid #e0e9ee;border-radius:16px}.admin-table th{background:#f1f7fa;color:#31586f}.admin-table tbody tr:hover{background:#f1faf7}
.admin-workspace-tabs{display:flex;gap:8px;overflow-x:auto;padding:7px;margin:0 0 18px;border:1px solid #d9e8ee;border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(22,70,98,.06)}.admin-workspace-tabs button{flex:0 0 auto;padding:10px 15px;border:0;border-radius:11px;background:transparent;color:#486879;font-weight:800}.admin-workspace-tabs button.active{background:linear-gradient(135deg,#0c6194,#178977);color:#fff;box-shadow:0 7px 16px rgba(11,97,148,.2)}
.direct-service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:15px;margin:18px 0}.direct-service-card{display:flex;flex-direction:column;align-items:flex-start;min-height:170px;padding:20px;border:1px solid #dce8ee;border-radius:18px;background:linear-gradient(145deg,#fff,#f5fbfd);color:#22475e;text-align:left;box-shadow:0 9px 24px rgba(24,72,100,.07)}.direct-service-card:hover{transform:translateY(-2px);border-color:#70b7c5;box-shadow:0 16px 32px rgba(24,72,100,.12)}.direct-service-card span{font-size:1.06rem;font-weight:850;color:#0a5886}.direct-service-card small{margin:9px 0 18px;line-height:1.55;color:#617889}.direct-service-card b{margin-top:auto;color:#16856e}.admin-audit-preview{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;padding:14px;border-radius:14px;background:#eff9f5;color:#356b5c}.admin-audit-preview strong{width:100%;color:#146d58}.admin-audit-preview span{padding:6px 9px;border-radius:999px;background:#fff;border:1px solid #d5ebe3;font-size:.82rem}.admin-no-file{color:#778994;font-size:.88rem}.button--compact{padding:7px 10px;font-size:.83rem}
.survey-admin-preview{display:flex;flex-direction:column;align-items:center;text-align:center;background:linear-gradient(160deg,#f1faff,#f1fbf6)}.survey-admin-preview img{width:min(100%,360px);height:auto}.survey-admin-preview h3{color:#0b5b8d}.survey-admin-preview .button{pointer-events:none}
.admin-notification-button{position:relative;display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;background:#eef7fa;color:#0c5d86}.admin-notification-button i{position:absolute;top:-4px;right:-4px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#df3e56;color:#fff;font-size:.7rem;font-style:normal}.admin-sidebar__footer{background:rgba(0,0,0,.08)}
@media(max-width:800px){.admin-nav button{grid-template-columns:28px 24px 1fr}.admin-workspace-tabs{margin-inline:-4px}.direct-service-grid{grid-template-columns:1fr}.admin-global-search{min-width:0}.admin-account>div{display:none}}

/* UI9 — Biểu mẫu nhập trực tiếp và phân quyền từng tài khoản */
.direct-form-section{margin:0 0 18px;border:1px solid #dce8ee;border-radius:17px;padding:18px;background:#fbfdfe}.direct-form-section>h3{margin:0 0 15px;color:#0a5b89;font-size:1rem}.direct-form-section--source{background:linear-gradient(145deg,#eff8fc,#f2fbf7)}.direct-form-section [hidden]{display:none!important}.direct-fieldset{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border:1px solid #d6e4e9;border-radius:13px;padding:13px}.direct-fieldset legend{padding:0 7px;color:#315c70;font-size:.82rem;font-weight:800}.admin-filter-grid label span[aria-hidden="true"],.direct-form-section label span[aria-hidden="true"]{color:#c62f4b}.admin-account-picker{max-width:760px;margin-bottom:18px}.admin-account-picker select{width:100%;min-height:48px;border:1px solid #cbdce4;border-radius:13px;padding:10px 12px;background:#fff}.permission-account-summary{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:13px;margin-bottom:18px;border-radius:15px;padding:14px;background:linear-gradient(135deg,#edf7fb,#f2faf6)}.permission-account-summary h3,.permission-account-summary p{margin:0}.permission-account-summary p{margin-top:4px;color:#607987}.admin-service-permission-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:360px;overflow:auto;margin-top:12px;border:1px solid #dfebef;border-radius:14px;padding:12px;background:#fafcfd}.admin-permission-grid{margin-top:20px;border-top:1px solid #dfebef;padding-top:20px}.admin-permission-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.admin-permission-head h3,.admin-permission-head p{margin:0}.admin-permission-head p{margin-top:5px;color:#657e8b}.admin-permission-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0 0 12px;border:1px solid #dfe9ed;border-radius:14px;padding:13px;background:#fbfdfe}.admin-permission-group legend{padding:0 8px;color:#0a5b88;font-size:.86rem;font-weight:850}.admin-user-grid article>div>small{display:block;margin-top:9px;color:#718793}.admin-user-grid article>button{align-self:center}.admin-user-scope>fieldset{margin-bottom:17px}.admin-user-scope>button[type="submit"]{margin-top:5px}
@media(max-width:760px){.direct-fieldset,.admin-service-permission-list,.admin-permission-group{grid-template-columns:1fr}.permission-account-summary{grid-template-columns:45px minmax(0,1fr)}.permission-account-summary>.admin-badge{grid-column:1/-1;width:max-content}.admin-permission-head{flex-direction:column}}

.admin-table-note{display:block;margin-top:.3rem;color:var(--admin-muted,#64748b);font-size:.75rem;font-weight:500;line-height:1.35}


/* UI9-R1: Trung tâm thông báo nội bộ */
.admin-notification-list{display:grid;gap:12px}.admin-notification-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px;border:1px solid #d8e5e1;border-radius:18px;background:#fff}.admin-notification-item h3{margin:8px 0 6px}.admin-notification-item p{margin:0 0 8px;color:#526b67}.admin-notification-item small{color:#72847f}@media(max-width:760px){.admin-notification-item{grid-template-columns:1fr}.admin-notification-item>.actions{justify-content:flex-start}}


/* MY HOI ADMIN UNIFIED UI — 2026-07-21 */
.admin-nav-group{margin:16px 12px 5px;color:rgba(255,255,255,.56);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.admin-tab-guide{margin-top:18px;border:1px solid #c9ddd8;border-radius:16px;background:#f7fbfa;box-shadow:0 8px 22px rgba(7,70,58,.05)}
.admin-tab-guide summary{cursor:pointer;padding:16px 18px;color:#074c41;font-weight:800;list-style:none}
.admin-tab-guide summary::-webkit-details-marker{display:none}
.admin-tab-guide summary::after{content:'＋';float:right}
.admin-tab-guide[open] summary::after{content:'−'}
.admin-tab-guide>div{border-top:1px solid #d9e8e4;padding:14px 22px 18px;color:#355d57;line-height:1.65}
.admin-tab-guide ol{margin:0;padding-left:22px}.admin-tab-guide p{margin:10px 0 0;font-size:13px;color:#607d78}
.admin-account{gap:8px}.admin-account>button{white-space:nowrap}
.admin-multi-select{border:1px solid #c8d9d5;border-radius:14px;padding:12px;background:#fbfefd}
.admin-check-list--compact{max-height:280px;overflow:auto;margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.admin-check-list--compact .admin-check{min-height:42px;margin:0}
.admin-logo-uploader{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px dashed #abcfc6;border-radius:16px;padding:14px;background:#f8fcfb}
.admin-logo-uploader>div{width:92px;height:92px;border-radius:14px;background:white;border:1px solid #d4e5e1;display:grid;place-items:center;overflow:hidden;color:#78938d}
.admin-logo-uploader img{max-width:100%;max-height:100%;object-fit:contain}
.admin-person-thumb{width:46px;height:58px;border-radius:9px;object-fit:cover;border:1px solid #cadbd7}
.field label span,.admin-filter-grid label span{color:#d92d46;font-weight:900}
.admin-card input[readonly]{background:#edf4f2;color:#607d78}
@media(max-width:900px){.admin-check-list--compact{grid-template-columns:1fr}.admin-account #changePasswordButton{display:none}}


/* Unified Admin UI final pass */
.admin-service-picker{border:1px solid var(--admin-line,#cadbd6);border-radius:14px;padding:12px;background:#fff}
.admin-service-picker__toolbar{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:8px;align-items:center}
.admin-service-picker__chips{display:flex;gap:7px;flex-wrap:wrap;padding:10px 0;min-height:34px;color:#61756e}
.admin-selection-chip{border:1px solid #b9d5cc;background:#edf8f4;color:#075c4b;border-radius:999px;padding:6px 10px;font-size:.85rem}
.admin-service-picker__list{max-height:260px;overflow:auto;border-top:1px solid #e1ebe7;padding-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.admin-service-picker__list .admin-check{margin:0;min-height:44px}
.admin-advanced-settings{margin-top:18px;border:1px dashed #a9c5bc;border-radius:14px;padding:12px}
.admin-advanced-settings>summary{cursor:pointer;font-weight:800;color:#075c4b}
.admin-logo-uploader{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.admin-logo-uploader>div{width:110px;height:110px;border:1px dashed #a9c5bc;border-radius:16px;display:grid;place-items:center;background:#f7fbfa;overflow:hidden}
.admin-logo-uploader img{width:100%;height:100%;object-fit:contain}
@media(max-width:760px){.admin-service-picker__toolbar{grid-template-columns:1fr}.admin-service-picker__list{grid-template-columns:1fr}}

/* Admin UI unified test — 2026-07-21 */
:root { --admin-font: "Segoe UI", "Noto Sans", Arial, sans-serif; }
body.admin-page, body.admin-page button, body.admin-page input, body.admin-page select, body.admin-page textarea { font-family: var(--admin-font); }
.admin-subsection { margin: 16px 0; border: 1px solid #d7e4e1; border-radius: 16px; background: #fbfdfc; overflow: clip; }
.admin-subsection > summary { cursor: pointer; padding: 14px 16px; font-weight: 800; color: #0a5146; background: #eef6f3; }
.admin-subsection > form, .admin-subsection > div, .admin-subsection > p { margin: 0; padding: 16px; }
.admin-role-catalog { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-role-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #cfe0dc; border-radius: 999px; background: #fff; font-weight: 700; }
.admin-role-chip button { min-width: 24px; width: 24px; height: 24px; padding: 0; border-radius: 50%; }
.admin-transfer-preview { margin: 18px 0; padding: 16px; border-radius: 14px; border: 1px solid #b8d9d1; background: #eff9f6; display: grid; gap: 5px; }
.admin-transfer-preview span { color: #39736a; font-size: 13px; font-weight: 700; }
.admin-transfer-preview strong { font-size: 18px; letter-spacing: .02em; color: #073e36; }
.admin-transfer-preview small, .field-help { color: #667c78; }
.organization-duties, .organization-qualification { display: block; margin-top: 5px; color: #516d68; }
.organization-email { display: block; margin-top: 5px; }
@media (max-width: 760px) {
  .admin-role-chip { max-width: 100%; }
}

/* TOP 4 — Admin sidebar polish, 2026-07-21.
   Desktop: wider navigation, one-line labels, restrained monochrome icons,
   slim scrollbar and no accidental text selection. */
@media (min-width: 981px) {
  .admin-layout {
    grid-template-columns: 340px minmax(0, 1fr);
  }

  .admin-sidebar {
    width: 340px;
    padding-inline: 14px;
  }

  .admin-brand {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 13px;
    padding-inline: 12px;
  }

  .admin-brand > div {
    min-width: 0;
  }

  .admin-brand small {
    font-size: 10px;
  }

  .admin-brand strong {
    font-size: 14px;
    line-height: 1.3;
  }

  .admin-nav {
    gap: 5px;
    padding: 12px 5px 14px 8px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.42) transparent;
    overscroll-behavior: contain;
  }

  .admin-nav::-webkit-scrollbar {
    width: 6px;
  }

  .admin-nav::-webkit-scrollbar-track {
    background: transparent;
  }

  .admin-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255,255,255,.40);
  }

  .admin-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.58);
  }

  .admin-nav button {
    width: 100%;
    min-height: 48px;
    grid-template-columns: 34px 22px minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    color: rgba(255,255,255,.88);
    user-select: none;
    -webkit-user-select: none;
  }

  .admin-nav button > span {
    min-width: 0;
  }

  .admin-nav button > span:first-child,
  .admin-nav .admin-nav-index {
    color: rgba(255,255,255,.62);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .035em;
  }

  .admin-nav button > span:nth-child(2) {
    color: rgba(255,255,255,.68);
    font-size: 15px;
    line-height: 1;
    text-align: center;
  }

  .admin-nav button > span:last-child {
    overflow: hidden;
    color: inherit;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-nav button:hover > span:first-child,
  .admin-nav button:hover > span:nth-child(2) {
    color: #fff;
  }

  .admin-nav button.active {
    color: #0a527c;
  }

  .admin-nav button.active > span:first-child,
  .admin-nav button.active .admin-nav-index,
  .admin-nav button.active > span:nth-child(2) {
    color: #14866f;
  }

  .admin-nav button::selection,
  .admin-nav button *::selection,
  .admin-nav-group::selection {
    color: inherit;
    background: transparent;
  }

  .admin-nav-group {
    margin: 15px 10px 5px;
    color: rgba(255,255,255,.54);
    font-size: 9px;
    letter-spacing: .13em;
    user-select: none;
    -webkit-user-select: none;
  }

  .admin-sidebar__footer {
    margin-top: 12px;
  }
}

/* Keep the drawer compact on tablet/mobile while preserving readable labels. */
@media (max-width: 980px) {
  .admin-sidebar {
    width: min(340px, 88vw);
  }

  .admin-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.42) transparent;
  }

  .admin-nav button {
    grid-template-columns: 32px 22px minmax(0, 1fr);
    user-select: none;
    -webkit-user-select: none;
  }

  .admin-nav button > span:last-child {
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* TOP4-2 final workflow polish — 2026-07-21 */
.admin-table .button--compact,.admin-table button.secondary,[data-history-open],.admin-ticket-open-action{border-color:#1473e6!important;background:#eaf3ff!important;color:#0759c7!important;font-weight:800!important;opacity:1!important;box-shadow:0 0 0 2px rgba(20,115,230,.08)}
.admin-table .button--compact:hover,.admin-table button.secondary:hover{background:#1266d4!important;color:#fff!important}
.admin-news-editor{display:grid;gap:18px}.admin-news-meta-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-check--card{min-height:44px}.admin-news-media-panel,.admin-news-compose{border:1px solid #d7e5ea;border-radius:15px;padding:15px;background:#fbfdfe}.admin-news-media-panel h3{margin:0 0 13px}.admin-editor-toolbar{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}.admin-editor-toolbar button{min-height:36px;border:1px solid #ccdce2;border-radius:8px;padding:6px 10px;background:#fff;color:#16465d}.admin-rich-editor{min-height:300px;overflow:auto;border:1px solid #bed4dc;border-radius:12px;padding:16px;background:#fff;line-height:1.65}.admin-rich-editor:focus{outline:3px solid rgba(25,135,230,.18);border-color:#2387e6}.admin-news-actions{justify-content:flex-end;border-top:1px solid #dce8ed;padding-top:15px}.admin-news-actions #newsCancel{margin-left:auto}
.school-form-simple-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-service-selector{border:1px solid #cbdad6;border-radius:12px;background:#fff}.admin-service-selector summary{cursor:pointer;padding:12px 14px;font-weight:800}.admin-service-selector__body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:340px;overflow:auto;border-top:1px solid #e0eaed;padding:12px}.admin-service-selector__body .admin-check{margin:0}
.admin-supplement-card{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin:10px 0;border:1px solid #d8e7eb;border-radius:12px;padding:12px 14px;background:#fbfdfe}.admin-supplement-card small{display:block;margin-top:5px;color:#687f89}.admin-history-file{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:9px;border:1px solid #cfe0e8;border-radius:10px;padding:8px 10px;background:#f1f8fb}.admin-history-file strong{margin-right:auto}.admin-file-grid .admin-empty{grid-column:1/-1}.admin-workflow-form input[type=file]{padding:8px;background:#fff}.admin-workflow-form .actions{align-items:center;justify-content:flex-end}.admin-workflow-form #requestSupplementAction{margin-right:auto;border-color:#d38b00;background:#fff7df;color:#855200;font-weight:800}
.admin-personnel-form .admin-filter-grid,.personnel-profile-form .admin-filter-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}.admin-personnel-form .admin-check,.personnel-profile-form .admin-check{align-self:stretch;min-height:58px}.admin-personnel-form [name="displayOrder"],.personnel-profile-form [name="displayOrder"]{height:44px}
#reauthDialog::backdrop{background:rgba(5,30,35,.68)}#reauthDialog .actions{justify-content:flex-start}
@media(max-width:900px){.admin-news-meta-grid,.school-form-simple-grid,.admin-personnel-form .admin-filter-grid,.personnel-profile-form .admin-filter-grid{grid-template-columns:1fr 1fr}.admin-service-selector__body{grid-template-columns:1fr}}
@media(max-width:620px){.admin-news-meta-grid,.school-form-simple-grid,.admin-personnel-form .admin-filter-grid,.personnel-profile-form .admin-filter-grid{grid-template-columns:1fr}.admin-news-actions{display:grid;grid-template-columns:1fr 1fr}.admin-news-actions #newsCancel{margin-left:0}.admin-supplement-card{flex-direction:column}.admin-workflow-form .actions{align-items:stretch;flex-direction:column}.admin-workflow-form #requestSupplementAction{margin-right:0}}

/* TOP4-2 — file result PDF optimization feedback */
.admin-file-optimization{margin-top:.45rem;min-height:1.25rem;color:#0b6f60;font-size:.84rem;font-weight:700}


/* TOP4-4 UAT1 admin workflow polish */
.admin-workspace-tabs{position:sticky;top:0;z-index:18;background:rgba(255,255,255,.97);backdrop-filter:blur(10px)}
.admin-club-config{margin-top:24px;padding-top:20px;border-top:1px solid #d7e4ee}
.admin-club-list{display:grid;gap:10px}
.admin-club-row{display:grid;grid-template-columns:minmax(220px,1fr) 90px auto auto;gap:10px;align-items:center;padding:10px;border:1px solid #d5e1e9;border-radius:12px;background:#fff}
.admin-calendar-weekdays,.admin-month-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.admin-calendar-weekdays{margin-bottom:8px;text-align:center;font-weight:800;color:#315273}
.admin-calendar-day{min-height:112px;padding:8px;border:1px solid #cbdce7;border-radius:12px;background:#fff;text-align:left;display:flex;flex-direction:column;gap:5px;overflow:hidden}
.admin-calendar-day--empty{visibility:hidden}
.admin-calendar-date{display:block;width:100%;min-height:24px;border:0;padding:0;background:transparent;color:inherit;text-align:left}.admin-calendar-date:disabled{opacity:1;cursor:default}.admin-calendar-event{display:grid;width:100%;gap:1px;border:0;padding:4px 6px;border-radius:7px;background:#e7f2ff;color:#073b75;font-size:.78rem;text-align:left;overflow:hidden}.admin-calendar-event span,.admin-calendar-event small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-calendar-event small{font-size:.68rem;opacity:.82}.admin-calendar-more{color:#526d7f;font-weight:800}
.admin-calendar-event--approved,.admin-calendar-event--completed{background:#ddf7ec;color:#075e48}.admin-calendar-event--pending_approval{background:#fff2cf;color:#7a5200}.admin-calendar-event--needs_supplement{background:#ffe0e4;color:#91223a}
@media(max-width:760px){.admin-club-row{grid-template-columns:1fr 76px}.admin-club-row .admin-check,.admin-club-row button{width:100%}.admin-month-calendar{overflow-x:auto;grid-template-columns:repeat(7,120px)}.admin-calendar-weekdays{grid-template-columns:repeat(7,120px);overflow:hidden}}
.admin-conflict-warning{display:block;margin-top:.35rem;color:#a33b00;font-weight:700;line-height:1.35}


/* TOP4-4 UAT2: immediate chart values and detailed, compact in-page guidance. */
.chart-floating-tooltip {
  position: fixed;
  z-index: 99999;
  max-width: min(300px,calc(100vw - 24px));
  transform: translate(-50%,-100%);
  pointer-events: none;
  opacity: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 9px;
  padding: 7px 10px;
  background: rgba(9,47,41,.96);
  color: #fff;
  box-shadow: 0 8px 24px rgba(4,32,27,.24);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  white-space: normal;
  transition: opacity .08s ease;
}
.chart-floating-tooltip.visible { opacity: 1; }
.admin-chart-point { cursor: help; outline: none; transition: r .12s ease, fill .12s ease; }
.admin-chart-point:hover,.admin-chart-point:focus { r: 7; fill: #dff5ef; }
.admin-bar-row { position: relative; border-radius: 8px; padding: 3px 4px; outline: none; cursor: help; }
.admin-bar-row:hover,.admin-bar-row:focus { background: #f1f8f6; }
.admin-bar-row:hover b,.admin-bar-row:focus b { filter: brightness(1.08); }
.admin-tab-guide > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.admin-tab-guide > summary span { font-weight: 850; }
.admin-tab-guide > summary small { color: #6d817c; font-size: 11px; font-weight: 650; }
.admin-guide-body { display: grid; gap: 14px; padding-top: 4px; }
.admin-guide-intro { margin: 0; border-left: 3px solid #1b927e; padding: 8px 11px; background: #edf8f5; color: #496660; font-size: 12px; }
.admin-guide-body section { border: 1px solid #dce9e5; border-radius: 12px; padding: 13px 15px; background: #fff; }
.admin-guide-body h3 { margin: 0 0 8px; color: #154e44; font-size: 14px; }
.admin-guide-body ol { margin: 0; padding-left: 22px; }
.admin-guide-body li { margin: 6px 0; color: #355b54; line-height: 1.55; }
@media (max-width:720px){.admin-tab-guide > summary{align-items:flex-start;flex-direction:column}.admin-tab-guide > summary small{display:block}.admin-guide-body section{padding:12px}}

/* TOP5: trạng thái tiếp nhận, lịch tháng, hàng đợi và CLB. */
.admin-intake-state{display:flex;align-items:center;gap:7px;border:1px solid #b9ddd5;border-radius:999px;padding:5px 8px 5px 11px;background:#effaf7;color:#146858;white-space:nowrap}.admin-intake-state span{font-size:11px}.admin-intake-state strong{font-size:12px}.admin-intake-state.is-locked{border-color:#efb8b8;background:#fff1f1;color:#a32929}.admin-intake-state button{min-height:30px;padding:5px 9px;font-size:11px}
.admin-pending-strip{display:flex;align-items:center;gap:10px;border-left:5px solid #d65f42;border-radius:12px;padding:12px 16px;background:#fff4ef;color:#743423;box-shadow:0 8px 20px rgba(70,38,25,.06)}.admin-pending-strip strong{font-size:24px;color:#b94025}.admin-pending-strip span{font-weight:750}
.admin-month-toolbar{position:relative;display:flex;align-items:center;gap:7px;flex-wrap:wrap}.admin-month-toolbar>button{min-width:40px}.admin-month-toolbar #workMonthTitle{min-width:140px}.admin-month-popup{position:absolute;right:0;top:calc(100% + 8px);z-index:20;display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(330px,calc(100vw - 40px));border:1px solid #cfe1dc;border-radius:13px;padding:13px;background:#fff;box-shadow:0 18px 42px rgba(10,54,47,.18)}.admin-month-popup[hidden]{display:none}.admin-month-popup label{display:grid;gap:5px;font-size:12px;font-weight:800}.admin-month-popup button{grid-column:1/-1}.admin-calendar-day--outside{background:#f5f7f7;color:#8b9a97}.admin-calendar-day--outside .admin-calendar-event{opacity:.68}
.admin-club-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:18px}.admin-club-month{display:grid;gap:12px;border:1px solid #d8e7e3;border-radius:15px;padding:16px;background:#fbfefd}.admin-club-month .message{margin:0}
.admin-pointer-star{position:fixed;z-index:99999;pointer-events:none;color:#22a98d;font-size:13px;line-height:1;transform:translate(-50%,-50%);animation:admin-pointer-star .65s ease-out forwards}@keyframes admin-pointer-star{to{opacity:0;transform:translate(-50%,-140%) scale(.25) rotate(80deg)}}
@media (max-width:1100px){.admin-intake-state span{display:none}.admin-intake-state{padding-left:8px}.admin-account>div{display:none}}
@media (max-width:760px){.admin-club-grid{grid-template-columns:1fr}.admin-intake-state{order:3;width:100%;justify-content:center}.admin-topbar{flex-wrap:wrap}.admin-month-toolbar{justify-content:flex-start}.admin-month-popup{left:0;right:auto}}

/* TOP5 R4: năm học tự động, lịch Tuần/Tháng, pending action và bộ chọn lịch sử. */
.admin-topbar{grid-template-columns:auto minmax(220px,1fr) auto auto auto auto}
.admin-school-year{display:inline-flex;align-items:center;min-height:34px;border:1px solid #bedbd5;border-radius:999px;padding:7px 12px;background:#eef9f6;color:#0c6657;font-size:12px;font-weight:850;white-space:nowrap}
.admin-calendar-controls{display:grid;justify-items:end;gap:9px}.admin-calendar-view-toggle{display:inline-flex;gap:5px;border:1px solid #d3e2e8;border-radius:12px;padding:4px;background:#f5fafb}.admin-calendar-view-toggle button{min-width:76px}.admin-calendar-view-toggle button.active{border-color:#0f806b;background:#0f806b;color:#fff}.admin-week-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.admin-calendar-day--week{min-height:220px}.admin-calendar-day--week>small{color:#708296;font-weight:600}
.admin-pending-strip--action{width:100%;border-top:0;border-right:0;border-bottom:0;text-align:left;cursor:pointer}.admin-pending-strip--action i{margin-left:auto;color:#9a402b;font-size:12px;font-style:normal;font-weight:850}.admin-pending-strip--action:hover,.admin-pending-strip--action:focus-visible{outline:3px solid rgba(214,95,66,.2);transform:translateY(-1px)}
.admin-service-filter-field{position:relative;margin-bottom:16px}.admin-service-filter-field>label{display:block;margin-bottom:7px;color:#23475c;font-size:13px;font-weight:800}.admin-service-filter-combobox{position:relative;max-width:620px}.admin-service-filter-trigger{display:flex;width:100%;min-height:58px;align-items:center;gap:12px;border:1px solid #bcd7d1;border-radius:14px;padding:9px 12px;background:#fff;color:#174d45;text-align:left}.admin-service-filter-trigger>span{display:grid;min-width:0;gap:3px}.admin-service-filter-trigger strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-service-filter-trigger small,.admin-service-filter-list small{display:block;color:#687d78;font-size:12px;font-weight:650}.admin-service-filter-trigger>b{margin-left:auto;font-size:18px}.admin-service-filter-badge{margin-left:auto;min-width:26px;border-radius:999px;padding:4px 8px;background:#c83434;color:#fff;font-size:12px;font-style:normal;font-weight:850;text-align:center;white-space:nowrap}.admin-service-filter-popup{position:absolute;z-index:35;top:calc(100% + 7px);left:0;width:min(620px,calc(100vw - 34px));border:1px solid #cbdfe4;border-radius:15px;padding:10px;background:#fff;box-shadow:0 20px 50px rgba(17,62,85,.2)}.admin-service-filter-popup[hidden]{display:none}.admin-service-filter-popup>label{display:block;margin:0 0 6px;color:#345b68;font-size:12px;font-weight:800}.admin-service-filter-popup>input{width:100%;margin-bottom:8px}.admin-service-filter-list{max-height:340px;overflow:auto}.admin-service-filter-list [role="option"]{display:flex;width:100%;min-height:54px;align-items:center;gap:12px;border:0;border-radius:10px;padding:9px 10px;background:transparent;color:#23475c;text-align:left}.admin-service-filter-list [role="option"]>span{display:grid;min-width:0;gap:2px}.admin-service-filter-list [role="option"] strong{white-space:normal}.admin-service-filter-list [role="option"]:hover,.admin-service-filter-list [role="option"]:focus-visible,.admin-service-filter-list [role="option"][aria-selected="true"]{background:#edf7f5;outline:none}.admin-service-filter-list [role="option"][hidden]{display:none}
@media(max-width:1100px){.admin-topbar{grid-template-columns:auto minmax(180px,1fr) auto auto}.admin-school-year{display:none}}
@media(max-width:760px){.admin-week-calendar{overflow-x:auto;grid-template-columns:repeat(7,120px)}.admin-calendar-controls{justify-items:stretch}.admin-calendar-view-toggle{width:100%}.admin-calendar-view-toggle button{flex:1}.admin-calendar-day--week{min-height:180px}.admin-pending-strip--action i{display:none}}
@media (prefers-reduced-motion:reduce){.admin-pointer-star{display:none!important}}

/* TOP5 R5: căn trái nội dung bộ lọc dịch vụ, giữ badge tách biệt. */
.admin-service-filter-trigger>span,.admin-service-filter-list [role="option"]>span{min-width:0;flex:1;justify-items:start;text-align:left}
.admin-service-filter-trigger strong,.admin-service-filter-trigger small,.admin-service-filter-list [role="option"] strong,.admin-service-filter-list [role="option"] small{max-width:100%;text-align:left}
.admin-service-filter-trigger>b,.admin-service-filter-badge,.admin-service-filter-list [role="option"] .admin-service-filter-badge{flex:0 0 auto}
.admin-service-filter-list{height:min(324px,calc(100vh - 220px));max-height:324px;overscroll-behavior:contain}
@media(max-width:620px){.admin-service-filter-popup{width:calc(100vw - 28px);max-height:calc(100vh - 120px)}.admin-service-filter-list{height:min(324px,calc(100vh - 225px));max-height:calc(100vh - 225px)}}

.supplement-page{min-height:100vh;background:linear-gradient(145deg,#eef8f6 0%,#f8fbfd 48%,#eef4fa 100%)}
.supplement-shell{padding:28px 0}.supplement-card{overflow:hidden;border-color:#c9dfda;background:rgba(255,255,255,.97);box-shadow:0 22px 52px rgba(8,50,61,.11)}.supplement-card::before{display:block;height:6px;margin:-24px -24px 24px;background:linear-gradient(90deg,#11a58a,#0a416f);content:""}.supplement-card .next-head{align-items:flex-start;padding-bottom:20px;border-bottom:1px solid #e0ece9}.supplement-card h1{color:#08235a}.supplement-card form{display:grid;gap:18px;margin-top:22px}.supplement-card form>.field{border:1px solid #d7e7e3;border-radius:16px;padding:18px;background:#f9fcfb}.supplement-card .public-upload-actions{display:flex;gap:10px;margin:12px 0}.supplement-card .public-upload-icon{display:grid;width:52px;height:52px;place-items:center;border:1px solid #b8d8d1;border-radius:14px;background:#fff;color:#0b7766;font-size:22px}.supplement-card #supplementSubmit{min-height:48px}
@media(max-width:640px){.supplement-shell{padding:10px 0}.supplement-card::before{margin:-14px -14px 18px}.supplement-card .next-head{gap:14px;flex-direction:column}.supplement-card .next-head .button{width:100%;justify-content:center}}
.admin-gmail-timeline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;margin-top:10px;border-left:3px solid #14b8a6;border-radius:0 10px 10px 0;padding:9px 11px;background:#eefaf7}.admin-gmail-timeline strong{color:#0b6658}.admin-gmail-timeline span{color:#173e5b;font-size:12px;font-weight:850}.admin-gmail-timeline small{grid-column:1/-1;color:#607874}

/* TOP5 R4 Gate G: contain mobile case tabs and topbar without hiding actions. */
.admin-case-workspace>[data-case-workspace-tabs],.admin-case-tabs{width:100%;max-width:100%;min-width:0}
.admin-case-workspace>[data-case-workspace-tabs]{overflow-x:hidden}
.admin-case-tabs{overflow-x:auto;overscroll-behavior-x:contain}
@media(max-width:800px){.admin-case-tabs{margin-inline:0}}
@media(max-width:760px){
  .admin-topbar{width:100%;max-width:100%;min-width:0;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center}
  .admin-topbar>*{min-width:0;max-width:100%}
  #drawerButton{grid-column:1;grid-row:1}
  .admin-global-search{grid-column:2;grid-row:1;width:100%;max-width:100%}
  .admin-notification-button{grid-column:3;grid-row:1;justify-self:end}
  .admin-intake-state{grid-column:1/3;grid-row:2;order:initial;width:100%;max-width:100%;min-width:0;justify-content:flex-start}
  .admin-intake-state strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .admin-intake-state button{flex:0 0 auto}
  .admin-account{grid-column:3;grid-row:2;min-width:0;max-width:100%;justify-self:end}
  .admin-account>button{min-width:0;max-width:100%;white-space:normal}
}

/* TOP5_001 UI refinement — service selectors */
.admin-case-content{overflow:visible;contain:layout;}
.admin-case-view,.admin-filter-card{overflow:visible;}
.admin-service-filter-combobox{max-width:720px;}
.admin-service-filter-popup{z-index:120;width:min(720px,calc(100vw - 34px));overflow:visible;}
.admin-service-filter-list{
  height:min(380px,calc(100vh - 230px));
  max-height:380px;
  min-height:300px;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.admin-service-filter-list [role="option"]{min-height:58px;}
.admin-service-selector__empty{grid-column:1/-1;margin:0;padding:18px;border:1px dashed #c9ddd7;border-radius:12px;background:#f7fbfa;color:#5d746e;text-align:center;}
@media(max-width:620px){
  .admin-service-filter-popup{width:calc(100vw - 28px);}
  .admin-service-filter-list{height:min(340px,calc(100vh - 220px));min-height:280px;max-height:calc(100vh - 220px);}
}