/* AROMA CENTRAL THEME TOKENS START */ /* المصدر الوحيد لألوان النظام بالكامل. تم استخراجه من محرك الثيمات الأصلي في الهيدر. */ /* ========================================================= متغيرات الثيمات ========================================================= */ /* ========================================================= AROMA ERP PREMIUM THEMES Original numeric engine: 0 to 9 ========================================================= */ /* 0 — Executive Blue */ :root, /* 1 — Midnight Dark */ /* 2 — Deep Ocean */ /* 3 — Forest Executive */ /* 4 — Premium Gold */ /* 5 — Burgundy */ /* 6 — Medical Cyan */ /* 7 — Royal Purple */ /* 8 — Graphite */ /* 9 — High Contrast Night */ /* AROMA CENTRAL THEME TOKENS END */ /* ========================================================= AROMA ERP CENTRAL UI SYSTEM One global theme layer for all Django HTML pages. ========================================================= */ /* --------------------------------------------------------- GLOBAL DESIGN TOKENS --------------------------------------------------------- */ :root { --aroma-primary: #2f6f9f; --aroma-primary-dark: #12324a; --aroma-secondary: #1e567e; --aroma-page-bg: #f3f7fa; --aroma-card-bg: #ffffff; --aroma-text: #20313d; --aroma-heading: #122634; --aroma-muted: #617480; --aroma-border: #d4e0e7; --aroma-input-bg: #ffffff; --aroma-table-head: #e3eef5; --aroma-table-head-text: #173e59; --aroma-shadow: rgba(21, 62, 89, .17); --ui-page: var(--aroma-page-bg); --ui-surface: var(--aroma-card-bg); --ui-text: var(--aroma-text); --ui-heading: var(--aroma-heading); --ui-muted: var(--aroma-muted); --ui-border: var(--aroma-border); --ui-input: var(--aroma-input-bg); --ui-table-head: var(--aroma-table-head); --ui-table-head-text: var(--aroma-table-head-text); --ui-primary: var(--aroma-primary); --ui-secondary: var(--aroma-secondary); --ui-primary-dark: var(--aroma-primary-dark); --ui-shadow: var(--aroma-shadow); --ui-success: #16865e; --ui-success-soft: #e9f9f1; --ui-warning: #c66e0a; --ui-warning-soft: #fff5e6; --ui-danger: #c94444; --ui-danger-soft: #fff0f0; --ui-info: #087b91; --ui-info-soft: #e8f8fa; --ui-radius-xl: 18px; --ui-radius: 14px; --ui-radius-sm: 9px; } /* Midnight Dark */ /* Deep Ocean */ /* Forest */ /* Premium Gold */ /* Burgundy */ /* Medical Cyan */ /* Royal Purple */ /* Graphite */ /* High Contrast */ /* --------------------------------------------------------- DOCUMENT --------------------------------------------------------- */ html, body { min-height: 100%; background: var(--ui-page) !important; } body { color: var(--ui-text) !important; transition: background-color .2s ease, color .2s ease; } body, button, input, select, textarea { font-family: Cairo, Tahoma, Arial, sans-serif; } main, section, article, aside, nav, header, footer, div { border-color: var(--ui-border); } h1, h2, h3, h4, h5, h6 { color: var(--ui-heading) !important; } p, small, .helptext, .text-muted, .muted { color: var(--ui-muted); } /* --------------------------------------------------------- ALL MAIN PAGE CONTAINERS --------------------------------------------------------- */ :is( .a-page, .b-page, .i-page, .m-page, .mrp-page, .p-page, .q-page, .r-page, .s-page, .x-page, .aroma-dashboard, .crm, [class$="-page"], [class$="-dashboard"] ) { color: var(--ui-text) !important; } /* --------------------------------------------------------- ALL CARDS AND SURFACES --------------------------------------------------------- */ :is( .a-card, .b-card, .i-card, .m-card, .mrp-card, .p-card, .q-card, .r-card, .s-card, .card, .kpi, .quick-card, .product-card, .exchange-card, .finance-box, .unlock-box, .dashboard-section, .account, .i-stock, .r-report-link, .panel, .widget, .box, [class$="-card"], [class$="-panel"], [class$="-widget"], [class$="-box"] ) { background: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; box-shadow: 0 8px 24px var(--ui-shadow) !important; transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .17s ease; } :is( .quick-card, .product-card, .r-report-link, [class$="-card"] ):hover { border-color: var(--ui-primary) !important; } /* --------------------------------------------------------- HERO AND HEADERS --------------------------------------------------------- */ .dashboard-hero, .hero, [class$="-hero"] { color: #ffffff !important; background: radial-gradient( circle at 12% 0%, rgba(255,255,255,.15), transparent 34% ), linear-gradient( 135deg, var(--ui-primary-dark), var(--ui-secondary) 58%, var(--ui-primary) ) !important; border-color: color-mix( in srgb, var(--ui-primary) 65%, white 35% ) !important; box-shadow: 0 16px 40px var(--ui-shadow) !important; } :is( .dashboard-hero, .hero, [class$="-hero"] ) :is( h1, h2, h3, p, small, strong ) { color: #ffffff !important; } /* --------------------------------------------------------- TABLES --------------------------------------------------------- */ table { background: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; } thead, thead tr, thead th { background: var(--ui-table-head) !important; color: var(--ui-table-head-text) !important; } th, td { border-color: var(--ui-border) !important; } tbody tr, tbody td { background: var(--ui-surface) !important; color: var(--ui-text) !important; } tbody tr:hover, tbody tr:hover td { background: color-mix( in srgb, var(--ui-primary) 7%, var(--ui-surface) 93% ) !important; } tfoot, tfoot td, .r-total { background: var(--ui-table-head) !important; color: var(--ui-table-head-text) !important; } /* --------------------------------------------------------- FORMS --------------------------------------------------------- */ input:not([type="checkbox"]):not([type="radio"]), select, textarea { background: var(--ui-input) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; caret-color: var(--ui-primary); } input::placeholder, textarea::placeholder { color: var(--ui-muted) !important; opacity: .82; } input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--ui-primary) !important; box-shadow: 0 0 0 3px color-mix( in srgb, var(--ui-primary) 23%, transparent ) !important; } option { background: var(--ui-input); color: var(--ui-text); } label, legend { color: var(--ui-heading) !important; } /* --------------------------------------------------------- BUTTONS --------------------------------------------------------- */ :is( .button, .btn, button[class*="button"], button[class*="btn"] ) { border-radius: var(--ui-radius-sm) !important; transition: filter .17s ease, transform .17s ease, box-shadow .17s ease; } :is( .button, .btn-primary, .button-blue ) { color: #ffffff !important; background: linear-gradient( 135deg, var(--ui-secondary), var(--ui-primary) ) !important; border-color: var(--ui-primary) !important; } .button-green, .btn-success { color: #ffffff !important; background: var(--ui-success) !important; border-color: var(--ui-success) !important; } .button-gray, .btn-secondary { color: #ffffff !important; background: var(--ui-muted) !important; border-color: var(--ui-muted) !important; } .btn-danger, .button-red, .delete, .danger { color: #ffffff !important; background: var(--ui-danger) !important; border-color: var(--ui-danger) !important; } :is( .button, .btn, button[class*="button"], button[class*="btn"] ):hover { filter: brightness(1.08); transform: translateY(-1px); } /* --------------------------------------------------------- LINKS --------------------------------------------------------- */ main a:not(.button):not(.btn), section a:not(.button):not(.btn), td a { color: var(--ui-primary); } main a:not(.button):not(.btn):hover, section a:not(.button):not(.btn):hover, td a:hover { color: var(--ui-secondary); } /* --------------------------------------------------------- STATUS AND MESSAGES --------------------------------------------------------- */ .messages > *, .msg, .alert, .notification { background: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; } :is( .success, .msg-success, .alert-success ) { background: var(--ui-success-soft) !important; color: var(--ui-success) !important; border-color: var(--ui-success) !important; } :is( .warning, .msg-warning, .alert-warning ) { background: var(--ui-warning-soft) !important; color: var(--ui-warning) !important; border-color: var(--ui-warning) !important; } :is( .error, .msg-error, .alert-error, .alert-danger, .low ) { background: var(--ui-danger-soft) !important; color: var(--ui-danger) !important; border-color: var(--ui-danger) !important; } :is( .info, .msg-info, .alert-info ) { background: var(--ui-info-soft) !important; color: var(--ui-info) !important; border-color: var(--ui-info) !important; } /* --------------------------------------------------------- DASHBOARD QUICK ICONS --------------------------------------------------------- */ .quick-icon, .icon, [class$="-icon"] { background: var(--ui-info-soft) !important; color: var(--ui-info) !important; border-color: var(--ui-border) !important; } .quick-green :is(.quick-icon, .icon) { background: var(--ui-success-soft) !important; color: var(--ui-success) !important; } .quick-orange :is(.quick-icon, .icon) { background: var(--ui-warning-soft) !important; color: var(--ui-warning) !important; } .quick-red :is(.quick-icon, .icon) { background: var(--ui-danger-soft) !important; color: var(--ui-danger) !important; } .quick-cyan :is(.quick-icon, .icon) { background: var(--ui-info-soft) !important; color: var(--ui-info) !important; } .quick-purple :is(.quick-icon, .icon) { background: color-mix( in srgb, var(--ui-primary) 14%, var(--ui-surface) 86% ) !important; color: var(--ui-primary) !important; } /* --------------------------------------------------------- CHARTS --------------------------------------------------------- */ .chart, .bar-wrap { background: var(--ui-surface) !important; color: var(--ui-text) !important; } .bar { background: linear-gradient( 180deg, var(--ui-primary), var(--ui-secondary) ) !important; } /* --------------------------------------------------------- GLOBAL SVG ICONS --------------------------------------------------------- */ .aroma-ui-icon { width: 1.22em; height: 1.22em; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--ui-primary); vertical-align: -.18em; } .aroma-ui-icon svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } :is( a, button, .button, .btn ) > .aroma-ui-icon { margin-inline-end: .35rem; } .aroma-system-header .aroma-ui-icon { color: currentColor; } :is( .button, .btn-primary, .button-blue, .button-green, .btn-success, .button-gray, .btn-secondary, .btn-danger ) .aroma-ui-icon { color: currentColor !important; } .aroma-ui-icon--success { color: var(--ui-success) !important; } .aroma-ui-icon--warning { color: var(--ui-warning) !important; } .aroma-ui-icon--danger { color: var(--ui-danger) !important; } .aroma-ui-icon--info { color: var(--ui-info) !important; } /* --------------------------------------------------------- HIGH CONTRAST ACCESSIBILITY --------------------------------------------------------- */ html[data-aroma-theme="9"] body { font-size: 17px; } html[data-aroma-theme="9"] :is( .card, [class$="-card"], input, select, textarea, table, th, td, .button, .btn ) { border-width: 2px !important; } html[data-aroma-theme="9"] :is( h1, h2, h3, th, label, button, .button, .btn ) { font-weight: 800 !important; } html[data-aroma-theme="9"] :focus-visible { outline: 3px solid #ffff00 !important; outline-offset: 3px; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media (max-width: 760px) { :is( .card, [class$="-card"] ) { border-radius: 11px !important; } :is( .button, .btn, button ) { min-height: 42px; } } /* --------------------------------------------------------- REDUCED MOTION --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; } } /* AROMA EXTRA PREMIUM THEMES START */ /* ========================================================= 10 — AURORA NIGHT ليلي بنفسجي وأزرق ========================================================= */ /* ========================================================= 11 — EMERALD GLASS أخضر زمردي فاخر ========================================================= */ /* ========================================================= 12 — COPPER SUNSET نحاسي دافئ واحترافي ========================================================= */ /* ========================================================= 13 — ARCTIC ICE فاتح ونظيف جدًا ========================================================= */ /* ========================================================= 14 — ROSE QUARTZ وردي هادئ وليس صارخًا ========================================================= */ /* ========================================================= 15 — SLATE PRO رمادي داكن مريح للعمل الطويل ========================================================= */ /* A little stronger contrast in the new dark themes */ html[data-aroma-theme="10"] :is( .card, [class$="-card"], table, input, select, textarea ), html[data-aroma-theme="15"] :is( .card, [class$="-card"], table, input, select, textarea ) { border-color: var(--aroma-border) !important; } /* AROMA EXTRA PREMIUM THEMES END */ /* AROMA PROFILE IMAGE FIX START */ /* Profile image button */ .aroma-profile-button { min-height: 46px !important; display: inline-flex !important; align-items: center !important; gap: 9px !important; overflow: visible !important; } /* Small profile image in the header */ .aroma-profile-image { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; max-width: 38px !important; max-height: 38px !important; display: block !important; flex: 0 0 38px !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; object-position: center center !important; border-radius: 50% !important; background: color-mix( in srgb, var(--aroma-card-bg, #ffffff) 88%, var(--aroma-primary, #2f6f9f) 12% ) !important; border: 2px solid rgba(255,255,255,.72) !important; box-shadow: 0 0 0 2px rgba(255,255,255,.17), 0 5px 14px rgba(0,0,0,.20) !important; overflow: hidden !important; } /* Large image inside profile dropdown */ .aroma-profile-large-image { width: 74px !important; height: 74px !important; min-width: 74px !important; min-height: 74px !important; max-width: 74px !important; max-height: 74px !important; display: block !important; flex: 0 0 74px !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; object-position: center center !important; border-radius: 50% !important; background: color-mix( in srgb, var(--aroma-card-bg, #ffffff) 88%, var(--aroma-primary, #2f6f9f) 12% ) !important; border: 3px solid color-mix( in srgb, var(--aroma-primary, #2f6f9f) 35%, white 65% ) !important; box-shadow: 0 8px 22px rgba(0,0,0,.22) !important; overflow: hidden !important; } /* Placeholder when no valid image exists */ .aroma-profile-placeholder, .aroma-profile-large-placeholder, .aroma-profile-fallback { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; border-radius: 50% !important; font-weight: 800 !important; line-height: 1 !important; color: var(--aroma-header-text, #ffffff) !important; background: linear-gradient( 135deg, var(--aroma-secondary, #1e567e), var(--aroma-primary, #2f6f9f) ) !important; border: 2px solid rgba(255,255,255,.55) !important; box-shadow: 0 5px 14px rgba(0,0,0,.20) !important; overflow: hidden !important; } .aroma-profile-placeholder, .aroma-profile-fallback--small { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; font-size: 16px !important; } .aroma-profile-large-placeholder, .aroma-profile-fallback--large { width: 74px !important; height: 74px !important; min-width: 74px !important; min-height: 74px !important; font-size: 27px !important; } /* Broken images remain hidden */ .aroma-profile-image.aroma-image-error, .aroma-profile-large-image.aroma-image-error { display: none !important; } /* Prevent user name from breaking the header */ .aroma-profile-name { max-width: 145px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* Mobile sizes */ @media (max-width: 760px) { .aroma-profile-image, .aroma-profile-placeholder, .aroma-profile-fallback--small { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; max-width: 36px !important; max-height: 36px !important; flex-basis: 36px !important; } .aroma-profile-name { max-width: 95px !important; } } /* High contrast */ html[data-aroma-theme="9"] .aroma-profile-image, html[data-aroma-theme="9"] .aroma-profile-large-image, html[data-aroma-theme="9"] .aroma-profile-placeholder, html[data-aroma-theme="9"] .aroma-profile-large-placeholder, html[data-aroma-theme="9"] .aroma-profile-fallback { border-color: #ffff00 !important; border-width: 3px !important; } /* AROMA PROFILE IMAGE FIX END */ /* AROMA COMPONENT SYSTEM PHASE 2 START */ /* ========================================================= AROMA ERP — CENTRAL COMPONENT SYSTEM Shared components for all modules. ========================================================= */ /* --------------------------------------------------------- 1. COMPONENT TOKENS --------------------------------------------------------- */ :root { --ui-page: var(--aroma-page-bg, #f3f7fa); --ui-surface: var(--aroma-card-bg, #ffffff); --ui-surface-soft: color-mix( in srgb, var(--aroma-card-bg, #ffffff) 94%, var(--aroma-primary, #2f6f9f) 6% ); --ui-surface-hover: color-mix( in srgb, var(--aroma-card-bg, #ffffff) 89%, var(--aroma-primary, #2f6f9f) 11% ); --ui-text: var(--aroma-text, #20313d); --ui-heading: var(--aroma-heading, #122634); --ui-muted: var(--aroma-muted, #617480); --ui-border: var(--aroma-border, #d4e0e7); --ui-input: var(--aroma-input-bg, #ffffff); --ui-primary: var(--aroma-primary, #2f6f9f); --ui-secondary: var(--aroma-secondary, #1e567e); --ui-primary-dark: var(--aroma-primary-dark, #12324a); --ui-table-head: var(--aroma-table-head, #e3eef5); --ui-table-head-text: var(--aroma-table-head-text, #173e59); --ui-shadow-color: var(--aroma-shadow, rgba(21,62,89,.17)); --ui-success: #198754; --ui-success-soft: #e8f7ef; --ui-warning: #b86b12; --ui-warning-soft: #fff4e3; --ui-danger: #c64444; --ui-danger-soft: #fff0f0; --ui-info: #197d96; --ui-info-soft: #e5f6fa; --ui-radius-xs: 7px; --ui-radius-sm: 10px; --ui-radius: 14px; --ui-radius-lg: 18px; --ui-shadow-sm: 0 3px 10px color-mix( in srgb, var(--ui-shadow-color) 58%, transparent ); --ui-shadow: 0 9px 28px color-mix( in srgb, var(--ui-shadow-color) 82%, transparent ); --ui-focus-ring: 0 0 0 3px color-mix( in srgb, var(--ui-primary) 24%, transparent ); --ui-transition: 160ms ease; } /* Dark semantic colors */ html[data-aroma-theme="1"], html[data-aroma-theme="9"], html[data-aroma-theme="10"], html[data-aroma-theme="15"] { --ui-success: #58d58e; --ui-success-soft: #143021; --ui-warning: #f2c04e; --ui-warning-soft: #342a13; --ui-danger: #ef7a84; --ui-danger-soft: #351b21; --ui-info: #73d7ed; --ui-info-soft: #15313a; } /* --------------------------------------------------------- 2. DOCUMENT AND TYPOGRAPHY --------------------------------------------------------- */ html { background: var(--ui-page) !important; } body { background: var(--ui-page) !important; color: var(--ui-text) !important; transition: background-color var(--ui-transition), color var(--ui-transition); } body, button, input, select, textarea { font-family: Cairo, Tahoma, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { color: var(--ui-heading) !important; } p, small, .helptext, .muted, .text-muted, .description, .subtitle { color: var(--ui-muted); } hr { border-color: var(--ui-border) !important; } /* --------------------------------------------------------- 3. PAGE CONTAINERS --------------------------------------------------------- */ :is( .aroma-dashboard, .a-page, .b-page, .i-page, .m-page, .mrp-page, .p-page, .q-page, .r-page, .s-page, .x-page, .crm, [class$="-page"], [class$="-dashboard"] ) { color: var(--ui-text) !important; } /* --------------------------------------------------------- 4. TOOLBARS AND PAGE HEADERS --------------------------------------------------------- */ :is( .a-toolbar, .b-toolbar, .i-toolbar, .m-toolbar, .mrp-toolbar, .p-toolbar, .q-toolbar, .r-toolbar, .s-toolbar, .x-toolbar, .toolbar, .page-toolbar, .section-toolbar ) { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--ui-text) !important; } :is( .a-toolbar, .b-toolbar, .i-toolbar, .m-toolbar, .mrp-toolbar, .p-toolbar, .q-toolbar, .r-toolbar, .s-toolbar, .x-toolbar, .toolbar ) h1 { margin: 0; color: var(--ui-heading) !important; } :is( .a-toolbar, .b-toolbar, .i-toolbar, .m-toolbar, .mrp-toolbar, .p-toolbar, .q-toolbar, .r-toolbar, .s-toolbar, .x-toolbar, .toolbar ) p { margin: 5px 0 0; color: var(--ui-muted) !important; } /* --------------------------------------------------------- 5. CARDS, PANELS AND SURFACES --------------------------------------------------------- */ :is( .a-card, .b-card, .i-card, .m-card, .mrp-card, .p-card, .q-card, .r-card, .s-card, .card, .panel, .box, .widget, .quick-card, .product-card, .stat-card, .exchange-card, .finance-box, .account, .kpi, .unlock-box, .dashboard-section, .r-report-link, .i-stock, [class$="-card"], [class$="-panel"], [class$="-widget"] ) { background: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; border-radius: var(--ui-radius) !important; box-shadow: var(--ui-shadow-sm) !important; transition: background-color var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition), transform var(--ui-transition); } :is( .quick-card, .product-card, .r-report-link, .account, [class$="-card"] ):hover { border-color: color-mix( in srgb, var(--ui-primary) 58%, var(--ui-border) 42% ) !important; box-shadow: var(--ui-shadow) !important; } :is( .quick-card, .product-card, .r-report-link ):hover { transform: translateY(-2px); } :is( .card, [class$="-card"] ) :is( h2, h3, h4, strong ) { color: var(--ui-heading) !important; } :is( .card, [class$="-card"] ) :is( p, small ) { color: var(--ui-muted); } /* --------------------------------------------------------- 6. HERO SECTIONS --------------------------------------------------------- */ :is( .dashboard-hero, .hero, [class$="-hero"] ) { color: #ffffff !important; background: radial-gradient( circle at 12% 0%, rgba(255,255,255,.16), transparent 35% ), linear-gradient( 135deg, var(--ui-primary-dark), var(--ui-secondary) 56%, var(--ui-primary) ) !important; border-color: color-mix( in srgb, var(--ui-primary) 68%, white 32% ) !important; border-radius: var(--ui-radius-lg) !important; box-shadow: 0 16px 42px var(--ui-shadow-color) !important; } :is( .dashboard-hero, .hero, [class$="-hero"] ) :is( h1, h2, h3, p, small, strong, span ) { color: #ffffff !important; } /* --------------------------------------------------------- 7. TABLE WRAPPERS --------------------------------------------------------- */ :is( .a-table-wrap, .b-table-wrap, .i-table-wrap, .m-table-wrap, .mrp-table-wrap, .p-table-wrap, .q-table-wrap, .r-table-wrap, .s-table-wrap, .table-wrap, .table-responsive ) { overflow-x: auto; overflow-y: hidden; border-radius: var(--ui-radius) !important; border: 1px solid var(--ui-border) !important; background: var(--ui-surface) !important; box-shadow: var(--ui-shadow-sm) !important; } /* --------------------------------------------------------- 8. TABLES --------------------------------------------------------- */ table, :is( .a-table, .b-table, .i-table, .m-table, .mrp-table, .p-table, .q-table, .r-table, .s-table ) { width: 100%; background: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; border-collapse: collapse; } thead, thead tr, thead th { background: var(--ui-table-head) !important; color: var(--ui-table-head-text) !important; } th { font-weight: 750; white-space: nowrap; } th, td { padding: 12px 14px; border-color: var(--ui-border) !important; vertical-align: middle; } tbody tr, tbody td { background: var(--ui-surface) !important; color: var(--ui-text) !important; transition: background-color var(--ui-transition); } tbody tr:hover, tbody tr:hover td { background: var(--ui-surface-hover) !important; } tfoot, tfoot tr, tfoot td, .r-total { background: var(--ui-table-head) !important; color: var(--ui-table-head-text) !important; font-weight: 750; } td a:not(.button):not(.btn) { color: var(--ui-primary) !important; font-weight: 650; } td a:not(.button):not(.btn):hover { color: var(--ui-secondary) !important; } /* --------------------------------------------------------- 9. FORMS AND SEARCH BARS --------------------------------------------------------- */ :is( .a-search, .b-search, .i-search, .m-search, .mrp-search, .p-search, .q-search, .r-search, .s-search, .search, .filters, .filter-bar, .form-row ) { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } label, legend { color: var(--ui-heading) !important; font-weight: 650; } input:not( [type="checkbox"] ):not( [type="radio"] ):not( [type="hidden"] ), select, textarea { min-height: 42px; background: var(--ui-input) !important; color: var(--ui-text) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius-sm) !important; padding: 9px 12px; caret-color: var(--ui-primary); transition: border-color var(--ui-transition), box-shadow var(--ui-transition), background-color var(--ui-transition); } textarea { min-height: 100px; resize: vertical; } input::placeholder, textarea::placeholder { color: var(--ui-muted) !important; opacity: .78; } input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--ui-primary) !important; box-shadow: var(--ui-focus-ring) !important; } input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .68; background: var(--ui-surface-soft) !important; } option { background: var(--ui-input); color: var(--ui-text); } input[type="checkbox"], input[type="radio"] { accent-color: var(--ui-primary); } /* Django form errors */ .errorlist { margin: 6px 0; padding: 9px 12px; list-style: none; background: var(--ui-danger-soft) !important; color: var(--ui-danger) !important; border: 1px solid var(--ui-danger) !important; border-radius: var(--ui-radius-sm); } /* --------------------------------------------------------- 10. BUTTONS --------------------------------------------------------- */ :is( .button, .btn, button[class*="button"], button[class*="btn"], input[type="submit"] ) { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 15px; border-radius: var(--ui-radius-sm) !important; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none !important; cursor: pointer; transition: transform var(--ui-transition), filter var(--ui-transition), box-shadow var(--ui-transition), border-color var(--ui-transition); } :is( .button, .button-blue, .btn-primary, input[type="submit"] ) { color: #ffffff !important; background: linear-gradient( 135deg, var(--ui-secondary), var(--ui-primary) ) !important; border: 1px solid var(--ui-primary) !important; box-shadow: 0 5px 14px color-mix( in srgb, var(--ui-primary) 28%, transparent ); } :is( .button, .btn, button[class*="button"], button[class*="btn"], input[type="submit"] ):hover { filter: brightness(1.07); transform: translateY(-1px); } :is( .button, .btn, button[class*="button"], button[class*="btn"], input[type="submit"] ):active { transform: translateY(0); } :is( .button, .btn, button[class*="button"], button[class*="btn"], input[type="submit"] ):focus-visible { outline: none !important; box-shadow: var(--ui-focus-ring) !important; } :is( .button-green, .btn-success ) { color: #ffffff !important; background: var(--ui-success) !important; border-color: var(--ui-success) !important; } :is( .button-red, .btn-danger, .delete-button, .danger-button ) { color: #ffffff !important; background: var(--ui-danger) !important; border-color: var(--ui-danger) !important; } :is( .button-gray, .btn-secondary ) { color: #ffffff !important; background: var(--ui-muted) !important; border-color: var(--ui-muted) !important; } :is( .button-outline, .btn-outline, .btn-outline-primary ) { color: var(--ui-primary) !important; background: transparent !important; border: 1px solid var(--ui-primary) !important; } :is( .button-outline, .btn-outline, .btn-outline-primary ):hover { color: #ffffff !important; background: var(--ui-primary) !important; } /* --------------------------------------------------------- 11. STATUS BADGES --------------------------------------------------------- */ :is( .badge, .status, [class*="badge-"], [class*="status-"] ) { display: inline-flex; align-items: center; justify-content: center; min-height: 27px; padding: 4px 10px; border-radius: 999px; font-size: .86rem; font-weight: 750; border: 1px solid var(--ui-border); } :is( .badge-success, .status-success, .status-paid, .status-completed, .status-approved, .status-active ) { background: var(--ui-success-soft) !important; color: var(--ui-success) !important; border-color: var(--ui-success) !important; } :is( .badge-warning, .status-warning, .status-pending, .status-draft, .status-partial ) { background: var(--ui-warning-soft) !important; color: var(--ui-warning) !important; border-color: var(--ui-warning) !important; } :is( .badge-danger, .status-danger, .status-cancelled, .status-overdue, .status-inactive ) { background: var(--ui-danger-soft) !important; color: var(--ui-danger) !important; border-color: var(--ui-danger) !important; } :is( .badge-info, .status-info, .status-sent, .status-open ) { background: var(--ui-info-soft) !important; color: var(--ui-info) !important; border-color: var(--ui-info) !important; } /* --------------------------------------------------------- 12. MESSAGES AND ALERTS --------------------------------------------------------- */ :is( .messages > *, .message, .msg, .alert, .notification ) { padding: 11px 14px; background: var(--ui-surface) !important; color: var(--ui-text) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius-sm) !important; box-shadow: var(--ui-shadow-sm); } :is( .success, .msg-success, .alert-success, .message.success ) { background: var(--ui-success-soft) !important; color: var(--ui-success) !important; border-color: var(--ui-success) !important; } :is( .warning, .msg-warning, .alert-warning, .message.warning ) { background: var(--ui-warning-soft) !important; color: var(--ui-warning) !important; border-color: var(--ui-warning) !important; } :is( .error, .msg-error, .alert-danger, .alert-error, .message.error ) { background: var(--ui-danger-soft) !important; color: var(--ui-danger) !important; border-color: var(--ui-danger) !important; } :is( .info, .msg-info, .alert-info, .message.info ) { background: var(--ui-info-soft) !important; color: var(--ui-info) !important; border-color: var(--ui-info) !important; } /* --------------------------------------------------------- 13. PAGINATION --------------------------------------------------------- */ :is( .pagination, .b-pagination, .m-pagination, .mrp-pagination, .crm-pagination, [class$="-pagination"] ) { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; margin-top: 18px; } :is( .pagination, [class$="-pagination"] ) a, :is( .pagination, [class$="-pagination"] ) span { min-width: 38px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; background: var(--ui-surface) !important; color: var(--ui-text) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius-sm) !important; text-decoration: none !important; } :is( .pagination, [class$="-pagination"] ) a:hover { color: #ffffff !important; background: var(--ui-primary) !important; border-color: var(--ui-primary) !important; } :is( .pagination, [class$="-pagination"] ) .active, :is( .pagination, [class$="-pagination"] ) .current { color: #ffffff !important; background: var(--ui-primary) !important; border-color: var(--ui-primary) !important; } /* --------------------------------------------------------- 14. EMPTY STATES --------------------------------------------------------- */ :is( .empty-state, .no-data, .no-results ) { padding: 28px 20px; text-align: center; background: var(--ui-surface-soft) !important; color: var(--ui-muted) !important; border: 1px dashed var(--ui-border) !important; border-radius: var(--ui-radius); } /* Empty table row */ tbody tr:only-child td[colspan] { padding: 30px 18px !important; text-align: center; color: var(--ui-muted) !important; } /* --------------------------------------------------------- 15. ICONS --------------------------------------------------------- */ .aroma-ui-icon, .aroma-generated-icon, .aroma-svg-icon { width: 1.2em; height: 1.2em; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--ui-primary); vertical-align: -.17em; } :is( .aroma-ui-icon, .aroma-generated-icon, .aroma-svg-icon ) svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } :is( .button, .btn, button ) :is( .aroma-ui-icon, .aroma-generated-icon, .aroma-svg-icon ) { color: currentColor !important; } /* Icon holders */ :is( .quick-icon, .icon-box, [class$="-icon"] ) { display: inline-flex; align-items: center; justify-content: center; background: var(--ui-info-soft) !important; color: var(--ui-info) !important; border-color: var(--ui-border) !important; border-radius: var(--ui-radius-sm); } /* --------------------------------------------------------- 16. LINKS --------------------------------------------------------- */ main a:not( .button ):not( .btn ), section a:not( .button ):not( .btn ) { color: var(--ui-primary); } main a:not( .button ):not( .btn ):hover, section a:not( .button ):not( .btn ):hover { color: var(--ui-secondary); } /* --------------------------------------------------------- 17. SCROLLBARS --------------------------------------------------------- */ * { scrollbar-width: thin; scrollbar-color: var(--ui-primary) var(--ui-surface-soft); } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: var(--ui-surface-soft); } *::-webkit-scrollbar-thumb { background: color-mix( in srgb, var(--ui-primary) 72%, var(--ui-border) 28% ); border: 2px solid var(--ui-surface-soft); border-radius: 999px; } /* --------------------------------------------------------- 18. HIGH CONTRAST THEME --------------------------------------------------------- */ html[data-aroma-theme="9"] body { font-size: 17px; } html[data-aroma-theme="9"] :is( .card, [class$="-card"], .panel, table, th, td, input, select, textarea, .button, .btn ) { border-width: 2px !important; } html[data-aroma-theme="9"] :focus-visible { outline: 3px solid #ffff00 !important; outline-offset: 3px; } /* --------------------------------------------------------- 19. MOBILE --------------------------------------------------------- */ @media (max-width: 760px) { :is( .a-toolbar, .b-toolbar, .i-toolbar, .m-toolbar, .mrp-toolbar, .p-toolbar, .q-toolbar, .r-toolbar, .s-toolbar, .x-toolbar, .toolbar ) { align-items: stretch; flex-direction: column; } :is( .a-search, .b-search, .i-search, .m-search, .mrp-search, .p-search, .q-search, .r-search, .s-search, .search, .filters, .filter-bar ) { align-items: stretch; flex-direction: column; } :is( .a-search, .b-search, .i-search, .m-search, .mrp-search, .p-search, .q-search, .r-search, .s-search, .search, .filters, .filter-bar ) :is( input, select, textarea, button, .button, .btn ) { width: 100%; } th, td { padding: 10px 11px; } :is( .button, .btn, button[class*="button"], button[class*="btn"] ) { min-height: 43px; } } /* --------------------------------------------------------- 20. REDUCED MOTION --------------------------------------------------------- */ @media ( prefers-reduced-motion: reduce ) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* AROMA COMPONENT SYSTEM PHASE 2 END */ /* AROMA PREMIUM UI PHASE 4A START */ /* ========================================================= AROMA ERP — PREMIUM TABLES, FORMS AND BUTTONS ========================================================= */ :root { --aroma-ui-radius: 12px; --aroma-ui-radius-lg: 16px; --aroma-ui-focus: color-mix( in srgb, var(--aroma-primary) 28%, transparent ); --aroma-ui-hover: color-mix( in srgb, var(--aroma-primary) 7%, var(--aroma-card-bg) 93% ); } /* ========================================================= TABLE CONTAINERS ========================================================= */ :is( .table-container, .table-responsive, .data-table-container, .results-table, .list-table, [class$="-table-wrapper"] ) { width: 100%; overflow-x: auto; overflow-y: visible; background: var(--aroma-card-bg); border: 1px solid var(--aroma-border); border-radius: var(--aroma-ui-radius-lg); box-shadow: 0 8px 24px var(--aroma-shadow); scrollbar-width: thin; scrollbar-color: var(--aroma-primary) var(--aroma-page-bg); } /* ========================================================= TABLES ========================================================= */ table { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--aroma-text); background: var(--aroma-card-bg); font-variant-numeric: tabular-nums; } table thead { position: relative; z-index: 2; } table thead th { position: sticky; top: 0; z-index: 3; padding: 13px 14px; color: var(--aroma-table-head-text); background: var(--aroma-table-head); border-bottom: 1px solid var(--aroma-border); font-size: .84rem; font-weight: 800; text-align: start; white-space: nowrap; letter-spacing: .01em; } table thead th:first-child { border-start-start-radius: var(--aroma-ui-radius-lg); } table thead th:last-child { border-start-end-radius: var(--aroma-ui-radius-lg); } table tbody td { padding: 12px 14px; color: var(--aroma-text); background: transparent; border-bottom: 1px solid color-mix( in srgb, var(--aroma-border) 72%, transparent ); vertical-align: middle; transition: color 140ms ease, background-color 140ms ease; } table tbody tr:nth-child(even) td { background: color-mix( in srgb, var(--aroma-card-bg) 97%, var(--aroma-primary) 3% ); } table tbody tr:hover td { background: var(--aroma-ui-hover); color: var(--aroma-heading); } table tbody tr:last-child td { border-bottom: 0; } table tbody tr:last-child td:first-child { border-end-start-radius: var(--aroma-ui-radius-lg); } table tbody tr:last-child td:last-child { border-end-end-radius: var(--aroma-ui-radius-lg); } /* Numeric cells */ :is( td.number, td.amount, td.total, td.price, td.quantity, td.balance, [data-type="number"] ) { direction: ltr; text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; } /* Empty tables */ table tbody td[colspan] { padding: 30px 18px; color: var(--aroma-muted); text-align: center; } /* ========================================================= FORMS ========================================================= */ :is( input, select, textarea ):not( [type="checkbox"] ):not( [type="radio"] ):not( [type="hidden"] ):not( [type="submit"] ):not( [type="button"] ) { width: 100%; min-height: 43px; padding: 10px 12px; color: var(--aroma-text); background: var(--aroma-input-bg); border: 1px solid var(--aroma-border); border-radius: 10px; outline: none; box-shadow: none; font: inherit; transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; } textarea { min-height: 110px; resize: vertical; } select { cursor: pointer; } :is( input, select, textarea ):not( [type="checkbox"] ):not( [type="radio"] ):not( [type="hidden"] ):not( [type="submit"] ):not( [type="button"] ):hover { border-color: color-mix( in srgb, var(--aroma-primary) 43%, var(--aroma-border) 57% ); } :is( input, select, textarea ):not( [type="checkbox"] ):not( [type="radio"] ):not( [type="hidden"] ):not( [type="submit"] ):not( [type="button"] ):focus { border-color: var(--aroma-primary); box-shadow: 0 0 0 4px var(--aroma-ui-focus); background: var(--aroma-card-bg); } :is( input, select, textarea ):disabled { cursor: not-allowed; opacity: .65; background: color-mix( in srgb, var(--aroma-input-bg) 85%, var(--aroma-muted) 15% ); } ::placeholder { color: var(--aroma-muted); opacity: .82; } /* Labels */ label { display: inline-block; margin-bottom: 6px; color: var(--aroma-heading); font-size: .88rem; font-weight: 700; } .required label::after, label.required::after { content: " *"; color: var(--ui-danger); } /* Form groups */ :is( .form-group, .field-group, .input-group, .filter-field, [class$="-field"] ) { min-width: 0; } :is( .form-row, .filters-row, .search-row, .toolbar-form ) { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; } /* Help and errors */ :is( .helptext, .form-help, .field-help ) { display: block; margin-top: 5px; color: var(--aroma-muted); font-size: .78rem; } :is( .errorlist, .field-error, .invalid-feedback ) { margin: 6px 0 0; padding: 0; color: var(--ui-danger); font-size: .8rem; list-style: none; } /* ========================================================= BUTTONS ========================================================= */ :is( .button, .btn, button, input[type="submit"], input[type="button"] ) { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; color: #ffffff; background: linear-gradient( 135deg, var(--aroma-primary), var(--aroma-secondary) ); border: 1px solid color-mix( in srgb, var(--aroma-primary-dark) 45%, transparent ); border-radius: 10px; box-shadow: 0 5px 14px color-mix( in srgb, var(--aroma-primary) 24%, transparent ); cursor: pointer; font: inherit; font-size: .88rem; font-weight: 750; text-decoration: none; white-space: nowrap; transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease, background-color 140ms ease; } :is( .button, .btn, button, input[type="submit"], input[type="button"] ):hover { transform: translateY(-1px); filter: brightness(1.045); box-shadow: 0 8px 19px color-mix( in srgb, var(--aroma-primary) 31%, transparent ); } :is( .button, .btn, button, input[type="submit"], input[type="button"] ):active { transform: translateY(0); box-shadow: 0 3px 8px color-mix( in srgb, var(--aroma-primary) 22%, transparent ); } :is( .button, .btn, button, input[type="submit"], input[type="button"] ):focus-visible { outline: none; box-shadow: 0 0 0 4px var(--aroma-ui-focus), 0 6px 16px color-mix( in srgb, var(--aroma-primary) 25%, transparent ); } :is( .button, .btn, button, input[type="submit"], input[type="button"] ):disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; } /* Secondary buttons */ :is( .button-secondary, .btn-secondary, .button-gray, .btn-light, .cancel-button ) { color: var(--aroma-heading) !important; background: var(--aroma-card-bg) !important; border-color: var(--aroma-border) !important; box-shadow: none !important; } :is( .button-secondary, .btn-secondary, .button-gray, .btn-light, .cancel-button ):hover { color: var(--aroma-primary) !important; background: var(--aroma-ui-hover) !important; border-color: var(--aroma-primary) !important; } /* Danger buttons */ :is( .button-danger, .btn-danger, .delete-button, .danger-button ) { color: #ffffff !important; background: linear-gradient( 135deg, var(--ui-danger), color-mix( in srgb, var(--ui-danger) 75%, #5f0712 25% ) ) !important; border-color: var(--ui-danger) !important; } /* Success buttons */ :is( .button-success, .btn-success, .save-button ) { color: #ffffff !important; background: linear-gradient( 135deg, var(--ui-success), color-mix( in srgb, var(--ui-success) 75%, #064b32 25% ) ) !important; border-color: var(--ui-success) !important; } /* Compact action buttons */ :is( .actions, .table-actions, .row-actions, td.actions ) :is( .button, .btn, button, a ) { min-height: 34px; padding: 7px 10px; border-radius: 8px; font-size: .8rem; } /* ========================================================= CHECKBOXES AND RADIOS ========================================================= */ input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; accent-color: var(--aroma-primary); cursor: pointer; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 760px) { table { min-width: 680px; } table thead th, table tbody td { padding: 11px 12px; } :is( .form-row, .filters-row, .search-row, .toolbar-form ) { align-items: stretch; flex-direction: column; } :is( .form-row, .filters-row, .search-row, .toolbar-form ) > * { width: 100%; } :is( .button, .btn, button, input[type="submit"], input[type="button"] ) { min-height: 43px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { table tbody td, :is( input, select, textarea, .button, .btn, button ) { transition: none !important; transform: none !important; } } /* AROMA PREMIUM UI PHASE 4A END */ /* AROMA PREMIUM UI PHASE 4B START */ /* ========================================================= TOP LOADING BAR ========================================================= */ #aroma-page-progress { position: fixed; z-index: 999999; inset-block-start: 0; inset-inline-start: 0; width: 0; height: 3px; opacity: 0; background: linear-gradient( 90deg, var(--aroma-primary), var(--aroma-secondary), var(--aroma-primary) ); background-size: 200% 100%; box-shadow: 0 0 12px color-mix( in srgb, var(--aroma-primary) 68%, transparent ); transition: width 180ms ease, opacity 180ms ease; pointer-events: none; } #aroma-page-progress.is-visible { opacity: 1; } #aroma-page-progress.is-running { animation: aroma-progress-shimmer 1.1s linear infinite; } @keyframes aroma-progress-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } /* ========================================================= TOAST CONTAINER ========================================================= */ #aroma-toast-container { position: fixed; z-index: 999998; inset-block-start: 82px; inset-inline-end: 18px; width: min(390px, calc(100vw - 28px)); display: flex; flex-direction: column; gap: 11px; pointer-events: none; } /* ========================================================= TOAST ========================================================= */ .aroma-toast { --toast-color: var(--ui-info); --toast-soft: var(--ui-info-soft); position: relative; overflow: hidden; display: grid; grid-template-columns: 38px minmax(0, 1fr) 30px; align-items: start; gap: 10px; padding: 13px 12px; color: var(--aroma-text); background: color-mix( in srgb, var(--aroma-card-bg) 94%, var(--toast-soft) 6% ); border: 1px solid color-mix( in srgb, var(--toast-color) 40%, var(--aroma-border) 60% ); border-radius: 14px; box-shadow: 0 14px 36px color-mix( in srgb, var(--aroma-shadow) 80%, transparent ); backdrop-filter: blur(14px); transform: translateX( calc( var(--toast-direction, 1) * 28px ) ); opacity: 0; transition: transform 220ms ease, opacity 220ms ease; pointer-events: auto; } html[dir="rtl"] .aroma-toast { --toast-direction: 1; } html[dir="ltr"] .aroma-toast { --toast-direction: -1; } .aroma-toast.is-visible { transform: translateX(0); opacity: 1; } .aroma-toast.is-leaving { transform: translateX( calc( var(--toast-direction, 1) * 32px ) ); opacity: 0; } /* Toast types */ .aroma-toast--success { --toast-color: var(--ui-success); --toast-soft: var(--ui-success-soft); } .aroma-toast--warning { --toast-color: var(--ui-warning); --toast-soft: var(--ui-warning-soft); } .aroma-toast--error, .aroma-toast--danger { --toast-color: var(--ui-danger); --toast-soft: var(--ui-danger-soft); } .aroma-toast--info { --toast-color: var(--ui-info); --toast-soft: var(--ui-info-soft); } /* Icon */ .aroma-toast__icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--toast-color); background: color-mix( in srgb, var(--toast-color) 12%, transparent ); border-radius: 11px; font-size: 18px; font-weight: 900; } /* Content */ .aroma-toast__content { min-width: 0; } .aroma-toast__title { margin: 0 0 3px; color: var(--aroma-heading); font-size: .9rem; font-weight: 800; } .aroma-toast__message { margin: 0; color: var(--aroma-text); font-size: .84rem; line-height: 1.55; overflow-wrap: anywhere; } /* Close */ .aroma-toast__close { width: 29px !important; height: 29px !important; min-height: 29px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; color: var(--aroma-muted) !important; background: transparent !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; font-size: 18px !important; line-height: 1 !important; } .aroma-toast__close:hover { color: var(--toast-color) !important; background: color-mix( in srgb, var(--toast-color) 10%, transparent ) !important; transform: none !important; } /* Timer */ .aroma-toast__timer { position: absolute; inset-inline-start: 0; inset-block-end: 0; width: 100%; height: 3px; background: color-mix( in srgb, var(--toast-color) 75%, transparent ); transform-origin: left center; } html[dir="rtl"] .aroma-toast__timer { transform-origin: right center; } .aroma-toast.is-timed .aroma-toast__timer { animation: aroma-toast-timer var(--toast-duration, 5s) linear forwards; } @keyframes aroma-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* Hide original Django message wrappers after conversion */ .aroma-messages-processed { display: none !important; } /* Mobile */ @media (max-width: 650px) { #aroma-toast-container { inset-block-start: 70px; inset-inline: 9px; width: auto; } .aroma-toast { grid-template-columns: 35px minmax(0, 1fr) 29px; padding: 12px 10px; } .aroma-toast__icon { width: 34px; height: 34px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { #aroma-page-progress, .aroma-toast, .aroma-toast__timer { animation: none !important; transition: none !important; } } /* AROMA PREMIUM UI PHASE 4B END */ /* AROMA PREMIUM UI PHASE 4C START */ /* ========================================================= MODAL BACKDROP ========================================================= */ body.aroma-modal-open { overflow: hidden !important; } :is( .modal, .dialog, .popup, .modal-overlay, .dialog-overlay, [data-modal], [role="dialog"][aria-modal="true"] ) { --aroma-modal-width: 620px; } :is( .modal-overlay, .dialog-overlay, .popup-overlay, [data-modal-overlay] ) { position: fixed; z-index: 999990; inset: 0; display: none; align-items: center; justify-content: center; padding: 18px; background: color-mix( in srgb, #07131d 66%, transparent ); backdrop-filter: blur(9px) saturate(.85); opacity: 0; transition: opacity 190ms ease; } :is( .modal-overlay, .dialog-overlay, .popup-overlay, [data-modal-overlay] ).is-open, :is( .modal-overlay, .dialog-overlay, .popup-overlay, [data-modal-overlay] )[aria-hidden="false"] { display: flex; opacity: 1; } /* ========================================================= MODAL PANEL ========================================================= */ :is( .modal-content, .dialog-content, .popup-content, .modal-card, [data-modal-content], dialog ) { width: min( var(--aroma-modal-width), calc(100vw - 28px) ); max-height: min(88vh, 900px); overflow: auto; color: var(--aroma-text); background: color-mix( in srgb, var(--aroma-card-bg) 96%, var(--aroma-primary) 4% ); border: 1px solid color-mix( in srgb, var(--aroma-primary) 24%, var(--aroma-border) 76% ); border-radius: 19px; box-shadow: 0 27px 75px rgba(0, 0, 0, .30), 0 0 0 1px rgba(255, 255, 255, .04); transform: translateY(18px) scale(.975); opacity: 0; transition: transform 210ms ease, opacity 210ms ease, border-color 160ms ease; scrollbar-width: thin; scrollbar-color: var(--aroma-primary) transparent; } :is( .modal-overlay, .dialog-overlay, .popup-overlay, [data-modal-overlay] ).is-open :is( .modal-content, .dialog-content, .popup-content, .modal-card, [data-modal-content] ), dialog[open] { transform: translateY(0) scale(1); opacity: 1; } /* Native dialog */ dialog { padding: 0; } dialog::backdrop { background: color-mix( in srgb, #07131d 66%, transparent ); backdrop-filter: blur(9px); } dialog[open] { animation: aroma-dialog-open 210ms ease both; } @keyframes aroma-dialog-open { from { opacity: 0; transform: translateY(18px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ========================================================= MODAL HEADER ========================================================= */ :is( .modal-header, .dialog-header, .popup-header, [data-modal-header] ) { position: sticky; z-index: 3; inset-block-start: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 19px; background: color-mix( in srgb, var(--aroma-card-bg) 94%, var(--aroma-primary) 6% ); border-bottom: 1px solid var(--aroma-border); backdrop-filter: blur(12px); } :is( .modal-header, .dialog-header, .popup-header, [data-modal-header] ) :is( h1, h2, h3, h4 ) { margin: 0; color: var(--aroma-heading); font-size: 1.08rem; } /* Close button */ :is( .modal-close, .dialog-close, .popup-close, [data-modal-close], button[aria-label="Close"], button[aria-label="إغلاق"] ) { width: 34px !important; height: 34px !important; min-height: 34px !important; flex: 0 0 34px; padding: 0 !important; color: var(--aroma-muted) !important; background: color-mix( in srgb, var(--aroma-muted) 8%, transparent ) !important; border: 1px solid transparent !important; border-radius: 10px !important; box-shadow: none !important; font-size: 20px !important; line-height: 1 !important; } :is( .modal-close, .dialog-close, .popup-close, [data-modal-close], button[aria-label="Close"], button[aria-label="إغلاق"] ):hover { color: var(--ui-danger) !important; background: var(--ui-danger-soft) !important; border-color: color-mix( in srgb, var(--ui-danger) 30%, transparent ) !important; transform: none !important; } /* ========================================================= MODAL BODY ========================================================= */ :is( .modal-body, .dialog-body, .popup-body, [data-modal-body] ) { padding: 20px; color: var(--aroma-text); } /* ========================================================= MODAL FOOTER ========================================================= */ :is( .modal-footer, .dialog-footer, .popup-footer, [data-modal-footer] ) { position: sticky; z-index: 3; inset-block-end: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 19px; background: color-mix( in srgb, var(--aroma-card-bg) 96%, var(--aroma-primary) 4% ); border-top: 1px solid var(--aroma-border); backdrop-filter: blur(12px); } html[dir="rtl"] :is( .modal-footer, .dialog-footer, .popup-footer, [data-modal-footer] ) { justify-content: flex-start; } /* ========================================================= DELETE / DANGER DIALOG ========================================================= */ :is( .delete-modal, .danger-modal, [data-modal-type="danger"] ) :is( .modal-content, .dialog-content, .popup-content, .modal-card, [data-modal-content] ) { border-color: color-mix( in srgb, var(--ui-danger) 40%, var(--aroma-border) 60% ); } .aroma-danger-dialog-icon { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 13px; color: var(--ui-danger); background: var(--ui-danger-soft); border: 1px solid color-mix( in srgb, var(--ui-danger) 30%, transparent ); border-radius: 16px; font-size: 25px; font-weight: 900; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 650px) { :is( .modal-overlay, .dialog-overlay, .popup-overlay, [data-modal-overlay] ) { align-items: flex-end; padding: 8px; } :is( .modal-content, .dialog-content, .popup-content, .modal-card, [data-modal-content], dialog ) { width: 100%; max-height: 92vh; border-radius: 18px 18px 10px 10px; transform: translateY(35px); } :is( .modal-header, .dialog-header, .popup-header, [data-modal-header] ) { padding: 15px; } :is( .modal-body, .dialog-body, .popup-body, [data-modal-body] ) { padding: 17px 15px; } :is( .modal-footer, .dialog-footer, .popup-footer, [data-modal-footer] ) { padding: 13px 15px; flex-direction: column-reverse; align-items: stretch; } :is( .modal-footer, .dialog-footer, .popup-footer, [data-modal-footer] ) > * { width: 100%; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { :is( .modal-overlay, .dialog-overlay, .popup-overlay, [data-modal-overlay], .modal-content, .dialog-content, .popup-content, .modal-card, [data-modal-content], dialog ) { animation: none !important; transition: none !important; transform: none !important; } } /* AROMA PREMIUM UI PHASE 4C END */ /* AROMA PREMIUM UI PHASE 4D START */ /* ========================================================= PAGE LAYOUT ========================================================= */ :root { --aroma-page-width: 1440px; --aroma-page-gap: 18px; --aroma-panel-radius: 17px; } :is( main, .main-content, .page-content, .content-wrapper, .dashboard-container, .container ) { color: var(--aroma-text); } :is( .page-container, .main-container, .content-container, .dashboard-container ) { width: min( var(--aroma-page-width), calc(100% - 28px) ); margin-inline: auto; } /* ========================================================= PAGE HEADER ========================================================= */ :is( .page-header, .content-header, .dashboard-header, .section-header, .list-header ) { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 19px; padding: 18px 20px; color: var(--aroma-text); background: linear-gradient( 135deg, color-mix( in srgb, var(--aroma-card-bg) 95%, var(--aroma-primary) 5% ), var(--aroma-card-bg) ); border: 1px solid var(--aroma-border); border-radius: var(--aroma-panel-radius); box-shadow: 0 8px 24px var(--aroma-shadow); } :is( .page-header, .content-header, .dashboard-header, .section-header, .list-header ) :is( h1, h2, h3 ) { margin: 0; color: var(--aroma-heading); line-height: 1.25; } :is( .page-header, .content-header, .dashboard-header ) h1 { font-size: clamp( 1.35rem, 2.5vw, 1.9rem ); } :is( .page-subtitle, .header-subtitle, .page-description ) { margin-top: 5px; color: var(--aroma-muted); font-size: .88rem; line-height: 1.55; } /* Header actions */ :is( .page-actions, .header-actions, .toolbar-actions, .action-buttons ) { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; } /* ========================================================= BREADCRUMBS ========================================================= */ :is( .breadcrumb, .breadcrumbs, .page-breadcrumb ) { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 0 13px; padding: 0; color: var(--aroma-muted); font-size: .82rem; list-style: none; } :is( .breadcrumb, .breadcrumbs, .page-breadcrumb ) a { color: var(--aroma-muted); text-decoration: none; transition: color 140ms ease; } :is( .breadcrumb, .breadcrumbs, .page-breadcrumb ) a:hover { color: var(--aroma-primary); } :is( .breadcrumb, .breadcrumbs, .page-breadcrumb ) > *:not(:last-child)::after { content: "›"; margin-inline-start: 7px; color: var(--aroma-border); font-size: 1.05rem; } html[dir="rtl"] :is( .breadcrumb, .breadcrumbs, .page-breadcrumb ) > *:not(:last-child)::after { content: "‹"; } /* ========================================================= GENERAL PANELS AND CARDS ========================================================= */ :is( .panel, .card, .content-card, .section-card, .dashboard-card, .form-card, .filter-card, .summary-card ) { color: var(--aroma-text); background: var(--aroma-card-bg); border: 1px solid var(--aroma-border); border-radius: var(--aroma-panel-radius); box-shadow: 0 8px 24px var(--aroma-shadow); transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } :is( .panel, .card, .content-card, .section-card, .dashboard-card, .form-card, .filter-card, .summary-card ):hover { border-color: color-mix( in srgb, var(--aroma-primary) 34%, var(--aroma-border) 66% ); } /* Panel header */ :is( .panel-header, .card-header, .section-card-header ) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--aroma-border); background: color-mix( in srgb, var(--aroma-card-bg) 95%, var(--aroma-primary) 5% ); border-start-start-radius: inherit; border-start-end-radius: inherit; } :is( .panel-header, .card-header, .section-card-header ) :is( h2, h3, h4 ) { margin: 0; color: var(--aroma-heading); font-size: 1rem; } /* Panel body */ :is( .panel-body, .card-body, .section-card-body ) { padding: 18px; } /* Panel footer */ :is( .panel-footer, .card-footer, .section-card-footer ) { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; padding: 13px 18px; border-top: 1px solid var(--aroma-border); background: color-mix( in srgb, var(--aroma-card-bg) 97%, var(--aroma-primary) 3% ); border-end-start-radius: inherit; border-end-end-radius: inherit; } /* ========================================================= KPI AND STAT CARDS ========================================================= */ :is( .stat-card, .kpi-card, .metric-card, .summary-box, .dashboard-stat ) { position: relative; overflow: hidden; min-height: 135px; padding: 19px; color: var(--aroma-text); background: linear-gradient( 145deg, color-mix( in srgb, var(--aroma-card-bg) 94%, var(--aroma-primary) 6% ), var(--aroma-card-bg) ); border: 1px solid var(--aroma-border); border-radius: var(--aroma-panel-radius); box-shadow: 0 9px 25px var(--aroma-shadow); transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } :is( .stat-card, .kpi-card, .metric-card, .summary-box, .dashboard-stat )::after { content: ""; position: absolute; width: 115px; height: 115px; inset-inline-end: -43px; inset-block-start: -48px; border-radius: 50%; background: color-mix( in srgb, var(--aroma-primary) 9%, transparent ); pointer-events: none; } :is( .stat-card, .kpi-card, .metric-card, .summary-box, .dashboard-stat ):hover { transform: translateY(-3px); border-color: color-mix( in srgb, var(--aroma-primary) 45%, var(--aroma-border) 55% ); box-shadow: 0 14px 32px color-mix( in srgb, var(--aroma-primary) 20%, transparent ); } :is( .stat-value, .kpi-value, .metric-value, .summary-value ) { display: block; margin-top: 8px; color: var(--aroma-heading); font-size: clamp( 1.4rem, 3vw, 2rem ); font-weight: 850; font-variant-numeric: tabular-nums; } :is( .stat-label, .kpi-label, .metric-label, .summary-label ) { color: var(--aroma-muted); font-size: .84rem; font-weight: 700; } /* ========================================================= TOOLBARS AND FILTERS ========================================================= */ :is( .toolbar, .page-toolbar, .filter-bar, .filters-container, .search-toolbar, .table-toolbar ) { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 14px; background: var(--aroma-card-bg); border: 1px solid var(--aroma-border); border-radius: 14px; box-shadow: 0 6px 18px var(--aroma-shadow); } :is( .toolbar-left, .toolbar-right, .filter-actions, .search-actions ) { display: flex; align-items: flex-end; gap: 9px; flex-wrap: wrap; } /* ========================================================= STATUS BADGES ========================================================= */ :is( .badge, .status, .status-badge, .label, .tag, [class*="status-"] ) { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 25px; padding: 4px 9px; border: 1px solid var(--aroma-border); border-radius: 999px; color: var(--aroma-text); background: color-mix( in srgb, var(--aroma-card-bg) 91%, var(--aroma-muted) 9% ); font-size: .74rem; font-weight: 750; line-height: 1.2; white-space: nowrap; } :is( .badge-success, .status-success, .status-completed, .status-approved, .status-paid, .status-active ) { color: var(--ui-success) !important; background: var(--ui-success-soft) !important; border-color: color-mix( in srgb, var(--ui-success) 32%, transparent ) !important; } :is( .badge-warning, .status-warning, .status-pending, .status-draft, .status-partial ) { color: var(--ui-warning) !important; background: var(--ui-warning-soft) !important; border-color: color-mix( in srgb, var(--ui-warning) 32%, transparent ) !important; } :is( .badge-danger, .status-danger, .status-cancelled, .status-rejected, .status-overdue, .status-inactive ) { color: var(--ui-danger) !important; background: var(--ui-danger-soft) !important; border-color: color-mix( in srgb, var(--ui-danger) 32%, transparent ) !important; } :is( .badge-info, .status-info, .status-new, .status-open, .status-processing ) { color: var(--ui-info) !important; background: var(--ui-info-soft) !important; border-color: color-mix( in srgb, var(--ui-info) 32%, transparent ) !important; } /* ========================================================= PAGINATION ========================================================= */ :is( .pagination, .pager, .page-links ) { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 20px 0 0; padding: 0; list-style: none; } :is( .pagination, .pager, .page-links ) :is( a, span, button ) { min-width: 37px; height: 37px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; color: var(--aroma-text) !important; background: var(--aroma-card-bg) !important; border: 1px solid var(--aroma-border) !important; border-radius: 9px !important; box-shadow: none !important; font-size: .82rem; font-weight: 750; text-decoration: none; transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, transform 140ms ease; } :is( .pagination, .pager, .page-links ) :is( a, button ):hover { color: var(--aroma-primary) !important; background: color-mix( in srgb, var(--aroma-card-bg) 90%, var(--aroma-primary) 10% ) !important; border-color: var(--aroma-primary) !important; transform: translateY(-1px); } :is( .pagination, .pager, .page-links ) :is( .active, .current, [aria-current="page"] ) { color: #ffffff !important; background: linear-gradient( 135deg, var(--aroma-primary), var(--aroma-secondary) ) !important; border-color: var(--aroma-primary) !important; } :is( .pagination, .pager, .page-links ) :is( .disabled, [aria-disabled="true"] ) { opacity: .48; cursor: not-allowed; pointer-events: none; } /* ========================================================= EMPTY STATES ========================================================= */ :is( .empty-state, .no-data, .no-results, .empty-list, .empty-table ) { width: 100%; padding: 38px 22px; color: var(--aroma-muted); text-align: center; background: color-mix( in srgb, var(--aroma-card-bg) 97%, var(--aroma-primary) 3% ); border: 1px dashed color-mix( in srgb, var(--aroma-primary) 26%, var(--aroma-border) 74% ); border-radius: 16px; } :is( .empty-state, .no-data, .no-results, .empty-list, .empty-table ) :is( h2, h3, h4 ) { margin: 0 0 7px; color: var(--aroma-heading); } :is( .empty-state, .no-data, .no-results, .empty-list, .empty-table ) p { max-width: 520px; margin: 0 auto; line-height: 1.6; } /* ========================================================= RESPONSIVE GRIDS ========================================================= */ :is( .cards-grid, .dashboard-grid, .stats-grid, .kpi-grid, .modules-grid ) { display: grid; grid-template-columns: repeat( auto-fit, minmax(230px, 1fr) ); gap: var(--aroma-page-gap); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 760px) { :is( .page-container, .main-container, .content-container, .dashboard-container ) { width: calc(100% - 16px); } :is( .page-header, .content-header, .dashboard-header, .section-header, .list-header ) { align-items: stretch; flex-direction: column; padding: 16px; } :is( .page-actions, .header-actions, .toolbar-actions, .action-buttons ) { width: 100%; justify-content: stretch; } :is( .page-actions, .header-actions, .toolbar-actions, .action-buttons ) > * { flex: 1 1 auto; } :is( .toolbar, .page-toolbar, .filter-bar, .filters-container, .search-toolbar, .table-toolbar ) { align-items: stretch; flex-direction: column; } :is( .toolbar-left, .toolbar-right, .filter-actions, .search-actions ) { width: 100%; align-items: stretch; flex-direction: column; } :is( .toolbar-left, .toolbar-right, .filter-actions, .search-actions ) > * { width: 100%; } :is( .cards-grid, .dashboard-grid, .stats-grid, .kpi-grid, .modules-grid ) { grid-template-columns: 1fr; } :is( .panel-body, .card-body, .section-card-body ) { padding: 15px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { :is( .panel, .card, .content-card, .section-card, .dashboard-card, .stat-card, .kpi-card, .metric-card, .pagination a, .pagination button ) { transition: none !important; transform: none !important; } } /* AROMA PREMIUM UI PHASE 4D END */ /* AROMA PREMIUM UI PHASE 4E START */ /* ========================================================= RIPPLE EFFECT ========================================================= */ .aroma-ripple-host { position: relative !important; overflow: hidden !important; isolation: isolate; } .aroma-ripple { position: absolute; z-index: 0; width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .38); pointer-events: none; transform: translate(-50%, -50%) scale(0); animation: aroma-ripple-animation 560ms ease-out forwards; } :is( .button-secondary, .btn-secondary, .btn-light, .cancel-button ) .aroma-ripple { background: color-mix( in srgb, var(--aroma-primary) 24%, transparent ); } @keyframes aroma-ripple-animation { to { transform: translate(-50%, -50%) scale(18); opacity: 0; } } /* Keep button content above ripple */ .aroma-ripple-host > :not(.aroma-ripple) { position: relative; z-index: 1; } /* ========================================================= SUBMIT BUTTON LOADING STATE ========================================================= */ .aroma-submit-loading { position: relative; cursor: wait !important; pointer-events: none !important; opacity: .82; } .aroma-submit-loading::before { content: ""; width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid rgba(255,255,255,.38); border-top-color: currentColor; border-radius: 50%; animation: aroma-submit-spinner .72s linear infinite; } .aroma-submit-loading .aroma-submit-original-icon { display: none !important; } @keyframes aroma-submit-spinner { to { transform: rotate(360deg); } } /* ========================================================= SCROLL REVEAL ========================================================= */ .aroma-reveal-ready { opacity: 0; transform: translateY(13px); transition: opacity 380ms ease, transform 380ms ease; } .aroma-reveal-ready.aroma-reveal-visible { opacity: 1; transform: translateY(0); } /* ========================================================= TARGET HIGHLIGHT ========================================================= */ .aroma-target-highlight { animation: aroma-target-highlight 2.1s ease both; } @keyframes aroma-target-highlight { 0%, 100% { box-shadow: 0 8px 24px var(--aroma-shadow); } 18%, 65% { border-color: var(--aroma-primary); box-shadow: 0 0 0 4px color-mix( in srgb, var(--aroma-primary) 23%, transparent ), 0 12px 30px color-mix( in srgb, var(--aroma-primary) 20%, transparent ); } } /* ========================================================= BACK TO TOP ========================================================= */ #aroma-back-to-top { position: fixed; z-index: 999970; inset-inline-end: 20px; inset-block-end: 20px; width: 44px; height: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #ffffff; background: linear-gradient( 135deg, var(--aroma-primary), var(--aroma-secondary) ); border: 1px solid color-mix( in srgb, var(--aroma-primary-dark) 40%, transparent ); border-radius: 13px; box-shadow: 0 9px 24px color-mix( in srgb, var(--aroma-primary) 31%, transparent ); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.92); transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease, box-shadow 180ms ease; cursor: pointer; } #aroma-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } #aroma-back-to-top:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 13px 30px color-mix( in srgb, var(--aroma-primary) 38%, transparent ); } #aroma-back-to-top svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 650px) { #aroma-back-to-top { inset-inline-end: 12px; inset-block-end: 12px; width: 42px; height: 42px; min-height: 42px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .aroma-ripple, .aroma-submit-loading::before, .aroma-reveal-ready, .aroma-target-highlight, #aroma-back-to-top { animation: none !important; transition: none !important; } .aroma-reveal-ready { opacity: 1 !important; transform: none !important; } } /* AROMA PREMIUM UI PHASE 4E END */ /* AROMA PREMIUM UI PHASE 4F START */ /* ========================================================= COMMAND PALETTE OVERLAY ========================================================= */ body.aroma-command-open { overflow: hidden !important; } #aroma-command-overlay { position: fixed; z-index: 1000005; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: min(13vh, 110px) 16px 24px; background: color-mix( in srgb, #07131d 67%, transparent ); backdrop-filter: blur(10px) saturate(.85); opacity: 0; visibility: hidden; transition: opacity 170ms ease, visibility 170ms ease; } #aroma-command-overlay.is-open { opacity: 1; visibility: visible; } /* ========================================================= COMMAND PALETTE PANEL ========================================================= */ #aroma-command-palette { width: min( 680px, calc(100vw - 24px) ); max-height: min(72vh, 660px); display: flex; flex-direction: column; overflow: hidden; color: var(--aroma-text); background: color-mix( in srgb, var(--aroma-card-bg) 96%, var(--aroma-primary) 4% ); border: 1px solid color-mix( in srgb, var(--aroma-primary) 28%, var(--aroma-border) 72% ); border-radius: 20px; box-shadow: 0 32px 90px rgba(0,0,0,.36), 0 0 0 1px rgba(255,255,255,.04); transform: translateY(-10px) scale(.98); transition: transform 180ms ease; } #aroma-command-overlay.is-open #aroma-command-palette { transform: translateY(0) scale(1); } /* ========================================================= SEARCH HEADER ========================================================= */ .aroma-command-search-wrap { position: relative; display: flex; align-items: center; padding: 14px 15px; border-bottom: 1px solid var(--aroma-border); background: color-mix( in srgb, var(--aroma-card-bg) 94%, var(--aroma-primary) 6% ); } .aroma-command-search-icon { position: absolute; inset-inline-start: 28px; width: 20px; height: 20px; color: var(--aroma-muted); pointer-events: none; } .aroma-command-search-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #aroma-command-input { width: 100% !important; min-height: 50px !important; padding-inline-start: 47px !important; padding-inline-end: 75px !important; color: var(--aroma-heading) !important; background: var(--aroma-input-bg) !important; border: 1px solid var(--aroma-border) !important; border-radius: 13px !important; box-shadow: none !important; font-size: 1rem !important; font-weight: 650; } #aroma-command-input:focus { border-color: var(--aroma-primary) !important; box-shadow: 0 0 0 4px color-mix( in srgb, var(--aroma-primary) 22%, transparent ) !important; } .aroma-command-escape { position: absolute; inset-inline-end: 27px; padding: 4px 7px; color: var(--aroma-muted); background: color-mix( in srgb, var(--aroma-muted) 10%, transparent ); border: 1px solid var(--aroma-border); border-radius: 7px; font-size: .7rem; font-weight: 800; } /* ========================================================= RESULT LIST ========================================================= */ #aroma-command-results { min-height: 120px; overflow-y: auto; padding: 9px; scrollbar-width: thin; scrollbar-color: var(--aroma-primary) transparent; } .aroma-command-group-title { padding: 9px 11px 6px; color: var(--aroma-muted); font-size: .73rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .aroma-command-item { width: 100%; min-height: 55px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 8px 10px; color: var(--aroma-text); background: transparent; border: 1px solid transparent; border-radius: 12px; box-shadow: none; cursor: pointer; text-align: start; transition: color 130ms ease, background-color 130ms ease, border-color 130ms ease, transform 130ms ease; } .aroma-command-item:hover, .aroma-command-item.is-active { color: var(--aroma-heading); background: color-mix( in srgb, var(--aroma-card-bg) 88%, var(--aroma-primary) 12% ); border-color: color-mix( in srgb, var(--aroma-primary) 30%, var(--aroma-border) 70% ); transform: none; } .aroma-command-item__icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: var(--aroma-primary); background: color-mix( in srgb, var(--aroma-primary) 11%, transparent ); border: 1px solid color-mix( in srgb, var(--aroma-primary) 24%, transparent ); border-radius: 11px; font-size: 17px; font-weight: 850; } .aroma-command-item__content { min-width: 0; } .aroma-command-item__title { display: block; color: inherit; font-size: .9rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aroma-command-item__description { display: block; margin-top: 3px; color: var(--aroma-muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aroma-command-item__enter { padding: 4px 7px; color: var(--aroma-muted); background: color-mix( in srgb, var(--aroma-muted) 8%, transparent ); border: 1px solid var(--aroma-border); border-radius: 7px; font-size: .69rem; font-weight: 800; } /* ========================================================= EMPTY RESULT ========================================================= */ .aroma-command-empty { padding: 35px 20px; color: var(--aroma-muted); text-align: center; } .aroma-command-empty strong { display: block; margin-bottom: 5px; color: var(--aroma-heading); } /* ========================================================= FOOTER ========================================================= */ .aroma-command-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; color: var(--aroma-muted); background: color-mix( in srgb, var(--aroma-card-bg) 96%, var(--aroma-primary) 4% ); border-top: 1px solid var(--aroma-border); font-size: .72rem; } .aroma-command-footer__keys { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; } .aroma-command-footer kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 23px; height: 22px; padding: 0 6px; margin-inline-end: 4px; color: var(--aroma-heading); background: var(--aroma-input-bg); border: 1px solid var(--aroma-border); border-radius: 6px; box-shadow: 0 2px 0 color-mix( in srgb, var(--aroma-border) 80%, transparent ); font-family: inherit; font-size: .67rem; font-weight: 800; } /* ========================================================= OPTIONAL HEADER SEARCH TRIGGER ========================================================= */ #aroma-command-trigger { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 10px; color: var(--aroma-header-text, #fff); background: var(--aroma-header-glass); border: 1px solid var(--aroma-header-border); border-radius: 10px; box-shadow: none; font-size: .79rem; font-weight: 750; } #aroma-command-trigger:hover { color: var(--aroma-header-text, #fff); background: var(--aroma-header-glass-hover); transform: none; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 650px) { #aroma-command-overlay { align-items: flex-end; padding: 8px; } #aroma-command-palette { width: 100%; max-height: 88vh; border-radius: 19px 19px 10px 10px; transform: translateY(28px); } #aroma-command-overlay.is-open #aroma-command-palette { transform: translateY(0); } .aroma-command-search-wrap { padding: 11px; } .aroma-command-search-icon { inset-inline-start: 24px; } .aroma-command-escape { inset-inline-end: 23px; } #aroma-command-results { padding: 7px; } .aroma-command-footer { align-items: flex-start; flex-direction: column; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { #aroma-command-overlay, #aroma-command-palette, .aroma-command-item { transition: none !important; transform: none !important; } } /* AROMA PREMIUM UI PHASE 4F END */ /* AROMA TABLE TOOLS PHASE 4H START */ .aroma-table-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; padding: 9px; background: var(--aroma-card-bg); border: 1px solid var(--aroma-border); border-radius: 11px; } .aroma-table-tools__search { flex: 1 1 230px; max-width: 430px; min-width: 180px; } .aroma-table-tools__search input { min-height: 38px !important; } .aroma-table-tools__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .aroma-table-tools__count { color: var(--aroma-muted); font-size: .8rem; white-space: nowrap; } .aroma-table-tools__export { min-height: 36px !important; padding: 7px 11px !important; font-size: .8rem !important; } tr.aroma-table-row-hidden { display: none !important; } .aroma-table-no-results td { padding: 25px !important; text-align: center !important; color: var(--aroma-muted) !important; } @media (max-width: 650px) { .aroma-table-tools { align-items: stretch; flex-direction: column; } .aroma-table-tools__search { width: 100%; max-width: none; } .aroma-table-tools__actions { width: 100%; justify-content: space-between; } } /* AROMA TABLE TOOLS PHASE 4H END */ /* AROMA TABLE SORT PHASE 4I START */ table[data-aroma-sort-ready="1"] thead th[data-aroma-sortable="1"] { position: sticky; padding-inline-end: 34px; cursor: pointer; user-select: none; } table[data-aroma-sort-ready="1"] thead th[data-aroma-sortable="1"]::after { content: "↕"; position: absolute; inset-inline-end: 11px; inset-block-start: 50%; color: var(--aroma-muted); font-size: .76rem; font-weight: 800; opacity: .58; transform: translateY(-50%); transition: color 130ms ease, opacity 130ms ease, transform 130ms ease; } table[data-aroma-sort-ready="1"] thead th[data-aroma-sortable="1"]:hover { color: var(--aroma-primary); } table[data-aroma-sort-ready="1"] thead th[data-aroma-sortable="1"]:hover::after { color: var(--aroma-primary); opacity: 1; } table[data-aroma-sort-ready="1"] thead th[aria-sort="ascending"]::after { content: "↑"; color: var(--aroma-primary); opacity: 1; } table[data-aroma-sort-ready="1"] thead th[aria-sort="descending"]::after { content: "↓"; color: var(--aroma-primary); opacity: 1; } table[data-aroma-sort-ready="1"] thead th[data-aroma-sortable="1"]:focus-visible { z-index: 5; outline: 2px solid var(--aroma-primary); outline-offset: -3px; } table[data-aroma-sort-ready="1"] tbody tr.aroma-sort-moving td { background: color-mix( in srgb, var(--aroma-primary) 8%, var(--aroma-card-bg) 92% ); } @media (max-width: 650px) { table[data-aroma-sort-ready="1"] thead th[data-aroma-sortable="1"] { padding-inline-end: 30px; } } /* AROMA TABLE SORT PHASE 4I END */ /* AROMA TABLE COLUMNS PHASE 4J START */ .aroma-column-chooser { position: relative; display: inline-flex; } .aroma-column-chooser__button { min-height: 36px !important; padding: 7px 11px !important; font-size: .8rem !important; } .aroma-column-chooser__menu { position: absolute; z-index: 99980; inset-inline-end: 0; inset-block-start: calc(100% + 7px); width: min(290px, calc(100vw - 28px)); max-height: 350px; display: none; overflow-y: auto; padding: 9px; color: var(--aroma-text); background: var(--aroma-card-bg); border: 1px solid var(--aroma-border); border-radius: 12px; box-shadow: 0 16px 40px color-mix( in srgb, var(--aroma-shadow) 85%, transparent ); scrollbar-width: thin; scrollbar-color: var(--aroma-primary) transparent; } .aroma-column-chooser.is-open .aroma-column-chooser__menu { display: block; } .aroma-column-chooser__title { padding: 7px 8px 9px; color: var(--aroma-heading); font-size: .83rem; font-weight: 800; border-bottom: 1px solid var(--aroma-border); } .aroma-column-chooser__option { display: flex; align-items: center; gap: 9px; width: 100%; margin: 0; padding: 8px; color: var(--aroma-text); border-radius: 8px; cursor: pointer; font-size: .82rem; font-weight: 600; transition: color 130ms ease, background-color 130ms ease; } .aroma-column-chooser__option:hover { color: var(--aroma-heading); background: color-mix( in srgb, var(--aroma-card-bg) 90%, var(--aroma-primary) 10% ); } .aroma-column-chooser__option input { width: 16px !important; height: 16px !important; min-height: 16px !important; flex: 0 0 16px; margin: 0; accent-color: var(--aroma-primary); } .aroma-column-chooser__footer { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 7px; padding-top: 8px; border-top: 1px solid var(--aroma-border); } .aroma-column-chooser__reset { min-height: 33px !important; padding: 6px 9px !important; font-size: .76rem !important; } .aroma-column-hidden { display: none !important; } @media (max-width: 650px) { .aroma-column-chooser__menu { position: fixed; inset-inline: 10px; inset-block-start: auto; inset-block-end: 10px; width: auto; max-height: 65vh; border-radius: 15px; } } /* AROMA TABLE COLUMNS PHASE 4J END */ /* AROMA TABLE COPY PRINT PHASE 4K START */ .aroma-table-copy, .aroma-table-print { min-height: 36px !important; padding: 7px 11px !important; font-size: .8rem !important; white-space: nowrap; } .aroma-table-copy.is-success { color: var(--ui-success) !important; background: var(--ui-success-soft) !important; border-color: color-mix( in srgb, var(--ui-success) 35%, transparent ) !important; } @media (max-width: 650px) { .aroma-table-copy, .aroma-table-print { flex: 1 1 auto; } } /* AROMA TABLE COPY PRINT PHASE 4K END */ /* AROMA TABLE VIEW PHASE 4L START */ .aroma-table-density, .aroma-table-fullscreen-button { min-height: 36px !important; padding: 7px 11px !important; font-size: .8rem !important; white-space: nowrap; } /* Compact table mode */ table.aroma-table-compact thead th { padding-block: 8px !important; } table.aroma-table-compact tbody td { padding-block: 7px !important; } table.aroma-table-compact { font-size: .84rem; } /* Fullscreen mode */ body.aroma-table-fullscreen-open { overflow: hidden !important; } .aroma-table-fullscreen-host { position: fixed !important; z-index: 1000010 !important; inset: 0 !important; display: flex !important; flex-direction: column !important; width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: 14px !important; overflow: auto !important; background: var(--aroma-page-bg) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .aroma-table-fullscreen-host .aroma-table-tools { position: sticky; z-index: 10; inset-block-start: 0; flex: 0 0 auto; margin-bottom: 10px; box-shadow: 0 8px 20px var(--aroma-shadow); } .aroma-table-fullscreen-host :is( .table-responsive, .table-container, .data-table-container, .results-table, .list-table ) { flex: 1 1 auto; max-height: none !important; overflow: auto !important; } .aroma-table-fullscreen-host table { min-width: 100%; } .aroma-table-fullscreen-button.is-active { color: #ffffff !important; background: linear-gradient( 135deg, var(--aroma-primary), var(--aroma-secondary) ) !important; border-color: var(--aroma-primary) !important; } /* Prevent print window interference */ @media print { .aroma-table-density, .aroma-table-fullscreen-button { display: none !important; } } @media (max-width: 650px) { .aroma-table-density, .aroma-table-fullscreen-button { flex: 1 1 auto; } .aroma-table-fullscreen-host { padding: 7px !important; } } /* AROMA TABLE VIEW PHASE 4L END */ /* AROMA PASSWORD UX PHASE 4N START */ .aroma-password-wrapper { position: relative; width: 100%; } .aroma-password-wrapper input { padding-inline-end: 48px !important; } .aroma-password-toggle { position: absolute; inset-inline-end: 7px; inset-block-start: 50%; width: 34px !important; height: 34px !important; min-height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; color: var(--aroma-muted) !important; background: transparent !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; transform: translateY(-50%) !important; } .aroma-password-toggle:hover { color: var(--aroma-primary) !important; background: color-mix( in srgb, var(--aroma-primary) 10%, transparent ) !important; transform: translateY(-50%) !important; } .aroma-password-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .aroma-password-toggle .aroma-password-icon-hide { display: none; } .aroma-password-wrapper.is-visible .aroma-password-icon-show { display: none; } .aroma-password-wrapper.is-visible .aroma-password-icon-hide { display: block; } .aroma-caps-lock-warning { display: none; align-items: center; gap: 6px; margin-top: 6px; color: var(--ui-warning); font-size: .78rem; font-weight: 700; } .aroma-caps-lock-warning.is-visible { display: flex; } .aroma-caps-lock-warning::before { content: "!"; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px; color: var(--ui-warning); background: var(--ui-warning-soft); border-radius: 50%; font-size: .72rem; font-weight: 900; } @media (prefers-reduced-motion: reduce) { .aroma-password-toggle { transition: none !important; } } /* AROMA PASSWORD UX PHASE 4N END */ /* AROMA SHORTCUT HELP PHASE 4O START */ #aroma-shortcuts-trigger { width: 36px; height: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--aroma-header-text, #fff); background: var(--aroma-header-glass); border: 1px solid var(--aroma-header-border); border-radius: 10px; box-shadow: none; font-size: 17px; font-weight: 900; } #aroma-shortcuts-trigger:hover { color: var(--aroma-header-text, #fff); background: var(--aroma-header-glass-hover); transform: none; } .aroma-shortcuts-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax(245px, 1fr) ); gap: 10px; } .aroma-shortcut-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 11px 13px; background: color-mix( in srgb, var(--aroma-card-bg) 94%, var(--aroma-primary) 6% ); border: 1px solid var(--aroma-border); border-radius: 12px; } .aroma-shortcut-item__text { min-width: 0; } .aroma-shortcut-item__title { display: block; color: var(--aroma-heading); font-size: .86rem; font-weight: 800; } .aroma-shortcut-item__description { display: block; margin-top: 3px; color: var(--aroma-muted); font-size: .74rem; line-height: 1.45; } .aroma-shortcut-item__keys { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; flex: 0 0 auto; } .aroma-shortcut-item kbd { min-width: 28px; height: 27px; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; color: var(--aroma-heading); background: var(--aroma-input-bg); border: 1px solid var(--aroma-border); border-radius: 7px; box-shadow: 0 2px 0 color-mix( in srgb, var(--aroma-border) 85%, transparent ); font-family: inherit; font-size: .68rem; font-weight: 850; } .aroma-shortcuts-note { margin-top: 15px; padding: 11px 13px; color: var(--aroma-muted); background: color-mix( in srgb, var(--aroma-card-bg) 95%, var(--ui-info) 5% ); border: 1px solid var(--aroma-border); border-radius: 11px; font-size: .78rem; line-height: 1.6; } @media (max-width: 650px) { .aroma-shortcuts-grid { grid-template-columns: 1fr; } .aroma-shortcut-item { align-items: flex-start; flex-direction: column; } .aroma-shortcut-item__keys { width: 100%; justify-content: flex-start; } } /* AROMA SHORTCUT HELP PHASE 4O END */ /* AROMA LOCAL DRAFTS PHASE 4P START */ .aroma-draft-status { display: inline-flex; align-items: center; gap: 6px; min-height: 25px; margin-top: 7px; padding: 4px 8px; color: var(--aroma-muted); background: color-mix( in srgb, var(--aroma-card-bg) 94%, var(--aroma-primary) 6% ); border: 1px solid var(--aroma-border); border-radius: 999px; font-size: .73rem; font-weight: 700; } .aroma-draft-status::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--aroma-muted); } .aroma-draft-status.is-saving::before { background: var(--ui-warning); animation: aroma-draft-pulse .9s ease infinite; } .aroma-draft-status.is-saved { color: var(--ui-success); } .aroma-draft-status.is-saved::before { background: var(--ui-success); } .aroma-draft-status.is-restored { color: var(--ui-info); } .aroma-draft-status.is-restored::before { background: var(--ui-info); } @keyframes aroma-draft-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .aroma-draft-status::before { animation: none !important; } } /* AROMA LOCAL DRAFTS PHASE 4P END */ /* AROMA CONNECTION STATUS PHASE 4Q START */ #aroma-connection-banner { position: fixed; z-index: 1000020; inset-inline: 14px; inset-block-start: 10px; width: min( 520px, calc(100vw - 28px) ); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; color: var(--aroma-text); background: color-mix( in srgb, var(--aroma-card-bg) 93%, var(--ui-danger-soft) 7% ); border: 1px solid color-mix( in srgb, var(--ui-danger) 42%, var(--aroma-border) 58% ); border-radius: 13px; box-shadow: 0 14px 40px color-mix( in srgb, var(--aroma-shadow) 85%, transparent ); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transform: translateY(-16px); transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease; } #aroma-connection-banner.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } #aroma-connection-banner.is-online { background: color-mix( in srgb, var(--aroma-card-bg) 93%, var(--ui-success-soft) 7% ); border-color: color-mix( in srgb, var(--ui-success) 42%, var(--aroma-border) 58% ); } .aroma-connection-banner__content { display: flex; align-items: center; min-width: 0; gap: 10px; } .aroma-connection-banner__icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; color: var(--ui-danger); background: var(--ui-danger-soft); border-radius: 10px; font-size: 17px; font-weight: 900; } #aroma-connection-banner.is-online .aroma-connection-banner__icon { color: var(--ui-success); background: var(--ui-success-soft); } .aroma-connection-banner__text { min-width: 0; } .aroma-connection-banner__title { display: block; color: var(--aroma-heading); font-size: .86rem; font-weight: 850; } .aroma-connection-banner__message { display: block; margin-top: 2px; color: var(--aroma-muted); font-size: .75rem; line-height: 1.45; } .aroma-connection-banner__close { width: 30px !important; height: 30px !important; min-height: 30px !important; flex: 0 0 30px; padding: 0 !important; color: var(--aroma-muted) !important; background: transparent !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; font-size: 18px !important; } .aroma-connection-banner__close:hover { color: var(--aroma-heading) !important; background: color-mix( in srgb, var(--aroma-muted) 10%, transparent ) !important; transform: none !important; } /* Offline page state */ html.aroma-is-offline :is( button[type="submit"], input[type="submit"] ):not( [data-allow-offline="true"] ) { cursor: not-allowed !important; opacity: .62; } /* Offline form notice */ .aroma-offline-form-notice { display: none; margin-top: 8px; padding: 8px 10px; color: var(--ui-danger); background: var(--ui-danger-soft); border: 1px solid color-mix( in srgb, var(--ui-danger) 30%, transparent ); border-radius: 9px; font-size: .77rem; font-weight: 700; } html.aroma-is-offline .aroma-offline-form-notice { display: block; } @media (max-width: 650px) { #aroma-connection-banner { inset-inline: 8px; inset-block-start: 7px; width: auto; padding: 10px; } .aroma-connection-banner__message { font-size: .72rem; } } @media (prefers-reduced-motion: reduce) { #aroma-connection-banner { transition: none !important; transform: none !important; } } /* AROMA CONNECTION STATUS PHASE 4Q END */ /* AROMA QUICK CALCULATOR PHASE 4R START */ #aroma-calculator-trigger { width: 36px; height: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--aroma-header-text, #fff); background: var(--aroma-header-glass); border: 1px solid var(--aroma-header-border); border-radius: 10px; box-shadow: none; font-size: 16px; font-weight: 900; } #aroma-calculator-trigger:hover { color: var(--aroma-header-text, #fff); background: var(--aroma-header-glass-hover); transform: none; } .aroma-calculator { display: grid; gap: 12px; } .aroma-calculator__screen { padding: 13px; background: color-mix( in srgb, var(--aroma-card-bg) 92%, var(--aroma-primary) 8% ); border: 1px solid var(--aroma-border); border-radius: 14px; } #aroma-calculator-expression { width: 100%; min-height: 48px; direction: ltr; text-align: end; font-size: 1.05rem; font-weight: 750; font-variant-numeric: tabular-nums; } .aroma-calculator__result { min-height: 42px; display: flex; align-items: center; justify-content: flex-end; margin-top: 8px; padding: 8px 10px; direction: ltr; color: var(--aroma-heading); background: var(--aroma-input-bg); border: 1px solid var(--aroma-border); border-radius: 10px; font-size: 1.35rem; font-weight: 850; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .aroma-calculator__keys { display: grid; grid-template-columns: repeat(4, minmax(58px, 1fr)); gap: 8px; } .aroma-calculator__key { min-height: 46px !important; padding: 8px !important; color: var(--aroma-heading) !important; background: var(--aroma-card-bg) !important; border: 1px solid var(--aroma-border) !important; border-radius: 10px !important; box-shadow: none !important; font-size: .95rem !important; font-weight: 800 !important; } .aroma-calculator__key:hover { color: var(--aroma-primary) !important; background: color-mix( in srgb, var(--aroma-card-bg) 88%, var(--aroma-primary) 12% ) !important; border-color: var(--aroma-primary) !important; transform: none !important; } .aroma-calculator__key--operator { color: var(--aroma-primary) !important; background: color-mix( in srgb, var(--aroma-card-bg) 89%, var(--aroma-primary) 11% ) !important; } .aroma-calculator__key--danger { color: var(--ui-danger) !important; background: var(--ui-danger-soft) !important; } .aroma-calculator__key--equals { color: #fff !important; background: linear-gradient( 135deg, var(--aroma-primary), var(--aroma-secondary) ) !important; border-color: var(--aroma-primary) !important; } .aroma-calculator__actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .aroma-calculator__history { max-height: 175px; overflow-y: auto; padding: 8px; background: color-mix( in srgb, var(--aroma-card-bg) 96%, var(--aroma-primary) 4% ); border: 1px solid var(--aroma-border); border-radius: 11px; } .aroma-calculator__history-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px; color: var(--aroma-text); background: transparent; border: 0; border-radius: 8px; box-shadow: none; text-align: start; font-size: .8rem; } .aroma-calculator__history-item:hover { color: var(--aroma-heading); background: color-mix( in srgb, var(--aroma-card-bg) 89%, var(--aroma-primary) 11% ); transform: none; } .aroma-calculator__history-expression { direction: ltr; color: var(--aroma-muted); } .aroma-calculator__history-result { direction: ltr; color: var(--aroma-heading); font-weight: 800; } @media (max-width: 500px) { .aroma-calculator__keys { grid-template-columns: repeat(4, minmax(52px, 1fr)); } .aroma-calculator__key { min-height: 44px !important; } } /* AROMA QUICK CALCULATOR PHASE 4R END */ /* AROMA BASE V1 RESPONSIVE POLISH START */ .aroma-header-button, .aroma-theme-arrow, .aroma-profile-button { min-width: 42px; min-height: 42px; line-height: 1; white-space: nowrap; } .aroma-button-icon, .aroma-dropdown a > span:first-child, .aroma-dropdown button > span:first-child { width: 24px; min-width: 24px; height: 24px; display:inline-flex; align-items:center; justify-content:center; font-size:18px; line-height:1; overflow:hidden; } .aroma-profile-theme-cluster { gap: 7px !important; } .aroma-current-theme-name { max-width: 124px; } :is(.search-box,.search-wrapper,.table-search,.aroma-table-search) input[type="search"], :is(.search-box,.search-wrapper,.table-search,.aroma-table-search) input[type="text"] { min-height:44px; border-radius:12px !important; padding-inline:42px 14px !important; } .table-responsive, .aroma-table-scroll, .results { overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; } table { max-width:100%; } @media (max-width: 900px) { .aroma-system-header-inner { gap:10px !important; } .aroma-header-right-zone { gap:6px !important; min-width:0; } .aroma-header-button > span:not(.aroma-button-icon):not(.aroma-small-arrow) { display:none; } .aroma-header-button { padding-inline:9px !important; } .aroma-current-theme-name { display:none; } } @media (max-width: 600px) { .aroma-system-header { position:sticky; top:0; z-index:1000; } .aroma-system-header-inner { padding-inline:8px !important; } .aroma-brand span:last-child { display:none; } .aroma-theme-arrow { width:38px !important; min-width:38px !important; } :is(.card,.quick-card,.product-card,.exchange-card,.finance-box,.module) { border-radius:14px !important; } form .button-row, form .actions, .document-toolbar { display:grid !important; grid-template-columns:1fr 1fr; gap:8px; } form .button-row > *, form .actions > *, .document-toolbar > * { width:100%; min-height:44px; } } /* AROMA BASE V1 RESPONSIVE POLISH END */