/* ==========================================================
   Responsive
   ----------------------------------------------------------
   Shared responsive overrides. Kept in one file for now to
   avoid changing mobile behavior during CSS refactoring.
   ========================================================== */

@media (hover: hover) {
    /* old WBS responsive */
    .wbs-table .tree-table-group-row:hover {
        z-index: 20;
    }
}

@media only screen and (max-device-width: 1024px) {
    /* TODO: revisit mobile shell layout after fixed full-height sidebar refactor. */
    html, body {
        font-size: 11px;
    }

    /* top-bar responsive */
    .top-bar {
        position: static;
        height: auto;
        left: auto;
        right: auto;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 10px;
    }

    .top-bar::after {
        display: none;
    }

    .edit-actions {
        justify-content: flex-start;
        gap: 6px;
        width: 100%;
        overflow-x: auto;
    }

    .edit-btn,
    .save-btn,
    .cancel-btn {
        min-height: 30px;
        padding: 5px 9px;
        font-size: 11px;
    }

    .edit-changes-counter {
        min-width: 86px;
        font-size: 11px;
        text-align: left;
    }

    /* sidebar responsive */
    .app-layout {
        flex-direction: column;
        min-height: 0;
        padding-top: 0;
        padding-left: 0;
    }

    .side-tabs {
        position: relative;
        top: auto;
        left: auto;
        bottom: auto;
        height: auto;
        width: 100%;
        flex: 0 0 auto;
        flex-direction: column;
        gap: 8px;
        overflow-x: hidden;
        padding: 10px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .side-tabs::before {
        display: none;
    }

    .side-brand {
        width: 100%;
        min-height: 28px;
        height: auto;
        padding-top: 0;
        padding-bottom: 0;
    }

    .side-tabs.collapsed .side-brand {
        width: 100%;
        height: auto;
        padding-top: 0;
    }

    .side-nav {
        width: 100%;
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .side-tabs.collapsed .side-nav {
        width: 100%;
    }

    .side-section {
        flex: 0 0 auto;
        min-width: 190px;
    }

    .side-user {
        width: auto;
        min-width: 190px;
        flex: 0 0 auto;
    }

    .side-tabs.collapsed .side-user {
        width: auto;
    }

    .side-tabs.collapsed .side-user-info {
        display: block;
    }

    .side-section-title {
        display: none;
    }

    .side-tab,
    .side-link {
        min-width: 170px;
    }

    .content-area {
        --content-area-padding-x: 10px;
        --content-area-padding-top: 10px;
        --content-area-padding-bottom: 10px;
        width: auto;
        min-height: 0;
        height: auto;
        overflow: visible;
        padding: 10px;
    }

    /* home responsive */
    .home-page {
        gap: 12px;
    }

    .home-hero {
        padding: 20px;
    }

    .home-greeting {
        font-size: 24px;
    }

    .home-card-grid {
        gap: 12px;
    }

    .home-card-section-grid {
        grid-template-columns: 1fr;
    }

    .home-card {
        min-height: 138px;
    }

    /* table toolbar responsive */
    .table-toolbar {
        align-items: center;
    }

    .table-toolbar-actions {
        flex-wrap: wrap;
        justify-content: stretch;
    }

    .table-toolbar-actions-left,
    .table-toolbar-actions-center,
    .table-toolbar-actions-right {
        justify-content: flex-start;
    }

    .table-toolbar-actions-center {
        overflow-x: auto;
        padding: 8px 0;
        border-right: none;
        border-left: none;
        border-top: none;
        border-bottom: none;
    }

    .controls-wrapper.panel-toolbar .right-buttons {
        width: 100%;
        padding-top: 8px;
        padding-left: 0;
        border-top: 1px solid rgba(216, 204, 186, 0.8);
        border-left: none;
    }

    /* old WBS responsive */
    #dataTable {
        --uzel-width: 75px;
        --kode-width: 85px;
        --name-left: calc(30px + var(--uzel-width) + var(--kode-width));
    }

    .col-level { width: 30px; min-width: 30px; max-width: 30px; left: 0px; }
    .col-uzel { left: 30px; }
    .col-kode { left: calc(30px + var(--uzel-width)); }
    .col-name { width: auto; min-width: 150px; left: var(--name-left); }

    .level-label { font-size: 11px; }
    .lvl-btn { width: 28px; height: 28px; font-size: 12px; }
    .uzel-btn { font-size: 10px; padding: 4px 8px; }

    .data-table th {
        padding: 6px !important;
    }

    .data-table th,
    .data-table td {
        font-size: 11px;
    }

    .search-box input { font-size: 11px; padding: 6px 8px; }
    .rows-counter { font-size: 12px; padding: 4px 10px; }

    .lvl-btn:hover {
        transform: scale(0.95);
        box-shadow: none;
    }
}