/* Supplements for markup the source rendered with inline styles. */
.topbar-title {
  font-size: 16px; font-weight: 800; color: #0e3e1f; line-height: 1.2;
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.topbar-subtitle { font-size: 12px; color: #6b7280; margin-top: 2px; }
.topbar-clock {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  font-size: 12px; color: #475569; line-height: 1.4; min-width: 0;
}
.topbar-clock .clock-greg {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #0e3e1f;
}
.topbar-clock .clock-row {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 2px;
}
.topbar-clock .clock-time {
  display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: #165c2d;
}
.sidebar-logout { margin-top: auto; padding: 8px 10px 14px; }
.nav-logout {
  width: 100%; background: transparent; border: 0; cursor: pointer;
  font: inherit; color: #b42318; text-align: start;
}
.nav-logout:hover { background: #fef3f2; }
.flash-stack { display: grid; gap: 8px; margin-bottom: 14px; }
.flash {
  padding: 10px 14px; border-radius: 8px; font-weight: 600; font-size: 13px;
  border: 1px solid var(--border-light); background: var(--bg-secondary);
}
.flash-success { background: #e8f5ec; border-color: #a5d6b1; color: #0e3e1f; }
.flash-error, .flash-danger { background: #fef3f2; border-color: #fda29b; color: #b42318; }
.flash-warning { background: #fffaeb; border-color: #fec84b; color: #b54708; }

/* Local font faces (vendored from the source build). */
@font-face {
  font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../media/9ff27b8a0a8f3dc0-s.p.170gfl_1xpie6.8189abd2eb7f.woff2") format("woff2");
}
@font-face {
  font-family: "Cairo"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../media/d41831e24743a3c1-s.p.02r-fjhi~6g_a.cec73543deed.woff2") format("woff2");
}
:root {
  --font-family-primary-loaded: "IBM Plex Sans Arabic";
  --font-family-heading-loaded: "Cairo";
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
* { box-sizing: border-box; }

body {
  font-family: var(--font-family-primary);
  background: var(--bg-secondary);
  color: var(--text-primary);
  margin: 0;
}