/* =============================================================================
   DEX Portal - Domains

   The domains list. It borrows the counters and toolbar from the Websites
   page - those classes are shared - and adds only what a domain table needs
   that a website table did not: dates that carry how close they are, and the
   two flags a reseller watches.
   ============================================================================= */

.domain-list-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    margin: 12px var(--gutter) var(--gutter);
    background: var(--surface-panel);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
}

.domain-table {
    width: 100%;
    table-layout: fixed;
}

.domain-table__column--name      { width: 34%; }
.domain-table__column--status    { width: 14%; }
.domain-table__column--registered{ width: 16%; }
.domain-table__column--expires   { width: 18%; }
.domain-table__column--flags     { width: 18%; }

.domain-name {
    display: block;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.domain-identifier {
    display: block;
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
}


/* -----------------------------------------------------------------------------
   DATES

   A date, and under it - only when it matters - how near it is. The note is
   silent for a renewal comfortably in the future, and speaks up for one that
   is close or already past, because that is the whole reason to look.
   -------------------------------------------------------------------------- */

.domain-date {
    display: block;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    white-space: nowrap;
}

.domain-date--unknown {
    color: var(--text-muted);
}

.domain-date__note {
    display: block;
    font-size: var(--font-size-tiny);
    font-weight: 600;
}

.domain-date__note--soon {
    color: var(--status-warning);
}

.domain-date__note--overdue {
    color: var(--status-danger);
}


/* -----------------------------------------------------------------------------
   FLAGS

   Renewal and lock, the two states that quietly cost a reseller a domain. The
   dangerous readings - no renewal, no lock - wear the warning colour, because
   a row of neutral grey pills is a row nobody scans.
   -------------------------------------------------------------------------- */

.domain-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.domain-flag {
    padding: 1px 7px;
    border-radius: var(--radius-small);
    font-size: var(--font-size-tiny);
    white-space: nowrap;
}

.domain-flag--on {
    background: var(--surface-subtle);
    color: var(--text-secondary);
}

.domain-flag--off {
    background: var(--status-warning-tint);
    color: var(--status-warning);
}

.domain-flag--warn {
    background: var(--status-danger-tint);
    color: var(--status-danger);
}

.domain-truncation-note {
    margin: 0;
    padding: 12px var(--gutter);
    color: var(--text-muted);
    font-size: var(--font-size-small);
}


@media (max-width: 720px) {
    .domain-list-scroll {
        margin: 10px var(--gutter-tight) var(--gutter-tight);
    }

    /* Below this width the five columns no longer fit, so the table keeps its
       shape and the container scrolls sideways rather than crushing the name
       into one letter per line. */
    .domain-table {
        min-width: 640px;
    }
}


/* =============================================================================
   THE ROW AS A DOORWAY

   Once a row opens a domain, it has to look like it does. A pointer, a hover
   wash and a focus ring are the whole of it - the affordance a table row needs
   to read as a button without becoming one.
   ============================================================================= */

.domain-table--clickable .domain-row {
    cursor: pointer;
}

.domain-table--clickable .domain-row:hover {
    background: var(--surface-subtle);
}

.domain-table--clickable .domain-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}


/* =============================================================================
   DOMAIN DETAIL PANEL

   Four sections behind a tab strip. Everything inside is fluid so the panel can
   be widened, and the DNS table - the one thing with too many columns for a
   phone - scrolls sideways rather than crushing its inputs.
   ============================================================================= */

.domain-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.domain-detail__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-default);
}

.domain-detail__tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-size-small);
    font-weight: 500;
    cursor: pointer;
}

.domain-detail__tab:hover {
    background: var(--surface-subtle);
    color: var(--text-primary);
}

.domain-detail__tab--active,
.domain-detail__tab--active:hover {
    background: var(--accent-tint);
    border-color: var(--accent-border);
    color: var(--accent);
}


/* ---- The editors (nameservers, DNS, pricing share the frame) ------------- */

.domain-editor {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.domain-editor__intro {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-small);
    line-height: 1.5;
}

.domain-editor__toolbar {
    display: flex;
    justify-content: flex-end;
}

.domain-editor__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


/* ---- Nameservers --------------------------------------------------------- */

.nameserver-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nameserver-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nameserver-row .form-field__control {
    flex: 1;
    min-width: 0;
}

.nameserver-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    overflow-wrap: anywhere;
}


/* ---- Icon buttons -------------------------------------------------------- */

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-button);
    background: var(--surface-panel);
    color: var(--text-secondary);
    cursor: pointer;
}

.icon-button:hover {
    background: var(--surface-subtle);
    color: var(--text-primary);
}

.icon-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.icon-button--primary,
.icon-button--primary:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.icon-button--primary:hover {
    background: var(--accent-hover);
}

.icon-button--danger:hover {
    background: var(--status-danger-tint);
    border-color: var(--status-danger-tint);
    color: var(--status-danger);
}


/* ---- Ghost button, used for Reset ---------------------------------------- */

.button--ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
}

.button--ghost:hover {
    background: var(--surface-subtle);
    color: var(--text-primary);
}


/* ---- DNS table ----------------------------------------------------------- */

.dns-table {
    width: 100%;
}

.dns-table th,
.dns-table td {
    vertical-align: middle;
}

.dns-table__actions-head {
    text-align: right;
}

.dns-table__actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.dns-table__empty {
    color: var(--text-muted);
    text-align: center;
    padding: 20px 0;
}

.dns-type-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--radius-small);
    background: var(--accent-tint);
    color: var(--accent);
    font-size: var(--font-size-tiny);
    font-weight: 600;
}

.dns-host,
.dns-value {
    overflow-wrap: anywhere;
}

.dns-value {
    color: var(--text-secondary);
    font-size: var(--font-size-small);
}

.dns-row--editing td {
    background: var(--surface-subtle);
}

.dns-input {
    width: 100%;
    min-width: 0;
}

.dns-input--type { min-width: 84px; }
.dns-input--ttl,
.dns-input--priority { min-width: 64px; }


/* ---- Pricing ------------------------------------------------------------- */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
    background: var(--surface-panel);
}

.pricing-card__label {
    font-size: var(--font-size-tiny);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.pricing-card__amount {
    font-size: var(--font-size-large, 20px);
    font-weight: 600;
    color: var(--text-primary);
}


/* ---- Inset state message (a section that is loading or empty) ------------- */

.state-message--inset {
    padding: 28px 12px;
}


@media (max-width: 720px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    /* Five editable columns will not fit a phone, so the section scrolls
       sideways rather than crushing each input to a sliver. */
    .domain-detail__content {
        overflow-x: auto;
    }

    .domain-detail__content .dns-table {
        min-width: 560px;
    }
}


/* =============================================================================
   DOMAIN DETAIL PANEL - stacked layout (v2)

   Domain details + Contacts side by side, then Name servers, then DNS. No tabs:
   a domain is small enough to read whole. Cards use the light panel theme, the
   same tokens as the rest of the product.
   ============================================================================= */

.domain-detail__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.domain-card {
    padding: 18px 20px 20px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
    background: var(--surface-panel);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04),
                0 4px 12px -6px rgba(16, 24, 40, 0.12);
    overflow: hidden;
}

/* The head is a soft-blue band pulled to the card's edges - it clips to the
   card's radius via overflow:hidden, so each card wears its title like a
   header rather than a rule. */
.domain-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -18px -20px 16px;
    padding: 12px 20px;
    background: var(--status-info-tint);
    border-bottom: 1px solid #d3e3ff;
}

.domain-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

/* A small accent glyph beside a card title. Text-only titles are unaffected
   (a single flex child), so this is safe to apply everywhere. */
.domain-card__title .icon {
    flex: 0 0 auto;
    color: var(--accent, #2f6bff);
}

.domain-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.domain-card__note {
    margin: 12px 4px 0;
    color: var(--text-muted);
    font-size: var(--font-size-small);
    line-height: 1.5;
}


/* ---- Key / value rows ---------------------------------------------------- */

.domain-kv {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 4px;
    border-top: 1px solid var(--border-subtle, var(--border-default));
}

.domain-kv:first-of-type {
    border-top: none;
}

.domain-kv__key {
    flex: 0 0 40%;
    color: var(--text-secondary);
    font-size: var(--font-size-small);
}

.domain-kv__value {
    flex: 1;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    overflow-wrap: anywhere;
}

.domain-kv__value--code {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--font-size-small);
    color: var(--text-secondary);
}

.domain-status {
    font-weight: 700;
    font-size: var(--font-size-small);
    letter-spacing: 0.02em;
}

.domain-status--ok { color: var(--status-success); }
.domain-status--bad { color: var(--status-danger); }
.domain-status--warn { color: var(--status-warning); }

.toggle-pill {
    flex: 0 0 auto;
    padding: 5px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-panel);
    color: var(--text-secondary);
    font-size: var(--font-size-tiny);
    cursor: pointer;
}

.toggle-pill:hover { background: var(--surface-subtle); color: var(--text-primary); }
.toggle-pill:disabled { opacity: 0.5; cursor: not-allowed; }


/* ---- Header connect / connected control ---------------------------------- */

.domain-connect-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.connected-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-button);
    background: var(--status-success-tint);
    color: var(--status-success);
    font-size: var(--font-size-small);
    font-weight: 600;
    white-space: nowrap;
}


/* ---- Name servers -------------------------------------------------------- */

.ns-table {
    width: 100%;
    border-collapse: collapse;
}

.ns-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: var(--font-size-tiny);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-default);
}

.ns-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-subtle, var(--border-default));
    font-size: var(--font-size-small);
}

.ns-table__label { color: var(--text-muted); width: 90px; }
.ns-table__host,
.ns-table__ip { font-family: var(--font-mono, ui-monospace, monospace); overflow-wrap: anywhere; }
.ns-table__ip { color: var(--text-muted); }

.ns-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ns-edit-row {
    display: grid;
    grid-template-columns: 54px 1fr 1fr auto;
    align-items: center;
    gap: 8px;
}

.ns-edit-row__label {
    color: var(--text-muted);
    font-size: var(--font-size-small);
}

.ns-edit-row__remove { color: var(--status-danger); }


/* ---- DNS settings -------------------------------------------------------- */

.dns-scroll {
    overflow-x: auto;
}

.dns-table {
    width: 100%;
    border-collapse: collapse;
}

.dns-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: var(--font-size-tiny);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-default);
}

.dns-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-subtle, var(--border-default));
    font-size: var(--font-size-small);
    vertical-align: middle;
}

.dns-cell-type { color: var(--text-secondary); white-space: nowrap; }
.dns-cell-host,
.dns-cell-value {
    font-family: var(--font-mono, ui-monospace, monospace);
    overflow-wrap: anywhere;
}

.dns-row--editing td { background: var(--surface-subtle); }

.dns-table__empty { color: var(--text-muted); text-align: center; padding: 18px 0; }

.dns-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
}

.dns-actions__ask { color: var(--text-muted); font-size: var(--font-size-small); }

.dns-input--type { min-width: 92px; }

.dns-add-form {
    display: grid;
    grid-template-columns: 110px 180px 1fr auto;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-default);
}


/* ---- Text link buttons (MODIFY / DELETE / Cancel) ------------------------ */

.link-button {
    padding: 2px 2px;
    border: none;
    background: none;
    color: var(--accent);
    font-size: var(--font-size-small);
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.link-button:hover { text-decoration: underline; }
.link-button:disabled { opacity: 0.5; cursor: not-allowed; text-decoration: none; }
.link-button--danger { color: var(--status-danger); }


/* ---- Dark button (Add record / Connect domain) --------------------------- */

.button--dark {
    background: var(--text-primary);
    border: 1px solid var(--text-primary);
    color: #fff;
}

.button--dark:hover { background: #000; border-color: #000; color: #fff; }
.button--dark:disabled { opacity: 0.5; cursor: not-allowed; }


/* ---- Connect-a-website modal --------------------------------------------- */

.domain-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(17, 20, 28, 0.45);
}

.domain-modal {
    width: 100%;
    max-width: 460px;
    padding: 0 24px 24px;
    border-radius: var(--radius-large, 16px);
    background: var(--surface-panel);
    box-shadow: 0 24px 60px rgba(17, 20, 28, 0.28);
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}

/* Bled out to the modal's edges so it is a header bar rather than a dark
   rectangle floating inside one, which is why the modal itself lost its top
   padding above. */
.domain-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 -24px 0;
    padding: 16px 24px;
    background: var(--panel-header);
}

.domain-modal__title {
    margin: 0;
    font-size: var(--font-size-large, 18px);
    font-weight: 600;
    color: var(--text-on-dark);
}

.domain-modal__head .icon-button,
.domain-modal__head button {
    color: rgba(255, 255, 255, 0.72);
}

.domain-modal__head button:hover {
    color: var(--text-on-dark);
}

.domain-modal__intro {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-small);
    line-height: 1.55;
}


@media (max-width: 720px) {
    .domain-detail__grid {
        grid-template-columns: 1fr;
    }

    .dns-table { min-width: 520px; }

    .dns-add-form {
        grid-template-columns: 1fr 1fr;
    }

    .ns-edit-row {
        grid-template-columns: 40px 1fr auto;
    }

    .ns-edit-row .form-field__control:nth-of-type(2) {
        grid-column: 2 / -1;
    }
}


/* =============================================================================
   REGISTER A DOMAIN
   ============================================================================= */

.register-search {
    display: flex;
    gap: 10px;
    align-items: stretch;
    /* Breathing room under the page header - it used to sit almost on top of
       the search box. */
    margin: 22px var(--gutter) 0;
}

/* A small rotating spinner, shown while a search is in flight. */
@keyframes dex-spin { to { transform: rotate(360deg); } }

.dex-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-default);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: dex-spin 0.7s linear infinite;
    vertical-align: middle;
}

.dex-spinner--large {
    width: 30px;
    height: 30px;
    border-width: 3px;
}

.register-search__field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
    background: var(--surface-panel);
    color: var(--text-muted);
}

.register-search__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 12px 0;
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.register-results {
    margin: 16px var(--gutter) var(--gutter);
}

.register-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
    overflow: hidden;
    background: var(--surface-panel);
}

.register-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-top: 1px solid var(--border-subtle, var(--border-default));
}

.register-row:first-child { border-top: none; }
.register-row--taken { opacity: 0.6; }

.register-row__name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.register-row__domain {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.register-row__badge {
    padding: 1px 8px;
    border-radius: var(--radius-button);
    background: var(--accent-tint);
    color: var(--accent);
    font-size: var(--font-size-tiny);
    font-weight: 600;
}

.register-row__status {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

.register-row__price {
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    white-space: nowrap;
}

.register-row__taken {
    font-size: var(--font-size-small);
    color: var(--text-muted);
}


/* ---- Register form (in the slide-over) ----------------------------------- */

.register-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.register-form__summary {
    padding: 14px 16px;
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-medium);
    background: var(--accent-tint);
}

.register-form__domain {
    font-size: var(--font-size-large, 18px);
    font-weight: 600;
    color: var(--text-primary);
}

.register-form__cost {
    margin-top: 2px;
    font-size: var(--font-size-small);
    color: var(--text-secondary);
}

.register-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.register-form__check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-small);
    color: var(--text-secondary);
}

.register-form__note {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-small);
    line-height: 1.5;
}


@media (max-width: 720px) {
    .register-search { margin: 16px var(--gutter-tight) 0; flex-direction: column; }
    .register-results { margin: 14px var(--gutter-tight) var(--gutter-tight); }
    .register-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .register-form__grid { grid-template-columns: 1fr; }
}


/* =============================================================================
   TRANSFER A DOMAIN IN
   ============================================================================= */

.transfer-card {
    margin: 4px var(--gutter) 0;
}

.transfer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 200px;
    gap: 12px;
    align-items: end;
}

.transfer-grid__wide {
    grid-column: auto;
}

.transfer-result {
    margin: 16px var(--gutter) var(--gutter);
}


@media (max-width: 720px) {
    .transfer-card { margin: 4px var(--gutter-tight) 0; }
    .transfer-grid { grid-template-columns: 1fr; }
    .transfer-result { margin: 14px var(--gutter-tight) var(--gutter-tight); }
}


/* =============================================================================
   CLIENT PROFILE - Domains tab (customer's domains)
   ============================================================================= */

/* Not a ruled table - a list of soft cards. The rows are separated by spacing
   and each is drawn as its own tinted card, so the tab reads like the rest of
   the redesigned profile rather than a flat grid. */
.record-domains__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

/* The header becomes quiet captions sitting above the cards. */
.record-domains__table thead th {
    padding: 0 12px 2px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* A <tr> cannot carry a border when cells are separated, so the card outline is
   drawn on the cells: fill on every cell, side borders on the two ends. */
.record-domains__table tbody td {
    padding: 12px;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-subtle);
    vertical-align: middle;
}

.record-domains__table tbody td:first-child {
    border-left: 1px solid var(--border-subtle);
    border-top-left-radius: var(--radius-medium);
    border-bottom-left-radius: var(--radius-medium);
}

.record-domains__table tbody td:last-child {
    border-right: 1px solid var(--border-subtle);
    border-top-right-radius: var(--radius-medium);
    border-bottom-right-radius: var(--radius-medium);
}

.record-domains__table tbody tr.client-domain-row {
    cursor: pointer;
}

.record-domains__table tbody tr:hover td {
    background: var(--surface-panel);
    border-color: var(--border-default);
}

.record-domains__table tbody tr.client-domain-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.record-domains__name {
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.record-domains__tld {
    margin-left: 4px;
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
}

/* The actions cell hugs the right edge rather than stretching across a third of
   the row. */
.record-domains__action {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.record-domains__id {
    color: var(--text-secondary);
    font-size: var(--font-size-small);
    font-variant-numeric: tabular-nums;
}

/* The edit-website action is a solid dark button, not the light secondary one. */
.button.client-website-edit,
.button--secondary.client-website-edit {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--text-on-dark);
}

.button.client-website-edit:hover,
.button--secondary.client-website-edit:hover {
    background: #000;
    border-color: #000;
    color: var(--text-on-dark);
}


/* =============================================================================
   TWO-COLUMN PANEL BODY (email package panel: details | actions/links)
   auto-fit collapses to one column when the panel is narrow (opened beside).
   ============================================================================= */

.panel-two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    align-items: start;
}

.panel-two-col__col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Detail rows stacked (not the 2-col grid) inside a narrow column. A clean
   label | value row, with a small muted glyph on the label - the package card
   on the email panel reads as a modern spec sheet rather than run-together
   text. */
.domain-detail__stack {
    display: flex;
    flex-direction: column;
}

.domain-detail__stack .domain-detail__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 2px;
    border-top: 1px solid var(--border-subtle, #eef0f5);
}

.domain-detail__stack .domain-detail__row:first-child {
    border-top: none;
}

.domain-detail__stack .domain-detail__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    font-size: var(--font-size-small);
    white-space: nowrap;
}

.domain-detail__stack .domain-detail__label .icon {
    color: var(--text-muted);
    flex: 0 0 auto;
}

.domain-detail__stack .domain-detail__value {
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
    overflow-wrap: anywhere;
}


/* =============================================================================
   BILLING SUBSCRIPTION ATTACH CARD (shared: domain panel + email package panel)
   A single subscription attached one-to-one, so a renewal email's widget can
   carry a Pay button straight to its pay page.
   ============================================================================= */

.subscription-attach__search {
    width: 100%;
    margin: 12px 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
    background: var(--surface-panel);
    font-size: var(--font-size-small);
    font-family: inherit;
    color: var(--text-primary);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    -webkit-appearance: none;
    appearance: none;
}

.subscription-attach__search:focus {
    outline: none;
    border-color: var(--accent, #2f6bff);
    box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.14);
}

.subscription-attach__results {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.subscription-attach__option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
    background: var(--surface-panel);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.subscription-attach__option:hover,
.subscription-attach__option:focus-visible {
    border-color: var(--accent, #2f6bff);
    background: var(--status-info-tint);
    outline: none;
}

.subscription-attach--linked {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
    background: var(--surface-subtle, var(--surface-panel));
}

.subscription-attach__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.subscription-attach__name {
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--text-primary);
}

.subscription-attach__meta {
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
}

.subscription-attach__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


/* The domain panel opened BESIDE another (as a companion) is narrower, so its
   two-column details/contacts stack rather than crush. */
.domain-detail--beside .domain-detail__grid {
    grid-template-columns: 1fr;
}

.domain-detail--beside .dns-add-form {
    grid-template-columns: 1fr 1fr;
}