/* ==========================================================================
   Kloud9 brand overlay — loaded after theme.css.
   Palette: red #C0100D · teal #0DBDC0 · navy #293241 · grey #E2E2E2
   Fonts:   Jost (headings) · Open Sans (body) — self-hosted woff2
   ========================================================================== */

@font-face {
  font-family: "Open Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/kloud9/open-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/kloud9/open-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/kloud9/open-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/kloud9/jost-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/kloud9/jost-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/kloud9/jost-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/kloud9/jost-latin-700-normal.woff2") format("woff2");
}

/* theme.css sets --font and --primary on the universal selector `*`, so the
   value lands directly on every element. Match that selector here (this sheet
   loads after theme.css) so the Kloud9 vars win everywhere. */
* {
  /* Teal drives links, nav highlights, focus states (theme.css var) */
  --primary: #0dbdc0;
  --font: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  font-family: var(--font);
}

/* Headings: Jost (geometric sans), Kloud9 navy */
h1, h2, h3, .h1, .h2, .h3,
.header-title,
.card-header-title {
  font-family: "Jost", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #293241;
}

/* Primary buttons: Kloud9 red (matches the knowledge base CTAs) */
.btn-primary {
  background-color: #c0100d;
  border-color: #c0100d;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: #9a0d0a;
  border-color: #9a0d0a;
}
.btn-outline-primary {
  color: #c0100d;
  border-color: #c0100d;
}
.btn-outline-primary:hover {
  background-color: #c0100d;
  border-color: #c0100d;
  color: #fff;
}

/* Links + selected nav pick up teal via --primary; deepen hover for contrast */
a:hover {
  color: #0a9799;
}

/* Login/registration pages (theme-root.css) style a bare <button> with a
   hardcoded blue — repaint it Kloud9 red to match the knowledge base CTAs.
   Scoped to those pages and to buttons carrying no .btn class: applying it to
   every submit button also repainted .btn-outline-* ones, which left red text
   on a red background (the invisible "Update Details" button on /portal/profile). */
.page-login form button[type="submit"]:not([class*="btn"]),
.page-register-1 form button[type="submit"]:not([class*="btn"]),
.page-register-2 form button[type="submit"]:not([class*="btn"]),
.page-register-3 form button[type="submit"]:not([class*="btn"]),
.page-account-password-reset-token form button[type="submit"]:not([class*="btn"]),
.page-404 form button[type="submit"]:not([class*="btn"]) {
  background-color: #c0100d !important;
  border-color: #c0100d !important;
  color: #fff !important;
}
.page-login form button[type="submit"]:not([class*="btn"]):hover,
.page-register-1 form button[type="submit"]:not([class*="btn"]):hover,
.page-register-2 form button[type="submit"]:not([class*="btn"]):hover,
.page-register-3 form button[type="submit"]:not([class*="btn"]):hover,
.page-account-password-reset-token form button[type="submit"]:not([class*="btn"]):hover,
.page-404 form button[type="submit"]:not([class*="btn"]):hover {
  background-color: #9a0d0a !important;
  border-color: #9a0d0a !important;
}

/* Sidebar: selected item accent */
.navbar-vertical .navbar-nav .nav-link.selected {
  color: #0a9799;
}

/* Logo sizing (KL9UD wordmark is wider than the stock logo) */
.navbar-brand-img,
.logo-form {
  max-height: 44px;
  width: auto;
}

/* Dashboard header: the stock theme layers a generic city photo
   (cover.png, upscaled and blurry on wide screens) under an 85% blue
   gradient, which clashes with the Kloud9 palette. Use a clean brand
   gradient instead. Replacing cover.png via settings still works — this
   only overrides the default. */
.index-bg {
  background: linear-gradient(120deg, #0dbdc0 0%, #0a9799 45%, #293241 100%);
  /* The theme sets height:100%, which against the full-height flex body
     stretches this banner over the whole page. Size it to its content. */
  height: auto;
}
.index-bg::before {
  background-image: none;
  opacity: 1;
}

/* Full-viewport flex column so the footer pins to the bottom on short pages.
   Also removes theme-root's body padding, which painted a white frame
   around the page (visible as a white bar under the footer). */
html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* theme-root turns these body classes into a centred grid (align-items:
   center with stretched auto rows), which strands the footer mid-page.
   Flex column instead: auto margins centre the card, footer takes the
   bottom edge. */
.page-login,
.page-404,
.page-register-1,
.page-register-2,
.page-register-3,
.page-account-password-reset-token {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 24px; /* keeps the card off the edge when the page scrolls */
}
.page-login .wrapper,
.page-404 .wrapper,
.page-register-1 .wrapper,
.page-register-2 .wrapper,
.page-register-3 .wrapper,
.page-account-password-reset-token .wrapper {
  margin-top: auto !important; /* theme sets margin-top: 50px !important */
  margin-bottom: auto;
}

/* theme-root relied on body padding for edge spacing of the login card on
   narrow screens; reinstate it on the card wrapper instead of the body. */
@media (max-width: 608px) {
  .wrapper {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Kloud9 footer (mirrors the knowledge base footer) */
.kloud9-footer {
  background-color: #1c2330; /* navy-800 */
  color: #b9c0cb;
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.8125rem;
  margin-top: auto; /* flex pushes it to the viewport bottom */
  width: 100%;
}
.kloud9-footer a {
  color: #b9c0cb;
  margin: 0 0.75rem;
  font-size: 0.75rem;
}
.kloud9-footer a:hover {
  color: #6ed8da; /* teal-300 */
  text-decoration: underline;
}
.kloud9-footer .kloud9-footer-copyright {
  color: #ffffff;
  font-weight: 600;
  margin: 0.75rem 0;
}
.kloud9-footer .kloud9-footer-small {
  color: #737f96;
  font-size: 0.75rem;
  margin: 0.75rem 0 0;
}

/* Knowledge base article content (rendered TipTap) */
.kb-content h1,
.kb-content h2,
.kb-content h3 {
  margin-top: 1.25em;
  margin-bottom: 0.5em;
}
.kb-content h1:first-child,
.kb-content h2:first-child,
.kb-content h3:first-child {
  margin-top: 0;
}
.kb-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}
.kb-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.9375rem;
}
.kb-content th,
.kb-content td {
  border: 1px solid #e2e2e2;
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.kb-content th {
  background-color: #f8f9fa;
  color: #293241;
}
.kb-content mark {
  background-color: #ffefad;
  padding: 0 0.15em;
  border-radius: 2px;
}
.kb-content blockquote {
  border-left: 4px solid #0dbdc0;
  margin: 1rem 0;
  padding: 0.25rem 0 0.25rem 1rem;
  color: #515e77;
}
.kb-content pre {
  background: #293241;
  color: #e2e2e2;
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
}
.kb-content ul[data-type="taskList"] {
  list-style: none;
  padding-left: 0;
}
.kb-content ul[data-type="taskList"] li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.kb-content ul[data-type="taskList"] input[type="checkbox"] {
  margin-top: 0.3rem;
  accent-color: #0a9799;
  pointer-events: none;
}
.kb-content iframe.pdf-embed {
  width: 100%;
  height: 520px;
  border: 1px solid #e2e2e2;
  border-radius: 0.5rem;
  background: #f8f9fa;
  margin: 1rem 0;
}
.kb-content .mermaid-diagram {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  margin: 1rem 0;
}
.kb-content .mermaid-diagram svg {
  max-width: 100%;
  height: auto;
}

/* On the vertical-nav layout, keep the footer clear of the fixed sidebar */
@media (min-width: 768px) {
  .navbar-vertical.fixed-left ~ .kloud9-footer,
  body.has-sidebar .kloud9-footer {
    margin-left: 250px;
    /* width:100% above would add to the margin and overflow the viewport */
    width: auto;
  }
}

/* ==========================================================================
   Interface polish — applies to the signed-in portal and the staff admin.
   The stock theme is flat and washed out: hairline borders, grey-on-grey
   headings, and no depth. This adds a consistent card system, clearer
   hierarchy, and brand-coloured interactive states.
   ========================================================================== */

/* --- Cards: soften edges, add depth, lift headings out of grey ---------- */
.card {
  border: 1px solid #e8ecef;
  border-radius: 10px;
  box-shadow:
    0 1px 2px rgba(41, 50, 65, 0.04),
    0 2px 10px rgba(41, 50, 65, 0.05);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid #f0f2f4;
  padding: 0.9rem 1.25rem;
}

/* Stock markup puts .text-muted on card titles, which renders them nearly
   invisible; the specificity here is deliberate to beat it. */
.card .card-header .card-header-title,
.card .card-header .card-header-title.text-muted,
.card .card-header .card-title,
.card .card-header .card-title.text-muted {
  /* theme.css sets .text-muted colour with !important, so match it */
  color: #293241 !important;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  margin-bottom: 0;
}

.card .card-header .card-header-title .fe,
.card .card-header .card-title .fe {
  color: #0dbdc0;
}

/* Stat blocks: quieter label, stronger figure */
.card .card-title.text-uppercase {
  color: #737f96;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}

/* --- Forms: consistent controls with a teal focus ring ------------------ */
.form-control,
.form-select,
.custom-select {
  border-radius: 8px;
  border-color: #dfe4e9;
}

.form-control:focus,
.form-select:focus,
.custom-select:focus {
  border-color: #0dbdc0;
  box-shadow: 0 0 0 3px rgba(13, 189, 192, 0.15);
}

label,
.form-group > label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #515e77;
  margin-bottom: 0.35rem;
}

/* --- Buttons ----------------------------------------------------------- */
.btn {
  border-radius: 8px;
  font-weight: 600;
}

.btn-sm {
  border-radius: 6px;
}

/* --- Tables ------------------------------------------------------------ */
.table thead th {
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #737f96;
  border-bottom: 1px solid #e8ecef;
}

.table tbody tr:hover {
  background-color: #fafbfc;
}

.table td,
.table th {
  border-top-color: #f0f2f4;
}

/* --- Sidebar ----------------------------------------------------------- */
.navbar-vertical {
  border-right: 1px solid #e8ecef;
}

.navbar-vertical .navbar-nav .nav-link {
  border-radius: 8px;
  margin: 1px 0.5rem;
  padding: 0.5rem 0.75rem;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.navbar-vertical .navbar-nav .nav-link:hover {
  background-color: #f2f6f7;
}

.navbar-vertical .navbar-nav .nav-link.selected {
  background-color: #e7f9f9;
  color: #087173;
  font-weight: 600;
}

.navbar-vertical .navbar-heading {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: #96a1b0;
}

/* Stock avatar is a placeholder photo; show brand initials instead */
.navbar-user .avatar-img {
  display: none;
}

.navbar-user .avatar::after {
  content: "K9";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #0dbdc0;
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  font-family: "Jost", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --- Dashboard banner: trimmer, with the balance given more presence --- */
.header.index-bg {
  padding-top: 1.5rem;
  border-bottom: 0;
}

.header.index-bg .header-tabs .nav-link {
  padding-bottom: 0;
}

/* ==========================================================================
   Settings page (/admin/settings)
   The stock config form is ~55 fields in a single narrow column — a very
   long scroll with acres of unused width. Lay the fields out in columns
   and give the page a sticky section index.
   ========================================================================== */

.settings-page {
  max-width: 1200px;
}

/* Each field is markup-wise a .row > .col-12 > .form-group, so every field
   takes a full line. Turn the card body into a grid and let each of those
   rows become a column cell instead. */
.settings-page .card-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 1.75rem;
  align-items: start;
}

/* Wide controls (rich text, file pickers, long link lists) read better
   across the full width */
.settings-page .card-body > .row:has(textarea),
.settings-page .card-body > .row:has(.tox),
.settings-page .card-body > .row:has(input[type="file"]) {
  grid-column: 1 / -1;
}

.settings-page .form-group {
  margin-bottom: 1rem;
}

/* Toggle rows shouldn't stretch to the grid cell height */
.settings-page .custom-checkbox-toggle,
.settings-page .form-check {
  align-self: center;
}

/* Sticky section index, injected by JS below the page title */
.settings-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.6rem 0;
  margin-bottom: 1rem;
  background: #f9fafb;
  border-bottom: 1px solid #e8ecef;
}

.settings-nav a {
  font-size: 0.75rem;
  font-weight: 600;
  color: #515e77;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}

.settings-nav a:hover {
  background: #e7f9f9;
  color: #087173;
}

/* Anchor offset so a jumped-to card clears the sticky index */
.settings-page .card {
  scroll-margin-top: 4rem;
}

/* ---------------------------------------------------------------------------
   Stripe Elements
   Each card field is a cross-origin iframe, so only the mount point is ours to
   style — the text inside is set via the `style` object in page_stripe.js.
   These rules make the mount point behave like a real .form-control: matching
   height, and focus/invalid borders driven by classes the JS toggles.
   --------------------------------------------------------------------------- */
.stripe-input {
  /* The iframe is a replaced element, so the usual line-height centring in
     .form-control does not apply — set an explicit height instead. */
  height: calc(1.5em + 1rem + 2px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stripe-input .StripeElement,
.stripe-input .__PrivateStripeElement {
  width: 100%;
}

.stripe-input.is-focused {
  border-color: #0dbdc0;
  box-shadow: 0 0 0 0.15rem rgba(13, 189, 192, 0.25);
  outline: 0;
}

.stripe-input.is-invalid {
  border-color: #e63757;
}

.stripe-input.is-invalid.is-focused {
  box-shadow: 0 0 0 0.15rem rgba(230, 55, 87, 0.25);
}

/* Only reserve space for the shared error label once it has a message. */
#stripe_errors {
  color: #e63757;
  font-size: 0.8125rem;
  margin-bottom: 0;
}
#stripe_errors:empty {
  display: none;
}

/* ---------------------------------------------------------------------------
   Paginators
   Laravel's links() output is dropped straight inside .table-responsive with no
   wrapper, so it renders hard against the left and bottom edges of the card.
   Centre it and give it room. Applies to the invoice and transaction tables.
   --------------------------------------------------------------------------- */
.card .pagination {
  justify-content: center;
  margin: 1.25rem 0 0.75rem;
}

/* The paginator is inside .table-responsive, which scrolls horizontally on
   narrow screens; without this the page links can end up off-screen. */
.card .table-responsive > .pagination,
.card .table-responsive > nav {
  position: sticky;
  left: 0;
}

/* Active page in Kloud9 teal rather than Bootstrap's default blue. */
.card .pagination .page-item.active .page-link {
  background-color: #0dbdc0;
  border-color: #0dbdc0;
  color: #fff;
}
.card .pagination .page-link {
  color: #293241;
}
.card .pagination .page-link:hover {
  color: #0dbdc0;
}

/* ---------------------------------------------------------------------------
   Muted text on light info panels
   .text-muted (#95aac9) on .bg-light (#edf2f9) measured 2.1:1 — well under the
   WCAG AA minimum of 4.5:1, and it is set at 13px where the full ratio applies
   rather than the 3:1 large-text allowance. #556579 measures 5.3:1 on the same
   background and still reads as secondary against body text (#12263f).
   theme.css declares .text-muted with !important, so this has to match it.
   Applies to the ticket tips panel and the admin empty-state cards.
   --------------------------------------------------------------------------- */
.card.bg-light .text-muted,
.card.bg-light .text-muted li {
  color: #556579 !important;
}

/* Give the panel's leading label a little hierarchy over its body copy. */
.card.bg-light .card-body > p:first-child {
  color: #293241 !important;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Flex gap utilities
   theme.css is Bootstrap 4 era and predates the .gap-* utilities, but the
   views were written against Bootstrap 5 (whose JS bundle we do load) and use
   them in eight places - the article feedback buttons, the admin navbar and
   several admin tables. None of them had any effect, so those rows rendered
   with their controls touching.

   The CSS gap property itself is fine in every browser we support; only the
   class was missing. Values follow Bootstrap 5's spacer scale so the markup
   means what its author intended.
   --------------------------------------------------------------------------- */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

/* ---------------------------------------------------------------------------
   Breathing room above the footer
   .main-content carries no bottom padding, so whatever a page ends with sits
   flush against the dark footer - on the add card page the submit button had
   12px beneath it. This affects every page, so it is fixed here rather than by
   adding a bottom margin to each view's last element.
   --------------------------------------------------------------------------- */
.main-content {
  padding-bottom: 3rem;
}