/* eContract UI — "diện mạo" dùng chung: màu, font, bo góc, bóng đổ.
   (Layout / khoảng cách / responsive nằm ở style.css) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ========================================================= */
/* 0. TOKENS — nguồn duy nhất cho màu, font, kích thước      */
/* ========================================================= */
:root {
    /* Nền & chữ */
    --ec-bg: #f1f5f9;
    --ec-surface: #ffffff;
    --ec-surface-muted: #f8fafc;
    --ec-ink: #0f172a;
    --ec-ink-soft: #334155;
    --ec-ink-muted: #64748b;
    --ec-line: #e2e8f0;
    --ec-line-strong: #cbd5e1;

    /* Màu thương hiệu & trạng thái */
    --ec-primary: #2563eb;
    --ec-primary-hover: #1d4ed8;
    --ec-primary-active: #1e40af;
    --ec-primary-soft: #eff6ff;
    --ec-primary-ring: rgba(37, 99, 235, 0.25);

    --ec-success: #059669;
    --ec-success-hover: #047857;
    --ec-success-soft: #ecfdf5;

    --ec-danger: #dc2626;
    --ec-danger-hover: #b91c1c;
    --ec-danger-soft: #fef2f2;

    --ec-warning: #d97706;
    --ec-warning-hover: #b45309;
    --ec-warning-soft: #fffbeb;
    --ec-warning-solid: #f59e0b; /* nền nút warning (chữ tối cho dễ đọc) */

    --ec-info: #0891b2;
    --ec-info-hover: #0e7490;
    --ec-info-soft: #ecfeff;

    --ec-secondary: #475569;
    --ec-secondary-hover: #334155;

    /* Font */
    --ec-font: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    --fs-xs: 0.75rem;      /* 12px: tiêu đề bảng, badge */
    --fs-sm: 0.8125rem;    /* 13px: bảng, label, dropdown */
    --fs-base: 0.875rem;   /* 14px: nội dung, nút, input */
    --fs-lg: 1rem;         /* 16px: tiêu đề navbar */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Bo góc & bóng */
    --ec-radius-sm: 8px;   /* nút, input, item menu */
    --ec-radius: 10px;     /* card, dropdown */
    --ec-radius-lg: 14px;  /* modal */
    --ec-radius-pill: 999px;
    --ec-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.04);
    --ec-dur: 0.22s;
    --ec-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Layout dùng chung */
    --ec-header-h: 56px;   /* navbar và sidebar-heading cùng chiều cao */
    --ec-sidebar-w: 250px;

    /* Alias cũ — giữ để HTML/JS cũ không vỡ */
    --brand-dark: var(--ec-ink);
    --brand-primary: var(--ec-primary);
    --corporate-blue: var(--ec-primary);
    --primary-color: var(--ec-primary);
    --text-muted: var(--ec-ink-muted);
    --sidebar-bg: var(--ec-surface);
    --font-size-base: var(--fs-base);
    --font-size-small: var(--fs-sm);
    --font-color-dark: var(--ec-ink);
}

/* ========================================================= */
/* 1. BASE & FONT                                            */
/* ========================================================= */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--ec-bg);
    color: var(--ec-ink);
    font-family: var(--ec-font);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--fw-semibold);
    color: var(--ec-ink);
}

#wrapper,
#page-content-wrapper {
    background-color: var(--ec-bg);
}

/* ========================================================= */
/* 2. HEADER — mọi loại header cùng một kiểu                 */
/*    nền trắng · chữ ink · đậm 600 · viền dưới --ec-line    */
/* ========================================================= */
.navbar {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ec-line) !important;
    min-height: var(--ec-header-h);
}

.navbar h5 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--ec-ink);
}

/* Logo sidebar: cùng chiều cao + cùng đường viền với navbar để hai thanh thẳng hàng */
.sidebar-heading {
    background-color: var(--ec-surface);
    border-bottom: 1px solid var(--ec-line);
    min-height: var(--ec-header-h);
}

.card-header,
.card-header-main,
.modal-header {
    background: var(--ec-surface) !important;
    color: var(--ec-ink) !important;
    border-bottom: 1px solid var(--ec-line) !important;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold) !important;
}

.modal-title {
    font-weight: var(--fw-semibold);
    color: var(--ec-ink);
}

/* Header của card theo trạng thái */
.card-header-main.bg-success {
    background: var(--ec-success-soft) !important;
    color: var(--ec-success-hover) !important;
}
.card-header-main.bg-info {
    background: var(--ec-info-soft) !important;
    color: var(--ec-info-hover) !important;
}

/* Thanh hành động cố định */
#actionHeader {
    background: var(--ec-surface);
    border-bottom: 1px solid var(--ec-line);
}

/* Header bảng */
.table thead th {
    background: var(--ec-surface-muted) !important;
    color: var(--ec-secondary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ec-line);
    white-space: nowrap;
}

/* ========================================================= */
/* 3. BUTTON — màu, trạng thái, focus                        */
/* ========================================================= */
.btn {
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.01em;
    border-radius: var(--ec-radius-sm);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    transition:
        background-color var(--ec-dur) var(--ec-ease),
        border-color var(--ec-dur) var(--ec-ease),
        color var(--ec-dur) var(--ec-ease),
        box-shadow var(--ec-dur) var(--ec-ease),
        transform var(--ec-dur) var(--ec-ease);
}

.btn-sm {
    font-size: var(--fs-sm);
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn:active:not(:disabled) {
    transform: translateY(0);
}

.btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--ec-primary-ring);
}

.btn:disabled,
.btn.disabled {
    opacity: 0.55;
    box-shadow: none;
}

/* Bảng màu từng loại nút: b = nền, bh = hover, ba = active, bt = màu chữ */
.btn-primary   { --ec-b: var(--ec-primary);       --ec-bh: var(--ec-primary-hover);   --ec-ba: var(--ec-primary-active); }
.btn-success   { --ec-b: var(--ec-success);       --ec-bh: var(--ec-success-hover);   --ec-ba: var(--ec-success-hover); }
.btn-danger    { --ec-b: var(--ec-danger);        --ec-bh: var(--ec-danger-hover);    --ec-ba: var(--ec-danger-hover); }
.btn-info      { --ec-b: var(--ec-info);          --ec-bh: var(--ec-info-hover);      --ec-ba: var(--ec-info-hover); }
.btn-secondary { --ec-b: var(--ec-secondary);     --ec-bh: var(--ec-secondary-hover); --ec-ba: var(--ec-secondary-hover); }
.btn-warning   { --ec-b: var(--ec-warning-solid); --ec-bh: var(--ec-warning);         --ec-ba: var(--ec-warning); --ec-bt: #1c1917; }

.btn-primary, .btn-success, .btn-danger, .btn-info, .btn-secondary, .btn-warning {
    --bs-btn-bg: var(--ec-b);
    --bs-btn-border-color: var(--ec-b);
    --bs-btn-color: var(--ec-bt, #fff);
    --bs-btn-hover-bg: var(--ec-bh);
    --bs-btn-hover-border-color: var(--ec-bh);
    --bs-btn-hover-color: var(--ec-bt, #fff);
    --bs-btn-active-bg: var(--ec-ba);
    --bs-btn-active-border-color: var(--ec-ba);
    --bs-btn-active-color: var(--ec-bt, #fff);
    background-color: var(--ec-b);
    border-color: var(--ec-b);
    color: var(--ec-bt, #fff);
}

.btn-primary:hover, .btn-success:hover, .btn-danger:hover, .btn-info:hover, .btn-secondary:hover, .btn-warning:hover,
.btn-primary:focus, .btn-success:focus, .btn-danger:focus, .btn-info:focus, .btn-secondary:focus, .btn-warning:focus {
    background-color: var(--ec-bh);
    border-color: var(--ec-bh);
    color: var(--ec-bt, #fff);
}

.btn-primary:active, .btn-success:active, .btn-danger:active, .btn-info:active, .btn-secondary:active, .btn-warning:active {
    background-color: var(--ec-ba) !important;
    border-color: var(--ec-ba) !important;
    color: var(--ec-bt, #fff) !important;
}

/* Outline: viền + chữ cùng màu, hover tô nền nhạt */
.btn-outline-primary { --ec-o: var(--ec-primary); --ec-oh: var(--ec-primary-hover); --ec-os: var(--ec-primary-soft); }
.btn-outline-success { --ec-o: var(--ec-success); --ec-oh: var(--ec-success-hover); --ec-os: var(--ec-success-soft); }
.btn-outline-danger  { --ec-o: var(--ec-danger);  --ec-oh: var(--ec-danger-hover);  --ec-os: var(--ec-danger-soft); }

.btn-outline-primary, .btn-outline-success, .btn-outline-danger {
    background: transparent;
    border-color: var(--ec-o);
    color: var(--ec-o);
    box-shadow: none;
}

.btn-outline-primary:hover, .btn-outline-success:hover, .btn-outline-danger:hover,
.btn-outline-primary:active, .btn-outline-success:active, .btn-outline-danger:active {
    background-color: var(--ec-os) !important;
    border-color: var(--ec-oh) !important;
    color: var(--ec-oh) !important;
}

/* Nút phụ (Hủy, Đặt lại...) */
.btn-light,
.btn-outline-secondary {
    background-color: #f1f5f9;
    border-color: var(--ec-line-strong);
    color: var(--ec-secondary);
}
.btn-light:hover,
.btn-outline-secondary:hover {
    background-color: var(--ec-line);
    border-color: #94a3b8;
    color: var(--ec-ink);
}

/* Trạng thái loading */
.btn-loading,
.btn.loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after,
.btn.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ec-spin 0.7s linear infinite;
}

@keyframes ec-spin {
    to { transform: rotate(360deg); }
}

/* ========================================================= */
/* 4. CARD, FORM, BẢNG, BADGE                                */
/* ========================================================= */
.card {
    background: var(--ec-surface);
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-radius);
    box-shadow: var(--ec-shadow);
    font-size: var(--fs-base);
}

/* Metric cards */
.optimized-card .card-title-optimized {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
}

.optimized-card .card-value-optimized {
    font-weight: var(--fw-bold);
    color: var(--ec-primary);
}

.optimized-card.bg-primary,
.card.bg-primary {
    background: linear-gradient(180deg, var(--ec-primary) 0%, var(--ec-primary-hover) 100%) !important;
}
.optimized-card.bg-warning { background: var(--ec-warning-soft) !important; color: var(--ec-warning) !important; }
.optimized-card.bg-success { background: var(--ec-success-soft) !important; color: var(--ec-success) !important; }
.optimized-card.bg-danger  { background: var(--ec-danger-soft) !important;  color: var(--ec-danger) !important; }

/* Form */
.form-control,
.form-select,
.select2-container .select2-selection--single {
    font-family: inherit;
    font-size: var(--fs-base);
    border-color: var(--ec-line);
    border-radius: var(--ec-radius-sm);
    transition: border-color var(--ec-dur) var(--ec-ease), box-shadow var(--ec-dur) var(--ec-ease);
}

.form-control-sm,
.form-select-sm {
    font-size: var(--fs-sm);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ec-primary);
    box-shadow: 0 0 0 3px var(--ec-primary-ring);
}

.form-control::placeholder {
    color: #94a3b8;
    font-style: italic;
    opacity: 1;
}

.form-label {
    color: var(--ec-secondary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

/* Bảng */
.table {
    color: var(--ec-ink);
    font-size: var(--fs-sm);
}

.table tbody tr {
    transition: background-color var(--ec-dur) var(--ec-ease);
}

.table-hover tbody tr:hover {
    background-color: var(--ec-surface-muted);
}

/* Badge: bo tròn, cùng cỡ chữ ở mọi nơi */
.badge {
    font-size: 0.7rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
    line-height: 1;
    border-radius: var(--ec-radius-pill);
}

.badge-success-toned { background-color: var(--ec-success-soft) !important; color: var(--ec-success-hover) !important; }
.badge-warning-toned { background-color: var(--ec-warning-soft) !important; color: var(--ec-warning-hover) !important; }
.badge-info-toned    { background-color: var(--ec-info-soft) !important;    color: var(--ec-info-hover) !important; }
.bg-success-soft     { background-color: var(--ec-success-soft); }

.text-success { color: var(--ec-success) !important; }
.text-danger  { color: var(--ec-danger) !important; }

.text-dark-contrast {
    color: var(--ec-ink) !important;
    font-weight: var(--fw-semibold) !important;
}

/* List group (nội dung chính) */
.list-group-item {
    background-color: var(--ec-surface);
    border-color: var(--ec-line);
    font-size: var(--fs-base);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--ec-surface-muted);
    color: var(--ec-ink);
    text-decoration: none;
}

.list-group-item.list-group-item-success { background-color: var(--ec-success-soft); color: var(--ec-success-hover); font-weight: var(--fw-medium); }
.list-group-item.list-group-item-warning { background-color: var(--ec-warning-soft); color: var(--ec-warning-hover); font-weight: var(--fw-medium); }
.list-group-item.list-group-item-danger  { background-color: var(--ec-danger-soft);  color: var(--ec-danger-hover);  font-weight: var(--fw-medium); }

.dynamic-field-group {
    background-color: var(--ec-surface);
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-radius-sm);
}

/* ========================================================= */
/* 5. MODAL, DROPDOWN, TOAST                                 */
/* ========================================================= */
.modal.fade .modal-dialog {
    transform: translateY(10px);
    transition: transform 0.24s var(--ec-ease);
}

.modal.show .modal-dialog {
    transform: none;
}

.modal-content {
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-radius-lg);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}

.modal-footer {
    border-color: var(--ec-line);
}

.dropdown-menu {
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-radius);
    box-shadow: var(--ec-shadow);
    padding: 0.4rem;
    animation: ec-dropdown 0.18s var(--ec-ease);
}

.dropdown-item {
    border-radius: 7px;
    font-size: var(--fs-sm);
    transition: background-color var(--ec-dur) var(--ec-ease), color var(--ec-dur) var(--ec-ease);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--ec-primary-soft);
    color: var(--ec-primary);
}

.toast {
    border: 0;
    border-radius: var(--ec-radius);
    box-shadow: var(--ec-shadow);
    animation: ec-fade-in 0.22s var(--ec-ease);
}

.toast.bg-info .toast-body,
.toast.bg-success .toast-body,
.toast.bg-danger .toast-body {
    color: #fff;
}

/* ========================================================= */
/* 6. SIDEBAR — màu & font (kích thước/khoảng cách ở style.css) */
/* ========================================================= */
#sidebar-wrapper {
    background: var(--ec-surface);
    border-right: 1px solid var(--ec-line);
}

#sidebar-wrapper .list-group-item {
    background: transparent;
    color: var(--ec-ink-soft);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    border-radius: var(--ec-radius-sm);
    transition:
        background-color var(--ec-dur) var(--ec-ease),
        color var(--ec-dur) var(--ec-ease),
        transform var(--ec-dur) var(--ec-ease);
}

#sidebar-wrapper .list-group-item i {
    color: var(--ec-ink-muted);
    opacity: 0.8;
}

#sidebar-wrapper .list-group-item:hover {
    background-color: var(--ec-primary-soft);
    color: var(--ec-primary);
    transform: translateX(2px);
}

#sidebar-wrapper .list-group-item:hover i {
    color: var(--ec-primary);
}

#sidebar-wrapper .list-group-item.active {
    background: var(--ec-primary) !important;
    color: #fff !important;
    font-weight: var(--fw-semibold);
    box-shadow: none;
}

#sidebar-wrapper .list-group-item.active i {
    color: #fff !important;
    opacity: 1;
}

/* ========================================================= */
/* 7. HIỆU ỨNG & SCROLLBAR                                   */
/* ========================================================= */
@keyframes ec-dropdown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

@keyframes ec-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.container-fluid.py-3,
.main-layout,
#contract-section,
.card {
    animation: ec-fade-in 0.26s var(--ec-ease);
}

#step-send-otp,
#step-verify-otp,
.signing-step,
.wizard-step,
.step-pane {
    animation: ec-fade-in 0.24s var(--ec-ease);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--ec-line-strong);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

@media (max-width: 767.98px) {
    .btn:hover:not(:disabled),
    #sidebar-wrapper .list-group-item:hover {
        transform: none;
    }
}