*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI, Arial, sans-serif;
}

body{
background:#f4fbf9;
color:#1f2937;
}

.hidden{
display:none!important;
}

.dashboard{
display:flex;
background:#f4fbf9;
min-height:100vh;
}

.sidebar{
width:285px;
height:100vh;
background:#ffffff;
position:fixed;
padding:22px;
border-right:1px solid #d1fae5;
box-shadow:6px 0 22px rgba(15,118,110,0.06);
overflow-y:auto;
display:flex;
flex-direction:column;
}

.logo{
height:140px;
padding:0;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
background:white;
border-radius:20px;
margin-bottom:26px;
border:1px solid #bbf7d0;
}

.logo small{
font-size:13px;
font-weight:600;
color:#475569;
}

.sidebar ul{
list-style:none;
flex:1;
}

.sidebar ul li{
padding:15px 16px;
margin-bottom:10px;
background:#f8fffc;
border-radius:14px;
cursor:pointer;
font-weight:700;
color:#134e4a;
border:1px solid #e2f7ef;
transition:.2s;
}

.sidebar ul li:hover{
background:#0f766e;
color:white;
transform:translateX(4px);
}

.bottom-links{
margin-top:30px;
padding-top:20px;
border-top:2px solid #d1fae5;
}

.bottom-links li{
background:#f1f5f9!important;
color:#334155!important;
}

.bottom-links li:hover{
background:#0f766e!important;
color:white!important;
}

.main{
margin-left:285px;
width:calc(100% - 285px);
padding:28px;
}

.topbar{
background:white;
padding:20px 24px;
border-radius:22px;
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:28px;
box-shadow:0 8px 24px rgba(15,118,110,0.08);
border:1px solid #d1fae5;
}

.topbar h1{
color:#0f766e;
font-size:26px;
}

.logout-btn{
padding:11px 20px;
background:#ef4444;
border:none;
color:white;
cursor:pointer;
border-radius:12px;
font-weight:bold;
}

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

.card{
background:white;
padding:24px;
border-radius:22px;
box-shadow:0 8px 24px rgba(15,118,110,0.08);
border:1px solid #d1fae5;
}

.card h2{
color:#0f766e;
margin-bottom:9px;
font-size:28px;
}

.card p{
color:#64748b;
font-weight:700;
}

.dashboard-widgets{
display:grid;
grid-template-columns:1fr 2fr 1fr;
gap:20px;
margin-bottom:28px;
}

.widget{
background:white;
padding:24px;
border-radius:22px;
box-shadow:0 8px 24px rgba(15,118,110,0.08);
border:1px solid #d1fae5;
}

.widget h2{
color:#134e4a;
margin-bottom:18px;
font-size:22px;
}

.quick-actions{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
}

.quick-actions button{
padding:14px;
border:none;
border-radius:14px;
background:#ecfdf5;
color:#0f766e;
font-weight:800;
cursor:pointer;
border:1px solid #bbf7d0;
}

.quick-actions button:hover{
background:#0f766e;
color:white;
}

.summary-list p{
padding:10px 0;
border-bottom:1px solid #d1fae5;
color:#475569;
font-weight:700;
}

.summary-list p:last-child{
border-bottom:none;
}

.section{
background:white;
padding:28px;
border-radius:22px;
box-shadow:0 8px 24px rgba(15,118,110,0.08);
margin-bottom:28px;
border:1px solid #d1fae5;
}

.section h2{
margin-bottom:22px;
color:#134e4a;
font-size:25px;
}

.section input,
.section select{
padding:13px 14px;
margin-right:10px;
margin-bottom:12px;
border:1.5px solid #a7f3d0;
border-radius:12px;
background:#f8fffc;
outline:none;
min-height:44px;
}

.section button{
padding:12px 18px;
background:#0f766e;
border:none;
color:white;
cursor:pointer;
border-radius:12px;
font-weight:bold;
margin-bottom:8px;
}

.section button:hover{
background:#115e59;
}

table{
width:100%;
border-collapse:separate;
border-spacing:0;
margin-top:20px;
background:white;
border:1px solid #d1fae5;
border-radius:16px;
overflow:hidden;
}

table th,
table td{
padding:13px;
border-bottom:1px solid #d1fae5;
text-align:left;
font-size:14px;
}

table tr:last-child td{
border-bottom:none;
}

table th{
background:#0f766e;
color:white;
font-size:13px;
}

.delete-btn{
background:#ef4444!important;
padding:8px 12px!important;
border:none;
color:white;
cursor:pointer;
border-radius:9px!important;
}

.edit-btn{
background:#2563eb!important;
padding:8px 12px!important;
border:none;
color:white;
cursor:pointer;
border-radius:9px!important;
}

.reorder-btn{
background:#16a34a!important;
padding:8px 12px!important;
border:none;
color:white;
cursor:pointer;
border-radius:9px!important;
}

.print-btn{
background:#2563eb!important;
padding:10px 18px!important;
margin-top:15px;
border:none;
color:white;
cursor:pointer;
border-radius:10px!important;
font-weight:bold;
}

.final-btn{
background:#16a34a!important;
}

.clear-btn{
background:#f97316!important;
}

.refund-btn{
background:#be123c!important;
padding:8px 12px!important;
border-radius:9px!important;
}

.view-btn{
background:#0ea5e9!important;
padding:8px 12px!important;
border-radius:9px!important;
}

.warning{
color:#991b1b;
font-weight:bold;
background:#fee2e2;
padding:5px 9px;
border-radius:999px;
font-size:12px;
}

.safe{
color:#166534;
font-weight:bold;
background:#dcfce7;
padding:5px 9px;
border-radius:999px;
font-size:12px;
}

.low{
color:#c2410c;
font-weight:bold;
background:#ffedd5;
padding:5px 9px;
border-radius:999px;
font-size:12px;
}

.alert-box{
background:#f8fffc;
border-left:5px solid #0f766e;
padding:18px;
border-radius:14px;
margin-bottom:15px;
box-shadow:0 5px 18px rgba(15,118,110,0.05);
}

.expiry-alert{
border-left-color:#dc2626;
}

.reorder-alert{
border-left-color:#16a34a;
}

.bill-preview{
background:#f8fffc;
border:1px solid #a7f3d0;
padding:25px;
border-radius:18px;
margin-top:20px;
display:flex;
justify-content:center;
}

.receipt{
width:320px;
background:white;
padding:20px;
border:1px solid #d1fae5;
border-radius:16px;
box-shadow:0 10px 25px rgba(15,118,110,0.10);
font-size:14px;
}

.receipt h2,
.receipt h3{
text-align:center;
color:#0f766e;
}

.receipt p{
margin:7px 0;
}

.receipt table{
font-size:13px;
border-radius:10px;
}

.receipt table th,
.receipt table td{
padding:8px;
}

.bill-footer{
text-align:center;
margin-top:20px;
padding-top:12px;
border-top:1px dashed #0f766e;
color:#0f766e;
font-weight:bold;
line-height:1.5;
}

.bill-footer small{
font-size:11px;
color:#475569;
font-weight:700;
}

.report-box{
background:white;
padding:30px;
border-radius:22px;
font-size:18px;
color:#0f766e;
box-shadow:0 8px 24px rgba(15,118,110,0.08);
margin-bottom:20px;
border:1px solid #d1fae5;
}

.refunded{
color:#be123c;
font-weight:bold;
background:#ffe4e6;
padding:5px 9px;
border-radius:999px;
font-size:12px;
}


.logo-upload-label{
display:block;
font-weight:700;
color:#134e4a;
margin-bottom:8px;
}

.logo-preview{
width:86px;
height:86px;
border-radius:18px;
object-fit:cover;
display:none;
margin:0 auto 16px auto;
border:2px solid #a7f3d0;
background:white;
}

.receipt-logo{
width:58px;
height:58px;
object-fit:cover;
border-radius:12px;
display:block;
margin:0 auto 8px auto;
}


.plan-badge{
display:inline-block;
margin-top:6px;
padding:5px 10px;
border-radius:999px;
background:#d1fae5;
color:#0f766e;
font-size:12px;
font-weight:800;
}


.payment-box{
display:none;
background:#f8fffc;
border:1px solid #a7f3d0;
padding:16px;
border-radius:14px;
margin-bottom:16px;
}

.payment-note{
font-size:13px;
color:#475569;
font-weight:700;
margin-bottom:12px;
line-height:1.5;
}

.payment-status-badge{
display:inline-block;
margin-top:6px;
padding:5px 10px;
border-radius:999px;
background:#ffedd5;
color:#c2410c;
font-size:12px;
font-weight:800;
}


.plan-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-bottom:25px;
}

.plan-card{
background:#ffffff;
border:2px solid #d1fae5;
border-radius:22px;
padding:25px;
box-shadow:0 8px 24px rgba(15,118,110,0.08);
position:relative;
}

.plan-card h3{
font-size:24px;
color:#0f766e;
margin-bottom:10px;
}

.plan-price{
font-size:30px;
font-weight:900;
color:#134e4a;
margin-bottom:15px;
}

.plan-card ul{
padding-left:20px;
margin-bottom:20px;
color:#475569;
line-height:1.8;
font-weight:600;
}

.plan-card button{
width:100%;
padding:13px;
border:none;
border-radius:12px;
font-weight:bold;
cursor:pointer;
background:#0f766e;
color:white;
}

.plan-card.featured{
border-color:#0f766e;
transform:scale(1.02);
}

.plan-tag{
position:absolute;
top:14px;
right:14px;
background:#d1fae5;
color:#0f766e;
font-size:12px;
font-weight:900;
padding:6px 10px;
border-radius:999px;
}

.plan-details{
background:#f8fffc;
border:1px solid #a7f3d0;
padding:22px;
border-radius:18px;
margin-top:20px;
}

.plan-details h3{
color:#134e4a;
margin-bottom:15px;
}

.plan-details li{
margin-bottom:10px;
color:#475569;
font-weight:600;
}

@media(max-width:1100px){
.plan-grid{
grid-template-columns:1fr;
}
.plan-card.featured{
transform:none;
}
}


.profile-btn{
padding:11px 18px;
background:#0f766e;
border:none;
color:white;
cursor:pointer;
border-radius:12px;
font-weight:bold;
}

.profile-logo-preview{
width:90px;
height:90px;
object-fit:cover;
border-radius:18px;
border:2px solid #a7f3d0;
display:none;
margin-bottom:14px;
background:white;
}

@media(max-width:1200px){
.cards{grid-template-columns:repeat(2,1fr);}
.dashboard-widgets{grid-template-columns:1fr;}
.quick-actions{grid-template-columns:1fr;}
}

@media(max-width:900px){
.left-side{display:none;}
.right-side{width:100%;}
.sidebar{display:none;}
.main{margin-left:0;width:100%;padding:18px;}
.cards{grid-template-columns:1fr;}
.section input,.section select{width:100%;margin-right:0;}
}
.auth-container{
  min-height:100vh;
  display:block;
  background:linear-gradient(135deg,#ecfdf5,#e0f2fe,#f8fafc);
}

.auth-navbar{
  width:100%;
  padding:16px 32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:white;
  box-shadow:0 6px 20px rgba(15,118,110,0.08);
  position:sticky;
  top:0;
  z-index:10;
}

.nav-logo{
  font-size:24px;
  font-weight:900;
  color:#0f766e;
}

.nav-buttons{
  display:flex;
  gap:12px;
}

.nav-buttons button{
  padding:10px 16px;
  border-radius:999px;
  background:#ecfdf5;
  color:#0f766e;
  font-weight:800;
  border:1px solid #a7f3d0;
  cursor:pointer;
}

.nav-buttons button:hover{
  background:#0f766e;
  color:white;
}

.hero-section{
  min-height:calc(100vh - 72px);
  display:grid !important;
  grid-template-columns:minmax(520px,1fr) 430px !important;
  gap:80px;
  align-items:center;
  padding:70px 90px;
}

.hero-content{
  max-width:760px;
  grid-column:1;
  animation:slideUp .8s ease;
}

.hero-pill{
  display:inline-block;
  padding:9px 16px;
  background:white;
  color:#0f766e;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  margin-bottom:22px;
  box-shadow:0 8px 20px rgba(15,118,110,0.08);
}

.animated-title{
  font-size:64px;
  line-height:1.08;
  color:#134e4a;
  margin-bottom:22px;
  letter-spacing:-2px;
  animation:softPulse 2.8s infinite ease-in-out;
}

.hero-text{
  max-width:720px;
  font-size:18px;
  line-height:1.8;
  color:#475569;
  margin-bottom:30px;
}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  max-width:650px;
}

.hero-stats div{
  background:white;
  padding:15px 12px;
  border-radius:16px;
  color:#0f766e;
  font-weight:900;
  text-align:center;
  box-shadow:0 10px 25px rgba(15,118,110,0.08);
  border:1px solid #d1fae5;
  font-size:13px;
}

.auth-right-panel{
  grid-column:2;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

#loginBox,
#registerBox,
#ownerLoginBox,
#aboutBox{
  width:430px !important;
  justify-self:end;
  align-self:center;
}

.auth-box{
  width:430px;
  padding:42px;
  background:white;
  border-radius:28px;
  box-shadow:0 22px 50px rgba(15,118,110,0.15);
  border:1px solid #d1fae5;
  animation:fadeIn .5s ease;
}

.about-pro-box{
  width:640px !important;
  max-height:82vh;
  overflow-y:auto;
}

.about-pro-header{
  padding:34px 38px;
  background:linear-gradient(135deg,#0f766e,#134e4a);
  color:white;
  border-radius:28px 28px 0 0;
  text-align:left;
}

.about-pro-badge{
  display:inline-block;
  padding:7px 13px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  margin-bottom:16px;
}

.about-pro-content{
  padding:28px 38px 20px;
  text-align:left;
}

.about-pro-content h3{
  color:#134e4a;
  margin-bottom:8px;
}

.about-pro-content p{
  color:#475569;
  line-height:1.7;
  font-weight:600;
  margin-bottom:18px;
}

.about-pro-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-bottom:22px;
}

.about-pro-list span{
  background:#f8fffc;
  border:1px solid #d1fae5;
  padding:12px 14px;
  border-radius:14px;
  color:#0f766e;
  font-weight:800;
}

.about-pro-developer{
  background:#f8fffc;
  border:1px solid #d1fae5;
  border-radius:18px;
  padding:18px;
}

.about-pro-box button{
  margin:0 38px 34px;
  width:calc(100% - 76px);
}

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

@keyframes fadeIn{
  from{opacity:0;transform:scale(.96);}
  to{opacity:1;transform:scale(1);}
}

@keyframes softPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.015);}
}

@media(max-width:1000px){
  .auth-navbar{
    flex-direction:column;
    gap:14px;
    padding:16px;
  }

  .nav-buttons{
    flex-wrap:wrap;
    justify-content:center;
  }

  .hero-section{
    grid-template-columns:1fr !important;
    padding:35px 22px;
    gap:35px;
  }

  .hero-content{
    grid-column:1;
  }

  .auth-right-panel{
    grid-column:1;
    justify-content:center;
  }

  #loginBox,
  #registerBox,
  #ownerLoginBox,
  #aboutBox{
    width:100% !important;
  }

  .animated-title{
    font-size:42px;
  }

  .hero-stats{
    grid-template-columns:repeat(2,1fr);
  }

  .about-pro-box{
    width:100% !important;
  }
}
.auth-right-panel .auth-box input,
.auth-right-panel .auth-box select{
  width:100% !important;
  display:block !important;
  padding:14px !important;
  margin-bottom:14px !important;
  border:1.5px solid #a7f3d0 !important;
  border-radius:13px !important;
  background:#f8fffc !important;
  font-size:15px !important;
}

.auth-right-panel .auth-box button{
  width:100% !important;
  display:block !important;
  padding:14px !important;
  background:#0f766e !important;
  color:white !important;
  border:none !important;
  border-radius:13px !important;
  font-weight:800 !important;
  cursor:pointer !important;
}

.auth-right-panel .auth-box{
  padding:42px !important;
}

.auth-right-panel .login-logo{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:12px !important;
  margin-bottom:24px !important;
}

.auth-right-panel .login-logo h1{
  color:#0f766e !important;
  font-size:34px !important;
}

.auth-right-panel .auth-box p{
  text-align:center !important;
  margin-top:18px !important;
  color:#64748b !important;
}
.about-premium-box{
  padding:0 !important;
  overflow:hidden;
}

.about-top{
  background:linear-gradient(135deg,#0f766e,#134e4a);
  color:white;
  padding:30px;
  text-align:center;
}

.about-logo{
  width:68px;
  height:68px;
  background:white;
  border-radius:22px;
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
}

.about-top span{
  display:inline-block;
  background:rgba(255,255,255,.16);
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  margin-bottom:12px;
}

.about-top h1{
  font-size:30px;
  margin-bottom:10px;
}

.about-top p{
  color:#d1fae5;
  line-height:1.6;
  font-weight:600;
}

.about-mini-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  padding:22px 28px 8px;
}

.about-mini-grid div{
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  color:#0f766e;
  padding:12px;
  border-radius:14px;
  text-align:center;
  font-weight:900;
}

.about-info,
.about-dev{
  margin:16px 28px;
  padding:18px;
  background:#f8fffc;
  border:1px solid #d1fae5;
  border-radius:18px;
  text-align:left;
}

.about-info h3,
.about-dev h3{
  color:#0f766e;
  margin-bottom:8px;
}

.about-info p,
.about-dev p{
  color:#475569;
  line-height:1.7;
  font-weight:600;
  margin:5px 0;
  text-align:left !important;
}

.about-premium-box button{
  margin:0 28px 28px;
  width:calc(100% - 56px) !important;
}.about-overlay{
  position:fixed !important;
  top:76px !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100vw !important;
  height:calc(100vh - 76px) !important;
  z-index:9999 !important;
  background:#f8fafc !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:35px !important;
}

.about-page{
  width:100% !important;
  max-width:1180px !important;
  margin:0 auto !important;
  background:white !important;
  border-radius:30px !important;
}

.auth-right-panel #aboutBox{
  width:100vw !important;
  max-width:none !important;
}

.about-grid{
  grid-template-columns:repeat(3,1fr) !important;
}

@media(max-width:900px){
  .about-overlay{
    top:120px !important;
    height:calc(100vh - 120px) !important;
    padding:18px !important;
  }

  .about-grid{
    grid-template-columns:1fr !important;
  }
}
#aboutBox.about-overlay{
  position:fixed !important;
  top:70px !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100vw !important;
  background:#f8fafc !important;
  z-index:99999 !important;
  overflow-y:auto !important;
  padding:35px !important;
}

#aboutBox .about-page{
  max-width:1100px !important;
  margin:0 auto !important;
  background:white !important;
  border-radius:30px !important;
  overflow:hidden !important;
  box-shadow:0 25px 70px rgba(15,23,42,.14) !important;
}

#aboutBox .about-hero{
  background:linear-gradient(135deg,#0f766e,#10b981) !important;
  color:white !important;
  padding:55px !important;
  text-align:center !important;
}

#aboutBox .about-hero h1{
  font-size:46px !important;
}

#aboutBox .about-grid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:18px !important;
  padding:35px !important;
}

#aboutBox .about-grid div{
  background:#ecfdf5 !important;
  border:1px solid #a7f3d0 !important;
  padding:22px !important;
  border-radius:20px !important;
  color:#0f766e !important;
  font-weight:900 !important;
  text-align:center !important;
}

#aboutBox .about-text{
  padding:0 45px 35px !important;
  text-align:center !important;
}

#aboutBox .developer-box{
  margin:0 45px 40px !important;
  background:#0f172a !important;
  color:white !important;
  border-radius:26px !important;
  padding:30px !important;
  display:flex !important;
  align-items:center !important;
  gap:28px !important;
}

#aboutBox .developer-box img{
  width:140px !important;
  height:140px !important;
  border-radius:26px !important;
  object-fit:cover !important;
  border:4px solid #10b981 !important;
  background:white !important;
}

#aboutBox .about-page button{
  margin:0 45px 45px !important;
  width:calc(100% - 90px) !important;
  padding:15px !important;
  border:none !important;
  border-radius:14px !important;
  background:#0f766e !important;
  color:white !important;
  font-weight:900 !important;
  cursor:pointer !important;
}
#aboutBox.about-overlay{
  top:56px !important;
  padding:0 !important;
  background:#f8fafc !important;
}

#aboutBox .about-page{
  max-width:100% !important;
  width:100% !important;
  min-height:calc(100vh - 56px) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

#aboutBox .about-hero{
  padding:80px 60px !important;
  background:linear-gradient(135deg,#064e3b,#0f766e,#14b8a6) !important;
}

#aboutBox .about-hero h1{
  font-size:56px !important;
  margin-bottom:12px !important;
}

#aboutBox .about-hero p{
  font-size:20px !important;
  max-width:850px !important;
  margin:auto !important;
  color:#d1fae5 !important;
}

#aboutBox .about-grid{
  max-width:1150px !important;
  margin:0 auto !important;
  padding:45px 35px !important;
}

#aboutBox .about-text{
  max-width:1050px !important;
  margin:0 auto !important;
  padding:0 35px 45px !important;
}

#aboutBox .about-text p{
  font-size:18px !important;
  line-height:1.9 !important;
  color:#475569 !important;
}

#aboutBox .about-text p::after{
  content:" MediBuddy is designed to support faster pharmacy operations, reduce manual record keeping, improve stock visibility, and help business owners make better decisions through organised reporting and cloud-based control.";
}

#aboutBox .developer-box{
  max-width:1050px !important;
  margin:0 auto 55px !important;
  background:linear-gradient(135deg,#7c2d12,#ea580c,#f97316) !important;
  color:white !important;
  box-shadow:0 20px 45px rgba(249,115,22,.25) !important;
}

#aboutBox .developer-box img{
  border:4px solid #fff7ed !important;
  background:white !important;
}

#aboutBox .developer-box h2{
  color:white !important;
}

#aboutBox .developer-box p{
  color:#fff7ed !important;
}

#aboutBox .about-page button{
  max-width:1050px !important;
  display:block !important;
  margin:0 auto 60px !important;
}
/* Laptop-friendly About Page */
#aboutBox.about-overlay{
  top:56px !important;
  padding:0 !important;
  background:#f8fafc !important;
  height:calc(100vh - 56px) !important;
  overflow-y:auto !important;
}

#aboutBox .about-page{
  width:100% !important;
  max-width:100% !important;
  min-height:auto !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

#aboutBox .about-hero{
  padding:42px 70px !important;
  background:linear-gradient(135deg,#064e3b,#0f766e,#14b8a6) !important;
}

#aboutBox .about-hero h1{
  font-size:42px !important;
  line-height:1.15 !important;
  margin-bottom:12px !important;
}

#aboutBox .about-hero p{
  font-size:17px !important;
  max-width:760px !important;
  margin:auto !important;
}

#aboutBox .about-grid{
  max-width:1180px !important;
  margin:0 auto !important;
  padding:28px 45px !important;
  display:grid !important;
  grid-template-columns:repeat(6,1fr) !important;
  gap:16px !important;
}

#aboutBox .about-grid div{
  padding:18px 12px !important;
  min-height:110px !important;
  font-size:14px !important;
}

#aboutBox .about-text{
  max-width:1050px !important;
  margin:0 auto !important;
  padding:10px 45px 24px !important;
}

#aboutBox .about-text h2{
  font-size:26px !important;
  margin-bottom:8px !important;
}

#aboutBox .about-text p{
  font-size:15px !important;
  line-height:1.7 !important;
}

#aboutBox .developer-box{
  max-width:1050px !important;
  margin:0 auto 28px !important;
  background:linear-gradient(135deg,#022c22,#064e3b,#0f766e) !important;
  padding:24px 30px !important;
  border-radius:24px !important;
}

#aboutBox .developer-box img{
  width:115px !important;
  height:115px !important;
  border-radius:50% !important;
  border:4px solid #5eead4 !important;
}

#aboutBox .developer-box h2{
  font-size:30px !important;
  color:white !important;
}

#aboutBox .developer-box p{
  font-size:14px !important;
  color:#d1fae5 !important;
}

#aboutBox .about-page button{
  max-width:1050px !important;
  margin:0 auto 28px !important;
  display:block !important;
  padding:13px !important;
}
.about-page-full{
  position:fixed;
  top:58px;
  left:0;
  right:0;
  bottom:0;
  background:#f8fafc;
  z-index:99999;
  overflow-y:auto;
}

.about-hero-new{
  min-height:330px;
  background:linear-gradient(135deg,#064e3b,#0f766e,#14b8a6);
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  padding:45px 90px;
  color:white;
}

.about-badge{
  background:rgba(255,255,255,.15);
  padding:10px 18px;
  border-radius:999px;
  font-weight:900;
  display:inline-block;
  margin-bottom:18px;
}

.about-hero-text h1{
  font-size:46px;
  line-height:1.15;
  margin-bottom:16px;
}

.about-hero-text p{
  font-size:17px;
  line-height:1.7;
  max-width:650px;
  color:#d1fae5;
}

.about-buttons{
  display:flex;
  gap:16px;
  margin-top:24px;
}

.about-buttons button{
  padding:14px 24px;
  border-radius:12px;
  border:1px solid white;
  font-weight:900;
  cursor:pointer;
}

.about-buttons button:first-child{
  background:#10b981;
  color:white;
  border:none;
}

.about-buttons button:last-child{
  background:transparent;
  color:white;
}

.about-hero-image{
  display:flex;
  justify-content:center;
}

.mock-screen{
  width:420px;
  background:white;
  color:#0f172a;
  padding:25px;
  border-radius:26px;
  box-shadow:0 30px 70px rgba(0,0,0,.25);
}

.mock-screen h3{
  color:#0f766e;
  margin-bottom:18px;
}

.mock-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

.mock-grid span{
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  padding:18px;
  border-radius:16px;
  font-weight:900;
  color:#0f766e;
}

.about-modules{
  padding:35px 70px;
  background:white;
}

.about-modules h2,
.about-why h2{
  text-align:center;
  color:#0f766e;
  font-size:28px;
  margin-bottom:25px;
}

.about-module-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
}

.about-module-grid div{
  background:white;
  border:1px solid #e2e8f0;
  border-radius:20px;
  padding:22px;
  text-align:center;
  box-shadow:0 10px 30px rgba(15,118,110,.08);
}

.about-module-grid b{
  display:block;
  color:#0f172a;
  margin-bottom:10px;
}

.about-module-grid p{
  color:#64748b;
  font-size:13px;
  line-height:1.6;
}

.about-why{
  background:#ecfeff;
  padding:32px 160px;
  text-align:center;
}

.about-why p{
  color:#334155;
  line-height:1.8;
  font-size:16px;
}

.about-benefits{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
  padding:28px 70px;
  background:white;
}

.about-benefits div{
  color:#0f766e;
  font-weight:900;
  text-align:center;
}

.about-benefits span{
  color:#64748b;
  font-size:13px;
  font-weight:600;
}

.developer-card-new{
  margin:25px 70px 35px;
  background:linear-gradient(135deg,#0f172a,#1e3a8a,#0f766e);
  border-radius:26px;
  padding:28px;
  display:grid;
  grid-template-columns:140px 1fr 1fr;
  gap:28px;
  align-items:center;
  color:white;
}

.developer-card-new img{
  width:140px;
  height:140px;
  border-radius:50%;
  object-fit:cover;
  border:5px solid #5eead4;
  background:white;
}

.developer-card-new span{
  color:#5eead4;
  font-weight:900;
}

.developer-card-new h2{
  font-size:34px;
  margin:8px 0;
}

.developer-card-new p{
  color:#e0f2fe;
  margin:6px 0;
}

.developer-contact{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
}

.developer-contact p{
  border:1px solid rgba(255,255,255,.25);
  padding:8px 12px;
  border-radius:10px;
}

.developer-card-new blockquote{
  font-size:18px;
  line-height:1.7;
  color:#ecfeff;
  border-left:2px solid #5eead4;
  padding-left:24px;
}

.about-footer-new{
  background:#064e3b;
  color:white;
  padding:18px 70px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

@media(max-width:1200px){
  .about-module-grid,
  .about-benefits{
    grid-template-columns:repeat(3,1fr);
  }

  .developer-card-new{
    grid-template-columns:120px 1fr;
  }

  .developer-card-new blockquote{
    grid-column:1 / -1;
  }
}

@media(max-width:900px){
  .about-hero-new{
    grid-template-columns:1fr;
    padding:35px 24px;
  }

  .about-hero-text h1{
    font-size:34px;
  }

  .mock-screen{
    width:100%;
    margin-top:25px;
  }

  .about-module-grid,
  .about-benefits{
    grid-template-columns:1fr;
    padding:25px;
  }

  .about-why{
    padding:28px 25px;
  }

  .developer-card-new{
    margin:25px;
    grid-template-columns:1fr;
    text-align:center;
  }

  .developer-card-new img{
    margin:auto;
  }

  .about-footer-new{
    flex-direction:column;
    gap:8px;
  }
}
#aboutPage{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100vw !important;
  height:100vh !important;
  z-index:999999 !important;
  background:#f8fafc !important;
  overflow-y:auto !important;
}

#authContainer.hidden{
  display:none !important;
}

#dashboard.hidden{
  display:none !important;
}
.main{
  margin-left:285px;
  width:calc(100% - 285px);
  min-height:100vh;
  padding:28px;
}

.main > div{
  width:100%;
}

.section{
  width:100%;
}

#medicineSection,
#supplierSection,
#purchaseSection,
#billingSection,
#customerSection,
#expenseSection,
#reportSection,
#oldBillSection,
#expirySection,
#reorderSection,
#subscriptionSection,
#profileSection,
#paymentDetailsSection{
  width:100%;
}

table{
  width:100%;
}

@media(max-width:900px){
  .main{
    margin-left:0;
    width:100%;
  }
}
.main{
  margin-left:285px !important;
  width:calc(100% - 285px) !important;
  min-height:100vh !important;
  padding:28px !important;
  display:block !important;
}

.main > div{
  width:100% !important;
}

.section{
  width:100% !important;
  max-width:100% !important;
}

#medicineSection,
#supplierSection,
#purchaseSection,
#billingSection,
#customerSection,
#expenseSection,
#reportSection,
#expirySection,
#reorderSection,
#oldBillSection,
#profileSection,
#subscriptionSection,
#paymentDetailsSection{
  width:100% !important;
  max-width:100% !important;
}

.hidden{
  display:none !important;
}

@media(max-width:900px){
  .main{
    margin-left:0 !important;
    width:100% !important;
  }
}
.sidebar .logo small,
.sidebar .logo .plan-badge,
.sidebar .logo .payment-status-badge{
  display:none !important;
}

.sidebar .logo{
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}

.sidebar .logo{
  font-size:28px;
}
.payment-settings-card{
    background:#ffffff;
    padding:25px;
    border-radius:20px;
    border:1px solid #d1fae5;
    box-shadow:0 8px 24px rgba(15,118,110,0.08);
    margin-top:20px;
}

.payment-settings-card h3{
    color:#0f766e;
    margin-bottom:20px;
    font-size:24px;
}

.payment-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.payment-grid input{
    width:100%;
    padding:14px;
    border:1px solid #a7f3d0;
    border-radius:12px;
    background:#f8fffc;
    font-size:15px;
}

.save-payment-btn{
    margin-top:20px;
    padding:14px 24px;
    background:#0f766e;
    color:white;
    border:none;
    border-radius:12px;
    font-weight:700;
    cursor:pointer;
}

.save-payment-btn:hover{
    background:#115e59;
}

/* Final project stability/UI polish */
.logo{
  height:140px !important;
  padding:0 !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
}
.logo img{
  background:transparent !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
}
.payment-settings-card{
  background:#ffffff;
  padding:25px;
  border-radius:20px;
  border:1px solid #d1fae5;
  box-shadow:0 8px 24px rgba(15,118,110,0.08);
  margin-top:20px;
}
.payment-settings-card h3{
  color:#0f766e;
  margin-bottom:20px;
  font-size:24px;
}
.payment-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
}
.payment-grid input{
  width:100%;
  padding:14px;
  border:1px solid #a7f3d0;
  border-radius:12px;
  background:#f8fffc;
  font-size:15px;
}
.save-payment-btn{
  margin-top:20px;
  padding:14px 24px;
  background:#0f766e;
  color:white;
  border:none;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
}
.payment-display-card{
  display:block !important;
  margin-top:15px;
  padding:18px;
  border:1px solid #bbf7d0;
  border-radius:16px;
  background:#f0fdfa;
  box-shadow:0 8px 22px rgba(15,118,110,0.08);
}
.payment-display-card h3{
  color:#0f766e;
  margin-bottom:10px;
}
.payment-display-card p{
  margin:7px 0;
  color:#334155;
}
#paymentCenterSection table td,
#paymentCenterSection table th{
  vertical-align:middle;
}

/* Pricing + Unit Quantity Fixes */
#medicinePackName,
#medicineUnitName,
#medicineUnitsPerPack,
#purchaseUnitType,
#billSaleUnit{
  padding:13px 14px;
  margin-right:10px;
  margin-bottom:12px;
  border:1.5px solid #a7f3d0;
  border-radius:12px;
  background:#f8fffc;
  outline:none;
  min-height:44px;
}

.plan-price{
  color:#0f766e;
}


/* Final requested polish: annum corner labels and POS final print button */
.plan-card{
  position:relative;
  overflow:hidden;
}
.annum-corner{
  position:absolute;
  top:52px;
  right:14px;
  background:#ecfdf5;
  color:#0f766e;
  border:1px solid #86efac;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(15,118,110,.10);
  white-space:nowrap;
}
.plan-card.featured .annum-corner{
  background:#0f766e;
  color:white;
  border-color:#0f766e;
}
.final-print-main-btn{
  background:#2563eb!important;
  margin-left:6px;
}
@media(max-width:900px){
  .annum-corner{position:static;display:inline-block;margin:0 0 12px 0;}
}


.trial-offer{
  display:inline-block;
  margin:6px 0 10px;
  padding:7px 12px;
  border-radius:999px;
  background:#ecfdf5;
  color:#0f766e;
  font-weight:800;
  border:1px solid #99f6e4;
  font-size:13px;
}


/* Final plan badges and premium AI order generator */
.feature-badge{display:inline-flex;align-items:center;gap:6px;margin:8px 6px 10px 0;padding:9px 14px;border-radius:999px;font-size:12px;font-weight:900;line-height:1.2;letter-spacing:.2px;box-shadow:0 8px 20px rgba(15,23,42,.10);}
.warning-badge{background:linear-gradient(135deg,#fff7ed,#ffedd5);color:#9a3412;border:1px solid #fdba74;}
.premium-badge{background:linear-gradient(135deg,#ecfdf5,#d1fae5);color:#065f46;border:1px solid #6ee7b7;}
.premium-plan-card{position:relative;border:2px solid #10b981!important;box-shadow:0 14px 30px rgba(16,185,129,.14)!important;}
.standard-plan-card{position:relative;border:2px solid #f97316!important;}
.premium-ai-order-box{margin:22px 0;padding:18px;border:2px solid #10b981;border-radius:16px;background:#ecfdf5;}
.premium-ai-order-box h3{margin:0 0 8px;color:#065f46;}
.premium-ai-order-box p{margin:0 0 12px;color:#334155;}
.premium-ai-order-box button,.whatsapp-order-btn{display:inline-block;padding:10px 14px;border:none;border-radius:10px;background:#0f766e;color:#fff;text-decoration:none;font-weight:800;cursor:pointer;margin-top:10px;}
.supplier-order-card{margin-top:14px;padding:14px;border:1px solid #bbf7d0;border-radius:14px;background:#fff;}
.supplier-order-card h4{margin:0 0 10px;color:#064e3b;}
.supplier-order-card table{width:100%;border-collapse:collapse;margin-top:8px;}
.supplier-order-card th,.supplier-order-card td{border:1px solid #e2e8f0;padding:8px;text-align:left;}


/* Clean attractive subscription badges */
.feature-badge{
  display:inline-flex!important;
  align-items:center;
  gap:7px;
  margin:10px 6px 12px 0!important;
  padding:10px 16px!important;
  border-radius:999px!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1.2;
  letter-spacing:.2px;
  box-shadow:0 10px 24px rgba(15,23,42,.12)!important;
}
.warning-badge{
  background:linear-gradient(135deg,#fff7ed,#fed7aa)!important;
  color:#9a3412!important;
  border:1px solid #fb923c!important;
}
.premium-badge{
  background:linear-gradient(135deg,#ecfdf5,#a7f3d0)!important;
  color:#064e3b!important;
  border:1px solid #34d399!important;
}
.annum-corner{
  box-shadow:0 8px 20px rgba(15,23,42,.12)!important;
}
.standard-plan-card .plan-tag{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;}
.premium-plan-card .plan-tag{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;}


/* ===== Professional Dashboard Refresh - keeps existing buttons/options unchanged ===== */
body{
  background:linear-gradient(135deg,#eefdf8 0%,#f8fafc 42%,#ecfeff 100%);
}
.dashboard{
  background:linear-gradient(135deg,#eefdf8 0%,#f8fafc 42%,#ecfeff 100%);
}
.sidebar{
  background:linear-gradient(180deg,#052f3d 0%,#064e4a 50%,#042f2e 100%);
  border-right:none;
  box-shadow:12px 0 35px rgba(4,47,46,.18);
}
.sidebar .logo,.logo{
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}
.sidebar ul li{
  background:rgba(255,255,255,.09);
  color:#ecfeff;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.sidebar ul li:hover{
  background:linear-gradient(135deg,#10b981,#0f766e);
  color:white;
  transform:translateX(6px) scale(1.01);
  box-shadow:0 10px 22px rgba(16,185,129,.25);
}
.bottom-links{
  border-top:1px solid rgba(255,255,255,.18);
}
.bottom-links li{
  background:rgba(255,255,255,.08)!important;
  color:#ecfeff!important;
}
.topbar{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px);
  border:1px solid rgba(20,184,166,.22);
  box-shadow:0 18px 45px rgba(15,118,110,.10);
}
.topbar h1{
  color:#073b4c;
  letter-spacing:-.5px;
}
.profile-btn{
  background:#ecfdf5!important;
  color:#0f766e!important;
  border:1px solid #99f6e4!important;
  border-radius:12px!important;
  padding:11px 18px!important;
  font-weight:800!important;
}
.logout-btn{
  background:linear-gradient(135deg,#ef4444,#be123c);
  box-shadow:0 10px 20px rgba(239,68,68,.22);
}
.dashboard-hero{
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:center;
  margin-bottom:24px;
  padding:28px;
  border-radius:28px;
  color:white;
  background:
    radial-gradient(circle at 88% 10%,rgba(16,185,129,.55),transparent 32%),
    linear-gradient(135deg,#073b4c 0%,#0f766e 55%,#10b981 100%);
  box-shadow:0 24px 55px rgba(15,118,110,.22);
  position:relative;
  overflow:hidden;
}
.dashboard-hero:after{
  content:"";
  position:absolute;
  width:230px;
  height:230px;
  right:-70px;
  bottom:-100px;
  border-radius:50%;
  background:rgba(255,255,255,.13);
}
.dashboard-hero-text,.dashboard-hero-badges{position:relative;z-index:1;}
.hero-kicker{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  font-weight:800;
  font-size:13px;
  margin-bottom:12px;
}
.dashboard-hero h2{
  font-size:34px;
  line-height:1.1;
  margin-bottom:10px;
}
.dashboard-hero p{
  max-width:680px;
  color:#dffdf7;
  font-weight:600;
  line-height:1.55;
}
.dashboard-hero-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
  min-width:270px;
}
.dashboard-hero-badges span{
  padding:10px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);
  font-weight:800;
  white-space:nowrap;
}
.cards.dashboard-cards,.cards{
  grid-template-columns:repeat(4,minmax(170px,1fr));
  gap:18px;
}
.card{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(20,184,166,.2);
  box-shadow:0 18px 42px rgba(15,118,110,.10);
  transition:.25s ease;
}
.card:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:5px;
  background:linear-gradient(90deg,#10b981,#0ea5e9,#0f766e);
}
.card:after{
  content:"";
  position:absolute;
  right:-26px;
  bottom:-30px;
  width:95px;
  height:95px;
  border-radius:50%;
  background:rgba(16,185,129,.09);
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 55px rgba(15,118,110,.16);
}
.card h2{
  color:#073b4c;
  font-size:30px;
  letter-spacing:-.6px;
}
.card p{
  color:#0f766e;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.7px;
}
.widget{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(20,184,166,.2);
  box-shadow:0 18px 42px rgba(15,118,110,.10);
  transition:.25s ease;
}
.widget:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 55px rgba(15,118,110,.14);
}
.widget h2{
  color:#073b4c;
  display:flex;
  align-items:center;
  gap:8px;
}
.quick-actions button{
  padding:14px!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,#ecfdf5,#f0fdfa)!important;
  color:#0f766e!important;
  border:1px solid #99f6e4!important;
  font-weight:900!important;
  box-shadow:0 10px 20px rgba(15,118,110,.07)!important;
}
.quick-actions button:hover{
  background:linear-gradient(135deg,#10b981,#0f766e)!important;
  color:white!important;
  transform:translateY(-2px);
}
table{
  border:1px solid rgba(20,184,166,.18);
  box-shadow:0 10px 24px rgba(15,118,110,.05);
}
table th{
  background:linear-gradient(135deg,#073b4c,#0f766e);
}
.summary-list p{
  border-bottom:1px solid #ccfbf1;
}
@media(max-width:1100px){
  .dashboard-hero{align-items:flex-start;flex-direction:column;}
  .dashboard-hero-badges{justify-content:flex-start;min-width:0;}
  .cards.dashboard-cards,.cards{grid-template-columns:repeat(2,1fr)!important;}
  .dashboard-widgets{grid-template-columns:1fr!important;}
}
@media(max-width:700px){
  .dashboard-hero{padding:22px;border-radius:22px;}
  .dashboard-hero h2{font-size:26px;}
  .cards.dashboard-cards,.cards{grid-template-columns:1fr!important;}
}

/* Professional POS80, FBR and backup additions */
.professional-settings-box{
  margin:18px 0;
  padding:18px;
  border:1px solid rgba(15,118,110,.18);
  border-radius:18px;
  background:linear-gradient(135deg,#f0fdfa,#ffffff);
  box-shadow:0 10px 25px rgba(15,23,42,.06);
}
.professional-settings-box h3{margin-top:0;color:#0f766e;}
.setting-label{display:block;margin:12px 0 6px;font-weight:800;color:#0f172a;}
.settings-note{font-size:13px;color:#64748b;line-height:1.5;margin:8px 0;}
.backup-btn{background:#0f766e!important;color:#fff!important;border:none!important;border-radius:12px!important;padding:12px 18px!important;font-weight:800!important;cursor:pointer!important;}
.backup-box input[type="file"]{margin-top:10px;background:#fff;border:1px dashed #0f766e;padding:10px;border-radius:12px;width:100%;}
.pos80-receipt{max-width:320px;}
.fbr-block{background:#f8fafc;border:1px dashed #0f766e;border-radius:10px;padding:8px;margin:8px 0;text-align:center;font-size:12px;}
@media print{
  @page{size:80mm auto;margin:3mm;}
  body{background:#fff!important;}
  .receipt{width:80mm!important;max-width:80mm!important;font-size:11px!important;box-shadow:none!important;border:none!important;}
  .sidebar,.topbar,button,.menu,.nav,.section>h2{display:none!important;}
}

/* ===== MediBuddy Professional Dashboard 2026 ===== */
.pro-dashboard-shell{padding:18px 22px 24px;background:#f8fbff;min-height:calc(100vh - 92px);}
.pro-welcome-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;gap:16px;}
.pro-welcome-row h2{font-size:30px;margin:0 0 6px;color:#0b1b34;font-weight:900;}
.pro-welcome-row p{margin:0;color:#475569;font-size:15px;}
.system-tools-wrap{position:relative;z-index:10;}
.system-tools-btn{border:1px solid #94b8ff;background:#0b63f6;color:#fff;padding:12px 18px;border-radius:15px;font-weight:900;box-shadow:0 10px 25px rgba(37,99,235,.18);cursor:pointer;}
.system-tools-menu{position:absolute;right:0;top:54px;width:285px;background:white;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 20px 45px rgba(15,23,42,.16);padding:10px;}
.system-tools-menu button{width:100%;display:flex;gap:12px;align-items:flex-start;text-align:left;border:0;background:white;border-radius:12px;padding:12px;cursor:pointer;color:#0f172a;}
.system-tools-menu button:hover{background:#f1f5f9;}
.system-tools-menu b{display:block;font-size:14px;}
.system-tools-menu small{display:block;color:#64748b;font-size:12px;margin-top:3px;}
.pro-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px;}
.pro-metric-card{background:white;border:1px solid #e5eaf0;border-radius:16px;padding:18px;box-shadow:0 10px 25px rgba(15,23,42,.05);min-height:126px;position:relative;overflow:hidden;}
.pro-metric-card:after{content:"";position:absolute;right:-30px;bottom:-30px;width:80px;height:80px;border-radius:50%;background:rgba(20,184,166,.08);}
.metric-icon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:white;font-size:21px;margin-bottom:10px;}
.metric-icon.green{background:linear-gradient(135deg,#059669,#10b981)}.metric-icon.blue{background:linear-gradient(135deg,#1d4ed8,#2563eb)}.metric-icon.orange{background:linear-gradient(135deg,#f97316,#f59e0b)}.metric-icon.red{background:linear-gradient(135deg,#ef4444,#fb7185)}.metric-icon.teal{background:linear-gradient(135deg,#0f766e,#14b8a6)}.metric-icon.purple{background:linear-gradient(135deg,#7c3aed,#a855f7)}.metric-icon.navy{background:linear-gradient(135deg,#0f172a,#334155)}.metric-icon.cyan{background:linear-gradient(135deg,#0284c7,#06b6d4)}
.pro-metric-card span{font-weight:800;color:#334155;font-size:13px;}.pro-metric-card h3{font-size:24px;color:#0f172a;margin:5px 0 4px;}.pro-metric-card p,.pro-metric-card a{font-size:13px;color:#0f766e;font-weight:700;cursor:pointer;text-decoration:none;}
.pro-dashboard-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:14px;margin-bottom:14px;}.pro-dashboard-grid.second-row{grid-template-columns:1.15fr 1fr .9fr;}
.pro-panel{background:white;border:1px solid #e5eaf0;border-radius:16px;padding:16px;box-shadow:0 10px 25px rgba(15,23,42,.045);overflow:hidden;}.pro-panel h3{margin:0 0 12px;color:#0f172a;font-size:17px;}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}.panel-head button{border:1px solid #dbe3ef;background:#fff;padding:8px 12px;border-radius:10px;color:#334155;}.panel-head a{color:#0b63f6;font-size:13px;font-weight:800;cursor:pointer;}.pro-panel table{width:100%;border-collapse:collapse;}.pro-panel th{font-size:12px;color:#64748b;text-align:left;background:#f8fafc;padding:10px;}.pro-panel td{padding:10px;border-bottom:1px solid #edf2f7;font-size:13px;color:#0f172a;}
.sales-chart-art{height:210px;background:linear-gradient(180deg,#fff,#ecfdf5);border-radius:14px;border:1px solid #eef2f7;padding:18px;display:flex;align-items:flex-end;gap:16px;}.sales-chart-art span{flex:1;background:linear-gradient(180deg,#14b8a6,#d1fae5);border-radius:8px 8px 0 0;box-shadow:0 -8px 20px rgba(20,184,166,.16);}
.mini-alert-list p{background:#fff7ed;border-left:4px solid #f97316;border-radius:10px;padding:10px;margin:8px 0;color:#7c2d12;font-size:13px;}.donut-wrap{display:flex;align-items:center;gap:20px;}.donut-art{width:170px;height:170px;border-radius:50%;background:conic-gradient(#10b981 0 62%,#f59e0b 62% 82%,#ef4444 82% 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;}.donut-art:before{content:"";position:absolute;width:105px;height:105px;background:white;border-radius:50%;}.donut-art strong,.donut-art small{position:relative;z-index:1;text-align:center;}.donut-art strong{font-size:18px;color:#0f172a;}.donut-art small{color:#475569;}.donut-legend p{margin:9px 0;color:#334155;font-size:13px;}.donut-legend b{display:inline-block;width:12px;height:12px;border-radius:4px;background:#10b981;margin-right:8px;}.donut-legend p:nth-child(2) b{background:#f59e0b}.donut-legend p:nth-child(3) b{background:#ef4444}.quick-panel button{display:block;width:100%;border:0;border-radius:12px;padding:13px 15px;text-align:left;color:white;font-weight:900;margin:9px 0;cursor:pointer;}.quick-panel button:nth-child(2){background:linear-gradient(135deg,#059669,#10b981)}.quick-panel button:nth-child(3){background:linear-gradient(135deg,#1d4ed8,#2563eb)}.quick-panel button:nth-child(4){background:linear-gradient(135deg,#7c3aed,#8b5cf6)}.quick-panel button:nth-child(5){background:linear-gradient(135deg,#f97316,#fb923c)}
.pro-status-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#f0fdfa;border:1px solid #b8eee4;border-radius:16px;margin-top:10px;overflow:hidden;}.pro-status-strip div{display:flex;gap:12px;align-items:center;padding:16px;border-right:1px solid #cdeee9;cursor:pointer;}.pro-status-strip div:last-child{border-right:0}.pro-status-strip b{display:block;color:#0f766e}.pro-status-strip small{display:block;color:#475569;margin-top:3px}.pro-footer-strip{display:grid;grid-template-columns:repeat(5,1fr);background:#06223d;color:white;border-radius:0 0 16px 16px;margin-top:14px;padding:16px;gap:10px}.pro-footer-strip span{text-align:center;font-size:13px;border-right:1px solid rgba(255,255,255,.15)}.pro-footer-strip span:last-child{border-right:0}
@media(max-width:1100px){.pro-metric-grid{grid-template-columns:repeat(2,1fr)}.pro-dashboard-grid,.pro-dashboard-grid.second-row,.pro-status-strip{grid-template-columns:1fr}.pro-status-strip div{border-right:0;border-bottom:1px solid #cdeee9}.pro-footer-strip{grid-template-columns:1fr 1fr}.system-tools-menu{right:auto;left:0}}
@media print{.system-tools-wrap,.pro-footer-strip,.pro-status-strip,.sidebar,.topbar{display:none!important}}
#dashboardSection > #activePlanWorkingBox,#dashboardSection #cloudBackupBox,#dashboardSection #branchManagerBox{display:none!important;}

/* ===== Mature professional dashboard refresh requested by user ===== */
body,
.dashboard,
.pro-dashboard-shell{
  background:#f6f8fb !important;
}
.sidebar{
  background:linear-gradient(180deg,#0f172a 0%,#111827 58%,#020617 100%) !important;
  border-right:1px solid rgba(148,163,184,.18) !important;
  box-shadow:10px 0 32px rgba(2,6,23,.20) !important;
}
.sidebar .logo,.logo{
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(226,232,240,.85) !important;
  box-shadow:0 12px 25px rgba(2,6,23,.18) !important;
}
.sidebar ul li{
  background:transparent !important;
  border:1px solid transparent !important;
  color:#cbd5e1 !important;
  border-radius:10px !important;
  font-weight:650 !important;
  letter-spacing:.1px !important;
  box-shadow:none !important;
}
.sidebar ul li:hover,
.sidebar ul li.active{
  background:rgba(15,118,110,.20) !important;
  border-color:rgba(45,212,191,.28) !important;
  color:#ffffff !important;
  transform:translateX(3px) !important;
  box-shadow:none !important;
}
.bottom-links{border-top:1px solid rgba(148,163,184,.20) !important;}
.bottom-links li{background:transparent !important;color:#cbd5e1 !important;}
.topbar{
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  box-shadow:0 10px 24px rgba(15,23,42,.06) !important;
  border-radius:16px !important;
}
.topbar h1{color:#0f172a !important;font-size:23px !important;font-weight:800 !important;}
.pro-dashboard-shell{padding:18px 22px 24px !important;}
.pro-welcome-row h2{
  color:#111827 !important;
  font-size:28px !important;
  font-weight:850 !important;
  letter-spacing:-.3px !important;
}
.pro-welcome-row p{color:#64748b !important;}
.system-tools-btn{
  background:#0f766e !important;
  border:1px solid #0f766e !important;
  color:#fff !important;
  border-radius:10px !important;
  box-shadow:0 8px 18px rgba(15,118,110,.18) !important;
}
.system-tools-menu{
  border:1px solid #e5e7eb !important;
  border-radius:12px !important;
  box-shadow:0 18px 42px rgba(15,23,42,.14) !important;
}
.system-tools-menu button{border-radius:8px !important;}
.pro-metric-grid{gap:14px !important;}
.pro-metric-card,
.pro-panel{
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  border-radius:14px !important;
  box-shadow:0 8px 22px rgba(15,23,42,.055) !important;
}
.pro-metric-card:after{display:none !important;}
.pro-metric-card:hover,
.pro-panel:hover{
  transform:none !important;
  box-shadow:0 10px 26px rgba(15,23,42,.08) !important;
}
.metric-icon{
  width:42px !important;
  height:42px !important;
  border-radius:10px !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.6px !important;
  background:#0f766e !important;
}
.metric-icon.green,.metric-icon.blue,.metric-icon.orange,.metric-icon.red,.metric-icon.teal,.metric-icon.purple,.metric-icon.navy,.metric-icon.cyan{
  background:#0f766e !important;
}
.pro-metric-card span{color:#475569 !important;font-size:12px !important;text-transform:uppercase;letter-spacing:.5px;}
.pro-metric-card h3{color:#111827 !important;font-size:23px !important;}
.pro-metric-card p,.pro-metric-card a{color:#0f766e !important;}
.panel-head h3,.pro-panel h3{color:#111827 !important;font-weight:800 !important;}
.sales-chart-art{
  background:#f8fafc !important;
  border:1px solid #e5e7eb !important;
}
.sales-chart-art span{background:linear-gradient(180deg,#0f766e,#99f6e4) !important;box-shadow:none !important;}
.pro-panel th{background:#f8fafc !important;color:#475569 !important;border-bottom:1px solid #e5e7eb !important;}
.pro-panel td{color:#111827 !important;}
.quick-panel button{
  background:#0f766e !important;
  color:#fff !important;
  border-radius:10px !important;
  box-shadow:none !important;
}
.quick-panel button:hover{background:#115e59 !important;}
.pro-status-strip{
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  border-radius:14px !important;
  box-shadow:0 8px 22px rgba(15,23,42,.05) !important;
}
.pro-status-strip div{border-right:1px solid #e5e7eb !important;}
.pro-status-strip b{color:#0f172a !important;}
.pro-status-strip small{color:#64748b !important;}
.pro-footer-strip{
  background:#0f172a !important;
  border-radius:14px !important;
  color:#e5e7eb !important;
  box-shadow:0 8px 22px rgba(15,23,42,.07) !important;
}
.mini-alert-list p{background:#fff7ed !important;border-left-color:#f97316 !important;}
.donut-art{background:conic-gradient(#0f766e 0 62%,#94a3b8 62% 82%,#ef4444 82% 100%) !important;}
.profile-btn{background:#f8fafc !important;color:#0f172a !important;border:1px solid #e5e7eb !important;border-radius:10px !important;}
.logout-btn{background:#dc2626 !important;border-radius:10px !important;box-shadow:none !important;}

/* Final logo fit only */
#sidebarLogo.logo{padding:10px !important; box-sizing:border-box !important; overflow:hidden !important;}
#sidebarLogo.logo img{width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; object-fit:contain !important; display:block !important; margin:auto !important;}
.stock-tools{
    display:flex;
    gap:10px;
    margin-bottom:15px;
}

.export-btn,
.import-btn{
    padding:10px 15px;
    border:none;
    border-radius:8px;
    cursor:pointer;
}
/* Feature merge 20260622: bold low stock visibility */
.low-stock-row, tr.low-stock-row, .low-stock-item, .low-stock-preview {
  font-weight: 900 !important;
}