/* TriSpark Sales CRM — design tokens, base typography and Bootstrap theme overrides */
:root {
  /* Brand */
  --ts-navy: #0A2540;
  --ts-navy-800: #0D2F52;
  --ts-navy-700: #123A66;
  --ts-yellow: #FFC107;
  --ts-yellow-600: #E0A800;

  /* Surfaces & text */
  --ts-bg: #F5F7FA;
  --ts-card: #FFFFFF;
  --ts-text: #172B4D;
  --ts-muted: #64748B;
  --ts-border: #E2E8F0;
  --ts-border-strong: #CBD5E1;
  --ts-hover: #F1F5F9;

  /* Semantic */
  --ts-success: #16A34A;
  --ts-success-bg: #DCFCE7;
  --ts-success-fg: #166534;
  --ts-warning: #F59E0B;
  --ts-warning-bg: #FEF3C7;
  --ts-warning-fg: #92400E;
  --ts-error: #DC2626;
  --ts-error-bg: #FEE2E2;
  --ts-error-fg: #991B1B;
  --ts-info: #2563EB;
  --ts-info-bg: #DBEAFE;
  --ts-info-fg: #1E40AF;

  /* Spacing (4px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* Shape & depth */
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px;
  --shadow-1: 0 1px 2px rgba(10, 37, 64, .06), 0 1px 3px rgba(10, 37, 64, .05);
  --shadow-2: 0 4px 12px rgba(10, 37, 64, .10), 0 2px 4px rgba(10, 37, 64, .06);
  --shadow-3: 0 12px 32px rgba(10, 37, 64, .18);

  /* Layout */
  --sidebar-w: 250px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 60px;
  --bottomnav-h: 60px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Bootstrap theme mapping */
  --bs-body-font-family: var(--font);
  --bs-body-color: var(--ts-text);
  --bs-body-bg: var(--ts-bg);
  --bs-body-font-size: .9375rem;
  --bs-border-color: var(--ts-border);
  --bs-primary: #0A2540;
  --bs-primary-rgb: 10, 37, 64;
  --bs-link-color: #0A2540;
  --bs-link-hover-color: #123A66;
  --bs-secondary-color: var(--ts-muted);
  --bs-border-radius: var(--r-sm);
  --bs-border-radius-lg: var(--r-lg);
  --bs-focus-ring-color: rgba(255, 193, 7, .55);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--ts-bg); color: var(--ts-text); font-family: var(--font); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; }
a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
h1, h2, h3, h4 { color: var(--ts-text); letter-spacing: -.01em; }
.text-secondary { color: var(--ts-muted) !important; }
.ts-mono { font-family: var(--mono); font-size: .8125rem; }
.ts-req { color: var(--ts-error); }
.ts-skip { position: absolute; left: -9999px; top: 8px; z-index: 3000; background: var(--ts-navy); color: #fff; padding: 8px 14px; border-radius: 8px; }
.ts-skip:focus { left: 8px; color: #fff; }

/* Focus: two-tone ring so it is visible on light and dark surfaces (WCAG 2.2 focus appearance) */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ts-navy); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(255, 193, 7, .6); border-radius: 6px; }
.ts-sidebar :focus-visible, .ts-bottomnav :focus-visible, .ts-login__brand :focus-visible { outline-color: #fff; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--ts-navy); box-shadow: 0 0 0 4px rgba(255, 193, 7, .55); outline: 2px solid var(--ts-navy); outline-offset: 0; }

/* Buttons */
.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: var(--r-sm); --bs-btn-padding-y: .5rem; display: inline-flex; align-items: center; justify-content: center; gap: 4px; transition: background-color .12s, border-color .12s, box-shadow .12s, transform .06s; min-height: 38px; }
.btn-sm { min-height: 32px; --bs-btn-font-size: .8125rem; --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .7rem; }
.btn-lg { min-height: 48px; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary { --bs-btn-bg: var(--ts-navy); --bs-btn-border-color: var(--ts-navy); --bs-btn-hover-bg: var(--ts-navy-700); --bs-btn-hover-border-color: var(--ts-navy-700); --bs-btn-active-bg: #071C33; --bs-btn-active-border-color: #071C33; --bs-btn-disabled-bg: #8CA0B6; --bs-btn-disabled-border-color: #8CA0B6; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; }
.btn-accent { background: var(--ts-yellow); border-color: var(--ts-yellow); color: var(--ts-navy); }
.btn-accent:hover { background: var(--ts-yellow-600); border-color: var(--ts-yellow-600); color: var(--ts-navy); }
.btn-outline-primary { --bs-btn-color: var(--ts-navy); --bs-btn-border-color: var(--ts-border-strong); --bs-btn-hover-bg: var(--ts-navy); --bs-btn-hover-border-color: var(--ts-navy); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--ts-navy); --bs-btn-active-border-color: var(--ts-navy); --bs-btn-active-color: #fff; background: #fff; }
.btn-outline-secondary { --bs-btn-color: var(--ts-text); --bs-btn-border-color: var(--ts-border-strong); --bs-btn-hover-bg: var(--ts-hover); --bs-btn-hover-color: var(--ts-text); --bs-btn-hover-border-color: var(--ts-border-strong); --bs-btn-active-bg: #E2E8F0; --bs-btn-active-color: var(--ts-text); --bs-btn-active-border-color: var(--ts-border-strong); background: #fff; }
.btn-danger { --bs-btn-bg: var(--ts-error); --bs-btn-border-color: var(--ts-error); --bs-btn-hover-bg: #B91C1C; --bs-btn-hover-border-color: #B91C1C; }
.btn-outline-danger { --bs-btn-color: #B91C1C; --bs-btn-border-color: #FCA5A5; --bs-btn-hover-bg: var(--ts-error); --bs-btn-hover-border-color: var(--ts-error); background: #fff; }
.btn-link { color: var(--ts-navy); font-weight: 600; text-decoration: none; }
.btn-link:hover { text-decoration: underline; }
.btn.is-loading { pointer-events: none; opacity: .85; }
.btn:disabled, .btn.disabled { opacity: .6; }

.ts-icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); border: 0; background: transparent; color: var(--ts-text); font-size: 1.15rem; position: relative; text-decoration: none; cursor: pointer; transition: background-color .12s; }
.ts-icon-btn:hover { background: var(--ts-hover); color: var(--ts-text); }
.ts-icon-btn--sm { width: 32px; height: 32px; font-size: 1rem; }

/* Forms */
.form-label { font-weight: 600; font-size: .8125rem; color: var(--ts-text); margin-bottom: 4px; }
.form-control, .form-select { border-color: var(--ts-border-strong); border-radius: var(--r-sm); min-height: 40px; color: var(--ts-text); background-color: #fff; }
.form-control-sm, .form-select-sm { min-height: 34px; }
.form-control-lg, .form-select-lg { min-height: 50px; }
.form-control::placeholder { color: #94A3B8; }
.form-control:disabled, .form-select:disabled { background: #F1F5F9; }
.form-text { color: var(--ts-muted); font-size: .78rem; }
.invalid-feedback { font-size: .8rem; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--ts-error); }
.form-control.is-valid { border-color: var(--ts-success); }
.form-check-input:checked { background-color: var(--ts-navy); border-color: var(--ts-navy); }
.form-check-input { width: 1.1em; height: 1.1em; margin-top: .2em; }
.form-switch .form-check-input { width: 2.2em; }
.input-group > .form-control { min-height: inherit; }

/* Dropdowns */
.dropdown-menu { border: 1px solid var(--ts-border); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 6px; font-size: .875rem; }
.dropdown-item { border-radius: 6px; padding: .5rem .75rem; display: flex; align-items: center; min-height: 36px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ts-hover); color: var(--ts-text); }
.dropdown-item.text-danger:hover { background: var(--ts-error-bg); }

.alert { border-radius: var(--r-md); font-size: .875rem; }
.breadcrumb { --bs-breadcrumb-divider-color: #94A3B8; --bs-breadcrumb-item-active-color: var(--ts-muted); font-size: .78rem; margin: 0; }
.breadcrumb-item a { color: var(--ts-muted); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--ts-navy); text-decoration: underline; }

.progress { background: #E2E8F0; border-radius: 99px; }
.progress-bar { background: var(--ts-navy); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}