/* line 5, app/assets/stylesheets/admin/admin.scss */
body.admin {
  background: #fff;
}

/* line 9, app/assets/stylesheets/admin/admin.scss */
.table_site_icon {
  max-width: 20px;
  vertical-align: middle;
}

/* line 14, app/assets/stylesheets/admin/admin.scss */
.quote_row_submitted {
  background: #f0f0f0;
}
/* line 3, app/assets/stylesheets/admin/invoices.scss */
form.to_invoice_list {
  max-width: none !important;
  min-width: 2500px;
  font-size: 85%;
}

/* line 8, app/assets/stylesheets/admin/invoices.scss */
form.to_invoice_list table {
  width: auto;
  border-top: 0;
}

/* line 13, app/assets/stylesheets/admin/invoices.scss */
form.to_invoice_list th {
  font-weight: normal;
  background: #27a4c8;
  color: #fff;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
}

/* line 20, app/assets/stylesheets/admin/invoices.scss */
form.to_invoice_list th, form.to_invoice_list td {
  width: 20px;
}

/* line 24, app/assets/stylesheets/admin/invoices.scss */
form.to_invoice_list select {
  width: auto;
}

/* line 27, app/assets/stylesheets/admin/invoices.scss */
form.to_invoice_list textarea {
  width: auto;
}

/* line 32, app/assets/stylesheets/admin/invoices.scss */
.row_alert {
  background-color: #ffee99;
}

/* line 35, app/assets/stylesheets/admin/invoices.scss */
.row_cancel_pending {
  background-color: #c9ffad;
}

@media print {
  /* line 41, app/assets/stylesheets/admin/invoices.scss */
  form.to_invoice_list {
    font-family: Arial,Helvitica,sans-serif;
  }
  /* line 43, app/assets/stylesheets/admin/invoices.scss */
  form.to_invoice_list th {
    background: black;
    color: #fff;
    border-top: 1px rgba(34, 36, 38, 0.1);
  }
}
/* line 5, app/assets/stylesheets/admin/product_pricing.scss */
#products_pricing_table {
  /*Remove number increase/decrease arrows for additional space */
  /* Chrome, Safari, Edge, Opera */
  /* Firefox */
}

/* line 6, app/assets/stylesheets/admin/product_pricing.scss */
#products_pricing_table input {
  padding: 0.1em;
  text-align: center;
}

/* line 13, app/assets/stylesheets/admin/product_pricing.scss */
#products_pricing_table input::-webkit-outer-spin-button,
#products_pricing_table input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* line 19, app/assets/stylesheets/admin/product_pricing.scss */
#products_pricing_table input[type=number] {
  -moz-appearance: textfield;
}

/* line 23, app/assets/stylesheets/admin/product_pricing.scss */
#products_pricing_table td {
  padding: 0.15em;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

/*
 * Tailwind's preflight (@tailwind base above) handles the base border reset,
 * heading/paragraph margin reset, form-control normalization and table
 * border-collapse globally now — this used to be hand-rolled here, scoped
 * per theme, while preflight was disabled to avoid clobbering Semantic UI's
 * own styling. No longer needed now that Semantic UI is fully removed.
 */

/*
 * FullFibre theme — flat, high-contrast, no border-radius or box-shadow
 * anywhere (sharp 1px borders only), extracted directly from the mockups
 * in local/FullfibreBroadband/. Everything here is scoped under the
 * `.fullfibre` body class (see app/helpers/application_helper.rb#fullfibre_page?)
 * so it can never leak into Cascade or Admin pages.
 */
@layer components {
  .fullfibre {
    @apply m-0 bg-ff-canvas text-ff-body font-sans text-[14px];
  }

  .fullfibre h1,
  .fullfibre .ff-h1 {
    @apply font-display font-extrabold text-ff-ink tracking-[-.03em] text-[28px];
  }

  .fullfibre h2,
  .fullfibre .ff-h2 {
    @apply font-display font-extrabold text-ff-ink tracking-[-.02em] text-2xl;
  }

  .fullfibre .ff-eyebrow {
    @apply inline-block font-display font-bold uppercase tracking-[.08em] text-[10px] bg-ff-highlight text-ff-ink px-[9px] py-[6px];
  }

  .fullfibre .ff-btn-primary,
  .fullfibre .ff-btn-secondary,
  .fullfibre .ff-btn-danger {
    @apply inline-flex items-center justify-center text-center font-display font-bold text-base tracking-[-.015em] border px-7 py-4 no-underline cursor-pointer;
  }
  .fullfibre .ff-btn-primary:disabled,
  .fullfibre .ff-btn-secondary:disabled,
  .fullfibre .ff-btn-danger:disabled {
    @apply cursor-not-allowed opacity-60;
  }
  .fullfibre .ff-btn-primary {
    @apply bg-ff-accent border-ff-accent text-white;
  }
  .fullfibre .ff-btn-secondary {
    @apply bg-transparent border-ff-ink text-ff-ink;
  }
  .fullfibre .ff-btn-danger {
    @apply bg-red-600 border-red-600 text-white;
  }

  .fullfibre .ff-card {
    @apply bg-ff-surface border border-ff-ink p-12;
  }

  /* Product selection cards (quote_connectivity/product step) */
  .fullfibre .ff-product-card {
    @apply flex flex-col bg-ff-surface border border-ff-ink;
  }
  .fullfibre .ff-product-card:has(input[type="radio"]:checked) {
    @apply border-ff-accent;
  }

  /* Order summary bar — dark banner showing the selected product/bundle,
     term and running total. Shown across wizard steps once a product has
     been chosen (see quote_form/_mini_cart). */
  .fullfibre .ff-summary-bar {
    @apply flex items-center justify-between gap-6 flex-wrap bg-ff-ink text-ff-canvas px-6 py-5 mb-8;
  }

  /* Option cards (quote_connectivity/quote_form options step) — a
     checkbox/quantity row, an optional description row, then a
     term/setup/monthly meta row. */
  .fullfibre .ff-group-heading {
    @apply font-display font-bold text-sm text-ff-ink tracking-[-.01em] mb-3;
  }
  .fullfibre .ff-option-card {
    @apply border border-ff-ink bg-ff-surface mb-10;
  }
  .fullfibre .ff-option-checkbox-row {
    @apply flex items-center gap-[11px] px-5 py-[18px] border-b border-ff-ink cursor-pointer;
  }
  .fullfibre .ff-option-checkbox-box {
    @apply w-[19px] h-[19px] flex-none border border-ff-ink flex items-center justify-center;
  }
  .fullfibre .ff-option-checkbox-row input[type="checkbox"] {
    @apply absolute opacity-0 w-0 h-0;
  }
  .fullfibre .ff-option-checkbox-row input[type="checkbox"]:checked + .ff-option-checkbox-box::after {
    content: "\2713";
    @apply text-ff-accent text-[13px] font-bold;
  }
  .fullfibre .ff-option-description {
    @apply px-5 py-4 border-b border-ff-ink text-[13px] text-ff-body;
  }
  .fullfibre .ff-option-meta {
    @apply flex flex-wrap justify-between gap-2 px-5 py-[14px] text-xs text-ff-body;
  }
  .fullfibre .ff-option-meta strong {
    @apply font-display font-bold text-ff-ink;
  }

  /* Wizard stepper — mirrors the exact state logic from the mockups'
     stepper partial: upcoming (white/muted) -> active (ink/canvas) ->
     done (highlight/ink, green check). */
  .fullfibre .ff-stepper {
    @apply flex border border-ff-ink bg-ff-surface overflow-hidden;
  }
  .fullfibre .ff-stepper-item {
    @apply flex-1 min-w-0 flex items-center gap-2 px-3 py-[13px] border-l border-ff-divider bg-ff-surface text-ff-muted;
  }
  .fullfibre .ff-stepper-item:first-child {
    @apply border-l-0;
  }
  .fullfibre .ff-stepper-item.is-active {
    @apply bg-ff-ink border-ff-ink text-ff-canvas;
  }
  .fullfibre .ff-stepper-item.is-done {
    @apply bg-ff-highlight text-ff-ink;
  }
  .fullfibre .ff-stepper-num {
    @apply font-display font-bold text-[9px] tracking-[.08em] opacity-60;
  }
  .fullfibre .ff-stepper-label {
    @apply font-display font-bold text-xs tracking-[-.015em] whitespace-nowrap overflow-hidden text-ellipsis;
  }
  .fullfibre .ff-stepper-check {
    @apply text-ff-success text-xs;
  }

  /* Compact stand-in for ff-stepper below md — the full item row has no
     room to breathe under ~768px (labels ellipsis down to nothing), so
     mobile gets a progress bar + "Step X of Y" instead. */
  .fullfibre .ff-stepper-mobile {
    @apply border border-ff-ink bg-ff-surface px-4 py-3;
  }
  .fullfibre .ff-stepper-mobile-bar {
    @apply h-1 bg-ff-divider mb-3;
  }
  .fullfibre .ff-stepper-mobile-fill {
    @apply h-full bg-ff-accent;
  }
  .fullfibre .ff-stepper-mobile-label {
    @apply font-display font-bold text-xs text-ff-ink;
  }
  .fullfibre .ff-stepper-mobile-count {
    @apply text-ff-muted mr-1;
  }

  /* Modal — native <dialog>, no JS plugin needed (see modal_class helper). */
  .fullfibre .ff-modal {
    @apply bg-ff-surface border border-ff-ink p-6 max-w-lg w-full m-auto;
  }
  .fullfibre .ff-modal::backdrop {
    @apply bg-black/50;
  }
  .fullfibre .ff-modal .ff-modal-header {
    @apply font-display font-bold text-ff-ink text-lg mb-3;
  }
  .fullfibre .ff-modal .ff-modal-content {
    @apply text-ff-body mb-4;
  }
  .fullfibre .ff-modal .ff-modal-actions {
    @apply flex justify-end gap-3 mt-4;
  }

  /* Pagination (app/helpers/search_pagination.rb ThemedLinkRenderer) */
  .fullfibre .ff-pagination {
    @apply inline-flex border border-ff-ink text-sm;
  }
  .fullfibre .ff-pagination-item {
    @apply px-3 py-2 border-l border-ff-ink text-ff-ink no-underline first:border-l-0;
  }
  .fullfibre .ff-pagination-item.is-active {
    @apply bg-ff-ink text-white;
  }
  .fullfibre .ff-pagination-item.is-disabled {
    @apply text-ff-muted pointer-events-none;
  }

  .fullfibre .ff-segment {
    @apply bg-ff-surface border border-ff-ink p-6 mb-4;
  }
  .fullfibre .ff-segment-secondary {
    @apply bg-ff-highlight border-ff-divider;
  }
  .fullfibre .ff-alert {
    @apply border border-ff-ink bg-ff-surface px-4 py-3 mb-4;
  }
  .fullfibre .ff-alert-danger {
    @apply border-ff-accent bg-ff-highlight text-ff-ink;
  }
  .fullfibre .ff-alert-success {
    @apply border-ff-success bg-ff-highlight text-ff-ink;
  }
  .fullfibre .ff-loader {
    @apply inline-flex items-center gap-2 text-ff-muted text-sm italic;
  }
  .fullfibre .ff-loader.is-centered {
    @apply flex justify-center;
  }
  .fullfibre .ff-loader::before {
    content: '';
    @apply block w-4 h-4 shrink-0 rounded-full border-2 border-ff-divider border-t-ff-ink animate-spin;
  }
  .fullfibre .ff-table {
    @apply w-full border border-ff-ink border-collapse mb-4;
  }
  .fullfibre .ff-table th,
  .fullfibre .ff-table td {
    @apply border border-ff-divider px-3 py-2 text-left;
  }
  .fullfibre .ff-table thead th {
    @apply bg-ff-highlight text-ff-ink font-display font-bold text-[11px] uppercase tracking-[.06em] border-b border-ff-ink;
  }
  .fullfibre .ff-table tfoot th {
    @apply bg-ff-highlight text-ff-ink font-display font-bold text-[13px];
  }
  .fullfibre .ff-divider {
    @apply border-t border-ff-divider my-4;
  }
  .fullfibre .ff-list .ff-list-item {
    @apply block mb-1;
  }
  .fullfibre .ff-container {
    @apply max-w-[1240px] mx-auto px-6;
  }
  .fullfibre .ff-stat-value {
    @apply font-display text-3xl font-bold text-ff-ink;
  }
  .fullfibre .ff-stat-label {
    @apply font-display text-xs uppercase tracking-[.05em] text-ff-muted font-bold;
  }
  .fullfibre .ff-pill {
    @apply inline-block border border-ff-divider bg-ff-highlight text-ff-ink text-xs px-2 py-1;
  }
}

/*
 * FullFibre typography and form-field base styles — shared across every page
 * using native markup (headings, paragraphs, links, `.field`/`.fields`
 * wrappers and their inputs). Kept as a separate layer from the component
 * classes above mostly for historical reasons (this used to also re-skin
 * Semantic UI's own class names before Semantic was fully removed).
 */
@layer components {
  .fullfibre h3 {
    @apply font-display font-bold text-ff-ink tracking-[-.015em] text-lg mb-2;
  }
  .fullfibre h4 {
    @apply font-display font-bold text-ff-ink tracking-[-.01em] text-base mb-2;
  }
  .fullfibre p {
    @apply mb-3 leading-relaxed;
  }
  .fullfibre a {
    @apply text-ff-accent;
  }

  /* Form fields */
  .fullfibre .field {
    @apply mb-5 max-w-[520px];
  }
  .fullfibre .fields {
    @apply flex flex-wrap gap-4 items-end mb-5;
  }
  .fullfibre .fields .field {
    @apply mb-0 flex-1 min-w-[160px] max-w-[520px];
  }
  .fullfibre .fields .field:has(input[type="checkbox"]) {
    @apply flex-none min-w-0;
  }
  .fullfibre .field > label,
  .fullfibre .fields > label {
    @apply block font-display font-bold text-[10px] uppercase tracking-[.08em] text-ff-ink mb-[7px];
  }
  .fullfibre .field input[type="text"],
  .fullfibre .field input[type="email"],
  .fullfibre .field input[type="password"],
  .fullfibre .field input[type="number"],
  .fullfibre .field input[type="tel"],
  .fullfibre .field select,
  .fullfibre .field textarea,
  .fullfibre .fields input[type="text"],
  .fullfibre .fields input[type="email"],
  .fullfibre .fields select {
    @apply w-full border border-ff-ink bg-ff-surface px-[14px] py-3 text-[15px] text-ff-ink focus:outline-none focus:ring-2 focus:ring-ff-accent;
  }
  .fullfibre .field input[type="checkbox"],
  .fullfibre .field input[type="radio"],
  .fullfibre .fields input[type="checkbox"],
  .fullfibre .fields input[type="radio"] {
    accent-color: theme('colors.ff.accent');
    @apply w-[18px] h-[18px] align-middle mr-2;
  }
  .fullfibre .field input[type="checkbox"] + label,
  .fullfibre .field input[type="radio"] + label,
  .fullfibre .fields input[type="checkbox"] + label,
  .fullfibre .fields input[type="radio"] + label {
    display: inline;
    @apply normal-case font-sans font-normal text-ff-body tracking-normal;
  }

  /* Field validation errors — config/application.rb's field_error_proc wraps
     invalid inputs in a nested div.field.error; semantic_checkbox and
     semantic_checkbox_tag apply the class directly to the field wrapper
     instead. Style both shapes off the same ff-accent orange already used
     for .ff-alert-danger. */
  .fullfibre .field .field.error {
    @apply mb-0 max-w-none;
  }
  .fullfibre .field.error input[type="text"],
  .fullfibre .field.error input[type="email"],
  .fullfibre .field.error input[type="password"],
  .fullfibre .field.error input[type="number"],
  .fullfibre .field.error input[type="tel"],
  .fullfibre .field.error select,
  .fullfibre .field.error textarea {
    @apply border-ff-accent ring-1 ring-ff-accent;
  }
  .fullfibre .field:has(> .field.error) > label,
  .fullfibre .field.error > label,
  .fullfibre .field.error input[type="checkbox"] + label,
  .fullfibre .field.error input[type="radio"] + label {
    @apply text-ff-accent;
  }
  .fullfibre .field.error input[type="checkbox"],
  .fullfibre .field.error input[type="radio"] {
    outline: 2px solid theme('colors.ff.accent');
    outline-offset: 1px;
  }

}

/*
 * Cascade theme — design tokens and components extracted from
 * local/cascade-dashboard.png. Scoped under the `.cascade` body class (see
 * app/helpers/application_helper.rb#cascade_page? and
 * app/views/layouts/application_cascade.html.erb) so it can never leak into
 * FullFibre or Admin pages.
 */
@layer components {
  /* Base — matches .fullfibre's equivalent: sets the body font (Inter,
     regular weight) and canvas background. Bold/heading elements below
     layer on Archivo (font-display) on top of this, same split as
     FullFibre uses between its body copy and ff-* display elements. */
  .cascade {
    @apply m-0 bg-cascade-canvas text-cascade-body font-sans text-[14px];
  }

  .cascade .cascade-eyebrow {
    @apply inline-block font-display font-bold uppercase tracking-[.06em] text-[11px] text-cascade-muted;
  }

  .cascade .cascade-btn-primary,
  .cascade .cascade-btn-secondary,
  .cascade .cascade-btn-danger {
    @apply inline-block text-center font-display font-bold text-sm border px-5 py-3 no-underline rounded-md;
  }
  .cascade .cascade-btn-primary {
    @apply bg-cascade-primary border-cascade-primary text-white;
  }
  .cascade .cascade-btn-secondary {
    @apply bg-white border-cascade-divider text-cascade-ink;
  }
  .cascade .cascade-btn-danger {
    @apply bg-cascade-danger border-cascade-danger text-white;
  }

  .cascade .cascade-card {
    @apply bg-cascade-surface border border-cascade-divider rounded-lg p-5;
  }

  .cascade .cascade-pill {
    @apply inline-block font-display font-bold uppercase tracking-[.04em] text-[11px] rounded px-2 py-1;
  }
  .cascade .cascade-pill-danger {
    @apply bg-cascade-danger-bg text-cascade-danger;
  }
  .cascade .cascade-pill-warning {
    @apply bg-cascade-warning-bg text-cascade-warning;
  }
  .cascade .cascade-pill-success {
    @apply bg-cascade-success-bg text-cascade-success;
  }

  /* Coloured left-edge accent used on alert banners and attention-list
     items, e.g. "1 service down" / "Order delayed by supplier". */
  .cascade .cascade-callout {
    @apply bg-cascade-surface border-l-4 pl-4 py-3;
  }
  .cascade .cascade-callout-danger {
    @apply border-cascade-danger;
  }
  .cascade .cascade-callout-warning {
    @apply border-cascade-warning;
  }
  .cascade .cascade-callout-info {
    @apply border-cascade-accent-bright;
  }

  .cascade .cascade-dot {
    @apply inline-block w-2 h-2 rounded-full align-middle mr-1;
  }

  /* Quote wizard stepper (quote_form/_form.html.erb Cascade branch) —
     mirrors ff-stepper's active/done state logic. */
  .cascade .cascade-stepper {
    @apply flex flex-wrap border border-cascade-divider rounded-lg bg-cascade-surface overflow-hidden mb-8;
  }
  .cascade .cascade-stepper-item {
    @apply flex-1 min-w-[120px] flex items-center gap-2 px-3 py-3 border-l border-cascade-divider text-cascade-muted text-sm;
  }
  .cascade .cascade-stepper-item:first-child {
    @apply border-l-0;
  }
  .cascade .cascade-stepper-item.is-active {
    @apply bg-cascade-primary border-cascade-primary text-white;
  }
  .cascade .cascade-stepper-item.is-done {
    @apply bg-cascade-canvas text-cascade-ink;
  }
  .cascade .cascade-stepper-num {
    @apply font-display font-bold text-[10px] tracking-[.06em] opacity-60;
  }
  .cascade .cascade-stepper-label {
    @apply font-display font-bold text-xs whitespace-nowrap overflow-hidden text-ellipsis;
  }
  .cascade .cascade-stepper-check {
    @apply text-cascade-success text-xs;
  }

  /* Compact stand-in for cascade-stepper below md — flex-wrap there packs
     items 2-per-row on narrow screens, and uneven item heights (long vs.
     short labels) throw the rows out of alignment. Mobile gets a progress
     bar + "Step X of Y" instead. */
  .cascade .cascade-stepper-mobile {
    @apply border border-cascade-divider rounded-lg bg-cascade-surface px-4 py-3;
  }
  .cascade .cascade-stepper-mobile-bar {
    @apply h-1.5 rounded-full bg-cascade-divider mb-3;
  }
  .cascade .cascade-stepper-mobile-fill {
    @apply h-full rounded-full bg-cascade-primary;
  }
  .cascade .cascade-stepper-mobile-label {
    @apply font-display font-bold text-xs text-cascade-ink;
  }
  .cascade .cascade-stepper-mobile-count {
    @apply text-cascade-muted mr-1;
  }

  /* Modal — native <dialog>, no JS plugin needed (see modal_class helper). */
  .cascade .cascade-modal {
    @apply bg-cascade-surface border border-cascade-divider rounded-lg p-6 max-w-lg w-full m-auto;
  }
  .cascade .cascade-modal::backdrop {
    @apply bg-black/50;
  }
  .cascade .cascade-modal .cascade-modal-header {
    @apply font-display font-bold text-cascade-ink text-lg mb-3;
  }
  .cascade .cascade-modal .cascade-modal-content {
    @apply text-cascade-body mb-4;
  }
  .cascade .cascade-modal .cascade-modal-actions {
    @apply flex justify-end gap-3 mt-4;
  }
}

/*
 * Cascade typography and form-field base styles — mirrors the FullFibre
 * layer above: headings, paragraphs, links, `.field`/`.fields` wrappers and
 * their inputs, shared across every page using native markup.
 */
@layer components {
  .cascade h1,
  .cascade .cascade-h1 {
    @apply font-bold text-cascade-ink tracking-[-.02em] text-2xl mb-2;
  }
  .cascade h2 {
    @apply font-bold text-cascade-ink tracking-[-.01em] text-xl mb-2;
  }
  .cascade h3 {
    @apply font-bold text-cascade-ink text-lg mb-2;
  }
  .cascade h4 {
    @apply font-bold text-cascade-ink text-base mb-2;
  }
  .cascade p {
    @apply mb-3 leading-relaxed;
  }
  .cascade a {
    @apply text-cascade-accent;
  }

  /* Form fields */
  .cascade .field {
    @apply mb-4 max-w-[520px];
  }
  .cascade .fields {
    @apply flex flex-wrap gap-4 items-end mb-4;
  }
  .cascade .fields .field {
    @apply mb-0 flex-1 min-w-[160px] max-w-[520px];
  }
  .cascade .fields.inline {
    @apply items-center;
  }
  .cascade .fields .field:has(input[type="checkbox"]) {
    @apply flex-none min-w-0;
  }
  .cascade .field > label,
  .cascade .fields > label {
    @apply block font-display font-bold text-xs text-cascade-ink mb-[6px];
  }
  .cascade .field input[type="text"],
  .cascade .field input[type="email"],
  .cascade .field input[type="password"],
  .cascade .field input[type="number"],
  .cascade .field input[type="tel"],
  .cascade .field select,
  .cascade .field textarea,
  .cascade .fields input[type="text"],
  .cascade .fields input[type="email"],
  .cascade .fields select {
    @apply w-full border border-cascade-divider rounded-md bg-cascade-surface px-[13px] py-[10px] text-[14px] text-cascade-ink focus:outline-none focus:ring-2 focus:ring-cascade-accent-bright;
  }
  .cascade .field input[type="checkbox"],
  .cascade .field input[type="radio"],
  .cascade .fields input[type="checkbox"],
  .cascade .fields input[type="radio"] {
    accent-color: theme('colors.cascade.primary');
    @apply w-[17px] h-[17px] align-middle mr-2;
  }
  .cascade .field input[type="checkbox"] + label,
  .cascade .field input[type="radio"] + label,
  .cascade .fields input[type="checkbox"] + label,
  .cascade .fields input[type="radio"] + label {
    display: inline;
    @apply font-normal text-cascade-body;
  }

  /* Field validation errors — same shape as the FullFibre equivalent. */
  .cascade .field .field.error {
    @apply mb-0 max-w-none;
  }
  .cascade .field.error input[type="text"],
  .cascade .field.error input[type="email"],
  .cascade .field.error input[type="password"],
  .cascade .field.error input[type="number"],
  .cascade .field.error input[type="tel"],
  .cascade .field.error select,
  .cascade .field.error textarea {
    @apply border-cascade-danger ring-1 ring-cascade-danger;
  }
  .cascade .field:has(> .field.error) > label,
  .cascade .field.error > label,
  .cascade .field.error input[type="checkbox"] + label,
  .cascade .field.error input[type="radio"] + label {
    @apply text-cascade-danger;
  }

  /* Pagination (app/helpers/search_pagination.rb ThemedLinkRenderer) */
  .cascade .cascade-pagination {
    @apply inline-flex border border-cascade-divider rounded-md overflow-hidden text-sm;
  }
  .cascade .cascade-pagination-item {
    @apply px-3 py-2 border-l border-cascade-divider text-cascade-ink no-underline first:border-l-0;
  }
  .cascade .cascade-pagination-item.is-active {
    @apply bg-cascade-primary text-white;
  }
  .cascade .cascade-pagination-item.is-disabled {
    @apply text-cascade-muted pointer-events-none;
  }

  .cascade .cascade-segment {
    @apply bg-cascade-surface border border-cascade-divider rounded-lg p-6 mb-4;
  }
  .cascade .cascade-segment-secondary {
    @apply bg-cascade-canvas border-cascade-divider;
  }
  .cascade .cascade-segment-inverted {
    @apply bg-cascade-primary border-cascade-primary text-white;
  }
  .cascade .cascade-alert {
    @apply border border-cascade-divider bg-cascade-surface rounded-md px-4 py-3 mb-4;
  }
  .cascade .cascade-alert-danger {
    @apply border-cascade-danger bg-cascade-danger-bg text-cascade-danger;
  }
  .cascade .cascade-alert-success {
    @apply border-cascade-success bg-cascade-success-bg text-cascade-success;
  }
  .cascade .cascade-loader {
    @apply inline-flex items-center gap-2 text-cascade-muted text-sm italic;
  }
  .cascade .cascade-loader.is-centered {
    @apply flex justify-center;
  }
  .cascade .cascade-loader::before {
    content: '';
    @apply block w-4 h-4 shrink-0 rounded-full border-2 border-cascade-divider border-t-cascade-primary animate-spin;
  }
  .cascade .cascade-table {
    @apply w-full border border-cascade-divider rounded-lg border-collapse mb-4 overflow-hidden;
  }
  .cascade .cascade-table th,
  .cascade .cascade-table td {
    @apply border-b border-cascade-divider px-3 py-3 text-left text-sm;
  }
  .cascade .cascade-table thead th {
    @apply bg-cascade-canvas text-cascade-muted font-display font-bold text-[11px] uppercase tracking-[.05em] border-b border-cascade-divider;
  }
  .cascade .cascade-table tfoot th {
    @apply bg-cascade-canvas text-cascade-ink font-display font-bold text-sm;
  }
  .cascade .cascade-table.is-striped tbody tr:nth-child(even) {
    @apply bg-cascade-canvas;
  }
  .cascade .cascade-table.is-celled td,
  .cascade .cascade-table.is-celled th {
    @apply border-l border-cascade-divider;
  }
  .cascade .cascade-table.is-celled td:first-child,
  .cascade .cascade-table.is-celled th:first-child {
    @apply border-l-0;
  }
  .cascade .cascade-table.is-definition tbody tr td:first-child {
    @apply bg-cascade-canvas font-display font-bold text-cascade-ink;
  }
  .cascade .cascade-divider {
    @apply border-t border-cascade-divider my-4;
  }
  .cascade .cascade-divider.is-hidden {
    @apply border-t-0 my-6;
  }
  .cascade .cascade-container {
    @apply max-w-[1240px] mx-auto px-6;
  }
  .cascade .cascade-list .cascade-list-item {
    @apply block mb-1;
  }
  .cascade .cascade-card .cascade-card-header {
    @apply font-display font-bold text-cascade-ink text-base mb-1;
  }
  .cascade .cascade-card .cascade-card-description {
    @apply text-cascade-body text-sm;
  }
  .cascade .cascade-stat-value {
    @apply font-display text-3xl font-bold text-cascade-ink;
  }
  .cascade .cascade-stat-label {
    @apply font-display text-xs uppercase tracking-[.05em] text-cascade-muted font-bold;
  }
}

/*
 * Admin theme — same visual language as Cascade (rounded corners, soft
 * borders/shadows, Inter throughout) but its own palette (see admin.* in
 * tailwind.config.js), scoped under the `.admin` body class (see
 * app/views/layouts/application_admin(_fullwidth).html.erb) so it can never
 * leak into Cascade or FullFibre pages.
 *
 * Like Cascade/FullFibre, Admin views use these classes directly on native
 * HTML (real <select>/<input type="checkbox">, <dialog> for modals) rather
 * than any Semantic UI markup or class names.
 */
@layer components {
  .admin {
    @apply m-0 bg-admin-canvas text-admin-body font-sans text-[14px];
  }

  .admin h1,
  .admin .admin-h1 {
    @apply font-bold text-admin-ink tracking-[-.02em] text-2xl mb-4;
  }
  .admin h2 {
    @apply font-bold text-admin-ink tracking-[-.01em] text-xl mb-3;
  }
  .admin h3 {
    @apply font-bold text-admin-ink text-lg mb-2;
  }
  .admin h4 {
    @apply font-bold text-admin-ink text-base mb-2;
  }
  .admin p {
    @apply mb-3 leading-relaxed;
  }
  .admin a {
    @apply text-admin-accent;
  }

  .admin .admin-eyebrow {
    @apply inline-block font-display font-bold uppercase tracking-[.06em] text-[11px] text-admin-muted;
  }

  /* Buttons */
  .admin .admin-btn-primary,
  .admin .admin-btn-secondary,
  .admin .admin-btn-danger {
    @apply inline-flex items-center justify-center text-center font-display font-bold text-sm border rounded-md px-5 py-3 no-underline cursor-pointer gap-2;
  }
  .admin .admin-btn-primary:disabled,
  .admin .admin-btn-secondary:disabled,
  .admin .admin-btn-danger:disabled {
    @apply cursor-not-allowed opacity-60;
  }
  .admin .admin-btn-primary {
    @apply bg-admin-primary border-admin-primary text-white;
  }
  .admin .admin-btn-secondary {
    @apply bg-white border-admin-divider text-admin-ink;
  }
  .admin .admin-btn-danger {
    @apply bg-admin-danger border-admin-danger text-white;
  }

  /* Small icon-only action buttons — table row actions (edit/view/destroy). */
  .admin .admin-icon-btn {
    @apply inline-flex items-center justify-center w-8 h-8 rounded-md border border-admin-divider text-admin-body no-underline cursor-pointer;
  }
  .admin .admin-icon-btn.is-danger {
    @apply border-admin-danger/30 text-admin-danger;
  }

  /* Panels */
  .admin .admin-card,
  .admin .admin-segment {
    @apply bg-admin-surface border border-admin-divider rounded-lg p-6 mb-4;
  }
  .admin .admin-segment-secondary {
    @apply bg-admin-canvas border-admin-divider;
  }

  /* Status pills / badges */
  .admin .admin-pill {
    @apply inline-block font-display font-bold uppercase tracking-[.04em] text-[11px] rounded px-2 py-1;
  }
  .admin .admin-pill-danger {
    @apply bg-admin-danger-bg text-admin-danger;
  }
  .admin .admin-pill-warning {
    @apply bg-admin-warning-bg text-admin-warning;
  }
  .admin .admin-pill-success {
    @apply bg-admin-success-bg text-admin-success;
  }
  .admin .admin-pill-neutral {
    @apply bg-admin-canvas text-admin-body;
  }

  .admin .admin-dot {
    @apply inline-block w-2 h-2 rounded-full align-middle mr-1;
  }

  /* Callouts — coloured left-edge accent for inline notices. */
  .admin .admin-callout {
    @apply bg-admin-surface border-l-4 pl-4 py-3;
  }
  .admin .admin-callout-danger {
    @apply border-admin-danger;
  }
  .admin .admin-callout-warning {
    @apply border-admin-warning;
  }
  .admin .admin-callout-info {
    @apply border-admin-accent-bright;
  }

  /* Forms — `.field`/`.fields`/`.field.error` are the same portal-agnostic
     wrapper classes Cascade/FullFibre already use (see their equivalent
     blocks above): plain descriptive names, not Semantic-branded, and
     required to stay unprefixed because config/application.rb's global
     field_error_proc emits bare `.field.error` around any invalid form
     control with no way to know which portal it's rendering for. Styling
     the actual controls by attribute selector rather than requiring an
     explicit class on every f.text_field/f.select call is the same
     robustness trade-off Cascade/FullFibre already made — with ~300 admin
     view files to convert, a missed class is a much easier mistake than a
     missed wrapper div. */
  .admin .admin-form {
    @apply max-w-[640px];
  }
  .admin .field {
    @apply block mb-4 max-w-[520px];
  }
  .admin .fields {
    @apply flex flex-wrap gap-4 items-start mb-4;
  }
  .admin .fields .field {
    @apply mb-0 flex-1 min-w-[160px] max-w-[520px];
  }
  .admin .fields.inline {
    @apply items-center;
  }
  .admin .field > label,
  .admin .fields > label {
    @apply block font-display font-bold text-xs text-admin-ink mb-[6px];
  }
  .admin .field input[type="text"],
  .admin .field input[type="email"],
  .admin .field input[type="password"],
  .admin .field input[type="number"],
  .admin .field input[type="tel"],
  .admin .field input[type="date"],
  .admin .field select,
  .admin .field textarea,
  .admin .fields input[type="text"],
  .admin .fields input[type="email"],
  .admin .fields input[type="date"],
  .admin .fields select,
  .admin .admin-input,
  .admin .admin-select,
  .admin .admin-textarea {
    @apply w-full border border-admin-divider rounded-md bg-admin-surface px-[13px] py-[10px] text-[14px] text-admin-ink focus:outline-none focus:ring-2 focus:ring-admin-accent-bright;
  }

  /* Plain native checkboxes/radios, tinted via accent-color rather than a
     custom appearance-none box — same technique Cascade/FullFibre use. A
     checkbox/radio's own label is disambiguated from the field's top label
     by DOM position (immediately follows the input) rather than an extra
     class, since both are otherwise plain <label> elements inside `.field`. */
  .admin .field input[type="checkbox"],
  .admin .field input[type="radio"],
  .admin .fields input[type="checkbox"],
  .admin .fields input[type="radio"],
  .admin .admin-checkbox,
  .admin .admin-radio {
    accent-color: theme('colors.admin.primary');
    @apply w-[17px] h-[17px] align-middle mr-2;
  }
  .admin .field input[type="checkbox"] + label,
  .admin .field input[type="radio"] + label,
  .admin .fields input[type="checkbox"] + label,
  .admin .fields input[type="radio"] + label,
  .admin .admin-checkbox-label,
  .admin .admin-radio-label {
    display: inline;
    @apply font-sans font-normal normal-case text-admin-body align-middle cursor-pointer mb-0;
  }

  /* Field validation errors — config/application.rb's field_error_proc
     wraps invalid inputs in a nested div.field.error. */
  .admin .field .field.error {
    @apply mb-0 max-w-none;
  }
  .admin .field.error input[type="text"],
  .admin .field.error input[type="email"],
  .admin .field.error input[type="password"],
  .admin .field.error input[type="number"],
  .admin .field.error input[type="tel"],
  .admin .field.error select,
  .admin .field.error textarea {
    @apply border-admin-danger ring-1 ring-admin-danger;
  }
  .admin .field:has(> .field.error) > label,
  .admin .field.error > label {
    @apply text-admin-danger;
  }
  .admin .admin-error-text {
    @apply block text-xs text-admin-danger mt-1;
  }

  /* Messages / notices */
  .admin .admin-alert {
    @apply border border-admin-divider bg-admin-surface rounded-md px-4 py-3 mb-4;
  }
  .admin .admin-alert-danger {
    @apply border-admin-danger bg-admin-danger-bg text-admin-danger;
  }
  .admin .admin-alert-warning {
    @apply border-admin-warning bg-admin-warning-bg text-admin-warning;
  }
  .admin .admin-alert-success {
    @apply border-admin-success bg-admin-success-bg text-admin-success;
  }

  /* Loader */
  .admin .admin-loader {
    @apply inline-flex items-center gap-2 text-admin-muted text-sm italic;
  }
  .admin .admin-loader.is-centered {
    @apply flex justify-center;
  }
  .admin .admin-loader::before {
    content: '';
    @apply block w-4 h-4 shrink-0 rounded-full border-2 border-admin-divider border-t-admin-primary animate-spin;
  }

  /* Tables */
  .admin .admin-table {
    @apply w-full border border-admin-divider rounded-lg border-collapse mb-4 overflow-hidden;
  }
  .admin .admin-table th,
  .admin .admin-table td {
    @apply border-b border-admin-divider px-3 py-3 text-left text-sm;
  }
  .admin .admin-table thead th {
    @apply bg-admin-canvas text-admin-muted font-display font-bold text-[11px] uppercase tracking-[.05em] border-b border-admin-divider;
  }
  .admin .admin-table tfoot th {
    @apply bg-admin-canvas text-admin-ink font-display font-bold text-sm;
  }
  .admin .admin-table.is-striped tbody tr:nth-child(even) {
    @apply bg-admin-canvas;
  }
  .admin .admin-table.is-celled td,
  .admin .admin-table.is-celled th {
    @apply border-l border-admin-divider;
  }
  .admin .admin-table.is-celled td:first-child,
  .admin .admin-table.is-celled th:first-child {
    @apply border-l-0;
  }
  .admin .admin-table.is-definition tbody tr td:first-child {
    @apply bg-admin-canvas font-display font-bold text-admin-ink;
  }

  /* Dividers, containers, lists */
  .admin .admin-divider {
    @apply border-t border-admin-divider my-4;
  }
  .admin .admin-container {
    @apply max-w-[1240px] mx-auto px-6;
  }
  .admin .admin-container-fluid {
    @apply px-4;
  }
  .admin .admin-list .admin-list-item {
    @apply block mb-1;
  }

  /* Stat/metric display (dashboard cards etc.) */
  .admin .admin-stat-value {
    @apply font-display text-3xl font-bold text-admin-ink;
  }
  .admin .admin-stat-label {
    @apply font-display text-xs uppercase tracking-[.05em] text-admin-muted font-bold;
  }

  /* Modal — native <dialog>, no JS plugin needed: the browser handles
     show/hide, focus trapping and the top-layer stacking itself via
     dialog.showModal()/close(). */
  .admin .admin-modal {
    @apply bg-admin-surface border border-admin-divider rounded-lg p-6 max-w-lg w-full m-auto;
  }
  .admin .admin-modal.is-wide {
    @apply max-w-3xl;
  }
  .admin .admin-modal::backdrop {
    @apply bg-black/50;
  }
  .admin .admin-modal .admin-modal-header {
    @apply font-display font-bold text-admin-ink text-lg mb-3;
  }
  .admin .admin-modal .admin-modal-content {
    @apply text-admin-body mb-4 max-h-[70vh] overflow-y-auto;
  }
  .admin .admin-modal .admin-modal-actions {
    @apply flex justify-end gap-3 mt-4;
  }

  /* Pagination (app/helpers/search_pagination.rb ThemedLinkRenderer) */
  .admin .admin-pagination {
    @apply inline-flex border border-admin-divider rounded-md overflow-hidden text-sm;
  }
  .admin .admin-pagination .admin-pagination-item {
    @apply px-3 py-2 border-l border-admin-divider text-admin-ink no-underline first:border-l-0;
  }
  .admin .admin-pagination .admin-pagination-item.is-active {
    @apply bg-admin-primary text-white;
  }
  .admin .admin-pagination .admin-pagination-item.is-disabled {
    @apply text-admin-muted pointer-events-none;
  }

  /* Ticket status filter buttons (admin/tickets/index.html.erb) — base style
     plus the 5 colour classes tickets.js toggles on click (yellow=Open,
     olive=Active, red=Escalate, blue=Pending, grey1=Closed/Closure); "disabled"
     marks the currently-selected filter, not an actually-disabled control. */
  .admin .status_button {
    @apply inline-flex items-center font-display font-bold text-xs uppercase tracking-[.04em] rounded px-3 py-2 border border-admin-divider bg-admin-surface text-admin-body cursor-pointer no-underline;
  }
  .admin .status_button.disabled {
    @apply ring-2 ring-offset-1 ring-admin-ink;
  }
  .admin .status_button.yellow {
    @apply bg-admin-warning-bg text-admin-warning border-admin-warning;
  }
  .admin .status_button.olive {
    @apply bg-admin-success-bg text-admin-success border-admin-success;
  }
  .admin .status_button.red {
    @apply bg-admin-danger-bg text-admin-danger border-admin-danger;
  }
  .admin .status_button.blue {
    @apply bg-admin-accent-bright/10 text-admin-accent border-admin-accent-bright;
  }
  .admin .status_button.grey1 {
    @apply bg-admin-canvas text-admin-muted border-admin-divider;
  }
}
/*

 */

/*
 * Self-hosted Archivo (variable font, latin subset only) — used as the
 * display/heading font for the FullFibre theme. One file covers the whole
 * 100-900 weight range, matching how Google Fonts itself serves it.
 */
@font-face {
  font-family: 'Archivo';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url(/assets/archivo-var-4e41fe14848225eed128d13b5fdf676531b39510573e663a0378e002c4e05047.woff2) format('woff2');
}
/* line 5, app/assets/stylesheets/invoices.scss */
.invoice_summary_line {
  background: #f9fafb;
}
/*

 */

/*
 * Self-hosted JetBrains Mono (variable font, latin subset only) — used for
 * technical/tabular data in the Cascade theme (reference codes, dates,
 * timestamps, metric numbers), matching local/cascade-dashboard.png. One
 * file covers the whole 100-800 weight range, matching how Google Fonts
 * itself serves it.
 */
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  src: url(/assets/jetbrains-mono-var-80880a2005eaf62ffc0bbf8dff021a2d83cd047acb34c6d2e4fe80272b18f23f.woff2) format('woff2');
}
/* line 6, app/assets/stylesheets/order_form.scss */
input.table_quantity[type="number"] {
  width: 80px;
}

/* line 11, app/assets/stylesheets/order_form.scss */
a.modal_info_link {
  float: right;
}

/* line 15, app/assets/stylesheets/order_form.scss */
#product_results_final {
  display: none;
}

/* line 19, app/assets/stylesheets/order_form.scss */
#quote_sim_number_message {
  padding: 10px;
}

/* line 25, app/assets/stylesheets/order_form.scss */
body.fullfibre .quote_product_item {
  background: #fff;
  color: #000;
  padding-bottom: 10px;
}

/* line 32, app/assets/stylesheets/order_form.scss */
body.fullfibre .quote_product_item .field > label {
  color: #2666ab !important;
  font-weight: normal;
  font-size: 120%;
  line-height: 140%;
}

/* line 39, app/assets/stylesheets/order_form.scss */
body.fullfibre .quote_product_item .ff-segment {
  border-top: 0;
}

/* line 43, app/assets/stylesheets/order_form.scss */
body.fullfibre .quote_product_item .fullfibre_quote_product_item_details {
  padding: 10px 0;
  min-height: 100px;
  text-align: center;
  line-height: 160%;
}

/* line 50, app/assets/stylesheets/order_form.scss */
body.fullfibre .quote_product_item .fullfibre_quote_product_item_months {
  font-weight: bold;
  font-size: 120%;
}

/* line 57, app/assets/stylesheets/order_form.scss */
body.fullfibre .quote_product_item .segment {
  background: transparent;
}

/* line 65, app/assets/stylesheets/order_form.scss */
#paypal-button-container {
  display: inline-block;
  width: 500px;
}
/* line 5, app/assets/stylesheets/orders.scss */
.snmp_graphs p {
  text-align: center;
}

/* line 10, app/assets/stylesheets/orders.scss */
.renewal_date_range select {
  width: auto;
}

/* line 15, app/assets/stylesheets/orders.scss */
#order_users_full_edit {
  display: none;
}
/* line 5, app/assets/stylesheets/products.scss */
#product_price_bands_table td {
  text-align: center;
}

/* line 8, app/assets/stylesheets/products.scss */
#product_price_bands_table td div {
  display: inline-block;
}

/* line 12, app/assets/stylesheets/products.scss */
#product_price_bands_table td .margin {
  float: left;
}

/* line 16, app/assets/stylesheets/products.scss */
#product_price_bands_table td .sell_price {
  float: right;
}

/* line 21, app/assets/stylesheets/products.scss */
#products_index_search_form {
  white-space: nowrap;
}
/* line 6, app/assets/stylesheets/quotes.scss */
.options_products_table th:nth-child(1) {
  width: 100px;
}

/* line 10, app/assets/stylesheets/quotes.scss */
.options_products_table th:nth-child(3) {
  width: 180px;
}

/* line 14, app/assets/stylesheets/quotes.scss */
.options_products_table th:nth-child(4) {
  width: 180px;
}

/* line 18, app/assets/stylesheets/quotes.scss */
.options_products_table th:nth-child(5) {
  width: 180px;
}
/* line 7, app/assets/stylesheets/services.scss */
.old_portal_radius_stats td, .old_portal_radius_stats th {
  padding: 4px 8px;
  text-align: left;
}

/* line 11, app/assets/stylesheets/services.scss */
.old_portal_radius_stats caption {
  padding: 25px 8px 15px;
  font-size: 130%;
  text-align: left;
}

/* line 18, app/assets/stylesheets/services.scss */
.service_show_ceased_field {
  margin-left: 60px;
}

/* line 21, app/assets/stylesheets/services.scss */
.service_show_ceased_field label {
  font-weight: bold;
  font-size: 13px;
}

/* line 27, app/assets/stylesheets/services.scss */
#service_usage_email_addresses_full_edit {
  display: none;
}

/* line 31, app/assets/stylesheets/services.scss */
.move_range_button {
  background-color: #27a4c8;
  border-radius: 1em;
  color: #FFFFFF;
  width: 2em;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

/* line 41, app/assets/stylesheets/services.scss */
.move_range_button:hover {
  background-color: #0D91B7;
  color: #FFFFFF;
}
/* line 5, app/assets/stylesheets/tickets.scss */
#ticket_users_full_edit {
  display: none;
}

/* line 9, app/assets/stylesheets/tickets.scss */
#ticket_index_search_form {
  white-space: nowrap;
}

/* line 14, app/assets/stylesheets/tickets.scss */
.ticket_status_buttons .status_button {
  text-align: right;
}

/* line 19, app/assets/stylesheets/tickets.scss */
#ticket_timer_preview {
  height: max-content;
}

/* line 24, app/assets/stylesheets/tickets.scss */
#feedback #feedback_icons {
  font-size: 5em;
  width: 100%;
  justify-content: center;
  display: flex;
  line-height: normal;
  margin-bottom: 2rem;
}

/* line 33, app/assets/stylesheets/tickets.scss */
#feedback .frown {
  color: orangered;
}

/* line 37, app/assets/stylesheets/tickets.scss */
#feedback .meh {
  color: orange;
}

/* line 41, app/assets/stylesheets/tickets.scss */
#feedback .smile {
  color: limegreen;
}

/* line 45, app/assets/stylesheets/tickets.scss */
#feedback .actions {
  justify-content: center;
  display: flex;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
/* line 17, app/assets/stylesheets/application.css.scss */
body {
  overflow-x: visible;
}

/* line 21, app/assets/stylesheets/application.css.scss */
body.cascade {
  background-color: #f0f5f7;
}

/* line 26, app/assets/stylesheets/application.css.scss */
.main.container {
  margin-top: 2em;
  margin-bottom: 2em;
}

/* line 31, app/assets/stylesheets/application.css.scss */
.rails_env_message {
  z-index: 999;
  position: fixed;
  right: 0;
  top: 0;
  background: red;
  padding: 0px 6px;
  color: #fff;
  border-radius: 0 0 0 4px;
  opacity: 0.5;
}

/* line 43, app/assets/stylesheets/application.css.scss */
.form_field_details {
  color: #aaa;
}