html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.checkbox-wrapper input[type="checkbox"] {
    display: none;
}

.checkbox-wrapper label {
    position: relative;
    padding-left: 24px;
    cursor: pointer;
}

.checkbox-wrapper label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #666;
    border-radius: 2px;
    background: #fff;
}

.checkbox-wrapper input[type="checkbox"]:checked + label::before {
    background: #0078d4;
}

.validation-message {
    color: red !important;
    font-size: 13px;
    margin-top: 4px;
}

.e-btn, .e-css.e-btn {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* Text fields */
.text-field {
    margin-bottom: 16px;
}

.text-field label {
    display: block;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #323130;
}

.text-field input {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #a19f9d;
    border-radius: 2px;
    outline: none;
    transition: border-color 0.2s;
}

.text-field input:focus {
    border-color: #0078d4;
    box-shadow: 0 0 0 1px #0078d4;
}

/* Primary button */
.btn-w-100{
    width: 100%;
}
.btn-w-50{
    width: 50%;
}
.btn-w-30{
    width: 30%;
}
.btn-w-20{
    width: 20%;
}
.btn-w-10{
    width: 10%;
}
.btn-primary {
    /*width: 100%;*/
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background-color: #0078d4;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background-color: #106ebe;
}

.btn-primary:active {
    background-color: #005a9e;
}


.label-input-form{
    font-size: 14px !important;
}
.e-btn.e-primary, .e-css.e-btn.e-primary{
    font-family: 'Roboto', sans-serif !important;
}
.e-ddl.e-input-group .e-input-value, .e-ddl.e-input-group .e-input-value:focus {
    margin: 5px;
    font-family: 'Roboto', sans-serif !important;
}
span label.e-label-top{
    color: #003049 !important;
    font-size: 17px !important;
}
input.e-input, .e-input-group input, .e-input-group.e-control-wrapper input, .e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input{
    font-family: 'Roboto', sans-serif !important;
}

label{
    font-family: 'Roboto', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px;
    line-height: 30px !important;
}

/* ==================== DARK THEME STYLES ==================== */

/* Dark theme body */
body.dark-theme {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

/* Dark theme cards and containers */
body.dark-theme .card,
body.dark-theme .card-single {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #404040;
}

body.dark-theme .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.6);
}

/* Dark theme text fields */
body.dark-theme .text-field label {
    color: #e0e0e0;
}

body.dark-theme .text-field input,
body.dark-theme input.e-input,
body.dark-theme .e-input-group input {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #404040;
}

body.dark-theme .text-field input:focus {
    border-color: #4a9eff;
    box-shadow: 0 0 0 1px #4a9eff;
}

/* Dark theme buttons */
body.dark-theme .btn-primary {
    background-color: #4a9eff;
    color: #ffffff;
}

body.dark-theme .btn-primary:hover {
    background-color: #357abd;
}

body.dark-theme .btn-primary:active {
    background-color: #2563a8;
}

/* Dark theme for Syncfusion components */
body.dark-theme .e-input-group,
body.dark-theme .e-control-wrapper {
    background-color: #2d2d2d;
}

body.dark-theme .e-input-group.e-control-wrapper input,
body.dark-theme .e-ddl.e-input-group .e-input-value {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #404040;
}

body.dark-theme span label.e-label-top {
    color: #e0e0e0 !important;
}

/* Dark theme tables */
body.dark-theme table {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

body.dark-theme table th {
    background-color: #1f2937;
    color: #e0e0e0;
}

body.dark-theme table td {
    border-color: #404040;
}

body.dark-theme table tr:hover {
    background-color: #404040;
}

/* Dark theme forms */
body.dark-theme form {
    background-color: #2d2d2d;
}

body.dark-theme .form-control {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #404040;
}

body.dark-theme .form-control:focus {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #4a9eff;
    box-shadow: 0 0 0 0.2rem rgba(74, 158, 255, 0.25);
}

/* Dark theme modals and dialogs */
body.dark-theme .modal-content,
body.dark-theme .e-dialog {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #404040;
}

body.dark-theme .modal-header,
body.dark-theme .e-dialog .e-dlg-header {
    background-color: #1f2937;
    border-bottom-color: #404040;
    color: #e0e0e0;
}

body.dark-theme .modal-footer,
body.dark-theme .e-dialog .e-footer-content {
    background-color: #1f2937;
    border-top-color: #404040;
}

/* Dark theme checkboxes */
body.dark-theme .checkbox-wrapper label::before {
    background: #2d2d2d;
    border-color: #666;
}

/* Dark theme links */
body.dark-theme a {
    color: #4a9eff;
}

body.dark-theme a:hover {
    color: #6bb3ff;
}

/* Dark theme for validation messages */
body.dark-theme .validation-message {
    color: #ff6b6b;
}

/* Dark theme for alerts */
body.dark-theme .alert {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #e0e0e0;
}

body.dark-theme .alert-danger {
    background-color: #5c2b2b;
    border-color: #872d2d;
    color: #ffb4b4;
}

body.dark-theme .alert-success {
    background-color: #2b5c2b;
    border-color: #2d872d;
    color: #b4ffb4;
}

body.dark-theme .alert-info {
    background-color: #2b4a5c;
    border-color: #2d6b87;
    color: #b4e4ff;
}

body.dark-theme .alert-warning {
    background-color: #5c532b;
    border-color: #877d2d;
    color: #fff4b4;
}

/* Dark theme for dropdowns */
body.dark-theme .dropdown-menu,
body.dark-theme .e-dropdownbase {
    background-color: #2d2d2d;
    border-color: #404040;
}

body.dark-theme .dropdown-item,
body.dark-theme .e-list-item {
    color: #e0e0e0;
}

body.dark-theme .dropdown-item:hover,
body.dark-theme .e-list-item:hover {
    background-color: #404040;
    color: #ffffff;
}

/* Dark theme for pagination */
body.dark-theme .pagination .page-link {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #e0e0e0;
}

body.dark-theme .pagination .page-link:hover {
    background-color: #404040;
    border-color: #4a9eff;
    color: #ffffff;
}

body.dark-theme .pagination .page-item.active .page-link {
    background-color: #4a9eff;
    border-color: #4a9eff;
}

/* Dark theme for navigation */
body.dark-theme .sidebar {
    background-color: #1f2937;
}

body.dark-theme .sidebar .nav-links li a {
    color: #e0e0e0;
}

body.dark-theme .sidebar .nav-links li a:hover {
    background-color: #374151;
}

/* Dark theme for badges */
body.dark-theme .badge {
    background-color: #404040;
    color: #e0e0e0;
}

body.dark-theme .badge-primary {
    background-color: #4a9eff;
}

body.dark-theme .badge-success {
    background-color: #48bb78;
}

body.dark-theme .badge-danger {
    background-color: #f56565;
}

body.dark-theme .badge-warning {
    background-color: #ed8936;
}

body.dark-theme .badge-info {
    background-color: #4299e1;
}

/* Dark theme for sidebar */
body.dark-theme .sidebar {
    background-color: #1f2937;
}

body.dark-theme .sidebar .logo-details i {
    color: #ffffff;
}

body.dark-theme .sidebar .logo-details .logo_name {
    color: #ffffff;
}

body.dark-theme .sidebar .nav-links li {
    color: #e0e0e0;
}

body.dark-theme .sidebar .nav-links li:hover {
    background-color: #374151;
}

body.dark-theme .sidebar .nav-links li i {
    color: #ffffff;
}

body.dark-theme .sidebar .nav-links li a .link_name {
    color: #e0e0e0;
}

body.dark-theme .sidebar .nav-links li .sub-menu {
    background-color: #374151;
}

body.dark-theme .sidebar .nav-links li .sub-menu a {
    color: #e0e0e0;
}

body.dark-theme .sidebar .nav-links li .sub-menu p {
    color: #e0e0e0;
}

body.dark-theme .sidebar .profile-details {
    background-color: #374151;
}

body.dark-theme .link_name-tag {
    color: #e0e0e0 !important;
}

/* Dark theme for Syncfusion Grid */
body.dark-theme .e-grid {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

body.dark-theme .e-grid .e-headercell {
    background-color: #1f2937;
    color: #e0e0e0;
    border-color: #404040;
}

body.dark-theme .e-grid .e-row {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #404040;
}

body.dark-theme .e-grid .e-row:hover {
    background-color: #404040;
}

body.dark-theme .e-grid .e-altrow {
    background-color: #323232;
}

body.dark-theme .e-grid .e-gridheader {
    background-color: #1f2937;
    border-color: #404040;
}

body.dark-theme .e-grid .e-gridcontent {
    background-color: #2d2d2d;
}

body.dark-theme .e-grid .e-toolbar {
    background-color: #1f2937;
    border-color: #404040;
}

body.dark-theme .e-grid .e-toolbar .e-btn {
    color: #e0e0e0;
}

body.dark-theme .e-pager {
    background-color: #1f2937;
    color: #e0e0e0;
}

body.dark-theme .e-pager .e-numericitem,
body.dark-theme .e-pager .e-currentitem {
    color: #e0e0e0;
}