/* ============================================
   DRCC — responsive.css
   Final responsive polish — all pages, all breakpoints
   ============================================ */

/* ============================================================
   GLOBAL FIXES
   ============================================================ */

/* Prevent horizontal overflow on mobile */
html, body { overflow-x: hidden; }

/* Tables: always scrollable on small screens */
.crud-table-wrap, .table-wrap {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}
.crud-table-wrap table, .drcc-table {
  min-width: 520px;
}

/* Cards & grids: no overflow */
.card, .stat-card, .signal-panel, .ai-card {
  min-width: 0;
  overflow: hidden;
}

/* Buttons: don't break on mobile */
.btn, .btn-login { white-space: nowrap; }
.page-header-right { flex-wrap: wrap; gap: 6px; }

/* ============================================================
   BREAKPOINT: ≤1200px (laptop)
   ============================================================ */
@media (max-width: 1200px) {
  .dash-stat-grid         { grid-template-columns: repeat(2, 1fr); }
  .agent-grid             { grid-template-columns: repeat(2, 1fr); }
  .resource-type-grid     { grid-template-columns: repeat(3, 1fr); }
  .ai-out-3col            { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   BREAKPOINT: ≤992px (tablet landscape)
   ============================================================ */
@media (max-width: 992px) {
  /* Dashboard */
  .dash-main-grid         { grid-template-columns: 1fr; }
  .dash-bottom-grid       { grid-template-columns: 1fr; }
  .dash-ai-grid           { grid-template-columns: repeat(2, 1fr); }

  /* AI Command output */
  .ai-out-3col            { grid-template-columns: 1fr; }
  .ai-main-grid           { grid-template-columns: 1fr; }

  /* Settings */
  .settings-grid          { grid-template-columns: 1fr; }

  /* Signals */
  .signal-grid            { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

  /* Resources type grid */
  .resource-type-grid     { grid-template-columns: repeat(3, 1fr); }

  /* Logistics plan 4-col → 2-col */
  .ai-out-card [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   BREAKPOINT: ≤768px (tablet portrait)
   ============================================================ */
@media (max-width: 768px) {

  /* Sidebar: fixed overlay on mobile (handled in layout.css) */

  /* Navbar: compact */
  .navbar { padding: 0 12px; gap: 6px; }
  .navbar-page-title h4 { font-size: 14px; }
  .user-info { display: none; }

  /* Page content: less padding */
  .page-content { padding: 12px; }

  /* Stat grids */
  .dash-stat-grid         { grid-template-columns: 1fr 1fr; gap: 10px; }
  .crud-stats             { gap: 8px; }
  .crud-stat-card         { padding: 12px 14px; min-width: 90px; }
  .crud-stat-num          { font-size: 24px; }

  /* Agent cards */
  .agent-grid             { grid-template-columns: 1fr 1fr; }

  /* AI Command */
  .ai-main-grid           { grid-template-columns: 1fr; }

  /* Resource type grid */
  .resource-type-grid     { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .rt-icon                { width: 28px; height: 28px; font-size: 13px; }
  .rt-count               { font-size: 16px; }

  /* Map: hide side panel on mobile */
  .map-side-panel         { display: none; }
  .map-layer-panel        { max-width: 140px; font-size: 11px; }
  .map-legend             { display: none; }
  .map-top-bar            { padding: 8px 12px; gap: 8px; }
  .map-stats              { display: none; }

  /* Signal panels */
  .signal-grid            { grid-template-columns: 1fr; }

  /* History filter bar */
  .hist-filter-bar        { flex-wrap: wrap; gap: 8px; }
  .hist-filter-sep        { display: none; }
  .hist-filter-group      { flex: 1; min-width: 130px; }

  /* Data action grid */
  .data-action-grid       { grid-template-columns: 1fr; }

  /* Table: hide secondary columns */
  .hide-mobile            { display: none !important; }

  /* Forms: single column */
  .form-grid-2,
  .form-grid-3            { grid-template-columns: 1fr; }

  /* Toolbar */
  .crud-toolbar           { flex-direction: column; align-items: stretch; gap: 8px; }
  .crud-toolbar-left,
  .crud-toolbar-right     { width: 100%; }

  /* Search bar */
  .search-bar             { width: 100% !important; }

  /* Modal: full-width on mobile */
  .crud-modal-inner,
  .add-signal-modal-box   { max-width: 100%; margin: 8px; border-radius: var(--radius-lg); }

  /* Login: single column */
  .login-container        { grid-template-columns: 1fr; max-width: 440px; }
  .login-left             { padding: 20px; }
  .login-features         { display: none; }

  /* Dashboard donut chart */
  .donut-wrap             { flex-direction: column; align-items: center; }
  .donut-canvas-wrap      { width: 140px; height: 140px; }
}

/* ============================================================
   BREAKPOINT: ≤576px (mobile)
   ============================================================ */
@media (max-width: 576px) {

  /* Stats: 2 per row on all pages */
  .dash-stat-grid         { grid-template-columns: 1fr 1fr; }
  .crud-stats             { grid-template-columns: 1fr 1fr; display: grid; }

  /* Agent cards: 1 per row */
  .agent-grid             { grid-template-columns: 1fr; }
  .dash-ai-grid           { grid-template-columns: 1fr; }

  /* Resource type: 2 per row */
  .resource-type-grid     { grid-template-columns: repeat(2, 1fr); }

  /* Page header: stack */
  .page-header            { flex-direction: column; align-items: flex-start; gap: 10px; }
  .page-header-right      { width: 100%; justify-content: flex-end; }

  /* Smaller value display in signal panels */
  .signal-value           { font-size: 24px; }
  .stat-value             { font-size: 22px; }

  /* AI output logistics: 2-col */
  .ai-out-card [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Filter tabs: wrap */
  .filter-tabs            { flex-wrap: wrap; gap: 3px; }

  /* Pagination: compact */
  .pagination             { justify-content: center; flex-wrap: wrap; gap: 3px; }
  .page-btn               { width: 28px; height: 28px; font-size: 11px; }

  /* Role grid on login */
  .role-grid              { grid-template-columns: repeat(2, 1fr); }

  /* demo grid */
  .demo-grid              { grid-template-columns: 1fr; }

  /* Navbar: very compact */
  .navbar-clock           { display: none; }

  /* Hide resource unit labels */
  .resource-unit          { display: none; }
  .legend-pct             { display: none; }
}

/* ============================================================
   BREAKPOINT: ≤400px (tiny phones)
   ============================================================ */
@media (max-width: 400px) {
  .page-content           { padding: 8px; }
  .dash-stat-grid         { grid-template-columns: 1fr; }
  .crud-stats             { grid-template-columns: 1fr; }
  .resource-type-grid     { grid-template-columns: repeat(2, 1fr); }
  .agent-grid             { grid-template-columns: 1fr; }
  .stat-value             { font-size: 20px; }
}

/* ============================================================
   LOADING SKELETON ENHANCEMENTS
   ============================================================ */
.page-skeleton {
  animation: fadeInUp 0.3s ease;
}

.skeleton-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px;
}

.skeleton-line {
  background: linear-gradient(90deg, var(--border) 25%, rgba(248,249,250,0.8) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px; margin-bottom: 8px;
}

/* ============================================================
   ERROR STATE STYLES
   ============================================================ */
.form-input.error-shake   { animation: shake 0.4s ease; border-color: var(--danger); }
.field-error-msg {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--danger); margin-top: 4px;
  animation: fadeIn 0.2s ease;
}
.field-error-msg i { font-size: 10px; }

/* Global error banner */
.global-error-banner {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--danger); color: #fff; padding: 10px 20px;
  border-radius: var(--radius-lg); font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-lg); z-index: 9998; animation: slideInUp 0.3s ease;
  max-width: 90vw; text-align: center;
}

/* ============================================================
   NOTIFICATION DROPDOWN
   ============================================================ */
.notif-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 320px; max-height: 400px; overflow-y: auto;
  background: var(--dark-1); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.08);
  z-index: 600; animation: fadeInDown 0.2s ease;
}
.notif-dropdown-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,.7);
}
.notif-dropdown.hidden { display: none; }

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .sidebar, .navbar, .page-header-right,
  .crud-toolbar, .map-layer-panel, .map-legend,
  #toast-container, .btn { display: none !important; }
  .main-area  { margin-left: 0 !important; }
  .page-content { padding: 0 !important; overflow: visible !important; }
  body { background: white; font-size: 12px; }
}