/* ---------------------------------------------------------------------------
   Theme tokens — light (default), dark (explicit), and "system" (follows the
   OS via prefers-color-scheme, resolved live with no JS/reload needed once
   the page has `data-theme="system"` — see base.html and theme.py).
   --------------------------------------------------------------------------- */
:root {
  --bg-1: #eef2ff;
  --bg-2: #f8fafc;
  --card: #ffffff;
  --surface: #f8fafc;
  --surface-2: #f1f5f9;
  --input-bg: #ffffff;
  --text: #1e293b;
  --muted: #64748b;
  --border: #e2e8f0;

  --accent: #4f46e5;
  --accent-dark: #4338ca;
  --accent-soft: #eef2ff;
  --hero-grad-1: #4f46e5;
  --hero-grad-2: #7c6df2;
  --hero-shadow: rgba(79, 70, 229, 0.25);

  --danger: #dc2626;
  --danger-dark: #b91c1c;
  --danger-soft-bg: #fef2f2;
  --danger-soft-border: #fecaca;
  --danger-hover-bg: #fee2e2;

  --success: #16a34a;
  --success-soft-bg: #f0fdf4;
  --success-soft-border: #bbf7d0;

  --shadow-1: rgba(0, 0, 0, 0.06);
  --shadow-2: rgba(15, 23, 42, 0.06);

  color-scheme: light;
}

html[data-theme="dark"] {
  --bg-1: #0f172a;
  --bg-2: #0a0f1d;
  --card: #1e293b;
  --surface: #263449;
  --surface-2: #334155;
  --input-bg: #0f172a;
  --text: #e6ebf3;
  --muted: #94a3b8;
  --border: #334155;

  --accent: #6366f1;
  --accent-dark: #818cf8;
  --accent-soft: rgba(99, 102, 241, 0.16);
  --hero-grad-1: #4338ca;
  --hero-grad-2: #6d28d9;
  --hero-shadow: rgba(30, 27, 75, 0.5);

  --danger: #f87171;
  --danger-dark: #fca5a5;
  --danger-soft-bg: rgba(248, 113, 113, 0.12);
  --danger-soft-border: rgba(248, 113, 113, 0.35);
  --danger-hover-bg: rgba(248, 113, 113, 0.2);

  --success: #4ade80;
  --success-soft-bg: rgba(74, 222, 128, 0.12);
  --success-soft-border: rgba(74, 222, 128, 0.3);

  --shadow-1: rgba(0, 0, 0, 0.35);
  --shadow-2: rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg-1: #0f172a;
    --bg-2: #0a0f1d;
    --card: #1e293b;
    --surface: #263449;
    --surface-2: #334155;
    --input-bg: #0f172a;
    --text: #e6ebf3;
    --muted: #94a3b8;
    --border: #334155;

    --accent: #6366f1;
    --accent-dark: #818cf8;
    --accent-soft: rgba(99, 102, 241, 0.16);
    --hero-grad-1: #4338ca;
    --hero-grad-2: #6d28d9;
    --hero-shadow: rgba(30, 27, 75, 0.5);

    --danger: #f87171;
    --danger-dark: #fca5a5;
    --danger-soft-bg: rgba(248, 113, 113, 0.12);
    --danger-soft-border: rgba(248, 113, 113, 0.35);
    --danger-hover-bg: rgba(248, 113, 113, 0.2);

    --success: #4ade80;
    --success-soft-bg: rgba(74, 222, 128, 0.12);
    --success-soft-border: rgba(74, 222, 128, 0.3);

    --shadow-1: rgba(0, 0, 0, 0.35);
    --shadow-2: rgba(0, 0, 0, 0.45);

    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 260px);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 32px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.brand {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--accent);
  text-decoration: none;
}

.topbar nav {
  display: flex;
  align-items: center;
}

.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 16px;
  font-size: 0.9rem;
}

.topbar nav a:hover { color: var(--accent); }

.lang-switch, .theme-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 16px;
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 2px;
}
.lang-btn, .theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0 !important;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  line-height: 1.6;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.theme-btn { font-size: 0.85rem; padding: 4px 8px; }
.lang-btn:hover, .theme-btn:hover { color: var(--accent) !important; }
.lang-btn.active, .theme-btn.active { background: var(--accent); color: #fff !important; }

.container {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

.card {
  background: var(--card);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 1px 3px var(--shadow-1), 0 8px 24px var(--shadow-2);
  border: 1px solid var(--border);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.card + .card { margin-top: 24px; }

.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  background: linear-gradient(135deg, var(--hero-grad-1) 0%, var(--hero-grad-2) 100%);
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 24px;
  color: #fff;
  box-shadow: 0 8px 24px var(--hero-shadow);
}
.hero-title { margin: 0 0 6px; font-size: 1.4rem; color: #fff; }
.hero-subtitle { margin: 0; color: rgba(255,255,255,0.85); font-size: 0.9rem; }
.hero-plan { margin: 8px 0 0; color: rgba(255,255,255,0.7); font-size: 0.8rem; }
.hero-stats { display: flex; gap: 28px; }
.hero-stat { display: flex; flex-direction: column; align-items: flex-end; }
.hero-stat-number { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.hero-stat-label { font-size: 0.7rem; color: rgba(255,255,255,0.8); white-space: nowrap; }

h1 { font-size: 1.5rem; margin: 0 0 6px; }
h2 { font-size: 1.1rem; margin: 0 0 16px; }
p.subtitle { color: var(--muted); margin: 0 0 24px; }

label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}

input[type=text], input[type=password], input[type=url], input[type=number], select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  margin-bottom: 16px;
  background: var(--input-bg);
  color: var(--text);
  transition: background-color 0.2s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, select:focus { outline: 2px solid var(--accent); border-color: transparent; }

input[type=color] {
  width: 64px;
  height: 42px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 16px;
  cursor: pointer;
  background: none;
}

input[type=file] {
  display: block;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: var(--text);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 16px;
  cursor: pointer;
}
.checkbox-label input[type=checkbox] { width: auto; margin: 0; }

.row { display: flex; gap: 16px; }
.row > div { flex: 1; }

button, .btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

button:hover, .btn:hover { background: var(--accent-dark); }
button:active, .btn:active { transform: translateY(1px); }

.btn-danger { background: var(--danger); }
.btn-danger:hover { background: var(--danger-dark); }
.btn-small { padding: 6px 12px; font-size: 0.8rem; }
.btn-link { background: none; color: var(--accent); padding: 0; font-weight: 600; }

.error {
  background: var(--danger-soft-bg);
  color: var(--danger);
  border: 1px solid var(--danger-soft-border);
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.success {
  background: var(--success-soft-bg);
  color: var(--success);
  border: 1px solid var(--success-soft-border);
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.muted { color: var(--muted); font-size: 0.85rem; }
code { background: var(--surface-2); padding: 2px 6px; border-radius: 4px; font-size: 0.85em; color: var(--text); }

.table-wrap { overflow-x: visible; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; table-layout: fixed; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }

.col-actions { text-align: center; }

/* Dashboard link table — Short Link / URL Asli / Klik / Status / Aksi */
.link-table th:nth-child(1), .link-table td:nth-child(1) { width: 26%; }
.link-table th:nth-child(2), .link-table td:nth-child(2) { width: 20%; }
.link-table th:nth-child(3), .link-table td:nth-child(3) { width: 8%; }
.link-table th:nth-child(4), .link-table td:nth-child(4) { width: 12%; }
.link-table th:nth-child(5), .link-table td:nth-child(5) { width: 34%; }

/* Admin link moderation table — Short Link / Pemilik / URL Asli / Klik / Status / Aksi */
.admin-links-table th:nth-child(1), .admin-links-table td:nth-child(1) { width: 14%; }
.admin-links-table th:nth-child(2), .admin-links-table td:nth-child(2) { width: 20%; }
.admin-links-table th:nth-child(3), .admin-links-table td:nth-child(3) { width: 28%; }
.admin-links-table th:nth-child(4), .admin-links-table td:nth-child(4) { width: 8%; }
.admin-links-table th:nth-child(5), .admin-links-table td:nth-child(5) { width: 12%; }
.admin-links-table th:nth-child(6), .admin-links-table td:nth-child(6) { width: 18%; }

/* Admin user-plan table — Pemilik / Jumlah link / Paket / Aksi */
.admin-users-table th:nth-child(1), .admin-users-table td:nth-child(1) { width: 34%; }
.admin-users-table th:nth-child(2), .admin-users-table td:nth-child(2) { width: 14%; }
.admin-users-table th:nth-child(3), .admin-users-table td:nth-child(3) { width: 20%; }
.admin-users-table th:nth-child(4), .admin-users-table td:nth-child(4) { width: 32%; }

.admin-links-table td, .admin-users-table td { overflow-wrap: break-word; word-break: break-word; }

.plan-form { flex-wrap: nowrap; }
.plan-form select { width: auto; min-width: 100px; }

.link-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.short-url {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.short-url:hover { text-decoration: underline; }
.original-url { color: var(--muted); display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.input-with-btn { display: flex; gap: 8px; align-items: flex-start; }
.input-with-btn input { flex: 1; margin-bottom: 16px; }
.input-with-btn .btn-icon { white-space: nowrap; height: 42px; border-color: var(--border); background: var(--surface); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.badge-expired { background: var(--danger-soft-bg); color: var(--danger); }
.badge-active { background: var(--success-soft-bg); color: var(--success); }

.actions { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.actions form { display: inline-flex; margin: 0; }

.btn-icon,
.btn-icon:link,
.btn-icon:visited,
.btn-icon:hover,
.btn-icon:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  /* "Lihat" is an <a> the browser remembers as visited once you've clicked
     it — without pinning text-decoration on every link state, browsers
     bring back the default underline for :visited, which is what looked
     like a stray extra line under just that one button. */
  text-decoration: none;
  /* Transparent border (not "none") so the box size stays identical on
     hover — only the color changes, nothing shifts. No border at rest
     means there's no second faint line sitting next to the table's own
     row divider, which is what made the row border look crooked. */
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-icon:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-icon-danger, .btn-icon-danger:visited { background: transparent; border-color: transparent; color: var(--danger); }
.btn-icon-danger:hover { background: var(--danger-hover-bg); border-color: var(--danger); color: var(--danger); }

.empty { text-align: center; color: var(--muted); padding: 40px 0; }
.empty-icon {
  width: 56px;
  height: 56px;
  line-height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--accent-soft);
  font-size: 1.6rem;
}
.empty-title { margin: 0 0 4px; font-weight: 700; color: var(--text); font-size: 1rem; }
.empty-body { margin: 0; font-size: 0.85rem; }

.auth-card { max-width: 380px; margin: 80px auto; }

.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  /* Kept explicitly white/light regardless of theme — Google's own brand
     guidelines specify the multi-color "G" sign-in button on a light
     background so it stays recognizable. */
  background: #ffffff;
  color: #3c4043;
  border: 1px solid var(--border);
  text-decoration: none;
}
.google-btn:hover { background: #f8fafc; }

.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
}

.token-box {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.token-box input {
  margin-bottom: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
}

.view-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.view-header h1 { margin-bottom: 6px; word-break: break-all; }
.view-header .short-url { display: inline; font-size: 1.05rem; white-space: normal; }

.view-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 32px;
}
.view-meta p { margin: 4px 0 0; word-break: break-all; }
.view-meta a { color: var(--text); }
.view-meta a:hover { color: var(--accent); }

.qr-box { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.qr-box img {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  /* Always white, never themed — QR codes need a light quiet zone around
     the dark modules to scan reliably, regardless of site theme. */
  background: #fff;
}

.stat-row { display: flex; gap: 40px; }
.stat-box { display: flex; flex-direction: column; gap: 4px; }
.stat-number { font-size: 1.9rem; font-weight: 700; line-height: 1; }

.chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 120px;
  padding-top: 10px;
  border-bottom: 1px solid var(--border);
}
.chart-bar { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; }
.chart-labels { display: flex; gap: 4px; margin-top: 6px; }
.chart-labels span { flex: 1; text-align: center; font-size: 0.62rem; color: var(--muted); }

.breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 32px;
  margin-top: 28px;
}
.breakdown-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin: 0 0 10px;
}
.breakdown-list { display: flex; flex-direction: column; gap: 8px; }
.breakdown-row { display: flex; align-items: center; gap: 10px; }
.breakdown-label {
  flex: 0 0 110px;
  font-size: 0.82rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.breakdown-bar-track {
  flex: 1;
  height: 8px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.breakdown-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.breakdown-count { flex: 0 0 28px; text-align: right; font-size: 0.8rem; font-weight: 600; color: var(--muted); }

footer { text-align: center; color: var(--muted); font-size: 0.8rem; margin: 40px 0; }
footer .footer-links { display: block; margin-top: 6px; }
footer .footer-links a { color: var(--muted); }