@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400&display=swap");
/* variaveis */

:root {
    /* Existing variables */
    --primary-color: #ff7707;
    --primary-color-light: #f2d0b5;
    /* --dark-color: #363537; /* Replaced by --text-strong and --dark-elements-bg */

    /* New Theme Variables */
    --text-strong: #363537; /* For headings, important text */
    --dark-elements-bg: #363537; /* For dark component backgrounds like .content-script */

    /* General Theme Variables - Light Mode Defaults */
    --theme-body-background: #FFF9F5;
    --theme-content-background: #FFFFFF;

    --theme-text-primary: #000000;
    --theme-text-secondary: var(--text-strong);
    --theme-text-on-primary: #FFFFFF;
    --theme-text-on-dark: #c4c3c3;       /* Text on var(--dark-elements-bg) */
    --theme-text-muted: #888888;
    --theme-text-link: #007bff;

    --theme-border-primary: #EFE2D9;     /* Default borders for inputs, selects */
    --theme-border-secondary: #c6c6c6;   /* Other common borders (e.g., dividers) */
    --theme-border-card: #FFF4EB;        /* Card specific border */
    --theme-border-strong: #C5AB96;      /* Stronger border, e.g. for input hover */

    /* Buttons & Actions */
    --button-primary-bg: var(--primary-color);
    --button-primary-text: var(--theme-text-on-primary);
    --button-primary-border: var(--primary-color);
    --button-primary-hover-bg: #D66100; /* --orange-dark-pr from patterns.css (assumed) */
    --button-primary-focus-border: #9E4700; /* (assumed darker shade) */

    --button-secondary-bg: transparent;
    --button-secondary-text: var(--primary-color);
    --button-secondary-border: var(--primary-color);
    --button-secondary-hover-bg: #FFF4EB; /* --grey3-sc from patterns.css (assumed) */
    --button-secondary-hover-text: #D66100;
    --button-secondary-hover-border: #D66100;

    --button-tertiary-text: var(--primary-color);
    --button-tertiary-hover-text: #D66100;

    /* Specific Component Colors (Problem Card buttons from monitoring-dashboard.css) */
    --button-card-blue-bg: #007bff;
    --button-card-blue-text: #FFFFFF;
    --button-card-blue-border: #007bff;
    --button-card-blue-hover-bg: #0067d5;
    --button-card-blue-focus-border: #003f83;

    --button-card-blue-secondary-bg: transparent;
    --button-card-blue-secondary-text: #007bff;
    --button-card-blue-secondary-border: #007bff;
    --button-card-blue-secondary-hover-bg: #f0f8ff;
    --button-card-blue-secondary-hover-border: #0067d5;

    /* Status & Semantic Colors */
    --status-success-bg: #28a745;
    --status-success-text: #FFFFFF;
    --status-warning-bg: #ffc107;
    --status-warning-text: #212529; /* Dark text for yellow */
    --status-danger-bg: #dc3545;
    --status-danger-text: #FFFFFF;
    --status-info-bg: #17a2b8;
    --status-info-text: #FFFFFF;
    --status-neutral-bg: #6c757d;
    --status-neutral-text: #FFFFFF;

    /* Other UI elements */
    --sidebar-background: #363537; /* from sidebar.css */
    --sidebar-text-color: #FFFFFF;
    --sidebar-hover-background: #FFFFFF;
    --sidebar-hover-text: var(--primary-color);

    --input-background: #FFFFFF;
    --input-border-color: var(--theme-border-primary);
    --input-focus-border-color: var(--primary-color);
    --input-text-color: var(--theme-text-primary);

    --box-shadow-default: 0px 3px 6px #00000014; /* Common shadow */
}

p {
    margin: 0;
}

footer {
    width: 50%;
    height: 100px;
    position: fixed;
    display: block;
    bottom: 0px;
}

.footer {
    max-width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    gap: 40px;
}

.container-content {
    margin-bottom: 200px;
}
.container-cards {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}
.card-options {
    max-height: 373px;
    width: 240px;
    text-align: center;
    background: var(--theme-content-background);
    border: 1px solid var(--theme-border-secondary);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: var(--box-shadow-default); /* Assuming this is the intended default, or define a new one */
    cursor: pointer;
    gap: 5px;
}
.card-options .content-img {
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content-img img {
    width: 100%;
}
.content-img .img-carteira {
    width: 80%;
}

.card-options h4 {
    color: var(--primary-color);
}
.card-options:hover {
    transform: scale(1.06);
}

/*cards indisponíveis*/

.card-not-included {
    background-color: #dcdcdc;
    opacity: 0.5;
}

.monitoramento ul {
    padding: 0;
}
.monitoramento ul li {
    border-top: 1px solid var(--theme-border-secondary);
    padding: 8px 6px;
    list-style: none;
}
.monitoramento .card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-falha,
.status-on {
    display: flex;
    align-items: center;
    gap: 10px;
}
.status-falha span,
.status-on span {
    padding: 6px 8px;
    background: #fef2f2; /* Needs --status-danger-light-bg or similar */
    color: var(--status-danger-text); /* Assuming #c84a4a is for text on light bg, or var(--status-danger-bg) if on dark */
    border-radius: 6px;
}
.status-falha p,
.status-on p {
    margin: 0;
}

.status-on span {
    background: #acf3ae; /* Needs --status-success-light-bg or similar */
    color: var(--status-success-bg); /* Assuming #11ba14 is text on light bg */
}

/* cadastro mikrotik*/

.container-cadastro-mikrotik {
    padding: 40px;
}
.container-cadastro-mikrotik h4,
h5 {
    color: var(--primary-color);
}
.aviso {
    padding: 20px;
    color: var(--primary-color); /* Text color is primary */
    background: var(--primary-color-light); /* Background is light primary */
    border-radius: 10px;
    margin: 20px 10px;
}
.aviso p {
    color: var(--primary-color);
}
.info-adocao {
    font-size: 16px;
}
.politica_CPF {
    border: 1px solid var(--theme-border-secondary);
    padding: 20px;
    margin: 20px 0;
    border-radius: 6px;
}

.redes-cofiaveis ul,
.servicos_ip ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 20px;
    flex-wrap: wrap;
}
.redes-cofiaveis ul li span {
    padding: 4px 6px;
    color: var(--status-success-text); /* Assuming text on success background */
    background: var(--status-success-bg); /* Assuming #7ad77a is success background */
    border-radius: 4px;
}
.redes-cofiaveis ul li:nth-child(1) span {
    padding: 4px 6px;
    color: var(--primary-color); /* Text color is primary */
    background: var(--primary-color-light); /* Background is light primary */
    border-radius: 4px;
}

.servicos_ip li,
.redes-cofiaveis li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--status-success-bg); /* Text color green */
    flex-direction: row-reverse;
}
.redes-cofiaveis li {
    color: var(--theme-text-muted); /* #999 */
}
.redes-cofiaveis > p,
.servicos_ip > p {
    font-weight: bold;
    color: var(--theme-text-secondary); /* Approximating #000000bf */
}
.servicos_ip li span {
    color: #e2956d;
}
.container-script-implantacao img {
    width: 70%;
    margin: 0 auto;
}
.btn-termos {
    background: #d1eafa;
    font-weight: 500;
}
.btn-termos img {
    width: 20px;
}
.header-alerta-falta-credito,
.fotter-alerta-falta-credito {
    display: flex;
    justify-content: flex-end;
    padding: 20px;
    gap: 10px;
}
.alerta-falta-credito {
    font-size: 18px;
    gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.alerta-falta-credito i {
    color: var(--status-danger-bg);
    font-size: 70px;
}
/*  scipt de implantação */

.container-script-implantacao button {
    font-weight: 500;
}
.content-script {
    background: var(--dark-elements-bg);
    border-radius: 8px;
    padding: 15px;
    font-size: 14px;
    margin: 20px 0;
    width: 70%;
}
.content-script p {
    color: var(--theme-text-on-dark);
}
.script_implantacao {
    margin: 20px 0;
}
.script_implantacao span {
    color: var(--primary-color);
}
.script_implantacao span:nth-child(1) {
    color: #00c0ff; /* Specific accent color, leave as is */
}
.caminho_api p {
    color: var(--status-success-bg); /* Assuming #27c927 is success text */
}
.caminho_api span {
    color: #ebf0f5 !important; /* Specific accent color, leave as is */
}
.btn-padrao {
    border: none;
    color: var(--button-secondary-text);
    background: var(--button-secondary-hover-bg); /* primary-color-light is often a secondary button bg */
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.btn-padrao:hover, .btn-cancelar:hover {
    transform: scale(1.08);
}
.btn-cancelar {
    border: none;
    color: var(--status-danger-text);
    background: var(--status-danger-bg);
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.btn-cancelar:hover {
    color: var(--status-danger-text);
}
.ocultar {
    display: none;
}
/* tabelas */

.content-tabelas {
    padding: 20px;
    background: var(--theme-content-background) 0% 0% no-repeat padding-box!important;
    box-shadow: var(--box-shadow-default) !important;
    border: 1px solid var(--theme-border-card) !important;
    border-radius: 8px!important;
}
.vpnDesconectada,
.vpnConectada {
    justify-content: start !important;
    padding-left: 1rem;
}
.status,
.status-desligado,
.status-transicao {
    display: flex;
    justify-content: center;
    align-items: center;
}
.status span,
.status-desligado span,
.status-transicao span {
    width: 15px;
    height: 15px;
    display: block;
    background: var(--status-success-bg);
    border-radius: 999px;
}
.status-desligado span {
    background: var(--status-danger-bg);
}
.status-transicao span{
    background: var(--primary-color);
}
.status p,
.status-desligado p,
.status-transicao p {
    visibility: hidden;
}

.container-tabelas {
    color: var(--primary-color);
}
#mytable tbody td,
#tableDispositivos tbody td {
    vertical-align: middle;
}

#tableDispositivos thead th,
#tableDispositivos tbody td {
    text-align: center;
}

.expirado {
    padding: 5px;
    background: #dba527; /* Gold color, leave as is */
    color: var(--theme-text-on-primary); /* Assuming text on colored background */
    border-radius: 3px;
    margin-right: 6px;
}
/* editmikrotik */

.container-visao-mikrotiks p {
    font-size: 14px;
}
.container-visao-mikrotiks {
    padding: 20px 30px;
}
.topo-visao-mikrotiks {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.topo-visao-mikrotiks img {
    max-width: 140px;
    height: auto;
}
.header-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--theme-border-secondary);
    padding-bottom: 10px;
}
.ativo::after,
.inativo::after {
    content: "";
    display: flex;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--status-success-bg);
}
.inativo::after {
    background: var(--status-danger-bg);
}
.info-name {
    color: var(--text-strong);
    font-weight: 500;
    display: flex;
    gap: 5px;
    align-items: center;
}

.desc-mikrotik {
    display: flex;
    justify-content: space-between;
    padding: 20px 0px;
    border-bottom: 1px solid var(--theme-border-secondary);
}
.desc-info p {
    color: var(--text-strong);
}
.desc-info p:nth-child(1) {
    color: var(--primary-color);
    font-weight: 500;
}
.tempo-atividade p:nth-child(1) {
    color: var(--text-strong);
}
.tempo-atividade p:nth-child(2) {
    color: var(--status-success-bg);
    font-weight: 500;
}
.tempo-atividade p:nth-child(3) {
    color: var(--primary-color);
}

.nav-pills .nav-link.active {
    background-color: var(--dark-elements-bg);
}

.footer-info {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px 0;
    flex-wrap: wrap;
}
.footer-info img {
    max-width: 250px;
}
.dns-filter,
.container-icon-failover {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 300px;
    gap: 8px;
}
.dns-filter p {
    text-align: center;
}
.icon-failover {
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

@keyframes moveDiagonal1 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(100px, 100px);
    }
}

/* General text element overrides for dark mode */
body.dark-mode,
body.dark-mode p,
body.dark-mode li,
body.dark-mode th,
body.dark-mode td,
body.dark-mode label,
body.dark-mode div,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode span,
body.dark-mode strong,
body.dark-mode b,
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode textarea,
body.dark-mode .form-control,
body.dark-mode .nav-link,
body.dark-mode .dropdown-item,
body.dark-mode .breadcrumb-item,
body.dark-mode .modal-body,
body.dark-mode .card-title,
body.dark-mode .card-text,
body.dark-mode .custom-select,
body.dark-mode .form-check-label {
    color: var(--theme-text-primary) !important;
}

/* Ensure modal titles in dark mode have appropriate contrast */
body.dark-mode .modal-header .modal-title {
    color: var(--theme-text-secondary) !important; /* Or another suitable dark mode text variable */
}

body.dark-mode a,
body.dark-mode a:hover,
body.dark-mode a:focus {
    color: var(--theme-text-link) !important;
}

body.dark-mode .text-muted {
    color: var(--theme-text-muted) !important;
}

body.dark-mode .custom-secondary-text {
    color: var(--theme-text-secondary) !important;
}

body.dark-mode .multiselect.dropdown-toggle .multiselect-selected-text {
    color: var(--theme-text-primary) !important;
}

body.dark-mode .multiselect-container > li > a > label.radio,
body.dark-mode .multiselect-container > li > a > label.checkbox {
    color: var(--theme-text-primary) !important;
}

@media (max-width: 768px) { /* Adjusted to match existing query */
    /* Bootstrap Multiselect Mobile Usability Enhancements */

    /* Main button that shows selected items / placeholder */
    .content-multiple-select .btn-group button.multiselect.dropdown-toggle {
        padding: 12px 15px !important; /* Increased padding further */
        font-size: 16px !important;    /* Keep or slightly increase if needed */
        min-height: 44px !important;   /* Ensure a minimum touch height */
        height: auto !important;
        line-height: 1.5 !important;
        display: flex; /* Helps with vertical alignment of text if it wraps */
        align-items: center;
    }

    .content-multiple-select .btn-group .multiselect-selected-text {
        font-size: 16px !important;
        white-space: normal; /* Allow text to wrap if many items selected */
    }

    /* The dropdown container */
    .multiselect-container.dropdown-menu {
        width: 90vw !important;
        max-width: 450px; /* Max width to avoid being overly wide on larger small screens */
        box-sizing: border-box;
    }

    /* Individual items/options in the dropdown */
    .multiselect-container > li > a { /* Target the whole 'a' tag for click area */
        padding: 0 !important; /* Remove padding from 'a' if label has enough */
    }

    .multiselect-container > li > a > label.radio,
    .multiselect-container > li > a > label.checkbox {
        padding: 12px 15px !important; /* Increased padding for better touch target on the label */
        font-size: 16px !important;    /* Keep or increase if needed */
        white-space: normal !important;
        line-height: 1.5 !important;  /* Adjust for better text display */
        margin-bottom: 0; /* Remove default label margin if any */
        display: flex; /* Align checkbox and text nicely */
        align-items: center;
    }

    /* Styling the checkbox/radio input itself and its spacing */
    .multiselect-container > li > a > label.radio input[type="radio"],
    .multiselect-container > li > a > label.checkbox input[type="checkbox"] {
        transform: scale(1.3); /* Make checkbox/radio slightly larger */
        margin-right: 12px;    /* More space between checkbox and text */
        /* Align checkbox with the start of the text if using flex on label */
        flex-shrink: 0;
    }

    /* Filter input within the dropdown */
    .content-multiple-select .multiselect-container .multiselect-filter {
        padding: 5px;
        background-color: var(--theme-content-background, #fff); /* Ensure it has a background */
        z-index: 10; /* Ensure it's above the list items if any overlap issues */
    }

    .content-multiple-select .multiselect-container .multiselect-filter > input.multiselect-search {
        font-size: 16px !important;
        padding: 12px 10px !important; /* Existing */
        height: auto !important; /* Existing */
        min-height: 44px !important; /* Existing */
        width: 100%; /* Ensure it tries to use full width of its container */
        box-sizing: border-box; /* Consistent box model */
        -webkit-appearance: none; /* Attempt to reset default browser styling on mobile */
        -moz-appearance: none;
        appearance: none;
        opacity: 1 !important; /* Ensure not transparent */
        visibility: visible !important; /* Ensure visible */
    }

    /* "Select All" item if present */
    .multiselect-container .multiselect-all > a > label.checkbox {
        font-weight: bold; /* Make "Select All" more prominent if desired */
        font-size: 17px !important; /* Slightly larger */
    }
    .multiselect-container .multiselect-all > a > label.checkbox input[type="checkbox"] {
        transform: scale(1.4);
        margin-right: 12px;
    }
}

#darkModeToggle,
#darkModeToggleDispensadas,
#darkModeToggleNotifications {
    display: flex !important; /* Changed to flex to match .buttons-company button for alignment */
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    /* REMOVED width: auto !important; and height: auto !important; */
}

body.dark-mode {
    --theme-body-background: #121212;
    --theme-content-background: #1e1e1e;
    --theme-text-primary: #FFFFFF;
    --theme-text-secondary: #EAEAEA;
    --theme-text-on-primary: #FFFFFF; /* Corrected: Light text for dark primary buttons */
    --theme-text-on-dark: #FFFFFF;
    --theme-text-muted: #D0D0D0;
    --theme-text-link: #B0E0E6;    /* Light powder blue for links */

    --theme-border-primary: #333333;
    --theme-border-secondary: #444444;
    --theme-border-card: #2a2a2a;
    --theme-border-strong: #555555;

    /* Buttons & Actions */
    --button-primary-bg: #ff8c00; /* Darker Orange */
    /* --button-primary-text: #000000; /* Text on dark orange - REPLACED by #FFFFFF above */
    --button-primary-border: #ff8c00;
    --button-primary-hover-bg: #e07b00;
    --button-primary-focus-border: #c06800;

    --button-secondary-bg: transparent;
    --button-secondary-text: #ff8c00;
    --button-secondary-border: #ff8c00;
    --button-secondary-hover-bg: #332200; /* Dark hover for secondary */
    --button-secondary-hover-text: #ff9d26;
    --button-secondary-hover-border: #ff9d26;

    --button-tertiary-text: #ff8c00;
    --button-tertiary-hover-text: #ff9d26;

    /* Specific Component Colors (Problem Card buttons) */
    --button-card-blue-bg: #005cb3; /* Darker blue */
    --button-card-blue-text: #FFFFFF; /* Ensured white */
    --button-card-blue-border: #005cb3;
    --button-card-blue-hover-bg: #004c99;
    --button-card-blue-focus-border: #003366;

    --button-card-blue-secondary-bg: transparent;
    --button-card-blue-secondary-text: #8ab4f8; /* Lighter blue for text */
    --button-card-blue-secondary-border: #8ab4f8;
    --button-card-blue-secondary-hover-bg: #1a2c3d; /* Dark hover for secondary blue */
    --button-card-blue-secondary-hover-border: #6c9eda;

    /* Status & Semantic Colors - Ensuring text contrasts with background */
    --status-success-bg: #1e7e34; /* Darker Green */
    --status-success-text: #e0e0e0;
    --status-warning-bg: #b38600; /* Darker Yellow */
    --status-warning-text: #e0e0e0;
    --status-danger-bg: #a71d2a;  /* Darker Red */
    --status-danger-text: #e0e0e0;
    --status-info-bg: #10707f;   /* Darker Info Blue */
    --status-info-text: #e0e0e0;
    --status-neutral-bg: #4f5459; /* Darker Neutral Grey */
    --status-neutral-text: #e0e0e0;

    /* Other UI elements */
    --sidebar-background: #222222;
    --sidebar-text-color: #e0e0e0;
    --sidebar-hover-background: #333333;
    --sidebar-hover-text: #ff8c00; /* Primary color for hover */

    --input-background: #2a2a2a;
    --input-border-color: var(--theme-border-primary);
    --input-focus-border-color: #ff8c00; /* Primary color for focus */
    --input-text-color: var(--theme-text-primary);

    --box-shadow-default: 0px 3px 6px #00000050; /* Darker shadow */

    /* Overrides for specific classes that use hardcoded colors or light theme variables */
    --primary-color-light: #4d2e0b; /* Darker version of primary-color-light */
    --dark-elements-bg: #252525; /* Slightly lighter than content background for contrast */

    /* Ensure .content-script and similar elements with --dark-elements-bg are updated */
    /* .content-script might need its direct text color adjusted if not using --theme-text-on-dark */

    /* Status messages with light backgrounds need dark mode versions */
    /* Example: .status-falha span, .status-on span */
    /* These might need new variables like --status-danger-light-bg-dark-mode */
    /* For now, let's assume their text color will be handled by the general text color overrides */

    /* Terminal specific dark mode adjustments */
    --terminal-background-dark: #1c1c1c; /* Even darker for terminal bg */
    --terminal-text-dark: #c0c0c0; /* Slightly dimmer text for terminal */

    /* Fix for status-falha contrast in dark mode */
    .status-falha span {
        background-color: #5c2325; /* Dark red background */
        color: #f0d0d0; /* Lighter text */
        /* Consider adding border: 1px solid #7a3b3f; if needed for definition */
    }
}

/* body.dark-mode p,
body.dark-mode li,
body.dark-mode th,
body.dark-mode td,
body.dark-mode label,
body.dark-mode div,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: var(--theme-text-primary);
} */

body.dark-mode span {
    /* This is a broad rule. More specific span rules below might override this. */
    /* Consider if all spans should default to primary text or secondary/muted if they are less important. */
    color: var(--theme-text-primary);
}

body.dark-mode a {
    color: var(--theme-text-link);
}

/* Specific text color adjustments for dark mode */
body.dark-mode .user-operador,
body.dark-mode .user-operador span,
body.dark-mode .user-operador p {
    color: var(--theme-text-primary) !important; /* Ensuring text is light on its themed background */
}

body.dark-mode .container-terminal .titulo {
    color: var(--theme-text-on-dark); /* Explicitly use on-dark for terminal titles */
}

body.dark-mode .addRedeIcon,
body.dark-mode .addRedeIcon i { /* Target icon if it's a font icon */
    color: var(--theme-text-link) !important; /* Making icons link-colored for better visibility/interaction cue */
}

/* This class was not found in the provided CSS, but adding rule if it exists elsewhere or for future use */
body.dark-mode .ultimos-logs .sub-titulo {
    color: var(--theme-text-link);
}

/* Hamburger menu lines for sidebar toggle */
body.dark-mode #sidebarCollapse span {
     background: var(--theme-text-primary); /* Ensuring hamburger lines are light */
}

/* Correcting text on specific colored backgrounds in dark mode */
body.dark-mode .name-wan-1 span,
body.dark-mode .name-wan-2 span,
body.dark-mode .name-wan-3 span,
body.dark-mode .name-wan-4 span {
    color: #FFFFFF !important; /* Force white text on these specific colored backgrounds */
}

/*
   For .status-falha span and .status-on span:
   The existing rules in :root are:
   .status-falha span { background: #fef2f2; color: var(--status-danger-text); }
   .status-on span { background: #acf3ae; color: var(--status-success-bg); }

   In body.dark-mode, we have:
   --status-danger-text: #e0e0e0; (light)
   --status-success-bg: #1e7e34; (dark)
   --status-success-text: #e0e0e0; (light)

   If #fef2f2 (light red bg) for .status-falha span doesn't change in dark mode, its text var(--status-danger-text) which is #e0e0e0 (light) will be hard to read.
   It would need: body.dark-mode .status-falha span { color: var(--text-strong) !important; background: #4a2327 !important; } or similar.

   If #acf3ae (light green bg) for .status-on span doesn't change, its text var(--status-success-bg) which is #1e7e34 (dark) is fine.

   Assuming these spans will get dark mode adjusted backgrounds separately if needed.
   If not, specific overrides are required here. For now, no changes to these two based on current info.
*/

/* Adjustments for elements that might have light-theme specific styles */
body.dark-mode .card-options {
    background: var(--theme-content-background);
    border-color: var(--theme-border-card);
    box-shadow: var(--box-shadow-default);
}

body.dark-mode .card-options h4 {
    color: var(--button-primary-bg); /* Use the dark mode primary button color */
}

body.dark-mode .aviso {
    background: var(--primary-color-light); /* Use the new dark version */
    color: var(--theme-text-primary); /* Ensure text is readable */
}
body.dark-mode .aviso p {
    color: var(--theme-text-primary); /* Ensure text is readable */
}

body.dark-mode .redes-cofiaveis ul li:nth-child(1) span {
    background: var(--primary-color-light); /* Use the new dark version */
    color: var(--theme-text-primary); /* Ensure text is readable */
}

body.dark-mode .content-tabelas {
    background: var(--theme-content-background) !important;
    border-color: var(--theme-border-card) !important;
    box-shadow: var(--box-shadow-default) !important;
}

body.dark-mode .nav-pills .nav-link.active {
    background-color: var(--dark-elements-bg);
}

body.dark-mode .slider {
    background-color: var(--theme-border-secondary);
}

body.dark-mode .slider:before {
    background-color: var(--theme-body-background); /* Match body background for the slider knob */
}

body.dark-mode input:checked + .slider {
    background-color: var(--status-success-bg); /* Use dark mode success color */
}

body.dark-mode .text-dns {
    border-color: var(--button-primary-bg);
    color: var(--theme-text-secondary);
}
body.dark-mode .text-dns a {
    color: var(--button-primary-bg);
}


body.dark-mode .terminal {
    background-color: var(--terminal-background-dark);
    border-color: var(--theme-border-secondary);
    color: var(--terminal-text-dark);
}

body.dark-mode #commandInput {
    background-color: transparent;
    color: var(--terminal-text-dark);
}

body.dark-mode .terminal::-webkit-scrollbar-track {
    background: var(--terminal-background-dark);
}

body.dark-mode .terminal::-webkit-scrollbar-thumb {
    background-color: var(--theme-border-strong);
}

body.dark-mode .form-usuario input,
body.dark-mode .multiselect.dropdown-toggle.custom-select.text-center,
body.dark-mode .multiselect-container .multiselect-filter > input.multiselect-search {
    border-color: var(--theme-border-primary);
    background-color: var(--input-background);
    color: var(--theme-text-primary);
}

body.dark-mode .modal-body input:hover,
body.dark-mode .modal-body input:focus-within,
body.dark-mode .form-usuario input:hover,
body.dark-mode .form-usuario input:focus-within,
body.dark-mode .multiselect.dropdown-toggle.custom-select.text-center:hover,
body.dark-mode .multiselect-container .multiselect-filter > input.multiselect-search:hover,
body.dark-mode .multiselect-container .multiselect-filter > input.multiselect-search:focus-within {
    border-color: var(--theme-border-strong);
}

body.dark-mode .multiselect-option .form-check label {
    color: var(--theme-text-primary);
}

body.dark-mode .text-vpn {
    border-color: var(--button-primary-bg);
    color: var(--theme-text-secondary);
}

body.dark-mode #own-click,
body.dark-mode #mik-click {
    background-color: var(--theme-content-background);
    border-color: var(--theme-border-secondary);
}

body.dark-mode #own-click:hover,
body.dark-mode #mik-click:hover {
    background-color: var(--theme-border-primary);
}

body.dark-mode #own-click.toggle.active,
body.dark-mode #mik-click.toggle.active {
    border-color: var(--status-success-bg);
    background-color: var(--status-success-bg);
}

body.dark-mode .container-dashboard {
    background: var(--theme-content-background) !important;
    border-color: var(--theme-border-card) !important;
    box-shadow: var(--box-shadow-default) !important;
}

body.dark-mode .skeleton {
    background-color: var(--theme-border-strong); /* Darker skeleton base */
    animation: shimmer-dark 1.5s infinite;
}
body.dark-mode .skeleton-image {
    background: var(--theme-border-secondary); /* Darker skeleton image */
    animation: shimmer-dark 2s infinite; /* Use the dark shimmer */
}

@keyframes shimmer-dark {
    0% {
        background-color: var(--theme-border-strong);
    }
    50% {
        background-color: var(--theme-border-secondary);
    }
    100% {
        background-color: var(--theme-border-strong);
    }
}

/* Ensure default browser styles for input placeholders are also themed */
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--theme-text-muted);
    opacity: 0.8; /* Ensure it's not too faint */
}

body.dark-mode select {
    background-color: var(--input-background);
    color: var(--input-text-color);
    border-color: var(--input-border-color);
}
body.dark-mode select:focus {
    border-color: var(--input-focus-border-color);
}

/* Explicitly set background for multiselect dropdown menu in dark mode */
body.dark-mode .multiselect-container.dropdown-menu {
    background-color: var(--theme-content-background);
    border-color: var(--theme-border-secondary);
}
body.dark-mode .multiselect-container .multiselect-option.dropdown-item:hover {
    background-color: var(--dark-elements-bg); /* Or a slightly lighter/darker shade of content-background */
}
body.dark-mode .multiselect-container .multiselect-option.active:not(.multiselect-active-item-fallback) {
    background-color: var(--primary-color); /* Using the primary color for active items */
}
body.dark-mode .multiselect-container .multiselect-option.active:not(.multiselect-active-item-fallback) label{
     color: var(--button-primary-text); /* Text color for active items */
}

    /* Additional explicit dark mode styles for common elements */
    body.dark-mode dt {
        color: var(--theme-text-secondary);
        font-weight: bold;
    }
    body.dark-mode dd {
        color: var(--theme-text-primary);
        margin-left: 20px; /* Standard indentation */
    }
    body.dark-mode blockquote {
        background-color: var(--dark-elements-bg);
        border-left: 5px solid var(--theme-border-strong);
        color: var(--theme-text-secondary);
        padding: 10px 15px;
        margin: 10px 0;
    }
    body.dark-mode pre {
        background-color: var(--dark-elements-bg);
        color: var(--theme-text-on-dark);
        padding: 10px;
        border-radius: 4px;
        border: 1px solid var(--theme-border-primary);
        overflow-x: auto; /* Ensure preformatted text can scroll */
    }
    body.dark-mode code {
        background-color: var(--dark-elements-bg); /* Slightly different from pre for inline code if needed */
        color: var(--theme-text-link); /* Make inline code stand out a bit, like a link */
        padding: 2px 4px;
        border-radius: 3px;
        font-family: "Source Code Pro", monospace; /* Ensure consistent font */
    }
    body.dark-mode pre code { /* Code within pre should inherit pre's text color */
        background-color: transparent; /* Avoid double background */
        color: inherit;
        padding: 0;
        border-radius: 0;
    }
    body.dark-mode table {
        border-collapse: collapse; /* Standard good practice */
        width: 100%; /* Default to full width for tables */
    }
    body.dark-mode caption {
        color: var(--theme-text-muted);
        padding: 8px;
        caption-side: bottom; /* Or top, depending on preference */
        text-align: left;
    }
    body.dark-mode fieldset {
        border: 1px solid var(--theme-border-secondary);
        padding: 15px;
        border-radius: 4px;
        background-color: var(--theme-content-background);
    }
    body.dark-mode legend {
        color: var(--theme-text-primary);
        font-weight: bold;
        padding: 0 5px; /* Spacing around legend text */
        background-color: var(--theme-content-background); /* Ensure it sits nicely on the fieldset border */
    }
    body.dark-mode hr {
        border-top: 1px solid var(--theme-border-secondary);
    }

    /* Ensure buttons not styled by specific classes also get basic dark mode treatment */
    body.dark-mode button,
    body.dark-mode input[type="button"],
    body.dark-mode input[type="submit"],
    body.dark-mode input[type="reset"] {
        background-color: var(--button-primary-bg);
        color: var(--button-primary-text);
        border: 1px solid var(--button-primary-border);
        /*padding: 8px 15px; /* Basic padding */
        border-radius: 4px;
        cursor: pointer;
    }
    body.dark-mode button:hover,
    body.dark-mode input[type="button"]:hover,
    body.dark-mode input[type="submit"]:hover,
    body.dark-mode input[type="reset"]:hover {
        background-color: var(--button-primary-hover-bg);
    }
    /* For secondary-action generic buttons, if not using specific classes */
    body.dark-mode button.secondary,
    body.dark-mode input[type="button"].secondary {
        background-color: var(--button-secondary-bg);
        color: var(--button-secondary-text);
        border: 1px solid var(--button-secondary-border);
    }
    body.dark-mode button.secondary:hover,
    body.dark-mode input[type="button"].secondary:hover {
        background-color: var(--button-secondary-hover-bg);
        color: var(--button-secondary-hover-text);
        border-color: var(--button-secondary-hover-border);
    }

    /* Language Selector Button in Sidebar - Dark Mode Styling */
    body.dark-mode #sidebar .btn-translate-nav {
        color: var(--theme-text-primary) !important; /* Makes the button text white */
        background-color: transparent !important; /* Ensures no conflicting background */
    }

    body.dark-mode #sidebar .btn-translate-nav i.fa-globe {
        color: var(--theme-text-primary) !important; /* Makes the globe icon white */
    }

    /* Language Dropdown Items in Sidebar - Dark Mode Styling */
    body.dark-mode #sidebar .dropdown-menu .dropdown-item {
        color: var(--theme-text-primary) !important; /* Makes "Português", "English", "Español" text white */
        background-color: var(--sidebar-background) !important; /* Match sidebar dropdown background */
    }

    /* Hover/Focus for language dropdown items in sidebar, ensuring readability */
    body.dark-mode #sidebar .dropdown-menu .dropdown-item:hover,
    body.dark-mode #sidebar .dropdown-menu .dropdown-item:focus {
        color: var(--sidebar-hover-text) !important; /* e.g., orange text */
        background-color: var(--sidebar-hover-background) !important; /* e.g., dark grey background */
    }

    /* Progress bar color in Dark Mode */
    body.dark-mode #refreshProgressBar {
        background-color: var(--theme-text-primary) !important; /* --theme-text-primary is #FFFFFF in dark mode */
    }

/* Modal Styles for Dark Mode */
body.dark-mode .modal-content {
    background-color: var(--theme-content-background); /* #1e1e1e */
    border-color: var(--theme-border-secondary); /* #444444 */
}
body.dark-mode .modal-header {
    background-color: var(--dark-elements-bg); /* #252525 or a slightly different shade for header */
    border-bottom-color: var(--theme-border-secondary); /* #444444 */
}
body.dark-mode .modal-body {
    /* Text color is already handled by a general rule (var(--theme-text-primary)) */
    /* Ensure background is consistent if different from modal-content */
    background-color: var(--theme-content-background); /* #1e1e1e, same as modal-content */
}
body.dark-mode .modal-footer {
    background-color: var(--dark-elements-bg); /* #252525 or same as header */
    border-top-color: var(--theme-border-secondary); /* #444444 */
}

body.dark-mode .modal-header .close {
    color: var(--theme-text-muted); /* #D0D0D0 for better visibility */
    text-shadow: none; /* Remove default browser/bootstrap text-shadow if any */
    opacity: 0.8; /* Adjust opacity if needed */
}
body.dark-mode .modal-header .close:hover,
body.dark-mode .modal-header .close:focus {
    color: var(--theme-text-primary); /* #FFFFFF for hover/focus */
    opacity: 1;
}

/* Theme-aware styling for alert actions dropdown items - Dark Mode */
body.dark-mode .alert-actions-dropdown .dropdown-menu {
    background-color: var(--theme-content-background) !important; /* Dark mode: #1e1e1e */
    border: 1px solid var(--theme-border-strong) !important; /* Dark mode: #555555, slightly stronger for menus */
    /* Add box-shadow if needed, e.g., var(--box-shadow-default) */
}

body.dark-mode .alert-actions-dropdown .dropdown-item {
    color: var(--theme-text-primary) !important; /* Dark mode: #FFFFFF */
    background-color: var(--theme-content-background) !important; /* Dark mode: #1e1e1e */
}

body.dark-mode .alert-actions-dropdown .dropdown-item:hover,
body.dark-mode .alert-actions-dropdown .dropdown-item:focus {
    color: var(--theme-text-primary) !important;
    background-color: var(--dark-elements-bg) !important; /* Dark mode hover, e.g., #252525 */
}

body.dark-mode .alert-actions-dropdown .dropdown-item .material-symbols-outlined {
    color: inherit !important; /* Inherit color from parent .dropdown-item */
}

@keyframes moveDiagonal2 {
    0% {
        transform: translate(100px, 100px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.icon-failover img {
    width: 100px;
    position: absolute;
}

.icon-failover img:nth-child(1) {
    animation-name: moveDiagonal1;
    animation-duration: 3s;
    animation-iteration-count: 2;
    animation-fill-mode: forwards;
}

.icon-failover img:nth-child(2) {
    animation-duration: 3s;
    animation-iteration-count: 2;
    animation-fill-mode: forwards;
    animation-name: moveDiagonal2;
}

.switch {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
}

.switch input {
    display: none;
}

.slider {
    background-color: var(--theme-border-secondary); /* #ccc */
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: 0.4s;
}

.slider:before {
    background-color: var(--theme-content-background);
    bottom: 4px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: 0.4s;
    width: 26px;
}

input:checked + .slider {
    background-color: var(--status-success-bg); /* #66bb6a is a green */
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}
.switch-failover-container {
    text-align: end;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.switch-failover-container p {
    font-size: 16px;
    color: var(--primary-color);
}
/* failover */

.header-failover {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--theme-border-secondary);
    padding-bottom: 10px;
    color: var(--primary-color);
}
.failoverWans {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 10px;
    cursor: pointer;
}
.failoverWans:hover {
    background: var(--theme-border-secondary);
}
.it {
    flex: 1;
}
.wan {
    display: flex;
    align-items: center;
    gap: 6px;
}
.wan p {
    font-weight: 500;
    color: var(--text-strong);
}
.name-wan-1 span,
.name-wan-2 span,
.name-wan-3 span,
.name-wan-4 span {
    background: var(--primary-color);
    border-radius: 50%;
    width: 20px;
    text-align: center;
    color: var(--theme-text-on-primary);
}
.name-wan-2 span {
    background: #004650; /* Specific accent color */
}
.name-wan-3 span {
    background: #039cdc; /* Specific accent color */
}
.name-wan-4 span {
    background: #a94efd; /* Specific accent color */
}

.btn-failover {
    margin: 20px 0;
    text-align: end;
    display: flex;
    align-items: center;
    justify-content: end;
}
.acoes {
    display: flex;
    gap: 8px;
}
.acoes button:nth-child(1) i {
    color: #039cdc; /* Specific accent color */
}
.acoes button:nth-child(2) i {
    color: var(--status-danger-bg);
}
/*  filtragem dns */

#filtragemDNS h4,
#backup h4,
#LAN h4,
#acessoTransitorio h4,
#vpn h4,
#monitor h4 {
    color: var(--primary-color);
}

.text-dns {
    border: 1px solid var(--primary-color);
    padding: 20px;
    margin: 20px 0;
    border-radius: 6px;
    color: var(--theme-text-secondary); /* #535353 */
    font-size: 16px;
    font-weight: 500;
}
.container-list-dns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.container-list-dns p {
    color: var(--primary-color);
    font-size: 16px;
}

/* filtragem conteudo */
.acoes-list-politicas {
    width: 15%;
}
.acoes-list-politicas a {
    padding: 6px;
    font-size: 20px;
}

.acoes-list-politicas button,
.deleteButtonUser {
    background: transparent;
    border: none;
    font-size: 20px;
    color: var(--status-danger-bg);
}

.acoes-list-politicas a i:hover,
.acoes-list-politicas button i:hover {
    transform: scale(1.1);
}

.card-filtragem {
    padding: 20px;
}
.card-filtragem h4 {
    color: var(--text-strong);
}
.container-filtragem {
    border-top: 1px solid var(--theme-border-secondary);
    margin-bottom: 20px;
}
.container-filtragem h5 {
    margin-top: 15px;
}
.content-pesquisa-segura {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.content-categorias {
    padding: 20px 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 15px;
}
@media only screen and (max-width: 500px) {
    .content-categorias {
        grid-template-columns: 1fr 1fr;
    }
}

.container-checkbox-sites {
    display: flex;
    gap: 20px;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: var(--theme-text-on-primary);
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}
.lista-sites {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 30px 0;
}

#sites-bloqueados-lista,
#sites-liberados-lista {
    list-style: none;
    padding: 10px;
}
#sites-bloqueados-lista li,
#sites-liberados-lista li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
}
#sites-bloqueados-lista li::before,
#sites-liberados-lista li::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background: var(--status-danger-bg);
}
#sites-liberados-lista li::before {
    background: var(--status-success-bg);
}

#adicionar-site {
    border: 1px solid var(--status-success-bg);
    border-radius: 6px;
    padding: 6px 8px;
    background: transparent;
    color: var(--status-success-bg);
    cursor: pointer;
}
#adicionar-site:hover {
    transform: scale(1.05);
}

.btn-excluir-site {
    background: transparent;
    border: none;
}
/* pagina edit politicas */

/*  modal excluir */

.modal-exluir-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 40px;
    gap: 6px;
}
.modal-exluir-info h4 {
    margin: 0;
}
.modal-exluir-info > div {
    display: flex;
    align-items: center;
}
.modal-exluir-info i {
    color: var(--status-danger-bg); /* #e41212 is a red */
    font-weight: 900;
    font-size: 26px;
}
/* usuarios */
.table-usuario td {
    vertical-align: middle;
}

.user-adm,
.user-operador {
    padding: 10px;
    display: flex;
    justify-content: center;
    gap: 3px;
    background: var(--button-primary-bg);
    border-radius: 6px;
    margin: 10px 0;
}
.user-operador {
    background: var(--theme-border-secondary); /* #d2d2d2 is a light grey */
}

/*  cadastro */
.card-cadastro {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
}
.card-cadastro h4,
.card-cadastro label {
    color: var(--primary-color);
}
.card-cadastro button {
    float: right;
}

/* logs sistema */

.icon-logs:hover path {
    fill: var(--primary-color);
}
.icon-logs a {
    display: flex;
    align-items: center;
    gap: 7px;
}
.content-filtro-intervalo {
    gap: 20px;
    padding-left: 15px;
}
.content-filtro-intervalo div {
    display: flex;
    flex-direction: column;
}

/* Tela LAN */

#LAN .group-lan {
    padding: 0;
}

/* backup */
/* terminal */

.container-terminal {
    padding-top: 15px;
    background: #4c50c4; /* Specific accent color, leave as is */
    border-radius: 8px;
    font-size: 19px;
    margin: 10px;
    font-family: monospace;
}
.container-terminal .titulo {
    color: var(--theme-text-on-primary); /* Assuming text on dark background */
    padding-left: 10px;
}
.container-input-terminal {
    display: flex;
    gap: 2px;
    align-items: baseline;
}
.terminal {
    background-color: var(--theme-content-background);
    border: 2px solid var(--theme-border-secondary);
    padding: 20px;
    border-radius: 5px;
    width: 100%;
    height: 600px;
    overflow-y: scroll;
    color: var(--theme-text-primary);
    border-top: 0;
}

#sugestao {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 5px;
    margin: 20px 0;
}

.sugestao-item {
    padding: 5px;
    cursor: pointer;
}

#output {
    margin: 0;
    padding: 0;
    height: 80%;
}

#commandInput {
    border: none;
    background-color: transparent;
    color: var(--theme-text-primary);
    width: 100%;
    outline: none;
}

.terminal {
    scrollbar-width: thin;
    scrollbar-color: var(--theme-border-secondary) var(--theme-text-primary);
}
.terminal::-webkit-scrollbar {
    width: 6px;
}

.terminal::-webkit-scrollbar-track {
    background: var(--theme-content-background);
}

.terminal::-webkit-scrollbar-thumb {
    background-color: var(--theme-border-secondary);
    border-radius: 10px;
}
.loading-indicator {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    border-radius: 5px;
}
.loading-indicator img {
    width: 30%;
}

pre {
    font-size: 100%;
    font-family: "Source Code Pro", monospace;
}

/* empresas */

.topo-empresas {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* }
.multiselect-container .multiselect-option.active:not(.multiselect-active-item-fallback){
    max-height: 40px!important;
} */
.multiselect-container input{
    margin-top: 0;
    margin-left: 45px;
    height: 15px!important;
    box-shadow: none;
}
.form-usuario input{
    padding: 0 20px;
    box-shadow: none;
    border: 1px solid var(--theme-border-primary); /* var(--grey2-sc) */
}
.modal-body input:hover,
.modal-body input:focus-within,
.form-usuario input:hover,
.form-usuario input:focus-within{
    box-shadow: none;
    border: 1px solid var(--theme-border-strong); /* #C5AB96 */
}
.multiselect-container .multiselect-all.dropdown-item{
    padding: 0;
    height: 35px;
}

.multiselect-native-select{
    width: 100%;
}

.multiselect.dropdown-toggle.custom-select.text-center{
    width: 100%!important;
    height: 48px!important;
    border: 1px solid var(--theme-border-primary); /* var(--grey2-sc) */
    border-radius: 8px!important;
    box-shadow: none;
}
.multiselect.dropdown-toggle.custom-select.text-center:hover{
    border: 1px solid var(--theme-border-strong); /* var(--grey0-sc) */
}

.multiselect.dropdown-toggle.custom-select.text-center .multiselect-selected-text{
    text-align: left;
    font: normal normal normal 13px/19px "Open Sans";
}
/* .multiselect-container .multiselect-option .form-check{
    padding: 0 0 0 10px;
} */
.multiselect-container .multiselect-filter > .fa-search{
    position: absolute;
    left: 0;
}
.navbar-expand-lg .navbar-nav .dropdown-menu{
    width: 100%;
    height: 200px!important;
}
.multiselect-container .multiselect-filter > input.multiselect-search{
    margin: 0;
    height: 48px!important;
    border-radius: 0px!important;
    text-align: left;
    font: normal normal normal 13px/18px "Open Sans";
    outline: none;
    border-bottom: 1px solid var(--theme-border-primary); /* var(--grey2-sc) */
}
.multiselect-container .multiselect-filter > input.multiselect-search:hover{
    border-top: none!important;
    border-left: none!important;
    border-right: none!important;
    border-bottom: 1px solid var(--theme-border-primary)!important; /* var(--grey2-sc) */
}
.multiselect-container .multiselect-filter > input.multiselect-search:focus-within{
    border-top: none!important;
    border-left: none!important;
    border-right: none!important;
    border-bottom: 1px solid var(--theme-border-primary)!important; /* var(--grey2-sc) */
}

.form-check {
    padding: 0 5px 0 12%!important;
    display: flex!important;
    align-items: center;
}

.multiselect-option .form-check label {
    text-align: left;
    font: normal normal normal 13px/18px "Open Sans";
    letter-spacing: 0px;
    color: var(--theme-text-primary); /* var(--black-pr) */
}
.multiselect-all .form-check label {
    font-weight: 500 !important; /* This could be var(--theme-text-secondary) if it implies boldness */
}
.multiselect-option.dropdown-item {
    left: 0;
    margin: 0;
    padding-left: 0;
    height: 40px!important;
}
.content-multiple-select .btn-group {
    width: 100%;
}

/* Default max-height for multiselect dropdown */
.content-multiple-select .multiselect-container.dropdown-menu {
   height: 300px; /* Default for larger screens */
   overflow-y: auto;
}

/* acesso transitorio */
.dados-transitorio {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    padding: 10px 5px;
    margin-top: 20px;
}
.container-dados-transitorio {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.content-dados-transitorio {
    display: flex;
    gap: 5px;
    align-items: center;
}
.content-dados-transitorio p {
    color: var(--primary-color);
    font-weight: 700;
}
.content-dados-transitorio span {
    font-weight: 500;
    color: var(--theme-text-muted); /* #656464 is a muted grey */
}

.content-dados-transitorio button {
    border: none;
    background: transparent;
    font-size: 24px;
}
.ir-terminal {
    border-radius: 5px;
    padding: 5px 11px;
    background: var(--dark-elements-bg);
    color: var(--theme-text-on-dark);
    margin-top: 10px;
}
.ir-terminal:hover {
    color: var(--theme-text-on-dark);
}

/*  relatorios */

.content-relatorios {
    padding: 20px;
}
.content-relatorios h4,
h3,
p {
    color: var(--primary-color);
}
.content-relatorios .btn-padrao {
    background: transparent;
    border: 1px solid var(--primary-color); /* Assuming it's primary color border */
}
.content-relatorios .btn-baixar {
    background: var(--dark-elements-bg);
    color: var(--theme-text-on-dark);
}
@media only screen and (min-width: 1439px) and (max-width: 1450px) {
    .container-cards {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 1200px;
    }
    .card-options {
        max-height: 300px;
        max-width: 180px;
    }
    .card-options h4,
    .card-options p {
        font-size: 1rem;
    }
    .content-img img {
        width: 90%;
    }
}

@media only screen and (min-width: 1100px) and (max-width: 1430px) {
    .container-cards {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 1100px;
    }
    .card-options {
        max-height: 265px;
        max-width: 140px;
    }
    .card-options h4,
    .card-options p {
        font-size: 0.9rem;
    }
    .content-img img {
        width: 75%;
    }
    .content-img .img-carteira {
        width: 80%;
    }
}

/*vpn page*/

.container-concentrador {
    padding: 20px;
}

.own-concentrador,
.mik-concentrador {
    padding-bottom: 0.5rem;
    padding-left: 10%;
}

.field {
    margin: 0;
    padding: 0;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.field label {
    max-width: 100%;
}

.field a {
    max-width: 100%;
    color: var(--theme-text-link); /* rgb(71, 71, 233) is a blue link */
}

.field span {
    width: 100%;
}

.mik-concentrador {
    margin-bottom: 1rem;
}
.vpn-config label {
    margin: 0;
}

.vpn-config h3 {
    font-size: 20px;
    color: var(--theme-text-primary);
}

.campos-vpn-config {
    margin: 0;
    padding: 0;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid var(--theme-border-secondary); /* #ccc */
}

.fields-added {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.fields-added .inputs {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.form-group,
#nothing-here {
    margin-top: 1rem;
    margin-right: 1rem;
}

#nothing-here {
    color: var(--theme-text-muted); /* #aaa */
}

#addRedeLocal,
#addRedeLocalClient {
    all: unset;
    color: var(--theme-text-link); /* rgb(71, 71, 233) */
    font-size: 16px;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

#addRedeLocal:hover {
    transition: 200ms;
    color: var(--button-tertiary-hover-text); /* Assuming link hover is similar to tertiary button hover */
}

.addRedeIcon {
    all: unset;
    color: var(--text-strong);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    cursor: pointer;
}

.addRedeIcon:hover {
    transition: 200ms;
    color: var(--theme-text-muted); /* #7b787e */
}

.addRedeIcon i {
    margin: 0;
    padding: 5px;
}

/*componente tabelaVPN*/

.table-VPN thead tr th,
.table-VPN td {
    text-align: center;
}

/*select*/

.select-concentrador {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.slc-component {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 1rem;
}

.slc-component div {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.slc-component div label {
    max-width: 100%;
    margin: 0;
    padding: 0 1rem 0 0;
}

.slc-component label {
    margin-bottom: 0 !important;
}

#select-device {
    width: auto !important;
}

.slc-component div select {
    max-width: 160px;
    cursor: pointer;
}

#publicIp {
    max-width: 150px;
}

.publicIpInput {
    display: flex;
    align-items: center;
    gap: 5px;
}

.publicIpInput label {
    padding: 0;
    margin-bottom: 0 !important;
}

#publicIp {
    width: 150px;
}

/*texto de informação*/

.above-config {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.text-vpn {
    width: 100%;
    border: 1px solid var(--primary-color);
    padding: 20px;
    margin: 20px 0;
    border-radius: 6px;
    color: var(--theme-text-secondary); /* #535353 */
    font-size: 14px;
    font-weight: 500;
}

/*subnetIp, subnetNome*/

.subnetNome,
.subnetIp {
    max-width: 500px;
}

/*subrede*/

#sb-component {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.btn-acoes {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    width: 55px;
    height: 35px;
    border: none;
    border-radius: 100%;
    background-color: transparent;
}

.btn-acoes:hover {
    transition: 200ms;
    background-color: var(--theme-border-secondary); /* #ccc */
}

/*campo de salvamento*/

.field-save {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.field-save div:nth-child(1) {
    display: flex;
    justify-content: end;
}
.field-save div:nth-child(2) {
    display: flex;
    justify-content: space-between;
}

.field-save .clientSwitch {
    display: flex;
    justify-content: end!important;
}

.field-save label {
    margin-bottom: 20px;
}

.p-save p {
    padding-right: 1%;
    margin-bottom: 20px;
    width: 100%;
    text-align: right;
    color: var(--primary-color);
    font-size: 16px;
}

.text-dns a {
    color: var(--primary-color);
}

#own-click,
#mik-click {
    margin-right: 0.5rem;
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--theme-content-background);
    border: 1px solid var(--theme-border-secondary); /* #ccc */
    border-radius: 100%;
}

#own-click:hover,
#mik-click:hover {
    transition: 300ms;
    background-color: var(--theme-border-primary); /* #e4e4e4 light grey */
}

#own-click.toggle.active,
#mik-click.toggle.active {
    transition: 200ms;
    border: 1px solid var(--status-success-bg);
    background-color: var(--status-success-bg);
}

#own-hidden-component,
#mik-hidden-component {
    display: none;
}

.addRedeIcon {
    all: unset;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--primary-color);
}

/*tab dashboard de mickrotik.tabs.monitor */

.container-dashboard {
    margin-top: 1rem;
    background: var(--theme-content-background) 0% 0% no-repeat padding-box!important;
    box-shadow: var(--box-shadow-default) !important;
    border: 1px solid var(--theme-border-card) !important;
    border-radius: 8px!important;
}

.select-dash {
    margin-bottom: 1rem;
    width: 100%;
}

.slc-dash {
    margin-left: 1rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.slc-dash label {
    max-width: 100%;
    margin-right: 1rem;
}

.slc-dash select {
    width: 25%;
}

#icon-request {
    margin-left: 5px;
    width: 22px;
    height: 22px;
}

@media (max-width: 500px) {
    .slc-dash {
        display: flex;
        flex-direction: column;
        align-items: start;
    }
    .slc-dash select {
        width: 50%;
    }
}

@media (max-width: 400px) {
    .slc-dash select {
        width: 88%;
    }
}
.skeleton {
    background-color: var(--theme-border-primary); /* #eee */
    border-radius: 4px;
    min-height: 20px;
    width: 100%;
    animation: shimmer 1.5s infinite;
}

.skeleton-text {
    width: 90%;
    height: 20px;
}

.skeleton-model {
    width: 60px;
    height: 20px;
}
.skeleton-box {
    width: 70px;
    height: 70px;
}
.skeleton-image {
    background: var(--theme-border-primary); /* #e0e0e0, assuming similar to #eee */
    height: 140px;
    width: 140px;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        background-color: var(--theme-border-primary); /* #eee */
    }
    50% {
        background-color: #dddddd; /* #ddd */
    }
    100% {
        background-color: var(--theme-border-primary); /* #eee */
    }
}

.rt-force-hide {
    display: none !important;
}
#refreshProgressBar.no-transition {
    transition: none !important;
}

/* Logo visibility rules */
#sidebar .sidebar-header img.logo-light-mode {
    display: inline-block !important;
}

#sidebar .sidebar-header img.logo-dark-mode {
    display: none !important;
}

body.dark-mode #sidebar .sidebar-header img.logo-light-mode {
    display: none !important;
}

body.dark-mode #sidebar .sidebar-header img.logo-dark-mode {
    display: inline-block !important;
}

/* Logo visibility rules for #dispensadas section */
#dispensadas .sdwan-logo img.logo-dispensadas-light {
    display: inline-block !important; /* Or 'block' if it's not meant to be inline */
}

#dispensadas .sdwan-logo img.logo-dispensadas-dark {
    display: none !important;
}

body.dark-mode #dispensadas .sdwan-logo img.logo-dispensadas-light {
    display: none !important;
}

body.dark-mode #dispensadas .sdwan-logo img.logo-dispensadas-dark {
    display: inline-block !important; /* Or 'block' */
}

/* Theme-aware styling for alert actions dropdown items - Light Mode */
.alert-actions-dropdown .dropdown-menu {
    background-color: var(--theme-content-background); /* Default: #FFFFFF */
    border: 1px solid var(--theme-border-secondary); /* Default: #c6c6c6 or Bootstrap's default */
    /* Add box-shadow if needed, e.g., var(--box-shadow-default) */
}

.alert-actions-dropdown .dropdown-item {
    color: var(--theme-text-primary); /* Default: #000000 */
    background-color: var(--theme-content-background); /* Default: #FFFFFF */
    /* Retain padding and other structural properties if they are fine */
    padding: 0.5rem 1rem !important;
    position: relative !important; /* These might be from original, assess if needed */
    top: 0 !important;
}

.alert-actions-dropdown .dropdown-item:hover,
.alert-actions-dropdown .dropdown-item:focus {
    color: var(--theme-text-primary);
    background-color: var(--theme-border-primary); /* Light grey hover, e.g., #EFE2D9 */
}

.alert-actions-dropdown .dropdown-item .material-symbols-outlined {
    color: inherit; /* Inherit color from parent .dropdown-item */
}

.multiselect-container.dropdown-menu {
    max-height: 250px; /* Adjust as needed */
    overflow-y: auto;
}

#btnOpenCompanyFilterModal svg {
    vertical-align: middle; /* Helps align with text if there were any */
    width: 24px;
    height: 24px;
}