/* automanijak.com — Admin styles (mobile‑first) MASTER — consolidated latest Includes: - Driveway: 7:3 full‑bleed media + glass chips - Accomplishments: hero stat, badges (selected green outline), orange badge numbers - Interactions: segmented tabs (radios hidden), collapsed composer, icon color fixes - Settings: 2‑col grid, avatar uploader - Vehicle Expenses: categorized list + mobile tidy + edit/delete actions - Page actions: standardized paired buttons under first card - Consistent vertical spacing, dark‑mode tuning, larger bottom tab labels Load AFTER site /styles.css and only on pages with . */ /************************ * 1) DESIGN TOKENS ************************/ body.admin { --am-color-bg: #ededed; --am-color-surface: #ffffff; --am-color-elev: #f7f7f7; --am-color-text: #333; --am-color-heading: #000; --am-color-muted: #999; --am-color-link: #333; --am-color-link-hover: #f5622c; /* brand orange */ --am-color-primary: #f5622c; /* brand orange */ --am-color-border: #dadada; --am-color-hair: #f2f2f2; --am-color-success: #029d55; --am-color-warning: #F6B502; --am-color-danger: #DF4431; --am-radius: 4px; --am-radius-sm: 4px; --am-shadow: 0 1px 2px rgba(0,0,0,.06); --am-gap-1:.25rem; --am-gap-2:.5rem; --am-gap-3:.75rem; --am-gap-4:1rem; --am-gap-5:1.25rem; --am-gap-6:1.5rem; --am-gap-8:2rem; --am-header-h: 46px; --am-tabbar-h: 60px; /* larger labels */ --am-font: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; --am-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; background: var(--am-color-bg); color: var(--am-color-text); font-family: var(--am-font); -webkit-font-smoothing: antialiased; } /************************ * 2) GLOBALS ************************/ body.admin, .admin * { box-sizing: border-box; } .admin a { color: var(--am-color-link); text-decoration: none; transition: .25s; } .admin a:hover { color: var(--am-color-link-hover); } .admin .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--am-gap-4); } .admin .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* neutralize global figure margins on admin pages */ .admin figure { margin: 0; } /************************ * 3) APP CHROME ************************/ .admin .am-admin-header { position: sticky; top: 0; z-index: 50; height: var(--am-header-h); display: flex; align-items: center; gap: var(--am-gap-4); padding: 0 var(--am-gap-4); background:#333; color:#fff; border-bottom: 1px solid #222; } .admin .am-admin-header__brand { display: flex; align-items: center; gap: var(--am-gap-3); font-weight: 700; } .admin .am-admin-header__brand img { width: 24px; height: 24px; border-radius: 4px; box-shadow: var(--am-shadow); } .admin .am-admin-header__title { font-size: .85rem; width: 105px;} .admin .am-admin-header a { color:#fff; } .admin .am-admin-header__spacer { flex: 1; } .admin .am-admin-header__actions { display: flex; align-items: center; gap: var(--am-gap-3); } /* ghost button contrast fix inside dark header */ .admin .am-admin-header .btn--ghost { background:#444; border-color:#3a3a3a; color:#fff; height: 32px; } .admin .am-admin-header .btn--ghost:hover { background:#3a3a3a; } /* layout shell */ .admin .am-admin-shell { display: grid; grid-template-columns: 1fr; gap: var(--am-gap-4); } @media (min-width: 1024px) { .admin .am-admin-shell { grid-template-columns: 240px 1fr; } .admin main.am-admin-main { padding: var(--am-gap-4); } } /* sidebar */ .admin .am-admin-sidenav { display: none; position: sticky; top: calc(var(--am-header-h) + var(--am-gap-4)); } @media (min-width: 1024px) { .admin .am-admin-sidenav { display: block; padding-top: 16px; } } .admin .am-nav { list-style: none; margin: 0; padding: var(--am-gap-4); background: var(--am-color-surface); border: 1px solid var(--am-color-border); border-radius: var(--am-radius); box-shadow: var(--am-shadow); } .admin .am-nav li { margin-bottom: var(--am-gap-2); } .admin .am-nav a { display: flex; align-items: center; gap: var(--am-gap-3); padding: .55rem .65rem; border-radius: 4px; color: var(--am-color-text); } .admin .am-nav a:hover, .admin .am-nav a[aria-current="page"] { background: var(--am-color-elev); } /* bottom tab bar */ .admin .am-admin-tabbar { position: sticky; bottom: 0; z-index: 40; height: var(--am-tabbar-h); background:#f5622c; border-top: 1px solid #d04f22; } .admin .am-admin-tabbar .tabs { display: grid; grid-template-columns: repeat(4, 1fr); height: 100%; } .admin .am-admin-tabbar a { display: grid; place-items: center; gap: .25rem; font-size: .9rem; font-weight: 700; color: #fff; text-decoration: none; } @media (min-width: 1024px) { .admin .am-admin-tabbar { display: none; } } /* main */ .admin main.am-admin-main { padding: var(--am-gap-1); padding-top: var(--am-gap-4); padding-bottom: calc(var(--am-tabbar-h) + var(--am-gap-4)); } /************************ * 4) CARDS, GRID, UTILITIES ************************/ .admin .am-grid { display: grid; gap: var(--am-gap-4); } @media (min-width: 768px) { .admin .am-grid.md-cols-2 { grid-template-columns: 1fr 1fr; } .admin .am-grid.md-cols-3 { grid-template-columns: repeat(3, 1fr); } } .admin .card { background: var(--am-color-surface); border: 1px solid var(--am-color-hair); border-radius: var(--am-radius); box-shadow: var(--am-shadow); overflow: clip; } .admin .card__body { padding: var(--am-gap-4); } .admin .card__header { padding: var(--am-gap-4); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px dashed var(--am-color-border); } .admin .card__title { font-weight: 700; color: var(--am-color-heading); font-size: 1rem; } .admin h1.card__title { font-size: 1.5rem; } .admin .muted { color: var(--am-color-muted); } /* landing tiles */ .admin .tile { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; column-gap: var(--am-gap-4); } .admin .tile-icon { width: 56px; height: 56px; display: grid; place-items: center; color: var(--am-color-primary); } .admin .tile-icon .fa { font-size: 36px; line-height: 1; } @media (min-width: 400px) { .admin .tile-icon .fa { font-size: 44px; } } .admin .tile-copy .card__title { font-size: 1.25rem; } .admin .tile-copy .muted { font-size: 1rem; } .admin .tile-chevron { color: var(--am-color-muted); } /************************ * 5) BUTTONS ************************/ .admin .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6ch; height: 44px; padding: 0 0.5rem; border-radius: 4px; border: 1px solid var(--am-color-hair); background: var(--am-color-elev); color: var(--am-color-text); font-weight: 700; text-decoration: none; cursor: pointer; transition: background .25s, color .25s, transform .08s; } .admin .btn--primary { background: var(--am-color-primary); color: #fff; border-color: var(--am-color-primary); } .admin .btn--ghost { background: #f2f2f2; } .admin .btn--danger { background: var(--am-color-danger); color: #fff; border-color: var(--am-color-danger); } /* icons follow text color; white on primary */ .admin .btn .fa, .admin .btn i, .admin .btn svg { color: currentColor; } .admin .btn--primary .fa, .admin .btn--primary i, .admin .btn--primary svg { color: #fff; } /************************ * 6) FORMS ************************/ .admin .form { display: grid; gap: var(--am-gap-4); } .admin .field { display: grid; gap: .4rem; } .admin .label { font-size: .9rem; color: var(--am-color-text); font-weight: 600; } .admin .input, .admin .select, .admin .textarea { width: 100%; height: 38px; padding: 0 .75rem; border-radius: 4px; border: 1px solid #ddd; background: #fff; color: var(--am-color-text); font: inherit; } .admin .textarea { resize: vertical; min-height: 120px; padding: .75rem; height: 200px !important;} .admin .help { font-size: .8rem; color: var(--am-color-muted); } .admin .input:focus, .admin .select:focus, .admin .textarea:focus, .admin .btn:focus, .admin a:focus { outline: 0; box-shadow: 0 0 0 3px rgba(245,98,44,.25); border-color: var(--am-color-primary); } .admin #expense-form input.error, .admin #vehicle-form input.error {border-color: red !important;} /* ===== Admin form control visibility fix (text on inputs/selects) ===== */ body.admin input[type="text"], body.admin input[type="email"], body.admin input[type="password"], body.admin input[type="number"], body.admin input[type="date"], body.admin input[type="time"], body.admin input[type="search"], body.admin select, body.admin textarea, body.admin .input, body.admin .select, body.admin .textarea{ background: var(--am-color-surface) !important; color: var(--am-color-text) !important; border: 1px solid var(--am-color-border) !important; caret-color: var(--am-color-text); } body.admin ::placeholder{ color: var(--am-color-muted); opacity: 1; } body.admin select option{ color: var(--am-color-text); background: var(--am-color-surface); } body.admin input:-webkit-autofill, body.admin textarea:-webkit-autofill, body.admin select:-webkit-autofill{ -webkit-text-fill-color: var(--am-color-text) !important; caret-color: var(--am-color-text); transition: background-color 99999s ease-in-out 0s; box-shadow: 0 0 0 1000px var(--am-color-surface) inset; } body.admin :is(input,select,textarea):disabled{ background: var(--am-color-elev) !important; color: var(--am-color-muted) !important; } /************************ * 7) TABLE (responsive) ************************/ .admin .table-wrap { overflow-x: auto; } .admin table.table { width: 100%; border-collapse: collapse; border-spacing: 0; } .admin table.table thead { display: none; } .admin table.table tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--am-gap-3); padding: var(--am-gap-4); margin-bottom: var(--am-gap-3); background: var(--am-color-surface); border: 1px solid var(--am-color-hair); border-radius: var(--am-radius); } .admin table.table td { padding: 0; } .admin table.table td::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--am-color-muted); margin-bottom: .25rem; } @media (min-width: 768px) { .admin table.table thead { display: table-header-group; background: var(--am-color-surface); } .admin table.table tr { display: table-row; padding: 0; margin: 0; background: none; border: none; border-radius: 0; } .admin table.table th, .admin table.table td { padding: .8rem .65rem; border-bottom: 1px dashed var(--am-color-border); text-align: left; } .admin table.table td::before { content: none; } .admin table.table tbody tr:hover { background: var(--am-color-elev); } } /************************ * 8) FEEDBACK ************************/ .admin .empty { padding: var(--am-gap-6); text-align: center; color: var(--am-color-muted); border: 1px dashed var(--am-color-border); border-radius: var(--am-radius); background: var(--am-color-surface); } .admin .skeleton { display: inline-block; width: 100%; height: 1em; border-radius: 4px; background: linear-gradient(90deg, #eee, #f7f7f7, #eee); background-size: 200% 100%; animation: am-shimmer 1.25s linear infinite; } @keyframes am-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /************************ * 9) BADGES + STATUS ************************/ .admin .status { display: inline-flex; align-items: center; gap: .5ch; } .admin .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--am-color-muted); } .admin .dot--ok { background: var(--am-color-success); } .admin .dot--warn { background: var(--am-color-warning); } .admin .dot--err { background: var(--am-color-danger); } /************************ * 10) LIGHT/DARK ************************/ @media (prefers-color-scheme: dark) { body.admin { --am-color-bg: #222; --am-color-surface: #2a2a2a; --am-color-elev: #1f1f1f; --am-color-text: #e9eaee; --am-color-heading: #fff; --am-color-muted: #a7a7a7; --am-color-border: #3a3a3a; --am-color-hair: #333; --am-shadow: 0 4px 12px rgba(0,0,0,.25); } .admin .am-admin-header { background:#111; border-bottom-color:#000; } .admin .btn--ghost { background:#2e2e2e; } /* legible vehicle action links in dark */ body.admin { --am-color-link:#e9eaee; --am-color-link-hover:#ffffff; } .admin .vehicle__actions{ border-top-color:#444; } } /************************ * 11) ICON helper ************************/ .admin .icon, .admin .fa { display: inline-block; } /************************ * 12) MISC ************************/ .admin .stack { display: grid; gap: var(--am-gap-3); } .admin .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--am-gap-3); } .admin .push { margin-left: auto; } .admin .right { text-align: right; } /************************ * 13) DRIVEWAY ************************/ .admin .vehicles { display: grid; gap: var(--am-gap-4); } .admin .vehicles__group { display: grid; gap: var(--am-gap-4); } .admin .vehicles__title { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--am-color-heading); } /* vehicle card */ .admin .vehicle.card { overflow: hidden; } .admin .vehicle__media { position: relative; aspect-ratio: 7 / 3; background: #ddd; } .admin .vehicle__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .admin .vehicle__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: .6rem; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.35) 95%); } .admin .vehicle__badges { display: flex; gap: .5rem; } .admin .chip--glass { height:32px; padding:0 .65rem; border-radius:10px; background: rgba(58,60,64,.65); border:1px solid rgba(255,255,255,.2); color:#fff; font-weight:800; letter-spacing:.3px; font-size:.95rem; display:inline-flex; align-items:center; line-height:1; } @supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))) { .admin .chip--glass { backdrop-filter: saturate(140%) blur(4px); -webkit-backdrop-filter: saturate(140%) blur(4px); } } .admin .vehicle__body { padding: var(--am-gap-4); display: grid; gap: .4rem; } .admin .vehicle__title { font-weight: 800; font-size: 1.05rem; color: var(--am-color-heading); } .admin .vehicle__segment { color: var(--am-color-text); font-weight: 700; } .admin .vehicle__meta { color: var(--am-color-muted); font-size: .95rem; } .admin .vehicle__actions { padding: var(--am-gap-4); border-top: 1px dashed var(--am-color-border); display: flex; flex-wrap: wrap; gap: .5rem .75rem; } .admin .vehicle__actions a { color: var(--am-color-link); text-decoration:none; } .admin .vehicle__actions a:hover { color: var(--am-color-link-hover); text-decoration:underline; } /* inactive look */ .admin .vehicle--inactive .vehicle__media img { filter: grayscale(1); opacity: .7; } .admin .vehicle--inactive .vehicle__body { opacity: .85; } /* 2 columns on larger screens */ @media (min-width: 900px) { .admin .vehicles__group { grid-template-columns: 1fr 1fr; } } /* override any inline 40px figure margins from base theme */ .admin .vehicle.card > figure.vehicle__media{ margin-left:0 !important; margin-right:0 !important; margin-inline:0 !important; margin-block:0 !important; width:100% !important; padding:0; display:block; border:0; } /************************ * 14) ACCOMPLISHMENTS ************************/ /* consistent spacing */ .admin .accomplishments > * + *{ margin-top: var(--am-gap-6); } .admin .accomplishments .kpis{ display:grid; gap:var(--am-gap-6); } @media (min-width:768px){ .admin .accomplishments .kpis{ grid-template-columns: 1.2fr 1fr; } } /* hero stat */ .admin .hero-stat.card .card__body{ display:grid; gap:.35rem; } .admin .hero-stat .card__body > .value{ font-weight:900; letter-spacing:.2px; font-variant-numeric:tabular-nums; font-size:clamp(3rem,12vw,4.5rem); line-height:1; color:var(--am-color-primary); } .admin .hero-stat .label{ font-size:1rem; color:var(--am-color-muted); } /* sub-stats */ .admin .substats{ display:grid; gap:.5rem; } .admin .substats .row{ display:flex; align-items:center; gap:.6rem; } .admin .substats .row .fa{ opacity:.8; } .admin .substats .value{ font-weight:800; } .admin .hero-stat .substats .value{ font-weight:800; font-size:1.1rem; color:var(--am-color-heading); } /* level */ .admin .level-card .card__body{ display:grid; gap:.6rem; } .admin .level-badge{ display:inline-flex; align-items:center; gap:.5rem; font-weight:900; } .admin .level-badge .tag{ display:inline-flex; align-items:center; height:28px; padding:0 .6rem; border-radius:999px; background:var(--am-color-elev); border:1px solid var(--am-color-border); } .admin .level-steps{ display:flex; align-items:center; gap:6px; } .admin .level-steps .step{ width:22px; height:8px; border-radius:6px; background:var(--am-color-hair); border:1px solid var(--am-color-border); } .admin .level-steps .step.is-active{ background:var(--am-color-primary); border-color:var(--am-color-primary); } .admin .trophy-container {position: relative; overflow: hidden;} .admin .trophy-container .level-trophy {position: absolute; right: 0.5rem; top: 60%; transform: translateY(-50%) rotate(25deg); font-size: 7.5rem; opacity: 0.18; pointer-events: none; color: #f7b733;} .level-trophy__number {position: absolute; top: 50%;left: 50%;transform: translate(-50%, -70%); font-size: 3.6rem;font-weight: 900;color: rgba(0, 0, 0, 0.45);opacity: 0.9;pointer-events: none;} /* badges */ .admin .badges.card .card__body{ padding: var(--am-gap-3); } .admin .badges-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:var(--am-gap-3); background:transparent; border-top:0; } @media (min-width:520px){ .admin .badges-grid{ grid-template-columns: repeat(3,1fr); } } @media (min-width:768px){ .admin .badges-grid{ grid-template-columns: repeat(4,1fr); } } .admin .badge-card{ position:relative; display:block; padding: var(--am-gap-2); background:var(--am-color-surface); color:var(--am-color-text); text-decoration:none; overflow:hidden; border-radius: 10px; border:1px solid var(--am-color-hair); transition: transform .15s ease, box-shadow .2s ease; } .admin .badge-card:hover{ transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.06); } .admin .badge__media{ position:relative; aspect-ratio: 2 / 1; background:#cfcfcf; overflow:hidden; border-radius: 10px; } .admin .badge__media img{ width:100%; height:100%; display:block; object-fit:cover; filter: grayscale(75%); -webkit-filter: grayscale(75%); } .admin .badge__overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:.5rem .6rem; background: linear-gradient(180deg, rgba(0,0,0,.75) 45%, rgba(0,0,0,.65) 75%); z-index:1; } .admin .badge__label{ color:#fff; font-weight:800; display:flex; align-items:center; gap:.5rem; } .admin .badge__label .fa{ opacity:.9; } /* orange badge numbers with subtle stroke */ .admin .badge__num{ position:absolute; right:.75rem; top:.65rem; font-weight:900; font-size:48px; line-height:1; color: var(--am-color-primary); opacity:.9; text-shadow: 0 1px 2px rgba(0,0,0,.3); -webkit-text-stroke: 1px rgba(0,0,0,.2); pointer-events:none; z-index:2; } @media (prefers-color-scheme:dark){ .admin .badge__num{ -webkit-text-stroke:0; text-shadow: 0 1px 2px rgba(0,0,0,.6); } } /* achieved vs selected */ .admin .badge-card.is-achieved{ outline:2px solid rgba(245,98,44,.3); outline-offset:-2px; } .admin .badge-card.is-selected{ border-color: var(--am-color-primary); box-shadow: 0 0 0 2px var(--am-color-primary), 0 0 0 6px rgba(2,157,85,.12); outline:0; } .admin .badge__check{ display:none !important; } /************************ * 15) INTERACTIONS ************************/ /* segmented control */ .admin .tabs-segmented{ display:flex; align-items:center; gap:.75rem; } .admin .tabs-segmented .segmented{ display:inline-grid; grid-auto-flow:column; gap:0; background:var(--am-color-elev); border:1px solid var(--am-color-border); border-radius:999px; overflow:hidden; } .admin .tabs-segmented .segmented label{ padding:.55rem 1rem; font-weight:800; cursor:pointer; color:var(--am-color-text); user-select:none; } .admin .tabs-segmented .segmented label:hover{ background:var(--am-color-surface); } /* hide radios but keep accessible */ .admin .tabs-toggle{ position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; padding:0 !important; border:0 !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; overflow:hidden !important; white-space:nowrap !important; } /* panels */ .admin .tab-panels .tab-panel{ display:none; } .admin #tab-messages:checked ~ .tab-panels .tab-panel--messages{ display:block; } .admin #tab-replies:checked ~ .tab-panels .tab-panel--replies { display:block; } /* active pill */ .admin #tab-messages:checked ~ .card__header .tabs-segmented label[for="tab-messages"], .admin #tab-replies:checked ~ .card__header .tabs-segmented label[for="tab-replies"]{ background:var(--am-color-primary); color:#fff; } /* segmented icons follow label color */ .admin .tabs-segmented .segmented label .fa { color: currentColor; } /* composer */ .admin .composer .form { gap: var(--am-gap-3); } .admin .composer .actions { display:flex; gap:.5rem; } .admin .composer .actions .btn { height: 44px; } /* collapsible card */ .admin details.card{ border-radius: var(--am-radius); border:1px solid var(--am-color-hair); background: var(--am-color-surface); box-shadow: var(--am-shadow); overflow:hidden; } .admin details.card > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:.6rem; padding: var(--am-gap-4); border-bottom:1px dashed var(--am-color-border); font-weight:800; color: var(--am-color-heading); } .admin details.card > summary::-webkit-details-marker{ display:none; } .admin details.card > summary .summary-meta{ color: var(--am-color-muted); font-weight:600; } .admin details.card > summary .chev{ margin-left:auto; transition: transform .2s ease; color: var(--am-color-muted); } .admin details[open].card > summary .chev{ transform: rotate(180deg); } .admin details.card .card__body{ padding: var(--am-gap-4); } /* Inbox actions */ .admin .inbox-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .75rem; padding: var(--am-gap-3) var(--am-gap-4); border-bottom:1px dashed var(--am-color-border); } .admin .inbox-actions .spacer{ flex:1; } .admin .inbox-actions .filter{ display:flex; align-items:center; gap:.5rem; } /* message list */ .admin .message-list{ display:grid; gap: var(--am-gap-3); padding: var(--am-gap-3) var(--am-gap-4); } .admin .message{ background: var(--am-color-surface); border:1px solid var(--am-color-hair); border-radius: var(--am-radius); box-shadow: var(--am-shadow); overflow:hidden; } .admin .message__row{ display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap: var(--am-gap-3); padding: .85rem .85rem; } .admin .message__row + .message__row{ border-top:1px dashed var(--am-color-border); } .admin .message__select{ width: 28px; display:grid; place-items:center; } .admin .message__avatar{ width:36px; height:36px; border-radius:999px; background:#ccc; display:grid; place-items:center; font-weight:800; color:#555; } .admin .message__who{ display:flex; align-items:center; gap:.5rem; } .admin .message__who .name{ font-weight:800; color:var(--am-color-heading); } .admin .message__who .meta{ color: var(--am-color-muted); font-size:.9rem; } .admin .message__subject{ font-weight:800; color:var(--am-color-text); } .admin .message__snippet{ color: var(--am-color-muted); font-size:.95rem; } .admin .message__time{ color:var(--am-color-muted); font-size:.85rem; white-space:nowrap; } .admin .message__actions{ display:flex; align-items:center; gap:.4rem; } .admin .icon-btn{ width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--am-color-hair); background: var(--am-color-elev); border-radius:8px; } .admin .icon-btn:hover{ background: var(--am-color-surface); } .admin .icon-btn--danger{ border-color: rgba(223,68,49,.25); background: rgba(223,68,49,.06); } .admin .icon-btn--danger:hover{ background: rgba(223,68,49,.12); } .admin .icon-btn i {margin-right: -5px;} /* unread */ .admin .message--unread{ border-left: 3px solid var(--am-color-primary); background: linear-gradient(180deg, rgba(245,98,44,.05), rgba(245,98,44,.02)); } .admin .message--unread .message__subject{ color: var(--am-color-heading); } .admin .message--unread .message__snippet{ color: var(--am-color-text); } /* replies */ .admin .replies-list{ display:grid; gap: var(--am-gap-3); padding: var(--am-gap-3) var(--am-gap-4); } .admin .reply{ background: var(--am-color-surface); border:1px solid var(--am-color-hair); border-radius: var(--am-radius); box-shadow: var(--am-shadow); overflow:hidden; } .admin .reply__row{ display:grid; grid-template-columns: 1fr auto; gap: var(--am-gap-3); padding: .85rem .85rem; } .admin .reply__row + .reply__row{ border-top:1px dashed var(--am-color-border); } .admin .reply__snippet{ color: var(--am-color-text); } .admin .reply__meta{ color: var(--am-color-muted); font-size:.9rem; } .admin .reply__actions{ display:flex; align-items:center; gap:.4rem; } .admin .replies-list .reply-block, .admin .message-list .reply-block {display: none;} /* search */ .admin .search { position: relative; } .admin .search input[type="search"]{ width: 100%; height: 38px; padding: 0 2.25rem 0 .75rem; border-radius: 999px; border:1px solid var(--am-color-border); background:#fff; color:var(--am-color-text); } .admin .search .fa{ position:absolute; right:.65rem; top:50%; transform: translateY(-50%); color:var(--am-color-muted); } @media (prefers-color-scheme:dark){ .admin .icon-btn{ background:#2e2e2e; border-color:#3a3a3a; } .admin .icon-btn:hover{ background:#333; } } /************************ * 16) SETTINGS ************************/ .admin .form-grid{ display:grid; gap: var(--am-gap-4); } @media (min-width: 768px){ .admin .form-grid.cols-2{ grid-template-columns: 1fr 1fr; } .admin .form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } } .admin .avatar-uploader{ display:flex; align-items:center; gap: var(--am-gap-4); } .admin .avatar-preview{ width: 88px; height: 88px; border-radius: 50%; overflow:hidden; border:1px solid var(--am-color-border); background:#ddd; display:grid; place-items:center; } .admin .avatar-preview img{ width:100%; height:100%; object-fit:cover; display:block; } .admin .avatar-actions{ display:flex; flex-wrap:wrap; gap:.5rem; } .admin .card--danger .card__title{ color: var(--am-color-danger); } .admin .danger-note{ color: var(--am-color-danger); font-weight:700; } @media (prefers-color-scheme:dark){ .admin .avatar-preview{ background:#444; border-color:#3a3a3a; } } /************************ * 17) VEHICLE EXPENSES ************************/ .admin .expenses-page > * + *{ margin-top: var(--am-gap-6); } .admin .expenses-page img.cover-image, .admin .edit-vehicle img.cover-image { width: 100%; aspect-ratio: 7 / 3; border-radius: 4px;filter: grayscale(50%); -webkit-filter: grayscale(50%);} /* header actions (kept for totals card) */ .admin .actions-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .75rem; padding: var(--am-gap-3) var(--am-gap-4); border-bottom:1px dashed var(--am-color-border); } /* list */ .admin .expense-list{ display:grid; gap: var(--am-gap-3); padding: var(--am-gap-3) var(--am-gap-4); } .admin .expense{ background: var(--am-color-surface); border:1px solid var(--am-color-hair); border-radius: var(--am-radius); box-shadow: var(--am-shadow); overflow:hidden; } .admin .expense__row{ display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap: var(--am-gap-3); padding: .85rem .85rem; } .admin .expense__row + .expense__row{ border-top:1px dashed var(--am-color-border); } /* icon bubble */ .admin .expense__icon{ width:36px; height:36px; border-radius:999px; display:grid; place-items:center; color:#fff; font-size:16px; font-weight:900; } .admin .expense__icon .fa{ color:#fff; padding: 0px; font-size: 20px;} /* categories */ .admin .cat--fuel{ background:#f5622c; } /* brand orange */ .admin .cat--repair{ background:#DF4431; } /* danger red */ .admin .cat--service{ background:#2f7bdc; } /* blue */ .admin .cat--registration{ background:#7a5bd9;} /* purple */ .admin .cat--parking{ background:#029d55; } /* green */ .admin .cat--toll{ background:#F6B502; color:#333; } /* yellow, dark icon */ /* body/meta */ .admin .expense__what{ display:flex; align-items:center; gap:.5rem; font-weight:800; color: var(--am-color-heading); } .admin .expense__meta{ color: var(--am-color-muted); font-size:.9rem; } .admin .expense__note{ color: var(--am-color-text); } .admin .expense__amount{ text-align:right; font-weight:900; font-variant-numeric: tabular-nums; } .admin .expense__amount small{ display:block; color: var(--am-color-muted); font-weight:600; } /* filters */ .admin .filters{ display:flex; flex-wrap:wrap; gap:.4rem; } .admin .pill{ display:inline-flex; align-items:center; gap:.4rem; height:28px; padding:0 .6rem; border-radius:999px; background:var(--am-color-elev); border:1px solid var(--am-color-border); font-weight:700; } .admin .pill .fa{ opacity:.8; } /* totals */ .admin .totals{ display:grid; gap:.5rem; padding: var(--am-gap-4); } .admin .totals .row{ display:flex; align-items:center; gap:.5rem; } .admin .totals .row .label{ color: var(--am-color-muted); } .admin .totals .row .value{ font-weight:900; margin-left:auto; } /* per-expense actions */ .admin .expense__actions{ padding: var(--am-gap-3) var(--am-gap-4); border-top:1px dashed var(--am-color-border); display:flex; flex-wrap:wrap; gap:.6rem .9rem; } .admin .expense__actions a{ color: var(--am-color-link); text-decoration:none; font-weight:700; } .admin .expense__actions a:hover{ color: var(--am-color-link-hover); text-decoration:underline; } /* mobile tidy */ @media (max-width: 520px){ .admin .expense__row{ grid-template-columns: 40px 1fr; align-items: start; grid-auto-rows: auto; padding: .85rem .85rem .6rem; } .admin .expense__amount{ grid-column: 2; grid-row: 2; justify-self: end; margin-top: .25rem; font-size: 1rem; } .admin .expense__amount small{ font-size: .85rem; } .admin .expense__what{ display: grid; row-gap: .2rem; } .admin .expense__note{ margin-top:.4rem; padding-top:.45rem; border-top:1px dashed var(--am-color-hair); } .admin .expense__actions{ padding-top:.5rem; gap:.5rem .75rem; } .admin .expense__actions a{ font-size:.95rem; } } /************************ * 18) PAGE ACTIONS (paired buttons below first card text) ************************/ .admin .page-actions{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--am-gap-3); margin-top: var(--am-gap-4); } .admin .page-actions .btn{ height:44px; padding:0 0.5rem; } .admin .page-actions.paired .btn{ flex:1 1 12rem; } @media (max-width:520px){ .admin .page-actions.paired .btn{ flex:1 1 calc(50% - var(--am-gap-3)); } } /* Align vertical rhythm for Interactions & Settings pages */ .admin .interactions > * + *, .admin .settings > * + *, .admin .accomplishments > * + *, .admin .settings > * + *, .admin .edit-vehicle-image > * + *, .admin .edit-vehicle > * + *, .admin .edit-vehicle form > * + * { margin-top: var(--am-gap-6); } .admin .chart-box canvas{ width:100%; height:220px;} /* Charts layout: stack on mobile, 2-up on desktop */ .admin .charts{ display:grid; gap: var(--am-gap-4, 16px); margin-bottom: 50px;} @media (min-width: 900px){ .admin .charts{ grid-template-columns: 1fr 1fr; align-items: stretch; } } .admin .chart-box h3.card__title{ margin-bottom: .5rem; } /* EXPENSES — spacing & structure */ .admin .expense-list{ padding: var(--am-gap-3); /* space away from card border */ } .admin .expense{ padding: 1.1rem 1.1rem .9rem; /* more inner padding */ border-radius: 14px; /* soften tile edge */ background: var(--am-color-elev); /* subtle lift (keeps dark theme) */ } /* Head layout stays: [icon] [primary] [amount] */ .admin .expense__head{ display: grid; grid-template-columns: 48px 1fr auto; /* a touch wider icon column */ align-items: start; gap: var(--am-gap-3); } /* Key facts more prominent */ .admin .expense__date{ font-size: 1.125rem; /* ~18px on mobile */ line-height: 1.25; font-weight: 900; color: var(--am-color-heading); } .admin .expense__mileage{ font-size: 1.05rem; font-weight: 800; color: var(--am-color-text); } .admin .expense__category{ font-size: .9rem; font-weight: 800; padding: .2rem .6rem; border-radius: 999px; } /* Amount anchored and larger */ .admin .expense__amount{ font-size: 2rem; /* ~20px on mobile */ line-height: 1.1; font-weight: 900; text-align: right; white-space: nowrap; } .admin .expense__amount small{ display:block; margin-top: .25rem; color: var(--am-color-muted); font-weight: 700; } /* Secondary info beneath */ .admin .expense__primary{ display: grid; gap: .3rem; } .admin .expense__topline{ display: flex; flex-wrap: wrap; gap: .35rem .65rem; align-items: baseline; } .admin .expense__note{ color: var(--am-color-text); } .admin .expense__details{ padding-top: .6rem; margin-left: 48px; /* line up under text column */ color: var(--am-color-text); } .admin .expense__actions{ margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--am-color-border); display:flex; flex-wrap: wrap; gap: 1rem 1.25rem; } /* Icon bubble (ensures visible circle for every category) */ .admin .expense__icon{ width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 18px; font-weight: 900; box-shadow: 0 1px 0 rgba(0,0,0,.25) inset, 0 6px 18px rgba(0,0,0,.18); } /* Category colours (you already have these; keeping here for completeness) */ .admin .expense__icon.cat--fuel{ background:#f5622c; } .admin .expense__icon.cat--oil{ background:#f39c12; } .admin .expense__icon.cat--maintenance{ background:#2f7bdc; } .admin .expense__icon.cat--repair{ background:#DF4431; } .admin .expense__icon.cat--tires{ background:#8e44ad; } .admin .expense__icon.cat--registration{ background:#7a5bd9; } .admin .expense__icon.cat--insurance{ background:#16a085; } .admin .expense__icon.cat--mot{ background:#27ae60; } .admin .expense__icon.cat--tuning{ background:#c04d68; } .admin .expense__icon.cat--styling{ background:#34495e; } /* Small-screen adjustments */ @media (max-width: 520px){ .admin .expense__head{ grid-template-columns: 44px 1fr; } .admin .expense__amount{ grid-column: 2; justify-self: end; margin-top: .25rem; } .admin .expense__details{ margin-left: 44px; } } /* Larger screens: boost key numbers a bit more */ @media (min-width: 900px){ .admin .expense__date{ font-size: 1.25rem; } .admin .expense__mileage{ font-size: 1.125rem; } .admin .expense__amount{ font-size: 1.4rem; } } /* ============================= Fuel Economy Quick Stats ============================= */ .fuel-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2.5vw, 24px); align-items: stretch; margin-top: clamp(12px, 2.5vw, 24px); padding: clamp(12px, 2vw, 20px); background: var(--panel, rgba(0, 0, 0, 0.03)); border: 1px solid var(--border, rgba(0, 0, 0, 0.08)); border-radius: 16px; } .fuel-stat { display: grid; grid-template-rows: auto 1fr; gap: 6px; padding: clamp(6px, 1vw, 10px); border-radius: 14px; } .fuel-stat .label { font-size: clamp(0.8rem, 0.8vw + 0.5rem, 1rem); letter-spacing: 0.02em; text-transform: uppercase; opacity: 0.7; } .fuel-stat .value { font-variant-numeric: tabular-nums lining-nums; line-height: 1.1; font-weight: 700; font-size: clamp(1.5rem, 2.2vw + 0.75rem, 2.75rem); /* big, legible */ } .fuel-stat .unit { font-weight: 600; margin-left: 4px; font-size: clamp(0.9rem, 0.6vw + 0.6rem, 1.2rem); opacity: 0.8; } /* Color semantics for the discrepancy (negative = better, positive = worse) */ .fuel-stat .delta.better { color: #1a7f37; } .fuel-stat .delta.worse { color: #c62828; } /* ============================= Image cropping ============================= */ /* 1. Constrain the container to the width of the page/column */ .img-container { max-width: 100%; height: auto; margin: 20px auto; background-color: rgb(233, 234, 238); overflow: hidden; } /* 2. FORCE the image to fit inside the container */ /* This rule prevents the 4000px width explosion */ #imageToCrop { max-width: 100%; display: block; }