/* Shared responsive rules, loaded after the original component styles. */
:root {
  --u-link: #003ccc; --u-nav-h: 64px; --u-focus: #2563eb;
  --u-success-text: #087044; --u-danger-text: #bc2534; --u-warning-text: #805300; --u-info-text: #086a84;
}
html[data-theme="dark"] {
  color-scheme: dark; --u-link: #93b9ff; --u-focus: #93c5fd;
  --u-success-text: #75dfad; --u-danger-text: #ffabb3; --u-warning-text: #f5ce72; --u-info-text: #81d4ec;
  --bs-body-color: var(--u-text); --bs-body-bg: var(--u-bg); --bs-border-color: var(--u-border-strong);
  --bs-secondary-color: var(--u-text-muted); --bs-tertiary-bg: var(--u-surface-2);
}
html[data-theme="light"] { color-scheme: light; }
html, body { max-width: 100%; }
body.session-auth, body.session-guest { min-height: 100vh; min-height: 100dvh; padding-top: var(--u-nav-h); padding-bottom: 0; }
body > .upraj-page { width: 100%; min-width: 0; padding-bottom: 5rem; }
body.session-auth > .upraj-page { max-width: 1680px; }
.upraj-page .row > *, .upraj-page .d-flex > *, .modal .row > *, .modal .d-flex > * { min-width: 0; }
.upraj-page :is(img, video, iframe), .modal :is(img, video, iframe) { max-width: 100%; }
.upraj-page h1, .upraj-page h2, .upraj-page h3, .card-title, .modal-title { overflow-wrap: anywhere; }
/* A footer in document flow cannot cover the final row or form buttons. */
body > .footer-fixed { position: relative; inset: auto; flex: 0 0 auto; padding: 1rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) !important; width: 100%; z-index: auto; }
/* Let the real navbar height accommodate long names, zoom and more modules. */
nav.navbar.custom-navbar { height: auto !important; min-height: 64px !important; padding: 0; z-index: 1030; }
.custom-navbar > .container-fluid { height: auto; min-height: 64px; padding: .5rem clamp(.75rem, 2vw, 2rem) !important; gap: .5rem 1rem; }
.custom-navbar .navbar-brand { flex-shrink: 0; margin-right: 0; max-width: none; }
.custom-navbar .navbar-nav { min-width: 0; }
.custom-navbar #navbarContent { min-width: 0; }
.custom-navbar .nav-link { padding-inline: .65rem !important; }
.custom-navbar .profile-name { display: block; max-width: 22ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.custom-navbar .dropdown-toggle { display: flex; align-items: center; gap: .35rem; }
.custom-navbar .navbar-toggler { min-width: 44px; min-height: 44px; }
.custom-navbar .u-theme-toggle { flex-shrink: 0; margin: 0; width: 44px; height: 44px; }
.custom-navbar .dropdown-menu { background: var(--u-surface); color: var(--u-text); max-height: calc(100dvh - var(--u-nav-h) - 24px); overflow-y: auto; }
.custom-navbar .dropdown-item { color: var(--u-text); white-space: normal; overflow-wrap: anywhere; }
.custom-navbar .upraj-notif-menu { width: min(420px, calc(100vw - 24px)) !important; }
.custom-navbar .notif-scroll { max-height: min(360px, calc(100dvh - var(--u-nav-h) - 110px)); overflow-y: auto; }
@media (min-width: 1200px) {
  .custom-navbar #navbarContent { flex-wrap: wrap; gap: .25rem .75rem; }
  .custom-navbar .navbar-nav.me-auto { flex-wrap: wrap; }
  .custom-navbar .navbar-nav:last-child { margin-left: auto; flex-shrink: 0; }
}
@media (max-width: 1199.98px) {
  .custom-navbar > .container-fluid { flex-wrap: wrap; }
  .custom-navbar .navbar-toggler { margin-left: auto; }
  .custom-navbar #navbarContent.navbar-collapse {
    position: absolute; top: 100%; left: 12px; right: 12px; width: auto;
    max-height: calc(100vh - var(--u-nav-h) - 24px); max-height: calc(100dvh - var(--u-nav-h) - 24px);
    overflow-y: auto; overscroll-behavior: contain; margin-top: .5rem; padding: .75rem;
    background: var(--u-surface) !important; border: 1px solid var(--u-border-strong); border-radius: 12px; box-shadow: var(--u-shadow-lg);
  }
  .custom-navbar #navbarContent.collapsing { transition: none; }
  .custom-navbar #navbarContent .navbar-nav { width: 100%; align-items: stretch !important; gap: .25rem; }
  .custom-navbar #navbarContent .navbar-nav > .nav-item { display: block; width: 100%; margin: 0 !important; }
  .custom-navbar #navbarContent .navbar-nav:last-child { border-top: 1px solid var(--u-border); padding-top: .75rem; margin-top: .75rem; }
  .custom-navbar #navbarContent .nav-link { color: var(--u-text) !important; min-height: 44px; padding: .65rem .75rem !important; white-space: normal !important; }
  .custom-navbar #navbarContent .nav-link:hover, .custom-navbar #navbarContent .nav-link.active { color: var(--u-link) !important; background: var(--u-surface-2) !important; }
  .custom-navbar #navbarContent .nav-link i { color: inherit !important; }
  .custom-navbar #navbarContent .profile-name { max-width: none; white-space: normal; overflow-wrap: anywhere; }
  .custom-navbar #navbarContent .u-theme-toggle { color: var(--u-text) !important; background: var(--u-surface-2); border-color: var(--u-border-strong); }
  .custom-navbar #navbarContent .btn-outline-light { color: var(--u-link); border-color: var(--u-border-strong); }
  .custom-navbar #navbarContent .nav-item.dropdown > .dropdown-menu {
    position: static !important; inset: auto !important; transform: none !important;
    width: 100% !important; min-width: 0; max-width: 100% !important; max-height: none; margin: .25rem 0 .5rem !important;
    box-shadow: none; background: var(--u-surface-2) !important; border: 1px solid var(--u-border) !important;
  }
}
/* Real table elements retain their columns; only the surrounding region scrolls. */
.upraj-page .table-responsive, .modal .table-responsive, .u-scroll-table, .u-table-wrap {
  display: block; width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
[data-u-scroll] > table { margin-bottom: 0; }
[data-u-scroll].u-table-overflow { border-bottom: 2px solid var(--u-border-strong); }
[data-u-scroll] th { white-space: nowrap; }
[data-u-scroll] td { overflow-wrap: normal; }
[data-u-scroll] td .btn, [data-u-scroll] .badge { white-space: nowrap; }
.upraj-page .pagination, .modal .pagination { flex-wrap: wrap; gap: .25rem; }
.upraj-page .input-group > .form-control, .upraj-page .input-group > .form-select { min-width: 0; }
.upraj-page .nav-tabs { flex-wrap: wrap; row-gap: .25rem; }
/* Explicit semantic colours work in both modes, including status badges. */
html[data-theme] .text-primary { color: var(--u-link) !important; }
html[data-theme] .text-success { color: var(--u-success-text) !important; }
html[data-theme] .text-danger { color: var(--u-danger-text) !important; }
html[data-theme] .text-warning { color: var(--u-warning-text) !important; }
html[data-theme] .text-info { color: var(--u-info-text) !important; }
html[data-theme="dark"] :is(.bg-light, .bg-body-tertiary, .bg-body-secondary) { background-color: var(--u-surface-2) !important; color: var(--u-text); }
html[data-theme] :is(.badge, .btn).bg-warning, html[data-theme] :is(.badge, .btn).bg-info { color: #142033 !important; }
html[data-theme] :is(.bg-primary, .bg-success, .bg-danger, .bg-dark).text-white,
html[data-theme] :is(.bg-primary, .bg-success, .bg-danger, .bg-dark).text-white :is(h1,h2,h3,h4,h5,h6,.card-title,.card-body,.card-header,.card-footer) { color: #fff !important; }
html[data-theme="dark"] .btn-close { filter: var(--bs-btn-close-filter, invert(1) grayscale(100%) brightness(200%)); }
html[data-theme] .form-check-input:checked { background-color: #0044ff !important; border-color: #0044ff !important; }
html[data-theme] .form-control:disabled, html[data-theme] .form-select:disabled { background-color: var(--u-surface-2) !important; color: var(--u-text-muted) !important; opacity: 1; }
html[data-theme] .form-control[readonly] { background-color: var(--u-surface-2) !important; }
html[data-theme] .input-group-text { color: var(--u-text-soft); background: var(--u-surface-2); border-color: var(--u-border-strong); }
html[data-theme="dark"] .alert { background-color: var(--u-surface-2); border-color: var(--u-border-strong); }
html[data-theme="dark"] .alert-success { color: var(--u-success-text) !important; }
html[data-theme="dark"] .alert-warning { color: var(--u-warning-text) !important; }
html[data-theme="dark"] .alert-danger { color: var(--u-danger-text) !important; }
html[data-theme="dark"] .alert-info { color: var(--u-info-text) !important; }
html[data-theme] .swal2-popup { background: var(--u-surface); color: var(--u-text); }
html[data-theme] .swal2-title, html[data-theme] .swal2-html-container { color: var(--u-text); }
html[data-theme] .swal2-input, html[data-theme] .swal2-select, html[data-theme] .swal2-textarea { color: var(--u-text); background: var(--u-surface-2); border-color: var(--u-border-strong); }
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--u-focus) !important; outline-offset: 3px; }
/* Responsive dialogs, filters and dashboard grids without flattening every column. */
@media (max-width: 767.98px) {
  body > .upraj-page { padding-inline: .75rem; }
  .upraj-page > .container-fluid { padding-inline: 0; }
  .upraj-page section { padding-block: 1.5rem; }
  .upraj-page h1 { font-size: 1.85rem; }
  .upraj-page h2 { font-size: 1.5rem; }
  .upraj-page .d-flex:not(.input-group):not(.btn-group), .modal .d-flex:not(.input-group):not(.btn-group) { flex-wrap: wrap; }
  .upraj-page .card-body { padding: 1rem; }
  .upraj-page .btn-group { flex-wrap: wrap; }
  .form-control, .form-select, .swal2-input, .swal2-textarea { font-size: 16px; min-height: 44px; }
  .modal-dialog, .modal-dialog.modal-lg, .modal-dialog.modal-xl { width: auto; max-width: calc(100% - 1rem); margin: .5rem; }
  .modal-dialog-centered { min-height: calc(100% - 1rem); }
  .modal-dialog-scrollable { height: calc(100% - 1rem); }
  .modal-content { max-height: calc(100dvh - 1rem); }
  .modal-body { overflow-y: auto; padding: 1rem; }
  .modal-header, .modal-footer { padding: .85rem 1rem; gap: .5rem; flex-shrink: 0; }
  .modal-header .btn-close { flex-shrink: 0; }
  .modal .tab-content { padding: 1rem !important; }
  .u-kpi { padding: 1rem; }
  .u-kpi__value { font-size: 1.6rem; }
  .u-kpi__icon { width: 36px; height: 36px; }
  #homeCarousel .carousel-item img { height: 52vh; min-height: 300px; }
  #homeCarousel .carousel-caption { left: 4%; right: 4%; bottom: .75rem; padding: .75rem; }
  #homeCarousel .carousel-caption h2 { font-size: 1.3rem; }
  #homeCarousel .carousel-caption p { font-size: .9rem; }
}
@media (max-width: 479.98px) {
  .custom-navbar .navbar-brand { font-size: 1rem !important; }
  .custom-navbar .navbar-brand::before { width: 26px; height: 26px; }
  .upraj-page .u-grid-3, .upraj-page .u-grid-4, .u-portfolio-grid { grid-template-columns: 1fr; }
  .u-portfolio-toolbar { align-items: stretch; }
  .upraj-page .pagination .page-link { padding: .5rem .65rem; }
}
@media (hover: none) and (pointer: coarse) {
  .btn, .dropdown-item, .page-link, .crm-sidebar .child-link, .nav-link { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { scroll-behavior: auto !important; } }
/* White comment popovers and floating contact tools need explicit theme colours. */
html[data-theme] .comment-tooltip { background: var(--u-surface); color: var(--u-text); border-color: var(--u-border-strong); min-width: 0; max-width: min(420px, calc(100vw - 24px)); }
html[data-theme] .contact-fab, html[data-theme] .contact-wrapper { z-index: 1010; right: max(1rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom)); }
html[data-theme] .contact-option { background: var(--u-surface); color: var(--u-text); border-color: var(--u-border-strong); text-shadow: none; }
html[data-theme] .contact-option i { color: var(--u-link); }
html[data-theme] .contact-option:hover, html[data-theme] .contact-option:hover i { color: #fff; }
@media (max-width: 575.98px) { #cs_pagination { flex-wrap: wrap; gap: .75rem; } }
/* Content stays visible if the optional animation library cannot load. */
html [data-aos]:not(.aos-init) { opacity: 1 !important; transform: none !important; }
@media (max-width: 767.98px), (prefers-reduced-motion: reduce) {
  html .upraj-page [data-aos] { transform: none !important; opacity: 1 !important; }
}
html[data-theme="dark"] .list-group-item.active { background: #0044ff !important; color: #fff !important; }
html[data-theme="dark"] .tree .tree-node:hover { background: var(--u-surface-2); }
html[data-theme="dark"] .tree li.highlight > .tree-node { background: #5d4715; color: #fff3ca; }
@media (max-width: 767.98px) {
  #hrMenu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  #hrMenu .list-group-item { border-radius: 8px; white-space: normal; }
  .upraj-page main.col-md-9 { padding-inline: .5rem !important; }
}
html[data-theme] .form-control::placeholder, html[data-theme] textarea::placeholder { color: var(--u-text-muted); opacity: 1; }
html[data-theme="dark"] .btn-outline-primary { color: var(--u-link) !important; border-color: #628de3; }
html[data-theme="dark"] .btn-outline-success { color: var(--u-success-text) !important; border-color: #4ea37e; }
html[data-theme="dark"] .btn-outline-danger { color: var(--u-danger-text) !important; border-color: #d17681; }
html[data-theme="dark"] .btn-outline-warning { color: var(--u-warning-text) !important; border-color: #cbaa55; }
html[data-theme="dark"] .btn-outline-info { color: var(--u-info-text) !important; border-color: #5fa8c0; }
html[data-theme="dark"] .btn-outline-secondary { color: var(--u-text-soft) !important; border-color: var(--u-border-strong); }
html[data-theme="dark"] :is(.btn-outline-primary,.btn-outline-success,.btn-outline-danger,.btn-outline-warning,.btn-outline-info,.btn-outline-secondary):is(:hover,:focus-visible,.active) { background: #274b8a !important; color: #fff !important; }
html[data-theme] .badge.bg-success { background-color: #087443 !important; color: #fff !important; }
html[data-theme] .badge.bg-danger { background-color: #bd293e !important; color: #fff !important; }
html[data-theme] section .bg-white.text-dark :is(h1,h2,h3,h4,h5,h6,p,li) { color: var(--u-text) !important; }