/**
 * ITMDesk Custom Theme
 * Modern, clean design with dark mode support
 * Uses CSS variables for seamless theme switching
 */

:root {
    /* Theme Variables - Light Mode */
    --theme-border-radius: var(--radius-lg);
    --theme-card-shadow: var(--shadow-sm);
    --theme-card-shadow-hover: var(--shadow-md);
    --theme-focus-color: var(--primary-color);
    --theme-focus-shadow: var(--focus-ring-primary);
    --theme-btn-font-weight: var(--font-medium);
    --theme-heading-font-weight: var(--font-semibold);
}

/* Dark Mode Theme Variables */
[data-bs-theme="dark"] {
    --theme-card-shadow: var(--shadow-sm);
    --theme-card-shadow-hover: var(--shadow-md);
}

/* ================================================
   Cards - Subtle hover without movement
   ================================================ */
.card {
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-card-shadow);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
    /* Subtle shadow increase, no movement */
    box-shadow: var(--theme-card-shadow-hover);
}

/* ================================================
   Buttons - Consistent styling
   ================================================ */
.btn {
    border-radius: var(--theme-border-radius);
    font-weight: var(--theme-btn-font-weight);
    transition: all 0.2s ease;
}

/* ================================================
   Form Controls - Modern look with custom focus
   ================================================ */
.form-control,
.form-select {
    border-radius: var(--theme-border-radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--theme-focus-color);
    box-shadow: 0 0 0 3px var(--theme-focus-shadow);
}

/* ================================================
   Typography - IBM Plex Sans (body) + IBM Plex Mono (codes/IDs)
   ================================================ */
body,
.swal2-popup,
.tooltip,
.popover {
    font-family: var(--font-sans);
    font-feature-settings: "cv11" 1, "ss01" 1; /* stylistic: disambiguated l/1 */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: var(--theme-heading-font-weight);
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

/* Mono is used for identifiers the user scans: hostnames, UNIQIDs, task IDs,
   IP addresses, version numbers. Tabular numerals so columns align. */
code,
kbd,
samp,
pre,
.mono,
.hostname,
.uniqid,
.task-id,
.ip-address {
    font-family: var(--font-mono);
    font-feature-settings: "zero" 1;
    font-variant-numeric: tabular-nums;
}

/* Override Bootstrap's default pink `<code>` color — reads as shouty in the
   calmer palette. Neutralized with surface-tinted background + body-secondary text. */
code {
    color: var(--text-secondary);
    background: var(--surface-2);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.875em;
}
pre code {
    background: transparent;
    padding: 0;
}

/* Ghost text-action button — replaces Bootstrap .btn-link (underline by default).
   For secondary actions like "Select all", "Clear", "Show more". */
.btn-text-action {
    background: transparent;
    border: 0;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: var(--font-medium);
    color: var(--primary-color);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
    letter-spacing: 0.01em;
}
.btn-text-action:hover,
.btn-text-action:focus {
    background: var(--surface-2);
    color: var(--primary-active);
    text-decoration: none;
    outline: none;
}
.btn-text-action--danger {
    color: var(--danger-color);
}
.btn-text-action--danger:hover,
.btn-text-action--danger:focus {
    color: var(--danger-color);
    background: color-mix(in srgb, var(--danger-color) 10%, transparent);
}

/* ================================================
   DevicePicker — reusable framework component.
   Two modes: single (combobox w/ floating dropdown) and multi (inline list).
   Both support opt-in OS pills + department dropdown filters.
   Consumers: Reports (single), Scheduled Tasks bulk modal (multi).
   ================================================ */
.device-picker { position: relative; }

/* Input + clear button (single mode). */
.device-picker__combo { position: relative; }
.device-picker__input { width: 100%; }
.device-picker--single .device-picker__input { padding-right: 28px; }
.device-picker__clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: transparent; border: 0; color: var(--text-muted);
    width: 20px; height: 20px; border-radius: 4px; cursor: pointer;
    display: none; align-items: center; justify-content: center; font-size: 0.75rem;
}
.device-picker__clear:hover { background: var(--surface-2); color: var(--text-primary); }
.device-picker--has-value .device-picker__clear { display: inline-flex; }

/* List container: floating dropdown in single, inline in multi. */
.device-picker--single .device-picker__list {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    z-index: 1050; max-height: 340px; overflow-y: auto;
    background: var(--surface-1);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.device-picker--single.device-picker--open .device-picker__list { display: block; }
.device-picker--multi .device-picker__list {
    max-height: 260px; overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-md);
    background: var(--bs-body-bg);
}

/* Multi-mode structural chrome. */
.device-picker--multi { display: flex; flex-direction: column; gap: 0.5rem; }
.device-picker__header { display: flex; justify-content: space-between; align-items: center; }
.device-picker__count { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.device-picker__bulk-actions { display: flex; gap: 0.25rem; }

/* Filters row (opt-in OS + department). */
.device-picker__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.device-picker--single .device-picker__filters { margin-top: 0.5rem; }
.device-picker__filters .btn-group { flex-shrink: 0; }
.device-picker__filters .form-select { flex: 1; min-width: 160px; }

/* Item rows — shared between modes. Single mode hides the checkbox column. */
.device-picker__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
    align-items: start;
    padding: 6px 10px;
    cursor: pointer;
    margin: 0;
    line-height: 1.3;
    transition: background 0.1s ease;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.device-picker--single .device-picker__item { grid-template-columns: 1fr; }
.device-picker__item:last-child { border-bottom: 0; }
.device-picker__item:hover,
.device-picker__item--selected { background: var(--surface-2); }
.device-picker__item-check { margin-top: 3px; flex-shrink: 0; }
.device-picker__item-content { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.device-picker__item-primary {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.78rem; color: var(--text-primary);
}
.device-picker__item-os {
    width: 14px; text-align: center;
    color: var(--text-muted); flex-shrink: 0; font-size: 0.8rem;
}
.device-picker__item-hostname {
    font-family: var(--font-mono);
    font-weight: var(--font-semibold);
    font-variant-numeric: tabular-nums;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.device-picker__item-meta {
    font-size: 0.68rem; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding-left: 22px; /* align past the OS icon column */
}
.device-picker__empty {
    padding: 10px; color: var(--text-muted);
    font-size: 0.78rem; text-align: center;
}

/* ================================================
   Modals - Consistent border radius
   ================================================ */
.modal-content {
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-card-shadow-hover);
}

/* ================================================
   Dropdowns - Consistent styling
   ================================================ */
.dropdown-menu {
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-card-shadow-hover);
}

/* ================================================
   Badges - Softer appearance
   ================================================ */
.badge {
    border-radius: calc(var(--theme-border-radius) * 0.75);
    font-weight: var(--theme-btn-font-weight);
}

/* ================================================
   Status pills (Blue v3.2) - replaces tooltip-only
   colored dots. Clear state + label without hover.
   ================================================ */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: var(--font-medium);
    line-height: 1.45;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    vertical-align: middle;
    letter-spacing: 0.01em;
}
.status-pill__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-pill--online {
    background: color-mix(in srgb, var(--success-color) 12%, transparent);
    color: var(--success-color);
    border-color: color-mix(in srgb, var(--success-color) 25%, transparent);
}
.status-pill--online .status-pill__dot {
    background: var(--success-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success-color) 18%, transparent);
}
.status-pill--away,
.status-pill--warning {
    background: color-mix(in srgb, var(--warning-color) 12%, transparent);
    color: var(--warning-color);
    border-color: color-mix(in srgb, var(--warning-color) 25%, transparent);
}
.status-pill--away .status-pill__dot,
.status-pill--warning .status-pill__dot {
    background: var(--warning-color);
}
.status-pill--offline,
.status-pill--danger {
    background: color-mix(in srgb, var(--danger-color) 10%, transparent);
    color: var(--danger-color);
    border-color: color-mix(in srgb, var(--danger-color) 25%, transparent);
}
.status-pill--offline .status-pill__dot,
.status-pill--danger .status-pill__dot {
    background: var(--danger-color);
}
.status-pill--neutral {
    background: var(--surface-2);
    color: var(--text-secondary);
    border-color: var(--border-color);
}
.status-pill--neutral .status-pill__dot {
    background: var(--text-muted);
}

/* Compact icon-only variant: used for secondary signals (e.g. OS updates pending)
   where we want the pill visual language without consuming label space. */
.status-pill--compact {
    padding: 0.125rem 0.4rem;
    gap: 0;
}
.status-pill--compact i {
    font-size: 0.7rem;
    line-height: 1;
}

/* Status color utilities — inline variant of status pills (icons, links, text
   spans) that must pick up the desaturated Blue v3.2 palette instead of
   Bootstrap's default `.text-success|danger|warning`. Use these anywhere a
   full pill would be overkill but the semantic color still matters. */
.text-status-success { color: var(--success-color) !important; }
.text-status-warning { color: var(--warning-color) !important; }
.text-status-danger  { color: var(--danger-color)  !important; }

/* Admin-zone badge — sits next to the view <h4> title to signal elevated
   privileges (e.g. Management, where destructive CRUD happens). Warning-colored
   so operators register the context shift without being alarmed. */
.view-admin-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.55rem;
    font-size: 0.65rem;
    font-weight: var(--font-medium);
    font-family: var(--font-sans);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--warning-color);
    background: color-mix(in srgb, var(--warning-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning-color) 25%, transparent);
    border-radius: 999px;
    vertical-align: middle;
    line-height: 1.4;
}

/* Environment pill — indicates deployment environment of an infrastructure
   server. Same visual family as .view-admin-badge. Colors carry semantic:
   production warns (high-stakes), staging neutral, development info (soft). */
.env-pill {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    font-size: 0.62rem;
    font-weight: var(--font-semibold);
    font-family: var(--font-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid transparent;
    vertical-align: middle;
    line-height: 1.5;
    white-space: nowrap;
}
.env-pill--production {
    color: var(--warning-color);
    background: color-mix(in srgb, var(--warning-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--warning-color) 25%, transparent);
}
.env-pill--staging {
    color: var(--text-secondary);
    background: var(--surface-2);
    border-color: var(--bs-border-color);
}
.env-pill--development {
    color: var(--info-color);
    background: color-mix(in srgb, var(--info-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--info-color) 25%, transparent);
}

/* OS-brand chip — small tinted square wrapping the OS glyph (fa-linux /
   fa-windows). Picks colors OUTSIDE the status palette so it never reads
   as a state signal — purely identity. Same color-mix idiom as env-pill
   to stay consistent with the rest of the design system. Reusable
   anywhere a server identity needs OS context (Infrastructure list,
   any future "all hosts" view, the ticket detail's affected server, etc). */
.os-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: 0.78rem;
    line-height: 1;
    flex-shrink: 0;
}
.os-chip--linux {
    color: var(--os-icon-linux);
    background: color-mix(in srgb, var(--os-icon-linux) 14%, transparent);
    border-color: color-mix(in srgb, var(--os-icon-linux) 30%, transparent);
}
.os-chip--windows {
    color: var(--os-icon-windows);
    background: color-mix(in srgb, var(--os-icon-windows) 14%, transparent);
    border-color: color-mix(in srgb, var(--os-icon-windows) 30%, transparent);
}

/* Service dot — inline service status indicator (dot + label). Used on
   infrastructure cards to surface running services at a glance. The dot
   color encodes health; the label names the service. Hover-friendly for
   tooltips in future iterations. */
.service-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-right: 0.85rem;
    white-space: nowrap;
}
.service-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-muted);
}
.service-dot--ok::before      { background: var(--success-color); }
.service-dot--warning::before { background: var(--warning-color); }
.service-dot--down::before    { background: var(--danger-color); }

/* ================================================
   Tables - Enhanced hover states
   ================================================ */
.table-hover tbody tr:hover {
    background-color: var(--hover-bg);
    transition: background-color 0.2s ease;
}

/* ================================================
   Tables - Blue v3.2 hierarchy refinements
   Remove cell grid lines (Bootstrap .table-bordered), keep only row hairlines.
   Apply mono to identifier columns. Offline rows dimmed.
   ================================================ */
.table-bordered > :not(caption) > * > * {
    border-width: 0;
}
.table > tbody > tr > td {
    border-bottom: 1px solid var(--bs-border-color-translucent);
    border-top: 0;
    vertical-align: middle;
}
.table > tbody > tr:last-child > td {
    border-bottom: 0;
}

/* Identifier columns: mono + tabular nums for aligned scanning. */
.table > tbody > tr > td.col-hostname,
.table > tbody > tr > td.col-ipaddress,
.table > tbody > tr > td.col-uniqid {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
}

/* Hostname is the primary identifier users scan; give it emphasis. */
.table > tbody > tr > td.col-hostname {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

/* Secondary fields lose emphasis. */
.table > tbody > tr > td.col-username,
.table > tbody > tr > td.col-osinfo {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Last Seen column: compact relative delta, mono + muted.
   Column width is set via table-layout:fixed + <th> width % (see Table.php). */
.table > tbody > tr > td.col-last-seen {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Offline rows: de-emphasize without hiding. */
.table > tbody > tr[data-status="offline"] {
    opacity: 0.6;
}
.table > tbody > tr[data-status="offline"]:hover {
    opacity: 0.9;
}

/* First-render stagger — table rows fade in with a short cascade so the
   operator notices data arrived. Only the first 10 rows animate (capped in JS)
   and only on the first paint; subsequent re-sorts / refetches skip it. */
@keyframes tableRowFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
.table > tbody > tr.row-entry-stagger {
    animation: tableRowFadeIn 180ms ease-out both;
    animation-delay: calc(var(--row-index, 0) * 15ms);
}
@media (prefers-reduced-motion: reduce) {
    .table > tbody > tr.row-entry-stagger { animation: none; }
}

/* ================================================
   Alerts - Consistent border radius
   ================================================ */
.alert {
    border-radius: var(--theme-border-radius);
}

/* ================================================
   Breadcrumb - Enhanced styling
   ================================================ */
.breadcrumb {
    background-color: transparent;
    padding: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
}

/* ================================================
   Nav Tabs - Underline-only (Blue v3.2, Linear/Stripe style)
   No framed look; active tab marked by bottom accent bar.
   ================================================ */
.nav-tabs {
    border-bottom: 1px solid var(--bs-border-color);
    gap: 0.25rem;
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.625rem 0.25rem;
    margin: 0 0.75rem -1px 0.75rem;
    background: transparent;
    color: var(--text-secondary);
    font-weight: var(--font-medium);
    letter-spacing: 0.005em;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-tabs .nav-link:first-child {
    margin-left: 0;
}

.nav-tabs .nav-link:hover {
    color: var(--text-primary);
    border-color: transparent;
    background: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--text-primary);
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--primary-color);
    font-weight: var(--font-semibold);
}

.nav-tabs .nav-link.disabled {
    color: var(--text-muted);
    cursor: not-allowed;
}

/* ================================================
   Progress Bars - Smooth animations
   ================================================ */
.progress {
    border-radius: var(--theme-border-radius);
    overflow: hidden;
}

.progress-bar {
    transition: width 0.3s ease;
}

/* ================================================
   List Groups - Consistent styling
   ================================================ */
.list-group-item {
    border-radius: var(--theme-border-radius);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* ================================================
   Pagination - Enhanced appearance
   ================================================ */
.page-link {
    border-radius: var(--theme-border-radius);
    transition: all 0.2s ease;
}

/* ================================================
   Spinners - Smooth animations
   ================================================ */
.spinner-border,
.spinner-grow {
    transition: opacity 0.2s ease;
}

/* ================================================
   Tooltips & Popovers - Consistent styling
   ================================================ */
.tooltip-inner {
    border-radius: calc(var(--theme-border-radius) * 0.75);
}

.popover {
    border-radius: var(--theme-border-radius);
}

/* ================================================
   Custom Scrollbar (Webkit browsers)
   ================================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bs-body-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: calc(var(--theme-border-radius) / 2);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Dark mode scrollbar */
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-color);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}