/* ============================= */
/* 🎨 BRAND COLORS (From Guide) */
/* ============================= */
:root {
    --primary-color: #2A317A;   /* RGB 42,49,122 */
    --primary-dark: #1E3A8A;
    --primary-light: #3B4AC9;

    --secondary-color: #FDBB11; /* RGB 253,188,17 */
    --secondary-hover: #e0a800;

    --text-dark: #1E293B;
    --text-light: #ffffff;

    --bg-light: #F5F7F9;
    --bg-soft: #E5EBEE;
}


/* ============================= */
/* 🔷 HEADER */
/* ============================= */
.t-Header-branding {
    background: linear-gradient(
        135deg,
        #2A317A 0%,
        #3B4AC9 50%,
        #1E3A8A 100%
    ) !important;
    color: white !important;
}

.t-Header-logo {
    color: var(--text-light) !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
}

.t-Header-nav {
    background: var(--primary-dark) !important;
}


/* ============================= */
/* 📌 SIDE NAVIGATION */
/* ============================= */

/*
div#t_TreeNav {
    
}
*/

.t-TreeNav {
  /*  background: linear-gradient(
        135deg,
        rgba(246,248,249,1) 0%,
        rgba(229,235,238,1) 50%,
        rgba(215,222,227,1) 100%
    ) !important;
    */
    background: linear-gradient(
        135deg,
        rgba(246,248,249,1) 0%,
         rgba(229,235,238,1) 50%,
          rgba(215,222,227,1) 51%,
           rgba(245,247,249,1) 100% ) !important;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}


/* Menu Text */
.t-TreeNav .a-TreeView-label {
    color: var(--text-dark) !important;
    font-size: 14px;
    font-weight: 500;
}


/* ============================= */
/* ✨ HOVER EFFECT */
/* ============================= */
.t-TreeNav .a-TreeView-content:hover {
    background: linear-gradient(
        135deg,
        #2A317A 0%,
        #3B4AC9 50%,
        #1E3A8A 100%
    ) !important;

    color: white !important;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* Hover Text + Icon */
.t-TreeNav .a-TreeView-content:hover .a-TreeView-label,
.t-TreeNav .a-TreeView-content:hover span.fa {
    color: #ffffff !important;
}


/* ============================= */
/* 🔥 ACTIVE MENU ITEM */
/* ============================= */
.t-TreeNav .is-current {
    background: linear-gradient(
        135deg,
        #FDBB11 0%,
        #f5a300 100%
    ) !important;

    border-radius: 8px;
}

/* Active Text */
.t-TreeNav .is-current .a-TreeView-label,
.t-TreeNav .is-current span.fa {
    color: #000000 !important;
    font-weight: 600;
}


/* ============================= */
/* 📦 CARDS / BUTTONS */
/* ============================= */
.t-Button {
    background: var(--primary-color);
    color: white;
    border-radius: 8px;
    border: none;
    font-weight: 500;
}

.t-Button:hover {
    background: var(--primary-light);
}


/* ============================= */
/* 🟡 SECONDARY BUTTON */
/* ============================= */
.t-Button--hot {
    background: var(--secondary-color) !important;
    color: black !important;
}

.t-Button--hot:hover {
    background: var(--secondary-hover) !important;
}


/* ============================= */
/* 📊 CARDS */
/* ============================= */
.t-Card {
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.t-Card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}


/* ============================= */
/* 📝 TYPOGRAPHY */
/* ============================= */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--text-dark);
    background: var(--bg-light);
}

/* Headings */
h1, h2, h3, h4 {
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Light text */
.text-light {
    font-weight: 300;
}

/* Bold */
.text-bold {
    font-weight: 700;
}


/* ============================= */
/* 📌 TABLES */
/* ============================= */
.t-Report-report th {
    background: var(--primary-color);
    color: white;
}

.t-Report-report tr:hover {
    background: #f1f5f9;
}


/* ============================= */
/* 📌 INPUT FIELDS */
/* ============================= */
.t-Form-input {
    border-radius: 8px;
    border: 1px solid #ccc;
}

.t-Form-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(42,49,122,0.3);
}


/* ============================= */
/* 🌟 CUSTOM SCROLLBAR */
/* ============================= */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}


/* ============================= */
/* 🎯 BADGES */
/* ============================= */
.t-Badge {
    background: var(--secondary-color);
    color: black;
}

.t-Region-header {
    background-color: #2A317A !important;
    color: whitesmoke !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.ui-dialog-titlebar {
    background: #2a317a !important;
    color: whitesmoke !important;
}