/* v4 */
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 0;
}

/* ── Dashboard ── */
.category-header {
  cursor: pointer;
  user-select: none;
}

.category-chevron {
  transition: transform 0.2s;
}

.category-header.collapsed .category-chevron {
  transform: rotate(0deg);
}

.category-header:not(.collapsed) .category-chevron {
  transform: rotate(90deg);
}

/* Grid card */
.form-card {
  min-height: 56px;
  cursor: default;
  transition: background-color 0.15s;
}

.form-card:hover {
  background-color: #f0f4ff !important;
}

.form-name {
  font-size: 0.8rem;
  line-height: 1.2;
}

.action-icon {
  opacity: 0.4;
  transition: opacity 0.15s;
}

.action-icon:hover {
  opacity: 1;
}

/* Border dashed for optional steps */
.border-dashed {
  border-style: dashed !important;
}

/* Approval tree spacing */
.approval-tree .card {
  margin-left: 0;
  margin-bottom: 0;
}

/* Tracking wider text */
.tracking-wider {
  letter-spacing: 0.08em;
}

/* ── SuperAdmin indicator badge ──────────────────────────────────────────── */
/* Reusable pill rendered via _SuperAdminBadge.cshtml partial. */

/* ── Navbar ───────────────────────────────────────────────────────────────── */
:root {
    --nav-bg:           #1a2744;
    --nav-bg-imp:       #7c3f00;
    --nav-pill-hover:   rgba(255,255,255,.10);
    --nav-pill-active:  rgba(255,255,255,.16);
    --nav-text:         rgba(255,255,255,.88);
    --nav-text-muted:   rgba(255,255,255,.55);
    --nav-dd-bg:        #ffffff;
    --nav-dd-shadow:    0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
    --nav-dd-radius:    12px;
    --nav-avatar-bg:    rgba(255,255,255,.18);
    --nav-avatar-color: #ffffff;
    --nav-height:       56px;
}

.navbar-app {
    background: var(--nav-bg);
    min-height: var(--nav-height);
}
.navbar-impersonating {
    background: var(--nav-bg-imp);
    min-height: var(--nav-height);
}

/* Light toggler icon for dark navbar backgrounds */
.navbar-app .navbar-toggler-icon,
.navbar-impersonating .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-app .navbar-toggler,
.navbar-impersonating .navbar-toggler {
    border-color: rgba(255,255,255,.15);
}

/* Brand */
.navbar-app .navbar-brand,
.navbar-impersonating .navbar-brand {
    color: #fff;
    font-size: 1rem;
    letter-spacing: -.01em;
    padding: 0;
}
.navbar-app .navbar-brand:hover,
.navbar-impersonating .navbar-brand:hover { color: #fff; opacity: .85; }

.navbar-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,.15);
    border-radius: 7px;
    font-size: .85rem;
}

/* Pill nav links */
.nav-link-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--nav-text) !important;
    font-size: .85rem;
    font-weight: 500;
    padding: 6px 12px !important;
    border-radius: 8px;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.nav-link-pill:hover,
.nav-link-pill:focus { background: var(--nav-pill-hover); color: #fff !important; }
.nav-link-pill.show,
.nav-link-pill[aria-expanded="true"] { background: var(--nav-pill-active); color: #fff !important; }

.nav-icon { font-size: .8rem; opacity: .75; }

/* Icon-only pill (bell) */
.nav-link-icon-only {
    padding: 6px 10px !important;
    font-size: .9rem;
}

/* Notification / approval dot badge */
.nav-dot-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid var(--nav-bg);
    display: block;
}

/* Avatar circle */
.nav-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--nav-avatar-bg);
    color: var(--nav-avatar-color);
    font-weight: 700;
    font-size: .75rem;
    flex-shrink: 0;
    border: 1.5px solid rgba(255,255,255,.22);
}
.nav-avatar-lg { width: 36px; height: 36px; font-size: .85rem; }

/* User trigger */
.nav-user-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nav-user-name { font-size: .83rem; font-weight: 500; }

/* Dropdown panel */
.dropdown-menu-app {
    background: var(--nav-dd-bg);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: var(--nav-dd-radius);
    box-shadow: var(--nav-dd-shadow);
    padding: 6px;
    min-width: 240px;
    margin-top: 4px !important;
    animation: ddFadeIn .13s ease;
}
@keyframes ddFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Dropdown items */
.dropdown-item-app {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #1e293b;
    font-size: .85rem;
    transition: background .12s;
    white-space: normal;
}
.dropdown-item-app:hover,
.dropdown-item-app:focus { background: #f1f5f9; color: #1e293b; }

.dd-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: #f8fafc;
    flex-shrink: 0;
    font-size: .8rem;
    border: 1px solid rgba(0,0,0,.06);
}

.dd-content { display: flex; flex-direction: column; gap: 1px; }
.dd-label   { font-weight: 600; line-height: 1.2; font-size: .83rem; color: #0f172a; }
.dd-desc    { font-size: .73rem; color: #64748b; line-height: 1.3; }

/* User dropdown header */
.dropdown-header-user { border-radius: 8px; background: #f8fafc; }

/* Divider */
.dropdown-menu-app .dropdown-divider { border-color: rgba(0,0,0,.07); }

/* Mobile adaptations */
@media (max-width: 1199.98px) {
    .navbar-app,
    .navbar-impersonating { min-height: auto; }

    #navbarMain { padding: 12px 0 8px; border-top: 1px solid rgba(255,255,255,.1); margin-top: 8px; }

    .nav-link-pill { border-radius: 8px; padding: 8px 10px !important; }
    .gap-lg-1 { gap: 2px !important; }

    .dropdown-menu-app {
        position: static !important;
        box-shadow: none;
        border: none;
        background: rgba(255,255,255,.06);
        border-radius: 8px;
        margin: 4px 0 !important;
        padding: 4px;
        animation: none;
    }
    .dropdown-item-app { color: rgba(255,255,255,.85); }
    .dropdown-item-app:hover { background: rgba(255,255,255,.1); color: #fff; }
    .dd-label   { color: rgba(255,255,255,.9); }
    .dd-desc    { color: rgba(255,255,255,.5); }
    .dd-icon-wrap { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.7) !important; }
    .dropdown-header-user { background: rgba(255,255,255,.06); }
    .dropdown-header-user .fw-semibold,
    .dropdown-header-user .text-muted { color: rgba(255,255,255,.8) !important; }
    .nav-dot-badge { border-color: transparent; }
}

.sa-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(234, 179, 8, .12);
  color: #92700a;
  border: 1px solid rgba(234, 179, 8, .35);
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.5;
}
/* Lighter variant for dark (navbar) surfaces */
.sa-badge-nav {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(234, 179, 8, .22);
  color: #fde68a;
  border: 1px solid rgba(253, 230, 138, .35);
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.5;
}


.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ── Form info accordion (unified expandable card) ────────────────────────── */
.form-info-accordion {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    background: var(--bs-body-bg);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Outer focus / active ring (applied to the whole container, not inner children) */
.form-info-accordion:focus-within,
.form-info-accordion:has(.collapse.show) {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.18);
}

/* Left accent stripe */
.form-info-accordion-accent-primary {
    border-left: 4px solid #0d6efd !important;
}
.form-info-accordion-accent-secondary {
    border-left: 4px solid #6c757d !important;
}

/* Toggle button — no Bootstrap btn classes, no focus ring */
.form-info-accordion-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 1rem;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
}
.form-info-accordion-toggle:focus,
.form-info-accordion-toggle:active {
    outline: none;
    box-shadow: none;
    background: rgba(13, 110, 253, 0.04);
}

/* Header text */
.form-info-accordion-toggle .accordion-title {
    font-weight: 600;
    font-size: 0.9rem;
}

/* Chevron */
.accordion-chevron {
    transition: transform 0.25s ease;
    font-size: 0.75em;
    color: var(--bs-secondary-color);
}
.form-info-accordion-toggle[aria-expanded="true"] .accordion-chevron {
    transform: rotate(180deg);
}

/* Expanded body — seamless with header, just a subtle top separator */
.form-info-accordion-body {
    padding: 0 1rem 0.75rem 1rem;
    border-top: 1px solid var(--bs-border-color);
    border-radius: 0;                    /* no inner border-radius */
    background: transparent;
    box-shadow: none;
}

/* ── Badge icon alignment ────────────────────────────────────────────────── */
/* Any badge containing a Font Awesome icon gets flex so the icon and
   any sibling text are vertically centered inside the badge background. */
.badge:has(> i[class*="fa-"]) {
    display: inline-flex !important;
    align-items: center !important;
}

/* Icon-only badges ─────────────────────────────────────────────────── */
/* Because Font Awesome renders glyphs on the text baseline, we reset the
   badge's own text-metrics and use pure box-model sizing + flex centering.
   The <i> is turned into a block so the badge's align-items:center has a
   single, predictable flex child to work with. */
.badge:has(> i[class*="fa-"]:only-child) {
    justify-content: center !important;
    line-height: 0 !important;          /* kill any text-height contribution */
    --bs-badge-padding-y: 0.45em;      /* roomier than Bootstrap's .35em */
    --bs-badge-padding-x: 0.55em;
}

.badge:has(> i[class*="fa-"]:only-child) > i {
    display: block !important;   /* override FA's inline-block so the badge
                                    sees a single block-level flex child */
    line-height: 1;
}

/* Font Awesome renders glyphs on the text baseline, which makes them sit
   high inside the <i> block.  A relative nudge on ::before shifts the
   visible glyph down without changing any box dimensions. */
.badge:has(> i[class*="fa-"]:only-child) > i::before {
    position: relative;
    top: 0.12em;
}

/* Ensure badges in table cells don't get squeezed */
td .badge {
    white-space: nowrap;
}