/* ==========================================================================
   PowerDNS Backup Manager — classic admin UI
   Plain, stable, familiar. Light theme only.
   ========================================================================== */

:root{
  --bg:#f0f2f5;
  --panel:#ffffff;
  --head:#f6f7f9;
  --line:#d2d6de;
  --line-2:#e4e7ec;
  --txt:#333333;
  --muted:#767c85;
  --muted-2:#98a0ab;
  --acc:#337ab7;
  --acc-dark:#286090;
  --acc-soft:#eaf2fa;
  --ok:#3c8b3c;
  --ok-soft:#e9f6e9;
  --warn:#b5761a;
  --warn-soft:#fdf3e3;
  --bad:#c9302c;
  --bad-soft:#fbeceb;
  --info:#31708f;
  --info-soft:#e8f3f8;
  --add-bg:#e6ffed;
  --add-marker:#22863a;
  --del-bg:#ffeef0;
  --del-marker:#cb2431;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --radius:3px;
  --sidebar:#f6f7f9;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--txt);
  font:14px/1.5 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline;color:var(--acc-dark)}
small,.small{font-size:12px}
.muted{color:var(--muted)}
.center{text-align:center}
.mono,.recordlist{font-family:var(--mono);font-size:12.5px}
.nowrap{white-space:nowrap}
hr{border:0;border-top:1px solid var(--line-2);margin:14px 0}

/* ------------------------------------------------------------------ layout */
.sidebar{
  position:fixed;inset:0 auto 0 0;width:232px;z-index:40;overflow-y:auto;
  background:var(--sidebar);border-right:1px solid var(--line);
}
.sidebar .brand{
  display:flex;align-items:center;gap:9px;padding:12px 14px;
  border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:2;
}
.brand .mark{
  width:30px;height:30px;flex:0 0 30px;border-radius:3px;display:grid;place-items:center;
  background:var(--acc);color:#fff;font-weight:700;font-size:15px;
}
.brand .txt{line-height:1.25;min-width:0}
.brand .txt b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .txt span{color:var(--muted);font-size:11px}

.nav{padding:6px 0 24px}
.nav .sec{
  padding:12px 14px 4px;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-2);
}
.nav a{
  display:flex;align-items:center;gap:9px;padding:8px 14px 8px 14px;
  color:#3c4450;font-size:13.5px;border-left:3px solid transparent;
}
.nav a:hover{background:#eceef1;text-decoration:none;color:#222}
.nav a.on{background:#fff;border-left-color:var(--acc);color:var(--acc);font-weight:600;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.nav a .ic{width:16px;height:16px;flex:0 0 16px;opacity:.7}
.nav a.on .ic{opacity:1}
.nav a .count{margin-left:auto;background:#dfe3e8;color:#555;border-radius:9px;padding:0 7px;font-size:11px;font-weight:700}
.nav a.on .count{background:var(--acc-soft);color:var(--acc)}

.main{margin-left:232px;display:flex;flex-direction:column;min-height:100vh}
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  padding:8px 16px;background:#fff;border-bottom:1px solid var(--line);min-height:50px;
}
.topbar .crumb{font-size:12px;color:var(--muted)}
.topbar .crumb b{color:var(--txt)}
.topbar .spacer{flex:1}
.gsearch{display:flex;max-width:340px;flex:1}
.gsearch input{
  border:1px solid var(--line);border-right:0;border-radius:var(--radius) 0 0 var(--radius);
  padding:6px 10px;font-size:13px;width:100%;
}
.gsearch input:focus{outline:none;border-color:var(--acc)}
.gsearch button{
  border:1px solid var(--line);background:#f5f5f5;border-radius:0 var(--radius) var(--radius) 0;
  padding:0 12px;cursor:pointer;color:#555;display:grid;place-items:center;
}
.gsearch button:hover{background:#e9e9e9}
.gsearch button svg{width:15px;height:15px}

.iconbtn{
  border:1px solid var(--line);background:#fff;color:#555;width:32px;height:32px;
  border-radius:var(--radius);display:grid;place-items:center;cursor:pointer;
}
.iconbtn:hover{background:#f5f5f5;color:#222}
.iconbtn svg{width:16px;height:16px}
.hamburger{display:none}

.userbox{display:flex;align-items:center;gap:9px}
.userbox .who{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.userbox .who b{font-size:13px}
.userbox .who span{font-size:11px;color:var(--muted)}
.avatar{width:32px;height:32px;border-radius:3px;display:grid;place-items:center;font-weight:700;
  background:var(--acc-soft);color:var(--acc);border:1px solid var(--line)}

.undo-chip{
  display:inline-flex;align-items:center;gap:7px;background:var(--warn-soft);
  border:1px solid #e6cfa6;color:var(--warn);border-radius:var(--radius);
  padding:5px 9px;font-size:12.5px;font-weight:600;
}
.undo-chip a{color:var(--warn);text-decoration:underline}

.content{flex:1;padding:16px;max-width:1400px;width:100%;margin:0 auto}
.foot{padding:14px 16px;color:var(--muted);font-size:12px;border-top:1px solid var(--line);
  background:#fff;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:39}

/* -------------------------------------------------------------- typography */
h1{font-size:20px;margin:0 0 3px;font-weight:600}
h2{font-size:17px;margin:20px 0 10px}
h3{font-size:14px;margin:0 0 10px;font-weight:600}
.pagehead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.pagehead .sub{color:var(--muted);font-size:12.5px;margin:2px 0 0}

/* ------------------------------------------------------------ panels/cards */
.panel,.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:16px;padding:14px;
}
.panel>h3:first-child,.card>h3:first-child{
  margin:-14px -14px 12px;padding:9px 14px;background:var(--head);
  border-bottom:1px solid var(--line);font-size:14px;font-weight:600;
  border-radius:2px 2px 0 0;
}
.panel-head{
  margin:-14px -14px 12px;padding:9px 14px;background:var(--head);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;
  font-size:14px;font-weight:600;border-radius:2px 2px 0 0;
}
.panel-head .spacer{flex:1}
.panel-body{padding:0}
.panel.flush{padding:0}
.panel.flush>.panel-head{margin:0;border-radius:2px 2px 0 0}
.panel.flush>.panel-body{padding:0}
.panel.flush table{font-size:13px}

.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(175px,1fr))}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.row.tight{gap:9px}
.row.mid{align-items:center}
.col{flex:1;min-width:170px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;border-left:3px solid var(--acc)}
.stat .n{font-size:24px;font-weight:700;line-height:1.2}
.stat .l{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}

/* -------------------------------------------------------------------- forms */
label{display:block;margin:10px 0 4px;color:#555;font-size:12.5px;font-weight:600}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=search],
input[type=email],select,textarea{
  width:100%;background:#fff;border:1px solid #c9ced6;color:var(--txt);
  border-radius:var(--radius);padding:7px 9px;font-size:13.5px;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 2px rgba(51,122,183,.18)}
textarea{min-height:72px;font-family:var(--mono);font-size:12.5px}
.checkline{display:flex;gap:7px;align-items:center;margin:8px 0}
.checkline input{width:auto}
.checkline label{margin:0;font-weight:500;color:var(--txt)}
.form-hint{color:var(--muted);font-size:12px;margin-top:3px}
.muted.small{font-size:11px;font-weight:500}
.off{display:none !important}

/* --------------------------------------------------- record editor grid */
/* Fixed, tidy column widths so the editor never wraps into a mess.        */
.recgrid{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.recgrid .fld{display:flex;flex-direction:column;min-width:0}
.recgrid .fld>label{margin-top:0}
.recgrid .fld.grow{flex:1 1 220px}
.recgrid .fld.grow2{flex:1 1 300px}
.recgrid .fld.type{flex:0 0 118px}
.recgrid .fld.ttl{flex:0 0 108px}
.recgrid .fld.prio{flex:0 0 96px}
.recgrid .fld.off-fld{flex:0 0 104px}
.recgrid .fld.act{flex:0 0 auto}
.recgrid .fld.act .btn{margin-bottom:1px}
@media (max-width:760px){
  .recgrid .fld.grow,.recgrid .fld.grow2{flex:1 1 100%}
  .recgrid .fld.type,.recgrid .fld.ttl,.recgrid .fld.prio,.recgrid .fld.off-fld{flex:1 1 30%}
}

.btn{
  display:inline-flex;align-items:center;gap:6px;background:#fff;color:#444;
  border:1px solid #c9ced6;border-radius:var(--radius);padding:6px 12px;cursor:pointer;
  font-size:13px;font-weight:600;line-height:1.35;white-space:nowrap;
}
.btn:hover{background:#f5f5f5;text-decoration:none;color:#222}
.btn .ic{width:14px;height:14px}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.primary:hover{background:var(--acc-dark);border-color:var(--acc-dark);color:#fff}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.danger:hover{background:#ac2925;border-color:#ac2925;color:#fff}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.ok:hover{background:#2f7a2f;color:#fff}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:#eceef1;color:#222}
.btn.sm{padding:3px 9px;font-size:12px}
.btn.full{width:100%;justify-content:center;margin-top:14px;padding:9px}
form.inline{display:inline}

/* ------------------------------------------------------------------- tables */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-2);vertical-align:top}
thead th{background:var(--head);color:#4a5058;font-weight:600;font-size:12px;text-transform:none;
  border-bottom:1px solid var(--line);white-space:nowrap}
tbody tr:nth-child(even){background:#fafbfc}
tbody tr:hover{background:var(--acc-soft)}
td .btn.sm{margin-right:3px}

/* ------------------------------------------------------------------- badges */
.badge{display:inline-block;border-radius:2px;padding:1px 7px;font-size:11.5px;font-weight:600;
  line-height:1.6;white-space:nowrap;border:1px solid transparent}
.badge.ok{background:var(--ok-soft);color:var(--ok);border-color:#cbe6cb}
.badge.bad{background:var(--bad-soft);color:var(--bad);border-color:#f0c8c6}
.badge.warn{background:var(--warn-soft);color:var(--warn);border-color:#e8d4ac}
.badge.info{background:var(--info-soft);color:var(--info);border-color:#c5dced}
.badge.mut{background:#eef0f2;color:#5f6771;border-color:#dde1e5}
.op-add{color:var(--add-marker);font-weight:600}
.op-remove{color:var(--del-marker);font-weight:600}
.op-update{color:var(--warn);font-weight:600}
.op-zone_add{color:var(--info);font-weight:600}
.op-zone_remove{color:#8e44ad;font-weight:600}

/* ------------------------------------------------------------------- alerts */
.alert{border-radius:var(--radius);padding:10px 13px;margin-bottom:14px;border:1px solid;font-size:13.5px}
.alert.success{background:var(--ok-soft);border-color:#c3e2c3;color:#2d6a2d}
.alert.danger{background:var(--bad-soft);border-color:#eec1bf;color:#a12622}
.alert.warning{background:var(--warn-soft);border-color:#e8d4ac;color:#8a5a13}
.alert.info{background:var(--info-soft);border-color:#c5dced;color:#24596f}
.alert .undo-btn{margin-left:8px}

/* -------------------------------------------------------------------- pager */
.pager{display:flex;gap:3px;margin-top:14px;flex-wrap:wrap;align-items:center}
.pager a,.pager span{padding:4px 10px;border:1px solid var(--line);border-radius:var(--radius);
  color:var(--acc);background:#fff;font-size:13px}
.pager a:hover{background:#f5f5f5;text-decoration:none}
.pager .cur{background:var(--acc);color:#fff;border-color:var(--acc);font-weight:600}

/* -------------------------------------------------------------- smart search */
.smartbar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:16px}
.smartbar .smart-input{display:flex;gap:0;max-width:560px}
.smartbar .smart-input input{border-right:0;border-radius:var(--radius) 0 0 var(--radius);font-size:14px}
.smartbar .smart-input button{border-radius:0 var(--radius) var(--radius) 0;padding:0 16px}
.chiprow{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.chip{border:1px solid var(--line);background:#fafbfc;border-radius:12px;padding:2px 10px;font-size:12px;color:#4a5058}
.chip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.chip:hover{text-decoration:none;background:#eef0f2}
.chip.on:hover{background:var(--acc-dark);color:#fff}

/* --------------------------------------------------------------- commit log */
.commit-list{border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.commit{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line-2)}
.commit:last-child{border-bottom:0}
.commit:hover{background:#fafbfc}
.commit .node{width:9px;height:9px;border-radius:50%;background:var(--acc);flex:0 0 9px}
.commit .body{flex:1;min-width:0}
.commit .title{font-weight:600;font-size:13.5px}
.commit .title .hsh{font-family:var(--mono);font-size:12px;color:var(--acc);background:var(--acc-soft);
  border:1px solid #cfe0f0;border-radius:2px;padding:0 6px;font-weight:600}
.commit .meta{color:var(--muted);font-size:12px;margin-top:2px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.commit .meta .who{color:var(--txt);font-weight:600}
.commit .zchips{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.commit .zchip{font-family:var(--mono);font-size:11px;background:#eef0f2;color:#5f6771;border-radius:2px;padding:0 6px}
.commit .stats{display:flex;gap:7px;align-items:center;font-family:var(--mono);font-size:12.5px;font-weight:700}
.commit .stats .a{color:var(--add-marker)}
.commit .stats .d{color:var(--del-marker)}
.commit .stats .u{color:var(--warn)}
.commit .go{color:var(--muted-2);font-size:18px;text-decoration:none}
.commit:hover .go{color:var(--acc)}

.empty{padding:34px 18px;text-align:center;color:var(--muted)}
.empty .big{font-size:30px;opacity:.35}

/* ---------------------------------------------------------------- diff view */
.difftools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.seg button{border:0;background:transparent;color:#555;padding:6px 13px;cursor:pointer;font-size:13px;font-weight:600}
.seg button:hover{background:#f5f5f5}
.seg button.on{background:var(--acc);color:#fff}

.diff-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:14px;background:#fff}
.diff-head{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--head);border-bottom:1px solid var(--line)}
.diff-head .name{font-family:var(--mono);font-weight:700;font-size:13px}
.diff-head .spacer{flex:1}
.diff-head .stat-add{color:var(--add-marker);font-family:var(--mono);font-weight:700;font-size:12.5px}
.diff-head .stat-del{color:var(--del-marker);font-family:var(--mono);font-weight:700;font-size:12.5px}

.difftable{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px;line-height:1.55;table-layout:fixed}
.difftable td{padding:0 9px;border:0;vertical-align:top;white-space:pre-wrap;word-break:break-word}
.difftable .ln{width:52px;text-align:right;color:var(--muted-2);user-select:none;background:#fafbfc;padding:0 7px;font-size:11.5px}
.difftable .mk{width:18px;text-align:center;user-select:none;color:var(--muted)}
.difftable tr.hunk td{background:#f0f4f8;color:#3a5a78;padding:4px 11px;font-size:11.5px;font-weight:600;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.difftable tr.add td.code,.difftable tr.add td.ln,.difftable tr.add td.mk{background:var(--add-bg)}
.difftable tr.add .mk{color:var(--add-marker);font-weight:700}
.difftable tr.del td.code,.difftable tr.del td.ln,.difftable tr.del td.mk{background:var(--del-bg)}
.difftable tr.del .mk{color:var(--del-marker);font-weight:700}
.view-unified .split-view{display:none}
.view-split .unified-view{display:none}
.del-bg{background:var(--del-bg)}
.add-bg{background:var(--add-bg)}
.difftable.split td.code{border-left:1px solid var(--line-2)}
.text-danger{color:var(--bad)}
.card.danger,.panel.danger{border-color:#e8b7b5}

pre.dump{background:#fafbfc;border:1px solid var(--line-2);border-radius:var(--radius);padding:12px;
  overflow:auto;max-height:440px;font-family:var(--mono);font-size:12.5px;margin:0}
details summary{cursor:pointer;color:var(--acc);font-weight:600}

/* --------------------------------------------------------------------- modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;z-index:90;padding:20px;overflow:auto}
.modal-backdrop.on{display:flex;align-items:center;justify-content:center}
.modal{background:#fff;border:1px solid var(--line);border-radius:var(--radius);max-width:470px;width:100%;
  box-shadow:0 4px 20px rgba(0,0,0,.25)}
.modal-head{padding:11px 15px;border-bottom:1px solid var(--line-2);font-weight:600;font-size:14px;background:var(--head)}
.modal-body{padding:15px;font-size:13.5px}
.modal-foot{padding:11px 15px;border-top:1px solid var(--line-2);display:flex;justify-content:flex-end;gap:8px}
.modal input{margin-top:8px}

/* --------------------------------------------------------------- login / err */
.loginwrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
body.blank{background:#eef0f3}
.login{width:100%;max-width:380px;padding:22px}
.login .brand{display:flex;justify-content:center;align-items:center;gap:9px;margin-bottom:14px}
.login label{margin-top:13px}
.errorpage{max-width:540px;margin:8vh auto;text-align:center;padding:32px}
.errorpage h1{font-size:52px;margin:0;color:var(--acc);font-weight:700}

.diffwrap{margin-bottom:16px}
.summary-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.filterbar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:16px}

/* ------------------------------------------------------------------ mobile */
@media (max-width:1024px){  .sidebar{transform:translateX(-100%);transition:transform .18s ease}
  body.nav-open .sidebar{transform:none}
  body.nav-open .scrim{display:block}
  .main{margin-left:0}
  .hamburger{display:grid}
}
@media (max-width:700px){
  .content,.topbar{padding-left:12px;padding-right:12px}
  .gsearch{display:none}
  .userbox .who{display:none}
  .gsearch.mobile{display:flex;flex:1}
}