/* Järjekord — stiilid (index, jagatud vaade, tahvlivaade) */

/* ==========================================
   TOKENID
   ========================================== */
:root {
    --jk-accent: #3273dc;
    --jk-accent-hover: #2861c0;
    --jk-accent-text: #ffffff;
    --jk-accent-soft: rgba(50, 115, 220, 0.08);
    /* Tahvlivaate fondisuurused (JS muudab setProperty'ga) */
    --fs-title: 2rem;
    --fs-number: 1.4rem;
    --fs-name: 1.2rem;
    --item-padding: 0.6rem 1rem;
    --item-gap: 0.4rem;
    --num-width: 45px;
}
[data-theme="dark"] {
    --jk-accent: #7da7ea;
    --jk-accent-hover: #94b7ee;
    --jk-accent-text: #16233a;
    --jk-accent-soft: rgba(125, 167, 234, 0.12);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --jk-accent: #7da7ea;
        --jk-accent-hover: #94b7ee;
        --jk-accent-text: #16233a;
        --jk-accent-soft: rgba(125, 167, 234, 0.12);
    }
}

/* ==========================================
   PRIMAARNE CTA
   ========================================== */
.button.jk-btn-primary {
    background-color: var(--jk-accent);
    border-color: transparent;
    color: var(--jk-accent-text);
    font-weight: 600;
    border-radius: 8px;
}
.button.jk-btn-primary:hover,
.button.jk-btn-primary:focus {
    background-color: var(--jk-accent-hover);
    border-color: transparent;
    color: var(--jk-accent-text);
}
.button.jk-btn-primary:focus-visible {
    outline: 3px solid var(--jk-accent);
    outline-offset: 2px;
}

/* ==========================================
   JÄRJEKORRA KIRJED
   ========================================== */
.ordered-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 8px;
    border-left: 4px solid var(--jk-accent);
    animation: jkSlideIn 250ms cubic-bezier(0, 0, 0.2, 1);
    animation-fill-mode: backwards;
}
.item-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--jk-accent);
    min-width: 50px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.item-name {
    font-size: 1.1rem;
    flex: 1;
}
/* Lohistatavad kirjed (ainult koostaja vaates) */
.ordered-item[draggable="true"] {
    cursor: grab;
    user-select: none;
    transition: background 150ms, box-shadow 150ms;
}
@media (hover: hover) {
    .ordered-item[draggable="true"]:hover {
        background: var(--bg-hover, #e8e8e8);
    }
}
.ordered-item:focus-visible {
    outline: 3px solid var(--jk-accent);
    outline-offset: 2px;
}
.ordered-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}
.ordered-item.drag-over {
    border-top: 3px solid var(--jk-accent);
    margin-top: -3px;
}
.drag-handle {
    color: var(--text-muted, #999);
    margin-right: 8px;
    cursor: grab;
}
@keyframes jkSlideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ==========================================
   JAGAMISPLOKK JA TÜHI OLEK
   ========================================== */
.notification.jk-share-note {
    background: var(--jk-accent-soft);
    border: 1px solid var(--jk-accent);
    border-radius: 10px;
    color: var(--text-primary, inherit);
}
.jk-empty {
    text-align: center;
    padding: 24px 16px;
    color: var(--text-muted, #6b6b6b);
}
.jk-empty .icon {
    color: var(--text-muted, #6b6b6b);
    opacity: 0.6;
}

/* Tabeli tegevusnuppude puuteala */
#myQueuesContainer td .button.is-small {
    min-width: 2.5rem;
    min-height: 2.25rem;
}
#myQueuesContainer td .button + .button {
    margin-left: 4px;
}

@media screen and (max-width: 768px) {
    .section {
        padding: 1.5rem 0.75rem;
    }
}

/* ==========================================
   TAHVLIVAADE (view.php?fullscreen)
   ========================================== */
body.jk-fs {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #1a1a2e;
    color: #e4e4e7;
    padding: 1.5rem 2rem;
}
.jk-fs .fullscreen-header {
    width: 100%;
    max-width: 1200px;
    text-align: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
}
.jk-fs .fullscreen-title {
    font-size: var(--fs-title);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #f4f4f5;
    margin-bottom: 0;
}
.jk-fs .fullscreen-list {
    width: 100%;
    max-width: 1200px;
    flex: 1;
}
.jk-fs .fullscreen-list.cols-2 {
    columns: 2;
    column-gap: 1.5rem;
}
.jk-fs .fullscreen-list.cols-3 {
    columns: 3;
    column-gap: 1rem;
}
.jk-fs .fullscreen-item {
    display: flex;
    align-items: center;
    padding: var(--item-padding);
    margin-bottom: var(--item-gap);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    border-left: 4px solid var(--jk-accent);
    animation: jkSlideIn 250ms cubic-bezier(0, 0, 0.2, 1) both;
    break-inside: avoid;
}
.jk-fs .fullscreen-item .item-number {
    font-size: var(--fs-number);
    min-width: var(--num-width);
    flex-shrink: 0;
}
.jk-fs .fullscreen-item .item-name {
    font-size: var(--fs-name);
}
.jk-fs .fullscreen-controls {
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.4rem;
    z-index: 100;
}
/* Hover-hajumine ainult hiirega seadmetel — puutel jäävad nupud nähtavaks */
@media (hover: hover) {
    .jk-fs .fullscreen-controls {
        opacity: 0.2;
        transition: opacity 250ms;
    }
    .jk-fs .fullscreen-controls:hover,
    .jk-fs .fullscreen-controls:focus-within {
        opacity: 1;
    }
}
.jk-fs .fullscreen-controls .button {
    background: rgba(255, 255, 255, 0.15);
    color: #e4e4e7;
    border: none;
}
.jk-fs .fullscreen-controls .button:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}
.jk-fs .fullscreen-controls .button:focus-visible {
    outline: 3px solid var(--jk-accent);
    outline-offset: 2px;
}
.jk-fs .fullscreen-controls .button.is-active {
    background: var(--jk-accent);
    color: var(--jk-accent-text);
}
.jk-fs .ctrl-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    align-self: center;
}
@media screen and (max-width: 768px) {
    body.jk-fs { padding: 1rem; }
    .jk-fs .fullscreen-title { font-size: 1.3rem; }
    .jk-fs .fullscreen-list.cols-2,
    .jk-fs .fullscreen-list.cols-3 { columns: 1; }
}

/* ==========================================
   LIGIPÄÄSETAVUS
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    .ordered-item,
    .jk-fs .fullscreen-item {
        animation: none;
    }
    .jk-fs .fullscreen-controls {
        opacity: 1;
        transition: none;
    }
}