/*
========================================
FILE: static/main.css
PURPOSE: Shared design tokens and base component styles used by all templates.
         Individual templates include this file and can override variables locally.
SECTIONS:
  - Design Tokens (CSS Custom Properties)
  - Reset & Base
  - Scrollbar
  - Top Nav
  - Buttons
  - Form Controls
  - Cards
  - Badges / Tags
  - Utility
  - Animations
  - Responsive
LAST UPDATED: 2026-05-01
========================================
*/

/* --- DESIGN TOKENS (CSS Custom Properties) --- */
:root {
  /* Brand */
  --accent:      #f97316;
  --accent-g:    rgba(249, 115, 22, 0.12);
  --accent-b:    rgba(249, 115, 22, 0.28);
  --accent-glow: 0 0 0 1px rgba(249, 115, 22, 0.25), 0 4px 20px rgba(249, 115, 22, 0.15);

  /* Semantic aliases */
  --vb:          var(--accent);
  --vb-g:        var(--accent-g);
  --vb-b:        var(--accent-b);
  --teal:        #fb923c;
  --teal-g:      rgba(251, 146, 60, 0.12);
  --green:       #22c55e;
  --green-g:     rgba(34, 197, 94, 0.10);
  --amber:       #f59e0b;
  --amber-g:     rgba(245, 158, 11, 0.12);
  --red:         #ef4444;
  --red-g:       rgba(239, 68, 68, 0.12);

  /* Surfaces */
  --bg:    #07070a;
  --card:  #0e0e12;
  --surf:  #141418;
  --surf2: #1a1a20;
  --surf3: #202026;

  /* Borders */
  --border: rgba(255, 255, 255, 0.055);
  --bh:     rgba(249, 115, 22, 0.3);

  /* Text */
  --text:  #e8e8f0;
  --dim:   #8888a0;
  --muted: #525260;

  /* Shape */
  --r:  14px;
  --rs: 9px;

  /* Motion */
  --ease: 0.18s cubic-bezier(0.4, 0, 0.2, 1);

  /* Nav height (used to offset content) */
  --nav-h: 52px;

  /* Sidebar width */
  --sb: 230px;
}


/* --- RESET & BASE --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


/* --- SCROLLBAR --- */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surf3); border-radius: 2px; }


/* --- TOP NAV --- */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  height: var(--nav-h);
  background: rgba(7, 7, 10, 0.97);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 0;
}

.tn-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding-right: 20px;
  margin-right: 4px;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}

.tn-logo:hover { text-decoration: none; }

.tn-mark {
  width: 30px; height: 30px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #f97316, #ea580c);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.3), 0 2px 10px rgba(249, 115, 22, 0.2);
}

.tn-brand {
  font-size: 0.86rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
}

.tn-nav {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 12px;
  flex: 1;
}

.tn-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--dim);
  text-decoration: none;
  transition: background var(--ease), color var(--ease);
  white-space: nowrap;
  letter-spacing: -0.1px;
}

.tn-item i { font-size: 0.76rem; opacity: 0.7; transition: opacity var(--ease); }
.tn-item:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); text-decoration: none; }
.tn-item:hover i { opacity: 1; }
.tn-item.active { background: var(--vb-g); color: var(--vb); font-weight: 700; }
.tn-item.active i { opacity: 1; color: var(--vb); }

.tn-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}

.tn-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}


/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--rs);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.2px;
  cursor: pointer;
  border: none;
  transition: background var(--ease), box-shadow var(--ease), transform var(--ease);
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; pointer-events: none; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #ea580c);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 2px 12px rgba(249, 115, 22, 0.25);
}
.btn-primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 4px 20px rgba(249, 115, 22, 0.4); }

.btn-secondary {
  background: var(--surf2);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--surf3); border-color: var(--bh); color: #fff; }

.btn-ghost {
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--surf); color: var(--text); border-color: rgba(255, 255, 255, 0.1); }

.btn-danger {
  background: rgba(239, 68, 68, 0.12);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.btn-danger:hover { background: rgba(239, 68, 68, 0.2); }

.btn-sm { padding: 6px 12px; font-size: 0.74rem; border-radius: var(--rs); }
.btn-xs { padding: 4px 9px;  font-size: 0.68rem; border-radius: 6px; }

.btn-icon {
  width: 31px; height: 31px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surf);
  color: var(--dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
  cursor: pointer;
  flex-shrink: 0;
}
.btn-icon:hover { border-color: var(--vb); color: var(--vb); background: var(--vb-g); }


/* --- FORM CONTROLS --- */
.field { margin-bottom: 14px; }

.lbl {
  display: block;
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--dim);
  margin-bottom: 6px;
}

.inp {
  width: 100%;
  background: var(--surf2);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  padding: 9px 12px;
  color: var(--text);
  font-size: 0.82rem;
  font-family: inherit;
  letter-spacing: -0.1px;
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}

.inp:focus {
  border-color: rgba(249, 115, 22, 0.45);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.08);
}

.inp::placeholder { color: var(--muted); }
.inp:disabled { opacity: 0.5; cursor: not-allowed; }

textarea.inp { resize: vertical; min-height: 80px; }

select.inp {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238888a0' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.inp-error { border-color: rgba(239, 68, 68, 0.5) !important; }
.inp-error:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important; }


/* --- CARDS --- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px 22px;
}

.card + .card { margin-top: 12px; }

.card:hover { border-color: rgba(255, 255, 255, 0.08); }

.card-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.card-title i { color: var(--accent); }


/* --- BADGES / TAGS --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.badge-orange  { background: var(--accent-g); color: var(--accent); border: 1px solid var(--accent-b); }
.badge-green   { background: var(--green-g);  color: var(--green);  border: 1px solid rgba(34,197,94,.2); }
.badge-amber   { background: var(--amber-g);  color: var(--amber);  border: 1px solid rgba(245,158,11,.2); }
.badge-red     { background: var(--red-g);    color: var(--red);    border: 1px solid rgba(239,68,68,.2); }
.badge-muted   { background: var(--surf2);    color: var(--dim);    border: 1px solid var(--border); }


/* --- UTILITY --- */
.text-muted  { color: var(--muted) !important; }
.text-dim    { color: var(--dim) !important; }
.text-accent { color: var(--accent) !important; }
.text-green  { color: var(--green) !important; }
.text-red    { color: var(--red) !important; }
.text-amber  { color: var(--amber) !important; }

.divider { height: 1px; background: var(--border); margin: 16px 0; }

.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

.spinner-sm { width: 14px; height: 14px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Alert / message boxes */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--rs);
  font-size: 0.78rem;
  line-height: 1.5;
}

.alert-error   { background: var(--red-g);   color: #fca5a5; border: 1px solid rgba(239,68,68,.2); }
.alert-success { background: var(--green-g); color: #86efac; border: 1px solid rgba(34,197,94,.2); }
.alert-info    { background: var(--accent-g); color: #fdba74; border: 1px solid var(--accent-b); }
.alert-warning { background: var(--amber-g); color: #fcd34d; border: 1px solid rgba(245,158,11,.2); }


/* --- ANIMATIONS --- */
@keyframes spin      { to { transform: rotate(360deg); } }
@keyframes fadeIn    { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulseRing { 0%,100% { box-shadow: 0 0 0 0 rgba(249,115,22,.4); } 50% { box-shadow: 0 0 0 8px transparent; } }

.animate-in       { animation: fadeIn  0.2s var(--ease) both; }
.animate-slide-up { animation: slideUp 0.25s var(--ease) both; }


/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .tn-nav { display: none; }

  .tn-logo .tn-brand { display: none; }

  .card { padding: 16px 18px; }

  .btn { padding: 8px 14px; }

  .hide-mobile { display: none !important; }
}

@media (max-width: 480px) {
  html { font-size: 13px; }

  .tn-right .btn-icon:not(:last-child) { display: none; }

  .hide-xs { display: none !important; }
}