/* ================================
   SHARED EDITOR-FORM LAYOUT
   ================================
   Layout chrome shared by ProductEdit, ManufacturerEdit, CategoryEdit
   (and any future record-edit page). Previously this lived inside
   ProductEdit.razor.css — but Blazor CSS isolation scoped the rules to
   that one component, leaving the new editors unstyled. Moved here so
   every editor that uses the same DOM shape picks up the look.

   MudBlazor `.mud-*` overrides that used to require `::deep` are
   rewritten as plain descendants since this file is NOT scoped.
*/

/* Outer flex container, full-viewport minus app bar */
.product-edit-layout {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
    background-color: #f5f5f5;
    margin: -24px;
}

/* ================================
   STICKY HEADER
   ================================ */

.product-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background-color: white;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: center;
}

.header-back-text {
    color: var(--mud-palette-primary);
    font-size: 0.875rem;
    font-weight: 500;
}

.product-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 24px;
}

.header-right {
    display: flex;
    align-items: center;
}

.text-muted {
    color: #6c757d;
}

/* ================================
   BODY LAYOUT (SIDEBAR + CONTENT)
   ================================ */

.product-edit-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ================================
   LEFT SIDEBAR NAVIGATION
   ================================ */

.sidebar-nav {
    width: 200px;
    min-width: 200px;
    background-color: white;
    border-right: 1px solid #e0e0e0;
    padding: 24px 0;
    overflow-y: auto;
    position: sticky;
    top: 73px;
    height: calc(100vh - 137px);
}

.nav-group {
    padding: 0 0 16px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.nav-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.nav-link {
    display: block;
    padding: 8px 24px;
    color: #4a4a4a;
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
}

.nav-link:hover {
    background-color: #f8f9fa;
    color: var(--mud-palette-primary);
}

.nav-link.active {
    color: var(--mud-palette-primary);
    background-color: rgba(0, 128, 128, 0.08);
    border-left-color: var(--mud-palette-primary);
    font-weight: 500;
}

/* ================================
   MAIN CONTENT AREA
   ================================ */

.main-content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    height: calc(100vh - 137px);
}

/* ================================
   CONTENT CARDS
   ================================ */

.content-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 24px;
    margin-bottom: 24px;
    scroll-margin-top: 24px;
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 4px 0;
}

.card-subtitle {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0 24px 0;
}

.subsection-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #4a4a4a;
    margin: 24px 0 16px 0;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}

/* ================================
   FORM GRID LAYOUT
   ================================ */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.form-field {
    min-width: 0;
}

.form-field.full-width {
    grid-column: 1 / -1;
}

/* ================================
   CHECKBOX GROUPS
   ================================ */

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 16px;
}

/* ================================
   READ-ONLY FIELDS
   (was ::deep — rewritten as plain descendants now that this file is global)
   ================================ */

.readonly-fields .mud-input-outlined .mud-input-slot,
.readonly-input .mud-input-outlined .mud-input-slot {
    background-color: #f8f9fa !important;
}

.readonly-fields .mud-input-outlined-border,
.readonly-input .mud-input-outlined-border {
    border-color: #e0e0e0 !important;
}

/* ================================
   STICKY FOOTER
   ================================ */

.product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background-color: white;
    border-top: 1px solid #e0e0e0;
    position: sticky;
    bottom: 0;
    z-index: 100;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ================================
   INPUT STYLING (global — no ::deep)
   ================================ */

.product-edit-layout .mud-input-outlined .mud-input-slot {
    background-color: white;
}

.product-edit-layout .mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border {
    border-color: var(--mud-palette-primary);
}

/* ================================
   DESCRIPTION TABS (used by ProductEdit's description tab strip)
   ================================ */

.description-tabs {
    margin-top: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.description-tabs .mud-tabs-toolbar {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.description-tabs .mud-tab {
    text-transform: none;
    min-width: 120px;
}

.description-tabs .mud-tab.mud-tab-active {
    background-color: white;
    color: var(--mud-palette-primary);
    font-weight: 500;
}

/* ================================
   EMPTY STATES
   ================================ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

/* ================================
   PHOTO GRID
   ================================ */

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}

.photo-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.primary-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background-color: var(--mud-palette-primary);
    color: white;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
}

/* ================================
   RESPONSIVE ADJUSTMENTS
   ================================ */

@media (max-width: 1024px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-field.full-width {
        grid-column: 1;
    }
}

@media (max-width: 768px) {
    .product-edit-layout {
        margin: -16px;
    }

    .sidebar-nav {
        display: none;
    }

    .main-content {
        padding: 16px;
        height: calc(100vh - 121px);
    }

    .content-card {
        padding: 16px;
    }

    .product-title {
        font-size: 1rem;
    }

    .product-header {
        padding: 12px 16px;
    }

    .product-footer {
        padding: 12px 16px;
    }

    .checkbox-group {
        flex-direction: column;
        gap: 8px;
    }
}

/* ================================
   SCROLLBAR STYLING
   ================================ */

.main-content::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar {
    width: 8px;
}

.main-content::-webkit-scrollbar-track,
.sidebar-nav::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.main-content::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.main-content::-webkit-scrollbar-thumb:hover,
.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}