/* =========================================================================
   PropertyHub — TELERIK / KENDO THEME LAYER
   -------------------------------------------------------------------------
   Loaded AFTER the stock kendo-theme-default and BEFORE app.css, so Telerik
   components inherit our tokens instead of the theme defaults. Everything
   here is expressed in tokens from tokens.css: no hex belongs in this file
   except where a token cannot express it.
   ========================================================================= */

/* No Kendo colour remapping in light mode (user call, 2026-09-30): form fields,
   their popups, checkboxes and focus states use the stock theme's own colours —
   "Telerik built". The dark theme still maps surface/colour variables in tokens.css,
   because the stock theme has no dark surfaces at all. */

/* ===== Telerik component sizing / polish ===== */
/* Form fields keep the theme's own look (radius, colours, focus). The ONE thing we
   set is a taller inner padding (user call, 2026-09-30: "large height fields") — on
   the shared .k-input-inner, so every field type grows by exactly the same amount
   and the embedded chevron/spinner buttons stretch with it. */
.k-input-md .k-input-inner,
.k-picker-md .k-input-inner {
    padding-block: 8px;
}

/* The Kendo theme hardcodes 14px; rem here makes the fields follow the app's root
   size (and the ku/ar bump) like every other piece of text does. */
.k-input-md, .k-picker-md { font-size: 1rem; }

.k-button { font-size: 0.9rem; }

.k-button-md {
    min-height: 40px;
    padding-block: 8px;
    padding-inline: 16px;
    border-radius: 10px;
    font-weight: 600;
}
.k-button-sm { min-height: 32px; border-radius: 8px; font-weight: 600; padding-inline: 12px; }

/* The chevron / calendar / spinner buttons EMBEDDED IN AN INPUT are part of the
   field, not page buttons: the 40px floor above inflated every combobox to 42px
   and stacked a numeric box's two spinners to 82px beside a 27px textbox, and the
   pill radius bled onto them (measured 2026-09-30). Inside .k-input they size and
   round like the input they live in. */
.k-input .k-button,
.k-picker .k-button {
    min-height: 0;
    border-radius: 0;
    padding-block: 0;
}

/* ---- Buttons -----------------------------------------------------------------
   The Kendo theme gives every button a 1px grey stroke and a flat grey fill, so a
   primary action and a cancel link read as the same weight and the whole toolbar
   looks boxed-in. These give the three roles distinct weight: solid brand for the
   primary action, a quiet tinted surface for secondary, and no chrome at all for
   tertiary — and replace the hard default focus outline with a soft ring. */
.k-button {
    border-width: 1px;
    border-style: solid;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    box-shadow: none;
}

/* Secondary / default — the outlined button.
   Its border used to come from --border-strong, a desaturated blue-grey that has almost
   no contrast against the near-white canvas: the button read as a grey smudge rather than
   as something with an edge. Tinting the border and the hover fill with the brand navy
   gives it a deliberate outline without turning it into a second primary button. */
.k-button-solid-base {
    background: var(--surface);
    border-color: color-mix(in srgb, var(--primary) 26%, transparent);
    color: var(--primary);
    font-weight: 600;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--primary) 8%, transparent);
}
.k-button-solid-base:hover,
.k-button-solid-base.k-hover {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
    border-color: color-mix(in srgb, var(--primary) 42%, transparent);
    color: var(--primary);
}
.k-button-solid-base:active, .k-button-solid-base.k-active {
    background: color-mix(in srgb, var(--primary) 11%, var(--surface));
    box-shadow: none;
}

/* Primary */
.k-button-solid-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.k-button-solid-primary:hover, .k-button-solid-primary.k-hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* Destructive */
.k-button-solid-error {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}
.k-button-solid-error:hover, .k-button-solid-error.k-hover { filter: brightness(.94); }

/* Confirming something happened: a viewing kept, a payment taken. Teal, because the
   palette carries no positive colour of its own and this is the one the design system
   names for it. Without this mapping Kendo's stock green comes through, which belongs to
   no part of the palette. */
.k-button-solid-success {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}
.k-button-solid-success:hover, .k-button-solid-success.k-hover { filter: brightness(.94); }

/* Informational / edit */
.k-button-solid-info {
    background: var(--primary-soft);
    border-color: transparent;
    color: var(--primary);
}
.k-button-solid-info:hover, .k-button-solid-info.k-hover { background: var(--primary); color: #fff; }

/* Tertiary: no box at all, so "cancel" stops competing with "save". */
.k-button-flat {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}
.k-button-flat:hover { background: var(--surface-3); color: var(--text-primary); }

/* One soft ring for keyboard focus instead of the theme's hard outline. */
.k-button:focus, .k-button.k-focus, .k-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
}

.k-button:disabled, .k-button.k-disabled { opacity: .5; box-shadow: none; }

/* Grid row actions sit inside dense cells and should not look like page-level buttons. */
.k-grid .k-button-sm { font-size: .78rem; }

/* Windows / dialogs: stock Telerik chrome, untouched (user call, 2026-09-30 —
   "not rounded, not styled"). Only the responsive sizing in app.css applies. */

/* Grid: airier rows, cleaner header */
.k-grid { border-radius: var(--radius); font-size: 0.875rem; overflow: hidden; }
.k-grid .k-table-th, .k-grid th.k-header {
    font-weight: 700;
    background: var(--surface-2);
    padding-block: 12px;
}
.k-grid td { padding-block: 11px; }
.k-grid .k-table-row:hover td { background: var(--surface-2); }

/* Charts inherit the app font */
.k-chart, .k-chart text { font-family: var(--font-sans) !important; }

/* =========================================================================
   V4 — COMPONENT COVERAGE THE STOCK THEME STILL OWNED
   Everything above was moved here verbatim from app.css (buttons, inputs,
   grid, window, chart font). What follows closes the gaps D1 calls out:
   Dialog, DatePicker/Calendar, Notification, TabStrip, Tooltip, plus the
   TreeView / Upload / Scheduler that CLAUDE.md lists as in use.

   Note: a few Telerik rules still live in app.css inside media queries and
   in the ComboBox/focus sections. They were left in place on purpose —
   lifting rules out of their @media blocks would have changed behaviour for
   no gain. D2 folds them in as it refactors the pages that need them.
   ========================================================================= */

/* Kendo's own radius scale stays untouched — mapping it onto the app's large radii
   is what over-rounded every input (user call, 2026-09-30). Cards and dialogs get
   their radius from their explicit rules, not from these variables. */

/* Dialog and overlay: stock. */

/* ---- TabStrip -----------------------------------------------------------
   Coral is the app's selection colour (active nav, active tab), so the tab
   underline is the one place the accent belongs in Telerik chrome. The stock
   theme draws a full box around the active tab, which fights the card it
   usually sits in. */
.k-tabstrip-items-wrapper { border-color: var(--border); }
.k-tabstrip-items .k-item {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    padding: .7rem 1rem;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.k-tabstrip-items .k-item:hover { color: var(--text-primary); }
.k-tabstrip-items .k-item.k-active {
    color: var(--text-primary);
    background: transparent;
    border-bottom-color: var(--accent);
}
.k-tabstrip > .k-content {
    border: none;
    background: transparent;
    padding: var(--space-4) 0 0;
}

/* ---- Notification -------------------------------------------------------
   Toasts arrive from the realtime layer, so they are the one component a
   user sees without asking for it. They get the card treatment, and their
   status colours come from the app tokens rather than Kendo's own palette. */
.k-notification {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    padding: .7rem .9rem;
    font-size: var(--text-sm);
}
.k-notification-success { background: var(--success); color: #fff; border-color: transparent; }
.k-notification-error   { background: var(--danger);  color: #fff; border-color: transparent; }
.k-notification-warning { background: var(--warning); color: var(--accent-on); border-color: transparent; }
.k-notification-info    { background: var(--primary); color: #fff; border-color: transparent; }

/* ---- Tooltip ------------------------------------------------------------ */
.k-tooltip {
    background: var(--primary-dark);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    padding: .4rem .6rem;
    box-shadow: var(--shadow-md);
    border: none;
}
.k-callout { color: var(--primary-dark); }

/* ---- Calendar / DatePicker popup ---------------------------------------
   The picker input was already styled; the popup it opens was not, so
   choosing a date dropped the user into the stock theme mid-task. */
.k-calendar {
    border-radius: var(--radius-sm);
    border-color: var(--border);
    background: var(--surface);
}
.k-calendar .k-calendar-td.k-selected .k-link {
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-sm);
}
.k-calendar .k-calendar-td.k-today .k-link {
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
    border-radius: var(--radius-sm);
}
.k-calendar .k-calendar-td:hover .k-link { background: var(--surface-2); border-radius: var(--radius-sm); }
.k-calendar .k-calendar-caption, .k-calendar .k-calendar-th { color: var(--text-secondary); font-weight: 600; }

/* ---- TreeView, Upload, Scheduler ---------------------------------------
   Listed in CLAUDE.md as in use. Minimal, token-driven coverage so they do
   not arrive looking like a different product when a page first needs them. */
.k-treeview .k-treeview-leaf.k-selected { background: var(--accent-soft); color: var(--text-primary); }
.k-treeview .k-treeview-leaf:hover:not(.k-selected) { background: var(--surface-2); }

.k-upload { border-radius: var(--radius-sm); border-color: var(--border); background: var(--surface); }
.k-upload-status, .k-upload .k-file-name { color: var(--text-secondary); }
.k-dropzone { background: var(--surface-2); }

.k-scheduler { border-radius: var(--radius); border-color: var(--border); overflow: hidden; }
.k-scheduler .k-event { background: var(--accent); color: var(--accent-on); border: none; border-radius: 6px; }
.k-scheduler .k-today { background: var(--accent-soft); }

/* ---- Pager --------------------------------------------------------------
   Shared by every Grid, so it is worth getting right once. */
.k-pager { background: var(--surface); border-color: var(--border); color: var(--text-secondary); }
.k-pager .k-selected { background: var(--primary); color: #fff; border-radius: var(--radius-sm); }

/* ---- Chart labels -------------------------------------------------------
   The font was already forced; the colour was not, so axis text stayed near
   black in dark mode and vanished. */
.k-chart text { fill: var(--text-secondary); }