/* =========================================
   APP DASHBOARD THEME (Iconic Orange Glow)
   ========================================= */

/* 1. RESET & LAYOUT */
:root {
  /* --- Default Dark Mode Vars for Dashboard --- */
  --app-card-bg: rgba(15, 15, 20, 0.6);
  --app-input-bg: rgba(0, 0, 0, 0.3);
  --app-input-border: rgba(255, 255, 255, 0.15);
  --app-input-text: #fff;
  --app-td-bg: rgba(255, 255, 255, 0.03);
  --app-td-hover: rgba(255, 255, 255, 0.06);
  --app-border: rgba(255, 255, 255, 0.05);
  --app-heading: #fff;
  --app-action-icon: #fff;
  --app-table-text: #e5e5e5;
  --app-th-text: #9CA3AF;
}

:root[data-theme="light"] {
  /* --- Light Mode Overrides --- */
  --app-card-bg: #FFFFFF;
  --app-input-bg: #F9FAFB;
  --app-input-border: #D1D5DB;
  --app-input-text: #111827;
  --app-td-bg: #FAFAFA;
  --app-td-hover: #F3F4F6;
  --app-border: #E5E7EB;
  --app-heading: #111827;
  --app-action-icon: #4B5563;
  --app-table-text: #374151;
  --app-th-text: #6B7280;
}

body {
  background-color: var(--bg-deep); 
  min-height: 100vh;
}

.container {
  max-width: 1400px; 
  margin: 40px auto;
  padding: 0 20px;
}

/* 2. THE GLASS CARDS */
.hb-card {
  background: var(--app-card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 32px;
  margin-bottom: 32px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

/* 3. TYPOGRAPHY & GLOWS */
h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: var(--app-heading);
  transition: text-shadow 0.3s ease;
}

.glow-text:hover {
  color: var(--brand);
  text-shadow: 0 0 15px var(--brand-glow);
  cursor: default;
}

.muted {
  color: var(--text-muted);
  font-size: 14px;
}

/* 4. INPUTS & SELECTS */
input, select {
  width: 100%;
  background: var(--app-input-bg); 
  border: 1px solid var(--app-input-border); 
  color: var(--app-input-text); 
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 16px;
  outline: none;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
}

input:focus, select:focus {
  border-color: var(--brand);
  background: var(--app-input-bg);
  box-shadow: 0 0 0 4px rgba(255, 92, 53, 0.15); 
}

.input-group { display: block; margin-bottom: 8px; }
.label-text {
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;
}
.input-group:hover .label-text { color: var(--brand); text-shadow: 0 0 8px var(--brand-glow); }

/* 5. GRIDS */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-bottom: 24px; }
@media (max-width: 768px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* 6. BUTTONS CONTAINER */
.actions { margin-top: 32px; display: flex; gap: 8px; }

/* 7. TABLES & INTERACTIVE ROWS */
.tableWrap { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }

/* --- Header Hover Effect --- */
th {
  text-align: left; 
  color: var(--app-th-text); 
  font-size: 12px;
  text-transform: uppercase; 
  letter-spacing: 1px; 
  padding: 0 16px 8px; 
  font-weight: 600;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
th:hover {
  color: var(--brand);
  text-shadow: 0 0 12px var(--brand-glow);
  cursor: default;
}

td {
  background: var(--app-td-bg);
  padding: 16px; 
  font-size: 14px; 
  color: var(--app-table-text);
  border-top: 1px solid var(--app-border);
  border-bottom: 1px solid var(--app-border);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

tr td:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; border-left: 1px solid var(--app-border); }
tr td:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; border-right: 1px solid var(--app-border); }

tbody tr { transition: transform 0.2s ease; }
tbody tr:hover td { background: var(--app-td-hover); }

/* --- ICONIC: Row Text Glow (excluding actions column) --- */
#rulesTable tbody tr:hover td:not(.col-actions),
.acct-nest table tbody tr:hover td:not(.col-actions) {
  color: var(--brand);
  text-shadow: 0 0 10px var(--brand-glow);
}

/* 8. ICONIC CYCLES COMPLETED NUMBER */
.throttle-cycles .cycles-value {
  font-size: 32px;  /* Much larger */
  font-weight: 800; /* Extra bold */
  line-height: 1;
  display: block;
  margin-bottom: 6px;
  color: var(--app-table-text); /* Start neutral */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: default;
}

/* Distinct hover just for the number */
.throttle-cycles .cycles-value:hover {
  color: var(--brand);
  text-shadow: 0 0 20px var(--brand-glow);
  transform: scale(1.15) translateY(-2px);
}

/* 9. ACCOUNT ROWS */
.account-row {
  display: flex; justify-content: space-between; align-items: center; 
  padding: 12px; background: var(--app-td-bg); border-radius: 12px; margin-bottom: 8px;
  border: 1px solid var(--app-border);
}
.tb-progress { height: 6px; background: rgba(128,128,128,0.2); border-radius: 10px; overflow: hidden; margin-top: 8px; }
.tb-progress-fill { height: 100%; background: var(--brand); box-shadow: 0 0 10px var(--brand-glow); }
.tb-progress-fill.paused { background: #EF4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }

/* =========================================
   10. MINIMAL SLEEK BUTTONS (ACTION BUTTONS)
   ========================================= */

button[data-action] {
  appearance: none; background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: var(--app-action-icon) !important; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px !important; height: 36px !important; padding: 0 !important; border-radius: 999px !important;
  font-size: 0 !important; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  position: relative; overflow: hidden;
}

button[data-action="edit"]:hover { background: rgba(128, 128, 128, 0.2) !important; color: var(--text-main) !important; }
button[data-action="pause"]:hover { background: rgba(255, 170, 0, 0.15) !important; color: #ffaa00 !important; }
button[data-action="resume"]:hover { background: rgba(0, 255, 153, 0.15) !important; color: #00ff99 !important; }
button[data-action="delete"]:hover,
button[data-action="unlink-account"]:hover { background: rgba(255, 50, 50, 0.15) !important; color: #ff4444 !important; }

button[data-action]::before { font-size: 16px; line-height: 1; position: absolute; left: 10px; }
button[data-action="edit"]::before { content: "✎"; }
button[data-action="pause"]::before { content: "II"; font-weight: 900; font-family: sans-serif; font-size: 12px; letter-spacing: -1px; }
button[data-action="resume"]::before { content: "▶"; font-size: 12px; }
button[data-action="delete"]::before,
button[data-action="unlink-account"]::before { content: "×"; font-size: 22px; font-weight: 300; top: 4px; }

button[data-action]::after { content: attr(data-label); font-size: 12px; font-weight: 600; opacity: 0; margin-left: 18px; white-space: nowrap; transform: translateX(10px); transition: all 0.3s ease; letter-spacing: 0.5px; }
button[data-action="edit"]::after { content: "Edit"; }
button[data-action="pause"]::after { content: "Pause"; }
button[data-action="resume"]::after { content: "Resume"; }
button[data-action="delete"]::after { content: "Delete"; }
button[data-action="unlink-account"]::after { content: "Unlink"; }

button[data-action]:hover { width: 90px !important; padding-right: 12px !important; }
button[data-action="unlink-account"]:hover { width: 100px !important; }
button[data-action]:hover::after { opacity: 1; transform: translateX(0); }

/* Restore Inline Buttons */
button[data-action="save-inline"],
button[data-action="cancel-inline"] {
  font-size: 14px !important; width: auto !important; height: 32px !important; padding: 0 16px !important;
  border-radius: 8px !important; border: 1px solid transparent !important; text-indent: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; opacity: 1 !important;
}
button[data-action="save-inline"]::before, button[data-action="save-inline"]::after,
button[data-action="cancel-inline"]::before, button[data-action="cancel-inline"]::after { display: none !important; }

button[data-action="save-inline"] { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; }
button[data-action="save-inline"]:hover { background: #15803d !important; width: auto !important; }
button[data-action="cancel-inline"] { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; }
button[data-action="cancel-inline"]:hover { background: #b91c1c !important; width: auto !important; }

/* 11. TOGGLE ARROW */
.arrow-btn, button[data-action="open-collapse"] {
  font-size: 0 !important; background: transparent !important; border: 2px solid var(--brand) !important;
  width: 32px !important; height: 32px !important; border-radius: 50% !important;
  display: flex !important; align-items: center; justify-content: center;
  padding: 0 !important; margin-right: 8px; cursor: pointer;
  color: var(--brand) !important; box-shadow: 0 0 8px rgba(255, 92, 53, 0.15);
  transition: all 0.3s ease !important;
}
.arrow-btn::after, button[data-action="open-collapse"]::after {
  content: ''; display: block; width: 8px; height: 8px;
  border-right: 2.5px solid var(--brand); border-bottom: 2.5px solid var(--brand);
  transform: rotate(45deg) translate(-1px, -1px);
}
.arrow-btn:hover { transform: scale(1.15); }
.arrow-btn[aria-expanded="true"] { transform: rotate(180deg); }