/* ==============================================
   FLUENT HARMONIZATION — Unifies legacy page elements
   with Fluent UI design tokens for a consistent look
   ============================================== */

/* Root Fluent palette mirroring */
:root {
    --fluent-primary: var(--accent-fill-rest, #6366f1);
    --fluent-primary-hover: var(--accent-fill-hover, #818cf8);
    --fluent-primary-active: var(--accent-fill-active, #4f46e5);
    --fluent-foreground: var(--neutral-foreground-rest, #e5e7eb);
    --fluent-foreground-hint: var(--neutral-foreground-hint-rest, rgba(255,255,255,0.65));
    --fluent-layer-1: var(--neutral-layer-1, #1f2230);
    --fluent-layer-2: var(--neutral-layer-2, #252935);
    --fluent-layer-3: var(--neutral-layer-3, #2d3142);
    --fluent-stroke-divider: var(--neutral-stroke-divider-rest, rgba(255,255,255,0.08));
    --fluent-radius: 8px;
    --fluent-radius-lg: 12px;
    --fluent-shadow-card: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    --fluent-shadow-elevated: 0 10px 32px rgba(0,0,0,0.28);
    --fluent-transition: 0.18s cubic-bezier(0.1, 0.9, 0.2, 1);
}

/* Page header legacy (header with icon) — unify with Fluent */
.main > header,
.content > header,
header.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: var(--fluent-layer-1);
    border: 1px solid var(--fluent-stroke-divider);
    border-radius: var(--fluent-radius-lg);
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 600;
    box-shadow: var(--fluent-shadow-card);
}

/* Legacy buttons harmonization */
button.add-main,
button.primary-btn,
button[class*="-primary"]:not(fluent-button) {
    background: var(--fluent-primary);
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: var(--fluent-radius);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--fluent-transition), transform var(--fluent-transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

button.add-main:hover,
button.primary-btn:hover {
    background: var(--fluent-primary-hover);
    transform: translateY(-1px);
}

button.add-main:active {
    background: var(--fluent-primary-active);
    transform: translateY(0);
}

/* Legacy search bars */
.lang-search-bar,
.search-bar,
.jrl-search-bar {
    background: var(--fluent-layer-2);
    border: 1px solid var(--fluent-stroke-divider);
    border-radius: var(--fluent-radius);
    padding: 8px 12px;
    transition: border-color var(--fluent-transition), box-shadow var(--fluent-transition);
}

.lang-search-bar:focus-within,
.search-bar:focus-within {
    border-color: var(--fluent-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
}

/* Legacy breadcrumbs unification */
.jrl-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--fluent-layer-2);
    border: 1px solid var(--fluent-stroke-divider);
    border-radius: var(--fluent-radius);
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--fluent-foreground-hint);
}

.jrl-breadcrumb a {
    color: var(--fluent-primary);
    text-decoration: none;
    transition: color var(--fluent-transition);
}

.jrl-breadcrumb a:hover {
    color: var(--fluent-primary-hover);
    text-decoration: underline;
}

.jrl-breadcrumb .current {
    color: var(--fluent-foreground);
    font-weight: 500;
}

.jrl-breadcrumb .sep {
    opacity: 0.4;
    font-size: 10px;
}

/* Tables harmonization */
table.data-table,
table.jrl-table,
.content table:not([class]) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--fluent-layer-1);
    border: 1px solid var(--fluent-stroke-divider);
    border-radius: var(--fluent-radius-lg);
    overflow: hidden;
    box-shadow: var(--fluent-shadow-card);
}

table.data-table th,
table.jrl-table th {
    background: var(--fluent-layer-2);
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: var(--fluent-foreground);
    border-bottom: 1px solid var(--fluent-stroke-divider);
}

table.data-table td,
table.jrl-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--fluent-stroke-divider);
    font-size: 14px;
}

table.data-table tr:last-child td,
table.jrl-table tr:last-child td {
    border-bottom: none;
}

table.data-table tr:hover td,
table.jrl-table tr:hover td {
    background: rgba(99,102,241,0.05);
}

/* Legacy cards */
.card,
.jrl-card {
    background: var(--fluent-layer-1);
    border: 1px solid var(--fluent-stroke-divider);
    border-radius: var(--fluent-radius-lg);
    padding: 20px;
    box-shadow: var(--fluent-shadow-card);
    transition: transform var(--fluent-transition), box-shadow var(--fluent-transition);
}

.card:hover,
.jrl-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--fluent-shadow-elevated);
}

/* Legacy modals */
.modal-overlay,
.jrl-modal-overlay {
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.modal,
.modal-content,
.jrl-modal {
    background: var(--fluent-layer-2);
    border: 1px solid var(--fluent-stroke-divider);
    border-radius: var(--fluent-radius-lg);
    box-shadow: var(--fluent-shadow-elevated);
}

/* Focus ring harmonization across all interactive elements */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: 2px solid var(--fluent-primary);
    outline-offset: 2px;
    border-radius: var(--fluent-radius);
}

/* Content spacing */
.content {
    padding: 4px 0;
}

/* Loader overrides in legacy to feel more Fluent-ish */
.loader-skeleton {
    background: linear-gradient(
        90deg,
        var(--fluent-layer-1) 0%,
        var(--fluent-layer-3) 50%,
        var(--fluent-layer-1) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
    border-radius: var(--fluent-radius);
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Scrollbar refinement */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.18);
}