/* Components (025 Stijlboek, chapters 8 and 9). */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--accent); color: var(--accent-fg);
  border: 0; border-radius: var(--r-s); padding: 6px 14px; font-weight: 700;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: var(--surface); color: var(--fg); border: 1px solid var(--line); font-weight: 600; }
.btn.danger { background: var(--surface); color: var(--bad); border: 1px solid var(--bad); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.link { background: none; border: 0; color: var(--accent); padding: 0; }
.link:hover { text-decoration: underline; }

/* Cards */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); min-width: 0; overflow: hidden;
}
.card > header { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-bottom: 1px solid var(--line-2); }
.card > header h2 { font-size: 13px; font-weight: 700; margin-right: auto; }
.card .body { padding: 8px 12px; }

/* Form rows and fields */
.fr { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 8px; padding: 3px 0; }
.fr label { color: var(--fg-2); }
.in {
  width: 100%; min-width: 0; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-s); padding: 4px 8px;
}
.in:hover { border-color: var(--fg-3); }
.in:focus { outline: 0; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Status labels */
.pill { display: inline-block; border-radius: 10px; padding: 0 7px; font-size: 10.5px; line-height: 17px; font-weight: 600; white-space: nowrap; }
.p-ok { background: var(--ok-soft); color: var(--ok); }
.p-warn { background: var(--warn-soft); color: var(--warn); }
.p-bad { background: var(--bad-soft); color: var(--bad); }
.p-info { background: var(--accent-soft); color: var(--accent); }
.p-mute { background: var(--line-2); color: var(--fg-2); }

/* Property list (label and value) */
.kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.kv dt { color: var(--fg-2); }
.kv dd { margin: 0; }

/* Bar notice */
.notice {
  display: flex; gap: 8px; align-items: center;
  padding: 6px max(12px, env(safe-area-inset-right, 0px)) 6px max(12px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--line);
}
.notice.warn { background: var(--warn-soft); }
.notice.bad { background: var(--bad-soft); font-weight: 600; }

/* Dialog (025, 9.4) */
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(13, 20, 48, .45); backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: 16px;
}
.dialog > form { display: flex; flex-direction: column; min-height: 0; }
.dialog {
  width: 100%; max-width: 440px; max-height: 90vh; overflow: auto;
  background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-dialog);
}
.dialog > header, .dialog > form > header { padding: 14px 18px; border-bottom: 1px solid var(--line-2); font-size: 15px; font-weight: 700; }
.dialog > .content, .dialog > form > .content { padding: 16px 18px; }
.dialog > footer, .dialog > form > footer {
  display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px;
  border-top: 1px solid var(--line-2); background: var(--surface-2);
}
/* Dialog while a form is being processed (form[data-busy]) */
.dialog > .content.busy { display: flex; align-items: center; gap: 12px; padding: 20px 18px; font-weight: 600; }
.spinner {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid var(--accent-soft); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Form details (025, 8.2) */
.req::after { content: " *"; color: var(--bad); }
.fr .err-msg, .lcard .err-msg { grid-column: 2; color: var(--bad); font-size: 11px; margin-top: -2px; }
.in.err { border-color: var(--bad); }
.hint { font-size: 11px; color: var(--fg-3); }
.fr .hint { grid-column: 2; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.checks label { display: inline-flex; align-items: center; gap: 5px; color: var(--fg); }
.checks input, .fr input[type="checkbox"] { accent-color: var(--accent); }
.actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 0 4px; flex-wrap: wrap; }
.form-error { background: var(--bad-soft); color: var(--bad); border-radius: var(--r-s); padding: 6px 10px; margin: 6px 0; font-weight: 600; }
.form-info { background: var(--accent-soft); color: var(--fg); border-radius: var(--r-s); padding: 6px 10px; margin: 6px 0; }
.mono { font-family: var(--f-mono); }

/* Tables (025, 8.9) */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11px; font-weight: 600; color: var(--fg-2); padding: 5px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; background: var(--surface); }
.tbl td { padding: 5px 8px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl .num { text-align: right; }
.tbl .sub { display: block; font-size: 11px; color: var(--fg-2); }
.list-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.list-head h1 { font-size: 15px; font-weight: 700; margin: 0 auto 0 0; }
.list-head form { display: flex; gap: 6px; flex-wrap: wrap; }
.list-head .in { width: auto; }
.empty { color: var(--fg-2); padding: 12px 4px; }
.initials { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--grad-d); color: #fff; font-size: 10px; font-weight: 700; }

/* Toast (025, 9.3) */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 120; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100% - 32px)); }
.toast { display: flex; gap: 8px; align-items: center; background: var(--surface); color: var(--fg); border-radius: var(--r); box-shadow: var(--shadow-dialog); border-left: 3px solid var(--ok); padding: 10px 12px; }
.toast svg { color: var(--ok); }
.toast.bad { border-left-color: var(--bad); }
.toast.bad svg { color: var(--bad); }
@media (max-width: 720px) { .toasts { left: 12px; right: 12px; max-width: none; } }

/* Bar notices: close button and action (025, 9.1) */
.notice .grow { flex: 1; min-width: 0; }
.notice form { margin: 0; }
.notice .ico { background: none; border: 0; padding: 2px; border-radius: 4px; display: grid; place-items: center; color: var(--fg-2); }
.notice .ico:hover { background: var(--line-2); }
.notice .btn { padding: 3px 10px; }
.notice.bad .btn { background: var(--bad); color: #fff; }

/* Recovery codes */
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; font-family: var(--f-mono); font-size: 15px; margin: 12px 0; }
.qr { display: block; width: 180px; height: 180px; margin: 10px auto; background: #fff; padding: 8px; border-radius: 8px; }
.in-initials { max-width: 5em; text-transform: uppercase; }
.w100 { width: 100%; }
.actions.pad { padding: 8px 12px; }

/* Lines in a card (025, 8.8) */
.lines { list-style: none; margin: 0; padding: 0; }
.lines li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.lines li:last-child { border-bottom: 0; }
.lines .avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--grad-d); color: #fff; font-size: 12px; font-weight: 700; }
.lines .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lines small { font-size: 11px; color: var(--fg-2); }
.lines form { margin: 0; }
.btn.link { background: none; border: 0; color: var(--accent); padding: 0 2px; font-weight: 400; }
.btn.link:hover { text-decoration: underline; filter: none; }
.inline-form { display: flex; gap: 6px; margin-top: 8px; }
.inline-form .in { flex: 1; }
.i.lock { width: 12px; height: 12px; color: var(--fg-3); vertical-align: -1px; margin-left: 3px; }
.cmd form { margin: 0; }

/* List footer and column choice (025, 8.9) */
.list-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; color: var(--fg-2); border-top: 1px solid var(--line-2); }
.list-foot .btn { padding: 3px 10px; }
.cols-pick { position: relative; }
.cols-pick summary { list-style: none; cursor: pointer; }
.cols-pick summary::-webkit-details-marker { display: none; }
.cols-menu { position: absolute; z-index: 20; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-dialog); padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.cols-menu label { display: flex; gap: 6px; align-items: center; white-space: nowrap; }

/* Address fields */
.addr { border: 0; padding: 0; margin: 0 0 8px; }
.addr legend { font-weight: 700; font-size: 12px; padding: 4px 0; }
.addr-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 60px; gap: 6px; }

/* Rich text editor */
.rte { border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); margin: 4px 0 8px; }
.rte:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.rte-bar { display: flex; gap: 2px; padding: 3px 4px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.rte-bar button { background: none; border: 0; border-radius: 4px; min-width: 26px; height: 24px; color: var(--fg); }
.rte-bar button:hover { background: var(--line-2); }
.rte .rte-area { border: 0; background: transparent; box-shadow: none; min-height: 90px; padding: 8px 10px; overflow-wrap: anywhere; }
.rte .rte-area:focus { box-shadow: none; }
.rt p, .rte-area p { margin: 0 0 8px; }
.rt h3, .rte-area h3 { font-size: 14px; margin: 8px 0 4px; }
.rt ul, .rt ol, .rte-area ul, .rte-area ol { margin: 0 0 8px; padding-left: 22px; }
.rt a { color: var(--accent); }

/* Timeline (025, 8.10) */
.note-form { margin-bottom: 12px; }
.note-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.note-actions .btn { margin-left: auto; }
.note-actions .file { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); cursor: pointer; }
.note-actions .file input { max-width: 220px; font-size: 12px; }
.tl { list-style: none; margin: 0; padding: 0; }
.tl-item { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.tl-item .initials { flex: none; margin-top: 2px; }
.tl-body { flex: 1; min-width: 0; }
.tl-meta { font-size: 11px; color: var(--fg-2); margin-bottom: 4px; }
.tl-meta a { color: var(--fg-2); }
.tl-withdrawn .tl-meta a { text-decoration: line-through; }
.tl-email { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tl-email svg { color: var(--accent); }
.tl-files { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12px; }
.tl-files li { display: flex; align-items: center; gap: 4px; }
.card > header .ico-link { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--accent); text-decoration: none; padding: 2px 6px; border-radius: 4px; }
.card > header .ico-link:hover { background: var(--line-2); }
/* A link with an icon in front, vertically centred (for example the support address). */
.icon-link { display: inline-flex; align-items: center; gap: 6px; }
.diff { line-height: 1.7; white-space: pre-wrap; }
.diff ins { background: var(--ok-soft); color: var(--ok); text-decoration: none; }
.diff del { background: var(--bad-soft); color: var(--bad); }
.ph-list { display: flex; flex-wrap: wrap; gap: 4px; }
.ph-list code { font-family: var(--f-mono); font-size: 11px; background: var(--line-2); border-radius: 3px; padding: 1px 4px; }

/* Large dialog (025, 9.4: 880px) */
.dialog.lg { max-width: 880px; }
.dialog > header, .dialog > form > header { display: flex; align-items: center; gap: 8px; }
.dialog > header span, .dialog > form > header span { flex: 1; min-width: 0; }
.dialog > header .ico, .dialog > form > header .ico { background: none; border: 0; padding: 4px; border-radius: 4px; display: grid; place-items: center; color: var(--fg-2); }
.dialog > header .ico:hover, .dialog > form > header .ico:hover { background: var(--line-2); }
.mail-meta { padding-bottom: 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 12px; }
.mail-body { margin-bottom: 8px; }
@media (max-width: 720px) {
  .dialog-backdrop { place-items: end center; padding: 0; }
  .dialog, .dialog.lg { max-width: none; border-radius: 12px 12px 0 0; }
}
.pre { white-space: pre-wrap; margin: 0; }
.tbl .overdue { color: var(--bad); font-weight: 600; }

/* Timeline: the date opens the item, but looks like the rest of the meta line. */
.tl-meta a { color: inherit; }
.btn:hover, a.btn:hover, .cmd a:hover, .ag-item:hover { text-decoration: none; }

/* Placeholders look clearly empty (025 Stijlboek, 8.2): light and italic. */
.in::placeholder { color: var(--fg-3); opacity: .75; font-style: italic; }

/* A person in a table: date or text with the initials circle next to it. */
.who-cell { white-space: nowrap; }
.initials.sm { width: 20px; height: 20px; font-size: 9px; margin-left: 6px; vertical-align: middle; display: inline-grid; place-items: center; }

/* Usage meter (025 Stijlboek, 8.13): used part blue, free part white. */
.usage { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
dd .usage { margin: 0; }
.meter { display: block; width: 240px; max-width: 100%; height: 10px; border-radius: 5px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.meter-fill { display: block; height: 100%; background: var(--accent); }
.meter-fill.warn { background: var(--warn); }
.meter-fill.bad { background: var(--bad); }
.w-0{width:0%}
.w-1{width:1%}
.w-2{width:2%}
.w-3{width:3%}
.w-4{width:4%}
.w-5{width:5%}
.w-6{width:6%}
.w-7{width:7%}
.w-8{width:8%}
.w-9{width:9%}
.w-10{width:10%}
.w-11{width:11%}
.w-12{width:12%}
.w-13{width:13%}
.w-14{width:14%}
.w-15{width:15%}
.w-16{width:16%}
.w-17{width:17%}
.w-18{width:18%}
.w-19{width:19%}
.w-20{width:20%}
.w-21{width:21%}
.w-22{width:22%}
.w-23{width:23%}
.w-24{width:24%}
.w-25{width:25%}
.w-26{width:26%}
.w-27{width:27%}
.w-28{width:28%}
.w-29{width:29%}
.w-30{width:30%}
.w-31{width:31%}
.w-32{width:32%}
.w-33{width:33%}
.w-34{width:34%}
.w-35{width:35%}
.w-36{width:36%}
.w-37{width:37%}
.w-38{width:38%}
.w-39{width:39%}
.w-40{width:40%}
.w-41{width:41%}
.w-42{width:42%}
.w-43{width:43%}
.w-44{width:44%}
.w-45{width:45%}
.w-46{width:46%}
.w-47{width:47%}
.w-48{width:48%}
.w-49{width:49%}
.w-50{width:50%}
.w-51{width:51%}
.w-52{width:52%}
.w-53{width:53%}
.w-54{width:54%}
.w-55{width:55%}
.w-56{width:56%}
.w-57{width:57%}
.w-58{width:58%}
.w-59{width:59%}
.w-60{width:60%}
.w-61{width:61%}
.w-62{width:62%}
.w-63{width:63%}
.w-64{width:64%}
.w-65{width:65%}
.w-66{width:66%}
.w-67{width:67%}
.w-68{width:68%}
.w-69{width:69%}
.w-70{width:70%}
.w-71{width:71%}
.w-72{width:72%}
.w-73{width:73%}
.w-74{width:74%}
.w-75{width:75%}
.w-76{width:76%}
.w-77{width:77%}
.w-78{width:78%}
.w-79{width:79%}
.w-80{width:80%}
.w-81{width:81%}
.w-82{width:82%}
.w-83{width:83%}
.w-84{width:84%}
.w-85{width:85%}
.w-86{width:86%}
.w-87{width:87%}
.w-88{width:88%}
.w-89{width:89%}
.w-90{width:90%}
.w-91{width:91%}
.w-92{width:92%}
.w-93{width:93%}
.w-94{width:94%}
.w-95{width:95%}
.w-96{width:96%}
.w-97{width:97%}
.w-98{width:98%}
.w-99{width:99%}
.w-100{width:100%}

/* Date field in the date format of the tenant: text field + calendar button;
   the browser's date field is only used for its picker. */
.date-in { position: relative; display: flex; align-items: center; gap: 4px; min-width: 0; }
.date-in .in { flex: 1 1 auto; min-width: 0; max-width: 12em; }
.date-in .date-btn { background: none; border: 0; padding: 4px; border-radius: 4px; color: var(--fg-2); display: grid; place-items: center; cursor: pointer; }
.date-in .date-btn:hover { background: var(--line-2); }
.date-in .date-native { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }