/* ════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN — ALL DEVICES & BREAKPOINTS
   Desktop > 1200px (default)
   Large Tablet: 993px–1200px
   Tablet: 769px–992px
   Small Tablet / Large Phone: 577px–768px
   Phone: 421px–576px
   Small Phone: ≤420px
   ════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────
   MOBILE SIDEBAR OVERLAY & HAMBURGER BUTTON
   ──────────────────────────────────────────── */

/* Hamburger toggle — hidden on desktop */
.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 20px;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}

.mobile-menu-toggle:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

/* Sidebar overlay backdrop for mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 89;
}

.sidebar-overlay.active {
  display: block;
}


/* ═══════════════════════════════════════════════════
   BREAKPOINT: ≤1200px  (LARGE TABLETS / SMALL DESKTOPS)
   ═══════════════════════════════════════════════════ */
@media (max-width: 1200px) {

  /* Hub header */
  .hub-header {
    padding: 10px 20px;
  }

  .header-container {
    gap: 16px;
  }

  .header-search {
    max-width: 340px;
  }

  /* Metrics grid: 3 columns */
  .metrics-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  /* Landing hero */
  .landing-hero-grid {
    grid-template-columns: 1fr 360px;
    gap: 24px;
  }

  .landing-title {
    font-size: 34px !important;
  }

  /* Portal content */
  .portal-content-body {
    padding: 16px 20px;
  }

  /* Power pivot fields panel narrower */
  .pivot-fields-pane {
    width: 240px;
  }

  /* Settings modal */
  .modal-card[style*="840px"] {
    width: 90vw !important;
  }
}


/* ═══════════════════════════════════════════════════
   BREAKPOINT: ≤992px  (TABLETS)
   ═══════════════════════════════════════════════════ */
@media (max-width: 992px) {

  /* Show hamburger menu button */
  .mobile-menu-toggle {
    display: flex;
  }

  /* Landing — stack hero grid vertically */
  .landing-hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .landing-main {
    padding: 16px 20px;
    overflow-y: auto;
    align-items: flex-start;
  }

  #unauth-landing-container {
    overflow-y: auto;
    max-height: none;
    height: auto;
    min-height: 100vh;
  }

  .landing-title {
    font-size: 30px !important;
  }

  .landing-login-box {
    max-width: 460px;
    margin: 0 auto;
  }

  /* Sidebar: off-canvas mobile overlay */
  .app-sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    width: 260px;
    min-width: 260px;
    height: 100vh;
    z-index: 100;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    overflow-y: auto;
  }

  .app-sidebar.mobile-open {
    left: 0;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.5);
  }

  /* Hide sidebar collapse toggle on mobile (use close button instead) */
  #sidebar-toggle-btn {
    display: none !important;
  }

  /* Hub header adjustments */
  .brand-title {
    font-size: 16px;
  }

  .brand-tagline {
    display: none;
  }

  .header-search {
    max-width: 280px;
  }

  /* Metrics grid: 3 columns still */
  .metrics-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  /* Dashboard cards grid */
  .reports-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }

  /* Portal content body full width */
  .portal-content-body {
    padding: 14px 16px;
  }

  .portal-layout-wrapper {
    min-height: calc(100vh - 58px);
  }

  /* Power Pivot: stack vertically on tablets */
  .pivot-main-workspace {
    flex-direction: column;
  }

  .pivot-fields-pane {
    width: 100%;
    max-height: 260px;
    border-left: none;
    border-top: 1.5px solid var(--excel-border-light);
  }

  .pivot-dropzones-grid {
    height: 140px;
  }

  /* Excel ribbon tools scroll */
  .excel-ribbon-tools {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Modals */
  .modal-card {
    width: 90vw !important;
    max-width: 90vw !important;
    padding: 24px !important;
  }

  /* Settings modal tabs: scrollable */
  .admin-nav-tabs {
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
  }

  .admin-nav-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Calculator spotlight banner: stack */
  #unauth-landing-container div[style*="display: flex"][style*="align-items: center"][style*="gap: 16px"][style*="border: 2px dashed"] {
    flex-direction: column;
    text-align: center;
    padding: 20px 16px !important;
  }
}


/* ═══════════════════════════════════════════════════
   BREAKPOINT: ≤768px  (SMALL TABLETS / LARGE PHONES LANDSCAPE)
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Landing page */
  .landing-header {
    padding: 10px 16px;
  }

  .landing-main {
    padding: 12px 16px;
  }

  .landing-title {
    font-size: 26px !important;
  }

  .landing-login-box {
    padding: 20px 20px !important;
  }

  /* Feature cards: stack to 1 column */
  .landing-features-grid {
    grid-template-columns: 1fr;
  }

  /* Hub header */
  .hub-header {
    padding: 8px 12px;
  }

  .header-container {
    gap: 10px;
  }

  .header-search {
    max-width: 200px;
  }

  .search-input-wrapper input {
    font-size: 12px;
    padding: 7px 12px 7px 34px;
  }

  /* Hide user profile details on small screens, keep icon */
  #header-user-profile > div:nth-child(2) {
    display: none;
  }

  /* Metrics grid: 2 columns */
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .metric-card {
    padding: 8px 10px;
  }

  .metric-info .val {
    font-size: 15px;
  }

  .metric-info .lbl {
    font-size: 10px;
  }

  /* Dashboard grid */
  .reports-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .report-card {
    padding: 16px;
  }

  .card-title {
    font-size: 15px;
  }

  /* Category filter pills: compact */
  .cat-filter-bar {
    gap: 6px;
    padding: 4px 0 12px;
    margin-bottom: 16px;
  }

  .cat-pill {
    padding: 5px 12px;
    font-size: 11.5px;
  }

  /* Power Pivot */
  .power-pivot-wrapper {
    height: auto;
    min-height: calc(100vh - 150px);
    margin-top: 8px;
  }

  .excel-ribbon-tools {
    flex-wrap: nowrap;
    gap: 4px;
    padding: 3px 6px;
  }

  .excel-action-btn {
    padding: 3px 6px;
    font-size: 10px;
  }

  /* List view table responsive */
  .reports-list-table th,
  .list-row td {
    padding: 10px 12px;
    font-size: 12px;
  }

  /* Toast notifications */
  #toast-container {
    bottom: 12px;
    right: 12px;
    left: 12px;
  }

  .toast {
    font-size: 12px;
    padding: 10px 14px;
  }
}


/* ═══════════════════════════════════════════════════
   BREAKPOINT: ≤576px  (PHONES — PORTRAIT)
   ═══════════════════════════════════════════════════ */
@media (max-width: 576px) {

  /* Landing page: ultra-compact */
  .landing-header {
    padding: 8px 12px;
  }

  .landing-header div[style*="font-size: 19px"] {
    font-size: 15px !important;
  }

  .landing-header div[style*="font-size: 11px"] {
    font-size: 9px !important;
  }

  .landing-main {
    padding: 10px 12px;
  }

  .landing-title {
    font-size: 22px !important;
    margin-bottom: 8px !important;
  }

  .landing-badge {
    font-size: 9.5px !important;
    padding: 4px 10px !important;
  }

  .landing-login-box {
    padding: 16px 14px !important;
  }

  .landing-login-box h2 {
    font-size: 17px !important;
  }

  /* Calculator spotlight: hide on very small screens for cleanliness */
  #unauth-landing-container > main > div > div:first-child > div:first-child {
    display: none;
  }

  /* Feature info cards below hero: single column */
  #unauth-landing-container div[style*="display: flex"][style*="gap: 14px"][style*="margin-top: 16px"] {
    flex-direction: column;
    gap: 8px !important;
  }

  /* Hub header */
  .hub-header {
    padding: 6px 10px;
  }

  .brand-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .brand-title {
    font-size: 14px;
  }

  .brand-tagline {
    display: none;
  }

  /* Hide search bar on small phones */
  .header-search {
    display: none;
  }

  /* Header actions compact */
  .header-actions {
    gap: 6px;
  }

  .btn-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  /* Metrics: 2 columns with tighter spacing */
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-bottom: 14px;
  }

  .metric-card {
    padding: 6px 8px;
    gap: 6px;
  }

  .metric-icon-box {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .metric-info .val {
    font-size: 14px;
  }

  .metric-info .lbl {
    font-size: 9px;
  }

  /* Dashboard cards: single column */
  .reports-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .report-card {
    padding: 14px;
  }

  .card-icon-box {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .card-title {
    font-size: 14px;
  }

  .card-desc {
    font-size: 11.5px;
  }

  .card-actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  .card-actions .btn {
    padding: 5px 10px;
    font-size: 11px;
  }

  /* Portal content */
  .portal-content-body {
    padding: 10px 10px;
  }

  /* Category filter pills smaller */
  .cat-filter-bar {
    gap: 4px;
    padding: 2px 0 10px;
    margin-bottom: 12px;
  }

  .cat-pill {
    padding: 4px 10px;
    font-size: 11px;
  }

  /* Modals on phones: full width */
  .modal-card {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 18px 14px !important;
    border-radius: 12px !important;
  }

  /* Modal headings */
  .modal-card h2 {
    font-size: 18px !important;
  }

  .modal-card h3 {
    font-size: 16px !important;
  }

  /* Form controls on mobile */
  .form-control {
    padding: 8px 10px;
    font-size: 13px;
  }

  /* Settings modal tabs: wrap */
  .admin-nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .admin-nav-btn {
    padding: 6px 12px;
    font-size: 11.5px;
  }

  /* Power Pivot */
  .excel-ribbon-header {
    padding: 3px 8px;
  }

  .excel-app-title {
    font-size: 10px;
  }

  .excel-tab-btn {
    padding: 4px 8px;
    font-size: 10px;
  }

  .excel-formula-bar {
    padding: 2px 6px;
  }

  .excel-cell-address {
    width: 40px;
    font-size: 10px;
  }

  .excel-formula-input {
    font-size: 10px;
  }

  .pivot-fields-pane {
    max-height: 220px;
  }

  .pivot-dropzones-grid {
    height: 130px;
    gap: 4px;
    padding: 4px;
  }

  .excel-status-bar {
    font-size: 9.5px;
    padding: 3px 8px;
  }

  /* List view: horizontal scroll */
  .reports-list-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .reports-list-table th,
  .list-row td {
    padding: 8px 10px;
    font-size: 11px;
    white-space: nowrap;
  }

  /* User profile badge: icon-only */
  #header-user-profile {
    padding: 4px 6px !important;
  }

  #header-user-profile > div:nth-child(2) {
    display: none !important;
  }

  #header-user-profile button {
    padding: 2px 6px !important;
    font-size: 10px !important;
  }
}


/* ═══════════════════════════════════════════════════
   BREAKPOINT: ≤420px  (SMALL PHONES)
   ═══════════════════════════════════════════════════ */
@media (max-width: 420px) {

  /* Landing */
  .landing-title {
    font-size: 19px !important;
    line-height: 1.2 !important;
  }

  .landing-login-box {
    padding: 14px 12px !important;
  }

  .landing-login-box h2 {
    font-size: 16px !important;
  }

  .landing-login-box p {
    font-size: 10.5px !important;
  }

  .landing-login-box .btn {
    padding: 9px !important;
    font-size: 12.5px !important;
  }

  /* Hide the login page security note */
  .landing-login-box > div:last-child {
    font-size: 9px !important;
  }

  /* Hub header: absolute minimal */
  .brand-box {
    gap: 6px;
  }

  .brand-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
    border-radius: 6px;
  }

  .brand-title {
    font-size: 13px;
    letter-spacing: 0;
  }

  /* Metrics: 1 column on very small phones */
  .metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }

  .metric-card {
    padding: 5px 6px;
    gap: 5px;
  }

  .metric-icon-box {
    width: 24px;
    height: 24px;
    font-size: 12px;
    border-radius: 6px;
  }

  .metric-info .val {
    font-size: 13px;
  }

  .metric-info .lbl {
    font-size: 8.5px;
  }

  /* Card actions: stack vertically */
  .card-actions {
    flex-direction: column;
  }

  .card-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Mobile sidebar width reduced */
  .app-sidebar {
    width: 230px;
    min-width: 230px;
  }

  .nav-item {
    font-size: 11.5px;
    padding: 6px 8px;
  }

  .subnav-item {
    font-size: 10.5px;
  }

  /* Modal */
  .modal-card {
    padding: 14px 10px !important;
  }

  /* Power Pivot: ultra compact */
  .excel-action-btn {
    padding: 2px 5px;
    font-size: 9px;
  }

  .excel-tool-group {
    gap: 2px;
    padding-right: 4px;
  }

  .pivot-dropzones-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
    height: auto;
    min-height: 160px;
  }
}


/* ═══════════════════════════════════════════════════
   LANDSCAPE ORIENTATION FOR MOBILE DEVICES
   ═══════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {

  /* Landing: scroll instead of fixed vh */
  #unauth-landing-container {
    height: auto;
    max-height: none;
    min-height: 100vh;
    overflow-y: auto;
  }

  .landing-main {
    overflow-y: auto;
    align-items: flex-start;
  }

  .landing-hero-grid {
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
  }

  .landing-title {
    font-size: 24px !important;
  }

  /* Power Pivot: reduce heights */
  .power-pivot-wrapper {
    height: auto;
    min-height: calc(100vh - 150px);
    margin-top: 8px;
  }

  /* Reduce sidebar height */
  .app-sidebar {
    overflow-y: auto;
  }
}


/* ═══════════════════════════════════════════════════
   TOUCH DEVICE ENHANCEMENTS
   ═══════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {

  /* Larger touch targets */
  .btn {
    min-height: 40px;
    padding: 10px 16px;
  }

  .btn-sm {
    min-height: 34px;
    padding: 7px 14px;
  }

  .btn-icon {
    width: 40px;
    height: 40px;
  }

  .nav-item {
    min-height: 40px;
    padding: 8px 10px;
  }

  .subnav-item {
    min-height: 34px;
    padding: 6px 10px;
  }

  .cat-pill {
    min-height: 34px;
    padding: 6px 14px;
  }

  .form-control {
    min-height: 42px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  /* Remove hover effects that don't apply to touch */
  .report-card:hover {
    transform: none;
  }

  .metric-card:hover {
    transform: none;
  }

  .list-row:hover {
    transform: none;
  }

  .landing-feat-card:hover {
    transform: none;
  }

  /* Smooth scrolling for momentum */
  .cat-filter-bar,
  .excel-ribbon-tools,
  .admin-nav-tabs,
  .excel-grid-viewport,
  .pivot-fields-tree {
    -webkit-overflow-scrolling: touch;
  }
}


/* ═══════════════════════════════════════════════════
   HIGH DPI / RETINA DISPLAY ADJUSTMENTS
   ═══════════════════════════════════════════════════ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .bg-glow-1,
  .bg-glow-2 {
    filter: blur(40px);
  }
}


/* ═══════════════════════════════════════════════════
   PRINT STYLES (BASIC)
   ═══════════════════════════════════════════════════ */
@media print {
  .hub-header,
  .app-sidebar,
  .mobile-menu-toggle,
  .sidebar-overlay,
  .bg-glow-container,
  #toast-container,
  .modal-overlay,
  .modal-backdrop {
    display: none !important;
  }

  .portal-content-body {
    padding: 0 !important;
  }

  .portal-layout-wrapper {
    display: block !important;
  }

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

  .reports-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}