/* ============================================================
   Mingheng skin — loaded LAST (after Bootstrap + shared layout + theme tokens). Polish only: surfaces,
   the top bar's brand block, tables, badges. Colours all come from css/general.css tokens.
   ============================================================ */

/* ---- top bar ---- */
.company-topnav { border-bottom: 3px solid var(--brand-red); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.company-topnav .navbar-brand { gap: 10px; }
.company-topnav .tn-mark { display: inline-flex; align-items: center; color: #fff; }
.company-topnav .tn-brand-name { font-family: "Jost", "Noto Sans SC", sans-serif; font-size: calc(var(--font-size) + 3px); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.company-topnav .tn-brand-cn { font-size: calc(var(--font-size) + 5px); color: rgba(255,255,255,.72); line-height: 1; margin-left: 2px; }
@media (max-width: 575.98px) { .company-topnav .tn-brand-cn { display: none; } }
.company-topnav .navbar-nav .nav-link { font-weight: 500; }
.company-topnav .navbar-nav .nav-link.active { border-bottom-color: var(--brand-red); }
.company-topnav .topnav-clock { border-radius: 8px; }
.company-topnav .topnav-clock-ico { color: var(--brand-red); }
.company-topnav .dropdown-menu { border: 0; }
.company-topnav .dropdown-item.active, .company-topnav .dropdown-item:active { background: var(--theme-base); color: #fff; }

/* ---- page title row ---- */
.page-head-sticky .page-title { position: relative; padding-left: 14px; }
.page-head-sticky .page-title::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 2px; background: var(--brand-red); }

/* ---- surfaces ---- */
.card { border: 0; border-radius: var(--primary-border-radius); box-shadow: 0 1px 2px rgba(20,22,26,.06), 0 6px 20px -12px rgba(20,22,26,.18); }
.card.rounded-4 { border-radius: var(--primary-border-radius) !important; }
.modal-content { border-radius: 16px; box-shadow: 0 30px 60px -26px rgba(20,22,26,.45); }
.offcanvas { border-left: 0 !important; box-shadow: -10px 0 40px -20px rgba(20,22,26,.4); }
.dropdown-menu { border-radius: 12px; }

/* ---- tables ---- */
.table thead th { background: color-mix(in srgb, var(--theme-base) 5%, #fff); color: color-mix(in srgb, var(--theme-base) 70%, #555); }
.table-hover > tbody > tr:hover > * { background-color: color-mix(in srgb, var(--brand-red) 3%, #fff); }
.table > :not(caption) > * > * { border-bottom-color: #eef0f2; }

/* ---- filter bar inputs (table.js renders bg-dark-subtle) ---- */
.bg-dark-subtle { background-color: color-mix(in srgb, var(--theme-base) 5%, #fff) !important; }

/* ---- badges / chips ---- */
.badge { font-weight: 600; letter-spacing: .01em; border-radius: 6px; }
.bg-success-subtle { background-color: #e6f4ec !important; } .text-success { color: #1f8a4c !important; }
.bg-danger-subtle { background-color: color-mix(in srgb, var(--brand-red) 10%, #fff) !important; }
.bg-info-subtle { background-color: color-mix(in srgb, var(--theme-base) 8%, #fff) !important; } .text-info { color: color-mix(in srgb, var(--theme-base) 80%, #000) !important; }
.bg-warning-subtle { background-color: #fff5df !important; } .text-warning { color: #9a6a00 !important; }

/* ---- shared tab bar (UI.tabs) ---- */
.ui-tab { border-color: #e1e3e7; color: #5d6168; background: #fff; }
.ui-tab:hover { border-color: var(--brand-red); color: var(--brand-red); }
.ui-tab.on { background: var(--theme-base); border-color: var(--theme-base); color: #fff; }

/* ---- notification list ---- */
.notif-item.unread { background: color-mix(in srgb, var(--brand-red) 4%, #fff); }
.notif-dot { flex-shrink: 0; margin-top: 5px; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.notif-dot.on { background: var(--brand-red); }

/* ---- global loader (api.js) ---- */
#global-loader .spinner-border { color: var(--brand-red) !important; }
#global-loader .text-primary { color: var(--theme-base) !important; }