/* ═══════════════════════════════════════════════════
   DEALFITY BUSINESS — DESIGN SYSTEM
   Theme: Forest Green + Gold (NOT black)
═══════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    /* Sidebar — deep forest green */
    --sidebar-bg:      #1B3C27;
    --sidebar-hover:   #254F33;
    --sidebar-active:  #2E6B3E;
    --sidebar-border:  rgba(255,255,255,.08);
    --sidebar-text:    rgba(255,255,255,.75);
    --sidebar-text-2:  rgba(255,255,255,.45);

    /* Page background — warm cream-green */
    --bg:       #F2F6F3;
    --card:     #FFFFFF;
    --card-2:   #F8FAF8;

    /* Text — dark forest, NOT black */
    --text:     #183020;
    --text-2:   #4A6855;
    --text-3:   #8BA894;

    /* Brand */
    --green:      #2E9E3E;
    --green-dark: #1e7a2c;
    --green-light:#E6F5E9;
    --yellow:     #F5A623;
    --yellow-dark:#D4891A;
    --yellow-light:#FFF8EC;
    --blue:       #1A5FA8;
    --blue-light: #E3EEF9;
    --red:        #D94040;
    --red-light:  #FEE2E2;

    /* Surfaces */
    --border:     #DDE8DF;
    --border-2:   #C8D8CB;
    --shadow:     0 2px 16px rgba(24,48,32,.07);
    --shadow-md:  0 6px 32px rgba(24,48,32,.11);
    --shadow-lg:  0 12px 48px rgba(24,48,32,.15);
    --radius:     14px;
    --radius-sm:  9px;
    --radius-lg:  20px;
    --ff:         'Nunito','DM Sans',sans-serif;
    --ff-body:    'DM Sans',sans-serif;
}
body{font-family:var(--ff-body);background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:inherit}


.biz-sidebar{
    position:fixed;top:0;left:0;bottom:0;width:238px;
    background:var(--sidebar-bg);
    display:flex;flex-direction:column;
    z-index:400;
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:4px 0 24px rgba(0,0,0,.18);
}
.sidebar-logo{
    padding:20px 18px 16px;
    border-bottom:1px solid var(--sidebar-border);
    display:flex;align-items:center;gap:11px;
    text-decoration:none;
}
.sidebar-logo img{height:36px;object-fit:contain;flex-shrink:0}
.logo-text-wrap{}
.logo-biz-label{
    font-size:9px;font-weight:800;letter-spacing:1.2px;
    color:var(--yellow);text-transform:uppercase;
    background:rgba(245,166,35,.15);border:1px solid rgba(245,166,35,.3);
    padding:2px 8px;border-radius:20px;display:inline-block;margin-top:3px
}
.sidebar-nav{flex:1;overflow-y:auto;padding:10px 10px;scrollbar-width:none}
.sidebar-nav::-webkit-scrollbar{display:none}
.nav-group-label{
    font-size:9.5px;font-weight:800;color:var(--sidebar-text-2);
    text-transform:uppercase;letter-spacing:1.1px;
    padding:14px 10px 5px;
}
.nav-item{
    display:flex;align-items:center;gap:9px;
    padding:9px 11px;border-radius:var(--radius-sm);
    font-size:13.5px;font-weight:600;color:var(--sidebar-text);
    cursor:pointer;transition:all .15s;margin-bottom:1px;
    text-decoration:none;position:relative;
}
.nav-item:hover{background:var(--sidebar-hover);color:#fff}
.nav-item.active{
    background:var(--sidebar-active);color:#fff;
    box-shadow:0 2px 12px rgba(0,0,0,.2);
}
.nav-item.active::before{
    content:'';position:absolute;left:0;top:20%;bottom:20%;
    width:3px;border-radius:0 3px 3px 0;background:var(--yellow);
}
.nav-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.nav-badge{
    margin-left:auto;background:var(--red);color:#fff;
    font-size:10px;font-weight:700;min-width:18px;height:18px;
    border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px
}
.sidebar-footer{
    padding:14px 16px;border-top:1px solid var(--sidebar-border);
    display:flex;align-items:center;gap:10px
}
.sidebar-av{
    width:36px;height:36px;border-radius:50%;
    background:linear-gradient(135deg,var(--yellow),var(--yellow-dark));
    display:flex;align-items:center;justify-content:center;
    font-family:var(--ff);font-weight:900;font-size:14px;color:#fff;
    flex-shrink:0;box-shadow:0 0 0 2px rgba(245,166,35,.3)
}
.sidebar-user-name{font-size:13px;font-weight:700;color:#fff}
.sidebar-user-role{font-size:11px;color:var(--sidebar-text-2);margin-top:1px}
.sidebar-logout{
    margin-left:auto;font-size:13px;color:var(--sidebar-text-2);
    cursor:pointer;padding:5px;border-radius:6px;transition:color .15s;text-decoration:none
}
.sidebar-logout:hover{color:var(--red)}
.sidebar-signout-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    margin:0 12px 14px;padding:10px;border-radius:var(--radius-sm);
    font-size:13px;font-weight:700;color:rgba(255,255,255,.6);
    border:1.5px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.04);
    text-decoration:none;transition:all .15s;
}
.sidebar-signout-btn:hover{
    background:rgba(217,64,64,.15);border-color:rgba(217,64,64,.35);
    color:#ff7b7b;
}

/* ─── MAIN ────────────────────────────────────── */
.biz-main{margin-left:238px;min-height:100vh;display:flex;flex-direction:column}

/* ─── TOP BAR (desktop) ───────────────────────── */
.biz-topbar{
    position:sticky;top:0;z-index:200;
    background:rgba(242,246,243,.92);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
    padding:0 28px;height:60px;
    display:flex;align-items:center;justify-content:space-between
}
.biz-topbar-title{font-family:var(--ff);font-weight:900;font-size:16px;color:var(--text)}
.biz-topbar-sub{font-size:12px;color:var(--text-2);margin-top:1px}
.topbar-right{display:flex;align-items:center;gap:10px}
.tb-btn{
    display:flex;align-items:center;gap:6px;padding:8px 16px;
    border-radius:50px;font-size:13px;font-weight:700;cursor:pointer;
    transition:all .15s;border:none;font-family:var(--ff);text-decoration:none
}
.tb-btn-outline{background:var(--card);color:var(--text-2);border:1.5px solid var(--border)}
.tb-btn-outline:hover{border-color:var(--green);color:var(--green)}
.tb-btn-green{background:var(--green);color:#fff;box-shadow:0 3px 12px rgba(46,158,62,.3)}
.tb-btn-green:hover{background:var(--green-dark)}
.tb-btn-yellow{background:var(--yellow);color:var(--text);box-shadow:0 3px 12px rgba(245,166,35,.3)}
.tb-btn-yellow:hover{background:var(--yellow-dark);color:#fff}

/* ─── MOBILE TOPBAR ───────────────────────────── */
.mob-topbar{
    display:none;position:fixed;top:0;left:0;right:0;height:58px;
    background:#fff;border-bottom:1px solid var(--border);
    align-items:center;justify-content:space-between;padding:0 14px;z-index:400;
    box-shadow:0 1px 8px rgba(24,48,32,.06);
}
.mob-menu-btn{
    width:36px;height:36px;border-radius:9px;
    background:var(--green-light);border:1.5px solid rgba(46,158,62,.2);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;cursor:pointer;color:var(--green-dark)
}
.mob-topbar-logo img{height:30px;object-fit:contain}
.mob-topbar-av{
    width:34px;height:34px;border-radius:50%;
    background:linear-gradient(135deg,var(--green),var(--green-dark));
    display:flex;align-items:center;justify-content:center;
    font-family:var(--ff);font-weight:900;font-size:13px;color:#fff;cursor:pointer;
    box-shadow:0 2px 8px rgba(46,158,62,.25)
}

/* ─── MOBILE OVERLAY ──────────────────────────── */
.mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:399}
.mob-overlay.open{display:block}

/* ─── MOBILE BOTTOM NAV ───────────────────────── */
.biz-bottom-nav{
    display:none;position:fixed;bottom:0;left:0;right:0;height:62px;
    background:#ffffff;border-top:2px solid #e8efe9;
    align-items:center;justify-content:space-around;
    padding:0 4px 4px;z-index:300;
    box-shadow:0 -3px 16px rgba(24,48,32,.08);
    overflow:visible;
}
.biz-bnav-item{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    font-size:9.5px;font-weight:700;color:#9ab0a0;
    text-decoration:none;padding:4px 6px;border-radius:8px;flex:1;min-width:0;
    transition:color .15s;
}
.biz-bnav-item.active{color:var(--green)}
.biz-bnav-icon{font-size:18px;line-height:1}

/* ─── CONTENT WRAPPER ─────────────────────────── */
.biz-content{padding:24px 28px;flex:1}

/* ─── CARD ────────────────────────────────────── */
.biz-card{
    background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden
}
.biz-card-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 20px;border-bottom:1px solid var(--border)
}
.biz-card-title{
    font-family:var(--ff);font-weight:800;font-size:14.5px;color:var(--text);
    display:flex;align-items:center;gap:8px
}
.biz-card-icon{
    width:30px;height:30px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;font-size:15px
}
.biz-card-action{font-size:12.5px;font-weight:700;color:var(--green);text-decoration:none;transition:color .15s}
.biz-card-action:hover{color:var(--green-dark)}

/* ─── STAT CARDS ──────────────────────────────── */
.biz-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.biz-stat{
    background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius);padding:20px;
    position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s;
    box-shadow:var(--shadow)
}
.biz-stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.biz-stat-stripe{position:absolute;top:0;left:0;right:0;height:3px}
.biz-stat-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px}
.biz-stat-value{font-family:var(--ff);font-weight:900;font-size:26px;color:var(--text);line-height:1;margin-bottom:4px}
.biz-stat-label{font-size:12px;font-weight:600;color:var(--text-2)}
.biz-stat-badge{position:absolute;top:16px;right:14px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}

/* ─── ALERT ───────────────────────────────────── */
.biz-alert{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.biz-alert-error{background:var(--red-light);color:var(--red);border:1px solid #fca5a5}
.biz-alert-success{background:var(--green-light);color:var(--green-dark);border:1px solid #b6e0be}

/* ─── FIELD ───────────────────────────────────── */
.biz-field{margin-bottom:16px}
.biz-field:last-child{margin-bottom:0}
.biz-label{display:block;font-size:11.5px;font-weight:700;color:var(--text-2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.biz-required{color:var(--red)}
.biz-input,.biz-select,.biz-textarea{
    width:100%;border:1.5px solid var(--border);border-radius:var(--radius-sm);
    padding:11px 14px;font-size:14px;font-family:var(--ff-body);
    color:var(--text);background:var(--card);outline:none;
    transition:border-color .15s,box-shadow .15s;resize:none
}
.biz-input:focus,.biz-select:focus,.biz-textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(46,158,62,.1)}
.biz-textarea{min-height:90px;line-height:1.6}
.biz-hint{font-size:11.5px;color:var(--text-3);margin-top:5px}
.biz-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ─── STATUS PILL ─────────────────────────────── */
.spill{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:20px}
.spill::before{content:'';width:5px;height:5px;border-radius:50%}
.spill-active{background:var(--green-light);color:var(--green-dark)}.spill-active::before{background:var(--green)}
.spill-inactive{background:#f3f4f6;color:#6b7280}.spill-inactive::before{background:#9ca3af}
.spill-pending{background:var(--yellow-light);color:var(--yellow-dark)}.spill-pending::before{background:var(--yellow)}
.spill-completed{background:var(--green-light);color:var(--green-dark)}.spill-completed::before{background:var(--green)}
.spill-sold{background:var(--blue-light);color:var(--blue)}.spill-sold::before{background:var(--blue)}

/* ─── BTN ─────────────────────────────────────── */
.biz-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:11px 22px;border-radius:50px;font-family:var(--ff);font-weight:800;
    font-size:14px;cursor:pointer;border:none;transition:all .15s;text-decoration:none
}
.biz-btn-green{background:var(--green);color:#fff;box-shadow:0 3px 14px rgba(46,158,62,.3)}
.biz-btn-green:hover{background:var(--green-dark);box-shadow:0 5px 20px rgba(46,158,62,.4)}
.biz-btn-yellow{background:var(--yellow);color:var(--text);box-shadow:0 3px 14px rgba(245,166,35,.3)}
.biz-btn-yellow:hover{background:var(--yellow-dark);color:#fff}
.biz-btn-outline{background:var(--card);color:var(--text-2);border:1.5px solid var(--border)}
.biz-btn-outline:hover{border-color:var(--green);color:var(--green)}
.biz-btn-red{background:var(--red-light);color:var(--red);border:1.5px solid #fca5a5}
.biz-btn-red:hover{background:var(--red);color:#fff}
.biz-btn-sm{padding:7px 14px;font-size:12px}
.biz-btn-full{width:100%;padding:14px}

/* ─── TABLE ───────────────────────────────────── */
.biz-table{width:100%;border-collapse:collapse}
.biz-table th{
    padding:10px 16px;text-align:left;font-size:11px;font-weight:700;
    color:var(--text-2);text-transform:uppercase;letter-spacing:.6px;
    background:var(--card-2);border-bottom:1px solid var(--border)
}
.biz-table td{padding:13px 16px;font-size:13.5px;border-bottom:1px solid var(--border)}
.biz-table tr:last-child td{border-bottom:none}
.biz-table tr:hover td{background:var(--card-2)}

/* ─── ANIMATIONS ──────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.anim{animation:fadeUp .35s ease both}
.anim-1{animation-delay:.05s}.anim-2{animation-delay:.1s}.anim-3{animation-delay:.15s}.anim-4{animation-delay:.2s}

/* ─── RESPONSIVE ──────────────────────────────── */
/* =========================================================
   SAFE MOBILE FIXES - ADD AT BOTTOM OF businessmainLayout.css
========================================================= */

@media (max-width: 960px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    padding-top: 58px;
    padding-bottom: 72px;
  }

  .biz-sidebar {
    transform: translateX(-100%);
    width: 280px;
    max-width: 86%;
    z-index: 700;
  }

  .biz-sidebar.open {
    transform: translateX(0);
  }

  .mob-overlay {
    z-index: 650;
  }

  .mob-overlay.open {
    display: block;
  }

  .mob-topbar {
    display: flex;
    z-index: 800;
  }

  .biz-main {
    margin-left: 0;
  }

  .biz-topbar {
    display: none;
  }

  .biz-bottom-nav {
    display: flex;
    z-index: 750;
  }

  .biz-content {
    margin-left: 0 !important;
    padding: 16px 12px 86px !important;
    width: 100%;
    max-width: 100%;
  }

  .biz-stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .biz-stat {
    padding: 15px;
  }

  .biz-stat-value {
    font-size: 22px;
  }

  .biz-card-header {
    padding: 14px;
    gap: 10px;
    flex-wrap: wrap;
  }

  .biz-field-row {
    grid-template-columns: 1fr;
  }

  .biz-card {
    overflow-x: auto;
  }

  .biz-table {
    min-width: 650px;
  }

  .topbar-right {
    display: none;
  }
}

@media (max-width: 520px) {
  .biz-sidebar {
    width: 270px;
    max-width: 88%;
  }

  .biz-stats-row {
    grid-template-columns: 1fr;
  }

  .biz-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .biz-btn {
    width: 100%;
  }

  .biz-bottom-nav {
    height: 64px;
  }

  .biz-bnav-item {
    font-size: 9px;
    padding: 3px;
  }

  .biz-bnav-icon {
    font-size: 18px;
  }
}

/* =========================================================
   MOBILE FAB FIX
========================================================= */

.fab-wrap {
  position: relative;
  flex: 1;
  height: 66px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fab-btn {
  position: absolute;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--yellow);
  border: 4px solid #fff;
  box-shadow: 0 6px 20px rgba(24,48,32,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.fab-lbl-main {
  margin-top: 34px;
  font-size: 10px;
  font-weight: 800;
  color: var(--yellow-dark);
}

.fab-cross {
  position: relative;
  width: 22px;
  height: 22px;
  display: block;
}

.fc-h,
.fc-v {
  position: absolute;
  background: #fff;
  border-radius: 4px;
}

.fc-h {
  width: 22px;
  height: 4px;
  top: 9px;
  left: 0;
}

.fc-v {
  width: 4px;
  height: 22px;
  left: 9px;
  top: 0;
}

#fab-portal {
  display: none;
}

#fab-portal.open {
  display: block;
}

.fab-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 720;
}

.fab-ring {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 760;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
}

.fab-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.fn-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  box-shadow: 0 5px 18px rgba(0,0,0,.2);
}

.fn-green {
  background: var(--green);
}

.fn-blue {
  background: var(--blue);
}

.fn-amber {
  background: var(--yellow);
}

.fn-tag {
  font-size: 11px;
  font-weight: 800;
  background: #fff;
  color: var(--text);
  padding: 4px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .fab-btn {
    width: 56px;
    height: 56px;
  }

  .fab-ring {
    gap: 12px;
  }

  .fn-circle {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .fn-tag {
    font-size: 10px;
  }
}

/* =========================================================
   REMOVE BLUE ACTIVE OVERRIDE
========================================================= */

.nav-item.active {
  background: var(--sidebar-active) !important;
  color: #fff !important;
  font-weight: 700;
}

.biz-bnav-item.active {
  color: var(--green) !important;
}
/* =========================================================
   FINAL MOBILE WIDTH FIX — ADD AT VERY BOTTOM
========================================================= */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
canvas,
iframe {
  max-width: 100%;
}

.biz-content,
.biz-content * {
  max-width: 100%;
}

@media (max-width: 960px) {
  .biz-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding: 14px 10px 86px !important;
    overflow-x: hidden !important;
  }

  .biz-card,
  .biz-stat,
  .biz-alert,
  .biz-field,
  .biz-input,
  .biz-select,
  .biz-textarea,
  .biz-btn {
    width: 100% !important;
    max-width: 100% !important;
  }

  .biz-stats-row,
  .biz-field-row {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  .biz-card-header {
    width: 100%;
    flex-wrap: wrap;
  }

  .biz-card-title {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .biz-table {
    width: 100%;
    min-width: 0 !important;
  }

  .biz-table th,
  .biz-table td {
    white-space: normal;
    word-break: break-word;
    padding: 10px;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  .biz-content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .biz-card {
    border-radius: 12px;
  }

  .biz-card-header {
    padding: 12px;
  }

  .biz-stat {
    padding: 14px;
  }

  .biz-btn {
    padding-left: 12px;
    padding-right: 12px;
  }
}