/* ============================================================ Melon Toolbox — Global Styles Tailwind handles most utility work; this file covers custom components and anything Tailwind can't do inline. Environment-aware accent: green (prod) / orange (UAT). Set via data-env="prod|uat" on . ============================================================ */ /* ── Environment Palette ──────────────────────────────────── */ body[data-env="prod"] { --accent: #16a34a; --accent-dark: #14532d; --accent-light: #86efac; --accent-bg: #dcfce7; --accent-bg-subtle: #f0fdf4; --accent-hover-shadow: rgba(22,163,74,.15); --accent-focus-ring: rgba(22,163,74,.12); } body[data-env="uat"] { --accent: #FF6B35; --accent-dark: #c2410c; --accent-light: #fdba74; --accent-bg: #ffedd5; --accent-bg-subtle: #fff7ed; --accent-hover-shadow: rgba(255,107,53,.15); --accent-focus-ring: rgba(255,107,53,.12); } /* Fallback if data-env is missing */ body:not([data-env]) { --accent: #16a34a; --accent-dark: #14532d; --accent-light: #86efac; --accent-bg: #dcfce7; --accent-bg-subtle: #f0fdf4; --accent-hover-shadow: rgba(22,163,74,.15); --accent-focus-ring: rgba(22,163,74,.12); } /* ── Base ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; padding-bottom: 60px; /* space above fixed footer */ background: var(--accent-bg-subtle); } /* ── Header ───────────────────────────────────────────────── */ .tb-header { background: #ffffff; border-top: 4px solid var(--accent); border-bottom: 1px solid #e5e7eb; box-shadow: 0 1px 4px rgba(0,0,0,.06); position: sticky; top: 0; z-index: 50; } .tb-header-inner { max-width: 1280px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .tb-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .tb-logo { height: 36px; width: auto; } .tb-wordmark { font-size: 18px; font-weight: 700; color: var(--accent); letter-spacing: -0.3px; } /* Environment badge */ .tb-env-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #ffffff; background: var(--accent); margin-left: 4px; vertical-align: middle; } .tb-header-right { display: flex; align-items: center; gap: 12px; } .tb-agent { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tb-role-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } .tb-agent-email { font-size: 13px; color: #6b7280; } .tb-logout { font-size: 13px; font-weight: 600; color: #dc2626; text-decoration: none; padding: 4px 12px; border: 1px solid #fca5a5; border-radius: 6px; transition: background .15s, color .15s; } .tb-logout:hover { background: #dc2626; color: #ffffff; border-color: #dc2626; } .tb-subnav { max-width: 1280px; margin: 0 auto; padding: 6px 24px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--accent-bg-subtle); background: #f9fafb; font-size: 13px; } .tb-subnav-link { color: var(--accent); text-decoration: none; font-weight: 500; } .tb-subnav-link:hover { text-decoration: underline; } .tb-subnav-link.active { color: #6b7280; pointer-events: none; } .tb-subnav-sep { color: #d1d5db; } .tb-subnav-current { color: #374151; font-weight: 600; } /* ── Footer ───────────────────────────────────────────────── */ .tb-footer { position: fixed; bottom: 0; left: 0; right: 0; background: #ffffff; border-top: 1px solid #e5e7eb; padding: 10px 24px; z-index: 40; } .tb-footer-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: #9ca3af; } .tb-footer-link { color: var(--accent); text-decoration: none; } .tb-footer-link:hover { text-decoration: underline; } .tb-footer-sep { color: #d1d5db; } .tb-footer-version { font-weight: 600; color: #d1d5db; } /* ── Page wrapper ─────────────────────────────────────────── */ .tb-page { max-width: 1280px; margin: 0 auto; padding: 32px 24px; } .tb-page-narrow { max-width: 600px; margin: 0 auto; padding: 48px 24px; } /* ── Alerts — stark and bold ──────────────────────────────── */ .alert { padding: 14px 18px; border-radius: 6px; font-weight: 700; font-size: 14px; margin-bottom: 20px; display: flex; align-items: flex-start; gap: 10px; } .alert-error { background: #dc2626; color: #ffffff; border-left: 5px solid #991b1b; } .alert-warning { background: #d97706; color: #ffffff; border-left: 5px solid #92400e; } .alert-success { background: #16a34a; color: #ffffff; border-left: 5px solid #14532d; } .alert-info { background: #2563eb; color: #ffffff; border-left: 5px solid #1e40af; } .alert-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; } /* ── Card ─────────────────────────────────────────────────── */ .tb-card { background: #ffffff; border-radius: 10px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 24px; } /* ── Tool groups on dashboard ─────────────────────────────── */ .tool-group { margin-bottom: 36px; } .tool-group-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .tool-group-bar { width: 4px; height: 28px; border-radius: 2px; flex-shrink: 0; } .tool-group-title { font-size: 17px; font-weight: 700; color: #111827; } .tool-group-subtitle { font-size: 12px; color: #9ca3af; margin-top: 2px; } /* Group accent colours — MM uses the env accent, others stay fixed */ .group-mm .tool-group-bar { background: var(--accent); } .group-mb .tool-group-bar { background: #2563eb; } .group-mgr .tool-group-bar { background: #7c3aed; } .group-adm .tool-group-bar { background: #374151; } /* ── Tool cards ───────────────────────────────────────────── */ .tool-card-wrap { position: relative; } .tool-help-btn { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: #e5e7eb; color: #6b7280; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-decoration: none; z-index: 2; transition: background .15s, color .15s; line-height: 1; } .tool-help-btn:hover { background: var(--accent); color: #fff; } .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .tool-card { display: flex; align-items: center; gap: 14px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px 18px; text-decoration: none; color: #111827; transition: box-shadow .15s, transform .15s, border-color .15s; cursor: pointer; } .tool-card:hover { box-shadow: 0 4px 14px var(--accent-hover-shadow); border-color: var(--accent-light); transform: translateY(-2px); } .tool-card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } /* icon bg per group — MM uses env accent bg, others stay fixed */ .group-mm .tool-card-icon { background: var(--accent-bg); } .group-mb .tool-card-icon { background: #dbeafe; } .group-mgr .tool-card-icon { background: #ede9fe; } .group-adm .tool-card-icon { background: #f3f4f6; } .tool-card-body { flex: 1; min-width: 0; } .tool-card-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tool-card-desc { font-size: 12px; color: #6b7280; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tool-card-arrow { color: #d1d5db; font-size: 16px; flex-shrink: 0; transition: color .15s, transform .15s; } .tool-card:hover .tool-card-arrow { color: var(--accent); transform: translateX(3px); } /* Disabled / coming soon */ .tool-card.disabled { opacity: .55; cursor: default; pointer-events: none; } .tool-card-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 6px; border-radius: 4px; background: #fef9c3; color: #854d0e; margin-left: 6px; flex-shrink: 0; } /* ── Form elements ────────────────────────────────────────── */ .form-label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; } .form-input, .form-select { width: 100%; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 7px; font-size: 14px; color: #111827; background: #ffffff; transition: border-color .15s, box-shadow .15s; outline: none; } .form-input:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-focus-ring); } /* ── Buttons ──────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 20px; border-radius: 7px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: opacity .15s, transform .1s; text-decoration: none; } .btn:active { transform: scale(.98); } .btn-primary { background: var(--accent); color: #ffffff; } .btn-primary:hover { opacity: .9; } .btn-danger { background: #dc2626; color: #ffffff; } .btn-danger:hover { opacity: .9; } .btn-secondary { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; } .btn-secondary:hover { background: #e5e7eb; } .btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 5px; } .btn-outline-danger { background: transparent; color: #dc2626; border: 1px solid #fca5a5; border-radius: 5px; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; } .btn-outline-danger:hover { background: #dc2626; color: #ffffff; border-color: #dc2626; } /* ── Login card ───────────────────────────────────────────── */ .login-card { background: #ffffff; border-radius: 14px; box-shadow: 0 4px 24px rgba(0,0,0,.08); padding: 40px; border-top: 4px solid var(--accent); } .login-logo { display: block; max-width: 180px; margin: 0 auto 24px; } .login-title { text-align: center; font-size: 22px; font-weight: 700; color: #111827; margin-bottom: 6px; } .login-subtitle { text-align: center; font-size: 14px; color: #6b7280; margin-bottom: 28px; } /* ── Access denied ────────────────────────────────────────── */ .access-denied-card { background: #ffffff; border-radius: 12px; border: 2px solid #fca5a5; padding: 40px; text-align: center; max-width: 480px; margin: 60px auto; } .access-denied-icon { font-size: 48px; margin-bottom: 16px; } .access-denied-title { font-size: 22px; font-weight: 700; color: #dc2626; margin-bottom: 8px; } .access-denied-text { font-size: 14px; color: #6b7280; line-height: 1.6; } /* ── User management table ────────────────────────────────── */ .user-pill { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 7px; padding: 10px 12px; margin-bottom: 6px; } .user-pill-email { font-size: 13px; color: #374151; word-break: break-all; flex: 1; } .user-pill-actions { display: flex; gap: 6px; flex-shrink: 0; } /* ── Modal ────────────────────────────────────────────────── */ .tb-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 100; align-items: center; justify-content: center; } .tb-modal-overlay.open { display: flex; } .tb-modal { background: #ffffff; border-radius: 12px; padding: 28px; width: 100%; max-width: 420px; box-shadow: 0 8px 32px rgba(0,0,0,.18); } .tb-modal-title { font-size: 17px; font-weight: 700; color: #111827; margin-bottom: 20px; } /* ── Shared inline-style replacements ─────────────────────── */ /* Wizard step indicators */ .step-dot-active { background: var(--accent); } .step-dot-inactive { background: #e5e7eb; } .step-line-active { background: var(--accent); } .step-line-inactive { background: #e5e7eb; } /* Accent color for inline values, links, actions */ .text-accent { color: var(--accent) !important; } .text-accent-dark { color: var(--accent-dark) !important; } .bg-accent { background: var(--accent) !important; } .bg-accent-bg { background: var(--accent-bg) !important; } .border-accent { border-color: var(--accent) !important; } .accent-radio { accent-color: var(--accent); } .shadow-accent { box-shadow: 0 0 0 2px var(--accent); } /* Stat card value accent */ .ic-value-accent { color: var(--accent); } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 640px) { .tb-header-inner { padding: 10px 16px; } .tb-wordmark { display: none; } .tb-env-badge { display: none; } .tb-agent-email { display: none; } .tb-page { padding: 20px 16px; } .tool-grid { grid-template-columns: 1fr; } } /* ── Scrollbar ────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }