:root{--blue:#0d6efd;--blue-dark:#0757d9;--blue-soft:#eaf2ff;--red:#e53935;--red-soft:#ffeded;--yellow:#f8c51c;--yellow-soft:#fff7d7;--navy:#11233f;--ink:#152033;--muted:#6b778c;--line:#e7ebf2;--bg:#f6f8fc;--card:#fff;--shadow:0 12px 30px rgba(26,49,86,.08);--radius:18px}
*{box-sizing:border-box}html,body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg)}body{min-height:100vh}button,input,select{font:inherit}button{cursor:pointer;border:0}.app-shell{display:flex;min-height:100vh}.sidebar{width:256px;background:#fff;border-right:1px solid var(--line);padding:18px 14px;position:fixed;top:0;bottom:0;left:0;z-index:20;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:10px;padding:3px 8px 18px}.brand-mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:white;box-shadow:0 8px 18px rgba(13,110,253,.23)}.brand-name{font-size:18px;font-weight:800;letter-spacing:-.6px}.brand-name span,.mobile-brand strong span{color:var(--red)}.brand small{display:block;color:var(--muted);font-size:10px;margin-top:1px}.store-switcher{margin:2px 4px 15px;background:var(--bg);padding:11px 12px;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700}.store-switcher i:first-child{color:var(--blue)}.chevron{margin-left:auto;font-size:10px;color:#97a2b3}.sidebar-nav{display:flex;flex-direction:column;gap:4px;overflow:auto}.nav-item{width:100%;background:transparent;display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:#607086;text-align:left;font-size:13px;font-weight:600}.nav-item i{width:18px;text-align:center}.nav-item:hover,.nav-item.active{background:var(--blue-soft);color:var(--blue)}.nav-badge{margin-left:auto;background:var(--red);color:#fff;border-radius:99px;min-width:20px;height:20px;display:grid;place-items:center;font-size:10px}.sidebar-footer{margin-top:auto}.profile-mini{border-top:1px solid var(--line);margin-top:8px;padding:14px 8px 4px;display:flex;align-items:center;gap:10px}.profile-mini strong{font-size:12px}.profile-mini small{display:block;font-size:10px;color:var(--muted);margin-top:2px}.profile-mini>i{margin-left:auto;color:#9da8b7}.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--yellow),#f7a916);display:grid;place-items:center;color:#412f00;font-weight:800}.main{flex:1;margin-left:256px}.topbar{position:sticky;top:0;z-index:15;height:68px;background:rgba(246,248,252,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(231,235,242,.9);display:flex;align-items:center;padding:0 28px;gap:18px}.top-search{width:min(470px,54vw);background:white;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;gap:9px;padding:0 13px;height:40px;margin-left:auto}.top-search i{color:#9aa5b5;font-size:13px}.top-search input{border:0;outline:0;width:100%;font-size:12px}.top-actions{display:flex;align-items:center;gap:8px}.icon-btn{width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid var(--line);color:#65748a;display:grid;place-items:center;position:relative}.icon-btn:hover{border-color:#cad5e4;color:var(--blue)}.notification span{position:absolute;width:8px;height:8px;background:var(--red);border:2px solid #fff;border-radius:50%;right:7px;top:7px}.menu-btn,.mobile-brand{display:none}.content{padding:28px 32px 40px;max-width:1400px;margin:0 auto}.page{display:none;animation:fade .18s ease}.page.active{display:block}@keyframes fade{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:23px}.page-head h1{margin:3px 0 5px;font-size:29px;line-height:1.1;letter-spacing:-1px}.page-head p{margin:0}.eyebrow{font-size:10px;color:var(--blue);font-weight:800;letter-spacing:.12em}.muted{color:var(--muted);font-size:12px}.primary-btn,.outline-btn{height:40px;padding:0 15px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:800}.primary-btn{background:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(13,110,253,.2)}.primary-btn:hover{background:var(--blue-dark)}.outline-btn{background:#fff;border:1px solid var(--line);color:#53647a}.text-btn{background:transparent;color:var(--blue);font-weight:800;font-size:11px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;gap:13px;align-items:center;box-shadow:var(--shadow)}.stat-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto}.blue .stat-icon{background:var(--blue-soft);color:var(--blue)}.red .stat-icon{background:var(--red-soft);color:var(--red)}.yellow .stat-icon{background:var(--yellow-soft);color:#be8e00}.navy .stat-icon{background:#edf0f6;color:var(--navy)}.stat-card small{display:block;color:var(--muted);font-size:10px}.stat-card strong{display:block;font-size:20px;letter-spacing:-.6px;margin:3px 0 4px}.trend{font-size:10px}.trend.up{color:#1e9d60}.trend.warn{color:var(--red)}.trend.neutral{color:#7a8698}.dashboard-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;margin-top:14px}.dashboard-grid.bottom{grid-template-columns:1fr 1fr}.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:13px}.panel-head h2{font-size:14px;margin:0 0 3px}.panel-head p{font-size:10px;color:var(--muted);margin:0}.panel-head select{border:1px solid var(--line);background:#fff;padding:8px 10px;border-radius:9px;font-size:10px;color:#627086}.chart-wrap{height:180px}.chart-wrap canvas{width:100%;height:100%}.alert-list{display:grid;gap:9px}.alert-item{display:flex;gap:10px;padding:10px;border-radius:12px;background:#fafbfe;border:1px solid var(--line)}.alert-dot{width:29px;height:29px;border-radius:9px;display:grid;place-items:center}.alert-red{background:var(--red-soft);color:var(--red)}.alert-yellow{background:var(--yellow-soft);color:#b88700}.alert-blue{background:var(--blue-soft);color:var(--blue)}.alert-item strong{font-size:11px;display:block}.alert-item span{font-size:10px;color:var(--muted)}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.quick-grid button,.quick-modal-grid button{background:#f9fbff;border:1px solid var(--line);border-radius:12px;padding:14px 8px;display:flex;flex-direction:column;gap:8px;align-items:center;color:#5e6f84;font-size:10px;font-weight:700}.quick-grid button i,.quick-modal-grid button i{font-size:17px;color:var(--blue)}.product-rank{display:grid;gap:10px}.rank-row{display:flex;align-items:center;gap:10px}.rank-num{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:#f0f3f8;font-size:10px;font-weight:800;color:#65748a}.rank-info{min-width:0;flex:1}.rank-info strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank-info span{font-size:9px;color:var(--muted)}.rank-value{font-size:11px;font-weight:800}.inventory-toolbar{display:flex;gap:9px;margin-bottom:13px}.search-field{height:42px;background:#fff;border:1px solid var(--line);border-radius:11px;display:flex;align-items:center;gap:8px;padding:0 12px;flex:1}.search-field i{color:#97a3b5;font-size:12px}.search-field input{border:0;outline:0;width:100%;font-size:11px}.inventory-toolbar select{width:180px;border:1px solid var(--line);background:#fff;border-radius:11px;padding:0 11px;color:#617087;font-size:11px}.inventory-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.inventory-summary div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}.inventory-summary span{font-size:9px;color:var(--muted);display:block}.inventory-summary strong{font-size:15px;margin-top:2px;display:block}.red-text{color:var(--red)!important}.yellow-text{color:#bc8d00!important}.table-panel{padding:0;overflow:hidden}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:13px 15px;border-bottom:1px solid #eef1f5;text-align:left;font-size:10px;white-space:nowrap}th{background:#fbfcff;color:#8a96a8;font-size:9px;text-transform:uppercase;letter-spacing:.06em}td strong{font-size:11px}.status{padding:5px 8px;border-radius:99px;font-size:9px;font-weight:800}.status.good{background:#eaf8f1;color:#1e9d60}.status.low{background:var(--red-soft);color:var(--red)}.status.exp{background:var(--yellow-soft);color:#b88700}.row-actions{display:flex;gap:6px}.row-actions button{width:28px;height:28px;border-radius:8px;background:#f7f9fc;color:#758296}.mobile-products{display:none}.sales-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;align-items:start}.sale-catalog{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:13px}.sale-product{border:1px solid var(--line);border-radius:13px;padding:13px;display:flex;justify-content:space-between;gap:8px;align-items:flex-end;background:#fff}.sale-product strong{font-size:11px;display:block}.sale-product span{font-size:9px;color:var(--muted)}.sale-product .price{font-size:12px;font-weight:800;color:var(--blue);margin-top:7px}.add-to-cart{width:31px;height:31px;border-radius:9px;background:var(--blue-soft);color:var(--blue)}.cart-items{min-height:230px}.empty-state{height:230px;display:grid;place-items:center;align-content:center;color:#9da8b7;text-align:center}.empty-state i{font-size:28px;margin-bottom:10px}.empty-state p{margin:0;color:#63718a;font-weight:700;font-size:12px}.empty-state span{font-size:10px}.cart-line{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid #eff2f6}.cart-line strong{font-size:11px}.cart-line span{font-size:9px;color:var(--muted)}.qty-box{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}.qty-box button{width:25px;height:25px;background:#fafbfd}.qty-box b{width:24px;text-align:center;font-size:10px}.cart-footer{border-top:1px solid var(--line);padding-top:13px}.total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.total-row span{font-size:11px;color:var(--muted)}.total-row strong{font-size:20px}.pay-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:9px}.pay-btn{height:36px;background:#fafbfe;border:1px solid var(--line);border-radius:9px;color:#66758a;font-size:10px;font-weight:800}.pay-btn.selected{background:var(--blue-soft);border-color:#cfe0ff;color:var(--blue)}.full{width:100%}.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.service-card,.bill-card,.employee-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px;box-shadow:var(--shadow)}.service-card .head,.bill-card .head,.employee-card .head{display:flex;align-items:center;gap:11px}.round-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:11px;background:var(--blue-soft);color:var(--blue)}.service-card strong,.bill-card strong,.employee-card strong{font-size:12px}.card-price{font-size:20px;font-weight:800;margin:17px 0 2px}.card-meta{font-size:9px;color:var(--muted)}.summary-banner{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.summary-banner>div,.network-grid>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px}.summary-banner span,.network-grid span{display:block;font-size:9px;color:var(--muted)}.summary-banner strong,.network-grid strong{display:block;margin-top:3px;font-size:18px}.wallet-card{padding:20px;border-radius:18px;background:linear-gradient(135deg,#0d6efd,#1556b9);color:#fff;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden;margin-bottom:14px}.wallet-card.vault{background:linear-gradient(135deg,#1c2c45,#0c1830)}.wallet-card small{font-size:10px;opacity:.85}.wallet-card strong{display:block;font-size:27px;letter-spacing:-1px;margin:4px 0}.wallet-card span{font-size:10px;opacity:.9}.wallet-bg{font-size:78px;opacity:.11;margin-right:14px}.network-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.report-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:14px}.report-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px;display:grid;gap:5px}.report-card i{color:var(--blue)}.report-card strong{font-size:19px}.report-card span{font-size:9px;color:var(--muted)}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.settings-card h2{font-size:14px;margin:0 0 15px}.settings-card label{display:grid;gap:6px;font-size:10px;color:#63718a;margin-bottom:12px}.settings-card input,.settings-card select{height:40px;border:1px solid var(--line);border-radius:10px;padding:0 11px;outline:0}.switch-row{display:flex!important;align-items:center!important;grid-template-columns:none!important;height:42px;position:relative}.switch-row input{display:none}.switch{margin-left:auto;width:41px;height:23px;background:#ccd4df;border-radius:99px;position:relative}.switch:after{content:'';position:absolute;width:17px;height:17px;left:3px;top:3px;background:white;border-radius:50%;transition:.2s}.switch-row input:checked+.switch{background:var(--blue)}.switch-row input:checked+.switch:after{left:21px}.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.98);width:min(520px,calc(100vw - 30px));background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px rgba(15,31,58,.22);padding:19px;z-index:50;display:none}.modal.open{display:block;animation:modalIn .18s ease forwards}@keyframes modalIn{to{transform:translate(-50%,-50%) scale(1)}}.overlay{position:fixed;inset:0;background:rgba(15,31,58,.38);backdrop-filter:blur(3px);z-index:45;display:none}.overlay.open{display:block}.modal-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:15px}.modal h2{margin:2px 0 0;font-size:20px}.modal form{display:grid;gap:12px}.modal label{font-size:10px;color:#63718a;display:grid;gap:6px}.modal input{height:40px;border:1px solid var(--line);border-radius:10px;padding:0 11px;outline:0;font-size:12px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.quick-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.quick-modal-grid button{padding:18px 10px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#17243a;color:#fff;border-radius:99px;padding:11px 15px;display:flex;align-items:center;gap:8px;font-size:11px;opacity:0;pointer-events:none;z-index:70;transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}.bottom-nav{display:none}
@media(max-width:1100px){.sidebar{width:220px}.main{margin-left:220px}.content{padding:24px}.stat-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.dashboard-grid.bottom,.sales-layout{grid-template-columns:1fr}.cards-grid{grid-template-columns:repeat(2,1fr)}.network-grid{grid-template-columns:repeat(2,1fr)}.report-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){body{padding-bottom:78px}.sidebar{transform:translateX(-100%);transition:.22s;width:280px;box-shadow:15px 0 45px rgba(11,26,49,.13)}.sidebar.open{transform:none}.main{margin-left:0}.topbar{height:62px;padding:0 14px;gap:10px}.menu-btn,.mobile-brand{display:flex}.mobile-brand{align-items:center;gap:7px;margin-right:auto}.mobile-brand strong{font-size:14px}.brand-mark.small{width:32px;height:32px;border-radius:9px;font-size:13px}.top-search{display:none}.top-actions{gap:6px}.top-avatar{display:grid}.topbar>.menu-btn{display:grid}.content{padding:20px 14px 28px}.page-head{align-items:flex-start;flex-direction:column;margin-bottom:17px}.page-head h1{font-size:24px}.primary-btn{height:39px}.stat-grid{grid-template-columns:1fr 1fr;gap:8px}.stat-card{padding:12px;gap:9px}.stat-icon{width:36px;height:36px}.stat-card strong{font-size:16px}.stat-card small{font-size:9px}.trend{font-size:8px}.dashboard-grid,.dashboard-grid.bottom,.sales-layout,.settings-grid{grid-template-columns:1fr}.panel{padding:14px;border-radius:15px}.quick-grid{grid-template-columns:repeat(2,1fr)}.inventory-toolbar{flex-wrap:wrap}.inventory-toolbar .search-field{flex-basis:100%}.inventory-toolbar select{flex:1;width:auto}.inventory-summary{grid-template-columns:repeat(2,1fr)}.table-scroll{display:none}.mobile-products{display:grid;gap:8px;padding:12px}.product-mobile{border:1px solid var(--line);border-radius:12px;padding:12px}.pm-top{display:flex;justify-content:space-between;gap:8px}.pm-top strong{font-size:12px}.pm-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.pm-meta span{font-size:9px;color:var(--muted)}.pm-meta b{font-size:10px;display:block;color:#324057;margin-top:2px}.cards-grid,.report-cards{grid-template-columns:1fr}.summary-banner{grid-template-columns:1fr}.wallet-bg{font-size:60px}.sale-catalog{grid-template-columns:1fr}.cart-panel{order:-1}.pay-options{grid-template-columns:repeat(3,1fr)}.bottom-nav{position:fixed;display:flex;z-index:40;bottom:0;left:0;right:0;height:68px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);justify-content:space-around;padding:7px 8px calc(7px + env(safe-area-inset-bottom));}.bottom-item{background:none;color:#7b889c;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:9px;min-width:54px}.bottom-item i{font-size:16px}.bottom-item.active{color:var(--blue);font-weight:800}.bottom-item.center{position:relative;top:-18px}.bottom-item.center span{width:50px;height:50px;border-radius:16px;background:var(--blue);color:#fff;display:grid;place-items:center;border:5px solid var(--bg);box-shadow:0 10px 22px rgba(13,110,253,.28)}.bottom-item.center span i{font-size:20px}.bottom-item.center small{font-size:9px;color:var(--blue);font-weight:800;margin-top:-13px}.modal{border-radius:18px;padding:15px}.form-grid{grid-template-columns:1fr}.quick-modal-grid{grid-template-columns:1fr 1fr}.toast{bottom:85px}}

/* Dynamic record/form controls */
.modal select,.modal textarea{min-height:40px;border:1px solid var(--line);border-radius:10px;padding:9px 11px;outline:0;font-size:12px;background:#fff;color:var(--ink)}
.modal textarea{min-height:90px;resize:vertical}
.add-to-cart:disabled{opacity:.45;cursor:not-allowed;background:#f1f3f6;color:#8d98a8}
.row-actions button:hover,.row-delete:hover{color:var(--blue);background:var(--blue-soft)}
.row-delete{width:28px;height:28px;border-radius:8px;background:#f7f9fc;color:#758296}
.mobile-brand strong{color:var(--blue)}
.mobile-brand strong span{color:var(--red)}

.brand-mark {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  /* Remove box */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0;
}

.mn-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: transparent !important;
}

.brand-name {
  color: #1976FF; /* Blue for My */
  font-weight: 800;
}

.brand-name span {
  color: #FF2020; /* Red for Negosyo */
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  color: #1976FF;
  font-size: 22px;
}

.mobile-brand strong {
  color: #1976FF;
  font-weight: 800;
}

.mobile-brand strong span {
  color: #FF2020;
}

.brand-mark {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden;
  flex-shrink: 0;
}

.mn-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: transparent;
}

.logo-fallback::before {
  content: "MN";
  font-size: 18px;
  font-weight: 900;
  color: #1976FF;
}

/* =========================================================
   MYNEGOSYO — UNIVERSAL RESPONSIVE GRID SYSTEM
   Add this at the VERY BOTTOM of your existing style.css
   ========================================================= */

/* Global sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

body {
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow-x: hidden;
}

.app-shell,
.main,
.content,
.page,
.panel,
.card,
article,
section,
header,
aside {
  min-width: 0;
  max-width: 100%;
}

/* Main content */
.content {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.page {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
}

/* =========================================================
   PAGE HEAD
   ========================================================= */

.page-head {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(12px, 2vw, 24px);
  align-items: center;
}

.page-head > div {
  min-width: 0;
}

.page-head h1,
.page-head h2,
.page-head p {
  overflow-wrap: anywhere;
}

/* =========================================================
   STAT GRID
   ========================================================= */

.stat-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 220px), 1fr)
  );
  gap: clamp(12px, 1.5vw, 20px);
}

.stat-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
}

.stat-card > div:last-child {
  min-width: 0;
}

.stat-card strong,
.stat-card small,
.stat-card span {
  overflow-wrap: anywhere;
}

/* =========================================================
   DASHBOARD GRID
   ========================================================= */

.dashboard-grid {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 340px), 1fr)
    );
  gap: clamp(14px, 2vw, 24px);
}

.dashboard-grid.bottom {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 300px), 1fr)
    );
}

/* =========================================================
   QUICK ACTION GRID
   ========================================================= */

.quick-grid {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 130px), 1fr)
    );
  gap: 12px;
}

.quick-grid button {
  min-width: 0;
  width: 100%;
  overflow-wrap: anywhere;
}

/* =========================================================
   INVENTORY SUMMARY
   ========================================================= */

.inventory-summary {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 170px), 1fr)
    );
  gap: clamp(10px, 1.5vw, 16px);
}

.inventory-summary > div {
  min-width: 0;
  width: 100%;
}

.inventory-summary strong,
.inventory-summary span {
  overflow-wrap: anywhere;
}

/* =========================================================
   INVENTORY TOOLBAR
   ========================================================= */

.inventory-toolbar {
  width: 100%;
  display: grid;
  grid-template-columns:
    minmax(180px, 1fr)
    minmax(150px, 220px)
    auto;
  gap: 12px;
  align-items: center;
}

.inventory-toolbar > * {
  min-width: 0;
  width: 100%;
}

.inventory-toolbar .outline-btn {
  width: auto;
}

/* =========================================================
   SALES LAYOUT
   ========================================================= */

.sales-layout {
  width: 100%;
  display: grid;
  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(300px, 0.85fr);
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}

.sale-products,
.cart-panel {
  width: 100%;
  min-width: 0;
}

.sale-catalog {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 170px), 1fr)
    );
  gap: 12px;
}

.cart-items,
.cart-item {
  min-width: 0;
  max-width: 100%;
}

.cart-item {
  width: 100%;
}

/* =========================================================
   GENERAL CARD GRIDS
   ========================================================= */

.cards-grid {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 240px), 1fr)
    );
  gap: clamp(12px, 1.7vw, 20px);
}

.cards-grid > *,
.report-card,
.settings-card,
.network-grid > *,
.wallet-card {
  min-width: 0;
  max-width: 100%;
}

/* =========================================================
   REPORT CARDS
   ========================================================= */

.report-cards {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 190px), 1fr)
    );
  gap: clamp(12px, 1.5vw, 18px);
}

.report-card {
  width: 100%;
  min-width: 0;
}

.report-card strong,
.report-card span {
  overflow-wrap: anywhere;
}

/* =========================================================
   SETTINGS GRID
   ========================================================= */

.settings-grid {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 320px), 1fr)
    );
  gap: clamp(14px, 2vw, 24px);
}

.settings-card {
  width: 100%;
  min-width: 0;
}

.settings-card label,
.settings-card input,
.settings-card select,
.settings-card textarea {
  width: 100%;
  max-width: 100%;
}

/* =========================================================
   NETWORK GRID
   ========================================================= */

.network-grid {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 170px), 1fr)
    );
  gap: clamp(10px, 1.5vw, 16px);
}

.network-grid > div {
  width: 100%;
  min-width: 0;
}

/* =========================================================
   FORM GRID
   ========================================================= */

.form-grid {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 180px), 1fr)
    );
  gap: 14px;
}

.form-grid > * {
  width: 100%;
  min-width: 0;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  min-width: 0;
}

/* =========================================================
   MODALS
   ========================================================= */

.modal {
  width: min(680px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overflow-x: hidden;
}

.quick-modal-grid {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 130px), 1fr)
    );
  gap: 12px;
}

.quick-modal-grid > * {
  min-width: 0;
  width: 100%;
}

/* =========================================================
   TABLES
   ========================================================= */

.table-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.table-scroll th,
.table-scroll td {
  white-space: nowrap;
}

/* =========================================================
   SEARCH / INPUTS
   ========================================================= */

.search-field,
.top-search {
  min-width: 0;
  max-width: 100%;
}

.search-field input,
.top-search input {
  min-width: 0;
  width: 100%;
}

/* =========================================================
   PRODUCT / ALERT LISTS
   ========================================================= */

.product-rank,
.alert-list,
.phone-list,
.cart-items {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.product-rank > *,
.alert-list > *,
.phone-list > * {
  min-width: 0;
  max-width: 100%;
}

/* =========================================================
   PANELS
   ========================================================= */

.panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.panel-head {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-head > * {
  min-width: 0;
}

.panel-head h2,
.panel-head p {
  overflow-wrap: anywhere;
}

/* =========================================================
   BUTTONS
   ========================================================= */

button,
.btn,
.primary-btn,
.outline-btn,
.icon-btn {
  max-width: 100%;
}

button {
  overflow-wrap: anywhere;
}

/* =========================================================
   IMAGES / ICONS
   ========================================================= */

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

canvas {
  height: auto;
}

/* =========================================================
   MOBILE NAV / TOPBAR
   ========================================================= */

.topbar {
  width: 100%;
  min-width: 0;
}

.top-actions {
  min-width: 0;
  flex-shrink: 0;
}

.mobile-brand {
  min-width: 0;
}

.mobile-brand strong {
  white-space: nowrap;
}

/* =========================================================
   LARGE SCREENS
   ========================================================= */

@media (min-width: 1400px) {
  .stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-layout {
    grid-template-columns:
      minmax(0, 1.5fr)
      minmax(360px, 0.8fr);
  }

  .cards-grid {
    grid-template-columns:
      repeat(
        auto-fit,
        minmax(260px, 1fr)
      );
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {
  .sales-layout {
    grid-template-columns: 1fr;
  }

  .page-head {
    grid-template-columns: 1fr;
  }

  .page-head > button {
    justify-self: start;
  }

  .inventory-toolbar {
    grid-template-columns:
      minmax(180px, 1fr)
      minmax(150px, 200px);
  }

  .inventory-toolbar .outline-btn {
    grid-column: 1 / -1;
    width: fit-content;
  }
}

/* =========================================================
   TABLET / LARGE MOBILE
   ========================================================= */

@media (max-width: 768px) {
  .page-head {
    gap: 14px;
  }

  .page-head > button {
    width: 100%;
    justify-self: stretch;
  }

  .inventory-toolbar {
    grid-template-columns: 1fr;
  }

  .inventory-toolbar .outline-btn {
    width: 100%;
  }

  .dashboard-grid,
  .dashboard-grid.bottom {
    grid-template-columns: 1fr;
  }

  .sales-layout {
    grid-template-columns: 1fr;
  }

  .quick-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .sale-catalog {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .report-cards {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .network-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .panel-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {
  .stat-grid,
  .inventory-summary,
  .cards-grid,
  .report-cards,
  .network-grid {
    grid-template-columns: 1fr;
  }

  .quick-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sale-catalog {
    grid-template-columns: 1fr;
  }

  .quick-modal-grid {
    grid-template-columns: 1fr 1fr;
  }

  .page-head h1 {
    font-size: clamp(24px, 7vw, 32px);
  }

  .page-head {
    grid-template-columns: 1fr;
  }

  .panel {
    border-radius: 14px;
  }

  .modal {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
}

/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {
  .quick-grid,
  .quick-modal-grid,
  .report-cards,
  .network-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    gap: 10px;
  }

  .stat-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  .page-head > button {
    font-size: 13px;
  }
}

/* =========================================================
   SAFE TEXT WRAPPING
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
p,
small,
strong,
span,
label {
  max-width: 100%;
}

p,
small,
span,
strong,
label {
  overflow-wrap: anywhere;
}

/* Prevent long IDs / product names / URLs from breaking layout */
.product-name,
.customer-name,
.item-name,
.product-title,
.description,
.notes,
.muted {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================================================
   SAFE FLEX CHILDREN
   ========================================================= */

.flex,
.row,
.topbar,
.top-actions,
.brand,
.mobile-brand,
.modal-head,
.modal-actions {
  min-width: 0;
}

.brand > *,
.mobile-brand > *,
.top-actions > * {
  min-width: 0;
}

/* =========================================================
   TOUCH-FRIENDLY MOBILE CONTROLS
   ========================================================= */

@media (max-width: 768px) {
  input,
  select,
  textarea,
  button {
    min-height: 42px;
  }

  .icon-btn {
    min-width: 42px;
    min-height: 42px;
  }
}

/* =========================================================
   LANDSCAPE PHONES
   ========================================================= */

@media (max-width: 900px) and (orientation: landscape) {
  .dashboard-grid,
  .dashboard-grid.bottom {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .stat-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .cards-grid,
  .report-cards,
  .network-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

/* =========================================================
   REMOVE HORIZONTAL OVERFLOW FROM THE APP
   ========================================================= */

.app-shell {
  width: 100%;
  max-width: 100vw;
}

.main {
  min-width: 0;
  width: 100%;
}

.content {
  min-width: 0;
  width: 100%;
}

/* Any direct grid child must be allowed to shrink */
[class*="grid"] > *,
.stat-grid > *,
.dashboard-grid > *,
.quick-grid > *,
.cards-grid > *,
.form-grid > *,
.report-cards > *,
.settings-grid > *,
.network-grid > *,
.sale-catalog > * {
  min-width: 0;
  max-width: 100%;
}

```css
/* =========================================================
   MYNEGOSYO PWA INSTALL UI
   ========================================================= */

/* Install button */

.install-app-btn {
  display: none;
}


/* PWA modal */

#pwaInstallModal {
  position: fixed;
  inset: 0;
  z-index: 99999;
}


.pwa-modal-backdrop {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(15, 23, 42, 0.55);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


.pwa-modal {
  position: relative;

  width: min(430px, 100%);

  max-height: calc(100vh - 40px);

  overflow-y: auto;

  padding: 32px 26px 26px;

  background: #ffffff;

  border-radius: 24px;

  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.25);

  text-align: center;
}


.pwa-modal-close {
  position: absolute;

  top: 14px;
  right: 14px;

  width: 38px;
  height: 38px;

  border: 0;
  border-radius: 50%;

  background: #f1f5f9;

  color: #475569;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}


.pwa-modal-icon {
  width: 72px;
  height: 72px;

  margin: 0 auto 18px;

  border-radius: 20px;

  background: #0d6efd;

  color: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 30px;

  box-shadow:
    0 10px 25px rgba(13, 110, 253, 0.25);
}


.pwa-modal h2 {
  margin: 0 0 22px;

  font-size: 24px;
  font-weight: 800;

  color: #111827;
}


/* Installation steps */

.install-instructions {
  display: flex;
  flex-direction: column;

  gap: 14px;

  text-align: left;

  margin-bottom: 22px;
}


.install-step {
  display: flex;
  align-items: center;

  gap: 14px;

  padding: 14px;

  border-radius: 14px;

  background: #f8fafc;

  border: 1px solid #e5e7eb;

  color: #334155;

  font-size: 14px;
}


.install-step > span {
  flex: 0 0 34px;

  width: 34px;
  height: 34px;

  border-radius: 50%;

  background: #0d6efd;

  color: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 800;
}


.install-step strong {
  color: #111827;
}


.install-step small {
  color: #64748b;
}


/* Generic message */

.install-message {
  padding: 10px 0 20px;

  color: #475569;
}


.install-message i {
  font-size: 38px;

  margin-bottom: 14px;

  color: #0d6efd;
}


.install-message p {
  margin: 0;

  line-height: 1.6;
}


/* Done button */

.pwa-close-btn {
  width: 100%;

  justify-content: center;
}


/* Mobile */

@media (max-width: 600px) {

  .pwa-modal-backdrop {
    align-items: flex-end;

    padding: 0;
  }

  .pwa-modal {
    width: 100%;

    max-height: 90vh;

    border-radius: 26px 26px 0 0;

    padding:
      30px
      20px
      calc(20px + env(safe-area-inset-bottom));
  }

}
/* =========================================================
   MYNEGOSYO PWA INSTALL UI
   ========================================================= */

/* Install button */

.install-app-btn {
  display: none;
}


/* PWA modal */

#pwaInstallModal {
  position: fixed;
  inset: 0;
  z-index: 99999;
}


.pwa-modal-backdrop {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(15, 23, 42, 0.55);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


.pwa-modal {
  position: relative;

  width: min(430px, 100%);

  max-height: calc(100vh - 40px);

  overflow-y: auto;

  padding: 32px 26px 26px;

  background: #ffffff;

  border-radius: 24px;

  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.25);

  text-align: center;
}


.pwa-modal-close {
  position: absolute;

  top: 14px;
  right: 14px;

  width: 38px;
  height: 38px;

  border: 0;
  border-radius: 50%;

  background: #f1f5f9;

  color: #475569;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}


.pwa-modal-icon {
  width: 72px;
  height: 72px;

  margin: 0 auto 18px;

  border-radius: 20px;

  background: #0d6efd;

  color: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 30px;

  box-shadow:
    0 10px 25px rgba(13, 110, 253, 0.25);
}


.pwa-modal h2 {
  margin: 0 0 22px;

  font-size: 24px;
  font-weight: 800;

  color: #111827;
}


/* Installation steps */

.install-instructions {
  display: flex;
  flex-direction: column;

  gap: 14px;

  text-align: left;

  margin-bottom: 22px;
}


.install-step {
  display: flex;
  align-items: center;

  gap: 14px;

  padding: 14px;

  border-radius: 14px;

  background: #f8fafc;

  border: 1px solid #e5e7eb;

  color: #334155;

  font-size: 14px;
}


.install-step > span {
  flex: 0 0 34px;

  width: 34px;
  height: 34px;

  border-radius: 50%;

  background: #0d6efd;

  color: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 800;
}


.install-step strong {
  color: #111827;
}


.install-step small {
  color: #64748b;
}


/* Generic message */

.install-message {
  padding: 10px 0 20px;

  color: #475569;
}


.install-message i {
  font-size: 38px;

  margin-bottom: 14px;

  color: #0d6efd;
}


.install-message p {
  margin: 0;

  line-height: 1.6;
}


/* Done button */

.pwa-close-btn {
  width: 100%;

  justify-content: center;
}


/* Mobile */

@media (max-width: 600px) {

  .pwa-modal-backdrop {
    align-items: flex-end;

    padding: 0;
  }

  .pwa-modal {
    width: 100%;

    max-height: 90vh;

    border-radius: 26px 26px 0 0;

    padding:
      30px
      20px
      calc(20px + env(safe-area-inset-bottom));
  }

}
:root{--blue:#0d6efd;--blue-dark:#0757d9;--blue-soft:#eaf2ff;--red:#e53935;--red-soft:#ffeded;--yellow:#f8c51c;--yellow-soft:#fff7d7;--navy:#11233f;--ink:#152033;--muted:#6b778c;--line:#e7ebf2;--bg:#f6f8fc;--card:#fff;--shadow:0 12px 30px rgba(26,49,86,.08);--radius:18px}
*{box-sizing:border-box}html,body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg)}body{min-height:100vh}button,input,select{font:inherit}button{cursor:pointer;border:0}.app-shell{display:flex;min-height:100vh}.sidebar{width:256px;background:#fff;border-right:1px solid var(--line);padding:18px 14px;position:fixed;top:0;bottom:0;left:0;z-index:20;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:10px;padding:3px 8px 18px}.brand-mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:white;box-shadow:0 8px 18px rgba(13,110,253,.23)}.brand-name{font-size:18px;font-weight:800;letter-spacing:-.6px}.brand-name span,.mobile-brand strong span{color:var(--red)}.brand small{display:block;color:var(--muted);font-size:10px;margin-top:1px}.store-switcher{margin:2px 4px 15px;background:var(--bg);padding:11px 12px;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700}.store-switcher i:first-child{color:var(--blue)}.chevron{margin-left:auto;font-size:10px;color:#97a2b3}.sidebar-nav{display:flex;flex-direction:column;gap:4px;overflow:auto}.nav-item{width:100%;background:transparent;display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:#607086;text-align:left;font-size:13px;font-weight:600}.nav-item i{width:18px;text-align:center}.nav-item:hover,.nav-item.active{background:var(--blue-soft);color:var(--blue)}.nav-badge{margin-left:auto;background:var(--red);color:#fff;border-radius:99px;min-width:20px;height:20px;display:grid;place-items:center;font-size:10px}.sidebar-footer{margin-top:auto}.profile-mini{border-top:1px solid var(--line);margin-top:8px;padding:14px 8px 4px;display:flex;align-items:center;gap:10px}.profile-mini strong{font-size:12px}.profile-mini small{display:block;font-size:10px;color:var(--muted);margin-top:2px}.profile-mini>i{margin-left:auto;color:#9da8b7}.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--yellow),#f7a916);display:grid;place-items:center;color:#412f00;font-weight:800}.main{flex:1;margin-left:256px}.topbar{position:sticky;top:0;z-index:15;height:68px;background:rgba(246,248,252,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(231,235,242,.9);display:flex;align-items:center;padding:0 28px;gap:18px}.top-search{width:min(470px,54vw);background:white;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;gap:9px;padding:0 13px;height:40px;margin-left:auto}.top-search i{color:#9aa5b5;font-size:13px}.top-search input{border:0;outline:0;width:100%;font-size:12px}.top-actions{display:flex;align-items:center;gap:8px}.icon-btn{width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid var(--line);color:#65748a;display:grid;place-items:center;position:relative}.icon-btn:hover{border-color:#cad5e4;color:var(--blue)}.notification span{position:absolute;width:8px;height:8px;background:var(--red);border:2px solid #fff;border-radius:50%;right:7px;top:7px}.menu-btn,.mobile-brand{display:none}.content{padding:28px 32px 40px;max-width:1400px;margin:0 auto}.page{display:none;animation:fade .18s ease}.page.active{display:block}@keyframes fade{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:23px}.page-head h1{margin:3px 0 5px;font-size:29px;line-height:1.1;letter-spacing:-1px}.page-head p{margin:0}.eyebrow{font-size:10px;color:var(--blue);font-weight:800;letter-spacing:.12em}.muted{color:var(--muted);font-size:12px}.primary-btn,.outline-btn{height:40px;padding:0 15px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:800}.primary-btn{background:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(13,110,253,.2)}.primary-btn:hover{background:var(--blue-dark)}.outline-btn{background:#fff;border:1px solid var(--line);color:#53647a}.text-btn{background:transparent;color:var(--blue);font-weight:800;font-size:11px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;gap:13px;align-items:center;box-shadow:var(--shadow)}.stat-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto}.blue .stat-icon{background:var(--blue-soft);color:var(--blue)}.red .stat-icon{background:var(--red-soft);color:var(--red)}.yellow .stat-icon{background:var(--yellow-soft);color:#be8e00}.navy .stat-icon{background:#edf0f6;color:var(--navy)}.stat-card small{display:block;color:var(--muted);font-size:10px}.stat-card strong{display:block;font-size:20px;letter-spacing:-.6px;margin:3px 0 4px}.trend{font-size:10px}.trend.up{color:#1e9d60}.trend.warn{color:var(--red)}.trend.neutral{color:#7a8698}.dashboard-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;margin-top:14px}.dashboard-grid.bottom{grid-template-columns:1fr 1fr}.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:13px}.panel-head h2{font-size:14px;margin:0 0 3px}.panel-head p{font-size:10px;color:var(--muted);margin:0}.panel-head select{border:1px solid var(--line);background:#fff;padding:8px 10px;border-radius:9px;font-size:10px;color:#627086}.chart-wrap{height:180px}.chart-wrap canvas{width:100%;height:100%}.alert-list{display:grid;gap:9px}.alert-item{display:flex;gap:10px;padding:10px;border-radius:12px;background:#fafbfe;border:1px solid var(--line)}.alert-dot{width:29px;height:29px;border-radius:9px;display:grid;place-items:center}.alert-red{background:var(--red-soft);color:var(--red)}.alert-yellow{background:var(--yellow-soft);color:#b88700}.alert-blue{background:var(--blue-soft);color:var(--blue)}.alert-item strong{font-size:11px;display:block}.alert-item span{font-size:10px;color:var(--muted)}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.quick-grid button,.quick-modal-grid button{background:#f9fbff;border:1px solid var(--line);border-radius:12px;padding:14px 8px;display:flex;flex-direction:column;gap:8px;align-items:center;color:#5e6f84;font-size:10px;font-weight:700}.quick-grid button i,.quick-modal-grid button i{font-size:17px;color:var(--blue)}.product-rank{display:grid;gap:10px}.rank-row{display:flex;align-items:center;gap:10px}.rank-num{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:#f0f3f8;font-size:10px;font-weight:800;color:#65748a}.rank-info{min-width:0;flex:1}.rank-info strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank-info span{font-size:9px;color:var(--muted)}.rank-value{font-size:11px;font-weight:800}.inventory-toolbar{display:flex;gap:9px;margin-bottom:13px}.search-field{height:42px;background:#fff;border:1px solid var(--line);border-radius:11px;display:flex;align-items:center;gap:8px;padding:0 12px;flex:1}.search-field i{color:#97a3b5;font-size:12px}.search-field input{border:0;outline:0;width:100%;font-size:11px}.inventory-toolbar select{width:180px;border:1px solid var(--line);background:#fff;border-radius:11px;padding:0 11px;color:#617087;font-size:11px}.inventory-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.inventory-summary div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}.inventory-summary span{font-size:9px;color:var(--muted);display:block}.inventory-summary strong{font-size:15px;margin-top:2px;display:block}.red-text{color:var(--red)!important}.yellow-text{color:#bc8d00!important}.table-panel{padding:0;overflow:hidden}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:13px 15px;border-bottom:1px solid #eef1f5;text-align:left;font-size:10px;white-space:nowrap}th{background:#fbfcff;color:#8a96a8;font-size:9px;text-transform:uppercase;letter-spacing:.06em}td strong{font-size:11px}.status{padding:5px 8px;border-radius:99px;font-size:9px;font-weight:800}.status.good{background:#eaf8f1;color:#1e9d60}.status.low{background:var(--red-soft);color:var(--red)}.status.exp{background:var(--yellow-soft);color:#b88700}.row-actions{display:flex;gap:6px}.row-actions button{width:28px;height:28px;border-radius:8px;background:#f7f9fc;color:#758296}.mobile-products{display:none}.sales-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;align-items:start}.sale-catalog{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:13px}.sale-product{border:1px solid var(--line);border-radius:13px;padding:13px;display:flex;justify-content:space-between;gap:8px;align-items:flex-end;background:#fff}.sale-product strong{font-size:11px;display:block}.sale-product span{font-size:9px;color:var(--muted)}.sale-product .price{font-size:12px;font-weight:800;color:var(--blue);margin-top:7px}.add-to-cart{width:31px;height:31px;border-radius:9px;background:var(--blue-soft);color:var(--blue)}.cart-items{min-height:230px}.empty-state{height:230px;display:grid;place-items:center;align-content:center;color:#9da8b7;text-align:center}.empty-state i{font-size:28px;margin-bottom:10px}.empty-state p{margin:0;color:#63718a;font-weight:700;font-size:12px}.empty-state span{font-size:10px}.cart-line{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid #eff2f6}.cart-line strong{font-size:11px}.cart-line span{font-size:9px;color:var(--muted)}.qty-box{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}.qty-box button{width:25px;height:25px;background:#fafbfd}.qty-box b{width:24px;text-align:center;font-size:10px}.cart-footer{border-top:1px solid var(--line);padding-top:13px}.total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.total-row span{font-size:11px;color:var(--muted)}.total-row strong{font-size:20px}.pay-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:9px}.pay-btn{height:36px;background:#fafbfe;border:1px solid var(--line);border-radius:9px;color:#66758a;font-size:10px;font-weight:800}.pay-btn.selected{background:var(--blue-soft);border-color:#cfe0ff;color:var(--blue)}.full{width:100%}.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.service-card,.bill-card,.employee-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px;box-shadow:var(--shadow)}.service-card .head,.bill-card .head,.employee-card .head{display:flex;align-items:center;gap:11px}.round-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:11px;background:var(--blue-soft);color:var(--blue)}.service-card strong,.bill-card strong,.employee-card strong{font-size:12px}.card-price{font-size:20px;font-weight:800;margin:17px 0 2px}.card-meta{font-size:9px;color:var(--muted)}.summary-banner{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.summary-banner>div,.network-grid>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px}.summary-banner span,.network-grid span{display:block;font-size:9px;color:var(--muted)}.summary-banner strong,.network-grid strong{display:block;margin-top:3px;font-size:18px}.wallet-card{padding:20px;border-radius:18px;background:linear-gradient(135deg,#0d6efd,#1556b9);color:#fff;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden;margin-bottom:14px}.wallet-card.vault{background:linear-gradient(135deg,#1c2c45,#0c1830)}.wallet-card small{font-size:10px;opacity:.85}.wallet-card strong{display:block;font-size:27px;letter-spacing:-1px;margin:4px 0}.wallet-card span{font-size:10px;opacity:.9}.wallet-bg{font-size:78px;opacity:.11;margin-right:14px}.network-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.report-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:14px}.report-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px;display:grid;gap:5px}.report-card i{color:var(--blue)}.report-card strong{font-size:19px}.report-card span{font-size:9px;color:var(--muted)}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.settings-card h2{font-size:14px;margin:0 0 15px}.settings-card label{display:grid;gap:6px;font-size:10px;color:#63718a;margin-bottom:12px}.settings-card input,.settings-card select{height:40px;border:1px solid var(--line);border-radius:10px;padding:0 11px;outline:0}.switch-row{display:flex!important;align-items:center!important;grid-template-columns:none!important;height:42px;position:relative}.switch-row input{display:none}.switch{margin-left:auto;width:41px;height:23px;background:#ccd4df;border-radius:99px;position:relative}.switch:after{content:'';position:absolute;width:17px;height:17px;left:3px;top:3px;background:white;border-radius:50%;transition:.2s}.switch-row input:checked+.switch{background:var(--blue)}.switch-row input:checked+.switch:after{left:21px}.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.98);width:min(520px,calc(100vw - 30px));background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px rgba(15,31,58,.22);padding:19px;z-index:50;display:none}.modal.open{display:block;animation:modalIn .18s ease forwards}@keyframes modalIn{to{transform:translate(-50%,-50%) scale(1)}}.overlay{position:fixed;inset:0;background:rgba(15,31,58,.38);backdrop-filter:blur(3px);z-index:45;display:none}.overlay.open{display:block}.modal-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:15px}.modal h2{margin:2px 0 0;font-size:20px}.modal form{display:grid;gap:12px}.modal label{font-size:10px;color:#63718a;display:grid;gap:6px}.modal input{height:40px;border:1px solid var(--line);border-radius:10px;padding:0 11px;outline:0;font-size:12px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.quick-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.quick-modal-grid button{padding:18px 10px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#17243a;color:#fff;border-radius:99px;padding:11px 15px;display:flex;align-items:center;gap:8px;font-size:11px;opacity:0;pointer-events:none;z-index:70;transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}.bottom-nav{display:none}
@media(max-width:1100px){.sidebar{width:220px}.main{margin-left:220px}.content{padding:24px}.stat-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.dashboard-grid.bottom,.sales-layout{grid-template-columns:1fr}.cards-grid{grid-template-columns:repeat(2,1fr)}.network-grid{grid-template-columns:repeat(2,1fr)}.report-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){body{padding-bottom:78px}.sidebar{transform:translateX(-100%);transition:.22s;width:280px;box-shadow:15px 0 45px rgba(11,26,49,.13)}.sidebar.open{transform:none}.main{margin-left:0}.topbar{height:62px;padding:0 14px;gap:10px}.menu-btn,.mobile-brand{display:flex}.mobile-brand{align-items:center;gap:7px;margin-right:auto}.mobile-brand strong{font-size:14px}.brand-mark.small{width:32px;height:32px;border-radius:9px;font-size:13px}.top-search{display:none}.top-actions{gap:6px}.top-avatar{display:grid}.topbar>.menu-btn{display:grid}.content{padding:20px 14px 28px}.page-head{align-items:flex-start;flex-direction:column;margin-bottom:17px}.page-head h1{font-size:24px}.primary-btn{height:39px}.stat-grid{grid-template-columns:1fr 1fr;gap:8px}.stat-card{padding:12px;gap:9px}.stat-icon{width:36px;height:36px}.stat-card strong{font-size:16px}.stat-card small{font-size:9px}.trend{font-size:8px}.dashboard-grid,.dashboard-grid.bottom,.sales-layout,.settings-grid{grid-template-columns:1fr}.panel{padding:14px;border-radius:15px}.quick-grid{grid-template-columns:repeat(2,1fr)}.inventory-toolbar{flex-wrap:wrap}.inventory-toolbar .search-field{flex-basis:100%}.inventory-toolbar select{flex:1;width:auto}.inventory-summary{grid-template-columns:repeat(2,1fr)}.table-scroll{display:none}.mobile-products{display:grid;gap:8px;padding:12px}.product-mobile{border:1px solid var(--line);border-radius:12px;padding:12px}.pm-top{display:flex;justify-content:space-between;gap:8px}.pm-top strong{font-size:12px}.pm-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.pm-meta span{font-size:9px;color:var(--muted)}.pm-meta b{font-size:10px;display:block;color:#324057;margin-top:2px}.cards-grid,.report-cards{grid-template-columns:1fr}.summary-banner{grid-template-columns:1fr}.wallet-bg{font-size:60px}.sale-catalog{grid-template-columns:1fr}.cart-panel{order:-1}.pay-options{grid-template-columns:repeat(3,1fr)}.bottom-nav{position:fixed;display:flex;z-index:40;bottom:0;left:0;right:0;height:68px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);justify-content:space-around;padding:7px 8px calc(7px + env(safe-area-inset-bottom));}.bottom-item{background:none;color:#7b889c;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:9px;min-width:54px}.bottom-item i{font-size:16px}.bottom-item.active{color:var(--blue);font-weight:800}.bottom-item.center{position:relative;top:-18px}.bottom-item.center span{width:50px;height:50px;border-radius:16px;background:var(--blue);color:#fff;display:grid;place-items:center;border:5px solid var(--bg);box-shadow:0 10px 22px rgba(13,110,253,.28)}.bottom-item.center span i{font-size:20px}.bottom-item.center small{font-size:9px;color:var(--blue);font-weight:800;margin-top:-13px}.modal{border-radius:18px;padding:15px}.form-grid{grid-template-columns:1fr}.quick-modal-grid{grid-template-columns:1fr 1fr}.toast{bottom:85px}}

/* Dynamic record/form controls */
.modal select,.modal textarea{min-height:40px;border:1px solid var(--line);border-radius:10px;padding:9px 11px;outline:0;font-size:12px;background:#fff;color:var(--ink)}
.modal textarea{min-height:90px;resize:vertical}
.add-to-cart:disabled{opacity:.45;cursor:not-allowed;background:#f1f3f6;color:#8d98a8}
.row-actions button:hover,.row-delete:hover{color:var(--blue);background:var(--blue-soft)}
.row-delete{width:28px;height:28px;border-radius:8px;background:#f7f9fc;color:#758296}
.mobile-brand strong{color:var(--blue)}
.mobile-brand strong span{color:var(--red)}

.brand-mark {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  /* Remove box */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0;
}

.mn-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: transparent !important;
}

.brand-name {
  color: #1976FF; /* Blue for My */
  font-weight: 800;
}

.brand-name span {
  color: #FF2020; /* Red for Negosyo */
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  color: #1976FF;
  font-size: 22px;
}

.mobile-brand strong {
  color: #1976FF;
  font-weight: 800;
}

.mobile-brand strong span {
  color: #FF2020;
}

.brand-mark {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden;
  flex-shrink: 0;
}

.mn-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: transparent;
}

.logo-fallback::before {
  content: "MN";
  font-size: 18px;
  font-weight: 900;
  color: #1976FF;
}

/* =========================================================
   MYNEGOSYO — UNIVERSAL RESPONSIVE GRID SYSTEM
   Add this at the VERY BOTTOM of your existing style.css
   ========================================================= */

/* Global sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

body {
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow-x: hidden;
}

.app-shell,
.main,
.content,
.page,
.panel,
.card,
article,
section,
header,
aside {
  min-width: 0;
  max-width: 100%;
}

/* Main content */
.content {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.page {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
}

/* =========================================================
   PAGE HEAD
   ========================================================= */

.page-head {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(12px, 2vw, 24px);
  align-items: center;
}

.page-head > div {
  min-width: 0;
}

.page-head h1,
.page-head h2,
.page-head p {
  overflow-wrap: anywhere;
}

/* =========================================================
   STAT GRID
   ========================================================= */

.stat-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 220px), 1fr)
  );
  gap: clamp(12px, 1.5vw, 20px);
}

.stat-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
}

.stat-card > div:last-child {
  min-width: 0;
}

.stat-card strong,
.stat-card small,
.stat-card span {
  overflow-wrap: anywhere;
}

/* =========================================================
   DASHBOARD GRID
   ========================================================= */

.dashboard-grid {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 340px), 1fr)
    );
  gap: clamp(14px, 2vw, 24px);
}

.dashboard-grid.bottom {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 300px), 1fr)
    );
}

/* =========================================================
   QUICK ACTION GRID
   ========================================================= */

.quick-grid {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 130px), 1fr)
    );
  gap: 12px;
}

.quick-grid button {
  min-width: 0;
  width: 100%;
  overflow-wrap: anywhere;
}

/* =========================================================
   INVENTORY SUMMARY
   ========================================================= */

.inventory-summary {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 170px), 1fr)
    );
  gap: clamp(10px, 1.5vw, 16px);
}

.inventory-summary > div {
  min-width: 0;
  width: 100%;
}

.inventory-summary strong,
.inventory-summary span {
  overflow-wrap: anywhere;
}

/* =========================================================
   INVENTORY TOOLBAR
   ========================================================= */

.inventory-toolbar {
  width: 100%;
  display: grid;
  grid-template-columns:
    minmax(180px, 1fr)
    minmax(150px, 220px)
    auto;
  gap: 12px;
  align-items: center;
}

.inventory-toolbar > * {
  min-width: 0;
  width: 100%;
}

.inventory-toolbar .outline-btn {
  width: auto;
}

/* =========================================================
   SALES LAYOUT
   ========================================================= */

.sales-layout {
  width: 100%;
  display: grid;
  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(300px, 0.85fr);
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}

.sale-products,
.cart-panel {
  width: 100%;
  min-width: 0;
}

.sale-catalog {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 170px), 1fr)
    );
  gap: 12px;
}

.cart-items,
.cart-item {
  min-width: 0;
  max-width: 100%;
}

.cart-item {
  width: 100%;
}

/* =========================================================
   GENERAL CARD GRIDS
   ========================================================= */

.cards-grid {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 240px), 1fr)
    );
  gap: clamp(12px, 1.7vw, 20px);
}

.cards-grid > *,
.report-card,
.settings-card,
.network-grid > *,
.wallet-card {
  min-width: 0;
  max-width: 100%;
}

/* =========================================================
   REPORT CARDS
   ========================================================= */

.report-cards {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 190px), 1fr)
    );
  gap: clamp(12px, 1.5vw, 18px);
}

.report-card {
  width: 100%;
  min-width: 0;
}

.report-card strong,
.report-card span {
  overflow-wrap: anywhere;
}

/* =========================================================
   SETTINGS GRID
   ========================================================= */

.settings-grid {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 320px), 1fr)
    );
  gap: clamp(14px, 2vw, 24px);
}

.settings-card {
  width: 100%;
  min-width: 0;
}

.settings-card label,
.settings-card input,
.settings-card select,
.settings-card textarea {
  width: 100%;
  max-width: 100%;
}

/* =========================================================
   NETWORK GRID
   ========================================================= */

.network-grid {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 170px), 1fr)
    );
  gap: clamp(10px, 1.5vw, 16px);
}

.network-grid > div {
  width: 100%;
  min-width: 0;
}

/* =========================================================
   FORM GRID
   ========================================================= */

.form-grid {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 180px), 1fr)
    );
  gap: 14px;
}

.form-grid > * {
  width: 100%;
  min-width: 0;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  min-width: 0;
}

/* =========================================================
   MODALS
   ========================================================= */

.modal {
  width: min(680px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overflow-x: hidden;
}

.quick-modal-grid {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 130px), 1fr)
    );
  gap: 12px;
}

.quick-modal-grid > * {
  min-width: 0;
  width: 100%;
}

/* =========================================================
   TABLES
   ========================================================= */

.table-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.table-scroll th,
.table-scroll td {
  white-space: nowrap;
}

/* =========================================================
   SEARCH / INPUTS
   ========================================================= */

.search-field,
.top-search {
  min-width: 0;
  max-width: 100%;
}

.search-field input,
.top-search input {
  min-width: 0;
  width: 100%;
}

/* =========================================================
   PRODUCT / ALERT LISTS
   ========================================================= */

.product-rank,
.alert-list,
.phone-list,
.cart-items {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.product-rank > *,
.alert-list > *,
.phone-list > * {
  min-width: 0;
  max-width: 100%;
}

/* =========================================================
   PANELS
   ========================================================= */

.panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.panel-head {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-head > * {
  min-width: 0;
}

.panel-head h2,
.panel-head p {
  overflow-wrap: anywhere;
}

/* =========================================================
   BUTTONS
   ========================================================= */

button,
.btn,
.primary-btn,
.outline-btn,
.icon-btn {
  max-width: 100%;
}

button {
  overflow-wrap: anywhere;
}

/* =========================================================
   IMAGES / ICONS
   ========================================================= */

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

canvas {
  height: auto;
}

/* =========================================================
   MOBILE NAV / TOPBAR
   ========================================================= */

.topbar {
  width: 100%;
  min-width: 0;
}

.top-actions {
  min-width: 0;
  flex-shrink: 0;
}

.mobile-brand {
  min-width: 0;
}

.mobile-brand strong {
  white-space: nowrap;
}

/* =========================================================
   LARGE SCREENS
   ========================================================= */

@media (min-width: 1400px) {
  .stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-layout {
    grid-template-columns:
      minmax(0, 1.5fr)
      minmax(360px, 0.8fr);
  }

  .cards-grid {
    grid-template-columns:
      repeat(
        auto-fit,
        minmax(260px, 1fr)
      );
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {
  .sales-layout {
    grid-template-columns: 1fr;
  }

  .page-head {
    grid-template-columns: 1fr;
  }

  .page-head > button {
    justify-self: start;
  }

  .inventory-toolbar {
    grid-template-columns:
      minmax(180px, 1fr)
      minmax(150px, 200px);
  }

  .inventory-toolbar .outline-btn {
    grid-column: 1 / -1;
    width: fit-content;
  }
}

/* =========================================================
   TABLET / LARGE MOBILE
   ========================================================= */

@media (max-width: 768px) {
  .page-head {
    gap: 14px;
  }

  .page-head > button {
    width: 100%;
    justify-self: stretch;
  }

  .inventory-toolbar {
    grid-template-columns: 1fr;
  }

  .inventory-toolbar .outline-btn {
    width: 100%;
  }

  .dashboard-grid,
  .dashboard-grid.bottom {
    grid-template-columns: 1fr;
  }

  .sales-layout {
    grid-template-columns: 1fr;
  }

  .quick-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .sale-catalog {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .report-cards {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .network-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .panel-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {
  .stat-grid,
  .inventory-summary,
  .cards-grid,
  .report-cards,
  .network-grid {
    grid-template-columns: 1fr;
  }

  .quick-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sale-catalog {
    grid-template-columns: 1fr;
  }

  .quick-modal-grid {
    grid-template-columns: 1fr 1fr;
  }

  .page-head h1 {
    font-size: clamp(24px, 7vw, 32px);
  }

  .page-head {
    grid-template-columns: 1fr;
  }

  .panel {
    border-radius: 14px;
  }

  .modal {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
}

/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {
  .quick-grid,
  .quick-modal-grid,
  .report-cards,
  .network-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    gap: 10px;
  }

  .stat-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  .page-head > button {
    font-size: 13px;
  }
}

/* =========================================================
   SAFE TEXT WRAPPING
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
p,
small,
strong,
span,
label {
  max-width: 100%;
}

p,
small,
span,
strong,
label {
  overflow-wrap: anywhere;
}

/* Prevent long IDs / product names / URLs from breaking layout */
.product-name,
.customer-name,
.item-name,
.product-title,
.description,
.notes,
.muted {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================================================
   SAFE FLEX CHILDREN
   ========================================================= */

.flex,
.row,
.topbar,
.top-actions,
.brand,
.mobile-brand,
.modal-head,
.modal-actions {
  min-width: 0;
}

.brand > *,
.mobile-brand > *,
.top-actions > * {
  min-width: 0;
}

/* =========================================================
   TOUCH-FRIENDLY MOBILE CONTROLS
   ========================================================= */

@media (max-width: 768px) {
  input,
  select,
  textarea,
  button {
    min-height: 42px;
  }

  .icon-btn {
    min-width: 42px;
    min-height: 42px;
  }
}

/* =========================================================
   LANDSCAPE PHONES
   ========================================================= */

@media (max-width: 900px) and (orientation: landscape) {
  .dashboard-grid,
  .dashboard-grid.bottom {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .stat-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .cards-grid,
  .report-cards,
  .network-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

/* =========================================================
   REMOVE HORIZONTAL OVERFLOW FROM THE APP
   ========================================================= */

.app-shell {
  width: 100%;
  max-width: 100vw;
}

.main {
  min-width: 0;
  width: 100%;
}

.content {
  min-width: 0;
  width: 100%;
}

/* Any direct grid child must be allowed to shrink */
[class*="grid"] > *,
.stat-grid > *,
.dashboard-grid > *,
.quick-grid > *,
.cards-grid > *,
.form-grid > *,
.report-cards > *,
.settings-grid > *,
.network-grid > *,
.sale-catalog > * {
  min-width: 0;
  max-width: 100%;
}

/* PWA install button */
.install-app-btn {
  color: var(--blue);
  border-color: #cfe0ff;
  background: var(--blue-soft);
}
.install-app-btn:hover {
  background: #dceaff;
  border-color: #b9d2ff;
}

/* =========================================================
   MYNEGOSYO PWA INSTALL UI
   ========================================================= */

/* Install button */

.install-app-btn {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}


/* PWA modal */

#pwaInstallModal {
  position: fixed;
  inset: 0;
  z-index: 99999;
}


.pwa-modal-backdrop {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(15, 23, 42, 0.55);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


.pwa-modal {
  position: relative;

  width: min(430px, 100%);

  max-height: calc(100vh - 40px);

  overflow-y: auto;

  padding: 32px 26px 26px;

  background: #ffffff;

  border-radius: 24px;

  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.25);

  text-align: center;
}


.pwa-modal-close {
  position: absolute;

  top: 14px;
  right: 14px;

  width: 38px;
  height: 38px;

  border: 0;
  border-radius: 50%;

  background: #f1f5f9;

  color: #475569;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}


.pwa-modal-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 20px;
}

.install-intro {
  margin: -8px 0 18px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

.pwa-modal-icon {
  width: 72px;
  height: 72px;

  margin: 0 auto 18px;

  border-radius: 20px;

  background: #0d6efd;

  color: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 30px;

  box-shadow:
    0 10px 25px rgba(13, 110, 253, 0.25);
}


.pwa-modal h2 {
  margin: 0 0 22px;

  font-size: 24px;
  font-weight: 800;

  color: #111827;
}


/* Installation steps */

.install-instructions {
  display: flex;
  flex-direction: column;

  gap: 14px;

  text-align: left;

  margin-bottom: 22px;
}


.install-step {
  display: flex;
  align-items: center;

  gap: 14px;

  padding: 14px;

  border-radius: 14px;

  background: #f8fafc;

  border: 1px solid #e5e7eb;

  color: #334155;

  font-size: 14px;
}


.install-step > span {
  flex: 0 0 34px;

  width: 34px;
  height: 34px;

  border-radius: 50%;

  background: #0d6efd;

  color: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 800;
}


.install-step strong {
  color: #111827;
}


.install-step small {
  color: #64748b;
}


/* Generic message */

.install-message {
  padding: 10px 0 20px;

  color: #475569;
}


.install-message i {
  font-size: 38px;

  margin-bottom: 14px;

  color: #0d6efd;
}


.install-message p {
  margin: 0;

  line-height: 1.6;
}


/* Done button */

.pwa-close-btn {
  width: 100%;

  justify-content: center;
}


/* Mobile */

@media (max-width: 600px) {

  .pwa-modal-backdrop {
    align-items: flex-end;

    padding: 0;
  }

  .pwa-modal {
    width: 100%;

    max-height: 90vh;

    border-radius: 26px 26px 0 0;

    padding:
      30px
      20px
      calc(20px + env(safe-area-inset-bottom));
  }

}

/* =========================================================
   MYNEGOSYO — UANG / GCASH / E-LOAD / VAULT
   EXTRA-VISIBLE MOBILE LAYOUT
   Add this at the VERY BOTTOM of style.css
   ========================================================= */

/* Make these pages use the full available phone width */
#page-utang,
#page-gcash,
#page-eload,
#page-vault {
  width: 100%;
  max-width: 100%;
}

/* ---------------------------------------------------------
   PAGE HEAD
   --------------------------------------------------------- */

#page-utang .page-head,
#page-gcash .page-head,
#page-eload .page-head,
#page-vault .page-head {
  width: 100%;
}

#page-utang .page-head h1,
#page-gcash .page-head h1,
#page-eload .page-head h1,
#page-vault .page-head h1 {
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1.08;
  letter-spacing: -1.2px;
}

#page-utang .page-head .muted,
#page-gcash .page-head .muted,
#page-eload .page-head .muted,
#page-vault .page-head .muted {
  font-size: clamp(11px, 3.1vw, 13px);
  line-height: 1.45;
  max-width: 620px;
}

#page-utang .page-head > button,
#page-gcash .page-head > button,
#page-eload .page-head > button,
#page-vault .page-head > button {
  min-height: 46px;
  font-size: 13px;
}

/* ---------------------------------------------------------
   UTANG SUMMARY
   --------------------------------------------------------- */

#page-utang .summary-banner {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#page-utang .summary-banner > div {
  min-width: 0;
  min-height: 84px;
  padding: 17px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 16px;
}

#page-utang .summary-banner span {
  font-size: 10px;
  line-height: 1.3;
  margin-bottom: 4px;
}

#page-utang .summary-banner strong {
  font-size: clamp(19px, 5vw, 27px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

#page-utang .summary-banner .red-text {
  font-size: clamp(22px, 6vw, 29px);
}

/* ---------------------------------------------------------
   GCASH + CASH ON VAULT
   --------------------------------------------------------- */

#page-gcash .wallet-card,
#page-vault .wallet-card {
  width: 100%;
  min-height: 145px;
  padding: 24px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

#page-gcash .wallet-card > div,
#page-vault .wallet-card > div {
  min-width: 0;
  flex: 1 1 auto;
}

#page-gcash .wallet-card small,
#page-vault .wallet-card small {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  margin-bottom: 3px;
}

#page-gcash .wallet-card strong,
#page-vault .wallet-card strong {
  display: block;
  font-size: clamp(28px, 8vw, 38px);
  line-height: 1.05;
  letter-spacing: -1.2px;
  white-space: nowrap;
}

#page-gcash .wallet-card span,
#page-vault .wallet-card span {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.35;
}

#page-gcash .wallet-bg,
#page-vault .wallet-bg {
  flex: 0 0 auto;
  font-size: clamp(70px, 18vw, 105px);
  margin: 0;
  line-height: 1;
}

/* ---------------------------------------------------------
   E-LOAD NETWORK CARDS
   --------------------------------------------------------- */

#page-eload .network-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#page-eload .network-grid > div {
  min-width: 0;
  min-height: 105px;
  padding: 17px 15px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#page-eload .network-grid span {
  font-size: 10px;
  line-height: 1.3;
  min-height: 27px;
}

#page-eload .network-grid strong {
  font-size: clamp(20px, 5vw, 27px);
  line-height: 1.1;
  letter-spacing: -0.6px;
  margin-top: 7px;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   TABLE AREA
   --------------------------------------------------------- */

#page-utang .table-panel,
#page-gcash .table-panel,
#page-eload .table-panel,
#page-vault .table-panel {
  width: 100%;
  margin-top: 14px;
}

/* ---------------------------------------------------------
   TABLET / LARGE PHONES
   --------------------------------------------------------- */

@media (max-width: 768px) {

  #page-utang .summary-banner,
  #page-eload .network-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-utang .summary-banner > div {
    min-height: 92px;
  }

  #page-eload .network-grid > div {
    min-height: 108px;
  }

  #page-gcash .wallet-card,
  #page-vault .wallet-card {
    min-height: 155px;
    padding: 22px;
  }
}

/* ---------------------------------------------------------
   NORMAL PHONES
   --------------------------------------------------------- */

@media (max-width: 480px) {

  /* More horizontal breathing room */
  #page-utang .summary-banner,
  #page-eload .network-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Utang */
  #page-utang .summary-banner > div {
    min-height: 88px;
    padding: 16px 17px;
  }

  #page-utang .summary-banner span {
    font-size: 10px;
  }

  #page-utang .summary-banner strong {
    font-size: 24px;
  }

  /* GCash + Vault */
  #page-gcash .wallet-card,
  #page-vault .wallet-card {
    min-height: 145px;
    padding: 21px 18px;
    border-radius: 18px;
    gap: 10px;
  }

  #page-gcash .wallet-card strong,
  #page-vault .wallet-card strong {
    font-size: clamp(28px, 8.5vw, 34px);
  }

  #page-gcash .wallet-card small,
  #page-vault .wallet-card small {
    font-size: 10px;
  }

  #page-gcash .wallet-card span,
  #page-vault .wallet-card span {
    font-size: 10px;
    margin-top: 7px;
  }

  #page-gcash .wallet-bg,
  #page-vault .wallet-bg {
    font-size: 68px;
  }

  /* E-Load */
  #page-eload .network-grid > div {
    min-height: 82px;
    padding: 16px 17px;
  }

  #page-eload .network-grid span {
    min-height: auto;
    font-size: 10px;
  }

  #page-eload .network-grid strong {
    font-size: 24px;
    margin-top: 5px;
  }

  /* Bigger action buttons */
  #page-utang .page-head > button,
  #page-gcash .page-head > button,
  #page-eload .page-head > button,
  #page-vault .page-head > button {
    width: 100%;
    min-height: 46px;
    font-size: 13px;
  }
}

/* ---------------------------------------------------------
   VERY SMALL PHONES — 320px / 360px
   --------------------------------------------------------- */

@media (max-width: 360px) {

  #page-utang .page-head h1,
  #page-gcash .page-head h1,
  #page-eload .page-head h1,
  #page-vault .page-head h1 {
    font-size: 25px;
  }

  #page-utang .page-head .muted,
  #page-gcash .page-head .muted,
  #page-eload .page-head .muted,
  #page-vault .page-head .muted {
    font-size: 10.5px;
  }

  /* Utang cards */
  #page-utang .summary-banner > div {
    min-height: 82px;
    padding: 15px;
  }

  #page-utang .summary-banner strong {
    font-size: 23px;
  }

  /* Wallet cards */
  #page-gcash .wallet-card,
  #page-vault .wallet-card {
    min-height: 135px;
    padding: 19px 15px;
  }

  #page-gcash .wallet-card strong,
  #page-vault .wallet-card strong {
    font-size: 27px;
  }

  #page-gcash .wallet-bg,
  #page-vault .wallet-bg {
    font-size: 58px;
  }

  /* E-load cards */
  #page-eload .network-grid > div {
    min-height: 78px;
    padding: 14px 15px;
  }

  #page-eload .network-grid strong {
    font-size: 22px;
  }
}

/* ---------------------------------------------------------
   EXTRA SMALL DEVICES
   --------------------------------------------------------- */

@media (max-width: 320px) {

  #page-gcash .wallet-card,
  #page-vault .wallet-card {
    min-height: 128px;
    padding: 17px 13px;
  }

  #page-gcash .wallet-card strong,
  #page-vault .wallet-card strong {
    font-size: 25px;
  }

  #page-gcash .wallet-bg,
  #page-vault .wallet-bg {
    font-size: 50px;
  }

  #page-eload .network-grid > div,
  #page-utang .summary-banner > div {
    padding: 14px;
  }
}

/* ---------------------------------------------------------
   PREVENT CLIPPING / OVERFLOW
   --------------------------------------------------------- */

#page-utang *,
#page-gcash *,
#page-eload *,
#page-vault * {
  max-width: 100%;
}

#page-utang .summary-banner strong,
#page-gcash .wallet-card strong,
#page-vault .wallet-card strong,
#page-eload .network-grid strong {
  overflow: visible;
  text-overflow: clip;
}

/* Keep cards visually separated from bottom navigation */
@media (max-width: 768px) {
  #page-utang,
  #page-gcash,
  #page-eload,
  #page-vault {
    padding-bottom: 18px;
  }
}

/* =========================================================
   TODAY'S SALES — GCASH-STYLE CARD
   ========================================================= */

/* Turn the Today's Sales dashboard stat into a large card */
.stat-grid .stat-card.blue {
  min-height: 145px;
  padding: 22px 24px;
  border-radius: 20px;
  border: 1px solid rgba(13, 110, 253, 0.18);

  background: linear-gradient(
    135deg,
    #0d6efd 0%,
    #1556b9 100%
  );

  color: #fff;

  display: flex;
  align-items: center;
  gap: 20px;

  box-shadow:
    0 12px 30px rgba(13, 110, 253, 0.20);

  position: relative;
  overflow: hidden;
}

/* Soft decorative glow */
.stat-grid .stat-card.blue::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -45px;
  bottom: -70px;

  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;

  pointer-events: none;
}

/* Larger icon container */
.stat-grid .stat-card.blue .stat-icon {
  width: 60px;
  height: 60px;
  min-width: 60px;

  border-radius: 17px;

  background: rgba(255, 255, 255, 0.14);
  color: #fff;

  display: grid;
  place-items: center;

  font-size: 24px;

  position: relative;
  z-index: 2;
}

/* Text area */
.stat-grid .stat-card.blue > div:last-child {
  min-width: 0;
  position: relative;
  z-index: 2;
}

/* Today's Sales label */
.stat-grid .stat-card.blue small {
  display: block;

  color: rgba(255, 255, 255, 0.78);

  font-size: 12px;
  font-weight: 500;

  margin-bottom: 5px;
}

/* Sales amount */
.stat-grid .stat-card.blue strong {
  display: block;

  color: #fff;

  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1.3px;

  margin: 0;
}

/* Trend */
.stat-grid .stat-card.blue .trend {
  display: block;

  color: rgba(255, 255, 255, 0.88);

  font-size: 11px;
  font-weight: 500;

  margin-top: 9px;
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

  .stat-grid .stat-card.blue {
    min-height: 145px;
    padding: 22px 20px;
    border-radius: 20px;
    gap: 17px;
  }

  .stat-grid .stat-card.blue .stat-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 16px;
    font-size: 23px;
  }

  .stat-grid .stat-card.blue strong {
    font-size: clamp(27px, 8vw, 34px);
  }

  .stat-grid .stat-card.blue small {
    font-size: 11px;
  }

  .stat-grid .stat-card.blue .trend {
    font-size: 10px;
    margin-top: 8px;
  }
}

/* ---------------------------------------------------------
   SMALL PHONES
   --------------------------------------------------------- */

@media (max-width: 480px) {

  .stat-grid {
    grid-template-columns: 1fr;
  }

  .stat-grid .stat-card.blue {
    width: 100%;
    min-height: 145px;
    padding: 21px 18px;
    gap: 16px;
  }

  .stat-grid .stat-card.blue .stat-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    font-size: 22px;
  }

  .stat-grid .stat-card.blue strong {
    font-size: 30px;
  }

  .stat-grid .stat-card.blue small {
    font-size: 11px;
  }

  .stat-grid .stat-card.blue .trend {
    font-size: 10px;
  }
}

/* ---------------------------------------------------------
   VERY SMALL PHONES
   --------------------------------------------------------- */

@media (max-width: 360px) {

  .stat-grid .stat-card.blue {
    min-height: 138px;
    padding: 18px 15px;
    gap: 13px;
  }

  .stat-grid .stat-card.blue .stat-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 14px;
    font-size: 20px;
  }

  .stat-grid .stat-card.blue strong {
    font-size: 27px;
  }

  .stat-grid .stat-card.blue small {
    font-size: 10px;
  }

  .stat-grid .stat-card.blue .trend {
    font-size: 9px;
    margin-top: 6px;
  }
}

/* =========================================================
   MYNEGOSYO — NOTIFICATION SYSTEM
   ========================================================= */


/* ---------------------------------------------------------
   WRAPPER
   --------------------------------------------------------- */

.notification-wrapper {
  position: relative;
  flex: 0 0 auto;
}


/* ---------------------------------------------------------
   NOTIFICATION BUTTON
   --------------------------------------------------------- */

.notification-wrapper .notification {
  position: relative;
  z-index: 2;
}


/* ---------------------------------------------------------
   BADGE
   --------------------------------------------------------- */

.notification-badge {
  position: absolute;

  top: -3px;
  right: -3px;

  min-width: 17px;
  height: 17px;

  padding: 0 4px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  background: #e53935;
  color: #fff;

  border: 2px solid #fff;

  font-size: 8px;
  font-weight: 900;
  line-height: 1;

  box-shadow:
    0 3px 8px rgba(229,57,53,.25);

  pointer-events: none;

  transform: scale(1);
  transition: .2s ease;
}


.notification-badge:empty {
  display: none;
}


.notification-badge.hidden {
  display: none;
}


/* ---------------------------------------------------------
   PANEL
   --------------------------------------------------------- */

.notification-panel {
  position: absolute;

  top: calc(100% + 12px);
  right: 0;

  width: min(390px, calc(100vw - 24px));

  background: #fff;

  border: 1px solid var(--line);

  border-radius: 18px;

  box-shadow:
    0 20px 55px rgba(15,31,58,.18);

  overflow: hidden;

  opacity: 0;
  visibility: hidden;

  transform:
    translateY(-8px)
    scale(.98);

  transform-origin:
    top right;

  transition:
    opacity .18s ease,
    visibility .18s ease,
    transform .18s ease;

  z-index: 100;
}


.notification-panel.open {
  opacity: 1;
  visibility: visible;

  transform:
    translateY(0)
    scale(1);
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.notification-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 14px;

  padding: 17px 17px 14px;

  border-bottom: 1px solid #eef1f5;

  background: #fff;
}


.notification-head > div {
  min-width: 0;
}


.notification-head strong {
  display: block;

  font-size: 15px;
  font-weight: 800;

  color: var(--ink);

  margin-bottom: 3px;
}


.notification-head span {
  display: block;

  color: var(--muted);

  font-size: 10px;

  line-height: 1.4;
}


.notification-read {
  flex: 0 0 auto;

  background: transparent;

  color: var(--blue);

  font-size: 10px;

  font-weight: 800;

  padding: 6px 0;

  white-space: nowrap;
}


.notification-read:hover {
  color: var(--blue-dark);
}


/* ---------------------------------------------------------
   LIST
   --------------------------------------------------------- */

.notification-list {
  max-height: 390px;

  overflow-y: auto;

  overscroll-behavior:
    contain;
}


.notification-list::-webkit-scrollbar {
  width: 5px;
}


.notification-list::-webkit-scrollbar-thumb {
  background: #d8dee9;
  border-radius: 99px;
}


/* ---------------------------------------------------------
   ITEM
   --------------------------------------------------------- */

.notification-item {
  width: 100%;

  display: flex;
  align-items: flex-start;

  gap: 11px;

  padding: 13px 15px;

  background: #fff;

  border: 0;

  border-bottom: 1px solid #f0f2f6;

  text-align: left;

  cursor: pointer;

  transition:
    background .15s ease;
}


.notification-item:hover {
  background: #f8faff;
}


.notification-item.unread {
  background: #f4f8ff;
}


.notification-item:last-child {
  border-bottom: 0;
}


/* ---------------------------------------------------------
   ICON
   --------------------------------------------------------- */

.notification-icon {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  font-size: 14px;
}


.notification-icon.red {
  background: var(--red-soft);
  color: var(--red);
}


.notification-icon.yellow {
  background: var(--yellow-soft);
  color: #b88700;
}


.notification-icon.blue {
  background: var(--blue-soft);
  color: var(--blue);
}


.notification-icon.green {
  background: #eaf8f1;
  color: #1e9d60;
}


.notification-icon.orange {
  background: #fff1e8;
  color: #d66a16;
}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.notification-content {
  min-width: 0;
  flex: 1;
}


.notification-title {
  display: block;

  font-size: 11px;

  line-height: 1.35;

  font-weight: 800;

  color: var(--ink);

  margin-bottom: 3px;
}


.notification-text {
  display: block;

  font-size: 10px;

  line-height: 1.45;

  color: var(--muted);

  overflow-wrap: anywhere;
}


.notification-time {
  display: block;

  margin-top: 5px;

  font-size: 8px;

  color: #9ba5b4;
}


/* ---------------------------------------------------------
   UNREAD DOT
   --------------------------------------------------------- */

.notification-unread {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background: var(--blue);

  margin-top: 7px;

  box-shadow:
    0 0 0 3px rgba(13,110,253,.08);
}


/* ---------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------- */

.notification-empty {
  min-height: 210px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  padding: 30px 20px;
}


.notification-empty i {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border-radius: 15px;

  background: #f2f5f9;

  color: #9aa6b6;

  font-size: 19px;

  margin-bottom: 12px;
}


.notification-empty strong {
  font-size: 12px;
  color: #425069;

  margin-bottom: 4px;
}


.notification-empty span {
  font-size: 9px;
  color: #8f9bad;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.notification-footer {
  padding: 11px 15px;

  border-top: 1px solid #eef1f5;

  background: #fbfcff;
}


.notification-footer button {
  width: 100%;

  height: 36px;

  border: 0;

  border-radius: 10px;

  background: var(--blue-soft);

  color: var(--blue);

  font-size: 10px;

  font-weight: 800;
}


.notification-footer button:hover {
  background: #dceaff;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

  .notification-panel {
    position: fixed;

    top: 68px;
    right: 12px;
    left: 12px;

    width: auto;

    max-height:
      calc(100vh - 90px);

    border-radius: 18px;
  }


  .notification-list {
    max-height:
      calc(100vh - 220px);
  }

}


/* ---------------------------------------------------------
   SMALL PHONES
   --------------------------------------------------------- */

@media (max-width: 480px) {

  .notification-panel {
    top: 68px;

    right: 8px;
    left: 8px;

    width: auto;

    border-radius: 16px;
  }


  .notification-head {
    padding: 15px 14px 12px;
  }


  .notification-item {
    padding: 12px;
    gap: 9px;
  }


  .notification-icon {
    width: 35px;
    height: 35px;
    flex-basis: 35px;

    border-radius: 10px;

    font-size: 13px;
  }


  .notification-title {
    font-size: 10px;
  }


  .notification-text {
    font-size: 9px;
  }


  .notification-time {
    font-size: 8px;
  }

}


/* ---------------------------------------------------------
   VERY SMALL PHONES
   --------------------------------------------------------- */

@media (max-width: 360px) {

  .notification-head strong {
    font-size: 14px;
  }


  .notification-read {
    font-size: 9px;
  }


  .notification-item {
    padding: 11px;
  }

}

/* =========================================================
   MYNEGOSYO — FULL NOTIFICATION SYSTEM
   ========================================================= */


/* ---------------------------------------------------------
   WRAPPER
   --------------------------------------------------------- */

.notification-wrapper {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}


/* ---------------------------------------------------------
   NOTIFICATION BUTTON
   --------------------------------------------------------- */

.notification-wrapper .notification {
  position: relative;
  z-index: 2;
}


/* ---------------------------------------------------------
   BADGE
   --------------------------------------------------------- */

.notification-badge {
  position: absolute;

  top: -4px;
  right: -4px;

  min-width: 18px;
  height: 18px;

  padding: 0 5px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  background: #e53935;
  color: #ffffff;

  border: 2px solid #ffffff;

  font-size: 8px;
  font-weight: 900;
  line-height: 1;

  box-shadow:
    0 4px 10px rgba(229, 57, 53, .28);

  pointer-events: none;

  z-index: 5;
}


.notification-badge.hidden {
  display: none;
}


/* ---------------------------------------------------------
   PANEL
   --------------------------------------------------------- */

.notification-panel {
  position: absolute;

  top: calc(100% + 12px);
  right: 0;

  width: min(
    400px,
    calc(100vw - 24px)
  );

  background: #ffffff;

  border: 1px solid var(--line);

  border-radius: 18px;

  overflow: hidden;

  box-shadow:
    0 22px 60px rgba(15, 31, 58, .20);

  opacity: 0;
  visibility: hidden;

  transform:
    translateY(-8px)
    scale(.97);

  transform-origin:
    top right;

  transition:
    opacity .18s ease,
    visibility .18s ease,
    transform .18s ease;

  z-index: 9999;
}


.notification-panel.open {
  opacity: 1;
  visibility: visible;

  transform:
    translateY(0)
    scale(1);
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.notification-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 14px;

  padding: 17px;

  border-bottom:
    1px solid #edf1f6;

  background: #ffffff;
}


.notification-title-area {
  min-width: 0;
  flex: 1;
}


.notification-title-area strong {
  display: block;

  color: var(--ink);

  font-size: 15px;
  font-weight: 800;

  line-height: 1.2;

  margin-bottom: 4px;
}


.notification-title-area span {
  display: block;

  color: var(--muted);

  font-size: 10px;

  line-height: 1.35;
}


.notification-read {
  flex: 0 0 auto;

  padding: 6px 0;

  border: 0;

  background: transparent;

  color: var(--blue);

  font-size: 9px;

  font-weight: 800;

  white-space: nowrap;

  cursor: pointer;
}


.notification-read:hover {
  text-decoration: underline;
}


/* ---------------------------------------------------------
   LIST
   --------------------------------------------------------- */

.notification-list {
  max-height: 420px;

  overflow-y: auto;

  overscroll-behavior: contain;
}


.notification-list::-webkit-scrollbar {
  width: 5px;
}


.notification-list::-webkit-scrollbar-track {
  background: transparent;
}


.notification-list::-webkit-scrollbar-thumb {
  background: #d7dee8;

  border-radius: 999px;
}


/* ---------------------------------------------------------
   ITEM
   --------------------------------------------------------- */

.notification-item {
  width: 100%;

  display: flex;
  align-items: flex-start;

  gap: 11px;

  padding: 13px 15px;

  background: #ffffff;

  border: 0;

  border-bottom:
    1px solid #f0f3f7;

  text-align: left;

  cursor: pointer;

  transition:
    background .15s ease;
}


.notification-item:hover {
  background: #f7faff;
}


.notification-item.unread {
  background:
    linear-gradient(
      90deg,
      #f4f8ff 0%,
      #ffffff 100%
    );
}


.notification-item:last-child {
  border-bottom: 0;
}


/* ---------------------------------------------------------
   ICON
   --------------------------------------------------------- */

.notification-icon {
  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  font-size: 14px;
}


.notification-icon.red {
  background: #fff0f0;
  color: #e53935;
}


.notification-icon.yellow {
  background: #fff8df;
  color: #c18a00;
}


.notification-icon.blue {
  background: #edf4ff;
  color: #0d6efd;
}


.notification-icon.green {
  background: #eaf8f1;
  color: #1b9b61;
}


.notification-icon.orange {
  background: #fff0e7;
  color: #d86b17;
}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.notification-content {
  min-width: 0;
  flex: 1;
}


.notification-item-title {
  display: block;

  color: var(--ink);

  font-size: 11px;

  font-weight: 800;

  line-height: 1.35;

  margin-bottom: 3px;
}


.notification-item-text {
  display: block;

  color: var(--muted);

  font-size: 9px;

  line-height: 1.5;

  overflow-wrap: anywhere;
}


.notification-item-time {
  display: block;

  color: #9aa6b6;

  font-size: 8px;

  line-height: 1.3;

  margin-top: 5px;
}


/* ---------------------------------------------------------
   UNREAD DOT
   --------------------------------------------------------- */

.notification-unread-dot {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  margin-top: 6px;

  border-radius: 50%;

  background: var(--blue);

  box-shadow:
    0 0 0 3px rgba(13,110,253,.08);
}


/* ---------------------------------------------------------
   EMPTY
   --------------------------------------------------------- */

.notification-empty {
  min-height: 220px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 30px 20px;
}


.notification-empty-icon {
  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  margin-bottom: 12px;

  border-radius: 16px;

  background: #f2f5f9;

  color: #9da8b8;

  font-size: 19px;
}


.notification-empty strong {
  color: #46546a;

  font-size: 12px;

  margin-bottom: 4px;
}


.notification-empty span {
  color: #95a0b0;

  font-size: 9px;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.notification-footer {
  padding: 11px 15px;

  border-top:
    1px solid #edf1f6;

  background: #fafcff;
}


.notification-footer button {
  width: 100%;

  height: 36px;

  border: 0;

  border-radius: 10px;

  background: var(--blue-soft);

  color: var(--blue);

  font-size: 10px;

  font-weight: 800;

  cursor: pointer;

  transition:
    background .15s ease,
    transform .15s ease;
}


.notification-footer button:hover {
  background: #dceaff;

  transform: translateY(-1px);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

  .notification-panel {
    position: fixed;

    top: 68px;

    left: 12px;
    right: 12px;

    width: auto;

    max-width: none;

    border-radius: 18px;
  }


  .notification-list {
    max-height:
      calc(100vh - 220px);
  }

}


/* ---------------------------------------------------------
   SMALL PHONES
   --------------------------------------------------------- */

@media (max-width: 480px) {

  .notification-panel {
    top: 65px;

    left: 8px;
    right: 8px;

    border-radius: 16px;
  }


  .notification-head {
    padding: 14px;
  }


  .notification-title-area strong {
    font-size: 14px;
  }


  .notification-title-area span {
    font-size: 9px;
  }


  .notification-read {
    font-size: 8px;
  }


  .notification-item {
    padding: 12px;
    gap: 9px;
  }


  .notification-icon {
    width: 36px;
    height: 36px;

    flex-basis: 36px;

    border-radius: 10px;

    font-size: 13px;
  }


  .notification-item-title {
    font-size: 10px;
  }


  .notification-item-text {
    font-size: 9px;
  }


  .notification-item-time {
    font-size: 8px;
  }

}


/* ---------------------------------------------------------
   VERY SMALL PHONES
   --------------------------------------------------------- */

@media (max-width: 360px) {

  .notification-panel {
    left: 6px;
    right: 6px;
  }


  .notification-item {
    padding: 11px;
  }


  .notification-icon {
    width: 34px;
    height: 34px;

    flex-basis: 34px;
  }


  .notification-title-area strong {
    font-size: 13px;
  }

}

/* =========================================================
   MYNEGOSYO — DEVICE NOTIFICATION SETTINGS
   ========================================================= */

.device-notification-settings {
  margin-top: 18px;
  width: 100%;
}

/* Header */
.device-notification-settings .settings-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.device-notification-settings .settings-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.device-notification-settings .settings-card-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
}

.device-notification-settings .settings-card-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

/* Status Badge */
.device-notification-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 30px;
  padding: 7px 11px;
  border: 1px solid #e6ebf2;
  border-radius: 999px;
  background: #f4f6f9;
  color: #7c8797;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.device-notification-status i {
  font-size: 10px;
}

.device-notification-status.enabled {
  background: #eaf8f1;
  border-color: #cdebdc;
  color: #1b9b61;
}

.device-notification-status.denied {
  background: #fff0f0;
  border-color: #f3cccc;
  color: #e53935;
}

.device-notification-status.warning {
  background: #fff8df;
  border-color: #f0df9c;
  color: #ad7900;
}

/* Permission Box */
.notification-permission-box {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #e1e9f3;
  border-radius: 15px;
  background: linear-gradient(
    135deg,
    #f7faff 0%,
    #fbfdff 100%
  );
}

.permission-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 16px;
}

.permission-content {
  min-width: 0;
  flex: 1;
}

.permission-content strong {
  display: block;
  margin: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.permission-content span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.notification-permission-box .primary-btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

/* Notification Options Container */
.notification-settings-list {
  width: 100%;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #e7edf4;
  border-radius: 15px;
  background: #ffffff;
}

/* Individual Setting */
.notification-setting-row {
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-bottom: 1px solid #edf1f6;
  background: #ffffff;
  cursor: pointer;
  transition:
    background .18s ease,
    transform .18s ease;
}

.notification-setting-row:last-child {
  border-bottom: 0;
}

.notification-setting-row:hover {
  background: #fafcff;
}

/* Setting Icon */
.notification-setting-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-size: 13px;
}

.notification-setting-icon.red {
  background: #fff0f0;
  color: #e53935;
}

.notification-setting-icon.yellow {
  background: #fff8df;
  color: #b98300;
}

.notification-setting-icon.orange {
  background: #fff0e7;
  color: #d86b17;
}

.notification-setting-icon.blue {
  background: #edf4ff;
  color: #0d6efd;
}

.notification-setting-icon.green {
  background: #eaf8f1;
  color: #1b9b61;
}

.notification-setting-icon.purple {
  background: #f2edff;
  color: #7652d9;
}

.notification-setting-icon.gold {
  background: #fff7dd;
  color: #ad7900;
}

/* Setting Text */
.notification-setting-text {
  min-width: 0;
  flex: 1;
}

.notification-setting-text strong {
  display: block;
  margin: 0;
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
}

.notification-setting-text span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Toggle Switch */
.notification-switch {
  appearance: none;
  -webkit-appearance: none;

  width: 42px;
  height: 23px;

  position: relative;
  flex: 0 0 42px;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 999px;

  background: #dce3ec;

  cursor: pointer;

  outline: none;

  transition:
    background .2s ease,
    box-shadow .2s ease;
}

.notification-switch::after {
  content: "";

  position: absolute;

  top: 3px;
  left: 3px;

  width: 17px;
  height: 17px;

  border-radius: 50%;

  background: #ffffff;

  box-shadow:
    0 2px 6px rgba(0, 0, 0, .15);

  transition:
    transform .2s ease;
}

.notification-switch:hover {
  box-shadow:
    0 0 0 3px rgba(13, 110, 253, .06);
}

.notification-switch:checked {
  background: var(--blue);
}

.notification-switch:checked::after {
  transform: translateX(19px);
}

.notification-switch:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

.notification-switch:focus-visible {
  box-shadow:
    0 0 0 3px rgba(13, 110, 253, .16);
}

/* Bottom Actions */
.device-notification-actions {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.device-notification-actions .outline-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

#notificationSaveMessage {
  min-height: 15px;
  color: #1b9b61;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.4;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .device-notification-settings .settings-card-head {
    flex-direction: column;
    gap: 10px;
  }

  .device-notification-status {
    align-self: flex-start;
  }

  .notification-permission-box {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .permission-content {
    flex: 1 1 calc(100% - 60px);
  }

  .notification-permission-box .primary-btn {
    width: 100%;
    flex: 1 1 100%;
  }

  .device-notification-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .device-notification-actions .outline-btn {
    width: 100%;
  }
}

/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

  .device-notification-settings {
    margin-top: 14px;
  }

  .device-notification-settings .settings-card-head h3 {
    font-size: 15px;
  }

  .device-notification-settings .settings-card-head p {
    font-size: 9px;
  }

  .notification-permission-box {
    padding: 12px;
    gap: 10px;
    border-radius: 13px;
  }

  .permission-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 10px;
    font-size: 14px;
  }

  .permission-content {
    flex: 1 1 calc(100% - 50px);
  }

  .permission-content strong {
    font-size: 10px;
  }

  .permission-content span {
    font-size: 8px;
  }

  .notification-setting-row {
    min-height: 58px;
    padding: 10px;
    gap: 9px;
  }

  .notification-setting-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 9px;
    font-size: 12px;
  }

  .notification-setting-text strong {
    font-size: 9px;
  }

  .notification-setting-text span {
    font-size: 7.5px;
  }

  .notification-switch {
    width: 38px;
    height: 21px;
    flex-basis: 38px;
  }

  .notification-switch::after {
    width: 15px;
    height: 15px;
    top: 3px;
    left: 3px;
  }

  .notification-switch:checked::after {
    transform: translateX(17px);
  }
}

/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

  .notification-setting-row {
    padding: 9px;
    gap: 8px;
  }

  .notification-setting-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .notification-setting-text strong {
    font-size: 8.5px;
  }

  .notification-setting-text span {
    font-size: 7px;
  }

  .notification-switch {
    width: 36px;
    height: 20px;
    flex-basis: 36px;
  }

  .notification-switch::after {
    width: 14px;
    height: 14px;
  }

  .notification-switch:checked::after {
    transform: translateX(16px);
  }
}

/* =========================================================
   ENABLED NOTIFICATION BUTTON
   ========================================================= */

#enableDeviceNotifications.notification-enabled-button {
  background: #1b9b61;
  border-color: #1b9b61;
  color: #ffffff;
  cursor: default;
}

#enableDeviceNotifications.notification-enabled-button {
  background: #1b9b61 !important;
  border-color: #1b9b61 !important;
  color: #fff !important;
}

#enableDeviceNotifications.notification-enabled-button i {
  color: #fff !important;
}

/* =========================================================
   MYNEGOSYO — UNIVERSAL DEVICE NOTIFICATION SETTINGS
   Responsive for desktop, tablet, mobile and small phones
   ========================================================= */

:root {
  --notif-gap: clamp(8px, 1.5vw, 16px);
  --notif-radius: clamp(10px, 1.5vw, 16px);
  --notif-icon-size: clamp(32px, 5vw, 42px);
  --notif-title-size: clamp(9px, 1.2vw, 12px);
  --notif-text-size: clamp(7px, 1vw, 10px);
}

/* =========================================================
   MAIN CARD
   ========================================================= */

.device-notification-settings {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: clamp(10px, 2vw, 20px) 0 0;
  overflow: hidden;
}

/* Make every child respect the available width */
.device-notification-settings *,
.device-notification-settings *::before,
.device-notification-settings *::after {
  box-sizing: border-box;
}

/* =========================================================
   HEADER
   ========================================================= */

.device-notification-settings .settings-card-head {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--notif-gap);
}

.device-notification-settings .settings-card-head > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.device-notification-settings .settings-eyebrow {
  display: block;
  margin: 0 0 5px;
  color: var(--blue);
  font-size: clamp(7px, 0.9vw, 9px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.device-notification-settings .settings-card-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(14px, 1.7vw, 18px);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.device-notification-settings .settings-card-head p {
  max-width: 720px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: clamp(8px, 1vw, 10px);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* =========================================================
   STATUS BADGE
   ========================================================= */

.device-notification-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  max-width: 100%;
  padding: 7px 11px;
  border: 1px solid #e6ebf2;
  border-radius: 999px;
  background: #f4f6f9;
  color: #7c8797;
  font-size: clamp(7px, 0.9vw, 9px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.device-notification-status.enabled {
  color: #1b9b61;
  background: #eaf8f1;
  border-color: #cdebdc;
}

.device-notification-status.denied {
  color: #e53935;
  background: #fff0f0;
  border-color: #f3cccc;
}

.device-notification-status.warning {
  color: #ad7900;
  background: #fff8df;
  border-color: #f0df9c;
}

/* =========================================================
   PERMISSION BOX
   ========================================================= */

.notification-permission-box {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--notif-gap);
  margin-top: clamp(12px, 2vw, 18px);
  padding: clamp(10px, 2vw, 16px);
  border: 1px solid #e1e9f3;
  border-radius: var(--notif-radius);
  background: linear-gradient(
    135deg,
    #f7faff 0%,
    #fbfdff 100%
  );
}

.permission-icon {
  width: var(--notif-icon-size);
  height: var(--notif-icon-size);
  min-width: var(--notif-icon-size);
  min-height: var(--notif-icon-size);
  display: grid;
  place-items: center;
  border-radius: clamp(8px, 1vw, 12px);
  background: var(--blue-soft);
  color: var(--blue);
  font-size: clamp(12px, 1.6vw, 16px);
}

.permission-content {
  min-width: 0;
  overflow: hidden;
}

.permission-content strong {
  display: block;
  color: var(--ink);
  font-size: var(--notif-title-size);
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.permission-content span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--notif-text-size);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.notification-permission-box .primary-btn {
  min-width: 0;
  min-height: 36px;
  padding: 0 clamp(10px, 1.5vw, 15px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

/* =========================================================
   NOTIFICATION SETTINGS LIST
   ========================================================= */

.notification-settings-list {
  width: 100%;
  min-width: 0;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #e7edf4;
  border-radius: var(--notif-radius);
  background: #fff;
}

/* =========================================================
   UNIVERSAL ROW
   ========================================================= */

.notification-setting-row {
  width: 100%;
  min-width: 0;
  min-height: clamp(54px, 7vw, 66px);

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;

  gap: clamp(8px, 1.5vw, 12px);

  margin: 0;
  padding:
    clamp(9px, 1.5vw, 13px)
    clamp(10px, 1.8vw, 15px);

  border: 0;
  border-bottom: 1px solid #edf1f6;

  background: #ffffff;

  cursor: pointer;

  transition:
    background .18s ease,
    transform .18s ease;
}

.notification-setting-row:last-child {
  border-bottom: 0;
}

.notification-setting-row:hover {
  background: #fafcff;
}

/* =========================================================
   ROW ICON
   ========================================================= */

.notification-setting-icon {
  width: var(--notif-icon-size);
  height: var(--notif-icon-size);
  min-width: var(--notif-icon-size);
  min-height: var(--notif-icon-size);

  display: grid;
  place-items: center;

  border-radius: clamp(8px, 1vw, 12px);

  font-size: clamp(11px, 1.5vw, 14px);
}

/* Icon colors */

.notification-setting-icon.red {
  background: #fff0f0;
  color: #e53935;
}

.notification-setting-icon.yellow {
  background: #fff8df;
  color: #b98300;
}

.notification-setting-icon.orange {
  background: #fff0e7;
  color: #d86b17;
}

.notification-setting-icon.blue {
  background: #edf4ff;
  color: #0d6efd;
}

.notification-setting-icon.green {
  background: #eaf8f1;
  color: #1b9b61;
}

.notification-setting-icon.purple {
  background: #f2edff;
  color: #7652d9;
}

.notification-setting-icon.gold {
  background: #fff7dd;
  color: #ad7900;
}

/* =========================================================
   ROW TEXT
   ========================================================= */

.notification-setting-text {
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.notification-setting-text strong {
  display: block;
  width: 100%;
  margin: 0;
  color: var(--ink);
  font-size: clamp(9px, 1.1vw, 11px);
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.notification-setting-text span {
  display: block;
  width: 100%;
  margin-top: 3px;
  color: var(--muted);
  font-size: clamp(7px, .9vw, 9px);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* =========================================================
   UNIVERSAL SWITCH
   ========================================================= */

.notification-switch {
  appearance: none;
  -webkit-appearance: none;

  position: relative;

  width: clamp(34px, 4.5vw, 44px);
  height: clamp(19px, 2.7vw, 24px);

  min-width: clamp(34px, 4.5vw, 44px);

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 999px;

  background: #dce3ec;

  cursor: pointer;

  outline: none;

  transition:
    background .2s ease,
    box-shadow .2s ease;
}

.notification-switch::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 3px;

  width: clamp(13px, 2vw, 18px);
  height: clamp(13px, 2vw, 18px);

  border-radius: 50%;

  background: #ffffff;

  box-shadow:
    0 2px 6px rgba(0, 0, 0, .15);

  transform: translateY(-50%);

  transition:
    transform .2s ease;
}

.notification-switch:hover {
  box-shadow:
    0 0 0 3px rgba(13, 110, 253, .07);
}

.notification-switch:checked {
  background: var(--blue);
}

.notification-switch:checked::after {
  transform:
    translate(
      calc(clamp(34px, 4.5vw, 44px) - clamp(13px, 2vw, 18px) - 6px),
      -50%
    );
}

.notification-switch:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.notification-switch:focus-visible {
  box-shadow:
    0 0 0 3px rgba(13, 110, 253, .16);
}

/* =========================================================
   ACTIONS
   ========================================================= */

.device-notification-actions {
  width: 100%;
  min-width: 0;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 12px;
}

.device-notification-actions .outline-btn {
  min-height: 36px;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

#notificationSaveMessage {
  min-width: 0;
  color: #1b9b61;
  font-size: clamp(7px, .9vw, 9px);
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* =========================================================
   ENABLED BUTTON
   ========================================================= */

#enableDeviceNotifications.notification-enabled-button {
  background: #1b9b61 !important;
  border-color: #1b9b61 !important;
  color: #ffffff !important;
}

#enableDeviceNotifications.notification-enabled-button:hover {
  background: #1b9b61 !important;
  border-color: #1b9b61 !important;
  transform: none;
}

#enableDeviceNotifications.notification-enabled-button i {
  color: #ffffff !important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .notification-permission-box {
    grid-template-columns:
      auto
      minmax(0, 1fr);
  }

  .notification-permission-box .primary-btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .device-notification-settings
  .settings-card-head {
    flex-direction: column;
    align-items: stretch;
  }

  .device-notification-status {
    align-self: flex-start;
  }

  .notification-permission-box {
    grid-template-columns:
      auto
      minmax(0, 1fr);
    align-items: start;
  }

  .notification-permission-box .primary-btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .device-notification-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .device-notification-actions .outline-btn {
    width: 100%;
  }

  #notificationSaveMessage {
    text-align: center;
  }
}

/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 480px) {

  .device-notification-settings {
    margin-top: 12px;
  }

  .device-notification-settings
  .settings-card-head h3 {
    font-size: 14px;
  }

  .device-notification-settings
  .settings-card-head p {
    font-size: 8px;
  }

  .device-notification-status {
    min-height: 27px;
    padding: 6px 9px;
  }

  .notification-permission-box {
    padding: 10px;
    gap: 9px;
    border-radius: 12px;
  }

  .permission-icon {
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
  }

  .permission-content strong {
    font-size: 9px;
  }

  .permission-content span {
    font-size: 7px;
  }

  .notification-setting-row {
    min-height: 55px;
    padding: 9px 10px;
    gap: 8px;
  }

  .notification-setting-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  .notification-setting-text strong {
    font-size: 8.5px;
  }

  .notification-setting-text span {
    font-size: 7px;
  }

  .notification-switch {
    width: 36px;
    min-width: 36px;
    height: 20px;
  }

  .notification-switch::after {
    width: 14px;
    height: 14px;
    left: 3px;
  }

  .notification-switch:checked::after {
    transform:
      translate(16px, -50%);
  }
}

/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media (max-width: 360px) {

  .device-notification-settings
  .settings-card-head h3 {
    font-size: 13px;
  }

  .notification-permission-box {
    padding: 9px;
  }

  .permission-content strong {
    font-size: 8.5px;
  }

  .permission-content span {
    font-size: 7px;
  }

  .notification-setting-row {
    min-height: 52px;
    padding: 8px;
    gap: 7px;
  }

  .notification-setting-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    font-size: 10px;
  }

  .notification-setting-text strong {
    font-size: 8px;
  }

  .notification-setting-text span {
    font-size: 6.5px;
  }

  .notification-switch {
    width: 34px;
    min-width: 34px;
    height: 19px;
  }

  .notification-switch::after {
    width: 13px;
    height: 13px;
  }

  .notification-switch:checked::after {
    transform:
      translate(15px, -50%);
  }
}

/* =========================================================
   EXTRA-WIDE / LARGE SCREENS
   ========================================================= */

@media (min-width: 1400px) {

  .device-notification-settings {
    max-width: 100%;
  }

  .notification-settings-list {
    max-width: 100%;
  }

  .notification-setting-row {
    min-height: 66px;
  }
}

/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  .notification-setting-row {
    min-height: 58px;
  }

  .notification-switch {
    min-width: 40px;
    min-height: 22px;
  }

  .notification-permission-box .primary-btn,
  .device-notification-actions .outline-btn {
    min-height: 40px;
  }
}

/* =========================================================
   LANDSCAPE MOBILE
   ========================================================= */

@media (max-width: 900px) and (orientation: landscape) {

  .notification-permission-box {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;
  }

  .notification-permission-box .primary-btn {
    grid-column: auto;
    width: auto;
  }

  .device-notification-actions {
    flex-direction: row;
    align-items: center;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .notification-setting-row,
  .notification-switch,
  .notification-switch::after {
    transition: none;
  }
}

.scan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 46px;
  padding: 6px 16px;

  border: 1.5px solid #1769ff;
  border-radius: 14px;

  background: linear-gradient(135deg, #1769ff, #2f7dff);
  color: #ffffff;

  font-size: 14px;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  box-shadow: 0 8px 20px rgba(23, 105, 255, 0.25);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.scan-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;

  font-size: 15px;
}

.scan-text {
  color: #ffffff;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .scan-btn:hover {
    background: linear-gradient(135deg, #0d5bea, #1769ff);
    box-shadow: 0 12px 26px rgba(23, 105, 255, 0.32);
    transform: translateY(-2px);
  }
}

.scan-btn:active {
  transform: scale(0.97);
}

.scan-btn:focus-visible {
  outline: 3px solid rgba(23, 105, 255, 0.25);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .scan-btn {
    width: 100%;
    min-height: 48px;
    border-radius: 13px;
  }

  .scan-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
}

@media (max-width: 380px) {
  .scan-btn {
    font-size: 13px;
  }

  .scan-icon {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }
}

.scan-btn:hover .scan-icon i {
  animation: barcodePulse 0.8s ease-in-out infinite;
}

@keyframes barcodePulse {
  0%, 100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(1.15);
  }
}

/* =========================================
   STORE SWITCHER
   ========================================= */

.store-switcher-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
}

.store-switcher {
  width: 100%;
  min-height: 42px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 7px 12px;

  border: 0;
  border-radius: 10px;

  background: transparent;
  color: #4b5563;

  font-size: 11px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.06em;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.store-switcher:hover {
  background: rgba(23, 105, 255, 0.07);
  color: #1769ff;
}

.store-switcher:focus-visible {
  outline: 2px solid rgba(23, 105, 255, 0.35);
  outline-offset: 2px;
}

.store-switcher-left {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 9px;
}

.store-switcher-left > i {
  width: 20px;
  flex: 0 0 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #1769ff;
  font-size: 13px;
}

#storeNameSidebar {
  min-width: 0;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  text-align: left;
}

.store-switcher .chevron {
  flex: 0 0 auto;
  font-size: 10px;

  transition: transform 0.2s ease;
}

.store-switcher[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}


/* =========================================
   STORE DROPDOWN
   ========================================= */

.sidebar-store-menu {
  width: 100%;
  margin-top: 4px;
  padding: 6px;

  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;

  background: #ffffff;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.08);
}

.sidebar-store-menu[hidden] {
  display: none;
}

.sidebar-store-menu button {
  width: 100%;

  display: flex;
  align-items: center;
  gap: 9px;

  padding: 9px 10px;

  border: 0;
  border-radius: 8px;

  background: transparent;
  color: #4b5563;

  font-size: 13px;
  font-weight: 600;

  text-align: left;
  cursor: pointer;
}

.sidebar-store-menu button:hover {
  background: #f1f6ff;
  color: #1769ff;
}

.sidebar-store-menu button i {
  width: 18px;
  text-align: center;
}


/* =========================================
   SIDEBAR NAVIGATION
   ========================================= */

.sidebar-nav {
  width: 100%;

  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  width: 100%;
  min-width: 0;
  min-height: 44px;

  display: flex;
  align-items: center;
  gap: 11px;

  padding: 9px 12px;

  border: 0;
  border-radius: 11px;

  background: transparent;
  color: #667085;

  font-size: 14px;
  font-weight: 600;

  text-align: left;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}

.nav-item i {
  width: 20px;
  min-width: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 15px;
}

.nav-item span:not(.nav-badge) {
  min-width: 0;
  flex: 1;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item:hover {
  background: #f1f6ff;
  color: #1769ff;
}

.nav-item.active {
  background: linear-gradient(
    135deg,
    #1769ff,
    #2e7cff
  );

  color: #ffffff;

  box-shadow:
    0 7px 18px rgba(23, 105, 255, 0.20);
}

.nav-item:active {
  transform: scale(0.98);
}

.nav-item:focus-visible {
  outline: 2px solid rgba(23, 105, 255, 0.35);
  outline-offset: 2px;
}


/* =========================================
   NAV BADGE
   ========================================= */

.nav-badge {
  min-width: 21px;
  height: 21px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 6px;

  border-radius: 999px;

  background: #ef4444;
  color: #ffffff;

  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.nav-item.active .nav-badge {
  background: rgba(255, 255, 255, 0.22);
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

  .store-switcher {
    min-height: 44px;
    padding: 8px 11px;
  }

  .nav-item {
    min-height: 46px;
    padding: 10px 12px;
  }

  .nav-item i {
    font-size: 16px;
  }

  .nav-item span:not(.nav-badge) {
    font-size: 14px;
  }

  .sidebar-store-menu button {
    min-height: 42px;
  }
}


/* =========================================
   SMALL PHONES
   ========================================= */

@media (max-width: 380px) {

  .store-switcher {
    font-size: 10px;
  }

  .nav-item {
    min-height: 44px;
    padding: 9px 10px;
  }

  .nav-item {
    font-size: 13px;
  }
}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {

  .store-switcher,
  .store-switcher .chevron,
  .nav-item {
    transition: none;
  }
}

/* =========================================
   SIDEBAR GROUPS
   ========================================= */

.nav-group {
  width: 100%;
  margin-bottom: 8px;
}

.nav-group-title {
  width: 100%;
  min-height: 38px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 8px 12px;

  border: 0;
  border-radius: 9px;

  background: transparent;
  color: #98a2b3;

  font-size: 11px;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.08em;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.nav-group-title:hover {
  background: rgba(23, 105, 255, 0.06);
  color: #1769ff;
}

.nav-group-title-left {
  display: flex;
  align-items: center;
  gap: 9px;
}

.nav-group-title-left i {
  width: 18px;
  text-align: center;
  font-size: 12px;
}

.nav-group-chevron {
  font-size: 9px;
  transition: transform 0.2s ease;
}

.nav-group-title[aria-expanded="false"] .nav-group-chevron {
  transform: rotate(-90deg);
}

.nav-submenu {
  display: flex;
  flex-direction: column;
  gap: 4px;

  margin-top: 3px;

  overflow: hidden;
  max-height: 600px;

  transition:
    max-height 0.25s ease,
    opacity 0.2s ease;
}

.nav-group-title[aria-expanded="false"] + .nav-submenu {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}


/* =========================================
   NAV ITEMS
   ========================================= */

.nav-item {
  width: 100%;
  min-height: 44px;

  display: flex;
  align-items: center;
  gap: 11px;

  padding: 9px 12px 9px 25px;

  border: 0;
  border-radius: 11px;

  background: transparent;
  color: #667085;

  font-size: 14px;
  font-weight: 600;

  text-align: left;
  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}

.nav-item i {
  width: 20px;
  min-width: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 15px;
}

.nav-item span:not(.nav-badge) {
  min-width: 0;
  flex: 1;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item:hover {
  background: #f1f6ff;
  color: #1769ff;
}

.nav-item.active {
  background: linear-gradient(
    135deg,
    #1769ff,
    #2f7dff
  );

  color: #fff;

  box-shadow: 0 7px 18px rgba(23, 105, 255, 0.20);
}

.nav-item:active {
  transform: scale(0.98);
}


/* =========================================
   BADGE
   ========================================= */

.nav-badge {
  min-width: 21px;
  height: 21px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 6px;

  border-radius: 999px;

  background: #ef4444;
  color: #fff;

  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.nav-item.active .nav-badge {
  background: rgba(255, 255, 255, 0.22);
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

  .nav-group-title {
    min-height: 40px;
    padding: 8px 11px;
  }

  .nav-item {
    min-height: 46px;
    padding: 10px 11px 10px 23px;
  }
}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  .nav-group-title,
  .nav-group-chevron,
  .nav-submenu,
  .nav-item {
    transition: none;
  }
}

/* SALES & FINANCE GROUP TITLES */
.nav-group-title {
  color: #e53935;
}

.nav-group-title:hover {
  background: rgba(229, 57, 53, 0.08);
  color: #d32f2f;
}

.nav-group-title-left i {
  color: #e53935;
}

.nav-group-chevron {
  color: #e53935;
}

.nav-group-title {
  color: #ef3340;
}

.nav-group-title-left i {
  color: #ef3340;
}

.nav-group-title:hover {
  color: #c62828;
  background: rgba(239, 51, 64, 0.08);
}

.nav-group-title:hover .nav-group-title-left i,
.nav-group-title:hover .nav-group-chevron {
  color: #c62828;
}

/* =========================================
   STORE MODULES
   ========================================= */

.store-toolbar,
.marketplace-toolbar,
.notes-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.store-search {
  position: relative;
  flex: 1 1 240px;
}

.store-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #98a2b3;
  pointer-events: none;
}

.store-search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px 10px 40px;

  border: 1px solid #dfe5ee;
  border-radius: 12px;

  background: #fff;
  color: #152033;

  outline: none;
}

.store-search input:focus {
  border-color: #1769ff;
  box-shadow: 0 0 0 3px rgba(23,105,255,.10);
}

.store-toolbar select,
.marketplace-toolbar select,
.notes-toolbar select {
  min-height: 44px;
  padding: 8px 14px;

  border: 1px solid #dfe5ee;
  border-radius: 12px;

  background: #fff;
  color: #344054;

  font-size: 13px;
  font-weight: 600;
  outline: none;
}

.store-toolbar select:focus,
.marketplace-toolbar select:focus,
.notes-toolbar select:focus {
  border-color: #1769ff;
}


/* =========================================
   SUPPLIER
   ========================================= */

.supplier-preferred {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  color: #f5b301;
  font-size: 12px;
  font-weight: 700;
}

.supplier-status {
  display: inline-flex;
  padding: 5px 9px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 700;
}

.supplier-status.active {
  background: #eaf8ef;
  color: #18864b;
}

.supplier-status.balance {
  background: #fff3e8;
  color: #c46b12;
}

.supplier-actions {
  display: flex;
  gap: 6px;
}

.supplier-actions button {
  width: 34px;
  height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 9px;

  background: #f3f6fa;
  color: #526071;

  cursor: pointer;
}

.supplier-actions button:hover {
  background: #edf4ff;
  color: #1769ff;
}


/* =========================================
   NOTES
   ========================================= */

.notes-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.note-card {
  position: relative;

  padding: 18px;

  border: 1px solid #e4e9f0;
  border-radius: 18px;

  background: #fff;

  box-shadow:
    0 8px 25px rgba(16,24,40,.06);
}

.note-card.pinned {
  border-color: rgba(23,105,255,.30);
}

.note-card.completed {
  opacity: .65;
}

.note-pin {
  position: absolute;
  right: 14px;
  top: 14px;

  color: #1769ff;
}

.note-type {
  display: inline-flex;

  padding: 5px 9px;

  border-radius: 999px;

  background: #f1f5ff;
  color: #1769ff;

  font-size: 10px;
  font-weight: 800;

  text-transform: uppercase;
}

.note-title {
  margin: 12px 0 7px;

  color: #152033;
  font-size: 16px;
  font-weight: 800;
}

.note-body {
  color: #667085;
  font-size: 13px;
  line-height: 1.6;
}

.note-date {
  margin-top: 12px;

  color: #98a2b3;
  font-size: 11px;
}

.note-actions {
  display: flex;
  gap: 6px;
  margin-top: 16px;
}

.note-actions button {
  min-height: 34px;
  padding: 7px 10px;

  border: 0;
  border-radius: 8px;

  background: #f4f6f8;
  color: #526071;

  cursor: pointer;
}

.note-actions button:hover {
  background: #edf4ff;
  color: #1769ff;
}


/* =========================================
   MARKETPLACE
   ========================================= */

.marketplace-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.market-card {
  overflow: hidden;

  border: 1px solid #e3e8ef;
  border-radius: 18px;

  background: #fff;

  box-shadow:
    0 8px 25px rgba(16,24,40,.06);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.market-card:hover {
  transform: translateY(-4px);

  box-shadow:
    0 14px 35px rgba(16,24,40,.10);
}

.market-image {
  height: 150px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      135deg,
      #edf4ff,
      #fff
    );

  color: #1769ff;
  font-size: 42px;
}

.market-content {
  padding: 16px;
}

.market-category {
  color: #1769ff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.market-name {
  margin-top: 6px;

  color: #152033;
  font-size: 15px;
  font-weight: 800;
}

.market-meta {
  margin-top: 5px;

  color: #8b95a5;
  font-size: 12px;
}

.market-price {
  margin-top: 14px;

  color: #152033;
  font-size: 20px;
  font-weight: 800;
}

.market-margin {
  margin-top: 4px;

  color: #18864b;
  font-size: 11px;
  font-weight: 700;
}

.market-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.market-actions button {
  flex: 1;
  min-height: 40px;

  border-radius: 10px;

  cursor: pointer;
  font-weight: 700;
}

.market-add {
  border: 0;
  background: #1769ff;
  color: #fff;
}

.market-wishlist {
  max-width: 42px;

  border: 1px solid #dfe5ee;
  background: #fff;
  color: #667085;
}

.market-wishlist.active {
  color: #e53935;
  border-color: #ffcaca;
  background: #fff5f5;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

  .store-toolbar,
  .marketplace-toolbar,
  .notes-toolbar {
    align-items: stretch;
  }

  .store-search,
  .store-toolbar select,
  .marketplace-toolbar select,
  .notes-toolbar select {
    width: 100%;
    flex-basis: 100%;
  }

  .notes-grid {
    grid-template-columns: 1fr;
  }

  .marketplace-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .market-image {
    height: 120px;
  }
}

@media (max-width: 480px) {

  .marketplace-grid {
    grid-template-columns: 1fr;
  }

  .market-card {
    border-radius: 15px;
  }
}

/* =========================================
   CENTER EMPTY NOTES STATE
   ========================================= */

#notesGrid {
  min-height: 420px;

  display: flex;
  align-items: center;
  justify-content: center;
}

#notesGrid > .empty-state {
  width: 100%;
  min-height: 320px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  padding: 40px 20px;
}

#notesGrid > .empty-state p {
  margin: 0 0 8px;

  font-size: 18px;
  font-weight: 800;

  color: #152033;
}

#notesGrid > .empty-state span {
  max-width: 320px;

  font-size: 13px;
  line-height: 1.6;

  color: #98a2b3;
}

@media (max-width: 600px) {
  #notesGrid {
    min-height: 360px;
  }

  #notesGrid > .empty-state {
    min-height: 280px;
    padding: 30px 16px;
  }
}

/* ================================
   TOOLS SIDEBAR
   ================================ */

.nav-group-title[data-nav-group="tools"] {
    color: #2563eb;
}

.nav-group-title[data-nav-group="tools"]:hover {
    background: rgba(37, 99, 235, 0.08);
}

.nav-group-title[data-nav-group="tools"] .nav-group-title-left i {
    color: #2563eb;
}

/* Tools submenu */
#toolsMenu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Calculator item */
#toolsMenu .nav-item {
    position: relative;

    display: flex;
    align-items: center;
    gap: 12px;

    width: 100%;
    min-height: 42px;

    padding: 10px 14px 10px 42px;

    border: 0;
    border-radius: 12px;

    background: transparent;
    color: #667085;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

#toolsMenu .nav-item i {
    width: 18px;

    color: #667085;

    font-size: 15px;

    transition: color 0.2s ease;
}

#toolsMenu .nav-item:hover {
    background: #f2f6ff;
    color: #2563eb;
}

#toolsMenu .nav-item:hover i {
    color: #2563eb;
}

#toolsMenu .nav-item.active {
    background: #eaf2ff;
    color: #2563eb;
}

#toolsMenu .nav-item.active i {
    color: #2563eb;
}

/* Chevron */
.nav-group-title[data-nav-group="tools"]
.nav-group-chevron {
    transition: transform 0.25s ease;
}

.nav-group-title[data-nav-group="tools"][aria-expanded="false"]
.nav-group-chevron {
    transform: rotate(-90deg);
}

/* Collapse submenu */
.nav-group-title[data-nav-group="tools"][aria-expanded="false"]
+ #toolsMenu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    margin-top: 0;
}

#toolsMenu {
    max-height: 200px;
    opacity: 1;
    visibility: visible;

    overflow: hidden;

    transition:
        max-height 0.25s ease,
        opacity 0.2s ease;
}

/* =========================================================
   ADVANCED CALCULATOR
   ========================================================= */

.advanced-calculator {
  display: grid;
  grid-template-columns: minmax(300px, 430px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}


/* =========================================================
   MAIN CALCULATOR
   ========================================================= */

.calculator-panel {
  background: #ffffff;
  border: 1px solid #e7eaf0;
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.calculator-display {
  min-height: 125px;
  padding: 20px;
  margin-bottom: 12px;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;

  border-radius: 18px;
  background: #111827;
  color: #ffffff;

  overflow: hidden;
}

.calc-expression {
  width: 100%;
  min-height: 20px;

  text-align: right;

  color: #94a3b8;
  font-size: 13px;
}

.calc-display-value {
  width: 100%;
  margin-top: 5px;

  text-align: right;

  color: #ffffff;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 700;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calculator-memory {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  margin-bottom: 10px;
}

.calculator-memory button {
  height: 38px;

  border: none;
  border-radius: 10px;

  background: #f1f5f9;
  color: #475467;

  font-size: 11px;
  font-weight: 800;

  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.calculator-memory button:hover {
  background: #e2e8f0;
}

.calculator-memory button:active {
  transform: scale(.96);
}

.calculator-keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}

.calculator-keypad button {
  min-width: 0;
  height: 58px;

  border: none;
  border-radius: 15px;

  background: #f8fafc;
  color: #152033;

  font-size: 18px;
  font-weight: 800;

  cursor: pointer;

  transition:
    background .15s ease,
    transform .15s ease;
}

.calculator-keypad button:hover {
  background: #edf2f7;
}

.calculator-keypad button:active {
  transform: scale(.96);
}

.calculator-keypad .calc-operator {
  background: #eff6ff;
  color: #2563eb;
}

.calculator-keypad .calc-danger {
  background: #fef2f2;
  color: #dc2626;
}

.calculator-keypad .calc-equals {
  grid-column: span 4;

  background: linear-gradient(
    135deg,
    #2563eb,
    #1d4ed8
  );

  color: #ffffff;
}

.calculator-keypad .calc-zero {
  grid-column: span 1;
}


/* =========================================================
   BUSINESS TOOLS
   ========================================================= */

.calculator-business {
  display: grid;
  gap: 15px;

  background: #ffffff;

  border: 1px solid #e7eaf0;
  border-radius: 24px;

  padding: 20px;

  box-shadow:
    0 10px 30px rgba(15, 23, 42, 0.06);
}

.calculator-business-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.calculator-business-icon {
  width: 46px;
  height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;

  background: #eff6ff;
  color: #2563eb;

  font-size: 20px;
}

.calculator-business-header h2 {
  margin: 0;

  color: #152033;
  font-size: 18px;
}

.calculator-business-header p {
  margin: 4px 0 0;

  color: #8b95a7;
  font-size: 12px;
}

.business-tool-card {
  padding: 17px;

  border: 1px solid #e7eaf0;
  border-radius: 17px;

  background: #ffffff;
}

.business-tool-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;

  margin: 0 0 14px;

  color: #152033;
  font-size: 14px;
}

.business-tool-card h3 i {
  color: #2563eb;
}

.business-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;

  margin-bottom: 12px;
}

.business-grid label {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.business-grid input {
  width: 100%;
  height: 42px;

  box-sizing: border-box;

  margin-top: 6px;
  padding: 0 11px;

  border: 1px solid #dfe3e8;
  border-radius: 11px;

  outline: none;

  color: #152033;
  background: #ffffff;
}

.business-grid input:focus {
  border-color: #2563eb;

  box-shadow:
    0 0 0 3px rgba(37, 99, 235, .10);
}

.business-btn {
  width: 100%;
}

.business-result {
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-top: 12px;
  padding: 12px 14px;

  border-radius: 12px;

  background: #f8fafc;
}

.business-result span {
  color: #64748b;

  font-size: 12px;
  font-weight: 700;
}

.business-result strong {
  color: #152033;

  font-size: 18px;
  font-weight: 900;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 950px) {

  .advanced-calculator {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 600px) {

  .calculator-panel,
  .calculator-business {
    padding: 15px;
    border-radius: 19px;
  }

  .calculator-keypad button {
    height: 54px;
  }

  .business-grid {
    grid-template-columns: 1fr;
  }

}

/* =========================================================
   MYNEGOSYO — STYLISH FIGMA-STYLE BOTTOM BAR
   ========================================================= */

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);

  width: min(94%, 580px);
  height: 78px;

  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;

  padding: 7px 9px;

  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);

  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 26px;

  box-shadow:
    0 20px 45px rgba(15, 23, 42, 0.12),
    0 5px 14px rgba(15, 23, 42, 0.05);

  z-index: 9999;

  transition:
    width .25s ease,
    height .25s ease,
    bottom .25s ease;
}


/* =========================================================
   NAV ITEM
   ========================================================= */

.bottom-item {
  position: relative;

  width: 100%;
  height: 62px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;

  border: 0;
  outline: 0;

  border-radius: 18px;

  background: transparent;

  color: #98a2b3;

  font-family: inherit;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;

  transition:
    background .22s ease,
    color .22s ease,
    transform .22s ease;
}


/* Icon */

.bottom-item i {
  font-size: 18px;
  line-height: 1;

  transition:
    transform .22s ease,
    font-size .22s ease;
}


/* Label */

.bottom-item span {
  font-size: 10px;
  line-height: 1;

  font-weight: 700;
  letter-spacing: .1px;
}

.bottom-item:hover {
  color: #344054;
  background: rgba(15, 23, 42, .045);
}

.bottom-item:hover i {
  transform: translateY(-1px) scale(1.05);
}


/* =========================================================
   ACTIVE ITEM
   ========================================================= */

.bottom-item.active {
  color: #2563eb;
  background: rgba(37, 99, 235, .09);
}

.bottom-item.active::before {
  content: "";

  position: absolute;
  top: 5px;
  left: 50%;

  width: 24px;
  height: 3px;

  transform: translateX(-50%);

  border-radius: 999px;

  background: #2563eb;
}

.bottom-item.active i {
  transform: translateY(-1px);
}


/* =========================================================
   CENTER SALE BUTTON
   ========================================================= */

.bottom-item.center {
  height: 72px;

  background: transparent;

  overflow: visible;

  color: #152033;
}


/* Floating circle / square */

.bottom-item.center > span {
  position: relative;

  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: -12px;

  border-radius: 19px;

  background: linear-gradient(
    145deg,
    #2563eb 0%,
    #1d4ed8 100%
  );

  color: #ffffff;

  box-shadow:
    0 12px 26px rgba(37, 99, 235, .28),
    0 3px 7px rgba(37, 99, 235, .14),
    inset 0 1px 0 rgba(255,255,255,.25);

  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

.bottom-item.center > span::after {
  content: "";

  position: absolute;
  inset: -5px;

  border-radius: 23px;

  border: 1px solid rgba(37, 99, 235, .10);

  pointer-events: none;
}

.bottom-item.center > span i {
  font-size: 21px;
  color: #ffffff;

  transform: none;
}


/* Sale label */

.bottom-item.center small {
  position: absolute;

  bottom: 2px;

  color: #475467;

  font-size: 10px;
  font-weight: 800;

  line-height: 1;
}


/* Hover */

.bottom-item.center:hover {
  background: transparent;
  color: #475467;
}

.bottom-item.center:hover > span {
  transform: translateY(-3px) scale(1.045);

  box-shadow:
    0 16px 32px rgba(37, 99, 235, .34),
    0 5px 10px rgba(37, 99, 235, .15),
    inset 0 1px 0 rgba(255,255,255,.25);
}


/* Press */

.bottom-item.center:active > span {
  transform: translateY(0) scale(.96);
}


/* =========================================================
   ITEM RIPPLE / FOCUS
   ========================================================= */

.bottom-item:focus-visible {
  box-shadow:
    inset 0 0 0 2px rgba(37, 99, 235, .25);
}

.bottom-item:not(.center):active {
  transform: scale(.96);
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 768px) {

  .bottom-nav {
    width: calc(100% - 24px);
    bottom: 12px;

    height: 74px;

    border-radius: 24px;
  }

  .bottom-item {
    height: 60px;
  }

  .bottom-item i {
    font-size: 18px;
  }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .bottom-nav {
    width: calc(100% - 18px);
    height: 72px;

    bottom: 9px;

    padding: 6px;

    border-radius: 23px;

    box-shadow:
      0 16px 38px rgba(15, 23, 42, .13),
      0 4px 12px rgba(15, 23, 42, .05);
  }

  .bottom-item {
    height: 58px;
    gap: 4px;

    border-radius: 16px;
  }

  .bottom-item i {
    font-size: 17px;
  }

  .bottom-item span {
    font-size: 9px;
  }

  .bottom-item.active::before {
    width: 20px;
    height: 2.5px;
  }

  .bottom-item.center {
    height: 66px;
  }

  .bottom-item.center > span {
    width: 49px;
    height: 49px;

    margin-top: -11px;

    border-radius: 17px;
  }

  .bottom-item.center > span::after {
    border-radius: 21px;
  }

  .bottom-item.center > span i {
    font-size: 19px;
  }

  .bottom-item.center small {
    bottom: 0;

    font-size: 9px;
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {

  .bottom-nav {
    width: calc(100% - 12px);

    height: 68px;

    bottom: 6px;

    padding: 5px;

    border-radius: 21px;
  }

  .bottom-item {
    height: 55px;
    gap: 3px;
  }

  .bottom-item i {
    font-size: 16px;
  }

  .bottom-item span,
  .bottom-item.center small {
    font-size: 8px;
  }

  .bottom-item.center {
    height: 62px;
  }

  .bottom-item.center > span {
    width: 45px;
    height: 45px;

    margin-top: -10px;

    border-radius: 15px;
  }

  .bottom-item.center > span::after {
    border-radius: 19px;
  }

  .bottom-item.center > span i {
    font-size: 18px;
  }

}


/* =========================================================
   SAFE AREA — iPHONE / MODERN PHONES
   ========================================================= */

@supports (padding-bottom: env(safe-area-inset-bottom)) {

  .bottom-nav {
    bottom: calc(
      9px + env(safe-area-inset-bottom)
    );
  }

}


/* =========================================================
   OPTIONAL: KEEP CONTENT ABOVE FLOATING BAR
   ========================================================= */

body {
  padding-bottom: 105px;
}

@media (max-width: 600px) {

  body {
    padding-bottom: 92px;
  }

}

/* =========================================================
   SUPERDOG — ROPE INCLUDED IN PNG
   ========================================================= */

.superdog-float {
    position: fixed;

    top: -8px;
    right: 18px;

    width: 150px;
    height: auto;

    z-index: 9000;

    pointer-events: none;

    animation: superdog-swing 4s ease-in-out infinite;
}

.superdog-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    pointer-events: auto;
    cursor: pointer;

    user-select: none;
    -webkit-user-drag: none;

    filter:
        drop-shadow(
            0 10px 15px rgba(15, 23, 42, .18)
        );

    transform-origin: top center;

    transition:
        transform .25s ease,
        filter .25s ease;
}


/* Gentle hanging movement */
@keyframes superdog-swing {

    0% {
        transform:
            rotate(-2deg)
            translateY(0);
    }

    25% {
        transform:
            rotate(2deg)
            translateY(5px);
    }

    50% {
        transform:
            rotate(-1deg)
            translateY(2px);
    }

    75% {
        transform:
            rotate(2deg)
            translateY(5px);
    }

    100% {
        transform:
            rotate(-2deg)
            translateY(0);
    }
}


/* Hover */
.superdog-image:hover {
    transform:
        scale(1.05)
        rotate(2deg);

    filter:
        drop-shadow(
            0 15px 22px rgba(37, 99, 235, .25)
        );
}


/* Click animation */
.superdog-image.superdog-bounce {
    animation:
        superdog-bounce .55s ease;
}

@keyframes superdog-bounce {

    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.1) rotate(-4deg);
    }

    60% {
        transform: scale(1.06) rotate(4deg);
    }

    100% {
        transform: scale(1);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {

    .superdog-float {
        top: -5px;
        right: 10px;
        width: 120px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .superdog-float {
        top: -3px;
        right: 5px;
        width: 95px;
    }

}

/* =========================================================
   SUPERDOG — CENTER OF DEVICE
   ========================================================= */

.superdog-float {
    position: fixed;

    top: -8px;
    left: 50%;

    width: 150px;
    height: auto;

    transform: translateX(-50%);

    z-index: 9000;

    pointer-events: none;

    animation: superdog-swing 4s ease-in-out infinite;
}

.superdog-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    pointer-events: auto;
    cursor: pointer;

    user-select: none;
    -webkit-user-drag: none;

    filter:
        drop-shadow(
            0 10px 15px rgba(15, 23, 42, .18)
        );

    transform-origin: top center;

    transition:
        transform .25s ease,
        filter .25s ease;
}


/* =========================================================
   HANGING ANIMATION
   ========================================================= */

@keyframes superdog-swing {

    0% {
        transform:
            translateX(-50%)
            rotate(-2deg)
            translateY(0);
    }

    25% {
        transform:
            translateX(-50%)
            rotate(2deg)
            translateY(5px);
    }

    50% {
        transform:
            translateX(-50%)
            rotate(-1deg)
            translateY(2px);
    }

    75% {
        transform:
            translateX(-50%)
            rotate(2deg)
            translateY(5px);
    }

    100% {
        transform:
            translateX(-50%)
            rotate(-2deg)
            translateY(0);
    }
}


/* =========================================================
   HOVER
   ========================================================= */

.superdog-image:hover {
    transform:
        scale(1.05)
        rotate(2deg);

    filter:
        drop-shadow(
            0 15px 22px rgba(37, 99, 235, .25)
        );
}


/* =========================================================
   CLICK
   ========================================================= */

.superdog-image.superdog-bounce {
    animation:
        superdog-bounce .55s ease;
}

@keyframes superdog-bounce {

    0% {
        transform:
            scale(1);
    }

    30% {
        transform:
            scale(1.1)
            rotate(-4deg);
    }

    60% {
        transform:
            scale(1.06)
            rotate(4deg);
    }

    100% {
        transform:
            scale(1);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {

    .superdog-float {
        top: -5px;
        width: 125px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .superdog-float {
        top: -3px;
        width: 100px;
    }

}

/* =========================================================
   SUPERDOG — DRAGGABLE HANGING DOG
   ========================================================= */

.superdog-float {
    position: fixed;

    top: -8px;
    left: 50%;

    width: 150px;
    height: auto;

    z-index: 9000;

    pointer-events: none;

    transform:
        translateX(-50%);

    transform-origin:
        top center;

    animation:
        superdog-rock
        4s ease-in-out
        infinite;
}


.superdog-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    pointer-events: auto;

    cursor: grab;

    user-select: none;
    -webkit-user-drag: none;

    touch-action: none;

    filter:
        drop-shadow(
            0 10px 15px
            rgba(15, 23, 42, .18)
        );
}


/* =========================================================
   NORMAL HANGING MOTION
   ========================================================= */

@keyframes superdog-rock {

    0% {
        transform:
            translateX(-50%)
            rotate(-4deg)
            translateY(0);
    }

    25% {
        transform:
            translateX(-50%)
            rotate(4deg)
            translateY(5px);
    }

    50% {
        transform:
            translateX(-50%)
            rotate(-3deg)
            translateY(2px);
    }

    75% {
        transform:
            translateX(-50%)
            rotate(3deg)
            translateY(5px);
    }

    100% {
        transform:
            translateX(-50%)
            rotate(-4deg)
            translateY(0);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {

    .superdog-float {
        top: -5px;
        width: 125px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .superdog-float {
        top: -3px;
        width: 100px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .superdog-float {
        animation: none;
    }

}