/* ==========================================================================
   Upraj Solutions — Responsive Refinements
   Breakpoints: 360, 480, 768, 1024, 1280, 1440+
   ========================================================================== */

/* --------- Touch target hygiene --------- */
@media (hover: none) and (pointer: coarse) {
  .btn, .nav-link, .dropdown-item, .list-group-item, .u-chip {
    min-height: 40px;
  }
  .form-control, .form-select { min-height: 44px; }
}

/* Prevent horizontal scroll globally */
html, body { max-width: 100vw; overflow-x: hidden; }

/* ---------------- 1440+  Ultra wide ---------------- */
@media (min-width: 1440px) {
  .crm-main-inner,
  .container { max-width: 1360px; }
  :root { --u-nav-h: 56px; }
  h1, .u-display { font-size: 2.6rem; }
}

/* ---------------- 1280 - 1439 ---------------- */
@media (min-width: 1280px) and (max-width: 1439.98px) {
  .crm-main-inner { max-width: 1200px; }
}

/* ---------------- 1024 - 1279 ---------------- */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  :root { --u-sidebar-w: 240px; }
}

/* ---------------- 992 - 1023 (tablet landscape) ---------------- */
@media (max-width: 1023.98px) {
  section { padding-top: 3rem; padding-bottom: 3rem; }
}

/* ---------------- 768 - 991 (tablet portrait) ---------------- */
@media (max-width: 991.98px) {
  .custom-navbar .container-fluid { padding: .35rem .9rem; }
  .navbar-brand { font-size: 1.1rem !important; }

  /* Collapsed nav becomes a compact card on mobile */
  .custom-navbar .navbar-collapse {
    background: var(--u-glass-bg-strong);
    backdrop-filter: blur(var(--u-glass-blur));
    -webkit-backdrop-filter: blur(var(--u-glass-blur));
    border: 1px solid var(--u-glass-border);
    border-radius: var(--u-radius-md);
    margin-top: .35rem;
    padding: .5rem;
    box-shadow: var(--u-shadow-md);
  }
  .custom-navbar .navbar-collapse .nav-link {
    color: var(--u-text) !important;
    padding: .65rem .85rem !important;
    border-radius: var(--u-radius-sm);
  }
  .custom-navbar .navbar-collapse .nav-link:hover,
  .custom-navbar .navbar-collapse .nav-link.active {
    background: var(--u-blue-500) !important;
    color: #fff !important;
  }
  .custom-navbar .navbar-collapse .dropdown-menu {
    position: static !important;
    box-shadow: none;
    border: 0 !important;
    background: transparent !important;
    padding: 0;
  }
  .custom-navbar .navbar-collapse .dropdown-item { color: var(--u-text) !important; }

  #homeCarousel .carousel-item img { height: 52vh; min-height: 340px; }
  #homeCarousel .carousel-caption { left: 4%; right: 4%; bottom: 1rem; padding: .85rem 1rem; }
  #homeCarousel .carousel-caption h2 { font-size: 1.35rem; }
  #homeCarousel .carousel-caption p  { font-size: .9rem; margin-bottom: .5rem; }
}

/* ---------------- 480 - 767 (mobile large) ---------------- */
@media (max-width: 767.98px) {
  section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  h1, .u-display { font-size: 1.85rem; }
  h2 { font-size: 1.5rem; }
  h4 { font-size: 1.15rem; }

  .u-kpi { padding: 1rem; }
  .u-kpi__value { font-size: 1.6rem; }
  .u-kpi__icon { width: 36px; height: 36px; font-size: 1rem; }

  .modal-body { padding: 1.15rem; }
  .modal-dialog { margin: .75rem; }

  /* Tables scroll horizontally on tiny screens */
  .u-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-responsive > .table,
  .u-table-wrap > .table { min-width: 620px; }

  .footer-fixed p, footer.navbar.fixed-bottom p { font-size: .8rem; }

  /* CRM drawer: show complete child labels instead of an ellipsis. */
  .crm-sidebar {
    padding-bottom: 88px !important;
    scroll-padding-bottom: 88px;
  }
  .crm-sidebar .list-group-item.child-link {
    display: flex !important;
    align-items: flex-start;
    gap: .65rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.35;
  }
  .crm-sidebar .list-group-item.child-link > i {
    flex: 0 0 1.15rem;
    margin-right: 0 !important;
    margin-top: .15rem;
    text-align: center;
  }
  .crm-sidebar .list-group-item.child-link > span.text-truncate {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
  }
}

/* ---------------- 360 - 479 (small phones) ---------------- */
/* Explicit desktop reset: mobile label wrapping never affects the fixed
   desktop sidebar. */
@media (min-width: 768px) {
  .crm-sidebar .list-group-item.child-link {
    display: flex !important;
    padding-left: 2.4rem !important;
    padding-right: 1rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .crm-sidebar .list-group-item.child-link > .child-label {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .crm-sidebar .list-group-item.child-link > span.text-truncate {
    display: inline-block !important;
    max-width: 180px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ---------------- 360 - 479 (small phones) ---------------- */
@media (max-width: 479.98px) {
  :root { --u-nav-h: 56px; }
  .navbar-brand { font-size: 1rem !important; }
  .navbar-brand::before { width: 24px; height: 24px; font-size: .85rem; }

  .btn { padding: .5rem .9rem; }
  .btn-lg { padding: .65rem 1.1rem; font-size: .95rem; }

  .u-portfolio-grid { grid-template-columns: 1fr; }
  .u-portfolio-toolbar { flex-direction: column; align-items: flex-start; }

  #homeCarousel .carousel-item img { height: 44vh; min-height: 260px; }
  #homeCarousel .carousel-caption h2 { font-size: 1.1rem; }
}

/* ---------------- 320 fallback ---------------- */
@media (max-width: 359.98px) {
  .container, .container-fluid { padding-inline: .75rem; }
  h1, .u-display { font-size: 1.5rem; }
  .navbar-brand { font-size: .95rem !important; }
}

/* ---------------- Landscape mobile ---------------- */
@media (max-height: 480px) and (orientation: landscape) {
  #homeCarousel .carousel-item img { height: 100vh; min-height: 260px; }
  .u-fab { bottom: 60px; }
}

/* ---------------- Mobile floating navbar menus ----------------
   backdrop-filter made fixed dropdowns relative to the 50%-wide off-canvas
   menu. Remove that containing block and float notification/profile panels
   against the viewport again. */
@media (max-width: 991.98px) {
  .custom-navbar #navbarContent.navbar-collapse {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .custom-navbar #navbarContent.navbar-collapse:has(.dropdown-menu.show) {
    overflow: visible !important;
  }

  .custom-navbar #navbarContent .nav-item.dropdown > .dropdown-menu {
    position: fixed !important;
    top: var(--u-mobile-dropdown-top, calc(var(--u-nav-h) + 8px)) !important;
    right: var(--u-mobile-dropdown-right, 12px) !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    max-width: 420px !important;
    max-height: var(--u-mobile-dropdown-max-h, calc(100dvh - var(--u-nav-h) - 72px)) !important;
    margin: 0 !important;
    overflow-y: auto !important;
    z-index: 1085 !important;
    background: var(--u-surface) !important;
    border: 1px solid var(--u-border-strong) !important;
    box-shadow: var(--u-shadow-lg) !important;
  }

  .custom-navbar #navbarContent #notifDropdown + .dropdown-menu {
    width: min(420px, calc(100vw - 24px)) !important;
    overflow: hidden !important;
  }

  .custom-navbar #navbarContent #profileDropdown + .dropdown-menu {
    width: max-content !important;
    min-width: 220px !important;
    max-width: calc(100vw - 24px) !important;
  }

  .custom-navbar #navbarContent .dropdown-menu .dropdown-item,
  .custom-navbar #navbarContent .dropdown-menu .dropdown-item-text,
  .custom-navbar #navbarContent .dropdown-menu .dropdown-header {
    color: var(--u-text) !important;
    white-space: normal;
  }

  .custom-navbar #navbarContent .notif-scroll {
    max-height: max(0px, calc(var(--u-mobile-dropdown-max-h) - 48px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
  }
}