/* Flight View Styles */
/* Regras específicas para a view Home */
.flight-view-background-fix {
    /* Helper class for JS fallback if needed */
}

/* For flight view we must not show any featured/background image; force black background */
body[data-view="flight"] {
    background-image: none !important;
    background-color: #000000 !important;
}

body[data-view="flight"] .container {
    background-color: #000000;
    height: 100vh;
}

body[data-view="flight"] .container::before {
    background-color: #000000;
    opacity: 1;
}
.flight-container{ 
    display: block;
    border-top: .5px solid #6F6F6F;
    padding-top: 8px;
    background-color: #000000;
    top: 126px;
    left: 506px;
    right: 10px;
    bottom: 0;
}
/* Flight Header */
.flight-header {
    display: block;
    margin-bottom: 40px;
}

.flight-header-left {
    display: block;
}

.flight-type {
    display: inline-block;
    vertical-align: top;
    margin-right: 60px;
}

.flight-type-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #CCCCCC;
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.flight-title {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    color: #FFFFFF;
}

.flight-airport {
    display: inline-block;
    vertical-align: top;
}

.airport-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #CCCCCC;
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.airport-code {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    color: #FFFFFF;
}

/* Flight Table */
.flight-table-container {
    width: 100%;
    overflow-x: auto;
    /* Ocultar scrollbars - ES5 Compatible */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE e Edge */
}

.flight-table-container::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.flight-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    table-layout: fixed;
}

.flight-table thead {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.flight-table thead tr {
    background: transparent;
}

.flight-table th {
    padding: 0 20px 16px 20px;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #6B7280;
    background-color: transparent;
    border: none;
}

.flight-table tbody tr {
    background-color: rgba(20, 20, 20, 0.8);
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.flight-table tbody tr:hover {
    background-color: rgba(30, 30, 30, 0.9);
}

.flight-table td {
    padding: 22px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: #FFFFFF;
    background-color: rgba(20, 20, 20, 0.8);
    border: none;
}

.flight-table tbody tr td:first-child {
    border-radius: 8px 0 0 8px;
}

.flight-table tbody tr td:last-child {
    border-radius: 0 8px 8px 0;
}

.flight-table tbody tr:hover td {
    background-color: rgba(30, 30, 30, 0.9);
}

/* Column widths */
.flight-table th:nth-child(1),
.flight-table td:nth-child(1) {
    width: 12%;
}

.flight-table th:nth-child(2),
.flight-table td:nth-child(2) {
    width: 8%;
}

.flight-table th:nth-child(3),
.flight-table td:nth-child(3) {
    width: 10%;
}

.flight-table th:nth-child(4),
.flight-table td:nth-child(4) {
    width: 28%;
}

.flight-table th:nth-child(5),
.flight-table td:nth-child(5) {
    width: 20%;
}

.flight-table th:nth-child(6),
.flight-table td:nth-child(6) {
    width: 10%;
    text-align: center;
}

.flight-table th:nth-child(7),
.flight-table td:nth-child(7) {
    width: 12%;
    text-align: center;
}

/* Specific cell styles */
.company-cell {
    font-weight: 400;
    font-size: 18px;
    color: #FFFFFF;
}

.flight-cell {
    font-weight: 400;
    font-size: 18px;
    color: #FFFFFF;
}

.flight-table .time-cell {
    /* mais específico para sobrepor regras genéricas como `.flight-table td` */
    font-weight: 700;
    color: #FFA500;
    font-size: 20px;
}

.destination-cell {
    font-weight: 300;
    font-size: 18px;
    color: #FFFFFF;
}

.terminal-cell,
.gate-cell {
    text-align: center;
    font-weight: 400;
    font-size: 18px;
    color: #FFFFFF;
}

/* Status styles - texto direto sem badge */
.status-cell {
    padding: 22px 20px;
    font-weight: 400;
    font-size: 18px;
}

/* Use seletores mais específicos para sobrepor `.flight-table td { color: ... }` */
.flight-table td.status-normal {
    /* Previsto */
    color: #DDDDDD;
}

.flight-table td.status-success {
    /* Embarque imediato */
    color: #48C071;
}

.flight-table td.status-warning,
.flight-table td.status-error {
    /* Última chamada / Cancelado */
    color: #FF5E78;
}

/* Loading state */
.loading-cell {
    text-align: center;
    padding: 40px !important;
    color: #AAAAAA;
    font-style: italic;
}

/* Responsive adjustments */

/* Notebook (até 1366px) - Base */
@media screen and (max-width: 1366px) {
    .flight-title,
    .airport-code {
        font-size: 40px;
    }
    
    .flight-table td {
        padding: 16px 12px;
        font-size: 14px;
    }
    
    .time-cell {
        font-size: 16px;
    }
}

/* Monitor (1367px a 1919px) */
@media screen and (min-width: 1367px) and (max-width: 1919px) {
    .flight-container {
        top: 140px;
        left: 560px;
        right: 12px;
    }

    .flight-header {
        margin-bottom: 48px;
    }

    .flight-type {
        margin-right: 70px;
    }

    .flight-type-label,
    .airport-label {
        font-size: 16px;
        margin-bottom: 10px;
        letter-spacing: 2.5px;
    }

    .flight-title,
    .airport-code {
        font-size: 56px;
    }

    .flight-table th {
        padding: 0 24px 20px 24px;
        font-size: 16px;
    }

    .flight-table td {
        padding: 26px 24px;
        font-size: 21px;
    }

    .flight-table .time-cell {
        font-size: 24px;
    }

    .company-cell,
    .flight-cell,
    .destination-cell,
    .terminal-cell,
    .gate-cell,
    .status-cell {
        font-size: 21px;
    }
}

/* Televisão (acima de 1920px) */
@media screen and (min-width: 1920px) {
    .flight-container {
        top: 160px;
        left: 620px;
        right: 15px;
        padding-top: 12px;
    }

    .flight-header {
        margin-bottom: 56px;
    }

    .flight-type {
        margin-right: 80px;
    }

    .flight-type-label,
    .airport-label {
        font-size: 18px;
        margin-bottom: 12px;
        letter-spacing: 3px;
    }

    .flight-title,
    .airport-code {
        font-size: 64px;
    }

    .flight-table {
        border-spacing: 0 12px;
    }

    .flight-table th {
        padding: 0 28px 24px 28px;
        font-size: 18px;
    }

    .flight-table td {
        padding: 30px 28px;
        font-size: 24px;
    }

    .flight-table .time-cell {
        font-size: 28px;
    }

    .company-cell,
    .flight-cell,
    .destination-cell,
    .terminal-cell,
    .gate-cell {
        font-size: 24px;
    }

    .status-cell {
        font-size: 24px;
    }

    .flight-table tbody tr td:first-child {
        border-radius: 12px 0 0 12px;
    }

    .flight-table tbody tr td:last-child {
        border-radius: 0 12px 12px 0;
    }
}

/* TVs maiores (QHD / 4K) */
@media screen and (min-width: 2560px) {
    .flight-container {
        top: 180px;
        left: 820px;
        right: 20px;
        padding-top: 16px;
    }

    .flight-title,
    .airport-code {
        font-size: 72px;
    }

    .flight-table td {
        padding: 36px 32px;
        font-size: 28px;
    }

    .flight-table .time-cell {
        font-size: 34px;
    }
}

@media screen and (min-width: 3840px) {
    .flight-container {
        top: 220px;
        left: 1000px;
        right: 30px;
        padding-top: 18px;
    }

    .flight-title,
    .airport-code {
        font-size: 88px;
    }

    .flight-table td {
        padding: 44px 36px;
        font-size: 34px;
    }

    .flight-table .time-cell {
        font-size: 40px;
    }
}