html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body {
margin: 0;
background: #f6faf7;
}
body:has(.theme-dark) {
background: #10151d;
}
a, .btn-link {
color: #006bb7;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.content {
padding-top: 1.1rem;
}
.ui-icon {
width: 1rem;
height: 1rem;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.icon-btn,
.top-settings-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
}
.icon-btn .ui-icon,
.top-settings-link .ui-icon {
width: 1rem;
height: 1rem;
}
.page-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.page-heading h1 {
margin: 0;
font-size: clamp(1.75rem, 2vw, 2.4rem);
}
.eyebrow {
margin: 0 0 0.25rem;
color: var(--crm-primary, #0d7a45);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
}
.section-heading {
display: flex;
align-items: flex-start;
gap: 0.65rem;
}
.section-heading h2,
.section-heading p {
margin-bottom: 0;
}
.section-icon {
display: grid;
place-items: center;
width: 2.2rem;
height: 2.2rem;
flex: 0 0 auto;
color: var(--section-accent, var(--crm-primary, #0d7a45));
border: 1px solid color-mix(in srgb, var(--section-accent, var(--crm-primary, #0d7a45)) 32%, transparent);
border-radius: 0.65rem;
background: color-mix(in srgb, var(--section-accent, var(--crm-primary, #0d7a45)) 12%, var(--crm-surface, white));
}
.section-icon .ui-icon {
width: 1.15rem;
height: 1.15rem;
}
.section-icon-admin { --section-accent: #1268b3; }
.section-icon-security { --section-accent: #0f766e; }
.section-icon-roles { --section-accent: #6d5bd0; }
.section-icon-view { --section-accent: #7b3fb2; }
.section-icon-localization { --section-accent: #0e8f74; }
.section-icon-permissions { --section-accent: #d97706; }
.crm-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
gap: 1rem;
align-items: stretch;
padding: clamp(1.25rem, 3vw, 2.4rem);
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--crm-surface, white), var(--crm-primary-soft, #dff5e7));
border: 1px solid var(--crm-line, #c9e9d1);
border-radius: 0.5rem;
}
.crm-hero h1 {
margin: 0;
font-size: clamp(2.2rem, 5vw, 4.3rem);
letter-spacing: 0;
}
.compact-hero h1 {
font-size: clamp(2rem, 4vw, 3.1rem);
}
.crm-hero .lead {
max-width: 760px;
color: var(--crm-muted, #6b7d76);
}
.app-home-hero {
--home-bg: url("/images/backgrounds/core-crm-bg.png");
--home-accent: #0d7a45;
position: relative;
isolation: isolate;
grid-template-columns: minmax(0, 1fr);
align-items: end;
min-height: clamp(22rem, 38vw, 34rem);
overflow: hidden;
color: #10231d;
background:
linear-gradient(90deg, rgba(249, 255, 252, 0.93), rgba(249, 255, 252, 0.72) 46%, rgba(249, 255, 252, 0.25) 74%),
linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(208, 241, 232, 0.32)),
var(--home-bg) center / cover no-repeat;
border-color: color-mix(in srgb, var(--home-accent) 30%, var(--crm-line, #c9e9d1));
box-shadow: 0 22px 60px rgba(12, 40, 32, 0.13);
}
.app-home-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(90deg, rgba(15, 35, 29, 0.08) 1px, transparent 1px),
linear-gradient(180deg, rgba(15, 35, 29, 0.06) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: linear-gradient(90deg, #000, transparent 72%);
}
.app-home-hero h1 {
max-width: 820px;
color: #10231d;
text-wrap: balance;
}
.app-home-hero .lead {
color: #38564d;
}
.home-hero-copy {
position: relative;
z-index: 1;
max-width: 860px;
}
.app-home-hero .btn-outline-primary {
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(10px);
}
.crm-shell.business-electronics .app-home-hero {
--home-bg: url("/images/backgrounds/electronics-bg.png");
--home-accent: #0284c7;
}
.crm-shell.business-food-artistry .app-home-hero {
--home-bg: url("/images/backgrounds/food-artistry-bg.png");
--home-accent: #e05f4f;
}
.crm-shell.business-language-agency .app-home-hero {
--home-bg: url("/images/backgrounds/language-agency-bg.png");
--home-accent: #2563eb;
}
.home-utility-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.85rem;
margin: -3.1rem clamp(0.35rem, 1.4vw, 1.1rem) 1.1rem;
}
.home-utility-card {
--utility-accent: var(--crm-primary, #0d7a45);
display: grid;
gap: 0.35rem;
min-height: 9.2rem;
margin: 0;
padding: 1rem;
overflow: hidden;
border-color: color-mix(in srgb, var(--utility-accent) 34%, var(--crm-line, #c9e9d1));
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--utility-accent) 8%, rgba(255, 255, 255, 0.82))),
var(--crm-surface, white);
backdrop-filter: blur(14px);
}
.home-utility-card.action:hover {
border-color: var(--utility-accent);
box-shadow: 0 18px 34px color-mix(in srgb, var(--utility-accent) 18%, transparent);
}
.home-utility-card span:not(.home-utility-icon) {
color: color-mix(in srgb, var(--crm-muted, #6b7d76) 82%, var(--utility-accent));
font-size: 0.88rem;
font-weight: 700;
}
.home-utility-card strong,
.home-utility-card p {
margin: 0;
color: var(--crm-text, #17352a);
}
.home-utility-card p {
font-size: 0.94rem;
line-height: 1.35;
}
.home-utility-icon {
display: inline-grid;
place-items: center;
width: 2.35rem;
height: 2.35rem;
color: color-mix(in srgb, var(--utility-accent) 78%, #0f172a);
border: 1px solid color-mix(in srgb, var(--utility-accent) 34%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--utility-accent) 12%, white);
}
.home-utility-icon .ui-icon {
width: 1.15rem;
height: 1.15rem;
}
.home-utility-card-weather { --utility-accent: #0ea5a3; }
.home-utility-card-rates { --utility-accent: #2f7dd3; }
.home-utility-card-settings { --utility-accent: #7a5fda; }
.hero-actions,
.toolbar-line {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 1rem;
}
.hero-panel {
display: grid;
gap: 0.45rem;
align-content: center;
padding: 1rem;
border: 1px solid var(--crm-line, #c9e9d1);
border-radius: 0.5rem;
background: color-mix(in srgb, var(--crm-surface, white) 88%, transparent);
}
.hero-panel span {
display: inline-flex;
width: fit-content;
padding: 0.25rem 0.5rem;
border: 1px solid var(--crm-line, #c9e9d1);
border-radius: 999px;
color: var(--crm-text, #17352a);
background: var(--crm-surface, white);
}
.crm-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
margin-bottom: 1rem;
}
.crm-grid.two {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.crm-card {
display: block;
padding: 1rem;
margin-bottom: 1rem;
color: var(--crm-text, #17352a);
background: var(--crm-surface, white);
border: 1px solid var(--crm-line, #c9e9d1);
border-radius: 0.5rem;
text-decoration: none;
box-shadow: var(--crm-shadow, 0 10px 24px rgba(10, 48, 28, 0.06));
}
.crm-card.action {
transition: transform 140ms ease, border-color 140ms ease;
}
.crm-card.action:hover {
transform: translateY(-2px);
border-color: var(--crm-primary, #0d7a45);
}
.crm-card h2 {
margin-top: 0;
font-size: 1.2rem;
}
.crm-card.action span {
color: var(--crm-muted, #6b7d76);
}
.crm-card.action strong {
display: block;
margin-top: 0.35rem;
font-size: 1.1rem;
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.85rem;
}
.form-grid.three {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.form-grid label {
display: grid;
gap: 0.35rem;
color: var(--crm-muted, #6b7d76);
font-size: 0.88rem;
font-weight: 700;
}
.form-control,
.form-select {
border-color: var(--crm-line, #c9e9d1);
}
.btn-primary {
background: var(--crm-primary, #0d7a45);
border-color: var(--crm-primary, #0d7a45);
}
.btn-outline-primary {
color: var(--crm-primary, #0d7a45);
border-color: var(--crm-primary, #0d7a45);
}
.btn-outline-primary:hover {
color: white;
background: var(--crm-primary, #0d7a45);
border-color: var(--crm-primary, #0d7a45);
}
.crm-table {
--bs-table-bg: transparent;
--bs-table-striped-bg: var(--crm-surface-soft, #eef8f1);
}
.crm-table thead th {
border-bottom: 2px solid var(--crm-primary, #0d7a45);
color: var(--crm-text, #17352a);
}
.crm-table tbody tr:nth-child(even) {
background: var(--crm-surface-soft, #eef8f1);
}
.role-check {
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin: 0.15rem 0.45rem 0.15rem 0;
padding: 0.18rem 0.4rem;
border: 1px solid var(--crm-line, #c9e9d1);
border-radius: 999px;
background: var(--crm-surface-soft, #eef8f1);
white-space: nowrap;
}
.permission-cloud {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.permission-cloud span {
padding: 0.3rem 0.55rem;
border: 1px solid var(--crm-line, #c9e9d1);
border-radius: 999px;
background: var(--crm-surface-soft, #eef8f1);
}
.permission-editor {
margin-top: 0.45rem;
}
.permission-editor summary {
cursor: pointer;
color: var(--crm-primary, #0d7a45);
font-weight: 700;
}
.stacked-actions {
display: grid;
gap: 0.45rem;
}
.settings-list {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: 0.55rem 1rem;
margin: 0;
}
.settings-list dt {
color: var(--crm-muted, #6b7d76);
}
.settings-list dd {
margin: 0;
min-width: 0;
word-break: break-word;
}
.settings-micro-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.5rem;
margin-top: 1rem;
}
.settings-micro-grid span {
padding: 0.55rem 0.65rem;
border: 1px solid var(--crm-line, #c9e9d1);
border-radius: 0.5rem;
background: var(--crm-surface-soft, #eef8f1);
color: var(--crm-muted, #6b7d76);
}
.settings-micro-grid strong {
color: var(--crm-text, #17352a);
}
.file-upload-row {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
gap: 0.65rem;
align-items: center;
}
.file-list {
display: grid;
gap: 0.55rem;
margin-top: 0.85rem;
}
.file-list a {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.55rem 0.7rem;
color: var(--crm-text, #17352a);
text-decoration: none;
border: 1px solid var(--crm-line, #c9e9d1);
border-radius: 0.5rem;
background: var(--crm-surface-soft, #eef8f1);
}
.file-list span {
color: var(--crm-muted, #6b7d76);
}
.user-badge {
display: inline-flex;
align-items: center;
gap: 0.65rem;
min-height: 2.65rem;
max-width: 320px;
padding: 0.25rem 0.75rem 0.25rem 0.3rem;
color: var(--crm-text, #17352a);
border: 1px solid var(--crm-line, #c9e9d1);
border-radius: 999px;
background: var(--crm-surface, white);
text-decoration: none;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}
.user-badge:hover {
color: var(--crm-text, #17352a);
border-color: var(--crm-primary, #0d7a45);
}
.user-badge-avatar {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 2.05rem;
height: 2.05rem;
color: white;
background: var(--crm-primary, #0d7a45);
border-radius: 999px;
font-size: 0.78rem;
font-weight: 800;
}
.user-badge-avatar .ui-icon,
.user-badge-icon {
width: 1.05rem;
height: 1.05rem;
stroke-width: 2.2;
}
.user-badge-text {
display: grid;
min-width: 0;
line-height: 1.05;
}
.user-badge-text strong,
.user-badge-text small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-badge-text small {
color: var(--crm-muted, #6b7d76);
}
.auth-shell {
display: grid;
grid-template-columns: minmax(260px, 0.85fr) minmax(320px, 520px) minmax(260px, 0.7fr);
gap: 1.5rem;
align-items: start;
}
.auth-shell-login {
--auth-bg: url("/images/backgrounds/core-crm-bg.png");
--auth-accent: #0d7a45;
position: relative;
isolation: isolate;
grid-template-columns: minmax(0, 1fr);
place-items: center;
min-height: max(34rem, calc(100vh - 13rem));
padding: clamp(2rem, 5vw, 5rem);
overflow: hidden;
color: #10231d;
border: 1px solid color-mix(in srgb, var(--auth-accent) 28%, transparent);
border-radius: 8px;
background:
radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.44) 29%, transparent 47%),
linear-gradient(135deg, rgba(246, 255, 251, 0.86), rgba(226, 246, 255, 0.58) 48%, rgba(242, 255, 248, 0.64)),
var(--auth-bg) center / cover no-repeat;
box-shadow: 0 22px 70px rgba(7, 28, 45, 0.18);
}
.login-layout {
min-height: 100vh;
background: #edf8f4;
}
.login-layout.business-electronics .auth-shell-login {
--auth-bg: url("/images/backgrounds/electronics-bg.png");
--auth-accent: #0284c7;
--auth-secondary: #22c55e;
--auth-ambient: #dff4ff;
--auth-ambient-strong: #7dd3fc;
}
.login-layout.business-food-artistry .auth-shell-login {
--auth-bg: url("/images/backgrounds/food-artistry-bg.png");
--auth-accent: #e05f4f;
--auth-secondary: #16a34a;
--auth-ambient: #fff3dd;
--auth-ambient-strong: #f2b66b;
}
.login-layout.business-language-agency .auth-shell-login {
--auth-bg: url("/images/backgrounds/language-agency-bg.png");
--auth-accent: #2563eb;
--auth-secondary: #7c3aed;
--auth-ambient: #eef2ff;
--auth-ambient-strong: #a78bfa;
}
.login-layout.business-core .auth-shell-login,
.login-layout.business-core-crm .auth-shell-login {
--auth-bg: url("/images/backgrounds/core-crm-bg.png");
--auth-accent: #0b73c9;
--auth-secondary: #14b8a6;
--auth-ambient: #e8f7ff;
--auth-ambient-strong: #7cc8f8;
}
.login-layout .auth-shell-login {
min-height: 100vh;
margin: 0;
border: 0;
border-radius: 0;
}
.auth-shell-login::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(90deg, rgba(12, 36, 31, 0.08) 1px, transparent 1px),
linear-gradient(180deg, rgba(12, 36, 31, 0.07) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
animation: authGridDrift 24s linear infinite;
}
.auth-shell-login::after {
content: "";
position: absolute;
inset: -18%;
z-index: 0;
pointer-events: none;
opacity: .42;
background:
radial-gradient(circle at 26% 72%, color-mix(in srgb, var(--auth-secondary, #14b8a6) 18%, transparent), transparent 28%),
radial-gradient(circle at 76% 24%, color-mix(in srgb, var(--auth-accent, #0b73c9) 20%, transparent), transparent 30%);
animation: authSigninSweep 14s ease-in-out infinite;
}
.auth-ambient,
.auth-domain-notes {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.auth-orbit {
position: absolute;
border: 1px solid color-mix(in srgb, var(--auth-accent, #0b73c9) 32%, transparent);
border-radius: 999px;
opacity: .62;
animation: authFloat 9s ease-in-out infinite;
}
.auth-orbit-one {
width: clamp(8rem, 16vw, 15rem);
height: clamp(8rem, 16vw, 15rem);
right: 15%;
top: 16%;
}
.auth-orbit-two {
width: clamp(5rem, 10vw, 9rem);
height: clamp(5rem, 10vw, 9rem);
left: 17%;
bottom: 16%;
animation-delay: -3s;
}
.auth-theme-object,
.auth-theme-line,
.auth-note {
position: absolute;
border: 1px solid color-mix(in srgb, var(--auth-accent, #0b73c9) 28%, transparent);
background: color-mix(in srgb, var(--auth-ambient, #e8f7ff) 74%, transparent);
box-shadow: 0 1rem 2.6rem color-mix(in srgb, var(--auth-accent, #0b73c9) 12%, transparent);
}
.auth-theme-object {
width: clamp(4.8rem, 9vw, 8rem);
aspect-ratio: 1;
border-radius: 1.2rem;
animation: authFloat 10s ease-in-out infinite;
}
.auth-theme-object::before,
.auth-theme-object::after {
content: "";
position: absolute;
inset: 22%;
border-radius: inherit;
border: 1px solid color-mix(in srgb, var(--auth-secondary, #14b8a6) 42%, transparent);
}
.auth-theme-object::after {
inset: 42%;
background: var(--auth-ambient-strong, #7cc8f8);
border: 0;
}
.auth-theme-object-one {
right: 20%;
bottom: 17%;
}
.auth-theme-object-two {
left: 18%;
top: 18%;
transform: scale(.72);
animation-delay: -4s;
}
.auth-theme-line {
height: 2px;
width: clamp(7rem, 18vw, 18rem);
border-radius: 999px;
background: linear-gradient(90deg, transparent, var(--auth-ambient-strong, #7cc8f8), transparent);
animation: authTrace 7s ease-in-out infinite;
}
.auth-theme-line-one {
right: 9%;
top: 35%;
}
.auth-theme-line-two {
left: 8%;
bottom: 36%;
animation-delay: -2.4s;
}
.auth-domain-notes {
display: grid;
align-content: center;
gap: .7rem;
width: min(18rem, 24vw);
left: clamp(1rem, 6vw, 6rem);
}
.auth-note {
position: relative;
height: 3.1rem;
border-radius: .8rem;
opacity: .78;
animation: authFloat 11s ease-in-out infinite;
}
.auth-note::before,
.auth-note::after {
content: "";
position: absolute;
left: .85rem;
right: .85rem;
height: .34rem;
border-radius: 999px;
background: color-mix(in srgb, var(--auth-accent, #0b73c9) 22%, transparent);
}
.auth-note::before {
top: .85rem;
}
.auth-note::after {
top: 1.65rem;
right: 42%;
background: color-mix(in srgb, var(--auth-secondary, #14b8a6) 26%, transparent);
}
.auth-note-two {
width: 86%;
margin-left: 18%;
animation-delay: -3.6s;
}
.auth-note-three {
width: 70%;
animation-delay: -6s;
}
/* ── Food Artistry login: culinary kitchen tableau ────────────────────── */
/* Recipe board pinned with a clip — a pen on a coiled cord ticks the steps done */
.login-layout.business-food-artistry .food-recipe {
position: absolute;
left: 10%;
top: 11%;
width: clamp(7.5rem, 11vw, 10rem);
height: clamp(9.5rem, 14vw, 12.5rem);
pointer-events: auto;
border: 1px solid color-mix(in srgb, var(--auth-ambient-strong, #f2b66b) 46%, transparent);
border-radius: .7rem;
background: linear-gradient(135deg,
rgba(255, 255, 255, .85) 0%,
color-mix(in srgb, var(--auth-ambient, #fff3dd) 84%, white) 100%);
box-shadow: 0 .9rem 2rem rgba(138, 88, 40, .14);
rotate: -2deg;
animation: authFloat 12s ease-in-out infinite;
}
.login-layout.business-food-artistry .food-recipe-clip {
position: absolute;
left: calc(50% - 1.1rem);
top: -.55rem;
width: 2.2rem;
height: 1rem;
border-radius: .45rem .45rem .2rem .2rem;
background: linear-gradient(180deg, #d8dde3, #9aa3ad);
box-shadow: 0 .15rem .3rem rgba(60, 40, 20, .25);
}
.login-layout.business-food-artistry .food-recipe-clip::before {
content: "";
position: absolute;
left: calc(50% - .22rem);
top: .2rem;
width: .44rem;
height: .44rem;
border-radius: 999px;
background: #f6f8fa;
box-shadow: inset 0 0 0 2px #7d8794;
}
.login-layout.business-food-artistry .food-recipe-title {
position: absolute;
left: 12%;
top: 13%;
width: 56%;
height: .5rem;
border-radius: 999px;
background: color-mix(in srgb, var(--auth-accent, #e05f4f) 38%, transparent);
}
.login-layout.business-food-artistry .food-recipe-row {
position: absolute;
left: 12%;
width: 76%;
height: .9rem;
}
/* Ingredient text line */
.login-layout.business-food-artistry .food-recipe-row::before {
content: "";
position: absolute;
left: 0;
top: .26rem;
width: 60%;
height: .38rem;
border-radius: 999px;
background: color-mix(in srgb, var(--auth-accent, #e05f4f) 16%, #d9cdb8);
}
/* Checkbox on the right of each line */
.login-layout.business-food-artistry .food-recipe-row::after {
content: "";
position: absolute;
right: 0;
top: 0;
width: .85rem;
height: .85rem;
border-radius: .22rem;
border: 2px solid color-mix(in srgb, var(--auth-secondary, #16a34a) 55%, #8a8a7a);
background: rgba(255, 255, 255, .75);
}
.login-layout.business-food-artistry .food-recipe-row-one { top: 32%; }
.login-layout.business-food-artistry .food-recipe-row-two { top: 51%; }
.login-layout.business-food-artistry .food-recipe-row-three { top: 70%; }
/* Green checkmark popping in when the pen visits the box */
.login-layout.business-food-artistry .food-recipe-tick {
position: absolute;
right: -.12rem;
top: -.18rem;
width: 1.05rem;
height: 1.05rem;
clip-path: polygon(12% 54%, 38% 78%, 90% 16%, 78% 6%, 38% 56%, 24% 42%);
background: var(--auth-secondary, #16a34a);
opacity: 0;
animation: authFoodTickPop 18s ease-in-out -11s infinite;
}
.login-layout.business-food-artistry .food-recipe-row-two .food-recipe-tick {
animation-delay: -9.2s;
}
.login-layout.business-food-artistry .food-recipe-row-three .food-recipe-tick {
animation-delay: -7.4s;
}
/* Coiled cord hanging off the board edge */
.login-layout.business-food-artistry .food-recipe-cord {
position: absolute;
right: -.72rem;
top: 6%;
width: .52rem;
height: 2.7rem;
background: radial-gradient(circle at 50% 50%, transparent 30%, #b5763f 36% 50%, transparent 56%);
background-size: .52rem .4rem;
rotate: 14deg;
}
/* The pen — swings over and ticks each step in turn */
.login-layout.business-food-artistry .food-recipe-pen {
position: absolute;
right: -1.1rem;
top: calc(6% + 2.5rem);
width: .42rem;
height: 2.3rem;
background: linear-gradient(180deg,
var(--auth-secondary, #16a34a) 0%,
color-mix(in srgb, var(--auth-secondary, #16a34a) 80%, #0b3d1c) 66%,
#e8c98f 68%, #e8c98f 86%,
#4a4038 88%, #4a4038 100%);
clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
transform-origin: 50% 0%;
animation: authFoodPenWrite 18s ease-in-out -11s infinite;
}
/* Loose basil leaves drifting in the air */
.login-layout.business-food-artistry .food-leaf {
position: absolute;
width: 1.15rem;
height: 1.15rem;
border-radius: 0 100%;
background: linear-gradient(135deg, #8ed162 0%, var(--auth-secondary, #16a34a) 78%);
box-shadow: inset -.12rem .12rem .2rem rgba(255, 255, 255, .3);
opacity: .8;
animation: authFoodLeafSway 7.5s ease-in-out infinite;
}
.login-layout.business-food-artistry .food-leaf::before {
content: "";
position: absolute;
inset: 10%;
background: linear-gradient(135deg, transparent 46%, rgba(255, 255, 255, .55) 50%, transparent 54%);
}
.login-layout.business-food-artistry .food-leaf-one {
right: 26%;
top: 26%;
}
.login-layout.business-food-artistry .food-leaf-two {
left: 17%;
bottom: 38%;
scale: .82;
animation-delay: -3.4s;
}
/* Simmering copper pan over a soft flame — lower left */
.login-layout.business-food-artistry .food-pan {
position: absolute;
left: 7%;
bottom: 11%;
width: clamp(7.5rem, 11vw, 10rem);
height: clamp(6.5rem, 10vw, 9rem);
pointer-events: auto;
}
.login-layout.business-food-artistry .food-pan-glow {
position: absolute;
left: 12%;
bottom: .2rem;
width: 76%;
height: 1.3rem;
border-radius: 999px;
background: radial-gradient(ellipse at 50% 60%,
rgba(248, 158, 44, .65) 0%,
rgba(238, 102, 38, .32) 52%,
transparent 78%);
filter: blur(.25rem);
animation: authFoodFlame 1.5s ease-in-out infinite alternate;
}
.login-layout.business-food-artistry .food-pan-body {
position: absolute;
left: 0;
bottom: .9rem;
width: 100%;
height: 46%;
border-radius: .35rem .35rem 1.6rem 1.6rem;
background:
linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, .38) 16%, transparent 27%),
linear-gradient(180deg, #e3a070 0%, #c97c4d 38%, #9c5732 84%, #7e441f 100%);
box-shadow:
inset 0 .35rem .5rem rgba(64, 28, 8, .35),
0 1rem 2rem rgba(110, 52, 18, .22);
}
.login-layout.business-food-artistry .food-pan-lid {
position: absolute;
left: -2%;
bottom: calc(.9rem + 45%);
width: 104%;
height: .8rem;
border-radius: 999px;
background: linear-gradient(180deg, #f2ede6 0%, #c9c2b8 55%, #948c80 100%);
box-shadow: 0 .2rem .45rem rgba(70, 40, 14, .28);
transform-origin: 7% 92%;
animation: authFoodLidPeek 14s ease-in-out -4s infinite;
}
.login-layout.business-food-artistry .food-pan-lid::before {
content: "";
position: absolute;
left: calc(50% - .3rem);
top: -.42rem;
width: .6rem;
height: .48rem;
border-radius: 999px 999px .2rem .2rem;
background: linear-gradient(180deg, #6f655a, #3f372e);
}
.login-layout.business-food-artistry .food-pan-handle {
position: absolute;
left: 96%;
bottom: calc(.9rem + 32%);
width: clamp(2.6rem, 4vw, 3.6rem);
height: .5rem;
border-radius: 999px;
background: linear-gradient(180deg, #54453a 0%, #2e241d 100%);
box-shadow: inset 0 .12rem 0 rgba(255, 255, 255, .18);
}
.login-layout.business-food-artistry .food-pan-steam {
position: absolute;
bottom: calc(.9rem + 54%);
width: 3px;
height: clamp(3.4rem, 6vw, 5rem);
border-radius: 999px;
background: linear-gradient(180deg,
transparent 0%,
rgba(255, 252, 246, .92) 55%,
transparent 100%);
filter: blur(.8px);
opacity: 0;
animation: authFoodSteamPuff 14s ease-out -4s infinite;
}
.login-layout.business-food-artistry .food-pan-steam-one {
left: 26%;
}
.login-layout.business-food-artistry .food-pan-steam-two {
left: 49%;
height: clamp(4rem, 7vw, 6rem);
animation-delay: -4.35s;
}
.login-layout.business-food-artistry .food-pan-steam-three {
left: 70%;
width: 2px;
animation-delay: -4.7s;
}
/* Hover: the lid swings open ~45° and steam pours out continuously */
@media (hover: hover) and (pointer: fine) {
.login-layout.business-food-artistry .food-pan:hover .food-pan-lid {
animation: authFoodLidOpen .8s ease-out forwards;
}
.login-layout.business-food-artistry .food-pan:hover .food-pan-steam {
animation: authFoodSteam 2s ease-out infinite;
}
.login-layout.business-food-artistry .food-pan:hover .food-pan-steam-two {
animation-delay: -.7s;
}
.login-layout.business-food-artistry .food-pan:hover .food-pan-steam-three {
animation-delay: -1.3s;
}
.login-layout.business-food-artistry .food-pan:hover .food-pan-glow {
animation-duration: .9s;
}
/* Hover: the recipe pen hurries through the checklist */
.login-layout.business-food-artistry .food-recipe:hover .food-recipe-pen {
animation-duration: 6s;
animation-delay: 0s;
}
.login-layout.business-food-artistry .food-recipe:hover .food-recipe-tick {
animation-duration: 6s;
animation-delay: 0s;
}
.login-layout.business-food-artistry .food-recipe:hover .food-recipe-row-two .food-recipe-tick {
animation-delay: .6s;
}
.login-layout.business-food-artistry .food-recipe:hover .food-recipe-row-three .food-recipe-tick {
animation-delay: 1.2s;
}
/* Hover: the mill grinds non-stop, peppercorns keep falling */
.login-layout.business-food-artistry .food-mill:hover {
animation: authFoodMillShakeLoop .55s ease-in-out infinite;
}
.login-layout.business-food-artistry .food-mill:hover .food-mill-crank {
animation: authFoodCrankLoop 1s linear infinite;
}
.login-layout.business-food-artistry .food-mill:hover .food-mill-grain {
animation: authFoodGrainLoop 1.35s ease-in infinite;
}
.login-layout.business-food-artistry .food-mill:hover .food-mill-grain-two {
animation-delay: .35s;
}
.login-layout.business-food-artistry .food-mill:hover .food-mill-grain-three {
animation-delay: .7s;
}
.login-layout.business-food-artistry .food-mill:hover .food-mill-grain-four {
animation-delay: 1.05s;
}
}
/* Pepper mill — crank turns, the mill shivers, a mixed-pepper rain falls out */
.login-layout.business-food-artistry .food-mill {
position: absolute;
right: 9%;
top: 9%;
width: clamp(3.4rem, 5vw, 4.4rem);
height: clamp(7.5rem, 11vw, 9.8rem);
pointer-events: auto;
animation: authFoodMillShake 23s ease-in-out -16s infinite;
}
.login-layout.business-food-artistry .food-mill-body {
position: absolute;
left: 4%;
top: 1.35rem;
width: 92%;
height: 58%;
background:
linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, transparent 30%),
linear-gradient(90deg,
#6e4423 0%, #a06a37 22%, #d8a86b 46%,
#c08b4e 58%, #8a5a2c 82%, #5f3a1d 100%);
clip-path: polygon(
30% 0%, 70% 0%, 80% 8%, 62% 36%, 86% 70%,
82% 100%, 18% 100%, 14% 70%, 38% 36%, 20% 8%);
filter: drop-shadow(0 .8rem 1.4rem rgba(96, 52, 18, .25));
}
.login-layout.business-food-artistry .food-mill-cap {
position: absolute;
left: 26%;
top: .85rem;
width: 48%;
height: .65rem;
border-radius: .5rem .5rem .15rem .15rem;
background: linear-gradient(180deg, #eef1f4, #b9c0c8 70%, #8d949c);
}
/* Crank arm with a wooden knob, pivoting at the cap centre */
.login-layout.business-food-artistry .food-mill-crank {
position: absolute;
left: calc(50% - .24rem);
top: .55rem;
width: clamp(1.9rem, 3vw, 2.4rem);
height: .34rem;
border-radius: 999px;
background: linear-gradient(180deg, #d7dde3, #99a2ab);
transform-origin: .17rem 50%;
animation: authFoodCrankTurn 23s linear -16s infinite;
}
.login-layout.business-food-artistry .food-mill-crank::before {
content: "";
position: absolute;
left: -.07rem;
top: -.07rem;
width: .48rem;
height: .48rem;
border-radius: 999px;
background: radial-gradient(circle at 38% 35%, #f2f5f8, #9aa3ac 70%);
}
.login-layout.business-food-artistry .food-mill-crank::after {
content: "";
position: absolute;
right: -.18rem;
top: -.22rem;
width: .78rem;
height: .78rem;
border-radius: 999px;
background: radial-gradient(circle at 36% 32%, #d9a86b, #8a5a2c 75%);
}
/* The four-pepper mix: black, white, green, red corns falling out */
.login-layout.business-food-artistry .food-mill-grain {
position: absolute;
left: calc(50% - .19rem);
top: calc(1.35rem + 58%);
width: .38rem;
height: .38rem;
border-radius: 999px;
opacity: 0;
animation: authFoodGrainDrop 23s ease-in -16s infinite;
}
.login-layout.business-food-artistry .food-mill-grain-one {
background: #33291f;
animation-delay: -15.85s;
}
.login-layout.business-food-artistry .food-mill-grain-two {
background: #ece0c6;
margin-left: -.45rem;
animation-delay: -15.2s;
}
.login-layout.business-food-artistry .food-mill-grain-three {
background: #7da554;
margin-left: .4rem;
animation-delay: -14.55s;
}
.login-layout.business-food-artistry .food-mill-grain-four {
background: #c14b38;
margin-left: -.12rem;
animation-delay: -13.9s;
}
/* Chef rock-chopping a cucumber — lower right */
.login-layout.business-food-artistry .food-chop {
position: absolute;
right: 7%;
bottom: 17%;
width: clamp(11rem, 17vw, 15rem);
height: clamp(6.5rem, 10vw, 9rem);
}
.login-layout.business-food-artistry .food-chop-board {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: clamp(.85rem, 1.3vw, 1.1rem);
border-radius: .45rem .45rem .55rem .55rem;
background:
repeating-linear-gradient(90deg, rgba(122, 76, 32, .16) 0 2px, transparent 2px 14px),
linear-gradient(180deg, #dcab6f 0%, #c08b50 64%, #9d6c39 100%);
box-shadow: 0 .7rem 1.4rem rgba(96, 56, 20, .22);
}
/* Chef's knife — side view, tip planted, handle rocking like a real chop */
.login-layout.business-food-artistry .food-chop-knife {
position: absolute;
left: 12%;
bottom: calc(clamp(.85rem, 1.3vw, 1.1rem) - 1px);
width: clamp(7rem, 11vw, 9.5rem);
height: clamp(2rem, 3.2vw, 2.7rem);
background:
linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, transparent 38%),
linear-gradient(90deg,
#eef2f7 0%,
#ccd5de 30%,
#aeb9c4 52%,
#8d98a5 61.8%,
#2f2622 62%,
color-mix(in srgb, var(--auth-accent, #e05f4f) 30%, #241a14) 72%,
#1d1410 100%);
clip-path: polygon(
0% 78%, 4% 52%, 12% 34%, 24% 24%, 42% 18%, 60% 15%,
62% 5%, 94% 5%, 100% 16%, 100% 42%, 94% 56%, 63% 56%,
61% 94%, 36% 100%, 13% 93%);
transform-origin: 3% 80%;
animation: authFoodChop .95s ease-in-out infinite;
}
/* Handle rivets */
.login-layout.business-food-artistry .food-chop-knife::before {
content: "";
position: absolute;
left: 66%;
top: 14%;
width: 30%;
height: 38%;
background:
radial-gradient(circle .14rem at 16% 52%, #d8cba8 0 56%, rgba(0, 0, 0, .45) 70%, transparent 80%),
radial-gradient(circle .14rem at 80% 52%, #d8cba8 0 56%, rgba(0, 0, 0, .45) 70%, transparent 80%);
}
/* Cutting-edge glint */
.login-layout.business-food-artistry .food-chop-knife::after {
content: "";
position: absolute;
left: 2%;
bottom: 14%;
width: 55%;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .08));
transform: rotate(6deg);
transform-origin: left center;
}
/* Cucumber waiting under the blade */
.login-layout.business-food-artistry .food-chop-veg {
position: absolute;
left: 4%;
bottom: clamp(.85rem, 1.3vw, 1.1rem);
width: 2.7rem;
height: .85rem;
border-radius: 999px;
background: linear-gradient(180deg, #8ccb5e 0%, #5d9c34 70%, #4a7e28 100%);
box-shadow: inset 0 .15rem .15rem rgba(255, 255, 255, .3);
}
/* Fresh slices popping off the knife in chop rhythm */
.login-layout.business-food-artistry .food-chop-slice {
position: absolute;
bottom: calc(clamp(.85rem, 1.3vw, 1.1rem) + .08rem);
width: 1.05rem;
height: 1.05rem;
border-radius: 999px;
background: radial-gradient(circle at 42% 40%,
#f3fada 0 30%,
#e7f4c2 31% 52%,
#d2e8a0 53% 70%,
#74aa42 71% 100%);
box-shadow: 0 .15rem .3rem rgba(70, 100, 30, .25);
opacity: 0;
animation: authFoodSlicePop 2.85s ease-out infinite;
}
.login-layout.business-food-artistry .food-chop-slice-one {
left: 9%;
animation-delay: .45s;
}
.login-layout.business-food-artistry .food-chop-slice-two {
left: 12%;
animation-delay: 1.4s;
animation-duration: 2.95s;
}
.login-layout.business-food-artistry .food-chop-slice-three {
left: 10.5%;
animation-delay: 2.35s;
}
@media (max-width: 640px) {
.login-layout.business-food-artistry .food-chop,
.login-layout.business-food-artistry .food-leaf,
.login-layout.business-food-artistry .food-mill {
display: none;
}
.login-layout.business-food-artistry .food-pan {
left: 2%;
bottom: 6%;
scale: .8;
transform-origin: bottom left;
}
.login-layout.business-food-artistry .food-recipe {
left: 4%;
top: 5%;
scale: .78;
transform-origin: top left;
}
}
@media (prefers-reduced-motion: reduce) {
.login-layout.business-food-artistry .food-pan-glow,
.login-layout.business-food-artistry .food-pan-lid,
.login-layout.business-food-artistry .food-pan-steam,
.login-layout.business-food-artistry .food-chop-knife,
.login-layout.business-food-artistry .food-chop-slice,
.login-layout.business-food-artistry .food-leaf,
.login-layout.business-food-artistry .food-recipe,
.login-layout.business-food-artistry .food-recipe-pen,
.login-layout.business-food-artistry .food-recipe-tick,
.login-layout.business-food-artistry .food-mill,
.login-layout.business-food-artistry .food-mill-crank,
.login-layout.business-food-artistry .food-mill-grain {
animation: none;
}
/* Static fallbacks: knife rests, slices lie chopped, list fully ticked, lid closed */
.login-layout.business-food-artistry .food-chop-slice {
opacity: .85;
translate: -1.6rem 0;
rotate: -85deg;
}
.login-layout.business-food-artistry .food-pan-steam,
.login-layout.business-food-artistry .food-mill-grain {
opacity: 0;
}
.login-layout.business-food-artistry .food-recipe-tick {
opacity: 1;
}
}
.login-layout.business-electronics .auth-theme-object {
border-radius: .75rem;
background:
linear-gradient(90deg, color-mix(in srgb, var(--auth-accent, #0284c7) 22%, transparent) 1px, transparent 1px),
linear-gradient(180deg, color-mix(in srgb, var(--auth-accent, #0284c7) 22%, transparent) 1px, transparent 1px),
color-mix(in srgb, var(--auth-ambient, #dff4ff) 78%, transparent);
background-size: 18px 18px;
}
.login-layout.business-language-agency .auth-theme-object {
border-radius: .9rem;
transform: rotate(-4deg);
}
.login-layout.business-language-agency .auth-theme-object-two {
transform: scale(.72) rotate(5deg);
}
.login-layout.business-language-agency .auth-note::before {
right: 26%;
}
/* The lid lifts to ~45° now and then, lets the steam out, then settles back */
@keyframes authFoodLidPeek {
0%, 50% { transform: rotate(0deg); }
54% { transform: rotate(-8deg); }
56% { transform: rotate(-46deg); }
63% { transform: rotate(-40deg); }
70% { transform: rotate(-46deg); }
78% { transform: rotate(-6deg); }
81% { transform: rotate(0deg); }
83% { transform: rotate(-3deg); }
85%, 100% { transform: rotate(0deg); }
}
/* Hover version: open and hold */
@keyframes authFoodLidOpen {
0% { transform: rotate(0deg); }
70% { transform: rotate(-50deg); }
100% { transform: rotate(-45deg); }
}
/* Steam appears only while the lid is up (synced to authFoodLidPeek) */
@keyframes authFoodSteamPuff {
0%, 53% { opacity: 0; translate: 0 0; }
57% { opacity: .75; translate: .05rem -1.4rem; }
66% { opacity: .2; translate: -.05rem -3.2rem; }
69% { opacity: 0; translate: 0 -4rem; }
70% { opacity: 0; translate: 0 0; }
73% { opacity: .65; translate: -.05rem -1.6rem; }
80% { opacity: 0; translate: .05rem -3.6rem; }
81%, 100% { opacity: 0; translate: 0 0; }
}
/* The pen sways idle, then visits each checkbox and ticks it */
@keyframes authFoodPenWrite {
0%, 100% { transform: translate(0, 0) rotate(8deg); }
3% { transform: translate(0, 0) rotate(-4deg); }
7%, 11% { transform: translate(-1.7rem, .25rem) rotate(-36deg); }
9% { transform: translate(-1.55rem, .35rem) rotate(-24deg); }
17%, 21% { transform: translate(-1.7rem, 2.35rem) rotate(-36deg); }
19% { transform: translate(-1.55rem, 2.45rem) rotate(-24deg); }
27%, 31% { transform: translate(-1.7rem, 4.5rem) rotate(-36deg); }
29% { transform: translate(-1.55rem, 4.6rem) rotate(-24deg); }
37% { transform: translate(0, 0) rotate(10deg); }
42% { transform: translate(0, 0) rotate(2deg); }
55% { transform: translate(0, 0) rotate(7deg); }
70% { transform: translate(0, 0) rotate(3deg); }
85% { transform: translate(0, 0) rotate(6deg); }
}
/* Checkmark pops in as the pen wiggles over its box, resets late in the cycle */
@keyframes authFoodTickPop {
0%, 9% { opacity: 0; scale: .4; }
10.5% { opacity: 1; scale: 1.25; }
12% { opacity: 1; scale: 1; }
80% { opacity: 1; scale: 1; }
86%, 100% { opacity: 0; scale: .4; }
}
/* Three brisk crank turns inside the long idle cycle */
@keyframes authFoodCrankTurn {
0%, 58% { transform: rotate(0deg); }
84% { transform: rotate(1080deg); }
100% { transform: rotate(1080deg); }
}
@keyframes authFoodCrankLoop {
to { transform: rotate(360deg); }
}
/* The mill shivers while grinding */
@keyframes authFoodMillShake {
0%, 58%, 84%, 100% { rotate: 0deg; }
60% { rotate: 2.2deg; }
63% { rotate: -2deg; }
66% { rotate: 1.8deg; }
70% { rotate: -1.6deg; }
74% { rotate: 1.4deg; }
78% { rotate: -1.2deg; }
81% { rotate: .8deg; }
}
@keyframes authFoodMillShakeLoop {
0%, 100% { rotate: -1.6deg; }
50% { rotate: 1.8deg; }
}
/* Peppercorns drop only during the grind window */
@keyframes authFoodGrainDrop {
0%, 60% { opacity: 0; translate: 0 0; }
62% { opacity: 1; translate: 0 .2rem; }
72% { opacity: .95; translate: .12rem 2rem; }
78% { opacity: 0; translate: .18rem 2.9rem; }
79%, 100% { opacity: 0; translate: 0 0; }
}
/* Hover: a continuous trickle of peppercorns */
@keyframes authFoodGrainLoop {
0% { opacity: 0; translate: 0 0; }
10% { opacity: 1; translate: .03rem .4rem; }
80% { opacity: .9; translate: .14rem 2.4rem; }
100% { opacity: 0; translate: .2rem 3rem; }
}
/* Tip stays planted on the board; the handle rocks down for each chop */
@keyframes authFoodChop {
0%, 100% { transform: rotate(-15deg); }
42%, 58% { transform: rotate(-1.2deg); }
}
/* A slice pops off at knife-down, tumbles left, settles, fades */
@keyframes authFoodSlicePop {
0% { opacity: 0; translate: 0 0; rotate: 0deg; scale: .3; }
6% { opacity: .95; translate: -.5rem -.45rem; rotate: -28deg; scale: 1; }
30% { opacity: .95; translate: -1.5rem .05rem; rotate: -82deg; scale: 1; }
74% { opacity: .85; translate: -2rem .1rem; rotate: -92deg; scale: 1; }
100% { opacity: 0; translate: -2.3rem .1rem; rotate: -96deg; scale: .9; }
}
@keyframes authFoodFlame {
from { opacity: .45; scale: .94 1; }
to { opacity: .85; scale: 1.07 1; }
}
@keyframes authFoodLeafSway {
0%, 100% { translate: 0 0; rotate: -10deg; }
50% { translate: .35rem -.7rem; rotate: 16deg; }
}
@keyframes authFoodSteam {
0% { opacity: 0; transform: translateY(0) scaleX(1); }
14% { opacity: .72; transform: translateY(-.8rem) scaleX(1.4); }
54% { opacity: .38; transform: translateY(-3.6rem) scaleX(.7); }
84% { opacity: .12; transform: translateY(-6rem) scaleX(1.2); }
100% { opacity: 0; transform: translateY(-8rem) scaleX(.5); }
}
@keyframes authGridDrift {
to { background-position: 48px 48px; }
}
@keyframes authSigninSweep {
0%, 100% { transform: translate3d(-1.5%, 0, 0) scale(1); }
50% { transform: translate3d(1.5%, -1%, 0) scale(1.03); }
}
@keyframes authFloat {
0%, 100% { translate: 0 0; }
50% { translate: 0 -.7rem; }
}
@keyframes authTrace {
0%, 100% { opacity: .28; transform: translateX(-.45rem); }
50% { opacity: .85; transform: translateX(.45rem); }
}
@media (max-width: 640px) {
.auth-domain-notes,
.auth-theme-object-two {
display: none;
}
.auth-orbit-one {
right: -3rem;
top: 10%;
}
.auth-orbit-two {
left: -2.5rem;
bottom: 10%;
}
}
@media (prefers-reduced-motion: reduce) {
.auth-shell-login::before,
.auth-shell-login::after,
.auth-orbit,
.auth-theme-object,
.auth-theme-line,
.auth-note {
animation: none;
}
}
.auth-copy {
padding: clamp(1.25rem, 3vw, 2.3rem);
border: 1px solid var(--crm-line, #c9e9d1);
border-radius: 0.75rem;
background: linear-gradient(145deg, var(--crm-primary-soft, #dff5e7), var(--crm-surface, white));
box-shadow: var(--crm-shadow, 0 10px 24px rgba(10, 48, 28, 0.06));
}
.auth-copy h1 {
margin: 0;
font-size: clamp(2.2rem, 4vw, 4rem);
}
.auth-feature-list {
display: grid;
gap: 0.55rem;
margin-top: 1rem;
}
.auth-feature-list span {
padding: 0.55rem 0.7rem;
border: 1px solid var(--crm-line, #c9e9d1);
border-radius: 0.5rem;
background: color-mix(in srgb, var(--crm-surface, white) 86%, transparent);
}
.auth-card,
.auth-external {
padding: 1.1rem;
border: 1px solid var(--crm-line, #c9e9d1);
border-radius: 0.75rem;
background: var(--crm-surface, white);
box-shadow: var(--crm-shadow, 0 10px 24px rgba(10, 48, 28, 0.06));
}
.auth-card h2,
.auth-external h3 {
margin-top: 0;
}
.auth-login-card {
position: relative;
z-index: 1;
width: min(100%, 450px);
padding: clamp(1.35rem, 3vw, 2rem);
overflow: hidden;
color: var(--crm-text, #17352a);
border: 1px solid rgba(217, 246, 236, 0.72);
border-radius: 8px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(245, 253, 249, 0.9)),
color-mix(in srgb, var(--crm-surface, white) 88%, transparent);
box-shadow:
0 28px 80px rgba(2, 17, 30, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
backdrop-filter: blur(18px);
}
.auth-login-card::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 5px;
background: linear-gradient(90deg, var(--auth-accent, #10b981), #0284c7, #14b8a6);
}
.auth-card-header {
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 1rem;
}
.auth-card-header h1 {
margin: 0;
font-size: clamp(2rem, 4vw, 2.8rem);
line-height: 1;
letter-spacing: 0;
}
.auth-brand-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
color: #f8fffb;
border: 1px solid rgba(255, 255, 255, 0.52);
border-radius: 8px;
background: linear-gradient(135deg, #047857, #0284c7);
box-shadow: 0 12px 26px rgba(4, 120, 87, 0.22);
}
.auth-brand-icon .ui-icon {
width: 1.45rem;
height: 1.45rem;
}
.auth-login-copy {
margin: 0 0 1.25rem;
color: var(--crm-muted, #6b7d76);
}
.auth-field {
position: relative;
}
.auth-field .form-control {
min-height: 3.55rem;
padding-left: 3rem;
color: var(--crm-text, #17352a);
border: 1px solid color-mix(in srgb, var(--crm-primary, #0d7a45) 26%, var(--crm-line, #c9e9d1));
border-radius: 8px;
background: rgba(255, 255, 255, 0.94);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.auth-field .form-control:focus {
border-color: #0284c7;
box-shadow:
0 0 0 3px rgba(2, 132, 199, 0.16),
0 12px 24px rgba(2, 17, 30, 0.08);
}
.auth-field > label {
padding-left: 3rem;
color: color-mix(in srgb, var(--crm-muted, #6b7d76) 84%, #0f172a);
}
.auth-input-icon {
position: absolute;
top: 1.06rem;
left: 1rem;
z-index: 4;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.4rem;
height: 1.4rem;
color: #047857;
pointer-events: none;
}
.auth-input-icon .ui-icon {
width: 1.05rem;
height: 1.05rem;
}
.auth-remember label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0;
color: var(--crm-text, #17352a);
}
.auth-remember .form-check-input {
margin: 0;
border-color: color-mix(in srgb, var(--crm-primary, #0d7a45) 45%, var(--crm-line, #c9e9d1));
}
.auth-login-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-height: 3.2rem;
border: 0;
border-radius: 8px;
background: linear-gradient(135deg, #047857, #0284c7);
box-shadow: 0 16px 34px rgba(4, 120, 87, 0.24);
}
.auth-login-submit:hover,
.auth-login-submit:focus-visible {
background: linear-gradient(135deg, #03694d, #0369a1);
}
.auth-login-submit .ui-icon {
width: 1.15rem;
height: 1.15rem;
}
.auth-more-panel {
margin-top: 1rem;
}
.auth-more-panel summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
min-height: 2.75rem;
padding: 0.65rem 0.85rem;
color: #075985;
border: 1px solid rgba(2, 132, 199, 0.26);
border-radius: 8px;
background:
linear-gradient(90deg, rgba(2, 132, 199, 0.08), rgba(16, 185, 129, 0.08)),
rgba(255, 255, 255, 0.74);
cursor: pointer;
user-select: none;
}
.auth-more-panel summary::-webkit-details-marker {
display: none;
}
.auth-more-panel summary:focus-visible {
outline: 0;
border-color: #0284c7;
box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18);
}
.auth-more-panel summary span,
.auth-more-links a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.auth-more-panel .ui-icon {
width: 1rem;
height: 1rem;
}
.auth-summary-chevron {
transition: transform 160ms ease;
}
.auth-more-panel[open] .auth-summary-chevron {
transform: rotate(90deg);
}
.auth-more-links {
display: grid;
gap: 0.55rem;
padding: 0.7rem 0.25rem 0.1rem;
}
.auth-more-links a {
min-height: 2.45rem;
padding: 0.55rem 0.7rem;
color: var(--crm-text, #17352a);
text-decoration: none;
border: 1px solid color-mix(in srgb, var(--crm-line, #c9e9d1) 82%, transparent);
border-left: 4px solid #0284c7;
border-radius: 8px;
background: rgba(255, 255, 255, 0.72);
}
.auth-more-links a:hover,
.auth-more-links a:focus-visible {
color: #075985;
border-color: rgba(2, 132, 199, 0.36);
background: rgba(239, 248, 255, 0.9);
}
.auth-home-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
min-height: 2.75rem;
margin-top: 0.75rem;
color: color-mix(in srgb, var(--auth-accent, #0d7a45) 80%, #0f172a);
font-weight: 800;
text-decoration: none;
border: 1px solid color-mix(in srgb, var(--auth-accent, #0d7a45) 30%, var(--crm-line, #c9e9d1));
border-radius: 8px;
background: rgba(255, 255, 255, 0.7);
}
.auth-home-link:hover,
.auth-home-link:focus-visible {
color: #0f172a;
background: color-mix(in srgb, var(--auth-accent, #0d7a45) 10%, white);
}
.auth-home-link .ui-icon {
width: 1rem;
height: 1rem;
}
.settings-console {
display: grid;
gap: 1.25rem;
}
.compact-settings-console {
gap: 0.85rem;
padding: 1rem;
}
.compact-settings-console > div:first-child {
display: grid;
gap: 0.15rem;
}
.compact-settings-console h2 {
margin: 0;
font-size: 1.05rem;
}
.compact-settings-console .text-muted {
margin-bottom: 0;
}
.settings-hub {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 0.9rem;
}
.settings-hub-card {
display: grid;
gap: 0.55rem;
min-height: 9rem;
padding: 1rem;
color: var(--crm-text, #17352a);
text-decoration: none;
border: 1px solid var(--crm-line, #c9e9d1);
border-radius: 0.75rem;
background: var(--crm-surface, white);
box-shadow: var(--crm-shadow, 0 10px 24px rgba(10, 48, 28, 0.06));
transition: transform 140ms ease, border-color 140ms ease;
}
.option-card {
--option-accent: var(--crm-primary, #0d7a45);
}
.option-card-light { --option-accent: #355c9c; }
.option-card-dark { --option-accent: #10151d; }
.option-card-green { --option-accent: #0d7a45; }
.option-card-blue { --option-accent: #1268b3; }
.option-card-purple { --option-accent: #7b3fb2; }
.option-card-teal { --option-accent: #0f766e; }
.option-card-indigo { --option-accent: #4f46e5; }
.option-card-cyan { --option-accent: #0891b2; }
.option-card-orange { --option-accent: #d97706; }
.option-card-rose { --option-accent: #be123c; }
.settings-hub-card.option-card,
.settings-option.option-card {
border-color: color-mix(in srgb, var(--option-accent) 34%, var(--crm-line, #c9e9d1));
border-left: 4px solid var(--option-accent);
background:
linear-gradient(90deg, color-mix(in srgb, var(--option-accent) 8%, transparent), transparent 42%),
var(--crm-surface, white);
}
.settings-hub-card.option-card:hover,
.settings-option.option-card:hover {
border-color: var(--option-accent);
}
.settings-hub-card:hover {
color: var(--crm-text, #17352a);
transform: translateY(-2px);
border-color: var(--crm-primary, #0d7a45);
}
.settings-shortcuts {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.module-dashboard {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
gap: 1rem;
align-items: stretch;
}
.module-hero {
background: linear-gradient(135deg, var(--crm-surface, white), var(--crm-primary-soft, #dff5e7));
}
.module-stat-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
}
.module-stat-grid div {
display: grid;
gap: 0.25rem;
align-content: center;
min-height: 6rem;
padding: 0.8rem;
border: 1px solid var(--crm-line, #c9e9d1);
border-radius: 0.65rem;
background: var(--crm-surface-soft, #eef8f1);
}
.module-stat-grid span {
color: var(--crm-muted, #6b7d76);
font-weight: 700;
}
.module-stat-grid strong {
font-size: 1.7rem;
}
.settings-option-group {
display: grid;
gap: 0.55rem;
padding: 0.75rem;
border: 1px solid color-mix(in srgb, var(--crm-line, #c9e9d1) 84%, transparent);
border-radius: 0.65rem;
background: color-mix(in srgb, var(--crm-surface, white) 86%, var(--crm-surface-soft, #eef8f1));
}
.settings-option-group h3 {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0;
font-size: 1rem;
color: var(--crm-muted, #6b7d76);
}
.settings-option-group h3 .ui-icon {
color: var(--crm-primary, #0d7a45);
}
.settings-option-grid {
display: grid;
gap: 0.75rem;
}
.settings-option-grid.five {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.settings-option-grid.two-options {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.settings-option-grid.three-options {
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.settings-option-grid.compact-options {
gap: 0.45rem;
align-items: stretch;
justify-content: stretch;
}
.settings-option-grid.compact-options.five {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.settings-option-grid.compact-options.two-options {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.settings-option-grid.compact-options.three-options {
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.settings-option {
position: relative;
display: grid;
gap: 0.35rem;
overflow: hidden;
min-height: 7.5rem;
padding: 0.85rem;
text-align: left;
color: var(--crm-text, #17352a);
border: 1px solid var(--crm-line, #c9e9d1);
border-radius: 0.75rem;
background: var(--crm-surface, white);
transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.settings-option:hover,
.settings-option.selected {
transform: translateY(-2px);
border-color: var(--crm-primary, #0d7a45);
box-shadow: var(--crm-shadow, 0 10px 24px rgba(10, 48, 28, 0.06));
}
.settings-option.selected {
border-color: var(--option-accent, var(--crm-primary, #0d7a45));
outline: 0;
background:
linear-gradient(180deg, color-mix(in srgb, var(--option-accent, var(--crm-primary, #0d7a45)) 10%, transparent), transparent 58%),
var(--crm-surface, white);
box-shadow:
0 0 0 2px color-mix(in srgb, var(--option-accent, var(--crm-primary, #0d7a45)) 28%, transparent),
var(--crm-shadow, 0 10px 24px rgba(10, 48, 28, 0.06));
}
.settings-option.selected::before,
.settings-option.selected::after {
content: "";
position: absolute;
left: 0.75rem;
right: 0.75rem;
height: 3px;
border-radius: 999px;
background: var(--option-accent, var(--crm-primary, #0d7a45));
pointer-events: none;
}
.settings-option.selected::before {
top: 0.28rem;
}
.settings-option.selected::after {
bottom: 0.28rem;
}
.settings-option small {
color: var(--crm-muted, #6b7d76);
}
.settings-option small + small {
font-size: 0.74rem;
}
.settings-option.compact {
display: grid;
grid-template-columns: 1.75rem minmax(0, 1fr);
align-items: center;
justify-items: start;
column-gap: 0.55rem;
width: 100%;
min-height: 2.85rem;
padding: 0.54rem 0.8rem;
border-radius: 0.55rem;
text-align: left;
}
.settings-option.compact:hover,
.settings-option.compact.selected {
transform: none;
}
.settings-option.compact.selected {
border-color: var(--option-accent, var(--crm-primary, #0d7a45));
outline: 0;
background:
linear-gradient(180deg, color-mix(in srgb, var(--option-accent, var(--crm-primary, #0d7a45)) 10%, transparent), transparent 58%),
var(--crm-surface, white);
box-shadow:
inset 0 3px 0 var(--option-accent, var(--crm-primary, #0d7a45)),
inset 0 -3px 0 var(--option-accent, var(--crm-primary, #0d7a45)),
0 0 0 2px color-mix(in srgb, var(--option-accent, var(--crm-primary, #0d7a45)) 34%, transparent),
var(--crm-shadow, 0 10px 24px rgba(10, 48, 28, 0.06));
}
.settings-option.compact.selected::before,
.settings-option.compact.selected::after {
display: none;
}
.settings-option.compact .theme-swatch,
.settings-option.compact .option-icon {
grid-column: 1;
justify-self: center;
margin: 0;
width: 1.55rem;
height: 1.55rem;
font-size: 0.72rem;
}
.settings-option.compact .option-icon {
color: var(--option-accent, var(--crm-primary, #0d7a45));
border: 1px solid color-mix(in srgb, var(--option-accent, var(--crm-primary, #0d7a45)) 32%, transparent);
background: color-mix(in srgb, var(--option-accent, var(--crm-primary, #0d7a45)) 12%, var(--crm-surface, white));
}
.settings-option.compact .option-icon .ui-icon {
width: 0.95rem;
height: 0.95rem;
}
.settings-option.compact strong {
grid-column: 2;
justify-self: start;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.1;
text-align: left;
white-space: nowrap;
}
.admin-lock-grid {
display: grid;
gap: 0.35rem;
min-width: 180px;
}
.admin-lock-grid label {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0;
font-size: 0.82rem;
}
.theme-swatch,
.option-icon {
display: grid;
place-items: center;
width: 2.15rem;
height: 2.15rem;
color: white;
border-radius: 999px;
font-weight: 800;
}
.option-icon {
background: var(--crm-primary, #0d7a45);
}
.swatch-light { background: #355c9c; }
.swatch-dark { background: #10151d; }
.swatch-green { background: #0d7a45; }
.swatch-blue { background: #1268b3; }
.swatch-purple { background: #7b3fb2; }
.crm-shell.view-desktop {
width: 100%;
max-width: none;
margin: 0;
}
.crm-shell.view-desktop main {
max-width: none;
margin: 0;
border-left: 0;
border-right: 0;
box-shadow: none;
}
.crm-shell.view-mobile .settings-option-grid.compact-options,
.crm-shell.view-mobile .settings-option-grid.compact-options.five,
.crm-shell.view-mobile .settings-option-grid.compact-options.two-options,
.crm-shell.view-mobile .settings-option-grid.compact-options.three-options {
grid-template-columns: 1fr;
}
.crm-shell.view-mobile .top-row-actions {
display: grid;
grid-template-columns: 1fr;
width: 100%;
}
.crm-shell.view-mobile .top-settings-link,
.crm-shell.view-mobile .user-badge {
justify-content: center;
min-width: 0;
width: 100%;
}
.crm-shell.view-mobile .user-badge {
max-width: 100%;
padding-right: 0.55rem;
}
.crm-shell.view-mobile .user-badge-avatar {
width: 1.9rem;
height: 1.9rem;
}
.crm-shell.menu-horizontal {
flex-direction: column;
}
.crm-shell.menu-horizontal .sidebar {
flex: 0 0 auto;
width: 100%;
min-height: auto;
position: sticky;
top: 0;
z-index: 11;
background: var(--crm-surface, white);
border-bottom: 1px solid var(--crm-line, #c9e9d1);
box-shadow: 0 10px 32px rgba(20, 39, 62, 0.08);
}
.crm-shell.menu-horizontal .brand-row {
min-height: 3.25rem;
padding: 0.55rem 1rem 0.45rem;
background:
linear-gradient(90deg, color-mix(in srgb, var(--crm-primary-soft, #dff5e7) 58%, transparent), transparent 42%),
var(--crm-surface, white);
border-bottom: 1px solid var(--crm-line, #c9e9d1);
}
.crm-shell.menu-horizontal .navbar-brand {
color: var(--crm-text, #17352a);
font-size: 1rem;
}
.crm-shell.menu-horizontal .brand-mark {
color: var(--crm-primary, #0d7a45);
border-color: color-mix(in srgb, var(--crm-primary, #0d7a45) 32%, var(--crm-line, #c9e9d1));
background: var(--crm-primary-soft, #dff5e7);
}
.crm-shell.menu-horizontal .navbar-toggler {
display: none;
}
.crm-shell.menu-horizontal .nav-strip {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start;
gap: 0.45rem;
padding: 0.5rem 0.75rem 0.65rem;
background: color-mix(in srgb, var(--crm-surface, white) 86%, var(--crm-surface-soft, #eef8f1));
}
.crm-shell.menu-horizontal .nav-pager {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
margin-top: 0.15rem;
color: var(--crm-primary, #0d7a45);
border: 1px solid var(--crm-line, #c9e9d1);
border-radius: 0.55rem;
background: var(--crm-surface, white);
box-shadow: 0 6px 18px rgba(20, 39, 62, 0.08);
transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
.crm-shell.menu-horizontal .nav-pager:hover,
.crm-shell.menu-horizontal .nav-pager:focus-visible {
color: white;
border-color: var(--crm-primary, #0d7a45);
background: var(--crm-primary, #0d7a45);
outline: none;
transform: translateY(-1px);
}
.crm-shell.menu-horizontal .nav-scrollable {
display: block;
height: auto;
max-height: 7.6rem;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
padding: 0.15rem 0.2rem 0.35rem;
scroll-behavior: smooth;
scrollbar-width: thin;
mask-image: linear-gradient(to right, transparent 0, black 1rem, black calc(100% - 1rem), transparent 100%);
}
.crm-shell.menu-horizontal .crm-nav {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-content: flex-start;
gap: 0.4rem;
width: max(100%, 1180px);
min-width: 100%;
max-width: none;
}
.crm-shell.menu-horizontal .nav-item {
flex: 0 0 auto;
padding: 0 !important;
font-size: 0.88rem;
}
.crm-shell.menu-horizontal .nav-item .nav-link,
.crm-shell.menu-horizontal .nav-item button.nav-link {
width: auto;
min-height: 2.35rem;
padding: 0.45rem 0.75rem;
color: var(--crm-text, #17352a);
border: 1px solid color-mix(in srgb, var(--crm-line, #c9e9d1) 86%, var(--crm-primary, #0d7a45));
border-left: 3px solid color-mix(in srgb, var(--crm-primary, #0d7a45) 38%, var(--crm-line, #c9e9d1));
border-radius: 0.65rem;
background: var(--crm-surface, white);
box-shadow: 0 3px 12px rgba(20, 39, 62, 0.05);
white-space: nowrap;
text-decoration: none;
transition: transform 140ms ease, color 140ms ease, border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.crm-shell.menu-horizontal .nav-item .nav-link:hover,
.crm-shell.menu-horizontal .nav-item button.nav-link:hover {
color: var(--crm-primary-dark, #075c35);
border-color: var(--crm-primary, #0d7a45);
background: var(--crm-primary-soft, #dff5e7);
transform: translateY(-1px);
}
.crm-shell.menu-horizontal .nav-item .nav-link.active {
color: white;
border-color: var(--crm-primary, #0d7a45);
border-left-color: var(--crm-primary-dark, #075c35);
background: linear-gradient(135deg, var(--crm-primary, #0d7a45), var(--crm-primary-dark, #075c35));
box-shadow:
inset 0 -3px 0 rgba(255, 255, 255, 0.35),
0 8px 20px color-mix(in srgb, var(--crm-primary, #0d7a45) 24%, transparent);
}
.crm-shell.menu-horizontal .nav-item .bi {
filter: brightness(0) saturate(100%) invert(31%) sepia(61%) saturate(845%) hue-rotate(177deg) brightness(88%) contrast(88%);
opacity: 0.78;
}
.crm-shell.menu-horizontal .nav-item .nav-link:hover .bi,
.crm-shell.menu-horizontal .nav-item .nav-link.active .bi {
filter: none;
opacity: 1;
}
.crm-shell.view-mobile .nav-strip,
.crm-shell.view-tablet .nav-strip,
.crm-shell.view-mobile.menu-horizontal .nav-strip,
.crm-shell.view-tablet.menu-horizontal .nav-strip {
display: block;
padding: 0;
background: transparent;
}
.crm-shell.view-mobile .nav-pager,
.crm-shell.view-tablet .nav-pager,
.crm-shell.view-mobile.menu-horizontal .nav-pager,
.crm-shell.view-tablet.menu-horizontal .nav-pager {
display: none;
}
.crm-shell.view-mobile .navbar-toggler,
.crm-shell.view-tablet .navbar-toggler {
display: flex;
align-items: center;
justify-content: center;
border-color: var(--crm-primary-dark, #075c35);
background-color: var(--crm-primary, #0d7a45);
}
.crm-shell.view-mobile .nav-scrollable,
.crm-shell.view-tablet .nav-scrollable,
.crm-shell.view-mobile.menu-horizontal .nav-scrollable,
.crm-shell.view-tablet.menu-horizontal .nav-scrollable {
display: block;
height: auto;
max-height: 0;
overflow: hidden;
overflow-x: hidden;
padding: 0 0.55rem;
opacity: 0;
transition: max-height 180ms ease, opacity 140ms ease, padding 180ms ease;
mask-image: none;
}
.crm-shell.view-mobile .nav-scrollable.is-open,
.crm-shell.view-tablet .nav-scrollable.is-open,
.crm-shell.view-mobile.menu-horizontal .nav-scrollable.is-open,
.crm-shell.view-tablet.menu-horizontal .nav-scrollable.is-open,
.crm-shell.view-mobile .nav-disclosure[open] .nav-scrollable,
.crm-shell.view-tablet .nav-disclosure[open] .nav-scrollable,
.crm-shell.view-mobile.menu-horizontal .nav-disclosure[open] .nav-scrollable,
.crm-shell.view-tablet.menu-horizontal .nav-disclosure[open] .nav-scrollable {
max-height: none;
overflow-y: visible;
padding: 0.55rem;
opacity: 1;
}
.crm-shell.view-mobile .crm-nav,
.crm-shell.view-tablet .crm-nav,
.crm-shell.view-mobile.menu-horizontal .crm-nav,
.crm-shell.view-tablet.menu-horizontal .crm-nav {
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 0.25rem;
width: 100%;
min-width: 0;
}
.crm-shell.view-mobile .nav-item .nav-link,
.crm-shell.view-tablet .nav-item .nav-link,
.crm-shell.view-mobile .nav-item button.nav-link,
.crm-shell.view-tablet .nav-item button.nav-link {
width: 100%;
min-height: 2.65rem;
}
@media (max-width: 760px) {
.page-heading,
.top-row {
align-items: flex-start;
flex-direction: column;
}
.crm-hero {
grid-template-columns: 1fr;
}
.app-home-hero {
min-height: 26rem;
margin-bottom: 0.85rem;
padding: 1.25rem;
background:
linear-gradient(180deg, rgba(249, 255, 252, 0.95), rgba(249, 255, 252, 0.76) 58%, rgba(249, 255, 252, 0.36)),
var(--home-bg) center / cover no-repeat;
}
.home-utility-grid {
grid-template-columns: 1fr;
margin: 0 0 1rem;
}
.home-utility-card {
min-height: 0;
}
.auth-shell {
grid-template-columns: 1fr;
}
.auth-shell-login {
min-height: max(31rem, calc(100vh - 11rem));
padding: 1rem;
}
.auth-login-card {
width: 100%;
padding: 1.15rem;
}
.auth-card-header {
gap: 0.7rem;
}
.auth-brand-icon {
width: 2.65rem;
height: 2.65rem;
}
.settings-list {
grid-template-columns: 1fr;
}
.file-upload-row {
grid-template-columns: 1fr;
}
.user-badge {
max-width: 100%;
width: 100%;
}
.content {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.settings-option {
min-height: auto;
}
.module-dashboard,
.module-stat-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 800px) {
.crm-shell.menu-horizontal .navbar-toggler {
display: flex;
align-items: center;
justify-content: center;
border-color: var(--crm-primary-dark, #075c35);
background-color: var(--crm-primary, #0d7a45);
}
.crm-shell.menu-horizontal .nav-strip {
display: block;
padding: 0;
background: transparent;
}
.crm-shell.menu-horizontal .nav-pager {
display: none;
}
.crm-shell.menu-horizontal .nav-scrollable {
max-height: 0;
overflow-x: hidden;
overflow-y: hidden;
padding: 0 0.55rem;
opacity: 0;
mask-image: none;
}
.crm-shell.menu-horizontal .nav-scrollable.is-open,
.crm-shell.menu-horizontal .nav-disclosure[open] .nav-scrollable {
max-height: none;
overflow-y: visible;
padding: 0.55rem;
opacity: 1;
}
.crm-shell.menu-horizontal .crm-nav {
flex-direction: column !important;
flex-wrap: nowrap !important;
width: 100%;
min-width: 0;
}
.crm-shell.menu-horizontal .nav-item .nav-link,
.crm-shell.menu-horizontal .nav-item button.nav-link {
width: 100%;
min-height: 2.65rem;
}
}
h1:focus {
outline: none;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid #e50000;
}
.validation-message {
color: #e50000;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
border-color: #929292;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
.admin-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1rem;
}
.admin-card-grid.compact {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.admin-app-card,
.admin-detail-grid .crm-card {
display: grid;
gap: 1rem;
}
.admin-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.admin-field-grid,
.compact-form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.75rem;
}
.admin-field-grid.compact {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.55rem;
}
.admin-field-grid .wide {
grid-column: 1 / -1;
}
.admin-field-grid label,
.compact-form-grid label {
display: grid;
gap: 0.25rem;
color: var(--crm-muted);
font-size: 0.88rem;
font-weight: 700;
}
.admin-lock-grid,
.admin-checkbox-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.45rem 0.75rem;
}
.admin-lock-grid label,
.admin-checkbox-grid label,
.inline-checkbox {
display: inline-flex !important;
align-items: center;
gap: 0.45rem;
color: var(--crm-text);
font-weight: 600;
}
.admin-table-wrap {
overflow-x: auto;
border: 1px solid var(--crm-line);
border-radius: 0.75rem;
}
.admin-table {
width: 100%;
min-width: 920px;
border-collapse: collapse;
}
.admin-table th,
.admin-table td {
padding: 0.7rem 0.8rem;
border-bottom: 1px solid var(--crm-line);
vertical-align: top;
text-align: left;
}
.admin-table th {
background: var(--crm-surface-soft);
color: var(--crm-text);
font-size: 0.82rem;
text-transform: uppercase;
}
.admin-table td small {
display: block;
color: var(--crm-muted);
}
.admin-table tbody tr:nth-child(even) {
background: color-mix(in srgb, var(--crm-surface-soft) 58%, transparent);
}
.admin-chip-list,
.admin-actions {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.admin-chip {
display: inline-flex;
align-items: center;
min-height: 1.7rem;
padding: 0.2rem 0.55rem;
border: 1px solid var(--crm-line);
border-radius: 999px;
background: var(--crm-primary-soft);
color: var(--crm-primary-dark);
font-size: 0.8rem;
font-weight: 700;
}
.admin-chip-list.stacked {
align-items: flex-start;
flex-direction: column;
}
.admin-chip small {
display: block;
font-size: 0.68rem;
font-weight: 700;
opacity: 0.8;
}
.admin-chip.selected {
border-color: var(--crm-primary);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--crm-primary) 14%, transparent);
}
.admin-membership-list {
display: grid;
gap: 0.55rem;
grid-column: 1 / -1;
}
.admin-membership-list.wide {
grid-column: 1 / -1;
}
.admin-membership-row {
align-items: center;
background: color-mix(in srgb, var(--crm-surface) 84%, transparent);
border: 1px solid color-mix(in srgb, var(--crm-primary) 18%, var(--crm-line));
border-radius: 0.75rem;
display: grid;
gap: 0.5rem;
grid-template-columns: minmax(0, 1.3fr) minmax(8rem, 0.8fr) auto;
padding: 0.55rem;
}
.admin-membership-row.is-active {
background: color-mix(in srgb, var(--crm-primary-soft) 65%, var(--crm-surface));
border-color: color-mix(in srgb, var(--crm-primary) 38%, var(--crm-line));
}
.admin-membership-row .inline-checkbox,
.admin-membership-row .inline-radio {
align-items: center;
display: flex;
gap: 0.45rem;
margin: 0;
}
.admin-membership-row small {
color: var(--crm-muted);
display: block;
font-size: 0.72rem;
}
.theme-dark .app-home-hero,
.theme-dark .app-home-hero h1,
.theme-dark .app-home-hero .lead {
color: #10231d;
}
.theme-dark .app-home-hero .eyebrow {
color: color-mix(in srgb, var(--home-accent, #0d7a45) 78%, #10231d);
}
.theme-dark .home-utility-card {
background:
linear-gradient(145deg, rgba(24, 35, 51, 0.95), color-mix(in srgb, var(--utility-accent) 10%, rgba(24, 35, 51, 0.9))),
var(--crm-surface, #182333);
}
.theme-dark .home-utility-card p,
.theme-dark .home-utility-card strong {
color: var(--crm-text, #edf6ff);
}
@media (max-width: 640px) {
.admin-membership-row {
grid-template-columns: 1fr;
}
}
.admin-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 1rem;
}
.admin-detail-grid.compact {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.75rem;
align-items: start;
}
.admin-detail-card {
gap: 0.55rem !important;
align-content: start;
padding: 0.8rem;
}
.admin-detail-card h2 {
margin: 0;
font-size: 1.08rem;
}
.admin-detail-card .eyebrow,
.admin-detail-card .text-muted {
margin-bottom: 0.15rem;
}
.admin-detail-card .btn {
min-height: 2.35rem;
}
.admin-user-summary {
display: grid;
gap: 0.4rem;
padding: 0.65rem;
border: 1px solid var(--crm-line);
border-radius: 0.55rem;
background: var(--crm-surface-soft);
}
.admin-user-summary span {
color: var(--crm-muted);
}
.admin-user-summary strong {
color: var(--crm-text);
}
.admin-permission-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
.admin-permission-row {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.4rem 0;
}
.admin-permission-row small {
display: block;
color: var(--crm-muted);
}
.security-layout {
display: grid;
grid-template-columns: minmax(360px, 1fr) minmax(280px, 0.8fr);
gap: 1rem;
align-items: start;
}
.security-card {
display: grid;
gap: 0.8rem !important;
margin-bottom: 0;
border-left: 4px solid var(--section-accent, var(--crm-primary));
}
.security-card-reset {
--section-accent: #0f766e;
}
.security-form-grid {
gap: 0.75rem;
align-items: end;
}
.security-form-grid label:not(.inline-checkbox) {
min-width: 0;
}
.security-form-grid .inline-checkbox {
align-self: end;
min-height: 2.35rem;
padding: 0.35rem 0.55rem;
border: 1px solid var(--crm-line);
border-radius: 0.5rem;
background: var(--crm-surface-soft);
}
.admin-row-actions {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.admin-modal-backdrop {
position: fixed;
inset: 0;
z-index: 1200;
display: grid;
place-items: center;
padding: 1rem;
background: color-mix(in srgb, var(--crm-text) 32%, transparent);
backdrop-filter: blur(3px);
}
.admin-modal {
display: grid;
gap: 0.85rem;
width: min(620px, 100%);
max-height: min(90dvh, 860px);
overflow: auto;
padding: 1rem;
border: 1px solid var(--crm-line);
border-radius: 0.75rem;
background: var(--crm-surface);
box-shadow: 0 24px 80px color-mix(in srgb, var(--crm-text) 22%, transparent);
}
.admin-modal-wide {
width: min(1040px, 100%);
}
.admin-modal-head,
.admin-modal-actions {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.admin-modal-head h2 {
margin: 0;
font-size: 1.25rem;
}
.admin-modal-close {
width: 2.35rem;
min-width: 2.35rem;
justify-content: center;
padding-inline: 0;
}
.admin-modal-body {
min-width: 0;
}
.admin-modal-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.admin-modal-actions {
flex-wrap: wrap;
justify-content: flex-end;
}
.admin-dialog-alert {
margin: 0;
}
.admin-modal-summary {
display: grid;
gap: 0.15rem;
padding: 0.65rem;
border: 1px solid var(--crm-line);
border-radius: 0.55rem;
background: var(--crm-surface-soft);
}
.admin-modal-summary span {
color: var(--crm-muted);
}
.admin-mobile-form {
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
width: min(540px, calc(100vw - 1.25rem));
max-height: min(94dvh, 880px);
gap: 0;
overflow: hidden;
padding: 0;
border-radius: 0.8rem;
}
.admin-mobile-form .admin-modal-head {
align-items: center;
padding: 0.85rem 1rem;
border-bottom: 1px solid color-mix(in srgb, white 22%, transparent);
background: linear-gradient(135deg, var(--crm-primary-dark), var(--crm-primary));
color: white;
user-select: none;
}
.admin-mobile-form .admin-modal-head h2 {
margin: 0;
color: white;
font-size: 1.08rem;
line-height: 1.2;
}
.admin-modal-drag-handle {
cursor: grab;
}
.admin-modal-drag-handle:active {
cursor: grabbing;
}
.admin-mobile-form .admin-modal-close {
border-color: color-mix(in srgb, white 70%, transparent);
background: color-mix(in srgb, white 16%, transparent);
color: white;
}
.admin-mobile-form .admin-modal-body {
display: grid;
gap: 0.75rem;
min-height: 0;
overflow-y: auto;
padding: 0.9rem;
}
.admin-mobile-form .admin-modal-actions {
padding: 0.75rem 0.9rem 0.9rem;
border-top: 1px solid var(--crm-line);
background: color-mix(in srgb, var(--crm-surface-soft) 70%, transparent);
}
.admin-form-sections {
display: grid;
gap: 0.75rem;
}
.admin-form-block {
--block-accent: var(--crm-primary);
display: grid;
gap: 0.55rem;
margin: 0;
padding: 0.58rem 0.68rem 0.7rem;
border: 1px solid color-mix(in srgb, var(--block-accent) 30%, var(--crm-line));
border-left: 4px solid var(--block-accent);
border-radius: 0.65rem;
background: color-mix(in srgb, var(--crm-surface-soft) 42%, var(--crm-surface));
}
.admin-form-block legend {
float: none;
width: 100%;
margin: 0;
padding: 0;
color: var(--block-accent);
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
}
.admin-form-block.is-collapsed {
padding-bottom: 0.58rem;
}
.admin-section-toggle,
.admin-section-static {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 2rem;
gap: 0.5rem;
padding: 0;
border: 0;
background: transparent;
color: var(--block-accent);
font: inherit;
letter-spacing: 0;
text-align: left;
text-transform: uppercase;
}
.admin-section-toggle {
cursor: pointer;
}
.admin-section-toggle:focus-visible {
outline: 2px solid color-mix(in srgb, var(--block-accent) 48%, white);
outline-offset: 0.2rem;
border-radius: 0.35rem;
}
.admin-section-chevron {
display: inline-grid;
place-items: center;
width: 1.45rem;
height: 1.45rem;
border: 1px solid color-mix(in srgb, var(--block-accent) 42%, var(--crm-line));
border-radius: 999px;
background: color-mix(in srgb, var(--block-accent) 8%, transparent);
color: var(--block-accent);
font-size: 1rem;
line-height: 1;
}
.admin-form-block-fields {
display: grid;
gap: 0.62rem;
}
.admin-form-block label,
.admin-readonly-field {
display: grid;
gap: 0.25rem;
margin: 0;
color: var(--crm-muted);
font-size: 0.88rem;
font-weight: 700;
}
.admin-form-block .form-control,
.admin-form-block .form-select {
width: 100%;
min-height: 2.45rem;
}
.admin-form-block-account {
--block-accent: #087f5b;
}
.admin-form-block-access {
--block-accent: #2563eb;
}
.admin-form-block-localization {
--block-accent: #7c3aed;
}
.admin-form-block-interface {
--block-accent: #b45309;
}
.admin-form-block-security {
--block-accent: #be123c;
}
.admin-label {
color: var(--crm-muted);
}
.admin-password-form {
width: min(480px, calc(100vw - 1.25rem));
}
@media (max-width: 760px) {
.admin-detail-grid,
.admin-card-grid,
.security-layout {
grid-template-columns: 1fr;
}
.admin-card-head {
flex-direction: column;
}
.admin-row-actions {
flex-direction: column;
align-items: stretch;
}
.admin-row-actions .btn,
.admin-modal-actions .btn {
width: 100%;
justify-content: center;
}
.admin-modal-backdrop {
align-items: stretch;
justify-items: stretch;
padding: 0.5rem;
}
.admin-modal {
width: 100%;
max-height: calc(100dvh - 1rem);
border-radius: 0.65rem;
}
.admin-modal-head,
.admin-modal-actions {
align-items: stretch;
}
.admin-modal-grid {
grid-template-columns: 1fr;
}
.admin-mobile-form {
width: 100%;
max-height: calc(100dvh - 1rem);
}
.admin-mobile-form .admin-modal-body {
max-height: none;
min-height: 0;
padding: 0.75rem;
}
.admin-mobile-form .admin-modal-head,
.admin-mobile-form .admin-modal-actions {
padding-inline: 0.75rem;
}
}
.admin-card-tools {
align-items: center;
display: flex;
gap: 0.5rem;
}
.admin-lock-row {
align-items: center;
display: flex;
gap: 0.45rem;
justify-content: space-between;
}
.admin-lock-row label {
flex: 1 1 auto;
min-width: 0;
}
.modal-helper-button {
align-items: center;
background: color-mix(in srgb, var(--crm-primary-soft) 84%, white);
border: 1px solid color-mix(in srgb, var(--crm-primary) 45%, var(--crm-line));
border-radius: 999px;
color: var(--crm-primary-dark);
cursor: pointer;
display: inline-flex;
font-size: 0.78rem;
font-weight: 900;
height: 1.75rem;
justify-content: center;
line-height: 1;
min-width: 1.75rem;
padding: 0 0.45rem;
transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.modal-helper-button:hover,
.modal-helper-button:focus-visible {
background: var(--crm-primary);
color: white;
box-shadow: 0 0.5rem 1.2rem color-mix(in srgb, var(--crm-primary) 22%, transparent);
transform: translateY(-1px);
}
.modal-helper-button.is-compact {
height: 1.35rem;
min-width: 1.35rem;
padding: 0;
}
.modal-helper-backdrop {
align-items: center;
background: rgba(6, 32, 22, 0.42);
backdrop-filter: blur(8px);
display: flex;
inset: 0;
justify-content: center;
padding: clamp(0.75rem, 3vw, 2rem);
position: fixed;
z-index: 1400;
}
.modal-helper-window {
background: var(--crm-surface);
border: 1px solid color-mix(in srgb, var(--crm-primary) 35%, var(--crm-line));
border-radius: 1.2rem;
box-shadow: 0 1.6rem 5rem rgba(0, 0, 0, 0.28);
display: grid;
grid-template-rows: auto minmax(0, 1fr);
max-height: min(84vh, 760px);
max-width: min(920px, 96vw);
overflow: hidden;
width: 100%;
}
.modal-helper-head {
align-items: center;
background: linear-gradient(135deg, var(--crm-primary), color-mix(in srgb, var(--crm-primary) 70%, #0ea36a));
color: white;
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.2rem;
}
.modal-helper-head .eyebrow,
.modal-helper-head h2 {
color: white;
margin: 0;
}
.modal-helper-head h2 {
font-size: clamp(1.15rem, 2vw, 1.65rem);
}
.modal-helper-close {
align-items: center;
background: rgba(255, 255, 255, 0.13);
border: 1px solid rgba(255, 255, 255, 0.62);
border-radius: 0.75rem;
color: white;
cursor: pointer;
display: inline-flex;
font-size: 1.4rem;
height: 2.25rem;
justify-content: center;
width: 2.25rem;
}
.modal-helper-body {
overflow: auto;
padding: clamp(1rem, 3vw, 1.45rem);
}
.helper-rich {
color: var(--crm-text);
display: grid;
gap: 1rem;
}
.helper-lead {
font-size: 1.05rem;
margin: 0;
}
.helper-callout {
border-radius: 1rem;
display: grid;
gap: 0.35rem;
padding: 1rem;
}
.helper-callout-green {
background: color-mix(in srgb, var(--crm-primary-soft) 80%, white);
border: 1px solid color-mix(in srgb, var(--crm-primary) 32%, var(--crm-line));
}
.helper-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.helper-tabs span {
background: color-mix(in srgb, var(--crm-primary-soft) 70%, white);
border: 1px solid color-mix(in srgb, var(--crm-primary) 25%, var(--crm-line));
border-radius: 999px;
color: var(--crm-primary-dark);
font-weight: 800;
padding: 0.35rem 0.7rem;
}
.helper-table {
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
width: 100%;
}
.helper-table th,
.helper-table td {
border-bottom: 1px solid var(--crm-line);
padding: 0.7rem;
text-align: left;
vertical-align: top;
}
.helper-table th {
background: color-mix(in srgb, var(--crm-primary-soft) 72%, white);
color: var(--crm-primary-dark);
font-size: 0.8rem;
text-transform: uppercase;
}
.helper-table tr.is-focus td {
background: color-mix(in srgb, #ffe48a 32%, var(--crm-surface));
box-shadow: inset 0.25rem 0 0 color-mix(in srgb, var(--crm-primary) 72%, #f0a000);
}
.helper-diagram {
align-items: center;
display: grid;
gap: 0.5rem;
grid-template-columns: 1fr auto 1fr;
}
.helper-diagram span,
.helper-diagram strong {
border-radius: 0.9rem;
padding: 0.75rem;
text-align: center;
}
.helper-diagram span {
background: color-mix(in srgb, var(--crm-surface-soft) 82%, white);
border: 1px dashed var(--crm-line);
}
.helper-diagram strong {
background: var(--crm-primary);
color: white;
}
@media (max-width: 700px) {
.helper-diagram {
grid-template-columns: 1fr;
}
.helper-table {
display: block;
overflow-x: auto;
}
.modal-helper-window {
max-height: 88vh;
}
}
/* App logo slots and replaceable project assets. */
.brand-hero-panel {
justify-items: center;
text-align: center;
min-height: 11rem;
}
.brand-hero-panel strong {
font-size: 1.15rem;
color: var(--crm-text, #17352a);
}
.brand-hero-panel span {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.76rem;
font-weight: 800;
}
.hero-logo,
.crm-shell .top-row-logo,
.crm-shell .brand-row::before {
content: "";
flex: 0 0 auto;
width: 9rem;
height: 2.5rem;
border: 1px solid var(--crm-line, #c9e9d1);
border-radius: 0.7rem;
background-color: #ffffff;
background-image: url("/images/logos/core.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
box-shadow: 0 8px 24px rgba(20, 39, 62, 0.08);
}
.hero-logo {
width: min(100%, 18rem);
height: 4.8rem;
}
.crm-shell.business-electronics .hero-logo,
.crm-shell.business-electronics .top-row-logo,
.crm-shell.business-electronics .brand-row::before {
background-image: url("/images/logos/electronics.svg"), url("/images/logos/core.svg");
}
.crm-shell.business-food-artistry .hero-logo,
.crm-shell.business-food-artistry .top-row-logo,
.crm-shell.business-food-artistry .brand-row::before {
background-image: url("/images/logos/food-artistry.svg"), url("/images/logos/core.svg");
}
.crm-shell.business-language-agency .hero-logo,
.crm-shell.business-language-agency .top-row-logo,
.crm-shell.business-language-agency .brand-row::before {
background-image: url("/images/logos/language-agency.svg"), url("/images/logos/core.svg");
}
.crm-shell .top-row-brand {
display: flex;
align-items: center;
min-width: 0;
gap: 0.75rem;
}
.crm-shell .brand-row {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.75rem;
}
.crm-shell .navbar-brand {
flex: 1 1 auto;
min-width: 0;
}
.crm-shell.business-electronics .brand-mark,
.crm-shell.business-food-artistry .brand-mark,
.crm-shell.business-language-agency .brand-mark {
display: none;
}
.crm-shell.view-mobile .top-row-brand,
.crm-shell.view-tablet .top-row-brand {
width: 100%;
}
.crm-shell.view-mobile .top-row-logo {
width: 7.6rem;
height: 2.15rem;
}
@media (max-width: 760px) {
.crm-hero {
grid-template-columns: 1fr;
}
.brand-hero-panel {
min-height: 8.8rem;
}
}
/* Horizontal shell cleanup and admin filtering. */
.crm-shell.menu-horizontal main > .top-row {
display: none;
}
.crm-shell.menu-horizontal .brand-actions {
display: flex;
align-items: center;
margin-left: auto;
padding-right: 0.4rem;
}
.crm-shell.menu-horizontal .nav-strip:not(.has-overflow) .nav-pager {
display: none;
}
.crm-shell.menu-horizontal .nav-strip.has-overflow .nav-pager {
display: grid;
}
.admin-filter-bar {
display: grid;
grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) minmax(180px, 1fr);
gap: 0.75rem;
align-items: end;
margin: 0.75rem 0 1rem;
padding: 0.85rem;
border: 1px solid var(--crm-line, #c9e9d1);
border-radius: 0.85rem;
background: color-mix(in srgb, var(--crm-surface-soft, #eef8f1) 72%, white);
}
.admin-filter-bar label {
display: grid;
gap: 0.3rem;
color: var(--crm-muted, #6b7d76);
font-weight: 700;
}
.admin-scope-lock {
display: grid;
gap: 0.15rem;
min-height: 3.2rem;
padding: 0.58rem 0.72rem;
border: 1px solid color-mix(in srgb, var(--crm-primary, #0b6fb8) 28%, var(--crm-line, #c9e9d1));
border-radius: 8px;
background: color-mix(in srgb, var(--crm-primary-soft, #eaf5ff) 62%, var(--crm-surface, #fff));
}
.admin-scope-lock span,
.admin-scope-lock small {
color: var(--crm-muted, #6b7d76);
font-size: 0.78rem;
font-weight: 700;
}
.admin-scope-lock strong {
color: var(--crm-text, #153528);
font-size: 0.98rem;
line-height: 1.2;
}
.admin-empty-row {
display: grid;
min-height: 3.8rem;
place-items: center;
color: var(--crm-muted, #6b7d76);
font-weight: 700;
}
.admin-scope-card {
display: grid;
gap: 0.7rem;
max-width: 48rem;
}
@media (max-width: 760px) {
.crm-shell.menu-horizontal .brand-actions {
max-width: 46%;
}
.admin-filter-bar {
grid-template-columns: 1fr;
}
}
/* Stable horizontal nav: no forced width and no overflow jitter. */
.crm-shell.menu-horizontal .crm-nav {
flex-wrap: nowrap !important;
width: max-content !important;
min-width: 100% !important;
}
.crm-shell.menu-horizontal .nav-scrollable {
overflow-x: auto;
overflow-y: hidden;
scrollbar-gutter: stable;
}
/* Hide native horizontal scrollbar; pager appears only on real overflow. */
.crm-shell.menu-horizontal .nav-scrollable {
-ms-overflow-style: none;
scrollbar-width: none;
}
.crm-shell.menu-horizontal .nav-scrollable::-webkit-scrollbar {
display: none;
}
/* Navigation visibility invariants.
The shell can switch menu and device modes from a user profile, so these
rules keep the menu renderable even when responsive/global styles overlap. */
.crm-shell.view-desktop.menu-vertical .navbar-toggler {
display: none !important;
}
.crm-shell.view-desktop.menu-vertical .nav-strip {
display: block !important;
padding: 0;
background: transparent;
}
.crm-shell.view-desktop.menu-vertical .nav-scrollable {
display: block !important;
height: calc(100vh - 11rem) !important;
max-height: none !important;
min-height: 0;
overflow-x: hidden !important;
overflow-y: auto !important;
padding: 0.75rem 0 !important;
opacity: 1 !important;
mask-image: none !important;
}
.crm-shell.view-desktop.menu-vertical .crm-nav {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
width: 100%;
min-width: 0;
}
.crm-shell.view-desktop.menu-horizontal .nav-strip {
display: grid !important;
}
.crm-shell.view-desktop.menu-horizontal .nav-scrollable {
display: block !important;
height: auto !important;
max-height: 7.6rem !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 0.15rem 0.2rem 0.35rem !important;
opacity: 1 !important;
}
.crm-shell.view-desktop.menu-horizontal .crm-nav {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
width: max-content !important;
min-width: 100% !important;
}
.crm-shell.view-mobile .nav-strip,
.crm-shell.view-tablet .nav-strip {
display: block !important;
}
.crm-shell.view-mobile .navbar-toggler,
.crm-shell.view-tablet .navbar-toggler {
display: flex !important;
align-items: center;
justify-content: center;
}
/* Auth and dark theme polish */
.auth-register-card {
width: min(100%, 520px);
}
.auth-message-card {
text-align: left;
}
.auth-inline-links {
margin-top: 0.85rem;
}
.auth-inline-links a {
justify-content: center;
}
.auth-card-header .eyebrow {
max-width: 20rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body:has(.theme-dark) {
background: #111820;
color: #edf5ff;
}
.theme-dark {
--crm-bg: #111820;
--crm-surface: #182333;
--crm-surface-soft: #202e40;
--crm-surface-strong: #0f1722;
--crm-line: #3d5870;
--crm-text: #edf6ff;
--crm-muted: #b4c5d4;
--crm-primary: #5fe0b2;
--crm-primary-dark: #31b98e;
--crm-primary-soft: #173b35;
--crm-shadow: 0 1rem 2.6rem rgba(2, 8, 15, 0.42);
background: radial-gradient(circle at top left, rgba(95, 224, 178, 0.12), transparent 34%), #111820;
color: var(--crm-text);
}
.theme-dark,
.theme-dark main,
.theme-dark .content,
.theme-dark .page,
.theme-dark .admin-page,
.theme-dark .crm-main {
color: var(--crm-text);
}
.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark h5,
.theme-dark h6,
.theme-dark p,
.theme-dark label,
.theme-dark .form-label,
.theme-dark .navbar-brand,
.theme-dark .admin-title,
.theme-dark .admin-app-title,
.theme-dark .crm-card strong {
color: var(--crm-text);
}
.theme-dark .text-muted,
.theme-dark small,
.theme-dark .admin-muted,
.theme-dark .crm-card span,
.theme-dark .user-badge-meta,
.theme-dark .hero-subtitle {
color: var(--crm-muted) !important;
}
.theme-dark a:not(.btn),
.theme-dark .btn-link {
color: #8ed9ff;
}
.theme-dark .top-row,
.theme-dark .brand-row,
.theme-dark .nav-strip,
.theme-dark .sidebar,
.theme-dark .nav-scrollable {
background: linear-gradient(135deg, #101923, #132637);
border-color: var(--crm-line);
color: var(--crm-text);
}
.theme-dark .crm-card,
.theme-dark .hero-card,
.theme-dark .hero-panel,
.theme-dark .admin-app-card,
.theme-dark .admin-detail-grid .crm-card,
.theme-dark .admin-filter-bar,
.theme-dark .admin-table-wrap,
.theme-dark .admin-modal,
.theme-dark .admin-mobile-form,
.theme-dark .admin-form-block,
.theme-dark .settings-console,
.theme-dark .helper-shell,
.theme-dark .helper-card,
.theme-dark .helper-section,
.theme-dark .modal-content,
.theme-dark .user-badge,
.theme-dark .top-settings-link {
background: linear-gradient(145deg, rgba(24, 35, 51, 0.98), rgba(29, 43, 60, 0.98));
border-color: var(--crm-line);
color: var(--crm-text);
box-shadow: var(--crm-shadow);
}
.theme-dark .hero-card {
background: linear-gradient(135deg, rgba(25, 53, 46, 0.95), rgba(24, 35, 51, 0.98));
}
.theme-dark .eyebrow,
.theme-dark .admin-kicker,
.theme-dark legend,
.theme-dark .section-title,
.theme-dark .helper-tabs button.active {
color: #79f2c8;
}
.theme-dark .form-control,
.theme-dark .form-select,
.theme-dark textarea.form-control,
.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
background-color: #101a26;
border-color: #49677f;
color: var(--crm-text);
}
.theme-dark .form-control::placeholder,
.theme-dark textarea.form-control::placeholder {
color: #8fa4b7;
}
.theme-dark .form-control:focus,
.theme-dark .form-select:focus,
.theme-dark textarea.form-control:focus {
background-color: #122033;
border-color: #74e7c2;
color: var(--crm-text);
box-shadow: 0 0 0 0.22rem rgba(95, 224, 178, 0.18);
}
.theme-dark .form-select option {
background: #101a26;
color: var(--crm-text);
}
.theme-dark .form-check-input {
background-color: #101a26;
border-color: #74bfa3;
}
.theme-dark .form-check-input:checked {
background-color: #31b98e;
border-color: #7df1ca;
}
.theme-dark .btn-primary,
.theme-dark .auth-login-submit {
background: linear-gradient(135deg, #46d79f, #2aa8dc);
border-color: transparent;
color: #06151c;
font-weight: 800;
}
.theme-dark .btn-primary:hover,
.theme-dark .auth-login-submit:hover {
background: linear-gradient(135deg, #6df0c4, #58c8f2);
color: #06151c;
}
.theme-dark .btn-outline-primary,
.theme-dark .top-settings-link,
.theme-dark .nav-pager,
.theme-dark .admin-icon-button {
background: rgba(18, 31, 45, 0.88);
border-color: #55d7ad;
color: #8af3cf;
}
.theme-dark .btn-outline-primary:hover,
.theme-dark .top-settings-link:hover,
.theme-dark .nav-pager:hover,
.theme-dark .admin-icon-button:hover {
background: rgba(95, 224, 178, 0.18);
color: #ffffff;
}
.theme-dark .nav-link {
background: rgba(18, 31, 45, 0.72);
border-color: rgba(120, 195, 170, 0.34);
color: #dcefff;
}
.theme-dark .nav-link.active,
.theme-dark .nav-link:hover,
.theme-dark .nav-link:focus {
background: linear-gradient(135deg, #5fe0b2, #7ecfff);
border-color: transparent;
color: #07141c;
box-shadow: 0 0.75rem 1.6rem rgba(57, 184, 145, 0.24);
}
.theme-dark .crm-table,
.theme-dark .admin-table,
.theme-dark .table {
--bs-table-color: var(--crm-text);
--bs-table-bg: transparent;
--bs-table-striped-color: var(--crm-text);
--bs-table-striped-bg: rgba(95, 224, 178, 0.07);
--bs-table-hover-color: var(--crm-text);
--bs-table-hover-bg: rgba(126, 207, 255, 0.1);
color: var(--crm-text);
}
.theme-dark .crm-table thead th,
.theme-dark .admin-table thead th,
.theme-dark .table thead th {
background: rgba(95, 224, 178, 0.13);
border-color: var(--crm-line);
color: #baf8df;
}
.theme-dark .crm-table td,
.theme-dark .admin-table td,
.theme-dark .table td,
.theme-dark .crm-table th,
.theme-dark .admin-table th,
.theme-dark .table th {
border-color: rgba(126, 163, 188, 0.26);
}
.theme-dark .badge,
.theme-dark .role-pill,
.theme-dark .application-pill {
background: rgba(95, 224, 178, 0.18);
border: 1px solid rgba(95, 224, 178, 0.35);
color: #baf8df;
}
.theme-dark .alert-info {
background: #12384b;
border-color: #3f96bd;
color: #d9f6ff;
}
.theme-dark .alert-success {
background: #143c2e;
border-color: #45c391;
color: #d9fff0;
}
.theme-dark .alert-danger,
.theme-dark .text-danger {
color: #ffb9bd !important;
}
.theme-dark .brand-row::before,
.theme-dark .top-row-logo,
.theme-dark .hero-logo {
background-color: #f8fbff;
border-color: rgba(149, 231, 204, 0.5);
}
.theme-dark .auth-card,
.theme-dark .auth-login-card {
background: linear-gradient(145deg, rgba(248, 255, 252, 0.97), rgba(238, 250, 255, 0.96));
color: #17352a;
}
.theme-dark .auth-card h1,
.theme-dark .auth-card p,
.theme-dark .auth-card label,
.theme-dark .auth-card .form-label {
color: #17352a;
}
.theme-dark .app-home-hero,
.theme-dark .app-home-hero h1,
.theme-dark .app-home-hero .lead {
color: #10231d;
}
.theme-dark .app-home-hero .eyebrow {
color: color-mix(in srgb, var(--home-accent, #0d7a45) 78%, #10231d);
}
.theme-dark .home-utility-card {
background:
linear-gradient(145deg, rgba(24, 35, 51, 0.95), color-mix(in srgb, var(--utility-accent) 10%, rgba(24, 35, 51, 0.9))),
var(--crm-surface, #182333);
}
.theme-dark .home-utility-card p,
.theme-dark .home-utility-card strong {
color: var(--crm-text, #edf6ff);
}
@media (max-width: 640px) {
.auth-register-card {
width: 100%;
}
.auth-card-header .eyebrow {
max-width: 14rem;
}
}
/* FoodArtistry host fallback: this published app owns the culinary badge even if
the current user profile temporarily reports the core business theme. */
.crm-shell .brand-row-logo,
.crm-shell .navbar-toggler-logo,
.crm-shell .top-row-logo,
.crm-shell.business-core .brand-row-logo,
.crm-shell.business-core .navbar-toggler-logo,
.crm-shell.business-core-crm .brand-row-logo,
.crm-shell.business-core-crm .navbar-toggler-logo {
background-image: url("/images/logos/food-artistry.svg"), url("/images/logos/core.svg");
}
/* Device-preview adaptive blocks: shared across Core CRM and child CRM hosts. */
.crm-shell.view-mobile .home-utility-grid,
.crm-shell.view-mobile .crm-grid,
.crm-shell.view-mobile .crm-grid.two,
.crm-shell.view-mobile .crm-grid.three,
.crm-shell.view-mobile .module-dashboard,
.crm-shell.view-mobile .form-grid,
.crm-shell.view-mobile .form-grid.three,
.crm-shell.view-mobile .settings-micro-grid,
.crm-shell.view-mobile .settings-hub,
.crm-shell.view-mobile .settings-hub-two-rows,
.crm-shell.view-mobile .settings-option-grid,
.crm-shell.view-mobile .settings-option-grid.five,
.crm-shell.view-mobile .settings-option-grid.two-options,
.crm-shell.view-mobile .settings-option-grid.three-options,
.crm-shell.view-mobile .settings-option-grid.compact-options,
.crm-shell.view-mobile .settings-option-grid.compact-options.five,
.crm-shell.view-mobile .settings-option-grid.compact-options.two-options,
.crm-shell.view-mobile .settings-option-grid.compact-options.three-options {
grid-template-columns: 1fr !important;
max-width: 100%;
}
.crm-shell.view-mobile .home-utility-grid {
margin: 0 0 1rem !important;
}
.crm-shell.view-mobile .home-utility-card {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
min-height: 0 !important;
padding: 0.78rem !important;
}
.crm-shell.view-mobile .home-utility-card p {
grid-column: 1 / -1;
}
.crm-shell.view-mobile .crm-card,
.crm-shell.view-mobile .home-utility-card,
.crm-shell.view-mobile .settings-hub-card,
.crm-shell.view-mobile .settings-option {
box-sizing: border-box;
max-width: 100%;
min-width: 0;
overflow-wrap: anywhere;
}
.crm-shell.view-mobile .module-stat-grid {
grid-template-columns: 1fr !important;
}
.crm-shell.view-tablet .home-utility-grid,
.crm-shell.view-tablet .crm-grid.three,
.crm-shell.view-tablet .module-dashboard,
.crm-shell.view-tablet .settings-hub,
.crm-shell.view-tablet .settings-hub-two-rows {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.crm-shell.view-tablet .crm-grid.two,
.crm-shell.view-tablet .form-grid {
grid-template-columns: 1fr !important;
}
@container (max-width: 620px) {
.home-utility-grid,
.crm-grid,
.crm-grid.two,
.crm-grid.three,
.module-dashboard,
.form-grid,
.form-grid.three,
.settings-micro-grid,
.settings-hub,
.settings-hub-two-rows,
.settings-option-grid,
.settings-option-grid.five,
.settings-option-grid.two-options,
.settings-option-grid.three-options,
.settings-option-grid.compact-options,
.settings-option-grid.compact-options.five,
.settings-option-grid.compact-options.two-options,
.settings-option-grid.compact-options.three-options {
grid-template-columns: 1fr !important;
max-width: 100%;
}
.home-utility-grid {
margin: 0 0 1rem !important;
}
.home-utility-card {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
min-height: 0 !important;
padding: 0.78rem !important;
overflow-wrap: anywhere;
}
.home-utility-card p {
grid-column: 1 / -1;
}
.module-stat-grid {
grid-template-columns: 1fr !important;
}
.crm-card,
.settings-hub-card,
.settings-option {
box-sizing: border-box;
min-width: 0;
overflow-wrap: anywhere;
}
}
@container (min-width: 621px) and (max-width: 900px) {
.home-utility-grid,
.crm-grid.three,
.module-dashboard,
.settings-hub,
.settings-hub-two-rows {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.crm-grid.two,
.form-grid {
grid-template-columns: 1fr !important;
}
}
/* Shared entity card ribbon: table/card view uses one vertical, mobile-friendly card feed. */
.crm-entity-card-list {
display: grid;
gap: .95rem;
grid-template-columns: minmax(0, 1fr);
width: 100%;
}
.crm-entity-card {
background: linear-gradient(135deg, var(--crm-surface, #ffffff), color-mix(in srgb, var(--crm-primary, #0d6efd) 4%, #ffffff));
border: 1px solid color-mix(in srgb, var(--crm-primary, #0d6efd) 20%, var(--crm-line, #c9e9d1));
border-radius: .75rem;
box-shadow: 0 .75rem 1.8rem rgba(15, 23, 42, .06);
box-sizing: border-box;
min-width: 0;
overflow: hidden;
position: relative;
width: 100%;
}
.crm-entity-card:hover,
.crm-entity-card:focus-within,
.crm-entity-card.active,
.crm-entity-card.selected {
border-color: var(--crm-primary, #0d6efd);
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--crm-primary, #0d6efd) 58%, transparent),
0 .9rem 2rem rgba(15, 23, 42, .08),
0 0 0 3px color-mix(in srgb, var(--crm-primary, #0d6efd) 11%, transparent);
}
@media (max-width: 720px) {
.crm-entity-card-list {
gap: .85rem;
grid-template-columns: minmax(0, 1fr) !important;
}
.crm-entity-card {
border-radius: .7rem;
}
}
/* Login polish: keep input hints out of the typing path and add a small generic sign-in motion. */
.auth-card-header {
position: relative;
}
.auth-card-header > div {
min-width: 0;
}
.auth-login-motion {
position: relative;
flex: 0 0 4.1rem;
width: 4.1rem;
height: 3.05rem;
margin-left: auto;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--crm-primary, #0d7a45) 24%, var(--crm-line, #c9e9d1));
border-radius: 8px;
background:
linear-gradient(135deg, color-mix(in srgb, var(--crm-primary-soft, #e7f8ee) 64%, white), rgba(255,255,255,.76));
box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 .7rem 1.45rem rgba(4, 120, 87, .1);
}
.auth-motion-door {
position: absolute;
right: .62rem;
bottom: .42rem;
width: 1.25rem;
height: 1.95rem;
border: 2px solid color-mix(in srgb, var(--crm-primary, #0d7a45) 62%, #0284c7);
border-radius: .18rem .18rem .08rem .08rem;
background: linear-gradient(180deg, rgba(255,255,255,.8), color-mix(in srgb, var(--crm-primary-soft, #e7f8ee) 58%, white));
}
.auth-motion-door::after {
content: "";
position: absolute;
right: .18rem;
top: .9rem;
width: .16rem;
height: .16rem;
border-radius: 999px;
background: var(--crm-primary, #0d7a45);
}
.auth-motion-person {
position: absolute;
left: .54rem;
bottom: .98rem;
width: .74rem;
height: .74rem;
border-radius: 999px;
background: linear-gradient(135deg, #047857, #0284c7);
box-shadow: 0 .45rem 1rem rgba(2, 132, 199, .18);
animation: authEnterPerson 2.8s ease-in-out infinite;
}
.auth-motion-person::after {
content: "";
position: absolute;
left: .16rem;
top: .62rem;
width: .42rem;
height: .95rem;
border-radius: .32rem .32rem .18rem .18rem;
background: linear-gradient(180deg, #047857, #0284c7);
}
.auth-motion-keypad {
position: absolute;
left: 1.58rem;
top: .56rem;
width: 1.08rem;
height: 1.14rem;
border: 1px solid color-mix(in srgb, var(--crm-primary, #0d7a45) 34%, #0284c7);
border-radius: .32rem;
background: rgba(255,255,255,.72);
}
.auth-motion-keypad::before {
content: "";
position: absolute;
left: .22rem;
top: .2rem;
width: .17rem;
height: .17rem;
border-radius: 999px;
background: #0284c7;
box-shadow: .34rem 0 #10b981, .68rem 0 #0284c7, 0 .34rem #10b981, .34rem .34rem #0284c7, .68rem .34rem #10b981;
animation: authKeyBlink 1.45s ease-in-out infinite;
}
.auth-field.form-floating > .form-control {
padding: 1rem clamp(7rem, 38%, 10.25rem) .82rem 3rem;
}
.auth-field.form-floating > label.form-label {
inset: 50% .85rem auto auto;
width: auto;
max-width: 42%;
height: auto;
padding: 0;
overflow: hidden;
color: color-mix(in srgb, var(--crm-muted, #6b7d76) 76%, var(--crm-text, #17352a));
font-size: .82rem;
line-height: 1.1;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
background: transparent !important;
opacity: .58;
transform: translateY(-50%) !important;
z-index: 5;
}
.auth-field.form-floating > .form-control:focus ~ label.form-label,
.auth-field.form-floating > .form-control:not(:placeholder-shown) ~ label.form-label,
.auth-field.form-floating > .form-control:-webkit-autofill ~ label.form-label {
color: color-mix(in srgb, var(--crm-muted, #6b7d76) 84%, var(--crm-text, #17352a));
opacity: .46;
transform: translateY(-50%) !important;
}
.theme-dark .auth-login-motion {
background: linear-gradient(135deg, rgba(95, 224, 178, .13), rgba(18, 32, 51, .82));
border-color: rgba(126, 241, 202, .34);
}
.theme-dark .auth-motion-keypad {
background: rgba(16, 26, 38, .78);
}
.theme-dark .auth-field.form-floating > label.form-label {
color: #9fb4c5;
}
@keyframes authEnterPerson {
0%, 100% { opacity: .72; transform: translateX(0) scale(1); }
48% { opacity: 1; transform: translateX(1.04rem) scale(1); }
64% { opacity: .28; transform: translateX(1.36rem) scale(.82); }
}
@keyframes authKeyBlink {
0%, 100% { opacity: .42; }
42%, 64% { opacity: 1; }
}
@media (max-width: 420px) {
.auth-login-motion {
display: none;
}
.auth-field.form-floating > .form-control {
padding-right: 5.8rem;
}
.auth-field.form-floating > label.form-label {
max-width: 34%;
font-size: .72rem;
}
}
@media (prefers-reduced-motion: reduce) {
.auth-motion-person,
.auth-motion-keypad::before {
animation: none !important;
}
}
/* Refined 2026 login motion: two quiet anchors, no four-corner distractions. */
.login-layout .auth-theme-object,
.login-layout.business-food-artistry .food-pan,
.login-layout.business-food-artistry .food-mill,
.login-layout.business-food-artistry .food-chop {
pointer-events: none;
}
.login-layout .auth-theme-object {
opacity: .42;
transform: scale(.72);
animation-duration: 18s;
filter: saturate(.85) drop-shadow(0 1rem 2rem rgba(15, 23, 42, .10));
}
.login-layout .auth-theme-object-one {
left: max(2rem, 9vw);
top: max(4rem, 18vh);
}
.login-layout .auth-theme-object-two {
right: max(2rem, 9vw);
bottom: max(3rem, 12vh);
}
.login-layout .auth-theme-object-three,
.login-layout .auth-theme-object-four,
.login-layout.business-food-artistry .food-mill,
.login-layout.business-food-artistry .food-chop {
display: none !important;
}
.login-layout.business-food-artistry .food-pan {
left: max(2rem, 8vw);
bottom: max(1.6rem, 5vh);
opacity: .46;
transform: scale(.62);
}
.login-layout.business-food-artistry .food-pan-glow,
.login-layout.business-food-artistry .food-pan-lid,
.login-layout.business-food-artistry .food-pan-steam {
animation-duration: 8s !important;
}
.auth-shell-login::before,
.auth-shell-login::after {
opacity: .24;
animation-duration: 22s !important;
}
.auth-login-card {
box-shadow:
0 1.4rem 4rem rgba(15, 23, 42, .15),
0 0 0 1px rgba(255, 255, 255, .38);
}
.auth-login-motion {
border-color: color-mix(in srgb, var(--crm-primary, #0d7a45) 24%, transparent);
background:
radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--crm-primary, #0d7a45) 14%, transparent), transparent 40%),
color-mix(in srgb, var(--crm-surface, #ffffff) 78%, transparent);
box-shadow: 0 .7rem 1.6rem color-mix(in srgb, var(--crm-primary, #0d7a45) 10%, transparent);
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.auth-login-card:hover .auth-login-motion,
.auth-login-card:focus-within .auth-login-motion {
border-color: color-mix(in srgb, var(--crm-primary, #0d7a45) 48%, transparent);
box-shadow: 0 .95rem 2.1rem color-mix(in srgb, var(--crm-primary, #0d7a45) 16%, transparent);
transform: translateY(-1px) scale(1.02);
}
.auth-motion-keypad::before {
animation: authKeyBlinkRefined 2.6s ease-in-out infinite !important;
}
@keyframes authKeyBlinkRefined {
0%, 100% { opacity: .42; transform: scale(.96); }
45%, 58% { opacity: 1; transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
.login-layout .auth-theme-object,
.login-layout.business-food-artistry .food-pan,
.auth-shell-login::before,
.auth-shell-login::after,
.auth-motion-keypad::before {
animation: none !important;
}
}
/* Project-scoped login atmosphere: restrained accents, no corner clutter. */
.login-layout .auth-theme-object,
.login-layout .auth-domain-notes,
.login-layout .auth-theme-line {
pointer-events: none;
}
.login-layout .auth-theme-object {
opacity: .16 !important;
transform: scale(.42) !important;
animation-duration: 30s !important;
filter: saturate(.75) drop-shadow(0 .9rem 1.8rem rgba(15, 23, 42, .08));
}
.login-layout .auth-theme-object-one {
left: auto !important;
right: max(1rem, 7vw) !important;
top: max(6rem, 24vh) !important;
bottom: auto !important;
}
.login-layout .auth-theme-object-two {
left: auto !important;
right: max(1rem, 6vw) !important;
top: auto !important;
bottom: max(2rem, 13vh) !important;
}
.login-layout .auth-theme-object-three,
.login-layout .auth-theme-object-four {
display: none !important;
}
.login-layout.business-food-artistry .food-recipe,
.login-layout.business-food-artistry .food-leaf,
.login-layout.business-food-artistry .food-pan,
.login-layout.business-food-artistry .food-mill,
.login-layout.business-food-artistry .food-chop {
display: none !important;
}
.login-layout .auth-domain-notes,
.login-layout .auth-theme-line {
opacity: .10;
}
.login-layout .auth-shell-login::before,
.login-layout .auth-shell-login::after {
content: "";
position: absolute;
pointer-events: none;
z-index: 0;
opacity: .16;
filter: blur(.1px);
animation: authProjectAmbientDrift 18s ease-in-out infinite;
}
.login-layout .auth-shell-login::before {
right: max(2rem, 11vw);
bottom: max(3rem, 12vh);
width: 15rem;
height: 15rem;
border-radius: 999px;
background:
radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--crm-primary, #0d7a45) 18%, transparent), transparent 58%),
radial-gradient(circle at 68% 66%, color-mix(in srgb, var(--crm-accent, #0f8bb8) 12%, transparent), transparent 62%);
}
.login-layout .auth-shell-login::after {
right: max(8rem, 20vw);
bottom: max(7rem, 26vh);
width: 8rem;
height: 8rem;
border: 1px solid color-mix(in srgb, var(--crm-primary, #0d7a45) 22%, transparent);
border-radius: 2rem;
background: linear-gradient(135deg, color-mix(in srgb, var(--crm-surface, #ffffff) 40%, transparent), transparent);
animation-delay: -6s;
}
.login-layout.business-food-artistry .auth-shell-login::before {
background:
radial-gradient(circle at 48% 36%, color-mix(in srgb, var(--crm-primary, #0d7a45) 16%, transparent), transparent 56%),
radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--crm-accent, #c29b68) 12%, transparent), transparent 62%);
}
.login-layout.business-food-artistry .auth-shell-login::after {
border-radius: 999px;
border-color: color-mix(in srgb, var(--crm-accent, #c29b68) 20%, transparent);
}
.login-layout.business-electronics .auth-shell-login::before {
background:
linear-gradient(90deg, color-mix(in srgb, var(--crm-primary, #0d7a45) 16%, transparent) 1px, transparent 1px),
linear-gradient(0deg, color-mix(in srgb, var(--crm-accent, #0f8bb8) 12%, transparent) 1px, transparent 1px),
radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--crm-primary, #0d7a45) 18%, transparent), transparent 56%);
background-size: 2.4rem 2.4rem, 2.4rem 2.4rem, auto;
}
.login-layout.business-language-agency .auth-shell-login::before {
border-radius: 4rem 999px 999px 4rem;
background:
radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--crm-primary, #0d7a45) 14%, transparent), transparent 46%),
linear-gradient(135deg, transparent 18%, color-mix(in srgb, var(--crm-primary, #0d7a45) 12%, transparent), transparent 68%);
}
.login-layout.business-storyquest .auth-shell-login::before {
border-radius: 2rem;
background:
linear-gradient(90deg, color-mix(in srgb, var(--crm-primary, #0d7a45) 18%, transparent), transparent 12%),
repeating-linear-gradient(0deg, transparent 0 1.1rem, color-mix(in srgb, var(--crm-text, #172b36) 10%, transparent) 1.1rem 1.16rem),
color-mix(in srgb, var(--crm-surface, #ffffff) 28%, transparent);
}
@keyframes authProjectAmbientDrift {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(.45rem, -.35rem, 0) scale(1.025); }
}
@media (max-width: 760px) {
.login-layout .auth-theme-object,
.login-layout .auth-domain-notes,
.login-layout .auth-theme-line,
.login-layout .auth-shell-login::before,
.login-layout .auth-shell-login::after {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.login-layout .auth-theme-object,
.login-layout .auth-shell-login::before,
.login-layout .auth-shell-login::after {
animation: none !important;
}
}
/* Food login: make the grid part of the background image, not another corner object. */
.login-layout.business-food-artistry .auth-shell-login {
--auth-grid-size: clamp(3.35rem, 4.85vw, 5.25rem);
--auth-grid-line: color-mix(in srgb, var(--crm-text, #2d241b) 12%, transparent);
background-image:
radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .92), rgba(255, 255, 255, .54) 30%, transparent 50%),
linear-gradient(90deg, var(--auth-grid-line) 1px, transparent 1px),
linear-gradient(180deg, var(--auth-grid-line) 1px, transparent 1px),
linear-gradient(135deg, rgba(255, 251, 240, .88), rgba(241, 248, 232, .58) 48%, rgba(255, 255, 247, .7)),
var(--auth-bg);
background-position: center, center, center, center, center;
background-repeat: no-repeat, repeat, repeat, no-repeat, no-repeat;
background-size: auto, var(--auth-grid-size) var(--auth-grid-size), var(--auth-grid-size) var(--auth-grid-size), auto, cover;
}
.auth-login-motion.auth-code-motion {
--auth-code-glow: color-mix(in srgb, var(--crm-primary, #0d7a45) 58%, var(--crm-accent, #0f8bb8));
display: grid;
flex-basis: 4.85rem;
gap: .22rem;
grid-template-rows: 1.2rem 1fr;
width: 4.85rem;
height: 3.65rem;
padding: .34rem;
border-color: color-mix(in srgb, var(--crm-primary, #0d7a45) 34%, var(--crm-line, #c9e9d1));
border-radius: .85rem;
background:
radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--crm-accent, #c29b68) 30%, transparent), transparent 34%),
linear-gradient(135deg, color-mix(in srgb, var(--crm-surface, #fff) 86%, transparent), color-mix(in srgb, var(--crm-primary-soft, #e7f8ee) 64%, white));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .82),
inset 0 0 0 1px rgba(255, 255, 255, .48),
0 .85rem 1.8rem color-mix(in srgb, var(--crm-primary, #0d7a45) 13%, transparent);
}
.auth-login-motion.auth-code-motion::before {
content: "";
position: absolute;
inset: .3rem;
border-radius: .62rem;
background:
linear-gradient(90deg, color-mix(in srgb, var(--crm-primary, #0d7a45) 16%, transparent) 1px, transparent 1px),
linear-gradient(180deg, color-mix(in srgb, var(--crm-primary, #0d7a45) 12%, transparent) 1px, transparent 1px);
background-size: .72rem .72rem;
opacity: .38;
}
.auth-code-screen,
.auth-code-keypad {
position: relative;
z-index: 1;
}
.auth-code-screen {
display: grid;
gap: .16rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
padding: .14rem;
border: 1px solid color-mix(in srgb, var(--crm-primary, #0d7a45) 24%, var(--crm-line, #c9e9d1));
border-radius: .52rem;
background: color-mix(in srgb, var(--crm-surface, #fff) 72%, var(--crm-primary-soft, #e7f8ee));
box-shadow: inset 0 0 .55rem color-mix(in srgb, var(--crm-primary, #0d7a45) 8%, transparent);
}
.auth-code-slot {
display: grid;
min-width: 0;
place-items: center;
border-radius: .36rem;
background: rgba(255, 255, 255, .68);
color: color-mix(in srgb, var(--crm-primary, #0d7a45) 86%, var(--crm-text, #17352a));
font-family: var(--crm-font, inherit);
font-size: .58rem;
font-weight: 900;
line-height: 1;
animation: authCodeSymbol 3.6s ease-in-out infinite;
}
.auth-code-slot-two {
animation-delay: -1.2s;
}
.auth-code-slot-three {
animation-delay: -2.4s;
}
.auth-code-keypad {
display: grid;
gap: .16rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.auth-code-key {
display: grid;
min-height: .78rem;
place-items: center;
border: 1px solid color-mix(in srgb, var(--crm-primary, #0d7a45) 18%, var(--crm-line, #c9e9d1));
border-radius: .36rem;
background:
linear-gradient(180deg, rgba(255, 255, 255, .74), color-mix(in srgb, var(--crm-primary-soft, #e7f8ee) 42%, white));
color: color-mix(in srgb, var(--crm-primary, #0d7a45) 74%, var(--crm-text, #17352a));
font-size: .48rem;
font-weight: 900;
line-height: 1;
opacity: .92;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .8),
0 .12rem .28rem color-mix(in srgb, var(--crm-primary, #0d7a45) 8%, transparent);
animation: authCodeKeyPress 3.6s ease-in-out infinite;
}
.auth-code-key-two {
animation-delay: -1.8s;
}
.auth-code-key-three {
animation-delay: -.55s;
}
.auth-code-key-four {
animation-delay: -2.7s;
}
.auth-code-key-five {
animation-delay: -1.15s;
}
.auth-code-key-six {
animation-delay: -3.25s;
}
.theme-dark .auth-login-motion.auth-code-motion {
background:
radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--crm-accent, #7dd3fc) 28%, transparent), transparent 34%),
linear-gradient(135deg, rgba(17, 28, 42, .86), rgba(8, 54, 45, .72));
}
.theme-dark .auth-code-screen,
.theme-dark .auth-code-key {
background: rgba(12, 24, 36, .66);
}
@keyframes authCodeSymbol {
0%, 100% {
opacity: .44;
transform: scale(.78);
filter: blur(.12px);
}
38% {
opacity: 1;
transform: scale(1.24);
filter: blur(0);
text-shadow: 0 0 .58rem color-mix(in srgb, var(--crm-primary, #0d7a45) 52%, transparent);
}
58% {
opacity: .72;
transform: scale(.94);
}
}
@keyframes authCodeKeyPress {
0%, 16%, 100% {
opacity: .92;
transform: translateY(0) scale(1);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .8),
0 .12rem .28rem color-mix(in srgb, var(--crm-primary, #0d7a45) 8%, transparent);
}
23%, 32% {
background: var(--auth-code-glow);
border-color: color-mix(in srgb, var(--auth-code-glow) 72%, white);
color: white;
opacity: 1;
transform: translateY(1px) scale(.94);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .32),
0 0 .68rem color-mix(in srgb, var(--auth-code-glow) 54%, transparent);
}
}
@media (max-width: 760px) {
.login-layout.business-food-artistry .auth-shell-login {
--auth-grid-size: 3.65rem;
}
}
@media (max-width: 420px) {
.auth-login-motion.auth-code-motion {
display: grid;
flex-basis: 3.35rem;
gap: .14rem;
grid-template-rows: .9rem 1fr;
width: 3.35rem;
height: 2.62rem;
padding: .24rem;
border-radius: .68rem;
}
.auth-login-motion.auth-code-motion::before {
inset: .22rem;
background-size: .54rem .54rem;
}
.auth-code-screen {
gap: .1rem;
padding: .1rem;
border-radius: .42rem;
}
.auth-code-slot {
border-radius: .26rem;
font-size: .42rem;
}
.auth-code-keypad {
gap: .1rem;
}
.auth-code-key {
min-height: .54rem;
border-radius: .24rem;
font-size: .34rem;
}
}
@media (prefers-reduced-motion: reduce) {
.auth-code-slot,
.auth-code-key {
animation: none !important;
}
}