/* ==========================================================================
   DLS CRM - Datatech Legal Solution
   Brand: Navy #00307A / Gold #FFDE59 / Soft neutral grays
   Mobile-First Responsive Design
   ========================================================================== */

:root{
  --primary: #00307A;
  --primary-dark: #001d4d;
  --primary-light: #1a4f9e;
  --accent-gold: #FFDE59;
  --accent-gold-dark: #e6c530;
  --dark-gray: #2b2f38;
  --text-muted: #6b7280;
  --light-bg: #f3f5f9;
  --border-soft: #e6e9ef;
  --success: #16a34a;
  --info: #0ea5e9;
  --warning: #f59e0b;
  --danger: #dc2626;
  --sidebar-width: 256px;
  --topbar-height: 60px;
  --radius: 14px;
}

*{ scrollbar-width: thin; }

body{
  background: var(--light-bg);
  color: var(--dark-gray);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding-top: var(--topbar-height);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6{ font-weight: 700; color: var(--primary-dark); letter-spacing: -.01em; }

a{ color: var(--primary); }
a:hover{ color: var(--primary-light); }

/* ---------- Buttons ---------- */
.btn{ border-radius: 9px; font-weight: 600; font-size: .9rem; }
.btn-primary{ background: var(--primary); border-color: var(--primary); }
.btn-primary:hover, .btn-primary:focus{ background: var(--primary-light); border-color: var(--primary-light); }
.btn-outline-primary{ color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover{ background: var(--primary); border-color: var(--primary); }
.btn-success{ background: var(--success); border-color: var(--success); }

/* A subtle gold accent for key "do this next" actions, used sparingly */
.btn-gold{ background: var(--accent-gold); border-color: var(--accent-gold); color: var(--primary-dark); font-weight: 700; }
.btn-gold:hover{ background: var(--accent-gold-dark); border-color: var(--accent-gold-dark); color: var(--primary-dark); }

/* ---------- Login / Auth Pages ---------- */
.login-page{
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 15%, rgba(255,222,89,.10) 0%, transparent 45%),
    linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.login-card{
  background:#fff; border-radius: 18px; padding: 2.25rem 2rem;
  width:100%; max-width: 390px; margin: 1rem;
  box-shadow: 0 20px 50px rgba(0,18,52,.35);
  border-top: 4px solid var(--accent-gold);
}
.login-card h4, .login-card h5{ color: var(--primary-dark); }
.login-card .form-control{ border-radius: 9px; padding: .55rem .8rem; }
.login-card .form-control:focus{ border-color: var(--primary-light); box-shadow: 0 0 0 .2rem rgba(0,48,122,.12); }

/* ---------- Topbar ---------- */
.topbar{
  height: var(--topbar-height);
  background:#fff;
  z-index:1050;
  border-bottom: 1px solid var(--border-soft);
}
.notif-badge{ position:absolute; top:-6px; right:-10px; font-size:.6rem; background: var(--danger) !important; }
.navbar-brand img{ box-shadow: 0 2px 6px rgba(0,48,122,.25); }

/* ---------- Layout ---------- */
.app-wrapper{ display:flex; min-height: calc(100vh - var(--topbar-height)); }

.sidebar{
  width: var(--sidebar-width);
  background: linear-gradient(180deg, var(--primary-dark) 0%, var(--primary) 100%);
  color:#fff;
  position: fixed;
  top: var(--topbar-height);
  bottom: 0;
  left: -var(--sidebar-width);
  overflow-y:auto;
  transition: left .25s ease;
  z-index: 1040;
  box-shadow: 4px 0 20px rgba(0,0,0,.08);
}
.sidebar.show{ left:0; }
.sidebar-brand{ padding:1rem 1.1rem; font-weight:700; border-bottom:1px solid rgba(255,255,255,.12); }
.sidebar-nav{ padding: .75rem .5rem; }
.sidebar-nav .nav-link{
  color: rgba(255,255,255,.78);
  padding:.65rem 1rem;
  margin-bottom: .15rem;
  border-radius: 9px;
  font-size: .92rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .15s ease, color .15s ease;
}
.sidebar-nav .nav-link i{ width:22px; color: rgba(255,255,255,.6); }
.sidebar-nav .nav-link:hover{ background: rgba(255,255,255,.08); color:#fff; }
.sidebar-nav .nav-link.active{
  background: rgba(255,222,89,.14);
  color: var(--accent-gold);
  border-left-color: var(--accent-gold);
  font-weight: 600;
}
.sidebar-nav .nav-link.active i{ color: var(--accent-gold); }

.sidebar-overlay{
  display:none;
  position:fixed; inset:0; background:rgba(0,18,52,.55);
  z-index:1030;
}
.sidebar-overlay.show{ display:block; }

.app-content{ flex:1; padding:1.25rem; margin-left:0; }

@media (min-width: 992px){
  .sidebar{ left:0; }
  .app-content{ margin-left: var(--sidebar-width); padding: 1.5rem 1.75rem; }
}

/* ---------- Cards / Dashboard ---------- */
.stat-card{
  border:none;
  border-radius: var(--radius);
  box-shadow: 0 2px 14px rgba(20,30,60,.07);
  background: #fff;
  transition: box-shadow .2s ease, transform .2s ease;
}
.stat-card:hover{ box-shadow: 0 6px 22px rgba(20,30,60,.1); }
.stat-card .stat-icon{
  width:50px; height:50px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:1.25rem;
}

/* Nicer nav-pills using brand color instead of bootstrap default */
.nav-pills .nav-link.active{ background: var(--primary) !important; }
.nav-pills .nav-link{ color: var(--primary); font-weight: 600; border-radius: 9px; }

/* Card headers / section titles consistency */
h6.mb-3{ color: var(--primary-dark); font-weight: 700; letter-spacing: -.01em; }

/* ---------- Tables (Mobile Responsive) ---------- */
.table{ font-size: .92rem; }
.table thead.table-light th{
  background: #eef1f7; color: var(--primary-dark);
  font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em;
  border-bottom: none;
}
.table-responsive-stack{ width:100%; }
@media (max-width: 768px){
  table.table-mobile-cards thead{ display:none; }
  table.table-mobile-cards tr{ display:block; margin-bottom:1rem; border:1px solid var(--border-soft); border-radius: var(--radius); padding:.6rem; background:#fff; box-shadow: 0 2px 10px rgba(20,30,60,.05); }
  table.table-mobile-cards td{ display:flex; justify-content:space-between; align-items:center; border:none; padding:.45rem .4rem; }
  table.table-mobile-cards td::before{ content: attr(data-label); font-weight:700; color: var(--text-muted); margin-right:.5rem; font-size: .8rem; }
}

/* ---------- Touch friendly buttons ---------- */
.btn-call{ background: var(--success); color:#fff; }
.btn-call:hover{ background:#128a3e; color:#fff; }
.btn-whatsapp{ background:#25D366; color:#fff; }
.btn-whatsapp:hover{ background:#1ebc59; color:#fff; }
.btn-touch{ min-width:44px; min-height:44px; border-radius: 9px; }

/* ---------- Sticky bottom action bar (mobile lead detail) ---------- */
.sticky-action-bar{
  position: fixed;
  bottom: 0; left:0; right:0;
  background:#fff;
  border-top:1px solid var(--border-soft);
  padding:.6rem 1rem;
  display:flex;
  gap:.5rem;
  z-index: 1045;
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
}
@media (min-width: 992px){
  .sticky-action-bar{ display:none; }
}

/* ---------- Misc ---------- */
.badge{ border-radius: 6px; font-weight: 600; }
.badge-status{ font-size:.72rem; padding:.35em .6em; }
.progress{ height:10px; border-radius:6px; background: #eef1f7; }
.progress-bar{ background: var(--primary); }
.progress-bar.bg-success{ background: var(--success) !important; }

.timeline{ position:relative; padding-left:1.5rem; }
.timeline::before{ content:''; position:absolute; left:6px; top:0; bottom:0; width:2px; background: var(--border-soft); }
.timeline-item{ position:relative; margin-bottom:1rem; }
.timeline-item::before{ content:''; position:absolute; left:-1.5rem; top:4px; width:10px; height:10px; border-radius:50%; background: var(--accent-gold); box-shadow: 0 0 0 3px rgba(255,222,89,.25); }

/* Alerts - slightly softened with brand tint */
.alert-success{ background:#eafaf0; border-color:#bdeccb; color:#0f6b34; }
.alert-danger{ background:#fdecec; border-color:#f7c8c8; color:#a32424; }
.alert-info{ background:#eaf3fb; border-color:#c7dff3; color: var(--primary-dark); }
.alert-warning{ background:#fff8e6; border-color:#ffe8a8; color:#8a6300; }

/* List groups used on customer/ticket pages */
.list-group-item{ border-color: var(--border-soft); }
.list-group-item-action:hover{ background: #f7f9fc; }

/* ---------- Calling CRM style compact list (Executive panel) ---------- */
.call-list{ display:flex; flex-direction:column; gap:.6rem; }
.call-row{
  display:flex; align-items:center; gap:.75rem;
  background:#fff; border-radius: var(--radius); padding:.65rem .85rem;
  box-shadow:0 2px 10px rgba(20,30,60,.06);
  border-left:5px solid #cbd2dc;
  transition: box-shadow .15s ease;
}
.call-row:hover{ box-shadow: 0 4px 16px rgba(20,30,60,.1); }
.call-row.st-new{ border-left-color:#6b7280; }
.call-row.st-contacted{ border-left-color: var(--info); }
.call-row.st-follow_up{ border-left-color: var(--warning); }
.call-row.st-interested{ border-left-color: var(--primary); }
.call-row.st-proposal_sent{ border-left-color: var(--dark-gray); }
.call-row.st-converted{ border-left-color: var(--success); }
.call-row.st-not_interested, .call-row.st-lost{ border-left-color: var(--danger); }

.call-avatar{
  width:46px; height:46px; min-width:46px; border-radius:50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.05rem; text-transform:uppercase;
  box-shadow: 0 2px 6px rgba(0,48,122,.3);
}
.call-row-body{ flex:1; min-width:0; }
.call-row-name{ font-weight:700; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: var(--dark-gray); }
.call-row-meta{ font-size:.76rem; color: var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.call-row-actions{ display:flex; gap:.4rem; flex-shrink:0; }
.call-btn-round{
  width:42px; height:42px; border-radius:50%; border:none;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
  color:#fff; flex-shrink:0;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.call-btn-round.call{ background: var(--success); }
.call-btn-round.wa{ background:#25D366; }
.call-btn-round:active{ transform:scale(.92); }
.call-row-status{ font-size:.65rem; padding:.18em .5em; border-radius:20px; white-space:nowrap; }

/* ---------- Scrollbar polish (desktop) ---------- */
::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-thumb{ background: #c7cedb; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover{ background: #a8b2c6; }

/* ==========================================================================
   MOBILE APP EXPERIENCE
   Bottom tab bar, safe area insets, fullscreen feel, touch optimizations
   ========================================================================== */

/* ---- Safe area insets (notch / home indicator support) ---- */
body {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---- Login page - fullscreen app splash feel ---- */
@media (max-width: 768px) {
  .login-page {
    background:
      radial-gradient(circle at 30% 20%, rgba(255,222,89,.15) 0%, transparent 50%),
      linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
    align-items: flex-start;
    padding-top: calc(env(safe-area-inset-top) + 2.5rem);
    min-height: 100dvh;
  }
  .login-card {
    margin: 0 1rem 1rem;
    border-radius: 22px;
    padding: 2rem 1.5rem;
    max-width: 100%;
    border-top: 4px solid var(--accent-gold);
  }
}

/* ---- Topbar: app-like on mobile ---- */
@media (max-width: 991px) {
  .topbar {
    height: calc(var(--topbar-height) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    position: fixed;
    top: 0; left: 0; right: 0;
    border-bottom: 1px solid var(--border-soft);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255,255,255,.96);
  }
  body { padding-top: calc(var(--topbar-height) + env(safe-area-inset-top)); }
  .app-content { padding: 1rem .85rem 80px; }
}

/* ---- Bottom Tab Bar (mobile nav - replaces hamburger sidebar for staff) ---- */
.bottom-tab-bar {
  display: none;
}
@media (max-width: 991px) {
  .bottom-tab-bar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--border-soft);
    z-index: 1045;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 20px rgba(0,18,52,.08);
  }
  .bottom-tab-bar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .45rem .2rem calc(.45rem + env(safe-area-inset-bottom));
    color: var(--text-muted);
    text-decoration: none;
    font-size: .6rem;
    font-weight: 600;
    gap: 3px;
    letter-spacing: .02em;
    border-top: 2px solid transparent;
    transition: color .15s ease;
  }
  .bottom-tab-bar a i {
    font-size: 1.15rem;
    transition: transform .18s ease;
  }
  .bottom-tab-bar a.active,
  .bottom-tab-bar a:hover {
    color: var(--primary);
    border-top-color: var(--primary);
  }
  .bottom-tab-bar a.active i {
    transform: translateY(-2px);
  }
  .bottom-tab-bar a .tab-badge {
    position: absolute;
    top: 4px;
    background: var(--danger);
    color: #fff;
    font-size: .55rem;
    padding: .1em .35em;
    border-radius: 20px;
    font-weight: 700;
    line-height: 1.4;
  }
  /* Hide the sidebar & hamburger when bottom tab bar is visible */
  #mobileMenuBtn { display: none !important; }
  .sidebar { display: none !important; }
}

/* ---- Card design on mobile - full-bleed look ---- */
@media (max-width: 576px) {
  .stat-card {
    border-radius: 14px;
  }
  h4 { font-size: 1.1rem; }
  .btn { font-size: .85rem; }
}

/* ---- Call list rows - larger touch targets on mobile ---- */
@media (max-width: 768px) {
  .call-row { padding: .75rem .85rem; }
  .call-btn-round { width: 46px; height: 46px; font-size: 1.1rem; }
}

/* ---- Sticky action bar - safe area aware ---- */
.sticky-action-bar {
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
}

/* ---- Tables on mobile: card look ---- */
@media (max-width: 768px) {
  table.table-mobile-cards td { font-size: .87rem; }
}

/* ---- Form controls - app-like feel ---- */
@media (max-width: 768px) {
  .form-control, .form-select {
    font-size: 16px; /* prevents iOS zoom-in on focus */
    border-radius: 10px;
    padding: .6rem .85rem;
  }
  .btn { border-radius: 11px; padding: .55rem 1.1rem; }
  .btn-touch { min-width: 46px; min-height: 46px; }
}

/* ---- Modals - slide up from bottom on mobile (like action sheets) ---- */
@media (max-width: 768px) {
  .modal-dialog {
    margin: 0;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    max-width: 100%;
    transform: translateY(0) !important;
  }
  .modal-content {
    border-radius: 20px 20px 0 0;
    border: none;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal.fade .modal-dialog { transition: transform .25s ease; transform: translateY(100%) !important; }
  .modal.show .modal-dialog { transform: translateY(0) !important; }
}

/* ---- Nav tabs/pills mobile ---- */
@media (max-width: 576px) {
  .nav-tabs, .nav-pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; font-size: .8rem; }
}

/* ---- Dashboard stat cards - 2 per row on mobile ---- */
@media (max-width: 576px) {
  .stat-card .stat-icon { width: 42px; height: 42px; font-size: 1.1rem; }
  .stat-card .fs-4 { font-size: 1.3rem !important; }
}

/* ---- Client portal bottom nav ---- */
.client-bottom-nav {
  display: none;
}
@media (max-width: 991px) {
  .client-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--border-soft);
    z-index: 1045;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 20px rgba(0,18,52,.08);
  }
  .client-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .45rem .2rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: .6rem;
    font-weight: 600;
    gap: 3px;
    border-top: 2px solid transparent;
  }
  .client-bottom-nav a i { font-size: 1.15rem; }
  .client-bottom-nav a.active,
  .client-bottom-nav a:hover { color: var(--primary); border-top-color: var(--primary); }
  /* hide old pill nav inside client pages */
  .client-pill-nav { display: none !important; }
  .container-fluid { padding-bottom: 80px; }
}