/* ============================================================
   Custom Theme — Color Configuration & Component Overrides
   
   All colors are defined via CSS variables in :root below.
   To customize the theme, change only the color values in :root.
   All component rules automatically reference these variables.
   ============================================================ */

:root {
  /* --- Primary brand color (buttons, card headers, links, active states) --- */
  --theme-primary: #64748b;
  --theme-primary-dark: #475569;
  --theme-primary-rgb:
    100, 116, 139; /* Used for rgba() focus rings — must match primary */

  /* --- Dark accent (navbar, dark surfaces) --- */
  --theme-accent: #0f172a;
  --theme-accent-light: #1e293b;

  /* --- Page and surface backgrounds --- */
  --theme-background: #f8fafc;
  --theme-surface: #ffffff;
  --theme-surface-border: #dee2e6;

  /* --- Text --- */
  --theme-text: #0f172a;
  --theme-text-secondary: #6c757d;
  --theme-text-on-primary: #ffffff;

  /* --- Links --- */
  --theme-link: #475569;
  --theme-link-hover: #64748b;

  /* --- Focus ring (input, button) --- */
  --theme-focus-shadow: rgba(100, 116, 139, 0.25);
}

/* ============================================================
   GLOBAL PAGE LEVEL
   ============================================================ */

.theme-gray-auth {
  background-color: var(--theme-background);
  color: var(--theme-text);
}

.theme-gray-auth body {
  background-color: var(--theme-background);
  color: var(--theme-text);
}

/* --- Brand icon --- */

.brand-icon {
  height: 28px;
  width: auto;
  margin-right: 0.5rem;
}

/* ============================================================
   NAVBAR & NAVIGATION
   ============================================================ */

/* --- Force navbar to use theme primary color (green) --- */

.theme-gray-auth .navbar.bg-white,
.theme-gray-auth .navbar.bg-white.navbar-light {
  background-color: var(--theme-primary) !important;
}

.theme-gray-auth .navbar {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
}

.theme-gray-auth .navbar-light {
  background-color: var(--theme-primary) !important;
}

.theme-gray-auth .navbar-light .navbar-brand,
.theme-gray-auth .navbar-light .navbar-brand span,
.theme-gray-auth .navbar-light .nav-link,
.theme-gray-auth .navbar-light .nav-link.dropdown-toggle,
.theme-gray-auth .navbar .navbar-brand,
.theme-gray-auth .navbar .navbar-brand span,
.theme-gray-auth .navbar .nav-link,
.theme-gray-auth .navbar .nav-link.dropdown-toggle {
  color: var(--theme-text-on-primary) !important;
}

.theme-gray-auth .navbar-light .nav-link:hover,
.theme-gray-auth .navbar-light .nav-link.dropdown-toggle:hover,
.theme-gray-auth .navbar .nav-link:hover,
.theme-gray-auth .navbar .nav-link.dropdown-toggle:hover {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* --- Navbar text utilities override (AdminNavigation uses .text-dark) --- */

.theme-gray-auth .navbar .text-dark,
.theme-gray-auth .navbar-light .text-dark {
  color: var(--theme-text-on-primary) !important;
}

/* --- Navbar dropdown menu --- */

.theme-gray-auth .navbar .dropdown-menu,
.theme-gray-auth .navbar-light .dropdown-menu {
  background-color: var(--theme-surface);
  border-color: var(--theme-surface-border);
}

.theme-gray-auth .navbar .dropdown-menu .dropdown-item,
.theme-gray-auth .navbar-light .dropdown-menu .dropdown-item {
  color: var(--theme-text);
}

.theme-gray-auth .navbar .dropdown-menu .dropdown-item:hover,
.theme-gray-auth .navbar .dropdown-menu .dropdown-item:focus,
.theme-gray-auth .navbar-light .dropdown-menu .dropdown-item:hover,
.theme-gray-auth .navbar-light .dropdown-menu .dropdown-item:focus {
  background-color: var(--theme-background);
  color: var(--theme-primary);
}

.theme-gray-auth .navbar .dropdown-divider,
.theme-gray-auth .navbar-light .dropdown-divider {
  border-color: var(--theme-surface-border);
}

/* --- Breadcrumbs --- */

.theme-gray-auth .breadcrumb {
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

.theme-gray-auth .breadcrumb-item a {
  color: var(--theme-link);
}

.theme-gray-auth .breadcrumb-item a:hover {
  color: var(--theme-link-hover);
}

.theme-gray-auth .breadcrumb-item.active {
  color: var(--theme-text-secondary);
}

/* --- Navigation Tabs --- */

.theme-gray-auth .nav-tabs {
  border-bottom-color: var(--theme-surface-border);
}

.theme-gray-auth .nav-tabs .nav-link {
  color: var(--theme-text-secondary);
}

.theme-gray-auth .nav-tabs .nav-link:hover {
  color: var(--theme-primary-dark);
  border-bottom-color: var(--theme-primary);
}

.theme-gray-auth .nav-tabs .nav-link.active {
  color: var(--theme-primary);
  background-color: transparent;
  border-color: var(--theme-surface-border);
  border-bottom-color: var(--theme-primary);
  border-bottom: 3px solid var(--theme-primary);
}

/* --- Navigation Pills --- */

.theme-gray-auth .nav-pills .nav-link.active,
.theme-gray-auth .nav-pills .show > .nav-link {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  color: var(--theme-text-on-primary);
}

/* ============================================================
   FOOTER
   ============================================================ */

.theme-gray-auth .footer {
  background-color: var(--theme-surface);
  border-top-color: var(--theme-surface-border);
  color: var(--theme-text-secondary);
}

/* ============================================================
   CARDS & CONTAINERS
   ============================================================ */

.theme-gray-auth .card {
  border-color: var(--theme-surface-border);
  background-color: var(--theme-surface);
}

.theme-gray-auth .card-header {
  background-color: var(--theme-primary);
  color: var(--theme-text-on-primary) !important;
  border-color: var(--theme-primary);
}

.theme-gray-auth .card-header,
.theme-gray-auth .card-header * {
  color: var(--theme-text-on-primary) !important;
}

.theme-gray-auth .card-header h1,
.theme-gray-auth .card-header h2,
.theme-gray-auth .card-header h3,
.theme-gray-auth .card-header h4,
.theme-gray-auth .card-header h5,
.theme-gray-auth .card-header h6 {
  color: var(--theme-text-on-primary) !important;
  margin: 0;
}

.theme-gray-auth .card-header a {
  color: var(--theme-text-on-primary) !important;
}

.theme-gray-auth .card-header a:hover {
  color: #e2e8f0 !important;
  text-decoration: underline;
}

.theme-gray-auth .card-body {
  background-color: var(--theme-surface);
  color: var(--theme-text);
}

.theme-gray-auth .card-footer {
  background-color: var(--theme-background);
  border-color: var(--theme-surface-border);
  color: var(--theme-text-secondary);
}

/* ============================================================
   BUTTONS — PRIMARY
   ============================================================ */

.theme-gray-auth .btn-primary {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  color: var(--theme-text-on-primary);
}

.theme-gray-auth .btn-primary:hover {
  background-color: var(--theme-primary-dark);
  border-color: var(--theme-primary-dark);
  color: var(--theme-text-on-primary);
}

.theme-gray-auth .btn-primary:focus,
.theme-gray-auth .btn-primary.focus {
  background-color: var(--theme-primary-dark);
  border-color: var(--theme-primary-dark);
  color: var(--theme-text-on-primary);
  box-shadow: 0 0 0 0.2rem var(--theme-focus-shadow);
}

.theme-gray-auth .btn-primary:active,
.theme-gray-auth .btn-primary.active,
.theme-gray-auth .btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--theme-primary-dark);
  border-color: var(--theme-primary-dark);
  color: var(--theme-text-on-primary);
}

.theme-gray-auth .btn-primary:disabled,
.theme-gray-auth .btn-primary.disabled {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  opacity: 0.65;
}

/* --- Outline Primary Buttons --- */

.theme-gray-auth .btn-outline-primary {
  color: var(--theme-primary);
  border-color: var(--theme-primary);
}

.theme-gray-auth .btn-outline-primary:hover {
  color: var(--theme-text-on-primary) !important;
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}

.theme-gray-auth .btn-outline-primary:focus,
.theme-gray-auth .btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem var(--theme-focus-shadow);
  color: var(--theme-primary);
}

.theme-gray-auth .btn-outline-primary:active,
.theme-gray-auth .btn-outline-primary.active,
.theme-gray-auth .btn-outline-primary:not(:disabled):not(.disabled):active {
  color: var(--theme-text-on-primary);
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}

/* --- Outline Primary Buttons in Card Header (visible on green background) --- */

.theme-gray-auth .card-header .btn-outline-primary {
  color: var(--theme-text-on-primary);
  border-color: var(--theme-text-on-primary);
}

.theme-gray-auth .card-header .btn-outline-primary:hover {
  color: var(--theme-primary);
  background-color: var(--theme-text-on-primary);
  border-color: var(--theme-text-on-primary);
}

.theme-gray-auth .card-header .btn-outline-primary:focus,
.theme-gray-auth .card-header .btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.35);
}

.theme-gray-auth .card-header .btn-outline-primary:active,
.theme-gray-auth .card-header .btn-outline-primary.active {
  color: var(--theme-primary);
  background-color: var(--theme-text-on-primary);
  border-color: var(--theme-text-on-primary);
}

/* --- Info Button (semantic info color for consistency) --- */

.theme-gray-auth .btn-info {
  background-color: #0c5460;
  border-color: #0c5460;
  color: #ffffff !important;
}

.theme-gray-auth .btn-info:hover {
  background-color: #084c5a;
  border-color: #084c5a;
  color: #ffffff !important;
}

.theme-gray-auth .btn-info:focus,
.theme-gray-auth .btn-info.focus {
  background-color: #084c5a;
  border-color: #084c5a;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(12, 84, 96, 0.5);
}

.theme-gray-auth .btn-info:active,
.theme-gray-auth .btn-info.active {
  background-color: #073840;
  border-color: #073840;
  color: #ffffff !important;
}

/* --- Info Button in Card Header (visible on green background) --- */

.theme-gray-auth .card-header .btn-info {
  background-color: var(--theme-text-on-primary);
  border-color: var(--theme-text-on-primary);
  color: #0c5460;
}

.theme-gray-auth .card-header .btn-info:hover {
  background-color: transparent;
  border-color: var(--theme-text-on-primary);
  color: var(--theme-text-on-primary);
}

.theme-gray-auth .card-header .btn-info:focus,
.theme-gray-auth .card-header .btn-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.35);
}

.theme-gray-auth .card-header .btn-info:active,
.theme-gray-auth .card-header .btn-info.active {
  background-color: transparent;
  border-color: var(--theme-text-on-primary);
  color: var(--theme-text-on-primary);
}

/* --- Outline Warning Button (Edit) --- */

.theme-gray-auth .btn-outline-warning {
  color: #ffc107 !important;
  border-color: #ffc107;
}

.theme-gray-auth .btn-outline-warning:hover {
  color: #212529 !important;
  background-color: #ffc107;
  border-color: #ffc107;
}

.theme-gray-auth .btn-outline-warning:focus,
.theme-gray-auth .btn-outline-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.theme-gray-auth .btn-outline-warning:active,
.theme-gray-auth .btn-outline-warning.active {
  color: #212529 !important;
  background-color: #ffc107;
  border-color: #ffc107;
}

/* --- Outline Danger Button (Delete) --- */

.theme-gray-auth .btn-outline-danger {
  color: #dc3545 !important;
  border-color: #dc3545;
}

.theme-gray-auth .btn-outline-danger:hover {
  color: #ffffff !important;
  background-color: #dc3545;
  border-color: #dc3545;
}

.theme-gray-auth .btn-outline-danger:focus,
.theme-gray-auth .btn-outline-danger.focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.theme-gray-auth .btn-outline-danger:active,
.theme-gray-auth .btn-outline-danger.active {
  color: #ffffff !important;
  background-color: #dc3545;
  border-color: #dc3545;
}

.theme-gray-auth .btn-outline-info {
  color: #17a2b8;
  border-color: #17a2b8;
}

.theme-gray-auth .btn-outline-info:hover {
  color: #ffffff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.theme-gray-auth .btn-outline-info:focus,
.theme-gray-auth .btn-outline-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.theme-gray-auth .btn-outline-info:active,
.theme-gray-auth .btn-outline-info.active {
  color: #ffffff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

/* --- Secondary Button --- */

.theme-gray-auth .btn-secondary {
  background-color: #6c757d;
  border-color: #545b62;
  color: #ffffff !important;
}

.theme-gray-auth .btn-secondary:hover {
  background-color: #5a6268;
  border-color: #4e555b;
  color: #ffffff !important;
}

.theme-gray-auth .btn-secondary:focus,
.theme-gray-auth .btn-secondary.focus {
  background-color: #5a6268;
  border-color: #4e555b;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.theme-gray-auth .btn-secondary:active,
.theme-gray-auth .btn-secondary.active {
  background-color: #4e555b;
  border-color: #383d42;
  color: #ffffff !important;
}

/* --- Secondary Button in Card Header (visible on green background) --- */

.theme-gray-auth .card-header .btn-secondary {
  background-color: var(--theme-text-on-primary);
  border-color: var(--theme-text-on-primary);
  color: #6c757d;
}

.theme-gray-auth .card-header .btn-secondary:hover {
  background-color: transparent;
  border-color: var(--theme-text-on-primary);
  color: var(--theme-text-on-primary);
}

.theme-gray-auth .card-header .btn-secondary:focus,
.theme-gray-auth .card-header .btn-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.35);
}

.theme-gray-auth .card-header .btn-secondary:active,
.theme-gray-auth .card-header .btn-secondary.active {
  background-color: transparent;
  border-color: var(--theme-text-on-primary);
  color: var(--theme-text-on-primary);
}

/* --- Login Page Button --- */

.theme-gray-auth .btn-login {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  width: 100%;
  color: var(--theme-text-on-primary);
}

.theme-gray-auth .btn-login:hover {
  background-color: var(--theme-primary-dark);
  border-color: var(--theme-primary-dark);
  color: var(--theme-text-on-primary);
}

/* ============================================================
   FORMS — INPUTS, CHECKBOXES, VALIDATION
   ============================================================ */

.theme-gray-auth .form-control {
  border-color: var(--theme-surface-border);
  color: var(--theme-text);
}

.theme-gray-auth .form-control:focus {
  border-color: var(--theme-primary);
  color: var(--theme-text);
  box-shadow: 0 0 0 0.2rem var(--theme-focus-shadow);
}

.theme-gray-auth .form-control::placeholder {
  color: var(--theme-text-secondary);
  opacity: 0.7;
}

/* --- Checkboxes & Radio Buttons --- */

.theme-gray-auth .form-check-input {
  border-color: var(--theme-surface-border);
}

.theme-gray-auth .form-check-input:focus {
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 0.2rem var(--theme-focus-shadow);
}

.theme-gray-auth .form-check-input:checked {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}

/* --- Form Validation --- */

.theme-gray-auth .is-invalid,
.theme-gray-auth .form-control.is-invalid {
  border-color: #dc3545;
}

.theme-gray-auth .is-invalid:focus,
.theme-gray-auth .form-control.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.theme-gray-auth .is-valid,
.theme-gray-auth .form-control.is-valid {
  border-color: #28a745;
}

.theme-gray-auth .is-valid:focus,
.theme-gray-auth .form-control.is-valid:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* --- Form Labels --- */

.theme-gray-auth .form-label,
.theme-gray-auth label {
  color: var(--theme-text);
  font-weight: 500;
}

/* ============================================================
   LINKS
   ============================================================ */

.theme-gray-auth a {
  color: var(--theme-link) !important;
  text-decoration: none;
}

.theme-gray-auth a:hover {
  color: var(--theme-link-hover) !important;
  text-decoration: underline;
}

.theme-gray-auth .register-link-small {
  font-size: 0.9em;
  color: var(--theme-link) !important;
}

.theme-gray-auth .register-link-small:hover {
  color: var(--theme-link-hover) !important;
}

/* ============================================================
   ALERTS (SEMANTIC — mostly preserved, primary accent only)
   ============================================================ */

.theme-gray-auth .alert {
  color: inherit;
  border-left: 4px solid transparent;
}

.theme-gray-auth .alert-success {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
  border-left-color: #28a745;
}

.theme-gray-auth .alert-danger {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
  border-left-color: #dc3545;
}

.theme-gray-auth .alert-warning {
  background-color: #fff3cd;
  border-color: #ffeeba;
  color: #856404;
  border-left-color: #ffc107;
}

.theme-gray-auth .alert-info {
  background-color: #d1ecf1;
  border-color: #bee5eb;
  color: #0c5460;
  border-left-color: var(--theme-primary);
}

.theme-gray-auth .alert .close {
  color: inherit;
}

/* ============================================================
   TEXT UTILITIES (Bootstrap 4 utilities — require !important)
   ============================================================ */

.theme-gray-auth .text-primary {
  color: var(--theme-primary) !important;
}

.theme-gray-auth .text-secondary {
  color: var(--theme-text-secondary) !important;
}

.theme-gray-auth .text-muted {
  color: var(--theme-text-secondary) !important;
}

.theme-gray-auth .text-dark {
  color: var(--theme-text) !important;
}

.theme-gray-auth .text-white {
  color: #ffffff !important;
}

/* --- General text color enforcement --- */

.theme-gray-auth .card-header .text-dark {
  color: var(--theme-text-on-primary) !important;
}

.theme-gray-auth .card-header .text-muted,
.theme-gray-auth .card-header .text-secondary {
  color: rgba(255, 255, 255, 0.8) !important;
}

.theme-gray-auth .card-header .text-primary {
  color: var(--theme-text-on-primary) !important;
}

/* ============================================================
   BACKGROUND UTILITIES (Bootstrap 4 utilities — require !important)
   ============================================================ */

.theme-gray-auth .bg-primary {
  background-color: var(--theme-primary) !important;
}

.theme-gray-auth .bg-light {
  background-color: var(--theme-background) !important;
}

.theme-gray-auth .bg-white {
  background-color: #ffffff !important;
}

/* ============================================================
   BORDERS
   ============================================================ */

.theme-gray-auth .border {
  border-color: var(--theme-surface-border) !important;
}

.theme-gray-auth .border-top {
  border-top-color: var(--theme-surface-border) !important;
}

.theme-gray-auth .border-bottom {
  border-bottom-color: var(--theme-surface-border) !important;
}

.theme-gray-auth .border-primary {
  border-color: var(--theme-primary) !important;
}

/* ============================================================
   TABLES
   ============================================================ */

.theme-gray-auth .table {
  color: var(--theme-text);
  border-color: var(--theme-surface-border);
}

.theme-gray-auth .table-bordered {
  border-color: var(--theme-surface-border);
}

.theme-gray-auth .table-bordered th,
.theme-gray-auth .table-bordered td {
  border-color: var(--theme-surface-border);
}

.theme-gray-auth .table-hover tbody tr:hover {
  background-color: rgba(100, 116, 139, 0.05);
}

.theme-gray-auth .table thead th {
  background-color: var(--theme-background);
  color: var(--theme-text);
  border-color: var(--theme-surface-border);
}

/* ============================================================
   MISCELLANEOUS
   ============================================================ */

.theme-gray-auth .box-shadow {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}

.theme-gray-auth .btn-close {
  background-color: transparent;
}

/* --- Login page specifics --- */

.theme-gray-auth .login_wrapper {
  position: relative;
  z-index: 1;
  right: 0px;
  margin: 0px auto;
  margin-top: 5%;
  max-width: 500px;
}

.theme-gray-auth .register_wrapper {
  position: relative;
  z-index: 1;
  right: 0px;
  margin: 0px auto;
  margin-top: 5%;
  max-width: 900px;
}

.theme-gray-auth .centered-title {
  text-align: center;
  margin: 20px 0px 40px 0px;
  color: var(--theme-text);
}

.theme-gray-auth .centered-title h2 {
  color: var(--theme-text);
  font-weight: 600;
}