html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.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;
}

/* Custom Primary Buttons */
.btn-primary-custom {
    background-color: #0f2042;
    border-color: #0f2042;
    color: #fff !important;
}

.btn-primary-custom:hover {
    background-color: #1e3a6d;
    border-color: #1e3a6d;
    color: #fff !important;
}

/* Custom Gold Buttons */
.btn-gold {
    background-color: #c5a059;
    border-color: #c5a059;
    color: #fff !important;
}

.btn-gold:hover {
    background-color: #ac873f;
    border-color: #ac873f;
    color: #fff !important;
}

/* Dark Mode Overrides for Buttons */
body.dark-mode .btn-primary-custom {
    background-color: #1e3a6d !important;
    border-color: #1e3a6d !important;
}
body.dark-mode .btn-primary-custom:hover {
    background-color: #294c8a !important;
    border-color: #294c8a !important;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 0 !important;
}

.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;
}

/* Dark Mode Global Styles */
body.dark-mode {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .card,
body.dark-mode .card-custom,
body.dark-mode .card-table,
body.dark-mode .report-card {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border: 1px solid #333;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5) !important;
}

body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #2c2c2c !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    border-color: #c5a059 !important;
    box-shadow: 0 0 0 0.25rem rgba(197, 160, 89, 0.25) !important;
}

body.dark-mode .table {
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

body.dark-mode .table th {
    background-color: #2a2a2a !important;
    color: #fff !important;
    border-bottom-color: #444 !important;
}

body.dark-mode .table td {
    background-color: transparent !important;
    color: #e0e0e0 !important;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .table-hover > tbody > tr:hover > * {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .text-dark {
    color: #e0e0e0 !important;
}

body.dark-mode .text-muted {
    color: #a0a0a0 !important;
}

body.dark-mode .bg-light {
    background-color: #2a2a2a !important;
}

body.dark-mode .bg-white {
    background-color: #1e1e1e !important;
}

body.dark-mode .list-group-item {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}

body.dark-mode .list-group-item:hover {
    background-color: #2a2a2a !important;
}

body.dark-mode .modal-content,
body.dark-mode .dropdown-menu {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

body.dark-mode .dropdown-item {
    color: #e0e0e0 !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: #2a2a2a !important;
    color: #fff !important;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: #333 !important;
}

body.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

body.dark-mode hr {
    border-color: #444 !important;
}

/* Specific component fixes for Dark Mode */
body.dark-mode .member-item,
body.dark-mode .supervisor-box,
body.dark-mode .detail-item {
    background-color: #1e1e1e !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .member-item.leader {
    background-color: #2a2212 !important; /* Darker gold/brown shade */
    border-right-color: #c5a059 !important;
}

body.dark-mode .detail-title {
    color: #a0a0a0 !important;
}

body.dark-mode .detail-item:hover {
    background-color: #2a2a2a !important;
}

body.dark-mode .alert-warning, 
body.dark-mode [style*="background-color: #fff3cd"],
body.dark-mode [style*="background-color:#fff9f0"],
body.dark-mode [style*="background-color: #fffdf5"] {
    background-color: #332701 !important;
    color: #ffd875 !important;
    border-color: #c5a059 !important;
}

body.dark-mode .alert-danger,
body.dark-mode [style*="background-color: #fff8f8"] {
    background-color: #3a1619 !important;
    color: #ffb3b8 !important;
    border-color: #dc3545 !important;
}

body.dark-mode .alert-info,
body.dark-mode [style*="background-color: #f0f5ff"] {
    background-color: #052345 !important;
    color: #9ec5fe !important;
    border-color: #0d6efd !important;
}

body.dark-mode .progress {
    background-color: #333 !important;
}

body.dark-mode .clickable-row:hover {
    background-color: #2a2a2a !important;
}

body.dark-mode .stat-number {
    color: #e0e0e0 !important;
}

body.dark-mode .stat-label {
    color: #b0b0b0 !important;
}

body.dark-mode .dashboard-section-title {
    color: #c5a059 !important;
}

body.dark-mode [style*="color: #0f2042"] {
    color: #66b2ff !important;
}

body.dark-mode .text-primary {
    color: #66b2ff !important;
}

body.dark-mode .admin-sidebar {
    background-color: #1e1e1e !important;
    border-top-color: #c5a059 !important;
}

body.dark-mode .admin-sidebar .list-group-item {
    background-color: transparent !important;
    color: #e0e0e0 !important;
}

body.dark-mode .admin-sidebar .list-group-item:hover {
    background-color: #2a2a2a !important;
}

body.dark-mode .admin-sidebar .list-group-item.active {
    background-color: #2a2212 !important;
    color: #c5a059 !important;
}

body.dark-mode .form-control::placeholder,
body.dark-mode .form-select::placeholder {
    color: #999 !important;
}

body.dark-mode .text-secondary {
    color: #b0b0b0 !important;
}

body.dark-mode .border-1 {
    border-color: #444 !important;
}

/* إلغاء خلفية الضل المعتمة لجميع البوب اب والنوافذ المنبثقة بالنظام بالكامل */
.modal-backdrop {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ==========================================================================
   تصميم بيضاوي حصري لقوائم الترتيب فقط (Sort Dropdowns Only)
   ========================================================================== */
.table-sort-col-select,
.table-sort-dir-select,
.table-sort-select,
select.table-sort-col-select,
select.table-sort-dir-select,
select.table-sort-col-select.form-select,
select.table-sort-dir-select.form-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border-radius: 50px !important;
    padding: 3px 12px 3px 28px !important;
    background-position: left 10px center !important;
    background-repeat: no-repeat !important;
    background-size: 12px 12px !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    height: 30px !important;
    line-height: 1.5 !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    outline: none !important;
    width: auto !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
}

.table-sort-col-select:hover,
.table-sort-dir-select:hover,
.table-sort-select:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.18) !important;
}

.table-sort-col-select:focus,
.table-sort-dir-select:focus,
.table-sort-select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

body.dark-mode .table-sort-col-select,
body.dark-mode .table-sort-dir-select,
body.dark-mode .table-sort-select {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f8fafc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* ==========================================================================
   Local Device Biometric App Lock Overlay Styles
   ========================================================================== */
body.biometric-app-locked {
    overflow: hidden !important;
    height: 100vh !important;
}

.biometric-lock-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2147483647 !important;
    background: #0f2042 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: 'Cairo', system-ui, -apple-system, sans-serif;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.biometric-lock-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

.biometric-lock-card {
    text-align: center;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 2.5rem 2rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(197, 160, 89, 0.3);
    max-width: 380px;
    width: 90%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

.biometric-app-logo {
    width: 72px;
    height: auto;
    margin-bottom: 1rem;
}

.biometric-icon-container {
    font-size: 3.5rem;
    color: #c5a059;
    margin-bottom: 1rem;
}

.biometric-title {
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: #ffffff;
    font-size: 1.5rem;
}

.biometric-status {
    color: #94a3b8;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}