:root {
    --ax-space-18: 18px;
    --ax-blue-1000: var(--ax-secondary);
    --ax-overlay-hint-bg: rgba(3, 19, 48, 0.5);
    --login-bg-image: url('../images/images-login-backround.webp');
    --login-bg-scrim-top: rgba(8, 18, 38, 0.24);
    --login-bg-scrim-bottom: rgba(8, 18, 38, 0.4);
}

.login-page {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.login-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: var(--login-bg-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: blur(4.5px);
    transform: scale(1.02);
    pointer-events: none;
}

.login-page::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        180deg,
        var(--login-bg-scrim-top) 0%,
        var(--login-bg-scrim-bottom) 100%
    );
    pointer-events: none;
}

.login-main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    padding: 12px 16px 8px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-8);
}

.back-link-wrapper {
    padding-left: var(--ax-space-16);
}

.back-link {
    font-size: var(--ax-fs-14);
    font-weight: var(--ax-fw-500);
    gap: 8px;
    padding: 12px 16px 0px 4px;
    display: inline-flex;
}

.back-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

body.dashboard-page {
    padding: 10px 20px;
}

.padding-1 {
    padding: 16px;
}

.required-inline {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.custom-pl {
    margin-left: -50px;
}

.hidden {
    display: none !important;
}

.vertical-line {
    width: 1px;
    height: 16px;
    background-color: var(--ax-neutral-200);
    margin: 0 6px;
}

.page-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
}

.card-head h2 {
    margin: 0 0 12px 0;
    font-size: var(--ax-fs-20);
    line-height: var(--ax-lh-24);
    font-weight: var(--ax-fw-700);
    color: var(--ax-primary-heading-h1);
}

.card-divider {
    height: 1px;
    background: var(--ax-neutral-200);
    margin-top: 1px;
    margin-bottom: 15px;
}

.location-map-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: var(--ax-radius-6);
    overflow: hidden;
    background: var(--ax-sky-25);
}

.location-map-wrap .map-overlays {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 60;
    font-family: inherit;
}

.map-overlays .overlay {
    pointer-events: auto;
    box-sizing: border-box;
}

.overlay-zoom {
    position: absolute;
    left: var(--ax-space-12);
    top: var(--ax-space-12);
    display: inline-flex;
    align-items: center;
    padding: 8px var(--ax-space-12);
    height: 44px;
    min-width: 108px;
    border-radius: var(--ax-radius-8);
    background: var(--ax-white);
    border: 1px solid var(--ax-neutral-200);
    box-shadow: var(--ax-shadow-soft);
}

.overlay-zoom-right {
    position: absolute;
    right: var(--ax-space-12);
    top: var(--ax-space-12);
    display: inline-flex;
    align-items: center;
    padding: 8px var(--ax-space-12);
    height: 44px;
    min-width: 108px;
    border-radius: var(--ax-radius-8);
    background: var(--ax-white);
    border: 1px solid var(--ax-neutral-200);
    box-shadow: var(--ax-shadow-soft);
}

.zoom-value {
    text-align: center;
    font-size: var(--ax-fs-14);
    font-weight: var(--ax-fw-500);
    color: var(--ax-neutral-400);
    line-height: var(--ax-lh-24);
}

.overlay-target {
    position: absolute;
    right: 16px;
    bottom: var(--ax-space-18);
    background: var(--ax-white);
    color: var(--ax-primary);
    padding: 8px;
    border-radius: var(--ax-radius-16);
    font-size: var(--ax-fs-12);
    box-shadow: var(--ax-shadow-custom);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ax-neutral-200);
}

.overlay-target img {
    width: 20px;
    height: 20px;
    display: block;
}

.overlay-hint {
    position: absolute;
    left: 16px;
    bottom: var(--ax-space-18);
    background: var(--ax-overlay-hint-bg);
    color: var(--ax-white);
    padding: 8px var(--ax-space-12);
    border-radius: var(--ax-radius-100);
    font-size: var(--ax-fs-12);
    font-weight: var(--ax-fw-600);
    pointer-events: none;
}

.location-map-image {
    width: 100%;
    display: block;
}

.coords .col {
    min-width: 140px;
}

.uploaded-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--ax-radius-8);
    border: 1px solid var(--ax-input-border);
    background: var(--ax-white);
    margin-bottom: 10px;
}

.uploaded-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ax-white);
    border-radius: var(--ax-radius-4);
}

.uploaded-details {
    flex: 1;
    min-width: 0;
}

.uploaded-name {
    font-size: var(--ax-fs-14);
    font-weight: var(--ax-fw-600);
    color: var(--ax-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uploaded-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.uploaded-status {
    width: 36px;
    height: 36px;
    border: 1px solid var(--ax-neutral-200);
    border-radius: var(--ax-radius-6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.uploaded-status img {
    width: 16px;
    height: 16px;
}

.quote-outer {
    margin: 16px 0 0 auto;
    box-sizing: border-box;
}

.quote-panel {
    background: linear-gradient(180deg, #F3FBF4 0%, #FAFDFB 40%, #FFFFFF 100%);
    border-radius: 16px;
    border: 1px solid rgba(10, 120, 60, 0.06);
    padding: 36px 28px 28px;
    box-sizing: border-box;
}

.quote-header {
    text-align: center;
    margin-bottom: 12px;
    padding: 0;
}

.quote-header img {
    width: 52px;
    display: block;
    margin: 0 auto 6px;
}

.quote-title {
    margin: 0 0 8px;
    font-size: var(--ax-fs-22);
    line-height: var(--ax-lh-22);
    font-weight: var(--ax-fw-700);
    color: var(--ax-green-800);
}

.quote-subtitle {
    margin: 0;
    font-size: var(--ax-fs-14);
    line-height: var(--ax-lh-16);
    font-weight: var(--ax-fw-300);
    color: var(--ax-text-tertiary);
}

.quote-inner {
    margin-top: 18px;
}

.quote-row {
    display: flex;
    gap: 24px;
    align-items: stretch;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 18px;
    box-sizing: border-box;
}

.top {
    text-align: center;
}

.premium-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--ax-radius-50);
    background: var(--ax-yellow-50);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}

.premium-title {
    margin: 0;
    font-size: var(--ax-fs-20);
    line-height: var(--ax-lh-28);
    font-weight: var(--ax-fw-700);
    color: var(--ax-text-secondary);
}

.premium-subtext {
    font-size: var(--ax-fs-14);
    line-height: var(--ax-lh-28);
    font-weight: var(--ax-fw-400);
    color: var(--ax-text-muted);
}

.premium-amount {
    margin: 6px 0 8px;
    font-size: var(--ax-fs-20);
    font-weight: var(--ax-fw-700);
    color: var(--ax-text-secondary);
}

.premium-list {
    flex: 1 1 auto;
    text-align: left;
    padding: 0 8px;
    box-sizing: border-box;
}

.premium-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    align-items: center;
    gap: 12px;
    font-size: var(--ax-fs-14);
    font-weight: var(--ax-fw-500);
    color: var(--ax-text-tertiary);
}

.premium-row .val {
    min-width: 92px;
    text-align: right;
    font-size: var(--ax-fs-16);
    font-weight: var(--ax-fw-600);
    color: var(--ax-text-secondary);
}

.premium-row .negative {
    color: var(--ax-text-error);
    font-weight: var(--ax-fw-700);
}

.premium-divider-solid {
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(to right, var(--ax-neutral-200) 0px, var(--ax-neutral-200) 12px, transparent 12px, transparent 22px);
    margin: 10px 0;
}

.premium-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
}

.premium-action {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: var(--ax-button-primary-focus);
    text-decoration: none;
    font-weight: var(--ax-fw-600);
    font-size: var(--ax-fs-14);
    width: calc(100% - 16px);
    justify-content: center;
    box-sizing: border-box;
}

.premium-action img {
    width: 18px;
    height: 18px;
    display: inline-block;
}

.page-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
}

@media (max-width:980px) {
    .quote-row {
        flex-direction: column;
        gap: 18px;
    }

    .details-card,
    .premium-card {
        width: 100%;
        min-width: unset;
    }

    .premium-row .val {
        min-width: 70px;
    }
}

.ax-profile-wrapper {
    position: relative;
    display: inline-block;
}

/* avatar */
.profile-img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    object-fit: cover;
}

/* dropdown box */
.ax-profile-dropdown {
    position: absolute;
    top: 40px;
    right: 0;
    width: 220px;
    background: var(--ax-white);
    border: 1px solid var(--ax-input-border);
    border-radius: 12px;
    box-shadow: var(--ax-shadow-3);
    padding: 0;
    display: none;
    z-index: 999;
}

.ax-profile-dropdown.show {
    display: block;
}

/* top user section */
.ax-profile-header {
    display: flex;
    padding: 12px 16px;
    gap: 12px;
    align-items: center;
}

.ax-pfp-small {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.ax-profile-name {
    font-size: var(--ax-fs-14);
    font-weight: var(--ax-fw-600);
    color: var(--ax-text-primary);
    margin: 0;
}

.ax-profile-role {
    font-size: var(--ax-fs-12);
    color: var(--ax-neutral-800);
    margin-top: 2px;
}

/* divider lines */
.ax-profile-divider {
    width: 100%;
    height: 1px;
    background: var(--ax-input-border);
}

/* menu buttons */
.ax-profile-item {
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--ax-fs-14);
    color: var(--ax-input-border0);
    cursor: pointer;
    transition: background 0.18s ease;
    text-align: left;
}

.ax-profile-item:hover {
    background: var(--ax-neutral-50);
}

/* icons */
.ax-profile-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* logout style EXACTLY like screenshot */
.ax-profile-item.logout {
    color: var(--ax-red-1000);
    font-weight: var(--ax-fw-500);
}



.ax-notification-btn {
    position: relative;
    width: 40px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: var(--ax-radius-8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.ax-notification-btn:hover {
    background: rgba(3, 19, 48, 0.05);
}

.ax-notification-badge {
    position: absolute;
    top: -2px;
    right: 0px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--ax-red-900);
    color: var(--ax-white);
    font-size: 11px;
    font-weight: var(--ax-fw-600);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 1px solid var(--ax-white);
}

.notification-card {
    padding: 12px 16px;
    border: 1px solid var(--ax-neutral-200);
    border-radius: var(--ax-radius-12);
    background: var(--ax-white);
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.12s ease;
    align-items: flex-start;
}

.notification-panel {
    z-index: 9999999;
}

.notification-card:hover {
    background: var(--ax-sky-25);
    box-shadow: var(--ax-shadow-3);
}

.notification-card.unread {
    background: var(--ax-sky-25);
}

.notification-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.notification-icon img {
    width: 16px;
}

.notification-info {
    background: var(--ax-sky-blue-50);
    color: var(--ax-secondary);
}

.notification-success {
    background: rgba(11, 131, 91, 0.08);
    color: var(--ax-green-800);
}

.notification-warning {
    background: rgba(169, 147, 51, 0.08);
    color: var(--ax-secondary);
}

.notification-error {
    background: rgba(255, 56, 60, 0.06);
    color: var(--ax-red-900);
}

.notification-text {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-size: var(--ax-fs-14);
    font-weight: 400;
    color: var(--ax-text-primary);
    margin: 0 0 2px 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-title strong {
    font-size: var(--ax-fs-14);
    font-weight: 600;
    color: var(--ax-text-primary);
    line-height: 1.4;
}

.notification-time {
    font-size: var(--ax-fs-12);
    color: var(--ax-neutral-800);
    margin-top: 4px;
    display: block;
}

.offcanvas-body {
    overflow-y: auto;
    padding-top: 6px;
    padding-bottom: 20px;
}

@media (max-width: 480px) {
    .offcanvas-right {
        width: 100%;
    }
}

.notification-card .notification-badge {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ax-red-900);
    margin-left: 8px;
    flex-shrink: 0;
}

.ax-datepicker-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--ax-white);
    border: 1px solid var(--ax-neutral-200);
    border-radius: var(--ax-radius-8);
    box-shadow: var(--ax-shadow-4);
    padding: 12px;
    /* Reduced from var(--ax-space-16) */
    width: 280px;
    /* Fixed width instead of min-width */
    max-width: 280px;
    /* Prevent it from being too wide */
    z-index: var(--ax-z-dropdown);
    display: none;
}

.ax-datepicker-wrapper.active {
    display: block;
}

.datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    /* Reduced from var(--ax-space-12) */
}

.datepicker-month {
    font-size: 14px;
    /* Reduced from var(--ax-fs-16) */
    font-weight: var(--ax-fw-500);
    color: var(--ax-input-border0);
    display: flex;
    align-items: center;
    gap: 4px;
    /* Reduced from var(--ax-space-8) */
}

.datepicker-nav {
    display: flex;
    gap: 4px;
    /* Reduced from var(--ax-space-8) */
}

.nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    /* Reduced from 4px 8px */
    color: var(--ax-neutral-800);
    font-size: 14px;
    /* Reduced from var(--ax-fs-18) */
    border-radius: var(--ax-radius-4);
    transition: background var(--ax-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.nav-btn:hover {
    background: var(--ax-neutral-50);
    color: var(--ax-input-border0);
}

.datepicker-calendar {
    width: 100%;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    /* Reduced from 4px */
    margin-bottom: 4px;
    /* Reduced from var(--ax-space-8) */
}

.weekday {
    text-align: center;
    font-size: 11px;
    /* Reduced from var(--ax-fs-13) */
    font-weight: var(--ax-fw-500);
    color: var(--ax-neutral-800);
    padding: 4px 0;
    /* Reduced from 6px 0 */
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    /* Reduced from 4px */
}

/* day cells - Made smaller */
.day {
    aspect-ratio: 1;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
    /* Reduced from var(--ax-fs-14) */
    color: var(--ax-input-border0);
    border-radius: 50%;
    transition: all var(--ax-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    /* Reduced from 8px */
    min-height: 32px;
    /* Set fixed min-height */
    min-width: 32px;
    /* Set fixed min-width */
    box-sizing: border-box;
}

.day:hover:not(.disabled):not(.selected):not(.muted) {
    background: var(--ax-neutral-50);
}

.day.other-month {
    color: var(--ax-neutral-25);
    opacity: 0.6;
}

.day.selected {
    background: var(--ax-secondary);
    color: var(--ax-white);
    font-weight: var(--ax-fw-600);
    font-size: 13px;
    /* Slightly larger when selected */
}

.day.in-range {
    background: var(--ax-sky-25);
    color: var(--ax-input-border0);
}

.day.range-start {
    border-radius: 50% 0 0 50%;
}

.day.range-end {
    border-radius: 0 50% 50% 0;
}

.day.today {
    box-shadow: 0 0 0 1px var(--ax-blue-750-6);
    /* Reduced from 2px */
}

.day.disabled {
    color: var(--ax-neutral-100);
    cursor: not-allowed;
}

.day.muted {
    background: var(--ax-neutral-100);
    color: var(--ax-neutral-400);
    cursor: default;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0.6;
}

.ax-datepicker-wrapper.ax-compact {
    padding: 8px;
    width: 260px;
    max-width: 260px;
}

.ax-datepicker-wrapper.ax-compact .day {
    padding: 2px;
    font-size: 11px;
    min-height: 28px;
    min-width: 28px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ax-datepicker-wrapper {
        width: 260px;
        max-width: 260px;
        padding: 10px;
    }

    .day {
        min-height: 30px;
        min-width: 30px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .ax-datepicker-wrapper {
        width: 240px;
        max-width: 240px;
        padding: 8px;
    }

    .day {
        min-height: 28px;
        min-width: 28px;
        font-size: 10px;
        padding: 2px;
    }

    .datepicker-month {
        font-size: 13px;
    }
}

/* generic card */
.dash-card {
    background: var(--ax-white);
    border-radius: var(--ax-radius-10);
    border: 1px solid var(--ax-neutral-200);
}

.divider-line {
    border-bottom: 1px solid var(--ax-input-border);
}


.dash-header-row {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dash-card-title,
.dash-title {
    font-size: var(--ax-fs-20);
    font-weight: var(--ax-fw-600);
    color: var(--ax-text-primary);
    margin: 0;
}

.dash-title {
    font-size: var(--ax-fs-22) !important;
}

.dash-card-header {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--ax-input-border);
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.dash-card-body {
    padding: 24px;
}

.dash-filter-field {
    width: 100%;
}

.ax-filter-calendar {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    padding: 0;
    transform: translateY(-50%);
    cursor: pointer;
    background-image: url('../icons/icons-calendar.svg');
    background-repeat: no-repeat;
    background-size: contain;
}

/* ==== CHIPS ROW ==== */
.dash-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.dash-chip {
    border-radius: 999px;
    border: 1px solid var(--ax-input-border);
    background: var(--ax-white);
    padding: 4px 12px;
    font-size: var(--ax-fs-12);
    line-height: var(--ax-lh-16);
    font-weight: var(--ax-fw-400);
    color: var(--ax-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.dash-chip-x {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-chip-x img {
    width: 7px;
    height: 7px;
}

.dash-reset-link {
    border: none;
    background: transparent;
    color: var(--ax-blue-800);
    font-size: var(--ax-fs-14);
    line-height: var(--ax-lh-21);
    font-weight: var(--ax-fw-500);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.tiv-summary-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100%;
}

.tiv-chart-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 auto;
}

.tiv-chart-img {
    width: 100%;
    height: auto;
    display: block;
}

.tiv-center-text {
    position: absolute;
    text-align: center;
    bottom: 40%;
}

.tiv-center-label {
    font-size: var(--ax-fs-14);
    color: var(--ax-input-label-text);
}

.tiv-center-value {
    font-size: var(--ax-fs-22);
    font-weight: var(--ax-fw-600);
    color: var(--ax-text-primary);
}

.tiv-center-sub {
    font-size: var(--ax-fs-14);
    font-weight: var(--ax-fw-500);
    line-height: var(--ax-lh-24);
    color: var(--ax-text-tertiary);
    margin-top: 5px;
}

.tiv-left-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.tiv-legend-under-chart {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    gap: 60px;
    flex-wrap: wrap;
}

/* right stats column */

.tiv-stats-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tiv-stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: var(--ax-radius-8);
    border: 1px solid var(--ax-neutral-200);
    background: var(--ax-white);
}

.tiv-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--ax-radius-8);
    background: var(--ax-body-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tiv-stat-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tiv-stat-label {
    font-size: var(--ax-fs-14);
    color: var(--ax-text-tertiary);
}

.tiv-stat-value {
    font-size: var(--ax-fs-16);
    font-weight: var(--ax-fw-600);
    color: var(--ax-text-secondary);
}

/* legend row */

.tiv-legend-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 4px 0;
    gap: 16px;
}

.tiv-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
}

.tiv-dot-tiv {
    background: var(--ax-blue-700);
}

.tiv-dot-exposure {
    background: var(--ax-yellow-100);
}

.tiv-dot-bound {
    background-color: #2E5C8A;
}

.tiv-dot-quoted {
    background-color: #4A90E2;
}

.tiv-dot-remaining {
    background-color: #FFC107;
}

.tiv-legend-text {
    font-size: var(--ax-fs-14);
    color: var(--ax-text-tertiary);
}

.tiv-legend-values {
    display: flex;
    gap: 16px;
}

.tiv-legend-item {
    text-align: center;
}

.tiv-legend-label {
    font-size: var(--ax-fs-10);
    color: var(--ax-neutral-800);
}

.tiv-legend-value {
    font-size: var(--ax-fs-12);
    font-weight: var(--ax-fw-600);
    color: var(--ax-text-secondary);
}

.dash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ax-fs-14);
}

.dash-table thead {
    background: var(--ax-white);
}

.dash-table th {
    padding: 12px 0;
    font-size: var(--ax-fs-12);
    font-weight: var(--ax-fw-500);
    color: var(--ax-text-tertiary);
    background: var(--ax-neutral-100);
    text-align: left;
}

.dash-table th:first-child,
.dash-table td:first-child {
    padding-left: 20px;
}

.dash-table th:last-child,
.dash-table td:last-child {
    padding-right: 0;
}

.dash-table td {
    padding: 14px 0;
    border-bottom: 1px solid var(--ax-input-border);
    font-size: var(--ax-fs-14);
    color: var(--ax-text-primary);
}

.dash-table tbody tr:last-child td {
    border-bottom: none;
}

.dash-table tbody td:first-child {
    font-size: var(--ax-fs-14);
    font-weight: var(--ax-fw-400);
    color: var(--ax-text-primary);
}

.dash-select {
    position: relative;
    display: inline-block;
}

.dash-select-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 90px;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--ax-input-border);
    background: var(--ax-white);
    font-size: var(--ax-fs-14);
    cursor: pointer;
}

.dash-select-arrow {
    width: 14px;
    height: 14px;
    background-image: url('../icons/icons-down-arrow-dark.svg');
    background-repeat: no-repeat;
    background-size: 14px 14px;
}

.dash-select-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 1px);
    margin: 0;
    list-style: none;
    background: var(--ax-white);
    border: 1px solid var(--ax-input-border);
    border-radius: 4px;
    box-shadow: var(--ax-shadow-3);
    max-height: 220px;
    overflow-y: auto;
    display: none;
    z-index: 20;
}

.dash-select.open .dash-select-menu {
    display: block;
}

.dash-select-menu li {
    padding: 8px 12px;
    font-size: var(--ax-fs-14);
    cursor: pointer;
    color: var(--ax-text-secondary);
}

.dash-select-menu li:hover {
    background: var(--ax-neutral-150);
    color: var(--ax-text-primary);
}

.dash-select-menu li.active {
    font-weight: var(--ax-fw-400);
    background: var(--ax-neutral-150);
}

/* ===== TIV Zone layout ===== */

.tiv-zone-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(250px, 1fr);
    gap: 16px;
    align-items: stretch;
}

.tiv-zone-main {
    padding-right: 12px;
}

.tiv-zone-img {
    width: 100%;
    height: auto;
    display: block;
}


.tiv-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tiv-toggle-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--ax-radius-4);
    border: 1px solid transparent;
    background: var(--ax-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.tiv-toggle-btn img {
    max-width: 18px;
}

.tiv-toggle-btn.active {
    background: var(--ax-yellow-600);
}

.tiv-toggle-btn.active img {
    filter: brightness(0) invert(1);
}

.tiv-view-panel {
    display: none;
    width: 100%;
    min-height: 450px;
    position: relative;
}

.tiv-view-panel.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tiv-view-panel ngx-charts-bar-vertical-stacked {
    width: 100% !important;
    height: 450px !important;
    display: block;
    min-height: 450px;
}

.tiv-zone-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tiv-zone-card {
    border-radius: var(--ax-radius-8);
    border: 1px solid var(--ax-neutral-200);
    background: var(--ax-white);
    padding: 16px;
}

.tiv-zone-label {
    font-size: var(--ax-fs-14);
    font-weight: var(--ax-fw-400);
    color: var(--ax-text-tertiary);
    margin-bottom: 10px;
}

.tiv-zone-value {
    font-size: var(--ax-fs-16);
    font-weight: var(--ax-fw-600);
    color: var(--ax-text-secondary);
}

.occupancy-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.occupancy-right {
    padding: 18px 18px 18px 0px;
}

.occupancy-left {
    border-right: 1px solid var(--ax-input-border);
    padding: 0;
}

.occupancy-zone-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.occ-zone-label {
    font-size: var(--ax-fs-20);
    font-weight: var(--ax-fw-500);
    color: var(--ax-text-primary);
}

.occ-zone-value {
    font-size: var(--ax-fs-20);
    font-weight: var(--ax-fw-700);
    color: var(--ax-text-primary);
}

/* container should be relative for tooltip positioning */
.occ-gradient-wrap {
    position: relative;
    margin-bottom: 12px;
}

/* bar */
.occ-bar {
    display: flex;
    width: 100%;
    height: 24px;
    border-radius: 999px;
    overflow: hidden;
    cursor: pointer;
}

.occ-seg {
    flex: 1;
    transition: opacity 0.2s ease;
    cursor: pointer;
    position: relative;
}

.occ-seg:hover {
    opacity: 0.85;
}

.occ-seg-active {
    opacity: 1 !important;
}

/* segment colors (replace with your own palette) */
.occ-seg:nth-child(1) {
    background: #003878;
}

.occ-seg:nth-child(2) {
    background: #1972ff;
}

.occ-seg:nth-child(3) {
    background: #005ea8;
}

.occ-seg:nth-child(4) {
    background: #6bb6ff;
}

.occ-seg:nth-child(5) {
    background: #a1ccff;
}

.occ-seg:nth-child(6) {
    background: #bfd9ff;
}

/* tooltip pill */
.occ-tooltip {
    position: absolute;
    top: -38px;
    /* a bit closer to the bar */
    left: 0;
    /* JS sets left */
    padding: 6px 14px;
    background: #121233;
    /* dark navy/purple */
    color: var(--ax-white);
    font-size: 13px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    z-index: 99;
    transition: opacity 140ms ease;
}

.occ-tooltip::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #121233 transparent transparent transparent;
}



.occ-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 20px;
}

.occ-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: var(--ax-radius-6);
    background: var(--ax-sky-blue-150);
    border: 1px solid var(--ax-sky-blue-200);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.occ-row:hover {
    background: var(--ax-sky-blue-200);
}

.occ-row-active {
    background: var(--ax-sky-blue-50);
    border-color: var(--ax-sky-blue-100);
}

.occ-row-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.occ-name-active {
    font-size: var(--ax-fs-16);
    line-height: var(--ax-lh-16);
    font-weight: var(--ax-fw-500);
    color: var(--ax-blue-800);
}

.occ-amount-active {
    font-size: var(--ax-fs-14);
    font-weight: var(--ax-fw-600);
    color: var(--ax-blue-900);
}

.occ-name {
    font-size: var(--ax-fs-14);
    line-height: var(--ax-lh-16);
    font-weight: var(--ax-fw-500);
    color: var(--ax-text-tertiary);
}

.occ-amount {
    font-size: var(--ax-fs-14);
    line-height: var(--ax-lh-21);
    font-weight: var(--ax-fw-600);
    color: var(--ax-text-secondary);
}

.occ-dot,
.occ-dot-1,
.occ-dot-2,
.occ-dot-3,
.occ-dot-4,
.occ-dot-5 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.occ-dot {
    background: var(--ax-sky-400);
}

.occ-dot-1 {
    background: var(--ax-sky-blue-250);
}

.occ-dot-2 {
    background: var(--ax-sky-blue-300);
}

.occ-dot-3 {
    background: var(--ax-sky-blue-350);
}

.occ-dot-4 {
    background: var(--ax-blue-700);
}

.occ-dot-5 {
    background: var(--ax-sky-blue-400);
}

.occ-dot-main {
    background: var(--ax-blue-700);
}

.occupancy-right {
    padding-left: 4px;
}

.occ-sub-card {
    background: var(--ax-white);
    border-radius: var(--ax-radius-10);
    border: 1px solid var(--ax-input-border);
    box-shadow: var(--ax-shadow-1);
}

.occ-sub-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.occ-sub-title {
    font-size: var(--ax-fs-20);
    font-weight: var(--ax-fw-600);
    color: var(--ax-text-primary);
}

.occ-sub-subtext {
    font-size: var(--ax-fs-14);
    color: var(--ax-text-tertiary);
    margin-top: 5px;
}

.occ-sub-total {
    font-size: var(--ax-fs-20);
    font-weight: var(--ax-fw-700);
    color: var(--ax-text-primary);
}

.occ-sub-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
}

.occ-sub-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--ax-radius-6);
    background: var(--ax-sky-blue-150);
    border: 1px solid var(--ax-sky-blue-200);
}

.occ-sub-name {
    font-size: var(--ax-fs-14);
    line-height: var(--ax-lh-16);
    font-weight: var(--ax-fw-500);
    color: var(--ax-text-tertiary);
}

.occ-sub-amount {
    font-size: var(--ax-fs-14);
    line-height: var(--ax-lh-21);
    font-weight: var(--ax-fw-600);
    color: var(--ax-text-secondary);
}

.card-sub-header {
    border-bottom: 1px solid var(--ax-neutral-200);
    margin-bottom: 20px;
    padding: 20px;
}


@media (max-width: 991px) {
    .tiv-summary-layout {
        grid-template-columns: 1fr;
    }

    .tiv-zone-layout,
    .occupancy-layout {
        grid-template-columns: 1fr;
    }

    .occupancy-left {
        border-right: none;
        border-bottom: 1px solid var(--ax-input-border);
        padding-right: 0;
        padding-bottom: 16px;
        margin-bottom: 12px;
    }

    .tiv-zone-main {
        border-right: none;
        padding-right: 0;
        margin-bottom: 16px;
    }
}

@media (max-width: 576px) {

    .dash-filters-card,
    .dash-card {
        padding: 12px 12px 10px;
    }

    .dashboard-main {
        padding-inline: 12px;
    }

    .tiv-legend-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

.notification-header {
    border-bottom: var(--ax-border-width-1) solid var(--ax-input-border);
    padding-bottom: var(--ax-space-8);
}

.notification-left h5 {
    font-size: var(--ax-fs-20);
    font-weight: var(--ax-fw-700);
    color: var(--ax-neutral-900);
    margin: 0;
}

.mark-read-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: var(--ax-fs-14);
    line-height: var(--ax-lh-21);
    color: var(--ax-blue-800);
    font-weight: var(--ax-fw-500);
    display: flex;
    align-items: center;
}

.mark-read-btn img {
    width: 16px;
    height: 16px;
    opacity: 0.9;
}

.mark-read-btn:hover {
    text-decoration: underline;
}

/* === date input already matches your style, just ensure right padding === */
.ax-filter-input-date {
    padding-right: 34px;
}


/* === PANEL === */
.ax-filter-date {
    position: relative;
}

.ax-datepicker-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--ax-white);
    border-radius: var(--ax-radius-12);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
    padding: 10px 12px;
    z-index: var(--ax-z-dropdown);
    min-width: 520px;
    display: none;
}

.ax-filter-date.open .ax-datepicker-panel {
    display: block;
}

/* inner two-month layout */
.ax-datepicker-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--ax-space-16);
}

.ax-month {
    min-width: 240px;
}

/* month header */
.ax-month-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--ax-fs-14);
    font-weight: var(--ax-fw-500);
    color: var(--ax-neutral-800);
    padding: 4px 4px 8px;
}

.ax-month-title {
    padding: 0 6px;
}

.ax-nav-btn {
    border: none;
    background: transparent;
    font-size: var(--ax-fs-16);
    cursor: pointer;
    color: var(--ax-neutral-800);
    width: 24px;
    height: 24px;
    border-radius: var(--ax-radius-9999);
}

.ax-nav-btn:hover {
    background: var(--ax-neutral-200);
}

/* divider */
.ax-month-divider {
    width: var(--ax-border-width-1);
    background: var(--ax-input-border);
    margin: 0 2px;
}

/* weekdays */
.ax-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: var(--ax-fs-12);
    color: var(--ax-input-border);
    padding: 0 4px 4px;
}

/* days grid */
.ax-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    column-gap: 0;
    row-gap: 2px;
    padding: 0 4px 8px;
}

/* base day */
.ax-day {
    position: relative;
    width: 30px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: var(--ax-fs-12);
    color: var(--ax-input-label-text);
    border-radius: var(--ax-radius-9999);
    margin: 0 auto;
}

/* disabled days (other months) */
.ax-day.is-outside {
    visibility: hidden;
    pointer-events: none;
}

/* hover (only when not selected / not in range) */
.ax-day:not(.is-outside):not(.is-start):not(.is-end):not(.in-range):hover {
    background: var(--ax-neutral-200);
}

/* ===== continuous range background (light blue bar) ===== */
.ax-day.in-range::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    right: 0;
    background: rgba(59, 130, 246, 0.15);
    border-radius: var(--ax-radius-9999);
    z-index: -1;
}

/* start / end selected day = dark blue circles */
.ax-day.is-start,
.ax-day.is-end {
    background: var(--ax-blue-900);
    color: var(--ax-white);
    font-weight: var(--ax-fw-600);
}

/* keep pill edges rounded at the ends of the range */
.ax-day.is-start.in-range::before {
    border-top-left-radius: var(--ax-radius-9999);
    border-bottom-left-radius: var(--ax-radius-9999);
}

.ax-day.is-end.in-range::before {
    border-top-right-radius: var(--ax-radius-9999);
    border-bottom-right-radius: var(--ax-radius-9999);
}

/* ===== one special light grey day (eg. today) ===== */
.ax-day.is-today:not(.is-start):not(.is-end) {
    background: var(--ax-input-border);
    color: var(--ax-input-label-text);
    font-weight: var(--ax-fw-500);
}

.ax-filter-input-date:focus-within,
.ax-filter-date.open .ax-filter-input-date {
    border-color: var(--ax-primary);
    box-shadow: var(--ax-shadow-3);
}

.ax-filter-input-date {
    transition: border-color var(--ax-transition-fast) ease, box-shadow var(--ax-transition-fast) ease;
}

/* =========================
   POLICIES BASE / COMMON
   ========================= */

.policies-main {
    padding-bottom: var(--ax-space-32);
}

.policy-card {
    background: var(--ax-white);
    border-radius: var(--ax-radius-8);
    border: var(--ax-border-width-1) solid var(--ax-neutral-200);
    box-shadow: var(--ax-shadow-2);
    padding: var(--ax-space-16) var(--ax-space-20) var(--ax-space-20);
}

/* ===== PAGE HEADER (title + search + button) ===== */

.policy-header-row {
    display: flex;
    align-items: center;
    gap: var(--ax-space-16);
    margin-bottom: 12px;
}

.policy-title {
    font-size: var(--ax-fs-22);
    line-height: var(--ax-lh-24);
    font-weight: var(--ax-fw-600);
    color: var(--ax-text-primary);
    margin: 0;
    flex: 0 0 auto;
}

.policy-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--ax-space-16);
}

/* ===== Search field (used in Policies + Admin) ===== */

.policy-search-wrapper {
    position: relative;
    width: 420px;
    max-width: 100%;
}

.policy-search-input.ax-search-input {
    width: 100%;
    border-radius: var(--ax-radius-8);
    border-color: var(--ax-input-border);
    background: var(--ax-neutral-00);
    font-size: var(--ax-fs-14);
    font-weight: var(--ax-fw-500);
    line-height: var(--ax-lh-16);
    color: var(--ax-input-label-text);
    padding-left: 38px;
    padding-right: 32px;
    height: 36px;
}

.policy-search-input::placeholder {
    color: var(--ax-input-label-text);
}

.policy-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    opacity: 0.6;
}

.policy-search-clear img {
    width: 14px;
    height: 14px;
    display: block;
}

/* =========================
   FILTERS CARD (POLICY PAGE)
   ========================= */

.policy-filters-card {
    border: var(--ax-border-width-1) solid var(--ax-sky-blue-25);
    border-radius: var(--ax-radius-12);
    background: var(--ax-white);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 205px);
    overflow: hidden;
}

.policy-filters-header {
    flex-shrink: 0;
}

/* chips row under filters */
.policy-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ax-space-8);
    margin-top: 12px;
    align-items: center;
}

/* ===== TABLE SECTION (scroll body + fixed footer) ===== */

.policy-table-section {
    border-top: var(--ax-border-width-1) solid var(--ax-neutral-200);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.policy-table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.policy-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* header */
.policy-table thead {
    background: var(--ax-neutral-100);
}

.policy-table th {
    padding: 10px 16px;
    font-size: var(--ax-fs-12);
    line-height: var(--ax-lh-16);
    font-weight: var(--ax-fw-500);
    color: var(--ax-text-secondary);
    white-space: nowrap;
    border-top: var(--ax-border-width-1) solid var(--ax-neutral-200);
    border-bottom: none;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}

.policy-table th:last-child {
    text-align: center;
}

.policy-table td {
    padding: 10px 12px;
    font-size: var(--ax-fs-14);
    line-height: var(--ax-lh-20);
    font-weight: var(--ax-fw-400);
    color: var(--ax-text-primary);
    white-space: nowrap;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}

.policy-table td.policy-premium {
    text-align: right;
}

.policy-table td:last-child {
    text-align: center;
}

/* zebra rows */
.policy-table tbody tr {
    background: var(--ax-white);
    transition: background var(--ax-transition-fast);
}

.policy-table tbody tr:nth-child(even) {
    background: var(--ax-body-bg);
    border-bottom: var(--ax-border-width-1) solid var(--ax-sky-blue-25);
}

/* last row – no border */
.policy-table tbody tr:last-child {
    border-bottom: none;
}

.policy-table tbody tr:hover {
    background: var(--ax-neutral-50);
}

/* links + premium / reference */
.policy-table td.policy-ref a {
    color: var(--ax-blue-800);
    text-decoration: none !important;
    font-weight: var(--ax-fw-600);
    font-size: var(--ax-fs-14);
}

.policy-table td.policy-ref a:hover {
    text-decoration: underline;
}

/* =========================
   ACTION BUTTON + DROPDOWN - FIXED VERSION
   ========================= */

.policy-action-cell {
    text-align: center;
    position: relative;
}

.policy-action-wrapper {
    position: relative;
    display: inline-block;
}

.policy-action-wrapper.open {
    z-index: var(--ax-z-dropdown);
}

.policy-action-btn {
    width: 20px;
    height: 20px;
    background: var(--ax-white);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background var(--ax-transition-fast),
        border-color var(--ax-transition-fast);
    position: relative;
    z-index: 1;
}

.policy-action-btn img {
    width: 18px;
    height: 18px;
    display: block;
}

.policy-action-btn:hover {
    background: var(--ax-neutral-50);
    border-radius: 50%;
    border-color: var(--ax-neutral-300);
}

.policy-action-menu {
    position: fixed;
    min-width: 190px;
    padding: var(--ax-space-8) 0;
    background: var(--ax-white);
    border-radius: var(--ax-radius-8);
    border: var(--ax-border-width-1) solid var(--ax-neutral-200);
    box-shadow: var(--ax-shadow-4);
    z-index: var(--ax-z-modal);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--ax-transition-fast),
        transform var(--ax-transition-fast);
}

.policy-action-wrapper.open .policy-action-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.policy-action-item {
    width: 100%;
    padding: var(--ax-space-8) 14px;
    display: flex;
    align-items: center;
    gap: var(--ax-space-8);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--ax-fs-14);
    line-height: var(--ax-lh-20);
    font-weight: var(--ax-fw-500);
    color: var(--ax-text-tertiary);
    text-align: left;
}

.policy-action-item img {
    width: 16px;
    height: 16px;
    display: block;
    filter: grayscale(100%) brightness(0.5) !important;
    opacity: 1 !important;
}

.policy-action-item img,
.policy-action-item img svg,
.policy-action-item img path,
.policy-action-item img g path {
    fill: var(--ax-text-tertiary) !important;
    stroke: var(--ax-text-tertiary) !important;
    color: var(--ax-text-tertiary) !important;
}

.policy-action-item:hover {
    background: var(--ax-neutral-50);
    color: var(--ax-text-primary);
}

.policy-action-item:hover img {
    filter: grayscale(100%) brightness(0.3) !important;
    opacity: 1 !important;
}

.policy-action-item:hover img,
.policy-action-item:hover img svg,
.policy-action-item:hover img path,
.policy-action-item:hover img g path {
    fill: var(--ax-text-primary) !important;
    stroke: var(--ax-text-primary) !important;
    color: var(--ax-text-primary) !important;
}

/* =========================
   TABLE FOOTER / PAGINATION
   ========================= */

.policy-table-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ax-space-16);
    padding: var(--ax-space-8) var(--ax-space-20);
    background: var(--ax-white);
    font-size: var(--ax-fs-12);
    color: var(--ax-text-muted);
}

.policy-table-footer {
    margin-top: auto;
}

.policy-footer-left,
.policy-footer-right,
.policy-footer-jump {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ax-input-label-text);
    font-weight: var(--ax-fw-500);
    font-size: var(--ax-fs-14);
}

/* Show: dropdown */
.ax-page-size-wrap {
    position: relative;
    display: inline-block;
}

.ax-page-size {
    min-width: 50px;
    height: 40px;
    border-radius: var(--ax-radius-8);
    border: var(--ax-border-width-1) solid var(--ax-input-border);
    background: var(--ax-neutral-00);
    font-size: var(--ax-fs-14);
    font-weight: var(--ax-fw-500);
    color: var(--ax-input-active-text);
    padding: 4px 24px 4px 8px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.ax-page-size-arrow {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ax-page-size-arrow img {
    width: 12px;
    height: 12px;
    display: block;
}

/* Pagination buttons */
.ax-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ax-page-btn {
    border: var(--ax-border-width-1) solid var(--ax-secondary);
    border-radius: var(--ax-radius-6);
    background: var(--ax-white);
}

.ax-page-btn,
.ax-page-num {
    background: none;
    min-width: 32px;
    height: 32px;
    font-size: var(--ax-fs-14);
    font-weight: var(--ax-fw-500);
    color: var(--ax-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    cursor: pointer;
    transition: border-color var(--ax-transition-fast),
        background var(--ax-transition-fast),
        color var(--ax-transition-fast);
}

.ax-page-btn img {
    width: 14px;
    height: 14px;
    display: block;
}

.ax-page-btn[disabled] {
    opacity: 0.45;
    cursor: default;
}

/* active page number */
.ax-page-num.active {
    background: var(--ax-neutral-00);
    border-color: var(--ax-blue-200);
    color: var(--ax-blue-700);
}

/* hover states */
.ax-page-btn:hover:not([disabled]),
.ax-page-num:hover:not(.active) {
    border-color: var(--ax-neutral-300);
    background: var(--ax-neutral-00);
}

/* Jump to input */
.ax-page-jump-input {
    width: 37px;
    height: 40px;
    border-radius: var(--ax-radius-6);
    border: var(--ax-border-width-1) solid var(--ax-neutral-200);
    padding: 4px 6px;
    font-size: var(--ax-fs-12);
    text-align: center;
    color: var(--ax-text-secondary);
    background: var(--ax-neutral-00);
}

/* =========================
   ADMIN LAYOUT (SIDEBAR + MAIN)
   ========================= */

.admin-layout {
    display: flex;
    gap: var(--ax-space-16);
    padding: var(--ax-space-16) var(--ax-space-16) 24px;
}

.admin-main {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-sidebar {
    flex-shrink: 0;
    width: 260px;
    background: var(--ax-yellow-50);
    border-radius: var(--ax-radius-12);
    padding: var(--ax-space-16) var(--ax-space-16) var(--ax-space-20);
    display: flex;
    flex-direction: column;
    border: var(--ax-border-width-1) solid var(--ax-yellow-100);
}

.admin-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ax-space-20);
}

.admin-sidebar-title {
    font-size: var(--ax-fs-20);
    font-weight: var(--ax-fw-600);
    color: var(--ax-secondary);
}

.admin-sidebar-toggle {
    width: 24px;
    height: 24px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.admin-sidebar-toggle img {
    width: 24px;
    height: 24px;
    display: block;
}

.admin-section-title {
    font-size: var(--ax-fs-14);
    font-weight: var(--ax-fw-500);
    color: var(--ax-text-muted);
    margin: 18px 0 8px;
}

.admin-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    color: var(--ax-text-tertiary);
    text-decoration: none;
    font-size: var(--ax-fs-14);
    font-weight: var(--ax-fw-500);
    margin-bottom: 10px;
    transition: background var(--ax-transition-fast),
        color var(--ax-transition-fast);
}

.admin-nav-link-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-nav-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* HOVER - Only apply when NOT active */
.admin-nav-link:not(.active):hover {
    background: var(--ax-yellow-25);
    color: var(--ax-text-secondary);
}

.admin-nav-link:not(.active):hover .admin-nav-icon svg path {
    fill: var(--ax-neutral-550) !important;
}

/* ACTIVE STATE */
.admin-nav-link.active {
    background: var(--ax-white);
    color: var(--ax-secondary);
}

.admin-nav-link.active .admin-nav-icon svg path {
    fill: var(--ax-primary) !important;
}

/* ACTIVE BORDER STRIP */
.admin-nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ax-button-primary);
}

/* COLLAPSED STATES */
.admin-sidebar.collapsed {
    width: 80px;
    padding-inline: 12px;
}

.admin-sidebar.collapsed .admin-sidebar-title,
.admin-sidebar.collapsed .admin-section-title,
.admin-sidebar.collapsed .admin-nav-label {
    display: none;
}

.admin-sidebar.collapsed .admin-nav-link {
    justify-content: center;
    padding-inline: 10px;
}

.admin-sidebar.collapsed .admin-nav-link-inner {
    gap: 0;
}

.admin-sidebar.collapsed .admin-nav-link.active::before {
    left: 4px;
}

.admin-sidebar.collapsed .admin-sidebar-header {
    justify-content: center !important;
}

/* Small screens: stack layout */
@media (max-width: 991.98px) {
    .admin-layout {
        flex-direction: column;
    }

    .admin-sidebar,
    .admin-sidebar.collapsed {
        width: 100%;
        min-height: auto;
        flex-direction: row;
        align-items: flex-start;
        overflow-x: auto;
    }
}

/* ===== RIGHT: COUNTRY CONTENT ===== */
.admin-main-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    gap: var(--ax-space-16);
}

.admin-main-header-title {
    font-size: var(--ax-fs-20);
    font-weight: var(--ax-fw-600);
    color: var(--ax-text-primary);
    margin: 0;
    flex: 0 0 auto;
}

.admin-main-header-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

.admin-main-header-right {
    flex: 0 0 auto;
}

.admin-country-card {
    border-radius: var(--ax-radius-12);
    border: var(--ax-border-width-1) solid var(--ax-sky-blue-25);
    background: var(--ax-white);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 190px);
    overflow: hidden;
    padding: 0;
}

.admin-country-inner {
    padding: var(--ax-space-16) var(--ax-space-16) 0;
    flex-shrink: 0;
}

/* filters + chips inside admin card */
.admin-filters-row {
    margin-top: var(--ax-space-8);
}

.admin-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ax-space-8);
    margin-top: 12px;
    align-items: center;
}

/* table section inside admin card */
.admin-table-section {
    border-top: var(--ax-border-width-1) solid var(--ax-neutral-200);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-top: 12px;
}

.admin-table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    justify-items: start;
}

.narrow-field {
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
}

.narrow-field .ax-input,
.narrow-field .ax-dropdown-input,
.narrow-field .ax-input-wrapper {
    width: 100%;
    box-sizing: border-box;
}

.ax-toast-success {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ax-green-800);
    color: var(--ax-white);
    padding: 14px 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 360px;
    max-width: 90%;
    font-size: var(--ax-fs-14);
    z-index: var(--ax-z-modal);
}

.ax-toast-icon {
    color: var(--ax-success-fg);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: var(--ax-fw-700);
}

.ax-toast-text {
    flex: 1;
}

.ax-toast-close {
    background: transparent;
    border: none;
    color: var(--ax-white);
    cursor: pointer;
}

.loc-category-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-8);
}

.ax-modal-heading-custom {
    color: var(--ax-text-primary);
    font-size: var(--ax-fs-20);
    font-weight: var(--ax-fw-600);
    margin-bottom: 25px;
}

.ax-zone-modal {
    width: 440px;
    padding: 20px 22px 14px;
    border-radius: 14px;
    background: var(--ax-white);
    box-shadow: var(--ax-shadow-custom);
    position: relative;
}

.policy-action-cell {
    text-align: center;
    position: relative;
}

.policy-action-wrapper {
    position: relative;
    display: inline-block;
}

.policy-action-wrapper.open {
    z-index: var(--ax-z-dropdown);
}

.policy-action-btn {
    width: 20px;
    height: 20px;
    background: var(--ax-white);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background var(--ax-transition-fast),
        border-color var(--ax-transition-fast);
    position: relative;
    z-index: 1;
}

.policy-action-btn img {
    width: 18px;
    height: 18px;
    display: block;
}

.policy-action-btn:hover {
    background: var(--ax-neutral-50);
    border-radius: 50%;
    border-color: var(--ax-neutral-300);
}

.policy-action-menu {
    position: fixed;
    min-width: 190px;
    padding: var(--ax-space-8) 0;
    background: var(--ax-white);
    border-radius: var(--ax-radius-8);
    border: var(--ax-border-width-1) solid var(--ax-neutral-200);
    box-shadow: var(--ax-shadow-4);
    z-index: var(--ax-z-modal);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--ax-transition-fast),
        transform var(--ax-transition-fast);
}

.policy-action-wrapper.open .policy-action-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.policy-action-item {
    width: 100%;
    padding: var(--ax-space-8) 14px;
    display: flex;
    align-items: center;
    gap: var(--ax-space-8);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--ax-fs-14);
    line-height: var(--ax-lh-20);
    font-weight: var(--ax-fw-500);
    color: var(--ax-text-tertiary);
    text-align: left;
}

.policy-action-item img {
    width: 16px;
    height: 16px;
    display: block;
    filter: grayscale(100%) brightness(0.5) !important;
    opacity: 1 !important;
}

.policy-action-item img,
.policy-action-item img svg,
.policy-action-item img path,
.policy-action-item img g path {
    fill: var(--ax-text-tertiary) !important;
    stroke: var(--ax-text-tertiary) !important;
    color: var(--ax-text-tertiary) !important;
}

.policy-action-item:hover {
    background: var(--ax-neutral-50);
    color: var(--ax-text-primary);
}

.policy-action-item:hover img {
    filter: grayscale(100%) brightness(0.3) !important;
    opacity: 1 !important;
}

.policy-action-item:hover img,
.policy-action-item:hover img svg,
.policy-action-item:hover img path,
.policy-action-item:hover img g path {
    fill: var(--ax-text-primary) !important;
    stroke: var(--ax-text-primary) !important;
    color: var(--ax-text-primary) !important;
}

.zone-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.zone-table thead {
    background: var(--ax-neutral-100);
}

.zone-table th {
    padding: 12px 16px;
    font-size: var(--ax-fs-12);
    line-height: var(--ax-lh-16);
    font-weight: var(--ax-fw-500);
    color: var(--ax-text-secondary);
    border-bottom: var(--ax-border-width-1) solid var(--ax-neutral-200);
    white-space: nowrap;
    text-align: left;
}

.zone-table th:last-child {
    text-align: center;
}

.zone-table td {
    padding: 12px 16px;
    font-size: var(--ax-fs-14);
    line-height: var(--ax-lh-20);
    color: var(--ax-text-primary);
    border-bottom: var(--ax-border-width-1) solid var(--ax-neutral-200);
    white-space: nowrap;
    text-align: left;
}

.zone-table tbody tr:nth-child(even) {
    background: var(--ax-body-bg);
}

.zone-table tbody tr:last-child td {
    border-bottom: none;
}

.zone-table td:last-child {
    text-align: center;
}

.zone-table .policy-action-btn img {
    width: 18px;
    height: 18px;
}

.checkbox-label-custom {
    font-size: var(--ax-fs-16);
    font-weight: var(--ax-fw-600);
    color: var(--ax-text-primary);
}

.country-page {
    padding-bottom: var(--ax-space-32);
}

.country-back-link {
    border: none;
    background: transparent;
    padding: 0;
    margin-bottom: var(--ax-space-8);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ax-fs-12);
    color: var(--ax-text-secondary);
    cursor: pointer;
}

.country-back-link img {
    width: 14px;
    height: 14px;
}

.country-card-header {
    margin-bottom: 12px;
}

.country-title {
    margin: 0;
    font-size: var(--ax-fs-22);
    line-height: var(--ax-lh-24);
    font-weight: var(--ax-fw-600);
    color: var(--ax-text-primary);
}

.country-tabs-wrap {
    margin-bottom: 18px;
}

.country-tabs {
    display: inline-flex;
    gap: var(--ax-space-8);
    background: var(--ax-neutral-25);
    border-radius: var(--ax-radius-9999);
    padding: 4px;
}

.country-tab {
    border: none;
    background: transparent;
    border-radius: var(--ax-radius-5);
    padding: 12px 20px;
    font-size: var(--ax-fs-14);
    font-weight: var(--ax-fw-500);
    line-height: var(--ax-lh-20);
    color: var(--ax-text-primary, #1E293B);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--ax-transition-fast),
        color var(--ax-transition-fast),
        box-shadow var(--ax-transition-fast);
}

.country-tab:hover {
    color: var(--ax-text-secondary, #64748B);
}

.country-tab.active {
    background: var(--ax-secondary);
    color: var(--ax-white);
    font-weight: var(--ax-fw-600, 600);
    border-radius: var(--ax-radius-5, 5px) var(--ax-radius-5, 5px) 0 0;
}

.country-card-body {
    height: calc(100vh - 420px);
    min-width: 0;
    overflow-y: auto;
    background: var(--ax-white);
    padding: 0;
}

.country-panel {
    display: none;
}

.country-panel.active {
    display: block;
}

.country-section-title {
    font-size: var(--ax-fs-16);
    font-weight: var(--ax-fw-600);
    color: var(--ax-neutral-800);
    margin: 0 0 var(--ax-space-20);
}

.country-form-row {
    margin-bottom: var(--ax-space-16);
}

.country-toggle-row {
    margin-top: var(--ax-space-20);
    display: flex;
    align-items: center;
    gap: 10px;
}

.ax-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.ax-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ax-switch-slider {
    width: 56px;
    height: 32px;
    border-radius: var(--ax-radius-9999);
    background: var(--ax-neutral-200);
    position: relative;
    display: inline-block;
    transition: background 0.24s ease;
}

.ax-switch-slider::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ax-white);
    box-shadow: var(--ax-shadow-1);
    transition: transform 0.24s ease;
}

.ax-switch input:checked+.ax-switch-slider {
    background: var(--ax-primary);
}

.ax-switch input:checked+.ax-switch-slider::before {
    transform: translateX(24px);
}

.ax-switch-label {
    font-size: var(--ax-fs-14);
    color: var(--ax-text-secondary);
    user-select: none;
}

.country-table-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ax-space-20);
}

.country-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    padding: 0;
    font-size: var(--ax-fs-14);
    font-weight: var(--ax-fw-500);
    color: var(--ax-blue-800);
    cursor: pointer;
}

.country-inline-link img {
    width: 16px;
    height: 16px;
    display: block;
}

.country-panel table.policy-table th,
.country-panel table.policy-table td {
    padding-block: 9px;
}

.country-card-footer {
    border-top: 1px solid var(--ax-neutral-200);
    margin-top: 24px;
    padding: 12px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    /* LEFT vs RIGHT */
    gap: 12px;
    background: #fff;
}

.country-footer-left {
    display: flex;
    align-items: center;
}

.country-footer-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ax-btn-text-cancel {
    display: inline-flex;
    align-items: center;
    gap: var(--ax-space-8);
    border: none;
    background: transparent;
    padding: 0;
    font-size: var(--ax-fs-14);
    font-weight: var(--ax-fw-500);
    color: var(--ax-blue-800);
    cursor: pointer;
}

.ax-btn-text-cancel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ql-container 
{
min-height: 100px;
}

.mail-editor {
    width: 100%;
    height: 100%;
    margin-top: 10px;
}
.email-body-field {
    border:0px solid transparent !important;
}