/*
 * H+ 4.9 视觉移植主题层（基于 Bootstrap 5，不加载 jQuery）。
 * 只覆盖实际用到的组件；配色取自 H+ style.css：
 * primary #1ab394 / success #1c84c6 / info #23c6c8 / warning #f8ac59 / danger #ed5565 / 侧边栏 #2f4050 / 背景 #f3f3f4
 */
:root {
  --hp-primary: #1ab394;
  --hp-primary-dark: #18a689;
  --hp-primary-text: #0e7c66; /* 浅绿主色上的文字对比度不足时使用的加深色 */
  --hp-sidebar: #2f4050;
  --hp-sidebar-dark: #293846;
  --hp-sidebar-text: #a7b1c2;
  --hp-bg: #f3f3f4;
  --hp-border: #e7eaec;
  --hp-text: #676a6c;
  --bs-primary: #148f77;
  --bs-primary-rgb: 20, 143, 119;
  --bs-success: #1c84c6;
  --bs-success-rgb: 28, 132, 198;
  --bs-info: #23c6c8;
  --bs-info-rgb: 35, 198, 200;
  --bs-warning: #f8ac59;
  --bs-warning-rgb: 248, 172, 89;
  --bs-danger: #ed5565;
  --bs-danger-rgb: 237, 85, 101;
  --bs-body-color: #676a6c;
  --bs-body-bg: #f3f3f4;
  --bs-body-font-size: 0.875rem;
  --bs-body-font-family: "open sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --bs-link-color: #138a72;
  --bs-link-color-rgb: 19, 138, 114;
  --bs-link-hover-color: #0e6b58;
  --bs-link-hover-color-rgb: 14, 107, 88;
  --bs-border-color: #e7eaec;
}

body { background-color: var(--hp-bg); color: var(--hp-text); }
h1, h2, h3, h4, h5, h6 { font-weight: 300; }
h5 { font-weight: 600; font-size: 0.875rem; }

/* 按钮：H+ 主色（加深一级保证白字对比度 ≥ 4.5:1） */
.btn-primary {
  --bs-btn-bg: #148f77; --bs-btn-border-color: #148f77;
  --bs-btn-hover-bg: #117a65; --bs-btn-hover-border-color: #117a65;
  --bs-btn-active-bg: #0f6a58; --bs-btn-active-border-color: #0f6a58;
  --bs-btn-disabled-bg: #148f77; --bs-btn-disabled-border-color: #148f77;
  --bs-btn-focus-shadow-rgb: 26, 179, 148;
}
.btn-outline-primary {
  --bs-btn-color: #138a72; --bs-btn-border-color: #1ab394;
  --bs-btn-hover-bg: #148f77; --bs-btn-hover-border-color: #148f77;
  --bs-btn-active-bg: #117a65; --bs-btn-active-border-color: #117a65;
}
.btn-white { --bs-btn-bg: #fff; --bs-btn-border-color: var(--hp-border); --bs-btn-color: inherit;
  --bs-btn-hover-bg: #f7f7f7; --bs-btn-hover-border-color: #d2d2d2; }
.text-bg-primary { background-color: #148f77 !important; color: #fff !important; }
.text-bg-warning { color: #3d2a00 !important; }
.form-control:focus, .form-select:focus { border-color: var(--hp-primary); box-shadow: 0 0 0 .2rem rgba(26, 179, 148, .2); }
.form-check-input:checked { background-color: #148f77; border-color: #148f77; }

/* ibox 面板（基于 card） */
.ibox { margin-bottom: 25px; background: #fff; border: 0; border-radius: 0; }
.ibox-title {
  background: #fff; border-top: 3px solid var(--hp-border); border-bottom: 1px solid var(--hp-border);
  padding: 14px 15px 7px; min-height: 48px; display: flex; align-items: center; gap: .5rem;
}
.ibox-title h5 { margin: 0 0 7px; flex: 1 1 auto; }
.ibox-title .ibox-tools { margin-bottom: 7px; display: flex; gap: .4rem; }
.ibox-content { background: #fff; padding: 15px 20px 20px; border-color: var(--hp-border); }
.ibox.ibox-primary .ibox-title { border-top-color: var(--hp-primary); }

.wrapper-content { padding: 24px; }
@media (max-width: 575.98px) { .wrapper-content { padding: 12px; } }

/* 顶部导航（前台，参考 H+ index_v5 top-navigation） */
.hp-topnav { background: #fff; border-bottom: 1px solid var(--hp-border); }
.hp-topnav .navbar-brand { background: var(--hp-primary); color: #fff; padding: .55rem 1.1rem; font-weight: 600; margin-right: 1.25rem; }
.hp-topnav .navbar-brand:hover { color: #fff; background: var(--hp-primary-dark); }
.hp-topnav .nav-link { color: var(--hp-text); font-weight: 600; }
.hp-topnav .nav-link.active, .hp-topnav .nav-link:hover { color: var(--hp-primary-text); }
.hp-footer { background: #fff; border-top: 1px solid var(--hp-border); padding: 12px 24px; color: #8b8d8f; }

/* 侧边栏（后台，参考 H+ navbar-static-side） */
.hp-sidebar { background: var(--hp-sidebar); width: 220px; min-height: 100vh; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1030; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #4a5a6a transparent; }
.hp-sidebar::-webkit-scrollbar { width: 6px; }
.hp-sidebar::-webkit-scrollbar-thumb { background: #4a5a6a; border-radius: 3px; }
.nav-header { padding: 28px 25px; background: url("../vendor/hplus/img/header-profile.png") no-repeat; background-size: cover; }
.nav-header .hp-logo { color: #fff; font-size: 1.15rem; font-weight: 600; text-decoration: none; display: block; }
.nav-header .text-muted { color: #8095a8 !important; }
.hp-menu { list-style: none; margin: 0; padding: 0; }
.hp-menu > li > a { color: var(--hp-sidebar-text); font-weight: 600; padding: 14px 20px 14px 25px; display: flex; align-items: center; gap: .6rem; text-decoration: none; border-left: 4px solid transparent; }
.hp-menu > li > a:hover, .hp-menu > li > a:focus { background: var(--hp-sidebar-dark); color: #fff; }
.hp-menu > li.active > a { background: var(--hp-sidebar-dark); color: #fff; border-left-color: var(--hp-primary); }
.hp-menu .fa-solid { width: 1.1rem; text-align: center; }
.hp-page { margin-left: 220px; min-height: 100vh; display: flex; flex-direction: column; }
.hp-page > .wrapper-content { flex: 1 1 auto; }
body.mini-navbar .hp-sidebar { width: 70px; }
body.mini-navbar .hp-sidebar .nav-label, body.mini-navbar .nav-header .hp-profile { display: none; }
body.mini-navbar .hp-sidebar .hp-menu > li > a { justify-content: center; padding-left: 0; padding-right: 0; }
body.mini-navbar .nav-header { padding: 18px 0; text-align: center; }
body.mini-navbar .hp-page { margin-left: 70px; }
@media (max-width: 991.98px) { .hp-page, body.mini-navbar .hp-page { margin-left: 0; } }
.hp-sidebar-offcanvas { background: var(--hp-sidebar); width: 240px !important; }
.hp-sidebar-offcanvas .btn-close { filter: invert(1); }

.hp-topbar { background: #fff; border-bottom: 1px solid var(--hp-border); padding: .5rem 1rem; display: flex; align-items: center; gap: .75rem; }
.hp-topbar .hp-minimalize { background: var(--hp-primary); border-color: var(--hp-primary); color: #fff; }
.page-heading { background: #fff; border-bottom: 1px solid var(--hp-border); padding: 12px 24px 14px; }
.page-heading h2 { margin: 6px 0 4px; font-size: 1.5rem; }
.page-heading .breadcrumb { margin: 0; font-size: .8125rem; }

/* 统计卡片（参考 H+ widgets） */
.hp-widget { border-radius: 5px; padding: 15px 20px; color: #fff; margin-bottom: 1rem; }
.hp-widget .hp-widget-value { font-size: 1.75rem; font-weight: 300; }
.navy-bg { background-color: #148f77; } .lazur-bg { background-color: #1b9c9e; }
.yellow-bg { background-color: #c77a1f; } .red-bg { background-color: #d73d4e; } .blue-bg { background-color: #1c84c6; }

/* 视频卡片（参考 H+ contact-box） */
.contact-box { background: #fff; border: 1px solid var(--hp-border); margin-bottom: 0; height: 100%; transition: box-shadow .15s ease; }
.contact-box:hover { box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }
.hp-thumb { position: relative; background: #2f4050; overflow: hidden; }
.hp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hp-thumb .hp-duration { position: absolute; right: 6px; bottom: 6px; background: rgba(0, 0, 0, .75); color: #fff; font-size: .75rem; padding: 1px 6px; border-radius: 3px; }
.hp-thumb .hp-nothumb { color: #8095a8; font-size: 2.5rem; display: flex; align-items: center; justify-content: center; height: 100%; }
.hp-video-title { color: #333; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hp-video-title:hover { color: var(--hp-primary-text); }

/* 错误页 / 登录页（参考 H+ middle-box、login） */
.middle-box { max-width: 420px; margin: 0 auto; padding-top: 60px; }
.middle-box .hp-error-code { font-size: 7rem; font-weight: 300; color: #555; margin-bottom: 0; line-height: 1.1; }
.loginscreen .hp-login-title { font-size: 1.375rem; font-weight: 600; color: #3b3d3f; letter-spacing: .05em; margin-bottom: 1.5rem; }
.loginscreen .logo-name { color: #d2d6da; font-size: 3.5rem; font-weight: 800; letter-spacing: -2px; }
.loginscreen .ibox-content { box-shadow: 0 1px 4px rgba(0, 0, 0, .06); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }