/**
 * Fluent 2 Design System for Kadry
 * Based on Microsoft Fluent 2 Design Language
 * https://fluent2.microsoft.design/
 */

/* ============================================
   Design Tokens
   ============================================ */

:root {
    /* Brand Colors */
    --fluent-brand-10: #061724;
    --fluent-brand-20: #082338;
    --fluent-brand-30: #0a2e4a;
    --fluent-brand-40: #0c3b5e;
    --fluent-brand-50: #0e4775;
    --fluent-brand-60: #0f548c;
    --fluent-brand-70: #115ea3;
    --fluent-brand-80: #0f6cbd;
    --fluent-brand-90: #2886de;
    --fluent-brand-100: #479ef5;
    --fluent-brand-110: #62abf5;
    --fluent-brand-120: #77b7f7;
    --fluent-brand-130: #96c6fa;
    --fluent-brand-140: #b4d6fa;
    --fluent-brand-150: #cfe4fa;
    --fluent-brand-160: #ebf3fc;

    /* Neutral Colors */
    --fluent-neutral-2: #fafafa;
    --fluent-neutral-4: #f5f5f5;
    --fluent-neutral-6: #f0f0f0;
    --fluent-neutral-8: #ebebeb;
    --fluent-neutral-10: #e6e6e6;
    --fluent-neutral-12: #e1e1e1;
    --fluent-neutral-14: #dcdcdc;
    --fluent-neutral-16: #d7d7d7;
    --fluent-neutral-20: #cccccc;
    --fluent-neutral-24: #c2c2c2;
    --fluent-neutral-30: #b3b3b3;
    --fluent-neutral-40: #999999;
    --fluent-neutral-50: #808080;
    --fluent-neutral-60: #666666;
    --fluent-neutral-70: #4d4d4d;
    --fluent-neutral-80: #333333;
    --fluent-neutral-90: #1a1a1a;
    --fluent-neutral-100: #000000;

    /* Semantic Colors */
    --fluent-success-primary: #107c10;
    --fluent-success-background: #dff6dd;
    --fluent-success-foreground: #0e700e;

    --fluent-warning-primary: #ffb900;
    --fluent-warning-background: #fff4ce;
    --fluent-warning-foreground: #835c00;

    --fluent-error-primary: #d13438;
    --fluent-error-background: #fde7e9;
    --fluent-error-foreground: #a4262c;

    --fluent-info-primary: #0078d4;
    --fluent-info-background: #deecf9;
    --fluent-info-foreground: #004578;

    /* Background Colors */
    --fluent-background-1: #ffffff;
    --fluent-background-2: #fafafa;
    --fluent-background-3: #f5f5f5;
    --fluent-background-4: #f0f0f0;
    --fluent-background-5: #ebebeb;
    --fluent-background-subtle: #fafafa;
    --fluent-background-canvas: #f5f5f5;

    /* Foreground Colors */
    --fluent-foreground-1: #242424;
    --fluent-foreground-2: #424242;
    --fluent-foreground-3: #616161;
    --fluent-foreground-disabled: #bdbdbd;

    /* Stroke Colors */
    --fluent-stroke-1: #d1d1d1;
    --fluent-stroke-2: #e0e0e0;
    --fluent-stroke-accessible: #616161;
    --fluent-stroke-focus: #000000;
    --fluent-stroke-focus-outer: #ffffff;

    /* Typography */
    --fluent-font-family: 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
    --fluent-font-family-mono: 'Cascadia Code', 'Consolas', 'Monaco', monospace;

    /* Font Sizes */
    --fluent-font-size-100: 10px;
    --fluent-font-size-200: 12px;
    --fluent-font-size-300: 14px;
    --fluent-font-size-400: 16px;
    --fluent-font-size-500: 20px;
    --fluent-font-size-600: 24px;
    --fluent-font-size-700: 28px;
    --fluent-font-size-800: 32px;
    --fluent-font-size-900: 40px;
    --fluent-font-size-1000: 68px;

    /* Font Weights */
    --fluent-font-weight-regular: 400;
    --fluent-font-weight-medium: 500;
    --fluent-font-weight-semibold: 600;
    --fluent-font-weight-bold: 700;

    /* Line Heights */
    --fluent-line-height-100: 14px;
    --fluent-line-height-200: 16px;
    --fluent-line-height-300: 20px;
    --fluent-line-height-400: 22px;
    --fluent-line-height-500: 28px;
    --fluent-line-height-600: 32px;
    --fluent-line-height-700: 36px;
    --fluent-line-height-800: 40px;
    --fluent-line-height-900: 52px;
    --fluent-line-height-1000: 92px;

    /* Spacing (4px base) */
    --fluent-spacing-none: 0;
    --fluent-spacing-xxs: 2px;
    --fluent-spacing-xs: 4px;
    --fluent-spacing-s: 8px;
    --fluent-spacing-m: 12px;
    --fluent-spacing-l: 16px;
    --fluent-spacing-xl: 20px;
    --fluent-spacing-xxl: 24px;
    --fluent-spacing-xxxl: 32px;

    /* Border Radius */
    --fluent-radius-none: 0;
    --fluent-radius-small: 4px;
    --fluent-radius-medium: 8px;
    --fluent-radius-large: 12px;
    --fluent-radius-xlarge: 16px;
    --fluent-radius-circular: 9999px;

    /* Shadows (Elevation) */
    --fluent-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
    --fluent-shadow-4: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
    --fluent-shadow-8: 0 4px 8px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
    --fluent-shadow-16: 0 8px 16px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
    --fluent-shadow-28: 0 14px 28px rgba(0, 0, 0, 0.14), 0 0 8px rgba(0, 0, 0, 0.12);
    --fluent-shadow-64: 0 32px 64px rgba(0, 0, 0, 0.14), 0 0 8px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --fluent-duration-ultra-fast: 50ms;
    --fluent-duration-faster: 100ms;
    --fluent-duration-fast: 150ms;
    --fluent-duration-normal: 200ms;
    --fluent-duration-slow: 300ms;
    --fluent-duration-slower: 400ms;
    --fluent-duration-ultra-slow: 500ms;

    --fluent-easing-ease: cubic-bezier(0.33, 0, 0.67, 1);
    --fluent-easing-ease-in: cubic-bezier(0.55, 0.55, 0, 1);
    --fluent-easing-ease-out: cubic-bezier(0.33, 0, 0, 1);
    --fluent-easing-ease-in-out: cubic-bezier(0.85, 0, 0.15, 1);
}

/* ============================================
   Base Styles
   ============================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--fluent-font-family);
    font-size: var(--fluent-font-size-300);
    line-height: var(--fluent-line-height-300);
    color: var(--fluent-foreground-1);
    background-color: var(--fluent-background-canvas);
    margin: 0;
    padding: 0;
}

/* ============================================
   Typography
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fluent-font-family);
    font-weight: var(--fluent-font-weight-semibold);
    color: var(--fluent-foreground-1);
    margin-top: 0;
    margin-bottom: var(--fluent-spacing-m);
}

.fluent-display {
    font-size: var(--fluent-font-size-900);
    line-height: var(--fluent-line-height-900);
    font-weight: var(--fluent-font-weight-semibold);
}

.fluent-title-large {
    font-size: var(--fluent-font-size-700);
    line-height: var(--fluent-line-height-700);
    font-weight: var(--fluent-font-weight-semibold);
}

h1, .fluent-title {
    font-size: var(--fluent-font-size-600);
    line-height: var(--fluent-line-height-600);
    font-weight: var(--fluent-font-weight-semibold);
}

h2, .fluent-subtitle {
    font-size: var(--fluent-font-size-500);
    line-height: var(--fluent-line-height-500);
    font-weight: var(--fluent-font-weight-semibold);
}

h3, .fluent-body-large {
    font-size: var(--fluent-font-size-400);
    line-height: var(--fluent-line-height-400);
    font-weight: var(--fluent-font-weight-semibold);
}

.fluent-body, p {
    font-size: var(--fluent-font-size-300);
    line-height: var(--fluent-line-height-300);
    font-weight: var(--fluent-font-weight-regular);
}

.fluent-body-small {
    font-size: var(--fluent-font-size-200);
    line-height: var(--fluent-line-height-200);
    font-weight: var(--fluent-font-weight-regular);
}

.fluent-caption {
    font-size: var(--fluent-font-size-200);
    line-height: var(--fluent-line-height-200);
    font-weight: var(--fluent-font-weight-regular);
    color: var(--fluent-foreground-2);
}

.fluent-caption-strong {
    font-size: var(--fluent-font-size-200);
    line-height: var(--fluent-line-height-200);
    font-weight: var(--fluent-font-weight-semibold);
    color: var(--fluent-foreground-2);
}

.fluent-overline {
    font-size: var(--fluent-font-size-100);
    line-height: var(--fluent-line-height-100);
    font-weight: var(--fluent-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fluent-foreground-3);
}

/* ============================================
   Navigation Bar
   ============================================ */

.fluent-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    background-color: var(--fluent-background-1);
    border-bottom: 1px solid var(--fluent-stroke-2);
    display: flex;
    align-items: center;
    padding: 0 var(--fluent-spacing-l);
    z-index: 1000;
    box-shadow: var(--fluent-shadow-2);
}

.fluent-navbar-brand {
    font-size: var(--fluent-font-size-400);
    font-weight: var(--fluent-font-weight-semibold);
    color: var(--fluent-foreground-1);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--fluent-spacing-s);
}

.fluent-navbar-brand:hover {
    color: var(--fluent-brand-80);
}

.fluent-navbar-brand-icon {
    width: 24px;
    height: 24px;
    background-color: var(--fluent-brand-80);
    border-radius: var(--fluent-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: var(--fluent-font-weight-bold);
}

.fluent-navbar-nav {
    display: flex;
    align-items: center;
    gap: var(--fluent-spacing-xs);
    margin-left: auto;
}

.fluent-navbar-text {
    font-size: var(--fluent-font-size-300);
    color: var(--fluent-foreground-2);
    padding: var(--fluent-spacing-s) var(--fluent-spacing-m);
}

.fluent-navbar-divider {
    width: 1px;
    height: 24px;
    background-color: var(--fluent-stroke-2);
    margin: 0 var(--fluent-spacing-s);
}

/* ============================================
   Buttons
   ============================================ */

.fluent-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fluent-spacing-s);
    font-family: var(--fluent-font-family);
    font-size: var(--fluent-font-size-300);
    font-weight: var(--fluent-font-weight-semibold);
    line-height: 1;
    padding: var(--fluent-spacing-s) var(--fluent-spacing-m);
    min-height: 32px;
    border: 1px solid transparent;
    border-radius: var(--fluent-radius-medium);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease);
    white-space: nowrap;
}

.fluent-btn:focus-visible {
    outline: 2px solid var(--fluent-stroke-focus);
    outline-offset: 2px;
}

/* Primary Button */
.fluent-btn-primary {
    background-color: var(--fluent-brand-80);
    color: white;
    border-color: var(--fluent-brand-80);
}

.fluent-btn-primary:hover {
    background-color: var(--fluent-brand-70);
    border-color: var(--fluent-brand-70);
    color: white;
}

.fluent-btn-primary:active {
    background-color: var(--fluent-brand-60);
    border-color: var(--fluent-brand-60);
}

/* Secondary Button (Outline) */
.fluent-btn-secondary {
    background-color: transparent;
    color: var(--fluent-foreground-1);
    border-color: var(--fluent-stroke-1);
}

.fluent-btn-secondary:hover {
    background-color: var(--fluent-background-3);
    color: var(--fluent-foreground-1);
}

.fluent-btn-secondary:active {
    background-color: var(--fluent-background-4);
}

/* Subtle Button (Ghost) */
.fluent-btn-subtle {
    background-color: transparent;
    color: var(--fluent-foreground-1);
    border-color: transparent;
}

.fluent-btn-subtle:hover {
    background-color: var(--fluent-background-3);
}

.fluent-btn-subtle:active {
    background-color: var(--fluent-background-4);
}

/* Danger Button */
.fluent-btn-danger {
    background-color: var(--fluent-error-primary);
    color: white;
    border-color: var(--fluent-error-primary);
}

.fluent-btn-danger:hover {
    background-color: #b52d31;
    border-color: #b52d31;
    color: white;
}

.fluent-btn-danger:active {
    background-color: #9a262a;
    border-color: #9a262a;
}

/* Success Button */
.fluent-btn-success {
    background-color: var(--fluent-success-primary);
    color: white;
    border-color: var(--fluent-success-primary);
}

.fluent-btn-success:hover {
    background-color: #0e6b0e;
    border-color: #0e6b0e;
    color: white;
}

/* Button Sizes */
.fluent-btn-small {
    font-size: var(--fluent-font-size-200);
    padding: var(--fluent-spacing-xs) var(--fluent-spacing-s);
    min-height: 24px;
}

.fluent-btn-large {
    font-size: var(--fluent-font-size-400);
    padding: var(--fluent-spacing-m) var(--fluent-spacing-xl);
    min-height: 40px;
}

/* Icon-only Button */
.fluent-btn-icon {
    padding: var(--fluent-spacing-s);
    min-width: 32px;
}

.fluent-btn-icon.fluent-btn-small {
    padding: var(--fluent-spacing-xs);
    min-width: 24px;
}

/* ============================================
   Cards
   ============================================ */

.fluent-card {
    background-color: var(--fluent-background-1);
    border: 1px solid var(--fluent-stroke-2);
    border-radius: var(--fluent-radius-medium);
    box-shadow: var(--fluent-shadow-2);
    overflow: hidden;
}

.fluent-card-header {
    padding: var(--fluent-spacing-l);
    border-bottom: 1px solid var(--fluent-stroke-2);
    background-color: var(--fluent-background-subtle);
}

.fluent-card-header-title {
    font-size: var(--fluent-font-size-400);
    font-weight: var(--fluent-font-weight-semibold);
    color: var(--fluent-foreground-1);
    margin: 0;
}

.fluent-card-header-subtitle {
    font-size: var(--fluent-font-size-200);
    color: var(--fluent-foreground-3);
    margin: var(--fluent-spacing-xs) 0 0 0;
}

.fluent-card-body {
    padding: var(--fluent-spacing-l);
}

.fluent-card-footer {
    padding: var(--fluent-spacing-m) var(--fluent-spacing-l);
    border-top: 1px solid var(--fluent-stroke-2);
    background-color: var(--fluent-background-subtle);
    display: flex;
    gap: var(--fluent-spacing-s);
    justify-content: flex-end;
}

/* Clickable Card */
.fluent-card-clickable {
    cursor: pointer;
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease);
}

.fluent-card-clickable:hover {
    box-shadow: var(--fluent-shadow-8);
    border-color: var(--fluent-stroke-1);
}

.fluent-card-clickable:active {
    box-shadow: var(--fluent-shadow-4);
}

/* ============================================
   Form Controls
   ============================================ */

.fluent-form-group {
    margin-bottom: var(--fluent-spacing-l);
}

.fluent-label {
    display: block;
    font-size: var(--fluent-font-size-300);
    font-weight: var(--fluent-font-weight-semibold);
    color: var(--fluent-foreground-1);
    margin-bottom: var(--fluent-spacing-xs);
}

.fluent-label-required::after {
    content: ' *';
    color: var(--fluent-error-primary);
}

.fluent-input {
    display: block;
    width: 100%;
    font-family: var(--fluent-font-family);
    font-size: var(--fluent-font-size-300);
    line-height: var(--fluent-line-height-300);
    color: var(--fluent-foreground-1);
    background-color: var(--fluent-background-1);
    border: 1px solid var(--fluent-stroke-1);
    border-radius: var(--fluent-radius-medium);
    padding: var(--fluent-spacing-s) var(--fluent-spacing-m);
    min-height: 32px;
    transition: border-color var(--fluent-duration-fast) var(--fluent-easing-ease),
    box-shadow var(--fluent-duration-fast) var(--fluent-easing-ease);
}

.fluent-input::placeholder {
    color: var(--fluent-foreground-disabled);
}

.fluent-input:hover {
    border-color: var(--fluent-stroke-accessible);
}

.fluent-input:focus {
    outline: none;
    border-color: var(--fluent-brand-80);
    box-shadow: 0 0 0 1px var(--fluent-brand-80);
}

.fluent-input:disabled {
    background-color: var(--fluent-background-4);
    color: var(--fluent-foreground-disabled);
    cursor: not-allowed;
}

/* Input with validation */
.fluent-input-error {
    border-color: var(--fluent-error-primary);
}

.fluent-input-error:focus {
    box-shadow: 0 0 0 1px var(--fluent-error-primary);
}

.fluent-input-success {
    border-color: var(--fluent-success-primary);
}

/* Helper text */
.fluent-helper-text {
    font-size: var(--fluent-font-size-200);
    color: var(--fluent-foreground-3);
    margin-top: var(--fluent-spacing-xs);
}

.fluent-error-text {
    font-size: var(--fluent-font-size-200);
    color: var(--fluent-error-primary);
    margin-top: var(--fluent-spacing-xs);
}

/* Textarea */
.fluent-textarea {
    min-height: 80px;
    resize: vertical;
}

/* Select */
.fluent-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23616161' d='M2.5 4.5L6 8l3.5-3.5h-7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* Checkbox & Radio */
.fluent-checkbox,
.fluent-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--fluent-spacing-s);
    cursor: pointer;
    font-size: var(--fluent-font-size-300);
    color: var(--fluent-foreground-1);
}

.fluent-checkbox input,
.fluent-radio input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--fluent-brand-80);
}

/* ============================================
   Tables
   ============================================ */

.fluent-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fluent-font-size-300);
}

.fluent-table th {
    background-color: var(--fluent-background-subtle);
    font-weight: var(--fluent-font-weight-semibold);
    text-align: left;
    padding: var(--fluent-spacing-m) var(--fluent-spacing-l);
    border-bottom: 1px solid var(--fluent-stroke-1);
    color: var(--fluent-foreground-2);
}

.fluent-table td {
    padding: var(--fluent-spacing-m) var(--fluent-spacing-l);
    border-bottom: 1px solid var(--fluent-stroke-2);
    color: var(--fluent-foreground-1);
}

.fluent-table tbody tr:hover {
    background-color: var(--fluent-background-subtle);
}

.fluent-table tbody tr:last-child td {
    border-bottom: none;
}

/* Compact table */
.fluent-table-compact th,
.fluent-table-compact td {
    padding: var(--fluent-spacing-s) var(--fluent-spacing-m);
}

/* ============================================
   Alerts / Message Bars
   ============================================ */

.fluent-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--fluent-spacing-m);
    padding: var(--fluent-spacing-m) var(--fluent-spacing-l);
    border-radius: var(--fluent-radius-medium);
    font-size: var(--fluent-font-size-300);
    border: 1px solid transparent;
}

.fluent-alert-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fluent-alert-content {
    flex: 1;
}

.fluent-alert-title {
    font-weight: var(--fluent-font-weight-semibold);
    margin-bottom: var(--fluent-spacing-xxs);
}

.fluent-alert-info {
    background-color: var(--fluent-info-background);
    border-color: var(--fluent-info-primary);
    color: var(--fluent-info-foreground);
}

.fluent-alert-success {
    background-color: var(--fluent-success-background);
    border-color: var(--fluent-success-primary);
    color: var(--fluent-success-foreground);
}

.fluent-alert-warning {
    background-color: var(--fluent-warning-background);
    border-color: var(--fluent-warning-primary);
    color: var(--fluent-warning-foreground);
}

.fluent-alert-error {
    background-color: var(--fluent-error-background);
    border-color: var(--fluent-error-primary);
    color: var(--fluent-error-foreground);
}

/* ============================================
   Badges / Tags
   ============================================ */

.fluent-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fluent-font-size-200);
    font-weight: var(--fluent-font-weight-semibold);
    line-height: 1;
    padding: var(--fluent-spacing-xxs) var(--fluent-spacing-s);
    border-radius: var(--fluent-radius-small);
    white-space: nowrap;
}

.fluent-badge-filled {
    background-color: var(--fluent-brand-80);
    color: white;
}

.fluent-badge-subtle {
    background-color: var(--fluent-brand-160);
    color: var(--fluent-brand-80);
}

.fluent-badge-outline {
    background-color: transparent;
    border: 1px solid var(--fluent-brand-80);
    color: var(--fluent-brand-80);
}

.fluent-badge-success {
    background-color: var(--fluent-success-background);
    color: var(--fluent-success-foreground);
}

.fluent-badge-warning {
    background-color: var(--fluent-warning-background);
    color: var(--fluent-warning-foreground);
}

.fluent-badge-error {
    background-color: var(--fluent-error-background);
    color: var(--fluent-error-foreground);
}

.fluent-badge-neutral {
    background-color: var(--fluent-neutral-10);
    color: var(--fluent-foreground-2);
}

/* ============================================
   Divider
   ============================================ */

.fluent-divider {
    height: 1px;
    background-color: var(--fluent-stroke-2);
    border: none;
    margin: var(--fluent-spacing-l) 0;
}

.fluent-divider-subtle {
    background-color: var(--fluent-neutral-6);
}

/* ============================================
   Page Layout
   ============================================ */

.fluent-page {
    padding-top: 48px; /* Navbar height */
    min-height: 100vh;
}

.fluent-page-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--fluent-spacing-xxl);
}

.fluent-page-header {
    background-color: var(--fluent-background-1);
    border-bottom: 1px solid var(--fluent-stroke-2);
    padding: var(--fluent-spacing-xl) 0;
}

.fluent-page-header-title {
    font-size: var(--fluent-font-size-600);
    font-weight: var(--fluent-font-weight-semibold);
    color: var(--fluent-foreground-1);
    margin: 0;
}

.fluent-page-header-subtitle {
    font-size: var(--fluent-font-size-300);
    color: var(--fluent-foreground-3);
    margin: var(--fluent-spacing-xs) 0 0 0;
}

.fluent-page-content {
    padding: var(--fluent-spacing-xl) 0;
}

.fluent-page-content-narrow {
    max-width: 640px;
}

.fluent-page-content-wide {
    max-width: 1600px;
}

/* ============================================
   Toolbar / Action Bar
   ============================================ */

.fluent-toolbar {
    display: flex;
    align-items: center;
    gap: var(--fluent-spacing-s);
    padding: var(--fluent-spacing-m) 0;
}

.fluent-toolbar-group {
    display: flex;
    align-items: center;
    gap: var(--fluent-spacing-xs);
}

.fluent-toolbar-spacer {
    flex: 1;
}

/* ============================================
   Empty State
   ============================================ */

.fluent-empty-state {
    text-align: center;
    padding: var(--fluent-spacing-xxxl);
    color: var(--fluent-foreground-3);
}

.fluent-empty-state-icon {
    font-size: 48px;
    margin-bottom: var(--fluent-spacing-l);
    opacity: 0.5;
}

.fluent-empty-state-title {
    font-size: var(--fluent-font-size-500);
    font-weight: var(--fluent-font-weight-semibold);
    color: var(--fluent-foreground-2);
    margin-bottom: var(--fluent-spacing-s);
}

.fluent-empty-state-description {
    font-size: var(--fluent-font-size-300);
    max-width: 400px;
    margin: 0 auto var(--fluent-spacing-l);
}

/* ============================================
   Avatar
   ============================================ */

.fluent-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--fluent-radius-circular);
    background-color: var(--fluent-brand-80);
    color: white;
    font-size: var(--fluent-font-size-200);
    font-weight: var(--fluent-font-weight-semibold);
    overflow: hidden;
}

.fluent-avatar-small {
    width: 24px;
    height: 24px;
    font-size: var(--fluent-font-size-100);
}

.fluent-avatar-large {
    width: 48px;
    height: 48px;
    font-size: var(--fluent-font-size-400);
}

.fluent-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   Spinner / Loading
   ============================================ */

.fluent-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid var(--fluent-neutral-20);
    border-top-color: var(--fluent-brand-80);
    border-radius: 50%;
    animation: fluent-spin 0.8s linear infinite;
}

.fluent-spinner-small {
    width: 16px;
    height: 16px;
    border-width: 1.5px;
}

.fluent-spinner-large {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

@keyframes fluent-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   Skeleton Loading
   ============================================ */

.fluent-skeleton {
    background: linear-gradient(
            90deg,
            var(--fluent-neutral-8) 25%,
            var(--fluent-neutral-4) 50%,
            var(--fluent-neutral-8) 75%
    );
    background-size: 200% 100%;
    animation: fluent-skeleton 1.5s infinite;
    border-radius: var(--fluent-radius-small);
}

.fluent-skeleton-text {
    height: 14px;
    margin-bottom: var(--fluent-spacing-s);
}

.fluent-skeleton-title {
    height: 24px;
    width: 60%;
    margin-bottom: var(--fluent-spacing-m);
}

.fluent-skeleton-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

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

/* ============================================
   Tooltips
   ============================================ */

[data-fluent-tooltip] {
    position: relative;
}

[data-fluent-tooltip]::after {
    content: attr(data-fluent-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    padding: var(--fluent-spacing-xs) var(--fluent-spacing-s);
    background-color: var(--fluent-neutral-90);
    color: white;
    font-size: var(--fluent-font-size-200);
    white-space: nowrap;
    border-radius: var(--fluent-radius-small);
    opacity: 0;
    visibility: hidden;
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease);
    pointer-events: none;
    z-index: 1001;
}

[data-fluent-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   Utility Classes
   ============================================ */

/* Text colors */
.fluent-text-primary { color: var(--fluent-foreground-1); }
.fluent-text-secondary { color: var(--fluent-foreground-2); }
.fluent-text-muted { color: var(--fluent-foreground-3); }
.fluent-text-brand { color: var(--fluent-brand-80); }
.fluent-text-success { color: var(--fluent-success-primary); }
.fluent-text-warning { color: var(--fluent-warning-foreground); }
.fluent-text-error { color: var(--fluent-error-primary); }

/* Background colors */
.fluent-bg-1 { background-color: var(--fluent-background-1); }
.fluent-bg-2 { background-color: var(--fluent-background-2); }
.fluent-bg-3 { background-color: var(--fluent-background-3); }
.fluent-bg-subtle { background-color: var(--fluent-background-subtle); }
.fluent-bg-canvas { background-color: var(--fluent-background-canvas); }
.fluent-bg-brand { background-color: var(--fluent-brand-80); }

/* Spacing */
.fluent-mt-s { margin-top: var(--fluent-spacing-s); }
.fluent-mt-m { margin-top: var(--fluent-spacing-m); }
.fluent-mt-l { margin-top: var(--fluent-spacing-l); }
.fluent-mt-xl { margin-top: var(--fluent-spacing-xl); }
.fluent-mb-s { margin-bottom: var(--fluent-spacing-s); }
.fluent-mb-m { margin-bottom: var(--fluent-spacing-m); }
.fluent-mb-l { margin-bottom: var(--fluent-spacing-l); }
.fluent-mb-xl { margin-bottom: var(--fluent-spacing-xl); }

.fluent-p-s { padding: var(--fluent-spacing-s); }
.fluent-p-m { padding: var(--fluent-spacing-m); }
.fluent-p-l { padding: var(--fluent-spacing-l); }
.fluent-p-xl { padding: var(--fluent-spacing-xl); }

/* Flex utilities */
.fluent-flex { display: flex; }
.fluent-flex-col { flex-direction: column; }
.fluent-items-center { align-items: center; }
.fluent-justify-between { justify-content: space-between; }
.fluent-justify-center { justify-content: center; }
.fluent-gap-s { gap: var(--fluent-spacing-s); }
.fluent-gap-m { gap: var(--fluent-spacing-m); }
.fluent-gap-l { gap: var(--fluent-spacing-l); }

/* Text utilities */
.fluent-text-center { text-align: center; }
.fluent-text-right { text-align: right; }
.fluent-font-semibold { font-weight: var(--fluent-font-weight-semibold); }
.fluent-font-bold { font-weight: var(--fluent-font-weight-bold); }

/* Border utilities */
.fluent-border { border: 1px solid var(--fluent-stroke-2); }
.fluent-border-top { border-top: 1px solid var(--fluent-stroke-2); }
.fluent-border-bottom { border-bottom: 1px solid var(--fluent-stroke-2); }
.fluent-rounded { border-radius: var(--fluent-radius-medium); }
.fluent-rounded-lg { border-radius: var(--fluent-radius-large); }

/* Shadow utilities */
.fluent-shadow-sm { box-shadow: var(--fluent-shadow-2); }
.fluent-shadow { box-shadow: var(--fluent-shadow-4); }
.fluent-shadow-lg { box-shadow: var(--fluent-shadow-8); }

/* Width utilities */
.fluent-w-full { width: 100%; }
.fluent-max-w-sm { max-width: 400px; }
.fluent-max-w-md { max-width: 600px; }
.fluent-max-w-lg { max-width: 800px; }

/* ============================================
   Dark Mode
   ============================================ */

[data-theme="dark"] {
    --fluent-background-1: #1f1f1f;
    --fluent-background-2: #272727;
    --fluent-background-3: #2e2e2e;
    --fluent-background-4: #363636;
    --fluent-background-5: #3d3d3d;
    --fluent-background-subtle: #272727;
    --fluent-background-canvas: #141414;

    --fluent-foreground-1: #ffffff;
    --fluent-foreground-2: #d6d6d6;
    --fluent-foreground-3: #adadad;
    --fluent-foreground-disabled: #5c5c5c;

    --fluent-stroke-1: #454545;
    --fluent-stroke-2: #383838;
    --fluent-stroke-accessible: #8a8a8a;

    --fluent-brand-80: #479ef5;
    --fluent-brand-70: #62abf5;
    --fluent-brand-60: #77b7f7;

    --fluent-success-background: #052505;
    --fluent-success-foreground: #54b054;

    --fluent-warning-background: #4a3600;
    --fluent-warning-foreground: #fce100;

    --fluent-error-background: #3b0509;
    --fluent-error-foreground: #ff99a4;

    --fluent-info-background: #002b4e;
    --fluent-info-foreground: #62abf5;
}

[data-theme="dark"] .fluent-navbar {
    background-color: #1f1f1f;
    border-bottom-color: #383838;
}

[data-theme="dark"] .fluent-card {
    background-color: #1f1f1f;
    border-color: #383838;
}

[data-theme="dark"] .fluent-input {
    background-color: #1f1f1f;
    border-color: #454545;
    color: #ffffff;
}

[data-theme="dark"] .fluent-input:focus {
    border-color: var(--fluent-brand-80);
    box-shadow: 0 0 0 1px var(--fluent-brand-80);
}

[data-theme="dark"] .fluent-table th {
    background-color: #272727;
    border-bottom-color: #454545;
}

[data-theme="dark"] .fluent-table td {
    border-bottom-color: #383838;
}

[data-theme="dark"] .fluent-table tbody tr:hover {
    background-color: #272727;
}

[data-theme="dark"] .fluent-btn-secondary {
    background-color: transparent;
    border-color: #454545;
    color: #ffffff;
}

[data-theme="dark"] .fluent-btn-secondary:hover {
    background-color: #2e2e2e;
}

[data-theme="dark"] .fluent-btn-subtle:hover {
    background-color: #2e2e2e;
}

/* Theme toggle button with text */
.fluent-theme-toggle-btn {
    background-color: var(--fluent-background-3);
    border: 1px solid var(--fluent-stroke-1);
    padding: 6px 12px;
    cursor: pointer;
    color: var(--fluent-foreground-1);
    border-radius: var(--fluent-radius-medium);
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease);
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--fluent-font-family);
    font-size: var(--fluent-font-size-200);
    font-weight: var(--fluent-font-weight-medium);
    height: 32px;
}

.fluent-theme-toggle-btn:hover {
    background-color: var(--fluent-background-subtle);
    border-color: var(--fluent-stroke-accessible);
}

/* Theme icons - controlled via JS */
.theme-icon-sun,
.theme-icon-moon {
    font-size: 14px;
}

.theme-icon-sun { color: #f59e0b; }
.theme-icon-moon { color: #6366f1; }

/* Theme labels - controlled via JS */
.theme-label {
    display: none;
}

/* Legacy theme toggle (icon only) */
.fluent-theme-toggle {
    background: none;
    border: none;
    padding: var(--fluent-spacing-s);
    cursor: pointer;
    color: var(--fluent-foreground-2);
    border-radius: var(--fluent-radius-small);
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.fluent-theme-toggle:hover {
    background-color: var(--fluent-background-3);
    color: var(--fluent-foreground-1);
}

/* ============================================
   Select2 Fluent Styling (Global)
   ============================================ */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--fluent-background-1);
    border: 1px solid var(--fluent-stroke-1);
    border-radius: var(--fluent-radius-medium);
    min-height: 36px;
    padding: 4px 8px;
    font-family: var(--fluent-font-family);
    font-size: var(--fluent-font-size-300);
}

.select2-container--default .select2-selection--single:focus-within,
.select2-container--default .select2-selection--multiple:focus-within,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--fluent-brand-80);
    box-shadow: 0 0 0 1px var(--fluent-brand-80);
    outline: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--fluent-foreground-1);
    line-height: 26px;
    padding-left: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 5px !important;
    right: 10px !important;
    height: 34px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--fluent-brand-80) !important;
    border: none !important;
    color: white !important;
    border-radius: var(--fluent-radius-medium) !important;
    padding: 5px 12px 5px 8px !important;
    font-size: 13px !important;
    margin: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    line-height: 1.3 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255,255,255,0.8) !important;
    margin-right: 6px !important;
    margin-left: 0 !important;
    font-size: 14px !important;
    font-weight: normal !important;
    cursor: pointer !important;
    border: none !important;
    background: rgba(255,255,255,0.2) !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    order: -1 !important;
    flex-shrink: 0 !important;
    transition: background var(--fluent-duration-fast) var(--fluent-easing-ease) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: white !important;
    background: rgba(255,255,255,0.35) !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin-top: 4px;
    font-family: var(--fluent-font-family);
    font-size: var(--fluent-font-size-300);
}

.select2-dropdown {
    border: 1px solid var(--fluent-stroke-1);
    border-radius: var(--fluent-radius-medium);
    box-shadow: var(--fluent-shadow-16);
    background-color: var(--fluent-background-1);
    font-family: var(--fluent-font-family);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--fluent-stroke-1);
    border-radius: var(--fluent-radius-small);
    padding: 8px 12px;
    font-family: var(--fluent-font-family);
    font-size: var(--fluent-font-size-300);
    background-color: var(--fluent-background-1);
    color: var(--fluent-foreground-1);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--fluent-brand-80);
    outline: none;
}

.select2-container--default .select2-results__option {
    padding: 10px 14px;
    font-size: var(--fluent-font-size-300);
    color: var(--fluent-foreground-1);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--fluent-brand-80);
    color: white;
}

.select2-container--default .select2-results__option--selected {
    background-color: var(--fluent-background-subtle);
    display: none;
}

.select2-container--default .select2-results__option[aria-disabled=true] {
    color: var(--fluent-foreground-disabled);
}

/* Select2 Dark Mode */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--fluent-background-1);
    border-color: var(--fluent-stroke-1);
    color: var(--fluent-foreground-1);
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--fluent-foreground-1);
}

[data-theme="dark"] .select2-dropdown {
    background-color: var(--fluent-background-2);
    border-color: var(--fluent-stroke-1);
}

[data-theme="dark"] .select2-container--default .select2-results__option {
    color: var(--fluent-foreground-1);
}

[data-theme="dark"] .select2-container--default .select2-results__option--selected {
    background-color: var(--fluent-background-3);
}

[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--fluent-background-1);
    border-color: var(--fluent-stroke-1);
    color: var(--fluent-foreground-1);
}

/* ============================================
   Tabulator Fluent Styling (Global)
   ============================================ */

.tabulator {
    border: 1px solid var(--fluent-stroke-2) !important;
    border-radius: var(--fluent-radius-medium) !important;
    font-family: var(--fluent-font-family) !important;
    font-size: var(--fluent-font-size-300) !important;
    background-color: var(--fluent-background-1) !important;
}

.tabulator .tabulator-header {
    background-color: var(--fluent-background-subtle) !important;
    border-bottom: 1px solid var(--fluent-stroke-1) !important;
}

.tabulator .tabulator-header .tabulator-col {
    background-color: transparent !important;
    border-right: 1px solid var(--fluent-stroke-2) !important;
}

.tabulator .tabulator-header .tabulator-col:last-child {
    border-right: none !important;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    padding: 12px 16px !important;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    font-weight: var(--fluent-font-weight-semibold) !important;
    color: var(--fluent-foreground-1) !important;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
    background-color: var(--fluent-background-3) !important;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
    border-bottom: 1px solid var(--fluent-stroke-2) !important;
    background-color: var(--fluent-background-1) !important;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover {
    background-color: var(--fluent-background-subtle) !important;
}

.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
    padding: 12px 16px !important;
    border-right: none !important;
    color: var(--fluent-foreground-1) !important;
}

.tabulator .tabulator-tableholder .tabulator-placeholder {
    color: var(--fluent-foreground-3) !important;
}

/* Tabulator Pagination - Fluent Style */
.tabulator .tabulator-footer {
    background-color: var(--fluent-background-subtle) !important;
    border-top: 1px solid var(--fluent-stroke-2) !important;
    padding: 12px 16px !important;
}

.tabulator .tabulator-footer .tabulator-paginator {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.tabulator .tabulator-footer .tabulator-page-size {
    background-color: var(--fluent-background-1) !important;
    border: 1px solid var(--fluent-stroke-1) !important;
    border-radius: var(--fluent-radius-small) !important;
    padding: 6px 12px !important;
    font-family: var(--fluent-font-family) !important;
    font-size: var(--fluent-font-size-200) !important;
    color: var(--fluent-foreground-1) !important;
    cursor: pointer !important;
}

.tabulator .tabulator-footer .tabulator-page-size:focus {
    border-color: var(--fluent-brand-80) !important;
    outline: none !important;
}

.tabulator .tabulator-footer .tabulator-page {
    background-color: var(--fluent-background-1) !important;
    border: 1px solid var(--fluent-stroke-1) !important;
    border-radius: var(--fluent-radius-small) !important;
    color: var(--fluent-foreground-1) !important;
    padding: 6px 12px !important;
    margin: 0 2px !important;
    font-family: var(--fluent-font-family) !important;
    font-size: var(--fluent-font-size-200) !important;
    cursor: pointer !important;
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease) !important;
}

.tabulator .tabulator-footer .tabulator-page:hover:not(.active):not(:disabled) {
    background-color: var(--fluent-background-3) !important;
    border-color: var(--fluent-stroke-1) !important;
}

.tabulator .tabulator-footer .tabulator-page.active {
    background-color: var(--fluent-brand-80) !important;
    border-color: var(--fluent-brand-80) !important;
    color: white !important;
    font-weight: var(--fluent-font-weight-semibold) !important;
}

.tabulator .tabulator-footer .tabulator-page:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.tabulator .tabulator-footer .tabulator-pages {
    display: flex !important;
    gap: 4px !important;
}

.tabulator .tabulator-footer .tabulator-page-counter {
    color: var(--fluent-foreground-2);
    font-size: var(--fluent-font-size-200);
    margin-left: auto;
}

.tabulator .tabulator-footer label {
    display: flex;
    align-items: center;
    gap: var(--fluent-spacing-xs);
    color: var(--fluent-foreground-2);
    font-size: var(--fluent-font-size-200);
}

/* Tabulator Dark Mode */
[data-theme="dark"] .tabulator {
    background-color: var(--fluent-background-1);
    border-color: var(--fluent-stroke-1);
}

[data-theme="dark"] .tabulator .tabulator-header {
    background-color: var(--fluent-background-2);
    border-bottom-color: var(--fluent-stroke-1);
}

[data-theme="dark"] .tabulator .tabulator-header .tabulator-col {
    border-right-color: var(--fluent-stroke-2);
}

[data-theme="dark"] .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
    background-color: var(--fluent-background-3);
}

[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
    background-color: var(--fluent-background-1);
    border-bottom-color: var(--fluent-stroke-2);
}

[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover {
    background-color: var(--fluent-background-2);
}

[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
    color: var(--fluent-foreground-1);
}

[data-theme="dark"] .tabulator .tabulator-footer {
    background-color: var(--fluent-background-2);
    border-top-color: var(--fluent-stroke-1);
}

[data-theme="dark"] .tabulator .tabulator-footer .tabulator-page-size {
    background-color: var(--fluent-background-1);
    border-color: var(--fluent-stroke-1);
    color: var(--fluent-foreground-1);
}

[data-theme="dark"] .tabulator .tabulator-footer .tabulator-page {
    background-color: var(--fluent-background-1);
    border-color: var(--fluent-stroke-1);
    color: var(--fluent-foreground-1);
}

[data-theme="dark"] .tabulator .tabulator-footer .tabulator-page:hover:not(.active):not(:disabled) {
    background-color: var(--fluent-background-3);
}

[data-theme="dark"] .tabulator .tabulator-footer .tabulator-page.active {
    background-color: var(--fluent-brand-80);
    border-color: var(--fluent-brand-80);
    color: white;
}

/* ============================================
   Filters - Fluent Style
   ============================================ */

.fluent-filters {
    background-color: var(--fluent-background-1);
    border: 1px solid var(--fluent-stroke-2);
    border-radius: var(--fluent-radius-medium);
    padding: var(--fluent-spacing-l);
    margin-bottom: var(--fluent-spacing-l);
}

.fluent-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fluent-spacing-m);
    align-items: flex-end;
}

.fluent-filter-group {
    flex: 1;
    min-width: 200px;
}

.fluent-filter-label {
    display: block;
    font-size: var(--fluent-font-size-200);
    font-weight: var(--fluent-font-weight-semibold);
    color: var(--fluent-foreground-2);
    margin-bottom: var(--fluent-spacing-xs);
}

.fluent-filter-actions {
    display: flex;
    gap: var(--fluent-spacing-s);
    align-items: stretch;
}

/* Wyrównanie przycisków do wysokości inputów */
.fluent-filter-actions .fluent-btn {
    height: 36px;
    display: inline-flex;
    align-items: center;
}

.fluent-filters-collapsed {
    padding: var(--fluent-spacing-m);
}

.fluent-filters-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--fluent-foreground-1);
    font-size: var(--fluent-font-size-300);
    font-weight: var(--fluent-font-weight-semibold);
}

/* ============================================
   Native Select Styling (Fluent)
   ============================================ */

.fluent-input,
select.fluent-input,
input.fluent-input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--fluent-stroke-1);
    border-radius: var(--fluent-radius-medium);
    font-size: var(--fluent-font-size-300);
    font-family: var(--fluent-font-family);
    background-color: var(--fluent-background-1);
    color: var(--fluent-foreground-1);
    transition: border-color var(--fluent-duration-fast) var(--fluent-easing-ease),
    box-shadow var(--fluent-duration-fast) var(--fluent-easing-ease);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

select.fluent-input {
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23616161' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    cursor: pointer;
}

.fluent-input:hover {
    border-color: var(--fluent-stroke-accessible);
}

.fluent-input:focus {
    outline: none;
    border-color: var(--fluent-brand-80);
    box-shadow: 0 0 0 1px var(--fluent-brand-80);
}

select.fluent-input option:checked,
select.fluent-input option:hover,
select.fluent-input option:focus,
select.fluent-input option:active,
select.fluent-input option[selected],
.fluent-input option:checked,
.fluent-input option:hover,
.fluent-input option:focus,
.fluent-input option:active,
.fluent-input option[selected],
/* Symfony forms i inne selecty */
.form-group select option:checked,
.form-group select option:hover,
.fluent-card select option:checked,
.fluent-card select option:hover,
select option:checked,
select option:hover {
    background-color: var(--fluent-brand-80) !important;
    color: white !important;
}

/* Dark mode dla natywnych selectów */
[data-theme="dark"] .fluent-input,
[data-theme="dark"] select.fluent-input,
[data-theme="dark"] input.fluent-input {
    background-color: var(--fluent-background-1);
    border-color: var(--fluent-stroke-1);
    color: var(--fluent-foreground-1);
}

[data-theme="dark"] select.fluent-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23adadad' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
}

[data-theme="dark"] select.fluent-input option {
    background-color: var(--fluent-background-2);
    color: var(--fluent-foreground-1);
}

[data-theme="dark"] select.fluent-input option:checked {
    background-color: var(--fluent-brand-80);
    color: white;
}

/* Back link */
.fluent-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--fluent-spacing-xs);
    color: var(--fluent-foreground-2);
    font-size: var(--fluent-font-size-300);
    text-decoration: none;
    margin-bottom: var(--fluent-spacing-l);
    transition: color var(--fluent-duration-fast) var(--fluent-easing-ease);
}

.fluent-back-link:hover {
    color: var(--fluent-foreground-1);
    text-decoration: none;
}

/* Page title with back */
.fluent-page-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--fluent-spacing-l);
}

.fluent-page-title {
    font-size: var(--fluent-font-size-600);
    font-weight: var(--fluent-font-weight-semibold);
    color: var(--fluent-foreground-1);
    margin: 0;
}

/* ============================================
   Page Header with Icon
   ============================================ */

.page-header-content {
    display: flex;
    align-items: center;
    margin-bottom: var(--fluent-spacing-l);
}

.page-header-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--fluent-radius-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    margin-right: var(--fluent-spacing-m);
    flex-shrink: 0;
}

.page-header-text h1 {
    margin: 0;
    font-size: var(--fluent-font-size-600);
    font-weight: var(--fluent-font-weight-semibold);
    color: var(--fluent-foreground-1);
}

.page-header-text p {
    margin: 4px 0 0 0;
    color: var(--fluent-foreground-3);
    font-size: var(--fluent-font-size-200);
}

/* ============================================
   Fluent Stats Row
   ============================================ */

.fluent-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--fluent-spacing-m);
    margin-bottom: var(--fluent-spacing-l);
}

.fluent-stat-card {
    background-color: var(--fluent-background-1);
    border: 1px solid var(--fluent-stroke-2);
    border-radius: var(--fluent-radius-medium);
    padding: var(--fluent-spacing-m);
    display: flex;
    align-items: center;
    gap: var(--fluent-spacing-m);
}

.fluent-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--fluent-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.fluent-stat-content {
    flex: 1;
    min-width: 0;
}

.fluent-stat-value {
    font-size: var(--fluent-font-size-500);
    font-weight: var(--fluent-font-weight-semibold);
    color: var(--fluent-foreground-1);
    line-height: 1.2;
}

.fluent-stat-label {
    font-size: var(--fluent-font-size-200);
    color: var(--fluent-foreground-3);
    margin-top: 2px;
}

/* ============================================
   Fluent Form Components
   ============================================ */

.fluent-form-group {
    margin-bottom: var(--fluent-spacing-m);
}

.fluent-form-label {
    display: block;
    font-size: var(--fluent-font-size-200);
    font-weight: var(--fluent-font-weight-semibold);
    color: var(--fluent-foreground-2);
    margin-bottom: var(--fluent-spacing-xs);
}

.fluent-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fluent-spacing-m);
    align-items: flex-end;
}

.fluent-form-row .fluent-form-group {
    flex: 1;
    min-width: 150px;
    margin-bottom: 0;
}

.fluent-form-actions {
    display: flex;
    gap: var(--fluent-spacing-s);
    align-items: stretch;
}

.fluent-form-actions .fluent-btn {
    height: 36px;
}

/* Fluent Input (date, text, etc) */
.fluent-input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--fluent-stroke-1);
    border-radius: var(--fluent-radius-medium);
    font-size: var(--fluent-font-size-300);
    font-family: var(--fluent-font-family);
    background-color: var(--fluent-background-1);
    color: var(--fluent-foreground-1);
    transition: border-color var(--fluent-duration-fast) var(--fluent-easing-ease),
    box-shadow var(--fluent-duration-fast) var(--fluent-easing-ease);
}

.fluent-input:hover {
    border-color: var(--fluent-stroke-accessible);
}

.fluent-input:focus {
    outline: none;
    border-color: var(--fluent-brand-80);
    box-shadow: 0 0 0 1px var(--fluent-brand-80);
}

/* Input type date specific styling */
input[type="date"].fluent-input {
    padding-right: 8px;
}

input[type="date"].fluent-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
}

input[type="date"].fluent-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Quick Actions */
.fluent-quick-actions {
    display: flex;
    gap: var(--fluent-spacing-m);
    margin-top: var(--fluent-spacing-s);
}

.fluent-link-btn {
    background: none;
    border: none;
    padding: var(--fluent-spacing-xs) var(--fluent-spacing-s);
    font-size: var(--fluent-font-size-200);
    font-family: var(--fluent-font-family);
    color: var(--fluent-brand-80);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--fluent-spacing-xs);
    border-radius: var(--fluent-radius-small);
    transition: background-color var(--fluent-duration-fast) var(--fluent-easing-ease);
}

.fluent-link-btn:hover {
    background-color: var(--fluent-background-subtle);
    text-decoration: underline;
}

/* Card Title with Icon */
.fluent-card-title {
    display: flex;
    align-items: center;
    gap: var(--fluent-spacing-s);
    font-weight: var(--fluent-font-weight-semibold);
    color: var(--fluent-foreground-1);
}

.fluent-card-title i {
    color: var(--fluent-foreground-3);
}

/* ============================================
   Dark Mode for New Components
   ============================================ */

[data-theme="dark"] .fluent-stat-card {
    background-color: var(--fluent-background-1);
    border-color: var(--fluent-stroke-1);
}

[data-theme="dark"] .fluent-input {
    background-color: var(--fluent-background-1);
    border-color: var(--fluent-stroke-1);
    color: var(--fluent-foreground-1);
}

[data-theme="dark"] .fluent-link-btn {
    color: var(--fluent-brand-100);
}

[data-theme="dark"] .fluent-link-btn:hover {
    background-color: var(--fluent-background-2);
}

[data-theme="dark"] input[type="date"].fluent-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* ============================================
   Select2 - Fluent Design Integration
   ============================================ */

/* Base Select2 Container */
.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--fluent-background-1);
    border: 1px solid var(--fluent-stroke-1);
    border-radius: var(--fluent-radius-medium);
    min-height: 42px;
    padding: 10px 14px;
    font-family: var(--fluent-font-family);
    font-size: var(--fluent-font-size-300);
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover {
    border-color: var(--fluent-stroke-accessible);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-selection--open .select2-selection--multiple {
    border-color: var(--fluent-brand-80);
    box-shadow: 0 0 0 1px var(--fluent-brand-80);
    outline: none;
}

/* Single Selection */
.select2-container--default .select2-selection--single {
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--fluent-foreground-1);
    line-height: 40px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-right: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    right: 10px;
    top: 0;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--fluent-foreground-3) transparent transparent transparent;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--fluent-foreground-3);
}

/* Multiple Selection */
.select2-container--default .select2-selection--multiple {
    padding: 6px 10px !important;
    min-height: 42px !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
    gap: 4px !important;
    position: relative !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: contents !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered > li {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    float: none !important;
    max-width: calc(100% - 40px) !important;
}

/* Pole wyszukiwania - flex grow aby wypełnić pozostałą przestrzeń */
.select2-container--default .select2-selection--multiple .select2-search--inline {
    flex: 1 1 60px !important;
    min-width: 60px !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    order: 999 !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--fluent-font-family) !important;
    font-size: var(--fluent-font-size-300) !important;
    line-height: 26px !important;
    height: 26px !important;
    width: 100% !important;
    min-width: 60px !important;
    text-align: left !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
    color: var(--fluent-foreground-3);
    opacity: 1;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--fluent-background-3) !important;
    color: var(--fluent-foreground-1) !important;
    border: 1px solid var(--fluent-stroke-1) !important;
    border-radius: var(--fluent-radius-small) !important;
    padding: 4px 24px 4px 10px !important;
    margin: 0 !important;
    font-size: var(--fluent-font-size-200) !important;
    line-height: 18px !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    max-width: calc(100% - 30px) !important;
    float: none !important;
    white-space: nowrap !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--fluent-foreground-3) !important;
    position: absolute !important;
    right: 4px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    border: none !important;
    border-right: none !important;
    background: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0.7;
    cursor: pointer !important;
    line-height: 1 !important;
    border-radius: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--fluent-error-primary) !important;
    opacity: 1;
    background: none !important;
    background-color: transparent !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Clear all button - pozycja na górze, nie wyśrodkowany */
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    position: absolute !important;
    right: 4px !important;
    top: 6px !important;
    color: var(--fluent-foreground-3) !important;
    font-size: 16px !important;
    cursor: pointer !important;
    z-index: 10 !important;
    background: var(--fluent-background-1) !important;
    padding: 0 4px !important;
    line-height: 1 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear:hover {
    color: var(--fluent-error-primary) !important;
}

/* Dodaj padding-right gdy jest przycisk clear */
.select2-container--default .select2-selection--multiple.select2-selection--clearable {
    padding-right: 30px !important;
}

/* Dropdown */
.select2-dropdown {
    background-color: var(--fluent-background-1);
    border: 1px solid var(--fluent-stroke-1);
    border-radius: var(--fluent-radius-medium);
    box-shadow: var(--fluent-shadow-16);
    margin-top: 4px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--fluent-stroke-1);
    border-radius: var(--fluent-radius-small);
    padding: 8px 12px;
    font-family: var(--fluent-font-family);
    font-size: var(--fluent-font-size-300);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--fluent-brand-80);
    outline: none;
}

.select2-container--default .select2-results__option {
    padding: 8px 12px;
    font-size: var(--fluent-font-size-300);
    color: var(--fluent-foreground-1);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--fluent-brand-80);
    color: white;
}


.select2-container--default .select2-results__option[aria-disabled=true] {
    color: var(--fluent-foreground-disabled);
}

/* Clear button (single select) */
.select2-selection__clear {
    color: var(--fluent-foreground-3);
    font-size: 16px;
    margin-right: 8px;
}

.select2-selection__clear:hover {
    color: var(--fluent-error-primary);
}

/* Dark theme support */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--fluent-background-2);
    border-color: var(--fluent-stroke-2);
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--fluent-foreground-1);
}

[data-theme="dark"] .select2-dropdown {
    background-color: var(--fluent-background-2);
    border-color: var(--fluent-stroke-2);
}

[data-theme="dark"] .select2-container--default .select2-results__option {
    color: var(--fluent-foreground-1);
}

[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--fluent-background-3);
    border-color: var(--fluent-stroke-2);
    color: var(--fluent-foreground-1);
}

[data-theme="dark"] .select2-container--default .select2-results__option--selected {
    background-color: var(--fluent-background-4);
}

/* Select2 with fluent-input class compatibility */
.select2-container--default .select2-selection--single.fluent-select2,
.select2-container--default .select2-selection--multiple.fluent-select2 {
    background-color: var(--fluent-background-1);
}