/* ============================================================
   It's Me Shafat — FOSSBilling theme override
   Flat dark UI. No gradients, no glass, no animation.
   ============================================================ */

:root[data-bs-theme="dark"], html[data-bs-theme="dark"] {
  --ms-bg: #0b0e14;
  --ms-surface: #11151d;
  --ms-surface-2: #161b26;
  --ms-border: #1e2430;
  --ms-border-2: #2a3140;
  --ms-text: #d7dce5;
  --ms-dim: #8a93a5;
  --ms-accent: #2563eb;
  --ms-accent-hover: #1d4ed8;
  --ms-link: #6ea3ff;

  --bs-body-bg: #0b0e14;
  --bs-body-bg-rgb: 11, 14, 20;
  --bs-body-color: #d7dce5;
  --bs-border-color: #1e2430;
  --bs-primary: #2563eb;
  --bs-link-color: #6ea3ff;
  --bs-link-hover-color: #8fbcff;
  color-scheme: dark;
}

/* ---------- base ---------- */
html[data-bs-theme="dark"] body {
  background: var(--ms-bg) !important;
  font-family: 'Segoe UI', Inter, system-ui, -apple-system, sans-serif;
  font-size: 14.5px;
  color: var(--ms-text);
}
h1, h2, h3, h4, h5, h6 { color: #f2f5f9; font-weight: 650; }
a { color: var(--ms-link); text-decoration: none; }
a:hover { color: #8fbcff; }
.text-muted { color: var(--ms-dim) !important; }
hr { border-color: var(--ms-border); opacity: 1; }
::selection { background: rgba(37,99,235,.4); }
html[data-bs-theme="dark"] ::-webkit-scrollbar { width: 9px; }
html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: #232b3a; border-radius: 6px; }
html[data-bs-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }

/* hide the light/dark switcher and its label */
.js-theme-toggler, .theme-toggler, [data-theme-toggle] { display: none !important; }
html[data-bs-theme="dark"] .hide-theme-light { display: inline-block !important; }
html[data-bs-theme="dark"] .hide-theme-dark { display: none !important; }

/* ---------- cards ---------- */
html[data-bs-theme="dark"] .card {
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 10px !important;
  box-shadow: none;
}
html[data-bs-theme="dark"] .card-header {
  background: var(--ms-surface) !important;
  border-bottom: 1px solid var(--ms-border);
  color: #f2f5f9;
  font-weight: 600;
  font-size: 14px;
  border-radius: 10px 10px 0 0 !important;
}
html[data-bs-theme="dark"] .card-footer {
  background: var(--ms-surface) !important;
  border-top: 1px solid var(--ms-border);
}
html[data-bs-theme="dark"] .content-block { color: var(--ms-text); }

/* ---------- navbar / sidebar ---------- */
html[data-bs-theme="dark"] .navbar,
html[data-bs-theme="dark"] .topbar,
html[data-bs-theme="dark"] nav.header {
  background: var(--ms-surface) !important;
  border-bottom: 1px solid var(--ms-border);
}
html[data-bs-theme="dark"] .navbar .nav-link { color: var(--ms-dim); }
html[data-bs-theme="dark"] .navbar .nav-link:hover,
html[data-bs-theme="dark"] .navbar .nav-link.active { color: #f2f5f9; }
html[data-bs-theme="dark"] .sidebar, html[data-bs-theme="dark"] #sidebar {
  background: var(--ms-surface) !important;
  border-right: 1px solid var(--ms-border);
}
html[data-bs-theme="dark"] .sidebar .nav-link { color: var(--ms-dim); border-radius: 7px; padding: 7px 11px; font-size: 14px; }
html[data-bs-theme="dark"] .sidebar .nav-link:hover { background: var(--ms-surface-2); color: #f2f5f9; }
html[data-bs-theme="dark"] .sidebar .nav-link.active {
  background: rgba(37,99,235,.12);
  color: #9cc2ff;
}

/* ---------- buttons ---------- */
.btn { border-radius: 8px; font-weight: 600; }
html[data-bs-theme="dark"] .btn-primary {
  background: var(--ms-accent); border: 1px solid var(--ms-accent); color: #fff; box-shadow: none;
}
html[data-bs-theme="dark"] .btn-primary:hover, html[data-bs-theme="dark"] .btn-primary:focus {
  background: var(--ms-accent-hover); border-color: var(--ms-accent-hover); color: #fff;
}
html[data-bs-theme="dark"] .btn-secondary,
html[data-bs-theme="dark"] .btn-light {
  background: var(--ms-surface-2); border: 1px solid var(--ms-border-2); color: var(--ms-text); box-shadow: none;
}
html[data-bs-theme="dark"] .btn-secondary:hover,
html[data-bs-theme="dark"] .btn-light:hover { background: #1c2230; color: #fff; }
html[data-bs-theme="dark"] .btn-outline-primary { border-color: var(--ms-accent); color: var(--ms-link); }
html[data-bs-theme="dark"] .btn-outline-primary:hover { background: var(--ms-accent); color: #fff; }

/* ---------- forms ---------- */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
  background-color: #0d1119 !important;
  border: 1px solid var(--ms-border-2) !important;
  color: var(--ms-text) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
/* restore the select chevron with a light stroke for dark bg */
html[data-bs-theme="dark"] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238a93a5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-image: var(--bs-form-select-bg-img) !important;
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
  background-size: 16px 12px !important;
}
html[data-bs-theme="dark"] .form-select option {
  background-color: #11151d;
  color: var(--ms-text);
}
html[data-bs-theme="dark"] .form-control::placeholder { color: #5a6478; }
html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
  background: #0d1119 !important;
  border-color: var(--ms-accent) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15) !important;
}
html[data-bs-theme="dark"] .form-label { color: var(--ms-dim); font-weight: 600; font-size: 13px; }
html[data-bs-theme="dark"] .form-check-input { background-color: #0d1119; border-color: var(--ms-border-2); }
html[data-bs-theme="dark"] .form-check-input:checked { background-color: var(--ms-accent); border-color: var(--ms-accent); }
html[data-bs-theme="dark"] .input-group-text {
  background: var(--ms-surface-2); border: 1px solid var(--ms-border-2); color: var(--ms-dim);
}
html[data-bs-theme="dark"] .form-floating > label { color: var(--ms-dim); }

/* ---------- tables / lists / accordion ---------- */
html[data-bs-theme="dark"] .table { color: var(--ms-text); --bs-table-bg: transparent; }
html[data-bs-theme="dark"] .table thead th {
  color: var(--ms-dim); border-bottom: 1px solid var(--ms-border-2);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
html[data-bs-theme="dark"] .table td { border-bottom-color: var(--ms-border); }
html[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background: var(--ms-surface-2); color: #f2f5f9; }
html[data-bs-theme="dark"] .list-group-item {
  background: transparent; color: var(--ms-text); border-color: var(--ms-border);
}
html[data-bs-theme="dark"] .accordion-item {
  background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: 8px !important; overflow: hidden;
}
html[data-bs-theme="dark"] .accordion-button { background: transparent; color: #f2f5f9; font-weight: 600; box-shadow: none; }
html[data-bs-theme="dark"] .accordion-button:not(.collapsed) { background: var(--ms-surface-2); color: #f2f5f9; }
html[data-bs-theme="dark"] .accordion-button::after { filter: invert(.72) grayscale(1); }

/* ---------- badges, alerts, modal, toast, dropdown ---------- */
html[data-bs-theme="dark"] .badge { border-radius: 6px; font-weight: 600; }
html[data-bs-theme="dark"] .alert { border-radius: 10px; }
html[data-bs-theme="dark"] .modal-content {
  background: var(--ms-surface); border: 1px solid var(--ms-border-2); color: var(--ms-text); border-radius: 10px;
}
html[data-bs-theme="dark"] .toast {
  background: var(--ms-surface); border: 1px solid var(--ms-border-2); color: var(--ms-text); border-radius: 8px;
}
html[data-bs-theme="dark"] .dropdown-menu {
  background: var(--ms-surface-2); border: 1px solid var(--ms-border-2); border-radius: 8px;
}
html[data-bs-theme="dark"] .dropdown-item { color: var(--ms-text); border-radius: 6px; }
html[data-bs-theme="dark"] .dropdown-item:hover { background: rgba(37,99,235,.14); color: #fff; }
html[data-bs-theme="dark"] .page-link {
  background: var(--ms-surface); border-color: var(--ms-border-2); color: var(--ms-link);
}
html[data-bs-theme="dark"] .page-item.active .page-link { background: var(--ms-accent); border-color: var(--ms-accent); color: #fff; }

/* ---------- footer ---------- */
html[data-bs-theme="dark"] #footer, html[data-bs-theme="dark"] footer {
  background: transparent; border-top: 1px solid var(--ms-border); color: var(--ms-dim);
}
html[data-bs-theme="dark"] #footer a { color: var(--ms-link); }

/* ---------- LOGIN / AUTH ---------- */ 
html[data-bs-theme="dark"] .page-login,
html[data-bs-theme="dark"] .page-signup {
  background: var(--ms-bg) !important;
}

/* FOSSBilling puts class="auth" on the <form> itself — never flexbox it,
   and neutralize any older cached stylesheet that did. */
form.auth {
  display: block !important;
  min-height: 0 !important;
  width: 100%;
}
.auth-wrap {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}
.auth-card { width: 100%; max-width: 400px; }
.auth-card-wide { max-width: 560px; }
.auth-brand { text-align: center; margin-bottom: 18px; }
.auth-brand img { border-radius: 10px; border: 1px solid var(--ms-border-2); }
.auth-brand-name { margin-top: 8px; font-size: 15px; font-weight: 650; color: #f2f5f9; }
.auth-body { padding: 26px 24px 22px; }
.auth-title { font-size: 17px; font-weight: 650; color: #f2f5f9; }
.auth-sub { font-size: 13px; color: var(--ms-dim); margin: 3px 0 20px; }
.auth-submit { padding: 10px; font-size: 14.5px; }
.auth-links {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--ms-border);
  display: flex; justify-content: center; gap: 8px;
  font-size: 13.5px; color: var(--ms-dim);
}
.auth-links a { color: var(--ms-link); }
.auth-links a:hover { color: #8fbcff; }
.auth-sep { opacity: .45; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .auth-row { grid-template-columns: 1fr; gap: 0; } }

/* ---------- ORDER FORM TYPOGRAPHY ---------- */

/* product summary box (was Bootstrap-3 "well", unstyled) */
html[data-bs-theme="dark"] .order-product .well,
html[data-bs-theme="dark"] div.well {
  background: var(--ms-surface-2);
  border: 1px solid var(--ms-border);
  border-radius: 10px;
  padding: 18px 20px;
  margin: 0 0 18px;
}
html[data-bs-theme="dark"] div.well h3 {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.2px;
  margin: 0 0 6px;
  color: #f2f5f9;
}
html[data-bs-theme="dark"] div.well p {
  font-size: 13.5px;
  color: var(--ms-dim);
  margin: 0 0 10px;
}
html[data-bs-theme="dark"] div.well hr {
  margin: 12px 0;
  border-color: var(--ms-border);
}

/* section headings inside the order form */
html[data-bs-theme="dark"] .accordion-body h4,
html[data-bs-theme="dark"] .order-product h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--ms-dim);
  margin: 20px 0 12px;
}
html[data-bs-theme="dark"] .accordion-body h4 strong { color: inherit; font-weight: inherit; }

/* registration block heading inside checkout */
html[data-bs-theme="dark"] .register-block h4,
html[data-bs-theme="dark"] #register h4 {
  font-size: 15px; font-weight: 650; color: #f2f5f9;
  text-transform: none; letter-spacing: 0;
}

/* form labels */
html[data-bs-theme="dark"] .order-product .form-label,
html[data-bs-theme="dark"] .form-label {
  font-size: 13px; font-weight: 600; color: #b9c2d0; margin-bottom: 5px;
}
html[data-bs-theme="dark"] .order-product label { font-size: 13.5px; color: var(--ms-text); }

/* domain registration sub-forms */
html[data-bs-theme="dark"] #register .form-label,
html[data-bs-theme="dark"] #sign-up .form-label { font-size: 12.5px; }

html[data-bs-theme="dark"] .accordion-button { font-size: 14.5px; }
html[data-bs-theme="dark"] .form-hint { font-size: 12px; color: var(--ms-dim); }