/* =========================================================================
   MedSmartForm — hệ thống giao diện quản trị
   Dựng trên Bootstrap 5.3. Nguyên tắc:
     · Màu chỉ dùng để MANG NGHĨA (trạng thái, hành động chính). Nền và khung
       giữ trung tính, nhờ vậy badge trạng thái đập vào mắt ngay.
     · Bề mặt phẳng: viền 1px thay cho bóng đổ. Bóng đổ ở mọi thẻ khiến màn
       hình nhiều dữ liệu trông nhiễu và khó dò theo hàng.
     · Bề rộng đọc có giới hạn. Bảng tràn kín màn hình 27" thì mắt phải quét
       ngang quá xa, dễ đọc nhầm dòng.
     · KHÔNG giấu bớt thông tin. Tối giản ở đây là bớt trang trí, không bớt dữ liệu.
   ========================================================================= */

:root {
    /* Màu thương hiệu Medlatec */
    --msf-brand: #0066B3;
    --msf-brand-dark: #004E88;
    --msf-brand-soft: #EAF3FA;

    /* Thang xám trung tính — nền của toàn bộ giao diện */
    --msf-bg: #F7F8FA;
    --msf-surface: #FFFFFF;
    --msf-border: #E3E7ED;
    --msf-border-strong: #CFD6E0;

    --msf-text: #1B2430;
    --msf-text-muted: #5F6B7C;
    --msf-text-faint: #8A94A3;

    /* Màu ngữ nghĩa, chỉnh trầm hơn bản mặc định của Bootstrap để không chói */
    --msf-danger: #C0392B;
    --msf-warning: #B7791F;
    --msf-success: #1E7E4F;
    --msf-info: #2C7BB6;

    /* Thang khoảng cách — mọi khoảng trắng lấy từ đây, không đặt số lẻ */
    --msf-1: .25rem;
    --msf-2: .5rem;
    --msf-3: .75rem;
    --msf-4: 1rem;
    --msf-5: 1.5rem;
    --msf-6: 2rem;

    --msf-radius: 8px;
    --msf-radius-sm: 5px;

    --msf-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ----- Nền và chữ ----- */

body {
    background: var(--msf-bg);
    color: var(--msf-text);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--msf-text); letter-spacing: -.01em; }

a { color: var(--msf-brand); text-decoration: none; }
a:hover { color: var(--msf-brand-dark); text-decoration: underline; }

code { color: var(--msf-brand-dark); font-family: var(--msf-mono); font-size: .86em; }

.text-muted { color: var(--msf-text-muted) !important; }

/* ----- Khung trang -----
   Giới hạn bề rộng nhưng vẫn rộng rãi cho bảng nhiều cột. */

.msf-shell { max-width: 1440px; margin: 0 auto; padding: 0 var(--msf-5); }

@media (max-width: 768px) {
    .msf-shell { padding: 0 var(--msf-4); }
}

/* ----- Thanh điều hướng -----
   Nền sáng thay vì xanh đậm: thanh màu lớn hút hết sự chú ý khỏi nội dung,
   trong khi thứ người dùng cần nhìn là dữ liệu bên dưới. */

.msf-navbar {
    background: var(--msf-surface);
    border-bottom: 1px solid var(--msf-border);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.msf-navbar .navbar-brand { padding: 0; margin: 0; }
.brand-logo { height: 30px; width: auto; display: block; }

.msf-navbar .nav-link {
    color: var(--msf-text-muted);
    font-weight: 500;
    padding: var(--msf-4) var(--msf-3);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.msf-navbar .nav-link:hover { color: var(--msf-text); }

/* Trang đang mở được gạch chân — nhìn là biết mình đang ở đâu, không phải đoán. */
.msf-navbar .nav-link.active {
    color: var(--msf-brand);
    border-bottom-color: var(--msf-brand);
}

.msf-navbar .dropdown-menu {
    border: 1px solid var(--msf-border);
    border-radius: var(--msf-radius-sm);
    box-shadow: 0 6px 20px rgba(27, 36, 48, .10);
    font-size: 14px;
}

.msf-user { color: var(--msf-text-faint); font-size: .82rem; }

/* ----- Tiêu đề trang ----- */

.msf-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--msf-3);
    flex-wrap: wrap;
    padding: var(--msf-5) 0 var(--msf-4);
}

.msf-page-head h1 {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
}

.msf-page-head .msf-page-sub {
    color: var(--msf-text-muted);
    font-size: .85rem;
    margin-top: var(--msf-1);
}

.msf-page-actions { display: flex; gap: var(--msf-2); flex-wrap: wrap; }

/* ----- Thẻ ----- */

.card {
    background: var(--msf-surface);
    border: 1px solid var(--msf-border) !important;
    border-radius: var(--msf-radius);
    box-shadow: none !important;
}

.card-body { padding: var(--msf-4) var(--msf-5); }

.card h2, .card h3 {
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--msf-text-muted);
    margin-bottom: var(--msf-3);
}

/* ----- Ô số liệu ----- */

.msf-stat {
    background: var(--msf-surface);
    border: 1px solid var(--msf-border);
    border-radius: var(--msf-radius);
    padding: var(--msf-3) var(--msf-4);
    height: 100%;
    display: block;
    text-decoration: none;
    transition: border-color .12s;
}

a.msf-stat:hover { border-color: var(--msf-border-strong); text-decoration: none; }

.msf-stat-label {
    color: var(--msf-text-muted);
    font-size: .78rem;
    font-weight: 500;
}

.msf-stat-value {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.msf-stat.is-selected { border-color: var(--msf-brand); background: var(--msf-brand-soft); }
.msf-stat-value.is-alert { color: var(--msf-danger); }

/* ----- Bảng -----
   Gọn hơn nhưng vẫn thoáng: nhiều dữ liệu trên một màn hình đồng nghĩa với
   ít lần cuộn và ít lần mất dấu dòng đang đọc. */

.table { margin-bottom: 0; color: var(--msf-text); }

.table > thead > tr > th {
    background: #FAFBFC;
    border-bottom: 1px solid var(--msf-border) !important;
    color: var(--msf-text-muted);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: var(--msf-3) var(--msf-4);
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: var(--msf-3) var(--msf-4);
    border-bottom: 1px solid var(--msf-border);
    vertical-align: middle;
}

.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { background: #FAFBFC; }

/* Cột số căn phải và dùng chữ số đều bề rộng để so sánh theo chiều dọc được. */
.msf-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.msf-table-card { overflow: hidden; }
.msf-table-card .table-responsive { border-radius: 0; }

.msf-table-foot {
    padding: var(--msf-3) var(--msf-4);
    border-top: 1px solid var(--msf-border);
    color: var(--msf-text-muted);
    font-size: .82rem;
    background: #FAFBFC;
}

/* ----- Nhãn trạng thái -----
   Nền nhạt + chữ đậm màu: dễ đọc hơn nền đặc, và không biến bảng thành cầu vồng. */

.badge {
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .01em;
    padding: .3em .6em;
    border-radius: var(--msf-radius-sm);
}

.text-bg-success { color: var(--msf-success) !important; background: #E7F4ED !important; }
.text-bg-danger { color: var(--msf-danger) !important; background: #FBEBE9 !important; }
.text-bg-warning { color: var(--msf-warning) !important; background: #FDF3E2 !important; }
.text-bg-info { color: var(--msf-info) !important; background: #E8F2F9 !important; }
.text-bg-secondary { color: var(--msf-text-muted) !important; background: #EEF0F4 !important; }
.text-bg-primary { color: var(--msf-brand) !important; background: var(--msf-brand-soft) !important; }
.text-bg-light { color: var(--msf-text-muted) !important; background: #F2F4F7 !important; }
.text-bg-dark { color: #fff !important; background: #2C3542 !important; }

/* ----- Nút ----- */

.btn { font-weight: 500; border-radius: var(--msf-radius-sm); }
.btn-sm { font-size: .82rem; padding: .32rem .7rem; }

.btn-primary { background: var(--msf-brand); border-color: var(--msf-brand); }
.btn-primary:hover, .btn-primary:focus {
    background: var(--msf-brand-dark);
    border-color: var(--msf-brand-dark);
}

.btn-outline-primary { color: var(--msf-brand); border-color: var(--msf-border-strong); }
.btn-outline-primary:hover { background: var(--msf-brand); border-color: var(--msf-brand); }

.btn-outline-secondary { color: var(--msf-text-muted); border-color: var(--msf-border-strong); }
.btn-outline-secondary:hover { background: #EEF0F4; color: var(--msf-text); border-color: var(--msf-border-strong); }

.btn-outline-danger { color: var(--msf-danger); border-color: #E8C4BF; }
.btn-outline-danger:hover { background: var(--msf-danger); border-color: var(--msf-danger); }

/* ----- Ô nhập ----- */

.form-label { font-size: .78rem; font-weight: 500; color: var(--msf-text-muted); margin-bottom: var(--msf-1); }
.form-text { font-size: .78rem; color: var(--msf-text-faint); }

.form-control, .form-select {
    border-color: var(--msf-border-strong);
    border-radius: var(--msf-radius-sm);
    color: var(--msf-text);
}

.form-control:focus, .form-select:focus {
    border-color: var(--msf-brand);
    box-shadow: 0 0 0 3px rgba(0, 102, 179, .12);
}

.form-control::placeholder { color: var(--msf-text-faint); }

/* ----- Thông báo ----- */

.alert { border-radius: var(--msf-radius); border-width: 1px; font-size: .88rem; padding: var(--msf-3) var(--msf-4); }
.alert-success { background: #E7F4ED; border-color: #BFE0CE; color: #12603A; }
.alert-danger { background: #FBEBE9; border-color: #EFC9C3; color: #90291C; }
.alert-warning { background: #FDF3E2; border-color: #EEDCB6; color: #8A5A11; }
.alert-info { background: var(--msf-brand-soft); border-color: #BDD9EE; color: var(--msf-brand-dark); }

/* ----- Khối mã và JSON ----- */

.json-block {
    background: #1B2430;
    color: #A8E6A3;
    font: 12px/1.65 var(--msf-mono);
    padding: var(--msf-3) var(--msf-4);
    border-radius: var(--msf-radius-sm);
    overflow: auto;
    max-height: 22rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.embed-snippet {
    background: #1B2430;
    color: #E6EDF3;
    font: 13px/1.7 var(--msf-mono);
    padding: var(--msf-4);
    border-radius: var(--msf-radius-sm);
    white-space: pre-wrap;
    word-break: break-all;
}

/* ----- Trình khai báo trường ----- */

.designer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: var(--msf-4);
    align-items: start;
}

@media (max-width: 1200px) {
    .designer-grid { grid-template-columns: minmax(0, 1fr); }
}

.field-card {
    background: var(--msf-surface);
    border: 1px solid var(--msf-border);
    border-left: 3px solid var(--msf-brand);
    border-radius: var(--msf-radius-sm);
    padding: var(--msf-3) var(--msf-4);
    margin-bottom: var(--msf-2);
}

.field-card.presentation { border-left-color: var(--msf-border-strong); background: #FAFBFC; }
.field-card.conditional { border-left-color: var(--msf-warning); }

.field-card .field-key { font-family: var(--msf-mono); font-size: .76rem; color: var(--msf-text-faint); }
.field-card .badge { font-weight: 500; }
.field-actions { white-space: nowrap; }

.preview-pane {
    position: sticky;
    top: 4.5rem;
    background: var(--msf-surface);
    border: 1px solid var(--msf-border);
    border-radius: var(--msf-radius);
    padding: var(--msf-4);
}

.lint-issue { font-size: .84rem; padding: var(--msf-1) 0; border-bottom: 1px solid var(--msf-border); }
.lint-issue:last-child { border-bottom: 0; }

/* ----- Bảng ánh xạ trực quan ----- */

.mapping-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: var(--msf-4);
    align-items: start;
}

@media (max-width: 900px) {
    .mapping-board { grid-template-columns: minmax(0, 1fr); }
}

.mapping-col-head {
    font-size: .74rem;
    font-weight: 600;
    color: var(--msf-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: var(--msf-2);
}

.map-source {
    border: 1px solid var(--msf-border);
    border-left: 3px solid var(--msf-brand);
    border-radius: var(--msf-radius-sm);
    background: var(--msf-surface);
    padding: var(--msf-2) var(--msf-3);
    margin-bottom: var(--msf-2);
    cursor: grab;
    user-select: none;
}

.map-source:active { cursor: grabbing; }
.map-source.used { opacity: .55; border-left-color: var(--msf-border-strong); }

.map-source.picked {
    border-color: var(--msf-brand);
    box-shadow: 0 0 0 3px rgba(0, 102, 179, .14);
}

.map-source .map-source-key { font-family: var(--msf-mono); font-size: .72rem; color: var(--msf-text-faint); }

.map-target {
    border: 1px dashed var(--msf-border-strong);
    border-radius: var(--msf-radius-sm);
    background: #FAFBFC;
    padding: var(--msf-2) var(--msf-3);
    margin-bottom: var(--msf-2);
}

.map-target.required { border-color: #E8C4BF; background: #FEF8F7; }
.map-target.filled { border-style: solid; border-color: #BFE0CE; background: #F5FBF8; }

.map-target.drop-hover {
    border-color: var(--msf-brand);
    background: var(--msf-brand-soft);
    box-shadow: 0 0 0 3px rgba(0, 102, 179, .12);
}

.map-target-name { font-family: var(--msf-mono); font-size: .8rem; font-weight: 600; }

.map-linked {
    display: inline-flex;
    align-items: center;
    gap: var(--msf-1);
    background: var(--msf-brand);
    color: #fff;
    border-radius: var(--msf-radius-sm);
    padding: .1rem .4rem;
    font-size: .75rem;
    margin-top: var(--msf-1);
}

.map-linked button { border: 0; background: transparent; color: #fff; line-height: 1; padding: 0 .1rem; cursor: pointer; }

/* ----- Danh sách dữ liệu ----- */

.masked { font-family: var(--msf-mono); letter-spacing: .02em; }

.submission-preview {
    font-size: .82rem;
    color: var(--msf-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--msf-1) var(--msf-4);
}

.consent-box {
    background: #FAFBFC;
    border: 1px solid var(--msf-border);
    border-radius: var(--msf-radius-sm);
    padding: var(--msf-4);
}

.consent-text {
    white-space: pre-wrap;
    font-size: .84rem;
    color: var(--msf-text-muted);
    max-height: 15rem;
    overflow: auto;
}

/* ----- Biểu đồ cột dựng bằng CSS thuần ----- */

.chart-bars { display: flex; align-items: flex-end; gap: 2px; height: 150px; padding-top: var(--msf-2); }
.chart-bar { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 2px; }

.chart-bar-fill {
    width: 100%;
    background: var(--msf-brand);
    border-radius: 2px 2px 0 0;
    transition: background .12s;
}

.chart-bar:hover .chart-bar-fill { background: #37A0DC; }

/* ----- Chân trang ----- */

.msf-footer {
    border-top: 1px solid var(--msf-border);
    color: var(--msf-text-faint);
    font-size: .8rem;
    padding: var(--msf-4) 0;
    margin-top: var(--msf-6);
}

/* ----- Đăng nhập -----
   Trang duy nhất không có thanh điều hướng, nên khung đăng nhập cần tự đứng
   được giữa nền xám. */

.msf-login {
    box-shadow: 0 1px 2px rgba(27, 36, 48, .06), 0 8px 24px rgba(27, 36, 48, .06) !important;
}

.login-logo { height: 34px; }

/* ----- Biểu tượng -----
   Kích thước bám theo cỡ chữ của phần tử chứa nó, nên nút nhỏ có biểu tượng nhỏ
   mà không cần khai báo riêng. Biểu tượng luôn đi kèm nhãn chữ — nó làm nhanh
   việc nhận diện, không thay thế thông tin. */

.msf-ico {
    width: 1.05em;
    height: 1.05em;
    vertical-align: -.16em;
    flex: none;
    pointer-events: none;
}

.btn .msf-ico { margin-right: .34em; }
.btn .msf-ico:only-child { margin-right: 0; }

.navbar .nav-link .msf-ico { margin-right: .4em; opacity: .65; }
.navbar .nav-link.active .msf-ico { opacity: 1; }

.dropdown-item .msf-ico { margin-right: .5em; opacity: .6; }

/* ----- Cột thao tác trong bảng -----
   Các nút phải nằm trên một hàng: xuống dòng làm chiều cao hàng nhảy lung tung
   và mắt phải dò lại từ đầu mỗi dòng. */

td.msf-actions,
th.msf-actions { white-space: nowrap; width: 1%; }

td.msf-actions .btn { margin-left: var(--msf-1); }
td.msf-actions .btn:first-child { margin-left: 0; }
td.msf-actions form { display: inline-block; margin-left: var(--msf-1); }

/* Nút trong bảng gọn hơn một chút để ba nút vẫn đủ chỗ trên màn hình 1366px. */
td.msf-actions .btn-sm {
    padding: .22rem .5rem;
    font-size: .78rem;
}

/* ----- Bảng chia cột cố định -----
   Với table-layout tự động, một ô mô tả dài sẽ giành hết chỗ và đẩy cột thao tác
   ra ngoài khung — nút cuối cùng bị cắt mất mà macOS lại ẩn thanh cuộn nên không
   có dấu hiệu nào cho người dùng. Chia cột cố định để cột thao tác luôn đủ chỗ,
   phần mô tả tự cắt bớt theo bề rộng còn lại. */

.msf-table-fixed {
    table-layout: fixed;
    width: 100%;
    min-width: 66rem;      /* hẹp hơn mức này thì cuộn ngang, không bóp méo cột */
}

.msf-break { overflow-wrap: anywhere; }

/* Thanh cuộn ngang luôn nhìn thấy được khi bảng thực sự rộng hơn khung. */
.table-responsive { scrollbar-width: thin; scrollbar-color: var(--msf-border-strong) transparent; }
.table-responsive::-webkit-scrollbar { height: 8px; }
.table-responsive::-webkit-scrollbar-track { background: transparent; }
.table-responsive::-webkit-scrollbar-thumb {
    background: var(--msf-border-strong);
    border-radius: 4px;
}