:root{
  --accent:#f97316;
  --primary:#2a7de1;
}
:root, [data-theme="dark"]{
  --bg:#0b0f14; --card:#111823; --border:#1d2a39; --text:#e6edf3; --muted:#9fb1c5;
  --btn:#2a7de1; --btn-contrast:#fff; --link:#8ab4ff; --shadow: rgba(0,0,0,.4);
}
[data-theme="light"]{
  --bg:#ffffff; --card:#f9fafb; --border:#e5e7eb; --text:#0f172a; --muted:#475569;
  --btn:#0f62fe; --btn-contrast:#fff; --link:#0f62fe; --shadow: rgba(0,0,0,.1);
}
html,body{height:100%}

a{color:var(--link)}
.form-control,.form-select{background:transparent;border-color:var(--border);color:var(--text)}
.btn-primary{background:var(--btn); border-color:var(--btn); color:var(--btn-contrast)}
.container-fluid img{height:100px; width:300px;}



/* Global surfaces */
body, .navbar, .card, .dropdown-menu, .offcanvas, .modal-content {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

/* Borders that should adapt */
.card, .dropdown-menu, .modal-content, .table,
.navbar, .offcanvas {
  border-color: var(--bs-border-color) !important;
}

/* Table header cells (th) already react, but if you styled them:) */
.table th, .table thead th {
  color: var(--bs-emphasis-color);
  background-color: var(--bs-tertiary-bg);
}

/* default to light */
.brand-logo-dark { display: none; }

/* when dark mode is active, swap */
[data-bs-theme="dark"] .brand-logo-light { display: none; }
[data-bs-theme="dark"] .brand-logo-dark  { display: inline; }



.login-container{height: 100vh; width: 100%;}
.login-form{margin-left: auto; margin-right: auto; width: 370px; padding: 15px; max-width: 100%;}
.login-form .form-control{font-size: 15px; min-height: 48px; font-weight: 500;}
.login-form a{text-decoration: none; color:#666;}
.login-form a:hover{color:#723dbe;}
.forgot-link{font-size: 20px;}
/*.form-control:focus{border-color:#723dbe; box-shadow: 0 0 0 0.2rem rgba(114,61,190,.25);}*/
.btn-custom{background: #723dbe; border-color:#723dbe; color:#fff; font-size: 15px; font-weight: 600; min-height: 48px;}
.btn-custom:focus, .btn-custom:hover, .btn-custom:active, .btn-custom:active:focus{background: #54229d; border-color: #54229d; color:#fff;}
.btn-custom:focus{box-shadow: 0 0 0 0.2rem rgba(114,61,190,.25);}
.btn-on{background: green; border-color:green; color:#fff; font-size: 15px; font-weight: 600; min-height: 48px;}
.btn-off{background: red; border-color:red; color:#fff; font-size: 15px; font-weight: 600; min-height: 48px;}
.btn-off:focus, .btn-custom:hover, .btn-custom:active, .btn-custom:active:focus{background: #54229d; border-color: #54229d; color:#fff;}
.btn-off:focus{box-shadow: 0 0 0 0.2rem rgba(114,61,190,.25);}
.btn-on:focus, .btn-custom:hover, .btn-custom:active, .btn-custom:active:focus{background: #54229d; border-color: #54229d; color:#fff;}
.btn-on:focus{box-shadow: 0 0 0 0.2rem rgba(114,61,190,.25);}
.forgot-link {color: gray; text-decoration: none; font-size: 16px;}

#superAdminDropdown .dropdown-menu {
  min-width: 180px;
  font-size: 0.9rem;
}
#superAdminDropdown .dropdown-item:hover {
  background-color: var(--bs-secondary-bg);
}


/* Dark Mode */

/* Dark mode: light gray fields with black text */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] textarea.form-control {
  background-color: #e9ecef !important;
  color: #000 !important;
  border-color: #adb5bd !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] textarea.form-control:focus {
  background-color: #f8f9fa !important;
  color: #000 !important;
  border-color: #86b7fe !important;
  box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .form-text,
[data-bs-theme="dark"] .form-check-label {
  color: #f8f9fa !important;
}



/* ===== Custom Toast Styling ===== */

/* Base toast look */
.toast.custom-toast {
  border: 2px solid var(--toast-border-color, #dc3545); /* default red */
  background-color: var(--toast-bg, #fff);
  color: var(--toast-text-color, #000);
}

/* --- Light mode (white bg, black text) --- */
[data-bs-theme="light"] .toast.custom-toast {
  --toast-border-color: #dc3545;  /* Bootstrap red */
  --toast-bg: #fff;
  --toast-text-color: #000;
}

/* --- Dark mode (dark gray bg, white text) --- */
[data-bs-theme="dark"] .toast.custom-toast {
  --toast-border-color: #dc3545;
  --toast-bg: #212529;
  --toast-text-color: #fff;
}

.toast.custom-toast {
  transition: all 0.2s ease-in-out;
}
.toast.custom-toast:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(220, 53, 69, 0.3);
}

/* Make the admin dropdown twice as wide as default */
.admin-dropdown {
  min-width: 14rem !important; /* default Bootstrap is 10rem */
}

/* Optional: adjust spacing for longer item text */
.admin-dropdown .dropdown-item {
  white-space: normal;       /* allow wrapping if needed */
  line-height: 1.4;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Optional: dark/light mode contrast fix */
[data-bs-theme="dark"] .admin-dropdown {
  background-color: #2b3035;
  border-color: #444;
}

/* Make the entire Admin menu div (wrapper) wider */
#superAdminDropdown {
  min-width: 14rem; /* roughly twice the default dropdown width */
  text-align: center;
}

/* Center the button inside the wrapper */
#superAdminDropdown .btn {
  width: 100%;
  justify-content: center;
}

/* Ensure dropdown aligns properly within the wider div */
#superAdminDropdown .dropdown-menu {
  min-width: 100%; /* makes dropdown match div width */
}

/* Optional: theme-aware background for dropdown */
[data-bs-theme="dark"] #superAdminDropdown .dropdown-menu {
  background-color: #2b3035;
  border-color: #444;
}

[data-bs-theme="light"] #superAdminDropdown .dropdown-menu {
  background-color: #fff;
  border-color: #ccc;
}

/* Image preview box */
.logo-preview{
  width: 100px;          /* desired preview width */
  height: 20px;          /* desired preview height */
  object-fit: contain;   /* keep aspect ratio, no crop */
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: .5rem;
  padding: .25rem .5rem;
}

/* nicer in dark mode */
:root[data-bs-theme="dark"] .logo-preview{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.15);
}

.drag-handle{
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  line-height: 1;
  padding-top: .25rem; /* aligns with text nicely */
}
.drag-handle:active{ cursor: grabbing; }


#toastContainer {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
}