/* public/css/shahkaar-theme.css
   Central Shahkaar UI foundation. Theme variables are injected by layouts/theme.blade.php. */

:root {
  --sk-font-size: 13px;
  --sk-font-family: "Plus Jakarta Sans", Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sk-header-height: 64px;
  --sk-content-max-width: 1320px;
  --sk-primary: #064e3b;
  --sk-primary-light: #065f46;
  --sk-primary-soft: #047857;
  --sk-accent: #22c55e;
  --sk-accent-hover: #16a34a;
  --sk-surface: #ffffff;
  --sk-bg: #f8fafc;
  --sk-text: #111827;
  --sk-muted: #64748b;
  --sk-border: #e2e8f0;
  --sk-danger: #dc2626;
  --sk-warning: #92400e;
  --sk-shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
  --sk-shadow-md: 0 10px 24px rgba(15, 23, 42, .12);
  --sk-shadow-lg: 0 24px 60px rgba(15, 23, 42, .22);
  --sk-radius: 14px;
  --sk-radius-lg: 18px;
  --sk-transition: .2s ease;
  --sk-dashboard-sidebar-bg: #064e3b;
  --sidebar-bg: #064e3b;
  --sidebar-active: rgba(255,255,255,.12);
}

html {
  font-size: var(--sk-font-size);
}

body {
  font-family: var(--sk-font-family);
  background: var(--sk-bg);
  color: var(--sk-text);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea {
  font: inherit;
}

table {
  font-size: 0.96rem;
}

small, .text-muted, .sk-muted {
  line-height: 1.45;
}

body.shahkaar-has-header {
  padding-top: var(--sk-header-height);
}

body.shahkaar-dashboard-page {
  padding-top: 0;
}

.sk-page-shell {
  min-height: 100vh;
  background: var(--sk-bg);
}

.sk-main,
.shahkaar-main {
  padding: 18px;
  min-height: calc(100vh - var(--sk-header-height));
}

.sk-container {
  max-width: var(--sk-content-max-width);
  margin: 0 auto;
}

/* Header / topbar */
.shahkaar-common-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--sk-header-height);
  background: linear-gradient(135deg, var(--sk-primary), var(--sk-primary-light));
  color: #fff;
  z-index: 2100;
  box-shadow: var(--sk-shadow-md);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.shahkaar-header-inner {
  height: 100%;
  max-width: var(--sk-content-max-width);
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.shahkaar-header-left,
.shahkaar-header-right,
.shahkaar-brand,
.shahkaar-meta,
.shahkaar-user,
.shahkaar-actions,
.shahkaar-hall-switch {
  display: flex;
  align-items: center;
}

.shahkaar-header-left {
  gap: 12px;
  min-width: 0;
}

.shahkaar-header-right {
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.shahkaar-menu-btn,
.shahkaar-action,
.shahkaar-search-btn,
.shahkaar-hall-switch button,
.shahkaar-logout-btn {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color: #fff;
  border-radius: 12px;
  min-height: 36px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: var(--sk-transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

.shahkaar-menu-btn {
  width: 38px;
  padding: 0;
  font-size: 20px;
}

.shahkaar-menu-btn:hover,
.shahkaar-action:hover,
.shahkaar-search-btn:hover,
.shahkaar-hall-switch button:hover,
.shahkaar-logout-btn:hover {
  background: rgba(255,255,255,.18);
  transform: translateY(-1px);
}

.shahkaar-brand {
  gap: 10px;
  min-width: 0;
}

.shahkaar-logo,
.shahkaar-logo-wrap {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(255,255,255,.42);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

.shahkaar-logo img,
.shahkaar-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.shahkaar-logo-fallback {
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .08em;
  color: var(--sk-primary);
}

.shahkaar-brand-text {
  min-width: 0;
  line-height: 1.18;
}

.shahkaar-brand-title {
  font-family: var(--sk-font-family);
  font-size: 15.5px;
  font-weight: 850;
  letter-spacing: .01em;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}

.shahkaar-brand-subtitle {
  font-size: 10.8px;
  font-weight: 750;
  color: rgba(255,255,255,.86);
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
  letter-spacing: .02em;
}

.shahkaar-meta {
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
}

.shahkaar-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-size: 11.5px;
  font-weight: 850;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shahkaar-pill span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.shahkaar-user {
  gap: 8px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  min-height: 36px;
}

.shahkaar-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--sk-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  font-size: 11px;
  flex: 0 0 auto;
}

.shahkaar-user-name {
  font-size: 12px;
  font-weight: 850;
  max-width: 135px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shahkaar-view-only-badge {
  background: rgba(146,64,14,.22);
  border-color: rgba(253,186,116,.38);
}

.shahkaar-hall-switch {
  gap: 6px;
}

.shahkaar-hall-switch select {
  height: 36px;
  max-width: 210px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.96);
  color: var(--sk-text);
  border-radius: 12px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 850;
  outline: none;
}

/* Sidebar */
.sk-sidebar {
  position: fixed;
  top: var(--sk-header-height);
  left: 0;
  width: 282px;
  height: calc(100vh - var(--sk-header-height));
  background: var(--sk-dashboard-sidebar-bg, var(--sk-primary));
  color: #fff;
  box-shadow: var(--sk-shadow-lg);
  transform: translateX(-105%);
  transition: transform .25s ease;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.08);
}

body.shahkaar-dashboard-page .sk-sidebar {
  top: 0;
  height: 100vh;
}

.sk-sidebar.open,
.sk-sidebar:not(.-translate-x-full) {
  transform: translateX(0);
}

.sk-sidebar-head {
  padding: 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sk-sidebar-title {
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.72);
}

.sk-sidebar-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.sk-sidebar-nav {
  padding: 10px;
  overflow: auto;
  flex: 1;
}

.sk-sidebar-section {
  font-size: 10.5px;
  font-weight: 950;
  color: rgba(255,255,255,.48);
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 14px 10px 7px;
}

.sk-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 11px;
  color: rgba(255,255,255,.84);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 850;
  border: 1px solid transparent;
  transition: var(--sk-transition);
}

.sk-sidebar-link:hover,
.sk-sidebar-link.active {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.10);
  color: #fff;
}

.sk-sidebar-link-icon {
  width: 21px;
  text-align: center;
  opacity: .86;
}

.sk-sidebar-empty {
  padding: 16px 10px;
  color: rgba(255,255,255,.65);
  font-size: 12px;
  font-weight: 750;
}

#overlay,
.sk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.45);
  z-index: 1900;
  display: none;
}

#overlay:not(.hidden),
.sk-overlay.show {
  display: block;
}

/* Global search */
.shahkaar-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.58);
  backdrop-filter: blur(3px);
  z-index: 3000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 76px 16px 18px;
}

.shahkaar-search-overlay.show {
  display: flex;
}

.shahkaar-search-box {
  width: min(900px, 100%);
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--sk-shadow-lg);
  overflow: hidden;
  border: 1px solid var(--sk-border);
}

.shahkaar-search-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--sk-border);
  background: #fff;
}

.shahkaar-search-head input {
  flex: 1;
  border: 0;
  outline: 0;
  font-size: 14px;
  font-weight: 850;
  color: var(--sk-text);
  min-width: 0;
}

.shahkaar-search-close {
  border: 1px solid var(--sk-border);
  background: #fff;
  border-radius: 12px;
  width: 36px;
  height: 34px;
  cursor: pointer;
  font-weight: 950;
  color: var(--sk-text);
}

.shahkaar-search-results {
  max-height: 66vh;
  overflow: auto;
  padding: 10px;
  background: #f8fafc;
}

.shahkaar-search-result {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--sk-border);
  text-decoration: none;
  color: var(--sk-text);
  margin-bottom: 8px;
  transition: var(--sk-transition);
}

.shahkaar-search-result:hover {
  border-color: var(--sk-accent);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15,23,42,.07);
}

.shahkaar-search-result-title {
  font-size: 13px;
  font-weight: 950;
}

.shahkaar-search-result small {
  display: block;
  color: var(--sk-muted);
  font-size: 11px;
  font-weight: 800;
  margin-top: 2px;
}

.shahkaar-search-empty {
  padding: 22px;
  text-align: center;
  color: var(--sk-muted);
  font-weight: 850;
}

/* Generic RBAC/view-only helpers */
.shahkaar-ui-disabled,
.shahkaar-view-only-disabled {
  pointer-events: none !important;
  opacity: .52 !important;
  filter: grayscale(.25);
}

@media (max-width: 980px) {
  .shahkaar-header-inner {
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
  }

  .shahkaar-brand-title {
  font-family: var(--sk-font-family);
  font-size: 15.5px;
  font-weight: 850;
  letter-spacing: .01em;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}

  .shahkaar-brand-subtitle {
  font-size: 10.8px;
  font-weight: 750;
  color: rgba(255,255,255,.86);
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
  letter-spacing: .02em;
}

  .shahkaar-pill,
  .shahkaar-action,
  .shahkaar-search-btn {
    font-size: 11px;
    padding: 7px 9px;
  }

  .shahkaar-hall-switch select {
    max-width: 160px;
  }

  .sk-sidebar {
    width: min(88vw, 300px);
  }
}

@media (max-width: 720px) {
  :root { --sk-header-height: 74px; }
  .shahkaar-header-inner { align-items: flex-start; flex-wrap: wrap; height: auto; min-height: var(--sk-header-height); }
  .shahkaar-header-right { width: 100%; justify-content: flex-start; gap: 6px; }
  .shahkaar-meta { display: none; }
  .shahkaar-user-name { max-width: 120px; }
}

@media print {
  .no-print,
  .shahkaar-common-header,
  .sk-sidebar,
  #overlay,
  .sk-overlay,
  .shahkaar-search-overlay {
    display: none !important;
  }
  body.shahkaar-has-header { padding-top: 0 !important; }
  .sk-main,
  .shahkaar-main { padding: 0 !important; }
}

/* Final shared heading/table contract.
   Content headings stay white; only the fixed application header may be green. */
body:not(.shahkaar-print-page) > header:not(.shahkaar-common-header),
body:not(.shahkaar-print-page) .page-head,
body:not(.shahkaar-print-page) .page-header,
body:not(.shahkaar-print-page) .page-heading,
body:not(.shahkaar-print-page) .sk-page-heading,
body:not(.shahkaar-print-page) .sk-page-hall-title,
body:not(.shahkaar-print-page) .sk-card-head,
body:not(.shahkaar-print-page) .sk-pro-card-head,
body:not(.shahkaar-print-page) .card-head,
body:not(.shahkaar-print-page) .card-header,
body:not(.shahkaar-print-page) .afl-head,
body:not(.shahkaar-print-page) .afl-page-head,
body:not(.shahkaar-print-page) .menu-form-header,
body:not(.shahkaar-print-page) .menu-card-header,
body:not(.shahkaar-print-page) .section-header,
body:not(.shahkaar-print-page) .section-title,
body:not(.shahkaar-print-page) .box-title,
body:not(.shahkaar-print-page) .header-section,
body:not(.shahkaar-print-page) .header-bar,
body:not(.shahkaar-print-page) .top-header,
body:not(.shahkaar-print-page) .header,
body:not(.shahkaar-print-page) .head {
  background: #fff !important;
  background-image: none !important;
  color: var(--sk-text) !important;
  border-color: var(--sk-border) !important;
}

body:not(.shahkaar-print-page) .page-head :is(h1,h2,h3,p),
body:not(.shahkaar-print-page) .page-header :is(h1,h2,h3,p),
body:not(.shahkaar-print-page) .page-heading :is(h1,h2,h3,p),
body:not(.shahkaar-print-page) .sk-page-heading :is(h1,h2,h3,p),
body:not(.shahkaar-print-page) .sk-page-hall-title :is(h1,h2,h3,p,strong),
body:not(.shahkaar-print-page) .sk-card-head :is(h1,h2,h3,p),
body:not(.shahkaar-print-page) .sk-pro-card-head :is(h1,h2,h3,p),
body:not(.shahkaar-print-page) .afl-head :is(h1,h2,h3,p),
body:not(.shahkaar-print-page) .afl-page-head :is(h1,h2,h3,p) {
  color: inherit !important;
}

body:not(.shahkaar-print-page) table thead th,
body:not(.shahkaar-print-page) table thead td,
body:not(.shahkaar-print-page) .sk-table th,
body:not(.shahkaar-print-page) .sk-wide-table th {
  background: var(--sk-primary-light) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* Unified page chrome: only the fixed application header remains green. */
body:not(.shahkaar-print-page) .sk-card-head,
body:not(.shahkaar-print-page) .sk-pro-card-head,
body:not(.shahkaar-print-page) .sk-page-heading,
body:not(.shahkaar-print-page) .page-heading,
body:not(.shahkaar-print-page) .page-header,
body:not(.shahkaar-print-page) .card-header {
  background: #fff !important;
  background-image: none !important;
  color: var(--sk-text) !important;
  border-color: var(--sk-border) !important;
}

body:not(.shahkaar-print-page) .sk-card-head,
body:not(.shahkaar-print-page) .sk-page-heading,
body:not(.shahkaar-print-page) .page-heading {
  padding: 0 0 16px;
  border-bottom: 1px solid var(--sk-border);
}

body:not(.shahkaar-print-page) .sk-pro-card-head {
  border-bottom: 1px solid var(--sk-border);
}

body:not(.shahkaar-print-page) .sk-pro-card-title,
body:not(.shahkaar-print-page) .sk-card-head h1,
body:not(.shahkaar-print-page) .sk-card-head h2,
body:not(.shahkaar-print-page) .sk-page-heading h1,
body:not(.shahkaar-print-page) .page-heading h1 {
  color: var(--sk-text) !important;
  background: transparent !important;
}

body:not(.shahkaar-print-page) .sk-pro-card-subtitle,
body:not(.shahkaar-print-page) .sk-card-head p,
body:not(.shahkaar-print-page) .sk-page-heading p,
body:not(.shahkaar-print-page) .page-heading p {
  color: var(--sk-muted) !important;
}

/* All screen tables use one clearly colored header row. */
body:not(.shahkaar-print-page) table thead th,
body:not(.shahkaar-print-page) .sk-table th,
body:not(.shahkaar-print-page) .sk-wide-table th {
  background: var(--sk-primary-light) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.16) !important;
  font-weight: 900;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

body:not(.shahkaar-print-page) table thead th a,
body:not(.shahkaar-print-page) table thead th button {
  color: inherit !important;
}


/* B3 shared blade cleanup helpers */
.sk-card {
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-lg);
  box-shadow: var(--sk-shadow-sm);
  padding: 18px;
  margin-bottom: 18px;
}

.sk-narrow-card { max-width: 760px; margin-left: auto; margin-right: auto; }


.sk-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.sk-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 950;
  color: var(--sk-text);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.sk-title-divider { color: #94a3b8; font-weight: 750; }
.sk-title-hall { color: var(--sk-primary-light); font-size: .86em; font-weight: 900; }
.sk-heading-with-hall { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sk-auto-hall-context { font-size: .82em; }

.sk-subtitle {
  margin: 5px 0 0;
  color: var(--sk-muted);
  font-size: 13px;
  font-weight: 700;
}

.sk-actions,
.sk-inline-form,
.sk-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sk-actions { margin-top: 16px; }
.sk-filter-row { margin-bottom: 16px; }
.sk-mt { margin-top: 16px; }

.sk-field { margin-bottom: 14px; }
.sk-field label,
.sk-filter-row label {
  display: block;
  font-size: 12px;
  font-weight: 900;
  color: var(--sk-muted);
  margin-bottom: 6px;
}

.sk-input {
  min-height: 38px;
  border: 1px solid var(--sk-border);
  border-radius: 11px;
  padding: 8px 10px;
  background: #fff;
  color: var(--sk-text);
  font-size: 13px;
  font-weight: 750;
  outline: none;
}

textarea.sk-input {
  min-height: 96px;
  resize: vertical;
}

.sk-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.sk-form-grid .sk-field { margin-bottom: 0; }
.sk-field-full { grid-column: 1 / -1; }
.sk-help { margin-top: 5px; color: var(--sk-muted); font-size: 11.5px; font-weight: 650; }
.sk-required { color: var(--sk-danger); }

.sk-alert {
  margin-bottom: 16px;
  border: 1px solid var(--sk-border);
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 700;
}

.sk-alert ul { margin: 7px 0 0 18px; }
.sk-alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.sk-alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.sk-badge-success { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.sk-badge-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.sk-badge-muted { background: #f8fafc; color: #64748b; }
.sk-text-danger { color: var(--sk-danger); }
.sk-text-muted { color: var(--sk-muted); }
.sk-nowrap { white-space: nowrap; }
.sk-checkbox { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.sk-checkbox input { width: 17px; height: 17px; accent-color: var(--sk-primary-light); }

.sk-input:focus {
  border-color: var(--sk-accent);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
}

.sk-input-sm { min-height: 32px; padding: 5px 8px; font-size: 12px; }

.sk-btn {
  min-height: 36px;
  border: 1px solid var(--sk-border);
  border-radius: 11px;
  padding: 8px 12px;
  background: #fff;
  color: var(--sk-text);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: var(--sk-transition);
}

.sk-btn:hover { transform: translateY(-1px); box-shadow: var(--sk-shadow-sm); }
.sk-btn-primary { background: var(--sk-accent); border-color: var(--sk-accent); color: #fff; }
.sk-btn-soft { background: #f8fafc; color: var(--sk-primary); }
.sk-btn-xs { min-height: 28px; padding: 5px 8px; border-radius: 9px; font-size: 11.5px; }
.sk-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.sk-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius);
  background: #fff;
}

.sk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sk-table th,
.sk-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--sk-border);
  text-align: left;
  vertical-align: middle;
}

.sk-table th {
  background: #f8fafc;
  color: var(--sk-primary);
  font-weight: 950;
  white-space: nowrap;
}

.sk-table tr:last-child td { border-bottom: 0; }
.sk-empty,
.sk-empty-cell {
  padding: 22px;
  text-align: center;
  color: var(--sk-muted);
  font-weight: 850;
}

.sk-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid var(--sk-border);
  color: var(--sk-primary);
  padding: 5px 9px;
  font-size: 11.5px;
  font-weight: 900;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.sk-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.sk-stat {
  border: 1px solid var(--sk-border);
  background: #f8fafc;
  border-radius: var(--sk-radius);
  padding: 13px;
}
.sk-stat span { display: block; color: var(--sk-muted); font-size: 11.5px; font-weight: 900; }
.sk-stat strong { display: block; color: var(--sk-primary); font-size: 18px; font-weight: 1000; margin-top: 4px; }
.sk-smart-form { margin-top: 4px; }
.sk-smart-stat-grid { margin-bottom: 18px; }
.sk-smart-stat-grid .sk-stat:first-child { grid-column: span 2; }
.sk-smart-stat-grid .sk-stat strong { font-size: 15px; line-height: 1.35; }
.sk-smart-unit { display: block; margin-top: 4px; color: var(--sk-muted); font-size: 11px; font-weight: 800; }
.sk-col-serial { width: 72px; text-align: center !important; }
#smartSuggestionTable :is(input, select).sk-input { width: 100%; min-width: 112px; }
#smartSuggestionTable tfoot th { background: var(--sk-primary-light) !important; color: #fff !important; }
.text-right { text-align: right !important; }
.sk-pagination { padding-top: 14px; }

/* Keep legacy page content below fixed topbar even when local CSS has its own body padding. */
body.shahkaar-has-header .main-container,
body.shahkaar-has-header .container,
body.shahkaar-has-header .wrap,
body.shahkaar-has-header .page-wrap {
  scroll-margin-top: calc(var(--sk-header-height) + 14px);
}

/* Hide accidental empty legacy topbars/sidebars left by older module partials. */
.shahkaar-legacy-empty,
.academic-ledger-topbar.is-disabled,
.academic-ledger-sidebar.is-disabled {
  display: none !important;
}

@media (max-width: 720px) {
  .sk-card { padding: 14px; border-radius: var(--sk-radius); }
  .sk-title { font-size: 18px; }
  .sk-inline-form, .sk-filter-row { width: 100%; }
  .sk-input { width: 100%; }
  .sk-form-grid { grid-template-columns: 1fr; }
  .sk-field-full { grid-column: auto; }
}

/* B4 CSS consolidation: legacy blade variable aliases.
   Old blades previously declared their own :root colors/fonts. Those local
   variable blocks are now removed where safe, and all legacy variable names
   point to the single Shahkaar theme source. */
:root {
  --accent: var(--sk-accent);
  --accent-dark: var(--sk-accent-hover);
  --accent-hover: var(--sk-accent-hover);
  --accentDark: var(--sk-accent-hover);
  --amu-green: var(--sk-primary);
  --amu-green-dark: var(--sk-primary-light);
  --bg: var(--sk-bg);
  --bg-main: var(--sk-bg);
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-soft: #dbeafe;
  --border: var(--sk-border);
  --border-strong: #cbd5e1;
  --brand: var(--sk-primary);
  --brand-dark: var(--sk-primary-light);
  --btn-blue: #2563eb;
  --btn-blue-dark: #1d4ed8;
  --card: var(--sk-surface);
  --card-bg: var(--sk-surface);
  --card2: #f8fafc;
  --chip: #f1f5f9;
  --chipActive: #dcfce7;
  --danger: var(--sk-danger);
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --danger-dark: #b91c1c;
  --danger-soft: #fee2e2;
  --dangerBg: #fef2f2;
  --dangerBorder: #fecaca;
  --dangerText: var(--sk-danger);
  --date-border: var(--sk-border);
  --field: #ffffff;
  --focus: 0 0 0 3px rgba(22, 163, 74, .16);
  --font: var(--sk-font-family);
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;
  --gray-soft: #f1f5f9;
  --green: var(--sk-accent);
  --green-dark: var(--sk-accent-hover);
  --green-soft: #dcfce7;
  --green2: var(--sk-accent);
  --header-bg: var(--sk-primary);
  --infoBd: #bfdbfe;
  --infoBg: #eff6ff;
  --infoText: #1d4ed8;
  --input-bg: #ffffff;
  --input-border: var(--sk-border);
  --input-focus: 0 0 0 3px rgba(22, 163, 74, .16);
  --label: var(--sk-muted);
  --main-bg: var(--sk-bg);
  --muted: var(--sk-muted);
  --ok: var(--sk-accent);
  --ok-dark: var(--sk-accent-hover);
  --okBg: #f0fdf4;
  --okBorder: #bbf7d0;
  --okText: #166534;
  --orange: #d97706;
  --orange-soft: #ffedd5;
  --primary: var(--sk-primary);
  --primary-dark: var(--sk-primary-light);
  --primary-soft: var(--sk-primary-soft);
  --radius: var(--sk-radius);
  --red: var(--sk-danger);
  --red-dark: #b91c1c;
  --red-soft: var(--sk-danger);
  --section: #f8fafc;
  --section-bg: #f8fafc;
  --shadow: var(--sk-shadow-sm);
  --shadow-lg: var(--sk-shadow-lg);
  --shadow-md: var(--sk-shadow-md);
  --shadow-sm: var(--sk-shadow-sm);
  --shadow-soft: var(--sk-shadow-sm);
  --shadow2: var(--sk-shadow-md);
  --sidebar-active: rgba(255,255,255,.12);
  --sidebar-bg: var(--sk-dashboard-sidebar-bg, var(--sk-primary));
  --soft: var(--sk-primary);
  --soft-bg: #f8fafc;
  --success: var(--sk-accent);
  --success-soft: #dcfce7;
  --successbd: #bbf7d0;
  --successbg: #f0fdf4;
  --successtext: #166534;
  --text: var(--sk-text);
  --text-main: var(--sk-text);
  --text-muted: var(--sk-muted);
  --text-soft: var(--sk-muted);
  --total-bg: #f8fafc;
  --transition: var(--sk-transition);
  --warn: var(--sk-warning);
  --warn-dark: var(--sk-warning);
  --warnbd: #fed7aa;
  --warnbg: #fff7ed;
  --warning: var(--sk-warning);
  --warning-soft: #fef3c7;
  --warntext: #9a3412;
  --white: var(--sk-surface);
}


/* B4 global typography / component normalization.
   Keep page-specific sizing/print CSS intact, but make fonts and common colors consistent. */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--sk-font-size); }
body {
  margin: 0;
  font-family: var(--sk-font-family);
  background: var(--sk-bg);
  color: var(--sk-text);
  font-size: 1rem;
  line-height: 1.52;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body, button, input, select, textarea, table { font-family: var(--sk-font-family); }
button, input, select, textarea { font-size: inherit; }

/* Standard page containers used across old blades. */
.wrap, .container, .main-container, .page-wrap {
  color: var(--sk-text);
}

/* Standardize old table/card/form surfaces without disturbing print-specific pages. */
body:not(.shahkaar-print-page) .card,
body:not(.shahkaar-print-page) .box,
body:not(.shahkaar-print-page) .panel,
body:not(.shahkaar-print-page) .section-card {
  background-color: var(--sk-surface);
  border-color: var(--sk-border);
}

body:not(.shahkaar-print-page) input,
body:not(.shahkaar-print-page) select,
body:not(.shahkaar-print-page) textarea {
  border-color: var(--sk-border);
  color: var(--sk-text);
}

body:not(.shahkaar-print-page) table {
  color: var(--sk-text);
}

body:not(.shahkaar-print-page) thead th {
  font-family: var(--sk-font-family);
}

/* Global font readability; individual page-specific sizes still work. */
.sk-main, .shahkaar-main, .wrap, .container, .main-container, .page-wrap {
  font-size: 1rem;
}

/* Common action colors mapped to one theme. */
.btn-primary, .btn-add, .btn-save, .btn-submit,
button[type="submit"]:not(.shahkaar-logout-btn) {
  background-color: var(--sk-accent);
  color: #fff;
}
.btn-danger, .btn-delete, .btn-del {
  background-color: var(--sk-danger);
  color: #fff;
}


/* B4.2 topbar cleanup: All Pages button + user dropdown */
.shahkaar-common-header .shahkaar-meta {
  display: none !important;
}

.shahkaar-header-right {
  gap: 10px;
}

.shahkaar-all-pages-btn {
  min-width: 104px;
}

.shahkaar-user-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.shahkaar-user-trigger {
  border: 1px solid rgba(255,255,255,.16);
  cursor: pointer;
  color: #fff;
  font-family: var(--sk-font-family);
}

.shahkaar-user-trigger:focus-visible,
.shahkaar-all-pages-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,.82);
  outline-offset: 2px;
}

.shahkaar-user-caret {
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  color: rgba(255,255,255,.88);
  margin-left: 1px;
  transform: translateY(-1px);
}

.shahkaar-user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 172px;
  background: #fff;
  color: var(--sk-text);
  border: 1px solid var(--sk-border);
  border-radius: 14px;
  box-shadow: var(--sk-shadow-lg);
  padding: 8px;
  display: none;
  z-index: 3200;
}

.shahkaar-user-menu.open .shahkaar-user-dropdown {
  display: block;
}

.shahkaar-user-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 18px;
  width: 11px;
  height: 11px;
  background: #fff;
  border-left: 1px solid var(--sk-border);
  border-top: 1px solid var(--sk-border);
  transform: rotate(45deg);
}

.shahkaar-user-dropdown form {
  margin: 0;
}

.shahkaar-user-dropdown-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: #b91c1c;
  padding: 10px 11px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  font-family: var(--sk-font-family);
}

.shahkaar-user-dropdown-item:hover {
  background: #fef2f2;
  color: #991b1b;
}

.shahkaar-search-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sk-border);
  background: #fff;
}

.shahkaar-search-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sk-primary);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.1;
}

.shahkaar-search-subtitle {
  color: var(--sk-muted);
  font-size: 11.5px;
  font-weight: 750;
  margin-top: 3px;
}

.shahkaar-search-count {
  flex-shrink: 0;
  border: 1px solid var(--sk-border);
  background: #f8fafc;
  color: var(--sk-primary);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.shahkaar-all-pages-results {
  padding: 10px;
}

.shahkaar-all-pages-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.shahkaar-all-page-link {
  margin: 0;
  min-height: 44px;
}

.shahkaar-all-page-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: #ecfdf5;
  color: var(--sk-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.shahkaar-all-page-text {
  min-width: 0;
  flex: 1;
}

.shahkaar-page-usage-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 950;
  color: #475569;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  padding: 3px 6px;
  border-radius: 999px;
}

.shahkaar-all-page-link:hover .shahkaar-page-usage-badge {
  color: #fff;
  background: var(--sk-primary);
  border-color: var(--sk-primary);
}

@media (max-width: 920px) {
  .shahkaar-all-pages-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .shahkaar-all-pages-list {
    grid-template-columns: 1fr;
  }

  .shahkaar-search-titlebar {
    align-items: flex-start;
    flex-direction: column;
  }

  .shahkaar-all-pages-btn span:last-child,
  .shahkaar-user-name {
    display: none;
  }

  .shahkaar-all-pages-btn {
    min-width: auto;
  }
}

/* B4.2 Header reference style: compact brand row + full-width All Pages search */
:root {
  --sk-header-height: 118px;
}

body.shahkaar-has-header {
  padding-top: var(--sk-header-height);
}

.shahkaar-reference-header {
  height: var(--sk-header-height);
  background: #064e3b;
  background-image: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
}

.shahkaar-header-topline,
.shahkaar-header-searchline {
  max-width: var(--sk-content-max-width);
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.shahkaar-header-topline {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.shahkaar-header-searchline {
  height: 52px;
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}

.shahkaar-reference-header .shahkaar-header-left,
.shahkaar-reference-header .shahkaar-header-right {
  display: flex;
  align-items: center;
}

.shahkaar-reference-header .shahkaar-header-left {
  gap: 12px;
  min-width: 0;
}

.shahkaar-reference-header .shahkaar-header-right {
  gap: 10px;
  flex: 0 0 auto;
}

.shahkaar-reference-header .shahkaar-menu-btn {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
  box-shadow: none;
}

.shahkaar-reference-brand {
  text-decoration: none;
  color: #fff;
  gap: 10px;
  min-width: 0;
}

.shahkaar-reference-logo {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.shahkaar-reference-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.shahkaar-reference-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
  min-width: 0;
}

.shahkaar-reference-brand-title {
  color: #fff;
  font-family: var(--sk-font-family);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: .145em;
  text-transform: uppercase;
  white-space: nowrap;
}

.shahkaar-reference-brand-subtitle {
  color: #fff;
  font-family: var(--sk-font-family);
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 1;
}

.shahkaar-reference-header .shahkaar-user-menu {
  position: relative;
}

.shahkaar-reference-header .shahkaar-user-trigger {
  min-height: 42px;
  height: 42px;
  padding: 6px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #dbe4ef;
  color: #064e3b;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .10);
  gap: 9px;
}

.shahkaar-reference-header .shahkaar-user-trigger:hover {
  background: #fff;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.shahkaar-reference-header .shahkaar-user-avatar {
  width: 29px;
  height: 29px;
  border-radius: 9px;
  background: #047857;
  color: #fff;
  font-weight: 900;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.shahkaar-reference-header .shahkaar-user-name {
  color: #064e3b;
  font-size: 13px;
  font-weight: 850;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shahkaar-reference-header .shahkaar-user-caret {
  color: #64748b;
  font-size: 19px;
  line-height: 1;
  transform: translateY(-1px);
}

.shahkaar-search-field {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #d8e2ee;
  background: #f8fafc;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 14px;
  text-align: left;
  cursor: text;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.shahkaar-search-field:hover,
.shahkaar-search-field:focus {
  background: #fff;
  border-color: #b7c8da;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .12);
  outline: none;
}

.shahkaar-search-field-icon {
  color: #64748b;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  width: 22px;
  transform: rotate(-15deg);
}

.shahkaar-search-field-placeholder {
  font-size: 12.5px;
  font-weight: 650;
  color: #64748b;
  line-height: 1;
}

.shahkaar-reference-header .shahkaar-user-dropdown {
  top: calc(100% + 9px);
  right: 0;
}

@media (max-width: 768px) {
  :root { --sk-header-height: 126px; }

  .shahkaar-header-topline {
    height: 72px;
    gap: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .shahkaar-header-searchline {
    height: 54px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .shahkaar-reference-logo {
    width: 44px;
    height: 44px;
  }

  .shahkaar-reference-brand-title {
    font-size: 17px;
    letter-spacing: .12em;
  }

  .shahkaar-reference-brand-subtitle {
    font-size: 8.8px;
  }

  .shahkaar-reference-header .shahkaar-user-name {
    display: none;
  }

  .shahkaar-reference-header .shahkaar-user-trigger {
    padding: 6px 9px;
  }
}

/* B4.4 definitive header style fix: user reference layout + old CSS override protection */
:root { --sk-header-height: 120px; --sk-primary: #064e3b; --sk-accent: #16a34a; }
body.shahkaar-has-header { padding-top: var(--sk-header-height) !important; }
body.shahkaar-dashboard-page { padding-top: 0 !important; }
.shahkaar-common-header.shahkaar-reference-header {
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
  height: var(--sk-header-height) !important; z-index: 5000 !important;
  background: transparent !important; color: #fff !important; border: 0 !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.10) !important;
  font-family: "Plus Jakarta Sans", Inter, "Segoe UI", Arial, sans-serif !important;
}
.shahkaar-header-topline {
  height: 64px !important; max-width: none !important; width: 100% !important;
  margin: 0 !important; padding: 0 14px !important; display: flex !important;
  align-items: center !important; justify-content: space-between !important; gap: 14px !important;
  background: #064e3b !important; background-image: linear-gradient(135deg,#064e3b 0%,#065f46 100%) !important;
  box-sizing: border-box !important;
}
.shahkaar-header-left, .shahkaar-header-right { display:flex !important; align-items:center !important; gap:10px !important; min-width:0 !important; }
.shahkaar-menu-btn {
  width: 38px !important; height: 38px !important; min-width: 38px !important; padding: 0 !important;
  display: inline-flex !important; align-items:center !important; justify-content:center !important;
  border-radius: 11px !important; border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.12) !important; color:#fff !important;
  font-size: 22px !important; font-weight: 900 !important; line-height: 1 !important; cursor:pointer !important;
  box-shadow: none !important;
}
.shahkaar-reference-brand { display:flex !important; align-items:center !important; gap:10px !important; color:#fff !important; text-decoration:none !important; min-width:0 !important; }
.shahkaar-reference-logo { width:50px !important; height:50px !important; min-width:50px !important; border-radius:13px !important; background:#fff !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; border:1px solid rgba(255,255,255,.58) !important; box-shadow:0 8px 18px rgba(0,0,0,.18) !important; }
.shahkaar-reference-logo img { width:100% !important; height:100% !important; object-fit:contain !important; padding:4px !important; box-sizing:border-box !important; display:block !important; }
.shahkaar-reference-brand-text { display:flex !important; flex-direction:column !important; gap:3px !important; line-height:1 !important; min-width:0 !important; }
.shahkaar-reference-brand-title { color:#fff !important; font-size:22px !important; font-weight:950 !important; letter-spacing:.14em !important; line-height:1 !important; text-transform:uppercase !important; white-space:nowrap !important; }
.shahkaar-reference-brand-subtitle { color:#fff !important; font-size:10.5px !important; font-weight:900 !important; letter-spacing:.045em !important; line-height:1 !important; text-transform:uppercase !important; white-space:nowrap !important; opacity:1 !important; }
.shahkaar-reference-header .shahkaar-user-menu { position:relative !important; display:inline-flex !important; align-items:center !important; z-index: 5200 !important; }
.shahkaar-reference-header .shahkaar-user-trigger { height:42px !important; min-height:42px !important; padding:6px 12px !important; border-radius:12px !important; background:#fff !important; border:1px solid #dbe4ef !important; color:#064e3b !important; box-shadow:0 4px 12px rgba(15,23,42,.10) !important; display:inline-flex !important; align-items:center !important; gap:9px !important; cursor:pointer !important; font-family:inherit !important; }
.shahkaar-reference-header .shahkaar-user-avatar { width:29px !important; height:29px !important; border-radius:9px !important; background:#047857 !important; color:#fff !important; font-weight:900 !important; font-size:12.5px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
.shahkaar-reference-header .shahkaar-user-name { color:#064e3b !important; font-size:13px !important; font-weight:850 !important; max-width:170px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
.shahkaar-reference-header .shahkaar-user-caret { color:#64748b !important; font-size:20px !important; line-height:1 !important; transform:translateY(-1px) !important; }
.shahkaar-user-dropdown[hidden] { display:none !important; }
.shahkaar-reference-header .shahkaar-user-menu:not(.open):not(.is-open) > .shahkaar-user-dropdown { display:none !important; }
.shahkaar-reference-header .shahkaar-user-menu.open > .shahkaar-user-dropdown, .shahkaar-reference-header .shahkaar-user-menu.is-open > .shahkaar-user-dropdown { display:block !important; }
.shahkaar-reference-header .shahkaar-user-dropdown { position:absolute !important; top:calc(100% + 9px) !important; right:0 !important; min-width:150px !important; background:#fff !important; color:#0f172a !important; border:1px solid #dbe4ef !important; border-radius:12px !important; box-shadow:0 20px 45px rgba(15,23,42,.20) !important; padding:7px !important; z-index:5300 !important; }
.shahkaar-reference-header .shahkaar-user-dropdown form { margin:0 !important; }
.shahkaar-reference-header .shahkaar-user-dropdown-item { width:100% !important; border:0 !important; background:transparent !important; color:#b91c1c !important; padding:10px 11px !important; border-radius:9px !important; font-size:13px !important; font-weight:900 !important; line-height:1.1 !important; cursor:pointer !important; display:flex !important; align-items:center !important; gap:8px !important; text-align:left !important; font-family:inherit !important; }
.shahkaar-reference-header .shahkaar-user-dropdown-item:hover { background:#fef2f2 !important; color:#991b1b !important; }
.shahkaar-header-searchline { height:56px !important; max-width:none !important; width:100% !important; margin:0 !important; padding:8px 36px !important; display:flex !important; align-items:center !important; background:#f6f8fb !important; border-bottom:1px solid #e2e8f0 !important; box-sizing:border-box !important; }
.shahkaar-search-field { width:100% !important; height:40px !important; border-radius:10px !important; border:1px solid #d8e2ee !important; background:#f8fafc !important; color:#64748b !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:11px !important; padding:0 14px !important; text-align:left !important; cursor:text !important; box-shadow:0 1px 2px rgba(15,23,42,.04) !important; font-family:inherit !important; }
.shahkaar-search-field:hover, .shahkaar-search-field:focus { background:#fff !important; border-color:#b7c8da !important; box-shadow:0 0 0 3px rgba(5,150,105,.12) !important; outline:none !important; }
.shahkaar-search-field-icon { color:#64748b !important; font-size:22px !important; width:22px !important; line-height:1 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; transform:none !important; }
.shahkaar-search-field-placeholder { color:#64748b !important; font-size:13px !important; font-weight:650 !important; line-height:1 !important; }
@media (max-width: 768px) {
  :root { --sk-header-height: 124px; }
  .shahkaar-header-topline { height:68px !important; padding:0 9px !important; gap:8px !important; }
  .shahkaar-header-searchline { height:56px !important; padding:8px 10px !important; }
  .shahkaar-reference-logo { width:44px !important; height:44px !important; min-width:44px !important; }
  .shahkaar-reference-brand-title { font-size:16px !important; letter-spacing:.10em !important; }
  .shahkaar-reference-brand-subtitle { font-size:8.3px !important; }
  .shahkaar-reference-header .shahkaar-user-name { display:none !important; }
  .shahkaar-reference-header .shahkaar-user-trigger { padding:6px 9px !important; }
}


/* B4.2 Header top search + reliable user dropdown */
:root { --sk-header-height: 74px; }
body.shahkaar-has-header { padding-top: var(--sk-header-height) !important; }
.shahkaar-common-header.shahkaar-reference-header { height: var(--sk-header-height) !important; background:#064e3b !important; }
.shahkaar-reference-header .shahkaar-header-topline { height:74px !important; padding:0 14px !important; display:flex !important; align-items:center !important; gap:14px !important; }
.shahkaar-reference-header .shahkaar-header-left { flex:0 0 auto !important; display:flex !important; align-items:center !important; gap:10px !important; }
.shahkaar-reference-header .shahkaar-header-center { flex:1 1 560px !important; max-width:760px !important; min-width:220px !important; display:flex !important; }
.shahkaar-reference-header .shahkaar-header-right { flex:0 0 auto !important; display:flex !important; align-items:center !important; gap:10px !important; }
.shahkaar-top-search { width:100% !important; height:42px !important; border-radius:11px !important; border:1px solid rgba(226,232,240,.95) !important; background:#f8fafc !important; color:#64748b !important; display:flex !important; align-items:center !important; gap:12px !important; padding:0 14px !important; text-align:left !important; cursor:text !important; box-shadow:0 2px 10px rgba(15,23,42,.09) !important; font-family:inherit !important; }
.shahkaar-top-search:hover,.shahkaar-top-search:focus { background:#fff !important; border-color:#bbd0c6 !important; box-shadow:0 0 0 3px rgba(34,197,94,.18) !important; outline:none !important; }
.shahkaar-dashboard-link { height:42px !important; padding:0 14px !important; border-radius:12px !important; background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.20) !important; color:#fff !important; display:inline-flex !important; align-items:center !important; text-decoration:none !important; font-size:13px !important; font-weight:900 !important; white-space:nowrap !important; }
.shahkaar-dashboard-link:hover { background:rgba(255,255,255,.18) !important; color:#fff !important; }
.shahkaar-user-dropdown[hidden] { display:none !important; }
.shahkaar-reference-header .shahkaar-user-menu:not(.open):not(.is-open) > .shahkaar-user-dropdown { display:none !important; }
.shahkaar-reference-header .shahkaar-user-menu.open > .shahkaar-user-dropdown,.shahkaar-reference-header .shahkaar-user-menu.is-open > .shahkaar-user-dropdown { display:block !important; }
@media(max-width:1100px){ .shahkaar-reference-header .shahkaar-header-center{max-width:none !important;flex:1 1 360px !important}.shahkaar-dashboard-link{display:none !important}.shahkaar-reference-brand-title{font-size:18px !important;letter-spacing:.10em !important}.shahkaar-reference-brand-subtitle{font-size:8.8px !important} }
@media(max-width:768px){ :root{--sk-header-height:124px}.shahkaar-reference-header .shahkaar-header-topline{height:124px !important;flex-wrap:wrap !important;align-content:center !important;padding:8px 9px !important}.shahkaar-reference-header .shahkaar-header-left{order:1 !important;flex:1 1 auto !important}.shahkaar-reference-header .shahkaar-header-right{order:2 !important}.shahkaar-reference-header .shahkaar-header-center{order:3 !important;flex:0 0 100% !important;min-width:100% !important}.shahkaar-reference-header .shahkaar-user-name{display:none !important} }

@media (max-width: 720px) {
  .sk-smart-stat-grid .sk-stat:first-child { grid-column: auto; }
}

/* Shahkaar page hall title + professional form/result utilities */
.sk-page-hall-title {
    width: min(100%, 1180px);
    margin: 0 auto 14px auto;
    text-align: center;
    padding: 10px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(236, 253, 245, .96), rgba(255, 255, 255, .96));
    border: 1px solid #bbf7d0;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
    color: #064e3b;
    font-family: "Plus Jakarta Sans", Inter, "Segoe UI", Arial, sans-serif;
}
.sk-page-hall-title__label {
    display: block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #047857;
    margin-bottom: 4px;
}
.sk-page-hall-title strong {
    display: block;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 950;
    color: #064e3b;
}
.sk-content-shell,
:not(body).sk-page-shell {
    width: min(100%, 1180px);
    margin: 0 auto 32px;
    font-family: "Plus Jakarta Sans", Inter, "Segoe UI", Arial, sans-serif;
}
.sk-pro-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
    overflow: hidden;
}
.sk-pro-card-head {
    padding: 18px 22px;
    background: linear-gradient(135deg, #064e3b, #065f46);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.sk-pro-card-title { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 950; letter-spacing: -.02em; }
.sk-pro-card-subtitle { margin: 5px 0 0; color: rgba(255,255,255,.78); font-size: 12px; font-weight: 700; }
.sk-pro-body { padding: 22px; }
.sk-form-grid-2 { display: grid; grid-template-columns: minmax(320px, .85fr) minmax(360px, 1.15fr); gap: 18px; align-items: start; }
.sk-input-panel,
.sk-result-panel {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
    padding: 18px;
}
.sk-input-panel-title,
.sk-result-panel-title { margin: 0 0 14px; color: #0f172a; font-size: 15px; font-weight: 950; display: flex; align-items: center; gap: 8px; }
.sk-field { margin-bottom: 14px; }
.sk-field label { display: block; color: #334155; font-size: 12px; font-weight: 850; margin-bottom: 6px; }
.sk-field input,
.sk-field select {
    width: 100%;
    height: 40px;
    border: 1px solid #cbd5e1;
    border-radius: 11px;
    background: #fff;
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    padding: 0 12px;
    outline: none;
    box-sizing: border-box;
}
.sk-field input:focus,
.sk-field select:focus { border-color: #059669; box-shadow: 0 0 0 3px rgba(5, 150, 105, .13); }
.sk-action-row { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.sk-btn-primary,
.sk-btn-secondary,
.sk-btn-success {
    min-height: 40px;
    border: 0;
    border-radius: 11px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.sk-btn-primary { background: #064e3b; box-shadow: 0 8px 18px rgba(6,78,59,.18); }
.sk-btn-secondary { background: #0f172a; box-shadow: 0 8px 18px rgba(15,23,42,.16); }
.sk-btn-success { background: #047857; box-shadow: 0 8px 18px rgba(4,120,87,.17); }
.sk-btn-primary:hover,
.sk-btn-secondary:hover,
.sk-btn-success:hover { transform: translateY(-1px); }
.sk-result-panel { opacity: 0; transform: translateX(22px); pointer-events: none; transition: opacity .28s ease, transform .28s ease; }
.sk-result-panel.is-visible { opacity: 1; transform: translateX(0); pointer-events: auto; }
.sk-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sk-metric-field { background: #fff; border: 1px solid #e2e8f0; border-radius: 13px; padding: 10px 12px; }
.sk-metric-field label { display: block; font-size: 11px; font-weight: 900; color: #64748b; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.sk-metric-field input { width: 100%; border: 0; outline: 0; background: transparent; color: #0f172a; font-size: 16px; font-weight: 950; padding: 0; }
.sk-rate-strip { margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: #ecfdf5; border: 1px solid #bbf7d0; color: #064e3b; font-weight: 900; font-size: 12.5px; text-align: center; }
.sk-requirement-shell { width: min(96vw, 1680px); margin: 0 auto 32px; font-family: "Plus Jakarta Sans", Inter, "Segoe UI", Arial, sans-serif; }
.sk-wide-table-wrap { width: 100%; overflow: auto; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 12px 32px rgba(15, 23, 42, .07); background: #fff; }
.sk-wide-table { width: 100%; min-width: 1580px; border-collapse: collapse; font-size: 12.5px; color: #0f172a; }
.sk-wide-table th { position: sticky; top: 0; z-index: 5; background: #f8fafc; color: #0f172a; font-weight: 950; border: 1px solid #e2e8f0; padding: 10px 9px; text-align: center; white-space: nowrap; }
.sk-wide-table td { border: 1px solid #e2e8f0; padding: 9px 9px; text-align: center; white-space: nowrap; }
.sk-wide-table td.item-name { text-align: left; white-space: normal; min-width: 240px; font-weight: 850; }
.sk-wide-table tfoot td { background: #f8fafc; font-weight: 950; }
.sk-table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; flex-wrap: wrap; }
.sk-note-muted { color: #64748b; font-size: 12px; font-weight: 750; }
@media (max-width: 920px) {
    .sk-form-grid-2 { grid-template-columns: 1fr; }
    .sk-result-panel { transform: translateY(16px); }
    .sk-result-panel.is-visible { transform: translateY(0); }
    .sk-result-grid { grid-template-columns: 1fr; }
    .sk-pro-card-head { align-items: flex-start; flex-direction: column; }
}
@media print {
    .sk-page-hall-title { box-shadow: none; border: 1px solid #999; }
    .sk-action-row, .no-print { display: none !important; }
    .sk-wide-table-wrap { overflow: visible; box-shadow: none; border: 0; }
    .sk-wide-table { min-width: 0; font-size: 10px; }
    .sk-wide-table th { position: static; }
}


/* --------------------------------------------------------------------------
   Dual staff/student login — exact supplied UI, scoped to the login page.
   Branding remains DB-backed in the Blade; this block only owns presentation.
   -------------------------------------------------------------------------- */
body.shahkaar-dual-login-page {
  --primary: #064e3b;
  --primary-light: #059669;
  --primary-soft: #f0fdf4;
  --text-main: #0f172a;
  --text-muted: #475569;
  --border: #e2e8f0;
  --bg-body: #fafaf9;
  --bg-card: #ffffff;
  --white: #ffffff;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
}

html.shahkaar-dual-login-root,
body.shahkaar-dual-login-page {
  height: 100%;
}

body.shahkaar-dual-login-page,
body.shahkaar-dual-login-page * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body.shahkaar-dual-login-page {
  color: var(--text-main);
  background-color: var(--bg-body);
  background-image:
    radial-gradient(at 0% 0%, rgba(209, 250, 229, 0.45) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(240, 253, 250, 0.5) 0px, transparent 50%),
    radial-gradient(at 50% 50%, rgba(241, 245, 249, 1) 0px, transparent 100%);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: grid;
  place-items: center;
  padding: 24px;
}

body.shahkaar-dual-login-page button,
body.shahkaar-dual-login-page input {
  font: inherit;
}

@keyframes shahkaar-dual-login-reveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.shahkaar-dual-login-page .login-container {
  width: min(1040px, 100%);
  animation: shahkaar-dual-login-reveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.shahkaar-dual-login-page .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 auto 36px;
  text-align: center;
}

body.shahkaar-dual-login-page .brand-logo {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(6, 78, 59, 0.08));
}

body.shahkaar-dual-login-page .brand-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.shahkaar-dual-login-page .brand-name {
  color: var(--primary);
  font-size: clamp(28px, 4.5vw, 36px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 6px;
  text-transform: uppercase;
  margin-bottom: 4px;
  padding-left: 6px;
}

body.shahkaar-dual-login-page .system-type {
  color: var(--text-main);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

body.shahkaar-dual-login-page .organisation-name {
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
  margin-top: 3px;
}

body.shahkaar-dual-login-page .alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 24px;
  color: #991b1b;
  background: var(--danger-soft);
  border: 1px solid #fca5a5;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

body.shahkaar-dual-login-page .alert.success {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: #86efac;
}

body.shahkaar-dual-login-page .login-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg-card);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.02),
    0 10px 30px -5px rgba(0,0,0,0.05),
    0 20px 40px -10px rgba(0,0,0,0.03);
  overflow: hidden;
}

body.shahkaar-dual-login-page .login-panel {
  padding: 48px 44px;
  background: var(--white);
}

body.shahkaar-dual-login-page .student-panel {
  background: linear-gradient(180deg, #f0fdf4 0%, #fcfdfc 100%);
  border-left: 1px solid var(--border);
}

body.shahkaar-dual-login-page .panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

body.shahkaar-dual-login-page .panel-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid rgba(5, 150, 105, 0.15);
  border-radius: 10px;
}

body.shahkaar-dual-login-page .panel-icon svg {
  width: 20px;
  height: 20px;
}

body.shahkaar-dual-login-page .panel-title {
  color: var(--text-main);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

body.shahkaar-dual-login-page .hint {
  min-height: 44px;
  margin-bottom: 28px;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

body.shahkaar-dual-login-page .field {
  margin-bottom: 22px;
}

body.shahkaar-dual-login-page .field label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

body.shahkaar-dual-login-page .input-group {
  position: relative;
}

body.shahkaar-dual-login-page .input-icon {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 18px;
  height: 18px;
  color: #94a3b8;
  transform: translateY(-50%);
  pointer-events: none;
  transition: color 0.15s ease;
}

body.shahkaar-dual-login-page .field input {
  width: 100%;
  height: 48px;
  padding: 12px 16px 12px 46px;
  color: var(--text-main);
  background: #fafafa;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  outline: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s ease-in-out;
}

body.shahkaar-dual-login-page .field input::placeholder {
  color: #94a3b8;
}

body.shahkaar-dual-login-page .field input:hover {
  border-color: #94a3b8;
  background: var(--white);
}

body.shahkaar-dual-login-page .field input:focus {
  background: var(--white);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(6, 78, 59, 0.15);
}

body.shahkaar-dual-login-page .field input:focus ~ .input-icon {
  color: var(--primary);
}

body.shahkaar-dual-login-page .field input.has-toggle {
  padding-right: 68px;
}

body.shahkaar-dual-login-page .password-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  padding: 6px 10px;
  color: var(--text-muted);
  background: #f1f5f9;
  border: 0;
  border-radius: 6px;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

body.shahkaar-dual-login-page .password-toggle:hover {
  color: var(--primary);
  background: var(--primary-soft);
}

body.shahkaar-dual-login-page .field-error {
  display: block;
  margin-top: 6px;
  color: var(--danger);
  font-size: 12px;
  font-weight: 500;
}

body.shahkaar-dual-login-page .login-button {
  width: 100%;
  height: 48px;
  margin-top: 6px;
  color: var(--white);
  background: var(--primary);
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

body.shahkaar-dual-login-page .login-button:hover {
  background: #022c22;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(2, 44, 34, 0.15);
}

body.shahkaar-dual-login-page .login-button:active {
  transform: scale(0.985);
}

body.shahkaar-dual-login-page .forgot {
  display: block;
  width: fit-content;
  margin: 20px auto 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

body.shahkaar-dual-login-page .forgot:hover {
  color: var(--primary);
  text-decoration: underline;
}

@media (max-width: 840px) {
  body.shahkaar-dual-login-page .login-card {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }

  body.shahkaar-dual-login-page .student-panel {
    border-left: 0;
    border-top: 1px dashed var(--border);
  }

  body.shahkaar-dual-login-page .hint {
    min-height: auto;
  }
}

@media (max-width: 440px) {
  body.shahkaar-dual-login-page {
    padding: 16px;
  }

  body.shahkaar-dual-login-page .brand {
    gap: 12px;
    margin-bottom: 28px;
  }

  body.shahkaar-dual-login-page .brand-logo {
    width: 80px;
    height: 80px;
  }

  body.shahkaar-dual-login-page .brand-name {
    font-size: 24px;
    letter-spacing: 4px;
    padding-left: 4px;
  }

  body.shahkaar-dual-login-page .system-type {
    font-size: 14px;
  }

  body.shahkaar-dual-login-page .organisation-name {
    font-size: 11.5px;
  }

  body.shahkaar-dual-login-page .login-panel {
    padding: 36px 24px;
  }
}


/* Shared CRUD reference UI derived from Student Dining Assignments. */
.sk-crud-page { padding: 24px; }
.sk-crud-page .wrap { margin: 0 auto; }
.sk-crud-page .card,
.sk-crud-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.07);
  padding: 24px;
  overflow: hidden;
}
.sk-crud-page .header,
.sk-crud-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.sk-crud-header-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.sk-crud-page .title,
.sk-crud-title { font-size: 24px; font-weight: 700; color: #111827; line-height: 1.2; margin-bottom: 6px; }
.sk-crud-page .small,
.sk-crud-subtitle { font-size: 13px; color: #6b7280; }
.sk-crud-page .btn,
.sk-crud-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 8px; text-decoration: none; border: none; cursor: pointer; font-size: 14px; font-weight: 600; white-space: nowrap; transition: .2s ease; min-height: 44px; }
.sk-crud-page .btn:hover,
.sk-crud-btn:hover { opacity: .92; }
.sk-crud-page .btn-green,
.sk-crud-btn-primary { background: #16a34a; color: #fff; }
.sk-crud-page .btn-dark,
.sk-crud-btn-dark { background: #111827; color: #fff; }
.sk-crud-page .btn-red,
.sk-crud-btn-danger { background: #dc2626; color: #fff; }
.sk-crud-btn-secondary { background: #0f766e; color: #fff; }
.sk-crud-btn-edit { background: #2563eb; color: #fff; }
.sk-crud-btn-success { background: #16a34a; color: #fff; }
.sk-crud-btn-warning { background: #f59e0b; color: #111827; }
.sk-crud-btn-neutral { background: #f8fafc; color: #334155; border: 1px solid #cbd5e1; }
.sk-crud-metric { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 12px; border-radius: 999px; border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8; font-size: 13px; font-weight: 800; white-space: nowrap; }
.sk-cell-wrap { white-space: normal; overflow-wrap: break-word; word-break: normal; }
.sk-cell-nowrap { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.sk-col-serial { width: 72px; min-width: 72px; max-width: 72px; text-align: center !important; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.sk-col-status { width: 1%; min-width: 96px; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.sk-col-address, .sk-col-remarks, .sk-col-description { width: 210px; max-width: 220px; white-space: normal; overflow-wrap: break-word; word-break: normal; }
.sk-col-actions { width: 1%; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.sk-crud-actions-nowrap { flex-wrap: nowrap; white-space: nowrap; }
.sk-crud-actions-nowrap form { flex: 0 0 auto; }


/* Semantic CRUD action colors with submit-button specificity.
   These scoped selectors intentionally outrank the global button[type="submit"] rule
   without changing unrelated submit buttons. */
.sk-crud-page button[type="submit"].sk-crud-btn-primary,
.crud-shell button[type="submit"].sk-crud-btn-primary,
.sk-crud-page button[type="submit"].sk-crud-btn-success,
.crud-shell button[type="submit"].sk-crud-btn-success,
.sk-crud-page .sk-crud-btn-primary,
.crud-shell .sk-crud-btn-primary,
.sk-crud-page .sk-crud-btn-success,
.crud-shell .sk-crud-btn-success { background: #16a34a; color: #fff; border-color: #16a34a; }
.sk-crud-page button[type="submit"].sk-crud-btn-secondary,
.crud-shell button[type="submit"].sk-crud-btn-secondary,
.sk-crud-page .sk-crud-btn-secondary,
.crud-shell .sk-crud-btn-secondary { background: #0f766e; color: #fff; border-color: #0f766e; }
.sk-crud-page button[type="submit"].sk-crud-btn-edit,
.crud-shell button[type="submit"].sk-crud-btn-edit,
.sk-crud-page .sk-crud-btn-edit,
.crud-shell .sk-crud-btn-edit { background: #2563eb; color: #fff; border-color: #2563eb; }
.sk-crud-page button[type="submit"].sk-crud-btn-warning,
.crud-shell button[type="submit"].sk-crud-btn-warning,
.sk-crud-page .sk-crud-btn-warning,
.crud-shell .sk-crud-btn-warning { background: #f59e0b; color: #111827; border-color: #f59e0b; }
.sk-crud-page button[type="submit"].sk-crud-btn-danger,
.crud-shell button[type="submit"].sk-crud-btn-danger,
.sk-crud-page .sk-crud-btn-danger,
.crud-shell .sk-crud-btn-danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.sk-crud-page button[type="submit"].sk-crud-btn-neutral,
.crud-shell button[type="submit"].sk-crud-btn-neutral,
.sk-crud-page .sk-crud-btn-neutral,
.crud-shell .sk-crud-btn-neutral { background: #f8fafc; color: #334155; border: 1px solid #cbd5e1; }

.sk-crud-page .btn-sm,
.sk-crud-btn-sm { padding: 7px 10px; font-size: 13px; min-height: 36px; }
.sk-crud-page .filters,
.sk-crud-filters { display: grid; grid-template-columns: minmax(220px,2fr) repeat(4, minmax(160px,1fr)) auto; gap: 12px; align-items: end; margin-bottom: 22px; }
.sk-crud-page .field,
.sk-crud-field { min-width: 0; }
.sk-crud-page .field label,
.sk-crud-field label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.sk-crud-page input,
.sk-crud-page select { width: 100%; min-width: 0; height: 42px; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #111827; outline: none; font-size: 16px; }
.sk-crud-page input:focus,
.sk-crud-page select:focus { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.sk-crud-page input[readonly] { background: #f9fafb; color: #4b5563; }
.sk-crud-page .filter-actions,
.sk-crud-filter-actions { display: flex; gap: 10px; align-items: end; }
.sk-crud-page .table-wrap,
.sk-crud-table-wrap { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 12px; -webkit-overflow-scrolling: touch; }
.sk-crud-page table,
.sk-crud-table { width: 100%; border-collapse: collapse; background: #fff; min-width: 100%; }
.sk-crud-page th,
.sk-crud-page td { padding: 12px 10px; border-bottom: 1px solid #e5e7eb; font-size: 14px; vertical-align: top; overflow-wrap: anywhere; }
.sk-crud-page th { background: #111827 !important; text-align: center; color: #fff !important; position: sticky; top: 0; z-index: 1; }
.sk-crud-page .badge,
.sk-crud-badge { display: inline-flex; align-items: center; white-space: nowrap; overflow-wrap: normal; word-break: normal; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.sk-crud-page .badge-green,
.sk-crud-badge-success { background: #dcfce7; color: #166534; }
.sk-crud-page .badge-yellow,
.sk-crud-badge-warning { background: #fef3c7; color: #92400e; }
.sk-crud-page .badge-gray,
.sk-crud-badge-muted { background: #f3f4f6; color: #374151; }
.sk-crud-page .actions,
.sk-crud-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: center; }
.sk-crud-page .actions form { margin: 0; }
.sk-crud-empty { color: #6b7280; text-align: center; padding: 28px 12px; }
.sk-crud-page .alert,
.sk-crud-alert { padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.sk-crud-page .alert-success,
.sk-crud-alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.sk-crud-page .pagination,
.sk-crud-pagination { margin-top: 20px; }
.sk-crud-page .pagination svg { width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; }
@media (max-width: 1200px) { .sk-crud-page .filters { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 768px) {
  .sk-crud-page { padding: 16px; }
  .sk-crud-page .card,
  .sk-crud-card { padding: 18px; }
  .sk-crud-page .filters,
  .sk-crud-filters { grid-template-columns: 1fr; }
  .sk-crud-page .filter-actions,
  .sk-crud-filter-actions { width: 100%; flex-wrap: wrap; }
  .sk-crud-header-actions,
  .sk-crud-page .filter-actions .btn,
  .sk-crud-filter-actions .sk-crud-btn { flex: 1 1 auto; }
}

/* Shared CRUD shell structural styling for audited index/listing pages. */
.crud-shell {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  border-radius: var(--sk-radius-lg, 16px);
}

.crud-shell--compact { max-width: 1050px; }
.crud-shell--standard { max-width: 1320px; }
.crud-shell--wide { max-width: none; }

.crud-shell:is(section, div, main),
.crud-shell > .card,
.crud-shell > .sk-card,
.crud-shell > .afl-page-card,
.crud-shell > .page-wrap {
  background: var(--sk-surface, #fff);
}

.crud-shell .sk-table-wrap,
.crud-shell .table-wrap,
.crud-shell .sk-crud-table-wrap,
.crud-shell .overflow-x-auto {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.crud-shell table {
  width: 100%;
}

.crud-shell--compact table,
.crud-shell--compact .sk-crud-table { min-width: min(100%, 760px); }
.crud-shell--standard table,
.crud-shell--standard .sk-crud-table { min-width: min(100%, 1040px); }
.crud-shell--wide table,
.crud-shell--wide .sk-crud-table { min-width: 1220px; }

.crud-shell .sk-actions,
.crud-shell .actions,
.crud-shell .sk-crud-actions,
.crud-shell .filter-actions,
.crud-shell .sk-crud-filter-actions,
.crud-shell form[class*="filter"],
.crud-shell .sk-filter-row {
  flex-wrap: wrap;
}

.crud-shell .sk-btn,
.crud-shell .btn,
.crud-shell .sk-crud-btn,
.crud-shell button,
.crud-shell a[class*="btn"] {
  min-height: 38px;
  align-items: center;
}

.crud-shell th,
.crud-shell td {
  overflow-wrap: anywhere;
}

.crud-shell .sk-cell-nowrap { overflow-wrap: normal; word-break: normal; }
.crud-shell .sk-cell-wrap { white-space: normal; overflow-wrap: break-word; word-break: normal; }
.crud-shell :is(.sk-col-serial, .sk-col-status, .sk-col-actions, .sk-cell-nowrap) { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.crud-shell :is(.sk-col-address, .sk-col-remarks, .sk-col-description) { white-space: normal; overflow-wrap: break-word; word-break: normal; }

@media (max-width: 768px) {
  .crud-shell { width: 100%; max-width: 100%; }
  .crud-shell .sk-card-head,
  .crud-shell .sk-page-heading,
  .crud-shell .header,
  .crud-shell .topbar,
  .crud-shell .top,
  .crud-shell .head {
    align-items: stretch;
    flex-direction: column;
  }

  .crud-shell .sk-btn,
  .crud-shell .btn,
  .crud-shell .sk-crud-btn,
  .crud-shell button,
  .crud-shell a[class*="btn"] {
    min-height: 44px;
  }
}

/* Items CRUD ordering UI (centralized from items index). */
.items-crud.wrap,
.items-crud {
    max-width: 1180px;
    margin: 18px auto;
    padding: 0 14px;
}
.items-crud .card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px;
}
.items-crud .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.items-crud .title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.items-crud .title h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--amu-green);
    letter-spacing: .2px;
}
.items-crud .actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.items-crud .btn {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .15s;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    white-space: nowrap;
}
.items-crud .btn:focus { outline: none; box-shadow: var(--focus); }
.items-crud .btn-order {
    background: linear-gradient(92deg, var(--warn), var(--warn-dark) 90%);
    color: #fff;
    min-width: 140px;
}
.items-crud .btn-add,
.items-crud .btn-edit {
    background: linear-gradient(92deg, var(--btn-blue), var(--btn-blue-dark) 90%);
    color: #fff;
}
.items-crud .btn-edit,
.items-crud .btn-del {
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 12px;
}
.items-crud .btn-del {
    background: linear-gradient(92deg, var(--danger), var(--danger-dark) 90%);
    color: #fff;
}
.items-crud .table-wrap {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: auto;
    background: #fff;
}
.items-crud table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 940px;
    font-size: 13.5px;
}
.items-crud thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--amu-green-dark);
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .35px;
    text-transform: uppercase;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.14);
    white-space: nowrap;
}
.items-crud tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    vertical-align: middle;
}
.items-crud tbody tr:hover { background: #f9fafb; }
.items-crud tbody tr:last-child td { border-bottom: none; }
.items-crud .muted { color: var(--muted); }
.items-crud .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(11,107,58,.10);
    color: var(--amu-green-dark);
    border: 1px solid rgba(11,107,58,.18);
}
.items-crud .actions-cell { text-align: center; white-space: nowrap; }
.items-crud .action-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.items-crud .hint { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.items-crud.edit-mode tbody tr { cursor: grab; }
.items-crud.edit-mode tbody tr:active { cursor: grabbing; }
.items-crud .drag-chip {
    display: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--amu-green-dark);
    background: rgba(11,107,58,.10);
    border: 1px solid rgba(11,107,58,.22);
    padding: 6px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.items-crud.edit-mode .drag-chip { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 768px) {
    .items-crud .actions { width: 100%; }
    .items-crud .btn-order,
    .items-crud .btn-add { width: 100%; }
}


/* Stock Outwards specialized UI: settlement, voucher badges and print support. */
.stock-outwards-crud .filter-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 10px;
  align-items: end;
}
.stock-outwards-crud .filter-box {
  background: #fafafa;
  border: 1px solid var(--sk-border, #e5e7eb);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 14px;
}
.stock-outwards-crud .right { text-align: right; }
.stock-outwards-crud .center { text-align: center; }
.stock-outwards-crud .amount { font-weight: 700; white-space: nowrap; }
.stock-outwards-crud .muted { color: var(--sk-muted, #6b7280); font-size: 11px; }
.stock-outwards-crud .badge-sale { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.stock-outwards-crud .badge-return { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.stock-outwards-crud .badge-exchange { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.stock-outwards-crud .badge-temp { background: #ecfdf5; color: #047857; border-color: #bbf7d0; }
.stock-outwards-crud .status-pending { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.stock-outwards-crud .status-partial { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.stock-outwards-crud .status-completed { background: #ecfdf5; color: #047857; border-color: #bbf7d0; }
.stock-outwards-crud .status-closed { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.stock-outwards-crud .status-cancelled { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.stock-outwards-crud .item-list { display: flex; flex-direction: column; gap: 4px; min-width: 230px; }
.stock-outwards-crud .item-line { line-height: 1.35; padding: 2px 0; }
.stock-outwards-crud .item-line + .item-line { border-top: 1px dashed var(--sk-border, #e5e7eb); padding-top: 5px; }
.stock-outwards-crud .exchange-text { display: inline-block; margin: 0 5px; color: var(--sk-muted, #6b7280); font-weight: 600; white-space: nowrap; }
.stock-outwards-crud .exchange-separator { margin: 4px 0; display: block; font-weight: 700; }
.stock-outwards-crud .actions-inline { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.stock-outwards-crud .settlement-row { display: none; }
.stock-outwards-crud .settlement-row.show { display: table-row; }
.stock-outwards-crud .settlement-panel { background: #f9fafb; border: 1px solid var(--sk-border, #e5e7eb); border-radius: 12px; padding: 14px; }
.stock-outwards-crud .settlement-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.stock-outwards-crud .settlement-head strong { color: var(--sk-text, #111827); font-size: 13px; }
.stock-outwards-crud .settlement-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr; gap: 10px; align-items: end; }
.stock-outwards-crud .receipt-items { margin-top: 12px; background: #fff; border: 1px dashed var(--sk-border, #e5e7eb); border-radius: 12px; padding: 12px; }
.stock-outwards-crud .receipt-items table { min-width: 780px; }
.stock-outwards-crud .receipt-items th { background: #374151; }
.stock-outwards-crud .hidden { display: none !important; }
@media (max-width: 950px) {
  .stock-outwards-crud .filter-grid,
  .stock-outwards-crud .settlement-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .stock-outwards-crud .filter-grid,
  .stock-outwards-crud .settlement-grid { grid-template-columns: 1fr; }
}
@media print {
  .stock-outwards-crud .no-print { display: none !important; }
  .stock-outwards-crud .sk-crud-card { box-shadow: none; border: none; }
  .stock-outwards-crud th { background: #222 !important; color: #fff !important; }
}

/* Shared semantic table/action refinements for authenticated CRUD pages. */
.crud-shell .sk-crud-actions-nowrap,
.sk-crud-page .sk-crud-actions-nowrap {
  flex-wrap: nowrap;
  white-space: nowrap;
}