/* Parimal Customer Dashboard - Mobile-first theme (matches Salesperson UI) */

: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;
}

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);}

/* Desktop sidebar layout */
.sidebar-desktop{
  position:fixed; left:0; top:56px;
  width:320px; height:calc(100vh - 56px);
  background:#fff; border-right:1px solid var(--border);
  /* keep credit always visible: scroll only the menu area inside */
  overflow:hidden; z-index:1030;
}
.main-content{width:100%; transition:margin-left .3s ease;}
@media (min-width:992px){
  .main-content{margin-left:320px; width:calc(100% - 320px);}
}

/* Sidebar items */
.sidebar-title{font-weight:800; letter-spacing:.2px; padding:1rem 1rem .5rem 1rem;}
.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:700;
  border-left:3px solid var(--primary);
}

/* 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;}

/* Buttons */
.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); color:#fff;}

/* Tables + DataTables */
.table thead th{white-space:nowrap;}
.table td{vertical-align:middle;}
.dt-container{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.dataTables_wrapper .dataTables_paginate .paginate_button{padding:.25rem .6rem;}

/* Mobile: left-align all DT columns */
@media (max-width:576px){
  table.table td,
  table.table th,
  table.dataTable td,
  table.dataTable th{ text-align:left !important; }
  .text-end{ text-align:left !important; }
}

/* Status badges */
.badge{border-radius:999px;}
.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; position:relative;
}
.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;}}

/* Cart badge (bottom nav) */
.cart-qty-badge{
  position:absolute;
  top:10px;
  left:58%;
  transform:translate(-50%,-50%);
  background:var(--primary);
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:1;
  padding:4px 6px;
  min-width:22px;
  height:18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(166,134,94,.28);
  border:2px solid rgba(255,255,255,.9);
}

/* Qty control (plus/minus) */
.qty-group{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;}
.qty-group .btn{padding:.25rem .45rem;line-height:1;border-radius:.6rem;}
.qty-group input{width:60px;max-width:80px;text-align:center;font-weight:700;}
.qty-group .btn i{pointer-events:none;}
@media (max-width:576px){
  .qty-group .btn{padding:.4rem .6rem;border-radius:.75rem;}
  .qty-group input{width:72px;height:40px;font-size:1rem;}
  .table td, .table th{padding:.75rem .5rem;}
  .btn{border-radius:.8rem;}
  .card{border-radius:1rem;}
}

/* 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;}

/* Map Bootstrap "primary" helpers to theme */
.text-primary{color:var(--primary)!important;}
.bg-primary{background-color:var(--primary)!important;}
.border-primary{border-color:var(--primary)!important;}


/* Account accordion (My Account) */
.px-account-accordion .accordion-button{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:.75rem 1rem;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.px-account-accordion .accordion-button:focus{
  border-color:rgba(166,134,94,.55);
  box-shadow:0 0 0 .2rem rgba(25,135,84,.18);
}
.px-account-accordion .accordion-button::after{opacity:.65;}
.px-account-accordion .accordion-item{border:0; background:transparent; padding:0 .75rem;}
.sidebar-desktop .px-account-accordion .accordion-item{padding:0;}
.px-account-accordion .accordion-collapse{margin-top:.5rem;}
.px-account-accordion .accordion-body{padding:0;}

/* DataTables theme color */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  border-radius:10px;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus{
  border-color:rgba(166,134,94,.7) !important;
  box-shadow:0 0 0 .2rem rgba(25,135,84,.18) !important;
}
.page-link{color:var(--primary);}
.page-link:focus{box-shadow:0 0 0 .2rem rgba(25,135,84,.18);}
.page-item.active .page-link{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

/* Force left alignment on mobile for DataTables */
@media (max-width: 576px){
  table.dataTable thead th,
  table.dataTable tbody td,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_processing{
    text-align:left !important;
  }
  .text-end{ text-align:left !important; }
}

/* ================================
   MODERN BOTTOM-SHEET MODAL
   (Order Details on mobile)
================================ */

.modal-sheet-handle{
  width:46px;
  height:5px;
  border-radius:999px;
  background:rgba(0,0,0,.18);
  margin:10px auto 6px;
}

@media (max-width: 576px){
  .modal.modal-bottom-sheet .modal-dialog{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    margin:0;
    width:100%;
    max-width:100%;
    transform:translateY(110%);
    transition:transform .22s ease-out;
    pointer-events:none;
  }
  .modal.modal-bottom-sheet.show .modal-dialog{
    transform:translateY(0);
    pointer-events:auto;
  }
  .modal.modal-bottom-sheet .modal-content{
    border:0;
    border-top-left-radius:18px;
    border-top-right-radius:18px;
    box-shadow:0 -10px 30px rgba(0,0,0,.18);
  }
  .modal.modal-bottom-sheet .modal-body{padding:0.75rem;}
  .modal.modal-bottom-sheet .modal-header .h6{font-size:1rem;}
  .modal.modal-bottom-sheet table{font-size:0.85rem;}
  .modal.modal-bottom-sheet table th,
  .modal.modal-bottom-sheet table td{padding:0.45rem;white-space:normal;}
  .modal.modal-bottom-sheet .modal-footer{
    position:sticky;
    bottom:0;
    background:#fff;
    padding:0.75rem;
  }
}




}



/* =========================
   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;
}