/* ============================================================================
Dokku Pro — "Tide" Bootstrap 5.3 theme
A companion theme that mirrors the chosen Kumo design tweaks for projects
that use Bootstrap CSS instead of Kumo.
Load AFTER bootstrap.min.css:
Light is default; add data-bs-theme="dark" on for the night palette.
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;450;500;600;650;700&display=swap');
/* ---- Palette tokens (mirror of the Tide identity) ------------------------ */
:root,
[data-bs-theme="light"] {
--tide-bg: #f7f5f2;
--tide-surface: #ffffff;
--tide-surface2: #f0ede8;
--tide-border: #e7e2da;
--tide-border2: #d8d2c7;
--tide-ink: #1e1b17;
--tide-sub: #6b6459;
--tide-faint: #a89f90;
--tide-accent: #ec6350; /* Dokku whale coral */
--tide-accent-rgb:236,99,80;
--tide-accent-soft:#fceae7;
--tide-masthead: #22303e;
--tide-shadow: 0 1px 2px rgba(40,30,20,.06), 0 0 0 1px rgba(40,30,20,.03);
--tide-ok:#188554; --tide-warn:#996a13; --tide-danger:#c4403a;
/* Map onto Bootstrap */
--bs-body-bg: var(--tide-bg);
--bs-body-color: var(--tide-ink);
--bs-secondary-color: var(--tide-sub);
--bs-tertiary-color: var(--tide-faint);
--bs-emphasis-color: var(--tide-ink);
--bs-border-color: var(--tide-border);
--bs-primary: var(--tide-accent);
--bs-primary-rgb: var(--tide-accent-rgb);
--bs-link-color: var(--tide-accent);
--bs-link-color-rgb: var(--tide-accent-rgb);
--bs-link-hover-color: #d94f3c;
--bs-font-sans-serif: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--bs-font-monospace: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--bs-border-radius: .5rem;
--bs-border-radius-sm: .375rem;
--bs-border-radius-lg: .625rem;
--bs-border-radius-xl: .875rem;
--bs-tertiary-bg: var(--tide-surface2);
--bs-secondary-bg: var(--tide-surface2);
}
[data-bs-theme="dark"] {
--tide-bg: #0f1114;
--tide-surface: #16181d;
--tide-surface2: #1c1f25;
--tide-border: #262a31;
--tide-border2: #343943;
--tide-ink: #e9ebee;
--tide-sub: #9aa1ad;
--tide-faint: #636b78;
--tide-accent: #6ca4f8; /* accent cools to blue by night */
--tide-accent-rgb:108,164,248;
--tide-accent-soft:#16233a;
--tide-masthead: #1f2124;
--tide-shadow: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
--tide-ok:#3fb37f; --tide-warn:#d6a54a; --tide-danger:#e8756e;
--bs-body-bg: var(--tide-bg);
--bs-body-color: var(--tide-ink);
--bs-secondary-color: var(--tide-sub);
--bs-tertiary-color: var(--tide-faint);
--bs-emphasis-color: #fff;
--bs-border-color: var(--tide-border);
--bs-primary: var(--tide-accent);
--bs-primary-rgb: var(--tide-accent-rgb);
--bs-link-color: var(--tide-accent);
--bs-link-color-rgb: var(--tide-accent-rgb);
--bs-link-hover-color: #8fbcff;
--bs-tertiary-bg: var(--tide-surface2);
--bs-secondary-bg: var(--tide-surface2);
}
/* ---- Base: fonts + "swell" background motif ------------------------------ */
body {
font-family: var(--bs-font-sans-serif);
background-color: var(--tide-bg);
background-image: radial-gradient(150% 62% at 50% 0%, var(--tide-accent-soft) 0%, transparent 56%);
background-attachment: fixed;
color: var(--tide-ink);
letter-spacing: -0.003em;
}
code, kbd, pre, samp, .font-monospace, .text-mono { font-family: var(--bs-font-monospace); }
h1,h2,h3,h4,h5,h6, .fw-semibold { letter-spacing: -0.015em; }
/* ---- Cards: subtle elevation, soft corners ------------------------------- */
.card {
--bs-card-bg: var(--tide-surface);
--bs-card-border-color: var(--tide-border);
--bs-card-border-radius: var(--bs-border-radius);
box-shadow: var(--tide-shadow);
}
.card-header, .card-footer {
--bs-card-cap-bg: transparent;
border-color: var(--tide-border);
font-weight: 600;
}
/* ---- Buttons: soft radius, grain finish, glow hover ---------------------- */
.btn { --bs-btn-border-radius: var(--bs-border-radius-sm); font-weight: 550; letter-spacing: -0.005em; transition: box-shadow .16s ease, transform .08s ease, background-color .16s ease; }
/* buttonPress = "press" (DC: primary scales to .96 on active) */
.btn-primary:active { transform: scale(.96); }
.btn:not(.btn-primary):active { transform: translateY(1px); }
.btn-primary {
--bs-btn-bg: var(--tide-accent);
--bs-btn-border-color: var(--tide-accent);
--bs-btn-color: #fff;
--bs-btn-hover-bg: var(--tide-accent);
--bs-btn-hover-border-color: var(--tide-accent);
--bs-btn-hover-color: #fff;
--bs-btn-active-bg: var(--tide-accent);
--bs-btn-active-border-color: var(--tide-accent);
--bs-btn-disabled-bg: var(--tide-accent);
--bs-btn-disabled-border-color: var(--tide-accent);
position: relative;
/* GRAIN finish (matches DC exactly): 135deg tint + fine noise, overlay+soft-light blend, ambient shadow */
background-image: linear-gradient(135deg, rgba(255,255,255,.12), rgba(0,0,0,.12)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: auto, 110px 110px;
background-blend-mode: overlay, soft-light;
box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 8px 18px -8px rgba(0,0,0,.4);
}
/* GLOW hover (matches DC exactly: tight accent-soft ring + slight brightness, all buttons) */
.btn-primary:hover,
.btn-success:hover, .btn-danger:hover, .btn-warning:hover,
.btn-secondary:hover, .btn-outline-primary:hover {
box-shadow: 0 0 0 3px var(--tide-accent-soft);
filter: brightness(1.04);
}
/* brand fill flips its text to dark in dark mode (accent becomes light) — matches DC */
[data-bs-theme="dark"] .btn-primary {
--bs-btn-color: #0f1114;
--bs-btn-hover-color: #0f1114;
--bs-btn-active-color: #0f1114;
--bs-btn-disabled-color: #0f1114;
}
.btn-outline-primary {
--bs-btn-color: var(--tide-accent);
--bs-btn-border-color: var(--tide-border2);
--bs-btn-hover-bg: var(--tide-accent-soft);
--bs-btn-hover-border-color: var(--tide-accent);
--bs-btn-hover-color: var(--tide-accent);
--bs-btn-active-bg: var(--tide-accent);
--bs-btn-active-color: #fff;
}
.btn-secondary {
--bs-btn-bg: var(--tide-surface);
--bs-btn-border-color: var(--tide-border2);
--bs-btn-color: var(--tide-ink);
--bs-btn-hover-bg: var(--tide-surface2);
--bs-btn-hover-border-color: var(--tide-border2);
--bs-btn-hover-color: var(--tide-ink);
}
/* ---- Focus ring: accent ------------------------------------------------- */
.btn:focus-visible,
.form-control:focus, .form-select:focus, .form-check-input:focus,
.page-link:focus, .nav-link:focus-visible, .dropdown-item:focus {
border-color: var(--tide-accent);
/* focusRing = "accent" (DC: accent-soft ring + 1px accent edge) */
box-shadow: 0 0 0 3px var(--tide-accent-soft), 0 0 0 1px var(--tide-accent);
outline: none;
}
.form-check-input:checked { background-color: var(--tide-accent); border-color: var(--tide-accent); }
/* ---- Forms -------------------------------------------------------------- */
.form-control, .form-select, .input-group-text {
background-color: var(--tide-bg);
border-color: var(--tide-border);
border-radius: var(--bs-border-radius-sm);
color: var(--tide-ink);
}
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #0f1114; }
.form-control::placeholder { color: var(--tide-faint); }
.form-label { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tide-faint); }
/* ---- Navbar: filled "masthead" ------------------------------------------ */
.navbar.masthead {
background-color: var(--tide-masthead) !important;
box-shadow: var(--tide-shadow);
}
.navbar.masthead .navbar-brand,
.navbar.masthead .nav-link { color: rgba(255,255,255,.86); }
.navbar.masthead .nav-link:hover,
.navbar.masthead .nav-link.active { color: #fff; }
.navbar.masthead .navbar-brand { font-weight: 650; letter-spacing: -0.01em; }
.navbar.masthead .badge.text-bg-pro {
background: rgba(255,255,255,.16); color:#fff; font-family: var(--bs-font-monospace);
font-weight:600; letter-spacing:.08em; font-size:.62rem;
}
/* ---- Badges: rounded, tinted -------------------------------------------- */
.badge { --bs-badge-border-radius: .5rem; font-weight: 600; letter-spacing: .01em; padding: .38em .62em; }
.badge.text-bg-primary { background-color: var(--tide-accent) !important; color:#fff !important; }
.badge.tint-ok { background: rgba(24,133,84,.14); color: var(--tide-ok); }
.badge.tint-warn { background: rgba(153,106,19,.16); color: var(--tide-warn); }
.badge.tint-danger { background: rgba(196,64,58,.14); color: var(--tide-danger); }
.badge.tint-neutral { background: var(--tide-surface2); color: var(--tide-sub); }
/* ---- Nav pills / tabs ---------------------------------------------------- */
.nav-pills .nav-link { color: var(--tide-sub); border-radius: var(--bs-border-radius-sm); font-weight:550; }
.nav-pills .nav-link.active { background-color: var(--tide-accent); color:#fff; }
.nav-underline .nav-link { color: var(--tide-sub); font-weight:550; }
.nav-underline .nav-link.active { color: var(--tide-ink); --bs-nav-underline-border-color: var(--tide-accent); }
.nav-tabs { --bs-nav-tabs-border-color: var(--tide-border); }
.nav-tabs .nav-link.active { background: var(--tide-surface); border-color: var(--tide-border) var(--tide-border) var(--tide-surface); color: var(--tide-ink); }
/* ---- Tables, list groups, dropdowns ------------------------------------- */
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--tide-border); }
.table > :not(caption) > * > * { border-bottom-color: var(--tide-border); }
thead th { color: var(--tide-faint); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; }
.list-group { --bs-list-group-border-color: var(--tide-border); --bs-list-group-bg: var(--tide-surface); border-radius: var(--bs-border-radius); }
.list-group-item.active { background-color: var(--tide-accent); border-color: var(--tide-accent); }
.dropdown-menu {
--bs-dropdown-bg: var(--tide-surface);
--bs-dropdown-border-color: var(--tide-border);
--bs-dropdown-border-radius: var(--bs-border-radius);
--bs-dropdown-link-hover-bg: var(--tide-surface2);
--bs-dropdown-link-active-bg: var(--tide-accent);
box-shadow: 0 12px 32px rgba(0,0,0,.14);
}
/* ---- Alerts ------------------------------------------------------------- */
.alert { border-radius: var(--bs-border-radius); border-width: 1px; }
.alert-primary { background: var(--tide-accent-soft); border-color: rgba(var(--tide-accent-rgb),.4); color: var(--tide-ink); }
/* ---- Progress ----------------------------------------------------------- */
.progress { background-color: var(--tide-surface2); border-radius: 99px; }
.progress-bar { background-color: var(--tide-accent); }
/* ---- Modals & toasts ---------------------------------------------------- */
.modal-content, .toast, .offcanvas {
background-color: var(--tide-surface);
border-color: var(--tide-border);
border-radius: var(--bs-border-radius-lg);
box-shadow: 0 20px 60px rgba(0,0,0,.28);
}
.modal-header, .modal-footer, .toast-header { border-color: var(--tide-border); }
/* ---- Misc --------------------------------------------------------------- */
hr { border-color: var(--tide-border); opacity: 1; }
.text-muted, .text-secondary { color: var(--tide-sub) !important; }
.border { border-color: var(--tide-border) !important; }
.bg-body-tertiary { background-color: var(--tide-surface2) !important; }
.text-mono-accent { font-family: var(--bs-font-monospace); color: var(--tide-accent); }
/* ============================================================================
Extended coverage — every chosen Dokku "Tide" tweak, represented in Bootstrap
========================================================================== */
/* Segmented control = chosen "Build mode / log source" idiom (btn-group toggle) */
.btn-group.segmented .btn { --bs-btn-bg: transparent; --bs-btn-border-color: var(--tide-border); --bs-btn-color: var(--tide-sub); font-weight:550; }
.btn-group.segmented .btn-check:checked + .btn { background: var(--tide-accent); color:#fff; border-color: var(--tide-accent); box-shadow:none; }
/* buttonBusy = "shimmer" (the chosen value) */
@keyframes tide-shimmer { 0%{background-position:-160px 0} 100%{background-position:220px 0} }
.btn.is-busy { position:relative; color:transparent !important; pointer-events:none; }
.btn.is-busy::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.38) 50%, transparent 80%); background-size:160px 100%; animation:tide-shimmer 1s linear infinite; }
/* buttonPress = "press" (active nudge, already global) + buttonHover "glow" (already) */
/* listHover = "highlight" (rows + cards fill to surface2; softened in tide light) */
.tide-hover { transition: background-color .14s ease, box-shadow .14s ease, transform .14s ease; }
.tide-hover:hover { background-color: var(--tide-surface2); }
[data-bs-theme="light"] .tide-hover:hover { background-color:#faf8f5; }
/* appsLayout = "cards" (responsive card grid) */
.app-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:14px; }
/* cardElevation subtle + cornerStyle soft already applied to .card globally */
/* Skeleton placeholders inherit the surface tokens */
.placeholder { background-color: var(--tide-faint); border-radius:4px; opacity:.35; }
/* logTheme = "midnight", logDensity = "relaxed" (pane stays dark in both themes) */
.log-pane { background:#0c0e12; border:1px solid #23262d; border-radius:.5rem; color:#d7dae1; font-family:var(--bs-font-monospace); font-size:12px; line-height:1.75; padding:14px 16px; max-height:260px; overflow:auto; }
.log-pane .t{color:#5b6672;} .log-pane .p{color:#6ca4f8;} .log-pane .w{color:#d6a54a;} .log-pane .e{color:#e8756e;}
.log-toolbar .dot { width:8px;height:8px;border-radius:50%;background:var(--tide-ok);display:inline-block; animation:tide-pulse 1.6s ease infinite; }
@keyframes tide-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
/* loginMessage banner */
.login-banner { background: var(--tide-surface2); border:1px solid var(--tide-border); border-radius:.5rem; padding:8px 12px; font-size:13px; color: var(--tide-sub); white-space:pre-line; }
/* Form validation states in accent/danger/ok tokens */
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--tide-danger); }
.invalid-feedback { color: var(--tide-danger); }
.form-control.is-valid, .form-select.is-valid { border-color: var(--tide-ok); }
.valid-feedback { color: var(--tide-ok); }
/* Breadcrumb / pagination / accordion / range / spinners in theme tokens */
.breadcrumb { --bs-breadcrumb-divider-color: var(--tide-faint); font-size:.85rem; }
.breadcrumb-item.active { color: var(--tide-sub); }
.breadcrumb-item a { color: var(--tide-accent); text-decoration:none; }
.page-link { color: var(--tide-accent); background: var(--tide-surface); border-color: var(--tide-border); }
.page-item.active .page-link { background: var(--tide-accent); border-color: var(--tide-accent); color:#fff; }
.page-item.disabled .page-link { color: var(--tide-faint); background: var(--tide-surface); border-color: var(--tide-border); }
.accordion { --bs-accordion-bg: var(--tide-surface); --bs-accordion-border-color: var(--tide-border); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(var(--tide-accent-rgb),.28); --bs-accordion-active-bg: var(--tide-accent-soft); --bs-accordion-active-color: var(--tide-ink); --bs-accordion-border-radius: var(--bs-border-radius); }
.accordion-button:not(.collapsed)::after { filter: none; }
.form-range::-webkit-slider-thumb { background: var(--tide-accent); }
.form-range::-moz-range-thumb { background: var(--tide-accent); }
.spinner-border, .spinner-grow { color: var(--tide-accent); }
.tooltip { --bs-tooltip-bg: var(--tide-masthead); }
.popover { --bs-popover-bg: var(--tide-surface); --bs-popover-border-color: var(--tide-border); --bs-popover-header-bg: var(--tide-surface2); }
.offcanvas { --bs-offcanvas-bg: var(--tide-surface); }
footer.tide-footer { border-top:1px solid var(--tide-border); color: var(--tide-sub); font-size:.85rem; }
/* Underline tabs — native .nav-underline tuned to DC metrics (markup stays stock) */
.nav-underline { border-bottom:1px solid var(--tide-border); --bs-nav-underline-gap:0; }
.nav-underline .nav-link { padding:8px 12px 9px; font-size:13.5px; font-weight:550; color:var(--tide-sub); border-bottom:2px solid transparent; margin-bottom:-1px; border-radius:0; }
.nav-underline .nav-link:hover { color:var(--tide-ink); }
.nav-underline .nav-link.active { color:var(--tide-ink); background:transparent; border-bottom-color:var(--tide-accent); }
/* Settings sidebar — native .nav.flex-column.nav-pills, DC inset-accent-bar look
(scoped to .settings-nav so the horizontal filled-pill demo elsewhere is unaffected) */
.settings-nav.nav-pills { gap:2px; --bs-nav-pills-border-radius:0; }
.settings-nav .nav-link { text-align:left; color:var(--tide-sub); font-weight:450; border-radius:0 6px 6px 0; padding:8.5px 12px; box-shadow:inset 2px 0 0 transparent; }
.settings-nav .nav-link:hover { color:var(--tide-ink); }
.settings-nav .nav-link.active { background:var(--tide-surface2); color:var(--tide-ink); font-weight:600; box-shadow:inset 2px 0 0 var(--tide-accent); }
.settings-nav .nav-link.text-danger { color:var(--tide-danger) !important; }
.settings-nav .nav-link.text-danger.active { background:rgba(196,64,58,.08); box-shadow:inset 2px 0 0 var(--tide-danger); }