/* Tenant branding defaults */
:root {
    --tenant-primary: #594AE2;
    --tenant-secondary: #00ACC1;
    --tenant-accent: #FFC107;
    --tenant-primary-rgb: 89, 74, 226;
    --tenant-secondary-rgb: 0, 172, 193;
    --tenant-accent-rgb: 255, 193, 7;
    
    /* Font size preference - default values */
    --erp-font-size-table: 0.875rem;
    --erp-font-size-table-header: 0.875rem;
    --erp-font-size-body: 0.875rem;
    --erp-table-cell-padding: 6px 16px;
}

/* Large font mode CSS variable overrides */
body.font-size-large {
    --erp-font-size-table: 1rem;
    --erp-font-size-table-header: 0.95rem;
    --erp-font-size-body: 1rem;
    --erp-table-cell-padding: 12px 20px;
}

/* ==============================================
   FONT SIZE PREFERENCE STYLES
   ============================================== */

/* Large font mode - applied via class on body */
html body.font-size-large,
html body.font-size-large .mud-main-content {
    font-size: 16px !important;
}

/* MudTable large font styles - using higher specificity and !important */
/* Default MudTable uses .875rem (14px), we increase to 1rem (16px) for large mode */
html body.font-size-large .mud-table {
    font-size: 16px !important;
}

/* Table cells - target all variations with maximum specificity */
html body.font-size-large .mud-table-cell,
html body.font-size-large .mud-table td,
html body.font-size-large .mud-table th,
html body.font-size-large td.mud-table-cell,
html body.font-size-large th.mud-table-cell,
html body.font-size-large .mud-table-container td,
html body.font-size-large .mud-table-container th,
html body.font-size-large .mud-table-root td,
html body.font-size-large .mud-table-root th,
html body.font-size-large .mud-table-root .mud-table-body .mud-table-cell {
    font-size: 16px !important;
    padding: 14px 20px !important;
}

/* Table header cells */
html body.font-size-large .mud-table-head th,
html body.font-size-large .mud-table thead th,
html body.font-size-large .mud-table-head .mud-table-cell,
html body.font-size-large thead .mud-table-cell {
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* Table body cells */
html body.font-size-large .mud-table-body td,
html body.font-size-large .mud-table tbody td,
html body.font-size-large .mud-table-body .mud-table-cell,
html body.font-size-large tbody .mud-table-cell,
html body.font-size-large .mud-table-row td {
    font-size: 16px !important;
}

/* Table sort labels */
html body.font-size-large .mud-table-sort-label {
    font-size: 15px !important;
}

/* Table pager */
html body.font-size-large .mud-table-pager,
html body.font-size-large .mud-table-pagination,
html body.font-size-large .mud-table-pager .mud-select,
html body.font-size-large .mud-table-pager .mud-input,
html body.font-size-large .mud-table-pager span {
    font-size: 15px !important;
}

/* Table toolbar */
html body.font-size-large .mud-table-toolbar,
html body.font-size-large .mud-table-toolbar .mud-typography {
    font-size: 18px !important;
}

/* Typography inside tables */
html body.font-size-large .mud-table .mud-typography-body1,
html body.font-size-large .mud-table .mud-text-body1 {
    font-size: 16px !important;
}

html body.font-size-large .mud-table .mud-typography-body2,
html body.font-size-large .mud-table .mud-text-body2 {
    font-size: 15px !important;
}

html body.font-size-large .mud-table .mud-typography-caption,
html body.font-size-large .mud-table .mud-text-caption {
    font-size: 14px !important;
}

/* MudChip inside tables */
html body.font-size-large .mud-table .mud-chip,
html body.font-size-large .mud-table .mud-chip-content {
    font-size: 14px !important;
}

/* MudText typography adjustments for large font (global) */
html body.font-size-large .mud-typography-body1,
html body.font-size-large .mud-text-body1 {
    font-size: 17px !important;
}

html body.font-size-large .mud-typography-body2,
html body.font-size-large .mud-text-body2 {
    font-size: 16px !important;
}

html body.font-size-large .mud-typography-caption,
html body.font-size-large .mud-text-caption {
    font-size: 14px !important;
}

html body.font-size-large .mud-typography-subtitle1 {
    font-size: 18px !important;
}

html body.font-size-large .mud-typography-subtitle2 {
    font-size: 17px !important;
}

/* Form inputs with large font */
html body.font-size-large .mud-input,
html body.font-size-large .mud-input-root,
html body.font-size-large .mud-input-slot,
html body.font-size-large .mud-input-text,
html body.font-size-large .mud-select,
html body.font-size-large .mud-select-input,
html body.font-size-large .mud-autocomplete {
    font-size: 16px !important;
}

html body.font-size-large .mud-input-label,
html body.font-size-large .mud-input-label-text {
    font-size: 15px !important;
}

/* Buttons with large font */
html body.font-size-large .mud-button-root,
html body.font-size-large .mud-button-label {
    font-size: 15px !important;
}

/* Cards and papers */
html body.font-size-large .mud-card-content {
    font-size: 16px !important;
}

/* Navigation */
html body.font-size-large .mud-nav-link {
    font-size: 16px !important;
}

/* Alerts */
html body.font-size-large .mud-alert-message {
    font-size: 16px !important;
}

/* Breadcrumbs personalizados */
.mud-breadcrumbs {
    padding: 8px 0;
}

.mud-breadcrumb-item {
    font-size: 0.875rem;
}

/* Melhorias gerais de UX */
.full-height-content {
    min-height: 100vh;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Mobile: thinner scrollbar */
@media (max-width: 959px) {
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
}

/* Animações suaves */
.mud-dialog {
    animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover states melhorados */
.mud-table-row:hover {
    background-color: rgba(0, 0, 0, 0.02);
    transition: background-color 0.2s ease;
}

/* Focus indicators para acessibilidade */
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Chips com melhor espaçamento */
.mud-chip {
    font-weight: 500;
}

/* Estilos modernos para a navegação */
.mud-nav-link {
    border-radius: 8px;
    margin: 4px 8px;
    padding: 10px 16px !important;
    transition: all 0.2s ease;
}

.mud-nav-link:hover {
    background-color: rgba(var(--tenant-primary-rgb), 0.08);
    transform: translateX(2px);
}

.mud-nav-link.active {
    background-color: rgba(var(--tenant-primary-rgb), 0.12);
    font-weight: 600;
}

.mud-nav-group {
    margin: 4px 8px;
}

.mud-nav-group .mud-nav-group-header {
    border-radius: 8px;
    padding: 10px 16px !important;
    transition: all 0.2s ease;
}

.mud-nav-group .mud-nav-group-header:hover {
    background-color: rgba(var(--tenant-primary-rgb), 0.08);
}

/* Mobile NavMenu adjustments */
@media (max-width: 959px) {
    .responsive-nav-menu .mud-nav-link {
        padding: 14px 16px !important;
        font-size: 1rem;
        margin: 6px 12px;
    }
    
    .responsive-nav-menu .mud-nav-group-header {
        padding: 14px 16px !important;
        font-size: 1rem;
    }
    
    .responsive-nav-menu .mud-nav-link .mud-icon-root,
    .responsive-nav-menu .mud-nav-group-header .mud-icon-root {
        font-size: 1.5rem;
        margin-right: 16px;
    }
}

/* Topbar moderna */
.mud-appbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.mud-appbar .mud-button-root {
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.mud-appbar .mud-button-root:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mud-appbar .mud-menu {
    border-radius: 8px;
}

/* Drawer moderno */
#nav-drawer {
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
    transition: width 0.3s ease, min-width 0.3s ease;
}

/* Slightly more pronounced open/close states for a nicer feel */
#nav-drawer.mud-drawer--open {
    width: 240px !important;
    min-width: 240px !important;
}

#nav-drawer.mud-drawer--closed {
    width: 56px !important;
    min-width: 56px !important;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

/* Ensure icon-only mode centers nicely and the label hides cleanly */
#nav-drawer.mud-drawer--closed .mud-nav-link {
    padding-left: 12px !important;
    text-align: center;
}

#nav-drawer .mud-nav-link .mud-icon-root {
    font-size: 1.25rem;
}

/* Smooth opened drawer shadow for separation */
#nav-drawer.mud-drawer--open {
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.06);
}

/* Ocultar setinhas quando drawer está fechado (mini mode) */
#nav-drawer.mud-drawer--closed .mud-nav-group .mud-nav-group-header .mud-icon-button,
#nav-drawer .mud-drawer-content[style*="width: 56px"] .mud-nav-group .mud-nav-group-header .mud-icon-button {
    display: none !important;
}

/* Menu items no dropdown da topbar */
.mud-popover .mud-list-item {
    border-radius: 6px;
    margin: 2px 8px;
    transition: all 0.15s ease;
}

.mud-popover .mud-list-item:hover {
    background-color: rgba(var(--tenant-primary-rgb), 0.08);
    transform: translateX(2px);
}

/* Transição suave para o conteúdo principal */
.mud-main-content {
    transition: margin-left 0.3s ease;
}

/* Melhorar hover no botão toggle */
.mud-icon-button {
    transition: transform 0.2s ease;
}

.mud-icon-button:hover {
    transform: scale(1.1);
}

/* Toggle icon rotation for better UX */
.menu-toggle {
    transition: transform 0.25s ease;
}

#nav-drawer.mud-drawer--open .menu-toggle {
    transform: rotate(0deg);
}

#nav-drawer.mud-drawer--closed .menu-toggle {
    transform: rotate(180deg);
}

/* ==============================================
   MOBILE-FIRST RESPONSIVE STYLES
   ============================================== */

/* CSS Variables for consistent theming */
:root {
    --mobile-topbar-height: 56px;
    --mobile-bottomnav-height: 56px;
    --touch-target-min: 44px;
    --spacing-touch: 8px;
    --mobile-drawer-width: 280px;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --vh: 1vh; /* Fallback, updated by JS */
}

/* Mobile Topbar - Fixed at top */
.mobile-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mobile-topbar-height);
    padding-top: var(--safe-area-top);
    background-color: var(--mud-palette-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: max(16px, var(--safe-area-left));
    padding-right: max(16px, var(--safe-area-right));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1200;
}

.mobile-topbar__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-topbar__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.mobile-topbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-topbar__icon-btn {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    color: white;
}

/* Mobile Bottom Navigation - Fixed at bottom */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--mobile-bottomnav-height);
    padding-bottom: var(--safe-area-bottom);
    background-color: white;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1100;
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding: 6px 12px;
    gap: 2px;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.6);
    transition: all 0.2s ease;
    border-radius: 8px;
    text-decoration: none;
}

.bottom-nav-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.bottom-nav-item.active {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.bottom-nav-item__icon {
    font-size: 24px;
}

.bottom-nav-item__label {
    font-size: 0.75rem;
    line-height: 1;
}

/* Mobile Drawer Overlay */
.mobile-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1150;
    animation: fadeIn 0.2s ease;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--mobile-drawer-width);
    max-width: 85vw;
    background-color: white;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    z-index: 1200;
    padding-top: var(--safe-area-top);
    padding-left: var(--safe-area-left);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.mobile-drawer.open {
    transform: translateX(0);
}

/* Main content spacing for mobile */
.mobile-content {
    padding-top: calc(var(--mobile-topbar-height) + var(--safe-area-top) + 16px);
    padding-bottom: calc(var(--mobile-bottomnav-height) + var(--safe-area-bottom) + 16px);
    padding-left: max(16px, var(--safe-area-left));
    padding-right: max(16px, var(--safe-area-right));
    min-height: calc(100vh - var(--mobile-topbar-height) - var(--mobile-bottomnav-height));
}

/* Main content spacing for mobile without top bar */
.mobile-content-no-topbar {
    padding-top: calc(var(--safe-area-top) + 16px);
    padding-bottom: calc(var(--mobile-bottomnav-height) + var(--safe-area-bottom) + 16px);
    padding-left: max(16px, var(--safe-area-left));
    padding-right: max(16px, var(--safe-area-right));
    min-height: calc(100vh - var(--mobile-bottomnav-height));
}

/* Touch-friendly sizing utilities */
.touch-target {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding: var(--spacing-touch);
}

.touch-active {
    background-color: rgba(0, 0, 0, 0.1);
    transition: background-color 0.1s ease;
}

/* Mobile utility classes */
.hide-mobile {
    display: block;
}

.show-mobile {
    display: none;
}

.mobile-stack {
    display: flex;
    flex-direction: row;
}

/* Mobile-optimized cards */
.mobile-card {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 12px;
    overflow: hidden;
}

/* Responsive table wrapper */
.responsive-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: -16px;
    padding: 16px;
}

.responsive-table-wrapper::-webkit-scrollbar {
    height: 8px;
}

.responsive-table-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* Mobile dialog styles (bottom sheet) */
.mobile-dialog {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
    padding-bottom: var(--safe-area-bottom);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Mobile snackbar positioning (avoid bottom nav) */
.mud-snackbar-location-bottom {
    bottom: calc(var(--mobile-bottomnav-height) + var(--safe-area-bottom) + 16px) !important;
}

/* ==============================================
   MOBILE BREAKPOINT (< 960px)
   ============================================== */

@media (max-width: 959px) {
    /* Show/hide utilities */
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    .mobile-stack {
        flex-direction: column !important;
    }

    /* Adjust main content area */
    .mud-main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    /* Hide desktop drawer */
    #nav-drawer {
        display: none;
    }

    /* MudBlazor component adjustments for mobile */
    .mud-dialog-width-md,
    .mud-dialog-width-sm,
    .mud-dialog-width-lg {
        max-width: 95vw !important;
        margin: 16px !important;
    }

    .mud-dialog {
        margin: 8px !important;
    }

    .mud-table {
        font-size: 0.875rem;
    }

    .mud-table-cell {
        padding: 8px 4px !important;
    }

    /* Reduce padding on mobile */
    .mud-container {
        padding: 12px !important;
    }

    /* Stack form fields vertically on mobile */
    .mud-grid-item-xs-12 {
        width: 100% !important;
    }

    /* Make buttons full-width on mobile where appropriate */
    .mobile-full-width {
        width: 100% !important;
    }

    /* Adjust typography for mobile */
    h1, .mud-typography-h1 {
        font-size: 1.75rem !important;
    }

    h2, .mud-typography-h2 {
        font-size: 1.5rem !important;
    }

    h3, .mud-typography-h3 {
        font-size: 1.25rem !important;
    }

    /* Mobile-friendly tabs */
    .mud-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mud-tab {
        min-width: 120px;
    }

    /* Adjust appbar for mobile */
    .mud-appbar {
        display: none; /* Hidden on mobile, replaced by mobile-topbar */
    }

    /* Mobile card view for tables */
    .responsive-table-card {
        display: block;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 8px;
        background-color: white;
    }

    .responsive-table-card__row {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .responsive-table-card__row:last-child {
        border-bottom: none;
    }

    .responsive-table-card__label {
        font-weight: 600;
        color: rgba(0, 0, 0, 0.6);
        font-size: 0.875rem;
    }

    .responsive-table-card__value {
        text-align: right;
        font-size: 0.875rem;
    }
}

/* ==============================================
   TABLET BREAKPOINT (600px - 959px)
   ============================================== */

@media (min-width: 600px) and (max-width: 959px) {
    .mobile-content {
        padding-left: 24px;
        padding-right: 24px;
    }

    .mobile-drawer {
        width: 320px;
    }

    .mud-dialog-width-md {
        max-width: 600px !important;
    }
}

/* ==============================================
   TOUCH DEVICE SPECIFIC (NO HOVER)
   ============================================== */

@media (hover: none) {
    /* Remove hover effects on touch devices, use active states */
    .mud-button-root:hover {
        transform: none;
        box-shadow: none;
    }

    .mud-button-root:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    .mud-nav-link:hover {
        background-color: transparent;
        transform: none;
    }

    .mud-nav-link:active {
        background-color: rgba(103, 58, 183, 0.12);
    }

    .mud-table-row:hover {
        background-color: transparent;
    }

    .mud-table-row:active {
        background-color: rgba(0, 0, 0, 0.04);
    }

    /* Increase touch target sizes */
    .mud-icon-button {
        min-width: 48px;
        min-height: 48px;
    }

    .mud-button-root {
        min-height: 44px;
        padding: 8px 16px;
    }
}

/* ==============================================
   REDUCED MOTION
   Note: System preference is NOT automatically applied.
   The app uses its own preference setting in MainLayout.razor
   which injects a <style> block when ReduceMotion is enabled.
   ============================================== */

/* ==============================================
   PRINT STYLES
   ============================================== */

@media print {
    .mobile-topbar,
    .mobile-bottom-nav,
    .mobile-drawer-backdrop,
    .mud-appbar,
    #nav-drawer,
    .hide-print {
        display: none !important;
    }

    .mobile-content,
    .mud-main-content {
        padding: 0 !important;
        margin: 0 !important;
    }
}