static/admin.css

/* =========
   Admin UI — RAG App
   File: static/admin.css
   ========= */

/* --- Design tokens --- */
:root{
  --admin-bg: #f7f8fa;
  --admin-card: #ffffff;
  --admin-text: #1d2433;
  --admin-muted: #6b7280;
  --admin-border: #e5e7eb;
  --admin-primary: #3b82f6;   /* biru */
  --admin-accent: #22c55e;    /* hijau */
  --admin-danger: #ef4444;    /* merah */
  --admin-warning: #f59e0b;   /* oranye */
  --radius: 16px;
  --shadow-100: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-200: 0 4px 10px rgba(0,0,0,.08);
  --shadow-300: 0 12px 24px rgba(0,0,0,.12);
}

/* Dark mode otomatis */
@media (prefers-color-scheme: dark){
  :root{
    --admin-bg: #0b1220;
    --admin-card: #0f172a;
    --admin-text: #e5e7eb;
    --admin-muted: #9ca3af;
    --admin-border: #1f2937;
    --admin-primary: #60a5fa;
    --admin-accent: #34d399;
    --admin-danger: #f87171;
    --admin-warning: #fbbf24;
  }
}

/* --- Global --- */
body{
  background: var(--admin-bg);
  color: var(--admin-text);
}

/* Navbar */
.navbar{
  box-shadow: var(--shadow-100);
  border-bottom: 1px solid var(--admin-border);
  background: var(--admin-card) !important;
}
.navbar .navbar-brand{
  font-weight: 700;
  letter-spacing: .2px;
}
.navbar .nav-link{
  color: var(--admin-text);
  opacity: .85;
}
.navbar .nav-link:hover{
  opacity: 1;
}
.navbar-text{
  color: var(--admin-muted);
}

/* Container spacing */
.container{
  padding-bottom: 48px;
}

/* Alerts */
.alert{
  border-radius: 12px;
  border: 1px solid var(--admin-border);
  box-shadow: var(--shadow-100);
}

/* Headings */
h4, .h4{
  font-weight: 700;
  letter-spacing: .2px;
}

/* --- Cards / dashboard --- */
.card{
  border: 1px solid var(--admin-border);
  background: var(--admin-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-100);
  transition: transform .08s ease, box-shadow .2s ease;
}
.card:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-200);
}
.card .fs-1{
  font-weight: 800;
  line-height: 1;
}

/* --- Forms / filters --- */
form .form-control, form .form-select{
  border-radius: 12px;
  border-color: var(--admin-border);
  background: var(--admin-card);
  color: var(--admin-text);
}
form .form-control::placeholder{
  color: var(--admin-muted);
}
.btn{
  border-radius: 12px;
  box-shadow: var(--shadow-100);
}
.btn-primary{
  background: var(--admin-primary);
  border-color: var(--admin-primary);
}
.btn-outline-dark{
  color: var(--admin-text);
  border-color: var(--admin-border);
}
.btn-outline-dark:hover{
  background: var(--admin-border);
}

/* --- Tables --- */
.table{
  margin-bottom: 12px;
  color: var(--admin-text);
}
.table thead th{
  font-size: .84rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--admin-muted);
  border-bottom: 1px solid var(--admin-border) !important;
  background: var(--admin-bg);
  position: sticky;
  top: 0;           /* sticky header saat scroll */
  z-index: 1;
}
.table td, .table th{
  border-color: var(--admin-border);
  vertical-align: middle;
}
.table-hover tbody tr:hover{
  background: color-mix(in oklab, var(--admin-primary) 8%, transparent);
}
.table .text-truncate{
  max-width: 600px;
}

/* Truncate multi-baris */
.truncate-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.truncate-3{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Badges */
.badge{
  border-radius: 999px;
  padding: .4em .7em;
  font-weight: 600;
}
.text-bg-dark{
  background: #111827 !important;
  color: #f9fafb !important;
}
.text-bg-info{
  background: #0ea5e9 !important;
}
.text-bg-secondary{
  background: #64748b !important;
}

/* Status pills khusus */
.badge-yes{
  background: var(--admin-accent);
}
.badge-no{
  background: var(--admin-muted);
}

/* Pagination */
.pagination .page-link{
  border-radius: 10px !important;
  margin: 0 4px;
  border-color: var(--admin-border);
  color: var(--admin-text);
  background: var(--admin-card);
}
.pagination .page-item.disabled .page-link{
  opacity: .6;
}
.pagination .page-link:hover{
  border-color: var(--admin-primary);
}

/* Table responsive wrapper */
.table-responsive{
  border: 1px solid var(--admin-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-100);
  background: var(--admin-card);
  padding: 6px;
}

/* Small helper for “chip” subjects */
.subject-chip{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--admin-border);
  background: var(--admin-bg);
  font-size: .8rem;
  color: var(--admin-text);
}

/* Links */
a{
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}

/* Footer (kalau dibutuhkan) */
.admin-footer{
  margin-top: 24px;
  color: var(--admin-muted);
  font-size: .9rem;
}

/* --- Utilities --- */
.shadow-100{ box-shadow: var(--shadow-100); }
.shadow-200{ box-shadow: var(--shadow-200); }
.shadow-300{ box-shadow: var(--shadow-300); }
.rounded-xl{ border-radius: var(--radius); }
.muted{ color: var(--admin-muted); }

/* --- Mobile tweaks --- */
@media (max-width: 768px){
  .table .text-truncate{ max-width: 260px; }
  .navbar .navbar-text{ display: none; }
  .card .fs-1{ font-size: 2rem; }
}