/* EconomicalDesk Managed Helpdesk — Corporate theme overlay (loads after bootstrap.min.css).
   Shared EconomicalDesk client-helpdesk theme: Sora headings, Manrope body, navy #0a1626
   chrome, orange #ea7a1f accent, soft radii, white cards on a cool light ground. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --color-bg: #f6f8fb;
  --color-surface: #ffffff;
  --color-text: #16283f;
  --color-navy: #0a1626;
  --color-navy-2: #12294a;
  --color-accent: #ea7a1f;
  --color-divider: #e4eaf2;
  --color-neutral-100: #ffffff;
  --color-neutral-200: #eef2f8;
  --color-neutral-300: #dfe6ef;
  --color-neutral-400: #c3cede;
  --color-neutral-500: #9fb0c6;
  --color-neutral-600: #7186a0;
  --color-neutral-700: #5c7189;
  --color-neutral-800: #33465e;
  --color-neutral-900: #16283f;
  --color-accent-100: #fdeedd;
  --color-accent-200: #fbdfc2;
  --color-accent-300: #f2a25c;
  --color-accent-400: #ef8f3a;
  --color-accent-600: #c96410;
  --color-accent-700: #a3500c;
  --font-heading: "Sora", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --shadow-sm: 0 1px 2px rgba(16, 38, 64, .06);
  --shadow-md: 0 8px 24px rgba(10, 22, 38, .10);
  /* Remap Bootstrap globals to the tokens */
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-body-font-family: var(--font-body);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 12px;
  --bs-border-radius-xl: 14px;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: var(--color-accent-600);
  --bs-link-hover-color: var(--color-accent-700);
  --bs-primary: var(--color-accent);
  --bs-primary-rgb: 234, 122, 31;
}

body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
/* Mobile: capsule menu protruding from the left edge */
.nav-capsule { display: none; }
@media (max-width: 899px) {
    .top-strip { display: none !important; }
  .nav-capsule {
    display: inline-flex; align-items: center; gap: 6px;
    position: absolute; left: 0; top: 84px; z-index: 500;
    background: #12294a; color: #fff; font-weight: 700; font-size: 13px;
    padding: 9px 16px 9px 12px; border: 1px solid rgba(255,255,255,.25); border-left: 0;
    border-radius: 0 999px 999px 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.35); cursor: pointer; white-space: nowrap;
  }
  body > nav { flex-wrap: nowrap !important; }
  .brand-tag { display: none !important; }
  .main-nav {
    position: fixed; left: 0; top: 0; bottom: 0; width: 272px; z-index: 2000;
    background: #fff; display: flex !important; flex-direction: column; gap: 6px !important;
    padding: 84px 22px 24px; box-shadow: 0 0 40px rgba(10,22,38,.25);
    border-radius: 0 18px 18px 0; transform: translateX(-105%); transition: transform .25s ease;
    overflow-y: auto; font-size: 16px !important;
  }
  .main-nav.open { transform: none; }
  body > nav { padding: 12px 14px !important; gap: 10px !important; }
  .nav-cta { margin-left: auto; padding: 9px 13px !important; font-size: 13px !important; white-space: nowrap; }
  .main-nav a { padding: 10px 8px; border-bottom: 1px solid #eef2f8; }
}

/* Sticky footer: navy strip stays at the bottom of the screen on short pages */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > footer { margin-top: auto; }

/* Responsive: no horizontal wobble on mobile; clip (not scroll-hidden) so dropdowns stay visible */
html, body { max-width: 100%; overflow-x: clip; }
*, *::before, *::after { min-width: 0; }
img, table, pre, video, iframe { max-width: 100%; }
.navbar.sticky-top { position: sticky; top: 0; z-index: 1030; }
@media (max-width: 575.98px) {
  .container, .container-fluid { padding-left: 20px; padding-right: 20px; }
  h1, .h1, .display-5, .display-6 { font-size: clamp(24px, 7vw, 34px); }
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-5, .display-6, .navbar-brand, legend {
  font-family: var(--font-heading); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em;
}
a { color: var(--color-accent-600); text-decoration: none; }
a:hover { color: var(--color-accent-700); }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
:focus { outline: none; box-shadow: none !important; }
:focus-visible { outline: 2px solid var(--color-accent) !important; outline-offset: 2px; }

/* Soft corner radii */
.btn, .form-control, .form-select, .alert, .badge, .dropdown-menu,
.input-group-text, .page-link, .modal-content, .list-group, .toast, pre {
  border-radius: 8px !important;
}
.card, .modal-content { border-radius: 12px !important; }
.form-check-input { border-radius: 4px !important; }

/* Buttons — heading face, orange primary */
.btn {
  font-family: var(--font-heading); font-weight: 600; font-size: 13.5px;
  border-width: 1px;
}
.btn-lg { font-size: 15px; }
.btn-primary {
  --bs-btn-bg: var(--color-accent); --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-bg: var(--color-accent-600); --bs-btn-hover-border-color: var(--color-accent-600);
  --bs-btn-active-bg: var(--color-accent-700); --bs-btn-active-border-color: var(--color-accent-700);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger, .btn-outline-warning, .btn-outline-success {
  --bs-btn-color: var(--color-text); --bs-btn-border-color: var(--color-neutral-400);
  --bs-btn-hover-bg: var(--color-neutral-200); --bs-btn-hover-color: var(--color-text);
  --bs-btn-hover-border-color: var(--color-neutral-500);
  --bs-btn-active-bg: var(--color-neutral-300); --bs-btn-active-color: var(--color-text);
  --bs-btn-active-border-color: var(--color-neutral-500);
}
.btn-outline-danger { --bs-btn-color: #b23a2f; --bs-btn-border-color: #e4b8b3; }
.btn-warning, .btn-dark, .btn-light, .btn-secondary {
  --bs-btn-bg: var(--color-navy-2); --bs-btn-border-color: var(--color-navy-2);
  --bs-btn-color: #fff; --bs-btn-hover-bg: var(--color-neutral-800);
  --bs-btn-hover-border-color: var(--color-neutral-800); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--color-neutral-700); --bs-btn-active-color: #fff;
}
/* AI Assist button — green with white text, everywhere */
.ai-assist-green, a.ai-assist-green,
.workspace .ai-assist-green {
  background: #1d8a4e !important; border: 1px solid #1d8a4e !important; color: #fff !important;
}
.ai-assist-green:hover { background: #166d3d !important; border-color: #166d3d !important; }
.ai-assist-green:disabled { opacity: .6; }

/* Client portal ticket view: same accents as the staff workspace */
.post-avatar {
  width: 30px; height: 30px; border-radius: 50%; color: #fff; flex: none;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.post-staff { border-left: 3px solid #17708b; }
.post-client { border-left: 3px solid #1d8a4e; }
.post-client, .post-client .card-header, .post-client .card-footer, .post-client .card-body { background: #f5fbf3 !important; }

a.btn-primary, a.btn-dark, a.btn-secondary, a.btn-warning, a.btn-success, a.btn-danger { color: #fff !important; }
.btn-link { font-weight: 600; color: var(--color-accent-700); text-align: left; }
.btn:disabled, .btn.disabled { opacity: .45; }

/* Nav — navy chrome */
.navbar, .bg-primary-dark, .bg-dark {
  background: var(--color-navy) !important;
  border-bottom: 2px solid var(--color-accent);
  box-shadow: none;
}
.navbar .nav-link, .navbar-brand { color: #eef2f8 !important; font-family: var(--font-heading); }
.navbar .nav-link:hover { color: var(--color-accent-300) !important; }
.navbar .nav-link.btn, .navbar .btn-light {
  background: var(--color-accent); color: #fff !important; border-color: var(--color-accent);
}
.brand-mark { color: var(--color-accent); }
.navbar .badge { background: var(--color-accent) !important; color: #fff; }

/* Cards — white, hairline border, soft shadow */
.card {
  background: #fff;
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-sm);
}
.card-header {
  background: #fff;
  border-bottom: 1px solid var(--color-divider);
  font-family: var(--font-heading); font-weight: 600;
  border-radius: 12px 12px 0 0 !important;
}
.card-footer { background: transparent; border-top: 1px solid var(--color-divider); }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.article-card { transition: box-shadow .15s ease; }
.article-card:hover { box-shadow: var(--shadow-md); transform: none; background: #fff; }

/* Hero + sections */
.hero { background: var(--color-bg); border-bottom: 1px solid var(--color-divider); }
.bg-white { background: #fff !important; }
.bg-body-tertiary { background: var(--color-bg) !important; }
.border-top { border-top: 1px solid var(--color-divider) !important; }
hr { height: 1px; background: var(--color-divider); opacity: 1; border: 0; }

/* Forms */
.form-control, .form-select, .input-group-text {
  background: #fff;
  border: 1px solid var(--color-neutral-400);
  color: var(--color-text);
}
.form-control:focus, .form-select:focus {
  background: #fff; border-color: var(--color-accent);
  box-shadow: none !important; outline: 2px solid rgba(234, 122, 31, .35); outline-offset: 1px;
}
.form-check-input { border: 1px solid var(--color-neutral-600); }
.form-check-input:checked { background-color: var(--color-accent); border-color: var(--color-accent); }
.form-label, label { font-weight: 600; }
.form-text { color: var(--color-neutral-700); }

/* Tables — themed header rule, row hairlines */
.table { --bs-table-bg: transparent; border-color: var(--color-neutral-300); }
.table thead th {
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  text-transform: none; letter-spacing: 0; color: var(--color-neutral-700);
  border-bottom: 1px solid var(--color-divider);
}
.table-hover > tbody > tr:hover > * { background: #f2f7fc; box-shadow: none; }
.table-danger > * { background: #fdeceb !important; color: var(--color-text); }

/* Badges/tags — square, ramp tints, ink text on light fills */
.badge { font-family: var(--font-heading); font-weight: 600; }
.badge.text-bg-primary { background: var(--color-accent) !important; color: #fff !important; }
.badge.text-bg-warning { background: var(--color-accent-300) !important; color: var(--color-text) !important; }
.badge.text-bg-danger { background: var(--color-accent-700) !important; color: #fff !important; }
.badge.text-bg-info { background: var(--color-neutral-200) !important; color: var(--color-text) !important; border: 1px solid var(--color-neutral-500); }
.badge.text-bg-secondary { background: var(--color-neutral-700) !important; color: #fff !important; }
.badge.text-bg-success { background: var(--color-neutral-900) !important; color: #fff !important; }
.badge.bg-white { background: transparent !important; border: 1px solid currentColor !important; }

/* Alerts — flat tints from the ramps, square */
.alert { border: 1px solid var(--color-divider); }
.alert-success { background: var(--color-neutral-200); color: var(--color-text); }
.alert-danger { background: #fadfdb; color: #9a3528; }
.alert-warning { background: var(--color-accent-100); color: var(--color-text); }
.alert-secondary, .alert-info { background: var(--color-neutral-200); color: var(--color-text); }

/* Pagination */
.page-link { color: var(--color-text); border-color: var(--color-neutral-500); background: transparent; }
.page-item.active .page-link { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.page-link:hover { background: var(--color-accent-100); color: var(--color-text); }

/* Breadcrumbs, dropdowns, list groups */
.breadcrumb-item a { color: var(--color-accent-700); }
.dropdown-menu { border: 1px solid var(--color-divider); box-shadow: var(--shadow-md); background: #fff; }
.dropdown-item:hover { background: #f2f7fc; }
.list-group-item { background: transparent; border-color: var(--color-neutral-300); }

/* Ticket view accents */
.post-staff { border-left: 3px solid #17708b; }
.post-note { border-left: 3px solid #b8860b; background: #fdf6e7; }
.stat-card { border: 1px solid var(--color-divider); }
.stat-card.text-bg-primary { background: var(--color-accent) !important; color: #fff !important; }
.stat-card.text-bg-warning { background: var(--color-accent-300) !important; color: var(--color-text) !important; }
.stat-card.text-bg-danger { background: var(--color-accent-700) !important; color: #fff !important; }
.stat-card.text-bg-secondary { background: var(--color-neutral-900) !important; color: #fff !important; }
.stat-card .fs-2 { font-family: var(--font-heading); font-weight: 800; }

/* Text + misc */
.text-secondary { color: var(--color-neutral-700) !important; }
.link-secondary { color: var(--color-neutral-700) !important; }
.lead { font-weight: 400; }
.article-links li { border-bottom: 1px solid var(--color-neutral-300); }
.article-body { line-height: 1.7; }
.ticket-table .ticket-subject { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575.98px) {
  .ticket-table .ticket-subject { max-width: 160px; }
}

/* CTA close — navy gradient field (landing CTA section) */
.poster-close {
  background: linear-gradient(105deg, var(--color-navy), var(--color-navy-2)); color: #fff;
  border-top: 0;
}
.poster-close h2, .poster-close .h3 { color: #fff; }
.poster-close .btn-primary {
  --bs-btn-bg: var(--color-accent); --bs-btn-color: #fff; --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-bg: var(--color-accent-600); --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--color-accent-600);
}
/* Stable responsive shell: prevents horizontal layout drift and scrollbar wobble. */
html { overflow-x: hidden; scrollbar-gutter: stable; }
body { overflow-x: hidden; width: 100%; max-width: 100%; }
img, video, svg, canvas { max-width: 100%; height: auto; }
.container, .container-fluid, .row, [class*="col-"] { min-width: 0; }
.table-responsive { overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.support-hero { background: linear-gradient(115deg,#0a1626 0%,#17365f 100%); }
.py-lg-6 { padding-top: 5rem; padding-bottom: 5rem; }
.ajax-progress { position: fixed; z-index: 10000; left: 0; top: 0; height: 3px; width: 0; background: #ea7a1f; box-shadow: 0 0 8px rgba(234,122,31,.6); transition: width .18s ease, opacity .18s ease; pointer-events: none; }
.ajax-busy { cursor: progress; }
.ajax-busy .ajax-progress { opacity: 1; }
@media (max-width: 767.98px) { .py-lg-6 { padding-top: 3.5rem; padding-bottom: 3.5rem; } }