/* ═══════════════════════════════════════════════════════════════════════════
   CatalyseR ERP — Admin Form Design System
   ───────────────────────────────────────────────────────────────────────────
   Shared CSS for all admin add/edit forms. Use class prefix `.ax-` (admin
   extended). Include this file once from header.php.

   Pattern:
     <form class="ax-page">
       <div class="ax-bar">             ← sticky top bar with title + actions
       <div class="ax-nav-pills">       ← quick-jump section pills
       <section class="ax-section">    ← one per logical group
         <div class="ax-section-head">  ← icon + title + sub
         <div class="ax-section-body">  ← grid of fields
           <div class="ax-grid">
             <div class="ax-field">     ← label + input
       <div class="ax-foot">             ← sticky bottom save bar

   Tokens used: --brand, --brand-hover, --brand-light, --gray-*, --shadow*,
   --radius-lg (all defined in header.php).
   ═══════════════════════════════════════════════════════════════════════════ */

.ax-page{max-width:1240px;margin:0 auto}

/* ── Top action bar (scrolls with the page) ──────────────────────────────── */
.ax-bar{background:var(--white);
  border-bottom:1px solid var(--gray-200);padding:14px 22px;margin:-20px -20px 22px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ax-bar-back{color:var(--gray-500);font-size:13px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:8px;transition:all .15s}
.ax-bar-back:hover{background:var(--gray-100);color:var(--brand)}
.ax-bar-titleg{flex:1;min-width:0}
.ax-bar-title{font-size:22px;font-weight:800;color:var(--gray-900);margin:0;line-height:1.2;letter-spacing:-.01em}
.ax-bar-sub{font-size:12.5px;color:var(--gray-500);margin-top:3px}
.ax-bar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* The bar cancels .page-content's padding so it runs edge to edge. That padding is
   20px on a wide screen, 12px at 768px and below (includes/header.php), 10px at
   480px and below (assets/css/responsive-baseline.css) and 14px inside the app, so
   the fixed -20px pushed the bar 8-10px past both sides of a phone or tablet
   screen - live_shot flagged it on every .ax form (2026-09-26). */
@media(max-width:768px){.ax-bar{margin:-12px -12px 22px}}
@media(max-width:480px){.ax-bar{margin:-10px -10px 22px}}
html.embedded .ax-bar{margin:-14px -14px 22px}
/* On a phone the title cannot share a row with Back / Cancel / Save: the title group
   (flex:1; min-width:0) shrank to one word per line beside the buttons, and its
   subtitle ran underneath Cancel. Below 560px it takes the whole row and the
   buttons wrap under it (2026-09-26, seen on the event and drive forms). */
@media(max-width:560px){.ax-bar-titleg{flex:1 1 100%}}

/* ── Status / role pills ─────────────────────────────────────────────────── */
.ax-status{padding:6px 14px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.ax-status .dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.ax-st-active,.ax-st-ok,.ax-st-success,.ax-st-verified{background:var(--green-50);color:var(--green-700)}
.ax-st-pending,.ax-st-on_leave,.ax-st-onleave,.ax-st-warning{background:var(--amber-50);color:var(--amber-text)}
.ax-st-notice,.ax-st-amber{background:#fed7aa;color:#9a3412}
.ax-st-inactive,.ax-st-resigned,.ax-st-terminated,.ax-st-absconding,.ax-st-failed,.ax-st-rejected,.ax-st-danger{background:var(--red-100);color:var(--red-strong)}
.ax-st-retired,.ax-st-info,.ax-st-archived{background:#e0e7ff;color:#4338ca}
.ax-st-neutral,.ax-st-draft{background:var(--gray-100);color:var(--gray-700)}

/* ── Quick-jump pills below the bar ──────────────────────────────────────── */
.ax-nav-pills{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px}
.ax-nav-pill{padding:7px 14px;background:var(--white);border:1px solid var(--gray-200);border-radius:99px;font-size:12px;color:var(--gray-600);text-decoration:none;font-weight:600;transition:all .15s;display:inline-flex;align-items:center;gap:6px;cursor:pointer;box-shadow:var(--shadow-sm)}
.ax-nav-pill:hover{background:var(--brand-light);color:var(--brand);border-color:var(--brand);transform:translateY(-1px)}

/* ── Section card ────────────────────────────────────────────────────────── */
.ax-section{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:18px;overflow:hidden;scroll-margin-top:90px;transition:box-shadow .2s}
.ax-section:hover{box-shadow:0 4px 12px rgba(15,23,42,.08)}
.ax-section-head{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--gray-100);background:linear-gradient(180deg,#fbfcfd 0%,var(--white) 100%)}
.ax-section-icon{flex-shrink:0;width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:19px;line-height:1}
.ax-ic-identity,.ax-ic-blue{background:var(--blue-100);color:var(--blue-strong)}
.ax-ic-address,.ax-ic-emerald{background:#d1fae5;color:var(--green-dark)}
.ax-ic-job,.ax-ic-amber{background:var(--amber-50);color:var(--amber-text)}
.ax-ic-exit,.ax-ic-red{background:var(--red-100);color:var(--red-strong)}
.ax-ic-emergency,.ax-ic-pink{background:#fce7f3;color:#9d174d}
.ax-ic-pii,.ax-ic-violet{background:#ede9fe;color:#6d28d9}
.ax-ic-payroll,.ax-ic-teal{background:#ccfbf1;color:#0f766e}
.ax-ic-notes,.ax-ic-slate{background:var(--gray-100);color:var(--gray-600)}
.ax-ic-orange{background:#ffedd5;color:#9a3412}
.ax-ic-cyan{background:#cffafe;color:#155e75}
.ax-ic-indigo{background:#e0e7ff;color:#4338ca}
.ax-section-titleg{flex:1;min-width:0}
.ax-section-title{font-size:15px;font-weight:700;color:var(--gray-900);margin:0;line-height:1.3}
.ax-section-desc{font-size:12px;color:var(--gray-500);margin-top:3px;line-height:1.45}
.ax-section-aside{font-size:11px;color:var(--gray-400);font-weight:500}
.ax-section-body{padding:22px}

/* ── Field grid ──────────────────────────────────────────────────────────── */
.ax-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 18px}
.ax-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.ax-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.ax-grid .span-2{grid-column:span 2}
.ax-grid .span-3{grid-column:span 3}
.ax-grid .span-4{grid-column:span 4}
.ax-grid .span-full{grid-column:1/-1}
@media(max-width:900px){.ax-grid,.ax-grid.cols-4{grid-template-columns:repeat(2,1fr)}.ax-grid .span-2,.ax-grid .span-3,.ax-grid .span-4{grid-column:span 2}}
@media(max-width:560px){.ax-grid,.ax-grid.cols-2,.ax-grid.cols-4{grid-template-columns:1fr}.ax-grid .span-2,.ax-grid .span-3,.ax-grid .span-4{grid-column:span 1}.ax-bar{padding-left:14px;padding-right:14px}}

/* ── Field ───────────────────────────────────────────────────────────────── */
.ax-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ax-label{font-size:11.5px;font-weight:700;color:var(--gray-700);letter-spacing:.3px;text-transform:uppercase;display:flex;align-items:center;gap:5px}
.ax-label .req{color:var(--red);font-weight:700}
.ax-label .hint{margin-left:auto;font-weight:500;color:var(--gray-400);text-transform:none;letter-spacing:0;font-size:10.5px}
.ax-label .lock{display:inline-flex;align-items:center;gap:3px;background:var(--amber-50);color:var(--amber-text);font-size:9px;padding:2px 6px;border-radius:4px;margin-left:4px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.ax-input,.ax-select,.ax-textarea{width:100%;padding:9px 12px;border:1.5px solid var(--gray-200);background:var(--white);border-radius:8px;font-size:13.5px;color:var(--gray-900);transition:border-color .15s,box-shadow .15s,background .15s;font-family:inherit;line-height:1.4}
.ax-input::placeholder,.ax-textarea::placeholder{color:var(--gray-300)}
.ax-input:hover,.ax-select:hover,.ax-textarea:hover{border-color:var(--gray-300)}
.ax-input:focus,.ax-select:focus,.ax-textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(30,58,110,.12);background:var(--white)}
.ax-input:disabled,.ax-input[readonly]{background:var(--gray-50);color:var(--gray-500);cursor:not-allowed}
.ax-textarea{resize:vertical;min-height:60px}
.ax-input[type="file"]{padding:7px 11px;cursor:pointer;background:var(--gray-50)}
.ax-input[type="date"]{font-family:inherit}
.ax-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.ax-help{font-size:11px;color:var(--gray-500);margin-top:4px;line-height:1.4}

/* ── Avatar uploader ─────────────────────────────────────────────────────── */
.ax-avatar-wrap{display:flex;align-items:center;gap:20px;padding:14px;background:linear-gradient(135deg,var(--gray-50) 0%,var(--gray-100) 100%);border:1px dashed var(--gray-300);border-radius:12px}
.ax-avatar{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,var(--brand-light) 0%,var(--blue-100) 100%);display:flex;align-items:center;justify-content:center;color:var(--brand);font-size:32px;font-weight:700;flex-shrink:0;border:3px solid var(--white);box-shadow:0 0 0 1px var(--gray-200),0 4px 12px rgba(15,23,42,.08);background-size:cover;background-position:center;text-transform:uppercase}
.ax-avatar.has-img{color:transparent;background-color:transparent}
.ax-avatar-controls{flex:1;min-width:0}

/* ── Toggle switch ───────────────────────────────────────────────────────── */
.ax-toggle{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1.5px solid var(--gray-200);border-radius:10px;cursor:pointer;background:var(--white);transition:all .15s;user-select:none;position:relative}
.ax-toggle:hover{border-color:var(--gray-300);background:#fafbfc}
.ax-toggle input[type="checkbox"]{position:absolute;opacity:0;pointer-events:none}
.ax-toggle .sw{width:36px;height:21px;background:var(--gray-300);border-radius:99px;position:relative;flex-shrink:0;transition:background .2s}
.ax-toggle .sw::after{content:'';position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;background:var(--white);transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.ax-toggle input[type="checkbox"]:checked + .sw{background:#0f766e}
.ax-toggle input[type="checkbox"]:checked + .sw::after{left:18px}
.ax-toggle:has(input[type="checkbox"]:checked){border-color:#0f766e;background:#f0fdfa}
.ax-toggle-text{flex:1;font-size:13px;font-weight:600;color:var(--gray-800);line-height:1.3}
.ax-toggle-text small{display:block;font-weight:400;color:var(--gray-500);font-size:11.5px;margin-top:2px}
/* "Brand" toggle variant — uses brand color instead of teal */
.ax-toggle.brand input[type="checkbox"]:checked + .sw{background:var(--brand)}
.ax-toggle.brand:has(input[type="checkbox"]:checked){border-color:var(--brand);background:var(--brand-light)}

/* ── Inline check / radio pill (.ax-check) ───────────────────────────────────
   Was used throughout the admission form (SMS/Email opt-ins, Admission Type
   radios) but had NO css defined — so it rendered as a raw browser control.
   This styles it as a compact, tappable pill that highlights in brand colour
   when selected. Works for both checkbox and radio inputs. */
.ax-check{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1.5px solid var(--gray-200);
  border-radius:8px;background:var(--white);cursor:pointer;font-size:12.5px;font-weight:600;color:var(--gray-700);
  user-select:none;transition:border-color .15s,background .15s,color .15s;line-height:1.2;white-space:nowrap}
.ax-check:hover{border-color:var(--gray-300);background:#fafbfc}
.ax-check input[type="checkbox"],.ax-check input[type="radio"]{width:15px;height:15px;margin:0;accent-color:var(--brand);cursor:pointer;flex-shrink:0}
.ax-check:has(input:checked){border-color:var(--brand);background:var(--brand-light);color:var(--brand)}

/* ── Segmented selector (.ax-seg) — for small mutually-exclusive choices like
   Admission Type. Each option is a labelled radio rendered as a connected
   button; the chosen one fills with brand colour. */
.ax-seg{display:inline-flex;flex-wrap:wrap;gap:8px}
.ax-seg label{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border:1.5px solid var(--gray-200);
  border-radius:9px;background:var(--white);cursor:pointer;font-size:13px;font-weight:600;color:var(--gray-700);
  user-select:none;transition:all .15s;line-height:1.2}
.ax-seg label:hover{border-color:var(--gray-300);background:#fafbfc}
.ax-seg input[type="radio"]{width:16px;height:16px;margin:0;accent-color:var(--brand);cursor:pointer}
.ax-seg label:has(input:checked){border-color:var(--brand);background:var(--brand);color:var(--white)}
.ax-seg label:has(input:checked) input[type="radio"]{accent-color:var(--white)}

/* ── Bottom save bar (scrolls with the page) ─────────────────────────────── */
.ax-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 18px;background:var(--white);
  border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:0 8px 24px rgba(15,23,42,.08);margin-top:8px}
.ax-foot .meta{margin-right:auto;font-size:12px;color:var(--gray-500);display:inline-flex;align-items:center;gap:6px}

/* ── Banner alerts ───────────────────────────────────────────────────────── */
.ax-alert{padding:13px 16px;border-radius:8px;font-size:13.5px;margin-bottom:18px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 2px rgba(0,0,0,.04);line-height:1.45}
.ax-alert svg{flex-shrink:0}
.ax-alert.success{background:var(--green-50);border:1px solid #86efac;color:var(--green-700)}
.ax-alert.error{background:var(--red-50);border:1px solid #fecaca;color:var(--red-strong)}
.ax-alert.warn{background:var(--amber-50);border:1px solid #fcd34d;color:var(--amber-text)}
.ax-alert.info{background:var(--blue-100);border:1px solid #93c5fd;color:var(--blue-strong)}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ax-btn{padding:9px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;border:1.5px solid transparent;transition:all .15s;text-decoration:none;line-height:1;white-space:nowrap}
.ax-btn.primary{background:var(--brand);color:var(--white);border-color:var(--brand);box-shadow:0 1px 3px rgba(30,58,110,.3)}
.ax-btn.primary:hover{background:var(--brand-hover);box-shadow:0 4px 12px rgba(30,58,110,.3);transform:translateY(-1px)}
.ax-btn.ghost{background:var(--white);color:var(--gray-700);border-color:var(--gray-200)}
.ax-btn.ghost:hover{background:var(--gray-50);border-color:var(--gray-300);color:var(--gray-900)}
.ax-btn.danger{background:var(--red);color:var(--white);border-color:var(--red)}
.ax-btn.danger:hover{background:#b91c1c;box-shadow:0 4px 12px rgba(220,38,38,.3)}
.ax-btn.success{background:var(--green-bright);color:var(--white);border-color:var(--green-bright)}
.ax-btn.success:hover{background:#15803d}
.ax-btn.sm{padding:6px 12px;font-size:12px}

/* ── Inline-card variant for side-by-side layouts (e.g. form + history) ──── */
.ax-split{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:start}
@media(max-width:1100px){.ax-split{grid-template-columns:1fr}}

/* ── Highlight box (for conveyance, special flag, etc.) ──────────────────── */
.ax-highlight{padding:14px 16px;border-radius:10px;border:1.5px solid;display:flex;align-items:flex-start;gap:11px;line-height:1.5;font-size:13px}
.ax-highlight.amber{background:var(--amber-light);border-color:#fde68a;color:#78350f}
.ax-highlight.blue{background:var(--blue-50);border-color:#bfdbfe;color:var(--brand-dark)}
.ax-highlight.emerald{background:var(--green-light);border-color:#a7f3d0;color:var(--green-dark)}
.ax-highlight .ax-h-ico{font-size:18px;flex-shrink:0;line-height:1.2}
.ax-highlight strong{display:block;font-weight:700;margin-bottom:2px}
.ax-highlight small{display:block;font-size:11.5px;opacity:.85;margin-top:3px}