/* ========================================================================== MACRY.CC — DESIGN SYSTEM (external, loaded LAST on every page type) Purpose: kill the "AI-default" rounded-box / soft-shadow look across the FULL component inventory (not just .card). Loaded after EasyAdmin's bundle + the macry inline styles, with !important, so it wins regardless of source order or EA's external CSS. Class-level selectors (not body.ea-gated) so it also covers the customer panel whose has no .ea class. Reversible: delete this file + the three includes. Tokens are duplicated here (not relying on the inline block) so this file is self-contained and curl-verifiable on its own. ========================================================================== */ :root, body { --ds-radius: 3px; /* crisp corners on rectangular surfaces */ --ds-radius-pill: 999px; /* intentional pills/avatars only */ --ds-border: rgba(255, 255, 255, 0.09); --ds-border-strong: rgba(255, 255, 255, 0.16); --ds-shadow-overlay: 0 8px 28px rgba(0, 0, 0, 0.55); --ds-space-xs: 6px; --ds-space-sm: 12px; --ds-space-md: 16px; --ds-space-lg: 24px; } body.ea-light-scheme { --ds-border: rgba(0, 0, 0, 0.10); --ds-border-strong: rgba(0, 0, 0, 0.17); --ds-shadow-overlay: 0 8px 28px rgba(0, 0, 0, 0.18); } /* -------------------------------------------------------------------------- 1) CRISP RADIUS — rectangular surfaces across admin + customer + auth -------------------------------------------------------------------------- */ .card, .content-panel, .form-panel, .macry-acct-card, .macry-acct-hero, .le-props, .dashboard-header, .macry-stat, .macry-stat-ico, .btn, .btn-group, .btn-group > .btn, .form-control, .form-select, .form-widget, .input-group, .input-group-text, textarea, textarea.form-control, input.form-control, .ts-control, .ts-dropdown, .dropdown-menu, .alert, .list-group, .list-group-item, .modal-content, .table-responsive, table.datagrid, .page-link, .pagination, .le-tfilter, .macry-avatar-opt { border-radius: var(--ds-radius) !important; } /* detail pages: beat the higher-specificity inline `body.ea-detail … .card{16px}` */ body.ea-detail .card, body.ea-detail:not(.ea-detail-Ticket) .card { border-radius: var(--ds-radius) !important; } /* nav tabs: crisp top corners only (tabs read as tabs, not blobs) */ .nav-tabs .nav-link, .nav-tabs-custom .nav-link, .nav-link { border-radius: var(--ds-radius) var(--ds-radius) 0 0 !important; } /* generic badges crisp; pagination first/last keep the row crisp */ .badge { border-radius: var(--ds-radius) !important; } /* -------------------------------------------------------------------------- 2) PRESERVE intentionally-round things (must NOT be flattened) -------------------------------------------------------------------------- */ .macry-avatar, .user-avatar, .macry-acct-dot, .rounded-circle, .fa-stack, .le-pill, .badge.badge-pill, .badge-pill, .rounded-pill, .macry-stat:hover, .spinner-border, .form-check-input[type="radio"], .form-switch .form-check-input { border-radius: var(--ds-radius-pill) !important; } /* keep the online dot + circular avatars perfectly round */ .macry-avatar.macry-avatar-initials, .macry-acct-avatar-wrap .macry-avatar { border-radius: 22% !important; } .macry-acct-dot, .rounded-circle { border-radius: 50% !important; } /* -------------------------------------------------------------------------- 3) BORDER-DELINEATED PANELS — remove soft drop-shadows, use 1px borders -------------------------------------------------------------------------- */ .card, .content-panel, .form-panel, .macry-acct-card, .macry-acct-hero, .macry-stat, .dashboard-header, .le-props, .list-group-item { box-shadow: none !important; } .card, .content-panel, .form-panel, .macry-acct-card, .dashboard-header, .le-props, body.ea-detail:not(.ea-detail-Ticket) .card { border: 1px solid var(--ds-border) !important; } .macry-stat { border: 1px solid var(--ds-border) !important; } .macry-stat:hover { transform: none !important; box-shadow: none !important; border-color: var(--ds-border-strong) !important; } /* subtle depth ONLY on true overlays */ .dropdown-menu, .modal-content { box-shadow: var(--ds-shadow-overlay) !important; border: 1px solid var(--ds-border-strong) !important; } /* -------------------------------------------------------------------------- 4) DENSE, CRISP WHMCS-GRADE TABLES (EA datagrid + plain tables in panels) -------------------------------------------------------------------------- */ table.datagrid { border: 1px solid var(--ds-border) !important; } table.datagrid thead th { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; border-bottom: 1px solid var(--ds-border-strong) !important; } table.datagrid td, table.datagrid th { padding-top: 9px !important; padding-bottom: 9px !important; border-color: var(--ds-border) !important; } /* EA rounds the first/last cells of each row — square them for a grid look */ table.datagrid:not(.datagrid-empty) tbody tr td:first-of-type, table.datagrid:not(.datagrid-empty) tbody tr td:last-of-type, table.datagrid:not(.datagrid-empty) tbody tr, table.datagrid.with-rounded-top thead tr:first-child th:first-child, table.datagrid.with-rounded-top thead tr:first-child th:last-child { border-radius: 0 !important; } /* -------------------------------------------------------------------------- 5) FORM CONTROLS — crisp, consistent -------------------------------------------------------------------------- */ .form-control, .form-select, .form-widget .form-control, .ts-control { border-radius: var(--ds-radius) !important; } /* -------------------------------------------------------------------------- 6) BUTTONS — crisp; keep accessible focus ring, drop resting shadow -------------------------------------------------------------------------- */ .btn { border-radius: var(--ds-radius) !important; box-shadow: none !important; font-weight: 600; } .btn:focus-visible, .btn-check:focus-visible + .btn { box-shadow: 0 0 0 0.2rem rgba(255, 59, 77, 0.35) !important; }