/* Revenue-share pages. The shell (sidebar, top bar, cards, dialogs) is BeanHub's Black Office styles.css. */
.negative-amount, .negative-amount strong { color: var(--danger-text); }
.share-history { margin: 8px 0 0; padding: 0; list-style: none; }
.share-history li { padding: 12px 0; border-bottom: 1px solid var(--soft-border); font-size: 13px; }
.share-history li:last-child { border-bottom: 0; }
.share-history p { margin: 4px 0 0; color: var(--muted-foreground); overflow-wrap: anywhere; }

/* Visually hidden labels (position: absolute) in table headers stay inside the scrolling box on phones. */
.table-wrap { position: relative; }
.share-table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 0; }
.share-table-tools .search-wrap { flex: 1 1 260px; max-width: 420px; }
.share-table-tools .status-tabs { margin: 0; }
.share-category-tools { padding-top: 12px; padding-bottom: 12px; }
.share-category-tools .status-tab { min-height: 32px; font-size: 13px; }
/* A column heading that sorts its table: the mark shows the direction, faint until the column is chosen. */
.th-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.th-sort span { font-size: 10px; opacity: .45; }
.th-sort:hover, .th-sort.active { color: var(--primary-text); }
.th-sort.active span { opacity: 1; }
/* The defaults in one line above the provider list. */
.share-defaults-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 20px; border-bottom: 1px solid var(--soft-border); font-size: 13px; }
.share-defaults-bar strong { font-size: 14px; font-weight: 500; }
.share-defaults-bar label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-foreground); white-space: nowrap; }
.share-defaults-bar input { width: 64px; height: 32px; text-align: right; }
.share-defaults-bar .detail-caption { flex: 1 1 260px; margin: 0; }
/* The summary's heading holds the period picker on the right; its popover opens towards the page. On a
   phone the popover is a centred box instead (the 639px rule below), so this applies only above that. */
.share-period { align-items: center; }
@media (min-width: 640px) {
  .share-period .month-popover { left: auto; right: 0; }
}
/* [฿ | $] beside the picker: the chosen one is filled; the rate in use follows when dollars are shown. */
.share-currency { display: inline-flex; align-items: center; gap: 10px; }
.share-currency .button.active { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
.share-currency .text-link { font-size: 13px; font-variant-numeric: tabular-nums; }
.share-currency .text-link:disabled { color: var(--muted-foreground); cursor: default; text-decoration: none; }
/* "฿ + $": the dollars of an amount, under it in a table and beside it elsewhere. */
.share-usd { margin-left: 4px; color: var(--muted-foreground); font-size: .85em; font-weight: 400; font-variant-numeric: tabular-nums; }
/* Under the baht in a cell, the same size as a table cell's note (.share-table td small). */
td .share-usd, th .share-usd { display: block; margin: 2px 0 0; font-size: 12px; }
/* What the period still needs, step by step: where each stands and the buttons that move it on. */
.share-steps { margin-bottom: 16px; }
/* One row of equal steps; the 1px gaps over the list's own colour draw the lines between them however they wrap. */
.share-steps ol { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--soft-border); }
.share-step { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 16px 18px; background: var(--card); }
.share-step > div { min-width: 0; }
.share-step strong { display: block; margin: 3px 0 4px; font-size: 14px; font-weight: 500; }
.share-step p { margin: 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.share-step .button-row { margin-top: 10px; }
.share-step.next { background: var(--soft-primary); }
@media (max-width: 1240px) {
  /* Two by two; a last step on its own takes the whole row. */
  .share-steps ol { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .share-step:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.share-step.next .step-num { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
.share-step.done strong { color: var(--success-text); }
.share-step .step-num svg { width: 14px; height: 14px; }
.share-step-note { color: var(--warning-text); }
/* Settings lists keep the name column to its content's size, so the figures sit near the name they belong to. */
.share-settings-table th:first-child, .share-settings-table td:first-child { width: 30%; }
.share-settings-table th:nth-child(2), .share-settings-table td:nth-child(2) { width: 16%; }
.share-settings-table th.align-right, .share-settings-table td.align-right { width: 12%; }
.share-settings-table .row-actions { justify-content: flex-end; }

/* Summary at a glance: win/loss − the agents' share = collected from the agents, then who the collected money goes to. */
.share-overview { --part-upstream: var(--violet); --part-system: var(--blue); --part-partner: var(--amber); }
.share-equation { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.15fr); align-items: stretch; gap: 12px; padding: 20px; }
.share-figure { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 14px 16px; border: 1px solid var(--soft-border); border-radius: 10px; background: var(--soft-muted); }
.share-figure > span { color: var(--muted-foreground); font-size: 13px; }
.share-figure > strong { font-size: 24px; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.share-figure > small { color: var(--muted-foreground); font-size: 12px; line-height: 1.5; }
.share-figure.collect { border-color: color-mix(in srgb, var(--primary) 35%, var(--card)); background: var(--soft-primary); }
.share-figure.collect > span { color: var(--primary-text); font-weight: 500; }
.share-operator { align-self: center; color: var(--muted-foreground); font-size: 22px; line-height: 1; }
.share-split { padding: 16px 20px 20px; border-top: 1px solid var(--soft-border); }
.share-split > p { margin: 0 0 10px; color: var(--muted-foreground); font-size: 12px; }
/* The shell's icon rule strokes every svg; the bar is filled blocks only. */
.share-bar { display: block; width: 100%; height: 8px; margin-bottom: 14px; border-radius: 999px; overflow: hidden; stroke: none; }
.share-bar .part-upstream, .share-dot.part-upstream { fill: var(--part-upstream); background: var(--part-upstream); }
.share-bar .part-system, .share-dot.part-system { fill: var(--part-system); background: var(--part-system); }
.share-bar .part-partner, .share-dot.part-partner { fill: var(--part-partner); background: var(--part-partner); }
.share-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.share-part { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.share-part > span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted-foreground); font-size: 13px; }
.share-part > strong { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.share-part > small { color: var(--muted-foreground); font-size: 12px; }
.share-dot { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.share-split > .share-pending { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; color: var(--warning-text); line-height: 1.6; }
.share-pending svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.share-pending strong { font-weight: 500; }
.share-summary-tools { justify-content: space-between; }
.share-detail-toggle { padding-right: 14px; }
.share-table-hint { margin: 0; padding: 10px 20px 12px; color: var(--muted-foreground); font-size: 12px; line-height: 1.7; }
.share-table-hint strong { color: var(--foreground); font-weight: 500; }
.share-group th { height: 34px; background: color-mix(in srgb, var(--primary) 6%, var(--card)); color: var(--foreground); font-size: 12px; font-weight: 500; }
.share-rule { margin-top: 16px; color: var(--muted-foreground); font-size: 12px; line-height: 1.7; }
.share-rule summary { width: fit-content; cursor: pointer; color: var(--primary-text); }
.share-rule ul { margin: 8px 0 0; padding-left: 20px; }
/* The upstream's bill: its lines above the table, the rate box with its lookup. */
.share-invoice-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 16px; padding-bottom: 4px; font-size: 13px; line-height: 1.8; }
.share-invoice-head p { margin: 0; }
.share-invoice-head strong { font-weight: 500; }
.share-invoice-head .status { margin-left: 4px; }
.share-invoice-problems { padding-top: 8px; padding-bottom: 0; }
.share-rate-row { display: flex; gap: 8px; }
.share-rate-row select { flex: 1; min-width: 0; }
.share-rate-row .button { flex: none; }
.share-rest-option { margin-top: 26px; }
/* A choice with a line of explanation under its name. */
.checkbox-line span > small { display: block; color: var(--muted-foreground); font-size: 12px; line-height: 1.5; }
.share-table td, .share-table th { font-variant-numeric: tabular-nums; }
/* A long table scrolls inside its own box: the column names stay on top, the totals at the bottom and the
   first column on the left, so only the figures move. Lines are drawn as shadows because a collapsed
   border does not travel with a sticky cell. */
.share-scroll { --head-height: 40px; max-height: max(360px, calc(100dvh - 190px)); }
dialog .share-scroll { max-height: max(280px, calc(100dvh - 420px)); }
.share-scroll thead th { position: sticky; top: 0; z-index: 3; box-shadow: inset 0 -1px 0 var(--soft-border); }
.share-scroll tfoot th { position: sticky; bottom: 0; z-index: 3; box-shadow: inset 0 1px 0 var(--border); }
.share-scroll .share-group th { position: sticky; top: var(--head-height); z-index: 2; box-shadow: inset 0 -1px 0 var(--soft-border); }
.share-scroll th:first-child, .share-scroll td:first-child { position: sticky; left: 0; }
.share-scroll td:first-child { z-index: 1; background: var(--card); }
.share-scroll thead th:first-child, .share-scroll tfoot th:first-child { z-index: 4; }
.share-scroll tbody tr:hover td:first-child { background: color-mix(in srgb, var(--primary) 4%, var(--card)); }
.share-table td { min-width: 0; }
.share-table td small { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 12px; overflow-wrap: anywhere; }
/* A name and its note on one line (the owner's choice), so every row is one line high. */
.share-line { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.share-table td .share-line small { display: inline; margin-top: 0; overflow-wrap: normal; }
.share-table tfoot th { border-top: 1px solid var(--border); font-weight: 500; }
/* Who gets the system fee and the partner's part. */
.share-tools-fill { flex: 1 1 auto; }
.share-holders-head { padding-top: 16px; padding-bottom: 4px; font-size: 13px; line-height: 2; }
.share-holders-head p { margin: 0; }
.share-holders-head strong { font-weight: 500; }
.share-holders-head .text-link { margin-left: 6px; }
.share-subhead { margin: 0; padding: 18px 20px 10px; border-top: 1px solid var(--soft-border); font-size: 14px; font-weight: 500; }
/* A person's chip is never broken in two; several of them wrap as whole chips. */
.share-table td .chip { display: inline-block; margin: 2px 2px 2px 0; white-space: nowrap; }
.share-partner-link { width: 100%; cursor: pointer; }
.share-partner-link:hover .detail-caption { color: var(--primary-text); text-decoration: underline; }
.share-holder-list { display: grid; gap: 8px; }
.share-holder-row { display: grid; grid-template-columns: minmax(0, 1fr) 88px auto 36px; gap: 8px; align-items: center; }
/* The common list's part set aside for each agent's own partner: a label in place of a name. */
.share-holder-slot { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.share-holder-slot > span:first-child { color: var(--muted-foreground); font-size: 13px; }
.share-holder-slot input { text-align: right; font-variant-numeric: tabular-nums; }
/* A table's hint with its "คอลัมน์" menu on the right. */
.share-table-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding-right: 20px; }
.share-table-bar .share-table-hint { flex: 1 1 320px; }
.share-columns { position: relative; }
.share-columns > summary { cursor: pointer; list-style: none; }
.share-columns > summary::-webkit-details-marker { display: none; }
.share-columns[open] > summary { border-color: var(--primary); color: var(--primary-text); }
.share-columns-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 25; display: grid; gap: 2px; min-width: 220px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--popover); box-shadow: 0 12px 30px rgb(0 0 0 / 22%); }
.share-columns-menu .checkbox-line { min-height: 30px; align-items: center; }
.share-columns-menu .text-link { justify-self: start; margin-top: 4px; font-size: 12px; }
/* How the table's total is added up, under the column ticks. */
.share-columns-total { display: grid; gap: 2px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--soft-border); }
.share-columns-total > span { color: var(--muted-foreground); font-size: 12px; }
/* A % over its limit (guardForm): the box and the line beside the save button turn red. */
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--destructive); box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 18%, transparent); }
.share-guard { margin-right: auto; color: var(--danger-text); font-size: 13px; font-weight: 500; line-height: 1.5; }
.share-defaults-bar .share-guard { flex-basis: 100%; margin-right: 0; }
/* The box around a picture's preview, scrolled when the sheet is long. */
.share-image-preview { max-height: min(62vh, 720px); overflow: auto; margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--soft-muted); }
/* The preview: the picture's white sheet as a page that can be selected and copied, in any theme. It fills
   the box, and a sheet wider than the box scrolls sideways rather than squeezing its columns. */
.share-sheet { width: max-content; min-width: 100%; padding: 22px 24px; border-radius: 6px; background: #ffffff; color: #0f172a; box-shadow: 0 2px 10px rgb(0 0 0 / 18%); font-size: 13px; line-height: 1.5; user-select: text; cursor: text; }
.share-sheet h3 { margin: 0; color: #0f172a; font-size: 18px; font-weight: 600; }
.share-sheet h4 { margin: 18px 0 6px; color: #0f172a; font-size: 14px; font-weight: 600; }
.share-sheet-sub { margin: 4px 0 0; color: #64748b; font-size: 12px; }
.share-sheet table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.share-sheet th, .share-sheet td { padding: 7px 10px; border-bottom: 1px solid #e2e8f0; background: none; color: #0f172a; font-weight: 400; text-align: left; vertical-align: middle; white-space: nowrap; }
.share-sheet thead th { border-bottom: 0; background: #f1f5f9; color: #64748b; font-size: 12px; font-weight: 500; }
.share-sheet tfoot th { border-top: 1px solid #64748b; border-bottom: 0; font-weight: 600; }
.share-sheet .num { text-align: right; }
.share-sheet .bold { font-weight: 600; }
.share-sheet .neg { color: #dc2626; }
.share-sheet .muted { color: #64748b; }
/* A cell's % line is drawn from data-sub: seen, but not part of the text, so a copied row pastes as figures. */
.share-sheet [data-sub]::after { content: attr(data-sub); display: block; color: #64748b; font-size: 11px; font-weight: 400; }
.share-sheet-foot { margin: 14px 0 0; color: #64748b; font-size: 11px; }
.share-sheet ::selection { background: #bfdbfe; color: #0f172a; }
/* รวม · ค่าระบบ · พาร์ทเนอร์ inside the tab of who gets what. */
.share-holder-views { padding-top: 14px; }
.share-holder-row input[name=holderPercent] { text-align: right; font-variant-numeric: tabular-nums; }
.share-holder-row > span { color: var(--muted-foreground); }
/* What upstream handed back, beside what the tool works out. */
.share-rebate { padding-top: 12px; padding-bottom: 12px; border-top: 1px solid var(--soft-border); font-size: 13px; line-height: 1.8; }
.share-rebate-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.share-rebate-head strong { font-size: 14px; font-weight: 500; }
.share-rebate-head .detail-caption { flex: 1 1 240px; margin: 0; }
.share-rebate-row p { margin: 6px 0 2px; }
.share-rebate-row strong { font-weight: 500; }
.share-rebate-row .status { margin-left: 4px; }
.share-rebate-row .table-wrap { margin-top: 8px; border: 1px solid var(--soft-border); border-radius: 10px; }
.share-table td .status { margin: 4px 4px 0 0; }
.share-detail-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.share-detail-head .button-row { flex-wrap: wrap; }
.share-fetch-tools { margin: 16px 0 8px; }
.share-fetch-list { display: grid; gap: 16px; }
.share-fetch-list fieldset { margin: 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; }
.share-fetch-list legend { padding: 0 4px; font-weight: 500; }
.share-fetch-list .checkbox-line { padding: 4px 0; }
.share-fetch-status { margin-left: auto; padding-left: 12px; color: var(--muted-foreground); font-size: 12px; text-align: right; overflow-wrap: anywhere; }
.share-fetch-status.good { color: var(--success-text); }
.share-fetch-status.bad { color: var(--danger-text); }
.share-paste summary { cursor: pointer; color: var(--primary-text); font-size: 13px; }
.share-paste textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.share-manual-head, .share-manual-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
.share-manual-head { margin-top: 16px; color: var(--muted-foreground); font-size: 12px; }
#share-manual-rows { display: grid; gap: 8px; margin-top: 8px; }
.share-manual-row input[name=row-winloss], .share-manual-row input[name=row-bet] { text-align: right; font-variant-numeric: tabular-nums; }
.share-override { width: 96px; text-align: right; }
.share-preview-cell { color: var(--muted-foreground); font-size: 12px; }
.share-offices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 16px; }
.share-office .panel-header p { overflow-wrap: anywhere; }
.share-public-key { display: block; margin-top: 6px; overflow-wrap: anywhere; user-select: all; }
.share-office .agent-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }

@media (max-width: 720px) {
  .share-steps ol { grid-template-columns: minmax(0, 1fr); }
  .share-period { justify-content: stretch; width: 100%; }
  .share-table-tools .search-wrap { max-width: none; }
  .share-equation { grid-template-columns: 1fr; gap: 6px; padding: 16px; }
  .share-operator { justify-self: center; }
  .share-figure > strong { font-size: 21px; }
  .share-parts { grid-template-columns: 1fr; gap: 10px; }
  .share-rest-option { margin-top: 0; }
  /* On a phone the note may drop under the name, so the fixed first column stays narrow. */
  .share-line { flex-wrap: wrap; gap: 0 8px; white-space: normal; }
  .share-manual-head { display: none; }
  .share-manual-row { grid-template-columns: minmax(0, 1fr) 44px; }
  .share-manual-row input[name=row-code] { grid-column: 1 / -1; }
  .share-manual-row input[name=row-winloss], .share-manual-row input[name=row-bet] { grid-column: 1; }
  .share-manual-row .icon-button { grid-column: 2; grid-row: 2; }
  .share-fetch-list .checkbox-line { flex-wrap: wrap; min-height: 44px; }
  .share-fetch-status { flex-basis: 100%; margin-left: 23px; padding-left: 0; text-align: left; }
}
.share-bulk-mode { display: grid; gap: 8px; }
.share-bulk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0 8px; }
.share-bulk-tools .search-wrap { flex: 1 1 240px; }
.share-bulk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 4px 16px; max-height: 340px; overflow: auto; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.share-bulk-list .checkbox-line { align-items: center; min-height: 32px; }
.share-bulk-list .checkbox-line[hidden] { display: none; }
.share-bulk-list small { margin-left: auto; color: var(--muted-foreground); font-size: 12px; white-space: nowrap; }
#bulk-paste, #upstream-json { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* Period picker in Black Office's shape: joined [<][dates][>] buttons, a popover with a column of shortcuts and a calendar. */
.month-field { position: relative; display: inline-flex; }
.button-group { display: inline-flex; }
.button-group > .button { border-radius: 0; }
.button-group > .button + .button { margin-left: -1px; }
.button-group > .button:first-child { border-radius: 10px 0 0 10px; }
.button-group > .button:last-child { border-radius: 0 10px 10px 0; }
.button-group > .button:focus-visible { position: relative; z-index: 1; }
.button.icon-only { width: 36px; padding: 0; }
.month-prev svg { transform: rotate(180deg); }
.month-trigger { min-width: 208px; justify-content: center; font-weight: 400; font-variant-numeric: tabular-nums; }
.month-trigger svg { color: var(--primary-text); }
.month-popover { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: flex; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--popover, var(--card)); box-shadow: 0 16px 40px rgb(0 0 0 / 22%); }
.month-backdrop, .month-popover-footer { display: none; }
.month-shortcuts { display: flex; flex-direction: column; gap: 4px; min-width: 144px; flex: none; padding: 12px 8px; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--muted, var(--soft-muted)) 40%, transparent); }
.month-shortcuts p { margin: 0; padding: 0 8px 4px; color: var(--muted-foreground); font-size: 12px; font-weight: 500; }
.month-shortcut { padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--foreground); font: inherit; font-size: 13px; text-align: left; white-space: nowrap; cursor: pointer; font-variant-numeric: tabular-nums; }
.month-shortcut:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.month-shortcut.active { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 1px 2px rgb(0 0 0 / 12%); }
.month-shortcuts .month-shortcuts-more { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
/* The calendar: 36px day cells; the chosen run is a tinted band whose two ends are filled circles; today has a dot. */
.cal { --cell: 36px; padding: 12px; }
.cal-months { position: relative; display: flex; gap: 16px; }
.cal-month { width: calc(var(--cell) * 7); }
.cal-nav { position: absolute; top: 0; left: 0; z-index: 1; width: var(--cell); height: var(--cell); }
.cal-nav-next { left: auto; right: 0; }
.cal-caption { display: block; width: calc(100% - var(--cell) * 2); height: var(--cell); margin: 0 auto; border: 0; border-radius: 8px; background: transparent; color: var(--foreground); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.cal-caption:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--primary-text); }
.cal-caption:disabled { cursor: default; opacity: .5; }
.cal-weekdays, .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-weekdays { margin-top: 8px; }
.cal-weekdays span { height: 24px; color: var(--muted-foreground); font-size: 12px; font-weight: 500; line-height: 24px; text-align: center; }
.cal-weekdays span:first-child { color: var(--rose); }
.cal-week { margin-top: 4px; }
.cal-cell { display: flex; justify-content: center; height: var(--cell); }
.cal-cell.in-range { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.cal-cell.range-start { border-radius: 999px 0 0 999px; }
.cal-cell.range-end { border-radius: 0 999px 999px 0; }
.cal-cell.range-start.range-end { border-radius: 999px; }
.cal-day { position: relative; width: 100%; max-width: var(--cell); height: var(--cell); padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--foreground); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .15s, color .15s; }
.cal-day:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary-text); }
.in-range .cal-day { color: var(--primary-text); }
.range-start .cal-day, .range-end .cal-day, .range-start .cal-day:hover:not(:disabled), .range-end .cal-day:hover:not(:disabled) { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent); }
.cal-day.today::after { content: ""; position: absolute; bottom: 4px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--primary-text); transform: translateX(-50%); }
.range-start .cal-day.today::after, .range-end .cal-day.today::after { background: var(--primary-foreground); }
.cal-day:disabled { opacity: .35; cursor: not-allowed; }
.cal-hint { margin: 10px 0 0; color: var(--muted-foreground); font-size: 12px; text-align: center; }
@media (max-width: 639px) {
  .month-field { display: flex; width: 100%; }
  .button-group { width: 100%; }
  .month-trigger { flex: 1; min-width: 0; }
  .month-backdrop { display: block; position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / 50%); }
  .month-popover { position: fixed; top: 50%; left: 50%; z-index: 41; flex-direction: column; width: calc(100% - 24px); max-width: 384px; max-height: calc(100dvh - 24px); overflow: auto; border-radius: 16px; transform: translate(-50%, -50%); }
  .month-shortcuts { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; width: auto; padding: 12px; border-right: 0; border-bottom: 1px solid var(--border); }
  .month-shortcuts p { display: none; }
  .month-shortcuts .month-shortcuts-more { display: block; flex-basis: 100%; margin: 0; padding: 6px 0 0; border-top: 0; text-align: center; }
  .month-shortcut { border: 1px solid var(--border); border-radius: 999px; background: var(--card); }
  /* One month, stretched to the box, as Black Office shows it on a phone. */
  .cal-second { display: none; }
  .cal-month { width: 100%; }
  .month-popover-footer { display: block; padding: 8px; border-top: 1px solid var(--border); }
}