/* * YashaaMail — Midnight Design System * Concept 2 · Midnight | Day / Night / Auto modes * Brand: Primary #044B54 Secondary #0E8EC0 Accent #F9C127 Success #55A679 * ───────────────────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════ 1. CSS VARIABLES — Night (default) ═══════════════════════════════════════════════════════════════════ */ :root { /* Sidebar — very dark navy */ --ym-sidebar-bg: #060c1a; --ym-sidebar-header-bg: #030812; --ym-sidebar-text: #e2eaf8; --ym-sidebar-active-bg: rgba(14, 142, 192, 0.22); --ym-sidebar-active-text: #5bc4f0; --ym-sidebar-active-bar: #0E8EC0; --ym-sidebar-hover-bg: rgba(0, 0, 0, 0.05); --ym-sidebar-divider: rgba(255, 255, 255, 0.07); --ym-sidebar-width: 230px; --ym-sidebar-sub-bg: #0e1830; --ym-sidebar-sub-border: rgba(249, 193, 39, 0.55); /* Top bar — distinctly darker than sidebar */ --ym-topbar-bg: #0d1427; --ym-topbar-border: rgba(255, 255, 255, 0.07); /* Content area — clearly different from topbar */ --ym-bg: #080f1e; --ym-surface: #111c32; --ym-card-bg: #111c32; --ym-card-border: rgba(255, 255, 255, 0.09); --ym-input-bg: #162038; --ym-input-border: rgba(255, 255, 255, 0.13); /* Typography — bright for dark bg */ --ym-text: #e2eaf8; --ym-text-secondary: #c4d4eb; --ym-muted: #e2eaf8; --ym-border: rgba(255, 255, 255, 0.09); /* Brand colours */ --ym-primary: #0c9aad; --ym-primary-hover: #0a8596; --ym-secondary: #0E8EC0; --ym-secondary-hover: #0a7aab; --ym-accent: #F9C127; --ym-accent-hover: #f0b600; --ym-success: #55A679; --ym-danger: #ef4444; --ym-warning: #f97316; --ym-info: #3b82f6; --ym-purple: #8b5cf6; /* Buttons */ --ym-btn-primary-bg: #F9C127; --ym-btn-primary-text: #1A1A1A; --ym-btn-primary-hover: #f0b600; --ym-btn-secondary-bg: #0E8EC0; --ym-btn-secondary-text: #ffffff; --ym-btn-outline-border: rgba(255, 255, 255, 0.25); --ym-btn-outline-text: #f1f5f9; /* Badges / Status */ --ym-badge-sent-bg: rgba(14, 142, 192, 0.2); --ym-badge-sent-text: #60bfea; --ym-badge-active-bg: rgba(85, 166, 121, 0.2); --ym-badge-active-text: #7dd3a8; --ym-badge-draft-bg: rgba(148, 163, 184, 0.15); --ym-badge-draft-text: #94a3b8; --ym-badge-failed-bg: rgba(239, 68, 68, 0.2); --ym-badge-failed-text: #f87171; /* Dashboard cards */ --ym-kpi-border-top: 3px solid var(--ym-secondary); --ym-row2w-gap: 1.25rem; /* Shadows */ --ym-shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --ym-shadow-md: 0 4px 12px rgba(0,0,0,0.35); /* Transitions */ --ym-transition: all 0.18s ease; /* Font */ --ym-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --ym-font-size-base: 0.9rem; --ym-radius-sm: 6px; --ym-radius-md: 10px; --ym-radius-lg: 14px; --ym-radius-xl: 20px; /* Button size standard */ --ym-btn-height: 36px; --ym-btn-padding: 0 16px; --ym-btn-font-size: 0.84rem; --ym-btn-radius: 8px; } /* ═══════════════════════════════════════════════════════════════════ 2. CSS VARIABLES — Day mode override ═══════════════════════════════════════════════════════════════════ */ html[data-ym-theme="day"] { --ym-sidebar-bg: #f0f5fb; --ym-sidebar-header-bg: #e2ecf7; --ym-sidebar-text: #111827; --ym-sidebar-active-bg: rgba(14, 142, 192, 0.13); --ym-sidebar-active-text: #0c7a95; --ym-sidebar-active-bar: #0E8EC0; --ym-sidebar-hover-bg: rgba(0, 0, 0, 0.05); --ym-sidebar-divider: rgba(0, 0, 0, 0.08); --ym-sidebar-sub-bg: #dde8f6; --ym-sidebar-sub-border: rgba(12, 154, 173, 0.35); /* Day: crisp bright whites and light blues */ --ym-topbar-bg: #ffffff; --ym-topbar-border: rgba(0, 0, 0, 0.1); --ym-bg: #dce8f5; --ym-surface: #c8d9ee; --ym-card-bg: #ffffff; --ym-card-border: rgba(0, 0, 0, 0.1); --ym-input-bg: #ffffff; --ym-input-border: rgba(0, 0, 0, 0.2); --ym-text: #070f1c; --ym-text-secondary: #1e293b; --ym-muted: #070f1c; --ym-border: rgba(0, 0, 0, 0.1); --ym-btn-outline-border: rgba(0, 0, 0, 0.22); --ym-btn-outline-text: #070f1c; --ym-shadow-sm: 0 1px 5px rgba(0,0,0,0.12); --ym-shadow-md: 0 4px 18px rgba(0,0,0,0.15); } /* ═══════════════════════════════════════════════════════════════════ 3. CSS VARIABLES — Auto mode (follows OS preference) ═══════════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: light) { html[data-ym-theme="auto"] { --ym-sidebar-bg: #f0f5fb; --ym-sidebar-header-bg: #e2ecf7; --ym-sidebar-sub-bg: #dde8f6; --ym-sidebar-sub-border: rgba(12, 154, 173, 0.35); --ym-topbar-bg: #ffffff; --ym-topbar-border: rgba(0,0,0,0.1); --ym-bg: #dce8f5; --ym-surface: #c8d9ee; --ym-card-bg: #ffffff; --ym-card-border: rgba(0,0,0,0.1); --ym-input-bg: #ffffff; --ym-input-border: rgba(0,0,0,0.2); --ym-text: #070f1c; --ym-text-secondary: #1e293b; --ym-muted: #070f1c; --ym-border: rgba(0,0,0,0.1); --ym-btn-outline-border: rgba(0,0,0,0.22); --ym-btn-outline-text: #070f1c; --ym-shadow-sm: 0 1px 5px rgba(0,0,0,0.12); --ym-shadow-md: 0 4px 18px rgba(0,0,0,0.15); } } /* ═══════════════════════════════════════════════════════════════════ 4. BASE & BODY ═══════════════════════════════════════════════════════════════════ */ html, body { font-family: var(--ym-font) !important; font-size: var(--ym-font-size-base) !important; color: var(--ym-text) !important; background-color: var(--ym-bg) !important; -webkit-font-smoothing: antialiased; } body * { color: inherit; } /* Content wrapper */ .app { background-color: var(--ym-bg) !important; } .content { background-color: var(--ym-bg) !important; } .content-wrapper { background-color: var(--ym-bg) !important; } /* Scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--ym-surface) transparent; } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--ym-surface); border-radius: 99px; } /* ═══════════════════════════════════════════════════════════════════ 5. SIDEBAR / SIDE-NAV ═══════════════════════════════════════════════════════════════════ */ .side-nav { background-color: var(--ym-sidebar-bg) !important; border-right: 1px solid var(--ym-sidebar-divider) !important; } /* Logo area */ .side-nav > a:first-child { background-color: var(--ym-sidebar-header-bg) !important; padding: 1.1rem 1rem !important; margin-bottom: 0.5rem !important; border-bottom: 1px solid var(--ym-sidebar-divider) !important; } /* Divider */ .side-nav .side-nav__devider { background-color: var(--ym-sidebar-divider) !important; opacity: 1 !important; } /* All nav links */ .side-nav .side-menu { color: var(--ym-sidebar-text) !important; border-radius: var(--ym-radius-md) !important; transition: var(--ym-transition) !important; height: 44px !important; margin-bottom: 2px !important; } .side-nav .side-menu:hover { background-color: var(--ym-sidebar-hover-bg) !important; color: #e2e8f0 !important; } /* Active nav item */ .side-nav .side-menu.side-menu--active, .side-nav .side-menu.side-menu--active:hover { background-color: var(--ym-sidebar-active-bg) !important; color: var(--ym-sidebar-active-text) !important; } /* Active left bar accent */ .side-nav .side-menu.side-menu--active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background-color: var(--ym-sidebar-active-bar) !important; border-radius: 0 3px 3px 0; } .side-nav .side-menu .side-menu__icon, .side-nav .side-menu .side-menu__icon i, .side-nav .side-menu .side-menu__icon svg { color: inherit !important; stroke: currentColor !important; } .side-nav .side-menu .side-menu__title { color: inherit !important; font-size: 0.855rem !important; font-weight: 400 !important; letter-spacing: 0.01em !important; } .side-nav .side-menu.side-menu--active .side-menu__title { font-weight: 600 !important; } /* Section headings in sidebar */ .side-nav .side-nav__devider + li > span, .side-nav li.side-nav__devider { color: rgba(255,255,255,0.55) !important; font-size: 0.7rem !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } /* Mobile overlay */ .side-nav.yashamail_sidebar_active { background-color: var(--ym-sidebar-bg) !important; } /* ── Submenus ─────────────────────────────────────────────────────── */ /* Submenu container — noticeably LIGHTER than the sidebar for visual contrast */ .side-nav > ul ul, .side-nav ul ul { background-color: var(--ym-sidebar-sub-bg) !important; border-left: 2px solid var(--ym-sidebar-sub-border) !important; border-radius: 0 6px 6px 0 !important; margin: 2px 8px 4px 18px !important; padding: 4px 0 !important; } /* Submenu items */ .side-nav > ul ul li > a.side-menu, .side-nav ul ul li > a.side-menu { height: 36px !important; font-size: 0.82rem !important; padding-left: 0.9rem !important; border-radius: 0 5px 5px 0 !important; color: rgba(255, 255, 255, 0.82) !important; margin-bottom: 1px !important; } .side-nav > ul ul li > a.side-menu:hover, .side-nav ul ul li > a.side-menu:hover { background-color: rgba(255,255,255,0.07) !important; color: #e2e8f0 !important; } .side-nav > ul ul li > a.side-menu.side-menu--active, .side-nav ul ul li > a.side-menu.side-menu--active { background-color: var(--ym-sidebar-active-bg) !important; color: var(--ym-sidebar-active-text) !important; } /* Remove dot indicator (can conflict with left border) */ .side-nav > ul ul li > a.side-menu::before, .side-nav ul ul li > a.side-menu::before { display: none !important; } /* Chevron / sub-icon */ .side-menu__sub-icon { color: var(--ym-sidebar-text) !important; transition: transform 0.2s ease !important; } .side-menu--open .side-menu__sub-icon, .side-menu--active .side-menu__sub-icon { transform: rotate(180deg) !important; color: var(--ym-sidebar-active-text) !important; } /* Feather icons — they render as inline , must inherit stroke colour */ .side-nav .side-menu svg[class*="feather"], .side-nav .side-menu [data-feather] svg, .side-nav .side-menu .feather { stroke: currentColor !important; width: 16px !important; height: 16px !important; color: inherit !important; } /* Section label dividers (e.g. "CAMPAIGNS", "LISTS") */ .side-nav li.side-nav__devider { color: rgba(255,255,255,0.55) !important; font-size: 0.68rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; padding: 10px 1.25rem 4px !important; } /* ═══════════════════════════════════════════════════════════════════ 6. TOP BAR ═══════════════════════════════════════════════════════════════════ */ .top-bar { background-color: transparent !important; border-bottom: none !important; padding: 0.5rem 1.5rem !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; } /* Breadcrumb */ .breadcrumb a, .breadcrumb__icon { color: var(--ym-muted) !important; } /* Top bar icon buttons */ /* Content area padding below top bar */ .content-wrapper, .wrapper, .content { padding-top: 0.25rem !important; } .top-bar .button { background-color: transparent !important; border-color: var(--ym-border) !important; color: var(--ym-muted) !important; height: 34px !important; width: 34px !important; border-radius: var(--ym-radius-sm) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .top-bar .button:hover { background-color: var(--ym-surface) !important; color: var(--ym-text) !important; } /* Notification bell */ .notification__icon { color: var(--ym-muted) !important; } /* Avatar */ .dropdown-toggle img { border: 2px solid var(--ym-accent) !important; } /* Theme toggle button — icon only, square */ #ym-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--ym-radius-sm); border: 1px solid var(--ym-border); background: transparent; color: var(--ym-muted); cursor: pointer; transition: var(--ym-transition); margin-right: 0.25rem; flex-shrink: 0; } #ym-theme-toggle:hover { background-color: var(--ym-surface); color: var(--ym-text); } #ym-theme-toggle i { font-size: 16px; } /* ═══════════════════════════════════════════════════════════════════ 7. CARDS / BOX ═══════════════════════════════════════════════════════════════════ */ .box, .ym-card { background-color: var(--ym-card-bg) !important; border: 1px solid var(--ym-card-border) !important; border-radius: var(--ym-radius-lg) !important; box-shadow: var(--ym-shadow-sm) !important; color: var(--ym-text) !important; } .box .box, .ym-card .ym-card { box-shadow: none !important; } /* Report boxes */ .report-box { background-color: var(--ym-card-bg) !important; } /* ═══════════════════════════════════════════════════════════════════ 8. BUTTONS — Unified 36px height, consistent style ═══════════════════════════════════════════════════════════════════ */ /* Reset all buttons first */ .btn, .button, button[type="submit"], button[type="button"], a.button, input[type="submit"] { height: var(--ym-btn-height) !important; min-height: var(--ym-btn-height) !important; padding: var(--ym-btn-padding) !important; font-size: var(--ym-btn-font-size) !important; font-weight: 600 !important; border-radius: var(--ym-btn-radius) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; cursor: pointer !important; transition: var(--ym-transition) !important; text-decoration: none !important; border: 1px solid transparent !important; white-space: nowrap !important; } /* Primary button = Yellow accent — buttons ONLY, not background divs */ .btn-primary, .button--primary, button.btn-primary, a.btn-primary { background-color: var(--ym-btn-primary-bg) !important; color: var(--ym-btn-primary-text) !important; border-color: var(--ym-btn-primary-bg) !important; } .btn-primary:hover, .button--primary:hover { background-color: var(--ym-btn-primary-hover) !important; border-color: var(--ym-btn-primary-hover) !important; color: var(--ym-btn-primary-text) !important; } /* bg-theme-1 as a CARD/BOX background → use card colour, NOT yellow */ /* Secondary button = Brand blue */ .btn-secondary, .button--secondary, button.btn-secondary, a.btn-secondary { background-color: var(--ym-btn-secondary-bg) !important; color: var(--ym-btn-secondary-text) !important; border-color: var(--ym-btn-secondary-bg) !important; } .btn-secondary:hover { background-color: var(--ym-secondary-hover) !important; border-color: var(--ym-secondary-hover) !important; } /* Outline / default button */ .btn-outline-secondary, .btn-outline, .button:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-warning) { background-color: transparent !important; color: var(--ym-btn-outline-text) !important; border-color: var(--ym-btn-outline-border) !important; } .btn-outline-secondary:hover, .button:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-warning):hover { background-color: var(--ym-surface) !important; color: var(--ym-text) !important; } /* Danger */ .btn-danger, .button--danger { background-color: var(--ym-danger) !important; color: #fff !important; border-color: var(--ym-danger) !important; } .btn-danger:hover { background-color: #dc2626 !important; } /* Success */ .btn-success, .button--success { background-color: var(--ym-success) !important; color: #fff !important; border-color: var(--ym-success) !important; } .btn-success:hover { background-color: #3d9b66 !important; } /* Warning */ .btn-warning { background-color: var(--ym-warning) !important; color: #fff !important; border-color: var(--ym-warning) !important; } /* Small button variant */ .btn-sm, .button--sm { height: 30px !important; min-height: 30px !important; padding: 0 10px !important; font-size: 0.78rem !important; } /* Large button variant */ .btn-lg, .button--lg { height: 42px !important; min-height: 42px !important; padding: 0 22px !important; font-size: 0.92rem !important; } /* ═══════════════════════════════════════════════════════════════════ 9. TYPOGRAPHY — All fonts #1A1A1A in day, #f1f5f9 in night ═══════════════════════════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6 { color: var(--ym-text) !important; font-weight: 600 !important; } p, span, div, label, li, td, th, a:not(.btn):not(.button):not([class*="ym-btn"]) { color: var(--ym-text) !important; } a:not(.btn):not(.button):not(.side-menu):not([class*="ym-btn"]) { color: var(--ym-secondary) !important; } a:not(.btn):not(.button):not(.side-menu):not([class*="ym-btn"]):hover { color: var(--ym-accent) !important; } small, .small, .text-xs { color: var(--ym-muted) !important; font-size: 0.76rem !important; } /* ═══════════════════════════════════════════════════════════════════ 10. FORMS — Inputs, Selects, Textareas ═══════════════════════════════════════════════════════════════════ */ .input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], input[type="time"], input[type="tel"], select, textarea { background-color: var(--ym-input-bg) !important; border: 1px solid var(--ym-input-border) !important; border-radius: var(--ym-radius-sm) !important; color: var(--ym-text) !important; font-size: 0.875rem !important; height: var(--ym-btn-height) !important; padding: 0 12px !important; transition: var(--ym-transition) !important; } textarea { height: auto !important; padding: 10px 12px !important; } .input:focus, input:focus, select:focus, textarea:focus { border-color: var(--ym-secondary) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(14, 142, 192, 0.15) !important; } ::placeholder { color: var(--ym-muted) !important; opacity: 0.7 !important; } /* Form labels */ label, .form-label { color: var(--ym-text) !important; font-weight: 500 !important; font-size: 0.84rem !important; } /* Input groups */ .input-group-text { background-color: var(--ym-surface) !important; border-color: var(--ym-input-border) !important; color: var(--ym-muted) !important; } /* Select2 */ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { background-color: var(--ym-input-bg) !important; border-color: var(--ym-input-border) !important; color: var(--ym-text) !important; } .select2-container--default .select2-results__option { background-color: var(--ym-card-bg) !important; color: var(--ym-text) !important; } .select2-container--default .select2-results__option--highlighted { background-color: var(--ym-sidebar-active-bg) !important; color: var(--ym-sidebar-active-text) !important; } .select2-dropdown { background-color: var(--ym-card-bg) !important; border-color: var(--ym-card-border) !important; } /* ═══════════════════════════════════════════════════════════════════ 11. TABLES ═══════════════════════════════════════════════════════════════════ */ .table, table { color: var(--ym-text) !important; width: 100% !important; } .table th, table th, .table-report th { background-color: var(--ym-surface) !important; color: var(--ym-muted) !important; font-size: 0.76rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; border-bottom: 1px solid var(--ym-card-border) !important; padding: 10px 14px !important; white-space: nowrap !important; } .table td, table td, .table-report td { background-color: var(--ym-card-bg) !important; color: var(--ym-text) !important; border-bottom: 1px solid var(--ym-card-border) !important; padding: 10px 14px !important; vertical-align: middle !important; font-size: 0.875rem !important; } .table tr:hover td, .table-report tr:hover td, tbody tr:hover td { background-color: var(--ym-surface) !important; } .table-report:not(.table-report--bordered) td { background-color: var(--ym-card-bg) !important; } /* ═══════════════════════════════════════════════════════════════════ 12. DROPDOWNS ═══════════════════════════════════════════════════════════════════ */ .dropdown-box__content, .dropdown-menu { background-color: var(--ym-card-bg) !important; border: 1px solid var(--ym-card-border) !important; border-radius: var(--ym-radius-md) !important; box-shadow: var(--ym-shadow-md) !important; } .dropdown-box__content a, .dropdown-menu a, .dropdown-menu li a { color: var(--ym-text) !important; } .dropdown-box__content a:hover, .dropdown-menu a:hover { background-color: var(--ym-surface) !important; color: var(--ym-accent) !important; } /* Account menu header */ .bg-theme-38 { background-color: var(--ym-card-bg) !important; border: 1px solid var(--ym-card-border) !important; } /* ═══════════════════════════════════════════════════════════════════ 13. BADGES & STATUS PILLS ═══════════════════════════════════════════════════════════════════ */ .badge, [class*="badge-"] { display: inline-flex !important; align-items: center !important; padding: 3px 10px !important; border-radius: 99px !important; font-size: 0.72rem !important; font-weight: 600 !important; letter-spacing: 0.03em !important; white-space: nowrap !important; } .badge-success, .bg-theme-9 { background-color: var(--ym-badge-active-bg) !important; color: var(--ym-badge-active-text) !important; } .badge-primary, .bg-theme-1.text-white { background-color: var(--ym-badge-sent-bg) !important; color: var(--ym-badge-sent-text) !important; } .badge-secondary { background-color: var(--ym-badge-draft-bg) !important; color: var(--ym-badge-draft-text) !important; } .badge-danger, .bg-theme-6 { background-color: var(--ym-badge-failed-bg) !important; color: var(--ym-badge-failed-text) !important; } .badge-warning { background-color: rgba(249, 193, 39, 0.2) !important; color: var(--ym-accent) !important; } /* ═══════════════════════════════════════════════════════════════════ 14. MODALS ═══════════════════════════════════════════════════════════════════ */ .modal-content, .modal-dialog .box { background-color: var(--ym-card-bg) !important; border: 1px solid var(--ym-card-border) !important; border-radius: var(--ym-radius-lg) !important; color: var(--ym-text) !important; } .modal-header { background-color: var(--ym-surface) !important; border-bottom: 1px solid var(--ym-card-border) !important; border-radius: var(--ym-radius-lg) var(--ym-radius-lg) 0 0 !important; padding: 1rem 1.25rem !important; } .modal-header .modal-title { color: var(--ym-text) !important; font-weight: 600 !important; } .modal-footer { border-top: 1px solid var(--ym-card-border) !important; background-color: var(--ym-surface) !important; border-radius: 0 0 var(--ym-radius-lg) var(--ym-radius-lg) !important; padding: 0.75rem 1.25rem !important; } .modal-backdrop { background-color: rgba(0,0,0,0.65) !important; } /* ═══════════════════════════════════════════════════════════════════ 15. PAGINATION ═══════════════════════════════════════════════════════════════════ */ .pagination .page-item .page-link { background-color: var(--ym-card-bg) !important; border-color: var(--ym-card-border) !important; color: var(--ym-text) !important; height: 34px !important; min-width: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0.84rem !important; border-radius: var(--ym-radius-sm) !important; transition: var(--ym-transition) !important; } .pagination .page-item.active .page-link { background-color: var(--ym-accent) !important; border-color: var(--ym-accent) !important; color: #1A1A1A !important; font-weight: 700 !important; } .pagination .page-item .page-link:hover { background-color: var(--ym-surface) !important; color: var(--ym-accent) !important; } /* ═══════════════════════════════════════════════════════════════════ 16. ALERTS ═══════════════════════════════════════════════════════════════════ */ .alert { border-radius: var(--ym-radius-md) !important; padding: 0.85rem 1rem !important; font-size: 0.875rem !important; border: 1px solid transparent !important; } .alert-success { background-color: rgba(85,166,121,0.15) !important; border-color: rgba(85,166,121,0.3) !important; color: #7dd3a8 !important; } .alert-danger, .alert-error { background-color: rgba(239,68,68,0.15) !important; border-color: rgba(239,68,68,0.3) !important; color: #f87171 !important; } .alert-warning { background-color: rgba(249,193,39,0.15) !important; border-color: rgba(249,193,39,0.3) !important; color: var(--ym-accent) !important; } .alert-info { background-color: rgba(14,142,192,0.15) !important; border-color: rgba(14,142,192,0.3) !important; color: var(--ym-sidebar-active-text) !important; } /* Day mode alert text override */ html[data-ym-theme="day"] .alert-success { color: #1a6640 !important; } html[data-ym-theme="day"] .alert-danger { color: #991b1b !important; } html[data-ym-theme="day"] .alert-warning { color: #92400e !important; } html[data-ym-theme="day"] .alert-info { color: #044B54 !important; } /* ═══════════════════════════════════════════════════════════════════ 17. TABS ═══════════════════════════════════════════════════════════════════ */ .nav-tabs { border-bottom: 1px solid var(--ym-card-border) !important; } .nav-tabs .nav-link { color: var(--ym-muted) !important; border: none !important; border-bottom: 2px solid transparent !important; padding: 0.6rem 1rem !important; font-weight: 500 !important; font-size: 0.875rem !important; transition: var(--ym-transition) !important; border-radius: 0 !important; } .nav-tabs .nav-link:hover { color: var(--ym-text) !important; } .nav-tabs .nav-link.active { color: var(--ym-accent) !important; border-bottom-color: var(--ym-accent) !important; background: transparent !important; font-weight: 600 !important; } /* ═══════════════════════════════════════════════════════════════════ 18. DASHBOARD COMPONENTS (ym-* utility classes) ═══════════════════════════════════════════════════════════════════ */ /* KPI / Stat card */ .ym-stat-card { background-color: var(--ym-card-bg); border: 1px solid var(--ym-card-border); border-radius: var(--ym-radius-lg); padding: 1.1rem 1.2rem; color: var(--ym-text); } .ym-stat-card .ym-label { font-size: 0.78rem; color: var(--ym-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } .ym-stat-card .ym-value { font-size: 1.85rem; font-weight: 700; color: var(--ym-text); line-height: 1.2; margin: 0.25rem 0; } .ym-stat-card .ym-trend-up { color: var(--ym-success) !important; font-size: 0.8rem; font-weight: 600; } .ym-stat-card .ym-trend-down { color: var(--ym-danger) !important; font-size: 0.8rem; font-weight: 600; } /* 2-column grid row */ .ym-row2w { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ym-row2w-gap); margin-bottom: 1.25rem; } @media (max-width: 900px) { .ym-row2w { grid-template-columns: 1fr; } } /* 4-column KPI row */ .ym-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem; } @media (max-width: 1100px) { .ym-kpi-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ym-kpi-row { grid-template-columns: 1fr; } } /* ym-card generic */ .ym-card { background-color: var(--ym-card-bg); border: 1px solid var(--ym-card-border); border-radius: var(--ym-radius-lg); color: var(--ym-text); } /* ═══════════════════════════════════════════════════════════════════ 19. NOTIFICATIONS PANEL ═══════════════════════════════════════════════════════════════════ */ .notification-content__box { background-color: var(--ym-card-bg) !important; border: 1px solid var(--ym-card-border) !important; color: var(--ym-text) !important; } .notification-content__title a { color: var(--ym-secondary) !important; } /* ═══════════════════════════════════════════════════════════════════ 20. BREADCRUMB ═══════════════════════════════════════════════════════════════════ */ .breadcrumb-item, .breadcrumb a { color: var(--ym-muted) !important; font-size: 0.82rem !important; } .breadcrumb-item.active { color: var(--ym-text) !important; } .breadcrumb-item + .breadcrumb-item::before { color: var(--ym-muted) !important; } /* ═══════════════════════════════════════════════════════════════════ 21. PAGE HEADER STANDARD PATTERN ═══════════════════════════════════════════════════════════════════ */ .ym-page-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; } .ym-page-header h1 { font-size: 1.45rem !important; font-weight: 700 !important; margin: 0 !important; color: var(--ym-text) !important; } .ym-page-header p { margin: 0.2rem 0 0 !important; font-size: 0.875rem !important; color: var(--ym-muted) !important; } /* ═══════════════════════════════════════════════════════════════════ 22. SWEETALERT & TOASTS ═══════════════════════════════════════════════════════════════════ */ .swal2-popup { background-color: var(--ym-card-bg) !important; color: var(--ym-text) !important; border: 1px solid var(--ym-card-border) !important; border-radius: var(--ym-radius-lg) !important; } .swal2-title { color: var(--ym-text) !important; } .swal2-html-container { color: var(--ym-muted) !important; } .swal2-styled.swal2-confirm { background-color: var(--ym-accent) !important; color: #1A1A1A !important; border-radius: var(--ym-btn-radius) !important; font-weight: 600 !important; } .swal2-styled.swal2-cancel { background-color: transparent !important; color: var(--ym-text) !important; border: 1px solid var(--ym-btn-outline-border) !important; border-radius: var(--ym-btn-radius) !important; } /* ═══════════════════════════════════════════════════════════════════ 23. MISC UTILITIES ═══════════════════════════════════════════════════════════════════ */ /* No-data / empty states */ .no-shadow { box-shadow: none !important; } /* Status dot */ .ym-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .ym-dot-success { background-color: var(--ym-success); } .ym-dot-danger { background-color: var(--ym-danger); } .ym-dot-warning { background-color: var(--ym-warning); } .ym-dot-info { background-color: var(--ym-secondary); } /* Intro-x animation override — don't fade in dark bg */ [class*="intro-"] { animation: none !important; opacity: 1 !important; transform: none !important; } /* Dark class fallback — existing tailwind dark overrides */ html.dark body, html.dark .content { background-color: var(--ym-bg) !important; color: var(--ym-text) !important; } /* ═══════════════════════════════════════════════════════════════════ 24. THEME TOGGLE STATES (icon labels) ═══════════════════════════════════════════════════════════════════ */ #ym-theme-toggle .ym-theme-label { font-size: 0.75rem; } /* Day mode button label */ html[data-ym-theme="day"] #ym-theme-toggle .ym-theme-label::after { content: 'Day'; } html[data-ym-theme="auto"] #ym-theme-toggle .ym-theme-label::after { content: 'Auto'; } /* Default (night) */ :root:not([data-ym-theme]) #ym-theme-toggle .ym-theme-label::after, html[data-ym-theme="night"] #ym-theme-toggle .ym-theme-label::after { content: 'Night'; } /* ═══════════════════════════════════════════════════════════════════ 25. RESPONSIVE ADJUSTMENTS ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { .ym-kpi-row { grid-template-columns: 1fr 1fr !important; } .ym-row2w { grid-template-columns: 1fr !important; } .ym-page-header { flex-direction: column !important; } .top-bar { padding: 0.5rem 1rem !important; } } /* ═══════════════════════════════════════════════════════════════════ 26. DAY MODE — EXPLICIT ELEMENT OVERRIDES (Variables alone can lose to existing app.css hardcoded rules; these direct rules ensure the light theme is clearly visible) ═══════════════════════════════════════════════════════════════════ */ /* Page / content background — strong blue-grey light */ html[data-ym-theme="day"] body, html[data-ym-theme="day"] .app, html[data-ym-theme="day"] .content, html[data-ym-theme="day"] .content-wrapper, html[data-ym-theme="day"] .wrapper { background-color: #dce8f5 !important; color: #070f1c !important; } /* Top bar — bright white with noticeable shadow */ html[data-ym-theme="day"] .top-bar { background-color: #ffffff !important; border-bottom: 1px solid rgba(0,0,0,0.12) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important; } html[data-ym-theme="day"] .top-bar .button, html[data-ym-theme="day"] #ym-theme-toggle { border-color: rgba(0,0,0,0.15) !important; color: #111827 !important; } html[data-ym-theme="day"] .breadcrumb a, html[data-ym-theme="day"] .breadcrumb__icon { color: #111827 !important; } /* Cards / boxes — pure white on blue-grey background = maximum contrast */ html[data-ym-theme="day"] .box, html[data-ym-theme="day"] .ym-card, html[data-ym-theme="day"] .report-box { background-color: #ffffff !important; border: 1px solid rgba(0,0,0,0.1) !important; color: #070f1c !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; } /* Tables */ html[data-ym-theme="day"] .table th, html[data-ym-theme="day"] table th, html[data-ym-theme="day"] .table-report th, html[data-ym-theme="day"] .ym-table th { background-color: #f1f5f9 !important; color: #111827 !important; border-bottom-color: rgba(0,0,0,0.08) !important; } html[data-ym-theme="day"] .ym-table td { background-color: #ffffff !important; color: #111827 !important; border-bottom-color: rgba(0,0,0,0.06) !important; } html[data-ym-theme="day"] .ym-table tr:hover td { background-color: #f8fafc !important; } html[data-ym-theme="day"] .table td, html[data-ym-theme="day"] table td, html[data-ym-theme="day"] .table-report td { background-color: #ffffff !important; color: #111827 !important; border-bottom-color: rgba(0,0,0,0.06) !important; } html[data-ym-theme="day"] .table tr:hover td, html[data-ym-theme="day"] tbody tr:hover td { background-color: #f8fafc !important; } /* Forms */ html[data-ym-theme="day"] input[type="text"], html[data-ym-theme="day"] input[type="email"], html[data-ym-theme="day"] input[type="password"], html[data-ym-theme="day"] input[type="number"], html[data-ym-theme="day"] input[type="search"], html[data-ym-theme="day"] input[type="url"], html[data-ym-theme="day"] input[type="date"], html[data-ym-theme="day"] input[type="tel"], html[data-ym-theme="day"] select, html[data-ym-theme="day"] textarea { background-color: #ffffff !important; border-color: rgba(0,0,0,0.18) !important; color: #111827 !important; } /* Text — everything dark */ html[data-ym-theme="day"] h1, html[data-ym-theme="day"] h2, html[data-ym-theme="day"] h3, html[data-ym-theme="day"] h4, html[data-ym-theme="day"] h5, html[data-ym-theme="day"] h6, html[data-ym-theme="day"] p, html[data-ym-theme="day"] span, html[data-ym-theme="day"] label, html[data-ym-theme="day"] li, html[data-ym-theme="day"] td, html[data-ym-theme="day"] th { color: #111827 !important; } html[data-ym-theme="day"] .text-gray-600, html[data-ym-theme="day"] .text-gray-500, html[data-ym-theme="day"] .text-gray-400, html[data-ym-theme="day"] small, html[data-ym-theme="day"] .small { color: #070f1c !important; } /* Dropdowns */ html[data-ym-theme="day"] .dropdown-box__content, html[data-ym-theme="day"] .dropdown-menu { background-color: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important; } html[data-ym-theme="day"] .dropdown-box__content a, html[data-ym-theme="day"] .dropdown-menu a { color: #111827 !important; } html[data-ym-theme="day"] .dropdown-box__content a:hover, html[data-ym-theme="day"] .dropdown-menu a:hover { background-color: #f1f5f9 !important; } /* Existing Tailwind dark: class overrides — strip dark tones from content area */ html[data-ym-theme="day"] .dark\:bg-dark-1, html[data-ym-theme="day"] .dark\:bg-dark-2, html[data-ym-theme="day"] .dark\:bg-dark-3, html[data-ym-theme="day"] .dark\:bg-dark-4, html[data-ym-theme="day"] .dark\:bg-dark-5, html[data-ym-theme="day"] .dark\:bg-dark-6 { background-color: #ffffff !important; } html[data-ym-theme="day"] .dark\:text-gray-300, html[data-ym-theme="day"] .dark\:text-gray-400, html[data-ym-theme="day"] .dark\:text-gray-600, html[data-ym-theme="day"] .dark\:text-white { color: #111827 !important; } html[data-ym-theme="day"] .dark\:border-dark-3, html[data-ym-theme="day"] .dark\:border-dark-5 { border-color: rgba(0,0,0,0.08) !important; } /* Modals */ html[data-ym-theme="day"] .modal-content, html[data-ym-theme="day"] .modal-dialog .box { background-color: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; color: #111827 !important; } html[data-ym-theme="day"] .modal-header, html[data-ym-theme="day"] .modal-footer { background-color: #f8fafc !important; border-color: rgba(0,0,0,0.08) !important; } /* Input group addon */ html[data-ym-theme="day"] .input-group-text { background-color: #f1f5f9 !important; border-color: rgba(0,0,0,0.18) !important; color: #111827 !important; } /* SweetAlert */ html[data-ym-theme="day"] .swal2-popup { background-color: #ffffff !important; color: #111827 !important; border-color: rgba(0,0,0,0.1) !important; } html[data-ym-theme="day"] .swal2-title { color: #111827 !important; } html[data-ym-theme="day"] .swal2-html-container { color: #111827 !important; } /* ═══════════════════════════════════════════════════════════════════ 27. CONTACTS PAGE — specific fixes ═══════════════════════════════════════════════════════════════════ */ /* Left contacts nav card — override bg-theme-1 yellow bug */ .box.bg-theme-1, div.intro-y.box.bg-theme-1 { background-color: var(--ym-card-bg) !important; border: 1px solid var(--ym-card-border) !important; color: var(--ym-text) !important; } /* Contacts nav links — proper text color */ .box.bg-theme-1 a, div.bg-theme-1 a { color: var(--ym-muted) !important; } .box.bg-theme-1 a:hover, div.bg-theme-1 a:hover { color: var(--ym-text) !important; background-color: var(--ym-sidebar-hover-bg) !important; } /* Active contact nav item (bg-theme-22 toggled by JS) */ .bg-theme-22 { background-color: var(--ym-sidebar-active-bg) !important; color: var(--ym-sidebar-active-text) !important; border-radius: 6px; } /* Contacts table — override hardcoded Tailwind whites/greys */ table.bg-white { background-color: var(--ym-card-bg) !important; } thead.bg-gray-900 { background-color: var(--ym-surface) !important; } thead.bg-gray-900 th { color: var(--ym-muted) !important; background-color: var(--ym-surface) !important; } .divide-y.divide-gray-300, .divide-y.divide-gray-200 { border-color: var(--ym-card-border) !important; } /* ── No-gray override: all Tailwind gray text → muted token (white/black per mode) ── */ .text-gray-300, .text-gray-400, .text-gray-500, .text-gray-500.text-sm, .text-gray-600, .text-gray-700, .dark\:text-gray-300, .dark\:text-gray-600 { color: var(--ym-muted) !important; } /* Add New Contact button in contacts card */ .box.bg-theme-1 .button, div.bg-theme-1 .button { background-color: var(--ym-accent) !important; color: #1A1A1A !important; border-color: var(--ym-accent) !important; } /* Contacts toolbar icons */ .border-b.border-gray-200 { border-color: var(--ym-card-border) !important; } .border-t.border-gray-200 { border-color: var(--ym-card-border) !important; } /* ═══════════════════════════════════════════════════════════════════ 28. AUTO MODE LIGHT — same explicit overrides when OS is light ═══════════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: light) { html[data-ym-theme="auto"] body, html[data-ym-theme="auto"] .app, html[data-ym-theme="auto"] .content, html[data-ym-theme="auto"] .content-wrapper { background-color: #f0f4f8 !important; color: #111827 !important; } html[data-ym-theme="auto"] .top-bar { background-color: #ffffff !important; border-bottom-color: rgba(0,0,0,0.1) !important; } html[data-ym-theme="auto"] .box, html[data-ym-theme="auto"] .ym-card { background-color: #ffffff !important; color: #111827 !important; border-color: rgba(0,0,0,0.08) !important; } html[data-ym-theme="auto"] .table td, html[data-ym-theme="auto"] table td { background-color: #ffffff !important; color: #111827 !important; } html[data-ym-theme="auto"] .table th, html[data-ym-theme="auto"] table th, html[data-ym-theme="auto"] .ym-table th { background-color: #f1f5f9 !important; color: #111827 !important; } html[data-ym-theme="auto"] .ym-table td { background-color: #ffffff !important; color: #111827 !important; } html[data-ym-theme="auto"] h1, html[data-ym-theme="auto"] h2, html[data-ym-theme="auto"] h3, html[data-ym-theme="auto"] h4, html[data-ym-theme="auto"] h5, html[data-ym-theme="auto"] h6, html[data-ym-theme="auto"] p, html[data-ym-theme="auto"] span, html[data-ym-theme="auto"] label, html[data-ym-theme="auto"] li, html[data-ym-theme="auto"] td, html[data-ym-theme="auto"] th { color: #111827 !important; } html[data-ym-theme="auto"] input, html[data-ym-theme="auto"] select, html[data-ym-theme="auto"] textarea { background-color: #ffffff !important; border-color: rgba(0,0,0,0.18) !important; color: #111827 !important; } html[data-ym-theme="auto"] .dark\:bg-dark-1, html[data-ym-theme="auto"] .dark\:bg-dark-2, html[data-ym-theme="auto"] .dark\:bg-dark-3, html[data-ym-theme="auto"] .dark\:bg-dark-6 { background-color: #ffffff !important; } html[data-ym-theme="auto"] body, html[data-ym-theme="auto"] .app, html[data-ym-theme="auto"] .content, html[data-ym-theme="auto"] .content-wrapper { background-color: #dce8f5 !important; } html[data-ym-theme="auto"] .box, html[data-ym-theme="auto"] .ym-card { background-color: #ffffff !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; } } /* ═══════════════════════════════════════════════════════════════════ 28. YM DESIGN SYSTEM — PAGE COMPONENTS (Classes used by redesigned Blade views: automation, campaign, reports, autoresponder, activity log, tracker, etc.) ═══════════════════════════════════════════════════════════════════ */ /* ── Page header ────────────────────────────────────────────────── */ .ym-pg-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; } .ym-pg-title { font-size: 1.45rem; font-weight: 700; margin: 0 0 0.15rem; color: var(--ym-text); } .ym-pg-sub { font-size: 0.875rem; color: var(--ym-muted); margin: 0; } /* ── Primary button ─────────────────────────────────────────────── */ .ym-btn-primary { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1.1rem; background: var(--ym-btn-primary-bg); color: var(--ym-btn-primary-text) !important; border: none; border-radius: 8px; font-size: 0.875rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.15s, transform 0.1s; white-space: nowrap; } .ym-btn-primary:hover { background: var(--ym-btn-primary-hover); color: var(--ym-btn-primary-text) !important; transform: translateY(-1px); } /* ── Stat grid + cards ──────────────────────────────────────────── */ .ym-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .ym-stat-card { background: var(--ym-card-bg); border: 1px solid var(--ym-card-border); border-radius: var(--ym-radius-lg); padding: 1.25rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .ym-stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 1.25rem; margin-bottom: 0.35rem; flex-shrink: 0; } .ym-stat-val { font-size: 1.75rem; font-weight: 800; line-height: 1; color: var(--ym-text); } .ym-stat-label { font-size: 0.82rem; color: var(--ym-muted); font-weight: 500; } /* ── Badge / pills ──────────────────────────────────────────────── */ .ym-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; } .ym-badge-success, .ym-badge-active { background: var(--ym-badge-active-bg); color: var(--ym-badge-active-text); } .ym-badge-draft, .ym-badge-inactive { background: var(--ym-badge-draft-bg); color: var(--ym-badge-draft-text); } .ym-badge-danger, .ym-badge-failed { background: var(--ym-badge-failed-bg); color: var(--ym-badge-failed-text); } .ym-badge-sent { background: var(--ym-badge-sent-bg); color: var(--ym-badge-sent-text); } /* ── Table + toolbar ────────────────────────────────────────────── */ .ym-toolbar { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--ym-card-border); flex-wrap: wrap; } .ym-toolbar-count { font-size: 0.82rem; font-weight: 600; color: var(--ym-muted); white-space: nowrap; } .ym-search { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; border: 1px solid var(--ym-border); border-radius: 8px; background: var(--ym-surface); min-width: 220px; } .ym-search i { color: var(--ym-muted); font-size: 0.95rem; } .ym-search input { border: none; background: transparent; outline: none; font-size: 0.85rem; color: var(--ym-text); width: 100%; } .ym-search input::placeholder { color: var(--ym-muted); } .ym-table-wrap { overflow-x: auto; } .ym-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .ym-table thead tr { border-bottom: 2px solid var(--ym-card-border); } .ym-table th { background: var(--ym-surface); color: var(--ym-muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 14px; text-align: left; white-space: nowrap; } .ym-table td { padding: 11px 14px; border-bottom: 1px solid var(--ym-card-border); color: var(--ym-text); background: var(--ym-card-bg); vertical-align: middle; } .ym-table tbody tr:last-child td { border-bottom: none; } .ym-table tbody tr:hover td { background: rgba(14,142,192,0.04); } /* ── Row action buttons ─────────────────────────────────────────── */ .ym-row-actions { display: flex; align-items: center; gap: 6px; } .ym-row-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 7px; border: 1px solid var(--ym-border); background: var(--ym-surface); color: var(--ym-text); text-decoration: none; font-size: 15px; transition: background 0.13s, border-color 0.13s, color 0.13s; cursor: pointer; } .ym-row-btn:hover { background: rgba(14,142,192,0.08); border-color: var(--ym-secondary); color: var(--ym-secondary); } /* ── Empty state ────────────────────────────────────────────────── */ .ym-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; text-align: center; color: var(--ym-muted); } .ym-empty p { margin: 0.5rem 0 0; font-size: 0.875rem; } /* ── Tab navigation ─────────────────────────────────────────────── */ .ym-tabs { display: flex; gap: 0.25rem; border-bottom: 2px solid var(--ym-card-border); margin-bottom: 1.25rem; } .ym-tab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.1rem; font-size: 0.875rem; font-weight: 500; color: var(--ym-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s, border-color 0.15s; white-space: nowrap; } .ym-tab:hover { color: var(--ym-text); } .ym-tab.active { color: var(--ym-secondary); border-bottom-color: var(--ym-secondary); font-weight: 600; } /* ── Day/Auto mode overrides for new components ─────────────────── */ html[data-ym-theme="day"] .ym-stat-card { background-color: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; } html[data-ym-theme="day"] .ym-stat-val { color: #070f1c !important; } html[data-ym-theme="day"] .ym-stat-label, html[data-ym-theme="day"] .ym-pg-sub, html[data-ym-theme="day"] .ym-toolbar-count, html[data-ym-theme="day"] .ym-muted { color: #070f1c !important; } html[data-ym-theme="day"] .ym-pg-title { color: #070f1c !important; } html[data-ym-theme="day"] .ym-search { background: #ffffff !important; border-color: rgba(0,0,0,0.15) !important; } html[data-ym-theme="day"] .ym-search input { color: #070f1c !important; } html[data-ym-theme="day"] .ym-toolbar { border-bottom-color: rgba(0,0,0,0.08) !important; } html[data-ym-theme="day"] .ym-badge-draft { color: #111827 !important; background: #e2e8f0 !important; } html[data-ym-theme="day"] .ym-badge-success { color: #166534 !important; background: #dcfce7 !important; } html[data-ym-theme="day"] .ym-tabs { border-bottom-color: rgba(0,0,0,0.1) !important; } html[data-ym-theme="day"] .ym-tab { color: #111827 !important; } html[data-ym-theme="day"] .ym-tab:hover { color: #070f1c !important; } html[data-ym-theme="day"] .ym-tab.active { color: var(--ym-secondary) !important; } html[data-ym-theme="day"] .ym-row-btn { background: #f8fafc !important; border-color: rgba(0,0,0,0.12) !important; color: #111827 !important; } html[data-ym-theme="day"] .ym-row-btn:hover { background: #e0f2fe !important; border-color: var(--ym-secondary) !important; color: var(--ym-secondary) !important; } html[data-ym-theme="day"] .ym-empty { color: #111827 !important; } @media (prefers-color-scheme: light) { html[data-ym-theme="auto"] .ym-stat-card { background-color: #ffffff !important; } html[data-ym-theme="auto"] .ym-stat-val { color: #070f1c !important; } html[data-ym-theme="auto"] .ym-stat-label { color: #070f1c !important; } html[data-ym-theme="auto"] .ym-pg-title { color: #070f1c !important; } html[data-ym-theme="auto"] .ym-tab { color: #111827 !important; } html[data-ym-theme="auto"] .ym-tab.active { color: var(--ym-secondary) !important; } } /* ── Hidden utility ─────────────────────────────────────────────── */ .hidden { display: none !important; } /* ══════════════════════════════════════════════════════════════════ § 29 — EXTENDED DESIGN SYSTEM COMPONENTS ══════════════════════════════════════════════════════════════════ */ /* ── Page header actions area ───────────────────────────────────── */ .ym-pg-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } /* ── CTA Button (prominent page-level action) ───────────────────── */ .ym-btn-cta { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1.1rem; border-radius: 8px; font-size: 0.875rem; font-weight: 600; background: var(--ym-secondary); color: #ffffff !important; border: none; text-decoration: none; cursor: pointer; transition: opacity 0.15s; white-space: nowrap; } .ym-btn-cta:hover { opacity: 0.88; color: #ffffff; } /* ── Danger Button ──────────────────────────────────────────────── */ .ym-btn-danger { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1.1rem; border-radius: 8px; font-size: 0.875rem; font-weight: 600; background: #dc2626; color: #ffffff; border: none; text-decoration: none; cursor: pointer; transition: opacity 0.15s; white-space: nowrap; } .ym-btn-danger:hover { opacity: 0.88; color: #ffffff; } /* ── Outline Button ─────────────────────────────────────────────── */ .ym-btn-outline { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1.1rem; border-radius: 8px; font-size: 0.875rem; font-weight: 600; background: transparent; color: var(--ym-text); border: 1px solid var(--ym-border); text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s; white-space: nowrap; } .ym-btn-outline:hover { background: var(--ym-surface); border-color: var(--ym-secondary); color: var(--ym-secondary); } /* ── Danger row action button ───────────────────────────────────── */ .ym-row-btn-danger { color: #ef4444 !important; border-color: rgba(239,68,68,0.25) !important; } .ym-row-btn-danger:hover { background: rgba(239,68,68,0.08) !important; border-color: #ef4444 !important; color: #ef4444 !important; } /* ── Tag pills (type labels) ────────────────────────────────────── */ .ym-tag-email, .ym-tag-sms, .ym-tag-auto { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 12px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .ym-tag-email { background: rgba(59,130,246,0.15); color: #60a5fa; } .ym-tag-sms { background: rgba(168,85,247,0.15); color: #c084fc; } .ym-tag-auto { background: rgba(245,158,11,0.15); color: #fbbf24; } /* ── Badge - running ────────────────────────────────────────────── */ .ym-badge-running { background: rgba(14,142,192,0.18); color: #38bdf8; } /* ── Pagination bar ─────────────────────────────────────────────── */ .ym-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 1.1rem; border-top: 1px solid var(--ym-card-border); font-size: 0.8rem; color: var(--ym-text); } .ym-pager span { color: var(--ym-text); } .ym-pager nav { display: flex; gap: 4px; } .ym-pager nav a, .ym-pager nav span { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--ym-border); background: var(--ym-surface); color: var(--ym-text); text-decoration: none; font-size: 0.8rem; transition: background 0.12s, border-color 0.12s; } .ym-pager nav a:hover { background: var(--ym-secondary); border-color: var(--ym-secondary); color: #fff; } .ym-pager nav span[aria-current] { background: var(--ym-secondary); border-color: var(--ym-secondary); color: #fff; } /* ── Card sub-components ────────────────────────────────────────── */ .ym-card-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--ym-card-border); } .ym-card-title { font-size: 0.95rem; font-weight: 600; color: var(--ym-text); } .ym-card-footer { padding: 0.75rem 1.25rem; border-top: 1px solid var(--ym-card-border); font-size: 0.8rem; color: var(--ym-text); } /* ── Back / breadcrumb link ─────────────────────────────────────── */ .ym-back-link { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--ym-text); text-decoration: none; margin-bottom: 0.75rem; transition: color 0.12s; } .ym-back-link:hover { color: var(--ym-secondary); } /* ── Divider ────────────────────────────────────────────────────── */ .ym-divider { border: none; border-top: 1px solid var(--ym-card-border); margin: 1rem 0; } /* ── Alert / warning boxes ──────────────────────────────────────── */ .ym-alert-error { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; border-radius: 8px; background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.25); color: #fca5a5; font-size: 0.875rem; margin-bottom: 1rem; } .ym-warning-box { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; border-radius: 8px; background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.25); margin-bottom: 1rem; } .ym-warning-icon { color: #fbbf24; font-size: 1.1rem; flex-shrink: 0; } .ym-warning-text { font-size: 0.875rem; color: var(--ym-text); } /* ── SMTP Server cards ──────────────────────────────────────────── */ .ym-server-card { background: var(--ym-card-bg); border: 1px solid var(--ym-card-border); border-radius: 10px; padding: 1.1rem 1.25rem; margin-bottom: 0.75rem; transition: border-color 0.15s; } .ym-server-card:hover { border-color: var(--ym-secondary); } .ym-server-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .ym-server-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(14,142,192,0.12); display: flex; align-items: center; justify-content: center; color: var(--ym-secondary); font-size: 1rem; flex-shrink: 0; } .ym-server-name { font-weight: 600; color: var(--ym-text); font-size: 0.9rem; } .ym-server-host { font-size: 0.78rem; color: var(--ym-muted); } .ym-server-details { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.8rem; color: var(--ym-text); margin-bottom: 0.5rem; } .ym-server-actions { display: flex; align-items: center; gap: 0.5rem; } .ym-server-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; } /* ── Subscription plan cards ────────────────────────────────────── */ .ym-plans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .ym-plan-card { background: var(--ym-card-bg); border: 1px solid var(--ym-card-border); border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; transition: border-color 0.15s, box-shadow 0.15s; } .ym-plan-card:hover { border-color: var(--ym-secondary); box-shadow: 0 4px 20px rgba(14,142,192,0.12); } .ym-plan-icon { font-size: 2rem; } .ym-plan-name { font-size: 1.1rem; font-weight: 700; color: var(--ym-text); } .ym-plan-desc { font-size: 0.85rem; color: var(--ym-text); } .ym-plan-price { font-size: 1.5rem; font-weight: 700; color: var(--ym-secondary); } .ym-plan-meta { font-size: 0.78rem; color: var(--ym-text); } .ym-plan-actions { display: flex; gap: 0.5rem; margin-top: auto; flex-wrap: wrap; } /* ── Day mode overrides for §29 ─────────────────────────────────── */ html[data-ym-theme="day"] .ym-btn-outline { color: #070f1c !important; border-color: rgba(0,0,0,0.18) !important; } html[data-ym-theme="day"] .ym-btn-outline:hover { border-color: var(--ym-secondary) !important; color: var(--ym-secondary) !important; background: #e0f2fe !important; } html[data-ym-theme="day"] .ym-tag-email { background: #dbeafe !important; color: #1d4ed8 !important; } html[data-ym-theme="day"] .ym-tag-sms { background: #f3e8ff !important; color: #7e22ce !important; } html[data-ym-theme="day"] .ym-tag-auto { background: #fef3c7 !important; color: #92400e !important; } html[data-ym-theme="day"] .ym-badge-running { background: #e0f2fe !important; color: #0369a1 !important; } html[data-ym-theme="day"] .ym-pager { border-top-color: rgba(0,0,0,0.08) !important; color: #070f1c !important; } html[data-ym-theme="day"] .ym-pager nav a, html[data-ym-theme="day"] .ym-pager nav span { background: #ffffff !important; border-color: rgba(0,0,0,0.15) !important; color: #070f1c !important; } html[data-ym-theme="day"] .ym-pager nav a:hover { background: var(--ym-secondary) !important; color: #fff !important; } html[data-ym-theme="day"] .ym-card-head { border-bottom-color: rgba(0,0,0,0.08) !important; } html[data-ym-theme="day"] .ym-card-title { color: #070f1c !important; } html[data-ym-theme="day"] .ym-card-footer { border-top-color: rgba(0,0,0,0.08) !important; color: #070f1c !important; } html[data-ym-theme="day"] .ym-back-link { color: #070f1c !important; } html[data-ym-theme="day"] .ym-back-link:hover { color: var(--ym-secondary) !important; } html[data-ym-theme="day"] .ym-divider { border-top-color: rgba(0,0,0,0.1) !important; } html[data-ym-theme="day"] .ym-alert-error { background: #fee2e2 !important; border-color: #fca5a5 !important; color: #991b1b !important; } html[data-ym-theme="day"] .ym-warning-box { background: #fffbeb !important; border-color: #fde68a !important; } html[data-ym-theme="day"] .ym-warning-text { color: #070f1c !important; } html[data-ym-theme="day"] .ym-server-card { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; } html[data-ym-theme="day"] .ym-server-name { color: #070f1c !important; } html[data-ym-theme="day"] .ym-server-details { color: #070f1c !important; } html[data-ym-theme="day"] .ym-plan-card { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; } html[data-ym-theme="day"] .ym-plan-name { color: #070f1c !important; } html[data-ym-theme="day"] .ym-plan-desc { color: #070f1c !important; } html[data-ym-theme="day"] .ym-plan-meta { color: #070f1c !important; } /* ══════════════════════════════════════════════════════════════════ § 30 — GLOBAL TAILWIND GRAY TEXT OVERRIDE Forces ALL gray text classes to use the theme text color so no hardcoded gray leaks through on any page, in any theme mode. ══════════════════════════════════════════════════════════════════ */ .text-gray-100, .text-gray-200, .text-gray-300, .text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900, .dark\:text-gray-100, .dark\:text-gray-200, .dark\:text-gray-300, .dark\:text-gray-400, .dark\:text-gray-500, .dark\:text-gray-600, .dark\:text-gray-700 { color: var(--ym-text) !important; } /* Placeholder text — keep slightly muted but still readable */ .placeholder-theme-13::placeholder, .placeholder-gray-400::placeholder, .placeholder-gray-500::placeholder { color: var(--ym-muted) !important; opacity: 1; } /* Border-gray overrides — use theme border variable */ .border-gray-100, .border-gray-200, .border-gray-300, .divide-gray-200, .divide-gray-300 { border-color: var(--ym-card-border) !important; } /* Background gray overrides — use theme surface */ .bg-gray-100, .bg-gray-50 { background-color: var(--ym-surface) !important; } /* Muted helper used in some inline descriptions */ .text-muted-custom { color: var(--ym-text) !important; } /* ── DataTables footer / info text ──────────────────────────────── */ .dataTables_info, .dataTables_paginate, .dataTables_length, .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label { color: var(--ym-text) !important; } .dataTables_paginate .paginate_button { color: var(--ym-text) !important; } .dataTables_paginate .paginate_button.current, .dataTables_paginate .paginate_button.current:hover { background: var(--ym-secondary) !important; color: #ffffff !important; border-color: var(--ym-secondary) !important; } /* ── Select2 / Choices dropdowns ────────────────────────────────── */ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { background-color: var(--ym-surface) !important; border-color: var(--ym-border) !important; color: var(--ym-text) !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ym-text) !important; } .select2-dropdown { background-color: var(--ym-card-bg) !important; border-color: var(--ym-border) !important; } .select2-container--default .select2-results__option { color: var(--ym-text) !important; } .select2-container--default .select2-results__option--highlighted { background-color: var(--ym-secondary) !important; color: #ffffff !important; } /* ── Form inputs global ─────────────────────────────────────────── */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="tel"], textarea, select { color: var(--ym-text) !important; background-color: var(--ym-surface) !important; border-color: var(--ym-border) !important; } input::placeholder, textarea::placeholder { color: var(--ym-muted) !important; opacity: 1; } /* Day mode overrides for DataTables and forms */ html[data-ym-theme="day"] .dataTables_info, html[data-ym-theme="day"] .dataTables_length label, html[data-ym-theme="day"] .dataTables_filter label, html[data-ym-theme="day"] .dataTables_paginate .paginate_button { color: #070f1c !important; } html[data-ym-theme="day"] input[type="text"], html[data-ym-theme="day"] input[type="email"], html[data-ym-theme="day"] input[type="password"], html[data-ym-theme="day"] input[type="number"], html[data-ym-theme="day"] input[type="search"], html[data-ym-theme="day"] textarea, html[data-ym-theme="day"] select { color: #070f1c !important; background-color: #ffffff !important; border-color: rgba(0,0,0,0.15) !important; } html[data-ym-theme="day"] input::placeholder, html[data-ym-theme="day"] textarea::placeholder { color: #475569 !important; } /* DAY MODE SIDEBAR ELEMENT OVERRIDES (Hardcoded colors in sidebar rules need explicit day overrides) */ /* Hover text dark instead of light */ html[data-ym-theme="day"] .side-nav .side-menu:hover { color: #111827 !important; } /* Section headings dark tinted instead of white tinted */ html[data-ym-theme="day"] .side-nav .side-nav__devider + li > span, html[data-ym-theme="day"] .side-nav li.side-nav__devider { color: rgba(30, 41, 59, 0.55) !important; } /* Submenu items dark text */ html[data-ym-theme="day"] .side-nav > ul ul li > a.side-menu, html[data-ym-theme="day"] .side-nav ul ul li > a.side-menu { color: rgba(30, 41, 59, 0.85) !important; } /* Submenu hover */ html[data-ym-theme="day"] .side-nav > ul ul li > a.side-menu:hover, html[data-ym-theme="day"] .side-nav ul ul li > a.side-menu:hover { background-color: rgba(0, 0, 0, 0.05) !important; color: #111827 !important; } /* Chevron icon */ html[data-ym-theme="day"] .side-menu__sub-icon { color: #111827 !important; } /* Submenu container background explicit override (variable alone loses to dark: classes) */ html[data-ym-theme="day"] .side-nav > ul ul, html[data-ym-theme="day"] .side-nav ul ul { background-color: #dde8f6 !important; border-left-color: rgba(12, 154, 173, 0.35) !important; } /* Submenu item backgrounds app.css applies rgb(60,68,76) dark; override to transparent */ html[data-ym-theme="day"] .side-nav > ul ul li > a.side-menu, html[data-ym-theme="day"] .side-nav ul ul li > a.side-menu { background-color: transparent !important; color: rgba(30, 41, 59, 0.85) !important; } html[data-ym-theme="day"] .side-nav > ul ul li > a.side-menu:hover, html[data-ym-theme="day"] .side-nav ul ul li > a.side-menu:hover { background-color: rgba(0, 0, 0, 0.06) !important; color: #111827 !important; } html[data-ym-theme="day"] .side-nav > ul ul li > a.side-menu.side-menu--active, html[data-ym-theme="day"] .side-nav ul ul li > a.side-menu.side-menu--active { background-color: rgba(14, 142, 192, 0.13) !important; color: #0c7a95 !important; } /* DAY MODE ACTIVE SIDEBAR ITEM FULL OVERRIDE app.css sets dark rgba(41,49,69) bg and title/icon child colors that fight our variables. These !important rules win on every child. */ /* Active item row light teal bg, dark teal text */ html[data-ym-theme="day"] .side-nav .side-menu.side-menu--active, html[data-ym-theme="day"] .side-nav .side-menu.side-menu--active:hover, html[data-ym-theme="day"] .side-nav > ul > li > .side-menu.side-menu--active { background-color: rgba(14, 142, 192, 0.13) !important; color: #0c7a95 !important; } /* Title child */ html[data-ym-theme="day"] .side-nav .side-menu.side-menu--active .side-menu__title, html[data-ym-theme="day"] .side-nav > ul > li > .side-menu.side-menu--active .side-menu__title { color: #0c7a95 !important; } /* Icon child */ html[data-ym-theme="day"] .side-nav .side-menu.side-menu--active .side-menu__icon, html[data-ym-theme="day"] .side-nav .side-menu.side-menu--active .side-menu__icon i, html[data-ym-theme="day"] .side-nav .side-menu.side-menu--active .side-menu__icon svg, html[data-ym-theme="day"] .side-nav > ul > li > .side-menu.side-menu--active .side-menu__icon { color: #0c7a95 !important; } /* Icon ::before pseudo app.css sets it to rgba(241,245,248) light bg dot */ html[data-ym-theme="day"] .side-nav > ul > li > .side-menu.side-menu--active .side-menu__icon::before, html[data-ym-theme="day"] .side-nav .side-menu.side-menu--active .side-menu__icon::before { background-color: transparent !important; } /* CSS :active pseudo during click prevent dark flash */ html[data-ym-theme="day"] .side-nav .side-menu:active, html[data-ym-theme="day"] .side-nav .side-menu:active .side-menu__title, html[data-ym-theme="day"] .side-nav .side-menu:active .side-menu__icon { background-color: rgba(14, 142, 192, 0.18) !important; color: #0a6577 !important; } /* ═══════════════════════════════════════════════════════════════════ YM-DAY-SIDEBAR-COMPLETE-FIX Full Day-mode sidebar override — text, hover bg, ::before overlay iVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCVCV@((ĸͥȁѕ͔ѕЃPɬ)ѵmф崵ѡ􉑅tͥ؀ͥ԰)ѵmф崵ѡ􉑅tͥ؀ͥԀͥ}}ѥѱ)ѵmф崵ѡ􉑅tͥ؀ͥԀͥ}})ѵmф崵ѡ􉑅tͥ؀ͥԀͥ}})ѵmф崵ѡ􉑅tͥ؀ͥԀͥ}}ٜ(而܀х)((ȸ!ٕȁхєPЁɬѕЀ)ѵmф崵ѡ􉑅tͥ؀ͥ顽ٕȰ)ѵmф崵ѡ􉑅tͥ؀հͥ顽ٕȁ(ɽչɝԤх(而܀х))ѵmф崵ѡ􉑅tͥ؀ͥ顽ٕȀͥ}}ѥѱ)ѵmф崵ѡ􉑅tͥ؀ͥ顽ٕȀͥ}})ѵmф崵ѡ􉑅tͥ؀ͥ顽ٕȀͥ}}(而܀х)((̸-ѡɬ鉕ɔٕɱ䀡͕́̀ ٕȤ)ѵmф崵ѡ􉑅tͥ؀հͥԀͥ}}鉕ɔ)ѵmф崵ѡ􉑅tͥ؀հͥԀͥ}}鉕ɔ(ɽչɅɕЀх)((иѥٔͥȁѕPѕݥѠɬѕЀ)ѵmф崵ѡ􉑅tͥ؀ͥԹͥԴѥٔ)ѵmф崵ѡ􉑅tͥ؀ͥԹͥԴѥٔ顽ٕȰ)ѵmф崵ѡ􉑅tͥ؀հͥԹͥԴѥٔ(ɽչɝаȰȰ̤х(而܀х))ѵmф崵ѡ􉑅tͥ؀ͥԹͥԴѥٔͥ}}ѥѱ)ѵmф崵ѡ􉑅tͥ؀ͥԹͥԴѥٔͥ}})ѵmф崵ѡ􉑅tͥ؀ͥԹͥԴѥٔͥ}})ѵmф崵ѡ􉑅tͥ؀ͥԹͥԴѥٔͥ}}ٜ(而܀х)((Ը 配ѥٔ͠)ѵmф崵ѡ􉑅tͥ؀ͥ配ѥٔ)ѵmф崵ѡ􉑅tͥ؀հͥ配ѥٔ(ɽչɝаȰȰऀх(而܀х))ѵmф崵ѡ􉑅tͥ؀ͥ配ѥٔͥ}}ѥѱ)ѵmф崵ѡ􉑅tͥ؀ͥ配ѥٔͥ}})ѵmф崵ѡ􉑅tͥ؀ͥ配ѥٔͥ}}(而܀х)((ظMՉԁѕ͔́)ѵmф崵ѡ􉑅tͥ؀հհͥ԰)ѵmф崵ѡ􉑅tͥ؁հհͥԁ(ɽչɅɕЀх(而܀х))ѵmф崵ѡ􉑅tͥ؀հհͥԀͥ}}ѥѱ)ѵmф崵ѡ􉑅tͥ؁հհͥԀͥ}}ѥѱ(而܀х)((ܸMՉԁѕٕȀ)ѵmф崵ѡ􉑅tͥ؀հհͥ顽ٕȰ)ѵmф崵ѡ􉑅tͥ؁հհͥ顽ٕȁ(ɽչɝؤх(而܀х)((กMՉԁѥٔ)ѵmф崵ѡ􉑅tͥ؀հհͥԹͥԴѥٔ)ѵmф崵ѡ􉑅tͥ؁հհͥԹͥԴѥٔ(ɽչɝаȰȰ̤х(而܀х)((丁٥ȁ̀)ѵmф崵ѡ􉑅tͥ؀ͥ}}٥Ȱ)ѵmф崵ѡ􉑅tͥ؀ͥ}}٥Ȁ(ɝİ䰀Ԥх)((MՈɽ)ѵmф崵ѡ􉑅tͥ}}Ո(而܀х)((d5=Ոԁѕ́ɬ)ѵmф崵ѡ􉑅tͥ؁հհͥ鹽РͥԴѥٔ)ѵmф崵ѡ􉑅tͥ؁հհͥ鹽РͥԴѥٔͥ}}ѥѱ)ѵmф崵ѡ􉑅tͥ؁հհͥ鹽РͥԴѥٔͥ}})ѵmф崵ѡ􉑅tͥ؁հհͥ鹽РͥԴѥٔͥ}}(而܀х)((d5=ɕЁѕ́х䁑ɬЁѕ)ѵmф崵ѡ􉑅tͥ؀ͥԹͥԴѥٔͥԴ)ѵmф崵ѡ􉑅tͥ؀հͥԹͥԴѥٔͥԴ(ɽչɅɕЀх(而܀х))ѵmф崵ѡ􉑅tͥ؀ͥԹͥԴѥٔͥԴͥ}}ѥѱ)ѵmф崵ѡ􉑅tͥ؀ͥԹͥԴѥٔͥԴͥ}})ѵmф崵ѡ􉑅tͥ؀ͥԹͥԴѥٔͥԴͥ}})ѵmф崵ѡ􉑅tͥ؀ͥԹͥԴѥٔͥԴͥ}}Ո(而܀х))ѵmф崵ѡ􉑅tͥ؀ͥԹͥԴѥٔͥԴ顽ٕȁ(ɽչɝԤх(而܀х)((d5=聅ѥٔѕѕЁɬ䁉ɽչ́Ѐ)ѵmф崵ѡ􉑅tͥ؀ͥԹͥԴѥٔ鹽РͥԴ)ѵmф崵ѡ􉑅tͥ؀ͥԹͥԴѥٔ鹽РͥԴͥ}}ѥѱ)ѵmф崵ѡ􉑅tͥ؀ͥԹͥԴѥٔ鹽РͥԴͥ}})ѵmф崵ѡ􉑅tͥ؀ͥԹͥԴѥٔ鹽РͥԴͥ}}(而܀х)((d5=聵ѥٔԁٕɥɍɬ)ѵmф崵ѡ􉑅tͥ؀ѥٔ԰)ѵmф崵ѡ􉑅tͥ؀ѥٔԀͥ}}ѥѱ)ѵmф崵ѡ􉑅tͥ؀ѥٔԀͥ}})ѵmф崵ѡ􉑅tͥ؀ѥٔԀͥ}})ѵmф崵ѡ􉑅tͥ؀ѥٔԁٜ(而܀х(聍ɕ )(