/**
 * Meerkat - customer panel (/account) additions.
 * Filament 3 themes need a Tailwind 3 build, so the panel is styled through
 * ->colors() and this plain stylesheet instead of a compiled theme.
 */

/* Honeypot fields: out of sight and out of the tab order, yet still in the DOM for bots. */
.mk-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Stacked sections and simple status lists (setup, to-do, domain pages). */
.mk-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mk-muted {
    font-size: 0.875rem;
    color: rgb(var(--gray-500));
}

.mk-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mk-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
}

.mk-list__item + .mk-list__item {
    border-top: 1px solid rgb(var(--gray-100));
}

.mk-list__icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.mk-list__label {
    flex: 1 1 12rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--gray-950));
}

.mk-list__label a {
    color: rgb(var(--primary-600));
    text-decoration: underline;
}

.mk-tone-success { color: rgb(var(--success-600)); }
.mk-tone-info { color: rgb(var(--info-600)); }
.mk-tone-warning { color: rgb(var(--warning-600)); }
.mk-tone-danger { color: rgb(var(--danger-600)); }
.mk-tone-gray { color: rgb(var(--gray-400)); }

.mk-progress {
    height: 0.5rem;
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: 9999px;
    background: rgb(var(--gray-100));
}

.mk-progress__bar {
    height: 100%;
    border-radius: 9999px;
    background: rgb(var(--primary-600));
    transition: width 0.3s ease;
}

/* DNS record to copy on the domain page. */
.mk-record {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.5rem 1rem;
    margin: 0;
    font-size: 0.875rem;
}

.mk-record dt {
    color: rgb(var(--gray-500));
}

.mk-record dd {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow-wrap: anywhere;
    color: rgb(var(--gray-950));
}

.dark .mk-muted,
.dark .mk-record dt { color: rgb(var(--gray-400)); }
.dark .mk-list__item + .mk-list__item { border-top-color: rgb(255 255 255 / 0.05); }
.dark .mk-list__label,
.dark .mk-record dd { color: rgb(255 255 255); }
.dark .mk-list__label a { color: rgb(var(--primary-400)); }
.dark .mk-progress { background: rgb(255 255 255 / 0.1); }
.dark .mk-tone-success { color: rgb(var(--success-400)); }
.dark .mk-tone-info { color: rgb(var(--info-400)); }
.dark .mk-tone-warning { color: rgb(var(--warning-400)); }
.dark .mk-tone-danger { color: rgb(var(--danger-400)); }
.dark .mk-tone-gray { color: rgb(var(--gray-500)); }

@media (prefers-reduced-motion: reduce) {
    .mk-progress__bar { transition: none; }
}