@charset "utf-8";

/* Sotlava Organization Theme (Kaleh Ghazi / Teal) */
:root {
  --oos-gold: #0f6d6f;
  --oos-accent: #0f6d6f;
  --oos-accent-strong: #0b5d5f;
  --oos-accent-soft: rgba(15, 109, 111, 0.28);
  --oos-bg: #1d2326;
  --oos-bg-deep: #13181b;
  --oos-bg-soft: #384347;
  --oos-surface: rgba(255, 255, 255, 0.04);
  --oos-text: #f1fbfb;
  --oos-text-muted: rgba(241, 251, 251, 0.76);
  --oos-shadow: rgba(0, 0, 0, 0.42);
}

html,
body {
  background-color: var(--oos-bg-deep);
  background-image: linear-gradient(180deg, #20272b 0%, #1a2125 45%, #13181b 100%);
  background-attachment: fixed;
}

header {
  backdrop-filter: blur(3px);
  background: linear-gradient(120deg, rgba(36, 45, 49, 0.96), rgba(26, 37, 41, 0.96), rgba(20, 29, 34, 0.96));
  border-bottom-color: var(--oos-accent) !important;
}

.MainTitle {
  background: linear-gradient(to bottom, rgba(15, 109, 111, 0.88), rgba(15, 109, 111, 0.14), rgba(29, 35, 38, 0)) !important;
}

.MainTitleText {
  color: #45bec0 !important;
  letter-spacing: 0.35px;
}

.MainTitleImage img {
  opacity: 0.22;
}

.quickAccessBar {
  background-color: #172125;
}

.QuickAccessBarNavItem {
  background: linear-gradient(0deg, rgba(38, 53, 56, 1), rgba(23, 33, 37, 0.92), rgba(15, 109, 111, 0.15));
}

.headerMenuItem {
  background-color: var(--oos-accent);
}

.PageName {
  color: #45bec0 !important;
  border-right-color: var(--oos-accent) !important;
}

.HeaderItem {
  border-right-color: var(--oos-accent) !important;
}

.HeaderToolButton:hover {
  border-color: var(--oos-accent) !important;
}

.HeaderClockBox {
  border-color: rgba(15, 109, 111, 0.45);
  background: rgba(8, 22, 26, 0.6);
}

.HeaderActionZone {
  border-color: rgba(15, 109, 111, 0.35);
}

.LoginBox,
.BranchBox,
.NavItem {
  transition: 0.2s ease;
}

.LoginBox {
  color: var(--oos-text);
}

.LoginBox::placeholder {
  color: var(--oos-text-muted);
}

.LoginSubmit {
  background-color: var(--oos-accent) !important;
}

.LoginSubmit:hover {
  background-color: var(--oos-accent-strong) !important;
}

/* Keep login controls in Sotlava palette even if older cached CSS exists. */
nav form .LoginBox {
  border-bottom-color: var(--oos-accent) !important;
}

nav:has(form) {
  border-color: var(--oos-accent) !important;
}

.BrandBox {
  background-color: var(--oos-accent);
  border-color: var(--oos-accent);
}

.BranchBox,
.NavItem {
  background-color: rgba(255, 255, 255, 0.02);
}

.BranchBox:hover,
.NavItem:hover {
  box-shadow: 0 8px 20px var(--oos-shadow);
}

.SiteFooter {
  color: #45bec0 !important;
  border-top-color: var(--oos-accent) !important;
  background: linear-gradient(180deg, rgba(25, 35, 40, 0.95), rgba(19, 27, 31, 0.95));
}