/* =========================================================================
   SHAH TECHNOLOGY - THEME / DESIGN TOKENS
   Shared by the public website and the admin dashboard so both feel like
   one product. Dark, premium "software house" palette: deep navy base,
   electric blue -> cyan -> purple signature gradient used sparingly for
   emphasis (CTAs, active states, the hero) rather than everywhere.
   ========================================================================= */

:root{
  /* ---- Surface colors ---- */
  --st-bg:            #0a0e1a;   /* page background, near-black navy */
  --st-bg-alt:        #0c1220;   /* alternating section background */
  --st-panel:         #10182b;   /* card / panel background */
  --st-panel-2:       #141d33;   /* raised panel / hover background */
  --st-panel-3:       #1a2440;   /* input backgrounds */
  --st-border:        #22304a;
  --st-border-light:  #2d3d5c;

  /* ---- Text ---- */
  --st-text:          #eef1f8;
  --st-text-muted:    #9aa7c2;
  --st-text-faint:    #6b7690;

  /* ---- Brand accents ---- */
  --st-blue:          #3b6fed;
  --st-blue-light:    #6d93f5;
  --st-cyan:          #22d3ee;
  --st-purple:        #8b5cf6;
  --st-gradient:       linear-gradient(135deg, var(--st-blue) 0%, var(--st-cyan) 55%, var(--st-purple) 100%);
  --st-gradient-soft:  linear-gradient(135deg, rgba(59,111,237,.14) 0%, rgba(34,211,238,.10) 55%, rgba(139,92,246,.14) 100%);

  /* ---- Status colors ---- */
  --st-success:       #22c55e;
  --st-success-bg:    rgba(34,197,94,.12);
  --st-warning:       #f59e0b;
  --st-warning-bg:    rgba(245,158,11,.12);
  --st-danger:        #ef4444;
  --st-danger-bg:     rgba(239,68,68,.12);
  --st-info:          #22d3ee;
  --st-info-bg:       rgba(34,211,238,.12);

  /* ---- Typography ---- */
  --st-font-display:  'Space Grotesk', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --st-font-body:     'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --st-font-mono:     ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  /* ---- Shape / elevation ---- */
  --st-radius-sm:     8px;
  --st-radius:        12px;
  --st-radius-lg:      18px;
  --st-shadow:        0 10px 30px rgba(0,0,0,.35);
  --st-shadow-lg:     0 24px 60px rgba(0,0,0,.45);

  /* ---- Layout ---- */
  --st-sidebar-w:     264px;
  --st-topbar-h:      68px;
  --st-container:     1220px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  background: var(--st-bg);
  color: var(--st-text);
  font-family: var(--st-font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6{
  font-family: var(--st-font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--st-text);
  letter-spacing: -0.01em;
}

a{ color: var(--st-blue-light); text-decoration: none; }
a:hover{ color: var(--st-cyan); }

::selection{ background: var(--st-blue); color: #fff; }

/* Visible keyboard focus everywhere - accessibility floor */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--st-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Shared utility classes ---- */
.st-gradient-text{
  background: var(--st-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.st-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--st-font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-cyan);
  margin-bottom: 14px;
}
.st-eyebrow::before{
  content: '';
  width: 18px;
  height: 2px;
  background: var(--st-gradient);
  border-radius: 2px;
}

.st-card{
  background: var(--st-panel);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  transition: border-color .18s ease, transform .18s ease;
}

.st-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--st-radius-sm);
  font-weight: 600;
  font-size: 14.5px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  white-space: nowrap;
}
.st-btn:focus-visible{ outline-offset: 3px; }
.st-btn-primary{
  background: var(--st-gradient);
  color: #fff;
  box-shadow: 0 8px 24px rgba(59,111,237,.28);
}
.st-btn-primary:hover{ transform: translateY(-2px); color:#fff; box-shadow: 0 12px 30px rgba(59,111,237,.4); }
.st-btn-outline{
  background: transparent;
  border-color: var(--st-border-light);
  color: var(--st-text);
}
.st-btn-outline:hover{ border-color: var(--st-cyan); color: var(--st-text); }
.st-btn-sm{ padding: 8px 16px; font-size: 13px; }
.st-btn-block{ width: 100%; }

.st-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
.st-badge-success{ background: var(--st-success-bg); color: var(--st-success); }
.st-badge-warning{ background: var(--st-warning-bg); color: var(--st-warning); }
.st-badge-danger{  background: var(--st-danger-bg);  color: var(--st-danger); }
.st-badge-info{    background: var(--st-info-bg);    color: var(--st-info); }
.st-badge-muted{   background: rgba(154,167,194,.12); color: var(--st-text-muted); }

/* Status badges - class names returned by the status_badge_class() PHP
   helper (app/Core/helpers.php), used directly in views:
   <span class="st-badge <?= status_badge_class($row['status']) ?>"> */
.badge-status-info{      background: var(--st-info-bg);      color: var(--st-info); }
.badge-status-success{   background: var(--st-success-bg);   color: var(--st-success); }
.badge-status-primary{   background: rgba(59,111,237,.14);   color: var(--st-blue-light); }
.badge-status-danger{    background: var(--st-danger-bg);    color: var(--st-danger); }
.badge-status-warning{   background: var(--st-warning-bg);   color: var(--st-warning); }
.badge-status-secondary{ background: rgba(154,167,194,.12);  color: var(--st-text-muted); }

.st-container{ max-width: var(--st-container); margin: 0 auto; padding: 0 24px; }

.st-input, .st-select, .st-textarea{
  width: 100%;
  background: var(--st-panel-3);
  border: 1px solid var(--st-border);
  color: var(--st-text);
  border-radius: var(--st-radius-sm);
  padding: 11px 14px;
  font-size: 14.5px;
  font-family: var(--st-font-body);
  transition: border-color .15s ease;
}
.st-input::placeholder, .st-textarea::placeholder{ color: var(--st-text-faint); }
.st-input:focus, .st-select:focus, .st-textarea:focus{
  outline: none;
  border-color: var(--st-blue);
  box-shadow: 0 0 0 3px rgba(59,111,237,.18);
}
.st-label{ display:block; font-size: 13.5px; font-weight: 600; color: var(--st-text); margin-bottom: 7px; }
.st-help{ font-size: 12.5px; color: var(--st-text-faint); margin-top: 6px; }
.st-error{ font-size: 12.5px; color: var(--st-danger); margin-top: 6px; }

.st-table{ width: 100%; border-collapse: collapse; font-size: 14px; }
.st-table th{
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--st-text-faint); font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--st-border);
  white-space: nowrap;
}
.st-table td{ padding: 14px 16px; border-bottom: 1px solid var(--st-border); color: var(--st-text-muted); vertical-align: middle; }
.st-table tbody tr{ transition: background .12s ease; }
.st-table tbody tr:hover{ background: rgba(255,255,255,.02); }
.st-table strong{ color: var(--st-text); font-weight: 600; }

.st-alert{ display:flex; gap:12px; align-items:flex-start; padding: 14px 16px; border-radius: var(--st-radius-sm); border: 1px solid; font-size: 14px; margin-bottom: 18px; }
.st-alert-success{ background: var(--st-success-bg); border-color: rgba(34,197,94,.35); color: #86efac; }
.st-alert-danger{  background: var(--st-danger-bg);  border-color: rgba(239,68,68,.35); color: #fca5a5; }
.st-alert-warning{ background: var(--st-warning-bg); border-color: rgba(245,158,11,.35); color: #fcd34d; }
.st-alert-info{    background: var(--st-info-bg);    border-color: rgba(34,211,238,.35); color: #67e8f9; }

.st-empty{ text-align:center; padding: 56px 24px; color: var(--st-text-muted); }
.st-empty .st-empty-icon{ font-size: 40px; margin-bottom: 14px; opacity:.7; }
.st-empty h3{ font-size: 17px; margin-bottom: 8px; color: var(--st-text); }
.st-empty p{ font-size: 14px; max-width: 380px; margin: 0 auto; }

.st-skeleton{ background: linear-gradient(90deg, var(--st-panel) 25%, var(--st-panel-2) 37%, var(--st-panel) 63%); background-size: 400% 100%; animation: st-skeleton 1.4s ease infinite; border-radius: 6px; }
@keyframes st-skeleton{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }

.st-scrollbar::-webkit-scrollbar{ width: 8px; height: 8px; }
.st-scrollbar::-webkit-scrollbar-track{ background: transparent; }
.st-scrollbar::-webkit-scrollbar-thumb{ background: var(--st-border-light); border-radius: 8px; }

/* ---- Bootstrap pagination override (used by Paginator::links()) ---- */
.pagination{ margin-top: 8px; }
.pagination .page-link{
  background: var(--st-panel); border: 1px solid var(--st-border); color: var(--st-text-muted);
  margin: 0 3px; border-radius: 8px !important; font-size: 13.5px; padding: 8px 13px;
}
.pagination .page-link:hover{ background: var(--st-panel-2); color: #fff; border-color: var(--st-border-light); }
.pagination .page-item.active .page-link{ background: var(--st-gradient); border-color: transparent; color: #fff; }
.pagination .page-item.disabled .page-link{ background: transparent; color: var(--st-text-faint); border-color: var(--st-border); opacity: .5; }