/* /assets/theme.css - Shared theme styles for PyroTemp */

/* ============================================
   CSS Variables (Light theme default)
   ============================================ */
:root {
  --pt-bg: #f6f7f9;
  --pt-card-bg: #ffffff;
  --pt-card: #ffffff;
  --pt-text: #1e293b;
  --pt-text-muted: #6b7280;
  --pt-muted: #6b7280;
  --pt-border: #e5e7eb;
  --pt-input-bg: #ffffff;
  --pt-input-border: #dee2e6;
  --pt-navbar-bg: #ffffff;
  --pt-table-hover: rgba(0,0,0,.02);
  --pt-accent: #f59e0b;
  --pt-hot: #ef4444;
  --pt-warm: #f97316;
  --pt-cool: #3b82f6;
}

/* ============================================
   Dark Theme Variables
   ============================================ */
[data-theme="dark"] {
  --pt-bg: #1a1a2e;
  --pt-card-bg: #16213e;
  --pt-card: #16213e;
  --pt-text: #e2e8f0;
  --pt-text-muted: #94a3b8;
  --pt-muted: #94a3b8;
  --pt-border: rgba(255,255,255,.1);
  --pt-input-bg: #1a1a2e;
  --pt-input-border: #334155;
  --pt-navbar-bg: #16213e;
  --pt-table-hover: rgba(255,255,255,.05);
}

/* ============================================
   Base Styles
   ============================================ */
body {
  background: var(--pt-bg);
  color: var(--pt-text);
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============================================
   Card Styles
   ============================================ */
.pt-card {
  background: var(--pt-card-bg);
  border: 1px solid var(--pt-border);
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.pt-card:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  transform: translateY(-2px);
}

[data-theme="dark"] .pt-card {
  box-shadow: 0 10px 24px rgba(0,0,0,.3);
}

/* ============================================
   Typography
   ============================================ */
.pt-muted { color: var(--pt-muted); }
.pt-text-muted { color: var(--pt-text-muted); }
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

[data-theme="dark"] .text-muted {
  color: var(--pt-text-muted) !important;
}

/* ============================================
   Theme Toggle Button
   ============================================ */
.theme-toggle {
  background: none;
  border: 1px solid var(--pt-border);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  background: rgba(0,0,0,.05);
}

[data-theme="dark"] .theme-toggle:hover {
  background: rgba(255,255,255,.1);
}

/* ============================================
   Navbar (Admin)
   ============================================ */
[data-theme="dark"] .navbar {
  background: var(--pt-navbar-bg) !important;
  border-color: var(--pt-border) !important;
}

[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .navbar .text-muted,
[data-theme="dark"] .navbar .fw-semibold {
  color: var(--pt-text) !important;
}

[data-theme="dark"] .bg-white {
  background: var(--pt-card-bg) !important;
}

[data-theme="dark"] .bg-light {
  background: rgba(255,255,255,.03) !important;
}

[data-theme="dark"] .border-bottom {
  border-color: var(--pt-border) !important;
}

[data-theme="dark"] .card {
  background: var(--pt-card-bg);
  border-color: var(--pt-border);
  color: var(--pt-text);
}

/* ============================================
   Form Controls
   ============================================ */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: var(--pt-input-bg);
  border-color: var(--pt-input-border);
  color: var(--pt-text);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background: var(--pt-input-bg);
  border-color: #3b82f6;
  color: var(--pt-text);
}

[data-theme="dark"] .form-text {
  color: var(--pt-text-muted);
}

[data-theme="dark"] .form-label {
  color: var(--pt-text);
}

/* ============================================
   Modals
   ============================================ */
[data-theme="dark"] .modal-content {
  background: var(--pt-card-bg);
  border-color: var(--pt-border);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: var(--pt-border);
}

[data-theme="dark"] .modal-title {
  color: var(--pt-text);
}

[data-theme="dark"] .btn-close {
  filter: invert(1);
}

/* ============================================
   Tables
   ============================================ */
[data-theme="dark"] .table {
  --bs-table-bg: transparent !important;
  --bs-table-color: var(--pt-text) !important;
  --bs-table-border-color: var(--pt-border) !important;
  --bs-table-striped-bg: rgba(255,255,255,.03) !important;
  --bs-table-hover-bg: rgba(255,255,255,.05) !important;
  --bs-table-color-state: var(--pt-text) !important;
  --bs-table-bg-state: transparent !important;
  color: var(--pt-text) !important;
  border-color: var(--pt-border) !important;
  background-color: transparent !important;
}

[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent !important;
  border-bottom-color: var(--pt-border) !important;
  color: var(--pt-text) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .table tbody {
  background-color: transparent !important;
}

[data-theme="dark"] .table tbody tr {
  background-color: transparent !important;
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
  background-color: transparent !important;
  border-color: var(--pt-border) !important;
  color: var(--pt-text) !important;
}

[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light > th,
[data-theme="dark"] .table-light > td,
[data-theme="dark"] thead.table-light,
[data-theme="dark"] thead.table-light tr,
[data-theme="dark"] thead.table-light th {
  background-color: rgba(255,255,255,.05) !important;
  color: var(--pt-text) !important;
  --bs-table-bg: rgba(255,255,255,.05) !important;
}

[data-theme="dark"] .table thead {
  border-color: var(--pt-border) !important;
}

[data-theme="dark"] .table thead th {
  background-color: rgba(255,255,255,.03) !important;
  color: var(--pt-text) !important;
  border-color: var(--pt-border) !important;
}

[data-theme="dark"] .table-hover tbody tr:hover,
[data-theme="dark"] .table-hover tbody tr:hover td {
  background-color: rgba(255,255,255,.05) !important;
  --bs-table-hover-bg: rgba(255,255,255,.05) !important;
  --bs-table-bg-state: rgba(255,255,255,.05) !important;
}

[data-theme="dark"] .table-responsive {
  background-color: transparent !important;
}

/* ============================================
   Buttons
   ============================================ */
[data-theme="dark"] .btn-outline-secondary {
  color: var(--pt-text-muted);
  border-color: var(--pt-border);
}

[data-theme="dark"] .btn-outline-secondary:hover {
  background: rgba(255,255,255,.1);
  color: var(--pt-text);
}

[data-theme="dark"] .btn-outline-danger {
  color: #f87171;
  border-color: rgba(248,113,113,.5);
}

[data-theme="dark"] .btn-outline-danger:hover {
  background: rgba(248,113,113,.15);
  color: #fca5a5;
}

[data-theme="dark"] .btn-light {
  background: rgba(255,255,255,.1);
  border-color: var(--pt-border);
  color: var(--pt-text);
}

[data-theme="dark"] .btn-light:hover {
  background: rgba(255,255,255,.15);
}

/* ============================================
   Alerts
   ============================================ */
[data-theme="dark"] .alert-info {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: #93c5fd;
}

/* ============================================
   Admin Pills
   ============================================ */
.pt-pill {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .8rem;
  border: 1px solid rgba(0,0,0,.15);
}

[data-theme="dark"] .pt-pill {
  border-color: rgba(255,255,255,.2);
}

.pt-pill-owner { border-color: rgba(13,110,253,.45); }
.pt-pill-inactive { border-color: rgba(220,53,69,.45); color: #b02a37; background: rgba(220,53,69,.06); }

.pt-actions a, .pt-actions button { margin-right: .5rem; }