/* ============================================================
   Site Manager — Modern theme layer on top of Bootstrap 5
   ============================================================ */

:root {
    --sm-bg:        #f4f6fb;
    --sm-surface:   #ffffff;
    --sm-border:    #e6e9f0;
    --sm-text:      #1e2433;
    --sm-muted:     #6b7280;

    --sm-primary:   #4f46e5;
    --sm-primary-d: #4338ca;
    --sm-primary-l: #eef0fe;

    --sm-success:   #16a34a;
    --sm-danger:    #dc2626;
    --sm-warning:   #d97706;
    --sm-info:      #0ea5e9;

    --sm-radius:    14px;
    --sm-radius-sm: 10px;
    --sm-shadow:    0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
    --sm-shadow-sm: 0 1px 2px rgba(16,24,40,.06);
    --sm-ring:      0 0 0 3px rgba(79,70,229,.18);
    --sm-ease:      .18s cubic-bezier(.4,0,.2,1);
}

* { -webkit-font-smoothing: antialiased; }

body {
    background:
        radial-gradient(1200px 480px at 100% -10%, #eef1ff 0%, transparent 55%),
        radial-gradient(1000px 420px at -10% 0%, #f0fbff 0%, transparent 50%),
        var(--sm-bg) !important;
    color: var(--sm-text);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh;
}

/* ---------- Navbar ---------- */
.navbar.bg-dark {
    background: rgba(17, 21, 34, .85) !important;
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 4px 24px rgba(16,24,40,.10);
    position: sticky; top: 0; z-index: 1030;
}
.navbar-brand {
    font-weight: 700 !important;
    letter-spacing: -.01em;
    display: flex; align-items: center; gap: .5rem;
}
.navbar-brand::before {
    content: "";
    width: 26px; height: 26px; border-radius: 8px;
    background: linear-gradient(135deg, #6366f1, #22d3ee);
    box-shadow: 0 2px 8px rgba(99,102,241,.5);
}
.navbar .btn-outline-light {
    border-color: rgba(255,255,255,.18);
    color: #e8eaf2;
    transition: var(--sm-ease);
}
.navbar .btn-outline-light:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.28);
    transform: translateY(-1px);
}

/* ---------- Headings ---------- */
h1,h2,h3,h4,h5,h6 { letter-spacing: -.015em; color: var(--sm-text); }
.text-muted { color: var(--sm-muted) !important; }
code {
    background: #f1f3f9; color: #4338ca;
    padding: .12em .4em; border-radius: 6px;
    font-size: .86em; border: 1px solid #e6e9f0;
}

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--sm-border) !important;
    border-radius: var(--sm-radius) !important;
    box-shadow: var(--sm-shadow);
    background: var(--sm-surface);
    overflow: hidden;
}
.card .card-body { padding: 1.25rem 1.35rem; }

/* ---------- Buttons ---------- */
.btn {
    --bs-btn-border-radius: var(--sm-radius-sm);
    border-radius: var(--sm-radius-sm);
    font-weight: 600;
    letter-spacing: .005em;
    transition: var(--sm-ease);
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}
.btn-sm { border-radius: 9px; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { box-shadow: var(--sm-ring); }

.btn-primary {
    --bs-btn-bg: var(--sm-primary);
    --bs-btn-border-color: var(--sm-primary);
    --bs-btn-hover-bg: var(--sm-primary-d);
    --bs-btn-hover-border-color: var(--sm-primary-d);
    --bs-btn-active-bg: var(--sm-primary-d);
    background-image: linear-gradient(180deg, #5b53ec, #4f46e5);
    box-shadow: 0 2px 8px rgba(79,70,229,.30);
}
.btn-primary:hover { box-shadow: 0 6px 18px rgba(79,70,229,.38); transform: translateY(-1px); }

.btn-outline-primary { --bs-btn-color: var(--sm-primary); --bs-btn-border-color: #c7cafe; --bs-btn-hover-bg: var(--sm-primary); --bs-btn-hover-border-color: var(--sm-primary); }
.btn-outline-secondary { --bs-btn-color: #475467; --bs-btn-border-color: #d4d9e3; --bs-btn-hover-bg: #475467; --bs-btn-hover-border-color: #475467; }
.btn-outline-danger { --bs-btn-color: var(--sm-danger); --bs-btn-border-color: #f3c0c0; --bs-btn-hover-bg: var(--sm-danger); --bs-btn-hover-border-color: var(--sm-danger); }
.btn-danger { background-image: linear-gradient(180deg,#e23b3b,#dc2626); box-shadow: 0 2px 8px rgba(220,38,38,.28); }
.btn-success { background-image: linear-gradient(180deg,#1bb256,#16a34a); }

/* Loading state (set by app.js) */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
    content: ""; position: absolute; width: 1em; height: 1em;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: sm-spin .6s linear infinite;
    color: #fff; visibility: visible;
}
.btn-outline-primary.is-loading::after,
.btn-outline-secondary.is-loading::after,
.btn-outline-danger.is-loading::after { color: var(--sm-primary); }
@keyframes sm-spin { to { transform: rotate(360deg); } }
.btn:disabled, .btn.disabled { opacity: .55; }

/* ---------- Forms ---------- */
.form-label { font-weight: 600; font-size: .85rem; color: #344054; margin-bottom: .35rem; }
.form-control, .form-select {
    border-radius: var(--sm-radius-sm);
    border-color: #dfe3ec;
    padding: .55rem .8rem;
    transition: var(--sm-ease);
    background-color: #fff;
}
.form-control:focus, .form-select:focus {
    border-color: var(--sm-primary);
    box-shadow: var(--sm-ring);
}
.form-control-sm, .form-select-sm { border-radius: 9px; }
.form-text { color: var(--sm-muted); }
.form-check-input { border-color: #c6ccda; }
.form-check-input:checked { background-color: var(--sm-primary); border-color: var(--sm-primary); }
.form-check-input:focus { box-shadow: var(--sm-ring); border-color: var(--sm-primary); }

/* ---------- Tables ---------- */
.table {
    --bs-table-hover-bg: #f7f8fd;
    margin-bottom: 0;
}
.table thead th {
    font-size: .72rem !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #8a90a2 !important;
    font-weight: 700;
    background: #fafbfe !important;
    border-bottom: 1px solid var(--sm-border);
    padding: .8rem 1rem;
}
.table tbody td { padding: .85rem 1rem; border-color: #f0f2f7; vertical-align: middle; }
.table tbody tr { transition: background var(--sm-ease); }
.table-responsive { border-radius: var(--sm-radius); }

/* Bảng nén (table-sm) — vd trang DNS: gọn, dễ nhìn, ít khoảng trắng */
.table-sm thead th { padding: .5rem .6rem !important; }
.table-sm tbody td { padding: .4rem .6rem !important; font-size: .85rem; }
.table-sm code { font-size: .8em; padding: .05em .35em; }
.table-sm .btn-sm { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .5rem; font-size: .78rem; }
.table-sm .badge { padding: .3em .5em; font-size: .68rem; }
/* Sửa/Xoá nằm ngang cho đỡ cao */
#dns-table .cell-actions { white-space: nowrap; }
#dns-table .cell-actions .btn { margin-left: .25rem; }

/* Content dài (DKIM/DMARC...) -> giới hạn rộng + tự xuống dòng, không kéo giãn bảng */
#dns-table .cell-content { max-width: 520px; }
#dns-table .cell-content code {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    word-break: break-all;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
#dns-table td:nth-child(3) code {   /* cột Name cũng cho wrap nếu dài */
    word-break: break-all;
    overflow-wrap: anywhere;
}
#dns-table .cell-content .input-content { min-width: 260px; }

/* ---------- Badges ---------- */
.badge {
    font-weight: 600;
    padding: .4em .65em;
    border-radius: 7px;
    letter-spacing: .02em;
}
.badge.bg-success { background: #dcfce7 !important; color: #15803d !important; }
.badge.bg-danger  { background: #fee2e2 !important; color: #b91c1c !important; }
.badge.bg-warning { background: #fef3c7 !important; color: #b45309 !important; }
.badge.bg-info    { background: #e0f2fe !important; color: #0369a1 !important; }
.badge.bg-secondary { background: #eef0f4 !important; color: #475467 !important; }
.badge.bg-primary { background: var(--sm-primary) !important; color:#fff !important; }
.badge-status { text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; }

/* ---------- Alerts / toasts ---------- */
.alert { border: 1px solid transparent; border-radius: var(--sm-radius-sm); box-shadow: var(--sm-shadow-sm); }
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-info    { background: #f0f9ff; border-color: #bae6fd; color: #075985; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }

/* Toast stack injected by app.js */
#sm-toasts {
    position: fixed; top: 1rem; right: 1rem; z-index: 1090;
    display: flex; flex-direction: column; gap: .6rem; max-width: 380px;
}
.sm-toast {
    background: #fff; border: 1px solid var(--sm-border);
    border-left: 4px solid var(--sm-muted);
    border-radius: 12px; box-shadow: var(--sm-shadow);
    padding: .8rem 1rem; font-size: .9rem; color: var(--sm-text);
    display: flex; gap: .6rem; align-items: flex-start;
    animation: sm-toast-in .25s cubic-bezier(.4,0,.2,1);
}
.sm-toast.is-leaving { animation: sm-toast-out .25s forwards; }
.sm-toast.success { border-left-color: var(--sm-success); }
.sm-toast.error   { border-left-color: var(--sm-danger); }
.sm-toast.info    { border-left-color: var(--sm-info); }
@keyframes sm-toast-in  { from { opacity: 0; transform: translateX(20px); } }
@keyframes sm-toast-out { to   { opacity: 0; transform: translateX(20px); } }

/* ---------- Log block ---------- */
pre.log {
    background: #0f172a; color: #e2e8f0;
    padding: 14px 16px; border-radius: var(--sm-radius-sm);
    max-height: 320px; overflow: auto; font-size: .82rem;
    border: 1px solid #1e293b;
}

/* ---------- Progress steps (create site) ---------- */
#steps .list-group-item {
    border: none; border-bottom: 1px solid #f0f2f7;
    padding: .85rem .25rem; gap: .6rem;
}
#steps .list-group-item:last-child { border-bottom: none; }
.step-badge {
    width: 28px; height: 28px; flex: 0 0 28px;
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
    background: #eef0f4; color: #8a90a2;
    transition: var(--sm-ease);
}
.list-group-item.is-running .step-badge { background: var(--sm-primary-l); color: var(--sm-primary); animation: sm-pulse 1.2s infinite; }
.list-group-item.is-done    .step-badge { background: #dcfce7; color: #15803d; }
.list-group-item.is-fail    .step-badge { background: #fee2e2; color: #b91c1c; }
@keyframes sm-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(79,70,229,.4);} 50% { box-shadow: 0 0 0 5px rgba(79,70,229,0);} }

/* Running indicator dot + overall bar */
.run-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--sm-primary);
    box-shadow: 0 0 0 0 rgba(79,70,229,.5);
    animation: sm-pulse 1.2s infinite;
    display: inline-block; flex: 0 0 12px;
}
.run-dot.is-done { background: var(--sm-success); animation: none; box-shadow: none; }
.run-dot.is-fail { background: var(--sm-danger);  animation: none; box-shadow: none; }
.progress { background: #eef0f4; }
#run-bar {
    background-image: linear-gradient(90deg, #6366f1, #22d3ee);
    transition: width .5s cubic-bezier(.4,0,.2,1);
    border-radius: 6px;
}
#run-bar.is-done { background-image: linear-gradient(90deg,#16a34a,#22c55e); }
#run-bar.is-fail { background-image: linear-gradient(90deg,#dc2626,#f87171); }

/* Khoá điều hướng khi đang chạy workflow */
body.sm-running .navbar a,
body.sm-running .navbar button { pointer-events: none; opacity: .5; }

/* ---------- Misc ---------- */
.page-title { font-weight: 700; font-size: 1.5rem; }
main { animation: sm-fade .35s ease; }
@keyframes sm-fade { from { opacity: 0; transform: translateY(6px); } }
::selection { background: rgba(79,70,229,.18); }