:root {
    --bg: #f4f7fb;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --sidebar: #071522;
    --sidebar-soft: #102438;
    --primary: #0ea5e9;
    --primary-dark: #0284c7;
    --text: #172033;
    --muted: #68758b;
    --border: #e3e9f1;
    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --shadow: 0 15px 40px rgba(15, 23, 42, .08);
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, Arial, Helvetica, sans-serif;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    width: 270px;
    padding: 24px 18px;
    background:
        radial-gradient(circle at top left, rgba(14, 165, 233, .22), transparent 30%),
        var(--sidebar);
    color: #dce7f3;
    transition: transform .25s ease;
}

.sidebar-brand,
.login-brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.sidebar-brand {
    padding: 0 9px 25px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sidebar-brand strong,
.login-brand strong {
    display: block;
    color: #fff;
    font-size: 18px;
}

.sidebar-brand span {
    display: block;
    margin-top: 4px;
    color: #8296aa;
    font-size: 12px;
}

.brand-symbol {
    display: grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(145deg, #38bdf8, #0284c7);
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    box-shadow: 0 12px 25px rgba(14, 165, 233, .3);
}

.brand-symbol.large {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    font-size: 26px;
}

.sidebar-menu {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
    padding: 24px 0;
    overflow-y: auto;
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border-radius: 11px;
    color: #9fb0c1;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: .18s ease;
}

.sidebar-menu a:hover,
.sidebar-menu a.active {
    background: rgba(56, 189, 248, .13);
    color: #fff;
}

.sidebar-menu a.active {
    box-shadow: inset 3px 0 #38bdf8;
}

.menu-icon {
    display: grid;
    width: 25px;
    place-items: center;
    color: #56c8f4;
    font-size: 17px;
}

.sidebar-footer {
    padding: 18px 9px 2px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.sidebar-company span,
.sidebar-company strong {
    display: block;
}

.sidebar-company span {
    color: #758a9f;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sidebar-company strong {
    margin-top: 6px;
    color: #fff;
    font-size: 14px;
}

.logout-link {
    display: block;
    margin-top: 18px;
    color: #fca5a5;
    font-size: 13px;
    text-decoration: none;
}

.app-main {
    width: calc(100% - 270px);
    min-height: 100vh;
    margin-left: 270px;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 18px;
    height: 84px;
    padding: 0 32px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
}

.menu-toggle {
    display: none;
    border: 0;
    background: none;
    color: var(--text);
    font-size: 24px;
    cursor: pointer;
}

.page-heading {
    flex: 1;
}

.page-heading span {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.page-heading h1 {
    margin: 0;
    font-size: 22px;
}

.user-panel {
    display: flex;
    align-items: center;
    gap: 11px;
}

.user-avatar {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 13px;
    background: #e0f2fe;
    color: #0369a1;
    font-weight: 800;
}

.user-panel strong,
.user-panel span {
    display: block;
}

.user-panel strong {
    font-size: 13px;
}

.user-panel span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.content {
    padding: 30px 32px 50px;
}

.welcome-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 30px;
    border-radius: 20px;
    background:
        linear-gradient(120deg, rgba(7, 21, 34, .96), rgba(15, 58, 82, .96)),
        var(--sidebar);
    color: #fff;
    box-shadow: var(--shadow);
}

.eyebrow {
    display: block;
    margin-bottom: 10px;
    color: #38bdf8;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .13em;
}

.welcome-card h2 {
    margin: 0 0 9px;
    font-size: 26px;
}

.welcome-card p {
    max-width: 660px;
    margin: 0;
    color: #a9bbca;
    line-height: 1.6;
}

.welcome-date {
    display: grid;
    min-width: 88px;
    height: 88px;
    place-content: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    background: rgba(255, 255, 255, .07);
    text-align: center;
}

.welcome-date span {
    font-size: 27px;
    font-weight: 800;
}

.welcome-date strong,
.welcome-date small {
    color: #81d4f7;
    font-size: 10px;
    letter-spacing: .09em;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.kpi-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.kpi-card > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.kpi-card > strong {
    display: block;
    margin: 13px 0 7px;
    font-size: clamp(23px, 2vw, 31px);
    letter-spacing: -.04em;
}

.kpi-card > small {
    color: #8d99aa;
    font-size: 11px;
}

.kpi-card.danger > strong {
    color: var(--danger);
}

.secondary-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 22px 0;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    overflow: hidden;
}

.secondary-kpis article {
    padding: 19px 22px;
    border-right: 1px solid var(--border);
}

.secondary-kpis article:last-child {
    border-right: 0;
}

.secondary-kpis span,
.secondary-kpis strong {
    display: block;
}

.secondary-kpis span {
    color: var(--muted);
    font-size: 11px;
}

.secondary-kpis strong {
    margin-top: 8px;
    font-size: 19px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
    gap: 22px;
}

.panel {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 23px;
    border-bottom: 1px solid var(--border);
}

.panel-header span {
    color: var(--primary-dark);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.panel-header h3 {
    margin: 5px 0 0;
    font-size: 17px;
}

.panel-header a {
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.table-responsive {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

th {
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

td {
    font-size: 13px;
}

.status-badge {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: #eef2f7;
    color: #475569;
    font-size: 10px;
    font-weight: 700;
}

.status-ativo,
.status-pago {
    background: #dcfce7;
    color: #15803d;
}

.status-inadimplente,
.status-vencido,
.status-cancelado {
    background: #fee2e2;
    color: #b91c1c;
}

.billing-list {
    padding: 5px 22px;
}

.billing-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.billing-item:last-child {
    border-bottom: 0;
}

.billing-item div strong,
.billing-item div span {
    display: block;
}

.billing-item div strong {
    font-size: 13px;
}

.billing-item div span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
}

.billing-item > strong {
    font-size: 13px;
}

.empty-state {
    padding: 45px 25px;
    text-align: center;
}

.empty-state strong {
    font-size: 14px;
}

.empty-state p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.alert {
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: 13px;
}

.alert-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.alert-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.alert-error {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.login-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 10%, rgba(14, 165, 233, .18), transparent 26%),
        var(--sidebar);
}

.login-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr);
    min-height: 100vh;
}

.login-presentation {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 58px 8vw;
    color: #fff;
}

.login-presentation h1 {
    max-width: 680px;
    margin: 15px 0;
    font-size: clamp(38px, 5vw, 67px);
    line-height: 1.04;
    letter-spacing: -.05em;
}

.login-presentation p {
    max-width: 610px;
    color: #a9bbca;
    font-size: 17px;
    line-height: 1.7;
}

.login-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.login-metrics div {
    padding: 17px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
}

.login-metrics strong,
.login-metrics span {
    display: block;
}

.login-metrics strong {
    margin-bottom: 7px;
    font-size: 13px;
}

.login-metrics span {
    color: #8296aa;
    font-size: 11px;
    line-height: 1.5;
}

.login-card {
    align-self: center;
    width: min(460px, calc(100% - 40px));
    margin: 30px auto;
    padding: 38px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 35px 80px rgba(0, 0, 0, .25);
}

.login-card-header {
    margin-bottom: 25px;
}

.login-card-header > span {
    color: var(--primary-dark);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.login-card-header h2 {
    margin: 8px 0;
    font-size: 27px;
}

.login-card-header p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.form-stack {
    display: grid;
    gap: 17px;
}

.form-stack label > span {
    display: block;
    margin-bottom: 7px;
    color: #455166;
    font-size: 12px;
    font-weight: 700;
}

.form-stack input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #d8e0ea;
    border-radius: 11px;
    outline: none;
    transition: .18s ease;
}

.form-stack input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .1);
}

.button {
    min-height: 47px;
    padding: 0 18px;
    border: 0;
    border-radius: 11px;
    font-weight: 700;
    cursor: pointer;
}

.button-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 12px 24px rgba(14, 165, 233, .22);
}

.button-full {
    width: 100%;
}

.login-security {
    margin-top: 21px;
    color: #8a96a8;
    font-size: 10px;
    text-align: center;
}

.password-wrapper {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 30px;
}

.password-card {
    width: min(460px, 100%);
    padding: 38px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 35px 80px rgba(0, 0, 0, .25);
}

.password-card .login-brand {
    margin-bottom: 32px;
}

.password-card .login-brand strong {
    color: var(--text);
}

@media (max-width: 1100px) {
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .app-main {
        width: 100%;
        margin-left: 0;
    }

    .menu-toggle {
        display: block;
    }

    .login-wrapper {
        grid-template-columns: 1fr;
    }

    .login-presentation {
        display: none;
    }
}

@media (max-width: 650px) {
    .topbar {
        height: 73px;
        padding: 0 18px;
    }

    .user-panel > div:last-child {
        display: none;
    }

    .content {
        padding: 20px 15px 40px;
    }

    .welcome-card {
        align-items: flex-start;
        padding: 23px;
    }

    .welcome-date {
        display: none;
    }

    .kpi-grid,
    .secondary-kpis {
        grid-template-columns: 1fr;
    }

    .secondary-kpis article {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .secondary-kpis article:last-child {
        border-bottom: 0;
    }

    .login-card {
        padding: 28px 23px;
    }
}

/* =========================================================
   STREAMCONTROL - SPRINT 1 CLIENTES
   ========================================================= */

.module-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.module-heading h2 {
    margin: 0 0 7px;
    font-size: 28px;
}

.module-heading p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.compact-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 22px;
}

.compact-kpis article {
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
}

.compact-kpis span,
.compact-kpis strong {
    display: block;
}

.compact-kpis span {
    color: var(--muted);
    font-size: 11px;
}

.compact-kpis strong {
    margin-top: 7px;
    font-size: 24px;
}

.danger-text strong {
    color: var(--danger);
}

.filter-panel {
    margin-bottom: 22px;
    padding: 20px;
}

.filter-grid {
    display: flex;
    align-items: end;
    gap: 14px;
}

.field {
    display: block;
    min-width: 0;
}

.field-grow {
    flex: 1;
}

.field > span {
    display: block;
    margin-bottom: 7px;
    color: #455166;
    font-size: 11px;
    font-weight: 700;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 45px;
    padding: 10px 13px;
    border: 1px solid #d8e0ea;
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    outline: none;
}

.field textarea {
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .1);
}

.filter-actions {
    display: flex;
    gap: 8px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.button-secondary {
    border: 1px solid #b8dff2;
    background: #eaf7fd;
    color: #0369a1;
}

.button-light {
    border: 1px solid var(--border);
    background: #fff;
    color: #475569;
}

.button-small {
    min-height: 34px;
    padding: 0 11px;
    font-size: 11px;
}

.table-primary-link {
    color: #075985;
    font-weight: 750;
    text-decoration: none;
}

.table-primary-link:hover {
    text-decoration: underline;
}

.table-subtitle {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
}

.table-actions {
    display: flex;
    gap: 7px;
}

.wizard-form {
    display: grid;
    gap: 20px;
}

.wizard-steps {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #fff;
}

.wizard-step {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.wizard-step span {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    background: #eef2f7;
    font-size: 10px;
}

.wizard-step.active {
    background: #eaf7fd;
    color: #0369a1;
}

.wizard-step.active span,
.wizard-step.completed span {
    background: var(--primary);
    color: #fff;
}

.wizard-page {
    display: none;
    padding: 27px;
}

.wizard-page.active {
    display: block;
}

.form-section-heading {
    margin-bottom: 24px;
}

.form-section-heading span {
    color: var(--primary-dark);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.form-section-heading h3 {
    margin: 6px 0 0;
    font-size: 20px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
}

.field-span-2 {
    grid-column: span 2;
}

.field-span-full {
    grid-column: 1 / -1;
}

.selection-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.selection-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 115px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}

.selection-card input {
    position: absolute;
    opacity: 0;
}

.selection-check {
    width: 20px;
    height: 20px;
    margin-bottom: 14px;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
}

.selection-card:has(input:checked) {
    border-color: var(--primary);
    background: #f0f9ff;
}

.selection-card:has(input:checked) .selection-check {
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: inset 0 0 0 4px #fff;
}

.selection-card strong {
    font-size: 13px;
}

.selection-card small {
    margin-top: 5px;
    color: var(--muted);
}

.review-card {
    padding: 24px;
    border: 1px dashed #b7c6d7;
    border-radius: 15px;
    background: var(--surface-soft);
}

.review-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.review-highlight {
    margin-top: 20px;
    padding: 18px;
    border-radius: 12px;
    background: #fff;
}

.review-highlight strong,
.review-highlight span {
    display: block;
}

.review-highlight span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
}

.wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #fff;
}

.hidden {
    display: none !important;
}

.customer-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 20px;
    padding: 25px;
    border-radius: 18px;
    background:
        linear-gradient(120deg, rgba(7, 21, 34, .97), rgba(15, 58, 82, .96));
    color: #fff;
}

.customer-main,
.customer-title-line,
.customer-actions {
    display: flex;
    align-items: center;
}

.customer-main {
    gap: 17px;
}

.customer-avatar {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 18px;
    background: rgba(255, 255, 255, .09);
    color: #7dd3fc;
    font-size: 25px;
    font-weight: 800;
}

.customer-title-line {
    gap: 12px;
}

.customer-title-line h2 {
    margin: 0;
    font-size: 26px;
}

.customer-main p {
    margin: 7px 0 0;
    color: #a9bbca;
}

.customer-actions {
    gap: 9px;
}

.customer-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 21px;
}

.customer-summary-grid article {
    padding: 19px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #fff;
}

.customer-summary-grid span,
.customer-summary-grid strong,
.customer-summary-grid small {
    display: block;
}

.customer-summary-grid span,
.customer-summary-grid small {
    color: var(--muted);
    font-size: 11px;
}

.customer-summary-grid strong {
    margin: 8px 0 5px;
    font-size: 22px;
}

.summary-danger strong {
    color: var(--danger);
}

.customer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 21px;
    align-items: start;
}

.customer-content {
    display: grid;
    gap: 21px;
    min-width: 0;
}

.customer-sidebar {
    display: grid;
    gap: 21px;
    min-width: 0;
}

.customer-section {
    min-width: 0;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding: 22px;
}

.detail-grid span,
.detail-grid strong {
    display: block;
}

.detail-grid span {
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.detail-grid strong {
    font-size: 13px;
    line-height: 1.5;
}

.detail-span-full {
    grid-column: 1 / -1;
}

.card-list {
    padding: 8px 22px;
}

.information-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.information-card:last-child {
    border-bottom: 0;
}

.information-card strong,
.information-card span {
    display: block;
}

.information-card span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
}

.information-value {
    text-align: right;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    padding: 20px;
}

.service-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 13px;
}

.service-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 12px;
}

.service-card > div:nth-child(2) {
    flex: 1;
}

.service-card strong,
.service-card span {
    display: block;
}

.service-card div span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
}

.status-form {
    display: grid;
    gap: 15px;
    padding: 20px;
}

.timeline {
    position: relative;
    padding: 20px;
}

.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 11px;
    padding-bottom: 23px;
}

.timeline-item::before {
    position: absolute;
    top: 13px;
    bottom: -2px;
    left: 5px;
    width: 2px;
    background: #e2e8f0;
    content: '';
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-dot {
    position: relative;
    z-index: 1;
    width: 12px;
    height: 12px;
    margin-top: 3px;
    border: 3px solid #bae6fd;
    border-radius: 50%;
    background: var(--primary);
}

.timeline-item strong {
    font-size: 12px;
}

.timeline-item p {
    margin: 5px 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.timeline-item small {
    color: #94a3b8;
    font-size: 9px;
}

.status-suspenso,
.status-manutencao,
.status-parcial {
    background: #fef3c7;
    color: #92400e;
}

.status-instalado,
.status-ativa {
    background: #dcfce7;
    color: #15803d;
}

.status-estoque,
.status-prospect,
.status-aberto {
    background: #e0f2fe;
    color: #0369a1;
}

@media (max-width: 1100px) {
    .wizard-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .selection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customer-layout {
        grid-template-columns: 1fr;
    }

    .customer-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .module-heading,
    .customer-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .compact-kpis,
    .customer-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-grid {
        align-items: stretch;
        flex-direction: column;
    }

    .form-grid,
    .service-grid {
        grid-template-columns: 1fr;
    }

    .field-span-2 {
        grid-column: auto;
    }

    .selection-grid {
        grid-template-columns: 1fr;
    }

    .customer-actions {
        width: 100%;
    }

    .customer-actions .button {
        flex: 1;
    }
}

@media (max-width: 520px) {
    .wizard-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .compact-kpis,
    .customer-summary-grid {
        grid-template-columns: 1fr;
    }

    .customer-title-line {
        align-items: flex-start;
        flex-direction: column;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .detail-span-full {
        grid-column: auto;
    }
}

/* =========================================================
   STREAMCONTROL - CADASTROS MESTRES
   ========================================================= */

.menu-group {
    display: grid;
    gap: 4px;
    margin-bottom: 17px;
}

.menu-group-title {
    display: block;
    padding: 0 14px 7px;
    color: #60788e;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.master-layout {
    display: grid;
    grid-template-columns: minmax(310px, .72fr) minmax(0, 1.28fr);
    gap: 22px;
    align-items: start;
}

.master-form-panel {
    position: sticky;
    top: 106px;
}

.master-form {
    display: grid;
    gap: 17px;
    padding: 22px;
}

.master-form-actions {
    display: grid;
    gap: 9px;
    margin-top: 5px;
}

.form-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.switch-field {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #455166;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.switch-field input {
    position: absolute;
    opacity: 0;
}

.switch-control {
    position: relative;
    width: 43px;
    height: 24px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: .2s ease;
}

.switch-control::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .2);
    content: '';
    transition: .2s ease;
}

.switch-field input:checked + .switch-control {
    background: var(--success);
}

.switch-field input:checked + .switch-control::after {
    transform: translateX(19px);
}

.master-filter {
    display: flex;
    align-items: end;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}

.master-filter .field-grow {
    flex: 1;
}

.master-list {
    display: grid;
}

.master-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 22px;
    border-bottom: 1px solid var(--border);
}

.master-list-item:last-child {
    border-bottom: 0;
}

.master-list-item:hover {
    background: #fbfdff;
}

.master-list-main {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.master-list-icon {
    display: grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 16px;
    font-weight: 800;
}

.master-list-main strong,
.master-list-main div > span {
    display: block;
}

.master-list-main strong {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.master-list-main div > span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.4;
}

.master-list-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
}

.master-list-actions form {
    margin: 0;
}

.button-danger-soft {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.button-success-soft {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

@media (max-width: 1050px) {
    .master-layout {
        grid-template-columns: 1fr;
    }

    .master-form-panel {
        position: static;
    }
}

@media (max-width: 720px) {
    .master-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .master-list-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .master-list-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .master-list-actions form {
        flex: 1;
    }

    .master-list-actions .button {
        width: 100%;
    }

    .form-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   STREAMCONTROL - CONTAS E PERFIS
   ========================================================= */

.streaming-account-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding: 22px;
}

.streaming-account-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

.streaming-account-card > header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px;
    border-bottom: 1px solid var(--border);
}

.streaming-account-card > header > div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.streaming-account-card header span,
.streaming-account-card header strong {
    display: block;
}

.streaming-account-card header div:nth-child(2) > span {
    color: var(--primary-dark);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.streaming-account-card header strong {
    overflow: hidden;
    margin-top: 4px;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.streaming-service-symbol {
    display: grid;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 12px;
}

.account-occupancy {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--border);
}

.account-occupancy div {
    padding: 14px;
    border-right: 1px solid var(--border);
    text-align: center;
}

.account-occupancy div:last-child {
    border-right: 0;
}

.account-occupancy span,
.account-occupancy strong {
    display: block;
}

.account-occupancy span {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
}

.account-occupancy strong {
    margin-top: 5px;
    font-size: 20px;
}

.account-details {
    display: grid;
    gap: 12px;
    padding: 17px;
}

.account-details div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.account-details span {
    color: var(--muted);
    font-size: 10px;
}

.account-details strong {
    font-size: 11px;
    text-align: right;
}

.streaming-account-card > footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 17px;
    border-top: 1px solid var(--border);
    background: var(--surface-soft);
}

.text-danger {
    color: var(--danger);
}

.text-warning {
    color: var(--warning);
}

.account-form-container {
    padding: 28px;
}

.account-form {
    max-width: 900px;
    margin: 0 auto;
}

.password-input-group {
    display: flex;
    gap: 8px;
}

.password-input-group input {
    flex: 1;
}

.password-toggle {
    flex: 0 0 auto;
    min-width: 90px;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.module-heading-actions {
    display: flex;
    gap: 9px;
}

.availability-list {
    display: grid;
    gap: 22px;
}

.availability-account {
    overflow: visible;
}

.availability-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 23px;
    border-bottom: 1px solid var(--border);
}

.availability-header > div:first-child > span {
    color: var(--primary-dark);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.availability-header h3 {
    margin: 5px 0 0;
    font-size: 17px;
}

.availability-summary {
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--muted);
    font-size: 11px;
}

.availability-free {
    color: var(--success);
    font-weight: 800;
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 20px;
}

.profile-card {
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #fff;
    overflow: hidden;
}

.profile-livre {
    border-color: #bbf7d0;
}

.profile-ocupado {
    border-color: #bae6fd;
}

.profile-bloqueado {
    border-color: #fecaca;
}

.profile-card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 15px;
    border-bottom: 1px solid var(--border);
}

.profile-card header span,
.profile-card header strong {
    display: block;
}

.profile-card header div > span {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
}

.profile-card header strong {
    margin-top: 5px;
    font-size: 13px;
}

.profile-customer {
    min-height: 72px;
    padding: 14px 15px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}

.profile-customer span,
.profile-customer strong,
.profile-customer a {
    display: block;
}

.profile-customer span {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
}

.profile-customer strong,
.profile-customer a {
    margin-top: 6px;
    color: var(--text);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.profile-customer a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.profile-form {
    display: grid;
    gap: 11px;
    padding: 15px;
}

.profile-form .field > span {
    font-size: 9px;
}

.profile-form .field input,
.profile-form .field select,
.profile-form .field textarea {
    min-height: 39px;
    font-size: 11px;
}

.status-livre {
    background: #dcfce7;
    color: #15803d;
}

.status-ocupado {
    background: #e0f2fe;
    color: #0369a1;
}

.status-bloqueado {
    background: #fee2e2;
    color: #b91c1c;
}

@media (max-width: 1250px) {
    .streaming-account-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .profile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .streaming-account-grid,
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .availability-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .availability-summary {
        width: 100%;
        flex-wrap: wrap;
    }

    .module-heading-actions {
        width: 100%;
    }

    .module-heading-actions .button {
        flex: 1;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .button {
        width: 100%;
    }
}

/* =========================================================
   STREAMCONTROL - VINCULO CLIENTE E STREAMING
   ========================================================= */

.customer-service-layout {
    display: grid;
    grid-template-columns: minmax(320px, .7fr) minmax(0, 1.3fr);
    gap: 22px;
    align-items: start;
}

.customer-service-form-panel {
    position: sticky;
    top: 106px;
}

.customer-service-form {
    display: grid;
    gap: 17px;
    padding: 22px;
}

.streaming-availability-message {
    min-height: 19px;
    font-size: 11px;
    line-height: 1.5;
}

.streaming-availability-message.success {
    color: var(--success);
}

.streaming-availability-message.error {
    color: var(--danger);
}

.customer-service-list {
    display: grid;
}

.customer-service-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 15px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
}

.customer-service-item:last-child {
    border-bottom: 0;
}

.customer-service-icon {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border-radius: 12px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 12px;
}

.customer-service-content {
    min-width: 0;
}

.customer-service-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.customer-service-title strong,
.customer-service-title div > span {
    display: block;
}

.customer-service-title strong {
    font-size: 14px;
}

.customer-service-title div > span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
}

.customer-service-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    margin-top: 16px;
    padding: 14px;
    border-radius: 12px;
    background: var(--surface-soft);
}

.customer-service-details span,
.customer-service-details strong {
    display: block;
}

.customer-service-details span {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.customer-service-details strong {
    margin-top: 5px;
    font-size: 11px;
}

.customer-service-observation {
    margin: 13px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

.customer-service-actions {
    display: flex;
    align-items: flex-start;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(2, 12, 27, .68);
    backdrop-filter: blur(5px);
}

.modal-card {
    width: min(520px, 100%);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 35px 90px rgba(0, 0, 0, .35);
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
}

.modal-header span {
    color: var(--primary-dark);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.modal-header h3 {
    margin: 5px 0 0;
    font-size: 18px;
}

.modal-close {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 23px;
    cursor: pointer;
}

.modal-body {
    display: grid;
    gap: 17px;
    padding: 22px;
}

.modal-body > p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.modal-highlight {
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
}

.modal-highlight span,
.modal-highlight strong {
    display: block;
}

.modal-highlight span {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
}

.modal-highlight strong {
    margin-top: 6px;
    font-size: 14px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding-top: 5px;
}

@media (max-width: 1050px) {
    .customer-service-layout {
        grid-template-columns: 1fr;
    }

    .customer-service-form-panel {
        position: static;
    }
}

@media (max-width: 760px) {
    .customer-service-item {
        grid-template-columns: 43px minmax(0, 1fr);
    }

    .customer-service-actions {
        grid-column: 1 / -1;
    }

    .customer-service-actions .button {
        width: 100%;
    }

    .customer-service-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .customer-service-title {
        flex-direction: column;
    }

    .customer-service-details {
        grid-template-columns: 1fr;
    }

    .modal-actions {
        flex-direction: column;
    }

    .modal-actions .button {
        width: 100%;
    }
}

/* =========================================================
   STREAMCONTROL - EQUIPAMENTOS
   ========================================================= */

.equipment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding: 22px;
}

.equipment-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

.equipment-card > header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px;
    border-bottom: 1px solid var(--border);
}

.equipment-card > header > div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.equipment-card header div:nth-child(2) > span {
    display: block;
    color: var(--primary-dark);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.equipment-card header strong {
    display: block;
    overflow: hidden;
    margin-top: 5px;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.equipment-symbol {
    display: grid;
    flex: 0 0 auto;
    width: 41px;
    height: 41px;
    place-items: center;
    border-radius: 12px;
    background: #e0f2fe;
    color: #0369a1;
}

.equipment-property-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 17px;
    border-bottom: 1px solid var(--border);
}

.equipment-property-line a {
    overflow: hidden;
    color: var(--primary-dark);
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.property-badge {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
}

.property-empresa {
    background: #dbeafe;
    color: #1d4ed8;
}

.property-cliente {
    background: #dcfce7;
    color: #15803d;
}

.property-terceiro {
    background: #fef3c7;
    color: #92400e;
}

.equipment-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    padding: 17px;
}

.equipment-details span,
.equipment-details strong {
    display: block;
}

.equipment-details span {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
}

.equipment-details strong {
    overflow-wrap: anywhere;
    margin-top: 5px;
    font-size: 11px;
}

.equipment-card > footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 17px;
    border-top: 1px solid var(--border);
    background: var(--surface-soft);
}

.property-selection-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 25px;
}

.property-selection-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 135px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
}

.property-selection-card input {
    position: absolute;
    opacity: 0;
}

.property-selection-check {
    width: 21px;
    height: 21px;
    margin-bottom: 15px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
}

.property-selection-card:has(input:checked) {
    border-color: var(--primary);
    background: #f0f9ff;
}

.property-selection-card:has(input:checked) .property-selection-check {
    border: 6px solid var(--primary);
}

.property-selection-card strong {
    font-size: 13px;
}

.property-selection-card small {
    margin-top: 6px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
}

.equipment-rule-message {
    margin-top: 20px;
    padding: 13px 15px;
    border-radius: 11px;
    font-size: 11px;
    line-height: 1.5;
}

.equipment-rule-message.company {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e40af;
}

.equipment-rule-message.client {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.equipment-rule-message.third-party {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.equipment-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 22px;
    padding: 25px;
    border-radius: 18px;
    background: linear-gradient(120deg, #071522, #123f59);
    color: #fff;
}

.equipment-hero-main {
    display: flex;
    align-items: center;
    gap: 16px;
}

.equipment-hero-icon {
    display: grid;
    width: 61px;
    height: 61px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 17px;
    background: rgba(255,255,255,.08);
    color: #7dd3fc;
    font-size: 24px;
}

.equipment-hero-main span {
    color: #7dd3fc;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.equipment-hero-main h2 {
    margin: 5px 0;
    font-size: 25px;
}

.equipment-hero-main p {
    margin: 0;
    color: #a9bbca;
    font-size: 12px;
}

.equipment-view-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 22px;
    align-items: start;
}

.equipment-view-content {
    display: grid;
    gap: 22px;
}

.equipment-view-sidebar {
    position: sticky;
    top: 106px;
}

.equipment-timeline {
    padding: 20px 22px;
}

.equipment-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 11px;
    padding-bottom: 23px;
}

.equipment-timeline-item::before {
    position: absolute;
    top: 13px;
    bottom: -2px;
    left: 5px;
    width: 2px;
    background: #e2e8f0;
    content: '';
}

.equipment-timeline-item:last-child::before {
    display: none;
}

.equipment-timeline-item strong,
.equipment-timeline-item span,
.equipment-timeline-item small {
    display: block;
}

.equipment-timeline-item strong {
    font-size: 12px;
}

.equipment-timeline-item span {
    margin-top: 4px;
    color: var(--primary-dark);
    font-size: 10px;
}

.equipment-timeline-item p {
    margin: 6px 0;
    color: var(--muted);
    font-size: 11px;
}

.equipment-timeline-item small {
    color: #94a3b8;
    font-size: 9px;
}

.customer-equipment-layout {
    display: grid;
    grid-template-columns: minmax(310px, .65fr) minmax(0, 1.35fr);
    gap: 22px;
    align-items: start;
}

.customer-equipment-install {
    position: sticky;
    top: 106px;
}

.customer-equipment-list {
    display: grid;
}

.customer-equipment-item {
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 17px 22px;
    border-bottom: 1px solid var(--border);
}

.customer-equipment-item:last-child {
    border-bottom: 0;
}

.customer-equipment-item strong,
.customer-equipment-item div:nth-child(2) > span {
    display: block;
}

.customer-equipment-item div:nth-child(2) > span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
}

.customer-equipment-item-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

@media (max-width: 1200px) {
    .equipment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {
    .equipment-view-layout,
    .customer-equipment-layout {
        grid-template-columns: 1fr;
    }

    .equipment-view-sidebar,
    .customer-equipment-install {
        position: static;
    }
}

@media (max-width: 760px) {
    .equipment-grid,
    .property-selection-grid {
        grid-template-columns: 1fr;
    }

    .equipment-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .customer-equipment-item {
        grid-template-columns: 43px minmax(0, 1fr);
    }

    .customer-equipment-item-actions {
        grid-column: 1 / -1;
        flex-wrap: wrap;
    }
}

/* =========================================================
   STREAMCONTROL - ASSINATURAS
   ========================================================= */

.subscription-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding: 22px;
}

.subscription-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

.subscription-card > header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px;
    border-bottom: 1px solid var(--border);
}

.subscription-card > header > div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.subscription-card header div:nth-child(2) > span {
    display: block;
    color: var(--primary-dark);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.subscription-card header a {
    display: block;
    overflow: hidden;
    margin-top: 5px;
    color: var(--text);
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subscription-card header a:hover {
    color: var(--primary-dark);
}

.subscription-card header small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
}

.subscription-symbol {
    display: grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 18px;
}

.subscription-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--border);
}

.subscription-values div {
    padding: 14px 10px;
    border-right: 1px solid var(--border);
    text-align: center;
}

.subscription-values div:last-child {
    border-right: 0;
}

.subscription-values span,
.subscription-values strong {
    display: block;
}

.subscription-values span {
    color: var(--muted);
    font-size: 8px;
    text-transform: uppercase;
}

.subscription-values strong {
    margin-top: 6px;
    font-size: 13px;
}

.subscription-details {
    display: grid;
    gap: 11px;
    padding: 17px;
}

.subscription-details div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.subscription-details span {
    color: var(--muted);
    font-size: 10px;
}

.subscription-details strong {
    font-size: 11px;
    text-align: right;
}

.subscription-reason {
    margin: 0;
    padding: 13px 17px;
    border-top: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
    font-size: 10px;
    line-height: 1.5;
}

.subscription-card > footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 17px;
    border-top: 1px solid var(--border);
    background: var(--surface-soft);
}

.subscription-form-container {
    padding: 28px;
}

.subscription-form {
    max-width: 940px;
    margin: 0 auto;
}

.subscription-renewal-switch {
    margin-top: 23px;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
}

.subscription-form-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 23px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--border);
    overflow: hidden;
}

.subscription-form-summary div {
    padding: 17px;
    background: #fff;
}

.subscription-form-summary span,
.subscription-form-summary strong {
    display: block;
}

.subscription-form-summary span {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
}

.subscription-form-summary strong {
    margin-top: 7px;
    font-size: 14px;
}

.status-cortesia {
    background: #f3e8ff;
    color: #7e22ce;
}

.status-suspensa {
    background: #fef3c7;
    color: #92400e;
}

@media (max-width: 1200px) {
    .subscription-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .subscription-grid {
        grid-template-columns: 1fr;
    }

    .subscription-form-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .subscription-values {
        grid-template-columns: 1fr;
    }

    .subscription-values div {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .subscription-values div:last-child {
        border-bottom: 0;
    }

    .subscription-card > footer {
        flex-direction: column;
    }

    .subscription-card > footer .button {
        width: 100%;
    }
}

/* =========================================================
   STREAMCONTROL - ASSINATURAS
   ========================================================= */

.subscription-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding: 22px;
}

.subscription-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

.subscription-card > header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px;
    border-bottom: 1px solid var(--border);
}

.subscription-card > header > div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.subscription-card header div:nth-child(2) > span {
    display: block;
    color: var(--primary-dark);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.subscription-card header a {
    display: block;
    overflow: hidden;
    margin-top: 5px;
    color: var(--text);
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subscription-card header a:hover {
    color: var(--primary-dark);
}

.subscription-card header small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
}

.subscription-symbol {
    display: grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 18px;
}

.subscription-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--border);
}

.subscription-values div {
    padding: 14px 10px;
    border-right: 1px solid var(--border);
    text-align: center;
}

.subscription-values div:last-child {
    border-right: 0;
}

.subscription-values span,
.subscription-values strong {
    display: block;
}

.subscription-values span {
    color: var(--muted);
    font-size: 8px;
    text-transform: uppercase;
}

.subscription-values strong {
    margin-top: 6px;
    font-size: 13px;
}

.subscription-details {
    display: grid;
    gap: 11px;
    padding: 17px;
}

.subscription-details div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.subscription-details span {
    color: var(--muted);
    font-size: 10px;
}

.subscription-details strong {
    font-size: 11px;
    text-align: right;
}

.subscription-reason {
    margin: 0;
    padding: 13px 17px;
    border-top: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
    font-size: 10px;
    line-height: 1.5;
}

.subscription-card > footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 17px;
    border-top: 1px solid var(--border);
    background: var(--surface-soft);
}

.subscription-form-container {
    padding: 28px;
}

.subscription-form {
    max-width: 940px;
    margin: 0 auto;
}

.subscription-renewal-switch {
    margin-top: 23px;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
}

.subscription-form-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 23px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--border);
    overflow: hidden;
}

.subscription-form-summary div {
    padding: 17px;
    background: #fff;
}

.subscription-form-summary span,
.subscription-form-summary strong {
    display: block;
}

.subscription-form-summary span {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
}

.subscription-form-summary strong {
    margin-top: 7px;
    font-size: 14px;
}

.status-cortesia {
    background: #f3e8ff;
    color: #7e22ce;
}

.status-suspensa {
    background: #fef3c7;
    color: #92400e;
}

@media (max-width: 1200px) {
    .subscription-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .subscription-grid {
        grid-template-columns: 1fr;
    }

    .subscription-form-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .subscription-values {
        grid-template-columns: 1fr;
    }

    .subscription-values div {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .subscription-values div:last-child {
        border-bottom: 0;
    }

    .subscription-card > footer {
        flex-direction: column;
    }

    .subscription-card > footer .button {
        width: 100%;
    }
}

/* =========================================================
   STREAMCONTROL - FINANCEIRO
   ========================================================= */

.generation-layout {
    display: grid;
    grid-template-columns: 350px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.generation-form-panel {
    position: sticky;
    top: 106px;
}

.generation-result,
.billing-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 22px;
}

.generation-result article,
.billing-summary-grid article {
    padding: 19px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #fff;
}

.generation-result span,
.generation-result strong,
.billing-summary-grid span,
.billing-summary-grid strong {
    display: block;
}

.generation-result span,
.billing-summary-grid span {
    color: var(--muted);
    font-size: 10px;
}

.generation-result strong,
.billing-summary-grid strong {
    margin-top: 8px;
    font-size: 22px;
}

.generation-preview-list {
    display: grid;
}

.generation-preview-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
}

.generation-preview-item:last-child {
    border-bottom: 0;
}

.generation-preview-item strong,
.generation-preview-item span {
    display: block;
}

.generation-preview-item div:first-child > span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
}

.generation-preview-value {
    text-align: right;
}

.generation-preview-value .status-badge {
    margin-top: 6px;
}

.generation-details-panel {
    margin-top: 22px;
}

.billing-filter-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(135px, 1fr)) auto;
    gap: 12px;
    align-items: end;
}

.billing-search {
    min-width: 0;
}

.billing-table td {
    white-space: nowrap;
}

.billing-table td:first-child {
    min-width: 210px;
    white-space: normal;
}

.billing-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 22px;
    padding: 25px;
    border-radius: 18px;
    background: linear-gradient(120deg, #071522, #123f59);
    color: #fff;
}

.billing-hero > div:first-child > span {
    color: #7dd3fc;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.billing-hero h2 {
    margin: 6px 0;
    font-size: 26px;
}

.billing-hero p {
    margin: 0;
    color: #a9bbca;
}

.billing-view-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 365px;
    gap: 22px;
    align-items: start;
}

.billing-view-content {
    display: grid;
    gap: 22px;
}

.billing-view-sidebar {
    position: sticky;
    top: 106px;
    display: grid;
    gap: 22px;
}

.billing-total-row td {
    font-weight: 800;
}

.payment-list {
    display: grid;
}

.payment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 17px 22px;
    border-bottom: 1px solid var(--border);
}

.payment-item:last-child {
    border-bottom: 0;
}

.payment-item strong,
.payment-item span {
    display: block;
}

.payment-item > div:first-child > span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
}

.payment-item > div:last-child {
    display: flex;
    gap: 15px;
    color: var(--muted);
    font-size: 9px;
}

.status-vencido {
    background: #fee2e2;
    color: #b91c1c;
}

.status-parcial {
    background: #fef3c7;
    color: #92400e;
}

.status-pago {
    background: #dcfce7;
    color: #15803d;
}

.status-negociado {
    background: #f3e8ff;
    color: #7e22ce;
}

@media (max-width: 1150px) {
    .billing-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .billing-search {
        grid-column: span 2;
    }
}

@media (max-width: 1000px) {
    .generation-layout,
    .billing-view-layout {
        grid-template-columns: 1fr;
    }

    .generation-form-panel,
    .billing-view-sidebar {
        position: static;
    }
}

@media (max-width: 760px) {
    .generation-result,
    .billing-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .billing-filter-grid {
        grid-template-columns: 1fr;
    }

    .billing-search {
        grid-column: auto;
    }

    .payment-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .payment-item > div:last-child {
        flex-wrap: wrap;
    }

    .billing-hero {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .generation-result,
    .billing-summary-grid {
        grid-template-columns: 1fr;
    }

    .generation-preview-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .generation-preview-value {
        text-align: left;
    }
}

/* =========================================================
   STREAMCONTROL - DASHBOARD EXECUTIVO
   ========================================================= */

.dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 22px;
    padding: 28px;
    border-radius: 19px;
    background:
        radial-gradient(
            circle at top right,
            rgba(14, 165, 233, .22),
            transparent 38%
        ),
        linear-gradient(
            125deg,
            #06131f,
            #0d2f44 70%,
            #10506f
        );
    color: #fff;
}

.dashboard-welcome h2 {
    margin: 7px 0;
    font-size: 29px;
}

.dashboard-welcome p {
    margin: 0;
    color: #a9bdcc;
    font-size: 12px;
}

.dashboard-welcome-actions {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.dashboard-main-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.dashboard-main-kpis article {
    position: relative;
    overflow: hidden;
    min-height: 132px;
    padding: 21px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
}

.dashboard-main-kpis article::after {
    position: absolute;
    right: -25px;
    bottom: -35px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(14, 165, 233, .055);
    content: '';
}

.dashboard-main-kpis span,
.dashboard-main-kpis strong,
.dashboard-main-kpis small {
    position: relative;
    z-index: 1;
    display: block;
}

.dashboard-main-kpis span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .055em;
}

.dashboard-main-kpis strong {
    margin-top: 13px;
    font-size: 25px;
}

.dashboard-main-kpis small {
    margin-top: 8px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
}

.dashboard-kpi-danger strong {
    color: var(--danger);
}

.dashboard-operation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
    margin-bottom: 24px;
}

.dashboard-operation-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

.dashboard-operation-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.dashboard-operation-card header span {
    display: block;
    color: var(--primary-dark);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .075em;
}

.dashboard-operation-card header h3 {
    margin: 5px 0 0;
    font-size: 15px;
}

.dashboard-operation-card header a {
    color: var(--primary-dark);
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
}

.dashboard-progress-wrap {
    padding: 22px 20px 17px;
}

.dashboard-progress-label {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 12px;
}

.dashboard-progress-label strong {
    font-size: 27px;
}

.dashboard-progress-label span {
    color: var(--muted);
    font-size: 10px;
}

.dashboard-progress {
    width: 100%;
    height: 9px;
    border-radius: 999px;
    background: #e7eef5;
    overflow: hidden;
}

.dashboard-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #0284c7,
            #38bdf8
        );
}

.dashboard-progress.small {
    height: 6px;
}

.dashboard-mini-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--border);
}

.dashboard-mini-kpis div {
    padding: 15px 12px;
    border-right: 1px solid var(--border);
    text-align: center;
}

.dashboard-mini-kpis div:last-child {
    border-right: 0;
}

.dashboard-mini-kpis span,
.dashboard-mini-kpis strong {
    display: block;
}

.dashboard-mini-kpis span {
    color: var(--muted);
    font-size: 8px;
    text-transform: uppercase;
}

.dashboard-mini-kpis strong {
    margin-top: 6px;
    font-size: 18px;
}

.equipment-dashboard-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.equipment-dashboard-kpis div:nth-child(3n) {
    border-right: 0;
}

.equipment-dashboard-kpis div:nth-child(-n+3) {
    border-bottom: 1px solid var(--border);
}

.dashboard-financial-lines {
    display: grid;
    gap: 0;
}

.dashboard-financial-lines div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.dashboard-financial-lines div:last-child {
    border-bottom: 0;
}

.dashboard-financial-lines span {
    color: var(--muted);
    font-size: 10px;
}

.dashboard-financial-lines strong {
    font-size: 13px;
    text-align: right;
}

.dashboard-alert-section {
    margin-bottom: 24px;
}

.dashboard-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}

.dashboard-section-heading span {
    display: block;
    color: var(--primary-dark);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.dashboard-section-heading h3 {
    margin: 5px 0 0;
    font-size: 18px;
}

.dashboard-alert-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-alert {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 138px;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    color: var(--text);
    text-decoration: none;
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.dashboard-alert:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 30px rgba(15, 23, 42, .08);
}

.dashboard-alert div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.dashboard-alert span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.35;
}

.dashboard-alert strong {
    font-size: 23px;
}

.dashboard-alert p {
    margin: 17px 0 0;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.5;
}

.dashboard-alert-danger {
    border-top: 3px solid #ef4444;
}

.dashboard-alert-danger strong {
    color: #b91c1c;
}

.dashboard-alert-warning {
    border-top: 3px solid #f59e0b;
}

.dashboard-alert-warning strong {
    color: #b45309;
}

.dashboard-alert-info {
    border-top: 3px solid #0ea5e9;
}

.dashboard-alert-info strong {
    color: #0369a1;
}

.dashboard-two-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 22px;
}

.dashboard-list-panel {
    min-width: 0;
}

.dashboard-list {
    display: grid;
}

.dashboard-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 17px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}

.dashboard-list-item:last-child {
    border-bottom: 0;
}

.dashboard-list-item:hover {
    background: #fbfdff;
}

.dashboard-list-item strong,
.dashboard-list-item span {
    display: block;
}

.dashboard-list-item div:first-child {
    min-width: 0;
}

.dashboard-list-item div:first-child > strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-list-item div:first-child > span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 9px;
}

.dashboard-list-value {
    flex: 0 0 auto;
    text-align: right;
}

.dashboard-list-value > strong {
    font-size: 12px;
}

.dashboard-list-value > span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 9px;
}

.dashboard-list-value .status-badge {
    margin-top: 5px;
}

.dashboard-availability-panel {
    margin-bottom: 22px;
}

.dashboard-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 20px;
}

.dashboard-service-grid article {
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}

.dashboard-service-grid header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

.dashboard-service-grid header div > span {
    display: block;
    color: var(--muted);
    font-size: 8px;
    text-transform: uppercase;
}

.dashboard-service-grid header strong {
    display: block;
    margin-top: 5px;
    font-size: 13px;
}

.dashboard-service-grid header > span {
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 800;
}

.dashboard-service-values {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    color: var(--muted);
    font-size: 8px;
}

.dashboard-shortcuts {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 10px;
}

.dashboard-shortcuts a {
    min-height: 128px;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    color: var(--text);
    text-decoration: none;
}

.dashboard-shortcuts a:hover {
    border-color: #bae6fd;
    background: #f8fdff;
}

.dashboard-shortcuts a > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 10px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 14px;
    font-weight: 800;
}

.dashboard-shortcuts strong,
.dashboard-shortcuts small {
    display: block;
}

.dashboard-shortcuts strong {
    font-size: 12px;
}

.dashboard-shortcuts small {
    margin-top: 6px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.45;
}

@media (max-width: 1300px) {
    .dashboard-alert-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-shortcuts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-service-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1050px) {
    .dashboard-operation-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-main-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-welcome-actions {
        width: 100%;
    }

    .dashboard-welcome-actions .button {
        flex: 1;
    }

    .dashboard-main-kpis,
    .dashboard-two-columns {
        grid-template-columns: 1fr;
    }

    .dashboard-alert-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-shortcuts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-service-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .dashboard-alert-grid,
    .dashboard-shortcuts {
        grid-template-columns: 1fr;
    }

    .dashboard-welcome-actions {
        flex-direction: column;
    }

    .dashboard-welcome-actions .button {
        width: 100%;
    }

    .dashboard-list-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-list-value {
        text-align: left;
    }
}

/* =========================================================
   STREAMCONTROL - AUTOMACOES
   ========================================================= */

.automation-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.automation-alert-list,
.automation-execution-list {
    display: grid;
}

.automation-alert-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 21px;
    border-bottom: 1px solid var(--border);
    border-left: 4px solid transparent;
    color: var(--text);
    text-decoration: none;
}

.automation-alert-item:last-child {
    border-bottom: 0;
}

.automation-alert-item:hover {
    background: var(--surface-soft);
}

.automation-alert-item span,
.automation-alert-item strong,
.automation-alert-item p {
    display: block;
}

.automation-alert-item span {
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.automation-alert-item strong {
    margin-top: 5px;
    font-size: 12px;
}

.automation-alert-item p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
}

.automation-alert-item small {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 9px;
}

.automation-level-critico {
    border-left-color: #ef4444;
}

.automation-level-atencao {
    border-left-color: #f59e0b;
}

.automation-level-informacao {
    border-left-color: #0ea5e9;
}

.automation-execution-list > article {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 21px;
    border-bottom: 1px solid var(--border);
}

.automation-execution-list > article:last-child {
    border-bottom: 0;
}

.automation-execution-list strong,
.automation-execution-list span,
.automation-execution-list p,
.automation-execution-list small {
    display: block;
}

.automation-execution-list strong {
    font-size: 12px;
}

.automation-execution-list div:first-child > span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 9px;
}

.automation-execution-list p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
}

.automation-execution-result {
    flex: 0 0 auto;
    text-align: right;
}

.automation-execution-result small {
    margin-top: 6px;
    color: var(--muted);
    font-size: 8px;
}

@media (max-width: 1000px) {
    .automation-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .automation-alert-item,
    .automation-execution-list > article {
        flex-direction: column;
    }

    .automation-execution-result {
        text-align: left;
    }
}

/* =========================================================
   STREAMCONTROL - PIX E WHATSAPP
   ========================================================= */

.financial-config-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
}

.financial-config-content {
    display: grid;
    gap: 22px;
}

.financial-config-sidebar {
    position: sticky;
    top: 106px;
}

.financial-config-body {
    display: grid;
    gap: 20px;
    padding: 22px;
}

.financial-config-help {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
}

.message-template-stack {
    display: grid;
    gap: 18px;
}

.message-placeholder-guide {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-soft);
}

.message-placeholder-guide strong {
    width: 100%;
    margin-bottom: 3px;
    font-size: 10px;
}

.message-placeholder-guide code {
    padding: 5px 7px;
    border-radius: 6px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 9px;
}

.whatsapp-button {
    border-color: #16a34a !important;
    background: #16a34a !important;
    color: #fff !important;
}

.whatsapp-button:hover {
    border-color: #15803d !important;
    background: #15803d !important;
}

.whatsapp-charge-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
}

.whatsapp-charge-layout aside {
    position: sticky;
    top: 106px;
}

.whatsapp-charge-form {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.whatsapp-charge-form textarea {
    min-height: 230px;
    line-height: 1.6;
}

.whatsapp-title-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.whatsapp-title-summary div {
    padding: 15px;
    border-right: 1px solid var(--border);
}

.whatsapp-title-summary div:last-child {
    border-right: 0;
}

.whatsapp-title-summary span,
.whatsapp-title-summary strong {
    display: block;
}

.whatsapp-title-summary span {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
}

.whatsapp-title-summary strong {
    margin-top: 6px;
    font-size: 13px;
}

.pix-copy-card {
    display: grid;
    gap: 12px;
    padding: 22px;
}

.pix-copy-card > span,
.pix-copy-card > strong,
.pix-copy-card > small {
    display: block;
}

.pix-copy-card > span {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
}

.pix-copy-card > strong {
    overflow-wrap: anywhere;
    font-size: 17px;
}

.pix-copy-card > small {
    color: var(--muted);
    font-size: 10px;
}

.billing-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

@media (max-width: 1000px) {
    .financial-config-layout,
    .whatsapp-charge-layout {
        grid-template-columns: 1fr;
    }

    .financial-config-sidebar,
    .whatsapp-charge-layout aside {
        position: static;
    }
}

@media (max-width: 680px) {
    .whatsapp-title-summary {
        grid-template-columns: 1fr;
    }

    .whatsapp-title-summary div {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .whatsapp-title-summary div:last-child {
        border-bottom: 0;
    }

    .billing-row-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* =========================================================
   STREAMCONTROL - INADIMPLENCIA E SUSPENSAO
   ========================================================= */

.delinquency-rules {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 22px;
}

.delinquency-rules article {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #fff;
}

.delinquency-rules strong,
.delinquency-rules span {
    display: block;
}

.delinquency-rules strong {
    font-size: 18px;
}

.delinquency-rules span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
}

.delinquency-list {
    display: grid;
}

.delinquency-item {
    display: grid;
    grid-template-columns: minmax(230px, 1.1fr) minmax(340px, 1.5fr) auto;
    gap: 20px;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
}

.delinquency-item:last-child {
    border-bottom: 0;
}

.delinquency-customer {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.delinquency-days {
    display: grid;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 14px;
    background: #fef3c7;
    color: #92400e;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}

.delinquency-days.critical {
    background: #fee2e2;
    color: #b91c1c;
}

.delinquency-customer a {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delinquency-customer div > span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 9px;
}

.delinquency-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}

.delinquency-values div {
    padding: 12px;
    border-radius: 10px;
    background: var(--surface-soft);
}

.delinquency-values span,
.delinquency-values strong {
    display: block;
}

.delinquency-values span {
    color: var(--muted);
    font-size: 8px;
    text-transform: uppercase;
}

.delinquency-values strong {
    margin-top: 5px;
    font-size: 11px;
}

.delinquency-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.suspension-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 22px;
    align-items: start;
}

.suspension-layout aside {
    position: sticky;
    top: 106px;
}

.suspension-form {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.suspension-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.suspension-summary div {
    padding: 16px;
    border-right: 1px solid var(--border);
}

.suspension-summary div:last-child {
    border-right: 0;
}

.suspension-summary span,
.suspension-summary strong {
    display: block;
}

.suspension-summary span {
    color: var(--muted);
    font-size: 8px;
    text-transform: uppercase;
}

.suspension-summary strong {
    margin-top: 6px;
    font-size: 16px;
}

.suspension-service-list {
    display: grid;
}

.suspension-service-list div {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border);
}

.suspension-service-list div:last-child {
    border-bottom: 0;
}

.suspension-service-list strong,
.suspension-service-list span {
    display: block;
}

.suspension-service-list strong {
    font-size: 12px;
}

.suspension-service-list span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 9px;
}

@media (max-width: 1050px) {
    .delinquency-item {
        grid-template-columns: 1fr;
    }

    .delinquency-actions {
        justify-content: flex-start;
    }

    .suspension-layout {
        grid-template-columns: 1fr;
    }

    .suspension-layout aside {
        position: static;
    }
}

@media (max-width: 760px) {
    .delinquency-rules {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .delinquency-values,
    .suspension-summary {
        grid-template-columns: 1fr;
    }

    .suspension-summary div {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .suspension-summary div:last-child {
        border-bottom: 0;
    }
}

/* =========================================================
   CONFIGURACOES - SOMENTE ESTRUTURA
   Mantem o padrao visual nativo do StreamControl
   ========================================================= */

.settings-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.settings-navigation {
    position: sticky;
    top: 90px;
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
}

.settings-navigation a {
    display: block;
    padding: 11px 13px;
    border-radius: 9px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.settings-navigation a:hover {
    background: var(--bg);
    color: var(--text);
}

.settings-navigation a.active {
    background: var(--primary-soft);
    color: var(--primary);
}

.settings-content {
    min-width: 0;
}

.settings-panel {
    margin: 0;
}

.settings-form-body {
    display: grid;
    gap: 20px;
    padding: 22px;
}

.settings-switch-list {
    display: grid;
    gap: 10px;
}

.settings-switch-list .switch-field {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}

.system-information-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--border);
    overflow: hidden;
}

.system-information-grid > div {
    padding: 15px;
    background: var(--card);
}

.system-information-grid span,
.system-information-grid strong {
    display: block;
}

.system-information-grid span {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
}

.system-information-grid strong {
    margin-top: 6px;
    font-size: 13px;
}

.maintenance-switch {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}

.field small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 9px;
}

@media (max-width: 900px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-navigation {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .settings-navigation a {
        text-align: center;
    }

    .system-information-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .settings-navigation {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .system-information-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ATENDIMENTO - ESTRUTURA COMPATIVEL COM O LAYOUT ATUAL
   ========================================================= */

.support-filter-grid {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.5fr)
        repeat(4, minmax(130px, 1fr))
        auto;
    gap: 12px;
    align-items: end;
}

.support-search {
    min-width: 0;
}

.support-list {
    display: grid;
}

.support-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 145px;
    gap: 15px;
    align-items: center;
    padding: 17px 20px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}

.support-item:last-child {
    border-bottom: 0;
}

.support-item:hover {
    background: var(--bg);
}

.support-priority {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 11px;
    background: var(--bg);
    font-size: 13px;
    font-weight: 800;
}

.support-priority-baixa {
    color: var(--muted);
}

.support-priority-normal {
    color: #0369a1;
    background: #e0f2fe;
}

.support-priority-alta {
    color: #92400e;
    background: #fef3c7;
}

.support-priority-urgente {
    color: #b91c1c;
    background: #fee2e2;
}

.support-main {
    min-width: 0;
}

.support-title-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.support-title-line strong {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-title-line span {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 9px;
}

.support-main p {
    overflow: hidden;
    margin: 7px 0;
    color: var(--muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-meta {
    display: flex;
    gap: 12px;
    color: var(--muted);
    font-size: 9px;
}

.support-status-column {
    display: grid;
    justify-items: end;
    gap: 7px;
}

.support-sla {
    font-size: 9px;
}

.support-sla-vencido {
    color: #b91c1c;
    font-weight: 700;
}

.support-sla-proximo {
    color: #b45309;
    font-weight: 700;
}

.support-sla-dentro {
    color: #15803d;
}

.support-sla-encerrado,
.support-sla-sem_prazo {
    color: var(--muted);
}

.support-form-panel {
    padding: 24px;
}

.support-form {
    max-width: 980px;
    margin: 0 auto;
}

.support-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 22px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
}

.support-hero > div:first-child > span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.support-hero h2 {
    margin: 7px 0;
    font-size: 24px;
}

.support-hero p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
}

.support-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 22px;
}

.support-summary-grid article {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--card);
}

.support-summary-grid span,
.support-summary-grid strong {
    display: block;
}

.support-summary-grid span {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
}

.support-summary-grid strong {
    margin-top: 7px;
    font-size: 14px;
}

.support-view-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 22px;
    align-items: start;
}

.support-view-content,
.support-view-sidebar {
    display: grid;
    gap: 22px;
}

.support-view-sidebar {
    position: sticky;
    top: 90px;
}

.support-description {
    padding: 22px;
    font-size: 12px;
    line-height: 1.7;
}

.support-resolution {
    padding: 18px 22px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.support-resolution span {
    display: block;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.support-resolution p {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.6;
}

.support-timeline {
    display: grid;
    padding: 20px;
}

.support-timeline > article {
    position: relative;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 22px;
}

.support-timeline > article:last-child {
    padding-bottom: 0;
}

.support-timeline > article::before {
    position: absolute;
    top: 12px;
    bottom: 0;
    left: 5px;
    width: 1px;
    background: var(--border);
    content: '';
}

.support-timeline > article:last-child::before {
    display: none;
}

.support-timeline-marker {
    position: relative;
    z-index: 1;
    width: 11px;
    height: 11px;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--primary-dark);
}

.support-timeline header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.support-timeline header strong {
    font-size: 11px;
}

.support-timeline header span,
.support-timeline small {
    color: var(--muted);
    font-size: 8px;
}

.support-timeline small {
    display: block;
    margin-top: 4px;
    text-transform: uppercase;
}

.support-timeline p {
    margin: 8px 0 0;
    color: var(--text);
    font-size: 10px;
    line-height: 1.6;
}

.support-client-card {
    display: grid;
    gap: 10px;
    padding: 20px;
}

.support-client-card > span {
    color: var(--muted);
    font-size: 10px;
}

.status-em_atendimento {
    background: #e0f2fe;
    color: #0369a1;
}

.status-aguardando_cliente {
    background: #fef3c7;
    color: #92400e;
}

.status-resolvido {
    background: #dcfce7;
    color: #15803d;
}

.status-cancelado {
    background: #fee2e2;
    color: #b91c1c;
}

@media (max-width: 1100px) {
    .support-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .support-search {
        grid-column: span 2;
    }
}

@media (max-width: 950px) {
    .support-view-layout {
        grid-template-columns: 1fr;
    }

    .support-view-sidebar {
        position: static;
    }
}

@media (max-width: 760px) {
    .support-filter-grid,
    .support-summary-grid {
        grid-template-columns: 1fr;
    }

    .support-search {
        grid-column: auto;
    }

    .support-item {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .support-status-column {
        grid-column: 1 / -1;
        justify-items: start;
        padding-left: 57px;
    }

    .support-hero {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Equipamentos - campo PIN */

.password-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.password-field input {
    flex: 1;
    min-width: 0;
}

.password-field .button {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .password-field {
        align-items: stretch;
        flex-direction: column;
    }
}

.equipment-pin-view {
    display: flex;
    align-items: center;
    gap: 9px;
}

.equipment-pin-view > strong {
    min-width: 75px;
    overflow-wrap: anywhere;
}

/* =========================================================
   CENTRAL DE RELATORIOS
   ========================================================= */

.report-screen-heading {
    align-items: center;
}

.report-heading-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.report-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    padding: 6px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
}

.report-tabs a {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 9px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.report-tabs a:hover {
    background: var(--bg);
    color: var(--text);
}

.report-tabs a.active {
    background: var(--primary);
    color: #fff;
}

.report-filter-panel {
    margin-bottom: 20px;
    padding: 18px;
}

.report-filter-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(135px, 0.8fr))
        repeat(3, minmax(150px, 1fr))
        minmax(190px, 1.3fr)
        auto;
    gap: 12px;
    align-items: end;
}

.report-search-field {
    min-width: 0;
}

.report-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.report-overview-card {
    position: relative;
    display: flex;
    min-height: 180px;
    padding: 20px;
    flex-direction: column;
}

.report-overview-card > span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.report-overview-card > strong {
    margin-top: 11px;
    font-size: 25px;
    line-height: 1;
}

.report-overview-card > div {
    display: grid;
    gap: 5px;
    margin-top: 16px;
}

.report-overview-card small {
    color: var(--muted);
    font-size: 9px;
}

.report-overview-card > a {
    margin-top: auto;
    padding-top: 17px;
    color: var(--primary);
    font-size: 9px;
    font-weight: 700;
    text-decoration: none;
}

.report-danger-card > strong {
    color: #b91c1c;
}

.report-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.report-summary-grid article {
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--card);
}

.report-summary-grid span,
.report-summary-grid strong {
    display: block;
}

.report-summary-grid span {
    color: var(--muted);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.report-summary-grid strong {
    margin-top: 7px;
    font-size: 15px;
}

.report-table-panel {
    overflow: hidden;
}

.report-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
}

.report-table th {
    padding: 11px 13px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.report-table td {
    padding: 12px 13px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}

.report-table tbody tr:last-child td {
    border-bottom: 0;
}

.report-table tbody tr:hover {
    background: var(--bg);
}

.report-table td strong,
.report-table td small {
    display: block;
}

.report-table td strong {
    font-size: 10px;
}

.report-table td small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 8px;
}

.report-table .text-right {
    text-align: right;
}

.report-balance-cell {
    font-weight: 800;
}

.report-sla {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 700;
}

.report-sla-dentro {
    background: #dcfce7;
    color: #15803d;
}

.report-sla-proximo {
    background: #fef3c7;
    color: #92400e;
}

.report-sla-vencido {
    background: #fee2e2;
    color: #b91c1c;
}

.report-sla-encerrado,
.report-sla-sem_prazo {
    background: var(--bg);
    color: var(--muted);
}

.report-print-header {
    display: none;
}

@media (max-width: 1250px) {
    .report-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .report-overview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .report-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .report-overview-grid,
    .report-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 580px) {
    .report-heading-actions {
        width: 100%;
    }

    .report-heading-actions .button {
        flex: 1;
    }

    .report-filter-grid,
    .report-overview-grid,
    .report-summary-grid {
        grid-template-columns: 1fr;
    }

    .report-filter-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .report-filter-actions .button {
        width: 100%;
    }
}

@media print {
    @page {
        size: A4 landscape;
        margin: 10mm;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    .sidebar,
    .topbar,
    .app-header,
    .main-header,
    .no-print,
    footer {
        display: none !important;
    }

    .app-main,
    .main-content,
    main,
    .content {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .report-print-header {
        display: block;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #aaa;
    }

    .report-print-header span {
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .report-print-header h1 {
        margin: 4px 0;
        font-size: 18px;
    }

    .report-print-header p {
        margin: 0;
        font-size: 9px;
    }

    .report-summary-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 5px;
        margin-bottom: 10px;
    }

    .report-summary-grid article,
    .report-overview-card {
        min-height: 0;
        padding: 8px;
        border: 1px solid #bbb;
        box-shadow: none !important;
        break-inside: avoid;
    }

    .report-overview-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .report-overview-card > strong {
        font-size: 16px;
    }

    .panel,
    .report-table-panel {
        border: 0 !important;
        box-shadow: none !important;
    }

    .report-table-wrapper {
        overflow: visible;
    }

    .report-table {
        font-size: 7px;
    }

    .report-table th {
        padding: 5px;
        border: 1px solid #aaa;
        background: #eee !important;
        color: #000;
        font-size: 6px;
    }

    .report-table td {
        padding: 5px;
        border: 1px solid #ccc;
        color: #000;
    }

    .status-badge,
    .report-sla {
        padding: 2px 4px;
        border: 1px solid #aaa;
        background: transparent !important;
        color: #000 !important;
    }
}