/* ── Dialog centering — absolute 50% 50% ──────────────────────────────── */
dialog {
    border: none;
    padding: 0;
    background-color: #08183b;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: min(32rem, 92vw);
    max-height: 90vh;
    overflow-y: auto;
    z-index: 9999;
    border-radius: 0.75rem;
    box-shadow: 0 0 10px rgba(77, 201, 241, 0.15), 0 0 10px rgba(77, 201, 241, 0.05), 0 3px 5px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(77, 201, 241, 0.2);
}
dialog::backdrop {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

/* RTL dialog centering — transform origin must account for direction */
[dir="rtl"] dialog {
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
}

/* Google Places autocomplete dropdown — must appear above dialog (z-index 9999) and backdrop */
.pac-container {
    z-index: 2147483647 !important;
    background-color: #08183b !important;
    border: 1px solid #3c4766 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
    margin-top: 4px !important;
}
.pac-item {
    padding: 8px 12px !important;
    border-top: 1px solid #3c476640 !important;
    color: #dfe4ff !important;
    cursor: pointer !important;
}
.pac-item:hover, .pac-item-selected {
    background-color: #13244d !important;
}
.pac-item-query {
    color: #4dc9f1 !important;
}
.pac-icon { display: none !important; }
.pac-matched { font-weight: 700 !important; }

/* Google PlaceAutocompleteElement — style via CSS custom properties */
/* (shadow DOM blocks external CSS, so use the component's own variables) */
gmp-place-autocomplete {
    /* Input styling */
    --gmpac-color-surface: #ffffff;
    --gmpac-color-on-surface: #020c29;
    --gmpac-color-on-surface-variant: #6a7596;
    --gmpac-color-outline: rgba(60, 71, 102, 0.3);
    --gmpac-color-primary: #4dc9f1;
    --gmpac-font-family-base: 'Inter', 'Assistant', sans-serif;
    --gmpac-font-size-base: 0.85rem;
    /* Dropdown list styling — white bg, black text */
    --gmpac-color-surface-container-highest: #ffffff;
    --gmpac-color-on-surface-variant: #333333;
    --gmpac-color-surface-container: #f5f5f5;
    width: 100%;
    border-radius: 0.5rem;
    display: block;
}

/* ── Reusable Component Classes ─────────────────────────────────────────── */

/* Status indicator dots */
.status-dot {
    width: 0.375rem; height: 0.375rem; border-radius: 9999px;
}
.status-dot--active { background-color: #00fd87; }
.status-dot--warning { background-color: #feb700; }
.status-dot--error { background-color: #ff6e84; }
.status-dot--info { background-color: #4dc9f1; }
.status-dot--pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Status badge (text + dot combo in the table) */
.status-badge {
    display: flex; align-items: center; gap: 0.375rem;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.025em;
}
.status-badge--active { color: #00fd87; }
.status-badge--warning { color: #feb700; }
.status-badge--error { color: #ff6e84; }
.status-badge--info { color: #4dc9f1; }
.status-badge--syncing { color: #4dc9f1; }
.status-badge--offline { color: #ff6e84; }

/* Card containers */
.card {
    background-color: #041131; border-radius: 0.5rem;
}

/* Quick action button */
.action-btn {
    background-color: #13244d; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 1rem;
    border-radius: 0.5rem; transition: all 150ms;
}
.action-btn:hover { background-color: #4dc9f1; }
.action-btn:hover .action-btn__icon,
.action-btn:hover .action-btn__label { color: #002732; }
.action-btn__label {
    font-size: 9px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.1em;
}
.action-btn--accent:hover { background-color: #00fd87; }
.action-btn--accent:hover .action-btn__icon,
.action-btn--accent:hover .action-btn__label { color: #005b2c; }

/* Table action icon button */
.icon-btn {
    padding: 0.375rem; border-radius: 0.25rem; transition: color 150ms;
}
.icon-btn:hover { color: #4dc9f1; }
.icon-btn--disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }

/* Alert severity badges */
.severity-badge {
    font-size: 11px; font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase; padding: 0.125rem 0.375rem; border-radius: 0.25rem;
}
.severity-badge--critical { background-color: #ff6e84; color: #490013; }
.severity-badge--warning { background-color: #feb700; color: #5f4200; }

/* Stat card */
.stat-label {
    font-size: 11px; text-transform: uppercase; font-weight: 700;
    letter-spacing: 0.1em; margin-bottom: 0.5rem;
}
.stat-value {
    font-family: 'Space Grotesk', sans-serif; font-size: 2.25rem; font-weight: 900;
}

/* Section heading */
.section-title {
    font-family: 'Space Grotesk', sans-serif; font-size: 0.75rem;
    text-transform: uppercase; font-weight: 700; letter-spacing: 0.1em;
}

/* Mono text small */
.mono-xs {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
}

/* Form input */
input.form-input,
select.form-input,
textarea.form-input,
dialog .form-input {
    width: 100%; background-color: #ffffff !important; border: 1px solid rgba(60, 71, 102, 0.3);
    font-family: 'Inter', 'Assistant', sans-serif !important; font-size: 0.85rem;
    padding: 0.625rem 0.875rem; border-radius: 0.5rem;
    color: #020c29 !important;
    -webkit-text-fill-color: #020c29 !important;
}
input.form-input::placeholder,
dialog .form-input::placeholder { color: #8895b3 !important; -webkit-text-fill-color: #8895b3 !important; }
.form-input:focus { outline: none; box-shadow: 0 0 0 1px #4dc9f1; border-color: #4dc9f1; }

/* Form label */
.form-label {
    font-size: 11px; text-transform: uppercase; font-weight: 700;
    letter-spacing: 0.1em; color: #a0aace; display: block; margin-bottom: 0.375rem;
}