/* ==========================================================================
   Global Variables
   ========================================================================== */
   :root {
    --color-primary: #2F80ED;
    --color-secondary: #6C757D;
    --color-danger: #EF4444;
    --color-warning: #F59E0B;
    --color-light: #F3F4F6;
    --color-dark: #111827;
    --font-sans: 'Nunito', sans-serif;
    --radius: 0.5rem;
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    --transition: all 0.2s ease-in-out;
    --rz-datepicker-calendar-selected-background-color: #0045948e !important;
    --rz-datepicker-calendar-selected-color: #ffffff !important;
    --rz-datepicker-calendar-selected-hover-background-color: #9cbefa !important;
    --rz-datepicker-calendar-selected-hover-color: #1e40af !important;
    --rz-grid-header-cell-padding: 0.5rem 1rem !important;
    font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    --rz-border-focus: var(--rz-border-width) solid #1e40af;
    --color-success: #1e40af !important;
    --color-success-border: #1e40af !important;
    --color-success-focus: #1e40af !important;
    --color-success-focus-border: #1e40af !important;
    --color-success-focus-background-color: #1e40af !important;
    --color-success-focus-color: #ffffff !important;
    --color-success-focus-box-shadow: 0 0 0 .25rem rgba(60, 108, 153, 0);
    --color-success-focus-text-decoration: none;
    --color-success-focus-font-size: 12px;
}

.rz-data-grid .rz-grid-table .rz-data-row:hover {
    background-color: rgba(0, 0, 0, 0.075) !important; /* Light yellow */
    color: #1f2937 !important; /* Dark gray text */
    height: 1em;

}
.rz-dialog{
    font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

 .rz-data-row:hover td {
    background-color: rgba(0, 0, 0, 0.075) !important;
    color: #1f2937 !important;
}

/* Prevent text clipping in column headers */
.rz-data-grid .rz-header-cell,
.rz-data-grid .rz-column-title,
.rz-data-grid .rz-column-title-content {
    white-space: normal !important; /* allow wrapping */
    padding: 5px 10px !important;
    font-size: 14px !important;
}
.rz-grid-table{
    height: 25%!important;
}
.rz-data-grid {
    width: 100% !important;
    max-width: none !important;
}
.content[b-ujzv1cr9ya]{

  max-width: 2000px !important;
  min-width: 800px !important;
  
  width: 100% !important;
  border-radius: 0.5rem !important;

}
.rz-datatable-thead th > div:not(.rz-cell-filter), .rz-grid-table thead th > div:not(.rz-cell-filter){
    display: flex
;
    justify-content: flex-start;
    align-items: center;
    width: 15em;
    text-align: center;
    outline: none;
    height: 10px;
    padding: var(--rz-grid-header-cell-padding);
    font-size: 14px;

}
.rz-data-row  {
    background-color: #f9fafb;
    color: #1f2937;
    padding: 0.15rem 1rem !important;
}
.rz-datatable-thead th:not(:last-child), .rz-grid-table thead th:not(:last-child) {
    border-right: var(--rz-grid-header-cell-border);
    background: #f9fafb;
}
.rz-data-grid .rz-grid-table {
    table-layout: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 8em !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 8px 6px rgba(0, 0, 0, 0.50) !important;
    border: 1px solid #e5e7eb !important;
    transition: all 0.2s ease-in-out !important;
    background-color: #F9FAFB !important;
}
.rz-data-grid-data  {
  height: fit-content;
}

.rz-data-grid .rz-grid-table .rz-data-row {
    background-color: #ffffff !important;
}

.rz-data-grid .rz-grid-table .rz-data-row:hover {
    background-color: rgba(0, 0, 0, 0.075) !important;
    color: #1f2937 !important;
}

.rz-data-grid .rz-grid-table td,
.rz-data-grid .rz-grid-table th {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.rz-data-grid .rz-grid-table thead th {
    background-color: #f9fafb !important;
    font-weight: 600 !important;
    color: #374151 !important;
    border-bottom: 2px solid #e5e7eb !important;
}

.rz-data-grid .rz-column-title-content {
    white-space: normal !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
body {
    font-family: "Nunito", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background-color: var(--color-light);
    color: var(--color-dark);
    margin: 0;
    padding: 0;
}
.header-title {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 1px;
}

h1, h2, h3, h4 {
    font-weight: 600;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}



/* ==========================================================================
   Layout
   ========================================================================== */
.page-container {
    display: flex;
    min-height: 100vh;

    overflow-x: hidden;

}

.sidebar {
    width: 250px;
    height: auto;
    position: sticky;
    top: 0;
    background-color: #f1f5f9;
    flex-shrink: 0;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
}

.main-content {
    margin-left: 250px;
    padding: 2rem;
    flex: 1;
    background: #F9FAFB;

}

.header {
    width: 100%;
    background: #f8fafc;
    color: #1f2937;
    padding: 24px 0 16px 32px;

    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);

    position: sticky;
    top: 0;
    z-index: 1000;
}
.footer {
    width: 100%;
    background: #f8fafc;
    color: #1f2937;
    padding: 24px 0 16px 32px;
    text-align: center;
    position: fixed;
    bottom: -80px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);




}

/* ==========================================================================
   Buttons
   ========================================================================== */
.button {
    background-color: var(--color-primary);
    color: white;
    padding: 3px;
    font-size: 15px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
}

    .button:hover {
        background-color: #1f2937;
        box-shadow: var(--shadow);
    }

.button-danger {
    background-color: var(--color-danger);
}

/* Force Material “success” buttons to use your danger color */
.rz-button.rz-variant-filled.rz-success {
    /* use your existing --color-danger from :root */
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: white !important;
}



/* ==========================================================================
   Tables
   ========================================================================== */
.table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

    .table th, .table td {
        padding: 6px;
        text-align: center;
        align-content: center;
        border-bottom: 1px solid #e5e7eb;
    }

    .table th {
        background: #f9fafb;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 1px solid ;
        border-color: #f8fafc00 !important;
    }


.table-hover tbody tr:hover {
    background-color: rgb(255 255 255);
}

/* Ensure dropdowns in table rows are not clipped */
.table tbody tr {
    background-color: rgb(255 255 255);
    margin-top: 1em;
}
.table tr {
    background-color: rgb(255 255 255);
    margin-top: 1em;

}

.table .dropdown-menu {
    z-index: 1050 !important;
    position: absolute !important;
}
.dropdown-menu {
    background-color: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.25rem;
}

/* ==========================================================================
   Forms
   ========================================================================== */
input[type="text"],
input[type="date"],
input[type="file"],
select,
textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #D1D5DB;
    border-radius: var(--radius);
    font-size: 1rem;
  
}

    input:focus,
    textarea:focus,
    select:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px rgba(47, 128, 237, 0.3);
    }

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-4 {
    margin-top: 1rem;
}



.status-active {
    color: var(--color-success);
    font-weight: 600;
}

.status-expired {
    color: var(--color-danger);
    font-weight: 600;
}

.badge {
    background: var(--color-secondary);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.75rem;
}
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


.sidebar-wrapper {
    width: 250px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    color: white;
    display: flex;
    flex-direction: column;
  
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.sidebar-header {
    display: flex;
    flex-direction: column;
    column-count: 2;
    align-items: center;
    margin-bottom: 1.5rem;
    height: 4.5rem;
    background-color: rgb(44 97 184 / 90%);
}

.sidebar-logo {
    width: 124px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 0.5rem;
}

.app-title {
    font-size: 1.15rem; /* Increased from 1rem */
    font-weight: 800; /* Bolder text */
    color: white;
    text-align: center;
    letter-spacing: 0.5px;
}

.nav-scrollable {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.25rem;
}



.nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-left: 1rem;
}

.nav-link {
    display: flex
    ;
        align-items: center;
        gap: 0.25rem;
        padding: 0.65rem 1rem;
        font-size: 0.95rem;
        font-weight: 500;
        border-left: 0.5px solid #484849;
        color: #484849;
        text-decoration: none;
        background-color: transparent;
        transition: background 0.2s ease;
}

    .nav-link:hover {
        background-color: #f4f6f9 !important;
        cursor: pointer;
        color: #374151;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        /* transform: translateX(6px);  */
        margin-right: 0.5rem;
        border-radius: 8px;
       border-style: none;
        display: block;
        padding: 0.5rem;
    }

    .nav-link svg,
    .nav-link i {
        transition: transform 0.2s ease, color 0.2s ease;
    }

    .nav-link:hover svg,
    .nav-link:hover i {
        transform: scale(1.05);
        
    }


.no-data {
    width: 100%;
    height: 10em;
    text-align: center;
    color: #2067da6c;
    font-size: 2em;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    display: flex
;
    padding: 20px;
    background-color: #f8fafc;
    margin-top: 1em;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
    .nav-link:hover {
        background-color: rgba(255,255,255,0.25);
        cursor: pointer;
        color: #374151;
        text-decoration: none;
    }

    .nav-link.active {
        background-color: #f4f6f9 !important;
        cursor: pointer;
        color: #374151;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        /* transform: translateX(6px);  */
        margin-right: 0.5rem;
        border-radius: 8px;
       border-style: none;
        display: block;
        padding: 0.5rem;
    }
    .btn-primary:active:focus{
   
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);

    }
    .btn-check:focus+.btn-primary, .btn-primary:focus {
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
      
    }

    .nav-link i {
        font-size: 1rem;
        opacity: 0.85;
    }

.contract-form-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.span-2 {
    grid-column: span 2;
}

.form-section {
    grid-column: span 2;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #ffffff;
}

    .form-section legend {
        font-weight: 600;
        font-size: 1rem;
        margin-bottom: 0.75rem;
        color:rgba(44, 97, 184, 1) !important;
        text-align: center;
        border-bottom: 1px solid #E5E7EB;
        padding-bottom: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        margin-bottom: 1rem;
    }


.sidebar-divider {
    border: none;
    height: 1px;
    background-color: white;
    margin: 0.75rem 0 1rem 0;
    width: 80%;
    align-self: center;
}

.admin-section {
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 0.75rem;
}

.admin-toggle {
    width: 100%;
    background: transparent;
    border: none;
    color: #484849;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    transition: background 0.2s ease-in-out;
}

    .admin-toggle:hover {
        background-color: rgba(255, 255, 255, 0.08);
    }

.admin-submenu {
    margin-top: 0.25rem;
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    border-left: 2px solid rgba(255, 255, 255, 0.15);
    padding-left: 1rem;
}

    .admin-submenu .nav-link {
        padding: 0.45rem 1rem;
        font-size: 0.88rem;

        transition: background 0.2s ease-in-out;
    }

        .admin-submenu .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

.admin-toggle.sub {
    font-weight: 500;
    font-size: 0.9rem;
    color: #484849;;

}

.admin-submenu.nested {
    padding-left: 1.5rem;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    margin-top: 0.3rem;
}

/* Overlay background */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
}

/* Modal container wrapper */
.modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    max-width: 500px;
    width: 100%;
    padding: 1rem;
}


/* Custom animated fade-in */
.animated-modal {
    animation: slideFadeIn 0.35s ease-out;
}

@keyframes slideFadeIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -60%);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Modal style */
.styled-modal {
    background: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.modal-header, .modal-footer {
    padding: 10px;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.modal-body {
    padding: 0 1.25rem 1rem 1.25rem;
}
.dropdown-item-update {
    cursor: pointer;
    background-color: #eef7ff9f;
    color: rgb(0, 65, 139);
    border-radius: 5px;
    font-size: 12px;
    border-bottom: 1px solid #e5e7eb;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    margin-bottom: 0.25rem;
}
.dropdown-item-delete {
    cursor: pointer;
    background-color: #d655553a;
    color: rgb(175, 0, 0);
    border-radius: 5px;
    font-size: 12px;
    border-bottom: 1px solid #e5e7eb;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;

 
    
}
.dropdown-item-update:hover {
    background-color: rgb(0, 65, 139);
    color: rgb(250, 252, 255);
    text-decoration: none;  
}   
.dropdown-item-delete:hover {
    background-color: #af1414ce;
    color: rgb(255, 255, 255);
    text-decoration: none;
}


.form-business-type {
    margin-top: 1.5rem;
}

.radio-options-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem 1.25rem;
    margin-top: 0.5rem;
}

.radio-group {
    display: contents; /* allow grid layout to manage spacing */
}

.form-radio-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

    .form-radio-option label {
        margin: 0;
        font-size: 0.95rem;
        color: #374151;
    }
.form-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.yag-logo {
    width: 180px;
    max-width: 90%;
    margin-bottom: 1rem;
    object-fit: contain;
}

.form-title {
    font-size: 2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: linear-gradient(90deg, #147cbb, #0f4f8a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    position: relative;
    margin-bottom: 0.5rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.15);
}


.signature {
    font-family: 'Segoe Script', 'Comic Sans MS', cursive, sans-serif;
    font-size: 24px;
    color: #000;
}



.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #ccc;
    border-top: 6px solid #258cfb;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    margin-top: 20px;
    font-size: 1.2rem;
    color: #333;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.card {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    width: 100%;
}
.Calendar {
    background-color: #f4f6f9;
    height: calc(100vh - 200px); /* Subtract header/navigation height */
    min-height: 650px;
    max-height: 90vh;
    margin: 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.rz-button.rz-secondary.rz-shade-default{
    background-color: rgba(44, 97, 184, 1) !important;
    color: white !important;
    font-size: 0.75rem !important;
}
.rz-button.rz-primary.rz-shade-default:hover{
    background-color: rgba(37, 99, 235, 1) !important;
    color: white !important;
}
.btn-primary .btn-success .btn-secondary {
    cursor: pointer;
    background-color: rgba(44, 97, 184, 1);
    color: white;
    border: 1px solid #bdd3f8 !important;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    font-size: 12px;
    border-bottom: 1px solid #e5e7eb;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    margin-bottom: 0.25rem;
    text-decoration: none;
}   
.btn-primary:hover .btn-success:hover .btn-secondary:hover {
    background-color: rgba(37, 99, 235, 1) !important;
    color: white !important;
    border-radius: 0.25rem !important;
    font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    font-weight: 100 !important;
    font-size: 0.75rem !important;
}  
 .rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active {
    background-color: rgba(37, 99, 235, 1) !important;
    color: white !important;
}
.rz-button.rz-primary.rz-shade-default{
    background-color: rgba(44, 97, 184, 1) !important;
    color: white !important;
}
.rz-button.rz-secondary.rz-shade-default:hover{
    background-color: rgba(37, 99, 235, 1) !important;
    color: white !important;
}
.btn-danger {
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.rz-button-danger {
    background-color: #dc3545 !important; /* Bootstrap red */
    border-color: #dc3545 !important;
}

.btn-danger:hover {
    background-color: #c82333;
}      
    .card .form-label {
        font-weight: 600;
        font-size: 0.95rem;
        color: #374151;
    }



/* Document Page Styling */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f6f9;
}

h3 {
    margin: 30px 20px 10px;
    font-size: 2rem;
    font-weight: 600;
    color: #1f2937;
}

.search-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 20px 20px;
    max-width: 600px;
}

    .search-container input {
        flex: 1;
        padding: 8px 14px;
        border-radius: 8px;
        border: 1px solid #ccc;
        font-size: 0.95rem;
    }

    .search-container button {
        padding: 8px 16px;
        background-color: rgba(44, 97, 184, 1);

        color: white;
        border: none;
        border-radius: 8px;
        font-size: 0.95rem;
        transition: background-color 0.2s ease;
    }

        .search-container button:hover {
            background-color: #1e40af;
        }
.container {    max-width: 100%;
    padding: 20px;
    background-color: #f8fafc;
    margin-top: 5px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.breadcrumbs{
    font-weight: 600;
    color: #1f2937;
    background-color: #f8fafc;
    padding: 0.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin-top: 1em;
    margin-bottom: 10px;
}

.btn-actions {
    background-color: rgba(44, 97, 184, 1);
    color: white;
    border-color: #9cbefa;
    border-style: solid;
    border-width: 1px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 12px;
}
.btn-success{
cursor: pointer;
background-color: rgba(44, 97, 184, 1);
color: white;
border: 1px solid #bdd3f8 !important;
border-style: solid;
border-width: 1px;
border-radius: 5px;
font-size: 12px;
border-bottom: 1px solid #e5e7eb;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e5e7eb;
margin-bottom: 0.25rem;
text-decoration: none;
}
.btn-secondary{
    cursor: pointer;
    background-color: #eef7ff9f;
    color: rgb(0, 65, 139);
    border-radius: 5px;
    font-size: 12px;
    border-bottom: 1px solid #e5e7eb;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    margin-bottom: 0.25rem;
}
.btn-success:hover {
    background-color: rgba(37, 99, 235, 1) !important;

    color: white;
} 
.btn-check:focus+.btn-success, .btn-success:focus {
    background-color: rgba(44, 97, 184, 1) !important;
    border-color: rgba(44, 97, 184, 1) !important;
    color: white;
    border-radius: 5px;
    font-size: 12px;
    border-bottom: 1px solid #e5e7eb;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    margin-bottom: 0.25rem;
    text-decoration: none;
    box-shadow: none !important;
}
.validation-message{
    color: #dc3545 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
   
}
 
.btn-secondary:hover {
    background-color: #E5E7EB;
    color: #1f2937
}
.btn-actions:hover {
    background-color: rgba(37, 99, 235, 1);
    color: white;
}

.back-button {
    background: none;
    border: none;
    font-size: 0.9rem;
    color: #2563eb;
    cursor: pointer;
    margin: 0 20px 10px;
    padding: 0;
}

 
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    padding: 5px;
}

.grid-item {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px 12px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

    .grid-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
    }

    .grid-item i {
        font-size: 32px;
        color: #3b82f6;
        margin-bottom: 8px;
    }

    .grid-item a {
        color: #3b82f6 !important;
        background-color: #eef7ff9f;
        border-radius: 8px;
        padding: 0.5rem;
        border: 1px solid #e5e7eb;
        font-weight: 500;
        font-size: 0.75rem;
        text-decoration: none;
        display: block;
        word-break: break-word;
    }


.file-path {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 4px;
    display: none !important;
}

.document-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 20px;
    align-items: flex-end;
}

.toolbar-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: nowrap;
}

.toolbar-input {
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    border: 1px solid #D1D5DB;
    border-radius: var(--radius);
    background-color: #fff;
    color: #111827;
    min-width: 340px;
    height: 35px;
    transition: var(--transition);
    box-shadow: var(--shadow);
}

    .toolbar-input:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px rgba(47, 128, 237, 0.2);
    }
.calendar-button-container {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    justify-content: flex-end;
}

.btn-primary {
   background-color: rgba(44, 97, 184, 1);

    color: white !important;
    border: 1px solid #bdd3f8 !important;
    padding: 0.25em;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    font-size: 12px;
}

.btn-primary:hover {
    background-color: rgba(37, 99, 235, 1);
    color: #ffffff !important;
    border-color: #004494 !important;
}

.rz-button.rz-button-primary {
   background-color: rgba(44, 97, 184, 1);

    color: white !important;
    border: 1px solid #bdd3f8 !important;
    padding: 0.1rem 0.25rem !important;
    width: 8em !important;
    font-size: 0.85rem !important;
    font-weight: 100 !important;
    font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}
.rz-scheduler-nav-views .rz-button.rz-primary{
    background-color: rgba(44, 97, 184, 1) !important;
    color: white !important;
    border: 1px solid #bdd3f8 !important;
    padding: 0.1rem 0.25rem !important;
    width: 8em !important;
    font-size: 0.75rem !important;
    font-weight: 100 !important;
    font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}
.rz-button.rz-button-primary:hover {
    background-color: rgba(37, 99, 235, 1);
    color: #ffffff !important;
}

.upload-button i {
    margin-right: 0.5rem;
}


.dashboard-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 30px 20px 10px;
    color: #6B7280;
}

.dashboard-group {
    margin: 2rem 20px;
}
.dashboard-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    align-self: center;
    justify-content: center;
    text-align: center;
  border-bottom: 1px solid #e5e7eb;
    padding: 1rem;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

    .dashboard-group h4 {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: #374151;
    }

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.stat-card {
    background-color: white;
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    box-shadow: var(--shadow);
    border: 1px solid #e5e7eb;
    transition: transform 0.2s ease;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
  
    width: 100%;
}

    .stat-card:hover {
        transform: translateY(-4px);
    }

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin-right: 1rem;
    margin-bottom: 1rem;
 
    margin-left: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.397);
}

.stat-info h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #6B7280;
    font-weight: 600;
}
.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e40af;
    margin: 0.2rem 0 0;
}

.stat-info p {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin: 0.2rem 0 0;
}

.bg-blue {
    background-color: #3b82f6;
}

.bg-green {
    background-color: #10b981;
}

.bg-yellow {
    background-color: #f59e0b;
}

.bg-purple {
    background-color: #8b5cf6;
}

.bg-red {
    background-color: #ef4444;
}



/* Enhanced Comments Modal Styling */
/* Comments Modal Color Enhancements */
.comments-modal {
    background-color: #f8fafc;
}

    .comments-modal .modal-header {
        background-color: #e0ecff;
        border-bottom: 1px solid #cbd5e1;
    }

    .comments-modal .modal-title {
        font-size: 1.15rem;
        font-weight: 700;
        color: #1e3a8a;
    }

    .comments-modal .modal-body {
        background-color: #ffffff;
    }

    .comments-modal .comment-entry {
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
    }

.comment-avatar {
    width: 40px;
    height: 40px;
    background-color: var(--color-primary);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.comment-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #111827;
}

.comment-body {
    font-size: 0.95rem;
    color: #374151;
    line-height: 1.4;
}

.comments-modal .add-comment {
    background-color: #f1f5f9;
    border-top: 1px solid #e2e8f0;
}

    .comments-modal .add-comment textarea {
        background-color: #fff;
        border-color: #cbd5e1;
    }
/* Comment card styling */
.comment-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s ease;
}

    .comment-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

/* Avatar */
.comment-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* Avatar colors based on team */
.avatar-legal {
    background-color: #1E3A8A;
}

.avatar-accounts-receivable {
    background-color: #10B981;
}

.avatar-wholesale {
    background-color: #F59E0B;
}

.avatar-GM {
    background-color: #0bf5d2;
}

.avatar-Executive {
    background-color: #f50b0b;
}

.avatar-Development {
    background-color: #32f50b;
}

.avatar-default {
    background-color: #6B7280;
}

/* Override RadzenScheduler active view button color */
.rz-scheduler .rz-button.rz-state-active,
.rz-scheduler .rz-button.rz-button-primary {
    background-color: rgb(62, 117, 238);
    color: white !important;
    padding: 0.1rem 0.25rem !important;
    width: 8em !important;
    font-size: 0.75rem !important;
    font-weight: 100 !important;
    font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
 
}
.rz-view-header{
    background-color: rgb(44 97 184 / 90%) !important;
    font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    padding: 0.25rem 0.25rem !important;
    box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.336) !important;
    color: #ffffff !important;
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
}

.rz-view-content{
    background-color: #fcfdff !important;
    font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    font-size: 0.9rem !important;
    font-weight: 100 !important;
    padding: 0.25rem 0.25rem !important;
    box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.041) !important;
}
.rz-today{
    display: none !important;
}
.rz-scheduler-nav-views{
   
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
   
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.25rem !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}
.rz-scheduler-nav-title{
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    padding: 0.25rem 0.25rem !important;
}
.rz-scheduler-nav-prev-next{
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    width: 100% !important;
    height: auto !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;

}
.back-button{
    background-color: rgb(62, 117, 238);
    color: white !important;
    padding: 0.1rem 0.25rem !important;
    width: 4em !important;
    font-size: 0.75rem !important;
    font-weight: 100 !important;
    font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    border-radius: 0.25rem !important;
    box-shadow: 0 4px 8px -2px rgba(0,0,0,0.15) !important;
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
    text-decoration: none !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    
}
.back-button:hover{
    background-color: rgba(37, 99, 235, 1) !important;
    color: white !important;
}

/* .rz-button:hover {
    background-color: #2563EB !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
    box-shadow: 0 4px 8px -2px rgba(0,0,0,0.15) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.25rem !important;
} */
.rz-button.rz-next, .rz-button.rz-prev{
    background-color: #f5f5f5 !important;
    color: rgb(0, 0, 0) !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 8px -2px rgba(0,0,0,0.15) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.25rem !important; 
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
}
.rz-datepicker-trigger {
    color:  rgba(44, 97, 184, 1) !important;
    font-weight: 100 !important;  
    font-size: 1rem !important;  
}
.rz-datepicker-trigger:hover{
    color: #0045948e !important;
    font-weight: 100 !important;
}
.rz-spinner-button {
    color:  rgba(44, 97, 184, 1) !important;
    font-weight: 100 !important; 
    color: white !important;
}
.rz-spinner-button:hover{
    background-color: #004494 !important;
    color: #ffffff !important;
}
.rz-dropdown-trigger-icon{
    color: #0045948e !important;
}
.rz-dropdown-trigger-icon:hover{
    color: #004494 !important;
}
/* Team badge */
.team-badge {
    display: inline-block;
    font-size: 0.8rem;
    color: #6B7280;
    background-color: #f3f4f6;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    margin-top: 0.25rem;
    font-weight: 500;
}

/* Other elements */
.comment-name {
    font-size: 1rem;
    color: #111827;
}

.comment-time {
    font-size: 0.85rem;
}

.comment-body {
    font-size: 0.95rem;
    color: #374151;
    line-height: 1.5;
}

/* Add styles for the calendar button container */
.calendar-button-container {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    justify-content: center !important;
    align-items: center !important;
    align-content: center !important;
    width: 100% !important;
    height: auto !important;
    font-size: 0.9rem !important;
}

.rz-datepicker-calendar .rz-datepicker-calendar-selected {
    background-color: var(--rz-datepicker-calendar-selected-background-color) !important;
    color: var(--rz-datepicker-calendar-selected-color) !important;
    border-radius: 0.25rem !important;
    font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    font-weight: 100 !important;
}
/* Make the calendar container responsive */
@media (max-height: 800px) {
    .Calendar {
        height: calc(100vh - 150px);
        min-height: 650px;
    }
}

@media (max-height: 600px) {
    .Calendar {
        height: calc(100vh - 100px);
        min-height: 550px;
    }
}

.rz-scheduler-toolbar .rz-button:has(span.rz-button-text:contains("Today")) {
    display: none !important;
}

.rz-grid-table {
    height: auto !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

.rz-data-grid .rz-grid-table td,
.rz-data-grid .rz-grid-table th {
    padding: 0.5rem 0.75rem !important;
    line-height: 1.2 !important;
}

.rz-data-grid .rz-column-title-content {
    white-space: normal !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
}

.rz-data-grid .rz-grid-table .rz-data-row:hover {
    background-color: rgba(0, 0, 0, 0.075) !important;
    color: #1f2937 !important;
    padding: 0.5rem 0.75rem !important;
}

.approver-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color:  rgba(44, 97, 184, 1) !important;
    border-bottom: 1px solid #E5E7EB !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
    text-align: center !important;
}

.approver-header svg {
    width: 20px !important;
    height: 20px !important;
    color: #0045948e !important;
}

.approver-header { 

    display: flex !important; 

    align-items: center !important; 

    justify-content: center !important; 

    gap: 0.5rem !important; 

    font-size: 1.1rem !important; 

    font-weight: 600 !important; 

    color:  rgba(44, 97, 184, 1) !important; 

    border-bottom: 1px solid #E5E7EB !important; 

    padding-bottom: 0.5rem !important; 

    margin-bottom: 1rem !important; 

    width: 100% !important; 

    text-align: center !important; 

} 

 

.approver-header svg { 

    width: 20px !important; 

    height: 20px !important; 

    color: #0045948e !important; 

} 

article{ 


 
    margin: 1em; 
 

 
 
     
 
 } 

/* form styling */ 


.title { 

    background-color: #147cbb; 

    border-top-right-radius: 0.5em; 

    border-top-left-radius: 0.5em; 

    font-size: 1rem; 

    color: #ffffff; 

    text-transform: uppercase; 

    letter-spacing: 0.05em; 

    border-bottom: 1px solid #6b728046; 

    text-align: center; 

    font-weight: bolder; 

    margin-bottom: 1px; 

    margin-top: 5px; 

} 

.trade-title{ 

  

    font-size: .8rem; 

    color: #1E3A8A; 

    text-transform: uppercase; 

    letter-spacing: 0.05em; 

    border-bottom: 1px solid #6b728046; 

    text-align: center; 

    font-weight: bold; 

    margin-bottom: 5px; 

    margin-top: 5px; 

} 
.description{
    font-size: 10px;
    color: red;
}
.group{
    background: #f9fafb; 
    border: 1px solid #6b728046; 
    padding: 1em;
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    justify-items: center;
}
.label-title { 
    background: #dee7f6;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    font-size: .8rem;
    color: #065e93;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid #6b728046;
    text-align: center;
    font-weight: bolder;
    margin-top: 0.5em;
    margin-bottom: 0.10em;
} 
.radio-title{
    font-size: .8rem;
    color: #065e93;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #6b728046;
    text-align: center;
    font-weight: bolder;

    margin-bottom: 0.5em    
}
 
.form-control-credit{

    background-color: #e7f3ff9f;
    border-radius: 0.5em;
    border: 1px solid #6b728046;
    padding: 0.15em;
    font-size: 15px;
    width: 100%;
}
.columns-radio { 

    display: grid; 

    grid-template-columns: repeat(2, 1fr); /* Two equal columns */ 

background-color: #e7f3ff9f;
border-radius: 0.5em;
border: 1px solid #6b728046;
padding: 1em;
font-size: 15px;
width: 100%;

} 
  

.container-columns { 

    display: grid; 

    grid-template-columns: repeat(2, 1fr); /* Two equal columns */ 

   width: 100%;

} 

 

.container-columns > *:nth-last-child(1):nth-child(odd) { 

    grid-column: span 2; /* Span the full row if it's the last and odd */ 

} 

    .container-form{ 

        padding: 5px;
        border-radius: 0.10em;
        text-align: center;
        width: 100%
       
 

    } 

    .container-form-title{ 

        background: #f9fafb; 

        font-size: .8rem; 

        color: #1e40af; 

        text-transform: uppercase; 

        letter-spacing: 0.05em; 

        border-bottom: 1px solid #6b728046; 

        text-align: center; 

        font-weight: bolder; 

    

         

    

    } 

  .g-recaptcha{ 

        text-align: center; 

        justify-items: center; 

        margin: 1em; 

    } 

    .rc-anchor-error-msg-container { 

        text-align: center; 

    } 

    .cancel-wrapper { 

        text-align: right; 
 width: 100%;
    } 

    .cancel { 

        background-color: rgba(255, 0, 0, 0.082);
    border: none;
    padding-top: 0.10px;
    padding-bottom: 0.10px;
    cursor: pointer;
    color: red;
    font-weight: bold;
    border-radius: .5em;

    } 

    .cancel:hover { 

        background-color: rgba(255, 39, 39, 0.668);
        border: none;
        padding-top: 0.10px;
        cursor: pointer;
        color: rgb(255, 255, 255);
        font-weight: bold;
        border-radius: .5em;

    } 

    .add-owner-wrapper { 

        text-align: right; 

    } 

    .add-owner { 

        background: linear-gradient(to bottom, #00a78e, #018f76); 

        border: none; 

        padding: 4px; 

        font-size: 12px; 

        font-weight: 600; 

        color: #fff; 

        border-radius: 0.4em; 

        margin: 6px; 

        cursor: pointer; 

        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2); 

        position: relative; 

        overflow: hidden; 

        transition: all 0.2s ease-in-out; 

    } 

     

    .add-owner::after { 

        content: ''; 

        position: absolute; 

        top: 0; 

        left: -100%; 

        width: 60%; 

        height: 100%; 

        background: rgba(255, 255, 255, 0.2); 

        transform: skewX(-25deg); 

        transition: left 0.5s ease; 

        pointer-events: none; 

    } 

     

    .add-owner:hover { 

        transform: scale(1.03); 

        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); 

    } 

     

    .add-owner:hover::after { 

        left: 130%; 

    } 

     

     

    .radiobuttons{ 

        justify-items: start; 

        display: grid; 

        grid-template-columns: repeat(2, 1fr); /* Two equal columns */ 

        gap: 1rem; /* Optional: spacing between items */ 

    } 
    .alert{
        margin-bottom:.10px;
    }
    .alert-info {
        color: #055160;
        background-color: #147cbb1f;
        border-top-right-radius: .5em;
        border-top-left-radius: .5em;
    }