/* ========================================================================== MyCo Admin — Design Tokens Load this AFTER custom-styles.css in admin.master.layout's . It does not replace custom-styles.css — it sits on top of it and gives the values already in use (brand purple, danger red, etc.) a single source of truth instead of repeated hardcoded hex. ========================================================================== */ :root{ /* Brand */ --myco-primary: #3f2e57; /* canonical brand purple — replaces both #3f2e57 (btn-outline-primary) and #3D3256 (loader, choices.js) in custom-styles.css. See migration note at the bottom of this file. */ --myco-primary-hover: #4f3a6c; --myco-primary-tint: #f5f3f8; /* light background for badges/pills */ --myco-primary-border: #e4dff0; --myco-accent: #f0b429; /* amber — already used for the sticky save bar on the invoice edit page */ --myco-accent-tint: #fff9ec; /* Status */ --myco-danger: #CD2121; /* matches existing .btn-danger exactly, no change needed there */ --myco-danger-tint: #fbebe9; --myco-success: #1e7e4b; --myco-success-tint: #eaf7f0; --myco-warning: #b8860b; --myco-warning-tint: #fdf6e3; /* Neutrals */ --myco-text: #2c2536; --myco-text-muted: #6b7280; --myco-border: #e8e6ee; --myco-bg: #faf9fc; /* Layout */ --myco-radius: 10px; --myco-radius-sm: 7px; } /* ========================================================================== Component classes These are additive — new class names, nothing here overrides existing selectors in custom-styles.css or app.min.css. Safe to include without affecting any page that doesn't opt in yet. ========================================================================== */ /* Filter tabs — replaces the badge-as-tab pattern (unpaid/paid/all invoices and similar filter groups elsewhere in the app) */ .myco-tab-group{ display:flex; gap:4px; border-bottom:1px solid var(--myco-border); margin-bottom:18px; } .myco-tab-item{ padding:9px 16px; font-size:0.85rem; font-weight:500; color:var(--myco-text-muted); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s, border-color .15s; } .myco-tab-item:hover{ color:var(--myco-primary); text-decoration:none; } .myco-tab-item.active{ color:var(--myco-primary); border-bottom-color:var(--myco-accent); font-weight:600; } /* Status dot — replaces emoji account-status indicators */ .myco-status-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:1px; } .myco-status-dot.green{ background:var(--myco-success); } .myco-status-dot.amber{ background:var(--myco-warning); } .myco-status-dot.red{ background:var(--myco-danger); } /* Balance / amount pill — for outstanding amounts, overdue flags, etc. */ .myco-pill-danger{ display:inline-block; font-size:0.8rem; font-weight:700; color:var(--myco-danger); background:var(--myco-danger-tint); padding:4px 10px; border-radius:6px; } .myco-pill-muted{ color:var(--myco-text-muted); font-size:0.82rem; } /* Icon-only action buttons in table rows — gives destructive actions a distinct hover state instead of every icon reading identically */ .myco-action-btn{ width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--myco-radius-sm); color:var(--myco-text-muted); background:var(--myco-bg); border:none; text-decoration:none; font-size:1rem; transition:background .12s, color .12s; margin-right:4px; } .myco-action-btn:last-child{ margin-right:0; } .myco-action-btn:hover{ background:var(--myco-primary-tint); color:var(--myco-primary); text-decoration:none; } .myco-action-btn.danger:hover{ background:var(--myco-danger-tint); color:var(--myco-danger); } /* Data table — consistent header/row treatment across list pages */ .myco-table{ width:100%; border-collapse:separate; border-spacing:0; } .myco-table thead th{ background:var(--myco-primary-tint); color:var(--myco-primary); font-size:0.72rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:10px 14px; border-bottom:1px solid var(--myco-primary-border); white-space:nowrap; } .myco-table thead th:first-child{ border-top-left-radius:8px; } .myco-table thead th:last-child{ border-top-right-radius:8px; } .myco-table tbody td{ padding:12px 14px; border-bottom:1px solid var(--myco-border) !important; vertical-align:middle; font-size:0.86rem; } .myco-table tbody tr:last-child td{ border-bottom:1px solid transparent !important; } .myco-table tbody tr:hover td{ background:#fbfafd; } /* Header icon button — e.g. "create new" actions in a card header */ .myco-btn-icon-primary{ width:36px; height:36px; box-sizing:border-box; display:inline-flex !important; align-items:center; justify-content:center; border-radius:8px !important; background:var(--myco-primary-tint) !important; color:var(--myco-primary) !important; border:1px solid var(--myco-primary-border) !important; text-decoration:none !important; transition:background .15s; flex:0 0 auto; vertical-align:middle; } .myco-btn-icon-primary:hover{ background:var(--myco-primary) !important; color:#fff !important; } .myco-btn-icon-primary i{ font-size:16px; line-height:1; } /* Search input with leading icon */ .myco-search-input{ position:relative !important; display:inline-flex !important; align-items:center; vertical-align:middle; } .myco-search-input input{ box-sizing:border-box; padding-left:36px !important; border-radius:8px !important; border:1px solid var(--myco-border) !important; font-size:0.85rem; height:36px !important; margin:0; } .myco-search-input i{ position:absolute !important; left:12px; top:50% !important; transform:translateY(-50%) !important; color:var(--myco-text-muted); font-size:0.9rem !important; line-height:1; pointer-events:none; } /* Primary confirm-modal button, for non-destructive confirmations (email, reminder, duplicate, mark as paid) */ .myco-btn-primary{ border:none; background:var(--myco-primary); color:#fff; padding:7px 16px; border-radius:8px; font-size:0.85rem; font-weight:600; } /* Inline links inside table cells (customer name, add payment) */ .customer-link{ color:var(--myco-text); font-weight:500; text-decoration:none; } .customer-link:hover{ color:var(--myco-primary); text-decoration:underline; } .add-payment-link{ display:block; font-size:0.72rem; color:var(--myco-primary); text-decoration:none; margin-top:2px; } .add-payment-link:hover{ text-decoration:underline; } /* Small badge for manual/edited records */ .myco-badge-manual{ display:inline-flex; align-items:center; gap:4px; font-size:0.68rem; font-weight:600; color:var(--myco-warning); background:var(--myco-warning-tint); padding:2px 7px; border-radius:5px; margin-left:6px; } /* Record-level subnav — Create New / View-Edit / Payments / etc, reused across bookkeeping record pages (invoices, quotes, contracts...) */ .myco-subnav{ display:flex; flex-wrap:wrap; gap:6px; margin:16px 0; } .myco-subnav-item{ display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:8px; font-size:0.85rem; font-weight:500; color:var(--myco-primary); background:var(--myco-primary-tint); border:1px solid var(--myco-primary-border); text-decoration:none; transition:background .15s, color .15s; } .myco-subnav-item:hover{ background:var(--myco-primary-border); color:var(--myco-primary); text-decoration:none; } .myco-subnav-item.active{ background:var(--myco-primary); color:#fff; border-color:var(--myco-primary); } .myco-subnav-item.icon-only{ padding:7px 12px; } /* Generic filled button — replaces one-off .btn-save-invoice / .btn-add-line patterns that repeat per-blade with the same brand purple */ .myco-btn-fill{ display:inline-flex; align-items:center; gap:6px; background:var(--myco-primary) !important; color:#fff !important; border:none; border-radius:8px; padding:10px 24px; font-size:0.88rem; font-weight:600; cursor:pointer; text-decoration:none; transition:opacity .15s; } .myco-btn-fill:hover{ opacity:0.88; color:#fff !important; } .myco-btn-fill.sm{ padding:8px 18px; font-size:0.85rem; } /* Generic outline button — toggles, secondary actions in forms */ .myco-btn-outline{ background:none; border:1.5px solid var(--myco-primary-border); border-radius:6px; padding:7px 16px; font-size:0.82rem; font-weight:600; color:var(--myco-primary); cursor:pointer; transition:background .15s; } .myco-btn-outline:hover{ background:var(--myco-primary-tint); } /* Sticky reminder banner — e.g. "remember to save" */ .myco-sticky-banner{ position:sticky; top:76px; z-index:10; background:var(--myco-accent-tint); border:1.5px solid var(--myco-accent); border-radius:8px; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px; } .myco-sticky-banner span{ font-size:0.85rem; color:#92400e; font-weight:500; } /* Totals summary bar — e.g. subtotal / VAT / grand total */ .myco-total-bar{ background:var(--myco-primary-tint); border:1.5px solid var(--myco-primary-border); border-radius:10px; padding:14px 20px; display:flex; align-items:center; justify-content:flex-end; gap:32px; margin:16px 0; flex-wrap:wrap; } .myco-total-bar .total-item{ text-align:right; } .myco-total-bar .total-label{ font-size:0.75rem; color:var(--myco-text-muted); font-weight:500; text-transform:uppercase; letter-spacing:0.04em; } .myco-total-bar .total-value{ font-size:1.1rem; font-weight:700; color:var(--myco-primary); } .myco-total-bar .total-value.grand{ font-size:1.3rem; } /* Inline info/callout box — e.g. showing a payment link or reference info */ .myco-info-box{ background:var(--myco-bg); border:1px solid var(--myco-border); border-radius:8px; padding:14px 16px; margin-bottom:20px; } .myco-info-box .info-label{ color:var(--myco-text-muted); font-size:0.8rem; font-weight:600; margin-bottom:6px; } .myco-info-box .info-value{ color:var(--myco-primary); font-size:0.86rem; word-break:break-all; } /* Segmented control — e.g. existing-customer / new-customer toggle */ .myco-segmented{ display:flex; border:1.5px solid var(--myco-primary-border); border-radius:8px; overflow:hidden; margin-bottom:24px; } .myco-segmented-btn{ flex:1; padding:10px 16px; font-size:0.88rem; font-weight:600; border:none; background:#fff; color:var(--myco-text-muted); cursor:pointer; transition:background .15s, color .15s; } .myco-segmented-btn:not(:last-child){ border-right:1.5px solid var(--myco-primary-border); } .myco-segmented-btn.active{ background:var(--myco-primary); color:#fff; } /* Hint / helper paragraph above a form */ .myco-hint{ font-size:0.82rem; color:var(--myco-text-muted); margin-bottom:20px; line-height:1.5; } /* Centered, width-capped form card — e.g. a single-step wizard panel */ .myco-form-card{ max-width:620px; margin:0 auto; padding:0 32px 32px 32px; } /* Quiet back link */ .myco-back-link{ display:inline-flex; align-items:center; gap:6px; font-size:0.82rem; color:var(--myco-text-muted); text-decoration:none; margin-bottom:20px; } .myco-back-link:hover{ color:var(--myco-primary); } /* Empty-state table row */ .myco-empty-row{ text-align:center; color:var(--myco-text-muted); font-size:0.86rem; padding:24px !important; } /* ========================================================================== Mobile responsiveness — applies across every myco-* component above. Keep additive: nothing here overrides desktop behaviour above 767px. ========================================================================== */ @media screen and (max-width: 767px){ /* Bigger touch targets on icon-only buttons */ .myco-action-btn, .myco-btn-icon-primary{ width:38px !important; height:38px !important; margin-right:6px !important; } /* Subnav items get a bit more room to tap on mobile */ .myco-subnav-item{ padding:8px 14px; } /* Search input takes full width instead of a fixed narrow box */ .myco-search-input{ width:100%; display:block; } .myco-search-input input{ width:100%; } /* Totals bar stacks and left-aligns rather than cramming three right-aligned columns into a narrow viewport */ .myco-total-bar{ justify-content:flex-start; gap:16px; } .myco-total-bar .total-item{ text-align:left; } /* Sticky banner drops the sticky behaviour on mobile — a fixed banner eating scroll space on a small screen is worse than a normal one */ .myco-sticky-banner{ position:static; flex-direction:column; align-items:flex-start; } .myco-sticky-banner button{ width:100%; justify-content:center; } /* Segmented control keeps two equal columns but shrinks padding */ .myco-segmented-btn{ padding:9px 8px; font-size:0.82rem; } /* Form card loses its side padding — the page gutter already provides it */ .myco-form-card{ padding:0 0 24px 0; } } /* Disabled action button — e.g. delete blocked because of linked records */ .myco-action-btn.disabled{ cursor:not-allowed; opacity:0.4; } .myco-action-btn.disabled:hover{ background:var(--myco-bg); color:var(--myco-text-muted); } /* Large modal size modifier — for modals containing a short form rather than just a confirm message */ .myco-modal.lg{ width:500px; } /* Collapsible section toggle — e.g. optional form sections (Work, Address, Social...) that expand only when needed */ .myco-section-toggle{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:var(--myco-primary-tint); border:1px solid var(--myco-primary-border); border-radius:8px; cursor:pointer; margin-bottom:0; user-select:none; transition:background .15s; } .myco-section-toggle:hover{ background:var(--myco-primary-border); } .myco-section-toggle .section-title{ font-size:0.88rem; font-weight:600; color:var(--myco-primary); display:flex; align-items:center; gap:8px; } .myco-section-toggle .section-chevron{ color:var(--myco-primary); opacity:0.7; font-size:1rem; transition:transform .2s; } .myco-section-toggle.open .section-chevron{ transform:rotate(180deg); } .myco-section-body{ padding:16px 4px 4px 4px; } .myco-section-wrapper{ margin-bottom:12px; } .myco-section-data-badge{ font-size:0.72rem; background:var(--myco-primary); color:#fff; border-radius:20px; padding:2px 8px; font-weight:500; } /* Fact chip — icon + label row, e.g. contact summary details. Background color of the icon circle stays dynamic per-tenant in markup (getColor('color_1')) — this class only handles layout/spacing. */ .myco-fact-chip{ border:1px solid var(--myco-border); border-radius:14px; padding:10px 12px; font-size:0.86rem; display:flex; align-items:center; gap:10px; } .myco-fact-chip .chip-icon{ width:30px; height:30px; min-width:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:0.95rem; } .myco-fact-chip .chip-tag{ margin-left:auto; color:var(--myco-text-muted); font-size:0.8rem; } /* Dismissible notice banner — e.g. one-off announcements, deprecation notices. Compact padding, matching the sticky-save banner's proportions rather than a full-bleed alert block. */ .myco-dismiss-banner{ background:var(--myco-warning-tint); padding:10px 16px; margin:0 0 16px 0; border-radius:8px; font-size:0.86rem; color:#78350f; align-items:flex-start; justify-content:space-between; gap:12px; } .myco-dismiss-banner .banner-content{ display:flex; align-items:flex-start; gap:10px; } .myco-dismiss-banner i{ font-size:1.1rem; margin-top:1px; flex-shrink:0; } .myco-dismiss-banner .banner-close{ background:none; border:none; cursor:pointer; color:#92400e; font-size:1.1rem; padding:0; flex-shrink:0; line-height:1; } /* Search input variant with an inline submit button — for standalone search pages, as opposed to the plain filter version used in list headers (which relies on Enter to submit). */ .myco-search-input.with-submit input{ height:48px !important; padding-right:52px !important; } .myco-search-input .search-submit-btn{ position:absolute; right:7px; top:50%; transform:translateY(-50%); width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:var(--myco-primary); color:#fff; border:none; border-radius:50%; cursor:pointer; font-size:0.9rem; } .myco-search-input .search-submit-btn:hover{ opacity:0.88; } /* Sent-invite indicator — e.g. calendar email icon once an ICS invite has already gone out. Replaces a raw lime-green inline style. */ .myco-action-btn.sent-invite{ background:var(--myco-success-tint); color:var(--myco-success); } .myco-action-btn.sent-invite:hover{ background:var(--myco-success); color:#fff; } /* Solid status badge — pill with white text, e.g. subscription/enrolment stage indicators. Background color set inline per status via a CSS var. */ .myco-status-badge{ display:inline-block; font-size:0.72rem; font-weight:600; color:#fff; padding:3px 10px; border-radius:20px; white-space:nowrap; } /* KPI tile — solid-color stat card, for hard numbers/counts/percentages. This is the app-wide standard for dashboard-style stat summaries. */ .myco-kpi-tile { background: var(--myco-primary); border-radius: 10px; padding: 16px 18px; margin-bottom: 20px; } .myco-kpi-tile h3 { font-size: 11px; color: rgba(255,255,255,0.65); margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .myco-kpi-tile .myco-kpi-amount { font-size: 22px; font-weight: 700; color: #fff; line-height: 1.1; } .myco-kpi-tile.grey { background: #374151; } .myco-kpi-tile.amber { background: #78350f; } .myco-kpi-tile.green { background: #14532d; } .myco-kpi-tile.red { background: #7f1d1d; } .myco-kpi-tile.slate { background: #1e293b; } .myco-kpi-tile.blue { background: #1e3a5f; } /* Insight tile — lighter card for sentence/observation-style content (e.g. "your busiest reading time is..."), as opposed to a hard number. Same footprint as myco-kpi-tile so they sit well in the same row. */ .myco-insight-tile { background: var(--myco-primary-tint); border: 1px solid var(--myco-primary-border); border-radius: 10px; padding: 16px 18px; margin-bottom: 20px; } .myco-insight-tile h3 { font-size: 11px; color: var(--myco-primary); opacity: 0.75; margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .myco-insight-tile .myco-insight-value { font-size: 18px; font-weight: 700; color: var(--myco-primary); line-height: 1.3; } .myco-btn-outline.danger{ color:var(--myco-danger); border-color:#f3d4d1; } .myco-btn-outline.danger:hover{ background:var(--myco-danger-tint); } /* Confirm modal — replaces native confirm() for delete/duplicate/etc. */ .myco-modal-backdrop{ display:none; position:fixed; inset:0; background:rgba(44,37,54,0.35); z-index:1000; align-items:center; justify-content:center; } .myco-modal-backdrop.show{ display:flex; } .myco-modal{ background:#fff; border-radius:12px; width:380px; max-width:90vw; padding:22px 24px; box-shadow:0 12px 32px rgba(44,37,54,0.18); } .myco-modal-icon{ width:40px; height:40px; border-radius:50%; background:var(--myco-danger-tint); color:var(--myco-danger); display:flex; align-items:center; justify-content:center; font-size:1.1rem; margin-bottom:12px; } .myco-modal h6{ font-weight:700; margin-bottom:6px; } .myco-modal p{ color:var(--myco-text-muted); font-size:0.86rem; margin-bottom:18px; } .myco-modal-actions{ display:flex; gap:8px; justify-content:flex-end; } .myco-btn-secondary{ border:1px solid var(--myco-border); background:#fff; color:var(--myco-text); padding:7px 16px; border-radius:8px; font-size:0.85rem; font-weight:500; } .myco-btn-danger{ border:none; background:var(--myco-danger); color:#fff; padding:7px 16px; border-radius:8px; font-size:0.85rem; font-weight:600; } /* ========================================================================== Migration notes — not code to ship, just what to change and where. 1. custom-styles.css: .btn-outline-primary { background-color: #3f2e57 } -> background-color: var(--myco-primary) 2. custom-styles.css: .loader { border-top: 16px solid #3D3256 } -> border-top: 16px solid var(--myco-primary) (this is the drifted duplicate — after this change there is exactly one purple in the codebase, not two) 3. custom-styles.css: .choices__list--multiple .choices__item { background-color: #3D3256 } -> background-color: var(--myco-primary) 4. custom-styles.css: .btn-danger { background-color: #CD2121; border-color: #CD2121 } -> both values already match --myco-danger exactly, so this one is optional — swap it for consistency whenever convenient, no visual change either way. None of these four are required before this file can be used — they're independent cleanup you can do at any pace. The token file works immediately on its own for any new component using the myco-* classes. ========================================================================== */ /* ── Rich form modal — white header/bottom-border style (not solid-purple header). Used for filter/form-heavy modals rather than short confirm dialogs. Originally built for procurement, promoted here since a second page (course registrations) needed the exact same treatment. Works with Bootstrap's native .modal system — just add class="modal fade mco-modal" to the modal wrapper alongside the usual data-bs-* attributes. ── */ .mco-modal .modal-content { border-radius: 16px; border: none; box-shadow: 0 20px 60px rgba(0,0,0,0.2); overflow: hidden; } .mco-modal .modal-header { background: #fff; border-bottom: 1px solid var(--myco-primary-border); padding: 24px 32px 16px; } .mco-modal .modal-title { font-weight: 700; color: var(--myco-text); font-size: 1rem; } .mco-modal .modal-title i { color: var(--myco-primary); margin-right: 6px; } .mco-modal .modal-body { max-height: 72vh; overflow-y: auto; padding: 28px 32px; } .mco-modal .modal-footer { border-top: 1px solid var(--myco-primary-border); padding: 16px 32px; background: #fff; } .mco-modal .modal-footer .btn-light { border-radius: 8px; padding: 9px 20px; font-size: 0.9rem; } .mco-modal .form-control, .mco-modal .form-select { border: 1.5px solid var(--myco-primary-border); border-radius: 8px; background: var(--myco-bg); font-size: 0.9rem; padding: 9px 12px; } .mco-modal label { font-size: 0.8rem; font-weight: 600; color: var(--myco-text-muted); text-transform: uppercase; letter-spacing: 0.4px; display: block; margin-bottom: 6px; } .mco-modal .btn-primary { background: var(--myco-primary); border-color: var(--myco-primary); border-radius: 8px; padding: 9px 20px; font-size: 0.9rem; font-weight: 600; } .mco-modal .btn-primary:hover { background: var(--myco-primary-hover); border-color: var(--myco-primary-hover); } .mco-modal .modal-close-x { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 1.4rem; color: #9ca3af; cursor: pointer; line-height: 1; } .mco-modal .modal-close-x:hover { color: var(--myco-text); }