:root {
    --app-primary: #5C6BC0;
    --app-primary-dark: #3949AB;
    --app-primary-light: #E8EAF6;
    --app-success: #2E7D32;
    --app-success-light: #E8F5E9;
    --app-danger: #C62828;
    --app-danger-light: #FFEBEE;
    --app-warning: #E65100;
    --app-warning-light: #FFF3E0;
    --app-surface: #F8F9FF;
    --app-card: #FFFFFF;
    --app-muted: #6B7280;
    --app-border: #E5E7EB;
    --nav-height: 68px;
    --bar-height: 60px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Nunito', sans-serif;
    background: #e7e9ea;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

/* ── PHONE SHELL (mobile) ── */
#app {
    width: 390px;
    min-height: 100vh;
    background: var(--app-surface);
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 0 48px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

#sidebar-logo {
    display: none;
}

#main-wrapper {
    display: contents;
}

/* ── DESKTOP (≥ 768px) ── */
@media (min-width: 768px) {
    :root {
        --nav-height: 0px;
        --bar-height: 64px;
    }

    body {
        background: #EEF0FB;
        align-items: stretch;
        justify-content: stretch;
    }

    #app {
        width: 100%;
        flex-direction: row;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
        align-items: stretch;
    }

    /* SIDEBAR — lado esquerdo */
    #sidebar-logo {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 20px 20px 14px;
        border-bottom: 1px solid var(--app-border);
        margin-bottom: 8px;
        flex-shrink: 0;
    }

    #sidebar-logo .sl-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--app-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 18px;
        flex-shrink: 0;
    }

    #sidebar-logo .sl-name {
        font-size: 15px;
        font-weight: 800;
        color: #1a1a2e;
    }

    #sidebar-logo .sl-sub {
        font-size: 11px;
        color: var(--app-muted);
    }

    #bottom-nav {
        order: 0;
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        width: 230px !important;
        height: 100vh !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        border-top: none !important;
        border-right: 1px solid var(--app-border) !important;
        box-shadow: 2px 0 12px rgba(0, 0, 0, .05) !important;
        padding: 0 !important;
        transform: none !important;
        flex-shrink: 0 !important;
        overflow-y: auto;
        background: #fff !important;
    }

    .nav-btn {
        flex-direction: row !important;
        justify-content: flex-start !important;
        padding: 13px 16px !important;
        gap: 13px !important;
        border-radius: 12px !important;
        margin: 3px 10px !important;
        width: calc(100% - 20px) !important;
        flex: none !important;
        text-align: left !important;
    }

    .nav-pill {
        border-radius: 12px !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
    }

    .nav-btn i {
        font-size: 20px !important;
    }

    .nav-btn span {
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    .nav-notif {
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        left: auto !important;
    }

    #main-wrapper {
        display: flex !important;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        min-width: 0;
        order: 1;
    }

    #top-bar {
        padding: 0 28px !important;
    }

    #content {
        padding-bottom: 24px !important;
    }

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

    .hero-primary, .hero-danger, .hero-success, .detail-hero {
        border-radius: 0 0 20px 20px;
    }

    .modal-sheet {
        width: 460px !important;
        border-radius: 20px !important;
        margin-bottom: 40px !important;
    }

    #toast {
        left: calc(230px + (100% - 230px) / 2) !important;
    }
}

@media (min-width: 1200px) {
    #bottom-nav {
        width: 260px !important;
    }

    #toast {
        left: calc(260px + (100% - 260px) / 2) !important;
    }
}

/* ── TOP BAR ── */
#top-bar {
    height: var(--bar-height);
    background: #fff;
    border-bottom: 1px solid var(--app-border);
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 4px;
    position: sticky;
    top: 0;
    z-index: 50;
}

#top-bar .bar-title {
    flex: 1;
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
    padding: 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-muted);
    font-size: 20px;
    cursor: pointer;
    transition: background .18s;
    flex-shrink: 0;
}

.bar-btn:hover {
    background: var(--app-primary-light);
    color: var(--app-primary);
}

/* ── CONTENT ── */
#content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: calc(var(--nav-height) + 8px);
}

#content::-webkit-scrollbar {
    width: 3px;
}

#content::-webkit-scrollbar-thumb {
    background: #c5c8e8;
    border-radius: 4px;
}

/* ── PAGES ── */
.page {
    display: none;
    animation: pgIn .22s ease;
}

.page.active {
    display: block;
}

@keyframes pgIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── GRADIENT HERO ── */
.hero-primary {
    background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-dark) 100%);
    padding: 24px 20px 28px;
    color: #fff;
}

.hero-danger {
    background: linear-gradient(135deg, #C62828 0%, #8B0000 100%);
    padding: 32px 20px 28px;
    color: #fff;
    text-align: center;
}

.hero-success {
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%);
    padding: 32px 20px 28px;
    color: #fff;
    text-align: center;
}

/* ── STAT CHIPS ── */
.stat-chip {
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 16px;
    padding: 12px 8px;
    text-align: center;
    backdrop-filter: blur(8px);
}

.stat-chip .sv {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}

.stat-chip .sl {
    font-size: 11px;
    opacity: .85;
    margin-top: 2px;
}

/* ── SECTION LABEL ── */
.sec-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--app-muted);
    margin-bottom: 12px;
}

/* ── CARD ── */
.app-card {
    background: var(--app-card);
    border-radius: 16px;
    border: 1px solid var(--app-border);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .07);
    transition: transform .15s, box-shadow .15s;
    cursor: pointer;
    overflow: hidden;
}

.app-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
}

.app-card:active {
    transform: scale(.98);
}

/* ── LISTA DE CHAMADOS ── */
.ticket-list-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--app-surface);
}

.ticket-filter-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 12px;
    scrollbar-width: none;
}

.ticket-filter-row::-webkit-scrollbar {
    display: none;
}

.ticket-filter-row .filter-pill b {
    margin-left: 3px;
}

.ticket-card {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.ticket-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 7px;
    background: var(--app-primary);
}

.ticket-card.ticket-aberto::before { background: #f0ad4e; }
.ticket-card.ticket-encaminhado::before { background: #1976d2; }
.ticket-card.ticket-concluido::before { background: #5cb85c; }
.ticket-card.ticket-cancelado::before { background: #6B7280; }

.ticket-card-content {
    padding: 17px 16px 15px 22px;
}

.ticket-card-header,
.ticket-card-footer,
.ticket-meta {
    display: flex;
    align-items: center;
}

.ticket-card-header {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.ticket-number {
    color: #1a1a2e;
    font-family: monospace;
    font-size: 15px;
    font-weight: 800;
}

.ticket-location {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--app-muted);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.ticket-location i {
    color: var(--app-primary);
    font-size: 15px;
}

.ticket-title {
    color: #1a1a2e;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 16px;
}

.ticket-card-footer {
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
}

.ticket-meta {
    flex-wrap: wrap;
    gap: 8px 13px;
    color: var(--app-muted);
    font-size: 11px;
    font-weight: 700;
}

.ticket-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ticket-meta span + span {
    border-left: 1px solid var(--app-border);
    padding-left: 13px;
}

.ticket-meta i {
    color: var(--app-primary);
    font-size: 14px;
}

.ticket-card .pri-chip {
    justify-content: center;
    flex-shrink: 0;
    max-width: 175px;
    text-align: center;
}

@media (max-width: 420px) {
    .ticket-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .ticket-card .pri-chip {
        max-width: 100%;
    }
}

/* ── QUICK ACTION CARD ── */
.qa-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--app-border);
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: all .2s;
}

.qa-card:hover {
    background: var(--app-primary-light);
    border-color: var(--app-primary);
}

.qa-card:active {
    transform: scale(.96);
}

.qa-icon {
    width: 44px;
    height: 44px;
    background: var(--app-primary);
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
}

.qa-label {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
}

/* ── BADGES ── */
.bs-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.bs-badge i {
    font-size: 8px;
}


.badge-Encaminhado {
    background: #e3f2fd;
    color: #1976d2;
}

.badge-Aberto {
    background: #FCEDDA;
    color: #F0AD4E;
}

.badge-Concluido {
    background: #CDE9CD;
    color: #5CB85C;
}

.badge-Cancelado {
    background: #6B7280;
    color: #FFFFFF;
}


/*.badge-open {
    background: #E3F2FD;
    color: #1565C0;
}

.badge-pending {
    background: var(--app-warning-light);
    color: var(--app-warning);
}

.badge-closed {
    background: #ECEFF1;
    color: #546E7A;
}

.badge-critical {
    background: var(--app-danger-light);
    color: var(--app-danger);
}

.badge-done {
    background: var(--app-success-light);
    color: var(--app-success);
}*/


.pri-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.pri-high {
    background: var(--app-danger-light);
    color: var(--app-danger);
}

.pri-medium {
    background: var(--app-warning-light);
    color: var(--app-warning);
}


.pri-concluido {

    color: var(--app-success);
}

.pri-atrasado {

    color: var(--app-danger);
}

.pri-encaminhado {
    background: #FFFFFF;
    border-color: var(--app-danger);
    color: #1b6ec2;
}

/* ── SEARCH BAR ── */
.search-wrap {
    background: #fff;
    border: 1.5px solid var(--app-border);
    border-radius: 28px;
    display: flex;
    align-items: center;
    padding: 10px 18px;
    gap: 10px;
}

.search-wrap input {
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    flex: 1;
    color: #1a1a2e;
}

.search-wrap input::placeholder {
    color: var(--app-muted);
}

.search-wrap i {
    color: var(--app-muted);
    font-size: 18px;
}

/* ── FILTER PILLS ── */
.filter-pill {
    flex-shrink: 0;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--app-border);
    background: transparent;
    color: var(--app-muted);
    font-family: 'Nunito', sans-serif;
    transition: all .18s;
}

.filter-pill.active {
    background: var(--app-primary);
    border-color: var(--app-primary);
    color: #fff;
}

.filter-pill.Aberto {
    background: #FCEDDA;
    border-color: #F0AD4E;
    color: #F0AD4E;
}

.filter-pill.Concluido {
    background: #CDE9CD;
    color: #5CB85C;
    border-color: #5CB85C;

}

.filter-pill.Encaminhado {
    background: #e3f2fd;
    color: #1976d2;
    border-color: #1976d2;
}

.filter-pill.Cancelado {
    background: #6B7280;
    color: #FFFFFF;
    border-color: #6B7280;
}

/* ── FORM INPUTS ── */
.app-input {
    width: 100%;
    background: #F3F4F9;
    border: 1.5px solid transparent;
    border-radius: 13px;
    padding: 13px 16px;
    font-size: 14px;
    font-family: 'Nunito', sans-serif;
    color: #1a1a2e;
    outline: none;
    transition: all .2s;
}

.app-input:focus {
    border-color: var(--app-primary);
    background: #fff;
    box-shadow: 0 0 0 3px var(--app-primary-light);
}

textarea.app-input {
    resize: none;
    min-height: 100px;
}

select.app-input {
    appearance: none;
    cursor: pointer;
}

.sel-wrap {
    position: relative;
}

.sel-wrap::after {
    content: '\F282';
    font-family: 'bootstrap-icons';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--app-muted);
    pointer-events: none;
    font-size: 14px;
}

/* PRIORITY TOGGLE */
.pri-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.pri-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: 13px;
    border: 2px solid var(--app-border);
    cursor: pointer;
    transition: all .18s;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
}

.pri-opt i {
    font-size: 20px;
}

.pri-opt.sel-low {
    border-color: #43A047;
    background: var(--app-success-light);
    color: var(--app-success);
}

.pri-opt.sel-medium {
    border-color: #FB8C00;
    background: var(--app-warning-light);
    color: var(--app-warning);
}

.pri-opt.sel-high {
    border-color: #E53935;
    background: var(--app-danger-light);
    color: var(--app-danger);
}

/* UPLOAD */
.upload-zone {
    border: 2px dashed var(--app-border);
    border-radius: 13px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
    color: var(--app-muted);
}

.upload-zone:hover {
    border-color: var(--app-primary);
    background: var(--app-primary-light);
}

.upload-zone i {
    font-size: 32px;
    display: block;
    margin-bottom: 8px;
}

/* ── BUTTONS ── */
.btn-app {
    width: 100%;
    border: none;
    border-radius: 28px;
    padding: 15px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
    transition: all .18s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-app:active {
    transform: scale(.97);
}

.btn-primary-app {
    background: var(--app-primary);
    color: #fff;
}

.btn-primary-app:hover {
    background: var(--app-primary-dark);
}

.btn-danger-app {
    background: var(--app-danger);
    color: #fff;
}

.btn-danger-app:hover {
    background: #8B0000;
}

.btn-success-app {
    background: var(--app-success);
    color: #fff;
}

.btn-success-app:hover {
    background: #1B5E20;
}

.btn-outline-app {
    background: transparent;
    color: var(--app-muted);
    border: 1.5px solid var(--app-border);
}

.btn-outline-app:hover {
    background: #f3f4f9;
}

/* ── DETAIL HERO ── */
.detail-hero {
    background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-dark) 100%);
    padding: 22px 20px 26px;
    color: #fff;
}

.detail-hero .dh-id {
    font-size: 12px;
    opacity: .8;
    font-family: monospace;
    margin-bottom: 4px;
}

.detail-hero h2 {
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 14px;
    line-height: 1.3;
}

.badge-ghost {
    background: rgba(255, 255, 255, .2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
}

/* ACTION STRIP */
.action-strip {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
}

.as-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 13px 8px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    transition: all .18s;
}

.as-btn i {
    font-size: 22px;
}

.as-btn:active {
    transform: scale(.93);
}

.as-cancel {
    background: var(--app-danger-light);
    color: var(--app-muted);
}

.as-done {
    background: var(--app-success-light);
    color: var(--app-success);
}

.as-share {
    background: #F3F4F9;
    color: var(--app-muted);
}

/* INFO ROWS */
.info-section {
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--app-border);
    overflow: hidden;
    margin-bottom: 12px;
}

.info-sec-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--app-muted);
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--app-border);
}

/* ── RELATÓRIOS ── */
.report-hero {
    padding-bottom: 24px;
}

.report-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
    opacity: .8;
}

.report-subtitle {
    font-size: 13px;
    opacity: .86;
}

.report-card {
    cursor: default;
}

.report-card:hover {
    transform: none;
}

.report-total {
    color: #1a1a2e;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.report-total span {
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 600;
}

.report-chart-title {
    color: #1a1a2e;
    font-size: 24px;
    font-weight: 800;
}

.report-refresh {
    background: var(--app-primary-light);
    color: var(--app-primary);
}

.status-chart {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.status-bar-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 10px;
}

.status-bar-label,
.status-bar-value {
    color: #1a1a2e;
    font-size: 13px;
    font-weight: 700;
}

.status-bar-value {
    text-align: right;
}

.status-bar-track {
    height: 12px;
    background: #eef0fb;
    border-radius: 999px;
    overflow: hidden;
}

.status-bar-fill {
    height: 100%;
    min-width: 3px;
    border-radius: inherit;
    transition: width .25s ease;
}

.status-aberto { background: #f0ad4e; }
.status-encaminhado { background: #1976d2; }
.status-atrasado { background: #D9534F; }
.status-concluido { background: #5cb85c; }
.status-cancelado { background: #6B7280; }

.monthly-chart {
    height: 230px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
    gap: 7px;
    border-bottom: 1px solid var(--app-border);
}

.monthly-bar-column {
    height: 100%;
    min-width: 0;
    display: grid;
    grid-template-rows: 22px 1fr 24px;
    align-items: end;
    text-align: center;
}

.monthly-bar-button {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.monthly-bar-button:hover .monthly-bar-area,
.monthly-bar-button:focus-visible .monthly-bar-area {
    box-shadow: 0 0 0 2px var(--app-primary);
}

.monthly-bar-button:focus-visible {
    outline: none;
}

/* ── DETALHE DE CHAMADOS POR MÊS ── */
.month-detail-header {
    background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-dark) 100%);
    color: #fff;
    padding: 20px;
}

.month-detail-header .back-month-btn {
    border: 0;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 18px;
}

.month-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.month-summary-item {
    border-left: 4px solid var(--month-status-color);
    background: #fff;
    border-radius: 12px;
    padding: 10px 12px;
}

.month-summary-item span {
    display: block;
    color: var(--app-muted);
    font-size: 11px;
    font-weight: 700;
}

.month-summary-item strong {
    color: #1a1a2e;
    font-size: 22px;
    font-weight: 800;
}

.month-status-section {
    margin-top: 22px;
}

.month-status-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #1a1a2e;
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 10px;
}

.month-status-heading span {
    color: var(--app-muted);
    font-size: 12px;
}

.ticket-card.ticket-atrasado::before { background: #D9534F; }

.badge-aberto { background: #FCEDDA; color: #F0AD4E; }
.badge-encaminhado { background: #e3f2fd; color: #1976d2; }
.badge-atrasado { background: #F5D5D3; color: #D9534F; }
.badge-concluido { background: #CDE9CD; color: #5CB85C; }
.badge-cancelado { background: #E5E7EB; color: #6B7280; }

.monthly-bar-value {
    color: #1a1a2e;
    font-size: 11px;
    font-weight: 800;
}

.monthly-bar-area {
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    align-items: end;
    border-radius: 7px 7px 0 0;
    background: #eef0fb;
    overflow: hidden;
}

.monthly-bar-fill {
    width: 100%;
    min-height: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border-top: 1px solid rgba(255, 255, 255, .65);
    transition: height .25s ease;
}

.monthly-bar-fill:first-child {
    border-radius: 0 0 7px 7px;
}

.monthly-bar-fill:last-child {
    border-radius: 7px 7px 0 0;
}

.monthly-bar-label {
    color: var(--app-muted);
    font-size: 10px;
    font-weight: 700;
    padding-top: 7px;
}

.report-empty {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--app-muted);
    font-size: 13px;
}

.report-empty i {
    color: var(--app-primary);
    font-size: 34px;
}

.info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--app-border);
}

.info-row:last-child {
    border-bottom: none;
}

.info-row .ir-icon {
    font-size: 20px;
    color: var(--app-primary);
    width: 22px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.ir-label {
    font-size: 11px;
    color: var(--app-muted);
    margin-bottom: 1px;
}

.ir-value {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
}

/* TIMELINE */
.tl-item {
    display: flex;
    gap: 14px;
    padding-bottom: 18px;
}

.tl-item:last-child {
    padding-bottom: 0;
}

.tl-left {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
    border: 2px solid;
}

.tl-dot-Aberto {
    background: #FCEDDA;
    border-color: #F0AD4E;
}

.tl-dot-Concluido {
    background: #CDE9CD;
    border-color: #5CB85C;
}

.tl-dot-Encaminhado {
    background: #e3f2fd;
    border-color: #1976d2;
}

.tl-dot-Cancelado {
    background: #F5D5D3;
    color: #D9534F;
}

.tl-line {
    flex: 1;
    width: 2px;
    background: var(--app-border);
    margin-top: 4px;
}

.tl-item:last-child .tl-line {
    display: none;
}

.tl-title {
    font-size: 13px;
    font-weight: 700;
}

.tl-sub {
    font-size: 14px;
    color: var(--app-muted);
}

/* ATTACHMENTS */
.att-thumb {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border-radius: 12px;
    background: #F3F4F9;
    border: 1px solid var(--app-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--app-muted);
    cursor: pointer;
    transition: all .18s;
    gap: 3px;
}

.att-thumb i {
    font-size: 26px;
    color: var(--app-primary);
}

.att-thumb:hover {
    background: var(--app-primary-light);
    border-color: var(--app-primary);
}

/* COMMENT */
.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--app-primary-light);
    color: var(--app-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* WARNING / SUCCESS BANNERS */
.alert-banner {
    border-radius: 0;
    border: none;
    border-left: 4px solid;
    font-size: 13px;
    line-height: 1.5;
    font-family: 'Nunito', sans-serif;
}

.alert-banner.danger {
    border-color: var(--app-danger);
    background: var(--app-danger-light);
    color: var(--app-danger);
}

.alert-banner.success {
    border-color: var(--app-success);
    background: var(--app-success-light);
    color: var(--app-success);
}

/* CANCEL INFO BOX */
.cinfo-box {
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--app-border);
    overflow: hidden;
}

.cinfo-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 16px;
    border-bottom: 1px solid var(--app-border);
    font-size: 13px;
}

.cinfo-row:last-child {
    border-bottom: none;
}

.cinfo-label {
    color: var(--app-muted);
    font-weight: 500;
}

.cinfo-value {
    font-weight: 700;
    color: #1a1a2e;
    text-align: right;
    max-width: 55%;
}

/* CHECKLIST */
.chk-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    background: #F3F4F9;
    border-radius: 13px;
    cursor: pointer;
    transition: all .18s;
    margin-bottom: 8px;
}

.chk-item.chk-danger {
    background: var(--app-danger-light);
}

.chk-item.chk-success {
    background: var(--app-success-light);
}

.chk-box {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid #D1D5DB;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all .18s;
}

.chk-danger .chk-box {
    background: var(--app-danger);
    border-color: var(--app-danger);
    color: #fff;
}

.chk-success .chk-box {
    background: var(--app-success);
    border-color: var(--app-success);
    color: #fff;
}

.chk-item span {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
}

/* RATING STARS */
.star {
    font-size: 34px;
    cursor: pointer;
    color: #D1D5DB;
    transition: all .15s;
}

.star.on {
    color: #FFA726;
    transform: scale(1.1);
}

/* TIME CARDS */
.time-card {
    background: #fff;
    border-radius: 13px;
    border: 1px solid var(--app-border);
    padding: 14px;
    text-align: center;
}

.time-card .tv {
    font-size: 20px;
    font-weight: 800;
    color: var(--app-primary);
}

.time-card .tl {
    font-size: 11px;
    color: var(--app-muted);
    margin-top: 2px;
}

/* PROFILE */
.profile-hero {
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-dark));
    padding: 32px 20px 56px;
    text-align: center;
    color: #fff;
}

.profile-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    border: 3px solid rgba(255, 255, 255, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin: 0 auto 14px;
}

.profile-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid var(--app-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    margin-top: -24px;
    overflow: hidden;
}

.pmenu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--app-border);
    cursor: pointer;
    transition: background .15s;
}

.pmenu-item:last-child {
    border-bottom: none;
}

.pmenu-item:hover {
    background: var(--app-primary-light);
}

.pmenu-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--app-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: var(--app-primary);
    flex-shrink: 0;
}

.pmenu-text strong {
    display: block;
    font-size: 14px;
    color: #1a1a2e;
}

.pmenu-text span {
    font-size: 12px;
    color: var(--app-muted);
}

.pmenu-arrow {
    margin-left: auto;
    color: var(--app-muted);
}

/* ── BOTTOM NAV ── */
#bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 390px;
    height: var(--nav-height);
    background: #fff;
    border-top: 1px solid var(--app-border);
    display: flex;
    z-index: 100;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .07);
}

.nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    padding: 8px 4px;
}

.nav-pill {
    position: absolute;
    top: 7px;
    width: 60px;
    height: 30px;
    border-radius: 15px;
    background: var(--app-primary-light);
    opacity: 0;
    transition: opacity .2s;
}

.nav-btn.active .nav-pill {
    opacity: 1;
}

.nav-btn i {
    font-size: 22px;
    position: relative;
    z-index: 1;
    color: var(--app-muted);
    transition: color .2s, transform .2s;
}

.nav-btn.active i {
    color: var(--app-primary);
    transform: scale(1.12);
}

.nav-btn span {
    font-size: 10px;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    color: var(--app-muted);
    position: relative;
    z-index: 1;
    transition: color .2s;
}

.nav-btn.active span {
    color: var(--app-primary);
}

.nav-notif {
    position: absolute;
    top: 5px;
    right: calc(50% - 20px);
    background: var(--app-danger);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    font-family: 'Nunito', sans-serif;
    min-width: 17px;
    height: 17px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    padding: 0 3px;
    z-index: 2;
}

/* ── TOAST ── */
#toast {
    position: fixed;
    bottom: calc(var(--nav-height) + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: #1a1a2e;
    color: #fff;
    padding: 12px 22px;
    border-radius: 28px;
    font-size: 13px;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    z-index: 200;
    transition: transform .28s cubic-bezier(.34, 1.56, .64, 1);
    white-space: nowrap;
    max-width: 340px;
    text-align: center;
}

#toast.show {
    transform: translateX(-50%) translateY(0);
}

/* ── PAGE INNER ── */
.page-inner {
    width: 100%;
}

@media (min-width: 768px) {
    .page-inner {
        max-width: 920px;
        margin: 0 auto;
        padding: 0 28px;
    }

    .tickets-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .tickets-grid .app-card {
        margin-bottom: 0 !important;
    }

    .qa-row {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .detail-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

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

.modal-backdrop-custom {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .48);
    z-index: 150;
    align-items: flex-end;
    justify-content: center;
}

.modal-backdrop-custom.open {
    display: flex;
}

.modal-sheet {
    background: #fff;
    border-radius: 24px 24px 0 0;
    padding: 20px 20px 28px;
    width: 390px;
    animation: sheetUp .28s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes sheetUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.modal-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #D1D5DB;
    margin: 0 auto 18px;
}

@media (max-width: 400px) {
    #app, #bottom-nav, .modal-sheet {
        width: 100%;
    }
}


/*TIME LINE*/

/* Timeline */
.timeline {
    position: relative;
    padding-left: 40px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e0e0e0;
}

.timeline-item {
    position: relative;
    margin-bottom: 24px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -36px;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #6200ea;
    border: 3px solid white;
    box-shadow: 0 0 0 2px #6200ea;
}

.timeline-date {
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

.timeline-content {
    font-size: 15px;
    color: #333;
}

.timeline-user {
    font-size: 13px;
    color: #6200ea;
    font-weight: 500;
    margin-bottom: 4px;
}

.timeline-photos {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.timeline-thumb {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    background: #e0e0e0;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.timeline-thumb:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.timeline-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.timeline-thumb .thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.timeline-thumb .thumb-placeholder .material-icons {
    color: rgba(255, 255, 255, 0.8);
    font-size: 28px;
}

.timeline-thumb-count {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.lightbox.open {
    display: flex;
}

.lightbox img {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 10px;
    object-fit: contain;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-caption {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-top: 12px;
}


@media (max-width: 768px) {
    .action-buttons {
        flex-direction: column;
    }

    .featured-image {
        height: 200px;
    }

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


.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.lightbox-img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 8px;
}

.lightbox-caption {
    color: white;
    text-align: center;
    margin-top: 10px;
}

.lightbox-close {
    position: absolute;
    top: -10px;
    right: -10px;
    background: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    cursor: pointer;
    font-size: 18px;
}