/* ==========================================================================
   Reachline — shared application styles
   Design language carried over from landing.php: mint palette, Space Grotesk
   headings, Inter body copy, Bootstrap 5 components.
   ========================================================================== */

:root{
  --mint-900:#0B3B34;
  --mint-700:#0E9A7C;
  --mint-600:#12B389;
  --mint-500:#2ED9B4;
  --mint-100:#E7FBF4;
  --mint-50:#F5FDFB;
  --ink:#10221E;
  --ink-soft:#4D655F;
  --line:#E6F1EE;
  --white:#FFFFFF;
  --danger:#D64545;
  --warning:#C98A00;
  --radius:12px;
}

*{ box-sizing:border-box; }

body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--mint-50);
  line-height:1.6;
  margin:0;
}

h1,h2,h3,h4,h5,h6,.brand,.display-font{
  font-family:'Space Grotesk',system-ui,sans-serif;
  letter-spacing:-0.01em;
  color:var(--mint-900);
}
.hero h1, .hero .brand { color:#fff !important; }

a{ color:var(--mint-700); text-decoration:none; }
a:hover{ color:var(--mint-900); }

.text-soft{ color:var(--ink-soft) !important; }
.text-mint{ color:var(--mint-700) !important; }
.text-mint-300{ color:#9ED9C9 !important; }
.bg-mint-50{ background:var(--mint-50) !important; }
.bg-mint-100{ background:var(--mint-100) !important; }
.border-soft{ border-color:var(--line) !important; }

/* ---------- Buttons ---------- */
.btn-mint{ background:var(--mint-600); color:#fff; border:1px solid var(--mint-600); font-weight:600; border-radius:9px; }
.btn-mint:hover,.btn-mint:focus{ background:var(--mint-700); border-color:var(--mint-700); color:#fff; }
.btn-outline-mint{ border:1.5px solid var(--mint-600); color:var(--mint-900); font-weight:600; border-radius:9px; background:transparent; }
.btn-outline-mint:hover{ background:var(--mint-100); color:var(--mint-900); border-color:var(--mint-600); }
.btn-soft{ background:var(--mint-100); color:var(--mint-900); border:1px solid var(--line); font-weight:600; border-radius:9px; }
.btn-soft:hover{ background:#D8F6EC; color:var(--mint-900); }
.btn{ border-radius:9px; }
.btn-sm{ border-radius:8px; }

/* ---------- Forms ---------- */
.form-control,.form-select{
  border-radius:9px; border:1px solid var(--line); padding:.6rem .8rem; font-size:.95rem;
}
.form-control:focus,.form-select:focus{
  border-color:var(--mint-500); box-shadow:0 0 0 .2rem rgba(46,217,180,.18);
}
.form-label{ font-weight:600; font-size:.88rem; color:var(--mint-900); margin-bottom:.35rem; }
.form-text{ color:var(--ink-soft); font-size:.8rem; }
.form-check-input:checked{ background-color:var(--mint-600); border-color:var(--mint-600); }

/* ---------- Cards ---------- */
.card-soft{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(11,59,52,.03);
}
.card-soft > .card-header{
  background:#fff; border-bottom:1px solid var(--line); font-weight:600;
  color:var(--mint-900); padding:1rem 1.25rem; border-radius:var(--radius) var(--radius) 0 0;
}
.card-soft > .card-body{ padding:1.25rem; }

.stat-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem 1.25rem; height:100%;
}
.stat-card .stat-icon{
  width:38px; height:38px; border-radius:10px; background:var(--mint-100); color:var(--mint-700);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.stat-card .stat-value{ font-family:'Space Grotesk'; font-size:1.6rem; font-weight:700; color:var(--mint-900); line-height:1.2; }
.stat-card .stat-label{ font-size:.8rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }

/* ---------- App shell: sidebar + topbar ---------- */
.app-shell{ display:flex; min-height:100vh; }

.app-sidebar{
  width:246px; flex:0 0 246px; background:var(--mint-900); color:#D6EFE8;
  padding:1.1rem 1rem 2rem; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.app-sidebar .brand{ color:#fff; font-size:1.15rem; margin-bottom:1.4rem; padding:.25rem .35rem; }
.app-sidebar .brand .mark{
  width:30px; height:30px; border-radius:9px; background:var(--mint-500); color:var(--mint-900);
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.side-label{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; color:#7FBFB0;
  margin:1.15rem .4rem .45rem;
}
.side-link{
  display:flex; align-items:center; gap:.65rem; padding:.55rem .7rem; border-radius:9px;
  color:#CDE9E2; font-size:.9rem; font-weight:500; margin-bottom:.15rem;
}
.side-link:hover{ background:rgba(255,255,255,.08); color:#fff; }
.side-link.active{ background:var(--mint-600); color:#fff; font-weight:600; }
.side-link i{ font-size:1rem; width:1.15rem; text-align:center; }
.side-link .badge{ font-size:.68rem; }

.app-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

.app-topbar{
  background:#fff; border-bottom:1px solid var(--line); padding:.85rem 1.5rem;
  display:flex; align-items:center; gap:1rem; position:sticky; top:0; z-index:1030;
}
.app-topbar .page-title{ font-size:1.15rem; font-weight:700; margin:0; }
.app-topbar .page-sub{ font-size:.8rem; color:var(--ink-soft); margin:0; }
.app-topbar > .flex-grow-1{ min-width:0; }
.app-topbar .page-title,.app-topbar .page-sub{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-toggle{
  border:1px solid var(--line); background:#fff; border-radius:10px;
  padding:.4rem .65rem; color:var(--mint-900); line-height:1;
  transition:background .15s, border-color .15s, box-shadow .15s;
  box-shadow:0 1px 3px rgba(11,59,52,.06);
}
.sidebar-toggle:hover{ background:var(--mint-100); border-color:var(--mint-500); }
.sidebar-toggle i{ font-size:1.25rem; display:block; }

.app-content{ padding:1.5rem; flex:1 1 auto; }
.avatar-circle{
  width:34px; height:34px; border-radius:50%; background:var(--mint-100); color:var(--mint-700);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
}

.balance-pill{
  background:var(--mint-100); color:var(--mint-900); border-radius:999px;
  padding:.3rem .8rem; font-size:.82rem; font-weight:600; display:inline-flex; align-items:center; gap:.4rem;
}

/* Sidebar overlay backdrop */
.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:1044;
  background:rgba(11,59,52,.45);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .25s ease;
}
.sidebar-overlay.show{
  display:block;
  opacity:1;
}

@media (max-width:991.98px){
  .app-sidebar{
    position:fixed;
    left:0; top:0;
    z-index:1045;
    height:100dvh;
    transform:translateX(-110%);
    transition:transform .3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow:none;
    border-right:1px solid rgba(255,255,255,.08);
  }
  .app-sidebar.show{
    transform:translateX(0);
    box-shadow:6px 0 32px rgba(11,59,52,.28);
  }
  .app-content{ padding:1rem; }
}

.pwa-install-button{ white-space:nowrap; }
.push-notification-button{ white-space:nowrap; }

/* ---- Floating liquid-glass bottom nav ------------------------------------ */
.mobile-bottom-nav{ display:none; }

@media (max-width:767.98px){
  .app-topbar{ padding:.7rem .85rem; gap:.55rem; }
  .app-topbar .page-title{ font-size:1rem; }

  /* Push content up so it never hides behind the floating pill */
  .app-content{ padding-bottom:calc(6rem + env(safe-area-inset-bottom)); }

  /* The pill itself */
  .mobile-bottom-nav{
    display:flex !important;
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:calc(.9rem + env(safe-area-inset-bottom));
    z-index:1035;

    /* size — auto-shrinks on tiny phones */
    width:min(360px, calc(100% - 2rem));
    padding:.38rem .4rem;
    gap:.15rem;

    /* liquid glass */
    background:rgba(255,255,255,.55);
    backdrop-filter:blur(20px) saturate(1.8);
    -webkit-backdrop-filter:blur(20px) saturate(1.8);
    border:1px solid rgba(255,255,255,.75);
    border-radius:999px;
    box-shadow:
      0 8px 32px rgba(11,59,52,.18),
      0 2px  8px rgba(11,59,52,.10),
      inset 0 1px 0 rgba(255,255,255,.9);

    /* smooth entrance */
    animation:floatNavIn .35s cubic-bezier(0.16,1,0.3,1) both;
  }

  @keyframes floatNavIn{
    from{ opacity:0; transform:translateX(-50%) translateY(18px) scale(.94); }
    to{   opacity:1; transform:translateX(-50%) translateY(0)    scale(1);    }
  }

  /* Each tab button */
  .mobile-bottom-nav a{
    flex:1;
    min-width:0;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.1rem;
    padding:.45rem .3rem;
    border-radius:999px;
    color:var(--ink-soft);
    font-size:.6rem;
    font-weight:600;
    line-height:1.15;
    text-decoration:none;
    transition:color .2s ease, transform .15s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-bottom-nav a i{
    font-size:1.2rem;
    transition:transform .2s cubic-bezier(0.34,1.56,0.64,1);
    position:relative; z-index:1;
  }
  .mobile-bottom-nav a span{
    position:relative; z-index:1;
  }

  /* Active glow pill behind the active tab */
  .mobile-bottom-nav a::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:999px;
    background:linear-gradient(135deg, var(--mint-500), var(--mint-600));
    opacity:0;
    transform:scale(.7);
    transition:opacity .25s ease, transform .25s cubic-bezier(0.34,1.4,0.64,1);
    box-shadow:0 4px 16px rgba(18,179,137,.45);
  }
  .mobile-bottom-nav a.active::before{
    opacity:1;
    transform:scale(1);
  }

  /* Active state — white text + icon bounce */
  .mobile-bottom-nav a.active{
    color:#fff;
  }
  .mobile-bottom-nav a.active i{
    transform:translateY(-2px) scale(1.15);
  }

  /* Hover (non-active) — subtle tint */
  .mobile-bottom-nav a:not(.active):hover{
    color:var(--mint-700);
    background:rgba(46,217,180,.1);
  }

  .pwa-install-button{ padding:.35rem .5rem; }
  .pwa-install-label{ display:none; }
  .push-notification-button{ padding:.35rem .5rem; font-size:.76rem; }
}

/* ---------- Tables ---------- */
.table-soft{ --bs-table-bg:transparent; margin-bottom:0; }
.table-soft > :not(caption) > * > *{ padding:.7rem .75rem; border-bottom-color:var(--line); vertical-align:middle; }
.table-soft thead th{
  font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);
  font-weight:600; background:var(--mint-50); border-bottom-color:var(--line); white-space:nowrap;
}
.table-soft tbody tr:hover{ background:var(--mint-50); }
.table-responsive{ border-radius:0 0 var(--radius) var(--radius); }
.card-header.d-flex{ flex-wrap:wrap; gap:.5rem; }
.alert,.card-header,.card-body,.form-text,.table td,.table th{ overflow-wrap:anywhere; }
.integrations-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; margin:0; }
.integrations-grid > .col-lg-7,.integrations-grid > .col-lg-5{ display:contents; }
.integrations-grid > .col-lg-7 > .card-soft,.integrations-grid > .col-lg-5 > .card-soft{ margin-top:0 !important; }

@media (max-width:991.98px){
  .integrations-grid{ grid-template-columns:1fr; }
}

/* ---------- Auth screens ---------- */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:2.5rem 1rem; background:linear-gradient(180deg,var(--mint-50) 0%, #fff 70%);
}
.auth-card{
  width:100%; max-width:440px; background:#fff; border:1px solid var(--line);
  border-radius:18px; padding:2rem; box-shadow:0 24px 60px -32px rgba(11,59,52,.35);
}
.auth-brand{ color:var(--mint-900); font-weight:700; font-size:1.25rem; display:flex; align-items:center; gap:.55rem; justify-content:center; }
.auth-brand .mark{
  width:32px; height:32px; border-radius:10px; background:var(--mint-600); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.auth-side{ background:var(--mint-900); color:#D6EFE8; border-radius:18px; padding:2.5rem; }
.auth-side h2{ color:#fff; }
.auth-side ul{ list-style:none; padding:0; margin:1.25rem 0 0; }
.auth-side li{ display:flex; gap:.6rem; margin-bottom:.7rem; font-size:.92rem; }
.auth-side li i{ color:var(--mint-500); }


/* ---------- Toasts / alerts ---------- */
.toast-stack{ position:fixed; top:1rem; right:1rem; z-index:1080; width:340px; max-width:calc(100vw - 2rem); }
.toast-item{
  background:#fff; border:1px solid var(--line); border-left:5px solid var(--mint-600);
  border-radius:10px; padding:.75rem 1rem; margin-bottom:.6rem; font-size:.9rem;
  box-shadow:0 12px 30px -18px rgba(11,59,52,.45); display:flex; gap:.6rem; align-items:flex-start;
}
.toast-item.danger{ border-left-color:var(--danger); }
.toast-item.warning{ border-left-color:var(--warning); }
.toast-item.info{ border-left-color:#3A8DDE; }
.toast-item .btn-close{ font-size:.65rem; opacity:.5; }

.empty-state{ border:1px dashed var(--line); border-radius:var(--radius); background:#fff; }

/* ---------- SMS composer ---------- */
.phone-preview{
  background:var(--ink); border-radius:26px; padding:12px; max-width:290px;
  box-shadow:0 22px 45px -24px rgba(11,59,52,.4);
}
.phone-preview .screen{ background:#fff; border-radius:18px; padding:14px 12px; min-height:180px; }
.phone-preview .bubble{
  background:var(--mint-100); border-radius:14px 14px 14px 4px; padding:.6rem .8rem;
  font-size:.82rem; white-space:pre-wrap; word-break:break-word;
}
.composer-meta{ font-size:.8rem; color:var(--ink-soft); }
.segment-pill{
  border-radius:999px; padding:.15rem .6rem; font-size:.75rem; font-weight:600;
  background:var(--mint-100); color:var(--mint-900);
}
.var-chip{
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:.2rem .6rem;
  font-size:.75rem; cursor:pointer; color:var(--mint-900);
}
.var-chip:hover{ background:var(--mint-100); }

/* ---------- Misc ---------- */
.badge-soft{ background:var(--mint-100); color:var(--mint-900); font-weight:600; }
.list-tile{ border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:.9rem 1rem; }
.progress{ background:var(--mint-100); border-radius:999px; }
.progress-bar{ background:var(--mint-600); }
.dropdown-menu{ border-color:var(--line); border-radius:11px; box-shadow:0 18px 40px -26px rgba(11,59,52,.45); }
.nav-tabs .nav-link{ color:var(--ink-soft); border:none; border-bottom:2px solid transparent; font-weight:500; }
.nav-tabs .nav-link.active{ color:var(--mint-900); border-bottom-color:var(--mint-600); background:transparent; font-weight:600; }
.modal-content{ border-radius:16px; border-color:var(--line); }
.render-vars{ font-family:'Space Grotesk',monospace; background:var(--mint-50); border-radius:6px; padding:0 .3rem; }
.table-cards-empty{ color:var(--ink-soft); }

@media print{
  .app-sidebar,.app-topbar,.no-print{ display:none !important; }
  .app-content{ padding:0; }
}

/* ---------- PWA Floating Notification Prompt ---------- */
.pwa-notification-prompt{
  position:fixed;
  bottom:1.25rem;
  right:1.25rem;
  left:1.25rem;
  max-width:440px;
  margin:0 auto;
  z-index:9999;
  background:#fff;
  border:1.5px solid var(--mint-500);
  border-radius:18px;
  box-shadow:0 16px 36px -12px rgba(11,59,52,.35);
  padding:1rem 1.15rem;
  display:flex;
  align-items:center;
  gap:.85rem;
  animation:pwaSlideUp .3s ease-out;
}
@keyframes pwaSlideUp{
  from{ transform:translateY(100%); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}
.pwa-notif-icon{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:12px;
  background:var(--mint-100);
  color:var(--mint-700);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.25rem;
}
.pwa-notif-text{
  flex:1;
  min-width:0;
}
.pwa-notif-text strong{
  display:block;
  font-size:.92rem;
  color:var(--mint-900);
  line-height:1.2;
}
.pwa-notif-text small{
  color:var(--ink-soft);
  font-size:.78rem;
  display:block;
  margin-top:.15rem;
}
.pwa-notif-allow{
  flex:0 0 auto;
  border-radius:999px;
  padding:.45rem .95rem;
  font-weight:600;
  font-size:.85rem;
  background:var(--mint-600);
  color:#fff;
  border:none;
}
.pwa-notif-allow:hover{ background:var(--mint-700); color:#fff; }
.pwa-notif-close{
  flex:0 0 auto;
  opacity:.5;
}
.pwa-notif-close:hover{ opacity:1; }

/* ---------- PWA Floating Smart Install Banner ---------- */
.pwa-install-banner {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10050;
  width: min(480px, calc(100% - 1.8rem));
  background: rgba(11, 59, 52, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(46, 217, 180, 0.45);
  border-radius: 18px;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(46, 217, 180, 0.15);
  color: #fff;
  padding: 0.55rem 0.85rem;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  animation: pwaBannerFloatDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pwaBannerFloatDown {
  from {
    transform: translate(-50%, -45px) scale(0.94);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
  }
}
.pwa-install-banner.pwa-banner-hiding {
  transform: translate(-50%, -35px) scale(0.94);
  opacity: 0;
}
.pwa-banner-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.pwa-banner-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.2rem 0.35rem;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background-color 0.15s;
  flex-shrink: 0;
}
.pwa-banner-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}
.pwa-banner-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1.5px solid rgba(46, 217, 180, 0.5);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
  object-fit: cover;
  background: #0B3B34;
}
.pwa-banner-text {
  flex: 1;
  min-width: 0;
}
.pwa-banner-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  line-height: 1.2;
}
.pwa-banner-badge {
  font-size: 0.65rem;
  background: rgba(46, 217, 180, 0.22);
  color: var(--mint-500);
  border: 1px solid rgba(46, 217, 180, 0.45);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.pwa-banner-desc {
  font-size: 0.77rem;
  color: #B9DED3;
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pwa-banner-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
  color: var(--mint-900);
  border: none;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.38rem 0.95rem;
  border-radius: 999px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  box-shadow: 0 3px 12px rgba(46, 217, 180, 0.35);
  cursor: pointer;
}
.pwa-banner-btn:hover {
  background: #fff;
  color: var(--mint-900);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(46, 217, 180, 0.5);
}

@media (max-width: 480px) {
  .pwa-install-banner {
    top: 0.85rem;
    padding: 0.5rem 0.75rem;
    width: calc(100% - 1.25rem);
  }
  .pwa-banner-desc {
    display: none;
  }
  .pwa-banner-btn {
    padding: 0.32rem 0.8rem;
    font-size: 0.78rem;
  }
}

/* Rich PWA Step Guide Modal */
.pwa-guide-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.4rem 0;
}
.pwa-guide-step {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.pwa-guide-step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.pwa-guide-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mint-100);
  color: var(--mint-800);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pwa-guide-content {
  flex: 1;
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.45;
}
.pwa-guide-content strong {
  color: var(--mint-900);
}