/* theme-bootstrap.css */
/* Dark is default. Switch to light by setting :root[data-theme="light"] */

/* ---------- Core design tokens ---------- */
:root{
  --bg:#0e0f12;              --text:#e7edf6;           --text-strong:#f2f6ff;
  --muted:#9aa3b2;           --panel:#14161a;          --panel-2:#0f1114;
  --card:#171a1f;            --card-2:#0d0f12;         --input-bg:#0e0f12;
  --border-weak:rgba(255,255,255,.10); --border-weak-2:rgba(255,255,255,.06);
  --accent:#0d6efd;          --success:#38c172;        --warning:#f1c40f;
  --danger:#e74c3c;          --info:#2db4a6;

  /* Map tokens to Bootstrap root variables */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border-weak-2);
  --bs-secondary-color: var(--muted);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: color-mix(in srgb, var(--accent) 85%, white 15%);
  --bs-code-color: #e3b341;

  /* Surfaces */
  --bs-tertiary-bg: var(--panel);
  --bs-emphasis-color: var(--text-strong);

  /* Forms */
  --bs-form-control-bg: var(--input-bg);
  --bs-form-control-color: var(--text);
  --bs-form-control-border-color: var(--border-weak);
  --bs-form-control-focus-border-color: color-mix(in srgb, var(--accent) 70%, white 30%);
  --bs-form-control-disabled-bg: rgba(255,255,255,.06);

  /* Buttons */
  --bs-btn-color: var(--text);
  --bs-btn-bg: var(--panel);
  --bs-btn-border-color: var(--border-weak);
  --bs-btn-hover-bg: #1d2127;
  --bs-btn-hover-border-color: rgba(255,255,255,.18);

  /* Cards */
  --bs-card-bg: var(--card);
  --bs-card-border-color: var(--border-weak-2);
  --bs-card-color: var(--text);

  /* Dropdown */
  --bs-dropdown-bg: rgba(20,20,20,.98);
  --bs-dropdown-color: var(--text);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-bg: rgba(255,255,255,.06);
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-border-color: rgba(255,255,255,.12);
  --bs-dropdown-divider-bg: rgba(255,255,255,.12);

  /* Modal/Offcanvas */
  --bs-modal-bg: var(--card);
  --bs-modal-color: var(--text);
  --bs-modal-border-color: var(--border-weak-2);
  --bs-offcanvas-bg: var(--panel);
  --bs-offcanvas-color: var(--text);

  /* Tables */
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-striped-bg: rgba(255,255,255,.04);
  --bs-table-hover-bg: rgba(255,255,255,.06);
  --bs-table-border-color: var(--border-weak-2);

  /* Tooltip/Popover */
  --bs-tooltip-bg: rgba(24,24,24,.96);
  --bs-tooltip-color: #fff;
  --bs-popover-bg: rgba(22,22,22,.98);
  --bs-popover-border-color: rgba(255,255,255,.12);

  /* Alerts/Badges */
  --bs-success-bg-subtle: color-mix(in srgb, var(--success) 16%, black);
  --bs-success-text-emphasis: #b6f1ce;
  --bs-warning-bg-subtle: color-mix(in srgb, var(--warning) 18%, black);
  --bs-danger-bg-subtle:  color-mix(in srgb, var(--danger) 18%, black);
  --bs-info-bg-subtle:    color-mix(in srgb, var(--info) 18%, black);

  /* List group */
  --bs-list-group-bg: var(--panel);
  --bs-list-group-color: var(--text);
  --bs-list-group-border-color: var(--border-weak-2);

  /* Toasts */
  --bs-toast-bg: var(--panel);
  --bs-toast-color: var(--text);
  --bs-toast-border-color: var(--border-weak-2);
}

/* ---------- Light theme overrides ---------- */
:root[data-theme="light"]{
  --bg:#e6eaef;              --text:#1a1f29;           --text-strong:#10141c;
  --muted:#5f6978;           --panel:#e2e6ec;          --panel-2:#dfe3e8;
  --card:#e6e9ee;            --card-2:#e3e6eb;         --input-bg:#dfe3e8;
  --border-weak:rgba(0,0,0,.14);  --border-weak-2:rgba(0,0,0,.08);
  --accent:#0d6efd;          --success:#198754;        --warning:#ffc107;
  --danger:#dc3545;          --info:#0dcaf0;

  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border-weak-2);
  --bs-secondary-color: var(--muted);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: color-mix(in srgb, var(--accent) 80%, black 20%);

  --bs-tertiary-bg: var(--panel);

  --bs-form-control-bg: var(--input-bg);
  --bs-form-control-color: var(--text);
  --bs-form-control-border-color: var(--border-weak);
  --bs-form-control-focus-border-color: color-mix(in srgb, var(--accent) 80%, white 20%);
  --bs-form-control-disabled-bg: rgba(0,0,0,.05);

  --bs-btn-bg: var(--panel);
  --bs-btn-border-color: var(--border-weak);
  --bs-btn-hover-bg: rgba(0,0,0,.06);
  --bs-btn-hover-border-color: rgba(0,0,0,.14);

  --bs-card-bg: var(--card);
  --bs-card-border-color: var(--border-weak-2);
  --bs-card-color: var(--text);

  --bs-dropdown-bg: var(--panel);
  --bs-dropdown-color: var(--text);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-bg: rgba(0,0,0,.06);
  --bs-dropdown-link-hover-color: var(--text-strong);
  --bs-dropdown-border-color: rgba(0,0,0,.10);
  --bs-dropdown-divider-bg: rgba(0,0,0,.12);

  --bs-modal-bg: var(--card);
  --bs-modal-color: var(--text);
  --bs-modal-border-color: var(--border-weak-2);

  --bs-offcanvas-bg: var(--panel);
  --bs-offcanvas-color: var(--text);

  --bs-table-striped-bg: rgba(0,0,0,.035);
  --bs-table-hover-bg: rgba(0,0,0,.06);
  --bs-table-border-color: var(--border-weak-2);

  --bs-tooltip-bg: rgba(18,22,28,.98);
  --bs-tooltip-color: #fff;
  --bs-popover-bg: #ffffff;
  --bs-popover-border-color: rgba(0,0,0,.12);

  --bs-success-bg-subtle: color-mix(in srgb, var(--success) 10%, white);
  --bs-success-text-emphasis: #0f5e3c;
  --bs-warning-bg-subtle: color-mix(in srgb, var(--warning) 12%, white);
  --bs-danger-bg-subtle:  color-mix(in srgb, var(--danger) 12%, white);
  --bs-info-bg-subtle:    color-mix(in srgb, var(--info) 12%, white);

  --bs-list-group-bg: var(--panel);
  --bs-list-group-color: var(--text);
  --bs-list-group-border-color: var(--border-weak-2);

  --bs-toast-bg: var(--panel);
  --bs-toast-color: var(--text);
  --bs-toast-border-color: var(--border-weak-2);
}

/* ---------- Component polish (small, targeted rules) ---------- */

/* Cards, Dropdowns, Modals: share a softer radius and shadow */
.card, .dropdown-menu, .modal-content, .offcanvas, .toast, .popover {
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,.28);
}

/* Dropdown (works for dropup too) */
.dropdown-menu[data-bs-popper]{
  background: var(--bs-dropdown-bg);
  color: var(--bs-dropdown-color);
  border: 1px solid var(--bs-dropdown-border-color);
}
.dropdown-item{ color: var(--bs-dropdown-link-color); }
.dropdown-item:hover, .dropdown-item:focus{
  color: var(--bs-dropdown-link-hover-color);
  background: var(--bs-dropdown-link-hover-bg);
}

/* Forms */
.form-control, .form-select, .form-check-input {
  background-color: var(--bs-form-control-bg);
  color: var(--bs-form-control-color);
  border-color: var(--bs-form-control-border-color);
}
.form-control:focus, .form-select:focus{
  border-color: var(--bs-form-control-focus-border-color);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 30%, transparent);
}
.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

/* Tables */
.table{
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-striped > tbody > tr:nth-of-type(odd){ background-color: var(--bs-table-striped-bg); }
.table-hover > tbody > tr:hover{ background-color: var(--bs-table-hover-bg); }

/* Modal header/footer */
.modal-content{
  background-color: var(--bs-modal-bg);
  color: var(--bs-modal-color);
  border-color: var(--bs-modal-border-color);
}
.btn-close{
  filter: invert(1) grayscale(100%); /* visible on dark */
}
:root[data-theme="light"] .btn-close{
  filter: none; /* normal in light */
}

/* Navs / List groups */
.list-group{
  background: var(--bs-list-group-bg);
  color: var(--bs-list-group-color);
  border-color: var(--bs-list-group-border-color);
}
.list-group-item{
  background: transparent;
  color: var(--bs-list-group-color);
  border-color: var(--bs-list-group-border-color);
}
.list-group-item.active{
  background: color-mix(in srgb, var(--accent) 18%, black);
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 32%, black);
}
:root[data-theme="light"] .list-group-item.active{
  background: color-mix(in srgb, var(--accent) 18%, white);
  color: #0b1220;
  border-color: color-mix(in srgb, var(--accent) 40%, white);
}

/* Tooltips / Popovers */
.tooltip .tooltip-inner{ background: var(--bs-tooltip-bg); color: var(--bs-tooltip-color); }
.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before{
  background: var(--bs-tooltip-bg);
}
.popover{ background: var(--bs-popover-bg); border-color: var(--bs-popover-border-color); }

/* Toasts */
.toast{ background-color: var(--bs-toast-bg); color: var(--bs-toast-color); border-color: var(--bs-toast-border-color); }

/* Alerts (subtle variants look better across themes) */
.alert-success{ background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.alert-warning{ background: var(--bs-warning-bg-subtle); }
.alert-danger{  background: var(--bs-danger-bg-subtle);  }
.alert-info{    background: var(--bs-info-bg-subtle);    }

/* Pagination */
.page-link{ color: var(--text); background: transparent; border-color: var(--border-weak-2); }
.page-link:hover{ background: rgba(255,255,255,.06); }
:root[data-theme="light"] .page-link:hover{ background: rgba(0,0,0,.06); }
.page-item.active .page-link{
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* Buttons: outline variants pick up theme nicely */
.btn-outline-secondary{
  color: var(--text); border-color: var(--border-weak); background: transparent;
}
.btn-outline-secondary:hover{
  background: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); color: #fff;
}



/* --- Profile modal polish --- */
#profileModal .modal-content { border-radius: 14px; }
#profileModal .form-label { margin-bottom: .25rem; }

#profileModal .avatar-wrap { position: relative; width: 84px; height: 84px; }
#profileModal .avatar-img {
  width: 64px; height: 64px;
  border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
#profileModal .avatar-fallback {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 28px;
  color: var(--bs-body-bg);
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-indigo));
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

#profileModal .progress { background: rgba(0,0,0,.06); }
:root[data-theme="light"] #profileModal .progress { background: rgba(0,0,0,.06); }