:root {
    --app-bg: #f4f6f8;
    --app-surface: #ffffff;
    --app-surface-soft: #f8fafc;
    --app-text: #172033;
    --app-muted: #667085;
    --app-border: #d8dee8;
    --app-primary: #2563eb;
    --app-primary-soft: rgba(37, 99, 235, 0.13);
    --app-primary-layer: rgba(37, 99, 235, 0.24);
    --app-danger: #dc3545;
    --app-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] {
    --app-bg: #1f242c;
    --app-surface: #252b34;
    --app-surface-soft: #2d3440;
    --app-text: #d7dde8;
    --app-muted: #9aa6b8;
    --app-border: #3a4352;
    --app-primary: #5ea1ff;
    --app-primary-soft: rgba(94, 161, 255, 0.16);
    --app-primary-layer: rgba(94, 161, 255, 0.28);
    --app-danger: #ff6b7a;
    --app-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
}

html,
body {
    background: var(--app-bg) !important;
    color: var(--app-text);
}

body {
    margin: 0;
    font-size: 15px;
    letter-spacing: 0;
}

.page-container,
.auth-wrapper {
    min-height: 100vh;
}

.page-inner,
.auth-inner {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.navbar {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border);
    border-top: 0;
    box-shadow: var(--app-shadow) !important;
}

.navbar-brand,
.device-name-text,
.device-text-title,
.card-title,
.modal-title,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--app-text) !important;
}

.dropdown-menu,
.modal-content,
.card,
.list-group-item,
.table {
    background-color: var(--app-surface) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

.dropdown-item {
    color: var(--app-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--app-text);
    background: var(--app-surface-soft);
}

.text-muted,
.device-info-text,
.device-source-text,
.form-text {
    color: var(--app-muted) !important;
}

.form-control,
.form-select,
.stripe-input {
    background-color: var(--app-surface) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--app-primary) !important;
    box-shadow: 0 0 0 .18rem var(--app-primary-soft) !important;
}

.btn {
    border-radius: 8px;
}

.btn-outline-primary {
    color: var(--app-primary);
    border-color: rgba(37, 99, 235, .45);
}

html[data-theme="dark"] .btn-outline-primary {
    border-color: rgba(94, 161, 255, .48);
}

.app-icon-btn,
.btn-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--app-border);
    background: var(--app-surface-soft);
    color: var(--app-text);
    line-height: 1;
}

.app-icon-btn:hover,
.btn-icon:hover {
    border-color: var(--app-primary);
    background: var(--app-primary-soft);
    color: var(--app-primary);
}

.theme-toggle {
    font-size: 18px;
    font-weight: 700;
}

.section-title {
    color: var(--app-muted) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}

.device-card-shell {
    border-color: var(--app-border) !important;
    background: linear-gradient(90deg, var(--app-surface) 0%, var(--app-surface-soft) 100%) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

html[data-theme="dark"] .device-card-shell {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.device-card-shell--running {
    border-color: rgba(37, 99, 235, .55) !important;
}

html[data-theme="dark"] .device-card-shell--running {
    border-color: rgba(94, 161, 255, .62) !important;
}

.device-progress-layer {
    --device-progress-fill: linear-gradient(90deg, rgba(37, 99, 235, .26) 0%, rgba(37, 99, 235, .14) 100%);
    background-color: transparent !important;
    background-image:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, .26) 0,
            rgba(255, 255, 255, .26) 8px,
            transparent 8px,
            transparent 16px
        ),
        var(--device-progress-fill) !important;
    background-size: 24px 24px, 100% 100% !important;
    background-repeat: repeat, no-repeat !important;
    background-position: 0 0, 0 0 !important;
}

.device-card-shell--running .device-progress-layer {
    opacity: 1;
    animation: app-progress-flow 1s linear infinite;
}

.device-progress-layer::after {
    display: none;
}

.device-card-shell--running .device-progress-layer::after {
    display: none;
}

@keyframes app-progress-flow {
    from {
        background-position: 0 0, 0 0;
    }
    to {
        background-position: 24px 24px, 0 0;
    }
}

.device-title-btn {
    border-radius: 8px !important;
    border-color: var(--app-border) !important;
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
}

.device-title-btn--running {
    background: var(--app-primary-soft) !important;
    border-color: var(--app-primary) !important;
    color: var(--app-primary) !important;
}

.device-title-btn--inactive,
.device-title-btn:disabled,
.device-text-title--muted,
.device-name-text--muted {
    color: var(--app-muted) !important;
    opacity: .74;
}

.device-metric-value {
    color: var(--app-text) !important;
}

.device-info-text--wrap {
    white-space: pre-line !important;
    overflow-wrap: anywhere;
}

.device-card-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.condition-groups {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.and-box,
.or-box {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.and-box {
    border-left: 3px solid var(--app-primary) !important;
    padding: 0 0 0 .55rem !important;
}

.or-box {
    border-left: 3px solid #198754 !important;
    margin: 0 0 .42rem 0 !important;
    padding: 0 0 0 .5rem !important;
}

.condition-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .45rem;
    align-items: center;
    min-height: 34px;
}

.condition-row + .condition-row {
    margin-top: .42rem;
}

.condition-row--empty {
    min-height: 34px;
}

.condition-empty-line {
    height: 1px;
    min-width: 130px;
    background: var(--app-border);
}

.condition-actions {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
}

.condition-fields {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.condition-add-group {
    margin-top: .1rem;
    align-self: flex-start;
}

.condition-select,
.time-selector .form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important;
    padding-left: .35rem !important;
    padding-right: .35rem !important;
    text-align: center;
    text-align-last: center;
}

.condition-source-select {
    width: 58px !important;
    min-width: 58px !important;
}

.condition-op-select {
    width: 44px !important;
    min-width: 44px !important;
}

.condition-number-input {
    width: 56px !important;
    min-width: 56px !important;
    text-align: center;
}

.time-selector {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    flex: 0 0 auto;
    white-space: nowrap;
}

.time-mode-select {
    width: 32px !important;
    min-width: 32px !important;
}

.time-part-select {
    width: 38px !important;
    min-width: 38px !important;
    font-variant-numeric: tabular-nums;
}

.time-separator {
    color: var(--app-muted);
    font-weight: 700;
    line-height: 1;
}

.status-dot {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 50%;
    background: #9aa6b8;
    box-shadow: 0 0 0 4px rgba(154, 166, 184, .16);
}

.status-dot--online {
    background: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .16);
}

.status-dot--offline {
    background: #a8b6c8;
}

@media (max-width: 576px) {
    .page-inner,
    .auth-inner {
        padding-left: 0;
        padding-right: 0;
    }

    main {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    .navbar {
        border-radius: 0 !important;
        margin-bottom: .75rem !important;
    }

    .device-card-shell {
        flex-wrap: wrap;
        padding: .72rem .8rem !important;
    }

    .device-card-main {
        flex: 1 1 calc(100% - 112px);
    }

    .device-card-actions {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .device-title-row {
        align-items: flex-start !important;
        gap: .5rem !important;
    }

    .device-info-text {
        font-size: 12px;
        line-height: 1.35;
    }

    .editor-inline-row {
        flex-wrap: wrap !important;
        white-space: normal !important;
        overflow-x: visible !important;
    }

    .editor-inline-row .form-select,
    .editor-inline-row .form-control {
        max-width: 100% !important;
    }

    .compact-field-wide {
        min-width: 140px !important;
    }

    .modal-dialog {
        margin: .35rem;
    }

    .modal-body {
        padding: .85rem;
    }
}