/* RAGsolis shared responsive safeguards. Presentation only. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  font-size: clamp(14px, 0.9vw, 16px);
  line-height: 1.5;
}

img,
picture,
video {
  max-width: 100%;
  height: auto;
}

input,
select,
textarea,
button {
  min-width: 0;
  max-width: 100%;
  font: inherit;
}

input,
select,
textarea {
  width: 100%;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  min-height: 44px;
}

button,
.btn,
.btn-export,
.tab-btn,
.step-btn,
.btn-logout,
.nav-hamburger,
.mobile-menu-close {
  min-height: 44px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.main-area,
.page-content,
.content-wrapper,
.card,
.card-body,
.card-header,
.chart-card,
.chart-container,
.stats-grid,
.kpi-grid,
.rev-grid,
.charts-grid,
.quick-actions,
.fg,
.form-grid,
.filters,
.details {
  min-width: 0;
  max-width: 100%;
}

.page-content {
  width: 100%;
  padding: clamp(12px, 2vw, 32px);
}

.topbar,
.header-area,
.card-header,
.toolbar,
.controls,
.total-bar,
.form-actions,
.modal-actions,
.button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.topbar,
.header-area,
.card-header,
.toolbar,
.total-bar {
  justify-content: space-between;
}

.topbar-title,
.title {
  min-width: 0;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.card-header h3,
.card-title,
.section-title {
  font-size: clamp(17px, 1.25vw, 22px);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.stat-value,
.kpi-value,
.metric b,
.rev-value,
.summary-val {
  font-size: clamp(20px, 2vw, 30px);
  overflow-wrap: anywhere;
}

.sidebar {
  width: min(280px, calc(100vw - 24px));
  max-width: 92vw;
  height: 100vh;
  height: 100dvh;
}

.sidebar-nav {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.sidebar-nav a {
  min-height: 44px;
}

.sidebar-user-name,
#sidebarName,
.sidebar-user-role,
#sidebarRole {
  min-width: 0;
  overflow-wrap: anywhere;
}

.table-wrapper,
.table-container,
.table-responsive,
.super-admin-table-container {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

.table-wrapper table,
.table-container table,
.table-responsive table,
.super-admin-table-container table {
  width: 100%;
  min-width: max-content;
}

th,
td {
  font-size: clamp(12px, 0.8vw, 14px);
  vertical-align: middle;
}

td .btn,
td button,
td a {
  flex-shrink: 0;
}

.fg,
.form-grid,
.filters,
.details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(12px, 1.5vw, 22px);
}

.ff,
.modal-ff,
.form-field,
.mff {
  min-width: 0;
}

.ff label,
.modal-ff label,
.form-field label,
.lbl {
  font-size: clamp(13px, 0.9vw, 16px);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.ff input,
.ff select,
.ff textarea,
.modal-ff input,
.modal-ff select,
.modal-ff textarea,
.form-field input,
.form-field select,
.form-field textarea,
.inp,
.inp-date {
  width: 100%;
  min-height: 44px;
}

input[type="file"] {
  max-width: 100%;
  white-space: normal;
}

.stats-grid,
.kpi-grid,
.quick-actions,
.grid-btns {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(12px, 1.5vw, 24px);
}

.rev-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(12px, 1.5vw, 24px);
}

.stat-card,
.kpi-card,
.rev-card,
.action-card,
.stock-card,
.metric {
  min-width: 0;
  height: auto;
  overflow-wrap: anywhere;
}

.charts-grid {
  align-items: stretch;
}

.chart-container {
  position: relative;
  width: 100%;
  height: clamp(240px, 34vw, 360px);
  min-height: 240px;
}

.chart-container canvas {
  max-width: 100%;
}

.modal-overlay {
  padding: clamp(12px, 3vw, 24px);
  overflow-y: auto;
}

.modal,
.modal-box,
[style*="max-width:520px"][style*="max-height:90vh"] {
  width: min(92vw, 720px);
  max-width: calc(100vw - 24px);
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-actions,
.form-actions,
.button-group {
  justify-content: flex-end;
}

.loading-overlay,
.page-loader {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 24px;
  text-align: center;
}

.container,
.section,
.content-section,
.marketing-hero,
.final-cta,
.footer,
.glass-panel,
.outcomes-wrap,
.reveal-wrap,
.reveal-wrap > *,
.reveal {
  min-width: 0;
  max-width: 100%;
}

.container {
  width: min(100%, 1600px);
}

.nav .container,
.footer-top,
.footer-bottom,
.hero-cta-row,
.final-cta-row,
.stat-strip {
  min-width: 0;
  flex-wrap: wrap;
}

.mobile-menu a,
.mobile-menu-close,
.nav-hamburger {
  min-width: 44px;
  min-height: 44px;
}

.glass-panel,
.bento-card,
.persona-card,
.sec-card,
.bi-panel,
.blog-card {
  overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
  .sidebar {
    position: fixed;
    inset-block: 0;
    left: 0;
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main-area {
    width: 100%;
  }

  .hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .charts-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-content [style*="grid-template-columns:1fr 1fr"],
  .page-content [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .bento[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .blog-grid + * {
    min-width: 0;
  }

  /* Legacy public pages have no drawer button; keep their full nav reachable. */
  .nav:not(:has(.nav-hamburger)) .container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .nav:not(:has(.nav-hamburger)) .nav-links {
    display: flex;
    order: 3;
    width: 100%;
    max-width: 100%;
    gap: 20px;
    overflow-x: auto;
    padding-block: 6px;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .nav:not(:has(.nav-hamburger)) .nav-links a {
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 768px) {
  .page-content {
    padding: clamp(12px, 4vw, 20px);
  }

  .topbar,
  .header-area {
    padding: 14px clamp(12px, 4vw, 20px);
  }

  .card-header,
  .card-body,
  .step-head,
  .step-body {
    padding: clamp(14px, 4vw, 20px);
  }

  .fg,
  .form-grid,
  .filters,
  .details,
  #addForm {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .modal {
    padding: clamp(16px, 4vw, 22px);
  }

  .modal-actions,
  .form-actions {
    margin-top: 20px;
    gap: 10px;
  }

  .total-bar,
  .summary-box {
    align-items: flex-start;
    gap: 10px;
  }

  .tab-nav,
  .step-bar {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tab-btn,
  .step-btn {
    flex: 0 0 auto;
  }

  .nav-logo-img {
    height: clamp(44px, 13vw, 64px) !important;
  }

  .section,
  .content-section {
    padding-block: clamp(64px, 12vw, 90px);
  }

  .marketing-hero {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 100px 6vw 56px;
  }

  .glass-panel,
  .outcomes-wrap {
    padding: clamp(20px, 6vw, 32px);
  }

  .blog-grid + [style*="grid-template-columns"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .bento[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .pin-inner,
  .story-sticky,
  .story-bg-img,
  .story-scrim {
    min-height: 100vh;
    min-height: 100dvh;
  }
}

@media (max-width: 480px) {
  .nav:not(:has(.nav-hamburger)) {
    padding-inline: 16px !important;
  }

  .nav:not(:has(.nav-hamburger)) .nav-logo,
  .nav:not(:has(.nav-hamburger)) .nav-logo-link {
    max-width: 105px;
  }

  .nav:not(:has(.nav-hamburger)) .nav-logo img,
  .nav:not(:has(.nav-hamburger)) .nav-logo-link img {
    width: auto;
    max-width: 100%;
  }

  .topbar,
  .header-area {
    align-items: stretch;
  }

  .topbar > *,
  .header-area > * {
    max-width: 100%;
  }

  .controls,
  .form-actions,
  .modal-actions,
  .button-group,
  .hero-cta-row,
  .final-cta-row {
    width: 100%;
  }

  .controls > *,
  .form-actions > *,
  .modal-actions > *,
  .button-group > *,
  .hero-cta-row > *,
  .final-cta-row > * {
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
  }

  .card {
    margin-bottom: 18px;
  }

  .modal-overlay {
    padding: 12px;
    align-items: flex-start;
  }

  .modal,
  .modal-box,
  [style*="max-width:520px"][style*="max-height:90vh"] {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    margin: 0;
  }

  .stats-grid,
  .kpi-grid,
  .rev-grid,
  .quick-actions,
  .grid-btns,
  .stock-grid,
  .cards {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .welcome-card,
  .rev-card,
  .action-card,
  .notice,
  .summary-box,
  .total-bar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .action-arrow {
    margin-left: 0;
  }

  .footer {
    padding-inline: 6vw;
  }
}

@media (max-width: 360px) {
  .page-content,
  .topbar,
  .header-area {
    padding-inline: 10px;
  }

  .card-header,
  .card-body,
  .step-head,
  .step-body,
  .stat-card,
  .kpi-card,
  .rev-card,
  .action-card {
    padding: 14px;
  }

  .sidebar {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
  }

  .sidebar-nav,
  .sidebar-logo,
  .sidebar-footer {
    padding-inline: 12px;
  }
}

@media (min-width: 1280px) {
  .page-content > :where(.page-container) {
    max-width: 1600px;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar {
    transition-duration: 0.01ms;
  }
}