/* PDKSV9 host styling.

   The shell -- app layout, sidebar, topbar, content, nav items, page header -- comes from the
   frozen library's theme (docs/69 §22, docs/82 IMPL-119). What lived here before was a parallel
   implementation of all of it, under PDKSV9's own class names and its own design tokens, which is
   exactly the divergence docs/69 §23 forbids.

   What remains is what the library does not ship: the locale switch the host owns (see
   MainLayout), and a few small presentation classes the screens use. All of them are expressed in
   the design system's tokens rather than in a competing set. */

body {
  margin: 0;
  font-family: var(--bs-font-family);
  background: var(--bs-color-bg);
  color: var(--bs-color-text);
  font-size: var(--bs-font-size-base);
  line-height: 1.5;
}

* { box-sizing: border-box; }

/* Headings outside a BsPage header (the dashboard's section titles, and the login form). */
h1 { font-size: var(--bs-font-size-h1); margin: 0 0 var(--bs-spacing-md); }
h2 { font-size: var(--bs-font-size-h2); margin: 0 0 var(--bs-spacing-sm); }

/* ── Sidebar toggle ─────────────────────────────────────────────────────────
   The library ships the responsive sidebar but no control for it: `.bs-sidebar.open` is a class
   the host sets. Hidden above 768px, where the sidebar is visible regardless. */
.bs-menu-toggle {
  display: none;
  border: none;
  background: none;
  color: var(--bs-color-text);
  font-size: var(--bs-font-size-lg);
  line-height: 1;
  cursor: pointer;
  padding: var(--bs-spacing-xs) var(--bs-spacing-sm);
  margin-right: var(--bs-spacing-sm);
}

@media (max-width: 768px) {
  .bs-menu-toggle { display: inline-flex; align-items: center; }
}

/* ── Locale switch ──────────────────────────────────────────────────────────
   The host's own, deliberately: BsLanguageSelector switches by navigating to a
   /culture/set endpoint, which is the request-culture model PDKSV9 does not use. */
/* The topbar's right-hand group: who is signed in, and the language (docs/82 IMPL-167). */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--bs-spacing-lg);
  margin-left: auto;
}

.session { display: flex; align-items: center; gap: var(--bs-spacing-sm); }
.session-user { color: var(--bs-color-text); font-weight: 500; white-space: nowrap; }

.locale-switch { display: flex; gap: var(--bs-spacing-xs); }

.locale {
  border: 1px solid var(--bs-color-border);
  background: var(--bs-color-surface);
  color: var(--bs-color-text-muted);
  border-radius: var(--bs-btn-radius);
  padding: 0 var(--bs-spacing-md);
  height: var(--bs-btn-height-sm);
  cursor: pointer;
  font: inherit;
  font-size: var(--bs-font-size-sm);
}

.locale.active {
  border-color: var(--bs-color-primary);
  color: var(--bs-color-primary);
  font-weight: 600;
}

.locale:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--bs-color-border-focus);
  outline-offset: 2px;
}

/* ── Screen-level presentation the library does not ship ───────────────────── */
.cards { display: grid; gap: var(--bs-spacing-md); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.card, .notice, .form {
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-card-border);
  border-radius: var(--bs-card-radius);
  padding: var(--bs-card-padding);
}

.muted { color: var(--bs-color-text-muted); font-size: var(--bs-font-size-sm); }

/*
   A yes and a no in a grid cell. The no is muted rather than red: it is an answer, not a fault,
   and a red cross would make every inactive row look like something had gone wrong.
*/
.pdks-bool-yes { color: var(--bs-color-text); }
.pdks-bool-no { color: var(--bs-color-text-muted); }

/*
   `.pdks-field-grid` lived here and is gone (docs/82 IMPL-281). It was an auto-fit CSS grid doing
   what `BsRow`/`BsColumn` already do properly — a twelve-column layout with the design system's
   own breakpoints, where `Span="4"` is three across, two at 768px and one at 480px. Two sets of
   breakpoints in one product is one set that will drift.
*/
/*
   A refusal, in the colour of a refusal.

   This used to read `--bs-color-danger-text`, which in the library means "text to put ON a
   danger-coloured surface" and is therefore white — the colour of the label inside the red Sil
   button. On our own white card it painted every form error white on white: present in the DOM,
   announced to a screen reader, and invisible to everybody else. Found by clicking Kaydet on an
   invalid day definition and watching nothing happen.
*/
.error { color: var(--bs-color-danger); font-weight: 500; }

/*
   And inside a dialog, pinned where the eye already is.

   A long form puts Kaydet at the bottom and this message at the top, so a refusal could be
   painted correctly and still never be seen. Sticky costs nothing, needs no script, and holds
   for every form in the product rather than the one that exposed it. It is given a surface of
   its own because content scrolls underneath it.
*/
.bs-dialog-body .error[role="alert"] {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 0 var(--bs-spacing-sm);
  padding: var(--bs-spacing-sm);
  border: 1px solid var(--bs-color-danger);
  border-radius: var(--bs-card-radius);
  background: var(--bs-card-bg);
}

.form { display: grid; gap: var(--bs-spacing-sm); max-width: 380px; }
.form label { font-weight: 500; }

.form input {
  padding: var(--bs-input-padding);
  height: var(--bs-input-height);
  border: 1px solid var(--bs-input-border);
  border-radius: var(--bs-input-radius);
  font: inherit;
}

.form button {
  margin-top: var(--bs-spacing-sm);
  height: var(--bs-btn-height);
  padding: var(--bs-btn-padding);
  border: none;
  border-radius: var(--bs-btn-radius);
  background: var(--bs-color-primary);
  color: var(--bs-color-text-inverse);
  font: inherit;
  font-weight: var(--bs-btn-font-weight);
  cursor: pointer;
}

.form button:disabled { opacity: 0.6; cursor: default; }

/* ── Period screens (docs/82 IMPL-112) ─────────────────────────────────────
   A period is chosen by month and carries its lifecycle state above its results; neither is a
   listing, so neither comes from the grid's own chrome. */
.period-selector { display: flex; gap: var(--bs-spacing-md); align-items: flex-end; margin-bottom: var(--bs-spacing-md); }
.period-selector label { display: grid; gap: var(--bs-spacing-xs); font-size: var(--bs-font-size-sm); }

.period-selector input {
  height: var(--bs-input-height);
  padding: var(--bs-input-padding);
  border: 1px solid var(--bs-input-border);
  border-radius: var(--bs-input-radius);
  font: inherit;
  width: 8rem;
}

.period-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bs-spacing-md);
  flex-wrap: wrap;
  margin-bottom: var(--bs-spacing-md);
}

.period-state { margin: 0; }
.period-actions { display: flex; gap: var(--bs-spacing-sm); align-items: center; flex-wrap: wrap; }
.period-reopen-reason { display: flex; gap: var(--bs-spacing-xs); align-items: center; font-size: var(--bs-font-size-sm); }

.period-reopen-reason input {
  height: var(--bs-input-height-sm);
  padding: var(--bs-input-padding);
  border: 1px solid var(--bs-input-border);
  border-radius: var(--bs-input-radius);
  font: inherit;
}

@media (max-width: 768px) {
  .period-selector { flex-wrap: wrap; }
}

/* ── The content column may be narrower than its content ────────────────────
   A flex item's `min-width` defaults to `auto`, which means "never smaller than my content".
   The shell's content column is a flex item, and a listing's table is as wide as its columns
   need -- so on a 1032px window the employees grid pushed that column to 971px, the column
   pushed the shell past the viewport, and the *whole page* scrolled sideways: topbar, sidebar
   edge and all. The grid's own wrapper has `overflow-x: auto` and was never reached, because
   nothing above it was willing to be narrower (docs/82 IMPL-166).

   `min-width: 0` lets the column shrink to its share of the row, which puts the overflow back
   inside the wrapper built to scroll it.

   On our own element and our own class. The theme's `.bs-main` rule is untouched, and this adds
   a property to a div MainLayout renders rather than redefining anything the library ships. */
.pdks-main { min-width: 0; }


/* ── Dashboard ────────────────────────────────────────────────────────────────────────────────
   The home page's own figures (docs/82 IMPL-228).

   These are NOT a parallel implementation of anything the library ships, which is what docs/69
   §23 forbids: the library has no KPI tile, no bar chart and no activity feed, so there is
   nothing here to duplicate. The cards around them are `BsCard`, the page frame is the
   library's, and every value below is one of the design system's tokens. */

.pdks-headline h2 { margin: 0; }

.pdks-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--bs-spacing-md);
  margin: var(--bs-spacing-md) 0;
}

.pdks-kpi {
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-card-border);
  border-radius: var(--bs-card-radius);
  box-shadow: var(--bs-card-shadow);
  padding: var(--bs-spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--bs-spacing-xs);
}

.pdks-kpi-value {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.pdks-kpi-label { font-size: var(--bs-font-size-sm); color: var(--bs-color-text-secondary); }

.pdks-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--bs-spacing-md);
  align-items: start;
}

.pdks-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bs-spacing-md);
  margin-bottom: var(--bs-spacing-sm);
}

.pdks-panel-head h3 { margin: 0; }

/* Participation bars. A grid so the label, the percentage and the count line up down the
   column rather than wherever the text happens to end. */
.pdks-bars { list-style: none; margin: 0; padding: 0; }

.pdks-bars li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--bs-spacing-sm);
  margin-bottom: var(--bs-spacing-sm);
}

.pdks-bar-label { font-size: var(--bs-font-size-sm); font-weight: 500; }
.pdks-bar-value { font-size: var(--bs-font-size-sm); font-weight: 700; }
.pdks-bar-count { grid-column: 2; font-size: var(--bs-font-size-xs); color: var(--bs-color-text-muted); }

.pdks-bar-track {
  grid-column: 1;
  height: 8px;
  border-radius: 5px;
  background: var(--bs-color-border-subtle);
  overflow: hidden;
}

.pdks-bar-fill {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--bs-color-primary);
}

/* The movement feed. */
.pdks-feed { list-style: none; margin: 0; padding: 0; }

.pdks-feed li {
  display: flex;
  align-items: center;
  gap: var(--bs-spacing-sm);
  padding: var(--bs-spacing-xs) 0;
  border-bottom: 1px solid var(--bs-color-border-subtle);
  font-size: var(--bs-font-size-sm);
}

.pdks-feed li:last-child { border-bottom: none; }
.pdks-feed-name { flex: 1; font-weight: 500; }
.pdks-feed-time { color: var(--bs-color-text-muted); font-size: var(--bs-font-size-xs); }

/* The estate. */
.pdks-total {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 var(--bs-spacing-sm);
}

.pdks-states { list-style: none; margin: 0; padding: 0; }

.pdks-states li {
  display: flex;
  align-items: center;
  gap: var(--bs-spacing-sm);
  font-size: var(--bs-font-size-sm);
  padding: 2px 0;
}

.pdks-states strong { margin-left: auto; }

.pdks-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--bs-color-text-muted); }

/* Only the states the product actually distinguishes get a colour of their own; the rest stay
   neutral rather than being given a meaning the domain does not assign them. */
.pdks-dot-online { background: var(--bs-color-success); }
.pdks-dot-unreachable { background: var(--bs-color-danger); }
.pdks-dot-synchronizationlag { background: var(--bs-color-warning); }
.pdks-dot-maintenance { background: var(--bs-color-info); }
.pdks-dot-authenticationfailure,
.pdks-dot-protocolfailure { background: var(--bs-color-danger); }

.pdks-modules-title { margin-top: var(--bs-spacing-lg); }

/* ── The product's own look, over the library's classes ───────────────────────────────────────
   (docs/69 §22 as amended 2026-09-20, docs/82 IMPL-229)

   Until that amendment the library's theme was authoritative and the product was not allowed to
   restyle it. The PO changed the rule: the library supplies the components and their behaviour,
   the product supplies the look.

   **These rules paint the library's components; they do not replace them.** Every selector below
   names a class the library renders, so BsListPage is still the list, BsGrid is still the grid,
   and everything they do — paging, sorting, selection, the keyboard, the localisation contract —
   is untouched. Writing our own markup to reproduce any of it is still forbidden (§23.1), and for
   good reason: it is the half nobody remembers to reproduce.

   The values are the design system's, through the tokens theme-industry.css sets. No literal
   colour is written here that is not already one of them. */

/* ── Sidebar ──────────────────────────────────────────────────────────────────────────────────
   The mock-up's nav items are pills, not full-width bars with a left edge. */
.bs-sidebar .sidebar-nav {
  padding: var(--bs-spacing-sm) 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bs-nav-item {
  padding: 10px 12px;
  gap: 12px;
  border-radius: 10px;
  border-left: none;
  font-size: var(--bs-font-size-base);
}

.bs-nav-item.active {
  /* The pill is the whole indicator; the library's left edge would sit inside a rounded
     background and read as a rendering fault. */
  border-left: none;
  font-weight: 600;
}

.bs-nav-logo {
  padding: 20px 18px 16px;
  gap: 10px;
}

/* The mock-up's logo tile: a rounded accent square the mark sits in. */
.sidebar-logo-text {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.1;
}

/* What the organisation is, at the foot of the sidebar. */
.sidebar-footer {
  margin-top: auto;
  padding: 16px 18px;
  border-top: 1px solid var(--bs-nav-logo-border);
  color: var(--bs-nav-text);
}

.sidebar-footer-name { font-size: var(--bs-font-size-sm); font-weight: 500; }
.sidebar-footer-version { font-size: var(--bs-font-size-xs); opacity: 0.55; }

/* ── Topbar ───────────────────────────────────────────────────────────────────────────────── */
.bs-topbar {
  padding: 0 28px;
  gap: 14px;
}

/* The signed-in person, as the mock-up shows them: initials, name, role. */
.session {
  display: flex;
  align-items: center;
  gap: 10px;
}

.session-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bs-color-primary), var(--bs-color-primary-active));
  color: var(--bs-color-primary-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bs-font-size-xs);
  font-weight: 700;
  flex: none;
}

.session-user { font-size: var(--bs-font-size-sm); font-weight: 600; line-height: 1.2; }

/* The date, as the mock-up's chip. */
.topbar-today {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  font-size: var(--bs-font-size-sm);
  background: var(--bs-color-border-subtle);
  border-radius: var(--bs-card-radius);
  white-space: nowrap;
}

/* ── Lists ────────────────────────────────────────────────────────────────────────────────────
   The mock-up puts each list on a white card with soft elevation, rather than flat on the page. */
.bs-grid-wrapper {
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-card-border);
  border-radius: var(--bs-card-radius);
  box-shadow: var(--bs-card-shadow);

  /* Two axes rather than one word, and the difference is a table nobody can read (docs/91
     PDKS-152, CA-R5). `overflow: hidden` was here to clip the card's rounded corners, and it also
     overrode the framework's own `overflow-x: auto` — so a listing wider than the viewport was cut
     off at the edge with no way to reach the rest of it. Hiding the vertical axis still clips the
     corners; the horizontal one scrolls, which is what a wide table on a narrow screen needs. */
  overflow-x: auto;
  overflow-y: hidden;
}

.bs-grid th {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  letter-spacing: 0.04em;
}

.bs-grid td { padding-top: 10px; padding-bottom: 10px; }

.bs-list-toolbar,
.bs-toolbar {
  padding-bottom: var(--bs-spacing-sm);
}

/* ── Page header ──────────────────────────────────────────────────────────────────────────── */
.bs-page-title { font-size: 1.45rem; }
.bs-page-subtitle { color: var(--bs-color-text-secondary); }

/* The notification bell (docs/82 IMPL-230 #58).

   The badge is positioned against the button rather than sitting beside the icon, so a count
   appearing or disappearing never moves the controls next to it. */
.topbar-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--bs-topbar-text, inherit);
  cursor: pointer;
  flex: none;
}

.topbar-bell:hover { background: rgba(0, 0, 0, 0.05); }

.topbar-bell-icon { display: flex; }
.topbar-bell-icon svg { width: 18px; height: 18px; }

.topbar-bell-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--bs-color-danger, #dc2626);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* The shell's axis picker (docs/82 IMPL-233).

   Compact, because it sits in a bar that is mostly not controls, and the label above it is the
   tenant's own axis name rather than a word this product chose. */
.topbar-filter { display: flex; align-items: center; margin-left: 12px; }

.topbar-filter .bs-field { margin: 0; }

.topbar-filter .bs-label {
  margin: 0 0 2px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}

.topbar-filter .bs-select {
  min-width: 160px;
  height: 32px;
  padding: 0 28px 0 10px;
  font-size: var(--bs-font-size-sm);
}

@media (max-width: 768px) {
  /* The name of what you are looking at matters more on a phone than it does here, and there is
     no room for both this and the session block. The listing's own filter drawer still has it. */
  .topbar-filter { display: none; }

  /* What is left of the bar at 390 px (docs/91 PDKS-152, BUG-40). Its children came to some 650
     to 730 px and only the filter was being dropped, so the shell pushed past the viewport and
     the WHOLE PAGE scrolled sideways — the sidebar and the bar with it, which is the one thing a
     layout must not do.

     What goes, and why each is the right thing to lose rather than the easiest:
     - the date chip, because a phone's own status bar already says what day it is;
     - the signed-in name, because the avatar beside it identifies the account and the sign-out
       control it sits with stays reachable. */
  .topbar-today,
  .session-user { display: none; }

  /* And what is left WRAPS rather than being dropped. The bar still has to carry a bell, a
     search, an avatar, "change password", "sign out" and two languages — and the password screen
     has no other way in than that button, so hiding controls here would take a function away
     instead of moving it. A bar two rows tall on a phone costs a few pixels of height; a control
     nobody can reach costs the feature.

     `height: auto` with it, because the bar's own fixed height would clip the second row. */
  .bs-topbar {
    flex-wrap: wrap;
    height: auto;
    row-gap: var(--bs-spacing-sm);
    padding-top: var(--bs-spacing-sm);
    padding-bottom: var(--bs-spacing-sm);
  }

  .topbar-actions {
    flex-wrap: wrap;
    gap: var(--bs-spacing-sm);
    margin-left: 0;
  }

  /* The session group itself wraps too (docs/91 PDKS-159). It holds the avatar and four buttons
     — password, sessions, notification preferences, sign out — and came to 475 px in one row once
     the preferences button joined it, which pushed the page sideways by 113 px at 390. */
  .session {
    flex-wrap: wrap;
    row-gap: var(--bs-spacing-sm);
  }

  /* The listing's own toolbar, for the same reason and with the same answer. Its action group
     came to 466 px on `/attendance` — a search box and three buttons in one unbreakable row —
     and pushed the page sideways by itself once the top bar had stopped doing it. */
  .bs-list-toolbar,
  .bs-list-toolbar__actions-group,
  .bs-toolbar {
    flex-wrap: wrap;
    row-gap: var(--bs-spacing-sm);
  }
}

/* The command palette (docs/82 IMPL-234).

   Anchored near the top rather than centred: the list grows downward as somebody types, and a
   vertically centred dialog would move the input under their hands while they use it. */
.palette-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1200;
}

.palette {
  position: fixed;
  top: 12vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, calc(100vw - 32px));
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--bs-card-bg, #fff);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  z-index: 1201;
}

.palette-search { padding: 14px 16px; border-bottom: 1px solid var(--bs-grid-border, #e5e7eb); }

.palette-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--bs-font-size-md, 15px);
  color: inherit;
}

.palette-results { overflow-y: auto; padding: 6px 0 10px; }

.palette-note { padding: 18px 16px; opacity: 0.65; font-size: var(--bs-font-size-sm); }

.palette-group-title {
  padding: 10px 16px 4px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}

.palette-hit {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.palette-hit:hover,
.palette-hit.selected { background: var(--bs-color-primary-subtle, rgba(37, 99, 235, 0.1)); }

.palette-hit-label { font-size: var(--bs-font-size-sm); }
.palette-hit-detail { font-size: var(--bs-font-size-xs); opacity: 0.6; }

/* The way in that is not a keypress. */
.topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  margin-left: 12px;
  padding: 0 10px;
  border: 1px solid var(--bs-grid-border, #e5e7eb);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.topbar-search:hover { background: rgba(0, 0, 0, 0.04); }
.topbar-search svg { width: 16px; height: 16px; }
.topbar-search-text { font-size: var(--bs-font-size-sm); opacity: 0.75; }

.topbar-search-key {
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--bs-grid-border, #e5e7eb);
  border-radius: 4px;
  opacity: 0.65;
}

@media (max-width: 768px) {
  /* The label and the shortcut hint both go; the icon alone still opens it, and a phone has no
     Ctrl key to advertise. */
  .topbar-search-text,
  .topbar-search-key { display: none; }
}

/* The two period cards (docs/82 IMPL-241).

   Bars rather than a charting library: two numbers a month over six months is not a chart, and a
   dependency that draws one would be carried for the life of the product to avoid twenty lines. */
.pdks-trend-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.pdks-trend-rows li {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: var(--bs-font-size-sm);
}

.pdks-trend-month { opacity: 0.75; }

.pdks-trend-bar {
  display: flex;
  height: 10px;
  border-radius: 5px;
  background: var(--bs-grid-border, #e5e7eb);
  overflow: hidden;
}

.pdks-trend-worked { background: var(--bs-color-primary); }
.pdks-trend-overtime { background: var(--bs-color-warning, #f59e0b); }
.pdks-trend-absence { background: var(--bs-color-danger, #dc2626); }

.pdks-note,
.pdks-empty {
  margin: 0 0 10px;
  font-size: var(--bs-font-size-xs);
  opacity: 0.7;
}

/* ---------------------------------------------------------------------------
   An employee's photograph on the profile form (docs/82 IMPL-274).

   Bounded so that whatever somebody uploads sits in the form rather than
   pushing everything below it off the screen; the aspect ratio is kept because
   a squashed face is worse than a small one.
   --------------------------------------------------------------------------- */
.pdks-photo {
    display: block;
    max-width: 160px;
    max-height: 160px;
    width: auto;
    height: auto;
    margin-bottom: var(--bs-spacing-sm);
    border-radius: var(--bs-radius-sm, 4px);
}


/* ---------------------------------------------------------------------------
   Section headings, and the explanations behind them (docs/82 IMPL-287).

   The day form used to carry every field's explanation as a permanent line
   under the input. Correct, and unreadable: the fields were the hard part to
   find. The sentences now live on the field's own `title` and in a dialog one
   icon away, and what is left on the form is a heading per section.

   `.pdks-section-label` also supplies the space above itself that made
   "Cezalar" read as part of the overtime block it followed — the label sat
   flush against the grid above it with nothing between them.
   --------------------------------------------------------------------------- */
.pdks-section-label {
  display: flex;
  align-items: center;
  gap: var(--bs-spacing-xs, 4px);
  margin-top: var(--bs-spacing-lg, 20px);
  margin-bottom: var(--bs-spacing-xs, 4px);
}

.pdks-section-label .bs-label {
  margin: 0;
}

/* A question mark, at the size of the text it belongs to rather than a button's. */
.bs-btn.pdks-help-hint {
  width: 1.4em;
  height: 1.4em;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--bs-color-border, #d0d5dd);
  font-size: var(--bs-font-size-xs);
  line-height: 1;
  color: var(--bs-color-text-muted);
}

.bs-btn.pdks-help-hint:hover {
  color: var(--bs-color-text);
  border-color: var(--bs-color-primary);
}

/* The dialog it opens: term, then the sentence that used to sit under the box. */
.pdks-help-list {
  margin: 0;
}

.pdks-help-list dt {
  margin-top: var(--bs-spacing-sm, 8px);
  font-weight: 600;
}

.pdks-help-list dt:first-child {
  margin-top: 0;
}

.pdks-help-list dd {
  margin: 0;
  color: var(--bs-color-text-muted);
}

/* ---------------------------------------------------------------------------
   Maaş pusulası (docs/82 IMPL-319).

   One document about one person rather than a listing, and the only screen in
   the product laid out as two columns side by side: the product being replaced
   prints GELİR on the left and GİDER on the right with the totals level, and a
   payroll clerk reads it that way.

   The halves fall under one another below 900px, where two four-column tables
   side by side stop being readable at all.
   --------------------------------------------------------------------------- */
.pdks-payslip {
  display: grid;
  gap: var(--bs-spacing-md, 12px);
}

.pdks-payslip-head h3 {
  margin: 0;
}

.pdks-payslip-head .muted {
  font-weight: 400;
}

.pdks-payslip-head p {
  margin: var(--bs-spacing-xs, 4px) 0 0;
}

.pdks-payslip-halves {
  display: grid;
  gap: var(--bs-spacing-md, 12px);
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

/*
  How the days' overtime became the payslip's (docs/91 PDKS-024). A note above the two halves
  rather than a line inside one of them: it explains a figure that appears in BOTH — the column
  the overtime went to and the gross below it — and a note printed inside one half would read as
  belonging only to that column. It wraps on its own, so a long chain of mechanisms stays readable
  at 390 px.
*/
.pdks-payslip-note {
  margin-bottom: var(--bs-spacing-md, 12px);
  padding: var(--bs-spacing-sm, 8px);
  border-left: 3px solid var(--bs-color-border, #d0d0d0);
}

.pdks-payslip-note h4 {
  margin: 0 0 var(--bs-spacing-xs, 4px);
  font-size: 0.95rem;
}

.pdks-payslip-note p {
  margin: 0;
}

@media (max-width: 900px) {
  .pdks-payslip-halves {
    grid-template-columns: 1fr;
  }
}

.pdks-payslip-half {
  width: 100%;
  border-collapse: collapse;
}

.pdks-payslip-half caption {
  text-align: left;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding-bottom: var(--bs-spacing-xs, 4px);
}

.pdks-payslip-half th,
.pdks-payslip-half td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--bs-color-border, #e2e2e2);
  text-align: left;
  font-size: var(--bs-font-size-sm, 0.875rem);
}

.pdks-payslip-half .num {
  text-align: right;
  /* Figures under figures: a column of amounts is compared down the page. */
  font-variant-numeric: tabular-nums;
}

/* The padded rows keep the two totals level and carry no content, so they must
   not read as rows with missing values. */
.pdks-payslip-pad td {
  border-bottom: none;
}

.pdks-payslip-half tfoot th,
.pdks-payslip-half tfoot td {
  border-top: 2px solid var(--bs-color-border, #e2e2e2);
  border-bottom: none;
}

.pdks-payslip-net {
  margin: 0;
  font-size: var(--bs-font-size-lg, 1.125rem);
}

/* ---------------------------------------------------------------------------
   Maaş ekstresi (docs/82 IMPL-320).

   A two-row header over a table whose columns are the tenant's: a spanning
   heading per payroll column, and under it one cell for each of Gün, Saat and
   Ücret that the column carries. Twelve such columns is wider than any screen,
   so the table scrolls sideways inside the page rather than being squeezed
   into it; the first two columns stick, because a row of figures with the name
   scrolled off the left is unreadable.
   --------------------------------------------------------------------------- */
.pdks-statement-scroll {
  overflow-x: auto;
  margin-bottom: var(--bs-spacing-md, 12px);
}

.pdks-statement {
  border-collapse: collapse;
  white-space: nowrap;
}

.pdks-statement th,
.pdks-statement td {
  padding: 3px 8px;
  border: 1px solid var(--bs-color-border, #e2e2e2);
  text-align: left;
  font-size: var(--bs-font-size-sm, 0.875rem);
}

.pdks-statement thead th {
  background: var(--bs-color-surface-alt, #f6f6f6);
}

.pdks-statement th.group {
  text-align: center;
}

.pdks-statement .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pdks-statement tfoot th,
.pdks-statement tfoot td {
  background: var(--bs-color-surface-alt, #f6f6f6);
  font-weight: 600;
}

.pdks-statement tbody tr:nth-child(even) td {
  background: var(--bs-color-surface-alt, #fafafa);
}

/* The employee number and name, kept in view while the figures scroll.

   Marked by class rather than by position: the second header row carries only
   figure headings, and its first two cells belong to a payroll column. */
.pdks-statement .sticky-1,
.pdks-statement .sticky-2 {
  position: sticky;
  background: var(--bs-color-surface, #fff);
  z-index: 1;
}

.pdks-statement .sticky-1 { left: 0; }
.pdks-statement .sticky-2 { left: 7rem; }

.pdks-statement thead .sticky-1,
.pdks-statement thead .sticky-2,
.pdks-statement tfoot .sticky-1 {
  background: var(--bs-color-surface-alt, #f6f6f6);
  z-index: 2;
}

/* A group heading and a group subtotal inside the ekstre (docs/82 IMPL-321). */
.pdks-statement-group th {
  background: var(--bs-color-surface-alt, #f0f0f0);
  font-weight: 700;
  text-align: left;
}

.pdks-statement-subtotal th,
.pdks-statement-subtotal td {
  background: var(--bs-color-surface-alt, #f6f6f6);
  font-weight: 600;
  border-top: 2px solid var(--bs-color-border, #e2e2e2);
}

/* --------------------------------------------------------------------------
   The team calendar (docs/91 PDKS-101)

   A person × day matrix. The columns are the data — a month of them, decided at
   run time — which is why the markup is a table of its own rather than `BsGrid`,
   and why it wears `.bs-grid` so it reads like every other table in the product.

   **The tints are row tints, not text.** WCAG holds a non-text component to 3:1
   and text to 4.5:1 (docs/91 PDKS-151): the cell's own text keeps the theme's
   `--bs-color-text` on a pale ground, so the pair that has to be readable is the
   one the theme already guarantees, and the tint only has to be distinguishable.

   **And the tint is never the only signal.** Each cell also carries a letter and
   a title naming the shift and the leave, because a grid that said "on leave" in
   colour alone would say nothing to a reader who cannot see the difference —
   which on a shift roster is the one thing it exists to say.
   -------------------------------------------------------------------------- */

.team-cell {
  text-align: center;
  min-width: 1.75rem;
  padding: var(--bs-spacing-xs);
  border-left: 1px solid var(--bs-color-border-subtle);
}

.team-cell-work { background: var(--bs-color-surface); }
.team-cell-rest { background: var(--bs-color-bg-subtle); }
.team-cell-half { background: var(--bs-color-primary-light); }
.team-cell-holiday { background: var(--bs-color-primary-mid); }

/* Leave wins the ground it is drawn on, because it is the exception somebody is
   scanning the grid for. The underline is the second signal: the one a reader
   who cannot tell the tints apart still gets. */
.team-cell-leave {
  background: var(--bs-color-primary-light);
  text-decoration: underline;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Vardiya çizelgesi (docs/91 PDKS-111). The roster is the team calendar's grid
   with two things added, and both are drawn as MARKS rather than as colour over
   the plan: a reader has to be able to see what a day is and that it was changed
   at the same time, and a cell already spends its background on the plan.

   The exception's mark is a dotted outline, which survives every background
   under it and reads on a monochrome print. The selection's is a solid outline
   plus `aria-pressed` on the cell, so a reader who cannot see the outline is
   still told which cells an apply would reach.
   -------------------------------------------------------------------------- */

.roster-grid {
  /* A drag across the grid is a selection of cells, not of text. Without this the browser paints
     its own blue text selection over the block somebody is drawing. */
  user-select: none;
}

.roster-grid td.team-cell {
  cursor: pointer;
}

/* The day headings and the name column select a whole line, so they look like what they are. */
.roster-grid .roster-head {
  cursor: pointer;
}

.roster-grid .roster-head-selected {
  background: var(--bs-color-primary-light);
  font-weight: 700;
}

.roster-grid .roster-head:focus-visible {
  outline: 2px solid var(--bs-color-primary);
  outline-offset: -2px;
}

.roster-cell-exception {
  outline: 2px dotted var(--bs-color-primary);
  outline-offset: -3px;
}

.roster-cell-selected {
  outline: 2px solid var(--bs-color-primary);
  outline-offset: -1px;
  font-weight: 700;
}

.roster-apply {
  margin-top: var(--bs-spacing-md);
}


/* ══ The phone layout (mobile UI pass, 2026-10-14) ════════════════════════════════════════════
   One set of shared screens, two shapes. Above 768 px nothing below applies and the desktop is
   exactly what it was. At phone width the product stops being the website made small:

   - a single-row top bar — menu, search, bell, avatar — with the account actions and the
     language moved into a sheet the avatar opens (MainLayout);
   - a bottom tab bar with the home page, the person's three most-used screens and "Menü"
     (MobileTabBar, MobileTabs);
   - listings drawn as cards, one row per card with each value under its column's name
     (grid-cards.js writes the names; Borina.UI's table is untouched);
   - controls a thumb can hit (44 px) and inputs a phone will not zoom into (16 px).

   `body.pdks-app` is the installed app: only what a browser should keep doing differently is
   scoped to it — tap flash, the shell's rubber-band scroll, and the notch's safe areas, which the
   Android host already pads natively but iOS leaves to the page. */

.pdks-tabbar { display: none; }

h1:focus, h2:focus { outline: none; }

/* The account sheet: a dropdown under the avatar on a wide screen, a bottom sheet on a phone. */
.pdks-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(0, 0, 0, 0.18);
}

.pdks-sheet {
  position: fixed;
  top: calc(var(--bs-topbar-height, 60px) + 4px);
  right: 16px;
  z-index: 300;
  width: 280px;
  display: flex;
  flex-direction: column;
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-color-border);
  border-radius: var(--bs-card-radius, 12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  padding: 8px 0;
}

.pdks-sheet-handle { display: none; }

.pdks-sheet-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 12px;
  border-bottom: 1px solid var(--bs-color-border);
  margin-bottom: 4px;
}

.pdks-sheet-name { font-weight: 600; }

.pdks-sheet-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border: none;
  background: none;
  font: inherit;
  color: var(--bs-color-text);
  text-align: left;
  cursor: pointer;
}

.pdks-sheet-item:hover { background: var(--bs-color-bg-subtle, rgba(0, 0, 0, 0.04)); }

.pdks-sheet-locales { gap: 8px; cursor: default; }
.pdks-sheet-locales:hover { background: none; }

.pdks-sheet-danger { color: var(--bs-color-danger); }

button.session-avatar { border: none; cursor: pointer; padding: 0; font: inherit; font-size: var(--bs-font-size-xs); font-weight: 700; }

@media (max-width: 768px), (pointer: coarse) and (max-height: 520px) {
  /* Touch sizes, through the design system's own tokens so every Borina control follows. */
  :root {
    --bs-btn-height: 44px;
    --bs-btn-height-sm: 38px;
    --bs-input-height: 44px;
    --bs-input-height-sm: 40px;
  }

  /* Below 16 px a phone zooms the page into the field being typed in and leaves it zoomed. */
  input, select, textarea { font-size: 16px; }

  /* ── Top bar: one row ────────────────────────────────────────────────────────────────────── */
  .bs-topbar {
    flex-wrap: nowrap;
    height: 56px;
    min-height: 56px;
    padding: 0 8px;
    gap: 4px;
    row-gap: 0;
    position: sticky;
    top: 0;
    /* Under the drawer's overlay (99), which should dim the whole screen around the drawer. */
    z-index: 90;
  }

  .topbar-actions { flex-wrap: nowrap; gap: 6px; margin-left: auto; }
  .session { flex-wrap: nowrap; gap: 0; }

  /* Moved into the account sheet, not removed: every one of these is a row there. */
  .session > .bs-btn,
  .session > .session-signout,
  .topbar-actions > .locale-switch { display: none; }

  /* "Menü" is on the tab bar now, where a thumb is; signed out there is nothing to navigate. */
  .bs-menu-toggle { display: none; }

  .topbar-search { min-width: 40px; height: 40px; justify-content: center; }
  .session-avatar { width: 38px; height: 38px; }

  /* ── Content and the tab bar under it ────────────────────────────────────────────────────── */
  /* The shell's own content column only: screens nest `.bs-content` inside it for their forms,
     and those keep the library's padding. */
  .pdks-main > .bs-content {
    padding: 12px 12px calc(76px + env(safe-area-inset-bottom, 0px));
  }

  /* A form row that has fallen to one column (the library's own breakpoints) keeps its fields on
     the same edge as the fields around it, instead of the gutter of a grid that is no longer there. */
  .bs-row { margin-left: 0; margin-right: 0; }
  .bs-row > .bs-col-6, .bs-row > .bs-col-8 { padding-left: 0; padding-right: 0; }

  .pdks-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pdks-kpi { padding: 12px; }
  .pdks-kpi-value { font-size: 1.5rem; }
  .pdks-kpi-label { font-size: 0.75rem; }

  h1 { font-size: 1.375rem; margin-bottom: 12px; }

  .pdks-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    height: calc(62px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bs-card-bg);
    border-top: 1px solid var(--bs-color-border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
  }

  .pdks-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px 4px;
    border: none;
    background: none;
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    color: var(--bs-color-text-secondary);
    text-decoration: none;
    cursor: pointer;
  }

  .pdks-tab.active,
  .pdks-tab[aria-expanded="true"] { color: var(--bs-color-primary); }

  .pdks-tab-icon { display: flex; height: 24px; align-items: center; }
  .pdks-tab-icon svg { width: 22px; height: 22px; }

  .pdks-tab-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The drawer opens above the tab bar and its overlay covers the page, not the bar. */
  .bs-nav-item { padding-top: 12px; padding-bottom: 12px; }

  /* ── The account sheet, from the bottom ──────────────────────────────────────────────────── */
  .pdks-sheet {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    border-radius: 16px 16px 0 0;
    padding: 6px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    animation: pdks-sheet-up 0.18s ease-out;
  }

  .pdks-sheet-handle {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--bs-color-border);
    margin: 4px auto 8px;
  }

  .pdks-sheet-item { min-height: 52px; font-size: 1rem; padding: 0 20px; }
  .pdks-sheet-head { padding: 8px 20px 14px; }
  .pdks-sheet-overlay { background: rgba(0, 0, 0, 0.4); }

  /* ── Listings as cards ───────────────────────────────────────────────────────────────────── */
  .bs-grid-wrapper {
    background: none;
    border: none;
    box-shadow: none;
    overflow: visible;
  }

  .bs-grid,
  .bs-grid > tbody,
  .bs-grid > tbody > tr,
  .bs-grid > tbody > tr > td { display: block; width: 100%; }

  /* The column names now live on each card; the header row would be a strip nobody reads. */
  .bs-grid > thead { display: none; }

  .bs-grid > tbody > tr {
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-card-border, var(--bs-color-border));
    border-radius: var(--bs-card-radius, 12px);
    box-shadow: var(--bs-card-shadow);
    margin-bottom: 10px;
    padding: 6px 0;
  }

  .bs-grid > tbody > tr > td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 14px;
    border: none;
    white-space: normal;
    text-align: right;
    overflow-wrap: anywhere;
    min-height: 0;
  }

  .bs-grid > tbody > tr > td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    text-align: left;
    font-size: var(--bs-font-size-sm);
    font-weight: 600;
    color: var(--bs-color-text-secondary);
  }

  /* A cell with no column name — the empty/loading row, a selection box, the row's actions —
     spans the card instead of leaving a blank label beside it. */
  .bs-grid > tbody > tr > td[data-label=""]::before,
  .bs-grid > tbody > tr > td:not([data-label])::before { display: none; }

  .bs-grid > tbody > tr > td[data-label=""],
  .bs-grid > tbody > tr > td:not([data-label]) { justify-content: center; text-align: center; }

  .bs-grid > tbody > tr > td.bs-grid-actions,
  .bs-grid > tbody > tr > td:last-child:has(.bs-btn) {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid var(--bs-color-border);
    margin-top: 4px;
    padding-top: 10px;
  }

  .bs-grid > tbody > tr > td.bs-grid-actions::before,
  .bs-grid > tbody > tr > td:last-child:has(.bs-btn)::before { display: none; }

  .bs-pagination { flex-wrap: wrap; gap: 8px; }
}

/* ── The installed app only ───────────────────────────────────────────────────────────────── */
.pdks-app {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

.pdks-app .bs-topbar { padding-top: env(safe-area-inset-top, 0px); }

@keyframes pdks-sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* The home page's module cards: unchanged on a desktop; on a phone an icon row the whole of which
   is the way in, the list a native app shows (Home.razor). */
.pdks-module-icon { display: none; }
/* The menu's headings fold (NavMenu.razor, 2026-10-14). The library's `bs-nav-section` still draws
   the label; this only makes it a button that looks like it, with an arrow. */
.pdks-nav-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.5rem;
    background: none; border: 0; margin: 0; text-align: left; font-family: inherit; color: var(--bs-nav-section-text); cursor: pointer; }
.pdks-nav-toggle:hover:not(:disabled) { color: var(--bs-nav-text, currentColor); }
.pdks-nav-toggle:focus-visible { outline: 2px solid var(--bs-color-primary); outline-offset: -2px; border-radius: 6px; }
.pdks-nav-toggle:disabled { cursor: default; }
.pdks-nav-chevron { font-size: 0.8rem; line-height: 1; }

/* The file input, in the reader's language (FilePicker.razor): a button and the chosen name. */
.pdks-file-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.pdks-file-picker > label.disabled { pointer-events: none; opacity: 0.6; }
.pdks-file-picker > [data-file-name] { overflow-wrap: anywhere; }

.pdks-module-card { cursor: pointer; }

@media (max-width: 768px), (pointer: coarse) and (max-height: 520px) {
  .cards { grid-template-columns: 1fr; gap: 8px; }

  .pdks-module-card {
    display: grid;
    grid-template-columns: 40px 1fr 14px;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
    padding: 14px 16px;
  }

  .pdks-module-icon {
    display: flex;
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    color: var(--bs-color-primary);
    background: var(--bs-color-primary-subtle, rgba(80, 118, 156, 0.12));
  }

  .pdks-module-icon svg { width: 22px; height: 22px; }

  .pdks-module-card h2 { grid-column: 2; margin: 0; font-size: 1.0625rem; }
  .pdks-module-card p {
    grid-column: 2;
    margin: 2px 0 0;
    font-size: var(--bs-font-size-sm);
    color: var(--bs-color-text-secondary);
  }

  .pdks-module-card .bs-btn { display: none; }

  .pdks-module-card::after {
    content: "\203A";
    grid-column: 3;
    grid-row: 1 / 3;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--bs-color-text-muted);
  }

  .pdks-module-card:active { background: var(--bs-color-bg-subtle, rgba(0, 0, 0, 0.04)); }
}

@media (max-width: 768px), (pointer: coarse) and (max-height: 520px) {
  /* A card is one surface: the table's zebra stripe and hover tint belong to rows of a table. */
  .bs-grid > tbody > tr > td,
  .bs-grid > tbody > tr:nth-child(even) > td,
  .bs-grid > tbody > tr:hover > td { background: transparent; }

  /* The first value reads as the card's title. */
  .bs-grid > tbody > tr > td:first-child { font-weight: 600; }

  /* The listing's search takes the row; its buttons sit under it. */
  .bs-list-toolbar__search-group,
  .bs-list-toolbar__search-group > :not(.bs-search-panel-drawer),
  .bs-grid-controls .bs-search-box,
  .bs-grid-controls input[type="search"],
  .bs-grid-controls input[type="text"] { width: 100%; max-width: none; flex: 1 1 100%; }
}

/* A phone on its side is wider than 768 px but still a phone: the library would give it the
   tablet rail and the desktop top bar, which overflowed the page sideways (1095 px of content on
   an 867 px landscape screen, measured 2026-10-14). The library's own phone rules, restated for it. */
@media (pointer: coarse) and (max-height: 520px) and (min-width: 769px) {
  .bs-sidebar { width: var(--bs-nav-width); transform: translateX(-100%); transition: transform var(--bs-transition-slow); z-index: 200; box-shadow: none; }
  .bs-sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25); }
  .bs-sidebar .bs-nav-section, .bs-sidebar .sidebar-item-label { opacity: 1; }
  .bs-mobile-overlay { display: block; }
  .bs-main { margin-left: 0 !important; }
  .topbar-filter, .topbar-today, .session-user, .topbar-search-text, .topbar-search-key { display: none; }
}

/* A lookup's list button ("⋯", BsLookupPickerButton) level with its input, on every screen.
   The library aligns the button to the bottom of the field, and the field (.bs-field or
   .bs-form-group) ends with its own bottom margin -- so the button sat that margin below the
   input. The margin moves from the field to the row the two share, and the button takes the
   input's height. */
.bs-picter-wrap { margin-bottom: var(--pdks-field-gap); }
.bs-picter-wrap > .bs-picter-field > .bs-field,
.bs-picter-wrap > .bs-picter-field > .bs-form-group { margin-bottom: 0; }

/* Form rows on every screen (2026-10-14).

   A rule for the whole product: every host links this file, so every form follows it.

   **A gutter.** The library's `.bs-row` pulls itself out by a spacing step on each side and
   only its `.bs-col` puts it back; `BsColumn Span="n"` draws `.bs-col-n`, which has no padding,
   so neighbouring fields touched. Every numbered column now carries the same step.

   **Two, three or four to a row, by the room there is.** `Span="6"` is how most forms say "two
   to a row" (198 of them), and in a wide page or an extra-large dialog that leaves long empty
   inputs. The row is a size container, and a half-width column becomes a third from 700px of
   row and a quarter from 1100px. Narrower spans already chose 3 or 4 and are left alone, and
   wider ones (a textarea, a full line) keep their width.

   Desktop only — the phone query in this file lays every column out full width. */
@media (min-width: 769px) and (min-height: 521px), (min-width: 769px) and (pointer: fine) {
  .bs-row { container-type: inline-size; }
  .bs-row > [class*="bs-col-"] { padding-left: var(--bs-spacing-sm); padding-right: var(--bs-spacing-sm); }

  @container (min-width: 700px) {
    .bs-col-6 { flex: 0 0 33.333%; max-width: 33.333%; }
  }

  @container (min-width: 1100px) {
    .bs-col-6 { flex: 0 0 25%; max-width: 25%; }
  }
}

/* The vertical space between one field and the next, on every form of the product (PO, 2026-10-14:
   "iki alan arasında dikeydeki mesafe biraz artırılmalı"). The library spaces its field wrappers
   by one spacing step (16px); a label sat too close to the input above it. One token, so the
   lookup row above follows it too. */
:root { --pdks-field-gap: 22px; }
.bs-form-group,
.bs-field { margin-bottom: var(--pdks-field-gap); }
.bs-picter-wrap > .bs-picter-field > .bs-field,
.bs-picter-wrap > .bs-picter-field > .bs-form-group { margin-bottom: 0; }

/* A lookup's clear button ("×", BsLookup) as an icon inside the input's right edge, like the
   calendar mark of a date field (PO, 2026-10-14). The library draws a bare <button> with no
   styling of its own, so it showed as the browser's bordered grey box beside the input. */
.bs-lookup-wrap > div:has(> .bs-lookup-clear) { position: relative; }
.bs-lookup-wrap > div:has(> .bs-lookup-clear) > .bs-lookup-input { padding-right: 34px; }
.bs-lookup-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--bs-color-text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.bs-lookup-clear:hover { background: var(--bs-color-bg-subtle); color: var(--bs-color-text); }
.bs-lookup-clear:focus-visible { outline: 2px solid var(--bs-color-border-focus); outline-offset: 1px; }

/* A lookup's browse button ("⋯", BsLookupPickerButton) inside the input's right edge as a plain
   list icon, like a date field's calendar (PO, 2026-10-14). The field ends at the input's bottom
   (its margin moved to the row above), so the button is placed from the row's bottom edge. The
   clear "×" moves left of it, and the input leaves room for both. */
.bs-picter-wrap { position: relative; }
.bs-picter-wrap > .bs-btn {
  position: absolute;
  right: 8px;
  bottom: calc((var(--bs-input-height) - 26px) / 2);
  width: 26px;
  min-width: 0;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: var(--bs-color-text-muted);
  font-size: 0;
}
.bs-picter-wrap > .bs-btn::before {
  content: "";
  display: block;
  width: 17px;
  height: 17px;
  margin: auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 5h.01'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M3 19h.01'/%3E%3Cpath d='M8 5h13'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 19h13'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 5h.01'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M3 19h.01'/%3E%3Cpath d='M8 5h13'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 19h13'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bs-picter-wrap > .bs-btn:hover { background: var(--bs-color-bg-subtle); color: var(--bs-color-primary); }
.bs-picter-wrap .bs-lookup-clear { right: 38px; }
.bs-picter-wrap .bs-lookup-input,
.bs-picter-wrap .bs-input { padding-right: 66px; }

/* Offline and waiting punches on the phone punch screen (docs/96 KIOSK-031). */
.m-card.m-queue { padding: 14px 16px; display: grid; gap: 10px; } .m-card.m-queue p { margin: 0; }

/* ── Web sign-in, two halves (2026-10-16): the product on the left, the form on the right ───── */
.pdks-signin { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 24px; box-sizing: border-box; }
.pdks-signin-hero {
  display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 56px clamp(32px, 6vw, 88px);
  border-radius: 24px; color: #eaf6f3; background: radial-gradient(120% 90% at 0% 0%, #0f6b5d 0%, #0b4a42 45%, #072b27 100%);
}
.pdks-signin-logo { display: flex; align-items: center; gap: 12px; }
.pdks-signin-logo img { width: 52px; height: 52px; padding: 7px; box-sizing: border-box; border-radius: 14px; background: #fff;
  object-fit: cover; object-position: left; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.pdks-signin-logo strong { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; color: #fff; }
.pdks-signin-logo strong span { color: #ff8a1f; }
.pdks-signin-product { margin: 0; font-size: 14px; color: #a8d8cd; letter-spacing: .02em; }
.pdks-signin-hero h2 { margin: 0; max-width: 520px; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; font-weight: 800; letter-spacing: -0.03em; color: #fff; }
.pdks-signin-hero ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; max-width: 480px; }
.pdks-signin-hero li { position: relative; padding-left: 30px; font-size: 15px; color: #d6eee8; }
.pdks-signin-hero li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #2fd29b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23073b33' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.pdks-signin-hero small { margin-top: auto; padding-top: 32px; color: #7fb3a8; font-size: 12px; }
.pdks-signin > .pdks-signin-card { align-self: center; justify-self: center; margin: 16px; }
/* One logo on a wide screen: the large one on the left. */
.pdks-signin .pdks-signin-card .pdks-login-brand { display: none; }
@media (max-width: 900px) {
  .pdks-signin { grid-template-columns: 1fr; min-height: auto; padding: 0; }
  .pdks-signin .pdks-signin-card .pdks-login-brand { display: flex; }
  .pdks-signin-hero { display: none; }
  .pdks-signin > .pdks-signin-card { width: auto; justify-self: stretch; margin: 16px; box-sizing: border-box; }
}

/* The sign-in's own layout (SignInLayout, 2026-10-16): no sidebar, the language switch top right. */
.pdks-signin-shell { position: relative; min-height: 100vh; background: var(--bs-color-bg, #f3f7f6); }

/* The sign-in's <main> is a landmark only: it must not become a layout box. */
.pdks-signin-main {
    display: contents;
}
.pdks-signin-locales { position: absolute; top: 20px; right: 24px; z-index: 2; }
@media (max-width: 900px) { .pdks-signin-locales { position: static; justify-content: flex-end; padding: 12px 16px 0; } }

/* docs/97 D3, SPL-015: a support session is visible on every screen it reaches. */
.pdks-support-band {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: .5rem 1rem;
    background: #fff2df;
    color: #a85c0b;
    border-bottom: 2px solid #a85c0b;
    font-weight: 600;
    text-align: center;
}