/**
 * CRM admin panel polish for Backpack theme-tabler.
 *
 * Restrained visual refinements layered on top of the Tabler defaults:
 * softer card corners, subtle shadows, nicer table hover, lead-board
 * styling hooks and clearer form focus states. Works in light and dark
 * color modes (data-bs-theme) and does not alter layout geometry.
 */

:root {
    --crm-card-radius: 0.75rem;
    --crm-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.05);
    --crm-card-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.08), 0 8px 20px rgba(15, 23, 42, 0.08);
    --crm-row-hover: rgba(32, 107, 196, 0.06);
}

[data-bs-theme="dark"] {
    --crm-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    --crm-card-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.45);
    --crm-row-hover: rgba(255, 255, 255, 0.05);
}

/* ---------------------------------------------------------------- Cards */

.card {
    border-radius: var(--crm-card-radius);
    box-shadow: var(--crm-card-shadow);
    transition: box-shadow 0.15s ease-in-out;
}

.card:hover {
    box-shadow: var(--crm-card-shadow-hover);
}

.card .card-header {
    border-top-left-radius: var(--crm-card-radius);
    border-top-right-radius: var(--crm-card-radius);
}

/* ------------------------------------------------------------- Tables */

.table > tbody > tr {
    transition: background-color 0.12s ease-in-out;
}

.table > tbody > tr:hover > * {
    background-color: var(--crm-row-hover);
}

.table thead th {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* --------------------------------------------------------- Lead board */

.lead-board {
    padding-top: 0.25rem;
}

.lead-board-column {
    background-color: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, 0.02));
    border-radius: var(--crm-card-radius);
}

.lead-board-column > .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--tblr-border-color, rgba(0, 0, 0, 0.08));
}

.lead-board-column .card-title {
    font-weight: 600;
}

.lead-board-column-body {
    scrollbar-width: thin;
}

.lead-board-column-body.drag-over {
    border-radius: 0.5rem;
}

.lead-card {
    border-radius: 0.5rem;
    box-shadow: var(--crm-card-shadow);
    transition: box-shadow 0.12s ease-in-out, transform 0.12s ease-in-out;
}

.lead-card:hover {
    box-shadow: var(--crm-card-shadow-hover);
    transform: translateY(-1px);
}

.lead-card.dragging {
    box-shadow: none;
}

.lead-card .lead-card-name {
    font-weight: 600;
    line-height: 1.25;
}

/* ------------------------------------------------------- Status badges */

.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 0.375rem;
}

/* ------------------------------------------------------- Form controls */

.form-control:focus,
.form-select:focus {
    border-color: var(--tblr-primary, #206bc4);
    box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.18);
}

.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
    border-color: var(--tblr-border-color-active, rgba(32, 107, 196, 0.4));
}

/* --------------------------------------------------------- Login page */

.page-center .card {
    box-shadow: var(--crm-card-shadow-hover);
}

/* --------------------------------------------- Dashboard clickthroughs */

/* Table rows that behave as links to a filtered list / detail page. */
tr.row-link {
    cursor: pointer;
}

tr.row-link:hover > * {
    background-color: var(--crm-row-hover);
}

/* Whole-card links (stat cards). */
a.card-link {
    display: block;
    text-decoration: none;
}

a.card-link:hover {
    box-shadow: var(--crm-card-shadow-hover);
}

/* Primary dashboard call-to-action (open the lead board). */
.crm-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    box-shadow: var(--crm-card-shadow);
    transition: box-shadow 0.15s ease-in-out, transform 0.12s ease-in-out;
}

.crm-cta:hover {
    box-shadow: var(--crm-card-shadow-hover);
    transform: translateY(-1px);
}

.crm-cta i {
    font-size: 1.15em;
}

/* ------------------------------------------ Form field text contrast */

/*
 * PROBLEM: in edit/create forms the *typed value* of inputs, selects and
 * textareas rendered in almost the same grey as the ::placeholder, so a
 * filled field looked empty — worst in the dark theme.
 *
 * ROOT CAUSE (theme-tabler/resources/assets/css/color-adjustments.css):
 *   - line ~88: dark-mode value color is set to
 *       color: rgba(var(--tblr-body-color-rgb), 0.5);
 *     i.e. the real value is drawn at HALF opacity of the body colour.
 *   - line ~7: the placeholder is drawn at rgba(--tblr-light-text, 0.5).
 *     Value (0.5) and placeholder (0.5) end up visually identical.
 *   - line ~126/174: the select2 single "rendered" value uses
 *       --bp-select2-rendered-color: rgba(var(--tblr-light-text), 0.5);
 *     so the chosen option also looks muted.
 *
 * FIX: restore the VALUE to the full body colour in dark mode while leaving
 * the placeholder muted, so value vs placeholder are clearly distinct.
 * Both --tblr-body-color and --tblr-body-color-rgb are redefined to LIGHT
 * values under [data-bs-theme=dark] (backpack-color-palette.css lines 100/101),
 * so var(--tblr-body-color) is the correct high-contrast colour in dark mode.
 *
 * Specificity note: the theme's dimming rule is [data-bs-theme=dark]
 * input:not(input[type=hidden]).form-control:not(:disabled) => specificity
 * (0,4,2). The rules below use (0,5,1) — five class/attr/pseudo tokens beat
 * the theme's four — so NO !important is needed (the theme rule is not
 * !important). The extra :not([type="hidden"]) is both a specificity lever
 * and a genuine guard against hidden inputs.
 */

/* Editable value text: full body colour, clearly readable. Light mode is
 * unaffected in practice (Tabler's default value colour already equals
 * var(--tblr-body-color)); this simply guarantees it in both themes. */
.form-control:not(:disabled):not([readonly]),
.form-select:not(:disabled):not([readonly]) {
    color: var(--tblr-body-color);
}

/* Dark mode: override the theme's 0.5-opacity dimming (specificity 0,5,1). */
html[data-bs-theme="dark"] .form-control:not(:disabled):not([readonly]):not([type="hidden"]),
html[data-bs-theme="dark"] .form-select:not(:disabled):not([readonly]):not([type="hidden"]) {
    color: var(--tblr-body-color);
}

/* select2 single-select displayed value: restore full contrast in dark mode
 * by overriding the theme's muted variable (same specificity as the theme's
 * html[data-bs-theme=dark] declaration; this file loads later so it wins). */
html[data-bs-theme="dark"] {
    --bp-select2-rendered-color: var(--tblr-body-color);
}

/* Placeholders stay clearly muted so an empty field reads as empty.
 * In LIGHT mode Bootstrap's placeholder is not !important, so this wins by
 * specificity. In DARK mode the theme's own rule
 *   [data-bs-theme=dark] ::placeholder { ... !important }
 * (color-adjustments.css line 8) is already muted and now visually distinct
 * from the full-opacity value, so it is intentionally left in place. */
.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder {
    color: rgba(var(--tblr-secondary-rgb), 0.6);
}

/* select2 placeholder (the "choose..." text before a value is picked).
 * Dark mode already sets --bp-select2-placeholder-color: var(--tblr-muted);
 * this reinforces the muted look in light mode. */
.select2-container--bootstrap .select2-selection__placeholder {
    color: rgba(var(--tblr-secondary-rgb), 0.6);
}

/*
 * NOTE ON MULTI-SELECT CHOICE TAGS
 * .select2-selection--multiple .select2-selection__choice keeps a light
 * (#fff) tag background in dark mode with dark text (--tblr-bg-surface), so
 * chosen tags are already high-contrast. They are deliberately NOT recoloured
 * here: switching their text to the (light) dark-mode body colour would put
 * light text on the white tag and make them unreadable.
 */

/* Disabled / readonly fields: keep them visibly different from active fields
 * but still readable. The theme dims disabled values to 0.3 opacity
 * (--bp-form-disabled-color, color-adjustments.css line 136) which is hard to
 * read; lift it to 0.55. Readonly fields (which are excluded from the
 * full-colour rules above) get 0.75 — clearly readable, subtly de-emphasised.
 */
html[data-bs-theme="dark"] {
    --bp-form-disabled-color: rgba(var(--tblr-body-color-rgb), 0.55);
}

html[data-bs-theme="dark"] .form-control[readonly]:not(:disabled):not([type="hidden"]),
html[data-bs-theme="dark"] .form-select[readonly]:not(:disabled):not([type="hidden"]) {
    color: rgba(var(--tblr-body-color-rgb), 0.75);
}

.form-control[readonly]:not(:disabled),
.form-select[readonly]:not(:disabled) {
    color: rgba(var(--tblr-body-color-rgb), 0.75);
}