/*
 * Tecnilor — brand adaptation of the supplied Frox prototype.
 * Green is the interface's primary colour; red and yellow are brand accents.
 * UI hex values are adaptations, not a verified corporate colour specification.
 * The official logo is referenced in the HTML without altering its artwork.
 */

.crm {
  --brand: #087a3f;
  --brand-hover: #056033;
  --brand-soft: #eaf4ec;
  --brand-red: #d9232e;
  --brand-yellow: #f4d531;
  --surface: #ffffff;
  --surface-muted: #f7f9f6;
  --canvas: #f3f6f2;
  --border: #dfe8df;
  --text: #24382d;
  --muted: #65756a;
  --faint: #8b9a8e;
}

.crm.dark {
  --brand: #70cc94;
  --brand-hover: #8bddaa;
  --brand-soft: #203f2c;
  --surface: #1c2921;
  --surface-muted: #223329;
  --canvas: #142019;
  --border: #344c3c;
  --text: #eef5ef;
  --muted: #b2c3b6;
  --faint: #93a899;
}

.crm :focus-visible { outline-color: #6eb98a; }
.crm .brand { flex-direction: column; align-items: flex-start; gap: 11px; padding: 28px 25px 24px; }
.crm .brand-mark { display: flex; align-items: center; min-height: 55px; width: 188px; max-width: 100%; padding: 9px 12px; background: #075b34; border-radius: 8px; }
.crm .brand-logo { display: block; width: 100%; height: 60px; object-fit: contain; object-position: left center; }
.crm .brand-subtitle { margin: 0; font-size: 14px; letter-spacing: 2.4px; color: var(--muted); }
.crm .brand-fallback { display: none; color: #ffffff; font: 700 34px/1.1 Arial, sans-serif; letter-spacing: -1.8px; }
.crm .brand-fallback > span { font-size: 14px; vertical-align: top; margin-left: 3px; letter-spacing: 0; }
.crm .logo-unavailable .brand-fallback { display: block; }
.crm.dark .brand-mark { background: #075b34; padding: 8px 12px; border-radius: 8px; }

.crm .sidebar { border-top: 4px solid #087a3f; }
.crm .workspace-label { background: var(--surface-muted); }
.crm .workspace-dot { background: #087a3f; }
.crm .nav-item { font-size: 14px; }
.crm .nav-item.active { box-shadow: 0 4px 12px #087a3f1a; }
.crm .nav-item.active .icon { color: #f4d531; }
.crm .nav-label { color: var(--muted); }
.crm .topbar { border-top: 4px solid transparent; }
.crm .notification-button > span { background: var(--brand-red); }
.crm .button { font-size: 14px; }
.crm .button-primary { box-shadow: 0 3px 9px #087a3f12; }
.crm .button-secondary:hover { border-color: #91b99b; }
.crm .avatar-purple { color: var(--brand); background: var(--brand-soft); }
.crm .badge-purple { color: var(--brand); background: var(--brand-soft); }
.crm .notice-info { color: #426c4c; background: #eaf3e9; }
.crm .upload-zone { border-color: #bad2bd; }
.crm .brand-preview { margin-bottom: 20px; padding: 15px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 8px; }
.crm .brand-preview .brand-subtitle { display: block; margin-top: 10px; }
.crm .stat-card { border-top: 3px solid #c9dfcf; }
.crm .stat-card:first-child { border-top-color: #087a3f; }
.crm .stat-card:nth-child(3) { border-top-color: #f4d531; }
.crm .stat-card:nth-child(4) { border-top-color: #d9232e; }

.crm .dashboard-hero {
  background: linear-gradient(110deg, #e6f2e8, #f7faf3);
  border-color: #d2e4d5;
  border-left: 4px solid #087a3f;
}
.crm .dashboard-hero h2 { color: #174a2b; }
.crm .dashboard-hero p { color: #577260; }
.crm .dashboard-hero .eyebrow { color: #b5242e; }
.crm .hero-sheet { box-shadow: 0 10px 35px #174a2b20; }
.crm .hero-sheet > span { background: #dcebdc; }
.crm .hero-sheet > span:first-child { background: #f4d531; }
.crm .hero-check { background: #087a3f; box-shadow: 0 8px 20px #087a3f25; }
.crm .field input:focus, .crm .field select:focus, .crm .field textarea:focus { border-color: #75b48c; box-shadow: 0 0 0 3px #087a3f0c; }
.crm .order-lines .bonus-cell input { background: var(--brand-soft); border-color: #cee3d3; color: var(--brand); }
.crm .bulk-toolbar select { border-color: #bbd8c3; }
.crm .prompt-chip:hover { border-color: #91b99b; }
.crm .upload-zone:hover { border-color: #91b99b; background: var(--brand-soft); }
.crm .campaign-banner { background: #e5f1e7; color: #306c44; }
.crm .campaign-banner::after { color: #b5d9b950; }
.crm .campaign-banner.green { background: #f8f3d6; color: #847021; }
.crm .campaign-banner.orange { background: #f9e9e8; color: #b84749; }
.crm .portfolio-panel { background: linear-gradient(125deg, #e0eee2, #f3f8ef); }
.crm .portfolio-panel h2 { color: #215334; }
.crm .portfolio-panel p { color: #5d7766; }
.crm .portfolio-tile { box-shadow: 0 7px 18px #285a3315; }
.crm .article-cover { background: #e6f0e6; }
.crm .article-cover .icon { color: #6a9c77; }
.crm .article-cover::before { border-color: #c6dec9; }
.crm .article-cover.green { background: #f5f0d9; }
.crm .article-cover.green .icon { color: #ab913e; }
.crm .article-cover.orange { background: #f7e8e8; }
.crm .article-cover.orange .icon { color: #c0787d; }
.crm .code-example { background: #1c3024; color: #deecdf; }
.crm .toast { background: #203e2b; box-shadow: 0 10px 35px #17332030; }
.crm .toast .icon { color: #f4d531; }

/* One centred login block. The original left presentation panel is removed. */
.crm.login-page { background: #075b34; }
.crm .login-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 32px 20px;
  background: #075b34;
}
.crm .login-form-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 470px);
  padding: 0;
  gap: 24px;
  background: transparent;
}
.crm .login-brand.brand {
  display: flex;
  align-items: center;
  align-self: center;
  width: 100%;
  padding: 0;
  gap: 12px;
  text-align: center;
}
.crm .login-brand .brand-mark {
  width: 238px;
  padding: 0;
  justify-content: center;
  background: transparent;
  border-radius: 0;
}
.crm .login-brand .brand-logo { height: 72px; object-position: center; }
.crm .login-brand .brand-subtitle { color: #d4e7d7; }
.crm .login-form-card {
  width: 100%;
  max-width: none;
  padding: 32px 36px 26px;
  border: 1px solid #dfe8df;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 55px #032e2026;
}
.crm .login-form-card h1 {
  margin: 0 0 9px;
  font-size: 28px;
  letter-spacing: -.7px;
  line-height: 1.25;
  text-align: center;
}
.crm .login-form-card > .eyebrow, .crm .login-form-card > p { text-align: center; }
.crm .login-form-card > .eyebrow { color: #b5242e; }
.crm .demo-role-options label:has(input:checked) { border-color: #87b596; }
.crm .demo-role-options label { font-size: 14px; }
.crm.dark .button-primary, .crm.dark .nav-item.active { color: #14331e; }
.crm.dark .nav-item.active .icon { color: #14331e; }
.crm.dark .notice-info { color: #b9d8bf; background: #253d2b; }

@media (max-width: 1180px) {
  .crm .sidebar .brand { padding-left: 22px; padding-right: 22px; }
  .crm .sidebar .brand-mark { width: 180px; }
  .crm .nav-item { gap: 9px; font-size: 14px; }
}
@media (max-width: 800px) {
  .crm .topbar { border-top-color: #087a3f; }
}

@media (max-width: 540px) {
  .crm .login-layout { padding: 24px 16px; }
  .crm .login-form-side { gap: 20px; }
  .crm .login-brand .brand-mark { width: 218px; }
  .crm .login-brand .brand-logo { height: 64px; }
  .crm .login-form-card { padding: 26px 22px 22px; border-radius: 13px; }
  .crm .login-form-card h1 { font-size: 25px; }
  .crm .login-options { flex-wrap: wrap; gap: 10px; }
}