/* =====================================================================
   nhip-skin.css — Bộ giao diện «Nhịp» (tách hẳn Velzon về mặt hình ảnh)
   ---------------------------------------------------------------------
   Khác với nhip-theme.css (chỉ remap biến --vz-*, dễ sót chỗ màu cứng),
   file này ĐÈ TRỰC TIẾP lên class thật của Velzon / Bootstrap / Grid.js
   với đủ độ ưu tiên để thắng — kể cả theme mermaid hard-code màu sáng.

   GIỮ NGUYÊN 100% JS + tính năng (Grid.js, FullCalendar, Checkin v2,
   Planning, form…). Chỉ thay lớp hình ảnh bằng CSS.

   Nạp SAU tất cả CSS Velzon trong base template. Vẫn remap --vz-* để
   những component chưa override riêng cũng ăn token đúng.
   ===================================================================== */

/* =====================================================================
   0) TOKEN «Nhịp»
   ===================================================================== */
:root,
:root[data-bs-theme="light"]{
  --n-page:#F5F4F0; --n-surface:#FFFFFF; --n-surface-2:#FBFAF7; --n-surface-3:#F3F1EC;
  --n-ink:#191A1E; --n-ink-2:#5B5C63; --n-ink-3:#8C8D94;
  --n-line:rgba(25,26,30,.10); --n-line-soft:rgba(25,26,30,.06);
  --n-accent:#F97316; --n-accent-ink:#C2410C; --n-on-accent:#FFFFFF; --n-accent-soft:rgba(249,115,22,.10);
  --n-ok:#0CA30C; --n-ok-ink:#006300; --n-ok-soft:rgba(12,163,12,.10);
  --n-warn:#B97D07; --n-warn-ink:#8a5c00; --n-warn-soft:rgba(250,178,25,.16);
  --n-crit:#D03B3B; --n-crit-ink:#a52a2a; --n-crit-soft:rgba(208,59,59,.10);
  --n-info:#2a78d6; --n-info-ink:#1c5cab; --n-info-soft:rgba(42,120,214,.10);
  --n-s-call:#1baf7a;  --n-s-call-soft:rgba(27,175,122,.12);
  --n-s-video:#eda100; --n-s-video-soft:rgba(237,161,0,.16);
  --n-s-off:#2a78d6;   --n-s-off-soft:rgba(42,120,214,.12);
  --n-grid:#E5E4DD;
  --n-shadow:0 1px 2px rgba(25,26,30,.05),0 8px 24px -12px rgba(25,26,30,.12);
  --n-shadow-sm:0 1px 2px rgba(25,26,30,.06);
  --n-rail:#1D2026; --n-rail-2:#16181D; --n-rail-ink:#A9ABB4; --n-rail-active:#FFFFFF;
  --n-radius:12px; --n-radius-sm:9px; --n-radius-lg:16px;
  --n-focus:0 0 0 3px var(--n-accent-soft);
}
:root[data-bs-theme="dark"]{
  --n-page:#121418; --n-surface:#1D2026; --n-surface-2:#23262D; --n-surface-3:#282C34;
  --n-ink:#F3F2EE; --n-ink-2:#A8AAB1; --n-ink-3:#787A82;
  --n-line:rgba(255,255,255,.10); --n-line-soft:rgba(255,255,255,.06);
  --n-accent:#FB8C34; --n-accent-ink:#FB923C; --n-on-accent:#1B120A; --n-accent-soft:rgba(251,140,52,.14);
  --n-ok:#2FB84F; --n-ok-ink:#3FCB5F; --n-ok-soft:rgba(47,184,79,.14);
  --n-warn:#FAB219; --n-warn-ink:#FAB219; --n-warn-soft:rgba(250,178,25,.12);
  --n-crit:#E05252; --n-crit-ink:#E05252; --n-crit-soft:rgba(224,82,82,.14);
  --n-info:#3987e5; --n-info-ink:#6da7ec; --n-info-soft:rgba(57,135,229,.14);
  --n-s-call:#199e70;  --n-s-call-soft:rgba(25,158,112,.18);
  --n-s-video:#c98500; --n-s-video-soft:rgba(201,133,0,.18);
  --n-s-off:#3987e5;   --n-s-off-soft:rgba(57,135,229,.18);
  --n-grid:#2C2F36;
  --n-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.5);
  --n-shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --n-rail:#16181D; --n-rail-2:#101216; --n-rail-ink:#8E9099; --n-rail-active:#FFFFFF;
}

/* =====================================================================
   1) REMAP --vz-* (để component chưa override riêng vẫn ăn token)
   ===================================================================== */
:root,:root[data-bs-theme="light"]{
  --vz-font-sans-serif:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --vz-border-radius:var(--n-radius-sm); --vz-border-radius-sm:7px;
  --vz-border-radius-lg:var(--n-radius); --vz-border-radius-xl:var(--n-radius-lg);
  --vz-body-bg:var(--n-page); --vz-body-color:var(--n-ink); --vz-body-color-rgb:25,26,30;
  --vz-heading-color:var(--n-ink); --vz-secondary-color:var(--n-ink-2); --vz-border-color:var(--n-line);
  --vz-primary:var(--n-accent); --vz-primary-rgb:249,115,22;
  --vz-link-color:var(--n-accent-ink); --vz-link-hover-color:var(--n-accent);
  --vz-success:var(--n-ok); --vz-success-rgb:12,163,12;
  --vz-danger:var(--n-crit); --vz-danger-rgb:208,59,59;
  --vz-warning:#eda100; --vz-warning-rgb:237,161,0;
  --vz-info:var(--n-info); --vz-info-rgb:42,120,214;
  --vz-secondary:var(--n-ink-2); --vz-secondary-rgb:91,92,99;
  --vz-card-bg:var(--n-surface); --vz-dropdown-bg:var(--n-surface);
}
:root[data-bs-theme="dark"]{
  --vz-body-bg:var(--n-page); --vz-body-color:var(--n-ink); --vz-body-color-rgb:243,242,238;
  --vz-heading-color:var(--n-ink); --vz-secondary-color:var(--n-ink-2); --vz-border-color:var(--n-line);
  --vz-primary:var(--n-accent); --vz-primary-rgb:251,140,52;
  --vz-link-color:var(--n-accent-ink); --vz-link-hover-color:var(--n-accent);
  --vz-success:var(--n-ok); --vz-success-rgb:47,184,79;
  --vz-danger:var(--n-crit); --vz-danger-rgb:224,82,82;
  --vz-warning:var(--n-warn); --vz-warning-rgb:250,178,25;
  --vz-info:var(--n-info); --vz-info-rgb:57,135,229;
  --vz-secondary:var(--n-ink-2); --vz-secondary-rgb:168,170,177;
  --vz-card-bg:var(--n-surface); --vz-dropdown-bg:var(--n-surface);
}

/* =====================================================================
   2) NỀN + TYPOGRAPHY
   ===================================================================== */
body{
  font-family:var(--vz-font-sans-serif) !important;
  background-color:var(--n-page) !important;
  color:var(--n-ink) !important;
  -webkit-font-smoothing:antialiased; letter-spacing:-.003em;
}
#layout-wrapper,.main-content,.page-content{ background-color:var(--n-page); }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.card-title{
  font-family:var(--vz-font-sans-serif); color:var(--n-ink);
}
h1,h2,h3,.h1,.h2,.h3{ letter-spacing:-.01em; }
.text-muted{ color:var(--n-ink-3) !important; }
.text-body{ color:var(--n-ink) !important; }
a{ color:var(--n-accent-ink); }
a:hover{ color:var(--n-accent); }

/* =====================================================================
   3) SIDEBAR — rail tông than «Nhịp», active gạch cam
   ===================================================================== */
.app-menu,.navbar-menu,.vertical-menu{ background-color:var(--n-rail) !important; border-right:0 !important; }
.navbar-brand-box{ background-color:var(--n-rail) !important; border-bottom:1px solid rgba(255,255,255,.05); }
.navbar-menu .navbar-nav .menu-title span{ color:rgba(255,255,255,.34) !important; text-transform:uppercase; letter-spacing:.1em; font-size:11px; }
.navbar-menu .navbar-nav .nav-link{ color:var(--n-rail-ink) !important; border-radius:var(--n-radius-sm); font-weight:500; }
.navbar-menu .navbar-nav .nav-link i{ color:var(--n-rail-ink) !important; }
.navbar-menu .navbar-nav .nav-link:hover{ color:var(--n-rail-active) !important; background-color:rgba(255,255,255,.06); }
.navbar-menu .navbar-nav .nav-link:hover i{ color:var(--n-rail-active) !important; }
.navbar-menu .navbar-nav .nav-link.active,
.navbar-menu .navbar-nav .nav-link[aria-expanded="true"]{
  color:var(--n-rail-active) !important; background-color:rgba(255,255,255,.08);
  position:relative;
}
.navbar-menu .navbar-nav .nav-link.active i,
.navbar-menu .navbar-nav .nav-link[aria-expanded="true"] i{ color:var(--n-accent) !important; }
.navbar-menu .navbar-nav .nav-link.active::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:3px; background:var(--n-accent);
}
.navbar-menu .navbar-nav .nav-sm .nav-link{ color:var(--n-rail-ink) !important; }
.navbar-menu .navbar-nav .nav-sm .nav-link.active{ color:var(--n-accent) !important; background:transparent; font-weight:600; }
.navbar-menu .navbar-nav .nav-sm .nav-link.active::before{ display:none; }
.menu-dropdown .nav-link i{ color:inherit !important; }

/* =====================================================================
   4) TOPBAR
   ===================================================================== */
#page-topbar{
  background-color:var(--n-surface) !important;
  border-bottom:1px solid var(--n-line);
  box-shadow:none;
}
#page-topbar .navbar-header{ background:transparent; }
.header-item{ color:var(--n-ink-2); }
.btn-topbar,.topbar-head-dropdown .btn-icon{
  background-color:var(--n-surface) !important; border:1px solid var(--n-line) !important;
  color:var(--n-ink-2) !important;
}
.btn-topbar:hover{ color:var(--n-accent-ink) !important; border-color:var(--n-accent) !important; }
.user-name-text{ color:var(--n-ink) !important; font-weight:600; }
.user-name-sub-text{ color:var(--n-ink-3) !important; }

/* =====================================================================
   5) CARD
   ===================================================================== */
.card{
  background-color:var(--n-surface) !important;
  border:1px solid var(--n-line) !important;
  border-radius:var(--n-radius-lg) !important;
  box-shadow:var(--n-shadow) !important;
}
.card .card-header{
  background-color:transparent !important;
  border-bottom:1px solid var(--n-line-soft) !important;
  border-top-left-radius:var(--n-radius-lg); border-top-right-radius:var(--n-radius-lg);
}
.card-title{ font-weight:700; font-size:15px; }
/* card-header có tô màu subtle (vd bg-primary-subtle / bg-soft-danger) */
.card-header.bg-primary-subtle{ background-color:var(--n-accent-soft) !important; color:var(--n-accent-ink) !important; }
.card-header.bg-soft-danger,.card-header.bg-danger-subtle{ background-color:var(--n-crit-soft) !important; }
.card.border-danger{ border-color:rgba(208,59,59,.35) !important; }

/* =====================================================================
   6) BUTTONS — bo tròn, primary cam; soft/subtle theo token
   ===================================================================== */
.btn{ border-radius:var(--n-radius-sm); font-weight:600; }
.btn-primary{ background-color:var(--n-accent) !important; border-color:var(--n-accent) !important; color:var(--n-on-accent) !important; }
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{ background-color:var(--n-accent-ink) !important; border-color:var(--n-accent-ink) !important; color:#fff !important; }
.btn-soft-primary{ background-color:var(--n-accent-soft) !important; color:var(--n-accent-ink) !important; border-color:transparent !important; }
.btn-soft-primary:hover{ background-color:var(--n-accent) !important; color:var(--n-on-accent) !important; }
.btn-success{ background-color:var(--n-ok) !important; border-color:var(--n-ok) !important; color:#fff !important; }
.btn-soft-success{ background-color:var(--n-ok-soft) !important; color:var(--n-ok-ink) !important; border-color:transparent !important; }
.btn-danger{ background-color:var(--n-crit) !important; border-color:var(--n-crit) !important; color:#fff !important; }
.btn-soft-danger{ background-color:var(--n-crit-soft) !important; color:var(--n-crit-ink) !important; border-color:transparent !important; }
.btn-info{ background-color:var(--n-info) !important; border-color:var(--n-info) !important; color:#fff !important; }
.btn-soft-info{ background-color:var(--n-info-soft) !important; color:var(--n-info-ink) !important; border-color:transparent !important; }
.btn-warning{ background-color:#eda100 !important; border-color:#eda100 !important; color:#1B120A !important; }
.btn-secondary{ background-color:var(--n-surface-3) !important; border-color:var(--n-line) !important; color:var(--n-ink-2) !important; }
.btn-light{ background-color:var(--n-surface-2) !important; border-color:var(--n-line) !important; color:var(--n-ink) !important; }
.btn-light:hover{ background-color:var(--n-surface-3) !important; }
.btn-outline-primary{ border-color:var(--n-accent) !important; color:var(--n-accent-ink) !important; }
.btn-outline-primary:hover{ background-color:var(--n-accent) !important; color:var(--n-on-accent) !important; }

/* =====================================================================
   7) BADGE — viên thuốc «Nhịp»
   ===================================================================== */
.badge{ border-radius:999px !important; font-weight:600; letter-spacing:.01em; padding:.32em .7em; }
.badge.bg-primary{ background-color:var(--n-accent) !important; color:var(--n-on-accent) !important; }
.badge.bg-success{ background-color:var(--n-ok) !important; }
.badge.bg-danger{ background-color:var(--n-crit) !important; }
.badge.bg-info{ background-color:var(--n-info) !important; }
.badge.bg-warning{ background-color:#eda100 !important; color:#1B120A !important; }
.badge.bg-primary-subtle{ background-color:var(--n-accent-soft) !important; color:var(--n-accent-ink) !important; }
.badge.bg-success-subtle{ background-color:var(--n-ok-soft) !important; color:var(--n-ok-ink) !important; }
.badge.bg-danger-subtle{ background-color:var(--n-crit-soft) !important; color:var(--n-crit-ink) !important; }
.badge.bg-info-subtle{ background-color:var(--n-info-soft) !important; color:var(--n-info-ink) !important; }
.badge.bg-warning-subtle{ background-color:var(--n-warn-soft) !important; color:var(--n-warn-ink) !important; }
.badge.bg-secondary-subtle{ background-color:var(--n-line-soft) !important; color:var(--n-ink-2) !important; }

/* text-* + bg-*-subtle helpers dùng rải rác trong markup */
.text-primary{ color:var(--n-accent-ink) !important; }
.text-success{ color:var(--n-ok-ink) !important; }
.text-danger{ color:var(--n-crit) !important; }
.text-info{ color:var(--n-info-ink) !important; }
.text-warning{ color:var(--n-warn-ink) !important; }
.bg-primary{ background-color:var(--n-accent) !important; }
.bg-primary-subtle{ background-color:var(--n-accent-soft) !important; }
.bg-success-subtle{ background-color:var(--n-ok-soft) !important; }
.bg-danger-subtle,.bg-soft-danger{ background-color:var(--n-crit-soft) !important; }
.bg-info-subtle{ background-color:var(--n-info-soft) !important; }
.bg-warning-subtle{ background-color:var(--n-warn-soft) !important; }

/* =====================================================================
   8) BẢNG THƯỜNG (Bootstrap .table)
   ===================================================================== */
.table{ color:var(--n-ink); --vz-table-bg:transparent; border-color:var(--n-line-soft); }
.table > thead th,.table thead.text-muted th{
  background-color:var(--n-surface-2) !important;
  color:var(--n-ink-3) !important;
  font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; font-weight:600;
  border-bottom:1px solid var(--n-line) !important; border-top:0 !important;
}
.table > :not(caption) > * > *{ border-bottom-color:var(--n-line-soft) !important; background-color:transparent; }
.table-hover > tbody > tr:hover > *{ background-color:var(--n-surface-2) !important; color:var(--n-ink); }
.table-card{ border-radius:var(--n-radius); overflow:hidden; }

/* =====================================================================
   9) GRID.JS (mermaid theme hard-code màu sáng → đè toàn bộ)
   ===================================================================== */
.gridjs-wrapper,.gridjs-container{ color:var(--n-ink); box-shadow:none; }
.gridjs-wrapper{ border:1px solid var(--n-line); border-radius:var(--n-radius); }
.gridjs-table{ background:transparent; }
.gridjs-th{
  background-color:var(--n-surface-2) !important;
  color:var(--n-ink-3) !important;
  border:1px solid var(--n-line) !important; border-top:none !important;
  text-transform:uppercase; font-size:.72rem !important; letter-spacing:.04em; font-weight:600 !important;
  padding:12px 16px !important;
}
.gridjs-td{
  background-color:var(--n-surface) !important;
  color:var(--n-ink) !important;
  border:1px solid var(--n-line-soft) !important;
  padding:11px 16px !important;
}
.gridjs-tr:hover .gridjs-td,.gridjs-tr:hover td{ background-color:var(--n-surface-2) !important; }
.gridjs-tr-selected .gridjs-td{ background-color:var(--n-accent-soft) !important; }
.gridjs-search-input,.gridjs-input{
  background-color:var(--n-surface) !important;
  border:1px solid var(--n-line) !important;
  color:var(--n-ink) !important; border-radius:var(--n-radius-sm) !important;
  padding:9px 13px !important; height:auto !important;
}
.gridjs-search-input:focus,.gridjs-input:focus{ border-color:var(--n-accent) !important; box-shadow:var(--n-focus) !important; }
.gridjs-footer{ background-color:transparent !important; border:0 !important; box-shadow:none !important; }
.gridjs-pagination{ color:var(--n-ink-3) !important; }
.gridjs-pagination .gridjs-pages button{
  background-color:var(--n-surface) !important;
  border:1px solid var(--n-line) !important;
  color:var(--n-ink-2) !important;
}
.gridjs-pagination .gridjs-pages button:hover{ background-color:var(--n-surface-2) !important; color:var(--n-accent-ink) !important; }
.gridjs-pagination .gridjs-pages button.gridjs-currentPage{
  background-color:var(--n-accent) !important; color:var(--n-on-accent) !important; border-color:var(--n-accent) !important; font-weight:700;
}
.gridjs-summary{ color:var(--n-ink-3) !important; }
.gridjs-sort-asc,.gridjs-sort-desc,.gridjs-sort-neutral{ opacity:.7; }
.gridjs *{ font-family:var(--vz-font-sans-serif); }

/* =====================================================================
   10) FORM
   ===================================================================== */
.form-control,.form-select,.flatpickr-input{
  background-color:var(--n-surface) !important;
  border:1px solid var(--n-line) !important;
  color:var(--n-ink) !important;
  border-radius:var(--n-radius-sm) !important;
}
.form-control::placeholder{ color:var(--n-ink-3); }
.form-control:focus,.form-select:focus{
  border-color:var(--n-accent) !important; box-shadow:var(--n-focus) !important; background-color:var(--n-surface) !important;
}
.form-label{ color:var(--n-ink-2); font-weight:600; font-size:13px; }
.form-check-input:checked{ background-color:var(--n-accent); border-color:var(--n-accent); }
.form-check-input:focus{ box-shadow:var(--n-focus); border-color:var(--n-accent); }
.input-group-text{ background-color:var(--n-surface-2) !important; border:1px solid var(--n-line) !important; color:var(--n-ink-2) !important; }

/* =====================================================================
   11) NAV / TAB / PAGINATION / DROPDOWN / MODAL / ALERT / PROGRESS
   ===================================================================== */
.nav-pills .nav-link.active,.nav-pills .show>.nav-link{ background-color:var(--n-accent); color:var(--n-on-accent); }
.nav-tabs-custom .nav-link.active{ color:var(--n-accent-ink); }
.nav-tabs-custom .nav-link::after{ background:var(--n-accent); }
.page-item.active .page-link{ background-color:var(--n-accent); border-color:var(--n-accent); color:var(--n-on-accent); }
.page-link{ color:var(--n-ink-2); background-color:var(--n-surface); border-color:var(--n-line); }
.page-link:hover{ color:var(--n-accent-ink); background-color:var(--n-surface-2); }

.dropdown-menu{ background-color:var(--n-surface) !important; border:1px solid var(--n-line) !important; box-shadow:var(--n-shadow) !important; border-radius:var(--n-radius) !important; }
.dropdown-item{ color:var(--n-ink-2); }
.dropdown-item:hover,.dropdown-item:focus{ background-color:var(--n-surface-2); color:var(--n-ink); }
.dropdown-item.active,.dropdown-item:active{ background-color:var(--n-accent-soft); color:var(--n-accent-ink); }
.dropdown-header{ color:var(--n-ink-3); }

.modal-content{ background-color:var(--n-surface) !important; border:1px solid var(--n-line) !important; border-radius:var(--n-radius-lg) !important; }
.modal-header,.modal-footer{ border-color:var(--n-line-soft) !important; }

.alert-success{ background-color:var(--n-ok-soft); color:var(--n-ok-ink); border-color:transparent; }
.alert-danger{ background-color:var(--n-crit-soft); color:var(--n-crit-ink); border-color:transparent; }
.alert-warning{ background-color:var(--n-warn-soft); color:var(--n-warn-ink); border-color:transparent; }
.alert-info,.alert-primary{ background-color:var(--n-accent-soft); color:var(--n-accent-ink); border-color:transparent; }

.progress{ background-color:var(--n-line-soft); border-radius:999px; }
.progress-bar{ background-color:var(--n-accent); }
.progress-bar.bg-success{ background-color:var(--n-ok) !important; }
.progress-bar.bg-danger{ background-color:var(--n-crit) !important; }

/* Page title / breadcrumb */
.page-title-box{ border-bottom:0; }
.breadcrumb-item.active{ color:var(--n-ink-3); }
.breadcrumb-item a{ color:var(--n-accent-ink); }

/* =====================================================================
   12) HELPER màu loại buổi (nếu markup dùng class semantic cho loại buổi,
   thêm class nhip-* để đúng màu call/video/offline)
   ===================================================================== */
.nhip-call{ color:var(--n-s-call) !important; background:var(--n-s-call-soft) !important; }
.nhip-video{ color:var(--n-s-video) !important; background:var(--n-s-video-soft) !important; }
.nhip-off{ color:var(--n-s-off) !important; background:var(--n-s-off-soft) !important; }

/* Focus nhìn thấy được (a11y) */
:focus-visible{ outline:2px solid var(--n-accent); outline-offset:2px; border-radius:5px; }
::selection{ background:var(--n-accent-soft); }