/* Document Creation Styles */

/* =============================================
   Input Group - Elementos pegados con borde exterior
   ============================================= */

.input-group-bordered {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-surface);
}

/* Cada celda del grupo */
.input-group-cell {
    display: flex;
    align-items: center;
    padding: 0 8px;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.input-group-cell:last-child {
    border-right: none;
}

/* Celda que se expande (input de búsqueda) */
.input-group-cell-expand {
    flex: 1;
}

/* Versión compacta del input group (menos altura) */
.input-group-compact .input-group-cell {
    padding: 0 4px;
}

.input-group-compact .mud-input-slot {
    padding: 4px 0 !important;
}

/* Quitar márgenes de MudBlazor inputs dentro del grupo */
.input-group-cell .mud-input-control {
    margin: 0 !important;
}

.input-group-cell .mud-input-slot {
    padding: 8px 0 !important;
}

.input-group-cell .mud-input.mud-input-text {
    padding: 0 !important;
}

/* =============================================
   Control de cantidad dentro del input group
   ============================================= */

.input-group-cell .quantity-control {
    display: flex;
    align-items: center;
}

.input-group-cell .quantity-control .mud-input-control {
    width: 60px;
}

.input-group-cell .quantity-control .mud-input-slot {
    text-align: center;
}

/* =============================================
   Quantity Control Inline (para tabla de líneas)
   ============================================= */

.quantity-control-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* MudNumericField compacto sin bordes ni underline */
.quantity-control-inline .quantity-input {
    width: 70px;
    margin: 0;
}

.quantity-control-inline .quantity-input .mud-input-slot {
    text-align: center;
    font-size: 0.875rem;
    padding: 4px 0;
}

.quantity-control-inline .quantity-input .mud-input.mud-input-text::before,
.quantity-control-inline .quantity-input .mud-input.mud-input-text::after {
    border: none !important;
}

.quantity-control-inline .quantity-input .mud-input.mud-input-text:hover::before {
    border: none !important;
}

/* =============================================
   Action Buttons (Panel de comandos)
   ============================================= */

.action-button {
    width: 72px !important;
    height: 72px !important;
}

.action-button .mud-icon-root {
    font-size: 2rem !important;
}

/* =============================================
   Sidebar FAB (Mobile)
   ============================================= */

.sidebar-fab {
    position: fixed !important;
    bottom: 24px;
    left: 24px;
    z-index: 1000;
}

/* Adjust FAB position on mobile to avoid overlap with bottom bar */
@media (max-width: 960px) {
    .sidebar-fab {
        bottom: 80px; /* Move up to sit above bottom action bar */
    }
}

/* =============================================
   Mobile Bottom Action Bar
   ============================================= */

.mobile-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100; /* Above FAB (1000) */
    padding-bottom: env(safe-area-inset-bottom); /* iOS safe area */
}

.mobile-bottom-bar .mud-paper {
    border-radius: 0; /* Full-width, no rounded corners on mobile */
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* =============================================
   Product Search Drawer - Height Variables
   ============================================= */

:root {
    /* Header (72px) + Filters (80px) + Footer (56px) + Pager (49px) = 257px */
    --product-search-offset-default: 257px;
    /* Header + Filters wrapped on tablet (2 rows ~128px) + Footer + Pager = 305px */
    --product-search-offset-tablet: 305px;
    /* AppBar (64px) + Header (56px) + Filters (~100px) + Footer (~80px) + Margins (~180px) = 480px */
    --document-lines-offset: 480px;
    /* Proforma editor has a lighter header (no cash-register countdown / product filters), so its
       grid/sidebar can use a smaller offset than the invoice editor. Tune visually. */
    --proforma-lines-offset: 518px;
    /* Proforma sidebar mirrors the invoice sidebar's 208px baseline, plus the prompter strip
       (dashed divider + marquee row) the proforma toolbar adds below the toolbar. Tuned visually. */
    --proforma-sidebar-offset: 246px;

    /* Viewport height - fallback for older browsers */
    --vh-full: 100vh;
}

/* Dynamic viewport height for mobile browsers (handles URL bar) */
@supports (height: 100dvh) {
    :root {
        --vh-full: 100dvh;
    }
}

/* Hide drawer when closed, but delay to allow closing animation */
.product-search-drawer.mud-drawer--closed {
    visibility: hidden;
    transition: visibility 0s linear 0.25s;
}

.product-search-drawer.mud-drawer--open {
    visibility: visible;
    transition: visibility 0s linear 0s;
}

.product-search-drawer-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
}

.product-search-table .mud-table-container {
    height: calc(85vh - var(--product-search-offset-default));
}

/* Screens < 1700px: drawer full height */
@media (max-width: 1699px) {
    .product-search-drawer {
        height: var(--vh-full) !important;
    }

    .product-search-table .mud-table-container {
        height: calc(var(--vh-full) - var(--product-search-offset-default)) !important;
    }
}

/* Tablet: filters wrap to 2 rows, need more offset */
@media (max-width: 1024px) {
    .product-search-table .mud-table-container {
        height: calc(var(--vh-full) - var(--product-search-offset-tablet)) !important;
    }
}

/* =============================================
   Document Lines Table - Responsive Height
   ============================================= */

/* Editors that manage their own internal scroll (grid + sidebar) opt the shared layout body out
   of its page-level scroll, so there is no double scrollbar. The marker class lives on the page. */
.main-layout-container-body:has(.editor-fills-viewport) {
    overflow-y: unset;
}

.document-lines-table .mud-table-container {
    max-height: calc(var(--vh-full) - var(--document-lines-offset)) !important;
}

@media (max-width: 959px) {
    .document-lines-table .mud-table-container {
        max-height: 450px !important;
    }
}

/* The proforma editor is wrapped in <PageContainer>, so tables.css turns its MudTable into a
   flex:1 column and collapses the lines grid to content height, ignoring its inline Height.
   The invoice editor escapes this by not using PageContainer. Restore block layout so the fixed
   Height fills the left column and pushes the totals to the bottom, matching the invoice editor. */
.proforma-lines-table.mud-table {
    display: block !important;
    flex: none !important;
}

.proforma-lines-table .mud-table-container {
    flex: none !important;
}

@media (max-width: 959px) {
    .proforma-lines-table .mud-table-container {
        height: 450px !important;
    }
}

/* =============================================
   Hide Scrollbar (mantiene funcionalidad)
   ============================================= */

.hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, Opera */
}

/* =============================================
   Document Sidebar - Responsive
   ============================================= */

.document-sidebar {
    height: calc(var(--vh-full) - 208px);
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.document-sidebar::-webkit-scrollbar {
    display: none;
}

@media (max-width: 959px) {
    .document-sidebar {
        height: 100%;
        overflow: visible;
    }
}

/* Proforma sidebar mirrors .document-sidebar, but the proforma toolbar is taller,
   so it reuses --proforma-lines-offset (the same offset the lines grid uses) to stay
   aligned with the grid height instead of the invoice editor's fixed 208px. */
.proforma-sidebar {
    height: calc(var(--vh-full) - var(--proforma-sidebar-offset));
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.proforma-sidebar::-webkit-scrollbar {
    display: none;
}

@media (max-width: 959px) {
    .proforma-sidebar {
        height: 100%;
        overflow: visible;
    }
}

/* =============================================
   Document Editor Layout (sticky header + scroll)
   ============================================= */

.document-editor-layout {
    display: flex;
    flex-direction: column;
    height: calc(var(--vh-full) - 64px); /* viewport menos AppBar */
}

.document-editor-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--mud-palette-background);
    padding-bottom: 12px;
}

.document-editor-content {
    flex: 1;
    overflow: hidden;
}

.document-editor-scrollable {
    height: 100%;
    overflow-y: auto;
    padding-right: 8px; /* espacio para scrollbar */
}

/* =============================================
   Customer Search Drawer - Table
   ============================================= */

.customer-search-table .mud-table-container {
    height: calc(var(--vh-full) - 260px);
}

.customer-search-table .customer-row-selected {
    background-color: var(--mud-palette-gray-light);
}

/* =============================================
   Document Lines Grid - Keyboard Selection
   ============================================= */

.document-lines-table .selected-line {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) !important;
}

.document-lines-table .selected-line:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent) !important;
}

/* scroll-margin accounts for the sticky thead when using scrollIntoView.
   Without this, rows scroll behind the fixed header and appear hidden. */
.document-lines-table tbody tr {
    scroll-margin-top: 41px;
    scroll-margin-bottom: 0;
}