/* Admin: Personel Listesi table contrast */ .table-personel { --bs-table-color: #f8fafc; --bs-table-bg: rgba(17, 24, 39, 0.72); --bs-table-border-color: rgba(148, 163, 184, 0.22); --bs-table-striped-bg: rgba(255, 255, 255, 0.04); --bs-table-striped-color: #f8fafc; --bs-table-hover-bg: rgba(255, 255, 255, 0.06); --bs-table-hover-color: #ffffff; } .table-personel thead th { color: #ffffff; border-bottom-color: rgba(148, 163, 184, 0.28); } .table-personel td { border-top-color: rgba(148, 163, 184, 0.18); } :root{ --bg-900: #0b1220; --bg-800: #0f172a; --bg-700: #111827; --surface: rgba(255,255,255,0.04); --surface-2: rgba(255,255,255,0.06); --muted: #9aa4b2; --accent: #ffc107; --accent-2: #38bdf8; --card-bg: rgba(17, 24, 39, 0.52); --border: rgba(255,255,255,0.08); --shadow: 0 18px 55px rgba(0,0,0,0.55); --shadow-soft: 0 10px 30px rgba(0,0,0,0.28); --radius: 14px; /* Design tokens (v2) */ --text: #e6eef6; --text-strong: #f8fafc; --text-muted: rgba(233, 236, 239, 0.72); --ring: rgba(255, 193, 7, 0.35); --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 18px; --space-5: 24px; } /* Corporate theme overrides (applied via ) */ html.theme-corporate{ color-scheme: light; } html.theme-corporate body{ background: radial-gradient(1100px 750px at 15% 10%, rgba(255,193,7,0.18), transparent 58%), radial-gradient(900px 650px at 85% 22%, rgba(56,189,248,0.16), transparent 58%), radial-gradient(900px 700px at 40% 120%, rgba(34,197,94,0.12), transparent 60%), linear-gradient(120deg, #f8fafc 0%, #eef2ff 55%, #f1f5f9 100%); color: #0b1220; } html.theme-corporate .navbar{ background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.82)); border-bottom-color: rgba(15, 23, 42, 0.10); } html.theme-corporate .navbar .navbar-brand, html.theme-corporate .navbar .nav-link, html.theme-corporate .navbar .text-muted{color: rgba(15, 23, 42, 0.84) !important;} html.theme-corporate .dropdown-menu{background: rgba(255,255,255,0.98); border-color: rgba(15,23,42,0.10)} html.theme-corporate .dropdown-item{color: rgba(15, 23, 42, 0.90)} html.theme-corporate .dropdown-item:hover{background: rgba(15, 23, 42, 0.06)} html.theme-corporate .card-glass, html.theme-corporate .content-area .card{ background: linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.62)); border-color: rgba(15, 23, 42, 0.10); } html.theme-corporate .page-subtitle, html.theme-corporate .muted, html.theme-corporate .text-muted, html.theme-corporate .text-secondary{color: rgba(15, 23, 42, 0.62) !important;} html.theme-corporate a{color: rgba(15, 23, 42, 0.88)} html.theme-corporate a:hover{color: #0ea5e9} html.theme-corporate .form-control, html.theme-corporate .form-select, html.theme-corporate textarea{ background: rgba(255,255,255,0.75); border-color: rgba(15, 23, 42, 0.12); color: rgba(15, 23, 42, 0.92); } html.theme-corporate .table.table-dark{ --bs-table-bg: rgba(255, 255, 255, 0.78); --bs-table-striped-bg: rgba(15, 23, 42, 0.03); --bs-table-hover-bg: rgba(15, 23, 42, 0.05); --bs-table-color: rgba(15, 23, 42, 0.92); --bs-table-border-color: rgba(15, 23, 42, 0.10); } html.theme-corporate .table.table-dark thead th{color: rgba(15, 23, 42, 0.92)} html.theme-corporate .badge.bg-secondary{background-color: rgba(15, 23, 42, 0.10) !important; color: rgba(15, 23, 42, 0.90) !important;} @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } body { animation: none !important; } } *{box-sizing:border-box} body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background: radial-gradient(1100px 750px at 15% 10%, rgba(255,193,7,0.12), transparent 58%), radial-gradient(900px 650px at 85% 22%, rgba(56,189,248,0.12), transparent 58%), radial-gradient(900px 700px at 40% 120%, rgba(34,197,94,0.08), transparent 60%), linear-gradient(120deg,var(--bg-900) 0%, var(--bg-800) 55%, var(--bg-700) 100%); color:var(--text);} @keyframes contentIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } html.js .content-area{animation: contentIn 420ms cubic-bezier(.2,.9,.3,1) both;} @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } body{ background-size: 200% 200%; animation: gradientShift 18s ease infinite; transition: background 0.6s ease; } /* ===== App Shell (Topbar + Sidebar) ===== */ .app-topbar{ position: sticky; top: 0; z-index: 110; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgba(10, 14, 22, 0.82), rgba(10, 14, 22, 0.62)); backdrop-filter: blur(12px); } html.theme-corporate .app-topbar{ background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78)); border-bottom-color: rgba(15, 23, 42, 0.10); } .app-frame{width: 100%;} .app-body{ display: grid; grid-template-columns: 280px 1fr; gap: 16px; padding: 18px; max-width: 1480px; margin: 0 auto; } .app-sidebar{ position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 96px); overflow: auto; padding: 4px; } .app-sidebar .active-players-card{position: static; top: auto;} .app-main{min-width: 0;} .sidebar-overlay{ display: none; position: fixed; inset: 0; z-index: 105; background: rgba(0,0,0,0.55); } .sidebar-group{ border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); border-radius: var(--radius-md); padding: 10px; margin-bottom: 12px; } html.theme-corporate .sidebar-group{ border-color: rgba(15,23,42,0.10); background: rgba(255,255,255,0.65); } .sidebar-title{ font-size: 0.8rem; letter-spacing: 0.12px; color: rgba(233, 236, 239, 0.72); margin: 2px 2px 8px 2px; } html.theme-corporate .sidebar-title{color: rgba(15,23,42,0.55)} .sidebar-link{ display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; text-decoration: none; color: rgba(233, 236, 239, 0.92); border: 1px solid transparent; transition: transform .14s ease, background-color .14s ease, border-color .14s ease; } .sidebar-link:hover{ background: rgba(255,255,255,0.05); transform: translateY(-1px); } .sidebar-link.active{ background: rgba(255, 193, 7, 0.14); border-color: rgba(255, 193, 7, 0.24); box-shadow: 0 10px 26px rgba(255,193,7,0.08); } html.theme-corporate .sidebar-link{color: rgba(15,23,42,0.86)} html.theme-corporate .sidebar-link:hover{background: rgba(15,23,42,0.06)} html.theme-corporate .sidebar-link.active{background: rgba(255,193,7,0.18); border-color: rgba(255,193,7,0.30)} .sidebar-footer{margin-top: 10px;} /* Mobile sidebar slide-in */ @media (max-width: 992px){ .app-body{grid-template-columns: 1fr; padding: 12px;} .app-sidebar{ position: fixed; top: 0; left: 0; width: min(86vw, 320px); height: 100vh; z-index: 106; padding: 14px 10px; background: linear-gradient(180deg, rgba(11, 18, 32, 0.96), rgba(11, 18, 32, 0.88)); border-right: 1px solid rgba(255,255,255,0.08); transform: translateX(-110%); transition: transform .20s ease; max-height: none; } html.theme-corporate .app-sidebar{ background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92)); border-right-color: rgba(15,23,42,0.10); } html.sidebar-open .app-sidebar{transform: translateX(0);} html.sidebar-open .sidebar-overlay{display: block;} } /* Landing/menu tiles */ .menu-grid{display:grid; grid-template-columns: repeat(12, 1fr); gap: 12px; margin-top: 14px;} .menu-tile{grid-column: span 4;} @media (max-width: 992px){.menu-tile{grid-column: span 6;}} @media (max-width: 560px){.menu-tile{grid-column: span 12;}} .menu-tile a{ display:block; height: 100%; padding: 14px; border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.10); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); box-shadow: var(--shadow-soft); text-decoration:none; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .menu-tile a:hover{transform: translateY(-3px); border-color: rgba(255,255,255,0.14); box-shadow: 0 18px 50px rgba(0,0,0,0.42)} .menu-tile .icon{font-size: 1.6rem;} .menu-tile .name{margin-top: 10px; font-weight: 900; letter-spacing: 0.15px;} .menu-tile .desc{margin-top: 4px; color: var(--text-muted); font-size: 0.95rem;} html.theme-corporate .menu-tile a{border-color: rgba(15,23,42,0.10); background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));} html.theme-corporate .menu-tile .desc{color: rgba(15,23,42,0.62)} /* Small UX helpers */ .btn.btn-loading{ pointer-events: none; white-space: nowrap; } .btn.btn-loading .spinner-border{vertical-align: -0.2em;} /* Subtle noise overlay (adds depth without images) */ body::before{ content:""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0.12; background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 35%), radial-gradient(circle at 80% 30%, rgba(255,255,255,0.06), transparent 35%), radial-gradient(circle at 40% 80%, rgba(255,255,255,0.05), transparent 40%); mix-blend-mode: overlay; } /* Navbar */ .navbar{border-bottom:1px solid var(--border); background: linear-gradient(180deg, rgba(15,17,19,0.92), rgba(15,17,19,0.82)); backdrop-filter: blur(10px);} .navbar-brand{letter-spacing:0.2px} .brand-logo{width:36px;height:36px;border-radius:10px;object-fit:cover; box-shadow: 0 10px 25px rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.08)} .brand-title{font-size: 0.98rem} .dropdown-menu{background:rgba(15,17,19,0.98); border:1px solid var(--border); box-shadow: var(--shadow)} .dropdown-item{color:#e6eef6} .dropdown-item:hover{background:rgba(255,255,255,0.06)} .dropdown-divider{border-color:rgba(255,255,255,0.08)} /* Profile card in sidebar */ .profile-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.04); border-radius:12px} .profile-card h5{font-weight:600} .profile-card .small{color:var(--muted)} .content-area{min-height:64vh; padding:18px} .content-area .card{background:var(--card-bg); border:1px solid var(--border); border-radius:14px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; will-change: transform;} .content-area .card:hover{transform: translateY(-2px); box-shadow: 0 16px 44px rgba(0,0,0,0.42); border-color: rgba(255,255,255,0.12)} /* Panels */ .app-shell{max-width: 1400px} aside .card{border:1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.35)} .card-glass{ background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); backdrop-filter: blur(10px); } .page-header{ display:flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .page-header h4, .page-header h3, .page-header h2{margin:0} .page-subtitle{color: var(--text-muted); font-size: 0.95rem} /* Sticky action bar for admin pages */ .admin-content .page-header{ position: sticky; top: 72px; z-index: 25; padding: 10px 12px; margin-left: -12px; margin-right: -12px; border-bottom: 1px solid var(--border); border-radius: 12px; background: linear-gradient(180deg, rgba(15,17,19,0.90), rgba(15,17,19,0.68)); backdrop-filter: blur(10px); } html.theme-corporate .admin-content .page-header{ background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.76)); border-bottom-color: rgba(15, 23, 42, 0.10); } /* Make dropdown items easier to scan */ .dropdown-menu{border-radius: 12px} .stat-card{padding:14px} .stat-card .label{color: rgba(233, 236, 239, 0.72); font-size: 0.85rem} .stat-card .value{font-size: 1.6rem; font-weight: 800; letter-spacing: 0.2px} .stat-card .hint{color: rgba(233, 236, 239, 0.72); font-size: 0.85rem} .active-players-card { border-radius:var(--radius-sm); background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); } .active-players-card img { box-shadow: 0 4px 12px rgba(0,0,0,0.45); } .active-players-card .muted { color: var(--muted); } .active-players-card{position: sticky; top: 92px} .active-players-card .card-body{max-height: calc(100vh - 140px); overflow:auto} /* Animated background logo for report pages */ .animated-bg{position:fixed; inset:0; z-index:-1; pointer-events:none; background-image:url('/images/jandarma_logo.png'); background-position:center center; background-repeat:no-repeat; background-size:60vw; opacity:0.06; filter:saturate(0.6) blur(1px); animation:floatLogo 10s ease-in-out infinite} @keyframes floatLogo{0%{transform:translateY(0) rotate(-1deg) scale(1)}50%{transform:translateY(-8px) rotate(1deg) scale(1.02)}100%{transform:translateY(0) rotate(-1deg) scale(1)}} @media(max-width:768px){.animated-bg{background-size:120vw; opacity:0.04}} /* Buttons and form tweaks */ .btn{border-radius:8px} .btn{transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;} .btn:hover{transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.35)} .form-control, .form-select, textarea{background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04); color:inherit} .form-control:focus, .form-select:focus, textarea:focus{box-shadow:0 8px 28px rgba(0,0,0,0.45); border-color: var(--ring)} /* Fix: dark theme