* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--djumbi-bg); color: var(--djumbi-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.55; }
button, input, select, textarea { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--djumbi-primary); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .7; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid rgb(245 160 0 / .52); outline-offset: 3px; }
.eyebrow { display: block; margin: 0 0 .7rem; color: var(--djumbi-primary); font-size: .72rem; font-weight: 800; letter-spacing: .13em; line-height: 1.2; }
.muted, .auth-intro, .card-heading p, .page-header p, .section-heading > p { color: var(--djumbi-text-muted); }
.messages { position: fixed; z-index: 50; top: 1rem; right: 1rem; max-width: min(390px, calc(100vw - 2rem)); }
.message { margin: 0 0 .7rem; padding: .8rem 1rem; border: 1px solid var(--djumbi-border); border-left: 4px solid var(--djumbi-primary); border-radius: var(--djumbi-radius-md); background: var(--djumbi-surface); box-shadow: var(--djumbi-shadow-md); }
.message.success { border-left-color: var(--djumbi-success); }
.message.error { border-left-color: var(--djumbi-danger); }
.button, .app-main button[type="submit"], .auth-card button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: .62rem 1rem; border: 1px solid transparent; border-radius: var(--djumbi-radius-sm); font-weight: 750; line-height: 1.2; transition: transform var(--djumbi-transition), background var(--djumbi-transition), border-color var(--djumbi-transition), color var(--djumbi-transition); }
.button:hover, .app-main button[type="submit"]:hover, .auth-card button[type="submit"]:hover { color: inherit; transform: translateY(-1px); }
.button-primary, .app-main button[type="submit"], .auth-card button[type="submit"] { background: var(--djumbi-primary); color: #fff; }
.button-primary:hover, .app-main button[type="submit"]:hover, .auth-card button[type="submit"]:hover { background: var(--djumbi-primary-hover); color: #fff; }
.button-secondary { border-color: var(--djumbi-border); background: var(--djumbi-surface); color: var(--djumbi-text); }
.button-secondary:hover { border-color: var(--djumbi-primary); background: var(--djumbi-surface-muted); }
/* Public portal */
.public-site { background: #fbfdff; color: #172033; }
.public-header { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; gap: 2rem; min-height: 74px; padding: 0 clamp(1.25rem, 5vw, 5.5rem); border-bottom: 1px solid rgb(203 213 225 / .76); background: rgb(251 253 255 / .86); backdrop-filter: blur(16px); }
.public-logo, .auth-brand, .sidebar-logo { color: #15233b; font-size: 1rem; font-weight: 900; letter-spacing: .12em; }
.public-logo:hover, .auth-brand:hover { color: var(--djumbi-primary); }
.public-header nav { display: flex; align-items: center; gap: 1.45rem; margin-right: auto; }
.public-header nav a { color: #52617a; font-size: .89rem; font-weight: 650; }
.public-header nav a:hover { color: var(--djumbi-primary); }
.header-cta { margin-left: auto; }
.public-hero, .public-section, .public-footer { padding-left: clamp(1.25rem, 7vw, 8rem); padding-right: clamp(1.25rem, 7vw, 8rem); }
.public-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .75fr); align-items: center; gap: clamp(2rem, 8vw, 9rem); min-height: 620px; padding-top: clamp(4.75rem, 9vw, 8.5rem); padding-bottom: clamp(4.75rem, 9vw, 8.5rem); overflow: hidden; background: radial-gradient(circle at 81% 36%, rgb(191 219 254 / .76), transparent 24rem), linear-gradient(136deg, #f8fbff 0%, #fff 47%, #eff6ff 100%); }
.public-hero > div:first-child { position: relative; z-index: 1; max-width: 710px; }
.public-hero h1, .public-section h2, .auth-card h1 { margin: 0; font-family: Poppins, Inter, sans-serif; font-weight: 760; letter-spacing: -.045em; line-height: 1.06; }
.public-hero h1 { max-width: 720px; color: #142440; font-size: clamp(2.8rem, 5.6vw, 5.4rem); }
.public-hero > div:first-child > p { max-width: 630px; margin: 1.55rem 0 0; color: #53637d; font-size: clamp(1rem, 1.45vw, 1.2rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero-panel { position: relative; min-height: 350px; padding: 1.8rem; overflow: hidden; border: 1px solid rgb(255 255 255 / .72); border-radius: var(--djumbi-radius-xl); background: linear-gradient(150deg, #183359 2%, #285ea3 55%, #4c8fe5); color: #fff; box-shadow: 0 28px 75px rgb(30 64 175 / .22); }
.hero-panel::before, .hero-panel::after { position: absolute; content: ""; border: 1px solid rgb(255 255 255 / .22); border-radius: 100%; }
.hero-panel::before { width: 24rem; height: 24rem; right: -12rem; top: -9rem; }
.hero-panel::after { width: 18rem; height: 18rem; bottom: -11rem; left: -8rem; }
.hero-panel > span { display: block; position: relative; z-index: 1; font-size: .72rem; font-weight: 850; letter-spacing: .18em; opacity: .8; }
.hero-panel > strong { display: block; position: relative; z-index: 1; max-width: 230px; margin-top: 5rem; font-family: Poppins, Inter, sans-serif; font-size: clamp(1.55rem, 2.5vw, 2.3rem); letter-spacing: -.04em; line-height: 1.08; }
.hero-panel-lines { position: absolute; z-index: 1; left: 1.8rem; right: 1.8rem; bottom: 1.8rem; display: grid; gap: .65rem; }
.hero-panel-lines i { height: 10px; border-radius: 999px; background: rgb(255 255 255 / .24); }
.hero-panel-lines i:nth-child(1) { width: 82%; background: rgb(255 255 255 / .86); }
.hero-panel-lines i:nth-child(2) { width: 54%; }
.hero-panel-lines i:nth-child(3) { width: 68%; }
.public-section { padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.public-section h2 { color: #172033; font-size: clamp(2rem, 3.8vw, 3.45rem); }
.proof-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; background: #172d50; color: #fff; }
.proof-section h2 { color: #fff; }
.proof-section .eyebrow { color: #93c5fd; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; align-self: stretch; overflow: hidden; border: 1px solid rgb(255 255 255 / .15); border-radius: var(--djumbi-radius-lg); background: rgb(255 255 255 / .15); }
.value-grid article { padding: 1.35rem; background: rgb(15 36 67 / .35); }
.value-grid span { color: #93c5fd; font-size: .75rem; font-weight: 800; letter-spacing: .1em; }
.value-grid h3 { margin: 2.25rem 0 .45rem; font-size: 1.08rem; }
.value-grid p { margin: 0; color: #cbd5e1; font-size: .9rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.section-heading > div, .section-heading > .eyebrow + h2 { max-width: 760px; }
.section-heading > p { max-width: 390px; margin: 0; }
.segment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.segment-card { display: flex; min-height: 295px; flex-direction: column; padding: 1.55rem; border: 1px solid #d8e1ed; border-radius: var(--djumbi-radius-lg); background: #fff; box-shadow: 0 8px 18px rgb(15 23 42 / .035); transition: border-color var(--djumbi-transition), box-shadow var(--djumbi-transition), transform var(--djumbi-transition); }
.segment-card:hover { color: inherit; transform: translateY(-3px); box-shadow: var(--djumbi-shadow-md); }
.segment-card > span { font-size: .74rem; font-weight: 850; letter-spacing: .11em; }
.segment-card h3, .segment-card h2 { margin: 2.8rem 0 .8rem; color: #172033; font-family: Poppins, Inter, sans-serif; font-size: 1.43rem; letter-spacing: -.035em; line-height: 1.18; }
.segment-card p { margin: 0; color: #607088; }
.segment-card a, .segment-card b { margin-top: auto; padding-top: 2rem; font-size: .9rem; font-weight: 800; }
.segment-card.engineering { border-top: 4px solid #d97706; }
.segment-card.engineering > span, .segment-card.engineering a, .segment-card.engineering b { color: #b45309; }
.segment-card.legal { border-top: 4px solid #7c3aed; }
.segment-card.legal > span, .segment-card.legal a, .segment-card.legal b { color: #6d28d9; }
.segment-card.agro { border-top: 4px solid #16a34a; }
.segment-card.agro > span, .segment-card.agro a, .segment-card.agro b { color: #15803d; }
.how-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4rem; background: #f1f6fc; }
.how-section ol { display: grid; gap: 1.3rem; margin: 0; padding: 0; list-style: none; }
.how-section li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding-bottom: 1.3rem; border-bottom: 1px solid #cedae8; }
.how-section li > strong { color: var(--djumbi-primary); font-size: .78rem; letter-spacing: .1em; }
.how-section h3 { margin: 0; font-size: 1.05rem; }
.how-section p { margin: .35rem 0 0; color: #607088; }
.modules-section { text-align: center; }
.modules-section h2 { max-width: 800px; margin-left: auto; margin-right: auto; }
.module-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; max-width: 740px; margin: 2rem auto 0; }
.module-chips span { padding: .6rem .85rem; border: 1px solid #d7e0eb; border-radius: 999px; background: #fff; color: #42516a; font-size: .88rem; font-weight: 700; }
.security-section { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(2rem, 8vw, 7rem); background: #0f274a; color: #fff; }
.security-section h2 { color: #fff; }
.security-section .eyebrow { color: #93c5fd; }
.security-section p { max-width: 650px; color: #c3d3e8; }
.security-section ul { display: grid; gap: .9rem; align-content: center; margin: 0; padding: 0; list-style: none; }
.security-section li { padding: 1rem 1.1rem; border: 1px solid rgb(147 197 253 / .24); border-radius: var(--djumbi-radius-md); background: rgb(255 255 255 / .06); }
.security-section li::before { content: "✓"; margin-right: .7rem; color: #93c5fd; font-weight: 900; }
.faq-section { max-width: 1000px; margin: auto; }
.faq-section > h2 { margin-bottom: 2rem; }
.faq-section details { border-top: 1px solid #d6dfeb; }
.faq-section details:last-child { border-bottom: 1px solid #d6dfeb; }
.faq-section summary { padding: 1.1rem 2rem 1.1rem 0; color: #24344d; font-weight: 750; cursor: pointer; }
.faq-section summary::marker { color: var(--djumbi-primary); }
.faq-section details p { max-width: 760px; margin: 0 0 1.1rem; color: #64748b; }
.public-footer { display: grid; grid-template-columns: 2fr repeat(2, 1fr); gap: 2rem; padding-top: 3.5rem; padding-bottom: 1.5rem; background: #10213d; color: #d1dbea; }
.public-footer .public-logo { color: #fff; }
.public-footer p { margin: .75rem 0 0; color: #9bb0c9; }
.public-footer h2 { margin: 0 0 .65rem; color: #fff; font-size: .85rem; }
.public-footer a:not(.public-logo) { display: block; width: max-content; margin: .4rem 0; color: #b9c9dc; font-size: .9rem; }
.public-footer a:not(.public-logo):hover { color: #fff; }
.footer-legal { grid-column: 1 / -1; padding-top: 1.2rem; border-top: 1px solid rgb(255 255 255 / .12); font-size: .8rem; }
/* Access and authentication */
.access-page { max-width: 1120px; min-height: calc(100vh - 260px); margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) 1.25rem; }
.access-page .section-heading { display: block; max-width: 760px; }
.access-page .section-heading h1 { margin: 0; color: #172033; font-family: Poppins, Inter, sans-serif; font-size: clamp(2.3rem, 4.2vw, 4rem); letter-spacing: -.05em; line-height: 1.08; }
.access-page .section-heading p { margin-top: 1rem; }
.access-generic { margin: 2rem 0 0; text-align: center; }
.access-generic a, .auth-footer a, .text-link { color: var(--djumbi-primary); font-weight: 750; }
.public-form-page { display: grid; grid-template-columns: minmax(0, .8fr) minmax(320px, .65fr); gap: clamp(2rem, 8vw, 7rem); align-items: start; max-width: 1150px; min-height: calc(100vh - 260px); margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) 1.25rem; }
.public-form-intro h1 { margin: 0; color: #172033; font-family: Poppins, Inter, sans-serif; font-size: clamp(2.3rem, 4.2vw, 4rem); letter-spacing: -.05em; line-height: 1.08; }
.public-form-intro p { max-width: 560px; margin: 1rem 0 0; color: #607088; font-size: 1.04rem; }
.public-form-card { padding: clamp(1.25rem, 3.5vw, 2rem); border: 1px solid #d8e1ed; border-radius: var(--djumbi-radius-lg); background: #fff; box-shadow: var(--djumbi-shadow-md); }
.public-form-card h2 { margin: 0 0 1.4rem; color: #172033; font-family: Poppins, Inter, sans-serif; font-size: 1.3rem; }
.auth-page { display: grid; min-height: 100vh; place-items: center; padding: 1.5rem; background: radial-gradient(circle at 80% 15%, rgb(191 219 254 / .75), transparent 29rem), linear-gradient(135deg, #f8fbff, #eff6ff); }
.auth-card { width: min(100%, 460px); padding: clamp(1.5rem, 5vw, 2.65rem); border: 1px solid rgb(255 255 255 / .78); border-radius: var(--djumbi-radius-xl); background: rgb(255 255 255 / .9); box-shadow: 0 22px 50px rgb(30 64 175 / .13); backdrop-filter: blur(12px); }
.auth-card-wide { width: min(100%, 620px); }
.auth-brand { display: inline-block; margin-bottom: 2.1rem; }
.auth-card h1 { color: #172033; font-size: clamp(1.9rem, 4vw, 2.55rem); }
.auth-intro { margin: .85rem 0 1.65rem; }
.auth-footer { margin: 1.1rem 0 0; color: var(--djumbi-text-muted); font-size: .9rem; }
/* B2B application shell */
.app-page { background: var(--djumbi-bg); }
.app-shell { display: grid; grid-template-columns: 254px minmax(0, 1fr); min-height: 100vh; }
.app-sidebar { position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column; padding: 1.4rem 1rem 1rem; border-right: 1px solid #1e3454; background: #102442; color: #d7e3f3; }
.sidebar-logo { padding: .25rem .65rem 1.35rem; color: #fff; }
.sidebar-logo:hover { color: #bfdbfe; }
.organization-context { margin: .1rem .35rem 1.4rem; padding: .8rem .85rem; border: 1px solid rgb(191 219 254 / .18); border-radius: var(--djumbi-radius-md); background: rgb(255 255 255 / .07); }
.organization-context span { display: block; color: #9fb8d5; font-size: .67rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.organization-context strong { display: block; margin-top: .2rem; overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.sidebar-nav { display: grid; gap: .18rem; }
.sidebar-nav p { margin: 1.1rem .65rem .35rem; color: #86a4c7; font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sidebar-nav p:first-child { margin-top: 0; }
.sidebar-nav a, .sidebar-signout button { display: block; width: 100%; padding: .64rem .68rem; border: 0; border-radius: var(--djumbi-radius-sm); background: transparent; color: #cad8ea; text-align: left; font-size: .89rem; font-weight: 650; }
.sidebar-nav a:hover, .sidebar-signout button:hover { color: #fff; background: rgb(255 255 255 / .08); }
.sidebar-nav a.is-active { background: var(--djumbi-primary); color: #17110a; box-shadow: 0 5px 14px rgb(15 23 42 / .22); }
.sidebar-signout { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / .1); }
.app-content { min-width: 0; }
.app-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 69px; gap: 1rem; padding: .8rem clamp(1.15rem, 3.4vw, 3rem); border-bottom: 1px solid var(--djumbi-border); background: var(--djumbi-surface); }
.topbar-leading, .topbar-actions { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.breadcrumb { display: grid; min-width: 0; }
.breadcrumb span { overflow: hidden; color: var(--djumbi-text-muted); text-overflow: ellipsis; white-space: nowrap; font-size: .74rem; }
.breadcrumb strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.organization-switch select { max-width: 210px; min-height: 35px; padding: .35rem 1.8rem .35rem .65rem; border: 1px solid var(--djumbi-border); border-radius: var(--djumbi-radius-sm); background: var(--djumbi-surface); color: var(--djumbi-text); font-size: .82rem; }
.theme-toggle, .mobile-menu { min-height: 35px; padding: .35rem .65rem; border: 1px solid var(--djumbi-border); border-radius: var(--djumbi-radius-sm); background: var(--djumbi-surface); color: var(--djumbi-text); font-size: .78rem; font-weight: 700; }
.theme-toggle:hover, .mobile-menu:hover { border-color: var(--djumbi-primary); color: var(--djumbi-primary); }
.user-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgb(245 160 0 / .18); color: var(--djumbi-primary); font-size: .8rem; font-weight: 900; }
.mobile-menu, .sidebar-backdrop { display: none; }
.app-main { max-width: 1580px; margin: 0 auto; padding: clamp(1.35rem, 3.4vw, 3rem); }
.page-header { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.75rem; }
.page-header h1 { margin: 0; color: var(--djumbi-text); font-family: Poppins, Inter, sans-serif; font-size: clamp(1.85rem, 3.4vw, 2.8rem); letter-spacing: -.045em; line-height: 1.1; }
.page-header p { margin: .65rem 0 0; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2.35rem; }
.stat-card, .content-card { border: 1px solid var(--djumbi-border); border-radius: var(--djumbi-radius-lg); background: var(--djumbi-surface); box-shadow: var(--djumbi-shadow-sm); }
.stat-card { min-height: 145px; padding: 1.2rem; }
.stat-card > span { display: block; color: var(--djumbi-text-muted); font-size: .76rem; font-weight: 700; }
.stat-card > strong { display: block; margin: .55rem 0 .7rem; overflow: hidden; color: var(--djumbi-text); text-overflow: ellipsis; white-space: nowrap; font-size: 1.18rem; }
.stat-card small { color: var(--djumbi-text-muted); }
.content-section { margin-top: .5rem; }
.content-section .section-heading { align-items: end; }
.content-section .section-heading h2, .content-card h2 { margin: 0; color: var(--djumbi-text); font-family: Poppins, Inter, sans-serif; font-size: 1.25rem; letter-spacing: -.025em; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.product-card { display: flex; min-height: 250px; flex-direction: column; padding: 1.3rem; border: 1px solid var(--djumbi-border); border-top: 4px solid var(--product-color); border-radius: var(--djumbi-radius-lg); background: var(--djumbi-surface); box-shadow: var(--djumbi-shadow-sm); transition: transform var(--djumbi-transition), box-shadow var(--djumbi-transition); }
.product-card:hover { transform: translateY(-2px); box-shadow: var(--djumbi-shadow-md); }
.product-card > span { color: var(--product-color); font-size: .7rem; font-weight: 850; letter-spacing: .1em; }
.product-card h3 { margin: 1.85rem 0 .7rem; color: var(--djumbi-text); font-family: Poppins, Inter, sans-serif; font-size: 1.22rem; letter-spacing: -.03em; line-height: 1.2; }
.product-card p { margin: 0; color: var(--djumbi-text-muted); }
.product-card a { margin-top: auto; padding-top: 1.5rem; color: var(--product-color); font-weight: 800; }
.product-card a b { font-size: 1.15rem; }
.product-card.legal { --product-color: #7c3aed; }
.product-card.engineering { --product-color: #d97706; }
.product-card.agro { --product-color: #16a34a; }
.content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.content-grid-aside { grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr); }
.content-card { padding: clamp(1rem, 2.2vw, 1.5rem); }
.card-heading { margin-bottom: 1.35rem; }
.card-heading p { margin: .35rem 0 0; font-size: .9rem; }
.stack-form { display: grid; gap: .95rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.form-grid .field-name, .form-grid .field-legal_name, .form-grid .field-document, .form-grid .field-contact_email, .form-grid .field-contact_phone, .form-grid .field-city, .form-grid button { grid-column: 1 / -1; }
.stack-form p, .form-grid p { display: grid; gap: .38rem; margin: 0; }
label { color: var(--djumbi-text); font-size: .8rem; font-weight: 750; }
input, select, textarea { width: 100%; min-height: 42px; padding: .58rem .68rem; border: 1px solid var(--djumbi-border); border-radius: var(--djumbi-radius-sm); outline: none; background: var(--djumbi-surface); color: var(--djumbi-text); transition: border-color var(--djumbi-transition), box-shadow var(--djumbi-transition); }
textarea { min-height: 104px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--djumbi-primary); box-shadow: 0 0 0 3px rgb(245 160 0 / .16); }
.helptext { color: var(--djumbi-text-muted); font-size: .75rem; }
.errorlist { margin: .1rem 0 0; padding: 0; color: var(--djumbi-danger); list-style: none; font-size: .78rem; }
.list-panel { margin-top: 1rem; }
.section-heading.compact { margin-bottom: 1.25rem; }
.section-heading.compact h2 { margin: 0; }
.section-heading.compact p { margin: .3rem 0 0; color: var(--djumbi-text-muted); font-size: .86rem; }
.data-list { display: grid; }
.data-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; padding: .8rem 0; border-bottom: 1px solid var(--djumbi-border); }
.data-row:first-child { border-top: 1px solid var(--djumbi-border); }
.data-row > div { min-width: 0; }
.data-row strong, .data-row span { display: block; }
.data-row strong { overflow: hidden; color: var(--djumbi-text); text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.data-row span { color: var(--djumbi-text-muted); font-size: .81rem; text-align: right; }
.data-row > div span { margin-top: .1rem; text-align: left; }
.inline-status-form { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.inline-status-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inline-status-form select { min-width: 145px; min-height: 36px; padding: .45rem .65rem; border: 1px solid var(--djumbi-border); border-radius: var(--djumbi-radius-sm); background: var(--djumbi-surface); color: var(--djumbi-text); }
.inline-status-form button[type="submit"] { min-height: 36px; padding: .45rem .75rem; font-size: .8rem; }
.status { width: max-content; padding: .25rem .55rem; border-radius: 999px; background: var(--djumbi-surface-muted); color: var(--djumbi-text-muted) !important; font-size: .72rem !important; font-weight: 800; }
.status.active { background: rgb(22 163 74 / .13); color: #15803d !important; }
.status.pending { background: rgb(217 119 6 / .14); color: #b45309 !important; }
.status.inactive { background: rgb(220 38 38 / .12); color: #b91c1c !important; }
.empty-state { padding: 1rem 0; color: var(--djumbi-text-muted); }
/* Djumbi public experience: dark by default */
.public-site { background: #070b12; color: #e2e8f0; }
.public-site .public-header { border-color: rgb(148 163 184 / .16); background: rgb(7 11 18 / .86); }
.public-site .public-logo { display: inline-flex; align-items: center; color: #fff; }
.public-logo-image { display: block; width: auto; height: 42px; object-fit: contain; }
.public-site .public-header nav a { color: #b7c3d3; }
.public-site .public-header nav a:hover { color: #f8fafc; }
.public-site .button-primary { background: var(--djumbi-brand-amber); color: #17110a; }
.public-site .button-primary:hover { background: var(--djumbi-brand-amber-light); color: #17110a; }
.public-site .button-secondary { border-color: #334155; background: rgb(15 23 42 / .72); color: #e2e8f0; }
.public-site .button-secondary:hover { border-color: #f59e0b; background: #172033; color: #fff; }
.public-site .public-hero { background: radial-gradient(circle at 78% 26%, rgb(245 160 0 / .2), transparent 25rem), radial-gradient(circle at 16% 92%, rgb(15 64 80 / .42), transparent 28rem), #070b12; }
.public-site .public-hero h1, .public-site .public-section h2 { color: #f8fafc; }
.public-site .public-hero > div:first-child > p { color: #aab8ca; }
.public-site .public-hero .eyebrow { color: var(--djumbi-brand-amber-light); }
.public-site .hero-panel { border-color: rgb(251 191 36 / .28); background: linear-gradient(150deg, #1f2937 0%, #172b45 52%, #8a4f08 100%); box-shadow: 0 28px 75px rgb(0 0 0 / .38); }
.public-site .proof-section { background: #0d1726; }
.public-site .proof-section .eyebrow { color: var(--djumbi-brand-amber-light); }
.public-site .value-grid { border-color: rgb(148 163 184 / .15); background: rgb(148 163 184 / .12); }
.public-site .value-grid article { background: rgb(15 23 42 / .68); }
.public-site .value-grid span { color: var(--djumbi-brand-amber-light); }
.public-site .value-grid p { color: #aab8ca; }
.public-site #solucoes, .public-site .modules-section, .public-site .faq-section { background: #090f19; }
.public-site .section-heading > p, .public-site .how-section p, .public-site .faq-section details p { color: #aab8ca; }
.public-site .segment-card { border-color: #283648; background: #111b2a; box-shadow: 0 10px 22px rgb(0 0 0 / .18); }
.public-site .segment-card:hover { box-shadow: 0 18px 34px rgb(0 0 0 / .32); }
.public-site .segment-card h3, .public-site .segment-card h2 { color: #f1f5f9; }
.public-site .segment-card p { color: #aab8ca; }
.public-site .how-section { background: #0d1726; }
.public-site .how-section li { border-color: #263548; }
.public-site .how-section h3 { color: #f1f5f9; }
.public-site .module-chips span { border-color: #2b3a4e; background: #111b2a; color: #c6d1df; }
.public-site .security-section { background: #0b1524; }
.public-site .faq-section details { border-color: #263548; }
.public-site .faq-section summary { color: #e2e8f0; }
.public-site .public-footer { background: #05080d; }
.public-site .public-footer .footer-logo { width: max-content; }
.public-site .public-footer .public-logo-image { height: 48px; }
.public-site .public-footer a:not(.public-logo) { color: #aab8ca; }
.public-site .public-footer a:not(.public-logo):hover { color: var(--djumbi-brand-amber-light); }
.public-site .footer-legal { border-color: rgb(148 163 184 / .14); }
.public-site .access-page, .public-site .public-form-page { background: #090f19; }
.public-site .access-page .section-heading h1, .public-site .public-form-intro h1 { color: #f8fafc; }
.public-site .access-page .section-heading p, .public-site .public-form-intro p { color: #aab8ca; }
.public-site .public-form-card { border-color: #2b3a4e; background: #111b2a; box-shadow: 0 20px 45px rgb(0 0 0 / .28); }
.public-site .public-form-card h2 { color: #f8fafc; }
.public-site .public-form-card label { color: #e2e8f0; }
.public-site .public-form-card input, .public-site .public-form-card select, .public-site .public-form-card textarea { border-color: #334155; background: #0b1320; color: #f8fafc; }
/* NAVIE-inspired B2B workspace */
.app-page { background: radial-gradient(circle at 82% 8%, rgb(245 160 0 / .12), transparent 25rem), radial-gradient(circle at 12% 92%, rgb(15 64 80 / .2), transparent 28rem), var(--djumbi-bg); }
.app-sidebar { border-color: rgb(255 255 255 / .08); background: linear-gradient(180deg, rgb(12 19 31 / .96), rgb(5 8 13 / .98)); box-shadow: 18px 0 50px rgb(0 0 0 / .22); }
.sidebar-logo { display: flex; align-items: center; gap: .7rem; padding: .25rem .65rem 1.2rem; letter-spacing: .08em; }
.sidebar-logo img { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 8px 18px rgb(245 160 0 / .28)); }
.organization-context { border-color: rgb(245 160 0 / .18); background: linear-gradient(135deg, rgb(255 255 255 / .08), rgb(245 160 0 / .08)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); backdrop-filter: blur(18px); }
.organization-context small { display: block; margin-top: .25rem; overflow: hidden; color: #92a5bc; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
.sidebar-nav a, .sidebar-signout button { display: flex; align-items: center; gap: .7rem; min-height: 42px; }
.sidebar-nav i, .sidebar-signout i, .theme-toggle i, .topbar-icon i, .mobile-menu i, .button i, .app-main button i { width: 17px; height: 17px; stroke-width: 2.35; }
.sidebar-nav a.is-active { background: linear-gradient(135deg, var(--djumbi-brand-amber), var(--djumbi-brand-amber-light)); color: #17110a; box-shadow: 0 14px 28px rgb(245 160 0 / .18); }
.app-topbar { position: sticky; z-index: 25; top: 0; border-color: rgb(148 163 184 / .14); background: color-mix(in srgb, var(--djumbi-surface) 82%, transparent); backdrop-filter: blur(18px); }
.topbar-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--djumbi-border); border-radius: 14px; background: var(--djumbi-surface); color: var(--djumbi-text); }
.topbar-icon:hover { border-color: var(--djumbi-primary); color: var(--djumbi-primary); }
.theme-toggle, .mobile-menu { display: inline-flex; align-items: center; gap: .45rem; border-radius: 14px; }
.user-avatar { border: 1px solid rgb(245 160 0 / .28); background: linear-gradient(135deg, rgb(245 160 0 / .22), rgb(15 64 80 / .22)); }
.workspace-hero { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.15rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid rgb(245 160 0 / .2); border-radius: 24px; background: radial-gradient(circle at 82% 20%, rgb(245 160 0 / .18), transparent 20rem), linear-gradient(135deg, rgb(17 24 39 / .96), rgb(11 19 32 / .92)); color: #f8fafc; box-shadow: 0 24px 60px rgb(0 0 0 / .26); overflow: hidden; }
.workspace-hero h1 { max-width: 780px; margin: 0; font-family: Poppins, Inter, sans-serif; font-size: clamp(1.9rem, 3.3vw, 3.15rem); letter-spacing: -.045em; line-height: 1.06; }
.workspace-hero p { max-width: 650px; margin: .75rem 0 0; color: #aebbc9; }
.workspace-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.ops-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.ops-stat-card, .ops-panel { border: 1px solid rgb(148 163 184 / .18); border-radius: 20px; background: color-mix(in srgb, var(--djumbi-surface) 90%, transparent); box-shadow: 0 18px 40px rgb(0 0 0 / .14); backdrop-filter: blur(18px); }
.ops-stat-card { min-height: 132px; padding: 1rem; }
.ops-stat-card > span { display: flex; align-items: center; gap: .45rem; color: var(--djumbi-text-muted); font-size: .75rem; font-weight: 800; }
.ops-stat-card i { width: 16px; height: 16px; color: var(--djumbi-primary); }
.ops-stat-card strong { display: block; margin: .55rem 0 .35rem; overflow: hidden; color: var(--djumbi-text); text-overflow: ellipsis; white-space: nowrap; font-size: clamp(1.35rem, 2vw, 1.85rem); font-weight: 900; }
.ops-stat-card small { color: var(--djumbi-text-muted); }
.ops-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.ops-grid-main { grid-template-columns: minmax(320px, .72fr) minmax(0, 1fr); }
.ops-panel { padding: clamp(1rem, 2vw, 1.25rem); }
.panel-title, .section-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.panel-title span { display: block; margin-bottom: .28rem; color: var(--djumbi-primary); font-size: .67rem; font-weight: 900; letter-spacing: .12em; }
.panel-title h2, .section-toolbar h2 { margin: 0; color: var(--djumbi-text); font-family: Poppins, Inter, sans-serif; font-size: 1.1rem; letter-spacing: -.02em; }
.panel-title > i { width: 24px; height: 24px; color: var(--djumbi-primary); }
.compact-form { gap: .72rem; }
.compact-form p { gap: .26rem; }
.compact-form textarea { min-height: 78px; }
.compact-form button[type="submit"], .task-status-form button[type="submit"] { gap: .45rem; }
.kanban-panel { margin-bottom: 1rem; }
.section-toolbar p { margin: .35rem 0 0; color: var(--djumbi-text-muted); }
.kanban-board { display: grid; grid-template-columns: repeat(4, minmax(245px, 1fr)); gap: .85rem; overflow-x: auto; padding-bottom: .35rem; }
.kanban-column { min-height: 320px; padding: .75rem; border: 1px solid var(--djumbi-border); border-radius: 18px; background: rgb(255 255 255 / .035); }
.kanban-column header { display: flex; align-items: center; gap: .55rem; margin-bottom: .75rem; padding: .45rem .45rem .75rem; border-bottom: 1px solid var(--djumbi-border); }
.kanban-column header span { width: 10px; height: 10px; border-radius: 999px; background: #94a3b8; box-shadow: 0 0 14px currentColor; }
.kanban-column header h3 { margin: 0; color: var(--djumbi-text); font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.kanban-column header strong { margin-left: auto; padding: .18rem .5rem; border-radius: 999px; background: var(--djumbi-surface-muted); color: var(--djumbi-text-muted); font-size: .72rem; }
.amber-column header span { background: var(--djumbi-primary); }
.teal-column header span { background: #56a0b1; }
.green-column header span { background: var(--djumbi-success); }
.kanban-card { display: grid; gap: .7rem; margin-bottom: .75rem; padding: .9rem; border: 1px solid rgb(148 163 184 / .18); border-radius: 16px; background: color-mix(in srgb, var(--djumbi-surface) 94%, transparent); box-shadow: 0 12px 24px rgb(0 0 0 / .12); }
.kanban-card-top, .kanban-card-meta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.kanban-card-top span { overflow: hidden; color: var(--djumbi-text-muted); text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; font-weight: 800; }
.kanban-card-top strong { padding: .2rem .45rem; border-radius: 999px; background: rgb(245 160 0 / .14); color: var(--djumbi-primary); font-size: .66rem; text-transform: uppercase; }
.kanban-card h3 { margin: 0; color: var(--djumbi-text); font-size: .95rem; line-height: 1.25; }
.kanban-card p { margin: 0; color: var(--djumbi-text-muted); font-size: .82rem; }
.kanban-card-meta { align-items: flex-start; flex-direction: column; color: var(--djumbi-text-muted); font-size: .72rem; }
.kanban-card-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.kanban-card-meta i { width: 14px; height: 14px; }
.task-status-form { display: grid; grid-template-columns: 1fr auto; gap: .45rem; }
.task-status-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.task-status-form select { min-height: 36px; font-size: .78rem; }
.task-status-form button[type="submit"] { min-height: 36px; padding: .45rem .65rem; font-size: .78rem; }
.kanban-empty { margin: 0; padding: 1.25rem; border: 1px dashed var(--djumbi-border); border-radius: 14px; color: var(--djumbi-text-muted); text-align: center; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.timeline-list { display: grid; gap: .8rem; }
.timeline-list article { display: grid; grid-template-columns: 12px 1fr; gap: .75rem; }
.timeline-list article > span { width: 10px; height: 10px; margin-top: .35rem; border-radius: 999px; background: var(--djumbi-primary); box-shadow: 0 0 16px rgb(245 160 0 / .5); }
.timeline-list strong { display: block; color: var(--djumbi-text); font-size: .88rem; }
.timeline-list p, .timeline-list small { display: block; margin: .18rem 0 0; color: var(--djumbi-text-muted); font-size: .78rem; }
.data-row { flex-wrap: wrap; }
.data-row > span:last-child { font-variant-numeric: tabular-nums; }
@media (max-width: 980px) {
.public-hero { grid-template-columns: 1fr; min-height: auto; }
.hero-panel { max-width: 610px; min-height: 280px; }
.proof-section, .how-section, .security-section { grid-template-columns: 1fr; }
.section-heading { display: block; }
.section-heading > p { margin-top: .9rem; }
.app-shell { grid-template-columns: 222px minmax(0, 1fr); }
.product-grid { grid-template-columns: 1fr; }
.product-card { min-height: 220px; }
.ops-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ops-grid, .ops-grid-main { grid-template-columns: 1fr; }
.workspace-hero { display: grid; }
}
@media (max-width: 720px) {
.public-header { gap: 1rem; min-height: 64px; }
.public-header nav { display: none; }
.header-cta { min-height: 36px; padding: .5rem .65rem; font-size: .78rem; }
.public-logo-image { height: 36px; }
.value-grid, .segment-grid, .content-grid, .content-grid-aside, .stat-grid { grid-template-columns: 1fr; }
.value-grid article { padding: 1.1rem; }
.value-grid h3 { margin-top: 1rem; }
.public-footer { grid-template-columns: 1fr 1fr; }
.public-form-page { grid-template-columns: 1fr; }
.public-footer > :first-child, .footer-legal { grid-column: 1 / -1; }
.form-grid { grid-template-columns: 1fr; }
.form-grid .field { grid-column: auto; }
.app-shell { display: block; }
.app-sidebar { position: fixed; z-index: 40; left: 0; width: min(270px, 84vw); transform: translateX(-102%); transition: transform var(--djumbi-transition); box-shadow: 20px 0 45px rgb(15 23 42 / .2); }
.app-shell.sidebar-open .app-sidebar { transform: translateX(0); }
.sidebar-backdrop { position: fixed; z-index: 35; inset: 0; border: 0; background: rgb(15 23 42 / .45); }
.app-shell.sidebar-open .sidebar-backdrop { display: block; }
.mobile-menu { display: inline-flex; }
.app-topbar { min-height: 62px; padding: .65rem 1rem; }
.organization-switch { display: none; }
.theme-toggle { padding-left: .5rem; padding-right: .5rem; }
.app-main { padding: 1.25rem 1rem 2rem; }
.page-header { display: block; }
.page-header .button { margin-top: 1rem; }
.data-row { align-items: flex-start; }
.ops-stat-grid { grid-template-columns: 1fr; }
.workspace-hero-actions .button { width: 100%; }
.task-status-form { grid-template-columns: 1fr; }
.inline-status-form { width: 100%; margin-left: 0; }
.inline-status-form select { flex: 1; min-width: 0; }
}
@media (max-width: 420px) {
.public-footer { grid-template-columns: 1fr; }
.public-footer > :first-child { grid-column: auto; }
.hero-actions .button { width: 100%; }
.topbar-actions { gap: .45rem; }
.theme-toggle span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
/* 2026 application architecture: independent products and NAVIE-style navigation */
.public-site .public-header { min-height: 78px; }
.public-site .public-logo-image { height: 46px; }
.public-site .public-hero { grid-template-columns: minmax(0, 1fr) minmax(420px, .82fr); gap: clamp(2.5rem, 7vw, 7rem); min-height: 690px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; color: #91a2b8; font-size: .78rem; font-weight: 750; }
.hero-trust span { display: inline-flex; align-items: center; gap: .4rem; }
.hero-trust svg { width: 16px; height: 16px; color: var(--djumbi-primary); }
.hero-console { overflow: hidden; min-height: 430px; border: 1px solid rgb(245 160 0 / .24); border-radius: 28px; background: rgb(12 19 31 / .82); box-shadow: 0 38px 90px rgb(0 0 0 / .42); backdrop-filter: blur(24px); transform: perspective(1100px) rotateY(-4deg) rotateX(2deg); }
.hero-console-top { display: flex; align-items: center; gap: .42rem; height: 48px; padding: 0 1rem; border-bottom: 1px solid rgb(148 163 184 / .14); background: rgb(255 255 255 / .035); }
.hero-console-top span { width: 8px; height: 8px; border-radius: 50%; background: #475569; }
.hero-console-top span:first-child { background: var(--djumbi-primary); }
.hero-console-top b { margin-left: auto; color: #708197; font-size: .68rem; font-weight: 700; }
.hero-console-body { display: grid; grid-template-columns: 60px minmax(0, 1fr); min-height: 382px; }
.hero-console-sidebar { display: flex; align-items: center; flex-direction: column; gap: 1rem; padding: 1.4rem .7rem; border-right: 1px solid rgb(148 163 184 / .13); background: rgb(0 0 0 / .18); }
.hero-console-sidebar svg { width: 35px; height: 35px; padding: 9px; border-radius: 10px; color: #74869c; }
.hero-console-sidebar svg:first-child { background: var(--djumbi-primary); color: #17110a; }
.hero-console-content { padding: 2rem; }
.hero-console-content > strong { display: block; max-width: 330px; color: #f8fafc; font-size: clamp(1.55rem, 3vw, 2.4rem); letter-spacing: -.045em; line-height: 1.08; }
.hero-mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 2rem; }
.hero-mini-stats i, .hero-mini-panels i { display: block; border: 1px solid rgb(148 163 184 / .14); border-radius: 14px; background: linear-gradient(145deg, rgb(255 255 255 / .08), rgb(255 255 255 / .025)); }
.hero-mini-stats i { height: 72px; }
.hero-mini-stats i:first-child { border-color: rgb(245 160 0 / .34); background: linear-gradient(145deg, rgb(245 160 0 / .18), rgb(255 255 255 / .025)); }
.hero-mini-panels { display: grid; grid-template-columns: 1.2fr .8fr; gap: .7rem; margin-top: .7rem; }
.hero-mini-panels i { height: 112px; }
.solutions-section .segment-card { position: relative; min-height: 390px; overflow: hidden; padding: 1.65rem; border-top-width: 1px; }
.solutions-section .segment-card::after { position: absolute; width: 220px; height: 220px; right: -110px; bottom: -130px; border: 1px solid rgb(245 160 0 / .12); border-radius: 50%; content: ""; }
.segment-icon { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 2.3rem; border: 1px solid rgb(245 160 0 / .24); border-radius: 15px; background: rgb(245 160 0 / .1); color: var(--djumbi-primary); }
.segment-icon svg { width: 22px; height: 22px; }
.solutions-section .segment-card h3 { margin-top: 1rem; }
.solutions-section .segment-card b { position: relative; z-index: 1; color: var(--djumbi-primary); }
.final-cta { display: grid; justify-items: center; background: radial-gradient(circle at 50% 120%, rgb(245 160 0 / .18), transparent 28rem), #080e17; text-align: center; }
.final-cta h2 { max-width: 850px; }
.final-cta > p { max-width: 620px; margin: 1rem auto 0; color: #9dadc1; }
.public-footer { grid-template-columns: 1.45fr 1fr 1.25fr 1.15fr; align-items: start; padding-top: 4rem; }
.footer-brand { max-width: 360px; }
.footer-access p { margin: 0 0 1rem; font-size: .85rem; }
.footer-access .button { color: #17110a !important; }
.footer-legal { display: flex; justify-content: space-between; gap: 1rem; }
.footer-legal a { display: inline !important; color: var(--djumbi-primary) !important; font-weight: 800; }
.auth-body { background: #070b12; }
.auth-page { grid-template-columns: minmax(0, 1.05fr) minmax(360px, .65fr); gap: clamp(2rem, 8vw, 8rem); min-height: 100vh; padding: clamp(1.5rem, 6vw, 6rem); background: radial-gradient(circle at 10% 90%, rgb(15 64 80 / .42), transparent 30rem), radial-gradient(circle at 75% 10%, rgb(245 160 0 / .16), transparent 25rem), #070b12; }
.auth-showcase { display: flex; min-height: 590px; flex-direction: column; justify-content: space-between; }
.auth-logo { display: inline-flex; width: max-content; }
.auth-logo img { width: min(360px, 72vw); height: auto; }
.auth-showcase > div { max-width: 720px; }
.auth-showcase h1 { max-width: 680px; margin: 0; color: #f8fafc; font-size: clamp(2.8rem, 5.5vw, 5.6rem); letter-spacing: -.055em; line-height: .98; }
.auth-showcase p { max-width: 640px; margin: 1.4rem 0 0; color: #9cacc0; font-size: 1.05rem; }
.auth-showcase ul { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; margin: 0; padding: 0; color: #9cacc0; list-style: none; font-size: .8rem; font-weight: 750; }
.auth-showcase li { display: inline-flex; align-items: center; gap: .45rem; }
.auth-showcase li svg { width: 17px; height: 17px; color: var(--djumbi-primary); }
.auth-page .auth-card { width: min(100%, 500px); padding: clamp(1.5rem, 4vw, 2.5rem); border-color: rgb(148 163 184 / .16); background: rgb(15 23 35 / .82); box-shadow: 0 28px 70px rgb(0 0 0 / .34); backdrop-filter: blur(24px); }
.auth-page .auth-card h2 { margin: 0; color: #f8fafc; font-size: clamp(1.8rem, 3vw, 2.35rem); letter-spacing: -.04em; }
.auth-page .auth-card label { color: #dce5ef; }
.auth-page .auth-card input { border-color: #344155; background: rgb(5 10 17 / .58); color: #f8fafc; }
.auth-page .auth-card button[type="submit"] { gap: .5rem; background: var(--djumbi-primary); color: #17110a; }
.auth-page .auth-card button[type="submit"]:hover { background: var(--djumbi-primary-hover); color: #17110a; }
.auth-back { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1.4rem; color: #8ea0b6; font-size: .8rem; font-weight: 750; }
.auth-back svg { width: 15px; height: 15px; }
.auth-page-single { display: grid; grid-template-columns: 1fr; place-items: center; }
.auth-page-single .auth-card { margin: auto; }
.auth-logo-compact { margin-bottom: 2rem; }
.auth-logo-compact img { width: 230px; }
.app-shell { display: block; min-height: 100vh; padding-left: 72px; }
.app-content { min-height: 100vh; }
.app-sidebar { position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; width: 72px; height: 100dvh; padding: 1rem .65rem .8rem; overflow: hidden; transition: width 280ms cubic-bezier(.22, 1, .36, 1), box-shadow 280ms ease; }
.app-sidebar:hover, .app-sidebar:focus-within { width: 276px; box-shadow: 24px 0 60px rgb(0 0 0 / .36); }
.sidebar-brand-row { display: flex; align-items: center; min-height: 48px; }
.sidebar-logo { gap: .8rem; min-width: 240px; padding: .25rem .55rem 1rem; }
.sidebar-logo img { width: 34px; height: 34px; flex: 0 0 34px; }
.sidebar-logo span, .sidebar-product > div, .organization-context > div, .sidebar-nav p, .sidebar-nav a span, .sidebar-signout span { opacity: 0; transition: opacity 150ms ease; }
.app-sidebar:hover .sidebar-logo span, .app-sidebar:focus-within .sidebar-logo span,
.app-sidebar:hover .sidebar-product > div, .app-sidebar:focus-within .sidebar-product > div,
.app-sidebar:hover .organization-context > div, .app-sidebar:focus-within .organization-context > div,
.app-sidebar:hover .sidebar-nav p, .app-sidebar:focus-within .sidebar-nav p,
.app-sidebar:hover .sidebar-nav a span, .app-sidebar:focus-within .sidebar-nav a span,
.app-sidebar:hover .sidebar-signout span, .app-sidebar:focus-within .sidebar-signout span { opacity: 1; transition-delay: 80ms; }
.sidebar-product, .organization-context { display: flex; align-items: center; gap: .75rem; min-width: 242px; }
.sidebar-product { margin: .25rem .2rem .7rem; padding: .72rem .58rem; border: 1px solid rgb(245 160 0 / .14); border-radius: 15px; background: rgb(245 160 0 / .06); }
.sidebar-product > svg, .organization-context > svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--djumbi-primary); }
.sidebar-product span { display: block; color: #8092a8; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-product strong { display: block; margin-top: .1rem; color: #f8fafc; font-size: .82rem; }
.organization-context { margin: 0 .2rem .5rem; padding: .72rem .58rem; }
.organization-context > div { min-width: 0; }
.organization-context span { margin: 0; }
.sidebar-nav { min-width: 242px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.sidebar-nav::-webkit-scrollbar { display: none; }
.sidebar-nav p { white-space: nowrap; }
.sidebar-nav a, .sidebar-signout button { gap: .82rem; min-height: 44px; padding: .66rem .62rem; white-space: nowrap; }
.sidebar-nav a > svg, .sidebar-signout button > svg { width: 19px; height: 19px; flex: 0 0 19px; }
.sidebar-nav a.is-active { box-shadow: 0 10px 24px rgb(245 160 0 / .22); }
.sidebar-signout { min-width: 242px; }
.sidebar-mobile-close { display: none; }
.app-main button[type="submit"] { color: #17110a; }
.app-main button[type="submit"]:hover { color: #17110a; }
.module-page-header { margin-bottom: 1.2rem; padding: .3rem 0 .5rem; }
.module-page-header > div { display: flex; align-items: center; gap: 1rem; }
.module-icon { display: grid; width: 58px; height: 58px; flex: 0 0 58px; place-items: center; border: 1px solid rgb(245 160 0 / .26); border-radius: 18px; background: linear-gradient(145deg, rgb(245 160 0 / .18), rgb(15 64 80 / .13)); color: var(--djumbi-primary); box-shadow: 0 14px 30px rgb(0 0 0 / .15); }
.module-icon svg { width: 25px; height: 25px; }
.module-page-header .eyebrow { margin-bottom: .3rem; }
.module-page-header h1 { margin: 0; color: var(--djumbi-text); font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.045em; line-height: 1.05; }
.module-page-header p { margin: .45rem 0 0; color: var(--djumbi-text-muted); }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 1rem; margin-bottom: 1rem; }
.overview-primary { min-height: 340px; }
.panel-title a { color: var(--djumbi-primary); font-size: .78rem; font-weight: 800; }
.module-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.module-shortcuts > a { display: grid; min-height: 138px; padding: 1rem; border: 1px solid rgb(148 163 184 / .16); border-radius: 18px; background: color-mix(in srgb, var(--djumbi-surface) 90%, transparent); box-shadow: 0 14px 30px rgb(0 0 0 / .1); transition: transform var(--djumbi-transition), border-color var(--djumbi-transition); }
.module-shortcuts > a:hover { border-color: rgb(245 160 0 / .42); color: inherit; transform: translateY(-2px); }
.module-shortcuts > a > svg { width: 21px; height: 21px; color: var(--djumbi-primary); }
.module-shortcuts > a > span { align-self: end; margin-top: 1rem; color: var(--djumbi-text); font-weight: 850; }
.module-shortcuts b { display: flex; align-items: center; gap: .3rem; margin-top: .2rem; color: var(--djumbi-text-muted); font-size: .7rem; }
.module-shortcuts b svg { width: 13px; height: 13px; }
.module-layout { display: grid; grid-template-columns: minmax(310px, .62fr) minmax(0, 1.38fr); gap: 1rem; align-items: start; }
.module-layout-compact { grid-template-columns: minmax(320px, .7fr) minmax(0, 1.3fr); margin-bottom: 1rem; }
.module-form-card { position: sticky; top: 86px; }
.module-list-card { min-height: 430px; }
.module-help-card { min-height: 250px; background: radial-gradient(circle at 90% 10%, rgb(245 160 0 / .16), transparent 17rem), color-mix(in srgb, var(--djumbi-surface) 92%, transparent); }
.module-help-card h2 { margin: 0; color: var(--djumbi-text); font-size: 1.65rem; }
.module-help-card > p { color: var(--djumbi-text-muted); }
.mini-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: 1.4rem; }
.mini-metrics span { padding: .75rem; border: 1px solid var(--djumbi-border); border-radius: 14px; color: var(--djumbi-text-muted); font-size: .68rem; }
.mini-metrics b { display: block; margin-bottom: .2rem; color: var(--djumbi-primary); font-size: 1.15rem; }
.finance-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.finance-summary article { padding: 1.2rem; border: 1px solid rgb(245 160 0 / .2); border-radius: 20px; background: linear-gradient(145deg, rgb(245 160 0 / .12), color-mix(in srgb, var(--djumbi-surface) 92%, transparent)); box-shadow: 0 14px 30px rgb(0 0 0 / .1); }
.finance-summary span, .finance-summary small { display: block; color: var(--djumbi-text-muted); }
.finance-summary span { font-size: .74rem; font-weight: 800; text-transform: uppercase; }
.finance-summary strong { display: block; margin: .35rem 0 .25rem; color: var(--djumbi-text); font-size: clamp(1.4rem, 2.4vw, 2.1rem); }
.control-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
.control-products.single-product { grid-template-columns: minmax(0, 1fr); }
.control-products article { padding: 1.2rem; border: 1px solid rgb(148 163 184 / .16); border-radius: 20px; background: color-mix(in srgb, var(--djumbi-surface) 90%, transparent); }
.control-products svg { width: 24px; height: 24px; color: var(--djumbi-primary); }
.control-products span { display: block; margin-top: 2rem; color: var(--djumbi-primary); font-size: .68rem; font-weight: 900; letter-spacing: .1em; }
.control-products strong { display: block; margin-top: .35rem; color: var(--djumbi-text); font-size: 1.05rem; }
.control-products p { margin: .35rem 0 0; color: var(--djumbi-text-muted); font-size: .8rem; }
.audit-panel { max-width: 1100px; }
@media (min-width: 721px) {
.mobile-menu { display: none; }
}
@media (max-width: 1100px) {
.public-site .public-hero { grid-template-columns: 1fr; }
.hero-console { width: min(100%, 680px); transform: none; }
.public-footer { grid-template-columns: repeat(2, 1fr); }
.footer-legal { grid-column: 1 / -1; }
.module-shortcuts { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
.auth-page { display: block; padding: 1.25rem; }
.auth-showcase { display: block; min-height: 0; margin: 0 auto 1.5rem; max-width: 500px; }
.auth-logo img { width: 220px; }
.auth-showcase > div, .auth-showcase ul { display: none; }
.auth-page .auth-card { margin: 0 auto; }
.overview-grid, .module-layout, .module-layout-compact { grid-template-columns: 1fr; }
.module-form-card { position: static; }
.module-shortcuts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.public-site .public-header { min-height: 68px; }
.public-site .public-logo-image { height: 38px; }
.public-site .public-hero { min-height: auto; }
.hero-console { min-height: 340px; }
.hero-console-body { min-height: 292px; }
.public-footer { grid-template-columns: 1fr; }
.footer-legal { display: grid; grid-column: auto; }
.app-shell { padding-left: 0; }
.app-sidebar { width: min(286px, 88vw); padding: 1rem .8rem; transform: translateX(-105%); transition: transform var(--djumbi-transition); }
.app-sidebar:hover, .app-sidebar:focus-within { width: min(286px, 88vw); }
.app-shell.sidebar-open .app-sidebar { transform: translateX(0); }
.sidebar-logo span, .sidebar-product > div, .organization-context > div, .sidebar-nav p, .sidebar-nav a span, .sidebar-signout span { opacity: 1; }
.sidebar-brand-row { justify-content: space-between; }
.sidebar-mobile-close { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgb(148 163 184 / .18); border-radius: 12px; background: rgb(255 255 255 / .04); color: #cbd5e1; }
.sidebar-mobile-close svg { width: 18px; height: 18px; }
.mobile-menu { display: inline-flex; }
.module-page-header > div { align-items: flex-start; }
.module-icon { width: 48px; height: 48px; flex-basis: 48px; border-radius: 15px; }
.module-shortcuts { grid-template-columns: 1fr 1fr; }
.module-shortcuts > a { min-height: 115px; }
.finance-summary, .control-products { grid-template-columns: 1fr; }
.mini-metrics { grid-template-columns: 1fr; }
.data-row { align-items: flex-start; flex-direction: column; }
.data-row > span { text-align: left; }
.inline-status-form { width: 100%; margin-left: 0; }
}
@media (max-width: 440px) {
.header-cta { font-size: 0; }
.header-cta::after { font-size: .78rem; content: "WhatsApp"; }
.hero-console { min-height: 300px; }
.hero-console-content { padding: 1.25rem; }
.hero-console-body { grid-template-columns: 48px minmax(0, 1fr); min-height: 252px; }
.hero-console-sidebar { padding: 1rem .4rem; }
.hero-console-sidebar svg { width: 31px; height: 31px; }
.hero-mini-panels i { height: 82px; }
.module-shortcuts { grid-template-columns: 1fr; }
.topbar-actions .user-avatar { display: none; }
}
/* Tenant branding, seamless navigation and compact viewport behavior */
html {
scrollbar-color: color-mix(in srgb, var(--djumbi-primary) 58%, transparent) transparent;
scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
border: 2px solid transparent;
border-radius: 999px;
background: color-mix(in srgb, var(--djumbi-primary) 55%, transparent);
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--djumbi-primary) 78%, transparent); }
html:has(.auth-body), .auth-body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.auth-body .auth-page {
height: 100dvh;
min-height: 0;
padding: clamp(.85rem, 2.5vh, 1.6rem) clamp(1rem, 5vw, 5rem);
overflow: hidden;
}
.auth-body .auth-showcase {
width: 100%;
min-height: 0;
height: min(620px, calc(100dvh - 3rem));
}
.auth-body .auth-logo img { width: min(260px, 48vw); }
.auth-body .auth-showcase h1 { font-size: clamp(2.35rem, 4.7vw, 4.8rem); }
.auth-body .auth-showcase p { margin-top: 1rem; font-size: clamp(.9rem, 1.15vw, 1rem); }
.auth-body .auth-card {
max-height: calc(100dvh - 2rem);
padding: clamp(1.2rem, 3.2vh, 2.15rem);
}
.auth-body .auth-card .stack-form { gap: .72rem; }
.auth-body .auth-card input { min-height: 40px; }
.auth-body .auth-card button[type="submit"] { min-height: 40px; }
.auth-body .auth-intro { margin: .65rem 0 1rem; }
.auth-body .auth-footer { margin-top: .8rem; }
.auth-body .auth-back { margin-top: .9rem; }
.auth-card-logo { display: none; }
.app-shell {
--sidebar-collapsed-width: 88px;
--sidebar-expanded-width: 300px;
--sidebar-item-size: 56px;
--sidebar-control-size: clamp(34px, 5vh, 46px);
--djumbi-primary: var(--tenant-primary, #f5a000);
--djumbi-primary-hover: color-mix(in srgb, var(--tenant-primary, #f5a000) 78%, white);
--djumbi-accent: var(--tenant-accent, #0f4050);
padding-left: var(--sidebar-collapsed-width);
}
.app-sidebar {
width: var(--sidebar-collapsed-width);
padding: 14px 12px 12px;
box-sizing: border-box;
background:
radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--tenant-accent, #0f4050) 46%, transparent), transparent 18rem),
linear-gradient(180deg, color-mix(in srgb, var(--tenant-sidebar, #0b1320) 88%, #111827), color-mix(in srgb, var(--tenant-sidebar, #0b1320) 78%, black));
box-shadow: 18px 0 48px rgb(0 0 0 / .26), inset -1px 0 rgb(255 255 255 / .04);
backdrop-filter: blur(22px) saturate(132%);
-webkit-backdrop-filter: blur(22px) saturate(132%);
contain: layout style;
}
.app-sidebar:hover,
.app-sidebar:focus-within {
width: var(--sidebar-expanded-width);
}
.sidebar-logo {
position: relative;
width: 100%;
min-width: 0;
height: 62px;
flex: 1 1 auto;
place-items: center;
padding: 0;
overflow: hidden;
}
.sidebar-logo .sidebar-logo-mark {
position: absolute;
top: 50%;
left: 50%;
width: 34px;
height: 34px;
object-fit: contain;
opacity: 1;
transform: translate(-50%, -50%);
transition: opacity 140ms ease, transform 240ms cubic-bezier(.22, 1, .36, 1);
}
.sidebar-logo .sidebar-logo-full {
position: absolute;
top: 0;
left: 50%;
width: 205px;
height: 58px;
object-fit: contain;
object-position: center;
opacity: 0;
transform: translate(-50%, -8px);
transition: opacity 160ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1);
}
.sidebar-brand-row { min-height: 62px; }
.sidebar-logo .sidebar-logo-client {
max-width: 210px;
filter: drop-shadow(0 8px 18px rgb(0 0 0 / .24));
}
.app-sidebar:hover .sidebar-logo-mark,
.app-sidebar:focus-within .sidebar-logo-mark { opacity: 0; transform: translate(-50%, -50%) scale(.88); }
.app-sidebar:hover .sidebar-logo-full,
.app-sidebar:focus-within .sidebar-logo-full { opacity: 1; transform: translate(-50%, 0); }
.sidebar-product,
.organization-context {
width: var(--sidebar-item-size);
min-width: 0;
min-height: var(--sidebar-item-size);
box-sizing: border-box;
justify-content: center;
gap: 0;
margin-left: auto;
margin-right: auto;
padding: 0;
overflow: hidden;
border-color: rgb(255 255 255 / .12);
background:
linear-gradient(145deg, rgb(255 255 255 / .105), rgb(255 255 255 / .035)),
color-mix(in srgb, var(--tenant-primary, #f5a000) 5%, transparent);
box-shadow: inset 0 1px rgb(255 255 255 / .1), 0 10px 24px rgb(0 0 0 / .14);
backdrop-filter: blur(14px) saturate(122%);
-webkit-backdrop-filter: blur(14px) saturate(122%);
transition:
width 280ms cubic-bezier(.22, 1, .36, 1),
min-height 280ms cubic-bezier(.22, 1, .36, 1),
padding 280ms cubic-bezier(.22, 1, .36, 1),
gap 180ms ease;
}
.sidebar-product > div,
.organization-context > div {
width: 0;
min-width: 0;
flex: 0 0 0;
overflow: hidden;
visibility: hidden;
}
.app-sidebar:hover .sidebar-product,
.app-sidebar:focus-within .sidebar-product,
.app-sidebar:hover .organization-context,
.app-sidebar:focus-within .organization-context {
width: 100%;
justify-content: flex-start;
gap: .75rem;
padding-left: .72rem;
padding-right: .72rem;
}
.app-sidebar:hover .sidebar-product,
.app-sidebar:focus-within .sidebar-product { min-height: 68px; }
.app-sidebar:hover .organization-context,
.app-sidebar:focus-within .organization-context { min-height: 84px; }
.app-sidebar:hover .sidebar-product > div,
.app-sidebar:focus-within .sidebar-product > div,
.app-sidebar:hover .organization-context > div,
.app-sidebar:focus-within .organization-context > div {
width: auto;
flex: 1 1 auto;
visibility: visible;
}
.sidebar-product strong,
.organization-context strong,
.organization-context small {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-product strong,
.organization-context small { white-space: nowrap; }
.organization-context strong {
display: -webkit-box;
white-space: normal;
line-height: 1.25;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.sidebar-nav {
width: 100%;
min-width: 0;
min-height: 0;
flex: 1 1 auto;
align-content: start;
gap: 0;
padding-right: 0;
overflow: hidden;
scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }
.app-sidebar:hover .sidebar-nav,
.app-sidebar:focus-within .sidebar-nav {
padding-right: 0;
scrollbar-width: none;
}
.sidebar-nav p {
display: none;
height: 0;
margin: 0;
overflow: hidden;
white-space: nowrap;
transition: height 180ms ease, margin 180ms ease, opacity 140ms ease;
}
.app-sidebar:hover .sidebar-nav p,
.app-sidebar:focus-within .sidebar-nav p {
display: block;
height: auto;
margin: .85rem .65rem .3rem;
}
.sidebar-nav a,
.sidebar-signout button {
width: var(--sidebar-control-size);
min-width: var(--sidebar-control-size);
min-height: var(--sidebar-control-size);
height: var(--sidebar-control-size);
aspect-ratio: 1;
box-sizing: border-box;
justify-content: center;
gap: 0;
margin: 0 auto;
padding: clamp(.4rem, .85vh, .62rem) 0;
overflow: hidden;
transition: width 280ms cubic-bezier(.22, 1, .36, 1), padding 280ms cubic-bezier(.22, 1, .36, 1), background 180ms ease;
}
.sidebar-nav a > svg,
.sidebar-signout button > svg {
width: clamp(15px, 2.2vh, 18px);
height: clamp(15px, 2.2vh, 18px);
flex: 0 0 clamp(15px, 2.2vh, 18px);
margin: 0;
}
.app-sidebar:hover .sidebar-nav a,
.app-sidebar:focus-within .sidebar-nav a,
.app-sidebar:hover .sidebar-signout button,
.app-sidebar:focus-within .sidebar-signout button {
width: 100%;
min-width: 0;
aspect-ratio: auto;
justify-content: flex-start;
gap: .72rem;
padding-left: .72rem;
padding-right: .72rem;
}
.sidebar-nav a.is-active {
border: 1px solid color-mix(in srgb, var(--tenant-primary, #f5a000) 72%, white);
border-radius: clamp(10px, 1.8vh, 14px);
background:
linear-gradient(145deg, color-mix(in srgb, var(--tenant-primary, #f5a000) 92%, white), color-mix(in srgb, var(--tenant-primary, #f5a000) 82%, transparent));
box-shadow: inset 0 1px rgb(255 255 255 / .38), 0 9px 22px color-mix(in srgb, var(--tenant-primary, #f5a000) 26%, transparent);
}
.sidebar-nav a span,
.sidebar-signout span {
width: 0;
max-width: 0;
flex: 0 0 0;
overflow: hidden;
text-overflow: ellipsis;
visibility: hidden;
white-space: nowrap;
font-size: clamp(.74rem, 1.65vh, .86rem);
}
.app-sidebar:hover .sidebar-nav a span,
.app-sidebar:focus-within .sidebar-nav a span,
.app-sidebar:hover .sidebar-signout span,
.app-sidebar:focus-within .sidebar-signout span {
width: auto;
max-width: 100%;
flex: 1 1 auto;
visibility: visible;
}
.sidebar-account {
display: grid;
width: 100%;
min-width: 0;
gap: .42rem;
margin-top: auto;
padding-top: .65rem;
border-top: 1px solid rgb(255 255 255 / .1);
}
.sidebar-account-card {
display: flex;
width: var(--sidebar-item-size);
min-height: var(--sidebar-item-size);
align-items: center;
justify-content: center;
gap: 0;
margin: 0 auto;
overflow: hidden;
border: 1px solid rgb(255 255 255 / .12);
border-radius: 16px;
background: linear-gradient(145deg, rgb(255 255 255 / .1), rgb(255 255 255 / .035));
box-shadow: inset 0 1px rgb(255 255 255 / .1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: width 280ms cubic-bezier(.22, 1, .36, 1), padding 280ms cubic-bezier(.22, 1, .36, 1), gap 180ms ease;
}
.sidebar-account-avatar {
display: grid;
width: 34px;
height: 34px;
flex: 0 0 34px;
place-items: center;
border: 1px solid color-mix(in srgb, var(--tenant-primary, #f5a000) 40%, transparent);
border-radius: 12px;
background: color-mix(in srgb, var(--tenant-primary, #f5a000) 17%, transparent);
color: var(--tenant-primary, #f5a000);
font-size: .75rem;
font-weight: 900;
}
.sidebar-account-copy {
width: 0;
min-width: 0;
flex: 0 0 0;
overflow: hidden;
visibility: hidden;
}
.sidebar-account-copy span,
.sidebar-account-copy strong,
.sidebar-account-copy small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar-account-copy span { color: #8092a8; font-size: .56rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-account-copy strong { margin-top: .08rem; color: #f8fafc; font-size: .78rem; }
.sidebar-account-copy small { margin-top: .08rem; color: #8fa2b8; font-size: .64rem; }
.app-sidebar:hover .sidebar-account-card,
.app-sidebar:focus-within .sidebar-account-card {
width: 100%;
justify-content: flex-start;
gap: .65rem;
padding: .58rem .65rem;
}
.app-sidebar:hover .sidebar-account-copy,
.app-sidebar:focus-within .sidebar-account-copy {
width: auto;
flex: 1 1 auto;
visibility: visible;
}
.sidebar-signout { width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
.app-loading {
width: 15px;
height: 15px;
border: 2px solid color-mix(in srgb, var(--djumbi-primary) 25%, transparent);
border-top-color: var(--djumbi-primary);
border-radius: 50%;
opacity: 0;
animation: app-loading-spin .7s linear infinite;
}
.htmx-request .app-loading,
.app-loading.htmx-request { opacity: 1; }
#app-main { transition: opacity 140ms ease, transform 180ms ease; }
#app-main.htmx-swapping { opacity: 0; transform: translateY(4px); }
@keyframes app-loading-spin { to { transform: rotate(360deg); } }
.branding-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); gap: 1rem; align-items: start; }
.branding-preview-panel, .branding-form-panel { min-height: 420px; }
.branding-form-panel { position: sticky; top: 86px; }
.branding-preview {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
min-height: 310px;
overflow: hidden;
border: 1px solid var(--djumbi-border);
border-radius: 20px;
background: var(--djumbi-surface-muted);
}
.branding-preview aside {
display: flex;
flex-direction: column;
gap: .45rem;
padding: 1rem;
background: linear-gradient(180deg, var(--preview-sidebar), color-mix(in srgb, var(--preview-sidebar) 76%, black));
color: #dbe5f0;
}
.branding-preview aside img { width: 140px; height: 54px; margin-bottom: 1.1rem; object-fit: contain; object-position: left center; }
.branding-preview aside span { display: flex; align-items: center; gap: .5rem; min-height: 36px; padding: .5rem .6rem; border-radius: 10px; font-size: .72rem; font-weight: 750; }
.branding-preview aside span svg { width: 15px; height: 15px; }
.branding-preview .branding-preview-active { background: var(--preview-primary); color: #17110a; }
.branding-preview > div { display: flex; justify-content: center; flex-direction: column; padding: clamp(1.2rem, 3vw, 2.2rem); }
.branding-preview small { color: var(--preview-primary); font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.branding-preview strong { margin-top: .4rem; color: var(--djumbi-text); font-size: clamp(1.45rem, 2.6vw, 2.2rem); line-height: 1.08; }
.branding-preview p { max-width: 390px; color: var(--djumbi-text-muted); }
.branding-preview button { width: max-content; min-height: 38px; padding: .5rem .75rem; border: 0; border-radius: 10px; background: var(--preview-primary); color: #17110a; font-weight: 800; }
.branding-form input[type="color"] { width: 100%; height: 48px; padding: 4px; cursor: pointer; }
.branding-form input[type="file"] { padding: .45rem; }
.branding-form input[type="file"]::file-selector-button {
margin-right: .7rem;
padding: .42rem .65rem;
border: 0;
border-radius: 8px;
background: var(--djumbi-surface-muted);
color: var(--djumbi-text);
font-weight: 750;
cursor: pointer;
}
.permission-note { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem; border: 1px solid var(--djumbi-border); border-radius: 14px; background: var(--djumbi-surface-muted); }
.permission-note svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--djumbi-primary); }
.permission-note strong { color: var(--djumbi-text); }
.permission-note p { margin: .25rem 0 0; color: var(--djumbi-text-muted); }
.hierarchy-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .8rem;
margin-bottom: 1rem;
}
.hierarchy-summary article {
display: flex;
align-items: center;
gap: .85rem;
min-width: 0;
padding: 1rem;
border: 1px solid var(--djumbi-border);
border-radius: 18px;
background: color-mix(in srgb, var(--djumbi-surface) 92%, transparent);
}
.hierarchy-summary svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--djumbi-primary); }
.hierarchy-summary strong { display: block; color: var(--djumbi-text); font-size: 1.35rem; line-height: 1; }
.hierarchy-summary span { display: block; margin-top: .3rem; color: var(--djumbi-text-muted); font-size: .72rem; }
.team-access-layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1rem;
align-items: start;
}
.team-access-lists { align-items: stretch; }
.team-access-lists > article { height: 100%; }
.hierarchy-list { display: grid; gap: .55rem; }
.hierarchy-row,
.member-access-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: .75rem;
min-width: 0;
padding: .8rem;
border: 1px solid var(--djumbi-border);
border-radius: 14px;
background: var(--djumbi-surface-muted);
}
.hierarchy-row.is-disabled,
.member-access-row:has(.status.inactive) { opacity: .58; }
.hierarchy-level,
.member-avatar {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border: 1px solid color-mix(in srgb, var(--djumbi-primary) 28%, transparent);
border-radius: 12px;
background: color-mix(in srgb, var(--djumbi-primary) 11%, transparent);
color: var(--djumbi-primary);
font-size: .75rem;
font-weight: 900;
}
.member-avatar { border-radius: 50%; color: #17110a; background: var(--djumbi-primary); }
.hierarchy-row > div,
.member-access-row > div { min-width: 0; }
.hierarchy-row strong,
.member-access-row strong {
display: block;
overflow: hidden;
color: var(--djumbi-text);
text-overflow: ellipsis;
white-space: nowrap;
}
.hierarchy-row span:not(.hierarchy-level),
.hierarchy-row small,
.member-access-row span:not(.member-avatar),
.member-access-row small {
display: block;
overflow: hidden;
color: var(--djumbi-text-muted);
text-overflow: ellipsis;
white-space: nowrap;
font-size: .7rem;
}
.hierarchy-row small,
.member-access-row small { margin-top: .2rem; }
.app-main .inline-action,
.app-main .member-access-row button.status {
min-height: 32px;
padding: .38rem .58rem;
border: 1px solid var(--djumbi-border);
border-radius: 9px;
background: transparent;
color: var(--djumbi-text-muted);
font-size: .68rem;
}
.app-main .member-access-row button.status.active {
border-color: rgb(34 197 94 / .28);
background: rgb(34 197 94 / .1);
color: #4ade80;
}
.permission-guide {
display: flex;
align-items: flex-start;
gap: .85rem;
padding: 1rem;
border: 1px solid color-mix(in srgb, var(--djumbi-primary) 24%, var(--djumbi-border));
border-radius: 16px;
background: color-mix(in srgb, var(--djumbi-primary) 7%, var(--djumbi-surface));
}
.permission-guide > svg { width: 21px; height: 21px; flex: 0 0 21px; color: var(--djumbi-primary); }
.permission-guide strong { color: var(--djumbi-text); }
.permission-guide p { margin: .3rem 0 0; color: var(--djumbi-text-muted); font-size: .78rem; }
/* Shared glass surfaces: blur stays on containers, never on every list row. */
.module-shortcuts > a,
.finance-summary article,
.control-products article,
.hierarchy-summary article,
.branding-preview,
.permission-guide {
border-color: rgb(255 255 255 / .13);
background:
linear-gradient(145deg, rgb(255 255 255 / .075), rgb(255 255 255 / .025)),
color-mix(in srgb, var(--djumbi-surface) 84%, transparent);
box-shadow: inset 0 1px rgb(255 255 255 / .08), 0 16px 36px rgb(0 0 0 / .12);
backdrop-filter: blur(14px) saturate(118%);
-webkit-backdrop-filter: blur(14px) saturate(118%);
}
.data-row,
.hierarchy-row,
.member-access-row {
content-visibility: auto;
contain-intrinsic-size: auto 64px;
}
@media (min-width: 721px) {
.app-sidebar:not(:hover):not(:focus-within) .sidebar-nav {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.app-sidebar:hover .sidebar-nav,
.app-sidebar:focus-within .sidebar-nav {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: clamp(.04rem, .18vh, .12rem);
}
}
@media (max-height: 760px) and (min-width: 821px) {
.auth-body .auth-showcase { height: calc(100dvh - 2rem); }
.auth-body .auth-logo img { width: 210px; }
.auth-body .auth-showcase h1 { font-size: clamp(2.2rem, 4.3vw, 3.8rem); }
.auth-body .auth-showcase ul { gap: .6rem 1rem; }
.auth-body .auth-card { padding: 1.35rem 1.7rem; }
}
@media (max-width: 960px) {
.branding-layout { grid-template-columns: 1fr; }
.branding-form-panel { position: static; }
.team-access-layout { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
.auth-body .auth-page { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: .75rem; }
.auth-body .auth-showcase { display: none; }
.auth-body .auth-card { width: min(100%, 450px); padding: clamp(1rem, 3.2vh, 1.5rem); }
.auth-card-logo { display: inline-flex; margin-bottom: .7rem; }
.auth-card-logo img { width: 150px; height: 58px; object-fit: contain; object-position: left center; }
}
@media (max-width: 720px) {
.app-shell { padding-left: 0; }
.app-sidebar,
.app-sidebar:hover,
.app-sidebar:focus-within {
width: min(310px, calc(100vw - 20px));
padding: 14px;
}
.sidebar-logo .sidebar-logo-mark { display: none; }
.sidebar-logo .sidebar-logo-full { opacity: 1; transform: translate(-50%, 0); }
.sidebar-brand-row {
position: relative;
display: grid;
place-items: center;
}
.sidebar-brand-row .sidebar-logo {
position: absolute;
inset: 0;
z-index: 0;
}
.sidebar-mobile-close {
position: absolute;
z-index: 1;
top: 50%;
right: 0;
margin: 0;
transform: translateY(-50%);
}
.sidebar-product,
.organization-context {
width: 100%;
justify-content: flex-start;
gap: .75rem;
margin-left: 0;
margin-right: 0;
padding-left: .72rem;
padding-right: .72rem;
}
.sidebar-product { min-height: 68px; }
.organization-context { min-height: 84px; }
.sidebar-product > div,
.organization-context > div {
width: auto;
flex: 1 1 auto;
visibility: visible;
}
.sidebar-nav { padding-right: 0; overflow: hidden; scrollbar-width: none; }
.sidebar-nav::-webkit-scrollbar { display: none; }
.sidebar-nav {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: .12rem;
}
.sidebar-nav p { height: auto; margin: .85rem .65rem .3rem; }
.sidebar-nav p { display: block; }
.sidebar-nav a,
.sidebar-signout button {
width: 100%;
min-width: 0;
aspect-ratio: auto;
justify-content: flex-start;
gap: .72rem;
margin: 0;
padding-left: .72rem;
padding-right: .72rem;
}
.sidebar-nav a span,
.sidebar-signout span {
width: auto;
max-width: 100%;
flex: 1 1 auto;
visibility: visible;
}
.sidebar-account-card {
width: 100%;
justify-content: flex-start;
gap: .65rem;
margin: 0;
padding: .58rem .65rem;
}
.sidebar-account-copy {
width: auto;
flex: 1 1 auto;
visibility: visible;
}
.app-sidebar,
.sidebar-product,
.organization-context,
.sidebar-account-card,
.module-shortcuts > a,
.finance-summary article,
.control-products article,
.hierarchy-summary article,
.branding-preview,
.permission-guide {
backdrop-filter: blur(10px) saturate(112%);
-webkit-backdrop-filter: blur(10px) saturate(112%);
}
.branding-preview { grid-template-columns: 132px minmax(0, 1fr); }
.branding-preview aside { padding: .75rem; }
.branding-preview aside img { width: 106px; }
}
@media (max-height: 720px) {
.app-shell { --sidebar-control-size: clamp(28px, 4.3vh, 32px); }
.sidebar-logo,
.sidebar-brand-row { height: 54px; min-height: 54px; }
.sidebar-logo .sidebar-logo-mark { top: 50%; }
.sidebar-logo .sidebar-logo-full { height: 50px; }
.app-sidebar:hover .sidebar-product,
.app-sidebar:focus-within .sidebar-product,
.sidebar-product { min-height: 52px; margin-bottom: .45rem; }
.app-sidebar:hover .organization-context,
.app-sidebar:focus-within .organization-context,
.organization-context { min-height: 60px; margin-bottom: .35rem; }
.sidebar-product span,
.organization-context span { font-size: .56rem; }
.sidebar-product strong,
.organization-context strong { font-size: .76rem; }
.organization-context small { font-size: .64rem; }
.sidebar-account-card { min-height: 48px; }
.sidebar-account-avatar { width: 30px; height: 30px; flex-basis: 30px; }
.app-sidebar:hover .sidebar-nav p,
.app-sidebar:focus-within .sidebar-nav p,
.sidebar-nav p { height: 0; margin: 0; }
.sidebar-nav a,
.sidebar-signout button {
width: var(--sidebar-control-size);
min-width: var(--sidebar-control-size);
min-height: var(--sidebar-control-size);
height: var(--sidebar-control-size);
border-radius: 11px;
}
.app-sidebar:hover .sidebar-nav a,
.app-sidebar:focus-within .sidebar-nav a,
.app-sidebar:hover .sidebar-signout button,
.app-sidebar:focus-within .sidebar-signout button,
.app-shell.sidebar-open .sidebar-nav a,
.app-shell.sidebar-open .sidebar-signout button {
width: 100%;
min-width: 0;
}
}
@media (max-height: 600px) {
.app-shell { --sidebar-control-size: clamp(25px, 4.1vh, 28px); }
.app-sidebar { padding-top: 8px; padding-bottom: 8px; }
.sidebar-logo,
.sidebar-brand-row { height: 46px; min-height: 46px; }
.sidebar-logo .sidebar-logo-mark { top: 50%; }
.sidebar-logo .sidebar-logo-full { height: 44px; }
.app-sidebar:hover .sidebar-product,
.app-sidebar:focus-within .sidebar-product,
.sidebar-product { min-height: 46px; margin-bottom: .25rem; }
.app-sidebar:hover .organization-context,
.app-sidebar:focus-within .organization-context,
.organization-context { min-height: 52px; margin-bottom: .2rem; }
.sidebar-account-card { min-height: 44px; }
.sidebar-account-avatar { width: 28px; height: 28px; flex-basis: 28px; }
.sidebar-nav a,
.sidebar-signout button {
width: var(--sidebar-control-size);
min-width: var(--sidebar-control-size);
min-height: var(--sidebar-control-size);
height: var(--sidebar-control-size);
padding-top: .3rem;
padding-bottom: .3rem;
}
.sidebar-nav a span,
.sidebar-signout span { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
@media (max-width: 480px) {
.branding-preview { grid-template-columns: 1fr; }
.branding-preview aside { display: none; }
.hierarchy-summary { grid-template-columns: 1fr; }
.hierarchy-row,
.member-access-row {
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
}
.hierarchy-row form,
.member-access-row form { grid-column: 1 / -1; }
.hierarchy-row form button,
.member-access-row form button { width: 100%; }
}
@media (max-height: 590px) {
.auth-body .auth-card { padding: .8rem 1.1rem; }
.auth-card-logo { margin-bottom: .25rem; }
.auth-card-logo img { width: 125px; height: 44px; }
.auth-body .auth-card h2 { font-size: 1.55rem; }
.auth-body .auth-intro { margin: .35rem 0 .6rem; font-size: .82rem; }
.auth-body .auth-card .stack-form { gap: .45rem; }
.auth-body .auth-footer, .auth-body .auth-back { margin-top: .45rem; font-size: .72rem; }
}