/* ============================================================
   DotDNS Control Panel – Manager CSS
   Phase 2: Full pixel-perfect implementation
   Reference: access.dotvndns.vn screenshots
   Palette:
     --cp-teal:    #2C9B8C  (primary/tabs/links/titles)
     --cp-pink:    #E83E6C  (logo hex)
     --cp-banner:  #C8E6E2  (domain banner bg)
     --cp-tabs-bg: #D4EDE9  (top tabs bg)
     --cp-sidebar: #F7F7F7  (sidebar bg)
     --cp-white:   #FFFFFF
     --cp-border:  #E0E0E0
============================================================ */

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; }

body.cp-body {
    font-family: 'Segoe UI', -apple-system, Arial, sans-serif;
    background: #f5f5f5;
    color: #333;
    min-height: 100vh;
}

a { text-decoration: none; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.cp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    padding: 0 28px;
    height: 58px;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Logo */
.cp-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.cp-logo-hex {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.cp-logo-text {
    line-height: 1;
}

.cp-logo-line1 {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #E83E6C;
    text-transform: uppercase;
}

.cp-logo-line2 {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #2C9B8C;
    text-transform: uppercase;
}

/* Header right */
.cp-header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cp-user-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 13px;
    color: #444;
}

.cp-user-greeting { font-weight: 400; }
.cp-user-greeting strong { font-weight: 600; }

.cp-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: #2C9B8C;
    cursor: pointer;
    font-size: 12.5px;
    padding: 0;
    font-family: inherit;
}
.cp-logout-btn:hover { color: #E83E6C; }
.cp-logout-btn svg { flex-shrink: 0; }

/* Language flag button */
.cp-lang-btn {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 3px;
}
.cp-lang-btn:hover { background: #f0f0f0; }
.cp-lang-btn img { display: block; border-radius: 2px; }

/* ── Domain Banner ───────────────────────────────────────────────────────── */
.cp-domain-banner {
    background: #c8e6e2;
    padding: 14px 28px;
    border-bottom: 1px solid #b0d5d0;
}

.cp-domain-banner h1 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.3px;
    line-height: 1;
}

/* ── Top Tabs ────────────────────────────────────────────────────────────── */
.cp-top-tabs {
    display: flex;
    background: #d4ede9;
    border-bottom: 1px solid #b0d5cf;
    padding: 0 28px;
    gap: 0;
}

.cp-tab {
    display: flex;
    align-items: center;
    padding: 11px 18px 10px;
    font-size: 13.5px;
    color: #555;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color 0.15s;
    white-space: nowrap;
}

.cp-tab:hover { color: #2C9B8C; }

.cp-tab--active {
    color: #1a1a1a;
    font-weight: 600;
    border-bottom-color: #2C9B8C;
}

/* ── Page body layout ────────────────────────────────────────────────────── */
.cp-page-body {
    display: flex;
    min-height: calc(100vh - 58px - 48px - 36px);
    background: #f5f5f5;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.cp-sidebar {
    width: 190px;
    flex-shrink: 0;
    background: #ffffff;
    border-right: 1px solid #e5e5e5;
    padding: 14px 0;
}

.cp-sidebar-link {
    display: block;
    padding: 9px 18px;
    font-size: 13.5px;
    color: #444;
    text-decoration: none;
    transition: background 0.1s, color 0.1s;
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-sidebar-link:hover {
    background: #f0faf8;
    color: #2C9B8C;
}

.cp-sidebar-link--active {
    background: #e8e8e8;
    color: #1a1a1a;
    font-weight: 500;
    border-left-color: #2C9B8C;
}

/* ── Main content ────────────────────────────────────────────────────────── */
.cp-main {
    flex: 1;
    padding: 22px 24px;
    min-width: 0;
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.cp-card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 22px 24px;
}

.cp-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #2C9B8C;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

/* ── Alerts / Flash ──────────────────────────────────────────────────────── */
.cp-alert {
    padding: 9px 14px;
    border-radius: 4px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.5;
}
.cp-alert ul { margin: 0; padding-left: 16px; }
.cp-alert--success { background: #e6f6f4; border: 1px solid #a8d5cf; color: #1a6b5e; }
.cp-alert--error   { background: #fff0f0; border: 1px solid #f5b8b8; color: #c53030; }
.cp-alert--info    { background: #fffbec; border: 1px solid #f0d890; color: #7a5800; }
.cp-alert--warning { background: #fffbec; border: 1px solid #f0d890; color: #7a5800; }

/* ── DNS Toolbar ─────────────────────────────────────────────────────────── */
.cp-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.cp-toolbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Search + Show row ───────────────────────────────────────────────────── */
.cp-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 10px;
    flex-wrap: wrap;
}

.cp-search-wrap {
    position: relative;
    flex: 1;
    max-width: 360px;
}

.cp-search-input {
    width: 100%;
    padding: 7px 34px 7px 10px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 13px;
    background: #fafafa;
    outline: none;
    font-family: inherit;
}
.cp-search-input:focus { border-color: #2C9B8C; background: #fff; }

.cp-search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}

.cp-show-label {
    font-size: 13px;
    color: #555;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cp-select {
    padding: 5px 8px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    outline: none;
}
.cp-select:focus { border-color: #2C9B8C; }

/* ── DNS Table ───────────────────────────────────────────────────────────── */
.cp-dns-table-wrap {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    overflow-x: auto;
}

.cp-dns-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.cp-dns-table th {
    background: #e8f5f2;
    color: #2C9B8C;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 10px;
    text-align: left;
    border-bottom: 2px solid #c8e6e0;
    white-space: nowrap;
}

.cp-dns-table th .cp-th-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cp-dns-table td {
    padding: 7px 8px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    font-size: 13px;
}

.cp-dns-table tr:last-child td { border-bottom: none; }
.cp-dns-table tr:hover td { background: #fafffe; }

.cp-dns-table .col-stt { width: 40px; text-align: center; color: #888; font-size: 12px; }
.cp-dns-table .col-host { width: 140px; }
.cp-dns-table .col-type { width: 100px; }
.cp-dns-table .col-value { min-width: 180px; }
.cp-dns-table .col-ttl { width: 80px; }
.cp-dns-table .col-priority { width: 70px; }
.cp-dns-table .col-actions { width: 80px; text-align: center; }

/* Table inputs */
.cp-dns-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    font-size: 13px;
    background: #fff;
    font-family: inherit;
    outline: none;
}
.cp-dns-input:focus { border-color: #2C9B8C; }
.cp-dns-input[readonly], .cp-dns-input[disabled] {
    background: #f5f5f5;
    color: #555;
    cursor: default;
}

.cp-dns-select {
    width: 100%;
    padding: 6px 6px;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    outline: none;
}
.cp-dns-select:focus { border-color: #2C9B8C; }
.cp-dns-select:disabled { background: #f5f5f5; color: #555; }

/* Action buttons in table */
.cp-action-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.cp-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    cursor: pointer;
    color: #999;
    border-radius: 3px;
    transition: color 0.12s, background 0.12s;
    text-decoration: none;
}
.cp-action-btn:hover { color: #2C9B8C; background: #e8f5f2; }
.cp-action-btn--danger:hover { color: #e53e3e; background: #fff0f0; }
.cp-action-btn--save:hover { color: #2C9B8C; background: #e8f5f2; }

.cp-action-sep { color: #ddd; font-size: 16px; line-height: 1; }

/* New row highlight */
.cp-dns-table tr.cp-row--new td { background: #f0fff8; }
.cp-dns-table tr.cp-row--editing td { background: #f8fdfc; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.cp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    background: #ffffff;
    color: #444;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s;
    line-height: 1.4;
}
.cp-btn:hover { background: #f5f5f5; border-color: #bbb; }

.cp-btn--primary {
    background: #2C9B8C;
    border-color: #2C9B8C;
    color: #ffffff;
}
.cp-btn--primary:hover { background: #237d70; border-color: #237d70; color: #fff; }

.cp-btn--secondary {
    background: #f5f5f5;
    border-color: #c8c8c8;
    color: #555;
}
.cp-btn--secondary:hover { background: #eee; }

.cp-btn--disabled, .cp-btn:disabled {
    background: #f0f0f0;
    border-color: #d0d0d0;
    color: #aaa;
    cursor: not-allowed;
}

.cp-btn--full { width: 100%; justify-content: center; }
.cp-btn--sm { padding: 5px 10px; font-size: 12px; }
.cp-btn--lg { padding: 10px 22px; font-size: 14px; }

/* Dropdown button */
.cp-btn-dropdown {
    position: relative;
    display: inline-flex;
}
.cp-btn-dropdown .cp-btn { gap: 4px; }
.cp-btn-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    min-width: 160px;
    z-index: 200;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.cp-btn-dropdown.open .cp-btn-dropdown-menu { display: block; }
.cp-btn-dropdown-item {
    display: block;
    padding: 8px 14px;
    font-size: 13px;
    color: #444;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.cp-btn-dropdown-item:hover { background: #f5f5f5; color: #2C9B8C; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.cp-form-group { margin-bottom: 16px; }

.cp-label {
    display: block;
    font-size: 13px;
    color: #555;
    margin-bottom: 5px;
    font-weight: 500;
}

.cp-required { color: #E83E6C; margin-left: 2px; }

.cp-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 13.5px;
    background: #fafafa;
    color: #333;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.cp-input:focus { border-color: #2C9B8C; background: #fff; box-shadow: 0 0 0 2px rgba(44,155,140,0.1); }
.cp-input--error { border-color: #e53e3e !important; }
.cp-input[readonly] { background: #f5f5f5; color: #666; cursor: default; }

.cp-input-pw-wrap {
    position: relative;
}
.cp-input-pw-wrap .cp-input { padding-right: 40px; }

.cp-pw-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
    padding: 4px;
    display: flex;
    align-items: center;
}
.cp-pw-toggle:hover { color: #2C9B8C; }

.cp-error-msg {
    color: #e53e3e;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.cp-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cp-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    user-select: none;
}

/* ── Login page ──────────────────────────────────────────────────────────── */
.cp-login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #f0faf8;
    padding: 30px 16px;
}

.cp-login-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 36px 40px 32px;
    width: 100%;
    max-width: 430px;
    box-shadow: 0 2px 18px rgba(0,0,0,.07);
}

.cp-login-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

.cp-login-title {
    font-size: 17px;
    font-weight: 700;
    color: #2C9B8C;
    margin-bottom: 22px;
}

.cp-lang-switch-inline {
    text-align: center;
    margin-top: 18px;
}
.cp-lang-inline-btn {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}
.cp-lang-inline-btn:hover { background: #f5f5f5; }

/* ── Overview info table ─────────────────────────────────────────────────── */
.cp-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.cp-info-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13.5px;
    vertical-align: middle;
}
.cp-info-table td:first-child { color: #888; width: 200px; font-size: 13px; }
.cp-info-table tr:last-child td { border-bottom: none; }

/* ── Status badges ───────────────────────────────────────────────────────── */
.cp-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}
.cp-badge--active    { background: #e6f6f4; color: #1a7a6b; }
.cp-badge--disabled  { background: #f0f0f0; color: #888; }
.cp-badge--sync_error{ background: #fff0f0; color: #c53030; }

/* ── Security cards (DNSSEC etc.) ────────────────────────────────────────── */
.cp-security-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    border-bottom: 1px solid #eee;
}
.cp-security-item:last-child { border-bottom: none; }

.cp-security-item-info { flex: 1; }
.cp-security-item-title { font-size: 14.5px; font-weight: 600; color: #222; margin-bottom: 4px; }
.cp-security-item-desc  { font-size: 13px; color: #777; }

/* ── Toggle switch ───────────────────────────────────────────────────────── */
.cp-toggle-wrap {
    background: #fffbec;
    border: 1px solid #f0e0a0;
    border-radius: 5px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.cp-toggle-label { flex: 1; }
.cp-toggle-label strong { display: block; font-size: 13.5px; color: #222; margin-bottom: 3px; }
.cp-toggle-label span { font-size: 13px; color: #666; font-style: italic; }

.cp-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.cp-toggle input { opacity: 0; width: 0; height: 0; }
.cp-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #ccc;
    border-radius: 24px;
    transition: background 0.2s;
}
.cp-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.cp-toggle input:checked + .cp-toggle-slider { background: #f5a623; }
.cp-toggle input:checked + .cp-toggle-slider::before { transform: translateX(20px); }

/* ── Nameserver table ────────────────────────────────────────────────────── */
.cp-ns-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}
.cp-ns-table th {
    background: #e8f5f2;
    color: #2C9B8C;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid #c8e6e0;
}
.cp-ns-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    font-size: 13px;
}
.cp-ns-table tr:last-child td { border-bottom: none; }
.cp-ns-table .col-stt { width: 50px; text-align: center; color: #888; }
.cp-ns-table .col-ns { width: 220px; }
.cp-ns-table .col-ip { }
.cp-ns-table .col-act { width: 80px; text-align: center; }

.cp-ip-block { display: flex; flex-direction: column; gap: 5px; }

/* ── Email forwarding table ──────────────────────────────────────────────── */
.cp-ef-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}
.cp-ef-table th {
    background: #e8f5f2;
    color: #2C9B8C;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid #c8e6e0;
}
.cp-ef-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    vertical-align: middle;
}
.cp-ef-table .col-stt { width: 50px; text-align: center; color: #888; }
.cp-ef-table .col-src { width: 42%; }
.cp-ef-table .col-dst { width: 42%; }
.cp-ef-table .col-act { width: 80px; text-align: center; }

.cp-ef-src-wrap {
    display: flex;
    align-items: center;
    gap: 0;
}
.cp-ef-src-wrap .cp-dns-input { border-radius: 3px 0 0 3px; border-right: none; flex: 1; }
.cp-ef-domain-suffix {
    background: #f0f0f0;
    border: 1px solid #d8d8d8;
    border-radius: 0 3px 3px 0;
    padding: 6px 10px;
    font-size: 13px;
    color: #555;
    white-space: nowrap;
}

/* ── Dashboard zone list ─────────────────────────────────────────────────── */
.cp-zone-table {
    width: 100%;
    border-collapse: collapse;
}
.cp-zone-table th {
    background: #f0faf8;
    color: #2C9B8C;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 2px solid #c8e6e0;
}
.cp-zone-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13.5px;
    vertical-align: middle;
}
.cp-zone-table tr:hover td { background: #fafffe; }

/* ── Link ────────────────────────────────────────────────────────────────── */
.cp-link { color: #2C9B8C; text-decoration: none; font-size: 13px; }
.cp-link:hover { text-decoration: underline; }

/* ── Divider ─────────────────────────────────────────────────────────────── */
.cp-divider { border: none; border-top: 1px solid #eee; margin: 16px 0; }

/* ── Password rules notice ───────────────────────────────────────────────── */
.cp-notice-box {
    background: #fffbec;
    border: 1px solid #f0e0a0;
    border-radius: 4px;
    padding: 12px 16px;
    font-size: 13px;
    color: #5a4500;
    margin-bottom: 20px;
    line-height: 1.6;
}
.cp-notice-box strong { display: block; margin-bottom: 2px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cp-page-body { flex-direction: column; }
    .cp-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #e5e5e5; }
    .cp-sidebar-link { display: inline-block; }
    .cp-dns-table th, .cp-dns-table td { padding: 6px 6px; font-size: 12px; }
    .cp-login-card { padding: 24px 20px; }
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.text-muted { color: #888; font-size: 12px; }
.d-flex { display: flex; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 18px; }
.mb-3 { margin-bottom: 12px; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.w-full { width: 100%; }