html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}


/* Apply Poppins font to the header section */
header {
    font-family: 'Poppins', sans-serif;
}

.hero-image {
    width: 100%;
    height: 300px !important; /* Adjusted height to make the hero image shorter */
    object-fit: cover; /* Ensures the image covers the space */
}



.navbar-brand img {
    height: 40px; /* Adjust logo size */
}

/* Sidebar Links - Apply Poppins, Make Bold, and Adjust Font Size to Prevent Wrapping */
#sidebar .nav-link {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; /* Bold font */
    font-size: 1.125rem; /* Optimized font size to prevent wrapping */
    white-space: nowrap; /* Prevent wrapping by ensuring text stays on one line */
}


/* Adjusted font sizes for GZ Pay and welcome text */
.gzpay-title {
    font-size: 1.1rem; /* Smaller font size for GZ Pay heading */
}

.gzpay-welcome-text {
    font-size: 0.75rem; /* Smaller font size for welcome text */
}

/* New group div for GZ Pay and welcome text with more margin */
.gzpay-group {
    margin-bottom: 3rem; /* Added more margin below the group */
}


:root {
    --ui-background:#F3F3F3;
    /* ui shades */
    --ui-0: #FFFFFF;
    --ui-1: #F8FBFF;
    --ui-2: #E5EAF0;
    --ui-3: #A4AFB7;
    --ui-4: #4D4F5C;
    --ui-5: #282931;
    --ui-6: #191A20;
    --ui-7: #010101;

    /* actions */
    --action-pri-4: #266CF6;
    --action-pri-3: #5592F7;
    --action-pri-2: #97BDFA;
    --action-pri-1: #E9F0FE;

    --action-sec-4: #161D26;
    --action-sec-3: #3E4C5E;
    --action-sec-2: #9CABC1;
    --action-sec-1: #F4F7FA;

    /* Brand Colors */
    --bs-primary: #F26A36;
    --bs-primary-dark: #A46E62;
    --bs-primary-light: #FAC7B2;
    --bs-secondary: #53297F;
    --bs-secondary-dark: #533C59;
    --bs-secondary-light: #DAE1F1;
    /* Contextual Colors */
    --bs-success: #28A745;
    --bs-danger: #DC3545;
    --bs-warning: #FFC107;
    --bs-info: #37BAC3;
    /* Gray Scale */
    --bs-gray-100: #F5F5F5;
    --bs-gray-200: #E7E7E7;
    --bs-gray-300: #DEE2E6;
    --bs-gray-400: #CED4DA;
    --bs-gray-500: #ADB5BD;
    --bs-gray-600: #6C757D;
    --bs-gray-700: #495057;
    --bs-gray-800: #343A40;
    --bs-gray-900: #212529;
    /* Default */
    --bs-white: #FFFFFF;
    --bs-black: #000000;
    /* Typography */
    --bs-font-sans-serif: 'Raleway', system-ui, sans-serif;
    --bs-heading-font-family: 'Poppins', system-ui, sans-serif;
    /* Font Weights */
    --bs-bold: 700;
    --bs-semibold: 600;
    --bs-medium: 500 --bs-regular: 400;
    --bs-light: 300;
    /* Font Sizes */
    --bs-caption: 0.75rem; /*caption*/
    --bs-body: 1rem; /*body*/
    --bs-sidebar-title: 1.1rem; /* Smaller font size for GZ Pay heading */
    --bs-sidebar-menu-link: 1.125rem; /* Nav link Optimized font size to prevent wrapping */
    --bs-lead: 1.25rem; /*lead*/
    /*Radius*/
    --bs-border-radius: 8px;
}

/* === Typography Overrides === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--bs-heading-font-family);
    font-weight: var(--bs-semibold);
}

h1.display, h2.display {
    font-weight: var(--bs-bold);
}

.lead {
    font-family: var(--bs-font-sans-serif);
}

/* === Button Customization === */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-primary:hover {
    background-color: var(--bs-primary-dark);
    border-color: var(--bs-primary-dark);
}

.btn-secondary {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

.btn-secondary:hover {
    background-color: var(--bs-secondary-dark);
    border-color: var(--bs-secondary-dark);
}

/* === Inline Text Elements === */
a {
    color: var(--bs-primary);
}

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

/* === Utility Classes (optional additions) === */
.bg-primary-light {
    background-color: var(--bs-primary-light) !important;
}

.text-secondary-dark {
    color: var(--bs-secondary-dark) !important;
}

/* More components (cards, navbar, alerts) can be added as needed */


/* Navbar styling */
.navbar-brand img {
    height: 40px; /* Adjust logo size */
}


/* Sidebar styling */
#sidebar {
    background-color: var(--bs-secondary);
}

.gzpay-title {
    font-size: var(--bs-sidebar-title); /* Smaller font size for GZ Pay heading */
    color: var(--bs-white);
}

.gzpay-welcome-text {
    font-size: var(--bs-caption); /* Smaller font size for welcome text */
    color: var(--bs-white);
}

/* Logo visibility toggles */
.navbar-brand.logo-wide {
    display: none;
    filter: brightness(0) invert(1);
}
.navbar-brand.logo-stacked {
    display: block;
    filter: brightness(0) invert(1);
}

/* Sidebar Links - Apply Poppins, Make Bold, and Adjust Font Size to Prevent Wrapping */
#sidebar .nav-link {
    font-family: var(--bs-heading-font-family);
    font-weight: var(--bs-semibold); /* Bold font */
    font-size: var(--bs-sidebar-menu-link); /* Optimized font size to prevent wrapping */
    white-space: nowrap; /* Prevent wrapping by ensuring text stays on one line */
    color: var(--bs-white);
    border-radius: var(--bs-border-radius);
}


/* css restructuring starts here */

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
    #sidebar {
        position: fixed;
        top:0;
        width: 200px;
        height: 100%;
    }
    #header {
        margin-left: 200px;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
    }
    #footer {
        left: 200px;
        width: calc(100% - 200px);
    }
    #main {
        margin-left: 200px;
        margin-top: 10px;
        width: calc(100% - 200px);
    }

    .navbar-brand.logo-wide {
        display: block;
    }
    .navbar-brand.logo-stacked {
        display: none;
    }
}

body {
    font-family: var(--bs-font-sans-serif);
    color: var(--ui-1);
    background-color: var(--ui-background);
    margin-bottom: 60px;
}

#sidebar {
    background-color: var(--ui-6);
    padding-top: 1rem;
}
#sidebar .nav-link:hover {
    background-color: var(--ui-4);
    color: var(--bs-white);
}
header {
    background-color: var(--bs-white);
    color: var(--ui-6);
    margin-top: none;
}
header nav.navbar {
    color: var(--ui-6);
    box-shadow: none;
}

footer {
    background-color: var(--bs-white);
    color: var(--ui-6);
    box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.16);

    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
}
main {
    padding-bottom: 50px;
    width: 100%;
}

/* Main */
.hero-image {
    width: 100%;
    height: 300px; /* Adjusted height to make the hero image shorter */
    object-fit: cover; /* Ensures the image covers the space */
}
.page-header.has-hero {
    position: relative;
}
.page-header.has-hero:before {
    position:absolute;
    content:'';
    top: 0;
    left: 0;
    width: 100%;
    height:40px;
    background: linear-gradient(180deg, rgba(246, 248, 251, 1), rgba(255, 255, 255, 0));
}
.gzpay-group {
   margin: 0 1rem 1rem 1rem;
}

.gzpay-table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid var(--tblr-border-color);
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.gzpay-table thead tr {
    background-color: #ffffff;
    color: #191a20;
    text-align: left;
}
.gzpay-table th,
.gzpay-table td {
    padding: 12px 15px;
}
.gzpay-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.gzpay-table tbody tr:nth-of-type(even) {
    background-color: #ffffff;
}