/* ─────────────────────────────────────────────────────────────
   SICIP admin theme — re-skins the Sneat/Bootstrap 5 admin in the
   website's colours (navy + orange, DM Sans / DM Serif Display).
   Loaded after the template CSS in layouts/master.blade.php.
   ───────────────────────────────────────────────────────────── */
:root {
  --sa-navy: #1A174E;
  --sa-navy-dark: #110E3A;
  --sa-navy-mid: #252268;
  --sa-navy-light: #2D2980;
  --sa-orange: #F3752A;
  --sa-orange-dk: #D45E16;
  --sa-orange-lt: #F8945A;
  --sa-orange-soft: rgba(243,117,42,.12);
  --sa-bg: #F4F3F9;
  --sa-line: #E6E3F1;
  --sa-gray-50: #F8F7FC;
  --sa-gray-100: #EDEBF4;
  --sa-gray-400: #9B96C4;
  --sa-gray-600: #5C578A;
  --sa-ok: #10965F;
  --sa-bad: #D6344B;
  --sa-font: 'DM Sans', 'Public Sans', system-ui, sans-serif;
  --sa-font-d: 'DM Serif Display', Georgia, serif;
  --sa-radius: 14px;

  --bs-primary: var(--sa-orange);
  --bs-primary-rgb: 243,117,42;
  --bs-link-color: var(--sa-orange-dk);
  --bs-link-hover-color: var(--sa-navy);
  --bs-body-font-family: var(--sa-font);
  --bs-body-color: #3A3664;
  --bs-heading-color: var(--sa-navy);
  --bs-border-color: var(--sa-line);
}

body { font-family: var(--sa-font); background: var(--sa-bg); color: #3A3664; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--sa-navy); font-family: var(--sa-font); }
a { color: var(--sa-orange-dk); }
a:hover { color: var(--sa-navy); }
.layout-wrapper, .content-wrapper { background: var(--sa-bg); }
::selection { background: var(--sa-orange-soft); }

/* ── sidebar ── */
.layout-menu.menu-vertical, .bg-menu-theme {
  background: linear-gradient(180deg, var(--sa-navy) 0%, var(--sa-navy-dark) 100%) !important;
  color: rgba(255,255,255,.72) !important;
  box-shadow: 8px 0 30px -20px rgba(17,14,58,.6) !important;
  width: 264px;
}
.layout-menu .app-brand { height: auto; padding: 1.25rem 1.25rem 1rem; margin: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.layout-menu .app-brand .sa-brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.layout-menu .app-brand .sa-brand img { height: 42px; width: auto; display: block; }
.layout-menu .app-brand .sa-brand span { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sa-orange-lt); line-height: 1.2; }
.layout-menu .app-brand .sa-brand small { display: block; font-size: .7rem; color: rgba(255,255,255,.5); font-weight: 500; letter-spacing: 0; text-transform: none; }
.layout-menu .app-brand .layout-menu-toggle { color: #fff; }
.menu-inner-shadow { display: none !important; }
.bg-menu-theme .menu-inner { padding: .6rem 0 1.4rem !important; }
.bg-menu-theme .menu-header { padding: 1.3rem 1.5rem .45rem !important; margin: 0 !important; }
.bg-menu-theme .menu-header::before { display: none !important; }
.bg-menu-theme .menu-header .menu-header-text { color: rgba(255,255,255,.38) !important; font-size: .64rem; font-weight: 700; letter-spacing: .16em; }
.bg-menu-theme .menu-item { margin: 1px .75rem; }
.bg-menu-theme .menu-link, .bg-menu-theme .menu-horizontal-prev, .bg-menu-theme .menu-horizontal-next {
  color: rgba(255,255,255,.74) !important; border-radius: 11px !important; padding: .62rem .8rem !important; font-weight: 500; font-size: .875rem; transition: background .15s, color .15s;
}
.bg-menu-theme .menu-link:hover, .bg-menu-theme .menu-item.open > .menu-link { color: #fff !important; background: rgba(255,255,255,.07) !important; }
.bg-menu-theme .menu-icon { color: rgba(255,255,255,.55); font-size: 1.15rem; margin-right: .7rem; transition: color .15s; }
.bg-menu-theme .menu-link:hover .menu-icon, .bg-menu-theme .menu-item.open > .menu-link .menu-icon { color: var(--sa-orange-lt); }
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
  color: #fff !important; background: linear-gradient(90deg, var(--sa-orange), var(--sa-orange-dk)) !important; box-shadow: 0 10px 22px -12px rgba(243,117,42,.95);
}
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link .menu-icon { color: #fff; }
.bg-menu-theme .menu-inner > .menu-item.active::before { display: none !important; }
.bg-menu-theme .menu-toggle::after { color: rgba(255,255,255,.45) !important; }
.bg-menu-theme .menu-sub { padding: .25rem 0 .35rem !important; }
.bg-menu-theme .menu-sub > .menu-item { margin: 1px 0; }
.bg-menu-theme .menu-sub > .menu-item > .menu-link { padding: .5rem .8rem .5rem 2.85rem !important; font-size: .83rem; color: rgba(255,255,255,.62) !important; }
.bg-menu-theme .menu-sub > .menu-item > .menu-link::before {
  content: '' !important; position: absolute; left: 1.45rem !important; top: 50%; width: 6px !important; height: 6px !important; border-radius: 50%;
  background: rgba(255,255,255,.28) !important; transform: translateY(-50%); transition: background .15s, box-shadow .15s; border: 0 !important;
}
.bg-menu-theme .menu-sub > .menu-item > .menu-link:hover { background: rgba(255,255,255,.05) !important; color: #fff !important; }
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link { color: #fff !important; background: rgba(243,117,42,.16) !important; font-weight: 600; }
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link::before { background: var(--sa-orange) !important; box-shadow: 0 0 0 4px rgba(243,117,42,.22); }
.bg-menu-theme .menu-item.active.open > .menu-link:not(.menu-toggle), .bg-menu-theme .menu-item.open > .menu-toggle { color: #fff !important; }
.bg-menu-theme .menu-inner > .menu-item.open > .menu-link.menu-toggle { background: rgba(255,255,255,.08) !important; }
.layout-menu .sa-site { margin: .9rem .75rem 0; }
.layout-menu .sa-site a { display: flex; align-items: center; gap: .55rem; padding: .62rem .8rem; border-radius: 11px; border: 1px dashed rgba(255,255,255,.18); color: rgba(255,255,255,.75); font-size: .82rem; font-weight: 600; text-decoration: none; transition: all .15s; }
.layout-menu .sa-site a:hover { border-color: var(--sa-orange); color: #fff; background: rgba(243,117,42,.12); }
.ps__thumb-y { background-color: rgba(255,255,255,.25) !important; }

@media (min-width: 1200px) {
  .layout-menu-fixed .layout-menu, .layout-menu-fixed-offcanvas .layout-menu { width: 264px; }
  .layout-menu-fixed:not(.layout-menu-collapsed) .layout-page, .layout-menu-fixed-offcanvas:not(.layout-menu-collapsed) .layout-page { padding-left: 264px; }
}

/* ── top bar ── */
.layout-navbar.navbar-detached {
  background: rgba(255,255,255,.88) !important; backdrop-filter: blur(10px); border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius) !important; box-shadow: 0 10px 30px -24px rgba(26,23,78,.55) !important; min-height: 64px;
}
.sa-crumb { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sa-crumb small { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sa-orange); }
.sa-crumb b { font-family: var(--sa-font-d); font-weight: 400; font-size: 1.2rem; color: var(--sa-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-topbtn { display: inline-flex; align-items: center; gap: .45rem; height: 38px; padding: 0 .9rem; border-radius: 10px; border: 1px solid var(--sa-line); background: #fff; color: var(--sa-navy); font-size: .8rem; font-weight: 600; text-decoration: none; transition: all .15s; }
.sa-topbtn:hover { border-color: var(--sa-orange); color: var(--sa-orange-dk); }
.sa-avatar { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--sa-navy); color: #fff; font-weight: 700; font-size: .85rem; letter-spacing: .02em; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--sa-line); }
.sa-user { display: flex; align-items: center; gap: .65rem; }
.sa-user .meta { line-height: 1.2; text-align: right; }
.sa-user .meta b { display: block; font-size: .84rem; color: var(--sa-navy); }
.sa-user .meta small { font-size: .7rem; color: var(--sa-gray-600); text-transform: capitalize; }
.layout-navbar .layout-menu-toggle i { color: var(--sa-navy); }

/* ── page header helper (optional, used by the dashboard) ── */
.sa-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 1.8rem 2rem; margin-bottom: 1.5rem; color: #fff;
  background: radial-gradient(60% 120% at 100% 0%, rgba(243,117,42,.35), transparent 60%), linear-gradient(130deg, var(--sa-navy) 0%, var(--sa-navy-light) 100%); box-shadow: 0 24px 50px -30px rgba(17,14,58,.8); }
.sa-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; }
.sa-hero > * { position: relative; z-index: 1; }
.sa-hero small { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-orange-lt); }
.sa-hero h1 { font-family: var(--sa-font-d); font-weight: 400; color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: .25rem 0 .35rem; }
.sa-hero p { margin: 0; color: rgba(255,255,255,.65); max-width: 620px; }

/* ── cards ── */
.card { border: 1px solid var(--sa-line) !important; border-radius: var(--sa-radius) !important; box-shadow: 0 14px 34px -28px rgba(26,23,78,.45) !important; background: #fff; }
.card-header { background: transparent; border-bottom: 1px solid var(--sa-gray-100) !important; padding: 1.1rem 1.4rem; }
.card-header h4, .card-header h5, .card-title, h5.card-header { font-family: var(--sa-font-d); font-weight: 400 !important; color: var(--sa-navy); font-size: 1.3rem; margin-bottom: 0; }
h5.card-header { padding: 1.1rem 1.4rem; }
.card-body { padding: 1.4rem; }
.card-footer { background: var(--sa-gray-50); border-top: 1px solid var(--sa-gray-100); border-radius: 0 0 var(--sa-radius) var(--sa-radius) !important; }

/* ── buttons ── */
.btn { border-radius: 10px; font-weight: 600; letter-spacing: .01em; box-shadow: none !important; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.btn:not(.btn-sm):not(.btn-xs):not(.btn-icon) { padding-top: .52rem; padding-bottom: .52rem; }
.btn-primary { background: var(--sa-orange) !important; border-color: var(--sa-orange) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { background: var(--sa-orange-dk) !important; border-color: var(--sa-orange-dk) !important; color: #fff !important; }
.btn-secondary { background: var(--sa-navy) !important; border-color: var(--sa-navy) !important; color: #fff !important; }
.btn-secondary:hover, .btn-secondary:focus { background: var(--sa-navy-light) !important; border-color: var(--sa-navy-light) !important; }
.btn-info { background: #2D6CDF !important; border-color: #2D6CDF !important; color: #fff !important; }
.btn-success { background: var(--sa-ok) !important; border-color: var(--sa-ok) !important; color: #fff !important; }
.btn-danger { background: var(--sa-bad) !important; border-color: var(--sa-bad) !important; color: #fff !important; }
.btn-warning { background: #E3A008 !important; border-color: #E3A008 !important; color: #fff !important; }
.btn-outline-primary { color: var(--sa-orange-dk) !important; border-color: var(--sa-orange) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--sa-orange) !important; color: #fff !important; }
.btn-outline-secondary { color: var(--sa-navy) !important; border-color: var(--sa-line) !important; background: #fff !important; }
.btn-outline-secondary:hover { border-color: var(--sa-navy) !important; background: var(--sa-gray-50) !important; }
.btn-label-secondary { background: var(--sa-gray-100) !important; color: var(--sa-navy) !important; border-color: transparent !important; }
.btn-sm { border-radius: 8px; }

/* ── forms ── */
.form-label, label { color: var(--sa-navy); font-weight: 600; font-size: .8rem; text-transform: none; letter-spacing: 0; }
.form-control, .form-select, .input-group-text {
  border-color: var(--sa-line); border-radius: 10px; background-color: var(--sa-gray-50); color: var(--sa-navy); font-size: .9rem;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.form-control:focus, .form-select:focus { border-color: var(--sa-orange) !important; background-color: #fff; box-shadow: 0 0 0 4px rgba(243,117,42,.14) !important; }
.input-group:focus-within .input-group-text { border-color: var(--sa-orange); }
.form-control::placeholder { color: #A9A5C8; }
.form-check-input:checked { background-color: var(--sa-orange); border-color: var(--sa-orange); }
.form-check-input:focus { border-color: var(--sa-orange); box-shadow: 0 0 0 .2rem rgba(243,117,42,.18); }
.form-switch .form-check-input:checked { background-color: var(--sa-orange); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--sa-bad); }
.invalid-feedback, .text-danger { color: var(--sa-bad) !important; }
input[type=file].form-control { background: #fff; }

/* ── tables ── */
.table { --bs-table-color: #3A3664; color: #3A3664; margin-bottom: 0; }
.table > :not(caption) > * > * { border-bottom-color: var(--sa-gray-100); padding: .8rem 1rem; vertical-align: middle; }
.table thead th, .table > thead > tr > th {
  background: var(--sa-gray-50) !important; color: var(--sa-gray-600) !important; font-size: .7rem !important; font-weight: 700 !important;
  letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--sa-line) !important; white-space: nowrap;
}
.table-hover > tbody > tr:hover > *, .table tbody tr:hover > * { --bs-table-accent-bg: rgba(243,117,42,.04); background-color: rgba(243,117,42,.04); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: var(--sa-gray-50); }
.table img { border-radius: 8px; }
.table-responsive { border-radius: 0 0 var(--sa-radius) var(--sa-radius); }

/* DataTables */
div.dataTables_wrapper { padding: 0; }
div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter { padding: .9rem 1rem .6rem; }
div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate { padding: .9rem 1rem; }
div.dataTables_wrapper div.dataTables_filter input { border-radius: 10px; border: 1px solid var(--sa-line); background: var(--sa-gray-50); padding: .4rem .75rem; margin-left: .5rem; min-width: 220px; }
div.dataTables_wrapper div.dataTables_filter input:focus { border-color: var(--sa-orange); outline: 0; box-shadow: 0 0 0 4px rgba(243,117,42,.14); background: #fff; }
div.dataTables_wrapper div.dataTables_length select { border-radius: 8px; border: 1px solid var(--sa-line); }
div.dataTables_wrapper div.dataTables_info { color: var(--sa-gray-600); font-size: .8rem; }
.page-link { border-radius: 9px !important; margin: 0 2px; border: 1px solid var(--sa-line); color: var(--sa-navy); min-width: 34px; text-align: center; }
.page-link:hover { background: var(--sa-gray-100); color: var(--sa-navy); }
.page-item.active .page-link, .pagination .page-item.active .page-link { background: var(--sa-orange) !important; border-color: var(--sa-orange) !important; color: #fff !important; box-shadow: 0 8px 16px -10px rgba(243,117,42,.9); }
.page-item.disabled .page-link { color: #B9B5D6; background: transparent; }
table.dataTable thead > tr > th.sorting::before, table.dataTable thead > tr > th.sorting_asc::before, table.dataTable thead > tr > th.sorting_desc::before { color: var(--sa-orange); }

/* ── badges / labels ── */
.badge { border-radius: 7px; font-weight: 700; letter-spacing: .02em; padding: .38em .62em; }
.bg-primary, .badge.bg-primary { background-color: var(--sa-orange) !important; }
.bg-label-primary { background-color: var(--sa-orange-soft) !important; color: var(--sa-orange-dk) !important; }
.bg-label-success { background-color: rgba(16,150,95,.12) !important; color: var(--sa-ok) !important; }
.bg-label-danger { background-color: rgba(214,52,75,.1) !important; color: var(--sa-bad) !important; }
.bg-label-secondary { background-color: var(--sa-gray-100) !important; color: var(--sa-gray-600) !important; }
.bg-success { background-color: var(--sa-ok) !important; }
.bg-danger { background-color: var(--sa-bad) !important; }
.text-primary { color: var(--sa-orange) !important; }

/* Grievance status colours */
.grievance-status { border-radius: 999px; font-weight: 700; letter-spacing: .02em; padding: .4em .7em; }
.grievance-status--pending { background: rgba(217,119,6,.13) !important; color: #A65B00 !important; }
.grievance-status--assigned { background: rgba(109,74,255,.13) !important; color: #5436CE !important; }
.grievance-status--in-progress { background: rgba(37,99,235,.13) !important; color: #1D4ED8 !important; }
.grievance-status--resolved { background: rgba(22,163,74,.13) !important; color: #15803D !important; }
.grievance-status--closed { background: rgba(100,116,139,.15) !important; color: #475569 !important; }

/* ── modals / dropdowns / tabs / alerts ── */
.modal-content { border: 0; border-radius: 18px; box-shadow: 0 30px 70px -30px rgba(17,14,58,.6); overflow: hidden; }
.modal-header { background: linear-gradient(130deg, var(--sa-navy) 0%, var(--sa-navy-light) 100%) !important; color: #fff !important; padding: 1.1rem 1.4rem; border: 0; }
.modal-header .modal-title, .modal-header h5, .modal-header h4 { color: #fff !important; font-family: var(--sa-font-d); font-weight: 400; font-size: 1.25rem; }
.modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .8; margin: -.25rem -.25rem -.25rem auto; }
.modal-footer { background: var(--sa-gray-50); border-top: 1px solid var(--sa-gray-100); }
.modal-backdrop.show { opacity: .55; background: var(--sa-navy-dark); }
.dropdown-menu { border: 1px solid var(--sa-line); border-radius: 14px; box-shadow: 0 20px 44px -24px rgba(26,23,78,.5); padding: .4rem; }
.dropdown-item { border-radius: 9px; padding: .5rem .75rem; color: var(--sa-navy); font-size: .86rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--sa-gray-50); color: var(--sa-orange-dk); }
.dropdown-item.active, .dropdown-item:active { background: var(--sa-orange); color: #fff; }
.nav-tabs { border-bottom: 1px solid var(--sa-line); gap: .25rem; }
.nav-tabs .nav-link { border: 0 !important; border-radius: 10px 10px 0 0; color: var(--sa-gray-600); font-weight: 600; }
.nav-tabs .nav-link:hover { color: var(--sa-navy); background: var(--sa-gray-50); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--sa-orange-dk) !important; background: #fff !important; box-shadow: inset 0 -3px 0 var(--sa-orange) !important; }
.nav-pills .nav-link { border-radius: 10px; color: var(--sa-navy); font-weight: 600; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--sa-orange) !important; color: #fff !important; box-shadow: 0 8px 18px -10px rgba(243,117,42,.9); }
.alert { border: 0; border-radius: 12px; font-weight: 500; }
.alert-success { background: rgba(16,150,95,.1); color: #0B6B44; }
.alert-danger { background: rgba(214,52,75,.08); color: #A3202F; }
.alert-warning { background: rgba(216,146,17,.1); color: #8A5D08; }
.alert-info { background: rgba(45,108,223,.08); color: #1E4FA8; }
.progress { border-radius: 99px; background: var(--sa-gray-100); }
.progress-bar { background: var(--sa-orange); }
.footer { color: var(--sa-gray-600); }

/* ── toast notifications (flash messages) ── */
.sa-toasts { position: fixed; top: 18px; right: 18px; z-index: 1095; display: flex; flex-direction: column; gap: .55rem; max-width: min(420px, calc(100vw - 36px)); }
.sa-toast { display: flex; align-items: flex-start; gap: .7rem; padding: .85rem .9rem .85rem 1rem; border-radius: 14px; background: #fff; border: 1px solid var(--sa-line); box-shadow: 0 22px 50px -24px rgba(17,14,58,.6); animation: sa-in .3s ease both; }
.sa-toast i { font-size: 1.25rem; margin-top: .05rem; }
.sa-toast.ok { border-left: 4px solid var(--sa-ok); } .sa-toast.ok i { color: var(--sa-ok); }
.sa-toast.bad { border-left: 4px solid var(--sa-bad); } .sa-toast.bad i { color: var(--sa-bad); }
.sa-toast .tx { flex: 1; font-size: .86rem; color: var(--sa-navy); font-weight: 500; }
.sa-toast .tx ul { margin: .3rem 0 0; padding-left: 1rem; font-weight: 400; color: #5C578A; }
.sa-toast button { border: 0; background: none; color: var(--sa-gray-400); font-size: 1.1rem; line-height: 1; padding: 0 .1rem; cursor: pointer; }
.sa-toast button:hover { color: var(--sa-navy); }
.sa-toast.out { animation: sa-out .25s ease forwards; }
@keyframes sa-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sa-out { to { opacity: 0; transform: translateX(16px); } }

/* ── dashboard ── */
.sa-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.sa-stat { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.15rem; border-radius: 16px; background: #fff; border: 1px solid var(--sa-line); text-decoration: none; box-shadow: 0 14px 34px -28px rgba(26,23,78,.45); transition: transform .2s, box-shadow .2s, border-color .2s; }
.sa-stat:hover { transform: translateY(-3px); border-color: rgba(243,117,42,.45); box-shadow: 0 22px 44px -28px rgba(26,23,78,.55); }
.sa-stat .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; background: var(--tone-soft, var(--sa-orange-soft)); color: var(--tone, var(--sa-orange)); flex: 0 0 auto; }
.sa-stat b { display: block; font-family: var(--sa-font-d); font-weight: 400; font-size: 1.8rem; line-height: 1; color: var(--sa-navy); font-variant-numeric: tabular-nums; }
.sa-stat span { display: block; font-size: .76rem; color: var(--sa-gray-600); font-weight: 600; margin-top: .25rem; }
.sa-tone-orange { --tone: #F3752A; --tone-soft: rgba(243,117,42,.13); }
.sa-tone-navy   { --tone: #2A2670; --tone-soft: rgba(42,38,112,.1); }
.sa-tone-violet { --tone: #6A4CFF; --tone-soft: rgba(106,76,255,.12); }
.sa-tone-teal   { --tone: #0E9C9C; --tone-soft: rgba(14,156,156,.12); }
.sa-tone-gold   { --tone: #D89211; --tone-soft: rgba(216,146,17,.13); }
.sa-tone-rose   { --tone: #D6446E; --tone-soft: rgba(214,68,110,.12); }
.sa-tone-green  { --tone: #10965F; --tone-soft: rgba(16,150,95,.12); }
.sa-tone-blue   { --tone: #0056D6; --tone-soft: rgba(0,86,214,.1); }
.sa-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.sa-quick a { display: flex; align-items: center; gap: .6rem; padding: .75rem .85rem; border-radius: 12px; border: 1px solid var(--sa-line); background: var(--sa-gray-50); color: var(--sa-navy); font-size: .84rem; font-weight: 600; text-decoration: none; transition: all .15s; }
.sa-quick a i { color: var(--sa-orange); font-size: 1.1rem; }
.sa-quick a:hover { border-color: var(--sa-orange); background: #fff; color: var(--sa-orange-dk); }
.sa-list { list-style: none; margin: 0; padding: 0; }
.sa-list li { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--sa-gray-100); }
.sa-list li:last-child { border-bottom: 0; }
.sa-list .d { flex: 0 0 auto; width: 46px; text-align: center; padding: .3rem 0; border-radius: 10px; background: var(--sa-gray-50); border: 1px solid var(--sa-line); line-height: 1.1; }
.sa-list .d b { display: block; font-size: 1rem; color: var(--sa-navy); }
.sa-list .d small { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sa-gray-600); }
.sa-list .t { flex: 1; min-width: 0; font-size: .86rem; color: var(--sa-navy); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-list .t small { display: block; color: var(--sa-gray-600); font-weight: 400; font-size: .74rem; }
.sa-empty { padding: 1.4rem; text-align: center; color: var(--sa-gray-600); font-size: .85rem; }

/* ── auth (login) ── */
.sa-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); background: var(--sa-bg); font-family: var(--sa-font); }
.sa-auth-art { position: relative; overflow: hidden; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; color: #fff;
  background: radial-gradient(60vw 60vw at -10% -20%, rgba(243,117,42,.35), transparent 60%), radial-gradient(50vw 50vw at 110% 120%, rgba(106,76,255,.3), transparent 60%), var(--sa-navy-dark); }
.sa-auth-art::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 32px 32px; }
.sa-auth-art > * { position: relative; }
.sa-auth-art img { height: 54px; width: auto; }
.sa-auth-art h1 { font-family: var(--sa-font-d); font-weight: 400; font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.08; color: #fff; margin: 0 0 .8rem; }
.sa-auth-art h1 em { font-style: normal; color: var(--sa-orange); }
.sa-auth-art p { color: rgba(255,255,255,.65); max-width: 460px; font-size: 1rem; line-height: 1.7; margin: 0; }
.sa-auth-art .foot { font-size: .78rem; color: rgba(255,255,255,.45); }
.sa-auth-form { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.sa-auth-card { width: 100%; max-width: 410px; }
.sa-auth-card small.eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-orange); }
.sa-auth-card h2 { font-family: var(--sa-font-d); font-weight: 400; font-size: 2rem; color: var(--sa-navy); margin: .3rem 0 .4rem; }
.sa-auth-card .lead { font-size: .92rem; color: var(--sa-gray-600); margin-bottom: 1.6rem; }
.sa-field { margin-bottom: 1rem; }
.sa-field label { display: block; margin-bottom: .4rem; font-size: .8rem; font-weight: 600; color: var(--sa-navy); }
.sa-input { position: relative; }
.sa-input i { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--sa-gray-400); font-size: 1.05rem; }
.sa-input input { width: 100%; height: 48px; padding: 0 2.8rem 0 2.6rem; border-radius: 12px; border: 1px solid var(--sa-line); background: #fff; font: 500 .92rem var(--sa-font); color: var(--sa-navy); outline: none; transition: border-color .15s, box-shadow .15s; }
.sa-input input:focus { border-color: var(--sa-orange); box-shadow: 0 0 0 4px rgba(243,117,42,.14); }
.sa-input .eye { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: none; color: var(--sa-gray-400); cursor: pointer; border-radius: 9px; }
.sa-input .eye:hover { color: var(--sa-navy); background: var(--sa-gray-50); }
.sa-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .2rem 0 1.4rem; font-size: .84rem; }
.sa-row label { display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; color: var(--sa-gray-600); cursor: pointer; margin: 0; }
.sa-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--sa-orange); }
.sa-row a { color: var(--sa-orange-dk); font-weight: 600; text-decoration: none; }
.sa-submit { width: 100%; height: 50px; border: 0; border-radius: 12px; background: var(--sa-orange); color: #fff; font: 700 .95rem var(--sa-font); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; box-shadow: 0 16px 30px -16px rgba(243,117,42,.95); transition: background .15s, transform .15s; }
.sa-submit:hover { background: var(--sa-orange-dk); transform: translateY(-1px); }
.sa-msg { padding: .8rem 1rem; border-radius: 12px; font-size: .85rem; margin-bottom: 1rem; }
.sa-msg.bad { background: rgba(214,52,75,.08); color: #A3202F; }
.sa-msg.ok { background: rgba(16,150,95,.1); color: #0B6B44; }
.sa-msg ul { margin: 0; padding-left: 1.1rem; }
.sa-back { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.4rem; font-size: .84rem; color: var(--sa-gray-600); text-decoration: none; }
.sa-back:hover { color: var(--sa-orange-dk); }
@media (max-width: 900px) {
  .sa-auth { grid-template-columns: 1fr; }
  .sa-auth-art { padding: 2rem 1.5rem; min-height: 0; gap: 1.5rem; }
  .sa-auth-art .foot { display: none; }
}


/* ── shared content forms (notices, resources, team) — .nf-* ── */
.nf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.25rem; align-items: start; }
  .nf-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 1.25rem; }
  .nf-sec { padding: 1.4rem 1.5rem; }
  .nf-sec + .nf-sec { border-top: 1px solid var(--sa-gray-100); }
  .nf-sec h6 { display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sa-gray-600); }
  .nf-sec h6 i { font-size: 1rem; color: var(--sa-orange); }
  .nf-title { font-family: var(--sa-font-d); font-size: 1.35rem !important; padding: .7rem .95rem; }
  .nf-sec .form-label { display: block; }
  .nf-count { float: right; font-size: .7rem; color: var(--sa-gray-400); font-weight: 500; }
  .nf-req { color: var(--sa-orange); }
  .nf-help { font-size: .74rem; color: var(--sa-gray-600); margin-top: .35rem; }
  .nf-types { display: flex; flex-wrap: wrap; gap: .4rem; }
  .nf-types input { position: absolute; opacity: 0; pointer-events: none; }
  .nf-types label { margin: 0; cursor: pointer; }
  .nf-types span { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px; border: 1px solid var(--sa-line); background: #fff; font-size: .82rem; font-weight: 600; color: var(--sa-navy); transition: all .15s; }
  .nf-types span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sa-gray-400); transition: background .15s; }
  .nf-types label:hover span { border-color: var(--sa-gray-400); }
  .nf-types input:checked + span { background: var(--sa-navy); border-color: var(--sa-navy); color: #fff; }
  .nf-types input:checked + span::before { background: var(--sa-orange); }
  .nf-types input:focus-visible + span { outline: 3px solid rgba(243,117,42,.35); outline-offset: 2px; }
  .nf-types.is-invalid span { border-color: var(--sa-bad); }
  .nf-switch { display: flex; align-items: flex-start; gap: .8rem; padding: .85rem .9rem; border-radius: 12px; border: 1px solid var(--sa-line); background: var(--sa-gray-50); cursor: pointer; margin: 0; transition: border-color .15s, background .15s; }
  .nf-switch + .nf-switch { margin-top: .55rem; }
  .nf-switch:hover { border-color: var(--sa-gray-400); }
  .nf-switch .form-check-input { margin: .15rem 0 0; width: 2.4em; height: 1.3em; flex: 0 0 auto; cursor: pointer; }
  .nf-switch b { display: block; font-size: .86rem; color: var(--sa-navy); }
  .nf-switch small { display: block; font-size: .74rem; color: var(--sa-gray-600); font-weight: 400; }
  .nf-status { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; border-radius: 14px; color: #fff; background: linear-gradient(130deg, var(--sa-navy), var(--sa-navy-light)); }
  .nf-status .dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 4px rgba(255,255,255,.12); }
  .nf-status b { display: block; font-size: .92rem; }
  .nf-status small { display: block; font-size: .74rem; color: rgba(255,255,255,.65); }
  .nf-status.live .dot { background: #34D399; } .nf-status.scheduled .dot { background: #FBBF24; }
  .nf-status.archived .dot { background: #9B96C4; } .nf-status.hidden .dot { background: #F87171; }
  .nf-drop { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 1.4rem 1rem; border-radius: 14px; border: 2px dashed var(--sa-line); background: var(--sa-gray-50); text-align: center; cursor: pointer; color: var(--sa-gray-600); font-size: .8rem; transition: all .15s; }
  .nf-drop:hover, .nf-drop.over { border-color: var(--sa-orange); background: rgba(243,117,42,.05); color: var(--sa-navy); }
  .nf-drop .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--sa-orange); font-size: 1.4rem; box-shadow: 0 8px 18px -12px rgba(26,23,78,.5); }
  .nf-drop b { font-size: .86rem; color: var(--sa-navy); }
  .nf-files { display: flex; flex-direction: column; gap: .45rem; margin-top: .75rem; }
  .nf-file { display: flex; align-items: center; gap: .65rem; padding: .5rem .55rem .5rem .6rem; border-radius: 11px; border: 1px solid var(--sa-line); background: #fff; font-size: .8rem; }
  .nf-file.is-new { border-style: dashed; border-color: rgba(243,117,42,.55); background: rgba(243,117,42,.04); }
  .nf-file .ic { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; background: var(--sa-gray-50); font-size: 1.3rem; overflow: hidden; }
  .nf-file .ic img { width: 100%; height: 100%; object-fit: cover; }
  .nf-file .tx { flex: 1; min-width: 0; }
  .nf-file .tx a, .nf-file .tx span { display: block; color: var(--sa-navy); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
  .nf-file .tx a:hover { color: var(--sa-orange-dk); }
  .nf-file .tx small { color: var(--sa-gray-600); font-size: .7rem; }
  .nf-file .rm { width: 30px; height: 30px; flex: 0 0 auto; border: 0; border-radius: 8px; background: none; color: var(--sa-gray-400); cursor: pointer; }
  .nf-file .rm:hover { background: rgba(214,52,75,.08); color: var(--sa-bad); }
  .nf-file.removing { opacity: .45; pointer-events: none; }
  .nf-actions { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.25rem; padding: .85rem 1.1rem; border-radius: 16px; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border: 1px solid var(--sa-line); box-shadow: 0 -10px 30px -24px rgba(26,23,78,.5); }
  .nf-actions .meta { font-size: .78rem; color: var(--sa-gray-600); }
  .nf-err { font-size: .76rem; color: var(--sa-bad); margin-top: .35rem; }
  @media (max-width: 1100px) { .nf-grid { grid-template-columns: 1fr; } .nf-side { position: static; } }

/* ── shared content lists — .nl-* ── */
.nl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
  .nl-head h3 { font-family: var(--sa-font-d); font-weight: 400; margin: 0; }
  .nl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1.25rem; }
  .nl-stat { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; border-radius: 16px; background: #fff; border: 1px solid var(--sa-line); cursor: pointer; text-align: left; transition: border-color .15s, transform .15s, box-shadow .15s; }
  .nl-stat:hover { transform: translateY(-2px); border-color: rgba(243,117,42,.45); box-shadow: 0 16px 30px -24px rgba(26,23,78,.5); }
  .nl-stat.on { border-color: var(--sa-orange); box-shadow: 0 0 0 3px rgba(243,117,42,.15); }
  .nl-stat .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; background: var(--tone-soft); color: var(--tone); flex: 0 0 auto; }
  .nl-stat b { display: block; font-family: var(--sa-font-d); font-weight: 400; font-size: 1.55rem; line-height: 1; color: var(--sa-navy); }
  .nl-stat span { font-size: .74rem; color: var(--sa-gray-600); font-weight: 600; }
  .nl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--sa-gray-100); }
  .nl-tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin-right: auto; }
  .nl-tab { border: 0; background: none; padding: .45rem .8rem; border-radius: 10px; font: 600 .82rem var(--sa-font); color: var(--sa-gray-600); cursor: pointer; }
  .nl-tab:hover { background: var(--sa-gray-50); color: var(--sa-navy); }
  .nl-tab.on { background: var(--sa-navy); color: #fff; }
  .nl-tab .c { margin-left: .3rem; font-size: .7rem; opacity: .7; }
  .nl-search { position: relative; }
  .nl-search i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--sa-gray-400); }
  .nl-search input { padding-left: 2.1rem; width: 260px; }
  .nl-bar .form-select { width: auto; min-width: 160px; max-width: 230px; }
  .nl-table td { padding-top: .85rem !important; padding-bottom: .85rem !important; }
  .nl-title { font-weight: 600; color: var(--sa-navy); text-decoration: none; display: block; max-width: 520px; line-height: 1.35; }
  .nl-title:hover { color: var(--sa-orange-dk); }
  .nl-sub { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .25rem; font-size: .74rem; color: var(--sa-gray-600); }
  .nl-sub i { color: var(--sa-gray-400); }
  .nl-new { font-size: .62rem; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--sa-orange); padding: .1rem .4rem; border-radius: 5px; margin-left: .35rem; vertical-align: 2px; }
  .nl-type { display: inline-block; padding: .25rem .6rem; border-radius: 999px; background: var(--sa-gray-100); color: var(--sa-navy); font-size: .74rem; font-weight: 600; white-space: nowrap; }
  .nl-date { font-size: .8rem; white-space: nowrap; color: var(--sa-navy); }
  .nl-date small { display: block; color: var(--sa-gray-400); font-size: .7rem; }
  .nl-act { display: inline-flex; gap: .3rem; }
  .nl-act .btn { width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; }
  .nl-empty { padding: 3rem 1rem; text-align: center; color: var(--sa-gray-600); }
  .nl-empty i { font-size: 2.4rem; color: var(--sa-line); display: block; margin-bottom: .5rem; }
  .nl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1.1rem; border-top: 1px solid var(--sa-gray-100); font-size: .8rem; color: var(--sa-gray-600); }
  .nl-pages { display: flex; gap: .25rem; }
  .nl-pages button { min-width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--sa-line); background: #fff; color: var(--sa-navy); font: 600 .8rem var(--sa-font); cursor: pointer; }
  .nl-pages button.on { background: var(--sa-orange); border-color: var(--sa-orange); color: #fff; }
  .nl-pages button:disabled { opacity: .45; cursor: default; }
  @media (max-width: 992px) { .nl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nl-search input { width: 100%; } .nl-search { flex: 1 1 200px; } .nl-hide-md { display: none; } }