/* ============================================================ Dark SaaS Admin Theme — License Manager ============================================================ */ /* ============================================================ Theme System — License Manager 5 color themes x light/dark mode, switched via . Set from Appearance page. ============================================================ */ :root { --radius: 12px; } /* ---- Indigo (default) ---- */ [data-theme="indigo"][data-mode="dark"] { --bg: #0b0f19; --bg-panel: #131826; --bg-panel-2: #1a2032; --border: #242b3d; --text: #e6e9f0; --text-dim: #8b93a7; --accent: #6366f1; --accent-2: #818cf8; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --shadow: 0 4px 24px rgba(0,0,0,.35); } [data-theme="indigo"][data-mode="light"] { --bg: #f4f5f9; --bg-panel: #ffffff; --bg-panel-2: #f8f9fc; --border: #e2e4eb; --text: #1a1f2e; --text-dim: #6b7280; --accent: #6366f1; --accent-2: #4f46e5; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --shadow: 0 4px 24px rgba(20,20,40,.08); } /* ---- Ocean ---- */ [data-theme="ocean"][data-mode="dark"] { --bg: #0a1420; --bg-panel: #0f1f30; --bg-panel-2: #142943; --border: #1e3350; --text: #e4eef7; --text-dim: #85a0bb; --accent: #0ea5e9; --accent-2: #38bdf8; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --shadow: 0 4px 24px rgba(0,0,0,.35); } [data-theme="ocean"][data-mode="light"] { --bg: #f0f7fc; --bg-panel: #ffffff; --bg-panel-2: #f4f9fd; --border: #dbe9f3; --text: #0f2635; --text-dim: #5d7a90; --accent: #0ea5e9; --accent-2: #0284c7; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --shadow: 0 4px 24px rgba(10,40,60,.08); } /* ---- Emerald ---- */ [data-theme="emerald"][data-mode="dark"] { --bg: #08150f; --bg-panel: #0e2018; --bg-panel-2: #142b21; --border: #1f3d2f; --text: #e3f3ea; --text-dim: #82ab97; --accent: #10b981; --accent-2: #34d399; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --shadow: 0 4px 24px rgba(0,0,0,.35); } [data-theme="emerald"][data-mode="light"] { --bg: #f1f9f5; --bg-panel: #ffffff; --bg-panel-2: #f5faf7; --border: #dbeee3; --text: #0d2318; --text-dim: #5d8271; --accent: #10b981; --accent-2: #059669; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --shadow: 0 4px 24px rgba(10,40,25,.08); } /* ---- Sunset ---- */ [data-theme="sunset"][data-mode="dark"] { --bg: #1a0f08; --bg-panel: #26160c; --bg-panel-2: #331e10; --border: #4a2c16; --text: #f7ece2; --text-dim: #bb9a80; --accent: #f97316; --accent-2: #fb923c; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --shadow: 0 4px 24px rgba(0,0,0,.35); } [data-theme="sunset"][data-mode="light"] { --bg: #fdf6f0; --bg-panel: #ffffff; --bg-panel-2: #fef9f4; --border: #f3e2d2; --text: #2b1a0d; --text-dim: #8a6b4f; --accent: #f97316; --accent-2: #ea580c; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --shadow: 0 4px 24px rgba(60,30,10,.08); } /* ---- Rose ---- */ [data-theme="rose"][data-mode="dark"] { --bg: #190910; --bg-panel: #251019; --bg-panel-2: #321623; --border: #4a2030; --text: #f7e4ec; --text-dim: #bb8095; --accent: #f43f5e; --accent-2: #fb7185; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --shadow: 0 4px 24px rgba(0,0,0,.35); } [data-theme="rose"][data-mode="light"] { --bg: #fdf2f5; --bg-panel: #ffffff; --bg-panel-2: #fef6f8; --border: #f5dde3; --text: #2b0e16; --text-dim: #8a5a68; --accent: #f43f5e; --accent-2: #e11d48; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --shadow: 0 4px 24px rgba(60,10,25,.08); } /* Fallback if no data-theme/data-mode is set on yet */ :root { --bg: #0b0f19; --bg-panel: #131826; --bg-panel-2: #1a2032; --border: #242b3d; --text: #e6e9f0; --text-dim: #8b93a7; --accent: #6366f1; --accent-2: #818cf8; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --shadow: 0 4px 24px rgba(0,0,0,.35); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.5; transition: background-color .15s ease, color .15s ease; } a { color: var(--accent-2); text-decoration: none; } a:hover { color: var(--accent); } .app-shell { display: flex; min-height: 100vh; } /* Sidebar */ .sidebar { width: 240px; background: var(--bg-panel); border-right: 1px solid var(--border); padding: 24px 16px; flex-shrink: 0; } .sidebar .brand { font-weight: 700; font-size: 17px; margin-bottom: 28px; display: flex; align-items: center; gap: 10px; } .sidebar .brand .dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px var(--accent); } .sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--text-dim); font-weight: 500; margin-bottom: 4px; transition: background .15s, color .15s; } .sidebar nav a:hover, .sidebar nav a.active { background: var(--bg-panel-2); color: var(--text); } /* Main content */ .main { flex: 1; padding: 28px 36px; max-width: 1400px; } .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .topbar h1 { font-size: 20px; font-weight: 700; margin: 0; } .topbar .admin-name { color: var(--text-dim); font-size: 13px; } /* Cards */ .card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .card + .card { margin-top: 16px; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .stat-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; } .stat-card .label { color: var(--text-dim); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; } .stat-card .value { font-size: 26px; font-weight: 700; margin-top: 6px; } .stat-card.accent .value { color: var(--accent-2); } .stat-card.success .value { color: var(--success); } .stat-card.warning .value { color: var(--warning); } .stat-card.danger .value { color: var(--danger); } /* Table */ table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; } th { color: var(--text-dim); font-weight: 600; text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; } tr:hover td { background: var(--bg-panel-2); } /* Badges */ .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; } .badge-active { background: rgba(34,197,94,.15); color: var(--success); } .badge-grace { background: rgba(245,158,11,.15); color: var(--warning); } .badge-expired, .badge-cancelled, .badge-invalid, .badge-domain_mismatch { background: rgba(239,68,68,.15); color: var(--danger); } .badge-suspended { background: rgba(139,147,167,.15); color: var(--text-dim); } /* Forms */ label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; font-weight: 500; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; color: var(--text); font-size: 14px; margin-bottom: 16px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.2); } .btn { display: inline-block; background: var(--accent); color: #fff; border: none; padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s; } .btn:hover { background: var(--accent-2); } .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); } .btn-outline:hover { border-color: var(--accent); color: var(--accent-2); background: var(--bg-panel-2); } .btn-danger { background: var(--danger); } .btn-sm { padding: 6px 12px; font-size: 12.5px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* Login page */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 20%, #171d30, var(--bg) 60%); } .auth-box { width: 380px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); } .auth-box .brand { text-align: center; margin-bottom: 24px; font-size: 20px; font-weight: 700; } .alert { padding: 12px 14px; border-radius: 8px; font-size: 13.5px; margin-bottom: 16px; } .alert-danger { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; } .alert-success { background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.35); color: #86efac; } [data-mode="light"] .alert-success { color: #14532d; background: rgba(34,197,94,.15); } .text-dim { color: var(--text-dim); } .mt-16 { margin-top: 16px; } .flex-between { display: flex; justify-content: space-between; align-items: center; }