/* ==========================================================================
   Wi-Sky Utilities — Status dots, page headers, helpers
   ========================================================================== */

/* ---------- Status dots (replace SVG filter hacks) ---------- */
.ws-status-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.ws-status-dot::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ws-status-dot.online::before {
    background: var(--ws-success);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.ws-status-dot.offline::before {
    background: var(--ws-danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.ws-status-dot.warning::before {
    background: var(--ws-warning);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

/* Status badge (pill-style alternative) */
.ws-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.ws-status-badge.online {
    background: var(--ws-badge-online-bg);
    color: var(--ws-badge-online-text);
}

.ws-status-badge.offline {
    background: var(--ws-badge-offline-bg);
    color: var(--ws-badge-offline-text);
}

.ws-status-badge.warning {
    background: var(--ws-badge-warning-bg);
    color: var(--ws-badge-warning-text);
}

/* ---------- Page header ---------- */
.ws-page-header {
    margin-bottom: 1.5rem;
}

.ws-page-header h1,
.ws-page-header .ws-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ws-heading-color);
    margin: 0 0 0.25rem;
}

.ws-page-header .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.8125rem;
}

.ws-page-header .breadcrumb-item,
.ws-page-header .breadcrumb-item a {
    color: var(--ws-text-muted);
}

.ws-page-header .breadcrumb-item.active {
    color: var(--ws-text-secondary);
}

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

/* ---------- Section title (form dividers) ---------- */
.ws-section-title {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ws-text-secondary);
    padding-bottom: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--ws-card-border);
}

.ws-section-title:first-child {
    margin-top: 0;
}

/* ---------- Clickable card ---------- */
.ws-clickable,
.clickable {
    cursor: pointer;
    transition: all var(--ws-transition-speed) ease;
}

.ws-clickable:hover,
.clickable:hover {
    box-shadow: var(--ws-card-hover-shadow);
    transform: translateY(-2px);
}

/* ---------- Text utilities ---------- */
.text-center {
    text-align: center;
}

.text-muted {
    color: var(--ws-text-muted) !important;
}

.text-dark {
    color: var(--ws-text-primary) !important;
}

/* ---------- Priority badges ---------- */
.ws-priority-notice {
    background: var(--ws-badge-info-bg);
    color: var(--ws-badge-info-text);
}

.ws-priority-urgent {
    background: var(--ws-badge-warning-bg);
    color: var(--ws-badge-warning-text);
}

.ws-priority-emergency {
    background: var(--ws-badge-offline-bg);
    color: var(--ws-badge-offline-text);
}

/* ---------- Old filter-based status (backwards compat, now replaced) ---------- */
.tower-ok,
.device-ok {
    filter: none;
}

.tower-bad,
.device-bad {
    filter: none;
}

/* ---------- Avatar sizes ---------- */
.ws-avatar {
    border-radius: 50%;
    object-fit: cover;
}

.ws-avatar-xs { width: 28px; height: 28px; }
.ws-avatar-sm { width: 40px; height: 40px; }
.ws-avatar-md { width: 64px; height: 64px; }
.ws-avatar-lg { width: 80px; height: 80px; }
.ws-avatar-xl { width: 100px; height: 100px; }

/* ---------- Misc helpers ---------- */
.gap-3 {
    gap: 1rem;
}

.gap-4 {
    gap: 1.5rem;
}

/* Bootstrap 4 compat shims removed — no-gutters, mr-2, font-weight-bold,
   border-left-* were verified unused in templates (March 2026). */

/* ---------- Login page ---------- */
/* Login card styles are in templates/layout/login.php */

/* ---------- Error page ---------- */
.ws-error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ws-body-bg);
    padding: 2rem;
}

.ws-error-card {
    text-align: center;
    max-width: 480px;
    width: 100%;
}

.ws-error-code {
    font-size: 6rem;
    font-weight: 800;
    color: var(--ws-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.ws-error-message {
    font-size: 1.25rem;
    color: var(--ws-text-secondary);
    margin-bottom: 2rem;
}

/* ---------- SB Admin 2 compat classes (used in Marketing dashboard) ---------- */
.text-xs {
    font-size: 0.7rem;
}

.text-gray-300 {
    color: #dddfeb !important;
}

[data-theme="dark"] .text-gray-300 {
    color: rgba(255, 255, 255, 0.15) !important;
}

.progress-sm {
    height: 0.5rem;
}

.bg-outline-secondary {
    background-color: transparent;
    border: 1px solid var(--bs-secondary);
    color: var(--bs-secondary);
}

/* ---------- Theme-aware Bootstrap utility overrides ---------- */
[data-theme="dark"] .bg-light {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .form-control.bg-light {
    background-color: var(--ws-input-bg) !important;
    color: var(--ws-input-text) !important;
    border-color: var(--ws-input-border) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--ws-text-primary) !important;
}

[data-theme="dark"] .badge.bg-warning.text-dark {
    color: #1a2332 !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--ws-card-bg) !important;
}

[data-theme="dark"] .table-success {
    --bs-table-bg: rgba(22, 163, 74, 0.1);
    --bs-table-color: var(--ws-text-primary);
}

[data-theme="dark"] .table-primary {
    --bs-table-bg: rgba(59, 125, 221, 0.1);
    --bs-table-color: var(--ws-text-primary);
    --bs-table-border-color: var(--ws-table-border);
}

[data-theme="dark"] .table-info {
    --bs-table-bg: rgba(14, 165, 233, 0.1);
    --bs-table-color: var(--ws-text-primary);
    --bs-table-border-color: var(--ws-table-border);
}

[data-theme="dark"] .table-warning {
    --bs-table-bg: rgba(245, 158, 11, 0.1);
    --bs-table-color: var(--ws-text-primary);
    --bs-table-border-color: var(--ws-table-border);
}

[data-theme="dark"] .table-danger {
    --bs-table-bg: rgba(220, 38, 38, 0.1);
    --bs-table-color: var(--ws-text-primary);
    --bs-table-border-color: var(--ws-table-border);
}

/* ---------- Dark mode: Accordion ---------- */
[data-theme="dark"] .accordion-item {
    background-color: var(--ws-card-bg);
    border-color: var(--ws-card-border);
    color: var(--ws-text-primary);
}

[data-theme="dark"] .accordion-button {
    background-color: var(--ws-card-bg);
    color: var(--ws-text-primary);
    border-color: var(--ws-card-border);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: rgba(59, 125, 221, 0.1);
    color: var(--ws-link-color);
}

[data-theme="dark"] .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] .accordion-body {
    background-color: var(--ws-card-bg);
    color: var(--ws-text-primary);
}

/* ---------- Dark mode: Card footer ---------- */
[data-theme="dark"] .card-footer {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: var(--ws-card-border);
}

/* ---------- Dark mode: Alert overrides ---------- */
[data-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(14, 165, 233, 0.15);
    border-color: rgba(14, 165, 233, 0.3);
    color: #38bdf8;
}

[data-theme="dark"] .alert-light {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--ws-card-border);
    color: var(--ws-text-primary);
}

[data-theme="dark"] .alert-primary {
    background-color: rgba(59, 125, 221, 0.15);
    border-color: rgba(59, 125, 221, 0.3);
    color: #60a5fa;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.3);
    color: #f87171;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(22, 163, 74, 0.15);
    border-color: rgba(22, 163, 74, 0.3);
    color: #4ade80;
}

/* ---------- Dark mode: Signature canvas ---------- */
[data-theme="dark"] .signature-container.bg-white {
    background-color: #ffffff !important;
}

/* ---------- Dark mode: Modal ---------- */
[data-theme="dark"] .modal-content {
    background-color: var(--ws-card-bg);
    border-color: var(--ws-card-border);
    color: var(--ws-text-primary);
}

[data-theme="dark"] .modal-header {
    border-color: var(--ws-card-border);
}

[data-theme="dark"] .modal-footer {
    border-color: var(--ws-card-border);
}