/* =========================
   Base Reset + Defaults
   ========================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;color:#111;background:#eaeded}
a{color:inherit}
img{max-width:100%}
button{font-family:inherit}

/* =========================
   Helpers
   ========================= */
.container{max-width:1200px;margin:0 auto;padding:16px}
.badge{display:inline-block;background:#232f3e;color:#fff;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;vertical-align:middle}
.small,.muted{color:#565959}
hr{border:0;border-top:1px solid #d5d9d9;margin:12px 0}

/* =========================
   Old UI (backward support)
   ========================= */
.card{
  background:#fff;
  border:1px solid #d5d9d9;
  border-radius:14px;
  padding:14px;
}
.nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}
.nav a{
  text-decoration:none;
  font-weight:700;
  padding:8px 10px;
  border-radius:10px;
}
.nav a:hover{background:#f7fafa}
table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid #d5d9d9;
  border-radius:12px;
  overflow:hidden;
}
th,td{padding:10px;border-bottom:1px solid #eef0f0;text-align:left;vertical-align:top}
th{background:#f7fafa;font-weight:800}
tr:hover td{background:#fbfbfb}
.table-wrap{overflow:auto;border-radius:12px;border:1px solid #d5d9d9}

/* =========================
   Inputs / Forms
   ========================= */
label{display:block;font-weight:800;margin:10px 0 6px}
input,select,textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #d5d9d9;
  border-radius:12px;
  outline:none;
  background:#fff;
}
input:focus,select:focus,textarea:focus{border-color:#7aa7ff;box-shadow:0 0 0 3px rgba(122,167,255,.2)}
textarea{min-height:90px;resize:vertical}

button, .btn{
  display:inline-block;
  border:1px solid #d5d9d9;
  background:#fff;
  color:#111;
  padding:10px 12px;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
}
button:hover,.btn:hover{background:#f7fafa}
.btn-primary{
  background:#ffd814;
  border-color:#fcd200;
}
.btn-primary:hover{background:#f7ca00}
.btn-danger{
  background:#ffebee;
  border-color:#ffcdd2;
}
.btn-danger:hover{background:#ffe3e6}

/* =========================
   Amazon-style Dashboard UI
   ========================= */
.az-body{background:#eaeded;color:#111}

/* Topbar */
.az-topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:#131921;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.az-topbar-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
}
.az-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  text-decoration:none;
  font-weight:900;
}
.az-brand-logo{font-size:18px}
.az-brand-name{font-size:15px;letter-spacing:.2px}

/* Search */
.az-search{flex:1;display:flex;max-width:680px}
.az-search-input{
  flex:1;
  border:0;
  border-radius:8px 0 0 8px;
  padding:10px 12px;
  outline:none;
}
.az-search-btn{
  border:0;
  background:#febd69;
  color:#111;
  font-weight:900;
  border-radius:0 8px 8px 0;
  padding:10px 14px;
  cursor:pointer;
}
.az-search-btn:active{transform:translateY(1px)}

/* Right actions */
.az-top-actions{display:flex;align-items:center;gap:14px}
.az-lang{white-space:nowrap;font-size:13px}
.az-user{display:flex;align-items:center;gap:10px;white-space:nowrap}
.az-user-name{font-weight:900}
.az-pill{background:#232f3e;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:900}
.az-logout{
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.18);
  padding:6px 10px;
  border-radius:10px;
}
.az-logout:hover{background:rgba(255,255,255,.08)}

.az-burger{
  display:none;
  margin-left:auto;
  border:1px solid rgba(255,255,255,.2);
  background:transparent;
  color:#fff;
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
}

/* Layout */
.az-shell{
  display:flex;
  gap:16px;
  max-width:1200px;
  margin:0 auto;
  padding:16px;
}

/* Sidebar */
.az-sidebar{width:260px;flex:0 0 260px}
.az-side-section{
  background:#fff;
  border:1px solid #d5d9d9;
  border-radius:14px;
  padding:12px;
  margin-bottom:12px;
}
.az-side-title{font-weight:900;margin:4px 0 10px 0}
.az-nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  color:#111;
  text-decoration:none;
  font-weight:900;
}
.az-nav-danger{ color:#b00020; }
.az-nav-danger:hover{ background:#ffebee; color:#b00020; }
.az-nav-item:hover{background:#f7fafa}
.az-nav-item.is-active{background:#fff3e0;border:1px solid #ffd54f}
.az-ic{width:22px;text-align:center}
.az-mini{display:flex;flex-direction:column;gap:6px}
.az-mini-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#333}

/* Main */
.az-main{flex:1;min-width:0}
.az-hero{
  background:#fff;
  border:1px solid #d5d9d9;
  border-radius:16px;
  padding:16px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}
.az-h1{margin:0 0 6px 0;font-size:22px}
.az-sub{margin:0;color:#333;line-height:1.4}
.az-hero-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}

/* Cards grid */
.az-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:12px;
}
.az-card{
  background:#fff;
  border:1px solid #d5d9d9;
  border-radius:16px;
  padding:14px;
}
.az-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.az-card-title{font-weight:900}
.az-card-ic{font-size:22px}
.az-card-desc{margin:10px 0;color:#333;min-height:38px}
.az-card-link{display:inline-block;margin-top:2px;color:#0f1111;font-weight:900;text-decoration:none}
.az-card-link:hover{text-decoration:underline}

/* Panel */
.az-panel{
  background:#fff;
  border:1px solid #d5d9d9;
  border-radius:16px;
  padding:14px;
  margin-top:12px;
}
.az-panel-title{font-weight:900;margin-bottom:8px}
.az-list{margin:0;padding-left:18px;color:#333}
.az-footer{padding:14px 2px;text-align:left}

/* Responsive */
@media (max-width: 980px){
  .az-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 760px){
  .az-shell{padding:12px}
  .az-sidebar{
    position:fixed;
    left:-290px;
    top:52px;
    height:calc(100vh - 52px);
    overflow:auto;
    transition:left .2s ease;
    z-index:60;
    width:270px;
  }
  .az-menu-open .az-sidebar{left:12px}
  .az-burger{display:inline-block}
  .az-top-actions{display:none}
  .az-search{max-width:none}
  .az-hero{flex-direction:column}
  .az-hero-actions{justify-content:flex-start}
}
@media (max-width: 520px){
  .az-grid{grid-template-columns:1fr}
  .az-topbar-inner{gap:8px}
  .az-brand-name{display:none}
}

/* =========================
   Fix: Mobile overflow & spacing
   ========================= */
.az-main, .card{min-width:0}
.az-topbar-inner, .az-shell{overflow-x:hidden}