/* ========================= GoGoLiberty Admin - app.css (FULL) - Login page stays as-is (do NOT add "admin-dashboard" class on login page) - Dashboard/pages use background images via body.admin-dashboard (NO rgba overlays) - Uses your existing assets: public/assets/admin.jpg public/assets/dispatch.jpg public/assets/operations.jpg public/assets/safety.jpg public/assets/sos.jpg ========================= */ /* ---- Reset / Base ---- */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #111; background: #fff; } a { color: inherit; } img { max-width: 100%; display: block; } button, input, select { font: inherit; } /* ========================= Brand variables ========================= */ :root { --gogo-green: #0b5127; --gogo-yellow: #f7d02c; --border: #e6e6e6; --text-muted: #555; --card: #ffffff; --shadow: 0 10px 30px rgba(0, 0, 0, .12); /* NOT a page overlay */ --shadow-soft: 0 6px 18px rgba(0, 0, 0, .10); /* NOT a page overlay */ /* Dashboard background image variable (NO rgba) */ --dash-bg: url("./assets/admin.jpg"); /* default */ --dash-bg-opacity: 0.22; /* fade amount (0.15–0.30 is nice) */ } /* ========================= DASHBOARD / PAGE BACKGROUND ========================= */ /* Only admin pages should have this class */ body.admin-dashboard { background: #fff; position: relative; min-height: 100vh; } /* background image on admin pages ONLY (faded via opacity, NOT rgba) */ body.admin-dashboard::before { content: ""; position: fixed; inset: 0; z-index: 0; background-image: var(--dash-bg); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: var(--dash-bg-opacity); pointer-events: none; } /* Optional legacy element (does nothing harmful) */ .dashBg { display: none; } /* Per-tab background choices (JS can toggle one of these on ) */ body.admin-dashboard.bg-apps { --dash-bg: url("./assets/admin.jpg"); } body.admin-dashboard.bg-uploads { --dash-bg: url("./assets/operations.jpg"); } body.admin-dashboard.bg-dispatch { --dash-bg: url("./assets/dispatch.jpg"); } body.admin-dashboard.bg-operations { --dash-bg: url("./assets/operations.jpg"); } body.admin-dashboard.bg-safety { --dash-bg: url("./assets/safety.jpg"); } body.admin-dashboard.bg-sos { --dash-bg: url("./assets/sos.jpg"); } /* ========================= SHELL / LAYOUT ========================= */ /* App wrapper that sits above the background image layer */ .shell { position: relative; z-index: 1; /* stays above the background */ min-height: 100vh; display: flex; flex-direction: column; padding: 18px 18px 10px; gap: 14px; } /* Topbar */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: var(--shadow-soft); } .brand { display: flex; align-items: center; gap: 12px; } .brandLogo { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; border: 1px solid var(--border); background: #fff; } .brandText .brandTitle { font-weight: 800; letter-spacing: .2px; } .brandText .brandSub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; } .topbarRight { display: flex; align-items: center; gap: 10px; } .signedIn { font-size: 12.5px; color: #333; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: #fff; } /* Main layout */ .layout { display: grid; grid-template-columns: 250px 1fr; gap: 14px; align-items: start; } /* Sidebar */ .sidebar { border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: var(--shadow-soft); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 520px; } .sidebarFooter { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); } .tinyNote { font-size: 12px; color: var(--text-muted); } /* ========================= TAB BUTTONS (sidebar) ========================= */ .tabBtn { width: 100%; border: 1px solid var(--border); background: #fff; border-radius: 12px; padding: 10px 12px; cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 10px; transition: transform .05s ease, box-shadow .15s ease, border-color .15s ease; } .tabBtn:hover { box-shadow: var(--shadow-soft); } .tabBtn:active { transform: translateY(1px); } /* Active = yellow filled with black text */ .tabBtn.isActive { background: var(--gogo-yellow); border-color: #e2bd1f; color: #111; } /* Icon square (you can swap to icons later) */ .tabBtn::before { content: ""; width: 28px; height: 28px; border-radius: 10px; border: 1px solid var(--border); background: #fff; background-size: cover; background-position: center; flex: 0 0 28px; } /* Match icons to your data-tab values from dashboard.html */ .tabBtn[data-tab="tab-apps"]::before { background-image: url("./assets/admin.jpg"); } .tabBtn[data-tab="tab-uploads"]::before { background-image: url("./assets/operations.jpg"); } .tabBtn[data-tab="tab-dispatch"]::before { background-image: url("./assets/dispatch.jpg"); } .tabBtn[data-tab="tab-operations"]::before { background-image: url("./assets/operations.jpg"); } .tabBtn[data-tab="tab-safety"]::before { background-image: url("./assets/safety.jpg"); } .tabBtn[data-tab="tab-sos"]::before { background-image: url("./assets/sos.jpg"); } /* ========================= CONTENT AREA ========================= */ .content { border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: var(--shadow-soft); padding: 14px; } /* Status strip */ .statusStrip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; margin-bottom: 12px; } .statusLeft { display: flex; align-items: center; gap: 10px; } .statusText { font-size: 13px; color: var(--text-muted); } .statusRight { display: flex; align-items: center; gap: 10px; } .searchInput { width: min(520px, 52vw); padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: #fff; outline: none; } .searchInput:focus { border-color: #c9c9c9; } /* Pills */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; border: 1px solid var(--border); background: #fff; color: #111; } /* Panels */ .panelWrap { display: block; } .panel { display: none; } .panel.isActive { display: block; } .panelHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; } .panelHeader h2 { margin: 0; font-size: 18px; } .panelTools { display: flex; align-items: center; gap: 10px; } /* Select */ .select { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: #fff; } /* Cards grid */ .cardsGrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; } /* Card */ .card { grid-column: span 6; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px; box-shadow: var(--shadow-soft); } .cardTitleRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .cardTitle { font-weight: 900; font-size: 14px; } .badge { font-size: 11px; font-weight: 900; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: #fff; } /* Info rows */ .kv { display: grid; grid-template-columns: 120px 1fr; gap: 8px 10px; font-size: 13px; } .kv .k { color: var(--text-muted); font-weight: 700; } .kv .v { color: #111; font-weight: 700; word-break: break-word; } /* Buttons */ .btn { border: 1px solid var(--border); background: #fff; color: #111; border-radius: 12px; padding: 10px 12px; font-weight: 900; cursor: pointer; transition: transform .05s ease, box-shadow .15s ease, border-color .15s ease; } .btn:hover { box-shadow: var(--shadow-soft); } .btn:active { transform: translateY(1px); } /* Yellow filled + black text */ .btn-yellow { background: var(--gogo-yellow); border-color: #e2bd1f; color: #111; } /* Outline green (optional helper) */ .btn-green { background: #fff; border-color: var(--gogo-green); color: var(--gogo-green); } /* Full-width button row inside cards */ .cardActions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; } /* Empty state */ .emptyState { grid-column: 1 / -1; padding: 18px; border: 1px dashed #d8d8d8; border-radius: 14px; background: #fff; color: var(--text-muted); text-align: center; font-weight: 700; } /* Detail drawer (optional) */ .detailDrawer { margin-top: 12px; border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: var(--shadow-soft); padding: 12px; } /* Footer */ .footer { margin-top: auto; padding: 10px 4px 0; font-size: 12px; color: var(--text-muted); text-align: center; } /* ========================= OPTIONAL: "open as a page" (tabs look like pages) ========================= */ .panel { padding: 10px 6px 2px; } /* ========================= Responsive ========================= */ @media (max-width: 980px) { .layout { grid-template-columns: 1fr; } .sidebar { min-height: auto; } .card { grid-column: span 12; } .searchInput { width: 100%; } }