/* Dashboard area */ :root { --card-radius: 1rem; --glass-bg: rgba(255,255,255,.92); --glass-brd: rgba(13,110,253,.15); --shadow: 0 10px 28px rgba(0,0,0,.07); --shadow-hover: 0 16px 36px rgba(0,0,0,.10); } /* Page backdrop with image + gradients */ html, body { height: 100%; } body { position: relative; min-height: 100vh; background-image: radial-gradient(1200px 420px at -10% -30%, rgba(227,242,255,0.70) 0, transparent 60%), radial-gradient(900px 320px at 120% 10%, rgba(255,233,245,0.65) 0, transparent 60%), linear-gradient(135deg, rgba(246,251,255,0.55) 0%, rgba(238,245,255,0.55) 50%, rgba(248,251,255,0.55) 100%), url("/dva/a339.png"); background-size: auto, auto, auto, cover; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-attachment: scroll, scroll, scroll, fixed; background-position: center, center, center, center; } /* DVA tinted overlay */ body::before { content: ""; position: fixed; inset: 0; background: linear-gradient( 135deg, rgba(13,110,253,0.45), /* DVA blue */ rgba(111,66,193,0.45) /* DVA purple */ ); pointer-events: none; z-index: 0; } /* Ensure page content sits above overlay */ body > * { position: relative; z-index: 1; } /* HERO */ .dash-hero { background: radial-gradient(1200px 400px at -10% -30%, rgba(227,242,255,0.85) 0, transparent 60%), radial-gradient(900px 300px at 120% 10%, rgba(255,233,245,0.85) 0, transparent 60%), linear-gradient(135deg, rgba(246,251,255,0.9) 0%, rgba(238,245,255,0.9) 50%, rgba(248,251,255,0.9) 100%); border: 1px solid rgba(0,0,0,.06); border-radius: var(--card-radius); box-shadow: 0 8px 26px rgba(0,0,0,.06); } .chip { display: inline-flex; align-items: center; gap: .5rem; background: var(--glass-bg); backdrop-filter: blur(6px); border: 1px solid var(--glass-brd); border-radius: 999px; padding: .45rem .85rem; } /* Tiles */ .tile { border-radius: var(--card-radius); border: 1px solid rgba(0,0,0,.05); box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; position: relative; overflow: hidden; } .tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); filter: saturate(108%); } .tile-bg-1 { background: linear-gradient(135deg,#e7f0ff,#e9fff7); } .tile-bg-2 { background: linear-gradient(135deg,#fff3e7,#e7f2ff); } .tile-bg-3 { background: linear-gradient(135deg,#f3e8ff,#e7f7ff); } .tile-bg-4 { background: linear-gradient(135deg,#fff0f5,#eaf7ff); } .stat-number { font-weight: 800; letter-spacing: .2px; } /* Glass cards */ .card-glass { background: var(--glass-bg); backdrop-filter: blur(6px); border: 1px solid var(--glass-brd); border-radius: var(--card-radius); box-shadow: var(--shadow); } .header-bar { background: linear-gradient(90deg,#e0e7ff,#ffe4e6); border-bottom: 1px solid rgba(0,0,0,.06); color: #3b4a66; padding: .65rem .9rem; font-weight: 700; border-top-left-radius: var(--card-radius); border-top-right-radius: var(--card-radius); } /* Leave alert */ .leave-alert { border: 1px dashed #ffda6a; background: #fff9e6; color: #7a5a00; border-radius: var(--card-radius); padding: .85rem 1rem; } /* ===================== */ /* NAV TABS (DVA style) */ /* ===================== */ /* If you DO have , you can scope by uncommenting: body.dashboard .nav-tabs-navigation { ... } etc. */ .nav-tabs-navigation { background: linear-gradient(90deg,#e0f2fe,#e0e7ff,#ffe4e6) !important; border: 1px solid rgba(0,0,0,.06); border-radius: var(--card-radius, 1rem); box-shadow: 0 8px 24px rgba(0,0,0,.06); padding: .35rem .5rem; overflow: hidden; } .nav-tabs-navigation .nav-tabs-wrapper { backdrop-filter: blur(8px) saturate(130%); } /* container ul */ .nav-tabs-navigation .navbar-nav.align-middle { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; padding: .15rem; margin: 0; } /* items behave like colorful chips */ .nav-tabs-navigation .navbar-nav .nav-link { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: 999px; font-weight: 700; line-height: 1; color: #2f3e5a !important; text-decoration: none !important; border: 1px solid rgba(0,0,0,.05); background: rgba(255,255,255,.80); box-shadow: 0 6px 16px rgba(0,0,0,.06); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; } .nav-tabs-navigation .navbar-nav .nav-link i { font-size: 1rem; opacity: .9; } .nav-tabs-navigation .navbar-nav .nav-link p { margin: 0; font-size: .95rem; } /* hover/focus */ .nav-tabs-navigation .navbar-nav .nav-link:hover, .nav-tabs-navigation .navbar-nav .nav-link:focus { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.10); color: #0d6efd !important; background: linear-gradient(135deg, #ffffff 0%, #eef6ff 100%); } /* active/current state (Bootstrap adds .active or aria-current) */ .nav-tabs-navigation .navbar-nav .nav-link.active, .nav-tabs-navigation .navbar-nav .nav-link[aria-current="page"], .nav-tabs-navigation .navbar-nav .nav-item.show > .nav-link { color: #fff !important; border-color: transparent; background: linear-gradient(135deg,#0ea5e9 0%, #6366f1 100%) !important; box-shadow: 0 12px 28px rgba(99,102,241,.28); } /* dropdown menu styling */ .nav-tabs-navigation .dropdown-menu { background: rgba(255,255,255,.95); backdrop-filter: blur(8px) saturate(130%); border: 1px solid rgba(0,0,0,.06); border-radius: .75rem; box-shadow: 0 18px 40px rgba(0,0,0,.14); padding: .4rem; } .nav-tabs-navigation .dropdown-item { border-radius: .5rem; font-weight: 600; color: #2f3e5a; } .nav-tabs-navigation .dropdown-item:hover, .nav-tabs-navigation .dropdown-item:focus { background: linear-gradient(135deg,#eaf2ff,#fff0f7); color: #0d6efd; } /* avatar button */ .nav-tabs-navigation .nav-item.dropdown > .nav-link img { height: 38px; width: 38px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,.18); object-fit: cover; } /* language flag */ .nav-tabs-navigation .nav-link .flag-icon { border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.18); } /* mobile: icons only for tight space (optional) */ @media (max-width: 576px) { .nav-tabs-navigation .navbar-nav.align-middle { gap: .25rem; } .nav-tabs-navigation .nav-link { padding: .5rem .7rem; } .nav-tabs-navigation .nav-link p { display: none; } } /* ===== FIX: dropdown must be above overlay & cards ===== */ /* 1) Put the tinted overlay behind all page content */ body::before{ z-index: -1 !important; /* was 0; now guaranteed below content */ } /* 2) Ensure all normal content paints above the overlay */ body > *{ position: relative; z-index: 1; /* baseline above overlay */ } /* 3) Elevate the nav block and its dropdown menu */ .nav-tabs-navigation{ position: relative !important; z-index: 2147483640 !important; /* very high to beat any cards */ overflow: visible !important; } .nav-tabs-navigation .dropdown-menu{ position: absolute !important; z-index: 2147483647 !important; /* top-most */ } /* 4) Keep cards/hero below the nav */ .dash-hero, .card, .card-glass, .tile, .header-bar{ position: relative !important; z-index: 1 !important; overflow: visible !important; } /* 5) Avoid accidental stacking contexts that trap the menu */ .nav-tabs-navigation, .nav-tabs-navigation *{ transform: none !important; filter: none !important; } /* ===== FINAL STACKING FIX (BS4.3) ===== */ /* Put the tinted overlay behind everything */ body::before{ z-index: -1 !important; } /* Reset any earlier global z-index so we control order explicitly */ html body > *{ z-index: auto !important; } /* NAV: must be a positioned, high z-index context */ .nav-tabs-navigation{ position: relative !important; z-index: 10000 !important; /* above all dashboard content */ overflow: visible !important; } /* Dropdown menu sits above nav too */ .nav-tabs-navigation .dropdown-menu{ position: absolute !important; /* BS4 + Popper will position it */ z-index: 10001 !important; /* highest thing on the page */ } /* DASHBOARD CONTENT: keep below nav/menu */ .container-fluid, .dash-hero, .card, .card-glass, .tile, .header-bar{ position: relative !important; z-index: 1 !important; /* below nav/menu */ overflow: visible !important; /* don't clip the menu edge */ } /* ===== DVA Table (glassy, rounded, colorful) ===== */ /* container card */ .table-glass { background: var(--glass-bg); backdrop-filter: blur(6px); border: 1px solid var(--glass-brd); border-radius: var(--card-radius); box-shadow: var(--shadow); overflow: hidden; /* clip table radius */ } /* responsive wrapper keeps radius */ .table-glass .table-responsive { margin: 0; /* flush to edges */ border: 0; } /* base table look */ .table-dva { margin: 0; background: transparent; border-collapse: separate; border-spacing: 0; } /* header */ .table-dva thead tr { background: linear-gradient(90deg,#e0f2fe,#e0e7ff,#ffe4e6); } .table-dva thead th, .table-dva thead td { font-weight: 700; color: #2f3e5a; border: none; padding: .75rem .85rem; white-space: nowrap; } /* body cells */ .table-dva tbody td { border-top: 1px solid rgba(0,0,0,.06); padding: .7rem .85rem; vertical-align: middle; } /* zebra/hover */ .table-dva.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.65); } .table-dva tbody tr:hover { background: linear-gradient(90deg, rgba(224,242,254,.55), rgba(224,231,255,.55)); } /* links inside table */ .table-dva a { color: #0d6efd; font-weight: 600; text-decoration: none; } .table-dva a:hover { text-decoration: underline; } /* small text utility already present in markup; just ensure legibility */ .table-dva .text-small { font-size: .875rem; } /* rounded top corners for header row */ .table-dva thead tr:first-child th:first-child, .table-dva thead tr:first-child td:first-child { border-top-left-radius: calc(var(--card-radius) - 2px); } .table-dva thead tr:first-child th:last-child, .table-dva thead tr:first-child td:last-child { border-top-right-radius: calc(var(--card-radius) - 2px); } /* compact on mobile */ @media (max-width: 576px) { .table-dva thead { display: none; } /* hide header on xs */ .table-dva tbody tr { display: grid; gap: .25rem; padding: .5rem .35rem; } .table-dva tbody td { display: flex; justify-content: space-between; align-items: center; border: none; padding: .35rem .5rem; background: rgba(255,255,255,.7); } .table-dva tbody td::before { content: attr(data-label); font-weight: 700; color: #3b4a66; margin-right: .75rem; } } /* Avoid accidental stacking contexts in the nav that can trap the menu */ .nav-tabs-navigation, .nav-tabs-navigation *{ transform: none !important; filter: none !important; } /* Flights list card tweaks (uses existing card-glass) */ .flight-card .title{ display:inline-block; min-width: 3.6rem; font-weight: 700; color:#3b4a66; text-transform: uppercase; letter-spacing:.02em; margin-right:.35rem; } .flight-card .line-item{ margin-bottom:.25rem; } @media (max-width: 576px){ .flight-card .title{ min-width: 3.2rem; } } /* Optional: tighter spacing for glass list cards */ .flight-card .card-body{ padding: 1rem 1rem; } .search-form .form-group { display: flex; flex-direction: column; /* stack label above input */ } .search-form .form-label { margin-bottom: .35rem; font-weight: 600; color: #2f3e5a; } .search-form .form-control, .search-form .select2-container--default .select2-selection--single { width: 100%; border-radius: .75rem; } /* === DVA Glass Button === */ .btn-dva-glass { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; border-radius: 999px; padding: .65rem 1.4rem; color: #0d6efd; background: var(--glass-bg); backdrop-filter: blur(6px); border: 1px solid var(--glass-brd); box-shadow: 0 6px 18px rgba(0,0,0,.08); transition: all .2s ease-in-out; } .btn-dva-glass:hover, .btn-dva-glass:focus { color: #fff; background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%); border-color: transparent; box-shadow: 0 10px 26px rgba(99,102,241,.3); transform: translateY(-1px); } .btn-dva-glass:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(0,0,0,.12); } /* Section header (matches your gradient/nav vibe) */ .form-title{ padding:.65rem .9rem; font-weight: 700; color:#2f3e5a; background: linear-gradient(90deg,#e0f2fe,#e0e7ff,#ffe4e6); border-bottom:1px solid rgba(0,0,0,.06); border-top-left-radius: var(--card-radius); border-top-right-radius: var(--card-radius); } /* Body in glass card */ .form-container .form-container-body{ background: var(--glass-bg); backdrop-filter: blur(6px); border: 1px solid var(--glass-brd); border-top: none; border-bottom-left-radius: var(--card-radius); border-bottom-right-radius: var(--card-radius); } /* Inputs / selects / textareas */ .form-container .form-control{ border-radius:.75rem; border:1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.92); box-shadow: inset 0 2px 4px rgba(0,0,0,.04); transition: border-color .15s ease, box-shadow .15s ease; } .form-container .form-control:focus{ border-color:#0ea5e9; box-shadow:0 0 0 .2rem rgba(14,165,233,.22); } .form-container .form-label{ font-weight:600; color:#2f3e5a; } /* Read-only text */ .form-readonly{ margin: .4rem 0 0; font-weight: 600; color:#374151; } /* Buttons */ .btn-dva-primary{ border-radius:999px; padding:.5rem 1.1rem; font-weight:700; color:#fff; background: linear-gradient(135deg,#0ea5e9,#6366f1); border: none; box-shadow: 0 6px 18px rgba(99,102,241,.28); } .btn-dva-primary:hover{ filter:brightness(1.07); } .btn-dva-secondary{ border-radius:999px; padding:.5rem 1.1rem; font-weight:700; color:#0d6efd; background: var(--glass-bg); border:1px solid var(--glass-brd); box-shadow:0 6px 16px rgba(0,0,0,.08); } .btn-dva-secondary:hover{ color:#fff; background: linear-gradient(135deg,#ffffff,#e8f3ff); } .btn-dva-danger{ border-radius:999px; padding:.5rem 1.1rem; font-weight:700; color:#fff; background: linear-gradient(135deg,#ef4444,#f59e0b); border:none; box-shadow:0 6px 18px rgba(239,68,68,.25); } .btn-dva-danger:hover{ filter:brightness(1.06); } /* Table inside custom fields reuses your table-dva */ .form-container .table-dva thead th{ background:linear-gradient(90deg,#f8faff,#fdf6ff); border-bottom:1px solid rgba(0,0,0,.06); } /* Small gaps utility */ .gap-2{ gap:.5rem; } /* ===== PROFILE THEME (scoped) ===== */ .profile-page{ position: relative; z-index: 1; } /* Hero */ .profile-hero{ position: relative; border-radius: 1rem; overflow: hidden; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 10px 28px rgba(0,0,0,.08); background: radial-gradient(1200px 420px at -10% -30%, #e3f2ff 0, transparent 60%), radial-gradient(900px 320px at 120% 10%, #ffe9f5 0, transparent 60%), linear-gradient(135deg,#f6fbff 0%,#eef5ff 50%,#f8fbff 100%); } .profile-hero::before{ content:""; position:absolute; inset:0; background: url("{{ asset('dva/a339.png') }}") center/cover no-repeat; opacity:.18; } .profile-hero .inner{ position: relative; z-index:1; padding:2.25rem 1.25rem; } @media (min-width: 768px){ .profile-hero .inner{ padding:3rem 2rem; } } /* Glass utilities reused here */ .card-glass{ background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border:1px solid rgba(13,110,253,.15); border-radius: 1rem; box-shadow: 0 10px 28px rgba(0,0,0,.07); } /* Avatar card floating on hero */ .profile-avatar{ margin-top:-3.75rem; } .profile-avatar .photo-container img{ width: 120px; height: 120px; object-fit: cover; border-radius: 999px; box-shadow: 0 10px 24px rgba(0,0,0,.18); border: 4px solid #fff; } /* Chips / small badges */ .chip{ display:inline-flex; align-items:center; gap:.5rem; background: rgba(255,255,255,.9); border:1px solid rgba(13,110,253,.15); border-radius:999px; padding:.45rem .85rem; font-weight:700; color:#2f3e5a; box-shadow: 0 6px 16px rgba(0,0,0,.06); } /* Stat tiles */ .tile{ border-radius: 1rem; border:1px solid rgba(0,0,0,.05); box-shadow: 0 10px 28px rgba(0,0,0,.06); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; padding:1rem 1.1rem; text-align:center; } .tile:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10); filter:saturate(108%); } .tile-1{ background: linear-gradient(135deg,#e7f0ff,#e9fff7); } .tile-2{ background: linear-gradient(135deg,#fff3e7,#e7f2ff); } .tile-3{ background: linear-gradient(135deg,#f3e8ff,#e7f7ff); } .tile-4{ background: linear-gradient(135deg,#fff0f5,#eaf7ff); } .tile h2{ font-weight:800; margin:0; } .tile p{ margin:0; color:#445; opacity:.85; font-weight:600; } /* Section header bar */ .header-bar{ background: linear-gradient(90deg,#e0f2fe,#e0e7ff,#ffe4e6); border-bottom:1px solid rgba(0,0,0,.06); color:#3b4a66; font-weight:700; padding:.7rem .95rem; border-top-left-radius: 1rem; border-top-right-radius:1rem; } /* Tables that match your DVA table look */ .table-dva{ margin:0; color:#223; } .table-dva thead th{ font-size:.82rem; letter-spacing:.3px; text-transform:uppercase; background: linear-gradient(90deg,#eef6ff,#fff0f7); color:#3b4a66; border:0; padding:.6rem .75rem; } .table-dva tbody td{ padding:.6rem .75rem; border-top:1px solid rgba(0,0,0,.06); } .table-dva tr:hover td{ background:linear-gradient(90deg,rgba(14,165,233,.06),rgba(99,102,241,.06)); } /* Buttons */ .btn-dva-primary{ border-radius:999px; padding:.55rem 1.15rem; font-weight:700; color:#fff; background: linear-gradient(135deg,#0ea5e9,#6366f1); border:none; box-shadow: 0 6px 18px rgba(99,102,241,.28); } .btn-dva-secondary{ border-radius:999px; padding:.55rem 1.15rem; font-weight:700; color:#0d6efd; background: rgba(255,255,255,.92); border:1px solid rgba(13,110,253,.15); box-shadow:0 6px 16px rgba(0,0,0,.08); } .btn-dva-warning{ border-radius:999px; padding:.55rem 1.15rem; font-weight:700; color:#7a4b00; background:linear-gradient(135deg,#fff4cc,#ffe1a1); border:1px solid #ffda6a; } /* Awards */ .award-card{ border-radius: 1rem; overflow:hidden; border:1px solid rgba(0,0,0,.06); background: rgba(255,255,255,.92); box-shadow: 0 10px 24px rgba(0,0,0,.07); } .award-card .head{ padding:.6rem .9rem; text-align:center; font-weight:800; color:#334; background: linear-gradient(90deg,#eef6ff,#fff0f7); border-bottom:1px solid rgba(0,0,0,.06); } .award-card .body{ padding: .9rem; text-align:center; } .award-card .photo-container img{ width: 90px; height:auto; filter: drop-shadow(0 6px 12px rgba(0,0,0,.18)); } /* Profile quick links area */ .profile-actions .btn{ margin-left:.4rem; margin-bottom:.4rem; } /* Utility */ .gap-2{ gap:.5rem; } .mt-n3{ margin-top:-1rem; } :root{ --card-radius: 1rem; --glass-bg: rgba(255,255,255,.9); --glass-brd: rgba(13,110,253,.14); } .card-glass{ background: var(--glass-bg); border: 1px solid var(--glass-brd); border-radius: var(--card-radius); backdrop-filter: blur(6px); box-shadow: 0 10px 28px rgba(0,0,0,.06); } .tile-head{ background: radial-gradient(700px 220px at -10% -30%, #e7f2ff 0, transparent 60%), radial-gradient(700px 220px at 110% 10%, #ffe9f5 0, transparent 60%), linear-gradient(135deg,#f6fbff 0%,#eef5ff 50%,#f8fbff 100%); border-top-left-radius: var(--card-radius); border-top-right-radius: var(--card-radius); border-bottom: 1px solid rgba(13,110,253,.08); } .chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .6rem; border-radius:999px; font-weight:600; font-size:.82rem; background:#f6f9ff; border:1px solid #e7efff; color:#123; } .table-dva{ margin-bottom:0; } .table-dva thead th{ position: sticky; top:0; z-index:1; background:#fff; border-bottom:1px solid rgba(13,110,253,.12); font-weight:700; color:#344; } .table-dva tbody td, .table-dva tbody th{ vertical-align: middle; } .badge-soft{ background:#f7faff; color:#123; border:1px solid #e6eeff; font-weight:600; } .pill{ display:inline-flex; align-items:center; gap:.35rem; padding:.32rem .55rem; border-radius:999px; font-weight:600; font-size:.8rem; background:#f6f9ff; border:1px solid #e7efff; } .rank-img{ max-height:30px; border-radius:4px; box-shadow:0 0 0 1px rgba(0,0,0,.06); } .collapse-card .card-header{ background:#fff; border-bottom:1px solid rgba(13,110,253,.08); } .collapse-card .card-footer{ background:transparent; border-top:1px dashed rgba(13,110,253,.18); } .hover-row tbody tr{ transition:background-color .15s ease; } .hover-row tbody tr:hover{ background:rgba(13,110,253,.05); } /* Header stays dark blue */ .thead-darkblue th { background-color: #0d2a4c; color: #fff; border-color: transparent; } /* Make ALL body rows/cells dark blue */ .table-darkblue tbody tr, .table-darkblue tbody tr td { background-color: #0d2a4c !important; /* row & cell */ color: #ffffff; /* text */ } /* If any row has table-primary, keep it blue */ .table-darkblue tbody tr.table-primary td { background-color: #14406b !important; color: #ffffff; } /* Hover state (slightly lighter blue) */ .table-darkblue.table-hover tbody tr:hover td { background-color: #164a7b !important; } /* Optional: links readable on dark bg */ .table-darkblue a { color: #cfe3ff; } .table-darkblue a:hover { color: #e9f2ff; text-decoration: underline; } /* Keep cells tidy */ .table-darkblue td, .table-darkblue th { vertical-align: middle; }