/* SPLIT LAYOUT */
.split-layout {
  margin: 0;
  height: 100vh;
  display: flex;
  font-family: Arial, sans-serif;
  background: #0A0F1C; /* deep midnight */
}

/* LEFT PANEL */
.left-panel {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, #0A0F1C, #111726);
  padding-right: 40px; /* NEW: pulls logo toward center */
}


.big-logo {
  width: 75%; /* your preferred size */
  max-width: 800px;
  margin-left: 20px; /* NEW: fine-tune centering */
}


/* RIGHT PANEL */
.right-panel {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0A0F1C;
}

/* PREMIUM LOGIN BOX */
.login-box {
  background: rgba(255,255,255,0.08); /* frosted glass */
  backdrop-filter: blur(18px);
  padding: 50px;
  border-radius: 18px;
  width: 360px;
  border: 1px solid rgba(215,215,215,0.25); /* metallic silver border */
  box-shadow: 0 20px 40px rgba(0,0,0,0.45);
}

/* TITLE */
.login-box h2 {
  margin-bottom: 20px;
  font-size: 26px;
  font-weight: 600;
  color: #D7D7D7; /* metallic silver */
  letter-spacing: 1px;
}

/* INPUTS */
input {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border-radius: 6px;
  border: 1px solid rgba(215,215,215,0.25);
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 16px;
  transition: 0.3s;
}

input:focus {
  border-color: #3AAFFF; /* electric blue */
  box-shadow: 0 0 10px rgba(58,175,255,0.35);
  background: rgba(255,255,255,0.18);
}

/* BUTTON */
button {
  width: 100%;
  padding: 12px;
  background: #3AAFFF; /* electric blue */
  color: #0A0F1C;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  transition: 0.3s;
}

button:hover {
  background: #2F8FCC;
}

.preview-login {
  background: transparent;
  color: #D7D7D7;
  border: 1px solid rgba(215,215,215,0.25);
  font-size: 14px;
}

/* ERROR */
.error {
  color: #F5C27A; /* warm earth glow */
  margin-top: 10px;
  display: none;
}
/* DASHBOARD LAYOUT */
.dashboard-layout {
  margin: 0;
  height: 100vh;
  display: flex;
  background: #0A0F1C;
  font-family: Arial, sans-serif;
}

/* SIDEBAR */
.sidebar {
  width: 240px;
  background: linear-gradient(180deg, #0A0F1C, #111726);
  color: #D7D7D7;
  display: flex;
  flex-direction: column;
  padding: 30px 20px;
  box-shadow: 2px 0 10px rgba(0,0,0,0.4);
}

.sidebar-logo {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 40px;
  color: #3AAFFF;
}

/* NAV LINKS */
.nav-links a {
  display: block;
  color: #D7D7D7;
  text-decoration: none;
  padding: 12px 0;
  font-size: 16px;
  transition: 0.3s;
}

.nav-links a:hover {
  color: #3AAFFF;
}

/* MAIN CONTENT */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* TOP BAR */
.topbar {
  height: 70px;
  background: #111726;
  color: #D7D7D7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

.topbar-title {
  font-size: 22px;
  font-weight: 600;
}

.topbar-user {
  font-size: 16px;
  opacity: 0.8;
}

/* CONTENT AREA */
.content-area {
  padding: 40px;
  color: #D7D7D7;
}

.content-area h1 {
  font-size: 28px;
  margin-bottom: 10px;
  color: #3AAFFF;
}
/* WIDGET ROW */
.widget-row {
  display: flex;
  gap: 30px;
  margin-top: 30px;
}

/* WIDGET BOX */
.widget {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(215,215,215,0.25);
  backdrop-filter: blur(12px);
  padding: 25px;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  color: #D7D7D7;
  transition: 0.3s;
}

/* WIDGET TITLE */
.widget h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 600;
  color: #3AAFFF; /* electric blue accent */
}

/* WIDGET HOVER */
.widget:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.45);
}
.atlas-home {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0A0F1C;
  font-family: Arial, sans-serif;
}

.home-wrapper {
  text-align: center;
}

.home-title {
  font-size: 32px;
  color: #D7D7D7;
  margin-bottom: 30px;
  letter-spacing: 1px;
}

.home-dropdown {
  padding: 14px;
  width: 300px;
  font-size: 18px;
  border-radius: 8px;
  border: 1px solid rgba(215,215,215,0.25);
  background: rgba(255,255,255,0.12);
  color: #D7D7D7;
  backdrop-filter: blur(10px);
  transition: 0.3s;
}

.home-dropdown:hover {
  border-color: #3AAFFF;
  box-shadow: 0 0 10px rgba(58,175,255,0.35);
}

/* ATLAS LUXURY CORPORATE VISUAL THEME */
:root {
  --atlas-black: #0D0D0D;
  --atlas-navy: #0A1220;
  --atlas-silver: #D4D4D4;
  --atlas-graphite: #1A1A1A;
  --atlas-steel: #4A5A6A;
  --atlas-warm: #CFAE78;
  --atlas-charcoal: #111111;
  --atlas-panel: rgba(17, 17, 17, .94);
  --atlas-panel-hover: rgba(26, 26, 26, .97);
  --atlas-muted: #8e98a2;
  --atlas-line: rgba(212, 212, 212, .16);
  --atlas-blue: #4A5A6A;
  --atlas-blue-bright: #93a2b0;
  --atlas-glow: 0 12px 34px rgba(0, 0, 0, .38), 0 0 0 1px rgba(207, 174, 120, .12);
}

html {
  background: var(--atlas-black);
  scrollbar-color: var(--atlas-steel) var(--atlas-charcoal);
  scrollbar-width: thin;
}

body,
.split-layout,
.dashboard-layout,
.atlas-home {
  background:
    radial-gradient(circle at 50% -18%, rgba(74, 90, 106, .18), transparent 38%),
    radial-gradient(circle at 88% 92%, rgba(207, 174, 120, .055), transparent 28%),
    linear-gradient(145deg, var(--atlas-black) 0%, var(--atlas-charcoal) 48%, var(--atlas-navy) 100%);
  color: var(--atlas-silver);
}

body {
  position: relative;
  isolation: isolate;
  font-family: Inter, "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  letter-spacing: .01em;
}

body::after {
  content: "";
  position: fixed;
  right: 24px;
  bottom: 18px;
  z-index: -1;
  width: clamp(150px, 18vw, 280px);
  aspect-ratio: 3 / 2;
  background: url("atlas_logo.png") center / contain no-repeat;
  opacity: .045;
  filter: grayscale(.7) saturate(.45);
  pointer-events: none;
}

body > h1 {
  min-height: 78px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-bottom: 1px solid rgba(212, 212, 212, .11);
  background: linear-gradient(180deg, rgba(26, 26, 26, .92), rgba(13, 13, 13, .82));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

body > h1::before,
.announcement-header::before {
  content: "";
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  background: url("atlas_logo.png") center / contain no-repeat;
  opacity: .94;
  filter: saturate(.55) contrast(1.04);
}

h1,
h2,
h3,
.home-title,
.topbar-title,
body > h1,
#content h2,
.announcement-header h1 {
  color: var(--atlas-silver);
  background: linear-gradient(180deg, #f0f0f0 0%, var(--atlas-silver) 50%, #8793a0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .5);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .06));
}

.left-panel,
.right-panel,
.sidebar,
.topbar {
  background: linear-gradient(180deg, rgba(17, 17, 17, .98), rgba(10, 18, 32, .98));
}

.big-logo,
.employee-logo {
  filter: saturate(.62) contrast(1.04) drop-shadow(0 18px 32px rgba(0, 0, 0, .42));
}

.login-box,
.widget,
.chat-panel,
.announcement-card,
.notification-panel {
  background: linear-gradient(145deg, rgba(26, 26, 26, .95), rgba(13, 13, 13, .97));
  border: 1px solid var(--atlas-line);
  border-radius: 4px;
  box-shadow: 0 22px 52px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .035);
  backdrop-filter: blur(16px);
}

.widget:hover,
.login-box:hover,
.announcement-card:hover,
.chat-panel:hover {
  border-color: rgba(207, 174, 120, .32);
  box-shadow: 0 24px 58px rgba(0, 0, 0, .48), 0 0 0 1px rgba(207, 174, 120, .08);
}

input,
textarea,
select,
.home-dropdown,
.manager-dropdown,
.employee-info-form select,
.report-search {
  color: var(--atlas-silver);
  background: rgba(13, 13, 13, .9);
  border: 1px solid rgba(74, 90, 106, .7);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

input:hover,
textarea:hover,
select:hover,
.home-dropdown:hover,
.manager-dropdown:hover,
.report-search:hover {
  border-color: rgba(212, 212, 212, .42);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}

input:focus,
textarea:focus,
select:focus,
.home-dropdown:focus,
.manager-dropdown:focus,
.employee-info-form select:focus,
.report-search:focus {
  border-color: var(--atlas-warm);
  box-shadow: 0 0 0 2px rgba(207, 174, 120, .12), 0 10px 24px rgba(0, 0, 0, .26);
  outline: none;
}

button {
  color: #f0f0f0;
  background: linear-gradient(180deg, #4A5A6A, #303b46);
  border: 1px solid rgba(212, 212, 212, .18);
  border-radius: 3px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

button:hover {
  color: #fff;
  background: linear-gradient(180deg, #596b7c, #394652);
  border-color: rgba(207, 174, 120, .45);
  box-shadow: 0 12px 25px rgba(0, 0, 0, .36), 0 0 0 1px rgba(207, 174, 120, .08);
}

.employee-message,
.toast {
  color: #111111;
  background: var(--atlas-warm);
}

.atlas-message,
.notification-item {
  color: var(--atlas-silver);
  background: rgba(17, 17, 17, .92);
  border-color: var(--atlas-line);
}

.manager-dropdown-wrap {
  background: linear-gradient(180deg, rgba(13, 13, 13, .38), transparent);
}

.manager-dropdown option,
.home-dropdown option {
  color: var(--atlas-silver);
  background: var(--atlas-charcoal);
}

table {
  background: rgba(13, 13, 13, .82);
  border: 1px solid rgba(212, 212, 212, .1);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .25);
}

th {
  color: var(--atlas-warm);
  background: linear-gradient(180deg, #202020, #171717);
  letter-spacing: .035em;
}

th,
td {
  border-bottom-color: rgba(212, 212, 212, .1);
}

tr:hover,
.recipient-option:hover,
.notification-item:hover {
  background: rgba(207, 174, 120, .045);
}

.notification-count,
.announcement-error,
.employee-info-status,
.error {
  color: var(--atlas-warm);
}

.sidebar-logo,
.content-area h1,
.widget h3,
.nav-links a:hover {
  color: var(--atlas-warm);
  text-shadow: none;
}

/* Manager top-bar logo */
body > h1 {
  min-height: 78px;
  padding: 0 24px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0A1220 !important;
  border-bottom: 1px solid #4A5A6A;
}

body > h1::before {
  content: none;
}

.topbar-logo {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 54px;
  object-fit: contain;
  filter: none !important;
  box-shadow: none !important;
}

.manager-brand-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

.manager-brand-title {
  color: #D4D4D4;
  -webkit-text-fill-color: #D4D4D4;
  font-weight: 400;
  letter-spacing: .4px;
}

.manager-topbar {
  position: relative;
}

.last-updated {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(212, 212, 212, .65);
  -webkit-text-fill-color: rgba(212, 212, 212, .65);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* Google-style landing and ChatGPT-style message layout */
html {
  scroll-behavior: smooth;
}

.manager-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
}

.landing-view .manager-dropdown-wrap {
  min-height: calc(100vh - 79px) !important;
  margin: 0 auto !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

body:not(.landing-view) .manager-dropdown-wrap {
  min-height: 128px !important;
  margin: 0 auto !important;
}

.manager-dropdown {
  border-radius: 6px !important;
  color: #D4D4D4 !important;
  background: #1A1A1A !important;
  border-color: rgba(74, 90, 106, .72) !important;
  box-shadow: none !important;
}

.manager-dropdown:hover,
.manager-dropdown:focus {
  color: #D4D4D4 !important;
  background: #4A5A6A !important;
  border-color: #4A5A6A !important;
  box-shadow: none !important;
  transform: none !important;
}

.manager-dropdown option {
  color: #D4D4D4 !important;
  background: #1A1A1A !important;
}

.manager-dropdown option:checked {
  background: #4A5A6A !important;
}

#content {
  scroll-margin-top: 98px;
}

.employee-shell {
  width: min(920px, 100%) !important;
  height: 100vh !important;
  padding: 18px clamp(16px, 4vw, 40px);
  box-sizing: border-box;
}

.employee-header {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 0 16px;
  background: linear-gradient(180deg, #0A1220 76%, rgba(10, 18, 32, 0));
}

.chat-panel {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.messages {
  scroll-behavior: smooth;
  scrollbar-color: #4A5A6A #111111;
  scrollbar-width: thin;
}

.message {
  max-width: min(72%, 680px);
  border-radius: 14px !important;
  box-shadow: none;
}

.atlas-message,
.system-message {
  align-self: flex-start;
  border-bottom-left-radius: 4px !important;
}

.employee-message,
.manager-message {
  align-self: flex-end;
  border-bottom-right-radius: 4px !important;
}

.message-form {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #111111;
  border-top: 1px solid #4A5A6A;
}

.message-form input {
  border-radius: 6px !important;
  box-shadow: none !important;
}

.message-form button {
  border-radius: 6px !important;
  box-shadow: none !important;
}

@media (max-width: 720px) {
  .last-updated {
    right: 12px;
    font-size: 11px;
  }
}

/* Atlas luxury corporate typography hierarchy */
html,
body,
input,
textarea,
select,
button {
  font-family: Inter, "SF Pro Display", "SF Pro Text", "Roboto Flex", "Segoe UI", sans-serif !important;
}

.manager-brand-title {
  font-size: 24px;
  font-weight: 400 !important;
  letter-spacing: .6px !important;
  color: #D4D4D4 !important;
  -webkit-text-fill-color: #D4D4D4 !important;
}

#content h2,
.announcement-header h1,
.employee-header h1,
.home-title,
.login-box h2 {
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: .5px !important;
  color: #D4D4D4 !important;
  background: none !important;
  -webkit-text-fill-color: #D4D4D4 !important;
}

h3,
.notification-panel-header h2,
.employee-picker-header strong,
.announcement-card > label {
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: .4px !important;
  color: #D4D4D4 !important;
  background: none !important;
  -webkit-text-fill-color: #D4D4D4 !important;
}

th {
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: .3px !important;
  text-transform: uppercase;
  color: #4A5A6A !important;
}

td {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .2px;
  color: #D4D4D4;
}

button {
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: .3px;
  color: #D4D4D4 !important;
}

input,
textarea,
select {
  font-size: 15px !important;
  font-weight: 400;
  letter-spacing: .2px;
  color: #D4D4D4 !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(212, 212, 212, .45);
  opacity: 1;
}

small,
.small-text,
.employee-header p,
.announcement-header p,
.topbar-user,
.notification-item span,
.notification-empty {
  font-size: 13px !important;
  font-weight: 300 !important;
  letter-spacing: .2px !important;
  color: rgba(212, 212, 212, .65) !important;
}

.notification-count {
  border-color: rgba(207, 174, 120, .28);
}

.announcement-header {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(212, 212, 212, .11);
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: var(--atlas-charcoal);
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #596674, var(--atlas-steel));
  border: 2px solid var(--atlas-charcoal);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--atlas-warm), #8d7654);
}

.report-search {
  width: min(420px, 100%);
  margin: 0 0 18px;
  padding: 11px 13px;
  box-sizing: border-box;
  color: var(--atlas-silver);
  background: #0b111b;
  border: 1px solid var(--atlas-line);
  border-radius: 4px;
  font: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.report-search:hover,
.report-search:focus {
  border-color: var(--atlas-blue-bright);
  box-shadow: 0 0 12px rgba(0, 174, 239, .28);
  outline: none;
}

/* EMPLOYEE REQUEST DASHBOARD */
.employee-shell { width: min(920px, 92vw); height: min(760px, 90vh); display: flex; flex-direction: column; color: #D7D7D7; }
.employee-header { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.employee-header h1 { margin: 0; font-size: 28px; }
.employee-header p { margin: 5px 0 0; color: #9DA7B5; }
.employee-logo { width: 84px; height: 84px; object-fit: contain; }
.logout-button { width: auto; margin: 0 0 0 auto; padding: 10px 18px; }
.chat-panel { min-height: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden; background: rgba(255,255,255,0.08); border: 1px solid rgba(215,215,215,0.25); border-radius: 18px; box-shadow: 0 20px 40px rgba(0,0,0,0.45); backdrop-filter: blur(18px); }
.messages { flex: 1; overflow-y: auto; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.message { max-width: 72%; padding: 12px 16px; border-radius: 10px; line-height: 1.45; }
.atlas-message { align-self: flex-start; background: #111726; border: 1px solid rgba(215,215,215,0.2); }
.employee-message { align-self: flex-end; background: #3AAFFF; color: #0A0F1C; }
.message-form { display: flex; gap: 12px; padding: 18px; border-top: 1px solid rgba(215,215,215,0.2); }
.message-form input { margin: 0; }
.message-form button { width: 120px; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
@media (max-width: 650px) { .employee-shell { height: 94vh; } .employee-logo { width: 58px; height: 58px; } .employee-header h1 { font-size: 21px; } .message { max-width: 88%; } }
.content-area textarea { width: 100%; min-height: 140px; box-sizing: border-box; padding: 12px; color: #fff; background: rgba(255,255,255,0.12); border: 1px solid rgba(215,215,215,0.25); border-radius: 6px; }
.recipient-list { display: grid; gap: 8px; margin: 16px 0; }
.recipient-option { display: flex; gap: 10px; align-items: center; }
.recipient-option input { width: auto; margin: 0; }

/* MANAGER ANNOUNCEMENT PAGE */
.announcement-page { width: min(820px, 92vw); color: #D7D7D7; }
.announcement-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.announcement-header h1 { margin: 0 0 6px; color: #3AAFFF; }
.announcement-header p { margin: 0; color: #9DA7B5; }
.announcement-card { background: rgba(255,255,255,0.08); border: 1px solid rgba(215,215,215,0.25); border-radius: 18px; padding: 28px; box-shadow: 0 20px 40px rgba(0,0,0,0.45); }
.announcement-card textarea { width: 100%; min-height: 150px; box-sizing: border-box; margin: 10px 0 20px; padding: 12px; color: #fff; background: rgba(255,255,255,0.12); border: 1px solid rgba(215,215,215,0.25); border-radius: 6px; font: inherit; resize: vertical; }
.employee-picker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.employee-picker-header input { width: auto; margin: 0 6px 0 0; }
.announcement-error { min-height: 20px; margin-top: 12px; color: #F5C27A; }
.back-button { width: auto; margin: 0; padding: 10px 18px; }
.toast { position: fixed; right: 24px; bottom: 24px; padding: 12px 18px; border-radius: 8px; background: #3AAFFF; color: #0A0F1C; font-weight: 600; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }

.manager-dropdown-wrap { display: flex; justify-content: center; margin: 28px auto; }
.manager-dropdown { width: min(360px, 88vw); padding: 12px 44px 12px 16px; border: 1px solid #dadce0; border-radius: 8px; background: #fff; color: #202124; font: 16px Arial, sans-serif; box-shadow: 0 1px 2px rgba(60,64,67,.15); }
#content { width: min(1100px, 92vw); margin: 0 auto; }

/* LEGION 5i / ATLAS VISUAL THEME — CSS ONLY */
:root {
  --atlas-black: #05070b;
  --atlas-graphite: #0b0f16;
  --atlas-navy: #0a1322;
  --atlas-panel: #101722;
  --atlas-panel-hover: #131d2b;
  --atlas-blue: #168cff;
  --atlas-blue-bright: #42adff;
  --atlas-silver: #d7e0ea;
  --atlas-muted: #8996a8;
  --atlas-line: rgba(98, 174, 255, .24);
  --atlas-glow: 0 0 18px rgba(22, 140, 255, .24);
}

html { background: var(--atlas-black); }

body,
.split-layout,
.dashboard-layout,
.atlas-home {
  background:
    radial-gradient(circle at 50% -20%, rgba(22, 140, 255, .13), transparent 38%),
    linear-gradient(145deg, var(--atlas-black) 0%, var(--atlas-graphite) 52%, var(--atlas-navy) 100%);
  color: var(--atlas-silver);
}

body { min-height: 100vh; margin: 0; font-family: Inter, "Segoe UI", Arial, sans-serif; }

h1, h2, h3, .home-title, .topbar-title {
  color: var(--atlas-silver);
  letter-spacing: .035em;
  text-shadow: 0 0 14px rgba(22, 140, 255, .14);
}

.left-panel,
.right-panel,
.sidebar,
.topbar {
  background: linear-gradient(180deg, rgba(10, 15, 24, .98), rgba(7, 11, 18, .98));
}

.login-box,
.widget,
.chat-panel,
.announcement-card {
  background: linear-gradient(145deg, rgba(18, 26, 38, .96), rgba(9, 14, 22, .96));
  border: 1px solid var(--atlas-line);
  border-radius: 5px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .035);
}

input,
textarea,
.home-dropdown {
  background: #0b111b;
  color: var(--atlas-silver);
  border: 1px solid rgba(112, 155, 204, .34);
  border-radius: 4px;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

input:focus,
textarea:focus,
.home-dropdown:focus {
  border-color: var(--atlas-blue-bright);
  box-shadow: var(--atlas-glow);
  outline: none;
}

button {
  background: linear-gradient(180deg, #2198ff, #0873d9);
  color: #02070d;
  border-radius: 4px;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

button:hover {
  background: linear-gradient(180deg, #42adff, #168cff);
  box-shadow: 0 0 20px rgba(22, 140, 255, .38);
  transform: scale(1.015);
}

.widget,
.login-box,
.announcement-card,
.chat-panel,
tr,
.recipient-option {
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.widget:hover,
.login-box:hover,
.announcement-card:hover,
.chat-panel:hover {
  transform: scale(1.01);
  border-color: rgba(66, 173, 255, .48);
  box-shadow: 0 20px 52px rgba(0, 0, 0, .58), var(--atlas-glow);
}

tr:hover,
.recipient-option:hover {
  background: rgba(22, 140, 255, .065);
}

.message { border-radius: 3px; }
.atlas-message { background: #0b121d; border-color: var(--atlas-line); }
.employee-message { background: #168cff; }

.manager-dropdown-wrap {
  min-height: 180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.manager-dropdown {
  width: min(380px, 88vw);
  padding: 14px 46px 14px 16px;
  appearance: auto;
  background-color: #0d141f;
  color: var(--atlas-silver);
  border: 1px solid rgba(112, 155, 204, .42);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  animation: atlasFadeIn 220ms ease both;
}

.manager-dropdown:hover,
.manager-dropdown:focus {
  transform: scale(1.015);
  border-color: var(--atlas-blue-bright);
  box-shadow: var(--atlas-glow);
  outline: none;
}

.manager-dropdown option { background: #0d141f; color: var(--atlas-silver); }

#content {
  color: var(--atlas-silver);
  animation: atlasFadeIn 220ms ease both;
}

table { width: 100%; border-collapse: collapse; background: rgba(9, 14, 22, .78); }
th { color: var(--atlas-blue-bright); background: #0d1521; }
th, td { padding: 12px 14px; border-bottom: 1px solid rgba(112, 155, 204, .16); text-align: left; }

@keyframes atlasFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.employee-info-panel { animation: atlasFadeIn 220ms ease both; }
.employee-info-form { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)) auto; gap: 12px; align-items: center; margin: 20px 0; }
.employee-info-form input, .employee-info-form select, .employee-info-form button { box-sizing: border-box; width: 100%; margin: 0; min-height: 44px; }
.employee-info-form select { padding: 10px 12px; background: #0b111b; color: var(--atlas-silver); border: 1px solid rgba(112, 155, 204, .34); border-radius: 4px; transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.employee-info-form select:hover, .employee-info-form select:focus { border-color: var(--atlas-blue-bright); box-shadow: var(--atlas-glow); outline: none; transform: scale(1.01); }
.employee-info-status { min-height: 20px; color: #f5c27a; margin-bottom: 10px; }
.employee-delete-button { width: auto; margin: 0; padding: 8px 14px; }
@media (max-width: 900px) { .employee-info-form { grid-template-columns: 1fr 1fr; } }

#announcementMessage,
#annMessage {
  width: 100%;
  height: 140px;
  min-height: 140px;
  max-height: 140px;
  box-sizing: border-box;
  padding: 14px;
  font-size: 16px !important;
  color: #D4D4D4 !important;
  background: #1A1A1A !important;
  border: 1px solid #4A5A6A !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  resize: none !important;
  white-space: pre-wrap;
  overflow-y: auto;
}

#announcementMessage::placeholder,
#annMessage::placeholder {
  color: rgba(212, 212, 212, .45) !important;
  opacity: 1;
}

#sendAnnouncement,
#inlineSendAnnouncement {
  width: auto;
  min-width: 132px;
  padding: 7px 14px;
  font-size: 14px;
}

.announcement-select-all { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 8px; color: var(--atlas-silver); }
.announcement-select-all input { width: auto; margin: 0; }

.home-title {
  color: #dce6f1;
  background: linear-gradient(180deg, #ffffff 0%, #c9d4e0 46%, #8fa4b9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
  font-weight: 650;
  letter-spacing: .075em;
  text-align: center;
  text-shadow:
    0 2px 5px rgba(0, 0, 0, .58),
    0 0 12px rgba(22, 140, 255, .34),
    0 0 28px rgba(22, 140, 255, .18);
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .08));
}

body > h1,
#content h2,
.announcement-header h1,
.home-title {
  color: #dbe8f4;
  background: linear-gradient(180deg, #7890a8 0%, #c7d7e6 48%, #f2f6fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: Inter, Roboto, "Exo 2", "Segoe UI", Arial, sans-serif;
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 700;
  letter-spacing: .065em;
  line-height: 1.15;
  text-align: center;
  text-shadow:
    0 3px 6px rgba(0, 0, 0, .72),
    0 0 10px rgba(0, 174, 239, .5),
    0 0 24px rgba(0, 174, 239, .25);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45));
}

.notification-panel {
  width: min(1100px, 92vw);
  margin: 48px auto 36px;
  padding: 22px;
  box-sizing: border-box;
  background: linear-gradient(145deg, rgba(16, 23, 34, .96), rgba(8, 13, 21, .96));
  border: 1px solid var(--atlas-line);
  border-radius: 5px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .45);
}

.notification-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.notification-panel-header h2 { margin: 0; color: var(--atlas-silver); font-size: 1.1rem; letter-spacing: .06em; }
.notification-count { min-width: 26px; padding: 4px 7px; text-align: center; color: var(--atlas-blue-bright); border: 1px solid var(--atlas-line); border-radius: 3px; }
.notification-list { display: grid; gap: 8px; }
.notification-item { width: 100%; margin: 0; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--atlas-silver); background: #0b121d; border: 1px solid rgba(112, 155, 204, .2); text-align: left; font-size: .95rem; }
.notification-item span { color: var(--atlas-muted); font-weight: 400; }
.notification-item:hover { color: #fff; background: #101b29; border-color: var(--atlas-blue-bright); }
.notification-empty { margin: 6px 0; color: var(--atlas-muted); }
.atlas-home {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0A0F1C;
  font-family: Arial, sans-serif;
}

.home-wrapper {
  text-align: center;
}

.home-title {
  font-size: 32px;
  color: #D7D7D7;
  margin-bottom: 30px;
  letter-spacing: 1px;
}

.home-dropdown {
  padding: 14px;
  width: 300px;
  font-size: 18px;
  border-radius: 8px;
  border: 1px solid rgba(215,215,215,0.25);
  background: rgba(255,255,255,0.12);
  color: #D7D7D7;
  backdrop-filter: blur(10px);
  transition: 0.3s;
}

.home-dropdown:hover {
  border-color: #3AAFFF;
  box-shadow: 0 0 10px rgba(58,175,255,0.35);
}

/* Final corporate-theme cascade */
/* Atlas consolidated visual specification */
:root {
  --atlas-black: #0D0D0D;
  --atlas-navy: #0A1220;
  --atlas-silver: #D4D4D4;
  --atlas-graphite: #1A1A1A;
  --atlas-steel: #4A5A6A;
  --atlas-warm: #CFAE78;
  --atlas-charcoal: #111111;
  --motion-fast: 120ms;
  --motion-medium: 180ms;
  --motion-dropdown: 220ms;
  --motion-panel: 260ms;
  --motion-hover: 140ms;
  --motion-press: 90ms;
  --motion-fade: 240ms;
  --motion-bubble: 180ms;
  --ease-ui: cubic-bezier(.25, .1, .25, 1);
  --ease-dropdown: cubic-bezier(.22, .12, .18, 1);
  --ease-bubble: cubic-bezier(.16, .84, .44, 1);
}

html,
body,
input,
textarea,
select,
button {
  font-family: Inter, "SF Pro Display", "SF Pro Text", "Roboto Flex", "Segoe UI", sans-serif !important;
}

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--atlas-graphite) var(--atlas-black);
  scrollbar-width: thin;
}

body,
.split-layout,
.dashboard-layout,
.atlas-home {
  background: var(--atlas-navy) !important;
  color: var(--atlas-silver) !important;
}

body::after {
  content: "" !important;
  position: fixed !important;
  display: block;
  width: min(900px, 82vw) !important;
  height: min(600px, 70vh) !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: -1 !important;
  opacity: .14 !important;
  transform: translate(-50%, -50%);
  background: transparent url("atlas_logo.png") center / contain no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: grayscale(1) saturate(0) !important;
  mix-blend-mode: screen;
  pointer-events: none !important;
}

.manager-topbar,
body > h1 {
  min-height: 72px !important;
  height: 72px !important;
  padding: 0 24px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: var(--atlas-navy) !important;
  border-bottom: 1px solid var(--atlas-steel) !important;
  box-shadow: none !important;
}

.manager-brand-group {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
}

.topbar-logo {
  width: auto !important;
  height: 54px !important;
  object-fit: contain !important;
  filter: none !important;
  box-shadow: none !important;
}

.manager-brand-title {
  font-size: 24px !important;
  font-weight: 400 !important;
  letter-spacing: .6px !important;
  color: var(--atlas-silver) !important;
  -webkit-text-fill-color: var(--atlas-silver) !important;
  text-shadow: none !important;
}

#content h2,
.announcement-header h1,
.employee-header h1,
.home-title,
.login-box h2 {
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: .5px !important;
  color: var(--atlas-silver) !important;
  -webkit-text-fill-color: var(--atlas-silver) !important;
  text-shadow: none !important;
}

h3,
.notification-panel-header h2,
.employee-picker-header strong,
.announcement-card > label {
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: .4px !important;
  color: var(--atlas-silver) !important;
  -webkit-text-fill-color: var(--atlas-silver) !important;
  text-shadow: none !important;
}

th {
  height: 48px;
  box-sizing: border-box;
  padding: 0 14px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: .3px !important;
  text-transform: uppercase !important;
  color: var(--atlas-steel) !important;
}

td {
  height: 48px;
  box-sizing: border-box;
  padding: 0 14px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: .2px !important;
  color: var(--atlas-silver) !important;
}

button {
  padding: 10px 18px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: .3px !important;
  color: var(--atlas-silver) !important;
  background: var(--atlas-black) !important;
  border: 1px solid var(--atlas-steel) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transition: background var(--motion-hover) var(--ease-ui), border-color var(--motion-hover) var(--ease-ui), transform var(--motion-press) var(--ease-ui) !important;
}

button:hover {
  color: var(--atlas-silver) !important;
  background: var(--atlas-graphite) !important;
  border-color: var(--atlas-warm) !important;
  box-shadow: none !important;
  transform: none !important;
}

button:active {
  background: var(--atlas-charcoal) !important;
  transform: scale(.99) !important;
}

button:disabled {
  color: rgba(212, 212, 212, .46) !important;
  background: var(--atlas-black) !important;
  border-color: rgba(74, 90, 106, .42) !important;
  cursor: not-allowed;
}

input,
textarea,
select {
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: .2px !important;
  color: var(--atlas-silver) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(212, 212, 212, .45) !important;
  opacity: 1 !important;
}

small,
.small-text,
.employee-header p,
.announcement-header p,
.topbar-user,
.notification-item span,
.notification-empty,
.last-updated {
  font-size: 13px !important;
  font-weight: 300 !important;
  letter-spacing: .2px !important;
  color: rgba(212, 212, 212, .65) !important;
  -webkit-text-fill-color: rgba(212, 212, 212, .65) !important;
}

.login-box,
.widget,
.chat-panel,
.announcement-card,
.notification-panel,
.employee-info-panel {
  padding: 24px !important;
  background: var(--atlas-graphite) !important;
  border: 1px solid var(--atlas-charcoal) !important;
  border-radius: 6px !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .28) !important;
  animation: atlasPanelIn var(--motion-panel) var(--ease-ui) both;
}

.chat-panel {
  padding: 0 !important;
}

th,
td,
.message-form,
.announcement-header {
  border-color: var(--atlas-steel) !important;
}

.landing-view .manager-dropdown-wrap {
  height: calc(100vh - 72px) !important;
  min-height: calc(100vh - 72px) !important;
  padding: 60px 24px 0 !important;
  box-sizing: border-box;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.manager-dropdown-shell {
  width: 480px;
  max-width: calc(100vw - 48px);
  padding: 16px;
  box-sizing: border-box;
  background: var(--atlas-graphite);
  border: 1px solid var(--atlas-steel);
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
  animation: none;
}

.landing-view .manager-dropdown-shell {
  animation: atlasDropdownOpen 220ms cubic-bezier(.22, .12, .18, 1) both;
}

.manager-dropdown-shell.is-opening {
  animation: atlasDropdownOpen 220ms cubic-bezier(.22, .12, .18, 1) both !important;
}

.manager-dropdown-shell.is-closing {
  animation: atlasDropdownClose 180ms cubic-bezier(.22, .12, .18, 1) both !important;
}

.manager-dropdown {
  width: 100% !important;
  height: 48px !important;
  padding: 0 16px !important;
  color: var(--atlas-silver) !important;
  background: var(--atlas-black) !important;
  border: 1px solid var(--atlas-steel) !important;
  border-radius: 8px !important;
  font-size: 17px !important;
  box-shadow: none !important;
  transition: border-color var(--motion-hover) var(--ease-dropdown), background var(--motion-medium) var(--ease-dropdown), transform var(--motion-medium) var(--ease-dropdown), opacity var(--motion-medium) var(--ease-dropdown) !important;
}

.manager-dropdown:hover,
.manager-dropdown:focus {
  color: var(--atlas-silver) !important;
  background: var(--atlas-black) !important;
  border-color: var(--atlas-warm) !important;
  box-shadow: none !important;
  transform: none !important;
}

.manager-dropdown option {
  width: 480px;
  min-height: 48px;
  color: var(--atlas-silver) !important;
  background: var(--atlas-black) !important;
  border-left: 2px solid transparent;
  transition: background 140ms ease-in-out, border-color 140ms ease-in-out;
}

.manager-dropdown option:hover,
.manager-dropdown option:checked {
  color: var(--atlas-silver) !important;
  background: var(--atlas-steel) !important;
  border-left: 2px solid var(--atlas-warm);
}

.landing-view #content {
  display: none;
}

.landing-view .notification-panel {
  margin: 32px auto 36px !important;
}

.landing-view .notification-list {
  display: grid;
  gap: 32px !important;
}

.announcement-card .recipient-list,
#content .recipient-list {
  display: grid;
  gap: 12px;
}

.announcement-card .recipient-option,
#content .recipient-option {
  padding: 12px 16px;
  box-sizing: border-box;
  background: var(--atlas-graphite) !important;
  border: 1px solid var(--atlas-charcoal) !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .2) !important;
}

.messages {
  gap: 12px !important;
  scroll-behavior: smooth;
  scrollbar-color: var(--atlas-graphite) var(--atlas-black);
  scrollbar-width: thin;
}

.message {
  border-radius: 14px !important;
  animation: atlasBubbleIn var(--motion-bubble) var(--ease-bubble) both;
}

.manager-message,
.employee-message {
  align-self: flex-end !important;
  color: var(--atlas-silver) !important;
  background: var(--atlas-steel) !important;
  border-bottom-right-radius: 4px !important;
}

.system-message,
.atlas-message,
.employee-inbound-message {
  align-self: flex-start !important;
  color: var(--atlas-silver) !important;
  background: var(--atlas-graphite) !important;
  border: 1px solid var(--atlas-steel) !important;
  border-bottom-left-radius: 4px !important;
}

.employee-header {
  position: sticky !important;
  top: 0;
  z-index: 5;
  background: var(--atlas-navy) !important;
}

.message-form {
  position: sticky !important;
  bottom: 0;
  z-index: 5;
  background: var(--atlas-charcoal) !important;
}

*::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

*::-webkit-scrollbar-track {
  background: var(--atlas-black) !important;
  border-radius: 6px;
}

*::-webkit-scrollbar-thumb {
  background: var(--atlas-graphite) !important;
  border: 1px solid var(--atlas-steel) !important;
  border-radius: 6px !important;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--atlas-steel) !important;
  border-color: var(--atlas-warm) !important;
}

@keyframes atlasDropdownOpen {
  from { opacity: 0; transform: translateY(-4px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes atlasDropdownClose {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-2px) scale(.98); }
}

@keyframes atlasPanelIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes atlasBubbleIn {
  from { opacity: 0; transform: translateY(4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Atlas loading indicator */
.atlas-loader,
#content.is-refreshing::after {
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border: 2px solid #1A1A1A;
  border-top-color: #CFAE78;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms cubic-bezier(.25, .1, .25, 1), visibility 0s linear 180ms;
}

.atlas-loader.is-visible,
#content.is-refreshing::after,
.is-loading .send-button-loader {
  opacity: 1;
  visibility: visible;
  animation: atlasLoaderRotate 600ms cubic-bezier(.25, .1, .25, 1) infinite;
  transition: opacity 180ms cubic-bezier(.25, .1, .25, 1), visibility 0s linear 0s;
}

.manager-dropdown-wrap {
  position: relative;
}

.landing-loader {
  position: absolute;
  top: calc(50% + 66px);
  left: 50%;
  translate: -50% 0;
}

.last-updated-status {
  position: absolute;
  right: 24px;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateY(-50%);
}

.last-updated-status .last-updated {
  position: static !important;
  transform: none !important;
}

.sync-loader {
  flex: 0 0 auto;
}

#content {
  position: relative;
}

#content::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
}

button {
  position: relative;
}

.button-label {
  opacity: 1;
  transition: opacity 180ms cubic-bezier(.25, .1, .25, 1);
}

.send-button-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.is-loading .button-label {
  opacity: 0;
}

@keyframes atlasLoaderRotate {
  to { transform: rotate(360deg); }
}
:root {
  --atlas-black: #0D0D0D;
  --atlas-navy: #0A1220;
  --atlas-silver: #D4D4D4;
  --atlas-graphite: #1A1A1A;
  --atlas-steel: #4A5A6A;
  --atlas-warm: #CFAE78;
  --atlas-charcoal: #111111;
  --atlas-panel: rgba(17, 17, 17, .94);
  --atlas-panel-hover: rgba(26, 26, 26, .97);
  --atlas-muted: #8e98a2;
  --atlas-line: rgba(212, 212, 212, .16);
  --atlas-blue: #4A5A6A;
  --atlas-blue-bright: #93a2b0;
  --atlas-glow: 0 12px 34px rgba(0, 0, 0, .38), 0 0 0 1px rgba(207, 174, 120, .12);
}

body,
.split-layout,
.dashboard-layout,
.atlas-home {
  background:
    radial-gradient(circle at 50% -18%, rgba(74, 90, 106, .18), transparent 38%),
    radial-gradient(circle at 88% 92%, rgba(207, 174, 120, .055), transparent 28%),
    linear-gradient(145deg, var(--atlas-black) 0%, var(--atlas-charcoal) 48%, var(--atlas-navy) 100%);
  color: var(--atlas-silver);
  font-family: Inter, "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
}

body > h1 {
  color: var(--atlas-silver);
  background: linear-gradient(180deg, rgba(26, 26, 26, .92), rgba(13, 13, 13, .82));
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--atlas-silver);
  text-shadow: 0 3px 12px rgba(0, 0, 0, .5);
}

#content h2,
.announcement-header h1,
.home-title,
.employee-header h1,
.login-box h2 {
  color: var(--atlas-silver);
  background: linear-gradient(180deg, #f0f0f0 0%, var(--atlas-silver) 50%, #8793a0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .5);
}

.left-panel,
.right-panel,
.sidebar,
.topbar {
  background: linear-gradient(180deg, rgba(17, 17, 17, .98), rgba(10, 18, 32, .98));
}

.login-box,
.widget,
.chat-panel,
.announcement-card,
.notification-panel {
  background: linear-gradient(145deg, rgba(26, 26, 26, .95), rgba(13, 13, 13, .97));
  border-color: var(--atlas-line);
  border-radius: 4px;
  box-shadow: 0 22px 52px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.widget:hover,
.login-box:hover,
.announcement-card:hover,
.chat-panel:hover {
  border-color: rgba(207, 174, 120, .32);
  box-shadow: 0 24px 58px rgba(0, 0, 0, .48), 0 0 0 1px rgba(207, 174, 120, .08);
}

input,
textarea,
select,
.home-dropdown,
.manager-dropdown,
.employee-info-form select,
.report-search {
  color: var(--atlas-silver);
  background: rgba(13, 13, 13, .9);
  border-color: rgba(74, 90, 106, .7);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

input:hover,
textarea:hover,
select:hover,
.home-dropdown:hover,
.manager-dropdown:hover,
.report-search:hover {
  border-color: rgba(212, 212, 212, .42);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}

input:focus,
textarea:focus,
select:focus,
.home-dropdown:focus,
.manager-dropdown:focus,
.employee-info-form select:focus,
.report-search:focus {
  border-color: var(--atlas-warm);
  box-shadow: 0 0 0 2px rgba(207, 174, 120, .12), 0 10px 24px rgba(0, 0, 0, .26);
}

button,
.employee-message,
.toast {
  color: #f0f0f0;
  background: linear-gradient(180deg, var(--atlas-steel), #303b46);
  border-color: rgba(212, 212, 212, .18);
  border-radius: 3px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .1);
}

button:hover {
  color: #fff;
  background: linear-gradient(180deg, #596b7c, #394652);
  border-color: rgba(207, 174, 120, .45);
  box-shadow: 0 12px 25px rgba(0, 0, 0, .36), 0 0 0 1px rgba(207, 174, 120, .08);
}

.atlas-message,
.notification-item {
  color: var(--atlas-silver);
  background: rgba(17, 17, 17, .92);
  border-color: var(--atlas-line);
}

.manager-dropdown option,
.home-dropdown option {
  color: var(--atlas-silver);
  background: var(--atlas-charcoal);
}

table {
  background: rgba(13, 13, 13, .82);
  border: 1px solid rgba(212, 212, 212, .1);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .25);
}

th {
  color: var(--atlas-warm);
  background: linear-gradient(180deg, #202020, #171717);
}

tr:hover,
.recipient-option:hover,
.notification-item:hover {
  background: rgba(207, 174, 120, .045);
}

.notification-item {
  animation: atlasNotificationIn 240ms cubic-bezier(.25, .1, .25, 1) both !important;
}

.notification-item.is-dismissing {
  pointer-events: none;
  animation: atlasNotificationOut 180ms cubic-bezier(.25, .1, .25, 1) both !important;
}

@keyframes atlasNotificationIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes atlasNotificationOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-4px); }
}

.notification-count,
.announcement-error,
.employee-info-status,
.error {
  color: var(--atlas-warm);
}