/* BinkleStatus Global Theme Tokens + Tailwind Neutral Overrides
- One global theme controlled via:
- Tailwind "dark:" variants still work (we also toggle the 'dark' class in theme.js)
*/
html {
/* fallback (dark) */
--bs-bg: #0b1220;
--bs-panel: #0f172a;
--bs-panel-2: #111c33;
--bs-border: #1f2a44;
--bs-text: #e5e7eb;
--bs-text-2: #cbd5e1;
--bs-muted: #94a3b8;
--bs-muted2: #64748b;
--bs-link: #60a5fa;
--bs-link-hover: #93c5fd;
--bs-focus: #3b82f6;
--bs-shadow: rgba(0,0,0,0.55);
--bs-sidebar-bg: var(--bs-panel);
--bs-sidebar-border: var(--bs-border);
--bs-sidebar-hover-bg: rgba(255,255,255,0.04);
--bs-menu-bg: var(--bs-panel-2);
}
html[data-theme="light"] {
--bs-bg: #f8fafc;
--bs-panel: #ffffff;
--bs-panel-2: #f1f5f9;
--bs-border: #e2e8f0;
--bs-text: #0f172a;
--bs-text-2: #334155;
--bs-muted: #475569;
--bs-muted2: #64748b;
--bs-link: #2563eb;
--bs-link-hover: #1d4ed8;
--bs-focus: #2563eb;
--bs-shadow: rgba(15,23,42,0.14);
--bs-sidebar-hover-bg: rgba(15,23,42,0.04);
--bs-menu-bg: #ffffff;
}
/* Base page colors */
html, body {
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
background-color: var(--bs-bg);
color: var(--bs-text);
}
a { color: var(--bs-link); }
a:hover { color: var(--bs-link-hover); }
:focus-visible {
outline: 2px solid var(--bs-focus);
outline-offset: 2px;
}
/* --- Tailwind neutral color overrides (keeps the markup stable) --- */
/* Backgrounds */
.bg-slate-950, .bg-gray-950 { background-color: var(--bs-bg) !important; }
.bg-slate-900, .bg-gray-900 { background-color: var(--bs-panel) !important; }
.bg-slate-800, .bg-gray-800 { background-color: var(--bs-panel-2) !important; }
.bg-gray-100, .bg-slate-100 { background-color: var(--bs-bg) !important; }
.bg-gray-200, .bg-slate-200 { background-color: var(--bs-panel-2) !important; }
.bg-gray-700, .bg-slate-700 { background-color: var(--bs-panel-2) !important; }
.bg-white { background-color: var(--bs-panel) !important; }
/* Translucent utility classes often used for headers/cards */
.bg-white\/60 { background-color: rgba(255,255,255,0.60) !important; }
.bg-white\/80 { background-color: rgba(255,255,255,0.80) !important; }
html[data-theme="dark"] .bg-white\/60,
html[data-theme="dark"] .bg-white\/80 {
background-color: rgba(15,23,42,0.55) !important;
}
/* Borders */
.border-slate-800, .border-gray-800,
.border-slate-700, .border-gray-700,
.border-gray-200, .border-gray-300,
.border-gray-600, .border-slate-600,
.border-gray-500, .border-slate-500 {
border-color: var(--bs-border) !important;
}
/* Text */
.text-slate-100, .text-gray-100,
.text-slate-200, .text-gray-200,
.text-gray-900, .text-slate-900 {
color: var(--bs-text) !important;
}
.text-slate-300, .text-gray-300,
.text-slate-800, .text-gray-800 {
color: var(--bs-text-2) !important;
}
.text-slate-400, .text-gray-400,
.text-slate-500, .text-gray-500,
.text-gray-600, .text-gray-700 {
color: var(--bs-muted) !important;
}
/* Hover text (common) */
.hover\:text-slate-300:hover,
.hover\:text-gray-300:hover {
color: var(--bs-text-2) !important;
}
.hover\:bg-gray-50:hover { background-color: var(--bs-panel-2) !important; }
/* Inputs (helpful defaults) */
input, select, textarea {
color: inherit;
}
/* ---------- BinkleStatus "Agent-style" Buttons ---------- */
/* Less pill-like, more "glass" (translucent) to match the agent UI */
:root {
--bs-accent: #3b82f6;
--bs-accent-2: #60a5fa;
--bs-success: #22c55e;
--bs-danger: #ef4444;
--bs-btn-radius: 0.42rem;
--bs-glass-blur: 4px;
}
.bs-btn {
--bs-btn-bg: rgba(255,255,255,0.035);
--bs-btn-bg2: rgba(255,255,255,0.035);
--bs-btn-hover: rgba(255,255,255,0.055);
--bs-btn-border: rgba(148,163,184,0.22);
--bs-btn-text: var(--bs-text);
--bs-btn-shadow: 0 2px 10px rgba(0,0,0,0.18);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.52rem 0.90rem;
border-radius: var(--bs-btn-radius);
border: 1px solid var(--bs-btn-border);
background: var(--bs-btn-bg);
color: var(--bs-btn-text);
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1;
box-shadow: var(--bs-btn-shadow);
cursor: pointer;
user-select: none;
backdrop-filter: blur(var(--bs-glass-blur));
-webkit-backdrop-filter: blur(var(--bs-glass-blur));
transition: box-shadow 120ms ease, border-color 120ms ease, background 120ms ease, opacity 120ms ease;
}
html[data-theme="light"] .bs-btn {
--bs-btn-bg: rgba(255,255,255,0.78);
--bs-btn-bg2: rgba(255,255,255,0.78);
--bs-btn-hover: rgba(255,255,255,0.90);
--bs-btn-border: rgba(15,23,42,0.14);
--bs-btn-shadow: 0 6px 16px rgba(15,23,42,0.10);
--bs-btn-text: #0f172a;
}
.bs-btn:hover {
background: var(--bs-btn-hover);
border-color: rgba(148,163,184,0.34);
box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
html[data-theme="light"] .bs-btn:hover {
border-color: rgba(15,23,42,0.18);
box-shadow: 0 8px 18px rgba(15,23,42,0.10);
}
.bs-btn:active {
background: rgba(255,255,255,0.030);
box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
html[data-theme="light"] .bs-btn:active {
background: rgba(15,23,42,0.030);
box-shadow: 0 6px 14px rgba(15,23,42,0.08);
}
.bs-btn:focus-visible {
outline: 2px solid var(--bs-focus);
outline-offset: 2px;
}
.bs-btn:disabled, .bs-btn[disabled] {
opacity: 0.55;
cursor: not-allowed;
transform: none !important;
box-shadow: none;
}
.bs-btn-sm {
padding: 0.42rem 0.72rem;
font-size: 0.90rem;
border-radius: calc(var(--bs-btn-radius) - 0.10rem);
}
.bs-btn-xs {
padding: 0.36rem 0.60rem;
font-size: 0.82rem;
border-radius: calc(var(--bs-btn-radius) - 0.12rem);
}
.bs-btn-outline {
background: transparent;
box-shadow: none;
backdrop-filter: blur(var(--bs-glass-blur));
-webkit-backdrop-filter: blur(var(--bs-glass-blur));
}
.bs-btn-outline:hover {
background: rgba(255,255,255,0.045);
box-shadow: none;
}
html[data-theme="light"] .bs-btn-outline:hover {
background: rgba(15,23,42,0.035);
}
/* Tinted (still translucent) variants */
.bs-btn-primary {
--bs-btn-bg: rgba(59,130,246,0.10);
--bs-btn-bg2: rgba(59,130,246,0.10);
--bs-btn-hover: rgba(96,165,250,0.14);
--bs-btn-border: rgba(96,165,250,0.40);
--bs-btn-text: #eaf2ff;
}
html[data-theme="light"] .bs-btn-primary {
--bs-btn-bg: rgba(59,130,246,0.08);
--bs-btn-bg2: rgba(59,130,246,0.08);
--bs-btn-hover: rgba(59,130,246,0.12);
--bs-btn-border: rgba(59,130,246,0.28);
--bs-btn-text: #0f172a;
}
.bs-btn-success {
--bs-btn-bg: rgba(34,197,94,0.10);
--bs-btn-bg2: rgba(34,197,94,0.10);
--bs-btn-hover: rgba(74,222,128,0.14);
--bs-btn-border: rgba(74,222,128,0.40);
--bs-btn-text: #eafff1;
}
html[data-theme="light"] .bs-btn-success {
--bs-btn-bg: rgba(34,197,94,0.08);
--bs-btn-bg2: rgba(34,197,94,0.08);
--bs-btn-hover: rgba(34,197,94,0.12);
--bs-btn-border: rgba(34,197,94,0.28);
--bs-btn-text: #0f172a;
}
.bs-btn-danger {
--bs-btn-bg: rgba(239,68,68,0.10);
--bs-btn-bg2: rgba(239,68,68,0.10);
--bs-btn-hover: rgba(252,165,165,0.14);
--bs-btn-border: rgba(252,165,165,0.40);
--bs-btn-text: #fff0f0;
}
html[data-theme="light"] .bs-btn-danger {
--bs-btn-bg: rgba(239,68,68,0.08);
--bs-btn-bg2: rgba(239,68,68,0.08);
--bs-btn-hover: rgba(239,68,68,0.12);
--bs-btn-border: rgba(239,68,68,0.28);
--bs-btn-text: #0f172a;
}
/* ------------------------------------------------------------
Wide layout helpers (tables + page width)
Usage:
- Wrap content in: …
- Wide tables:
- Use to control column widths on wide lists.
------------------------------------------------------------ */
.bs-page{
max-width: 1600px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.bs-pad{
padding-left: 16px;
padding-right: 16px;
}
@media (min-width: 1024px){
.bs-pad{
padding-left: 24px;
padding-right: 24px;
}
}
.bs-table{
width: 100%;
}
.bs-table-fixed{
table-layout: fixed;
}
.bs-table-compact th,
.bs-table-compact td{
padding: 10px 12px;
}
.bs-table-compact td{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bs-table-compact td.bs-wrap{
white-space: normal;
}
/* ---------- Cards + Forms (global, professional) ---------- */
:root{
--bs-focus-ring: rgba(59,130,246,0.22);
--bs-panel-glass: rgba(255,255,255,0.035);
--bs-panel-glass-2: rgba(255,255,255,0.025);
}
html[data-theme="light"]{
--bs-focus-ring: rgba(37,99,235,0.18);
--bs-panel-glass: rgba(15,23,42,0.02);
--bs-panel-glass-2: rgba(15,23,42,0.01);
}
.bs-card{
position: relative;
border: 1px solid var(--bs-border);
border-radius: 1rem;
background: linear-gradient(180deg, var(--bs-panel-glass), var(--bs-panel-glass-2)), var(--bs-panel);
box-shadow: 0 10px 28px rgba(0,0,0,0.18);
padding: 1.25rem;
box-sizing: border-box;
}
html[data-theme="light"] .bs-card{
box-shadow: 0 10px 26px rgba(15,23,42,0.08);
}
.bs-card-flush{ padding: 0; }
.bs-card-accent::before{
content:"";
position:absolute;
left:0;
right:0;
top:0;
height:2px;
/* Subtle signature accent line (slightly "status green" to match the portal vibe) */
background: linear-gradient(90deg, rgba(34,197,94,0.88), rgba(16,185,129,0.35), transparent 70%);
opacity: 0.85;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
html[data-theme="light"] .bs-card-accent::before{
background: linear-gradient(90deg, rgba(22,163,74,0.82), rgba(16,185,129,0.28), transparent 70%);
}
.bs-card-header{
display:flex;
align-items:center;
justify-content:space-between;
gap: 0.75rem;
margin-bottom: 0.9rem;
}
.bs-card-title{
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--bs-text);
}
.bs-card-subtitle{
margin-top: 0.15rem;
font-size: 0.78rem;
color: var(--bs-muted2);
}
.bs-label{
display:block;
font-size: 0.75rem;
font-weight: 600;
color: var(--bs-text-2);
margin-bottom: 0.35rem;
}
.bs-help{
margin-top: 0.35rem;
font-size: 0.75rem;
color: var(--bs-muted2);
}
.bs-input,
.bs-select,
.bs-multiselect{
width: 100%;
border-radius: 0.55rem;
border: 1px solid rgba(148,163,184,0.22);
background: rgba(2,6,23,0.18);
color: var(--bs-text);
padding: 0.55rem 0.75rem;
font-size: 0.9rem;
outline: none;
box-shadow: none;
transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
html[data-theme="light"] .bs-input,
html[data-theme="light"] .bs-select,
html[data-theme="light"] .bs-multiselect{
border: 1px solid rgba(15,23,42,0.14);
background: rgba(255,255,255,0.85);
color: #0f172a;
}
.bs-input:focus,
.bs-select:focus,
.bs-multiselect:focus{
border-color: rgba(59,130,246,0.55);
box-shadow: 0 0 0 3px var(--bs-focus-ring);
background: rgba(2,6,23,0.24);
}
html[data-theme="light"] .bs-input:focus,
html[data-theme="light"] .bs-select:focus,
html[data-theme="light"] .bs-multiselect:focus{
border-color: rgba(37,99,235,0.55);
background: rgba(255,255,255,0.95);
}
.bs-multiselect{
height: 9rem;
padding: 0.45rem 0.6rem;
}
.bs-checkbox{
width: 1rem;
height: 1rem;
accent-color: var(--bs-accent);
}
.bs-form-section{
border: 1px solid var(--bs-border);
border-radius: 0.9rem;
background: rgba(255,255,255,0.03);
padding: 1rem;
}
html[data-theme="light"] .bs-form-section{
background: rgba(15,23,42,0.02);
}
.bs-form-section-accent{
border-left: 3px solid rgba(59,130,246,0.55);
}
html[data-theme="light"] .bs-form-section-accent{
border-left: 3px solid rgba(37,99,235,0.55);
}
.bs-form-section-success{
border-left: 3px solid rgba(34,197,94,0.55);
}
.bs-actions{
display:flex;
align-items:center;
justify-content:space-between;
gap: 0.75rem;
padding-top: 0.9rem;
border-top: 1px solid var(--bs-border);
}
.bs-input.flex-1{ width:auto; }
/* --- Safeguard: Categories multiselect rendering (SiteMgmt) --- */
/* Some patches/pages rely on #categoriesSelect without additional utility classes.
Ensure it always renders full-width with correct dark/light colors. */
#categoriesSelect {
display: block;
width: 100% !important;
min-width: 18rem;
box-sizing: border-box;
/* match .bs-multiselect */
border-radius: 0.55rem;
border: 1px solid rgba(148,163,184,0.22);
background: rgba(2,6,23,0.18);
color: var(--bs-text);
padding: 0.45rem 0.6rem;
height: 9rem;
outline: none;
box-shadow: none;
transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
color-scheme: dark;
}
html[data-theme="light"] #categoriesSelect {
border: 1px solid rgba(15,23,42,0.14);
background: rgba(255,255,255,0.85);
color: #0f172a;
color-scheme: light;
}
#categoriesSelect:focus {
border-color: rgba(59,130,246,0.55);
box-shadow: 0 0 0 3px var(--bs-focus-ring);
background: rgba(2,6,23,0.24);
}
html[data-theme="light"] #categoriesSelect:focus {
border-color: rgba(37,99,235,0.55);
background: rgba(255,255,255,0.95);
}
#categoriesSelect option {
/* Browsers vary; keep it readable */
color: inherit;
}
/* Simple modal primitives (used by MSP tenant attach UI) */
body.bs-modal-open { overflow: hidden; }
.bs-modal-overlay {
position: fixed;
inset: 0;
z-index: 3000;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(0,0,0,0.55);
}
.bs-modal-overlay.hidden { display: none; }
.bs-modal {
width: min(560px, 100%);
background: var(--bs-panel);
border: 1px solid var(--bs-border);
border-radius: 0.9rem;
box-shadow: 0 22px 60px rgba(0,0,0,0.45);
overflow: hidden;
}
.bs-modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid var(--bs-border);
}
.bs-modal-title { font-weight: 700; font-size: 1rem; color: var(--bs-text); }
.bs-modal-sub { margin-top: 2px; font-size: 0.78rem; color: var(--bs-text-2); }
.bs-modal-x {
border: 1px solid var(--bs-border);
background: rgba(255,255,255,0.04);
color: var(--bs-text);
width: 34px;
height: 34px;
border-radius: 0.55rem;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.bs-modal-x:hover { background: rgba(255,255,255,0.07); }
.bs-modal-body { padding: 14px 16px; }
.bs-modal-foot {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 12px 16px;
border-top: 1px solid var(--bs-border);
}
.bs-form-grid { display: grid; gap: 12px; }
.bs-form-row { display: grid; gap: 6px; }
.bs-help { font-size: 0.78rem; color: var(--bs-text-2); }
.bs-callout {
margin-top: 12px;
padding: 10px 12px;
border-radius: 0.6rem;
border: 1px solid var(--bs-border);
background: rgba(255,255,255,0.03);
color: var(--bs-text);
font-size: 0.85rem;
}
.bs-callout.hidden { display: none; }
.bs-callout-ok { border-color: rgba(34,197,94,0.55); background: rgba(34,197,94,0.10); }
.bs-callout-error { border-color: rgba(239,68,68,0.55); background: rgba(239,68,68,0.10); }
/* === Auth Pages (Signup/Login/Forgot/Reset/Verify) === */
.bs-auth-page {
min-height: 100vh;
background: radial-gradient(1200px 600px at 20% 0%, rgba(96,165,250,0.18), transparent 55%),
radial-gradient(1000px 600px at 80% 20%, rgba(34,197,94,0.10), transparent 60%),
linear-gradient(180deg, var(--bs-bg), #070d18 75%);
color: var(--bs-text);
display: flex;
align-items: center;
justify-content: center;
padding: 28px 16px;
}
.bs-auth-page *,
.bs-auth-page *::before,
.bs-auth-page *::after {
box-sizing: border-box;
}
.bs-auth-card {
width: 100%;
max-width: 1300px;
border: 1px solid var(--bs-border);
background: linear-gradient(180deg, var(--bs-panel), var(--bs-panel-2));
border-radius: 18px;
box-shadow: 0 24px 60px rgba(0,0,0,0.45);
overflow: hidden;
}
.bs-auth-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
}
@media (min-width: 881px) {
.bs-auth-grid.bs-auth-grid-wide-right { grid-template-columns: 0.72fr 1.28fr; }
}
@media (max-width: 880px) {
.bs-auth-grid { grid-template-columns: 1fr; }
.bs-auth-left { display: none; }
}
.bs-auth-left {
padding: 32px 34px;
border-right: 1px solid var(--bs-border);
background:
radial-gradient(800px 420px at 30% 10%, rgba(96,165,250,0.18), transparent 60%),
radial-gradient(620px 420px at 70% 60%, rgba(245,158,11,0.10), transparent 60%),
linear-gradient(180deg, rgba(15,23,42,0.65), rgba(15,23,42,0.25));
}
.bs-auth-right {
padding: 22px 22px 20px;
}
.bs-auth-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
.bs-auth-logo {
width: 64px;
height: 64px;
border-radius: 14px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--bs-border);
display: grid;
place-items: center;
flex: 0 0 auto;
}
.bs-auth-logo img {
width: 56px;
height: 56px;
object-fit: contain;
display: block;
}
.bs-auth-logo-plain {
width: auto;
height: auto;
border-radius: 0;
background: transparent;
border: none;
padding: 0;
display: block;
}
.bs-auth-logo-plain img {
width: 200px;
height: auto;
max-width: 70vw;
max-height: 200px;
object-fit: contain;
}
.bs-auth-title {
font-size: 22px;
font-weight: 760;
letter-spacing: 0.2px;
margin: 0;
}
.bs-auth-subtitle {
margin: 3px 0 0;
color: var(--bs-muted);
font-size: 13px;
}
.bs-form {
display: grid;
gap: 14px;
}
.bs-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 18px;
row-gap: 14px;
}
@media (max-width: 520px) {
.bs-row-2 { grid-template-columns: 1fr; }
}
.bs-label {
display: block;
font-size: 12px;
color: var(--bs-muted);
margin: 0 0 6px;
}
.bs-input, .bs-select {
width: 100%;
padding: 10px 11px;
border-radius: 12px;
border: 1px solid var(--bs-border);
background: rgba(2,6,23,0.35);
color: var(--bs-text);
outline: none;
}
html[data-theme="light"] .bs-input,
html[data-theme="light"] .bs-select {
background: rgba(255,255,255,0.65);
}
.bs-input:focus, .bs-select:focus {
border-color: rgba(96,165,250,0.85);
box-shadow: 0 0 0 3px rgba(96,165,250,0.18);
}
.bs-help {
margin-top: 6px;
font-size: 12px;
color: var(--bs-muted2);
}
.bs-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 11px 12px;
border-radius: 12px;
border: 1px solid rgba(96,165,250,0.45);
background: rgba(96,165,250,0.16);
color: var(--bs-text);
font-weight: 700;
cursor: pointer;
}
.bs-btn:hover { background: rgba(96,165,250,0.22); }
.bs-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.bs-btn-secondary {
border-color: var(--bs-border);
background: rgba(255,255,255,0.03);
}
.bs-btn-secondary:hover { background: rgba(255,255,255,0.06); }
.bs-inline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.bs-links {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 8px;
font-size: 13px;
}
.bs-links a { color: var(--bs-link); text-decoration: none; }
.bs-links a:hover { color: var(--bs-link-hover); text-decoration: underline; }
.bs-callout {
border: 1px solid var(--bs-border);
background: rgba(2,6,23,0.25);
border-radius: 12px;
padding: 10px 11px;
font-size: 13px;
color: var(--bs-text-2);
}
.bs-callout.error {
border-color: rgba(239,68,68,0.55);
background: rgba(239,68,68,0.10);
}
.bs-callout.success {
border-color: rgba(34,197,94,0.55);
background: rgba(34,197,94,0.10);
}
.bs-spinner {
width: 16px;
height: 16px;
border-radius: 999px;
border: 2px solid rgba(255,255,255,0.25);
border-top-color: rgba(255,255,255,0.95);
animation: bsSpin 0.8s linear infinite;
}
@keyframes bsSpin { to { transform: rotate(360deg); } }
.bs-pwlist {
list-style: none;
padding: 0;
margin: 10px 0 0;
display: grid;
gap: 6px;
font-size: 12px;
color: var(--bs-muted);
}
.bs-pwlist li { display: flex; align-items: center; gap: 8px; }
.bs-dot {
width: 10px; height: 10px; border-radius: 999px;
background: rgba(148,163,184,0.35);
border: 1px solid rgba(148,163,184,0.45);
}
.bs-dot.ok {
background: rgba(34,197,94,0.40);
border-color: rgba(34,197,94,0.70);
}
.bs-toast-stack {
position: fixed;
right: 14px;
bottom: 14px;
display: grid;
gap: 10px;
z-index: 9999;
}
.bs-toast {
border: 1px solid var(--bs-border);
background: rgba(2,6,23,0.85);
color: var(--bs-text);
padding: 10px 12px;
border-radius: 12px;
min-width: 240px;
box-shadow: 0 10px 30px rgba(0,0,0,0.35);
font-size: 13px;
}
.bs-toast.ok { border-color: rgba(34,197,94,0.6); }
.bs-toast.err { border-color: rgba(239,68,68,0.6); }
/* Hide any "Share" buttons/links on auth pages (signup/login/verify/reset) */
.bs-auth-page button[aria-label*="share" i],
.bs-auth-page a[aria-label*="share" i],
.bs-auth-page button[title*="share" i],
.bs-auth-page a[title*="share" i],
.bs-auth-page .share-btn,
.bs-auth-page .bs-share,
.bs-auth-page .bs-share-btn,
.bs-auth-page [data-action="share"] {
display: none !important;
}
/* ========================================================================
BinkleStatus UI Standard v2 - Action Buttons
Shared by legacy .bs-btn controls and Automation Center .ac-btn controls.
======================================================================== */
:root {
--bs-action-height: 2.25rem;
--bs-action-radius: 0.55rem;
--bs-action-font-size: 0.8125rem;
--bs-action-gap: 0.42rem;
--bs-action-bg: rgba(15, 23, 42, 0.34);
--bs-action-bg-hover: rgba(30, 41, 59, 0.58);
--bs-action-border: rgba(148, 163, 184, 0.20);
--bs-action-border-hover: rgba(148, 163, 184, 0.34);
--bs-action-text: #dbe7f5;
--bs-action-muted-text: #b8c5d6;
--bs-action-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
--bs-action-primary: #2f6fdd;
--bs-action-primary-hover: #397deb;
--bs-action-primary-border: rgba(96, 165, 250, 0.72);
}
html[data-theme="light"] {
--bs-action-bg: rgba(255, 255, 255, 0.82);
--bs-action-bg-hover: #ffffff;
--bs-action-border: rgba(15, 23, 42, 0.14);
--bs-action-border-hover: rgba(15, 23, 42, 0.24);
--bs-action-text: #1e293b;
--bs-action-muted-text: #475569;
--bs-action-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
--bs-action-primary: #2563d9;
--bs-action-primary-hover: #1d4ed8;
--bs-action-primary-border: rgba(37, 99, 235, 0.82);
}
.bs-btn,
.ac-btn {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--bs-action-gap);
min-height: var(--bs-action-height);
padding: 0 0.78rem;
border: 1px solid var(--bs-action-border);
border-radius: var(--bs-action-radius);
background: var(--bs-action-bg);
color: var(--bs-action-text);
box-shadow: var(--bs-action-shadow);
font-family: inherit;
font-size: var(--bs-action-font-size);
font-weight: 620;
line-height: 1;
letter-spacing: 0;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
user-select: none;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition:
background-color 120ms ease,
border-color 120ms ease,
color 120ms ease,
box-shadow 120ms ease,
opacity 120ms ease;
}
.bs-btn:hover,
.ac-btn:hover {
background: var(--bs-action-bg-hover);
border-color: var(--bs-action-border-hover);
color: var(--bs-text);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
transform: none;
}
html[data-theme="light"] .bs-btn:hover,
html[data-theme="light"] .ac-btn:hover {
box-shadow: 0 2px 5px rgba(15, 23, 42, 0.10);
}
.bs-btn:active,
.ac-btn:active {
background: rgba(15, 23, 42, 0.58);
border-color: var(--bs-action-border-hover);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.14);
transform: none;
}
html[data-theme="light"] .bs-btn:active,
html[data-theme="light"] .ac-btn:active {
background: #f1f5f9;
}
.bs-btn:focus-visible,
.ac-btn:focus-visible {
outline: none;
border-color: rgba(96, 165, 250, 0.84);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.bs-btn:disabled,
.bs-btn[disabled],
.ac-btn:disabled,
.ac-btn[disabled],
.bs-btn[aria-disabled="true"],
.ac-btn[aria-disabled="true"] {
opacity: 0.46;
cursor: not-allowed;
box-shadow: none;
pointer-events: none;
}
.bs-btn-primary,
.ac-btn-primary {
border-color: var(--bs-action-primary-border);
background: var(--bs-action-primary);
color: #ffffff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.035) inset;
}
.bs-btn-primary:hover,
.ac-btn-primary:hover {
border-color: rgba(147, 197, 253, 0.86);
background: var(--bs-action-primary-hover);
color: #ffffff;
box-shadow: 0 3px 8px rgba(37, 99, 235, 0.22);
}
.bs-btn-primary:active,
.ac-btn-primary:active {
background: #245cc0;
color: #ffffff;
}
.bs-btn-success,
.ac-btn-success {
border-color: rgba(52, 211, 153, 0.42);
background: rgba(6, 95, 70, 0.28);
color: #a7f3d0;
}
.bs-btn-success:hover,
.ac-btn-success:hover {
border-color: rgba(52, 211, 153, 0.62);
background: rgba(6, 95, 70, 0.42);
color: #d1fae5;
}
.bs-btn-soft,
.ac-btn-soft {
border-color: rgba(96, 165, 250, 0.30);
background: rgba(37, 99, 235, 0.12);
color: #bfdbfe;
box-shadow: none;
}
.bs-btn-soft:hover,
.ac-btn-soft:hover {
border-color: rgba(96, 165, 250, 0.48);
background: rgba(37, 99, 235, 0.20);
color: #dbeafe;
}
.bs-btn-ghost,
.ac-btn-ghost,
.bs-btn-outline,
.ac-btn-outline {
border-color: var(--bs-action-border);
background: rgba(148, 163, 184, 0.025);
color: var(--bs-action-muted-text);
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.bs-btn-ghost:hover,
.ac-btn-ghost:hover,
.bs-btn-outline:hover,
.ac-btn-outline:hover {
border-color: var(--bs-action-border-hover);
background: rgba(148, 163, 184, 0.08);
color: var(--bs-text);
box-shadow: none;
}
.bs-btn-danger,
.ac-btn-danger {
border-color: rgba(244, 63, 94, 0.44);
background: rgba(159, 18, 57, 0.28);
color: #fecdd3;
box-shadow: none;
}
.bs-btn-danger:hover,
.ac-btn-danger:hover {
border-color: rgba(251, 113, 133, 0.64);
background: rgba(159, 18, 57, 0.44);
color: #ffe4e6;
box-shadow: 0 2px 6px rgba(159, 18, 57, 0.16);
}
.bs-btn-danger-ghost,
.ac-btn-danger-ghost {
border-color: rgba(244, 63, 94, 0.30);
background: rgba(159, 18, 57, 0.035);
color: #fda4af;
box-shadow: none;
}
.bs-btn-danger-ghost:hover,
.ac-btn-danger-ghost:hover {
border-color: rgba(251, 113, 133, 0.52);
background: rgba(159, 18, 57, 0.16);
color: #fecdd3;
box-shadow: none;
}
html[data-theme="light"] .bs-btn-soft,
html[data-theme="light"] .ac-btn-soft {
color: #1d4ed8;
background: rgba(37, 99, 235, 0.07);
}
html[data-theme="light"] .bs-btn-danger,
html[data-theme="light"] .ac-btn-danger {
color: #be123c;
background: rgba(244, 63, 94, 0.07);
}
html[data-theme="light"] .bs-btn-ghost,
html[data-theme="light"] .ac-btn-ghost,
html[data-theme="light"] .bs-btn-outline,
html[data-theme="light"] .ac-btn-outline {
background: rgba(255, 255, 255, 0.36);
}
html[data-theme="light"] .bs-btn-danger-ghost,
html[data-theme="light"] .ac-btn-danger-ghost {
border-color: rgba(225, 29, 72, 0.26);
background: rgba(244, 63, 94, 0.025);
color: #be123c;
}
.bs-btn-sm,
.ac-btn-sm {
min-height: 2rem;
padding: 0 0.66rem;
border-radius: 0.48rem;
font-size: 0.75rem;
}
.bs-btn-xs,
.ac-btn-xs {
min-height: 1.75rem;
padding: 0 0.55rem;
border-radius: 0.44rem;
font-size: 0.72rem;
}
.bs-btn-lg,
.ac-btn-lg {
min-height: 2.55rem;
padding: 0 0.95rem;
font-size: 0.875rem;
}
.bs-btn-icon,
.ac-btn-icon {
width: var(--bs-action-height);
padding: 0;
}
.bs-btn-sm.bs-btn-icon,
.ac-btn-sm.ac-btn-icon {
width: 2rem;
}
.bs-action-group,
.ac-action-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.38rem;
}
.bs-action-divider,
.ac-action-divider {
width: 1px;
height: 1.5rem;
margin: 0 0.12rem;
background: var(--bs-border);
}
/* ========================================================================
BinkleStatus UI Standard v2 - Automatic Button Compatibility Bridge
Higher-specificity rules let shared action controls replace page-local
Tailwind/button skins without disturbing widths, visibility, or layout.
======================================================================== */
button.bs-btn[data-bs-button-auto="true"],
input.bs-btn[data-bs-button-auto="true"],
a.bs-btn[data-bs-button-auto="true"] {
min-height: var(--bs-action-height) !important;
padding: 0 0.78rem !important;
border: 1px solid var(--bs-action-border) !important;
border-radius: var(--bs-action-radius) !important;
background: var(--bs-action-bg) !important;
color: var(--bs-action-text) !important;
box-shadow: var(--bs-action-shadow) !important;
font-family: inherit !important;
font-size: var(--bs-action-font-size) !important;
font-weight: 620 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-decoration: none !important;
white-space: nowrap !important;
transform: none !important;
}
button.bs-btn[data-bs-button-auto="true"]:hover,
input.bs-btn[data-bs-button-auto="true"]:hover,
a.bs-btn[data-bs-button-auto="true"]:hover {
border-color: var(--bs-action-border-hover) !important;
background: var(--bs-action-bg-hover) !important;
color: var(--bs-text) !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18) !important;
transform: none !important;
}
button.bs-btn.bs-btn-primary[data-bs-button-auto="true"],
input.bs-btn.bs-btn-primary[data-bs-button-auto="true"],
a.bs-btn.bs-btn-primary[data-bs-button-auto="true"] {
border-color: var(--bs-action-primary-border) !important;
background: var(--bs-action-primary) !important;
color: #fff !important;
}
button.bs-btn.bs-btn-primary[data-bs-button-auto="true"]:hover,
input.bs-btn.bs-btn-primary[data-bs-button-auto="true"]:hover,
a.bs-btn.bs-btn-primary[data-bs-button-auto="true"]:hover {
border-color: rgba(147, 197, 253, 0.86) !important;
background: var(--bs-action-primary-hover) !important;
color: #fff !important;
}
button.bs-btn.bs-btn-soft[data-bs-button-auto="true"],
input.bs-btn.bs-btn-soft[data-bs-button-auto="true"],
a.bs-btn.bs-btn-soft[data-bs-button-auto="true"] {
border-color: rgba(96, 165, 250, 0.30) !important;
background: rgba(37, 99, 235, 0.12) !important;
color: #bfdbfe !important;
box-shadow: none !important;
}
button.bs-btn.bs-btn-ghost[data-bs-button-auto="true"],
button.bs-btn.bs-btn-outline[data-bs-button-auto="true"],
input.bs-btn.bs-btn-ghost[data-bs-button-auto="true"],
input.bs-btn.bs-btn-outline[data-bs-button-auto="true"],
a.bs-btn.bs-btn-ghost[data-bs-button-auto="true"],
a.bs-btn.bs-btn-outline[data-bs-button-auto="true"] {
border-color: var(--bs-action-border) !important;
background: rgba(148, 163, 184, 0.025) !important;
color: var(--bs-action-muted-text) !important;
box-shadow: none !important;
}
button.bs-btn.bs-btn-danger[data-bs-button-auto="true"],
input.bs-btn.bs-btn-danger[data-bs-button-auto="true"],
a.bs-btn.bs-btn-danger[data-bs-button-auto="true"] {
border-color: rgba(244, 63, 94, 0.44) !important;
background: rgba(159, 18, 57, 0.28) !important;
color: #fecdd3 !important;
box-shadow: none !important;
}
button.bs-btn.bs-btn-danger-ghost[data-bs-button-auto="true"],
input.bs-btn.bs-btn-danger-ghost[data-bs-button-auto="true"],
a.bs-btn.bs-btn-danger-ghost[data-bs-button-auto="true"] {
border-color: rgba(244, 63, 94, 0.30) !important;
background: rgba(159, 18, 57, 0.035) !important;
color: #fda4af !important;
box-shadow: none !important;
}
button.bs-btn.bs-btn-sm[data-bs-button-auto="true"],
input.bs-btn.bs-btn-sm[data-bs-button-auto="true"],
a.bs-btn.bs-btn-sm[data-bs-button-auto="true"] {
min-height: 2rem !important;
padding: 0 0.66rem !important;
border-radius: 0.48rem !important;
font-size: 0.75rem !important;
}
button.bs-btn.bs-btn-xs[data-bs-button-auto="true"],
input.bs-btn.bs-btn-xs[data-bs-button-auto="true"],
a.bs-btn.bs-btn-xs[data-bs-button-auto="true"] {
min-height: 1.75rem !important;
padding: 0 0.55rem !important;
border-radius: 0.44rem !important;
font-size: 0.72rem !important;
}
button.bs-btn.bs-btn-lg[data-bs-button-auto="true"],
input.bs-btn.bs-btn-lg[data-bs-button-auto="true"],
a.bs-btn.bs-btn-lg[data-bs-button-auto="true"] {
min-height: 2.55rem !important;
padding: 0 0.95rem !important;
font-size: 0.875rem !important;
}
button.bs-btn.bs-btn-icon[data-bs-button-auto="true"],
a.bs-btn.bs-btn-icon[data-bs-button-auto="true"] {
width: var(--bs-action-height) !important;
padding: 0 !important;
}
button.bs-btn.bs-btn-sm.bs-btn-icon[data-bs-button-auto="true"],
a.bs-btn.bs-btn-sm.bs-btn-icon[data-bs-button-auto="true"] {
width: 2rem !important;
}
/* Preserve utility-driven visibility after the shared inline-flex base. */
.bs-btn.hidden,
.ac-btn.hidden,
button.bs-btn[data-bs-button-auto="true"].hidden,
input.bs-btn[data-bs-button-auto="true"].hidden,
a.bs-btn[data-bs-button-auto="true"].hidden {
display: none !important;
}