/* Karango School / Orange visual system adapted to Station's legacy markup.
   Load last; preserve IDs and classes consumed by the business scripts. */
@font-face{font-family:HelvNeueOrange;font-style:normal;font-weight:400;src:url('../vendor/karango/fonts/HelvNeue55_W1G.woff2') format('woff2');font-display:swap}
@font-face{font-family:HelvNeueOrange;font-style:normal;font-weight:700;src:url('../vendor/karango/fonts/HelvNeue75_W1G.woff2') format('woff2');font-display:swap}
:root {
  color-scheme:light;
  --ods-font:HelvNeueOrange,'Helvetica Neue',Helvetica,'Noto Sans','Liberation Sans',Arial,sans-serif;
  --ods-orange:#ff7a00; --ods-orange-d:#ff7a00; --ods-orange-soft:rgba(255,122,0,.08);
  --ods-ink:#000000; --ods-line:#000000; --ods-bg:#ffffff;
  --ods-gray:#ffffff; --ods-gray-2:#ffffff; --ods-muted:#000000;
  --ods-danger:#000000; --ods-success:#ff7a00; --ods-info:#000000; --ods-warning:#ff7a00;
  --ods-focus:0 0 0 2px #ffffff,0 0 0 4px #000000;
  --orange:var(--ods-orange); --orange-dark:var(--ods-orange-d);
  --text-dark:var(--ods-ink); --bg-light:var(--ods-bg); --success:var(--ods-success); --error:var(--ods-danger);
  --c-primary:var(--ods-orange); --c-primary-600:var(--ods-orange-d); --c-primary-700:#ff7a00; --c-primary-soft:var(--ods-orange-soft);
  --c-ink:var(--ods-ink); --c-ink-2:var(--ods-ink); --c-muted:var(--ods-muted); --c-line:var(--ods-line);
  --c-bg:var(--ods-bg); --c-surface:var(--ods-bg); --c-surface-2:var(--ods-bg);
  --c-success:var(--ods-success); --c-error:var(--ods-danger); --c-info:var(--ods-info); --c-warning:var(--ods-warning);
  --r-sm:0px; --r-md:0px; --r-lg:0px; --r-xl:0px; --r-pill:0px;
  --sh-sm:none; --sh-md:none; --sh-lg:0 8px 16px rgba(0,0,0,.15); --sh-primary:none;
  --shell-w:280px; --shell-bg:#ffffff; --shell-bg-2:#ffffff; --shell-border:#000000;
  --shell-text:#000000; --shell-text-dim:#000000; --shell-accent:var(--ods-orange); --shell-accent-soft:transparent; --shell-radius:0px;
}
/* The old reset and Inter descendant rules beat body inheritance.
   Assign the font directly, excluding Font Awesome fallbacks. */
html body, html body *:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not([class*='fa-']){font-family:var(--ods-font)}
html body{color:var(--ods-ink);background:var(--ods-bg);font-size:16px;font-weight:400;line-height:1.125;-webkit-font-smoothing:antialiased}
html body :is(h1,h2,h3,h4,h5,h6){font-weight:700 !important;letter-spacing:-.025rem}
html body :focus-visible{outline:2px solid var(--ods-ink);outline-offset:2px}
html body [hidden]{display:none !important}

/* Cards and content panels */
html body :is(.card,.panel,.kpi-card,.stat-card,.chart-card,.chart-panel,.chart-box,.table-container,.table-wrap,.audit-table-card,.audit-table-wrap,.filter-section,.settings-card,.settings-section,.bag-card,.cl-card){
  border:1px solid var(--ods-line) !important;border-radius:0 !important;background:var(--ods-bg) !important;
  box-shadow:none !important;color:var(--ods-ink) !important;transform:none !important;transition:border-color .15s ease !important;min-width:0;
}
html body :is(.card,.panel,.kpi-card,.stat-card,.chart-card,.bag-card,.cl-card):hover{border-color:var(--ods-orange) !important;transform:none !important;box-shadow:none !important}
html body.has-shell :is(.card-header,.panel__head,.chart-panel__head){background:var(--ods-bg) !important;border-bottom:1px solid var(--ods-line) !important;padding:16px 20px !important}
html body.has-shell :is(.card-header,.panel__head,.chart-panel__head) h2{text-align:left;font-size:18px !important;font-weight:700 !important}
html body.has-shell :is(.panel__icon,.chart-panel__icon,.kpi-card__icon,.card-header i){border-radius:0 !important;background:var(--ods-orange) !important;color:#ffffff !important;box-shadow:none !important}
html body.has-shell .kpi-card{padding:20px !important}
html body.has-shell .kpi-card .kpi-card__value{color:var(--ods-ink) !important;font-weight:700}
html body.has-shell .kpi-card .kpi-card__label{color:var(--ods-muted) !important;font-size:14px}
html body.has-shell :is(.kpi-grid,.dash-charts){gap:16px}
html body.has-shell main > header .titles h1,html body.has-shell .dash-header .dash-title h1{font-size:28px !important;font-weight:700 !important}
html body.has-shell main > header .titles p,html body.has-shell .dash-header .dash-title p{font-size:14px !important;color:var(--ods-muted) !important}

/* Shared metrics from Karango's ods-bridge.css */
html body :is(.btn,.btn-add,.btn-primary,.btn--primary,.btn--ghost,.btn--danger,.btn-cancel,.btn-delete,.btn-delete-confirm,.secondary-btn,.secondary-button,.login-button,.btn-ok,.btn-save,.btn-export,.btn-print){
  display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;
  width:auto;padding:10px 20px !important;border:2px solid var(--ods-line) !important;border-radius:0 !important;
  font-size:16px !important;font-weight:700 !important;line-height:24px !important;letter-spacing:0 !important;
  white-space:nowrap;text-decoration:none;box-shadow:none !important;transform:none !important;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease !important;
}
html body :is(.btn,.btn-add,.btn-primary,.btn--primary,.btn-ok,.btn-save,.login-button){background:var(--ods-orange) !important;background-image:none !important;border-color:var(--ods-orange) !important;color:#ffffff !important}
html body :is(.btn-cancel,.secondary-btn,.secondary-button,.btn--ghost,.btn-export,.btn-print),html body .modal-actions :is([id*='cancel' i],[id*='close' i]){background:transparent !important;border:2px solid var(--ods-line) !important;color:var(--ods-ink) !important}
html body :is(.btn-delete,.btn-delete-confirm,.btn--danger),html body .modal-actions :is([id*='confirmDelete'],[id*='deleteConfirm']){background:var(--ods-danger) !important;border-color:var(--ods-danger) !important;color:#ffffff !important}
html body :is(.btn,.btn-add,.btn-primary,.btn--primary,.login-button):hover{background:var(--ods-orange-d) !important;box-shadow:none !important;transform:none !important}
html body :is(.btn-cancel,.secondary-btn,.secondary-button,.btn--ghost,.btn-export,.btn-print):hover,html body .modal-actions :is([id*='cancel' i],[id*='close' i]):hover{background:var(--ods-gray) !important;border-color:var(--ods-line) !important;color:var(--ods-ink) !important}
html body :is(.btn-delete,.btn-delete-confirm,.btn--danger):hover{filter:brightness(.9)}
html body :is(button,.btn):disabled{opacity:.65 !important;cursor:not-allowed !important;box-shadow:none !important;transform:none !important}
html body :is(.btn,.btn-add) i{margin:0 !important}

/* Match legacy table-action specificity, including its hover selectors. */
html body.has-shell td:last-child :is(.btn-edit,.edit-btn,.action-edit,.btn-delete-row,.btn-delete,.delete-btn,.action-delete,.btn-terminate),
html body.has-shell td:last-child :is(.btn-edit,.edit-btn,.action-edit,.btn-delete-row,.btn-delete,.delete-btn,.action-delete,.btn-terminate):hover{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  width:40px !important;height:40px !important;min-width:40px !important;padding:10px !important;margin-left:6px !important;
  border:2px solid transparent !important;border-radius:0 !important;background:transparent !important;color:var(--ods-ink) !important;
  box-shadow:none !important;transform:none !important;font-size:14px !important;line-height:21px !important;
}
html body.has-shell td:last-child :is(.btn-delete-row,.btn-delete,.delete-btn,.action-delete){color:var(--ods-danger) !important}
html body.has-shell td:last-child :is(.btn-edit,.edit-btn,.action-edit,.btn-delete-row,.btn-delete,.delete-btn,.action-delete,.btn-terminate):hover{background:var(--ods-gray) !important}
html body.has-shell td:last-child :is(.btn-edit,.edit-btn,.action-edit,.btn-delete-row,.btn-delete,.delete-btn,.action-delete,.btn-terminate) i{background:transparent !important;color:inherit !important}

/* Static labels also support legacy input-before-label markup. */
html body :is(.form-group,.field,.form-field){display:flex;flex-direction:column;gap:4px;margin-bottom:16px;min-width:0}
html body :is(.form-group,.field,.form-field) > label,html body :is(.field__label,.form-label){
  position:static !important;order:-1;display:block;transform:none !important;padding:0 !important;margin:0 0 4px !important;
  background:transparent !important;font-size:14px !important;font-weight:700 !important;line-height:1.5 !important;
  color:var(--ods-ink) !important;pointer-events:auto;letter-spacing:0 !important;text-transform:none !important;
}
html body .form-group label::before{content:none !important}
html body .form-group > .icon{display:none !important}
html body :where(input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='range']):not([type='color']):not([type='file']),select,textarea,.field__input){
  border:1px solid var(--ods-line) !important;border-radius:0 !important;background:var(--ods-bg) !important;color:var(--ods-ink) !important;
  font-size:16px !important;line-height:24px !important;padding:12px 14px !important;box-shadow:none !important;max-width:100%;min-width:0;
}
html body :is(input,select,textarea)::placeholder{color:#ffffff}
html body :is(input,select,textarea):focus{outline:none !important;border-color:var(--ods-line) !important;box-shadow:var(--ods-focus) !important}
html body input:is([type='checkbox'],[type='radio']){accent-color:var(--ods-orange);width:16px;height:16px;flex:0 0 auto}
html body .field__control:has(> i) input{padding-left:40px !important}
html body.has-shell :is(.search-box,.shell-search){display:flex !important;align-items:center !important;gap:12px !important;border:1px solid var(--ods-line) !important;border-radius:0 !important;background:var(--ods-bg) !important;box-shadow:none !important;padding:0 16px !important;min-width:0}
html body.has-shell .search-box{max-width:none !important;margin-bottom:24px !important}
html body.has-shell :is(.search-box,.shell-search):focus-within{border-color:var(--ods-line) !important;box-shadow:var(--ods-focus) !important}
html body.has-shell :is(.search-box,.shell-search) input,html body.has-shell :is(.search-box,.shell-search) input:focus{
  border:0 !important;outline:none !important;box-shadow:none !important;background:transparent !important;padding:14px 0 !important;
  font-size:15px !important;line-height:18px !important;font-weight:500 !important;
}
html body.has-shell :is(.search-box,.shell-search) i{color:#ffffff !important}

/* Compact tables */
html body.has-shell :is(.card,.data-table,.table-container,.table-wrap,.audit-table-wrap) table{width:100%;border-collapse:collapse !important}
html body.has-shell table thead th{
  background:var(--ods-gray) !important;border:0 !important;border-bottom:2px solid var(--ods-line) !important;padding:8px 16px !important;
  color:var(--ods-ink) !important;font-size:14px !important;font-weight:700 !important;text-transform:none !important;letter-spacing:0 !important;text-align:left;
}
html body.has-shell table tbody td{padding:8px 16px !important;border:0 !important;border-bottom:1px solid var(--ods-line) !important;color:var(--ods-ink) !important;font-size:14px !important;font-weight:400 !important}
html body.has-shell table tbody tr:hover{background:var(--ods-gray) !important;transform:none !important}
html body.has-shell .card:has(> table){overflow-x:auto !important}

/* Outlined badges */
html body :is(.badge,.balance-pill,.brand-chip,.header-badge,.status-badge,.badge-success,.badge-danger,.badge-warning,.badge-info){
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ods-muted) !important;border-radius:0 !important;
  background:transparent !important;color:var(--ods-muted) !important;font-size:12px !important;font-weight:700 !important;
  line-height:1.125 !important;padding:3px 10px !important;box-shadow:none !important;
}
html body :is(.badge--success,.badge-success,.status-badge.success,.badge.success){color:var(--ods-success) !important;border-color:var(--ods-success) !important}
html body :is(.badge--error,.badge-danger,.status-badge.error,.badge.error){color:var(--ods-danger) !important;border-color:var(--ods-danger) !important}
html body :is(.badge--warning,.badge-warning){color:var(--ods-warning) !important;border-color:var(--ods-warning) !important}
html body :is(.badge--info,.badge-info){color:var(--ods-info) !important;border-color:var(--ods-info) !important}

/* Standard square form dialogs, with Karango's rounded confirmation exception. */
html body .modal{background:rgba(0,0,0,.5) !important;backdrop-filter:none !important;padding:20px}
html body.has-shell .modal .modal-content,html body .modal .modal-content{
  border:1px solid var(--ods-line) !important;border-radius:0 !important;background:var(--ods-bg) !important;color:var(--ods-ink) !important;
  box-shadow:0 8px 16px rgba(0,0,0,.15) !important;max-width:calc(100vw - 40px) !important;max-height:90dvh !important;overflow-y:auto !important;padding:20px !important;
}
html body .modal h2{text-align:left !important;font-size:18px !important;padding-right:36px;margin-bottom:20px}
html body.has-shell .modal h2 i{background:transparent !important;color:var(--ods-orange) !important;border-radius:0 !important;box-shadow:none !important}
html body .modal .modal-close{border-radius:0 !important;color:var(--ods-muted) !important;transform:none !important}
html body.has-shell .modal-actions{display:flex;flex-wrap:wrap;gap:8px !important;justify-content:flex-end}
html body .modal.ods-confirm .modal-content{border:none !important;border-radius:18px !important;width:min(420px,100%) !important;padding:26px 26px 20px !important;box-shadow:0 24px 60px rgba(0,0,0,.22) !important;text-align:center}
html body .modal.ods-confirm .modal-content h2{font-size:17px !important;text-align:center !important}
html body .modal.ods-confirm .modal-actions > button{flex:1;border-radius:10px !important;font-size:14px !important;padding:11px 16px !important}

/* Shell */
html body.has-shell main{min-width:0;padding:0 24px 40px}
html body.has-shell #sidebar{border-right:1px solid var(--ods-line) !important;background:var(--ods-bg) !important}
html body.has-shell #sidebar .shell-logo{gap:14px;padding:20px 24px 16px;color:var(--ods-ink);font-size:18px;letter-spacing:-.3px}
html body.has-shell #sidebar .shell-logo-mark{width:48px;height:48px;border-radius:0;background:var(--ods-orange);box-shadow:none}
html body.has-shell #sidebar .shell-logo small{color:var(--ods-muted);font-size:11px;font-weight:400;letter-spacing:0}
html body.has-shell #sidebar .shell-nav{padding:8px 0;scrollbar-color:#000000 transparent}
html body.has-shell #sidebar .shell-section-body{padding-left:0}
html body.has-shell #sidebar .shell-section-header{color:var(--ods-muted);border-radius:0;font-size:11px;letter-spacing:1.5px;padding:24px 24px 8px}
html body.has-shell #sidebar .shell-section-header:hover{background:var(--ods-gray)}
html body.has-shell #sidebar .shell-item{padding:14px 24px;margin:1px 12px;gap:14px;border-radius:0;color:var(--ods-muted);font-size:14px;font-weight:700;letter-spacing:0;text-transform:uppercase}
html body.has-shell #sidebar .shell-item:hover{background:var(--ods-gray);color:var(--ods-ink)}
html body.has-shell #sidebar .shell-item.is-active{background:transparent;color:var(--ods-orange)}
html body.has-shell #sidebar .shell-item.is-active::before{top:auto;bottom:0;left:24px;right:24px;width:auto;height:4px;transform:none;border-radius:0}
html body.has-shell #sidebar .shell-item i{color:inherit;opacity:.45}
html body.has-shell #sidebar .shell-item.is-active i{opacity:1}
html body.has-shell #sidebar .logout{color:var(--ods-muted);border-color:var(--ods-line);font-size:14px}
html body.has-shell #sidebar .logout:hover{color:var(--ods-danger)}
html body.has-shell .shell-topbar{margin:0 -24px 24px;padding:0 28px;background:var(--ods-bg);border-color:var(--ods-line);backdrop-filter:none}
html body.has-shell .shell-iconbtn{border:2px solid var(--ods-line);border-radius:0;color:var(--ods-ink)}
html body.has-shell .shell-iconbtn:hover{background:var(--ods-gray);color:var(--ods-ink)}
html body.has-shell .shell-user{border:1px solid var(--ods-line);border-radius:0}
html body.has-shell .shell-user .shell-avatar{background:var(--ods-orange);border-radius:0}
html body.has-shell .shell-user-role{color:var(--ods-muted)}
html body.has-shell .shell-iconbtn .shell-badge{background:var(--ods-danger);border-radius:50%}

html body.has-shell :is(.pg-btn,.pg-page,.page-link,.page-btn,.btn-pill,.bag-tab,.cl-tab){border:1px solid var(--ods-line) !important;border-radius:0 !important;background:transparent !important;color:var(--ods-ink) !important;font-weight:700 !important;box-shadow:none !important}
html body.has-shell :is(.pg-page.is-active,.page-btn.active,.page-item.active .page-link,.bag-tab.active,.cl-tab.active){background:var(--ods-orange) !important;border-color:var(--ods-orange) !important;color:#ffffff !important}
html body.has-shell :is(.bag-tab,.cl-tab){text-transform:uppercase;font-size:14px;letter-spacing:.025rem}

/* Toasts and utility controls */
html body.has-shell .toast{background:var(--ods-bg) !important;color:var(--ods-ink) !important;border:1px solid var(--ods-line);border-radius:0 !important;box-shadow:0 8px 24px rgba(0,0,0,.12) !important}
html body.has-shell .toast.success{border-left-color:var(--ods-success) !important}
html body.has-shell .toast.error{border-left-color:var(--ods-danger) !important}
html body.has-shell .toast.success::before{color:var(--ods-success) !important}
html body.has-shell .toast.error::before{color:var(--ods-danger) !important}
html body :is(.cpick,.help-dialog,.help-panel,.help-card){border:1px solid var(--ods-line);border-radius:0;background:var(--ods-bg);color:var(--ods-ink)}
html body :is(.cpick__nav,.cpick__day,.cpick__hour,.cpick__minute){border-radius:0;color:var(--ods-ink)}
html body .cpick__day.is-selected{background:var(--ods-orange) !important}
html body .help-fab{border:2px solid var(--ods-line);border-radius:0;background:var(--ods-bg);color:var(--ods-ink);box-shadow:none;width:40px;height:40px}
html body .help-fab:hover{background:var(--ods-gray);transform:none;box-shadow:none}
html body .help-fab::before{content:none}

/* Photo background + centered white authentication card, as in Karango. */
html body:not(.has-shell):has(.login-card) > .container{min-height:100dvh;height:auto;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,rgba(0,0,0,.82),rgba(0,0,0,.45) 50%,rgba(0,0,0,.2)),url('../images/login2.png') center/cover no-repeat fixed}
html body:not(.has-shell):has(.login-card) .left-panel{display:none}
html body:not(.has-shell):has(.login-card) .right-panel{flex:0 1 420px;background:transparent;padding:0}
html body .login-card{max-width:420px;border-radius:0;background:#ffffff;padding:40px 32px 32px;box-shadow:0 16px 48px rgba(0,0,0,.25)}
html body .login-card h2{text-align:left;font-size:28px;letter-spacing:-.03125rem;color:#000000}
html body .login-card .subtitle{text-align:left;color:#000000;font-size:14px;line-height:1.5;margin-bottom:24px}
html body .login-card .logo{justify-content:flex-start;font-size:18px;font-weight:700}
html body .login-card :is(.btn,.secondary-btn){width:100%}
html body .login-card a{color:#000000;text-decoration:underline}
html body .login-card a:hover{color:var(--ods-orange)}
html body .login-card .otp-inputs{gap:8px}
html body .login-card input.otp-digit{width:100%;min-width:0;padding:8px 0 !important;font-size:24px !important;text-align:center}

/* Keep original icon elements so delegated events and class toggles still work. */
html body i.ods-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;font-size:inherit}
html body i.ods-icon::before{content:none !important}
html body i.ods-icon > svg{display:block;width:1.125em;height:1.125em;flex:0 0 auto;stroke:currentColor}
html body.has-shell #sidebar .shell-item i.ods-icon > svg{width:20px;height:20px}
html body td:last-child i.ods-icon > svg{width:18px;height:18px}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
@media(max-width:768px){
  html body.has-shell main{margin-left:0;width:100%;padding:0 16px 32px}
  html body.has-shell .shell-topbar{margin:0 -16px 24px;padding:0 16px;gap:8px}
  html body.has-shell .shell-search{display:none !important}
  html body.has-shell .shell-user{padding:4px}
  html body.has-shell .shell-user .shell-user-meta{display:none}
  html body.has-shell .shell-topbar .shell-burger{display:inline-flex;width:40px;height:40px;justify-content:center;align-items:center}
  html body.has-shell #sidebar{width:min(280px,85vw)}
  html body.has-shell .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body.has-shell .dash-charts{grid-template-columns:minmax(0,1fr)}
  html body.has-shell main > header{align-items:flex-start !important}
  html body.has-shell :is(.table-container,.table-wrap,.audit-table-wrap){overflow-x:auto}
  html body.has-shell .modal-actions .btn{flex:1 1 auto}
}
@media(max-width:400px){html body .login-card{padding:32px 20px 24px}html body.has-shell .kpi-grid{grid-template-columns:minmax(0,1fr)}html body.has-shell main > header .btn-add{width:100%}}
@media(prefers-reduced-motion:reduce){html body *,html body *::before,html body *::after{scroll-behavior:auto !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}