* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #0d1720;
    color: #f2f5f7;
}

button,
input {
    font: inherit;
}

button,
a {
    transition: 0.2s;
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;

    background:
        linear-gradient(
            rgba(3, 28, 43, 0.28),
            rgba(3, 28, 43, 0.28)
        ),
        url('/assets/images/login-rov-background.png')
        center center / cover no-repeat fixed;
}

.login-container {
    width: 100%;
    max-width: 420px;
}

.login-card {
    background: #17232e;
    border: 1px solid #2a3b49;
    border-radius: 12px;
    padding: 32px;
}

.login-header {
    margin-bottom: 28px;
}

.login-header h1 {
    margin-bottom: 8px;
    font-size: 30px;
}

.login-header p {
    color: #aebbc5;
}

.language-selector{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-bottom:18px;
}

.language-btn{
    width:42px;
    height:32px;
    border:1px solid #d5dce3;
    background:#fff;
    border-radius:6px;
    cursor:pointer;
    padding:2px;
    transition:.2s;
}

.language-btn img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:4px;
}

.language-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 3px 8px rgba(0,0,0,.18);
}

.language-btn.active{
    border:2px solid #0b7285;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
}

.form-group input {
    width: 100%;
    border: 1px solid #405363;
    background: #0d1720;
    color: white;
    padding: 12px;
    border-radius: 7px;
    outline: none;
}

.form-group input:focus {
    border-color: #278ee0;
}

.primary-button,
.secondary-button {
    border-radius: 7px;
    padding: 11px 18px;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
}

.primary-button {
    display: inline-block;
    border: none;
    background: #0078d4;
    color: white;
}

.primary-button:hover {
    background: #1689dc;
}

.login-card .primary-button {
    width: 100%;
}

.secondary-button {
    border: 1px solid #405363;
    background: #1a2935;
    color: white;
}

.secondary-button:hover {
    background: #263947;
}

.message {
    min-height: 20px;
    margin-top: 15px;
    text-align: center;
    color: #aebbc5;
}

.message.error {
    color: #ff7676;
}

.topbar {
    min-height: 82px;
    background: #17232e;
    border-bottom: 1px solid #2a3b49;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 30px;
    gap: 24px;
}

.topbar h1 {
    font-size: 24px;
}

.topbar p {
    color: #aebbc5;
    margin-top: 5px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar-actions .language-selector {
    margin: 0;
}

.dashboard-container {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 32px;
}

.dashboard-title {
    margin-bottom: 25px;
}

.dashboard-title h2 {
    margin-bottom: 7px;
}

.dashboard-title p {
    color: #aebbc5;
}

.station-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 22px;
}

.station-card {
    background: #17232e;
    border: 1px solid #2a3b49;
    border-radius: 10px;
    padding: 20px;
}

.station-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.station-header p {
    color: #aebbc5;
    margin-top: 6px;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.status.online .status-dot {
    background: #2ecc71;
}

.station-preview {
    min-height: 160px;
    margin: 20px 0;
    background: #091118;
    border: 1px solid #263947;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8595a1;
    text-align: center;
    padding: 20px;
}

.station-button {
    width: 100%;
}

.admin-area {
    margin-top: 36px;
    border-top: 1px solid #2a3b49;
    padding-top: 28px;
}

.admin-area h2 {
    margin-bottom: 16px;
}

.admin-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hidden {
    display: none;
}

@media (max-width: 700px) {
    .topbar {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .dashboard-container {
        padding: 22px 16px;
    }
}

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

.disabled-button {
    background: #3b4650;
    color: #9eabb4;
    cursor: not-allowed;
    opacity: 0.75;
}

.disabled-button:hover {
    background: #3b4650;
}

.station-loading {
    color: #aebbc5;
    padding: 20px 0;
}

.error-text {
    color: #ff7676;
}

.admin-form-section,
.users-section {
    background: #17232e;
    border: 1px solid #2a3b49;
    border-radius: 10px;
    padding: 24px;
}

.users-section {
    margin-top: 26px;
}

.admin-form-section h2,
.users-section h2 {
    margin-bottom: 22px;
}

.admin-form {
    max-width: 650px;
}

.admin-form select {
    width: 100%;
    border: 1px solid #405363;
    background: #0d1720;
    color: white;
    padding: 12px;
    border-radius: 7px;
}

.admin-form fieldset {
    border: 1px solid #405363;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.admin-form legend {
    padding: 0 8px;
}

.station-permissions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.permission-option {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #0d1720;
    border: 1px solid #405363;
    border-radius: 7px;
    padding: 10px 12px;
    cursor: pointer;
}

.permission-option input {
    width: auto;
}

.users-list {
    display: grid;
    gap: 12px;
}

.user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: #0d1720;
    border: 1px solid #2a3b49;
    border-radius: 8px;
    padding: 17px;
}

.user-item h3 {
    margin-bottom: 5px;
}

.user-item p {
    color: #aebbc5;
    margin-top: 4px;
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.message.success {
    color: #2ecc71;
}

@media (max-width: 700px) {
    .user-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .user-actions {
        width: 100%;
        justify-content: space-between;
    }
}

.delete-button {
    border: 1px solid #c0392b;
    background: transparent;
    color: #ff7676;
    border-radius: 7px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.delete-button:hover {
    background: #c0392b;
    color: #ffffff;
}

.delete-button:focus-visible {
    outline: 2px solid #ff7676;
    outline-offset: 2px;
}

.stations-admin-list {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}

.station-admin-card {
    background: #0d1720;
    border: 1px solid #2a3b49;
    border-radius: 9px;
    padding: 20px;
}

.station-admin-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

.station-admin-heading h3 {
    margin: 0;
}

.station-id-label {
    background: #263947;
    color: #aebbc5;
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 12px;
}

.station-admin-card input {
    width: 100%;
    border: 1px solid #405363;
    background: #111d27;
    color: #ffffff;
    border-radius: 7px;
    padding: 12px;
}

.station-admin-card input:focus {
    border-color: #4ba3d3;
    outline: none;
}

.station-admin-card .primary-button {
    width: 100%;
}

.logs-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 22px;
}

.logs-heading p {
    color: #aebbc5;
    margin-top: 6px;
}

.logs-filter {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logs-filter select {
    border: 1px solid #405363;
    background: #0d1720;
    color: #ffffff;
    border-radius: 7px;
    padding: 9px 12px;
}

.logs-table-container {
    width: 100%;
    overflow-x: auto;
}

.logs-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 850px;
}

.logs-table th,
.logs-table td {
    text-align: left;
    padding: 13px 14px;
    border-bottom: 1px solid #2a3b49;
    vertical-align: top;
}

.logs-table th {
    background: #0d1720;
    color: #dce5eb;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.logs-table td {
    color: #b7c3cc;
}

.logs-table tbody tr:hover {
    background: #111d27;
}

.logs-empty {
    text-align: center !important;
    padding: 30px !important;
    color: #8f9da7 !important;
}

.log-action {
    font-weight: 600;
    color: #7fc5eb !important;
}

.log-action-login {
    color: #2ecc71 !important;
}

.log-action-logout {
    color: #f1c40f !important;
}

.log-action-excluir_usuario {
    color: #ff7676 !important;
}

@media (max-width: 700px) {
    .logs-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

.hidden {
    display: none !important;
}

.station-create-panel {
    background: #0d1720;
    border: 1px solid #2a3b49;
    border-radius: 9px;
    padding: 22px;
    margin-bottom: 24px;
}

.stations-admin-list {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(370px, 1fr));
    gap: 18px;
}

.station-admin-card {
    background: #0d1720;
    border: 1px solid #2a3b49;
    border-radius: 9px;
    padding: 20px;
}

.station-admin-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

.station-admin-heading h3 {
    margin: 0 0 8px;
}

.station-id-label {
    background: #263947;
    color: #aebbc5;
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 12px;
    white-space: nowrap;
}

.station-status {
    display: inline-block;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 600;
}

.station-status.active {
    color: #79e2a7;
    background: rgba(46, 204, 113, 0.14);
}

.station-status.inactive {
    color: #ff9c9c;
    background: rgba(231, 76, 60, 0.14);
}

.station-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.station-admin-card input,
.station-create-panel input {
    width: 100%;
    border: 1px solid #405363;
    background: #111d27;
    color: #ffffff;
    border-radius: 7px;
    padding: 12px;
}

.station-admin-card input:focus,
.station-create-panel input:focus {
    border-color: #4ba3d3;
    outline: none;
}

.station-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.delete-button {
    border: 1px solid #d9534f;
    background: transparent;
    color: #ff8d89;
    border-radius: 7px;
    padding: 10px 15px;
    cursor: pointer;
}

.delete-button:hover {
    background: rgba(217, 83, 79, 0.14);
}

.delete-button:disabled,
.primary-button:disabled,
.secondary-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

@media (max-width: 600px) {
    .stations-admin-list {
        grid-template-columns: 1fr;
    }

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

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

/* ============================
   TELA ASSISTIR
============================ */

.watch-page{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.watch-header{
    height:72px;
    background:#17232e;
    border-bottom:1px solid #2a3b49;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 24px;
}

.watch-header-left,
.watch-header-actions{
    display:flex;
    align-items:center;
    gap:14px;
}

.watch-content{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:18px;
}

.watch-information{

    display:grid;
    grid-template-columns:180px 1fr 180px;

    align-items:center;

    margin-bottom:18px;
}

.watch-title{
    text-align:center;
}

.watch-title h1{
    font-size:30px;
    margin-bottom:6px;
}

.watch-title p{
    color:#aebbc5;
    font-size:15px;
}

.watch-status{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:8px;
    font-weight:600;
}

.watch-status.online .status-dot{
    background:#2ecc71;
}

.watch-status.offline .status-dot{
    background:#e74c3c;
}

.stream-card {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - 165px);

    background: #17232e;
    border: 1px solid #2a3b49;
    border-radius: 10px;

    overflow: hidden;
}

.stream-container{

    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#05080c;
}

.stream-frame,
.stream-video{

    width:100%;
    height:100%;

    border:none;
    object-fit:contain;
}

.stream-message{

    text-align:center;
    color:#cfd9df;
}

.stream-message h3{

    font-size:28px;
    margin-bottom:12px;
}

.stream-message p{

    color:#9baab5;
    font-size:16px;
}

@media (max-width:900px){

    .watch-information{

        grid-template-columns:1fr;
        gap:18px;
        text-align:center;
    }

    .watch-status{

        justify-content:center;
    }
}

/* =========================================================
   ROV MONITOR - NOVO DASHBOARD
   ========================================================= */

* {
    box-sizing: border-box;
}

body.dashboard-page {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background: #f3f7fa;
    color: #10283a;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.dashboard-page button,
.dashboard-page a,
.dashboard-page input,
.dashboard-page select {
    font: inherit;
}

.dashboard-page .hidden {
    display: none !important;
}


/* =========================================================
   ESTRUTURA PRINCIPAL
   ========================================================= */

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

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


/* =========================================================
   MENU LATERAL
   ========================================================= */

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    display: flex;
    flex-direction: column;

    width: 245px;
    min-height: 100vh;

    background:
        linear-gradient(
            180deg,
            #103746 0%,
            #063249 55%,
            #002c43 100%
        );

    color: #ffffff;

    box-shadow:
        4px 0 20px rgba(0, 32, 48, 0.12);
}

.sidebar-brand {
    padding: 18px 20px 24px;
    text-align: center;
}

.sidebar-logo {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 25px;
}

.sidebar-brand h1 {
    margin: 0;

    color: #ffffff;

    font-size: 22px;
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: 0.5px;
}

.sidebar-menu {
    flex: 1;
    padding: 12px 10px;
}

.sidebar-admin {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sidebar-link,
.sidebar-logout {
    position: relative;

    display: flex;
    align-items: center;
    gap: 14px;

    width: 100%;
    min-height: 54px;
    padding: 13px 17px;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: rgba(255, 255, 255, 0.92);

    font-size: 15px;
    font-weight: 650;
    text-align: left;
    text-decoration: none;

    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.sidebar-link:hover,
.sidebar-logout:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.sidebar-link.active {
    background:
        linear-gradient(
            90deg,
            #08768b 0%,
            #126d83 100%
        );

    color: #ffffff;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.12);
}

.sidebar-link.active::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 4px;

    border-radius: 8px 0 0 8px;
    background: #ffd800;
}

.sidebar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    min-width: 24px;

    color: #d4e5ec;

    font-size: 22px;
    line-height: 1;
}

.sidebar-footer {
    margin: 0 16px;
    padding: 18px 0 24px;

    border-top:
        1px solid rgba(255, 255, 255, 0.2);
}


/* =========================================================
   BARRA SUPERIOR
   ========================================================= */

.dashboard-topbar {
    position: relative;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    min-height: 94px;
    padding: 15px 34px;

    border-bottom: 1px solid #dde6ec;

    background: rgba(255, 255, 255, 0.97);

    box-shadow:
        0 2px 12px rgba(20, 54, 73, 0.04);
}

.topbar-title p {
    margin: 0;

    color: #10283a;

    font-size: 19px;
    font-weight: 750;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 22px;
}

.dashboard-language-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding-right: 22px;

    border-right: 1px solid #d7e0e6;
}

.dashboard-language-selector .language-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 49px;
    height: 39px;
    padding: 4px;

    border: 1px solid #d7e2e8;
    border-radius: 8px;

    background: #ffffff;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.dashboard-language-selector .language-btn img {
    display: block;

    width: 31px;
    height: 22px;

    border-radius: 2px;
    object-fit: cover;
}

.dashboard-language-selector .language-btn:hover {
    transform: translateY(-1px);

    border-color: #0d7188;

    box-shadow:
        0 5px 12px rgba(13, 113, 136, 0.13);
}

.dashboard-language-selector .language-btn.active {
    border: 2px solid #0d7188;

    background: #eef9fb;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border: 1px solid #d9e2e8;
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #f7fafc,
            #e7edf1
        );

    color: #9aa9b4;
}

.user-avatar span {
    font-size: 22px;
}

.user-information {
    display: flex;
    flex-direction: column;
    gap: 3px;

    min-width: 130px;
}

.user-information strong {
    color: #14283a;

    font-size: 14px;
    font-weight: 750;
}

.user-information span {
    color: #096783;

    font-size: 13px;
    font-weight: 650;
}


/* =========================================================
   CONTEÚDO DO DASHBOARD
   ========================================================= */

.dashboard-content {
    position: relative;

    min-height: calc(100vh - 94px);
    padding: 34px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f5f9fc 0%,
            #ffffff 100%
        );
}

.dashboard-content > section {
    position: relative;
    z-index: 2;
}

.dashboard-watermark{
    position:absolute;

    top:55%;
    left:50%;

    transform:translate(-50%,-50%);

    width:720px;
    max-width:65%;

    opacity:0.5;

    pointer-events:none;
    user-select:none;

    z-index:0;
}

.dashboard-watermark img{
    display:block;
    width:100%;
    height:auto;
}

.dashboard-title,
.station-grid {
    position: relative;
    z-index: 2;
}

.dashboard-title {
    margin-bottom: 28px;
}

.dashboard-title h2 {
    margin: 0;

    color: #10283a;

    font-size: 29px;
    font-weight: 780;
    letter-spacing: -0.4px;
}


/* =========================================================
   CARTÕES DAS ESTAÇÕES
   ========================================================= */

.station-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(250px, 1fr));
    gap: 25px;

    width: 100%;
}

.station-card {
    display: flex;
    flex-direction: column;

    min-height: 310px;
    padding: 27px;

    border: 1px solid #c4d8e4;
    border-radius: 13px;

    background: rgba(255, 255, 255, 0.96);

    box-shadow:
        0 12px 30px rgba(28, 67, 88, 0.08);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.station-card:hover {
    transform: translateY(-3px);

    border-color: #92bfd2;

    box-shadow:
        0 18px 35px rgba(28, 67, 88, 0.13);
}

.station-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;

    padding-bottom: 20px;

    border-bottom: 1px solid #dbe5eb;
}

.station-header h3 {
    margin: 0 0 8px;

    color: #0c2235;

    font-size: 25px;
    font-weight: 780;
}

.station-header p {
    margin: 0;

    color: #607385;

    font-size: 14px;
    line-height: 1.5;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    flex-shrink: 0;

    padding: 6px 11px;

    border: 1px solid;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 750;
}

.status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;
}

.status.online {
    border-color: #28b96a;
    background: #f2fff7;
    color: #069449;
}

.status.online .status-dot {
    background: #15ad5c;

    box-shadow:
        0 0 0 3px rgba(21, 173, 92, 0.1);
}

.status.offline {
    border-color: #ff4f55;
    background: #fff7f7;
    color: #ee2d35;
}

.status.offline .status-dot {
    background: #f33139;

    box-shadow:
        0 0 0 3px rgba(243, 49, 57, 0.1);
}

.station-preview {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 1;

    min-height: 135px;
    padding: 24px 15px;

    color: #566b7d;

    font-size: 16px;
    font-weight: 550;
    line-height: 1.5;
    text-align: center;
}

.station-preview::before {
    content: "";

    display: block;

    width: 57px;
    height: 57px;
    margin-right: 15px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(17, 174, 94, 0.18) 0%,
            rgba(17, 174, 94, 0.08) 70%,
            transparent 72%
        );
}

.station-card:has(.status.offline)
.station-preview::before {
    background:
        radial-gradient(
            circle,
            rgba(239, 49, 57, 0.17) 0%,
            rgba(239, 49, 57, 0.07) 70%,
            transparent 72%
        );
}


/* =========================================================
   BOTÕES DOS CARTÕES
   ========================================================= */

.station-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 51px;
    margin-top: auto;
    padding: 12px 18px;

    border: 0;
    border-radius: 8px;

    background:
        linear-gradient(
            90deg,
            #006582,
            #00617b
        );

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;

    cursor: pointer;

    box-shadow:
        0 6px 15px rgba(0, 92, 119, 0.16);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.station-button:hover {
    transform: translateY(-1px);

    background:
        linear-gradient(
            90deg,
            #007493,
            #006b87
        );

    box-shadow:
        0 9px 20px rgba(0, 92, 119, 0.22);
}

.station-button.disabled-button,
.station-button:disabled {
    border: 1px solid #d7dde2;

    background: #e9edf0;
    color: #84919c;

    box-shadow: none;

    cursor: not-allowed;
    transform: none;
}


/* =========================================================
   CARREGAMENTO E ERROS
   ========================================================= */

.station-loading {
    grid-column: 1 / -1;

    margin: 0;
    padding: 35px;

    border: 1px dashed #bbccd7;
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.78);
    color: #5d7181;

    font-size: 15px;
    text-align: center;
}

.error-text {
    border-color: #efb9bc;
    background: #fff6f6;
    color: #bd3037;
}


/* =========================================================
   RESPONSIVIDADE
   ========================================================= */

@media (max-width: 1150px) {

    .station-grid {
        grid-template-columns:
            repeat(2, minmax(250px, 1fr));
    }

    .dashboard-topbar {
        padding-right: 24px;
        padding-left: 24px;
    }

    .dashboard-content {
        padding: 28px 24px;
    }
}

@media (max-width: 820px) {

    .sidebar {
        width: 78px;
    }

    .main-area {
        width: calc(100% - 78px);
        margin-left: 78px;
    }

    .sidebar-brand {
        padding: 16px 8px 22px;
    }

    .sidebar-logo {
        width: 60px;
        margin-bottom: 10px;
    }

    .sidebar-brand h1 {
        display: none;
    }

    .sidebar-link,
    .sidebar-logout {
        justify-content: center;
        padding: 13px 8px;
    }

    .sidebar-link span:last-child,
    .sidebar-logout span:last-child {
        display: none;
    }

    .sidebar-icon {
        width: auto;
        min-width: 0;
    }

    .dashboard-topbar {
        min-height: 80px;
    }

    .topbar-title p {
        font-size: 16px;
    }

    .user-information {
        display: none;
    }

    .dashboard-content {
        min-height: calc(100vh - 80px);
    }
}

@media (max-width: 650px) {

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

    .dashboard-topbar {
        align-items: flex-start;
        flex-direction: column;

        padding-top: 16px;
        padding-bottom: 16px;
    }

    .topbar-actions {
        width: 100%;
        justify-content: space-between;
    }

    .dashboard-language-selector {
        padding-right: 15px;
    }

    .dashboard-title h2 {
        font-size: 24px;
    }

    .dashboard-watermark {
        width: 85%;
    }
}

/* =========================================================
   PÁGINAS ADMINISTRATIVAS
   ========================================================= */

.admin-page-content {
    position: relative;
    min-height: calc(100vh - 94px);
}

.admin-page-heading {
    position: relative;
    z-index: 2;

    margin-bottom: 25px;
}

.admin-page-heading h2 {
    margin: 0 0 7px;

    color: #10283a;

    font-size: 29px;
    font-weight: 780;
}

.admin-page-heading p {
    margin: 0;

    color: #647787;

    font-size: 15px;
}

.admin-page-content .admin-form-section,
.admin-page-content .users-section {
    position: relative;
    z-index: 2;

    padding: 26px;

    border: 1px solid #d5e2e9;
    border-radius: 13px;

    background: rgba(255, 255, 255, 0.97);
    color: #10283a;

    box-shadow:
        0 12px 30px rgba(28, 67, 88, 0.08);
}

.admin-page-content .users-section {
    margin-top: 26px;
}

.admin-page-content .admin-form {
    width: 100%;
    max-width: 700px;
}

.admin-page-content h2,
.admin-page-content h3,
.admin-page-content label,
.admin-page-content legend {
    color: #10283a;
}

.admin-page-content .form-group {
    margin-bottom: 18px;
}

.admin-page-content .form-group label {
    display: block;
    margin-bottom: 7px;

    color: #40576a;

    font-size: 14px;
    font-weight: 650;
}

.admin-page-content input,
.admin-page-content select {
    width: 100%;

    padding: 12px 13px;

    border: 1px solid #c9d8e1;
    border-radius: 8px;

    background: #ffffff;
    color: #10283a;

    outline: none;
}

.admin-page-content input:focus,
.admin-page-content select:focus {
    border-color: #0c758c;

    box-shadow:
        0 0 0 3px rgba(12, 117, 140, 0.11);
}

.admin-page-content fieldset {
    margin-bottom: 20px;
    padding: 16px;

    border: 1px solid #c9d8e1;
    border-radius: 9px;
}

.admin-page-content legend {
    padding: 0 8px;

    font-size: 14px;
    font-weight: 650;
}

.admin-page-content .station-permissions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.admin-page-content .permission-option {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 13px;

    border: 1px solid #d3e0e7;
    border-radius: 8px;

    background: #f7fafc;
    color: #10283a;

    cursor: pointer;
}

.admin-page-content .permission-option input {
    width: auto;
}

.admin-page-content .users-list {
    display: grid;
    gap: 13px;
}

.admin-page-content .user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 18px;

    border: 1px solid #d5e2e9;
    border-radius: 9px;

    background: #f8fbfc;
}

.admin-page-content .user-item h3 {
    color: #10283a;
}

.admin-page-content .user-item p {
    margin-top: 5px;
    color: #647787;
}

.admin-page-content .message {
    color: #647787;
}

.admin-page-content .message.success {
    color: #159653;
}

.admin-page-content .message.error {
    color: #d9363e;
}

@media (max-width: 700px) {

    .admin-page-content .user-item {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   PÁGINA DE ESTAÇÕES
   ========================================================= */

.stations-page-section {
    position: relative;
    z-index: 2;
}

.section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 22px;
}

.section-heading h2 {
    margin: 0 0 7px;
}

.section-heading p {
    margin: 0;
}

.admin-page-content .station-create-panel {
    margin-bottom: 24px;
    padding: 24px;

    border: 1px solid #d5e2e9;
    border-radius: 10px;

    background: #f7fafc;
}

.admin-page-content .station-admin-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 20px;
}

.admin-page-content .station-form-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(240px, 1fr));
    gap: 16px;
}

.admin-page-content .stations-admin-list {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(320px, 1fr));
    gap: 18px;
}

.admin-page-content .station-admin-card {
    position: relative;
    z-index: 2;

    padding: 22px;

    border: 1px solid #d5e2e9;
    border-radius: 11px;

    background: #ffffff;
    color: #10283a;

    box-shadow:
        0 8px 22px rgba(28, 67, 88, 0.07);
}

.admin-page-content .station-admin-card input {
    background: #ffffff;
    color: #10283a;
}

.admin-page-content .station-id-label {
    background: #e7f0f5;
    color: #3f5c6e;
}

.admin-page-content .station-status.active {
    color: #087b42;
    background: #e8f8ef;
}

.admin-page-content .station-status.inactive {
    color: #c73339;
    background: #fff0f1;
}

.admin-page-content .station-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 18px;
}

@media (max-width: 900px) {

    .admin-page-content .station-form-grid,
    .admin-page-content .stations-admin-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {

    .section-heading,
    .admin-page-content .station-admin-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .section-heading .primary-button,
    .admin-page-content .station-admin-heading .secondary-button {
        width: 100%;
    }
}

/* =========================================================
   PÁGINA DE REGISTROS
   ========================================================= */

.logs-page-section {
    position: relative;
    z-index: 2;
}

.logs-page-section .logs-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;

    margin-bottom: 22px;
}

.logs-page-section .logs-heading h2 {
    margin: 0 0 7px;
}

.logs-page-section .logs-heading p {
    margin: 0;
    color: #647787;
}

.logs-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.logs-page-section .logs-filter {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.logs-page-section .logs-filter label {
    color: #40576a;
    font-size: 13px;
    font-weight: 650;
}

.logs-page-section .logs-filter select {
    min-width: 115px;
}

.logs-page-section .logs-table-container {
    width: 100%;
    overflow-x: auto;

    border: 1px solid #d5e2e9;
    border-radius: 10px;

    background: #ffffff;
}

.logs-page-section .logs-table {
    width: 100%;
    min-width: 850px;

    border-collapse: collapse;
}

.logs-page-section .logs-table th,
.logs-page-section .logs-table td {
    padding: 14px 15px;
    text-align: left;
    vertical-align: top;
}

.logs-page-section .logs-table th {
    background: #0e3547;
    color: #ffffff;

    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.logs-page-section .logs-table td {
    color: #40576a;

    border-bottom: 1px solid #dce6ec;

    font-size: 14px;
}

.logs-page-section .logs-table tbody tr:hover {
    background: #f4f8fa;
}

.logs-page-section .logs-table tbody tr:last-child td {
    border-bottom: 0;
}

.logs-page-section .log-action {
    font-weight: 700;
}

.logs-page-section .log-action-login {
    color: #159653 !important;
}

.logs-page-section .log-action-logout {
    color: #d29a00 !important;
}

.logs-page-section .log-action-excluir_usuario {
    color: #d9363e !important;
}

@media (max-width: 750px) {

    .logs-page-section .logs-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .logs-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .logs-toolbar .secondary-button {
        width: 100%;
    }
}

/* =========================================================
   PÁGINA ASSISTIR
   ========================================================= */

.watch-dashboard-topbar {
    min-height: 80px;
}

.watch-topbar-station {
    display: flex;
    align-items: center;
    gap: 28px;

    min-width: 0;
}

.watch-topbar-title {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.watch-topbar-label {
    color: #6a7f8f;

    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.watch-topbar-title strong {
    color: #08253a;

    font-size: 22px;
    font-weight: 800;
}

.watch-topbar-description {
    display: flex;
    align-items: center;
    gap: 16px;

    padding-left: 26px;

    border-left: 1px solid #d8e3e9;
}

.watch-topbar-description > span {
    max-width: 340px;

    overflow: hidden;

    color: #5f7687;

    font-size: 14px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.watch-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 6px 11px;

    border: 1px solid;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 750;
}

.watch-status .status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;
}

.watch-status.online {
    border-color: #27bd70;
    background: #ecfff5;
    color: #098c4a;
}

.watch-status.online .status-dot {
    background: #16c769;

    box-shadow:
        0 0 0 4px rgba(22, 199, 105, 0.12);
}

.watch-status.offline {
    border-color: #ff5a64;
    background: #fff4f4;
    color: #ec3641;
}

.watch-status.offline .status-dot {
    background: #ff4652;

    box-shadow:
        0 0 0 4px rgba(255, 70, 82, 0.11);
}


/* ÁREA CENTRAL */

.watch-dashboard-content {
    width: 100%;
    height: calc(100vh - 80px);

    padding: 24px 28px;

    background:
        linear-gradient(
            180deg,
            #f3f8fb 0%,
            #ffffff 100%
        );
}

.watch-stream-panel {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    padding: 22px;

    border: 1px solid #cadae4;
    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 15px 36px rgba(24, 66, 88, 0.10);
}

.watch-stream-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;

    margin-bottom: 18px;
}

.watch-live-label {
    display: block;

    margin-bottom: 5px;

    color: #0783a0;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.watch-stream-header h2 {
    margin: 0;

    color: #08253a;

    font-size: 23px;
}

.watch-stream-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fullscreen-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 42px;

    padding: 0;

    font-size: 22px;
}


/* PLAYER */

.watch-full-stream {
    position: relative;

    flex: 1;

    min-height: 420px;

    overflow: hidden;

    border: 1px solid #193a4c;
    border-radius: 10px;

    background:
        radial-gradient(
            circle at center,
            #102c3a 0%,
            #06131c 65%,
            #02080d 100%
        );
}

.watch-full-stream .stream-frame,
.watch-full-stream .stream-video {
    width: 100%;
    height: 100%;

    border: 0;

    background: #000000;

    object-fit: contain;
}

.watch-full-stream .stream-message {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    padding: 30px;

    color: #d8e8f0;
    text-align: center;
}

.watch-full-stream .stream-message h3 {
    margin: 17px 0 7px;

    color: #ffffff;

    font-size: 22px;
}

.watch-full-stream .stream-message p {
    margin: 0;

    color: #7fa0b1;
}

.stream-loading-indicator {
    width: 54px;
    height: 54px;

    border: 5px solid rgba(255, 255, 255, 0.14);
    border-top-color: #13b8d0;
    border-radius: 50%;

    animation: watch-loading-spin 0.9s linear infinite;
}

@keyframes watch-loading-spin {
    to {
        transform: rotate(360deg);
    }
}


/* FULLSCREEN */

.watch-full-stream:fullscreen {
    width: 100vw;
    height: 100vh;

    border: 0;
    border-radius: 0;

    background: #000000;
}


/* RESPONSIVO */

@media (max-width: 1000px) {

    .watch-topbar-description {
        display: none;
    }

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

    .watch-stream-actions {
        width: 100%;
    }

    .watch-stream-actions .secondary-button:first-child {
        flex: 1;
    }
}

@media (max-width: 720px) {

    .watch-dashboard-content {
        height: auto;
        min-height: calc(100vh - 80px);

        padding: 16px;
    }

    .watch-stream-panel {
        min-height: 650px;

        padding: 15px;
    }

    .watch-full-stream {
        min-height: 440px;
    }
}

/* SENHA PADRÃO DO NOVO USUÁRIO */

.default-password-information {
    margin-bottom: 18px;
    padding: 16px 18px;

    border: 1px solid #bfd9e4;
    border-radius: 9px;

    background: #f2f9fc;
}

.default-password-title {
    margin-bottom: 7px;

    color: #40576a;

    font-size: 13px;
    font-weight: 700;
}

.default-password-value {
    display: block;

    margin-bottom: 6px;

    color: #087c96;

    font-family: Consolas, monospace;
    font-size: 19px;
}

.default-password-information p {
    margin: 0;

    color: #647787;

    font-size: 13px;
}

/* =========================================================
   PRIMEIRO ACESSO - NOVA SENHA
   ========================================================= */

.password-page {
    min-height: 100vh;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            rgba(5, 24, 38, 0.72),
            rgba(5, 24, 38, 0.82)
        ),
        url('/assets/images/login-rov-background.png')
        center center / cover no-repeat fixed;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

.password-page-content {
    width: 100%;
    padding: 32px 20px;

    display: flex;
    justify-content: center;
}

.password-card {
    width: 100%;
    max-width: 430px;

    padding: 34px 36px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;

    background: rgba(16, 33, 47, 0.96);

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.45);
}

.password-brand {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 28px;
}

.password-logo {
    width: 105px;
    height: auto;

    display: block;
    object-fit: contain;
}

.password-system-name {
    padding-left: 14px;

    border-left: 1px solid rgba(255, 255, 255, 0.18);

    color: #ffffff;

    font-size: 19px;
    font-weight: 700;
}

.password-header {
    margin-bottom: 27px;
}

.password-header h1 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 26px;
    font-weight: 700;
}

.password-header p {
    margin: 0;

    color: #94a9b8;

    font-size: 14px;
    line-height: 1.55;
}

.password-card .form-group {
    margin-bottom: 18px;
}

.password-card .form-group label {
    display: block;

    margin-bottom: 8px;

    color: #e9f0f4;

    font-size: 14px;
    font-weight: 600;
}

.password-card .form-group input {
    width: 100%;
    height: 45px;

    padding: 0 13px;

    box-sizing: border-box;

    border: 1px solid #456174;
    border-radius: 7px;

    outline: none;

    background: #0c1c28;
    color: #ffffff;

    font-size: 15px;

    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.password-card .form-group input:focus {
    border-color: #0d9ed1;

    box-shadow:
        0 0 0 3px rgba(13, 158, 209, 0.16);
}

.password-requirement {
    margin: -4px 0 20px;

    color: #7f99aa;

    font-size: 12px;
}

.password-submit-button {
    width: 100%;
    height: 44px;

    border: 0;
    border-radius: 7px;

    cursor: pointer;

    background: #078bd2;
    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    transition:
        background 0.2s,
        transform 0.1s;
}

.password-submit-button:hover {
    background: #067bb9;
}

.password-submit-button:active {
    transform: translateY(1px);
}

.password-submit-button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.password-card .message {
    min-height: 20px;
    margin: 16px 0 0;

    text-align: center;

    font-size: 13px;
}

.password-card .message.error {
    color: #ff8181;
}

.password-card .message.success {
    color: #67d6a0;
}

@media (max-width: 520px) {
    .password-page-content {
        padding: 20px 14px;
    }

    .password-card {
        padding: 28px 22px;
    }

    .password-brand {
        justify-content: center;
    }

    .password-header {
        text-align: center;
    }
}

.change-password-link {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1f6fa9;
    font-size: 12px;
    cursor: pointer;
    text-align: left;
}

.change-password-link:hover {
    text-decoration: underline;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(7, 20, 33, 0.65);
}

.modal-card {
    width: 100%;
    max-width: 430px;
    padding: 24px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.modal-header h2 {
    margin: 0;
    font-size: 22px;
}

.modal-close {
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 16px;
}

.form-group label {
    font-size: 14px;
    font-weight: 600;
}

.form-group input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #c9d2da;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
}

.form-group input:focus {
    border-color: #2476a8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(36, 118, 168, 0.14);
}

.form-message {
    min-height: 20px;
    margin: 4px 0 14px;
    font-size: 14px;
}

.success-text {
    color: #17723b;
}

.error-text {
    color: #b42318;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.secondary-button {
    padding: 10px 16px;
    border: 1px solid #b9c3cc;
    border-radius: 8px;
    background: #ffffff;
    color: #244457;
    cursor: pointer;
}

.secondary-button:hover {
    border-color: #0d7188;
    background: #eef7fa;
    color: #075f73;
}

.hidden {
    display: none !important;
}

/* =======================================================
   LOGS - TABELA
======================================================= */

.log-row-clickable {
    cursor: pointer;
    transition: background .2s;
}

.log-row-clickable:hover {
    background: rgba(0, 128, 255, .08);
}

.log-row-clickable:focus {
    outline: 2px solid #2f81f7;
    outline-offset: -2px;
}

/* =======================================================
   STATUS
======================================================= */

.log-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .80rem;
    font-weight: 600;
}

.log-status-success {
    background: rgba(16,185,129,.18);
    color: #10b981;
}

.log-status-failure {
    background: rgba(239,68,68,.18);
    color: #ef4444;
}

/* =======================================================
   MODAL
======================================================= */

.log-modal{
    position:fixed;
    inset:0;
    display:none;
    z-index:9999;
}

.log-modal.open{
    display:flex;
    align-items:center;
    justify-content:center;
}

.log-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.65);
    backdrop-filter:blur(3px);
}

.log-modal-dialog{
    position:relative;
    width:min(950px,92vw);
    max-height:90vh;
    overflow:auto;
    border-radius:16px;
    background:#1f2937;
    color:#fff;
    box-shadow:0 25px 60px rgba(0,0,0,.5);
    z-index:2;
}

.log-modal-header,
.log-modal-footer{
    padding:20px 28px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.log-modal-footer{
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:none;
    text-align:right;
}

.log-modal-body{
    padding:28px;
}

.log-modal-close{
    position:absolute;
    top:18px;
    right:18px;
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:transparent;
    color:white;
    cursor:pointer;
    font-size:28px;
}

.log-modal-close:hover{
    background:rgba(255,255,255,.08);
}

.log-modal-eyebrow{
    font-size:.80rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#60a5fa;
}

/* =======================================================
   GRID
======================================================= */

.log-detail-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.log-detail-item{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.log-detail-item span{
    font-size:.78rem;
    color:#9ca3af;
    text-transform:uppercase;
}

.log-detail-item strong{
    font-size:.95rem;
    font-weight:600;
}

.log-detail-wide{
    grid-column:1/-1;
}

.log-detail-break{
    word-break:break-word;
}

body.log-modal-open{
    overflow:hidden;
}

@media(max-width:768px){

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

}

.sidebar-link.active {
    background: rgba(0, 169, 157, 0.22);
    color: #ffffff;
    border-left: 4px solid #00a99d;
}