/* PORTAL-01/04: match the existing 991px mobile breakpoint and reserve the actual 290px sidebar width. */
/* ============================================================
   Type scale — mirrors public/css/redesign.css. Base: body { font-size: 16px }
   in this file's main.css, so 1rem = 16px. --fs-h5-lg (20px) is a portal-only
   addition: the dashboard already uses 20px consistently for tab/badge/
   certificate headings (10 live occurrences) so it's promoted to a real tier
   rather than force-fit into 18 or 24.
   FONT-05: normalizes font-size drift across legacy component CSS
   (public/user_portal/css/main.css) without touching that file directly.
   ============================================================ */
:root {
    --fs-hero: 4.6875rem;     /* 75px */
    --fs-display: 3.75rem;    /* 60px */
    --fs-h1: 2.5rem;          /* 40px */
    --fs-section: 2.25rem;    /* 36px */
    --fs-h3: 1.875rem;        /* 30px */
    --fs-h4: 1.5rem;          /* 24px */
    --fs-h5-lg: 1.25rem;      /* 20px */
    --fs-h5: 1.125rem;        /* 18px */
    --fs-h6: 1rem;            /* 16px */
    --fs-body: 1rem;          /* 16px */
    --fs-small: 0.875rem;     /* 14px */
    --fs-caption: 0.75rem;    /* 12px */
}

/* FONT-05b: outlier normalization — only sizes not already on the scale above.
   Each selector's class confirmed present in live (non-commented) Blade
   markup before adding an override; public/user_portal/css/main.css itself
   is untouched. */
h4 { font-size: var(--fs-h3); }                                  /* 28 -> 30 */
.register__head h3 { font-size: var(--fs-h1); }                  /* 50 -> 40 */
.dashboard__course--box h5 { font-size: var(--fs-display); }     /* 55 -> 60 */
.knowledge__center__detail--wraper h3 { font-size: var(--fs-section); } /* 37 -> 36 */
.admin__dashboard__4boxes--box h3 { font-size: var(--fs-display); }     /* 55 -> 60 */
.cover__content h4 { font-size: var(--fs-h4); }                  /* 26 -> 24 */
.shape_topic_modal h2 { font-size: var(--fs-h3); }               /* 32 -> 30 */

@media (min-width: 992px) {
    .main__menu--bar { left: 0; height: calc(100dvh - 88px); }
    .main__menu--bar > a.menu-toggle { display: none; }
    .main__menu--bar .sidebar__menu { height: 100%; padding-top: 28px; padding-bottom: 28px; }
    body:not(.full-screen-window):not(.full-screen-window--mobile) .main__menu--bar ~ .portal__wraper { margin-left: 290px; padding: 0 28px; width: auto; }
    .main__menu--bar ~ .portal__wraper > .dash__board--main { width: 100%; max-width: 1430px; }
    .portal__wraper .profile__wraper, .portal__wraper .courses__badges--tabs, .portal__wraper .my__courses--block { width: 100%; max-width: none; }
}
.dashboard-zones > .row { row-gap: 24px; }
.dashboard-zones .continue-learning-zone { padding-bottom: 28px; border-bottom: 1px solid #BCC7B1; }
.dashboard-zones .continue-learning-zone .custom-card { min-height: 190px; }
.dashboard-zones .label-text, .dashboard-zones .title-text { min-width: 0; white-space: normal; overflow-wrap: normal; word-break: normal; line-height: 1.4; }
.dashboard-zones .stat-navigation { display: inline-flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; color: inherit; text-align: left; }
.dashboard-zones .stat-navigation i { flex-shrink: 0; }
.catalog-zone { padding-top: 36px; margin-top: 36px; border-top: 1px solid #BCC7B1; }
#dashboard-leaderboard { scroll-margin-top: 120px; }
.main__menu--bar a:focus-visible, .stat-navigation:focus-visible, .portal__header a:focus-visible,
.carousel__button:focus-visible, .btn-close:focus-visible { outline: 2px solid #223310; outline-offset: 3px; }
@media (max-width: 991px) {
    .dashboard-zones .continue-learning-zone .custom-card { gap: 16px; }
    .dashboard-zones .continue-learning-zone .me-5 { margin-right: 0 !important; }
    .dashboard-zones .continue-learning-zone svg { width: 3rem; height: 3rem; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .dashboard-zones .col-lg-3 { flex: 0 0 50%; max-width: 50%; }
}
.dashboard-progress-zone { padding-top: 16px; }
.sidebar__menu .icon > .bi { font-size: 24px; }
/* PORTAL-04/08–10: reference proportions adapted to the existing shell and palette. */
.portal__wraper .primary__btn, .portal__login--wraper .primary__btn,
.portal__wraper .secondary__btn, .portal__wraper .btn-explore {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 999px; padding: 12px 22px; min-height: 44px;
    font-size: 14.5px; font-weight: 800; line-height: 1.4; text-align: center;
}
body .portal__header { min-height: 88px; padding: 12px 22px; gap: 24px; }
body .portal__header .logo { flex: 0 0 244px; }
body .portal__header .logo img { max-width: 220px; max-height: 60px; }
body .portal__header--right { display: flex; align-items: center; justify-content: flex-end; gap: 20px; flex: 1; min-width: 0; }
body .portal__header .header__search { flex: 1; width: auto; max-width: 420px; margin: 0; }
body .portal__header .header__search--input { width: 100%; height: 44px; border-radius: 999px; padding-left: 44px; }
body .portal__header .header__search .icon { left: 16px; }
body .portal__header .header__right--ul { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; float: none; }
body .portal__header .header__right--ul > li { margin: 0; float: none; }
body .portal__header .icon-link { width: 40px; height: 40px; border-radius: 10px; overflow: visible; }
body .portal__header .count { width: auto; min-width: 17px; padding: 0 4px; white-space: nowrap; }
body .portal__header .avatar__drop { display: flex; align-items: center; gap: 8px; }
body .portal__header .avatar { width: 32px; height: 32px; flex-shrink: 0; }
body .portal__header .user-name-text { font-size: 13px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main__menu--bar .sidebar__menu li > a { border-radius: 12px 0 0 12px; padding-top: 11px; padding-bottom: 11px; }
.portal__wraper .page__heading { margin-bottom: 24px; }
.dashboard-zones .continue-learning-zone { padding-bottom: 0; border-bottom: 0; }
.dashboard-zones .continue-learning-zone .custom-card { min-height: 0; padding: 22px 26px; gap: 22px; }
.dashboard-zones .continue-learning-zone .me-5 { margin-right: 0 !important; }
.dashboard-zones .continue-learning-zone svg { width: 52px; height: 52px; }
.dashboard-zones .continue-learning-zone h4 { font-size: 22px; }
.dashboard-progress-zone { padding: 24px 0; border-top: 1px solid #BCC7B1; border-bottom: 1px solid #BCC7B1; }
.dashboard-progress-zone .custom-card { padding: 18px; border-radius: 14px; }
.dashboard-progress-zone h4 { font-size: 19px; margin-bottom: 16px; }
.dashboard-progress-zone .value-text { font-size: 28px; }
.dashboard-progress-zone .chart-container, .dashboard-progress-zone .skill-chart { width: 90px; height: 90px; }
.dashboard-progress-zone .skill-inner { width: 70px; height: 70px; }
.dashboard-progress-zone .stat-navigation { padding: 12px 14px; border: 1px solid #BCC7B1; border-radius: 12px; }
.dashboard-progress-zone .label-text:has(.stat-navigation) { width: 100%; }
.dashboard-progress-zone .bar-chart-box { height: 150px; }
.portal__login--wraper { min-height: 100dvh; padding: 70px 24px 40px; }
.portal__login--wraper .portal__login--main { max-width: 1040px; }
.portal__login--wraper .portal__login--left { padding: 72px 40px 40px; }
.portal__login--wraper .portal__login--right { padding: 72px 48px 40px; }
.portal__login--wraper .portal__login--right h3 { font-size: 38px; line-height: 1.2; }
.portal__login--wraper .primary__btn { max-width: 100%; }
@media (min-width: 992px) and (max-width: 1199px) {
    body .portal__header .user-name-text { display: none; }
    body .portal__header--right { gap: 12px; }
    body .portal__header .header__right--ul { gap: 8px; }
}
@media (max-width: 991px) {
    body .portal__header { position: static; flex-direction: column; gap: 14px; padding: 16px 24px; }
    body .portal__header .logo { flex: none; }
    body .portal__header--right { width: 100%; flex-wrap: wrap; justify-content: center; gap: 14px; }
    body .portal__header .header__search { flex-basis: 100%; max-width: none; }
    body .main__menu--bar ~ .portal__wraper { top: 0; padding: 24px 16px; }
    .portal__login--wraper .portal__login--left, .portal__login--wraper .portal__login--right { padding: 40px 24px; }
}
/* PORTAL-08/09: compact data groups and a separate shortcut row. */
.dashboard-progress-zone { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.dashboard-progress-zone > div { min-width: 0; margin-bottom: 0 !important; }
.dashboard-progress-zone .progress-ranking { order: 1; }
.dashboard-progress-zone .progress-metrics { order: 2; }
.dashboard-progress-zone .dashboard-shortcuts { order: 3; }
.dashboard-progress-zone .progress-comparison { order: 4; }
.dashboard-progress-zone .progress-counters { order: 5; }
.dashboard-progress-zone .progress-metrics .col-lg-3 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.dashboard-progress-zone .progress-ranking .custom-card,
.dashboard-progress-zone .progress-metrics .custom-card { min-height: 140px; height: 100%; }
.dashboard-progress-zone .dashboard__course--box--title { font-size: 14px; line-height: 1.4; }
.dashboard-progress-zone .progress-metrics .label-text,
.dashboard-progress-zone .progress-metrics .title-text { font-size: 14px; }
.dashboard-progress-zone .dashboard-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dashboard-zones .dashboard-shortcuts .stat-navigation { padding: 18px 20px; border: 1px solid #BCC7B1; border-radius: 14px; background: #E8F1DF; font-weight: 700; }
.dashboard-shortcuts .shortcut-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: #D7E6C7; font-size: 22px; }
.dashboard-shortcuts .stat-navigation > span:nth-child(2) { flex: 1; }
.dashboard-progress-zone .progress-counters .dashboard__course--box { padding: 20px; min-height: 120px; border-radius: 14px; }
@media (min-width: 1200px) {
    .dashboard-progress-zone { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 0; }
    .dashboard-progress-zone .dashboard-shortcuts,
    .dashboard-progress-zone .progress-comparison,
    .dashboard-progress-zone .progress-counters { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
    .dashboard-progress-zone .dashboard-shortcuts { grid-template-columns: minmax(0, 1fr); }
    .dashboard-progress-zone .progress-ranking .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .dashboard-progress-zone .progress-metrics .col-lg-3 { flex: 0 0 50%; max-width: 50%; }
    .dashboard-progress-zone .progress-metrics .col-lg-3:last-child { flex-basis: 100%; max-width: 100%; }
}

/* Portal menu: remove legacy curved tabs and align complete clickable rows. */
.main__menu--bar { border-top-right-radius: 0; }
.main__menu--bar .sidebar__menu { padding: 24px 16px; height: 100%; overflow-y: auto; overflow-x: hidden; }
.main__menu--bar .sidebar__menu > ul.menu-list { padding: 0; margin: 0; display: grid; gap: 6px; }
.main__menu--bar .sidebar__menu > ul.menu-list > li > a {
    display: flex; align-items: center; gap: 12px; min-height: 48px;
    padding: 11px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45;
    white-space: normal; overflow-wrap: normal; word-break: normal;
}
.main__menu--bar .sidebar__menu > ul.menu-list > li > a::before,
.main__menu--bar .sidebar__menu > ul.menu-list > li > a::after { display: none; }
.main__menu--bar .sidebar__menu > ul.menu-list > li > a > span.icon {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 24px; width: 24px; height: 24px; margin: 0; top: 0;
}
.main__menu--bar .sidebar__menu .icon > svg { width: 22px; height: 22px; }
.main__menu--bar .sidebar__menu .icon > .bi { font-size: 22px; }
@media (max-width: 991px) {
    .main__menu--bar { height: 100dvh; }
    .main__menu--bar .sidebar__menu { padding-top: 58px; }
}