/*
 * Enhanced Theme CSS
 * -----------------
 * Comprehensive styling combining base enhancements and FluentDataGrid
 */

/* Theme Variables */
:root {
    /* Design System Fundamentals */
    --design-unit: 4;
    --stroke-width: 1;
    --focus-stroke-width: 1;
    --density: 0;
    /* Typography Scale */
    --type-ramp-base-font-size: 14px;
    --type-ramp-base-line-height: 20px;
    --type-ramp-plus-1-font-size: 16px;
    --type-ramp-plus-1-line-height: 22px;
    --type-ramp-plus-4-font-size: 24px;
    --type-ramp-plus-4-line-height: 32px;
    --type-ramp-minus-1-font-size: 12px;
    --type-ramp-minus-1-line-height: 16px;
    /* Colors and Theme */
    --datagrid-hover-color: var(--neutral-layer-2-hover);
    --neutral-foreground-hint: #666666;
}

/* Dark Theme Support */
[data-theme="dark"] {
    --log-critical: #493634;
    --log-error: #493634;
    --log-warning: #3F3A2B;
    --foreground-subtext-rest: #8D8D8D;
    --foreground-subtext-hover: #A1A1A1;
    --foreground-settings-text: #A8A8A8;
    --error-ui-foreground-color: #000000;
    --error-ui-accent-foreground-color: #512bd4;
    --datagrid-hover-color: var(--neutral-layer-3-hover);
}

/* Enhanced Typography */
h1 {
    font-size: var(--type-ramp-plus-4-font-size);
    line-height: var(--type-ramp-plus-4-line-height);
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

/* Layout Enhancements */
.parent-details-container {
    display: grid;
    grid-template-rows: 1fr;
    gap: calc(var(--design-unit) * 2px);
    height: 100%;
    width: 100%;
}

/* Utility Classes */
.ellipsis-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flex-filler {
    flex-grow: 1;
}

.visually-hidden {
    top: 0;
    left: -2px;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
}

/* FluentDataGrid Base */
.fluent-data-grid-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.datagrid-overflow-area {
    height: 100%;
    min-width: 100%;
    overflow: auto;
}

/* FluentDataGrid Table */
.fluent-data-grid {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    height: auto !important;
}

/* FluentDataGrid Headers */
.fluent-data-grid-row[row-type="header"] {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--neutral-layer-2);
}

.column-header {
    padding: calc(var(--design-unit) * 2px);
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    user-select: none;
    white-space: nowrap;
}

    .column-header:hover {
        background-color: var(--neutral-layer-2-hover);
        cursor: pointer;
    }

.header-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* FluentDataGrid Rows */
.fluent-data-grid-row {
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

    .fluent-data-grid-row.hover:not([row-type='header']):hover {
        background-color: var(--datagrid-hover-color);
        cursor: pointer;
    }

    .fluent-data-grid-row > td {
        padding: calc(var(--design-unit) * 2px);
    }

/* FluentDataGrid Content */
.col-long-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 100%;
}

.fluent-data-grid .no-ellipsis {
    text-overflow: unset;
}

td .long-inner-content {
    width: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* FluentDataGrid Actions */
.grid-action-container {
    display: inline-flex;
    column-gap: 4px;
    align-items: center;
}

/* FluentDataGrid Selection */
.selected-row,
.selected-row fluent-button[appearance=lightweight]:not(:hover)::part(control),
.selected-row fluent-anchor[appearance=lightweight]:not(:hover)::part(control) {
    background-color: var(--neutral-fill-secondary-rest);
}

    .selected-row fluent-button[appearance=lightweight]:hover::part(control),
    .selected-row fluent-anchor[appearance=lightweight]:hover::part(control) {
        background-color: var(--neutral-fill-stealth-rest);
    }

    .selected-row .subtext {
        color: var(--neutral-foreground-rest);
    }

/* FluentDataGrid Hover Effects */
.fluent-data-grid-row:not([row-type='header'],[row-type='sticky-header']).hover:hover fluent-anchor[appearance=lightweight]::part(control):not(:hover),
.fluent-data-grid-row:not([row-type='header'],[row-type='sticky-header']).hover:hover fluent-anchor[appearance=stealth]::part(control):not(:hover),
.fluent-data-grid-row:not([row-type='header'],[row-type='sticky-header']).hover:hover fluent-button[appearance=lightweight]::part(control):not(:hover),
.fluent-data-grid-row:not([row-type='header'],[row-type='sticky-header']).hover:hover fluent-button[appearance=stealth]::part(control):not(:hover) {
    background-color: var(--datagrid-hover-color);
}

/* FluentDataGrid States */
.empty-content-cell,
.loading-content-cell {
    padding: calc(var(--design-unit) * 5px);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fluent-data-grid .empty-content-cell,
.fluent-data-grid .loading-content-cell {
    height: auto !important;
}

    .fluent-data-grid .loading-content-cell .stack-horizontal {
        align-items: center !important;
        column-gap: calc(var(--design-unit) * 2px) !important;
    }

/* Enhanced Error States */
.validation-message {
    color: var(--error);
}

/* Enhanced Toolbar */
fluent-toolbar fluent-switch,
fluent-toolbar p {
    margin-inline-end: 15px;
}

fluent-toolbar[orientation=horizontal] {
    width: 100%;
    padding-right: calc(var(--design-unit) * 2px);
}

/* Enhanced Dialog */
fluent-dialog::part(control) {
    background: var(--neutral-layer-floating);
}

fluent-dialog fluent-toolbar {
    background-color: var(--neutral-layer-floating);
}

/* Enhanced Buttons */
.clear-button::part(control) {
    padding: 0 calc((10 + (var(--design-unit) * 2 * var(--density))) * 1px);
}

/* Enhanced Links */
.url-button {
    height: unset;
    font-size: var(--type-ramp-minus-1-font-size);
    line-height: var(--type-ramp-minus-1-line-height);
}

    .url-button::part(control) {
        padding: calc(((var(--design-unit) * 0.5) - var(--stroke-width)) * 1px) calc((var(--design-unit) - var(--stroke-width)) * 1px);
    }

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .hidden-on-mobile {
        visibility: collapse;
    }

    .page-header {
        padding: calc(var(--design-unit) * 1.5px) calc(var(--design-unit) * 2.5px) 0;
        width: fit-content;
    }

    fluent-toolbar[orientation=horizontal].main-toolbar {
        padding-left: calc(var(--design-unit) * 2px);
        padding-right: calc(var(--design-unit) * 2px);
    }

    .fluent-data-grid tr.resource-row > :first-child {
        padding-inline-start: 0;
    }

    .main-grid .fluent-data-grid-row:not([row-type='sticky-header']) td:first-child:not(.expand-col) {
        padding-left: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width) + 5)* 1px);
    }
}

/* Row Click Behavior */
.enable-row-click .fluent-data-grid-row.hover:not([row-type='header'],[row-type='sticky-header'], .empty-content-row, .loading-content-row):hover td {
    cursor: pointer !important;
}

.fluent-data-grid-row.hover:not([row-type='header'],[row-type='sticky-header']):hover td {
    cursor: auto !important;
}