/* GymSystem - Clean UI Theme Notes: - We keep the background image set inline in _Layout.cshtml (from Settings). - This CSS uses a subtle dark overlay (configurable) so the background stays visible. - Colors are defined as CSS variables for easy tweaking. */ :root{ /* Pro Gym theme: Dark base + Neon Green accent */ --bg: #070a0f; /* Dark glass surfaces so content stays readable and not "washed out" */ --surface: rgba(0,0,0,.38); --surface-2: rgba(0,0,0,.48); --border: rgba(255,255,255,.14); --text: #f3f7ff; --muted: rgba(243,247,255,.78); /* Accent palette */ --accent: #22c55e; /* neon green */ --accent-2: #06b6d4; /* cyan */ /* background overlay (0 = transparent, 1 = fully black) */ /* Darken slightly (less "washed out" than white overlays) */ /* Keep background image vivid by default */ /* Slightly darker overlay keeps the background visible without washing UI */ /* lower overlay so chosen background image stays clear */ /* Default overlay: keep contrast but let the image stay clear */ /* overlay: keep the background visible but ensure contrast */ --bg-overlay-opacity: .28; } /* Adaptive readability ------------------- Default palette is DARK (above). When the background image is detected as "light", JS sets: and we switch variables to a LIGHT surface palette. */ body[data-bg-tone="light"]{ --bg: #f6f7fb; --surface: rgba(255,255,255,.78); --surface-2: rgba(255,255,255,.88); --border: rgba(0,0,0,.12); --text: #0b1220; --muted: rgba(11,18,32,.72); --bg-overlay-opacity: .06; } html, body { height: 100%; } body{ background-color: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* App background wrapper (see _Layout.cshtml: ) */ .app-body{ min-height: 100vh; /* When no custom background image is set, we still show a professional gym-themed dark background with subtle neon highlights. */ background-color: var(--bg); background-image: radial-gradient(900px 540px at 85% -10%, rgba(16,185,129,.22), transparent 60%), radial-gradient(780px 520px at 15% 10%, rgba(34,211,238,.16), transparent 55%), linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.55)); background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; position: relative; overflow-x: hidden; } .app-body::before{ content: ""; position: absolute; inset: 0; /* dark overlay so text stays readable, without washing the image out */ background: rgba(0,0,0,var(--bg-overlay-opacity)); pointer-events: none; z-index: 0; } /* Keep page content above overlay */ .app-body > *{ position: relative; z-index: 1; } /* Links */ a{ color: var(--text); text-decoration: none; } a:hover{ color: white; text-decoration: underline; } /* Layout containers */ .container, .container-fluid{ padding-top: 18px; padding-bottom: 24px; } /* Cards / panels */ .card, .panel, .box, .content-box{ background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.35); backdrop-filter: blur(10px); } /* Dashboard KPI cards (Home/Index) - make numbers/icons clearly visible */ .card-kpi{ /* darker surface -> higher contrast with text/icons */ background: linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.28)); border: 1px solid rgba(16,185,129,.28); box-shadow: 0 18px 50px rgba(0,0,0,.55); } .card-kpi .text-muted{ color: rgba(255,255,255,.82) !important; } .card-kpi i.text-muted{ color: rgba(255,255,255,.7) !important; } .card-header, .panel-heading{ background: transparent; border-bottom: 1px solid var(--border); } /* Tables */ table{ color: var(--text); } .table{ --bs-table-color: var(--text); --bs-table-striped-color: var(--text); --bs-table-hover-color: var(--text); --bs-table-bg: transparent; } .table thead th{ color: var(--muted); border-bottom-color: var(--border); } .table td, .table th{ border-top-color: var(--border); } .table-hover tbody tr:hover{ background: rgba(255,255,255,.05); } /* Forms */ label{ color: var(--muted); } .form-control, .form-select{ background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--text); border-radius: 12px; } .form-control:focus, .form-select:focus{ outline: none; box-shadow: 0 0 0 .2rem rgba(79,140,255,.25); border-color: rgba(79,140,255,.55); background: rgba(255,255,255,.08); color: var(--text); } /* Buttons */ .btn{ border-radius: 12px; border: 1px solid var(--border); } .btn-primary{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: 0; } .btn-primary:hover{ filter: brightness(1.05); } .btn-outline-primary{ color: var(--text); border-color: rgba(79,140,255,.55); } .btn-outline-primary:hover{ background: rgba(79,140,255,.15); color: white; } .btn-danger{ background: linear-gradient(135deg, #ef4444, #fb7185); border: 0; } /* Badges */ .badge{ border-radius: 999px; padding: .4rem .65rem; border: 1px solid var(--border); background: rgba(255,255,255,.07); color: var(--text); } /* Navbar (Bootstrap) */ .navbar{ background: rgba(0,0,0,.35) !important; border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); } .navbar .navbar-brand, .navbar .nav-link{ color: var(--text) !important; } .navbar .nav-link:hover{ color: white !important; } /* Sidebar / menu blocks */ .sidebar, .side-nav, .app-sidebar{ background: linear-gradient(180deg, rgba(8,14,28,.96), rgba(10,18,34,.92)); border-left: 1px solid rgba(148,163,184,.14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .app-sidebar{ width: 196px; flex: 0 0 196px; margin: 12px 12px 12px 0; border-radius: 24px; box-shadow: 0 18px 42px rgba(0,0,0,.38); overflow: hidden; padding-top: 1rem !important; } .app-sidebar .text-muted{ color: rgba(191,219,254,.56) !important; letter-spacing: .02em; font-size: .76rem !important; font-weight: 800; margin-top: .6rem; margin-bottom: .2rem; } .app-sidebar .nav-link{ color: rgba(226,232,240,.82) !important; border-radius: 16px; padding: .74rem .82rem; margin: .18rem 0; font-size: .96rem; display:flex; align-items:center; gap:.7rem; min-height: 46px; transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease; border: 1px solid transparent; } .app-sidebar .nav-link i{ opacity: .96; font-size: 1rem; width: 1.1rem; text-align:center; } .app-sidebar .nav-link:hover{ color: #fff !important; background: rgba(255,255,255,.055); border-color: rgba(148,163,184,.14); transform: translateX(-1px); } .app-sidebar .nav-link.active{ color: #fff !important; background: linear-gradient(135deg, rgba(37,99,235,.28), rgba(59,130,246,.18)); border: 1px solid rgba(96,165,250,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 24px rgba(30,64,175,.16); } .app-sidebar .sidebar-header{ padding: 1rem 1rem .5rem; } /* Alerts */ .alert{ border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.07); color: var(--text); } /* Fix common "washed" look for background images: allow user to increase visibility */ .bg-more-visible{ --bg-overlay-opacity: .04; } .bg-more-dark{ --bg-overlay-opacity: .18; } /* Login page helper: center nicely if it uses plain bootstrap container */ .auth-wrap{ min-height: calc(100vh - 80px); display: flex; align-items: center; justify-content: center; } /* =============================== Extra readability overrides =============================== */ /* Bootstrap defaults are designed for light backgrounds */ .text-muted{ color: var(--muted) !important; } /* Placeholders were too dim */ .form-control::placeholder, .form-control::-webkit-input-placeholder, .form-control::-moz-placeholder{ color: color-mix(in srgb, var(--text) 55%, transparent) !important; } /* Make KPI numbers and important values always readable */ .card-kpi .kpi-number, .card-kpi .display-6, .card-kpi .h2, .card-kpi .h3{ color: #fff !important; font-weight: 800; text-shadow: 0 2px 10px rgba(0,0,0,.55); } /* Slightly stronger card borders for better visibility */ .card, .card-kpi{ border-color: var(--border) !important; } /* Tables: ensure numbers/text are not gray */ .table td, .table th{ color: color-mix(in srgb, var(--text) 92%, transparent); } .table td.text-muted, .table th.text-muted{ color: var(--muted) !important; } /* Inputs: higher contrast everywhere (Members search, CheckIn, Reports filters) */ .form-control, .form-select{ background: color-mix(in srgb, var(--surface-2) 55%, transparent) !important; border: 1px solid var(--border) !important; color: var(--text) !important; box-shadow: none !important; } .form-control:focus, .form-select:focus{ border-color: rgba(16,185,129,.65) !important; box-shadow: 0 0 0 .25rem rgba(16,185,129,.18) !important; } /* Headings inside pages */ h1,h2,h3,h4,h5,h6{ color: var(--text); } /* Sidebar section titles (like "الإعدادات" / "المستخدمين") */ .app-sidebar .text-muted{ color: rgba(255,255,255,.70) !important; } /* =============================== Login page (professional) =============================== */ .login-page{ min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; } .login-card{ width: 100%; max-width: 420px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 28px; box-shadow: 0 18px 60px rgba(0,0,0,.45); backdrop-filter: blur(10px); } .login-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px} .login-logo{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(56,189,248,.55), rgba(129,140,248,.55));border:1px solid rgba(255,255,255,.18)} .login-logo-mark{font-weight:900;font-size:20px;color:#fff} .login-title{font-weight:800;letter-spacing:.2px} .login-subtitle{color:rgba(255,255,255,.72);font-size:.95rem} .login-field{position:relative} .login-field i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.55)} .login-field .form-control{padding-left:44px} .login-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px} .login-actions .btn{flex:1} /* =========================== PRO THEME OVERRIDES (v6) - Better contrast + readability - Gym background + overlay - Smooth animations =========================== */ :root{ --bg-overlay: rgba(6, 10, 18, .62); --surface: rgba(16, 24, 40, .72); --surface-2: rgba(16, 24, 40, .82); --stroke: rgba(255,255,255,.14); --text: rgba(255,255,255,.92); --text-dim: rgba(255,255,255,.72); --accent: #2f7cff; --accent-2: #3dd6ff; --danger: #ff4d6d; } /* Background image + overlay (works even if BrandingService sets a different image) */ body.app-body{ position: relative; color: var(--text); background-color: #0b1020; background-image: radial-gradient(1200px 700px at 20% 15%, rgba(47,124,255,.28), transparent 60%), radial-gradient(900px 600px at 80% 10%, rgba(61,214,255,.18), transparent 55%), url('/images/bg-gym.png'); background-size: cover; background-position: center; background-attachment: fixed; } body.app-body::before{ content:""; position: fixed; inset: 0; background: var(--bg-overlay); backdrop-filter: blur(2px); z-index: 0; pointer-events: none; } /* Make app content sit above overlay */ body.app-body > .d-flex, body.app-body > .container, body.app-body > main{ position: relative; z-index: 1; } /* Smooth entrance */ @keyframes fadeUp{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform: translateY(0); } } @keyframes softGlow{ 0%,100%{ box-shadow: 0 0 0 rgba(47,124,255,0); } 50%{ box-shadow: 0 0 26px rgba(47,124,255,.26); } } /* Sidebar improvements */ .app-sidebar{ width: 190px !important; border-left: 1px solid var(--stroke); background: rgba(10, 16, 30, .58); backdrop-filter: blur(10px); animation: fadeUp .45s ease both; } .app-sidebar .fs-5{ color: var(--text) !important; } .app-nav .nav-link{ color: var(--text-dim) !important; border: 1px solid transparent; transition: transform .18s ease, background .18s ease, border-color .18s ease; } .app-nav .nav-link:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: var(--stroke); } .app-nav .nav-link.active{ color: var(--text) !important; background: linear-gradient(135deg, rgba(47,124,255,.35), rgba(61,214,255,.18)); border-color: rgba(47,124,255,.35); animation: softGlow 2.4s ease-in-out infinite; } /* Cards / KPI */ .kpi-card, .glass-card{ background: var(--surface-2) !important; border: 1px solid var(--stroke) !important; backdrop-filter: blur(10px) !important; } .kpi-card{ animation: fadeUp .45s ease both; } .kpi-title{ color: var(--text-dim) !important; letter-spacing: .2px; } .kpi-value{ color: #fff !important; font-weight: 800 !important; text-shadow: 0 1px 0 rgba(0,0,0,.35); } /* Buttons */ .btn-primary, .btn-accent{ background: linear-gradient(135deg, rgba(47,124,255,1), rgba(61,214,255,.85)) !important; border: none !important; box-shadow: 0 10px 24px rgba(47,124,255,.18); transition: transform .15s ease, box-shadow .15s ease; } .btn-primary:hover, .btn-accent:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px rgba(47,124,255,.24); } /* Inputs / placeholders visibility */ .form-control, input, select, textarea{ background: rgba(10, 16, 30, .55) !important; border: 1px solid var(--stroke) !important; color: #fff !important; } .form-control::placeholder, input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.65) !important; } .form-control:focus{ box-shadow: 0 0 0 .2rem rgba(47,124,255,.18) !important; border-color: rgba(47,124,255,.55) !important; } /* Tables */ .table, table{ color: var(--text) !important; } .table thead th{ color: rgba(255,255,255,.85) !important; } .table tbody td{ color: rgba(255,255,255,.9) !important; } .table-hover tbody tr:hover{ background: rgba(255,255,255,.05) !important; } /* Report headline + totals */ .report-title, .page-title{ color: #fff !important; text-shadow: 0 1px 0 rgba(0,0,0,.35); } .text-danger, .danger{ color: var(--danger) !important; font-weight: 800; } /* Auth (Login) */ .auth-shell{ min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 40px 16px; animation: fadeUp .45s ease both; } .auth-card{ width: min(440px, 96vw); background: rgba(10, 16, 30, .72); border: 1px solid var(--stroke); border-radius: 18px; padding: 22px 22px 18px; backdrop-filter: blur(12px); } .auth-card h1,.auth-card h2,.auth-card h3{ color:#fff; } .auth-brand{ display:flex; align-items:center; gap: 10px; margin-bottom: 16px; } .auth-brand .logo{ height: 36px; width: 36px; border-radius: 12px; background: linear-gradient(135deg, rgba(47,124,255,1), rgba(61,214,255,.85)); box-shadow: 0 12px 26px rgba(47,124,255,.18); } /* WhatsApp button */ .btn-whatsapp{ background: rgba(37, 211, 102, .92) !important; border: 1px solid rgba(37, 211, 102, .85) !important; color: #07130b !important; font-weight: 800; border-radius: 12px; box-shadow: 0 10px 22px rgba(37,211,102,.18); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .btn-whatsapp:hover{ transform: translateY(-1px) scale(1.02); box-shadow: 0 14px 30px rgba(37,211,102,.26); filter: saturate(1.1); } .btn-whatsapp:active{ transform: translateY(0) scale(.99); } .btn-whatsapp.pulse{ animation: waPulse 1.4s ease-in-out infinite; } @keyframes waPulse{ 0%{ box-shadow: 0 10px 22px rgba(37,211,102,.18); } 50%{ box-shadow: 0 0 0 10px rgba(37,211,102,.12), 0 14px 30px rgba(37,211,102,.22); } 100%{ box-shadow: 0 10px 22px rgba(37,211,102,.18); } } /* Modal preview text */ .wa-preview{ white-space: pre-wrap; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 12px; color: #fff; } /* ========================================================= Contrast fix: keep text readable on ANY background image (License page + global cards) ========================================================= */ :root{ --card-bg-strong: rgba(0,0,0,0.72); --card-border-strong: rgba(255,255,255,0.18); --text-on-strong: #ffffff; --muted-on-strong: rgba(255,255,255,0.78); } /* Common containers used across the app */ .card, .modal-content, .offcanvas, .dropdown-menu, .table-responsive, .glass, .glass-card, .content-card, .license-card{ background: var(--card-bg-strong) !important; border-color: var(--card-border-strong) !important; color: var(--text-on-strong) !important; } /* Ensure nested text is readable */ .card *, .modal-content *, .offcanvas *, .dropdown-menu *, .table-responsive *, .glass *, .glass-card *, .content-card *, .license-card *{ color: var(--text-on-strong) !important; opacity: 1 !important; text-shadow: 0 1px 2px rgba(0,0,0,0.70); } /* Muted text + placeholders */ .text-muted, .form-text, .small, ::placeholder{ color: var(--muted-on-strong) !important; opacity: 1 !important; } /* Inputs on dark card */ .form-control, .form-select, input[type="text"], input[type="date"], textarea{ background: rgba(255,255,255,0.08) !important; color: var(--text-on-strong) !important; border-color: rgba(255,255,255,0.22) !important; } .form-control:focus, .form-select:focus, textarea:focus{ box-shadow: 0 0 0 .2rem rgba(255,255,255,0.12) !important; } /* Tables */ .table{ color: var(--text-on-strong) !important; } .table thead th{ color: var(--text-on-strong) !important; } /* ===================== Dropdowns / Selects readability fix Ensures native