*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#0d0d10;color:#fff}button,input{font:inherit}.loader{position:fixed;inset:0;display:grid;place-items:center;background:#0d0d10;z-index:50;transition:.55s ease}.loader-mark{width:68px;height:68px;border:1px solid #ffffff2b;border-radius:22px;display:grid;place-items:center;font-size:28px;font-weight:800;backdrop-filter:blur(12px);animation:pulse 1s infinite alternate}.loader-line{position:absolute;bottom:20%;width:min(280px,60vw);height:2px;background:#ffffff17;overflow:hidden}.loader-line:after{content:"";display:block;width:40%;height:100%;background:#fff;animation:load 1s ease-in-out infinite}.hub{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;transition:.6s ease}.is-hidden{opacity:0;transform:scale(.985)}.sector{position:relative;min-height:100vh;padding:6vw;display:flex;align-items:flex-end;overflow:hidden;cursor:pointer;transition:flex .4s,filter .35s,transform .35s}.sector:before{content:"";position:absolute;inset:0;opacity:.8}.sector:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,#000c 92%)}.pos{background:radial-gradient(circle at 25% 20%,#8055ff55,transparent 32%),linear-gradient(135deg,#221a38,#0c0c11)}.crm{background:radial-gradient(circle at 70% 25%,#f1b6c855,transparent 30%),linear-gradient(135deg,#302127,#0c0c11)}.sector-content{position:relative;z-index:2;max-width:560px}.eyebrow{font-size:.72rem;letter-spacing:.22em;color:#ffffff9f}.sector h1{font-size:clamp(4rem,10vw,9rem);line-height:.85;margin:.35rem 0 1rem}.sector p{max-width:520px;color:#ffffffb5;font-size:1.05rem;line-height:1.7}.enter,.submit{border:0;border-radius:14px;background:#fff;color:#111;padding:14px 20px;font-weight:800;cursor:pointer}.modal-backdrop{position:fixed;inset:0;background:#0009;display:grid;place-items:center;padding:18px;z-index:60;opacity:0;pointer-events:none;transition:.25s}.modal-backdrop.open{opacity:1;pointer-events:auto}.modal{width:min(440px,100%);background:#151519;border:1px solid #ffffff18;border-radius:28px;padding:30px;box-shadow:0 28px 80px #0008;transform:translateY(24px) scale(.97);transition:.3s}.open .modal{transform:none}.modal h2{font-size:2rem;margin:.45rem 0 1.4rem}.modal label{display:block;margin:14px 0;color:#ffffffba}.modal input{width:100%;margin-top:7px;padding:13px 14px;border:1px solid #ffffff1c;border-radius:12px;background:#0e0e11;color:#fff;outline:none}.modal input:focus{border-color:#ffffff66}.submit{width:100%;margin-top:10px}.close{position:absolute;margin-left:365px;margin-top:-12px;background:transparent;color:#fff;border:0;font-size:30px;cursor:pointer}.sector:hover{filter:brightness(1.08)}@keyframes pulse{to{transform:scale(1.06);box-shadow:0 0 40px #ffffff1b}}@keyframes load{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}@media(max-width:800px){.hub{grid-template-columns:1fr}.sector{min-height:50vh;padding:34px 24px}.sector h1{font-size:clamp(4rem,22vw,7rem)}.close{right:20px;top:16px;margin:0}}
.setup-page{min-height:100vh;background:radial-gradient(circle at 20% 10%,#8055ff33,transparent 32%),radial-gradient(circle at 85% 80%,#f1b6c82b,transparent 30%),#0d0d10}
.setup-shell{min-height:100vh;display:grid;place-items:center;padding:28px}
.setup-card{width:min(620px,100%);background:#151519;border:1px solid #ffffff18;border-radius:30px;padding:clamp(26px,5vw,46px);box-shadow:0 30px 100px #0009}
.setup-brand{width:58px;height:58px;border:1px solid #ffffff28;border-radius:18px;display:grid;place-items:center;font-size:24px;font-weight:900;margin-bottom:26px;background:#ffffff08}
.setup-card h1{font-size:clamp(2rem,6vw,3.4rem);line-height:1;margin:.55rem 0 1rem}
.setup-copy{color:#ffffffa8;line-height:1.7;margin:0 0 24px}
.setup-form label{display:block;margin:15px 0;color:#ffffffc8;font-weight:600}
.setup-form input{width:100%;margin-top:8px;padding:14px 15px;border:1px solid #ffffff20;border-radius:13px;background:#0e0e11;color:#fff;outline:none}
.setup-form input:focus{border-color:#ffffff70;box-shadow:0 0 0 3px #ffffff0c}
.password-note{font-size:.85rem;color:#ffffff7f;margin:4px 0 16px;line-height:1.5}
.alert{border-radius:13px;padding:13px 15px;margin:18px 0;line-height:1.5}
.alert-error{background:#ff4d6d14;border:1px solid #ff6b8138;color:#ffd7de}
.setup-link{display:block;text-align:center;text-decoration:none;margin-top:22px}
.setup-success{text-align:center}.setup-success .setup-brand{margin-left:auto;margin-right:auto}
/* Phase 2.2 — Authentication + animated system error surfaces */
.secure-note{font-size:.78rem;color:#ffffff75;line-height:1.5;text-align:center;margin-top:12px}
.error-page{--mx:50%;--my:50%;min-height:100vh;overflow:hidden;background:
radial-gradient(circle at var(--mx) var(--my),#6f4cff24 0,transparent 25%),
radial-gradient(circle at 10% 90%,#8d42ff20,transparent 32%),
radial-gradient(circle at 90% 12%,#1f74ff1c,transparent 30%),
#080b14;position:relative}
.error-page:before,.error-page:after{content:"";position:fixed;width:6px;height:6px;border-radius:50%;background:#8c63ff;box-shadow:
12vw 16vh 0 #624cff,24vw 70vh 0 #4e7dff,41vw 24vh 0 #a35cff,58vw 74vh 0 #4677ff,73vw 18vh 0 #7e55ff,86vw 62vh 0 #5a72ff;
opacity:.65;animation:errorFloat 7s ease-in-out infinite alternate}
.error-page:after{transform:translate(6vw,9vh);filter:blur(1px);animation-duration:10s}
.error-grid{position:fixed;inset:auto -10vw -22vh -10vw;height:48vh;opacity:.34;background-image:
radial-gradient(circle,#764eff 1px,transparent 1.4px);background-size:18px 18px;transform:perspective(500px) rotateX(62deg);mask-image:linear-gradient(to top,#000,transparent 90%);animation:gridWave 8s ease-in-out infinite alternate}
.error-orbit{position:fixed;border:1px solid #7656ff2c;border-radius:999px;filter:blur(.2px);animation:orbitPulse 6s ease-in-out infinite}
.orbit-one{width:42vw;height:42vw;left:-20vw;top:20vh}
.orbit-two{width:32vw;height:32vw;right:-14vw;bottom:-10vw;animation-delay:-2s}
.error-shell{min-height:100vh;display:grid;place-items:center;padding:28px;position:relative;z-index:2}
.error-card{width:min(600px,100%);text-align:center;padding:clamp(28px,5vw,52px);border:1px solid #ffffff1a;border-radius:32px;background:linear-gradient(180deg,#111624e8,#0b0f19e8);box-shadow:0 40px 120px #000a,0 0 70px #654cff12;backdrop-filter:blur(20px);animation:cardArrival .7s cubic-bezier(.2,.8,.2,1)}
.error-brand{width:56px;height:56px;margin:0 auto 22px;border-radius:17px;display:grid;place-items:center;font-weight:900;font-size:22px;border:1px solid #ffffff21;background:#ffffff0a;box-shadow:inset 0 0 18px #ffffff08}
.error-code{font-size:clamp(6rem,18vw,11rem);font-weight:950;line-height:.9;letter-spacing:-.08em;margin:22px 0 20px;background:linear-gradient(120deg,#ce63ef 15%,#855bff 50%,#3487ff 90%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 28px #7256ff48);animation:codeGlow 3s ease-in-out infinite alternate}
.error-card h1{font-size:clamp(1.7rem,4vw,2.45rem);margin:0 0 12px}
.error-card p{max-width:480px;margin:0 auto;color:#c0c7d6;line-height:1.75}
.error-detail{margin-top:12px!important;font-size:.85rem;color:#929bb0!important}
.error-actions{display:grid;gap:12px;margin:28px auto 0;max-width:410px}
.error-primary,.error-secondary{border-radius:15px;padding:14px 18px;font-weight:850;text-decoration:none;cursor:pointer}
.error-primary{border:0;color:#fff;background:linear-gradient(100deg,#8b42ec,#2e83ef);box-shadow:0 13px 35px #5d52ff35;transition:.25s}
.error-primary:hover{transform:translateY(-2px);box-shadow:0 18px 45px #5d52ff4a}
.error-secondary{background:#ffffff05;color:#dce2f0;border:1px solid #ffffff1b}
.error-security{margin-top:26px;color:#778196;font-size:.76rem;letter-spacing:.04em}
@keyframes cardArrival{from{opacity:0;transform:translateY(20px) scale(.975)}to{opacity:1;transform:none}}
@keyframes codeGlow{to{filter:drop-shadow(0 0 40px #7256ff70)}}
@keyframes errorFloat{to{transform:translateY(-16px) translateX(8px);opacity:.9}}
@keyframes orbitPulse{50%{transform:scale(1.08);opacity:.25}}
@keyframes gridWave{to{transform:perspective(500px) rotateX(62deg) translateY(-18px)}}
.protected-page{min-height:100vh;background:radial-gradient(circle at 18% 10%,#8055ff20,transparent 30%),#0b0c10}
.protected-topbar{min-height:76px;padding:14px clamp(18px,4vw,50px);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;border-bottom:1px solid #ffffff10;background:#0f1015dd;backdrop-filter:blur(18px);position:sticky;top:0}
.protected-logo{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;border:1px solid #ffffff1c;color:#fff;text-decoration:none;font-weight:900;background:#ffffff08}
.protected-topbar strong{display:block;margin-top:3px}
.ghost-button{border:1px solid #ffffff1c;background:#ffffff08;color:#fff;padding:10px 14px;border-radius:12px;cursor:pointer}
.protected-shell{min-height:calc(100vh - 76px);display:grid;place-items:center;padding:28px}
.protected-card{width:min(820px,100%);padding:clamp(30px,6vw,64px);border-radius:30px;border:1px solid #ffffff16;background:#14151bcc;box-shadow:0 30px 100px #0008}
.protected-card h1{font-size:clamp(2.2rem,7vw,4.8rem);line-height:1;margin:.5rem 0 1rem}
.protected-card p{max-width:660px;color:#ffffffa8;line-height:1.75}
.protected-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.protected-meta span{padding:16px;border-radius:16px;background:#ffffff06;border:1px solid #ffffff0e;color:#ffffff82}
.protected-meta b{display:block;color:#fff;margin-top:6px;text-transform:capitalize}
@media(max-width:700px){.protected-meta{grid-template-columns:1fr}.protected-topbar{grid-template-columns:auto 1fr}.protected-topbar form{grid-column:1/-1}.ghost-button{width:100%}.error-card{border-radius:24px}}
/* Phase 2.3 — RBAC */
.alert-success{background:#39d98a12;border:1px solid #39d98a38;color:#bdf7d8}
.rbac-page{min-height:100vh;background:
radial-gradient(circle at 15% 0%,#7553ff22,transparent 30%),
radial-gradient(circle at 95% 35%,#2780ff12,transparent 28%),
#090b10;color:#fff}
.rbac-topbar{min-height:76px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:14px clamp(18px,4vw,52px);border-bottom:1px solid #ffffff10;background:#0d1017dd;backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}
.rbac-top-actions,.top-actions-inline{display:flex;align-items:center;gap:10px}
.top-actions-inline form{margin:0}
.ghost-link{display:inline-flex;align-items:center;justify-content:center;border:1px solid #ffffff1c;background:#ffffff07;color:#fff;text-decoration:none;padding:10px 14px;border-radius:12px;font-weight:700}
.rbac-shell{width:min(1500px,calc(100% - 32px));margin:0 auto;padding:32px 0 70px}
.rbac-hero{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;margin:12px 0 28px}
.rbac-hero h1{font-size:clamp(2.5rem,7vw,5.5rem);line-height:.95;letter-spacing:-.05em;margin:.45rem 0 1rem;max-width:900px}
.rbac-hero p{color:#aeb7c9;line-height:1.7;max-width:800px}
.rbac-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rbac-kpis span{min-width:110px;padding:16px;border:1px solid #ffffff10;border-radius:17px;background:#ffffff06;color:#8f99ad}
.rbac-kpis b{display:block;color:#fff;font-size:1.6rem;margin-bottom:3px}
.rbac-panel{border:1px solid #ffffff12;background:#11141bcc;border-radius:28px;padding:clamp(20px,4vw,34px);box-shadow:0 30px 90px #0005;margin-top:22px}
.panel-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}
.panel-head h2{font-size:1.7rem;margin:.3rem 0 0}
.panel-note{font-size:.82rem;color:#7f899d}
.staff-create-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.staff-create-grid label{color:#c7cede;font-weight:650;font-size:.9rem}
.staff-create-grid input,.staff-create-grid select{width:100%;margin-top:8px;background:#0b0d12;color:#fff;border:1px solid #ffffff16;border-radius:13px;padding:13px 14px;outline:none}
.staff-create-grid input:focus,.staff-create-grid select:focus{border-color:#8064ff88;box-shadow:0 0 0 3px #7457ff12}
.permission-selector{grid-column:1/-1;margin-top:6px}
.form-title{display:block;color:#b7bfd0;font-weight:800;margin-bottom:12px}
.permission-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.permission-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}
.perm-check{display:flex!important;gap:10px;align-items:flex-start;padding:12px!important;border-radius:14px;border:1px solid #ffffff0d;background:#ffffff04;cursor:pointer;margin:0!important}
.perm-check input{width:auto!important;margin:3px 0 0!important;accent-color:#7557ff}
.perm-check span{display:block;min-width:0}
.perm-check b{display:block;font-size:.83rem;color:#eef1f8}
.perm-check small{display:block;margin-top:4px;color:#7e899e;font-size:.72rem}
.perm-check.hard-deny{opacity:.5;background:#ff4d6d08;border-color:#ff4d6d14;cursor:not-allowed}
.rbac-submit{grid-column:1/-1;margin-top:5px}
.user-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.user-card{border:1px solid #ffffff10;background:#0c0f15;border-radius:22px;padding:20px}
.user-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.user-card h3{font-size:1.35rem;margin:8px 0 3px}
.user-card p{color:#7f899d;margin:0}
.role-pill,.status-pill{display:inline-flex;border-radius:999px;padding:6px 9px;font-size:.69rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.role-pill{background:#7153ff18;border:1px solid #765dff2d;color:#c8bbff}
.status-pill.is-on{background:#2fd98412;border:1px solid #2fd98426;color:#9bf0c0}
.status-pill.is-off{background:#ff526912;border:1px solid #ff52692a;color:#ffacb8}
.gm-lock{margin-top:18px;padding:14px;border-radius:14px;background:#7153ff0e;border:1px solid #765dff21;color:#bcb5d7;line-height:1.6}
.matrix-save{margin-top:14px;border:0;border-radius:13px;background:#fff;color:#111;padding:11px 14px;font-weight:900;cursor:pointer}
.status-form{margin-top:12px}
@media(max-width:1100px){.staff-create-grid{grid-template-columns:repeat(2,1fr)}.permission-grid{grid-template-columns:repeat(3,1fr)}.permission-grid.compact{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){.rbac-topbar{grid-template-columns:auto 1fr}.rbac-top-actions{grid-column:1/-1}.rbac-hero{grid-template-columns:1fr}.rbac-kpis{grid-template-columns:repeat(3,1fr)}.user-cards{grid-template-columns:1fr}.permission-grid,.permission-grid.compact{grid-template-columns:1fr 1fr}.staff-create-grid{grid-template-columns:1fr}.panel-head{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.rbac-kpis{grid-template-columns:1fr}.permission-grid,.permission-grid.compact{grid-template-columns:1fr}.rbac-shell{width:min(100% - 20px,1500px)}}
/* Phase 2.4 — Application Shell */
.app-shell-page{min-height:100vh;background:#090b10;color:#fff;overflow-x:hidden}
.app-layout{min-height:100vh;display:grid;grid-template-columns:280px minmax(0,1fr);background:
radial-gradient(circle at 82% 0%,#315cff14,transparent 28%),
radial-gradient(circle at 5% 20%,#824cff15,transparent 30%),#090b10}
.app-sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:18px 14px 16px;border-right:1px solid #ffffff0c;background:#0c0f15e8;backdrop-filter:blur(20px);z-index:40}
.sidebar-brand-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 4px 18px}
.sidebar-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;min-width:0}
.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#ffffff12,#ffffff04);border:1px solid #ffffff13;font-weight:950;box-shadow:0 10px 25px #0003}
.brand-copy{display:flex;flex-direction:column;line-height:1.2;white-space:nowrap}
.brand-copy b{font-size:.96rem}.brand-copy small{color:#6f7a90;margin-top:3px;font-size:.73rem}
.sidebar-collapse{width:30px;height:30px;border:1px solid #ffffff10;border-radius:10px;background:#ffffff05;color:#8f98aa;cursor:pointer;font-size:20px;line-height:1}
.sidebar-nav{flex:1;overflow:auto;padding-right:2px}
.nav-group{margin:6px 0 20px}
.nav-group-label{display:block;color:#586276;font-size:.65rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase;padding:0 12px 8px;white-space:nowrap}
.nav-item{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:13px;color:#8791a5;text-decoration:none;font-size:.87rem;font-weight:700;margin:3px 0;transition:.2s}
.nav-item:hover{background:#ffffff05;color:#dfe5ef}
.nav-item.is-active{background:linear-gradient(90deg,#7556ff18,#427bff0e);border:1px solid #7157ff20;color:#fff;box-shadow:inset 3px 0 0 #7557ff}
.nav-icon{width:20px;height:20px;display:grid;place-items:center;flex:none}
.nav-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sidebar-bottom{padding:12px 5px 2px}
.sidebar-security{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #ffffff0b;border-radius:14px;background:#ffffff03}
.security-dot{width:8px;height:8px;border-radius:50%;background:#38d78b;box-shadow:0 0 0 4px #38d78b13}
.sidebar-security div{display:flex;flex-direction:column}.sidebar-security b{font-size:.76rem}.sidebar-security small{color:#687287;font-size:.68rem;margin-top:2px}
.app-main{min-width:0;display:flex;flex-direction:column;min-height:100vh}
.app-topbar{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(18px,3vw,38px);border-bottom:1px solid #ffffff0c;background:#0a0d12cc;backdrop-filter:blur(18px);position:sticky;top:0;z-index:30}
.topbar-left{display:flex;align-items:center;gap:14px}.topbar-left h1{font-size:1.05rem;margin:3px 0 0}.topbar-left .eyebrow{font-size:.6rem}
.mobile-menu-button{display:none;width:40px;height:40px;border-radius:12px;border:1px solid #ffffff11;background:#ffffff05;padding:10px;cursor:pointer}
.mobile-menu-button span{display:block;height:2px;background:#d8deea;margin:4px 0;border-radius:2px}
.topbar-actions{display:flex;align-items:center;gap:10px}
.topbar-icon-button{width:42px;height:42px;border-radius:13px;border:1px solid #ffffff10;background:#ffffff04;color:#98a3b7;display:grid;place-items:center;position:relative;cursor:pointer}
.topbar-icon-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.notification-dot{position:absolute;right:9px;top:8px;width:6px;height:6px;border-radius:50%;background:#7557ff;box-shadow:0 0 0 3px #7557ff16}
.user-menu-wrap{position:relative}
.user-menu-button{display:flex;align-items:center;gap:10px;padding:5px 8px 5px 5px;border:1px solid #ffffff10;border-radius:15px;background:#ffffff04;color:#fff;cursor:pointer}
.user-avatar{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#7557ff,#355fdb);font-size:.74rem;font-weight:900}
.user-menu-copy{display:flex;flex-direction:column;text-align:left;min-width:120px}.user-menu-copy b{font-size:.78rem}.user-menu-copy small{color:#6e788d;font-size:.66rem;margin-top:2px}
.user-chevron{color:#6f788a}
.user-dropdown{position:absolute;right:0;top:calc(100% + 10px);width:190px;padding:7px;border:1px solid #ffffff10;border-radius:15px;background:#11151d;box-shadow:0 25px 70px #0009;opacity:0;transform:translateY(-5px) scale(.98);pointer-events:none;transition:.18s}
.user-dropdown.is-open{opacity:1;transform:none;pointer-events:auto}
.user-dropdown a,.user-dropdown button{display:block;width:100%;text-align:left;padding:10px 11px;border:0;border-radius:10px;background:transparent;color:#b8c0d0;text-decoration:none;font-size:.8rem;cursor:pointer}
.user-dropdown a:hover,.user-dropdown button:hover{background:#ffffff06;color:#fff}
.app-content{flex:1;padding:clamp(22px,3vw,38px);width:min(1500px,100%);margin:0 auto}
.app-footer{display:flex;justify-content:space-between;gap:20px;padding:18px clamp(22px,3vw,38px);border-top:1px solid #ffffff08;color:#4f596c;font-size:.68rem}
.dashboard-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:28px;margin:8px 0 28px}
.dashboard-hero h2{font-size:clamp(2.4rem,5.7vw,5rem);letter-spacing:-.055em;line-height:.98;margin:.55rem 0 .9rem;max-width:950px}
.dashboard-hero p{max-width:720px;color:#8e98ab;line-height:1.7;margin:0}
.hero-date-card{width:138px;padding:18px;border:1px solid #ffffff0e;border-radius:20px;background:#ffffff04;text-align:center}
.hero-date-card span,.hero-date-card small{display:block;color:#758096;font-size:.72rem}.hero-date-card strong{display:block;font-size:2.5rem;line-height:1.1;margin:5px 0}
.dashboard-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.metric-card{padding:18px;border-radius:19px;border:1px solid #ffffff0d;background:linear-gradient(160deg,#12151d,#0e1117);min-width:0}
.metric-card-top{display:flex;align-items:center;justify-content:space-between;color:#788398;font-size:.72rem}.metric-card-top i{font-style:normal;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#ffffff06;color:#9b89ff}
.metric-card>strong{display:block;font-size:2rem;margin:18px 0 4px;letter-spacing:-.04em}.metric-card>small{color:#596377;font-size:.7rem}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr);gap:18px;margin-bottom:18px}
.dashboard-panel{border:1px solid #ffffff0d;background:#0f1218;border-radius:22px;padding:20px}
.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.panel-title-row h3{font-size:1.1rem;margin:4px 0 0}
.quick-action-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.quick-action{padding:15px;border:1px solid #ffffff0c;border-radius:15px;background:#ffffff03;color:#fff;text-decoration:none;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;transition:.2s}
.quick-action:hover{border-color:#7557ff33;background:#7557ff08;transform:translateY(-1px)}
.quick-icon{grid-row:1/3;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#7557ff12;color:#a998ff;font-size:1rem}
.quick-action b{font-size:.8rem}.quick-action small{color:#697489;font-size:.68rem;margin-top:2px}
.live-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:#37d58a0e;color:#7cebb1;font-size:.66rem;font-weight:800}.live-badge i{width:6px;height:6px;border-radius:50%;background:#39d98a;box-shadow:0 0 0 4px #39d98a12}
.status-list{display:grid;gap:2px}.status-list div{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #ffffff07;font-size:.76rem}.status-list div:last-child{border-bottom:0}.status-list span{color:#788398}.status-list b{color:#d7deea;font-size:.72rem}
.module-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.module-card{min-height:210px;padding:18px;border-radius:18px;border:1px solid #ffffff0d;background:linear-gradient(160deg,#151923,#0e1117);color:#fff;text-decoration:none;display:flex;flex-direction:column;transition:.22s}
.module-card:hover{transform:translateY(-3px);border-color:#ffffff1b;box-shadow:0 22px 60px #0005}.module-card>span{color:#637087;font-size:.65rem}.module-card h4{font-size:1.2rem;margin:30px 0 8px}.module-card p{color:#778297;font-size:.74rem;line-height:1.6;margin:0 0 18px}.module-card b{margin-top:auto;font-size:.72rem;color:#a69aff}
.module-pos{background:radial-gradient(circle at 100% 0%,#7a57ff16,transparent 45%),#12151d}.module-crm{background:radial-gradient(circle at 100% 0%,#2c74ff14,transparent 45%),#12151d}
.placeholder-phase{display:flex;gap:14px;align-items:center;margin-top:26px;padding:13px 16px;border:1px solid #ffffff0d;border-radius:14px;background:#ffffff04;position:relative}.placeholder-phase span{color:#637087;font-size:.72rem}.placeholder-phase b{font-size:.76rem}.placeholder-back{margin-top:28px;color:#aaa0ff;text-decoration:none;font-size:.8rem;position:relative}
.sidebar-overlay{display:none}
.sidebar-is-collapsed{grid-template-columns:82px minmax(0,1fr)}
.sidebar-is-collapsed .brand-copy,.sidebar-is-collapsed .nav-label,.sidebar-is-collapsed .nav-group-label,.sidebar-is-collapsed .sidebar-security div{display:none}
.sidebar-is-collapsed .sidebar-brand-row{justify-content:center}.sidebar-is-collapsed .sidebar-collapse{position:absolute;right:-12px;top:28px;background:#11151d}.sidebar-is-collapsed .sidebar-collapse{transform:rotate(180deg)}
.sidebar-is-collapsed .nav-item{justify-content:center;padding:0}.sidebar-is-collapsed .sidebar-security{justify-content:center}
@media(max-width:1180px){
.dashboard-stats{grid-template-columns:repeat(2,1fr)}
.module-cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
.app-layout{display:block}
.app-sidebar{position:fixed;left:0;top:0;width:280px;transform:translateX(-105%);transition:.25s;box-shadow:20px 0 70px #0008}
.mobile-nav-open .app-sidebar{transform:none}
.sidebar-collapse{display:none}
.mobile-menu-button{display:block}
.sidebar-overlay{display:block;position:fixed;inset:0;border:0;background:#0009;z-index:35;opacity:0;pointer-events:none;transition:.2s}
.mobile-nav-open .sidebar-overlay{opacity:1;pointer-events:auto}
.user-menu-copy{display:none}
.dashboard-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
.app-topbar{height:68px;padding:0 14px}.app-content{padding:18px 14px}.app-footer{padding:16px 14px;flex-direction:column;gap:4px}
.dashboard-hero{grid-template-columns:1fr}.hero-date-card{display:none}
.dashboard-stats{grid-template-columns:1fr 1fr;gap:9px}
.quick-action-grid,.module-cards{grid-template-columns:1fr}
.module-card{min-height:170px}
.topbar-icon-button{display:none}
}
@media(max-width:440px){
.dashboard-stats{grid-template-columns:1fr}
.topbar-left h1{font-size:.92rem}
.user-menu-button{padding-right:5px}
}
/* Phase 3.1 — Product Catalog & Inventory Foundation */
.inventory-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:8px 0 24px}
.inventory-head h2{font-size:clamp(2.5rem,5vw,4.7rem);line-height:.98;letter-spacing:-.055em;margin:.5rem 0 .8rem}
.inventory-head p{max-width:800px;color:#8893a7;line-height:1.7;margin:0}
.inventory-primary{border:0;border-radius:14px;background:linear-gradient(105deg,#7d50ff,#377df0);color:#fff;padding:13px 18px;font-weight:900;cursor:pointer;box-shadow:0 14px 34px #624cff24}
.inventory-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.inventory-kpis article{padding:18px;border-radius:18px;border:1px solid #ffffff0c;background:#0f1218}
.inventory-kpis span,.inventory-kpis small{display:block;color:#718097;font-size:.7rem}.inventory-kpis strong{display:block;font-size:2rem;margin:14px 0 4px;letter-spacing:-.04em}
.inventory-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.inventory-mini-card{padding:18px;border-radius:18px;border:1px solid #ffffff0c;background:#0f1218}.inventory-mini-card h3{margin:.4rem 0 12px}
.inline-form-row{display:grid;grid-template-columns:1fr auto;gap:8px}.inline-form-row input,.inline-form-row button{border-radius:12px;padding:11px 12px}.inline-form-row input{background:#090c11;border:1px solid #ffffff12;color:#fff}.inline-form-row button{border:1px solid #ffffff12;background:#ffffff06;color:#fff;font-weight:800;cursor:pointer}
.inventory-table-card{border:1px solid #ffffff0d;background:#0f1218;border-radius:22px;overflow:hidden}
.inventory-table-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border-bottom:1px solid #ffffff09}.inventory-table-head h3{margin:.35rem 0 0}
.inventory-search{width:min(380px,45vw);background:#090c11;border:1px solid #ffffff12;border-radius:13px;color:#fff;padding:11px 13px;outline:none}.inventory-search:focus{border-color:#765aff6b;box-shadow:0 0 0 3px #765aff10}
.inventory-table-wrap{overflow:auto}.inventory-table{width:100%;border-collapse:collapse;min-width:1100px}.inventory-table th,.inventory-table td{padding:14px 16px;text-align:left;border-bottom:1px solid #ffffff07;vertical-align:middle}.inventory-table th{font-size:.66rem;color:#657087;text-transform:uppercase;letter-spacing:.08em;font-weight:850;background:#0d1016}.inventory-table td{font-size:.76rem;color:#bdc5d3}.inventory-table tbody tr:hover{background:#ffffff025}
.product-cell{display:flex;align-items:center;gap:10px}.product-monogram{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#7457ff12;border:1px solid #7457ff18;color:#ae9fff;font-weight:900}.product-cell div{display:flex;flex-direction:column}.product-cell small,.table-sub{display:block;color:#626d81;font-size:.66rem;margin-top:3px}
.stock-pill{display:inline-flex;padding:5px 8px;border-radius:999px;background:#37d58a0e;color:#83e9b4;border:1px solid #37d58a19;font-size:.68rem;font-weight:850}.stock-pill.is-low{background:#ffb84a0d;color:#ffc56d;border-color:#ffb84a20}
.inventory-actions{display:flex;align-items:center;gap:6px}.inventory-actions form{margin:0}.table-action{border:1px solid #ffffff10;background:#ffffff05;color:#d6dce7;border-radius:9px;padding:7px 9px;font-size:.68rem;cursor:pointer}.table-action.muted{color:#808a9d}.empty-table{text-align:center!important;color:#657087!important;padding:36px!important}
.inventory-modal-backdrop{position:fixed;inset:0;background:#000a;z-index:100;display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:.2s}.inventory-modal-backdrop.open{opacity:1;pointer-events:auto}.inventory-modal{position:relative;width:min(860px,100%);max-height:90vh;overflow:auto;padding:28px;border-radius:24px;border:1px solid #ffffff14;background:#11151d;box-shadow:0 35px 110px #000b;transform:translateY(16px) scale(.98);transition:.2s}.inventory-modal-backdrop.open .inventory-modal{transform:none}.inventory-modal-small{width:min(520px,100%)}.inventory-modal h3{font-size:1.7rem;margin:.5rem 0 18px}.inventory-modal-close{position:absolute;right:16px;top:13px;width:36px;height:36px;border:1px solid #ffffff12;border-radius:11px;background:#ffffff05;color:#fff;font-size:22px;cursor:pointer}
.product-form{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.product-form label,.stock-form label{display:block;color:#aeb7c8;font-size:.75rem;font-weight:700}.product-form input,.product-form select,.stock-form input{width:100%;margin-top:7px;padding:11px 12px;border-radius:11px;border:1px solid #ffffff12;background:#090c11;color:#fff;outline:none}.product-form input:focus,.product-form select:focus,.stock-form input:focus{border-color:#765aff6b}.product-submit{grid-column:1/-1;margin-top:4px}.stock-form{display:grid;gap:13px}.modal-copy{color:#79859a;margin-top:-8px}
@media(max-width:1050px){.inventory-kpis{grid-template-columns:repeat(2,1fr)}.product-form{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.inventory-head{align-items:flex-start;flex-direction:column}.inventory-head .inventory-primary{width:100%}.inventory-mini-grid{grid-template-columns:1fr}.inventory-table-head{align-items:flex-start;flex-direction:column}.inventory-search{width:100%}.product-form{grid-template-columns:1fr}}
@media(max-width:460px){.inventory-kpis{grid-template-columns:1fr}.inventory-modal{padding:22px 16px}}
/* Phase 3.2 — Product CRUD + stock ledger */
.inventory-head-actions{display:flex;align-items:center;gap:10px}
.inventory-secondary{border:1px solid #ffffff14;border-radius:14px;background:#ffffff05;color:#dce2ef;padding:12px 16px;font-weight:850;cursor:pointer}
.inventory-taxonomy-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.taxonomy-card{border:1px solid #ffffff0d;background:#0f1218;border-radius:20px;padding:18px;min-width:0}
.taxonomy-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.taxonomy-head h3{margin:.35rem 0 0}
.tiny-action{border:1px solid #ffffff12;background:#ffffff05;color:#fff;border-radius:10px;padding:8px 10px;font-size:.72rem;font-weight:850;cursor:pointer}
.taxonomy-list{display:flex;gap:8px;flex-wrap:wrap}
.taxonomy-item{display:flex;align-items:center;gap:8px;border:1px solid #ffffff0e;background:#0a0d12;color:#d7deeb;border-radius:12px;padding:9px 11px;cursor:pointer}
.taxonomy-item small{color:#68758b;font-size:.63rem}
.taxonomy-empty{color:#667287;font-size:.72rem;padding:8px 0}
.inventory-ledger-card{margin-top:18px;border:1px solid #ffffff0d;background:#0f1218;border-radius:22px;overflow:hidden}
.ledger-count{font-size:.7rem;color:#667287}
.ledger-table{min-width:1180px}
.movement-badge{display:inline-flex;padding:5px 8px;border:1px solid #7657ff1f;background:#7657ff0d;color:#afa0ff;border-radius:999px;font-size:.63rem;font-weight:850;text-transform:capitalize}
.stock-form select{width:100%;margin-top:7px;padding:11px 12px;border-radius:11px;border:1px solid #ffffff12;background:#090c11;color:#fff;outline:none}
.toggle-line{display:flex!important;align-items:center;gap:8px!important;padding:10px 0}.toggle-line input{width:auto!important;margin:0!important;accent-color:#7557ff}
@media(max-width:760px){
.inventory-head-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
.inventory-taxonomy-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
.inventory-head-actions{grid-template-columns:1fr}
}
/* Phase 3.3 — POS Transaction Engine */
.pos-workspace{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) 420px;background:#090b10;color:#fff}
.pos-catalog{padding:clamp(20px,3vw,38px);min-width:0}
.pos-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.pos-heading h2{font-size:clamp(2.4rem,5vw,4.5rem);line-height:.95;letter-spacing:-.055em;margin:.45rem 0 0}
.pos-search-wrap{width:min(500px,48vw);position:relative}.pos-search-wrap input{width:100%;padding:14px 42px 14px 15px;border-radius:14px;border:1px solid #ffffff12;background:#0d1016;color:#fff;outline:none}.pos-search-wrap span{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#718096}
.pos-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.pos-product-card{min-height:128px;display:grid;grid-template-columns:auto 1fr;gap:12px;padding:14px;text-align:left;border-radius:17px;border:1px solid #ffffff0d;background:linear-gradient(160deg,#131720,#0e1117);color:#fff;cursor:pointer;transition:.18s}.pos-product-card:hover{transform:translateY(-2px);border-color:#7457ff38;background:#7457ff08}.pos-product-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#7557ff15;color:#ae9fff;font-weight:900}.pos-product-copy{display:flex;flex-direction:column;min-width:0}.pos-product-copy b{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pos-product-copy small,.pos-product-meta small{color:#677389;font-size:.65rem;margin-top:3px}.pos-product-meta{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto}.pos-product-meta b{font-size:1.05rem}.pos-product-meta small{color:#7b879b}
.pos-cart-panel{height:100vh;position:sticky;top:0;padding:22px;border-left:1px solid #ffffff0d;background:#0c0f15;display:flex;flex-direction:column;min-width:0}.pos-cart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.pos-cart-head h3{font-size:1.35rem;margin:.3rem 0 0}.pos-clear{border:0;background:transparent;color:#7f899d;cursor:pointer}.pos-customer-row label{display:block;color:#8f99ab;font-size:.7rem}.pos-customer-row select{width:100%;margin-top:7px;padding:11px 12px;border:1px solid #ffffff10;border-radius:11px;background:#090c11;color:#fff}
.pos-cart-lines{flex:1;overflow:auto;margin:14px 0}.pos-cart-empty{display:grid;place-items:center;height:180px;color:#606b80;font-size:.75rem;border:1px dashed #ffffff10;border-radius:14px}.pos-cart-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #ffffff08}.pos-cart-line>div:first-child{display:flex;flex-direction:column;min-width:0}.pos-cart-line b{font-size:.73rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pos-cart-line small{color:#68758a;font-size:.62rem}.pos-qty{display:flex;align-items:center;border:1px solid #ffffff10;border-radius:10px;overflow:hidden}.pos-qty button{width:28px;height:30px;border:0;background:#ffffff04;color:#fff;cursor:pointer}.pos-qty input{width:48px;height:30px;border:0;border-left:1px solid #ffffff08;border-right:1px solid #ffffff08;background:#090c11;color:#fff;text-align:center}.pos-line-total{font-size:.72rem;font-weight:850}.pos-remove{border:0;background:transparent;color:#7a8393;font-size:18px;cursor:pointer}
.pos-summary{border-top:1px solid #ffffff0c;padding-top:14px}.pos-summary>div,.pos-discount-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;color:#8d98aa;font-size:.74rem}.pos-summary b{color:#dfe5ef}.pos-discount-row input{width:110px;padding:7px 8px;border:1px solid #ffffff10;border-radius:9px;background:#090c11;color:#fff;text-align:right}.pos-total-row{margin-top:5px;padding-top:12px!important;border-top:1px solid #ffffff0c;color:#fff!important}.pos-total-row strong{font-size:1.65rem}.pos-checkout-button{margin-top:14px;border:0;border-radius:14px;padding:14px;background:linear-gradient(105deg,#8050ff,#357df1);color:#fff;font-weight:950;cursor:pointer}.pos-checkout-button:disabled{opacity:.35;cursor:not-allowed}
.checkout-total-box{display:flex;align-items:end;justify-content:space-between;padding:16px;border-radius:14px;background:#ffffff04;border:1px solid #ffffff0d;margin-bottom:14px}.checkout-total-box span{color:#7d889c;font-size:.72rem}.checkout-total-box strong{font-size:2rem}.payment-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}.payment-tab{border:1px solid #ffffff10;border-radius:10px;background:#ffffff04;color:#8d97a9;padding:9px;cursor:pointer;font-weight:800}.payment-tab.is-active{background:#7657ff14;color:#fff;border-color:#7657ff37}.payment-pane{display:grid;gap:11px}.payment-pane.is-hidden{display:none}.payment-pane label,.checkout-notes{display:block;color:#9aa4b5;font-size:.72rem}.payment-pane input,.payment-pane select,.checkout-notes input{width:100%;margin-top:6px;padding:11px;border:1px solid #ffffff10;border-radius:10px;background:#090c11;color:#fff}.checkout-notes{margin-top:12px}.checkout-error{min-height:18px;color:#ff9aa9;font-size:.7rem;margin:8px 0}
.receipt-page{min-height:100vh;background:#f5f6f8;color:#111;padding:25px;font-family:Inter,system-ui,sans-serif}.receipt-card{width:min(760px,100%);margin:0 auto;background:#fff;padding:32px;border-radius:20px;box-shadow:0 20px 60px #0001}.receipt-brand{font-weight:950}.receipt-card h1{font-size:2.2rem;margin:.4rem 0 1.4rem}.receipt-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:22px}.receipt-meta div{padding:10px;border:1px solid #e8eaf0;border-radius:10px}.receipt-meta span{display:block;color:#777;font-size:.7rem}.receipt-meta b{display:block;margin-top:4px;font-size:.82rem}.receipt-table{width:100%;border-collapse:collapse}.receipt-table th,.receipt-table td{padding:10px;border-bottom:1px solid #eee;text-align:left;font-size:.78rem}.receipt-table td small{display:block;color:#888}.receipt-totals{margin-left:auto;width:min(320px,100%);padding-top:18px}.receipt-totals>div{display:flex;justify-content:space-between;padding:6px 0}.receipt-grand{border-top:2px solid #111;margin-top:4px;padding-top:10px!important}.receipt-grand strong{font-size:1.3rem}.receipt-payments{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.receipt-payments span{padding:7px 9px;border-radius:999px;background:#f1f3f7;font-size:.7rem}.receipt-actions{display:flex;gap:8px;margin-top:24px}.receipt-actions button,.receipt-actions a{border:0;border-radius:10px;padding:10px 13px;background:#111;color:#fff;text-decoration:none;font-size:.75rem;cursor:pointer}
@media(max-width:1200px){.pos-product-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.pos-workspace{grid-template-columns:1fr}.pos-cart-panel{position:relative;height:auto;border-left:0;border-top:1px solid #ffffff0d}.pos-product-grid{grid-template-columns:repeat(2,1fr)}.pos-search-wrap{width:100%}.pos-heading{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.pos-catalog{padding:18px 14px}.pos-cart-panel{padding:18px 14px}.pos-product-grid{grid-template-columns:1fr}.receipt-page{padding:0}.receipt-card{border-radius:0;padding:20px}.receipt-meta{grid-template-columns:1fr}}
@media print{.no-print{display:none!important}.receipt-page{padding:0;background:#fff}.receipt-card{box-shadow:none;width:100%;padding:0}}
/* Phase 3.4 — Returns / Refunds / Void */
.pos-heading-tools{display:flex;align-items:center;gap:10px}.pos-history-link{padding:11px 14px;border:1px solid #ffffff12;border-radius:12px;color:#d9deea;text-decoration:none;font-size:.72rem;font-weight:800}.refund-shell{width:min(1480px,calc(100% - 40px));margin:0 auto;padding:36px 0 70px}.refund-hero{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}.refund-hero h2{font-size:clamp(2.5rem,6vw,5.2rem);line-height:.95;letter-spacing:-.055em;margin:.4rem 0 .7rem}.refund-hero p{color:#8b96a9;max-width:760px}.refund-new-sale{display:inline-flex;text-decoration:none;white-space:nowrap}.refund-table-card,.refund-controls,.void-panel{border:1px solid #ffffff0f;background:#10131a;border-radius:22px;overflow:hidden}.refund-card-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid #ffffff0c}.refund-card-head h3{margin:.35rem 0 0}.refund-sale-total{text-align:right}.refund-sale-total small{display:block;color:#718097}.refund-sale-total b{font-size:1.4rem}.refund-table-wrap{overflow:auto}.refund-table{width:100%;border-collapse:collapse;min-width:900px}.refund-table th{padding:13px 18px;text-align:left;font-size:.62rem;letter-spacing:.1em;color:#71809a;border-bottom:1px solid #ffffff0b}.refund-table td{padding:15px 18px;border-bottom:1px solid #ffffff08;font-size:.74rem;color:#d9deea}.refund-table td small{display:block;color:#657087;margin-top:3px}.refund-actions{white-space:nowrap}.refund-actions a{display:inline-block;margin-right:7px;padding:7px 9px;border:1px solid #ffffff10;border-radius:8px;color:#dbe1ec;text-decoration:none}.transaction-status{display:inline-flex;padding:6px 9px;border-radius:999px;background:#ffffff08;text-transform:capitalize;font-size:.62rem;font-weight:850}.status-completed{color:#61e7a9;background:#143226}.status-partially_refunded{color:#f3ca68;background:#342b14}.status-refunded,.status-voided{color:#ff9aa9;background:#351820}.refund-qty{width:110px;padding:9px;border:1px solid #ffffff12;border-radius:9px;background:#090c11;color:#fff}.refund-controls{margin-top:16px;padding:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.refund-controls label{color:#8d98aa;font-size:.7rem}.refund-controls input,.refund-controls select,.refund-controls textarea{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid #ffffff12;border-radius:10px;background:#090c11;color:#fff}.refund-reason{grid-column:1/-1}.refund-reason textarea{min-height:82px;resize:vertical}.refund-danger{grid-column:1/-1;border:1px solid #ff718833;background:#ff45671a;color:#ff9bab;border-radius:12px;padding:13px;font-weight:900;cursor:pointer}.void-panel{margin-top:18px;padding:20px;display:flex;justify-content:space-between;align-items:center;gap:24px}.void-panel p{color:#7f8a9d;max-width:700px}.void-action{display:flex;gap:8px}.void-action input{min-width:260px;padding:10px;border:1px solid #ffffff12;border-radius:10px;background:#090c11;color:#fff}.void-action button{border:1px solid #ff718833;border-radius:10px;background:#ff45671a;color:#ff9bab;padding:10px 13px;font-weight:900}.refund-reason-print{margin-top:20px;padding:12px;border:1px solid #eee;border-radius:10px}.refund-reason-print p{margin:.35rem 0 0;color:#666}.empty-table{text-align:center!important;color:#69758b!important;padding:40px!important}
/* Confirmed-payment receipt dispense animation */
.payment-success-overlay{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:24px;background:rgba(4,6,10,.8);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:.28s}.payment-success-overlay.is-visible{opacity:1;visibility:visible}.payment-terminal-scene{width:min(420px,100%);display:flex;flex-direction:column;align-items:center}.payment-success-copy{display:flex;gap:9px;align-items:center;margin-bottom:18px;font-size:.68rem;font-weight:900;letter-spacing:.18em;color:#bdc7d6}.payment-success-dot{width:8px;height:8px;border-radius:50%;background:#42df98;box-shadow:0 0 0 6px #42df9815}.payment-terminal{position:relative;width:min(340px,90vw);min-height:390px;padding:20px;border:1px solid #ffffff16;border-radius:34px;background:linear-gradient(145deg,#191d25,#0d1016 72%);box-shadow:0 35px 100px #0009;overflow:visible}.terminal-brand{display:flex;gap:11px;align-items:center}.terminal-logo{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#fff;color:#111;font-weight:950}.terminal-brand div{display:flex;flex-direction:column}.terminal-brand small{color:#68758a;font-size:.59rem}.terminal-screen{min-height:185px;margin-top:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #ffffff10;border-radius:20px;background:#080b10}.terminal-check{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:#42df981a;border:1px solid #42df984d;color:#4be2a0;font-size:1.7rem;animation:terminalApproved .48s .2s both}.terminal-screen strong{font-size:2rem;margin-top:10px}.terminal-screen span{color:#718097;font-size:.62rem;margin-top:8px}.terminal-slot{position:absolute;left:50%;bottom:30px;width:72%;height:14px;transform:translateX(-50%);padding:4px;border-radius:10px;background:#06080c;z-index:4}.terminal-slot span{display:block;height:4px;background:#202630;border-radius:999px}.dispensed-receipt{position:absolute;z-index:3;left:50%;bottom:34px;width:68%;min-height:185px;padding:18px 16px;transform:translate(-50%,40%);border-radius:4px 4px 13px 13px;background:#f8f8f5;color:#15171b;opacity:0;animation:receiptDispense 1.1s .65s both}.receipt-mini-brand{text-align:center;font-size:.66rem;font-weight:950;letter-spacing:.14em}.receipt-mini-line{height:1px;margin:12px 0;background:#d9d9d5}.receipt-mini-row{display:flex;justify-content:space-between;margin:7px 0;font-size:.67rem}.dispensed-receipt small{display:block;text-align:center;color:#70706d;margin-top:13px}.payment-processing-label{margin-top:118px;color:#7e899a;font-size:.69rem}.payment-success-overlay.is-complete .payment-processing-label{color:#46dc9c}@keyframes terminalApproved{from{opacity:0;transform:scale(.45)}to{opacity:1;transform:scale(1)}}@keyframes receiptDispense{0%{opacity:0;transform:translate(-50%,40%)}16%{opacity:1}100%{opacity:1;transform:translate(-50%,94%)}}
@media(max-width:780px){.refund-shell{width:min(100% - 24px,1480px);padding-top:22px}.refund-hero,.void-panel{align-items:stretch;flex-direction:column}.refund-controls{grid-template-columns:1fr}.refund-reason{grid-column:auto}.void-action{width:100%;flex-direction:column}.void-action input{min-width:0;width:100%}.pos-heading-tools{width:100%;flex-direction:column;align-items:stretch}}
@media(prefers-reduced-motion:reduce){.payment-success-overlay,.terminal-check,.dispensed-receipt{animation:none!important;transition:none!important}.terminal-check{opacity:1}.dispensed-receipt{opacity:1;transform:translate(-50%,94%)}}
/* Phase 4.1B — Customer 360 CRM */
.customer-page{display:block}.customer-hero,.customer-profile-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:8px 0 26px}.customer-hero.compact{align-items:center}.customer-hero h2,.customer-profile-hero h2{font-size:clamp(2.4rem,5vw,4.7rem);letter-spacing:-.055em;line-height:.96;margin:.45rem 0 .8rem}.customer-hero p,.customer-profile-hero p{color:#8792a6;max-width:760px;margin:0;line-height:1.6}.crm-primary,.crm-secondary{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:11px 14px;text-decoration:none;font-size:.74rem;font-weight:900;cursor:pointer}.crm-primary{border:1px solid #7d66ff66;background:linear-gradient(145deg,#7b5cff,#5c3fe6);color:#fff;box-shadow:0 12px 30px #6c52ef25}.crm-secondary{border:1px solid #ffffff12;background:#ffffff05;color:#dce2ee}.crm-secondary.full{width:100%;margin-top:12px}.crm-alert{border-radius:12px;padding:11px 13px;margin:0 0 16px;font-size:.74rem}.crm-alert.success{border:1px solid #3fd5982c;background:#3fd59812;color:#7ee7ba}.crm-alert.error{border:1px solid #ff6f8d30;background:#ff4e7114;color:#ff9caf}.crm-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.crm-metrics.six{grid-template-columns:repeat(6,1fr)}.crm-metrics article{padding:17px 18px;border:1px solid #ffffff0d;border-radius:18px;background:linear-gradient(155deg,#12161e,#0d1016)}.crm-metrics span{display:block;color:#778297;font-size:.66rem}.crm-metrics strong{display:block;margin-top:13px;font-size:1.55rem;letter-spacing:-.035em}.crm-filter{display:grid;grid-template-columns:minmax(220px,1fr) 180px auto auto;gap:9px;margin-bottom:16px}.crm-filter input,.crm-filter select,.crm-filter button,.crm-filter a{min-height:42px;border:1px solid #ffffff10;border-radius:11px;background:#0b0e14;color:#dce2ed;padding:0 12px}.crm-filter button{font-weight:900;cursor:pointer}.crm-filter a{display:grid;place-items:center;text-decoration:none;color:#8994a8}.crm-table-card,.crm-form-card,.crm-panel{border:1px solid #ffffff0e;border-radius:20px;background:linear-gradient(160deg,#11151d,#0d1016);overflow:hidden}.crm-table-head,.crm-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid #ffffff09}.crm-table-head h3,.crm-panel-head h3{margin:.3rem 0 0}.crm-table-head small{color:#6f7b90}.crm-table-scroll{overflow:auto}.crm-table{width:100%;border-collapse:collapse;min-width:940px}.crm-table th{padding:12px 16px;text-align:left;color:#70809b;font-size:.61rem;letter-spacing:.09em;border-bottom:1px solid #ffffff0a}.crm-table td{padding:15px 16px;border-bottom:1px solid #ffffff07;font-size:.73rem;color:#c8d0dd}.crm-customer-link{display:flex;flex-direction:column;color:#eef2f8;text-decoration:none}.crm-customer-link b{font-size:.78rem}.crm-customer-link small{color:#65738a;margin-top:4px}.crm-empty{text-align:center!important;color:#6f7b90!important;padding:46px!important}.crm-status{display:inline-flex;padding:6px 9px;border-radius:999px;text-transform:capitalize;font-size:.61rem;font-weight:900}.crm-status.active{background:#1a3b2e;color:#63e4a9}.crm-status.inactive{background:#332127;color:#ff9eae}.crm-form-card{padding:22px}.crm-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.crm-form-grid label,.crm-compact-form label{color:#8792a5;font-size:.68rem}.crm-form-grid input,.crm-form-grid select,.crm-form-grid textarea,.crm-compact-form input,.crm-compact-form textarea,.crm-note-form textarea,.crm-note-form select{display:block;width:100%;margin-top:6px;border:1px solid #ffffff11;border-radius:11px;background:#090c11;color:#f4f6fa;padding:11px}.crm-form-grid .wide,.crm-compact-form .wide{grid-column:1/-1}.crm-form-actions{display:flex;justify-content:flex-end;margin-top:18px}.profile-id{display:flex;align-items:center;gap:16px}.profile-avatar{width:66px;height:66px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(145deg,#7b5cff,#344dc7);font-size:1.8rem;font-weight:950;box-shadow:0 18px 45px #624cff22}.profile-actions{display:flex;gap:9px}.crm-tag-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.crm-tag{display:inline-flex;padding:5px 8px;border-radius:999px;border:1px solid #7965ff2e;background:#7965ff12;color:#b7abff;font-size:.6rem;font-weight:850}.crm-profile-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,.7fr);gap:16px}.crm-stack{display:grid;gap:16px;align-content:start}.crm-panel{padding-bottom:18px}.crm-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:18px}.crm-info-grid div{padding:12px;border:1px solid #ffffff09;border-radius:12px;background:#ffffff025}.crm-info-grid span{display:block;color:#69768c;font-size:.62rem}.crm-info-grid b{display:block;margin-top:6px;font-size:.73rem}.crm-body-note{margin:0 18px;padding:13px;border-radius:12px;background:#ffffff035;color:#9ca6b8;line-height:1.6;font-size:.72rem}.crm-mini-list{padding:8px 18px 0}.crm-mini-list>a{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #ffffff08;color:#e6eaf1;text-decoration:none}.crm-mini-list a div{display:flex;flex-direction:column}.crm-mini-list small{color:#68758a;margin-top:4px}.crm-mini-list strong{font-size:.75rem}.crm-subsection{padding:14px 18px 0}.crm-subsection h4,.crm-two-history h4{font-size:.68rem;color:#8994a6;text-transform:uppercase;letter-spacing:.08em}.crm-refund-row{display:flex;justify-content:space-between;padding:8px 0;color:#a6afbf;font-size:.69rem}.crm-refund-row b{color:#ff9daf}.crm-two-history{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 18px}.crm-history-item{padding:10px 0;border-bottom:1px solid #ffffff07}.crm-history-item b,.crm-history-item small{display:block}.crm-history-item b{font-size:.72rem}.crm-history-item small{font-size:.61rem;color:#657187;margin-top:4px}.crm-empty-inline{color:#69768b;font-size:.7rem;padding:10px 0}.crm-compact-form{padding:16px 18px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}.crm-tag-picker{display:flex;gap:7px;flex-wrap:wrap;padding:16px 18px 0}.crm-tag-picker label input{display:none}.crm-tag-picker label span{display:inline-flex;padding:7px 10px;border-radius:999px;border:1px solid #ffffff10;background:#ffffff04;color:#8994a8;font-size:.65rem;cursor:pointer}.crm-tag-picker label input:checked+span{border-color:#806aff55;background:#806aff18;color:#c0b5ff}.crm-panel>form:not(.crm-compact-form):not(.crm-note-form){padding:0 18px}.crm-note-form{display:grid;gap:8px;padding:16px 18px}.crm-check{display:flex;align-items:center;gap:7px;color:#7f8b9f;font-size:.65rem}.crm-check input{width:auto}.crm-notes{padding:0 18px}.crm-note{padding:12px 0;border-top:1px solid #ffffff07}.crm-note.pinned{border-left:2px solid #7a61ff;padding-left:10px}.crm-note>div{display:flex;justify-content:space-between;gap:10px}.crm-note span{font-size:.59rem;font-weight:900;color:#9d8eff}.crm-note small{font-size:.58rem;color:#5f6c81}.crm-note p{margin:7px 0 0;color:#a5afbf;font-size:.7rem;line-height:1.55}
@media(max-width:1180px){.crm-metrics.six{grid-template-columns:repeat(3,1fr)}.crm-profile-grid{grid-template-columns:1fr}.crm-metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.customer-hero,.customer-profile-hero{align-items:stretch;flex-direction:column}.profile-id{align-items:flex-start}.profile-actions{width:100%}.profile-actions a{flex:1}.crm-filter{grid-template-columns:1fr}.crm-form-grid,.crm-compact-form{grid-template-columns:1fr}.crm-form-grid .wide,.crm-compact-form .wide{grid-column:auto}.crm-info-grid,.crm-two-history{grid-template-columns:1fr}.crm-metrics,.crm-metrics.six{grid-template-columns:repeat(2,1fr)}}
/* Phase 4.2A — Appointment Engine */
.appointments-page{display:block}.appt-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:8px 0 24px}.appt-hero.compact{align-items:center}.appt-hero h2{font-size:clamp(2.35rem,5vw,4.5rem);letter-spacing:-.055em;line-height:.96;margin:.45rem 0 .8rem}.appt-hero p{max-width:820px;margin:0;color:#8792a6;line-height:1.6}.appt-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.appt-metrics article{padding:17px 18px;border:1px solid #ffffff0d;border-radius:18px;background:linear-gradient(155deg,#12161e,#0d1016)}.appt-metrics span{display:block;color:#778297;font-size:.66rem}.appt-metrics strong{display:block;margin-top:12px;font-size:1.55rem}.appt-filter{display:grid;grid-template-columns:190px 1fr 210px auto auto;gap:9px;align-items:end;margin-bottom:16px}.appt-filter label{color:#7c879b;font-size:.64rem}.appt-filter input,.appt-filter select,.appt-filter button,.appt-filter a{display:block;width:100%;min-height:42px;margin-top:6px;border:1px solid #ffffff10;border-radius:11px;background:#0b0e14;color:#dce2ed;padding:0 12px}.appt-filter button{font-weight:900;cursor:pointer}.appt-filter a{display:grid;place-items:center;text-decoration:none;color:#98a2b3}.appt-list-card,.appt-form-card{border:1px solid #ffffff0e;border-radius:20px;background:linear-gradient(160deg,#11151d,#0d1016);overflow:hidden}.appt-empty{display:grid;place-items:center;gap:7px;padding:70px 24px;color:#8a95a8}.appt-empty b{color:#dfe5ee}.appt-list{display:grid}.appt-row{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 20px;border-bottom:1px solid #ffffff08}.appt-row:last-child{border-bottom:0}.appt-time{display:flex;flex-direction:column}.appt-time strong{font-size:1.25rem;letter-spacing:-.03em}.appt-time small{margin-top:5px;color:#617087}.appt-title{display:flex;align-items:center;gap:9px}.appt-title>a{color:#f1f4f8;text-decoration:none;font-size:.82rem;font-weight:900}.appt-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px;color:#728097;font-size:.64rem}.appt-main p{margin:8px 0 0;color:#8f9aad;font-size:.69rem}.appt-status{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:.57rem;font-weight:950;text-transform:uppercase;letter-spacing:.04em;background:#ffffff08;color:#aeb7c6}.appt-status.checked_in{background:#194033;color:#70e3b1}.appt-status.in_service{background:#332b55;color:#c2b3ff}.appt-status.completed{background:#173648;color:#75caef}.appt-status.cancelled,.appt-status.no_show{background:#3b2229;color:#ff9dae}.appt-status.confirmed{background:#2d3444;color:#c8d4ea}.appt-actions{display:flex;align-items:center;gap:7px}.appt-actions form{margin:0}.appt-next,.appt-more summary,.appt-more button{border:1px solid #ffffff10;border-radius:10px;background:#ffffff05;color:#dce2ed;padding:9px 11px;font-size:.63rem;font-weight:900;cursor:pointer}.appt-next{border-color:#745cff55;background:#745cff18;color:#c3b8ff}.appt-more{position:relative}.appt-more summary{list-style:none}.appt-more summary::-webkit-details-marker{display:none}.appt-more>div{position:absolute;z-index:10;right:0;top:42px;width:240px;padding:10px;border:1px solid #ffffff12;border-radius:12px;background:#11151d;box-shadow:0 18px 50px #0009}.appt-more form{display:grid;gap:7px}.appt-more form+form{margin-top:9px;padding-top:9px;border-top:1px solid #ffffff0a}.appt-more input{width:100%;border:1px solid #ffffff10;border-radius:9px;background:#080b10;color:#e8ecf2;padding:9px}.appt-more button{width:100%;text-align:left}.appt-more button.danger{color:#ff9dae}.appt-form-card{padding:22px}.appt-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.appt-form-grid label{color:#8792a5;font-size:.68rem}.appt-form-grid input,.appt-form-grid select,.appt-form-grid textarea{display:block;width:100%;margin-top:6px;border:1px solid #ffffff11;border-radius:11px;background:#090c11;color:#f4f6fa;padding:11px}.appt-form-grid .wide{grid-column:1/-1}.appt-duration{display:flex;align-items:center;min-height:42px;margin-top:6px;border:1px solid #ffffff0c;border-radius:11px;background:#ffffff025;color:#8c98aa;padding:11px}.appt-form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
@media(max-width:1000px){.appt-filter{grid-template-columns:1fr 1fr}.appt-metrics{grid-template-columns:repeat(2,1fr)}.appt-row{grid-template-columns:70px 1fr}.appt-actions{grid-column:2;justify-content:flex-start}}
@media(max-width:680px){.appt-hero{align-items:stretch;flex-direction:column}.appt-filter,.appt-form-grid{grid-template-columns:1fr}.appt-form-grid .wide{grid-column:auto}.appt-row{grid-template-columns:1fr}.appt-time{flex-direction:row;gap:8px;align-items:baseline}.appt-actions{grid-column:1;flex-wrap:wrap}.appt-metrics{grid-template-columns:repeat(2,1fr)}}
/* Phase 4.2B — visual appointment calendar */
.appointment-calendar-page{display:grid;gap:18px}.calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid var(--line,#202634);border-radius:16px;background:var(--panel,#10141d)}
.calendar-day-nav{display:flex;align-items:center;gap:12px}.calendar-day-nav>a{display:grid;place-items:center;min-width:38px;height:38px;padding:0 12px;border:1px solid #262d3a;border-radius:10px;color:#dce5f7;text-decoration:none}.calendar-day-nav .today-link{width:auto}.calendar-day-nav h3{margin:2px 0 0}.calendar-filter select{min-width:190px;background:#0b0f16;color:#e8edf8;border:1px solid #262d3a;border-radius:10px;padding:10px 12px}
.visual-calendar-shell{overflow:auto;border:1px solid #202634;border-radius:18px;background:#0d1119}.visual-calendar{--hour-height:78px;display:grid;grid-template-columns:74px repeat(var(--staff-count),minmax(220px,1fr));min-width:calc(74px + var(--staff-count)*220px)}.calendar-corner,.calendar-staff-head{position:sticky;top:0;z-index:5;background:#111620;border-bottom:1px solid #242b39;min-height:64px;padding:13px 14px}.calendar-corner{left:0;z-index:7;color:#7f8da8;font-size:12px;text-transform:uppercase;letter-spacing:.12em}.calendar-staff-head{border-left:1px solid #202634}.calendar-staff-head b,.calendar-staff-head small{display:block}.calendar-staff-head small{margin-top:3px;color:#75829a}
.calendar-time-axis{position:relative;height:calc(12*var(--hour-height));border-right:1px solid #242b39;background:#0b0f16}.calendar-time-axis span{position:absolute;top:calc(var(--slot)*var(--hour-height) - 7px);right:12px;font-size:11px;color:#7b89a3}.calendar-staff-column{position:relative;height:calc(12*var(--hour-height));border-left:1px solid #202634;background:linear-gradient(#121722 1px,transparent 1px);background-size:100% var(--hour-height)}.calendar-staff-column>i{position:absolute;left:0;right:0;top:calc(var(--slot)*var(--hour-height) + var(--hour-height)/2);border-top:1px dashed rgba(255,255,255,.035)}
.calendar-event{position:absolute;z-index:2;left:7px;right:7px;top:calc(var(--event-top)/60*var(--hour-height));height:max(44px,calc(var(--event-height)/60*var(--hour-height)));overflow:hidden;padding:8px 10px;border:1px solid rgba(126,92,255,.35);border-left:3px solid #7758ff;border-radius:10px;background:linear-gradient(135deg,rgba(116,86,255,.17),rgba(19,24,35,.97));box-shadow:0 8px 25px rgba(0,0,0,.22)}.calendar-event.status-checked_in{border-left-color:#44c2ff}.calendar-event.status-in_service{border-left-color:#f0b85a}.calendar-event.status-completed{border-left-color:#39d98a}.calendar-event.status-cancelled,.calendar-event.status-no_show{opacity:.55;border-left-color:#ef6373}.calendar-event-top{display:flex;align-items:center;justify-content:space-between;gap:6px}.calendar-event-top strong{font-size:12px}.calendar-event .appt-status{font-size:9px;padding:3px 6px}.calendar-customer{display:block;margin-top:4px;color:#fff;font-weight:700;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calendar-event>small{display:block;color:#9ba8bf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calendar-event-actions{display:flex;align-items:center;gap:6px;margin-top:6px}.calendar-event-actions a,.calendar-event-actions button{font:inherit;font-size:10px;color:#cdd6e7;background:#171d29;border:1px solid #2b3444;border-radius:7px;padding:4px 7px;text-decoration:none;cursor:pointer}.calendar-event-actions form{margin:0}
.workflow-board{margin-top:2px}.workflow-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.send-pos-button{display:inline-flex;align-items:center;justify-content:center;padding:9px 13px;border-radius:10px;background:linear-gradient(135deg,#7655ff,#5a3de6);color:#fff!important;text-decoration:none;font-weight:700}.treatment-popover{position:relative}.treatment-popover summary{cursor:pointer;list-style:none;padding:9px 12px;border:1px solid #293244;border-radius:10px;color:#dce4f4}.treatment-popover[open] form{position:absolute;z-index:20;right:0;top:42px;width:min(360px,80vw);display:grid;gap:9px;padding:14px;background:#111620;border:1px solid #2b3444;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.45)}.treatment-popover label{display:grid;gap:5px;font-size:11px;color:#92a0b8}.treatment-popover input,.treatment-popover textarea{width:100%;box-sizing:border-box;background:#0b0f16;color:#fff;border:1px solid #2a3240;border-radius:9px;padding:9px}
.pos-appointment-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 16px;padding:14px 16px;border:1px solid rgba(119,88,255,.45);border-radius:14px;background:linear-gradient(135deg,rgba(119,88,255,.16),rgba(19,24,35,.85))}.pos-appointment-banner div{display:grid;gap:3px}.pos-appointment-banner b{font-size:16px}.pos-appointment-banner small{color:#8f9cb2}.pos-appointment-banner>strong{font-size:20px;color:#fff}
@media(max-width:900px){.calendar-toolbar{align-items:stretch;flex-direction:column}.calendar-day-nav{flex-wrap:wrap}.calendar-filter select{width:100%}.visual-calendar{--hour-height:70px}.workflow-actions{justify-content:flex-start}}
/* Phase 4.2 Service Management */
.service-page{display:grid;gap:18px}.service-hero{display:flex;justify-content:space-between;gap:24px;align-items:end;padding:8px 8px 2px}.service-hero h2{font-size:clamp(32px,4vw,56px);line-height:1;margin:7px 0 10px}.service-hero p{max-width:780px;color:var(--muted,#8d99b3);margin:0}.service-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.service-metrics article{background:var(--panel,#10141d);border:1px solid var(--line,#202637);border-radius:16px;padding:16px 18px}.service-metrics span{display:block;color:var(--muted,#8691aa);font-size:12px;margin-bottom:8px}.service-metrics strong{font-size:24px}.service-editor-card{background:var(--panel,#10141d);border:1px solid var(--line,#202637);border-radius:18px;overflow:hidden}.service-form{display:grid;grid-template-columns:2fr 1.2fr 1fr 1fr;gap:14px;padding:18px}.service-form label{display:grid;gap:7px;color:#8190b0;font-size:12px}.service-form input{width:100%;background:#080c13;color:#f5f7ff;border:1px solid #20293a;border-radius:11px;padding:12px 13px;outline:0}.service-form input:focus{border-color:#7255ff;box-shadow:0 0 0 3px rgba(114,85,255,.12)}.service-toggle{grid-column:1/3;display:flex!important;align-items:center;grid-template-columns:auto 1fr!important;gap:10px!important;color:#d8def0!important}.service-toggle input{width:auto}.service-form-actions{grid-column:3/5;display:flex;justify-content:flex-end;align-items:center;gap:10px}.service-filter{grid-template-columns:minmax(240px,1.6fr) minmax(170px,.8fr) minmax(150px,.7fr) auto auto}.service-name-cell{display:flex;align-items:center;gap:11px}.service-name-cell>div{display:grid;gap:3px}.service-name-cell small{color:#6f7a94}.service-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,#7558ff,#4e49cf);color:white;font-weight:800}.service-category-pill{display:inline-flex;padding:5px 9px;border-radius:999px;border:1px solid #272e42;background:#121725;color:#b8c2dc;font-size:12px}.service-actions{display:flex;align-items:center;gap:8px;white-space:nowrap}.service-actions a,.service-actions button{border:1px solid #293047;background:#121723;color:#d9e0f1;border-radius:9px;padding:7px 10px;font:inherit;font-size:12px;cursor:pointer;text-decoration:none}.service-actions form{margin:0}.service-actions button:hover,.service-actions a:hover{border-color:#6f55ff;color:#fff}.service-footnote{color:#78849e;font-size:12px;padding:0 4px 12px}
@media(max-width:1100px){.service-metrics{grid-template-columns:repeat(3,1fr)}.service-form{grid-template-columns:1fr 1fr}.service-toggle,.service-form-actions{grid-column:auto}.service-form-actions{grid-column:1/3}.service-filter{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.service-hero{align-items:flex-start;flex-direction:column}.service-metrics{grid-template-columns:1fr 1fr}.service-form{grid-template-columns:1fr}.service-toggle,.service-form-actions{grid-column:auto}.service-form-actions{justify-content:stretch}.service-form-actions>*{flex:1;text-align:center}.service-filter{grid-template-columns:1fr}.service-table{min-width:760px}}
/* Phase 4.2C — Cashier Queue */
.cashier-queue-page{display:grid;gap:22px}.cashier-queue-hero{align-items:flex-end}.cashier-queue-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.cashier-queue-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px}.cashier-queue-toolbar select{min-width:180px;background:#0b0f16;color:#eef2ff;border:1px solid #252b38;border-radius:12px;padding:11px 14px}.cashier-queue-row{grid-template-columns:84px minmax(0,1fr) 130px auto}.queue-amount{display:grid;gap:3px;justify-items:end}.queue-amount small{color:#75829b}.queue-amount strong{font-size:20px}.appt-status.waiting{color:#f5c66a}.appt-status.paid{color:#57d79b}.appt-status.cancelled{color:#ff7b8f}.workflow-actions form{margin:0}.workflow-actions button.send-pos-button{border:0;cursor:pointer;font:inherit}.pos-heading-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media(max-width:900px){.cashier-queue-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.cashier-queue-row{grid-template-columns:64px minmax(0,1fr)}.cashier-queue-row .queue-amount,.cashier-queue-row .appt-actions{grid-column:2;justify-self:stretch}.queue-amount{justify-items:start}.cashier-queue-toolbar{align-items:stretch;flex-direction:column}.cashier-queue-toolbar select{width:100%}}
/* === Appointment Actions Dropdown Fix === */
.workflow-board,
.appt-list,
.appt-row,
.appt-main,
.appt-list-card {
overflow: visible !important;
}
.appt-row {
position: relative;
z-index: 1;
}
.appt-row:has(.appt-more[open]) {
z-index: 1000;
}
.appt-more {
position: relative;
display: inline-block;
z-index: 50;
}
.appt-more[open] {
z-index: 9999;
}
.appt-more > summary {
list-style: none;
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.10);
border-radius: 12px;
background: #11151d;
cursor: pointer;
font-size: 18px;
font-weight: 800;
letter-spacing: 2px;
color: #f5f7ff;
transition: .18s ease;
user-select: none;
}
.appt-more > summary::-webkit-details-marker {
display: none;
}
.appt-more > summary:hover,
.appt-more[open] > summary {
border-color: rgba(124,92,255,.75);
background: rgba(124,92,255,.12);
box-shadow: 0 0 0 3px rgba(124,92,255,.08);
}
.appt-more > div {
position: absolute;
right: 0;
bottom: calc(100% + 10px);
width: 245px;
padding: 8px;
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
background: #151922;
box-shadow:
0 18px 50px rgba(0,0,0,.55),
0 0 0 1px rgba(124,92,255,.05);
z-index: 99999;
}
.appt-more > div form {
margin: 0;
}
.appt-more > div button,
.appt-more > div a {
width: 100%;
min-height: 42px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 10px 12px;
border: 0;
border-radius: 9px;
background: transparent;
color: #eef1f8;
text-decoration: none;
text-align: left;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: .15s ease;
}
.appt-more > div button:hover,
.appt-more > div a:hover {
background: rgba(124,92,255,.12);
color: #ffffff;
}
.appt-more > div .danger,
.appt-more > div button.danger {
color: #ff626d;
}
.appt-more > div .danger:hover,
.appt-more > div button.danger:hover {
background: rgba(255,82,98,.10);
}
@media (max-width: 900px) {
.appt-more > div {
right: 0;
width: min(245px, 82vw);
}
}
/* =========================================================
Appointment Professional Floating Action Menu
========================================================= */
.appt-more {
position: relative;
display: inline-flex;
}
.appt-more > summary {
list-style: none;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.12);
border-radius: 11px;
background: #11161f;
color: #f6f7fb;
cursor: pointer;
font-size: 17px;
font-weight: 800;
letter-spacing: 2px;
transition:
background .15s ease,
border-color .15s ease,
box-shadow .15s ease,
transform .15s ease;
}
.appt-more > summary::-webkit-details-marker {
display: none;
}
.appt-more > summary:hover {
background: rgba(124,92,255,.10);
border-color: rgba(124,92,255,.55);
}
.appt-more[open] > summary {
background: rgba(124,92,255,.16);
border-color: #7558ff;
box-shadow: 0 0 0 3px rgba(117,88,255,.10);
}
.appt-action-menu {
min-width: 260px;
padding: 8px;
background: #151a23;
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
box-shadow:
0 24px 60px rgba(0,0,0,.58),
0 0 0 1px rgba(124,92,255,.04);
animation: apptMenuIn .14s ease-out;
}
.appt-action-menu form {
display: block;
margin: 0;
}
.appt-action-menu button,
.appt-action-menu a {
width: 100%;
min-height: 42px;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 10px 12px;
border: 0;
border-radius: 9px;
background: transparent;
color: #e9edf7;
font-size: 13px;
font-weight: 700;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background .13s ease, color .13s ease;
}
.appt-action-menu button:hover,
.appt-action-menu a:hover {
background: rgba(124,92,255,.12);
color: #fff;
}
.appt-action-menu input[name="reason"] {
width: 100%;
margin: 7px 0;
padding: 10px 11px;
border: 1px solid rgba(255,255,255,.10);
border-radius: 9px;
background: #0e1219;
color: #fff;
outline: none;
}
.appt-action-menu input[name="reason"]:focus {
border-color: rgba(124,92,255,.75);
box-shadow: 0 0 0 3px rgba(124,92,255,.08);
}
.appt-action-menu button.danger {
color: #ff6673;
}
.appt-action-menu button.danger:hover {
background: rgba(255,77,91,.10);
color: #ff7a85;
}
@keyframes apptMenuIn {
from {
opacity: 0;
transform: translateY(-5px) scale(.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Appointment menu final viewport guard */
.appt-action-menu {
max-height: min(420px, calc(100vh - 24px));
overflow-y: auto;
overflow-x: hidden;
}
.appt-action-menu::-webkit-scrollbar {
width: 6px;
}
.appt-action-menu::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.14);
border-radius: 999px;
}
.appt-action-separator {
height: 1px;
margin: 7px 4px;
background: rgba(255,255,255,.08);
}
.appt-action-hint {
display: block;
padding: 5px 12px 8px;
color: #75819a;
font-size: 11px;
}
/* Final appointment action menu */
.appt-action-menu{
max-height:min(420px,calc(100vh - 24px));
overflow-y:auto;
overflow-x:hidden;
}
.appt-action-separator{
height:1px;
margin:7px 4px;
background:rgba(255,255,255,.08);
}
/* Phase 4.2B - Complete Treatment Workflow */
.appt-complete-service-form{
margin-top:10px;
}
.appt-complete-service{
width:100%;
min-height:42px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
border:1px solid rgba(126,92,255,.45);
border-radius:10px;
font-weight:700;
cursor:pointer;
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease;
}
.appt-complete-service:hover{
transform:translateY(-1px);
box-shadow:0 8px 28px rgba(107,76,255,.20);
border-color:rgba(143,111,255,.8);
}
.appt-complete-service:active{
transform:translateY(0);
}
/* =========================================================
BEAUTY OS — FINANCE DASHBOARD
Phase 5.2
========================================================= */
.finance-page{
width:min(1480px,100%);
margin:0 auto;
padding:36px 40px 64px;
}
.finance-hero{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:24px;
margin-bottom:28px;
}
.finance-hero h1{
margin:8px 0 8px;
font-size:clamp(28px,3vw,44px);
line-height:1.05;
letter-spacing:-.035em;
}
.finance-hero p{
margin:0;
color:#8d98af;
font-size:14px;
}
.finance-date{
padding:10px 14px;
border:1px solid rgba(255,255,255,.08);
border-radius:12px;
background:#111620;
color:#a9b3c7;
font-size:13px;
white-space:nowrap;
}
/* KPI GRID */
.finance-kpis{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:12px;
margin-bottom:18px;
}
.finance-kpi{
min-height:118px;
padding:18px;
border:1px solid rgba(255,255,255,.075);
border-radius:16px;
background:
linear-gradient(180deg,rgba(255,255,255,.018),transparent),
#11161f;
box-shadow:0 12px 35px rgba(0,0,0,.12);
}
.finance-kpi span{
display:block;
margin-bottom:18px;
color:#78859f;
font-size:11px;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
}
.finance-kpi strong{
display:block;
font-size:23px;
line-height:1;
letter-spacing:-.025em;
color:#f7f8fb;
}
/* MAIN GRID */
.finance-grid{
display:grid;
grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);
gap:16px;
align-items:start;
}
.finance-card{
border:1px solid rgba(255,255,255,.075);
border-radius:18px;
background:#11161f;
overflow:hidden;
}
.finance-card-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:20px 22px;
border-bottom:1px solid rgba(255,255,255,.065);
}
.finance-card-head h2{
margin:5px 0 0;
font-size:20px;
}
.finance-status{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:68px;
min-height:29px;
padding:6px 10px;
border-radius:999px;
font-size:10px;
font-weight:800;
letter-spacing:.08em;
}
.finance-status.open{
color:#6cf3aa;
background:rgba(40,190,115,.12);
border:1px solid rgba(40,190,115,.22);
}
.finance-status.closed{
color:#9ba6b9;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.075);
}
/* OPEN DRAWER FORM */
.finance-form{
display:grid;
gap:14px;
padding:22px;
}
.finance-form label{
display:grid;
gap:7px;
color:#8390a9;
font-size:12px;
font-weight:650;
}
.finance-form input,
.finance-form textarea,
.finance-actions input{
width:100%;
min-height:44px;
border:1px solid rgba(255,255,255,.09);
border-radius:11px;
background:#0b1017;
color:#f7f8fb;
padding:10px 12px;
outline:none;
transition:.16s ease;
}
.finance-form textarea{
resize:vertical;
}
.finance-form input:focus,
.finance-form textarea:focus,
.finance-actions input:focus{
border-color:rgba(117,88,255,.72);
box-shadow:0 0 0 3px rgba(117,88,255,.09);
}
/* DRAWER BREAKDOWN */
.drawer-breakdown{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1px;
background:rgba(255,255,255,.055);
border-bottom:1px solid rgba(255,255,255,.055);
}
.drawer-breakdown > div{
min-height:94px;
padding:18px 20px;
background:#11161f;
}
.drawer-breakdown span{
display:block;
margin-bottom:10px;
color:#78859e;
font-size:11px;
text-transform:uppercase;
letter-spacing:.045em;
}
.drawer-breakdown strong{
font-size:18px;
}
.drawer-breakdown .drawer-total{
grid-column:1 / -1;
background:
linear-gradient(90deg,rgba(117,88,255,.10),transparent 70%),
#11161f;
}
.drawer-breakdown .drawer-total strong{
font-size:30px;
color:#fff;
}
/* CASH IN / OUT */
.finance-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
padding:20px 22px;
border-bottom:1px solid rgba(255,255,255,.065);
}
.finance-actions form{
display:grid;
grid-template-columns:110px minmax(0,1fr);
gap:9px;
}
.finance-actions form button{
grid-column:1 / -1;
min-height:42px;
border-radius:10px;
}
/* CLOSE DRAWER */
.finance-close{
padding:22px;
}
.finance-close h3{
margin:0 0 4px;
font-size:17px;
}
.finance-close .finance-form{
padding:14px 0 0;
}
.danger-button{
min-height:44px;
border:1px solid rgba(255,92,105,.25);
border-radius:11px;
background:rgba(255,72,87,.08);
color:#ff727e;
font-weight:750;
cursor:pointer;
transition:.16s ease;
}
.danger-button:hover{
background:rgba(255,72,87,.14);
border-color:rgba(255,92,105,.42);
}
/* MOVEMENT LIST */
.finance-empty{
padding:28px 22px;
color:#68758e;
font-size:13px;
}
.finance-movement-list{
display:grid;
}
.finance-movement{
min-height:68px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:14px 20px;
border-bottom:1px solid rgba(255,255,255,.05);
}
.finance-movement:last-child{
border-bottom:0;
}
.finance-movement > div:first-child{
min-width:0;
}
.finance-movement strong{
display:block;
margin-bottom:4px;
color:#f1f3f8;
font-size:12px;
}
.finance-movement span{
display:block;
overflow:hidden;
color:#74819a;
font-size:11px;
text-overflow:ellipsis;
white-space:nowrap;
}
.finance-movement .positive,
.finance-movement .negative{
font-size:14px;
font-weight:800;
white-space:nowrap;
}
.finance-movement .positive{
color:#56e59a;
}
.finance-movement .negative{
color:#ff6e79;
}
/* BUTTONS */
.finance-page .crm-primary,
.finance-page .crm-secondary{
min-height:44px;
border-radius:11px;
font-weight:750;
}
/* FLASH */
.finance-flash{
margin-bottom:16px;
padding:12px 14px;
border-radius:11px;
font-size:13px;
}
.finance-flash.success{
border:1px solid rgba(40,190,115,.22);
background:rgba(40,190,115,.08);
color:#70e9aa;
}
.finance-flash.error{
border:1px solid rgba(255,75,90,.22);
background:rgba(255,75,90,.08);
color:#ff7b86;
}
/* RESPONSIVE */
@media (max-width:1300px){
.finance-kpis{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
@media (max-width:1050px){
.finance-grid{
grid-template-columns:1fr;
}
}
@media (max-width:760px){
.finance-page{
padding:22px 16px 42px;
}
.finance-hero{
align-items:flex-start;
flex-direction:column;
}
.finance-kpis{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.finance-actions{
grid-template-columns:1fr;
}
.drawer-breakdown{
grid-template-columns:1fr;
}
.drawer-breakdown .drawer-total{
grid-column:auto;
}
}
@media (max-width:480px){
.finance-kpis{
grid-template-columns:1fr;
}
.finance-actions form{
grid-template-columns:1fr;
}
.finance-actions form button{
grid-column:auto;
}
}
/* =========================================================
Beauty OS Finance 5.3
Net Sales + Reconciliation + Shift History
========================================================= */
.finance-kpis-7{
grid-template-columns:repeat(7,minmax(0,1fr));
}
.finance-kpi small{
display:block;
margin-top:8px;
color:#68758d;
font-size:10px;
}
.finance-kpi-net{
background:
linear-gradient(135deg,rgba(117,88,255,.15),transparent 72%),
#11161f;
border-color:rgba(117,88,255,.22);
}
.finance-kpi-net strong{
color:#c7baff;
}
.finance-kpi-refund strong{
color:#ff7a86;
}
.finance-shift-history{
margin-top:16px;
}
.finance-shift-history .finance-card-head small{
color:#6f7c94;
font-size:11px;
}
.finance-shift-table-wrap{
width:100%;
overflow-x:auto;
}
.finance-shift-table{
width:100%;
border-collapse:collapse;
min-width:920px;
}
.finance-shift-table th{
padding:13px 16px;
color:#72809b;
font-size:10px;
font-weight:800;
letter-spacing:.055em;
text-align:left;
text-transform:uppercase;
border-bottom:1px solid rgba(255,255,255,.065);
}
.finance-shift-table td{
padding:15px 16px;
color:#c8cfdd;
font-size:12px;
border-bottom:1px solid rgba(255,255,255,.05);
}
.finance-shift-table tbody tr:last-child td{
border-bottom:0;
}
.finance-shift-table tbody tr:hover{
background:rgba(255,255,255,.018);
}
.finance-table-status,
.finance-reconciliation{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:25px;
padding:4px 8px;
border-radius:999px;
font-size:9px;
font-weight:800;
letter-spacing:.045em;
}
.finance-table-status.open{
color:#65eaa4;
background:rgba(47,203,127,.10);
}
.finance-table-status.closed{
color:#9ca7ba;
background:rgba(255,255,255,.055);
}
.finance-reconciliation.balanced{
color:#61e6a0;
background:rgba(43,196,120,.10);
}
.finance-reconciliation.over{
color:#ffca63;
background:rgba(255,180,40,.10);
}
.finance-reconciliation.short{
color:#ff7884;
background:rgba(255,72,87,.10);
}
.finance-reconciliation.open,
.finance-reconciliation.pending{
color:#9da8bb;
background:rgba(255,255,255,.055);
}
.variance-balanced{
color:#5ee39c !important;
font-weight:800;
}
.variance-over{
color:#ffc55e !important;
font-weight:800;
}
.variance-short{
color:#ff7783 !important;
font-weight:800;
}
@media(max-width:1500px){
.finance-kpis-7{
grid-template-columns:repeat(4,minmax(0,1fr));
}
}
@media(max-width:1000px){
.finance-kpis-7{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:520px){
.finance-kpis-7{
grid-template-columns:1fr;
}
}
/* =========================================================
Beauty OS — Expense Management 5.4
========================================================= */
.expense-page{
width:min(1480px,100%);
margin:0 auto;
padding:34px 40px 60px;
}
.expense-hero{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:24px;
margin-bottom:24px;
}
.expense-hero h1{
margin:7px 0 8px;
font-size:clamp(28px,3vw,42px);
letter-spacing:-.035em;
}
.expense-hero p{
margin:0;
color:#8793aa;
font-size:13px;
}
.expense-hero-actions{
display:flex;
gap:10px;
}
.expense-kpis{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:12px;
margin-bottom:16px;
}
.expense-main-grid{
display:grid;
grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);
gap:16px;
margin-bottom:16px;
}
.expense-create-form{
padding:22px;
}
.expense-form-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
.expense-form-grid label{
display:grid;
gap:7px;
color:#8390a9;
font-size:12px;
font-weight:650;
}
.expense-form-grid input,
.expense-form-grid select,
.expense-filters input,
.expense-filters select,
.expense-void-menu input{
width:100%;
min-height:44px;
border:1px solid rgba(255,255,255,.09);
border-radius:11px;
background:#0b1017;
color:#f7f8fb;
padding:10px 12px;
outline:none;
}
.expense-form-grid input:focus,
.expense-form-grid select:focus,
.expense-filters input:focus,
.expense-filters select:focus{
border-color:rgba(117,88,255,.70);
box-shadow:0 0 0 3px rgba(117,88,255,.09);
}
.expense-wide{
grid-column:1 / -1;
}
.expense-submit{
width:100%;
margin-top:16px;
}
.expense-cash-warning{
margin-top:14px;
padding:12px 14px;
border:1px solid rgba(255,185,70,.17);
border-radius:10px;
background:rgba(255,185,70,.06);
color:#d6b467;
font-size:11px;
}
.expense-guidance-body{
padding:10px 20px;
}
.expense-rule{
padding:16px 0;
border-bottom:1px solid rgba(255,255,255,.055);
}
.expense-rule:last-child{
border-bottom:0;
}
.expense-rule span,
.expense-rule strong,
.expense-rule small{
display:block;
}
.expense-rule span{
margin-bottom:5px;
color:#7b88a0;
font-size:10px;
text-transform:uppercase;
letter-spacing:.055em;
}
.expense-rule strong{
margin-bottom:4px;
font-size:13px;
}
.expense-rule small{
color:#68758e;
font-size:11px;
}
.expense-history{
margin-top:4px;
}
.expense-filters{
display:grid;
grid-template-columns:
150px 150px minmax(170px,1fr)
minmax(150px,.8fr)
minmax(130px,.7fr)
auto auto;
gap:8px;
padding:14px 16px;
border-bottom:1px solid rgba(255,255,255,.06);
}
.expense-table-wrap{
overflow-x:auto;
}
.expense-table{
width:100%;
min-width:1100px;
border-collapse:collapse;
}
.expense-table th{
padding:13px 14px;
color:#72809a;
font-size:9px;
text-align:left;
text-transform:uppercase;
letter-spacing:.055em;
border-bottom:1px solid rgba(255,255,255,.065);
}
.expense-table td{
padding:15px 14px;
color:#c7cedc;
font-size:11px;
border-bottom:1px solid rgba(255,255,255,.05);
vertical-align:middle;
}
.expense-table tbody tr:hover{
background:rgba(255,255,255,.018);
}
.expense-table td > strong{
color:#f6f7fa;
}
.expense-table td small{
display:block;
margin-top:4px;
color:#68758d;
}
.expense-description{
max-width:280px;
}
.expense-payment,
.expense-status{
display:inline-flex;
min-height:24px;
align-items:center;
padding:4px 8px;
border-radius:999px;
font-size:9px;
font-weight:800;
}
.expense-payment{
color:#b7c0d0;
background:rgba(255,255,255,.055);
}
.expense-status.posted{
color:#5fe39d;
background:rgba(42,196,120,.10);
}
.expense-status.voided{
color:#ff7884;
background:rgba(255,72,87,.10);
}
.expense-void-menu{
position:relative;
}
.expense-void-menu summary{
cursor:pointer;
color:#ff7c86;
font-size:11px;
}
.expense-void-menu form{
position:absolute;
right:0;
top:28px;
z-index:20;
width:250px;
padding:12px;
border:1px solid rgba(255,255,255,.09);
border-radius:12px;
background:#10151e;
box-shadow:0 18px 50px rgba(0,0,0,.38);
}
.expense-void-menu button{
width:100%;
margin-top:8px;
}
@media(max-width:1300px){
.expense-kpis{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.expense-filters{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
@media(max-width:1000px){
.expense-main-grid{
grid-template-columns:1fr;
}
}
@media(max-width:760px){
.expense-page{
padding:22px 16px 44px;
}
.expense-hero{
align-items:flex-start;
flex-direction:column;
}
.expense-kpis{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.expense-form-grid,
.expense-filters{
grid-template-columns:1fr;
}
.expense-wide{
grid-column:auto;
}
}
@media(max-width:480px){
.expense-kpis{
grid-template-columns:1fr;
}
}
/* =========================================================
Finance 5.4.4 — Expenses & Operating Result
========================================================= */
.finance-kpi-expense{
background:
linear-gradient(135deg,rgba(255,92,105,.07),transparent 72%),
#11161f;
}
.finance-kpi-expense strong{
color:#ff8a93;
}
.finance-kpi-operating{
background:
linear-gradient(135deg,rgba(117,88,255,.16),transparent 72%),
#11161f;
border-color:rgba(117,88,255,.24);
}
.finance-kpi-operating strong{
color:#c9bdff;
}
.finance-expense-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
min-width:132px;
padding:0 16px;
text-decoration:none;
}
@media(max-width:760px){
.finance-expense-button{
width:100%;
}
}
/* =========================================================
Beauty OS — Expense Analytics 5.4.5
========================================================= */
.expense-breakdown-section{
margin-bottom:16px;
}
.expense-breakdown-section .finance-card-head small{
color:#6e7a91;
font-size:10px;
}
.expense-breakdown-list{
display:grid;
padding:8px 20px 14px;
}
.expense-breakdown-row{
padding:15px 0;
border-bottom:1px solid rgba(255,255,255,.05);
}
.expense-breakdown-row:last-child{
border-bottom:0;
}
.expense-breakdown-copy{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:18px;
margin-bottom:9px;
}
.expense-breakdown-copy > div{
min-width:0;
}
.expense-breakdown-copy strong{
display:block;
color:#eff2f7;
font-size:12px;
}
.expense-breakdown-copy small{
display:block;
margin-top:4px;
color:#68758e;
font-size:10px;
}
.expense-breakdown-value{
white-space:nowrap;
font-size:13px !important;
}
.expense-breakdown-track{
position:relative;
height:5px;
overflow:hidden;
border-radius:999px;
background:rgba(255,255,255,.055);
}
.expense-breakdown-track span{
position:absolute;
inset:0 auto 0 0;
min-width:0;
border-radius:inherit;
background:linear-gradient(
90deg,
#7558ff,
#477ff3
);
}
@media(max-width:700px){
.expense-breakdown-list{
padding-left:16px;
padding-right:16px;
}
}
/* =========================================================
Beauty OS — Financial Reports 5.5.2
========================================================= */
.report-page{
width:min(1460px,100%);
margin:0 auto;
padding:34px 40px 60px;
}
.report-hero{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:24px;
margin-bottom:24px;
}
.report-hero h1{
margin:7px 0 8px;
font-size:clamp(30px,3vw,44px);
letter-spacing:-.035em;
}
.report-hero p{
margin:0;
color:#7f8ca5;
font-size:13px;
}
.report-range-form{
display:flex;
align-items:flex-end;
gap:8px;
}
.report-range-form label{
display:grid;
gap:6px;
color:#71809a;
font-size:10px;
}
.report-range-form input{
min-height:40px;
border:1px solid rgba(255,255,255,.09);
border-radius:10px;
background:#0c1118;
color:#f5f6f9;
padding:8px 10px;
}
.report-kpis{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:12px;
margin-bottom:16px;
}
.report-net-result{
border-color:rgba(117,88,255,.30);
background:
linear-gradient(
135deg,
rgba(117,88,255,.16),
transparent 75%
),
#11161f;
}
.report-net-result strong{
color:#c8bdff;
}
.report-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
margin-bottom:16px;
}
.report-metric-list{
display:grid;
}
.report-metric-list > div{
display:flex;
justify-content:space-between;
gap:20px;
padding:17px 20px;
border-bottom:1px solid rgba(255,255,255,.05);
}
.report-metric-list > div:last-child{
border-bottom:0;
}
.report-metric-list span{
color:#74819a;
font-size:11px;
}
.report-metric-list strong{
color:#f4f6f9;
font-size:14px;
}
.report-expense-breakdown{
margin-bottom:16px;
}
.report-table-wrap{
overflow-x:auto;
}
.report-table{
width:100%;
min-width:850px;
border-collapse:collapse;
}
.report-table th{
padding:13px 16px;
color:#70809a;
font-size:9px;
text-transform:uppercase;
letter-spacing:.05em;
text-align:left;
border-bottom:1px solid rgba(255,255,255,.065);
}
.report-table td{
padding:15px 16px;
color:#d0d6e1;
font-size:11px;
border-bottom:1px solid rgba(255,255,255,.05);
}
.report-negative{
color:#ff6e79 !important;
}
.report-positive{
color:#64e8a3 !important;
font-weight:800;
}
@media(max-width:1100px){
.report-kpis{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
@media(max-width:800px){
.report-page{
padding:22px 16px 44px;
}
.report-hero{
flex-direction:column;
align-items:flex-start;
}
.report-range-form{
width:100%;
flex-wrap:wrap;
}
.report-grid{
grid-template-columns:1fr;
}
.report-kpis{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:500px){
.report-kpis{
grid-template-columns:1fr;
}
}
/* Beauty OS — Profitability 5.5.3 */
.report-kpis{
grid-template-columns:
repeat(4,minmax(0,1fr));
}
.report-table{
min-width:1200px;
}
@media(max-width:1200px){
.report-kpis{
grid-template-columns:
repeat(3,minmax(0,1fr));
}
}
@media(max-width:760px){
.report-kpis{
grid-template-columns:
repeat(2,minmax(0,1fr));
}
}
@media(max-width:480px){
.report-kpis{
grid-template-columns:1fr;
}
}
/* =========================================================
Beauty OS — Management Financial Intelligence 5.5.4B
========================================================= */
.report-comparison-section,
.report-pnl-section,
.report-monthly-section{
margin-top:18px;
}
.report-period-summary{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
border-bottom:1px solid rgba(255,255,255,.07);
}
.report-period-summary > div{
padding:18px 20px;
}
.report-period-summary > div + div{
border-left:1px solid rgba(255,255,255,.07);
}
.report-period-summary span{
display:block;
margin-bottom:7px;
color:#7891bb;
font-size:10px;
letter-spacing:.08em;
}
.report-period-summary strong{
color:#f4f6fa;
font-size:14px;
}
.report-comparison-table-wrap{
overflow-x:auto;
}
.report-comparison-table{
min-width:720px;
}
.report-comparison-table th:not(:first-child),
.report-comparison-table td:not(:first-child){
text-align:right;
}
.report-change{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
min-width:94px;
padding:6px 10px;
border-radius:999px;
font-size:11px;
font-weight:800;
}
.report-change--positive{
color:#56e7a0;
background:rgba(34,197,94,.09);
border:1px solid rgba(34,197,94,.18);
}
.report-change--negative{
color:#ff6e7f;
background:rgba(255,75,98,.09);
border:1px solid rgba(255,75,98,.18);
}
.report-change--neutral{
color:#9aa7ba;
background:rgba(148,163,184,.07);
border:1px solid rgba(148,163,184,.13);
}
/* P&L */
.report-pnl{
padding:8px 20px 22px;
}
.report-pnl-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
min-height:48px;
padding:0 4px;
border-bottom:1px solid rgba(255,255,255,.055);
}
.report-pnl-row span{
color:#9ba9bf;
font-size:12px;
}
.report-pnl-row strong{
color:#f7f8fb;
font-size:13px;
font-variant-numeric:tabular-nums;
}
.report-pnl-deduction strong{
color:#ff7180;
}
.report-pnl-total{
border-top:1px solid rgba(255,255,255,.11);
}
.report-pnl-total span,
.report-pnl-total strong{
color:#fff;
font-weight:800;
}
.report-pnl-spacer{
height:14px;
}
.report-pnl-highlight{
margin-top:3px;
padding:0 14px;
border:1px solid rgba(116,89,255,.27);
border-radius:10px;
background:rgba(110,78,255,.07);
}
.report-pnl-highlight span,
.report-pnl-highlight strong{
color:#beafff;
font-weight:900;
}
.report-pnl-margin strong{
color:#8fb6ff;
}
.report-pnl-final{
min-height:62px;
margin-top:8px;
padding:0 14px;
border:1px solid rgba(116,89,255,.34);
border-radius:10px;
background:
linear-gradient(
90deg,
rgba(106,75,255,.13),
rgba(73,109,255,.05)
);
}
.report-pnl-final span,
.report-pnl-final strong{
color:#c4b7ff;
font-size:15px;
font-weight:900;
}
/* Monthly P&L */
.report-monthly-section .report-table-wrap{
overflow-x:auto;
}
.report-monthly-table{
min-width:880px;
}
.report-monthly-table th:not(:first-child),
.report-monthly-table td:not(:first-child){
text-align:right;
}
/* Responsive */
@media(max-width:760px){
.report-period-summary{
grid-template-columns:1fr;
}
.report-period-summary > div + div{
border-left:0;
border-top:1px solid rgba(255,255,255,.07);
}
.report-pnl{
padding-left:14px;
padding-right:14px;
}
.report-pnl-row{
gap:12px;
}
.report-pnl-row span{
font-size:11px;
}
.report-pnl-row strong{
font-size:12px;
}
}
/* =========================================================
Beauty OS — Financial Trend Charts 5.5.4C
========================================================= */
.report-chart-section{
margin-top:18px;
}
.report-chart-section-head{
margin-bottom:12px;
padding-left:2px;
padding-right:2px;
}
.report-chart-grid{
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:16px;
}
.report-chart-card-wide{
grid-column:1 / -1;
}
.report-chart-card{
min-width:0;
overflow:hidden;
}
.report-chart-legend{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:12px;
color:#8593aa;
font-size:10px;
}
.report-chart-legend span{
display:inline-flex;
align-items:center;
gap:6px;
}
.report-chart-legend span::before{
width:8px;
height:8px;
border-radius:999px;
background:currentColor;
content:"";
}
.legend-series-1{
color:#8d7cff !important;
}
.legend-series-2{
color:#55b8ff !important;
}
.legend-series-3{
color:#4de2a2 !important;
}
.financial-chart{
position:relative;
min-height:320px;
padding:8px 14px 14px;
}
.financial-chart svg{
display:block;
width:100%;
height:320px;
overflow:visible;
}
.financial-chart-grid{
stroke:rgba(148,163,184,.10);
stroke-width:1;
vector-effect:non-scaling-stroke;
}
.financial-chart-axis{
fill:#708099;
font-size:10px;
font-family:inherit;
}
.financial-chart-line{
stroke-width:2.5;
vector-effect:non-scaling-stroke;
stroke-linejoin:round;
stroke-linecap:round;
}
.financial-chart-point{
stroke:#111720;
stroke-width:2;
vector-effect:non-scaling-stroke;
cursor:pointer;
}
.financial-chart-bar{
cursor:pointer;
transition:
opacity .15s ease;
}
.financial-chart-bar:hover{
opacity:.78;
}
.financial-chart-series-1{
stroke:#8d7cff;
fill:#8d7cff;
}
.financial-chart-series-2{
stroke:#55b8ff;
fill:#55b8ff;
}
.financial-chart-series-3{
stroke:#4de2a2;
fill:#4de2a2;
}
.financial-chart-tooltip{
position:absolute;
z-index:20;
display:none;
min-width:150px;
padding:10px 12px;
border:1px solid rgba(255,255,255,.11);
border-radius:10px;
background:rgba(9,13,20,.97);
box-shadow:
0 14px 34px rgba(0,0,0,.35);
pointer-events:none;
}
.financial-chart-tooltip.is-visible{
display:grid;
gap:4px;
}
.financial-chart-tooltip strong{
color:#f6f8fc;
font-size:11px;
}
.financial-chart-tooltip span{
color:#8593aa;
font-size:10px;
}
.financial-chart-tooltip b{
color:#c3b8ff;
font-size:13px;
}
.financial-chart-empty{
display:grid;
place-items:center;
min-height:280px;
color:#76849b;
font-size:12px;
}
@media(max-width:900px){
.report-chart-grid{
grid-template-columns:1fr;
}
.report-chart-card-wide{
grid-column:auto;
}
.report-chart-legend{
justify-content:flex-start;
}
}
@media(max-width:600px){
.financial-chart{
overflow-x:auto;
}
.financial-chart svg{
min-width:650px;
}
}
/* =========================================================
Beauty OS — Financial Trend Charts 5.5.4C
========================================================= */
.report-chart-section{
margin-top:18px;
}
.report-chart-section-head{
margin-bottom:12px;
padding-left:2px;
padding-right:2px;
}
.report-chart-grid{
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:16px;
}
.report-chart-card-wide{
grid-column:1 / -1;
}
.report-chart-card{
min-width:0;
overflow:hidden;
}
.report-chart-legend{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:12px;
color:#8593aa;
font-size:10px;
}
.report-chart-legend span{
display:inline-flex;
align-items:center;
gap:6px;
}
.report-chart-legend span::before{
width:8px;
height:8px;
border-radius:999px;
background:currentColor;
content:"";
}
.legend-series-1{
color:#8d7cff !important;
}
.legend-series-2{
color:#55b8ff !important;
}
.legend-series-3{
color:#4de2a2 !important;
}
.financial-chart{
position:relative;
min-height:320px;
padding:8px 14px 14px;
}
.financial-chart svg{
display:block;
width:100%;
height:320px;
overflow:visible;
}
.financial-chart-grid{
stroke:rgba(148,163,184,.10);
stroke-width:1;
vector-effect:non-scaling-stroke;
}
.financial-chart-axis{
fill:#708099;
font-size:10px;
font-family:inherit;
}
.financial-chart-line{
stroke-width:2.5;
vector-effect:non-scaling-stroke;
stroke-linejoin:round;
stroke-linecap:round;
}
.financial-chart-point{
stroke:#111720;
stroke-width:2;
vector-effect:non-scaling-stroke;
cursor:pointer;
}
.financial-chart-bar{
cursor:pointer;
transition:
opacity .15s ease;
}
.financial-chart-bar:hover{
opacity:.78;
}
.financial-chart-series-1{
stroke:#8d7cff;
fill:#8d7cff;
}
.financial-chart-series-2{
stroke:#55b8ff;
fill:#55b8ff;
}
.financial-chart-series-3{
stroke:#4de2a2;
fill:#4de2a2;
}
.financial-chart-tooltip{
position:absolute;
z-index:20;
display:none;
min-width:150px;
padding:10px 12px;
border:1px solid rgba(255,255,255,.11);
border-radius:10px;
background:rgba(9,13,20,.97);
box-shadow:
0 14px 34px rgba(0,0,0,.35);
pointer-events:none;
}
.financial-chart-tooltip.is-visible{
display:grid;
gap:4px;
}
.financial-chart-tooltip strong{
color:#f6f8fc;
font-size:11px;
}
.financial-chart-tooltip span{
color:#8593aa;
font-size:10px;
}
.financial-chart-tooltip b{
color:#c3b8ff;
font-size:13px;
}
.financial-chart-empty{
display:grid;
place-items:center;
min-height:280px;
color:#76849b;
font-size:12px;
}
@media(max-width:900px){
.report-chart-grid{
grid-template-columns:1fr;
}
.report-chart-card-wide{
grid-column:auto;
}
.report-chart-legend{
justify-content:flex-start;
}
}
@media(max-width:600px){
.financial-chart{
overflow-x:auto;
}
.financial-chart svg{
min-width:650px;
}
}
/* =========================================================
Beauty OS — Financial Export / Print 5.5.4D
========================================================= */
.report-export-actions{
display:flex;
align-items:center;
gap:8px;
margin-left:auto;
}
.report-export-button,
.report-print-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:0 14px;
border-radius:10px;
font-size:11px;
font-weight:800;
text-decoration:none;
cursor:pointer;
transition:
transform .15s ease,
border-color .15s ease,
background .15s ease;
}
.report-export-button{
color:#fff;
border:1px solid rgba(122,92,255,.45);
background:
linear-gradient(
135deg,
#7655ff,
#4b7ff5
);
}
.report-print-button{
color:#e8edf6;
border:1px solid rgba(255,255,255,.10);
background:#131922;
}
.report-export-button:hover,
.report-print-button:hover{
transform:translateY(-1px);
}
@media(max-width:800px){
.report-export-actions{
width:100%;
margin-left:0;
}
.report-export-button,
.report-print-button{
flex:1;
}
}
/* Print / Save as PDF */
@media print{
@page{
size:A4 landscape;
margin:10mm;
}
body{
background:#fff !important;
color:#111 !important;
}
.app-sidebar,
.app-topbar,
.report-range-form,
.report-export-actions,
.report-chart-section,
.secure-session,
footer{
display:none !important;
}
.app-shell,
.app-main,
.app-content,
.report-page{
display:block !important;
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:0 !important;
background:#fff !important;
color:#111 !important;
}
.finance-card,
.finance-kpi{
break-inside:avoid;
border:1px solid #d9dde5 !important;
background:#fff !important;
box-shadow:none !important;
}
.finance-card-head,
.report-period-summary{
border-color:#d9dde5 !important;
}
.report-hero h1,
.finance-card h2,
.finance-kpi strong,
.report-pnl-row strong,
.report-table td,
.report-table th{
color:#111 !important;
}
.report-hero p,
.eyebrow,
.finance-kpi span,
.report-pnl-row span{
color:#555 !important;
}
.report-negative,
.report-pnl-deduction strong{
color:#b42332 !important;
}
.report-positive{
color:#12753f !important;
}
.report-pnl-highlight,
.report-pnl-final{
background:#f3f1ff !important;
border-color:#c9c1ff !important;
}
.report-table{
font-size:9pt;
}
a{
text-decoration:none !important;
color:#111 !important;
}
}
/* Amino Therapy Brand */
.amino-brand-mark{
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
padding:5px;
}
.amino-brand-mark img{
display:block;
width:100%;
height:100%;
object-fit:contain;
}
.brand-copy b{
letter-spacing:.01em;
}
/* =========================================================
Amino Therapy — Responsive Foundation v1
Desktop / Laptop / Tablet / Mobile + RTL / LTR
========================================================= */
/* Never allow a wide child to expand the whole application */
html,
body,
.app-shell-page,
.app-layout,
.app-main,
.app-content {
max-width: 100%;
}
html,
body,
.app-shell-page {
overflow-x: hidden;
}
.app-main,
.app-content {
min-width: 0;
}
/* Scroll wide data only inside its own container */
.inventory-table-wrap,
.refund-table-wrap,
.crm-table-scroll,
.visual-calendar-shell,
.finance-shift-table-wrap,
.expense-table-wrap,
.report-table-wrap,
.report-comparison-table-wrap {
max-width: 100%;
overflow-x: auto;
overscroll-behavior-inline: contain;
-webkit-overflow-scrolling: touch;
}
/* ---------------------------------------------------------
RTL shell
--------------------------------------------------------- */
html[dir="rtl"] .app-sidebar {
border-right: 0;
border-left: 1px solid #ffffff0c;
}
html[dir="rtl"] .sidebar-nav {
padding-right: 0;
padding-left: 2px;
}
html[dir="rtl"] .user-menu-copy {
text-align: right;
}
html[dir="rtl"] .user-dropdown {
right: auto;
left: 0;
}
html[dir="rtl"] .user-dropdown a,
html[dir="rtl"] .user-dropdown button {
text-align: right;
}
/* ---------------------------------------------------------
Laptop
Keep the navigation available but save workspace width.
--------------------------------------------------------- */
@media (min-width: 961px) and (max-width: 1279px) {
.app-layout {
grid-template-columns: 82px minmax(0, 1fr);
}
.app-layout .brand-copy,
.app-layout .nav-label,
.app-layout .nav-group-label,
.app-layout .sidebar-security div {
display: none;
}
.app-layout .sidebar-brand-row {
justify-content: center;
}
.app-layout .nav-item {
justify-content: center;
padding-left: 0;
padding-right: 0;
}
.app-layout .sidebar-security {
justify-content: center;
}
.app-layout .sidebar-collapse {
display: none;
}
.app-content {
padding-left: clamp(20px, 2.4vw, 32px);
padding-right: clamp(20px, 2.4vw, 32px);
}
}
/* ---------------------------------------------------------
Tablet / Mobile navigation drawer
--------------------------------------------------------- */
@media (max-width: 960px) {
.app-layout {
display: block;
}
.app-sidebar {
position: fixed;
top: 0;
bottom: 0;
height: 100dvh;
width: min(280px, 86vw);
z-index: 40;
}
/* LTR drawer */
html[dir="ltr"] .app-sidebar {
left: 0;
right: auto;
transform: translateX(-105%);
box-shadow: 20px 0 70px #0008;
}
html[dir="ltr"] .mobile-nav-open .app-sidebar {
transform: translateX(0);
}
/* RTL drawer */
html[dir="rtl"] .app-sidebar {
right: 0;
left: auto;
transform: translateX(105%);
box-shadow: -20px 0 70px #0008;
}
html[dir="rtl"] .mobile-nav-open .app-sidebar {
transform: translateX(0);
}
.mobile-menu-button {
display: block;
flex: 0 0 auto;
}
.app-topbar {
width: 100%;
max-width: 100vw;
}
.topbar-left,
.topbar-actions {
min-width: 0;
}
}
/* ---------------------------------------------------------
Small mobile
--------------------------------------------------------- */
@media (max-width: 700px) {
.app-content {
width: 100%;
padding: 18px 14px;
}
.app-topbar {
gap: 10px;
}
.topbar-left {
flex: 1;
overflow: hidden;
}
.topbar-left > div {
min-width: 0;
}
.topbar-left h1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.inventory-head h2,
.customer-hero h2,
.customer-profile-hero h2,
.refund-hero h2 {
font-size: clamp(2rem, 11vw, 3.2rem);
}
.inventory-table-card,
.crm-table-card,
.refund-table-card {
max-width: 100%;
}
.inventory-actions {
white-space: nowrap;
}
}
/* ---------------------------------------------------------
Very small phones
--------------------------------------------------------- */
@media (max-width: 440px) {
.app-topbar {
padding-left: 10px;
padding-right: 10px;
}
.app-content {
padding-left: 10px;
padding-right: 10px;
}
.mobile-menu-button {
width: 38px;
height: 38px;
}
.user-menu-button {
padding: 4px;
}
.user-avatar {
width: 32px;
height: 32px;
}
}
/* =========================================================
Amino Therapy — Responsive Polish v1
========================================================= */
/* RTL tables */
html[dir="rtl"] .inventory-table th,
html[dir="rtl"] .inventory-table td,
html[dir="rtl"] .crm-table th,
html[dir="rtl"] .crm-table td,
html[dir="rtl"] .refund-table th,
html[dir="rtl"] .refund-table td {
text-align: right;
}
/* Mixed Arabic / English / numeric values */
.inventory-table td,
.crm-table td,
.refund-table td {
unicode-bidi: plaintext;
}
/* Wide tables must scroll inside their cards */
.inventory-table-wrap,
.crm-table-scroll,
.refund-table-wrap,
.finance-shift-table-wrap,
.expense-table-wrap,
.report-table-wrap,
.report-comparison-table-wrap,
.visual-calendar-shell {
width: 100%;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
}
/* Laptop: CSS controls collapsed navigation */
@media (min-width:961px) and (max-width:1279px) {
.app-layout,
.app-layout.sidebar-is-collapsed {
grid-template-columns:82px minmax(0,1fr);
}
.app-layout .app-sidebar {
min-width:0;
}
.app-layout .brand-copy,
.app-layout .nav-label,
.app-layout .nav-group-label,
.app-layout .sidebar-security div {
display:none;
}
}
/* Mobile typography + spacing */
@media (max-width:700px) {
.dashboard-hero {
margin-top:6px;
margin-bottom:22px;
gap:14px;
}
.dashboard-hero h2 {
font-size:clamp(2rem, 9vw, 3rem);
line-height:1.05;
letter-spacing:-.045em;
max-width:100%;
overflow-wrap:anywhere;
}
.dashboard-hero p {
font-size:.88rem;
line-height:1.75;
}
.dashboard-panel {
padding:16px;
border-radius:19px;
}
.inventory-table-wrap {
cursor:grab;
}
}
/* Extra-small devices */
@media (max-width:480px) {
.dashboard-hero h2 {
font-size:clamp(1.8rem, 8.3vw, 2.55rem);
}
.dashboard-stats {
gap:8px;
}
.metric-card {
padding:15px;
}
.metric-card > strong {
font-size:1.7rem;
}
.quick-action {
padding:13px;
}
.inventory-head h2 {
font-size:2.35rem;
}
}
/* =========================================================
Amino Therapy — Mobile Drawer Scroll Fix
One controlled scrollbar inside navigation
========================================================= */
@media (max-width:960px){
.app-sidebar{
overflow:hidden;
}
.sidebar-nav{
min-height:0;
flex:1 1 auto;
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
}
.sidebar-brand-row,
.sidebar-bottom{
flex:0 0 auto;
}
}
/* =========================================================
Amino Therapy — Audit Log
========================================================= */
.audit-page{
display:grid;
gap:18px;
}
.audit-hero{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:24px;
margin:8px 0 4px;
}
.audit-hero h2{
font-size:clamp(2.5rem,5vw,4.8rem);
line-height:.96;
letter-spacing:-.055em;
margin:.45rem 0 .8rem;
}
.audit-hero p{
max-width:780px;
color:#8792a6;
line-height:1.65;
margin:0;
}
.audit-readonly{
display:inline-flex;
padding:9px 12px;
border:1px solid #37d58a24;
border-radius:999px;
background:#37d58a0d;
color:#75e5ad;
font-size:.67rem;
font-weight:850;
white-space:nowrap;
}
.audit-metrics{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
}
.audit-metrics article{
padding:18px;
border:1px solid #ffffff0d;
border-radius:18px;
background:linear-gradient(155deg,#12161e,#0d1016);
}
.audit-metrics span{
display:block;
color:#748096;
font-size:.67rem;
}
.audit-metrics strong{
display:block;
margin-top:13px;
font-size:1.8rem;
}
.audit-filter{
display:grid;
grid-template-columns:minmax(240px,1.4fr) 180px 170px 190px 150px 150px auto auto;
gap:9px;
align-items:end;
}
.audit-filter label{
display:grid;
gap:6px;
color:#778398;
font-size:.63rem;
}
.audit-filter input,
.audit-filter select,
.audit-filter button,
.audit-filter a{
min-height:42px;
width:100%;
border:1px solid #ffffff10;
border-radius:11px;
background:#0b0e14;
color:#dce2ed;
padding:0 12px;
}
.audit-filter button{
cursor:pointer;
font-weight:900;
}
.audit-filter a{
display:grid;
place-items:center;
text-decoration:none;
color:#8e99ab;
}
.audit-card{
min-width:0;
overflow:hidden;
border:1px solid #ffffff0e;
border-radius:20px;
background:linear-gradient(160deg,#11151d,#0d1016);
}
.audit-card-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:18px 20px;
border-bottom:1px solid #ffffff09;
}
.audit-card-head h3{
margin:.3rem 0 0;
}
.audit-card-head small{
color:#6f7b90;
}
.audit-table-wrap{
max-width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.audit-table{
width:100%;
min-width:1100px;
border-collapse:collapse;
}
.audit-table th{
padding:12px 16px;
text-align:left;
color:#70809b;
font-size:.61rem;
letter-spacing:.08em;
text-transform:uppercase;
border-bottom:1px solid #ffffff0a;
}
.audit-table td{
padding:15px 16px;
border-bottom:1px solid #ffffff07;
font-size:.72rem;
color:#c8d0dd;
vertical-align:top;
}
html[dir="rtl"] .audit-table th,
html[dir="rtl"] .audit-table td{
text-align:right;
}
.audit-user,
.audit-entity{
display:flex;
flex-direction:column;
}
.audit-user small,
.audit-entity small{
margin-top:4px;
color:#65738a;
}
.audit-action{
display:inline-flex;
padding:6px 9px;
border-radius:999px;
border:1px solid #7457ff22;
background:#7457ff0e;
color:#b6a8ff;
font-size:.62rem;
font-weight:850;
white-space:nowrap;
}
.audit-ip,
.audit-time{
direction:ltr;
unicode-bidi:plaintext;
white-space:nowrap;
}
.audit-details summary{
display:inline-flex;
cursor:pointer;
padding:6px 9px;
border:1px solid #ffffff10;
border-radius:9px;
background:#ffffff04;
color:#aab4c5;
font-size:.62rem;
font-weight:800;
}
.audit-details>div{
min-width:250px;
margin-top:8px;
padding:10px;
border:1px solid #ffffff0d;
border-radius:11px;
background:#090c11;
}
.audit-details p{
display:flex;
justify-content:space-between;
gap:14px;
margin:0;
padding:6px 0;
border-bottom:1px solid #ffffff07;
}
.audit-details p:last-child{
border-bottom:0;
}
.audit-details span{
color:#68758a;
}
.audit-details b{
max-width:360px;
overflow-wrap:anywhere;
text-align:end;
}
.audit-muted{
color:#5e697c;
}
.audit-empty{
text-align:center!important;
color:#6e7a8f!important;
padding:50px!important;
}
.audit-pagination{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
padding:16px 20px;
border-top:1px solid #ffffff08;
color:#778398;
font-size:.7rem;
}
.audit-pagination nav{
display:flex;
gap:8px;
}
.audit-pagination a{
display:inline-flex;
padding:8px 11px;
border:1px solid #ffffff10;
border-radius:9px;
background:#ffffff04;
color:#dbe1eb;
text-decoration:none;
}
@media(max-width:1300px){
.audit-filter{
grid-template-columns:repeat(4,minmax(0,1fr));
}
}
@media(max-width:900px){
.audit-metrics{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.audit-filter{
grid-template-columns:1fr 1fr;
}
}
@media(max-width:620px){
.audit-hero{
align-items:flex-start;
flex-direction:column;
}
.audit-readonly{
align-self:flex-start;
}
.audit-filter{
grid-template-columns:1fr;
}
.audit-pagination{
align-items:stretch;
flex-direction:column;
}
.audit-pagination nav{
width:100%;
}
.audit-pagination a{
flex:1;
justify-content:center;
}
}
/* =========================================================
Amino Therapy — Premium Application Shell v7
========================================================= */
.app-topbar{
min-height:76px;
height:auto;
padding-block:10px;
border-bottom:1px solid rgba(255,255,255,.065);
background:rgba(8,11,16,.88);
backdrop-filter:blur(22px) saturate(130%);
-webkit-backdrop-filter:blur(22px) saturate(130%);
}
.topbar-actions{
gap:9px;
}
.topbar-icon-button,
.user-menu-button,
.shell-language-trigger{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 8px 30px rgba(0,0,0,.08);
}
.topbar-icon-button{
width:42px;
height:42px;
flex:0 0 42px;
border-radius:13px;
transition:
border-color .2s ease,
background .2s ease,
transform .2s ease;
}
.topbar-icon-button:hover{
border-color:rgba(124,92,255,.28);
background:rgba(124,92,255,.08);
color:#c5b9ff;
}
.notification-dot{
box-shadow:0 0 0 3px rgba(123,92,255,.08);
}
/* Language selector */
.shell-language-menu{
position:relative;
z-index:70;
}
.shell-language-menu > summary{
list-style:none;
}
.shell-language-menu > summary::-webkit-details-marker{
display:none;
}
.shell-language-trigger{
min-width:94px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
gap:9px;
padding:0 11px;
border:1px solid rgba(255,255,255,.08);
border-radius:13px;
background:rgba(255,255,255,.025);
color:#dfe5ef;
cursor:pointer;
user-select:none;
transition:
border-color .2s ease,
background .2s ease,
color .2s ease;
}
.shell-language-trigger:hover,
.shell-language-menu[open] .shell-language-trigger{
border-color:rgba(123,92,255,.28);
background:rgba(123,92,255,.07);
color:#fff;
}
.shell-language-trigger svg{
width:17px;
height:17px;
fill:none;
stroke:currentColor;
stroke-width:1.6;
stroke-linecap:round;
stroke-linejoin:round;
color:#8995aa;
}
.shell-language-trigger strong{
font-size:.72rem;
letter-spacing:.06em;
}
.shell-language-chevron{
color:#667287;
font-size:.76rem;
transition:transform .2s ease;
}
.shell-language-menu[open] .shell-language-chevron{
transform:rotate(180deg);
}
.shell-language-dropdown{
position:absolute;
top:calc(100% + 9px);
width:230px;
padding:7px;
border:1px solid rgba(255,255,255,.09);
border-radius:15px;
background:rgba(14,18,26,.98);
box-shadow:
0 24px 70px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.025);
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
}
html[dir="ltr"] .shell-language-dropdown{
left:0;
}
html[dir="rtl"] .shell-language-dropdown{
right:0;
}
.shell-language-dropdown a{
min-height:55px;
display:grid;
grid-template-columns:38px minmax(0,1fr) 20px;
align-items:center;
gap:10px;
padding:8px 9px;
border:1px solid transparent;
border-radius:11px;
color:#a9b3c4;
text-decoration:none;
transition:
background .18s ease,
border-color .18s ease,
color .18s ease;
}
.shell-language-dropdown a:hover{
background:rgba(255,255,255,.035);
color:#fff;
}
.shell-language-dropdown a.is-active{
border-color:rgba(123,92,255,.17);
background:linear-gradient(
135deg,
rgba(123,92,255,.12),
rgba(123,92,255,.035)
);
color:#fff;
}
.language-code{
width:36px;
height:36px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.075);
border-radius:10px;
background:rgba(255,255,255,.025);
font-size:.63rem;
font-weight:900;
letter-spacing:.04em;
}
.language-name{
min-width:0;
display:flex;
flex-direction:column;
}
.language-name b{
font-size:.72rem;
}
.language-name small{
margin-top:2px;
color:#657187;
font-size:.59rem;
}
.language-current{
display:grid;
place-items:center;
width:18px;
height:18px;
border-radius:50%;
background:rgba(75,214,145,.12);
color:#5fe0a1;
font-size:.61rem;
}
/* User */
.user-menu-button{
min-height:42px;
border-radius:13px;
background:rgba(255,255,255,.025);
}
.user-avatar{
box-shadow:
0 0 0 1px rgba(255,255,255,.08),
0 0 28px rgba(108,83,255,.13);
}
/* Footer */
.app-footer-premium{
min-height:66px;
display:grid;
grid-template-columns:auto 1fr;
align-items:center;
gap:28px;
padding:
15px
clamp(18px,3vw,38px);
border-top:1px solid rgba(255,255,255,.06);
background:
linear-gradient(
180deg,
rgba(10,13,18,.28),
rgba(7,10,14,.72)
);
}
.footer-brand{
display:flex;
align-items:baseline;
gap:9px;
white-space:nowrap;
}
.footer-brand strong{
color:#dce2eb;
font-size:.69rem;
letter-spacing:-.01em;
}
.footer-brand span{
color:#4e5b70;
font-size:.58rem;
}
.footer-legal{
display:flex;
align-items:center;
justify-content:flex-end;
gap:11px;
color:#68758a;
font-size:.64rem;
line-height:1.5;
}
.footer-separator{
width:1px;
height:13px;
flex:0 0 1px;
background:rgba(255,255,255,.09);
}
.footer-designer{
margin-inline-start:4px;
color:#9b86ff;
font-weight:800;
}
/* Direction-aware shell */
html[dir="rtl"] .topbar-left,
html[dir="rtl"] .user-menu-copy{
text-align:right;
}
html[dir="rtl"] .footer-legal{
justify-content:flex-start;
}
html[dir="ltr"] .footer-legal{
justify-content:flex-end;
}
/* Tablet */
@media(max-width:960px){
.shell-language-trigger{
min-width:78px;
}
.app-footer-premium{
grid-template-columns:1fr;
gap:7px;
}
.footer-brand,
.footer-legal{
justify-content:center!important;
}
}
/* Mobile */
@media(max-width:700px){
.app-topbar{
min-height:68px;
padding:8px 13px;
}
.topbar-actions{
gap:6px;
}
.shell-language-trigger{
min-width:64px;
width:64px;
padding:0 8px;
}
.shell-language-trigger svg{
width:16px;
}
.shell-language-chevron{
display:none;
}
.shell-language-dropdown{
width:210px;
}
html[dir="ltr"] .shell-language-dropdown{
left:auto;
right:0;
}
html[dir="rtl"] .shell-language-dropdown{
right:auto;
left:0;
}
.app-footer-premium{
padding:18px 14px;
}
.footer-brand{
justify-content:center;
}
.footer-legal{
flex-direction:column;
text-align:center;
gap:4px;
}
.footer-separator{
display:none;
}
}
/* Extra-small */
@media(max-width:440px){
.shell-language-trigger{
width:58px;
min-width:58px;
}
.shell-language-trigger svg{
display:none;
}
.footer-brand span{
display:none;
}
}
/* =========================================================
Amino Therapy Dashboard v7.1
========================================================= */
.dashboard-hero{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) 124px;
align-items:center;
gap:38px;
margin:12px 0 30px;
padding:22px 4px 4px;
}
.dashboard-hero-copy{
min-width:0;
}
.dashboard-hero .eyebrow{
display:inline-flex;
align-items:center;
gap:7px;
margin-bottom:12px;
color:#7f8aa0;
font-size:.66rem;
font-weight:800;
letter-spacing:.035em;
}
.dashboard-hero h2{
max-width:1000px;
margin:0 0 14px;
color:#f7f8fb;
font-size:clamp(3rem,5.4vw,5.15rem);
font-weight:850;
line-height:.96;
letter-spacing:-.055em;
text-wrap:balance;
}
.dashboard-person-name{
color:#fff;
}
.dashboard-hero p{
max-width:790px;
margin:0;
color:#8792a7;
font-size:.84rem;
line-height:1.8;
}
.hero-date-card{
width:124px;
min-height:124px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:15px;
border:1px solid rgba(255,255,255,.075);
border-radius:20px;
background:
radial-gradient(
circle at 50% 0%,
rgba(116,87,255,.09),
transparent 55%
),
rgba(255,255,255,.022);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 18px 45px rgba(0,0,0,.12);
}
.hero-date-card span{
color:#828da2;
font-size:.66rem;
font-weight:700;
}
.hero-date-card strong{
margin:7px 0 5px;
color:#fff;
font-size:2.35rem;
font-weight:850;
line-height:1;
letter-spacing:-.045em;
}
.hero-date-card small{
color:#69758b;
font-size:.62rem;
}
/* KPI */
.dashboard-stats{
gap:12px;
margin-bottom:18px;
}
.metric-card{
position:relative;
min-height:128px;
padding:18px 20px;
overflow:hidden;
border:1px solid rgba(255,255,255,.065);
border-radius:18px;
background:
linear-gradient(
150deg,
rgba(255,255,255,.027),
rgba(255,255,255,.012)
);
transition:
transform .2s ease,
border-color .2s ease,
background .2s ease;
}
.metric-card:hover{
transform:translateY(-2px);
border-color:rgba(123,92,255,.22);
background:
linear-gradient(
150deg,
rgba(123,92,255,.055),
rgba(255,255,255,.012)
);
}
.metric-card-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.metric-card-top > span{
color:#7f899c;
font-size:.68rem;
}
.metric-card-top i{
width:30px;
height:30px;
display:grid;
place-items:center;
border-radius:10px;
background:rgba(117,87,255,.07);
color:#9583ff;
font-style:normal;
}
.metric-card > strong{
display:block;
margin:20px 0 5px;
color:#fff;
font-size:1.85rem;
line-height:1;
letter-spacing:-.035em;
}
.metric-card > small{
color:#69758a;
font-size:.64rem;
}
/* Panels */
.dashboard-panel{
border-color:rgba(255,255,255,.065);
background:
linear-gradient(
155deg,
rgba(255,255,255,.025),
rgba(255,255,255,.009)
),
#0d1016;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.018);
}
.panel-title-row h3{
margin:.28rem 0 0;
color:#f1f3f7;
}
.quick-action{
min-height:64px;
}
.quick-action:hover{
box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.modules-panel{
margin-bottom:12px;
}
.module-card{
min-height:205px;
}
.module-card h4{
letter-spacing:-.025em;
}
/* RTL */
html[dir="rtl"] .dashboard-hero,
html[dir="rtl"] .dashboard-panel,
html[dir="rtl"] .metric-card{
text-align:right;
}
html[dir="rtl"] .dashboard-hero h2{
letter-spacing:-.035em;
}
html[dir="rtl"] .quick-action{
grid-template-columns:auto 1fr;
}
html[dir="rtl"] .module-card{
text-align:right;
}
/* Laptop */
@media (max-width:1279px){
.dashboard-hero{
grid-template-columns:minmax(0,1fr) 112px;
gap:24px;
}
.hero-date-card{
width:112px;
min-height:112px;
}
.dashboard-hero h2{
font-size:clamp(2.8rem,5.3vw,4.5rem);
}
}
/* Tablet */
@media (max-width:900px){
.dashboard-hero{
grid-template-columns:1fr auto;
gap:18px;
padding-top:12px;
}
.dashboard-hero h2{
font-size:clamp(2.5rem,8vw,4rem);
}
.dashboard-grid{
grid-template-columns:1fr;
}
}
/* Mobile */
@media (max-width:700px){
.dashboard-hero{
display:block;
margin:2px 0 22px;
padding:8px 0 0;
}
.dashboard-hero .eyebrow{
margin-bottom:9px;
font-size:.6rem;
}
.dashboard-hero h2{
max-width:100%;
margin-bottom:11px;
font-size:clamp(2rem,10vw,3.05rem);
line-height:1.02;
}
.dashboard-hero p{
max-width:100%;
font-size:.74rem;
line-height:1.7;
}
.hero-date-card{
display:none;
}
.dashboard-stats{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:9px;
}
.metric-card{
min-height:112px;
padding:15px;
}
.metric-card > strong{
margin-top:16px;
font-size:1.55rem;
}
.dashboard-panel{
padding:17px;
border-radius:18px;
}
.quick-action-grid{
grid-template-columns:1fr;
}
.module-cards{
grid-template-columns:1fr;
}
.module-card{
min-height:160px;
}
.module-card h4{
margin-top:22px;
}
}
@media (max-width:420px){
.dashboard-hero h2{
font-size:2rem;
}
.dashboard-stats{
grid-template-columns:1fr 1fr;
}
.metric-card{
padding:13px;
}
.metric-card-top > span{
font-size:.61rem;
}
}
/* =========================================================
Amino Therapy — Customer 360 UI Polish v7.2
========================================================= */
/* ---------- Page ---------- */
.customer-page {
width: 100%;
min-width: 0;
}
/* ---------- Hero ---------- */
.customer-page .customer-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 32px;
margin: 12px 0 30px;
padding: 26px 8px 4px;
}
.customer-page .customer-hero > div {
min-width: 0;
}
.customer-page .customer-hero .eyebrow {
display: block;
margin-bottom: 12px;
color: #8d98ad;
font-size: .66rem;
font-weight: 800;
letter-spacing: .04em;
}
.customer-page .customer-hero h2 {
max-width: 900px;
margin: 0 0 13px;
font-size: clamp(3rem, 5vw, 5.15rem);
font-weight: 900;
line-height: .96;
letter-spacing: -.055em;
color: #f7f8fb;
}
.customer-page .customer-hero p {
max-width: 820px;
margin: 0;
color: #858fa2;
font-size: .88rem;
line-height: 1.75;
}
/* ---------- Primary action ---------- */
.customer-page .customer-hero .crm-primary {
min-height: 44px;
padding: 0 18px;
border: 1px solid rgba(126, 97, 255, .52);
border-radius: 13px;
background:
linear-gradient(
135deg,
#795cff 0%,
#6245ef 100%
);
color: #fff;
box-shadow:
0 12px 30px rgba(105, 77, 239, .20);
font-size: .72rem;
font-weight: 900;
white-space: nowrap;
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease;
}
.customer-page .customer-hero .crm-primary:hover {
transform: translateY(-1px);
border-color: rgba(151, 128, 255, .75);
box-shadow:
0 16px 38px rgba(105, 77, 239, .27);
}
/* ---------- KPI cards ---------- */
.customer-page .crm-metrics {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 12px;
margin-bottom: 18px;
}
.customer-page .crm-metrics article {
position: relative;
min-width: 0;
min-height: 112px;
padding: 19px 20px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.075);
border-radius: 18px;
background:
linear-gradient(
145deg,
rgba(19,23,31,.96),
rgba(13,16,22,.98)
);
transition:
transform .18s ease,
border-color .18s ease,
background .18s ease;
}
.customer-page .crm-metrics article:hover {
transform: translateY(-2px);
border-color: rgba(126, 97, 255, .20);
background:
linear-gradient(
145deg,
rgba(21,25,35,.98),
rgba(14,17,24,.99)
);
}
.customer-page .crm-metrics span {
display: block;
color: #7c879a;
font-size: .66rem;
line-height: 1.5;
}
.customer-page .crm-metrics strong {
display: block;
margin-top: 16px;
color: #f7f8fb;
font-size: clamp(1.55rem, 2vw, 2rem);
font-weight: 900;
line-height: 1;
letter-spacing: -.035em;
}
/* ---------- Filter ---------- */
.customer-page .crm-filter {
display: grid;
grid-template-columns:
minmax(300px, 1fr)
minmax(160px, 190px)
auto
auto;
align-items: stretch;
gap: 9px;
margin: 0 0 16px;
}
.customer-page .crm-filter input,
.customer-page .crm-filter select,
.customer-page .crm-filter button,
.customer-page .crm-filter a {
box-sizing: border-box;
min-width: 0;
min-height: 44px;
border: 1px solid rgba(255,255,255,.085);
border-radius: 12px;
background: #0b0e14;
color: #dce2ed;
font: inherit;
font-size: .72rem;
outline: none;
transition:
border-color .18s ease,
background .18s ease,
box-shadow .18s ease;
}
.customer-page .crm-filter input,
.customer-page .crm-filter select {
width: 100%;
padding-inline: 14px;
}
.customer-page .crm-filter input::placeholder {
color: #626d80;
}
.customer-page .crm-filter input:focus,
.customer-page .crm-filter select:focus {
border-color: rgba(126, 97, 255, .60);
box-shadow:
0 0 0 3px rgba(126, 97, 255, .09);
}
.customer-page .crm-filter button {
padding-inline: 18px;
cursor: pointer;
font-weight: 900;
background:
rgba(255,255,255,.045);
}
.customer-page .crm-filter button:hover {
border-color: rgba(126, 97, 255, .35);
background:
rgba(126, 97, 255, .10);
}
.customer-page .crm-filter a {
display: grid;
place-items: center;
padding-inline: 16px;
text-decoration: none;
color: #8994a8;
}
.customer-page .crm-filter a:hover {
color: #cbd2de;
background: rgba(255,255,255,.045);
}
/* ---------- Customer directory ---------- */
.customer-page .crm-table-card {
width: 100%;
min-width: 0;
overflow: hidden;
border: 1px solid rgba(255,255,255,.075);
border-radius: 20px;
background:
linear-gradient(
155deg,
rgba(17,21,29,.98),
rgba(13,16,22,.99)
);
}
.customer-page .crm-table-head {
min-height: 78px;
padding: 18px 20px;
border-bottom:
1px solid rgba(255,255,255,.055);
}
.customer-page .crm-table-head h3 {
margin: 4px 0 0;
color: #f0f3f8;
font-size: 1rem;
}
.customer-page .crm-table-head small {
color: #717d91;
font-size: .65rem;
}
/* ---------- Table ---------- */
.customer-page .crm-table-scroll {
width: 100%;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.customer-page .crm-table {
width: 100%;
min-width: 900px;
border-collapse: collapse;
}
.customer-page .crm-table th {
padding: 13px 16px;
border-bottom:
1px solid rgba(255,255,255,.055);
color: #718099;
font-size: .60rem;
font-weight: 800;
letter-spacing: .035em;
white-space: nowrap;
}
.customer-page .crm-table td {
padding: 16px;
border-bottom:
1px solid rgba(255,255,255,.045);
color: #c9d0dc;
font-size: .72rem;
vertical-align: middle;
transition: background .16s ease;
}
.customer-page .crm-table tbody tr:last-child td {
border-bottom: 0;
}
.customer-page .crm-table tbody tr:hover td {
background: rgba(255,255,255,.025);
}
/* ---------- Customer identity ---------- */
.customer-page .crm-customer-link {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 150px;
color: #f1f3f8;
text-decoration: none;
}
.customer-page .crm-customer-link b {
color: #f3f5f9;
font-size: .76rem;
font-weight: 900;
}
.customer-page .crm-customer-link small {
margin: 0;
color: #68768c;
font-size: .62rem;
}
.customer-page .crm-customer-link:hover b {
color: #b9acff;
}
/* ---------- Status ---------- */
.customer-page .crm-status {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 46px;
padding: 6px 9px;
border-radius: 999px;
font-size: .59rem;
font-weight: 900;
line-height: 1;
}
.customer-page .crm-status.active {
border: 1px solid rgba(70,216,155,.12);
background: rgba(37,157,109,.22);
color: #6be3af;
}
.customer-page .crm-status.inactive {
border: 1px solid rgba(255,112,137,.12);
background: rgba(174,65,84,.20);
color: #ff9dad;
}
/* ---------- RTL ---------- */
html[dir="rtl"] .customer-page .customer-hero,
html[dir="rtl"] .customer-page .crm-table-head {
text-align: right;
}
html[dir="rtl"] .customer-page .crm-table th,
html[dir="rtl"] .customer-page .crm-table td {
text-align: right;
}
html[dir="rtl"] .customer-page .crm-filter input,
html[dir="rtl"] .customer-page .crm-filter select {
text-align: right;
}
html[dir="rtl"] .customer-page .crm-table td {
unicode-bidi: plaintext;
}
/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
.customer-page .customer-hero h2 {
font-size: clamp(2.8rem, 6vw, 4.4rem);
}
.customer-page .crm-metrics {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.customer-page .crm-filter {
grid-template-columns:
minmax(240px, 1fr)
minmax(150px, 180px)
auto
auto;
}
}
/* ---------- Mobile ---------- */
@media (max-width: 720px) {
.customer-page .customer-hero {
grid-template-columns: 1fr;
align-items: stretch;
gap: 20px;
margin-top: 4px;
margin-bottom: 24px;
padding: 14px 0 0;
}
.customer-page .customer-hero h2 {
margin-bottom: 10px;
font-size: clamp(2.25rem, 11vw, 3.4rem);
line-height: 1;
overflow-wrap: anywhere;
}
.customer-page .customer-hero p {
font-size: .82rem;
line-height: 1.7;
}
.customer-page .customer-hero .crm-primary {
width: 100%;
}
.customer-page .crm-metrics {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 8px;
}
.customer-page .crm-metrics article {
min-height: 100px;
padding: 15px;
}
.customer-page .crm-metrics strong {
margin-top: 12px;
font-size: 1.5rem;
}
.customer-page .crm-filter {
grid-template-columns: 1fr;
gap: 8px;
}
.customer-page .crm-filter button,
.customer-page .crm-filter a {
width: 100%;
}
.customer-page .crm-table-head {
min-height: 70px;
padding: 16px;
}
.customer-page .crm-table {
min-width: 780px;
}
}
/* ---------- Very small phones ---------- */
@media (max-width: 440px) {
.customer-page .customer-hero h2 {
font-size: clamp(2rem, 10vw, 2.8rem);
}
.customer-page .crm-metrics {
grid-template-columns: 1fr 1fr;
}
.customer-page .crm-metrics article {
min-height: 92px;
padding: 13px;
}
.customer-page .crm-metrics span {
font-size: .60rem;
}
.customer-page .crm-metrics strong {
font-size: 1.35rem;
}
}
/* =========================================================
Amino Therapy — Appointments UI Polish v7.3
========================================================= */
.appointment-calendar-page{
display:grid;
gap:18px;
width:100%;
min-width:0;
}
/* Hero */
.appointment-calendar-page .appt-hero{
position:relative;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:28px;
margin:0;
padding:26px 28px;
overflow:hidden;
border:1px solid rgba(255,255,255,.07);
border-radius:24px;
background:
radial-gradient(circle at 12% 0%,rgba(117,88,255,.13),transparent 36%),
linear-gradient(145deg,rgba(18,22,31,.98),rgba(11,14,20,.98));
}
.appointment-calendar-page .appt-hero::after{
content:"";
position:absolute;
width:280px;
height:280px;
inset-inline-end:-120px;
top:-180px;
border-radius:50%;
background:rgba(117,88,255,.08);
filter:blur(10px);
pointer-events:none;
}
.appointment-calendar-page .appt-hero>div,
.appointment-calendar-page .appt-hero>a{
position:relative;
z-index:1;
}
.appointment-calendar-page .appt-hero .eyebrow{
color:#8f7cff;
font-size:.67rem;
font-weight:900;
letter-spacing:.14em;
}
.appointment-calendar-page .appt-hero h2{
margin:7px 0 8px;
font-size:clamp(2rem,3.4vw,3.25rem);
line-height:1;
letter-spacing:-.045em;
}
[dir="rtl"] .appointment-calendar-page .appt-hero h2{
letter-spacing:0;
}
.appointment-calendar-page .appt-hero p{
max-width:760px;
margin:0;
color:#8d98ac;
font-size:.84rem;
line-height:1.75;
}
.appointment-calendar-page .appt-hero>.crm-primary{
flex:0 0 auto;
min-height:44px;
padding:0 18px;
border-radius:12px;
box-shadow:0 10px 30px rgba(103,75,255,.16);
}
/* KPI cards */
.appointment-calendar-page .appt-metrics{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
margin:0;
}
.appointment-calendar-page .appt-metrics article{
position:relative;
min-width:0;
padding:18px 19px;
overflow:hidden;
border:1px solid rgba(255,255,255,.065);
border-radius:17px;
background:linear-gradient(145deg,#11161f,#0d1118);
transition:transform .18s ease,border-color .18s ease;
}
.appointment-calendar-page .appt-metrics article:hover{
transform:translateY(-2px);
border-color:rgba(117,88,255,.28);
}
.appointment-calendar-page .appt-metrics article::before{
content:"";
position:absolute;
inset-inline-start:0;
top:17px;
bottom:17px;
width:2px;
border-radius:999px;
background:#7357ff;
opacity:.72;
}
.appointment-calendar-page .appt-metrics article:nth-child(2)::before{
background:#45c6ff;
}
.appointment-calendar-page .appt-metrics article:nth-child(3)::before{
background:#f0b85a;
}
.appointment-calendar-page .appt-metrics article:nth-child(4)::before{
background:#45d99a;
}
.appointment-calendar-page .appt-metrics span{
display:block;
color:#818ca0;
font-size:.69rem;
font-weight:700;
}
.appointment-calendar-page .appt-metrics strong{
display:block;
margin-top:10px;
color:#f5f7fb;
font-size:1.7rem;
line-height:1;
}
/* Command bar */
.appointment-calendar-page .calendar-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:15px 17px;
border:1px solid rgba(255,255,255,.065);
border-radius:18px;
background:linear-gradient(145deg,#11161f,#0d1118);
box-shadow:0 12px 35px rgba(0,0,0,.10);
}
.appointment-calendar-page .calendar-day-nav{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.appointment-calendar-page .calendar-day-nav>div{
min-width:190px;
padding-inline:4px;
}
.appointment-calendar-page .calendar-day-nav .eyebrow{
color:#6f7b91;
font-size:.59rem;
letter-spacing:.12em;
}
.appointment-calendar-page .calendar-day-nav h3{
margin:3px 0 0;
color:#edf1f8;
font-size:.95rem;
white-space:nowrap;
}
.appointment-calendar-page .calendar-day-nav>a{
display:grid;
place-items:center;
min-width:40px;
height:40px;
padding:0 11px;
border:1px solid #272e3b;
border-radius:11px;
background:#0b0f16;
color:#d9e0ec;
text-decoration:none;
transition:.16s ease;
}
.appointment-calendar-page .calendar-day-nav>a:hover{
border-color:rgba(117,88,255,.65);
background:rgba(117,88,255,.10);
color:#fff;
}
.appointment-calendar-page .calendar-day-nav .today-link{
width:auto;
min-width:auto;
padding-inline:15px;
color:#bdb3ff;
}
.appointment-calendar-page .calendar-filter{
flex:0 0 auto;
}
.appointment-calendar-page .calendar-filter select{
min-width:205px;
min-height:42px;
margin:0;
padding:0 13px;
border:1px solid #272e3b;
border-radius:11px;
background:#0a0e15;
color:#e8edf7;
outline:none;
}
.appointment-calendar-page .calendar-filter select:focus{
border-color:#7258ff;
box-shadow:0 0 0 3px rgba(114,88,255,.10);
}
/* Visual calendar */
.appointment-calendar-page .visual-calendar-shell{
width:100%;
max-width:100%;
overflow:auto;
border:1px solid rgba(255,255,255,.07);
border-radius:20px;
background:#0b0f16;
box-shadow:0 16px 45px rgba(0,0,0,.13);
scrollbar-width:thin;
}
.appointment-calendar-page .visual-calendar{
--hour-height:82px;
}
.appointment-calendar-page .calendar-corner,
.appointment-calendar-page .calendar-staff-head{
min-height:66px;
background:#111720;
border-bottom-color:#252d3b;
}
.appointment-calendar-page .calendar-staff-head b{
color:#eef2f8;
font-size:.8rem;
}
.appointment-calendar-page .calendar-staff-head small{
color:#748198;
font-size:.65rem;
}
.appointment-calendar-page .calendar-time-axis{
background:#090d13;
}
.appointment-calendar-page .calendar-time-axis span{
color:#69778f;
font-weight:700;
}
.appointment-calendar-page .calendar-staff-column{
background:
linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
background-size:100% var(--hour-height);
}
/* Calendar appointment cards */
.appointment-calendar-page .calendar-event{
left:8px;
right:8px;
padding:9px 10px;
border-radius:11px;
border-color:rgba(117,88,255,.32);
border-inline-start:3px solid #7558ff;
background:linear-gradient(
145deg,
rgba(117,88,255,.16),
rgba(18,23,33,.98)
);
box-shadow:0 8px 24px rgba(0,0,0,.18);
}
[dir="rtl"] .appointment-calendar-page .calendar-event{
border-left-width:1px;
border-right-width:3px;
}
.appointment-calendar-page .calendar-event.status-confirmed{
border-inline-start-color:#8c7aff;
}
.appointment-calendar-page .calendar-event.status-checked_in{
border-inline-start-color:#45c6ff;
}
.appointment-calendar-page .calendar-event.status-in_service{
border-inline-start-color:#f0b85a;
}
.appointment-calendar-page .calendar-event.status-completed{
border-inline-start-color:#45d99a;
}
.appointment-calendar-page .calendar-event.status-cancelled,
.appointment-calendar-page .calendar-event.status-no_show{
border-inline-start-color:#f06d7c;
opacity:.66;
}
.appointment-calendar-page .calendar-customer{
margin-top:5px;
color:#f3f5fa;
font-size:.75rem;
font-weight:850;
}
.appointment-calendar-page .calendar-event>small{
margin-top:2px;
color:#8e9bb0;
font-size:.62rem;
}
.appointment-calendar-page .calendar-event-actions a,
.appointment-calendar-page .calendar-event-actions button{
border-color:#303849;
background:#151b26;
}
.appointment-calendar-page .calendar-event-actions a:hover,
.appointment-calendar-page .calendar-event-actions button:hover{
border-color:#7258ff;
color:#fff;
}
/* Status pills */
.appointment-calendar-page .appt-status{
border:1px solid rgba(255,255,255,.055);
background:#171c25;
}
.appointment-calendar-page .appt-status.booked{
background:rgba(125,135,153,.12);
color:#b8c1cf;
}
.appointment-calendar-page .appt-status.confirmed{
background:rgba(117,88,255,.13);
color:#c7bdff;
}
.appointment-calendar-page .appt-status.checked_in{
background:rgba(69,198,255,.12);
color:#75d5ff;
}
.appointment-calendar-page .appt-status.in_service{
background:rgba(240,184,90,.12);
color:#f3c879;
}
.appointment-calendar-page .appt-status.completed{
background:rgba(69,217,154,.12);
color:#71e5b1;
}
.appointment-calendar-page .appt-status.cancelled,
.appointment-calendar-page .appt-status.no_show{
background:rgba(240,109,124,.11);
color:#ff95a1;
}
/* Operational workflow board */
.appointment-calendar-page .workflow-board{
margin-top:2px;
overflow:visible;
border:1px solid rgba(255,255,255,.07);
border-radius:20px;
background:linear-gradient(145deg,#11161f,#0c1017);
box-shadow:0 16px 45px rgba(0,0,0,.11);
}
.appointment-calendar-page .appt-row{
grid-template-columns:90px minmax(0,1fr) auto;
gap:20px;
min-height:86px;
padding:18px 20px;
border-bottom:1px solid rgba(255,255,255,.055);
transition:background .15s ease;
}
.appointment-calendar-page .appt-row:hover{
background:rgba(255,255,255,.018);
}
.appointment-calendar-page .appt-time{
padding-inline-start:2px;
}
.appointment-calendar-page .appt-time strong{
color:#f1f4f9;
font-size:1.22rem;
}
.appointment-calendar-page .appt-time small{
color:#69768d;
}
.appointment-calendar-page .appt-title{
gap:10px;
}
.appointment-calendar-page .appt-title>a{
color:#f0f3f8;
font-size:.84rem;
}
.appointment-calendar-page .appt-title>a:hover{
color:#bdb2ff;
}
.appointment-calendar-page .appt-meta{
gap:8px 14px;
margin-top:8px;
color:#79869b;
font-size:.65rem;
}
.appointment-calendar-page .appt-main p{
color:#8995a8;
line-height:1.55;
}
/* Workflow buttons */
.appointment-calendar-page .workflow-actions{
gap:8px;
}
.appointment-calendar-page .appt-next,
.appointment-calendar-page .treatment-popover>summary,
.appointment-calendar-page .appt-more>summary{
min-height:40px;
border-radius:10px;
}
.appointment-calendar-page .appt-next{
border-color:rgba(117,88,255,.38);
background:rgba(117,88,255,.12);
color:#c9c0ff;
}
.appointment-calendar-page .appt-next:hover{
border-color:#7558ff;
background:rgba(117,88,255,.19);
color:#fff;
}
/* Treatment popover */
.appointment-calendar-page .treatment-popover>summary{
display:flex;
align-items:center;
border:1px solid #293244;
background:#111722;
color:#d5dceb;
}
.appointment-calendar-page .treatment-popover[open]>summary{
border-color:rgba(117,88,255,.55);
background:rgba(117,88,255,.10);
}
.appointment-calendar-page .treatment-popover[open] form{
width:min(390px,calc(100vw - 32px));
padding:16px;
border-color:#30384a;
border-radius:15px;
background:#111721;
box-shadow:0 22px 60px rgba(0,0,0,.55);
}
.appointment-calendar-page .treatment-popover input,
.appointment-calendar-page .treatment-popover textarea{
border-color:#293142;
background:#090d14;
}
.appointment-calendar-page .treatment-popover input:focus,
.appointment-calendar-page .treatment-popover textarea:focus{
border-color:#7558ff;
outline:0;
box-shadow:0 0 0 3px rgba(117,88,255,.09);
}
/* Empty state */
.appointment-calendar-page .appt-empty{
min-height:220px;
padding:45px 24px;
text-align:center;
}
/* RTL */
[dir="rtl"] .appointment-calendar-page{
text-align:right;
}
[dir="rtl"] .appointment-calendar-page .calendar-time-axis span{
right:auto;
left:12px;
}
[dir="rtl"] .appointment-calendar-page .appt-more>div,
[dir="rtl"] .appointment-calendar-page .treatment-popover[open] form{
right:auto;
left:0;
}
[dir="rtl"] .appointment-calendar-page .appt-more button,
[dir="rtl"] .appointment-calendar-page .appt-action-menu button,
[dir="rtl"] .appointment-calendar-page .appt-action-menu a{
text-align:right;
}
/* Laptop */
@media (max-width:1180px){
.appointment-calendar-page .appt-row{
grid-template-columns:76px minmax(0,1fr);
}
.appointment-calendar-page .appt-actions{
grid-column:2;
justify-content:flex-start;
}
.appointment-calendar-page .calendar-day-nav>div{
min-width:160px;
}
}
/* Tablet */
@media (max-width:900px){
.appointment-calendar-page .appt-hero{
padding:22px;
}
.appointment-calendar-page .appt-metrics{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.appointment-calendar-page .calendar-toolbar{
align-items:stretch;
flex-direction:column;
}
.appointment-calendar-page .calendar-day-nav{
width:100%;
}
.appointment-calendar-page .calendar-day-nav>div{
flex:1;
}
.appointment-calendar-page .calendar-filter,
.appointment-calendar-page .calendar-filter select{
width:100%;
}
.appointment-calendar-page .visual-calendar{
--hour-height:74px;
}
}
/* Mobile */
@media (max-width:680px){
.appointment-calendar-page{
gap:14px;
}
.appointment-calendar-page .appt-hero{
align-items:stretch;
flex-direction:column;
gap:18px;
padding:20px 18px;
border-radius:19px;
}
.appointment-calendar-page .appt-hero h2{
font-size:clamp(1.75rem,9vw,2.35rem);
}
.appointment-calendar-page .appt-hero>.crm-primary{
width:100%;
justify-content:center;
}
.appointment-calendar-page .appt-metrics{
gap:9px;
}
.appointment-calendar-page .appt-metrics article{
padding:15px;
}
.appointment-calendar-page .appt-metrics strong{
font-size:1.45rem;
}
.appointment-calendar-page .calendar-toolbar{
padding:12px;
border-radius:15px;
}
.appointment-calendar-page .calendar-day-nav{
display:grid;
grid-template-columns:40px minmax(0,1fr) 40px;
gap:8px;
}
.appointment-calendar-page .calendar-day-nav>div{
min-width:0;
text-align:center;
}
.appointment-calendar-page .calendar-day-nav h3{
overflow:hidden;
font-size:.8rem;
text-overflow:ellipsis;
}
.appointment-calendar-page .calendar-day-nav .today-link{
grid-column:1/-1;
width:100%;
}
.appointment-calendar-page .visual-calendar-shell{
border-radius:15px;
}
.appointment-calendar-page .visual-calendar{
--hour-height:70px;
}
.appointment-calendar-page .appt-row{
grid-template-columns:1fr;
gap:12px;
padding:16px;
}
.appointment-calendar-page .appt-time{
flex-direction:row;
align-items:baseline;
gap:8px;
}
.appointment-calendar-page .appt-actions{
grid-column:1;
width:100%;
justify-content:flex-start;
flex-wrap:wrap;
}
.appointment-calendar-page .workflow-actions>*{
max-width:100%;
}
.appointment-calendar-page .treatment-popover[open] form{
position:fixed;
z-index:10000;
left:16px;
right:16px;
top:50%;
width:auto;
max-height:80vh;
overflow:auto;
transform:translateY(-50%);
}
[dir="rtl"] .appointment-calendar-page .treatment-popover[open] form{
left:16px;
right:16px;
}
}
/* Small mobile */
@media (max-width:440px){
.appointment-calendar-page .appt-metrics{
grid-template-columns:1fr 1fr;
}
.appointment-calendar-page .appt-metrics article{
min-height:86px;
}
.appointment-calendar-page .calendar-day-nav .eyebrow{
display:none;
}
.appointment-calendar-page .appt-status{
font-size:.53rem;
}
}
/* =========================================================
Amino Therapy — Appointments Final Polish v7.4
========================================================= */
/*
* Keep the operational queue close to the calendar.
* The complete working day remains accessible through
* the calendar's own vertical scroll.
*/
.appointment-calendar-page .visual-calendar-shell{
position:relative;
max-height:610px;
overflow-x:auto;
overflow-y:auto;
overscroll-behavior:contain;
scrollbar-width:thin;
scrollbar-color:#353e50 #0b0f16;
}
/* ---------- Scrollbar ---------- */
.appointment-calendar-page .visual-calendar-shell::-webkit-scrollbar{
width:9px;
height:9px;
}
.appointment-calendar-page .visual-calendar-shell::-webkit-scrollbar-track{
background:#0b0f16;
}
.appointment-calendar-page .visual-calendar-shell::-webkit-scrollbar-thumb{
border:2px solid #0b0f16;
border-radius:999px;
background:#353e50;
}
.appointment-calendar-page .visual-calendar-shell::-webkit-scrollbar-thumb:hover{
background:#4a556c;
}
.appointment-calendar-page .visual-calendar-shell::-webkit-scrollbar-corner{
background:#0b0f16;
}
/* ---------- Sticky calendar header ---------- */
.appointment-calendar-page .calendar-corner,
.appointment-calendar-page .calendar-staff-head{
position:sticky;
top:0;
z-index:15;
min-height:62px;
background:
linear-gradient(
180deg,
#141a24 0%,
#10161f 100%
);
box-shadow:
0 1px 0 rgba(255,255,255,.065),
0 8px 18px rgba(0,0,0,.16);
}
.appointment-calendar-page .calendar-corner{
z-index:20;
}
/* ---------- Slightly denser working day ---------- */
.appointment-calendar-page .visual-calendar{
--hour-height:72px;
}
/*
* Keep the first hour readable below the sticky header.
*/
.appointment-calendar-page .calendar-time-axis span{
z-index:2;
}
/* ---------- Better staff headers ---------- */
.appointment-calendar-page .calendar-staff-head{
padding-top:14px;
padding-bottom:12px;
}
.appointment-calendar-page .calendar-staff-head b{
display:block;
overflow:hidden;
color:#f1f4f9;
font-size:.75rem;
font-weight:850;
text-overflow:ellipsis;
white-space:nowrap;
}
.appointment-calendar-page .calendar-staff-head small{
display:block;
margin-top:3px;
overflow:hidden;
color:#707e94;
font-size:.58rem;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ---------- Appointment readability ---------- */
.appointment-calendar-page .calendar-event{
min-height:48px;
overflow:hidden;
}
.appointment-calendar-page .calendar-event strong{
color:#f4f6fa;
font-size:.69rem;
font-weight:900;
}
.appointment-calendar-page .calendar-customer{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.appointment-calendar-page .calendar-event > small{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ---------- Operational queue separation ---------- */
.appointment-calendar-page .workflow-board{
margin-top:4px;
}
.appointment-calendar-page .workflow-board::before{
content:"";
display:block;
height:2px;
border-radius:20px 20px 0 0;
background:
linear-gradient(
90deg,
transparent,
rgba(117,88,255,.42),
transparent
);
opacity:.55;
}
/* ---------- RTL scrollbar / calendar ---------- */
[dir="rtl"] .appointment-calendar-page .visual-calendar-shell{
direction:rtl;
}
[dir="rtl"] .appointment-calendar-page .visual-calendar{
direction:rtl;
}
/* Data inside the calendar can contain Arabic + English */
.appointment-calendar-page .calendar-event,
.appointment-calendar-page .calendar-staff-head{
unicode-bidi:plaintext;
}
/* ---------- Laptop ---------- */
@media (max-width:1180px){
.appointment-calendar-page .visual-calendar-shell{
max-height:560px;
}
.appointment-calendar-page .visual-calendar{
--hour-height:68px;
}
}
/* ---------- Tablet ---------- */
@media (max-width:900px){
.appointment-calendar-page .visual-calendar-shell{
max-height:520px;
}
.appointment-calendar-page .visual-calendar{
--hour-height:66px;
}
}
/* ---------- Mobile ---------- */
@media (max-width:680px){
.appointment-calendar-page .visual-calendar-shell{
max-height:480px;
border-radius:15px;
}
.appointment-calendar-page .visual-calendar{
--hour-height:64px;
}
.appointment-calendar-page .calendar-corner,
.appointment-calendar-page .calendar-staff-head{
min-height:58px;
}
.appointment-calendar-page .calendar-staff-head{
padding-top:12px;
padding-bottom:10px;
}
}
/* ---------- Small mobile ---------- */
@media (max-width:440px){
.appointment-calendar-page .visual-calendar-shell{
max-height:440px;
}
.appointment-calendar-page .visual-calendar{
--hour-height:62px;
}
}
/* =========================================================
Amino Therapy — Services UI Polish v7.5
========================================================= */
.service-page{
display:grid;
gap:18px;
width:100%;
min-width:0;
}
/* =========================================================
Hero
========================================================= */
.service-page .service-hero{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:end;
gap:28px;
margin:0;
padding:26px 28px;
overflow:hidden;
border:1px solid rgba(255,255,255,.07);
border-radius:24px;
background:
radial-gradient(
circle at 12% 0%,
rgba(117,88,255,.13),
transparent 36%
),
linear-gradient(
145deg,
rgba(18,22,31,.98),
rgba(11,14,20,.98)
);
}
.service-page .service-hero::after{
content:"";
position:absolute;
width:280px;
height:280px;
inset-inline-end:-120px;
top:-180px;
border-radius:50%;
background:rgba(117,88,255,.08);
filter:blur(10px);
pointer-events:none;
}
.service-page .service-hero > *{
position:relative;
z-index:1;
}
.service-page .service-hero > div{
min-width:0;
}
.service-page .service-hero .eyebrow{
display:block;
margin-bottom:10px;
color:#8f7cff;
font-size:.67rem;
font-weight:900;
letter-spacing:.12em;
}
.service-page .service-hero h2{
max-width:850px;
margin:0 0 10px;
color:#f7f8fb;
font-size:clamp(2rem,3.4vw,3.25rem);
font-weight:900;
line-height:1;
letter-spacing:-.045em;
}
[dir="rtl"] .service-page .service-hero h2{
letter-spacing:0;
}
.service-page .service-hero p{
max-width:780px;
margin:0;
color:#8d98ac;
font-size:.84rem;
line-height:1.75;
}
.service-page .service-hero > .crm-primary{
flex:0 0 auto;
min-height:44px;
padding-inline:18px;
border-radius:12px;
box-shadow:
0 10px 30px rgba(103,75,255,.16);
}
/* =========================================================
Service KPIs
========================================================= */
.service-page .service-metrics{
display:grid;
grid-template-columns:
repeat(5,minmax(0,1fr));
gap:12px;
margin:0;
}
.service-page .service-metrics article{
position:relative;
min-width:0;
min-height:105px;
padding:18px 19px;
overflow:hidden;
border:1px solid rgba(255,255,255,.065);
border-radius:17px;
background:
linear-gradient(
145deg,
#11161f,
#0d1118
);
transition:
transform .18s ease,
border-color .18s ease;
}
.service-page .service-metrics article:hover{
transform:translateY(-2px);
border-color:
rgba(117,88,255,.28);
}
.service-page .service-metrics article::before{
content:"";
position:absolute;
inset-inline-start:0;
top:17px;
bottom:17px;
width:2px;
border-radius:999px;
background:#7558ff;
opacity:.75;
}
.service-page .service-metrics article:nth-child(2)::before{
background:#45d99a;
}
.service-page .service-metrics article:nth-child(3)::before{
background:#f06d7c;
}
.service-page .service-metrics article:nth-child(4)::before{
background:#45c6ff;
}
.service-page .service-metrics article:nth-child(5)::before{
background:#f0b85a;
}
.service-page .service-metrics span{
display:block;
color:#818ca0;
font-size:.67rem;
font-weight:700;
}
.service-page .service-metrics strong{
display:block;
margin-top:13px;
color:#f5f7fb;
font-size:1.55rem;
font-weight:900;
line-height:1;
unicode-bidi:plaintext;
}
/* =========================================================
Service Editor
========================================================= */
.service-page .service-editor-card{
width:100%;
min-width:0;
overflow:hidden;
border:
1px solid rgba(117,88,255,.18);
border-radius:20px;
background:
linear-gradient(
145deg,
rgba(18,23,32,.99),
rgba(11,15,21,.99)
);
box-shadow:
0 18px 50px rgba(0,0,0,.13);
}
.service-page .service-editor-card .crm-table-head{
min-height:76px;
padding:18px 20px;
border-bottom:
1px solid rgba(255,255,255,.055);
background:
rgba(117,88,255,.025);
}
.service-page .service-editor-card .crm-table-head .eyebrow{
color:#8f7cff;
}
.service-page .service-editor-card .crm-table-head h3{
margin-top:4px;
color:#f1f4f9;
font-size:1rem;
}
/* =========================================================
Service Form
========================================================= */
.service-page .service-form{
display:grid;
grid-template-columns:
minmax(220px,2fr)
minmax(170px,1.25fr)
minmax(130px,.85fr)
minmax(130px,.85fr);
gap:16px;
padding:20px;
}
.service-page .service-form label{
display:grid;
align-content:start;
gap:8px;
min-width:0;
color:#8491a7;
font-size:.67rem;
font-weight:750;
}
.service-page .service-form input{
box-sizing:border-box;
width:100%;
min-width:0;
min-height:44px;
padding:0 13px;
border:1px solid #272f3f;
border-radius:11px;
background:#090d14;
color:#edf1f8;
font:inherit;
font-size:.74rem;
outline:none;
transition:
border-color .18s ease,
box-shadow .18s ease,
background .18s ease;
}
.service-page .service-form input:hover{
border-color:#323b4e;
}
.service-page .service-form input:focus{
border-color:#7558ff;
background:#0b0f17;
box-shadow:
0 0 0 3px rgba(117,88,255,.09);
}
.service-page .service-toggle{
grid-column:1/3;
display:flex !important;
align-items:center;
gap:10px !important;
min-height:44px;
padding:10px 13px;
border:
1px solid rgba(255,255,255,.06);
border-radius:11px;
background:
rgba(255,255,255,.018);
color:#d9dfeb !important;
}
.service-page .service-toggle input{
width:17px;
min-height:auto;
height:17px;
accent-color:#7558ff;
}
.service-page .service-form-actions{
grid-column:3/5;
display:flex;
align-items:center;
justify-content:flex-end;
gap:9px;
}
.service-page .service-form-actions .crm-primary,
.service-page .service-form-actions .crm-secondary{
min-height:42px;
padding-inline:16px;
border-radius:10px;
}
/* =========================================================
Filter Toolbar
========================================================= */
.service-page .service-filter{
display:grid;
grid-template-columns:
minmax(260px,1fr)
minmax(170px,210px)
minmax(150px,180px)
auto
auto;
align-items:stretch;
gap:9px;
margin:0;
padding:14px;
border:
1px solid rgba(255,255,255,.065);
border-radius:17px;
background:
linear-gradient(
145deg,
#11161f,
#0d1118
);
}
.service-page .service-filter input,
.service-page .service-filter select,
.service-page .service-filter button,
.service-page .service-filter > a{
box-sizing:border-box;
min-width:0;
min-height:43px;
border:1px solid #272f3f;
border-radius:11px;
background:#090d14;
color:#dce2ed;
font:inherit;
font-size:.7rem;
outline:none;
transition:
border-color .17s ease,
background .17s ease,
box-shadow .17s ease;
}
.service-page .service-filter input,
.service-page .service-filter select{
width:100%;
padding-inline:13px;
}
.service-page .service-filter input::placeholder{
color:#626e82;
}
.service-page .service-filter input:focus,
.service-page .service-filter select:focus{
border-color:#7558ff;
box-shadow:
0 0 0 3px rgba(117,88,255,.09);
}
.service-page .service-filter button{
padding-inline:17px;
cursor:pointer;
background:
rgba(117,88,255,.11);
border-color:
rgba(117,88,255,.30);
color:#c9c0ff;
font-weight:850;
}
.service-page .service-filter button:hover{
border-color:#7558ff;
background:
rgba(117,88,255,.18);
color:#fff;
}
.service-page .service-filter > a{
display:grid;
place-items:center;
padding-inline:15px;
text-decoration:none;
color:#8793a7;
}
.service-page .service-filter > a:hover{
background:
rgba(255,255,255,.04);
color:#d5dce8;
}
/* =========================================================
Catalog Card
========================================================= */
.service-page > .crm-table-card{
width:100%;
min-width:0;
overflow:hidden;
border:
1px solid rgba(255,255,255,.07);
border-radius:20px;
background:
linear-gradient(
155deg,
rgba(17,21,29,.98),
rgba(12,15,21,.99)
);
box-shadow:
0 16px 45px rgba(0,0,0,.10);
}
.service-page > .crm-table-card .crm-table-head{
min-height:78px;
padding:18px 20px;
border-bottom:
1px solid rgba(255,255,255,.055);
}
.service-page > .crm-table-card .crm-table-head h3{
margin:4px 0 0;
color:#f0f3f8;
font-size:1rem;
}
.service-page > .crm-table-card .crm-table-head small{
color:#748096;
font-size:.64rem;
}
/* =========================================================
Catalog Table
========================================================= */
.service-page .crm-table-scroll{
width:100%;
min-width:0;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
}
.service-page .service-table{
width:100%;
min-width:780px;
border-collapse:collapse;
}
.service-page .service-table th{
padding:13px 16px;
border-bottom:
1px solid rgba(255,255,255,.055);
color:#718099;
font-size:.60rem;
font-weight:850;
letter-spacing:.035em;
white-space:nowrap;
}
.service-page .service-table td{
padding:15px 16px;
border-bottom:
1px solid rgba(255,255,255,.045);
color:#c9d0dc;
font-size:.72rem;
vertical-align:middle;
transition:
background .16s ease;
}
.service-page .service-table tbody tr:last-child td{
border-bottom:0;
}
.service-page .service-table tbody tr:hover td{
background:
rgba(255,255,255,.024);
}
/* =========================================================
Service Identity
========================================================= */
.service-page .service-name-cell{
display:flex;
align-items:center;
gap:11px;
min-width:170px;
}
.service-page .service-name-cell > div{
display:grid;
gap:3px;
min-width:0;
}
.service-page .service-name-cell b{
overflow:hidden;
color:#f0f3f8;
font-size:.75rem;
font-weight:850;
text-overflow:ellipsis;
white-space:nowrap;
}
.service-page .service-name-cell small{
color:#68768c;
font-size:.60rem;
}
.service-page .service-avatar{
display:grid;
place-items:center;
flex:0 0 36px;
width:36px;
height:36px;
border:
1px solid rgba(151,130,255,.28);
border-radius:10px;
background:
linear-gradient(
145deg,
rgba(117,88,255,.95),
rgba(76,68,199,.95)
);
color:#fff;
font-size:.72rem;
font-weight:900;
box-shadow:
0 7px 18px rgba(94,72,220,.14);
}
/* =========================================================
Category
========================================================= */
.service-page .service-category-pill{
display:inline-flex;
align-items:center;
max-width:190px;
padding:6px 10px;
overflow:hidden;
border:
1px solid rgba(255,255,255,.07);
border-radius:999px;
background:
rgba(255,255,255,.035);
color:#b4bfd2;
font-size:.62rem;
text-overflow:ellipsis;
white-space:nowrap;
}
/* =========================================================
Status
========================================================= */
.service-page .crm-status{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:54px;
padding:6px 9px;
border-radius:999px;
font-size:.59rem;
font-weight:900;
line-height:1;
}
.service-page .crm-status.active{
border:
1px solid rgba(69,217,154,.13);
background:
rgba(69,217,154,.11);
color:#70e5b1;
}
.service-page .crm-status.inactive{
border:
1px solid rgba(240,109,124,.13);
background:
rgba(240,109,124,.10);
color:#ff95a1;
}
/* =========================================================
Actions
========================================================= */
.service-page .service-actions{
display:flex;
align-items:center;
gap:7px;
white-space:nowrap;
}
.service-page .service-actions form{
margin:0;
}
.service-page .service-actions a,
.service-page .service-actions button{
min-height:34px;
padding:0 10px;
border:1px solid #293244;
border-radius:9px;
background:#111722;
color:#cbd3e1;
font:inherit;
font-size:.62rem;
font-weight:750;
cursor:pointer;
text-decoration:none;
transition:
border-color .16s ease,
background .16s ease,
color .16s ease;
}
.service-page .service-actions a{
display:inline-flex;
align-items:center;
}
.service-page .service-actions a:hover,
.service-page .service-actions button:hover{
border-color:
rgba(117,88,255,.58);
background:
rgba(117,88,255,.10);
color:#fff;
}
/* =========================================================
Footnote
========================================================= */
.service-page .service-footnote{
margin:0;
padding:2px 5px 8px;
color:#717e93;
font-size:.64rem;
line-height:1.65;
}
/* =========================================================
RTL
========================================================= */
[dir="rtl"] .service-page{
text-align:right;
}
[dir="rtl"] .service-page .service-table th,
[dir="rtl"] .service-page .service-table td{
text-align:right;
}
[dir="rtl"] .service-page .service-filter input,
[dir="rtl"] .service-page .service-filter select,
[dir="rtl"] .service-page .service-form input{
text-align:right;
}
.service-page .service-table td,
.service-page .service-metrics strong{
unicode-bidi:plaintext;
}
/* =========================================================
Laptop
========================================================= */
@media(max-width:1180px){
.service-page .service-metrics{
grid-template-columns:
repeat(3,minmax(0,1fr));
}
.service-page .service-form{
grid-template-columns:
repeat(2,minmax(0,1fr));
}
.service-page .service-toggle{
grid-column:auto;
}
.service-page .service-form-actions{
grid-column:1/-1;
}
.service-page .service-filter{
grid-template-columns:
minmax(220px,1fr)
minmax(150px,.6fr)
minmax(140px,.5fr)
auto
auto;
}
}
/* =========================================================
Tablet
========================================================= */
@media(max-width:900px){
.service-page .service-hero{
padding:22px;
}
.service-page .service-metrics{
grid-template-columns:
repeat(2,minmax(0,1fr));
}
.service-page .service-filter{
grid-template-columns:
1fr 1fr;
}
.service-page .service-filter input{
grid-column:1/-1;
}
}
/* =========================================================
Mobile
========================================================= */
@media(max-width:680px){
.service-page{
gap:14px;
}
.service-page .service-hero{
grid-template-columns:1fr;
align-items:stretch;
gap:18px;
padding:20px 18px;
border-radius:19px;
}
.service-page .service-hero h2{
font-size:
clamp(1.75rem,9vw,2.35rem);
}
.service-page .service-hero > .crm-primary{
width:100%;
justify-content:center;
}
.service-page .service-metrics{
gap:9px;
}
.service-page .service-metrics article{
min-height:92px;
padding:15px;
}
.service-page .service-metrics strong{
font-size:1.35rem;
}
.service-page .service-form{
grid-template-columns:1fr;
padding:16px;
}
.service-page .service-toggle,
.service-page .service-form-actions{
grid-column:auto;
}
.service-page .service-form-actions{
align-items:stretch;
flex-direction:column-reverse;
}
.service-page .service-form-actions > *{
width:100%;
justify-content:center;
text-align:center;
}
.service-page .service-filter{
grid-template-columns:1fr;
padding:12px;
}
.service-page .service-filter input{
grid-column:auto;
}
.service-page .service-filter button,
.service-page .service-filter > a{
width:100%;
}
.service-page > .crm-table-card{
border-radius:16px;
}
.service-page .service-table{
min-width:720px;
}
}
/* =========================================================
Small phones
========================================================= */
@media(max-width:440px){
.service-page .service-metrics{
grid-template-columns:
repeat(2,minmax(0,1fr));
}
.service-page .service-metrics article{
min-height:86px;
padding:13px;
}
.service-page .service-metrics span{
font-size:.60rem;
}
.service-page .service-metrics strong{
font-size:1.2rem;
}
}
/* =========================================================
Amino Therapy — Inventory Notifications v7.7
========================================================= */
.notification-menu{
position:relative;
flex:0 0 auto;
}
.notification-menu > summary{
list-style:none;
}
.notification-menu > summary::-webkit-details-marker{
display:none;
}
.notification-trigger{
position:relative;
}
.notification-menu[open] .notification-trigger{
color:#fff;
border-color:#7557ff45;
background:#7557ff12;
box-shadow:0 0 0 3px #7557ff0c;
}
.notification-count{
position:absolute;
inset-inline-end:-5px;
top:-6px;
min-width:19px;
height:19px;
padding:0 5px;
display:grid;
place-items:center;
border:2px solid #0a0d12;
border-radius:999px;
background:#ff596f;
color:#fff;
font-size:.58rem;
line-height:1;
font-weight:950;
box-shadow:0 5px 16px #ff425c38;
}
.notification-dropdown{
position:absolute;
z-index:100;
inset-inline-end:0;
top:calc(100% + 12px);
width:min(390px,calc(100vw - 28px));
overflow:hidden;
border:1px solid #ffffff12;
border-radius:20px;
background:
radial-gradient(circle at 100% 0%,#7557ff12,transparent 38%),
#11151d;
box-shadow:0 28px 90px #000b;
}
.notification-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:17px 18px;
border-bottom:1px solid #ffffff0a;
}
.notification-head > div{
min-width:0;
display:flex;
flex-direction:column;
}
.notification-head strong{
color:#f2f5fa;
font-size:.82rem;
}
.notification-head small{
margin-top:4px;
color:#68758a;
font-size:.62rem;
}
.notification-head > a{
flex:0 0 auto;
color:#aa9cff;
text-decoration:none;
font-size:.64rem;
font-weight:850;
}
.notification-head > a:hover{
color:#c4baff;
}
.notification-list{
max-height:390px;
overflow-y:auto;
overscroll-behavior:contain;
}
.notification-list::-webkit-scrollbar{
width:7px;
}
.notification-list::-webkit-scrollbar-thumb{
border-radius:999px;
background:#ffffff14;
}
.notification-item{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:11px;
align-items:flex-start;
padding:14px 18px;
border-bottom:1px solid #ffffff08;
color:#fff;
text-decoration:none;
transition:
background .18s ease,
border-color .18s ease;
}
.notification-item:hover{
background:#ffffff035;
}
.notification-status-dot{
width:9px;
height:9px;
margin-top:5px;
border-radius:50%;
flex:0 0 auto;
}
.notification-item.is-out .notification-status-dot{
background:#ff6076;
box-shadow:0 0 0 5px #ff607611;
}
.notification-item.is-low .notification-status-dot{
background:#ffb84d;
box-shadow:0 0 0 5px #ffb84d11;
}
.notification-copy{
min-width:0;
display:flex;
flex-direction:column;
}
.notification-copy > b{
overflow:hidden;
color:#eef2f8;
font-size:.74rem;
white-space:nowrap;
text-overflow:ellipsis;
}
.notification-copy > small{
margin-top:4px;
font-size:.61rem;
font-weight:850;
}
.notification-item.is-out .notification-copy > small{
color:#ff8797;
}
.notification-item.is-low .notification-copy > small{
color:#ffc56d;
}
.notification-copy > span{
margin-top:7px;
color:#69768b;
font-size:.6rem;
unicode-bidi:plaintext;
}
.notification-copy > span strong{
color:#aeb8c8;
font-size:inherit;
}
.notification-empty{
min-height:190px;
padding:28px 22px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
}
.notification-empty > span{
width:42px;
height:42px;
display:grid;
place-items:center;
margin-bottom:12px;
border:1px solid #42d99a2b;
border-radius:14px;
background:#42d99a0d;
color:#68e4b0;
font-size:1rem;
font-weight:950;
}
.notification-empty b{
color:#dfe5ee;
font-size:.76rem;
}
.notification-empty small{
max-width:270px;
margin-top:6px;
color:#657187;
font-size:.62rem;
line-height:1.6;
}
.notification-summary{
display:flex;
align-items:center;
gap:8px;
padding:11px 18px;
border-top:1px solid #ffffff09;
background:#090c1155;
}
.notification-summary span{
display:inline-flex;
align-items:center;
gap:6px;
padding:5px 8px;
border:1px solid #ffffff0c;
border-radius:999px;
color:#778399;
background:#ffffff035;
font-size:.59rem;
}
.notification-summary span:first-child b{
color:#ff8797;
}
.notification-summary span:last-child b{
color:#ffc56d;
}
html[dir="rtl"] .notification-head,
html[dir="rtl"] .notification-copy{
text-align:right;
}
html[dir="ltr"] .notification-head,
html[dir="ltr"] .notification-copy{
text-align:left;
}
/* Keep the inventory bell visible on mobile. */
@media(max-width:700px){
.notification-menu .topbar-icon-button{
display:grid;
}
.notification-dropdown{
position:fixed;
top:76px;
inset-inline-end:12px;
width:calc(100vw - 24px);
max-width:390px;
max-height:calc(100vh - 94px);
}
.notification-list{
max-height:calc(100vh - 245px);
}
}
@media(max-width:440px){
.notification-dropdown{
top:70px;
inset-inline-end:8px;
width:calc(100vw - 16px);
border-radius:17px;
}
.notification-head,
.notification-item{
padding-inline:14px;
}
}
/* =========================================================
Amino Therapy — Inventory Notifications v7.7
========================================================= */
.notification-menu{
position:relative;
flex:0 0 auto;
}
.notification-menu > summary{
list-style:none;
}
.notification-menu > summary::-webkit-details-marker{
display:none;
}
.notification-trigger{
position:relative;
}
.notification-menu[open] .notification-trigger{
color:#fff;
border-color:#7557ff45;
background:#7557ff12;
box-shadow:0 0 0 3px #7557ff0c;
}
.notification-count{
position:absolute;
inset-inline-end:-5px;
top:-6px;
min-width:19px;
height:19px;
padding:0 5px;
display:grid;
place-items:center;
border:2px solid #0a0d12;
border-radius:999px;
background:#ff596f;
color:#fff;
font-size:.58rem;
line-height:1;
font-weight:950;
box-shadow:0 5px 16px #ff425c38;
}
.notification-dropdown{
position:absolute;
z-index:100;
inset-inline-end:0;
top:calc(100% + 12px);
width:min(390px,calc(100vw - 28px));
overflow:hidden;
border:1px solid #ffffff12;
border-radius:20px;
background:
radial-gradient(circle at 100% 0%,#7557ff12,transparent 38%),
#11151d;
box-shadow:0 28px 90px #000b;
}
.notification-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:17px 18px;
border-bottom:1px solid #ffffff0a;
}
.notification-head > div{
min-width:0;
display:flex;
flex-direction:column;
}
.notification-head strong{
color:#f2f5fa;
font-size:.82rem;
}
.notification-head small{
margin-top:4px;
color:#68758a;
font-size:.62rem;
}
.notification-head > a{
flex:0 0 auto;
color:#aa9cff;
text-decoration:none;
font-size:.64rem;
font-weight:850;
}
.notification-head > a:hover{
color:#c4baff;
}
.notification-list{
max-height:390px;
overflow-y:auto;
overscroll-behavior:contain;
}
.notification-list::-webkit-scrollbar{
width:7px;
}
.notification-list::-webkit-scrollbar-thumb{
border-radius:999px;
background:#ffffff14;
}
.notification-item{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:11px;
align-items:flex-start;
padding:14px 18px;
border-bottom:1px solid #ffffff08;
color:#fff;
text-decoration:none;
transition:
background .18s ease,
border-color .18s ease;
}
.notification-item:hover{
background:#ffffff035;
}
.notification-status-dot{
width:9px;
height:9px;
margin-top:5px;
border-radius:50%;
flex:0 0 auto;
}
.notification-item.is-out .notification-status-dot{
background:#ff6076;
box-shadow:0 0 0 5px #ff607611;
}
.notification-item.is-low .notification-status-dot{
background:#ffb84d;
box-shadow:0 0 0 5px #ffb84d11;
}
.notification-copy{
min-width:0;
display:flex;
flex-direction:column;
}
.notification-copy > b{
overflow:hidden;
color:#eef2f8;
font-size:.74rem;
white-space:nowrap;
text-overflow:ellipsis;
}
.notification-copy > small{
margin-top:4px;
font-size:.61rem;
font-weight:850;
}
.notification-item.is-out .notification-copy > small{
color:#ff8797;
}
.notification-item.is-low .notification-copy > small{
color:#ffc56d;
}
.notification-copy > span{
margin-top:7px;
color:#69768b;
font-size:.6rem;
unicode-bidi:plaintext;
}
.notification-copy > span strong{
color:#aeb8c8;
font-size:inherit;
}
.notification-empty{
min-height:190px;
padding:28px 22px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
}
.notification-empty > span{
width:42px;
height:42px;
display:grid;
place-items:center;
margin-bottom:12px;
border:1px solid #42d99a2b;
border-radius:14px;
background:#42d99a0d;
color:#68e4b0;
font-size:1rem;
font-weight:950;
}
.notification-empty b{
color:#dfe5ee;
font-size:.76rem;
}
.notification-empty small{
max-width:270px;
margin-top:6px;
color:#657187;
font-size:.62rem;
line-height:1.6;
}
.notification-summary{
display:flex;
align-items:center;
gap:8px;
padding:11px 18px;
border-top:1px solid #ffffff09;
background:#090c1155;
}
.notification-summary span{
display:inline-flex;
align-items:center;
gap:6px;
padding:5px 8px;
border:1px solid #ffffff0c;
border-radius:999px;
color:#778399;
background:#ffffff035;
font-size:.59rem;
}
.notification-summary span:first-child b{
color:#ff8797;
}
.notification-summary span:last-child b{
color:#ffc56d;
}
html[dir="rtl"] .notification-head,
html[dir="rtl"] .notification-copy{
text-align:right;
}
html[dir="ltr"] .notification-head,
html[dir="ltr"] .notification-copy{
text-align:left;
}
/* Keep the inventory bell visible on mobile. */
@media(max-width:700px){
.notification-menu .topbar-icon-button{
display:grid;
}
.notification-dropdown{
position:fixed;
top:76px;
inset-inline-end:12px;
width:calc(100vw - 24px);
max-width:390px;
max-height:calc(100vh - 94px);
}
.notification-list{
max-height:calc(100vh - 245px);
}
}
@media(max-width:440px){
.notification-dropdown{
top:70px;
inset-inline-end:8px;
width:calc(100vw - 16px);
border-radius:17px;
}
.notification-head,
.notification-item{
padding-inline:14px;
}
}
/* =========================================================
Amino Therapy — Profile UI v7.8
========================================================= */
.profile-page{
width:100%;
max-width:1440px;
margin-inline:auto;
}
.profile-hero{
position:relative;
overflow:hidden;
display:flex;
align-items:center;
justify-content:space-between;
gap:28px;
padding:28px;
margin-bottom:20px;
border:1px solid #ffffff0d;
border-radius:24px;
background:
radial-gradient(circle at 85% 10%,#7258ff20,transparent 34%),
linear-gradient(145deg,#131820,#0d1117);
box-shadow:0 22px 60px #00000024;
}
.profile-hero::after{
content:"";
position:absolute;
width:180px;
height:180px;
inset-inline-end:-70px;
bottom:-110px;
border-radius:50%;
background:#7056ff12;
pointer-events:none;
}
.profile-hero > div{
position:relative;
z-index:1;
}
.profile-eyebrow{
display:block;
margin-bottom:8px;
color:#8d7cff;
font-size:.64rem;
font-weight:900;
letter-spacing:.12em;
}
.profile-hero h1{
margin:0;
color:#f4f6fb;
font-size:clamp(1.45rem,2.5vw,2rem);
line-height:1.2;
}
.profile-hero p{
max-width:620px;
margin:9px 0 0;
color:#7c899d;
font-size:.75rem;
line-height:1.7;
}
.profile-identity{
flex:0 0 auto;
min-width:245px;
display:flex;
align-items:center;
gap:13px;
padding:13px 15px;
border:1px solid #ffffff0d;
border-radius:18px;
background:#090c1180;
backdrop-filter:blur(10px);
}
.profile-avatar-large{
width:48px;
height:48px;
flex:0 0 48px;
display:grid;
place-items:center;
border:1px solid #8978ff55;
border-radius:15px;
background:linear-gradient(145deg,#735dff,#4b61df);
color:#fff;
font-size:.95rem;
font-weight:950;
box-shadow:0 10px 26px #5c4cff28;
}
.profile-identity > div{
min-width:0;
display:flex;
flex-direction:column;
}
.profile-identity strong{
overflow:hidden;
color:#edf1f7;
font-size:.76rem;
white-space:nowrap;
text-overflow:ellipsis;
}
.profile-identity small{
margin-top:4px;
color:#6f7b8f;
font-size:.62rem;
unicode-bidi:plaintext;
}
.profile-alert{
display:flex;
align-items:center;
gap:10px;
padding:12px 15px;
margin-bottom:18px;
border:1px solid;
border-radius:14px;
font-size:.68rem;
}
.profile-alert strong{
flex:0 0 auto;
}
.profile-alert.is-success{
border-color:#41d99a25;
background:#41d99a0b;
color:#8ae9be;
}
.profile-alert.is-error{
border-color:#ff61772a;
background:#ff61770b;
color:#ff9aa8;
}
.profile-grid{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:18px;
align-items:start;
}
.profile-card{
overflow:hidden;
border:1px solid #ffffff0d;
border-radius:21px;
background:#11161e;
box-shadow:0 18px 50px #0000001c;
}
.profile-card-head{
display:flex;
align-items:flex-start;
gap:12px;
padding:19px 20px;
border-bottom:1px solid #ffffff09;
background:linear-gradient(180deg,#ffffff025,transparent);
}
.profile-card-icon{
width:38px;
height:38px;
flex:0 0 38px;
display:grid;
place-items:center;
border:1px solid #765eff2d;
border-radius:12px;
background:#765eff0c;
color:#a99cff;
font-size:.69rem;
font-weight:950;
}
.profile-card-head > div{
min-width:0;
}
.profile-card-head h2{
margin:1px 0 0;
color:#edf1f7;
font-size:.84rem;
}
.profile-card-head p{
margin:6px 0 0;
color:#6c788c;
font-size:.64rem;
line-height:1.6;
}
.profile-form{
padding:20px;
}
.profile-field{
display:block;
margin-bottom:16px;
}
.profile-field > span{
display:block;
margin-bottom:7px;
color:#aab3c1;
font-size:.64rem;
font-weight:800;
}
.profile-field input{
width:100%;
min-height:43px;
padding:0 13px;
border:1px solid #ffffff10;
outline:none;
border-radius:11px;
background:#0b0f15;
color:#edf1f7;
font:inherit;
font-size:.72rem;
transition:
border-color .18s ease,
box-shadow .18s ease,
background .18s ease;
}
.profile-field input:hover{
border-color:#ffffff19;
}
.profile-field input:focus{
border-color:#7863ff80;
background:#0d1118;
box-shadow:0 0 0 3px #735cff0d;
}
.profile-field input[type="password"]{
direction:ltr;
text-align:start;
}
.profile-field > small{
display:block;
margin-top:6px;
color:#626f83;
font-size:.58rem;
}
.profile-readonly-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:4px;
}
.profile-readonly-grid > div{
min-width:0;
padding:12px 13px;
border:1px solid #ffffff0b;
border-radius:11px;
background:#0b0f145e;
}
.profile-readonly-grid span{
display:block;
margin-bottom:5px;
color:#657185;
font-size:.57rem;
}
.profile-readonly-grid strong{
display:block;
overflow:hidden;
color:#b8c1cf;
font-size:.66rem;
font-weight:750;
white-space:nowrap;
text-overflow:ellipsis;
unicode-bidi:plaintext;
}
.profile-security-note{
display:flex;
flex-direction:column;
gap:4px;
margin-top:2px;
padding:11px 13px;
border:1px solid #6e59ff1e;
border-radius:11px;
background:#6e59ff08;
}
.profile-security-note strong{
color:#a99cff;
font-size:.61rem;
}
.profile-security-note span{
color:#68758a;
font-size:.58rem;
line-height:1.55;
}
.profile-actions{
display:flex;
justify-content:flex-end;
margin-top:19px;
padding-top:16px;
border-top:1px solid #ffffff08;
}
.profile-primary-button{
min-height:40px;
padding:0 18px;
border:1px solid #7966ff4a;
border-radius:11px;
background:linear-gradient(135deg,#725bff,#5365e8);
color:#fff;
cursor:pointer;
font:inherit;
font-size:.65rem;
font-weight:900;
box-shadow:0 9px 24px #5c4cff1c;
transition:
transform .18s ease,
box-shadow .18s ease,
filter .18s ease;
}
.profile-primary-button:hover{
transform:translateY(-1px);
filter:brightness(1.06);
box-shadow:0 13px 30px #5c4cff28;
}
.profile-primary-button:active{
transform:translateY(0);
}
/* Profile entry inside user dropdown */
.user-dropdown > a[href="/app/profile"]{
position:relative;
}
.user-dropdown > a[href="/app/profile"]::before{
content:"";
width:6px;
height:6px;
margin-inline-end:8px;
display:inline-block;
vertical-align:middle;
border-radius:50%;
background:#8c7aff;
box-shadow:0 0 0 4px #8c7aff0d;
}
html[dir="rtl"] .profile-page,
html[dir="rtl"] .profile-card,
html[dir="rtl"] .profile-hero{
text-align:right;
}
html[dir="ltr"] .profile-page,
html[dir="ltr"] .profile-card,
html[dir="ltr"] .profile-hero{
text-align:left;
}
@media(max-width:1050px){
.profile-grid{
grid-template-columns:1fr;
}
}
@media(max-width:700px){
.profile-hero{
align-items:stretch;
flex-direction:column;
padding:20px;
border-radius:19px;
}
.profile-identity{
width:100%;
min-width:0;
}
.profile-card{
border-radius:17px;
}
.profile-card-head,
.profile-form{
padding:16px;
}
.profile-alert{
align-items:flex-start;
flex-direction:column;
gap:4px;
}
}
@media(max-width:440px){
.profile-readonly-grid{
grid-template-columns:1fr;
}
.profile-actions{
display:block;
}
.profile-primary-button{
width:100%;
}
}
/* =========================================================
Amino Therapy — Multi-Company Admin UI v10.1D
========================================================= */
.company-assignment-block {
grid-column: 1 / -1;
display: grid;
gap: 18px;
padding: 20px;
border: 1px solid rgba(148, 163, 184, .18);
border-radius: 20px;
background: rgba(15, 23, 42, .32);
}
.company-assignment-head,
.company-secondary-access {
display: grid;
gap: 6px;
}
.company-assignment-head small,
.company-secondary-access > small {
opacity: .72;
line-height: 1.6;
}
.company-choice-grid,
.company-secondary-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.company-choice {
position: relative;
cursor: pointer;
}
.company-choice > input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.company-choice-card {
min-height: 112px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
padding: 18px;
border: 1px solid rgba(148, 163, 184, .2);
border-radius: 18px;
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease,
background .18s ease;
}
.company-choice:hover .company-choice-card {
transform: translateY(-2px);
}
.company-choice > input:checked + .company-choice-card {
border-color: currentColor;
box-shadow: 0 0 0 3px rgba(148, 163, 184, .12);
background: rgba(255, 255, 255, .055);
}
.company-choice-code {
width: fit-content;
padding: 4px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
background: rgba(255, 255, 255, .08);
}
.company-choice--amino .company-choice-card {
color: #d6b36a;
}
.company-choice--raghad .company-choice-card {
color: #b8d8c1;
}
.company-secondary-access {
padding-top: 16px;
border-top: 1px solid rgba(148, 163, 184, .14);
}
.company-secondary-check {
display: flex;
align-items: center;
gap: 10px;
min-height: 64px;
padding: 12px 14px;
border: 1px solid rgba(148, 163, 184, .16);
border-radius: 14px;
cursor: pointer;
}
.company-secondary-check span {
display: grid;
gap: 2px;
}
.company-secondary-check small {
opacity: .62;
}
.user-company-access {
display: grid;
gap: 10px;
margin: 14px 0;
padding: 12px 14px;
border-radius: 14px;
background: rgba(148, 163, 184, .07);
}
.user-company-primary {
font-size: 13px;
}
.user-company-missing {
font-size: 13px;
font-weight: 700;
color: #f59e0b;
}
.user-company-badges {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.company-mini-badge {
display: inline-flex;
align-items: center;
padding: 5px 9px;
border: 1px solid rgba(148, 163, 184, .18);
border-radius: 999px;
font-size: 11px;
font-weight: 700;
}
.company-mini-badge--amino {
color: #d6b36a;
}
.company-mini-badge--raghad {
color: #b8d8c1;
}
@media (max-width: 700px) {
.company-choice-grid,
.company-secondary-grid {
grid-template-columns: 1fr;
}
.company-assignment-block {
padding: 15px;
border-radius: 16px;
}
}
/* =========================================================
Amino Therapy — Multi-Company Selector Guard v10.1D-3C
========================================================= */
.company-secondary-check.is-primary-disabled {
opacity: .42;
cursor: not-allowed;
}
.company-secondary-check.is-primary-disabled input {
cursor: not-allowed;
}
.perm-check.is-context-disabled {
opacity: .45;
}
.perm-check.is-context-disabled input {
cursor: not-allowed;
}
/* =========================================================
Raghad Organics — Official Brand Mark v10.2A-R3
========================================================= */
body[data-company-theme="raghad"] .raghad-brand-mark{
width:62px;
height:48px;
padding:5px 7px;
border-radius:14px;
background:#f8f5ed;
border:1px solid rgba(31,107,69,.14);
box-shadow:0 10px 28px rgba(10,42,27,.12);
overflow:hidden;
flex:0 0 auto;
}
body[data-company-theme="raghad"] .raghad-brand-mark img{
display:block;
width:100%;
height:100%;
object-fit:contain;
}
body[data-company-theme="raghad"] .sidebar-brand{
gap:13px;
}
body[data-company-theme="raghad"] .brand-copy b{
letter-spacing:-.015em;
}
/* =========================================================
Raghad Organics — Organic Shell Theme v10.2B-1
COMPANY SCOPED — DOES NOT MODIFY AMINO
========================================================= */
body[data-company-theme="raghad"]{
--raghad-bg:#f4f0e7;
--raghad-surface:#fffdf8;
--raghad-surface-soft:#f8f5ed;
--raghad-sidebar:#fbf8f0;
--raghad-green:#246345;
--raghad-green-dark:#173f2e;
--raghad-green-soft:#e5eee7;
--raghad-sage:#8fa993;
--raghad-line:#dedbd0;
--raghad-text:#20342b;
--raghad-muted:#77837c;
background:
radial-gradient(
circle at 82% 8%,
rgba(132,163,135,.12),
transparent 28%
),
linear-gradient(
135deg,
#f8f5ed 0%,
#f1eee5 100%
);
color:var(--raghad-text);
}
/* Main shell */
body[data-company-theme="raghad"] .app-layout{
background:transparent;
}
body[data-company-theme="raghad"] .app-main{
background:transparent;
color:var(--raghad-text);
}
body[data-company-theme="raghad"] .app-content{
color:var(--raghad-text);
}
/* Sidebar */
body[data-company-theme="raghad"] .app-sidebar{
background:
linear-gradient(
180deg,
rgba(255,253,248,.98),
rgba(247,244,235,.98)
);
border-color:rgba(42,79,59,.10);
box-shadow:
10px 0 38px rgba(42,58,48,.05);
backdrop-filter:blur(20px);
}
html[dir="rtl"]
body[data-company-theme="raghad"]
.app-sidebar{
box-shadow:
-10px 0 38px rgba(42,58,48,.05);
}
body[data-company-theme="raghad"]
.sidebar-brand{
color:var(--raghad-green-dark);
}
body[data-company-theme="raghad"]
.brand-copy b{
color:var(--raghad-green-dark);
font-weight:900;
}
body[data-company-theme="raghad"]
.brand-copy small{
color:#829287;
}
/* Collapse */
body[data-company-theme="raghad"]
.sidebar-collapse{
color:#607269;
background:#f2eee4;
border-color:#ded9cd;
}
body[data-company-theme="raghad"]
.sidebar-collapse:hover{
color:var(--raghad-green);
border-color:#b9c9bc;
background:#eaf0e9;
}
/* Navigation */
body[data-company-theme="raghad"]
.nav-group-label{
color:#99a49d;
}
body[data-company-theme="raghad"]
.nav-item{
color:#68786f;
border-color:transparent;
}
body[data-company-theme="raghad"]
.nav-item:hover{
color:var(--raghad-green-dark);
background:#edf2ec;
border-color:#e0e8e0;
}
body[data-company-theme="raghad"]
.nav-item.is-active{
color:#fff;
background:
linear-gradient(
135deg,
#28694a,
#1d533a
);
border-color:#28694a;
box-shadow:
0 12px 26px rgba(31,92,62,.18);
}
body[data-company-theme="raghad"]
.nav-item.is-active .nav-icon{
color:#fff;
}
body[data-company-theme="raghad"]
.nav-icon{
color:#789083;
}
/* Secure session */
body[data-company-theme="raghad"]
.sidebar-security{
color:#607068;
background:#f3f0e7;
border-color:#e2ddd1;
}
body[data-company-theme="raghad"]
.sidebar-security b{
color:#43584d;
}
body[data-company-theme="raghad"]
.sidebar-security small{
color:#8b978f;
}
body[data-company-theme="raghad"]
.security-dot{
background:#4a9a69;
box-shadow:
0 0 0 4px rgba(74,154,105,.10);
}
/* Topbar */
body[data-company-theme="raghad"]
.app-topbar{
background:rgba(255,253,248,.88);
border-color:rgba(43,76,59,.09);
box-shadow:
0 8px 28px rgba(44,60,50,.035);
backdrop-filter:blur(18px);
}
body[data-company-theme="raghad"]
.topbar-left .eyebrow{
color:#7f9989;
}
body[data-company-theme="raghad"]
.topbar-left h1{
color:var(--raghad-green-dark);
}
/* Generic topbar controls */
body[data-company-theme="raghad"]
.topbar-icon-button,
body[data-company-theme="raghad"]
.shell-language-trigger{
color:#64776c;
background:#f7f4ec;
border-color:#dedbd1;
}
body[data-company-theme="raghad"]
.topbar-icon-button:hover,
body[data-company-theme="raghad"]
.shell-language-trigger:hover{
color:var(--raghad-green);
background:#edf2ec;
border-color:#cbd8cd;
}
/* Language dropdown */
body[data-company-theme="raghad"]
.shell-language-dropdown{
background:#fffdf8;
border-color:#dedbd1;
box-shadow:
0 22px 60px rgba(39,55,46,.14);
}
body[data-company-theme="raghad"]
.shell-language-dropdown a{
color:#53655b;
}
body[data-company-theme="raghad"]
.shell-language-dropdown a:hover{
background:#f1f4ed;
color:var(--raghad-green-dark);
}
body[data-company-theme="raghad"]
.shell-language-dropdown a.is-active{
background:#e8efe8;
color:var(--raghad-green);
}
body[data-company-theme="raghad"]
.language-code{
background:#edf1e9;
color:var(--raghad-green);
}
/* User */
body[data-company-theme="raghad"]
.user-menu-button{
color:#41564b;
background:#f7f4ec;
border-color:#dedbd1;
}
body[data-company-theme="raghad"]
.user-menu-button:hover{
background:#eff3ed;
border-color:#cad6cb;
}
body[data-company-theme="raghad"]
.user-avatar{
color:#fff;
background:
linear-gradient(
145deg,
#3b7957,
#1d5339
);
box-shadow:
0 8px 20px rgba(34,94,62,.18);
}
body[data-company-theme="raghad"]
.user-menu-copy b{
color:#31473b;
}
body[data-company-theme="raghad"]
.user-menu-copy small,
body[data-company-theme="raghad"]
.user-chevron{
color:#87938c;
}
body[data-company-theme="raghad"]
.user-dropdown{
background:#fffdf8;
border-color:#dedbd1;
box-shadow:
0 24px 60px rgba(38,54,45,.16);
}
body[data-company-theme="raghad"]
.user-dropdown a,
body[data-company-theme="raghad"]
.user-dropdown button{
color:#53655b;
}
body[data-company-theme="raghad"]
.user-dropdown a:hover,
body[data-company-theme="raghad"]
.user-dropdown button:hover{
color:var(--raghad-green-dark);
background:#edf2ec;
}
/* Notifications */
body[data-company-theme="raghad"]
.notification-dropdown{
background:#fffdf8;
border-color:#dedbd1;
color:#344a3e;
box-shadow:
0 24px 65px rgba(39,55,46,.16);
}
body[data-company-theme="raghad"]
.notification-head{
border-color:#ebe7dc;
}
body[data-company-theme="raghad"]
.notification-head strong{
color:#294235;
}
body[data-company-theme="raghad"]
.notification-head small{
color:#8a978f;
}
body[data-company-theme="raghad"]
.notification-head a{
color:var(--raghad-green);
}
body[data-company-theme="raghad"]
.notification-item{
border-color:#ebe7dd;
color:#3c5045;
}
body[data-company-theme="raghad"]
.notification-item:hover{
background:#f4f6f0;
}
body[data-company-theme="raghad"]
.notification-copy b{
color:#30473a;
}
body[data-company-theme="raghad"]
.notification-copy small,
body[data-company-theme="raghad"]
.notification-copy span{
color:#849088;
}
body[data-company-theme="raghad"]
.notification-empty{
color:#718078;
}
body[data-company-theme="raghad"]
.notification-summary{
border-color:#ebe7dd;
color:#748078;
}
/* Footer */
body[data-company-theme="raghad"]
.app-footer{
color:#7c8981;
border-color:rgba(47,78,61,.09);
background:rgba(248,245,237,.56);
}
body[data-company-theme="raghad"]
.footer-brand strong{
color:#385144;
}
body[data-company-theme="raghad"]
.footer-brand span,
body[data-company-theme="raghad"]
.footer-legal{
color:#89958e;
}
body[data-company-theme="raghad"]
.footer-designer{
color:#536f5f;
}
/* Mobile drawer */
@media(max-width:960px){
body[data-company-theme="raghad"]
.app-sidebar{
box-shadow:
20px 0 60px rgba(31,49,39,.18);
}
html[dir="rtl"]
body[data-company-theme="raghad"]
.app-sidebar{
box-shadow:
-20px 0 60px rgba(31,49,39,.18);
}
body[data-company-theme="raghad"]
.sidebar-overlay{
background:rgba(30,43,35,.35);
}
}
/* =========================================================
Amino Therapy / Raghad Organics
Final Dual-Brand Dashboard Design System v10.2B-2B
========================================================= */
/* ---------------------------------------------------------
Shared dashboard geometry
--------------------------------------------------------- */
body[data-company-theme] .app-content{
position:relative;
}
body[data-company-theme] .dashboard-hero{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) 124px;
align-items:end;
gap:32px;
margin:0 0 24px;
padding:28px 4px 8px;
}
body[data-company-theme] .dashboard-hero-copy{
min-width:0;
}
body[data-company-theme] .dashboard-hero .eyebrow{
display:block;
margin-bottom:14px;
font-size:10px;
line-height:1;
font-weight:800;
letter-spacing:.12em;
}
body[data-company-theme] .dashboard-hero h2{
margin:0;
max-width:1050px;
font-size:clamp(42px,5vw,72px);
line-height:.96;
letter-spacing:-.055em;
font-weight:900;
}
body[data-company-theme] .dashboard-hero p{
margin:16px 0 0;
max-width:760px;
font-size:13px;
line-height:1.75;
}
body[data-company-theme] .hero-date-card{
width:124px;
min-height:118px;
padding:18px 14px;
border-radius:22px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
box-sizing:border-box;
}
body[data-company-theme] .hero-date-card span,
body[data-company-theme] .hero-date-card small{
display:block;
}
body[data-company-theme] .hero-date-card strong{
display:block;
margin:7px 0 5px;
font-size:34px;
line-height:1;
letter-spacing:-.04em;
}
body[data-company-theme] .dashboard-stats{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
margin:0 0 18px;
}
body[data-company-theme] .metric-card{
position:relative;
min-width:0;
min-height:138px;
padding:18px 19px;
border-radius:20px;
box-sizing:border-box;
overflow:hidden;
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
body[data-company-theme] .metric-card:hover{
transform:translateY(-2px);
}
body[data-company-theme] .metric-card-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
font-size:11px;
}
body[data-company-theme] .metric-card-top i{
width:30px;
height:30px;
border-radius:10px;
display:grid;
place-items:center;
font-style:normal;
}
body[data-company-theme] .metric-card > strong{
display:block;
margin:18px 0 5px;
font-size:28px;
line-height:1;
letter-spacing:-.04em;
}
body[data-company-theme] .metric-card > small{
display:block;
font-size:10px;
}
body[data-company-theme] .dashboard-grid{
display:grid;
grid-template-columns:minmax(0,1.55fr) minmax(300px,.7fr);
gap:18px;
margin:0 0 18px;
}
body[data-company-theme] .dashboard-panel{
border-radius:22px;
padding:20px;
box-sizing:border-box;
}
body[data-company-theme] .panel-title-row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:16px;
}
body[data-company-theme] .panel-title-row .eyebrow{
display:block;
margin-bottom:7px;
font-size:10px;
font-weight:800;
letter-spacing:.12em;
}
body[data-company-theme] .panel-title-row h3{
margin:0;
font-size:18px;
line-height:1.2;
letter-spacing:-.025em;
}
body[data-company-theme] .quick-action-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
body[data-company-theme] .quick-action{
min-width:0;
min-height:64px;
padding:12px 14px;
border-radius:15px;
display:grid;
grid-template-columns:auto minmax(0,1fr);
column-gap:12px;
align-items:center;
text-decoration:none;
box-sizing:border-box;
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
body[data-company-theme] .quick-action:hover{
transform:translateY(-1px);
}
body[data-company-theme] .quick-icon{
grid-row:1/3;
width:38px;
height:38px;
border-radius:12px;
display:grid;
place-items:center;
}
body[data-company-theme] .quick-action b{
font-size:12px;
}
body[data-company-theme] .quick-action small{
margin-top:3px;
font-size:10px;
}
body[data-company-theme] .live-badge{
display:inline-flex;
align-items:center;
gap:6px;
border-radius:999px;
padding:6px 9px;
font-size:10px;
font-weight:800;
}
body[data-company-theme] .live-badge i{
width:6px;
height:6px;
border-radius:50%;
}
body[data-company-theme] .status-list{
display:grid;
}
body[data-company-theme] .status-list > div{
min-height:44px;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
font-size:11px;
}
body[data-company-theme] .status-list b{
text-align:end;
font-size:11px;
}
body[data-company-theme] .modules-panel{
margin-top:0;
}
body[data-company-theme] .module-cards{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
}
body[data-company-theme] .module-card{
position:relative;
min-height:190px;
padding:18px;
border-radius:18px;
display:flex;
flex-direction:column;
text-decoration:none;
box-sizing:border-box;
overflow:hidden;
transition:
transform .22s ease,
border-color .22s ease,
box-shadow .22s ease;
}
body[data-company-theme] .module-card:hover{
transform:translateY(-3px);
}
body[data-company-theme] .module-card > span{
font-size:10px;
font-weight:800;
}
body[data-company-theme] .module-card h4{
margin:28px 0 8px;
font-size:18px;
line-height:1.2;
}
body[data-company-theme] .module-card p{
margin:0 0 18px;
font-size:11px;
line-height:1.65;
}
body[data-company-theme] .module-card b{
margin-top:auto;
font-size:11px;
}
/* =========================================================
AMINO THERAPY
Obsidian / Indigo / Violet
========================================================= */
body[data-company-theme="amino"] .app-content{
background:
radial-gradient(
circle at 72% 2%,
rgba(87,65,200,.08),
transparent 32%
),
#080b11;
}
body[data-company-theme="amino"] .dashboard-hero .eyebrow{
color:#7f8ba1;
}
body[data-company-theme="amino"] .dashboard-hero h2{
color:#f7f8fb;
}
body[data-company-theme="amino"] .dashboard-person-name{
color:#8c72ff;
}
body[data-company-theme="amino"] .dashboard-hero p{
color:#7f899d;
}
body[data-company-theme="amino"] .hero-date-card{
border:1px solid rgba(255,255,255,.08);
background:
linear-gradient(
145deg,
rgba(23,25,39,.96),
rgba(13,16,24,.96)
);
box-shadow:
0 18px 45px rgba(0,0,0,.18);
}
body[data-company-theme="amino"] .hero-date-card span,
body[data-company-theme="amino"] .hero-date-card small{
color:#778197;
}
body[data-company-theme="amino"] .hero-date-card strong{
color:#f5f6fb;
}
body[data-company-theme="amino"] .metric-card{
border:1px solid rgba(255,255,255,.075);
background:
linear-gradient(
150deg,
#12151d 0%,
#0d1017 100%
);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.015);
}
body[data-company-theme="amino"] .metric-card:hover{
border-color:rgba(130,104,255,.25);
box-shadow:
0 18px 42px rgba(0,0,0,.18);
}
body[data-company-theme="amino"] .metric-card-top{
color:#7d879a;
}
body[data-company-theme="amino"] .metric-card-top i{
color:#a995ff;
background:rgba(119,86,255,.10);
}
body[data-company-theme="amino"] .metric-card > strong{
color:#f4f6fa;
}
body[data-company-theme="amino"] .metric-card > small{
color:#5f6a7e;
}
body[data-company-theme="amino"] .dashboard-panel{
border:1px solid rgba(255,255,255,.075);
background:#0e1218;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.012);
}
body[data-company-theme="amino"] .panel-title-row .eyebrow{
color:#8993a6;
}
body[data-company-theme="amino"] .panel-title-row h3{
color:#f0f2f7;
}
body[data-company-theme="amino"] .quick-action{
border:1px solid rgba(255,255,255,.065);
background:rgba(255,255,255,.018);
color:#eef1f7;
}
body[data-company-theme="amino"] .quick-action:hover{
border-color:rgba(128,96,255,.26);
background:rgba(116,82,255,.055);
}
body[data-company-theme="amino"] .quick-icon{
color:#ad9bff;
background:rgba(115,81,255,.10);
}
body[data-company-theme="amino"] .quick-action small{
color:#6d788c;
}
body[data-company-theme="amino"] .live-badge{
color:#58dda3;
background:rgba(42,190,124,.08);
}
body[data-company-theme="amino"] .live-badge i{
background:#45d99a;
box-shadow:0 0 0 4px rgba(69,217,154,.08);
}
body[data-company-theme="amino"] .status-list > div{
border-bottom:1px solid rgba(255,255,255,.055);
color:#778399;
}
body[data-company-theme="amino"] .status-list > div:last-child{
border-bottom:0;
}
body[data-company-theme="amino"] .status-list b{
color:#dce2eb;
}
body[data-company-theme="amino"] .module-card{
border:1px solid rgba(255,255,255,.07);
background:
linear-gradient(
150deg,
#141821,
#0d1017
);
color:#f2f4f8;
}
body[data-company-theme="amino"] .module-card:hover{
border-color:rgba(137,112,255,.23);
box-shadow:
0 22px 48px rgba(0,0,0,.20);
}
body[data-company-theme="amino"] .module-card > span{
color:#647087;
}
body[data-company-theme="amino"] .module-card p{
color:#788398;
}
body[data-company-theme="amino"] .module-card b{
color:#aa9bff;
}
body[data-company-theme="amino"] .module-pos{
background:
radial-gradient(
circle at 100% 0,
rgba(123,87,255,.12),
transparent 46%
),
#12151d;
}
body[data-company-theme="amino"] .module-crm{
background:
radial-gradient(
circle at 100% 0,
rgba(57,105,255,.10),
transparent 46%
),
#12151d;
}
/* =========================================================
RAGHAD ORGANICS
Ivory / Botanical Green / Sage / Warm Sand
========================================================= */
body[data-company-theme="raghad"] .app-content{
background:
radial-gradient(
circle at 88% 8%,
rgba(110,139,99,.10),
transparent 25%
),
radial-gradient(
circle at 42% 0%,
rgba(215,201,168,.15),
transparent 30%
),
#f7f4ec;
}
body[data-company-theme="raghad"] .dashboard-hero{
isolation:isolate;
}
body[data-company-theme="raghad"] .dashboard-hero::after{
content:"";
position:absolute;
z-index:-1;
top:0;
right:150px;
width:240px;
height:145px;
pointer-events:none;
opacity:.22;
background:
radial-gradient(
ellipse at 75% 30%,
rgba(48,101,70,.18),
transparent 48%
);
filter:blur(1px);
}
body[data-company-theme="raghad"] .dashboard-hero .eyebrow{
color:#76907d;
}
body[data-company-theme="raghad"] .dashboard-hero h2{
color:#183c2b;
}
body[data-company-theme="raghad"] .dashboard-person-name{
color:#2c7450;
}
body[data-company-theme="raghad"] .dashboard-hero p{
color:#728078;
}
body[data-company-theme="raghad"] .hero-date-card{
border:1px solid #ddd8ca;
background:
linear-gradient(
145deg,
rgba(255,255,255,.92),
rgba(242,237,224,.92)
);
box-shadow:
0 18px 42px rgba(56,69,54,.08);
}
body[data-company-theme="raghad"] .hero-date-card span,
body[data-company-theme="raghad"] .hero-date-card small{
color:#78877e;
}
body[data-company-theme="raghad"] .hero-date-card strong{
color:#214c37;
}
body[data-company-theme="raghad"] .metric-card{
border:1px solid #dfdbcf;
background:
linear-gradient(
155deg,
rgba(255,255,255,.96),
rgba(248,245,237,.96)
);
box-shadow:
0 10px 30px rgba(44,67,49,.045);
}
body[data-company-theme="raghad"] .metric-card::before{
content:"";
position:absolute;
inset-inline-start:0;
top:18px;
bottom:18px;
width:3px;
border-radius:999px;
background:#4e8262;
opacity:.72;
}
body[data-company-theme="raghad"] .metric-card:nth-child(2)::before{
background:#9c8d62;
}
body[data-company-theme="raghad"] .metric-card:nth-child(3)::before{
background:#789681;
}
body[data-company-theme="raghad"] .metric-card:nth-child(4)::before{
background:#2f6b4b;
}
body[data-company-theme="raghad"] .metric-card:hover{
border-color:#cbd3c8;
box-shadow:
0 18px 38px rgba(42,73,52,.08);
}
body[data-company-theme="raghad"] .metric-card-top{
color:#78857c;
}
body[data-company-theme="raghad"] .metric-card-top i{
color:#2d6c4b;
background:#e8efe8;
}
body[data-company-theme="raghad"] .metric-card > strong{
color:#183c2b;
}
body[data-company-theme="raghad"] .metric-card > small{
color:#879087;
}
body[data-company-theme="raghad"] .dashboard-panel{
border:1px solid #ded9cd;
background:
rgba(255,255,255,.78);
box-shadow:
0 12px 34px rgba(45,66,49,.045);
backdrop-filter:blur(5px);
}
body[data-company-theme="raghad"] .panel-title-row .eyebrow{
color:#7e927f;
}
body[data-company-theme="raghad"] .panel-title-row h3{
color:#183c2b;
}
body[data-company-theme="raghad"] .quick-action{
border:1px solid #e1ddd3;
background:#fbfaf6;
color:#244735;
}
body[data-company-theme="raghad"] .quick-action:hover{
border-color:#b9cbbd;
background:#f4f7f1;
box-shadow:
0 10px 24px rgba(45,83,59,.06);
}
body[data-company-theme="raghad"] .quick-icon{
color:#2f704e;
background:#e8efe8;
}
body[data-company-theme="raghad"] .quick-action small{
color:#849087;
}
body[data-company-theme="raghad"] .live-badge{
color:#246844;
background:#e7f1e9;
border:1px solid #d4e5d8;
}
body[data-company-theme="raghad"] .live-badge i{
background:#3f9b68;
box-shadow:0 0 0 4px rgba(63,155,104,.09);
}
body[data-company-theme="raghad"] .status-list > div{
border-bottom:1px solid #ebe7de;
color:#78867d;
}
body[data-company-theme="raghad"] .status-list > div:last-child{
border-bottom:0;
}
body[data-company-theme="raghad"] .status-list b{
color:#274b38;
}
body[data-company-theme="raghad"] .module-card{
border:1px solid #ded9ce;
background:
linear-gradient(
150deg,
#fffefa,
#f5f2e9
);
color:#1e4532;
}
body[data-company-theme="raghad"] .module-card:hover{
border-color:#becdbf;
box-shadow:
0 20px 40px rgba(42,72,51,.08);
}
body[data-company-theme="raghad"] .module-card > span{
color:#87978b;
}
body[data-company-theme="raghad"] .module-card p{
color:#7d8981;
}
body[data-company-theme="raghad"] .module-card b{
color:#2e714e;
}
body[data-company-theme="raghad"] .module-pos{
background:
radial-gradient(
circle at 100% 0,
rgba(70,117,82,.11),
transparent 48%
),
linear-gradient(
150deg,
#fffefa,
#f5f2e9
);
}
body[data-company-theme="raghad"] .module-crm{
background:
radial-gradient(
circle at 100% 0,
rgba(176,157,108,.11),
transparent 48%
),
linear-gradient(
150deg,
#fffefa,
#f5f2e9
);
}
/* ---------------------------------------------------------
RTL
--------------------------------------------------------- */
html[dir="rtl"] body[data-company-theme] .dashboard-hero,
html[dir="rtl"] body[data-company-theme] .dashboard-panel,
html[dir="rtl"] body[data-company-theme] .metric-card{
text-align:right;
}
html[dir="rtl"] body[data-company-theme] .dashboard-hero h2{
letter-spacing:-.035em;
}
html[dir="rtl"] body[data-company-theme] .quick-action{
text-align:right;
}
html[dir="rtl"] body[data-company-theme] .module-card{
text-align:right;
}
/* ---------------------------------------------------------
Laptop / tablet
--------------------------------------------------------- */
@media (max-width:1180px){
body[data-company-theme] .dashboard-hero h2{
font-size:clamp(40px,5.6vw,64px);
}
body[data-company-theme] .dashboard-stats{
grid-template-columns:repeat(2,minmax(0,1fr));
}
body[data-company-theme] .module-cards{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width:900px){
body[data-company-theme] .dashboard-hero{
grid-template-columns:1fr;
padding-top:18px;
}
body[data-company-theme] .hero-date-card{
display:none;
}
body[data-company-theme] .dashboard-grid{
grid-template-columns:1fr;
}
}
/* ---------------------------------------------------------
Mobile
--------------------------------------------------------- */
@media (max-width:680px){
body[data-company-theme] .dashboard-hero{
margin-bottom:20px;
padding:12px 0 0;
}
body[data-company-theme] .dashboard-hero .eyebrow{
margin-bottom:11px;
font-size:9px;
}
body[data-company-theme] .dashboard-hero h2{
font-size:clamp(36px,11vw,52px);
line-height:1;
}
body[data-company-theme] .dashboard-hero p{
margin-top:13px;
font-size:12px;
line-height:1.65;
}
body[data-company-theme] .dashboard-stats{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:9px;
}
body[data-company-theme] .metric-card{
min-height:126px;
padding:15px;
border-radius:17px;
}
body[data-company-theme] .metric-card > strong{
margin-top:16px;
font-size:25px;
}
body[data-company-theme] .dashboard-panel{
padding:16px;
border-radius:19px;
}
body[data-company-theme] .quick-action-grid{
grid-template-columns:1fr;
}
body[data-company-theme] .module-cards{
grid-template-columns:1fr;
}
body[data-company-theme] .module-card{
min-height:160px;
}
body[data-company-theme] .module-card h4{
margin-top:22px;
}
}
@media (max-width:430px){
body[data-company-theme] .dashboard-stats{
grid-template-columns:1fr;
}
body[data-company-theme] .metric-card{
min-height:116px;
}
}
/* =========================================================
Dual Brand Dashboard — Final Visual Polish v10.2B-2C
========================================================= */
/*
* Panels must size from their real permission-driven content.
* This is especially important for restricted Raghad users.
*/
body[data-company-theme] .dashboard-grid{
align-items:stretch;
}
body[data-company-theme] .dashboard-grid > .dashboard-panel{
min-height:0;
height:auto;
}
body[data-company-theme] .quick-actions-panel{
align-self:start;
}
/*
* Never force the Quick Actions area to inherit an old
* fixed/minimum height from previous dashboard generations.
*/
body[data-company-theme] .quick-actions-panel,
body[data-company-theme] .quick-actions-panel .quick-action-grid{
min-height:0;
height:auto;
}
/* One available action */
body[data-company-theme] .quick-action-grid > .quick-action:only-child{
max-width:520px;
}
/* Odd number of actions: last card stays naturally sized. */
body[data-company-theme] .quick-action-grid > .quick-action:last-child:nth-child(odd){
max-width:520px;
}
/* Slightly tighter, more intentional dashboard rhythm. */
body[data-company-theme] .dashboard-stats{
margin-bottom:16px;
}
body[data-company-theme] .dashboard-grid{
margin-bottom:16px;
}
body[data-company-theme] .dashboard-panel{
padding:19px;
}
body[data-company-theme] .panel-title-row{
margin-bottom:14px;
}
/* Keep KPI cards optically aligned. */
body[data-company-theme] .metric-card{
display:flex;
flex-direction:column;
}
body[data-company-theme] .metric-card > strong{
margin-top:auto;
padding-top:17px;
}
/* Module cards need less dead space on large screens. */
body[data-company-theme] .module-card{
min-height:174px;
}
body[data-company-theme] .module-card h4{
margin-top:23px;
}
/* =========================================================
RAGHAD — Organic refinement
========================================================= */
body[data-company-theme="raghad"] .dashboard-hero{
padding-top:26px;
}
body[data-company-theme="raghad"] .dashboard-panel{
background:rgba(255,255,255,.86);
}
body[data-company-theme="raghad"] .quick-actions-panel{
background:
linear-gradient(
145deg,
rgba(255,255,255,.93),
rgba(250,248,241,.90)
);
}
body[data-company-theme="raghad"] .quick-action-grid{
align-items:start;
}
body[data-company-theme="raghad"] .quick-action{
min-height:62px;
}
body[data-company-theme="raghad"] .quick-action-grid > .quick-action:only-child{
width:min(100%,520px);
}
/*
* Give the restricted Raghad dashboard a compact command panel
* instead of a large empty white surface.
*/
body[data-company-theme="raghad"] .quick-actions-panel:has(
.quick-action-grid > .quick-action:only-child
){
padding-bottom:19px;
}
body[data-company-theme="raghad"] .quick-actions-panel:has(
.quick-action-grid > .quick-action:only-child
) .quick-action-grid{
grid-template-columns:minmax(0,520px);
}
/* More natural organic depth without dark-theme remnants. */
body[data-company-theme="raghad"] .metric-card,
body[data-company-theme="raghad"] .dashboard-panel,
body[data-company-theme="raghad"] .module-card{
box-shadow:
0 12px 30px rgba(39,70,49,.045);
}
body[data-company-theme="raghad"] .modules-panel{
background:
linear-gradient(
145deg,
rgba(255,255,255,.91),
rgba(249,247,239,.88)
);
}
/* =========================================================
AMINO — Premium dark refinement
========================================================= */
body[data-company-theme="amino"] .dashboard-hero{
padding-top:26px;
}
body[data-company-theme="amino"] .dashboard-panel{
background:
linear-gradient(
145deg,
#10141b,
#0d1117
);
}
body[data-company-theme="amino"] .quick-actions-panel{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.015);
}
body[data-company-theme="amino"] .modules-panel{
background:
linear-gradient(
145deg,
#10141b,
#0c1016
);
}
/* =========================================================
Responsive polish
========================================================= */
@media (max-width:900px){
body[data-company-theme] .dashboard-grid > .dashboard-panel{
width:100%;
}
body[data-company-theme] .quick-action-grid >
.quick-action:only-child{
max-width:none;
}
body[data-company-theme="raghad"]
.quick-actions-panel:has(
.quick-action-grid > .quick-action:only-child
) .quick-action-grid{
grid-template-columns:1fr;
}
}
@media (max-width:680px){
body[data-company-theme] .dashboard-panel{
padding:15px;
}
body[data-company-theme] .module-card{
min-height:150px;
}
}
/* =========================================================
Multi Company — Switch Account UI v10.2D
========================================================= */
.company-switcher{
margin:6px 0;
padding:8px 0;
border-top:1px solid rgba(255,255,255,.07);
border-bottom:1px solid rgba(255,255,255,.07);
}
.company-switcher-heading{
display:flex;
align-items:center;
gap:9px;
padding:8px 10px 7px;
}
.company-switcher-heading-icon{
width:28px;
height:28px;
flex:0 0 28px;
display:grid;
place-items:center;
border-radius:9px;
background:rgba(124,92,255,.12);
color:#9d8cff;
font-size:.9rem;
font-weight:900;
}
.company-switcher-heading > span:last-child{
min-width:0;
display:flex;
flex-direction:column;
}
.company-switcher-heading b{
font-size:.76rem;
line-height:1.2;
}
.company-switcher-heading small{
margin-top:3px;
color:#737d90;
font-size:.62rem;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.company-switcher-options{
display:grid;
gap:5px;
margin-top:3px;
}
.company-switch-form{
margin:0;
}
.user-dropdown .company-switch-option{
display:flex;
align-items:center;
gap:9px;
width:100%;
padding:8px 9px;
text-align:initial;
}
.company-switch-logo{
width:31px;
height:31px;
flex:0 0 31px;
display:grid;
place-items:center;
overflow:hidden;
border-radius:9px;
background:rgba(255,255,255,.06);
}
.company-switch-logo img{
display:block;
width:100%;
height:100%;
object-fit:contain;
}
.company-switch-logo b{
font-size:.72rem;
}
.company-switch-copy{
min-width:0;
flex:1;
display:flex;
flex-direction:column;
}
.company-switch-copy b{
overflow:hidden;
color:inherit;
font-size:.73rem;
white-space:nowrap;
text-overflow:ellipsis;
}
.company-switch-copy small{
margin-top:2px;
color:#737d90;
font-size:.6rem;
}
.company-switch-arrow{
opacity:.55;
font-size:1.1rem;
}
/* Raghad shell */
body[data-company-theme="raghad"] .company-switcher{
border-color:rgba(43,91,59,.10);
}
body[data-company-theme="raghad"]
.company-switcher-heading-icon{
background:#edf3e9;
color:#2f6743;
}
body[data-company-theme="raghad"]
.company-switcher-heading small,
body[data-company-theme="raghad"]
.company-switch-copy small{
color:#7b8177;
}
body[data-company-theme="raghad"]
.company-switch-logo{
background:#f2f4ed;
}
/* RTL */
html[dir="rtl"] .company-switcher-heading,
html[dir="rtl"] .company-switch-option{
text-align:right;
}
html[dir="rtl"] .company-switch-arrow{
transform:rotate(180deg);
}
/* =========================================================
AMINO CUSTOMER 360 — INTELLIGENCE HEADER
Scoped to Amino company theme only.
========================================================= */
body[data-company-theme="amino"] .amino-c360-intelligence{
display:grid;
gap:14px;
margin:0 0 18px;
}
body[data-company-theme="amino"] .amino-c360-section-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:18px;
padding:2px 2px 0;
}
body[data-company-theme="amino"] .amino-c360-section-head h3{
margin:5px 0 0;
font-size:1.12rem;
letter-spacing:-.02em;
}
body[data-company-theme="amino"] .amino-c360-live{
display:inline-flex;
align-items:center;
min-height:30px;
padding:0 10px;
border:1px solid rgba(125,102,255,.22);
border-radius:999px;
background:rgba(125,102,255,.08);
color:#b8adff;
font-size:.62rem;
font-weight:850;
}
body[data-company-theme="amino"] .amino-c360-grid{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:10px;
}
body[data-company-theme="amino"] .amino-c360-card{
position:relative;
min-width:0;
min-height:142px;
padding:16px;
overflow:hidden;
border:1px solid rgba(255,255,255,.075);
border-radius:18px;
background:
radial-gradient(
circle at 100% 0,
rgba(123,92,255,.11),
transparent 44%
),
linear-gradient(
155deg,
rgba(18,22,31,.98),
rgba(11,14,20,.98)
);
}
body[data-company-theme="amino"] .amino-c360-card::after{
content:"";
position:absolute;
inset:auto -30px -45px auto;
width:90px;
height:90px;
border-radius:50%;
background:rgba(111,84,255,.06);
filter:blur(2px);
pointer-events:none;
}
body[data-company-theme="amino"] .amino-c360-label{
display:block;
color:#768298;
font-size:.61rem;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
}
body[data-company-theme="amino"] .amino-c360-card > strong{
display:block;
margin:15px 0 7px;
color:#f3f5fa;
font-size:1.1rem;
line-height:1.15;
overflow-wrap:anywhere;
}
body[data-company-theme="amino"] .amino-c360-card > small{
display:block;
color:#707c91;
font-size:.62rem;
line-height:1.45;
}
body[data-company-theme="amino"] .amino-c360-pill{
display:inline-flex;
align-items:center;
width:max-content;
max-width:100%;
margin-top:9px;
padding:5px 8px;
border:1px solid rgba(255,255,255,.09);
border-radius:999px;
background:rgba(255,255,255,.045);
color:#aeb7c7;
font-size:.57rem;
font-weight:850;
}
body[data-company-theme="amino"] .amino-c360-pill.lifecycle-loyal,
body[data-company-theme="amino"] .amino-c360-pill.relationship-active{
border-color:rgba(63,213,152,.22);
background:rgba(63,213,152,.09);
color:#7ee7ba;
}
body[data-company-theme="amino"] .amino-c360-pill.lifecycle-at_risk,
body[data-company-theme="amino"] .amino-c360-pill.lifecycle-inactive,
body[data-company-theme="amino"] .amino-c360-pill.relationship-at_risk,
body[data-company-theme="amino"] .amino-c360-pill.birthday-alert{
border-color:rgba(255,104,132,.25);
background:rgba(255,78,113,.1);
color:#ff9caf;
}
body[data-company-theme="amino"] .amino-c360-pill.relationship-follow_up,
body[data-company-theme="amino"] .amino-c360-pill.birthday-soon{
border-color:rgba(241,185,88,.25);
background:rgba(241,185,88,.09);
color:#f1c979;
}
body[data-company-theme="amino"] .amino-c360-next-action{
display:flex;
align-items:center;
justify-content:space-between;
gap:22px;
padding:18px 20px;
border:1px solid rgba(125,102,255,.18);
border-radius:18px;
background:
linear-gradient(
115deg,
rgba(116,84,255,.13),
rgba(16,19,27,.96) 52%,
rgba(10,13,19,.98)
);
}
body[data-company-theme="amino"] .amino-c360-next-action h3{
margin:5px 0 5px;
font-size:1rem;
}
body[data-company-theme="amino"] .amino-c360-next-action p{
max-width:760px;
margin:0;
color:#7e899d;
font-size:.68rem;
line-height:1.55;
}
body[data-company-theme="amino"] .amino-c360-priority{
flex:0 0 auto;
display:inline-flex;
align-items:center;
min-height:34px;
padding:0 11px;
border:1px solid rgba(255,255,255,.1);
border-radius:999px;
color:#b8c0ce;
font-size:.61rem;
font-weight:900;
white-space:nowrap;
}
body[data-company-theme="amino"] .amino-c360-next-action.priority-high{
border-color:rgba(255,96,126,.22);
}
body[data-company-theme="amino"] .amino-c360-next-action.priority-high
.amino-c360-priority{
border-color:rgba(255,96,126,.25);
background:rgba(255,78,113,.1);
color:#ff9caf;
}
body[data-company-theme="amino"] .amino-c360-next-action.priority-medium
.amino-c360-priority{
border-color:rgba(241,185,88,.25);
background:rgba(241,185,88,.09);
color:#f1c979;
}
html[dir="rtl"]
body[data-company-theme="amino"] .amino-c360-card,
html[dir="rtl"]
body[data-company-theme="amino"] .amino-c360-next-action{
text-align:right;
}
@media(max-width:1180px){
body[data-company-theme="amino"] .amino-c360-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
@media(max-width:720px){
body[data-company-theme="amino"] .amino-c360-section-head{
align-items:flex-start;
flex-direction:column;
}
body[data-company-theme="amino"] .amino-c360-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
body[data-company-theme="amino"] .amino-c360-next-action{
align-items:flex-start;
flex-direction:column;
}
}
@media(max-width:440px){
body[data-company-theme="amino"] .amino-c360-grid{
grid-template-columns:1fr;
}
}
/* =========================================================
AMINO CUSTOMER 360 — JOURNEY NAVIGATION
========================================================= */
body[data-company-theme="amino"] .amino-c360-workspace{
margin:18px 0;
}
body[data-company-theme="amino"] .amino-c360-tabs{
display:flex;
align-items:center;
gap:6px;
padding:6px;
overflow-x:auto;
border:1px solid rgba(255,255,255,.07);
border-radius:16px;
background:rgba(12,15,22,.88);
scrollbar-width:none;
}
body[data-company-theme="amino"] .amino-c360-tabs::-webkit-scrollbar{
display:none;
}
body[data-company-theme="amino"] .amino-c360-tab{
flex:0 0 auto;
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
min-height:38px;
padding:0 13px;
border:0;
border-radius:11px;
background:transparent;
color:#778399;
font:inherit;
font-size:.68rem;
font-weight:850;
cursor:pointer;
transition:
background .18s ease,
color .18s ease,
transform .18s ease;
}
body[data-company-theme="amino"] .amino-c360-tab:hover{
color:#d8ddeb;
background:rgba(255,255,255,.04);
}
body[data-company-theme="amino"] .amino-c360-tab:focus-visible{
outline:2px solid rgba(143,122,255,.7);
outline-offset:2px;
}
body[data-company-theme="amino"] .amino-c360-tab.is-active{
color:#f4f2ff;
background:linear-gradient(
135deg,
rgba(113,78,255,.92),
rgba(83,61,218,.9)
);
box-shadow:0 8px 22px rgba(76,51,190,.18);
}
body[data-company-theme="amino"] .amino-c360-tab > span{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:19px;
height:19px;
padding:0 5px;
border-radius:999px;
background:rgba(255,255,255,.08);
font-size:.56rem;
}
body[data-company-theme="amino"]
.amino-c360-tab.is-active > span{
background:rgba(255,255,255,.16);
}
body[data-company-theme="amino"] .amino-c360-tab-panel{
margin-top:12px;
padding:20px;
border:1px solid rgba(255,255,255,.07);
border-radius:18px;
background:linear-gradient(
155deg,
rgba(16,20,28,.98),
rgba(10,13,19,.98)
);
}
body[data-company-theme="amino"]
.amino-c360-tab-panel[hidden]{
display:none !important;
}
body[data-company-theme="amino"]
.crm-profile-grid[hidden]{
display:none !important;
}
body[data-company-theme="amino"] .amino-c360-panel-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
margin-bottom:20px;
}
body[data-company-theme="amino"] .amino-c360-panel-head h3{
margin:5px 0 4px;
font-size:1.05rem;
}
body[data-company-theme="amino"] .amino-c360-panel-head p{
max-width:720px;
margin:0;
color:#778297;
font-size:.66rem;
line-height:1.55;
}
body[data-company-theme="amino"] .amino-c360-event-count{
flex:0 0 auto;
padding:6px 9px;
border:1px solid rgba(125,102,255,.18);
border-radius:999px;
background:rgba(125,102,255,.07);
color:#a99cff;
font-size:.58rem;
font-weight:850;
}
body[data-company-theme="amino"] .amino-c360-timeline{
display:grid;
}
body[data-company-theme="amino"] .amino-c360-event{
display:grid;
grid-template-columns:26px minmax(0,1fr);
gap:12px;
min-width:0;
}
body[data-company-theme="amino"] .amino-c360-event-rail{
position:relative;
display:flex;
justify-content:center;
}
body[data-company-theme="amino"] .amino-c360-event-rail::after{
content:"";
position:absolute;
top:16px;
bottom:-16px;
width:1px;
background:rgba(255,255,255,.08);
}
body[data-company-theme="amino"]
.amino-c360-event:last-child
.amino-c360-event-rail::after{
display:none;
}
body[data-company-theme="amino"]
.amino-c360-event-rail > span{
position:relative;
z-index:1;
width:10px;
height:10px;
margin-top:10px;
border:2px solid #8c79ff;
border-radius:50%;
background:#11151e;
box-shadow:
0 0 0 5px rgba(125,102,255,.07);
}
body[data-company-theme="amino"]
.amino-c360-event.type-treatment
.amino-c360-event-rail > span{
border-color:#63d9b0;
}
body[data-company-theme="amino"]
.amino-c360-event.type-followup
.amino-c360-event-rail > span{
border-color:#efbd65;
}
body[data-company-theme="amino"] .amino-c360-event-body{
min-width:0;
padding:8px 0 22px;
}
body[data-company-theme="amino"] .amino-c360-event-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:5px;
}
body[data-company-theme="amino"] .amino-c360-event-type{
color:#9586f8;
font-size:.57rem;
font-weight:900;
text-transform:uppercase;
}
body[data-company-theme="amino"]
.amino-c360-event.type-treatment
.amino-c360-event-type{
color:#63d9b0;
}
body[data-company-theme="amino"]
.amino-c360-event.type-followup
.amino-c360-event-type{
color:#efbd65;
}
body[data-company-theme="amino"] .amino-c360-event-top time{
color:#69758a;
font-size:.57rem;
white-space:nowrap;
}
body[data-company-theme="amino"]
.amino-c360-event-body > strong{
display:block;
color:#e9edf5;
font-size:.76rem;
overflow-wrap:anywhere;
}
body[data-company-theme="amino"]
.amino-c360-event-body > small{
display:block;
margin-top:4px;
color:#707c91;
font-size:.6rem;
overflow-wrap:anywhere;
}
body[data-company-theme="amino"] .amino-c360-empty{
display:grid;
min-height:150px;
place-content:center;
gap:6px;
text-align:center;
}
body[data-company-theme="amino"] .amino-c360-empty strong,
body[data-company-theme="amino"] .amino-c360-placeholder strong{
color:#e7ebf3;
}
body[data-company-theme="amino"] .amino-c360-empty span,
body[data-company-theme="amino"] .amino-c360-placeholder span{
color:#748096;
font-size:.66rem;
}
body[data-company-theme="amino"] .amino-c360-placeholder{
display:grid;
gap:5px;
min-height:100px;
align-content:center;
}
html[dir="rtl"]
body[data-company-theme="amino"] .amino-c360-tab-panel{
text-align:right;
}
@media(max-width:720px){
body[data-company-theme="amino"] .amino-c360-workspace{
margin:14px 0;
}
body[data-company-theme="amino"] .amino-c360-tab{
min-height:36px;
padding:0 11px;
}
body[data-company-theme="amino"] .amino-c360-tab-panel{
padding:16px;
}
body[data-company-theme="amino"] .amino-c360-panel-head{
flex-direction:column;
}
body[data-company-theme="amino"] .amino-c360-event-top{
align-items:flex-start;
flex-direction:column;
gap:3px;
}
}
/* =========================================================
AMINO CUSTOMER 360 — PROFILE VISIBILITY GUARD
========================================================= */
body[data-company-theme="amino"]
.crm-profile-grid.is-c360-hidden{
display:none !important;
}
/* =========================================================
CUSTOMER 360 — DEFINITIVE VISIBILITY CONTRACT
========================================================= */
.crm-profile-grid[hidden],
.crm-profile-grid.is-c360-hidden{
display:none !important;
}
.amino-c360-tab-panel[hidden]{
display:none !important;
}
/* =========================================================
CUSTOMER 360 — DEFINITIVE VISIBILITY CONTRACT
========================================================= */
.crm-profile-grid[hidden],
.crm-profile-grid.is-c360-hidden{
display:none !important;
}
.amino-c360-tab-panel[hidden]{
display:none !important;
}
/* =========================================================
AMINO CUSTOMER 360 — OPERATIONAL RECORDS
========================================================= */
body[data-company-theme="amino"] .amino-c360-record-list{
display:grid;
gap:12px;
margin-top:18px;
}
body[data-company-theme="amino"] .amino-c360-record{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(150px,220px);
gap:24px;
align-items:start;
padding:18px 20px;
border:1px solid var(--border);
border-radius:16px;
background:rgba(255,255,255,.018);
}
body[data-company-theme="amino"] .amino-c360-record-main{
min-width:0;
}
body[data-company-theme="amino"] .amino-c360-record-title{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
flex-wrap:wrap;
}
body[data-company-theme="amino"] .amino-c360-record-title strong{
font-size:15px;
}
body[data-company-theme="amino"] .amino-c360-record-title time{
color:var(--muted);
font-size:12px;
}
body[data-company-theme="amino"] .amino-c360-record-meta{
display:flex;
flex-wrap:wrap;
gap:8px 16px;
margin-top:9px;
color:var(--muted);
font-size:12px;
}
body[data-company-theme="amino"] .amino-c360-record-side{
display:grid;
gap:5px;
min-width:0;
}
body[data-company-theme="amino"] .amino-c360-record-side span,
body[data-company-theme="amino"] .amino-c360-record-detail span{
color:var(--muted);
font-size:11px;
text-transform:uppercase;
letter-spacing:.08em;
}
body[data-company-theme="amino"] .amino-c360-record-side strong{
overflow-wrap:anywhere;
}
body[data-company-theme="amino"] .amino-c360-record-detail{
display:grid;
gap:5px;
margin-top:14px;
}
body[data-company-theme="amino"] .amino-c360-record-note{
margin:14px 0 0;
color:var(--muted);
line-height:1.65;
white-space:pre-wrap;
}
body[data-company-theme="amino"] .amino-c360-status{
display:inline-flex;
align-items:center;
min-height:25px;
padding:4px 9px;
border:1px solid var(--border);
border-radius:999px;
color:var(--muted);
font-size:11px;
font-weight:700;
}
body[data-company-theme="amino"]
.amino-c360-status[data-status="completed"]{
color:#86efac;
border-color:rgba(134,239,172,.22);
background:rgba(134,239,172,.07);
}
body[data-company-theme="amino"]
.amino-c360-status[data-status="checked_in"],
body[data-company-theme="amino"]
.amino-c360-status[data-status="in_service"]{
color:#c4b5fd;
border-color:rgba(196,181,253,.24);
background:rgba(124,92,255,.08);
}
body[data-company-theme="amino"]
.amino-c360-status[data-status="cancelled"],
body[data-company-theme="amino"]
.amino-c360-status[data-status="no_show"]{
color:#fca5a5;
border-color:rgba(252,165,165,.22);
background:rgba(252,165,165,.06);
}
@media (max-width:760px){
body[data-company-theme="amino"] .amino-c360-record{
grid-template-columns:1fr;
gap:14px;
padding:16px;
}
body[data-company-theme="amino"] .amino-c360-record-side{
padding-top:13px;
border-top:1px solid var(--border);
}
}
/* =========================================================
AMINO CUSTOMER 360 — PREFERENCES FORM
========================================================= */
body[data-company-theme="amino"]
.amino-c360-preferences-form{
display:grid;
gap:22px;
margin-top:20px;
}
body[data-company-theme="amino"]
.amino-c360-form-grid{
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:16px;
}
body[data-company-theme="amino"]
.amino-c360-field{
display:grid;
gap:8px;
min-width:0;
}
body[data-company-theme="amino"]
.amino-c360-field > span{
color:var(--muted);
font-size:12px;
font-weight:700;
letter-spacing:.02em;
}
body[data-company-theme="amino"]
.amino-c360-field input,
body[data-company-theme="amino"]
.amino-c360-field select,
body[data-company-theme="amino"]
.amino-c360-field textarea{
width:100%;
min-width:0;
border:1px solid var(--border);
border-radius:12px;
background:rgba(255,255,255,.025);
color:var(--text);
outline:none;
transition:
border-color .18s ease,
box-shadow .18s ease,
background .18s ease;
}
body[data-company-theme="amino"]
.amino-c360-field input,
body[data-company-theme="amino"]
.amino-c360-field select{
min-height:44px;
padding:0 13px;
}
body[data-company-theme="amino"]
.amino-c360-field textarea{
min-height:108px;
padding:12px 13px;
resize:vertical;
line-height:1.6;
}
body[data-company-theme="amino"]
.amino-c360-field input:focus,
body[data-company-theme="amino"]
.amino-c360-field select:focus,
body[data-company-theme="amino"]
.amino-c360-field textarea:focus{
border-color:rgba(124,92,255,.72);
background:rgba(124,92,255,.035);
box-shadow:
0 0 0 3px rgba(124,92,255,.11);
}
body[data-company-theme="amino"]
.amino-c360-field select option{
background:#10121a;
color:#f7f7fb;
}
body[data-company-theme="amino"]
.amino-c360-consent{
display:flex;
align-items:flex-start;
gap:12px;
min-height:44px;
padding:13px 14px;
border:1px solid var(--border);
border-radius:12px;
background:rgba(255,255,255,.018);
cursor:pointer;
}
body[data-company-theme="amino"]
.amino-c360-consent input{
width:17px;
height:17px;
flex:0 0 auto;
margin-top:2px;
accent-color:#7c5cff;
}
body[data-company-theme="amino"]
.amino-c360-consent > span{
display:grid;
gap:4px;
min-width:0;
}
body[data-company-theme="amino"]
.amino-c360-consent strong{
font-size:13px;
}
body[data-company-theme="amino"]
.amino-c360-consent small{
color:var(--muted);
font-size:11px;
line-height:1.5;
}
body[data-company-theme="amino"]
.amino-c360-form-actions{
display:flex;
justify-content:flex-end;
padding-top:2px;
}
body[data-company-theme="amino"]
.amino-c360-preferences-readonly{
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:12px;
margin-top:20px;
}
body[data-company-theme="amino"]
.amino-c360-preferences-readonly > div{
display:grid;
gap:6px;
padding:16px;
border:1px solid var(--border);
border-radius:14px;
background:rgba(255,255,255,.018);
}
body[data-company-theme="amino"]
.amino-c360-preferences-readonly span{
color:var(--muted);
font-size:11px;
}
body[data-company-theme="amino"]
.amino-c360-preferences-readonly strong{
overflow-wrap:anywhere;
}
@media (max-width:760px){
body[data-company-theme="amino"]
.amino-c360-form-grid,
body[data-company-theme="amino"]
.amino-c360-preferences-readonly{
grid-template-columns:1fr;
}
body[data-company-theme="amino"]
.amino-c360-form-actions{
justify-content:stretch;
}
body[data-company-theme="amino"]
.amino-c360-form-actions .crm-primary{
width:100%;
justify-content:center;
}
}
/* =========================================================
AMINO CUSTOMER 360 — FOLLOW-UP CENTER
========================================================= */
body[data-company-theme="amino"]
.amino-c360-followup-create{
display:grid;
gap:18px;
margin-top:22px;
padding:20px;
border:1px solid var(--border);
border-radius:16px;
background:rgba(255,255,255,.018);
}
body[data-company-theme="amino"]
.amino-c360-followup-list{
display:grid;
gap:12px;
margin-top:22px;
}
body[data-company-theme="amino"]
.amino-c360-followup-card{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:18px;
align-items:center;
padding:18px;
border:1px solid var(--border);
border-radius:16px;
background:rgba(255,255,255,.018);
}
body[data-company-theme="amino"]
.amino-c360-followup-card[data-status="pending"]{
border-color:rgba(124,92,255,.28);
background:
linear-gradient(
135deg,
rgba(124,92,255,.055),
rgba(255,255,255,.012)
);
}
body[data-company-theme="amino"]
.amino-c360-followup-card[data-status="completed"]{
border-color:rgba(52,211,153,.20);
}
body[data-company-theme="amino"]
.amino-c360-followup-card[data-status="cancelled"]{
opacity:.72;
}
body[data-company-theme="amino"]
.amino-c360-followup-main{
display:grid;
gap:11px;
min-width:0;
}
body[data-company-theme="amino"]
.amino-c360-followup-title{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:16px;
}
body[data-company-theme="amino"]
.amino-c360-followup-title > div{
display:grid;
gap:5px;
min-width:0;
}
body[data-company-theme="amino"]
.amino-c360-followup-title strong{
font-size:15px;
overflow-wrap:anywhere;
}
body[data-company-theme="amino"]
.amino-c360-followup-type{
color:#a99bff;
font-size:10px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
body[data-company-theme="amino"]
.amino-c360-followup-meta{
display:flex;
flex-wrap:wrap;
gap:7px 16px;
color:var(--muted);
font-size:11px;
}
body[data-company-theme="amino"]
.amino-c360-followup-meta span{
overflow-wrap:anywhere;
}
body[data-company-theme="amino"]
.amino-c360-followup-completion{
color:var(--muted);
font-size:11px;
}
body[data-company-theme="amino"]
.amino-c360-followup-completion strong{
color:var(--text);
}
body[data-company-theme="amino"]
.amino-c360-followup-actions{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:8px;
}
body[data-company-theme="amino"]
.amino-c360-followup-actions form{
margin:0;
}
body[data-company-theme="amino"]
.amino-c360-followup-actions button{
min-width:92px;
}
body[data-company-theme="amino"]
.amino-c360-followup-card
.amino-c360-status{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:26px;
padding:4px 9px;
border:1px solid var(--border);
border-radius:999px;
font-size:10px;
font-weight:800;
white-space:nowrap;
}
body[data-company-theme="amino"]
.amino-c360-followup-card
.amino-c360-status[data-status="pending"]{
color:#c4b9ff;
border-color:rgba(124,92,255,.32);
background:rgba(124,92,255,.09);
}
body[data-company-theme="amino"]
.amino-c360-followup-card
.amino-c360-status[data-status="completed"]{
color:#6ee7b7;
border-color:rgba(52,211,153,.25);
background:rgba(52,211,153,.07);
}
body[data-company-theme="amino"]
.amino-c360-followup-card
.amino-c360-status[data-status="cancelled"]{
color:var(--muted);
background:rgba(255,255,255,.025);
}
body[data-company-theme="amino"]
.amino-c360-empty{
display:grid;
place-items:center;
gap:6px;
min-height:150px;
padding:24px;
border:1px dashed var(--border);
border-radius:16px;
text-align:center;
}
body[data-company-theme="amino"]
.amino-c360-empty strong{
font-size:15px;
}
body[data-company-theme="amino"]
.amino-c360-empty span{
color:var(--muted);
font-size:11px;
}
@media (max-width:760px){
body[data-company-theme="amino"]
.amino-c360-followup-create{
padding:15px;
}
body[data-company-theme="amino"]
.amino-c360-followup-card{
grid-template-columns:1fr;
}
body[data-company-theme="amino"]
.amino-c360-followup-title{
align-items:flex-start;
}
body[data-company-theme="amino"]
.amino-c360-followup-actions{
justify-content:stretch;
}
body[data-company-theme="amino"]
.amino-c360-followup-actions form{
flex:1 1 120px;
}
body[data-company-theme="amino"]
.amino-c360-followup-actions button{
width:100%;
}
}
/* =========================================================
RAGHAD CUSTOMER 360 — FOUNDATION
Dedicated organic retail customer intelligence experience.
========================================================= */
body[data-company-theme="raghad"] .raghad-c360-intelligence{
display:grid;
gap:16px;
margin:0 0 18px;
padding:22px;
border:1px solid rgba(47,103,67,.12);
border-radius:24px;
background:
radial-gradient(circle at top right, rgba(108,139,93,.10), transparent 34%),
linear-gradient(145deg, #fffef9 0%, #f7f4ea 100%);
box-shadow:0 18px 44px rgba(42,62,45,.07);
}
body[data-company-theme="raghad"] .raghad-c360-heading{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:18px;
}
body[data-company-theme="raghad"] .raghad-c360-heading h3{
margin:5px 0 0;
color:#244f34;
font-size:clamp(1.15rem, 2vw, 1.55rem);
}
body[data-company-theme="raghad"] .raghad-c360-brand-pill{
display:inline-flex;
align-items:center;
min-height:34px;
padding:7px 13px;
border:1px solid rgba(47,103,67,.12);
border-radius:999px;
background:#edf3e9;
color:#2f6743;
font-size:.75rem;
font-weight:800;
white-space:nowrap;
}
body[data-company-theme="raghad"] .raghad-c360-signal-grid{
display:grid;
grid-template-columns:repeat(6, minmax(0, 1fr));
gap:10px;
}
body[data-company-theme="raghad"] .raghad-c360-signal{
min-width:0;
padding:15px;
border:1px solid rgba(47,103,67,.09);
border-radius:18px;
background:rgba(255,255,255,.72);
}
body[data-company-theme="raghad"] .raghad-c360-signal > span{
display:block;
margin-bottom:8px;
color:#7a806f;
font-size:.7rem;
font-weight:750;
}
body[data-company-theme="raghad"] .raghad-c360-signal strong{
display:block;
overflow-wrap:anywhere;
color:#244f34;
font-size:1rem;
line-height:1.35;
}
body[data-company-theme="raghad"] .raghad-c360-signal small{
display:block;
margin-top:7px;
overflow-wrap:anywhere;
color:#888c80;
font-size:.67rem;
line-height:1.45;
}
body[data-company-theme="raghad"] .raghad-c360-signal-action{
background:#edf3e9;
}
body[data-company-theme="raghad"] .raghad-c360-birthday{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:13px 15px;
border:1px dashed rgba(47,103,67,.18);
border-radius:16px;
background:rgba(245,239,218,.54);
}
body[data-company-theme="raghad"] .raghad-c360-birthday span,
body[data-company-theme="raghad"] .raghad-c360-birthday small{
color:#7a806f;
font-size:.72rem;
}
body[data-company-theme="raghad"] .raghad-c360-birthday strong{
display:block;
margin-top:3px;
color:#244f34;
}
body[data-company-theme="raghad"] .raghad-c360-tabs{
margin:0 0 18px;
}
body[data-company-theme="raghad"] .raghad-c360-tabs .customer-c360-tablist{
display:flex;
gap:7px;
overflow-x:auto;
padding:6px;
border:1px solid rgba(47,103,67,.10);
border-radius:18px;
background:#f5f2e8;
scrollbar-width:thin;
}
body[data-company-theme="raghad"] .raghad-c360-tabs .customer-c360-tab{
flex:0 0 auto;
min-height:40px;
padding:9px 14px;
border:0;
border-radius:13px;
background:transparent;
color:#6d7468;
font:inherit;
font-size:.76rem;
font-weight:800;
cursor:pointer;
}
body[data-company-theme="raghad"] .raghad-c360-tabs .customer-c360-tab.is-active{
background:#2f6743;
color:#fff;
box-shadow:0 7px 18px rgba(47,103,67,.18);
}
body[data-company-theme="raghad"] .raghad-c360-panel{
margin-top:14px;
}
body[data-company-theme="raghad"] .raghad-c360-empty{
padding:28px;
border:1px solid rgba(47,103,67,.10);
border-radius:22px;
background:#fffef9;
text-align:center;
}
body[data-company-theme="raghad"] .raghad-c360-empty h3{
margin:7px 0;
color:#244f34;
}
body[data-company-theme="raghad"] .raghad-c360-empty p{
max-width:620px;
margin:0 auto;
color:#7a806f;
line-height:1.7;
}
@media (max-width:1180px){
body[data-company-theme="raghad"] .raghad-c360-signal-grid{
grid-template-columns:repeat(3, minmax(0, 1fr));
}
}
@media (max-width:720px){
body[data-company-theme="raghad"] .raghad-c360-intelligence{
padding:16px;
border-radius:20px;
}
body[data-company-theme="raghad"] .raghad-c360-heading{
align-items:flex-start;
flex-direction:column;
}
body[data-company-theme="raghad"] .raghad-c360-signal-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
body[data-company-theme="raghad"] .raghad-c360-birthday{
align-items:flex-start;
flex-direction:column;
}
}
@media (max-width:430px){
body[data-company-theme="raghad"] .raghad-c360-signal-grid{
grid-template-columns:1fr;
}
}
html[dir="rtl"] body[data-company-theme="raghad"]
.raghad-c360-intelligence,
html[dir="rtl"] body[data-company-theme="raghad"]
.raghad-c360-tabs{
text-align:right;
}
/* =========================================================
RAGHAD CUSTOMER 360 — COMMERCE JOURNEY + PURCHASES
========================================================= */
body[data-company-theme="raghad"] .raghad-section-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:18px;
margin-bottom:16px;
}
body[data-company-theme="raghad"] .raghad-section-head h3{
margin:5px 0 4px;
color:#244f34;
font-size:1.15rem;
}
body[data-company-theme="raghad"] .raghad-section-head p{
max-width:720px;
margin:0;
color:#7a806f;
font-size:.78rem;
line-height:1.65;
}
body[data-company-theme="raghad"] .raghad-section-count{
flex:0 0 auto;
padding:7px 11px;
border:1px solid rgba(47,103,67,.11);
border-radius:999px;
background:#edf3e9;
color:#2f6743;
font-size:.7rem;
font-weight:800;
}
body[data-company-theme="raghad"] .raghad-journey-stream{
position:relative;
display:grid;
gap:12px;
padding-inline-start:19px;
}
body[data-company-theme="raghad"] .raghad-journey-stream::before{
content:"";
position:absolute;
inset-block:12px;
inset-inline-start:5px;
width:1px;
background:rgba(47,103,67,.18);
}
body[data-company-theme="raghad"] .raghad-journey-event{
position:relative;
}
body[data-company-theme="raghad"] .raghad-journey-marker{
position:absolute;
inset-inline-start:-18px;
top:18px;
width:9px;
height:9px;
border:2px solid #fffef9;
border-radius:50%;
background:#4f7959;
box-shadow:0 0 0 3px rgba(79,121,89,.13);
}
body[data-company-theme="raghad"] .raghad-journey-card,
body[data-company-theme="raghad"] .raghad-purchase-card{
border:1px solid rgba(47,103,67,.10);
border-radius:18px;
background:#fffef9;
box-shadow:0 9px 25px rgba(42,62,45,.045);
}
body[data-company-theme="raghad"] .raghad-journey-card{
padding:15px 16px;
}
body[data-company-theme="raghad"] .raghad-journey-card-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
}
body[data-company-theme="raghad"] .raghad-journey-card-head span,
body[data-company-theme="raghad"] .raghad-journey-card-head time{
display:block;
color:#8a8e83;
font-size:.68rem;
}
body[data-company-theme="raghad"] .raghad-journey-card-head strong{
display:block;
margin-top:3px;
color:#244f34;
}
body[data-company-theme="raghad"] .raghad-journey-meta{
display:flex;
flex-wrap:wrap;
gap:8px 16px;
margin-top:11px;
color:#747b70;
font-size:.72rem;
}
body[data-company-theme="raghad"] .raghad-journey-meta strong{
color:#3c6249;
}
body[data-company-theme="raghad"] .raghad-purchase-list{
display:grid;
gap:10px;
}
body[data-company-theme="raghad"] .raghad-purchase-card{
display:grid;
grid-template-columns:minmax(220px,1fr) minmax(360px,1.35fr);
align-items:center;
gap:18px;
padding:14px 16px;
}
body[data-company-theme="raghad"] .raghad-purchase-product{
display:flex;
align-items:center;
gap:11px;
min-width:0;
}
body[data-company-theme="raghad"] .raghad-product-mark{
display:grid;
place-items:center;
flex:0 0 38px;
width:38px;
height:38px;
border-radius:13px;
background:#edf3e9;
color:#2f6743;
font-weight:900;
}
body[data-company-theme="raghad"] .raghad-purchase-product strong{
display:block;
overflow-wrap:anywhere;
color:#244f34;
}
body[data-company-theme="raghad"] .raghad-purchase-product small{
display:block;
margin-top:3px;
color:#92968c;
font-size:.67rem;
}
body[data-company-theme="raghad"] .raghad-purchase-metrics{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
body[data-company-theme="raghad"] .raghad-purchase-metrics > div{
min-width:0;
padding:9px 11px;
border-radius:12px;
background:#f7f4ea;
}
body[data-company-theme="raghad"] .raghad-purchase-metrics span{
display:block;
margin-bottom:3px;
color:#8a8e83;
font-size:.64rem;
}
body[data-company-theme="raghad"] .raghad-purchase-metrics strong{
display:block;
overflow-wrap:anywhere;
color:#365c43;
font-size:.75rem;
}
body[data-company-theme="raghad"] .raghad-commerce-empty{
min-height:210px;
display:grid;
place-content:center;
}
body[data-company-theme="raghad"] .raghad-empty-icon{
display:grid;
place-items:center;
width:44px;
height:44px;
margin:0 auto 10px;
border-radius:15px;
background:#edf3e9;
color:#2f6743;
font-size:1.2rem;
}
@media (max-width:900px){
body[data-company-theme="raghad"] .raghad-purchase-card{
grid-template-columns:1fr;
}
}
@media (max-width:720px){
body[data-company-theme="raghad"] .raghad-section-head,
body[data-company-theme="raghad"] .raghad-journey-card-head{
align-items:flex-start;
flex-direction:column;
}
body[data-company-theme="raghad"] .raghad-purchase-metrics{
grid-template-columns:1fr;
}
}
/* =========================================================
RAGHAD CUSTOMER 360 — FAVORITES + REPURCHASE
========================================================= */
body[data-company-theme="raghad"] .raghad-favorites-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
body[data-company-theme="raghad"] .raghad-favorite-card{
display:grid;
gap:14px;
padding:17px;
border:1px solid rgba(47,103,67,.10);
border-radius:20px;
background:#fffef9;
box-shadow:0 10px 28px rgba(42,62,45,.045);
}
body[data-company-theme="raghad"] .raghad-favorite-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
body[data-company-theme="raghad"] .raghad-favorite-rank{
color:#8a8e83;
font-size:.7rem;
font-weight:850;
}
body[data-company-theme="raghad"] .raghad-favorite-primary{
padding:5px 9px;
border-radius:999px;
background:#edf3e9;
color:#2f6743;
font-size:.62rem;
font-weight:850;
}
body[data-company-theme="raghad"] .raghad-favorite-product{
display:flex;
align-items:center;
gap:11px;
min-width:0;
}
body[data-company-theme="raghad"] .raghad-favorite-product strong{
display:block;
overflow-wrap:anywhere;
color:#244f34;
}
body[data-company-theme="raghad"] .raghad-favorite-product small{
display:block;
margin-top:3px;
color:#92968c;
font-size:.67rem;
}
body[data-company-theme="raghad"] .raghad-favorite-metrics{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:7px;
}
body[data-company-theme="raghad"] .raghad-favorite-metrics > div,
body[data-company-theme="raghad"] .raghad-favorite-repurchase > div{
min-width:0;
padding:9px 10px;
border-radius:12px;
background:#f7f4ea;
}
body[data-company-theme="raghad"] .raghad-favorite-metrics span,
body[data-company-theme="raghad"] .raghad-favorite-repurchase span{
display:block;
margin-bottom:4px;
color:#8a8e83;
font-size:.62rem;
}
body[data-company-theme="raghad"] .raghad-favorite-metrics strong,
body[data-company-theme="raghad"] .raghad-favorite-repurchase strong{
display:block;
overflow-wrap:anywhere;
color:#365c43;
font-size:.73rem;
}
body[data-company-theme="raghad"] .raghad-favorite-repurchase{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:7px;
}
body[data-company-theme="raghad"] .raghad-repurchase-list{
display:grid;
gap:10px;
}
body[data-company-theme="raghad"] .raghad-repurchase-card{
display:grid;
grid-template-columns:
minmax(190px,1.25fr)
minmax(130px,.7fr)
minmax(180px,.9fr)
minmax(140px,.7fr);
align-items:center;
gap:12px;
padding:14px 16px;
border:1px solid rgba(47,103,67,.10);
border-radius:18px;
background:#fffef9;
}
body[data-company-theme="raghad"] .raghad-repurchase-product{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
body[data-company-theme="raghad"] .raghad-repurchase-product strong{
display:block;
overflow-wrap:anywhere;
color:#244f34;
}
body[data-company-theme="raghad"] .raghad-repurchase-product small,
body[data-company-theme="raghad"] .raghad-repurchase-date small,
body[data-company-theme="raghad"] .raghad-repurchase-signal small{
display:block;
margin-top:4px;
color:#92968c;
font-size:.64rem;
}
body[data-company-theme="raghad"] .raghad-repurchase-cycle span,
body[data-company-theme="raghad"] .raghad-repurchase-date span{
display:block;
margin-bottom:4px;
color:#8a8e83;
font-size:.63rem;
}
body[data-company-theme="raghad"] .raghad-repurchase-cycle strong,
body[data-company-theme="raghad"] .raghad-repurchase-date strong{
display:block;
color:#365c43;
font-size:.75rem;
overflow-wrap:anywhere;
}
body[data-company-theme="raghad"] .raghad-repurchase-badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:29px;
padding:6px 9px;
border-radius:999px;
font-size:.63rem;
font-weight:850;
text-align:center;
}
body[data-company-theme="raghad"]
.raghad-repurchase-badge[data-status="due"]{
background:#fbe8e3;
color:#9a4033;
}
body[data-company-theme="raghad"]
.raghad-repurchase-badge[data-status="upcoming"]{
background:#fff1d4;
color:#8a6418;
}
body[data-company-theme="raghad"]
.raghad-repurchase-badge[data-status="later"]{
background:#e8f1e5;
color:#356545;
}
body[data-company-theme="raghad"]
.raghad-repurchase-badge[data-status="learning"]{
background:#efeee9;
color:#73756f;
}
@media (max-width:1100px){
body[data-company-theme="raghad"] .raghad-favorite-metrics{
grid-template-columns:repeat(2,minmax(0,1fr));
}
body[data-company-theme="raghad"] .raghad-repurchase-card{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width:760px){
body[data-company-theme="raghad"] .raghad-favorites-grid{
grid-template-columns:1fr;
}
body[data-company-theme="raghad"] .raghad-repurchase-card{
grid-template-columns:1fr;
}
}
@media (max-width:460px){
body[data-company-theme="raghad"] .raghad-favorite-metrics,
body[data-company-theme="raghad"] .raghad-favorite-repurchase{
grid-template-columns:1fr;
}
}
/* =========================================================
RAGHAD CUSTOMER 360 — PREFERENCES
========================================================= */
body[data-company-theme="raghad"] .raghad-consent-status{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:31px;
padding:6px 11px;
border-radius:999px;
font-size:.66rem;
font-weight:850;
white-space:nowrap;
}
body[data-company-theme="raghad"]
.raghad-consent-status[data-consent="yes"]{
background:#e7f1e4;
color:#326443;
}
body[data-company-theme="raghad"]
.raghad-consent-status[data-consent="no"]{
background:#efeee8;
color:#74766f;
}
body[data-company-theme="raghad"] .raghad-preferences-form{
display:grid;
gap:16px;
}
body[data-company-theme="raghad"] .raghad-preferences-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
body[data-company-theme="raghad"] .raghad-c360-field{
display:grid;
gap:7px;
min-width:0;
}
body[data-company-theme="raghad"] .raghad-c360-field > span{
color:#667267;
font-size:.7rem;
font-weight:800;
}
body[data-company-theme="raghad"] .raghad-c360-field input,
body[data-company-theme="raghad"] .raghad-c360-field select,
body[data-company-theme="raghad"] .raghad-c360-field textarea{
width:100%;
min-width:0;
border:1px solid rgba(47,103,67,.14);
border-radius:13px;
background:#fffef9;
color:#294d36;
padding:11px 12px;
outline:none;
}
body[data-company-theme="raghad"] .raghad-c360-field input:focus,
body[data-company-theme="raghad"] .raghad-c360-field select:focus,
body[data-company-theme="raghad"] .raghad-c360-field textarea:focus{
border-color:rgba(47,103,67,.45);
box-shadow:0 0 0 3px rgba(47,103,67,.08);
}
body[data-company-theme="raghad"] .raghad-marketing-consent{
display:flex;
align-items:flex-start;
gap:10px;
padding:13px;
border:1px solid rgba(47,103,67,.10);
border-radius:15px;
background:#f7f4ea;
cursor:pointer;
}
body[data-company-theme="raghad"] .raghad-marketing-consent input{
margin-top:3px;
}
body[data-company-theme="raghad"] .raghad-marketing-consent strong,
body[data-company-theme="raghad"] .raghad-marketing-consent small{
display:block;
}
body[data-company-theme="raghad"] .raghad-marketing-consent strong{
color:#315a3e;
font-size:.75rem;
}
body[data-company-theme="raghad"] .raghad-marketing-consent small{
margin-top:4px;
color:#84897f;
line-height:1.55;
font-size:.65rem;
}
body[data-company-theme="raghad"] .raghad-preference-notes{
grid-column:1 / -1;
}
body[data-company-theme="raghad"] .raghad-form-actions{
display:flex;
justify-content:flex-end;
}
body[data-company-theme="raghad"] .raghad-preferences-readonly{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
}
body[data-company-theme="raghad"] .raghad-preferences-readonly > div{
min-width:0;
padding:13px;
border:1px solid rgba(47,103,67,.09);
border-radius:15px;
background:#f8f5ec;
}
body[data-company-theme="raghad"] .raghad-preferences-readonly span,
body[data-company-theme="raghad"] .raghad-preference-readonly-note > span{
display:block;
margin-bottom:5px;
color:#858a81;
font-size:.65rem;
}
body[data-company-theme="raghad"] .raghad-preferences-readonly strong{
display:block;
overflow-wrap:anywhere;
color:#315a3e;
font-size:.76rem;
}
body[data-company-theme="raghad"] .raghad-preference-readonly-note{
margin-top:12px;
padding:13px;
border-radius:15px;
background:#f8f5ec;
}
body[data-company-theme="raghad"] .raghad-preference-readonly-note p{
margin:0;
color:#45584a;
line-height:1.65;
}
@media (max-width:900px){
body[data-company-theme="raghad"] .raghad-preferences-readonly{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width:700px){
body[data-company-theme="raghad"] .raghad-preferences-grid,
body[data-company-theme="raghad"] .raghad-preferences-readonly{
grid-template-columns:1fr;
}
body[data-company-theme="raghad"] .raghad-form-actions{
justify-content:stretch;
}
body[data-company-theme="raghad"] .raghad-form-actions .crm-primary{
width:100%;
}
}
/* =========================================================
RAGHAD CUSTOMER 360 — FOLLOW-UP CENTER
========================================================= */
body[data-company-theme="raghad"] .raghad-followup-summary{
display:flex;
align-items:center;
gap:9px;
padding:7px 11px;
border-radius:999px;
background:#eef2e7;
color:#58705c;
}
body[data-company-theme="raghad"] .raghad-followup-summary span{
font-size:.66rem;
font-weight:800;
}
body[data-company-theme="raghad"] .raghad-followup-summary strong{
min-width:25px;
text-align:center;
font-size:.78rem;
color:#2f6743;
}
body[data-company-theme="raghad"] .raghad-followup-create{
display:grid;
gap:13px;
margin-bottom:18px;
padding:15px;
border:1px solid rgba(47,103,67,.10);
border-radius:17px;
background:#f8f5ec;
}
body[data-company-theme="raghad"] .raghad-followup-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
body[data-company-theme="raghad"] .raghad-followup-list{
display:grid;
gap:10px;
}
body[data-company-theme="raghad"] .raghad-followup-card{
display:flex;
justify-content:space-between;
gap:16px;
padding:15px;
border:1px solid rgba(47,103,67,.10);
border-radius:17px;
background:#fffef9;
}
body[data-company-theme="raghad"]
.raghad-followup-card[data-status="pending"]{
border-inline-start:4px solid #9a7d38;
}
body[data-company-theme="raghad"]
.raghad-followup-card[data-status="completed"]{
border-inline-start:4px solid #4f805c;
}
body[data-company-theme="raghad"]
.raghad-followup-card[data-status="cancelled"]{
opacity:.72;
}
body[data-company-theme="raghad"] .raghad-followup-main{
flex:1;
min-width:0;
}
body[data-company-theme="raghad"] .raghad-followup-title{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
}
body[data-company-theme="raghad"] .raghad-followup-type{
display:block;
margin-bottom:4px;
color:#819083;
font-size:.64rem;
font-weight:850;
text-transform:uppercase;
letter-spacing:.04em;
}
body[data-company-theme="raghad"] .raghad-followup-title strong{
color:#315a3e;
font-size:.82rem;
overflow-wrap:anywhere;
}
body[data-company-theme="raghad"] .raghad-followup-status{
display:inline-flex;
padding:5px 9px;
border-radius:999px;
background:#efeee8;
color:#70766f;
font-size:.61rem;
font-weight:850;
white-space:nowrap;
}
body[data-company-theme="raghad"]
.raghad-followup-status[data-status="pending"]{
background:#f5edd8;
color:#87691f;
}
body[data-company-theme="raghad"]
.raghad-followup-status[data-status="completed"]{
background:#e6f0e4;
color:#386747;
}
body[data-company-theme="raghad"] .raghad-followup-meta{
display:flex;
flex-wrap:wrap;
gap:7px 14px;
margin-top:9px;
color:#7a837b;
font-size:.65rem;
}
body[data-company-theme="raghad"] .raghad-followup-meta strong{
color:#526b58;
}
body[data-company-theme="raghad"] .raghad-followup-note{
margin:10px 0 0;
color:#536157;
line-height:1.65;
font-size:.72rem;
white-space:pre-wrap;
}
body[data-company-theme="raghad"] .raghad-followup-completed{
margin-top:9px;
color:#63806a;
font-size:.66rem;
}
body[data-company-theme="raghad"] .raghad-followup-actions{
display:flex;
align-items:center;
gap:7px;
}
body[data-company-theme="raghad"] .raghad-followup-actions form{
margin:0;
}
body[data-company-theme="raghad"] .raghad-followup-actions button{
min-height:34px;
padding:7px 10px;
border-radius:10px;
font-size:.65rem;
font-weight:850;
cursor:pointer;
}
body[data-company-theme="raghad"] .raghad-followup-complete{
border:1px solid rgba(47,103,67,.18);
background:#e9f1e6;
color:#326443;
}
body[data-company-theme="raghad"] .raghad-followup-cancel{
border:1px solid rgba(120,89,68,.14);
background:#f4eee9;
color:#7b5949;
}
body[data-company-theme="raghad"] .raghad-c360-empty{
padding:22px;
border:1px dashed rgba(47,103,67,.18);
border-radius:17px;
text-align:center;
background:#faf8f1;
}
body[data-company-theme="raghad"] .raghad-c360-empty strong,
body[data-company-theme="raghad"] .raghad-c360-empty span{
display:block;
}
body[data-company-theme="raghad"] .raghad-c360-empty strong{
color:#315a3e;
}
body[data-company-theme="raghad"] .raghad-c360-empty span{
margin-top:5px;
color:#858b83;
font-size:.68rem;
}
@media (max-width:760px){
body[data-company-theme="raghad"] .raghad-followup-grid{
grid-template-columns:1fr;
}
body[data-company-theme="raghad"] .raghad-followup-card{
flex-direction:column;
}
body[data-company-theme="raghad"] .raghad-followup-actions{
width:100%;
}
body[data-company-theme="raghad"] .raghad-followup-actions form{
flex:1;
}
body[data-company-theme="raghad"] .raghad-followup-actions button{
width:100%;
}
}
/* =========================================================
U20 Scanner Feedback
========================================================= */
.pos-scanner-notice {
position: fixed;
z-index: 100000;
inset-block-start: 22px;
inset-inline-start: 50%;
width: max-content;
max-width: min(520px, calc(100vw - 32px));
padding: 12px 18px;
transform: translate(-50%, -16px);
border: 1px solid rgba(255,255,255,.16);
border-radius: 14px;
background: rgba(17,23,32,.96);
color: #f7f9fc;
box-shadow:
0 18px 55px rgba(0,0,0,.35),
0 4px 14px rgba(0,0,0,.18);
font-size: .8rem;
font-weight: 800;
line-height: 1.4;
text-align: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .16s ease,
transform .16s ease,
visibility .16s ease;
}
.pos-scanner-notice.is-visible {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
.pos-scanner-notice[data-state="success"] {
border-color: rgba(70,220,150,.42);
}
.pos-scanner-notice[data-state="error"] {
border-color: rgba(255,92,118,.48);
}
.pos-scanner-notice[data-state="warning"] {
border-color: rgba(244,197,90,.48);
}
@media (max-width: 560px) {
.pos-scanner-notice {
inset-block-start: 12px;
width: calc(100vw - 24px);
max-width: none;
padding: 11px 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.pos-scanner-notice {
transition: none;
}
}
/* =========================================================
RAGHAD ORGANICS — POS LIGHT WORKSPACE
Ivory / Botanical Green / Sage / Warm Sand
Scoped to Raghad only
========================================================= */
body[data-company-theme="raghad"] .pos-workspace{
background:#f7f4ec;
color:#18382c;
}
body[data-company-theme="raghad"] .pos-catalog{
background:
radial-gradient(
circle at 85% 4%,
rgba(91,126,101,.08),
transparent 30%
),
#fbfaf6;
}
body[data-company-theme="raghad"] .pos-heading h2{
color:#173d2f;
}
body[data-company-theme="raghad"] .pos-heading .eyebrow,
body[data-company-theme="raghad"] .pos-cart-head .eyebrow{
color:#718b7d;
}
body[data-company-theme="raghad"] .pos-history-link{
border-color:#d9ddd2;
background:#fffdf8;
color:#315c49;
}
body[data-company-theme="raghad"] .pos-history-link:hover{
border-color:#8da895;
background:#f0f5ef;
color:#173d2f;
}
body[data-company-theme="raghad"] .pos-search-wrap input{
border-color:#d8ddd3;
background:#fffefa;
color:#20382f;
box-shadow:0 8px 24px rgba(45,75,59,.04);
}
body[data-company-theme="raghad"] .pos-search-wrap input::placeholder{
color:#929d95;
}
body[data-company-theme="raghad"] .pos-search-wrap input:focus{
border-color:#76927e;
box-shadow:0 0 0 3px rgba(82,117,75,.10);
}
body[data-company-theme="raghad"] .pos-search-wrap span{
color:#607d6c;
}
/* Products */
body[data-company-theme="raghad"] .pos-product-card{
border-color:#dde1d8;
background:
linear-gradient(
145deg,
#ffffff 0%,
#faf8f1 100%
);
color:#213b31;
box-shadow:
0 8px 24px rgba(46,65,52,.035);
}
body[data-company-theme="raghad"] .pos-product-card:hover{
transform:translateY(-2px);
border-color:#93aa98;
background:#f4f7f1;
box-shadow:
0 14px 32px rgba(46,76,57,.08);
}
body[data-company-theme="raghad"] .pos-product-mark{
background:#e8efe6;
color:#426b50;
}
body[data-company-theme="raghad"] .pos-product-copy b{
color:#18382c;
}
body[data-company-theme="raghad"] .pos-product-copy small,
body[data-company-theme="raghad"] .pos-product-meta small{
color:#74867b;
}
body[data-company-theme="raghad"] .pos-product-meta b{
color:#173d2f;
}
/* Cart */
body[data-company-theme="raghad"] .pos-cart-panel{
border-left-color:#dde1d8;
background:#f4f1e9;
color:#20382f;
box-shadow:-12px 0 35px rgba(45,60,50,.035);
}
body[data-company-theme="raghad"] .pos-cart-head h3{
color:#173d2f;
}
body[data-company-theme="raghad"] .pos-clear{
color:#75857c;
}
body[data-company-theme="raghad"] .pos-clear:hover{
color:#315c49;
}
body[data-company-theme="raghad"] .pos-customer-row label{
color:#667d70;
}
body[data-company-theme="raghad"] .pos-customer-row select{
border-color:#d9ddd4;
background:#fffdf8;
color:#213b31;
}
body[data-company-theme="raghad"] .pos-cart-empty{
border-color:#d6dcd3;
background:rgba(255,255,255,.32);
color:#7a897f;
}
body[data-company-theme="raghad"] .pos-cart-line{
border-bottom-color:#dde1d8;
}
body[data-company-theme="raghad"] .pos-cart-line b{
color:#20382f;
}
body[data-company-theme="raghad"] .pos-cart-line small{
color:#7b8b81;
}
body[data-company-theme="raghad"] .pos-qty{
border-color:#d5dbd2;
background:#fffdf9;
}
body[data-company-theme="raghad"] .pos-qty button{
background:#f1f4ee;
color:#315c49;
}
body[data-company-theme="raghad"] .pos-qty button:hover{
background:#e5ece3;
}
body[data-company-theme="raghad"] .pos-qty input{
border-color:#d9ded5;
background:#fff;
color:#20382f;
}
body[data-company-theme="raghad"] .pos-line-total{
color:#173d2f;
}
body[data-company-theme="raghad"] .pos-remove{
color:#9a7b73;
}
/* Totals */
body[data-company-theme="raghad"] .pos-summary{
border-top-color:#d8ddd4;
}
body[data-company-theme="raghad"] .pos-summary > div,
body[data-company-theme="raghad"] .pos-discount-row{
color:#65796e;
}
body[data-company-theme="raghad"] .pos-summary b{
color:#20382f;
}
body[data-company-theme="raghad"] .pos-discount-row input{
border-color:#d5dbd2;
background:#fffdf8;
color:#20382f;
}
body[data-company-theme="raghad"] .pos-total-row{
border-top-color:#d5dbd2;
color:#173d2f !important;
}
body[data-company-theme="raghad"] .pos-total-row strong{
color:#173d2f;
}
/* Checkout CTA */
body[data-company-theme="raghad"] .pos-checkout-button{
background:
linear-gradient(
135deg,
#315f49,
#48765c
);
color:#fff;
box-shadow:0 12px 26px rgba(49,95,73,.16);
}
body[data-company-theme="raghad"] .pos-checkout-button:hover:not(:disabled){
background:
linear-gradient(
135deg,
#294f3e,
#3d694f
);
}
body[data-company-theme="raghad"] .pos-checkout-button:disabled{
background:#aebbb1;
color:#eef2ee;
opacity:.62;
}
/* Checkout modal */
body[data-company-theme="raghad"] .inventory-modal.pos-checkout-modal{
border-color:#d7ddd3;
background:#fbfaf6;
color:#20382f;
box-shadow:0 30px 90px rgba(35,55,43,.20);
}
body[data-company-theme="raghad"] .pos-checkout-modal .inventory-modal-close{
border-color:#d8ddd4;
background:#f2f2ec;
color:#315c49;
}
body[data-company-theme="raghad"] .checkout-total-box{
border-color:#d8ddd4;
background:#f2f5ef;
}
body[data-company-theme="raghad"] .checkout-total-box span{
color:#718177;
}
body[data-company-theme="raghad"] .checkout-total-box strong{
color:#173d2f;
}
body[data-company-theme="raghad"] .payment-tab{
border-color:#d8ddd4;
background:#f4f3ed;
color:#65796e;
}
body[data-company-theme="raghad"] .payment-tab.is-active{
border-color:#78947f;
background:#e6eee4;
color:#254c3a;
}
body[data-company-theme="raghad"] .payment-pane label,
body[data-company-theme="raghad"] .checkout-notes{
color:#667d70;
}
body[data-company-theme="raghad"] .payment-pane input,
body[data-company-theme="raghad"] .payment-pane select,
body[data-company-theme="raghad"] .checkout-notes input{
border-color:#d8ddd4;
background:#fffefa;
color:#20382f;
}
body[data-company-theme="raghad"] .checkout-error{
color:#a34949;
}
/* Appointment bridge if POS is opened from an appointment */
body[data-company-theme="raghad"] .pos-appointment-banner{
border-color:#a9bcae;
background:
linear-gradient(
135deg,
#eaf1e8,
#f7f4ec
);
color:#20382f;
}
body[data-company-theme="raghad"] .pos-appointment-banner small{
color:#718177;
}
body[data-company-theme="raghad"] .pos-appointment-banner > strong{
color:#173d2f;
}
/* Scanner feedback */
body[data-company-theme="raghad"] .pos-scanner-notice{
border-color:#b7c5ba;
background:rgba(250,249,244,.97);
color:#20382f;
box-shadow:
0 18px 55px rgba(42,61,49,.14),
0 4px 14px rgba(42,61,49,.08);
}
body[data-company-theme="raghad"] .pos-scanner-notice[data-state="success"]{
border-color:#6ca27d;
}
body[data-company-theme="raghad"] .pos-scanner-notice[data-state="error"]{
border-color:#c97d7d;
}
body[data-company-theme="raghad"] .pos-scanner-notice[data-state="warning"]{
border-color:#c4a45d;
}
/* Responsive */
@media (max-width:900px){
body[data-company-theme="raghad"] .pos-cart-panel{
border-left:0;
border-top:1px solid #dde1d8;
box-shadow:none;
}
}
/* =========================================================
RAGHAD UI-3B
RETAIL LIGHT COMPONENT SYSTEM
Scope: Raghad only
========================================================= */
body[data-company-theme="raghad"]{
--rg-bg:#f7f5ee;
--rg-surface:#fffdf8;
--rg-surface-soft:#f3f1e8;
--rg-surface-green:#eef3e9;
--rg-primary:#52754b;
--rg-primary-dark:#314a2e;
--rg-primary-soft:#e4ecdf;
--rg-sage:#91a687;
--rg-sand:#e7dfcf;
--rg-border:#ddd8cb;
--rg-border-soft:#e9e4d9;
--rg-text:#263128;
--rg-muted:#73796f;
--rg-danger:#a95050;
--rg-shadow:0 18px 50px rgba(53,68,48,.08);
}
/* ---------- Shared page typography ---------- */
body[data-company-theme="raghad"] :is(
.customer-page,
.inventory-page,
.finance-page,
.expense-page,
.report-page,
.audit-page
){
color:var(--rg-text);
}
body[data-company-theme="raghad"] :is(
.customer-hero,
.inventory-head,
.finance-hero,
.expense-hero,
.report-hero,
.audit-hero
) h1,
body[data-company-theme="raghad"] :is(
.customer-hero,
.inventory-head,
.finance-hero,
.expense-hero,
.report-hero,
.audit-hero
) h2{
color:var(--rg-primary-dark);
}
body[data-company-theme="raghad"] :is(
.customer-hero,
.inventory-head,
.finance-hero,
.expense-hero,
.report-hero,
.audit-hero
) p{
color:var(--rg-muted);
}
/* ---------- Cards / panels ---------- */
body[data-company-theme="raghad"] :is(
.crm-table-card,
.crm-form-card,
.crm-panel,
.inventory-table-card,
.inventory-ledger-card,
.finance-card,
.audit-card,
.report-sheet
){
background:var(--rg-surface);
border-color:var(--rg-border);
color:var(--rg-text);
box-shadow:var(--rg-shadow);
}
body[data-company-theme="raghad"] :is(
.crm-table-head,
.crm-panel-head,
.inventory-table-head,
.finance-card-head,
.audit-card-head
){
border-color:var(--rg-border-soft);
}
body[data-company-theme="raghad"] :is(
.crm-table-head,
.crm-panel-head,
.inventory-table-head,
.finance-card-head,
.audit-card-head
) h3{
color:var(--rg-primary-dark);
}
body[data-company-theme="raghad"] :is(
.crm-table-head,
.inventory-table-head,
.finance-card-head,
.audit-card-head
) small{
color:var(--rg-muted);
}
/* ---------- KPI cards ---------- */
body[data-company-theme="raghad"] :is(
.crm-metrics,
.inventory-kpis,
.finance-kpis,
.expense-kpis,
.report-kpis,
.audit-metrics
) article,
body[data-company-theme="raghad"] .finance-kpi{
background:linear-gradient(145deg,var(--rg-surface),var(--rg-surface-soft));
border-color:var(--rg-border);
color:var(--rg-text);
box-shadow:0 10px 32px rgba(53,68,48,.055);
}
body[data-company-theme="raghad"] :is(
.crm-metrics,
.inventory-kpis,
.finance-kpis,
.expense-kpis,
.report-kpis,
.audit-metrics
) span,
body[data-company-theme="raghad"] .finance-kpi span{
color:var(--rg-muted);
}
body[data-company-theme="raghad"] :is(
.crm-metrics,
.inventory-kpis,
.finance-kpis,
.expense-kpis,
.report-kpis,
.audit-metrics
) strong,
body[data-company-theme="raghad"] .finance-kpi strong{
color:var(--rg-primary-dark);
}
/* ---------- Inputs / filters ---------- */
body[data-company-theme="raghad"] :is(
.crm-filter,
.inventory-search,
.finance-actions,
.expense-filters,
.report-range-form,
.audit-filter
) input,
body[data-company-theme="raghad"] :is(
.crm-filter,
.inventory-search,
.finance-actions,
.expense-filters,
.report-range-form,
.audit-filter
) select,
body[data-company-theme="raghad"] :is(
.crm-form-grid,
.expense-form-grid,
.finance-form
) input,
body[data-company-theme="raghad"] :is(
.crm-form-grid,
.expense-form-grid,
.finance-form
) select,
body[data-company-theme="raghad"] :is(
.crm-form-grid,
.expense-form-grid,
.finance-form
) textarea{
background:#fff;
border-color:var(--rg-border);
color:var(--rg-text);
box-shadow:none;
}
body[data-company-theme="raghad"] :is(
.crm-filter,
.inventory-search,
.finance-actions,
.expense-filters,
.report-range-form,
.audit-filter
) input::placeholder,
body[data-company-theme="raghad"] textarea::placeholder{
color:#9b9e95;
}
body[data-company-theme="raghad"] :is(
.crm-filter,
.inventory-search,
.finance-actions,
.expense-filters,
.report-range-form,
.audit-filter
) input:focus,
body[data-company-theme="raghad"] :is(
.crm-filter,
.inventory-search,
.finance-actions,
.expense-filters,
.report-range-form,
.audit-filter
) select:focus,
body[data-company-theme="raghad"] :is(
.crm-form-grid,
.expense-form-grid,
.finance-form
) input:focus,
body[data-company-theme="raghad"] :is(
.crm-form-grid,
.expense-form-grid,
.finance-form
) select:focus,
body[data-company-theme="raghad"] :is(
.crm-form-grid,
.expense-form-grid,
.finance-form
) textarea:focus{
border-color:var(--rg-sage);
box-shadow:0 0 0 3px rgba(82,117,75,.10);
outline:none;
}
/* ---------- Primary / secondary actions ---------- */
body[data-company-theme="raghad"] :is(
.crm-primary,
.inventory-primary,
.report-export-button
){
background:linear-gradient(145deg,var(--rg-primary),var(--rg-primary-dark));
border-color:var(--rg-primary);
color:#fff;
box-shadow:0 10px 24px rgba(82,117,75,.16);
}
body[data-company-theme="raghad"] :is(
.crm-primary,
.inventory-primary,
.report-export-button
):hover{
filter:brightness(.97);
transform:translateY(-1px);
}
body[data-company-theme="raghad"] :is(
.crm-secondary,
.inventory-secondary,
.report-print-button
){
background:var(--rg-surface);
border-color:var(--rg-border);
color:var(--rg-primary-dark);
}
/* ---------- Tables ---------- */
body[data-company-theme="raghad"] :is(
.crm-table,
.inventory-table,
.finance-shift-table,
.expense-table,
.report-table,
.audit-table
){
color:var(--rg-text);
}
body[data-company-theme="raghad"] :is(
.crm-table,
.inventory-table,
.finance-shift-table,
.expense-table,
.report-table,
.audit-table
) th{
background:var(--rg-surface-soft);
color:#6e766b;
border-color:var(--rg-border);
}
body[data-company-theme="raghad"] :is(
.crm-table,
.inventory-table,
.finance-shift-table,
.expense-table,
.report-table,
.audit-table
) td{
color:var(--rg-text);
border-color:var(--rg-border-soft);
}
body[data-company-theme="raghad"] :is(
.crm-table,
.inventory-table,
.finance-shift-table,
.expense-table,
.report-table,
.audit-table
) tbody tr:hover td{
background:#f7f8f3;
}
/* ---------- Customer ---------- */
body[data-company-theme="raghad"] .crm-customer-link{
color:var(--rg-primary-dark);
}
body[data-company-theme="raghad"] .crm-customer-link small,
body[data-company-theme="raghad"] .table-sub{
color:var(--rg-muted);
}
body[data-company-theme="raghad"] .crm-status.active{
background:#e3eee0;
color:#3e6b3b;
}
body[data-company-theme="raghad"] .crm-status.inactive{
background:#f6e8e4;
color:#9a554d;
}
/* ---------- Inventory ---------- */
body[data-company-theme="raghad"] .inventory-modal-backdrop{
background:rgba(38,49,40,.38);
backdrop-filter:blur(5px);
}
body[data-company-theme="raghad"] .inventory-modal{
background:var(--rg-surface);
border-color:var(--rg-border);
color:var(--rg-text);
box-shadow:0 30px 90px rgba(38,49,40,.20);
}
body[data-company-theme="raghad"] .inventory-modal-close{
background:var(--rg-surface-soft);
border-color:var(--rg-border);
color:var(--rg-primary-dark);
}
/* ---------- Finance / Expenses ---------- */
body[data-company-theme="raghad"] .finance-movement{
border-color:var(--rg-border-soft);
}
body[data-company-theme="raghad"] .finance-movement strong,
body[data-company-theme="raghad"] .expense-description{
color:var(--rg-text);
}
body[data-company-theme="raghad"] .finance-movement span,
body[data-company-theme="raghad"] .expense-rule small{
color:var(--rg-muted);
}
body[data-company-theme="raghad"] .expense-rule{
border-color:var(--rg-border-soft);
}
body[data-company-theme="raghad"] .expense-breakdown-track{
background:var(--rg-surface-soft);
}
body[data-company-theme="raghad"] .expense-breakdown-track span{
background:var(--rg-primary);
}
/* ---------- Reports ---------- */
body[data-company-theme="raghad"] .report-period-summary,
body[data-company-theme="raghad"] .report-pnl{
background:var(--rg-surface);
border-color:var(--rg-border);
color:var(--rg-text);
}
body[data-company-theme="raghad"] .report-pnl-row{
border-color:var(--rg-border-soft);
}
body[data-company-theme="raghad"] .report-pnl-highlight,
body[data-company-theme="raghad"] .report-pnl-final{
background:var(--rg-primary-soft);
border-color:#cad8c4;
}
body[data-company-theme="raghad"] .report-pnl-highlight strong,
body[data-company-theme="raghad"] .report-pnl-final strong{
color:var(--rg-primary-dark);
}
body[data-company-theme="raghad"] .report-chart-card{
background:var(--rg-surface);
border-color:var(--rg-border);
box-shadow:var(--rg-shadow);
}
/* ---------- Audit ---------- */
body[data-company-theme="raghad"] .audit-readonly{
background:var(--rg-primary-soft);
border-color:#cad8c4;
color:var(--rg-primary-dark);
}
body[data-company-theme="raghad"] .audit-user,
body[data-company-theme="raghad"] .audit-entity{
color:var(--rg-text);
}
body[data-company-theme="raghad"] .audit-user small,
body[data-company-theme="raghad"] .audit-entity small,
body[data-company-theme="raghad"] .audit-ip,
body[data-company-theme="raghad"] .audit-time,
body[data-company-theme="raghad"] .audit-muted{
color:var(--rg-muted);
}
body[data-company-theme="raghad"] .audit-details summary{
color:var(--rg-primary);
}
body[data-company-theme="raghad"] .audit-details > div{
background:var(--rg-surface-soft);
border-color:var(--rg-border);
color:var(--rg-text);
}
/* ---------- Scrollbars ---------- */
body[data-company-theme="raghad"] :is(
.crm-table-scroll,
.inventory-table-wrap,
.finance-shift-table-wrap,
.expense-table-wrap,
.report-table-wrap,
.report-comparison-table-wrap,
.audit-table-wrap
){
scrollbar-color:var(--rg-sage) var(--rg-surface-soft);
}
/* ---------- Responsive ---------- */
@media (max-width:760px){
body[data-company-theme="raghad"] :is(
.crm-table-card,
.inventory-table-card,
.inventory-ledger-card,
.finance-card,
.audit-card
){
border-radius:16px;
}
}
/* ==========================================================================
REPORT UX 2 — FINANCIAL READABILITY
Scope: Reports page only
========================================================================== */
body:has(.report-kpis) .finance-card {
border: 1px solid rgba(15, 23, 42, .10);
box-shadow: 0 8px 24px rgba(15, 23, 42, .045);
}
body:has(.report-kpis) .finance-card-head {
padding-bottom: 14px;
}
body:has(.report-kpis) .finance-card-head h2 {
font-size: 1.05rem;
font-weight: 750;
letter-spacing: -.02em;
}
/* Sales composition + payment collection */
body:has(.report-kpis) .report-metric-list {
display: grid;
gap: 0;
}
body:has(.report-kpis) .report-metric-list > div {
min-height: 54px;
padding: 12px 2px;
border-bottom: 1px solid rgba(15, 23, 42, .075);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
body:has(.report-kpis) .report-metric-list > div:last-child {
border-bottom: 0;
}
body:has(.report-kpis) .report-metric-list span {
color: #475569;
font-size: .78rem;
font-weight: 650;
line-height: 1.35;
}
body:has(.report-kpis) .report-metric-list strong {
color: #0f172a;
font-size: 1.08rem;
font-weight: 800;
line-height: 1;
letter-spacing: -.025em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Main KPI cards */
body:has(.report-kpis) .report-kpis > * {
min-height: 106px;
}
body:has(.report-kpis) .report-kpis strong {
color: #0f172a;
font-size: 1.28rem;
font-weight: 850;
letter-spacing: -.035em;
font-variant-numeric: tabular-nums;
}
/* Tables */
body:has(.report-kpis) .report-table th {
color: #475569;
font-size: .70rem;
font-weight: 750;
letter-spacing: .035em;
white-space: nowrap;
}
body:has(.report-kpis) .report-table td {
color: #172033;
font-size: .82rem;
font-weight: 600;
padding-top: 14px;
padding-bottom: 14px;
font-variant-numeric: tabular-nums;
}
body:has(.report-kpis) .report-table tbody td:not(:first-child) {
font-weight: 700;
}
/* Improve financial hierarchy */
body:has(.report-kpis) .report-daily .report-table td {
font-size: .84rem;
}
/* Desktop: use card space more efficiently */
@media (min-width: 900px) {
body:has(.report-kpis) .report-metric-list strong {
min-width: 132px;
text-align: right;
}
}
/* Tablet / mobile */
@media (max-width: 899px) {
body:has(.report-kpis) .report-metric-list > div {
min-height: 50px;
}
body:has(.report-kpis) .report-metric-list strong {
font-size: 1rem;
}
}
@media (max-width: 560px) {
body:has(.report-kpis) .report-metric-list > div {
align-items: flex-start;
gap: 10px;
}
body:has(.report-kpis) .report-metric-list span {
font-size: .74rem;
}
body:has(.report-kpis) .report-metric-list strong {
font-size: .96rem;
}
body:has(.report-kpis) .report-table td {
font-size: .78rem;
}
}
/* ==========================================================================
END REPORT UX 2
========================================================================== */
/* ==========================================================================
REPORT UX 3 — HIGH CONTRAST FINANCIAL CARDS
========================================================================== */
body:has(.report-kpis) .report-metric-list > div {
padding: 14px 16px;
}
body:has(.report-kpis) .report-metric-list span {
color: #53665b !important;
opacity: 1 !important;
font-size: .82rem;
font-weight: 650;
}
body:has(.report-kpis) .report-metric-list strong {
color: #173d2f !important;
opacity: 1 !important;
font-size: 1.12rem;
font-weight: 850;
letter-spacing: -.025em;
text-shadow: none !important;
}
/* Cash tendered */
body:has(.report-kpis) .payment-cash-received {
background: rgba(23, 61, 47, .025);
}
/* Change */
body:has(.report-kpis) .payment-change span,
body:has(.report-kpis) .payment-change strong {
color: #9a554d !important;
}
/* Net cash */
body:has(.report-kpis) .payment-net-cash {
margin: 4px 0;
border: 1px solid rgba(47, 103, 67, .18);
border-radius: 12px;
background: rgba(47, 103, 67, .065);
}
body:has(.report-kpis) .payment-net-cash span {
color: #315c49 !important;
font-weight: 750;
}
body:has(.report-kpis) .payment-net-cash strong {
color: #173d2f !important;
font-size: 1.22rem;
}
/* Total collected */
body:has(.report-kpis) .payment-total-collected {
margin: 6px 0;
border: 1px solid rgba(47, 103, 67, .28);
border-radius: 12px;
background: rgba(47, 103, 67, .10);
}
body:has(.report-kpis) .payment-total-collected span {
color: #254c3a !important;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .025em;
}
body:has(.report-kpis) .payment-total-collected strong {
color: #173d2f !important;
font-size: 1.28rem;
font-weight: 900;
}
/* Sales composition */
body:has(.report-kpis) .finance-card .report-metric-list strong {
visibility: visible !important;
-webkit-text-fill-color: #173d2f !important;
}
/* Keep change visually distinct */
body:has(.report-kpis) .payment-change strong {
-webkit-text-fill-color: #9a554d !important;
}
/* Responsive */
@media (max-width: 560px) {
body:has(.report-kpis) .report-metric-list > div {
padding: 12px;
}
body:has(.report-kpis) .report-metric-list strong {
font-size: 1rem;
}
body:has(.report-kpis) .payment-net-cash strong,
body:has(.report-kpis) .payment-total-collected strong {
font-size: 1.08rem;
}
}
/* ==========================================================================
END REPORT UX 3
========================================================================== */
/* ==========================================================================
REPORT UX 4 — DIRECT REPORT SCOPE
========================================================================== */
.report-page .report-metric-list {
display: grid !important;
gap: 0 !important;
}
.report-page .report-metric-list > div {
min-height: 58px !important;
padding: 14px 16px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 24px !important;
border-bottom: 1px solid rgba(23, 61, 47, .09) !important;
}
.report-page .report-metric-list > div:last-child {
border-bottom: 0 !important;
}
.report-page .report-metric-list span {
color: #53665b !important;
-webkit-text-fill-color: #53665b !important;
opacity: 1 !important;
visibility: visible !important;
font-size: .84rem !important;
font-weight: 650 !important;
}
.report-page .report-metric-list strong {
color: #173d2f !important;
-webkit-text-fill-color: #173d2f !important;
opacity: 1 !important;
visibility: visible !important;
font-size: 1.16rem !important;
font-weight: 850 !important;
line-height: 1.1 !important;
letter-spacing: -.025em !important;
font-variant-numeric: tabular-nums !important;
text-shadow: none !important;
white-space: nowrap !important;
}
/* Change returned */
.report-page .payment-change span,
.report-page .payment-change strong {
color: #9a554d !important;
-webkit-text-fill-color: #9a554d !important;
}
/* Net cash */
.report-page .payment-net-cash {
margin: 6px 0 !important;
border: 1px solid rgba(47, 103, 67, .20) !important;
border-radius: 12px !important;
background: rgba(47, 103, 67, .065) !important;
}
.report-page .payment-net-cash span {
color: #315c49 !important;
-webkit-text-fill-color: #315c49 !important;
font-weight: 800 !important;
}
.report-page .payment-net-cash strong {
font-size: 1.25rem !important;
}
/* Total collected */
.report-page .payment-total-collected {
margin: 8px 0 !important;
border: 1px solid rgba(47, 103, 67, .30) !important;
border-radius: 12px !important;
background: rgba(47, 103, 67, .11) !important;
}
.report-page .payment-total-collected span {
color: #254c3a !important;
-webkit-text-fill-color: #254c3a !important;
font-weight: 850 !important;
text-transform: uppercase !important;
letter-spacing: .025em !important;
}
.report-page .payment-total-collected strong {
color: #173d2f !important;
-webkit-text-fill-color: #173d2f !important;
font-size: 1.32rem !important;
font-weight: 900 !important;
}
/* Better card density */
.report-page .report-grid .finance-card {
min-height: auto !important;
}
.report-page .report-grid .finance-card-head {
padding-bottom: 14px !important;
}
@media (max-width: 560px) {
.report-page .report-metric-list > div {
min-height: 52px !important;
padding: 12px !important;
gap: 12px !important;
}
.report-page .report-metric-list strong {
font-size: 1rem !important;
}
.report-page .payment-net-cash strong,
.report-page .payment-total-collected strong {
font-size: 1.10rem !important;
}
}
/* ==========================================================================
END REPORT UX 4
========================================================================== */