/*
 * Dueflag theme for Bootstrap 5.3. Loaded after bootstrap.min.css on both sites.
 * The same file is in site/public/assets/css and app/public/assets/css: keep them identical.
 * Site-only styles go in site.css, portal-only styles in portal.css.
 */

/* Instrument Sans (SIL Open Font Licence), variable weight 400 to 700, Latin subset. */
@font-face { font-family: "Instrument Sans"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("../fonts/InstrumentSans.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400 700; font-style: italic; font-display: swap; src: url("../fonts/InstrumentSans-Italic.woff2") format("woff2"); }

:root {
  /* Brand tokens */
  --df-navy: #20243F;
  --df-navy-rgb: 32, 36, 63;
  --df-teal: #00B097;
  --df-teal-rgb: 0, 176, 151;
  --df-teal-dark: #007D6B;
  --df-teal-light: #7FE3CF;
  --df-teal-tint: #E6F7F5;
  --df-canvas: #F5F4F1;
  --df-ink: #252534;
  --df-muted: #5F6472;
  --df-warning: #D98A00;
  --df-warning-bg: #FFF6E5;
  --df-warning-text: #8A5300;
  --df-error: #D9372B;
  --df-error-bg: #FDECEC;
  --df-error-text: #A3271C;
  --df-paper: #E9E8E2;
  --df-paper-ink: #1A1A1A;
  --df-shadow: 0 1px 2px rgba(32, 36, 63, .06), 0 4px 16px rgba(32, 36, 63, .07);
  --df-shadow-lg: 0 2px 4px rgba(32, 36, 63, .06), 0 12px 32px rgba(32, 36, 63, .10);
  --df-radius-card: 1rem;

  /* Bootstrap overrides */
  --bs-body-font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-bg: var(--df-canvas);
  --bs-body-bg-rgb: 245, 244, 241;
  --bs-body-color: var(--df-ink);
  --bs-body-color-rgb: 37, 37, 52;
  --bs-emphasis-color: var(--df-navy);
  --bs-heading-color: var(--df-navy);
  --bs-secondary-color: var(--df-muted);
  --bs-primary: var(--df-teal);
  --bs-primary-rgb: var(--df-teal-rgb);
  --bs-primary-text-emphasis: var(--df-teal-dark);
  --bs-primary-bg-subtle: var(--df-teal-tint);
  --bs-primary-border-subtle: #9ED9CF;
  --bs-success: var(--df-teal-dark);
  --bs-success-rgb: 0, 125, 107;
  --bs-success-text-emphasis: var(--df-teal-dark);
  --bs-success-bg-subtle: var(--df-teal-tint);
  --bs-success-border-subtle: #9ED9CF;
  --bs-warning: var(--df-warning);
  --bs-warning-rgb: 217, 138, 0;
  --bs-warning-text-emphasis: var(--df-warning-text);
  --bs-warning-bg-subtle: var(--df-warning-bg);
  --bs-warning-border-subtle: #F2D49B;
  --bs-danger: var(--df-error);
  --bs-danger-rgb: 217, 55, 43;
  --bs-danger-text-emphasis: var(--df-error-text);
  --bs-danger-bg-subtle: var(--df-error-bg);
  --bs-danger-border-subtle: #F3B7B2;
  --bs-info-text-emphasis: var(--df-navy);
  --bs-info-bg-subtle: var(--df-teal-tint);
  --bs-info-border-subtle: #9ED9CF;
  --bs-dark: var(--df-navy);
  --bs-dark-rgb: var(--df-navy-rgb);
  /* Links use teal dark so they pass WCAG AA contrast on white and canvas. */
  --bs-link-color: var(--df-teal-dark);
  --bs-link-color-rgb: 0, 125, 107;
  --bs-link-hover-color: #005A4D;
  --bs-link-hover-color-rgb: 0, 90, 77;
  --bs-border-color: #E3E1DB;
  --bs-border-radius: .75rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: 1rem;
  --bs-focus-ring-color: rgba(0, 176, 151, .35);
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
  letter-spacing: -.01em;
}

.text-muted, .text-body-secondary { color: var(--df-muted) !important; }
.text-navy { color: var(--df-navy) !important; }
.text-teal { color: var(--df-teal-dark) !important; }
.bg-navy { background-color: var(--df-navy) !important; color: #fff; }
.bg-canvas { background-color: var(--df-canvas) !important; }
.bg-teal-tint { background-color: var(--df-teal-tint) !important; }
.fw-semibold { font-weight: 600 !important; }

/* Visible keyboard focus everywhere (WCAG 2.2: focus visible). */
:focus-visible {
  outline: 3px solid var(--df-teal);
  outline-offset: 2px;
}
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible {
  outline: 3px solid var(--df-teal);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 2000;
  padding: .5rem 1rem;
  background: var(--df-navy);
  color: #fff;
  border-radius: .5rem;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* Buttons: Bootstrap compiles colours into each variant, so set the component variables. */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1.1rem;
  --bs-btn-padding-y: .55rem;
  --bs-btn-border-radius: .75rem;
}
.btn-sm { --bs-btn-padding-x: .75rem; --bs-btn-padding-y: .3rem; --bs-btn-border-radius: .5rem; }
.btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: .75rem; --bs-btn-border-radius: .9rem; }

/* Teal with navy text would fail contrast; white on #00B097 is fine for large/bold text,
   and buttons use the darker teal on hover. Text is bold, so this meets AA for UI components. */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #00866F;
  --bs-btn-border-color: #00866F;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #007D6B;
  --bs-btn-hover-border-color: #007D6B;
  --bs-btn-focus-shadow-rgb: 0, 176, 151;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #006E5E;
  --bs-btn-active-border-color: #006E5E;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #66C9BA;
  --bs-btn-disabled-border-color: #66C9BA;
}
.btn-outline-primary {
  --bs-btn-color: var(--df-teal-dark);
  --bs-btn-border-color: var(--df-teal);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--df-teal-dark);
  --bs-btn-hover-border-color: var(--df-teal-dark);
  --bs-btn-focus-shadow-rgb: 0, 176, 151;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #006E5E;
  --bs-btn-active-border-color: #006E5E;
  --bs-btn-disabled-color: var(--df-teal-dark);
  --bs-btn-disabled-border-color: var(--df-teal);
}
.btn-dark, .btn-navy {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--df-navy);
  --bs-btn-border-color: var(--df-navy);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2C3157;
  --bs-btn-hover-border-color: #2C3157;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #171A2F;
  --bs-btn-active-border-color: #171A2F;
}
.btn-outline-secondary {
  --bs-btn-color: var(--df-navy);
  --bs-btn-border-color: #CFCCC4;
  --bs-btn-hover-color: var(--df-navy);
  --bs-btn-hover-bg: #EDEBE6;
  --bs-btn-hover-border-color: #BDB9AF;
  --bs-btn-active-color: var(--df-navy);
  --bs-btn-active-bg: #E3E0D9;
  --bs-btn-active-border-color: #BDB9AF;
}
.btn-danger {
  --bs-btn-bg: #C4302A;
  --bs-btn-border-color: #C4302A;
  --bs-btn-hover-bg: var(--df-error-text);
  --bs-btn-hover-border-color: var(--df-error-text);
  --bs-btn-active-bg: #8A2018;
  --bs-btn-active-border-color: #8A2018;
}
.btn-outline-danger {
  --bs-btn-color: var(--df-error-text);
  --bs-btn-border-color: var(--df-error);
  --bs-btn-hover-bg: #C4302A;
  --bs-btn-hover-border-color: #C4302A;
  --bs-btn-active-bg: #8A2018;
}
.btn-link {
  --bs-btn-color: var(--df-teal-dark);
  --bs-btn-hover-color: #005A4D;
  --bs-btn-font-weight: 600;
}

/* Cards: white, soft shadow, generous radius. */
.card {
  --bs-card-border-color: transparent;
  --bs-card-border-radius: var(--df-radius-card);
  --bs-card-inner-border-radius: calc(var(--df-radius-card) - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-spacer-y: 1.25rem;
  --bs-card-spacer-x: 1.25rem;
  box-shadow: var(--df-shadow);
}
.card-header { border-bottom: 1px solid var(--bs-border-color); font-weight: 600; color: var(--df-navy); }

/* Forms */
.form-control, .form-select {
  border-color: #D6D3CB;
  padding: .6rem .85rem;
}
/* Keep room for the dropdown arrow, which the padding above would otherwise cover text with. */
.form-select { padding-right: 2.5rem; background-position: right .85rem center; }
.form-select-sm { padding-right: 2.1rem; background-position: right .6rem center; }
.form-control:focus, .form-select:focus {
  border-color: var(--df-teal);
  box-shadow: 0 0 0 .25rem rgba(0, 176, 151, .2);
}
.form-label { font-weight: 600; color: var(--df-navy); margin-bottom: .35rem; }
.form-text { color: var(--df-muted); }
.form-check-input:checked { background-color: var(--df-teal-dark); border-color: var(--df-teal-dark); }
.form-check-input:focus { border-color: var(--df-teal); box-shadow: 0 0 0 .25rem rgba(0, 176, 151, .2); }
.invalid-feedback { color: var(--df-error-text); font-weight: 500; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--df-error); }

/* Alerts */
.alert { border-radius: .75rem; border-width: 1px; }
.alert-success { --bs-alert-color: var(--df-teal-dark); --bs-alert-bg: var(--df-teal-tint); --bs-alert-border-color: #9ED9CF; }
.alert-info { --bs-alert-color: var(--df-navy); --bs-alert-bg: var(--df-teal-tint); --bs-alert-border-color: #9ED9CF; }
.alert-warning { --bs-alert-color: var(--df-warning-text); --bs-alert-bg: var(--df-warning-bg); --bs-alert-border-color: #F2D49B; }
.alert-danger { --bs-alert-color: var(--df-error-text); --bs-alert-bg: var(--df-error-bg); --bs-alert-border-color: #F3B7B2; }

/* Status badges: In service, Due soon, Overdue, Set-up failed. Text colours meet AA on their backgrounds. */
.badge { font-weight: 600; padding: .4em .7em; border-radius: 999px; letter-spacing: .01em; }
.badge-status-ok, .text-bg-success { background-color: var(--df-teal-tint) !important; color: var(--df-teal-dark) !important; }
.badge-status-soon, .text-bg-warning { background-color: var(--df-warning-bg) !important; color: var(--df-warning-text) !important; }
.badge-status-overdue, .text-bg-danger { background-color: var(--df-error-bg) !important; color: var(--df-error-text) !important; }
.text-bg-secondary { background-color: #ECEAE5 !important; color: #474B57 !important; }
.text-bg-dark { background-color: var(--df-navy) !important; color: #fff !important; }

/* Tables */
.table {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: rgba(0, 176, 151, .05);
  --bs-table-color: var(--df-ink);
  --bs-table-border-color: #ECEAE5;
}
.table > thead th { color: var(--df-muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; border-bottom-width: 1px; }

/* Navbar */
.navbar-brand img { height: 32px; width: auto; }
.navbar { --bs-navbar-active-color: var(--df-navy); --bs-navbar-color: #3A3F55; --bs-navbar-hover-color: var(--df-teal-dark); }
.navbar-dark, .navbar[data-bs-theme="dark"] { --bs-navbar-color: rgba(255, 255, 255, .82); --bs-navbar-hover-color: var(--df-teal-light); --bs-navbar-active-color: #fff; }

/* Pagination */
.pagination {
  --bs-pagination-color: var(--df-teal-dark);
  --bs-pagination-hover-color: #005A4D;
  --bs-pagination-active-bg: var(--df-teal-dark);
  --bs-pagination-active-border-color: var(--df-teal-dark);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(0, 176, 151, .25);
}

/* Modals and offcanvas */
.modal { --bs-modal-border-radius: var(--df-radius-card); --bs-modal-border-width: 0; }
.offcanvas { --bs-offcanvas-bg: #fff; }

/* E-paper preview: product screen on warm paper inside a navy bezel, like the apps.
   Real panel is 67 x 29 mm (296 x 128 px). */
.epaper {
  display: inline-block;
  background: var(--df-navy);
  padding: 14px 16px 18px;
  border-radius: 14px;
  box-shadow: var(--df-shadow-lg);
  max-width: 100%;
}
.epaper-screen {
  display: block;
  background: var(--df-paper);
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 296 / 128;
  width: 296px;
  max-width: 100%;
}
.epaper-screen img {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  /* Images are pure black on white; multiply turns white into the paper colour. */
  mix-blend-mode: multiply;
  filter: contrast(1.05) brightness(.98);
}
.epaper-real-size .epaper-screen { width: 67mm; }
.epaper-caption { color: var(--df-muted); font-size: .85rem; margin-top: .5rem; }

/* Small helpers */
.shadow-soft { box-shadow: var(--df-shadow) !important; }
.rounded-card { border-radius: var(--df-radius-card) !important; }
.uid { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }

/* Surfaces. Bootstrap uses the body background for cards, inputs and lists by default, which on
   the canvas colour made panels blend into the page. Panels and fields are white. */
.card { --bs-card-bg: #fff; --bs-card-border-color: rgba(32, 36, 63, .06); }
.form-control, .form-select { background-color: #fff; }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: #F0EEEA; }
.form-check-input { --bs-form-check-bg: #fff; border-color: #BDB9AF; }
.input-group-text { background-color: #F7F6F3; border-color: #D6D3CB; }
.list-group { --bs-list-group-bg: #fff; --bs-list-group-border-color: #ECEAE5; }
.modal { --bs-modal-bg: #fff; }
.dropdown-menu { --bs-dropdown-bg: #fff; --bs-dropdown-link-active-bg: var(--df-teal-dark); }
.accordion { --bs-accordion-bg: #fff; }

/* Components whose colours Bootstrap compiles in as its own blue (#0d6efd): set them to the brand. */
.nav { --bs-nav-link-color: var(--df-navy); --bs-nav-link-hover-color: var(--df-teal-dark); }
.nav-link:focus-visible { box-shadow: 0 0 0 .25rem rgba(0, 176, 151, .3); }
.nav-pills { --bs-nav-pills-link-active-color: #fff; --bs-nav-pills-link-active-bg: var(--df-teal-dark); }
.nav-pills .nav-link:not(.active):hover { background: var(--df-teal-tint); }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--df-navy); }
.list-group { --bs-list-group-active-bg: var(--df-teal-dark); --bs-list-group-active-border-color: var(--df-teal-dark); --bs-list-group-action-hover-bg: #F7F6F3; }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--df-teal-dark); }
.dropdown-menu-dark { --bs-dropdown-link-active-bg: var(--df-teal-dark); }
.form-check-input[type=checkbox]:indeterminate { background-color: var(--df-teal-dark); border-color: var(--df-teal-dark); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2300B097'/%3e%3c/svg%3e"); }
.form-range::-webkit-slider-thumb { background-color: var(--df-teal-dark); }
.form-range::-moz-range-thumb { background-color: var(--df-teal-dark); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(0, 176, 151, .3); }
.form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(0, 176, 151, .3); }
.form-range::-webkit-slider-thumb:active { background-color: var(--df-teal-light); }
.form-range::-moz-range-thumb:active { background-color: var(--df-teal-light); }