/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 * Brand color overrides — retint Bootstrap's `primary` from blue to the
 * canonical ServiceMark AI teal (#00B3B3) per docs/design/DESIGN-SPEC.md §2.1.
 *
 * Most utilities (.bg-primary, .text-primary, .link-primary, .border-primary,
 * focus rings via --bs-primary-rgb) follow the CSS variable. Bootstrap 5.3.8's
 * compiled CSS hardcodes hex values inside .btn-primary and .link-primary:hover,
 * so those need their component-level vars overridden explicitly.
 */

:root,
[data-bs-theme="light"] {
  /* page background — slightly tinted off-white so white cards/sections
   * stand out. Per docs/design/DESIGN-SPEC.md §2.1 (`--color-neutral-light`)
   * and §2.2 (`--background`). Bootstrap's --bs-card-bg defaults to
   * --bs-body-bg, so we override card-bg back to pure white. */
  --bs-body-bg: #F7F9F9;
  --bs-body-bg-rgb: 247, 249, 249;
  --bs-card-bg: #ffffff;

  /* primary — brand teal */
  --bs-primary: #00B3B3;
  --bs-primary-rgb: 0, 179, 179;
  --bs-primary-text-emphasis: #00807f;
  --bs-primary-bg-subtle: #cceeed;
  --bs-primary-border-subtle: #99dcdb;
  --bs-link-color: #00B3B3;
  --bs-link-color-rgb: 0, 179, 179;
  --bs-link-hover-color: #008f8f;
  --bs-link-hover-color-rgb: 0, 143, 143;

  /* success — temporarily aliased to brand teal so existing
   * `text-bg-success`/`btn-success`/`bg-success` markup reads teal without
   * a bulk markup change. Spec §2.2 actual value is #22c55e — restore that
   * here when we want true success-green back. */
  --bs-success: #00B3B3;
  --bs-success-rgb: 0, 179, 179;
  --bs-success-text-emphasis: #00807f;
  --bs-success-bg-subtle: #cceeed;
  --bs-success-border-subtle: #99dcdb;

  /* warning */
  --bs-warning: #f59e0b;
  --bs-warning-rgb: 245, 158, 11;
  --bs-warning-text-emphasis: #b16906;
  --bs-warning-bg-subtle: #fef0d6;
  --bs-warning-border-subtle: #fbd99c;

  /* danger / destructive */
  --bs-danger: #dc2626;
  --bs-danger-rgb: 220, 38, 38;
  --bs-danger-text-emphasis: #991b1b;
  --bs-danger-bg-subtle: #fbd5d5;
  --bs-danger-border-subtle: #f3a9a9;

  /* info — aliased to brand teal because the design spec has no cyan in
   * its palette at all. Per docs/design/DESIGN-SPEC.md §1 ("Purposeful
   * Teal") + §8.2 (AdminStatusBadge: "Info" sits in the gray group, not a
   * blue group). Any neutral/informational alert that doesn't read well
   * as teal should switch to alert-secondary. */
  --bs-info: #00B3B3;
  --bs-info-rgb: 0, 179, 179;
  --bs-info-text-emphasis: #00807f;
  --bs-info-bg-subtle: #cceeed;
  --bs-info-border-subtle: #99dcdb;
}

.btn-primary {
  --bs-btn-bg: #00B3B3;
  --bs-btn-border-color: #00B3B3;
  --bs-btn-hover-bg: #00a1a1;
  --bs-btn-hover-border-color: #00a1a1;
  --bs-btn-active-bg: #008f8f;
  --bs-btn-active-border-color: #008080;
  --bs-btn-disabled-bg: #00B3B3;
  --bs-btn-disabled-border-color: #00B3B3;
  --bs-btn-focus-shadow-rgb: 51, 194, 194;
}

.btn-outline-primary {
  --bs-btn-color: #00B3B3;
  --bs-btn-border-color: #00B3B3;
  --bs-btn-hover-bg: #00B3B3;
  --bs-btn-hover-border-color: #00B3B3;
  --bs-btn-active-bg: #00B3B3;
  --bs-btn-active-border-color: #00B3B3;
  --bs-btn-disabled-color: #00B3B3;
  --bs-btn-disabled-border-color: #00B3B3;
  --bs-btn-focus-shadow-rgb: 51, 194, 194;
}

.btn-success {
  --bs-btn-bg: #00B3B3;
  --bs-btn-border-color: #00B3B3;
  --bs-btn-hover-bg: #00a1a1;
  --bs-btn-hover-border-color: #00a1a1;
  --bs-btn-active-bg: #008f8f;
  --bs-btn-active-border-color: #008080;
  --bs-btn-disabled-bg: #00B3B3;
  --bs-btn-disabled-border-color: #00B3B3;
  --bs-btn-focus-shadow-rgb: 51, 194, 194;
}

.btn-warning {
  --bs-btn-bg: #f59e0b;
  --bs-btn-border-color: #f59e0b;
  --bs-btn-hover-bg: #dd8f0a;
  --bs-btn-hover-border-color: #dd8f0a;
  --bs-btn-active-bg: #c47e09;
  --bs-btn-active-border-color: #b07309;
  --bs-btn-disabled-bg: #f59e0b;
  --bs-btn-disabled-border-color: #f59e0b;
  --bs-btn-focus-shadow-rgb: 247, 173, 44;
}

.btn-danger {
  --bs-btn-bg: #dc2626;
  --bs-btn-border-color: #dc2626;
  --bs-btn-hover-bg: #c52121;
  --bs-btn-hover-border-color: #c52121;
  --bs-btn-active-bg: #ad1d1d;
  --bs-btn-active-border-color: #991919;
  --bs-btn-disabled-bg: #dc2626;
  --bs-btn-disabled-border-color: #dc2626;
  --bs-btn-focus-shadow-rgb: 224, 71, 71;
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #00B3B3;
  --bs-btn-border-color: #00B3B3;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #00a1a1;
  --bs-btn-hover-border-color: #00a1a1;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #008f8f;
  --bs-btn-active-border-color: #008080;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #00B3B3;
  --bs-btn-disabled-border-color: #00B3B3;
  --bs-btn-focus-shadow-rgb: 51, 194, 194;
}

/* Bootstrap's compiled .text-bg-info hardcodes black text (chosen for
 * contrast against the cyan default). Teal needs white text. */
.text-bg-info {
  color: #fff !important;
}

.link-primary:hover,
.link-primary:focus {
  color: RGBA(0, 143, 143, var(--bs-link-opacity, 1)) !important;
  text-decoration-color: RGBA(0, 143, 143, var(--bs-link-underline-opacity, 1)) !important;
}

/*
 * Sidebar — slate background, white-ish inactive text, slate-accent hover,
 * teal active item. Per docs/design/DESIGN-SPEC.md §2.4 (sidebar tokens),
 * §7.12 (SmaiSidebar desktop), and §13.4 (sidebar nav items).
 */

.app-sidebar {
  background-color: #1F2A33;
  color: #ffffff;
}

.app-sidebar .nav-link {
  color: rgba(255, 255, 255, 0.7);
  border-radius: 0.5rem;
  margin: 0.125rem 0.5rem;
  padding: 0.5rem 0.75rem;
}

.app-sidebar .nav-link:hover,
.app-sidebar .nav-link:focus {
  background-color: #2A3742;
  color: #ffffff;
}

.app-sidebar .nav-link.active {
  background-color: #00B3B3;
  color: #ffffff;
  font-weight: 600;
}

.app-sidebar h6,
.app-sidebar .text-muted {
  color: rgba(255, 255, 255, 0.65) !important;
}

/*
 * Footer — matches servicemark.ai marketing site footer (slate bg + light text)
 * and pairs with the slate sidebar above. Per docs/design/DESIGN-SPEC.md §2.4.
 */

.app-footer {
  background-color: #1F2A33;
  color: #ffffff;
}

.app-footer a:hover {
  color: #00B3B3 !important;
}

.home-card {
  transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}

.home-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}

.home-card-icon {
  width: 64px;
  height: 64px;
  background-color: rgba(0, 179, 179, 0.10);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00B3B3;
}

.home-card-icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 768px) {
  .app-sidebar {
    min-height: calc(100vh - var(--smai-navbar-height, 56px));
  }
}

/*
 * Floating, semi-transparent header. Uses Bootstrap's .sticky-top for
 * positioning + z-index; this rule adds the frosted-glass effect.
 * Background alpha is on top of --bs-body-bg so content scrolls under
 * with a subtle blur.
 */

.app-header {
  background-color: rgba(var(--bs-body-bg-rgb), 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bs-border-color);
}