:root {
  --navy: #0f2942;
  --navy-light: #1c3f60;
  --accent: #c8952c;
  --bg: #f4f6f8;
  --card: #ffffff;
  --border: #e1e5ea;
  --text: #1f2937;
  --text-muted: #6b7280;
  --green: #1e8e3e;
  --red: #c62828;
  --amber: #b8860b;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); }
.hidden { display: none !important; }

/* "Option D" (classic bordered card), picked 2026-08-27 from the 4-option preview, with the
   page background set to solid navy per chandana's request. A dark page changes what "suitable"
   means for the card sitting on it: kept the card itself white so it still reads clearly
   against the navy (a tinted/navy card on a navy page would have no visible edge at all), gave
   it a stronger shadow than the previous light-background version needed (a light box-shadow is
   nearly invisible on a dark page - depth here comes mostly from the card's own contrast against
   the background, with just enough shadow to lift it slightly), and switched the icon badge to
   the gold accent color instead of navy-on-white so it doesn't visually disappear into the page
   behind the card. */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--navy); }
.login-card { background: var(--card); width: 300px; max-width: 90vw; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 34px 30px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
.login-logo { display: block; max-width: 150px; width: 100%; height: auto; margin: 0 auto 16px; }
.login-icon-badge { width: 44px; height: 44px; border-radius: 8px; background: var(--accent); color: var(--navy); align-items: center; justify-content: center; font-weight: 700; font-size: 15px; margin: 0 auto 16px; }
.login-brand { margin: 0; font-size: 16px; font-weight: 700; color: var(--navy); }
.login-card .subtitle { margin: 6px 0 24px; color: var(--text-muted); font-size: 12.5px; }
.logo-wrap { text-align: center; margin-bottom: 16px; }
.logo-wrap .brand-logo { max-width: 140px; width: 100%; height: auto; }
.fallback-title { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: var(--text); display: none; }
.signin-button-wrap { display: flex; justify-content: center; }
.login-loading { margin-top: 14px; font-size: .85em; color: var(--text-muted); }
.login-divider { border: none; border-top: 1px solid var(--border); margin: 22px 0 14px; }
.login-footnote { margin: 0; font-size: 11px; color: var(--text-muted); }
.login-card label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
.login-card input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; }
.login-card button { margin-top: 20px; width: 100%; padding: 11px; background: var(--navy); color: white; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; }
.login-card button:hover { background: var(--navy-light); }
.error-text { color: var(--red); font-size: 13px; margin-top: 10px; min-height: 16px; }

.app { display: flex; min-height: 100vh; }
.sidebar { width: 230px; background: var(--navy); color: white; display: flex; flex-direction: column; padding: 20px 0; flex-shrink: 0; }
.brand { padding: 0 20px 20px; border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 10px; }
.brand span { display: block; font-size: 12px; font-weight: 400; color: var(--accent); }
.brand .sidebar-logo { display: block; max-width: 100%; height: auto; background: #ffffff; border-radius: 8px; padding: 10px 14px; }
.brand .sidebar-fallback { font-size: 18px; font-weight: 700; color: white; display: none; }
#nav { flex: 1; }
#nav a { display: block; padding: 11px 20px; color: rgba(255,255,255,0.8); text-decoration: none; font-size: 14px; cursor: pointer; border-left: 3px solid transparent; }
#nav a:hover { background: rgba(255,255,255,0.06); color: white; }
#nav a.active { background: rgba(255,255,255,0.1); color: white; border-left-color: var(--accent); font-weight: 600; }
.sidebar-footer { padding: 16px 20px 0; border-top: 1px solid rgba(255,255,255,0.12); margin-top: 10px; }
#user-badge { font-size: 13px; color: rgba(255,255,255,0.85); margin-bottom: 8px; }
#user-badge .role-tag { display: inline-block; background: var(--accent); color: var(--navy); font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; margin-top: 4px; text-transform: uppercase; }
.link-btn { background: none; border: none; color: rgba(255,255,255,0.7); cursor: pointer; font-size: 13px; padding: 0; }
.link-btn:hover { color: white; text-decoration: underline; }

/* Hamburger toggle + dimmed backdrop for the off-canvas sidebar - both stay hidden (see
   @media rules further down) until the window is narrow enough that the sidebar can't stay
   permanently visible. */
.mobile-menu-btn {
  display: none; position: fixed; top: 14px; left: 14px; z-index: 60;
  width: 40px; height: 40px; border-radius: 8px; border: none;
  background: var(--navy); color: white; font-size: 20px; line-height: 1;
  align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(15,41,66,0.45); z-index: 40;
}
.sidebar-overlay.open { display: block; }

/* Responsive: the app is used across everything from a small laptop window to a wide external
   monitor, so nothing below is a fixed pixel layout past this point - the content column is
   fluid with a sensible max-width (so lines/tables don't stretch unreadably wide on a big
   monitor), padding scales smoothly with clamp() instead of jumping at breakpoints, and only
   the sidebar's own on/off-canvas behavior needs real breakpoints (it can't shrink forever). */
.content { flex: 1; min-width: 0; padding: clamp(16px, 3vw, 32px) clamp(16px, 4vw, 40px); overflow-y: auto; overflow-x: hidden; }
#view { max-width: 1500px; margin: 0 auto; }
h2.page-title { margin: 0 0 4px; color: var(--navy); font-size: clamp(19px, 2.2vw, 22px); }
.page-subtitle { color: var(--text-muted); font-size: 14px; margin: 0 0 24px; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 20px 24px; margin-bottom: 20px; max-width: 100%; overflow-x: auto; }
.card h3 { margin-top: 0; font-size: 16px; color: var(--navy); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px; }
.stat-card .label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.stat-card .value { font-size: 26px; font-weight: 700; color: var(--navy); margin-top: 6px; }

table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; }
tr:hover td { background: #fafbfc; }

.btn { display: inline-block; padding: 8px 16px; border-radius: 6px; border: none; background: var(--navy); color: white; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn:hover { background: var(--navy-light); }
.btn.secondary { background: white; color: var(--navy); border: 1px solid var(--border); }
.btn.danger { background: var(--red); }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.badge.pending, .badge.assigned { background: #fff4e0; color: var(--amber); }
.badge.approved, .badge.completed, .badge.finalized { background: #e6f4ea; color: var(--green); }
.badge.rejected { background: #fdecea; color: var(--red); }
.badge.draft, .badge.awaiting_self_assessment, .badge.awaiting_manager_review, .badge.awaiting_hr_signoff { background: #eef2f7; color: var(--navy); }
.badge.cancelled { background: #f1f1f1; color: var(--text-muted); }

.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.form-row input, .form-row select, .form-row textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; font-family: inherit; }
.form-row textarea { min-height: 70px; resize: vertical; }
.form-inline { display: flex; gap: 12px; flex-wrap: wrap; }
.form-inline > div { flex: 1; min-width: 160px; }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tabs button { background: none; border: none; padding: 10px 16px; font-size: 14px; cursor: pointer; color: var(--text-muted); border-bottom: 2px solid transparent; }
.tabs button.active { color: var(--navy); font-weight: 600; border-bottom-color: var(--accent); }

.org-tree { list-style: none; padding-left: 24px; }
.org-tree.root { padding-left: 0; }
.org-node { margin: 6px 0; }
.org-box { display: inline-block; background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 6px; padding: 8px 14px; font-size: 13px; }
.org-box .name { font-weight: 700; color: var(--navy); }
.org-box .role { color: var(--text-muted); font-size: 12px; }

/* Company chart (org_chart_nodes) - added 2026-09-01, redesigned pictorial 2026-09-02:
   each box is now a small "people card" (avatar + name) instead of a plain colored rectangle -
   an initials avatar for a real person (leadership/manager/team_member), a pictogram avatar for
   a department or external vendor box. Per-type color lives on the avatar + a thin top accent
   bar on the card now, rather than filling the whole box. */
.orgchart-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; color: var(--text-muted); }
.orgchart-toolbar .zoom-btn {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--card); color: var(--navy); font-size: 15px; font-weight: 700;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.orgchart-toolbar .zoom-btn:hover { background: var(--bg); }
.orgchart-toolbar .zoom-level { min-width: 40px; text-align: center; font-weight: 600; color: var(--navy); }
.orgchart-toolbar .zoom-reset { border: none; background: none; color: var(--navy); text-decoration: underline; cursor: pointer; font-size: 12px; padding: 0; }

.orgchart-wrap { overflow: auto; padding: 20px 16px; }
.orgchart-zoom { transform-origin: top left; }

/* The actual connecting lines (added 2026-09-02, see redrawOrgChartConnectors() in app.js) are
   drawn into #orgchart-lines/#orgchart-labels, both absolutely positioned to cover the whole
   tree and measured against the boxes' real laid-out positions - .orgchart-tree just needs to
   be the positioning root for that overlay, and the boxes need to paint above it. */
.orgchart-tree { position: relative; }
.orgchart-lines { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
.orgchart-line { fill: none; stroke: var(--border); stroke-width: 1.5px; }
.orgchart-labels { position: absolute; inset: 0; pointer-events: none; }
.orgchart-labels .orgchart-link-badge { position: absolute; transform: translate(-50%, -50%); background: var(--card); }

.orgchart-row { position: relative; z-index: 1; display: flex; gap: 16px; align-items: flex-start; justify-content: center; }
.orgchart-row.root { justify-content: flex-start; }
.orgchart-col { display: flex; flex-direction: column; align-items: center; gap: 30px; }

.orgchart-box {
  position: relative;
  min-width: 122px; max-width: 152px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px 9px;
  text-align: center;
  font-size: 11px;
  box-shadow: 0 1px 2px rgba(15,41,66,0.05);
  transition: box-shadow .15s ease, transform .15s ease;
}
.orgchart-box:hover { box-shadow: 0 6px 16px rgba(15,41,66,0.12); transform: translateY(-2px); }
.orgchart-box::before {
  content: ''; position: absolute; top: 0; left: 10px; right: 10px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--orgchart-accent, var(--border));
}
.orgchart-box.type-leadership   { --orgchart-accent: var(--navy); }
.orgchart-box.type-department   { --orgchart-accent: var(--navy-light); }
.orgchart-box.type-manager      { --orgchart-accent: #4f6d92; }
.orgchart-box.type-team_member  { --orgchart-accent: var(--accent); }
.orgchart-box.type-vendor       { --orgchart-accent: var(--text-muted); border-style: dashed; }

.orgchart-avatar {
  position: relative;
  width: 36px; height: 36px; margin: 0 auto 7px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; color: white;
  background: var(--orgchart-accent, var(--text-muted));
}
.orgchart-avatar svg { width: 17px; height: 17px; }
.orgchart-box.type-vendor .orgchart-avatar { background: var(--bg); color: var(--text-muted); border: 2px dashed var(--border); }
.orgchart-avatar-badge {
  position: absolute; top: -2px; right: -2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); color: var(--navy);
  border: 2px solid var(--card);
  display: flex; align-items: center; justify-content: center;
}
.orgchart-avatar-badge svg { width: 7px; height: 7px; }

.orgchart-box .name { font-weight: 700; font-size: 11.5px; color: var(--navy); }
.orgchart-box .subtitle { margin-top: 2px; color: var(--text-muted); font-size: 10.5px; }
.orgchart-box .location { margin-top: 1px; font-style: italic; color: var(--text-muted); opacity: 0.8; font-size: 10px; }
.orgchart-type-badge {
  display: inline-block; margin-top: 6px;
  padding: 1px 7px; border-radius: 999px;
  font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--orgchart-accent, var(--text-muted));
  background: var(--bg); /* fallback for browsers without color-mix() support */
  background: color-mix(in srgb, var(--orgchart-accent, var(--text-muted)) 14%, transparent);
}

.orgchart-link-badge { border: 1px solid var(--navy); border-radius: 4px; padding: 3px 7px; font-size: 9px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.orgchart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 12px; color: var(--text-muted); }
.orgchart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.orgchart-legend-item .swatch { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 1px solid var(--border); }
.orgchart-legend-item .swatch.type-leadership { background: var(--navy); }
.orgchart-legend-item .swatch.type-department { background: var(--navy-light); }
.orgchart-legend-item .swatch.type-manager { background: #4f6d92; }
.orgchart-legend-item .swatch.type-team_member { background: var(--accent); }
.orgchart-legend-item .swatch.type-vendor { background: var(--bg); border-style: dashed; }

.masked { color: var(--text-muted); font-style: italic; }
.mono { font-family: 'SF Mono', Consolas, monospace; font-size: 13px; word-break: break-word; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.kra-block { border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 14px; }
.kra-block .kra-title { font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.kra-block .kra-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.score-pill { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: white; font-weight: 700; font-size: 13px; }
.empty-state { color: var(--text-muted); font-size: 14px; padding: 20px 0; text-align: center; }
.toast { position: fixed; bottom: 24px; right: 24px; background: var(--navy); color: white; padding: 12px 20px; border-radius: 8px; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); z-index: 100; max-width: calc(100vw - 48px); }
.toast.error { background: var(--red); }

/* ============================================================================
   Responsive breakpoints - added 2026-09-02 (chandana: make the app responsive
   across different monitor/window sizes).
   Everything above already flexes fluidly (clamp() padding, #view's centered
   max-width, auto-fit grids, .card's own horizontal scroll for wide tables) -
   the sidebar is the one piece that can't just shrink forever, so it switches
   from a permanent column to an off-canvas panel once the window gets narrow
   enough that 230px for it plus real content stops being workable (roughly
   tablet-and-below). app.js's setupMobileNav() wires the hamburger button/
   overlay/close behavior that this CSS shows and hides.
   ============================================================================ */

/* Smaller desktop monitor / laptop window: sidebar stays put but a bit narrower,
   so more of the window is left for tables/forms. */
@media (max-width: 1180px) {
  .sidebar { width: 195px; }
  #nav a { padding: 10px 16px; font-size: 13.5px; }
}

/* Tablet and narrow windows: sidebar becomes an off-canvas panel opened by the
   hamburger button, content takes the full window width, two-column layouts
   already collapse on their own via auto-fit above this point. */
@media (max-width: 860px) {
  .mobile-menu-btn { display: flex; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
    width: 250px; max-width: 82vw;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.25);
  }
  .sidebar.open { transform: translateX(0); }
  .content { padding-top: 68px; }
  .grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* Phone-sized windows: tighten everything further and let side-by-side bits
   (form rows, stat cards, tabs) go fully single-column where that's still
   what's needed beyond the auto-fit/wrap rules above. */
@media (max-width: 520px) {
  .content { padding-left: 14px; padding-right: 14px; }
  .card { padding: 16px; }
  .grid { grid-template-columns: 1fr; }
  .form-inline { flex-direction: column; gap: 0; }
  .form-inline > div { min-width: 0; }
  table { min-width: 0; }
  .stat-card .value { font-size: 22px; }
  .toast { left: 14px; right: 14px; bottom: 14px; max-width: none; }
}

/* Very large / ultra-wide external monitor: let the dashboard stat grid and
   the org chart breathe a little more instead of just leaving empty margins
   past #view's max-width. */
@media (min-width: 1800px) {
  #view { max-width: 1700px; }
  .grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}