/* Ordio design tokens — design-notes.md Section 3.1 */
:root {
  --ordio-bg: #fffbfe;
  --ordio-surface: #ffffff;
  --ordio-primary: #3bb273;
  --ordio-text: #000500;
  --ordio-text-secondary: #5f6b67;
  --ordio-border: #e8ecea;
  --ordio-border-alt: #e5e7eb;
  --ordio-warning: #e1bc23;
  --ordio-warning-alt: #dfaf2b;
  --ordio-danger: #d52941;
  --ordio-info: #3b82f6;

  /* Derived hover/active/subtle/emphasis tones, computed with Bootstrap's
     own shade-color()/tint-color() percentages (verified against
     Bootstrap's default palette to confirm the formula before applying
     it to Ordio's colors): text-emphasis = shade 60%, border-subtle =
     tint 60%, bg-subtle = tint 80%, button hover/active = shade 15/20/25%. */
  --ordio-primary-hover: #329762;
  --ordio-primary-active: #2f8e5c;
  --ordio-primary-bg-subtle: #d8f0e3;
  --ordio-primary-border-subtle: #b1e0c7;
  --ordio-primary-text-emphasis: #18472e;

  --ordio-warning-bg-subtle: #f9f2d3;
  --ordio-warning-border-subtle: #f3e4a7;
  --ordio-warning-text-emphasis: #5a4b0e;

  --ordio-danger-hover: #b52337;
  --ordio-danger-active: #aa2134;
  --ordio-danger-bg-subtle: #f7d4d9;
  --ordio-danger-border-subtle: #eea9b3;
  --ordio-danger-text-emphasis: #55101a;

  --ordio-info-hover: #326ed1;
  --ordio-info-active: #2f68c5;
  --ordio-info-bg-subtle: #d8e6fd;
  --ordio-info-border-subtle: #b1cdfb;
  --ordio-info-text-emphasis: #183462;
}

/* Bootstrap variable overrides — design-notes.md Section 3.2 mapping.
   Covers everything Bootstrap 5.3 derives from these root variables
   (bg/text/border utilities, .text-bg-*, alerts, focus rings, links). */
:root {
  --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;

  --bs-body-bg: var(--ordio-bg);
  --bs-body-color: var(--ordio-text);
  --bs-body-color-rgb: 0, 5, 0;
  --bs-border-color: var(--ordio-border);
  --bs-secondary-color: var(--ordio-text-secondary);
  --bs-emphasis-color: var(--ordio-text);

  --bs-primary: var(--ordio-primary);
  --bs-primary-rgb: 59, 178, 115;
  --bs-primary-text-emphasis: var(--ordio-primary-text-emphasis);
  --bs-primary-bg-subtle: var(--ordio-primary-bg-subtle);
  --bs-primary-border-subtle: var(--ordio-primary-border-subtle);

  --bs-warning: var(--ordio-warning);
  --bs-warning-rgb: 225, 188, 35;
  --bs-warning-text-emphasis: var(--ordio-warning-text-emphasis);
  --bs-warning-bg-subtle: var(--ordio-warning-bg-subtle);
  --bs-warning-border-subtle: var(--ordio-warning-border-subtle);

  --bs-danger: var(--ordio-danger);
  --bs-danger-rgb: 213, 41, 65;
  --bs-danger-text-emphasis: var(--ordio-danger-text-emphasis);
  --bs-danger-bg-subtle: var(--ordio-danger-bg-subtle);
  --bs-danger-border-subtle: var(--ordio-danger-border-subtle);

  --bs-info: var(--ordio-info);
  --bs-info-rgb: 59, 130, 246;
  --bs-info-text-emphasis: var(--ordio-info-text-emphasis);
  --bs-info-bg-subtle: var(--ordio-info-bg-subtle);
  --bs-info-border-subtle: var(--ordio-info-border-subtle);

  /* Raw primary green on the page background is only ~2.7:1 contrast
     (fails WCAG AA) — links use the darker text-emphasis shade instead,
     which reaches ~13:1, while still reading as "the Ordio green". */
  --bs-link-color: var(--ordio-primary-text-emphasis);
  --bs-link-color-rgb: 24, 71, 46;
  --bs-link-hover-color: var(--ordio-primary-text-emphasis);
  --bs-link-hover-color-rgb: 24, 71, 46;

  --bs-focus-ring-color: rgba(59, 178, 115, .25);

  --bs-form-invalid-color: var(--ordio-danger);
  --bs-form-invalid-border-color: var(--ordio-danger);
}

/* Components Bootstrap bakes as literal colors into their own scoped
   CSS variables at build time (confirmed against the compiled CSS) —
   these need redeclaring on the same selector to retheme without a Sass
   rebuild. This is the documented Bootstrap 5.3 approach, not an
   !important override.

   Button text: white-on-Ordio-primary-green is only ~2.7:1 contrast
   (fails WCAG AA); --ordio-text on the same green reaches ~7.6:1, so
   primary/warning/info buttons use dark text. Danger keeps white text
   (~5:1, passes). */
.btn-primary {
  --bs-btn-color: var(--ordio-text);
  --bs-btn-bg: var(--ordio-primary);
  --bs-btn-border-color: var(--ordio-primary);
  --bs-btn-hover-color: var(--ordio-text);
  --bs-btn-hover-bg: var(--ordio-primary-hover);
  --bs-btn-hover-border-color: var(--ordio-primary-active);
  --bs-btn-focus-shadow-rgb: 59, 178, 115;
  --bs-btn-active-color: var(--ordio-text);
  --bs-btn-active-bg: var(--ordio-primary-active);
  --bs-btn-active-border-color: var(--ordio-primary-active);
  --bs-btn-disabled-color: var(--ordio-text);
  --bs-btn-disabled-bg: var(--ordio-primary);
  --bs-btn-disabled-border-color: var(--ordio-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--ordio-primary-text-emphasis);
  --bs-btn-border-color: var(--ordio-primary);
  --bs-btn-hover-color: var(--ordio-text);
  --bs-btn-hover-bg: var(--ordio-primary);
  --bs-btn-hover-border-color: var(--ordio-primary);
  --bs-btn-focus-shadow-rgb: 59, 178, 115;
  --bs-btn-active-color: var(--ordio-text);
  --bs-btn-active-bg: var(--ordio-primary);
  --bs-btn-active-border-color: var(--ordio-primary);
  --bs-btn-disabled-color: var(--ordio-primary);
  --bs-btn-disabled-border-color: var(--ordio-primary);
}

.btn-warning {
  --bs-btn-color: var(--ordio-text);
  --bs-btn-bg: var(--ordio-warning);
  --bs-btn-border-color: var(--ordio-warning);
  --bs-btn-hover-color: var(--ordio-text);
  --bs-btn-hover-bg: var(--ordio-warning-alt);
  --bs-btn-hover-border-color: var(--ordio-warning-alt);
  --bs-btn-focus-shadow-rgb: 225, 188, 35;
  --bs-btn-active-color: var(--ordio-text);
  --bs-btn-active-bg: var(--ordio-warning-alt);
  --bs-btn-active-border-color: var(--ordio-warning-alt);
  --bs-btn-disabled-color: var(--ordio-text);
  --bs-btn-disabled-bg: var(--ordio-warning);
  --bs-btn-disabled-border-color: var(--ordio-warning);
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ordio-danger);
  --bs-btn-border-color: var(--ordio-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ordio-danger-hover);
  --bs-btn-hover-border-color: var(--ordio-danger-active);
  --bs-btn-focus-shadow-rgb: 213, 41, 65;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ordio-danger-active);
  --bs-btn-active-border-color: var(--ordio-danger-active);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--ordio-danger);
  --bs-btn-disabled-border-color: var(--ordio-danger);
}

.form-check-input:checked {
  background-color: var(--ordio-primary);
  border-color: var(--ordio-primary);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ordio-primary-border-subtle);
  box-shadow: 0 0 0 .25rem rgba(59, 178, 115, .25);
}

.progress {
  --bs-progress-bar-bg: var(--ordio-primary);
  --bs-progress-bar-color: var(--ordio-text);
}

/* Same white-on-Ordio-green contrast problem as buttons above, just in
   Bootstrap's badge/"text-bg" utility instead: .text-bg-primary hardcodes
   `color:#fff!important`, so it needs an equally-!important override to
   win (not fighting Bootstrap's internals by choice — Bootstrap's own
   rule leaves no other path). .text-bg-warning/-info/-danger already use
   black/white text that's correct for Ordio's colors (checked directly
   against the compiled CSS), so only primary needs this. */
.text-bg-primary {
  color: var(--ordio-text) !important;
}

.list-group {
  --bs-list-group-active-bg: var(--ordio-primary);
  --bs-list-group-active-border-color: var(--ordio-primary);
  --bs-list-group-active-color: var(--ordio-text);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--ordio-primary);
  --bs-nav-pills-link-active-color: var(--ordio-text);
}

/* --- App shell: persistent sidebar + main content ---------------------
   #app-sidebar (the offcanvas) only becomes a persistent, always-visible
   column at lg+ when it's a descendant of a .navbar.navbar-expand-lg
   wrapper (#app-sidebar-nav) — confirmed against Bootstrap's compiled
   CSS: .offcanvas-lg alone does NOT auto-reveal without that wrapper.
   That same Bootstrap rule forces the offcanvas to width:auto!important
   at lg+, so the fixed 240px sidebar width is set on the wrapper
   instead, and the offcanvas (now flex-grow:1) fills it. Bootstrap also
   forces the offcanvas element and its .offcanvas-body transparent
   (!important) at lg+, so the surface background/border live on an
   inner wrapper (#sidebar-panel) instead of fighting that !important. */
#app-shell {
  min-height: 100vh;
}

#app-sidebar {
  --bs-offcanvas-width: 280px;
  border-right: 0;
}

@media (min-width: 992px) {
  #app-sidebar-nav {
    width: 240px;
    flex-shrink: 0;
    /* Bootstrap's .navbar sets align-items:center, which would vertically
       center (and shrink-to-content) the offcanvas instead of stretching
       it to fill this column. */
    align-items: stretch;
  }
}

#sidebar-panel {
  height: 100%;
  background-color: var(--ordio-surface);
}

@media (min-width: 992px) {
  #sidebar-panel {
    border-right: 1px solid var(--ordio-border);
  }
}

#app-main {
  min-width: 0;
}

/* Defensive guarantee against page-level horizontal scroll. Every wide
   table on the page is already wrapped in .table-responsive for its own
   internal scroll, so nothing legitimate needs the page itself to
   scroll horizontally — this is a hard backstop in case any element
   ever pushes width beyond the viewport (confirmed no page-level
   overflow in Chromium at mobile widths, but this guarantees it can
   never become user-visible regardless of browser-specific rendering
   differences). */
html,
body {
  overflow-x: hidden;
}

/* Cap card width at desktop widths so tables/lists stay scannable
   instead of stretching edge-to-edge on wide monitors. Same breakpoint
   as the persistent sidebar (#app-sidebar-nav above), so "desktop
   layout mode" and "capped content width" switch on together. Narrower
   viewports keep using the full available width. */
@media (min-width: 992px) {
  #page-header,
  #page-content {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Build Prompt 32: the Client Portal previously carried one
   unconditional 560px inline cap (on both the normal Portal and the
   document viewer, which share this layout) regardless of viewport —
   at 1440px that left ~440px of unused margin on each side, and forced
   the Tāme preview into horizontal scroll even for the seed's own
   6-column demo sheet. Mobile keeps the exact same 560px value, just
   scoped below the breakpoint instead of applying unconditionally;
   desktop gets the same 1280px cap and the same lg breakpoint Owner's
   #page-content already uses, so both apps switch to "desktop mode"
   together and a real comparison between them is meaningful. */
#client-main {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 992px) {
  #client-main {
    max-width: 1280px;
  }
}

/* Build Prompt 28: the project-setup wizard is a single-column,
   task-focused form (design-notes.md 5.6) — letting it stretch to the
   full 1280px shell width (above) would make each text input an
   uncomfortably long horizontal strip. Capped independently of the
   shell width so a future shell-width change doesn't silently widen
   this too. */
#wizard-shell {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Build Prompt 11: DOCX viewer content — constrains line length for
   comfortable reading and gives the converted HTML (plain <p>/<h1-6>/
   <ul>/<table>, no classes of its own) the same spacing/hierarchy the
   rest of the app already gets from Bootstrap's Reboot defaults.

   Build Prompt 11A: the max-width/centering lives on the outer card
   (#document-viewer-docx), not just the inner content div, so the
   white surface itself reads as a bounded "document" rather than a
   full-width card with a padded column of text inside it.

   Build Prompt 11B: larger card padding and a slightly bumped base
   font-size/line-height so the reading surface feels deliberately
   comfortable rather than like raw extracted HTML at browser
   defaults. */
#document-viewer-docx {
  max-width: 900px;
  margin: 0 auto;
}

#document-viewer-docx .card-body {
  padding: 2.5rem 3rem;
}

.docx-content {
  font-size: 1.05rem;
  line-height: 1.75;
}

.docx-content h1,
.docx-content h2,
.docx-content h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.docx-content p {
  margin-bottom: 1.1rem;
}

.docx-content ul,
.docx-content ol {
  margin-bottom: 1.1rem;
  padding-left: 1.5rem;
}

/* PhpWord's HTML writer inlines embedded images with the original
   document's fixed pixel width/height, which can exceed this
   container on real-world files. */
.docx-content img {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  display: block;
}

/* Build Prompt 11A: XLSX viewer — Bootstrap's .table sets width:100%,
   which stretches a sparsely-populated real-world worksheet's blank
   columns to fill the viewport instead of sizing to actual content.
   Scoped to the XLSX viewer only; every other table in the app keeps
   Bootstrap's normal full-width behavior. */
#document-viewer-xlsx table {
  width: auto;
}

/* Build Prompt 11B: replaces 11A's blanket nowrap — a single long
   sentence could still force one column to dominate the table. Text
   cells now wrap within a sensible max width instead; numeric/currency
   cells (already right-aligned via .text-end) stay compact and
   unwrapped, since numbers rarely need wrapping and look worse when
   they do. */
#document-viewer-xlsx td {
  min-width: 120px;
  max-width: 280px;
  white-space: normal;
  word-break: break-word;
  padding: 0.35rem 0.5rem;
}

#document-viewer-xlsx td.text-end {
  max-width: none;
  white-space: nowrap;
}

/* Build Prompt 32: scoped to #document-viewer-xlsx (shared with Owner
   via views/documents/view.php's id selectors — a genuinely shared,
   regression-safe improvement, not a Client-only rule).

   Scroll shadow: the standard dual-gradient technique (two "cover"
   gradients that scroll with the content and mask the shadow once
   there's nothing left to scroll in that direction, two "shadow"
   gradients fixed to the container's edges) — appears/disappears
   automatically from actual scroll position, no JS. */
#document-viewer-xlsx .table-responsive {
  background:
    linear-gradient(to right, var(--ordio-surface) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--ordio-surface) 30%, rgba(255, 255, 255, 0)) 100% 0,
    linear-gradient(to right, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)),
    linear-gradient(to left, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)) 100% 0;
  background-repeat: no-repeat;
  background-color: var(--ordio-surface);
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Keeps the sheet's first row in view while scrolling a tall table.
   Deliberately NOT <thead>/<th> — format_xlsx_cell() (document_viewer.php)
   only ever captures {value, numeric} per cell, nothing about which
   row is actually a header, so asserting header semantics the data
   model can't support would mislead a screen reader more than the
   current plain grid does. This is a visual "stays visible" aid on
   whichever row happens to render first, not a semantic claim. */
#document-viewer-xlsx tbody tr:first-child td {
  position: sticky;
  top: 0;
  background-color: var(--ordio-surface);
  z-index: 1;
}

/* Build Prompt 28: Field action disclosure buttons. A real <details>
   element — native keyboard support (Tab + Enter/Space toggles it),
   works with JS fully off — restyled to read as a full-width app
   button instead of a raw HTML disclosure widget. No hover-only
   affordance: the open/closed state is shown by the chevron rotation
   (details[open], a plain CSS attribute selector) and by the section
   actually expanding, both visible without hovering. The left border
   color repeats each action's existing icon color (danger/warning/
   primary/neutral) so the color-coding already used everywhere else
   (design-notes.md 3.4) carries through here too. */
.field-action {
  display: block;
  border: 1px solid var(--ordio-border);
  border-left-width: 4px;
  border-radius: var(--bs-border-radius);
  background-color: var(--ordio-surface);
}

.field-action-danger { border-left-color: var(--ordio-danger); }
.field-action-warning { border-left-color: var(--ordio-warning); }
.field-action-primary { border-left-color: var(--ordio-primary); }
.field-action-secondary { border-left-color: var(--ordio-border-alt); }

.field-action-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  list-style: none;
  cursor: pointer;
  padding: 1rem;
  min-height: 3rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.field-action-summary::-webkit-details-marker {
  display: none;
}

.field-action-summary:focus-visible {
  outline: 2px solid var(--ordio-primary);
  outline-offset: -2px;
}

.field-action-chevron {
  flex-shrink: 0;
  color: var(--ordio-text-secondary);
  transition: transform 150ms ease;
}

.field-action[open] > .field-action-summary .field-action-chevron {
  transform: rotate(180deg);
}

/* At the narrowest phone width, the two longest labels ("Pieprasīt
   papildu darbus", "Publicēt atjauninājumu") wrap to two lines
   instead of clipping/overflowing — a slightly smaller size keeps the
   tap target's line-height comfortable rather than cramped. */
@media (max-width: 390px) {
  .field-action-summary {
    font-size: .95rem;
    line-height: 1.3;
  }
}

/* Build Prompt 28: styled file-input presentation (views/partials/
   _file_input.php). The native <input> uses Bootstrap's own
   .visually-hidden (clip technique, not display:none) so it stays
   focusable/tabbable and the <label for="..."> can still forward a
   click/Enter/Space to open the OS file dialog with no JS involved —
   only the filename echo needs file-input.js. */
.file-input-styled {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .75rem;
}

.file-input-native:focus-visible + label {
  outline: 2px solid var(--ordio-primary);
  outline-offset: 2px;
}

/* Recent Activity attachment thumbnails (Blocked/Expense/General
   Update photos) — kept small since the activity feed is a scanning
   list, not a gallery; click through to the original via the existing
   document route. */
.event-attachment-thumbnail {
  display: block;
  max-width: 160px;
  max-height: 100px;
  object-fit: cover;
}