/* ==========================================================================
   Auftragstafel — Custom App Styles (ownstyle.css)
   ==========================================================================
   Place styles here that extend the MudBlazor theme.
   Use var(--mud-palette-*) for standard MudBlazor tokens.
   Use var(--x-mud-palette-*) for app-specific semantic colors.
   Always define both :root (light) and .mud-theme-dark (dark) variants.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom App Tokens (--x-mud-palette-*)
   -------------------------------------------------------------------------- */
:root {
  --x-mud-palette-text-subtle: #666666;
  --x-mud-palette-card-border-radius: 8px;
}

.mud-theme-dark {
  --x-mud-palette-text-subtle: #9e9e9e;
}

/* --------------------------------------------------------------------------
   AppBar
   -------------------------------------------------------------------------- */
.app-bar-border {
  border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}

.app-title {
  white-space: nowrap;
}

.app-user-chip {
  color: var(--mud-palette-appbar-text) !important;
  border-color: currentColor !important;
}

.app-shell {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.app-main-content {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.app-page-content {
  flex: 1 0 auto;
}

.app-footer {
  position: static;
  display: flex;
  min-height: 48px;
  flex: 0 0 auto;
  align-items: center;
  margin-inline: -16px;
  padding: 8px 24px;
  border-top: 1px solid var(--mud-palette-lines-default);
  background: var(--mud-palette-surface);
  color: var(--mud-palette-text-primary);
}

/* --------------------------------------------------------------------------
   Sidebar Drawer
   -------------------------------------------------------------------------- */
.sidebar-drawer {
  border-right: 1px solid var(--mud-palette-lines-default) !important;
}

.sidebar-home-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px;
  border-radius: 8px;
}

.sidebar-home-link:focus-visible {
  outline: 2px solid var(--mud-palette-primary);
  outline-offset: -2px;
}

.sidebar-logo {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.public-home-logo {
  object-fit: contain;
}

@media (max-width: 600px) {
  .subscription-scenario-table .mud-table-cell {
    white-space: nowrap;
  }

  .subscription-scenario-table .mud-table-cell::before {
    white-space: normal;
  }
}

/* Mini drawer collapsed: hide NavGroup children, expand arrows, and link text */
.mud-drawer--closed .mud-collapse-container {
  display: none !important;
}

.mud-drawer--closed .mud-nav-link-expand-icon {
  display: none !important;
}

.mud-drawer--closed .mud-nav-link .mud-nav-link-text {
  display: none !important;
}

.mud-drawer--closed .mud-navmenu.pa-2 {
  padding: 8px 4px !important;
}

/* --------------------------------------------------------------------------
   Search Field (in AppBar)
   -------------------------------------------------------------------------- */
.search-field .mud-input-outlined .mud-input-outlined-border {
  border-color: transparent;
}

.search-field .mud-input-outlined:hover .mud-input-outlined-border {
  border-color: var(--mud-palette-lines-default);
}

.search-field .mud-input {
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Auth Pages (centered card layout)
   -------------------------------------------------------------------------- */
.auth-wrapper {
  min-height: calc(100vh - 120px);
}

.auth-card {
  max-width: 500px;
  width: 100%;
  border-radius: 16px;
}

.auth-icon {
  font-size: 4rem !important;
}

.font-semibold {
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   CRM — toolbars, boards and quote layout
   -------------------------------------------------------------------------- */

/* A filter bar that becomes a stack on small screens instead of overflowing. */
.crm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.crm-toolbar-grow {
  flex: 1 1 240px;
  min-width: 180px;
}

.crm-toolbar-select {
  flex: 0 1 180px;
  min-width: 150px;
}

.crm-toolbar-switch {
  flex: 0 0 auto;
  margin: 0;
}

/* Long free-text columns must truncate rather than force the table wider than the viewport. */
.crm-table .mud-table-cell {
  max-width: 320px;
}

.crm-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

/* Label/value pairs inside a detail card. */
.crm-field-label {
  color: var(--mud-palette-text-secondary);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crm-field + .crm-field {
  border-top: 1px solid var(--mud-palette-lines-default);
  padding-top: 8px;
  margin-top: 8px;
}

/* Pipeline board (BT-BlazorComponentLibrary MudKanbanBoard).

   The overflow-x workaround that stood here is gone with 0.20.0: the board now renders its own
   wrapper, so its scoped rule reaches an element that carries the attribute.  */

/* Eight stages at the library's default 360px do not fit any laptop. Narrower columns keep three to
   four stages in view; the rest is one scroll away. Wins the tie against the component's scoped
   value because ownstyle.css is linked after the scoped bundle. */
.crm-pipeline .mud-kanban-board {
  --kanban-col-min: 300px;
  --kanban-col-max: 360px;
}

/* The card body is host content, so it follows the page's reading direction, not the board's. */
.crm-card {
  text-align: left;
}

/* The board header squeezes search, archive switch and the primary action into one half-width
   column. It does not wrap, so at narrower widths the action was clipped mid-word. Let it wrap and
   the button moves to a second line intact instead. */
.crm-pipeline .mud-kanban-board .mud-grid-item.d-flex {
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* Quote line items stacked on a phone.
   A stacked MudTable cell is a flex row of label and value. Without min-width:0 the value keeps its
   min-content width, so one long article description pushes the whole row wider than the screen and
   the amounts end up off to the right, out of view.

   Only below the table's own stacking breakpoint (md): as a real table, overflow-wrap:anywhere lets
   the browser break words at any character, which collapses the columns to their narrowest possible
   width and shreds the headers into "Rab att" and "Einzelprei s". */
@media (max-width: 959.98px) {
  .crm-line-table .mud-table-cell,
  .crm-line-table .mud-table-cell > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* The row label is the ::before of the same flex row and inherits MudBlazor's
     overflow-wrap:anywhere. Once the value is allowed to fill the row, the label gets squeezed to
     45px and breaks mid-word — "Beschr / eibung". It keeps its width; the value yields instead. */
  .crm-line-table .mud-table-cell::before {
    flex-shrink: 0;
    overflow-wrap: normal;
    padding-right: 12px;
  }
}

/* The article text is one block, not four flex columns. */
.crm-line-description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* Amounts read as one figure, so they must not break mid-number — but only where there is room. */
@media (min-width: 960px) {
  .crm-amount {
    white-space: nowrap;
  }
}

/* The map fills what is left of the viewport rather than a guessed pixel height. */
.crm-map-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 1280px) {
  .crm-map-shell {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

.crm-map-list {
  max-height: 520px;
  overflow-y: auto;
}

/* --------------------------------------------------------------------------
   Utility: cursor pointer for clickable non-button elements
   -------------------------------------------------------------------------- */
.cursor-pointer {
  cursor: pointer;
}

@media (max-width: 959.98px) {
  .app-title {
    display: none;
  }
}

@media (max-width: 599.98px) {
  .app-user-label,
  .app-fullscreen-button,
  .main-footer-copyright,
  .main-footer-craft {
    display: none;
  }

  .app-user-chip {
    min-width: 36px;
    padding-inline: 7px;
  }

  .app-user-chip .mud-icon-root {
    margin-right: 0 !important;
  }

  .main-footer-links {
    margin-inline: auto;
  }
}

/* Status breakdown as a filter row under the toolbar. Replaces the KPI tile band that used to sit
   above these tables: same numbers, a quarter of the height, and clicking one narrows the list. */
.crm-filterchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--mud-palette-lines-default);
}

/* Quote totals. The markup carried these class names from the start but no rule ever matched them,
   so net, tax and grand total rendered as three plain lines of running text under the positions.
   A total column belongs under the amounts it sums, right-aligned and narrow enough to scan. */
.crm-quote-totals {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: auto;
  max-width: 320px;
}

.crm-quote-total-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 0.875rem;
}

.crm-quote-total-row > span:last-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.crm-quote-total-row--grand {
  border-top: 1px solid var(--mud-palette-lines-default);
  margin-top: 4px;
  padding-top: 8px;
  font-size: 1.0625rem;
  font-weight: 600;
}

/* On a phone the positions stack into cards; a right-aligned summary column would then float
   against nothing. Let it use the full width there. */
@media (max-width: 599.98px) {
  .crm-quote-totals {
    max-width: none;
  }
}

/* Start page. The flow strip is an ordered list on purpose: the steps have an order, a screen reader
   should say so, and the arrows are decoration that CSS can add without polluting the markup. */
.home-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-flow li {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Trailing arrow, not leading: when the strip wraps on a phone, a line that starts with an arrow
   reads as a bullet. Putting it after the step keeps every new line starting with a word. */
.home-flow li:not(:last-child)::after {
  content: "→";
  color: var(--mud-palette-text-secondary);
}

.home-flow a {
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.875rem;
  color: var(--mud-palette-text-primary);
  text-decoration: none;
}

.home-flow a:hover,
.home-flow a:focus-visible {
  border-color: var(--mud-palette-primary);
  color: var(--mud-palette-primary);
}

/* The whole card is the link — one target instead of a card plus a button repeating it. */
.home-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  color: inherit;
  text-decoration: none;
}

.home-card:hover {
  background-color: var(--mud-palette-action-default-hover);
}

.subscription-planning-steps {
  margin: 16px 0 0;
  padding-left: 20px;
  color: var(--mud-palette-text-secondary);
}

.subscription-planning-steps li + li {
  margin-top: 8px;
}

/* The board renders its heading unconditionally and defaults it to the literal "Kanban Board". The
   page carries its own title, so the parameter is blanked — this collapses the node that stays
   behind, rather than leaving an empty h5 taking up a line. */
.crm-pipeline .mud-kanban-board .mud-typography-h5:empty {
  display: none;
}

/* --------------------------------------------------------------------------
   Header time tracking (in AppBar)
   --------------------------------------------------------------------------
   These rules are global on purpose, not scoped CSS on the component.

   Two reasons, both verified in the browser. First, `header-time-search` and
   `header-time-type` are handed to MudAutocomplete and MudSelect; those root
   elements belong to the MudBlazor components and carry no scope attribute, so
   a scoped `.header-time-search[b-xxx]` never matches. Second, the dropdown and
   the history menu render inside `.mud-popover-provider` at the end of <body>,
   outside the component entirely, so even `::deep` cannot reach them.

   Without these rules the input text falls back to the theme's dark
   `--mud-palette-text-primary` on the dark AppBar — measured at a contrast ratio
   of 1.01:1, which is text you cannot see while typing. */
.header-time-tracking {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin-left: 16px;
}

.header-time-search {
  width: clamp(240px, 24vw, 380px);
}

/* MudAutocomplete puts the Class on an inner element, so the flex item of this row
   is the .mud-autocomplete wrapper around it. Its min-width defaults to auto, which
   pins the row to its content width — measured, the controls then spilled out of
   their own box and over the icons next to them, by 45px at 360px and 49px at 700px.
   Zero lets the search, and only the search, give way; the elapsed time and the
   stop button keep their full size at every width. */
.header-time-tracking > .mud-autocomplete {
  min-width: 0;
}

.header-time-type {
  width: 145px;
}

/* The input, the select and the search icon sit on the AppBar and must take its
   foreground colour — MudBlazor colours them for a page background. */
.header-time-search .mud-input-root,
.header-time-type .mud-input-root,
.header-time-type .mud-select-input .mud-input-root {
  color: var(--mud-palette-appbar-text) !important;
}

.header-time-search .mud-input-outlined-border,
.header-time-type .mud-input-outlined-border {
  border-color: color-mix(
    in srgb,
    var(--mud-palette-appbar-text) 35%,
    transparent
  ) !important;
}

.header-time-search:hover .mud-input-outlined-border,
.header-time-type:hover .mud-input-outlined-border {
  border-color: color-mix(
    in srgb,
    var(--mud-palette-appbar-text) 60%,
    transparent
  ) !important;
}

.header-time-search .mud-input-adornment,
.header-time-search .mud-input-adornment .mud-icon-root,
.header-time-type .mud-input-adornment,
.header-time-search .mud-input-root::placeholder {
  color: color-mix(
    in srgb,
    var(--mud-palette-appbar-text) 70%,
    transparent
  ) !important;
}

.header-time-type-compact {
  display: none;
}

/* Rendered inside the popover provider, outside the component. */
.header-time-result,
.header-time-recent-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.header-time-result-copy {
  flex: 1;
  min-width: 0;
}

.header-time-target-chip {
  min-width: 74px;
  justify-content: center;
  flex-shrink: 0;
}

.header-time-running {
  max-width: 260px;
  cursor: default;
}

.header-time-running-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-time-recent-item {
  min-width: 340px;
}

@media (max-width: 1439.98px) {
  .header-time-type {
    display: none;
  }

  .header-time-type-compact {
    display: inline-flex;
  }

  .header-time-search {
    width: clamp(180px, 22vw, 280px);
  }

  .header-time-running {
    max-width: 200px;
  }
}

/* Narrow screens keep the search, because switching tasks is the whole point of
   the control; the running task collapses to its elapsed time instead. */
@media (max-width: 899.98px) {
  .header-time-tracking {
    margin-left: 4px;
  }

  .header-time-search {
    width: min(38vw, 190px);
  }

  /* The task name goes, the elapsed time stays — that is the part worth reading
     on a phone. Without flex-shrink the chip is crushed to nothing by the search
     field next to it. */
  .header-time-tracking .header-time-running-label {
    display: none;
  }

  .header-time-tracking .header-time-running {
    max-width: none;
    flex-shrink: 0;
  }

  .header-time-tracking .header-time-running strong {
    margin-left: 0 !important;
  }

  .header-time-search {
    min-width: 0;
  }

  .header-time-tracking .header-time-history {
    display: none;
  }
}

/* Below ~600px the AppBar runs out of room once a timer adds its chip and stop
   button: measured, the stop button overlapped the user chip by 27px at 420px.
   The type picker is what gives way — it is chosen before starting and keeps its
   value, whereas search, switch, elapsed time and stop all have to stay reachable
   for the whole point of the control: jumping to the next task. */
@media (max-width: 599.98px) {
  /* On a phone the bar grants this row about 190px. Search, elapsed time and stop
     fit into that; the type picker and the start button do not. Both are safe to
     drop while a timer runs: the type is chosen before starting and keeps its
     value, and every search result carries its own play button, so switching
     tasks stays a two-tap gesture. */
  .header-time-tracking.is-running .header-time-type-compact,
  .header-time-tracking.is-running .header-time-start-control {
    display: none;
  }

  .header-time-search {
    width: min(34vw, 150px);
    min-width: 0;
  }
}