/* ==========================================================
   Etyan brand palette — primary #054b4d, secondary #b19d84
   Loaded after styles-rtl.css on all admin & auth pages.
   ========================================================== */
:root,
[data-bs-theme="light"] {
  --etyan-primary: #054b4d;
  --etyan-primary-dark: #043a3c;
  --etyan-primary-light: #087578;
  --etyan-secondary: #b19d84;
  --etyan-secondary-dark: #a08f76;
  --etyan-secondary-light: #c4b49a;
  --etyan-surface: #ffffff;
  --etyan-surface-2: #fbfaf8;
  --etyan-light: #f4f1ec;
  --etyan-ink: #0c243c;
  --etyan-muted: rgba(12, 36, 60, 0.68);
  --etyan-border: rgba(5, 75, 77, 0.14);
  --etyan-shadow-sm: 0 8px 20px rgba(5, 75, 77, 0.08);
  --etyan-shadow-md: 0 14px 38px rgba(5, 75, 77, 0.12);
  --etyan-radius-sm: 12px;
  --etyan-radius-md: 16px;
  --etyan-focus: 0 0 0 4px rgba(5, 75, 77, 0.16);

  --bs-primary: var(--etyan-primary);
  --bs-secondary: var(--etyan-secondary);
  --bs-light: var(--etyan-light);
  --bs-primary-rgb: 5, 75, 77;
  --bs-secondary-rgb: 177, 157, 132;
  --bs-light-rgb: 244, 241, 236;
  --bs-link-color: var(--etyan-primary);
  --bs-link-color-rgb: 5, 75, 77;
  --bs-link-hover-color: var(--etyan-primary-dark);
  --bs-link-hover-color-rgb: 4, 58, 60;
  --bs-primary-bg-subtle: #e6f0f0;
  --bs-secondary-bg-subtle: #f9f7f4;
  --bs-primary-border-subtle: #b8d4d5;
  --bs-secondary-border-subtle: #ebe6dc;
  --bs-btn-primary-hover: var(--etyan-primary-dark);
  --bs-btn-primary-border-hover: var(--etyan-primary-dark);
  --bs-btn-primary-active: var(--etyan-primary-dark);
  --bs-btn-secondary-hover: var(--etyan-secondary-dark);
  --bs-btn-secondary-border-hover: #9a8972;
  --bs-btn-secondary-active: #9a8972;
}

[data-color-theme="blue"],
[data-color-theme="etyan"] {
  --bs-link-color: var(--etyan-primary);
  --bs-link-color-rgb: 5, 75, 77;
  --bs-link-hover-color: var(--etyan-primary-dark);
  --bs-link-hover-color-rgb: 4, 58, 60;
  --bs-primary: var(--etyan-primary);
  --bs-secondary: var(--etyan-secondary);
  --bs-light: var(--etyan-light);
  --bs-primary-rgb: 5, 75, 77;
  --bs-secondary-rgb: 177, 157, 132;
  --bs-light-rgb: 244, 241, 236;
  --bs-primary-bg-subtle: #e6f0f0;
  --bs-secondary-bg-subtle: #f9f7f4;
  --bs-primary-border-subtle: #b8d4d5;
  --bs-secondary-border-subtle: #ebe6dc;
  --bs-btn-primary-hover: var(--etyan-primary-dark);
  --bs-btn-primary-border-hover: var(--etyan-primary-dark);
  --bs-btn-primary-active: var(--etyan-primary-dark);
  --bs-btn-secondary-hover: var(--etyan-secondary-dark);
  --bs-btn-secondary-border-hover: #9a8972;
  --bs-btn-secondary-active: #9a8972;
}

/* Auth — login page */
.auth-wrapper {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.08)),
    linear-gradient(135deg, var(--etyan-primary) 0%, var(--etyan-secondary) 100%) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.auth-wrapper .btn-login {
  background-color: var(--etyan-primary);
  border-color: var(--etyan-primary);
  color: #ffffff;
}

.auth-wrapper .btn-login:hover,
.auth-wrapper .btn-login:focus,
.auth-wrapper .btn-login:active {
  background-color: var(--etyan-primary-dark) !important;
  border-color: var(--etyan-primary-dark) !important;
  color: #ffffff !important;
}

/* Typography */
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.app-page-title {
  color: var(--etyan-ink);
}

a:not(.btn):not(.dropdown-item):not(.alert-link):not(.nav-link):not(.menu-link):not(.page-link) {
  color: var(--etyan-primary);
  transition: color 0.18s ease;
}

a:not(.btn):not(.dropdown-item):not(.alert-link):not(.nav-link):not(.menu-link):not(.page-link):hover {
  color: var(--etyan-primary-dark);
}

/* Reports — attendance / GPS sub-navigation */
.reports-subnav {
  gap: 0.5rem;
}

.reports-subnav .nav-link {
  color: var(--etyan-ink);
  background-color: var(--etyan-surface);
  border: 1px solid var(--etyan-border);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.45rem 0.95rem;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.reports-subnav .nav-link:hover,
.reports-subnav .nav-link:focus {
  color: var(--etyan-primary);
  background-color: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-border-subtle);
}

.reports-subnav .nav-link.active,
.reports-subnav .nav-link.active:hover,
.reports-subnav .nav-link.active:focus {
  color: #ffffff;
  background-color: var(--etyan-primary);
  border-color: var(--etyan-primary);
  box-shadow: var(--etyan-shadow-sm);
}

.reports-badge-low {
  background-color: var(--etyan-primary);
  color: #ffffff;
}

.reports-badge-open {
  background-color: var(--etyan-secondary);
  color: var(--etyan-ink);
}

::selection {
  background-color: var(--etyan-primary);
  color: #fff;
}

/* Buttons */
.btn {
  border-radius: var(--etyan-radius-sm);
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn:focus,
.btn:focus-visible {
  outline: none;
  box-shadow: var(--etyan-focus);
}

.btn-primary {
  background-color: var(--etyan-primary);
  border-color: var(--etyan-primary);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--etyan-primary-dark);
  border-color: var(--etyan-primary-dark);
  color: #fff;
}

.btn-outline-primary {
  color: var(--etyan-primary);
  border-color: rgba(5, 75, 77, 0.45);
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--etyan-primary);
  border-color: var(--etyan-primary);
}

.btn-secondary {
  background-color: var(--etyan-secondary);
  border-color: var(--etyan-secondary);
  color: var(--etyan-ink);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: var(--etyan-secondary-dark);
  border-color: var(--etyan-secondary-dark);
  color: var(--etyan-ink);
}

.btn-outline-secondary {
  color: var(--etyan-ink);
  border-color: rgba(177, 157, 132, 0.75);
}

.btn-outline-secondary:hover {
  background-color: var(--etyan-secondary);
  border-color: var(--etyan-secondary);
  color: var(--etyan-ink);
}

/* Forms */
.form-control,
.form-select {
  border-color: var(--etyan-border);
  border-radius: var(--etyan-radius-sm);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(5, 75, 77, 0.55);
  box-shadow: var(--etyan-focus);
}

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

.form-check-input:focus {
  box-shadow: var(--etyan-focus);
}

/* Cards & surfaces */
.card {
  border-color: rgba(5, 75, 77, 0.1);
  border-radius: var(--etyan-radius-md);
}

/* Sidebar active states */
.app-navbar .menubar > li.menu-item > .menu-link:hover,
.app-navbar .menubar > li.menu-item > .menu-link.active,
.app-navbar .menubar > li.menu-item > .menu-link.open {
  background-color: var(--etyan-primary);
  color: #fff;
}

.app-navbar .menu-heading {
  color: var(--etyan-primary);
}

.app-navbar .menu-inner .menu-link.active {
  color: var(--etyan-primary);
}

/* Pagination, badges, progress */
.page-link:hover,
.page-item.active .page-link {
  background-color: var(--etyan-primary);
  border-color: var(--etyan-primary);
  color: #fff;
}

.badge.bg-primary,
.bg-primary {
  background-color: var(--etyan-primary) !important;
}

.badge.bg-secondary,
.bg-secondary {
  background-color: var(--etyan-secondary) !important;
  color: var(--etyan-ink) !important;
}

.progress-bar {
  background-color: var(--etyan-primary);
}

.text-primary {
  color: var(--etyan-primary) !important;
}

.text-secondary {
  color: var(--etyan-secondary-dark) !important;
}

.border-primary {
  border-color: var(--etyan-primary) !important;
}

/* Dashboard hero */
.dashboard-modern .hero-box {
  background: linear-gradient(to left, var(--etyan-secondary), var(--etyan-primary));
  border-color: rgba(5, 75, 77, 0.2);
}

.dashboard-modern .stat-card {
  border-color: rgba(5, 75, 77, 0.08);
}

.dashboard-modern .stat-card:hover {
  border-color: rgba(5, 75, 77, 0.25);
}

.dashboard-modern .stat-icon {
  color: var(--etyan-primary);
  background-color: var(--etyan-light);
  border-color: rgba(5, 75, 77, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}