/* ==========================================================================
   VORTEX-SDN Full Responsive & Adaptive Architecture
   Cisco NOC / Enterprise Operations System Standards
   Supports: 1920x1080, 1600x900, 1440x900, 1366x768, 1280x720, 1024x768,
             820x1180, 768x1024, 430x932, 412x915, 390x844, 375x812, 360x800
   Landscape Orientations: 800x360, 812x375, 844x390, 915x412, 1024x768, 1180x820
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL FOUNDATIONAL RESETS & ZERO HORIZONTAL OVERFLOW PROTECTION
   ========================================================================== */

html {
  overflow-x: hidden;
  width: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;
}

#app-container {
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  display: flex;
}

#main-wrapper {
  min-width: 0;
  max-width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#content-viewport {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

/* Ensure grid items and cards never blow out layout width */
.view-section {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.card,
.kpi-card,
.vortex-card,
.twin-control-card,
.twin-canvas-card,
.pred-chart-card,
.rca-panel {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

img, canvas, svg {
  max-width: 100%;
}

/* Mobile-only toggle utility */
.mobile-only {
  display: none;
}

/* ==========================================================================
   2. UNIVERSAL TABLE CONTAINERS & SAFE HORIZONTAL SCROLL
   Only table containers scroll locally; page width remains strictly locked
   ========================================================================== */

.table-container,
.table-responsive-wrapper,
.table-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  display: block;
}

/* Table Column Width Protections */
.vortex-table,
.data-table,
.twin-comp-table {
  border-collapse: collapse;
  box-sizing: border-box;
}

#admin-users-table {
  min-width: 920px;
  width: 100%;
}

#admin-requests-table {
  min-width: 820px;
  width: 100%;
}

#view-flows .vortex-table {
  min-width: 840px;
}

#view-audit .vortex-table {
  min-width: 860px;
}

#view-security .vortex-table {
  min-width: 780px;
}

#view-incidents .vortex-table {
  min-width: 760px;
}

#view-policies .vortex-table {
  min-width: 720px;
}

#pred-multi-metrics-tbody {
  min-width: 680px;
}

/* Action buttons inside table cells gracefully wrap if tight */
.admin-actions-cell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap !important;
  vertical-align: middle;
}

.admin-actions-cell .btn-xs {
  flex-shrink: 0;
}

/* ==========================================================================
   3. LARGE LAPTOPS & DESKTOPS (<= 1600px)
   ========================================================================== */
@media (max-width: 1600px) {
  #status-user {
    display: none;
  }
  .topbar-clock {
    display: none;
  }
}

/* ==========================================================================
   4. MEDIUM LAPTOPS (<= 1440px)
   ========================================================================== */
@media (max-width: 1440px) {
  .kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .topbar-center {
    max-width: 320px;
  }
}

/* ==========================================================================
   5. COMPACT LAPTOPS (<= 1280px)
   ========================================================================== */
@media (max-width: 1280px) {
  .breadcrumb-separator,
  .breadcrumb-current {
    display: none;
  }
  .topbar-center {
    max-width: 280px;
    min-width: 160px;
  }
  .topbar-clock {
    display: none;
  }
}

/* ==========================================================================
   6. SMALL LAPTOPS & LARGE TABLETS (<= 1200px)
   ========================================================================== */
@media (max-width: 1200px) {
  .dashboard-grid-row {
    grid-template-columns: 1fr;
  }
  .dashboard-grid-tri {
    grid-template-columns: 1fr;
  }
  .twin-main-grid {
    grid-template-columns: 1fr;
  }
  .rca-summary-grid {
    grid-template-columns: 1fr;
  }
  .rca-detail-grid {
    grid-template-columns: 1fr;
  }
  #status-controller {
    display: none;
  }
  .topbar-center {
    max-width: 240px;
    min-width: 140px;
  }
}

/* ==========================================================================
   7. TABLETS (<= 1024px, e.g. iPad landscape & portrait, 1024x768, 820x1180)
   ========================================================================== */
@media (max-width: 1024px) {
  .status-pill-group {
    display: none;
  }

  .kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  #view-admin-users .admin-card-header {
    gap: 12px;
  }

  .twin-toolbar-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  .table-toolbar {
    flex-wrap: wrap;
    gap: 10px;
  }
}

@media (max-width: 992px) {
  .kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .dashboard-hero-header {
    gap: 12px;
  }
}

/* ==========================================================================
   8. MOBILE PORTRAIT & SMALL TABLETS (<= 768px, e.g. 768x1024, 430px, 390px, 360px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Sidebar Drawer Overlay */
  #sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    transform: translateX(-100%);
    box-shadow: none;
    z-index: 1050;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease;
    overflow: hidden;
  }

  #sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.85);
  }

  /* Make sidebar navigation body scrollable on mobile so all 16+ items are reachable */
  .sidebar-nav {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 125px);
    max-height: calc(100dvh - 125px);
    padding-bottom: 16px;
  }

  .sidebar-collapse-btn {
    display: none !important;
  }

  .sidebar-close-btn.mobile-only {
    display: flex !important;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }

  .sidebar-close-btn.mobile-only:hover {
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
  }

  #sidebar-backdrop {
    z-index: 1040;
  }

  /* Main Wrapper expands to full screen width */
  #main-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  #sidebar.collapsed ~ #main-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Topbar Header Compact Arrangement */
  #topbar {
    padding: 0 12px;
    gap: 8px;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
  }

  .topbar-left {
    gap: 8px;
  }

  .breadcrumb-separator,
  .breadcrumb-current {
    display: none !important;
  }

  .breadcrumb-root {
    font-size: 11px;
    padding: 2px 6px;
  }

  .topbar-center {
    display: flex;
    flex: 1 1 auto;
    max-width: 220px;
    min-width: 120px;
  }

  .search-shortcut-kbd {
    display: none !important;
  }

  .search-trigger-btn {
    height: 36px;
    padding: 0 10px;
  }

  .search-trigger-placeholder {
    font-size: 11.5px;
  }

  .status-pill-group {
    display: none !important;
  }

  .topbar-clock {
    display: none !important;
  }

  .profile-trigger .dynamic-user-name {
    display: none !important;
  }

  .profile-trigger {
    padding: 2px 4px;
    gap: 4px;
  }

  .topbar-icon-btn,
  .theme-toggle-btn {
    width: 32px;
    height: 32px;
  }

  /* Popovers within Viewport */
  #notif-popover {
    position: fixed;
    top: 62px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
  }

  #profile-dropdown-menu {
    position: fixed;
    top: 62px;
    right: 12px;
    left: auto;
    width: 230px;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
  }

  /* Top-Center Toast & Confirm Overlay on Tablets */
  #toast-container {
    top: 68px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: min(480px, calc(100vw - 32px)) !important;
    max-width: 480px !important;
    align-items: center !important;
  }

  .vortex-confirm-overlay {
    padding-top: 68px !important;
  }

  /* Main Scrollable Viewport Spacing */
  #content-viewport {
    padding: 12px 14px;
    gap: 14px;
  }

  .dashboard-hero-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
  }

  .hero-title-badge-row h1 {
    font-size: 17px;
    gap: 8px;
  }

  .hero-controls {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* KPI Grid: 2 columns on mobile portrait */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  .kpi-card {
    padding: 10px 12px;
    min-height: 84px;
  }

  .kpi-value {
    font-size: 18px;
  }

  /* Settings Page Responsive Reflow */
  .settings-layout {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .settings-nav {
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: 4px;
    white-space: nowrap;
  }

  .settings-tab-btn {
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 12px;
  }

  .settings-content-panel {
    padding: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .form-input,
  .form-select,
  .toggle-switch-label {
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
  }

  /* Network Topology Scaling */
  .topology-viewport-card {
    height: 380px;
  }

  .topo-drawer {
    width: 100%;
    max-width: 100%;
  }

  .topo-legend-overlay {
    bottom: 8px;
    left: 8px;
    max-width: calc(100% - 16px);
    padding: 5px 10px;
    font-size: 10.5px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .topo-controls-overlay {
    top: 8px;
    right: 8px;
    gap: 4px;
  }

  /* Tables Toolbar */
  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .table-search-box {
    min-width: 0;
    width: 100%;
  }

  .table-filters {
    width: 100%;
    justify-content: flex-start;
  }

  /* Access Control Admin Directory */
  #view-admin-users .admin-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  #view-admin-users .card-header-left,
  #view-admin-users .card-header-right {
    width: 100%;
  }

  #admin-user-search-input {
    width: 100%;
  }

  /* Modals */
  .modal-box,
  .search-modal-box {
    max-width: calc(100vw - 24px) !important;
    margin: 12px !important;
    max-height: calc(100vh - 28px);
    display: flex;
    flex-direction: column;
  }

  .modal-body {
    padding: 14px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-header,
  .modal-footer {
    padding: 12px 16px;
  }

  /* Floating Chatbot Assistant */
  #chatbot-window {
    width: min(390px, calc(100vw - 24px));
    height: min(520px, calc(100vh - 90px));
    bottom: 76px;
    right: 12px;
    border-radius: 12px;
  }

  #chatbot-launcher {
    width: 48px;
    height: 48px;
    bottom: 16px;
    right: 16px;
  }

  /* Digital Twin Toolbar */
  .twin-toolbar-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .twin-btn-group {
    width: 100%;
  }

  .twin-btn-group .btn {
    flex: 1;
    justify-content: center;
  }

  .twin-canvas-card {
    min-height: 380px;
  }
}

/* ==========================================================================
   9. SMALL MOBILE PHONES (<= 480px, e.g. 430px, 412px, 390px, 375px, 360px)
   ========================================================================== */
@media (max-width: 480px) {
  #topbar {
    padding: 0 10px;
    gap: 6px;
  }

  /* Search button collapses to ultra-compact icon trigger */
  .topbar-center {
    flex: 0 0 34px !important;
    max-width: 34px !important;
    min-width: 34px !important;
    margin: 0;
  }

  .search-trigger-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
    border-radius: var(--radius-sm);
  }

  .search-trigger-content {
    margin-right: 0;
    justify-content: center;
  }

  .search-trigger-placeholder {
    display: none !important;
  }

  .search-trigger-icon {
    width: 16px;
    height: 16px;
  }

  /* Content Viewport Padding */
  #content-viewport {
    padding: 10px 12px;
    gap: 12px;
  }

  .dashboard-hero-header {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  .hero-title-badge-row h1 {
    font-size: 15.5px;
  }

  .hero-subtitle {
    font-size: 11.5px;
  }

  /* KPI Grid for Compact Portrait */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .kpi-card {
    padding: 9px 10px;
    min-height: 74px;
  }

  .kpi-label {
    font-size: 9px;
    letter-spacing: 0.4px;
  }

  .kpi-value {
    font-size: 15px;
  }

  .kpi-icon {
    width: 22px;
    height: 22px;
  }

  /* Topology Viewport */
  .topology-viewport-card {
    height: 320px;
  }

  .topo-legend-overlay {
    left: 6px;
    bottom: 6px;
    padding: 4px 8px;
    font-size: 9.5px;
    gap: 6px;
    max-width: calc(100% - 12px);
  }

  .topo-controls-overlay {
    top: 6px;
    right: 6px;
    gap: 3px;
  }

  .topo-btn {
    width: 26px;
    height: 26px;
  }

  /* Toast Notification: Top-contained overlay below mobile topbar */
  #toast-container {
    position: fixed !important;
    top: 64px !important;
    bottom: auto !important;
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    align-items: stretch !important;
  }

  .toast {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 9px 12px !important;
    font-size: 12px !important;
  }

  .vortex-confirm-overlay {
    padding-top: 64px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .vortex-confirm-dialog {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    padding: 16px 14px !important;
  }

  .vortex-confirm-footer {
    display: flex !important;
    gap: 8px !important;
  }

  .vortex-confirm-footer .btn {
    flex: 1 !important;
    justify-content: center !important;
  }

  /* Floating Chatbot Assistant */
  #chatbot-launcher {
    bottom: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
  }

  #chatbot-window {
    width: calc(100vw - 20px);
    height: calc(100vh - 80px);
    height: calc(100dvh - 80px);
    bottom: 10px;
    right: 10px;
    border-radius: 12px;
  }

  /* Action Buttons within admin tables */
  .admin-actions-cell {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   10. EXTRA COMPACT MOBILE PORTRAIT (<= 360px, e.g. 360x800)
   ========================================================================== */
@media (max-width: 360px) {
  #topbar {
    padding: 0 8px;
    gap: 4px;
  }

  .breadcrumb-root {
    padding: 2px 4px;
    font-size: 10px;
    letter-spacing: 0.5px;
  }

  .kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .kpi-card {
    padding: 8px;
    min-height: 70px;
  }

  .kpi-value {
    font-size: 14px;
  }

  #content-viewport {
    padding: 8px 10px;
    gap: 10px;
  }
}

/* ==========================================================================
   11. MOBILE & SMALL TABLET LANDSCAPE (max-height: 520px)
   e.g. 800x360, 812x375, 844x390, 915x412, 1024x600
   ========================================================================== */
@media (max-height: 520px) and (orientation: landscape) {
  #topbar {
    height: 48px;
    min-height: 48px;
    padding: 0 12px;
  }

  #content-viewport {
    padding: 8px 14px;
    gap: 10px;
  }

  .dashboard-hero-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px;
    padding-bottom: 6px;
  }

  .hero-title-badge-row h1 {
    font-size: 15px;
  }

  .hero-subtitle {
    display: none; /* Hide subtitle to preserve precious vertical viewport space */
  }

  /* Reflow KPI Grid into 3 columns on landscape for optimal density */
  .kpi-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .kpi-card {
    padding: 7px 10px;
    min-height: 60px;
  }

  .kpi-value {
    font-size: 15px;
  }

  /* Multi-column grid rows can sit 2-column if viewport width allows */
  @media (min-width: 680px) {
    .dashboard-grid-row {
      grid-template-columns: 1.2fr 1fr !important;
      gap: 10px;
    }
  }

  /* Compact Topology Height */
  .topology-viewport-card {
    height: 250px !important;
  }

  .twin-canvas-card {
    min-height: 250px !important;
  }

  /* Compact Modals in Landscape */
  .modal-box,
  .search-modal-box {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }

  .modal-header {
    padding: 8px 14px;
  }

  .modal-body {
    padding: 10px 14px;
    max-height: calc(100vh - 90px);
    max-height: calc(100dvh - 90px);
  }

  .modal-footer {
    padding: 6px 14px;
  }

  /* Chatbot Window in Landscape */
  #chatbot-window {
    height: calc(100vh - 18px) !important;
    height: calc(100dvh - 18px) !important;
    max-height: calc(100vh - 18px) !important;
    bottom: 8px;
    right: 8px;
    width: min(380px, 85vw);
  }

  #chatbot-launcher {
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
  }

  /* Top-Center Compact Toast & Confirm Overlay in Landscape */
  #toast-container {
    position: fixed !important;
    top: 50px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(460px, calc(100vw - 28px)) !important;
    max-width: 460px !important;
    align-items: center !important;
  }

  .toast {
    min-width: 260px !important;
    max-width: 460px !important;
    padding: 7px 12px !important;
    font-size: 11.5px !important;
  }

  .vortex-confirm-overlay {
    padding-top: 48px !important;
  }

  .vortex-confirm-dialog {
    max-height: calc(100vh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
    overflow-y: auto !important;
    padding: 12px 16px !important;
    gap: 10px !important;
  }
}