body {font-family: "Manrope", sans-serif;}
.navbar-brand img{ width: 200px;}
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Primary button */
.btn-primary {
  color: #fff;
  background-color: #145ae6;  /* custom orange */
  border-color: #145ae6;
}

.btn-primary:hover {
  color: #fff;
  background-color: #145ae6;
  border-color: #145ae6;
}

.btn-primary:focus,
.btn-primary:active {
  color: #fff;
  background-color: #145ae6;
  border-color: #145ae6;
}

/* Warning button */
.btn-warning {
  color: #222;
  background-color: #ffdf36;  /* custom orange */
  border-color: #ffdf36;
}

.btn-warning:hover {
  color: #222;
  background-color: #ffdf36;
  border-color: #ffdf36;
}

.btn-warning:focus,
.btn-warning:active {
  color: #222;
  background-color: #ffdf36;
  border-color: #ffdf36;
}

.navbar {
background-color: #fff !important; /* BPCL Yellow */
}
.navbar .navbar-brand, .navbar .nav-link, .navbar .dropdown-toggle {
color: #222 !important;
font-weight: bold;
}
.navbar .nav-link:hover, .navbar .dropdown-item:hover {
background-color: #ffdf36 !important; /* BPCL Gold */
color: #222 !important;
}

.sidebar {
background-color: #145ae6 !important;
min-height: 100vh;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 280px;
z-index: 1000;
}
.sidebar .nav-link {
color: #fff !important;            /* BPCL Yellow */
font-weight: 500;
margin-bottom: 10px;
}
.sidebar .nav-link.active, .sidebar .nav-link:hover {
background-color: #ffdf36 !important; /* BPCL Gold */
color: #000 !important;
border-radius: 6px;
}
.sidebar-heading {
color: #000 !important;             
font-weight: 500;
}
.sidebar-heading.text-light {color: #ffdf36 !important;}
.main-content {
background-color: #fff;
border-radius: 8px;
padding: 0px;
min-height: calc(100vh - 56px);
margin-left: 280px;
}
.navbar-brand {
font-weight: bold;
}
.sidebar .nav-link i {
width: 28px;
text-align: center;
}
.sidebar h3 {font-size: 18px; text-transform: uppercase; text-align: center; font-weight: 500; color: #fff; margin: 0 0 20px;}
.navbar .navbar-nav li {font-size: 14px;}
h1 {
font-size: 24px;
}
h2 {
font-size: 20px;
margin-bottom: 0;
}
.bg-gray{ background: rgba(33,37,41,0.03);}
.form-control { font-size: 14px;}
table tr th {font-size: 14px; font-weight: 600; vertical-align: middle; color: #222; background: none; }
table tr td {font-size: 14px; vertical-align: middle; color: #222;}
table tr td .btn-group {display: inline-block !important;}
table tr td .btn-group .btn {margin-right: 5px; font-size: 12px; font-weight: 400; border-radius: 4px !important;}
.badge {padding: 5px 10px; font-size: 13px; font-weight: 400; border-radius: 4px; }     
table tr td .badge.bg-warning {color: #000;}
.dashboard .card .btn {font-size: 14px; padding: 7px 15px; min-width: 120px;} 
.card-icon{ position: absolute; top: 15px; right: 15px; }
.navbar .btn-warning {margin-right: 10px;}
.navbar .user-icon {display: flex; align-items: center; background: none !important;}
.navbar .user-icon:hover, .navbar .user-icon:focus {background: none !important;}
.navbar .user-icon i{font-size: 35px; margin-right: 8px;}
.navbar .dropdown-menu {padding: 10px !important;}
.navbar .dropdown-menu li a {font-size: 14px; border-radius: 6px;}
.main-heading .btn {font-size: 14px; padding: 5px 10px;}
.dashboard .card h5 {font-size: 20px; margin-bottom: 10px;}
.card-count {font-size: 36px; margin-bottom: 10px;}
.dashboard .card p {font-size: 13px;}
.btn{ font-size: 14px;}

/* .offcanvas {
background-color: #f4da35 !important;
} */

/* Mobile responsive styles */
@media (max-width: 768px) {
.sidebar {
    display: none;
}
.main-content {
    margin-left: 0;
    padding: 15px;
}
.offcanvas {
    width: 250px !important;
    background-color: #145ae6 !important;
}
.offcanvas .nav-link {
    color: #fff !important;
    padding: 10px 15px;
}
.offcanvas .nav-link.active,
.offcanvas .nav-link:hover {
    background-color: #ffdf36 !important;
    color: #000 !important;
    border-radius: 6px;
}
.offcanvas .sidebar-heading {
    color: #ffdf36 !important;
    padding: 10px 15px;
}
.offcanvas-header {
    background-color: #145ae6;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.offcanvas-title {
    color: #fff;
}
.btn-close {
    filter: brightness(0) invert(1);
}

/* Additional mobile styles */
.navbar-brand {
    font-size: 1.2rem;
}
.navbar .btn-warning {
    padding: 5px 10px;
    font-size: 14px;
    margin-right: 5px;
}
.navbar .user-icon i {
    font-size: 28px;
}
.main-heading h2 {
    font-size: 16px;
}
.dashboard .card {
    margin-bottom: 15px;
}
.dashboard .card h5 {
    font-size: 14px;
}
.dashboard .card p {
    font-size: 13px;
}
table {
    font-size: 13px;
}
table tr th {
    font-size: 14px;
}
table tr td {
    font-size: 13px;
}
.btn-group .btn {
    padding: 4px 8px;
    font-size: 13px;
}
.badge {
    padding: 4px 8px;
    font-size: 12px;
}
}

/* Tablet responsive styles */
@media (min-width: 769px) and (max-width: 1024px) {
.sidebar {
    width: 220px;
}
.main-content {
    margin-left: 220px;
}
.navbar-brand {
    font-size: 1.3rem;
}
.dashboard .card {
    margin-bottom: 20px;
}
}

/* Small mobile devices */
@media (max-width: 576px) {
.container-fluid {
    padding-left: 10px;
    padding-right: 10px;
}
.navbar .navbar-nav {
    margin-top: 10px;
}
.navbar .user-icon {
    margin-top: 5px;
}
.main-content {
    padding: 10px;
}
.card {
    margin-bottom: 15px;
}
.table-responsive {
    margin-bottom: 15px;
}
.btn {
    /* width: 100%; */
    margin-bottom: 5px;
}
.btn-group {
    width: 100%;
}
.btn-group .btn {
    flex: 1;
}
}

/* Print styles */
@media print {
.sidebar, .navbar, .btn, .no-print {
    display: none !important;
}
.main-content {
    margin-left: 0 !important;
    padding: 0 !important;
}
.container-fluid {
    width: 100% !important;
    padding: 0 !important;
}
body {
    background: white !important;
}
}

.mild-toast {
background: #f8f9fa !important;   /* Mild gray */
color: #333 !important;           /* Dark text for readability */
border: 1px solid #e0e0e0;
min-width: 300px;
max-width: 400px;
font-size: 1rem;
}
.mild-toast .btn-close {
filter: none;
}