/* ========================================================== DAMIOLINK UI PASSWORD MANAGER - LIGHT THEME Loaded AFTER pro-theme-final.css ========================================================== */ html[data-theme="light"], html[data-theme="light"] body { background: var(--dl-bg) !important; color: var(--dl-text) !important; } html[data-theme="light"] body:not(.login-body) { background: radial-gradient( circle at 52% -10%, rgba(37, 99, 235, .075), transparent 38% ), linear-gradient( 180deg, #f8faff 0%, #f3f6fb 100% ) !important; } /* ========================================================== TOPBAR ========================================================== */ html[data-theme="light"] .topbar { background: rgba(255,255,255,.96) !important; border-bottom: 1px solid var(--dl-border) !important; color: var(--dl-text) !important; box-shadow: 0 4px 20px rgba(16,24,40,.045) !important; } html[data-theme="light"] .pm-main-brand, html[data-theme="light"] .topbar .logo { color: var(--dl-text) !important; } html[data-theme="light"] .user-area, html[data-theme="light"] .desktop-user { color: var(--dl-text-soft) !important; } html[data-theme="light"] .role { color: #175cd3 !important; background: #eef4ff !important; border: 1px solid #d7e6ff !important; } html[data-theme="light"] .logout { color: #b4232f !important; } /* ========================================================== SIDEBAR ========================================================== */ html[data-theme="light"] .sidebar { background: rgba(255,255,255,.94) !important; border-right: 1px solid var(--dl-border) !important; color: var(--dl-text-soft) !important; box-shadow: 5px 0 22px rgba(16,24,40,.025); } html[data-theme="light"] .sidebar nav a { color: #526174 !important; background: transparent !important; } html[data-theme="light"] .sidebar nav a:hover { color: #175cd3 !important; background: #f1f6ff !important; border-color: #e0ebff !important; } html[data-theme="light"] .sidebar nav a.active { color: #1558c0 !important; background: linear-gradient( 90deg, #eaf2ff, #f3f7ff ) !important; border-color: #d6e5ff !important; box-shadow: inset 3px 0 0 var(--dl-primary) !important; } html[data-theme="light"] .pm-nav-symbol { color: #4f86d9 !important; } html[data-theme="light"] .separator { border-color: var(--dl-border) !important; } /* ========================================================== CONTENT ========================================================== */ html[data-theme="light"] .content { color: var(--dl-text) !important; } html[data-theme="light"] .page-header h1 { color: var(--dl-text) !important; } html[data-theme="light"] .page-header p { color: var(--dl-muted) !important; } /* ========================================================== VAULT CARDS ========================================================== */ html[data-theme="light"] .vault-card { background: #ffffff !important; border: 1px solid var(--dl-border) !important; box-shadow: 0 5px 18px rgba(16,24,40,.055) !important; } html[data-theme="light"] .vault-card:hover { border-color: #b8d3f8 !important; box-shadow: 0 10px 28px rgba(16,24,40,.085) !important; } html[data-theme="light"] .entry-icon { color: #1769d2 !important; background: linear-gradient( 145deg, #edf4ff, #e4efff ) !important; border: 1px solid #d4e4fb !important; } html[data-theme="light"] .entry-title-area h2 { color: var(--dl-text) !important; } html[data-theme="light"] .entry-subtitle { color: var(--dl-muted) !important; } html[data-theme="light"] .favorite-button, html[data-theme="light"] .expand-button { color: #667085 !important; } /* ========================================================== QUICK ACTIONS ========================================================== */ html[data-theme="light"] .quick-actions { background: #fafcff !important; border-top: 1px solid var(--dl-border) !important; } html[data-theme="light"] .quick-actions button { color: #526174 !important; background: transparent !important; border-color: var(--dl-border) !important; } html[data-theme="light"] .quick-actions button:hover { color: #175cd3 !important; background: #eef4ff !important; } html[data-theme="light"] .quick-actions .copy-password { color: #1769d2 !important; } /* ========================================================== ENTRY DETAILS ========================================================== */ html[data-theme="light"] .entry-details { background: #fbfcfe !important; border-top: 1px solid var(--dl-border) !important; } html[data-theme="light"] .detail-row { border-color: #edf0f4 !important; } html[data-theme="light"] .detail-label { color: var(--dl-muted) !important; } html[data-theme="light"] .detail-value, html[data-theme="light"] .password-display, html[data-theme="light"] .notes-text { color: #344054 !important; } /* ========================================================== CATEGORY / USERS / PANELS ========================================================== */ html[data-theme="light"] .category-card, html[data-theme="light"] .user-card, html[data-theme="light"] .pm-audit-panel, html[data-theme="light"] .pm-settings-shell { color: var(--dl-text) !important; background: #ffffff !important; border: 1px solid var(--dl-border) !important; box-shadow: 0 5px 18px rgba(16,24,40,.05) !important; } html[data-theme="light"] .category-info h2, html[data-theme="light"] .user-info h2 { color: var(--dl-text) !important; } html[data-theme="light"] .user-username { color: var(--dl-muted) !important; } /* ========================================================== FORMS ========================================================== */ html[data-theme="light"] body:not(.login-body) input, html[data-theme="light"] body:not(.login-body) select, html[data-theme="light"] body:not(.login-body) textarea { color: var(--dl-text) !important; background: #ffffff !important; border: 1px solid #d7dee8 !important; } html[data-theme="light"] body:not(.login-body) input::placeholder, html[data-theme="light"] body:not(.login-body) textarea::placeholder { color: #98a2b3 !important; } html[data-theme="light"] body:not(.login-body) input:focus, html[data-theme="light"] body:not(.login-body) select:focus, html[data-theme="light"] body:not(.login-body) textarea:focus { border-color: var(--dl-primary) !important; box-shadow: 0 0 0 3px var(--dl-focus) !important; } /* ========================================================== MODALS ========================================================== */ html[data-theme="light"] .entry-modal, html[data-theme="light"] .modal, html[data-theme="light"] .category-modal, html[data-theme="light"] .user-modal { background: rgba(15,23,42,.40) !important; } html[data-theme="light"] .modal-content, html[data-theme="light"] .entry-form, html[data-theme="light"] .category-form, html[data-theme="light"] .user-form { color: var(--dl-text) !important; background: #ffffff !important; } /* ========================================================== AUDIT ========================================================== */ html[data-theme="light"] .pm-audit-head { color: var(--dl-text) !important; border-color: var(--dl-border) !important; } html[data-theme="light"] .pm-audit-head span { color: var(--dl-muted) !important; } html[data-theme="light"] .pm-audit-table th { color: #667085 !important; background: #f8fafc !important; border-color: var(--dl-border) !important; } html[data-theme="light"] .pm-audit-table td { color: #344054 !important; border-color: #edf0f4 !important; } html[data-theme="light"] .pm-audit-table tr:hover td { background: #f8fbff !important; } /* ========================================================== SETTINGS ========================================================== */ html[data-theme="light"] .pm-settings-tabs { border-color: var(--dl-border) !important; } html[data-theme="light"] .pm-settings-tabs span { color: var(--dl-muted) !important; } html[data-theme="light"] .pm-settings-tabs span.active { color: #175cd3 !important; } html[data-theme="light"] .pm-settings-section + html[data-theme="light"] .pm-settings-section { border-color: var(--dl-border) !important; } html[data-theme="light"] .pm-settings-title h2, html[data-theme="light"] .pm-settings-section h2 { color: var(--dl-text) !important; } html[data-theme="light"] .pm-settings-title p { color: var(--dl-muted) !important; } html[data-theme="light"] .pm-system-grid > div { background: #f8fafc !important; border-color: var(--dl-border) !important; } html[data-theme="light"] .pm-system-grid span { color: var(--dl-muted) !important; } html[data-theme="light"] .pm-system-grid strong { color: var(--dl-text) !important; } /* ========================================================== MOBILE NAV ========================================================== */ html[data-theme="light"] .mobile-nav { background: rgba(255,255,255,.98) !important; border-top: 1px solid var(--dl-border) !important; box-shadow: 0 -8px 25px rgba(16,24,40,.07) !important; } /* ========================================================== AUTH / LOGIN Keep visual identity but make it LIGHT ========================================================== */ html[data-theme="light"] body.login-body.pm-auth-page, html[data-theme="light"] body.login-body { background: linear-gradient( 180deg, rgba(247,250,255,.74), rgba(238,244,252,.88) ), radial-gradient( circle at 50% 8%, rgba(38,140,255,.16), transparent 40% ), url("/static/assets/security-bg.webp"), linear-gradient( 145deg, #eef5ff, #f8fafc ) !important; background-size: cover !important; background-position: center !important; color: var(--dl-text) !important; } html[data-theme="light"] .pm-auth-card { color: var(--dl-text) !important; background: rgba(255,255,255,.94) !important; border: 1px solid rgba(176,196,220,.60) !important; box-shadow: 0 24px 65px rgba(31,64,104,.16) !important; } html[data-theme="light"] .pm-auth-card input { color: var(--dl-text) !important; background: #ffffff !important; border: 1px solid #d7dee8 !important; } /* ========================================================== THEME SWITCH ========================================================== */ .dl-theme-switch { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--dl-border); border-radius: 9px; background: var(--dl-surface-2); box-shadow: 0 2px 7px rgba(16,24,40,.05); } .dl-theme-option { min-width: 38px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 7px; color: var(--dl-muted); background: transparent; font-family: var(--dl-font); font-size: 13px; cursor: pointer; transition: all var(--dl-transition); } .dl-theme-option:hover { color: var(--dl-text); background: var(--dl-ghost-hover); } .dl-theme-option.active { color: #ffffff; background: linear-gradient( 180deg, #3298ff, var(--dl-primary) ); box-shadow: 0 3px 10px rgba(22,119,232,.22); } /* ========================================================== SMALL SCREENS ========================================================== */ @media (max-width: 640px) { .dl-theme-label { display: none; } .dl-theme-option { min-width: 36px; padding: 0 8px; } } /* ========================================================== DAMIOLINK LOGIN LIGHT V2 ========================================================== */ /* ---------------------------------------------------------- THEME SWITCH - LOGIN ---------------------------------------------------------- */ .pm-login-theme-switch { position: fixed; top: 18px; right: 20px; z-index: 1000; } /* ---------------------------------------------------------- BRAND ---------------------------------------------------------- */ html[data-theme="light"] .pm-brand h1 { color: #172033 !important; } html[data-theme="light"] .pm-auth-brand-logo { filter: drop-shadow( 0 5px 10px rgba(22,119,232,.20) ) !important; } /* ---------------------------------------------------------- AUTH CARD ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-card { color: #172033 !important; background: rgba(255,255,255,.96) !important; border: 1px solid #dbe4ef !important; box-shadow: 0 24px 65px rgba(31,64,104,.15), 0 2px 8px rgba(31,64,104,.05) !important; } /* ---------------------------------------------------------- HEADING ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-heading h2 { color: #172033 !important; } html[data-theme="light"] .pm-auth-heading p { color: #667085 !important; opacity: 1 !important; } /* ---------------------------------------------------------- LABELS ---------------------------------------------------------- */ html[data-theme="light"] .pm-form-group label { color: #475467 !important; opacity: 1 !important; } /* ---------------------------------------------------------- INPUT WRAPPER ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-card .pm-input-wrap { background: #ffffff !important; border: 1px solid #d0d9e5 !important; border-radius: 9px !important; box-shadow: 0 1px 2px rgba(16,24,40,.025) !important; } /* ---------------------------------------------------------- REAL INPUT IMPORTANT: neutralizza il vecchio dark auth input ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-card .pm-input-wrap input, html[data-theme="light"] .pm-auth-card input[type="text"], html[data-theme="light"] .pm-auth-card input[type="password"] { color: #172033 !important; background: #ffffff !important; border: 1px solid #d0d9e5 !important; caret-color: var(--dl-primary) !important; -webkit-text-fill-color: #172033 !important; box-shadow: none !important; } html[data-theme="light"] .pm-auth-card input::placeholder { color: #98a2b3 !important; opacity: 1 !important; -webkit-text-fill-color: #98a2b3 !important; } /* ---------------------------------------------------------- INPUT ICONS ---------------------------------------------------------- */ html[data-theme="light"] .pm-input-icon { color: #4f86c9 !important; opacity: 1 !important; } html[data-theme="light"] .pm-password-toggle { color: #52789e !important; background: transparent !important; } html[data-theme="light"] .pm-password-toggle:hover { color: var(--dl-primary) !important; } /* ---------------------------------------------------------- INPUT FOCUS ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-card .pm-input-wrap:focus-within { border-color: var(--dl-primary) !important; box-shadow: 0 0 0 3px var(--dl-focus) !important; } html[data-theme="light"] .pm-auth-card .pm-input-wrap:focus-within input { border-color: var(--dl-primary) !important; box-shadow: none !important; } /* ---------------------------------------------------------- CHROME AUTOFILL ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-card input:-webkit-autofill, html[data-theme="light"] .pm-auth-card input:-webkit-autofill:hover, html[data-theme="light"] .pm-auth-card input:-webkit-autofill:focus { -webkit-text-fill-color: #172033 !important; -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important; box-shadow: 0 0 0 1000px #ffffff inset !important; transition: background-color 9999s ease-out 0s; } /* ---------------------------------------------------------- PASSKEY ---------------------------------------------------------- */ html[data-theme="light"] .pm-passkey-main { color: #ffffff !important; background: linear-gradient( 180deg, #3298ff 0%, #1677e8 100% ) !important; border: 1px solid rgba(73,158,247,.70) !important; box-shadow: 0 7px 20px rgba(22,119,232,.22) !important; } html[data-theme="light"] .pm-passkey-main:hover { background: linear-gradient( 180deg, #43a2ff 0%, #0f69d5 100% ) !important; box-shadow: 0 10px 26px rgba(22,119,232,.28) !important; transform: translateY(-1px); } html[data-theme="light"] .pm-passkey-hint { color: #667085 !important; opacity: 1 !important; } /* ---------------------------------------------------------- SEPARATOR ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-separator { color: #7a8699 !important; opacity: 1 !important; } html[data-theme="light"] .pm-auth-separator::before, html[data-theme="light"] .pm-auth-separator::after { background: #e1e7ef !important; } /* ---------------------------------------------------------- STANDARD LOGIN BUTTON ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-submit:not(.pm-passkey-main) { color: #ffffff !important; background: linear-gradient( 180deg, #3298ff 0%, #1677e8 100% ) !important; border: 1px solid rgba(73,158,247,.70) !important; box-shadow: 0 7px 20px rgba(22,119,232,.20) !important; } html[data-theme="light"] .pm-auth-submit:not(.pm-passkey-main):hover { background: linear-gradient( 180deg, #43a2ff 0%, #0f69d5 100% ) !important; box-shadow: 0 10px 26px rgba(22,119,232,.27) !important; transform: translateY(-1px); } /* ---------------------------------------------------------- FOOTER ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-footer { color: #667085 !important; opacity: 1 !important; } html[data-theme="light"] .pm-secure-dot { background: #12b76a !important; box-shadow: 0 0 0 4px rgba(18,183,106,.10) !important; } /* ---------------------------------------------------------- THEME SWITCH LIGHT ---------------------------------------------------------- */ html[data-theme="light"] .pm-login-theme-switch .dl-theme-switch { background: rgba(255,255,255,.92); border-color: #d8e1ec; box-shadow: 0 5px 18px rgba(31,64,104,.10); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ---------------------------------------------------------- THEME SWITCH DARK ---------------------------------------------------------- */ html[data-theme="dark"] .pm-login-theme-switch .dl-theme-switch { background: rgba(4,20,34,.88); border-color: rgba(111,176,232,.18); box-shadow: 0 8px 24px rgba(0,0,0,.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ---------------------------------------------------------- MOBILE ---------------------------------------------------------- */ @media (max-width: 640px) { .pm-login-theme-switch { top: 10px; right: 10px; } .pm-login-theme-switch .dl-theme-label { display: none; } .pm-login-theme-switch .dl-theme-option { width: 36px; min-width: 36px; padding: 0; } } /* ========================================================== DAMIOLINK LOGIN LIGHT V3 - POLISH ========================================================== */ /* ---------------------------------------------------------- VERTICAL COMPOSITION ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-shell { min-height: 100vh !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 76px 20px 38px !important; } html[data-theme="light"] .pm-auth-container { transform: translateY(-10px); } /* ---------------------------------------------------------- PASSKEY - ACCENT PRIMARY ---------------------------------------------------------- */ html[data-theme="light"] .pm-passkey-main { background: linear-gradient( 135deg, #3a9cff 0%, #1677e8 55%, #1168d0 100% ) !important; box-shadow: 0 8px 22px rgba(22,119,232,.20) !important; } html[data-theme="light"] .pm-passkey-main:hover { background: linear-gradient( 135deg, #4ba5ff 0%, #187de9 55%, #0f69d5 100% ) !important; box-shadow: 0 11px 28px rgba(22,119,232,.27) !important; } /* ---------------------------------------------------------- STANDARD LOGIN - PRIMARY DAMIOLINK ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-submit:not(.pm-passkey-main) { background: linear-gradient( 180deg, #268cff 0%, #1677e8 100% ) !important; box-shadow: 0 5px 16px rgba(22,119,232,.18) !important; } /* ---------------------------------------------------------- MOBILE ---------------------------------------------------------- */ @media (max-width: 640px) { html[data-theme="light"] .pm-auth-shell { align-items: center !important; padding: 70px 14px 28px !important; } html[data-theme="light"] .pm-auth-container { transform: none; } } /* ========================================================== DAMIOLINK LIGHT V4 - APPLICATION COMPONENTS Vault / Favorites / Categories / Users / Audit / Settings ========================================================== */ /* ========================================================== 1. SEARCH / FILTER FIELDS ========================================================== */ html[data-theme="light"] .search-box, html[data-theme="light"] .pm-filter-bar input[type="search"] { background: #ffffff !important; color: #172033 !important; border: 1px solid #cbd7e8 !important; box-shadow: 0 2px 7px rgba(15, 23, 42, .035) !important; transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease !important; } html[data-theme="light"] .search-box:focus-within { border-color: #268cff !important; box-shadow: 0 0 0 3px rgba(38, 140, 255, .12), 0 4px 12px rgba(15, 23, 42, .05) !important; } html[data-theme="light"] .search-box input { background: transparent !important; color: #172033 !important; } html[data-theme="light"] .search-box input::placeholder, html[data-theme="light"] .pm-filter-bar input::placeholder { color: #8997aa !important; opacity: 1 !important; } html[data-theme="light"] .search-box svg, html[data-theme="light"] .search-box .pm-nav-symbol { color: #1677e8 !important; } /* AUDIT FILTER */ html[data-theme="light"] .pm-filter-bar { background: transparent !important; } html[data-theme="light"] .pm-filter-bar input, html[data-theme="light"] .pm-filter-bar select { min-height: 46px !important; background: #ffffff !important; color: #172033 !important; border: 1px solid #cbd7e8 !important; border-radius: 10px !important; } html[data-theme="light"] .pm-filter-bar input:focus, html[data-theme="light"] .pm-filter-bar select:focus { outline: none !important; border-color: #268cff !important; box-shadow: 0 0 0 3px rgba(38, 140, 255, .12) !important; } /* ========================================================== 2. VAULT CARDS ========================================================== */ html[data-theme="light"] .vault-card { background: #ffffff !important; border: 1px solid #d8e1ed !important; box-shadow: 0 5px 16px rgba(15, 23, 42, .045) !important; } html[data-theme="light"] .vault-card:hover { border-color: #b7d4fa !important; box-shadow: 0 9px 24px rgba(22, 119, 232, .09) !important; transform: translateY(-1px); } html[data-theme="light"] .vault-card-head { background: #ffffff !important; } html[data-theme="light"] .entry-title-area h2 { color: #172033 !important; } html[data-theme="light"] .entry-subtitle { color: #68768a !important; } /* ========================================================== 3. VAULT QUICK ACTIONS More visible DamioLink actions ========================================================== */ html[data-theme="light"] .quick-actions { background: #f8faff !important; border-left: 1px solid #e1e8f2 !important; } html[data-theme="light"] .quick-actions button, html[data-theme="light"] .quick-actions a { min-height: 46px !important; padding: 0 20px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: #f8faff !important; color: #526176 !important; border-color: #e1e8f2 !important; font-weight: 650 !important; transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease !important; } html[data-theme="light"] .quick-actions button:hover, html[data-theme="light"] .quick-actions a:hover { background: #edf5ff !important; color: #0f69d5 !important; } html[data-theme="light"] .quick-actions .copy-password { color: #0969da !important; background: #f4f9ff !important; } html[data-theme="light"] .quick-actions .copy-password:hover { color: #0759bd !important; background: #e8f3ff !important; } /* ========================================================== 4. EMPTY STATES / FAVORITES ========================================================== */ html[data-theme="light"] .empty-state, html[data-theme="light"] .live-no-results, html[data-theme="light"] .pm-empty-dark { background: linear-gradient( 145deg, #ffffff 0%, #f7faff 100% ) !important; color: #172033 !important; border: 1px solid #d8e1ed !important; box-shadow: 0 6px 20px rgba(15, 23, 42, .045) !important; } html[data-theme="light"] .empty-state h1, html[data-theme="light"] .empty-state h2, html[data-theme="light"] .empty-state h3 { color: #172033 !important; } html[data-theme="light"] .empty-state p, html[data-theme="light"] .live-no-results p, html[data-theme="light"] .pm-empty-dark { color: #68768a !important; } html[data-theme="light"] .empty-state .empty-icon { filter: drop-shadow( 0 5px 9px rgba(217, 164, 0, .18) ); } /* ========================================================== 5. CATEGORY CARDS ========================================================== */ html[data-theme="light"] .category-card { overflow: hidden !important; background: #ffffff !important; border: 1px solid #d8e1ed !important; box-shadow: 0 5px 16px rgba(15, 23, 42, .045) !important; } html[data-theme="light"] .category-card:hover { border-color: #c4d9f4 !important; box-shadow: 0 8px 22px rgba(22, 119, 232, .07) !important; } html[data-theme="light"] .category-card-head { background: #ffffff !important; } html[data-theme="light"] .category-info { background: transparent !important; } html[data-theme="light"] .category-info h2 { color: #172033 !important; } html[data-theme="light"] .category-description { background: #f7f9fc !important; color: #617087 !important; border: 1px solid #e4eaf2 !important; border-radius: 8px !important; } html[data-theme="light"] .category-system-info { background: #f5f9ff !important; color: #50647d !important; border-top: 1px solid #e1e9f3 !important; } html[data-theme="light"] .category-editor { background: #f8fafc !important; color: #172033 !important; border-top: 1px solid #dce5f0 !important; } /* CATEGORY ACTION */ html[data-theme="light"] .category-actions { background: #f8faff !important; border-left: 1px solid #e0e8f2 !important; } html[data-theme="light"] .category-actions button { min-height: 46px !important; padding: 0 22px !important; background: #edf5ff !important; color: #0969da !important; border: 1px solid #c9e0ff !important; font-weight: 650 !important; } html[data-theme="light"] .category-actions button:hover { background: #dfeeff !important; color: #0759bd !important; border-color: #9fc8fb !important; } /* ========================================================== 6. USER CARDS ========================================================== */ html[data-theme="light"] .user-card { background: #ffffff !important; border: 1px solid #d8e1ed !important; box-shadow: 0 5px 16px rgba(15, 23, 42, .045) !important; } html[data-theme="light"] .user-card:hover { border-color: #c4d9f4 !important; box-shadow: 0 8px 22px rgba(22, 119, 232, .07) !important; } html[data-theme="light"] .user-card-main { background: #ffffff !important; } html[data-theme="light"] .user-info h2 { color: #172033 !important; } html[data-theme="light"] .user-username { color: #68768a !important; } /* USER ACTION */ html[data-theme="light"] .user-actions { background: #f8faff !important; border-left: 1px solid #e0e8f2 !important; } html[data-theme="light"] .user-actions button { min-height: 46px !important; padding: 0 22px !important; background: #edf5ff !important; color: #0969da !important; border: 1px solid #c9e0ff !important; font-weight: 650 !important; } html[data-theme="light"] .user-actions button:hover { background: #dfeeff !important; color: #0759bd !important; border-color: #9fc8fb !important; } /* DANGER REMAINS DANGER */ html[data-theme="light"] .user-actions button.danger-text, html[data-theme="light"] .category-actions button.danger-text { background: #fff5f5 !important; color: #c92332 !important; border-color: #ffd0d4 !important; } html[data-theme="light"] .user-actions button.danger-text:hover, html[data-theme="light"] .category-actions button.danger-text:hover { background: #ffe9eb !important; color: #ad1e2b !important; border-color: #ffb8be !important; } /* ========================================================== 7. AUDIT ========================================================== */ html[data-theme="light"] .pm-audit-panel { background: #ffffff !important; border: 1px solid #d8e1ed !important; box-shadow: 0 6px 20px rgba(15, 23, 42, .045) !important; } html[data-theme="light"] .pm-audit-head { background: #ffffff !important; color: #172033 !important; border-bottom: 1px solid #e1e8f2 !important; } html[data-theme="light"] .pm-audit-head span { color: #68768a !important; } html[data-theme="light"] .pm-audit-table { background: #ffffff !important; color: #334155 !important; } html[data-theme="light"] .pm-audit-table thead, html[data-theme="light"] .pm-audit-table th { background: #f5f8fc !important; color: #617087 !important; border-color: #dde5ef !important; } html[data-theme="light"] .pm-audit-table td { background: #ffffff !important; color: #46566d !important; border-color: #e5eaf1 !important; } html[data-theme="light"] .pm-audit-table tbody tr:nth-child(even) td { background: #f9fbfd !important; } html[data-theme="light"] .pm-audit-table tbody tr:hover td { background: #eef6ff !important; } html[data-theme="light"] .pm-action-badge { background: #eaf4ff !important; color: #0868ce !important; border: 1px solid #c5dfff !important; border-radius: 7px !important; } html[data-theme="light"] .pm-audit-details { color: #64748b !important; } html[data-theme="light"] .pm-mono { color: #526176 !important; } /* ========================================================== 8. SETTINGS ========================================================== */ html[data-theme="light"] .pm-settings-shell { background: #ffffff !important; border: 1px solid #d8e1ed !important; box-shadow: 0 6px 20px rgba(15, 23, 42, .045) !important; } html[data-theme="light"] .pm-settings-section { background: #ffffff !important; color: #172033 !important; } html[data-theme="light"] .pm-settings-tabs { background: #ffffff !important; border-bottom: 1px solid #dfe6ef !important; } html[data-theme="light"] .pm-settings-security-link { background: linear-gradient( 135deg, #eef6ff 0%, #e4f1ff 100% ) !important; color: #172033 !important; border: 1px solid #c9e0ff !important; } html[data-theme="light"] .pm-settings-security-link:hover { background: linear-gradient( 135deg, #e4f1ff 0%, #d7eaff 100% ) !important; border-color: #9fc8fb !important; } html[data-theme="light"] .pm-settings-security-text strong { color: #172033 !important; } html[data-theme="light"] .pm-settings-security-text small, html[data-theme="light"] .pm-settings-security-arrow { color: #58708d !important; } /* BRAND PREVIEW */ html[data-theme="light"] .pm-logo-large-preview { background: linear-gradient( 145deg, #f5f9ff 0%, #eaf3ff 100% ) !important; color: #172033 !important; border: 1px solid #d1e2f6 !important; } /* BRANDING CONTROLS */ html[data-theme="light"] .pm-branding-controls { background: #f8fafc !important; color: #172033 !important; border: 1px solid #dce5ef !important; border-radius: 12px !important; } html[data-theme="light"] .pm-upload-box { background: #ffffff !important; color: #334155 !important; border: 1px dashed #aebed2 !important; border-radius: 10px !important; } html[data-theme="light"] .pm-upload-box:hover { background: #f4f9ff !important; border-color: #268cff !important; } html[data-theme="light"] .pm-upload-box span { color: #68768a !important; } /* ========================================================== 9. SYSTEM SUMMARY ========================================================== */ html[data-theme="light"] .pm-system-grid > * { background: #f8fafc !important; color: #172033 !important; border: 1px solid #dce5ef !important; box-shadow: none !important; } /* ========================================================== 10. TRUSTED DEVICES ========================================================== */ html[data-theme="light"] .pm-trusted-device { background: #ffffff !important; color: #172033 !important; border: 1px solid #d8e1ed !important; box-shadow: 0 4px 13px rgba(15, 23, 42, .04) !important; } html[data-theme="light"] .pm-trusted-device:hover { border-color: #bed7f7 !important; box-shadow: 0 7px 18px rgba(22, 119, 232, .07) !important; } html[data-theme="light"] .pm-trusted-main > strong { color: #172033 !important; } html[data-theme="light"] .pm-trusted-agent { color: #526176 !important; } html[data-theme="light"] .pm-trusted-meta { color: #7a899d !important; } /* SECURITY WARNING */ html[data-theme="light"] .pm-security-warning { background: #fffaf0 !important; color: #9a6412 !important; border: 1px solid #f0dfb8 !important; } /* ========================================================== 11. DANGER BUTTONS ========================================================== */ html[data-theme="light"] .pm-danger-button { min-height: 44px !important; padding: 0 18px !important; background: #fff5f5 !important; color: #c92332 !important; border: 1px solid #ffc8ce !important; border-radius: 9px !important; font-weight: 650 !important; } html[data-theme="light"] .pm-danger-button:hover { background: #ffe9eb !important; color: #ad1e2b !important; border-color: #ffadb5 !important; } /* ========================================================== 12. GENERAL LIGHT FORM CONTROLS ========================================================== */ html[data-theme="light"] .modal input:not([type="checkbox"]), html[data-theme="light"] .modal select, html[data-theme="light"] .modal textarea, html[data-theme="light"] .category-editor input, html[data-theme="light"] .category-editor select { background: #ffffff !important; color: #172033 !important; border-color: #cbd7e8 !important; } html[data-theme="light"] .modal input:focus, html[data-theme="light"] .modal select:focus, html[data-theme="light"] .modal textarea:focus, html[data-theme="light"] .category-editor input:focus, html[data-theme="light"] .category-editor select:focus { outline: none !important; border-color: #268cff !important; box-shadow: 0 0 0 3px rgba(38, 140, 255, .12) !important; } /* ========================================================== 13. MOBILE ========================================================== */ @media (max-width: 760px) { html[data-theme="light"] .quick-actions { border-left: 0 !important; border-top: 1px solid #e1e8f2 !important; } html[data-theme="light"] .quick-actions button, html[data-theme="light"] .quick-actions a, html[data-theme="light"] .user-actions button, html[data-theme="light"] .category-actions button { min-height: 48px !important; } html[data-theme="light"] .user-actions, html[data-theme="light"] .category-actions { border-left: 0 !important; border-top: 1px solid #e0e8f2 !important; } } /* ========================================================== DAMIOLINK LIGHT V5 - VAULT FINAL Cards / Search / Entry Modal / Detail Modal ========================================================== */ /* ========================================================== SEARCH ========================================================== */ html[data-theme="light"] form.search .search-box, html[data-theme="light"] .search .search-box, html[data-theme="light"] .search-box { background: #ffffff !important; border: 1px solid #cbd7e8 !important; border-radius: 10px !important; box-shadow: 0 3px 10px rgba(15,23,42,.04) !important; } html[data-theme="light"] form.search .search-box input[type="search"], html[data-theme="light"] .search .search-box input[type="search"], html[data-theme="light"] .search-box input[type="search"] { background: #ffffff !important; color: #172033 !important; -webkit-text-fill-color: #172033 !important; border: 0 !important; box-shadow: none !important; caret-color: #1677e8 !important; } html[data-theme="light"] .search-box input[type="search"]::placeholder { color: #8997aa !important; -webkit-text-fill-color: #8997aa !important; opacity: 1 !important; } html[data-theme="light"] form.search .search-box:focus-within, html[data-theme="light"] .search .search-box:focus-within { border-color: #268cff !important; box-shadow: 0 0 0 3px rgba(38,140,255,.12), 0 5px 14px rgba(15,23,42,.05) !important; } html[data-theme="light"] .search-box > span:first-child { color: #1677e8 !important; } /* ========================================================== VAULT CARD ========================================================== */ html[data-theme="light"] .vault-card { background: #ffffff !important; border: 1px solid #d7e1ee !important; border-radius: 12px !important; box-shadow: 0 5px 16px rgba(15,23,42,.045) !important; overflow: hidden !important; } html[data-theme="light"] .vault-card:hover { border-color: #b9d6fa !important; box-shadow: 0 9px 24px rgba(22,119,232,.09) !important; } html[data-theme="light"] .vault-card-head { background: #ffffff !important; } /* ========================================================== QUICK ACTION AREA ========================================================== */ html[data-theme="light"] .quick-actions { background: #f7f9fc !important; border-left: 1px solid #e0e7f0 !important; gap: 8px !important; padding: 8px !important; } /* BASE ACTION */ html[data-theme="light"] .quick-actions button { min-height: 46px !important; padding: 0 17px !important; border-radius: 8px !important; border: 1px solid #cbd7e8 !important; background: #ffffff !important; color: #43536a !important; font-weight: 650 !important; box-shadow: 0 1px 3px rgba(15,23,42,.035) !important; transition: background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease !important; } html[data-theme="light"] .quick-actions button:hover { background: #f0f6ff !important; color: #0969da !important; border-color: #a9cdf9 !important; box-shadow: 0 4px 10px rgba(22,119,232,.09) !important; transform: translateY(-1px); } /* COPY PASSWORD = PRIMARY ACTION */ html[data-theme="light"] .quick-actions .copy-password { color: #ffffff !important; background: linear-gradient( 180deg, #3298ff 0%, #1677e8 100% ) !important; border-color: #1677e8 !important; box-shadow: 0 5px 14px rgba(22,119,232,.20) !important; } html[data-theme="light"] .quick-actions .copy-password:hover { color: #ffffff !important; background: linear-gradient( 180deg, #43a2ff 0%, #0f69d5 100% ) !important; border-color: #0f69d5 !important; box-shadow: 0 7px 18px rgba(22,119,232,.26) !important; } /* ICONS FOLLOW BUTTON COLOR */ html[data-theme="light"] .quick-actions button .pm-nav-symbol, html[data-theme="light"] .quick-actions button .pm-action-icon { color: currentColor !important; } /* ========================================================== ENTRY MODAL BACKDROP ========================================================== */ html[data-theme="light"] .modal-backdrop { background: rgba(23,32,51,.48) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ========================================================== NEW / EDIT PASSWORD MODAL ========================================================== */ html[data-theme="light"] .entry-modal { background: #ffffff !important; color: #172033 !important; border: 1px solid #d7e1ee !important; box-shadow: 0 30px 80px rgba(15,23,42,.24) !important; } /* HEADER */ html[data-theme="light"] .entry-modal > .modal-header { background: linear-gradient( 135deg, #f8fbff 0%, #eef6ff 100% ) !important; color: #172033 !important; border-bottom: 1px solid #dce6f1 !important; } html[data-theme="light"] .entry-modal > .modal-header h2 { color: #172033 !important; } html[data-theme="light"] .entry-modal > .modal-header p { color: #617087 !important; } /* CLOSE */ html[data-theme="light"] .entry-modal .modal-close { background: #ffffff !important; color: #526176 !important; border: 1px solid #ccd8e7 !important; border-radius: 9px !important; } html[data-theme="light"] .entry-modal .modal-close:hover { background: #edf5ff !important; color: #0969da !important; border-color: #a9cdf9 !important; } /* FORM */ html[data-theme="light"] .entry-modal .entry-form { background: #ffffff !important; color: #172033 !important; } html[data-theme="light"] .entry-modal .form-group label { color: #526176 !important; } /* INPUTS */ html[data-theme="light"] .entry-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-theme="light"] .entry-modal select, html[data-theme="light"] .entry-modal textarea { background: #ffffff !important; color: #172033 !important; -webkit-text-fill-color: #172033 !important; border: 1px solid #cbd7e8 !important; box-shadow: none !important; } html[data-theme="light"] .entry-modal input::placeholder, html[data-theme="light"] .entry-modal textarea::placeholder { color: #98a2b3 !important; -webkit-text-fill-color: #98a2b3 !important; opacity: 1 !important; } html[data-theme="light"] .entry-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, html[data-theme="light"] .entry-modal select:focus, html[data-theme="light"] .entry-modal textarea:focus { outline: none !important; border-color: #268cff !important; box-shadow: 0 0 0 3px rgba(38,140,255,.12) !important; } /* PASSWORD WRAPPER */ html[data-theme="light"] .entry-modal .password-input-wrap { background: #ffffff !important; border-color: #cbd7e8 !important; } html[data-theme="light"] .entry-modal #form-password-toggle { background: #f4f8fd !important; color: #526176 !important; border-left: 1px solid #d7e1ee !important; } html[data-theme="light"] .entry-modal #form-password-toggle:hover { background: #e9f3ff !important; color: #0969da !important; } /* ========================================================== PASSWORD TOOLS ========================================================== */ html[data-theme="light"] .entry-modal .generator-button { background: #edf5ff !important; color: #0969da !important; border: 1px solid #c9e0ff !important; border-radius: 8px !important; font-weight: 650 !important; } html[data-theme="light"] .entry-modal .generator-button:hover { background: #dfeeff !important; color: #0759bd !important; border-color: #9fc8fb !important; } html[data-theme="light"] .entry-modal .strength-track { background: #e5eaf1 !important; } html[data-theme="light"] .entry-modal #strength-label { color: #68768a !important; } /* ========================================================== PASSWORD GENERATOR ========================================================== */ html[data-theme="light"] .entry-modal .password-generator { background: #f7faff !important; color: #172033 !important; border: 1px solid #d6e4f5 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important; } html[data-theme="light"] .entry-modal .generator-header { border-color: #dce6f1 !important; } html[data-theme="light"] .entry-modal .generator-header strong { color: #172033 !important; } html[data-theme="light"] .entry-modal .generator-header #length-value { color: #0969da !important; background: #e8f3ff !important; border-color: #c5dfff !important; } /* GENERATOR OPTIONS */ html[data-theme="light"] .entry-modal .generator-options label { background: #ffffff !important; color: #43536a !important; border: 1px solid #d7e1ee !important; } html[data-theme="light"] .entry-modal .generator-options label:hover { background: #f0f6ff !important; border-color: #b6d5fa !important; } html[data-theme="light"] .entry-modal .generator-options small { color: #7a899d !important; } /* PRESETS */ html[data-theme="light"] .entry-modal .generator-presets button { background: #ffffff !important; color: #526176 !important; border: 1px solid #cbd7e8 !important; } html[data-theme="light"] .entry-modal .generator-presets button:hover { background: #eaf4ff !important; color: #0969da !important; border-color: #a9cdf9 !important; } /* ========================================================== ADVANCED FIELDS ========================================================== */ html[data-theme="light"] .entry-modal details { background: #f8fafc !important; color: #172033 !important; border: 1px solid #dce5ef !important; border-radius: 9px !important; } html[data-theme="light"] .entry-modal summary { color: #526176 !important; } html[data-theme="light"] .entry-modal details[open] summary { color: #0969da !important; border-bottom-color: #dce5ef !important; } html[data-theme="light"] .entry-modal .field-help { color: #7a899d !important; } html[data-theme="light"] .entry-modal .favorite-check { color: #526176 !important; } /* ========================================================== ENTRY MODAL FOOTER ========================================================== */ html[data-theme="light"] .entry-modal .modal-actions { background: #f7f9fc !important; border-top: 1px solid #dce5ef !important; } /* CANCEL */ html[data-theme="light"] .entry-modal .modal-actions .secondary-button { min-height: 46px !important; padding: 0 22px !important; background: #ffffff !important; color: #43536a !important; border: 1px solid #cbd7e8 !important; border-radius: 8px !important; font-weight: 650 !important; } html[data-theme="light"] .entry-modal .modal-actions .secondary-button:hover { background: #eef4fb !important; color: #172033 !important; border-color: #b6c5d8 !important; } /* SAVE */ html[data-theme="light"] .entry-modal .modal-actions .primary-button { min-height: 46px !important; padding: 0 24px !important; color: #ffffff !important; background: linear-gradient( 180deg, #3298ff 0%, #1677e8 100% ) !important; border: 1px solid #1677e8 !important; border-radius: 8px !important; font-weight: 700 !important; box-shadow: 0 5px 14px rgba(22,119,232,.20) !important; } /* ========================================================== DETAIL MODAL ========================================================== */ html[data-theme="light"] .detail-modal-panel { background: #ffffff !important; color: #172033 !important; border: 1px solid #d7e1ee !important; box-shadow: 0 30px 80px rgba(15,23,42,.24) !important; } /* DETAIL HEADER */ html[data-theme="light"] .detail-modal-header { background: linear-gradient( 135deg, #f8fbff 0%, #eef6ff 100% ) !important; color: #172033 !important; border-bottom: 1px solid #dce6f1 !important; } html[data-theme="light"] .detail-modal-header h2 { color: #172033 !important; } html[data-theme="light"] .detail-modal-header p { color: #68768a !important; } html[data-theme="light"] .detail-modal-icon { background: #e9f3ff !important; color: #0969da !important; border: 1px solid #c5dfff !important; } /* CLOSE */ html[data-theme="light"] .detail-modal-header .modal-close { background: #ffffff !important; color: #526176 !important; border: 1px solid #ccd8e7 !important; } html[data-theme="light"] .detail-modal-header .modal-close:hover { background: #edf5ff !important; color: #0969da !important; border-color: #a9cdf9 !important; } /* DETAIL BODY */ html[data-theme="light"] .detail-modal-body { background: #ffffff !important; color: #172033 !important; } html[data-theme="light"] .detail-modal-body .detail-row { background: #ffffff !important; border-bottom: 1px solid #e2e8f0 !important; } html[data-theme="light"] .detail-modal-body .detail-label { color: #7a899d !important; } html[data-theme="light"] .detail-modal-body .detail-value { color: #172033 !important; } html[data-theme="light"] .detail-modal-body .password-display { color: #172033 !important; background: #f7f9fc !important; border: 1px solid #dce5ef !important; } html[data-theme="light"] .detail-modal-body .break-text, html[data-theme="light"] .detail-modal-body .notes-text { color: #526176 !important; } /* DETAIL MINI ACTIONS */ html[data-theme="light"] .detail-modal-body .mini-button { min-height: 38px !important; padding: 0 14px !important; background: #edf5ff !important; color: #0969da !important; border: 1px solid #c9e0ff !important; border-radius: 8px !important; font-weight: 650 !important; } html[data-theme="light"] .detail-modal-body .mini-button:hover { background: #dfeeff !important; color: #0759bd !important; border-color: #9fc8fb !important; } /* DETAIL FOOTER */ html[data-theme="light"] .detail-modal-body .detail-actions { background: #f7f9fc !important; border-top: 1px solid #dce5ef !important; } /* EDIT */ html[data-theme="light"] .detail-modal-body .detail-actions .secondary-button { min-height: 46px !important; padding: 0 20px !important; background: #edf5ff !important; color: #0969da !important; border: 1px solid #c9e0ff !important; border-radius: 8px !important; font-weight: 650 !important; } /* DELETE */ html[data-theme="light"] .detail-modal-body .detail-actions .danger-button { min-height: 46px !important; padding: 0 20px !important; background: #fff5f5 !important; color: #c92332 !important; border: 1px solid #ffc8ce !important; border-radius: 8px !important; font-weight: 650 !important; } html[data-theme="light"] .detail-modal-body .detail-actions .danger-button:hover { background: #ffe9eb !important; color: #ad1e2b !important; border-color: #ffadb5 !important; } /* ========================================================== EMPTY / FAVORITES ========================================================== */ html[data-theme="light"] .empty-state, html[data-theme="light"] .live-no-results { background: linear-gradient( 145deg, #ffffff 0%, #f7faff 100% ) !important; color: #172033 !important; border: 1px solid #d8e1ed !important; box-shadow: 0 6px 20px rgba(15,23,42,.045) !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 760px) { html[data-theme="light"] .quick-actions { padding: 8px !important; gap: 7px !important; border-left: 0 !important; border-top: 1px solid #e0e7f0 !important; } html[data-theme="light"] .quick-actions button { min-height: 48px !important; } html[data-theme="light"] .entry-modal, html[data-theme="light"] .detail-modal-panel { border-radius: 14px 14px 0 0 !important; } } /* ========================================================== DAMIOLINK LIGHT V5.1 - MODAL FOOTER ========================================================== */ html[data-theme="light"] .entry-modal .modal-actions { background: linear-gradient( 180deg, #f8fafc 0%, #f4f7fb 100% ) !important; border-top: 1px solid #dce5ef !important; box-shadow: 0 -3px 12px rgba(15, 23, 42, .025) !important; } /* ANNULLA */ html[data-theme="light"] .entry-modal .modal-actions .secondary-button { background: #ffffff !important; color: #34445a !important; border: 1px solid #cbd7e8 !important; box-shadow: 0 2px 5px rgba(15, 23, 42, .04) !important; } html[data-theme="light"] .entry-modal .modal-actions .secondary-button:hover { background: #edf4fc !important; color: #172033 !important; border-color: #afc2d9 !important; } /* SALVA */ html[data-theme="light"] .entry-modal .modal-actions .primary-button { color: #ffffff !important; background: linear-gradient( 180deg, #3298ff 0%, #1677e8 100% ) !important; border: 1px solid #1677e8 !important; box-shadow: 0 5px 14px rgba(22, 119, 232, .22) !important; } html[data-theme="light"] .entry-modal .modal-actions .primary-button:hover { background: linear-gradient( 180deg, #43a2ff 0%, #0f69d5 100% ) !important; border-color: #0f69d5 !important; box-shadow: 0 7px 18px rgba(22, 119, 232, .28) !important; } /* ========================================================== DAMIOLINK LIGHT V5.2 - ENTRY MODAL FOOTER FIX Override specifico del dark theme: .modal-backdrop form > .modal-actions ========================================================== */ /* ---------------------------------------------------------- FOOTER ---------------------------------------------------------- */ html[data-theme="light"] .modal-backdrop.entry-modal form > .modal-actions, html[data-theme="light"] .modal-backdrop .entry-modal form > .modal-actions, html[data-theme="light"] .modal-backdrop form.entry-form > .modal-actions { background: linear-gradient( 180deg, #f8fafc 0%, #f4f7fb 100% ) !important; color: #172033 !important; border-top: 1px solid #dce5ef !important; box-shadow: 0 -4px 14px rgba(15, 23, 42, .035) !important; } /* * Nel markup reale .entry-modal potrebbe essere * il pannello interno e non il backdrop. * Questa รจ la regola definitiva che supera: * * .modal-backdrop form > .modal-actions */ html[data-theme="light"] .modal-backdrop .entry-modal .entry-form > .modal-actions { background: linear-gradient( 180deg, #f8fafc 0%, #f4f7fb 100% ) !important; color: #172033 !important; border-top: 1px solid #dce5ef !important; box-shadow: 0 -4px 14px rgba(15, 23, 42, .035) !important; } /* ---------------------------------------------------------- ANNULLA ---------------------------------------------------------- */ html[data-theme="light"] .modal-backdrop .entry-modal .entry-form > .modal-actions .secondary-button { min-height: 46px !important; padding: 0 22px !important; background: #ffffff !important; color: #34445a !important; border: 1px solid #c6d3e3 !important; border-radius: 9px !important; font-weight: 650 !important; box-shadow: 0 2px 6px rgba(15, 23, 42, .055) !important; } html[data-theme="light"] .modal-backdrop .entry-modal .entry-form > .modal-actions .secondary-button:hover { background: #edf4fc !important; color: #172033 !important; border-color: #aabdd4 !important; } /* ---------------------------------------------------------- SALVA ---------------------------------------------------------- */ html[data-theme="light"] .modal-backdrop .entry-modal .entry-form > .modal-actions .primary-button { min-height: 46px !important; padding: 0 26px !important; color: #ffffff !important; background: linear-gradient( 180deg, #3298ff 0%, #1677e8 100% ) !important; border: 1px solid #1677e8 !important; border-radius: 9px !important; font-weight: 700 !important; box-shadow: 0 5px 15px rgba(22, 119, 232, .23) !important; } html[data-theme="light"] .modal-backdrop .entry-modal .entry-form > .modal-actions .primary-button:hover { background: linear-gradient( 180deg, #43a2ff 0%, #0f69d5 100% ) !important; border-color: #0f69d5 !important; box-shadow: 0 7px 18px rgba(22, 119, 232, .28) !important; } /* ========================================================== END DAMIOLINK LIGHT V5.2 ========================================================== */ /* ========================================================== DAMIOLINK LIGHT V5.3 - CATEGORIES New Category modal + Category editor ========================================================== */ /* ========================================================== NUOVA CATEGORIA - MODAL CARD ========================================================== */ html[data-theme="light"] #category-modal .category-modal-card { background: #ffffff !important; color: #172033 !important; border: 1px solid #d6e1ee !important; box-shadow: 0 24px 70px rgba(15, 23, 42, .18) !important; } /* HEADER */ html[data-theme="light"] #category-modal .modal-header { background: linear-gradient( 135deg, #f8fbff 0%, #eef6ff 100% ) !important; color: #172033 !important; border-bottom: 1px solid #dce6f1 !important; } html[data-theme="light"] #category-modal .modal-header h2 { color: #172033 !important; } html[data-theme="light"] #category-modal .modal-header p { color: #68768a !important; } /* CLOSE */ html[data-theme="light"] #category-modal .modal-close { background: #ffffff !important; color: #526176 !important; border: 1px solid #ccd8e7 !important; } html[data-theme="light"] #category-modal .modal-close:hover { background: #edf5ff !important; color: #0969da !important; border-color: #a9cdf9 !important; } /* ========================================================== BODY / FORM ========================================================== */ html[data-theme="light"] #category-modal form { background: #ffffff !important; color: #172033 !important; } html[data-theme="light"] #category-modal form > label { color: #526176 !important; } /* INPUT */ html[data-theme="light"] #category-modal input:not([type="checkbox"]):not([type="radio"]) { background: #ffffff !important; color: #172033 !important; border: 1px solid #cbd7e8 !important; box-shadow: none !important; } html[data-theme="light"] #category-modal input:not([type="checkbox"]):not([type="radio"])::placeholder { color: #98a6b9 !important; } html[data-theme="light"] #category-modal input:not([type="checkbox"]):not([type="radio"]):focus { background: #ffffff !important; border-color: #2388f2 !important; box-shadow: 0 0 0 3px rgba(35, 136, 242, .10) !important; outline: none !important; } /* HELP */ html[data-theme="light"] #category-modal .form-help { color: #748399 !important; } /* ========================================================== FOOTER NUOVA CATEGORIA ========================================================== */ html[data-theme="light"] #category-modal form > .modal-actions { background: linear-gradient( 180deg, #f8fafc 0%, #f4f7fb 100% ) !important; color: #172033 !important; border-top: 1px solid #dce5ef !important; box-shadow: 0 -4px 14px rgba(15, 23, 42, .035) !important; } /* ANNULLA */ html[data-theme="light"] #category-modal .modal-actions .secondary-button { min-height: 46px !important; padding: 0 22px !important; background: #ffffff !important; color: #34445a !important; border: 1px solid #c6d3e3 !important; border-radius: 9px !important; font-weight: 650 !important; box-shadow: 0 2px 6px rgba(15, 23, 42, .055) !important; } /* CREA */ html[data-theme="light"] #category-modal .modal-actions .primary-button { min-height: 46px !important; padding: 0 26px !important; color: #ffffff !important; background: linear-gradient( 180deg, #3298ff 0%, #1677e8 100% ) !important; border: 1px solid #1677e8 !important; border-radius: 9px !important; font-weight: 700 !important; box-shadow: 0 5px 15px rgba(22, 119, 232, .23) !important; } /* ========================================================== GESTISCI CATEGORIA ========================================================== */ html[data-theme="light"] .category-editor { background: #ffffff !important; color: #172033 !important; border-top: 1px solid #dce5ef !important; } /* LABEL */ html[data-theme="light"] .category-editor label { color: #526176 !important; } /* NOME + ICONA */ html[data-theme="light"] .category-editor input:not([type="checkbox"]):not([type="radio"]) { background: #ffffff !important; color: #172033 !important; border: 1px solid #cbd7e8 !important; box-shadow: none !important; } html[data-theme="light"] .category-editor input:not([type="checkbox"]):not([type="radio"]):focus { background: #ffffff !important; border-color: #2388f2 !important; box-shadow: 0 0 0 3px rgba(35, 136, 242, .10) !important; outline: none !important; } /* UTENTI AUTORIZZATI */ html[data-theme="light"] .category-editor .category-users-title { color: #172033 !important; } html[data-theme="light"] .category-editor .category-user-option { background: #f7f9fc !important; color: #172033 !important; border: 1px solid #d8e2ee !important; border-radius: 10px !important; box-shadow: none !important; } html[data-theme="light"] .category-editor .category-user-option:hover { background: #edf5ff !important; border-color: #bdd8f7 !important; } html[data-theme="light"] .category-editor .category-user-data strong { color: #172033 !important; } html[data-theme="light"] .category-editor .category-user-data small { color: #748399 !important; } /* AVATAR */ html[data-theme="light"] .category-editor .category-user-avatar { background: #eaf3ff !important; color: #0969da !important; border: 1px solid #c9e0ff !important; } /* ========================================================== GESTISCI - ACTIONS ========================================================== */ html[data-theme="light"] .category-editor .category-editor-actions { border-top: 1px solid #e0e7f0 !important; background: #f8fafc !important; } /* ANNULLA */ html[data-theme="light"] .category-editor .category-editor-actions .secondary-button { min-height: 44px !important; padding: 0 20px !important; background: #ffffff !important; color: #34445a !important; border: 1px solid #c6d3e3 !important; border-radius: 9px !important; font-weight: 650 !important; box-shadow: 0 2px 6px rgba(15,23,42,.05) !important; } /* SALVA */ html[data-theme="light"] .category-editor .category-editor-actions .primary-button { min-height: 44px !important; padding: 0 24px !important; color: #ffffff !important; background: linear-gradient( 180deg, #3298ff 0%, #1677e8 100% ) !important; border: 1px solid #1677e8 !important; border-radius: 9px !important; font-weight: 700 !important; box-shadow: 0 5px 14px rgba(22,119,232,.20) !important; } /* ========================================================== END DAMIOLINK LIGHT V5.3 ========================================================== */