/* =========================================================
   Sotkis – App Design Tokens + Base Styles
   ---------------------------------------------------------
   - Colors: brand, status, gray scale (50–950)
   - Typography: Roboto scale from the style guide
   - Surfaces: glass cards over photo background
   - Controls: buttons, inputs, table, badges
   - Utilities: spacing helpers
   ======================================================= */

/* -------------------- TOKENS -------------------- */
:root {
    /* =========================================================
     TYPOGRAPHY SYSTEM
  ========================================================= */
    --font-family-primary: "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    /* Font sizes from style guide */
    --h1-size: 2.25rem;
    /* 36px */
    --h1-lh: 1.2;
    --h1-w: var(--fw-bold);
    --h2-size: 1.875rem;
    /* 30px */
    --h2-lh: 1.3;
    --h2-w: var(--fw-bold);
    --h3-size: 1.5rem;
    /* 24px */
    --h3-lh: 1.35;
    --h3-w: var(--fw-semibold);
    --h4-size: 1.25rem;
    /* 20px */
    --h4-lh: 1.45;
    --h4-w: var(--fw-semibold);
    --h5-size: 1.125rem;
    /* 18px */
    --h5-lh: 1.5;
    --h5-w: var(--fw-medium);
    --body-size: 1rem;
    /* 16px */
    --body-lh: 1.5;
    /* =========================================================
     COLOR SYSTEM
  ========================================================= */

    --mud-palette-action-default: var(--brand);
    --mud-palette-primary: var(--white);
    /* Brand */
    --brand: #9EC043;
    --brand-dark: #038703;
    --brand-light: #4CB151;
    /* Core */
    --white: #FFFFFF;
    --black: #000000;
    /* Semantic (updated from guide) */
    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;
    --info: #3B82F6;
    /* Neutral scale */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    --gray-950: #030712;
    /* Text hierarchy */
    --text-primary: var(--white);
    --text-secondary: var(--gray-300);
    --text-tertiary: var(--gray-400);
    --text-brand: var(--brand);
    /* =========================================================
     SURFACES & GLASS MORPHISM
  ========================================================= */
    /* Component surfaces */
    --comp-bg: rgba(255, 255, 255, .1);
    /* Default surface */
    --comp-bg-weak: rgba(255, 255, 255, .06);
    --comp-bg-strong: rgba(255, 255, 255, .2);
    --comp-border: rgba(255, 255, 255, .3);
    --comp-blur: 20px;
    --comp-shadow: 0 10px 30px rgba(0, 0, 0, .30);
    --comp-bg-modal: rgba(0, 0, 0, .6);
    /* Surface hierarchy */
    --surface: var(--comp-bg);
    --surface-2: var(--comp-bg-weak);
    --surface-3: var(--comp-bg-strong);
    --surface-modal: var(--comp-bg-modal);
    --border: var(--comp-border);
    --blur: var(--comp-blur);
    --shadow-1: var(--comp-shadow);
    /* Glass Morphism Variants (normalized from design system) */
    --glass-light-bg: rgba(255, 255, 255, 0.05);
    --glass-light-border: 1px solid rgba(255, 255, 255, 0.1);
    --glass-standard-bg: rgba(255, 255, 255, 0.10);
    --glass-standard-border: 1px solid rgba(255, 255, 255, 0.20);
    --glass-heavy-bg: rgba(255, 255, 255, 0.20);
    --glass-heavy-border: 1px solid rgba(255, 255, 255, 0.30);
    --glass-dark-bg: rgba(0, 0, 0, 0.20);
    --glass-dark-border: 1px solid rgba(255, 255, 255, 0.10);
    /* =========================================================
     ELEVATION & SHAPE
  ========================================================= */
    --radius: 6px;
    --radius-1: 8px;
    --radius-2: 12px;
    --radius-3: 16px;
    --radius-4: 20px;
    --shadow-1: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 10px 30px rgba(0, 0, 0, .30);
    /* =========================================================
     SPACING SCALE
  ========================================================= */
    --space-1: 0.25rem;
    /* 4px */
    --space-2: 0.5rem;
    /* 8px */
    --space-4: 1rem;
    /* 16px */
    --space-6: 1.5rem;
    /* 24px */
    --space-8: 2rem;
    /* 32px */
    /* =========================================================
     CONTROLS / INTERACTION
  ========================================================= */
    --ctl-h: 42px;
    --ctl-pad-x: 0.85rem;
    --ctl-pad-y: 0.5rem;
    --transition: 160ms ease;
    /* Sidebar */
    --sidebar-bg: rgba(255, 255, 255, .10);
    --sidebar-border: rgba(255, 255, 255, .18);
    --sidebar-hover: rgba(255, 255, 255, .14);
    --sidebar-active-bg: rgba(158, 192, 67, .20);
    --sidebar-scrollbar: rgba(255, 255, 255, .22);
    /* =========================================================
     CHART COLOR PALETTE
  ========================================================= */
    --chart-1: #9EC043;
    --chart-2: #038703;
    --chart-3: #4CB151;
    --chart-4: #5EA65F;
    --chart-5: #568864;
    --chart-critical: #DC2626;
    --chart-warning: #EAB308;
    --chart-info: #3B82F6;
    --chart-special: #8B5CF6;
    --chart-success: #10B981;
    /* =========================================================
     ANIMATION & MOTION
  ========================================================= */
    --anim-fast: 150ms;
    --anim-medium: 250ms;
    --anim-slow: 350ms;
    --anim-ease-default: ease-in-out;
    /* =========================================================
     THEME (DARK DEFAULT)
  ========================================================= */
    --theme-bg: #121212;
    --theme-text: #FFFFFF;
    --theme-border: rgba(255, 255, 255, 0.1);
}



/*.custom-action-icon:hover {
        transform: scale(1.15);
        color: var(--mud-palette-primary);*/
/* usa a cor primária do tema */
/*}*/

.sk-featureIcon__icon {
    color: #fff;
    /* branco puro */
    transition: transform 0.2s ease, filter 0.2s ease;
}

.sk-featureCard:hover .sk-featureIcon__icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

/* -------------------- BASE -------------------- */
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    color: var(--text-primary);
    background: transparent;
    font-family: var(--font-family-primary);
    font-size: 16px;
    line-height: var(--body-lh);
}

/* Headings (style guide) */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 .5rem;
    letter-spacing: .2px;
}

h1 {
    font-size: var(--h1-size);
    line-height: var(--h1-lh);
    font-weight: var(--h1-w);
}

h2 {
    font-size: var(--h2-size);
    line-height: var(--h2-lh);
    font-weight: var(--h2-w);
}

h3 {
    font-size: var(--h3-size);
    line-height: var(--h3-lh);
    font-weight: var(--h3-w);
}

h4 {
    font-size: var(--h4-size);
    line-height: var(--h4-lh);
    font-weight: var(--h4-w);
}

h5 {
    font-size: var(--h5-size);
    line-height: var(--h5-lh);
    font-weight: var(--h5-w);
}

/* Text helpers */
.text-muted {
    color: var(--text-secondary) !important;
}

.text-brand {
    color: var(--text-brand) !important;
}

.small,
small {
    font-size: .875rem;
    color: var(--text-tertiary);
}

/* Page padding like the guide (container spacing) */
.app-container {
    padding: var(--space-6);
    gap: var(--space-8);
}

/* Optional background utility if you ever need it outside MainLayout */
.app-bg {
    position: relative;
    background: linear-gradient(0deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)), url("/images/background.png") center/cover no-repeat fixed;
    overflow: hidden;
}

/* cria uma camada desfocada por baixo */
.app-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    /* usa o mesmo background */
    filter: blur(10px);
    /* ajusta o valor conforme o gosto */
    transform: scale(1.05);
    /* evita bordas visíveis do blur */
    z-index: -1;
}

/* -------------------- SURFACES / CARDS -------------------- */
.card {
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-4);
    box-shadow: var(--shadow-1);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    padding: var(--space-4);
}

.card--muted {
    background: var(--surface-3);
}

.card--flat {
    box-shadow: none;
}

.card--tight {
    padding: .75rem;
}

.dashboard-card .mud-chart {
    min-height: 0;
}

/* Ensure icon containers in summary cards don't shrink */
.dashboard-card .icon-container-light {
    flex-shrink: 0;
}

/* Hide the spacer and use auto-margin on the icon container to push it to the right */
.dashboard-card .mud-spacer {
    display: none;
}

.dashboard-card .mud-card-content .mud-stack-row>.mud-stack:last-child {
    margin-left: auto;
}



/* Force opaque tooltips to prevent grid lines from bleeding through */
.apexcharts-tooltip {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.apexcharts-tooltip>div {
    opacity: 1 !important;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title {
    font-weight: var(--fw-bold);
}

/* KPI card (like counters at the top) */
.kpi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1rem;
    border-radius: var(--radius-3);
    background: var(--surface-3);
    border: 1px solid var(--border);
}

.kpi__value {
    font-size: 1.75rem;
    font-weight: var(--fw-semibold);
}

.kpi__icon {
    opacity: .6;
}

/* -------------------- CONTROLS -------------------- */

/* Base */
.sk-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: var(--ctl-h);
    padding: var(--ctl-pad-y) var(--ctl-pad-x);
    font: inherit;
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    border-radius: var(--radius);
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform 60ms ease;
    -webkit-tap-highlight-color: transparent;
}

.sk-btn:active {
    transform: translateY(1px);
}

.sk-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(158, 192, 67, .18);
    border-color: rgba(158, 192, 67, .7);
}

/* Variants */
.sk-btn--primary {
    background: var(--brand);
    color: #0e1a00;
}

.sk-btn--primary:hover {
    filter: brightness(.95);
}

.sk-btn--secondary {
    background: var(--surface-3);
    border-color: var(--border);
}

.sk-btn--secondary:hover {
    background: rgba(255, 255, 255, .12);
}

.sk-btn--ghost {
    background: transparent;
    border-color: var(--border);
}

.sk-btn--ghost:hover {
    background: rgba(255, 255, 255, .08);
}

/* Sizes (3 heights) */
.sk-btn--sm {
    height: 34px;
    font-size: .95rem;
    padding: calc(var(--ctl-pad-y) - 2px) calc(var(--ctl-pad-x) - 1px);
}

.sk-btn--md {
    height: var(--ctl-h);
}

/* 42px baseline from tokens */
.sk-btn--lg {
    height: calc(var(--ctl-h) + 8px);
    font-size: 1.05rem;
    padding: calc(var(--ctl-pad-y) + 2px) calc(var(--ctl-pad-x) + 2px);
}

/* Layout helpers */
.sk-btn--block {
    width: 100%;
    justify-content: center;
}

.sk-btn__icon {
    line-height: 1;
}

/*.sk-btn--icon-leading .sk-btn__icon {
    margin-right: .55rem;
}*/

/* Disabled */
.sk-btn.is-disabled,
.sk-btn[disabled] {
    opacity: .65;
    cursor: not-allowed;
    filter: grayscale(.12);
}


.btn-secondary {
    background: rgba(255, 255, 255, .08);
    color: var(--text-primary);
    border-color: var(--border);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, .12);
}

.btn-ghost {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, .08);
}

/* ----- Page Header (title + subtitle + main action) ----- */
.sk-pageHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.sk-pageHeader__title {
    font-weight: var(--fw-bold);
    margin: 0;
}

.sk-pageHeader__subtitle {
    margin: .25rem 0 0;
    color: var(--text-secondary);
    font-size: 1rem;
    /* uses your base body size */
    line-height: var(--body-lh);
}

/* Inputs / selects */
input[type="text"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea,
.stk-form-control {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0;
    width: 100% !important;
    /* Forces stretch inside flex containers on Safari */
    height: var(--ctl-h);
    padding: var(--ctl-pad-y) var(--ctl-pad-x);
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-3) !important;
    outline: none;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

/* Fix iOS Search Input default white styling and padding */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/* Override global input resets for MudBlazor TextFields specifically marked as search-filter-input */
.search-filter-input input {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    width: 100% !important;
    height: 1lh !important;
    padding: 6px 0 7px !important;
    color: var(--mud-palette-text-primary) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    transition: none !important;
    box-shadow: none !important;


}

/* Safari iOS height fix for date native inputs */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
    line-height: normal;
    min-height: var(--ctl-h);
    display: block !important;
    /* Prevents empty native date spinners from shrinking to 20px */
}

/* Force flex children containing inputs to expand instead of shrink (fixes DateRange inputs collapsing) */
.d-flex>.mb-2,
.d-flex>.stk-form-control,
.d-flex>div>.stk-form-control,
.mud-stack-row>div,
.mud-stack-row>.stk-form-control,
.filters-container>div,
.dashboard-filter-container .mud-stack-row>div {
    flex: 1 1 auto !important;
    /*min-width: 150px !important;*/
}

@media (max-width: 767.98px) {
    .dashboard-filter-container .mud-stack-row>div {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
}

/* Specific fix for native date inputs in Safari/iOS - prevent small width when empty */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    min-width: 130px !important;
    width: 100% !important;
}

/* Sidebar Overlay for Mobile */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 3500;
}

@media (max-width: 767px) {
    .sidebar-overlay {
        display: block;
    }
}

textarea {
    min-height: 110px;
}

.stk-form-control::placeholder {
    color: var(--text-tertiary);
}

.stk-form-control:focus {
    border-color: rgba(158, 192, 67, .7);
    box-shadow: 0 0 0 3px rgba(158, 192, 67, .18);
    background: rgba(255, 255, 255, .10);
}


/*Dropdown Options*/

/* Hide legacy IE arrow just in case */
select::-ms-expand {
    display: none;
}

/* ==== Options panel (supported on modern browsers) ==== */
select option,
.stk-form-control select option {
    background-color: var(--gray-900);
    /* dropdown list background */
    color: var(--text-primary);
    /* option text color */
}

/* Selected option appearance inside the list */
select option:checked,
.stk-form-control select option:checked {
    background-color: rgba(158, 192, 67, .45);
    /* brand tint */
    color: var(--black);
}

/* Hover (not in all browsers, but harmless) */
select option:hover,
.stk-form-control select option:hover {
    background-color: var(--surface-3);
}

/* Disabled option / placeholder look */
select option[disabled],
.stk-form-control select option[disabled] {
    color: var(--text-tertiary);
}

/* If you use a disabled+selected placeholder, dim the control text (progressive enhancement) */
@supports selector(:has(*)) {

    select:has(option[disabled][selected]),
    .stk-form-control select:has(option[disabled][selected]) {
        color: var(--text-tertiary);
    }
}

/* Disabled control */
select:disabled,
.stk-form-control select:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Optional: dark scrollbars inside long dropdowns (Chromium/WebKit) */
select option::-webkit-scrollbar {
    width: 10px;
}

select option::-webkit-scrollbar-track {
    background: var(--gray-800);
}

select option::-webkit-scrollbar-thumb {
    background: var(--gray-600);
}

select option::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* Badges (used by StatusBadge) */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .6rem;
    font-size: .85rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.bg-success-subtle {
    background: rgba(34, 197, 94, .15);
    color: var(--success);
}

.bg-warning-subtle {
    background: rgba(234, 179, 8, .18);
    color: var(--warning);
}

.bg-danger-subtle {
    background: rgba(239, 68, 68, .18);
    color: var(--error);
}

.bg-info-subtle {
    background: rgba(59, 130, 246, .18);
    color: var(--info);
}

.bg-secondary-subtle {
    background: rgba(255, 255, 255, .10);
    color: var(--text-secondary);
}

/* ✅ Cores consistentes com o teu tema MudBlazor */
.badge--success {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
}

.badge--danger {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
}

.badge--warning {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
}

.badge--info {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
}

.badge--neutral {
    color: #9ca3af;
    background: rgba(156, 163, 175, 0.12);
    border-color: rgba(156, 163, 175, 0.3);
}

.badge--critic {
    color: #bb0000;
    background: rgba(187, 0, 0, 0.12);
    border-color: rgba(187, 0, 0, 0.3);
}


.badge--admin {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.3);
}

.badge--manager {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.3);
}

.badge--user {
    color: #6b7280;
    background: rgba(107, 114, 128, 0.12);
    border-color: rgba(107, 114, 128, 0.3);
}

.badge--test-user {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.3);
}

.badge--distributor {
    color: #0d9488;
    background: rgba(13, 148, 136, 0.12);
    border-color: rgba(13, 148, 136, 0.3);
}

.badge--installer {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
}

.badge--cidadao {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
}


/* -------------------- TABLES -------------------- */
.table-wrap {
    overflow: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    color: var(--text-primary);
}

.table thead th {
    text-align: center;
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    padding: .75rem .75rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table tbody td {
    padding: .85rem .75rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.table tbody tr:hover {
    background: rgba(255, 255, 255, .04);
}

/* Optional stacked table for small screens */
@media (max-width: 576px) {
    .table.stacked thead {
        display: none;
    }

    .table.stacked tbody tr {
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .table.stacked tbody td {
        display: flex;
        justify-content: space-between;
        padding: .6rem .5rem;
    }

    .table.stacked tbody td::before {
        content: attr(data-label);
        color: var(--text-tertiary);
        margin-right: 1rem;
    }
}

.ativo-dot-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .25rem 0;
}

/* Bolinha com estilo consistente com badges */
.ativo-dot {
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid transparent;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: transform .15s ease, opacity .15s ease;
}

.ativo-dot--on {
    background-color: #22c55e;
    /* mesmo verde dos badges (success) */
}

.ativo-dot--off {
    background-color: #ef4444;
    /* mesmo vermelho dos badges (danger) */
}

/* Pequeno efeito visual no hover (opcional) */
.ativo-dot-wrapper:hover .ativo-dot {
    transform: scale(1.15);
    opacity: .9;
}

/* -------------------- UTILS -------------------- */
.rounded-3 {
    border-radius: var(--radius-3);
}

.rounded-4 {
    border-radius: var(--radius-4);
}

.shadow-1 {
    box-shadow: var(--shadow-1);
}

.shadow-2 {
    box-shadow: var(--shadow-2);
}

.surface {
    background: var(--surface);
    border: 1px solid var(--border);
    backdrop-filter: blur(var(--blur));
}

.surface-2 {
    background: var(--surface-2);
    border: 1px solid var(--border);
    backdrop-filter: blur(var(--blur));
}

.gap-1 {
    gap: var(--space-1);
}

.gap-2 {
    gap: var(--space-2);
}

.gap-4 {
    gap: var(--space-4);
}

.p-4 {
    padding: var(--space-4) !important;
}

.p-6 {
    padding: var(--space-6) !important;
}

.mb-4 {
    margin-bottom: var(--space-4) !important;
}

.mt-2 {
    margin-top: var(--space-2) !important;
}

/* Subtle scrollbar on dark surfaces */
.surface::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.surface::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 8px;
}

.surface:hover::-webkit-scrollbar-thumb,
.table-wrap:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .28);
}

/* Override rigid MudBlazor grid item width to allow wrapping, as identified by the user. */
@media (min-width: 1280px) {
    .mud-grid-item-lg-3 {
        max-width: 100% !important;
    }
}



/* Contêiner do formulário */
.sk-form .form-label {
    font-weight: var(--fw-medium);
}

/* Grid responsivo: 1 col em mobile, N colunas em ≥768px */
.sk-formGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

/* Em ≥768px trocamos para 2+ colunas */
@media (min-width: 768px) {

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

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

/* Em ≥1200px permite 4 colunas */
@media (min-width: 1200px) {
    .sk-formGrid.cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Cada item do grid */
.sk-formGrid__item {
    min-width: 0;
}

/*Mobile */
@media (max-width: 767.98px) {
    .sk-formGrid__item {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    .sk-sectionBox {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    .sk-sectionBox .sk-formGrid {
        grid-template-columns: 1fr !important;
    }

    .sk-pageHeader {
        justify-content: flex-end;
        text-align: right;
    }
}


.sk-card {
    background: var(--surface-3);
    border-radius: var(--radius-2);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    padding: 16px;
    position: relative;
    z-index: 5;
    overflow: hidden;

}


/* ===== CARD (vidro, cantos, sombra) ===== */
.sk-tableCard {
    background: var(--surface-3);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    overflow: hidden;
}

.sk-table-loading-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 50;
    backdrop-filter: blur(2px);
    border-radius: 0.25rem;
}




/* Células de skeleton */
.sk-skeleton-cell {
    height: 1.35rem;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(230, 230, 230, 0.6) 25%, rgba(245, 245, 245, 0.9) 37%, rgba(230, 230, 230, 0.6) 63%);
    background-size: 400% 100%;
    animation: sk-skeleton-shimmer 1.4s ease-in-out infinite;
}

.sk-skeleton-row td {
    padding: 1rem;
}

/* Coluna das ações um pouco mais estreita */
.sk-skeleton-action {
    width: 50px;
}

/* Animação shimmer */
@keyframes sk-skeleton-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

/* scroll só quando precisa + header sticky funciona */
/* Table container enables horizontal scrolling */
.sk-tableScroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* smoother on mobile */
}

/* Keep rows consistent */
.sk-table tr {
    height: 3rem;
    /* adjust as needed */
}

/* Prevent multi-line wrapping */
.sk-table td,
.sk-table th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    /* per-column truncation, tune this */
    vertical-align: middle;
}

/* ===== TABLE TOOLBAR (top controls) ===== */
.sk-tableToolbar {
    display: flex;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: .25rem;
}

.sk-tt-left,
.sk-tt-center,
.sk-tt-right {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.sk-tt-range {
    white-space: nowrap;
}

/* Direita (pesquisa) limitada para não “esticar” demasiado no desktop */
.sk-tt-right {
    justify-self: end;
    width: min(360px, 100%);
}

@media (max-width: 576px) {
    .sk-tableToolbar {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    .sk-tt-right {
        order: 1;
        width: 100%;
    }

    .sk-tt-left {
        order: 2;
        width: 100%;
        justify-content: space-between;
    }

    .sk-tt-center {
        order: 3;
        width: 100%;
        justify-content: flex-start;
    }
}

.sk-tt-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.sk-tt-searchIcon {
    position: absolute;
    left: .5rem;
    opacity: .7;
    font-size: 18px;
}

.sk-tt-input {
    padding-left: 1.75rem;
}

/* Label apenas para acessibilidade; oculto visualmente */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 576px) {
    .sk-tt-input {
        width: 100%;
    }
}


/* ===== TABLE BASE ===== */
.sk-table {
    width: 100%;
    border-collapse: separate;
    /* permite “hairlines” verticais */
    border-spacing: 0;
    color: var(--text-primary);
    font-size: .95rem;
    line-height: 1.35;
}

/* ===== HEADER ===== */
.sk-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .85rem 1rem;
    text-align: center;
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    letter-spacing: .2px;
    background: #ffffff0d;
    user-select: none;
    cursor: pointer;
    white-space: nowrap;
    /* hairline vertical */
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .3);
}

.sk-table thead th:first-child {
    box-shadow: none;
}

/* coluna ordenada – ligeiro realce */
.sk-table thead th:has(.sk-sort) {
    color: var(--text-primary);
}

/*
    .sk-table td:last-child {

        overflow:visible;
    }*/

.sk-sort-stack {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
    vertical-align: middle;
}

.sk-sort-muted {
    opacity: .35;
    transition: opacity var(--transition);
}

.sk-table thead th:hover .sk-sort-muted {
    opacity: .7;
}

.sk-sort-active {
    color: var(--brand);
}


.sk-tabBtn.is-active {
    background: var(--brand);
    color: #0e1a00;
    /* dark text on brand */
    border-color: transparent;
}

.sk-tabBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 32px;
    padding: 0 .6rem;
    font-weight: var(--fw-semibold);
    line-height: 1;
    border-radius: var(--radius-2);
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--text-primary);
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.sk-sort--asc {
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

.sk-sort--desc {
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ===== BODY ===== */
.sk-table tbody tr {
    /* linha separadora (igual ao mock) */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.sk-table tbody tr:hover {
    background: rgba(255, 255, 255, .05);
}

.sk-table tbody td {
    padding: 1rem;
    vertical-align: middle;
    /* hairline vertical entre colunas */
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .3);
}

.sk-table tbody td:first-child {
    box-shadow: none;
}

/* célula “sem registos” */
.sk-table__empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-secondary);
}

/* ===== DENSIDADE/LOOK DAS BORDAS ===== */
.sk-table thead tr,
.sk-table tbody tr {
    background-clip: padding-box;
}

/* ===== RESPONSIVO ===== */
@media (max-width: 576px) {

    .sk-table thead th,
    .sk-table tbody td {
        padding: .75rem .8rem;
    }
}

/* Compact pager */
.sk-pagination {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
    /* nunca quebrar para segunda linha */
    white-space: nowrap;
    /* impedir quebra de conteúdo */
    max-width: 100%;
    overflow-x: auto;
    /* scroll horizontal quando necessário */
    -webkit-overflow-scrolling: touch;
}

/* Page number pill */
.sk-pageBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 32px;
    padding: 0 .6rem;
    font-weight: var(--fw-semibold);
    line-height: 1;
    border-radius: var(--radius-2);
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--text-primary);
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.sk-pageBtn:hover {
    background: var(--surface-3);
}

.sk-pageBtn.is-active {
    background: var(--brand);
    color: #0e1a00;
    /* dark text on brand */
    border-color: transparent;
}

/* Evitar overflow horizontal subtil na área do paginador */
.sk-tableFooter {
    width: 100%;
    overflow-x: hidden;
}

@media (max-width: 360px) {
    .sk-pageBtn {
        min-width: 30px;
        height: 30px;
        padding: 0 .45rem;
    }
}

/* Navegação anterior/seguinte como ícones quando há pouco espaço */
.sk-pageNav {
    min-width: 42px;
    /* ligeiramente maior que os pontos */
    height: 34px;
}

.sk-pageNav .sk-btn__icon {
    display: none;
}

@media (max-width: 576px) {
    .sk-pageNav .sk-btn__label {
        display: none;
    }

    .sk-pageNav .sk-btn__icon {
        display: inline-block;
        margin-right: 0;
    }
}

/* inline container */
/*.sk-actions {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
}*/

/* ===== Chart Horizontal Scrolling (Pure CSS) ===== */
.sk-chart-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
    /* Remove padding/margin that might cause extra scrollbars */
    padding-bottom: 5px;
}

/* 
   Hide scrollbar on desktop mostly, but keep it available if forced.
   Custom scrollbar styling makes it look cleaner. 
*/
.sk-chart-scroll-wrapper::-webkit-scrollbar {
    height: 6px;
}

.sk-chart-scroll-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.sk-chart-scroll-wrapper::-webkit-scrollbar-thumb {
    background: rgba(158, 192, 67, 0.4);
    border-radius: 4px;
}

.sk-chart-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(158, 192, 67, 0.7);
}

.sk-mobile-scroll-content {
    /* minimum width is passed via style var from the component */
    min-width: var(--sk-chart-min-width, 100%);
    width: 100%;
}

/* Let chart labels/legend render outside the SVG/canvas bounds (prevents clipping the Y-axis on desktop) */
.sk-chart-scroll-wrapper .apexcharts-svg,
.sk-chart-scroll-wrapper svg {
    overflow: visible !important;
}

/* Ensure CSS overrides for desktop so there is no horizontal scroll when there is plenty of space */
@media (min-width: 1025px) {
    .sk-chart-scroll-wrapper {
        overflow-x: hidden !important;
    }

    .sk-mobile-scroll-content {
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

/* simple icon pill */
.sk-iconBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 16px;
    border-radius: var(--radius-3);
    border: none;
    background: transparent;
    color: var(--text-primary);
    transition: background var(--transition), border-color var(--transition), transform 60ms ease;
}

.sk-iconBtn:hover {
    background: var(--surface-3);
}

.sk-iconBtn:active {
    transform: translateY(1px);
}

.sk-iconBtn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.sk-iconBtn--danger {
    border-color: rgba(239, 68, 68, .35);
}

.sk-iconBtn--danger:hover {
    background: rgba(239, 68, 68, .16);
    border-color: rgba(239, 68, 68, .55);
}

/* overflow menu */
.sk-moreMenu {
    position: relative;
    /*    display: inline-block;
*/
}

.sk-actionsMenu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 180px;
    padding: .25rem;
    margin: 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-1);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    z-index: 50;
    /* above table rows */
}

.sk-actionsMenu .dropdown-item {
    color: var(--text-primary);
    border-radius: .5rem;
}

.sk-actionsMenu .dropdown-item:hover {
    background: var(--surface-3);
    color: #fff;
}

.sk-actionsMenu i {
    width: 1rem;
    text-align: center;
    opacity: .85;
}


/* ===== Feature Cards ===== */

.sk-featureGrid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-4);
}

/* 2-up on large, 1-up on small – tweak as you need */
@media (max-width: 991.98px) {
    .sk-featureGrid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 639.98px) {
    .sk-featureGrid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/*  card spans */
.sk-featureCol-2 {
    grid-column: span 2;
}

.sk-featureCol-3 {
    grid-column: span 3;
}

.sk-featureCol-4 {
    grid-column: span 4;
}

.sk-featureCol-6 {
    grid-column: span 6;
}

/* half width */
.sk-featureCol-12 {
    grid-column: span 12;
}

/* full width */

/* Card itself */
.sk-featureCard {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-2);
    background: var(--surface);
    border: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    position: relative;
    backdrop-filter: blur(var(--blur));
    z-index: 100;
    isolation: isolate;
    text-decoration: none;
    color: var(--text-primary);
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
    will-change: opacity;
    background-clip: padding-box;
    contain: layout paint;
    transform: translateZ(0);
}

.sk-featureCard:hover {
    text-decoration: none;
    background: var(--surface-3);
    border-color: rgba(255, 255, 255, .28);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

/* Icon badge (uses optional --feature-accent) */
.sk-featureIcon {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--feature-accent, var(--brand)) 24%, transparent);
    border: 1px solid color-mix(in srgb, var(--feature-accent, var(--brand)) 40%, rgba(255, 255, 255, .15));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.sk-featureIcon i {
    text-decoration: none;
    font-size: 1.1rem;
    color: var(--feature-accent, var(--brand));
}

.sk-featureBody {
    text-decoration: none;
    display: grid;
    gap: .35rem;
}

.sk-featureTitle {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: var(--fw-bold);
    font-size: 1.1rem;
    letter-spacing: .1px;
    line-height: 1.25;
}

.sk-featureSubtitle {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: .95rem;
    line-height: 1.4;
}

/* Focus ring for a11y */
.sk-featureCard:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(158, 192, 67, .20);
}


a:hover {
    text-decoration: none;
}


.text-success {
    color: var(--success) !important;
}

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

.text-error {
    color: var(--error) !important;
}

.text-info {
    color: var(--info) !important;
}

.bg-success {
    background: var(--success) !important;
    color: #fff;
}

.bg-warning {
    background: var(--warning) !important;
    color: #000;
}

.bg-error {
    background: var(--error) !important;
    color: #fff;
}

.bg-info {
    background: var(--info) !important;
    color: #fff;
}

.bg-glass {
    background: var(--glass-standard-bg);
    border: var(--glass-standard-border);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
}



.filter-item {
    flex: 1 1 auto;
    min-width: 220px;
    position: relative;
    z-index: 5;
}

.filter-item:focus-within {
    z-index: 1000;
    /* o filtro ativo fica por cima dos outros */
}

.filter-item .sk-card {
    position: relative;
    overflow: visible !important;
}


.filters-container {
    display: flex;
    flex-wrap: wrap;
    /* wrap por defeito (para tablets/mobiles) */
    gap: 1rem;
    z-index: 10;
    /* sobe o nível da barra de filtros */
}

/* Cada filtro ocupa tamanho automático */
.filter-item {
    flex: 1 1 auto;
    min-width: 220px;
}

/* Em ecrãs muito pequenos, forçar cada filtro a ocupar a largura total */
@media (max-width: 480px) {
    .filters-container {
        gap: .75rem;
    }

    .filter-item {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* Botão de pesquisa */
.search-button {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex: 0 0 auto;
}

.dropdown-menu,
.select-dropdown,
.autocomplete-list {
    z-index: 9999 !important;
}


.stk-combo-clear {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    line-height: 1;
    z-index: 5;
}

.stk-combo-clear:hover {
    color: #fff;
    /* ou var(--bs-body-color) no tema claro */
}

.stk-form-control.pe-4 {
    margin-left: 20px !important;
}

/* =========================================================
   SEARCH FILTER INPUT CUSTOMIZATION
   Specifically targeting the FilterComponent search field to fix Light Mode visibility
   without affecting all other MudBlazor inputs globally. 
========================================================= */
.search-filter-input.mud-input-control>.mud-input-control-input-container>.mud-input-label-inputcontrol {
    color: var(--text-primary);
}

.search-filter-input.mud-input-control>.mud-input-control-input-container>.mud-input-label-inputcontrol.mud-input-label-animated {
    color: var(--text-primary);
}

/* Menu dos dropdowns: limitar altura e permitir scroll */
.stk-combo-menu {
    max-height: 240px;
    overflow-y: auto;
}

/* Paginação da tabela: melhor layout em mobile */
@media (max-width: 576px) {
    .sk-tableFooter {
        justify-content: center !important;
        flex-wrap: nowrap;
        gap: .5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sk-pagination {
        gap: .35rem;
    }
}


.mud-icon-root {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    direction: ltr;
}


/* Ícone branco para inputs de data com fundo escuro */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(2);
    opacity: 0.9;
    cursor: pointer;
}

/* (Opcional) quando o tema for claro, volta ao normal */
body.light-theme input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
}

.ilha-icon {
    font-size: 1rem;
    opacity: 0.9;
}

/* Ícones por tipo — cores consistentes */
.blue-icon {
    color: #3b82f6;
}

.cidade-icon {
    color: #f59e0b;
}


/* verde marca */
.morada-icon {
    color: #9EC043;
}

.localizacao-icon {
    color: #9EC043;
}

/* azul (localização) */
.data-icon {
    color: #3b82f6;
}

.contentor-icon {
    color: red;
}

.user-icon {
    color: #3B82F6;
}

.userResp-icon {
    color: #1E3A8A;
}

/* laranja (data) */

/* Bolinhas igual aos badges */
.ativo-dot {
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid transparent;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: transform .15s ease, opacity .15s ease;
}

.ativo-dot--on {
    background-color: #22c55e;
    /* verde ativo */
}

.ativo-dot--off {
    background-color: #ef4444;
    /* vermelho inativo */
}

/* === Ajustes finais para tabela com ícones e ações === */

/* 1️⃣ Estrutura interna: ícone + texto (evita corte do ícone) */
.sk-table .cell-icon-text {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
}

.sk-table .cell-icon-text .text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    min-width: 0;
    max-width: 100%;
}

/* 2️⃣ Mantém badges e ícones inline, mas sem cortar */
.badge,
.data-icon,
.status-cell {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    vertical-align: middle;
}

/* 3️⃣ Largura flexível da coluna de ações */
.sk-table th:last-child,
.sk-table td:last-child {
    text-align: center;
    min-width: 140px;
    /* cabe 3 ícones */
    max-width: 200px;
    /* evita expansão exagerada */
    width: auto;
    overflow: visible;
    white-space: nowrap;
}

/* 4️⃣ Ícones de ação compactos e visíveis */
.custom-action-icon {
    margin: 0 2px;
    padding: 4px;
    line-height: 1;
    flex-shrink: 0;
}

/* 5️⃣ Menus dropdown dentro dos limites */
.sk-moreMenu {
    position: relative;
}

.sk-moreMenu .sk-actionsMenu {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 100;
}


.sk-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: 0;
    margin: 0;
    line-height: 1;
}

.custom-action-icon {
    padding: 0;
    margin: 0;
    line-height: 1;
    min-width: unset;
    min-height: unset;
}

.sk-table td {
    padding-top: 4px;
    padding-bottom: 4px;
}



.cell-icon-text {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.cell-icon {
    width: 18px;
    height: 18px;
    opacity: 0.9;
}

/* Dark mode (default) */
.sidenav__logo {
    content: url("/Content/Logo/Png/logo-full.png");
}

.sidenav__logo__min {
    content: url("/Content/Logo/Png/logo-min.png");
}

/* Light mode */
body.light-theme .sidenav__logo {
    content: url("/Content/Logo/Png/logo-full-light.png");
}

body.light-theme .sidenav__logo__min {
    content: url("/Content/Logo/Png/logo-min-light.png");
}

.mud-drawer {
    overflow: hidden !important;
}


/* ===============================
   LIGHT THEME VARIANT
   =============================== */
/* ===============================
   LIGHT THEME VARIANT
   =============================== */
body.light-theme {
    /* Text hierarchy */
    --text-primary: #000000;
    --text-secondary: #374151;
    /* gray-700 */
    --text-tertiary: #6B7280;
    /* gray-500 */
    /* Surfaces claras translúcidas (base branco) */
    --surface: rgba(255, 255, 255, 0.9);
    /* quase branco */
    --surface-2: rgba(255, 255, 255, 0.7);
    /* mais translúcido */
    --surface-3: rgba(255, 255, 255, 0.5);
    /* ainda mais leve */
    --surface-modal: rgba(255, 255, 255, 0.9);
    /* Borders */
    --border: rgba(0, 0, 0, 0.15);
    /* Background principal */
    --theme-bg: #FFFFFF;
    --theme-text: #000000;
    --theme-border: rgba(0, 0, 0, 0.1);
    /* Glass morphism em claro */
    --glass-light-bg: rgba(255, 255, 255, 0.6);
    --glass-light-border: 1px solid rgba(0, 0, 0, 0.05);
    --glass-standard-bg: rgba(255, 255, 255, 0.7);
    --glass-standard-border: 1px solid rgba(0, 0, 0, 0.1);
    --glass-heavy-bg: rgba(255, 255, 255, 0.8);
    --glass-heavy-border: 1px solid rgba(0, 0, 0, 0.15);
    --glass-dark-bg: rgba(255, 255, 255, 0.9);
    --glass-dark-border: 1px solid rgba(0, 0, 0, 0.2);
    /* Sidebar / Drawer */
    --sidebar-bg: rgba(255, 255, 255, .85);
    --sidebar-border: rgba(0, 0, 0, .12);
    --sidebar-hover: rgba(255, 255, 255, .95);
    --sidebar-active-bg: rgba(158, 192, 67, .20);
    --sidebar-scrollbar: rgba(0, 0, 0, .22);
    /* Box shadows adaptados */
    --shadow-1: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-2: 0 10px 30px rgba(0, 0, 0, .20);
}

body.light-theme .stk-form-control {
    background-color: #ffffff;
    border-color: var(--theme-border);
    color: var(--text-primary);
}

body.light-theme .stk-form-control:focus {
    background-color: #ffffff;
    border-color: var(--mud-palette-primary);
}

/* ===== Filter Component Table Truncation ===== */
th.sk-td-ilha,
td.sk-td-ilha {
    max-width: 120px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (max-width: 768px) {

    th.sk-td-ilha,
    td.sk-td-ilha {
        max-width: 90px !important;
    }
}

@media (max-width: 480px) {

    th.sk-td-ilha,
    td.sk-td-ilha {
        max-width: 40px !important;
    }
}