/*
 * Super-admin console — the few things INSPINIA does not ship.
 *
 * The theme (vendor/inspinia/css/style.css) owns typography, colour and
 * layout: Open Sans at 13px, its heading scale, its greens. This file adds only
 * the widgets the back office needs that the template has no class for, drawn
 * in the template's own palette so they read as part of it:
 *   #1ab394 primary · #f8ac59 warning · #ed5565 danger · #23c6c8 info
 *   #676a6c text · #e7eaec rules · #f3f3f4 page
 */

/* The scale tokens, defined but not applied to the dashboards. Both dashboards
   are back on the template's own look (13px type, 3px buttons, square iboxes)
   and the rules below use literals. The names stay because three stylesheets
   that load beside this one are written in them and would fall back to nothing
   without it: webmail.css (webmail loads this file for them), chat.css on the
   client dashboard, and recenshost/checkout.css for a signed-in client. */
:root{
  /* Colour: the template's own palette, named once. */
  --navy:#1ab394;  --navy-dark:#18a689;  --navy-tint:rgba(26,179,148,0.10);
  --lp-dark:#2f4050;     /* headings and figures */
  --lp-text:#676a6c;     /* body */
  --lp-muted:#767b80;    /* secondary text; #888 and #999 were both in use */
  --lp-faint:#9a9fa3;    /* footnotes, placeholders */
  --lp-gray:#f3f3f4;  --lp-border:#e7eaec;
  --danger:#ed5565;  --warning:#f8ac59;  --info:#23c6c8;

  /* Type: 11 / 12 / 13 / 14 / 16 / 18 / 20 / 24 / 30, weights 400 / 600 / 700 */
  --fs-2xs:11px;  --fs-xs:12px;  --fs-sm:13px;  --fs-base:14px;  --fs-lg:16px;
  --fs-xl:18px;   --fs-2xl:20px; --fs-3xl:24px; --fs-4xl:30px;  --fs-hero:24px;

  /* Corners: labels / buttons and fields / panels / pills */
  --r-sm:4px;  --r-md:6px;  --r-lg:8px;  --r-pill:999px;

  /* Spacing follows the template's 5px steps (5 10 15 20 25 30 40): its gutters
     are 15 and 25 and its panels pad 15 / 20, and ours have to line up with them. */

  --shadow-sm:0 1px 2px rgba(47,64,80,0.07);
  --shadow-md:0 8px 24px -10px rgba(47,64,80,0.22);
  --shadow-lg:0 24px 48px -20px rgba(47,64,80,0.28);
}

/* ── Figures ──────────────────────────────────────────────────────────── */

/* Money and dates line up in columns without a monospace face. */
.mono { font-variant-numeric: tabular-nums; }

/* A MoneyBag's currencies side by side: base currency left, others right. */
.val-split { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
/* Every stat-card figure shares one size. Money was shrunk to 22px so several
   currencies fit, and the counts beside it (unpaid, churn, active services)
   kept the template's 30px, so a count out-shouted the money next to it. */
.ibox-content h1.no-margins { font-size: 22px; }
td.val-split { display: table-cell; }
td.val-split span + span { margin-left: 10px; }

.stat-sub { color: #999c9e; font-size: 12px; }
.top-client { color: #f8ac59; margin-left: 6px; }

/* ── Initials avatars (sidebar, top bar, ticket chat) ─────────────────── */

.avatar-initials {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: #1ab394; color: #fff; font-weight: 600; font-size: 13px; letter-spacing: .02em;
}
.avatar-initials.avatar-lg { width: 48px; height: 48px; font-size: 16px; }
.avatar-initials.is-client { background: #23c6c8; }
.dropdown-messages-box .avatar-initials { margin-right: 10px; }
.dropdown-messages-box .dropdown-item.float-left { padding: 0; width: auto; }
.chat-message .message-avatar.avatar-initials { margin-top: 1px; }
.chat-message.left .message-avatar.avatar-initials { float: left; margin-right: 10px; }
.chat-message.right .message-avatar.avatar-initials { float: right; margin-left: 10px; }

/* ── Top bar: Log out is a POST form, styled as the theme's link ──────── */

.navbar-logout { margin: 0; }
.navbar-logout button {
  background: none; border: 0; color: #999c9e; font-weight: 600;
  padding: 20px 10px; min-height: 50px; cursor: pointer;
}
.navbar-logout button:hover { color: #676a6c; }
.nav-header form { margin: 0; }
/* Avatar, name and "Recens · Admin" sit centred in the sidebar header, and
   so does the dropdown under them: the email, Back-to-site link and Log out
   line up on the same axis as the name they belong to. */
.nav-header .profile-element { text-align: center; }
.nav-header .profile-element .dropdown-menu { text-align: center; left: 50% !important; transform: translateX(-50%) !important; }
.nav-header .profile-element .dropdown-item { text-align: center; }
.nav-header form .dropdown-item { cursor: pointer; }
/* A submenu that opens its own (Settings › Site content) has its arrow 10px
   further right than its parent's: the template pads top-level links 20px on
   the right and second-level ones 10px. Make up the difference on the arrow
   alone, so the link text keeps the template's spacing. */
.nav-second-level > li > a > .fa.arrow { margin-right: 10px; }

/* ── Page heading actions ─────────────────────────────────────────────── */

.title-action { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 25px; }
.title-action form { margin: 0; }
.title-metric { font-size: 20px; font-weight: 600; color: #676a6c; text-align: right; line-height: 1.1; }
.title-metric small { display: block; font-size: 11px; color: #999c9e; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }

/* ── Row actions: inline forms that look like links/buttons ───────────── */

.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.row-actions form { display: inline; margin: 0; }
td .btn-xs { white-space: nowrap; }

/* ── Filter bars ──────────────────────────────────────────────────────── */

.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 15px; }
.filter-bar .filter-form { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.filter-bar .filter-form select { max-width: 240px; }

/* Sortable column headers. The arrow is the only affordance in a th, so it is
   always present (dimmed) rather than appearing on hover, which would leave the
   admin guessing which columns sort. */
th a.sort { color: inherit; display: inline-flex; align-items: center; gap: 6px; }
th a.sort .dir { opacity: .4; font-size: 10px; }
th a.sort:hover, th a.sort.on { color: #1ab394; }
th a.sort:hover .dir { opacity: .75; }
th a.sort.on .dir { opacity: 1; }

/* ── Kind tabs (Hosting / Domains / Development) ──────────────────────
   CSS-only, so a filter costs no request: radios drive which rows show. The
   markup contract (kind-scope / kind-row / kind-{kind} / kind-toggle-*) is what
   the tests pin; this only re-dresses it as the theme's nav-tabs. */

.kind-tabs { display: flex; border-bottom: 1px solid #e7eaec; margin-bottom: 0; }
.kind-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.kind-tabs label {
  margin: 0 2px -1px 0; padding: 10px 20px; cursor: pointer; font-weight: 600; color: #a7b1c2;
  border: 1px solid transparent; border-radius: 4px 4px 0 0;
}
.kind-tabs label:hover { color: #676a6c; background: #f3f3f4; }
.kind-tabs input:checked + label { color: #555; background: #fff; border-color: #e7eaec #e7eaec #fff; }
.kind-tabs input:focus-visible + label { outline: 2px solid #1ab394; outline-offset: -2px; }

.kind-scope .kind-row { display: none; }
.kind-scope .kind-hosting { display: table-row; }
.kind-scope:has(.kind-toggle-domain:checked) .kind-row { display: none; }
.kind-scope:has(.kind-toggle-domain:checked) .kind-domain { display: table-row; }
.kind-scope:has(.kind-toggle-dev:checked) .kind-row { display: none; }
.kind-scope:has(.kind-toggle-dev:checked) .kind-dev { display: table-row; }

/* Client hub billing: Invoices / Payments / Credit, same radio technique. */
.billing-tabs { display: flex; gap: 4px; }
.billing-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.billing-tabs label { margin: 0; padding: 3px 10px; cursor: pointer; font-size: 12px; border-radius: 3px; border: 1px solid #e7eaec; background: #fff; color: #676a6c; }
.billing-tabs input:checked + label { background: #1ab394; border-color: #1ab394; color: #fff; }
.billing-tabs input:focus-visible + label { outline: 2px solid #1ab394; outline-offset: 2px; }
.billing-scope .billing-pane { display: none; }
.billing-scope:has(.billing-toggle-invoices:checked) .billing-pane-invoices,
.billing-scope:has(.billing-toggle-payments:checked) .billing-pane-payments,
.billing-scope:has(.billing-toggle-credit:checked) .billing-pane-credit { display: block; }
.billing-pane .pane-metric { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.billing-pane .pane-metric form { margin: 0; }

/* ── Definition lists (client profile, plan specs) ────────────────────── */

.detail-list { margin: 0; }
.detail-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid #e7eaec; }
.detail-list > div:last-child { border-bottom: 0; }
.detail-list dt { font-weight: 600; color: #676a6c; }
.detail-list dd { margin: 0; text-align: right; }

/* ── TLD pricing: one inline form per row ─────────────────────────────── */

.tld-head, .tld-edit {
  display: grid; grid-template-columns: 90px minmax(160px, 1fr) 100px 100px 100px 90px 70px;
  gap: 10px; align-items: center; padding: 8px 0;
}
.tld-head { font-weight: 600; border-bottom: 2px solid #e7eaec; }
.tld-edit { border-bottom: 1px solid #e7eaec; margin: 0; }
.tld-edit .checkbox-inline { margin: 0; font-weight: 400; }

/* ── DNS editor ───────────────────────────────────────────────────────── */

.dns-head, .dns-edit { display: grid; grid-template-columns: 100px 1fr 2fr 90px 80px 70px; gap: 8px; align-items: center; }
.dns-head { font-weight: 600; border-bottom: 2px solid #e7eaec; padding: 8px 40px 8px 0; }
.dns-row { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid #e7eaec; }
.dns-row .dns-edit { flex: 1; margin: 0; }
.dns-row .dns-del { margin: 0; }
.dns-add { display: grid; grid-template-columns: 100px 1fr 2fr 90px 80px auto; gap: 8px; align-items: end; padding: 15px 0; }
.dns-add label { font-weight: 600; margin-bottom: 4px; }
.dns-ro { display: grid; grid-template-columns: 100px 1fr auto; gap: 8px; padding: 8px 0; border-top: 1px dashed #e7eaec; color: #999c9e; }
.dns-domains { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Project progress calendar ────────────────────────────────────────── */

.cal { border: 1px solid #e7eaec; }
.cal-head, .cal-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dow { padding: 8px; font-weight: 600; text-align: center; background: #f3f3f4; border-bottom: 1px solid #e7eaec; }
.cal-day { min-height: 90px; padding: 6px; border-right: 1px solid #e7eaec; border-bottom: 1px solid #e7eaec; }
.cal-week .cal-day:last-child { border-right: 0; }
.cal-day.cal-out { background: #fafafb; color: #c2c2c2; }
.cal-day.cal-today { background: rgba(26, 179, 148, .07); }
.cal-day.cal-today .cal-date { color: #1ab394; font-weight: 700; }
.cal-date { font-size: 12px; margin-bottom: 4px; }
.cal-item { font-size: 11px; padding: 2px 6px; margin-bottom: 3px; border-radius: 3px; background: #23c6c8; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-item.done { background: #1ab394; text-decoration: line-through; opacity: .75; }

/* ── Proposal line items ──────────────────────────────────────────────── */

.proposal-item { display: grid; grid-template-columns: 1fr 160px; gap: 8px; margin-bottom: 6px; }

/* ── Mailbox (notifications / enquiries) ──────────────────────────────── */

.table-mail .mail-subject .mail-excerpt { color: #999c9e; font-weight: 400; }
.table-mail tr[data-href] { cursor: pointer; }
.table-mail .mail-actions { white-space: nowrap; text-align: right; width: 1%; }
.table-mail .mail-actions form { display: inline; margin: 0; }
.folder-list li a .label { margin-top: 2px; }
/* The folder column's panel is transparent with 10px of padding
   (.mailbox-content), so its first item starts 10px below the row while the
   white header beside it started flush: drop the header by the same 10px so
   the two columns' tops line up. */
.col-lg-9 > .mail-box-header:first-child { margin-top: 10px; }
/* The folder list runs the column's full width, edge to edge. */
.ibox-content.mailbox-content { padding-left: 0; padding-right: 0; }
/* The template fixes the sender column at 23%; let it fit its content. */
.table-mail .mail-ontact { width: auto; }
.mail-body-text { white-space: pre-line; }
/* An attachment's Delete button sits under its file card, inside the frame. */
/* An opened row reads as one piece with the row above it: no rule across the
   top, neither the template's .mail-body border nor the table cell's. */
.table-mail tr.collapse > td { border-top: 0; }
.table-mail .mail-body { border-top: 0; padding: 0; }

/* ── Ticket chat ──────────────────────────────────────────────────────── */

.chat-discussion { height: auto; max-height: 520px; min-height: 160px; }
.chat-message .message-content { white-space: pre-line; }
.chat-message-form .form-group { margin-bottom: 10px; }

/* ── Invoice (invoice.html) ───────────────────────────────────────────── */

.invoice-status { margin: 6px 0 12px; }
.invoice-total tr.discount td { color: #1ab394; }

/* ── Forms ────────────────────────────────────────────────────────────── */

.checkbox-row { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 7px; }
.checkbox-row label { font-weight: 400; margin: 0; }
.checkbox-row input { margin-right: 4px; }
.form-text.text-muted { font-size: 11px; }

/* A badge in a card title sits in its top-right corner, as the template's
   .pull-right does. Bootstrap 4's .float-right floats it inside the 90px the
   title reserves for it instead, so on a narrow card it dropped onto a line of
   its own above the heading and read as centred. */
.ibox-title > .label.float-right, .ibox-title > .badge.float-right { position: absolute; right: 15px; top: 15px; float: none; margin-left: 0; }

/* Cards sharing a row (.stat-row for headline figures, .equal-row for panels)
   stretch to the tallest, so a short card does not leave a ragged edge. */
.stat-row > [class*="col-"] > .ibox,
.equal-row > [class*="col-"] > .ibox { display: flex; flex-direction: column; height: calc(100% - 25px); }
.stat-row > [class*="col-"] > .ibox > .ibox-content,
.equal-row > [class*="col-"] > .ibox > .ibox-content { flex: 1; }