@import './forms/input.css';
@import './forms/button.css';
@import './forms/fieldset.css';
@import './layouts/main.css';
@import './layouts/panel.css';
@import './layouts/stepper.css';
@import './layouts/modal.css';
@import './layouts/page.css';
@import './layouts/popover.css';
@import './layouts/tabs.css';
@import './layouts/tables.css';
@import './layouts/auth-decoration.css';

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

/* Logo styles */
.navbar-logo {
    height: auto;
    display: block;
}

.navbar-logo-sm {
    height: 28px; /* Mobile */
}

.navbar-logo-lg {
    height: 36px; /* Desktop */
}

/* Fix MudBlazor tab badge clipping and increase spacing (Issue #1668) */
.mud-tabs .mud-tab {
    overflow: visible !important;
    min-width: 140px;
    padding-left: 24px;
    padding-right: 32px; /* Extra space for badge */
}

.mud-tabs .mud-tabs-toolbar {
    overflow: visible !important;
}

.mud-tabs .mud-tab-slider-container {
    overflow: visible !important;
}

/* "Agregar artículos" drawer (price lists): the drawer's internal content div does not
   stretch to the drawer height on its own, so the flex chain (grid absorbing the height,
   footer pinned at the bottom) never reaches the body. Global on purpose, same reason
   and same pattern as .product-search-drawer in document-creation.css. */
.add-articles-drawer .mud-drawer-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.add-articles-drawer.mud-drawer--closed {
    visibility: hidden;
    transition: visibility 0s linear 0.25s;
}

.add-articles-drawer.mud-drawer--open {
    visibility: visible;
    transition: visibility 0s linear 0s;
}

/* Full height on every screen (user decision): the sliver of page left visible by a
   partial-height drawer carries no information here, and the catalog wants the rows.
   --vh-full resolves to 100dvh on mobile (URL bar aware). */
.add-articles-drawer {
    height: var(--vh-full) !important;
}

/* ========================================
   AppBar Styles
   ======================================== */

/* Container for all AppBar actions */
.appbar-actions {
    color: rgba(255, 255, 255, 0.9);
}

/* Vertical divider between sections */
.appbar-divider {
    width: 1px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.25);
    margin: 0 4px;
}

/* Base item styling for AppBar elements */
.appbar-item,
.appbar-clock,
.appbar-language-btn,
.appbar-user-btn {
    color: rgba(255, 255, 255, 0.9);
    cursor: default;
}

/* Interactive buttons */
.appbar-language-btn,
.appbar-user-btn {
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.appbar-language-btn:hover,
.appbar-user-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Icon colors */
.appbar-actions svg,
.appbar-item svg,
.appbar-clock svg,
.appbar-language-btn svg,
.appbar-user-btn svg {
    color: rgba(255, 255, 255, 0.9) !important;
    fill: rgba(255, 255, 255, 0.9) !important;
}

/* Text styling */
.appbar-actions .mud-typography {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Glass effect for AppBar */
.mud-appbar {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Dark theme adjustments */
.mud-theme-dark .appbar-divider {
    background-color: rgba(255, 255, 255, 0.15);
}

.mud-theme-dark .appbar-item,
.mud-theme-dark .appbar-clock,
.mud-theme-dark .appbar-language-btn,
.mud-theme-dark .appbar-user-btn {
    color: rgba(255, 255, 255, 0.75);
}

.mud-theme-dark .appbar-actions svg,
.mud-theme-dark .appbar-item svg,
.mud-theme-dark .appbar-clock svg,
.mud-theme-dark .appbar-language-btn svg,
.mud-theme-dark .appbar-user-btn svg {
    color: rgba(255, 255, 255, 0.75) !important;
    fill: rgba(255, 255, 255, 0.75) !important;
}

.mud-theme-dark .appbar-actions .mud-typography {
    color: rgba(255, 255, 255, 0.75) !important;
}

.mud-theme-dark .appbar-language-btn:hover,
.mud-theme-dark .appbar-user-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Auth layout overrides - dark text on light background */
.auth-header-actions .appbar-language-btn {
    color: var(--mud-palette-primary) !important;
}

.auth-header-actions .appbar-language-btn svg {
    color: var(--mud-palette-primary) !important;
    fill: var(--mud-palette-primary) !important;
}

.auth-header-actions .appbar-language-btn .mud-typography {
    color: var(--mud-palette-primary) !important;
}

.auth-header-actions .appbar-language-btn:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

/* Hide dividers on mobile for cleaner look */
@media (max-width: 600px) {
    .appbar-divider {
        display: none;
    }

    .appbar-section {
        gap: 4px !important;
    }
}

.total-field .mud-disabled {
    opacity: 1 !important;
}

.total-disable {
    font-weight: 600; 
    color: black;
}

.total-field .mud-input-label,
.total-field span {
    color: var(--mud-palette-text-primary) !important;
    font-weight: 600;
}

.disabled {
    cursor: not-allowed;
}

.nav-link-root .mud-nav-link-text {
    font-weight: 500 !important;
}

/* Nav menu search input (sidebar filter) */
.nav-menu-search {
    margin-top: 0.25rem;
}

/* Highlighted substring inside nav link/group labels while searching.
   Uses the theme's warning palette via color-mix, so light and dark modes adapt automatically. */
.nav-search-highlight {
    background-color: color-mix(in srgb, var(--mud-palette-warning) 45%, transparent);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 600;
}