@font-face {
    font-family: "Regular";
    src: url("../../fonts/MTN\ Brighter\ Sans\ Regular.ttf") format("truetype");
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

@font-face {
    font-family: "Light";
    src: url("../../fonts/MTN\ Brighter\ Sans\ Light.ttf") format("truetype");
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

@font-face {
    font-family: "Medium";
    src: url("../../fonts/MTN\ Brighter\ Sans\ Medium.ttf") format("truetype");
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

@font-face {
    font-family: "Bold";
    src: url("../../fonts/MTN\ Brighter\ Sans\ Bold.ttf") format("truetype");
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}
.app-content .app-content-container::-webkit-scrollbar {
    height: 8px;
    width: 5px;
}

.app-content .app-content-container::-webkit-scrollbar-thumb {
    background-color: var(--labelColor);
}

:root {
    --mtn-yellow: #cf2e2e;
    --mtn-black: #111216;
    --mtn-black-soft: #15161b;
    --mtn-grey-bg: #f5f5f7;
    --mtn-grey-soft: #e5e7eb;
    --mtn-grey-muted: #9ca3af;
    --mtn-border-soft: #e2e4ea;
    --mtn-success: #16a34a;
    --mtn-danger: #dc2626;
    --mtn-warning: #f97316;
    --montserratRegular: "Regular";
    --montserratMedium: "Medium";
    --montserratLight: "Light";
    --montserratBold: "Bold";
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--montserratRegular);
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

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

/* ===== sidebar ===== */

.sidebar {
    width: 18%;
    /* background: radial-gradient(
        circle at top left,
        #1f2027 0,
        #0b0b0f 55%,
        #000 100%
    ); */
    color: #000;
    padding: 8px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 1;
}

.sidebar::-webkit-scrollbar {
    width: 7px;
    background-color: var(--mtn-grey-soft);
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: var(--mtn-grey-muted);
    border-radius: 10px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-radius: 10px;
    padding: 6px 13px;
    margin: 0.5rem 0.5rem 2rem 0.5rem;
}

.sidebar-logo {
    display: flex;
    height: 100px;
    align-items: center;
    justify-content: center;
}

.sidebar-logo img {
    height: 100%;
    width: 100%;
}

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
}

.sidebar-brand-text span:first-child {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.05em;
    font-family: var(--montserratBold);
    text-transform: uppercase;
    color: rgba(249, 250, 251, 0.9);
}

.sidebar-brand-text span:last-child {
    font-size: 13px;
    color: var(--mtn-yellow);
    text-align: right;
    font-family: var(--montserratBold);
}

.sidebar-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(153, 153, 153, 1);
    padding: 10px 10px 4px;
    font-family: var(--montserratBold);
}

.nav-list {
    list-style: none;
    margin-top: 4px;
    background-color: rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    padding: 7px;
}

.nav-item {
    margin-bottom: 4px;
}

.nav-link {
    display: flex;
    align-items: center;
    text-transform: capitalize;
    font-weight: bold;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    color: #000;
    text-decoration: none;
    transition: all 0.18s ease-out;
}

.nav-link i {
    font-size: 13px;
    width: 18px;
    text-align: center;
}

.nav-link .badge {
    background-color: var(--mtn-yellow);
    padding: 6px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.nav-link:hover {
    background: rgba(249, 250, 251, 0.04);
    transform: translateX(2px);
}

.nav-link.active {
    background-color: var(--mtn-yellow);
    color: #fff;
}

.nav-link.active > div span {
    font-family: var(--montserratBold);
}

.nav-link.active i {
    color: #fff;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 5px;
    border-top: 1px solid rgba(249, 250, 251, 0.06);
    font-size: 11px;
    color: rgba(156, 163, 175, 0.9);
}

.sidebar-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.sidebar-footer-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(249, 250, 251, 0.85);
}
.sidebar-footer-badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.1);
    color: #5eead4;
}
.sidebar-footer-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ===== Main area ===== */
.main {
    width: 82%;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    height: 100vh;
}

.main::-webkit-scrollbar {
    height: 8px;
    width: 5px;
}

.main::-webkit-scrollbar-thumb {
    background-color: var(--mtn-grey-muted);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    box-shadow: 10px 5px 30px rgba(15, 23, 42, 0.06);
    border-bottom: 4px solid rgba(229, 231, 235, 0.8);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--montserratBold);
    font-size: 24px;
}

.topbar-left span {
    font-family: var(--montserratBold);
    font-size: 24px;
    color: var(--mtn-yellow);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-right .image-section {
    position: relative;
    display: flex;
    align-items: center;
}

.topbar-right .image-section .image {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
}

.topbar-right .image-section .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 4px solid var(--mtn-yellow);
    border-radius: 50%;
}

.topbar-right .image-section .online {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #22c55e;
    border: 2px solid #f9fafb;
}

.topbar-right .name-section {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    line-height: 1.2;
}

.topbar-right .name-section span:first-child {
    font-size: 20px;
    font-family: var(--montserratLight);
}

.topbar-right .name-section span:last-child {
    font-size: 13px;
    font-family: var(--montserratLight);
}

.breadcrumb-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1rem;
}

.breadcrumb-container .breadcrumb-title {
    display: flex;
    flex-direction: column;
}

.breadcrumb-container .breadcrumb-title h1 {
    color: #333333;
    font-size: 30px;
    margin-bottom: 0;
    line-height: normal;
}

.breadcrumb-container .breadcrumb-title p {
    color: #666666;
    font-size: 14px;
    font-family: var(--montserratLight);
}

.breadcrumb-container .breadcrumb-steps {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb-container .breadcrumb-steps .step {
    font-size: 17px;
    color: #666666;
}

.breadcrumb-container .breadcrumb-steps .step.active {
    color: var(--mtn-yellow);
}

.mobile-menu {
    display: none;
}

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    z-index: 900;
}

@media screen and (max-width: 768px) {
    .main {
        width: 100%;
    }

    .main::-webkit-scrollbar {
        display: none;
    }

    .main::-webkit-scrollbar-thumb {
        display: none;
    }

    .main-content {
        padding: 10px !important;
    }

    .topbar {
        padding: 20px 10px !important;
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        right: 0;
        z-index: 1000;
        background-color: #0b0b0f;
        color: white;
        box-shadow: none;
        border-bottom: none;
    }

    .topbar-right {
        display: none;
    }

    .mobile-menu {
        display: block;
    }

    .mobile-menu img {
        height: 40px;
    }

    .sidebar {
        display: none;
    }

    .breadcrumb-container {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        gap: 1rem;
    }

    .breadcrumb-container .breadcrumb-title h1 {
        font-size: 20px;
    }

    .breadcrumb-container .breadcrumb-steps .step {
        font-size: 14px;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: -260px;
        transition: left 0.3s ease;
        z-index: 1000;
    }

    .sidebar.sidebar-open {
        left: 0;
    }

    .menu-overlay.active {
        display: block;
    }
}

@media screen and (max-width: 350px) {
    .topbar-left {
        font-size: 20px;
    }

    .topbar-left span {
        font-size: 20px;
    }
}

/* ===================================== AUTH SECTION || LOGIN ================================= */
.auth-container {
    display: flex;
    flex-direction: column;
    background-image: url("../../images/background.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

.auth-container::-webkit-scrollbar {
    height: 8px;
    width: 5px;
}

.auth-container::-webkit-scrollbar-thumb {
    background-color: var(--labelColor);
}

.auth-header-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.auth-header-container img {
    height: 100%;
}

.auth-content {
    display: flex;
    flex-direction: column;
    width: 40%;
    margin: 0 auto;
}

.auth-content > div {
    margin-bottom: 2rem;
}

.auth-content h1 {
    text-align: center;
    color: #0d0d0d;
    font-size: 50px;
    font-family: var(--montserratBold);
}

.auth-content h2 {
    text-align: center;
    color: #0d0d0d;
    font-size: 100px;
    font-family: var(--montserratBold);
}

.auth-content form h3 {
    text-align: center;
    color: #0d0d0d;
    font-size: 25px;
    font-family: var(--montserratBold);
}

.auth-content form .span {
    text-align: center;
    color: #666666;
    font-size: 16px;
    margin: 1rem 0 3rem 0;
}

.auth-content p {
    color: #666666;
    font-size: 15px;
    text-align: center;
}

.auth-content form {
    display: flex;
    flex-direction: column;
}

.auth-content form .input-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.auth-content form .input-field label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #545f71;
}

.auth-content form .input-field label span {
    color: #ff383c;
}

.auth-content form .input-field input {
    border: 1px solid #545f71;
    padding: 13px;
    border-radius: 8px;
    outline: none;
    font-size: 16px;
}

.auth-content .password-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 3rem;
}

.auth-content .password-info .remember-me {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #0d0d0d;
    font-size: 13px;
}

.auth-content .password-info .remember-me input {
    accent-color: var(--mtn-yellow);
}

.auth-content .password-info .forgot-password a {
    font-size: 13px;
    text-decoration: none;
    color: #ff383c;
}

.auth-content .otp-inputs {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin: 20px 0;
}

.auth-content .otp-inputs input {
    width: 50px;
    height: 55px;
    font-size: 24px;
    border: 2px solid #888;
    border-radius: 7px;
    text-align: center;
    outline: none;
    transition: 0.25s;
}

.auth-content .otp-inputs input:focus {
    border-color: var(--mtn-yellow);
    box-shadow: 0 0 5px var(--mtn-grey-muted);
}

.auth-content .timer {
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #b3b3b3;
    margin-bottom: 20px;
}

.auth-content .timer span {
    font-family: var(--montserratBold);
    color: black;
}

.auth-content form button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #fff;
    font-family: var(--montserratBold);
    outline: none;
    background-color: var(--mtn-yellow);
}

.spinner {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

/* 12 bars */
.spinner::before,
.spinner::after,
.spinner div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 50px;
    background: #f1f1f1;
    border-radius: 10px;
    transform-origin: center -40px;
    gap: 12px;
    animation: fade 1.1s linear infinite;
}

/* Generate bars using nth-child trick */
.spinner div:nth-child(1) {
    transform: rotate(0deg) translate(0, -20px);
    animation-delay: -1s;
}
.spinner div:nth-child(2) {
    transform: rotate(30deg) translate(0, -20px);
    animation-delay: -0.9s;
}
.spinner div:nth-child(3) {
    transform: rotate(60deg) translate(0, -20px);
    animation-delay: -0.8s;
}
.spinner div:nth-child(4) {
    transform: rotate(90deg) translate(0, -20px);
    animation-delay: -0.7s;
}
.spinner div:nth-child(5) {
    transform: rotate(120deg) translate(0, -20px);
    animation-delay: -0.6s;
}
.spinner div:nth-child(6) {
    transform: rotate(150deg) translate(0, -20px);
    animation-delay: -0.5s;
}
.spinner div:nth-child(7) {
    transform: rotate(180deg) translate(0, -20px);
    animation-delay: -0.4s;
}
.spinner div:nth-child(8) {
    transform: rotate(210deg) translate(0, -20px);
    animation-delay: -0.3s;
}
.spinner div:nth-child(9) {
    transform: rotate(240deg) translate(0, -20px);
    animation-delay: -0.2s;
}
.spinner div:nth-child(10) {
    transform: rotate(270deg) translate(0, -20px);
    animation-delay: -0.1s;
}
.spinner div:nth-child(11) {
    transform: rotate(300deg) translate(0, -20px);
    animation-delay: -0.05s;
}
.spinner div:nth-child(12) {
    transform: rotate(330deg) translate(0, -20px);
    animation-delay: -0.01s;
}

/* Fade animation */
@keyframes fade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.15;
    }
}

@media screen and (max-width: 768px) {
    .auth-header-container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 150px;
        background-image: url("../../images/auth-header.png");
        background-position: center;
        background-size: cover;
        border-radius: 0 0 20px 20px;
        background-repeat: no-repeat;
        margin-bottom: 3rem;
    }

    .auth-content {
        display: flex;
        padding: 20px;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
    }

    .auth-content h1 {
        text-align: center;
        color: #0d0d0d;
        font-size: 30px;
        font-family: var(--montserratBold);
    }

    .auth-content .otp-inputs {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        justify-content: center;
        margin: 20px 0;
    }

    .auth-content .otp-inputs input {
        width: 40px;
        height: 45px;
    }
}

/* =================== Content layout || DASHBOARD ============================ */
.main-content {
    display: flex;
    padding: 20px;
    flex-direction: column;
    gap: 16px;
    background-image: url("../../images/background.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.card-container .card {
    background-color: white;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--mtn-grey-soft);
}

.card-container .card .top-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--mtn-grey-soft);
    margin-bottom: 1rem;
}

.card-container .card .top-card .left-content {
    display: flex;
    flex-direction: column;
}

.card-container .card .top-card .left-content h1 {
    font-size: 13px;
    color: var(--labelColor);
    font-weight: 700;
    margin-bottom: 1rem;
}

.card-container .card .top-card .left-content span {
    color: var(--textColor);
    font-size: 35px;
}

.card-container .card .top-card .right-content {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff5e5;
    padding: 0.7rem;
    border-radius: 10px;
}

.card-container .card a {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 12px;
    text-decoration: none;
    color: var(--thickOrange);
}

.card-container .card a.except {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 12px;
    text-decoration: none;
    color: var(--blackColor);
}

.card-container .card .bottom-card span {
    color: var(--blackColor);
    font-size: 35px;
}

section {
    margin-bottom: 2rem;
}

section .section-header {
    display: flex;
    margin-bottom: 2rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

section .left-section-header {
    display: flex;
    flex-direction: column;
}

section .left-section-header h2 {
    font-size: 25px;
    font-family: var(--montserratMedium);
}

section .left-section-header p {
    font-family: var(--montserratLight);
}

section .right-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

section .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background-color: var(--mtn-yellow);
    cursor: pointer;
    color: var(--mtn-border-soft);
    gap: 10px;
}

section .btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background-color: var(--mtn-yellow);
    cursor: pointer;
    color: white;
    gap: 10px;
}

.tabs {
    display: flex;
    max-width: 100%;
    overflow-x: scroll;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--mtn-grey-soft);
}

.tab {
    border: none;
    padding: 10px 18px;
    text-wrap: nowrap;
    cursor: pointer;
    font-size: 16px;
    background-color: transparent;
}

.tab.active {
    color: var(--mtn-yellow);
    border-bottom: 4px solid var(--mtn-yellow);
}

.table-container {
    overflow-x: auto;
    max-width: 100%;
    border: 1px solid rgba(194, 194, 194, 1);
    background-color: rgba(250, 250, 250, 1);
    border-radius: 14px;
    padding: 10px;
}

.table-switch-container {
    display: none;
}

.table-switch-container.active {
    display: block;
}

.search-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    gap: 2rem;
}

.select-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.export-btn {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px;
    gap: 5px;
    color: #36271e;
    border: 1px solid #36271e;
    background-color: rgba(0, 0, 0, 0.05);
}

.search-btn {
    width: 100%;
    padding: 12px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-btn input {
    width: 100%;
    border: none;
    outline: none;
    background-color: transparent;
}

.search-filter-row .select {
    display: flex;
    width: fit-content;
    align-items: center;
    border: 1px solid rgba(204, 204, 204, 1);
    border-radius: 10px;
    padding: 10px;
}

.search-filter-row .select input[type="date"] {
    border: none;
    outline: none;
    background-color: transparent;
}

.search-filter-row .select input[type="text"] {
    border: none;
    outline: none;
    background-color: transparent;
}

.search-filter-row .select select {
    border: none;
    outline: none;
    background-color: transparent;
    font-size: 14px;
}

/* Table */
.request-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 10px;
    overflow: hidden;
}

.request-table th {
    background: #f1f1f1;
    padding: 10px;
    text-align: left;
}

.request-table th p {
    display: flex;
    /* text-transform: uppercase; */
    align-items: center;
    text-wrap: nowrap;
    gap: 6px;
    color: rgba(77, 77, 77, 1);
    font-family: var(--montserratBold);
    font-size: 14px;
}

.request-table td {
    padding: 12px;
    font-size: 12px;
    text-wrap: nowrap;
    border-bottom: 1px solid #eee;
}

.request-table tr:hover {
    background: #fafafa;
}

.request-table td .docs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.request-table td .docs .doc {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 245, 229, 1);
    padding: 10px;
    border-radius: 8px;
}

.request-table td .user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.request-table td .avatar {
    background: rgba(254, 243, 199, 1);
    color: rgba(175, 114, 10, 1);
    font-family: var(--montserratBold);
    padding: 12px;
    border-radius: 50%;
    font-size: 12px;
}

.request-table td .content-name {
    display: flex;
    flex-direction: column;
}

.request-table td .content-name span:last-child {
    font-size: 10px;
    font-family: var(--montserratLight);
}

.request-table td .priority {
    padding: 5px 10px;
    border-radius: 12px;
    color: white;
    font-size: 12px;
    font-family: var(--montserratBold);
}
.request-table td .priority.high {
    background: rgba(241, 80, 70, 0.15);
    color: rgba(241, 80, 70, 1);
}

.request-table td .priority.medium {
    background: rgba(255, 204, 0, 0.11);
    color: rgba(245, 158, 11, 1);
}

.request-table td .priority.low {
    background: rgba(236, 253, 243, 1);
    color: rgba(2, 122, 72, 1);
}

.request-table td .priority.admin {
    background: #f3e6ff;
    color: #9c27b0;
}

.request-table td .priority.legal-team {
    background: rgba(230, 246, 255, 0.85);
    color: #2c9ee2;
}

.request-table td .priority.external-counsel {
    background: #fce4ec;
    color: #cb3671;
}

.request-table td .priority.manager {
    background: #fff9e6;
    color: #f68918;
}

.request-table td .priority.requester {
    background: #ecfdf3;
    color: #027a48;
}

.request-table td .status.pending {
    background: rgba(255, 204, 0, 0.11);
    color: rgba(245, 158, 11, 1);
    padding: 6px 12px;
    border-radius: 12px;
    font-family: var(--montserratBold);
}

.request-table td .status.approved {
    background: rgba(76, 175, 80, 0.11);
    color: rgba(76, 175, 80, 1);
    padding: 6px 12px;
    border-radius: 12px;
    font-family: var(--montserratBold);
}

.request-table td .status.rejected {
    background: rgba(189, 45, 9, 0.11);
    color: rgb(189, 45, 9, 1);
    padding: 6px 12px;
    border-radius: 12px;
    font-family: var(--montserratBold);
}

.request-table td .status.closed {
    background: var(--mtn-grey-muted);
    color: grey;
    padding: 6px 12px;
    border-radius: 12px;
    font-family: var(--montserratBold);
}

.request-table td .table-btns {
    display: flex;
    align-items: center;
    gap: 10px;
}

.request-table td .view-btn,
.request-table td .edit-btn,
.request-table td .activate-btn,
.request-table td .suspend-btn {
    padding: 6px 12px;
    border-radius: 8px;
    border: none;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.request-table td .view-btn {
    background: #202020;
    color: white;
}

.request-table td .edit-btn {
    background: rgba(254, 203, 0, 1);
}

.request-table td .activate-btn {
    background: #137699;
    color: white;
}

.request-table td .suspend-btn {
    background: #ff3b30;
    color: white;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    gap: 4rem;
    align-items: center;
    justify-content: space-between;
}

.pagination-phrase {
    color: #666666;
    font-size: 14px;
    gap: 0.5rem;
    display: flex;
    align-items: center;
    text-wrap: nowrap;
}

.pagination-phrase span {
    font-family: var(--montserratBold);
}

.pagination-container .pagination-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pagination-container button {
    height: 35px;
    width: 35px;
    display: flex;
    font-size: 12px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #b3b3b3;
}

.pagination-container button.active {
    background-color: var(--mtn-yellow);
    border: none;
    color: white;
}

@media screen and (max-width: 768px) {
    section .section-header {
        display: flex;
        flex-direction: column;
        margin-bottom: 2rem;
        align-items: start;
        justify-content: start;
        gap: 1rem;
    }

    .search-filter-row {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        margin-bottom: 2rem;
        gap: 1rem;
    }

    .select-container {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .search-filter-row .select {
        display: flex;
        width: fit-content;
        align-items: center;
        border: 1px solid rgba(204, 204, 204, 1);
        border-radius: 10px;
        padding: 10px;
        width: 100%;
    }
}

/* =================================== create new litigation portfolio ========================================== */
.form-container {
    width: 100%;
    background: #fff;
    border-radius: 12px;
    padding: 25px;
}

.form-container .extra,
.extra {
    color: #545f71;
    font-size: 14px;
    font-family: var(--montserratBold);
}

.form-container .extra-form,
.extra-form {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 1rem;
    background-color: #f2f2f2;
    margin-bottom: 1rem;
}

.form-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-row.except {
    display: flex;
    align-items: baseline;
}

.form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.form-group.full textarea {
    width: 100%;
    height: 120px;
    resize: none;
}

.form-group label {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 14px;
    color: #545f71;
    display: flex;
    align-items: center;
    gap: 5px;
}

.form-group label span {
    color: #ff383c;
}

.form-group input,
.form-group .select,
.form-group textarea {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    background-color: transparent;
    color: #545f71;
    outline: none;
}

.form-group.except input,
.form-group.except .select,
.form-group.except textarea {
    background-color: white;
}

.form-group input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    /* opacity: 0; */
}

.form-group input[type="file"] {
    background-color: #f0f5f9;
    border: 1px solid #117295;
}

.form-group input[type="file"]::placeholder {
    color: #545f71;
}

.form-group .input-div {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    background-color: transparent;
    color: #545f71;
    outline: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

.form-group .input-div input {
    border: none;
    outline: none;
    width: 100%;
    border-radius: none;
    padding: 0;
    background-color: transparent;
    color: #545f71;
}

.form-group .select select {
    width: 100%;
    border: none;
    outline: none;
    background-color: transparent;
    color: #545f71;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}

.form-actions .btn {
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
}

.form-actions .btn.cancel {
    color: #fff;
    background: #9ba5b7;
}

.form-actions .btn.submit {
    background: #000;
    color: #fff;
}

/* Responsive */
@media (max-width: 900px) {
    .form-container {
        width: 100%;
        background: #fff;
        border-radius: 12px;
        padding: 10px;
    }

    .form-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .form-group {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .form-group {
        width: 100%;
    }

    .form-actions {
        flex-direction: column;
        gap: 10px;
    }
}

/* =================================== create new litigation ========================================== */

.stepper-container {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid #e4e4e4;
    border-top: 1px solid #e4e4e4;
}

.stepper-container.except .stepper {
    cursor: pointer;
}

.stepper {
    display: flex;
    flex-direction: column;
    text-align: start;
    flex: 1;
    padding: 10px 20px;
    cursor: pointer;
    border-right: 1px solid #e4e4e4;
    cursor: default;
}

.stepper:last-child {
    border-right: none;
}

.stepper.active {
    color: #000;
    border-bottom: 5px solid var(--mtn-black-soft);
    font-weight: bold;
}

.stepper > div:first-child {
    color: #333333;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--montserratBold);
    font-size: 16px;
}

.stepper > div:first-child span {
    font-family: var(--montserratBold);
}

.stepper > div:last-child p {
    color: #333333;
    font-size: 12px;
    font-family: var(--montserratLight);
}

.stepper.active > div:first-child {
    color: #cc9321;
}

.screen {
    display: none;
}

.screen .stepper-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-bottom: 2rem;
}

.screen .stepper-header h3 {
    color: #333333;
    font-family: var(--montserratMedium);
    font-size: 18px;
}

.screen .stepper-header p {
    color: #666666;
    font-size: 14px;
}

.screen.active {
    display: block;
}

.stepper-actions {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    padding-top: 0;
}

.stepper-actions button {
    background: #222;
    color: white;
    padding: 10px 25px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.stepper-actions button[disabled] {
    background: #ccc;
    cursor: not-allowed;
}

.counsel-card {
    width: 100%;
    background: #f2f2f2;
    border-left: 4px solid #f1ac21;
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 15px;
    box-sizing: border-box;
}

.counsel-card .counsel-name {
    color: #999999;
    font-size: 12px;
}

.counsel-card-element {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.counsel-icon {
    width: 48px;
    height: 48px;
    background: #fef3c7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #af720a;
    font-size: 20px;
}

.counsel-info h4 {
    margin: 0;
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: 600;
    color: #4d4d4d;
}

.counsel-info .counsel-number {
    margin: 2px 0 0 0;
    font-size: 14px;
    color: #212529;
}

.skip-btn {
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    border: 1px solid #202020;
    border-radius: 10px;
    font-size: 17px;
    cursor: pointer;
    color: #545f71;
    padding: 8px 15px;
    margin-bottom: 2rem;
    width: fit-content;
}

.folder-section h3 {
    color: #545f71;
    font-family: var(--montserratMedium);
    margin-bottom: 5px;
    font-size: 14px;
}

.folder-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 5 per row */
    gap: 20px;
    margin-bottom: 20px;
}

/* Each folder card */
.folder-item {
    width: 100%;
    height: 130px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #f0f2f5;
    cursor: pointer;
    padding: 10px;
    text-align: center;
    transition: 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.folder-item img {
    width: 45px;
    height: 45px;
    margin: 0 auto;
}

.folder-item span {
    font-size: 14px;
    color: #9ba5b7;
    font-family: var(--montserratMedium);
}

.add-folder {
    border: 2px dashed #f5b400;
    color: #d79c00;
    background-color: rgba(254, 243, 199, 0.3);
}

.add-folder .plus svg {
    height: 50px;
    width: 50px;
}

.add-folder span:last-child {
    font-size: 14px;
    font-family: var(--montserratMedium);
    color: #e3a600;
}

.hidden-form {
    display: none;
}

.create-form {
    background-color: #f2f2f2;
    padding: 10px;
    border-radius: 8px;
    margin-top: 2rem;
}

.create-form h4 {
    font-size: 15px;
    margin-bottom: 1rem;
}

.create-form button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #202020;
    padding: 12px;
    cursor: pointer;
    color: var(--mtn-yellow);
    font-size: 15px;
    outline: none;
    border: none;
    border-radius: 10px;
}

.summary-details-containers {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.summary-details {
    display: flex;
    flex-direction: column;
    border: 1px solid #202020;
    width: 100%;
    border-radius: 10px;
}

.summary-details > h2 {
    background-color: #f2f2f2;
    border-radius: 10px 10px 0 0;
    font-size: 17px;
    color: #000000;
    border-bottom: 1px solid #000;
    padding: 0.5rem 1rem;
    font-family: var(--montserratMedium);
}

.summary-details .summary-details-container {
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 1rem;
    gap: 0.5rem;
    border-radius: 0 0 10px 10px;
}

.summary-details .summary-details-container .details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #999999;
    padding: 5px 0;
}

.summary-details .summary-details-container .details.except {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1rem;
}

.summary-details .summary-details-container .details p {
    color: #000000;
    font-family: var(--montserratRegular);
    font-size: 15px;
}

.summary-details .summary-details-container .details span {
    color: #666666;
    font-size: 14px;
}

.optional-check {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #545f71;
}

.optional-check input {
    accent-color: black;
}

.details-folder {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0.5rem 1rem;
}

.details-folder img {
    height: 30px;
    width: 30px;
}

/* Responsive Breakpoints */

/* Tablets - show 3 per row */
@media screen and (max-width: 1024px) {
    .folder-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Big phones - show 2 per row */
@media screen and (max-width: 768px) {
    .folder-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .screen .stepper-header {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        gap: 1rem;
        padding: 0;
    }

    .stepper > div span,
    .stepper > div p {
        display: none;
    }
}

/* Mobile - 1 per row full width */
@media screen and (max-width: 480px) {
    .folder-list {
        grid-template-columns: 1fr;
    }
}

/* ======================= Litigation details =================================== */
.litigation-details-container {
    background: #fff;
    border-radius: 10px;
    padding: 18px;
    border-top: 4px solid #111216;
    border-radius: 10px;
    background: #fafafa;
    margin-bottom: 1rem;
}

.section-title {
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
    color: #666666;
}

/* Layout */
.case-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

/* LEFT BOX */
.case-wrapper .update-box {
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    width: 100%;
    border: 1px solid #eee;
}

.case-wrapper .update-box h3 {
    margin-bottom: 20px;
    font-size: 18px;
}

.case-wrapper .form-group {
    margin-bottom: 15px;
}

.case-wrapper .form-group label {
    font-weight: 600;
    font-size: 14px;
}

.case-wrapper .form-group span {
    color: red;
}

.case-wrapper .form-group select,
.case-wrapper .form-group input {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fafafa;
    font-size: 14px;
    outline: none;
}

.case-wrapper .side-by-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.case-wrapper .save-btn {
    color: var(--mtn-yellow);
    background-color: #000;
    width: 100%;
    padding: 14px;
    font-size: 16px;
    border-radius: 10px;
    border: none;
    margin-top: 15px;
    cursor: pointer;
}

.case-wrapper .save-btn:hover {
    opacity: 0.85;
}

/* TIMELINE */
.case-wrapper .timeline {
    border-left: 3px solid #e6c000;
    padding-left: 25px;
    position: relative;
}

.timeline-container {
    max-height: 400px;
    overflow-y: scroll;
    padding: 0 1rem;
}

.timeline-container::-webkit-scrollbar {
    height: 8px;
    width: 5px;
}

.timeline-container::-webkit-scrollbar-thumb {
    background-color: var(--mtn-grey-muted);
}

.case-wrapper .timeline-item {
    position: relative;
    margin-bottom: 40px;
}

.case-wrapper .dot {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: absolute;
    left: -38px;
    top: 5px;
    border: 3px solid #e6c000;
}

.case-wrapper .dot.filled {
    background: #e6c000;
}

.case-wrapper .dot.empty {
    background: white;
}

.case-wrapper .content .time {
    color: #888;
    font-size: 13px;
    margin-bottom: 3px;
}

.case-wrapper .content h4 {
    font-size: 18px;
    margin-bottom: 5px;
}

.case-wrapper .content p {
    font-size: 12px;
    color: #555;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.detail-card {
    border-left: 3px solid #f1ac21;
    border-radius: 10px;
    background-color: white;
    padding: 10px 12px;
    border-radius: 6px;
}

.details-flex {
    display: flex;
    gap: 1rem;
}

.detail-card-flex {
    border-left: 3px solid #f1ac21;
    border-radius: 10px;
    background-color: white;
    padding: 10px 12px;
    border-radius: 6px;
    width: 100%;
}

.detail-card-flex h1 {
    font-size: 16px;
    margin-bottom: 1rem;
}

.detail-card-flex .card-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background-color: #f7f7f7;
    border: 1px solid #b3b3b3;
    border-radius: 10px;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
}

.detail-card-flex .card-flex .left-card {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.detail-card-flex .card-flex .left-card .name {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 50%;
    background-color: rgba(246, 184, 30, 0.4);
    color: #c48c00;
}

.detail-card-flex .card-flex .left-card .name-details p {
    color: #333333;
    font-size: 17px;
    margin: 0;
    line-height: 12px;
}

.detail-card-flex .card-flex .left-card .name-details span {
    font-size: 13px;
    color: #4d4d4d;
    margin: 0;
}

.detail-card-flex .card-flex .right-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    background-color: #fff;
    border: 1px solid #f2f2f2;
    padding: 10px;
    width: 100%;
    border-radius: 10px;
    font-size: 13px;
    font-family: var(--montserratMedium);
}

.detail-card-flex .card-flex .right-card span {
    display: flex;
    align-items: center;
    gap: 2px;
}

.detail-card-flex .card-flex .right-card p {
    font-size: 13px;
    color: #999999;
}

.detail-card label {
    font-size: 10px;
    font-weight: 600;
    color: #666;
}

.detail-card p {
    margin: 2px 0 0 0;
    font-size: 12px;
    font-weight: 500;
    color: #333333;
}

.detail-card p.highlight {
    color: #d18c00;
    font-weight: 600;
}

.description-card {
    margin-top: 15px;
    border-left: 2px solid #f1ac21;
    border-radius: 10px;
    background-color: white;
    padding: 10px;
    border-radius: 6px;
}

.description-card label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
}

.description-card p {
    margin: 2px 0 0 0;
    font-size: 12px;
    font-weight: 500;
    color: #333333;
}

.folder-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    width: 100%;
}

.folder-element {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 18px;
    text-align: center;
    transition: 0.3s;
}

.folder-element:hover {
    transform: translateY(-4px);
}

.folder-element img {
    width: 55px;
    height: 55px;
    margin-bottom: 10px;
}

.folder-element p {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    color: #4d4d4d;
}

.folder-element .folder-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.folder-element .folder-action-btn {
    border: none;
    outline: none;
    background-color: transparent;
}

.folder-element .folder-action-btn svg,
.folder-element .folder-action-btn img {
    height: 20px;
    width: 20px;
    cursor: pointer;
}

#folder-details-container {
    display: none;
    margin-top: 2rem;
}

.file-header-container {
    background: #f2f2f2;
    border: 1px solid #cccccc;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    color: #4d4d4d;
    font-size: 15px;
}

.file-head {
    display: flex;
    align-items: center;
    gap: 3rem;
    color: #4d4d4d;
    font-size: 15px;
}

.file-header {
    background: #f2f2f2;
    border: 1px solid #cccccc;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 3rem;
    color: #4d4d4d;
    font-size: 15px;
}

.file-header svg {
    cursor: pointer;
}

.file-header > div {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.file-head > div {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.file-head-action {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.file-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    gap: 5px;
    background-color: #111216;
    color: white;
    padding: 10px 14px;
    width: fit-content;
    border: none;
    outline: none;
    cursor: pointer;
}

.icon-folder img {
    width: 55px;
    height: 55px;
}

.file-table {
    width: 100%;
    border-radius: 10px;
    padding: 10px 0;
    border-collapse: collapse;
    max-width: 100%;
    overflow-x: scroll;
}

.file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #eaeaea;
    align-items: center;
}

.file-row:hover {
    background-color: #f2f2f2;
}

.file-row:last-child {
    border-bottom: none;
}

.label {
    font-size: 14px;
    font-weight: 600;
    color: #444;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filename {
    font-size: 14px;
    color: #444;
}

.file-table .file-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.file-table .file-action svg {
    height: 20px;
    width: 20px;
}

.description {
    font-size: 14px;
    color: #666;
}

.owner {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #444;
    white-space: nowrap;
}

.file-table .name {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 50%;
    background-color: rgba(246, 184, 30, 0.4);
    color: #c48c00;
}

/* Date */
.date {
    font-size: 14px;
    color: #555;
    white-space: nowrap;
}

/* Tablet - 3 per row */
@media (max-width: 1024px) {
    .folder-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Small tablets - 2 per row */
@media screen and (max-width: 768px) {
    .folder-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .search-bar-container {
        background-color: #ededed;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem !important;
        border-radius: 12px;
        padding: 5px;
        margin-bottom: 2rem;
    }

    .litigation-details-container {
        padding: 10px;
    }

    .case-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .details-flex {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .detail-card-flex .card-flex {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: flex-start;
        gap: 1rem;
        background-color: #f7f7f7;
        border: 1px solid #b3b3b3;
        border-radius: 10px;
        margin-bottom: 0.5rem;
        padding: 0.5rem;
    }

    .calendar-container {
        display: flex;
        flex-direction: column;
        background-color: white;
        border-radius: 10px;
        padding: 5px;
        gap: 1rem;
        border: 1px solid #ccc;
    }

    .calendar-section {
        width: 100% !important;
        padding: 10px;
    }

    .upcoming-section {
        width: 100% !important;
        background-color: #f2f2f2;
        padding: 10px;
        border-radius: 10px;
        border: 1px solid #b3b3b3;
        height: fit-content;
    }

    .file-header-container {
        background: #f2f2f2;
        border: 1px solid #cccccc;
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: space-between;
        gap: 1rem;
        color: #4d4d4d;
        font-size: 15px;
    }
}

/* Mobile - 1 per row */
@media (max-width: 480px) {
    .folder-container {
        grid-template-columns: 1fr;
    }

    section .right-section-header {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100% !important;
    }

    section .right-section-header button {
        width: 100% !important;
    }

    section .right-section-header .export-btn {
        width: 100% !important;
    }
}

/* =========================== chart ========================*/
.chat-container {
    display: flex;
    height: 100vh;
    background: #fff;
}

/* SIDEBAR */
.chatSidebar {
    width: 30%;
    border-right: 1px solid rgba(196, 140, 0, 0.02);
    display: flex;
    flex-direction: column;
    border: 1px solid #cccccc;
    border-radius: 10px;
}

.chat-sidebar-header {
    padding: 1rem;
    font-weight: bold;
    font-size: 1.2rem;
    border-bottom: 1px solid #ddd;
    background-color: #202020;
    border-radius: 10px 10px 0 0;
    color: #fff;
}

.chat-title-detail {
    padding: 0.8rem;
    color: #4d4d4d;
    font-size: 16px;
    text-align: center;
}

.search-box {
    margin: 0 0.8rem 2rem 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #bbb;
    padding: 0.6rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

.search-box input {
    width: 100%;
    border: none;
    outline: none;
    color: #666666;
}

.chat-list,
.email-list {
    flex: 1;
    overflow-y: auto;
}

.chat-list::-webkit-scrollbar,
.email-list::-webkit-scrollbar,
.messages::-webkit-scrollbar,
.mails::-webkit-scrollbar {
    height: 8px;
    width: 5px;
}

.chat-list::-webkit-scrollbar-thumb,
.email-list::-webkit-scrollbar-thumb,
.messages::-webkit-scrollbar,
.mails::-webkit-scrollbar {
    background-color: var(--mtn-grey-muted);
}

.chat-item,
.email-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: 0.2s;
    margin-bottom: 1rem;
}

.chat-item:hover,
.email-item:hover,
.chat-item.active,
.email-item.active {
    background: #f6f6f6;
}

.chat-item.active,
.email-item.active {
    background-color: rgba(246, 184, 30, 0.15);
    border-left: 4px solid #f6b81e;
}

.chat-avatar,
.email-avatar {
    width: 42px;
    height: 42px;
    background: rgba(246, 184, 30, 0.4);
    color: #c48c00;
    border-radius: 50%;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-details,
.email-details {
    flex: 1;
}

.chat-details .chat-sender-name,
.email-details .email-sender-name {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 0.3rem;
}

.chat-details div.stepper:last-child {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 0.3rem;
    font-size: 10px;
    background-color: #f2f2f2;
    color: #999999;
    padding: 5px 7px;
    border-radius: 15px;
    width: fit-content;
}

.chat-item.active .chat-details div:last-child,
.email-item.active .email-details div:last-child {
    background-color: white;
}

.chat-details p:first-child,
.email-details p:first-child {
    font-family: var(--montserratMedium);
    font-size: 1rem;
}

.chat-details p:last-child,
.email-details p:last-child {
    font-size: 0.8rem;
    color: #666;
}

.chat-details span,
.email-details span {
    font-size: 0.8rem;
    color: #0d0d0d;
}

.chat-time,
.email-time {
    font-size: 0.7rem;
    color: #999;
}

.create-chat {
    padding: 1rem;
}

.create-chat button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 0.7rem;
    border: none;
    border: 1px solid #000;
    font-family: var(--montserratBold);
    color: #000;
    border-radius: 6px;
    cursor: pointer;
}

/* RIGHT CHAT AREA */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #cccccc;
    border-left: none;
    border-radius: 10px;
}

.chat-header {
    padding: 0.5rem 2rem;
    border-bottom: 1px solid #ddd;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    border-radius: 10px 10px 0 0;
    background-color: #f2f2f2;
}

.header-avatars {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 2px 6px;
    border-radius: 10px;
    border: 2px solid #202020;
    width: fit-content;
    background: white;
}

.header-avatars .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    margin-left: -8px;
    border: 2px solid white;
}

.header-avatars .avatar:first-child {
    margin-left: 0;
}

.header-avatars .avatar.yellow {
    background: #f8d57e;
    color: #6d4e00;
}

.header-avatars .avatar.blue {
    background: #b8d8e8;
    color: #004c6d;
}

.header-avatars .avatar.gray {
    background: #e6e6e6;
    color: #333;
}

.messages {
    flex: 1;
    padding: 1.2rem;
    overflow-y: auto;
}

.messages .date-time {
    text-align: center;
    color: #999999;
    font-size: 15px;
    margin: 2rem 0;
}

.placeholder-text {
    text-align: center;
    margin-top: 40px;
    color: #666;
}

.msg-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    max-width: 500px;
}

.msg-row.mine {
    margin-left: auto;
    flex-direction: row-reverse;
}

.msg-avatar {
    width: 35px;
    height: 35px;
    background: rgba(246, 184, 30, 0.4);
    color: #c48c00;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    font-family: var(--montserratBold);
    align-items: center;
    font-size: 0.7rem;
}

.msg-bubble {
    background: #f2f2f2;
    border-radius: 0 18px 18px 18px;
    padding: 10px 14px;
    font-size: 0.8rem;
    color: #404040;
}

.msg-bubble.except {
    background: #eae9e9;
    border-radius: 0 18px 18px 18px;
    padding: 10px 14px;
    font-size: 0.8rem;
    color: #404040;
}

.msg-bubble strong {
    color: #404040;
    font-size: 14px;
    font-family: var(--montserratBold);
}

.msg-row.mine .msg-bubble {
    background: rgba(254, 243, 199, 0.7);
    border-radius: 18px 18px 0 18px;
}

.message-tag {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.message-tag .message-time {
    color: #bcbcbc;
    font-size: 13px;
}

/* INPUT BAR */
.input-bar {
    padding: 1rem 3rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.bar-icons {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.send-msg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px;
    flex: 1;
    border: 1px solid #e2e2e2;
    border-radius: 25px;
    background-color: #f7f9fa;
}

.send-msg input {
    border: none;
    outline: none;
    background-color: transparent;
    width: 100%;
    border-radius: 6px;
    padding: 0.6rem 2rem;
    color: #809fb8;
}

.send-msg .send-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: black;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .chatSidebar {
        width: 100%;
        height: 100%;
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        background: white;
        z-index: 10;
    }

    .chatSidebar.show {
        display: block;
    }

    .chat-container {
        flex-direction: column;
    }
}

/* ============== this is the email section ============================ */
.email-container {
    padding: 2rem 20px;
    flex: 1;
    padding: 1.2rem;
    overflow-y: auto;
}

.email-container::-webkit-scrollbar {
    height: 8px;
    width: 5px;
}

.email-container::-webkit-scrollbar {
    background-color: var(--mtn-grey-muted);
}

/* ===== Message ===== */
.message {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.avatar {
    width: 36px;
    height: 36px;
    background: rgba(246, 184, 30, 0.4);
    color: #c48c00;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.message-content {
    flex: 1;
}

.message-content p {
    margin: 0 0 6px;
    line-height: 1.5;
    font-size: 14px;
    color: #999999;
}

.message-content .muted {
    color: #888;
    font-size: 15px;
}

.message-content input {
    font-size: 14px;
    color: #999999;
    width: 100%;
    border-bottom: 1px solid #999999;
    border-top: none;
    border-left: none;
    border-right: none;
    outline: none;
}

.reply-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 1.5rem 0 1.5rem 2.5rem;
    background: #202020;
    color: #fecb00;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    width: fit-content;
}

.editor {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 2.5rem;
}

.editor-header {
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 13px;
    color: #555;
}

.editor-body {
    min-height: 180px;
    padding: 12px;
    font-size: 14px;
    color: #333;
    outline: none;
}

.editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: #fafafa;
    border-top: 1px solid #e0e0e0;
}

.toolbar {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #666;
}

.send-email-btn {
    background: #111;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* =========================== Custome Modal =========================== */
/* overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 90;
}

/* modal box */
.modal-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: white;
    width: 40%;
    max-height: 95%;
    overflow-y: scroll;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    display: none;
    opacity: 0;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.modal-box::-webkit-scrollbar {
    height: 8px;
    width: 5px;
}

.modal-box::-webkit-scrollbar-thumb {
    background-color: var(--labelColor);
}

.modal-box.except {
    width: 60%;
}

.modal-box.show {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

textarea {
    resize: none;
    height: 150px;
}

.modal-overlay.show {
    display: block;
    opacity: 1;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.modal-header h2 {
    color: #000;
    font-size: 20px;
}

.modal-header svg {
    cursor: pointer;
}

.modal-form .form-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.modal-form .form-row .form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.modal-form .form-row .form-group.full textarea {
    width: 100%;
    height: 120px;
    resize: none;
}

.modal-form .form-row .form-group label {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 14px;
    color: #545f71;
    display: flex;
    align-items: center;
    gap: 5px;
}

.modal-form .form-row .form-group label span {
    color: #ff383c;
}

.modal-form .form-row .form-group input,
.modal-form .form-row .form-group .select,
.modal-form .form-row .form-group textarea {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    background-color: transparent;
    color: #545f71;
    outline: none;
}

.modal-form .form-row .form-group.except input,
.modal-form .form-row .form-group.except .select,
.modal-form .form-row .form-group.except textarea {
    background-color: white;
}

.modal-form .form-row .form-group input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    /* opacity: 0; */
}

.modal-form .form-row .form-group input[type="file"] {
    background-color: #f0f5f9;
    border: 1px solid #117295;
}

.modal-form .form-row .form-group input[type="file"]::placeholder {
    color: #545f71;
}

.modal-box .sucess-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.modal-box .sucess-content img {
    height: 100px;
    margin-bottom: 1rem;
}

.modal-box .sucess-content h1 {
    margin-bottom: 0.5rem;
    font-size: 30px;
}

.modal-box .sucess-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.multi-select-box {
    position: relative;
}

.input-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    background-color: transparent;
    color: #545f71;
    outline: none;
}

.input-wrapper input {
    border: none !important;
    width: 100%;
    outline: none !important;
    cursor: pointer;
}

.arrow {
    margin-left: auto;
    border: solid #777;
    border-width: 0 2px 2px 0;
    padding: 4px;
    transform: rotate(45deg);
    transition: 0.2s ease;
}

.input-wrapper.open .arrow {
    transform: rotate(-135deg);
}

.members-list {
    max-height: 240px;
    position: absolute;
    top: 2.5rem;
    width: 100%;
    z-index: 999;
    background-color: #f2f2f2;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 8px;
    display: none;
}

.members-list::-webkit-scrollbar {
    height: 8px;
    width: 5px;
}

.members-list::-webkit-scrollbar-thumb {
    background-color: var(--mtn-grey-muted);
}

.member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid #eee;
}

.member input {
    width: 18px;
    height: 18px;
    accent-color: var(--mtn-yellow);
}

.member .name {
    flex: 1;
    font-weight: 600;
}

.company {
    font-size: 13px;
    color: #777;
}

.selected-users {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
}

.selected-users.except {
    max-height: 300px;
    overflow-y: scroll;
}

.selected-users::-webkit-scrollbar {
    height: 8px;
    width: 5px;
}

.selected-users::-webkit-scrollbar-thumb {
    background-color: var(--labelColor);
}

.tag {
    background: rgba(246, 184, 30, 0.2);
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    color: #af720a;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tag span {
    cursor: pointer;
}

.modal-box .close-btn,
.close-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--montserratBold);
    margin-top: 20px;
    background: var(--mtn-yellow);
    color: white;
    border: none;
    padding: 14px 18px;
    border-radius: 6px;
    cursor: pointer;
}

.modal-box .add-workflow-btn,
.add-workflow-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 20px;
    background: #ddd;
    color: black;
    border: 1px dotted black !important;
    padding: 14px 18px;
    border-radius: 6px;
    cursor: pointer;
}

.add-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 20px;
    background: #000;
    color: white;
    border: 1px dotted black !important;
    padding: 14px 18px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 2rem;
}

@media screen and (max-width: 768px) {
    .modal-box {
        width: 95% !important;
    }
}

/* ======================================= Admin Role-Details ================================= */
.form-container .user-role {
    display: flex;
    align-items: center;
    color: #4d4d4d;
    gap: 5px;
    font-family: var(--montserratBold);
    margin-bottom: 2rem;
}

.form-container .user-role span {
    font-family: var(--montserratBold);
}

.form-container .role-detail-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-container .role-detail-container .role-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    border-bottom: 1px solid #000000;
    padding: 5px 0;
}

.form-container .role-detail-container .role-detail .role {
    font-size: 16px;
}

.form-container .role-detail-container .role-detail svg {
    cursor: pointer;
}

.download-template {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 10px;
    color: #000;
    border: 1px solid #202020;
    margin-bottom: 1rem;
    cursor: pointer;
    padding: 12px;
    background-color: #f2f2f2;
}

/* ======================= Advisory request details ============================= */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    border: 1px solid #999999;
    background-color: #f2f2f2;
}

header .left-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

header .left-header .detail-card p {
    font-size: 23px;
}

header .left-header .detail-card p.first-child {
    color: #f1ac21 !important;
    font-size: 23px;
}

header .right-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

header .right-header button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 15px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
}

header .right-header button.approve-btn {
    background-color: #34c759;
    color: #fff;
}

header .right-header button.reject-btn {
    background-color: #ff383c;
    color: #fff;
}

header .right-header button.assign-btn {
    background-color: #fecb00;
    color: #000;
}

.page-container {
    display: flex;
    gap: 0.5rem;
    background-color: #f2f2f2;
    padding: 10px;
    border-radius: 10px;
}

.page-container .left-section {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.page-container .right-section {
    width: 50%;
}

.page-container .left-section .card {
    background: #ffffff;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    padding: 20px;
}

.page-container .left-section .card .card-title {
    color: #4d4d4d;
    margin-bottom: 1rem;
}

.page-container .left-section .card .info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    border-bottom: 1px solid #999999;
}

.page-container .left-section .card .info-row .label {
    font-size: 14px;
}

.page-container .left-section .card .info-row .value {
    font-weight: 500;
    font-size: 14px;
    color: #7b7b7b;
}

.page-container .left-section .card .description {
    margin: 12px 0;
    font-size: 14px;
    color: #000;
}

.page-container .left-section .card .description span {
    color: #666666;
}

.page-container .left-section .counsel {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    border-bottom: 1px solid #b3b3b3;
    padding: 5px 0;
}

.page-container .left-section .counsel > div {
    display: flex;
    flex-direction: column;
}

.page-container .left-section .counsel > div p {
    color: #4d4d4d;
    font-size: 16px;
}

.page-container .left-section .counsel > div span {
    font-size: 12px;
    color: #212529;
}

.page-container .left-section .advice-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.page-container .left-section .dot {
    width: 14px;
    height: 14px;
    background: #ffd347;
    border-radius: 50%;
}

.page-container .left-section .advice-title {
    font-weight: 600;
    margin: 0;
    font-size: 14px;
}

.page-container .left-section .advice-text {
    font-size: 13px;
    margin-top: 3px;
    color: #6a6a6a;
}

.page-container .right-section {
    width: 50%;
}

.page-container .right-section .card {
    background: #ffffff;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    padding: 20px;
}

/* CHAT CARD */
.page-container .right-section .chat-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.page-container .right-section .chat-area {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
    background-color: #f2f2f2;
    border: none;
    margin-top: 1rem;
    padding: 2rem;
}

.page-container .right-section .chat-area .name {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 50%;
    background-color: rgba(246, 184, 30, 0.4);
    color: #c48c00;
}

/* CHAT MESSAGE */
.page-container .right-section .chat-message {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.page-container .right-section .chat-message .message .msgs {
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 10px;
    border-radius: 0 20px 20px 20px;
}

.page-container .right-section .chat-user {
    font-weight: 600;
    margin: 0;
    font-family: var(--montserratBold);
    font-size: 13px;
}

.page-container .right-section .chat-text {
    margin: 3px 0 3px 0;
    font-size: 11px;
}

.page-container .right-section .chat-time {
    font-size: 12px;
    color: #7d7d7d;
}

/* INPUT AREA */
.page-container .right-section .chat-input-area {
    display: flex;
    align-items: center;
    margin-top: 14px;
    border: 1px solid #ddd;
    border-radius: 30px;
    padding: 10px 15px;
    gap: 10px;
}

.page-container .right-section .chat-input-area input {
    border: none;
    flex: 1;
    outline: none;
    font-size: 14px;
}

.page-container .right-section .send-btn {
    background: #000;
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    header {
        display: flex;
        align-items: start;
        flex-direction: column;
        justify-content: start;
        gap: 1rem;
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 10px;
        border: 1px solid #999999;
        background-color: #f2f2f2;
    }

    .page-container {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        background-color: #f2f2f2;
        padding: 10px;
        border-radius: 10px;
    }

    .page-container .left-section {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .page-container .right-section {
        width: 100% !important;
    }
}

/* =================================== Reporting and Analytics ============================ */
.search-bar-container {
    background-color: #ededed;
    display: flex;
    align-items: center;
    gap: 2rem;
    border-radius: 12px;
    padding: 5px;
    margin-bottom: 2rem;
}

.search-bar-container .search-btn {
    border: 1px solid #333333;
    padding: 10px;
}

.search-bar-container .filters-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.search-bar-container .filters-btn .filter {
    border: 1px solid #333333;
    border-radius: 7px;
    padding: 7px;
}

.search-bar-container .filters-btn .filter select,
.search-bar-container .filters-btn .filter input {
    border: none;
    outline: none;
    background-color: transparent;
}

.report-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.flex-report {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.single-report {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
}

.report-card {
    background: white;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid #c2c2c2;
    margin-bottom: 2rem;
}

.report-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.report-card .card-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.report-card .time-filter {
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid #cfcfcf;
    background: #fff;
    font-size: 14px;
}

.report-card .menu-btn {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    margin-left: 10px;
}

.report-card canvas {
    height: 260px !important;
    color: #000;
    margin: auto;
}

@media screen and (max-width: 768px) {
    .report-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }

    .search-bar-container .filters-btn {
        display: flex;
        align-items: center;
        gap: 1rem;
        width: 100%;
    }

    .report-card canvas {
        width: 100% !important;
        /* height: 100% !important; */
    }

    .search-bar-container .filters-btn .filter,
    .search-bar-container .filters-btn .filter select,
    .search-bar-container .filters-btn .filter input {
        width: 100%;
    }

    .flex-report {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }
}

/* =============================== FAQS ===========================*/
.faqs-container {
    display: flex;
    gap: 1rem;
}

.faqs-section {
    width: 70%;
    background-color: white;
    border: 1px solid #bcbcbc;
    border-radius: 10px;
    padding: 10px;
}

.faqs-section .search-btn {
    border: 1px solid #333333;
    padding: 10px;
}

.faq-action-btns {
    display: flex;
    max-width: 100%;
    overflow-x: scroll;
    gap: 1rem;
    margin: 1rem 0 2rem 0;
}

.faq-action-btns::-webkit-scrollbar {
    height: 8px;
    width: 5px;
}

.faq-action-btns::-webkit-scrollbar-thumb {
    background-color: var(--labelColor);
}

.faq-action-btns a {
    text-decoration: none;
    text-wrap: nowrap;
    display: flex;
    font-size: 13px;
    gap: 5px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid #b3b3b3;
    color: #b3b3b3;
    outline: none;
    border-radius: 20px;
}

.faq-action-btns a.active {
    background-color: #000;
    color: white;
    border: none;
}

.faq-question-container {
    margin-bottom: 2rem;
}

.faq-question-container h2 {
    color: #333333;
    font-size: 2rem;
    margin-bottom: 10px;
}

.faq-item {
    background: #ffffff;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid #e8e8e8;
    overflow: hidden;
}

.faq-question {
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #fff9dd;
    color: #666666;
    font-size: 13px;
    padding: 0 15px;
}

.faq-answer.open {
    padding: 15px;
    max-height: 200px;
}

.faq-question .icon {
    color: #333;
    transition: transform 0.3s ease;
}

.faq-question .edit {
    color: rgba(254, 203, 0, 1);
    transition: transform 0.3s ease;
}

.faq-question .delete {
    color: red;
    transition: transform 0.3s ease;
}

.faq-question .rotate {
    transform: rotate(90deg);
}

.contact-section {
    width: 30%;
    height: fit-content;
    padding: 10px;
    border-radius: 10px;
    background-color: rgba(241, 172, 33, 0.08);
    border: 1px solid #f1ac21;
}

.contact-section h2 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.contact-info {
    background-color: white;
    border: 1px solid #b3b3b3;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
}

.contact-info .image {
    height: 30px;
}

.contact-info .image img {
    height: 100%;
    width: 100%;
}

.contact-info .info {
    display: flex;
    flex-direction: column;
}

.contact-info .info p {
    color: #999999;
    font-size: 12px;
}

.contact-info .info span {
    color: #666666;
    font-size: 16px;
}

#toolbar {
    border-radius: 10px 10px 0 0;
}

.editor-container {
    height: 200px !important;
    border-radius: 0 0 10px 10px;
    background: #fff;
}

@media screen and (max-width: 900px) {
    .faqs-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .faqs-section {
        width: 100%;
        background-color: white;
        border: 1px solid #bcbcbc;
        border-radius: 10px;
        padding: 10px;
    }

    .contact-section {
        width: 100%;
        height: fit-content;
        padding: 10px;
        border-radius: 10px;
        background-color: rgba(241, 172, 33, 0.08);
        border: 1px solid #f1ac21;
    }
}

/* ====================== SLA CONFIGURATIONS===================== */
.workflow-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 10px;
    max-width: 1200px;
    width: 100%;
}

.workflow-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.workflow-card .card-header {
    /* padding-bottom: 10px; */
    padding: 18px;
    border-bottom: 1px solid #b3b3b3;
}

.workflow-card .card-header small {
    color: #b3b3b3;
    font-size: 13px;
    font-family: var(--montserratBold);
}

.workflow-card .card-header h3 {
    font-size: 18px;
    color: #000000;
    margin: 5px 0 4px;
    font-family: var(--montserratBold);
}

.workflow-card .card-header p {
    font-size: 11px;
    color: #666;
}

.workflow-card .steps {
    margin: 0;
    padding: 18px !important;
    list-style: none;
}

.workflow-card .steps li {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.workflow-card .steps li > div {
    font-size: 16px;
}

.workflow-card .steps li .desc {
    font-size: 10px;
}

.workflow-card .steps li .desc span {
    font-family: var(--montserratBold);
}

.workflow-card .step-icon {
    width: 25px;
    height: 25px;
    font-size: 12px;
    background: var(--mtn-yellow);
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-weight: bold;
}

.workflow-card .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 10px;
    background-color: #f2f2f2;
    font-size: 16px;
    color: #333;
    padding: 1rem;
    border-radius: 0 0 12px 12px;
}

.workflow-card .card-footer span {
    font-family: var(--montserratBold);
}

.workflow-card .actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.workflow-card .actions span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 10px;
    background-color: white;
    cursor: pointer;
}

.workflow-card .actions span svg {
    height: 20px;
    width: 20px;
}

/* ======================= Calendar ============================ */
.calendar-container {
    display: flex;
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    gap: 1rem;
    border: 1px solid #ccc;
}

.calendar-section {
    width: 75%;
    padding: 10px;
}

.calendar-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: scroll;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e5e5;
}

.calendar-wrapper::-webkit-scrollbar {
    height: 8px;
    width: 5px;
}

.calendar-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--mtn-grey-muted);
}

.upcoming-section {
    width: 25%;
    background-color: #f2f2f2;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #b3b3b3;
    height: fit-content;
}

.upcoming-section .schedule-card {
    border: 2px solid #d4a53b;
    border-radius: 10px;
    padding: 12px 14px;
    background: #fff;
    color: #444;
    margin-bottom: 12px;
}

.upcoming-section .schedule-top {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #6c6c6c;
}

.upcoming-section .schedule-card hr {
    border: none;
    height: 1px;
    background: #e0e0e0;
    margin: 6px 0;
}

.upcoming-section .schedule-title {
    margin: 6px 0 10px;
    font-size: 15px;
    color: #cc9321;
}

.upcoming-section .schedule-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.upcoming-section .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #6c6c6c;
}

.conversion-container {
    width: 100%;
}

.conversion-container .title {
    font-size: 1.5rem;
    margin-bottom: 8px;
    font-family: var(--montserratMedium);
    color: #545f71;
}

.conversion-box {
    display: grid;
    grid-template-columns: auto 50px auto auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 1rem;
    padding: 10px;
    background-color: #f2f2f2;
    border: 1px solid #545f71;
    color: #545f71;
    border-radius: 20px;
}

.conversion-box .conversion-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    background-color: #fff;
    border: 1px solid #999999;
    border-radius: 10px;
    padding: 5px 10px;
}

.conversion-box .conversion-option input {
    border: none;
    outline: none;
}

.conversion-box .currency-tag {
    display: flex;
    align-items: center;
    /* text-wrap: nowrap; */
    gap: 10px;
    font-size: 12px;
    color: #999999;
}

.currency-tag img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

#swapBtn {
    border: 1px solid #000;
    border-radius: 50%;
    border-radius: 10px;
    padding: 5px 0;
    cursor: pointer;
    font-size: 18px;
    transition: 0.3s ease;
}

#swapBtn.spin i {
    animation: spin 0.5s linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.conversion-box .save-btn {
    background: #0f0f0f;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    font-size: 15px;
}

.input-conversion {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    color: #545f71;
    outline: none;
}

.input-conversion input {
    border: none !important;
    outline: none !important;
}

.input-conversion .conversion {
    display: flex;
    align-items: center;
    gap: 5px;
}

#overlay,
#loaderoverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    z-index: 999;
}

/* Right Panel */
.event-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 380px;
    height: 100vh;
    background: #ffffff;
    padding: 25px;
    box-shadow: -3px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.35s ease;
    z-index: 9999;
    font-family: "Inter", sans-serif;
}

/* When active, slide in */
.event-panel.active {
    right: 0;
}

/* Header */
.event-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.event-panel-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: #222;
}

#close-panel {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #444;
    font-weight: 400;
}

#close-panel:hover {
    color: #000;
}

/* Body */
.event-panel-body {
    margin-top: 20px;
}

.detail-item {
    margin-bottom: 18px;
    font-size: 15px;
    color: #333;
}

.detail-item strong {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    color: #555;
}

.detail-item span {
    color: #222;
}

@media screen and (max-width: 768px) {
    .conversion-container .title {
        font-size: 1rem;
        margin-bottom: 8px;
        font-family: var(--montserratMedium);
        color: #545f71;
    }

    .conversion-box {
        display: grid;
        grid-template-columns: auto;
        gap: 10px;
    }

    .summary-details-containers {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1rem;
    }
}

/* ================================== EXTERNAL COUNSEL DETAILS ============================= */
.counsel-wrapper {
}

.counsel-header {
    background: #f2f2f2;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 4px solid #000;
}

.counsel-header .counsel-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.counsel-header .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f1ac21;
    display: flex;
    align-items: center;
    justify-content: center;
}

.counsel-header .info h2 {
    color: #666666;
    font-size: 20px;
}

.counsel-header .info p {
    color: #999999;
    font-size: 14px;
}

.counsel-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.counsel-actions .btn {
    padding: 12px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: var(--montserratBold);
}

.counsel-actions .btn.dark {
    background: #222;
    color: white;
}

.counsel-actions .btn.yellow {
    background: var(--mtn-yellow);
    color: #000;
}

.content-grid {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    background-color: #f2f2f2;
    border-radius: 10px;
    gap: 0.5rem;
    padding: 1rem;
}

.content-grid .card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    max-height: 600px;
    overflow-y: scroll;
}

.content-grid .card::-webkit-scrollbar {
    height: 8px;
    width: 5px;
}

.content-grid .card::-webkit-scrollbar-thumb {
    background-color: var(--labelColor);
}

.content-grid .card h3 {
    color: #4d4d4d;
    font-size: 20px;
    margin: 1rem 0;
    font-family: var(--montserratBold);
}

.stats-list {
    margin-bottom: 20px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.stat-row span:last-child {
    color: #666666;
}

.about-text {
    margin-bottom: 15px;
    font-size: 14px;
}

.representative-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(242, 242, 242, 0.5);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #999999;
    margin-bottom: 1rem;
}

.rep-avatar {
    width: 50px;
    height: 50px;
    background: rgba(246, 184, 30, 0.4);
    border-radius: 50%;
    color: #c48c00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--montserratBold);
}

.representative-box .rep-info {
    display: flex;
    gap: 10px;
    align-items: center;
}

.representative-box .rep-info .rep-name {
    color: #333333;
    font-size: 17px;
}

.representative-box .rep-info .rep-email {
    font-size: 14px;
    color: #4d4d4d;
}

.representative-box .rep-contact {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
}

.representative-box .rep-contact span:first-child {
    color: #666666;
    font-size: 14px;
}

.representative-box .rep-contact span:last-child {
    color: #999999;
    font-size: 14px;
}

.case-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.case-row .left-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.case-row .left-row svg {
    height: 40px;
    width: 40px;
}

.case-title {
    font-weight: bold;
    margin: 0;
}

.case-meta {
    margin: 0;
    font-size: 13px;
    color: #777;
}

.pill {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.pill.won {
    color: #308642;
    background-color: #bbf7d0;
}

.pill.lost {
    color: #ff383c;
    background: rgba(255, 56, 60, 0.1);
}

/* ================================= Memo screen========================= */
.tabs-container {
    width: 100%;
}

.draw-container {
    display: flex;
    gap: 2rem;
    border-bottom: 1px solid #ddd;
}

.draw-tab {
    background: none;
    outline: none;
    border: none;
    padding: 10px 25px;
    font-size: 14px;
    cursor: pointer;
    color: #999;
    position: relative;
}

.draw-tab.active {
    color: #000;
    border-bottom: 4px solid #000;
    font-weight: 600;
}

.draw-content {
    margin-top: 15px;
}

.draw {
    display: none;
    background: #f3f3f3;
    height: 200px;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 2rem;
}

.draw.active {
    display: block;
}

.signature-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#signatureCanvas {
    background: transparent;
    cursor: crosshair;
}

.clear-btn {
    margin-top: 1rem;
    background: none;
    border: none;
    color: #555;
    font-family: var(--montserratBold);
    cursor: pointer;
}

.draw-content input[type="text"],
.draw-content input[type="file"] {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.draw-content .upload-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background-color: white;
    border: 1px dotted #b3b3b3;
    height: 100%;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
}

.draw-content .upload-box input {
    border: none;
    outline: none;
}

.draw-content .upload-box p.upload-text {
    color: var(--mtn-yellow);
    font-size: 13px;
}

/* ================================================ DASHBOARD || SETTINGS ============================== */
.settings-container {
    display: flex;
}

.settings-container .profile-container {
    display: flex;
    flex-direction: column;
    width: 30%;
    background-color: #f2f2f2;
    border: 1px solid #cccccc;
    border-radius: 10px;
}

.settings-header {
    background-image: url("../../images/settings.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 18vh;
    border-radius: 10px 10px 0 0;
    margin-bottom: 5rem;
    position: relative;
}

.settings-header .profile-img {
    position: absolute;
    bottom: -30px;
    left: 35px;
}

.settings-header .profile-img .image {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    border: 4px solid #fff;
}

.settings-header .profile-img .image img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
}

.settings-header .profile-img .edit-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #fecb00;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.settings-container-tabs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.settings-container-tabs .setting-tab {
    color: #999999;
    padding: 1rem 2rem;
    cursor: pointer;
}

.settings-container-tabs .setting-tab:last-child {
    margin-bottom: 5rem;
}

.settings-container-tabs .setting-tab.active {
    background-color: #e6e6e6;
    border-right: 6px solid #000;
    color: #000;
}

.settings-container .information-container {
    display: flex;
    flex-direction: column;
    width: 70%;
    padding: 0 2rem;
    display: none;
}

.settings-container .information-container.active {
    display: block;
}

.settings-container .information-container h2 {
    margin-bottom: 2rem;
}

@media screen and (max-width: 768px) {
    .settings-container {
        display: flex;
        align-items: start;
        flex-direction: column;
    }

    .settings-container .profile-container,
    .settings-container .information-container {
        width: 100%;
    }

    .settings-header {
        height: 25vh;
    }

    .settings-header .profile-img {
        left: 50%;
        transform: translateX(-50%);
    }

    .settings-container .information-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0 1rem;
        display: none;
        margin-top: 2rem;
    }
}

/* ===== Notification Bell ===== */
.notification-bell {
    position: relative;
    cursor: pointer;
    font-size: 20px;
    color: #545f71;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background 0.2s;
}

.notification-bell:hover {
    background: rgba(0, 0, 0, 0.05);
}

.bell-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #ff383c;
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 50%;
    font-family: var(--montserratBold);
    line-height: 1;
}

/* ===== Notification Drawer ===== */
.notification-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    z-index: 1001;
}

.notification-overlay.show {
    display: block;
}

.notification-drawer {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: white;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-drawer.show {
    right: 0;
}

.drawer-header {
    padding: 20px;
    border-bottom: 1px solid var(--mtn-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.drawer-header-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.drawer-header h2 {
    font-size: 18px;
    font-family: var(--montserratBold);
    color: var(--mtn-black);
    margin: 0;
}

.notification-count {
    background: var(--mtn-yellow);
    color: var(--mtn-black);
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--montserratBold);
}

.close-drawer {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: var(--mtn-grey-muted);
    transition: color 0.2s;
}

.close-drawer:hover {
    color: var(--mtn-black);
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}

.notification-item {
    display: flex;
    padding: 15px 20px;
    border-bottom: 1px solid #f9fafb;
    cursor: pointer;
    transition: background 0.2s;
}

.notification-item:hover {
    background: #f9fafb;
}

.notification-item.unread {
    background: rgba(254, 203, 0, 0.05);
}

.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    font-size: 18px;
}

.notification-icon.warning {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}
.notification-icon.success {
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
}
.notification-icon.info {
    background: rgba(31, 78, 121, 0.1);
    color: #1f4e79;
}

.notification-content {
    flex: 1;
}

.notification-title {
    font-size: 14px;
    font-family: var(--montserratBold);
    color: var(--mtn-black);
    margin-bottom: 4px;
}

.notification-content p {
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 6px;
    line-height: 1.4;
}

.notification-time {
    font-size: 11px;
    color: var(--mtn-grey-muted);
}

.drawer-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--mtn-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mark-all-read {
    background: none;
    border: none;
    color: #1f4e79;
    font-size: 13px;
    cursor: pointer;
    font-family: var(--montserratMedium);
}

.view-all-notifications {
    color: var(--mtn-grey-muted);
    font-size: 13px;
    text-decoration: none;
}

.view-all-notifications:hover {
    color: var(--mtn-black);
}
/* =================== SABC PERIODIC REPORT PAGE =================== */

.sabc-dashboard-page {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sabc-icon-yellow,
.sabc-icon-gold {
    color: var(--mtn-yellow);
}

/* Cards: keep existing dashboard card style */
.sabc-dashboard-page .card-container {
    margin-bottom: 1rem;
}

/* Periodic report filter area */
.sabc-dashboard-page .sabc-performance-section .table-container {
    margin-bottom: 1rem;
}

.sabc-dashboard-page .search-filter-row {
    align-items: stretch;
}

.sabc-dashboard-page .search-btn {
    min-height: 45px;
}

.sabc-dashboard-page .select-container {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.sabc-dashboard-page .select-container .select {
    background-color: #fff;
    min-height: 45px;
}

.sabc-dashboard-page .select-container .select select,
.sabc-dashboard-page .select-container .select input[type="date"] {
    min-width: 140px;
}

/* Periodic chart */
.sabc-chart-card {
    background-color: #fff;
    border: 1px solid rgba(194, 194, 194, 1);
    border-radius: 14px;
    padding: 15px;
    margin-top: 1rem;
}

.sabc-chart-card .card-header {
    border-bottom: 1px solid var(--mtn-grey-soft);
    padding-bottom: 12px;
    margin-bottom: 15px;
}

.sabc-chart-card .card-header h3 {
    font-size: 18px;
    font-family: var(--montserratMedium);
    color: #333333;
}

.sabc-chart-wrapper {
    position: relative;
    width: 100%;
    height: 420px;
}

.sabc-chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}

.sabc-empty-state {
    position: absolute;
    inset: 0;
    background-color: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    gap: 8px;
    color: #666666;
}

.sabc-empty-state strong {
    color: var(--mtn-yellow);
    font-family: var(--montserratBold);
    font-size: 18px;
}

.sabc-empty-state span {
    font-size: 13px;
    font-family: var(--montserratLight);
}

.is-hidden {
    display: none !important;
}

/* Sortable headers */
#periodicReportTable th[data-column] {
    cursor: pointer;
}

#periodicReportTable th[data-column] i {
    color: #999999;
    font-size: 11px;
}

/* Bottom spacing */
.dashboard-page-bottom-space {
    width: 100%;
    height: 120px;
    min-height: 120px;
}

/* Fix background stopping halfway */
.main-content {
    min-height: 100vh;
    height: auto !important;
    background-repeat: repeat-y !important;
    background-size: cover;
    padding-bottom: 120px;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .sabc-dashboard-page .select-container {
        flex-direction: column;
        width: 100%;
    }

    .sabc-dashboard-page .select-container .select,
    .sabc-dashboard-page .select-container .select select,
    .sabc-dashboard-page .select-container .select input[type="date"] {
        width: 100%;
        min-width: 100%;
    }

    .sabc-dashboard-page .export-btn,
    .sabc-dashboard-page .btn-primary {
        width: 100%;
    }

    .sabc-chart-wrapper {
        height: 320px;
    }
}
/* ================= PERIODIC REPORT FILTER LAYOUT ================= */

.search-filter-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
}

/* Search occupies full first row */
.search-filter-row .search-btn {
    width: 100%;
    max-width: 100%;
}

/* Filters occupy second row */
.search-filter-row .select-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
}

/* Mobile */
@media (max-width: 768px) {
    .search-filter-row .select-container {
        flex-direction: column;
        align-items: stretch;
    }

    .search-filter-row .select-container .select,
    .search-filter-row .select-container button {
        width: 100%;
    }
}
/* ================= SABC GRAPH FILTER BUTTONS ================= */

.sabc-filter-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 18px 0;
    padding: 12px 0;
}

.sabc-winning-filter-btn,
.sabc-hourly-filter-btn {
    border: 1px solid var(--mtn-yellow);
    background: #ffffff;
    color: var(--mtn-yellow);
    font-family: var(--montserratBold);
    font-size: 13px;
    border-radius: 999px;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sabc-winning-filter-btn:hover,
.sabc-winning-filter-btn.active,
.sabc-hourly-filter-btn:hover,
.sabc-hourly-filter-btn.active {
    background: var(--mtn-yellow);
    color: #ffffff;
}

.sabc-date-input {
    min-width: 160px;
    border: 1px solid var(--mtn-yellow);
    background: #ffffff;
    color: #333333;
    font-family: var(--montserratMedium);
    border-radius: 999px;
    padding: 10px 14px;
    outline: none;
}

.sabc-date-input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #f2f2f2;
    border-color: #cccccc;
    color: #777777;
}
/* ======================== SABC Regional Reports ======================== */

.sabc-dashboard-page {
    width: 100%;
}

.sabc-chart-card {
    background: #ffffff;
    border: 1px solid var(--mtn-grey-soft);
    border-radius: 14px;
    padding: 16px;
    margin-top: 1rem;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.sabc-chart-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.sabc-chart-card .card-header h3 {
    font-size: 18px;
    font-family: var(--montserratBold);
    color: #333333;
}

.sabc-chart-wrapper {
    position: relative;
    width: 100%;
    height: 380px;
}

.sabc-chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}

.sabc-empty-state {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.92);
    border: 1px dashed var(--mtn-grey-muted);
    border-radius: 12px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    color: #666666;
}

.sabc-empty-state strong {
    font-family: var(--montserratBold);
    color: #333333;
    font-size: 16px;
}

.sabc-empty-state span {
    font-size: 13px;
    font-family: var(--montserratLight);
}

.sabc-empty-state.is-hidden {
    display: none;
}

.sabc-icon-yellow,
.sabc-icon-gold {
    color: var(--mtn-yellow);
}

.dashboard-page-bottom-space {
    height: 80px;
}

#regionalReportTable th[data-column] {
    cursor: pointer;
}

#regionalReportTable th[data-column]:hover {
    background: #e9e9e9;
}

#regionalReportTable th[data-column] i {
    font-size: 11px;
    color: #999999;
}

#regionalReportBody td:nth-child(2),
#regionalReportBody td:nth-child(3),
#regionalReportBody td:nth-child(4),
#regionalReportBody td:nth-child(5),
#regionalReportBody td:nth-child(6) {
    font-family: var(--montserratMedium);
}

#regionalReportBody td:nth-child(4) {
    color: var(--mtn-yellow);
    font-family: var(--montserratBold);
}

#exportRegionalReportBtn {
    white-space: nowrap;
}

#applyRegionalFiltersBtn,
#resetRegionalFiltersBtn {
    white-space: nowrap;
}

@media screen and (max-width: 1024px) {
    .sabc-chart-wrapper {
        height: 320px;
    }

    .search-filter-row {
        align-items: flex-start;
    }

    .select-container {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

@media screen and (max-width: 768px) {
    .sabc-chart-card {
        padding: 12px;
    }

    .sabc-chart-wrapper {
        height: 280px;
    }

    .select-container {
        flex-direction: column;
        align-items: stretch;
    }

    .select-container .select,
    .select-container button {
        width: 100%;
    }

    .pagination-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .pagination-container .pagination-box {
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 480px) {
    .sabc-chart-wrapper {
        height: 240px;
    }

    .card-container {
        grid-template-columns: 1fr;
    }

    .request-table td,
    .request-table th {
        font-size: 12px;
    }
}

/* ======================== SABC Territory Reports ======================== */

#territoryReportTable th[data-column] {
    cursor: pointer;
}

#territoryReportTable th[data-column]:hover {
    background: #e9e9e9;
}

#territoryReportTable th[data-column] i {
    font-size: 11px;
    color: #999999;
}

#territoryReportBody td:nth-child(3),
#territoryReportBody td:nth-child(4),
#territoryReportBody td:nth-child(5),
#territoryReportBody td:nth-child(6),
#territoryReportBody td:nth-child(7) {
    font-family: var(--montserratMedium);
}

#territoryReportBody td:nth-child(5) {
    color: var(--mtn-yellow);
    font-family: var(--montserratBold);
}

#exportTerritoryReportBtn,
#applyTerritoryFiltersBtn,
#resetTerritoryFiltersBtn {
    white-space: nowrap;
}

@media screen and (max-width: 1024px) {
    #territoryReportTable {
        min-width: 900px;
    }
}

@media screen and (max-width: 768px) {
    #territoryReportTable {
        min-width: 850px;
    }

    #territorySearchInput {
        min-width: 220px;
    }
}

.geo-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.geo-modal-overlay.active {
    display: flex;
}

.geo-modal {
    width: 100%;
    max-width: 640px;
    background: #ffffff;
    border-radius: 18px;
    padding: 24px;
}

.geo-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.geo-modal-header h3 {
    font-size: 20px;
    font-family: var(--montserratBold);
    color: #222222;
}

.geo-modal-header p {
    font-size: 13px;
    color: #667085;
    margin-top: 4px;
}

.geo-modal-close {
    border: none;
    background: #f3f4f6;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    cursor: pointer;
}

.geo-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.geo-form-grid .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.geo-form-grid label {
    font-size: 13px;
    font-family: var(--montserratMedium);
    color: #344054;
}

.geo-form-grid input,
.geo-form-grid select {
    width: 100%;
    height: 44px;
    border: 1px solid var(--mtn-grey-soft);
    border-radius: 10px;
    padding: 0 12px;
    outline: none;
}

.geo-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 22px;
}
.geo-toast-box {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.geo-toast {
    min-width: 280px;
    max-width: 380px;
    background: #ffffff;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
    border: 1px solid #e5e7eb;
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.25s ease;
    font-family: var(--montserratMedium);
    color: #222222;
    font-size: 13px;
}

.geo-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.geo-toast-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.geo-toast.success .geo-toast-icon {
    background: #dcfce7;
    color: #16a34a;
}

.geo-toast.error .geo-toast-icon {
    background: #fee2e2;
    color: #dc2626;
}

.geo-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.58);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.geo-confirm-overlay.active {
    display: flex;
}

.geo-confirm-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 18px;
    padding: 26px;
    text-align: center;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.25);
}

.geo-confirm-icon {
    width: 54px;
    height: 54px;
    background: #fff7ed;
    color: #ea580c;
    border-radius: 999px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    font-size: 22px;
}

.geo-confirm-card h3 {
    font-size: 20px;
    font-family: var(--montserratBold);
    color: #222222;
    margin-bottom: 8px;
}

.geo-confirm-card p {
    font-size: 13px;
    color: #667085;
    line-height: 1.5;
}

.geo-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
}

.btn-danger-custom {
    border: none;
    background: #dc2626;
    color: #ffffff;
    height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--montserratMedium);
}

.btn-danger-custom:hover {
    background: #b91c1c;
}
.geo-modal-overlay.active,
.geo-confirm-overlay.active {
    display: flex !important;
}

.geo-modal-overlay,
.geo-confirm-overlay {
    display: none;
}
.image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    background: #fff;
    border-radius: 50%;
}
/* ==========================================
   USER PROFILE DROPDOWN
========================================== */

.user-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.user-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 10px;
    transition: all .25s ease;
}

.user-dropdown-trigger:hover {
    background: rgba(0,0,0,.04);
}

/* ==========================================
   TOPBAR LOGO
========================================== */

.image-section {
    position: relative;
}

.image-section .image {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 2px solid #f0c400;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-section .image img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    border-radius: 0 !important;
}

.online {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 10px;
    height: 10px;
    background: #10b981;
    border: 2px solid #fff;
    border-radius: 50%;
}

/* ==========================================
   USER INFO
========================================== */

.name-section {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.name-section span:first-child {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.name-section span:last-child {
    font-size: 12px;
    color: #6b7280;
}

.user-dropdown-arrow {
    display: flex;
    align-items: center;
    color: #6b7280;
    font-size: 13px;
    transition: all .25s ease;
}

.user-dropdown-menu.show + .user-dropdown-arrow,
.user-dropdown:hover .user-dropdown-arrow {
    transform: rotate(180deg);
}

/* ==========================================
   DROPDOWN MENU
========================================== */

.user-dropdown-menu {
    position: absolute;
    top: 68px;
    right: 0;
    width: 290px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,.15);
    border: 1px solid #ececec;
    overflow: hidden;
    display: none;
    z-index: 99999;
}

.user-dropdown-menu.show {
    display: block;
    animation: dropdownFade .25s ease;
}

@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   HEADER INSIDE DROPDOWN
========================================== */

.dropdown-user-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: #fafafa;
    border-bottom: 1px solid #ececec;
}

.dropdown-user-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 2px solid #f0c400;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-user-avatar img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.dropdown-user-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.dropdown-user-details strong {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.dropdown-user-details small {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.dropdown-user-details span {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #f0c400;
}

/* ==========================================
   MENU ITEMS
========================================== */

.user-dropdown-item {
    width: 100%;
    border: none;
    background: transparent;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    color: #374151;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s ease;
}

.user-dropdown-item:hover {
    background: #f7f7f7;
}

.user-dropdown-item i {
    width: 18px;
    text-align: center;
    font-size: 15px;
}

.logout-btn {
    border-top: 1px solid #ececec;
}

.logout-btn i {
    color: #dc2626;
}

.logout-btn:hover {
    background: #fef2f2;
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

    .name-section {
        display: none;
    }

    .user-dropdown-menu {
        width: 260px;
        right: -20px;
    }
}