/* ============================================
   BLADESMITH ADMIN V2 - THEME & COLOR SYSTEM
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:wght@300;400&family=Outfit:wght@200;300;400;500;600;700&display=swap');

:root {
  /* ===== BRAND COLORS ===== */
  --primary-500: #D4500A;      /* Ember */
  --primary-600: #9A3A07;      /* Ember Dark */
  --primary-400: #F06020;      /* Ember Light */
  --accent-500: #C8A96E;       /* Gold */
  --accent-600: #9A7B3A;       /* Gold Dark */
  --accent-400: #E8C98E;       /* Gold Light */

  /* ===== BACKGROUNDS ===== */
  --bg-primary: #050505;       /* Deep Dark */
  --bg-secondary: #0B0B0B;     /* Dark Level 1 */
  --bg-tertiary: #111111;      /* Dark Level 2 */
  --bg-quaternary: #181818;    /* Dark Level 3 */
  --bg-quinary: #222222;       /* Dark Level 4 */

  /* ===== TEXT COLORS ===== */
  --text-primary: #F2F0EC;     /* Light Text */
  --text-secondary: #CCCCCC;   /* Medium Text */
  --text-tertiary: #9A9A9A;    /* Muted Text */
  --text-disabled: #555555;    /* Disabled Text */

  /* ===== BORDERS & DIVIDERS ===== */
  --border-color: rgba(212, 80, 10, 0.28);   /* Ember with opacity */
  --border-light: rgba(212, 80, 10, 0.12);   /* Lighter border */
  --border-hover: rgba(212, 80, 10, 0.45);   /* Hover border */
  --divider-color: rgba(255, 255, 255, 0.055);

  /* ===== GLOWS & EFFECTS ===== */
  --glow: rgba(212, 80, 10, 0.18);           /* Ember Glow */
  --glow-lg: rgba(212, 80, 10, 0.25);        /* Large Glow */
  --glow-accent: rgba(200, 169, 110, 0.12);  /* Gold Glow */
  --glow-accent-lg: rgba(200, 169, 110, 0.18);

  /* ===== SEMANTIC COLORS ===== */
  --success-500: #10B981;
  --success-600: #059669;
  --success-400: #6EE7B7;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --warning-400: #FCD34D;
  --error-500: #EF4444;
  --error-600: #DC2626;
  --error-400: #FCA5A5;
  --info-500: #3B82F6;
  --info-600: #1D4ED8;
  --info-400: #93C5FD;

  /* ===== SPACING ===== */
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 1.25rem 1.5625rem -0.3125rem rgba(0, 0, 0, 0.7);
  --shadow-2xl: 0 1.5625rem 3.125rem -0.75rem rgba(0, 0, 0, 0.8);
  --shadow-ember: 0 0 1.25rem rgba(212, 80, 10, 0.3);
  --shadow-ember-lg: 0 0 2.5rem rgba(212, 80, 10, 0.4);

  /* ===== TRANSITIONS ===== */
  --transition-fast: 0.15s ease-in-out;
  --transition-base: 0.25s ease-in-out;
  --transition-slow: 0.35s ease-in-out;

  /* ===== TYPOGRAPHY ===== */
  --font-primary: 'Outfit', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-heading: 'Bebas Neue', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* ===== Z-INDEX ===== */
  --z-hide: -1;
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 50;
  --z-fixed: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
  --z-notification: 700;
}

/* ===== LIGHT THEME ===== */
html[data-theme="light"] {
  /* ===== BRAND COLORS ===== */
  --primary-500: #D4500A;      /* Ember */
  --primary-600: #9A3A07;      /* Ember Dark */
  --primary-400: #F06020;      /* Ember Light */
  --accent-500: #C8A96E;       /* Gold */
  --accent-600: #9A7B3A;       /* Gold Dark */
  --accent-400: #E8C98E;       /* Gold Light */

  /* ===== BACKGROUNDS - Light ===== */
  --bg-primary: #F9F8F6;       /* Off-white */
  --bg-secondary: #FFFFFF;     /* White */
  --bg-tertiary: #F3F0ED;      /* Light gray */
  --bg-quaternary: #E8E6E0;    /* Medium gray */
  --bg-quinary: #D9D6D0;       /* Darker gray */

  /* ===== TEXT COLORS - Light ===== */
  --text-primary: #1F1F1F;     /* Dark text */
  --text-secondary: #555555;   /* Medium text */
  --text-tertiary: #888888;    /* Muted text */
  --text-disabled: #CCCCCC;    /* Disabled text */

  /* ===== BORDERS & DIVIDERS - Light ===== */
  --border-color: rgba(212, 80, 10, 0.15);   /* Ember with opacity */
  --border-light: rgba(212, 80, 10, 0.08);   /* Lighter border */
  --border-hover: rgba(212, 80, 10, 0.25);   /* Hover border */
  --divider-color: rgba(0, 0, 0, 0.08);

  /* ===== GLOWS & EFFECTS - Light ===== */
  --glow: rgba(212, 80, 10, 0.1);            /* Ember Glow */
  --glow-lg: rgba(212, 80, 10, 0.15);        /* Large Glow */
  --glow-accent: rgba(200, 169, 110, 0.08);  /* Gold Glow */
  --glow-accent-lg: rgba(200, 169, 110, 0.12);

  /* ===== SHADOWS - Light ===== */
  --shadow-sm: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 1.25rem 1.5625rem -0.3125rem rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 1.5625rem 3.125rem -0.75rem rgba(0, 0, 0, 0.25);
  --shadow-ember: 0 0 1.25rem rgba(212, 80, 10, 0.15);
  --shadow-ember-lg: 0 0 2.5rem rgba(212, 80, 10, 0.2);
}

/* ===== SCROLLBAR STYLING ===== */
::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--primary-600); border-radius: var(--radius-lg); transition: background var(--transition-base); }
::-webkit-scrollbar-thumb:hover { background: var(--primary-500); }
html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-tertiary); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--primary-400); }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--primary-500); }

/* ===== BASE RESET ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--font-primary); font-size: 0.875rem; line-height: 1.6; color: var(--text-primary); background-color: var(--bg-primary); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; }
h1, h2 { font-family: var(--font-heading); letter-spacing: 0.03em; }
h1 { font-size: 2rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } h5 { font-size: 1.1rem; } h6 { font-size: 1rem; }

p { margin-bottom: 1rem; color: var(--text-secondary); }
a { color: var(--primary-400); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--primary-500); }
code, pre { font-family: var(--font-mono); background-color: var(--bg-tertiary); color: var(--accent-400); border-radius: var(--radius-md); }
code { padding: 0.2rem 0.4rem; font-size: 0.85rem; }
pre { padding: 1rem; overflow-x: auto; margin-bottom: 1rem; }

button { font-family: var(--font-primary); cursor: pointer; border: none; border-radius: var(--radius-lg); font-weight: 600; transition: all var(--transition-fast); }
.btn { padding: 0.75rem 1.25rem; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.5rem; user-select: none; }
.btn-primary { background: linear-gradient(135deg, var(--primary-500), var(--primary-400)); color: var(--bg-primary); box-shadow: var(--shadow-ember); }
.btn-primary:hover { box-shadow: var(--shadow-ember-lg); transform: translateY(-0.125rem); }
.btn-secondary { background-color: var(--bg-quaternary); color: var(--text-primary); border: 0.0625rem solid var(--border-color); }
.btn-secondary:hover { background-color: var(--bg-quinary); border-color: var(--border-hover); }
.btn-ghost { background-color: transparent; color: var(--primary-400); border: 0.0625rem solid var(--border-color); }
.btn-ghost:hover { background-color: var(--glow); border-color: var(--primary-500); }

input, textarea, select { font-family: var(--font-primary); font-size: 0.9rem; background-color: var(--bg-tertiary); color: var(--text-primary); border: 0.0625rem solid var(--border-color); border-radius: var(--radius-md); padding: 0.75rem; transition: all var(--transition-fast); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 0.1875rem var(--glow); }
input::placeholder, textarea::placeholder { color: var(--text-tertiary); }

table { width: 100%; border-collapse: collapse; background-color: var(--bg-secondary); border-radius: var(--radius-lg); overflow: hidden; }
thead { background-color: var(--bg-tertiary); border-bottom: 0.0625rem solid var(--border-color); }
th { padding: 1rem; text-align: left; color: var(--text-secondary); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.0312rem; }
td { padding: 0.75rem 1rem; border-bottom: 0.0625rem solid var(--border-light); }
tbody tr { transition: background-color var(--transition-fast); }
tbody tr:hover { background-color: var(--bg-tertiary); }

.card { background-color: var(--bg-secondary); border: 0.0625rem solid var(--border-color); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-sm); transition: all var(--transition-base); }
.card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); }
.card-header { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 0.0625rem solid var(--border-light); }
.card-title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.card-subtitle { font-size: 0.9rem; color: var(--text-tertiary); }

.badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem; font-size: 0.75rem; font-weight: 600; border-radius: var(--radius-xl); text-transform: uppercase; letter-spacing: 0.0312rem; }
.badge-primary { background-color: var(--glow); color: var(--primary-400); border: 0.0625rem solid var(--primary-600); }
.badge-success { background-color: rgba(16, 185, 129, 0.1); color: var(--success-400); border: 0.0625rem solid rgba(16, 185, 129, 0.3); }
.badge-warning { background-color: rgba(245, 158, 11, 0.1); color: var(--warning-400); border: 0.0625rem solid rgba(245, 158, 11, 0.3); }
.badge-error { background-color: rgba(239, 68, 68, 0.1); color: var(--error-400); border: 0.0625rem solid rgba(239, 68, 68, 0.3); }

.alert { padding: 1rem; border-radius: var(--radius-lg); border-left: 0.25rem solid; background-color: var(--bg-secondary); }
.alert-success { border-color: var(--success-500); background-color: rgba(16, 185, 129, 0.05); }
.alert-warning { border-color: var(--warning-500); background-color: rgba(245, 158, 11, 0.05); }
.alert-error { border-color: var(--error-500); background-color: rgba(239, 68, 68, 0.05); }
.alert-info { border-color: var(--info-500); background-color: rgba(59, 130, 246, 0.05); }

.text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .text-disabled { color: var(--text-disabled); }
.text-success { color: var(--success-500); } .text-warning { color: var(--warning-500); } .text-error { color: var(--error-500); } .text-info { color: var(--info-500); }
.bg-primary { background-color: var(--bg-primary); } .bg-secondary { background-color: var(--bg-secondary); } .bg-tertiary { background-color: var(--bg-tertiary); }
.border-primary { border-color: var(--border-color); } .border-hover { border-color: var(--border-hover); }
.gap-xs { gap: 0.5rem; } .gap-sm { gap: 0.75rem; } .gap-md { gap: 1rem; } .gap-lg { gap: 1.5rem; } .gap-xl { gap: 2rem; }
.rounded-xs { border-radius: var(--radius-xs); } .rounded-sm { border-radius: var(--radius-sm); } .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-2xl { border-radius: var(--radius-2xl); }
.shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .shadow-xl { box-shadow: var(--shadow-xl); } .shadow-2xl { box-shadow: var(--shadow-2xl); }
.transition-fast { transition: all var(--transition-fast); } .transition-base { transition: all var(--transition-base); } .transition-slow { transition: all var(--transition-slow); }

body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.055'/%3E%3C/svg%3E"); pointer-events: none; z-index: var(--z-hide); mix-blend-mode: overlay; opacity: 0.1; }

/* ===== CHART CARD / SECTION CARDS ===== */
.chart-card { background: var(--bg-secondary); border: 0.0625rem solid var(--border-color); border-radius: var(--radius-xl); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem; }
.section-title { display: flex; flex-direction: column; gap: 0.15rem; }
.section-subtitle { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary-500); }
.pill { display: inline-flex; align-items: center; padding: 0.3rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 999px; background: var(--glow); color: var(--primary-400); border: 0.0625rem solid var(--border-color); }

/* ===== RESPONSIVE TABLE WRAPPER ===== */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); }

/* ===== SETTINGS GRID ===== */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.settings-grid-half { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.settings-tabs { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; flex-wrap: wrap; border-bottom: 0.0625rem solid var(--border-light); padding-bottom: 0.75rem; }
.nav-tab-btn { padding: 0.6rem 1rem; border-radius: var(--radius-md); border: 0.0625rem solid transparent; background: none; color: var(--text-tertiary); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all var(--transition-fast); }
.nav-tab-btn:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.nav-tab-btn.active { color: #fff; background: linear-gradient(135deg, var(--primary-500), var(--primary-600)); border-color: var(--primary-600); }
.tab-content { display: none; } .tab-content.active { display: block; }

/* ===== THEME TOGGLE (global) ===== */
.theme-toggle {
  width: 3.125rem;
  height: 1.75rem;
  background-color: var(--bg-tertiary);
  border: 0.0625rem solid var(--border-color);
  border-radius: 1.25rem;
  cursor: pointer;
  position: relative;
  transition: background-color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle.light { background-color: var(--bg-secondary); }
.theme-toggle-dot {
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--bg-primary);
  border-radius: 50%;
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  transition: left var(--transition-fast), background-color var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--text-primary);
}
.theme-toggle.light .theme-toggle-dot { left: calc(100% - 1.625rem); }

/* ===== FEATURED PRODUCTS CARDS ===== */
.featured-product-card {
  display: flex;
  gap: 1rem;
  background: linear-gradient(180deg, var(--bg-secondary), var(--bg-tertiary));
  border: 0.0625rem solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  overflow: hidden;
}

.featured-product-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-0.125rem);
}

.featured-product-thumb {
  width: 7.5rem;
  height: 7.5rem;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 0.0625rem solid var(--border-light);
  background-color: var(--bg-quaternary);
}

.featured-product-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.featured-product-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.featured-product-info {
  flex: 1;
  min-width: 0;
}

.featured-product-name {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.featured-product-meta {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.featured-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  flex-shrink: 0;
  white-space: nowrap;
  user-select: none;
}

.featured-toggle input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  cursor: pointer;
  accent-color: var(--primary-500);
}

.featured-product-description {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================
   VARIABLE ALIASES — backward compatibility
   ============================================ */
:root {
  --primary: var(--primary-500);
  --text-muted: var(--text-tertiary);
  --bg-hover: var(--bg-tertiary);
  --card-bg: var(--bg-secondary);
  --accent: var(--accent-500);
  --ember: var(--primary-500);
}
html[data-theme="light"] {
  --primary: var(--primary-500);
  --text-muted: var(--text-tertiary);
  --bg-hover: var(--bg-tertiary);
  --card-bg: var(--bg-secondary);
  --accent: var(--accent-500);
  --ember: var(--primary-500);
}