/*
 * MudBlazor Component Overrides
 * Page-specific overrides for MudBlazor components (MudTabs, MudDataGrid, etc.)
 * that CANNOT be scoped via .razor.css because MudBlazor renders its own DOM.
 *
 * Each section documents which page/component it belongs to.
 */

/* ==========================================================================
   Project Details – MudTabs overrides
   Used in: ProjectDetails.razor (Class="project-details-tabs")
   ========================================================================== */

.project-details-tabs {
    box-shadow: none !important;
    background-color: transparent !important;
    background: transparent !important;
}

/* Tab header bar */
.project-details-tabs .mud-tabs-tabbar {
    background-color: transparent !important;
    background: transparent !important;
    border-bottom: 1px solid var(--table-border-color) !important;
    min-height: 40px;
}

.project-details-tabs .mud-tabs-tabbar-inner,
.project-details-tabs .mud-tabs-tabbar-content,
.project-details-tabs .mud-tabs-tabbar-wrapper,
.project-details-tabs .mud-tabs-header {
    background-color: transparent !important;
    background: transparent !important;
}

/* Individual tab buttons */
.project-details-tabs .mud-tab {
    font-family: var(--font-family-body) !important;
    font-size: var(--body-size-md) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: rgba(40, 41, 46, 0.6) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    min-width: auto !important;
    padding: 8px 16px !important;
}

.project-details-tabs .mud-tab.mud-tab-active {
    color: #129895 !important;
}

/* Tab indicator / slider */
.project-details-tabs .mud-tab-slider {
    background: #129895 !important;
}

/* Tab panels container */
.project-details-tabs .mud-tabs-panels {
    background: transparent !important;
    background-color: transparent !important;
}

/* Tab panel content area */
.project-details-tab-panel {
    padding: 24px 0 0 0 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* ==========================================================================
   Company Staff Page
   Now uses shared entral-data-grid, staff-chip-*, staff-actions-* classes.
   No custom overrides needed.
   ========================================================================== */

/* ==========================================================================
   Support Layout – MudLayout / MudAppBar / MudMainContent overrides
   Used in: SupportLayout.razor (Class="support-page", "support-appbar", etc.)
   ========================================================================== */

.support-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f5f7fa;
}

.support-appbar {
    background-color: #28292e !important;
    color: #fff !important;
}

.support-main {
    flex: 1;
    padding: 0;
    padding-top: var(--mud-appbar-height) !important;
}

.footer-heading {
    color: #fff !important;
    margin-bottom: 8px;
}

/* Support footer – MudText / MudLink color overrides on dark background */
.support-footer .mud-typography {
    color: rgba(255, 255, 255, 0.8) !important;
}

.support-footer .mud-link {
    color: rgba(255, 255, 255, 0.7) !important;
}

.support-footer .mud-link:hover {
    color: #fff !important;
}

.support-footer .support-footer-bottom .mud-typography {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Support hero search field – MudTextField internal DOM override */
.support-search-field {
    max-width: 400px;
    width: 100%;
}

.support-search-field .mud-input-outlined {
    background: #fff;
    border-radius: 8px;
}

.support-search-field .mud-input-outlined .mud-input-outlined-border {
    border-color: transparent;
}

.support-search-field .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--color-primary, #129895);
}

.support-search-field .mud-input-adornment-start .mud-icon-root {
    color: var(--text-disabled, rgba(40, 41, 46, 0.4));
}

/* ==========================================================================
   Translations Admin – language cards
   Used in: TranslationsAdmin.razor (Class="language-card")
   ========================================================================== */

.language-card {
    border: 1px solid var(--table-border-color, #e6ebeb);
    border-radius: 8px;
    transition: border-color 0.15s ease;
}

.language-card:hover {
    border-color: var(--color-primary, #129895);
}

.language-card .mud-card-actions {
    border-top: 1px solid var(--table-border-color, #e6ebeb);
    padding: 8px 16px;
}