*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f4f7fb;color:#172033}
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f2f5f,#0b8ee8)}
.login-box{width:420px;background:white;border-radius:24px;padding:42px;box-shadow:0 25px 60px rgba(0,0,0,.25);text-align:center}
.logo{width:82px;height:82px;margin:0 auto 20px;background:#0b8ee8;color:white;border-radius:24px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px}
.login-box h1{margin:0 0 10px;font-size:30px}
.login-box p{color:#65758b;margin-bottom:28px}
input{width:100%;padding:15px 16px;margin-bottom:14px;border:1px solid #d9e2ef;border-radius:14px;font-size:15px}
button,.primary{border:0;border-radius:14px;background:#0b8ee8;color:white;padding:14px 22px;font-weight:700;cursor:pointer}
.login-box button{width:100%;font-size:16px;margin-top:8px}

.layout{display:flex;min-height:100vh}
.sidebar{width:260px;background:#101828;color:white;padding:28px 20px}
.brand{font-size:26px;font-weight:800;margin-bottom:34px}
.sidebar a{display:block;color:#cbd5e1;padding:13px 16px;border-radius:12px;margin-bottom:6px}
.sidebar a.active,.sidebar a:hover{background:#1d4ed8;color:white}
.main{flex:1;padding:34px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.topbar h1{margin:0;font-size:32px}
.topbar p{margin:7px 0 0;color:#64748b}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px}
.card{background:white;border-radius:20px;padding:24px;box-shadow:0 10px 25px rgba(15,23,42,.06)}
.card span{color:#64748b;font-size:14px}
.card strong{display:block;margin-top:12px;font-size:34px}
.card.green strong{color:#16a34a}
.panel{background:white;border-radius:22px;padding:26px;box-shadow:0 10px 25px rgba(15,23,42,.06)}
.panel h2{margin-top:0}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:16px;border-bottom:1px solid #e5e7eb}
th{color:#64748b;font-size:13px}
.badge{padding:7px 12px;border-radius:999px;font-size:13px;font-weight:700}
.badge.ready{background:#dcfce7;color:#166534}
.badge.wait{background:#fef3c7;color:#92400e}
.badge.buy{background:#dbeafe;color:#1e40af}
@media(max-width:900px){.cards{grid-template-columns:1fr}.sidebar{display:none}.main{padding:18px}}
.error{background:#fee2e2;color:#991b1b;padding:12px;border-radius:12px;margin-bottom:14px;font-weight:700}
a.primary{text-decoration:none;display:inline-block}
.form-panel{max-width:1000px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
textarea{width:100%;min-height:90px;padding:15px 16px;margin-bottom:14px;border:1px solid #d9e2ef;border-radius:14px;font-size:15px;font-family:Arial}
.product-row{display:grid;grid-template-columns:2fr 120px 180px;gap:14px;margin-bottom:10px}
@media(max-width:900px){.grid2,.product-row{grid-template-columns:1fr}}
.product-row{display:grid;grid-template-columns:2fr 120px 160px 46px;gap:14px;margin-bottom:10px}
.secondary{background:#eef4ff;color:#1d4ed8;border:1px solid #c7d7fe;margin-top:8px}
.remove-row{background:#fee2e2;color:#991b1b;padding:0;border-radius:12px;font-size:22px}
@media(max-width:900px){.product-row{grid-template-columns:1fr}}

.log-button{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:20;
  background:#101828;
  color:white;
  border:0;
  border-radius:999px;
  padding:14px 20px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}

.log-drawer{
  position:fixed;
  top:0;
  right:-430px;
  width:420px;
  max-width:92vw;
  height:100vh;
  background:white;
  z-index:50;
  box-shadow:-20px 0 50px rgba(15,23,42,.18);
  transition:.25s;
  padding:24px;
  overflow:auto;
}

.log-drawer.open{right:0}

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

.log-close{
  background:#fee2e2;
  color:#991b1b;
  border:0;
  border-radius:10px;
  padding:8px 12px;
}

.log-item{
  border-left:4px solid #0b8ee8;
  background:#f8fafc;
  padding:12px 14px;
  border-radius:12px;
  margin-bottom:12px;
}

.log-item strong{display:block}
.log-item small{color:#64748b}
.log-item p{margin:7px 0 0;color:#334155}
.item-panel{margin-bottom:18px}
.item-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:16px}
.item-head h2{margin:0}
.item-head p{margin:6px 0 0;color:#64748b}
select{padding:14px 16px;border:1px solid #d9e2ef;border-radius:14px;background:white;font-size:15px}
@media(max-width:900px){.item-head{display:block}}
.product-row-simple{
  display:grid;
  grid-template-columns:2fr 120px 120px;
  gap:14px;
  align-items:start;
}
.remove-small{
  background:#fee2e2;
  color:#991b1b;
  border:0;
  border-radius:10px;
  padding:9px 12px;
  cursor:pointer;
}
@media(max-width:900px){
  .product-row-simple{grid-template-columns:1fr}
}

.calc-box{
  background:#f1f5f9;
  border:1px solid #dbe3ef;
  border-radius:14px;
  padding:14px 16px;
  margin:14px 0;
  color:#0f172a;
}
.sidebar a{
  text-decoration:none;
}
.sidebar a:hover{
  text-decoration:none;
}
.search-panel{
  display:grid;
  grid-template-columns:1fr 120px;
  gap:14px;
}
.file-link{
  display:inline-block;
  margin:8px 0 14px;
  font-weight:700;
  color:#0b8ee8;
}
@media(max-width:900px){
  .search-panel{grid-template-columns:1fr}
}

.brand{
  display:flex !important;
  align-items:center;
  gap:12px;
  font-size:20px !important;
  font-weight:900;
  letter-spacing:.3px;
}

.brand img{
  width:38px;
  height:38px;
  object-fit:contain;
  border-radius:10px;
  background:white;
  padding:3px;
}

.pro-panel{
  border:1px solid #e5edf7;
}

.bulk-footer{
  display:flex;
  justify-content:flex-end;
  margin-top:18px;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
}

.status-pill.ready{
  background:#dbeafe;
  color:#1e40af;
}

.status-pill.sent{
  background:#dcfce7;
  color:#166534;
}

.status-pill.delivered{
  background:#bbf7d0;
  color:#14532d;
}

.status-pill.cancelled{
  background:#fee2e2;
  color:#991b1b;
}

.status-pill.closed{
  background:#e5e7eb;
  color:#374151;
}

.inline-edit{
  display:flex;
  gap:8px;
  align-items:center;
}

.small-btn{
  padding:10px 14px;
  border-radius:10px;
}

.sidebar{
  background:linear-gradient(180deg,#0f172a,#111827);
}

.panel{
  border:1px solid #e5edf7;
}

table tbody tr:hover{
  background:#f8fbff;
}

.avatar{
  width:42px;
  height:42px;
  border-radius:14px;
  object-fit:cover;
  background:#eef2ff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#1d4ed8;
}

.avatar.empty{
  border:1px solid #dbe3ef;
}

/* =========================
   THEME 2 - MODERN SAAS
   Hasy DE▷CH
========================= */

body{
  background:
    radial-gradient(circle at top left, rgba(99,102,241,.16), transparent 35%),
    linear-gradient(135deg,#f6f8ff,#eef3ff);
  color:#101828;
}

.layout{
  background:transparent;
}

.sidebar{
  width:280px;
  background:linear-gradient(180deg,#4f46e5,#2563eb 55%,#1e40af);
  color:white;
  box-shadow:12px 0 35px rgba(37,99,235,.18);
  border-right:1px solid rgba(255,255,255,.15);
}

.sidebar a{
  color:#eaf0ff;
  font-weight:700;
  margin-bottom:8px;
  border-radius:16px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:10px;
  transition:.18s ease;
}

.sidebar a.active,
.sidebar a:hover{
  background:rgba(255,255,255,.18);
  color:white;
  transform:translateX(3px);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}

.brand{
  margin-bottom:34px;
  padding:10px 6px;
}

.brand span{
  font-size:22px;
  font-weight:900;
}

.brand img{
  width:44px;
  height:44px;
  border-radius:15px;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
}

.main{
  padding:36px 42px;
}

.topbar{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 18px 45px rgba(31,41,55,.08);
  border-radius:28px;
  padding:24px 28px;
  margin-bottom:26px;
}

.topbar h1{
  font-size:34px;
  letter-spacing:-.8px;
}

.topbar p{
  color:#667085;
  font-weight:600;
}

.panel,
.card{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 20px 50px rgba(31,41,55,.08);
}

.panel{
  border-radius:28px;
}

.card{
  border-radius:24px;
  position:relative;
  overflow:hidden;
}

.card:after{
  content:"";
  position:absolute;
  right:-25px;
  top:-25px;
  width:90px;
  height:90px;
  background:linear-gradient(135deg,rgba(79,70,229,.18),rgba(14,165,233,.12));
  border-radius:50%;
}

.card strong{
  color:#111827;
}

.card.green strong{
  color:#16a34a;
}

.primary{
  background:linear-gradient(135deg,#6366f1,#0ea5e9);
  box-shadow:0 12px 28px rgba(37,99,235,.25);
  border-radius:16px;
}

.primary:hover{
  filter:brightness(.97);
  transform:translateY(-1px);
}

.secondary{
  background:#eef2ff;
  color:#4338ca;
  border:1px solid #c7d2fe;
}

input,
select,
textarea{
  border:1px solid #d7def0;
  background:white;
  border-radius:16px;
  transition:.15s ease;
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:#6366f1;
  box-shadow:0 0 0 4px rgba(99,102,241,.14);
}

table{
  border-collapse:separate;
  border-spacing:0;
}

th{
  color:#667085;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.4px;
}

td{
  font-weight:600;
  color:#182230;
}

table tbody tr{
  transition:.15s ease;
}

table tbody tr:hover{
  background:#f4f7ff;
}

.status-pill.sent,
.badge.ready{
  background:#dcfce7;
  color:#166534;
}

.status-pill.cancelled{
  background:#fee2e2;
  color:#991b1b;
}

.status-pill.ready{
  background:#dbeafe;
  color:#1d4ed8;
}

.status-pill.delivered{
  background:#d1fae5;
  color:#065f46;
}

.status-pill.closed{
  background:#e5e7eb;
  color:#374151;
}

.log-button{
  background:linear-gradient(135deg,#4f46e5,#0ea5e9);
  box-shadow:0 18px 40px rgba(37,99,235,.35);
}

.log-drawer{
  border-left:1px solid #e5e7eb;
}

.login-page{
  background:
    radial-gradient(circle at top left,rgba(99,102,241,.35),transparent 35%),
    linear-gradient(135deg,#4f46e5,#0ea5e9);
}

.login-box{
  border-radius:30px;
  box-shadow:0 30px 90px rgba(15,23,42,.28);
}

/* Responsive */
@media(max-width:900px){
  .layout{
    display:block;
  }

  .sidebar{
    width:100%;
    min-height:auto;
    padding:16px;
    border-radius:0 0 28px 28px;
  }

  .brand{
    margin-bottom:14px;
  }

  .sidebar a{
    display:inline-flex;
    margin:4px;
    padding:10px 13px;
    font-size:14px;
  }

  .main{
    padding:18px;
  }

  .topbar{
    display:block;
    padding:20px;
    border-radius:22px;
  }

  .topbar h1{
    font-size:28px;
  }

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

  .panel{
    overflow-x:auto;
    border-radius:22px;
    padding:18px;
  }

  table{
    min-width:760px;
  }

  .grid2,
  .product-row,
  .product-row-simple,
  .search-panel,
  .inline-edit{
    grid-template-columns:1fr !important;
    display:grid;
  }

  .login-box{
    width:92%;
    padding:28px;
  }
}

/* ===== Brand bigger + flags ===== */
.brand.brand-stack{
  display:flex !important;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  padding:10px 6px 18px;
  margin-bottom:24px;
}

.brand.brand-stack img{
  width:72px !important;
  height:72px !important;
  object-fit:contain;
  border-radius:18px;
  background:#fff;
  padding:6px;
  box-shadow:0 16px 35px rgba(0,0,0,.18);
}

.brand-text{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.brand-title{
  font-size:30px;
  font-weight:900;
  line-height:1;
  color:#fff;
  letter-spacing:-.5px;
}

.brand-route{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:22px;
  font-weight:800;
  color:#eaf0ff;
}

.brand-arrow{
  font-size:20px;
  opacity:.95;
}

/* ===== menu icons ===== */
.sidebar a{
  display:flex;
  align-items:center;
  gap:12px;
}

.sidebar a i{
  font-size:18px;
  min-width:20px;
}

.sidebar a span{
  display:inline-block;
}

/* mobile */
@media(max-width:900px){
  .brand.brand-stack{
    flex-direction:row;
    align-items:center;
    gap:14px;
  }

  .brand.brand-stack img{
    width:58px !important;
    height:58px !important;
  }

  .brand-title{
    font-size:24px;
  }

  .brand-route{
    font-size:18px;
  }
}

/* ===== Correct logo / brand layout ===== */
.brand.brand-inline{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:14px !important;
  margin-bottom:32px !important;
  padding:4px 0 18px !important;
}

.brand.brand-inline img{
  width:64px !important;
  height:auto !important;
  max-height:64px !important;
  object-fit:contain !important;
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.brand-name{
  color:white;
  font-size:26px;
  font-weight:900;
  letter-spacing:-0.5px;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.brand-name span{
  font-size:23px;
}

.brand-name strong{
  font-size:22px;
  font-weight:900;
  color:#ffffff;
}

@media(max-width:900px){
  .brand.brand-inline img{
    width:52px !important;
    max-height:52px !important;
  }

  .brand-name{
    font-size:22px;
  }

  .brand-name span{
    font-size:20px;
  }
}

/* ===== FINAL BRAND FIX ===== */
.brand,
.brand.brand-inline,
.brand.brand-stack{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:10px !important;
  margin-bottom:32px !important;
  padding:4px 0 18px !important;
}

.brand img,
.brand.brand-inline img,
.brand.brand-stack img{
  width:90px !important;
  height:auto !important;
  max-height:90px !important;
  object-fit:contain !important;
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.brand-name,
.brand-title{
  color:white !important;
  font-size:26px !important;
  font-weight:900 !important;
  letter-spacing:-0.5px !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  white-space:nowrap !important;
}

.brand-route{
  display:none !important;
}

@media(max-width:900px){
  .brand,
  .brand.brand-inline,
  .brand.brand-stack{
    align-items:flex-start !important;
  }

  .brand img,
  .brand.brand-inline img,
  .brand.brand-stack img{
    width:70px !important;
    max-height:70px !important;
  }

  .brand-name,
  .brand-title{
    font-size:22px !important;
  }
}

/* ===== SIDEBAR FINAL FIX ===== */
.layout{
  display:flex !important;
  min-height:100vh !important;
}

.sidebar{
  width:280px !important;
  min-width:280px !important;
  min-height:100vh !important;
  height:auto !important;
  background:linear-gradient(180deg,#4f46e5,#2563eb 55%,#1e40af) !important;
  color:white !important;
  padding:28px 18px !important;
  display:flex !important;
  flex-direction:column !important;
  position:sticky !important;
  top:0 !important;
  align-self:flex-start !important;
}

.brand-box{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  margin-bottom:34px !important;
  gap:12px !important;
}

.brand-logo{
  width:125px !important;
  max-width:125px !important;
  height:auto !important;
  max-height:110px !important;
  object-fit:contain !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  box-shadow:none !important;
}

.brand-name{
  color:white !important;
  font-size:25px !important;
  font-weight:900 !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
}

.side-nav{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  width:100% !important;
}

.side-nav a{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  width:100% !important;
  color:#eef4ff !important;
  text-decoration:none !important;
  padding:14px 16px !important;
  border-radius:16px !important;
  font-weight:700 !important;
  margin:0 !important;
}

.side-nav a i{
  font-size:18px !important;
  width:22px !important;
  min-width:22px !important;
}

.side-nav a.active,
.side-nav a:hover{
  background:rgba(255,255,255,.20) !important;
  color:white !important;
  transform:none !important;
}

.main{
  flex:1 !important;
  min-width:0 !important;
}

@media(max-width:900px){
  .layout{
    display:block !important;
  }

  .sidebar{
    position:relative !important;
    width:100% !important;
    min-width:100% !important;
    min-height:auto !important;
    border-radius:0 0 24px 24px !important;
  }

  .brand-logo{
    width:90px !important;
    max-width:90px !important;
  }

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

  .side-nav{
    flex-direction:row !important;
    flex-wrap:wrap !important;
  }

  .side-nav a{
    width:auto !important;
    padding:10px 13px !important;
    font-size:14px !important;
  }
}

.menu-emoji{
  width:24px !important;
  min-width:24px !important;
  height:24px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:18px !important;
}

/* Dashboard stat icons */
.stat-card{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}

.stat-icon{
  width:58px;
  height:58px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  flex-shrink:0;
}

.stat-icon.blue{background:#dbeafe}
.stat-icon.purple{background:#ede9fe}
.stat-icon.orange{background:#ffedd5}
.stat-icon.green{background:#dcfce7}

/* Sidebar language bottom */
.sidebar{
  min-height:100vh !important;
}

.side-spacer{
  flex:1;
}

.side-lang{
  margin-top:22px;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.14);
}

.side-lang label{
  display:block;
  color:white;
  font-weight:800;
  margin-bottom:8px;
}

.side-lang select{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:0;
}

/* Admin actions */
.row-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.danger-btn{
  background:#fee2e2;
  color:#991b1b;
  border:0;
  border-radius:12px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
}

.danger-btn:hover{
  background:#fecaca;
}

.big-avatar{
  width:86px;
  height:86px;
  border-radius:24px;
  margin-bottom:18px;
}

@media(max-width:900px){
  .side-spacer{
    display:none;
  }

  .side-lang{
    width:100%;
  }

  .stat-card{
    min-height:110px;
  }

  .row-actions{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* Activity drawer smaller */
.log-drawer{
  font-size:13px !important;
}

.log-head h2{
  font-size:20px !important;
}

.log-item{
  padding:10px 12px !important;
  margin-bottom:9px !important;
  border-radius:10px !important;
}

.log-item strong{
  font-size:12px !important;
}

.log-item small{
  font-size:11px !important;
}

.log-item p{
  font-size:12px !important;
  line-height:1.35 !important;
}