:root{
  --primary-blue: #254F91;
  --hover-blue: #1d4ed8;
  --bg: #f6f9fc;
  --muted: #6b7280;
  --card: #ffffff;
  --radius: 10px;
  --glass: rgba(255,255,255,0.6);
  --shadow: 0 6px 18px rgba(16,24,40,0.06);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;}
.admin-root{display:flex;height:100vh;background:var(--bg);color:#0f172a;}

/* Sidebar */
.sidebar{
  width:260px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  border-right:1px solid #edf2f7;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:18px;
  transition:width .22s ease;
}
.sidebar.collapsed{width:72px}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer}
.brand-logo{
  width:46px;height:46px;border-radius:8px;background-size:cover;background-position:center;background-repeat:no-repeat;
  background-image: url('images/yesta-logo.jpeg'); /* default fallback image */
  box-shadow: 0 2px 8px rgba(16,24,40,0.06);
  flex-shrink:0;
}
.brand-text{line-height:1}
.brand-text strong{display:block;color:var(--primary-blue)}
.brand-text small{color:var(--muted);font-size:12px}

/* Menu */
.menu{display:flex;flex-direction:column;gap:6px;height:100%}
.menu-item{
  display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px;border:none;background:transparent;text-align:left;cursor:pointer;font-weight:600;color:#0b1220;
}
.menu-item .icon{width:28px;text-align:center}
.menu-item.active, .menu-item:hover{background:rgba(37,79,145,0.06);color:var(--primary-blue)}
.menu-item.danger{margin-top:auto;color:#b91c1c}
.menu-spacer{flex:1}

/* Main area */
.main-area{flex:1;display:flex;flex-direction:column;min-width:0}

/* Topbar */
.topbar{height:72px;padding:14px 20px;display:flex;align-items:center;gap:14px;background:transparent;border-bottom:1px solid #eef2ff}
.icon-btn{background:transparent;border:0;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:18px}
.search-wrap{flex:1}
.search-wrap input{width:100%;padding:10px 14px;border-radius:8px;border:1px solid #e6eef8;background:#fff;outline:none}
.topbar-right{display:flex;align-items:center;gap:12px}
.topcard{background:linear-gradient(180deg,var(--card),#fbfdff);padding:8px 12px;border-radius:8px;display:flex;flex-direction:column;text-align:center;min-width:84px;box-shadow:var(--shadow)}
.topcard-title{font-size:12px;color:var(--muted)}
.topcard-value{font-weight:700;color:var(--primary-blue)}
.profile{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:999px}
.avatar{width:36px;height:36px;border-radius:8px;object-fit:cover}

/* Content */
.content{padding:18px 22px;overflow:auto;flex:1}
.section{display:none}
.active-section{display:block}

/* Dashboard cards */
.dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.card{background:var(--card);padding:16px;border-radius:12px;box-shadow:var(--shadow);border:1px solid #f1f5f9}
.stat-card .card-title{font-size:13px;color:var(--muted)}
.stat-card .card-value{font-size:20px;font-weight:700;color:var(--primary-blue)}

/* Panels and tables */
.panel{background:var(--card);padding:14px;border-radius:12px;box-shadow:var(--shadow);margin-bottom:16px}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.panel-head h3{margin:0;font-size:16px;color:#0f172a}
.btn{padding:8px 12px;border-radius:8px;border:1px solid #e6eef8;background:#fff;cursor:pointer}
.btn.primary{background:var(--primary-blue);color:#fff;border-color:transparent}
.btn.small{padding:6px 8px}
.table{width:100%;border-collapse:collapse}
.table thead th{background:#fbfdff;padding:10px;border-bottom:1px solid #eef2f7;text-align:left;font-size:13px;color:var(--muted)}
.table tbody td{padding:12px;border-bottom:1px solid #f3f6fb}

/* Charts Row */
.charts-row{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;margin-bottom:16px}

/* Table panel tweaks */
.table-panel .panel-head{margin-bottom:8px}

/* Product listing */
.table-actions{display:flex;gap:12px;align-items:center;padding:8px 0;margin-bottom:8px}
.table-actions input{padding:8px;border-radius:8px;border:1px solid #e5eefb}

/* Settings styles & logo preview */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.setting-card{padding:14px;border-radius:10px;border:1px solid #eef2f7}
.logo-upload-section .logo-preview-row{display:flex;gap:12px;align-items:center}
.logo-preview{width:84px;height:84px;border-radius:10px;background-color:#f8fafc;background-position:center;background-size:cover;background-repeat:no-repeat;border:1px solid #e6eef8;box-shadow:0 4px 14px rgba(2,6,23,0.03)}
.logo-actions{display:flex;flex-direction:column;gap:8px}

/* Footer */
.admin-footer{text-align:center;padding:14px 8px;color:var(--muted);font-size:13px}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(3,7,18,0.45);z-index:999}
.modal[aria-hidden="false"]{display:flex}
.modal-dialog{width:920px;max-width:96%;background:var(--card);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.modal header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.form-row{display:flex;gap:12px}
.form-row label{flex:1;display:flex;flex-direction:column;gap:6px;font-size:13px}
.form-row input{padding:8px;border-radius:8px;border:1px solid #e6eef8}
.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

/* Responsive */
@media (max-width:1100px){
  .dash-grid{grid-template-columns:repeat(2,1fr)}
  .charts-row{grid-template-columns:1fr}
}
@media (max-width:760px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:40;transform:translateX(-120%);transition:transform .2s}
  .sidebar.show{transform:translateX(0)}
  .main-area{margin-left:0}
  .dash-grid{grid-template-columns:1fr}
  .charts-row{grid-template-columns:1fr}
}