/* =====================================================================
   Track360 Portal Theme  —  centralised design system
   ---------------------------------------------------------------------
   Imports the shared theme.css (single source of truth for colours).
   To change colours across both apps, edit shared/theme.css ONLY.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Montserrat:wght@400;500;600;700;800&display=swap');
@import url('theme.css');

/* ============================ Base ============================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: rgb(var(--ink-200));
  background-color: rgb(var(--ink-900));
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: rgb(var(--ink-50));
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

p { color: rgb(var(--ink-300)); line-height: 1.7; }

a {
  color: rgb(var(--brand-600));
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: rgb(var(--brand-700)); }

/* ===================== Scrollbars ===================== */

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(107,123,134,.4) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
  background-color: rgba(107,123,134,.35);
  border-radius: 9999px;
}
*::-webkit-scrollbar-thumb:hover { background-color: rgba(107,123,134,.55); }
*::-webkit-scrollbar-track { background: transparent; }

/* ===================== Component classes ===================== */
/* These mirror the @layer components in the portal's index.css so the
   same class names produce the same visual result on both sites.      */

/* ---- Cards ---- */
.card {
  background: rgb(var(--ink-800));
  border-radius: var(--radius-md);
  border: 1px solid rgb(var(--ink-700));
  box-shadow: var(--shadow-card);
}
.card-hover {
  transition: box-shadow var(--transition-base);
}
.card-hover:hover {
  box-shadow: var(--shadow-card-hover);
}

/* ---- Labels ---- */
.label {
  display: block;
  font-size: .75rem;
  font-weight: 500;
  color: rgb(var(--ink-500));
  margin-bottom: .25rem;
}

/* ---- Inputs ---- */
.input,
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="url"],
textarea, select {
  width: 100%;
  background: rgb(var(--ink-800));
  border: 1px solid rgb(var(--ink-600));
  border-radius: var(--radius-sm);
  padding: .5rem .75rem;
  font-size: .875rem;
  font-family: var(--font-display);
  color: rgb(var(--ink-100));
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input::placeholder,
input::placeholder, textarea::placeholder { color: rgb(var(--ink-500)); }

.input:focus,
.form-control:focus,
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: rgb(var(--brand-400));
  box-shadow: 0 0 0 2px rgba(40,217,189,.35);
}

.form-label, label {
  display: block;
  margin-bottom: .5rem;
  font-size: .875rem;
  font-weight: 600;
  color: rgb(var(--ink-300));
}

/* ---- Buttons ---- */
.btn,
button[type="submit"], input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  border-radius: var(--radius-sm);
  font-size: .75rem;
  font-weight: 700;
  padding: .5rem 1rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: all var(--transition-fast);
  cursor: pointer;
  border: none;
}
.btn:focus, button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(40,217,189,.35);
}
.btn:disabled, button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.btn-primary {
  background: rgb(var(--brand-600));
  color: #fff;
  box-shadow: 0 1px 2px rgba(13,148,136,.2);
}
.btn-primary:hover {
  background: rgb(var(--brand-700));
  color: #fff;
}

.btn-secondary {
  background: rgb(var(--ink-700));
  color: rgb(var(--ink-200));
  border: 1px solid rgb(var(--ink-600));
}
.btn-secondary:hover {
  background: rgb(var(--ink-600));
  color: rgb(var(--ink-100));
}

.btn-danger {
  background: rgb(var(--ink-800));
  color: rgb(var(--error));
  border: 1px solid rgba(239,68,68,.3);
}
.btn-danger:hover {
  background: rgba(239,68,68,.15);
  color: rgb(var(--error));
}

.btn-dark {
  background: rgb(var(--ink-900));
  color: #fff;
}
.btn-dark:hover {
  background: rgb(var(--ink-800));
  color: #fff;
  border-color: rgb(var(--brand-400));
  box-shadow: var(--shadow-glow);
}

.btn-sm { padding: .375rem .75rem; font-size: .625rem; }
.btn-lg { padding: .75rem 1.5rem; font-size: .875rem; }
.btn-block { width: 100%; }

/* Legacy compatibility — the old pages used bg-black for primary buttons */
a.bg-black, button.bg-black {
  background: rgb(var(--ink-900)) !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}
a.bg-black:hover, button.bg-black:hover {
  background: rgb(var(--ink-800)) !important;
  border-color: rgb(var(--brand-400));
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border-radius: 9999px;
  padding: .125rem .5rem;
  font-size: .6875rem;
  font-weight: 600;
}
.badge-brand   { background: rgb(var(--brand-50));  color: rgb(var(--brand-700)); }
.badge-neutral { background: rgb(var(--ink-100));   color: rgb(var(--ink-600)); }
.badge-success { background: #ecfdf5;               color: #047857; }
.badge-warning { background: #fffbeb;               color: #b45309; }
.badge-danger  { background: #fef2f2;               color: #b91c1c; }

/* ---- Tables ---- */
.table-wrap {
  background: rgb(var(--ink-800));
  border-radius: var(--radius-md);
  border: 1px solid rgb(var(--ink-700));
  box-shadow: var(--shadow-card);
  overflow-x: auto;
}
.table-base { width: 100%; font-size: .875rem; border-collapse: collapse; }
.table-base thead {
  background: rgba(20,25,29,.6);
  color: rgb(var(--ink-400));
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.table-base th {
  padding: .625rem 1rem;
  font-weight: 600;
  text-align: left;
}
.table-base tbody tr {
  border-top: 1px solid rgb(var(--ink-700));
  transition: background-color var(--transition-fast);
}
.table-base tbody tr:hover {
  background: rgba(20,184,162,.05);
}
.table-base td {
  padding: .625rem 1rem;
  color: rgb(var(--ink-200));
}

/* Legacy table support */
table { width: 100%; border-collapse: collapse; }
th {
  background: rgba(20,25,29,.6);
  padding: .625rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgb(var(--ink-400));
  border-bottom: 2px solid rgb(var(--ink-700));
}
td {
  padding: .625rem 1rem;
  border-bottom: 1px solid rgb(var(--ink-700));
  color: rgb(var(--ink-200));
  font-size: .875rem;
}
tbody tr:hover { background: rgba(20,184,162,.05); }

/* ---- Alerts ---- */
.alert {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  border-left: 4px solid;
  font-size: .875rem;
}
.alert-success { background: #ecfdf5; color: #065f46; border-color: rgb(var(--success)); }
.alert-danger  { background: #fef2f2; color: #991b1b; border-color: rgb(var(--error)); }
.alert-warning { background: #fffbeb; color: #92400e; border-color: rgb(var(--warning)); }
.alert-info    { background: #eff6ff; color: #1e40af; border-color: rgb(var(--info)); }

/* ---- Utility backgrounds ---- */
.bg-brand-gradient { background: var(--gradient-brand); }
.bg-ink-gradient   { background: var(--gradient-ink); }
.bg-mesh-glow      { background: var(--gradient-mesh); }

/* ---- Glow utilities ---- */
.glow-brand { box-shadow: var(--shadow-glow); }
.glow-inner { box-shadow: inset 0 1px 0 0 rgba(255,255,255,.06); }

/* ---- Text colour helpers ---- */
.text-brand-600 { color: rgb(var(--brand-600)); }
.text-brand-700 { color: rgb(var(--brand-700)); }
.text-ink-500   { color: rgb(var(--ink-500)); }
.text-ink-600   { color: rgb(var(--ink-600)); }
.text-ink-700   { color: rgb(var(--ink-700)); }
.text-ink-800   { color: rgb(var(--ink-800)); }
.text-ink-900   { color: rgb(var(--ink-900)); }

/* ---- Auth page (split-panel login) ---- */
.auth-page {
  min-height: 100vh;
  display: flex;
  background: var(--gradient-mesh);
}
.auth-brand-panel {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 50%;
  padding: 3rem;
  position: relative;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .auth-brand-panel { display: flex; }
}
.auth-form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.auth-card {
  width: 100%;
  max-width: 24rem;
  background: rgb(var(--ink-800));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glow);
  border: 1px solid rgb(var(--ink-700));
  padding: 2rem;
}

/* ---- Animations ---- */
@keyframes fade-in-up {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
  animation: fade-in-up .25s ease-out;
}

@keyframes pulse-ring {
  0%   { transform: scale(.9);  opacity: .7; }
  70%, 100% { transform: scale(1.6); opacity: 0; }
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  html { font-size: 14px; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
}

/* ===================== DARK THEME GLOBAL OVERRIDES ===================== */
/* Override Tailwind hardcoded white/light utilities for dark theme.
   These run at the end of the file so they win without !important in most
   cases; !important is added only where specificity would otherwise lose. */

.bg-white           { background-color: rgb(var(--ink-800)) !important; }
.bg-gray-50,
.bg-slate-50        { background-color: rgb(var(--ink-900)) !important; }
.bg-ink-50          { background-color: rgb(var(--ink-900)) !important; }
.bg-ink-100         { background-color: rgb(var(--ink-800)) !important; }

/* Icon/badge backgrounds – swap brand-50 pill to a dark tint */
.bg-brand-50        { background-color: rgba(40,217,189,.12) !important; }

/* Text that was designed for white backgrounds */
.text-ink-800,
.text-ink-900       { color: rgb(var(--ink-100)) !important; }
.text-ink-700       { color: rgb(var(--ink-200)) !important; }
.text-ink-600       { color: rgb(var(--ink-300)) !important; }
.text-ink-500,
.text-ink-400       { color: rgb(var(--ink-400)) !important; }

/* Borders that become invisible on dark */
.border-ink-100     { border-color: rgb(var(--ink-700)) !important; }
.border-ink-200     { border-color: rgb(var(--ink-600)) !important; }

/* Nav hover states */
.hover\:bg-brand-50:hover  { background-color: rgba(40,217,189,.12) !important; }
.hover\:bg-ink-100:hover   { background-color: rgb(var(--ink-800)) !important; }

/* Ensure header/nav always dark */
header { background-color: rgb(var(--ink-900)) !important; border-bottom-color: rgba(40,217,189,.15) !important; }

/* ======== Icon-only action buttons (admin) ======== */
/* Row-level action buttons: icon only, outlined, transparent bg */
.admin-content .btn-edit,
.admin-content .btn-view,
.admin-content .btn-delete,
.admin-content .btn-toggle,
.admin-content .btn-send,
.admin-content .btn-update  {
    font-size: 0 !important;
    padding: 6px !important;
    width: 30px !important; height: 30px !important; min-width: 30px !important;
    background: transparent !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    margin: 0 2px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    vertical-align: middle !important;
    transition: all .18s !important;
}
.admin-content .btn-edit svg,
.admin-content .btn-view svg,
.admin-content .btn-delete svg,
.admin-content .btn-toggle svg,
.admin-content .btn-send svg,
.admin-content .btn-update svg { width: 15px !important; height: 15px !important; flex-shrink: 0; }

.admin-content .btn-update { border: 1px solid rgba(40,217,189,.5) !important; color: rgb(40,217,189) !important; }
.admin-content .btn-update:hover { border-color: rgb(40,217,189) !important; background: rgba(40,217,189,.1) !important; box-shadow: 0 0 10px rgba(40,217,189,.4) !important; }

.admin-content .btn-edit   { border: 1px solid rgba(40,217,189,.5) !important; color: rgb(40,217,189) !important; }
.admin-content .btn-edit:hover { border-color: rgb(40,217,189) !important; background: rgba(40,217,189,.1) !important; box-shadow: 0 0 10px rgba(40,217,189,.4) !important; }

.admin-content .btn-view   { border: 1px solid rgba(99,179,237,.5) !important; color: #63b3ed !important; }
.admin-content .btn-view:hover { border-color: #63b3ed !important; background: rgba(99,179,237,.1) !important; box-shadow: 0 0 10px rgba(99,179,237,.4) !important; }

.admin-content .btn-delete { border: 1px solid rgba(239,68,68,.5) !important; color: #f87171 !important; }
.admin-content .btn-delete:hover { border-color: #f87171 !important; background: rgba(239,68,68,.1) !important; box-shadow: 0 0 10px rgba(239,68,68,.4) !important; }

.admin-content .btn-toggle { border: 1px solid rgba(245,158,11,.5) !important; color: #fbbf24 !important; }
.admin-content .btn-toggle:hover { border-color: #fbbf24 !important; background: rgba(245,158,11,.1) !important; box-shadow: 0 0 10px rgba(245,158,11,.4) !important; }

.admin-content .btn-send   { border: 1px solid rgba(139,92,246,.5) !important; color: #a78bfa !important; }
.admin-content .btn-send:hover { border-color: #a78bfa !important; background: rgba(139,92,246,.1) !important; box-shadow: 0 0 10px rgba(139,92,246,.4) !important; }

/* Products btn-icon dark overrides */
.admin-content .btn-icon {
    border-color: rgba(40,217,189,.3) !important;
    color: rgb(var(--ink-300)) !important;
    background: transparent !important;
}
.admin-content .btn-icon:hover {
    background: rgba(40,217,189,.08) !important;
    border-color: rgb(40,217,189) !important;
    color: rgb(40,217,189) !important;
}
.admin-content .btn-icon-danger:hover {
    background: rgba(239,68,68,.08) !important;
    border-color: rgba(239,68,68,.6) !important;
    color: #f87171 !important;
}

/* "New X" add buttons → compact outline, keep SVG + text */
.admin-content .btn-add,
.admin-content a.btn-add   {
    background: transparent !important;
    border: 1px solid rgba(40,217,189,.5) !important;
    color: rgb(40,217,189) !important;
    padding: 7px 14px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    gap: 6px !important;
    transform: none !important;
    box-shadow: none !important;
}
.admin-content .btn-add:hover,
.admin-content a.btn-add:hover {
    background: rgba(40,217,189,.1) !important;
    border-color: rgb(40,217,189) !important;
    box-shadow: 0 0 10px rgba(40,217,189,.3) !important;
    transform: none !important;
}
.admin-content .btn-add svg { stroke: rgb(40,217,189) !important; }

/* ---- Admin content: broad generic dark overrides for all per-page CSS ---- */
/* Catches any class containing "card", "panel", "box", "catalog", "section-" etc.
   so every admin page gets dark cards without editing each file individually.   */

/* Headings + labels inside admin content → always light */
.admin-content h1,
.admin-content h2,
.admin-content h3,
.admin-content h4,
.admin-content h5,
.admin-content h6               { color: rgb(var(--ink-50))  !important; }
.admin-content p                { color: rgb(var(--ink-300)) !important; }
.admin-content label            { color: rgb(var(--ink-200)) !important; }

/* Container/wrapper divs → near-black background */
.admin-content [class*="container"],
.admin-content [class*="-container"] { background: rgb(var(--ink-900)) !important; }

/* Card / panel / box / catalog backgrounds → dark card */
.admin-content [class*="card"],
.admin-content [class*="-card"],
.admin-content [class*="panel"],
.admin-content [class*="catalog"],
.admin-content [class*="-section"],
.admin-content [class*="-box"]  { background: rgb(var(--ink-800)) !important;
                                   border-color: rgba(40,217,189,.12) !important; }

/* Card header separators */
.admin-content [class*="card-header"],
.admin-content [class*="-header"] { border-bottom-color: rgba(40,217,189,.15) !important; }

/* Icon pill backgrounds inside cards */
.admin-content [class*="card-icon"],
.admin-content [class*="-icon"]  { background: rgba(40,217,189,.1) !important; }

/* Status / badge colours */
.admin-content [class*="status-active"],
.admin-content [class*="-active"]   { background: rgba(40,217,189,.18) !important;
                                       color: rgb(40,217,189) !important; }
.admin-content [class*="status-inactive"],
.admin-content [class*="status-no"] { background: rgba(239,68,68,.18) !important;
                                       color: #f87171 !important; }

/* Feature/list item text */
.admin-content [class*="feature"] li,
.admin-content [class*="description"],
.admin-content [class*="subtitle"]   { color: rgb(var(--ink-300)) !important; }

/* Action / link items inside cards */
.admin-content [class*="action-item"] { background: rgba(255,255,255,.03) !important;
                                         border-color: rgba(40,217,189,.15) !important;
                                         color: rgb(var(--ink-200)) !important; }

/* ---- Global table dark overrides (all admin pages) ---- */
table                       { background: transparent !important; color: rgb(var(--ink-200)); }
table thead,
table thead tr              { background: rgba(14,18,22,.8) !important; }
table th                    { background: transparent !important;
                              color: rgb(var(--ink-400)) !important;
                              border-color: rgba(40,217,189,.15) !important; }
table td                    { color: rgb(var(--ink-200)) !important;
                              border-color: rgba(40,217,189,.08) !important; }
table tbody tr:hover        { background: rgba(40,217,189,.04) !important; }
/* Common Tailwind table utilities used in admin pages */
.table-auto, .table-fixed   { background: transparent !important; }
thead.bg-gray-50,
thead.bg-ink-50             { background: rgba(14,18,22,.8) !important; }