/* ===== BRAND COLORS (ICICI STYLE) ===== */

.icici-orange       { color: #f58220; }

.icici-orange-bg    { background-color: #f58220; }

.icici-orange-dark  { background-color: #e36b0a; }



.icici-blue-bg      { background-color: #0f3c6e; }

.icici-blue-text    { color: #0f3c6e; }



.bg-light-finance   { background-color: #f5f7fa; }



body {

    margin: 0;

    font-family: 'Segoe UI', sans-serif;

    background: #FBFBFB;

}



.sidebar {

    height: 100vh;

    width: 220px;

     background: #0f3c6e;

    position: fixed;

    padding-top: 20px;

    color: white;

}



.badge-success,

.badge.bg-success {

    background-color: #e6f4ea;

    color: #198754;

    font-weight: 600;

}



.sidebar a {

    display: block;

    color: white;

    padding: 15px 20px;

    text-decoration: none;

    font-weight: 500;

}



.sidebar a:hover {

    background-color: #294d6d;

}



.main {

    margin-left: 220px;

    padding: 30px;

}



h1 {

    color: #333;

}



.card {

    background: white;

    padding: 20px;

    border-radius: 10px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.1);

    margin-bottom: 20px;

}



.select2-container .select2-selection--single {

    height: 38px;

    padding: 5px 10px;

}



.select2-selection__arrow {

    height: 36px !important;

}



.badge-role {

    padding: 6px 10px;

    font-size: 0.75rem;

    border-radius: 6px;

}



.badge-commission { background: #0d6efd; }

.badge-tl { background: #6f42c1; }

.badge-salary { background: #6c757d; }



.badge-unit {

    background: #e7f1ff;

    color: #0d6efd;

}



.badge-resolution {

    background: #e6f4ea;

    color: #198754;

}

.btn-primary {

    background-color: #f58220;

    border-color: #f58220;

}



.btn-primary:hover {

    background-color: #e36b0a;

    border-color: #e36b0a;

}

.sidebar a.active {

    background: #f58220;

    color: #fff;

}

/* ===============================

   DASHBOARD TYPOGRAPHY FIX

   =============================== */



/* Main page title: "Dashboard" */

.content-header h1,

.page-title,

.dashboard-title,

h1 {

    font-size: 28px;

    font-weight: 700;

   color: #0f2a44;

    margin-bottom: 20px;

}



/* Section titles: charts, tables */

.section-title,

.chart-title,

h4,

h5 {

    font-size: 18px;

    font-weight: 600;

    color: #111827;

    margin-bottom: 12px;

}



/* General text balance */

body {

    font-size: 15px;

}

/* ===============================

   DASHBOARD SECTIONS

   =============================== */



.dashboard-section {

    background: #ffffff;

    border-radius: 14px;

    padding: 20px 24px;

    margin-bottom: 24px;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);

}



/* ===============================

   CHART CONTAINERS

   =============================== */



.chart-container {

    min-height: 320px;

    position: relative;

}



/* ===============================

   GRID BALANCE

   =============================== */



.row > [class*="col-"] {

    margin-bottom: 24px;

}



/* ===============================

   OPTIONAL CONTENT BACKGROUND

   =============================== */



.dashboard-content {

    background: #f8fafc;

    padding: 24px;

    border-radius: 18px;

}



/* ===============================

   BANK-GRADE LOGIN UI

=============================== */



body {

    margin: 0;

    padding: 0;

    font-family: "Segoe UI", Roboto, Arial, sans-serif;

    background: #f4f6f9;

    color: #1f2937;

}



/* Top authority bar */

.bank-topbar {

    height: 56px;

    background: linear-gradient(90deg, #0f2a44, #143a5a);

}



/* Center layout */

.login-wrapper {

    min-height: calc(100vh - 56px);

    display: flex;

    align-items: center;

    justify-content: center;

}



/* Login card */

.login-card {

    width: 380px;

    background: #ffffff;

    border-radius: 6px;            /* less playful */

    padding: 28px 30px;

    box-shadow: 0 12px 30px rgba(0,0,0,0.12);

    border-top: 4px solid #f58220; /* brand accent */

}



/* Title */

.login-card h2 {

    font-size: 20px;

    font-weight: 600;

    color: #0f2a44;

    margin-bottom: 4px;

    text-align: center;

}



.login-card .subtitle {

    font-size: 12px;

    color: #6b7280;

    text-align: center;

    margin-bottom: 20px;

}



/* Labels */

.login-card label {

    font-size: 12px;

    font-weight: 600;

    color: #374151;

    margin-bottom: 4px;

    display: block;

}



/* Inputs */

.login-card input[type="text"],

.login-card input[type="password"] {

    width: 100%;

    height: 42px;

    border: 1px solid #cbd5e1;

    border-radius: 4px;

    padding: 0 12px;

    font-size: 14px;

    background: #f9fafb;

}



.login-card input:focus {

    outline: none;

    border-color: #0f2a44;

    background: #ffffff;

}



/* reCAPTCHA spacing */

.recaptcha-box {

    margin: 18px 0;

}



/* Login button */

.login-btn {

    width: 100%;

    height: 44px;

    background: linear-gradient(90deg, #f58220, #f36b1c);

    border: none;

    border-radius: 4px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    letter-spacing: 0.4px;

}



.login-btn:hover {

    filter: brightness(0.95);

}



/* Footer note */

.login-footer {

    text-align: center;

    font-size: 11px;

    color: #9ca3af;

    margin-top: 18px;

}



<div class="bank-topbar"></div>



<div class="login-wrapper">

    <div class="login-card">

        <h2>Commission Management Portal</h2>

        <div class="subtitle">Secure Internal Banking Access</div>



        <!-- Username -->

        <label>Username</label>

        <input type="text" name="username">



        <!-- Password -->

        <label style="margin-top:14px;">Password</label>

        <input type="password" name="password">



        <!-- Recaptcha -->

        <div class="recaptcha-box">

            <!-- reCAPTCHA here -->

        </div>



        <!-- Button -->

        <button class="login-btn">LOGIN</button>



        <div class="login-footer">

            Authorized Personnel Only

        </div>

    </div>

</div>



.bank-topbar {

    height: 56px;

    background: linear-gradient(90deg, #0f2a44, #143a5a);

    display: flex;

    align-items: center;

    padding: 0 24px;

}



.bank-brand {

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: 0.5px;

}



.bank-topbar {

    width: 100%;

    height: 56px;

    background: linear-gradient(90deg, #0f2a44, #143a5a);

    display: flex;

    align-items: center;

    justify-content: center;

}



.bank-brand {

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: 0.6px;

}



.login-page {

    min-height: calc(100vh - 56px);

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f4f6f9;

}

.bank-card {

    width: 380px;

    background: #ffffff;

    border-radius: 6px;

    padding: 28px 30px;

    border-top: 4px solid #f58220;

     box-shadow: 0 12px 32px rgba(0,0,0,0.18);

}



.bank-topbar {

    background: linear-gradient(90deg, #0f2a44, #143a5a);

    border-bottom: 2px solid #f58220; /* brand accent */

}

.bank-card h1 {

    font-size: 20px;

    font-weight: 700;

    letter-spacing: 0.3px;

}

.bank-card input {

    font-size: 14px;

}



.bank-card input:focus {

    border-color: #0f2a44;

    background: #ffffff;

}

.bank-card label {

    margin-top: 12px;

}



.bank-body {

    padding: 20px;

    height: calc(100vh - 60px); /* header height */

    overflow-y: auto;

    



}

/* Sidebar overlay must NOT block content when hidden */

.sidebar-overlay {

    pointer-events: none;

}



.sidebar-overlay.active {

    pointer-events: auto;

}



.submenu {

  display: none;

  padding-left: 12px;

}



.menu-parent.open .chevron {

  transform: rotate(180deg);

}



.chevron {

  float: right;

  transition: transform 0.2s ease;

}