/* ===========================================================================
   KumoDNS — Supplementary styles (build 1.0.2)
   Extends the uploaded dashboard template. Reuses its palette variables only.
   Loaded AFTER dashboard.css so these rules add components without overriding
   the original look & feel.
   ======================================================================== */

/* ---------- Login page (re-skinned "fun login" to the dashboard palette) -- */
.login-body{
  margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--ink);
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(circle at 15% 8%,rgba(255,216,107,.30),transparent 26%),
             linear-gradient(180deg,#fff,var(--soft));
}
.login-card{
  width:420px;max-width:100%;background:var(--card);border:1px solid var(--line);
  border-radius:32px;padding:40px;text-align:center;
  box-shadow:0 12px 40px rgba(16,20,24,.06),0 40px 100px rgba(16,20,24,.08);
}
.login-mascot{width:120px;margin:0 auto 10px}
.login-card h1{margin:6px 0 4px;font-size:28px;letter-spacing:-.05em}
.login-sub{color:var(--muted);margin:0 0 18px}
.login-card form{display:grid;gap:4px}
.login-card input{
  width:100%;padding:14px;border:1px solid var(--line);border-radius:12px;
  margin:6px 0;font-size:15px;font-family:inherit;box-sizing:border-box;background:#fff;
}
.login-card input:focus{outline:none;border-color:var(--green)}
.login-btn{
  width:100%;padding:14px;background:var(--ink);color:#fff;border:0;border-radius:12px;
  font-weight:900;font-size:15px;cursor:pointer;margin-top:6px;
  box-shadow:0 10px 20px rgba(16,20,24,.12);
}
.login-btn:hover{background:#000}
.login-foot{margin-top:18px;font-size:14px;color:var(--muted)}

/* ---------- Flash messages ------------------------------------------------ */
.flash-stack{display:grid;gap:10px;margin-bottom:4px}
.flash{
  border:1px solid var(--line);border-radius:14px;padding:13px 16px;
  font-weight:700;font-size:14px;background:#fff;
}
.flash-success{background:#edf7ef;border-color:#cfe7d4;color:var(--green-dark)}
.flash-error{background:#fdecec;border-color:#f5cccc;color:#9b2c2c}
.flash-info{background:#eef4fb;border-color:#d3e2f4;color:#264a73}
.flash-warning{background:#fff5d8;border-color:#f3e2a8;color:#806314}

/* ---------- Forms (records, admin, settings) ------------------------------ */
.form-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.form-row input,.form-row select{
  flex:1;min-width:160px;padding:13px 14px;border:1px solid var(--line);
  border-radius:12px;font-size:14px;font-family:inherit;background:#fff;
}
.stack{display:grid;gap:12px;max-width:520px}
.stack input,.stack select{
  padding:13px 14px;border:1px solid var(--line);border-radius:12px;
  font-size:14px;font-family:inherit;background:#fff;
}
input:focus,select:focus{outline:none;border-color:var(--green)}

.record-form{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:6px;min-width:120px}
.field label{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.field input,.field select{
  padding:12px 13px;border:1px solid var(--line);border-radius:12px;
  font-size:14px;font-family:inherit;background:#fff;
}
.field.grow{flex:1;min-width:160px}
.field.grow2{flex:2;min-width:200px}
.field.small{max-width:120px}
.field.actions{flex-direction:row;align-items:center;gap:10px}

/* ---------- Inline forms, table row actions, text links ------------------- */
.inline{display:inline}
.row-actions{display:flex;align-items:center;gap:14px;white-space:nowrap}
.link{
  background:none;border:0;padding:0;cursor:pointer;font-weight:800;font-size:14px;
  color:var(--green-dark);text-decoration:none;font-family:inherit;
}
.link:hover{text-decoration:underline}
.link.danger{color:#b3261e}

/* ---------- Small helpers ------------------------------------------------- */
.hint{color:var(--muted);font-size:13px;margin:14px 0 0}
.muted{color:var(--muted)}
.empty{padding:26px 4px;color:var(--muted)}
.empty a{color:var(--green-dark);font-weight:800}

/* extra status colour (template ships .good / .pending) */
.status.bad{background:#fdecec;color:#9b2c2c}

/* ---------- Nameserver push detail grid ----------------------------------- */
.ns-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ns-pill{
  border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:#fff;
  display:flex;flex-direction:column;gap:4px;
}
.ns-pill strong{font-size:15px;letter-spacing:-.02em}
.ns-pill span{font-size:13px;color:var(--muted)}
.ns-pill.ok{background:#edf7ef;border-color:#cfe7d4}
.ns-pill.ok span{color:var(--green-dark)}
.ns-pill.bad{background:#fdecec;border-color:#f5cccc}
.ns-pill.bad span{color:#9b2c2c}

/* ---------- Plan cards (billing) ------------------------------------------ */
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.plan-card{
  border:1px solid var(--line);border-radius:20px;padding:20px;background:#fff;
  display:flex;flex-direction:column;gap:12px;
}
.plan-card.current{border-color:var(--green);background:#f6fbf6;box-shadow:0 14px 30px rgba(95,138,104,.12)}
.plan-card h4{margin:0;font-size:18px;letter-spacing:-.03em}
.plan-card ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.plan-card li{font-size:14px;color:#3d4741}
.plan-card li b{color:var(--ink)}
.plan-card button{margin-top:auto}
.plan-card button:disabled{opacity:.65;cursor:not-allowed}

/* ---------- Responsive tweaks for the added grids ------------------------- */
@media(max-width:1100px){
  .ns-grid{grid-template-columns:1fr 1fr}
  .plan-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .ns-grid,.plan-grid{grid-template-columns:1fr}
  .record-form .field{flex:1 1 100%;max-width:none}
  .form-row input,.form-row select{flex:1 1 100%}
}

/* KumoDNS version 1.0.2 */