/* ==========================================================
   RESPONSIVE – MOBILE, LANDSCAPE VÀ DESKTOP RỘNG
   Breakpoint chỉ được quản lý trong file này.
   ========================================================== */

@media (max-width: 767px) {

    .auth-shell {
        align-items: center;
        padding:
            max(var(--space-3), env(safe-area-inset-top))
            max(var(--space-3), env(safe-area-inset-right))
            max(var(--space-3), env(safe-area-inset-bottom))
            max(var(--space-3), env(safe-area-inset-left));
    }

    .auth-panel {
        margin-left: 0;
        padding: var(--space-5) var(--space-4);
    }



    .auth-brand-logo {
        width: 3.5rem;
        height: 3.5rem;
    }

    .auth-brand-logo--youth {
        width: 3.625rem;
        height: 3.625rem;
    }

    .auth-heading__title {
        font-size: var(--font-size-lg);
        white-space: normal;
        text-wrap: balance;
    }

    .auth-form-actions {
        grid-template-columns: 1fr;
    }

    .auth-form-actions > :where(button, a) {
        width: 100%;
    }


    .ui-field--half { grid-column: 1 / -1; }

    .ui-card__header,
    .ui-table-toolbar,
    .ui-dialog__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-dialog__footer > :where(button, a) { width: 100%; }

    .ui-toast-region {
        top: var(--space-2);
        right: var(--space-2);
        width: calc(100vw - 2 * var(--space-2));
    }

    /* 22A-H mobile polish: header scrolls with the page so it never covers dashboard content. */
    .app-header {
        position: relative;
        top: auto;
    }

    .app-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "header"
            "main"
            "footer";
    }

    .app-header {
        min-height: 5.5rem;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "brand account"
            "identity identity";
        gap: var(--space-1) var(--space-2);
        padding:
            var(--space-2)
            max(var(--space-3), env(safe-area-inset-right))
            var(--space-2)
            max(var(--space-3), env(safe-area-inset-left));
    }

    .app-header__brand {
        grid-area: brand;
        min-width: 0;
        gap: var(--space-2);
    }

    .app-brand-marks { gap: var(--space-1); }

    .app-brand-logo {
        width: 2rem;
        height: 2rem;
    }

    .app-system-name {
        min-width: 0;
        justify-items: start;
        text-align: left;
    }

    .app-system-name__line:first-child { font-size: 0.64rem; }
    .app-system-name__line:last-child { margin-top: 0.12rem; font-size: 0.78rem; }

    .app-account-trigger {
        grid-area: account;
        justify-self: end;
        padding: 0;
    }

    .app-account-trigger__desktop { display: none; }

    .app-avatar {
        width: 2.35rem;
        height: 2.35rem;
    }

    .app-header__identity-row {
        grid-area: identity;
        min-width: 0;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: var(--space-2);
    }

    .app-menu-trigger {
        grid-column: 1;
        grid-row: 1;
        width: 2.55rem;
        min-width: 2.55rem;
        min-height: 2.55rem;
        justify-content: center;
        padding-inline: 0;
        font-size: 1.25rem;
    }

    .app-mobile-identity {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        display: grid;
        align-content: center;
        justify-items: end;
        gap: 0.125rem;
        text-align: right;
    }

    .app-mobile-identity__name,
    .app-mobile-identity__role {
        width: 100%;
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .app-mobile-identity__name {
        line-height: 1.25;
    }

    .app-mobile-identity__role {
        line-height: 1.3;
    }

    .app-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: var(--z-sidebar);
        width: min(18rem, 86vw);
        height: 100dvh;
        transform: translateX(-105%);
        box-shadow: var(--shadow-lg);
        transition: transform var(--duration-normal) var(--easing-emphasized);
    }

    .app-shell.is-sidebar-open .app-sidebar { transform: translateX(0); }

    .app-sidebar__heading { min-height: 4rem; }
    .app-sidebar__close { display: inline-grid; }

    .app-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: calc(var(--z-sidebar) - 1);
        display: block;
        background: var(--color-overlay);
    }

    .app-content { padding: var(--space-4) var(--space-3); }

    .app-page-header {
        align-items: stretch;
        flex-direction: column;
        gap: var(--space-2);
    }

    .app-page-header__title { font-size: var(--font-size-xl); }
    .app-demo-grid { grid-template-columns: minmax(0, 1fr); }

    .app-account-center {
        top: auto;
        right: var(--space-2);
        bottom: max(var(--space-2), env(safe-area-inset-bottom));
        left: var(--space-2);
        width: auto;
        max-height: calc(100dvh - 2 * var(--space-2));
    }

    .app-account-center__summary {
        grid-template-columns: minmax(5.5rem, 0.65fr) minmax(0, 1.35fr);
        gap: var(--space-3);
    }
}

@media (orientation: landscape) and (min-width: 568px) and (max-width: 1023px) {

    .auth-shell {
        align-items: center;
        justify-items: end;
        padding: var(--space-4) 8vw;
    }

    .auth-panel {
        width: min(27rem, 55vw);
        margin-left: 0;
        padding: var(--space-4);
    }

    .auth-panel__header {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        gap: var(--space-3);
        margin-bottom: var(--space-3);
        text-align: left;
    }

    .auth-form {
        gap: var(--space-3);
    }


    .app-header {
        min-height: 4.25rem;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto;
        grid-template-areas: "brand account";
    }

    .app-header__identity-row { display: none; }
    .app-account-trigger { padding: var(--space-1) var(--space-2); }
    .app-account-trigger__desktop { display: grid; }

    .app-shell {
        grid-template-columns: 14rem minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "header header"
            "sidebar main"
            "sidebar footer";
    }

    .app-sidebar {
        position: sticky;
        top: 4.25rem;
        width: auto;
        height: calc(100vh - 4.25rem);
        transform: none;
        box-shadow: none;
    }

    .app-sidebar__close,
    .app-sidebar-backdrop { display: none; }

    .app-content { padding: var(--space-4); }
}

@media (min-width: 1280px) {
    .app-shell { grid-template-columns: 17rem minmax(0, 1fr); }
    .app-content { padding: var(--space-6); }
}

@media (max-width: 359px) {
    .app-account-center__summary-item:last-child strong {
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: break-word;
    }
}

@media(max-width:1199px){.dashboard-grid,.dashboard-quick-actions__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:991px){.dashboard-grid,.dashboard-quick-actions__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:575px){.dashboard-grid,.dashboard-quick-actions__grid{grid-template-columns:1fr}.ui-dashboard-card{min-height:9.25rem;padding:var(--space-4)}}

@media (max-width:575px){.app-footer{min-height:4.75rem;padding:var(--space-3) var(--space-4)}.app-footer__primary{gap:var(--space-1) var(--space-2)}.app-footer__separator{display:none}.app-footer__primary span{width:100%}}

@media (max-width: 575px) {
    .app-footer__identity {
        display: grid;
        gap: var(--space-1);
    }

    .app-footer__identity span {
        width: 100%;
    }
}

/* ACCOUNT MANAGEMENT RESPONSIVE
   Desktop/laptop keeps the compact one-row filter and two-column dialogs.
   Account-specific layout only collapses on genuinely narrow mobile viewports. */
@media (max-width: 680px) {
    .account-filter-bar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .account-filter-bar__search {
        grid-column: 1 / -1;
    }

    .account-filter-bar__create,
    .account-filter-bar__import {
        width:100%;
        justify-content:center;
    }

    .account-dialog__grid {
        grid-template-columns: 1fr;
    }

    .account-dialog__class-note {
        align-items:flex-start;
        padding-bottom:0;
    }

    .account-role-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-import-dialog__file-head,
    .account-import-dialog__file-row {
        grid-template-columns:1fr;
        display:grid;
    }

    .account-import-dialog__file-head .ui-button,
    .account-import-dialog__check {
        width:100%;
        justify-content:center;
    }

    .account-table-wrap {
        overflow-x:auto;
    }

    .account-table {
        min-width: 56rem;
    }
}

@media (max-width: 460px) {
    .account-filter-bar {
        grid-template-columns: 1fr;
    }

    .account-filter-bar__search,
    .account-filter-bar__create,
    .account-filter-bar__import {
        grid-column: 1;
    }

    .account-role-grid {
        grid-template-columns: 1fr;
    }
}

/* ROLE PERMISSION MANAGEMENT RESPONSIVE */
@media (max-width: 1100px) {
    .permission-role-switcher { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .permission-module-columns { grid-template-columns:1fr; }
    .effective-scope-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .permission-role-switcher { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .permission-center-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
    .account-permission-option { grid-template-columns:1fr; gap:.5rem; }
    .permission-role-summary {
        position:static;
        grid-template-columns:1fr;
    }
    .permission-role-summary__action { justify-content:flex-start; }
    .permission-system-note > div { display:grid; gap:.15rem; }
    .effective-scope-section__heading { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 520px) {
    .effective-scope-grid { grid-template-columns:1fr; }
    .permission-center-tabs { grid-template-columns:1fr; width:100%; }
}
@media (max-width: 460px) {
    .permission-role-switcher { grid-template-columns:1fr; }
    .permission-role-chip__label { white-space:normal; }
    .permission-module-card__header { grid-template-columns:1fr; }
    .permission-module-card__toggle { justify-self:start; padding-left:0; }
}

/* SYSTEM AUDIT LOG RESPONSIVE */
@media (max-width: 1100px) {
    .system-log-overview { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .system-log-overview__actions { grid-column:1 / -1; justify-content:flex-end; }
    .system-log-refresh,
    .system-log-export,
    .system-log-purge { width:auto; min-height:2.7rem; }
    .system-log-filter { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .system-log-filter__search,
    .system-log-filter__action { grid-column:auto; }
}
@media (max-width: 760px) {
    .system-log-overview { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .system-log-overview__actions { grid-column:1 / -1; }
    .system-log-filter { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .system-log-filter__search,
    .system-log-filter__action { grid-column:1 / -1; }
    .system-log-result-summary { align-items:flex-start; flex-direction:column; gap:.25rem; }
    .system-log-pagination { justify-content:space-between; }
}
@media (max-width: 520px) {
    .system-log-overview,
    .system-log-filter { grid-template-columns:1fr; }
    .system-log-overview__actions { grid-column:1; }
    .system-log-refresh,
    .system-log-export,
    .system-log-purge { width:100%; }
    .system-log-filter > .ui-field,
    .system-log-filter__search,
    .system-log-filter__action { grid-column:1; }
    .system-log-result-summary__actions { width:100%; justify-content:space-between; }
    .system-log-detail-modal__meta { grid-template-columns:1fr; }
    .system-log-detail-modal__meta-wide { grid-column:1; }
    .system-log-detail-modal__details > div { grid-template-columns:1fr; gap:.15rem; }
    .system-log-purge-dialog__summary { grid-template-columns:1fr; }
}

/* BUSINESS RESPONSIVE
   Table dạng card là hành vi opt-in.
   Chỉ bảng có class .business-table--stacked mới chuyển sang card.
   Các bảng danh sách chuẩn giữ nguyên dạng bảng và tự cuộn ngang. */
@media (max-width: 767px) {
    .business-filter-bar__fields {
        grid-template-columns: 1fr;
    }

    .business-filter-bar__actions,
    .business-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .business-pagination__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .business-table:not(.business-table--stacked) {
        min-width: 42rem;
    }

    .business-table--stacked {
        min-width: 0;
    }

    .business-table--stacked thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .business-table--stacked,
    .business-table--stacked tbody,
    .business-table--stacked tr,
    .business-table--stacked td {
        display: block;
        width: 100%;
    }

    .business-table--stacked tr {
        padding: var(--space-3);
        border-bottom: 1px solid var(--color-border);
    }

    .business-table--stacked td {
        display: grid;
        grid-template-columns: minmax(8rem, 42%) minmax(0, 1fr);
        gap: var(--space-3);
        padding: var(--space-2);
        border: 0;
        text-align: left;
    }

    .business-table--stacked td::before {
        content: attr(data-label);
        color: var(--color-muted);
        font-weight: var(--font-weight-medium);
    }

    .business-table--stacked .business-table__actions {
        text-align: left;
    }

    .business-table--stacked .business-table__empty {
        display: block !important;
    }

    .business-table--stacked .business-table__empty::before {
        content: none !important;
    }

    .business-detail-grid {
        grid-template-columns: 1fr;
    }

    .business-detail-list__item {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}

/* Sprint 22A-H — Home Dashboard responsive contract. */
@media(max-width:991px){.dashboard-quick-actions__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575px){.dashboard-home{gap:var(--space-4)}.dashboard-context{gap:var(--space-1);padding:var(--space-3)}.dashboard-context__line{gap:var(--space-1) var(--space-2);font-size:var(--font-size-xs)}.dashboard-context__item{white-space:normal}.dashboard-context__item:not(:last-child)::after{margin-left:var(--space-1)}.dashboard-quick-actions__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.ui-quick-action{min-height:4rem;align-items:center;padding:var(--space-2) var(--space-3)}.ui-quick-action__icon{width:2.25rem;height:2.25rem}.ui-quick-action strong{overflow:visible;text-overflow:clip;white-space:normal;line-height:1.25;overflow-wrap:anywhere}}