/*
 * SENT — спільні дизайн-токени та базові преміум-компоненти.
 *
 * Цей файл НЕ містить бізнес-логіки, лише візуальний шар (кольори,
 * типографіка, форми елементів). Підключається через
 * <link rel="stylesheet" href="/assets/css/theme.css"> у <head>
 * ПЕРЕД інлайновими <style> кожного layout-файлу, щоб інлайн-стилі могли
 * посилатись на змінні нижче.
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
    /* Палітра */
    --color-bg: #F6F8FB;
    --color-surface: #FFFFFF;
    --color-surface-2: #F1F4F9;
    --color-border: #E4E7EC;
    --color-ink: #101828;
    --color-muted: #667085;
    --color-muted-2: #98A2B3;

    --color-primary: #24408E;
    --color-primary-hover: #1B3170;
    --color-primary-soft: #E8ECF9;

    --color-accent: #B7791F;
    --color-accent-soft: #FBF0DD;

    --color-success: #12B76A;
    --color-success-soft: #E6F9F0;

    --color-warning: #F79009;
    --color-warning-soft: #FFF4E5;

    --color-danger: #D92D20;
    --color-danger-soft: #FEECEC;

    --color-sidebar-bg: #10182B;
    --color-sidebar-active: #1D2A47;
    --color-sidebar-text: #98A2B3;
    --color-sidebar-text-active: #FFFFFF;

    /* Форма */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;

    /* Тіні */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

    /* Типографіка */
    --font-sans: 'IBM Plex Sans', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

/* Цифри, держномери, IMEI, дати, лічильники у таблицях */
.font-mono,
.mono,
td.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   Кнопки
   ========================================================= */

.btn-premium-primary,
.btn-premium-secondary,
.btn-premium-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-weight: 600;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease, opacity .15s ease;
}

.btn-premium-primary:active,
.btn-premium-secondary:active,
.btn-premium-danger:active {
    transform: translateY(1px);
}

.btn-premium-primary {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: #fff;
}

.btn-premium-primary:hover,
.btn-premium-primary:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #fff;
    box-shadow: var(--shadow-md);
}

.btn-premium-secondary {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-ink);
}

.btn-premium-secondary:hover,
.btn-premium-secondary:focus-visible {
    background: var(--color-surface-2);
    color: var(--color-ink);
    box-shadow: var(--shadow-md);
}

.btn-premium-danger {
    background: var(--color-danger);
    border: 1px solid var(--color-danger);
    color: #fff;
}

.btn-premium-danger:hover,
.btn-premium-danger:focus-visible {
    background: #B4241A;
    border-color: #B4241A;
    color: #fff;
    box-shadow: var(--shadow-md);
}

.btn-premium-primary:disabled,
.btn-premium-primary.disabled,
.btn-premium-secondary:disabled,
.btn-premium-secondary.disabled,
.btn-premium-danger:disabled,
.btn-premium-danger.disabled {
    opacity: .55;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* =========================================================
   Статус-піли (заміна bootstrap .badge для колонки статусу)
   ========================================================= */

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.status-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
}

.status-pill--success {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.status-pill--warning {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.status-pill--danger {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.status-pill--muted {
    background: var(--color-surface-2);
    color: var(--color-muted);
}

/* Пілюлі всередині офканвасу "Деталі ретранслятора" (.details-value) можуть містити
   довгий текст (напр. "Буде активована після заповнення необхідних даних") — тут
   дозволяємо перенос рядка замість nowrap, щоб не розпирати панель по горизонталі. */
.details-value .status-pill {
    white-space: normal;
    text-align: left;
}

/* =========================================================
   Nav-pills (навігація офканвасу "Деталі ретранслятора")
   ========================================================= */

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--color-primary);
    color: #fff;
}

/* Індикатор проблеми на вкладці "RMPD" (модалка деталей, admin) — щоб було
   видно, що варто звернути увагу, ще до заходу на саму вкладку. */
.rmpd-tab-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-danger);
    margin-left: 4px;
    vertical-align: middle;
}

/* Маленький uppercase-заголовок підрозділу всередині картки (напр. картка
   "Стан RMPD" — групи "Перевірка"/"Поточний стан"/"Координати"/"Ідентифікатори"). */
.section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-muted);
}

/* =========================================================
   Прогрес-бар (ретрансляція історії в офканвасі)
   ========================================================= */

.progress-bar {
    background-color: var(--color-primary);
}

/* =========================================================
   Фокус форм
   ========================================================= */

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px var(--color-primary-soft) !important;
    outline: none;
}
