/*
 * AlfionAMS Theme
 * CSS custom-property structure ported from SmogWeb (the MECHANISM only, not its green
 * palette - see docs/UI_GRID_FORM_PATTERNS.md). Keeps the current brand color (the admin
 * template's stock blue, #556ee6) but gives DevExtreme components - which the Bootstrap
 * admin template does not theme at all - and a few shared UI classes a single place to
 * read brand color from. Change --ams-primary here to re-brand the whole app later.
 */

:root {
    --ams-primary: #556ee6;
    --ams-primary-subtle: rgba(85, 110, 230, 0.1);
    --ams-primary-subtle-border: rgba(85, 110, 230, 0.2);
    --ams-primary-hover-row: rgba(85, 110, 230, 0.05);
}

/* Card header variant (mechanism from SmogWeb's card-header-dark-green) */
.card-header-primary {
    background-color: var(--ams-primary-subtle);
    border-bottom: 1px solid var(--ams-primary-subtle-border);
    color: var(--ams-primary);
}

/* Tab badge counters, e.g. Details-page sub-tab record counts */
.badge-count {
    background-color: var(--ams-primary) !important;
    color: #fff;
}

.badge-count-muted {
    background-color: #e9ecef !important;
    color: #6c757d;
}

/* ===== DevExtreme grid theming (not covered by the Bootstrap admin template) ===== */
.dx-datagrid-headers {
    background-color: var(--ams-primary-subtle) !important;
}

.dx-datagrid-headers .dx-datagrid-text-content {
    color: var(--ams-primary) !important;
    font-weight: 600 !important;
}

.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td {
    background-color: var(--ams-primary-subtle) !important;
}

.dx-datagrid-rowsview .dx-row:not(.dx-row-focused):hover > td {
    background-color: var(--ams-primary-hover-row) !important;
}

/* Native browser scrollbar - only takes effect on grids that opt into
   scrolling.mode:"virtual"/"infinite" with useNative:true (see docs/UI_GRID_FORM_PATTERNS.md §9:
   useNative must be explicit, "auto" falls back to a simulated scrollbar this CSS hides). */
.dx-datagrid .dx-scrollable-container {
    overflow: auto !important;
}

.dx-datagrid .dx-scrollable-scrollbar {
    display: none !important;
}

.dx-datagrid .dx-scrollable-container::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

.dx-datagrid .dx-scrollable-container::-webkit-scrollbar-track {
    background: #f5f5f5;
}

.dx-datagrid .dx-scrollable-container::-webkit-scrollbar-thumb {
    background-color: rgba(85, 110, 230, 0.5);
    border: 2px solid #f5f5f5;
    border-radius: 7px;
}

.dx-datagrid .dx-scrollable-container::-webkit-scrollbar-corner {
    background: #f5f5f5;
}

/* ===== Form styling (ported from SmogWeb smogweb-theme.css "FORM INPUT BACKGROUNDS"
   + form-label rules; colors swapped to the AMS palette) =====
   Goal: labels and editable fields must be clearly distinguishable - labels use the same
   small-caps language as detail-page .dv-label, inputs get a subtle brand-tinted
   background that turns white on focus. */

/* Form labels - SmogWeb-style: normal case, dark and readable (the previous 11px
   uppercase muted look read as "faded" on edit forms) */
.form-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: #343a46;
    margin-bottom: .2rem;
}

/* Compact form rows + slightly shorter inputs (ported 1:1 from SmogWeb
   smogweb-theme.css "COMPACT DETAIL & EDIT PAGES" block) */
.card {
    margin-bottom: 0.75rem !important;
}

.card-header {
    padding: 0.5rem 1rem !important;
}

.card-header h5 {
    font-size: 0.9rem !important;
}

.card-body {
    padding: 0.75rem 1rem !important;
}

.card-body .form-label {
    margin-bottom: 0.15rem !important;
}

.card-body .mb-3 {
    margin-bottom: 0.5rem !important;
}

/* Equal-height card rows (dashboard KPI rows): the card fills its column and the
   0.75rem vertical gap moves from the card to the column, so side-by-side cards
   keep the same bottom edge regardless of content height. */
.row-equal-cards > [class*="col"] {
    margin-bottom: 0.75rem;
}

.row-equal-cards > [class*="col"] > .card {
    height: 100%;
    margin-bottom: 0 !important;
}

.dx-texteditor .dx-texteditor-input {
    min-height: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.form-control {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}

/* Input backgrounds: subtle brand tint so fields stand out from the page */
.form-control,
.form-select,
.dx-texteditor-input,
.dx-textarea .dx-texteditor-input {
    background-color: var(--ams-primary-subtle) !important;
}

.dx-texteditor.dx-editor-outlined {
    background-color: var(--ams-primary-subtle) !important;
}

/* Editor value text: dark for readability on the tinted background */
.form-control,
.form-select,
.dx-texteditor-input {
    color: #212529 !important;
}

/* Focused field: white background + brand-colored border */
.form-control:focus,
.form-select:focus {
    background-color: #fff !important;
    border-color: var(--ams-primary) !important;
    box-shadow: 0 0 0 0.15rem var(--ams-primary-subtle) !important;
}

.dx-state-focused .dx-texteditor-input,
.dx-state-focused.dx-editor-outlined {
    background-color: #fff !important;
}

.dx-texteditor.dx-state-focused::after,
.dx-dropdowneditor.dx-state-focused .dx-texteditor-input-container::after {
    border-color: var(--ams-primary) !important;
}

/* Placeholders: italic + muted, clearly different from a real value */
.form-control::placeholder,
.form-select::placeholder {
    font-style: italic;
    color: #a0a0a0 !important;
    opacity: 1;
    font-size: 0.95em;
}

.dx-placeholder::before {
    font-style: italic !important;
    color: #a0a0a0 !important;
    font-size: 0.95em !important;
}

/* Vertical centering fix: shortening the editor's vertical padding (above) breaks
   DevExtreme's ::before/::after vertical-align trick and the placeholder sinks to the
   bottom - SmogWeb solves it by making the placeholder a flex container.
   GOTCHA: must stay scoped with :not(.dx-state-invisible). DevExtreme hides the
   placeholder of a non-empty editor by adding dx-state-invisible (display:none!important,
   same specificity); an unscoped `display:flex!important` here loads later, wins, and
   resurrects the placeholder ON TOP of the value in every pre-filled edit form. */
.dx-placeholder:not(.dx-state-invisible) {
    display: flex !important;
    align-items: center !important;
}

/* ===== Grid filter row (column search) =====
   Keep it white: the brand input tint above turns filter-row editors into blue bars
   that don't fill the cell (white bands above/below the blue). Also restore
   DevExtreme's stock input metrics (7/8px padding, 34px min-height) - the compact
   4px padding above pushes the typed text out of line with the magnifier icon.
   Placed after the tint/compact rules on purpose: same specificity, later wins. */
.dx-datagrid-filter-row .dx-texteditor.dx-editor-outlined,
.dx-datagrid-filter-row .dx-texteditor-input {
    background-color: transparent !important;
}

.dx-datagrid-filter-row .dx-texteditor-input {
    min-height: 34px !important;
    padding-top: 7px !important;
    padding-bottom: 8px !important;
}

/* ===== Priority picker (segmented 4-level selector, replaces raw number input) =====
   Levels: 1 Low (gray) / 2 Normal (blue) / 3 High (orange) / 4 Urgent (red).
   Markup: <div class="priority-picker"><button type="button" class="priority-opt" data-priority="1">...</div>
   JS toggles .active on the selected button; colors come from data-priority. */
.priority-picker {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.priority-picker .priority-opt {
    border: 1px solid #ced4da;
    background: #fff;
    color: #74788d;
    border-radius: 4px;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}

.priority-picker .priority-opt:hover {
    background: #f8f9fa;
}

.priority-picker .priority-opt[data-priority="1"].active { background: #74788d; border-color: #74788d; color: #fff; }
.priority-picker .priority-opt[data-priority="2"].active { background: #50a5f1; border-color: #50a5f1; color: #fff; }
.priority-picker .priority-opt[data-priority="3"].active { background: #f1b44c; border-color: #f1b44c; color: #fff; }
.priority-picker .priority-opt[data-priority="4"].active { background: #f46a6a; border-color: #f46a6a; color: #fff; }

/* Priority badge for grids/detail views - same palette */
.priority-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: #74788d;
}

.priority-badge[data-priority="2"] { background: #50a5f1; }
.priority-badge[data-priority="3"] { background: #f1b44c; }
.priority-badge[data-priority="4"] { background: #f46a6a; }

/* ===== Searchable multi-user checkbox picker (replaces oversized dxTagBox on
   group edit pages; pattern adapted from SmogWeb PermissionTemplate checkbox grid) ===== */
.check-picker {
    border: 1px solid #e2e5ec;
    border-radius: 4px;
    background: #fff;
}

.check-picker .check-picker-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid #e2e5ec;
    background: var(--ams-primary-subtle);
    border-radius: 4px 4px 0 0;
}

.check-picker .check-picker-toolbar .dx-texteditor {
    flex: 1;
}

.check-picker .check-picker-count {
    font-size: 0.75rem;
    color: var(--ams-primary);
    font-weight: 600;
    white-space: nowrap;
}

.check-picker .check-picker-links {
    white-space: nowrap;
}

.check-picker .check-picker-links a {
    font-size: 0.75rem;
    color: var(--ams-primary);
    text-decoration: none;
    margin-left: 8px;
}

.check-picker .check-picker-body {
    max-height: 220px;
    overflow-y: auto;
    padding: 8px 10px;
}

.check-picker .form-check {
    margin-bottom: 2px;
}

.check-picker .form-check-label {
    font-size: 0.8125rem;
    cursor: pointer;
}

.check-picker .form-check-input {
    cursor: pointer;
}

.check-picker .form-check-input:checked {
    background-color: var(--ams-primary);
    border-color: var(--ams-primary);
}

.check-picker .check-picker-empty {
    color: #8c98a4;
    font-size: 0.8rem;
    padding: 8px 2px;
}

/* ===== Compact page header (ported from SmogWeb site.css) =====
   Replaces the old page-title-box + breadcrumb on every page: a single white bar with
   the page title on the left (h5) and the action buttons / search box on the right. */
.page-header-compact {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #fff;
    padding: 10px 16px;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 16px;
    min-height: 52px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* List pages: grids have their own scroll, no need to stick */
.page-header-compact.no-sticky {
    position: static;
    box-shadow: none;
}

.page-header-compact h5 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #333;
}

/* Header buttons - normal readable size (the old headers used btn-sm, too small) */
.page-header-compact .btn {
    padding: 0.4rem 0.85rem;
    font-size: 0.875rem;
}

.page-header-compact .btn i {
    font-size: 1rem;
    line-height: 1;
    vertical-align: text-bottom;
}

/* ===== Detail (read-only) view pages: Activity/View, Asset/View, User/Details =====
   Wrap the page content in <div class="detail-view">. The admin template's 13px body
   font made these pages look shrunken next to the sidebar; labels are restyled to match
   the sidebar group-header language (small caps, muted) and values are bumped to 14px. */
.detail-view {
    font-size: 14px;
}

.detail-view .card-title {
    font-size: 15px;
}

/* Field label - one shared look for the markup variants used across detail pages
   (SmogWeb reference: label.text-muted.small - tiny caps, light gray, weight 500) */
.detail-view .dv-label,
.detail-view small.text-muted.d-block,
.detail-view .form-label.fw-bold {
    display: block;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #8c98a4;
    margin-bottom: .2rem;
}

/* Field value - SmogWeb-style emphasized chip: bold, dark, subtle brand-tinted background.
   The sibling selectors cover existing markup (value element right after its label)
   so pages don't need a class on every value; .dv-value is for JS-built content. */
.detail-view .dv-value,
.detail-view .dv-label + div:not(.row):not(.border):not(.position-relative),
.detail-view .dv-label + span,
.detail-view .dv-label + p,
.detail-view small.text-muted.d-block + span,
.detail-view small.text-muted.d-block + div,
.detail-view .form-label.fw-bold + p,
.detail-view .form-label.fw-bold + div {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #343a46;
    background-color: var(--ams-primary-subtle);
    border-radius: 4px;
    padding: .25rem .5rem;
    min-height: 1.85rem;
    margin-bottom: 0;
}

/* Status/priority chips and tab labels scale with the page */
.detail-view .badge {
    font-size: 12px;
}

.detail-view .nav-tabs .nav-link {
    font-size: 14px;
}

/* Header-filter popup width fix - long value lists get clipped at the default width */
.dx-header-filter-menu .dx-overlay-content {
    width: auto !important;
    min-width: 260px;
    max-width: 560px;
}

.dx-header-filter-menu .dx-list-item-content,
.dx-header-filter-menu .dx-treeview-item-content span,
.dx-header-filter-menu .dx-treeview-item span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
}