/* assets/css/style.css — improved responsive (all-device) version */

/* Variables */
:root{
  --bg: #f6f7fb;
  --card: #ffffff;
  --muted: #6b7280;
  --accent: #ff6a2b;
  --accent-600: #e85a18;
  --border: #e6e7ee;
  --shadow: 0 8px 30px rgba(18,24,40,0.06);
  --radius: 12px;
  --max-w: 1200px;
  --gap: 14px;
  --container-pad: 16px;
  --text: #0f1724;
  --btn-min-h: 44px; /* touch target */
  font-size: 16px;
}

/* ---------- Dashboard UI: stats, panels, tables, sparklines ---------- */

.dashboard-row { display: grid; gap:18px; grid-template-columns: 1fr; margin-bottom:18px; }
@media(min-width:900px){ .dashboard-row { grid-template-columns: 1fr 360px; align-items:start; } }

/* Stats grid (top) */
.stats-top { display: grid; gap:14px; grid-template-columns: repeat(1,1fr); margin-bottom:16px; }
@media(min-width:700px){ .stats-top { grid-template-columns: repeat(3,1fr); } }
.stat-card {
  background:#fff;border-radius:12px;padding:16px;box-shadow:0 10px 30px rgba(6,18,40,0.06);border:1px solid #eef2f7;
  display:flex;flex-direction:column;gap:6px;min-height:92px;
}
.stat-card .label{font-size:13px;color:#6b7280;font-weight:700}
.stat-card .value{font-size:26px;font-weight:900;color:#0f1724}
.stat-card .meta{font-size:13px;color:#94a3b8}

/* small sparkline area inside stat */
.sparkline-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sparkline{width:110px;height:34px;flex:0 0 110px}

/* Quick panel (already provided earlier) */
.quick-panel{background:#fff;padding:18px;border-radius:12px;box-shadow:0 10px 30px rgba(6,18,40,0.04);border:1px solid #eef2f7}
.quick-panel h2{margin:0 0 12px;font-size:18px;font-weight:800}
.quick-panel ul{list-style:none;margin:0;padding:0}
.quick-panel ul li{margin-bottom:10px}
.quick-panel ul li a{display:block;padding:10px 12px;border-radius:10px;background:#fbfdff;border:1px solid #eef6ff;color:#0f1724;font-weight:700;text-decoration:none;transition:all .16s ease}
.quick-panel ul li a:hover{transform:translateX(6px);box-shadow:0 8px 22px rgba(8,18,40,0.06)}

/* Panel & table */
.panel { background:#fff;border-radius:12px;padding:16px;box-shadow:0 10px 30px rgba(6,18,40,0.05);border:1px solid #eef2f7 }
.panel h2{margin:0 0 12px;font-size:18px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #f1f5f9;text-align:left}
.table th{font-weight:700;color:#64748b;font-size:13px}

/* small helpers */
.small-muted{font-size:13px;color:#94a3b8}
.kv{display:flex;gap:8px;align-items:center;color:#64748b;font-size:13px}
.tag{padding:6px 8px;border-radius:999px;background:#fff;border:1px solid #eef2f7;font-weight:700;color:#0f1724}

/* responsive adjustments */
@media(max-width:420px){
  .sparkline{width:86px;height:28px}
  .stat-card .value{font-size:20px}
}

/* ===== Header / topbar styles (AllYonoStore look) ===== */
.topbar-hero { background: linear-gradient(180deg,#1f4b6a 0%, #2a6586 100%); padding-bottom:6px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; }
.brand-left .site-title { color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.15); }
.telegram-badge { font-size:13px; box-shadow:0 6px 20px rgba(0,0,0,0.18); }

.hamburger { background:#2f77b1; border:1px solid rgba(255,255,255,0.12); color:#fff; padding:8px 12px; border-radius:8px; font-weight:700; cursor:pointer; display:none; }
.top-links-desktop { display:flex; gap:8px; align-items:center; }
.top-links-desktop .nav-pill { background:rgba(255,255,255,0.95); padding:8px 12px; border-radius:6px; color:#0b2030; font-weight:700; box-shadow:0 4px 10px rgba(0,0,0,0.06); text-decoration:none; }
.top-links-desktop .nav-pill.active { background:#0f4d74; color:#fff; }

.nav-tabs { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; margin-top:8px; }
.tabs-left { display:flex; gap:12px; }
.tab { padding:12px 22px; border-radius:4px; background:#eee; font-weight:800; color:#0f1724; text-decoration:none; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.03); }
.tab.active { background:#2f77b1; color:#fff; box-shadow: none; }

/* banner wrapper */
.banner-wrap { margin-top:12px; margin-bottom:10px; }

/* mobile nav (hidden by default) */
.mobile-nav { position:fixed; top:0; left:-320px; width:320px; height:100%; background:#fff; box-shadow: 6px 0 30px rgba(0,0,0,0.2); z-index:120; transition:left .28s ease; }
.mobile-nav.open { left:0; }
.mobile-nav-inner { padding:20px; display:flex; flex-direction:column; gap:12px; }
.mobile-link { padding:12px 16px; border-radius:8px; background:#f5f6f8; color:#0f1724; text-decoration:none; font-weight:700; }
.tab { 
  padding:12px 22px; 
  border-radius:4px; 
  background:#eee; 
  font-weight:800; 
  color:#0f1724; 
  text-decoration:none; 
}
.tab.active { 
  background:#2f77b1; 
  color:#fff; 
}

/* small screens: adapt */
@media(max-width:900px){
  .top-links-desktop { display:none; }
  .hamburger { display:inline-block; }
  .nav-tabs { padding:8px 0; gap:8px; }
  .banner-wrap .site-banner { height:64px; object-fit:cover; }
  .tab { padding:10px 14px; font-size:15px; }
}

/* slightly larger screens where nav pills show */
@media(min-width:901px){
  .hamburger { display:none; }
  .top-links-desktop { display:flex; }
}

/* small visual helpers */
.site-header .wrap { padding-left:12px; padding-right:12px; }


/* Reset / Base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:var(--max-w);margin:0 auto;padding:var(--container-pad)}

/* Header */
.site-header{background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:60}
.site-header .wrap{display:flex;align-items:center;gap:12px;padding-top:10px;padding-bottom:10px}
.logo{font-weight:800;font-size:clamp(18px,2.2vw,22px);color:var(--accent-600);text-decoration:none}
.search-form{flex:1;display:flex;justify-content:center}
.search-form input[type="search"], .search-form input[type="text"]{width:100%;max-width:640px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#fff;outline:none;font-size:14px}
.top-links{display:flex;gap:12px;align-items:center;margin-left:8px}
.top-links a{font-weight:600;color:#334155;font-size:14px}

/* Accessibility: focus */
a:focus, button:focus, input:focus { outline:3px solid rgba(255,106,43,0.18); outline-offset:2px; }

/* Hero / Title area */
.page-title{padding:26px 0 8px}
.page-title h1{font-size:clamp(28px,5vw,46px);margin:0 0 6px;font-weight:800;line-height:1.05}
.page-title p.small{margin:0;color:var(--muted)}

/* Grid: mobile-first, fluid breakpoints */
.grid{display:grid;grid-template-columns:repeat(1,1fr);gap:var(--gap);margin-top:18px}
@media (min-width:520px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:820px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1160px){ .grid{grid-template-columns:repeat(4,1fr)} }

/* Card */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px;display:flex;gap:12px;align-items:center;border:1px solid rgba(14,18,26,0.03);transition:transform .18s ease, box-shadow .18s ease}
@media (prefers-reduced-motion: reduce){ .card{transition:none} }
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(11,20,40,0.08)}
.card .logo{flex:0 0 72px;width:72px;height:72px;border-radius:12px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;border:1px solid var(--border)}
@media(max-width:420px){ .card .logo{width:64px;height:64px} }
.card .logo img{width:100%;height:100%;object-fit:cover;display:block}
.card .meta{flex:1;min-width:0}
.card .meta h3{margin:0;font-size:16px;font-weight:700;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .meta p{margin:6px 0 0;color:var(--muted);font-size:13px}
.card .meta .badge{display:inline-block;padding:6px 8px;border-radius:10px;background:#f6f6fb;color:#111;font-weight:700;font-size:13px;margin-top:8px}

/* Actions - make buttons touch-friendly */
.card .actions{display:flex;flex-direction:column;gap:8px;margin-left:8px}
@media(min-width:600px){ .card .actions{flex-direction:row;align-items:center} }
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:10px;font-weight:700;border:0;cursor:pointer;text-decoration:none;font-size:14px;min-height:var(--btn-min-h)}
.btn-primary{background:linear-gradient(180deg,var(--accent),var(--accent-600));color:#fff;box-shadow:0 8px 24px rgba(255,106,43,0.18)}
.btn-outline{background:transparent;border:1px solid var(--border);color:#111}
.btn-full{width:100%}
@media(min-width:600px){ .btn-wide{min-width:120px} }

/* Tiny improvement: increase hit target on small screens */
@media(max-width:420px){
  .card{padding:10px;align-items:flex-start}
  .card .actions .btn{padding:12px 14px;font-size:15px}
  .page-title h1{font-size:clamp(22px,6.5vw,34px)}
}

/* Footer */
.site-footer{padding:28px 0;margin-top:36px;background:transparent;color:var(--muted);font-size:14px}
.site-footer .wrap{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
@media(min-width:700px){ .site-footer .wrap{flex-direction:row;justify-content:space-between;align-items:center} }

/* Empty / placeholder */
.empty-state{padding:60px 12px;text-align:center;color:var(--muted);background:transparent;border-radius:10px}

/* Small utilities */
.kv{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px;flex-wrap:wrap}
.tag{font-size:12px;padding:6px 8px;border-radius:999px;background:#fff;border:1px solid var(--border);font-weight:600}

/* Admin link (small) */
.admin-link{position:fixed;right:16px;bottom:16px;background:var(--card);border-radius:999px;padding:10px 12px;border:1px solid var(--border);box-shadow:var(--shadow);font-weight:700}

/* small print */
.small{font-size:13px;color:var(--muted)}

/* helper for img fallback */
img[alt="noimg"]{opacity:0.6;filter:grayscale(0.05)}

/* ensure forms and inputs scale */
input, textarea, select, button { font-family:inherit; font-size:14px }

/* utility for center */
.center{display:flex;align-items:center;justify-content:center}

/* make sure long titles wrap on very narrow screens (fallback to multi-line) */
.card .meta h3.break { white-space:normal; overflow:visible; }

/* quick debug helper (remove in production) */
/* .wrap{border:1px dashed rgba(0,0,0,0.02);} */