/* iMET HR visual layer. Loaded after Horilla's own stylesheets.
   Ink #000413, red #D54042, surface #F6F6F8, line #EBEBEF.
   Light mode only: Horilla's dark mode is left as it ships. */

:root {
  --imet-ink: #000413;
  --imet-ink-2: #3F4150;
  --imet-red: #D54042;
  --imet-surface: #F6F6F8;
  --imet-line: #EBEBEF;
}

/* ---------- Page ---------- */
body:not(.dark) { background: var(--imet-surface); color: var(--imet-ink); }
body:not(.dark) #ohMainContent { background: var(--imet-surface); min-height: 100vh; }
body:not(.dark) h1, body:not(.dark) h2, body:not(.dark) h3 { color: var(--imet-ink); letter-spacing: -0.01em; }

/* ---------- Sidebar: light, as in the iMET People design ---------- */
body:not(.dark) #sidebar { background: #fff !important; border-right: 1px solid var(--imet-line) !important; }
body:not(.dark) #sidebar .sideboxmain { background-color: transparent !important; box-shadow: none !important; border-radius: 10px; position: relative; }
body:not(.dark) #sidebar .sideboxmain .oh-sidebar-label { color: var(--imet-ink-2) !important; font-weight: 500; }
body:not(.dark) #sidebar nav .sideboxmain img,
body:not(.dark) #sidebar nav .sideboxmain svg:not(.sidebar-chevron) { filter: brightness(0) opacity(0.62) !important; }
body:not(.dark) #sidebar .sideboxmain:hover:not(.sidebox-current),
body:not(.dark) #sidebar .sideboxmain.sidebox-active:not(.sidebox-current) { background-color: var(--imet-surface) !important; }
body:not(.dark) #sidebar .sideboxmain:hover:not(.sidebox-current) .oh-sidebar-label,
body:not(.dark) #sidebar .sideboxmain.sidebox-active:not(.sidebox-current) .oh-sidebar-label { color: var(--imet-ink) !important; }
/* current page: soft grey pill, ink text, red dot */
body:not(.dark) #sidebar .sideboxmain.sidebox-current { background-color: #EFEFF3 !important; }
body:not(.dark) #sidebar .sideboxmain.sidebox-current .oh-sidebar-label { color: var(--imet-ink) !important; font-weight: 600; }
body:not(.dark) #sidebar nav .sideboxmain.sidebox-current img,
body:not(.dark) #sidebar nav .sideboxmain.sidebox-current svg:not(.sidebar-chevron) { filter: brightness(0) !important; }
body:not(.dark) #sidebar .sideboxmain.sidebox-current .sidebar-chevron { color: var(--imet-ink) !important; }
body:not(.dark) #sidebar a.sideboxmain.sidebox-current::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--imet-red); }
body:not(.dark) #sidebar nav .oh-sidebar-active-link { background-color: #EFEFF3 !important; color: var(--imet-ink) !important; box-shadow: none !important; font-weight: 600; }
body:not(.dark) #sidebar nav .sidebar-subnav-link:hover { background-color: var(--imet-surface) !important; color: var(--imet-ink) !important; }
body:not(.dark) #sidebar .sidebar-version { color: #a5a6b0 !important; }
.imet-nav-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #9a9ba6; padding: 14px 12px 4px; margin: 0; }
#sidebar .imet-sidebar-brand + div { display: none !important; }
.imet-sidebar-brand { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.imet-sidebar-brand img { height: 20px; width: auto; }
.imet-sidebar-brand span { font-size: 13px; font-weight: 500; color: var(--imet-ink-2); }
body.dark .imet-sidebar-brand img { filter: invert(1) hue-rotate(180deg); }
body.dark .imet-sidebar-brand span { color: rgba(255, 255, 255, 0.6); }

/* ---------- Top bar ---------- */
body:not(.dark) #mainHeader { border-bottom: 1px solid var(--imet-line) !important; box-shadow: 0 1px 0 rgba(0, 4, 19, 0.02); }
body:not(.dark) #mainHeader button.rounded-full.bg-primary-100 {
  width: 40px; height: 40px; background: var(--imet-surface) !important; color: var(--imet-ink-2) !important; border: 1px solid var(--imet-line);
}
body:not(.dark) #mainHeader button.rounded-full.bg-primary-100:hover { background: var(--imet-ink) !important; color: #fff !important; border-color: var(--imet-ink); }
body:not(.dark) #mainHeader .breadcrumb a, body:not(.dark) #mainHeader .breadcrumb li { color: var(--imet-ink-2); }

/* ---------- Surfaces ---------- */
body:not(.dark) .shadow-card,
body:not(.dark) .md-kpi-card,
body:not(.dark) .oh-card {
  box-shadow: 0 1px 2px rgba(0, 4, 19, 0.04), 0 8px 24px -16px rgba(0, 4, 19, 0.18) !important;
  border: 1px solid var(--imet-line);
  border-radius: 16px;
}
body:not(.dark) .md-kpi-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
body:not(.dark) .md-kpi-card:hover { transform: translateY(-2px); }

/* KPI tiles sit on one row when there is room */
@media (min-width: 1200px) { .md-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; } }

/* ---------- Home page ---------- */
.imet-card { background: #fff; border: 1px solid var(--imet-line); border-radius: 16px; padding: 20px; box-shadow: 0 1px 2px rgba(0, 4, 19, 0.04); }
.imet-card--row { display: flex; align-items: center; gap: 14px; }
.imet-card__title { font-size: 14px; font-weight: 600; color: var(--imet-ink); margin: 0; }
.imet-big { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--imet-ink); margin: 0; }
.imet-big span { font-size: 13px; font-weight: 500; letter-spacing: 0; color: #7b7d8a; }
.imet-bar { height: 6px; border-radius: 999px; background: #ECECF0; overflow: hidden; margin-top: 12px; }
.imet-bar--thin { height: 5px; margin-top: 6px; }
.imet-bar i { display: block; height: 100%; border-radius: 999px; background: var(--imet-ink); }
.imet-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: #EFEFF3; color: var(--imet-ink-2); white-space: nowrap; }
.imet-pill--green { background: #E6F4EA; color: #1E6B34; }
.imet-pill--amber { background: #FBF0D3; color: #7A5200; }
.imet-pill--blue { background: #E4ECFB; color: #23479A; }
.imet-link { display: inline-block; font-size: 13px; font-weight: 600; color: var(--imet-ink); }
.imet-link:hover { color: var(--imet-red); }
.imet-btn { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.imet-btn--red { background: var(--imet-red); color: #fff; }
.imet-btn--red:hover { background: #BC3537; color: #fff; }
.imet-action { display: flex; align-items: center; gap: 12px; border: 1px solid var(--imet-line); border-radius: 12px; padding: 14px; font-size: 14px; font-weight: 600; color: var(--imet-ink); transition: border-color 0.15s ease, background 0.15s ease; }
.imet-action:hover { border-color: var(--imet-ink); background: var(--imet-surface); }
.imet-action span { width: 34px; height: 34px; border-radius: 50%; background: var(--imet-surface); display: grid; place-items: center; font-size: 15px; flex: none; }
.imet-action--stack { flex-direction: column; align-items: flex-start; gap: 4px; }
.imet-action small { font-size: 11.5px; font-weight: 500; color: #7b7d8a; }
.imet-coming { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.imet-coming + .imet-coming { border-top: 1px solid var(--imet-line); }
.imet-date { width: 40px; flex: none; text-align: center; background: var(--imet-surface); border-radius: 10px; padding: 5px 0; font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; color: #7b7d8a; line-height: 1.2; }
.imet-date b { display: block; font-size: 15px; letter-spacing: 0; color: var(--imet-ink); }
.imet-count { width: 30px; height: 30px; border-radius: 50%; background: var(--imet-red); color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; flex: none; }
body.dark .imet-card, body.dark .imet-action { background: #1b1b1b; border-color: #333; color: #e5e5e5; }
body.dark .imet-big, body.dark .imet-card__title, body.dark .imet-link, body.dark .imet-action, body.dark .imet-date b { color: #f1f1f1; }
body.dark .imet-bar { background: #333; } body.dark .imet-bar i { background: #f1f1f1; }
body.dark .imet-date, body.dark .imet-action span { background: #2a2a2a; }

/* sign-in clocks */
.imet-clocks { display: flex; gap: 10px; margin-top: 26px; position: relative; z-index: 1; }
.imet-clocks span { border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; color: rgba(255, 255, 255, 0.7); }
.imet-clocks b { color: #fff; font-weight: 600; margin-left: 6px; font-variant-numeric: tabular-nums; }

/* ---------- Footer ---------- */
.imet-footer { margin: 40px 0 8px; padding-top: 18px; border-top: 1px solid var(--imet-line); text-align: center; font-size: 12.5px; line-height: 1.7; color: #7b7d8a; }
.imet-footer a { color: var(--imet-red); font-weight: 600; }
body.dark .imet-footer { border-top-color: rgba(255, 255, 255, 0.1); color: #9a9a9a; }

/* ---------- Sign-in ---------- */
body:has(.imet-auth-form) { background: var(--imet-surface) !important; }
.imet-auth-brand { position: fixed; top: 0; bottom: 0; left: 0; width: 51%; background: var(--imet-ink); color: #fff; padding: 56px 64px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.imet-auth-brand::after { content: ""; position: absolute; right: -140px; bottom: -140px; width: 420px; height: 420px; border-radius: 50%; background: var(--imet-red); }
.imet-auth-brand::before { content: ""; position: absolute; right: 150px; bottom: 190px; width: 120px; height: 120px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.16); }
.imet-auth-brand img { height: 40px; width: auto; align-self: flex-start; }
.imet-auth-brand h2 { color: #fff !important; font-size: 42px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; max-width: 12em; margin: 0 0 16px; }
.imet-auth-brand p { color: rgba(255, 255, 255, 0.68); font-size: 16px; line-height: 1.6; max-width: 30em; margin: 0; }
.imet-auth-brand ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; position: relative; z-index: 1; }
.imet-auth-brand li { color: rgba(255, 255, 255, 0.86); font-size: 14.5px; display: flex; align-items: center; gap: 10px; }
.imet-auth-brand li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--imet-red); flex: none; }
.imet-auth-brand small { color: rgba(255, 255, 255, 0.4); font-size: 12px; position: relative; z-index: 1; }
.imet-auth-form { margin-left: 51%; width: 49% !important; min-height: 100vh; height: auto !important; padding: 40px 24px; }
.imet-auth-form > div { box-shadow: none !important; background: transparent !important; width: 100% !important; max-width: 400px; padding: 0 !important; }
.imet-auth-form > div > img { display: none; }
.imet-auth-form h1 { text-align: left !important; font-size: 28px !important; letter-spacing: -0.02em; margin-bottom: 6px !important; }
.imet-auth-form h1 + p { text-align: left !important; color: #6b6d7a; margin-bottom: 28px !important; }
.imet-auth-form input[type="text"], .imet-auth-form input[type="password"], .imet-auth-form input[type="email"] { height: 48px; border-radius: 10px !important; border-color: #C8C8CF !important; background: #fff; }
.imet-auth-form input:focus { border-color: var(--imet-ink) !important; box-shadow: 0 0 0 3px rgba(0, 4, 19, 0.08) !important; outline: none !important; }
.imet-auth-form button[type="submit"] { height: 48px; border-radius: 999px !important; font-weight: 600; background: var(--imet-red) !important; }
.imet-auth-form button[type="submit"]:hover { background: #BC3537 !important; }
.imet-auth-form a { color: var(--imet-red) !important; font-weight: 600; }
@media (max-width: 900px) {
  .imet-auth-brand { position: static; width: 100%; padding: 28px 24px; }
  .imet-auth-brand h2 { font-size: 26px; }
  .imet-auth-brand ul, .imet-auth-brand::before { display: none; }
  .imet-auth-brand::after { width: 180px; height: 180px; right: -70px; bottom: -90px; }
  .imet-auth-form { margin-left: 0; width: 100% !important; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { body:not(.dark) .md-kpi-card { transition: none; } }