/* Modern Page Styling for Flight Horizon */

/* Global Background and Base Styling */
body {
    background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 0;
	min-height: 100vh;
	color: #E2E8F0;
}

/* Container adjustments */
.container,
.container-fluid {
    background: transparent;
}

.mainBoxMiddle {
    background: transparent !important;
    padding: 20px;
    margin-top: 20px;
    display: none;
}

/* Modern Panel Styling */
.panel {
    background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    overflow: hidden;
}

.panel-primary {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.panel-heading {
    background: linear-gradient(135deg, #4A5568 0%, #2D3748 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    /* padding: 15px 20px !important; */
    border-radius: 12px 12px 0 0 !important;
}

.panel-body {
    background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%) !important;
    color: #2D3748 !important;
    padding: 25px !important;
}

/* Form Styling */
.form-group {
    margin-bottom: 20px;
}

.formLabelBS,
label {
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    background: rgba(255, 255, 255, 1) !important;
    border: 2px solid rgba(74, 85, 104, 0.2) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    color: #2D3748 !important;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: #4299E1 !important;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    background: rgba(255, 255, 255, 1) !important;
}

/* Modern Button Styling */
.btn,
button {
    border-radius: 8px !important;
    font-weight: 600;
    padding: 12px 24px !important;
    transition: all 0.3s ease;
    border: none !important;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary,
.saveButton {
    background: linear-gradient(135deg, #4A5568 0%, #2D3748 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 6px !important;
    color: #E2E8F0 !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    margin: 4px 2px 4px 6px !important;
    min-width: 120px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    cursor: pointer !important;
    font-size: 1.4rem !important;
}

.btn-secondary {
    background: linear-gradient(135deg, #4A5568 0%, #2D3748 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 6px !important;
    color: #E2E8F0 !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    margin: 4px 2px 4px 6px !important;
    min-width: 120px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    cursor: pointer !important;
    font-size: 1.4rem !important;
}

.btn-primary:hover,
.saveButton:hover {
    background: linear-gradient(135deg, #4FB3F1 0%, #3B92DE 100%) !important;
    box-shadow: 0 6px 20px rgba(66, 153, 225, 0.4);
    transform: translateY(-2px);
}

.btn-success,
.listViewNewButton {
    background: linear-gradient(135deg, #4A5568 0%, #2D3748 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 6px !important;
    color: #E2E8F0 !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    margin: 4px 2px 4px 6px !important;
    min-width: 120px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    cursor: pointer !important;
    font-size: 1.4rem !important;
}

.btn-success:hover,
.listViewNewButton:hover {
    background: linear-gradient(135deg, #58CB88 0%, #48B179 100%) !important;
    box-shadow: 0 6px 20px rgba(72, 187, 120, 0.4);
    transform: translateY(-2px);
}

.btn-danger {
    background: linear-gradient(135deg, #F56565 0%, #E53E3E 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(245, 101, 101, 0.3);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #F67575 0%, #F54E4E 100%) !important;
    box-shadow: 0 6px 20px rgba(245, 101, 101, 0.4);
    transform: translateY(-2px);
}

/* Override btn-success styling for finish-drawing buttons to be green by default */
.finish-drawing.btn-success {
    background: linear-gradient(135deg, #58CB88 0%, #48B179 100%) !important;
    height: 45px;
    border: none !important;
    border-radius: 8px !important;
}

.finish-drawing.btn-success:hover {
    transform: translateY(-2px);
}

/* Table Styling */
.table {
    background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%) !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.table thead tr {
    background: linear-gradient(135deg, #4A5568 0%, #2D3748 100%) !important;
}

.table thead th {
    color: #FFFFFF !important;
    font-weight: 600;
    padding: 15px 20px !important;
    border: none !important;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.table tbody tr {
    background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%) !important;
    transition: all 0.3s ease;
}

.table tbody tr:hover {
    background: rgba(66, 153, 225, 0.1) !important;
    transform: translateX(4px);
}

.table tbody td {
    color: #fff !important;
    padding: 15px 20px !important;
    border: 1px solid rgba(74, 85, 104, 0.1) !important;
    font-size: 14px;
}

/* Action links in tables */
.table tbody td a {
    color: #fff !important;
    transition: all 0.3s ease;
    padding: 8px;
    border-radius: 6px;
    margin: 0 4px;
}

.table tbody td a:hover {
    background: rgba(66, 153, 225, 0.1);
    color: #3182CE !important;
    transform: scale(1.1);
}

.table tbody td a .fa-trash {
    color: #F56565 !important;
}

.table tbody td a:hover .fa-trash {
    color: #E53E3E !important;
}

/* Typography */
.titleBS {
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.subtitleBS {
    color: #E2E8F0 !important;
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Content area styling */
.mainBoxMiddle .subtitleBS+.titleBS {
    background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%) !important;
    color: #fff !important;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    line-height: 1.6;
    font-size: 16px;
    font-weight: 400;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Form spacing */
.formSpacerMargin {
    margin-top: 30px;
    padding: 0 20px;
}

.formSpacer {
    height: 20px;
}

/* DataTables styling */
.dataTables_wrapper {
    color: #2D3748 !important;
}

.dataTables_filter input {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid rgba(74, 85, 104, 0.2) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #2D3748 !important;
}

.dataTables_length select {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid rgba(74, 85, 104, 0.2) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #2D3748 !important;
}

.dataTables_info {
    color: #E2E8F0 !important;
}

.dataTables_paginate .paginate_button {
    background: linear-gradient(135deg, #4A5568 0%, #2D3748 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    margin: 0 4px !important;
    padding: 8px 12px !important;
}

.dataTables_paginate .paginate_button:hover {
    background: linear-gradient(135deg, #5A6578 0%, #3D4758 100%) !important;
    transform: translateY(-1px);
    color: #FFFFFF !important;
}

.dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #4299E1 0%, #3182CE 100%) !important;
    box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3);
    color: #FFFFFF !important;
}

/* Fix for DataTables pagination buttons to ensure white text */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #FFFFFF !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #FFFFFF !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: linear-gradient(135deg, #4299E1 0%, #3182CE 100%) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: #A0AEC0 !important;
    background: rgba(74, 85, 104, 0.5) !important;
    cursor: not-allowed;
}

/* Modal Dialog Styling */
.modal-content {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    overflow: hidden;
    height: auto !important;
    max-height: none !important;
}

.modal-header {
    background: linear-gradient(135deg, #4A5568 0%, #2D3748 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    padding: 15px 20px !important;
    border-radius: 12px 12px 0 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 18px;
    margin: 0;
}

.modal-header .close {
    color: #FFFFFF !important;
    opacity: 0.8;
    text-shadow: none;
    font-size: 24px;
    margin-top: -2px;
    transition: all 0.2s ease;
}

.modal-header .close:hover {
    opacity: 1;
    transform: scale(1.1);
}

.modal-body {
    background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%) !important;
    color: #2D3748 !important;
    padding: 15px !important;
    margin-right: 0 !important;
}

.modal-footer {
    background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%) !important;
    border-top: 1px solid rgba(74, 85, 104, 0.1) !important;
    border-radius: 0 0 12px 12px !important;
    padding: 15px 20px !important;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-backdrop {
    background-color: #1A202C !important;
    display: block !important;
}

.modal-backdrop.in {
    opacity: 0.7 !important;
}

/* Modal sizes */
.modal-sm .modal-content {
    border-radius: 10px !important;
}

.modal-lg .modal-content {
    border-radius: 14px !important;
}

/* Modal animations */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out, opacity 0.3s ease;
    opacity: 0;
}

.modal.in .modal-dialog {
    opacity: 1;
}

/* Modal content inside styling */
.modal-body h4 {
    color: #2D3748;
    font-weight: 600;
    margin-bottom: 15px;
}

.modal-body p {
    color: #4A5568;
    margin-bottom: 15px;
    line-height: 1.6;
}

/* Alert modals */
.modal.alert-modal .modal-header {
    background: linear-gradient(135deg, #F56565 0%, #E53E3E 100%) !important;
}

.modal.success-modal .modal-header {
    background: linear-gradient(135deg, #48BB78 0%, #38A169 100%) !important;
}

.modal.info-modal .modal-header {
    background: linear-gradient(135deg, #4299E1 0%, #3182CE 100%) !important;
}

.modal.warning-modal .modal-header {
    background: linear-gradient(135deg, #ED8936 0%, #DD6B20 100%) !important;
}

/* Form controls in modals */
.modal .form-control,
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="password"],
.modal input[type="number"],
.modal input[type="datetime-local"],
.modal select,
.modal textarea {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid rgba(74, 85, 104, 0.2) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    color: #2D3748 !important;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modal .form-control:focus,
.modal input[type="text"]:focus,
.modal input[type="email"]:focus,
.modal input[type="password"]:focus,
.modal input[type="number"]:focus,
.modal input[type="datetime-local"]:focus,
.modal select:focus,
.modal textarea:focus {
    outline: none !important;
    border-color: #4299E1 !important;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    background: rgba(255, 255, 255, 1) !important;
}

.modal label {
    color: #2D3748 !important;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
}

.modal .text-muted {
    color: #718096 !important;
}

.modal .text-info {
    color: #4299E1 !important;
}

/* Select options in modals */
.modal select option {
    color: #2D3748 !important;
    background-color: white !important;
    padding: 8px;
}

.modal select option:hover,
.modal select option:focus {
    background-color: rgba(66, 153, 225, 0.1) !important;
}

.modal select option:checked {
    background-color: rgba(66, 153, 225, 0.2) !important;
    color: #2D3748 !important;
}

/* Progress bar in modals */
.modal .progress {
    background-color: rgba(237, 242, 247, 0.8) !important;
    border-radius: 8px;
    height: 10px;
    overflow: hidden;
    margin: 10px 0;
}

.modal .progress-bar {
    background: linear-gradient(135deg, #4299E1 0%, #3182CE 100%) !important;
}

/* Alert messages in modals */
.modal .alert {
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 15px;
}

.modal .alert-danger {
    background-color: rgba(245, 101, 101, 0.1) !important;
    border: 1px solid rgba(245, 101, 101, 0.3) !important;
    color: #E53E3E !important;
}

/* Device Logs Modal specific styling */
#deviceLogsModal .modal-content,
#deviceLogsModal.modal .modal-content {
    background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
}

#deviceLogsModal .modal-header,
#deviceLogsModal.modal .modal-header {
    background: linear-gradient(135deg, #4A5568 0%, #2D3748 100%) !important;
}

#deviceLogsModal .modal-title,
#deviceLogsModal.modal .modal-title {
    color: #FFFFFF !important;
}

#deviceLogsModal .modal-body,
#deviceLogsModal.modal .modal-body {
    color: #2D3748 !important;
}

#deviceLogsModal select,
#deviceLogsModal.modal select,
#deviceLogsModal select option,
#deviceLogsModal.modal select option {
    color: #2D3748 !important;
    background-color: white !important;
}

#deviceLogsModal .form-control:hover,
#deviceLogsModal.modal .form-control:hover,
#deviceLogsModal .form-control:focus,
#deviceLogsModal.modal .form-control:focus {
    background-color: white !important;
    color: #2D3748 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mainBoxMiddle {
        padding: 15px;
        margin-top: 15px;
        display: none;
    }

    .panel-body {
        padding: 20px !important;
    }

    .table {
        font-size: 14px;
    }

    .table thead th,
    .table tbody td {
        padding: 12px 15px !important;
    }

    .modal-body {
        padding: 15px !important;
    }

    .modal-footer {
        padding: 10px 15px !important;
    }
}

/* Modern checkbox styling */
input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin-right: 8px;
    accent-color: #4299E1;
}

/* File input styling */
input[type="file"] {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px dashed rgba(74, 85, 104, 0.3) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    text-align: center;
    transition: all 0.3s ease;
}

input[type="file"]:hover {
    border-color: #4299E1 !important;
    background: rgba(66, 153, 225, 0.05) !important;
}

/* Login page specific styling */
/* Make sure the body has the right background in case the canvas fails */
body.login-page {
    background: url('/images/worldbg.jpg') center center/cover no-repeat;
}

/* Dark overlay for better contrast over world background */
body.login-page::before {
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(45, 55, 72, 0.7) 0%, rgba(26, 32, 44, 0.7) 100%);
}

/* Add a subtle drone flight path animation */
body.login-page::after {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%2360A5FA' stroke-width='1' stroke-opacity='0.15'%3E%3Cpath d='M100 100 Q200 50 300 100 T500 100 T700 100 M100 300 Q200 250 300 300 T500 300 T700 300 M100 500 Q200 450 300 500 T500 500 T700 500 M100 700 Q200 650 300 700 T500 700 T700 700'/%3E%3Cpath d='M100 100 Q150 200 100 300 T100 500 T100 700 M300 100 Q350 200 300 300 T300 500 T300 700 M500 100 Q550 200 500 300 T500 500 T500 700 M700 100 Q750 200 700 300 T700 500 T700 700'/%3E%3C/g%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1' stroke-opacity='0.1'%3E%3Cpath d='M0 0 L800 800 M800 0 L0 800'/%3E%3Cpath d='M100 0 L700 800 M700 0 L100 800'/%3E%3Cpath d='M200 0 L600 800 M600 0 L200 800'/%3E%3Cpath d='M300 0 L500 800 M500 0 L300 800'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-position: center center !important;
    background-size: cover !important;
    opacity: 0.3 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    animation: floatingGrid 60s linear infinite !important;
}

@keyframes floatingGrid {
    0% {
        background-position: 0% 0% !important;
    }

    100% {
        background-position: 100% 100% !important;
    }
}

.mainBoxMiddleLogin {
    position: absolute !important;
    opacity: 1 !important;
    font-family: Calibri, sans-serif !important;
    z-index: 2 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 340px !important;
    max-width: 90vw !important;
    height: auto !important;
    padding: 2rem 1.5rem !important;
    background: linear-gradient(135deg, rgba(45, 55, 72, 0.95) 0%, rgba(26, 32, 44, 0.95) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
}

.panelLogin {
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    padding: 2rem !important;
}

/* Login form */
.login-layout-table {
    width: 100% !important;
    margin: 0 auto !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
}

/* Text and header styles */
.login-title-small {
    font-size: 18px !important;
    font-weight: normal !important;
    color: #E2E8F0 !important;
    line-height: 0.5em !important;
    text-align: center !important;
    margin-bottom: 0 !important;
}

.login-title-large {
    font-size: 36px !important;
    font-weight: bold !important;
    color: #FFFFFF !important;
    text-align: center !important;
    margin-bottom: 15px !important;
}

/* Spacing divs */
.spacing-lg {
    height: 20px !important;
}

.spacing-md {
    height: 16px !important;
}

.spacing-sm {
    height: 12px !important;
}

.spacing-xs {
    height: 8px !important;
}

.spacing-xxs {
    height: 8px !important;
}

/* Input field styles */
.input-container {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: rgba(30, 41, 59, 0.7) !important;
}

.input-container .icon-wrapper {
    height: 36px !important;
    width: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-right: 0.5px solid rgba(255, 255, 255, 0.2) !important;
    flex-shrink: 0 !important;
}

.input-container .icon {
    color: #A0AEC0 !important;
    font-size: 18px !important;
}

.login-input-field {
    flex-grow: 1 !important;
    height: 36px !important;
    padding: 12px 16px !important;
    border: none !important;
    background-color: transparent !important;
    outline: none !important;
    box-sizing: border-box !important;
    color: #E2E8F0 !important;
    font-size: 14px !important;
}

.login-input-field::placeholder {
    color: #718096 !important;
}

/* Login button styles */
.buttonLogin {
    width: 100% !important;
    background: linear-gradient(135deg, #4A5568 0%, #2D3748 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.buttonLogin:hover {
    background: linear-gradient(135deg, #5A6578 0%, #3D4758 100%) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-2px) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.buttonLogin span {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* Status message for errors/logout */
.status-message {
    text-align: center !important;
    color: #E53E3E !important;
    font-weight: bold !important;
}

/* Footer text styles */
.footer-text {
    display: block !important;
    font-size: 12px !important;
    text-align: center !important;
    line-height: 1.4 !important;
    color: #CBD5E0 !important;
}

/* Link styles */
.info-link {
    color: #60A5FA !important;
    transition: all 0.3s ease !important;
}

.info-link:hover {
    color: #93C5FD !important;
    text-decoration: underline !important;
}

/* Utility classes */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.text-center {
    text-align: center !important;
}

.align-top {
    vertical-align: top !important;
}

/* Login page specific Bootstrap overrides */
.login-page .col-md-11 {
    padding: 0 10px !important;
    width: 100% !important;
    margin: 0 !important;
}

.login-page .row {
    margin: 0 !important;
    width: 100% !important;
}

.login-page hr {
    margin: 12px 0 !important;
}


/* Top-right logo */
.top-right-logo-container {
    position: fixed;
    top: 2.5px;
    right: 20px;
    z-index: 999;
    pointer-events: none;
}

.top-right-logo-container img {
    width: 150px;
    height: auto;
    opacity: 1.0;
}

/* General logo styling for all pages */

.navbar-logo {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    height: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
}

.logo-icon img {
    filter: brightness(1.1) contrast(1.1) !important;
    transition: all 0.3s ease !important;
    width: 150px !important;
    height: auto !important;
    padding: 5px !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    max-width: none !important;
}

/* Responsive Modal Styling */
.modal-dialog {
    width: 90% !important;
    max-width: 800px !important;
}

.modal-content {
    background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    width: 100% !important;
}

.modal-header {
    background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    padding: 15px 20px !important;
    border-radius: 12px 12px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.modal-title {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    margin: 0 !important;
    font-size: 1.25rem !important;
}

.modal-body,
div .modal-body {
    background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%) !important;
    color: #E2E8F0 !important;
    padding: 15px !important;
    margin-right: 0 !important;
    max-height: 70vh !important;
    width: 100% !important;
    height: auto !important;
    overflow-y: auto !important;
}

.modal-footer {
    background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 0 12px 12px !important;
    padding: 15px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.modal .close {
    color: #E2E8F0 !important;
    opacity: 0.8 !important;
    text-shadow: none !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    transition: all 0.3s ease !important;
}

.modal .close:hover {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

.modal-body input,
.modal-body select,
.modal-body textarea {
    background: rgba(15, 23, 42, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #E2E8F0 !important;
    border-radius: 6px !important;
}

.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus {
    background: rgba(15, 23, 42, 0.9) !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25) !important;
}

.modal-body label {
    color: #CBD5E0 !important;
    font-weight: 500 !important;
    margin-bottom: 5px !important;
}

.modal-body .table {
    color: #E2E8F0 !important;
    margin-bottom: 0 !important;
}

.modal-body .table th {
    background: rgba(15, 23, 42, 0.5) !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.modal-body .table td {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

.modal-backdrop.in {
    opacity: 1 !important;
}

.modal-body::-webkit-scrollbar {
    width: 6px !important;
}

.modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px !important;
}

.modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 3px !important;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5) !important;
}

.modal.fade .modal-dialog {
    opacity: 0 !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
}

.modal.in .modal-dialog {
    opacity: 1 !important;
}

.minimized-title-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f8f9fa;
    border-top: 2px solid #007bff;
    padding: 8px 15px;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    pointer-events: auto;
  }
  
  .minimized-title {
    font-weight: bold;
    color: #007bff;
    font-size: 14px;
  }
  
  .modal-header .btn,
  .modal-header .close {
    cursor: pointer;
  }

/* Responsive Modal Adjustments */
@media (max-width: 768px) {
    .modal-body,
    div .modal-body {
        padding: 15px !important;
        max-height: 60vh !important;
        width: 100% !important;
    }

    .modal-header,
    .modal-footer {
        padding: 12px 15px !important;
    }

    .modal-title {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 480px) {
    .modal-body,
    div .modal-body {
        padding: 12px !important;
        max-height: 70vh !important;
        width: 100% !important;
    }

    .modal-footer {
        justify-content: center !important;
    }

    .modal-footer .btn {
        flex: 1 1 auto !important;
        margin: 5px !important;
        text-align: center !important;
    }
}