/*!
 * EBG PMS — app.css
 * ---------------------------------------------------------------------------
 * The ONE custom stylesheet. Loaded after Minia's bootstrap.min.css,
 * icons.min.css and app.min.css — Minia stays untouched, everything EBG-specific
 * lives here. Modern CSS: custom properties, nesting, :has(), color-mix(),
 * container-friendly components, prefers-reduced-motion, print styles.
 *
 *  1. Tokens            6. Timeline            11. Infrastructure / pipeline
 *  2. Base & helpers    7. Kanban              12. Org chart & roles
 *  3. Brand / layout    8. Forms & pickers     13. Auth pages
 *  4. Badges & avatars  9. Projects            14. Dark mode tweaks
 *  5. Cards & KPIs     10. Alerts & requests   15. Print / motion
 * ---------------------------------------------------------------------------
 */

/* ============================================================ 1. TOKENS */
:root {
    --pms-radius: .75rem;
    --pms-radius-sm: .5rem;
    --pms-shadow: 0 2px 6px rgba(15, 34, 58, .06), 0 1px 2px rgba(15, 34, 58, .04);
    --pms-shadow-lg: 0 12px 32px rgba(15, 34, 58, .12);
    --pms-micro: #4ba6ef;
    --pms-mini: #6f42c1;
    --pms-normal: #ffbf53;
    --pms-surface: var(--bs-secondary-bg, #fff);
    --pms-soft: color-mix(in srgb, var(--bs-body-color) 5%, transparent);
    --pms-line: var(--bs-border-color, #e9e9ef);
    --pms-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ============================================================ 2. BASE & HELPERS */
.card { border-radius: var(--pms-radius); box-shadow: var(--pms-shadow); }
.card-header { border-top-left-radius: var(--pms-radius) !important; border-top-right-radius: var(--pms-radius) !important; }
.font-size-11 { font-size: 11px !important; }
.text-truncate-2, .pms-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pms-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; vertical-align: middle; }
.pms-hover-row { transition: background .15s; border-radius: var(--pms-radius-sm); margin-inline: -.5rem; padding-inline: .5rem !important; }
.pms-hover-row:hover { background: var(--pms-soft); }
kbd { font-size: .7rem; }
.table > :not(caption) > * > * { vertical-align: middle; }
.pms-table thead th { font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .02em; color: var(--bs-secondary-color); white-space: nowrap; }

/* softer subtle badges (Minia's *-bg-subtle tints are strong) */
.badge.bg-primary-subtle   { background-color: color-mix(in srgb, var(--bs-primary) 13%, transparent) !important; }
.badge.bg-success-subtle   { background-color: color-mix(in srgb, var(--bs-success) 14%, transparent) !important; }
.badge.bg-info-subtle      { background-color: color-mix(in srgb, var(--bs-info) 15%, transparent) !important; }
.badge.bg-warning-subtle   { background-color: color-mix(in srgb, var(--bs-warning) 20%, transparent) !important; }
.badge.bg-danger-subtle    { background-color: color-mix(in srgb, var(--bs-danger) 14%, transparent) !important; }
.badge.bg-secondary-subtle { background-color: color-mix(in srgb, var(--bs-secondary) 14%, transparent) !important; }
.badge.bg-dark-subtle      { background-color: color-mix(in srgb, #343a40 14%, transparent) !important; }
.badge.text-warning { color: color-mix(in srgb, var(--bs-warning) 62%, #000) !important; }
[data-bs-theme=dark] .badge.text-warning { color: var(--bs-warning) !important; }
.badge { font-weight: 500; }

/* purple contextual (not in Bootstrap) */
.bg-purple-subtle { background-color: color-mix(in srgb, var(--pms-mini) 14%, transparent) !important; }
.text-purple { color: var(--pms-mini) !important; }

/* soft buttons (Minia 2.x has no .btn-soft-*) */
.btn[class*="btn-soft-"] { --c: var(--bs-primary); color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border-color: transparent; }
.btn[class*="btn-soft-"]:hover, .btn[class*="btn-soft-"]:focus-visible { color: #fff; background: var(--c); }
.btn-soft-primary { --c: var(--bs-primary) !important; }
.btn-soft-success { --c: var(--bs-success) !important; }
.btn-soft-info { --c: var(--bs-info) !important; }
.btn-soft-warning { --c: var(--bs-warning) !important; }
.btn-soft-danger { --c: var(--bs-danger) !important; }
.btn-soft-secondary { --c: var(--bs-secondary) !important; }

/* nav tabs (custom underline style) */
.nav-tabs-custom { border-bottom: 1px solid var(--pms-line); gap: .25rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav-tabs-custom .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--bs-secondary-color); font-weight: 500; white-space: nowrap; background: none; }
.nav-tabs-custom .nav-link.active { color: var(--bs-primary); border-bottom-color: var(--bs-primary); background: none; }
.nav-tabs-custom .nav-link:hover { color: var(--bs-primary); }

/* ============================================================ 3. BRAND / LAYOUT */
.navbar-brand-box .logo-lg { display: inline-flex; align-items: center; gap: .55rem; vertical-align: middle; }
.navbar-brand-box .logo-sm img { vertical-align: middle; }
.navbar-brand-box .logo-lg img { height: 34px; width: auto; }
.pms-logo-txt { font-weight: 600; font-size: 12px; letter-spacing: .14em; padding: .15rem .45rem; border-radius: .35rem; background: var(--bs-primary); color: #fff; line-height: 1.2; }
body[data-sidebar-size=sm] .navbar-brand-box .logo-sm img { height: 18px; }

.pms-search-trigger { border: 0; background: var(--pms-soft); border-radius: 2rem; padding: .5rem 1rem; margin-left: .5rem; align-items: center; gap: .6rem; color: var(--bs-secondary-color); min-width: 300px; height: 38px; align-self: center; transition: background .15s; }
.pms-search-trigger:hover { background: color-mix(in srgb, var(--bs-primary) 8%, transparent); }
.pms-search-trigger span { flex: 1; text-align: left; font-size: 13px; }
.pms-search-trigger kbd { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); border: 1px solid var(--pms-line); }

.pms-viewas .badge { padding: .45rem .6rem; }

/* sidebar promo card */
.pms-sidebar-card { background: color-mix(in srgb, var(--bs-primary) 8%, transparent) !important; border-radius: var(--pms-radius); }
.pms-tier-strip { display: inline-flex; gap: .35rem; }
.pms-tier-strip i { width: 1.6rem; height: .45rem; border-radius: 1rem; }
.pms-tier-strip .micro { background: var(--pms-micro); } .pms-tier-strip .mini { background: var(--pms-mini); } .pms-tier-strip .normal { background: var(--pms-normal); }
body[data-sidebar-size=sm] .pms-sidebar-card { display: none; }

/* command palette */
.pms-palette { max-width: 640px; margin-top: 10vh; }
.pms-palette .modal-content { border-radius: 1rem; overflow: hidden; box-shadow: var(--pms-shadow-lg); }
.pms-palette input { padding-left: 3rem; font-size: 1rem; height: 58px; }
.pms-palette-icon { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: var(--bs-secondary-color); }
.pms-palette-group { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); padding: .75rem .75rem .25rem; }
.pms-palette-item { display: flex; gap: .75rem; align-items: center; padding: .55rem .75rem; border-radius: .5rem; color: var(--bs-body-color); }
.pms-palette-item i { font-size: 1.1rem; color: var(--bs-secondary-color); }
.pms-palette-item.is-active, .pms-palette-item:hover { background: color-mix(in srgb, var(--bs-primary) 10%, transparent); color: var(--bs-primary); }
.pms-palette-item.is-active i { color: var(--bs-primary); }

/* toasts */
.pms-toast { background: var(--bs-secondary-bg); box-shadow: var(--pms-shadow-lg); border-left: 4px solid var(--bs-success) !important; border-radius: .6rem; }
.pms-toast.is-info { border-left-color: var(--bs-info) !important; }
.pms-toast.is-warning { border-left-color: var(--bs-warning) !important; }
.pms-toast.is-danger { border-left-color: var(--bs-danger) !important; }

.notification-item.pms-unread { background: color-mix(in srgb, var(--bs-primary) 6%, transparent); }

/* ============================================================ 4. BADGES & AVATARS */
.pms-status, .pms-stack { --c: var(--bs-secondary); color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); font-weight: 500; }
.pms-status::before { content: ""; display: inline-block; width: .42rem; height: .42rem; border-radius: 50%; background: var(--c); margin-right: .35rem; vertical-align: 1px; }
a.pms-status:hover { background: var(--c); color: #fff; }

.pms-avatar { --h: 230; display: inline-block; flex-shrink: 0; }
.pms-avatar .avatar-title { background: hsl(var(--h) 55% 92%); color: hsl(var(--h) 45% 38%); font-weight: 600; font-size: .78em; letter-spacing: .02em; }
.pms-avatar.avatar-xs { width: 1.75rem; height: 1.75rem; font-size: 11px; }
.pms-avatar.avatar-sm { width: 2.25rem; height: 2.25rem; font-size: 13px; }
.pms-avatar.avatar-lg { width: 4rem; height: 4rem; font-size: 22px; }
.pms-avatar.avatar-xl { width: 6rem; height: 6rem; font-size: 32px; }
.avatar-group .avatar-xs { width: 1.75rem; height: 1.75rem; }
.avatar-group .avatar-group-item { margin-left: -7px; }
.avatar-group { padding-left: 7px; }
.avatar-group .avatar-xs .avatar-title { font-size: 11px; }

.pms-online { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--bs-secondary-color); }
.pms-online.is-on { background: var(--bs-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-success) 25%, transparent); }

.pms-vm-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: 12px; font-weight: 500; padding: .2rem .55rem; border-radius: 2rem; --c: var(--pms-micro); color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.pms-vm-pill::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.pms-vm-pill.mini { --c: var(--pms-mini); } .pms-vm-pill.normal { --c: #d99a1f; }

.pms-swatch { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: .35rem; background: var(--c); vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.pms-md-table .pickr, .pms-pickr { display: inline-block; vertical-align: middle; margin-left: .35rem; }
.pms-md-table .pickr .pcr-button { width: 1.35rem; height: 1.35rem; border-radius: .35rem; }

/* ============================================================ 5. CARDS & KPIs */
.pms-welcome { background: radial-gradient(120% 140% at 100% 0%, #6a6fd6 0%, #5156be 38%, #2e327a 100%); color: #fff; position: relative; }
.pms-welcome::after { content: ""; position: absolute; inset: auto -60px -80px auto; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.06); pointer-events: none; }
.pms-welcome .btn-outline-light { color: #fff; border-color: rgba(255,255,255,.55); }
.pms-welcome .btn-outline-light:hover { background: #fff; color: var(--bs-primary); }
.pms-glass { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: var(--pms-radius); backdrop-filter: blur(6px); }

.pms-kpi { transition: transform .2s var(--pms-ease), box-shadow .2s; }
.pms-kpi:hover { transform: translateY(-3px); box-shadow: var(--pms-shadow-lg); }
.pms-spark { display: inline-block; min-width: 90px; text-align: right; }

.pms-date-chip { width: 46px; flex-shrink: 0; text-align: center; border-radius: .6rem; background: color-mix(in srgb, var(--bs-primary) 10%, transparent); color: var(--bs-primary); padding: .3rem 0; line-height: 1.1; }
.pms-date-chip span { display: block; font-size: 17px; font-weight: 700; }
.pms-date-chip small { font-size: 10.5px; text-transform: uppercase; }

.pms-dl dt { font-weight: 500; color: var(--bs-secondary-color); margin-bottom: .55rem; }
.pms-dl dd { margin-bottom: .55rem; }

.pms-checklist li { position: relative; padding: .3rem 0 .3rem 1.6rem; }
.pms-checklist i { position: absolute; left: 0; top: .4rem; font-size: 1.05rem; }

.pms-steps li { display: flex; gap: .85rem; padding-bottom: 1rem; position: relative; }
.pms-steps li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 4px; width: 2px; background: var(--pms-line); }
.pms-steps li > span { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 600; background: color-mix(in srgb, var(--bs-primary) 12%, transparent); color: var(--bs-primary); }

/* ============================================================ 6. TIMELINE */
.pms-timeline { position: relative; margin: 0; padding-left: 0; }
.pms-timeline::before { content: ""; position: absolute; left: 19px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--pms-line), var(--pms-line)) no-repeat; }
.pms-event { position: relative; display: flex; gap: 1rem; padding: .35rem 0 1.15rem; animation: pms-in .35s var(--pms-ease) both; }
.pms-event-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 1.15rem; position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--bs-secondary-bg); }
.pms-event-body { flex: 1; min-width: 0; background: var(--pms-soft); border-radius: var(--pms-radius-sm); padding: .65rem .9rem; border: 1px solid transparent; transition: border-color .15s; }
.pms-event:hover .pms-event-body { border-color: var(--pms-line); }
.pms-event[hidden] { display: none; }
.pms-day, .pms-gap { position: relative; list-style: none; padding: .2rem 0 .8rem 56px; }
.pms-day span { font-size: 12px; font-weight: 600; color: var(--bs-body-color); }
.pms-day::before { content: ""; position: absolute; left: 14px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--bs-secondary-bg); border: 2px solid var(--bs-primary); z-index: 1; }
.pms-gap span { display: inline-block; font-size: 11px; color: var(--bs-secondary-color); background: var(--pms-soft); border: 1px dashed var(--pms-line); border-radius: 2rem; padding: .1rem .6rem; }
.pms-tl-month { position: sticky; top: 70px; z-index: 2; padding: .35rem 0 .75rem; background: linear-gradient(var(--bs-secondary-bg) 70%, transparent); }
.pms-tl-month span { display: inline-block; font-weight: 600; font-size: 13px; background: var(--bs-primary); color: #fff; border-radius: 2rem; padding: .25rem .85rem; }
.pms-tl-origin { margin-left: 4px; display: inline-flex; gap: .5rem; align-items: center; font-size: 13px; font-weight: 500; color: var(--bs-success); }
.pms-tl-kpis .card { box-shadow: var(--pms-shadow); }
.pms-legend-line { display: inline-block; width: 18px; border-top: 2px dashed var(--bs-danger); vertical-align: middle; margin-right: .3rem; }

.pms-mini-timeline .pms-event { padding-bottom: .65rem; }
.pms-mini-timeline .pms-event-icon { width: 32px; height: 32px; font-size: 1rem; }
.pms-mini-timeline .pms-event-body { background: none; padding: .1rem 0; }
.pms-mini-timeline { position: relative; }
.pms-mini-timeline::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--pms-line); }

/* milestones */
.pms-milestones li { display: flex; gap: .85rem; align-items: center; padding: .55rem 0; border-bottom: 1px dashed var(--pms-line); }
.pms-milestones li:last-child { border-bottom: 0; }
.pms-ms-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--pms-soft); color: var(--bs-secondary-color); flex-shrink: 0; }
.pms-milestones .is-done .pms-ms-dot { background: color-mix(in srgb, var(--bs-success) 15%, transparent); color: var(--bs-success); }
.pms-milestones .is-active .pms-ms-dot { background: var(--bs-primary); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-primary) 20%, transparent); }

/* ============================================================ 7. KANBAN */
.pms-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(272px, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x proximity; }
.pms-board-col { --c: var(--bs-secondary); background: var(--pms-soft); border-radius: var(--pms-radius); padding: .75rem; min-height: 60vh; scroll-snap-align: start; border-top: 3px solid var(--c); transition: background .15s, outline-color .15s; outline: 2px dashed transparent; outline-offset: -2px; }
.pms-board-col[hidden] { display: none; }
.pms-board-col.is-over { background: color-mix(in srgb, var(--c) 10%, transparent); outline-color: var(--c); }
.pms-board-col header { display: flex; align-items: center; gap: .5rem; padding: .25rem .25rem .75rem; }
.pms-board-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--c); }
.pms-board-card { cursor: grab; box-shadow: var(--pms-shadow); transition: transform .15s var(--pms-ease), box-shadow .15s; }
.pms-board-card[draggable=false] { cursor: default; }
.pms-board-card:hover { transform: translateY(-2px); box-shadow: var(--pms-shadow-lg); }
.pms-board-card.is-dragging { opacity: .45; transform: rotate(2deg); }
.pms-board-card[hidden] { display: none; }
.pms-flash { animation: pms-flash 1.2s ease; }

/* ============================================================ 8. FORMS & PICKERS */
.pms-field.has-error .form-control, .pms-field.has-error .form-select, .pms-field.has-error .choices__inner { border-color: var(--bs-danger) !important; }
.pms-field.has-error .btn-check + .btn { border-color: var(--bs-danger); }
.pms-field .invalid-feedback { font-size: 12px; }

/* card-style radio pickers */
.pms-type-pick .btn, .pms-stack-pick .btn, .pms-role-cards .btn, .pms-role-pick .btn { border: 1px solid var(--pms-line); background: var(--bs-secondary-bg); border-radius: var(--pms-radius); transition: border-color .15s, box-shadow .15s, transform .15s; }
.pms-type-pick .btn:hover, .pms-stack-pick .btn:hover, .pms-role-cards .btn:hover { border-color: var(--bs-primary); transform: translateY(-1px); }
.pms-type-pick .btn-check:checked + .btn, .pms-stack-pick .btn-check:checked + .btn, .pms-role-cards .btn-check:checked + .btn, .pms-role-pick .btn-check:checked + .btn { border-color: var(--bs-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 18%, transparent); background: color-mix(in srgb, var(--bs-primary) 5%, var(--bs-secondary-bg)); color: var(--bs-body-color); }
.pms-role-cards .btn-check:disabled + .btn { opacity: .45; }
.pms-stack-pick .pms-stack-ic { color: var(--c); }
.pms-role-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.pms-role-pick .btn { display: flex; gap: .5rem; align-items: center; padding: .55rem .75rem; font-size: 13px; }

.pms-status-pick { display: flex; flex-wrap: wrap; gap: .4rem; }
.pms-status-pick .btn { --c: var(--bs-secondary); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); color: var(--c); border-radius: 2rem; }
.pms-status-pick .btn-check:checked + .btn { background: var(--c); color: #fff; border-color: var(--c); }

.pms-severity .btn { font-size: 13px; }
.pms-otp input { max-width: 52px; font-weight: 600; }

.pms-dropzone { border: 2px dashed var(--pms-line) !important; border-radius: var(--pms-radius) !important; background: var(--pms-soft) !important; min-height: 160px; }
.pms-dropzone:hover { border-color: var(--bs-primary) !important; }
.pms-avatar-drop { width: 120px; height: 120px; min-height: 0 !important; border-radius: 50% !important; padding: 0 !important; display: grid; place-items: center; overflow: hidden; }
.pms-avatar-drop .dz-preview { margin: 0 !important; }

.pms-step-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bs-primary); color: #fff; font-size: 12px; margin-right: .4rem; }

/* wizard */
.twitter-bs-wizard .twitter-bs-wizard-nav .nav-link { text-align: center; }
.twitter-bs-wizard .twitter-bs-wizard-nav .nav-link.done .step-icon { background: var(--bs-primary); color: #fff; }
.twitter-bs-wizard-pager-link .finish { float: right; }
.twitter-bs-wizard-pager-link li.next.disabled, .twitter-bs-wizard-pager-link li.previous.disabled { opacity: .5; pointer-events: none; }

/* noUiSlider pips spacing */
[data-slider] { margin-bottom: 3rem !important; }

/* ============================================================ 9. PROJECTS */
.pms-chips .btn { font-weight: 500; }
.pms-project-card { --c: var(--bs-primary); border-top: 3px solid var(--c); transition: transform .2s var(--pms-ease), box-shadow .2s; }
.pms-project-card:hover { transform: translateY(-3px); box-shadow: var(--pms-shadow-lg); }
.pms-project-card[hidden], .pms-grid-item[hidden] { display: none !important; }
.pms-mini-stats h6 { font-size: 15px; }

.pms-project-hero { --c: var(--bs-primary); border-left: 5px solid var(--c); overflow: hidden; position: relative; }
.pms-project-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--c) 10%, transparent), transparent 70%); pointer-events: none; }
.pms-hero-stats h5 { font-weight: 700; }

.pms-countdown { display: flex; gap: .5rem; }
.pms-countdown > div, .pms-cd-overdue { text-align: center; min-width: 58px; padding: .5rem .35rem; border-radius: .6rem; background: var(--pms-soft); font-size: 11px; color: var(--bs-secondary-color); text-transform: uppercase; }
.pms-countdown span, .pms-cd-overdue span { display: block; font-size: 22px; font-weight: 700; color: var(--bs-body-color); line-height: 1.15; }
.pms-cd-overdue { background: color-mix(in srgb, var(--bs-danger) 12%, transparent); color: var(--bs-danger); min-width: 110px; }
.pms-cd-overdue span { color: var(--bs-danger); }

.pms-shot { position: relative; display: block; overflow: hidden; border-radius: .6rem; box-shadow: var(--pms-shadow); }
.pms-shot img { transition: transform .4s var(--pms-ease); }
.pms-shot:hover img { transform: scale(1.04); }
.pms-shot-cap { position: absolute; left: .5rem; bottom: .5rem; font-size: 12px; background: rgba(0,0,0,.6); color: #fff; padding: .15rem .5rem; border-radius: 2rem; }
.pms-masonry-item { margin-bottom: 1rem; }

.pms-bubble { background: var(--pms-soft); border-radius: 0 .75rem .75rem .75rem; padding: .6rem .85rem; }
.pms-new { animation: pms-in .4s var(--pms-ease) both; }

/* VM promotion flow (Micro → QA → Mini → OK → Normal) */
.pms-flow { display: flex; align-items: stretch; gap: .5rem; flex-wrap: wrap; }
.pms-flow-step { --c: var(--pms-micro); flex: 1 1 180px; position: relative; text-align: center; padding: 1rem .75rem; border-radius: var(--pms-radius); border: 1px solid var(--pms-line); border-top: 4px solid var(--c); background: var(--bs-secondary-bg); cursor: pointer; transition: box-shadow .15s; }
.pms-flow-step input { position: absolute; top: .6rem; right: .6rem; }
.pms-flow-step:has(input:checked), .pms-flow-step.is-on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.pms-flow-step.is-current::after { content: "Current"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; background: var(--c); color: #fff; padding: .1rem .55rem; border-radius: 2rem; }
.pms-flow-lg .pms-flow-step { cursor: default; padding: 1.25rem 1rem; }
.pms-flow-icon { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 1.3rem; margin-bottom: .4rem; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.pms-flow-gate { align-self: center; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; text-align: center; font-weight: 700; font-size: 13px; line-height: 1; border: 2px solid var(--bs-warning); color: var(--bs-warning); flex-shrink: 0; }
.pms-flow-gate small { font-size: 8px; font-weight: 500; }

/* ============================================================ 10. ALERTS & REQUESTS */
.pms-alert-card { padding: 1rem; border-radius: var(--pms-radius-sm); background: var(--bs-secondary-bg); border: 1px solid var(--pms-line); margin-bottom: .85rem; transition: background .2s; }
.pms-alert-card.is-unread { background: color-mix(in srgb, var(--bs-primary) 5%, var(--bs-secondary-bg)); }
.pms-alert-card[hidden] { display: none; }
.pms-filter-list .list-group-item { border: 0; border-radius: .5rem !important; margin-bottom: 2px; }
.pms-filter-list .list-group-item.active { background: color-mix(in srgb, var(--bs-primary) 12%, transparent); color: var(--bs-primary); }
.pms-request-card { background: var(--bs-secondary-bg); transition: box-shadow .15s; }
.pms-request-card:hover { box-shadow: var(--pms-shadow); }

/* ============================================================ 11. INFRASTRUCTURE */
.pms-tier-card { --c: var(--pms-micro); border-bottom: 3px solid var(--c); }
.pms-tier-card .avatar-title { background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }

.pms-pipeline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: .75rem; align-items: start; overflow-x: auto; padding-bottom: .5rem; }
.pms-pipe-col { --c: var(--bs-secondary); min-width: 210px; background: var(--bs-secondary-bg); border-radius: var(--pms-radius); padding: .9rem; border-top: 4px solid var(--c); box-shadow: var(--pms-shadow); min-height: 320px; }
.pms-pipe-col header { font-weight: 600; margin-bottom: .5rem; display: flex; gap: .4rem; align-items: center; color: var(--c); }
.pms-pipe-src { --c: #313533; }
.pms-pipe-card { display: block; border: 1px solid var(--pms-line); border-radius: .6rem; padding: .55rem .7rem; margin-top: .5rem; background: var(--bs-body-bg); color: var(--bs-body-color); }
.pms-pipe-card strong { display: block; font-size: 13px; }
.pms-pipe-card small { display: block; color: var(--bs-secondary-color); font-size: 12px; margin-bottom: .25rem; }
.pms-pipe-card a { color: inherit; }
.pms-pipe-gate { align-self: center; margin-top: 120px; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--bs-warning); display: grid; place-items: center; text-align: center; color: var(--bs-warning); font-weight: 700; line-height: 1; }
.pms-pipe-gate small { font-size: 8px; font-weight: 500; display: block; }
.pms-pipe-gate.is-arrow { border: 0; font-size: 2rem; color: var(--bs-secondary-color); }

.pms-arch { background: radial-gradient(120% 120% at 50% 0%, #1f2a44 0%, #111827 70%); color: #e5e7eb; }
.pms-arch h4 { color: #fff; }
.pms-arch .text-muted { color: #9aa3b2 !important; }
.pms-arch-flow { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; position: relative; }
.pms-arch-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; width: 100%; }
.pms-arch-node { --c: #3b82f6; position: relative; background: rgba(15, 37, 75, .85); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); border-radius: .75rem; padding: .75rem 1.1rem; text-align: center; min-width: 210px; font-weight: 600; color: #fff; box-shadow: 0 0 24px color-mix(in srgb, var(--c) 18%, transparent); }
.pms-arch-node i { color: var(--c); margin-right: .25rem; }
.pms-arch-node small { display: block; font-weight: 400; font-size: 12px; color: #a5b4cf; margin-top: .15rem; }
.pms-arch-node.is-dark { --c: #ffbf53; }
.pms-arch-node.is-tier { border-top: 4px solid var(--c); }
.pms-arch-flow > *:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -1.45rem; height: 1.2rem; border-left: 2px dashed #64748b; }
.pms-arch-row::after { display: none; }

.pms-empty-map { border: 2px dashed var(--pms-line); border-radius: var(--pms-radius); padding: 3rem 1rem; text-align: center; color: var(--bs-secondary-color); }

/* ============================================================ 12. ORG CHART & ROLES */
.pms-org { overflow-x: auto; padding: 1rem 0 2rem; }
.pms-org ul { display: flex; justify-content: center; padding-top: 1.4rem; position: relative; margin: 0; padding-left: 0; list-style: none; }
.pms-org li { position: relative; padding: 1.4rem .4rem 0; text-align: center; }
.pms-org > ul { padding-top: 0; }
.pms-org > ul > li { padding-top: 0; }
.pms-org li::before, .pms-org li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 1.4rem; border-top: 2px solid var(--pms-line); }
.pms-org li::after { right: auto; left: 50%; border-left: 2px solid var(--pms-line); }
.pms-org li:only-child::before, .pms-org li:only-child::after { display: none; }
.pms-org li:only-child { padding-top: 1.4rem; }
.pms-org li:first-child::before, .pms-org li:last-child::after { border: 0; }
.pms-org li:last-child::before { border-right: 2px solid var(--pms-line); border-radius: 0 6px 0 0; }
.pms-org li:first-child::after { border-radius: 6px 0 0 0; }
.pms-org ul ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 1.4rem; border-left: 2px solid var(--pms-line); }
.pms-org > ul > li::before, .pms-org > ul > li::after { display: none; }
.pms-org-node { --c: var(--bs-primary); display: inline-flex; flex-direction: column; align-items: center; gap: .35rem; padding: .7rem .6rem; min-width: 128px; border-radius: .75rem; background: var(--bs-secondary-bg); border: 1px solid var(--pms-line); border-top: 3px solid var(--c); color: var(--bs-body-color); box-shadow: var(--pms-shadow); transition: transform .15s; }
.pms-org-node:hover { transform: translateY(-2px); color: var(--bs-body-color); }
.pms-org-node strong { font-size: 12.5px; display: block; }
.pms-org-node small { font-size: 11px; color: var(--bs-secondary-color); display: block; max-width: 140px; }

.pms-slots { display: flex; gap: .35rem; }
.pms-slots span { flex: 1; height: 8px; border-radius: 4px; background: var(--pms-soft); border: 1px solid var(--pms-line); }
.pms-slots span.is-used { background: var(--bs-danger); border-color: var(--bs-danger); }

.pms-role-card { border-top: 3px solid var(--c); }
.pms-perm-table td:not(:first-child), .pms-perm-table th:not(:first-child) { width: 130px; }
.pms-perm-group td { background: var(--pms-soft) !important; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); }

.pms-master-nav .nav-link { color: var(--bs-body-color); border-radius: .5rem; padding: .55rem .75rem; font-size: 14px; }
.pms-master-nav .nav-link.active { background: color-mix(in srgb, var(--bs-primary) 12%, transparent); color: var(--bs-primary); }
.pms-master-nav .nav-link.active .badge { background: var(--bs-primary) !important; color: #fff !important; }
.pms-md-table tr.is-editing { background: color-mix(in srgb, var(--bs-warning) 10%, transparent); }
.pms-md-table td input, .pms-md-table td select { min-width: 110px; }

.pms-profile-cover { --h: 230; height: 110px; background: linear-gradient(135deg, hsl(var(--h) 60% 62%), hsl(calc(var(--h) + 40) 55% 45%)); }
.pms-profile-avatar { margin-top: -48px; display: flex; justify-content: center; }
.pms-profile-avatar .pms-avatar { box-shadow: 0 0 0 5px var(--bs-secondary-bg); border-radius: 50%; }

.pms-logo-preview { border-radius: var(--pms-radius); padding: 1.5rem; margin-bottom: .5rem; display: grid; place-items: center; min-height: 110px; border: 1px solid var(--pms-line); }
.pms-logo-preview.is-light { background: #fff; }
.pms-logo-preview.is-dark { background: #111; }

/* ============================================================ 13. AUTH */
.pms-auth .auth-full-page-content { min-height: 100vh; background: var(--bs-secondary-bg); }
.pms-auth-app { display: inline-flex; align-items: center; gap: .45rem; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); }
.pms-auth-app .pms-dot { background: var(--bs-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-success) 25%, transparent); }
.pms-auth-bg { background: radial-gradient(120% 100% at 0% 100%, #2e327a 0%, #111827 55%, #0b0f1a 100%) !important; min-height: 100vh; align-items: center; }
.pms-auth-bg .bg-overlay { background: radial-gradient(60% 60% at 80% 20%, rgba(81, 86, 190, .45), transparent 70%); opacity: 1; }
.pms-auth-swiper { padding-bottom: 3rem; }
.pms-auth-swiper .swiper-pagination-bullet { background: #fff; opacity: .4; }
.pms-auth-swiper .swiper-pagination-bullet-active { opacity: 1; width: 22px; border-radius: 4px; }
.pms-auth-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 1rem; font-size: 2rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.pms-auth-slide h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.logo-on-dark { display: none; }
[data-bs-theme=dark] .logo-on-light { display: none; }
[data-bs-theme=dark] .logo-on-dark { display: inline-block; }
.pms-error-code { font-size: clamp(4rem, 12vw, 7rem); letter-spacing: .04em; }

/* ============================================================ 14. DARK MODE TWEAKS */
[data-bs-theme=dark] .pms-avatar .avatar-title { background: hsl(var(--h) 30% 26%); color: hsl(var(--h) 70% 82%); }
[data-bs-theme=dark] .pms-logo-txt { background: #6a6fd6; }
[data-bs-theme=dark] .card { box-shadow: none; }
[data-bs-theme=dark] .pms-tl-month { background: linear-gradient(var(--bs-secondary-bg) 70%, transparent); }
[data-bs-theme=dark] .apexcharts-tooltip, [data-bs-theme=dark] .apexcharts-xaxistooltip { color: #e9ecef; }
[data-bs-theme=dark] .jvm-container { background: transparent !important; }

/* DataTables (bs4 skin on Bootstrap 5) */
div.dataTables_wrapper div.dataTables_filter input { border-radius: 2rem; padding-inline: 1rem; margin-left: 0; width: 220px; }
div.dataTables_wrapper div.dataTables_filter { text-align: right; }
.dt-buttons.btn-group { flex-wrap: wrap; gap: 2px; }
table.dataTable tbody tr.selected > * { box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--bs-primary) 12%, transparent) !important; color: inherit !important; }
table.dataTable tbody tr.selected a { color: var(--bs-primary) !important; }
.page-item.active .page-link { background: var(--bs-primary); border-color: var(--bs-primary); }
.fc .fc-event { border-radius: .35rem; padding: 1px 4px; font-size: 12px; cursor: pointer; }
.fc .pms-ev-due { background: var(--bs-danger); border-color: var(--bs-danger); }
.fc .pms-ev-due.is-closed { background: var(--bs-success); border-color: var(--bs-success); }
.fc .pms-ev-start { background: var(--bs-primary); border-color: var(--bs-primary); }
.fc .pms-ev-hold { background: color-mix(in srgb, var(--bs-warning) 85%, #000 0%); border-color: var(--bs-warning); color: #3b2f00; }
.fc .pms-ev-vm { background: var(--bs-info); border-color: var(--bs-info); }
.fc .pms-ev-vm.tier-mini { background: var(--pms-mini); border-color: var(--pms-mini); }
.fc .pms-ev-vm.tier-normal { background: #d99a1f; border-color: #d99a1f; }
.fc .fc-daygrid-event .fc-event-title, .fc .fc-daygrid-event .fc-event-time { color: #fff; }
.fc .pms-ev-hold .fc-event-title { color: #3b2f00; }
.fc .fc-button-primary { background: var(--bs-primary); border-color: var(--bs-primary); }
.choices__list--dropdown, .choices__list[aria-expanded] { z-index: 20; }

/* ============================================================ 15. MOTION & PRINT */
@keyframes pms-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pms-flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bs-success) 60%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 991.98px) {
    .pms-pipeline { grid-template-columns: repeat(7, minmax(210px, auto)); }
    .pms-tl-month { top: 70px; }
}
@media (max-width: 575.98px) {
    .pms-flow { flex-direction: column; }
    .pms-flow-gate { margin: 0 auto; }
    .pms-countdown > div { min-width: 48px; }
    .pms-role-pick { grid-template-columns: 1fr; }
}

@media print {
    #page-topbar, .vertical-menu, .footer, .page-title-right, .nav-tabs-custom, #eventFilters, .toast-container, .btn { display: none !important; }
    .main-content { margin-left: 0 !important; }
    .page-content { padding: 0 !important; margin: 0 !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
    .pms-tl-month { position: static; }
    .pms-event { break-inside: avoid; }
}

/* ---- late fixes: FullCalendar & dropzone in dark mode ---- */
.fc .fc-col-header-cell { background: var(--pms-soft); }
.fc .fc-col-header-cell-cushion, .fc .fc-daygrid-day-number { color: var(--bs-body-color); text-decoration: none; }
.fc .fc-day-today { background: color-mix(in srgb, var(--bs-primary) 10%, transparent) !important; }
.fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid { border-color: var(--pms-line) !important; }
.fc .fc-list-day-cushion { background: var(--pms-soft) !important; }
.pms-avatar-drop { background: var(--pms-soft) !important; border: 2px dashed var(--pms-line) !important; }
.pms-avatar-drop .dz-message { font-size: 13px; }