/* ==================================================================
GSL DASHBOARD — STYLES
Garden State Lumber · internal apps register, editorial mode.
Cream paper surfaces, forest-dark header, gold earned accents.
Serif display (Source Serif 4), Inter body, JetBrains Mono labels.
Token NAMES are inherited from the original build and kept stable
on purpose — only their values change for the rebrand.
================================================================== */
:root {
--bg: #FAF6EC; /* cream — default page */
--bg-2: #FBFBF7; /* paper-tint — card surface */
--bg-3: #F4EEDD; /* cream-2 — inputs / elevated */
--bg-elev: #FFFFFF; /* paper — modals, max legibility */
--line: #D9D0BC; /* rule */
--line-2: #BEB39B; /* rule-strong */
--text: #1A2620; /* body text on cream */
--text-2: #4A5751; /* secondary */
--text-3: #7A8580; /* tertiary / metadata */
--chrome: #0B1410; /* ink — display text */
--chrome-dark:#143021; /* deep forest */
--wood: #8A6B28; /* gold, deepened for legibility on cream */
--wood-light: #F5EED9; /* gold-tint — fills / highlights */
--wood-dark: #6E5620; /* gold-dp — text-on-light gold, hover */
--walnut: #6E5620; /* deep gold-brown */
--gold: #B08935; /* base brass — borders, accents */
--green: #2D5F3F; /* success == forest */
--red: #8B2635; /* danger */
/* GSL extras (new, additive) */
--ink: #0B1410;
--ink-2: #0F1B15;
--ink-3: #143021;
--ink-4: #1A3A27;
--forest: #2D5F3F;
--gold-br: #C9A84C; /* gold text on dark */
--text-on-dark: #F4EEDD;
--text-on-dark-soft: #B8B09A;
--serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, monospace;
--shimmer: linear-gradient(90deg, #A8883A 0%, #C5A55A 25%, #E8D48A 50%, #C5A55A 75%, #A8883A 100%);
--hero-dark: linear-gradient(160deg, #000 0%, #0C1F0E 40%, #1B4332 70%, #000 100%);
--radius: 8px;
--radius-sm: 4px;
--shadow: 0 12px 40px rgba(26, 38, 32, 0.10), 0 2px 8px rgba(26, 38, 32, 0.06);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--sans);
background: var(--bg);
color: var(--text);
line-height: 1.55;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
min-height: 100vh;
min-height: -webkit-fill-available;
}
/* GSL atmospheric overlays — soft radial tint + paper grain */
body::before {
content: ''; position: fixed; inset: 0;
background-image:
radial-gradient(circle at 12% 0%, rgba(176, 137, 53, 0.035), transparent 45%),
radial-gradient(circle at 88% 100%, rgba(20, 48, 33, 0.025), transparent 55%);
pointer-events: none; z-index: 0;
}
body::after {
content: ''; position: fixed; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.45;
pointer-events: none; z-index: 1; mix-blend-mode: multiply;
}
[hidden] { display: none !important; }
/* ==================================================================
LOGIN SCREEN
================================================================== */
.login-screen {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
min-height: -webkit-fill-available;
padding: 24px;
background: var(--hero-dark);
}
.login-card {
width: 100%;
max-width: 440px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 10px;
padding: 48px 40px 40px;
box-shadow: 0 28px 80px rgba(11, 20, 16, 0.22), 0 4px 12px rgba(11, 20, 16, 0.08);
position: relative;
overflow: hidden;
}
.login-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--shimmer);
}
.login-brand {
text-align: center;
margin-bottom: 36px;
}
.login-brand-medallion {
width: 76px; height: 76px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 18px;
box-shadow:
0 0 0 1px rgba(201, 168, 76, 0.4),
0 2px 14px rgba(201, 168, 76, 0.18);
}
.login-brand-medallion img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.login-brand-mark {
font-family: var(--serif);
font-weight: 300;
font-size: 30px;
letter-spacing: -0.01em;
color: var(--ink);
line-height: 1.1;
margin-bottom: 10px;
}
.login-brand-mark em {
font-style: italic;
color: var(--wood-dark);
font-weight: 400;
}
.login-brand-subtitle {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--wood-dark);
}
.login-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.field {
display: flex;
flex-direction: column;
gap: 8px;
}
.field-label {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-2);
}
.field input {
background: var(--bg);
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
padding: 14px 16px;
color: var(--text);
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 500;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.field input:focus {
outline: none;
border-color: var(--wood);
background: var(--bg-2);
box-shadow: 0 0 0 3px rgba(176, 137, 53, 0.15);
}
.btn-primary {
margin-top: 10px;
background: linear-gradient(180deg, #EFDD9A 0%, #D4B863 100%);
color: #1A1408;
border: 1px solid #B89440;
border-radius: 6px;
padding: 13px 20px;
font-family: var(--sans);
font-weight: 600;
font-size: 12.5px;
letter-spacing: 0.01em;
cursor: pointer;
transition: transform 0.1s, box-shadow 0.15s, background 160ms;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
0 1px 3px rgba(110, 86, 32, 0.3);
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-0.5px);
background: linear-gradient(180deg, #F5E6AC 0%, #DEC470 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.35),
0 3px 10px rgba(110, 86, 32, 0.35);
}
.btn-primary:active:not(:disabled) {
transform: translateY(0);
}
.btn-primary:disabled {
opacity: 0.6;
cursor: wait;
}
.login-error {
background: rgba(212, 116, 116, 0.15);
border: 1px solid rgba(212, 116, 116, 0.45);
color: var(--red);
padding: 11px 14px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
text-align: center;
}
/* ==================================================================
APP SHELL
================================================================== */
.app {
position: relative;
z-index: 2;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.control-bar {
position: sticky;
top: 0;
z-index: 100;
background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 60%, var(--ink-3) 100%);
border-bottom: 1px solid rgba(201, 168, 76, 0.22);
box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 8px 28px rgba(0,0,0,0.10);
padding: 15px 28px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
}
/* the signature gold shimmer rule beneath the dark header */
.control-bar::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 2px;
background: var(--shimmer);
opacity: 0.55;
pointer-events: none;
}
.control-bar-left,
.control-bar-right {
display: flex;
align-items: center;
gap: 14px;
}
.brand-lockup {
display: flex;
align-items: center;
gap: 13px;
text-decoration: none;
}
.brand-medallion {
width: 50px; height: 50px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
box-shadow:
0 0 0 1px rgba(201, 168, 76, 0.4),
0 2px 14px rgba(201, 168, 76, 0.18);
}
.brand-medallion img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.brand-name {
font-family: var(--serif);
font-size: 21px;
font-weight: 500;
color: var(--text-on-dark);
line-height: 1.1;
}
.brand-name em {
font-style: italic;
color: var(--gold-br);
font-weight: 400;
}
.brand-tag {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--gold-br);
letter-spacing: 0.28em;
text-transform: uppercase;
margin-top: 4px;
opacity: 0.85;
}
.user-chip {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-on-dark-soft);
background: rgba(255,255,255,0.03);
border: 1px solid rgba(201, 168, 76, 0.18);
padding: 5px 12px;
border-radius: var(--radius-sm);
white-space: nowrap;
}
.app-version {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: lowercase;
color: var(--text-on-dark-soft);
padding: 3px 8px;
border-radius: var(--radius-sm);
background: transparent;
border: 1px solid rgba(201, 168, 76, 0.18);
white-space: nowrap;
user-select: none;
opacity: 0.8;
}
.btn-ghost {
background: transparent;
border: 1px solid var(--line);
color: var(--text-2);
padding: 7px 13px;
border-radius: var(--radius-sm);
font-family: var(--sans);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.01em;
cursor: pointer;
transition: all 160ms ease;
}
.btn-ghost:hover {
color: var(--chrome);
background: var(--bg-elev);
border-color: var(--line-2);
}
/* dark variant inside the forest header */
.control-bar .btn-ghost {
background: rgba(255,255,255,0.03);
border-color: rgba(201, 168, 76, 0.18);
color: var(--text-on-dark-soft);
}
.control-bar .btn-ghost:hover {
color: var(--text-on-dark);
background: rgba(201, 168, 76, 0.08);
border-color: rgba(201, 168, 76, 0.35);
}
/* ==================================================================
TAB NAV
================================================================== */
.tab-nav {
background: var(--bg-2);
border-bottom: 1px solid var(--line);
padding: 0 14px;
display: flex;
gap: 2px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
position: sticky;
top: 80px;
z-index: 99;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-btn {
background: transparent;
border: none;
color: var(--text-3);
padding: 16px 18px;
font-family: var(--mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
position: relative;
transition: color 0.15s;
border-bottom: 2px solid transparent;
}
.tab-btn:hover {
color: var(--text);
}
.tab-btn.active {
color: var(--wood-dark);
border-bottom-color: var(--gold);
}
/* ==================================================================
TAB PANELS
================================================================== */
.tab-container {
flex: 1;
padding: 36px 28px 80px;
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
.tab-panel {
display: none;
animation: fadeIn 0.25s ease-out;
}
.tab-panel.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.panel-header {
margin-bottom: 32px;
padding-bottom: 20px;
border-bottom: 1px solid var(--line-2);
}
/* ---------- View-toggle row (Summary/Detail on left, Admin on right) ---------- */
.view-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin: 0 0 16px 0;
flex-wrap: wrap;
}
.view-toggle-row .view-toggle { margin: 0; }
/* ---------- Admin button (gold gradient, matches active view-btn) ---------- */
.admin-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 22px;
border: 0;
border-radius: 8px;
font: 900 13px/1 Inter, sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1a1410;
background: linear-gradient(135deg, #8f6a3e 0%, var(--wood) 50%, var(--wood-light) 100%);
box-shadow:
0 2px 10px rgba(176, 137, 53, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: transform 90ms ease, box-shadow 140ms ease, filter 140ms ease;
min-width: 108px;
justify-content: center;
}
.admin-btn:hover {
filter: brightness(1.06);
box-shadow:
0 4px 14px rgba(176, 137, 53, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.admin-btn:active { transform: scale(0.96); }
.admin-btn[hidden] { display: none !important; }
/* ---------- Upload dropzone (used inside the Admin panel) ---------- */
.upload-dropzone {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
min-width: 240px;
max-width: 320px;
border: 1px dashed var(--p-line-2);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.45);
color: var(--p-text-2);
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
font-family: 'Inter', sans-serif;
}
.upload-dropzone:hover,
.upload-dropzone:focus-visible {
outline: none;
border-color: var(--wood-dark);
color: var(--p-text);
background: rgba(176, 137, 53, 0.10);
}
.upload-dropzone.is-dragging {
border-style: solid;
border-color: var(--wood);
color: var(--wood);
background: rgba(176, 137, 53, 0.10);
}
.upload-dropzone.is-busy { opacity: 0.7; cursor: wait; }
.upload-dropzone-icon {
font-size: 20px;
line-height: 1;
font-weight: 700;
color: var(--wood);
opacity: 0.8;
flex-shrink: 0;
}
.upload-dropzone-text {
display: inline-flex;
flex-direction: column;
line-height: 1.2;
min-width: 0;
}
.upload-dropzone-primary {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: inherit;
}
.upload-dropzone-secondary {
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--text-3);
margin-top: 2px;
}
/* Larger variant inside the Admin panel */
.upload-dropzone-large {
display: flex;
width: 100%;
max-width: none;
padding: 28px 24px;
gap: 20px;
align-items: center;
justify-content: center;
text-align: center;
border-radius: var(--radius);
}
.upload-dropzone-large .upload-dropzone-icon {
font-size: 34px;
opacity: 0.9;
}
.upload-dropzone-large .upload-dropzone-primary { font-size: 14px; }
.upload-dropzone-large .upload-dropzone-secondary { font-size: 12px; letter-spacing: 0.02em; }
/* ---------- Admin panel (full-screen overlay) ---------- */
.admin-panel {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
overflow: hidden;
animation: admin-fade 200ms ease-out;
}
.admin-panel[hidden] { display: none; }
@keyframes admin-fade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.admin-panel-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 22px 28px 18px;
border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-3) 100%);
padding-top: max(22px, env(safe-area-inset-top));
}
.admin-panel-title {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: 24px;
letter-spacing: -0.01em;
color: var(--wood);
line-height: 1.1;
}
.admin-panel-sub {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-3);
margin-top: 6px;
}
.admin-panel-close {
background: transparent;
border: 1px solid var(--line-2);
color: var(--text-2);
font-size: 24px;
line-height: 1;
cursor: pointer;
padding: 6px 14px;
border-radius: 8px;
transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.admin-panel-close:hover {
color: var(--text);
border-color: var(--wood-dark);
background: rgba(176, 137, 53, 0.06);
}
.admin-panel-body {
flex: 1 1 auto;
overflow: auto;
padding: 24px 28px 40px;
display: flex;
flex-direction: column;
gap: 24px;
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
.admin-panel-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 28px;
border-top: 1px solid var(--line);
background: var(--bg-2);
padding-bottom: max(16px, env(safe-area-inset-bottom));
flex-wrap: wrap;
}
.admin-panel-note {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-3);
}
.admin-panel-actions { display: flex; gap: 10px; }
.admin-confirm-btn {
padding: 10px 22px;
border: 0;
border-radius: 8px;
font: 900 13px/1 Inter, sans-serif;
letter-spacing: 0.10em;
text-transform: uppercase;
color: #1a1410;
background: linear-gradient(135deg, #8f6a3e 0%, var(--wood) 50%, var(--wood-light) 100%);
cursor: pointer;
transition: filter 140ms ease;
}
.admin-confirm-btn:hover { filter: brightness(1.06); }
.admin-confirm-btn:disabled {
background: var(--bg-3);
color: var(--text-3);
cursor: not-allowed;
filter: none;
}
/* Sections inside admin panel */
.admin-section {
/* paper palette — same tokens .notes-body declares so children inherit ivory */
--p-bg: #fbfbf9;
--p-line: #e4e3df;
--p-line-2: #ccccc6;
--p-text: #1A2620;
--p-text-2: #4a4642;
background: var(--p-bg);
background-image:
radial-gradient(ellipse at top left, rgba(255, 248, 222, 0.7), transparent 55%),
radial-gradient(ellipse at bottom right, rgba(176, 137, 53, 0.12), transparent 60%);
border: 1px solid var(--p-line-2);
border-radius: var(--radius);
padding: 18px 20px;
color: var(--p-text);
}
.admin-section-label {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wood);
margin-bottom: 12px;
}
.admin-dropzone-note {
margin-top: 12px;
font-family: 'Inter', sans-serif;
font-size: 12px;
color: var(--text-3);
line-height: 1.5;
}
.admin-section-placeholder { opacity: 0.6; }
.admin-placeholder-note {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: var(--text-3);
font-style: italic;
}
.admin-status-msg {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: var(--text-2);
padding: 12px 14px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
}
/* Preview section layout (reused from old modal) */
.upload-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
margin-bottom: 16px;
}
.upload-summary-tile {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 10px 12px;
}
.upload-summary-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 4px;
}
.upload-summary-value {
font-size: 15px;
font-weight: 700;
color: var(--wood);
letter-spacing: -0.01em;
word-break: break-word;
}
.upload-months-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 16px;
}
.upload-month-chip {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 999px;
padding: 4px 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--text-2);
}
.upload-month-chip.is-new {
color: #9fd08a;
border-color: rgba(143, 188, 122, 0.4);
background: rgba(143, 188, 122, 0.08);
}
.upload-month-chip.is-overwrite {
color: var(--wood);
border-color: var(--wood-dark);
background: rgba(176, 137, 53, 0.08);
}
.upload-diff-legend {
display: flex;
gap: 16px;
flex-wrap: wrap;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--text-3);
margin-bottom: 8px;
}
.upload-diff-legend .dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
}
.upload-diff-legend .dot.new { background: #9fd08a; }
.upload-diff-legend .dot.overwrite { background: var(--wood); }
.upload-preview-table-wrap {
border: 1px solid var(--line);
border-radius: var(--radius-sm);
overflow: auto;
max-height: 480px;
background: var(--bg);
}
.upload-preview-table {
width: 100%;
border-collapse: collapse;
font-family: 'Inter', sans-serif;
font-size: 12px;
}
.upload-preview-table th,
.upload-preview-table td {
padding: 6px 10px;
text-align: right;
white-space: nowrap;
border-bottom: 1px solid var(--line);
}
.upload-preview-table th {
position: sticky; top: 0;
background: linear-gradient(180deg, var(--bg-2), var(--bg));
color: var(--wood);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 10.5px;
z-index: 1;
}
.upload-preview-table th:first-child,
.upload-preview-table td:first-child {
text-align: left;
position: sticky; left: 0;
background: var(--bg);
font-weight: 600;
color: var(--text-2);
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
z-index: 2;
}
.upload-preview-table th:first-child {
background: linear-gradient(180deg, var(--bg-2), var(--bg));
z-index: 3;
}
.upload-preview-table td.neg { color: var(--red); }
.upload-preview-table tr.is-subtotal td {
font-weight: 700;
color: var(--wood);
border-top: 1px solid var(--wood-dark);
}
.upload-error {
padding: 14px 16px;
border: 1px solid var(--red);
border-radius: var(--radius-sm);
background: rgba(212, 116, 116, 0.08);
color: var(--text);
font-size: 13px;
font-weight: 600;
line-height: 1.5;
}
/* Narrow phones: Admin button goes full-width under the toggle */
@media (max-width: 600px) {
.view-toggle-row { flex-direction: column; align-items: stretch; }
.admin-btn { width: 100%; }
.admin-panel-body { padding: 16px 16px 32px; }
.admin-panel-head { padding: 18px 16px 14px; }
.admin-panel-foot { padding: 14px 16px; }
}
.panel-title {
font-family: var(--serif);
font-weight: 300;
font-size: 36px;
letter-spacing: -0.015em;
color: var(--ink);
margin-bottom: 8px;
line-height: 1.05;
}
.panel-title em {
font-style: italic;
color: var(--wood-dark);
font-weight: 400;
}
.panel-subtitle {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--text-3);
}
.placeholder-card {
/* paper palette — same tokens .notes-body declares so children inherit ivory */
--p-bg: #fbfbf9;
--p-line: #e4e3df;
--p-line-2: #ccccc6;
--p-text: #1A2620;
--p-text-2: #4a4642;
background: var(--p-bg);
background-image:
radial-gradient(ellipse at top left, rgba(255, 248, 222, 0.7), transparent 55%),
radial-gradient(ellipse at bottom right, rgba(176, 137, 53, 0.12), transparent 60%);
border: 1px dashed var(--p-line-2);
border-radius: var(--radius);
padding: 56px 32px;
text-align: center;
color: var(--p-text);
}
.placeholder-icon {
font-size: 44px;
margin-bottom: 16px;
opacity: 0.85;
}
.placeholder-card h2 {
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--p-text);
margin-bottom: 12px;
}
.placeholder-card p {
color: var(--p-text-2);
max-width: 520px;
margin: 0 auto;
font-size: 15px;
font-weight: 500;
line-height: 1.6;
}
.user-info-card {
margin-top: 24px;
background: var(--bg-3);
border: 1px solid var(--line-2);
border-radius: var(--radius);
padding: 22px 24px;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--text);
line-height: 1.9;
}
.user-info-card strong {
color: var(--wood);
font-weight: 700;
display: inline-block;
min-width: 110px;
}
/* ==================================================================
FOOTER
================================================================== */
.app-footer {
margin-top: auto;
padding: 18px 28px;
border-top: 1px solid var(--line-2);
background: var(--bg-2);
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-2);
}
.connection-status {
color: var(--green);
font-weight: 700;
}
.connection-status.offline {
color: var(--red);
}
/* ==================================================================
RESPONSIVE
================================================================== */
@media (max-width: 640px) {
.control-bar { padding: 14px 18px; }
.brand-medallion { width: 42px; height: 42px; }
.brand-name { font-size: 19px; }
.brand-tag { display: none; }
.user-chip { display: none; }
.tab-nav { top: 70px; }
.tab-container { padding: 24px 18px 60px; }
.panel-title { font-size: 28px; }
.tab-btn { padding: 13px 15px; font-size: 13px; }
.login-card { padding: 40px 28px 32px; }
.login-brand-mark { font-size: 40px; }
}
/* Safe area for iOS notch / home indicator */
@supports (padding: max(0px)) {
.control-bar { padding-top: max(14px, env(safe-area-inset-top)); }
.app-footer { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}
/* ==================================================================
DASHBOARD TAB — charts, pills, smoothing toggle
================================================================== */
/* KPI grid */
.kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 40px;
}
.kpi {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 4px;
box-shadow: 0 2px 8px rgba(26, 38, 32, 0.06), 0 1px 2px rgba(26, 38, 32, 0.04);
position: relative;
overflow: hidden;
}
.kpi::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--gold) 0%, transparent 70%);
opacity: 0.6;
}
.kpi-label {
font-family: var(--mono);
font-weight: 600;
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-3);
}
.kpi-value {
font-family: var(--serif);
font-weight: 400;
font-size: 26px;
letter-spacing: 0;
color: var(--ink);
line-height: 1.1;
margin-top: 2px;
}
.kpi-value.negative { color: var(--red); }
.kpi-delta {
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.03em;
margin-top: 2px;
}
.kpi-delta.up { color: var(--green); }
.kpi-delta.down { color: var(--red); }
.kpi-context {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 11px;
color: var(--text-3);
margin-top: 2px;
}
/* Responsive KPI grid: 2×2 on phones */
@media (max-width: 640px) {
.kpi-grid {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.kpi { padding: 14px 14px; }
.kpi-value { font-size: 20px; }
}
.dash-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.year-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.year-pill {
position: relative;
background: var(--bg-3);
color: var(--text-2);
border: 1px solid var(--line-2);
border-radius: 999px;
padding: 8px 16px;
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.04em;
cursor: pointer;
transition: all 0.15s ease;
}
.year-pill:hover {
background: var(--bg-elev);
border-color: var(--wood-dark, #8f6a3e);
}
.year-pill.active {
background: linear-gradient(135deg, var(--wood-dark, #8f6a3e) 0%, var(--wood) 100%);
color: #1a1410;
border-color: var(--wood);
box-shadow: 0 2px 8px rgba(176, 137, 53, 0.25);
}
.partial-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 5px;
font-size: 9px;
background: rgba(0,0,0,0.25);
border-radius: 4px;
vertical-align: middle;
}
.smoothing-toggle {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #8f6a3e 0%, var(--wood) 100%);
border: 1px solid var(--wood);
border-radius: 999px;
padding: 6px 14px;
box-shadow: 0 2px 10px rgba(176, 137, 53, 0.3);
transition: box-shadow 0.2s ease;
}
.smoothing-toggle.active {
box-shadow: 0 3px 14px rgba(176, 137, 53, 0.5);
}
.smooth-lbl {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 11px;
letter-spacing: 0.06em;
color: rgba(26, 20, 16, 0.4);
transition: color 0.15s ease, font-weight 0.15s ease, font-size 0.15s ease;
}
.smooth-lbl.active {
font-weight: 900;
font-size: 12.5px;
color: #1a1410;
}
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 22px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
position: absolute; inset: 0;
background: rgba(26, 20, 16, 0.35);
border-radius: 999px;
cursor: pointer;
transition: background 0.2s ease;
}
.slider::before {
content: '';
position: absolute;
height: 16px; width: 16px;
left: 3px; top: 3px;
background: var(--chrome);
border-radius: 50%;
transition: transform 0.2s ease;
}
.switch input:checked + .slider { background: rgba(26, 20, 16, 0.55); }
.switch input:checked + .slider::before { transform: translateX(18px); background: #fff; }
.smoothing-note {
display: none;
background: rgba(176, 137, 53, 0.08);
border-left: 3px solid var(--wood);
padding: 10px 14px;
margin-bottom: 18px;
font-size: 13px;
color: var(--text-2);
border-radius: 4px;
}
.smoothing-note.show { display: block; }
.chart-card {
background: var(--bg-2);
border: 1px solid rgba(176, 137, 53, 0.65);
border-radius: 12px;
padding: 20px;
margin-bottom: 18px;
box-shadow: 0 8px 22px rgba(11, 20, 16, 0.5);
}
.chart-card-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 14px;
flex-wrap: wrap;
gap: 8px;
}
.chart-card-title {
font-family: 'Inter', sans-serif;
font-weight: 800;
font-size: 17px;
color: var(--text);
letter-spacing: -0.01em;
}
.chart-card-sub {
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.05em;
color: var(--wood);
text-transform: uppercase;
}
.chart-canvas-wrap {
position: relative;
height: 340px;
}
.dash-error {
color: #c86464;
padding: 20px;
text-align: center;
font-weight: 500;
}
@media (max-width: 640px) {
.chart-canvas-wrap { height: 280px; }
.chart-card-title { font-size: 15px; }
.year-pill { padding: 7px 12px; font-size: 11px; }
.dash-controls { gap: 12px; }
}
/* ---------- Anomaly card ---------- */
.anomaly-controls {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
}
.anomaly-mode-toggle {
display: inline-flex;
align-items: center;
gap: 0;
background: rgba(26, 20, 16, 0.35);
border: 1px solid var(--wood);
border-radius: 999px;
padding: 3px;
box-shadow: 0 2px 10px rgba(176, 137, 53, 0.25);
}
.mode-btn {
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.06em;
padding: 5px 14px;
border: none;
border-radius: 999px;
background: transparent;
color: rgba(236, 199, 149, 0.6);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.mode-btn:hover { color: var(--wood); }
.mode-btn.active {
background: linear-gradient(135deg, #8f6a3e 0%, var(--wood) 100%);
color: #1a1410;
font-weight: 900;
}
.threshold-stepper {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #8f6a3e 0%, var(--wood) 100%);
border: 1px solid var(--wood);
border-radius: 999px;
padding: 5px 8px 5px 14px;
box-shadow: 0 2px 10px rgba(176, 137, 53, 0.3);
}
.threshold-label {
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.06em;
color: #1a1410;
text-transform: uppercase;
}
.threshold-val {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: 13px;
color: #1a1410;
min-width: 38px;
text-align: center;
letter-spacing: 0.02em;
}
.threshold-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(26, 20, 16, 0.35);
color: #1a1410;
font-size: 9px;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease, transform 0.1s ease;
}
.threshold-btn:hover { background: rgba(26, 20, 16, 0.5); color: #fff; }
.threshold-btn:active { transform: scale(0.9); }
.threshold-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.threshold-btn:disabled:hover {
background: rgba(26, 20, 16, 0.35);
color: #1a1410;
}
.anomaly-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.anomaly-row {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 14px;
padding: 10px 14px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
}
.anomaly-label {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--fg);
}
.anomaly-label .smooth-tag {
color: var(--wood);
font-weight: 700;
font-size: 12px;
margin-left: 6px;
letter-spacing: 0.02em;
}
.anomaly-period {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 500;
color: var(--fg-2);
white-space: nowrap;
}
.anomaly-delta {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 800;
white-space: nowrap;
text-align: right;
}
.anomaly-delta.up { color: var(--green); }
.anomaly-delta.down { color: var(--red); }
.anomaly-delta .dollars {
font-weight: 600;
font-size: 12px;
opacity: 0.85;
margin-left: 4px;
}
.anomaly-empty {
padding: 18px 14px;
text-align: center;
font-size: 13px;
color: var(--fg-2);
font-style: italic;
}
@media (max-width: 640px) {
.anomaly-row {
grid-template-columns: 1fr auto;
row-gap: 4px;
}
.anomaly-period {
grid-column: 1 / -1;
order: 3;
}
}
/* ============================================================
DETAIL VIEW — Summary/Detail toggle, statement tables, tiles
Added in Session 3b. Purely additive; no existing rules changed.
============================================================ */
.view-toggle {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 3px;
margin: 0 0 16px 0;
gap: 2px;
}
.view-btn {
background: transparent;
border: 0;
color: var(--text-2);
padding: 8px 20px;
font: 700 13px/1 Inter, sans-serif;
letter-spacing: 0.03em;
border-radius: 7px;
cursor: pointer;
transition: background 140ms ease, color 140ms ease, transform 80ms ease;
min-width: 108px;
text-align: center;
}
.view-btn:hover { color: var(--wood); }
.view-btn:active { transform: scale(0.96); }
.view-btn.active {
background: linear-gradient(135deg, #8f6a3e 0%, var(--wood) 100%);
color: #1a1410;
font-weight: 900;
box-shadow: 0 2px 8px rgba(176, 137, 53, 0.25);
}
/* Top row: statement tabs on left (~25% width), Export CSV on right above Net Margin KPI */
.detail-top-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 14px;
align-items: stretch;
}
.detail-top-row .detail-stmt-toggle {
margin: 0;
grid-column: 1 / 2;
width: 100%;
}
.detail-top-row .export-btn-wrap {
grid-column: 4 / 5;
display: flex;
align-items: stretch;
}
.detail-stmt-toggle {
display: flex;
background: linear-gradient(180deg, #0a1118 0%, var(--bg-2) 60%, var(--bg-3) 100%);
border: 1px solid #050810;
border-radius: var(--radius);
padding: 3px;
gap: 2px;
width: calc((100% - 42px) / 4); /* one KPI box width — matches .detail-strip grid */
max-width: 280px;
box-sizing: border-box;
margin: 0 0 14px 0;
box-shadow:
0 0 0 1px rgba(224, 182, 108, 0.35),
0 0 10px rgba(224, 182, 108, 0.30),
0 3px 10px rgba(11, 20, 16, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.detail-stmt-btn {
flex: 1;
background: transparent;
border: 0;
color: var(--wood);
padding: 10px 4px;
font: 700 12px/1.2 Inter, sans-serif;
letter-spacing: 0.03em;
border-radius: 7px;
cursor: pointer;
transition: background 140ms ease, color 140ms ease, transform 80ms ease;
text-align: center;
white-space: normal;
}
.detail-stmt-btn:hover { color: var(--gold); }
.detail-stmt-btn:active { transform: scale(0.96); }
.detail-stmt-btn.active {
background: linear-gradient(135deg, #8f6a3e 0%, var(--wood) 100%);
color: #1a1410;
font-weight: 900;
box-shadow: 0 2px 8px rgba(176, 137, 53, 0.25);
}
/* Export CSV button — matches toggle container (flipped gradient: black top, blue bottom).
Half the width of a KPI box, text stacks as "CSV" / "EXPORT" centered. */
.export-btn {
width: 50%;
margin-left: auto;
background: linear-gradient(180deg, #0a1118 0%, var(--bg-2) 60%, var(--bg-3) 100%);
border: 1px solid #050810;
color: var(--wood);
font: 800 11.5px/1.15 Inter, sans-serif;
letter-spacing: 0.05em;
border-radius: var(--radius);
cursor: pointer;
padding: 8px 6px;
transition: background 140ms ease, color 140ms ease, transform 80ms ease, box-shadow 140ms ease, border-color 140ms ease;
box-shadow:
0 0 0 1px rgba(224, 182, 108, 0.35),
0 0 10px rgba(224, 182, 108, 0.30),
0 3px 10px rgba(11, 20, 16, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
text-transform: uppercase;
text-align: center;
}
.export-btn .csv-top,
.export-btn .csv-bot-full,
.export-btn .csv-bot-short {
display: block;
}
.export-btn .csv-bot-short { display: none; }
@media (max-width: 640px) {
.export-btn .csv-bot-full { display: none; }
.export-btn .csv-bot-short { display: block; }
}
.export-btn:hover {
background: linear-gradient(135deg, #8f6a3e 0%, var(--wood) 100%);
color: #1a1410;
border-color: var(--wood-dark);
box-shadow: 0 4px 14px rgba(176, 137, 53, 0.3);
}
.export-btn:active { transform: scale(0.98); }
/* Header strip (key takeaways per statement) */
.detail-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 18px;
}
.detail-tile {
background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg) 100%);
border: 1px solid transparent;
border-radius: var(--radius);
padding: 16px 18px;
box-shadow:
0 0 0 1px rgba(224, 182, 108, 0.35),
0 0 10px rgba(224, 182, 108, 0.30),
0 4px 12px rgba(11, 20, 16, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
transition: transform 140ms ease, box-shadow 140ms ease;
position: relative;
overflow: hidden;
text-align: center;
}
.detail-tile:hover {
transform: translateY(-2px);
box-shadow:
0 0 0 1px rgba(224, 182, 108, 0.45),
0 0 14px rgba(224, 182, 108, 0.35),
0 8px 20px rgba(11, 20, 16, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.dt-label {
color: var(--wood);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 6px;
opacity: 0.85;
text-align: center;
white-space: pre-line;
line-height: 1.35;
min-height: 2em;
}
.dt-value {
color: var(--text);
font: 800 22px/1.1 Inter, sans-serif;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
text-align: center;
}
.detail-tile.neg .dt-value { color: var(--red); }
.detail-table-controls {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.detail-chip {
background: var(--bg-2);
border: 1px solid var(--line-2);
color: var(--text-2);
padding: 5px 10px;
font: 500 12px/1 Inter, sans-serif;
border-radius: 7px;
cursor: pointer;
}
.detail-chip:hover {
background: var(--bg-3);
color: var(--text);
}
/* The table scrolls horizontally on narrow screens; first column is sticky */
.detail-scroller {
background: var(--bg-2);
border: 1px solid var(--gold);
border-radius: var(--radius);
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
max-width: 100%;
}
.detail-table {
border-collapse: collapse;
width: max-content;
min-width: 100%;
font: 400 13px/1.35 Inter, sans-serif;
font-variant-numeric: tabular-nums;
color: var(--text);
}
.detail-table thead th {
position: sticky;
top: 0;
background: linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 50%, var(--wood-dark) 100%);
color: #1a1410;
font-weight: 800;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: center;
padding: 11px 12px;
border-bottom: 2px solid var(--wood-dark);
white-space: nowrap;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.detail-table thead th.label-col {
text-align: left;
padding-left: 18px;
min-width: 220px;
}
.detail-table td {
padding: 5px 12px;
border-bottom: 1px solid rgba(42, 58, 79, 0.4);
white-space: nowrap;
}
.detail-table td.amt,
.detail-table th.mcol {
min-width: 92px;
text-align: center;
}
.detail-table td.amt {
cursor: pointer;
}
.detail-table td.amt.neg { color: var(--red); }
.detail-table td.amt.zero { color: var(--text-3); }
/* Tap-to-reveal cents: swap the cell contents inline (no tooltip).
The tapped cell transforms to a gold gradient with black text showing
the full-precision value. */
.detail-table td.amt .amt-cents { display: none; }
.detail-table td.amt .amt-whole { display: inline; }
.detail-table td.amt.show-cents {
background: linear-gradient(135deg, #8f6a3e 0%, var(--wood) 100%) !important;
color: #1a1410 !important;
font-weight: 800;
box-shadow: inset 0 0 0 1px var(--wood-dark), 0 2px 6px rgba(0,0,0,0.4);
}
.detail-table td.amt.neg.show-cents {
color: #7a1010 !important; /* deep red, readable against gold */
}
.detail-table td.amt.show-cents .amt-whole { display: none; }
.detail-table td.amt.show-cents .amt-cents { display: inline; }
/* Sticky first column — FULLY opaque so scrolled numbers don't bleed through */
.detail-table .sticky-col {
position: sticky;
left: 0;
background: var(--bg-2);
background-color: #1c1815; /* opaque fallback */
z-index: 2;
min-width: 220px;
max-width: 320px;
padding-right: 14px;
border-right: 1px solid var(--line);
text-overflow: ellipsis;
overflow: hidden;
box-shadow: 6px 0 10px -4px rgba(0,0,0,0.55);
}
.detail-table thead .sticky-col {
background: linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 50%, var(--wood-dark) 100%);
color: #1a1410;
z-index: 3;
}
/* TTM column — full gold gradient summary column.
Entire column highlighted so it pops as the aggregated view. */
.detail-table thead th.ttm-col {
background: linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 50%, var(--wood-dark) 100%);
color: #1a1410;
}
.detail-table td.ttm {
border-left: 2px solid var(--wood-dark);
background: linear-gradient(180deg, rgba(236, 199, 149, 0.85) 0%, rgba(176, 137, 53, 0.8) 50%, rgba(155, 117, 66, 0.75) 100%) !important;
color: #1a1410 !important;
font-weight: 800;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
}
.detail-table td.ttm.zero {
color: #3a2f18 !important;
}
.detail-table td.ttm.neg {
color: #6a0d0d !important; /* deep red against gold */
}
/* Keep the tap-reveal cent view even more prominent if the user taps TTM */
.detail-table td.ttm.show-cents {
background: linear-gradient(135deg, var(--wood-dark) 0%, var(--wood) 100%) !important;
box-shadow: inset 0 0 0 2px #5a3f1f, 0 2px 8px rgba(0,0,0,0.4);
}
.detail-table td.ttm.neg.show-cents {
color: #6a0d0d !important;
}
/* Row hierarchy — clean, minimal. No alternating stripes, no wood tint on subtotals. */
.detail-table tr.row.section .sticky-col {
color: var(--wood);
font-weight: 700;
text-transform: uppercase;
font-size: 11.5px;
letter-spacing: 0.05em;
}
.detail-table tr.row.subtotal .sticky-col,
.detail-table tr.row.subtotal td.amt {
font-weight: 700;
border-top: 1px solid var(--line-2);
}
.detail-table tr.row.subtotal.grand td {
border-top: 3px double var(--gold);
border-bottom: 2px solid var(--gold);
color: var(--gold);
}
.detail-table tr.row.lvl-0 .sticky-col { font-weight: 600; }
.detail-table tr.row.lvl-1 .sticky-col { font-weight: 500; }
.detail-table tr.row.lvl-2 .sticky-col { color: var(--text-2); }
.detail-table tr.row.lvl-3 .sticky-col,
.detail-table tr.row.lvl-4 .sticky-col,
.detail-table tr.row.lvl-5 .sticky-col { color: var(--text-3); }
.detail-table tr.row:hover .sticky-col { background: #1A2620; }
.detail-table tr.row:hover td.amt:not(.show-cents) { background: rgba(224, 182, 108, 0.06); }
/* Toggle chevron */
.row-toggle {
background: transparent;
border: 0;
color: var(--wood);
cursor: pointer;
font-size: 12px;
width: 18px;
padding: 0;
margin-right: 4px;
line-height: 1;
}
.row-toggle:hover { color: var(--gold); }
.row-toggle-spacer {
display: inline-block;
width: 18px;
margin-right: 4px;
}
.detail-empty, .detail-error {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 24px;
text-align: center;
color: var(--text-2);
}
.detail-error { border-color: var(--red); color: var(--red); }
.detail-note {
color: var(--text-3);
font-size: 12px;
margin: 10px 2px 0 2px;
line-height: 1.5;
}
/* Responsive */
@media (max-width: 900px) {
.detail-strip { grid-template-columns: repeat(2, 1fr); }
.detail-table { font-size: 12px; }
.detail-table thead th { padding: 6px 8px; font-size: 10.5px; }
.detail-table td { padding: 4px 8px; }
.detail-table .sticky-col { min-width: 180px; max-width: 220px; }
}
@media (max-width: 560px) {
.detail-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
.dt-value { font-size: 16px; }
.detail-table { font-size: 11.5px; }
.detail-table .sticky-col { min-width: 150px; max-width: 180px; }
}
/* Primary Export chip — stand out from Expand/Collapse */
.detail-chip.detail-chip-primary {
background: linear-gradient(135deg, #8f6a3e 0%, var(--wood) 100%);
color: #1a1410;
border-color: var(--wood-dark);
font-weight: 700;
margin-left: auto;
}
.detail-chip.detail-chip-primary:hover {
filter: brightness(1.1);
color: #1a1410;
}
.detail-table-controls {
align-items: center;
}
/* Export modal */
.export-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(11, 20, 16, 0.6);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
animation: fadeIn 160ms ease;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.export-modal {
background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
border: 2px solid var(--gold);
border-radius: 14px;
padding: 22px 22px 18px;
max-width: 480px;
width: 100%;
box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(224,182,108,0.2);
color: var(--text);
}
.export-modal-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.export-modal h3 {
margin: 0;
font: 800 18px/1 Inter, sans-serif;
color: var(--wood);
letter-spacing: 0.01em;
}
.export-close {
background: transparent;
border: 0;
color: var(--text-3);
font-size: 18px;
cursor: pointer;
padding: 4px 8px;
line-height: 1;
}
.export-close:hover { color: var(--text); }
.export-sub {
color: var(--text-2);
font-size: 13px;
margin: 4px 0 16px 0;
}
.export-options {
display: flex;
flex-direction: column;
gap: 8px;
}
.export-option {
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: 10px;
padding: 12px 14px;
text-align: left;
color: var(--text);
cursor: pointer;
transition: all 140ms ease;
font-family: Inter, sans-serif;
}
.export-option:hover:not(:disabled) {
border-color: var(--gold);
background: var(--bg-3);
transform: translateX(2px);
}
.export-option:active:not(:disabled) { transform: scale(0.98); }
.export-option:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.eo-label {
font-weight: 700;
font-size: 14px;
margin-bottom: 4px;
color: var(--wood);
letter-spacing: 0.02em;
}
.eo-range {
font-size: 12.5px;
color: var(--text);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
/* ============================================================
Statement label — decorative title between toggle row and KPI strip.
"━━━━━ P&L ━━━━━" style with gold lines flanking centered bold text.
Responsive: lines shrink on smaller screens.
============================================================ */
.detail-stmt-label {
display: flex;
align-items: center;
gap: 18px;
margin: 4px 0 16px 0;
text-align: center;
}
.detail-stmt-label::before,
.detail-stmt-label::after {
content: '';
flex: 1;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--wood) 40%, var(--wood-light) 100%);
border-radius: 1px;
box-shadow: 0 0 8px rgba(224, 182, 108, 0.25);
}
.detail-stmt-label::after {
background: linear-gradient(90deg, var(--wood-light) 0%, var(--wood) 60%, transparent 100%);
}
.detail-stmt-label span {
display: inline-block;
padding: 0 18px;
font: 900 26px/1 Inter, sans-serif;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wood);
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
white-space: nowrap;
}
@media (max-width: 640px) {
.detail-stmt-label { gap: 10px; margin: 2px 0 12px 0; }
.detail-stmt-label span {
font-size: 18px;
padding: 0 10px;
}
.detail-stmt-label::before,
.detail-stmt-label::after { height: 1.5px; }
}
/* Connection status dot — lives next to Sign Out button, mirrors footer state */
.connection-dot {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--green);
font-size: 14px;
line-height: 1;
margin: 0 4px 0 2px;
text-shadow: 0 0 8px rgba(143, 188, 122, 0.55);
transition: color 160ms ease, text-shadow 160ms ease;
}
.connection-dot.offline {
color: var(--red);
text-shadow: 0 0 8px rgba(212, 116, 116, 0.55);
}
/* ==================================================================
SESSION 3d / PHASE 2 — toast, upload history, panel error state
================================================================== */
/* ---------- Toast host (fixed, top-center, lives above everything) ---------- */
.toast-host {
position: fixed;
top: 20px;
right: 20px;
z-index: 10000;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
max-width: calc(100vw - 40px);
align-items: flex-end;
}
/* Module-created container (meetings.js, notes.js, pending.js) — same
visual behavior as toast-host. */
.gsl-toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 10000;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
max-width: calc(100vw - 40px);
align-items: flex-end; /* keep toasts hugging the right edge */
}
.gsl-toast {
pointer-events: auto;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px 12px 14px;
border-radius: 10px;
background: var(--bg-2, #1a1410);
border: 1px solid var(--line, #30251b);
box-shadow: 0 8px 24px rgba(11, 20, 16, 0.5);
font: 500 13px/1.35 Inter, sans-serif;
color: var(--wood-dark);
min-width: 240px;
max-width: 360px;
animation: gsl-toast-in 220ms cubic-bezier(0.2, 0.7, 0.3, 1.0);
}
.gsl-toast.is-leaving {
animation: gsl-toast-out 200ms ease-in forwards;
}
@keyframes gsl-toast-in {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes gsl-toast-out {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(20px); }
}
.gsl-toast.is-success {
border-color: #3e6a3e;
background: linear-gradient(180deg, #1d2a1d 0%, #1a1410 100%);
}
.gsl-toast.is-error {
border-color: #8a3b3b;
background: linear-gradient(180deg, #2a1a1a 0%, #1a1410 100%);
}
.gsl-toast-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
font-weight: 800;
font-size: 13px;
flex-shrink: 0;
}
.gsl-toast.is-success .gsl-toast-icon {
background: #3e6a3e;
color: #1a1410;
}
.gsl-toast.is-error .gsl-toast-icon {
background: #c25454;
color: #1a1410;
}
.gsl-toast-msg { flex: 1; }
.gsl-toast-close {
background: transparent;
border: 0;
color: var(--text-3, #a89b89);
font-size: 20px;
line-height: 1;
cursor: pointer;
padding: 0 4px;
transition: color 120ms ease;
}
.gsl-toast-close:hover { color: var(--wood-dark); }
/* ---------- Admin panel note — error state ---------- */
.admin-panel-note.is-error {
color: #e78989;
}
/* ---------- Upload history ---------- */
.admin-history-body { margin-top: 4px; }
.admin-history-loading,
.admin-history-empty {
font: italic 13px/1.5 Inter, sans-serif;
color: var(--p-text-2);
padding: 8px 0;
}
.admin-history-error {
font: 13px/1.45 Inter, sans-serif;
color: #e78989;
padding: 10px 12px;
background: rgba(194, 84, 84, 0.08);
border: 1px solid rgba(194, 84, 84, 0.3);
border-radius: 6px;
}
.admin-history-table {
width: 100%;
border-collapse: collapse;
font: 13px/1.4 Inter, sans-serif;
}
.admin-history-table thead th {
text-align: left;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--p-text-2);
padding: 6px 10px;
border-bottom: 1px solid var(--p-line);
}
.admin-history-table thead th.num { text-align: right; }
.admin-history-table tbody td {
padding: 9px 10px;
border-bottom: 1px solid var(--p-line);
color: var(--p-text);
vertical-align: middle;
}
.admin-history-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-history-table tbody tr:last-child td { border-bottom: 0; }
.admin-history-table .file-cell {
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--p-text-2);
}
.admin-history-table .hist-new { color: #2f7d32; font-weight: 600; }
.admin-history-table .hist-over { color: #8a6d10; font-weight: 600; }
/* ==================================================================
SESSION 4 / PHASE 3 — People tab, modals, forgot/forced reset
================================================================== */
/* ---------- Login extras ---------- */
.login-info {
background: rgba(74, 222, 128, 0.08);
border: 1px solid rgba(74, 222, 128, 0.3);
color: #c8e6c9;
font: 13px/1.5 Inter, sans-serif;
padding: 10px 12px;
border-radius: 6px;
margin-top: 8px;
}
.login-forgot-link {
display: inline-block;
background: transparent;
border: 0;
color: var(--text-3, #a89b89);
font: 500 13px/1.4 Inter, sans-serif;
text-decoration: underline;
text-underline-offset: 3px;
margin-top: 14px;
padding: 4px 6px;
cursor: pointer;
align-self: flex-start;
}
.login-forgot-link:hover { color: var(--wood-dark); }
.login-forgot-link:disabled { opacity: 0.5; cursor: default; }
/* ---------- Modal system (shared) ---------- */
.modal-backdrop {
position: fixed;
inset: 0;
z-index: 9000;
background: rgba(8, 6, 4, 0.78);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
backdrop-filter: blur(2px);
}
.modal-card {
background: var(--bg-2, #1a1410);
border: 1px solid var(--line, #30251b);
border-radius: 12px;
width: 100%;
max-width: 460px;
padding: 28px 28px 24px;
box-shadow: 0 30px 80px rgba(11, 20, 16, 0.6);
font: 14px/1.5 Inter, sans-serif;
color: var(--text);
max-height: calc(100vh - 40px);
overflow-y: auto;
}
.modal-eyebrow {
font: 600 10px/1.2 var(--mono);
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--wood-dark);
margin-bottom: 6px;
}
.modal-title {
font: 400 24px/1.2 var(--serif);
margin: 0 0 8px;
color: var(--ink);
letter-spacing: -0.005em;
}
.modal-title em { color: var(--wood-dark); font-style: italic; font-weight: 400; }
.modal-subtitle {
font: 13px/1.45 Inter, sans-serif;
color: var(--text-2);
margin: 0 0 18px;
}
.modal-form { display: flex; flex-direction: column; gap: 14px; }
.modal-form .field { display: flex; flex-direction: column; gap: 6px; }
.modal-form .field-label {
font: 700 11px/1.2 Inter, sans-serif;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text);
}
.modal-form .field-hint {
font: 12px/1.4 Inter, sans-serif;
color: var(--text-2);
margin-top: 4px;
}
.modal-form input,
.modal-form select {
background: var(--bg-elev);
border: 1px solid var(--line-2);
color: var(--text);
font: 14px/1.4 Inter, sans-serif;
padding: 10px 12px;
border-radius: 6px;
outline: none;
transition: border-color 120ms ease;
}
.modal-form input:focus,
.modal-form select:focus {
border-color: var(--wood);
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 6px;
}
.modal-success {
background: rgba(74, 222, 128, 0.06);
border: 1px solid rgba(74, 222, 128, 0.25);
border-radius: 8px;
padding: 14px 14px 12px;
font: 13px/1.45 Inter, sans-serif;
}
.invite-success-head {
font-weight: 700;
color: #c8e6c9;
margin-bottom: 8px;
}
.invite-success-block {
background: var(--bg-1, #100b08);
color: var(--wood-dark);
font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
border: 1px solid var(--line, #30251b);
border-radius: 6px;
padding: 10px 12px;
white-space: pre-wrap;
word-break: break-word;
margin: 0 0 10px;
}
.invite-success-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* ---------- People tab ---------- */
.people-toolbar {
display: flex;
justify-content: flex-end;
margin-bottom: 12px;
}
.people-invite-btn { padding: 9px 16px; font-size: 13px; }
.people-list-wrap {
background: var(--bg-2, #1a1410);
border: 1px solid var(--line, #30251b);
border-radius: 10px;
padding: 6px 6px 4px;
margin-bottom: 16px;
}
.people-loading,
.people-empty {
font: italic 13px/1.5 Inter, sans-serif;
color: var(--text-3);
padding: 14px 12px;
}
.people-error {
font: 13px/1.45 Inter, sans-serif;
color: #e78989;
padding: 12px;
background: rgba(194, 84, 84, 0.06);
border-radius: 6px;
margin: 4px;
}
.people-table {
width: 100%;
border-collapse: collapse;
font: 13px/1.4 Inter, sans-serif;
}
.people-table thead th {
text-align: left;
font: 700 11px/1.2 Inter, sans-serif;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text-3);
padding: 12px 14px;
border-bottom: 1px solid var(--line);
}
.people-table tbody td {
padding: 12px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
color: var(--text-1);
vertical-align: middle;
}
.people-table tbody tr:last-child td { border-bottom: 0; }
.people-table .actions-col { text-align: right; white-space: nowrap; }
.people-role-select {
font: 500 12px/1.2 var(--sans, Inter, sans-serif);
color: var(--text, #1A2620);
background: var(--paper, #fff);
border: 1px solid var(--rule, #D9D0BC);
border-radius: 4px;
padding: 4px 6px;
margin-right: 10px;
cursor: pointer;
}
.people-role-select:disabled { opacity: 0.5; cursor: default; }
.actions-disabled { color: var(--text-3); opacity: 0.5; }
/* Role + status pills */
.role-pill,
.status-pill {
display: inline-block;
font: 700 10px/1 Inter, sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 5px 9px;
border-radius: 999px;
border: 1px solid transparent;
}
.role-pill.is-owner { background: rgba(176, 137, 53, 0.14); color: var(--wood-dark); border-color: rgba(138, 107, 40, 0.45); }
.role-pill.is-admin { background: rgba(35, 31, 32, 0.07); color: var(--text); border-color: rgba(35, 31, 32, 0.22); }
.role-pill.is-yh_team { background: rgba(168, 155, 137, 0.12); color: var(--text-2); border-color: rgba(168, 155, 137, 0.30); }
.role-pill.is-manager { background: rgba(168, 155, 137, 0.12); color: var(--text-2); border-color: rgba(168, 155, 137, 0.30); }
.role-pill.is-member { background: rgba(168, 155, 137, 0.10); color: var(--text-3); border-color: rgba(168, 155, 137, 0.25); }
.role-pill.is-sales { background: rgba(110, 160, 210, 0.14); color: #2f6aa3; border-color: rgba(110, 160, 210, 0.35); }
.role-pill.is-super { background: linear-gradient(180deg, rgba(176, 137, 53, 0.20) 0%, rgba(176, 137, 53, 0.10) 100%); color: var(--wood-dark); border-color: rgba(138, 107, 40, 0.55); }
.status-pill.is-active { background: rgba(45, 95, 63, 0.12); color: var(--green); border-color: rgba(45, 95, 63, 0.35); }
.status-pill.is-firstlogin { background: rgba(176, 137, 53, 0.12); color: var(--wood-dark); border-color: rgba(138, 107, 40, 0.35); }
.status-pill.is-inactive { background: rgba(168, 155, 137, 0.08); color: var(--text-3); border-color: rgba(168, 155, 137, 0.25); }
/* In-row link buttons */
.btn-link {
background: transparent;
border: 0;
color: var(--wood);
font: 600 12px/1.2 Inter, sans-serif;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 6px 8px;
cursor: pointer;
transition: color 120ms ease;
}
.btn-link:hover { color: var(--text); }
.btn-link:disabled { opacity: 0.5; cursor: default; }
.btn-link.is-danger { color: #e78989; }
.btn-link.is-danger:hover { color: #ff9f9f; }
/* ==================================================================
SESSION 5 / v10 — EQUIPMENT TAB
================================================================== */
/* Toolbar: view toggle + add button */
.eq-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.eq-view-toggle {
display: inline-flex;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
padding: 3px;
gap: 2px;
}
.eq-view-btn {
background: transparent;
border: 0;
color: var(--text-3);
font: 700 12px/1 'Inter', sans-serif;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 9px 16px;
border-radius: 999px;
cursor: pointer;
transition: all 140ms ease;
}
.eq-view-btn:hover { color: var(--text-2); }
.eq-view-btn.active {
background: linear-gradient(180deg, rgba(176, 137, 53, 0.22) 0%, rgba(176, 137, 53, 0.10) 100%);
color: var(--wood);
box-shadow: inset 0 0 0 1px rgba(176, 137, 53, 0.4);
}
.eq-add-btn { margin-top: 0; padding: 9px 16px; font-size: 13px; }
.eq-toolbar-actions {
display: inline-flex;
align-items: stretch;
gap: 10px;
}
.eq-toolbar-actions > * {
align-self: stretch;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Body container */
.eq-body { display: flex; flex-direction: column; gap: 28px; }
.eq-loading,
.eq-empty-mini {
font: italic 13px/1.5 'Inter', sans-serif;
color: var(--text-3);
padding: 14px 4px;
}
.eq-error {
font: 13px/1.45 'Inter', sans-serif;
color: #e78989;
padding: 12px;
background: rgba(194, 84, 84, 0.06);
border-radius: 8px;
}
.eq-empty {
text-align: center;
padding: 60px 20px;
background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
border: 1px dashed var(--line-2);
border-radius: var(--radius);
}
.eq-empty-icon {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
color: var(--wood);
opacity: 0.9;
}
.eq-empty-icon svg { display: block; height: 56px; width: auto; }
.eq-empty-text {
color: var(--text-2);
font-size: 15px;
font-weight: 500;
max-width: 420px;
margin: 0 auto;
}
/* Group (category) */
.eq-group { display: flex; flex-direction: column; gap: 14px; }
.eq-group-head {
display: flex;
align-items: baseline;
gap: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
}
.eq-group-title {
font: 800 18px/1.2 'Inter', sans-serif;
letter-spacing: -0.01em;
color: var(--text);
}
.eq-group-count {
font: 700 11px/1 'Inter', sans-serif;
color: var(--text-3);
background: var(--bg-2);
border: 1px solid var(--line);
padding: 4px 9px;
border-radius: 999px;
letter-spacing: 0.04em;
}
.eq-group-add {
margin-left: auto;
align-self: center;
background: transparent;
border: 1px solid var(--line-2);
color: var(--wood);
font: 600 16px/1 Inter, sans-serif;
width: 28px;
height: 28px;
border-radius: 999px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}
.eq-group-add:hover {
background: rgba(176, 137, 53, 0.12);
border-color: var(--wood);
color: var(--wood);
transform: scale(1.08);
}
.eq-group-add:active { transform: scale(0.95); }
/* ---------- Reorder mode ---------- */
/* The toggle pill — matches the proportions of .eq-add-btn but is a
secondary (dark + gold-accented) pill until activated, at which point
it flips to the same gold gradient as .btn-primary. */
.eq-reorder-toggle {
margin-top: 0;
background: var(--bg-2);
color: var(--wood);
border: 1px solid rgba(176, 137, 53, 0.4);
border-radius: var(--radius-sm);
padding: 9px 16px;
font: 800 13px/1 'Inter', sans-serif;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
transition: transform 0.1s, box-shadow 0.15s, filter 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
box-shadow: 0 2px 8px rgba(11, 20, 16, 0.25);
white-space: nowrap;
}
.eq-reorder-toggle:hover:not(:disabled) {
background: rgba(176, 137, 53, 0.12);
border-color: var(--wood);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(176, 137, 53, 0.22);
}
.eq-reorder-toggle:active:not(:disabled) { transform: translateY(0); }
.eq-reorder-toggle.is-active {
background: linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 50%, var(--wood-dark) 100%);
color: #1a1208;
border-color: var(--wood-dark);
box-shadow: 0 2px 10px rgba(176, 137, 53, 0.35);
}
.eq-reorder-toggle.is-active:hover {
filter: brightness(1.06);
}
/* The little ▲▼ buttons themselves — refined dark pills with gold accent */
.eq-reorder-btn {
background: rgba(8, 6, 4, 0.6);
border: 1px solid rgba(176, 137, 53, 0.32);
color: var(--wood);
font: 700 11px/1 'Inter', sans-serif;
width: 30px;
height: 30px;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin-left: 6px;
transition: background 140ms ease, border-color 140ms ease, transform 100ms ease;
backdrop-filter: blur(2px);
}
.eq-reorder-btn:hover:not(:disabled) {
background: rgba(176, 137, 53, 0.18);
border-color: var(--wood);
}
.eq-reorder-btn:active:not(:disabled) { transform: scale(0.94); }
.eq-reorder-btn:disabled {
opacity: 0.28;
cursor: not-allowed;
}
/* Subtle gold tint on category headers when in reorder mode */
.eq-group.is-reorder .eq-group-head {
background: linear-gradient(180deg, rgba(176, 137, 53, 0.08) 0%, rgba(176, 137, 53, 0.03) 100%);
border: 1px solid rgba(176, 137, 53, 0.22);
border-radius: 10px;
padding: 10px 12px;
}
/* Cards in reorder mode — soft gold dashed outline, no hover-lift */
.eq-card.is-reorder {
cursor: default;
outline: 1px dashed rgba(176, 137, 53, 0.32);
outline-offset: -1px;
}
.eq-card.is-reorder:hover {
transform: none;
box-shadow: none;
border-color: var(--line);
}
/* Card-level reorder controls, top-right corner */
.eq-card-reorder {
position: absolute;
top: 8px;
right: 8px;
display: flex;
flex-direction: column;
gap: 6px;
z-index: 2;
}
.eq-card-reorder .eq-reorder-btn {
width: 30px;
height: 30px;
margin-left: 0;
}
/* ---- Always-on drag-and-drop (categories + cards) ---- */
.eq-groups-wrap {
display: flex;
flex-direction: column;
gap: 28px;
}
.eq-drag-handle {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-3);
cursor: grab;
user-select: none;
-webkit-user-select: none;
touch-action: none;
transition: color 140ms ease, background 140ms ease;
}
.eq-drag-handle:hover { color: var(--wood); }
.eq-drag-handle:active { cursor: grabbing; }
.eq-drag-handle svg { display: block; }
/* Category-level handle: sits at the start of the section header.
Uses an explicit color + faint background so it's visible against
the dark gradient header (var(--text-3) alone disappears). */
.eq-drag-handle-cat {
width: 22px;
height: 22px;
margin-right: 8px;
border-radius: 4px;
color: var(--wood);
background: rgba(176, 137, 53, 0.08);
border: 1px solid rgba(176, 137, 53, 0.18);
flex: 0 0 auto;
}
.eq-drag-handle-cat svg { width: 14px; height: 14px; }
.eq-drag-handle-cat:hover {
background: rgba(176, 137, 53, 0.18);
border-color: rgba(176, 137, 53, 0.35);
}
/* Card-level handle: top-right corner, doesn't trigger card click */
.eq-drag-handle-card {
position: absolute;
top: 6px;
right: 6px;
width: 24px;
height: 24px;
border-radius: 4px;
background: rgba(8, 6, 4, 0.45);
opacity: 0; /* fade in on card hover so it's not visual noise */
transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
z-index: 3;
}
.eq-card { position: relative; } /* anchor handle absolutely */
.eq-card:hover .eq-drag-handle-card,
.eq-drag-handle-card:focus-visible {
opacity: 1;
}
.eq-drag-handle-card:hover {
background: rgba(176, 137, 53, 0.20);
color: var(--wood);
}
/* On touch devices the :hover state is sticky/unreliable — keep handle visible */
@media (hover: none) {
.eq-drag-handle-card { opacity: 0.7; }
}
/* SortableJS ghost states — semi-transparent placeholder while dragging */
.eq-card-ghost {
opacity: 0.35;
background: rgba(176, 137, 53, 0.08) !important;
border-style: dashed !important;
}
.eq-group-ghost {
opacity: 0.45;
}
.eq-group-ghost .eq-group-head {
background: rgba(176, 137, 53, 0.10);
border: 1px dashed rgba(176, 137, 53, 0.50);
border-radius: 8px;
}
/* Card grid */
.eq-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
}
.eq-card {
position: relative;
background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
display: flex;
flex-direction: column;
}
.eq-card:hover {
transform: translateY(-2px);
border-color: var(--line-2);
box-shadow: 0 12px 32px rgba(11, 20, 16, 0.35);
}
.eq-card:active { transform: translateY(0); }
.eq-card-cover {
width: 100%;
aspect-ratio: 16 / 10;
background-color: var(--bg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-bottom: 1px solid var(--line);
position: relative;
}
.eq-card-cover-empty {
display: flex;
align-items: center;
justify-content: center;
color: var(--wood);
background: linear-gradient(135deg, rgba(176, 137, 53, 0.06), rgba(42, 58, 79, 0.4));
}
.eq-card-cover-empty svg { display: block; height: 44px; width: auto; opacity: 0.55; }
.eq-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.eq-card-name {
font: 700 15px/1.3 'Inter', sans-serif;
color: var(--text);
letter-spacing: -0.01em;
}
.eq-card-desc {
font: 500 12px/1.4 'Inter', sans-serif;
color: var(--text-3);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.eq-card-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
/* Pills */
.eq-pill {
display: inline-block;
font: 700 10px/1 'Inter', sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 5px 9px;
border-radius: 999px;
border: 1px solid transparent;
}
.eq-pill-status.is-active { background: rgba(74, 222, 128, 0.10); color: #b6dab6; border-color: rgba(74, 222, 128, 0.3); }
.eq-pill-status.is-under_repair { background: rgba(176, 137, 53, 0.14); color: var(--wood); border-color: rgba(176, 137, 53, 0.4); }
.eq-pill-status.is-inactive { background: rgba(168, 155, 137, 0.10); color: var(--text-3); border-color: rgba(168, 155, 137, 0.25); }
.eq-pill-acq { background: rgba(168, 155, 137, 0.08); color: var(--text-2); border-color: rgba(168, 155, 137, 0.22); }
.eq-pill-future { background: linear-gradient(180deg, rgba(176, 137, 53, 0.32) 0%, rgba(176, 137, 53, 0.18) 100%); color: #f5d8a3; border-color: rgba(176, 137, 53, 0.6); }
/* Form modal extras */
.eq-toggle-row {
flex-direction: row !important;
align-items: center;
gap: 10px !important;
background: rgba(176, 137, 53, 0.06);
border: 1px solid rgba(176, 137, 53, 0.18);
border-radius: 8px;
padding: 10px 12px;
cursor: pointer;
}
.eq-toggle-row input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--wood);
cursor: pointer;
}
.eq-toggle-label {
font: 500 13px/1.4 'Inter', sans-serif;
color: var(--text-2);
}
.eq-toggle-label em {
color: var(--wood);
font-style: normal;
font-weight: 700;
}
.eq-form-actions {
justify-content: space-between !important;
}
.eq-form-actions-right { display: flex; gap: 10px; }
/* ----------------- DETAIL MODAL ----------------- */
.eq-detail-backdrop { padding: 0; }
.eq-detail-card {
background: var(--bg-2);
width: 100%;
max-width: 920px;
height: 100%;
max-height: 100vh;
display: flex;
flex-direction: column;
font: 14px/1.5 'Inter', sans-serif;
color: var(--text);
overflow: hidden;
border-left: 1px solid var(--line-2);
border-right: 1px solid var(--line-2);
}
@media (min-width: 720px) {
.eq-detail-backdrop { padding: 24px; }
.eq-detail-card {
border-radius: 16px;
height: auto;
max-height: calc(100vh - 48px);
border: 1px solid var(--line-2);
box-shadow: 0 30px 80px rgba(11, 20, 16, 0.6);
}
}
.eq-detail-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 22px 24px 18px;
border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
}
.eq-detail-head-text { flex: 1; min-width: 0; }
.eq-detail-head-text .modal-eyebrow { color: var(--wood); font-size: 11px; }
.eq-detail-head-text .modal-title { font-size: 22px; margin-bottom: 8px; word-wrap: break-word; }
.eq-detail-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.eq-detail-desc {
margin-top: 10px;
font: 500 13px/1.5 'Inter', sans-serif;
color: var(--text-2);
}
.eq-detail-head-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.eq-detail-close {
background: transparent;
border: 1px solid var(--line);
color: var(--text-2);
width: 36px; height: 36px;
border-radius: 50%;
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: all 140ms ease;
}
.eq-detail-close:hover {
background: var(--bg);
color: var(--text);
border-color: var(--line-2);
}
.eq-detail-body {
flex: 1;
overflow-y: auto;
padding: 20px 24px 28px;
display: flex;
flex-direction: column;
gap: 26px;
}
.eq-detail-section {
background: var(--bg-3);
border: 1px solid var(--wood-dark);
border-radius: 12px;
padding: 16px 18px;
box-shadow:
0 0 0 1px rgba(176, 137, 53, 0.08),
0 0 16px rgba(176, 137, 53, 0.10);
}
.eq-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 14px;
}
.eq-section-title {
font: 800 13px/1.2 'Inter', sans-serif;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--wood);
}
/* Photo grid */
.eq-photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.eq-photo-tile {
position: relative;
aspect-ratio: 1 / 1;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
}
.eq-photo-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 220ms ease;
}
.eq-photo-img.is-loaded { opacity: 1; }
.eq-photo-del,
.eq-photo-cover {
position: absolute;
top: 6px;
width: 26px;
height: 26px;
border: 0;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
line-height: 1;
background: rgba(11, 20, 16, 0.7);
color: white;
opacity: 0;
transition: opacity 140ms ease, transform 120ms ease;
}
.eq-photo-tile:hover .eq-photo-del,
.eq-photo-tile:hover .eq-photo-cover { opacity: 1; }
/* Cover star is always visible (touch-first UX) */
.eq-photo-cover { opacity: 0.92; }
.eq-photo-del { opacity: 0.85; }
.eq-photo-del { right: 6px; }
.eq-photo-cover { left: 6px; color: var(--wood); }
.eq-photo-del:hover { background: rgba(212, 80, 80, 0.92); transform: scale(1.08); }
.eq-photo-cover:hover { background: rgba(176, 137, 53, 0.92); color: var(--bg); transform: scale(1.08); }
/* Active cover photo: gold filled star, gold ring around tile */
.eq-photo-cover.is-active {
background: var(--wood-light, #d4a96a);
color: var(--bg, #1a1410);
opacity: 1;
}
.eq-photo-tile.is-cover {
outline: 2px solid var(--wood-light, #d4a96a);
outline-offset: -2px;
}
/* Doc list */
.eq-doc-list { display: flex; flex-direction: column; gap: 8px; }
.eq-doc-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
transition: border-color 140ms ease;
}
.eq-doc-row:hover { border-color: var(--line-2); }
.eq-doc-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.eq-doc-meta { flex: 1; min-width: 0; }
.eq-doc-name {
background: transparent;
border: 0;
padding: 0;
text-align: left;
font: 600 13px/1.3 'Inter', sans-serif;
color: var(--text);
cursor: pointer;
transition: color 140ms ease;
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.eq-doc-name:hover { color: var(--wood); }
.eq-doc-sub {
font: 500 11px/1.3 'Inter', sans-serif;
color: var(--text-3);
margin-top: 2px;
}
.eq-doc-del {
background: transparent;
border: 0;
color: var(--text-3);
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 18px;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
transition: all 140ms ease;
}
.eq-doc-del:hover { background: rgba(212, 80, 80, 0.18); color: #e78989; }
/* Notes */
/* ----------------------------------------------------------
EQUIPMENT NOTES & ISSUES — parchment treatment (v33.24)
Reskinned to match the Notes tab aesthetic. The form textarea
and each posted note become mini-parchment surfaces with the
Architects Daughter handwriting font on the body text.
---------------------------------------------------------- */
.eq-note-form {
display: flex;
gap: 8px;
align-items: stretch;
margin-bottom: 14px;
--p-bg: #fbfbf9;
--p-bg-2: #f1f1ee;
--p-bg-3: #fffdf0;
--p-line: #e4e3df;
--p-line-2: #ccccc6;
--p-text: #1A2620;
--p-text-2: #4a4642;
--p-text-3: #8a847e;
--p-accent: #8A6B28;
--p-danger: #8B2635;
}
.eq-note-form textarea {
flex: 1;
background: var(--p-bg);
background-image:
radial-gradient(ellipse at top left, rgba(255, 248, 222, 0.7), transparent 55%),
radial-gradient(ellipse at bottom right, rgba(176, 137, 53, 0.12), transparent 60%);
border: 1px solid var(--p-line-2);
color: var(--p-text);
font-family: 'Architects Daughter', 'Bradley Hand', 'Segoe Script', cursive;
font-size: 17px;
line-height: 1.5;
font-weight: 700;
padding: 10px 12px;
border-radius: 8px;
outline: none;
resize: vertical;
min-height: 56px;
letter-spacing: 0.01em;
box-shadow:
0 2px 6px rgba(11, 20, 16, 0.25),
0 1px 0 rgba(255, 248, 222, 0.4) inset;
transition: border-color 140ms ease;
}
.eq-note-form textarea::placeholder {
color: var(--p-text-3);
font-style: italic;
}
.eq-note-form textarea:focus { border-color: var(--p-accent); }
.eq-note-submit {
align-self: stretch;
padding: 0 16px;
font-size: 13px;
white-space: nowrap;
}
.eq-note-list { display: flex; flex-direction: column; gap: 10px; }
.eq-note {
position: relative;
background: #fbfbf9;
background-image:
radial-gradient(ellipse at top left, rgba(255, 248, 222, 0.7), transparent 55%),
radial-gradient(ellipse at bottom right, rgba(176, 137, 53, 0.12), transparent 60%);
border: 1px solid #ccccc6;
border-radius: 8px;
padding: 12px 14px;
color: #1A2620;
box-shadow:
0 3px 8px rgba(11, 20, 16, 0.30),
0 1px 0 rgba(255, 248, 222, 0.4) inset;
}
.eq-note-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
padding-bottom: 6px;
border-bottom: 1px dashed #e4e3df;
}
.eq-note-author {
font: 700 12px/1.2 'Inter', sans-serif;
color: #4a4642;
letter-spacing: 0.02em;
}
.eq-note-date {
font: 500 11px/1.2 'Inter', sans-serif;
color: #8a847e;
flex: 1;
}
.eq-note-del {
background: transparent;
border: 0;
color: #8a847e;
width: 22px;
height: 22px;
border-radius: 50%;
font-size: 14px;
line-height: 1;
cursor: pointer;
transition: background 140ms ease, color 140ms ease;
}
.eq-note-del:hover { background: rgba(139, 38, 53, 0.10); color: #8B2635; }
.eq-note-body {
font-family: 'Architects Daughter', 'Bradley Hand', 'Segoe Script', cursive;
font-size: 17px;
line-height: 1.5;
font-weight: 700;
letter-spacing: 0.01em;
color: #1A2620;
white-space: pre-wrap;
word-break: break-word;
}
/* Editable variant — your own notes are always editable in place.
Looks like text, gains a soft outline on hover/focus to hint
interactivity. Auto-saves on blur via equipment.js. */
.eq-note-body-edit {
width: 100%;
display: block;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
resize: vertical;
min-height: 50px;
padding: 6px 8px;
margin: -6px -8px; /* align with read-only siblings visually */
outline: none;
transition: background 120ms ease, border-color 120ms ease;
}
.eq-note-body-edit:hover {
background: rgba(255, 248, 222, 0.55);
border-color: #e4e3df;
}
.eq-note-body-edit:focus {
background: #fffdf0;
border-color: #8A6B28;
box-shadow: 0 0 0 1px rgba(138, 106, 42, 0.18);
}
/* ====================================================================
EQUIPMENT FORM — lease term row (start + end + auto-calc term)
==================================================================== */
.eq-lease-fields { display: flex; flex-direction: column; gap: 8px; }
.eq-lease-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
@media (max-width: 540px) {
.eq-lease-row { grid-template-columns: 1fr; }
}
.eq-lease-cell {
display: flex;
flex-direction: column;
gap: 5px;
}
.eq-lease-sublabel {
font: 700 10px/1 Inter, sans-serif;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text-3);
}
.eq-lease-cell input[type="date"] {
background: var(--bg-1, #0e1620);
border: 1px solid var(--line);
color: var(--text);
font: 14px/1.4 Inter, sans-serif;
padding: 9px 11px;
border-radius: 6px;
outline: none;
transition: border-color 120ms ease;
}
.eq-lease-cell input[type="date"]:focus {
border-color: var(--wood);
}
.eq-lease-term-cell {
/* visually distinct as read-only computed value */
}
.eq-lease-term-display {
display: flex;
align-items: center;
min-height: 38px;
padding: 9px 12px;
background: rgba(176, 137, 53, 0.06);
border: 1px solid rgba(176, 137, 53, 0.22);
color: var(--wood);
font: 600 13px/1.3 Inter, sans-serif;
border-radius: 6px;
}
.eq-lease-term-display.is-error {
background: rgba(212, 116, 116, 0.08);
border-color: rgba(212, 116, 116, 0.35);
color: #e89a9a;
font-size: 12px;
}
/* ====================================================================
EQUIPMENT — Lease fields (form) + lease summary (detail view)
==================================================================== */
.eq-lease-fields {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px;
background: rgba(176, 137, 53, 0.04);
border: 1px solid rgba(176, 137, 53, 0.18);
border-radius: 8px;
}
.eq-lease-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
@media (max-width: 540px) {
.eq-lease-row { grid-template-columns: 1fr; }
}
.eq-lease-cell {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
}
.eq-lease-sublabel {
font: 700 10px/1 Inter, sans-serif;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text-3);
}
.eq-lease-cell input[type="date"] {
background: var(--bg-1, #100b08);
border: 1px solid var(--line);
color: var(--text);
font: 14px/1.4 Inter, sans-serif;
padding: 9px 10px;
border-radius: 6px;
outline: none;
transition: border-color 120ms ease;
min-height: 38px;
}
.eq-lease-cell input[type="date"]:focus { border-color: var(--wood); }
.eq-lease-term-cell { justify-content: flex-start; }
.eq-lease-term-display {
background: rgba(176, 137, 53, 0.08);
border: 1px solid rgba(176, 137, 53, 0.28);
color: var(--wood);
font: 700 14px/1 Inter, sans-serif;
letter-spacing: 0.01em;
padding: 0 12px;
border-radius: 6px;
display: flex;
align-items: center;
min-height: 38px;
}
.eq-lease-term-display.is-error {
background: rgba(212, 116, 116, 0.10);
border-color: rgba(212, 116, 116, 0.4);
color: #e89a9a;
font-size: 12px;
}
/* Detail-view lease summary */
.eq-detail-lease {
margin: 10px 0 0;
}
.eq-lease-summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
background: rgba(176, 137, 53, 0.05);
border: 1px solid rgba(176, 137, 53, 0.20);
border-radius: 8px;
overflow: hidden;
}
@media (max-width: 540px) {
.eq-lease-summary { grid-template-columns: 1fr; }
}
.eq-lease-summary-cell {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 14px;
border-right: 1px solid rgba(176, 137, 53, 0.18);
}
.eq-lease-summary-cell:last-child { border-right: 0; }
@media (max-width: 540px) {
.eq-lease-summary-cell { border-right: 0; border-bottom: 1px solid rgba(176, 137, 53, 0.18); }
.eq-lease-summary-cell:last-child { border-bottom: 0; }
}
.eq-lease-summary-label {
font: 700 10px/1 Inter, sans-serif;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text-3);
}
.eq-lease-summary-val {
font: 600 14px/1.3 Inter, sans-serif;
color: var(--text);
}
.eq-lease-summary-cell:last-child .eq-lease-summary-val {
color: var(--wood);
}
/* When the "+ New category…" option reveals the text input, give it a top margin */
#eqFormCategoryNew:not([hidden]) {
margin-top: 8px;
}
/* ===================================================================
MEETINGS TAB (v30 / Session 7)
=================================================================== */
.mtg-toolbar {
display: flex;
justify-content: flex-end;
margin-bottom: 18px;
}
.mtg-new-btn { margin-top: 0; padding: 9px 16px; font-size: 13px; }
.mtg-body { display: flex; flex-direction: column; gap: 28px; }
.mtg-loading,
.mtg-empty-mini {
font: italic 13px/1.5 'Inter', sans-serif;
color: var(--text-3);
padding: 12px 0;
}
.mtg-error {
color: var(--red);
background: rgba(212, 116, 116, 0.10);
border: 1px solid rgba(212, 116, 116, 0.35);
border-radius: 8px;
padding: 12px;
font: 13px/1.5 'Inter', sans-serif;
}
.mtg-empty {
text-align: center;
padding: 60px 20px;
color: var(--text-3);
}
.mtg-empty-icon svg {
width: 56px;
height: 56px;
color: var(--wood);
opacity: 0.55;
margin-bottom: 14px;
}
.mtg-empty-text {
font: italic 14px/1.5 'Inter', sans-serif;
max-width: 360px;
margin: 0 auto;
}
/* Group section */
.mtg-group { display: flex; flex-direction: column; gap: 10px; }
.mtg-group-title {
font: 700 14px/1 'Inter', sans-serif;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wood);
margin: 0 0 6px;
}
/* Meeting row */
.mtg-list { display: flex; flex-direction: column; gap: 8px; }
.mtg-row {
/* meeting cards stay light (ivory) even in the dark theme */
--bg-2: #fcfcf5;
--bg-3: #ffffff;
--text: #1A2620;
--text-2: #4f4a44;
--line: #e4ddcd;
display: flex;
align-items: center;
gap: 16px;
padding: 14px 16px;
background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
border: 1.5px solid var(--wood);
border-radius: 10px;
cursor: pointer;
box-shadow:
0 0 18px rgba(176, 137, 53, 0.22),
0 0 36px rgba(176, 137, 53, 0.10);
transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.mtg-row:hover {
transform: translateY(-1px);
border-color: var(--wood);
box-shadow:
0 0 24px rgba(176, 137, 53, 0.42),
0 0 48px rgba(176, 137, 53, 0.20),
0 8px 24px rgba(11, 20, 16, 0.35);
}
.mtg-row-date {
font: 700 13px/1.2 'Inter', sans-serif;
color: var(--wood);
flex: 0 0 auto;
min-width: 130px;
}
.mtg-row-body {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.mtg-row-title {
font: 600 15px/1.3 'Inter', sans-serif;
color: var(--text);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mtg-pill {
font: 700 10px/1 'Inter', sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 9px;
border-radius: 999px;
border: 1px solid;
flex: 0 0 auto;
}
.mtg-pill.is-scheduled { background: rgba(176, 137, 53, 0.10); color: var(--wood); border-color: rgba(176, 137, 53, 0.35); }
.mtg-pill.is-in_progress { background: rgba(74, 222, 128, 0.10); color: #b6dab6; border-color: rgba(74, 222, 128, 0.30); }
.mtg-pill.is-completed { background: rgba(168, 155, 137, 0.08); color: var(--text-3); border-color: rgba(168, 155, 137, 0.22); }
.mtg-pill.is-cancelled { background: rgba(212, 116, 116, 0.08); color: #d8a4a4; border-color: rgba(212, 116, 116, 0.30); }
/* Detail modal */
.mtg-detail-backdrop { padding: 0; }
.mtg-detail-card {
max-width: 900px;
width: 100%;
max-height: 100vh;
display: flex;
flex-direction: column;
padding: 0;
}
@media (min-width: 768px) {
.mtg-detail-backdrop { padding: 24px; }
.mtg-detail-card {
max-height: calc(100vh - 48px);
border-radius: 14px;
}
}
.mtg-detail-head {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 20px 24px 14px;
border-bottom: 1px solid var(--line);
}
.mtg-detail-head-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mtg-edit-title {
font: 800 22px/1.3 'Inter', sans-serif;
color: var(--text);
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
padding: 4px 8px;
width: 100%;
margin-left: -8px;
}
.mtg-edit-title:focus, .mtg-edit-title:hover { border-color: var(--line); outline: none; background: var(--bg-2); }
.mtg-edit-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.mtg-edit-date,
.mtg-edit-status {
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--text);
font: 13px/1 'Inter', sans-serif;
padding: 7px 10px;
border-radius: 6px;
}
.mtg-detail-head-actions { display: flex; gap: 8px; flex-shrink: 0; }
.mtg-delete-btn {
background: transparent;
border: 1px solid rgba(212, 116, 116, 0.35);
color: #d8a4a4;
font: 700 11px/1 'Inter', sans-serif;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease;
}
.mtg-delete-btn:hover { background: rgba(212, 116, 116, 0.12); border-color: rgba(212, 116, 116, 0.6); }
.mtg-close-btn {
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--text-2);
font: 600 18px/1 'Inter', sans-serif;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.mtg-close-btn:hover { background: var(--bg-3); color: var(--text); }
.mtg-detail-body {
flex: 1;
overflow-y: auto;
padding: 18px 24px 24px;
display: flex;
flex-direction: column;
gap: 24px;
}
/* Section block */
.mtg-section { display: flex; flex-direction: column; gap: 10px; }
.mtg-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mtg-section-title {
font: 700 13px/1 'Inter', sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--wood);
margin: 0;
}
.mtg-add-link {
background: transparent;
border: 1px solid rgba(176, 137, 53, 0.32);
color: var(--wood);
font: 700 11px/1 'Inter', sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 11px;
border-radius: 999px;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease;
}
.mtg-add-link:hover { background: rgba(176, 137, 53, 0.14); border-color: var(--wood); }
.mtg-list-section { display: flex; flex-direction: column; gap: 8px; }
/* Item rows (agenda / decision / action) */
.mtg-item {
display: flex;
gap: 10px;
align-items: flex-start;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 10px;
}
.mtg-item-status {
flex: 0 0 auto;
background: var(--bg);
border: 1px solid var(--line);
color: var(--text-2);
font: 600 11px/1 'Inter', sans-serif;
padding: 6px 8px;
border-radius: 6px;
min-width: 110px;
cursor: pointer;
}
.mtg-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mtg-item-title {
background: transparent;
border: 1px solid transparent;
color: var(--text);
font: 600 14px/1.4 'Inter', sans-serif;
padding: 4px 6px;
border-radius: 4px;
}
.mtg-item-title:focus, .mtg-item-title:hover { border-color: var(--line); background: var(--bg); outline: none; }
.mtg-item-desc {
background: transparent;
border: 1px solid transparent;
color: var(--text-2);
font: 13px/1.5 'Inter', sans-serif;
padding: 4px 6px;
border-radius: 4px;
resize: none; /* JS auto-sizes via scrollHeight */
overflow: hidden;
min-height: 32px;
box-sizing: border-box;
}
.mtg-item-desc:focus, .mtg-item-desc:hover { border-color: var(--line); background: var(--bg); outline: none; }
.mtg-item-del {
flex: 0 0 auto;
background: transparent;
border: 0;
color: var(--text-3);
font: 600 18px/1 'Inter', sans-serif;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
}
.mtg-item-del:hover { background: rgba(212, 116, 116, 0.14); color: #d8a4a4; }
/* Action item meta row (assignee + due date) */
.mtg-action-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.mtg-action-assignee,
.mtg-action-due {
background: var(--bg);
border: 1px solid var(--line);
color: var(--text-2);
font: 12px/1 'Inter', sans-serif;
padding: 5px 8px;
border-radius: 4px;
}
/* Notes */
.mtg-note-form { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; }
.mtg-note-form textarea {
flex: 1;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--text);
font: 13px/1.5 'Inter', sans-serif;
padding: 8px 10px;
border-radius: 6px;
resize: vertical;
}
.mtg-note-submit { margin-top: 0; padding: 9px 14px; font-size: 12px; flex: 0 0 auto; }
.mtg-notes-list { display: flex; flex-direction: column; gap: 8px; }
.mtg-note {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 10px 12px;
}
.mtg-note-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.mtg-note-author { font: 700 12px/1 'Inter', sans-serif; color: var(--wood); }
.mtg-note-time { font: 11px/1 'Inter', sans-serif; color: var(--text-3); flex: 1; }
.mtg-note-del {
background: transparent;
border: 0;
color: var(--text-3);
cursor: pointer;
font: 600 16px/1 'Inter', sans-serif;
padding: 2px 6px;
border-radius: 4px;
}
.mtg-note-del:hover { background: rgba(212, 116, 116, 0.14); color: #d8a4a4; }
.mtg-note-body {
font: 13px/1.5 'Inter', sans-serif;
color: var(--text);
white-space: pre-wrap;
word-wrap: break-word;
}
/* Meeting attachments — photos + documents */
.mtg-photo-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
}
.mtg-photo-tile {
position: relative;
aspect-ratio: 1 / 1;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
}
.mtg-photo-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 220ms ease;
}
.mtg-photo-img.is-loaded { opacity: 1; }
.mtg-photo-del {
position: absolute;
top: 6px;
right: 6px;
width: 26px;
height: 26px;
border: 0;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
line-height: 1;
background: rgba(11, 20, 16, 0.7);
color: white;
opacity: 0.85;
transition: background 140ms ease, transform 120ms ease;
}
.mtg-photo-del:hover { background: rgba(212, 80, 80, 0.92); transform: scale(1.08); }
.mtg-doc-list { display: flex; flex-direction: column; gap: 8px; }
.mtg-doc-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
}
.mtg-doc-icon {
width: 32px;
height: 32px;
flex: 0 0 auto;
color: var(--wood);
display: flex;
align-items: center;
justify-content: center;
}
.mtg-doc-icon svg { width: 100%; height: 100%; }
.mtg-doc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mtg-doc-name {
background: transparent;
border: 0;
color: var(--text);
font: 600 13px/1.3 'Inter', sans-serif;
text-align: left;
cursor: pointer;
padding: 0;
text-decoration: underline;
text-decoration-color: rgba(176, 137, 53, 0.4);
text-underline-offset: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mtg-doc-name:hover { color: var(--wood); }
.mtg-doc-sub { font: 11px/1 'Inter', sans-serif; color: var(--text-3); }
.mtg-doc-del {
flex: 0 0 auto;
background: transparent;
border: 0;
color: var(--text-3);
font: 600 18px/1 'Inter', sans-serif;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
}
.mtg-doc-del:hover { background: rgba(212, 116, 116, 0.14); color: #d8a4a4; }
/* Bottom add link & carry buttons */
.mtg-add-link-bottom {
align-self: flex-start;
margin-top: 6px;
}
.mtg-carry-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: 1px solid rgba(176, 137, 53, 0.4);
color: var(--wood);
font: 700 11px/1 'Inter', sans-serif;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease;
}
.mtg-carry-btn:hover { background: rgba(176, 137, 53, 0.14); border-color: var(--wood); }
.mtg-carry-icon {
width: 14px;
height: 14px;
flex: 0 0 auto;
}
/* Carried marker pill on items — small blue pill with up-right SVG arrow,
positioned at the bottom-right corner of the agenda/decision box. */
.mtg-carried-pill {
display: inline-flex;
align-items: center;
gap: 4px;
font: 800 9px/1 'Inter', sans-serif;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 999px;
background: rgba(31, 77, 122, 0.10);
color: #4C5C7A;
border: 1px solid rgba(31, 77, 122, 0.45);
margin-top: 6px;
align-self: flex-end;
width: fit-content;
}
.mtg-carried-icon {
width: 11px;
height: 11px;
flex: 0 0 auto;
}
/* Carry forward modal */
.mtg-carry-card {
max-width: 560px;
display: flex;
flex-direction: column;
gap: 14px;
}
.mtg-carry-target { display: flex; flex-direction: column; gap: 8px; }
.mtg-carry-target select {
background: var(--bg);
border: 1px solid var(--line);
color: var(--text);
font: 13px/1 'Inter', sans-serif;
padding: 8px 10px;
border-radius: 6px;
width: 100%;
}
.mtg-carry-new {
align-self: flex-start;
}
.mtg-carry-sections {
display: flex;
flex-direction: column;
gap: 14px;
max-height: 50vh;
overflow-y: auto;
}
.mtg-carry-block {
border: 1px solid var(--line);
border-radius: 8px;
padding: 10px 12px;
background: var(--bg);
}
.mtg-carry-block-head {
display: flex;
justify-content: space-between;
align-items: center;
font: 700 12px/1 'Inter', sans-serif;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wood);
margin-bottom: 8px;
}
.mtg-carry-selectall {
background: transparent;
border: 0;
color: var(--text-3);
font: 600 11px/1 'Inter', sans-serif;
cursor: pointer;
padding: 4px 6px;
border-radius: 4px;
text-transform: none;
letter-spacing: 0;
}
.mtg-carry-selectall:hover { color: var(--wood); background: rgba(176, 137, 53, 0.08); }
.mtg-carry-list { display: flex; flex-direction: column; gap: 6px; }
.mtg-carry-row {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 4px;
cursor: pointer;
}
.mtg-carry-row input[type="checkbox"] {
margin: 0;
cursor: pointer;
flex: 0 0 auto;
}
.mtg-carry-row-title {
font: 13px/1.4 'Inter', sans-serif;
color: var(--text);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mtg-carry-marker {
font: 700 10px/1 'Inter', sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
background: rgba(168, 155, 137, 0.10);
padding: 3px 7px;
border-radius: 999px;
flex: 0 0 auto;
}
.mtg-carry-footer {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
margin-top: 4px;
}
/* ===================================================================
MEETING DETAIL MODAL — PARCHMENT THEME (v33.1)
Override prior styles for the meetings modal only.
=================================================================== */
/* Parchment palette — local to .mtg-detail-card */
.mtg-detail-card {
--p-bg: #fbfbf9; /* aged parchment */
--p-bg-2: #f1f1ee; /* warmer panel */
--p-bg-3: #fffdf0; /* highlight (input bg) */
--p-line: #e4e3df; /* warm line */
--p-line-2: #ccccc6; /* stronger border */
--p-text: #1A2620; /* near black, warm */
--p-text-2: #4a4642; /* secondary */
--p-text-3: #8a847e; /* muted */
--p-accent: #8A6B28; /* deep gold (instead of bright wood-light) */
--p-accent-2: #C9A84C; /* mid gold */
--p-danger: #8B2635; /* deep red */
}
/* Make the modal HUGE (Zoom-friendly) */
.mtg-detail-backdrop { padding: 12px; }
.mtg-detail-card {
max-width: 1400px;
width: 100%;
max-height: calc(100vh - 24px);
background: var(--p-bg);
background-image:
radial-gradient(ellipse at top left, rgba(255, 248, 222, 0.6), transparent 50%),
radial-gradient(ellipse at bottom right, rgba(176, 137, 53, 0.10), transparent 60%);
border: 1px solid var(--p-line-2);
color: var(--p-text);
font-family: 'Inter', sans-serif;
border-radius: 14px;
display: flex;
flex-direction: column;
padding: 0;
box-shadow: 0 30px 80px rgba(11, 20, 16, 0.6), inset 0 0 60px rgba(180, 140, 70, 0.06);
}
@media (min-width: 768px) {
.mtg-detail-backdrop { padding: 24px; }
}
/* Header */
.mtg-detail-card .mtg-detail-head {
background: linear-gradient(180deg, rgba(255, 248, 222, 0.6), rgba(245, 237, 217, 0));
border-bottom: 1px solid var(--p-line);
padding: 22px 28px 16px;
}
.mtg-detail-card .mtg-edit-title {
background: transparent;
border: 1px solid transparent;
color: var(--p-text);
font-family: 'Inter', sans-serif;
font-size: 26px;
font-weight: 800;
}
.mtg-detail-card .mtg-edit-title:focus,
.mtg-detail-card .mtg-edit-title:hover {
background: var(--p-bg-3);
border-color: var(--p-line);
outline: none;
}
.mtg-detail-card .mtg-edit-date,
.mtg-detail-card .mtg-edit-status {
background: var(--p-bg-3);
border: 1px solid var(--p-line);
color: var(--p-text);
}
/* Header action buttons in parchment palette */
.mtg-detail-card .mtg-carry-btn {
background: var(--p-bg-3);
border: 1px solid var(--p-line-2);
color: var(--p-accent);
}
.mtg-detail-card .mtg-carry-btn:hover {
background: rgba(176, 137, 53, 0.10);
border-color: var(--p-accent);
}
.mtg-detail-card .mtg-delete-btn {
background: transparent;
border: 1px solid rgba(139, 38, 53, 0.4);
color: var(--p-danger);
}
.mtg-detail-card .mtg-delete-btn:hover {
background: rgba(139, 38, 53, 0.08);
border-color: var(--p-danger);
}
.mtg-detail-card .mtg-close-btn {
background: var(--p-bg-3);
border: 1px solid var(--p-line);
color: var(--p-text-2);
}
.mtg-detail-card .mtg-close-btn:hover {
background: var(--p-bg-2);
color: var(--p-text);
}
/* Two-pane body */
.mtg-detail-card .mtg-detail-body {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0;
gap: 0;
}
.mtg-pane {
overflow-y: auto;
padding: 18px 24px 24px;
}
.mtg-pane-left {
flex: 1;
border-bottom: 1px solid var(--p-line);
}
.mtg-pane-right {
flex: 0 0 auto;
background: rgba(239, 228, 203, 0.5);
display: flex;
flex-direction: column;
gap: 22px;
}
@media (min-width: 900px) {
.mtg-detail-card .mtg-detail-body {
flex-direction: row;
gap: 0;
}
.mtg-pane-left {
flex: 1 1 60%;
border-bottom: 0;
border-right: 1px solid var(--p-line);
}
.mtg-pane-right {
flex: 0 0 40%;
max-width: 480px;
}
}
/* ---- Mobile drawer (phones only) ----
Hides the right pane behind a slide-up bottom sheet so the agenda
gets the full viewport. Above 900px this collapses to nothing — the
side-by-side layout is untouched. */
.mtg-drawer-handle { display: none; }
@media (max-width: 899.98px) {
.mtg-detail-card .mtg-detail-body {
position: relative; /* anchor for the bottom sheet */
}
.mtg-pane-left {
border-bottom: 0;
/* leave room so the bottom edge of the agenda isn't hidden by the handle */
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
.mtg-drawer-handle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 4;
width: 100%;
height: calc(60px + env(safe-area-inset-bottom, 0px));
padding: 0 18px env(safe-area-inset-bottom, 0px);
background: linear-gradient(180deg, var(--p-bg-2) 0%, var(--p-bg) 100%);
border-top: 1px solid var(--p-line-2);
box-shadow: 0 -8px 24px rgba(60, 40, 10, 0.12);
color: var(--p-accent);
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.06em;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.2s ease;
}
.mtg-drawer-handle:active {
background: linear-gradient(180deg, var(--p-bg-3) 0%, var(--p-bg-2) 100%);
}
.mtg-drawer-grip {
position: absolute;
top: 7px;
left: 50%;
transform: translateX(-50%);
width: 44px;
height: 4px;
border-radius: 2px;
background: var(--p-line-2);
}
.mtg-drawer-label {
flex: 1;
text-align: center;
margin-top: 6px; /* visually centered relative to the grip */
}
.mtg-drawer-chev {
font-size: 18px;
margin-top: 6px;
transition: transform 0.25s ease;
}
.mtg-detail-card.mtg-drawer-open .mtg-drawer-chev {
transform: rotate(180deg);
}
.mtg-pane-right {
position: absolute;
left: 0;
right: 0;
bottom: calc(60px + env(safe-area-inset-bottom, 0px));
z-index: 3;
height: 75vh;
max-height: calc(100vh - 200px); /* keep header always visible */
background: var(--p-bg);
border-top: 1px solid var(--p-line-2);
box-shadow: 0 -16px 40px rgba(60, 40, 10, 0.18);
transform: translateY(100%);
transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.24, 1);
padding-top: 24px; /* extra breathing room at top */
padding-bottom: 24px;
overscroll-behavior: contain;
will-change: transform;
}
.mtg-detail-card.mtg-drawer-open .mtg-pane-right {
transform: translateY(0);
}
/* When drawer is open, lift the handle along with it so the user
can tap the same surface to close. */
.mtg-detail-card.mtg-drawer-open .mtg-drawer-handle {
box-shadow: 0 -2px 12px rgba(60, 40, 10, 0.10);
border-top-color: var(--p-line);
}
}
/* Section titles in parchment */
.mtg-detail-card .mtg-section-title {
color: var(--p-accent);
font-family: 'Inter', sans-serif;
font-weight: 800;
font-size: 12px;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.mtg-detail-card .mtg-add-link {
background: transparent;
border: 1px solid var(--p-line-2);
color: var(--p-accent);
}
.mtg-detail-card .mtg-add-link:hover {
background: rgba(176, 137, 53, 0.10);
border-color: var(--p-accent);
}
/* Items (agenda, decision, action) on parchment */
.mtg-detail-card .mtg-item {
background: var(--p-bg-3);
border: 1px solid var(--p-line);
color: var(--p-text);
}
.mtg-detail-card .mtg-item-status {
background: var(--p-bg);
border: 1px solid var(--p-line);
color: var(--p-text-2);
}
.mtg-detail-card .mtg-item-title,
.mtg-detail-card .mtg-item-desc {
color: var(--p-text);
background: transparent;
}
.mtg-detail-card .mtg-item-title:focus,
.mtg-detail-card .mtg-item-title:hover,
.mtg-detail-card .mtg-item-desc:focus,
.mtg-detail-card .mtg-item-desc:hover {
background: var(--p-bg);
border-color: var(--p-line);
}
.mtg-detail-card .mtg-item-title::placeholder,
.mtg-detail-card .mtg-item-desc::placeholder {
color: var(--p-text-3);
}
/* Agenda items only — larger, bold, dark blue title; larger, regular dark blue description.
Scoped to .mtg-agenda-item so decisions keep their existing styling. */
.mtg-detail-card .mtg-agenda-item .mtg-item-title {
font: 800 18px/1.4 'Inter', sans-serif;
color: #4C5C7A;
letter-spacing: -0.005em;
}
.mtg-detail-card .mtg-agenda-item .mtg-item-desc {
font: 500 16px/1.5 'Inter', sans-serif;
color: #4C5C7A;
}
.mtg-detail-card .mtg-agenda-item .mtg-item-title::placeholder,
.mtg-detail-card .mtg-agenda-item .mtg-item-desc::placeholder {
color: rgba(31, 77, 122, 0.55);
}
.mtg-detail-card .mtg-item-del {
color: var(--p-text-3);
}
.mtg-detail-card .mtg-item-del:hover {
background: rgba(139, 38, 53, 0.10);
color: var(--p-danger);
}
.mtg-detail-card .mtg-action-assignee,
.mtg-detail-card .mtg-action-due {
background: var(--p-bg);
border: 1px solid var(--p-line);
color: var(--p-text-2);
}
/* Numbered agenda items */
.mtg-detail-card .mtg-agenda-item {
display: flex;
gap: 10px;
align-items: flex-start;
}
.mtg-detail-card .mtg-item-num {
flex: 0 0 auto;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font: 700 14px/1 'Source Serif 4', 'Georgia', serif;
color: var(--p-accent);
background: var(--p-bg);
border: 1px solid var(--p-line);
border-radius: 50%;
margin-top: 2px;
}
/* ---- Phone-only item layout (agenda + decisions + actions) ----
On phones the status dropdown ate too much horizontal space, leaving
the title squeezed into a narrow column. Switch to a 2-row grid so
the title and description span full width, with status as a compact
pill on the top row alongside the number and delete button. */
@media (max-width: 899.98px) {
.mtg-detail-card .mtg-item,
.mtg-detail-card .mtg-agenda-item {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"num status del"
"body body body";
column-gap: 10px;
row-gap: 8px;
align-items: center;
}
.mtg-detail-card .mtg-item-num { grid-area: num; margin-top: 0; }
.mtg-detail-card .mtg-item-del { grid-area: del; align-self: center; }
.mtg-detail-card .mtg-item-body { grid-area: body; }
.mtg-detail-card .mtg-item-status {
grid-area: status;
justify-self: start; /* hug left, don't stretch */
min-width: 0; /* override the 110px desktop floor */
width: auto;
padding: 4px 22px 4px 8px; /* room for the native chevron */
font-size: 11px;
line-height: 1;
height: 26px;
border-radius: 13px; /* pill */
}
/* For decision/action rows there's no .mtg-item-num — let status take
the leftmost spot so the row still aligns cleanly. */
.mtg-detail-card .mtg-item:not(.mtg-agenda-item) {
grid-template-columns: 1fr auto;
grid-template-areas:
"status del"
"body body";
}
}
/* Empty-state minis on parchment */
.mtg-detail-card .mtg-empty-mini {
color: var(--p-text-3);
}
/* Notes */
.mtg-detail-card .mtg-note-form textarea {
background: var(--p-bg-3);
border: 1px solid var(--p-line);
color: var(--p-text);
}
.mtg-detail-card .mtg-note-form textarea::placeholder { color: var(--p-text-3); }
.mtg-detail-card .mtg-note-submit {
background: linear-gradient(180deg, #c8a058 0%, #a87c2c 50%, #7a5a1a 100%);
border: 1px solid #7a5a1a;
color: #fdf6e3;
box-shadow: 0 2px 8px rgba(122, 90, 26, 0.25);
}
.mtg-detail-card .mtg-note {
background: var(--p-bg-3);
border: 1px solid var(--p-line);
}
.mtg-detail-card .mtg-note-author { color: var(--p-accent); }
.mtg-detail-card .mtg-note-time { color: var(--p-text-3); }
.mtg-detail-card .mtg-note-body { color: var(--p-text); }
.mtg-detail-card .mtg-note-del { color: var(--p-text-3); }
.mtg-detail-card .mtg-note-del:hover { background: rgba(139, 38, 53, 0.10); color: var(--p-danger); }
/* Photos / Documents on parchment */
.mtg-detail-card .mtg-photo-tile {
background: var(--p-bg);
border: 1px solid var(--p-line);
}
.mtg-detail-card .mtg-doc-row {
background: var(--p-bg-3);
border: 1px solid var(--p-line);
}
.mtg-detail-card .mtg-doc-icon { color: var(--p-accent); }
.mtg-detail-card .mtg-doc-name {
color: var(--p-text);
text-decoration-color: rgba(138, 106, 42, 0.4);
}
.mtg-detail-card .mtg-doc-name:hover { color: var(--p-accent); }
.mtg-detail-card .mtg-doc-sub { color: var(--p-text-3); }
.mtg-detail-card .mtg-doc-del { color: var(--p-text-3); }
.mtg-detail-card .mtg-doc-del:hover { background: rgba(139, 38, 53, 0.10); color: var(--p-danger); }
/* Subtle vertical scrollbar styling within parchment */
.mtg-detail-card .mtg-pane::-webkit-scrollbar { width: 8px; }
.mtg-detail-card .mtg-pane::-webkit-scrollbar-track { background: transparent; }
.mtg-detail-card .mtg-pane::-webkit-scrollbar-thumb {
background: rgba(176, 137, 53, 0.3);
border-radius: 4px;
}
/* ===================================================================
MEETING MODAL POLISH (v33.2)
=================================================================== */
/* Logo */
.mtg-detail-logo {
flex: 0 0 auto;
height: 64px;
width: auto;
align-self: flex-start;
margin-right: 16px;
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
/* The logo is solid black; it reads well against parchment */
opacity: 0.92;
}
@media (max-width: 768px) {
.mtg-detail-logo { height: 48px; margin-right: 10px; }
}
/* More breathing room around header content */
.mtg-detail-card .mtg-detail-head {
padding: 24px 28px 18px;
gap: 16px;
align-items: flex-start;
}
.mtg-detail-card .mtg-detail-head-fields {
flex: 1;
min-width: 0;
gap: 10px;
}
.mtg-detail-card .mtg-edit-meta {
gap: 12px;
}
/* Date / Status field with explicit label above */
.mtg-edit-meta-field {
display: flex;
flex-direction: column;
gap: 3px;
}
.mtg-edit-meta-label {
font: 700 10px/1 'Inter', sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--p-accent);
padding-left: 2px;
}
/* Buttons need to be vertically centered with the title block */
.mtg-detail-card .mtg-detail-head-actions {
flex-shrink: 0;
align-items: center;
padding-top: 4px;
}
/* On narrow screens, stack header so buttons aren't cramped */
@media (max-width: 768px) {
.mtg-detail-card .mtg-detail-head {
flex-wrap: wrap;
}
.mtg-detail-card .mtg-detail-head-actions {
width: 100%;
justify-content: flex-end;
padding-top: 8px;
}
}
/* ===================================================================
MEETING MODAL HEADER FIX (v33.4)
- Account for iPad Safari URL bar overlapping top of modal
- Equalize Date and Status field widths
=================================================================== */
/* Push modal content below Safari URL bar / dynamic top inset */
.mtg-detail-card .mtg-detail-head {
padding-top: max(40px, env(safe-area-inset-top, 24px) + 24px);
}
/* Make Date and Status the same size */
.mtg-detail-card .mtg-edit-meta-field {
flex: 0 0 auto;
width: 180px;
}
.mtg-detail-card .mtg-edit-date,
.mtg-detail-card .mtg-edit-status {
width: 100%;
box-sizing: border-box;
padding: 8px 10px;
font: 13px/1.2 'Inter', sans-serif;
border-radius: 6px;
}
@media (max-width: 600px) {
.mtg-detail-card .mtg-edit-meta-field { width: 140px; }
}
/* ===================================================================
MEETING MODAL HEADER (v33.5) — Bigger logo, dropped down
=================================================================== */
.mtg-detail-card .mtg-detail-logo {
height: 96px;
margin-top: 8px;
margin-right: 20px;
}
@media (max-width: 768px) {
.mtg-detail-card .mtg-detail-logo {
height: 72px;
margin-top: 6px;
}
}
/* ===================================================================
DATE INPUT FIX (v33.6) — Make it look like a real bordered field
matching the Status dropdown next to it
=================================================================== */
.mtg-detail-card .mtg-edit-date {
/* Force a visible border like the status select */
background: var(--p-bg-3) !important;
border: 1px solid var(--p-line-2) !important;
color: var(--p-text) !important;
-webkit-appearance: none;
appearance: none;
min-height: 38px;
cursor: pointer;
position: relative;
}
.mtg-detail-card .mtg-edit-status {
background: var(--p-bg-3) !important;
border: 1px solid var(--p-line-2) !important;
color: var(--p-text) !important;
min-height: 38px;
}
/* Show a visible "Pick date" hint when value is empty (iOS Safari hides the placeholder text on type="date") */
.mtg-detail-card .mtg-edit-date::-webkit-datetime-edit {
color: var(--p-text);
}
.mtg-detail-card .mtg-edit-date:not([value=""]):invalid::-webkit-datetime-edit,
.mtg-detail-card .mtg-edit-date[value=""]::-webkit-datetime-edit {
color: var(--p-text-3);
}
/* iOS calendar icon — bring it back so users see this is a date picker */
.mtg-detail-card .mtg-edit-date::-webkit-calendar-picker-indicator {
opacity: 0.6;
filter: invert(35%) sepia(40%) saturate(800%) hue-rotate(15deg);
cursor: pointer;
}
/* ===================================================================
DATE / STATUS HEIGHT MATCH (v33.7)
=================================================================== */
.mtg-detail-card .mtg-edit-date,
.mtg-detail-card .mtg-edit-status {
height: 40px !important;
min-height: 40px !important;
padding: 0 10px !important;
line-height: 38px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
}
/* ===================================================================
PENDING TAB (v33.16 / Session 8)
Cross-meeting team dashboard — upcoming meeting pills + sortable
action items table.
=================================================================== */
.pending-loading,
.pending-error {
padding: 24px;
color: var(--text-3);
font-style: italic;
}
.pending-error { color: var(--red); }
/* ---- Upcoming meetings strip (compact gold pills) ---- */
.pending-upcoming {
margin: 0 0 32px;
}
.pending-upcoming-label {
font-family: 'Inter', sans-serif;
font-weight: 800;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--wood);
margin-bottom: 10px;
}
.pending-upcoming-empty {
color: var(--text-3);
font-style: italic;
font-size: 14px;
}
.pending-upcoming-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pending-pill {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 7px 14px;
background: linear-gradient(180deg, rgba(236, 199, 149, 0.16) 0%, rgba(176, 137, 53, 0.10) 100%);
border: 1px solid var(--wood-dark);
border-radius: 999px;
color: var(--wood);
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
box-shadow:
0 0 0 1px rgba(176, 137, 53, 0.10),
0 0 14px rgba(176, 137, 53, 0.18);
}
.pending-pill:hover {
transform: translateY(-1px);
border-color: var(--wood);
background: linear-gradient(180deg, rgba(236, 199, 149, 0.26) 0%, rgba(176, 137, 53, 0.16) 100%);
box-shadow:
0 0 0 1px rgba(176, 137, 53, 0.30),
0 0 22px rgba(176, 137, 53, 0.40);
}
.pending-pill-date {
font-weight: 700;
color: var(--wood);
}
.pending-pill-title {
color: var(--text);
font-weight: 500;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Stale-items nudge banner — used by Pending and Notes tabs.
Subtle warm-amber bar with a dismissable × on the right. */
.stale-notice {
margin: 0 0 14px;
}
.stale-notice[hidden] { display: none; }
.stale-notice-body {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: rgba(176, 137, 53, 0.10);
border: 1px solid rgba(176, 137, 53, 0.35);
border-left: 3px solid var(--wood);
border-radius: 8px;
font: 500 13px/1.4 'Inter', sans-serif;
color: var(--text);
}
.stale-notice-body strong { color: var(--wood); font-weight: 800; }
.stale-notice-icon { font-size: 16px; flex: 0 0 auto; }
.stale-notice-text { flex: 1; min-width: 0; }
.stale-notice-dismiss {
flex: 0 0 auto;
background: transparent;
border: 0;
color: var(--text-3);
font-size: 18px;
line-height: 1;
width: 26px;
height: 26px;
border-radius: 50%;
cursor: pointer;
transition: background 140ms ease, color 140ms ease;
}
.stale-notice-dismiss:hover {
background: rgba(176, 137, 53, 0.15);
color: var(--wood);
}
/* ---- Toolbar (Show completed toggle) ---- */
.pending-section-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
margin: 8px 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
}
.pending-section-actions {
display: inline-flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.pending-add-decision-btn {
font-size: 12px;
padding: 6px 12px;
letter-spacing: 0.04em;
}
.pending-section-title {
font-family: 'Inter', sans-serif;
font-weight: 800;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--wood);
margin: 0;
}
@media (max-width: 600px) {
.pending-section-head {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
.pending-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Inter', sans-serif;
font-size: 13px;
color: var(--text-2);
cursor: pointer;
user-select: none;
}
.pending-toggle input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 1px solid var(--line-2);
border-radius: 4px;
background: var(--bg-2);
cursor: pointer;
position: relative;
transition: background 140ms ease, border-color 140ms ease;
}
.pending-toggle input[type="checkbox"]:checked {
background: var(--wood);
border-color: var(--wood-dark);
}
.pending-toggle input[type="checkbox"]:checked::after {
content: '✓';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: var(--bg);
}
/* ---- Action items table ---- */
.pending-body {
background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
border: 1.5px solid var(--wood);
border-radius: 10px;
overflow: hidden;
box-shadow:
0 0 18px rgba(176, 137, 53, 0.22),
0 0 36px rgba(176, 137, 53, 0.10);
}
.pending-table {
width: 100%;
border-collapse: collapse;
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--text);
}
.pending-th {
text-align: left;
padding: 14px 16px;
background: rgba(11, 20, 16, 0.18);
border-bottom: 1px solid var(--line);
font-size: 11px;
letter-spacing: 0.10em;
text-transform: uppercase;
font-weight: 700;
color: var(--wood);
cursor: pointer;
user-select: none;
white-space: nowrap;
transition: background 140ms ease, color 140ms ease;
}
.pending-th:hover {
background: rgba(176, 137, 53, 0.10);
color: var(--wood);
}
.pending-th::after {
content: '↕';
display: inline-block;
margin-left: 6px;
opacity: 0.35;
font-size: 10px;
transition: opacity 140ms ease;
}
.pending-th.is-sorted-asc::after { content: '▲'; opacity: 1; color: var(--wood); }
.pending-th.is-sorted-desc::after { content: '▼'; opacity: 1; color: var(--wood); }
.pending-row {
border-bottom: 1px solid rgba(176, 137, 53, 0.08);
cursor: pointer;
transition: background 140ms ease;
}
.pending-row:last-child { border-bottom: 0; }
.pending-row:hover {
background: rgba(176, 137, 53, 0.06);
}
.pending-row td {
padding: 12px 16px;
vertical-align: middle;
}
.pending-status-cell { width: 1%; white-space: nowrap; }
.pending-status-pill {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1px solid var(--line);
background: var(--bg);
color: var(--text-2);
}
.pending-status-pill.is-open {
color: var(--wood);
border-color: var(--wood-dark);
background: rgba(176, 137, 53, 0.10);
}
.pending-status-pill.is-in_progress {
color: var(--wood-dark);
border-color: #C9A84C;
background: rgba(176, 137, 53, 0.18);
}
.pending-status-pill.is-complete {
color: #8aca8a;
border-color: #4d7d4d;
background: rgba(77, 125, 77, 0.16);
}
.pending-status-pill.is-cancelled {
color: var(--text-3);
border-color: var(--line);
background: var(--bg-2);
text-decoration: line-through;
}
.pending-title-cell {
font-weight: 600;
color: var(--text);
}
.pending-assignee-cell {
color: var(--text-2);
white-space: nowrap;
}
.pending-due-cell {
color: var(--text-2);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.pending-meeting-cell {
color: var(--wood);
font-size: 13px;
}
.pending-meeting-link {
text-decoration: none;
border-bottom: 1px dashed transparent;
transition: border-color 140ms ease;
}
.pending-row:hover .pending-meeting-link {
border-bottom-color: var(--wood);
}
.pending-empty-row td {
padding: 32px 16px;
text-align: center;
color: var(--text-3);
font-style: italic;
}
/* ---- Phone layout ---- */
@media (max-width: 720px) {
.pending-pill-title { display: none; } /* date-only pills on phone */
.pending-pill { padding: 7px 12px; }
.pending-th,
.pending-row td { padding: 10px 10px; }
.pending-th { font-size: 10px; letter-spacing: 0.06em; }
.pending-meeting-cell { display: none; } /* hide Meeting column on phone */
.pending-th-meeting { display: none; }
.pending-due-cell { font-size: 12px; }
}
/* ===================================================================
NOTES TAB (v33.17 / Session 8)
Shared parchment-themed sticky notes. Caveat handwriting font for
the body text gives a workshop bulletin-board feel.
=================================================================== */
/* Local parchment palette — same values as the meeting modal's --p-* */
.notes-body {
--p-bg: #fbfbf9;
--p-bg-2: #f1f1ee;
--p-bg-3: #fffdf0;
--p-line: #e4e3df;
--p-line-2: #ccccc6;
--p-text: #1A2620;
--p-text-2: #4a4642;
--p-text-3: #8a847e;
--p-accent: #8A6B28;
--p-accent-2: #C9A84C;
--p-danger: #8B2635;
}
.notes-toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 16px;
}
/* ---- Author filter pills + completed toggle ---- */
.notes-filter-pills {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-left: 18px;
}
.notes-user-pill {
background: transparent;
border: 1px solid var(--line-2);
border-radius: 999px;
padding: 5px 12px;
font: 700 11px/1 Inter, sans-serif;
letter-spacing: 0.06em;
color: var(--text-2);
cursor: pointer;
transition: all 120ms ease;
}
.notes-user-pill.is-active {
color: var(--wood-light);
border-color: var(--wood-dark);
background: rgba(212, 163, 104, 0.10);
}
.notes-user-pill { display: inline-flex; align-items: center; gap: 6px; }
.notes-pill-dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex-shrink: 0;
}
.notes-author-pill {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
font: 700 11px/1.3 'Inter', sans-serif;
letter-spacing: 0.04em;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.people-color-input {
width: 34px;
height: 26px;
padding: 0;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: transparent;
cursor: pointer;
}
.people-color-dot {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
vertical-align: middle;
}
.notes-completed-pill {
margin-left: auto;
background: transparent;
border: 1px solid var(--line-2);
border-radius: 999px;
padding: 5px 12px;
font: 700 11px/1 Inter, sans-serif;
letter-spacing: 0.06em;
color: var(--text-2);
cursor: pointer;
transition: all 120ms ease;
}
.notes-completed-pill.is-active {
color: #9fd08a;
border-color: rgba(143, 188, 122, 0.5);
background: rgba(143, 188, 122, 0.08);
}
.notes-create-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
/* ---- Notes modals (create + blow-up detail) — big parchment cards ----
Base .modal-backdrop z-index (9000) is correct: the photo lightbox (13000)
and confirm modal (12500) both stack above these. */
.notes-modal-card {
/* Parchment palette must live here too — these modals mount at body
level, OUTSIDE .notes-body where the --p-* vars are scoped. Without
this the background resolved to transparent. */
--p-bg: #f5edd9;
--p-bg-2: #efe4cb;
--p-bg-3: #fff8e7;
--p-line: #d8c79e;
--p-line-2: #c8b27c;
--p-text: #2a1f10;
--p-text-2: #4a3826;
--p-text-3: #7a6747;
--p-accent: #8a6a2a;
--p-accent-2: #b8902f;
--p-danger: #9a2828;
position: relative;
width: min(860px, 96vw);
max-height: 92vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: var(--p-bg);
background-image:
radial-gradient(ellipse at top left, rgba(255, 248, 222, 0.7), transparent 55%),
radial-gradient(ellipse at bottom right, rgba(190, 160, 100, 0.12), transparent 60%);
border: 1px solid var(--p-line-2);
border-radius: 10px;
padding: 26px 28px 20px;
display: flex;
flex-direction: column;
gap: 14px;
color: var(--p-text);
box-shadow:
0 18px 60px rgba(0, 0, 0, 0.6),
0 1px 0 rgba(255, 248, 222, 0.4) inset;
}
.notes-modal-close {
position: absolute;
top: 10px;
right: 10px;
width: 32px;
height: 32px;
background: transparent;
border: 1px solid transparent;
border-radius: 50%;
color: var(--p-text-3);
font-size: 21px;
line-height: 1;
cursor: pointer;
z-index: 2;
transition: background 140ms ease, color 140ms ease;
}
.notes-modal-close:hover {
background: rgba(0, 0, 0, 0.06);
color: var(--p-text);
}
.notes-modal-shrink {
font-size: 16px;
border-color: var(--p-line);
border-radius: 6px;
}
.notes-modal-meta {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
padding-right: 36px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--p-line);
}
.notes-modal-meta .notes-complete-wrap { margin-left: auto; }
.notes-modal-title-edit {
font-size: 24px;
margin-left: 0;
}
.notes-modal-body-edit {
min-height: 160px;
font-size: 18px;
}
.notes-modal-filelist {
display: flex;
flex-direction: column;
gap: 6px;
}
.notes-staged-file {
display: flex;
align-items: center;
gap: 8px;
background: var(--p-bg-3, rgba(0, 0, 0, 0.04));
border: 1px solid var(--p-line);
border-radius: 6px;
padding: 6px 10px;
font: 600 12px/1.3 'Inter', sans-serif;
color: var(--p-text-2);
}
.notes-staged-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notes-staged-del {
background: transparent;
border: 0;
color: var(--p-text-3);
font-size: 16px;
line-height: 1;
cursor: pointer;
padding: 2px 6px;
}
.notes-staged-del:hover { color: var(--p-danger, #9a2828); }
.notes-modal-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding-top: 10px;
border-top: 1px dashed var(--p-line);
}
.notes-modal-card .btn-ghost {
margin-top: 10px; /* btn-primary carries this — keep tops level */
padding: 15px 20px; /* match btn-primary's height exactly */
font-size: 13px;
letter-spacing: 0.16em;
color: #9a2828; /* red — readable on the parchment card */
border-color: rgba(154, 40, 40, 0.45);
}
.notes-modal-card .btn-ghost:hover {
background: rgba(154, 40, 40, 0.08);
border-color: rgba(154, 40, 40, 0.7);
}
.notes-loading,
.notes-error {
padding: 24px;
color: var(--text-3);
font-style: italic;
}
.notes-error { color: #d4a368; }
.notes-empty {
padding: 60px 24px;
text-align: center;
color: var(--text-3);
}
.notes-empty-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 180px;
height: 180px;
margin-bottom: 24px;
color: var(--wood);
filter:
drop-shadow(0 0 18px rgba(212, 163, 104, 0.45))
drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}
.notes-empty-icon svg { width: 100%; height: 100%; }
.notes-empty-text { font-size: 14px; font-style: italic; }
/* ---- Card grid ---- */
.notes-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
align-items: start; /* expanded cards grow alone — neighbors keep their height */
}
/* ---- Individual card ---- */
.notes-card {
position: relative;
background: var(--p-bg);
background-image:
radial-gradient(ellipse at top left, rgba(255, 248, 222, 0.7), transparent 55%),
radial-gradient(ellipse at bottom right, rgba(190, 160, 100, 0.12), transparent 60%);
border: 1px solid var(--p-line-2);
border-radius: 8px;
padding: 18px 20px 14px;
display: flex;
flex-direction: column;
gap: 12px;
color: var(--p-text);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.35),
0 1px 0 rgba(255, 248, 222, 0.4) inset;
transition: transform 140ms ease, box-shadow 140ms ease;
}
.notes-card:hover {
transform: translateY(-2px);
box-shadow:
0 8px 22px rgba(0, 0, 0, 0.45),
0 0 18px rgba(212, 163, 104, 0.18),
0 1px 0 rgba(255, 248, 222, 0.4) inset;
}
/* Project highlight when a linked note is opened from a meeting modal —
gold glow that fades over ~2s. */
.notes-card.is-highlighted {
animation: notes-card-flash 2200ms ease-out;
}
@keyframes notes-card-flash {
0% { box-shadow: 0 0 0 0 rgba(212, 163, 104, 0.0), 0 4px 12px rgba(0,0,0,0.35); border-color: var(--wood); }
20% { box-shadow: 0 0 0 6px rgba(212, 163, 104, 0.55), 0 4px 18px rgba(0,0,0,0.45); border-color: var(--wood-light); }
100% { box-shadow: 0 0 0 0 rgba(212, 163, 104, 0.0), 0 4px 12px rgba(0,0,0,0.35); border-color: var(--p-line-2); }
}
.notes-card-del {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
background: transparent;
border: 1px solid transparent;
border-radius: 50%;
color: var(--p-text-3);
font-size: 18px;
line-height: 1;
cursor: pointer;
z-index: 2;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.notes-card-del:hover {
background: rgba(154, 40, 40, 0.10);
color: var(--p-danger);
border-color: rgba(154, 40, 40, 0.4);
}
/* The delete is a trash SVG now (× read as "close") — center and size it */
.notes-card-del {
display: inline-flex;
align-items: center;
justify-content: center;
}
.notes-card-del svg { width: 14px; height: 14px; }
/* ---- Body textarea — handwriting font ---- */
.notes-card-body {
width: 100%;
background: transparent;
border: 1px solid transparent;
color: var(--p-text);
font-family: 'Architects Daughter', 'Bradley Hand', 'Segoe Script', cursive;
font-size: 17px;
line-height: 1.5;
font-weight: 700;
resize: vertical;
min-height: 80px;
padding: 6px 8px;
border-radius: 6px;
letter-spacing: 0.01em;
transition: background 120ms ease, border-color 120ms ease;
}
.notes-card-body:focus,
.notes-card-body:hover {
background: var(--p-bg-3);
border-color: var(--p-line);
outline: none;
}
.notes-card-body::placeholder {
color: var(--p-text-3);
font-style: italic;
}
/* ── v3.12: rich-text note bodies (contenteditable replaces textarea).
The class carries the handwriting look; these rules add editor behavior. */
.notes-rt-wrap { width: 100%; }
.notes-card-body.notes-rt {
white-space: pre-wrap;
word-break: break-word;
cursor: text;
resize: none;
}
.notes-card-body.notes-rt:empty::before {
content: attr(data-placeholder);
color: var(--p-text-3);
font-style: italic;
}
.notes-card-body.notes-rt a { color: #4C5C7A; text-decoration: underline; }
.notes-card-body.notes-rt ul,
.notes-card-body.notes-rt ol { margin: 4px 0; padding-left: 22px; }
.notes-card-body.notes-rt li { margin: 2px 0; }
/* Toolbar is the shared .mtg-rt-toolbar (display:none by default);
reveal it while the note editor has focus, same as agenda items. */
.notes-rt-wrap:focus-within .mtg-rt-toolbar { display: flex; }
/* ---- Photos ---- */
.notes-card-photos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 6px;
}
.notes-photo-tile {
position: relative;
aspect-ratio: 1;
background: var(--p-bg-2);
border: 1px solid var(--p-line);
border-radius: 6px;
overflow: hidden;
}
.notes-photo-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 200ms ease;
}
.notes-photo-img.is-loaded { opacity: 1; }
.notes-photo-del {
position: absolute;
top: 4px;
right: 4px;
width: 22px;
height: 22px;
background: rgba(20, 14, 8, 0.7);
border: 0;
border-radius: 50%;
color: #f5edd9;
font-size: 14px;
line-height: 1;
cursor: pointer;
opacity: 0;
transition: opacity 140ms ease, background 140ms ease;
}
.notes-photo-tile:hover .notes-photo-del,
.notes-photo-del:focus { opacity: 1; }
.notes-photo-del:hover { background: var(--p-danger); }
/* On iPad PWAs there's no hover, so always-visible delete badge */
@media (hover: none) {
.notes-photo-del { opacity: 0.85; }
}
/* ---- Document rows ---- */
.notes-card-docs {
display: flex;
flex-direction: column;
gap: 6px;
}
.notes-doc-row {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
background: var(--p-bg-3);
border: 1px solid var(--p-line);
border-radius: 6px;
}
.notes-doc-icon { font-size: 18px; flex: 0 0 auto; }
.notes-doc-meta { flex: 1; min-width: 0; }
.notes-doc-name {
background: transparent;
border: 0;
color: var(--p-accent);
font: 600 13px/1.3 'Inter', sans-serif;
text-align: left;
cursor: pointer;
padding: 0;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notes-doc-name:hover { text-decoration: underline; }
.notes-doc-sub {
font: 500 11px/1.2 'Inter', sans-serif;
color: var(--p-text-3);
margin-top: 2px;
}
.notes-doc-del {
background: transparent;
border: 0;
color: var(--p-text-3);
font-size: 16px;
line-height: 1;
cursor: pointer;
padding: 4px 6px;
border-radius: 4px;
}
.notes-doc-del:hover {
background: rgba(154, 40, 40, 0.10);
color: var(--p-danger);
}
/* ---- Footer ---- */
/* Header row — author + date inline at the top of the card */
.notes-card-head {
display: flex;
align-items: center;
gap: 10px;
padding-right: 30px; /* clear space for the absolute × delete */
padding-bottom: 8px;
border-bottom: 1px dashed var(--p-line);
min-width: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.notes-card.is-collapsed .notes-card-head {
padding-bottom: 0;
border-bottom: 0;
}
.notes-card-inner {
display: flex;
gap: 12px;
min-width: 0;
}
.notes-card-rail {
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: center; /* chevron vertically centered in the card */
align-items: center;
width: 30px;
}
.notes-card-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.notes-card-chev {
flex-shrink: 0;
background: transparent;
border: 0;
padding: 0;
font-size: 30px;
line-height: 1;
color: var(--p-text-2);
width: 36px;
text-align: center;
cursor: pointer;
}
.notes-card-expand {
flex-shrink: 0;
background: transparent;
border: 1px solid var(--p-line);
border-radius: 6px;
width: 36px;
height: 36px;
font-size: 18px;
line-height: 1;
color: var(--p-text-2);
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease;
}
.notes-card-expand:hover {
background: var(--p-bg-3);
border-color: var(--p-line-2);
}
.notes-card-headmain {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.notes-card-title-static {
font-family: 'Architects Daughter', 'Bradley Hand', 'Segoe Script', cursive;
font-size: 18px;
font-weight: 700;
line-height: 1.25;
color: #1f4d7a;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notes-card-meta {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
min-width: 0;
}
.notes-card-meta .notes-card-author {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notes-card-dot-meta { color: var(--p-text-3); }
.notes-card-completed-date { color: var(--p-text-3); }
.notes-link-dot {
position: absolute; /* pinned to the card's bottom-right corner */
bottom: 10px;
right: 12px;
width: 9px;
height: 9px;
border-radius: 50%;
background: #2f6fae;
box-shadow: 0 0 6px rgba(47, 111, 174, 0.55);
}
.notes-complete-wrap {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px;
cursor: pointer;
}
.notes-complete-label {
font: 700 10px/1 Inter, sans-serif;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--p-text-3);
}
.notes-complete-check {
width: 19px;
height: 19px;
cursor: pointer;
accent-color: #6f9c5d;
}
.notes-card.is-completed { opacity: 0.78; }
.notes-card.is-completed .notes-card-title-static {
text-decoration: line-through;
text-decoration-thickness: 1.5px;
text-decoration-color: rgba(111, 156, 93, 0.7);
}
.notes-card-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.notes-card-title-edit {
width: 100%;
background: transparent;
border: 1px solid transparent;
color: #1f4d7a;
font-family: 'Architects Daughter', 'Bradley Hand', 'Segoe Script', cursive;
font-size: 18px;
font-weight: 700;
line-height: 1.25;
padding: 2px 6px;
margin-left: -6px;
border-radius: 6px;
transition: background 120ms ease, border-color 120ms ease;
}
.notes-card-title-edit:focus,
.notes-card-title-edit:hover {
background: var(--p-bg-3);
border-color: var(--p-line);
outline: none;
}
.notes-card-title-edit::placeholder {
color: var(--p-text-3);
font-style: italic;
}
.notes-card-head .notes-card-author {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.notes-card-dot {
display: none; /* visually separated by margin-auto now */
}
.notes-card-foot {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
padding-top: 10px;
border-top: 1px dashed var(--p-line);
flex-wrap: wrap;
}
.notes-card-author {
font: 700 12px/1.2 'Inter', sans-serif;
color: var(--p-text-2);
letter-spacing: 0.02em;
}
.notes-card-date {
font: 500 11px/1.2 'Inter', sans-serif;
color: var(--p-text-3);
}
.notes-card-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.notes-add-link {
background: transparent;
border: 1px solid var(--p-line-2);
color: var(--p-accent);
font: 600 11px/1 'Inter', sans-serif;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 6px 10px;
border-radius: 999px;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.notes-add-link:hover {
background: rgba(184, 144, 47, 0.10);
border-color: var(--p-accent);
color: var(--p-accent-2);
}
/* ---- Phone tweaks ---- */
@media (max-width: 720px) {
.notes-grid { grid-template-columns: 1fr; gap: 14px; }
.notes-card { padding: 16px 16px 12px; }
.notes-card-body { font-size: 16px; }
}
/* ===================================================================
PENDING TAB — split layout + decisions cards (v33.30)
=================================================================== */
.pending-split {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 24px;
align-items: start;
}
.pending-col {
min-width: 0;
}
.pending-col-head {
font-family: 'Inter', sans-serif;
font-weight: 800;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--wood);
margin-bottom: 10px;
}
/* Decisions cards on parchment */
.pending-decisions-body {
display: flex;
flex-direction: column;
gap: 28px;
--p-bg: #fbfbf9;
--p-bg-3: #fffdf0;
--p-line: #e4e3df;
--p-line-2: #ccccc6;
--p-text: #1A2620;
--p-text-2: #4a4642;
--p-text-3: #8a847e;
--p-accent: #8A6B28;
}
.pending-dec-group {
display: flex;
flex-direction: column;
gap: 12px;
}
.pending-dec-group-head {
display: flex;
align-items: baseline;
gap: 10px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(176, 137, 53, 0.22);
}
.pending-dec-group-title {
margin: 0;
font: 800 italic 12px/1.2 'Inter', sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--wood);
}
.pending-dec-group-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
background: rgba(176, 137, 53, 0.18);
color: var(--wood);
font: 700 11px/1 'Inter', sans-serif;
letter-spacing: 0.04em;
}
/* Per-group color tints removed — Allan asked for all three to be the same color. */
.pending-dec-group-done .pending-dec-card {
opacity: 0.85;
}
.pending-dec-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 720px) {
.pending-decisions-body {
gap: 24px;
}
.pending-dec-grid {
grid-template-columns: 1fr;
}
}
.pending-decisions-empty {
padding: 24px;
color: var(--text-3);
font-style: italic;
background: var(--bg-3);
border: 1px dashed var(--line);
border-radius: 10px;
text-align: center;
grid-column: 1 / -1;
}
/* Nested action items inside decision cards (parchment context).
Action item text uses a deep red/burgundy so it pops off the cream
background while still feeling editorial, not loud. */
.pending-acts {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed var(--p-line);
}
.pending-acts-head {
font: 700 11px/1 'Inter', sans-serif;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--p-accent);
}
/* Header row: 3-column grid that matches the action row grid below.
Left = "Action Items" over the status pill column, right two = headers
over the assignee and due-date columns. */
.pending-acts-grid-head {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: baseline;
margin-bottom: 8px;
padding-bottom: 4px;
border-bottom: 1px dotted rgba(122, 31, 37, 0.18);
}
.pending-acts-head-left {
margin-bottom: 0;
}
.pending-acts-head-right {
margin-bottom: 0;
text-align: right;
white-space: nowrap;
}
.pending-acts-head-right + .pending-acts-head-right {
/* second header (Due Date) — slightly looser to match the data row spacing */
min-width: 86px;
}
.pending-act-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center; /* was baseline — pill + text now line up vertically */
padding: 6px 0;
font: 700 14px/1.3 'Inter', sans-serif;
color: #7a1f25; /* deep burgundy */
border-bottom: 1px dotted rgba(122, 31, 37, 0.20);
}
.pending-act-row:last-child { border-bottom: 0; }
.pending-act-status {
font: 800 10px/1 'Inter', sans-serif;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid currentColor;
flex: 0 0 auto;
}
.pending-act-row.is-open { color: #7a1f25; } /* deep burgundy */
.pending-act-row.is-in_progress { color: #4C5C7A; } /* deep blue */
.pending-act-row.is-complete { color: #2f5d2f; opacity: 0.7; }
.pending-act-row.is-cancelled { color: var(--p-text-3); text-decoration: line-through; }
.pending-act-row.is-done .pending-act-status-label,
.pending-act-row.is-done .pending-act-assignee,
.pending-act-row.is-done .pending-act-due {
text-decoration: line-through;
text-decoration-color: rgba(47, 93, 47, 0.55);
text-decoration-thickness: 1.5px;
}
/* Inline checkbox + status label combo (replaces standalone status pill) */
.pending-act-check {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
user-select: none;
flex: 0 0 auto;
}
.pending-act-toggle {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
border: 1.5px solid currentColor;
border-radius: 4px;
background: transparent;
cursor: pointer;
position: relative;
margin: 0;
transition: background 140ms ease;
flex: 0 0 auto;
}
.pending-act-toggle:checked {
background: #2f5d2f;
border-color: #2f5d2f;
}
.pending-act-toggle:checked::after {
content: '✓';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
color: #fbfbf9;
line-height: 1;
}
.pending-act-status-label {
font: 800 10px/1 'Inter', sans-serif;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid currentColor;
}
.pending-act-assignee {
font-weight: 700;
text-align: right; /* match the right-aligned header above */
}
.pending-act-due {
font: 600 12px/1.3 'Inter', sans-serif;
color: inherit;
opacity: 0.85;
white-space: nowrap;
text-align: right;
min-width: 86px;
}
.pending-dec-card {
position: relative;
background: var(--p-bg);
background-image:
radial-gradient(ellipse at top left, rgba(255, 248, 222, 0.7), transparent 55%),
radial-gradient(ellipse at bottom right, rgba(176, 137, 53, 0.12), transparent 60%);
border: 1.5px solid var(--wood);
border-radius: 8px;
padding: 12px 14px;
color: var(--p-text);
cursor: pointer;
box-shadow:
0 0 18px rgba(176, 137, 53, 0.22),
0 0 36px rgba(176, 137, 53, 0.10),
0 1px 0 rgba(255, 248, 222, 0.4) inset;
transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.pending-dec-card:hover {
transform: translateY(-1px);
border-color: var(--wood);
box-shadow:
0 0 24px rgba(176, 137, 53, 0.42),
0 0 48px rgba(176, 137, 53, 0.20),
0 6px 14px rgba(11, 20, 16, 0.40),
0 1px 0 rgba(255, 248, 222, 0.4) inset;
}
.pending-dec-head {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--p-line);
margin-bottom: 8px;
}
/* v34.5.6 — replaced the dark blue pill with plain dark-blue clickable
text + arrow indicator. Reads cleaner when many cards are stacked. */
.pending-dec-from {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
padding: 2px 0;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
color: #4C5C7A;
font: 700 12px/1.2 'Inter', sans-serif;
letter-spacing: 0.04em;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color 140ms ease, transform 140ms ease;
}
.pending-dec-from:hover:not(.is-standalone) {
color: #2a5a8a;
}
.pending-dec-from:hover:not(.is-standalone) .pending-dec-from-arrow {
transform: translateX(2px);
}
.pending-dec-from:active {
transform: translateY(0);
}
.pending-dec-from.is-standalone {
cursor: default;
color: var(--p-text-3, #6b6557);
}
.pending-dec-from-arrow {
display: inline-block;
font-size: 13px;
line-height: 1;
transition: transform 140ms ease;
}
.pending-dec-title {
font: 700 14px/1.35 'Inter', sans-serif;
color: var(--p-text);
margin-bottom: 4px;
}
.pending-dec-body {
font: 500 13px/1.4 'Inter', sans-serif;
color: var(--p-text-2);
white-space: pre-wrap;
word-break: break-word;
}
/* Phone: stack columns vertically */
@media (max-width: 900px) {
.pending-split {
grid-template-columns: 1fr;
gap: 28px;
}
}
/* ===================================================================
CARRY FORWARD MODAL — destination mode toggle (v33.30)
=================================================================== */
.mtg-carry-mode-row {
display: flex;
gap: 18px;
margin-bottom: 14px;
}
.mtg-carry-mode {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font: 600 13px/1.2 'Inter', sans-serif;
color: var(--text-2);
padding: 8px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg-2);
transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.mtg-carry-mode input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 14px;
height: 14px;
border: 1px solid var(--line-2);
border-radius: 50%;
background: transparent;
cursor: pointer;
flex: 0 0 auto;
transition: border-color 140ms ease, background 140ms ease;
position: relative;
}
.mtg-carry-mode input[type="radio"]:checked {
border-color: var(--wood);
background: var(--wood);
box-shadow: inset 0 0 0 3px var(--bg-2);
}
.mtg-carry-mode:has(input[type="radio"]:checked) {
border-color: var(--wood);
background: rgba(176, 137, 53, 0.10);
color: var(--wood);
}
.mtg-carry-existing-wrap,
.mtg-carry-new-wrap {
margin-bottom: 4px;
}
.mtg-carry-new-fields {
display: grid;
grid-template-columns: minmax(140px, 180px) 1fr;
gap: 10px;
}
.mtg-carry-new-title-field { min-width: 0; }
@media (max-width: 600px) {
.mtg-carry-new-fields {
grid-template-columns: 1fr;
}
}
/* ===================================================================
MEETINGS LIST — card layout with agenda preview (v33.30)
Replaces the row strips. Each meeting is a gold-bordered card
showing the date, title, status, and the first 3 agenda items.
=================================================================== */
.mtg-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}
.mtg-card {
/* paper palette — same tokens .notes-body declares so children inherit ivory */
--p-bg: #fbfbf9;
--p-line: #e4e3df;
--p-line-2: #ccccc6;
--p-text: #1A2620;
--p-text-2: #4a4642;
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 18px;
background: var(--p-bg);
background-image:
radial-gradient(ellipse at top left, rgba(255, 248, 222, 0.7), transparent 55%),
radial-gradient(ellipse at bottom right, rgba(176, 137, 53, 0.12), transparent 60%);
border: 1px solid var(--p-line-2);
border-radius: 12px;
color: var(--p-text);
cursor: pointer;
box-shadow:
0 2px 3px rgba(11, 20, 16, 0.22),
0 4px 8px rgba(11, 20, 16, 0.16),
0 1px 0 rgba(255, 248, 222, 0.4) inset;
transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.mtg-card:hover {
transform: translateY(-2px);
box-shadow:
0 8px 22px rgba(11, 20, 16, 0.45),
0 0 18px rgba(176, 137, 53, 0.18),
0 1px 0 rgba(255, 248, 222, 0.4) inset;
}
.mtg-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.mtg-card-date {
font: 700 20px/1.2 'Inter', sans-serif;
color: var(--wood);
letter-spacing: 0.02em;
}
.mtg-card-title {
font: 800 17px/1.3 'Inter', sans-serif;
color: var(--text);
margin: 0;
}
.mtg-row-agenda {
list-style: none;
margin: 0;
padding: 8px 0 0 0;
display: flex;
flex-direction: column;
gap: 4px;
border-top: 1px dashed rgba(176, 137, 53, 0.25);
}
.mtg-row-agenda-item {
display: flex;
gap: 6px;
align-items: baseline;
font: 500 13px/1.4 'Inter', sans-serif;
color: var(--text-2);
min-width: 0;
}
.mtg-row-agenda-num {
flex: 0 0 auto;
color: var(--wood);
font-weight: 700;
}
.mtg-row-agenda-title {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mtg-row-agenda-more {
font: 600 11px/1 'Inter', sans-serif;
color: var(--wood);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 2px;
}
.mtg-row-agenda-empty {
padding-top: 8px;
border-top: 1px dashed rgba(176, 137, 53, 0.25);
font: 500 12px/1.4 'Inter', sans-serif;
color: var(--text-3);
font-style: italic;
}
/* Meetings list card runs the light (notes-card) theme — keep its text
readable on the ivory surface. Gold accents (date/num) read fine as-is. */
.mtg-card .mtg-card-title { color: var(--p-text); }
.mtg-card .mtg-row-agenda-item { color: var(--p-text-2); }
.mtg-card .mtg-row-agenda-empty { color: var(--p-text-2); }
.mtg-card .mtg-pill.is-scheduled {
background: rgba(176, 137, 53, 0.12);
color: #8a6d10;
border-color: rgba(176, 137, 53, 0.40);
}
/* ── v3.12: Divider between Upcoming & Active and Past Meetings ── */
.mtg-group-divider {
height: 1px;
margin: 28px 0 24px;
background: linear-gradient(90deg,
transparent 0%,
rgba(176, 137, 53, 0.55) 18%,
rgba(176, 137, 53, 0.55) 82%,
transparent 100%);
}
/* ── v3.12: Past-meeting cards — inverted (signature dark gradient),
cream/gold text, slightly shrunk to read as "in the rearview".
Base styles on purpose: the card is dark in BOTH app themes, and no
body.theme-dark-all rules touch .mtg-card interiors, so nothing to
counter-scope. Children keep using the card's --p-* / --wood tokens,
so re-pointing them here restyles everything without touching base
rules or blanket-overriding var(--wood). */
.mtg-card.is-past {
--p-bg: #0C1F0E;
--p-line: rgba(232, 212, 138, 0.20);
--p-line-2: rgba(232, 212, 138, 0.28);
--p-text: #F4EEDD;
--p-text-2: #B8B09A;
--wood: #E8D48A;
padding: 13px 15px;
gap: 8px;
background: linear-gradient(160deg, #000 0%, #0C1F0E 40%, #1B4332 70%, #000 100%);
border-color: var(--p-line-2);
box-shadow:
0 2px 3px rgba(0, 0, 0, 0.35),
0 4px 8px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(232, 212, 138, 0.10);
}
.mtg-card.is-past:hover {
box-shadow:
0 8px 22px rgba(0, 0, 0, 0.55),
0 0 18px rgba(232, 212, 138, 0.22),
inset 0 1px 0 rgba(232, 212, 138, 0.12);
}
.mtg-card.is-past .mtg-card-date { font-size: 17px; }
.mtg-card.is-past .mtg-card-title { color: var(--p-text); font-size: 15px; }
.mtg-card.is-past .mtg-row-agenda,
.mtg-card.is-past .mtg-row-agenda-empty { border-top-color: rgba(232, 212, 138, 0.22); }
.mtg-card.is-past .mtg-row-agenda-item { color: var(--p-text-2); font-size: 12px; }
.mtg-card.is-past .mtg-row-agenda-empty { color: var(--p-text-2); }
/* Pills: base pill colors were tuned for dark surfaces and read fine here;
just undo the light-card is-scheduled override and lift completed text. */
.mtg-card.is-past .mtg-pill.is-scheduled {
background: rgba(232, 212, 138, 0.10);
color: #E8D48A;
border-color: rgba(232, 212, 138, 0.35);
}
.mtg-card.is-past .mtg-pill.is-completed { color: #CFC9B8; }
/* Phone */
@media (max-width: 600px) {
.mtg-list {
grid-template-columns: 1fr;
}
}
/* ===================================================================
DECISION-NESTED ACTION ITEMS (v33.32)
Each decision card gets a row of action items inside its body.
Status / assignee / due / delete on each row. Action rows pop visually
with a contrasting deep-red label so they don't look like notes.
=================================================================== */
.mtg-decision-actions {
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed var(--p-line, var(--line-2));
display: flex;
flex-direction: column;
gap: 6px;
}
.mtg-decision-actions-head {
font: 700 11px/1.2 'Inter', sans-serif;
letter-spacing: 0.10em;
text-transform: uppercase;
color: #b04545; /* deep red — pop against the parchment */
margin-bottom: 4px;
}
.mtg-decision-action-row {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto;
grid-template-areas: "assignee due del";
column-gap: 10px;
row-gap: 6px;
align-items: center;
padding: 8px 10px;
background: rgba(176, 69, 69, 0.06);
border: 1px solid rgba(176, 69, 69, 0.20);
border-radius: 6px;
}
.mtg-decision-action-row .mtg-action-assignee { grid-area: assignee; }
.mtg-decision-action-row .mtg-action-due { grid-area: due; min-width: 0; }
.mtg-decision-action-row .mtg-action-del { grid-area: del; }
.mtg-decision-action-row select,
.mtg-decision-action-row input[type="date"] {
font: 600 13px/1.2 'Inter', sans-serif;
padding: 5px 8px;
border-radius: 6px;
background: var(--p-bg-3, var(--bg-2));
border: 1px solid var(--p-line, var(--line));
color: var(--p-text, var(--text));
cursor: pointer;
width: 100%;
min-width: 0;
}
/* Show "Due date" hint inside the date input until a date is picked.
Native doesn't honor placeholder, so use ::before on
an empty (non-has-value) state, hidden once .has-value is set. */
.mtg-decision-action-row .mtg-action-due { position: relative; color: var(--p-text-3, var(--text-3)); }
.mtg-decision-action-row .mtg-action-due.has-value { color: var(--p-text, var(--text)); }
.mtg-decision-action-row .mtg-action-due:not(.has-value)::-webkit-datetime-edit-fields-wrapper { color: var(--p-text-3, var(--text-3)); opacity: 0.55; }
.mtg-decision-action-row .mtg-action-due:not(.has-value)::-webkit-datetime-edit { color: transparent; }
.mtg-decision-action-row .mtg-action-due:not(.has-value)::before {
content: 'Due date';
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
font: 600 12px/1 'Inter', sans-serif;
color: var(--p-text-3, var(--text-3));
opacity: 0.7;
pointer-events: none;
}
.mtg-decision-action-row .mtg-action-due.has-value::before { display: none; }
.mtg-decision-action-row.is-complete {
opacity: 0.55;
}
.mtg-decision-action-row.is-complete .mtg-action-assignee,
.mtg-decision-action-row.is-complete .mtg-action-due {
text-decoration: line-through;
}
/* Wide layout: when the right pane has room, keep the same single-row layout */
@media (min-width: 1100px) {
.mtg-detail-card .mtg-decision-action-row {
grid-template-columns: minmax(0, 1.6fr) minmax(110px, 140px) auto;
grid-template-areas: "assignee due del";
row-gap: 0;
}
}
.mtg-action-del {
background: transparent;
border: 0;
color: var(--p-text-3, var(--text-3));
font-size: 16px;
line-height: 1;
width: 26px;
height: 26px;
border-radius: 50%;
cursor: pointer;
margin-left: 10px;
justify-self: end;
transition: background 140ms ease, color 140ms ease;
}
.mtg-action-del:hover { background: rgba(139, 38, 53, 0.10); color: #8B2635; }
.mtg-decision-add-action {
align-self: flex-start;
margin-top: 4px;
background: transparent;
border: 1px solid #b04545;
color: #b04545;
font: 700 11px/1 'Inter', sans-serif;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 999px;
cursor: pointer;
transition: background 140ms ease, color 140ms ease;
}
.mtg-decision-add-action:hover {
background: rgba(176, 69, 69, 0.10);
color: #7a2828;
}
/* ===================================================================
FILES TAB — unified document hub (v33.33 / Session 8)
=================================================================== */
.files-toolbar {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 18px;
}
.files-toolbar-row {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.files-upload-btn {
flex: 0 0 auto;
height: 40px;
padding: 0 18px;
margin-top: 0;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.files-search {
flex: 1 1 240px;
min-width: 200px;
height: 40px;
padding: 0 14px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
color: var(--text);
font: 500 14px/1.2 'Inter', sans-serif;
outline: none;
transition: border-color 140ms ease;
}
.files-search::placeholder { color: var(--text-3); }
.files-search:focus {
border-color: var(--wood);
box-shadow: 0 0 0 1px rgba(176, 137, 53, 0.18);
}
.files-filters {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.files-filter-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 999px;
color: var(--text-2);
font: 600 12px/1 'Inter', sans-serif;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: all 140ms ease;
}
.files-filter-chip:hover {
border-color: var(--wood-dark);
color: var(--text);
}
.files-filter-chip.is-active {
background: rgba(176, 137, 53, 0.16);
border-color: var(--wood);
color: var(--wood);
}
.files-filter-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 18px;
padding: 0 6px;
background: rgba(176, 137, 53, 0.20);
border-radius: 999px;
font: 700 11px/1 'Inter', sans-serif;
color: var(--wood);
}
.files-filter-chip.is-active .files-filter-count {
background: var(--wood);
color: var(--bg);
}
.files-body {
display: flex;
flex-direction: column;
gap: 22px;
}
.files-loading,
.files-error,
.files-empty {
padding: 40px 24px;
color: var(--text-3);
font-style: italic;
text-align: center;
background: var(--bg-3);
border: 1px dashed var(--line);
border-radius: 10px;
}
.files-error { color: var(--red); }
.files-source {
background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
border: 1.5px solid var(--wood);
border-radius: 12px;
padding: 16px 18px;
box-shadow:
0 0 18px rgba(176, 137, 53, 0.18),
0 0 36px rgba(176, 137, 53, 0.08);
}
.files-source-title {
font: 800 13px/1 'Inter', sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wood);
margin: 0 0 14px 0;
}
/* Archived bucket — visually muted to indicate orphaned/inactive */
.files-source-archived {
border-color: var(--line-2, #3a4858);
box-shadow: none;
opacity: 0.92;
}
.files-source-archived .files-source-title {
color: var(--text-3, #a89b89);
}
.files-source-archived .files-parent-label {
color: var(--text-3, #a89b89);
font-style: italic;
}
.files-parent {
margin-bottom: 14px;
}
.files-parent:last-child { margin-bottom: 0; }
.files-parent-label {
font: 600 12px/1.2 'Inter', sans-serif;
color: var(--text-2);
margin-bottom: 6px;
padding-bottom: 4px;
border-bottom: 1px dashed rgba(176, 137, 53, 0.18);
}
.files-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
@media (max-width: 1100px) {
.files-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
.files-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.files-list { grid-template-columns: 1fr; }
}
.files-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: rgba(176, 137, 53, 0.04);
border: 1px solid rgba(176, 137, 53, 0.12);
border-radius: 8px;
min-width: 0;
transition: background 140ms ease, border-color 140ms ease;
}
.files-row:hover {
background: rgba(176, 137, 53, 0.10);
border-color: rgba(176, 137, 53, 0.30);
}
.files-row-icon {
font-size: 20px;
width: 26px;
text-align: center;
flex: 0 0 auto;
}
.files-row-meta { min-width: 0; }
.files-row-name {
display: block;
background: transparent;
border: 0;
color: var(--wood);
font: 600 13px/1.3 'Inter', sans-serif;
text-align: left;
cursor: pointer;
padding: 0;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.files-row-name:hover { text-decoration: underline; color: var(--wood); }
.files-row-sub {
font: 500 11px/1.3 'Inter', sans-serif;
color: var(--text-3);
margin-top: 2px;
}
.files-row-del {
background: transparent;
border: 0;
color: var(--text-3);
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 6px 8px;
border-radius: 4px;
flex: 0 0 auto;
transition: background 140ms ease, color 140ms ease;
}
.files-row-del:hover {
background: rgba(180, 60, 60, 0.18);
color: #e78989;
}
/* ===================================================================
AGENDA DRAG HANDLE + ASSIGNEE FIX (v33.36)
=================================================================== */
.mtg-item-drag {
flex: 0 0 auto;
width: 26px;
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
cursor: grab;
color: var(--p-text-3, var(--text-3));
font-size: 18px;
user-select: none;
-webkit-user-select: none;
border-radius: 4px;
transition: background 140ms ease, color 140ms ease;
touch-action: none; /* allow touch drag on iPad */
}
.mtg-item-drag:hover {
background: rgba(176, 137, 53, 0.12);
color: var(--p-accent, var(--wood));
}
.mtg-item-drag:active { cursor: grabbing; }
/* Sortable ghost — the placeholder while dragging */
.mtg-item-drag-ghost {
opacity: 0.4;
background: rgba(176, 137, 53, 0.18) !important;
border-color: var(--wood) !important;
}
/* Force assignee dropdown to actually have width inside the parchment
action row. Some iPad Safari builds collapse the