/**
 * Workbench Component Styles
 *
 * This file contains all styles for the Workbench Admin UI including:
 * - Window containers and positioning
 * - Status bar (window header)
 * - Window content area
 * - Resize handles
 * - Control buttons (close, min, max)
 * - Data tables
 */

@layer components.workbench {
    /* ========================================
       Workbench Window
       ======================================== */
    .wbWindow {
        /* Component-scoped variables */
        --wb-surface: #f5f5f5;
        --wb-surface-dark: #e0e0e0;
        --wb-border: #d0d0d0;
        --wb-text: #333;
        --wb-text-muted: #666;
        --wb-header-gradient-start: var(--color-secondary);
        --wb-header-gradient-end: var(--color-secondary-light);
        --wb-header-inactive-start: #888;
        --wb-header-inactive-end: #bbb;
        --wb-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        --wb-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.2);
        --wb-btn-bg: rgba(255, 255, 255, 0.2);
        --wb-btn-bg-hover: rgba(255, 255, 255, 0.3);
        --wb-btn-bg-active: rgba(0, 0, 0, 0.1);
        --wb-table-bg: #fff;
        --wb-row-stripe: rgba(0, 0, 0, 0.02);
        --wb-row-hover: rgba(78, 145, 201, 0.08);
        --wb-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        position: absolute;
        background-color: var(--wb-surface);
        overflow: hidden;
        box-shadow: var(--wb-shadow);
        border-radius: var(--radius-md);
        border: 1px solid var(--wb-border);
        transition: box-shadow var(--transition-normal);
    }

    .wbWindow:hover {
        box-shadow: var(--wb-shadow-hover);
    }

    /* ========================================
       Window Status Bar (Header)
       ======================================== */
    .wbWindow > .wbStatusBar {
        position: absolute;
        block-size: 36px;
        inset-inline-end: 0;
        inset-inline-start: 0;
        inset-block-start: 0;
        background: linear-gradient(135deg, var(--wb-header-inactive-start) 0%, var(--wb-header-inactive-end) 100%);
        color: var(--color-text-bright);
        margin: 0;
        padding: 0;
        user-select: none;
        border-start-start-radius: var(--radius-md);
        border-start-end-radius: var(--radius-md);
    }

    .wbWindow > .wbStatusBar > label {
        position: relative;
        inset-block-start: 10px;
        inset-inline-start: var(--space-3);
        font-weight: var(--font-weight-normal);
        text-shadow: var(--wb-text-shadow);
    }

    .wbWindow.active > .wbStatusBar {
        background: linear-gradient(135deg, var(--wb-header-gradient-start) 0%, var(--wb-header-gradient-end) 100%);
    }

    .wbWindow.active > .wbStatusBar label {
        font-weight: var(--font-weight-bold);
    }

    /* ========================================
       Window Content Area
       ======================================== */
    .wbWindow > .wbArea {
        position: absolute;
        inset-block-start: 36px;
        inset-block-end: 0;
        inset-inline-start: 0;
        inset-inline-end: 0;
        margin: 0;
        padding: 0;
        background-color: var(--wb-surface);
        border-block-start: 1px solid var(--wb-border);
    }

    /* ========================================
       Window Resize Handle
       ======================================== */
    .wbWindow > .wbDrag {
        position: absolute;
        inset-inline-end: 0;
        inset-block-end: 0;
        block-size: 16px;
        inline-size: 16px;
        background-image: url(/img/workbench/drag_wnd.svg);
        background-size: 16px 16px;
        user-select: none;
        cursor: nwse-resize;
        opacity: 0.4;
        transition: opacity var(--transition-fast);
    }

    .wbWindow > .wbDrag:hover {
        opacity: 0.8;
    }

    /* ========================================
       Window Control Buttons
       ======================================== */
    .wbWindow > .wbStatusBar > .wbBtn {
        float: right;
        position: relative;
        background-color: var(--wb-btn-bg);
        cursor: pointer;
        inline-size: 24px;
        block-size: 24px;
        margin-block-start: 6px;
        margin-inline-end: var(--space-2);
        color: var(--color-text-bright);
        text-align: center;
        border-radius: var(--radius-sm);
        border: none;
        transition: background-color var(--transition-fast);
    }

    .wbWindow > .wbStatusBar > .wbBtn:hover {
        background-color: var(--wb-btn-bg-hover);
    }

    .wbWindow > .wbStatusBar > .wbBtn:active {
        background-color: var(--wb-btn-bg-active);
    }

    .wbWindow > .wbStatusBar > .wbBtn:focus-visible {
        outline: 2px solid var(--color-text-bright);
        outline-offset: 2px;
    }

    .wbSkeleton {
        display: none;
    }

    /* Button Icons */
    .wbBtnClose::before {
        content: "";
        background-image: url(/img/workbench/icon_close.svg);
        background-size: 18px 18px;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        inset: 0;
        filter: brightness(10);
    }

    .wbBtnMin::before {
        content: "";
        background-image: url(/img/workbench/icon_min.svg);
        background-size: 18px 18px;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        inset: 0;
        filter: brightness(10);
    }

    .wbBtnMax::before {
        content: "";
        background-image: url(/img/workbench/icon_max.svg);
        background-size: 18px 18px;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        inset: 0;
        filter: brightness(10);
    }

    .wbTitleText {
        display: inline-block;
        position: relative;
        inset-block-start: 8px;
        inset-inline-start: var(--space-3);
        font-size: var(--text-sm);
    }

    .wbWindow > .wbStatusBar > .wbBtn.disabled::before {
        opacity: 0.3;
    }

    .wbWindow.maximized > .wbStatusBar > .wbBtnMax::before {
        background-image: url(/img/workbench/icon_restore.svg);
    }

    /* ========================================
       Workbench Table
       ======================================== */
    .wbTableWrapper {
        padding: 0;
        margin: 0;
        position: absolute;
        overflow: auto;
        inset: var(--space-1);
        background-color: var(--wb-surface-dark);
        border-radius: var(--radius-sm);
    }

    table.wbTable {
        text-align: start;
        position: relative;
        border-collapse: collapse;
        font-size: var(--text-sm);
        background-color: var(--wb-table-bg);
        color: var(--wb-text);
        inline-size: 100%;
    }

    table.wbTable a {
        color: var(--color-primary);
        transition: color var(--transition-fast);
    }

    table.wbTable a:hover {
        color: var(--color-primary-dark);
    }

    /* Table Header */
    .wbTable th {
        position: sticky;
        inset-block-start: 0;
        padding: 0;
        margin: 0;
        z-index: 1;
    }

    .wbTable thead th div {
        text-align: center;
        block-size: 28px;
        margin: 0;
        background-color: var(--wb-surface);
        border-block-end: 1px solid var(--wb-border);
        color: var(--wb-text);
        text-overflow: ellipsis;
        overflow: hidden;
        font-weight: var(--font-weight-bold);
        padding: var(--space-2) var(--space-2) 0;
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Table Body */
    .wbTable tbody td {
        border-block-end: 1px solid var(--wb-border);
        block-size: 36px;
        padding-inline: var(--space-2);
    }

    .wbTable tbody tr:nth-child(2n+1) td {
        background-color: var(--wb-row-stripe);
    }

    .wbTable tbody tr:hover td {
        background-color: var(--wb-row-hover);
    }

    /* Table Sorting */
    .wbTable th div {
        cursor: pointer;
        transition: background-color var(--transition-fast);
    }

    .wbTable th div:hover {
        background-color: var(--wb-surface-dark);
    }

    .wbTable th div.ordered {
        color: var(--color-primary);
        font-weight: var(--font-weight-bold);
    }

    .wbTable th div.ordered::after {
        content: " ↓";
    }

    .wbTable th div.ordered.desc::after {
        content: " ↑";
    }
}