/* Klarr Dashboard v3 — Professional SaaS Design System */

/* ===== LAYOUT ===== */
.dash-layout { display:flex; min-height:100vh; background:var(--bg); }

.dash-sidebar {
  width:230px; background:var(--bg); border-right:1px solid var(--border);
  padding:20px 0; position:fixed; top:0; bottom:0; left:0; overflow-y:auto; z-index:50;
  display:flex; flex-direction:column;
}
.dash-sidebar .brand { padding:0 20px 20px; border-bottom:1px solid var(--border); margin-bottom:16px; flex-shrink:0; }
.dash-sidebar .brand a { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; text-decoration:none; background:linear-gradient(135deg,var(--accent),#e0a040); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.dash-sidebar .brand img { height:24px; }
.dash-sidebar .nav-section { margin-bottom:16px; padding:0 12px; }
.dash-sidebar .nav-section:last-child { margin-top:auto; border-top:1px solid var(--border); padding-top:16px; }
.dash-sidebar .nav-section a {
  display:flex; align-items:center; gap:10px; padding:9px 12px; font-size:13px;
  color:var(--text-muted); text-decoration:none; border-radius:6px; transition:all 0.15s; margin-bottom:2px;
}
.dash-sidebar .nav-section a:hover { color:var(--text); background:rgba(255,255,255,0.03); }
.dash-sidebar .nav-section a.active { color:var(--text); background:rgba(255,255,255,0.06); font-weight:500; }
.dash-sidebar .nav-section a .nav-icon { font-size:16px; width:22px; text-align:center; flex-shrink:0; }

.dash-main { margin-left:230px; padding:32px 36px; width:calc(100% - 230px); min-height:100vh; }

/* ===== PAGE HEADER ===== */
.page-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.page-header h1 { font-size:1.5rem; font-weight:600; letter-spacing:-0.02em; line-height:1.2; }
.page-header .page-subtitle { font-size:13px; color:var(--text-muted); margin-top:6px; }
.page-header .badge { margin-bottom:4px; }

/* ===== STATS GRID ===== */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
.stat-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:20px;
  transition:all 0.15s; position:relative; overflow:hidden;
}
.stat-card:hover { border-color:rgba(255,255,255,0.12); transform:translateY(-1px); }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--accent),transparent); opacity:0; transition:opacity 0.15s; }
.stat-card:hover::before { opacity:1; }
.stat-card .label { font-size:10px; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-dim); margin-bottom:10px; font-weight:600; }
.stat-card .value { font-size:1.75rem; font-weight:600; letter-spacing:-0.03em; line-height:1; }
.stat-card .sub { font-size:12px; color:var(--text-muted); margin-top:6px; line-height:1.4; }
.stat-card.accent .value { color:var(--accent); }
.stat-card.accent::before { background:linear-gradient(90deg,var(--accent),transparent); opacity:1; }

/* ===== PANELS ===== */
.panel { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:24px; margin-bottom:20px; }
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.panel-header h2 { font-size:14px; font-weight:600; letter-spacing:-0.01em; }

/* ===== GRID ===== */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,fr); gap:16px; }
.info-card { padding:20px; background:var(--bg-alt); border-radius:10px; text-align:center; border:1px solid var(--border); }
.info-card .info-icon { font-size:28px; margin-bottom:12px; }
.info-card h3 { font-size:13px; font-weight:600; margin-bottom:6px; }
.info-card p { font-size:12px; color:var(--text-muted); line-height:1.5; }

/* ===== TABLES ===== */
table { width:100%; border-collapse:collapse; }
th { text-align:left; padding:10px 12px; border-bottom:2px solid var(--border); font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-dim); }
td { padding:12px; border-bottom:1px solid var(--border); font-size:13px; color:var(--text-muted); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(255,255,255,0.015); }

/* ===== BADGES ===== */
.badge { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:9999px; font-size:11px; font-weight:600; letter-spacing:0.02em; }
.badge.active,.badge.paid { background:rgba(82,200,120,0.12); color:#52c878; }
.badge.pending { background:rgba(184,134,11,0.12); color:#d4a017; }
.badge.cancelled { background:rgba(224,80,80,0.12); color:#e05050; }

/* ===== BUTTONS ===== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 18px;
  font-size:13px; font-weight:500; border:1px solid var(--border); border-radius:6px;
  background:var(--bg-elevated); color:var(--text); cursor:pointer; font-family:inherit;
  transition:all 0.15s; text-decoration:none; line-height:1.4;
}
.btn:hover { border-color:var(--text-dim); background:rgba(255,255,255,0.06); }
.btn:active { transform:scale(0.98); }
.btn.primary { background:var(--text); color:var(--bg); border-color:var(--text); }
.btn.primary:hover { opacity:0.88; background:var(--text); }
.btn.accent { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.btn.accent:hover { opacity:0.88; background:var(--accent); }
.btn.danger { border-color:rgba(224,80,80,0.3); color:#e05050; }
.btn.danger:hover { background:rgba(224,80,80,0.08); }
.btn.sm { padding:7px 14px; font-size:12px; }
.btn-lg { padding:12px 24px; font-size:14px; }
.btn-block { width:100%; }
.btn:disabled { opacity:0.45; cursor:not-allowed; transform:none; }

/* ===== FORMS ===== */
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:11px; font-weight:600; color:var(--text-dim); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.08em; }
.form-control {
  width:100%; padding:10px 14px; background:var(--bg-alt); border:1px solid var(--border); border-radius:6px;
  color:var(--text); font-size:14px; font-family:inherit; transition:all 0.15s;
}
.form-control:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(192,133,50,0.1); }
.form-control:disabled { opacity:0.5; cursor:not-allowed; }
.form-control::placeholder { color:var(--text-dim); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-hint { font-size:12px; color:var(--text-dim); margin-top:6px; }

/* ===== EMPTY STATE ===== */
.empty-state { text-align:center; padding:48px 24px; }
.empty-state .empty-icon { font-size:40px; margin-bottom:16px; opacity:0.35; }
.empty-state h3 { font-size:15px; font-weight:600; color:var(--text); margin-bottom:8px; }
.empty-state p { font-size:13px; color:var(--text-muted); line-height:1.6; max-width:400px; margin:0 auto; }

/* ===== ALERTS ===== */
.alert { padding:12px 16px; border-radius:8px; font-size:13px; margin-bottom:16px; display:flex; align-items:center; gap:8px; line-height:1.4; }
.alert.success { background:rgba(82,200,120,0.1); border:1px solid rgba(82,200,120,0.2); color:#52c878; }
.alert.error { background:rgba(224,80,80,0.1); border:1px solid rgba(224,80,80,0.2); color:#e05050; }
.alert.info { background:rgba(192,133,50,0.1); border:1px solid rgba(192,133,50,0.2); color:var(--accent); }

/* ===== UPLOAD ZONE ===== */
.upload-zone {
  border:2px dashed var(--border); border-radius:10px; padding:48px 32px; text-align:center;
  cursor:pointer; transition:all 0.15s;
}
.upload-zone:hover { border-color:var(--accent); background:rgba(192,133,50,0.03); }

/* ===== PRICING ===== */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.price-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:28px 24px;
  text-align:center; position:relative; display:flex; flex-direction:column; transition:all 0.15s;
}
.price-card:hover { border-color:rgba(255,255,255,0.12); }
.price-card-popular { border-color:var(--accent); }
.price-popular-badge {
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:var(--bg); padding:4px 14px; border-radius:9999px;
  font-size:11px; font-weight:600; letter-spacing:0.02em;
}
.price-tag { margin-bottom:12px; }
.price-amt { font-size:2rem; font-weight:700; letter-spacing:-0.04em; line-height:1; }
.price-per { font-size:13px; color:var(--text-dim); font-weight:400; }
.price-desc { font-size:13px; color:var(--text-muted); margin-bottom:16px; }
.price-features { list-style:none; text-align:left; margin-bottom:20px; flex:1; }
.price-features li { font-size:13px; color:var(--text-muted); padding:8px 0; border-bottom:1px solid var(--border); }
.price-features li:last-child { border-bottom:none; }

/* ===== TOAST ===== */
.toast-container { position:fixed; top:20px; right:20px; z-index:999; display:flex; flex-direction:column; gap:8px; }
.toast {
  padding:14px 20px; border-radius:8px; font-size:13px; font-weight:500;
  box-shadow:0 8px 32px rgba(0,0,0,0.3); animation:toastIn 0.3s ease;
  display:flex; align-items:center; gap:8px; min-width:280px;
}
.toast.success { background:#1a2a1a; border:1px solid rgba(82,200,120,0.3); color:#52c878; }
.toast.error { background:#2a1a1a; border:1px solid rgba(224,80,80,0.3); color:#e05050; }
.toast.info { background:#1a1a0a; border:1px solid rgba(192,133,50,0.3); color:var(--accent); }
@keyframes toastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }

/* ===== MOBILE ===== */
.sidebar-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); z-index:40; backdrop-filter:blur(2px); }
@media(max-width:768px) {
  .dash-sidebar { display:none; transform:translateX(-100%); transition:transform 0.25s ease; width:260px; }
  .dash-sidebar.open { display:flex; transform:translateX(0); }
  .sidebar-overlay.open { display:block; }
  .dash-main { margin-left:0; padding:20px 16px; width:100%; }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .grid-3 { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; max-width:400px; margin:0 auto; }
  table { display:block; overflow-x:auto; }
  .page-header { flex-direction:column; align-items:flex-start; gap:12px; }
  .page-header .badge { align-self:flex-start; }
}