*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
}



.header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:24px;
}

#clock{
font-size:64px;
font-weight:800;
}

#seconds{
font-size:32px;
opacity:.45;
}

.date{
font-size:20px;
font-weight:600;
color:#5d6b7a;
}

.status{
padding:12px 22px;
border-radius:999px;
background:#dff8e6;
color:#1d8b43;
font-weight:700;
}

.top-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
}

.city-switcher{
min-height:42px;
display:inline-flex;
align-items:center;
gap:8px;
padding:0 12px;
border:1px solid rgba(148,163,184,.24);
border-radius:999px;
background:#fff;
box-shadow:0 10px 24px rgba(15,23,42,.06);
color:#64748b;
font-size:12px;
font-weight:900;
}

.city-switcher span{
text-transform:uppercase;
font-size:10px;
letter-spacing:.03em;
}

.city-switcher select{
border:0;
outline:0;
background:transparent;
color:#0f172a;
font:inherit;
font-size:13px;
font-weight:950;
cursor:pointer;
}

.plan-card{
background:white;
border-radius:28px;
padding:28px;
box-shadow:0 12px 40px rgba(34,62,120,.08);
margin-bottom:24px;
}

.plan-top{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:20px;
}

.target-icon{
font-size:38px;
margin-right:16px;
}

.card-title{
font-size:18px;
color:#6a7788;
font-weight:700;
}

.plan-percent{
font-size:52px;
font-weight:800;
color:#22c55e;
}

.plan-message{
font-size:34px;
font-weight:800;
color:#ff9800;
}

.progress-bg{
height:24px;
background:#edf1f7;
border-radius:999px;
overflow:hidden;
margin:22px 0;
}

.progress-bar{
height:100%;
width:0;
border-radius:999px;
background:linear-gradient(90deg,#36a2ff,#49df8a);
transition:1s;
}

.plan-info{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
font-size:22px;
font-weight:700;
color:#455364;
}

.cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
margin-bottom:24px;
}

.kpi{
border-radius:24px;
padding:26px;
box-shadow:0 10px 25px rgba(0,0,0,.05);
transition:.25s;
}

.kpi:hover{
transform:translateY(-4px);
}

.green-card{background:#ebfff2;}
.blue-card{background:#edf6ff;}
.orange-card{background:#fff4e7;}
.purple-card{background:#f3ecff;}
.yellow-card{background:#fffce8;}
.peach-card{background:#fff1ea;}
.violet-card{background:#efe9ff;}
.pink-card{background:#ffeef4;}

.emoji{
font-size:28px;
margin-bottom:12px;
}

.kpi-value{
margin-top:10px;
font-size:52px;
font-weight:800;
}

.green{color:#14b85f;}
.blue{color:#2b8cff;}
.orange{color:#ff9800;}
.purple{color:#8a5cff;}
.violet{color:#7b57ff;}
.pink{color:#e91e63;}

.hint{
margin-top:8px;
font-size:18px;
color:#69788b;
}

.bottom{
display:grid;
grid-template-columns:2fr 1fr;
gap:24px;
}

.panel{
background:white;
padding:28px;
border-radius:28px;
box-shadow:0 12px 40px rgba(34,62,120,.08);
}

.panel-title{
font-size:28px;
font-weight:800;
margin-bottom:22px;
}

.thanks{
font-size:34px;
text-align:center;
padding:70px 0;
color:#ff4f7d;
font-weight:800;
}

.header{
  position: relative;
}

.header > div:first-child{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

.date{
  background:white;
  padding:14px 22px;
  border-radius:20px;
  box-shadow:0 8px 25px rgba(34,62,120,.08);
}

.status{
  margin-left:auto;
}

/* === GLASS UPGRADE === */

body{
  background:
    radial-gradient(circle at 15% 10%, rgba(99,179,255,.28), transparent 28%),
    radial-gradient(circle at 85% 20%, rgba(255,116,170,.20), transparent 26%),
    radial-gradient(circle at 50% 90%, rgba(91,230,165,.20), transparent 32%),
    #eef5fb;
}

.plan-card,
.kpi,
.panel,
.date{
  background: rgba(255,255,255,.58) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow:
    0 18px 45px rgba(50,80,120,.12),
    inset 0 1px 0 rgba(255,255,255,.85);
}

.kpi{
  position: relative;
  overflow: hidden;
  min-height: 150px;
}

.kpi::before,
.plan-card::before,
.panel::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
}

.plan-card,
.panel{
  position: relative;
  overflow: hidden;
}

.green-card{
  background:linear-gradient(135deg, rgba(73,223,138,.25), rgba(255,255,255,.62)) !important;
}

.blue-card{
  background:linear-gradient(135deg, rgba(54,162,255,.22), rgba(255,255,255,.62)) !important;
}

.orange-card{
  background:linear-gradient(135deg, rgba(255,169,77,.24), rgba(255,255,255,.62)) !important;
}

.purple-card,
.violet-card{
  background:linear-gradient(135deg, rgba(151,112,255,.22), rgba(255,255,255,.62)) !important;
}

.yellow-card{
  background:linear-gradient(135deg, rgba(255,222,89,.24), rgba(255,255,255,.62)) !important;
}

.peach-card{
  background:linear-gradient(135deg, rgba(255,134,91,.20), rgba(255,255,255,.62)) !important;
}

.pink-card{
  background:linear-gradient(135deg, rgba(255,84,139,.22), rgba(255,255,255,.62)) !important;
}

.kpi-value{
  font-size:58px;
  letter-spacing:-1.5px;
}

.card-title{
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.3px;
}

.emoji{
  font-size:34px;
  opacity:.9;
}

.progress-bg{
  background:rgba(226,234,244,.72);
}

.progress-bar{
  box-shadow:0 0 18px rgba(54,162,255,.28);
}


/* === REAL GLASS FIX === */

body{
  background:
    radial-gradient(circle at 8% 18%, rgba(255,75,135,.32), transparent 18%),
    radial-gradient(circle at 88% 12%, rgba(90,150,255,.28), transparent 20%),
    radial-gradient(circle at 18% 88%, rgba(70,225,155,.26), transparent 22%),
    radial-gradient(circle at 82% 82%, rgba(255,190,70,.24), transparent 20%),
    linear-gradient(135deg,#f7fbff,#eaf4ff);
}

.plan-card,
.kpi,
.panel,
.date{
  background: rgba(255,255,255,.46) !important;
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow:
    0 22px 55px rgba(31,63,103,.14),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.35);
}

.green-card,
.blue-card,
.orange-card,
.purple-card,
.violet-card,
.yellow-card,
.peach-card,
.pink-card{
  background: rgba(255,255,255,.42) !important;
}

.kpi::after,
.plan-card::after,
.panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(135deg, rgba(255,255,255,.65), transparent 35%),
    linear-gradient(315deg, rgba(255,255,255,.22), transparent 45%);
}


/* === SOFT NUMBER ANIMATION === */
.kpi-value,
.plan-percent,
.plan-info div,
#planMessage {
  transition: color .25s ease, transform .25s ease, filter .25s ease;
}

.flash-up {
  animation: flashUp .7s ease;
}

.flash-down {
  animation: flashDown .7s ease;
}

@keyframes flashUp {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.04); filter: brightness(1.18); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes flashDown {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.04); filter: brightness(.92); }
  100% { transform: scale(1); filter: brightness(1); }
}



/* === STRONG GLASS EFFECT === */

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 48, 120, .55), transparent 18%),
    radial-gradient(circle at 80% 18%, rgba(40, 140, 255, .50), transparent 20%),
    radial-gradient(circle at 25% 85%, rgba(35, 210, 130, .45), transparent 22%),
    radial-gradient(circle at 85% 85%, rgba(255, 190, 40, .45), transparent 20%);
  filter: blur(35px);
}

.plan-card,
.kpi,
.panel,
.date{
  background: rgba(255,255,255,.34) !important;
  backdrop-filter: blur(42px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(42px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow:
    0 22px 60px rgba(31,63,103,.18),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.kpi-value,
.plan-percent{
  text-shadow: 0 2px 16px rgba(255,255,255,.45);
}


/* === CLOCK ANIMATION === */
#clock, #seconds{
  display:inline-block;
  transition: transform .25s ease, opacity .25s ease;
}

.clock-tick{
  animation: clockTick .35s ease;
}

@keyframes clockTick{
  0%{ transform: translateY(8px); opacity:.35; }
  100%{ transform: translateY(0); opacity:1; }
}


/* === SCALE + CALM GLASS THEME === */

html{
  zoom: .72;
}

@media (max-width: 1400px){
  html{ zoom: .62; }
}

body{
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 16%, rgba(120,170,220,.18), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(225,150,185,.14), transparent 24%),
    radial-gradient(circle at 45% 90%, rgba(130,210,180,.14), transparent 30%),
    linear-gradient(135deg,#f7fbff,#edf4fa) !important;
  padding: 22px;
}

body::before{
  opacity: .28 !important;
  filter: blur(55px) !important;
}

.header{
  margin-bottom: 18px;
}

#clock{
  font-size: 58px;
}

#seconds{
  font-size: 24px;
}

.plan-card,
.kpi,
.panel,
.date{
  background: rgba(255,255,255,.58) !important;
  backdrop-filter: blur(22px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(130%) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow:
    0 14px 34px rgba(55,80,110,.10),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.plan-card{
  padding: 22px;
  margin-bottom: 18px;
}

.cards{
  gap: 16px;
  margin-bottom: 18px;
}

.kpi{
  min-height: 132px;
  padding: 22px;
}

.kpi-value{
  font-size: 48px;
}

.card-title{
  font-size: 14px;
}

.emoji{
  font-size: 26px;
  margin-bottom: 8px;
}

.bottom{
  gap: 18px;
}

.panel{
  padding: 22px;
}

.panel-title{
  font-size: 24px;
  margin-bottom: 16px;
}

.plan-percent{
  font-size: 46px;
}

.plan-message{
  font-size: 28px;
}

.progress-bg{
  height: 20px;
  margin: 16px 0;
}

.plan-info{
  font-size: 19px;
}

.thanks{
  padding: 35px 0 10px;
  font-size: 28px;
}


/* === REAL GLASS FINAL === */

body{
  position: relative;
  overflow-x: hidden;
  background: linear-gradient(135deg,#eef6ff,#f8fbff) !important;
}

/* цветные пятна ПОД стеклом */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 8% 24%, rgba(255,77,145,.55), transparent 18%),
    radial-gradient(circle at 88% 20%, rgba(64,154,255,.50), transparent 20%),
    radial-gradient(circle at 34% 78%, rgba(65,220,155,.45), transparent 22%),
    radial-gradient(circle at 84% 82%, rgba(255,190,58,.42), transparent 20%);
  filter: blur(38px);
}

/* убираем старый мутный слой */
body::before{
  display:none !important;
}

/* настоящее матовое стекло */
.plan-card,
.kpi,
.panel,
.date{
  background: rgba(255,255,255,.26) !important;
  backdrop-filter: blur(34px) saturate(180%) contrast(105%) !important;
  -webkit-backdrop-filter: blur(34px) saturate(180%) contrast(105%) !important;
  border: 1px solid rgba(255,255,255,.75) !important;
  box-shadow:
    0 22px 60px rgba(40,70,110,.18),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.25) !important;
}

/* блик на стекле */
.plan-card::after,
.kpi::after,
.panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.10) 35%, transparent 65%),
    linear-gradient(315deg, rgba(255,255,255,.28), transparent 45%);
  opacity:.75;
}

/* чтобы контент был выше блика */
.plan-card > *,
.kpi > *,
.panel > *{
  position:relative;
  z-index:2;
}

/* мягкие цветные пятна внутри карточек */
.green-card::before{background:radial-gradient(circle at 18% 20%, rgba(20,184,95,.24), transparent 45%) !important;}
.blue-card::before{background:radial-gradient(circle at 18% 20%, rgba(43,140,255,.24), transparent 45%) !important;}
.orange-card::before{background:radial-gradient(circle at 18% 20%, rgba(255,152,0,.23), transparent 45%) !important;}
.purple-card::before,.violet-card::before{background:radial-gradient(circle at 18% 20%, rgba(138,92,255,.23), transparent 45%) !important;}
.yellow-card::before{background:radial-gradient(circle at 18% 20%, rgba(255,204,51,.24), transparent 45%) !important;}
.peach-card::before{background:radial-gradient(circle at 18% 20%, rgba(255,115,70,.22), transparent 45%) !important;}
.pink-card::before{background:radial-gradient(circle at 18% 20%, rgba(233,30,99,.22), transparent 45%) !important;}

.kpi::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:1;
  pointer-events:none;
}

/* текст чуть контрастнее */
.card-title,
.hint{
  color:rgba(30,45,65,.72) !important;
}

.panel-title{
  color:#1b2430 !important;
}


/* === CALM GLASS FINAL OVERRIDE === */

body{
  background: linear-gradient(135deg,#f7fbff,#edf4fa) !important;
}

body::after{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-2 !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,70,130,.10), transparent 26%),
    radial-gradient(circle at 85% 20%, rgba(70,150,255,.08), transparent 24%),
    radial-gradient(circle at 35% 80%, rgba(60,210,160,.07), transparent 25%),
    radial-gradient(circle at 82% 82%, rgba(255,190,60,.08), transparent 22%) !important;
  filter:blur(70px) !important;
}

.plan-card,
.kpi,
.panel,
.date{
  background:rgba(255,255,255,.54) !important;
  backdrop-filter:blur(26px) saturate(140%) brightness(108%) !important;
  -webkit-backdrop-filter:blur(26px) saturate(140%) brightness(108%) !important;
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:
    0 18px 40px rgba(20,40,70,.10),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.green-card::before,
.blue-card::before,
.orange-card::before,
.purple-card::before,
.violet-card::before,
.yellow-card::before,
.peach-card::before,
.pink-card::before{
  opacity:.35 !important;
}


/* === UNIFIED PALETTE OVERRIDE === */

body{
  background:
    radial-gradient(circle at 15% 15%, rgba(90,150,220,.12), transparent 28%),
    radial-gradient(circle at 85% 80%, rgba(70,190,170,.10), transparent 30%),
    linear-gradient(135deg,#f6fafc,#edf4f7) !important;
}

body::after{
  display:none !important;
}

.plan-card,
.kpi,
.panel,
.date{
  background:rgba(255,255,255,.68) !important;
  border:1px solid rgba(255,255,255,.85) !important;
  box-shadow:
    0 18px 45px rgba(30,60,90,.10),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.green-card,
.blue-card,
.orange-card,
.purple-card,
.violet-card,
.yellow-card,
.peach-card,
.pink-card{
  background:rgba(255,255,255,.68) !important;
}

.green-card::before,
.blue-card::before,
.orange-card::before,
.purple-card::before,
.violet-card::before,
.yellow-card::before,
.peach-card::before,
.pink-card::before{
  display:none !important;
}

.green,
.blue,
.purple,
.violet{
  color:#2563eb !important;
}

.orange{
  color:#f59e0b !important;
}

.pink{
  color:#0f766e !important;
}

.plan-percent{
  color:#0f766e !important;
}

.plan-message{
  color:#f59e0b !important;
}

.progress-bar{
  background:linear-gradient(90deg,#2563eb,#14b8a6) !important;
}

.bar,
#hours div div div,
#topDishes div div div{
  filter:saturate(.75);
}

.card-title,
.hint{
  color:#667085 !important;
}

.kpi-value{
  text-shadow:none !important;
}

.status{
  background:#fff7df !important;
  color:#b86b00 !important;
}


.mini-title{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(100,116,139,.18);
  font-size:22px !important;
}


/* === FIT EVERYTHING ON ONE SCREEN === */

html{
  zoom:.64 !important;
}

body{
  padding:16px !important;
}

.header{
  margin-bottom:12px !important;
}

.plan-card{
  padding:16px !important;
  margin-bottom:12px !important;
}

.cards{
  gap:12px !important;
  margin-bottom:12px !important;
}

.kpi{
  min-height:112px !important;
  padding:16px !important;
}

.kpi-value{
  font-size:42px !important;
}

.bottom{
  gap:12px !important;
}

.panel{
  padding:16px !important;
  max-height:430px;
  overflow:hidden;
}

.panel-title{
  font-size:22px !important;
  margin-bottom:10px !important;
}

.thanks{
  display:none !important;
}

.mini-title{
  margin-top:10px !important;
  padding-top:10px !important;
  font-size:20px !important;
}


/* === BETTER FIT OVERRIDE === */

html{
  zoom:.70 !important;
}

.panel{
  max-height:none !important;
}

.bottom{
  grid-template-columns: 1.65fr 1fr !important;
}

#hours > div:nth-child(n+7){
  display:none !important;
}

#topDishes .thanks{
  display:none !important;
}

#topDishes > div,
#bottomDishes > div{
  padding:8px 0 !important;
}

.mini-title{
  margin-top:8px !important;
  padding-top:8px !important;
}

.panel{
  min-height:390px !important;
}


/* === COMPACT HOURS + FULL FIT === */

#hours > div:nth-child(n+7){
  display:grid !important;
}

#hours > div{
  margin-bottom:8px !important;
}

#hours > div:first-child{
  margin-bottom:10px !important;
  padding:10px 14px !important;
}

#hours div[style*="height:22px"]{
  height:14px !important;
}

#hours div[style*="font-size:13px"]{
  font-size:11px !important;
  margin-top:2px !important;
}

.bottom{
  align-items:stretch !important;
}

.panel{
  min-height:0 !important;
  height:520px !important;
  overflow:hidden !important;
}

#topDishes > div,
#bottomDishes > div{
  padding:6px 0 !important;
}


/* === TOP + BOTTOM TWO COLUMNS === */

.bottom{
  grid-template-columns: 1.45fr 1.2fr !important;
}

.bottom .panel:nth-child(2){
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.bottom .panel:nth-child(2) > .panel-title:first-child{
  grid-column:1;
}

#topDishes{
  grid-column:1;
}

.mini-title{
  grid-column:2;
  grid-row:1;
  margin-top:0 !important;
  padding-top:0 !important;
  border-top:0 !important;
}

#bottomDishes{
  grid-column:2;
  grid-row:2;
}

#topDishes > div,
#bottomDishes > div{
  padding:8px 0 !important;
}

#bottomDishes div[style*="grid-template-columns:56px"]{
  grid-template-columns:46px 1fr auto !important;
}


/* === SALES REPORT PAGE === */

.report-tabs{
  display:flex;
  gap:12px;
  margin:18px 0;
  flex-wrap:wrap;
}

.report-tabs button{
  border:0;
  padding:14px 22px;
  border-radius:18px;
  background:rgba(255,255,255,.75);
  font-size:18px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(30,60,90,.08);
}

.report-date{
  border:0;
  padding:14px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.75);
  font-size:18px;
  font-weight:800;
  color:#1b2430;
  box-shadow:0 8px 22px rgba(30,60,90,.08);
}

.sales-row{
  display:grid;
  grid-template-columns:70px 1fr 120px 150px 150px 100px;
  gap:16px;
  align-items:center;
  padding:16px 0;
  border-bottom:1px solid rgba(100,116,139,.16);
}

.sales-rank{
  font-size:30px;
  font-weight:950;
  color:#64748b;
}

.sales-name{
  font-size:22px;
  font-weight:900;
}

.sales-num{
  font-size:20px;
  font-weight:850;
  text-align:right;
  color:#0f766e;
}

.sales-page{
  min-height:780px;
}














/* ================= APP MENU ================= */

.menu-btn{
  position:fixed;
  top:24px;
  left:24px;
  width:72px;
  height:72px;
  border:0;
  border-radius:22px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  box-shadow:0 20px 55px rgba(15,23,42,.14);
  font-size:30px;
  z-index:4000;
  cursor:pointer;
}

.side-menu{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  width:330px;
  min-height:100vh;
  padding:118px 28px 30px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(34px) saturate(170%);
  -webkit-backdrop-filter:blur(34px) saturate(170%);
  box-shadow:26px 0 70px rgba(15,23,42,.16);
  transform:translateX(-105%);
  transition:transform .32s cubic-bezier(.2,.9,.2,1);
  z-index:3900;
  display:flex;
  flex-direction:column;
}

.side-menu.open{
  transform:translateX(0);
}

.menu-close{
  position:absolute;
  top:26px;
  left:30px;
  width:62px;
  height:62px;
  border:0;
  border-radius:20px;
  background:rgba(255,255,255,.7);
  font-size:34px;
  cursor:pointer;
}

.menu-brand{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:34px;
  padding:0 8px;
}

.menu-logo{
  font-size:54px;
  line-height:1;
}

.menu-brand-title{
  font-size:34px;
  font-weight:950;
  line-height:1;
  color:#0f172a;
}

.menu-brand-subtitle{
  margin-top:8px;
  font-size:19px;
  font-weight:800;
  color:#475569;
}

.menu-list{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.menu-item{
  min-height:46px;
  height:auto;
  display:flex;
  align-items:center;
  gap:13px;
  padding:9px 16px;
  border-radius:16px;
  text-decoration:none;
  color:#111827;
  font-size:15px;
  font-weight:900;
  background:rgba(255,255,255,.42);
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.14);
}

.menu-item span{
  flex:0 0 26px;
  width:26px;
  font-size:21px;
  text-align:center;
}

.menu-item b{
  line-height:1.08;
}

.menu-item.active{
  background:rgba(99,102,241,.13);
  color:#1d4ed8;
  box-shadow:inset 0 0 0 1px rgba(99,102,241,.12), 0 14px 28px rgba(99,102,241,.08);
}

.menu-item.disabled{
  opacity:.42;
}

.menu-bottom{
  margin-top:auto;
  display:grid;
  gap:10px;
}

.menu-bottom-settings{
  min-height:44px;
  border-radius:18px;
  background:rgba(255,255,255,.62);
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.14);
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  color:#334155;
  text-decoration:none;
  font-size:14px;
  font-weight:950;
  transition:.2s ease;
}

.menu-bottom-settings span{
  width:26px;
  text-align:center;
  font-size:20px;
}

.menu-bottom-settings:hover,
.menu-bottom-settings.active{
  background:rgba(99,102,241,.12);
  color:#1d4ed8;
  box-shadow:inset 0 0 0 1px rgba(99,102,241,.14),0 14px 28px rgba(99,102,241,.08);
}

.menu-user{
  min-height:78px;
  border-radius:22px;
  background:rgba(255,255,255,.68);
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.16);
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 38px;
  align-items:center;
  gap:12px;
  padding:10px 12px;
}

.menu-avatar{
  width:48px;
  height:48px;
  min-width:48px;
  border-radius:50%;
  background:linear-gradient(135deg,#fde7c8,#f9c78d);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:21px;
  font-weight:950;
  color:#334155;
  box-shadow:0 10px 22px rgba(15,23,42,.10), inset 0 0 0 2px rgba(255,255,255,.72);
}

.menu-user-text{
  min-width:0;
}

.menu-user-name{
  font-size:16px;
  font-weight:950;
  color:#111827;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.menu-user-sub{
  font-size:13px;
  font-weight:750;
  color:#64748b;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.menu-arrow{
  margin-left:auto;
  font-size:30px;
  color:#64748b;
}

.menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.33);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  pointer-events:none;
  transition:.28s;
  z-index:3000;
}

.menu-overlay.show{
  opacity:1;
  pointer-events:auto;
}

.page-content{
  transition:transform .32s cubic-bezier(.2,.9,.2,1), filter .32s, opacity .32s;
}

body.menu-open .page-content{
  transform:translateX(48px) scale(.984);
  filter:blur(4px);
  opacity:.70;
}


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

.header{
  padding-left:112px !important;
  padding-right:24px !important;
  box-sizing:border-box;
}

#seconds{
  font-size:.42em;
  opacity:.55;
  margin-left:4px;
}

.date{
  font-size:16px !important;
  padding:12px 18px !important;
}


/* ================= DASHBOARD COMPACT POLISH ================= */

body{
  padding:18px 18px 22px !important;
}

.header{
  height:78px !important;
  margin-bottom:16px !important;
  padding-left:112px !important;
}

#clock{
  font-size:46px !important;
  line-height:1 !important;
}

#seconds{
  font-size:18px !important;
  opacity:.48 !important;
}

.date{
  font-size:15px !important;
  padding:11px 18px !important;
  border-radius:16px !important;
}

.status{
  font-size:15px !important;
  padding:11px 18px !important;
  border-radius:16px !important;
}

.plan-card{
  padding:24px 24px 18px !important;
  border-radius:24px !important;
  margin-bottom:16px !important;
}

.plan-percent{
  font-size:38px !important;
}

.progress-bg{
  height:16px !important;
  border-radius:999px !important;
}

.cards{
  gap:12px !important;
  margin-bottom:14px !important;
}

.kpi{
  min-height:112px !important;
  padding:18px 20px !important;
  border-radius:22px !important;
}

.kpi-value{
  font-size:34px !important;
  line-height:1.05 !important;
}

.card-title{
  font-size:13px !important;
  margin-top:6px !important;
}

.emoji{
  font-size:22px !important;
}

.bottom{
  gap:14px !important;
}

.panel{
  border-radius:24px !important;
  padding:18px 20px !important;
}

.panel-title{
  font-size:20px !important;
  margin-bottom:14px !important;
}

.hour-row{
  margin-bottom:10px !important;
}

.top-item{
  padding:8px 0 !important;
}

.top-name{
  font-size:15px !important;
}

.top-sum{
  font-size:16px !important;
}

.menu-btn{
  top:24px !important;
  left:24px !important;
}


/* ================= MANAGER / TERMINAL MODES ================= */

body.manager-mode .side-menu{
  transform:translateX(0) !important;
  width:300px !important;
  padding-top:36px !important;
}

body.manager-mode .menu-btn{
  display:none !important;
}

body.manager-mode .menu-close{
  display:none !important;
}

body.manager-mode .menu-overlay{
  display:none !important;
}

body.manager-mode .page-content{
  transform:none !important;
  filter:none !important;
  opacity:1 !important;
  margin-left:320px !important;
  transition:.25s;
}

body.manager-mode .header{
  margin-left:320px !important;
  padding-left:0 !important;
}

body.manager-mode .plan-card{
  margin-left:320px !important;
}

body.terminal-mode .side-menu{
  transform:translateX(-105%);
}

body.terminal-mode .header,
body.terminal-mode .plan-card,
body.terminal-mode .page-content{
  margin-left:0 !important;
}

body.terminal-mode .menu-btn{
  display:block !important;
}


/* ================= FINAL LAYOUT MODES ================= */

body{
  --sidebar-width:330px;
}

body.manager-mode .side-menu{
  transform:translateX(0) !important;
}

body.manager-mode .menu-btn,
body.manager-mode .menu-close,
body.manager-mode .menu-overlay{
  display:none !important;
}

body.manager-mode .header,
body.manager-mode .plan-card,
body.manager-mode .page-content{
  margin-left:calc(var(--sidebar-width) + 22px) !important;
}

body.manager-mode .header{
  padding-left:0 !important;
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;
}

body.manager-mode .header > div:first-of-type{
  justify-self:center !important;
}

body.manager-mode .date{
  justify-self:start !important;
}

body.manager-mode .status{
  justify-self:end !important;
}

.fullscreen-item{
  width:100%;
  border:0;
  cursor:pointer;
  margin-top:10px;
  color:#0f766e;
}

body.fullscreen-layout .side-menu,
body.fullscreen-layout .menu-btn,
body.fullscreen-layout .menu-overlay{
  display:none !important;
}

body.fullscreen-layout .header,
body.fullscreen-layout .plan-card,
body.fullscreen-layout .page-content{
  margin-left:0 !important;
}

body.fullscreen-layout .header{
  padding-left:0 !important;
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
}

body.fullscreen-layout .header > div:first-of-type{
  justify-self:center !important;
}

.exit-fullscreen-btn{
  display:none;
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:5000;
  height:58px;
  padding:0 24px;
  border:0;
  border-radius:20px;
  background:rgba(255,255,255,.76);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  box-shadow:0 16px 45px rgba(15,23,42,.18);
  font-size:18px;
  font-weight:900;
  cursor:pointer;
}

body.fullscreen-layout .exit-fullscreen-btn{
  display:block;
}




/* ================= LAYOUT FIX AFTER SIDEBAR ================= */

body.manager-mode{
  padding-left:330px !important;
  padding-top:18px !important;
  padding-right:18px !important;
  padding-bottom:22px !important;
  box-sizing:border-box !important;
}

body.manager-mode .side-menu{
  width:300px !important;
}

body.manager-mode .header,
body.manager-mode .plan-card,
body.manager-mode .page-content{
  margin-left:0 !important;
}

body.manager-mode .header{
  height:74px !important;
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;
  padding-left:0 !important;
}

body.manager-mode .header > div:first-of-type{
  justify-self:center !important;
}

body.manager-mode .date{
  justify-self:start !important;
}

body.manager-mode .status{
  justify-self:end !important;
}

body.manager-mode .cards{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  gap:10px !important;
}

body.manager-mode .kpi{
  min-height:96px !important;
  padding:14px 16px !important;
}

body.manager-mode .bottom{
  display:grid !important;
  grid-template-columns:1.15fr 1fr !important;
  gap:12px !important;
}

body.fullscreen-layout{
  padding-left:18px !important;
}

body.fullscreen-layout .header,
body.fullscreen-layout .plan-card,
body.fullscreen-layout .page-content{
  margin-left:0 !important;
}


/* ================= DATE PICKER ================= */

.date-picker-btn{
  border:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  cursor:pointer !important;
  color:#0f172a !important;
  font-weight:850 !important;
}

.date-arrow{
  color:#111827;
  font-size:13px;
  line-height:1;
  margin-top:1px;
}

.date-picker-input{
  position:fixed;
  top:86px;
  left:50%;
  transform:translateX(-50%);
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}


/* ================= DATE PICKER CLEAN ================= */

.date-picker-btn{
  border:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  cursor:pointer !important;
  color:#0f172a !important;
  font-weight:850 !important;
  background:rgba(255,255,255,.72) !important;
  backdrop-filter:blur(18px) saturate(1.6) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.6) !important;
}

.date-arrow{
  color:#111827 !important;
  font-size:12px !important;
  line-height:1 !important;
}

.date-picker-input{
  position:fixed;
  top:92px;
  left:50%;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}


/* ================= CUSTOM GLASS CALENDAR ================= */

.calendar-popup{
  position:fixed;
  top:88px;
  left:50%;
  transform:translateX(-50%) translateY(-8px) scale(.98);
  width:310px;
  padding:18px;
  border-radius:26px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(28px) saturate(1.8);
  -webkit-backdrop-filter:blur(28px) saturate(1.8);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 24px 70px rgba(15,23,42,.18);
  opacity:0;
  pointer-events:none;
  z-index:6000;
  transition:.22s ease;
}

.calendar-popup.show{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}

.calendar-head{
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  margin-bottom:14px;
}

.calendar-head button{
  width:42px;
  height:42px;
  border:0;
  border-radius:14px;
  background:rgba(255,255,255,.64);
  font-size:28px;
  font-weight:900;
  cursor:pointer;
  color:#111827;
}

#calTitle{
  text-align:center;
  font-size:17px;
  font-weight:950;
  color:#0f172a;
  text-transform:capitalize;
}

.calendar-week,
.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:7px;
}

.calendar-week{
  margin-bottom:8px;
}

.calendar-week span{
  text-align:center;
  font-size:11px;
  font-weight:900;
  color:#94a3b8;
}

.cal-day{
  height:36px;
  border:0;
  border-radius:13px;
  background:rgba(255,255,255,.5);
  color:#0f172a;
  font-size:14px;
  font-weight:850;
  cursor:pointer;
}

.cal-day:hover{
  background:rgba(59,130,246,.12);
}

.cal-day.today{
  box-shadow:inset 0 0 0 2px rgba(20,184,166,.55);
}

.cal-day.active{
  background:linear-gradient(135deg,#2563eb,#14b8a6);
  color:white;
  box-shadow:0 10px 22px rgba(37,99,235,.25);
}

.cal-day.muted{
  background:transparent;
}


/* ================= HOURS CHART CLEAN ================= */

.empty-panel{
  min-height:230px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#64748b;
}

.empty-icon{
  font-size:42px;
  margin-bottom:12px;
}

.empty-title{
  font-size:22px;
  font-weight:950;
  color:#0f172a;
}

.empty-subtitle{
  margin-top:6px;
  font-size:15px;
  font-weight:700;
  opacity:.75;
}

.best-hour{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
  padding:13px 16px;
  border-radius:18px;
  background:rgba(255,247,223,.72);
  font-size:17px;
  font-weight:950;
}

.best-hour strong{
  color:#f59e0b;
  font-size:20px;
}

.hour-row{
  display:grid;
  grid-template-columns:54px 1fr 112px;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
  font-size:15px;
  font-weight:850;
}

.hour-time{
  color:#0f172a;
}

.hour-track{
  position:relative;
  height:18px;
  border-radius:999px;
  background:rgba(226,232,240,.8);
  overflow:hidden;
}

.hour-track span{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:10px;
  font-weight:900;
  color:rgba(15,23,42,.58);
  z-index:2;
}

.hour-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#ec4899,#f59e0b,#22c55e);
}

.hour-money{
  text-align:right;
  font-weight:950;
  color:#0f172a;
}


/* ================= COMPARE SWITCH ================= */

.compare-switch{
  position:fixed;
  top:31px;
  right:180px;
  height:38px;
  display:flex;
  align-items:center;
  padding:4px;
  gap:4px;
  border-radius:999px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(18px) saturate(1.7);
  -webkit-backdrop-filter:blur(18px) saturate(1.7);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 14px 35px rgba(15,23,42,.10);
  z-index:2500;
}

.compare-switch button{
  height:30px;
  border:0;
  padding:0 14px;
  border-radius:999px;
  background:transparent;
  color:#64748b;
  font-size:12px;
  font-weight:950;
  cursor:pointer;
}

.compare-switch button.active{
  background:linear-gradient(135deg,#2563eb,#14b8a6);
  color:#fff;
  box-shadow:0 8px 18px rgba(37,99,235,.22);
}


/* ================= COMPARE BADGES ================= */

.compare-badge{
  margin-top:7px;
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:950;
  letter-spacing:-.2px;
}

.compare-badge.good{
  color:#15803d;
  background:rgba(34,197,94,.12);
}

.compare-badge.bad{
  color:#dc2626;
  background:rgba(239,68,68,.12);
}

.compare-badge.neutral{
  color:#64748b;
  background:rgba(100,116,139,.10);
}


/* ================= LIQUID GLASS COMPACT V2 ================= */

body{
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.92), transparent 20%),
    radial-gradient(circle at 10% 30%, rgba(72,149,239,.20), transparent 25%),
    radial-gradient(circle at 78% 22%, rgba(34,211,238,.16), transparent 26%),
    radial-gradient(circle at 72% 82%, rgba(52,211,153,.16), transparent 28%),
    linear-gradient(135deg,#f7fbff 0%,#edf6fb 50%,#f9fcff 100%) !important;
  color:#172033 !important;
}

.plan-card,
.kpi,
.panel,
.date,
.status,
.menu-item,
.menu-user,
.calendar-popup,
.report-tabs button,
.report-date{
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.34)) !important;
  border:1px solid rgba(255,255,255,.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(255,255,255,.34),
    0 16px 42px rgba(34,65,105,.12) !important;
  backdrop-filter:blur(30px) saturate(180%) contrast(106%) !important;
  -webkit-backdrop-filter:blur(30px) saturate(180%) contrast(106%) !important;
}

.plan-card::after,
.kpi::after,
.panel::after{
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.12) 34%, transparent 68%),
    radial-gradient(circle at 16% 8%, rgba(255,255,255,.65), transparent 24%) !important;
  opacity:.78 !important;
}

.cards,
body.manager-mode .cards{
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  gap:10px !important;
}

.kpi,
body.manager-mode .kpi{
  min-height:86px !important;
  padding:12px 14px !important;
  border-radius:20px !important;
}

.emoji{
  font-size:18px !important;
  margin-bottom:4px !important;
}

.card-title{
  font-size:11px !important;
  line-height:1.15 !important;
  margin-top:0 !important;
  letter-spacing:.45px !important;
}

.kpi-value{
  margin-top:6px !important;
  font-size:29px !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
}

.hint{
  margin-top:6px !important;
  font-size:11px !important;
  line-height:1.15 !important;
  font-weight:850 !important;
}

.compare-badge{
  margin-top:6px !important;
  font-size:10px !important;
  padding:3px 7px !important;
}

.plan-card{
  border-radius:22px !important;
  padding:18px 20px 16px !important;
  margin-bottom:12px !important;
}

.plan-top{
  margin-bottom:12px !important;
}

.target-icon{
  font-size:25px !important;
}

.plan-percent{
  font-size:34px !important;
  line-height:1 !important;
}

.plan-message{
  font-size:22px !important;
}

.progress-bg{
  height:13px !important;
  margin:12px 0 !important;
  background:rgba(222,232,242,.72) !important;
}

.progress-bar,
.dish-fill,
.hour-fill{
  background:linear-gradient(90deg,#ff5e7e,#f7c948,#34c759,#11c5bf) !important;
}

.plan-info{
  font-size:15px !important;
  gap:10px !important;
}

.bottom,
body.manager-mode .bottom{
  grid-template-columns:1.1fr 1fr !important;
  gap:12px !important;
}

.panel{
  height:470px !important;
  border-radius:22px !important;
  padding:16px 18px !important;
}

.bottom .panel:nth-child(2){
  grid-template-columns:1fr 1fr !important;
  gap:18px !important;
}

.panel-title{
  font-size:18px !important;
  margin-bottom:12px !important;
}

.top-dishes{
  min-width:0;
}

.dish-row{
  display:grid;
  grid-template-columns:42px minmax(0, 1fr);
  gap:11px;
  align-items:start;
  padding:9px 0;
  border-bottom:1px solid rgba(148,163,184,.16);
}

.dish-rank{
  font-size:25px;
  line-height:1;
  font-weight:950;
  color:#283142;
  letter-spacing:0;
}

.dish-main{
  min-width:0;
}

.dish-line{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:10px;
  align-items:start;
}

.dish-name{
  min-width:0;
  font-size:14px;
  line-height:1.12;
  font-weight:950;
  color:#182133;
}

.dish-value{
  white-space:nowrap;
  font-size:14px;
  line-height:1;
  font-weight:950;
  color:#20b86a;
}

.dish-sub{
  margin-top:3px;
  font-size:10px;
  line-height:1.05;
  font-weight:850;
  color:#718096;
}

.dish-bar{
  height:6px;
  margin-top:7px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(226,232,240,.78);
}

.dish-fill{
  height:100%;
  border-radius:inherit;
}

.dish-row.anti .dish-value{
  color:#0f766e;
}

.dish-row.anti .dish-fill{
  background:linear-gradient(90deg,#94a3b8,#22c55e) !important;
}

.compact-empty{
  font-size:18px !important;
  padding:38px 0 !important;
  color:#64748b !important;
}

.order-status{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  font-size:22px;
  line-height:1;
  font-weight:950;
}

.order-status span{
  width:11px;
  height:11px;
  border-radius:999px;
  flex:0 0 auto;
}

.hour-row{
  grid-template-columns:48px 1fr 96px !important;
  gap:10px !important;
  margin-bottom:8px !important;
  font-size:13px !important;
}

.hour-track{
  height:15px !important;
}

.hour-track span{
  font-size:9px !important;
}

.best-hour{
  padding:10px 13px !important;
  margin-bottom:10px !important;
  font-size:14px !important;
}

.best-hour strong{
  font-size:16px !important;
}

@media (max-width: 1500px){
  .cards,
  body.manager-mode .cards{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  }

  .kpi-value{
    font-size:26px !important;
  }
}


/* ================= COMPARE + SALES FIX V3 ================= */

.header-controls{
  justify-self:start;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

body.manager-mode .header{
  grid-template-columns:minmax(440px, 1fr) auto minmax(220px, 1fr) !important;
}

body.manager-mode .header .header-controls{
  justify-self:start !important;
}

.compare-switch{
  position:static !important;
  height:38px !important;
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  padding:4px !important;
  border-radius:999px !important;
  white-space:nowrap !important;
  z-index:auto !important;
}

.compare-label{
  padding:0 8px 0 10px;
  color:#64748b;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.35px;
}

.compare-switch button{
  height:30px !important;
  padding:0 12px !important;
  font-size:12px !important;
}

.sales-page{
  height:auto !important;
  min-height:620px !important;
  overflow:visible !important;
}

.sales-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
}

.sales-subhead{
  margin-top:-6px;
  font-size:14px;
  font-weight:850;
  color:#64748b;
}

.sales-status{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(100,116,139,.10);
  color:#64748b;
  font-size:12px;
  font-weight:950;
}

.sales-status.good{
  color:#15803d;
  background:rgba(34,197,94,.13);
}

.sales-status.warn{
  color:#b45309;
  background:rgba(245,158,11,.15);
}

.sales-status.bad{
  color:#dc2626;
  background:rgba(239,68,68,.14);
}

.report-tabs{
  gap:8px !important;
  margin:10px 0 !important;
}

.report-tabs button,
.report-date{
  height:42px !important;
  padding:0 16px !important;
  border-radius:14px !important;
  font-size:14px !important;
  font-weight:950 !important;
}

.report-tabs button.active{
  background:linear-gradient(135deg,#2563eb,#14b8a6) !important;
  color:#fff !important;
  box-shadow:0 12px 28px rgba(37,99,235,.18) !important;
}

.sales-table{
  margin-top:18px;
  border-radius:20px;
  overflow:hidden;
  background:rgba(255,255,255,.30);
  border:1px solid rgba(255,255,255,.54);
}

.sales-row{
  grid-template-columns:56px minmax(220px, 1fr) 110px 140px 140px 90px !important;
  gap:12px !important;
  min-height:54px;
  padding:12px 16px !important;
  border-bottom:1px solid rgba(100,116,139,.12) !important;
}

.sales-row-head{
  min-height:42px;
  background:rgba(255,255,255,.42);
  color:#64748b;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.35px;
}

.sales-row-head > div:nth-child(n+3){
  text-align:right;
}

.sales-rank{
  font-size:21px !important;
  letter-spacing:0 !important;
}

.sales-name{
  font-size:16px !important;
  line-height:1.15 !important;
}

.sales-num{
  font-size:15px !important;
}

.sales-message{
  padding:52px 18px;
  text-align:center;
  color:#64748b;
  font-size:20px;
  font-weight:950;
}

@media (max-width: 1500px){
  body.manager-mode .header{
    grid-template-columns:minmax(390px, 1fr) auto minmax(180px, 1fr) !important;
  }

  .compare-label{
    display:none;
  }

  .compare-switch button{
    padding:0 10px !important;
  }
}


/* ================= SALES WORKSPACE + THEME V4 ================= */

.top-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.theme-switch{
  width:56px;
  height:32px;
  position:relative;
  display:inline-flex;
  align-items:center;
  cursor:pointer;
}

.theme-switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.theme-switch span{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:rgba(255,255,255,.64);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 12px 28px rgba(34,65,105,.12);
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
}

.theme-switch span::before{
  content:"";
  position:absolute;
  left:4px;
  top:4px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:linear-gradient(135deg,#facc15,#f97316);
  box-shadow:0 6px 14px rgba(249,115,22,.22);
  transition:.22s ease;
}

.theme-switch input:checked + span::before{
  transform:translateX(24px);
  background:linear-gradient(135deg,#60a5fa,#8b5cf6);
}

.sales-screen{
  min-height:100vh;
}

.sales-screen .side-menu{
  transform:translateX(0) !important;
  width:300px !important;
  padding-top:36px !important;
}

.sales-screen .sales-header{
  height:74px !important;
  display:grid !important;
  grid-template-columns:minmax(360px,1fr) auto minmax(260px,1fr) !important;
  align-items:center !important;
  padding-left:0 !important;
}

.sales-content{
  margin:0 !important;
}

.sales-page{
  padding:18px !important;
  border-radius:24px !important;
}

.sales-toolbar{
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  margin-bottom:12px;
}

.sales-metrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  margin:14px 0 10px;
}

.sales-metric{
  min-height:88px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.34);
  border:1px solid rgba(255,255,255,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88), 0 12px 28px rgba(34,65,105,.08);
}

.sales-metric span{
  display:block;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.35px;
  color:#64748b;
}

.sales-metric strong{
  display:block;
  margin-top:7px;
  font-size:18px;
  line-height:1.05;
  font-weight:950;
  color:#172033;
}

.sales-metric small{
  display:block;
  margin-top:7px;
  font-size:12px;
  line-height:1.2;
  font-weight:800;
  color:#64748b;
}

.sales-explain{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:10px 0 14px;
}

.sales-explain div{
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.52);
  color:#526174;
  font-size:13px;
  line-height:1.35;
  font-weight:800;
}

.sales-explain b{
  color:#172033;
}

.sales-row-head button{
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.sales-row-head button::after{
  content:"↕";
  margin-left:6px;
  opacity:.42;
  font-size:10px;
}

.sales-row-head > button:nth-child(n+3){
  text-align:right;
}

.sales-row-head button.active{
  color:#2563eb;
}

.sales-calendar-popup{
  top:88px !important;
  left:352px !important;
  transform:translateY(-8px) scale(.98) !important;
}

.sales-calendar-popup.show{
  transform:translateY(0) scale(1) !important;
}

.cal-day.in-range{
  background:rgba(37,99,235,.10);
  color:#1d4ed8;
}

.cal-day.in-range.active{
  color:white;
}

.calendar-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
}

.calendar-actions button{
  height:38px;
  border:0;
  border-radius:14px;
  font-size:13px;
  font-weight:950;
  cursor:pointer;
  background:rgba(255,255,255,.64);
  color:#172033;
}

.calendar-actions button:last-child{
  background:linear-gradient(135deg,#2563eb,#14b8a6);
  color:white;
}

html[data-theme="dark"] body{
  background:
    radial-gradient(circle at 12% 20%, rgba(59,130,246,.20), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(20,184,166,.16), transparent 24%),
    radial-gradient(circle at 70% 82%, rgba(139,92,246,.16), transparent 26%),
    linear-gradient(135deg,#07111f 0%,#0b1726 48%,#08121f 100%) !important;
  color:#e5edf7 !important;
}

html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .date,
html[data-theme="dark"] .status,
html[data-theme="dark"] .menu-item,
html[data-theme="dark"] .menu-user,
html[data-theme="dark"] .menu-bottom-settings,
html[data-theme="dark"] .calendar-popup,
html[data-theme="dark"] .report-tabs button,
html[data-theme="dark"] .report-date,
html[data-theme="dark"] .sales-metric,
html[data-theme="dark"] .sales-explain div,
html[data-theme="dark"] .sales-table{
  background:linear-gradient(135deg, rgba(22,34,52,.78), rgba(15,28,44,.46)) !important;
  border-color:rgba(148,163,184,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 18px 48px rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] .side-menu{
  background:rgba(9,18,31,.78) !important;
}

html[data-theme="dark"] .menu-brand-title,
html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .sales-metric strong,
html[data-theme="dark"] .sales-explain b,
html[data-theme="dark"] .sales-name,
html[data-theme="dark"] .dish-name,
html[data-theme="dark"] #clock{
  color:#f8fafc !important;
}

html[data-theme="dark"] .card-title,
html[data-theme="dark"] .sales-subhead,
html[data-theme="dark"] .sales-metric span,
html[data-theme="dark"] .sales-metric small,
html[data-theme="dark"] .sales-explain div,
html[data-theme="dark"] .menu-brand-subtitle,
html[data-theme="dark"] .menu-user-sub{
  color:#9fb0c5 !important;
}

html[data-theme="dark"] .sales-row{
  border-bottom-color:rgba(148,163,184,.14) !important;
}

html[data-theme="dark"] .sales-row-head{
  background:rgba(15,23,42,.34) !important;
  color:#9fb0c5 !important;
}

html[data-theme="dark"] .theme-switch span{
  background:rgba(15,23,42,.72);
  border-color:rgba(148,163,184,.24);
}

html[data-theme="dark"] .date-arrow,
html[data-theme="dark"] .date-picker-btn,
html[data-theme="dark"] .report-date{
  color:#e5edf7 !important;
}

@media (max-width: 1500px){
  .sales-screen .sales-header{
    grid-template-columns:minmax(330px,1fr) auto minmax(220px,1fr) !important;
  }

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

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


/* ================= SALES ANALYTICS POLISH V5 ================= */

.sales-screen{
  padding-left:300px !important;
}

.sales-screen .sales-header{
  grid-template-columns:minmax(420px,1fr) auto minmax(260px,1fr) !important;
  gap:12px !important;
}

.sales-screen .top-actions{
  min-width:190px;
}

.sales-screen .top-actions .status{
  min-width:104px;
  text-align:center;
}

.sales-page{
  max-width:1720px;
  margin:0 auto;
}

.sales-metrics{
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
}

.sales-metric{
  min-height:130px;
}

.sales-metric strong{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:10px;
  font-size:13px;
}

.metric-line{
  display:grid;
  grid-template-columns:20px minmax(0, 1fr) auto;
  gap:8px;
  align-items:center;
  min-width:0;
  color:#172033;
}

.metric-line i{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:rgba(37,99,235,.10);
  color:#2563eb;
  font-style:normal;
  font-size:11px;
  font-weight:950;
}

.metric-line em{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-style:normal;
  font-weight:950;
}

.metric-line b{
  white-space:nowrap;
  color:#0f766e;
  font-size:12px;
}

.ai-advice{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:12px;
  align-items:start;
  margin:10px 0 12px;
  padding:13px 15px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(37,99,235,.10), rgba(20,184,166,.10));
  border:1px solid rgba(255,255,255,.58);
}

.ai-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,#2563eb,#14b8a6);
  color:white;
  font-size:12px;
  font-weight:950;
}

.ai-advice b{
  display:block;
  color:#172033;
  font-size:14px;
  font-weight:950;
}

.ai-advice p{
  margin:4px 0 0;
  color:#526174;
  font-size:13px;
  line-height:1.35;
  font-weight:820;
}

.range-pick-state{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:12px;
}

.range-pick-state div{
  padding:10px 12px;
  border-radius:15px;
  background:rgba(255,255,255,.56);
  border:1px solid rgba(255,255,255,.66);
}

.range-pick-state span{
  display:block;
  font-size:10px;
  font-weight:950;
  color:#64748b;
  text-transform:uppercase;
}

.range-pick-state strong{
  display:block;
  margin-top:3px;
  font-size:13px;
  font-weight:950;
  color:#172033;
}

.sales-calendar-popup{
  width:340px !important;
  z-index:8000 !important;
}

.calendar-popup .cal-day{
  position:relative;
}

.calendar-popup .cal-day.in-range:not(.active){
  background:rgba(37,99,235,.14) !important;
}

.calendar-popup .cal-day.active{
  background:linear-gradient(135deg,#2563eb,#14b8a6) !important;
  color:white !important;
}

.sales-table{
  overflow-x:auto !important;
}

.sales-row{
  grid-template-columns:42px minmax(230px,1.35fr) 72px 102px 74px 92px 96px 102px 92px 70px !important;
  min-width:1050px;
  min-height:42px !important;
  padding:8px 10px !important;
  gap:8px !important;
}

.sales-row-head{
  min-height:36px !important;
  position:sticky;
  top:0;
  z-index:2;
}

.sales-row-head button{
  font-size:10px !important;
  line-height:1.1 !important;
}

.sales-rank{
  font-size:16px !important;
}

.sales-name{
  font-size:13px !important;
  line-height:1.15 !important;
}

.sales-num{
  font-size:12px !important;
  line-height:1.1 !important;
}

html[data-theme="dark"] body{
  background:
    radial-gradient(circle at 10% 16%, rgba(37,99,235,.18), transparent 22%),
    radial-gradient(circle at 84% 14%, rgba(20,184,166,.14), transparent 24%),
    linear-gradient(135deg,#101827 0%,#0f1b2b 52%,#101827 100%) !important;
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .side-menu,
html[data-theme="dark"] .calendar-popup,
html[data-theme="dark"] .sales-metric,
html[data-theme="dark"] .sales-table,
html[data-theme="dark"] .sales-explain div,
html[data-theme="dark"] .ai-advice,
html[data-theme="dark"] .range-pick-state div{
  background:rgba(22,32,48,.82) !important;
  border-color:rgba(148,163,184,.24) !important;
}

html[data-theme="dark"] .report-tabs button:not(.active),
html[data-theme="dark"] .date,
html[data-theme="dark"] .status,
html[data-theme="dark"] .menu-item,
html[data-theme="dark"] .menu-user{
  background:rgba(30,42,62,.76) !important;
  color:#dbeafe !important;
}

html[data-theme="dark"] .sales-row-head{
  background:rgba(15,23,42,.92) !important;
}

html[data-theme="dark"] .sales-num,
html[data-theme="dark"] .sales-rank,
html[data-theme="dark"] .metric-line,
html[data-theme="dark"] .range-pick-state strong{
  color:#dbeafe !important;
}

html[data-theme="dark"] .metric-line em,
html[data-theme="dark"] .ai-advice b{
  color:#f8fafc !important;
}

html[data-theme="dark"] .metric-line b{
  color:#5eead4 !important;
}

html[data-theme="dark"] .ai-advice p,
html[data-theme="dark"] .sales-message{
  color:#b7c7dc !important;
}

html[data-theme="dark"] .cal-day{
  background:rgba(30,42,62,.78) !important;
  color:#dbeafe !important;
}

html[data-theme="dark"] .cal-day.in-range:not(.active){
  background:rgba(37,99,235,.32) !important;
}

@media (max-width:1500px){
  .sales-metrics{
    grid-template-columns:1fr !important;
  }

  .sales-screen .sales-header{
    grid-template-columns:minmax(300px,1fr) auto minmax(190px,1fr) !important;
  }
}


/* ================= READABLE HEADER + MINIMAL DARK V6 ================= */

.sales-screen .sales-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  height:74px !important;
  padding:0 !important;
}

.sales-screen .sales-header > *{
  position:static !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
}

.sales-screen .sales-header .header-controls{
  flex:0 0 auto !important;
  min-width:260px !important;
  max-width:420px !important;
  justify-content:flex-start !important;
}

.sales-screen .sales-header #clock{
  flex:1 1 auto !important;
  text-align:center !important;
  min-width:260px !important;
  font-size:40px !important;
}

.sales-screen .sales-header .top-actions{
  flex:0 0 auto !important;
  min-width:190px !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:12px !important;
}

.sales-screen .theme-switch{
  flex:0 0 56px !important;
}

.sales-screen .top-actions .status{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

html[data-theme="dark"] body{
  background:#0f172a !important;
  color:#e5e7eb !important;
}

html[data-theme="dark"] body::after,
html[data-theme="dark"] .plan-card::after,
html[data-theme="dark"] .kpi::after,
html[data-theme="dark"] .panel::after,
html[data-theme="dark"] .plan-card::before,
html[data-theme="dark"] .kpi::before,
html[data-theme="dark"] .panel::before{
  display:none !important;
  content:none !important;
}

html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .date,
html[data-theme="dark"] .status,
html[data-theme="dark"] .menu-item,
html[data-theme="dark"] .menu-user,
html[data-theme="dark"] .menu-bottom-settings,
html[data-theme="dark"] .calendar-popup,
html[data-theme="dark"] .report-tabs button,
html[data-theme="dark"] .report-date,
html[data-theme="dark"] .sales-metric,
html[data-theme="dark"] .sales-explain div,
html[data-theme="dark"] .sales-table,
html[data-theme="dark"] .ai-advice,
html[data-theme="dark"] .range-pick-state div{
  background:#162033 !important;
  border:1px solid #26364f !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

html[data-theme="dark"] .side-menu{
  background:#111c2e !important;
  border-right:1px solid #243449 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

html[data-theme="dark"] .menu-item.active,
html[data-theme="dark"] .report-tabs button.active,
html[data-theme="dark"] .calendar-actions button:last-child,
html[data-theme="dark"] .cal-day.active{
  background:#2563eb !important;
  color:#ffffff !important;
  border-color:#2563eb !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .menu-item.disabled{
  opacity:.48 !important;
}

html[data-theme="dark"] #clock,
html[data-theme="dark"] .menu-brand-title,
html[data-theme="dark"] .menu-user-name,
html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .sales-metric strong,
html[data-theme="dark"] .sales-explain b,
html[data-theme="dark"] .sales-name,
html[data-theme="dark"] .dish-name,
html[data-theme="dark"] .metric-line em,
html[data-theme="dark"] .ai-advice b,
html[data-theme="dark"] .range-pick-state strong,
html[data-theme="dark"] .empty-title{
  color:#f8fafc !important;
  text-shadow:none !important;
}

html[data-theme="dark"] .card-title,
html[data-theme="dark"] .sales-subhead,
html[data-theme="dark"] .sales-metric span,
html[data-theme="dark"] .sales-metric small,
html[data-theme="dark"] .sales-explain div,
html[data-theme="dark"] .menu-brand-subtitle,
html[data-theme="dark"] .menu-user-sub,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .empty-subtitle,
html[data-theme="dark"] .dish-sub,
html[data-theme="dark"] .range-pick-state span,
html[data-theme="dark"] .sales-row-head{
  color:#cbd5e1 !important;
}

html[data-theme="dark"] .sales-row,
html[data-theme="dark"] .dish-row{
  border-bottom-color:#26364f !important;
}

html[data-theme="dark"] .sales-row-head{
  background:#101827 !important;
}

html[data-theme="dark"] .sales-num,
html[data-theme="dark"] .sales-rank,
html[data-theme="dark"] .metric-line,
html[data-theme="dark"] .hour-time,
html[data-theme="dark"] .hour-money{
  color:#e5e7eb !important;
}

html[data-theme="dark"] .green,
html[data-theme="dark"] .blue,
html[data-theme="dark"] .violet{
  color:#60a5fa !important;
}

html[data-theme="dark"] .orange,
html[data-theme="dark"] .pink{
  color:#fbbf24 !important;
}

html[data-theme="dark"] .metric-line b,
html[data-theme="dark"] .dish-value{
  color:#5eead4 !important;
}

html[data-theme="dark"] .compare-badge.good{
  color:#86efac !important;
  background:#143523 !important;
}

html[data-theme="dark"] .compare-badge.bad{
  color:#fca5a5 !important;
  background:#3b1d24 !important;
}

html[data-theme="dark"] .ai-advice p,
html[data-theme="dark"] .sales-message{
  color:#d1d5db !important;
}

html[data-theme="dark"] .theme-switch span{
  background:#0f172a !important;
  border-color:#334155 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

html[data-theme="dark"] .theme-switch span::before{
  background:#60a5fa !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .cal-day{
  background:#1e293b !important;
  color:#e5e7eb !important;
}

html[data-theme="dark"] .cal-day.in-range:not(.active){
  background:#1d4ed8 !important;
  color:#ffffff !important;
}

html[data-theme="dark"] .hour-track,
html[data-theme="dark"] .dish-bar,
html[data-theme="dark"] .progress-bg{
  background:#26364f !important;
}

@media (max-width:1500px){
  .sales-screen .sales-header #clock{
    font-size:34px !important;
    min-width:220px !important;
  }

  .sales-screen .sales-header .header-controls{
    min-width:230px !important;
  }

  .sales-screen .sales-header .top-actions{
    min-width:170px !important;
  }
}


/* ================= CALENDAR + TABLE TOOLS V7 ================= */

.menu-brand-wordmark{
  justify-content:center !important;
  text-align:center !important;
  gap:0 !important;
  min-height:82px !important;
}

.menu-brand-wordmark .menu-brand-title{
  font-size:42px !important;
  line-height:.9 !important;
  letter-spacing:0 !important;
  font-weight:1000 !important;
  color:#111827 !important;
}

.menu-brand-wordmark .menu-brand-subtitle{
  margin-top:8px !important;
  font-size:14px !important;
}

.sales-date-workspace{
  margin-bottom:14px;
}

.sales-calendar-popup.embedded,
.sales-calendar-popup.embedded.show{
  position:relative !important;
  inset:auto !important;
  top:auto !important;
  left:auto !important;
  width:min(100%, 420px) !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
  display:block !important;
}

.calendar-hint{
  margin-top:10px;
  color:#64748b;
  font-size:12px;
  line-height:1.25;
  font-weight:850;
}

.sales-metric{
  overflow:hidden !important;
}

.sales-metric strong{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}

.metric-line{
  display:grid !important;
  grid-template-columns:20px minmax(0, 1fr) auto !important;
  gap:7px !important;
  align-items:center !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:3px 0 !important;
  font-size:12px !important;
  line-height:1.15 !important;
}

.metric-line em{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.metric-line b{
  white-space:nowrap !important;
  font-size:12px !important;
}

.sales-table{
  overflow:auto !important;
}

.sales-row{
  display:flex !important;
  align-items:center !important;
  width:max-content !important;
  min-width:100% !important;
  grid-template-columns:none !important;
  gap:0 !important;
}

.sales-row > [data-col],
.sales-row-head > [data-col]{
  flex:0 0 auto !important;
  min-width:0 !important;
  padding-right:14px !important;
}

.sales-row > [data-col="rank"],
.sales-row-head > [data-col="rank"]{ width:var(--sales-col-rank, 54px) !important; }
.sales-row > [data-col="name"],
.sales-row-head > [data-col="name"]{ width:var(--sales-col-name, 360px) !important; }
.sales-row > [data-col="amount"],
.sales-row-head > [data-col="amount"]{ width:var(--sales-col-amount, 100px) !important; }
.sales-row > [data-col="revenue"],
.sales-row-head > [data-col="revenue"]{ width:var(--sales-col-revenue, 128px) !important; }
.sales-row > [data-col="cost_percent"],
.sales-row-head > [data-col="cost_percent"]{ width:var(--sales-col-cost_percent, 92px) !important; }
.sales-row > [data-col="avg_price"],
.sales-row-head > [data-col="avg_price"]{ width:var(--sales-col-avg_price, 108px) !important; }
.sales-row > [data-col="cost"],
.sales-row-head > [data-col="cost"]{ width:var(--sales-col-cost, 112px) !important; }
.sales-row > [data-col="profit"],
.sales-row-head > [data-col="profit"]{ width:var(--sales-col-profit, 120px) !important; }
.sales-row > [data-col="profit_per_item"],
.sales-row-head > [data-col="profit_per_item"]{ width:var(--sales-col-profit_per_item, 104px) !important; }
.sales-row > [data-col="margin"],
.sales-row-head > [data-col="margin"]{ width:var(--sales-col-margin, 86px) !important; }

.sales-name{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.sales-num,
.sales-row-head > [data-col]:not([data-col="name"]):not([data-col="rank"]){
  text-align:right !important;
}

.sales-row-head button{
  position:relative !important;
  user-select:none !important;
  padding-right:20px !important;
}

.sales-row-head button.dragging{
  opacity:.45 !important;
}

.sales-row-head button::after{
  content:"↕" !important;
}

.col-resizer{
  position:absolute;
  top:7px;
  right:2px;
  width:10px;
  height:calc(100% - 14px);
  border-right:2px solid rgba(100,116,139,.34);
  cursor:col-resize;
  opacity:.65;
}

.col-resizer:hover{
  border-right-color:#2563eb;
  opacity:1;
}

.app-signature{
  position:fixed;
  right:18px;
  bottom:14px;
  z-index:60;
  display:flex;
  align-items:center;
  gap:8px;
  color:#64748b;
  font-size:11px;
  line-height:1;
  font-weight:850;
  opacity:.72;
  pointer-events:none;
}

.app-signature b{
  display:inline-flex;
  align-items:center;
  height:18px;
  padding:0 8px;
  margin-left:3px;
  border-radius:999px;
  background:rgba(37,99,235,.10);
  color:#2563eb;
  font-size:10px;
  font-style:normal;
}

html[data-theme="dark"] .menu-brand-wordmark .menu-brand-title{
  color:#f8fafc !important;
}

html[data-theme="dark"] .calendar-hint,
html[data-theme="dark"] .app-signature{
  color:#94a3b8 !important;
}

html[data-theme="dark"] .app-signature b{
  background:#1d4ed8 !important;
  color:#ffffff !important;
}

html[data-theme="dark"] .col-resizer{
  border-right-color:#475569 !important;
}

html[data-theme="dark"] .col-resizer:hover{
  border-right-color:#60a5fa !important;
}


/* ================= SALES PAGE ORDER V8 ================= */

.sales-screen .sales-header #clock{
  font-size:34px !important;
}

.sales-content{
  width:100% !important;
  padding:0 20px 72px 20px !important;
  box-sizing:border-box !important;
}

.sales-page{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  min-height:auto !important;
  box-sizing:border-box !important;
}

.sales-date-workspace{
  display:grid !important;
  grid-template-columns:420px minmax(0, 1fr) !important;
  gap:18px !important;
  align-items:start !important;
  margin-bottom:16px !important;
}

.sales-overview{
  min-width:0 !important;
}

.sales-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:14px !important;
  margin-bottom:12px !important;
}

.sales-head .panel-title{
  font-size:18px !important;
}

.sales-summary{
  display:grid !important;
  grid-template-columns:repeat(6, minmax(120px, 1fr)) !important;
  gap:10px !important;
  margin-bottom:10px !important;
}

.summary-card{
  min-height:72px;
  padding:13px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.38);
  border:1px solid rgba(255,255,255,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88), 0 12px 28px rgba(34,65,105,.07);
  overflow:hidden;
}

.summary-card span{
  display:block;
  color:#64748b;
  font-size:11px;
  line-height:1.1;
  font-weight:950;
  text-transform:uppercase;
}

.summary-card strong{
  display:block;
  margin-top:8px;
  color:#0f766e;
  font-size:20px;
  line-height:1;
  font-weight:1000;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sales-date-workspace .sales-metrics{
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  margin:0 !important;
}

.sales-date-workspace .sales-metric{
  min-height:126px !important;
  padding:13px 14px !important;
}

.sales-toolbar{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:2px !important;
  margin:8px 0 12px !important;
}

.sales-table{
  margin-top:14px !important;
  width:100% !important;
}

.sales-row{
  padding:10px 12px !important;
}

.sales-row-head{
  position:sticky;
  top:0;
  z-index:2;
}

.sales-calendar-popup.embedded,
.sales-calendar-popup.embedded.show{
  width:100% !important;
  max-width:420px !important;
}

html[data-theme="dark"] .summary-card{
  background:#162033 !important;
  border:1px solid #26364f !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .summary-card span{
  color:#cbd5e1 !important;
}

html[data-theme="dark"] .summary-card strong{
  color:#5eead4 !important;
}

@media (max-width:1500px){
  .sales-date-workspace{
    grid-template-columns:360px minmax(0, 1fr) !important;
  }

  .sales-summary{
    grid-template-columns:repeat(3, minmax(120px, 1fr)) !important;
  }

  .sales-date-workspace .sales-metrics{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:980px){
  .sales-date-workspace{
    grid-template-columns:1fr !important;
  }

  .sales-calendar-popup.embedded,
  .sales-calendar-popup.embedded.show{
    max-width:none !important;
  }

  .sales-summary{
    grid-template-columns:repeat(2, minmax(120px, 1fr)) !important;
  }
}


/* ================= SALES ANALYTICS DASHBOARD V9 ================= */

.sales-screen{
  background:#f6fbff !important;
}

.sales-page{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 18px 24px !important;
}

.sales-date-workspace{
  grid-template-columns:300px minmax(0,1fr) !important;
  gap:16px !important;
  align-items:start !important;
}

.sales-calendar-popup.embedded,
.sales-calendar-popup.embedded.show{
  max-width:300px !important;
  padding:16px !important;
  border-radius:18px !important;
}

.sales-calendar-popup .range-pick-state{
  gap:8px !important;
}

.sales-calendar-popup .range-pick-state div{
  padding:9px 10px !important;
  border-radius:12px !important;
}

.sales-calendar-popup .calendar-head{
  margin:10px 0 8px !important;
}

.sales-calendar-popup .calendar-week{
  margin-bottom:5px !important;
  font-size:10px !important;
}

.sales-calendar-popup .calendar-grid{
  gap:5px !important;
}

.sales-calendar-popup .cal-day{
  width:30px !important;
  height:30px !important;
  border-radius:10px !important;
  font-size:12px !important;
}

.sales-calendar-popup .calendar-actions button{
  height:34px !important;
  border-radius:12px !important;
}

.calendar-hint{
  font-size:10px !important;
  margin-top:8px !important;
}

.sales-head{
  margin-bottom:10px !important;
}

.sales-summary{
  grid-template-columns:repeat(6, minmax(126px, 1fr)) !important;
  gap:10px !important;
}

.summary-card{
  position:relative;
  min-height:104px !important;
  padding:14px 14px 12px !important;
  border-radius:16px !important;
  background:#fff !important;
  border:1px solid rgba(226,232,240,.82) !important;
  box-shadow:0 14px 34px rgba(26,55,96,.07) !important;
  transition:transform .18s ease, box-shadow .18s ease;
}

.summary-card:hover,
.sales-metric:hover,
.chart-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(26,55,96,.11) !important;
}

.summary-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  opacity:.08;
  pointer-events:none;
}

.revenue-card::before,
.margin-card::before{ background:#10b981; }
.orders-card::before{ background:#2563eb; }
.avg-card::before{ background:#14b8a6; }
.foodcost-card::before{ background:#f59e0b; }
.profit-card::before{ background:#8b5cf6; }

.summary-card span{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.summary-card span i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:50%;
  color:#94a3b8;
  border:1px solid #cbd5e1;
  font-size:10px;
  font-style:normal;
  text-transform:none;
}

.summary-card strong{
  font-size:24px !important;
  color:#172033 !important;
}

.summary-card .delta{
  display:block;
  margin-top:7px;
  padding-right:76px;
  font-size:11px;
  line-height:1.25;
  font-weight:900;
  white-space:normal;
}

.delta.good{ color:#059669; }
.delta.bad{ color:#e11d48; }

.sparkline{
  position:absolute;
  right:12px;
  bottom:12px;
  width:74px;
  height:26px;
  color:#14b8a6;
  opacity:.95;
}

.orders-card .sparkline{ color:#2563eb; }
.foodcost-card .sparkline{ color:#f59e0b; }
.profit-card .sparkline{ color:#8b5cf6; }

.sales-insight-row{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:10px !important;
  margin-top:10px !important;
}

.sales-date-workspace .sales-metric{
  min-height:126px !important;
  border-radius:16px !important;
  background:#fff !important;
  border:1px solid rgba(226,232,240,.82) !important;
  box-shadow:0 14px 34px rgba(26,55,96,.07) !important;
  transition:transform .18s ease, box-shadow .18s ease;
}

.sales-analytics-grid{
  display:grid;
  grid-template-columns:minmax(420px, 1.35fr) minmax(300px, .9fr) minmax(320px, .95fr) minmax(260px, .72fr);
  gap:12px;
  margin:12px 0;
}

.chart-card{
  min-height:210px;
  padding:16px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(226,232,240,.88);
  box-shadow:0 14px 34px rgba(26,55,96,.07);
  transition:transform .18s ease, box-shadow .18s ease;
  overflow:hidden;
}

.trend-card{
  grid-column:span 2;
}

.chart-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:10px;
}

.chart-head span{
  display:block;
  color:#64748b;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
}

.chart-head strong{
  display:block;
  margin-top:4px;
  color:#172033;
  font-size:16px;
  font-weight:1000;
}

.chart-head > b{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  color:#059669;
  background:rgba(16,185,129,.12);
  font-size:12px;
}

.chart-tabs{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}

.chart-tabs button{
  height:28px;
  padding:0 10px;
  border:0;
  border-radius:10px;
  background:#f1f5f9;
  color:#334155;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}

.chart-tabs button.active{
  background:#2563eb;
  color:#fff;
}

.line-chart{
  width:100%;
  height:190px;
  color:#2563eb;
  overflow:visible;
}

.chart-grid-line{
  stroke:#e2e8f0;
  stroke-width:1;
  stroke-dasharray:4 7;
}

.chart-axis{
  fill:#64748b;
  font-size:10px;
  font-weight:800;
}

.chart-area{
  fill:#2563eb;
  opacity:.09;
}

.chart-line{
  fill:none;
  stroke:#2563eb;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 8px 12px rgba(37,99,235,.18));
}

.chart-dot{
  fill:#fff;
  stroke:#2563eb;
  stroke-width:3;
}

.donut-layout{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:14px;
  align-items:center;
}

.donut-chart{
  width:150px;
  height:150px;
  color:#fff;
}

.donut-hole{
  fill:#fff;
}

.donut-legend{
  display:grid;
  gap:9px;
}

.donut-legend div{
  display:grid;
  grid-template-columns:10px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  color:#334155;
  font-size:12px;
  font-weight:900;
}

.donut-legend i{
  width:10px;
  height:10px;
  border-radius:50%;
}

.donut-legend span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ai-recommendations{
  display:grid;
  gap:10px;
}

.ai-rec{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:10px;
  align-items:start;
  color:#334155;
  font-size:12px;
  line-height:1.35;
  font-weight:900;
}

.ai-rec i{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:10px;
  color:#fff;
  background:#2563eb;
  font-style:normal;
}

.ai-rec.green i{ background:#10b981; }
.ai-rec.blue i{ background:#2563eb; }
.ai-rec.orange i{ background:#f59e0b; }
.ai-rec.red i{ background:#f43f5e; }

.ai-rec b{
  display:block;
  margin-top:2px;
  color:#0f766e;
  font-size:11px;
}

.fact-list{
  display:grid;
  gap:10px;
}

.fact-list div{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(90px, auto);
  gap:10px;
  align-items:center;
  min-height:34px;
  border-bottom:1px solid #e2e8f0;
}

.fact-list span{
  color:#64748b;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
}

.fact-list b{
  color:#172033;
  font-size:12px;
  font-weight:1000;
  text-align:right;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sticky-toolbar{
  position:sticky;
  top:76px;
  z-index:10;
  padding:10px 0;
  background:linear-gradient(180deg, rgba(246,251,255,.96), rgba(246,251,255,.88));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.sales-explain{
  margin-top:0 !important;
}

.sales-table{
  border-radius:16px !important;
  background:#fff !important;
  border:1px solid #e2e8f0 !important;
}

.sales-row{
  min-height:38px !important;
  padding:7px 12px !important;
}

.sales-row-head{
  min-height:36px !important;
  background:#f8fafc !important;
}

.sales-rank{
  font-size:15px !important;
}

.sales-name,
.sales-num{
  font-size:12px !important;
}

.bar-cell{
  position:relative;
  display:flex !important;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}

.bar-cell span{
  position:relative;
  z-index:1;
}

.bar-cell i{
  display:block;
  height:4px;
  max-width:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#bfdbfe,#2563eb);
}

.bar-cell.good i{
  background:linear-gradient(90deg,#bbf7d0,#10b981);
}

.bar-cell.bad{
  color:#e11d48 !important;
}

.bar-cell.bad i{
  background:linear-gradient(90deg,#fecdd3,#f43f5e);
}

.margin-pill{
  display:inline-flex !important;
  justify-content:flex-end;
  align-items:center;
  font-weight:1000 !important;
}

.margin-pill.good{ color:#059669 !important; }
.margin-pill.warn{ color:#d97706 !important; }
.margin-pill.bad{ color:#e11d48 !important; }

.last-updated{
  margin:14px 2px 0;
  color:#64748b;
  font-size:12px;
  font-weight:850;
}

.summary-card,
.sales-metric,
.chart-card,
.sales-table{
  animation:softAppear .32s ease both;
}

@keyframes softAppear{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

html[data-theme="dark"] .sales-screen,
html[data-theme="dark"] .sticky-toolbar{
  background:#0f172a !important;
}

html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .sales-metric,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .sales-table{
  background:#162033 !important;
  border-color:#26364f !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .chart-head strong,
html[data-theme="dark"] .summary-card strong,
html[data-theme="dark"] .fact-list b{
  color:#f8fafc !important;
}

html[data-theme="dark"] .chart-head span,
html[data-theme="dark"] .summary-card span,
html[data-theme="dark"] .donut-legend div,
html[data-theme="dark"] .fact-list span,
html[data-theme="dark"] .last-updated{
  color:#cbd5e1 !important;
}

html[data-theme="dark"] .chart-tabs button{
  background:#1e293b !important;
  color:#dbeafe !important;
}

html[data-theme="dark"] .chart-tabs button.active{
  background:#2563eb !important;
  color:#fff !important;
}

html[data-theme="dark"] .chart-grid-line,
html[data-theme="dark"] .fact-list div{
  stroke:#334155 !important;
  border-bottom-color:#26364f !important;
}

html[data-theme="dark"] .donut-hole{
  fill:#162033 !important;
}

html[data-theme="dark"] .sales-row-head{
  background:#101827 !important;
}

@media (max-width:1600px){
  .sales-summary{
    grid-template-columns:repeat(3, minmax(126px, 1fr)) !important;
  }

  .sales-insight-row{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }

  .sales-analytics-grid{
    grid-template-columns:1fr 1fr !important;
  }

  .trend-card{
    grid-column:span 2;
  }
}

@media (max-width:1100px){
  .sales-date-workspace,
  .sales-analytics-grid{
    grid-template-columns:1fr !important;
  }

  .trend-card{
    grid-column:auto;
  }
}


/* ================= BI REFINEMENT V10 ================= */

.sales-content{
  padding:0 24px 64px 24px !important;
}

.sales-date-workspace{
  grid-template-columns:270px minmax(0,1fr) !important;
  gap:14px !important;
  margin-bottom:10px !important;
}

.sales-calendar-popup.embedded,
.sales-calendar-popup.embedded.show{
  max-width:270px !important;
  padding:14px !important;
}

.sales-calendar-popup .cal-day{
  width:27px !important;
  height:27px !important;
  border-radius:9px !important;
}

.sales-calendar-popup .calendar-grid{
  gap:4px !important;
}

.sales-calendar-popup .calendar-actions{
  margin-top:10px !important;
}

.sales-calendar-popup .calendar-actions button{
  height:32px !important;
}

.sales-head{
  align-items:center !important;
  margin-bottom:8px !important;
}

.sales-head .panel-title{
  font-size:15px !important;
}

.sales-subhead{
  font-size:12px !important;
}

.sales-summary{
  grid-template-columns:repeat(6, minmax(132px, 1fr)) !important;
  gap:10px !important;
}

.summary-card{
  min-height:118px !important;
  padding:15px 15px 14px !important;
  border-top:4px solid #10b981 !important;
}

.orders-card{ border-top-color:#2563eb !important; }
.avg-card{ border-top-color:#14b8a6 !important; }
.foodcost-card{ border-top-color:#f59e0b !important; }
.profit-card{ border-top-color:#8b5cf6 !important; }
.margin-card{ border-top-color:#10b981 !important; }

.summary-card strong{
  margin-top:9px !important;
  font-size:26px !important;
}

.summary-card .delta{
  margin-top:8px !important;
  padding-right:78px !important;
  font-size:11px !important;
  line-height:1.2 !important;
}

.sparkline{
  right:14px !important;
  bottom:16px !important;
  width:72px !important;
}

.sales-insight-row{
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  margin-top:10px !important;
}

.sales-date-workspace .sales-metric{
  min-height:158px !important;
}

.metric-line{
  margin:5px 0 !important;
}

.sales-analytics-grid{
  grid-template-columns:minmax(560px, 1.55fr) minmax(310px, .78fr) minmax(320px, .82fr) !important;
  gap:12px !important;
  margin:12px 0 10px !important;
}

.trend-card{
  grid-column:auto !important;
  min-height:340px !important;
}

.structure-card,
.ai-card{
  min-height:340px !important;
}

.line-chart{
  height:292px !important;
}

.donut-layout{
  grid-template-columns:1fr !important;
  justify-items:center;
  gap:10px !important;
}

.donut-chart{
  width:172px !important;
  height:172px !important;
}

.donut-legend{
  width:100%;
}

.ai-recommendations{
  gap:12px !important;
}

.ai-rec{
  grid-template-columns:32px minmax(0,1fr) !important;
  font-size:12px !important;
}

.ai-rec i{
  width:32px !important;
  height:32px !important;
}

.ai-rec b{
  margin-top:4px !important;
  line-height:1.3 !important;
}

.control-strip{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:8px;
  margin:8px 0 10px;
}

.control-strip div{
  min-height:48px;
  padding:10px 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(226,232,240,.88);
  box-shadow:0 10px 24px rgba(26,55,96,.05);
  overflow:hidden;
}

.control-strip span{
  display:block;
  color:#64748b;
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
}

.control-strip b{
  display:block;
  margin-top:5px;
  color:#172033;
  font-size:12px;
  font-weight:1000;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sticky-toolbar{
  top:74px !important;
  margin-top:4px !important;
  padding:8px 0 !important;
}

.report-tabs{
  margin:6px 0 !important;
}

.report-tabs button{
  height:34px !important;
  padding:0 13px !important;
  border-radius:11px !important;
  font-size:12px !important;
}

.sales-explain{
  display:none !important;
}

.sales-table{
  margin-top:8px !important;
}

.sales-row{
  min-height:34px !important;
  padding:5px 10px !important;
}

.sales-row-head{
  min-height:32px !important;
}

.sales-name,
.sales-num{
  font-size:11px !important;
}

html[data-theme="dark"] .control-strip div{
  background:#162033 !important;
  border-color:#26364f !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .control-strip span{
  color:#cbd5e1 !important;
}

html[data-theme="dark"] .control-strip b{
  color:#f8fafc !important;
}


/* ================= SALES DASHBOARD FINAL V15 ================= */

.sales-page{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  max-width:none !important;
  padding:22px 28px 42px !important;
}

.sales-dashboard-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
}

.sales-title-line{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  min-width:0 !important;
}

.sales-title-line h1{
  margin:0 !important;
  color:#111827 !important;
  font-size:32px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  letter-spacing:0 !important;
}

.period-pill{
  height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:0 18px !important;
  border:1px solid rgba(226,232,240,.92) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.92) !important;
  color:#172033 !important;
  font-size:14px !important;
  font-weight:1000 !important;
  box-shadow:0 12px 30px rgba(26,55,96,.08) !important;
  cursor:pointer !important;
  white-space:nowrap !important;
}

.period-pill b{
  color:#2563eb !important;
  font-size:12px !important;
}

.sales-dashboard-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}

.refresh-sales-btn{
  height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 16px !important;
  border:1px solid rgba(37,99,235,.16) !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#ffffff,#eef6ff) !important;
  color:#2563eb !important;
  font-size:13px !important;
  font-weight:1000 !important;
  box-shadow:0 10px 22px rgba(37,99,235,.1) !important;
  cursor:pointer !important;
}

.sales-summary{
  display:grid !important;
  grid-template-columns:repeat(6, minmax(0,1fr)) !important;
  gap:12px !important;
}

.summary-card{
  min-height:132px !important;
  padding:18px 18px 16px !important;
  border-radius:16px !important;
  position:relative !important;
  overflow:hidden !important;
}

.summary-card:before{
  content:"" !important;
  position:absolute !important;
  inset:0 auto auto 0 !important;
  width:100% !important;
  height:4px !important;
  background:currentColor !important;
  opacity:.78 !important;
}

.summary-card strong{
  margin-top:8px !important;
  font-size:27px !important;
  line-height:1 !important;
}

.summary-card .delta{
  margin-top:10px !important;
  max-width:calc(100% - 70px) !important;
  padding-right:0 !important;
  font-size:11px !important;
  line-height:1.25 !important;
}

.summary-card .sparkline{
  right:16px !important;
  bottom:18px !important;
  width:72px !important;
  height:30px !important;
}

.sales-dash-row-second{
  display:grid !important;
  grid-template-columns:320px minmax(520px,1.45fr) minmax(340px,.85fr) !important;
  gap:14px !important;
  align-items:stretch !important;
}

.sales-calendar-popup.embedded,
.sales-calendar-popup.embedded.show{
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  display:block !important;
  max-width:320px !important;
  width:320px !important;
  min-height:290px !important;
  padding:20px 18px !important;
  border-radius:18px !important;
}

.sales-calendar-popup .cal-day{
  width:34px !important;
  height:34px !important;
}

.sales-calendar-popup .calendar-grid{
  gap:7px !important;
}

.sales-insight-row{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}

.sales-metric,
.ai-card,
.trend-card,
.structure-card{
  border-radius:18px !important;
  border:1px solid rgba(226,232,240,.92) !important;
  background:rgba(255,255,255,.9) !important;
  box-shadow:0 18px 44px rgba(26,55,96,.07) !important;
}

.sales-metric{
  min-height:290px !important;
  padding:18px 18px 16px !important;
}

.sales-metric > span{
  font-size:12px !important;
  letter-spacing:.04em !important;
}

.metric-line{
  min-height:30px !important;
  grid-template-columns:24px minmax(0,1fr) auto !important;
}

.metric-line b{
  white-space:nowrap !important;
}

.ai-card{
  min-height:290px !important;
  padding:18px !important;
}

.ai-recommendations{
  gap:12px !important;
}

.ai-rec{
  align-items:flex-start !important;
}

.sales-analytics-grid{
  display:grid !important;
  grid-template-columns:minmax(0,2.1fr) minmax(360px,.9fr) !important;
  gap:14px !important;
  align-items:stretch !important;
}

.trend-card,
.structure-card{
  min-height:342px !important;
  padding:18px !important;
}

.line-chart{
  height:285px !important;
}

.donut-layout{
  min-height:250px !important;
}

.control-strip{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
  margin:0 !important;
}

.control-strip > div{
  min-height:78px !important;
  padding:14px 16px !important;
  border-radius:16px !important;
}

.sales-table-subhead{
  margin:0 0 -4px !important;
  padding:0 4px !important;
  font-size:13px !important;
  font-weight:950 !important;
}

.sticky-toolbar{
  position:sticky !important;
  top:76px !important;
  z-index:12 !important;
}

.sales-table{
  margin-top:2px !important;
}

.sales-row-head{
  position:sticky !important;
  top:146px !important;
  z-index:10 !important;
  background:rgba(248,251,255,.96) !important;
  backdrop-filter:blur(14px) !important;
}

.sales-row{
  min-height:40px !important;
}

.sales-cell,
.sales-row-head button{
  font-size:12px !important;
}

html[data-theme="dark"] .sales-title-line h1{
  color:#f8fafc !important;
}

html[data-theme="dark"] .period-pill,
html[data-theme="dark"] .refresh-sales-btn,
html[data-theme="dark"] .sales-metric,
html[data-theme="dark"] .ai-card,
html[data-theme="dark"] .trend-card,
html[data-theme="dark"] .structure-card{
  background:#162033 !important;
  border-color:#26364f !important;
  box-shadow:none !important;
}

@media (max-width:1700px){
  .sales-summary{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .sales-dash-row-second{
    grid-template-columns:300px minmax(0,1fr) !important;
  }

  .sales-dash-row-second .ai-card{
    grid-column:1 / -1 !important;
  }

  .sales-calendar-popup.embedded,
  .sales-calendar-popup.embedded.show{
    max-width:300px !important;
    width:300px !important;
  }
}

@media (max-width:1200px){
  .sales-dashboard-header,
  .sales-title-line{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  .sales-summary,
  .sales-dash-row-second,
  .sales-analytics-grid,
  .sales-insight-row,
  .control-strip{
    grid-template-columns:1fr !important;
  }

  .sales-calendar-popup.embedded,
  .sales-calendar-popup.embedded.show{
    max-width:none !important;
    width:100% !important;
  }
}

.login-screen{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px;
  background:
    radial-gradient(circle at 78% 18%, rgba(45,212,191,.20), transparent 34%),
    radial-gradient(circle at 12% 88%, rgba(59,130,246,.14), transparent 34%),
    #f4f9fc;
  color:#111827;
}

.login-wrap{
  width:min(980px,100%);
  display:grid;
  grid-template-columns:minmax(260px,.9fr) minmax(320px,1fr);
  gap:20px;
  align-items:stretch;
}

.login-brand,
.login-card{
  border:1px solid rgba(226,232,240,.95);
  border-radius:24px;
  background:rgba(255,255,255,.84);
  box-shadow:0 24px 70px rgba(15,23,42,.12), 0 2px 10px rgba(15,23,42,.05);
  backdrop-filter:blur(22px);
}

.login-brand{
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:420px;
}

.login-logo{
  font-size:48px;
  font-weight:1000;
  letter-spacing:.02em;
  line-height:.95;
}

.login-brand p{
  margin:12px 0 0;
  max-width:310px;
  color:#64748b;
  font-weight:850;
  line-height:1.45;
}

.ramen-mark{
  position:relative;
  width:170px;
  height:118px;
  margin:30px auto 0;
  overflow:visible;
  filter:drop-shadow(0 18px 22px rgba(15,23,42,.13));
  animation:ramenFloat 4.6s ease-in-out infinite;
}

.ramen-mark:before{
  content:"";
  position:absolute;
  width:86px;
  height:18px;
  left:41px;
  bottom:16px;
  border-radius:999px;
  background:rgba(15,23,42,.08);
  filter:blur(5px);
  animation:ramenShadow 4.6s ease-in-out infinite;
}

.ramen-mark:after{
  content:"";
  position:absolute;
  left:36px;
  top:56px;
  width:100px;
  height:18px;
  border-radius:999px;
  background:
    linear-gradient(90deg, transparent 0 8%, #f59e0b 8% 15%, transparent 15% 23%, #f59e0b 23% 31%, transparent 31% 100%),
    #fde68a;
  box-shadow:0 8px 0 rgba(251,146,60,.35);
}

.ramen-steam{
  position:absolute;
  top:8px;
  width:10px;
  height:38px;
  border-radius:999px;
  border-left:3px solid rgba(20,184,166,.42);
  transform:rotate(18deg);
  animation:ramenSteam 2.8s ease-in-out infinite;
}

.steam-one{left:50px;}
.steam-two{left:80px;animation-delay:.35s;}
.steam-three{left:110px;animation-delay:.7s;}

.ramen-bowl{
  position:absolute;
  left:28px;
  bottom:24px;
  width:120px;
  height:48px;
  border-radius:10px 10px 44px 44px;
  background:linear-gradient(135deg,#2563eb,#14b8a6);
  box-shadow:0 14px 24px rgba(37,99,235,.22), inset 0 -7px 0 rgba(15,23,42,.10);
  animation:ramenBowl 3.8s ease-in-out infinite;
}

.ramen-bowl:before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:10px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
}

.ramen-bowl i,
.ramen-bowl b{
  position:absolute;
  top:-32px;
  width:88px;
  height:5px;
  border-radius:999px;
  background:#0f172a;
  transform-origin:left center;
}

.ramen-bowl i{
  left:14px;
  transform:rotate(-18deg);
}

.ramen-bowl b{
  left:28px;
  transform:rotate(14deg);
}

.ramen-mark em{
  display:none;
}

@keyframes ramenSteam{
  0%,100%{transform:translateY(6px) rotate(18deg) scaleY(.88);opacity:.22;}
  50%{transform:translateY(-8px) rotate(10deg) scaleY(1.08);opacity:.78;}
}

@keyframes ramenFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}

@keyframes ramenBowl{
  0%,100%{transform:rotate(-1deg);}
  50%{transform:rotate(1.5deg);}
}

@keyframes ramenShadow{
  0%,100%{transform:scaleX(1);opacity:.7;}
  50%{transform:scaleX(.86);opacity:.45;}
}

.login-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.login-badges span{
  padding:8px 11px;
  border-radius:999px;
  background:#eef6ff;
  color:#2563eb;
  font-size:12px;
  font-weight:950;
}

.login-card{
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.login-card h1{
  margin:0;
  font-size:32px;
  letter-spacing:0;
}

.login-card > p{
  margin:8px 0 22px;
  color:#64748b;
  font-weight:850;
}

.login-form{
  display:grid;
  gap:14px;
}

.login-form label{
  display:grid;
  gap:8px;
  color:#475569;
  font-size:12px;
  font-weight:1000;
  text-transform:uppercase;
}

.login-form select,
.login-form input{
  height:48px;
  border:1px solid #dbe6f2;
  border-radius:14px;
  background:#fff;
  padding:0 14px;
  color:#111827;
  font-size:15px;
  font-weight:900;
  outline:none;
}

.login-form select:focus,
.login-form input:focus{
  border-color:#2f6df6;
  box-shadow:0 0 0 4px rgba(47,109,246,.12);
}

.login-form button{
  height:50px;
  border:0;
  border-radius:15px;
  background:linear-gradient(135deg,#2f6df6,#19bdb5);
  color:#fff;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 16px 36px rgba(47,109,246,.22);
}

.login-toast{
  position:fixed;
  z-index:50;
  top:26px;
  left:50%;
  transform:translateX(-50%);
  width:min(420px,calc(100% - 32px));
  padding:14px 18px;
  border:1px solid rgba(251,113,133,.26);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#be123c;
  text-align:center;
  font-size:14px;
  font-weight:950;
  box-shadow:0 22px 60px rgba(190,18,60,.14),0 8px 20px rgba(15,23,42,.08);
  backdrop-filter:blur(18px);
  animation:loginToast 8s ease forwards;
}

@keyframes loginToast{
  0%{opacity:0;transform:translate(-50%,-14px) scale(.98);}
  8%,78%{opacity:1;transform:translate(-50%,0) scale(1);}
  100%{opacity:0;transform:translate(-50%,-14px) scale(.98);pointer-events:none;}
}

.login-error{
  padding:11px 13px;
  border-radius:14px;
  background:#fff1f2;
  color:#e11d48;
  font-weight:950;
}

.login-hint{
  margin-top:18px;
  padding:14px;
  border-radius:16px;
  background:#f8fafc;
  color:#64748b;
  font-size:13px;
  font-weight:850;
  line-height:1.45;
}

.login-hint b{
  color:#0f172a;
}

.login-footer{
  position:fixed;
  right:24px;
  bottom:18px;
  color:#64748b;
  font-size:12px;
  font-weight:950;
}

.login-footer span{
  margin-left:10px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#2563eb;
  box-shadow:0 8px 20px rgba(15,23,42,.08);
}

.menu-logout{
  border:0;
  width:38px;
  height:38px;
  border-radius:16px;
  background:linear-gradient(135deg,#f8fafc,#eef6ff);
  color:#2563eb;
  font-size:18px;
  font-weight:1000;
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow:inset 0 0 0 1px rgba(37,99,235,.12),0 10px 22px rgba(37,99,235,.10);
  transition:.18s ease;
}

.menu-logout span{
  display:block;
  transform:translateY(-1px);
}

.menu-logout:hover{
  background:linear-gradient(135deg,#fff1f2,#fee2e2);
  color:#dc2626;
  box-shadow:inset 0 0 0 1px rgba(220,38,38,.16),0 14px 28px rgba(220,38,38,.14);
  transform:translateY(-1px);
}

.logout-confirm{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(15,23,42,.22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  pointer-events:none;
  transition:.18s ease;
}

.logout-confirm.show{
  opacity:1;
  pointer-events:auto;
}

.logout-confirm-card{
  width:min(420px,100%);
  border:1px solid rgba(226,232,240,.86);
  border-radius:24px;
  background:rgba(255,255,255,.88);
  box-shadow:0 30px 90px rgba(15,23,42,.22),0 10px 26px rgba(15,23,42,.10);
  padding:20px;
  display:grid;
  grid-template-columns:54px 1fr;
  gap:14px;
  transform:translateY(10px) scale(.98);
  transition:.18s ease;
}

.logout-confirm.show .logout-confirm-card{
  transform:translateY(0) scale(1);
}

.logout-confirm-icon{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#eef6ff,#dbeafe);
  color:#2563eb;
  font-size:26px;
  font-weight:1000;
}

.logout-confirm h3{
  margin:0;
  color:#0f172a;
  font-size:22px;
}

.logout-confirm p{
  margin:6px 0 0;
  color:#64748b;
  font-weight:800;
  line-height:1.35;
}

.logout-confirm-actions{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:8px;
}

.logout-confirm-actions button{
  height:44px;
  border:0;
  border-radius:15px;
  font-weight:1000;
  cursor:pointer;
}

.logout-confirm-actions button:first-child{
  background:#eef4fb;
  color:#334155;
}

.logout-confirm-actions button:last-child{
  background:linear-gradient(135deg,#ef4444,#f97316);
  color:white;
  box-shadow:0 14px 28px rgba(239,68,68,.18);
}

html[data-theme="dark"] .logout-confirm-card{
  background:rgba(17,28,47,.94);
  border-color:rgba(148,163,184,.18);
}

html[data-theme="dark"] .logout-confirm h3{
  color:#f8fafc;
}

html[data-theme="dark"] .logout-confirm p{
  color:#9fb0c8;
}

html[data-theme="dark"] .logout-confirm-actions button:first-child{
  background:#162033;
  color:#dbeafe;
}

html[data-theme="dark"] .login-screen{
  background:
    radial-gradient(circle at 78% 18%, rgba(45,212,191,.12), transparent 34%),
    radial-gradient(circle at 12% 88%, rgba(59,130,246,.16), transparent 34%),
    #0b1220;
  color:#f8fafc;
}

html[data-theme="dark"] .login-brand,
html[data-theme="dark"] .login-card{
  background:rgba(17,28,47,.92);
  border-color:rgba(148,163,184,.18);
}

html[data-theme="dark"] .login-card h1,
html[data-theme="dark"] .login-logo,
html[data-theme="dark"] .login-hint b{
  color:#f8fafc;
}

html[data-theme="dark"] .login-card > p,
html[data-theme="dark"] .login-brand p,
html[data-theme="dark"] .login-form label,
html[data-theme="dark"] .login-hint{
  color:#9fb0c8;
}

html[data-theme="dark"] .login-form select,
html[data-theme="dark"] .login-form input,
html[data-theme="dark"] .login-hint{
  background:#0f1a2d;
  color:#f8fafc;
  border-color:rgba(148,163,184,.18);
}

html[data-theme="dark"] .ramen-bowl i,
html[data-theme="dark"] .ramen-bowl b{
  background:#e2e8f0;
}

html[data-theme="dark"] .ramen-mark em,
html[data-theme="dark"] .login-footer{
  color:#9fb0c8;
}

html[data-theme="dark"] .login-footer span{
  background:rgba(17,28,47,.9);
  color:#7dd3fc;
}

@media (max-width:760px){
  .login-wrap{
    grid-template-columns:1fr;
  }
  .login-brand{
    min-height:auto;
    gap:28px;
  }
}

/* ================= SALES READABILITY V18 ================= */

body.manager-mode.sales-screen .summary-card,
body.manager-mode.sales-screen .sales-calendar-popup.embedded,
body.manager-mode.sales-screen .sales-metric,
body.manager-mode.sales-screen .ai-card,
body.manager-mode.sales-screen .trend-card,
body.manager-mode.sales-screen .structure-card,
body.manager-mode.sales-screen .control-strip > div,
body.manager-mode.sales-screen .sales-table,
body.manager-mode.sales-screen .sticky-toolbar{
  box-shadow:
    0 22px 55px rgba(15,23,42,.12),
    0 6px 16px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

body.manager-mode.sales-screen .summary-card{
  min-height:104px !important;
  padding:14px 15px 13px !important;
}

body.manager-mode.sales-screen .summary-card span{
  font-size:11px !important;
  color:#64748b !important;
}

body.manager-mode.sales-screen .summary-card strong{
  font-size:24px !important;
}

body.manager-mode.sales-screen .summary-card .delta{
  font-size:10px !important;
  line-height:1.18 !important;
  max-width:calc(100% - 76px) !important;
}

body.manager-mode.sales-screen .summary-card .sparkline{
  width:74px !important;
  height:32px !important;
  right:12px !important;
  bottom:13px !important;
  opacity:1 !important;
}

body.manager-mode.sales-screen .spark-area{
  fill:currentColor !important;
  opacity:.13 !important;
}

body.manager-mode.sales-screen .spark-line{
  filter:drop-shadow(0 3px 4px rgba(37,99,235,.18)) !important;
}

body.manager-mode.sales-screen .spark-dot{
  fill:#fff !important;
  stroke:currentColor !important;
  stroke-width:2.6 !important;
}

body.manager-mode.sales-screen .sales-metric,
body.manager-mode.sales-screen .ai-card{
  min-height:232px !important;
  padding:16px !important;
}

body.manager-mode.sales-screen .sales-metric > span,
body.manager-mode.sales-screen .ai-card .chart-head span{
  display:block !important;
  color:#1e40af !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  letter-spacing:.02em !important;
}

body.manager-mode.sales-screen .ai-card .chart-head strong{
  margin-top:5px !important;
  display:block !important;
  color:#0f172a !important;
  font-size:16px !important;
  line-height:1.05 !important;
  font-weight:1000 !important;
}

body.manager-mode.sales-screen .sales-metric strong{
  margin-top:12px !important;
}

body.manager-mode.sales-screen .metric-line{
  min-height:31px !important;
  grid-template-columns:24px minmax(0,1fr) auto !important;
  gap:9px !important;
  font-size:13px !important;
}

body.manager-mode.sales-screen .metric-line i{
  width:22px !important;
  height:22px !important;
  border-radius:8px !important;
  font-size:12px !important;
  font-weight:1000 !important;
}

body.manager-mode.sales-screen .metric-line em{
  color:#334155 !important;
  font-size:13px !important;
  font-weight:1000 !important;
}

body.manager-mode.sales-screen .metric-line b{
  color:#04786d !important;
  font-size:13px !important;
  font-weight:1000 !important;
}

body.manager-mode.sales-screen .sales-metric > small{
  margin-top:11px !important;
  color:#64748b !important;
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
}

body.manager-mode.sales-screen .ai-recommendations{
  gap:10px !important;
}

body.manager-mode.sales-screen .ai-rec{
  gap:10px !important;
  font-size:12.5px !important;
  line-height:1.22 !important;
}

body.manager-mode.sales-screen .ai-rec i{
  width:27px !important;
  height:27px !important;
  border-radius:9px !important;
  font-size:12px !important;
}

body.manager-mode.sales-screen .ai-rec span{
  color:#0f4f5f !important;
  font-weight:1000 !important;
}

body.manager-mode.sales-screen .ai-rec span b{
  margin-top:3px !important;
  color:#0f766e !important;
  font-size:11.5px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
}

body.manager-mode.sales-screen .chart-head{
  margin-bottom:10px !important;
}

html[data-theme="dark"] body.manager-mode.sales-screen .summary-card,
html[data-theme="dark"] body.manager-mode.sales-screen .sales-calendar-popup.embedded,
html[data-theme="dark"] body.manager-mode.sales-screen .sales-metric,
html[data-theme="dark"] body.manager-mode.sales-screen .ai-card,
html[data-theme="dark"] body.manager-mode.sales-screen .trend-card,
html[data-theme="dark"] body.manager-mode.sales-screen .structure-card,
html[data-theme="dark"] body.manager-mode.sales-screen .control-strip > div,
html[data-theme="dark"] body.manager-mode.sales-screen .sales-table,
html[data-theme="dark"] body.manager-mode.sales-screen .sticky-toolbar{
  box-shadow:
    0 22px 55px rgba(0,0,0,.32),
    0 6px 16px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* ================= SALES HARD FIX V17 TRUE EOF ================= */

.sales-page{ gap:10px !important; padding:18px 24px 40px !important; }
.sales-dashboard-header{ margin-bottom:0 !important; }
.sales-title-line h1{ font-size:30px !important; }

.period-pill{
  height:36px !important;
  padding:0 14px !important;
  font-size:13px !important;
  box-shadow:0 10px 24px rgba(15,23,42,.08) !important;
}

.refresh-sales-btn,
.reset-settings-btn,
.sales-status{
  height:33px !important;
  padding:0 12px !important;
  font-size:12px !important;
}

.sales-summary{ gap:9px !important; }

.summary-card{
  min-height:92px !important;
  padding:13px 14px 11px !important;
  border:1px solid rgba(226,232,240,.86) !important;
  border-top:1px solid rgba(226,232,240,.86) !important;
  box-shadow:0 16px 36px rgba(15,23,42,.10) !important;
}

.summary-card:before{ display:none !important; }
.summary-card span{ font-size:10px !important; }
.summary-card strong{ margin-top:5px !important; font-size:22px !important; }

.summary-card .delta{
  margin-top:6px !important;
  max-width:calc(100% - 54px) !important;
  padding-right:0 !important;
  font-size:9.5px !important;
  line-height:1.14 !important;
}

.summary-card .sparkline{
  right:11px !important;
  bottom:13px !important;
  width:52px !important;
  height:21px !important;
}

.sales-dash-row-second{
  grid-template-columns:280px minmax(460px,1.45fr) minmax(320px,.85fr) !important;
  gap:10px !important;
  align-items:stretch !important;
}

.sales-calendar-popup.embedded,
.sales-calendar-popup.embedded.show{
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  display:block !important;
  max-width:280px !important;
  width:280px !important;
  min-height:218px !important;
  padding:13px !important;
  border-radius:16px !important;
  box-shadow:0 16px 36px rgba(15,23,42,.10) !important;
}

.sales-calendar-popup .range-pick-state{ gap:8px !important; margin-bottom:8px !important; }
.sales-calendar-popup .range-pick-state div{ min-height:38px !important; padding:7px 9px !important; }
.sales-calendar-popup .range-pick-state span{ font-size:9px !important; }
.sales-calendar-popup .range-pick-state strong{ font-size:11px !important; }
.sales-calendar-popup .calendar-head{ margin-bottom:7px !important; }
.sales-calendar-popup .calendar-week{ margin-bottom:5px !important; }
.sales-calendar-popup .calendar-grid{ gap:4px !important; }
.sales-calendar-popup .cal-day{ width:27px !important; height:27px !important; border-radius:9px !important; font-size:11px !important; }
.sales-calendar-popup .calendar-hint{ margin-top:8px !important; font-size:9.5px !important; line-height:1.2 !important; }
.sales-calendar-popup .calendar-actions{ margin-top:8px !important; }
.sales-calendar-popup .calendar-actions button{ height:30px !important; font-size:11px !important; }

.sales-insight-row{ gap:10px !important; }

.sales-metric,
.ai-card{
  min-height:218px !important;
  padding:13px !important;
  border-radius:16px !important;
  box-shadow:0 16px 36px rgba(15,23,42,.10) !important;
}

.sales-metric > span,
.chart-head span{ font-size:10px !important; }
.sales-metric > small{ font-size:10px !important; }
.metric-line{ min-height:24px !important; grid-template-columns:20px minmax(0,1fr) auto !important; gap:7px !important; font-size:11px !important; }
.metric-line i{ width:18px !important; height:18px !important; font-size:10px !important; }
.metric-line b{ font-size:11px !important; }
.chart-head{ margin-bottom:7px !important; }
.chart-head strong{ font-size:14px !important; }
.ai-recommendations{ gap:7px !important; }
.ai-rec{ gap:8px !important; font-size:10.5px !important; line-height:1.18 !important; }
.ai-rec i{ width:23px !important; height:23px !important; font-size:11px !important; }
.ai-rec span b{ margin-top:2px !important; font-size:10px !important; line-height:1.15 !important; }

.trend-card,
.structure-card{
  min-height:300px !important;
  padding:14px !important;
  border-radius:16px !important;
  box-shadow:0 16px 36px rgba(15,23,42,.10) !important;
}

.line-chart{ height:240px !important; }
.donut-layout{ min-height:210px !important; }

.control-strip{ gap:9px !important; }
.control-strip > div{ min-height:62px !important; padding:10px 12px !important; border-radius:15px !important; box-shadow:0 14px 30px rgba(15,23,42,.09) !important; }
.control-strip span{ font-size:9.5px !important; }
.control-strip b{ margin-top:5px !important; font-size:13px !important; }
.control-strip small{ margin-top:4px !important; font-size:10px !important; }

.sticky-toolbar{
  position:relative !important;
  top:auto !important;
  z-index:auto !important;
  padding:9px 10px !important;
  gap:7px 10px !important;
  box-shadow:0 14px 30px rgba(15,23,42,.07) !important;
}

.report-tabs{ gap:6px !important; }
.report-tabs button{ height:32px !important; padding:0 12px !important; font-size:11px !important; }
.sales-explain{ margin:0 !important; gap:10px !important; }

.sales-table{
  display:block !important;
  width:100% !important;
  overflow-x:auto !important;
  border-radius:16px !important;
  border:1px solid rgba(226,232,240,.88) !important;
  background:rgba(255,255,255,.9) !important;
  box-shadow:0 16px 38px rgba(15,23,42,.09) !important;
}

#salesReport{
  display:block !important;
  width:100% !important;
}

.sales-row,
.sales-row-head,
#salesReport .sales-row{
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  min-width:1180px !important;
  position:relative !important;
  top:auto !important;
  z-index:auto !important;
}

.sales-row-head{
  order:0 !important;
  background:rgba(248,251,255,.98) !important;
  border-bottom:1px solid rgba(226,232,240,.9) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

#salesReport{ order:1 !important; }
.sales-row{ min-height:38px !important; border-bottom:1px solid rgba(226,232,240,.7) !important; }
#salesReport .sales-row:last-child{ border-bottom:0 !important; }

.sales-cell,
.sales-row-head button{
  min-height:38px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  font-size:12px !important;
  position:relative !important;
  top:auto !important;
}

.sales-row > [data-col="name"],
.sales-row-head > [data-col="name"]{
  flex:1 1 auto !important;
  min-width:320px !important;
}

html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .sales-calendar-popup.embedded,
html[data-theme="dark"] .sales-metric,
html[data-theme="dark"] .ai-card,
html[data-theme="dark"] .trend-card,
html[data-theme="dark"] .structure-card,
html[data-theme="dark"] .control-strip > div,
html[data-theme="dark"] .sales-table,
html[data-theme="dark"] .sticky-toolbar{
  box-shadow:0 16px 34px rgba(0,0,0,.24) !important;
}

@media (max-width:1700px){
  .sales-summary{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .sales-dash-row-second{ grid-template-columns:280px minmax(0,1fr) !important; }
  .sales-dash-row-second .ai-card{ grid-column:1 / -1 !important; }
  .sales-calendar-popup.embedded,
  .sales-calendar-popup.embedded.show{ max-width:280px !important; width:280px !important; }
}

/* ================= SALES HARD FIX V17 EOF ================= */

body.manager-mode.sales-screen .sales-page{
  gap:10px !important;
  padding:18px 24px 40px !important;
}

body.manager-mode.sales-screen .summary-card{
  min-height:92px !important;
  padding:13px 14px 11px !important;
  border:1px solid rgba(226,232,240,.86) !important;
  border-top:1px solid rgba(226,232,240,.86) !important;
  box-shadow:0 16px 36px rgba(15,23,42,.10) !important;
}

body.manager-mode.sales-screen .summary-card:before{
  display:none !important;
}

body.manager-mode.sales-screen .summary-card strong{
  margin-top:5px !important;
  font-size:22px !important;
}

body.manager-mode.sales-screen .summary-card .delta{
  margin-top:6px !important;
  max-width:calc(100% - 54px) !important;
  padding-right:0 !important;
  font-size:9.5px !important;
  line-height:1.14 !important;
}

body.manager-mode.sales-screen .summary-card .sparkline{
  right:11px !important;
  bottom:13px !important;
  width:52px !important;
  height:21px !important;
}

body.manager-mode.sales-screen .sales-dash-row-second{
  grid-template-columns:280px minmax(460px,1.45fr) minmax(320px,.85fr) !important;
  gap:10px !important;
}

body.manager-mode.sales-screen .sales-calendar-popup.embedded,
body.manager-mode.sales-screen .sales-calendar-popup.embedded.show{
  max-width:280px !important;
  width:280px !important;
  min-height:218px !important;
  padding:13px !important;
  box-shadow:0 16px 36px rgba(15,23,42,.10) !important;
}

body.manager-mode.sales-screen .sales-calendar-popup .cal-day{
  width:27px !important;
  height:27px !important;
  border-radius:9px !important;
  font-size:11px !important;
}

body.manager-mode.sales-screen .sales-calendar-popup .calendar-grid{
  gap:4px !important;
}

body.manager-mode.sales-screen .sales-calendar-popup .calendar-hint{
  margin-top:8px !important;
  font-size:9.5px !important;
  line-height:1.2 !important;
}

body.manager-mode.sales-screen .sales-metric,
body.manager-mode.sales-screen .ai-card{
  min-height:218px !important;
  padding:13px !important;
  box-shadow:0 16px 36px rgba(15,23,42,.10) !important;
}

body.manager-mode.sales-screen .metric-line{
  min-height:24px !important;
  grid-template-columns:20px minmax(0,1fr) auto !important;
  gap:7px !important;
  font-size:11px !important;
}

body.manager-mode.sales-screen .ai-recommendations{
  gap:7px !important;
}

body.manager-mode.sales-screen .ai-rec{
  gap:8px !important;
  font-size:10.5px !important;
  line-height:1.18 !important;
}

body.manager-mode.sales-screen .trend-card,
body.manager-mode.sales-screen .structure-card{
  min-height:300px !important;
  padding:14px !important;
  box-shadow:0 16px 36px rgba(15,23,42,.10) !important;
}

body.manager-mode.sales-screen .line-chart{
  height:240px !important;
}

body.manager-mode.sales-screen .control-strip > div{
  min-height:62px !important;
  padding:10px 12px !important;
  box-shadow:0 14px 30px rgba(15,23,42,.09) !important;
}

body.manager-mode.sales-screen .sticky-toolbar{
  position:relative !important;
  top:auto !important;
  z-index:auto !important;
}

body.manager-mode.sales-screen .sales-table{
  display:block !important;
  width:100% !important;
  overflow-x:auto !important;
  box-shadow:0 16px 38px rgba(15,23,42,.09) !important;
}

body.manager-mode.sales-screen .sales-row,
body.manager-mode.sales-screen .sales-row-head,
body.manager-mode.sales-screen #salesReport .sales-row{
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  min-width:1180px !important;
  position:relative !important;
  top:auto !important;
  z-index:auto !important;
}

body.manager-mode.sales-screen .sales-row-head{
  order:0 !important;
  position:relative !important;
  top:auto !important;
  z-index:auto !important;
  background:rgba(248,251,255,.98) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

body.manager-mode.sales-screen #salesReport{
  display:block !important;
  width:100% !important;
  order:1 !important;
}

body.manager-mode.sales-screen .sales-cell,
body.manager-mode.sales-screen .sales-row-head button{
  min-height:38px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  font-size:12px !important;
  position:relative !important;
  top:auto !important;
}

.sales-page{
  gap:10px !important;
  padding:18px 24px 40px !important;
}

.sales-dashboard-header{
  margin-bottom:0 !important;
}

.sales-title-line h1{
  font-size:30px !important;
}

.period-pill{
  height:36px !important;
  padding:0 14px !important;
  font-size:13px !important;
  border-color:rgba(226,232,240,.88) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.08) !important;
}

.refresh-sales-btn,
.reset-settings-btn,
.sales-status{
  height:33px !important;
  padding:0 12px !important;
  font-size:12px !important;
}

.sales-summary{
  gap:9px !important;
}

.summary-card{
  min-height:92px !important;
  padding:13px 14px 11px !important;
  border:1px solid rgba(226,232,240,.86) !important;
  border-top:1px solid rgba(226,232,240,.86) !important;
  box-shadow:0 16px 36px rgba(15,23,42,.10) !important;
}

.summary-card:before{
  display:none !important;
}

.summary-card span{
  font-size:10px !important;
}

.summary-card strong{
  margin-top:5px !important;
  font-size:22px !important;
}

.summary-card .delta{
  margin-top:6px !important;
  max-width:calc(100% - 54px) !important;
  padding-right:0 !important;
  font-size:9.5px !important;
  line-height:1.14 !important;
}

.summary-card .sparkline{
  right:11px !important;
  bottom:13px !important;
  width:52px !important;
  height:21px !important;
}

.sales-dash-row-second{
  grid-template-columns:280px minmax(460px,1.45fr) minmax(320px,.85fr) !important;
  gap:10px !important;
  align-items:stretch !important;
}

.sales-calendar-popup.embedded,
.sales-calendar-popup.embedded.show{
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  display:block !important;
  max-width:280px !important;
  width:280px !important;
  min-height:218px !important;
  padding:13px !important;
  border-radius:16px !important;
  box-shadow:0 16px 36px rgba(15,23,42,.10) !important;
}

.sales-calendar-popup .range-pick-state{
  gap:8px !important;
  margin-bottom:8px !important;
}

.sales-calendar-popup .range-pick-state div{
  min-height:38px !important;
  padding:7px 9px !important;
}

.sales-calendar-popup .range-pick-state span{
  font-size:9px !important;
}

.sales-calendar-popup .range-pick-state strong{
  font-size:11px !important;
}

.sales-calendar-popup .calendar-head{
  margin-bottom:7px !important;
}

.sales-calendar-popup .calendar-week{
  margin-bottom:5px !important;
}

.sales-calendar-popup .calendar-grid{
  gap:4px !important;
}

.sales-calendar-popup .cal-day{
  width:27px !important;
  height:27px !important;
  border-radius:9px !important;
  font-size:11px !important;
}

.sales-calendar-popup .calendar-hint{
  margin-top:8px !important;
  font-size:9.5px !important;
  line-height:1.2 !important;
}

.sales-calendar-popup .calendar-actions{
  margin-top:8px !important;
}

.sales-calendar-popup .calendar-actions button{
  height:30px !important;
  font-size:11px !important;
}

.sales-insight-row{
  gap:10px !important;
}

.sales-metric,
.ai-card{
  min-height:218px !important;
  padding:13px !important;
  border-radius:16px !important;
  box-shadow:0 16px 36px rgba(15,23,42,.10) !important;
}

.sales-metric > span,
.chart-head span{
  font-size:10px !important;
}

.sales-metric > small{
  font-size:10px !important;
}

.metric-line{
  min-height:24px !important;
  grid-template-columns:20px minmax(0,1fr) auto !important;
  gap:7px !important;
  font-size:11px !important;
}

.metric-line i{
  width:18px !important;
  height:18px !important;
  font-size:10px !important;
}

.metric-line b{
  font-size:11px !important;
}

.chart-head{
  margin-bottom:7px !important;
}

.chart-head strong{
  font-size:14px !important;
}

.ai-recommendations{
  gap:7px !important;
}

.ai-rec{
  gap:8px !important;
  font-size:10.5px !important;
  line-height:1.18 !important;
}

.ai-rec i{
  width:23px !important;
  height:23px !important;
  font-size:11px !important;
}

.ai-rec span b{
  margin-top:2px !important;
  font-size:10px !important;
  line-height:1.15 !important;
}

.trend-card,
.structure-card{
  min-height:300px !important;
  padding:14px !important;
  border-radius:16px !important;
  box-shadow:0 16px 36px rgba(15,23,42,.10) !important;
}

.line-chart{
  height:240px !important;
}

.donut-layout{
  min-height:210px !important;
}

.control-strip{
  gap:9px !important;
}

.control-strip > div{
  min-height:62px !important;
  padding:10px 12px !important;
  border-radius:15px !important;
  box-shadow:0 14px 30px rgba(15,23,42,.09) !important;
}

.control-strip span{
  font-size:9.5px !important;
}

.control-strip b{
  margin-top:5px !important;
  font-size:13px !important;
}

.control-strip small{
  margin-top:4px !important;
  font-size:10px !important;
}

.sticky-toolbar{
  position:relative !important;
  top:auto !important;
  z-index:auto !important;
  padding:9px 10px !important;
  gap:7px 10px !important;
  box-shadow:0 14px 30px rgba(15,23,42,.07) !important;
}

.report-tabs{
  gap:6px !important;
}

.report-tabs button{
  height:32px !important;
  padding:0 12px !important;
  font-size:11px !important;
}

.sales-explain{
  margin:0 !important;
  gap:10px !important;
}

.sales-table{
  display:block !important;
  width:100% !important;
  overflow-x:auto !important;
  border-radius:16px !important;
  border:1px solid rgba(226,232,240,.88) !important;
  background:rgba(255,255,255,.9) !important;
  box-shadow:0 16px 38px rgba(15,23,42,.09) !important;
}

#salesReport{
  display:block !important;
  width:100% !important;
}

.sales-row,
.sales-row-head,
#salesReport .sales-row{
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  min-width:1180px !important;
  position:relative !important;
  top:auto !important;
  z-index:auto !important;
}

.sales-row-head{
  order:0 !important;
  background:rgba(248,251,255,.98) !important;
  border-bottom:1px solid rgba(226,232,240,.9) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

#salesReport{
  order:1 !important;
}

.sales-row{
  min-height:38px !important;
  border-bottom:1px solid rgba(226,232,240,.7) !important;
}

#salesReport .sales-row:last-child{
  border-bottom:0 !important;
}

.sales-cell,
.sales-row-head button{
  min-height:38px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  font-size:12px !important;
  position:relative !important;
  top:auto !important;
}

.sales-row > [data-col="name"],
.sales-row-head > [data-col="name"]{
  flex:1 1 auto !important;
  min-width:320px !important;
}

html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .sales-calendar-popup.embedded,
html[data-theme="dark"] .sales-metric,
html[data-theme="dark"] .ai-card,
html[data-theme="dark"] .trend-card,
html[data-theme="dark"] .structure-card,
html[data-theme="dark"] .control-strip > div,
html[data-theme="dark"] .sales-table,
html[data-theme="dark"] .sticky-toolbar{
  box-shadow:0 16px 34px rgba(0,0,0,.24) !important;
}

@media (max-width:1700px){
  .sales-summary{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .sales-dash-row-second{
    grid-template-columns:280px minmax(0,1fr) !important;
  }

  .sales-dash-row-second .ai-card{
    grid-column:1 / -1 !important;
  }

  .sales-calendar-popup.embedded,
  .sales-calendar-popup.embedded.show{
    max-width:280px !important;
    width:280px !important;
  }
}

/* ================= SALES COMPACT FIX V16 ================= */

.sales-page{
  gap:12px !important;
  padding:18px 24px 40px !important;
}

.sales-dashboard-header{
  margin-bottom:2px !important;
}

.sales-title-line h1{
  font-size:30px !important;
}

.period-pill{
  height:38px !important;
  padding:0 15px !important;
  font-size:13px !important;
  box-shadow:0 8px 22px rgba(26,55,96,.07) !important;
}

.top-updated{
  font-size:11px !important;
}

.refresh-sales-btn,
.reset-settings-btn,
.sales-status{
  height:34px !important;
  padding:0 13px !important;
  font-size:12px !important;
}

.sales-summary{
  gap:10px !important;
}

.summary-card{
  min-height:96px !important;
  padding:14px 15px 12px !important;
  border:1px solid rgba(226,232,240,.88) !important;
  border-top-color:rgba(226,232,240,.88) !important;
  box-shadow:0 14px 34px rgba(26,55,96,.1) !important;
}

.summary-card:before{
  display:none !important;
}

.summary-card span{
  font-size:10px !important;
}

.summary-card strong{
  margin-top:6px !important;
  font-size:22px !important;
}

.summary-card .delta{
  margin-top:6px !important;
  max-width:calc(100% - 58px) !important;
  font-size:9.5px !important;
  line-height:1.16 !important;
}

.summary-card .sparkline{
  right:12px !important;
  bottom:14px !important;
  width:54px !important;
  height:22px !important;
}

.sales-dash-row-second{
  grid-template-columns:282px minmax(460px,1.45fr) minmax(320px,.85fr) !important;
  gap:12px !important;
}

.sales-calendar-popup.embedded,
.sales-calendar-popup.embedded.show{
  max-width:282px !important;
  width:282px !important;
  min-height:238px !important;
  padding:14px 14px !important;
  border-radius:16px !important;
  box-shadow:0 14px 34px rgba(26,55,96,.08) !important;
}

.sales-calendar-popup .range-pick-state{
  gap:8px !important;
  margin-bottom:10px !important;
}

.sales-calendar-popup .range-pick-state div{
  min-height:40px !important;
  padding:8px 10px !important;
}

.sales-calendar-popup .range-pick-state span{
  font-size:9px !important;
}

.sales-calendar-popup .range-pick-state strong{
  font-size:11px !important;
}

.sales-calendar-popup .calendar-head{
  margin-bottom:9px !important;
}

.sales-calendar-popup .calendar-week{
  margin-bottom:6px !important;
}

.sales-calendar-popup .calendar-grid{
  gap:5px !important;
}

.sales-calendar-popup .cal-day{
  width:28px !important;
  height:28px !important;
  border-radius:9px !important;
  font-size:11px !important;
}

.sales-calendar-popup .calendar-hint{
  margin-top:9px !important;
  font-size:10px !important;
  line-height:1.25 !important;
}

.sales-calendar-popup .calendar-actions{
  margin-top:9px !important;
}

.sales-calendar-popup .calendar-actions button{
  height:32px !important;
  font-size:11px !important;
}

.sales-insight-row{
  gap:12px !important;
}

.sales-metric,
.ai-card{
  min-height:238px !important;
  padding:14px !important;
  border-radius:16px !important;
  box-shadow:0 14px 34px rgba(26,55,96,.09) !important;
}

.sales-metric > span,
.chart-head span{
  font-size:10px !important;
}

.sales-metric > small{
  font-size:10.5px !important;
}

.metric-line{
  min-height:25px !important;
  grid-template-columns:20px minmax(0,1fr) auto !important;
  gap:7px !important;
  font-size:11px !important;
}

.metric-line i{
  width:18px !important;
  height:18px !important;
  font-size:10px !important;
}

.metric-line b{
  font-size:11px !important;
}

.chart-head{
  margin-bottom:8px !important;
}

.chart-head strong{
  font-size:14px !important;
}

.ai-recommendations{
  gap:8px !important;
}

.ai-rec{
  gap:9px !important;
  font-size:11px !important;
  line-height:1.2 !important;
}

.ai-rec i{
  width:24px !important;
  height:24px !important;
  font-size:11px !important;
}

.ai-rec span b{
  margin-top:2px !important;
  font-size:10.5px !important;
  line-height:1.18 !important;
}

.sales-analytics-grid{
  gap:12px !important;
}

.trend-card,
.structure-card{
  min-height:310px !important;
  padding:15px !important;
  box-shadow:0 14px 34px rgba(26,55,96,.09) !important;
}

.line-chart{
  height:250px !important;
}

.donut-layout{
  min-height:220px !important;
}

.control-strip{
  gap:10px !important;
}

.control-strip > div{
  min-height:64px !important;
  padding:11px 13px !important;
  box-shadow:0 12px 28px rgba(26,55,96,.08) !important;
}

.control-strip span{
  font-size:9.5px !important;
}

.control-strip b{
  margin-top:5px !important;
  font-size:13px !important;
}

.control-strip small{
  margin-top:4px !important;
  font-size:10px !important;
}

.sticky-toolbar{
  position:relative !important;
  top:auto !important;
  z-index:auto !important;
  padding:9px 10px !important;
  gap:7px 10px !important;
}

.report-tabs{
  gap:6px !important;
}

.report-tabs button{
  height:32px !important;
  padding:0 12px !important;
  font-size:11px !important;
}

.sales-explain{
  margin:0 !important;
  gap:10px !important;
}

.sales-table{
  width:100% !important;
  overflow-x:auto !important;
  border-radius:16px !important;
  border:1px solid rgba(226,232,240,.88) !important;
  background:rgba(255,255,255,.88) !important;
}

.sales-row,
.sales-row-head{
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  min-width:1180px !important;
}

.sales-row-head{
  position:static !important;
  top:auto !important;
  z-index:auto !important;
  background:rgba(248,251,255,.98) !important;
  border-bottom:1px solid rgba(226,232,240,.9) !important;
}

.sales-row{
  min-height:38px !important;
  border-bottom:1px solid rgba(226,232,240,.7) !important;
}

.sales-row:last-child{
  border-bottom:0 !important;
}

.sales-cell,
.sales-row-head button{
  min-height:38px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  font-size:12px !important;
}

.sales-row > [data-col="name"],
.sales-row-head > [data-col="name"]{
  flex:1 1 auto !important;
  min-width:320px !important;
}

@media (max-width:1700px){
  .sales-summary{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .sales-dash-row-second{
    grid-template-columns:282px minmax(0,1fr) !important;
  }

  .sales-dash-row-second .ai-card{
    grid-column:1 / -1 !important;
  }

  .sales-calendar-popup.embedded,
  .sales-calendar-popup.embedded.show{
    max-width:282px !important;
    width:282px !important;
  }
}


/* ================= SALES FIX V13 ================= */

.top-updated{
  color:#64748b;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
  letter-spacing:0;
}

.value-pop{
  animation:valuePop .52s cubic-bezier(.2,.8,.2,1);
}

@keyframes valuePop{
  0%{ transform:translateY(4px) scale(.97); opacity:.62; filter:blur(1px); }
  55%{ transform:translateY(-1px) scale(1.025); opacity:1; filter:blur(0); }
  100%{ transform:translateY(0) scale(1); opacity:1; }
}

.summary-card strong,
.control-strip b{
  will-change:transform, opacity;
}

.control-strip{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:10px !important;
  margin:12px 0 12px !important;
}

.control-strip > div{
  min-height:72px !important;
  padding:12px 15px !important;
  border-radius:16px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  overflow:hidden !important;
}

.control-strip > div:nth-child(1){ background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(255,255,255,.92)) !important; }
.control-strip > div:nth-child(2){ background:linear-gradient(135deg,rgba(16,185,129,.09),rgba(255,255,255,.92)) !important; }
.control-strip > div:nth-child(3){ background:linear-gradient(135deg,rgba(139,92,246,.09),rgba(255,255,255,.92)) !important; }
.control-strip > div:nth-child(4){ background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(255,255,255,.92)) !important; }

.control-strip b{
  font-size:16px !important;
  line-height:1.08 !important;
  max-width:100% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.control-strip small{
  display:block !important;
  margin-top:6px !important;
  color:#64748b !important;
  font-size:11px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.sales-row,
.sales-row-head{
  min-width:100% !important;
  width:100% !important;
}

.sales-row > [data-col],
.sales-row-head > [data-col]{
  flex:0 0 auto !important;
}

.sales-row > [data-col="name"],
.sales-row-head > [data-col="name"]{
  flex:1 1 auto !important;
  width:auto !important;
  min-width:260px !important;
}

.sales-row > [data-col="rank"],
.sales-row-head > [data-col="rank"]{ flex-basis:var(--sales-col-rank, 38px) !important; }
.sales-row > [data-col="amount"],
.sales-row-head > [data-col="amount"]{ flex-basis:var(--sales-col-amount, 92px) !important; }
.sales-row > [data-col="revenue"],
.sales-row-head > [data-col="revenue"]{ flex-basis:var(--sales-col-revenue, 128px) !important; }
.sales-row > [data-col="cost_percent"],
.sales-row-head > [data-col="cost_percent"]{ flex-basis:var(--sales-col-cost_percent, 82px) !important; }
.sales-row > [data-col="avg_price"],
.sales-row-head > [data-col="avg_price"]{ flex-basis:var(--sales-col-avg_price, 104px) !important; }
.sales-row > [data-col="cost"],
.sales-row-head > [data-col="cost"]{ flex-basis:var(--sales-col-cost, 108px) !important; }
.sales-row > [data-col="profit"],
.sales-row-head > [data-col="profit"]{ flex-basis:var(--sales-col-profit, 118px) !important; }
.sales-row > [data-col="profit_per_item"],
.sales-row-head > [data-col="profit_per_item"]{ flex-basis:var(--sales-col-profit_per_item, 104px) !important; }
.sales-row > [data-col="margin"],
.sales-row-head > [data-col="margin"]{ flex-basis:var(--sales-col-margin, 78px) !important; }

.sales-head-actions{
  flex-wrap:wrap !important;
}

html[data-theme="dark"] .top-updated,
html[data-theme="dark"] .control-strip small{
  color:#9fb0c8 !important;
}

html[data-theme="dark"] .control-strip > div:nth-child(n){
  background:#162033 !important;
}


/* ================= SALES FIX V14 ================= */

.sales-date-workspace{
  grid-template-columns:318px minmax(0,1fr) !important;
  gap:16px !important;
  align-items:start !important;
}

.sales-calendar-popup.embedded,
.sales-calendar-popup.embedded.show{
  max-width:318px !important;
  width:318px !important;
  padding:20px 18px !important;
}

.sales-calendar-popup .range-pick-state{
  gap:10px !important;
}

.sales-calendar-popup .range-pick-state div{
  min-height:50px !important;
}

.sales-calendar-popup .calendar-grid{
  gap:7px !important;
}

.sales-calendar-popup .cal-day{
  width:33px !important;
  height:33px !important;
  border-radius:11px !important;
}

.sales-overview{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  gap:10px !important;
}

.sales-overview .control-strip{
  margin:0 !important;
}

.sales-insight-row{
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:10px !important;
}

.sales-date-workspace .sales-metric{
  min-height:128px !important;
}

.metric-line{
  grid-template-columns:22px minmax(0,1fr) auto !important;
  gap:8px !important;
}

.metric-line em{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.control-strip{
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
}

.control-strip > div{
  min-height:68px !important;
}

.control-strip b{
  font-size:15px !important;
}

.control-strip small{
  font-size:10.5px !important;
}

@media (max-width:1400px){
  .sales-date-workspace{
    grid-template-columns:300px minmax(0,1fr) !important;
  }

  .sales-calendar-popup.embedded,
  .sales-calendar-popup.embedded.show{
    max-width:300px !important;
    width:300px !important;
  }

  .sales-summary{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  }
}


/* ================= SALES DASHBOARD V15 ================= */

.sales-page{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  max-width:none !important;
  padding:22px 28px 42px !important;
}

.sales-dashboard-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
}

.sales-title-line{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  min-width:0 !important;
}

.sales-title-line h1{
  margin:0 !important;
  color:#111827 !important;
  font-size:32px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  letter-spacing:0 !important;
}

.period-pill{
  height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:0 18px !important;
  border:1px solid rgba(226,232,240,.92) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.92) !important;
  color:#172033 !important;
  font-size:14px !important;
  font-weight:1000 !important;
  box-shadow:0 12px 30px rgba(26,55,96,.08) !important;
  cursor:pointer !important;
  white-space:nowrap !important;
}

.period-pill b{
  color:#2563eb !important;
  font-size:12px !important;
}

.sales-dashboard-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}

.refresh-sales-btn{
  height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 16px !important;
  border:1px solid rgba(37,99,235,.16) !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#ffffff,#eef6ff) !important;
  color:#2563eb !important;
  font-size:13px !important;
  font-weight:1000 !important;
  box-shadow:0 10px 22px rgba(37,99,235,.1) !important;
  cursor:pointer !important;
}

.sales-summary{
  display:grid !important;
  grid-template-columns:repeat(6, minmax(0,1fr)) !important;
  gap:12px !important;
}

.summary-card{
  min-height:132px !important;
  padding:18px 18px 16px !important;
  border-radius:16px !important;
  position:relative !important;
  overflow:hidden !important;
}

.summary-card:before{
  content:"" !important;
  position:absolute !important;
  inset:0 auto auto 0 !important;
  width:100% !important;
  height:4px !important;
  background:currentColor !important;
  opacity:.78 !important;
}

.summary-card strong{
  margin-top:8px !important;
  font-size:27px !important;
  line-height:1 !important;
}

.summary-card .delta{
  margin-top:10px !important;
  max-width:calc(100% - 70px) !important;
  padding-right:0 !important;
  font-size:11px !important;
  line-height:1.25 !important;
}

.summary-card .sparkline{
  right:16px !important;
  bottom:18px !important;
  width:72px !important;
  height:30px !important;
}

.sales-dash-row-second{
  display:grid !important;
  grid-template-columns:320px minmax(520px,1.45fr) minmax(340px,.85fr) !important;
  gap:14px !important;
  align-items:stretch !important;
}

.sales-calendar-popup.embedded,
.sales-calendar-popup.embedded.show{
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  display:block !important;
  max-width:320px !important;
  width:320px !important;
  min-height:290px !important;
  padding:20px 18px !important;
  border-radius:18px !important;
}

.sales-calendar-popup .cal-day{
  width:34px !important;
  height:34px !important;
}

.sales-calendar-popup .calendar-grid{
  gap:7px !important;
}

.sales-insight-row{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}

.sales-metric,
.ai-card,
.trend-card,
.structure-card{
  border-radius:18px !important;
  border:1px solid rgba(226,232,240,.92) !important;
  background:rgba(255,255,255,.9) !important;
  box-shadow:0 18px 44px rgba(26,55,96,.07) !important;
}

.sales-metric{
  min-height:290px !important;
  padding:18px 18px 16px !important;
}

.sales-metric > span{
  font-size:12px !important;
  letter-spacing:.04em !important;
}

.metric-line{
  min-height:30px !important;
  grid-template-columns:24px minmax(0,1fr) auto !important;
}

.metric-line b{
  white-space:nowrap !important;
}

.ai-card{
  min-height:290px !important;
  padding:18px !important;
}

.ai-recommendations{
  gap:12px !important;
}

.ai-rec{
  align-items:flex-start !important;
}

.sales-analytics-grid{
  display:grid !important;
  grid-template-columns:minmax(0,2.1fr) minmax(360px,.9fr) !important;
  gap:14px !important;
  align-items:stretch !important;
}

.trend-card,
.structure-card{
  min-height:342px !important;
  padding:18px !important;
}

.line-chart{
  height:285px !important;
}

.donut-layout{
  min-height:250px !important;
}

.control-strip{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
  margin:0 !important;
}

.control-strip > div{
  min-height:78px !important;
  padding:14px 16px !important;
  border-radius:16px !important;
}

.sales-table-subhead{
  margin:0 0 -4px !important;
  padding:0 4px !important;
  font-size:13px !important;
  font-weight:950 !important;
}

.sticky-toolbar{
  position:sticky !important;
  top:76px !important;
  z-index:12 !important;
}

.sales-table{
  margin-top:2px !important;
}

.sales-row-head{
  position:sticky !important;
  top:146px !important;
  z-index:10 !important;
  background:rgba(248,251,255,.96) !important;
  backdrop-filter:blur(14px) !important;
}

.sales-row{
  min-height:40px !important;
}

.sales-cell,
.sales-row-head button{
  font-size:12px !important;
}

html[data-theme="dark"] .sales-title-line h1{
  color:#f8fafc !important;
}

html[data-theme="dark"] .period-pill,
html[data-theme="dark"] .refresh-sales-btn,
html[data-theme="dark"] .sales-metric,
html[data-theme="dark"] .ai-card,
html[data-theme="dark"] .trend-card,
html[data-theme="dark"] .structure-card{
  background:#162033 !important;
  border-color:#26364f !important;
  box-shadow:none !important;
}

@media (max-width:1700px){
  .sales-summary{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .sales-dash-row-second{
    grid-template-columns:300px minmax(0,1fr) !important;
  }

  .sales-dash-row-second .ai-card{
    grid-column:1 / -1 !important;
  }

  .sales-calendar-popup.embedded,
  .sales-calendar-popup.embedded.show{
    max-width:300px !important;
    width:300px !important;
  }
}

@media (max-width:1200px){
  .sales-dashboard-header,
  .sales-title-line{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  .sales-summary,
  .sales-dash-row-second,
  .sales-analytics-grid,
  .sales-insight-row,
  .control-strip{
    grid-template-columns:1fr !important;
  }

  .sales-calendar-popup.embedded,
  .sales-calendar-popup.embedded.show{
    max-width:none !important;
    width:100% !important;
  }
}

@media (max-width:1700px){
  .sales-summary{
    grid-template-columns:repeat(3, minmax(132px, 1fr)) !important;
  }

  .sales-analytics-grid{
    grid-template-columns:1fr 1fr !important;
  }

  .trend-card{
    grid-column:span 2 !important;
  }
}

@media (max-width:1200px){
  .sales-date-workspace,
  .sales-analytics-grid,
  .control-strip{
    grid-template-columns:1fr !important;
  }

  .trend-card{
    grid-column:auto !important;
  }
}


/* ================= SALES POLISH V11 ================= */

.sales-header .sales-header-spacer{
  min-width:160px !important;
}

.reset-settings-btn{
  height:34px;
  padding:0 14px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:999px;
  background:rgba(255,255,255,.74);
  color:#475569;
  font-size:12px;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(26,55,96,.08);
  transition:transform .16s ease, background .16s ease;
}

.reset-settings-btn:hover{
  transform:translateY(-1px);
  background:#fff;
}

.sales-date-workspace{
  grid-template-columns:258px minmax(0,1fr) !important;
  gap:12px !important;
}

.sales-calendar-popup.embedded,
.sales-calendar-popup.embedded.show{
  max-width:258px !important;
}

.sales-head{
  min-height:56px;
  padding:12px 16px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(239,246,255,.82));
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 12px 28px rgba(26,55,96,.06);
}

.sales-head .panel-title{
  color:#111827 !important;
  font-size:24px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

.sales-subhead{
  margin-top:6px !important;
  color:#64748b !important;
  font-size:13px !important;
  font-weight:900 !important;
}

.sales-status{
  align-self:center;
  height:30px;
  display:inline-flex;
  align-items:center;
  border-radius:999px !important;
}

.sales-summary{
  grid-template-columns:repeat(6, minmax(120px,1fr)) !important;
}

.summary-card{
  min-height:108px !important;
}

.summary-card strong{
  font-size:23px !important;
}

.summary-card .delta{
  font-size:10px !important;
  line-height:1.16 !important;
  padding-right:62px !important;
}

.sparkline{
  width:58px !important;
  height:22px !important;
}

.sales-insight-row{
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
}

.sales-date-workspace .sales-metric{
  min-height:140px !important;
}

.sales-analytics-grid{
  grid-template-columns:minmax(520px, 1.25fr) minmax(330px, .82fr) minmax(330px, .82fr) !important;
  align-items:stretch !important;
}

.trend-card{
  min-height:300px !important;
}

.structure-card,
.ai-card{
  min-height:300px !important;
}

.line-chart{
  height:235px !important;
}

.control-strip{
  display:flex !important;
  align-items:stretch;
  gap:8px;
  width:100%;
}

.control-strip div{
  flex:1 1 0;
  min-width:0;
  min-height:50px !important;
  display:block !important;
}

.control-strip span,
.control-strip b{
  display:block !important;
}

.sticky-toolbar{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px !important;
  border-radius:18px;
  padding:10px 12px !important;
  background:rgba(246,251,255,.92) !important;
  border:1px solid rgba(226,232,240,.7);
}

.sticky-toolbar .report-tabs{
  display:flex !important;
  flex-wrap:wrap;
  gap:7px !important;
  margin:0 !important;
}

.sales-table{
  overflow-x:auto !important;
}

.sales-row{
  width:100% !important;
  min-width:1180px !important;
}

.sales-row > [data-col],
.sales-row-head > [data-col]{
  padding-right:10px !important;
}

.sales-row > [data-col="rank"],
.sales-row-head > [data-col="rank"]{ width:var(--sales-col-rank, 42px) !important; }
.sales-row > [data-col="name"],
.sales-row-head > [data-col="name"]{ width:var(--sales-col-name, 390px) !important; }
.sales-row > [data-col="amount"],
.sales-row-head > [data-col="amount"]{ width:var(--sales-col-amount, 92px) !important; }
.sales-row > [data-col="revenue"],
.sales-row-head > [data-col="revenue"]{ width:var(--sales-col-revenue, 128px) !important; }
.sales-row > [data-col="cost_percent"],
.sales-row-head > [data-col="cost_percent"]{ width:var(--sales-col-cost_percent, 82px) !important; }
.sales-row > [data-col="avg_price"],
.sales-row-head > [data-col="avg_price"]{ width:var(--sales-col-avg_price, 104px) !important; }
.sales-row > [data-col="cost"],
.sales-row-head > [data-col="cost"]{ width:var(--sales-col-cost, 108px) !important; }
.sales-row > [data-col="profit"],
.sales-row-head > [data-col="profit"]{ width:var(--sales-col-profit, 118px) !important; }
.sales-row > [data-col="profit_per_item"],
.sales-row-head > [data-col="profit_per_item"]{ width:var(--sales-col-profit_per_item, 104px) !important; }
.sales-row > [data-col="margin"],
.sales-row-head > [data-col="margin"]{ width:var(--sales-col-margin, 78px) !important; }

.metric-empty{
  display:block;
  color:#94a3b8;
  font-size:13px;
  font-weight:900;
}

html[data-theme="dark"] .sales-head,
html[data-theme="dark"] .reset-settings-btn{
  background:#162033 !important;
  border-color:#26364f !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .sales-head .panel-title{
  color:#f8fafc !important;
}

html[data-theme="dark"] .reset-settings-btn{
  color:#dbeafe !important;
}


/* ================= SALES FIX V12 ================= */

.sales-date-workspace{
  grid-template-columns:286px minmax(0,1fr) !important;
  gap:14px !important;
}

.sales-calendar-popup.embedded,
.sales-calendar-popup.embedded.show{
  max-width:286px !important;
  width:286px !important;
  box-sizing:border-box !important;
}

.sales-calendar-popup .cal-day{
  width:30px !important;
  height:30px !important;
  border-radius:10px !important;
}

.sales-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
}

.sales-head-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex:0 0 auto !important;
}

.reset-settings-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:38px !important;
  padding:0 16px !important;
  border:1px solid rgba(37,99,235,.18) !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#ffffff,#eef6ff) !important;
  color:#1d4ed8 !important;
  font-size:13px !important;
  font-weight:1000 !important;
  box-shadow:0 12px 26px rgba(37,99,235,.12) !important;
  white-space:nowrap !important;
}

.reset-settings-btn:hover{
  background:#2563eb !important;
  color:#fff !important;
}

.control-strip{
  display:flex !important;
  flex-direction:row !important;
  align-items:stretch !important;
  gap:8px !important;
  width:100% !important;
  margin:10px 0 12px !important;
}

.control-strip > div{
  flex:1 1 0 !important;
  min-width:0 !important;
  min-height:58px !important;
  padding:11px 13px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.86) !important;
  border:1px solid rgba(226,232,240,.92) !important;
  box-shadow:0 12px 28px rgba(26,55,96,.06) !important;
}

.control-strip > div:nth-child(1){ border-top:3px solid #2563eb !important; }
.control-strip > div:nth-child(2){ border-top:3px solid #10b981 !important; }
.control-strip > div:nth-child(3){ border-top:3px solid #8b5cf6 !important; }
.control-strip > div:nth-child(4){ border-top:3px solid #f59e0b !important; }
.control-strip > div:nth-child(5){ border-top:3px solid #14b8a6 !important; }

.control-strip span{
  display:block !important;
  color:#64748b !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
}

.control-strip b{
  display:block !important;
  margin-top:7px !important;
  color:#172033 !important;
  font-size:14px !important;
  line-height:1.1 !important;
  font-weight:1000 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.sales-table{
  width:100% !important;
}

.sales-row{
  min-width:1120px !important;
}

.sales-row > [data-col="rank"],
.sales-row-head > [data-col="rank"]{ width:var(--sales-col-rank, 38px) !important; }
.sales-row > [data-col="name"],
.sales-row-head > [data-col="name"]{ width:var(--sales-col-name, 360px) !important; }

html[data-theme="dark"] .control-strip > div,
html[data-theme="dark"] .reset-settings-btn{
  background:#162033 !important;
  border-color:#26364f !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .control-strip b{
  color:#f8fafc !important;
}

/* ================= SALES DASHBOARD FINAL V15 EOF ================= */

.sales-page{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  max-width:none !important;
  padding:22px 28px 42px !important;
}

.sales-dashboard-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
}

.sales-title-line{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  min-width:0 !important;
}

.sales-title-line h1{
  margin:0 !important;
  color:#111827 !important;
  font-size:32px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  letter-spacing:0 !important;
}

.period-pill{
  height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:0 18px !important;
  border:1px solid rgba(226,232,240,.92) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.92) !important;
  color:#172033 !important;
  font-size:14px !important;
  font-weight:1000 !important;
  box-shadow:0 12px 30px rgba(26,55,96,.08) !important;
  cursor:pointer !important;
  white-space:nowrap !important;
}

.period-pill b{
  color:#2563eb !important;
  font-size:12px !important;
}

.sales-dashboard-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}

.refresh-sales-btn{
  height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 16px !important;
  border:1px solid rgba(37,99,235,.16) !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#ffffff,#eef6ff) !important;
  color:#2563eb !important;
  font-size:13px !important;
  font-weight:1000 !important;
  box-shadow:0 10px 22px rgba(37,99,235,.1) !important;
  cursor:pointer !important;
}

.sales-summary{
  display:grid !important;
  grid-template-columns:repeat(6, minmax(0,1fr)) !important;
  gap:12px !important;
}

.summary-card{
  min-height:132px !important;
  padding:18px 18px 16px !important;
  border-radius:16px !important;
  position:relative !important;
  overflow:hidden !important;
}

.summary-card:before{
  content:"" !important;
  position:absolute !important;
  inset:0 auto auto 0 !important;
  width:100% !important;
  height:4px !important;
  background:currentColor !important;
  opacity:.78 !important;
}

.summary-card strong{
  margin-top:8px !important;
  font-size:27px !important;
  line-height:1 !important;
}

.summary-card .delta{
  margin-top:10px !important;
  max-width:calc(100% - 70px) !important;
  padding-right:0 !important;
  font-size:11px !important;
  line-height:1.25 !important;
}

.summary-card .sparkline{
  right:16px !important;
  bottom:18px !important;
  width:72px !important;
  height:30px !important;
}

.sales-dash-row-second{
  display:grid !important;
  grid-template-columns:320px minmax(520px,1.45fr) minmax(340px,.85fr) !important;
  gap:14px !important;
  align-items:stretch !important;
}

.sales-calendar-popup.embedded,
.sales-calendar-popup.embedded.show{
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  display:block !important;
  max-width:320px !important;
  width:320px !important;
  min-height:290px !important;
  padding:20px 18px !important;
  border-radius:18px !important;
}

.sales-calendar-popup .cal-day{
  width:34px !important;
  height:34px !important;
}

.sales-calendar-popup .calendar-grid{
  gap:7px !important;
}

.sales-insight-row{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}

.sales-metric,
.ai-card,
.trend-card,
.structure-card{
  border-radius:18px !important;
  border:1px solid rgba(226,232,240,.92) !important;
  background:rgba(255,255,255,.9) !important;
  box-shadow:0 18px 44px rgba(26,55,96,.07) !important;
}

.sales-metric{
  min-height:290px !important;
  padding:18px 18px 16px !important;
}

.sales-metric > span{
  font-size:12px !important;
  letter-spacing:.04em !important;
}

.metric-line{
  min-height:30px !important;
  grid-template-columns:24px minmax(0,1fr) auto !important;
}

.metric-line b{
  white-space:nowrap !important;
}

.ai-card{
  min-height:290px !important;
  padding:18px !important;
}

.ai-recommendations{
  gap:12px !important;
}

.ai-rec{
  align-items:flex-start !important;
}

.sales-analytics-grid{
  display:grid !important;
  grid-template-columns:minmax(0,2.1fr) minmax(360px,.9fr) !important;
  gap:14px !important;
  align-items:stretch !important;
}

.trend-card,
.structure-card{
  min-height:342px !important;
  padding:18px !important;
}

.line-chart{
  height:285px !important;
}

.donut-layout{
  min-height:250px !important;
}

.control-strip{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
  margin:0 !important;
}

.control-strip > div{
  min-height:78px !important;
  padding:14px 16px !important;
  border-radius:16px !important;
}

.sales-table-subhead{
  margin:0 0 -4px !important;
  padding:0 4px !important;
  font-size:13px !important;
  font-weight:950 !important;
}

.sticky-toolbar{
  position:sticky !important;
  top:76px !important;
  z-index:12 !important;
}

.sales-table{
  margin-top:2px !important;
}

.sales-row-head{
  position:sticky !important;
  top:146px !important;
  z-index:10 !important;
  background:rgba(248,251,255,.96) !important;
  backdrop-filter:blur(14px) !important;
}

.sales-row{
  min-height:40px !important;
}

.sales-cell,
.sales-row-head button{
  font-size:12px !important;
}

html[data-theme="dark"] .sales-title-line h1{
  color:#f8fafc !important;
}

html[data-theme="dark"] .period-pill,
html[data-theme="dark"] .refresh-sales-btn,
html[data-theme="dark"] .sales-metric,
html[data-theme="dark"] .ai-card,
html[data-theme="dark"] .trend-card,
html[data-theme="dark"] .structure-card{
  background:#162033 !important;
  border-color:#26364f !important;
  box-shadow:none !important;
}

@media (max-width:1700px){
  .sales-summary{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .sales-dash-row-second{
    grid-template-columns:300px minmax(0,1fr) !important;
  }

  .sales-dash-row-second .ai-card{
    grid-column:1 / -1 !important;
  }

  .sales-calendar-popup.embedded,
  .sales-calendar-popup.embedded.show{
    max-width:300px !important;
    width:300px !important;
  }
}

@media (max-width:1200px){
  .sales-dashboard-header,
  .sales-title-line{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  .sales-summary,
  .sales-dash-row-second,
  .sales-analytics-grid,
  .sales-insight-row,
  .control-strip{
    grid-template-columns:1fr !important;
  }

  .sales-calendar-popup.embedded,
  .sales-calendar-popup.embedded.show{
    max-width:none !important;
    width:100% !important;
  }
}