/* Presentation overlay for the preserved HM production application.
   Product: Excellia CRM. Customer workspace: HM Sarl.
   This file does not replace the application or alter its business behavior. */
@font-face {
  font-family: "Excellia Inter";
  src: url("/branding/inter.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  font-family: "Excellia Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #173747;
  background: #f5f7f5;
  --navy: #002c42;
  --blue: #0b3d5c;
  --blue-dark: #002c42;
  --blue-soft: #edf3f5;
  --ink: #173747;
  --muted: #536977;
  --faint: #6b7c84;
  --border: #c8d4d9;
  --border-soft: #dde5e8;
  --surface: #fff;
  --surface-muted: #f5f7f5;
}

body { background: #f5f7f5; }
button, input, select, textarea { font: inherit; }
.sidebar { background: #002c42; border-right-color: #183f51; }
.sidebar-brand { width: 190px; gap: 10px; }
.sidebar-brand img { width: 36px; height: 36px; border-radius: 5px; }
.sidebar-brand-label { display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 18px; font-weight: 650; letter-spacing: 0; }
.crm-sidebar-product { color: #b2c2ca; font-size: 10px; line-height: 13px; font-weight: 450; letter-spacing: 0; }
.sidebar-compact .crm-sidebar-product { display: none; }
.nav-section-label, .sidebar-user span { color: #b2c2ca; }
.nav-item { color: #dce6eb; }
.nav-item.active { box-shadow: inset 3px 0 #ec8a30; }
.nav-item:hover { background: rgba(255,255,255,.08); }
.nav-item.active:hover { background: #fff; color: var(--navy); }
.topbar { background: rgba(255,255,255,.98); }
.page-heading h1, .panel-header h2 { color: var(--navy); }
.kpi-orange { border-top-color: #ec8a30; }
.primary-button, .small-primary-button { background: var(--blue); border-color: var(--blue); }
.primary-button:hover, .small-primary-button:hover { background: var(--navy); border-color: var(--navy); }
.search-field:focus-within,
.management-field input:focus, .management-field select:focus, .management-field textarea:focus,
.group-form input:focus, .group-form textarea:focus,
.invoice-line input:focus, .invoice-line select:focus,
.inline-select:focus, .settings-form input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(11,61,92,.10);
}
.detail-chips span.blue { border-color: #c8d9e0; }

/* A compact sign-in, with the customer separated from the product identity. */
.login-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: auto 1fr auto;
  align-items: center;
  overflow: visible;
  background: #f5f7f5;
}
.login-brand-panel {
  position: static;
  min-height: 0;
  height: auto;
  padding: 40px 24px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--navy);
}
.login-brand-panel::after { display: none; }
.login-wordmark { width: auto; max-width: 100%; min-height: 48px; gap: 0; }
.login-wordmark > :not(.crm-login-symbol) { display: none; }
.crm-login-symbol { display: block; width: 48px; height: 48px; object-fit: contain; }
.login-message, .login-signal-row { display: none; }
.login-form-panel {
  min-height: 0;
  width: 100%;
  padding: 36px 24px;
  display: grid;
  place-items: center;
  background: transparent;
}
.login-form {
  width: min(440px,100%);
  max-width: 100%;
  position: static;
  margin: 0;
  padding: 32px;
  gap: 22px;
  border: 1px solid #d7e0e3;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0,44,66,.035);
}
.login-form-heading .section-kicker { display: none; }
.crm-workspace-badge { display: flex; align-items: center; gap: 9px; margin-bottom: 23px; color: var(--muted); font-size: 13px; line-height: 20px; font-weight: 500; }
.crm-workspace-badge img { display: block; width: 28px; height: 28px; object-fit: contain; border: 1px solid #edf0f1; border-radius: 5px; }
.login-form-heading h2 { margin: 0 0 10px; color: var(--navy); font-size: clamp(22px,2vw,26px); font-weight: 700; line-height: 1.25; letter-spacing: -.035em; }
.login-form-heading p { color: var(--muted); font-size: 13px; line-height: 1.65; }
.login-label { gap: 8px; }
.login-label > span:first-child { color: #344e5c; font-size: 12px; font-weight: 600; }
.login-input { height: 48px; padding: 0 13px; border: 1px solid #bdcbd2; border-radius: 6px; color: #667e89; transition: border-color .16s ease, box-shadow .16s ease; }
.login-input input { font-size: 15px; color: var(--ink); }
.login-input input::placeholder { color: #84949c; }
.login-input:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11,61,92,.10); }
.login-button { min-height: 48px; height: 48px; border: 1px solid var(--blue); border-radius: 6px; background: var(--blue); box-shadow: none; font-size: 14px; font-weight: 650; }
.login-button:hover { border-color: var(--navy); background: var(--navy); }
.login-footnote { display: none; }
.crm-product-attribution {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 8px 24px max(28px,env(safe-area-inset-bottom));
  color: #7c8386;
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
}
.crm-product-attribution img { display: block; width: 60px; height: 15.25px; object-fit: contain; transform: none; }
.sidebar-footer .crm-product-attribution { padding: 18px 0 4px; color: #a9b3b8; font-size: 10px; line-height: 15px; }
.sidebar-footer .crm-product-attribution img { opacity: .8; }
.sidebar-compact .sidebar-footer .crm-product-attribution { display: none; }
.login-shell :is(button,input):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

@media (max-width: 900px) {
  .sidebar .sidebar-brand { width: 190px; }
  .sidebar .sidebar-brand-label { display: flex; }
  .sidebar .crm-sidebar-product { display: block; }
  .sidebar .crm-product-attribution { display: flex; }
}
@media (max-width: 680px) {
  .login-brand-panel { min-height: 0; height: auto; padding: 24px 18px 0; }
  .login-wordmark { min-height: 44px; }
  .crm-login-symbol { width: 44px; height: 44px; }
  .login-form-panel { min-height: 0; padding: 28px 18px; }
  .login-form { margin: 0; padding: 26px 22px; gap: 21px; border-radius: 10px; }
  .login-form-heading h2 { font-size: 24px; }
  .login-input input { font-size: 16px; }
  .crm-product-attribution { padding-bottom: max(22px,env(safe-area-inset-bottom)); }
}
@media (max-width: 359px) {
  .login-form-panel { padding-inline: 12px; }
  .login-form { padding-inline: 20px; }
  .login-form-heading h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-input, .sidebar { transition: none; }
}