:root {
    /* Palette officielle de l'agence ZDigital */
    --main-color: #293d62;
    --main-dark-color: #323a45;
    --main-medium-color: #405783;
    --main-normal-color: #7a88a2;
    --main-light-color: #e1e4e9;
    --main-ultralight-color: #f4f6f7;
    --grey-light-color: #dfdfdf;
    --grey-ultralight-color: #fafafa;
    --green-color: #40c714;
    --green-dark-color: #2a9308;
    --red-color: #cc2525;

    /* Variables studio mappées sur la charte ZDigital */
    --z-bg: var(--main-ultralight-color);
    --z-sidebar: #ffffff;
    --z-surface: #ffffff;
    --z-card: var(--main-ultralight-color);
    --z-card-hover: var(--main-light-color);
    --z-border: var(--main-light-color);
    --z-accent: var(--main-color);
    --z-accent-hover: var(--main-medium-color);
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--z-bg);
    color: var(--main-dark-color);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow-x: hidden;
}

/* Custom Scrollbar (ZDigital Light Studio style) */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: var(--main-ultralight-color);
}

::-webkit-scrollbar-thumb {
    background: var(--main-light-color);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--main-normal-color);
}

/* Tabular numbers for metrics, file sizes, durations */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Video Card Interactions */
.ziweo-card {
    background: var(--z-surface);
    border: 1px solid var(--z-border);
    border-radius: 9px;
    box-shadow: 0 1px 2px rgba(41, 61, 98, 0.05);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.2s ease,
                box-shadow 0.2s ease,
                background-color 0.2s ease;
}

.ziweo-card:hover {
    transform: translateY(-2px);
    border-color: var(--main-medium-color);
    box-shadow: 0 12px 24px -8px rgba(41, 61, 98, 0.14),
                0 0 0 1px rgba(64, 87, 131, 0.18);
}

.ziweo-card.is-selected {
    border-color: var(--z-accent);
    box-shadow: 0 0 0 2px rgba(41, 61, 98, 0.22);
    background: var(--main-ultralight-color);
}

.ziweo-card .card-checkbox {
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.ziweo-card:hover .card-checkbox,
.ziweo-card.is-selected .card-checkbox {
    opacity: 1;
}

.ziweo-card .play-overlay {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ziweo-card:hover .play-overlay {
    opacity: 1;
}

/* Hover Video Scrub Progress Bar */
.scrub-progress-bar {
    height: 3px;
    background: var(--main-dark-color);
    width: 0%;
    transition: width 0.1s linear;
}

/* Drag and drop zone */
.dropzone-active {
    border-color: var(--z-accent) !important;
    background-color: var(--main-ultralight-color) !important;
}

/* Sidebar nav item active state */
.nav-item {
    transition: all 0.15s ease;
}

.nav-item.active {
    background: var(--main-ultralight-color);
    color: var(--main-color);
    font-weight: 600;
    border-left: 3px solid var(--z-accent);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.nav-item:not(.active):hover {
    background-color: var(--grey-ultralight-color);
    color: var(--main-dark-color);
}

/* Table row hover */
.ziweo-table-row {
    transition: background-color 0.12s ease;
}

.ziweo-table-row:hover {
    background-color: var(--grey-ultralight-color);
}

.ziweo-table-row.is-selected {
    background-color: var(--main-ultralight-color);
}

/* Subtle glass effect (Light mode) */
.glass-header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.glass-modal {
    background: rgba(41, 61, 98, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Custom Checkbox */
input[type="checkbox"].ziweo-check {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--main-normal-color);
    border-radius: 5px;
    background-color: #ffffff;
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(41, 61, 98, 0.06);
}

input[type="checkbox"].ziweo-check:hover {
    border-color: var(--z-accent);
}

input[type="checkbox"].ziweo-check:checked {
    background-color: var(--z-accent);
    border-color: var(--z-accent);
}

input[type="checkbox"].ziweo-check:checked::before {
    content: "";
    width: 9px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}

/* Custom Toggle Switch */
input[type="checkbox"].ziweo-toggle {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 9999px;
    background-color: var(--grey-light-color);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

input[type="checkbox"].ziweo-toggle::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

input[type="checkbox"].ziweo-toggle:checked {
    background-color: var(--z-accent);
}

input[type="checkbox"].ziweo-toggle:checked::before {
    transform: translateX(16px);
}

/* Chosen.js style custom select (aligned with Studio inputs) */
.chosen-container {
    position: relative;
    width: 100%;
    user-select: none;
}

.chosen-single {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 34px;
    padding: 0.5rem 0.75rem;
    background-color: var(--main-ultralight-color);
    border: 1px solid var(--main-light-color);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.chosen-single:hover {
    border-color: var(--grey-light-color);
}

.chosen-container.chosen-open .chosen-single {
    position: relative;
    z-index: 61;
    border-color: var(--z-accent);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #ffffff;
    box-shadow: 0 6px 18px -4px rgba(41, 61, 98, 0.18);
}

.chosen-drop {
    position: fixed;
    z-index: 9999;
    background: #ffffff;
    border: 1px solid var(--z-accent);
    border-top: 0;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    box-shadow: 0 16px 32px -4px rgba(41, 61, 98, 0.24),
                0 6px 12px -2px rgba(41, 61, 98, 0.12);
    overflow: hidden;
}

.chosen-results li.chosen-option {
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
}

.chosen-results li.chosen-option:hover,
.chosen-results li.chosen-option.is-highlighted {
    background-color: var(--z-accent);
    color: #ffffff;
}

.chosen-results li.chosen-option:hover .opt-sub,
.chosen-results li.chosen-option.is-highlighted .opt-sub {
    color: rgba(255, 255, 255, 0.88);
}

.chosen-results li.chosen-option .opt-badge {
    background-color: var(--main-light-color);
    color: var(--main-dark-color);
}

.chosen-results li.chosen-option:hover .opt-badge,
.chosen-results li.chosen-option.is-highlighted .opt-badge {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

button:disabled {
    background-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
}