/* kiosk.css — tema dashboard kiosk (dark modern, rapi & readable) */

/* ====== CSS Variables ====== */
:root{
  --bg0:#070b16;
  --bg1:#0b1224;
  --card:#0f172a;
  --card2:#0b1328;
  --border:rgba(148,163,184,.18);
  --border2:rgba(148,163,184,.26);

  --text:#e5e7eb;
  --muted:#9aa7bd;

  --primary:#3b82f6;
  --primary2:#2563eb;
  --info:#38bdf8;
  --success:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;

  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
}

/* ====== Base ====== */
html, body { height: 100%; }
body{
  background:
    radial-gradient(1000px 500px at 10% 10%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(900px 450px at 90% 15%, rgba(56,189,248,.12), transparent 55%),
    radial-gradient(800px 500px at 50% 110%, rgba(34,197,94,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{ color: var(--info); }
a:hover{ color: #7dd3fc; }

h3,h4,h5,h6{ letter-spacing:.2px; }
.muted, .text-muted{ color: var(--muted) !important; }

/* ====== Cards ====== */
.card{
  background: linear-gradient(180deg, rgba(15,23,42,.96), rgba(9,14,30,.92));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card hr{
  border-color: rgba(148,163,184,.18);
}

/* ====== Pills ====== */
.nav-pills .nav-link{
  border: 1px solid var(--border);
  color: #cbd5e1;
  background: rgba(2,6,23,.20);
  border-radius: 999px;
  padding: .55rem .9rem;
}
.nav-pills .nav-link:hover{
  border-color: rgba(56,189,248,.35);
  background: rgba(56,189,248,.06);
}
.nav-pills .nav-link.active{
  background: linear-gradient(180deg, rgba(59,130,246,.95), rgba(37,99,235,.95));
  border-color: rgba(59,130,246,.9);
  color:#fff;
}

/* ====== Form Controls ====== */
.form-control, .form-select, textarea{
  background: rgba(2,6,23,.72) !important;
  color: var(--text) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 12px;
}
.form-control::placeholder, textarea::placeholder{ color: rgba(154,167,189,.65); }
.form-control:focus, .form-select:focus, textarea:focus{
  border-color: rgba(56,189,248,.65) !important;
  box-shadow: 0 0 0 .22rem rgba(56,189,248,.12) !important;
}
label.form-label{
  color: #cbd5e1;
  font-weight: 600;
  font-size: .92rem;
}

/* ====== Buttons ====== */
.btn{
  border-radius: 12px;
  font-weight: 600;
}
.btn-primary{
  background: linear-gradient(180deg, rgba(59,130,246,.98), rgba(37,99,235,.98));
  border-color: rgba(59,130,246,.65);
}
.btn-primary:hover{
  filter: brightness(1.05);
}
.btn-outline-light{
  color: #dbeafe;
  border-color: rgba(148,163,184,.35);
}
.btn-outline-light:hover{
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.35);
  color: #fff;
}
.btn-outline-info{
  color: #7dd3fc;
  border-color: rgba(56,189,248,.35);
}
.btn-outline-info:hover{
  background: rgba(56,189,248,.10);
  border-color: rgba(56,189,248,.55);
  color: #fff;
}
.btn-outline-danger{
  color: #fecaca;
  border-color: rgba(239,68,68,.35);
}
.btn-outline-danger:hover{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.55);
  color:#fff;
}

/* ====== Alerts ====== */
.alert{
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.alert-success{
  background: rgba(34,197,94,.12);
  color: #bbf7d0;
}
.alert-danger{
  background: rgba(239,68,68,.12);
  color: #fecaca;
}
.alert-warning{
  background: rgba(245,158,11,.12);
  color: #fde68a;
}
.alert-info{
  background: rgba(56,189,248,.10);
  color: #bae6fd;
}

/* ====== Tables ====== */
.table{
  color: var(--text) !important;
}
.table thead th{
  color: #cbd5e1 !important;
  border-color: rgba(148,163,184,.18) !important;
  background: rgba(2,6,23,.45);
}
.table tbody td{
  border-color: rgba(148,163,184,.12) !important;
}
.table-striped>tbody>tr:nth-of-type(odd)>*{
  color: var(--text) !important;
  background-color: rgba(2,6,23,.28) !important;
}
.table-striped>tbody>tr:nth-of-type(even)>*{
  color: var(--text) !important;
  background-color: rgba(2,6,23,.18) !important;
}
.table-hover>tbody>tr:hover>*{
  background-color: rgba(56,189,248,.08) !important;
}

/* ====== Badges ====== */
.badge{ border-radius: 999px; font-weight: 700; letter-spacing:.2px; }
.badge-soft{
  background: rgba(56,189,248,.10);
  border: 1px solid rgba(56,189,248,.22);
  color: #7dd3fc;
}
.badge.text-bg-secondary{
  background: rgba(148,163,184,.16) !important;
  color: #d1d5db !important;
}
.badge.text-bg-info{
  background: rgba(56,189,248,.18) !important;
  color: #bae6fd !important;
}
.badge.text-bg-success{
  background: rgba(34,197,94,.18) !important;
  color: #bbf7d0 !important;
}

/* ====== Code / Preview ====== */
.codebox{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:.85rem;
}
.preview-box{
  max-height: 280px;
  overflow:auto;
  background: rgba(2,6,23,.55);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}

/* ====== Details summary ====== */
details summary{
  cursor: pointer;
  color: #cbd5e1;
}
details summary:hover{ color:#fff; }

/* ====== DataTables Dark Tuning ====== */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  background: rgba(2,6,23,.72) !important;
  color: var(--text) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 12px;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{
  color: var(--muted) !important;
}
.page-link{
  background: rgba(2,6,23,.55) !important;
  border: 1px solid var(--border) !important;
  color: #cbd5e1 !important;
  border-radius: 10px !important;
  margin: 0 .15rem;
}
.page-link:hover{
  background: rgba(59,130,246,.12) !important;
  border-color: rgba(59,130,246,.35) !important;
  color:#fff !important;
}
.page-item.active .page-link{
  background: rgba(59,130,246,.90) !important;
  border-color: rgba(59,130,246,.90) !important;
  color:#fff !important;
}

/* ====== Scrollbar (nice-to-have) ====== */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.25);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover{
  background: rgba(148,163,184,.38);
}
*::-webkit-scrollbar-track{
  background: rgba(2,6,23,.25);
}