/* Bootstrap, tuned for GYM POS. Loaded after Bootstrap and before each page's own styles. */

/* --- brand colours, so Bootstrap's buttons, alerts, links and utilities match the app --- */
:root {
  --bs-primary: #2446d8;  --bs-primary-rgb: 36, 70, 216;
  --bs-success: #17a957;  --bs-success-rgb: 23, 169, 87;
  --bs-danger: #e0353b;   --bs-danger-rgb: 224, 53, 59;
  --bs-warning: #f5a524;  --bs-warning-rgb: 245, 165, 36;
  --bs-info: #1a82f7;     --bs-info-rgb: 26, 130, 247;
  --bs-link-color: #2446d8;        --bs-link-color-rgb: 36, 70, 216;
  --bs-link-hover-color: #1a34a8;  --bs-link-hover-color-rgb: 26, 52, 168;
  --bs-body-font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  --bs-body-color: #1c2333;  --bs-body-color-rgb: 28, 35, 51;
  --bs-body-bg: #f3f5f9;     --bs-body-bg-rgb: 243, 245, 249;
  --bs-border-color: #e3e7ee;
  --bs-body-line-height: normal;   /* the app was built on the browser's normal line height, not Bootstrap's 1.5 */
}
.btn-primary { --bs-btn-bg: #2446d8; --bs-btn-border-color: #2446d8; --bs-btn-hover-bg: #1a34a8; --bs-btn-hover-border-color: #1a34a8; --bs-btn-active-bg: #162b8a; --bs-btn-active-border-color: #162b8a; --bs-btn-disabled-bg: #2446d8; --bs-btn-disabled-border-color: #2446d8; --bs-btn-focus-shadow-rgb: 36, 70, 216; }
.btn-outline-primary { --bs-btn-color: #2446d8; --bs-btn-border-color: #2446d8; --bs-btn-hover-bg: #2446d8; --bs-btn-hover-border-color: #2446d8; --bs-btn-active-bg: #2446d8; --bs-btn-active-border-color: #2446d8; --bs-btn-disabled-color: #2446d8; --bs-btn-disabled-border-color: #2446d8; --bs-btn-focus-shadow-rgb: 36, 70, 216; }
.btn-success { --bs-btn-bg: #17a957; --bs-btn-border-color: #17a957; --bs-btn-hover-bg: #12873f; --bs-btn-hover-border-color: #12873f; --bs-btn-active-bg: #0f7536; --bs-btn-active-border-color: #0f7536; --bs-btn-disabled-bg: #17a957; --bs-btn-disabled-border-color: #17a957; --bs-btn-focus-shadow-rgb: 23, 169, 87; }
.btn-danger { --bs-btn-bg: #e0353b; --bs-btn-border-color: #e0353b; --bs-btn-hover-bg: #c12a30; --bs-btn-hover-border-color: #c12a30; --bs-btn-active-bg: #a82329; --bs-btn-active-border-color: #a82329; --bs-btn-disabled-bg: #e0353b; --bs-btn-disabled-border-color: #e0353b; --bs-btn-focus-shadow-rgb: 224, 53, 59; }
.form-control:focus, .form-select:focus { border-color: #7fd8e8; box-shadow: 0 0 0 .2rem rgba(127, 216, 232, .35); }

/* --- Bootstrap's base styles reset a few plain elements; put them back the way the app already looks --- */
h1 { font-size: 2em; font-weight: 700; margin: .67em 0; }
h2 { font-size: 1.5em; font-weight: 700; margin: .83em 0; }
h3 { font-size: 1.17em; font-weight: 700; margin: 1em 0; }
h4 { font-size: 1em; font-weight: 700; margin: 1.33em 0; }
h5 { font-size: .83em; font-weight: 700; margin: 1.67em 0; }
h6 { font-size: .67em; font-weight: 700; margin: 2.33em 0; }
h1, h2, h3, h4, h5, h6 { line-height: normal; }
p { margin: 1em 0; }
small { font-size: smaller; }
legend { float: none; width: auto; margin-bottom: 0; font-size: inherit; line-height: inherit; }
hr { margin: .5em auto; border: 1px inset; color: gray; opacity: 1; }
label { display: inline; }
input[type="checkbox"]:not(.form-check-input) { margin: 3px 3px 3px 4px; }
input[type="radio"]:not(.form-check-input) { margin: 3px 3px 0 5px; }

/* =====================================================================================
   App colours. Light = how GYM POS has always looked. Dark = [data-bs-theme="dark"],
   switched by the moon / sun button (theme.js) and remembered on each PC.
   ===================================================================================== */
:root {
  --bg: #f3f5f9; --panel: #fff; --line: #e3e7ee; --text: #1c2333; --muted: #6b7489;
  --brand: #2446d8; --accent: #f07c14; --green: #1fc96a; --green-d: #17a957; --blue: #cfe3ff; --pink: #f0067f; --red: #e0353b; --amber: #f5a524;
  --brand-fg: #2446d8; --text-2: #444;
  --surface-2: #f6f8fc; --surface-3: #d9dce3; --hover: #f4f6fb; --sel: #eef3ff; --field: #fff;
  --line-soft: #f0f2f6; --line-2: #ccc; --line-3: #aaa;
  --soft-bg: #e6ebf7; --soft-hover: #dbe3f6; --soft-line: #d5ddf0; --soft-fg: #22408f; --info-bg: #e3ecff; --av-bg: #dfe6f7;
  --ok-bg: #dbf7e7; --ok-fg: #12773e; --bad-bg: #fde2e3; --bad-bg-soft: #fff5f5; --bad-fg: #a3161b; --warn-bg: #fff1d6; --warn-fg: #8a5a00;
  --notice-bg: #fff7e6; --notice-line: #f5d79c; --notice-fg: #6b4a00; --chip-bg: #fffaf0; --over: #b26a00;
  --a-imm: #e0001b; --a-upd: #8b1a1a; --a-staff: #8e24aa; --a-svc: #1a3fd6; --a-pass: #0a8a2a;
  --bar: #2446d8; --bar-hover: #1a34a8; --axis: #8a93a6;
  --tile-sub-bg: #e8f2fd; --tile-sub-hover: #d6e8fc; --tile-fg: #111; --tile-blue-fg: #183058; --tender-bg: #d6fbd6; --pad-bg: #d3f1e2;
  --inverse: #0d1b3e; --backdrop: rgba(13, 27, 62, .45); --shadow-c: rgba(13, 27, 62, .18);
}
[data-bs-theme="dark"] {
  /* text follows the Material dark guide: 87% white for main text, 60% for secondary, never pure white */
  --bg: #0e121b; --panel: #171d2b; --line: #2a3347; --text: #e1e2e3; --muted: #a2a5aa;
  --brand-fg: #93a9ff; --text-2: #c3c4c8; --blue: #26406a;
  --surface-2: #1d2536; --surface-3: #2a3350; --hover: #222b40; --sel: #1f2b4a; --field: #0f1520;
  --line-soft: #212a3d; --line-2: #3a455f; --line-3: #4b5876;
  --soft-bg: #232e4a; --soft-hover: #2b3960; --soft-line: #34446e; --soft-fg: #a5b9ff; --info-bg: #20294a; --av-bg: #222c50;
  --ok-bg: #14302a; --ok-fg: #5fd69a; --bad-bg: #3a1c22; --bad-bg-soft: #35191e; --bad-fg: #ff8d93; --warn-bg: #3a2f14; --warn-fg: #f2c46d;
  --notice-bg: #2c2512; --notice-line: #5c4a1c; --notice-fg: #f0cf8a; --chip-bg: #2a2412; --over: #f0a43b;
  --a-imm: #ff5d70; --a-upd: #ff9a8f; --a-staff: #d68af2; --a-svc: #7fa0ff; --a-pass: #5fd68a;
  --bar: #5b7bff; --bar-hover: #7b95ff; --axis: #8c97b0;
  --tile-sub-bg: #1f3350; --tile-sub-hover: #29436a; --tile-fg: #e6eefc; --tile-blue-fg: #cfe0ff; --tender-bg: #1b3a2b; --pad-bg: #1d3a30;
  --inverse: #36456b; --backdrop: rgba(0, 0, 0, .65); --shadow-c: rgba(0, 0, 0, .5);
  /* Bootstrap's own components follow the same palette */
  --bs-body-color: #e1e2e3;  --bs-body-color-rgb: 225, 226, 227;
  --bs-body-bg: #0e121b;     --bs-body-bg-rgb: 14, 18, 27;
  --bs-border-color: #2a3347;
  --bs-secondary-bg: #1d2536; --bs-tertiary-bg: #171d2b;
  --bs-link-color: #7b95ff;        --bs-link-color-rgb: 123, 149, 255;
  --bs-link-hover-color: #a5b9ff;  --bs-link-hover-color-rgb: 165, 185, 255;
}
[data-bs-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
[data-bs-theme="dark"] select, [data-bs-theme="dark"] textarea { background-color: var(--field); color: var(--text); }
[data-bs-theme="dark"] ::placeholder { color: var(--muted); opacity: 1; }

/* the moon / sun button */
.theme-btn { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.theme-btn:hover { background: var(--hover); }

/* a little heavier text everywhere (Segoe UI has no Medium weight, so a hairline stroke does the job); bold things stay as they were */
body { font-weight: 500; -webkit-text-stroke: .25px currentColor; }
h1, h2, h3, h4, h5, h6, b, strong, th, .tag, canvas { -webkit-text-stroke: 0; }
/* dark mode: lighter, slightly airier text like Material dark themes (light text on dark looks bolder, so no extra weight) */
[data-bs-theme="dark"] body { font-weight: 400; -webkit-text-stroke: 0; letter-spacing: .01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* dark mode: buttons with white text get slightly deeper backgrounds so the text stays readable */
[data-bs-theme="dark"] .btn-green, [data-bs-theme="dark"] .ci-btn { background: #12873f; }
[data-bs-theme="dark"] .btn-red { background: #c12a30; }
[data-bs-theme="dark"] nav button.active { color: #14100a; }
/* dark mode: red text uses the lighter red so it stays readable */
[data-bs-theme="dark"] [style*="color:var(--red)"], [data-bs-theme="dark"] [style*="color: var(--red)"], [data-bs-theme="dark"] .pline button, [data-bs-theme="dark"] .pline.sum, [data-bs-theme="dark"] .pay-status div:last-child b, [data-bs-theme="dark"] .pin-err, [data-bs-theme="dark"] .short, [data-bs-theme="dark"] .banner .warn, [data-bs-theme="dark"] .link-list button.danger { color: var(--bad-fg) !important; }