:root {
    --sidebar-w: 248px;
    --brand: #0d6efd;
    --sidebar-bg: #1f2937;
    --sidebar-fg: #cbd5e1;
}

body { background: #f3f4f6; }

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    flex-shrink: 0;
    transition: margin-left .2s ease;
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
}
.sidebar.collapsed { margin-left: calc(-1 * var(--sidebar-w)); }

.sidebar-brand {
    font-size: 1.1rem; font-weight: 600; color: #fff;
    padding: 18px 18px; border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}
.sidebar-nav { padding: 8px 0; overflow-y: auto; flex: 1; }
.sidebar-nav::-webkit-scrollbar { width: 7px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

.scaffold-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: #f59e0b; margin-left: 4px; vertical-align: middle;
}
.sidebar .nav-link { color: var(--sidebar-fg); padding: 9px 18px; font-size: .92rem; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar .nav-link i { width: 20px; }
.sidebar .nav-link.disabled-link { opacity: .55; }
.nav-section {
    text-transform: uppercase; font-size: .68rem; letter-spacing: .06em;
    color: #6b7280; padding: 14px 18px 4px;
}

.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
    height: 56px; background: #fff; border-bottom: 1px solid #e5e7eb;
    display: flex; align-items: center; gap: 12px; padding: 0 16px;
}
.content { padding: 22px; }

.page-title { font-size: 1.35rem; font-weight: 600; margin-bottom: 18px; }
.card { border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(0,0,0,.04); }

/* Login */
.login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
}
.login-card {
    width: 380px; background: #fff; border-radius: 12px; padding: 32px;
    box-shadow: 0 20px 45px rgba(0,0,0,.25);
}
.login-card h1 { font-size: 1.4rem; font-weight: 700; text-align: center; margin-bottom: 4px; }
.login-card .sub { text-align: center; color: #6b7280; font-size: .9rem; margin-bottom: 22px; }

/* ===== Top navigation bar (legacy-style top menu) ===== */
.topnav {
    background: linear-gradient(90deg, #0b1f4d 0%, #18336f 100%);
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    border-bottom: 3px solid #c1281f;
    padding: 0 14px;
    min-height: 54px;
}
.topnav-brand {
    display: flex; align-items: center; gap: 8px;
    color: #fff !important; font-weight: 800; font-size: 1.1rem; letter-spacing: .3px;
}
.topnav-brand img { height: 30px; width: 30px; }
.topnav-brand img.topnav-logo { height: 34px; width: auto; background: #fff; padding: 4px 10px; border-radius: 8px; }
.topnav-brand .brand-sep { color: #5b76b5; font-weight: 400; margin-left: 4px; }
.topnav .navbar-nav .nav-link {
    color: #dfe6f5 !important; font-weight: 600; font-size: .9rem;
    padding: 16px 12px !important; text-transform: uppercase; letter-spacing: .02em;
}
.topnav .navbar-nav .nav-link:hover,
.topnav .navbar-nav .show > .nav-link { color: #fff !important; background: rgba(255,255,255,.08); }
.topnav .dropdown-menu {
    border: 0; border-radius: 0 0 6px 6px; margin-top: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 6px 0;
}
.topnav .dropdown-item { font-size: .88rem; padding: 7px 18px; }
.topnav .dropdown-item:hover { background: #eef3ff; color: #0b1f4d; }
.topnav .navbar-toggler { border-color: rgba(255,255,255,.4); }
.topnav .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-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* push content below the fixed-top navbar */
.topnav-content { padding: 22px; margin-top: 60px; }
@media (max-width: 991px) {
    .topnav .navbar-nav .nav-link { padding: 8px 12px !important; }
    .topnav-content { margin-top: 70px; }
}

/* ===== Option A form theme (navy + red, refined classic) ===== */
:root {
    --navy: #13265c;
    --navy-dark: #0b1f4d;
    --accent-red: #c1281f;
    --field-border: #cbd5e1;
    --label-fg: #334155;
}

.page-title { color: var(--navy); }

.form-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--label-fg);
    margin-bottom: .35rem;
    letter-spacing: .01em;
}

.form-control, .form-select {
    border: 1px solid var(--field-border);
    border-radius: 8px;
    padding: .55rem .8rem;
    font-size: .92rem;
    color: #1e293b;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:hover, .form-select:hover { border-color: #94a3b8; }
.form-control:focus, .form-select:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 .2rem rgba(19, 38, 92, .12);
}
.form-control::placeholder { color: #9ca3af; }

/* form cards */
.card { border-radius: 10px; }
form.card { border-top: 3px solid var(--accent-red); }

/* grouped form sections */
.form-section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: .95rem; font-weight: 700; color: var(--navy);
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px; margin: 6px 0 4px;
}
.form-section-title i { color: var(--accent-red); }
.row.g-3 > * + .col-12 .form-section-title { margin-top: 14px; }

/* buttons */
.btn-primary {
    background: var(--navy); border-color: var(--navy);
    border-radius: 8px; padding: .5rem 1.4rem; font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus { background: var(--navy-dark); border-color: var(--navy-dark); }
.btn-light, .btn-outline-secondary {
    border-radius: 8px; padding: .5rem 1.2rem; font-weight: 500;
}
.btn-light { border: 1px solid var(--field-border); color: #475569; background: #fff; }
.btn-light:hover { background: #f1f5f9; border-color: #94a3b8; }

/* Tom Select to match the field theme */
.ts-control {
    border: 1px solid var(--field-border) !important;
    border-radius: 8px !important;
    padding: .45rem .8rem !important;
    font-size: .92rem;
}
.ts-wrapper.focus .ts-control {
    border-color: var(--navy) !important;
    box-shadow: 0 0 0 .2rem rgba(19, 38, 92, .12) !important;
}
.ts-control .item {
    background: #eef3ff; color: var(--navy);
    border-radius: 6px; padding: 2px 8px; font-weight: 500;
}

/* ===== Style 1 data table (navy header) ===== */
/* overflow must stay visible so the sticky header isn't clipped by the card
   or the .table-responsive wrapper (any non-visible overflow breaks sticky) */
.grid-card { overflow: visible; }
.grid-card .table-responsive { overflow: visible; }
.table-navy thead th {
    background: var(--navy); color: #fff;
    font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    border: 0; padding: 10px 12px; white-space: nowrap;
    /* keep the column header visible while scrolling, parked just below the
       fixed top navbar (54px) + breadcrumb bar (~38px) */
    position: sticky; top: 92px; z-index: 3;
}
/* pages without a breadcrumb bar: stick directly under the top navbar */
.content.topnav-content .table-navy thead th { top: 54px; }
@media (max-width: 991px) {
    .table-navy thead th { top: 104px; }
    .content.topnav-content .table-navy thead th { top: 64px; }
}
.table-navy tbody td {
    font-size: .87rem; color: #1e293b;
    padding: 8px 12px; border-bottom: 1px solid #eef0f3;
    vertical-align: middle;
}
.table-navy tbody tr:nth-child(even) { background: #f8fafc; }
.table-navy.table-hover tbody tr:hover { background: #eef3ff; }
/* vertical divider lines between columns */
.table-navy thead th { border-right: 1px solid rgba(255,255,255,.18); }
.table-navy tbody td { border-right: 1px solid #eef0f3; }
.table-navy thead th:last-child,
.table-navy tbody td:last-child { border-right: 0; }

.count-pill {
    background: #eef3ff; color: var(--navy);
    font-size: .75rem; font-weight: 600;
    padding: 3px 10px; border-radius: 12px;
}

/* ===== breadcrumb bar ===== */
.crumb-bar {
    position: fixed; top: 54px; left: 0; right: 0; z-index: 1020;
    display: flex; align-items: center; gap: 8px;
    background: #fff; border-bottom: 1px solid #e5e7eb;
    padding: 10px 22px; font-size: .85rem;
}
.crumb-home { color: var(--navy); font-size: 1rem; display: flex; }
.crumb-home:hover { color: var(--accent-red); }
.crumb-sep { color: #cbd5e1; font-size: .7rem; }
.crumb-link { color: #64748b; text-decoration: none; font-weight: 500; }
.crumb-link:hover { color: var(--navy); text-decoration: underline; }
.crumb-current { color: var(--navy); font-weight: 700; }
.content.has-crumbs { padding: 22px; margin-top: 100px; }
@media (max-width: 991px) {
    .crumb-bar { top: 64px; }
    .content.has-crumbs { margin-top: 110px; }
}

/* page size dropdown */
.page-size-select {
    width: 90px; border-radius: 8px;
    border: 1px solid var(--field-border); color: #475569;
}

/* search box */
.table-search { position: relative; }
.table-search i {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: #94a3b8; font-size: .85rem;
}
.table-search input {
    padding-left: 30px; width: 220px;
    border-radius: 8px; border: 1px solid var(--field-border);
}

/* level badges */
.level-badge {
    display: inline-block; font-size: .7rem; font-weight: 700;
    padding: 2px 10px; border-radius: 12px; letter-spacing: .03em;
}
.lv-admin { background: #fcebeb; color: #791f1f; }
.lv-nsm   { background: #eeedfe; color: #3c3489; }
.lv-zsm   { background: #eef3ff; color: #13265c; }
.lv-rsm   { background: #faeeda; color: #854f0b; }
.lv-asm   { background: #e1f5ee; color: #085041; }
.lv-none  { background: #f1f5f9; color: #475569; }

/* action buttons */
.btn-action {
    border: 1px solid var(--field-border); color: var(--navy);
    border-radius: 6px; padding: 2px 8px; background: #fff;
}
.btn-action:hover { background: #eef3ff; border-color: var(--navy); color: var(--navy); }
.btn-action-danger { color: #a32d2d; }
.btn-action-danger:hover { background: #fcebeb; border-color: #a32d2d; color: #791f1f; }

/* ===== Reallocate distributors toolbar ===== */
.reallocate-toolbar {
    padding: 14px 16px;
    border: 1px solid #e5e9f0;
    border-left: 3px solid var(--navy);
    background: #fcfdff;
}
.reallocate-toolbar .reallocate-label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: #64748b; margin-bottom: 4px;
}
.selected-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 600; color: var(--navy);
    background: #eef3ff; border-radius: 14px; padding: 4px 12px;
}
.type-badge {
    display: inline-block; font-size: .7rem; font-weight: 600;
    padding: 2px 10px; border-radius: 12px;
    background: #eef3ff; color: var(--navy); letter-spacing: .02em;
}

/* ===== Owner hierarchy tree (left sidebar filter) ===== */
.owner-tree { padding: 0; overflow: hidden; border: 1px solid #e5e9f0; }
.owner-tree-head {
    background: var(--navy); color: #fff;
    font-size: .85rem; font-weight: 600; letter-spacing: .02em;
    padding: 10px 14px; display: flex; align-items: center; gap: 8px;
}
.owner-tree-body { padding: 12px 14px; }
.owner-toggle {
    display: inline-block; font-size: .76rem; font-weight: 600;
    color: var(--navy); cursor: pointer; margin-bottom: 10px; text-decoration: none;
}
.owner-toggle:hover { text-decoration: underline; }
.owner-tree-scroll { max-height: 60vh; overflow: auto; }
.owner-list, .owner-list ul { list-style: none; margin: 0; padding: 0; }
.owner-list ul { margin-left: 16px; padding-left: 10px; margin-top: 4px; border-left: 1px solid #e5e9f0; }
.owner-list li { margin: 4px 0; }
.owner-list label {
    display: flex; align-items: flex-start; gap: 7px; margin: 0;
    font-size: .82rem; color: #334155; cursor: pointer; line-height: 1.3;
}
.owner-root > label { font-weight: 700; color: var(--navy); }
.owner-cb { margin-top: 2px; flex: 0 0 auto; }
.owner-empty { font-size: .78rem; padding: 2px 0; }
.owner-tree-body .btn-success { margin-top: 12px; }

/* collapse / expand toggle */
.owner-tree-head { justify-content: space-between; }
.owner-collapse-btn {
    background: transparent; border: 0; color: #fff; opacity: .8;
    padding: 0 2px; font-size: .9rem; line-height: 1; cursor: pointer;
}
.owner-collapse-btn:hover { opacity: 1; }
.owner-reopen {
    display: none; align-items: center; gap: 6px;
    background: var(--navy); color: #fff; border: 0; border-radius: 8px;
    font-size: .8rem; font-weight: 600; padding: 8px 11px; white-space: nowrap; cursor: pointer;
}
.owner-reopen:hover { color: #fff; opacity: .92; }
.owner-page.owner-collapsed > div:first-child { width: auto; flex: 0 0 auto; }
.owner-page.owner-collapsed > div:last-child { flex: 0 0 100%; max-width: 100%; width: 100%; }
.owner-page.owner-collapsed #ownerTree { display: none; }
.owner-page.owner-collapsed .owner-reopen { display: inline-flex; }

/* Branch Master: long City / Address cells show full text in ~4-5 lines, then scroll inside the cell.
   (max-height must sit on an inner div — table cells ignore max-height.) */
.branch-city  { min-width: 240px; max-width: 380px; vertical-align: top; }
.branch-address { min-width: 200px; max-width: 320px; vertical-align: top; }
.cell-scroll {
    max-height: 6.5em;          /* ~5 lines, then scrolls */
    overflow-y: auto;
    white-space: normal; word-break: break-word;
    padding-right: 4px;
}
.cell-scroll::-webkit-scrollbar { width: 6px; }
.cell-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ===== table pager (bottom pagination) ===== */
.table-pager {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; margin-top: 14px;
}
.table-pager .pager-info { font-size: .82rem; color: #64748b; }
.table-pager .pager-list {
    display: flex; align-items: center; gap: 4px;
    list-style: none; margin: 0; padding: 0;
}
.table-pager .pager-item a,
.table-pager .pager-dots span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 8px;
    border: 1px 
/* ===== collapsible multi-select dropdown (multiselect.js) ===== */
.ms-wrap { position: relative; }
.ms-wrap .ms-native { display: none; }
.ms-control {
    width: 100%; text-align: left; background: #fff;
    border: 1px solid var(--field-border, #ced4da); border-radius: 6px;
    padding: .375rem 2rem .375rem .75rem; font-size: .9rem; min-height: 38px; line-height: 1.6;
    position: relative; cursor: pointer; color: #1e293b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-control::after {
    content: ""; position: absolute; right: .8rem; top: 50%;
    width: .55rem; height: .55rem; transform: translateY(-70%) rotate(45deg);
    border-right: 2px solid #64748b; border-bottom: 2px solid #64748b;
}
.ms-control .ms-placeholder { color: #94a3b8; }
.ms-panel {
    display: none; position: absolute; z-index: 1050; top: calc(100% + 2px); left: 0; right: 0;
    background: #fff; border: 1px solid #e5e9f0; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12); max-height: 260px; overflow: auto; padding: 4px;
}
.ms-wrap.open .ms-panel { display: block; }
.ms-wrap.open .ms-control { border-color: var(--navy, #0b1f4d); }
.ms-option {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    border-radius: 6px; cursor: pointer; font-size: .87rem; margin: 0;
}
.ms-option:hover { background: #eef3ff; }
.ms-option input { width: 15px; height: 15px; flex: 0 0 auto; }
.ms-empty { padding: 10px; color: #94a3b8; font-size: .85rem; }

/* ===== Document Library folder cards ===== */
.lib-card {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    background: #fff; border: 1px solid #e5e9f0; border-radius: 14px;
    padding: 18px 18px 16px; height: 100%; text-decoration: none; color: #1e293b;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lib-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(15,23,42,.13);
    border-color: var(--navy); color: #1e293b;
}
.lib-icon {
    width: 50px; height: 50px; border-radius: 12px;
    background: linear-gradient(135deg, #eef3ff, #dbe6ff); color: var(--navy);
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.lib-name { font-weight: 600; font-size: 1rem; line-height: 1.25; }
.lib-count { font-size: .8rem; color: #64748b; }
.lib-badge {
    position: absolute; top: 12px; right: 12px;
    min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
    background: var(--accent-red); color: #fff;
    font-size: .75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.lib-card.lib-empty .lib-icon { background: #f1f5f9; color: #94a3b8; }
.lib-card.lib-empty .lib-name { color: #475569; }

/* ===== Settings mega-dropdown (icons + grouped columns) ===== */
.topnav .dropdown-menu.settings-menu { min-width: 480px; padding: 10px; }
.settings-menu .settings-cols { display: flex; gap: 6px; }
.settings-menu .settings-col { flex: 1 1 0; min-width: 210px; }
.settings-menu .settings-head {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .07em;
    color: #94a3b8; font-weight: 700; padding: 9px 12px 3px;
}
.settings-menu .dropdown-item {
    display: flex; align-items: center; gap: 10px;
    border-radius: 7px; padding: 7px 12px; font-size: .86rem; color: #1e293b;
}
.settings-menu .dropdown-item i { width: 18px; text-align: center; color: var(--navy); font-size: 1rem; flex: 0 0 auto; }
.settings-menu .dropdown-item:hover { background: #eef3ff; color: var(--navy-dark); }
.settings-menu .dropdown-item:hover i { color: var(--accent-red); }
@media (max-width: 991px) {
    .topnav .dropdown-menu.settings-menu { min-width: auto; }
    .settings-menu .settings-cols { flex-direction: column; gap: 0; }
}

/* Settings dropdown: scroll if it gets taller than the viewport (no items cut off) */
.topnav .dropdown-menu.settings-menu {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    overflow-x: hidden;
}
.topnav .dropdown-menu.settings-menu::-webkit-scrollbar { width: 8px; }
.topnav .dropdown-menu.settings-menu::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }