/* Connects theme.css to the rest of the system. Loaded last. The colours themselves live in theme.css: change them
   there. Here Bootstrap and the AdminKit template (style.css, left as it came) take them from the theme, and they
   follow it into dark mode. */

:root {
  color-scheme: light dark;

  /* The template's own names */
  --brand:  var(--color-primary);
  --ink:    var(--color-text);
  --muted:  var(--color-text-muted);
  --line:   var(--color-border);
  --canvas: var(--color-bg);

  /* Bootstrap's */
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-emphasis-color: var(--color-text);
  --bs-heading-color: var(--color-text);
  --bs-secondary-color: var(--color-text-muted);
  --bs-tertiary-bg: var(--color-surface-alt);
  --bs-border-color: var(--color-border);
  --bs-link-color: var(--color-link);
  --bs-link-hover-color: var(--color-primary-hover);
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 219, 39, 119;
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: 220, 38, 38;
  --bs-success: var(--color-success);
  --bs-success-rgb: 20, 184, 166;
  --bs-focus-ring-color: rgba(236, 72, 153, .35);

  /* Readable versions, from the theme's palette: small text needs a stronger colour than large shapes do */
  --app-accent-text: var(--color-primary-hover);
  --app-danger-text: #B91C1C;
  /* A filled shape with the theme's white text on it */
  --app-fill: var(--color-primary);
  --app-fill-hover: var(--color-primary-hover);
}
:root[data-theme="light"] { color-scheme: light; }
/* Dark mode's brighter magenta is for text and icons. White on it is too faint, so filled shapes keep the deeper one. */
:root[data-theme="dark"] { color-scheme: dark; --bs-primary-rgb: 236, 72, 153; --bs-danger-rgb: 248, 113, 113; --app-danger-text: #F87171; --app-fill: var(--magenta-600); --app-fill-hover: var(--magenta-700); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bs-primary-rgb: 236, 72, 153; --bs-danger-rgb: 248, 113, 113; --app-danger-text: #F87171; --app-fill: var(--magenta-600); --app-fill-hover: var(--magenta-700); }
}

body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--color-link); }
a:hover { color: var(--color-primary-hover); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- Buttons ---- */
.btn:not(.btn-sm):not(.btn-lg) { --bs-btn-padding-y: .6rem; --bs-btn-padding-x: 1.1rem; }
.btn-primary {
  --bs-btn-color: var(--color-on-primary); --bs-btn-bg: var(--app-fill); --bs-btn-border-color: var(--app-fill);
  --bs-btn-hover-color: var(--color-on-primary); --bs-btn-hover-bg: var(--app-fill-hover); --bs-btn-hover-border-color: var(--app-fill-hover);
  --bs-btn-active-color: var(--color-on-primary); --bs-btn-active-bg: var(--app-fill-hover); --bs-btn-active-border-color: var(--app-fill-hover);
  --bs-btn-disabled-color: var(--color-on-primary); --bs-btn-disabled-bg: var(--app-fill); --bs-btn-disabled-border-color: var(--app-fill);
  background: var(--bs-btn-bg); border-color: var(--bs-btn-border-color);
}
.btn-primary:hover { background: var(--bs-btn-hover-bg); }
.btn-light, .btn-secondary, .btn-outline-secondary {
  --bs-btn-color: var(--color-text); --bs-btn-bg: var(--color-surface-alt); --bs-btn-border-color: var(--color-border);
  --bs-btn-hover-color: var(--color-text); --bs-btn-hover-bg: var(--color-primary-tint); --bs-btn-hover-border-color: var(--color-border);
  --bs-btn-active-color: var(--color-text); --bs-btn-active-bg: var(--color-primary-tint); --bs-btn-active-border-color: var(--color-border);
  --bs-btn-disabled-color: var(--color-text-muted); --bs-btn-disabled-bg: var(--color-surface-alt); --bs-btn-disabled-border-color: var(--color-border);
}
.btn-danger {
  --bs-btn-bg: var(--red-600); --bs-btn-border-color: var(--red-600); --bs-btn-color: #fff;
  --bs-btn-hover-bg: #B91C1C; --bs-btn-hover-border-color: #B91C1C; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #B91C1C; --bs-btn-active-border-color: #B91C1C; --bs-btn-active-color: #fff;
}
.btn-close { --bs-btn-close-focus-shadow: var(--focus-ring); }

/* ---- Text and background helpers, which Bootstrap fixes with !important ---- */
.text-secondary, .text-muted { color: var(--color-text-muted) !important; }
.text-primary { color: var(--app-accent-text) !important; }
.text-danger { color: var(--app-danger-text) !important; }
.text-dark { color: var(--color-text) !important; }
.eyebrow a { color: inherit; }
.alert-link, .alert a { color: var(--app-accent-text); }
.brand-logo { display: inline-flex; flex: none; width: 44px; height: 44px; }
.brand-logo img { width: 100%; height: 100%; }
.brand-logo-dark { display: none; }
.app-sidebar .brand-mark .fw-light, .app-topbar .brand-mark .fw-light { display: block; }   /* The name does not fit on one line beside the logo */
:root[data-theme="dark"] .brand-logo-light { display: none; }
:root[data-theme="dark"] .brand-logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo-light { display: none; }
  :root:not([data-theme="light"]) .brand-logo-dark { display: block; }
}
.bg-light { background-color: var(--color-surface-alt) !important; }
.bg-white { background-color: var(--color-surface) !important; }
.bg-success { background-color: var(--color-success) !important; }
.text-bg-primary { background-color: var(--app-fill) !important; color: var(--color-on-primary) !important; }
.text-bg-danger { background-color: var(--red-600) !important; color: #fff !important; }
.text-bg-success { background-color: var(--color-success) !important; color: #042F2E !important; }   /* white on teal is too faint */
.text-bg-warning { background-color: var(--color-highlight) !important; color: #2A1A04 !important; }
.badge { padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; }

/* ---- Cards, forms, tables ---- */
.component-card, .stat-card { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; }
.empty-panel { background: var(--color-surface); border-color: var(--color-border); }
.empty-icon { background: var(--color-primary-tint); color: var(--app-accent-text); }
.avatar { background: var(--color-primary-tint); color: var(--app-accent-text); }
.field-validation-error { color: var(--app-danger-text); }
.form-label { color: var(--color-text); }
.form-control, .form-select, .input-group-text { background-color: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.form-control::placeholder { color: var(--color-text-muted); }
.form-control:focus, .form-select:focus { background-color: var(--color-surface); color: var(--color-text); border-color: var(--color-primary-bright); box-shadow: var(--focus-ring); }
.form-control:disabled, .form-select:disabled { background-color: var(--color-surface-alt); color: var(--color-text-muted); }
.form-check-input { background-color: var(--color-surface); border-color: var(--color-text-muted); }
.form-check-input:checked { background-color: var(--app-fill); border-color: var(--app-fill); }
.form-check-input:focus { border-color: var(--color-primary-bright); box-shadow: var(--focus-ring); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--color-text); --bs-table-border-color: var(--color-border); --bs-table-hover-bg: var(--color-surface-alt); --bs-table-hover-color: var(--color-text); }
.progress { --bs-progress-bg: var(--color-primary-tint); --bs-progress-bar-bg: var(--color-primary-bright); --bs-progress-border-radius: 8px; }

/* ---- Pop-ups, menus, paging ---- */
.modal { --bs-modal-bg: var(--color-surface); --bs-modal-color: var(--color-text); --bs-modal-border-color: var(--color-border); --bs-modal-header-border-color: var(--color-border); --bs-modal-footer-border-color: var(--color-border); }
.dropdown-menu { --bs-dropdown-bg: var(--color-surface); --bs-dropdown-color: var(--color-text); --bs-dropdown-border-color: var(--color-border); --bs-dropdown-link-color: var(--color-text); --bs-dropdown-link-hover-color: var(--color-text); --bs-dropdown-link-hover-bg: var(--color-surface-alt); --bs-dropdown-link-active-bg: var(--color-primary); --bs-dropdown-link-active-color: var(--color-on-primary); --bs-dropdown-header-color: var(--color-text-muted); --bs-dropdown-divider-bg: var(--color-border); }
.pagination { --bs-pagination-color: var(--color-link); --bs-pagination-bg: var(--color-surface); --bs-pagination-border-color: var(--color-border); --bs-pagination-hover-color: var(--color-primary-hover); --bs-pagination-hover-bg: var(--color-surface-alt); --bs-pagination-hover-border-color: var(--color-border); --bs-pagination-focus-color: var(--color-primary-hover); --bs-pagination-focus-bg: var(--color-surface-alt); --bs-pagination-focus-box-shadow: var(--focus-ring); --bs-pagination-active-color: var(--color-on-primary); --bs-pagination-active-bg: var(--app-fill); --bs-pagination-active-border-color: var(--app-fill); --bs-pagination-disabled-color: var(--color-text-muted); --bs-pagination-disabled-bg: var(--color-surface-alt); --bs-pagination-disabled-border-color: var(--color-border); }

/* ---- Alerts: the colour runs down the left, on a surface that follows the mode ---- */
.alert { --bs-alert-color: var(--color-text); --bs-alert-bg: var(--color-surface); --bs-alert-link-color: var(--color-link); border-radius: 8px; border-width: 1px 1px 1px 4px; border-style: solid; border-color: var(--color-border); }
.alert-success { border-left-color: var(--color-success); }
.alert-danger  { border-left-color: var(--color-danger); }
.alert-warning { border-left-color: var(--color-warning); background: var(--color-highlight-tint); }
.alert-info    { border-left-color: var(--color-info); }

/* ---- Left menu and phone top bar: bright in light mode, in place of the theme's plum. Dark mode keeps the theme's dark one. ---- */
:root { --color-nav: var(--color-surface); --color-on-nav: var(--color-text); }
.app-sidebar, .app-topbar { background-color: var(--color-nav) !important; color: var(--color-on-nav); }
.app-sidebar-brand, .app-sidebar-account { border-color: var(--color-border); }
.app-topbar { border-bottom-color: var(--color-border); }
@media (min-width: 992px) { .app-sidebar { border-right-color: var(--color-border); } }
.app-sidebar .brand-mark, .app-topbar .brand-mark { color: var(--color-on-nav); }
.app-sidebar-nav .nav-link, .app-topbar .nav-link, .app-page-top .nav-link { color: var(--color-on-nav); }
.app-sidebar-nav .nav-link:hover, .app-topbar .nav-link:hover, .app-page-top .nav-link:hover, .notification-bell.active { background: var(--color-primary-tint); color: var(--app-accent-text); }
.app-sidebar-nav .nav-link.active, .app-sidebar-nav .nav-link.active:hover { background: var(--app-fill); color: var(--color-on-primary); }
.company-logo { background: #fff; padding: 2px; }

/* ---- Sign-in ---- */
.login-page { background: radial-gradient(circle at 15% 15%, var(--color-primary-tint) 0, transparent 36%), var(--color-bg); }

/* ---- Survey: filled choices and icons carry white text ---- */
.scale-option input:checked + .scale-face { background: var(--app-fill); border-color: var(--app-fill); }
.scale-option input:checked + .scale-face .scale-number { color: var(--magenta-700); background: #fff; }
.survey-message-icon:not(.is-muted) { background: var(--app-fill); }
.survey-brand, .question-number, .review-answer, .band-option input:checked + span, .scale-number { color: var(--app-accent-text); }

/* ---- Pictures made for a light background keep one in dark mode ---- */
:root[data-theme="dark"] .powered-by-logo { background: #fff; border-radius: 6px; padding: 2px 6px; box-sizing: content-box; }
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }
:root[data-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='%23B3A8C2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .powered-by-logo { background: #fff; border-radius: 6px; padding: 2px 6px; box-sizing: content-box; }
  :root:not([data-theme="light"]) .btn-close { filter: invert(1) grayscale(1) brightness(2); }
  :root:not([data-theme="light"]) .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='%23B3A8C2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
}