/* ============================================
   TSmanhwa — Main Stylesheet
   ============================================ */

/* ── CSS Variables (Dark mode default) ─────── */
:root {
  --bg:        #0f0f17;
  --bg-nav:    #13131c;
  --bg-card:   #1c1c28;
  --bg-input:  #13131c;
  --text-1:    #e0e0ee;
  --text-2:    #7878a0;
  --text-3:    #4a4a6a;
  --border:    rgba(255,255,255,0.06);
  --border-2:  rgba(255,255,255,0.12);
  --border-3:  rgba(255,255,255,0.1);
  --hero-from: #1a0a2e;
  --hero-to:   #2d1657;
  --transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ── Light mode ─────────────────────────────── */
[data-theme="light"] {
  --bg:        #f6f8ff;
  --bg-nav:    rgba(255,255,255,0.92);
  --bg-card:   #ffffff;
  --bg-input:  #f8fbff;
  --text-1:    #122033;
  --text-2:    #4b607d;
  --text-3:    #7b8ba3;
  --border:    rgba(30,64,105,0.11);
  --border-2:  rgba(30,64,105,0.18);
  --border-3:  rgba(30,64,105,0.16);
  --hero-from: #e7f6ff;
  --hero-to:   #fff8e7;
  --surface-1: #ffffff;
  --surface-2: #f8fbff;
  --surface-3: #eef6ff;
  --shadow-soft: 0 18px 42px rgba(34, 72, 120, 0.12);
  color-scheme: light;
}

/* ── Base ───────────────────────────────────── */
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { font-family:'Sarabun',sans-serif; background:var(--bg); color:var(--text-1); transition:var(--transition); overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
img, video, canvas, svg { max-width:100%; }

/* ── Buttons ────────────────────────────────── */
.btn-primary { background:linear-gradient(135deg,#a855f7,#ec4899); color:#fff; padding:8px 20px; border-radius:999px; border:none; cursor:pointer; font-size:14px; }
.btn-primary:hover { opacity:0.9; }
.btn-outline { border:1px solid var(--border-2); color:var(--text-2); padding:8px 20px; border-radius:999px; background:none; cursor:pointer; font-size:14px; transition:var(--transition); }
.btn-outline:hover { background:var(--bg-card); }

/* ── Theme toggle ───────────────────────────── */
.theme-btn { background:none; border:1px solid var(--border-2); border-radius:999px; padding:5px 12px; cursor:pointer; font-size:14px; color:var(--text-2); transition:var(--transition); font-family:'Sarabun',sans-serif; }
.theme-btn:hover { background:var(--bg-card); }

/* ── Navbar ─────────────────────────────────── */
.navbar { background:var(--bg-nav); padding:0 24px; height:56px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); transition:var(--transition); }
.navbar-logo { font-size:18px; font-weight:700; color:var(--text-1); display:inline-flex; align-items:center; gap:8px; }
.navbar-logo-img { width:20px; height:20px; object-fit:contain; display:block; flex-shrink:0; }
.navbar-links { display:flex; gap:24px; }
.navbar-links a { font-size:14px; color:var(--text-2); transition:color 0.15s ease; }
.navbar-links a:hover, .navbar-links a.active { color:var(--text-1); }
.navbar-auth { display:flex; gap:8px; align-items:center; }

/* ── Hero ───────────────────────────────────── */
.hero { background:linear-gradient(135deg,var(--hero-from),var(--hero-to)); padding:40px 24px; transition:var(--transition); }
.hero h1 { font-size:28px; color:var(--text-1); margin-bottom:8px; }
[data-theme="light"] .hero h1 { color:#4a1d96; }
[data-theme="light"] #hero-subtitle { color:#7c3aed !important; }

/* ── Categories ─────────────────────────────── */
.categories { padding:16px 24px; display:flex; gap:8px; overflow-x:auto; }
.category-btn { padding:6px 16px; border-radius:999px; border:1px solid var(--border-2); background:none; color:var(--text-2); cursor:pointer; font-size:13px; transition:var(--transition); }
.category-btn.active { background:#a855f7; color:#fff; border-color:transparent; }

/* ── Series Grid ────────────────────────────── */
.series-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:16px; padding:16px 24px 40px; }
.series-card { background:var(--bg-card); border-radius:10px; overflow:hidden; cursor:pointer; border:1px solid var(--border); transition:transform 0.2s ease, box-shadow 0.2s ease; }
.series-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(168,85,247,0.12); }
.series-cover { height:180px; background:linear-gradient(160deg,#2d1657,#6d28d9); }
.series-info { padding:10px 12px; }
.series-title { font-size:13px; font-weight:500; color:var(--text-1); margin-bottom:4px; }
.series-meta  { font-size:11px; color:var(--text-3); }

/* ── Footer ─────────────────────────────────── */
.footer { background:var(--bg-nav); padding:20px 24px; text-align:center; font-size:13px; color:var(--text-3); border-top:1px solid var(--border); transition:var(--transition); }

/* ── Admin ──────────────────────────────────── */
.admin-layout { display:flex; min-height:calc(100vh - 56px); }
.admin-sidebar { width:200px; background:var(--bg-nav); border-right:1px solid var(--border); padding:12px 0; }
.sidebar-item { display:flex; align-items:center; gap:10px; padding:10px 20px; font-size:13px; color:var(--text-2); cursor:pointer; text-decoration:none; transition:var(--transition); }
.sidebar-item:hover, .sidebar-item.active { color:var(--text-1); background:rgba(168,85,247,0.1); border-right:2px solid #a855f7; }
.admin-main { flex:1; padding:24px; }

/* ── Inputs ─────────────────────────────────── */
input, select, textarea { background:var(--bg-input) !important; color:var(--text-1) !important; border-color:var(--border-3) !important; transition:var(--transition); }

/* Light mode should feel like a real light interface, not a dark UI with a pale page. */
[data-theme="light"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(34,211,238,0.16), transparent 34%),
    radial-gradient(circle at 90% 8%, rgba(245,158,11,0.14), transparent 32%),
    var(--bg);
  color:#122033;
}
[data-theme="light"] .navbar,
[data-theme="light"] .admin-sidebar,
[data-theme="light"] .footer {
  background:rgba(255,255,255,0.9);
  border-color:rgba(30,64,105,0.12);
  box-shadow:0 10px 30px rgba(34,72,120,0.08);
  backdrop-filter:blur(12px);
}
[data-theme="light"] .navbar-logo,
[data-theme="light"] .navbar-links a:hover,
[data-theme="light"] .navbar-links a.active,
[data-theme="light"] .sidebar-item:hover,
[data-theme="light"] .sidebar-item.active {
  color:#0f2745;
}
[data-theme="light"] .navbar-links a,
[data-theme="light"] .sidebar-item,
[data-theme="light"] .footer {
  color:#58708f;
}
[data-theme="light"] .btn-outline,
[data-theme="light"] .theme-btn,
[data-theme="light"] .category-btn {
  background:#ffffff;
  border-color:rgba(30,64,105,0.18);
  color:#38526f;
  box-shadow:0 8px 18px rgba(34,72,120,0.08);
}
[data-theme="light"] .btn-outline:hover,
[data-theme="light"] .theme-btn:hover,
[data-theme="light"] .category-btn:hover {
  background:#eef7ff;
  border-color:rgba(34,211,238,0.42);
}
[data-theme="light"] .hero,
[data-theme="light"] .series-card,
[data-theme="light"] .section-box,
[data-theme="light"] .panel,
[data-theme="light"] .card,
[data-theme="light"] .stat-card {
  background:#ffffff;
  border-color:rgba(30,64,105,0.13);
  box-shadow:var(--shadow-soft);
}
[data-theme="light"] .series-cover {
  background:linear-gradient(160deg,#dff4ff,#fff3cf);
}
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background:#ffffff !important;
  color:#122033 !important;
  border-color:rgba(30,64,105,0.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.8);
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color:#8a9ab0;
}

/* ── Responsive ─────────────────────────────── */
@media (max-width:768px) {
  .navbar { position:sticky; top:0; z-index:100; padding:10px 12px; height:auto; flex-wrap:wrap; gap:8px; backdrop-filter:blur(10px); }
  .navbar-logo { font-size:16px; min-height:36px; }
  .navbar-links { display:flex; order:3; width:100%; gap:8px; overflow-x:auto; padding:4px 0 2px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .navbar-links::-webkit-scrollbar { display:none; }
  .navbar-links a { flex:0 0 auto; padding:8px 10px; border-radius:999px; background:rgba(255,255,255,0.04); font-size:12px; white-space:nowrap; }
  .navbar-auth { margin-left:auto; max-width:100%; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .navbar-auth::-webkit-scrollbar { display:none; }
  .navbar-auth a, .navbar-auth button, .navbar-auth span { font-size:12px !important; padding:7px 11px !important; min-height:34px; }
  .hero { padding:24px 16px; }
  .hero h1 { font-size:22px; }
  .categories { padding:12px 16px; gap:6px; }
  .category-btn { font-size:12px; padding:5px 12px; }
  .series-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; padding:12px 16px 32px; }
  .series-cover { height:150px; }
  .admin-layout { flex-direction:column; }
  .admin-sidebar { position:sticky; top:57px; z-index:90; width:100%; display:flex; flex-direction:row; overflow-x:auto; padding:7px 8px; border-right:none; border-bottom:1px solid var(--border); gap:6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .admin-sidebar::-webkit-scrollbar { display:none; }
  .sidebar-item { flex:0 0 auto; padding:9px 12px; white-space:nowrap; font-size:12px; border-radius:999px; border-right:none !important; border-bottom:2px solid transparent; background:rgba(255,255,255,0.035); }
  .sidebar-item.active { border-bottom:2px solid #a855f7; border-right:none; }
  .admin-main { padding:16px; }
  #stat-series, #stat-chapters, #stat-premium, #stat-members { font-size:20px !important; }
  #series-hero > div { flex-direction:column !important; align-items:center !important; text-align:center; }
  #series-hero > div > div:first-child { width:140px !important; height:190px !important; }
  .chat-layout { flex-direction:column; }
  input, select, textarea { font-size:16px !important; }
  .btn-primary, .btn-outline, button, a { -webkit-tap-highlight-color:transparent; }
  table { font-size:12px; }
}

@media (max-width:480px) {
  .navbar { padding:8px 10px; }
  .navbar-auth { width:100%; justify-content:flex-start; }
  .series-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:10px 12px 24px; }
  .series-cover { height:auto; aspect-ratio:3/4; }
  .series-title { font-size:11px; }
  .series-meta  { font-size:10px; }
  .hero h1 { font-size:18px; }
  .btn-primary, .btn-outline { width:auto; min-height:38px; display:inline-flex; align-items:center; justify-content:center; }
}