/* static/css/admin/dashboard.css */

/* ── Distraction-free focus mode ── */
body.composer-focus .sidebar,
body.composer-focus #calendar-widget,
body.composer-focus .xl\:col-span-4 {
    display: none !important;
}

body.composer-focus #composer-wrap {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow-y: auto;
    border-radius: 0;
    border: none;
    background: #fff;
    max-width: none;
    margin: 0;
}

body.composer-focus .xl\:col-span-8 {
    grid-column: span 12 / span 12;
}

/* ── Drag-and-drop active state ── */
#drop-zone.drag-over {
    border-color: var(--color-primary-400, #39a5ea);
    background-color: oklch(from var(--color-primary-50, #ecf6fd) l c h / 0.5);
}

/* ── Calendar grid cells ── */
#calendar-grid a {
    min-height: 80px;
}

/* ── Keyboard shortcut hints ── */
kbd {
    display: inline-block;
    padding: 0 4px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-family: monospace;
    font-size: 10px;
    background: #f9fafb;
    color: #6b7280;
}

/* ── Draft card hover actions ── */
.group:hover .hidden.group-hover\:flex {
    display: flex;
}

/* ── Alpine cloak ── */
[x-cloak] {
    display: none !important;
}

/* ── Tom Select integration in composer ── */
/* TS оборачивает <select> в .ts-wrapper. Высота control ~ tailwind py-2 (36px). */
#composer-form .ts-wrapper {
    position: relative;
}
#composer-form .ts-control {
    padding: 6px 10px;
    border-radius: 0.5rem;
    min-height: 38px;
    background-color: #fff;
}
/* Dropdown (rendered into <body> via dropdownParent option).
   ОБЯЗАТЕЛЬНО непрозрачный background — иначе текст под dropdown'ом просвечивает. */
.ts-dropdown {
    z-index: 10000 !important;
    background-color: #fff !important;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
    overflow: hidden;
}
.ts-dropdown .ts-dropdown-content {
    background-color: #fff;
}
.ts-dropdown .option {
    background-color: #fff;
    padding: 8px 12px;
    color: #111827;
}
.ts-dropdown .option.active,
.ts-dropdown .option:hover {
    background-color: #f3f4f6;
    color: #111827;
}
.ts-dropdown .no-results {
    padding: 8px 12px;
    color: #6b7280;
    background-color: #fff;
}
/* Dark mode override (unfold THEME=light по дефолту, но если будет dark — поддержим). */
.dark .ts-dropdown,
.dark .ts-dropdown .ts-dropdown-content,
.dark .ts-dropdown .option {
    background-color: #1f2937 !important;
    color: #e5e7eb;
}
.dark .ts-dropdown .option.active,
.dark .ts-dropdown .option:hover {
    background-color: #374151 !important;
}