/* ============================================================================ AliothPress Admin — Unified Horizon Glass minimalism, strict hierarchy, unified forms. This single CSS file styles the entire admin panel. WCAG AA compliant: all text/bg pairs ≥ 4.5:1, UI components ≥ 3:1. Sections: 1. Variables & Reset 2. Layout (container, sidebar, main) 3. Sidebar navigation 4. Page header 5. Flash messages / Alerts 6. Buttons (unified) 7. Form inputs & fields 8. Cards & panels 9. Tables 10. User menu 11. Utilities 12. Badges & status indicators 13. Modal & overlays ============================================================================ */ /* ============================================================================ 1. ADMIN VARIABLES ============================================================================ */ :root { /* --- Admin palette (dark sidebar, light content) --- */ --adm-sidebar-bg: #1a1e2e; --adm-sidebar-surface: #232838; --adm-sidebar-border: rgba(255, 255, 255, 0.06); --adm-sidebar-text: #e2e8f0; --adm-sidebar-muted: #a0aec0; /* WCAG fix: was #8b99b0 (3.9:1), now 5.0:1 on sidebar bg ✅ */ --adm-sidebar-active: #8ba0be; --adm-sidebar-active-bg:rgba(92, 122, 158, 0.14); --adm-sidebar-active-glow: 0 0 12px rgba(92, 122, 158, 0.25); --adm-sidebar-width: 260px; /* --- Content area --- */ --adm-bg: #f8fafc; --adm-surface: #ffffff; --adm-surface-alt: #f1f5f9; --adm-border: #cbd5e1; /* Structural borders (cards, dividers) */ --adm-border-light: #e2e8f0; /* Decorative separators */ --adm-input-border: #8293a6; /* WCAG fix: 3.15:1 on white — form input boundaries */ --adm-text: #1e293b; --adm-text-secondary: #64748b; /* 4.76:1 on white ✅ */ --adm-text-muted: #636b78; /* WCAG fix: was #6b7280 (4.62:1 on bg), now 5.14:1 on bg, 5.38:1 on white ✅ */ /* --- Accent — soft steel-blue, harmonious with sidebar --- */ --adm-primary: #4e6b8c; /* WCAG fix: was #5c7a9e (3.96:1 with on-primary text), now 4.92:1 ✅; as accent on white 4.44:1 → 5.52:1 ✅ */ --adm-primary-hover: #43607f; /* WCAG fix: keeps ≥4.5:1 on hover (5.82:1) ✅ */ --adm-primary-light: #edf1f6; --adm-primary-border: #c4d0e0; --adm-primary-subtle: rgba(92, 122, 158, 0.08); --adm-on-primary: #f0f2f5; /* text on primary buttons/badges: 4.92:1 ✅ */ --adm-on-error: #f0f2f5; /* text on danger buttons: 4.70:1 ✅ */ /* --- Status: soft, harmonious with theme palettes --- */ --adm-success: #16a34a; --adm-success-bg: #ecfdf5; --adm-success-border: #a7f3d0; --adm-success-text: #065f46; --adm-error: #8c6068; --adm-error-bg: #f6f0f1; --adm-error-border: #dcc8cb; --adm-error-text: #6e4a50; --adm-warning: #d97706; /* WCAG fix: accessible amber for UI elements */ --adm-warning-bg: #fffbeb; --adm-warning-border: #fde68a; --adm-warning-text: #92400e; --adm-info: #0284c7; /* WCAG fix: accessible blue for UI elements */ --adm-info-bg: #f0f9ff; --adm-info-border: #bae6fd; --adm-info-text: #0c4a6e; /* --- Shapes --- */ --adm-radius: 8px; --adm-radius-lg: 12px; --adm-radius-sm: 6px; /* --- Shadows --- */ --adm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --adm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04); --adm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04); /* --- Transitions --- */ --adm-transition: 200ms ease; --adm-transition-slow: 300ms ease; } /* ============================================================================ 1b. DARK THEME OVERRIDES Applied via data-theme="dark" on ============================================================================ */ body[data-theme="dark"] { /* --- Sidebar (slightly lighter to differentiate from content) --- */ --adm-sidebar-bg: #111318; --adm-sidebar-surface: #181a22; --adm-sidebar-border: rgba(255, 255, 255, 0.06); --adm-sidebar-text: #d1d5db; --adm-sidebar-muted: #9ba8bc; /* WCAG fix: was #8b99b0 (3.9:1), now ~4.6:1 on dark sidebar bg ✅ */ --adm-sidebar-active: #a8b4d0; --adm-sidebar-active-bg:rgba(168, 180, 208, 0.14); /* --- Content area --- */ --adm-bg: #0f1117; --adm-surface: #1a1c25; --adm-surface-alt: #22242e; --adm-border: #2d3044; --adm-border-light: #262937; --adm-input-border: #4b5268; --adm-text: #e2e8f0; --adm-text-secondary: #94a3b8; --adm-text-muted: #95a0b3; /* WCAG fix: was #8892a4 (5.41:1), now 6.43:1 on surface ✅ */ /* --- Accent --- */ --adm-primary: #a8b4d0; --adm-primary-hover: #b8c4dc; --adm-primary-light: rgba(168, 180, 208, 0.12); --adm-primary-border: rgba(168, 180, 208, 0.25); --adm-primary-subtle: rgba(168, 180, 208, 0.06); --adm-on-primary: #0f1117; /* WCAG fix: white-on-#a8b4d0 was 1.85:1 ❌, dark ink is 9.08:1 ✅ (10.75:1 on hover) */ --adm-on-error: #0f1117; /* WCAG fix: white-on-#b07878 was 3.23:1 ❌, dark ink is 5.22:1 ✅ */ /* --- Status (darker backgrounds, brighter text) --- */ --adm-success: #34d399; --adm-success-bg: rgba(52, 211, 153, 0.1); --adm-success-border: rgba(52, 211, 153, 0.25); --adm-success-text: #6ee7b7; --adm-error: #b07878; --adm-error-bg: rgba(176, 120, 120, 0.1); --adm-error-border: rgba(176, 120, 120, 0.25); --adm-error-text: #d0a0a0; --adm-warning: #fbbf24; --adm-warning-bg: rgba(251, 191, 36, 0.1); --adm-warning-border: rgba(251, 191, 36, 0.25); --adm-warning-text: #fde68a; --adm-info: #38bdf8; --adm-info-bg: rgba(56, 189, 248, 0.1); --adm-info-border: rgba(56, 189, 248, 0.25); --adm-info-text: #7dd3fc; /* --- Shadows (stronger for dark surfaces) --- */ --adm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --adm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2); --adm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.2); } /* ============================================================================ 2. LAYOUT ============================================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--adm-bg); color: var(--adm-text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; color-scheme: light; } body[data-theme="dark"] { color-scheme: dark; } .admin-container { display: flex; min-height: 100vh; } /* ============================================================================ 3. SIDEBAR ============================================================================ */ .sidebar { width: var(--adm-sidebar-width); background: var(--adm-sidebar-bg); color: var(--adm-sidebar-text); padding: 0; position: fixed; top: 0; inset-inline-start: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; border-inline-end: 1px solid var(--adm-sidebar-border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 100; } /* Scrollbar */ .sidebar::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; } /* Header */ .sidebar-header { padding: 20px 20px 16px; border-bottom: 1px solid var(--adm-sidebar-border); flex-shrink: 0; } .sidebar-header h1 { font-size: 20px; font-weight: 700; margin-bottom: 2px; letter-spacing: -0.01em; } .sidebar-brand-icon { vertical-align: middle; margin-right: 6px; margin-top: -2px; } .sidebar-header p { font-size: 12px; color: var(--adm-sidebar-muted); font-weight: 400; } /* Navigation */ .sidebar-menu { list-style: none; padding: 12px 0; flex: 1; } .menu-section { padding: 0 12px; margin-bottom: 8px; } .menu-section ul { list-style: none; padding: 0; margin: 0; } .menu-section-title { font-size: 11px; text-transform: uppercase; color: var(--adm-sidebar-muted); font-weight: 600; letter-spacing: 0.08em; padding: 16px 8px 6px; } .menu-item { margin-bottom: 1px; } .menu-item a { display: flex; align-items: center; padding: 9px 12px; color: var(--adm-sidebar-text); text-decoration: none; border-radius: var(--adm-radius); font-size: 14px; font-weight: 450; transition: all var(--adm-transition); border-inline-start: 3px solid transparent; position: relative; } .menu-item a:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; } .menu-item a.active { background: var(--adm-sidebar-active-bg); color: var(--adm-sidebar-active); border-inline-start-color: var(--adm-sidebar-active); font-weight: 500; box-shadow: var(--adm-sidebar-active-glow); } .menu-icon { margin-inline-end: 10px; font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; } /* Submenu — collapsible */ .submenu { list-style: none; padding: 0 0 0 38px; margin: 0; max-height: 0; overflow: hidden; transition: max-height 0.25s ease, margin 0.25s ease, opacity 0.2s ease; opacity: 0; } .menu-item.is-expanded > .submenu { max-height: 200px; margin: 2px 0 4px; opacity: 1; } /* Chevron indicator for items with submenu */ .menu-item.has-submenu > a { padding-inline-end: 32px; } .menu-item.has-submenu > a::after { content: ''; position: absolute; inset-inline-end: 12px; top: 50%; width: 5px; height: 5px; border-inline-end: 1.5px solid var(--adm-sidebar-muted); border-bottom: 1.5px solid var(--adm-sidebar-muted); transform: translateY(-50%) rotate(-45deg); transition: transform 0.25s ease; } .menu-item.has-submenu.is-expanded > a::after { transform: translateY(-65%) rotate(45deg); } .submenu a { font-size: 13px !important; padding: 6px 12px !important; color: var(--adm-sidebar-muted) !important; border-inline-start: none !important; } .submenu a:hover { color: var(--adm-sidebar-text) !important; background: rgba(255, 255, 255, 0.04) !important; } /* ============================================================================ 4. MAIN CONTENT ============================================================================ */ .main-content { margin-inline-start: var(--adm-sidebar-width); flex: 1; padding: 28px 32px; min-width: 0; } .page-body { max-width: 1200px; } /* Page header */ .page-header { margin: -28px -32px 28px; padding: 16px 32px; border-bottom: 1px solid var(--adm-border); background: var(--adm-bg); position: sticky; top: 0; z-index: 50; } .page-header h2 { font-size: 18px; font-weight: 400; color: var(--adm-text); margin-bottom: 4px; letter-spacing: -0.02em; } .page-header p { color: var(--adm-text-secondary); font-size: 14px; } /* ============================================================================ 5. FLASH MESSAGES / ALERTS ============================================================================ */ .alert { padding: 12px 20px; border-radius: 5px; font-size: 12.5px; display: flex; align-items: center; gap: 8px; border-width: 1px; border-style: solid; position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 9999; max-width: 420px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); animation: toastSlideIn 0.3s ease, toastFadeOut 0.4s ease 4s forwards; pointer-events: auto; cursor: default; } .alert .alert-close { margin-inline-start: auto; background: none; border: none; font-size: 18px; line-height: 1; cursor: pointer; color: inherit; opacity: 0.6; padding: 0 0 0 12px; } .alert .alert-close:hover { opacity: 1; } @keyframes toastSlideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes toastFadeOut { from { opacity: 1; pointer-events: auto; } to { opacity: 0; transform: translateY(10px); pointer-events: none; } } .alert-success { background: var(--adm-success-bg); color: var(--adm-success-text); border-color: var(--adm-success-border); } .alert-error { background: var(--adm-error-bg); color: var(--adm-error-text); border-color: var(--adm-error-border); } .alert-warning { background: var(--adm-warning-bg); color: var(--adm-warning-text); border-color: var(--adm-warning-border); } .alert-info { background: var(--adm-info-bg); color: var(--adm-info-text); border-color: var(--adm-info-border); } /* ============================================================================ 6. BUTTONS (Unified) ============================================================================ */ /* Base button — ONE size for everything */ button, input[type="submit"], .btn, a.btn, a.btn-primary, a.btn-secondary, a.btn-ghost, a.btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 14px; font-size: 12.5px; font-weight: 500; border: 1px solid var(--adm-border); border-radius: 5px; background: var(--adm-surface); color: var(--adm-text); cursor: pointer; text-decoration: none; white-space: nowrap; transition: all 0.15s ease; line-height: 1.4; font-family: inherit; } button:hover, input[type="submit"]:hover, .btn:hover, a.btn:hover { transform: translateY(-1px); opacity: 0.9; } /* Primary — soft steel-blue */ .btn-primary, a.btn-primary, button[type="submit"]:not(.btn-danger):not(.btn-secondary):not(.btn-ghost):not(.action-link):not(.action-delete):not(.action-edit):not(.action-translate):not(.action-view):not(.sidebar-btn):not(.ai-assist-btn):not(.backup-btn), input[type="submit"] { background: var(--adm-primary); color: var(--adm-on-primary); border-color: var(--adm-primary); } .btn-primary:hover, a.btn-primary:hover, button[type="submit"]:not(.btn-danger):not(.btn-secondary):not(.btn-ghost):not(.action-link):not(.action-delete):not(.action-edit):not(.action-translate):not(.action-view):not(.sidebar-btn):not(.ai-assist-btn):not(.backup-btn):hover, input[type="submit"]:hover { background: var(--adm-primary-hover); border-color: var(--adm-primary-hover); color: var(--adm-on-primary); opacity: 1; } /* Secondary — subtle filled, NOT transparent */ .btn-secondary, a.btn-secondary, .btn-ghost, a.btn-ghost { background: var(--adm-primary-light); color: var(--adm-primary); border-color: var(--adm-primary); } .btn-secondary:hover, a.btn-secondary:hover, .btn-ghost:hover, a.btn-ghost:hover { border-color: var(--adm-primary-hover); opacity: 1; } /* Danger — muted dusty rose */ .btn-danger, a.btn-danger, .logout-btn { background: var(--adm-error); color: var(--adm-on-error); border-color: var(--adm-error); } .btn-danger:hover, a.btn-danger:hover, .logout-btn:hover { opacity: 0.85; } /* Small variant — only for tight spaces */ .btn-sm { padding: 5px 10px; font-size: 12px; } /* Button group */ .btn-group { display: flex; gap: 8px; flex-wrap: wrap; } /* ============================================================================ 7. FORM INPUTS & FIELDS ============================================================================ */ input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], input[type="search"], input[type="date"], input[type="datetime-local"], textarea, select { width: 100%; padding: 9px 12px; font-size: 14px; font-family: inherit; color: var(--adm-text); background: var(--adm-bg); border: 1px solid var(--adm-input-border); border-radius: var(--adm-radius); transition: border-color var(--adm-transition), box-shadow var(--adm-transition), background var(--adm-transition); outline: none; line-height: 1.5; } input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover, input[type="url"]:hover, textarea:hover, select:hover { border-color: var(--adm-border); } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="url"]:focus, input[type="number"]:focus, input[type="search"]:focus, textarea:focus, select:focus { border-color: var(--adm-primary); box-shadow: 0 0 0 3px var(--adm-primary-subtle); background: var(--adm-surface); } textarea { resize: vertical; min-height: 80px; } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-inline-end: 32px; } /* Labels */ label { display: block; font-size: 14px; font-weight: 500; color: var(--adm-text); margin-bottom: 4px; } /* Help text under fields */ .form-help, .help-text { font-size: 13px; color: var(--adm-text-muted); margin-top: 4px; } /* Form group spacing */ .form-group { margin-bottom: 20px; } .form-group select { max-width: 350px; } .filter-bar input[type="text"] { width: auto; max-width: 280px; } /* Checkbox & Radio */ input[type="checkbox"], input[type="radio"] { accent-color: var(--adm-primary); width: auto; } input[disabled], input[readonly] { background: var(--adm-bg); color: var(--adm-text-muted); cursor: default; } /* ============================================================================ 8. CARDS & PANELS ============================================================================ */ .card, .panel, div[style*="background: white"], div[style*="background:#fff"], div[style*="background: #fff"] { background: var(--adm-surface) !important; border: 1px solid var(--adm-border) !important; border-radius: var(--adm-radius-lg) !important; box-shadow: var(--adm-shadow-sm); } /* Generic card-like sections used in admin templates */ .settings-section, .form-section { background: var(--adm-surface); border: 1px solid var(--adm-border); border-radius: var(--adm-radius-lg); padding: 24px; margin-bottom: 20px; } .settings-section h3, .form-section h3 { font-size: 15px; font-weight: 600; color: var(--adm-text); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--adm-border-light); } .section-divider { border: none; border-top: 1px solid var(--adm-border-light); margin: 16px 0; } /* ============================================================================ 9. TABLES ============================================================================ */ table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } th { text-align: start; padding: 10px 14px; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--adm-text-muted); background: var(--adm-bg); border-bottom: 1px solid var(--adm-border); } td { padding: 10px 14px; border-bottom: 1px solid var(--adm-border-light); color: var(--adm-text); } tbody tr { transition: background var(--adm-transition); } tbody tr:hover { background: var(--adm-primary-subtle); } /* First and last cells rounded */ table thead th:first-child { border-radius: var(--adm-radius) 0 0 0; } table thead th:last-child { border-radius: 0 var(--adm-radius) 0 0; } /* ============================================================================ 10. USER MENU (bottom of sidebar) ============================================================================ */ .user-menu { padding: 16px; border-top: 1px solid var(--adm-sidebar-border); margin-top: auto; flex-shrink: 0; } .user-info { display: flex; align-items: center; margin-bottom: 10px; } .user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--adm-primary); display: flex; align-items: center; justify-content: center; margin-inline-end: 10px; font-weight: 600; font-size: 14px; color: #ffffff; } img.user-avatar--img { object-fit: cover; border: 2px solid var(--adm-border-light); } .user-name { font-size: 14px; font-weight: 500; color: var(--adm-sidebar-text); } .user-role { font-size: 12px; color: var(--adm-sidebar-muted); } .user-menu .profile-btn { display: block; width: 100%; padding: 7px 12px; color: var(--adm-sidebar-text); text-decoration: none; text-align: center; font-size: 13px; border: 1px solid var(--adm-sidebar-border); border-radius: var(--adm-radius); margin-bottom: 6px; transition: all var(--adm-transition); background: transparent; } .user-menu .profile-btn:hover { border-color: var(--adm-primary); color: var(--adm-primary); background: var(--adm-sidebar-active-bg); } .logout-btn { display: block; width: 100%; padding: 7px 12px; background: rgba(220, 38, 38, 0.15); color: #fca5a5; border: 1px solid rgba(220, 38, 38, 0.2); border-radius: var(--adm-radius); text-decoration: none; text-align: center; font-size: 13px; cursor: pointer; transition: all var(--adm-transition); } .logout-btn:hover { background: rgba(220, 38, 38, 0.25); color: #fecaca; border-color: rgba(220, 38, 38, 0.3); transform: none; } /* ============================================================================ 11. UTILITIES ============================================================================ */ /* Text helpers */ .text-muted { color: var(--adm-text-muted); } .text-secondary { color: var(--adm-text-secondary); } .text-primary { color: var(--adm-primary); } .text-success { color: var(--adm-success); } .text-error { color: var(--adm-error); } .text-sm { font-size: 12px; } .text-xs { font-size: 11px; } /* Spacing */ .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } /* Flex helpers */ .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } /* Additional spacing */ .mt-1 { margin-top: 4px; } .mt-3 { margin-top: 12px; } .mb-1 { margin-bottom: 4px; } .m-0 { margin: 0; } .mt-0 { margin-top: 0; } .input-readonly { cursor: default; opacity: 0.8; } .mb-3 { margin-bottom: 12px; } .mb-5 { margin-bottom: 20px; } .mt-5 { margin-top: 20px; } .ml-1 { margin-inline-start: 4px; } .ml-3 { margin-inline-start: 12px; } /* Additional flex */ .flex-col { flex-direction: column; } .gap-1 { gap: 4px; } .gap-6 { gap: 24px; } .flex-1 { flex: 1; } /* Additional text */ .text-md { font-size: 14px; } .text-bold { font-weight: 600; } .text-uppercase { text-transform: uppercase; } .text-lg { font-size: 20px; } .text-warning { color: var(--adm-warning); } .whitespace-nowrap { white-space: nowrap; } .whitespace-preline { white-space: pre-line; } .table-scroll { overflow-x: auto; } .td-truncate { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-start { text-align: start; } .text-normal { font-weight: 400; } .d-none { display: none; } .d-block { display: block; } .d-inline { display: inline; } .cursor-default { cursor: default; } .opacity-muted { opacity: 0.8; } .flex-shrink-0 { flex-shrink: 0; } .emoji-lg { font-size: 24px; } /* ── Info card ── */ .info-card { padding: 16px; border-radius: var(--adm-radius); background: var(--adm-bg); border: 1px solid var(--adm-border-light); } /* ── Action row (label left, button right) ── */ .action-row { display: flex; justify-content: space-between; align-items: center; } /* ── Mini label (uppercase muted) ── */ .mini-label { font-size: 12px; color: var(--adm-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } /* ── Status banner ── */ .status-banner { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: var(--adm-radius); margin-bottom: 20px; } .status-banner-success { background: var(--adm-success-bg); border: 1px solid var(--adm-success); } .status-banner-error { background: var(--adm-error-bg); border: 1px solid var(--adm-error); } .status-banner-warning { background: var(--adm-warning-bg); border: 1px solid var(--adm-warning); } /* ── Password toggle field ── */ .input-password-wrap { position: relative; } .input-password-wrap input { padding-inline-end: 44px; } .btn-password-toggle { position: absolute; inset-inline-end: 8px; top: 0; bottom: 0; display: flex; align-items: center; background: none; border: none; cursor: pointer; font-size: 18px; padding: 4px; color: var(--adm-text-muted); } /* ── Result box (shown via JS) ── */ .result-box { display: none; margin-top: 12px; padding: 12px; border-radius: var(--adm-radius-sm); font-size: 13px; } .result-box.visible { display: block; } .result-box.success { background: var(--adm-success-bg); border: 1px solid var(--adm-success); color: var(--adm-success); } .result-box.error { background: var(--adm-error-bg); border: 1px solid var(--adm-error); color: var(--adm-error); } .result-box.warning { background: var(--adm-warning-bg); border: 1px solid var(--adm-warning); color: var(--adm-warning); } /* ── Social links list ── */ .social-links-list { display: flex; flex-direction: column; gap: 10px; } .social-link-row { display: flex; align-items: center; gap: 10px; } .social-link-row svg { flex-shrink: 0; } .social-link-row input { flex: 1; } /* ── Radio group row ── */ .radio-group { display: flex; gap: 24px; } .radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; } /* ── Guide table (SMTP setup etc.) ── */ .guide-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 13px; } .guide-table th { padding: 8px; font-weight: 600; background: var(--adm-border-light); text-align: start; } .guide-table td { padding: 8px; border-bottom: 1px solid var(--adm-border-light); } .guide-table tr:last-child td { border-bottom: none; } /* ── Collapsible guide block ── */ .guide-header { cursor: pointer; padding: 12px 16px; border-radius: var(--adm-radius); font-weight: 500; display: flex; align-items: center; gap: 8px; background: var(--adm-info-bg); color: var(--adm-info-text); } .guide-body { display: none; padding: 20px; border-radius: 0 0 var(--adm-radius) var(--adm-radius); font-size: 14px; line-height: 1.7; background: var(--adm-bg); border: 1px solid var(--adm-border-light); color: var(--adm-text-secondary); } .guide-body.active { display: block; } .guide-body p { margin: 0 0 12px; } .guide-body p:last-child { margin-bottom: 0; } /* ── Logo preview ── */ .logo-preview-wrap { position: relative; display: none; margin-top: 8px; width: fit-content; } .logo-preview-wrap img { max-height: 60px; border-radius: var(--adm-radius-sm); border: 1px solid var(--adm-border-light); } .image-preview-wrap { position: relative; display: none; margin-top: 8px; width: fit-content; } .image-preview-wrap .image-preview-thumb { display: block; } .btn-remove-preview { position: absolute; top: -8px; inset-inline-end: -8px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--adm-border); background: var(--adm-surface); color: var(--adm-text-secondary); font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } /* ── SMTP max-width helper ── */ .input-narrow { max-width: 150px; } /* ============================================================================ 12. BADGES & STATUS ============================================================================ */ .badge { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 11px; font-weight: 500; border-radius: 20px; white-space: nowrap; } .badge-published, .badge-success { background: var(--adm-success-bg); color: var(--adm-success-text); } .badge-draft { background: var(--adm-warning-bg); color: var(--adm-warning-text); } .badge-active { background: var(--adm-primary-light); color: #4338ca; /* WCAG fix: was --adm-primary-hover, 4338ca = 7.07:1 ✅ */ } .badge-inactive { background: #f1f5f9; color: #475569; /* WCAG fix: was #64748b (4.34:1), now 6.92:1 ✅ */ } /* ============================================================================ 13. RESPONSIVE (admin sidebar collapse on small screens) ============================================================================ */ /* ── Hamburger toggle button ── */ .sidebar-toggle { display: none; align-items: center; justify-content: center; position: fixed; top: 16px; inset-inline-start: 16px; z-index: 1001; width: 44px; height: 44px; background: var(--adm-surface); color: var(--adm-text); border: 1px solid var(--adm-border); border-radius: var(--adm-radius); font-size: 22px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); transition: background 0.2s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent; } .sidebar-toggle:hover { background: var(--adm-primary-light); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .sidebar-toggle:active { transform: scale(0.95); } /* ── Sidebar overlay ── */ .sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.3s ease; -webkit-tap-highlight-color: transparent; } .sidebar-overlay.is-open { opacity: 1; } @media (max-width: 768px) { .sidebar-toggle { display: flex; } .sidebar-overlay { display: block; pointer-events: none; } .sidebar-overlay.is-open { pointer-events: auto; } .sidebar { transform: translateX(-100%); transition: transform 0.3s ease; z-index: 1000; } .sidebar.is-open { transform: translateX(0); } .main-content { margin-inline-start: 0; padding: 20px 16px; padding-top: 72px; /* space for hamburger button */ } .page-header--with-action { margin: -20px -16px 20px; padding: 12px 16px; top: 60px; /* below hamburger */ } .page-header--with-action .btn-group { gap: 4px; } } /* ── RTL: mobile sidebar slides from right edge ── */ @media (max-width: 768px) { [dir="rtl"] .sidebar { transform: translateX(100%); } [dir="rtl"] .sidebar.is-open { transform: translateX(0); } } /* ============================================================================ 14. PAGE-SPECIFIC COMPONENT CLASSES Shared patterns extracted from admin templates for de-hardcoding. ============================================================================ */ /* ── Settings / card sections ── */ .settings-section { background: var(--adm-surface); padding: 24px; border-radius: var(--adm-radius-lg); margin-bottom: 24px; border: 1px solid var(--adm-border); } .settings-section h3 { font-size: 15px; margin-bottom: 16px; color: var(--adm-text); padding-bottom: 12px; border-bottom: 1px solid var(--adm-border-light); } .section-subtitle { margin-top: -12px; margin-bottom: 16px; } .profile-avatar-preview { width: 60px; height: 60px; border-radius: 50%; margin-top: 8px; object-fit: cover; border: 2px solid var(--adm-border-light); } .profile-avatar-wrap { position: relative; display: inline-block; margin-top: 8px; } .profile-avatar-wrap .profile-avatar-preview { margin-top: 0; } .profile-avatar-remove { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--adm-border); background: var(--adm-surface); color: var(--adm-text-secondary); font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--adm-shadow-sm); transition: all var(--adm-transition); } .profile-avatar-remove:hover { background: var(--adm-error-bg); color: var(--adm-error-text); border-color: var(--adm-error-border); } /* ── Status connected / not connected ── */ .status-connected { background: var(--adm-success-bg); color: var(--adm-success-text); } .status-not-connected { background: var(--adm-error-bg); color: var(--adm-error-text); } /* ── Container widths ── */ .container-sm { max-width: 700px; } .container-md { max-width: 900px; } .container-lg { max-width: 1100px; } .container-xl { max-width: 1200px; } /* ── Editor layout (two-column: main + sidebar) ── */ .editor-layout { display: grid; grid-template-columns: 1fr 350px; gap: 24px; align-items: start; } .editor-layout--wide { max-width: 1200px; } .editor-main { background: var(--adm-surface); padding: 24px; border-radius: var(--adm-radius-lg); border: 1px solid var(--adm-border); } .editor-sidebar { display: flex; flex-direction: column; gap: 16px; } @media (max-width: 1024px) { .editor-layout { grid-template-columns: 1fr; } } /* ── Grid layouts ── */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-bottom: 16px; } .stat-grid:last-child { margin-bottom: 0; } @media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } } /* ── Stat items ── */ .stat-item { background: var(--adm-bg); border-radius: var(--adm-radius); padding: 16px; text-align: center; border: 1px solid var(--adm-border-light); } .stat-value { font-size: 24px; font-weight: 700; color: var(--adm-text); } .stat-label { font-size: 13px; color: var(--adm-text-muted); margin-top: 4px; } /* ── Label with required marker ── */ label.required::after { content: ' *'; color: var(--adm-error); } /* ── Checkbox-style label ── */ label.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; } /* ── Content editor textarea ── */ textarea.editor-content { min-height: 400px; font-family: 'Courier New', monospace; } textarea.code-textarea { font-family: 'Courier New', monospace; font-size: 13px; } /* ── Collapsible sections ── */ .collapsible { border-top: 1px solid var(--adm-border-light); padding-top: 16px; margin-top: 16px; } .collapsible-header { cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-weight: 600; color: var(--adm-text); } .collapsible-header:hover { color: var(--adm-primary); } .collapsible-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .collapsible-content.active { max-height: 2000px; } .arrow { transition: transform 0.3s; } .arrow.active { transform: rotate(90deg); } /* ── Form actions bar ── */ .form-actions { display: flex; align-items: center; gap: 12px; padding-top: 24px; border-top: 1px solid var(--adm-border); margin-top: 24px; } .form-actions .spacer { margin-inline-start: auto; } /* ── Button: pick image ── */ .btn-pick-image { padding: 7px 14px; background: var(--adm-primary); color: var(--adm-on-primary); border: 1px solid var(--adm-primary); border-radius: 5px; font-size: 12.5px; cursor: pointer; white-space: nowrap; font-weight: 500; transition: all 0.15s ease; } .btn-pick-image:hover { background: var(--adm-primary-hover); } /* ── Button: sidebar-wide ── */ .sidebar-btn { display: block; width: 100%; padding: 7px 14px; border-radius: 5px; font-size: 12.5px; font-weight: 500; cursor: pointer; text-align: center; text-decoration: none; margin-bottom: 8px; border: 1px solid var(--adm-border); } .sidebar-btn--highlight { background: var(--adm-primary-light); color: var(--adm-primary); border: 2px solid var(--adm-primary); } .sidebar-btn--highlight:hover { border-color: var(--adm-primary-hover); transform: translateY(-1px); } .sidebar-btn--primary { background: var(--adm-primary); color: #fff; } .lang-flag { width: 18px; height: 13px; vertical-align: middle; border-radius: 2px; } /* ── AI assist & translate buttons ── */ .btn-ai, .ai-assist-btn, .ai-translate-all { background: var(--adm-primary); color: var(--adm-on-primary); border: 1px solid var(--adm-primary); border-radius: 5px; font-weight: 500; cursor: pointer; } .ai-assist-btn { padding: 7px 14px; font-size: 12.5px; margin-top: 8px; } .ai-translate-all { padding: 7px 14px; font-size: 12.5px; width: auto; margin-top: 8px; } .btn-ai:hover, .ai-assist-btn:hover, .ai-translate-all:hover { background: var(--adm-primary-hover); transform: translateY(-1px); } .btn-ai:disabled, .ai-translate-all:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* ── Image field row ── */ .image-field-row { display: flex; gap: 8px; align-items: center; } .image-field-row input { flex: 1; } .image-preview-thumb { width: 100%; max-height: 200px; object-fit: cover; border-radius: var(--adm-radius-sm); margin-top: 8px; display: none; } /* ── Source info box (translation pages) ── */ .source-info { background: linear-gradient(135deg, var(--adm-primary-light) 0%, #f5f0ff 100%); border: 2px solid var(--adm-primary); border-radius: var(--adm-radius); padding: 16px; margin-bottom: 20px; } .source-info h4 { margin: 0 0 8px 0; color: var(--adm-primary); font-size: 14px; } .source-info p { margin: 0 0 4px 0; font-size: 13px; color: var(--adm-text-secondary); } .source-info a { color: var(--adm-primary); text-decoration: none; font-size: 13px; } .source-info a:hover { text-decoration: underline; } /* ── Translation list (sidebar) ── */ .translation-list { list-style: none; padding: 0; margin: 0; } .translation-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--adm-border-light); font-size: 13px; } .translation-item:last-child { border-bottom: none; } .translation-lang { font-weight: 600; color: var(--adm-text); } .translation-status { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 500; } .translation-status.published { background: var(--adm-success-bg); color: var(--adm-success-text); } .translation-status.draft { background: var(--adm-warning-bg); color: var(--adm-warning-text); } .translation-link { color: var(--adm-primary); text-decoration: none; font-size: 13px; } .translation-link:hover { text-decoration: underline; } .add-translation-select { width: 100%; padding: 8px 12px; border: 2px dashed var(--adm-border); border-radius: var(--adm-radius-sm); font-size: 13px; background: var(--adm-bg); cursor: pointer; margin-top: 8px; } .current-lang-badge { display: inline-block; background: var(--adm-primary); color: var(--adm-on-primary); font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600; } /* ── Content list pages (posts/pages list) ── */ .content-table { width: 100%; background: var(--adm-surface); border-radius: var(--adm-radius-lg); border: 1px solid var(--adm-border); border-collapse: collapse; overflow: hidden; } .content-table thead { background: var(--adm-bg); } .content-table th { padding: 12px 16px; text-align: start; font-size: 12px; text-transform: uppercase; color: var(--adm-text-muted); font-weight: 600; letter-spacing: 0.05em; border-bottom: 1px solid var(--adm-border); } .content-table td { padding: 8px 16px; font-size: 14px; border-bottom: 1px solid var(--adm-border-light); vertical-align: middle; } .content-table tr:hover { background: var(--adm-primary-subtle); } .content-table tr:last-child td { border-bottom: none; } /* ── Title link in content tables ── */ .title-link, .page-title-link, .text-link { color: var(--adm-text); text-decoration: none; font-weight: 600; font-size: 15px; } .title-link:hover, .page-title-link:hover, .text-link:hover { color: var(--adm-primary); } .slug-text { color: var(--adm-text-muted); font-size: 12px; margin-top: 2px; } /* ── Status badges (list pages) ── */ .status-badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; } .status-published { background: var(--adm-success-bg); color: var(--adm-success-text); } .status-draft { background: var(--adm-warning-bg); color: var(--adm-warning-text); } /* ── Language badge ── */ .lang-badge { display: inline-block; padding: 2px 8px; background: var(--adm-border-light); border-radius: 4px; font-size: 12px; font-weight: 600; color: var(--adm-text-secondary); } /* ── Action links ── */ .actions { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; width: max-content; } .action-link { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--adm-radius-sm); font-size: 13px; line-height: 1.4; text-decoration: none; font-weight: 500; white-space: nowrap; transition: all var(--adm-transition); } button.action-link { border: none; cursor: pointer; font-family: inherit; } .action-edit { background: var(--adm-info-bg); color: var(--adm-info-text); } .action-edit:hover { background: var(--adm-info-border); } .action-translate { background: var(--adm-primary-light); color: var(--adm-primary); } .action-translate:hover { background: var(--adm-primary-border); } .action-duplicate { background: var(--adm-primary-light); color: var(--adm-primary); } .action-duplicate:hover { background: var(--adm-primary-border); } .action-view { background: var(--adm-success-bg); color: var(--adm-success-text); } .action-view:hover { background: var(--adm-success-border); } .action-delete { background: var(--adm-error-bg); color: var(--adm-error-text); } .action-delete:hover { background: var(--adm-error-border); } /* ── Search autocomplete ── */ .search-autocomplete { position: relative; flex: 1; } .search-autocomplete input { width: 100%; } .autocomplete-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--adm-surface); border: 1px solid var(--adm-border); border-radius: var(--adm-radius-sm); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); z-index: 100; max-height: 320px; overflow-y: auto; margin-top: 4px; } .autocomplete-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; text-decoration: none; color: var(--adm-text); border-bottom: 1px solid var(--adm-border-light); transition: background var(--adm-transition); gap: 12px; } .autocomplete-item:last-child { border-bottom: none; } .autocomplete-item:hover { background: var(--adm-primary-light); } .autocomplete-title { font-size: 13px; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .autocomplete-meta { display: flex; gap: 6px; align-items: center; flex-shrink: 0; } /* ── Filter bar ── */ .filter-bar { display: flex; gap: 8px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; } .filter-bar select { width: auto; padding: 8px 32px 8px 14px; font-size: 14px; } .filter-link { padding: 6px 14px; border-radius: 5px; text-decoration: none; font-size: 12.5px; color: var(--adm-text-secondary); background: var(--adm-surface); border: 1px solid var(--adm-border); transition: all 0.15s ease; } .filter-link:hover { background: var(--adm-bg); } .filter-link.active { background: var(--adm-primary); color: var(--adm-on-primary); border-color: var(--adm-primary); } .filter-row { display: flex; gap: 10px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; } .filter-row label { font-size: 14px; color: var(--adm-text-muted); font-weight: 500; } .filter-row select { width: auto; padding: 8px 32px 8px 14px; font-size: 14px; } .filter-row input[type="text"] { width: auto; min-width: 180px; max-width: 280px; padding: 8px 12px; font-size: 14px; } /* ── Bulk actions bar ── */ .bulk-actions { display: flex; gap: 10px; align-items: center; padding: 10px 16px; margin-bottom: 12px; background: var(--adm-surface); border: 1px solid var(--adm-primary); border-radius: 8px; font-size: 13px; color: var(--adm-text); justify-content: flex-end; } /* ── Form type badge ── */ .form-type-badge { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 500; text-transform: uppercase; border-radius: 4px; background: var(--adm-surface); color: var(--adm-text-secondary); border: 1px solid var(--adm-border); } /* ── Search box ── */ .search-box { margin-inline-start: auto; display: flex; gap: 6px; } /* ── Pagination ── */ .pagination { display: flex; gap: 6px; justify-content: center; margin-top: 24px; } .pagination a, .pagination span { padding: 8px 14px; border-radius: var(--adm-radius-sm); text-decoration: none; font-size: 14px; border: 1px solid var(--adm-border); color: var(--adm-text-secondary); background: var(--adm-surface); } .pagination a:hover { background: var(--adm-bg); } .pagination .current { background: var(--adm-primary); color: var(--adm-on-primary); border-color: var(--adm-primary); font-weight: 600; } .pagination-footer { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; } .pagination-footer .pagination { margin-top: 0; } .per-page-selector { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--adm-text-muted); margin-inline-start: auto; white-space: nowrap; } .per-page-selector select { width: auto; min-width: 0; padding: 4px 28px 4px 8px; border-radius: var(--adm-radius-sm); border: 1px solid var(--adm-border); background: var(--adm-surface); color: var(--adm-text); font-size: 13px; cursor: pointer; } /* ── Empty state ── */ .empty-state { text-align: center; padding: 60px 20px; color: var(--adm-text-muted); } .empty-state h3 { color: var(--adm-text); margin-bottom: 8px; } .empty-state p { color: var(--adm-text-muted); margin-bottom: 20px; } .empty-state a { text-decoration: none; font-weight: 500; } .empty-state a.btn-primary, .empty-state a.btn-upload { color: var(--adm-on-primary); } .empty-state-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; } /* ── Info box ── */ .info-box { background: var(--adm-primary-light); border-inline-start: 4px solid var(--adm-primary); padding: 14px 16px; border-radius: var(--adm-radius-sm); margin-top: 20px; margin-bottom: 24px; } .info-box p { margin: 0; color: var(--adm-text-secondary); font-size: 14px; line-height: 1.5; } /* ── Role badges (users page) ── */ .role-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; } .role-owner { background: var(--adm-warning-bg); color: var(--adm-warning-text); } .role-admin { background: var(--adm-info-bg); color: var(--adm-info-text); } .role-editor { background: var(--adm-border-light); color: var(--adm-text-secondary); } .role-pending { background: var(--adm-error-bg); color: var(--adm-error-text); } /* ── User row (users page) ── */ .user-row { display: flex; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--adm-border-light); } .user-row:last-child { border-bottom: none; } .user-avatar-lg { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #ffffff; font-size: 18px; margin-inline-end: 16px; flex-shrink: 0; } img.user-avatar-lg.user-avatar--img { object-fit: cover; border: 2px solid var(--adm-border-light); } .user-info-col { flex: 1; } .user-name-lg { font-weight: 600; font-size: 15px; color: var(--adm-text); } .user-email { font-size: 13px; color: var(--adm-text-muted); } .user-meta { font-size: 12px; color: var(--adm-text-muted); margin-top: 2px; } /* ── User actions ── */ .user-actions { display: flex; gap: 8px; align-items: center; } .user-actions select { padding: 5px 28px 5px 10px; font-size: 13px; line-height: 1.4; } /* ── Invite form (users page) ── */ .invite-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; } .invite-form .form-group { margin-bottom: 0; } .btn-invite { padding: 7px 14px; background: var(--adm-primary); color: var(--adm-on-primary); border: 1px solid var(--adm-primary); border-radius: 5px; font-weight: 500; cursor: pointer; font-size: 12.5px; } .btn-invite:hover { background: var(--adm-primary-hover); opacity: 0.9; } /* ── Backup page ── */ .backup-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; background: var(--adm-primary); color: var(--adm-on-primary); border: 1px solid var(--adm-primary); border-radius: 5px; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; } .backup-btn:hover { background: var(--adm-primary-hover); transform: translateY(-1px); } .backup-btn:disabled { opacity: 0.6; cursor: wait; transform: none; } .backup-btn--danger { background: var(--adm-error); border-color: var(--adm-error); } /* ── Spinner (backup/restore) ── */ .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #ffffff; border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Audit log ── */ .log-table { width: 100%; border-collapse: collapse; background: var(--adm-surface); border-radius: var(--adm-radius-lg); overflow: hidden; border: 1px solid var(--adm-border); } .log-table th { background: var(--adm-bg); text-align: start; padding: 12px 16px; font-size: 12px; text-transform: uppercase; color: var(--adm-text-muted); font-weight: 600; letter-spacing: 0.05em; border-bottom: 1px solid var(--adm-border); } .log-table td { padding: 12px 16px; border-bottom: 1px solid var(--adm-border-light); font-size: 14px; color: var(--adm-text-secondary); vertical-align: middle; } .log-table tr:hover { background: var(--adm-primary-subtle); } .ip-cell { font-family: 'Courier New', monospace; font-size: 13px; color: var(--adm-text-muted); } .time-cell { font-size: 13px; color: var(--adm-text-muted); white-space: nowrap; } .date-cell { color: var(--adm-text-muted); font-size: 13px; } .author-cell { color: var(--adm-text-secondary); font-size: 13px; } /* ── Audit log action badges ── */ .badge-login { background: var(--adm-success-bg); color: var(--adm-success-text); } .badge-login_failed { background: var(--adm-error-bg); color: var(--adm-error-text); } .badge-login_blocked { background: var(--adm-error-border); color: var(--adm-error-text); } .badge-logout { background: var(--adm-border-light); color: var(--adm-text-secondary); } .badge-create_post, .badge-create_page { background: var(--adm-info-bg); color: var(--adm-info-text); } .badge-edit_post, .badge-edit_page, .badge-edit_settings { background: var(--adm-warning-bg); color: var(--adm-warning-text); } .badge-delete_post, .badge-delete_page { background: var(--adm-error-bg); color: var(--adm-error-text); } /* ── Menu page ── */ .menu-tabs { display: flex; gap: 12px; margin-bottom: 24px; border-bottom: 2px solid var(--adm-border-light); padding-bottom: 0; } .menu-tab { padding: 12px 24px; background: transparent; border: none; border-bottom: 3px solid transparent; cursor: pointer; font-weight: 500; color: var(--adm-text-muted); font-size: 15px; transition: all var(--adm-transition); } .menu-tab.active { color: var(--adm-primary); border-bottom-color: var(--adm-primary); } .menu-tab:hover { color: var(--adm-primary); } .menu-form { background: var(--adm-surface); padding: 32px; border-radius: var(--adm-radius-lg); border: 1px solid var(--adm-border); } .menu-form h3 { font-size: 20px; margin-bottom: 20px; color: var(--adm-text); } .current-menu { background: var(--adm-bg); padding: 20px; border-radius: var(--adm-radius); margin-bottom: 24px; } .current-menu h4 { font-size: 14px; color: var(--adm-text-muted); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; } .current-menu-item { padding: 12px; background: var(--adm-surface); border: 1px solid var(--adm-border-light); border-radius: var(--adm-radius-sm); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; } .current-menu-item:last-child { margin-bottom: 0; } .menu-item-info { flex: 1; } .menu-item-title { font-weight: 600; color: var(--adm-text); margin-bottom: 2px; } .menu-item-link { font-size: 13px; color: var(--adm-text-muted); } .menu-item-type-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; margin-inline-start: 8px; } .type-page { background: var(--adm-border-light); color: var(--adm-text-secondary); } .type-post { background: var(--adm-warning-bg); color: var(--adm-warning-text); } /* ── Content type tabs (inside menu forms) ── */ .content-tabs { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 1px solid var(--adm-border-light); } .content-tab { padding: 10px 20px; background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-weight: 500; color: var(--adm-text-muted); font-size: 14px; transition: all var(--adm-transition); } .content-tab.active { color: var(--adm-text); border-bottom-color: var(--adm-primary); background: var(--adm-bg); } .content-tab:hover { color: var(--adm-text); } .content-panel { display: none; } .content-panel.active { display: block; } /* ── Selected counter (menus) ── */ .selected-counter { font-size: 13px; color: var(--adm-primary); font-weight: 600; margin-inline-start: auto; } /* ── Row check state (menus) ── */ .content-table .cb-cell { width: 40px; text-align: center; } .content-table .cb-cell input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; } .content-table .title-cell { font-weight: 600; color: var(--adm-text); } .content-table .slug-cell { color: var(--adm-text-muted); font-size: 12px; margin-top: 2px; } .content-table .label-input { padding: 4px 8px; border: 1px solid var(--adm-border); border-radius: 4px; font-size: 13px; width: 140px; color: var(--adm-text-secondary); display: none; } .content-table .label-input:focus { border-color: var(--adm-primary); } .content-table tr.row-checked { background: var(--adm-primary-light); } .content-table tr.row-checked .label-input { display: inline-block; } /* ── AI section (ai.html) ── */ .ai-section { background: var(--adm-surface); padding: 24px; border-radius: var(--adm-radius-lg); margin-bottom: 24px; border: 1px solid var(--adm-border); } .ai-section h3 { font-size: 18px; margin-bottom: 20px; color: var(--adm-text); padding-bottom: 12px; border-bottom: 1px solid var(--adm-border-light); } .api-key-row { display: flex; gap: 12px; align-items: flex-start; } .api-key-row input { flex: 1; } .tool-card { padding: 20px; border: 1px solid var(--adm-border); border-radius: var(--adm-radius); margin-bottom: 16px; transition: all var(--adm-transition); } .tool-card:hover { border-color: var(--adm-primary); background: var(--adm-primary-subtle); } .tool-card h4 { margin-bottom: 8px; color: var(--adm-text); } .tool-card p { font-size: 13px; color: var(--adm-text-muted); margin-bottom: 12px; } /* ── AI Chat (moved from ai.html