/* Global responsive overrides shared by Razor Pages + MVC Views */

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden}
img{max-width:100%;height:auto}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.shell {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Ensure footer is always at bottom and visible */
.site-footer {
  margin-top: auto !important;
}

footer.site-footer {
  flex-shrink: 0;
  width: 100%;
}

/* Ensure footer Business WhatsApp section is visible */
.site-footer .footer-col:nth-child(2) {
  display: block !important;
  visibility: visible !important;
  min-width: 120px !important;
}

.site-footer .footer-col h4 {
  display: block !important;
  visibility: visible !important;
}

.site-footer .footer-col a {
  display: block !important;
  visibility: visible !important;
}

/* Business WhatsApp Navigation Bar Styling */
.ds-topnav-wa-nav {
  display: flex !important;
  flex-wrap: wrap;
}

.ds-wa-nav-link {
  transition: all 0.2s ease !important;
}

.ds-wa-nav-link:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
}

.ds-wa-nav-link.active {
  background: rgba(255,255,255,0.15) !important;
  border-bottom: 2px solid #ffb020 !important;
}

/* Prevent horizontal spill onto the background (keep vertical popovers intact) */
.page-card,.big-card{max-width:100%;overflow-x:hidden}

/* Topbar helpers */
.topbar-brand-title{margin:0;font-size:18px;line-height:1.1}
.topbar-user{font-size:13px;color:#cfe6ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}

/* Shared filter bars (TotalCalls / FilteredCalls) */
.ds-filterbar{margin-bottom:12px;display:flex;gap:8px;align-items:center;justify-content:flex-end}
.ds-filterbar-row{display:flex;gap:8px;align-items:center}
.ds-section-head{margin-bottom:12px;display:flex;gap:8px;align-items:center;justify-content:space-between}

/* Dashboard helpers */
.ds-charts-row{display:flex;gap:12px;align-items:stretch}
.ds-chart-legend{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
/* Prevent grid items from forcing overflow (CSS grid/flex min-width:auto) */
.summary-item{min-width:0}
.summary-text{min-width:0}
.summary-text h3{white-space:normal}

/* Top 10 lists (Dashboard analytics) */
.call-item{min-width:0}
.call-text{min-width:0;flex:1}
.call-number{min-width:0}
.call-number,.call-right{font-weight:500}
.call-right{min-width:0}
.duration-badge{min-width:0 !important}

/* Shared top header (Views/Shared/_TopNavbar.cshtml) */
.ds-topnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px 0;padding:12px 18px;background:#f4f7ff;border:1px solid #d9e2ff;border-radius:0 12px 12px 0;color:#0f172a}
.ds-topnav h1{margin:0;font-size:28px;line-height:1.1;color:#0f172a}
.ds-topnav-sub{color:#6b7280;font-size:13px;margin-top:6px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ds-topnav-code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace}
.ds-topnav-subtitle{flex:1;margin-left:18px;min-width:0;max-width:calc(100% - 120px)}
.ds-topnav-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.ds-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;padding:8px 12px;font-weight:700;cursor:pointer;white-space:nowrap}
.ds-btn-sync{background:#2f3a68;color:#fff;border:0}
.ds-btn-logout{background:#fff;color:#f59e0b;border:1px solid #f7d8a4}
.ds-users-toggle{background:#eef2ff;border:1px solid #dbeafe;color:#1e293b;padding:6px 10px;border-radius:8px;cursor:pointer;font-weight:700}
.ds-users-badge{background:#10b981;color:#fff;padding:2px 8px;border-radius:999px;margin-left:8px;font-weight:700}
.ds-users-dd{display:none;position:absolute;right:0;top:40px;background:#fff;border:1px solid #e6eef4;border-radius:8px;box-shadow:0 10px 30px rgba(2,6,23,0.08);min-width:220px;z-index:4000;padding:10px}
.ds-users-list{max-height:260px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.ds-users-dd-footer{margin-top:8px;text-align:right}
.ds-users-dd-footer a{font-weight:700;color:#2563eb;text-decoration:none}

/* Mobile menu for topbar */
.topbar-links{display:flex;align-items:center;gap:12px}
.mobile-menu-btn{display:none;align-items:center;justify-content:center;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.35);color:#fff;border-radius:999px;padding:7px 12px;font-weight:800;font-size:12px;line-height:1;cursor:pointer}
.mobile-menu{display:none;position:fixed;right:12px;top:calc(var(--topbar-height) - 2px);background:#ffffff;color:#0f172a;border:1px solid rgba(148,163,184,0.35);border-radius:12px;box-shadow:0 18px 45px rgba(2,6,23,0.35);min-width:180px;z-index:3500;padding:8px}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:10px 10px;border-radius:10px;color:#0f172a;text-decoration:none;font-weight:700}
.mobile-menu a:hover{background:#f1f5f9}

@media (max-width:520px){
  :root{--topbar-height:56px;}

  /* fixed topbar: hide username to avoid overflow on narrow phones (iPhone SE, etc) */
  .topbar-user{display:none}
  .topbar-brand-title{font-size:16px}
  .topbar{padding:8px 12px}
  .topbar .right{gap:8px}

  /* keep only a single 5px gutter (avoid stacked padding from main + content + page shells) */
  main{padding:0}
  .content-wrap{padding:5px}

  /* tighter cards and page padding */
  .page-card{padding:10px}
  .card{padding:10px}
  .big-card{padding:10px}
  .page-card,.big-card{overflow:hidden}

  /* Settings page: use full width and 1 field per row */
  .settings-shell{width:100% !important;margin:0 !important}
  .settings-grid{grid-template-columns:1fr !important}
  .settings-nav{padding:10px !important}
  .settings-panel{padding:12px !important;border-left:0 !important}
  .form-grid{grid-template-columns:1fr !important}
  .btn-row{flex-wrap:wrap}
  .btn-row .btn{flex:1 1 auto}
  .field input,.field select,.field textarea{width:100%;max-width:100%}

  /* dashboard/page-specific rules sometimes force 100vw; undo to prevent horizontal overflow */
  html,body{width:auto !important}

  /* topbar: replace links with menu button */
  .topbar-links{display:none}
  .mobile-menu-btn{display:inline-flex}

  /* footer */
  .site-footer{padding:24px 14px 14px}
  .site-footer .footer-inner{flex-direction:column;align-items:stretch}
  .footer-columns{justify-content:flex-start;flex-wrap:wrap;gap:18px}
  .footer-col{min-width:auto;flex:0 1 calc(50% - 9px)}
  .footer-bottom{flex-direction:column;gap:8px;align-items:flex-start}

  /* reduce large top margins for pages that already sit below the fixed topbar */
  main .content-wrap > .page-card{margin:12px auto !important}

  /* admin/dashboard shells */
  /* layout already offsets for fixed topbar; remove the extra 80px "header space" used by some pages */
  .analytics-shell{padding:0 !important;width:100% !important;max-width:100% !important;margin:0 !important}
  .analytics-shell > .page-card{flex-direction:column !important;align-items:stretch !important}
  .analytics-shell > .page-card,
  .analytics-shell > .card{max-width:100% !important;width:100% !important}
  #inviteWrap{flex-wrap:wrap !important;justify-content:flex-start !important}
  #inviteBtn{width:100%}
  #inviteEmail{width:100% !important}

  /* dashboard: stack charts and keep them readable */
  .ds-charts-row{flex-direction:column}
  .ds-chart-legend{justify-content:flex-start}
  .chart-wrap{height:320px !important;min-height:320px !important}

  /* dashboard: stack filter bar + reduce overflow */
  .filter-bar{flex-direction:column;align-items:stretch}
  .filter-bar > *{width:100%}

  /* dashboard: analytics cards/lists stack */
  .ds-analytics-cards{grid-template-columns:repeat(2, minmax(0, 1fr)) !important}
  .ds-analytics-lists{grid-template-columns:1fr !important}

  /* profile summary: prevent text overlap */
  .profile-top{flex-direction:column;align-items:stretch}
  .profile-stats{flex-direction:row;align-items:center;justify-content:space-between}
  .profile-percent{min-width:auto}
  .profile-name,.profile-sub{white-space:normal}

  /* Top 10 lists: prevent right column from pushing outside the card */
  .call-item{gap:8px;padding:10px 6px;max-width:100%;overflow:hidden}
  .call-number{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .call-right{min-width:0;flex:0 0 auto}
  .duration-badge{min-width:0;padding:6px 8px;white-space:nowrap}
  .call-sub{font-size:12px}
  .call-icon{width:40px;height:40px;flex:0 0 40px}
  .call-right,.duration-badge{font-size:13px}

  /* filter bars */
  .ds-filterbar{justify-content:flex-start !important}
  .ds-filterbar-row{flex-wrap:wrap;width:100%}
  .ds-filterbar-row > *{flex:1 1 160px;min-width:0}
  .ds-filterbar select,.ds-filterbar input,.ds-filterbar button{width:100%}
  #dateRangeWrapper{flex-wrap:wrap;width:100%}
  #selectedRangeDisplay{min-width:0 !important;width:100%}

  /* TotalCalls donut */
  #totalCallsDonut{height:360px !important}

  /* Views/Shared/_TopNavbar.cshtml */
  .ds-topnav{flex-direction:column;align-items:stretch;padding:12px}
  .ds-topnav h1{font-size:22px}
  .ds-topnav-subtitle{margin-left:0;max-width:none}
  .ds-topnav-actions{justify-content:flex-start;flex-wrap:wrap}
}

@media (max-width:360px){
  .topbar .right a.top-link{font-size:12px;padding:6px 8px}
  .summary-grid{grid-template-columns:1fr !important}
}