/*
 * Dashboard layout (Listari design 2a desktop / 3a mobile).
 * Most styling is Tailwind in dashboard.html and js/dashboardTable.js /
 * js/dashboardDetail.js; this file covers what utilities can't express well:
 * the detail panel/sheet switch, drawing thumbnails and hidden scrollbars.
 */

/* Detail: hidden on mobile until an order is opened (full-screen sheet),
   a fixed column next to the list on desktop. */
.detail-panel {
    display: none;
}

@media (max-width: 1023px) {
    body.detail-open {
        overflow: hidden;
    }
    body.detail-open .detail-panel {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 40;
        border-left: 0;
    }
    /* The floating "Uusi tilaus" button would cover the sheet's actions. */
    body.detail-open #newOrderFab {
        display: none;
    }
}

/* Width: --detail-width is set when the user resizes the panel (js/panelResize.js). */
@media (min-width: 1024px) {
    .detail-panel {
        display: flex;
        flex: none;
        width: var(--detail-width, 480px);
    }
}

@media (min-width: 1280px) {
    .detail-panel {
        width: var(--detail-width, 540px);
    }
}

/* The user closed the panel (desktop): the list gets the full width.
   Clicking an order opens it again (js/dashboard.js). */
@media (min-width: 1024px) {
    body.detail-closed .detail-panel {
        display: none;
    }
}

/* Edge tabs (.edge-tab, shared with the editor) are defined in style.css. */
/* The reopen tab exists only on desktop while the panel is closed. The id
   selector outranks Tailwind's utilities, which load after this file. */
#detailOpenBtn {
    display: none;
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
}
@media (min-width: 1024px) {
    body.detail-closed #detailOpenBtn {
        display: flex;
    }
}

/* Resize handle: a thin line that darkens on hover, focus and while dragging. */
.panel-resizer::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3px;
    width: 2px;
    background: transparent;
    transition: background-color .15s;
}
.panel-resizer:hover::after,
.panel-resizer:focus-visible::after,
body.is-resizing .panel-resizer::after {
    background: var(--ink);
}
.panel-resizer:focus-visible {
    outline: none;
}
body.is-resizing {
    cursor: col-resize;
    user-select: none;
}

/* Profile drawing thumbnails on grid paper, as in the design. */
.profile-thumb {
    background-color: #FAFAF8;
    border: 1px solid #EDEDEA;
    background-image:
        linear-gradient(#EFEFEC 1px, transparent 1px),
        linear-gradient(90deg, #EFEFEC 1px, transparent 1px);
    background-size: 12px 12px;
}

/* Pull-to-refresh indicator: the icon spins while the list reloads. */
#pullIndicator[data-state="refreshing"] [data-ptr-arrow] {
    animation: ptr-spin .8s linear infinite;
}
@keyframes ptr-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    #pullIndicator[data-state="refreshing"] [data-ptr-arrow] {
        animation: none;
    }
}

/* Horizontally scrolling tabs without a visible scrollbar (mobile). */
.no-scrollbar {
    scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Selection bar (3.70.2): floats over the list's bottom instead of pushing the list down.
   While it shows, the phone's "Uusi tilaus" steps aside and the list gets room under the
   last rows so nothing stays hidden behind the bar. */
.bulk-bar {
    padding-bottom: max(0.625rem, env(safe-area-inset-bottom));
}
body.bulk-open #newOrderFab,
body.bulk-open #newOrderBar {
    display: none !important;
}
body.bulk-open #orderList {
    padding-bottom: 11rem;
}
@media (min-width: 1024px) {
    .bulk-bar {
        padding-bottom: 0.5rem;
    }
    body.bulk-open #orderList {
        padding-bottom: 5.5rem;
    }
}

/* Board view ("Taulu", 3.95.0, foremen on PC; design .design-sync/mockups/taulu 2a / 2c).
   body.board-mode: the list section is the board and takes the full width; the detail panel
   is a pop-up over the dimmed board while an order is open (body.board-pop). */
.board-pop-bar,
.board-backdrop {
    display: none;
}
@media (min-width: 1024px) {
    body.board-mode #statusTabs,
    body.board-mode #columnsWrap,
    body.board-mode #bulkBar,
    body.board-mode #detailResizer,
    body.board-mode #detailCloseBtn,
    body.board-mode #detailOpenBtn {
        display: none !important;
    }
    body.board-mode .detail-panel {
        display: none;
    }
    body.board-mode.board-pop .detail-panel {
        display: flex;
        position: fixed;
        z-index: 50;
        top: 4vh;
        bottom: 4vh;
        left: 50%;
        transform: translateX(-50%);
        width: min(780px, 94vw);
        border: 0;
        border-top: 3px solid var(--ink, #141414);
        box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
    }
    body.board-mode.board-pop .board-pop-bar {
        display: flex;
    }
    body.board-mode.board-pop .board-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 45;
        background: rgba(20, 20, 20, .45);
    }
}