/* =====================================================================
   Responsive layer — tablets & phones (loaded last)
   ===================================================================== */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, canvas { max-width: 100%; }
.main, .content, .card-x, .row > * { min-width: 0; }
.stat-grid, .quick-grid, .card-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
.card-grid { grid-template-columns: repeat(auto-fill, minmax(min(255px, 100%), 1fr)); }

/* tablets */
@media (max-width: 1199px) {
    .stat-grid { --cols: 2; }
    .quick-grid { --cols: 4; }
    .canvas-panel { width: 520px; }
}
@media (max-width: 991px) {
    .page-head { padding: 16px; }
    .page-watermark { font-size: 5rem; }
    .hero-card { flex-direction: column; align-items: flex-start; }
    .notif-pop { width: 320px; }
    .filter-bar .search-box { max-width: none; flex: 1 1 100%; }
    .item-media { height: 150px; }
    .l-nav .btn-ghost-l { display: none; }
    .page-hero { padding-top: 110px; }
    .showcase .img-frame { max-width: 560px; margin: 0 auto; }
}

/* phones */
@media (max-width: 767px) {
    body.app { font-size: .9rem; }
    .topbar-right { gap: 6px; }
    .icon-btn { width: 38px; height: 38px; border-radius: 12px; }
    .btn-sos span { display: none; }
    .page-head { flex-direction: column; align-items: stretch; gap: 12px; }
    .page-actions { width: 100%; }
    .page-actions .btn { flex: 1 1 auto; justify-content: center; }
    .page-watermark { display: none; }
    .page-title { font-size: 1.2rem; }
    .stat-grid { --cols: 1; gap: 12px; }
    .stat { padding: 16px; }
    .stat-value { font-size: 1.45rem; }
    .quick-grid { --cols: 2; gap: 10px; }
    .hero-card { padding: 20px; border-radius: 20px; }
    .hero-card h2 { font-size: 1.35rem; }
    .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
    .card-x.p-4 { padding: 16px !important; }
    .chip-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
    .chip-row::-webkit-scrollbar { display: none; }
    .chip { flex: none; }
    .filter-bar { padding: 12px; }
    .filter-select { flex: 1 1 100%; min-width: 0; }
    .card-grid { padding: 12px; gap: 14px; }
    .detail-list { grid-template-columns: 1fr; }
    .table-foot { justify-content: center; }
    .canvas-panel { width: 100vw; border-radius: 0; }
    .canvas-content .modal-body, .canvas-content .modal-header, .canvas-content .modal-footer { padding-inline: 16px; }
    .canvas-content .modal-footer .btn { flex: 1; }
    .canvas-confirm { margin: 0 10px 10px; max-width: none; }
    .method-grid { grid-template-columns: repeat(2, 1fr); }
    .poll-opt, .poll-label { padding: 11px 13px; }
    .profile-cover { margin: 0 -16px; }
    .notif-pop { position: fixed !important; left: 10px !important; right: 10px !important; top: 66px !important; width: auto; transform: none !important; }
    .menu-pop { min-width: 210px; }

    /* dashboard / report tables: tidy horizontal scroll */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .table-x:not(.table-stack) th, .table-x:not(.table-stack) td { white-space: nowrap; }

    /* list tables → stacked cards */
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    .table-stack thead { display: none; }
    .table-stack tr { width: auto; margin: 12px; padding: 8px 2px; border: 1px solid var(--border); border-radius: 18px; background: var(--card) !important; box-shadow: var(--shadow); }
    .table-stack tbody tr:nth-child(even) { background: var(--card) !important; }
    .table-stack tbody tr:hover { box-shadow: var(--shadow); }
    .table-stack td { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 14px !important; border: 0 !important; text-align: right; white-space: normal; }
    .table-stack td::before { content: attr(data-label); flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); text-align: left; }
    .table-stack td:first-child { padding-top: 12px !important; padding-bottom: 12px !important; border-bottom: 1px dashed var(--border) !important; font-size: 1rem; }
    .table-stack td:first-child::before { display: none; }
    .table-stack td:first-child .cell-first { flex: 1; }
    .table-stack td[data-label="Actions"] { justify-content: flex-end; border-top: 1px dashed var(--border) !important; margin-top: 6px; padding-top: 12px !important; }
    .table-stack td[data-label="Actions"]::before { display: none; }
    .table-stack td .row-actions { justify-content: flex-end; }
    .table-stack td .thumb { margin-left: auto; }
}
@media (max-width: 420px) {
    .content { padding-inline: 12px; }
    .topbar { padding-inline: 10px; }
    .crumbs { font-size: .74rem; }
    .quick-tile b { font-size: .7rem; }
}

/* website (landing) */
@media (max-width: 767px) {
    .l-hero { padding: 110px 0 60px; }
    .l-hero h1 { font-size: 2.1rem; letter-spacing: -1px; }
    .hero-stats { gap: 22px; }
    .hero-stats b { font-size: 1.5rem; }
    .l-section { padding: 56px 0; }
    .page-hero { padding: 100px 0 44px; }
    .form-panel { padding: 22px; border-radius: 22px; }
    .stats-band b { font-size: 1.8rem; }
    .j-item { flex-direction: column; gap: 4px; }
    .plan { padding: 26px 22px; }
    .trust-strip .container { gap: 10px 12px; }
    .l-cta .btn.ms-2 { margin: 10px 0 0 !important; }
    .compare { font-size: .8rem; }
    .compare th, .compare td { padding: 10px 8px; }
}