/* Consolidated Dark Theme Styles for TaskMaster UI */
/* Design Tokens */
:root, body.theme-dark {
  --primary-color: #1173d4;
  --primary-color-hover: #0d5aab;
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  --primary-950: #172554;

  --color-bg-body: #111418;
  --color-bg-body-alt: #111827;
  --color-bg-surface-1: #181C20;
  --color-bg-surface-2: #1c2127;
  --color-bg-surface-3: #1e2730;
  --color-bg-surface-4: #23272b;
  --color-bg-surface-5: #283039;
  --color-border: #283039;
  --color-border-alt: #23272b;
  --color-text: #ffffff;
  --color-text-soft: #9ca3af;
  --color-text-muted: #9dabb9;
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: .9rem;
  --transition-fast: .15s ease;

  /* Bootstrap Colors (Dark) */
  --bs-heading-color: #ffffff;
  --bs-btn-color: #8d8d8d;
  --bs-table-bg: #1e2730 !important;
  --bs-btn-color: #8d8d8d;

  /* Semantic (Dark) */
  --color-success: #16a34a;
  --color-success-bg: rgba(22,163,74,0.5);
  --color-success-bg-soft: rgba(22,163,74,0.15);
  --color-success-text-soft: #bbf7d0;
  --color-danger: #dc2626;
  --color-danger-bg: rgba(220,38,38,0.5);
  --color-danger-bg-soft: rgba(220,38,38,0.15);
  --color-danger-text-soft: #fca5a5;
  --color-warning: #d97706;
  --color-warning-bg: rgba(217,119,6,0.5);
  --color-warning-bg-soft: rgba(217,119,6,0.15);
  --color-warning-text-soft: #fde68a;
  --color-info: var(--primary-color);
  --color-info-bg: rgba(37,99,235,0.5);
  --color-info-bg-soft: rgba(59,130,246,0.15);
  --color-info-text-soft: #93c5fd;
  --color-purple: #7e22ce;
  --color-purple-bg: rgba(126,34,206,0.5);
  --color-purple-bg-soft: rgba(126,34,206,0.15);
  --color-purple-text-soft: #c4b5fd;
  --color-neutral-bg: #23272b;
  --color-neutral-text: #d1d5db;
}

/* Light Theme Tokens */
body.theme-light {
  --color-bg-body: #f1f5f9;
  --color-bg-body-alt: #ffffff;
  --color-bg-surface-1: #ffffff;
  --color-bg-surface-2: #f8fafc;
  --color-bg-surface-3: #f1f5f9;
  --color-bg-surface-4: #ffffff;
  --color-bg-surface-5: #e2e8f0;
  --color-border: #d4dbe4;
  --color-border-alt: #cbd5e1;
  --color-text: #1f2937;
  --color-text-soft: #64748b;
  --color-text-muted: #6b7280;
  color-scheme: light;

  /* Semantic (Light) */
  --color-success: #15803d;
  --color-success-bg: rgba(22,163,74,0.15);
  --color-success-bg-soft: rgba(22,163,74,0.08);
  --color-success-text-soft: #166534;
  --color-danger: #b91c1c;
  --color-danger-bg: rgba(239,68,68,0.15);
  --color-danger-bg-soft: rgba(239,68,68,0.08);
  --color-danger-text-soft: #991b1b;
  --color-warning: #92400e;
  --color-warning-bg: rgba(202,138,4,0.15);
  --color-warning-bg-soft: rgba(202,138,4,0.08);
  --color-warning-text-soft: #854d0e;
  --color-info: var(--primary-color);
  --color-info-bg: rgba(59,130,246,0.15);
  --color-info-bg-soft: rgba(59,130,246,0.08);
  --color-info-text-soft: #1d4ed8;
  --color-purple: #6d28d9;
  --color-purple-bg: rgba(126,34,206,0.15);
  --color-purple-bg-soft: rgba(126,34,206,0.08);
  --color-purple-text-soft: #5b21b6;
  --color-neutral-bg: #f1f5f9;
  --color-neutral-text: #475569;
}

body {
  background: var(--color-bg-body);
  color: var(--color-text);
  font-family: Inter, 'Noto Sans', sans-serif;
}

/* ---------------- Light Theme Component Overrides ---------------- */
body.theme-light .bg-header { background: var(--color-bg-surface-1); border-bottom:1px solid #e2e8f0; }
body.theme-light .sidebar { background:#ffffff; border-right:1px solid #e2e8f0; backdrop-filter:none; }
body.theme-light .sidebar a { color:#475569; }
body.theme-light .sidebar a:hover { background:#f1f5f9; color:#1e293b; }
body.theme-light .sidebar a.active { background: var(--primary-color); color:#fff; }
body.theme-light .card-dark, body.theme-light .bg-card, body.theme-light .stat-card { background: var(--color-bg-surface-4); color:var(--color-text); }
body.theme-light .panel { background: var(--color-bg-surface-1); border:1px solid #e2e8f0; }
body.theme-light .panel-header { border-bottom:1px solid #e2e8f0; }
body.theme-light .form-section { background: var(--color-bg-surface-1); }
body.theme-light .form-label { color:#475569; }
body.theme-light .form-control, body.theme-light .form-select, body.theme-light .form-input, body.theme-light .form-control-custom, body.theme-light .form-select-custom, body.theme-light .input-custom { background: var(--color-bg-surface-2); color:var(--color-text); border:1px solid #d4dbe4; }
body.theme-light .form-control:focus, body.theme-light .form-select:focus, body.theme-light .form-input:focus, body.theme-light .form-control-custom:focus, body.theme-light .form-select-custom:focus, body.theme-light .input-custom:focus { box-shadow:0 0 0 .2rem rgba(17,115,212,.25); }
body.theme-light .search-input { background:#ffffff; border:1px solid #d4dbe4; color:#1f2937; }
body.theme-light .search-input:focus { background:#f8fafc; }
body.theme-light .table-dark-custom { background:#ffffff; color:#1f2937; }
body.theme-light .table-dark-custom thead { background:#f1f5f9; }
body.theme-light .table-dark-custom th { color:#475569; }
body.theme-light .table-dark-custom td { border-top:1px solid #e2e8f0; }
body.theme-light .status-active { background:rgba(34,197,94,.15); color:#15803d; }
body.theme-light .status-inactive { background:rgba(239,68,68,.15); color:#b91c1c; }
body.theme-light .badge-status-inprogress { background: rgba(59,130,246,0.15); color:#1d4ed8; }
body.theme-light .badge-status-completed { background: rgba(22,163,74,0.15); color:#15803d; }
body.theme-light .badge-status-review { background: rgba(126,34,206,0.15); color:#6d28d9; }
body.theme-light .badge-status-planning, body.theme-light .badge-status-pending, body.theme-light .badge-priority-low { background:#f1f5f9; color:#475569; }
body.theme-light .badge-priority-high { background: rgba(127,29,29,0.15); color:#b91c1c; }
body.theme-light .badge-priority-normal { background: rgba(202,138,4,0.15); color:#92400e; }
body.theme-light .btn-custom, body.theme-light .btn-action, body.theme-light .btn-secondary-custom { background: var(--color-bg-surface-5); color:#1f2937; }
body.theme-light .btn-custom:hover, body.theme-light .btn-action:hover, body.theme-light .btn-secondary-custom:hover { background:#d8dee6; }
body.theme-light .btn-action { color:#64748b; }
body.theme-light .btn-outline-soft { border:1px solid #cbd5e1; color:#334155; }
body.theme-light .btn-outline-soft:hover { background:#f1f5f9; color:#1f2937; }
body.theme-light .bg-secondary-custom { background: var(--color-bg-surface-2); }
body.theme-light .notification-dot { border:2px solid #ffffff; }
body.theme-light .progress-bg { background:#e2e8f0; }
body.theme-light .card-login { background:#ffffff; color:#1f2937; }
body.theme-light .card-login .form-control { background:#f1f5f9; border:1px solid #d4dbe4; }
body.theme-light .card-login .card-footer { background:#f1f5f9; color:#64748b; }
body.theme-light a.table-link.edit { color:#1d4ed8; }
body.theme-light a.table-link.edit:hover { color:#2563eb; }
body.theme-light a.table-link.delete { color:#b91c1c; }
body.theme-light a.table-link.delete:hover { color:#dc2626; }
body.theme-light .custom-scrollbar::-webkit-scrollbar-track { background:#f1f5f9; }
body.theme-light .custom-scrollbar::-webkit-scrollbar-thumb { background:#cbd5e1; }
body.theme-light .custom-scrollbar::-webkit-scrollbar-thumb:hover { background:#94a3b8; }
body.theme-light .sticky-date { background: var(--color-bg-body); }
body.theme-light .bg-surface { background: var(--color-bg-surface-1); }
body.theme-light .bg-surface .text-dark { color: var(--color-text); }
body.theme-light .text-white { color: var(--color-text); }
body.theme-light .text-soft, body.theme-light .text-secondary-custom, body.theme-light .text-muted-custom { color: var(--color-text-soft) !important; }



/* Theme Dark Overrides */
body.theme-dark .btn-custom, body.theme-dark .btn-action, body.theme-dark .btn-secondary-custom {
    background: var(--color-bg-surface-5);
    color: #e4eefc;
}

body.theme-dark .form-control, body.theme-dark .form-select, body.theme-dark .form-input, body.theme-dark .form-control-custom, body.theme-dark .form-select-custom, body.theme-dark .input-custom {
    background: var(--color-bg-surface-3);
    color: var(--color-text);
    /* border: 1px solid #d4dbe4; */
}

body.theme-dark .form-control, body.theme-dark .form-select, body.theme-dark .form-input, body.theme-dark .form-control-custom::placeholder, body.theme-dark .form-select-custom, body.theme-dark .input-custom::placeholder {
    color: #9ca3af;
}

body.theme-dark .material-symbols-outlined {
    color: white;
}

body.theme-dark .form-control, .body.theme-dark .form-select, .body.theme-dark .form-input, .body.theme-dark .form-control-custom, .body.theme-dark .form-select-custom, .body.theme-dark .input-custom { border:1px solid #5b5d60; }

body.theme-dark .table {
    --bs-table-bg: transparent !important;
}

body.theme-dark .bg-card, body.theme-dark .card-dark, body.theme-dark .stat-card {
  color: var(--color-text);
}

/* Theme-Aware Utilities */
.text-heading { color: var(--color-text) !important; }

/* Generic card style used in pages */
.card-custom { background: var(--color-bg-surface-4); border:1px solid var(--color-border-alt); border-radius: var(--radius-md); color: var(--color-text); }
body.theme-light .card-custom { background: var(--color-bg-surface-1); border-color: #e2e8f0; }

/* Override Bootstrap card so it respects theme (uses !important to beat bootstrap order) */
body .card { background: var(--color-bg-surface-4) !important; border:1px solid var(--color-border-alt) !important; color: var(--color-text); }
body.theme-light .card { background: var(--color-bg-surface-1) !important; border-color:#e2e8f0 !important; color: var(--color-text); }

/* Main application scroll area */
.app-main { background: var(--color-bg-body); }


/* Typography helpers */
.text-soft, .text-secondary-custom, .text-muted-custom { color: var(--color-text-soft) !important; }
.text-amber-custom { color: #fde68a !important; }
.text-red-custom { color: #f87171 !important; }

/* Layout / Containers */
.bg-header { background: var(--color-bg-surface-1); border-bottom: 1px solid var(--color-bg-surface-5); }
.bg-card, .card-dark, .stat-card { background: var(--color-bg-surface-4); border-radius: var(--radius-md); }
.card-dark { border:1px solid rgba(255,255,255,0.08); }
.stat-card { padding:1.5rem; display:flex; flex-direction:column; gap:.35rem; }
.stat-card h4 { font-size:2.2rem; font-weight:700; margin:0; }

/* Sidebar */
.sidebar { width:260px; background: rgba(31,41,55,0.95); border-right:1px solid rgba(55,65,81,0.5); backdrop-filter: blur(4px); }
.sidebar a { color: rgba(255,255,255,0.75); text-decoration:none; border-radius:.55rem; padding:.6rem 1rem; font-size:.85rem; font-weight:500; display:flex; align-items:center; gap:.75rem; transition: var(--transition-fast) background, var(--transition-fast) color; }
.sidebar a:hover { background: rgba(55,65,81,0.5); color:#fff; }
.sidebar a.active { background: var(--primary-color); color:#fff; }

/* Profile Images */
.profile-img { background-size:cover; background-position:center; border-radius:50%; width:40px; height:40px; }
.avatar { width:40px; height:40px; border-radius:50%; background-size:cover; background-position:center; }
.avatar-xl { width:128px; height:128px; background-size:cover; background-position:center; border-radius:50%; }

/* Buttons */
.btn-custom, .btn-action, .btn-secondary-custom { background: var(--color-bg-surface-5); color:#fff; border-radius: var(--radius-sm); font-weight:500; font-size:.95rem; transition: var(--transition-fast) background, var(--transition-fast) color; }
.btn-custom:hover, .btn-action:hover, .btn-secondary-custom:hover { background:#3b4754; color:#fff; }
.btn-action { background:transparent; color: var(--color-text-soft); border:none; padding:.5rem; }
.btn-action.delete:hover { color:#ef4444; }
.btn-primary-custom, .btn-primary { background: var(--primary-color) !important; border-color: var(--primary-color) !important; color:#fff !important; font-weight:600; }
.btn-primary-custom:hover, .btn-primary:hover { background: var(--primary-color-hover) !important; border-color: var(--primary-color-hover) !important; }
.btn-soft { background:rgba(255,255,255,0.1); color:#fff; border:none; }
.btn-soft:hover { background:rgba(255,255,255,0.18); }
.btn-outline-soft { background:transparent; border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.85); }
.btn-outline-soft:hover { background:rgba(255,255,255,0.12); color:#fff; }

/* Forms */
.form-label { color:rgba(255,255,255,0.7); font-size:.8rem; margin-bottom:.3rem; }
.form-control, .form-select, .form-input, .form-control-custom, .form-select-custom, .input-custom { background: var(--color-bg-surface-5); color:#fff; border:1px solid var(--color-bg-surface-5); border-radius: var(--radius-sm); }
.form-control-custom, .form-select-custom { height:48px; font-size:.95rem; padding:.75rem 1rem; border:none; }
.form-control:focus, .form-select:focus, .form-input:focus, .form-control-custom:focus, .form-select-custom:focus, .input-custom:focus { border-color: var(--primary-color); box-shadow:0 0 0 .2rem rgba(17,115,212,.25); outline:0; }
.form-input { font-size:.8rem; padding:.55rem .75rem; line-height:1.2; }
textarea.form-control-custom, textarea.form-input, .form-textarea { resize: vertical; }
.search-input { background:#1e2730; border:1px solid #1e2730; color:#fff; padding-left:40px; }
.search-input:focus { background:#24303b; }
.input-custom { background: #1c2127; border:1px solid #3b4754; }

/* Sections / Panels */
.form-section { background: var(--color-bg-surface-1); border-radius: var(--radius-md); padding:1.5rem; margin-bottom:2rem; }
.form-section-title { font-size:1.25rem; font-weight:700; margin-bottom:.5rem; letter-spacing:-.015em; }
.panel { background:#1e2730; border:1px solid #25323d; border-radius:.9rem; overflow:hidden; }
.panel-header { padding:1rem 1.25rem; border-bottom:1px solid #25323d; display:flex; align-items:center; justify-content:space-between; }

/* Tables */
.table-dark-custom { background: var(--color-bg-surface-4); color:#fff; }
.table-dark-custom thead { background:rgba(37,50,61,.7); }
.table-dark-custom th { font-size:.72rem; letter-spacing:.5px; text-transform:uppercase; font-weight:600; color:#94a3b8; border:0; }
.table-dark-custom td { border-top:1px solid #25323d; vertical-align:middle; font-size:.85rem; }
.table-surface th, .table-surface td { background: var(--color-bg-surface-2); color:#e5e7eb; }
.table-surface thead th { background: var(--color-bg-surface-5); color:#fff; }
.table-group-row { background: var(--color-bg-surface-4) !important; font-weight:600; }

/* Badges & Status */
.status-badge { display:inline-flex; align-items:center; font-size:.65rem; font-weight:600; padding:.25rem .55rem; border-radius:1rem; letter-spacing:.5px; }
.status-active { background: var(--color-success-bg-soft); color: var(--color-success); }
.status-inactive { background: var(--color-danger-bg-soft); color: var(--color-danger); }
.badge-status-inprogress { background: var(--color-info-bg); color: var(--color-info-text-soft); border-radius:1rem; padding:.25rem .75rem; font-size:.85rem; font-weight:600; }
.badge-status-completed { background: var(--color-success-bg); color: var(--color-success-text-soft); border-radius:1rem; padding:.25rem .75rem; font-size:.85rem; font-weight:600; }
.badge-status-review { background: var(--color-purple-bg); color: var(--color-purple-text-soft); border-radius:1rem; padding:.25rem .75rem; font-size:.85rem; font-weight:600; }
.badge-status-planning, .badge-status-pending, .badge-priority-low { background: var(--color-neutral-bg); color: var(--color-neutral-text); border-radius:1rem; padding:.25rem .75rem; font-size:.85rem; font-weight:600; }
.badge-priority-high { background: var(--color-danger-bg); color: var(--color-danger-text-soft); border-radius:1rem; padding:.25rem .75rem; font-size:.85rem; font-weight:600; }
.badge-priority-normal { background: var(--color-warning-bg); color: var(--color-warning-text-soft); border-radius:1rem; padding:.25rem .75rem; font-size:.85rem; font-weight:600; }
.badge-priority { background:#1f2937; color:#ef4444; border-radius:.5rem; padding:.5rem 1rem; font-weight:500; }
.rounded-pill-custom { border-radius:50rem; padding:.25rem .75rem; font-weight:600; font-size:.95rem; display:inline-flex; align-items:center; justify-content:center; }
.bg-green { background: var(--color-success-bg-soft); color: var(--color-success); }
.bg-yellow { background: var(--color-warning-bg-soft); color: var(--color-warning); }
.bg-red { background: var(--color-danger-bg-soft); color: var(--color-danger); }
.bg-blue { background: var(--color-info-bg-soft); color: var(--color-info); }

/* Progress / Metrics */
.progress-bar-custom, .efficiency-bar { background-color: var(--primary-color); }
.progress-bg { background:#374151; }
.efficiency-bar { border-radius:.25rem .25rem 0 0; }

/* Search / Icons */
.search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#9ca3af; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Utility */
.border-left-custom { border-left:2px solid var(--color-border-alt); position:absolute; left:-16px; top:0; height:100%; }
.sticky-date { position:sticky; top:0; background: var(--color-bg-body); z-index:2; padding:.5rem 0; }
.notification-dot { position:absolute; top:6px; right:6px; width:10px; height:10px; background:#ef4444; border-radius:50%; border:2px solid #1a202c; }

/* Login Card */
.card-login { background:#1E293B; border-radius:1.25rem; box-shadow:0 4px 32px rgba(0,0,0,0.12); overflow:hidden; }
.card-login .form-control { background:#374151; border:1px solid #374151; border-radius:1rem; padding:1rem 1rem 1rem 48px; }
.card-login .form-control:focus { border-color: var(--primary-color); box-shadow:0 0 0 .2rem rgba(17,115,212,.25); }
.card-login .form-control::placeholder { color:#9ca3af; }
.card-login .card-footer { background:#192331; color:#9ca3af; }
.input-icon { position:absolute; left:18px; top:50%; transform:translateY(-50%); color:#9ca3af; pointer-events:none; }

/* Profile Page */
.bg-secondary-custom { background: var(--color-bg-surface-5); }
.border-custom { border-color: var(--color-border) !important; }
.profile-img.profile-lg { width:128px; height:128px; box-shadow:0 0 0 4px rgba(255,255,255,0.08); }

/* Links */
a.table-link { text-decoration:none; font-weight:600; font-size:.75rem; }
a.table-link.edit { color:#60a5fa; }
a.table-link.edit:hover { color:#93c5fd; }
a.table-link.delete { color:#f87171; }
a.table-link.delete:hover { color:#fca5a5; }

/* Scrollbar (WebKit) */
.custom-scrollbar::-webkit-scrollbar { width:6px; }
.custom-scrollbar::-webkit-scrollbar-track { background:#1f2937; }
.custom-scrollbar::-webkit-scrollbar-thumb { background:#4b5563; border-radius:3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background:#6b7280; }

/* Misc */
.badge { font-weight:600; }

/* Notifications */
.notification-item { background: var(--color-bg-surface-4); border-radius: var(--radius-md); transition: background .18s ease, box-shadow .18s ease; position:relative; }
.notification-item:hover { background: var(--color-bg-surface-3); }
.notification-item .actions { transition: opacity .18s ease; }
.notification-item:hover .actions { opacity:1 !important; }
.notification-unread { box-shadow:0 0 0 1px var(--primary-color); }
.bg-primary-color { background: var(--primary-color) !important; }
.bg-success-color { background: #16a34a !important; }
.bg-warning-color { background: #d97706 !important; }
.bg-purple-600 { background:#7e22ce !important; }


/* End of consolidated styles */
/* --- Tracker Report Utilities (Bootstrap alignment) --- */
.bg-panel { background: var(--color-bg-surface-2); }
.bg-panel-alt { background: var(--color-bg-surface-5); }
.rounded-md { border-radius: var(--radius-sm); }
.shadow-md { box-shadow:0 4px 6px -1px rgba(0,0,0,.5),0 2px 4px -2px rgba(0,0,0,.5); }
.device-badge { display:inline-flex; align-items:center; font-size:.65rem; font-weight:600; padding:.35rem .7rem; border-radius:1rem; letter-spacing:.5px; }
.device-active { background:#0f5132; color:#7ee7a6; }
.device-locked { background:#665c28; color:#f5e79e; }
.device-away { background:#5c1f1f; color:#f3a5a5; }