/* ===========================================================
   ครูพัสดุ | KRU PASADU — Blue × Orange Brand Theme v1.0
   Owner: school SaaS platform
   Applied AFTER /style.css; does not restyle official A4 documents.
   =========================================================== */

:root {
  color-scheme: light;
  --primary: #0969E8;
  --primary-dark: #0849A7;
  --primary-hover: #0756C3;
  --primary-light: #EAF3FF;
  --accent: #FF8914;
  --accent-dark: #E56500;
  --accent-light: #FFF2E3;
  --brand-blue: #0969E8;
  --brand-blue-dark: #0849A7;
  --brand-blue-soft: #EAF3FF;
  --brand-orange: #FF8914;
  --brand-orange-deep: #E56500;
  --brand-orange-soft: #FFF2E3;
  --brand-navy: #14345E;
  --bg: #F6F9FF;
  --surface: #FFFFFF;
  --border: #E2EAF6;
  --text-main: #173558;
  --text-secondary: #627790;
  --success: #11866A;
  --warning: #C96B08;
  --danger: #C94444;
  --shadow-sm: 0 5px 17px rgba(15, 67, 155, .06);
  --shadow-md: 0 14px 35px rgba(17, 66, 151, .10);
  --radius-sm: 11px;
  --radius-md: 17px;
  --radius-lg: 23px;
  /* Backward-compatible tokens for the existing UI */
  --teal: var(--primary);
  --ink: var(--text-main);
  --muted: var(--text-secondary);
  --line: var(--border);
  --shade: var(--bg);
}
html { font-family: "Sarabun", Tahoma, system-ui, sans-serif; }
body {
  color: var(--text-main);
  background: var(--bg);
  font-family: "Sarabun", Tahoma, system-ui, sans-serif;
}
#app { min-height: 100vh; }
::selection { background: #BDD7FF; color: #11366B; }
:focus-visible {
  outline: 3px solid #FCA74E;
  outline-offset: 3px;
}
button, input, select, textarea { font-family: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

/* Brand logo/wordmark: blue for public trust, orange for action */
.logo-symbol {
  background: linear-gradient(140deg, #0874F7 0%, #0752BC 57%, #FF8B13 58%, #FF6A00 100%);
  color: #FFF;
  box-shadow: 0 9px 24px rgba(10, 100, 223, .22);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 16px;
}
.brand { color: var(--brand-navy); letter-spacing: -.25px; }
.brand small { color: #6B84A6; }
.land-nav .brand,
.auth-box .brand { color: #123D7C; }
.side-brand .brand,
.sidebar .brand { color: #FFFFFF; }
.side-brand .brand small { color: #A6C8FF; }
.loading-screen { color: #617D9D; }
.loading-screen .logo-symbol { margin-inline: auto; }

/* Marketing / welcome / hero */
.landing {
  background:
    radial-gradient(ellipse 60% 66% at 92% 10%, rgba(249, 166, 54, .17), transparent 74%),
    radial-gradient(ellipse 65% 75% at 3% 35%, rgba(68, 148, 255, .16), transparent 65%),
    linear-gradient(145deg, #FCFDFF 0%, #EEF5FF 66%, #FFF8EE 100%);
}
.land-nav { border-bottom: 1px solid rgba(16, 87, 179, .08); }
.land-hero h1 { color: #0E346F; font-weight: 800; }
.land-hero h1 em {
  background: linear-gradient(102deg,#0873ED 0%,#1267D4 42%,#FF8815 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lead { color: #536E8E; }
.pill {
  color: #075DC7;
  background: #E7F1FF;
  border: 1px solid #C7DFFF;
}
.land-details { color: #3A669D; }
.land-details span::first-letter { color: #EB7C11; }
.preview-device {
  border: 1px solid #BCD5F7;
  background: linear-gradient(160deg,#FFFFFF,#FAFCFF);
  box-shadow: 0 36px 90px rgba(21, 76, 173, .20);
}
.preview-top { border-color: #E1EAF8; }
.dot { background: #FFAF57; }
.dot:nth-child(2) { background: #91BDF8; }
.dot:nth-child(3) { background: #3978E2; }
.preview-sidebar { background: linear-gradient(180deg,#103D8F,#085FD7); }
.preview-menu { background: rgba(255,255,255,.25); }
.preview-menu.active { background: #FFAE3D; }
.preview-title { background: #1154AF; }
.preview-card {
  background: linear-gradient(145deg,#EBF3FF,#FFFFFF);
  border-color: #D4E5FC;
}
.preview-card:nth-child(2) {
  background: linear-gradient(145deg,#FFF0DE,#FFFFFF);
  border-color: #FFE0B8;
}
.preview-card::before { background: #79ABF1; }
.preview-card:nth-child(2)::before { background: #FFAE60; }
.preview-card::after { background: #0B6ADD; }
.preview-card:nth-child(2)::after { background: #FB8614; }
.preview-row { border-bottom-color: #E8F0FC; }
.preview-row::before { background: #C0D6F3; }
.preview-row::after { background: #F6C993; }

/* Authentication */
.auth-layout { background: #EEF5FF; }
.auth-art {
  background:
    radial-gradient(circle at 80% 8%, rgba(255,151,43,.36), transparent 33%),
    radial-gradient(circle at 13% 88%, rgba(122,181,255,.38), transparent 40%),
    linear-gradient(145deg,#103E94 0%,#0869E8 65%,#0756C8 100%);
}
.auth-art p { color: #D5E7FF; }
.auth-box {
  background: linear-gradient(145deg,#FFF 80%,#FFF8F0 100%);
}
.auth-box h2 { color: #123A7A; }
.auth-box > p { color: #6B7F9D; }
.auth-options { color: #6883A3; }
.auth-options a { color: #0C65D5; }
.auth-options a:hover { color: #DF6B00; text-decoration: underline; }

/* Application shell and sidebar */
.shell { background: #F6F9FF; }
.sidebar {
  background: linear-gradient(173deg,#123E90 0%, #095AC6 62%, #06489E 100%);
  color: #DCE9FF;
  box-shadow: 4px 0 22px rgba(20,68,150,.09);
}
.side-brand { border-bottom: 1px solid rgba(255,255,255,.13); }
.side-menu-label { color: #B5D0FF; }
.navlink {
  color: #DBE9FF;
  border: 1px solid transparent;
  transition: background .17s ease, color .17s ease, border-color .17s ease;
}
.navlink svg { color: #BBD3FA; }
.navlink:hover {
  color: #FFF;
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.10);
}
.navlink.active {
  color: #FFF;
  background: rgba(255,255,255,.17);
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 5px 15px rgba(2,37,114,.10);
}
.navlink.active svg { color: #FFC46A; }
.navlink.active::before { background: #FF971E; width: 4px; }
.side-footer {
  color: #D6E5FF;
  border-top: 1px solid rgba(255,255,255,.20);
}
.topbar {
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid #E0E9F6;
  box-shadow: 0 1px 8px rgba(16,69,143,.035);
}
.topbar h2 { color: #173B77; }
.topbar p { color: #7186A4; }
.content { color: var(--text-main); }
.page-title h1 { color: #123B78; }
.page-title p, .muted { color: #6C829B; }
.account-bubble {
  background: #E8F1FF;
  color: #1166D8;
  box-shadow: inset 0 0 0 1px #D7E5FA;
}

/* Buttons (accessible contrasting text on bright orange) */
.primary,
button.primary {
  color: #FFFFFF;
  background: linear-gradient(120deg,#0976F5 0%,#075DCD 100%);
  border: 1px solid #075ED3;
  box-shadow: 0 8px 20px rgba(8,101,218,.19);
}
.primary:hover,
button.primary:hover {
  background: linear-gradient(120deg,#095FD3,#064DAC);
  border-color: #064DAC;
  box-shadow: 0 10px 22px rgba(8,89,200,.24);
}
.secondary,
button.secondary {
  color: #17437B;
  background: #EAF3FF;
  border: 1px solid #CFDFFA;
  box-shadow: none;
}
.secondary:hover,
button.secondary:hover {
  background: #DCEBFF;
  color: #094DA5;
  border-color: #B7D4FA;
}
.ghost {
  color: #25527F;
  background: #EEF4FD;
}
.ghost:hover { background: #DDEBFE; }
.mini-btn {
  color: #145AAE;
  border: 1px solid #D7E5F8;
  background: #FFF;
}
.mini-btn:hover {
  background: #EAF3FF;
  border-color: #ACCAF5;
}
.land-nav > .secondary,
.land-actions > .secondary {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: #18294E;
  box-shadow: 0 7px 17px rgba(245,124,13,.16);
}
.land-nav > .secondary:hover,
.land-actions > .secondary:hover {
  background: #FFAC49;
  border-color: #F28B18;
  color: #15284E;
}
.action-card {
  border-color: #DCE9F9;
  background: #FBFDFF;
  color: #234C7D;
}
.action-card:hover {
  border-color: #A7CCFD;
  background: #ECF5FF;
  transform: translateY(-1px);
}
.action-icon {
  background: #E4F0FF;
  color: #0869DE;
}
.action-card:nth-child(2) .action-icon,
.action-card:nth-child(4) .action-icon {
  background: #FFF1E0;
  color: #EA7500;
}

/* Dashboard metrics / summary cards */
.card, .stat {
  background: #FFFFFF;
  border: 1px solid #E0E9F6;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.card { padding: 24px; }
.card h2 { color: #183F7A; }
.stat {
  background: linear-gradient(155deg,#FFF 54%,#F6F9FF 100%);
}
.stat:nth-child(2) { background: linear-gradient(150deg,#FFF,#FFF8EE); }
.stat:nth-child(2) .stat-ico { color: #E97C08; background: #FFF0DC; }
.stat:nth-child(4) .stat-ico { color: #D86D00; background: #FFF2E2; }
.stat-top { color: #6C81A0; }
.stat-ico {
  color: #086FEA;
  background: #EAF3FF;
}
.stat strong { color: #0B58BC; }
.stat:nth-child(2) strong,
.stat:nth-child(4) strong { color: #E67707; }
.stat small { color: #8A9CAF; }
.section-head h2 { color: #163B74; }

/* Tags and status. Color is backed up by readable text labels */
/* Persisted and validated records are saved successfully, NOT officially approved.
   Database draft state remains unchanged so edit/delete permissions continue to work. */
.tag.kp-saved-complete{
 color:#146c48;
 background:#e7f8ef;
 border-color:#b9e7ce;
 font-weight:800;
}
.kp-detail-status{display:inline-flex;vertical-align:middle;margin-left:9px}
.kp-detail-status .tag{font-size:12px;font-weight:800;letter-spacing:normal;vertical-align:middle}

.tag {
  background: #E7F1FF;
  color: #0C5EB9;
  border: 1px solid #D4E7FD;
}
.tag.amber {
  color: #AA5810;
  background: #FFF0D8;
  border-color: #FFDEB0;
}
.tag.gray {
  color: #52667E;
  background: #F0F4FA;
  border-color: #E1E9F4;
}
.tag.red {
  color: #B33D3D;
  background: #FFF0ED;
  border-color: #FFCFC7;
}
.alert {
  color: #8B580D;
  background: #FFF8EB;
  border: 1px solid #FFE2B2;
}
.success-alert {
  color: #126448;
  background: #E9F8F0;
  border-color: #BDE7D3;
}
.danger-alert {
  color: #A63333;
  background: #FFF0EF;
  border-color: #FFD0C9;
}

/* Forms and focus */
.field label { color: #304C76; }
.input, .select, .textarea {
  color: #153960;
  background: #FFF;
  border: 1px solid #D5E3F5;
  border-radius: var(--radius-sm);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.input:hover, .select:hover, .textarea:hover { border-color: #9FC4F5; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: #086CF0;
  box-shadow: 0 0 0 4px rgba(28,126,247,.12);
}
.input::placeholder, .textarea::placeholder { color: #99ACC0; }
.input:disabled, .select:disabled, .textarea:disabled {
  background: #F3F6FC;
  color: #8BA0B3;
}
.hint { color: #798EA7; }
.steps .step { color: #4B719F; background: #E9F1FC; }
.steps .step.active {
  color: #FFF;
  background: linear-gradient(110deg,#0A68DE,#146FF4);
  box-shadow: 0 4px 11px rgba(24,112,224,.13);
}
.total-row { border-color: #DFE8F7; }
.total-row strong { color: #E87A05; }
#live-total { color: #E87500; }

/* Tables and links */
.table-scroller {
  border: 1px solid #EDF2FA;
  border-radius: 12px;
  overflow-x: auto;
}
table th {
  color: #365B8B;
  background: #EFF5FF;
}
table td {
  color: #3D5877;
  border-bottom: 1px solid #E8EEF9;
}
.table-scroller tbody tr:hover { background: #F7FAFF; }
.linkish {
  color: #095FCB;
  font-weight: 800;
}
.linkish:hover { color: #E87300; text-decoration: underline; }
.amount { color: #183F7A; }
.empty { color: #8496AB; }

/* Print preview controls — not official document paper */
.doc-preview {
  background: #EAF1FC;
  border: 1px solid #D8E6FA;
}
.preview-page {
  border: 1px solid #D4E2F8;
  box-shadow: var(--shadow-md);
}
.print-toolbar { align-items: center; }

/* Scrollbars */
@media (hover:hover) {
  * { scrollbar-width: thin; scrollbar-color: #AFC9EB #EFF5FC; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Mobile */
@media (max-width: 800px) {
  .mobile-menu {
    color: #195396;
    border-top: 1px solid #D9E7FB;
    background: #FFFFFF;
    box-shadow: 0 -5px 20px rgba(22,81,164,.10);
  }
  .mobile-menu button { color: #245FAD; }
  .mobile-menu button:focus-visible { background: #EAF3FF; }
  .mobile-toggle { background: #E9F2FF; color: #0D5FCB; }
  .land-nav { border-bottom-color: #E5EFFC; }
  .stat { padding: 15px; }
  .card { padding: 18px; }
}
/* CRITICAL: government documents remain plain black on white A4 */
#print-area, .paper-page, .official {
  --text-main: #111;
  --text-secondary: #444;
}
#print-area .paper-page {
  background: #FFFFFF;
  color: #111111;
  border: 0;
  box-shadow: none;
}
#print-area .official-table th,
#print-area .official-table td {
  background: #FFFFFF;
  color: #111;
  border-color: #222;
}
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #FFF !important; color: #111 !important; }
  #app { display: none !important; }
  #print-area { display: block !important; background: #FFF !important; }
  #print-area .paper-page {
    width: 210mm !important;
    min-height: 297mm !important;
    margin: 0 !important;
    padding: 17mm 20mm 18mm !important;
    color: #111 !important;
    background: #FFF !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  #print-area .paper-page h1,
  #print-area .paper-page h2,
  #print-area .paper-page p,
  #print-area .paper-page td,
  #print-area .paper-page th { color: #111 !important; }
}


/* ===== Shared brand and independent school identities ===== */
.brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: #FFFFFF;
  border: 1px solid rgba(9,105,232,.13);
  box-shadow: 0 6px 17px rgba(12,73,156,.12);
  overflow: hidden;
}
.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}
.brand-wording {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.brand-wording strong {
  color: #153D77;
  font-size: 22px;
  font-weight: 800;
}
.brand-wording small {
  margin-top: 4px;
  color: #DE7210;
  font-size: 10px;
  letter-spacing: 0;
  font-weight: 700;
}
.side-brand .brand-wording strong { color: #FFFFFF; }
.side-brand .brand-wording small { color: #FFD395; }
.side-brand .brand-mark { border-color: #BED8FF; }
.loading-brand-logo {
  display: block;
  width: 84px;
  height: 84px;
  margin: 0 auto 16px;
  border-radius: 22px;
  background: white;
  box-shadow: 0 8px 23px rgba(9,105,232,.13);
}
.school-identity {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 13px 0 4px;
  padding: 12px 11px;
  border-radius: 13px;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.15);
}
.school-identity > div { flex: 1; min-width: 0; }
.school-identity b {
  display: block;
  color: #FFFFFF;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.school-identity small {
  display: block;
  color: #C3D8FF;
  font-size: 10px;
  margin-top: 4px;
}
.school-logo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: #FFFFFF;
  border: 1px solid #D5E3F7;
  border-radius: 11px;
  box-shadow: 0 4px 13px rgba(11,73,167,.09);
  overflow: hidden;
  width: 44px;
  height: 44px;
}
.school-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  display: block;
}
.school-logo-fallback {
  font-size: 21px;
  background: #EFF5FF;
  color: #1768CE;
}
.school-logo-topbar {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}
.top-school {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.top-school > div { min-width: 0; }
.top-school h2 { overflow-wrap: anywhere; }
.school-logo-settings {
  width: 76px;
  height: 76px;
  border-radius: 15px;
}
.school-logo-settings img { padding: 7px; }
.school-logo-setting {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 14px;
  background: #F6F9FF;
  border: 1px solid #E0EBFA;
  border-radius: 13px;
  margin-bottom: 16px;
}
.school-logo-setting > div { min-width: 0; }
.school-logo-setting b { color: #194B92; }
.school-logo-setting p { margin: 3px 0; font-size: 12px; }
.logo-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}
#school-logo-file { padding: 9px; }
#school-logo-file::file-selector-button {
  background: #E4EFFF;
  color: #155FC5;
  border: 1px solid #C9DEFB;
  padding: 7px 11px;
  border-radius: 8px;
  margin-right: 12px;
  font: inherit;
  cursor: pointer;
}
@media (max-width: 800px) {
  .school-logo-topbar { width: 38px; height: 38px; }
  .brand-mark { width: 47px; height: 47px; flex-basis: 47px; }
  .brand-wording strong { font-size: 19px; }
  .school-logo-setting { align-items: flex-start; }
  .school-logo-settings { width: 68px; height: 68px; }
}
@media (max-width: 450px) {
  .top-school h2 { font-size: 13px; }
  .top-school p { font-size: 10px; }
  .topbar { padding: 0 10px; }
  .brand-wording strong { font-size: 18px; }
}
@media print {
  .school-logo, .school-identity, .brand-mark, .loading-brand-logo { display:none !important; }
  /* School logos are intentionally UI-only; A4 print templates remain unchanged. */
}


/* KP ITEM EDITOR COLUMN LABELS — purchasing/hiring wizard only.
   Affects entry controls, never the official printed A4 tables. */
#procurement-form .kp-item-entry-table { margin: 14px 0 12px; }
#procurement-form .kp-item-entry-head,
#procurement-form .kp-item-entry {
  display:grid;
  grid-template-columns:minmax(0,2.3fr) minmax(72px,.63fr) minmax(90px,.73fr) minmax(115px,.88fr) 36px;
  column-gap:9px;
  align-items:center;
}
#procurement-form .kp-item-entry-head {
  margin-bottom:7px;
  padding:9px 11px;
  border:1px solid #d6e6fc;
  background:#edf5ff;
  border-radius:10px;
  color:#204e8d;
  font-size:12px;
  line-height:1.45;
  font-weight:800;
}
#procurement-form .kp-item-entry-head span:last-child { text-align:center; }
#procurement-form .kp-item-entry {
  margin:0 0 9px;
  padding:8px 11px;
  border:1px solid #e1ebfa;
  background:#fff;
  border-radius:12px;
  min-width:0;
}
#procurement-form .kp-item-entry .kp-item-cell { min-width:0; }
#procurement-form .kp-item-entry .kp-item-cell > label {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
#procurement-form .kp-item-entry .kp-item-name-wrap { display:flex;align-items:center;gap:8px;min-width:0; }
#procurement-form .kp-item-entry .kp-item-index {
  display:grid;
  place-items:center;
  width:23px;height:23px;
  flex:0 0 23px;
  background:#e8f2ff;
  color:#1e65c6;
  border-radius:7px;
  font:800 12px "Sarabun",sans-serif;
}
#procurement-form .kp-item-entry .input {
  min-width:0;
  width:100%;
  padding:10px 9px;
  font-size:13px;
}
#procurement-form .kp-item-entry .kp-item-remove {
  padding:0;
  width:32px;height:32px;
  justify-content:center;
  border-radius:9px;
}
@media (max-width:950px) {
  #procurement-form .kp-item-entry-head { display:none; }
  #procurement-form .kp-item-entry {
    position:relative;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
    padding:14px;
    align-items:end;
    margin-bottom:12px;
  }
  #procurement-form .kp-item-entry .kp-item-cell > label {
    position:static;
    display:block;
    width:auto;height:auto;
    padding:0;margin:0 0 5px;
    overflow:visible;
    clip:auto;
    white-space:normal;
    color:#285589;
    font-size:12px;
    line-height:1.5;
    font-weight:800;
  }
  #procurement-form .kp-item-entry .kp-item-cell-name,
  #procurement-form .kp-item-entry .kp-item-cell-price { grid-column:1/-1; }
  #procurement-form .kp-item-entry .kp-item-cell-name { padding-right:37px; }
  #procurement-form .kp-item-entry .kp-item-remove {
    position:absolute;
    right:14px;top:14px;
  }
  #procurement-form .kp-item-entry .input { padding:11px 10px;font-size:14px; }
}
@media (max-width:420px) {
  #procurement-form .kp-item-entry {grid-template-columns:1fr;}
  #procurement-form .kp-item-entry .kp-item-cell-name,
  #procurement-form .kp-item-entry .kp-item-cell-price {grid-column:1;}
}


/* Optional evidence capture in procurement wizard, not the printed A4 layout. */
#procurement-form .kp-evidence-panel {margin-top:16px;border-top:1px solid #e6edfa;padding-top:15px;}
#procurement-form .kp-evidence-panel > h3 {font-size:15px;color:#164a91;margin:4px 0 8px;font-weight:800;}
#procurement-form .kp-evidence-panel > .hint {margin-bottom:12px;line-height:1.65;}
#procurement-form .kp-wizard-evidence {
 border:1px solid #dbe6f7;
 background:#fafcff;
 border-radius:13px;
 margin:10px 0;
 padding:0 14px;
}
#procurement-form .kp-wizard-evidence[open] {background:#fff;}
#procurement-form .kp-wizard-evidence > summary {
 cursor:pointer;
 color:#1652a0;
 font-weight:800;
 font-size:14px;
 padding:14px 4px;
}
#procurement-form .kp-wizard-evidence > summary span {
 font-weight:500;
 font-size:11px;
 color:#6c809b;
 padding-left:8px;
}
#procurement-form .kp-wizard-evidence .hint {margin:0 0 15px;line-height:1.7;}
#procurement-form .kp-wizard-evidence .form-grid {padding-bottom:4px;}
@media(max-width:600px) {
 #procurement-form .kp-wizard-evidence {padding:0 10px;}
 #procurement-form .kp-wizard-evidence > summary span {display:block;padding:5px 0 0;}
}


/* Audit-safe removal of draft procurement: confirm before hiding any record. */
.kp-danger-button {
 display:inline-flex;align-items:center;justify-content:center;
 color:#bc3030!important;background:#fff5f4!important;
 border:1px solid #f4c4bf!important;border-radius:9px!important;
 margin-left:5px;
}
.kp-danger-button:hover{background:#ffe7e5!important;color:#9a2020!important}
.kp-delete-dialog {
 border:0;border-radius:20px;padding:0;
 width:min(470px,calc(100vw - 28px));
 background:transparent;color:#172f4f;
 box-shadow:0 18px 50px rgba(7,25,56,.25);
}
.kp-delete-dialog::backdrop{background:rgba(5,24,59,.5)}
.kp-delete-dialog-panel{background:#fff;padding:26px;border-radius:20px;font-family:Sarabun,Tahoma,sans-serif}
.kp-delete-icon{display:grid;place-items:center;width:45px;height:45px;border-radius:50%;background:#fff0ee;color:#c12e29;font-size:25px;font-weight:900;margin-bottom:12px}
.kp-delete-dialog h2{font-size:20px;color:#112f5f;margin:0 0 12px}
.kp-delete-dialog p{line-height:1.8;margin:0 0 15px;font-size:14px}
.kp-delete-warning{padding:12px;border:1px solid #ffdaab;background:#fff9ee;border-radius:10px;font-size:12px;line-height:1.8}
.kp-delete-dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px;margin-top:19px}
.kp-danger-confirm{background:#c33731!important;border:1px solid #c33731!important;color:#fff!important;border-radius:9px;padding:10px 17px;font-weight:800;cursor:pointer}
.kp-danger-confirm:hover{background:#a82925!important}
.kp-danger-confirm:disabled{opacity:.55;cursor:progress}
@media(max-width:480px){.kp-delete-dialog-panel{padding:20px}.kp-delete-dialog-actions>button{flex:1}}

/* School-scoped category settings only; no document or registry CSS affected. */
.kp-category-settings{margin-top:18px}
.kp-category-title{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.kp-category-title h2{margin-top:0}
.kp-category-list{display:flex;flex-direction:column;gap:10px;margin:17px 0}
.kp-category-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) auto;align-items:end;gap:12px;padding:14px;background:#f7faff;border:1px solid #dce8fb;border-radius:13px}
.kp-category-row .field{min-width:0;margin:0}
.kp-category-remove{min-height:42px;border:1px solid #f5c7c7!important;color:#b72d2d!important;background:#fff7f7!important}
.kp-category-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.kp-category-settings>.hint{margin-top:14px;line-height:1.8}
@media(max-width:680px){.kp-category-row{grid-template-columns:minmax(0,1fr);gap:8px}.kp-category-remove{justify-self:start}}

/* Responsive signer roster and conditional procurement-officer selector. */
.kp-officer-settings{margin-top:18px}
.kp-officer-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.kp-officer-heading h2{margin:0 0 6px}
.kp-officer-list{display:flex;flex-direction:column;gap:11px;margin:18px 0}
.kp-officer-row{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.75fr) minmax(0,.85fr) auto;gap:13px;align-items:end;padding:14px;border-radius:14px;background:#f5f9ff;border:1px solid #dbe9fb}
.kp-officer-row .field{margin:0;min-width:0}
.kp-officer-switch,.kp-officer-default{display:flex;align-items:center;gap:8px;min-height:42px;cursor:pointer;color:#245083;font-size:13px;font-weight:700}
.kp-officer-switch input,.kp-officer-default input{accent-color:#0b66d6;width:16px;height:16px}
.kp-officer-remove{align-self:end;min-height:42px!important;border:1px solid #f4c6c6!important;background:#fff8f7!important;color:#b84343!important}
.kp-officer-actions{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.kp-officer-settings>.hint{line-height:1.85;margin-top:13px}
.kp-officer-picker{margin:15px 0}
.kp-officer-picker .select{width:100%;min-height:43px}
@media(max-width:820px){.kp-officer-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.kp-officer-row .field{grid-column:1/-1}.kp-officer-remove{justify-self:start}}
@media(max-width:450px){.kp-officer-row{grid-template-columns:minmax(0,1fr)}.kp-officer-row .field{grid-column:auto}.kp-officer-switch,.kp-officer-default{min-height:28px}}