/* ══════════════════════════════════════════════════════════════
   The visual language of home / climate / heater on every other page of the app shell:
   Bootstrap / Bootstrap components (cards, tables, buttons, fields, badges, modals, alerts, menus) restyled as
   frosted glass with the IoT palette. Scoped to .iot-app, so the login and other layouts keep their look.
   Tokens: ui-tokens.css (.iot). Loaded last.
   ══════════════════════════════════════════════════════════════ */

/* ── palette: Bootstrap's theme colours point at the IoT tokens ── */
.iot-app {
    --bs-primary: var(--acc);
    --bs-primary-rgb: 16, 185, 129;
    --bs-primary-active: color-mix(in srgb, var(--acc) 82%, #000);
    --bs-primary-light: var(--tint-acc);
    --bs-primary-inverse: #04241a;
    --bs-success: var(--ok);
    --bs-success-rgb: 16, 185, 129;
    --bs-success-light: var(--tint-acc);
    --bs-info: var(--cool);
    --bs-info-light: var(--tint-cool);
    --bs-warning: var(--pend);
    --bs-warning-light: var(--tint-pend);
    --bs-danger: var(--err);
    --bs-danger-rgb: 225, 29, 72;
    --bs-danger-light: var(--tint-err);
    --bs-link-color: var(--acc);
    --bs-link-hover-color: color-mix(in srgb, var(--acc) 80%, var(--txt));
    --bs-border-color: var(--line);
    --bs-heading-color: var(--txt);
}

[data-bs-theme="dark"] .iot-app {
    --bs-primary-rgb: 52, 211, 153;
    --bs-success-rgb: 52, 211, 153;
    --bs-danger-rgb: 251, 113, 133;
    --bs-primary-active: color-mix(in srgb, var(--acc) 82%, #fff);
}

/* ── frosted surfaces ─────────────────────────────────────────── */
.iot-content :is(.card, .modal-content),
.iot-app :is(.menu-sub-dropdown, .dropdown-menu) {
    border: 1px solid var(--frost-line);
    border-radius: 22px;
    background: linear-gradient(160deg, var(--frost-hi), transparent 55%), var(--frost);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
    backdrop-filter: blur(22px) saturate(1.35);
    box-shadow: var(--frost-shadow);
    color: var(--txt);
}

.iot-content .card { --bs-card-bg: transparent; --bs-card-border-color: var(--frost-line); --bs-card-cap-bg: transparent; }
.iot-content .card.shadow-sm { box-shadow: var(--frost-shadow) !important; }
.iot-content .card .card-header { min-height: 64px; border-bottom: 1px solid var(--line); background: transparent; }
.iot-content .card .card-footer { border-top: 1px solid var(--line); background: transparent; }
.iot-content .card .card-title, .iot-content .card .card-title h3, .iot-content .card .card-label { color: var(--txt); font-weight: 600; }
.iot-content .modal-content { border-radius: 26px; }
.iot-content .modal-header { border-bottom-color: var(--line); }
.iot-content .modal-footer { border-top-color: var(--line); }
.iot-app :is(.menu-sub-dropdown, .dropdown-menu) { border-radius: 16px; }

/* Bootstrap's tinted backgrounds become soft glass tints */
.iot-content :is(.bg-light, .bg-body, .bg-white) { background-color: var(--ink-soft) !important; }
.iot-content .bg-light-primary { background-color: var(--tint-acc) !important; }
.iot-content .bg-light-success { background-color: var(--tint-acc) !important; }
.iot-content .bg-light-danger { background-color: var(--tint-err) !important; }
.iot-content .bg-light-warning { background-color: var(--tint-pend) !important; }
.iot-content .bg-light-info { background-color: var(--tint-cool) !important; }
.iot-content :is(.text-gray-900, .text-gray-800, .text-dark) { color: var(--txt) !important; }
.iot-content :is(.text-muted, .text-gray-600, .text-gray-500, .text-gray-400) { color: var(--muted) !important; }

/* ── tables ───────────────────────────────────────────────────── */
.iot-content .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--txt);
    --bs-table-striped-bg: var(--ink-soft);
    --bs-table-hover-bg: var(--glass-2);
    --bs-table-border-color: var(--line);
    color: var(--txt);
}

    .iot-content .table > thead > tr > th,
    .iot-content .table > thead th {
        color: var(--muted) !important;
        font-size: var(--dcc-fs-xs);
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
        border-bottom: 1px solid var(--line) !important;
        background: transparent;
    }

    .iot-content .table > tbody > tr { transition: background var(--dcc-t-base) var(--dcc-e-std); }
    .iot-content .table > tbody > tr:hover { background: var(--glass-2); }
    .iot-content .table > tbody > tr > td { border-color: var(--line); vertical-align: middle; }
    .iot-content .table :is(.table-row-dashed, .border-dashed) tr { border-bottom-color: var(--line) !important; }

/* ── buttons ──────────────────────────────────────────────────── */
.iot-content .btn { border-radius: 12px; font-weight: 600; transition: transform var(--dcc-t-base) var(--dcc-e-spring), box-shadow var(--dcc-t-base), background var(--dcc-t-base); }
.iot-content .btn:not(.btn-icon):active { transform: scale(.97); }
.iot-content .btn.btn-icon { border-radius: 12px; }

.iot-content .btn.btn-primary,
.iot-content .btn.btn-primary:hover:not(.btn-active),
.iot-content .btn.btn-primary:focus:not(.btn-active),
.iot-content .btn.btn-primary:active:not(.btn-active) {
    border: 0;
    background: linear-gradient(140deg, var(--acc-2), var(--acc) 60%);
    color: #04241a;
    box-shadow: 0 10px 22px -12px var(--acc);
}

    .iot-content .btn.btn-primary i, .iot-content .btn.btn-primary .svg-icon { color: #04241a; }
    .iot-content .btn.btn-primary:hover:not(.btn-active) { box-shadow: 0 14px 28px -12px var(--acc); transform: translateY(-1px); }

.iot-content .btn.btn-light,
.iot-content .btn.btn-secondary {
    border: 1px solid var(--line);
    background: var(--ink-soft);
    color: var(--txt);
}

    .iot-content .btn.btn-light:hover:not(.btn-active), .iot-content .btn.btn-secondary:hover:not(.btn-active) { background: var(--glass-2); color: var(--txt); }

.iot-content .btn.btn-success { border: 0; background: var(--ok); color: #04241a; }
.iot-content .btn.btn-danger { border: 0; background: var(--err); color: #fff; }

/* ── form fields ──────────────────────────────────────────────── */
.iot-content :is(.form-control, .form-select, .choices__inner) {
    border: 1px solid var(--line);
    border-radius: 12px;
    background-color: var(--ink-soft);
    color: var(--txt);
    transition: border-color var(--dcc-t-base) var(--dcc-e-std), box-shadow var(--dcc-t-base) var(--dcc-e-std);
}

    .iot-content :is(.form-control, .form-select):focus,
    .iot-content .choices.is-focused .choices__inner {
        border-color: var(--acc);
        background-color: var(--ink-soft);
        box-shadow: 0 0 0 4px var(--tint-acc);
        color: var(--txt);
    }

    .iot-content :is(.form-control, .form-select)::placeholder { color: var(--muted); }
.iot-content :is(.form-control-solid, .form-select-solid) { background-color: var(--ink-soft); border-color: var(--line); color: var(--txt); }
.iot-content .form-label { color: var(--txt); font-weight: 500; }
.iot-content .form-check-input:checked { background-color: var(--acc); border-color: var(--acc); }
.iot-content .form-switch .form-check-input { width: 2.75rem; height: 1.5rem; border-radius: 999px; }
.iot-content .form-switch .form-check-input:checked { background-color: var(--acc); box-shadow: 0 0 14px -4px var(--acc); }
.iot-content .input-group-text { border-color: var(--line); background: var(--ink-soft); color: var(--muted); }

/* ── badges, alerts, tabs, pagination ─────────────────────────── */
.iot-content .badge { border-radius: 8px; font-weight: 600; }
.iot-content .badge.badge-light { background: var(--ink-soft); color: var(--muted); }

.iot-content .alert {
    border: 1px solid var(--line);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.iot-content :is(.nav-tabs, .nav-line-tabs) { border-bottom-color: var(--line); }
.iot-content :is(.nav-tabs, .nav-line-tabs) .nav-link.active { color: var(--acc-t); border-bottom-color: var(--acc); }
.iot-content .pagination .page-item.active .page-link { border-radius: 10px; background: var(--acc); color: #04241a; }
.iot-content .pagination .page-link { border-radius: 10px; color: var(--muted); }
.iot-content .separator { border-color: var(--line); }

/* cards rise in once, like the home page (stopped when animations are off) */
.iot-content .card { animation: ui-rise .6s var(--ease-soft) backwards; }
:root[data-motion="off"] .iot-content .card { animation: none; }

/* ── the monitoring dashboard (home-page.css) has its own tokens: point them at the IoT palette and glass ── */
.iot-app {
    /* filled with white text on it, so a deeper green than the accent */
    --primary: #047857;
    --primary-hover: #065f46;
    --primary-soft: var(--tint-acc);
    --primary-glow: var(--tint-acc-2);
    --accent-blue: var(--cool);
    --success: var(--ok-t);
    --success-soft: var(--tint-acc);
    --danger: var(--err-t);
    --danger-soft: var(--tint-err);
    --warning: var(--pend-t);
    --warning-soft: var(--tint-pend);
    --info: var(--cool-t);
    --info-soft: var(--tint-cool);
    --card-bg: var(--frost);
    --card-border: var(--frost-line);
    --card-shadow: var(--frost-shadow);
    --card-shadow-hover: var(--sh-2);
    --card-radius: 22px;
    --card-radius-sm: 14px;
    --text-primary: var(--txt);
    --text-secondary: var(--muted);
    --text-muted: var(--muted);
    --bg-subtle: var(--ink-soft);
    --bg-subtle-2: var(--glass-2);
    --border-color: var(--line);
}

[data-bs-theme="dark"] .iot-app {
    --primary: #059669;
    --primary-hover: #10b981;
}

/* tinted Bootstrap buttons: the tone as readable text on its tint */
.iot-content .btn.btn-light-primary { background: var(--tint-acc); color: var(--acc-t); }
.iot-content .btn.btn-light-success { background: var(--tint-acc); color: var(--ok-t); }
.iot-content .btn.btn-light-danger { background: var(--tint-err); color: var(--err-t); }
.iot-content .btn.btn-light-info { background: var(--tint-cool); color: var(--cool-t); }
.iot-content .btn.btn-light-warning { background: var(--tint-pend); color: var(--pend-t); }
.iot-content .btn:is(.btn-light-primary, .btn-light-success, .btn-light-danger, .btn-light-info, .btn-light-warning):hover:not(.btn-active) { filter: brightness(.97); }

/* monitoring chart headings and legend: Bootstrap greys turn dark in the dark theme, use the text tokens */
.iot-content .all-charts-section-head { color: var(--txt); }
.iot-content :is(.all-charts-legend-item, .all-charts-legend-scale-label) { color: var(--muted); }

/* tinted badges and tone text: the darker text tone in daylight (same as the accent in the dark theme) */
.iot-content .badge.badge-light-success { background: var(--tint-acc); color: var(--ok-t); }
.iot-content .badge.badge-light-primary { background: var(--tint-acc); color: var(--acc-t); }
.iot-content .badge.badge-light-danger { background: var(--tint-err); color: var(--err-t); }
.iot-content .badge.badge-light-warning { background: var(--tint-pend); color: var(--pend-t); }
.iot-content .badge.badge-light-info { background: var(--tint-cool); color: var(--cool-t); }
.iot-content .text-success { color: var(--ok-t) !important; }
.iot-content .text-primary { color: var(--acc-t) !important; }
.iot-content .text-danger { color: var(--err-t) !important; }
.iot-content .text-warning { color: var(--pend-t) !important; }
.iot-content .text-info { color: var(--cool-t) !important; }