/* Minimal, funktional, offline: kein Framework */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0e1222;
  --muted:#5b6275;
  --border:#e3e6ef;
  --shadow: 0 8px 22px rgba(14,18,34,.08);
  --primary:#2f6fed;
  --danger:#d43b3b;
  --ghost:#eef2ff;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --radius: 14px;
}
[data-theme="dark"]{
  --bg:#0f1220;
  --card:#171a2b;
  --text:#eef1ff;
  --muted:#a4abc4;
  --border:#2b2f48;
  --shadow: 0 10px 26px rgba(0,0,0,.35);
  --ghost:#23284a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a{color:inherit}
.link-plain{text-decoration:none}
.ds-link{text-decoration:none}
.ds-link-text{text-decoration:underline}
.ds-link-gap{text-decoration:none}
.container{max-width:1200px;margin:20px auto;padding:0 16px;display:flex;flex-direction:column;gap:14px}

.app-header{
  position:sticky; top:0;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  z-index: 5;
}
.header-left{display:flex;align-items:center;gap:12px}
.logo{font-size:26px}
.app-title{font-weight:750;letter-spacing:.2px}
.app-subtitle{font-size:12px;color:var(--muted)}
.header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* Make header buttons uniform size (match Export (JSON)) */
.header-actions .btn, .header-actions .file-btn, .header-actions .btn-strong {
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
}
.header-actions #btnAdd,
.header-actions #btnPrint,
.header-actions #btnLockNow,
.header-actions #btnSecurity,
.header-actions #btnBackup,
.header-actions label.file-btn{
  font-size: 14px;
}

/* Ensure file label looks like other buttons */
.header-actions .file-btn{ display:inline-flex; align-items:center; gap:6px; }

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}
.card-title{font-weight:700;margin-bottom:10px}
.card-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.field{display:flex;flex-direction:column;gap:6px}
.field-wide{grid-column: span 6;}
label{font-size:12px;color:var(--muted)}
.input, input, select, textarea{
  width:100%;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--card) 92%, var(--bg));
  color: var(--text);
  border-radius: 10px;
  padding: 10px 10px;
  outline:none;
}
input[type="time"], .input[type="time"]{
  -webkit-appearance: auto;
  appearance: auto;
}
input[type="time"]::-webkit-calendar-picker-indicator,
.input[type="time"]::-webkit-calendar-picker-indicator{
  opacity: 1;
  cursor: pointer;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232f6fed'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 1.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17Zm-.75 3a.75.75 0 0 0-1.5 0v5.25c0 .2.08.39.22.53l3.5 3.5a.75.75 0 1 0 1.06-1.06l-3.28-3.28Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  color: transparent;
  filter: none;
}
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .input[type="time"]::-webkit-calendar-picker-indicator{
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eef1ff'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 1.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17Zm-.75 3a.75.75 0 0 0-1.5 0v5.25c0 .2.08.39.22.53l3.5 3.5a.75.75 0 1 0 1.06-1.06l-3.28-3.28Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  filter: none;
}
/* Ensure status dropdown is wide enough to show labels like 'Termin vergeben' */
.input.statusSelect, select.statusSelect {
  min-width: 150px;
  max-width: 100%;
}
textarea{resize:vertical}
.small{font-size:12px}
.muted{color:var(--muted)}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gap{gap:8px}
.right{text-align:right}
.space-between{justify-content:space-between}
.spacer{flex:1}

.check{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--text)}
.check input{width:auto;margin:0}

.btn{
  border:1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 10px;
  cursor:pointer;
  font-weight:600;
  user-select:none;
}
.btn:hover{filter:brightness(.98)}
.btn-primary{
  background: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border));
  color: white;
}
.btn-danger{
  background: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 70%, var(--border));
  color:white;
}
#btnWipeAll{align-self:center}
.btn-ghost{
  background: var(--ghost);
}
.btn-white{
  background: #fff;
  color: #0e1222;
  border-color: #e3e6ef;
}
[data-theme="dark"] .btn-white{
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}
.file-btn input{display:none}

.hint{
  margin-top:10px;
  padding:10px;
  border-radius: 10px;
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: 13px;
}

.table-wrap{overflow:auto;border-radius: 12px;border:1px solid var(--border)}
.table{width:100%;border-collapse:collapse;min-width: 900px}
.table th,.table td{
  padding: 10px;
  border-bottom: 1px solid var(--border);
  text-align:left;
  vertical-align:top;
}
.table thead th{position:sticky;top:0;background: var(--card);z-index:1}  .table thead th.no-wrap{ white-space: nowrap; }.table tbody tr:hover{background: color-mix(in srgb, var(--ghost) 40%, transparent)}
.table td.right{text-align:right}  /* Keep action buttons inline and prevent wrapping (Details, Telefon, E‑Mail) */
  .table td.right{ white-space: nowrap; }
  .table td.no-wrap{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
  .table td.right .btn{ display: inline-flex; align-items:center; vertical-align:middle; }
  .table td.right .btn + .btn{ margin-left: 8px; }.pill{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--border);
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
}
.pill.ok{border-color: color-mix(in srgb, var(--primary) 40%, var(--border));}
.pill.warn{border-color: color-mix(in srgb, #d4a53b 45%, var(--border));}
.pill.bad{border-color: color-mix(in srgb, var(--danger) 40%, var(--border));}

.sep{border:0;border-top:1px solid var(--border);margin:14px 0}
.section-title{font-weight:700}
.section-title.compact + .hint{margin-top:4px}
.section-title.compact + .small{margin-top:-4px}

/* Drawer */
.drawer{
  position:fixed; top:0; right:-520px;
  width: 520px; max-width: 96vw;
  height: 100%;
  background: var(--card);
  border-left: 1px solid var(--border);
  box-shadow: -20px 0 60px rgba(0,0,0,.15);
  transition: right .22s ease;
  z-index: 20;
  display:flex;flex-direction:column;
}
.drawer.open{right:0}
.drawer-header{padding:14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.drawer-title{font-weight:800}
.drawer-sub{font-size:12px;color:var(--muted);margin-top:3px}
.drawer-body{padding:14px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.drawer-footer{padding:14px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.kv{display:grid;grid-template-columns: 140px 1fr;gap:8px 10px;align-items:start}
.kv div{font-size:13px}
.kv .k{color:var(--muted)}
.mono{font-family: var(--mono)}

.avail-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.avail-row{display:grid;grid-template-columns: 1fr 1fr 1fr auto;gap:8px;align-items:center}
.icon-btn{
  border:1px solid var(--border);
  background: transparent;
  border-radius: 10px;
  padding: 8px 10px;
  cursor:pointer;
}
.icon-btn:hover{background: color-mix(in srgb, var(--ghost) 60%, transparent)}
.contact-delete{
  min-width: 34px;
  font-weight: 700;
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
}
.contact-delete:hover{background: color-mix(in srgb, var(--danger) 12%, transparent)}
.form-actions{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.hidden{display:none !important}
.security-required{font-weight:700}

body.security-required .app-header,
body.security-required main{
  pointer-events:none;
  filter: blur(0.5px);
}

.security-setup-hint{display:none}
body.security-setup-only .security-setup-hint{display:block}
body.security-setup-only .security-advanced{display:none}
#securityModal .modal-body{gap:18px}
#securityModal .grid{gap:12px}
#securityModal .small{line-height:1.45}
.security-advanced-block{display:flex;flex-direction:column;gap:12px}

@media (max-width: 920px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .field-wide{grid-column: span 2}
  .drawer{width: 100%}
  .header-actions{justify-content:flex-start}
}


.backup-info{
  font-size: 12px;
  color: var(--muted);
  padding: 6px 8px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 92%, var(--bg));
}
.backup-info.warn{
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 60%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--card));
}
.header-actions #btnBackup.backup-due{
  background: var(--primary);
  color: #fff;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}
.btn-strong{ font-weight: 750; }


/* Header logo image (keep layout; make icon clearly visible) */
.logo img{height:36px;width:auto;display:block}

/* Drawer contact buttons: look like links, but no hover URL preview */
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--primary);cursor:pointer;text-align:left}
.linklike:hover{text-decoration:underline}

/* Move 'Personen finden' button slightly upwards (reduce placeholder label space) */
.btnmatch-field{gap:0}
.btnmatch-field label{height:0;margin:0;padding:0;line-height:0}

/* Confirm modal (custom) */
.confirm-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,0.45);
  display:flex; align-items:center; justify-content:center;
  z-index: 200;
}
.confirm-modal{
  background: var(--card);
  color: var(--text);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  padding:16px;
  width: min(420px, calc(100vw - 30px));
}
.confirm-modal h3{margin:0 0 10px;font-size:18px}
.confirm-msg{white-space:pre-wrap; margin-bottom:16px; line-height:1.5;}
.confirm-modal .actions{display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap;}

/* Prompt modal (password) */
.prompt-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,0.45);
  display:flex; align-items:center; justify-content:center;
  z-index: 210;
}
.prompt-modal{
  background: var(--card);
  color: var(--text);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  padding:16px;
  width: min(420px, calc(100vw - 30px));
  display:flex;
  flex-direction:column;
  gap:10px;
}
.prompt-modal h3{margin:0 0 6px;font-size:18px}
.prompt-modal .actions{display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap;}

/* Generic modal (Add/Edit + Sicherheit) */
.modal-backdrop{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.35);
  z-index: 180;
}
.modal{
  background: var(--card);
  color: var(--text);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: var(--shadow);
  padding:16px;
  width: min(760px, calc(100vw - 32px));
  max-height: 92vh;
  overflow:auto;
}
.modal-header{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;}
.modal-title{font-weight:800;}
.modal-body{display:flex; flex-direction:column; gap:14px;}
.modal-footer{display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin-top:6px;}
.danger{color: var(--danger);}

/* Lock screen */
body.locked{overflow:hidden;}
.lock-screen{
  position:fixed; inset:0;
  background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--bg) 90%, transparent), color-mix(in srgb, var(--card) 95%, transparent));
  display:flex; align-items:center; justify-content:center;
  z-index: 260;
  padding:16px;
}
.lock-card{
  background: var(--card);
  color: var(--text);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  padding:20px;
  min-width: min(420px, 96vw);
  display:flex; flex-direction:column; gap:10px;
}
.lock-title{font-size:22px; font-weight:800;}
.lock-card .row{justify-content:flex-start;}