/* Light admin UI for Sales Tracking project. This file contains the custom header dropdown,
   sidebar accordion and global UI polish without depending on template dropdown plugins. */
:root {
    --track-bg: #f5f7fb;
    --track-surface: #ffffff;
    --track-surface-soft: #f8fafc;
    --track-border: #e5eaf2;
    --track-border-strong: #d7deea;
    --track-text: #14213d;
    --track-muted: #64748b;
    --track-primary: #2563eb;
    --track-primary-dark: #1d4ed8;
    --track-primary-soft: #eaf1ff;
    --track-info: #06b6d4;
    --track-success: #16a34a;
    --track-danger: #dc2626;
    --track-warning: #f59e0b;
    --track-radius: 18px;
    --track-shadow: 0 16px 38px rgba(15, 23, 42, .08);
    --track-shadow-sm: 0 8px 22px rgba(15, 23, 42, .06);
}

html, body {
    background: var(--track-bg) !important;
    color: var(--track-text);
    font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .09), transparent 32%),
        radial-gradient(circle at top right, rgba(6, 182, 212, .08), transparent 28%);
    z-index: -1;
}

a { color: var(--track-primary); }
a:hover { color: var(--track-primary-dark); }

.wrapper { background: transparent !important; }

/* Header */
.topbar {
    height: 70px !important;
    left: 270px !important;
    background: rgba(255, 255, 255, .88) !important;
    border-bottom: 1px solid rgba(226, 232, 240, .85) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
    backdrop-filter: blur(14px);
}

.topbar .navbar {
    height: 70px !important;
    padding: 0 26px !important;
}

.mobile-toggle-menu {
    width: 42px;
    height: 42px;
    border-radius: 14px !important;
    color: var(--track-primary) !important;
    background: var(--track-primary-soft) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-toggle-menu i { font-size: 24px; }

.user-img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .18);
}

.custom-user-dropdown { position: relative; }

.custom-user-dropdown-toggle {
    border: 1px solid var(--track-border);
    background: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 10px 7px 8px;
    color: var(--track-text);
    cursor: pointer;
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.custom-user-dropdown-toggle:hover,
.custom-user-dropdown.is-open .custom-user-dropdown-toggle {
    border-color: rgba(37, 99, 235, .28);
    box-shadow: 0 12px 28px rgba(37, 99, 235, .11);
    transform: translateY(-1px);
}

.custom-user-dropdown-toggle:focus {
    outline: 3px solid rgba(37, 99, 235, .16);
    outline-offset: 2px;
}

.user-info { line-height: 1.1; }
.user-name {
    color: var(--track-text);
    font-weight: 500;
    font-size: 14px;
}

.custom-user-chevron,
.custom-sidebar-chevron { transition: transform .18s ease; }
.custom-user-dropdown.is-open .custom-user-chevron,
.custom-sidebar-item.is-open > .custom-sidebar-toggle .custom-sidebar-chevron { transform: rotate(180deg); }

.custom-user-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 1050;
    min-width: 220px;
    display: none;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--track-border);
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .14);
}

.custom-user-dropdown.is-open .custom-user-dropdown-menu { display: block; animation: trackFadeUp .16s ease; }

.custom-user-dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 11px 12px;
    color: var(--track-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-radius: 13px;
}

.custom-user-dropdown-item:hover,
.custom-user-dropdown-item:focus {
    color: var(--track-primary);
    background: var(--track-primary-soft);
    text-decoration: none;
}

.custom-user-dropdown-divider {
    height: 1px;
    margin: 8px 4px;
    background: var(--track-border);
}

/* Light Sidebar */
.sidebar-wrapper {
    width: 270px !important;
    background: rgba(255, 255, 255, .94) !important;
    border-right: 1px solid rgba(226, 232, 240, .9) !important;
    box-shadow: 12px 0 35px rgba(15, 23, 42, .06) !important;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-header.custom-sidebar-brand {
    width: 270px !important;
    height: 78px !important;
    background: rgba(255, 255, 255, .96) !important;
    border-bottom: 1px solid var(--track-border) !important;
    padding: 0 18px !important;
}

.custom-sidebar-brand-link {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
    color: var(--track-text);
    text-decoration: none;
}

.custom-sidebar-brand-link:hover,
.custom-sidebar-brand-link:focus { color: var(--track-text); text-decoration: none; }

.custom-sidebar-brand-logo {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eff6ff 0%, #ecfeff 100%);
    padding: 6px;
    border: 1px solid rgba(37, 99, 235, .14);
    box-shadow: 0 10px 24px rgba(37, 99, 235, .12);
    flex: 0 0 46px;
}

.custom-sidebar-brand-logo .logo-icon {
    width: 100% !important;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    padding: 2px;
    border-radius: 12px;
}

.custom-sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.custom-sidebar-brand-text strong { font-size: 16px; letter-spacing: .1px; white-space: nowrap; color: var(--track-text); }
.custom-sidebar-brand-text small { color: var(--track-muted); font-size: 12px; margin-top: 4px; white-space: nowrap; }

.custom-sidebar-collapse {
    width: 38px;
    height: 38px;
    border: 1px solid var(--track-border) !important;
    border-radius: 14px;
    color: var(--track-primary) !important;
    background: var(--track-primary-soft) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.custom-sidebar-collapse:hover { color: #fff !important; background: var(--track-primary) !important; }

.custom-sidebar-nav { padding: 94px 16px 22px; }

.custom-sidebar-section {
    padding: 12px 12px 8px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .13em;
}

.custom-sidebar-menu,
.custom-sidebar-menu ul { list-style: none; margin: 0; padding: 0 !important; }
.custom-sidebar-menu + .custom-sidebar-section,
.custom-sidebar-menu-secondary { margin-top: 12px; }
.custom-sidebar-item { margin: 5px 0; }

.custom-sidebar-link {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 17px;
    background: transparent;
    color: #475569;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    text-align: left;
    position: relative;
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.custom-sidebar-link:hover,
.custom-sidebar-link:focus {
    color: var(--track-primary);
    background: var(--track-primary-soft);
    text-decoration: none;
    transform: translateX(2px);
}

.custom-sidebar-link.active,
.custom-sidebar-item.is-open > .custom-sidebar-toggle {
    color: var(--track-primary);
    background: linear-gradient(135deg, #eff6ff 0%, #ecfeff 100%);
    border: 1px solid rgba(37, 99, 235, .14);
    box-shadow: 0 12px 26px rgba(37, 99, 235, .10);
}

.custom-sidebar-link.active::before,
.custom-sidebar-item.is-open > .custom-sidebar-toggle::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 13px;
    bottom: 13px;
    width: 4px;
    border-radius: 999px;
    background: var(--track-primary);
}

.custom-sidebar-icon {
    width: 34px;
    height: 34px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #64748b;
    flex: 0 0 34px;
}
.custom-sidebar-icon i { font-size: 20px; }

.custom-sidebar-link:hover .custom-sidebar-icon,
.custom-sidebar-link.active .custom-sidebar-icon,
.custom-sidebar-item.is-open > .custom-sidebar-toggle .custom-sidebar-icon {
    background: #dbeafe;
    color: var(--track-primary);
}

.custom-sidebar-link .menu-title {
    flex: 1;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-sidebar-badge {
    min-width: 23px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 600;
    color: var(--track-primary);
    background: #dbeafe;
    border: 1px solid rgba(37, 99, 235, .14);
}

.custom-sidebar-chevron { color: #94a3b8; font-size: 19px; transition: transform .18s ease, color .18s ease; }
.custom-sidebar-item.is-open > .custom-sidebar-toggle .custom-sidebar-chevron { color: var(--track-primary); transform: rotate(180deg); }

.custom-sidebar-submenu {
    display: none;
    padding: 8px 0 8px 18px !important;
    margin: 4px 0 4px 18px !important;
    border-left: 1px dashed #cbd5e1;
}
.custom-sidebar-item.is-open > .custom-sidebar-submenu { display: block; animation: trackFadeUp .16s ease-out; }

.custom-sidebar-sublink {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #64748b;
    text-decoration: none;
    padding: 9px 12px;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 500;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

.custom-sidebar-sublink:hover,
.custom-sidebar-sublink:focus {
    color: var(--track-primary);
    background: #eff6ff;
    text-decoration: none;
    transform: translateX(2px);
}

.custom-sidebar-sublink.active { color: var(--track-primary); background: #dbeafe; }
.custom-sidebar-dot { width: 7px; height: 7px; border-radius: 999px; background: #cbd5e1; flex: 0 0 7px; }
.custom-sidebar-sublink.active .custom-sidebar-dot,
.custom-sidebar-sublink:hover .custom-sidebar-dot { background: var(--track-primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, .10); }

.custom-sidebar-help-card {
    margin: 22px 0 0;
    padding: 15px;
    border-radius: 20px;
    background: linear-gradient(135deg, #eff6ff, #ecfeff);
    border: 1px solid rgba(37, 99, 235, .12);
    color: var(--track-text);
    display: flex;
    gap: 12px;
    align-items: center;
}

.custom-sidebar-help-icon {
    width: 40px;
    height: 40px;
    border-radius: 15px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--track-primary);
    flex: 0 0 40px;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .10);
}
.custom-sidebar-help-icon i { font-size: 22px; }
.custom-sidebar-help-card strong,
.custom-sidebar-help-card span { display: block; }
.custom-sidebar-help-card strong { color: var(--track-text); font-size: 13px; }
.custom-sidebar-help-card span { color: var(--track-muted); font-size: 11px; margin-top: 2px; }

/* Page layout */
.page-wrapper {
    margin-left: 270px !important;
    margin-top: 70px !important;
    margin-bottom: 42px !important;
    min-height: calc(100vh - 70px);
}

.page-content { padding: 28px 30px 22px !important; }


.page-trail,
.page-toolbar {
    width: 100%;
    max-width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0 0 16px;
    box-shadow: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--track-border);
}

.page-trail-left {
    gap: 18px;
    min-width: 0;
}

.page-trail-back {
    border: 1px solid var(--track-border);
    background: #ffffff;
    color: #334155;
    border-radius: 12px;
    min-height: 40px;
    padding: 0 15px 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .045);
    transition: border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.page-trail-back i {
    font-size: 19px;
    color: var(--track-primary);
}

.page-trail-back:hover {
    background: #ffffff;
    border-color: rgba(37, 99, 235, .35);
    color: var(--track-primary);
    box-shadow: 0 10px 22px rgba(37, 99, 235, .10);
    transform: translateX(-2px);
}

.page-trail-divider { display: none; }

.page-trail-nav {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
    color: var(--track-muted);
    font-size: 14px;
}

.page-trail-home {
    width: auto;
    height: auto;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--track-muted);
    background: transparent;
    text-decoration: none;
    border: 0;
    padding: 0;
    font-weight: 400;
}

.page-trail-home:hover {
    color: var(--track-primary);
    background: transparent;
    text-decoration: none;
}

.page-trail-home i {
    font-size: 17px;
    color: var(--track-primary);
}

.page-trail-separator {
    color: #cbd5e1;
    font-size: 18px;
}

.page-trail-title {
    color: #111827;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-heading-row h5 { font-weight: 600; }
.page-heading-row .text-muted { font-size: 15px; }
.table-primary-text { font-weight: 500; color: var(--track-text); }

.page-footer {
    left: 270px !important;
    background: rgba(255,255,255,.86) !important;
    border-top: 1px solid var(--track-border);
    color: var(--track-muted);
    box-shadow: none !important;
}

/* Cards, tables, forms */
.card {
    border: 1px solid var(--track-border) !important;
    border-radius: var(--track-radius) !important;
    background: var(--track-surface) !important;
    box-shadow: var(--track-shadow-sm) !important;
    overflow: hidden;
}

.card-header {
    background: #fff !important;
    border-bottom: 1px solid var(--track-border) !important;
    padding: 18px 20px !important;
}

.card-body { padding: 20px !important; }

.radius-10 { border-radius: var(--track-radius) !important; }

h1, h2, h3, h4, h5, h6 { color: var(--track-text); font-weight: 600; }
.text-muted { color: var(--track-muted) !important; }

.table-responsive {
    border: 1px solid var(--track-border);
    border-radius: 16px;
    overflow: auto;
    background: #fff;
}

.table { margin-bottom: 0; color: var(--track-text); }
.table > :not(caption) > * > * {
    padding: 14px 16px;
    border-bottom-color: var(--track-border);
    vertical-align: middle;
}
.table thead th,
.table-light th {
    background: #f8fafc !important;
    color: #334155 !important;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--track-border) !important;
    white-space: nowrap;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: #fbfdff; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: #eff6ff; }
.table-bordered { border-color: var(--track-border) !important; }

.badge {
    border-radius: 999px;
    font-weight: 600;
    padding: .45rem .72rem;
}
.bg-primary { background-color: var(--track-primary) !important; }
.bg-success { background-color: var(--track-success) !important; }
.bg-danger { background-color: var(--track-danger) !important; }
.bg-light { background-color: #eef2f7 !important; }

.btn {
    border-radius: 13px !important;
    font-weight: 600;
    box-shadow: none !important;
}
.btn-primary {
    background: var(--track-primary) !important;
    border-color: var(--track-primary) !important;
}
.btn-primary:hover { background: var(--track-primary-dark) !important; border-color: var(--track-primary-dark) !important; }
.btn-success { background: var(--track-success) !important; border-color: var(--track-success) !important; }
.btn-danger { background: var(--track-danger) !important; border-color: var(--track-danger) !important; }
.btn-info { background: var(--track-info) !important; border-color: var(--track-info) !important; color: #fff !important; }
.btn-light { background: #f1f5f9 !important; border-color: var(--track-border) !important; color: var(--track-text) !important; }
.btn-sm { padding: .42rem .72rem !important; }

.form-control,
.form-select {
    min-height: 44px;
    border-radius: 13px !important;
    border-color: var(--track-border-strong) !important;
    color: var(--track-text) !important;
    background-color: #fff !important;
}
.form-control:focus,
.form-select:focus {
    border-color: rgba(37, 99, 235, .65) !important;
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .12) !important;
}
.form-label { color: #334155; font-weight: 600; }
.form-check-input:checked { background-color: var(--track-primary); border-color: var(--track-primary); }

.modal-content {
    border: 0 !important;
    border-radius: 22px !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18) !important;
}
.modal-header,
.modal-footer { border-color: var(--track-border) !important; }

.pagination .page-link {
    border-radius: 11px !important;
    margin: 0 3px;
    color: var(--track-primary);
    border-color: var(--track-border);
    font-weight: 500;
}
.pagination .active .page-link,
.page-item.active .page-link {
    background: var(--track-primary) !important;
    border-color: var(--track-primary) !important;
}

/* Dashboard and tracking components */
.tracking-card {
    border-radius: 20px !important;
    box-shadow: var(--track-shadow-sm) !important;
    transition: transform .2s ease, box-shadow .2s ease;
}
.tracking-card:hover { transform: translateY(-3px); box-shadow: var(--track-shadow) !important; }
.tracking-icon {
    height: 52px !important;
    width: 52px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #eff6ff, #ecfeff) !important;
    color: var(--track-primary) !important;
}
.tracking-empty {
    border: 1px dashed #bfdbfe !important;
    border-radius: 18px !important;
    background: #f8fbff !important;
}
.status-dot { box-shadow: 0 0 0 4px rgba(22, 163, 74, .10); }

.content-loader { background: rgba(245, 247, 251, .72) !important; backdrop-filter: blur(4px); }
.content-loader-ring { border-color: #dbeafe !important; border-top-color: var(--track-primary) !important; }

.overlay {
    background: rgba(15, 23, 42, .42) !important;
    backdrop-filter: blur(3px);
}

@keyframes trackFadeUp {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Collapsed desktop sidebar support */
@media screen and (min-width: 1025px) {
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-header.custom-sidebar-brand { width: 82px !important; justify-content: center; padding: 0 12px !important; }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper { width: 82px !important; }
    .wrapper.toggled:not(.sidebar-hovered) .topbar { left: 82px !important; }
    .wrapper.toggled:not(.sidebar-hovered) .page-wrapper,
    .wrapper.toggled:not(.sidebar-hovered) .page-footer { margin-left: 82px !important; left: 82px !important; }
    .wrapper.toggled:not(.sidebar-hovered) .custom-sidebar-nav { padding-left: 12px; padding-right: 12px; }
    .wrapper.toggled:not(.sidebar-hovered) .custom-sidebar-brand-text,
    .wrapper.toggled:not(.sidebar-hovered) .custom-sidebar-section,
    .wrapper.toggled:not(.sidebar-hovered) .custom-sidebar-help-card,
    .wrapper.toggled:not(.sidebar-hovered) .custom-sidebar-link .menu-title,
    .wrapper.toggled:not(.sidebar-hovered) .custom-sidebar-badge,
    .wrapper.toggled:not(.sidebar-hovered) .custom-sidebar-chevron,
    .wrapper.toggled:not(.sidebar-hovered) .custom-sidebar-submenu { display: none !important; }
    .wrapper.toggled:not(.sidebar-hovered) .custom-sidebar-link { justify-content: center; padding: 10px; }
    .wrapper.toggled:not(.sidebar-hovered) .custom-sidebar-link.active::before,
    .wrapper.toggled:not(.sidebar-hovered) .custom-sidebar-item.is-open > .custom-sidebar-toggle::before { left: -12px; }
}

@media (max-width: 991px) {
    .sidebar-wrapper { left: -285px !important; width: 270px !important; }
    .sidebar-header.custom-sidebar-brand { width: 270px !important; }
    .topbar { left: 0 !important; height: 66px !important; }
    .topbar .navbar { height: 66px !important; padding: 0 16px !important; }
    .page-wrapper { margin-left: 0 !important; margin-top: 66px !important; }
    .page-footer { left: 0 !important; }
    .wrapper.toggled .sidebar-wrapper { left: 0 !important; }
    .wrapper.toggled .overlay { display: block; }
    .page-content { padding: 20px 16px !important; }
    .custom-sidebar-nav { padding-top: 92px; }
}

@media (max-width: 575px) {
    .user-info { display: none; }
    .custom-user-dropdown-toggle { padding-right: 8px; }
    .custom-user-dropdown-menu { right: -4px; min-width: 210px; }
    .card-body { padding: 16px !important; }
    .table > :not(caption) > * > * { padding: 12px; }
}


/* Softer refined UI update */
:root {
    --track-text: #1f2937;
    --track-muted: #6b7280;
    --track-bg: #f7f9fc;
    --track-radius: 16px;
    --track-shadow: 0 14px 34px rgba(15, 23, 42, .07);
    --track-shadow-sm: 0 7px 18px rgba(15, 23, 42, .045);
}

body {
    font-weight: 400;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.breadcrumb-title,
.user-name,
.custom-sidebar-brand-text strong,
.custom-sidebar-link .menu-title,
.custom-sidebar-sublink,
.form-label,
.btn,
.badge,
.table thead th,
.pagination .page-link {
    font-weight: 500 !important;
}

h5, .h5 { font-size: 1.06rem; }
h6, .h6 { font-size: .94rem; }
small, .small { font-weight: 400 !important; }

.custom-sidebar-section {
    font-weight: 500 !important;
    letter-spacing: .11em;
    color: #9aa7b7;
}

.custom-sidebar-link {
    min-height: 46px;
    border-radius: 14px;
    padding: 9px 11px;
}

.custom-sidebar-icon {
    width: 32px;
    height: 32px;
    border-radius: 11px;
}

.custom-sidebar-sublink {
    padding: 8px 11px;
    border-radius: 11px;
}

.card {
    border-radius: 16px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .045) !important;
}

.card-header {
    padding: 16px 18px !important;
}

.card-body {
    padding: 18px !important;
}

.form-label {
    margin-bottom: 7px;
    color: #374151;
}

.form-control,
.form-select {
    min-height: 42px;
    font-size: 14px;
    border-radius: 12px !important;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--track-danger) !important;
    background-image: none !important;
}

.invalid-feedback,
.form-error-text {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--track-danger);
    font-weight: 400;
}

.validation-summary {
    border: 1px solid #fecaca;
    background: #fff5f5;
    color: #991b1b;
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 13px;
}

.validation-summary ul {
    margin: 7px 0 0 18px;
    padding: 0;
}

.star,
.required-star {
    color: var(--track-danger);
    font-weight: 500 !important;
}

.btn {
    border-radius: 12px !important;
    letter-spacing: 0;
}

.btn-sm {
    padding: .36rem .65rem !important;
    font-size: .82rem;
}

.table > :not(caption) > * > * {
    padding: 12px 14px;
}

.table thead th,
.table-light th {
    letter-spacing: .035em;
}

.badge {
    padding: .38rem .62rem;
}

.page-breadcrumb {
    box-shadow: 0 6px 18px rgba(15, 23, 42, .035);
}

.modal-header .modal-title,
#modal_title {
    font-weight: 500 !important;
}

/* Page list alignment polish */
.page-heading-row + hr {
    border-color: var(--track-border);
    opacity: 1;
    margin: 24px 0;
}
.card .card-header h5 { font-weight: 600; }
.btn i { vertical-align: middle; }

/* Flat breadcrumb responsive polish */
@media (max-width: 575px) {
    .page-trail,
    .page-toolbar {
        display: flex !important;
        padding-bottom: 12px;
        margin-bottom: 18px !important;
    }
    .page-trail-left {
        gap: 10px;
        width: 100%;
    }
    .page-trail-back {
        min-height: 36px;
        padding: 0 10px;
    }
    .page-trail-back span,
    .page-trail-home span {
        display: none;
    }
    .page-trail-title {
        max-width: calc(100vw - 150px);
    }
}

/* Custom toast notifications */
.track-toast-stack {
    position: fixed;
    top: 88px;
    right: 24px;
    z-index: 3000;
    width: min(390px, calc(100vw - 32px));
    display: grid;
    gap: 12px;
}

.track-toast {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 46px 14px 14px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--track-border);
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .14);
    backdrop-filter: blur(14px);
    animation: trackToastIn .22s ease both;
}

.track-toast-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    font-size: 20px;
}

.track-toast-success .track-toast-icon {
    color: #047857;
    background: #dcfce7;
}

.track-toast-error .track-toast-icon {
    color: #b91c1c;
    background: #fee2e2;
}

.track-toast-content {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.track-toast-content strong {
    color: var(--track-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.track-toast-content span {
    color: var(--track-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    word-break: break-word;
}

.track-toast-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 10px;
    background: #f1f5f9;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.track-toast-close:hover {
    background: #e2e8f0;
    color: var(--track-text);
}

.track-toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    transform-origin: left;
    animation: trackToastProgress 5.8s linear forwards;
}

.track-toast-success .track-toast-progress { background: #22c55e; }
.track-toast-error .track-toast-progress { background: #ef4444; }
.track-toast.is-hiding { animation: trackToastOut .18s ease forwards; }

@keyframes trackToastIn {
    from { opacity: 0; transform: translateY(-12px) translateX(12px); }
    to { opacity: 1; transform: translateY(0) translateX(0); }
}

@keyframes trackToastOut {
    to { opacity: 0; transform: translateY(-8px) translateX(16px); }
}

@keyframes trackToastProgress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* Visit tracking module */
.filter-card .card-body { padding: 18px; }
.table-count-text { color: var(--track-muted); font-size: 13px; font-weight: 400; }
.visit-photo-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid var(--track-border);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}
.visit-photo-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #94a3b8;
    border: 1px dashed #cbd5e1;
    font-size: 24px;
}
.map-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    text-decoration: none;
}
.visit-photo-preview {
    width: 140px;
    height: 105px;
    border-radius: 18px;
    object-fit: cover;
    border: 1px solid var(--track-border);
    box-shadow: var(--track-shadow-sm);
}
.visit-photo-empty {
    min-height: 105px;
    width: 180px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--track-muted);
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
}
.visit-detail-photo {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    border-radius: 22px;
    border: 1px solid var(--track-border);
    background: #f8fafc;
}
.visit-detail-photo-empty {
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 42px;
}
.visit-profile-card h5 { margin: 16px 0 4px; font-weight: 600; }
.visit-profile-card p { margin: 0; color: var(--track-muted); }
.visit-info-list { display: grid; gap: 12px; }
.visit-info-list > div,
.info-tile {
    padding: 13px 14px;
    border: 1px solid var(--track-border);
    background: #fbfdff;
    border-radius: 16px;
}
.visit-info-list span,
.info-tile span {
    display: block;
    color: var(--track-muted);
    font-size: 12px;
    margin-bottom: 4px;
}
.visit-info-list strong,
.info-tile strong {
    display: block;
    color: var(--track-text);
    font-size: 14px;
    font-weight: 500;
    word-break: break-word;
}
.section-title-light {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 14px;
    color: var(--track-text);
}
.visit-map-wrapper {
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid var(--track-border);
    background: #f8fafc;
    min-height: 360px;
}
.visit-map-wrapper iframe {
    width: 100%;
    min-height: 360px;
    border: 0;
    display: block;
}
.empty-state-mini {
    padding: 28px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: var(--track-muted);
    text-align: center;
}

@media (max-width: 575.98px) {
    .track-toast-stack { top: 76px; right: 16px; left: 16px; width: auto; }
    .visit-map-wrapper,
    .visit-map-wrapper iframe { min-height: 260px; }
}


/* Improved admin dropdown */
.admin-account-menu {
    width: 290px;
    padding: 10px;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .16);
}
.admin-account-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
    margin-bottom: 8px;
}
.admin-account-head img {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    object-fit: cover;
    border: 1px solid #dbeafe;
}
.admin-account-head strong { display: block; font-weight: 600; color: #0f172a; }
.admin-account-head span { display: block; font-size: 12px; color: #64748b; word-break: break-word; }
.admin-menu-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    font-size: 18px;
}
.custom-user-dropdown-item {
    gap: 10px;
    min-height: 44px;
    border-radius: 14px;
}
.custom-user-dropdown-item:hover .admin-menu-icon { background: #dbeafe; }
.admin-menu-badge {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 11px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.logout-item { color: #dc2626 !important; }
.logout-item .admin-menu-icon { color: #dc2626; background: #fee2e2; }

/* Custom confirmation dialog */
.track-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .34);
    backdrop-filter: blur(8px);
}
.track-confirm-backdrop.is-open { display: flex; animation: confirmFade .16s ease; }
.track-confirm-dialog {
    width: min(430px, 100%);
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, .9);
    box-shadow: 0 28px 80px rgba(15, 23, 42, .24);
    padding: 26px;
    text-align: center;
    animation: confirmPop .18s ease;
}
.track-confirm-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 16px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff1f2;
    color: #e11d48;
    font-size: 34px;
}
.track-confirm-content h5 {
    font-size: 20px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 8px;
}
.track-confirm-content p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}
.track-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}
.track-confirm-actions .btn {
    min-width: 118px;
    border-radius: 14px;
    font-weight: 500;
    padding: 10px 16px;
}
@keyframes confirmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirmPop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Account pages */
.notification-empty-card,
.form-card,
.password-card { border-radius: 24px; }
.notification-empty-icon {
    width: 74px;
    height: 74px;
    border-radius: 24px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    font-size: 38px;
}
.profile-preview-card {
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
    padding: 24px;
    text-align: center;
}
.profile-preview-card img {
    width: 104px;
    height: 104px;
    border-radius: 28px;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
    margin-bottom: 14px;
}
.profile-preview-card strong { display:block; color:#0f172a; font-weight:600; }
.profile-preview-card span { display:block; color:#64748b; font-size:13px; word-break:break-word; }

@media (max-width: 575.98px) {
    .track-confirm-actions { flex-direction: column-reverse; }
    .track-confirm-actions .btn { width: 100%; }
}

/* Visit orders UI */
.form-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-section-title::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 0 5px #dbeafe;
}
.visit-orders-section {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 18px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}
.visit-order-row {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}
.visit-order-row + .visit-order-row { margin-top: 14px; }
.visit-order-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #e2e8f0;
    color: #475569;
    font-size: 13px;
}
.visit-order-row-head strong {
    color: #2563eb;
    font-weight: 600;
}
.visit-order-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 500;
}
.visit-orders-table td,
.visit-orders-table th { white-space: nowrap; }
.order-total {
    background: #f8fafc !important;
    color: #0f172a;
    font-weight: 500;
}
@media (max-width: 575.98px) {
    .visit-orders-section { padding: 14px; border-radius: 18px; }
    .visit-order-row { padding: 14px; }
}


/* Header, dropdown, footer and list refinement update */
.topbar {
    height: 76px !important;
    background: rgba(255,255,255,.94) !important;
    border-bottom: 1px solid #e8eef7 !important;
    box-shadow: 0 12px 34px rgba(15,23,42,.055) !important;
}
.topbar .navbar { height: 76px !important; width: 100%; }
.header-title {
    flex-direction: column;
    line-height: 1.15;
    padding-left: 2px;
}
.header-title span {
    font-size: 15px;
    font-weight: 500;
    color: #172033;
}
.header-title small {
    margin-top: 3px;
    font-size: 12px;
    color: #7a8799;
}
.mobile-toggle-menu {
    width: 44px;
    height: 44px;
    border-radius: 16px !important;
    background: #eef5ff !important;
    border: 1px solid #dbeafe !important;
    box-shadow: 0 8px 18px rgba(37,99,235,.08);
}
.header-quick-actions { margin-right: 8px; }
.header-icon-btn {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    background: #fff;
    border: 1px solid #e3eaf5;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, color .16s ease, background .16s ease, border-color .16s ease;
}
.header-icon-btn i { font-size: 20px; }
.header-icon-btn:hover,
.header-icon-btn:focus {
    color: var(--track-primary);
    background: #f3f8ff;
    border-color: #bfdbfe;
    box-shadow: 0 10px 24px rgba(37,99,235,.10);
    transform: translateY(-1px);
    text-decoration: none;
}
.header-icon-btn.has-dot::after {
    content: '';
    position: absolute;
    top: 9px;
    right: 10px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #ef4444;
    border: 2px solid #fff;
}
.custom-user-dropdown-toggle {
    min-height: 52px;
    padding: 6px 12px 6px 7px;
    border-radius: 18px;
    border-color: #dbe5f3;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
}
.user-img { width: 42px !important; height: 42px !important; border-radius: 15px !important; }
.user-info small {
    display: block;
    margin-top: 2px;
    color: #7a8799;
    font-size: 11px;
    font-weight: 400;
}
.admin-account-menu {
    width: 330px;
    padding: 12px;
    border-radius: 24px;
    border-color: #e2eaf5;
    box-shadow: 0 26px 70px rgba(15, 23, 42, .18);
}
.admin-account-head {
    background: #f8fbff;
    border: 1px solid #e7effa;
    margin-bottom: 10px;
}
.admin-account-grid { display: grid; gap: 4px; }
.custom-user-dropdown-item {
    min-height: 48px;
    padding: 9px 10px;
    color: #243044;
    font-weight: 500 !important;
}
.custom-user-dropdown-item:hover,
.custom-user-dropdown-item:focus {
    background: #f4f8ff;
    color: var(--track-primary);
}
.admin-menu-icon {
    width: 36px;
    height: 36px;
    border-radius: 13px;
    background: #f0f6ff;
}
.logout-item:hover { background: #fff5f5 !important; }

.page-footer.developer-footer {
    padding: 10px 18px !important;
    min-height: 50px;
    background: rgba(255,255,255,.94) !important;
}
.developer-footer-inner {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}
.developer-footer-inner strong { color: #263244; font-weight: 500; }
.developer-divider {
    width: 1px;
    height: 14px;
    background: #d8e0eb;
}
.developer-contact { color: #7a8799; }

.page-heading-row h5,
.d-flex.justify-content-between h5 {
    font-size: 1.12rem;
    font-weight: 500 !important;
    color: #14213d;
}
.page-heading-divider {
    opacity: 1;
    border-color: #e2e8f0;
    margin: 20px 0 26px;
}
.table-card {
    border-radius: 22px !important;
    box-shadow: 0 12px 32px rgba(15,23,42,.05) !important;
}
.table-card .card-body { padding: 22px !important; }
.list-toolbar-form { margin-bottom: 14px; }
.list-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}
.list-toolbar-group { display: grid; gap: 8px; }
.list-toolbar .form-label {
    color: #334155;
    font-size: 13px;
    font-weight: 500 !important;
}
.list-limit-control .form-select {
    width: 92px;
    min-height: 44px;
}
.list-search-control { min-width: min(310px, 100%); }
.list-search-box { position: relative; }
.list-search-box i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 18px;
    pointer-events: none;
}
.list-search-box .form-control { padding-left: 42px; min-height: 44px; }
.table-responsive {
    border-radius: 18px;
    border-color: #e2e8f0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.admin-list-table { border-collapse: separate; border-spacing: 0; }
.admin-list-table > :not(caption) > * > * {
    padding: 14px 16px;
    border-bottom: 1px solid #e8eef7;
    border-left: 0 !important;
    border-right: 0 !important;
}
.admin-list-table tbody tr:last-child td { border-bottom: 0; }
.admin-list-table tbody tr { transition: background .16s ease, box-shadow .16s ease; }
.admin-list-table tbody tr:hover > * { background: #f8fbff !important; }
.table-head-soft th,
.admin-list-table thead th {
    background: #f8fafd !important;
    color: #475569 !important;
    font-size: 12px;
    font-weight: 500 !important;
    letter-spacing: .035em;
    text-transform: uppercase;
    border-bottom: 1px solid #dfe7f2 !important;
}
.admin-list-table td { color: #243044; font-size: 14px; }
.admin-list-table .btn-sm {
    min-width: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35rem .55rem !important;
    border-radius: 12px !important;
}
.admin-list-table .badge { font-weight: 500 !important; }
.table-primary-text { font-weight: 500 !important; color: #152238; }
#pagination { margin-top: 14px; }

@media (max-width: 767.98px) {
    .header-title { display: none !important; }
    .header-quick-actions .header-icon-btn:not(.has-dot) { display: none; }
    .admin-account-menu { width: min(320px, calc(100vw - 26px)); right: -2px; }
    .list-toolbar { align-items: stretch; }
    .list-search-control { min-width: 100%; }
    .list-limit-control { width: 100%; }
    .list-limit-control .form-select { width: 100%; }
    .developer-divider { display: none; }
    .developer-footer-inner { justify-content: center; text-align: center; }
}

/* SPA pagination + dashboard analytics */
.pagination-shell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #edf2f7;
}
.pagination-info {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #64748b;
    font-size: 14px;
}
.pagination-info strong {
    color: #0f172a;
    font-weight: 600;
}
.admin-pagination {
    gap: 6px;
    flex-wrap: wrap;
}
.admin-pagination .page-link {
    border: 1px solid #e2e8f0;
    min-width: 38px;
    height: 38px;
    border-radius: 12px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #475569;
    font-weight: 500;
    box-shadow: none !important;
}
.admin-pagination .page-link:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}
.admin-pagination .active .page-link,
.admin-pagination .page-item.active span.page-link {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.admin-pagination .disabled .page-link {
    background: #f8fafc;
    color: #cbd5e1;
}
.dashboard-filter-card {
    border: 1px solid #e4ebf5;
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}
.dashboard-metric-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #e6edf6;
    border-radius: 20px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}
.dashboard-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .08);
}
.dashboard-metric-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eaf2ff;
    color: #2563eb;
    font-size: 24px;
}
.dashboard-metric-card .metric-label {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 5px;
}
.dashboard-metric-card .metric-value {
    color: #0f172a;
    font-weight: 650;
    letter-spacing: -.03em;
}
.analytics-chart-card {
    border: 1px solid #e6edf6;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
}
.visit-chart {
    display: grid;
    grid-template-columns: repeat(7, minmax(56px, 1fr));
    gap: 12px;
    min-height: 260px;
    align-items: end;
    padding: 18px 8px 4px;
}
.visit-chart-day {
    display: grid;
    gap: 8px;
    text-align: center;
    color: #64748b;
    font-size: 12px;
}
.visit-chart-bars {
    height: 170px;
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 6px;
    padding: 0 4px;
    border-bottom: 1px solid #e2e8f0;
}
.visit-chart-bar {
    width: 16px;
    min-height: 8px;
    border-radius: 999px 999px 4px 4px;
    transition: height .2s ease;
}
.visit-chart-bar.visits { background: linear-gradient(180deg, #60a5fa, #2563eb); }
.visit-chart-bar.orders { background: linear-gradient(180deg, #34d399, #059669); }
.visit-chart-value {
    color: #1e293b;
    font-size: 12px;
    font-weight: 600;
    min-height: 16px;
}
.chart-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: #64748b;
    font-size: 13px;
}
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.chart-legend .legend-visits { background: #2563eb; }
.chart-legend .legend-orders { background: #059669; }
@media (max-width: 767.98px) {
    .pagination-shell { align-items: flex-start; }
    .admin-pagination .page-link { min-width: 34px; height: 34px; font-size: 13px; }
    .visit-chart { overflow-x: auto; grid-template-columns: repeat(7, 72px); }
}


.location-panel-title {
    padding: 14px 16px;
    border: 1px solid rgba(37, 99, 235, .12);
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fbff 0%, #f0fdfa 100%);
}


/* Interactive Leaflet location picker */
.map-picker-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 5200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    backdrop-filter: blur(6px);
}
.map-picker-backdrop.is-open { display: flex; }
.map-picker-dialog {
    width: min(980px, 100%);
    max-height: calc(100vh - 36px);
    overflow: auto;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 28px 90px rgba(15, 23, 42, .28);
    border: 1px solid rgba(226, 232, 240, .9);
}
.map-picker-header,
.map-picker-footer {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--track-border);
}
.map-picker-footer { border-top: 1px solid var(--track-border); border-bottom: 0; justify-content: flex-end; flex-wrap: wrap; }
.map-picker-body { padding: 18px; }
.map-picker-canvas {
    width: 100%;
    height: min(58vh, 520px);
    min-height: 390px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--track-border);
    background: #eef2ff;
    position: relative;
}

.map-picker-canvas .leaflet-container { width: 100%; height: 100%; min-height: inherit; }
.map-picker-canvas .leaflet-control-container { font-family: inherit; }
.map-picker-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--track-muted);
    font-weight: 600;
}
.map-picker-search-results {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
    max-height: 150px;
    overflow: auto;
}
.map-picker-result {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--track-border);
    background: #f8fafc;
    color: var(--track-text);
    text-align: left;
    cursor: pointer;
}
.map-picker-result:hover {
    background: var(--track-primary-soft);
    border-color: rgba(37, 99, 235, .25);
    color: var(--track-primary-dark);
}
.map-picker-result i { margin-top: 2px; color: var(--track-primary); }
.map-picker-no-result {
    padding: 10px 12px;
    border-radius: 14px;
    background: #f8fafc;
    color: var(--track-muted);
    border: 1px dashed #cbd5e1;
}
.map-picker-selected {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 10px;
}
.map-picker-selected > div {
    padding: 10px 12px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid var(--track-border);
}
.map-picker-selected strong,
.map-picker-selected span { color: var(--track-text); word-break: break-word; }
@media (max-width: 767.98px) {
    .map-picker-selected { grid-template-columns: 1fr; }
    .map-picker-canvas { min-height: 300px; height: 50vh; }
}

#leafletMapPickerCanvas {
    min-height: 430px;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: #f1f5f9;
}


/* Polished form arrangement for shop and visit screens */
.admin-form-panel {
    border: 1px solid #e6edf7;
    border-radius: 22px;
    padding: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .035);
}
.admin-form-panel + .admin-form-panel { margin-top: 18px; }
.admin-form-panel .form-control,
.admin-form-panel .form-select {
    min-height: 44px;
}
.visit-type-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.visit-type-option {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.visit-type-option:hover {
    border-color: rgba(37, 99, 235, .38);
    box-shadow: 0 8px 18px rgba(37, 99, 235, .08);
}
.visit-type-option:has(input:checked) {
    border-color: rgba(37, 99, 235, .55);
    background: #eff6ff;
}
.visit-type-option span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    color: #334155;
    line-height: 1.2;
}
.visit-photo-empty,
.visit-photo-preview {
    max-width: 100%;
}
.visit-photo-empty {
    min-height: 76px;
    width: 100%;
    border: 1px dashed #d7e0ed;
    border-radius: 16px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    color: #64748b;
    font-size: 13px;
}
.visit-photo-empty i { font-size: 20px; }
.visit-photo-empty.has-image-preview { min-height: 92px; }
.location-panel-title {
    padding: 0;
    border: 0;
    background: transparent;
}
@media (max-width: 767.98px) {
    .admin-form-panel { padding: 14px; border-radius: 18px; }
    .visit-type-selector { grid-template-columns: 1fr; }
}


/* Premium table actions and status toggles */
.table-action-group {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px;
    border: 1px solid rgba(226, 232, 240, .95);
    background: rgba(248, 250, 252, .9);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    white-space: nowrap;
}

.table-action-btn {
    width: 34px;
    height: 34px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #334155 !important;
    background: #fff !important;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .07);
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}

.table-action-btn i { font-size: 18px; line-height: 1; }
.table-action-btn:hover,
.table-action-btn:focus {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .12);
    text-decoration: none !important;
}

.table-action-btn.action-view { color: #0369a1 !important; background: #e0f2fe !important; }
.table-action-btn.action-edit { color: #1d4ed8 !important; background: #dbeafe !important; }
.table-action-btn.action-punch { color: #7c3aed !important; background: #ede9fe !important; }
.table-action-btn.action-image { color: #0f766e !important; background: #ccfbf1 !important; width: auto; min-width: 72px; padding: 0 12px !important; gap: 5px; font-weight: 700; }
.table-action-btn.action-delete { color: #b91c1c !important; background: #fee2e2 !important; }
.table-action-btn.action-delete:hover { color: #fff !important; background: #dc2626 !important; }

.status-toggle-btn {
    min-width: 112px;
    height: 34px;
    border: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .01em;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
    transition: transform .16s ease, box-shadow .16s ease;
}
.status-toggle-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(15, 23, 42, .12); }
.status-toggle-btn.is-active { background: #dcfce7 !important; color: #047857 !important; }
.status-toggle-btn.is-inactive { background: #fee2e2 !important; color: #b91c1c !important; }
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(255,255,255,.65);
}
.status-help-text { display:block; margin-top: 4px; font-size: 11px; color: #94a3b8; }

@media (max-width: 767.98px) {
    .table-action-group { gap: 5px; padding: 4px; }
    .table-action-btn { width: 32px; height: 32px; }
    .status-toggle-btn { min-width: 98px; }
}


/* Admin punch form arrangement */
.admin-punch-form { width: 100%; }
.admin-punch-panel {
    border: 1px solid var(--track-border);
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 18px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .05);
}
.admin-punch-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--track-border);
}
.admin-punch-actions-top { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.admin-punch-actions-top .btn { min-height: 42px; border-radius: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.admin-punch-submit-row { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--track-border); }
.admin-punch-submit-row .btn { min-height: 44px; border-radius: 14px; font-weight: 800; display: inline-flex; align-items: center; gap: 7px; padding-inline: 18px; }
@media (max-width: 767.98px) {
    .admin-punch-head { flex-direction: column; }
    .admin-punch-actions-top, .admin-punch-actions-top .btn, .admin-punch-submit-row .btn { width: 100%; }
    .admin-punch-actions-top .btn, .admin-punch-submit-row .btn { justify-content: center; }
}