/* ================================================================
   ScoutLink mobile.css — Mobile-first responsive styles v1.1
   Problems 1-12: Full mobile responsiveness
   Base = mobile, tablet = 768px+, desktop = 1024px+
   ================================================================ */

/* ---------------------------------------------------------------
   BASE (all screens)
   --------------------------------------------------------------- */
html, body { overflow-x: hidden; max-width: 100%; }

/* Minimum touch targets everywhere */
button, .btn, a.btn, .nav-item {
  min-height: 44px;
  min-width: 44px;
}

/* Text overflow protection */
.sl-table td span, .notif-body, .topbar-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bottom padding for browser chrome */
body { padding-bottom: 60px; }

/* ---------------------------------------------------------------
   MOBILE: max-width 767px
   --------------------------------------------------------------- */
@media (max-width: 767px) {

  /* Problem 9: Body safe area */
  body { padding-bottom: 80px !important; }

  /* Problem 8: Content padding */
  .page-content { padding: 16px !important; }

  /* ---- Problem 1: Kill two-column grids ---- */
  /* Named classes */
  .dash-two-col {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
  .kpi-grid-4 {
    grid-template-columns: 1fr 1fr !important;
    display: grid !important;
  }

  /* ---- Problem 6: KPI metric cards — 2x2 compact ---- */
  .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .kpi-card {
    padding: 12px !important;
    max-height: 100px !important;
    overflow: hidden !important;
  }
  .kpi-value {
    font-size: 24px !important;
    line-height: 1 !important;
  }
  .kpi-label { font-size: 11px !important; }

  /* Scout KPI cards */
  .scout-kpi { padding: 12px !important; }
  .scout-kpi-val { font-size: 22px !important; }
  .scout-kpi-label { font-size: 11px !important; }

  /* ---- Problem 2 & 3: Sidebar and header ---- */
  /* Sidebar hidden off-screen by default */
  .sidebar {
    transform: translateX(-100%) !important;
    width: 280px !important;
    z-index: 1001 !important;
    transition: transform 0.3s ease !important;
    position: fixed !important;
    top: 0 !important; bottom: 0 !important; left: 0 !important;
  }
  .sidebar.mobile-open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5) !important;
  }

  /* Sidebar backdrop */
  .sidebar-backdrop { display: none; }
  .sidebar-backdrop.active { display: block !important; }

  /* Full-width content */
  .dashboard-main { margin-left: 0 !important; width: 100% !important; }

  /* Topbar */
  .topbar {
    padding: 0 12px !important;
    height: 56px !important;
    gap: 8px !important;
  }
  .topbar-title {
    font-size: 15px !important;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-hamburger { display: flex !important; }
  .topbar .btn-ghost.desktop-signout { display: none !important; }
  .notif-btn { min-width: 44px; min-height: 44px; }

  /* Sidebar sign-out on mobile */
  .sidebar-signout-mobile {
    display: block !important;
    padding: 12px 20px 20px;
    border-top: 1px solid var(--border);
    margin-top: auto;
  }

  /* ---- Problem 4: Table readability ---- */
  .sl-table th { padding: 10px 8px !important; font-size: 11px !important; }
  .sl-table td {
    padding: 12px 8px !important;
    font-size: 13px !important;
    min-height: 48px !important;
    vertical-align: middle !important;
  }
  /* Email truncation in tables */
  .sl-table td span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
  }
  /* Allow table scrolling without causing page scroll */
  .sl-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-card { overflow: hidden; }

  /* ---- Problem 5: Buttons ---- */
  .btn { min-height: 44px !important; }
  .btn-sm { min-height: 40px !important; padding: 8px 12px !important; font-size: 12px !important; }
  /* Inline table buttons stay compact */
  .sl-table .btn { min-height: 40px !important; }
  /* Primary CTA buttons full width in forms */
  .form-container .btn-primary,
  .form-page .btn-primary { width: 100% !important; justify-content: center !important; }

  /* ---- Problem 7: Player grid → single column ---- */
  .player-grid { grid-template-columns: 1fr !important; }
  .features-grid { grid-template-columns: 1fr !important; }

  /* Form rows → single column */
  .form-row, .form-row.cols-3 { grid-template-columns: 1fr !important; }

  /* ---- Problem 8: Typography and spacing ---- */
  h1 { font-size: 22px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 15px !important; }
  .table-header { padding: 14px 16px !important; }
  .page-content { min-width: 0 !important; }

  /* Min 16px screen edge margins */
  .table-card,
  .kpi-card,
  .modal,
  .form-container { margin-left: 0 !important; margin-right: 0 !important; }

  /* ---- Modals ---- */
  .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  .modal {
    max-width: 100% !important;
    max-height: 94vh !important;
    border-radius: 16px 16px 0 0 !important;
    overflow-y: auto !important;
  }

  /* ---- Notification panel ---- */
  .notif-panel { width: 100% !important; top: 56px !important; }

  /* ---- Chip / preference ---- */
  .pref-chips { gap: 6px !important; }
  .chip { padding: 6px 10px !important; font-size: 12px !important; }

  /* ---- Login/auth pages ---- */
  .form-page-inner { padding: 20px 16px !important; }
  .form-container { max-width: 100% !important; }

  /* ---- Bulk tables ---- */
  .bulk-table-wrap { overflow-x: auto !important; }

  /* ---- Tab bars ---- */
  .tab-bar { overflow-x: auto; }
  .tab-btn { white-space: nowrap; flex: 0 0 auto; }

  /* Hero stats */
  .hero-stats { flex-direction: column; gap: 12px; }
  .stat-divider { display: none; }

  /* Platform overview section */
  .platform-overview-grid { grid-template-columns: 1fr 1fr !important; }

  /* Range grid */
  .range-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---------------------------------------------------------------
   TABLET: 768px and up
   --------------------------------------------------------------- */
@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar-hamburger { display: none !important; }
  .topbar .btn-ghost.desktop-signout { display: inline-flex !important; }
  .sidebar-signout-mobile { display: none !important; }
  .dash-two-col { grid-template-columns: 1fr 1fr !important; }
  .kpi-grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ---------------------------------------------------------------
   DESKTOP: 1024px and up
   --------------------------------------------------------------- */
@media (min-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .sidebar { transform: translateX(0) !important; transition: none !important; }
  .sidebar-backdrop { display: none !important; }
  .dashboard-main { margin-left: 240px !important; }
  .dash-two-col { grid-template-columns: 1fr 1fr !important; }
}

/* ---------------------------------------------------------------
   LOGO & ICONS — Problem 2
   --------------------------------------------------------------- */
.sidebar-logo a {
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-logo-svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Hamburger icon */
.hamburger-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}
.hamburger-icon span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: 0.2s ease;
}

/* Notif bell text fix (emoji rendering) */
.notif-btn { font-size: 18px; line-height: 1; }

/* ---------------------------------------------------------------
   ScoutLink phone experience v2
   --------------------------------------------------------------- */
@media (max-width: 767px) {
  html, body { width: 100%; min-width: 0; }
  body { background: var(--bg, #080d14) !important; padding-bottom: env(safe-area-inset-bottom, 0) !important; }

  .dashboard {
    display: block !important;
    min-height: 100svh !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .dashboard-main {
    margin-left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 850 !important;
    height: 58px !important;
    padding: 8px 12px 8px 112px !important;
    background: rgba(13, 20, 30, .96) !important;
    border-bottom: 1px solid rgba(148, 163, 184, .18) !important;
    backdrop-filter: blur(14px);
  }

  .topbar-title {
    min-width: 0 !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  .topbar-right {
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  .topbar .desktop-signout {
    display: none !important;
  }

  .topbar-hamburger {
    display: inline-flex !important;
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
    left: 10px !important;
    z-index: 1205 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 86px !important;
    height: 42px !important;
    padding: 0 12px !important;
    margin-right: 2px !important;
    background: #07111f !important;
    color: var(--text, #f8fafc) !important;
    border: 1px solid rgba(29,158,117,.45) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  .hamburger-label {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
  }

  .hamburger-icon {
    width: 18px !important;
    gap: 4px !important;
  }

  .hamburger-icon span {
    width: 18px !important;
    height: 2px !important;
    background: var(--green, #00e676) !important;
  }

  .sidebar {
    width: min(86vw, 320px) !important;
    max-width: 320px !important;
    height: 100svh !important;
    transform: translateX(-104%) !important;
    transition: transform .22s ease !important;
    background: #0d141e !important;
    border-right: 1px solid rgba(148, 163, 184, .2) !important;
    overflow-y: auto !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0)) !important;
  }

  .sidebar.mobile-open {
    transform: translateX(0) !important;
    box-shadow: 16px 0 60px rgba(0, 0, 0, .46) !important;
  }

  .sidebar-logo {
    min-height: 58px !important;
    padding: 16px 18px !important;
    border-bottom: 1px solid rgba(148, 163, 184, .16) !important;
  }

  .sidebar-logo a {
    font-size: 21px !important;
    letter-spacing: 0 !important;
  }

  .sidebar-nav {
    padding: 10px !important;
    display: grid !important;
    gap: 4px !important;
  }

  .nav-item {
    min-height: 46px !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    gap: 10px !important;
    font-size: 14px !important;
  }

  .nav-item svg {
    width: 18px !important;
    height: 18px !important;
  }

  .sidebar-user {
    margin: 10px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: #07111f !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
  }

  .sidebar-signout-mobile {
    display: block !important;
    padding: 0 10px 10px !important;
  }

  .sidebar-signout-mobile .btn {
    justify-content: center !important;
    width: 100% !important;
    color: #ffb4b4 !important;
    border: 1px solid rgba(255, 120, 120, .2) !important;
    background: rgba(255, 90, 90, .05) !important;
  }

  .sidebar-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    display: none !important;
    background: rgba(2, 6, 12, .62) !important;
    backdrop-filter: blur(2px);
  }

  .sidebar-backdrop.active {
    display: block !important;
  }

  .page-content {
    padding: 12px !important;
    max-width: 100% !important;
  }

  .table-card,
  .kpi-card,
  .card,
  .panel,
  .scout-card {
    border-radius: 12px !important;
    max-width: 100% !important;
  }

  .table-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px !important;
    flex-wrap: wrap !important;
  }

  .table-header h2,
  .table-header h3,
  .table-header h4 {
    min-width: 0 !important;
    flex: 1 1 180px !important;
    line-height: 1.2 !important;
  }

  .table-header .btn,
  .table-header button,
  .table-header select {
    flex: 0 0 auto !important;
  }

  .kpi-grid,
  .kpi-grid-4,
  .features-grid,
  .player-grid,
  .dash-two-col,
  .profile-grid,
  .compare-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .kpi-grid.compact-mobile,
  .kpi-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .mobile-card-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .mobile-card-table thead {
    display: none !important;
  }

  .mobile-card-table tbody {
    display: grid !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  .mobile-card-table tr {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    border: 1px solid rgba(148, 163, 184, .17) !important;
    border-radius: 12px !important;
    background: #07111f !important;
  }

  .mobile-card-table td {
    display: grid !important;
    grid-template-columns: minmax(86px, 34%) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--text, #f8fafc) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .mobile-card-table td:before {
    content: attr(data-label);
    color: var(--text3, #8ea2b5);
    font-size: 10px;
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: .06em;
  }

  .mobile-card-table td.mobile-empty-cell {
    display: none !important;
  }

  .mobile-card-table td.mobile-actions-cell,
  .mobile-card-table td:last-child {
    grid-template-columns: 1fr !important;
    padding-top: 4px !important;
  }

  .mobile-card-table td.mobile-actions-cell:before,
  .mobile-card-table td:last-child:before {
    display: none !important;
  }

  .mobile-card-table td.mobile-actions-cell .btn,
  .mobile-card-table td:last-child .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .bulk-table-wrap,
  .bulk-scroll,
  .table-scroll {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .bulk-table {
    min-width: 1180px !important;
    width: max-content !important;
  }

  .bulk-table input,
  .bulk-table select {
    min-width: 104px !important;
  }

  .form-row,
  .form-row.cols-3,
  .filter-row,
  .controls-row {
    grid-template-columns: 1fr !important;
  }

  input, select, textarea {
    font-size: 16px !important;
  }

  .btn,
  button,
  a.btn {
    border-radius: 10px !important;
  }

  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92svh !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .notif-panel {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    top: 58px !important;
    max-height: calc(100svh - 58px) !important;
  }

  .chat-shell {
    display: block !important;
    min-height: calc(100svh - 82px) !important;
  }

  .chat-shell .thread-list {
    background: #07111f !important;
  }

  .chat-shell .thread-list .table-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: #0d141e !important;
    border-bottom: 1px solid rgba(148,163,184,.18) !important;
  }

  .thread-item {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 14px 12px !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(148,163,184,.12) !important;
  }

  .thread-item.active,
  .thread-item:hover {
    background: rgba(29,158,117,.08) !important;
  }

  .thread-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #00e676, #1d9e75) !important;
    color: #001b12 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  .thread-main {
    min-width: 0 !important;
  }

  .thread-title {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 3px !important;
  }

  .thread-meta {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #8ea2b5 !important;
  }

  .thread-side {
    display: grid !important;
    justify-items: end !important;
    gap: 6px !important;
    color: #8ea2b5 !important;
    font-size: 11px !important;
  }

  .chat-shell.chat-mobile-conversation {
    position: fixed !important;
    inset: 58px 0 0 !important;
    z-index: 840 !important;
    background: #07111f !important;
  }

  .chat-shell .thread-list,
  .chat-shell .chat-pane {
    border-radius: 12px !important;
    min-height: calc(100svh - 92px) !important;
  }

  .chat-shell .thread-list {
    max-height: none !important;
  }

  .chat-shell.chat-mobile-list .chat-pane {
    display: none !important;
  }

  .chat-shell.chat-mobile-conversation .thread-list {
    display: none !important;
  }

  .chat-shell.chat-mobile-conversation .chat-pane {
    display: flex !important;
    height: calc(100svh - 58px) !important;
    min-height: calc(100svh - 58px) !important;
    border-radius: 0 !important;
    border: 0 !important;
  }

  .chat-mobile-back {
    display: inline-flex !important;
    flex: 0 0 100% !important;
    justify-content: flex-start !important;
    min-height: 38px !important;
    padding-left: 0 !important;
  }

  .chat-head {
    flex-wrap: wrap !important;
    padding: 12px !important;
    background: #0d141e !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
  }

  .share-bar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  .share-bar[style*="display: none"] {
    display: none !important;
  }

  .share-bar select,
  .share-bar .btn {
    width: 100% !important;
    max-width: none !important;
  }

  .messages {
    min-height: 0 !important;
    padding: 14px 10px !important;
    background: #07111f !important;
  }

  .msg {
    max-width: 84% !important;
    border-radius: 18px 18px 18px 5px !important;
    padding: 9px 11px !important;
    background: #111827 !important;
    border-color: rgba(148,163,184,.14) !important;
  }

  .msg.mine {
    border-radius: 18px 18px 5px 18px !important;
    background: rgba(29,158,117,.22) !important;
    border-color: rgba(29,158,117,.35) !important;
  }

  .composer {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    padding: 10px !important;
    background: #0d141e !important;
    border-top: 1px solid rgba(148,163,184,.16) !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .composer textarea {
    min-height: 44px !important;
    max-height: 100px !important;
  }

  .composer .btn {
    min-width: 72px !important;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .topbar {
    height: 50px !important;
    padding: 6px 10px 6px 104px !important;
  }

  .topbar-hamburger {
    height: 38px !important;
    top: max(6px, env(safe-area-inset-top, 0px)) !important;
  }

  .page-content {
    padding: 10px !important;
  }

  .kpi-grid,
  .kpi-grid-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .mobile-card-table tbody {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .chat-shell .thread-list,
  .chat-shell .chat-pane,
  .chat-shell.chat-mobile-conversation .chat-pane {
    min-height: calc(100svh - 70px) !important;
    height: calc(100svh - 70px) !important;
  }

  .chat-shell.chat-mobile-list .thread-list {
    min-height: calc(100svh - 70px) !important;
  }

  .thread-item {
    padding: 10px 12px !important;
  }
}

/* fix-coach-mobile-experience v3 coach rules */
@media (max-width: 767px) {
     .dashboard-grid, .stats-grid { grid-template-columns: 1fr 1fr !important; }
     .player-list-row, .fixture-row, .video-card-row { flex-direction: column !important; gap: 8px !important; }
     .form-group-inline { flex-direction: column !important; width: 100% !important; }
     .main-content { padding: 16px !important; margin-left: 0 !important; width: 100% !important; }
     .table-wrap, .data-table-wrap { overflow-x: scroll !important; -webkit-overflow-scrolling: touch !important; }
     input, select, textarea { box-sizing: border-box !important; }
     .btn-primary, .btn-full { width: 100% !important; justify-content: center !important; }
     .card, .stat-card { padding: 16px !important; border-radius: 10px !important; }
     .pitch-diagram, .formation-pitch { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 300px !important; }
     .position-slot, .pitch-slot { width: 44px !important; height: 44px !important; font-size: 10px !important; }
     .step-nav, .step-buttons { flex-direction: column !important; gap: 8px !important; width: 100% !important; }
     .step-nav .btn, .step-buttons .btn { width: 100% !important; }
     .kpi-value, .kpi-val { word-break: break-word !important; overflow: hidden !important; }
     .video-grid, .reel-grid { grid-template-columns: 1fr !important; }
}

/* ScoutLink phone experience v3 - core action polish */
@media (max-width: 767px) {
  body.mobile-drawer-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  .topbar-right.mobile-action-group,
  .table-header.mobile-action-group {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .topbar-right.mobile-action-group::-webkit-scrollbar,
  .table-header.mobile-action-group::-webkit-scrollbar {
    display: none !important;
  }

  .topbar-right {
    max-width: 48vw !important;
    min-width: 0 !important;
  }

  .topbar-right .btn,
  .topbar-right button:not(.notif-btn) {
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .table-header .btn,
  .table-header button,
  .table-header select {
    min-height: 40px !important;
    max-width: 100% !important;
  }

  .table-header select {
    flex: 1 1 150px !important;
  }

  .page-content > .tab-bar,
  .tab-bar {
    display: flex !important;
    gap: 8px !important;
    padding-bottom: 2px !important;
    max-width: 100% !important;
  }

  .tab-bar .tab-btn {
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  .table-card > div[style*="padding"],
  .form-container,
  .modal form,
  .detail-box {
    min-width: 0 !important;
  }

  .form-group {
    margin-bottom: 14px !important;
  }

  .policy-check {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 12px !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .policy-check input[type="checkbox"] {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    margin-top: 1px !important;
  }

  .policy-check p {
    min-width: 0 !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere !important;
  }

  .form-group label {
    display: block !important;
    margin-bottom: 7px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  input,
  select,
  textarea {
    width: 100% !important;
    min-height: 44px !important;
    line-height: 1.25 !important;
  }

  textarea {
    min-height: 96px !important;
  }

  .form-actions,
  .modal-actions,
  .actions,
  .step-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .form-actions .btn,
  .modal-actions .btn,
  .actions .btn,
  .step-buttons .btn,
  .table-card > div[style*="padding"] > .btn,
  .table-card > div[style*="padding"] > button {
    width: 100% !important;
    justify-content: center !important;
  }

  .mobile-card-table tbody {
    padding: 10px !important;
  }

  .mobile-card-table tr {
    box-shadow: none !important;
  }

  .mobile-card-table td {
    font-size: 13px !important;
  }

  .mobile-card-table td:first-child {
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  .mobile-card-table td .badge {
    display: inline-flex !important;
    max-width: 100% !important;
  }

  .mobile-card-table td.mobile-actions-cell,
  .mobile-card-table td:last-child {
    display: grid !important;
    gap: 8px !important;
  }

  .mobile-card-table td.mobile-actions-cell > div,
  .mobile-card-table td:last-child > div {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .mobile-card-table td.mobile-actions-cell .btn,
  .mobile-card-table td:last-child .btn,
  .mobile-card-table td.mobile-actions-cell button,
  .mobile-card-table td:last-child button {
    min-height: 40px !important;
    width: 100% !important;
  }

  .mobile-sheet-modal.detail-modal,
  .mobile-sheet-modal.modal-overlay,
  .detail-modal,
  .modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .detail-box,
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92svh !important;
    margin: auto 0 0 !important;
    border-radius: 18px 18px 0 0 !important;
    overflow-y: auto !important;
    padding: 18px !important;
  }

  .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .detail-stat {
    min-width: 0 !important;
    padding: 12px !important;
  }

  .detail-label {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .detail-value {
    font-size: 14px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .kpi-grid,
  .dashboard-grid,
  .stats-grid,
  .metric-grid {
    gap: 10px !important;
  }

  .kpi-card,
  .stat-card,
  .metric,
  .table-card {
    border-color: rgba(148,163,184,.18) !important;
  }

  .bulk-table-wrap {
    border: 1px solid rgba(148,163,184,.18) !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .topbar-right {
    max-width: 58vw !important;
  }

  .detail-box,
  .modal {
    max-height: calc(100svh - 50px) !important;
    border-radius: 14px !important;
    margin: 0 auto !important;
    max-width: min(92vw, 900px) !important;
  }

  .detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .form-row,
  .form-row.cols-3,
  .filter-row,
  .controls-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .mobile-card-table tbody {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .form-actions,
  .modal-actions,
  .actions,
  .step-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}