/* ==========================================================================
   AgreementHub — Responsive layer ("Meridian")
   ========================================================================== */

@media (max-width: 1399.98px) {
    #pageContent { padding: 1.6rem 1.9rem 2.75rem; }
    .search-wrapper .form-control { min-width: 240px; }
}

@media (max-width: 1199.98px) {
    #pageContent { padding: 1.4rem 1.5rem 2.5rem; }
    #pageContent h2, .page-head__title { font-size: 1.65rem; }
    .search-wrapper .form-control { min-width: 190px; }
    .kpi__value, .dashboard-card h3 { font-size: 1.7rem; }
}

@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        left: -300px;
        top: 0;
        bottom: 0;
        z-index: 1050;
        width: 268px;
        background: var(--pine-900) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: var(--shadow-lg);
        padding-top: 1.3rem;
    }

    .sidebar.open { left: 0; }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(10, 36, 35, 0.55);
        backdrop-filter: blur(3px);
        z-index: 1049;
    }

    .sidebar-backdrop.show { display: block; }

    #pageContent { padding: 1.2rem; }

    .search-wrapper { display: none; }

    .navbar { padding: 0.5rem 0.95rem; }
    .navbar-brand { font-size: 1.05rem; }
    .navbar-brand .brand-seal { width: 30px; height: 30px; font-size: 0.66rem; }
}

@media (max-width: 767.98px) {
    .page-head, #pageContent > .d-flex.justify-content-between.align-items-center:has(h2) {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.8rem;
    }
    .page-head__actions, #pageContent > .d-flex.justify-content-between.align-items-center:has(h2) > button,
    #pageContent > .d-flex.justify-content-between.align-items-center:has(h2) > div:last-child {
        width: 100%;
    }

    #pageContent h2, .page-head__title { font-size: 1.4rem; }
    .kpi__value, .dashboard-card h3 { font-size: 1.5rem; }
    .kpi__icon, .dashboard-card .card-icon { width: 40px; height: 40px; font-size: 1rem; }
    .modal-content { border-radius: var(--radius-lg); }
    .login-shell { flex-direction: column; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar__search { max-width: none; }
}

@media (max-width: 575.98px) {
    #pageContent { padding: 1rem; }
    .kpi, .dashboard-card { padding: 1rem 1.05rem; border-radius: var(--radius); }
    .panel__head, .panel__body, .card .card-body { padding: 1rem; }

    .table-wrapper { border-radius: var(--radius); }
    .table thead th, .table tbody td { padding: 0.55rem 0.6rem; font-size: 0.78rem; }
    .table thead th { letter-spacing: 0.06em; }

    .btn { padding: 0.45rem 0.85rem; font-size: 0.8rem; }

    .login-container { padding: 1rem; }
    .login-shell { border-radius: var(--radius-lg); }
    .toast-container { padding: 0.75rem !important; }
}