/* Sein — koondsein */

.sein-container {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* Vähenda Bulma vaikimisi section + container padding'uid — sein vajab kogu laiust veergude jaoks */
section.sein-page {
    padding: 0.5rem 0.5rem !important;
    /* Täida kogu allesjäänud viewport (nav võtab ~3.25rem), et veerud mahuksid
     * sisse ilma leht-tasandil vertikaalse kerimisriba tekitamata */
    min-height: calc(100vh - 3.25rem);
    display: flex;
    flex-direction: column;
}
section.sein-page > .container {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
section.sein-page .sein-header {
    flex: 0 0 auto;
}
.container.is-fluid.sein-container {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

@media (max-width: 768px) {
    section.sein-page {
        padding: 0.4rem 0.4rem !important;
    }
    .container.is-fluid.sein-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.sein-board-card {
    transition: box-shadow 0.15s;
    border-radius: 12px;
    border: 1px solid var(--border-light, #eee);
}
.sein-board-card:hover {
    box-shadow: var(--shadow-hover, 0 6px 18px rgba(0,0,0,0.1));
}

/* Avalehe kaardi struktuur */
.sein-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.sein-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    /* Kompenseeri badge'i sisemine vasak-padding, et ikoon oleks pealkirjaga vasakult joondatud */
    margin-left: -0.65rem;
}
.sein-card-comments {
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* Badge'id (kaardil) */
.sein-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}
.sein-badge i {
    font-size: 0.75rem;
}
.sein-badge-layout {
    background: var(--bg-secondary, #f0f0f0);
    color: var(--text-secondary, #4a4a4a);
}
.sein-badge-status-open {
    background: #d4f5dc;
    color: #1a6b3d;
}
.sein-badge-status-view_only {
    background: #fff3cd;
    color: #876b1a;
}
.sein-badge-status-closed {
    background: #fde0e0;
    color: #a02a2a;
}
[data-theme="dark"] .sein-badge-layout {
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary, #cdd1e4);
}
[data-theme="dark"] .sein-badge-status-open {
    background: rgba(95, 200, 112, 0.18);
    color: #5fc870;
}
[data-theme="dark"] .sein-badge-status-view_only {
    background: rgba(224, 184, 74, 0.18);
    color: #e0b84a;
}
[data-theme="dark"] .sein-badge-status-closed {
    background: rgba(241, 123, 168, 0.18);
    color: #f17ba8;
}

/* Code + status select kõrvuti — alati samal real, ka kitsastel ekraanidel */
.sein-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.sein-card-code {
    font-size: 0.9rem;
    color: var(--text-secondary, #555);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.sein-card-code > i.fa-key {
    color: var(--text-muted, #999);
}
.sein-card-code strong {
    color: var(--text-primary, #363636);
    letter-spacing: 0.04em;
}
.sein-card-copy-btn {
    background: transparent;
    border: none;
    color: var(--text-muted, #999);
    cursor: pointer;
    padding: 0.2rem 0.35rem;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1;
    margin-left: 0.1rem;
}
.sein-card-copy-btn:hover {
    background: var(--bg-hover, #f5f5f5);
    color: var(--accent-color, #00d1b2);
}
[data-theme="dark"] .sein-card-copy-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #4dd4c2;
}
.sein-card-status-select {
    flex: 1;
    min-width: 0;
}

/* Status segmented control — kolm ikooni-nuppu */
.sein-status-group {
    display: inline-flex;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-card, #fff);
}
.sein-status-group--full {
    display: flex;
    width: 100%;
}
.sein-status-btn {
    background: transparent;
    border: none;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    color: var(--text-muted, #888);
    font-size: 0.95rem;
    line-height: 1;
    transition: background 0.1s, color 0.1s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.sein-status-group--full .sein-status-btn {
    flex: 1;
    padding: 0.6rem 0.5rem;
    font-size: 0.9rem;
}
.sein-status-btn:not(:last-child) {
    border-right: 1px solid var(--border-color, #ddd);
}
.sein-status-btn:hover:not(.is-active) {
    background: var(--bg-hover, #f5f5f5);
    color: var(--text-primary, #363636);
}
[data-theme="dark"] .sein-status-btn:hover:not(.is-active) {
    background: rgba(255,255,255,0.08);
}

/* Aktiivsed nupud — värvilised */
.sein-status-btn-open.is-active {
    background: #d4f5dc;
    color: #1a6b3d;
}
.sein-status-btn-view_only.is-active {
    background: #fff3cd;
    color: #876b1a;
}
.sein-status-btn-closed.is-active {
    background: #fde0e0;
    color: #a02a2a;
}
[data-theme="dark"] .sein-status-btn-open.is-active {
    background: rgba(95, 200, 112, 0.22);
    color: #5fc870;
}
[data-theme="dark"] .sein-status-btn-view_only.is-active {
    background: rgba(224, 184, 74, 0.22);
    color: #e0b84a;
}
[data-theme="dark"] .sein-status-btn-closed.is-active {
    background: rgba(241, 123, 168, 0.22);
    color: #f17ba8;
}

/* Card footer — kaks eraldi nuppu kõrvuti */
.sein-card-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-light, #eee);
}
.sein-card-actions .button {
    flex: 1;
    font-weight: 500;
}

.button.sein-btn-open {
    background: #00a89c;
    color: #fff;
    border-color: transparent;
}
.button.sein-btn-open:hover {
    background: #008f85;
    color: #fff;
}
.button.sein-btn-delete {
    background: #fde0e0;
    color: #c0392b;
    border-color: transparent;
}
.button.sein-btn-delete:hover {
    background: #f5c6c6;
    color: #a02a2a;
}
[data-theme="dark"] .button.sein-btn-open {
    background: #00897b;
    color: #fff;
}
[data-theme="dark"] .button.sein-btn-open:hover {
    background: #00766a;
    color: #fff;
}
[data-theme="dark"] .button.sein-btn-delete {
    background: rgba(231, 76, 60, 0.15);
    color: #e57373;
}
[data-theme="dark"] .button.sein-btn-delete:hover {
    background: rgba(231, 76, 60, 0.25);
    color: #ef9a9a;
}

@media (max-width: 480px) {
    .sein-card-meta {
        gap: 0.4rem;
    }
}

.has-text-dark-link, .has-text-dark-link:hover {
    color: var(--text-primary, #363636);
}

/* Tahvel */
.sein-board {
    position: relative;
}

/* Sein paigutus — flex-tulbad, JS jaotab postitused tulpadesse.
 * Veerud täidavad kogu saadaoleva laiuse (flex-grow:1), 4K ekraanil näeb rohkem
 * postitusi korraga — see on wall-paigutuse eelis, mitte miinus. */
.sein-board[data-layout="wall"] {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: flex-start;
}
.sein-column {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Voog paigutus — üks tulp keskel */
.sein-board[data-layout="stream"] {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Shelf paigutus — pealkirjastatud veerud, jaotuvad ühtlaselt kuni mahuvad,
 * üle selle tekib horisontaalne kerimisriba ALLAÄÄRES (brauseri vaikekäitumine).
 * NB: kasutasin varem rotateX(180deg) trikk, et kerimisriba ülal kuvada, aga
 * see tekitas padding'u ja flex-paigutuse koosmõjus prognoosimatuid efekte. */
.sein-board[data-layout="shelf"] {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: flex-start;
    /* "safe center" — kui veerud mahuvad, tsentreeritakse horisontaalselt;
     * kui mitte (overflow), fallback start'ile, et ükski veerg poleks scroll'iga kättesaamatu */
    justify-content: safe center;
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: 0;
    padding-bottom: 0.5rem;
    scroll-snap-type: x proximity;
    /* Firefox-i kohandatud kerimisriba */
    scrollbar-color: var(--accent-color, #485fc7) transparent;
    /* Täidab kogu allesjäänud kõrguse, kui section.sein-page on flex-paigutuses (allpool) */
    flex: 1 1 0;
    min-height: 0;
}

/* WebKit (Chrome/Safari/Edge) — kerimisriba stiil */
.sein-board[data-layout="shelf"]::-webkit-scrollbar {
    height: 14px;
    background: transparent;
    -webkit-appearance: none; /* sunni custom stiil — mõnel platvormil OS-default ülimuslik */
}
.sein-board[data-layout="shelf"]::-webkit-scrollbar-track {
    background: var(--bg-secondary, #f0f0f3);
    border-radius: 6px;
    margin: 0 0.25rem;
}
.sein-board[data-layout="shelf"]::-webkit-scrollbar-thumb {
    background: var(--accent-color, #485fc7);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
    min-width: 40px;
    transition: background 0.15s;
}
.sein-board[data-layout="shelf"]::-webkit-scrollbar-thumb:hover {
    background: var(--accent-hover, #3a4ea8);
    background-clip: padding-box;
}
[data-theme="dark"] .sein-board[data-layout="shelf"]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .sein-board[data-layout="shelf"] {
    scrollbar-color: var(--accent-color, #6c7ee0) transparent;
}
.sein-section {
    flex: 1 1 260px;
    min-width: 260px;
    max-width: 480px;
    /* Sektsioon võtab kogu vanema (sein-board) kõrguse, mis omakorda täidab
     * allesjäänud viewport'i (flex layout section.sein-page tasandil) */
    height: 100%;
    background: var(--bg-secondary, #f5f5f7);
    border: 1px solid var(--border-light, #e5e5e5);
    border-radius: 12px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    scroll-snap-align: start;
    transition: background 0.15s, border-color 0.15s;
    box-sizing: border-box;
}
.sein-section.is-drag-over {
    background: var(--bg-hover, #e8f0fe);
    border-color: var(--accent-color, #485fc7);
}
.sein-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0.25rem 0.4rem;
    border-bottom: 1px solid var(--border-light, #e5e5e5);
}
.sein-section-drag-handle {
    cursor: grab;
    color: var(--text-muted, #999);
    padding: 0.25rem;
    user-select: none;
    touch-action: none;
}
.sein-section-drag-handle:active { cursor: grabbing; }
.sein-section-title {
    flex: 1;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary, #363636);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sein-section-title:hover { background: var(--bg-hover, rgba(0,0,0,0.04)); }
.sein-section-title-input {
    width: 100%;
    border: 1px solid var(--accent-color, #485fc7);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #363636);
    outline: none;
}
.sein-section-delete {
    border: none;
    background: transparent;
    color: var(--text-muted, #999);
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    font-size: 0.85rem;
}
.sein-section-delete:hover {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}
.sein-section-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Postituste konteiner kerib vertikaalselt, kui ületab oma sektsiooni;
     * päis ja lisanupp jäävad sektsiooni tippu nähtavaks. flex: 1 1 auto + min-height: 0
     * = sektsioon saab auto-sized'iks (kui mahub) ja max-height piirini kahanedes scrollib */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Kohandatud kerimisriba */
    scrollbar-width: thin;
    scrollbar-color: var(--border-color, #ccc) transparent;
    /* Väike padding ja margin, et postituste karbid ei kleepuks vastu kerimisriba */
    padding-right: 0.25rem;
    margin-right: -0.25rem;
}
/* Päis ja "Lisa postitus" nupp ei kahane (et ei kaotaks loetavust) */
.sein-section > .sein-section-header,
.sein-section > .sein-section-add-btn {
    flex: 0 0 auto;
}
.sein-section-body::-webkit-scrollbar {
    width: 6px;
}
.sein-section-body::-webkit-scrollbar-track {
    background: transparent;
}
.sein-section-body::-webkit-scrollbar-thumb {
    background: var(--border-color, #ccc);
    border-radius: 3px;
}
.sein-section-body::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted, #888);
}
.sein-section-add-btn {
    width: 100%;
    border: 1px dashed var(--border-color, #ccc);
    background: var(--bg-card, rgba(255, 255, 255, 0.6));
    color: var(--accent-color, #485fc7);
    border-radius: 8px;
    padding: 0.45rem 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.15s;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.sein-section-add-btn:hover {
    border-color: var(--accent-color, #485fc7);
    background: var(--accent-color, #485fc7);
    color: #fff;
}
.sein-section-add-btn i {
    font-size: 0.85rem;
}
/* Peida per-veeru "Lisa postitus" kui sein pole avatud */
.sein-board:not([data-status="open"]) .sein-section-add-btn {
    display: none;
}
.sein-post.is-dragging {
    opacity: 0.4;
}

/* Heli postitus */
.sein-post-audio {
    margin: 0.5rem 0;
}
.sein-post-audio audio {
    width: 100%;
    border-radius: 6px;
}

/* Faili postitus (download-kaart) */
.sein-post-file {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    margin: 0.5rem 0;
    background: var(--bg-hover, #f5f5f7);
    border: 1px solid var(--border-light, #e5e5e5);
    border-radius: 8px;
    color: var(--text-primary, #363636) !important;
    text-decoration: none !important;
    transition: background 0.12s, border-color 0.12s, transform 0.1s;
}
.sein-post-file:hover {
    background: var(--bg-card, #fff);
    border-color: var(--accent-color, #485fc7);
    transform: translateY(-1px);
}
.sein-post-file-icon {
    font-size: 1.8rem;
    color: var(--accent-color, #485fc7);
    flex-shrink: 0;
}
.sein-post-file-info {
    flex: 1;
    min-width: 0;
}
.sein-post-file-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}
.sein-post-file-meta {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
}
.sein-post-file-dl {
    color: var(--text-muted, #888);
    flex-shrink: 0;
}
.sein-post-file:hover .sein-post-file-dl {
    color: var(--accent-color, #485fc7);
}
[data-theme="dark"] .sein-post-file {
    background: rgba(255,255,255,0.05);
}
[data-theme="dark"] .sein-post-file:hover {
    background: rgba(255,255,255,0.1);
}

/* Compose modaali faili eelvaade */
.sein-file-preview-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #e5e5e5);
    border-radius: 8px;
}
.sein-file-preview-card > i:first-child {
    font-size: 1.8rem;
    color: var(--accent-color, #485fc7);
    flex-shrink: 0;
}
.sein-file-preview-info {
    flex: 1;
    min-width: 0;
}
.sein-file-preview-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}
.sein-file-preview-size {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
}

/* Modaali 2-veerg paigutus (nimi + pealkiri kõrvuti) */
.sein-row-2col {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.sein-row-2col > .field {
    flex: 1 1 200px;
    margin-bottom: 0;
}

/* Markdown tööriistariba */
.sein-md-toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}
.sein-md-btn {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #e5e5e5);
    border-radius: 6px;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    color: var(--text-primary, #363636);
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sein-md-btn:hover {
    background: var(--bg-hover, #e8e8ec);
    border-color: var(--accent-color, #485fc7);
}
.sein-md-btn.is-active {
    background: var(--accent-color, #485fc7);
    border-color: var(--accent-color, #485fc7);
    color: #fff;
}
.sein-md-btn.is-active:hover {
    background: var(--accent-hover, #3a4ea8);
    border-color: var(--accent-hover, #3a4ea8);
}

/* Contenteditable redaktor — sarnane textarea-le, aga rikkalik vormindus */
.sein-editor {
    min-height: 6rem;
    max-height: 20rem;
    overflow-y: auto;
    cursor: text;
    line-height: 1.5;
    padding: 0.5em 0.75em;
}
.sein-editor:focus {
    outline: none;
    border-color: var(--accent-color, #485fc7);
    box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
}
.sein-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted, #aaa);
    pointer-events: none;
}
.sein-editor strong { font-weight: 700; }
.sein-editor em { font-style: italic; }
.sein-editor ul {
    margin: 0.4rem 0 0.4rem 1.2rem;
    padding: 0;
    list-style: disc;
}
.sein-editor li { margin: 0.15rem 0; }

/* Postituse sisu — markdown vormindatud */
.sein-post-content strong { font-weight: 700; }
.sein-post-content em { font-style: italic; }
.sein-post-content ul {
    margin: 0.4rem 0 0.4rem 1.2rem;
    padding: 0;
    list-style: disc;
}
.sein-post-content li { margin: 0.15rem 0; }

/* Helisalvesti compose'is */
.sein-audio-recorder {
    background: var(--bg-secondary, #f5f5f7);
    border: 1px solid var(--border-light, #e5e5e5);
    border-radius: 8px;
    padding: 1rem;
}
.sein-audio-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.sein-audio-timer {
    font-family: monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: #e74c3c;
    padding: 0.3rem 0.6rem;
    background: rgba(231, 76, 60, 0.1);
    border-radius: 6px;
    animation: sein-pulse 1.5s ease-in-out infinite;
}
@keyframes sein-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.sein-audio-preview audio {
    width: 100%;
    border-radius: 6px;
}

/* Mobiilil shelf — väiksema kõrgusega audio kontrollid */
@media (max-width: 768px) {
    .sein-audio-controls .button {
        flex: 1;
        min-width: 120px;
    }
}

/* Mobiil + kitsas aken — üks veerg domineerib, scroll-snap navigeerib */
@media (max-width: 768px) {
    .sein-board[data-layout="shelf"] {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .sein-section {
        flex: 0 0 80vw;
        min-width: 80vw;
        max-width: 80vw;
    }
}

/* Sätete + ekspordi 2-veeruline checkbox-grid */
.sein-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
}
.sein-options-grid .checkbox {
    margin: 0;
}
@media (max-width: 480px) {
    .sein-options-grid {
        grid-template-columns: 1fr;
    }
}

/* Taustapildi valija — pisipiltide grid */
.sein-bg-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 0.4rem;
    max-height: 240px;
    overflow-y: auto;
    padding: 2px;
}
.sein-bg-option {
    aspect-ratio: 1 / 1;
    border: 2px solid var(--border-color, #e5e5e5);
    border-radius: 8px;
    background-color: var(--bg-secondary, #f5f5f7);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s, border-color 0.1s, box-shadow 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    font-size: 0.7rem;
    color: var(--text-muted, #999);
}
.sein-bg-option:hover {
    transform: scale(1.04);
    border-color: var(--accent-color, #485fc7);
}
.sein-bg-option.is-active {
    border-color: var(--accent-color, #485fc7);
    box-shadow: 0 0 0 3px rgba(72, 95, 199, 0.25);
}
.sein-bg-option--none {
    background-color: var(--bg-card, #fff);
}
.sein-bg-option--none .icon {
    font-size: 1rem;
    color: var(--text-muted, #999);
}
.help.is-inline {
    display: inline;
    margin-left: 0.5rem;
    color: var(--text-muted, #999);
}

/* Seinaala taustapildi rakendamine — body esimese lapsena <div class="sein-bg-layer">.
 * Body saab klassi .sein-bg-host, mis loob stacking context'i (isolation: isolate),
 * et bg-layer'i z-index: -1 oleks paigutatud BODY konteksti — joonistub body bg color'i
 * peale, kuid jääb teiste sisuelementide (nav, section, postitused) alla. */
body.sein-bg-host {
    isolation: isolate;
}
.sein-bg-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.sein-bg-layer[data-has-bg="1"] {
    background-image: var(--sein-bg-url);
    background-size: cover;
    background-position: center;
}
.sein-bg-layer[data-has-bg="1"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.25);
    pointer-events: none;
}
[data-theme="dark"] .sein-bg-layer[data-has-bg="1"]::after {
    background: rgba(20, 24, 35, 0.45);
}

/* Ekspordi modaali vormingu valija — 3 kaarti kõrvuti */
.sein-export-format-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.sein-export-format-option {
    flex: 1 1 130px;
    cursor: pointer;
    display: flex;
}
.sein-export-format-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.sein-export-format-card {
    flex: 1;
    border: 2px solid var(--border-light, #e5e5e5);
    border-radius: 10px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    background: var(--bg-card, #fff);
    transition: border-color 0.12s, background 0.12s, transform 0.1s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-primary, #363636);
}
.sein-export-format-card i {
    font-size: 1.5rem;
    color: var(--text-muted, #888);
    transition: color 0.12s;
}
.sein-export-format-card strong {
    font-size: 0.95rem;
}
.sein-export-format-card small {
    font-size: 0.72rem;
    color: var(--text-muted, #888);
}
.sein-export-format-option:hover .sein-export-format-card {
    border-color: var(--accent-color, #485fc7);
}
.sein-export-format-option input:checked + .sein-export-format-card {
    border-color: var(--accent-color, #485fc7);
    background: rgba(72, 95, 199, 0.06);
}
.sein-export-format-option input:checked + .sein-export-format-card i {
    color: var(--accent-color, #485fc7);
}
[data-theme="dark"] .sein-export-format-option input:checked + .sein-export-format-card {
    background: rgba(108, 126, 224, 0.15);
}

/* Postituse kaart */
/* Kinnitatud (pinned) postitus — eristav stiil */
.sein-post.is-pinned {
    border-color: var(--accent-color, #485fc7);
    box-shadow: 0 0 0 2px rgba(72, 95, 199, 0.15), var(--shadow-card, 0 2px 6px rgba(0,0,0,0.05));
    /* Pinitud postituse ülemise vasaku nurga muudame täisnurgaks (border-radius: 0),
     * et kolmnurkmärk saaks sinna täpselt peale istuda — pixel-perfect kattuvus */
    border-top-left-radius: 0;
}
.sein-post-pin-badge {
    position: absolute;
    /* top: -1px, left: -1px — katavad posti 1px-border ülaservas ja vasakus servas
     * (sh dark mode'i värvilist border-left'i), nii et pin asub posti outline'i peal */
    top: -1px;
    left: -1px;
    width: 36px;
    height: 36px;
    background: var(--accent-color, #485fc7);
    /* Lihtne kolmnurk — sharp nurk vastab posti border-top-left-radius: 0 nurgale */
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 4;
    pointer-events: none;
}
.sein-post-pin-badge i {
    position: absolute;
    top: 6px;
    left: 6px;
    color: #fff;
    font-size: 0.65rem;
    transform: rotate(-45deg);
}
/* Tumeda režiimi värviliste postituste border-left on 4px laiune (mitte 1px) —
 * nihutame pini left-positsiooni vasakule, et see kataks ka kogu värvilist riba */
[data-theme="dark"] .sein-post[class*="sein-c-"] .sein-post-pin-badge {
    left: -4px;
}

.sein-post {
    position: relative; /* et kolme-täpi menüü saaks absolute-positsioneerida postituse suhtes */
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e5e5e5);
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    box-shadow: var(--shadow-card, 0 2px 6px rgba(0,0,0,0.05));
    transition: box-shadow 0.15s, transform 0.15s;
    width: 100%;
}
.sein-post:hover {
    box-shadow: var(--shadow-hover, 0 4px 12px rgba(0,0,0,0.1));
}

/* Värvid */
.sein-post.sein-c-yellow { background: #fff8d6; border-color: #f0e7a6; }
.sein-post.sein-c-pink   { background: #fde0ec; border-color: #f8c5d8; }
.sein-post.sein-c-blue   { background: #d8ecff; border-color: #b3d4f5; }
.sein-post.sein-c-green  { background: #dcf5dc; border-color: #b8e3b8; }
.sein-post.sein-c-purple { background: #ece0fa; border-color: #d2bff0; }
.sein-post.sein-c-orange { background: #ffe6cc; border-color: #fdcfa3; }

[data-theme="dark"] .sein-post.sein-c-yellow,
[data-theme="dark"] .sein-post.sein-c-pink,
[data-theme="dark"] .sein-post.sein-c-blue,
[data-theme="dark"] .sein-post.sein-c-green,
[data-theme="dark"] .sein-post.sein-c-purple,
[data-theme="dark"] .sein-post.sein-c-orange {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
    border-left-width: 4px;
    border-left-style: solid;
}
[data-theme="dark"] .sein-post.sein-c-yellow { border-left-color: #e0b84a; box-shadow: inset 4px 0 12px -8px #e0b84a, var(--shadow-card, 0 2px 6px rgba(0,0,0,0.05)); }
[data-theme="dark"] .sein-post.sein-c-pink   { border-left-color: #f17ba8; box-shadow: inset 4px 0 12px -8px #f17ba8, var(--shadow-card, 0 2px 6px rgba(0,0,0,0.05)); }
[data-theme="dark"] .sein-post.sein-c-blue   { border-left-color: #5ba0f5; box-shadow: inset 4px 0 12px -8px #5ba0f5, var(--shadow-card, 0 2px 6px rgba(0,0,0,0.05)); }
[data-theme="dark"] .sein-post.sein-c-green  { border-left-color: #5fc870; box-shadow: inset 4px 0 12px -8px #5fc870, var(--shadow-card, 0 2px 6px rgba(0,0,0,0.05)); }
[data-theme="dark"] .sein-post.sein-c-purple { border-left-color: #b685e0; box-shadow: inset 4px 0 12px -8px #b685e0, var(--shadow-card, 0 2px 6px rgba(0,0,0,0.05)); }
[data-theme="dark"] .sein-post.sein-c-orange { border-left-color: #f0935a; box-shadow: inset 4px 0 12px -8px #f0935a, var(--shadow-card, 0 2px 6px rgba(0,0,0,0.05)); }

/* Postituse päis */
.sein-post-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}
.sein-post-author {
    font-size: 0.85rem;
    color: var(--text-secondary, #555);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.sein-post-author-name {
    font-weight: 600;
}
.sein-post-time {
    color: var(--text-muted, #999);
    font-size: 0.75rem;
}
.sein-post-actions {
    display: flex;
    gap: 0.25rem;
}
.sein-post-action-btn {
    background: none;
    border: none;
    color: var(--text-muted, #888);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
}
.sein-post-action-btn:hover {
    background: rgba(0,0,0,0.06);
    color: var(--text-primary, #363636);
}
[data-theme="dark"] .sein-post-action-btn:hover {
    background: rgba(255,255,255,0.1);
}

/* Kolme-täpi menüü postituse ülanurgas — Padleti stiil */
.sein-post-menu {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 5;
}
.sein-post-menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #999);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    transition: background 0.1s, color 0.1s;
}
.sein-post-menu-btn:hover {
    background: rgba(0,0,0,0.08);
    color: var(--text-primary, #363636);
}
[data-theme="dark"] .sein-post-menu-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.sein-post-menu-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #e5e5e5);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    min-width: 140px;
    padding: 0.25rem;
    display: none;
    flex-direction: column;
    gap: 0.1rem;
}
.sein-post-menu.is-open .sein-post-menu-dropdown {
    display: flex;
}
/* Kui menüü avatakse üles (kuna all napib ruumi) — pööra dropdown'i positsioon */
.sein-post-menu.is-flipped .sein-post-menu-dropdown {
    top: auto;
    bottom: calc(100% + 4px);
}
.sein-post-menu-item {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-primary, #363636);
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    text-align: left;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    transition: background 0.1s, color 0.1s;
}
.sein-post-menu-item:hover {
    background: var(--bg-hover, #f0f0f3);
}
.sein-post-menu-item--danger:hover {
    background: rgba(231, 76, 60, 0.1);
    color: #c0392b;
}
[data-theme="dark"] .sein-post-menu-dropdown {
    background: var(--bg-card, #1f2937);
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
[data-theme="dark"] .sein-post-menu-item:hover {
    background: rgba(255,255,255,0.08);
}

/* Postituse sisu */
.sein-post-title {
    font-weight: 600;
    font-size: 1.05rem;
    margin: 0.2rem 0 0.4rem;
    word-break: break-word;
}
.sein-post-content {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.95rem;
    line-height: 1.45;
}
.sein-post-image-wrap {
    margin: 0.5rem 0;
    border-radius: 8px;
    overflow: hidden;
}
.sein-post-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
}
.sein-post-yt {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin: 0.5rem 0;
    border-radius: 8px;
    overflow: hidden;
}
.sein-post-yt iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.sein-post-link {
    display: block;
    text-decoration: none;
    color: inherit;
    margin: 0.5rem 0;
    border: 1px solid var(--border-light, #ddd);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-secondary, #fafafa);
}
.sein-post-link:hover { border-color: var(--accent-color, #3273dc); }
.sein-post-link img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}
.sein-post-link-body { padding: 0.6rem 0.8rem; }
.sein-post-link-title { font-weight: 600; font-size: 0.95rem; word-break: break-word; }
.sein-post-link-host { color: var(--text-muted, #999); font-size: 0.8rem; margin-top: 0.2rem; }

/* Reaktsioonid — emoji süsteem (Padleti stiil) */
.sein-post-reactions {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}
/* Olemasolev reaktsioon (emoji + count) */
.sein-react-chip {
    background: var(--bg-hover, #f5f5f5);
    border: 1px solid var(--border-light, #e5e5e5);
    border-radius: 999px;
    padding: 0.15rem 0.5rem 0.15rem 0.35rem;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: background 0.1s, border-color 0.1s, transform 0.1s;
}
.sein-react-chip:hover {
    background: var(--bg-card, #fff);
    border-color: var(--accent-color, #485fc7);
    transform: scale(1.05);
}
.sein-react-chip.is-active {
    background: rgba(72, 95, 199, 0.12);
    border-color: var(--accent-color, #485fc7);
}
.sein-react-emoji {
    font-size: 0.95rem;
    line-height: 1;
}
.sein-react-count {
    font-size: 0.78rem;
    color: var(--text-secondary, #4a4a4a);
    font-weight: 500;
}
.sein-react-chip.is-active .sein-react-count {
    color: var(--accent-color, #485fc7);
    font-weight: 600;
}
[data-theme="dark"] .sein-react-chip { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .sein-react-chip:hover { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .sein-react-chip.is-active { background: rgba(108, 126, 224, 0.18); }

/* "+ reaktsioon" lisamis-nupp */
.sein-react-add {
    background: var(--bg-hover, #f5f5f5);
    border: 1px dashed var(--border-color, #ccc);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    cursor: pointer;
    color: var(--text-muted, #888);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    transition: all 0.12s;
}
.sein-react-add:hover {
    background: var(--accent-color, #485fc7);
    color: #fff;
    border-style: solid;
    border-color: var(--accent-color, #485fc7);
}
.sein-react-add-plus {
    font-size: 0.65rem;
    opacity: 0.7;
}
[data-theme="dark"] .sein-react-add { background: rgba(255,255,255,0.04); }

/* Kiir-popup (5 emojit + veel) */
.sein-react-popup {
    position: fixed;
    z-index: 1000;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #e5e5e5);
    border-radius: 999px;
    padding: 0.35rem 0.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    display: none;
    align-items: center;
    gap: 0.2rem;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s, transform 0.12s;
}
.sein-react-popup.is-visible {
    display: inline-flex;
    opacity: 1;
    transform: translateY(0);
}
.sein-react-popup-btn,
.sein-react-popup-more {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
    padding: 0.25rem 0.4rem;
    border-radius: 999px;
    transition: background 0.1s, transform 0.1s;
}
.sein-react-popup-btn:hover,
.sein-react-popup-more:hover {
    background: var(--bg-hover, #f0f0f3);
    transform: scale(1.2);
}
.sein-react-popup-more {
    font-size: 0.9rem;
    color: var(--text-muted, #888);
    width: 1.85rem;
    height: 1.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.15rem;
    border-left: 1px solid var(--border-light, #e5e5e5);
    padding-left: 0.55rem;
    border-radius: 0 999px 999px 0;
}
[data-theme="dark"] .sein-react-popup { background: var(--bg-card, #1f2937); box-shadow: 0 6px 20px rgba(0,0,0,0.45); }

/* Täis-emoji valija */
.sein-react-picker {
    position: fixed;
    z-index: 1000;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #e5e5e5);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
    width: 320px;
    max-height: 360px;
    display: none;
    flex-direction: column;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.15s, transform 0.15s;
}
.sein-react-picker.is-visible {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}
.sein-react-picker-grid {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.5rem;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.15rem;
    scrollbar-width: thin;
}
.sein-react-picker-grid::-webkit-scrollbar { width: 6px; }
.sein-react-picker-grid::-webkit-scrollbar-thumb { background: var(--border-color, #ccc); border-radius: 3px; }
.sein-react-picker-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.3rem 0.2rem;
    border-radius: 6px;
    transition: background 0.1s;
}
.sein-react-picker-btn:hover { background: var(--bg-hover, #f0f0f3); }
.sein-react-picker-tabs {
    display: flex;
    border-top: 1px solid var(--border-light, #e5e5e5);
    padding: 0.25rem;
    gap: 0.1rem;
    flex-shrink: 0;
}
.sein-react-tab {
    flex: 1;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.35rem 0.2rem;
    border-radius: 6px;
    color: var(--text-muted, #888);
    transition: background 0.1s, color 0.1s;
}
.sein-react-tab:hover { background: var(--bg-hover, #f0f0f3); }
.sein-react-tab.is-active {
    background: var(--accent-color, #485fc7);
    color: #fff;
}
[data-theme="dark"] .sein-react-picker { background: var(--bg-card, #1f2937); box-shadow: 0 10px 30px rgba(0,0,0,0.55); }

/* Mobiilil — kiir-popup laiem, täis-valija veidi väiksem */
@media (max-width: 480px) {
    .sein-react-picker { width: 280px; max-height: 320px; }
    .sein-react-picker-grid { grid-template-columns: repeat(7, 1fr); }
}

/* Kommentaarid */
.sein-comments {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-light, #eee);
}
.sein-comments-toggle {
    background: none;
    border: none;
    color: var(--text-secondary, #666);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
}
.sein-comment {
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--border-light, #eee);
    font-size: 0.85rem;
}
.sein-comment:last-child { border-bottom: none; }
.sein-comment-author {
    font-weight: 600;
    color: var(--text-secondary, #555);
}
.sein-comment-time {
    color: var(--text-muted, #999);
    font-size: 0.75rem;
    margin-left: 0.4rem;
}
.sein-comment-text {
    word-break: break-word;
    white-space: pre-wrap;
    margin-top: 0.1rem;
}
.sein-comment-form {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.sein-comment-form input {
    border-radius: 6px;
    border: 1px solid var(--border-color, #ddd);
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #363636);
    min-width: 0;
}
.sein-comment-form .sein-comment-name {
    flex: 1 1 100%;
}
.sein-comment-form .sein-comment-input {
    flex: 1 1 0;
}
.sein-comment-form button {
    border: none;
    background: var(--accent-color, #3273dc);
    color: #fff;
    border-radius: 6px;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    font-size: 0.85rem;
    flex: 0 0 auto;
}

/* Värvi valija */
.sein-color-picker {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.sein-color-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border-color, #ddd);
    cursor: pointer;
    background: var(--bg-secondary, #f5f5f5);
}
.sein-color-btn.is-active { border-color: var(--accent-color, #3273dc); border-width: 3px; }
.sein-color-btn.sein-c-yellow { background: #fff8d6; }
.sein-color-btn.sein-c-pink   { background: #fde0ec; }
.sein-color-btn.sein-c-blue   { background: #d8ecff; }
.sein-color-btn.sein-c-green  { background: #dcf5dc; }
.sein-color-btn.sein-c-purple { background: #ece0fa; }
.sein-color-btn.sein-c-orange { background: #ffe6cc; }

/* Status banner — view_only (kollane) ja closed (hall) variandid */
.sein-status-banner {
    border: 1px solid;
    border-left-width: 4px;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}
.sein-status-banner[data-status="view_only"] {
    background: #fff8d6;
    border-color: #f0e7a6;
    border-left-color: #d4a857;
    color: #4a3f12;
}
.sein-status-banner[data-status="closed"] {
    background: #f0f0f0;
    border-color: #d0d0d0;
    border-left-color: #555;
    color: #2a2a2a;
}
[data-theme="dark"] .sein-status-banner[data-status="view_only"] {
    background: var(--bg-card);
    border-color: var(--border-color);
    border-left-color: #e0b84a;
    color: var(--text-primary);
}
[data-theme="dark"] .sein-status-banner[data-status="closed"] {
    background: var(--bg-card);
    border-color: var(--border-color);
    border-left-color: #888;
    color: var(--text-primary);
}


/* Päis */
.sein-header {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #eee);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
}
.sein-header #boardTitle.title {
    font-size: 1.15rem;
    line-height: 1.25;
}
.sein-header #boardDescription.subtitle {
    font-size: 0.85rem;
    line-height: 1.3;
    white-space: pre-line;
}
.sein-join-info {
    background: var(--bg-secondary, #f0f0f0);
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
    font-size: 0.9rem;
}

/* Jagamise modali liitu kood — hea kontrast nii heledas kui tumedas režiimis */
.sein-share-code {
    color: #00b89c;
    letter-spacing: 0.05em;
}
[data-theme="dark"] .sein-share-code {
    color: #4dd4c2;
}

/* QR */
#qrContainer {
    display: flex;
    justify-content: center;
}
#qrContainer svg {
    transition: transform 0.15s;
    background: #fff;
    border-radius: 8px;
    padding: 6px;
}
#qrContainer svg:hover {
    transform: scale(1.03);
}

/* QR-koodi suurendatud vaade */
.sein-qr-overlay {
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
    cursor: zoom-out;
    padding: 1.5rem;
}
[data-theme="dark"] .sein-qr-overlay {
    background: #1a1a2e;
}
.sein-qr-overlay-content {
    text-align: center;
    max-width: min(90vw, 480px);
}
.sein-qr-big {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 0.75rem;
    display: inline-block;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.sein-qr-big svg {
    display: block;
    width: min(55vh, 70vw, 360px);
    height: min(55vh, 70vw, 360px);
}
.sein-qr-code {
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 700;
    color: var(--text-primary, #363636);
    letter-spacing: 0.1em;
    margin: 0.5rem 0 0.25rem;
    line-height: 1;
}
[data-theme="dark"] .sein-qr-code {
    color: #fff;
}
.sein-qr-link {
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    color: var(--text-secondary, #666);
    margin-bottom: 1rem;
    word-break: break-all;
}
[data-theme="dark"] .sein-qr-link {
    color: #ccc;
}
.sein-qr-hint {
    font-size: 0.9rem;
    color: var(--text-muted, #999);
    margin-top: 1rem;
}

/* Modal — laiema sisu jaoks */
@media (min-width: 769px) {
    .modal-card {
        max-width: 600px;
        width: 90%;
    }
}

/* Modali jalus — nuppude vahe */
.modal-card-foot {
    gap: 0.5rem;
}

/* Uue postituse modaal — pisut väiksem vertikaalne tühi ruum head/foot peal */
#postModal .modal-card-head,
#postModal .modal-card-foot {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
}

/* Drag handle */
.sein-post.is-dragging {
    opacity: 0.6;
    transform: scale(1.02);
    cursor: grabbing;
}

/* ========================================
   FULLSCREEN MOOD (omanik)
   ======================================== */
body.sein-fullscreen .navbar,
body.sein-fullscreen .breadcrumb,
body.sein-fullscreen footer:not(.modal-card-foot) {
    display: none !important;
}
body.sein-fullscreen .section {
    padding: 0.5rem 0.75rem !important;
}
body.sein-fullscreen .sein-container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Kompaktne päis fullscreen-režiimis */
body.sein-fullscreen .sein-header {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #eee);
}
body.sein-fullscreen .sein-header .title {
    font-size: 1.15rem !important;
    margin-bottom: 0 !important;
}
body.sein-fullscreen .sein-header .subtitle {
    display: none;
}
body.sein-fullscreen .sein-header .button {
    padding: 0.35rem 0.7rem;
    height: auto;
    font-size: 0.85rem;
}
body.sein-fullscreen .sein-header .button .icon {
    font-size: 0.85rem;
}
body.sein-fullscreen .sein-join-info {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
}
body.sein-fullscreen #editBoardBtn {
    padding: 0.2rem 0.4rem !important;
}
/* Status banner kompaktsem */
body.sein-fullscreen .sein-status-banner {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
}
/* Fullscreen — section.sein-page kasutab kogu viewport'i, mitte 100vh-3.25rem */
body.sein-fullscreen section.sein-page {
    min-height: 100vh;
}

/* Pildi täisvaade */
.sein-image-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    cursor: zoom-out;
    padding: 2rem;
}
.sein-image-overlay img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

/* Failide üleslaadimise laadimisindikaator */
.sein-uploading {
    position: relative;
    pointer-events: none;
}
.sein-uploading > * { opacity: 0.4; }
.sein-uploading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2px solid var(--accent-color, #3273dc);
    border-top-color: transparent;
    border-radius: 50%;
    animation: sein-spin 0.6s linear infinite;
    z-index: 2;
}
@keyframes sein-spin { to { transform: rotate(360deg); } }