/* Shared mobile layout for admin + client portal */
@media (max-width: 900px) {
  body.notif-open {
    overflow: hidden;
  }

  body.notif-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 205;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: auto;
  }

  .topbar {
    overflow: visible;
    z-index: 40;
    padding: 0 12px;
    width: 100%;
  }

  .tb-right {
    position: relative;
    z-index: 41;
  }

  .nw {
    position: static;
  }

  .np,
  body.notif-open #np,
  #np.np-sheet {
    position: fixed !important;
    top: calc(var(--topbar-h, 56px) + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    max-height: min(72vh, 520px);
    z-index: 210;
    display: none;
    flex-direction: column;
  }

  .np.on,
  body.notif-open #np.on,
  #np.np-sheet.on {
    display: flex !important;
  }

  .np-list {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #app,
  .layout {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .layout {
    display: flex;
    flex-direction: row;
  }
  .sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100dvh;
    width: min(var(--sidebar-exp, 224px), 88vw) !important;
    min-width: 0 !important;
    transform: translateX(-100%);
    z-index: 60;
    flex: none !important;
    border-right: 1px solid var(--border);
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }
  .sidebar:hover:not(.mobile-open) {
    width: min(var(--sidebar-exp, 224px), 88vw) !important;
  }
  .main {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: 100vw;
  }
  .hamburger {
    display: flex !important;
  }
  .content {
    padding: 14px 12px;
    width: 100%;
    max-width: 100%;
  }
  .page-title {
    font-size: 14px;
  }
  .sec-hd h2 {
    font-size: 18px;
  }
  .sg4,
  .sg3 {
    grid-template-columns: 1fr 1fr;
  }
  .stats-row {
    flex-wrap: wrap;
  }
  .stats-cell {
    flex: 1 1 calc(50% - 6px);
    min-width: 140px;
  }
  .d-top,
  .sec-hd {
    flex-direction: column;
    align-items: stretch;
  }
  .sec-acts,
  .pill-g {
    width: 100%;
    flex-wrap: wrap;
  }
  .pill-g .dp {
    flex: 1;
    text-align: center;
    min-width: 0;
  }
  .table-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
  }
  .table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    touch-action: pan-x pan-y;
  }
  .table-scroll-hint {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 10.5px;
    color: var(--text2);
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
  }
  .table-scroll-hint i {
    font-size: 12px;
    opacity: 0.75;
    flex-shrink: 0;
  }
  .table-wrap.can-scroll-h:not(.scrolled-end) .table-scroll {
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  .data-table {
    min-width: 520px;
    width: 100%;
  }
  .data-table th,
  .data-table td {
    padding: 8px 10px;
    font-size: 11px;
  }
  .modal-overlay {
    padding: 10px;
    align-items: flex-end;
  }
  .modal {
    max-width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .kanban {
    padding-bottom: 12px;
  }
  .kb-col {
    min-width: 240px;
    width: 240px;
  }
  .charts-row,
  .charts-2,
  .charts-3,
  .b-grid,
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .profile-page-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .sg4,
  .sg3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sg2,
  .form-grid,
  .profile-grid {
    grid-template-columns: 1fr;
  }
  .pw-grid {
    grid-template-columns: 1fr;
  }
  .stats-cell {
    flex: 1 1 calc(50% - 6px);
    min-width: 120px;
  }
  .stat-card {
    padding: 12px 14px;
  }
  .s-val {
    font-size: 20px;
  }
  .prod-stage {
    min-width: 100%;
    flex: 1 1 100%;
  }
  .file-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .data-table {
    min-width: 440px;
  }
  .u-name {
    display: none;
  }
}

@media (max-width: 400px) {
  .file-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Compact typography & spacing — admin + client mobile */
@media (max-width: 900px) {
  .content {
    padding: 12px 10px !important;
  }
  .sec-hd {
    margin-bottom: 12px;
  }
  .sec-hd h2 {
    font-size: 17px !important;
  }
  .sec-hd p {
    font-size: 11px !important;
  }
  .stat-card {
    padding: 10px 12px !important;
  }
  .s-lbl {
    font-size: 10px !important;
  }
  .s-val {
    font-size: clamp(17px, 4.5vw, 21px) !important;
  }
  .card .c-hd {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .card .c-body {
    padding: 12px;
  }
  .c-title {
    font-size: 11.5px !important;
  }
  .btn {
    padding: 6px 11px;
    font-size: 11px;
  }
  .btn-sm {
    padding: 5px 9px;
    font-size: 10.5px;
  }
  .data-table th,
  .data-table td {
    padding: 7px 8px !important;
    font-size: 10.5px !important;
  }
  .table-filters {
    padding: 8px 10px;
  }
  .page-title {
    font-size: 13px !important;
  }
  .topbar {
    height: 50px;
    padding: 0 10px !important;
  }
  .np-hd {
    padding: 10px 12px;
  }
  .notif-item {
    padding: 9px 12px;
  }
  .notif-text {
    font-size: 11.5px;
  }
  .dash-catalog-card {
    padding: 10px 12px;
    gap: 8px;
  }
  .dash-catalog-meta strong {
    font-size: 12px;
  }
}