/* Parimal Salesperson Dashboard - Mobile-first theme */

:root{
  /* Bottom nav sizing (auto spacing) */
  --bottom-nav-h: 64px;
  --bottom-nav-gap: 12px;
  --bottom-nav-safe: env(safe-area-inset-bottom);
  --bottom-nav-space: calc(var(--bottom-nav-h) + var(--bottom-nav-safe) + var(--bottom-nav-gap));

  --primary:#198754;
  --secondary:#111827;
  --bg:#f6f7f9;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --radius:14px;
}

/* Base */
html,body{height:100%;}
body{background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
a{text-decoration:none;}
.small, small{color:var(--muted);}

/* Navbar */
.navbar{background:var(--primary) !important;}
.navbar .navbar-brand, .navbar .nav-link{color:#fff !important;}
.navbar .btn, .navbar .btn:focus{box-shadow:none;}
.navbar-toggler{border-color:rgba(255,255,255,.35);}
.navbar-toggler-icon{filter:invert(1);}

/* Layout */
.page-wrap{min-height:100vh;}
/* Sidebar */
.list-group-item{
  border:0;
  border-bottom:1px solid var(--border);
  padding:.85rem 1rem;
  color:var(--text);
}
.list-group-item:hover{background:#fff;}
.list-group-item.active{
  background:rgba(25,135,84,.12);
  color:var(--text);
  font-weight:600;
  border-left:3px solid var(--primary);
}
.sidebar-title{
  font-weight:700;
  letter-spacing:.2px;
  padding:1rem 1rem .5rem 1rem;
}

/* Cards */
.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.card.shadow-sm{box-shadow:0 8px 24px rgba(31,41,55,.06)!important;}
.stat-card{cursor:pointer; transition:transform .08s ease, box-shadow .08s ease;}
.stat-card:active{transform:scale(.99);}
.stat-icon{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(25,135,84,.12);
  color:var(--primary);
}
.stat-value{font-size:1.4rem; font-weight:800; line-height:1;}
.stat-label{color:var(--muted); font-size:.86rem;}

/* Tables */
.table thead th{white-space:nowrap;}
.table td{vertical-align:middle;}
.dt-container{overflow-x:auto;}
.dataTables_wrapper .dataTables_paginate .paginate_button{padding:.25rem .6rem;}
.badge{border-radius:999px;}

/* Mobile: keep tables readable */
@media (max-width:576px){
  /* user asked: all DataTable columns left aligned on mobile */
  table.table td,
  table.table th,
  table.dataTable td,
  table.dataTable th{
    text-align:left !important;
  }
  /* DataTables sometimes applies text-end via classes */
  .text-end{ text-align:left !important; }
  /* Allow horizontal scroll instead of squishing */
  .dt-container{overflow-x:auto; -webkit-overflow-scrolling:touch;}
}

/* Status badges */
.badge-status{font-weight:700; padding:.42rem .6rem;}
.badge-pending{background:rgba(245,158,11,.15); color:#92400e;}
.badge-confirmed{background:rgba(59,130,246,.15); color:#1d4ed8;}
.badge-delivered{background:rgba(16,185,129,.15); color:#065f46;}
.badge-cancelled{background:rgba(239,68,68,.15); color:#991b1b;}

/* Mobile bottom nav */
.mobile-bottom-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  height: var(--bottom-nav-h); padding-bottom: var(--bottom-nav-safe);
  background:#fff;
  border-top:1px solid var(--border);
  display:flex;
  z-index:1030;
}
.mobile-bottom-nav a{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:.78rem;
  color:var(--muted);
  gap:2px;
}
.mobile-bottom-nav a i{font-size:1.05rem;}
.mobile-bottom-nav a.active{color:var(--primary); font-weight:700;}
@media (min-width:992px){
  .mobile-bottom-nav{display:none;}
}

/* Utilities */
.btn-primary{background:var(--primary); border-color:var(--primary);}
.btn-primary:hover{filter:brightness(.95);}
.btn-outline-primary{border-color:var(--primary); color:var(--primary);}
.btn-outline-primary:hover{background:var(--primary); border-color:var(--primary);}

.kpi-row{margin-top:.25rem;}
.kpi-row .col-6{min-width:0;}
.kpi-row .card-body{padding:14px;}
.kpi-row .stat-label{margin-top:4px;}

/* Loading overlay */
#loadingOverlay{
  position:fixed; inset:0;
  background:rgba(17,24,39,.35);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
}
#loadingOverlay.is-active{display:flex;}
#loadingOverlay .spinner-border{width:3rem;height:3rem;}


/* Mobile-friendly Add Order modal */
@media (max-width: 576px){
  #addOrderModal .modal-dialog{ margin:0; }
  #addOrderModal .modal-content{ border-radius: 0; min-height: 100vh; }
  #addOrderModal .modal-footer{
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.08);
    z-index: 2;
  }
  /* Convert item table rows into stacked cards */
  #aoItemsTable thead{ display:none; }
  #aoItemsTable tbody tr{
    display:block;
    border:1px solid rgba(0,0,0,.08);
    border-radius:12px;
    padding:.5rem .6rem;
    margin-bottom:.6rem;
    background:#fff;
  }
  #aoItemsTable tbody td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:.75rem;
    border:0;
    padding:.35rem 0;
  }
  #aoItemsTable tbody td::before{
    content: attr(data-label);
    font-weight:600;
    color:#6c757d;
    flex:0 0 38%;
  }
  #aoItemsTable .aoRemove{ padding:0; }
  #aoItemsTable td[data-label="Remove"]::before{ content:""; }
}



/* =========================
   Bottom-sheet modals (mobile)
   Makes Bootstrap modals slide up like modern apps
========================= */
@media (max-width: 576px) {
  .modal .modal-dialog {
    margin: 0;
    max-width: 100%;
    height: auto;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    transform: translateY(100%);
    transition: transform .28s ease-out;
  }
  .modal.show .modal-dialog {
    transform: translateY(0);
  }
  .modal .modal-content {
    border: 0;
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: calc(100vh - 12px);
    overflow: hidden;
  }
  .modal .modal-header {
    padding: .75rem 1rem .5rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .modal .modal-body {
    padding: .75rem 1rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal .modal-footer {
    padding: .5rem 1rem .75rem 1rem;
    border-top: 1px solid rgba(0,0,0,.06);
  }

  /* drag handle */
  .modal .modal-header::before{
    content:"";
    display:block;
    width:52px;
    height:4px;
    border-radius:999px;
    background: rgba(0,0,0,.18);
    margin: 0 auto .5rem auto;
  }

  /* Compact typography inside modals */
  .modal h5, .modal .modal-title { font-size: 1rem; }
  .modal table { font-size: .85rem; }
  .modal table th, .modal table td { padding: .4rem !important; white-space: normal !important; }
  .modal .form-label { font-size: .85rem; }
  .modal .form-control, .modal .form-select { font-size: .9rem; padding-top: .45rem; padding-bottom: .45rem; }
  .modal .btn { padding: .45rem .75rem; }
}


/* Account accordion (same as Customer) */
.px-account-accordion .accordion-button{
  padding:.7rem 1rem;
  background:#fff;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.px-account-accordion .accordion-button:focus{box-shadow:none;}
.px-account-accordion .accordion-button::after{opacity:.65;}
.px-account-accordion .accordion-item{border:0; background:transparent; padding:0 .75rem;}
.px-account-accordion .accordion-collapse{margin-top:.5rem;}
.px-account-accordion .accordion-body{padding:0;}
.px-account-btn{border-radius:12px;}


}



/* =========================
   Auth / Login Page (Green Premium)
   Add class "auth-page" on <body>
   ========================= */
body.auth-page{
  min-height:100vh;
  background:
    radial-gradient(1200px 500px at 10% 0%, rgba(255,255,255,.22), rgba(255,255,255,0)),
    radial-gradient(900px 500px at 90% 10%, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(25,135,84,.92), rgba(16,185,129,.88));
  background-attachment: fixed;
}
body.auth-page::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.12) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.12) 75%, transparent 75%, transparent);
  background-size: 24px 24px;
  mix-blend-mode: overlay;
}
body.auth-page .card{
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}
body.auth-page .card-body{
  position:relative;
}
body.auth-page .card-body::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(25,135,84,.06), rgba(255,255,255,0));
  pointer-events:none;
}
body.auth-page h4{
  font-weight:800;
  letter-spacing:.2px;
}
body.auth-page .form-control{
  border-radius: 12px;
  padding:.7rem .9rem;
}
body.auth-page .form-control:focus{
  border-color: rgba(25,135,84,.55);
  box-shadow: 0 0 0 .2rem rgba(25,135,84,.18);
}
body.auth-page .btn-primary{
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  border-radius: 12px;
  padding:.7rem .9rem;
  font-weight:700;
}
body.auth-page .btn-primary:hover{
  filter: brightness(.95);
}
body.auth-page .text-primary{ color: var(--primary) !important; }



/* Bottom nav: auto-reserved space so content never hides behind the fixed footer */
@media (max-width: 991.98px){
  /* apply to page content wrappers only (avoid navbar container-fluid) */
  .content-wrap,
  .main-content,
  .content-wrapper,
  .page-content{
    padding-bottom: var(--bottom-nav-space) !important;
  }
}
@media (min-width: 992px){
  .content-wrap,
  .main-content,
  .content-wrapper,
  .page-content{
    padding-bottom: 16px !important;
  }
}



/* Logo sizing */
.navbar-brand img{display:block; height:34px; width:auto;}

/* Login logo */
body.auth-page .login-logo{display:flex; align-items:center; justify-content:center;}
body.auth-page .login-logo img{height:56px; width:auto; display:block;}


/* ===== Eternity Studio Credit ===== */
.eternity-credit{
  font-size: 12px;
  color: #6c757d;
  line-height: 1.3;
}
.eternity-credit a{
  color: #198754;
  font-weight: 600;
  text-decoration: none;
}
.eternity-credit a:hover{
  text-decoration: underline;
}

/* Desktop: make sidebar stretch full height (below navbar) so credit stays at bottom */
@media (min-width: 992px){
  .page-wrap{min-height: calc(100vh - 56px);}
  .page-wrap > .row{min-height: calc(100vh - 56px);}
  /* Make the desktop sidebar independent of page content height.
     This guarantees the credit stays pinned at the bottom even when the main content is short. */
  .sp-sidebar{
    position: sticky;
    top: 56px;               /* sticky-top navbar height */
    height: calc(100vh - 56px);
    overflow: hidden;        /* scrolling happens in the inner .overflow-auto container */
    align-self: flex-start;
  }
}