/* Shared dark/light mode - toggle button har page ke navbar me, choice browser me save rehti hai.
   Apply: <html class="dark-mode"> hone pe ye rules lagte hain. Ye file sabse LAST me load karo. */

/* Toggle button (dono mode me dikhe) */
.theme-toggle {
    background: transparent;
    border: 1px solid #c9ced4;
    border-radius: 50px;
    width: 38px;
    height: 30px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    color: #f5c518;
    margin-right: 8px;
}
.theme-toggle:hover {
    border-color: #ed202d;
}
/* Bina navbar wale pages (login) ke liye floating button */
.theme-float {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 10003;
    background: rgba(0, 0, 0, 0.35);
    margin-right: 0;
}
/* Login page (Bootstrap 5 + custom) */
html.dark-mode .login-container {
    background: #121417;
}
html.dark-mode .form-section {
    background: #1e2228;
    color: #e8e8e8;
}

/* ============ DARK MODE ============ */
html.dark-mode body {
    background: #121417;
    color: #e8e8e8;
}
html.dark-mode .page,
html.dark-mode .content-inner {
    background: #121417;
}
html.dark-mode .header,
html.dark-mode .navbar {
    background: #1c1f24;
}
html.dark-mode .navbar-brand,
html.dark-mode .brand-text {
    color: #fff;
}
html.dark-mode .nav-link.logout {
    color: #e8e8e8;
}
html.dark-mode .side-navbar {
    background: #1c1f24;
}
html.dark-mode .side-navbar a {
    color: #cfd4da;
}
html.dark-mode .side-navbar li.active a,
html.dark-mode .side-navbar a:hover {
    color: #fff;
}
html.dark-mode .sidebar-header h1,
html.dark-mode .sidebar-header p {
    color: #e8e8e8;
}
html.dark-mode .card {
    background: #1e2228;
    border-color: #333a42;
    color: #e8e8e8;
}
html.dark-mode .breadcrumb {
    background: #1e2228;
}
html.dark-mode .breadcrumb-item,
html.dark-mode .breadcrumb-item a {
    color: #cfd4da;
}
html.dark-mode .breadcrumb-item.active {
    color: #fff;
}
html.dark-mode label {
    color: #d5dae0;
}
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 {
    color: #f0f2f5;
}
html.dark-mode .text-muted {
    color: #9aa1a9;
}
html.dark-mode .form-control {
    background: #2a2f37;
    border-color: #3d444d;
    color: #fff;
}
html.dark-mode .form-control::placeholder {
    color: #8b939c;
}
html.dark-mode .form-control:focus {
    background: #2a2f37;
    color: #fff;
    border-color: #ed202d;
}
html.dark-mode select.form-control option {
    background: #2a2f37;
}
html.dark-mode .table,
html.dark-mode .table td,
html.dark-mode .table th {
    color: #e8e8e8;
    border-color: #333a42;
}
html.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.04);
}
html.dark-mode .table-hover tbody tr:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
/* Booking + delivery grids */
html.dark-mode .recent-bookings-wrapper,
html.dark-mode .delivery-grid-wrap {
    border-color: #333a42;
    background: #1e2228;
}
html.dark-mode .recent-bookings-wrapper .booking-grid,
html.dark-mode .delivery-grid-wrap .delivery-grid {
    background: #1e2228;
}
html.dark-mode .recent-bookings-wrapper .booking-grid td,
html.dark-mode .delivery-grid-wrap .delivery-grid td {
    background: #1e2228;
    border-color: #333a42;
    color: #e8e8e8;
}
html.dark-mode .recent-bookings-wrapper .booking-grid tr:nth-child(even) td,
html.dark-mode .delivery-grid-wrap .delivery-grid tr:nth-child(even) td {
    background: #242a31;
}
html.dark-mode .recent-bookings-wrapper .booking-grid tr:hover td,
html.dark-mode .delivery-grid-wrap .delivery-grid tr:hover td {
    background: #2e353d;
}
/* Boxes / sections */
html.dark-mode .dimensions-section {
    background: #242a31;
    border-color: #333a42;
}
html.dark-mode .dimension-card {
    background: #1e2228;
    border-color: #333a42;
}
html.dark-mode .dimension-inputs input {
    background: #2a2f37;
    border-color: #3d444d;
    color: #fff;
}
html.dark-mode .total-vol-weight {
    background: #2a2f37;
    color: #e8e8e8;
}
html.dark-mode .awb-scanner-box {
    background: #1e2228;
    color: #e8e8e8;
}
html.dark-mode .awb-scanner-tip,
html.dark-mode .pod-file-info {
    color: #9aa1a9;
}
html.dark-mode .main-footer {
    background: #1c1f24;
    color: #9aa1a9;
}
html.dark-mode .main-footer a {
    color: #cfd4da;
}
html.dark-mode hr {
    border-color: #333a42;
}
html.dark-mode .jumbotron-hr {
    border-color: #333a42;
}