/*
  ccsTrainPro_Web_2026 custom layer.
  Keep vendor Kiaalap assets untouched; put all CCS overrides here.
*/
:root {
  --ccs-primary: #0d6efd;
  /* Sidebar Web 2026: rộng hơn một chút so với template gốc (260px) */
  --sidebar-width: 300px;
  --ccs-sidebar-width: 300px;
  --ccs-content-max: 100%;
}

/* Main shell */
.ccs-brand-subtitle {
  display: block;
  margin-top: .15rem;
  font-size: .68rem;
  font-weight: 500;
  opacity: .65;
  letter-spacing: .02em;
}

.ccs-menu-loading,
.ccs-menu-message {
  padding: 1rem 1.15rem;
  color: var(--bs-secondary-color, #6c757d);
  font-size: .85rem;
}

.ccs-menu-error {
  color: var(--bs-danger, #dc3545);
}

.ccs-menu-item > .nav-link {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.ccs-menu-item > .nav-link > span {
  min-width: 0;
  flex: 1;
}

.ccs-menu-chevron {
  flex: 0 0 auto;
  font-size: .72rem;
  transition: transform .2s ease;
}

.ccs-menu-item > .nav-link[aria-expanded="true"] .ccs-menu-chevron {
  transform: rotate(180deg);
}

.ccs-submenu {
  display: none;
  margin: .15rem 0 .35rem;
}

.ccs-submenu.show {
  display: block;
}

.ccs-submenu .nav-link {
  font-size: .96rem;
}

.ccs-page-heading {
  min-width: 0;
}

.ccs-page-heading .breadcrumb {
  margin-bottom: 0;
}

.ccs-main-placeholder {
  min-height: calc(100vh - 180px);
}

.dashboard-footer {
  margin-top: auto;
}

.main-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.dashboard-content {
  flex: 1 0 auto;
}

@media (max-width: 991.98px) {
  .ccs-header-title {
    max-width: 50vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.ccs-menu-divider {
  height: 1px;
  margin: .6rem 1rem;
  background: var(--bs-border-color, rgba(0,0,0,.1));
}


/* Web 2026 - menu trái dễ đọc hơn trên desktop */
@media (min-width: 769px) {
  .sidebar-nav .nav-link {
    font-size: .96rem;
    padding: .70rem .85rem;
  }

  .sidebar-nav .nav-link i {
    font-size: 1.02rem;
  }
}


/* =========================================================
   Web 2026 - Logo responsive, giữ nguyên tỉ lệ trên mọi thiết bị
   logo.png  : banner ngang logo + tên trường ở header
   image.png : logo phần mềm ở sidebar
   ========================================================= */
.sidebar-brand h5 {
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.ccs-software-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(220px, calc(100% - 8px));
  max-height: 34px;
  object-fit: contain;
  object-position: left center;
  image-rendering: auto;
}

/* Sidebar thu gọn: ảnh tự nhỏ lại, không bị cắt/vỡ. */
.sidebar.collapsed .ccs-software-logo {
  max-width: 42px;
  max-height: 30px;
  margin-inline: auto;
  object-position: center;
}

.ccs-header-title {
  min-width: 0;
  overflow: hidden;
}

.ccs-school-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(720px, 48vw);
  max-height: 48px;
  object-fit: contain;
  object-position: left center;
  image-rendering: auto;
}

/* Laptop nhỏ */
@media (max-width: 1199.98px) {
  .ccs-school-logo {
    max-width: 42vw;
    max-height: 44px;
  }

  .ccs-software-logo {
    max-width: min(205px, calc(100% - 8px));
    max-height: 32px;
  }
}

/* Tablet */
@media (max-width: 991.98px) {
  .ccs-school-logo {
    max-width: 36vw;
    max-height: 40px;
  }
}

/* Mobile: nếu header logo được hiển thị ở layout mobile thì vẫn co đúng tỉ lệ. */
@media (max-width: 767.98px) {
  .ccs-school-logo {
    max-width: 68vw;
    max-height: 38px;
  }

  .ccs-software-logo {
    max-width: min(210px, calc(100% - 8px));
    max-height: 32px;
  }
}


/* Web 2026 tree menu */
.ccs-tree-link { font-size:.96rem; }
.ccs-tree-children .ccs-tree-link { font-size:.96rem; }


/* Web 2026 - sidebar 350px */
@media (min-width: 769px) {
  .sidebar:not(.collapsed) { width:300px; min-width:300px; max-width:300px; }
  .main-wrapper { margin-left:300px; }
}


/* ===== Web 2026: tiêu đề chức năng + vùng nút thao tác ===== */
.ccs-function-header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:1rem;flex-wrap:wrap}
.ccs-function-heading-left{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 440px}
.ccs-function-title-icon{width:58px;height:58px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;background:rgba(13,110,253,.09);color:var(--bs-primary,#0d6efd);flex:0 0 auto}
.ccs-function-title-icon i{font-size:1.65rem;line-height:1}
.ccs-function-title-text{min-width:0}
.ccs-function-title{margin:0!important;font-family:"Segoe UI Variable","Segoe UI",Inter,system-ui,-apple-system,sans-serif;font-size:clamp(1.7rem,2vw,2.1rem);font-weight:600;line-height:1.16;letter-spacing:-.025em;color:#162033}
.ccs-function-guide{margin-top:.28rem!important;line-height:1.5;color:#657184!important}
.ccs-function-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.ccs-action-placeholder:disabled{opacity:.78;cursor:default}

/* ===== 3 loại label chuẩn dùng chung ===== */
.ccs-alert-error,.ccs-alert-success{position:relative;width:100%;padding:14px 16px 14px 54px;border-radius:10px;margin:0 0 16px;font-size:.95rem;font-weight:600;line-height:1.45;box-shadow:0 5px 18px rgba(31,41,55,.06)}
.ccs-alert-error:before,.ccs-alert-success:before{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"bootstrap-icons";font-size:1rem;color:#fff}
.ccs-alert-error{background:#fde7ee;border:1px solid #f3a8bd;color:#8f2946}
.ccs-alert-error:before{content:"\\f33a";background:#e97096}
.ccs-alert-success{background:#e5f7ef;border:1px solid #9edfc3;color:#256a50}
.ccs-alert-success:before{content:"\\f26a";background:#33b27b}
.ccs-help-note{margin-top:22px;padding:14px 16px;border-radius:10px;background:#fff8dc;border:1px solid #f0dea2;color:#6d6650;font-style:italic;font-size:.93rem;line-height:1.55}
.ccs-help-note i{color:#c59a24;margin-right:7px}

/* ===== Header: nút Trợ lý AI nổi bật ===== */
.ccs-ai-header-btn{width:40px;height:40px;border-radius:12px;border:0;color:#fff;background:linear-gradient(135deg,#6f42c1,#0d6efd);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 5px 14px rgba(75,73,210,.24);transition:transform .16s ease,box-shadow .16s ease}
.ccs-ai-header-btn:hover{color:#fff;transform:translateY(-1px);box-shadow:0 7px 18px rgba(75,73,210,.32)}
.ccs-ai-header-btn i{font-size:1.15rem}
.ccs-footer-chipchip{font-weight:300;opacity:.70;color:inherit;text-decoration:none}.ccs-footer-chipchip:hover{opacity:1;text-decoration:underline}

@media(max-width:767.98px){.ccs-function-title-icon{width:48px;height:48px;border-radius:13px}.ccs-function-title-icon i{font-size:1.4rem}.ccs-function-actions{width:100%;justify-content:flex-start;padding-left:62px}.ccs-function-title{font-size:1.55rem}}

/* Web2026: giam khoang cach menu Sinh vien / Giao vien.
   Da tich hop truc tiep vao ccstrainpro.css ngay 2026-11-06.
   Chi doi khoang cach doc; giu co chu, thu le, mau va thao tac menu.
   Menu mot dong: 15px * 1.35 + 3px + 3px + 2px = 28.25px.
   Cac dong thong tin ho so: 13px * 1.35 + 5px = 22.55px.
   Menu CB/QT rieng va thanh menu da thu gon khong bi thay doi. */
@media screen {
  .sidebar:not(.collapsed) #ccsSidebarMenu:has(
    [data-menu-code^="SV_"],
    [data-menu-code^="GV_"],
    > .ccs-tree-link[href*="/view/SinhVien/"],
    > .ccs-tree-link[href*="/view/GiaoVien/"]
  ) .ccs-tree-link {
    padding-top: 6px;
    padding-bottom: 6px;
    margin-bottom: 2px;
    line-height: 1.35;
  }
  .sidebar:not(.collapsed) #ccsSidebarMenu:has(
    [data-menu-code^="SV_"],
    [data-menu-code^="GV_"],
    > .ccs-tree-link[href*="/view/SinhVien/"],
    > .ccs-tree-link[href*="/view/GiaoVien/"]
  ) .ccs-tree-link > i {
    line-height: 1;
  }
}