/* ---------- CSS CUSTOM PROPS FOR THEMES ---------- */
:root{
  --bg:#f4f5f7; --card:#ffffff; --text:#1e1e1e; --muted:#555;
  --accent:#0066cc; --accent-hover:#004a99;
  --input-bg:#ffffff; --border:#d0d0d0; --shadow:rgba(0,0,0,.08);
}
[data-theme="dark"]{
  --bg:#1a1b26; --card:#242635; --text:#eeeeee; --muted:#b5b5b5;
  --accent:#4ea8ff; --accent-hover:#2c7fe4;
  --input-bg:#2f3144; --border:#41435a; --shadow:rgba(0,0,0,.35);
}

/* ---------- BASIC RESET ---------- */
*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.45;
  background-image: url("misc/smurfvape.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
h1{margin:0;font-size:1.6rem;}

/* ---------- CARD LAYOUT ---------- */
.card{
  max-width:860px; margin:24px auto; padding:24px;
  background:var(--card); border-radius:12px;
  box-shadow:0 6px 24px var(--shadow);
  opacity: .95;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.smurf-logo {
  height: 60px;
  width: auto;
  object-fit: contain;
}

/* ---------- FORM GROUPS ---------- */
.group{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:24px;}
.field{flex:1 1 220px;display:flex;flex-direction:column;}
label{font-weight:600;margin-bottom:4px;color:var(--muted);}

input,select{
  padding:10px;border:1px solid var(--border);border-radius:6px;
  background:var(--input-bg);color:inherit;font-size:1rem;
}
input[type=range]{padding:0;height:2rem;}

.slider-wrap{gap:10px;align-items:center;}
.slider-wrap span{white-space:nowrap;font-size:0.9rem;}

/* ---------- BUTTONS ---------- */
button:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}
button{
  cursor:pointer;border:none;border-radius:6px;
  background:var(--accent);color:#fff;font-weight:600;
  padding:10px 18px;font-size:0.95rem;
  transition:background .15s;
}
button:hover{background:var(--accent-hover);}

/* ---------- TOGGLE SWITCH ---------- */
.switch{position:relative;width:46px;height:26px;margin-left:auto;}
.switch input{opacity:0;width:0;height:0;}
.slider{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:var(--border);border-radius:26px;transition:.3s;
}
.slider:before{
  content:\"\";position:absolute;height:20px;width:20px;left:3px;bottom:3px;
  background:#fff;border-radius:50%;transition:.3s;
}
input:checked+.slider{background:var(--accent);}
input:checked+.slider:before{transform:translateX(20px);}

/* ---------- TABLES ---------- */
table{width:100%;border-collapse:collapse;margin-top:16px;font-size:0.95rem;}
th,td{border:1px solid var(--border);padding:8px;text-align:left;}
th{background:var(--input-bg);font-weight:600;}

/* ---------- ACTION BAR ---------- */
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;}

/* ---------- MOBILE OPTIMISATIONS ---------- */
@media(max-width:600px){
  .group{flex-direction:column;}
  button{flex:1;}
}

/* ---------- PRINT ---------- */
@media print{
  body{background:#fff;color:#000;}
  .switch,.actions button:not(#printBtn),textarea{display:none!important;}
  .card{box-shadow:none;padding:0;margin:0;}
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  background: #fff;
  color: #333;
  padding: 1rem;
  text-align: center;
  border-radius: 12px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.modal-content .logo {
  max-width: 120px;
  margin-bottom: 1rem;
}

.modal-content h2 {
  margin-bottom: 0.5rem;
}

.modal-content p {
  margin-bottom: 1.5rem;
}

#confirmAgeBtn {
  padding: 0.75rem 2rem;
  background: #28a745;
  color: #fff;
  border: none;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
}

#confirmAgeBtn:hover {
  background: #218838;
}

#deconfirmAgeBtn {
  padding: 0.75rem 2rem;
  background: #a72828;
  color: #fff;
  border: none;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
}

#deconfirmAgeBtn:hover {
  background: #882121;
}