/* ===================================================================== Pravasi Koottayma -- app.css Self-contained dark/light theme + app shell (sidebar, topbar, cards, tables, forms, badges). No hard Bootstrap dependency. Toggle light mode with . ===================================================================== */ :root { --bg: #0d1117; --bg-2: #161b22; --bg-3: #1c2330; --panel: #161b22; --border: #2a3441; --text: #e6edf3; --text-dim: #9aa7b4; --muted: #6b7785; --primary: #14b8a6; /* teal */ --primary-2: #0d9488; --accent: #f59e0b; /* amber */ --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --info: #38bdf8; --radius: 14px; --radius-sm: 9px; --shadow: 0 8px 30px rgba(0,0,0,.35); --sidebar-w: 250px; } html[data-theme="light"] { --bg: #f1f5f9; --bg-2: #ffffff; --bg-3: #f8fafc; --panel: #ffffff; --border: #e2e8f0; --text: #0f172a; --text-dim: #475569; --muted: #94a3b8; --shadow: 0 8px 24px rgba(15,23,42,.08); } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } h1,h2,h3,h4 { margin: 0 0 .5rem; font-weight: 700; letter-spacing: -.01em; } .text-dim { color: var(--text-dim); } .text-muted { color: var(--muted); } .small { font-size: .85rem; } /* ---- App shell ---- */ .app { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); background: var(--bg-2); border-right: 1px solid var(--border); position: fixed; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; z-index: 40; transition: transform .25s ease; } .sidebar .brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--border); font-weight: 800; font-size: 1.05rem; } .sidebar .brand .logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); display: grid; place-items: center; color: #04201d; font-weight: 900; } .sidebar .nav { padding: .6rem; overflow-y: auto; flex: 1; } .sidebar .nav .label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: .8rem .8rem .3rem; } .sidebar .nav a { display: flex; align-items: center; gap: .65rem; padding: .6rem .8rem; border-radius: var(--radius-sm); color: var(--text-dim); font-weight: 500; margin-bottom: 2px; } .sidebar .nav a:hover { background: var(--bg-3); color: var(--text); text-decoration: none; } .sidebar .nav a.active { background: rgba(20,184,166,.14); color: var(--primary); } .sidebar .nav a .ic { width: 18px; text-align: center; } .main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; } .topbar { height: 60px; background: var(--bg-2); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 1rem; padding: 0 1.2rem; position: sticky; top: 0; z-index: 30; } .topbar .page-title { font-weight: 700; font-size: 1.05rem; } .topbar .spacer { flex: 1; } .topbar .user-chip { display: flex; align-items: center; gap: .55rem; padding: .35rem .6rem; border-radius: 30px; background: var(--bg-3); border: 1px solid var(--border); } .topbar .avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .8rem; } .icon-btn { background: var(--bg-3); border: 1px solid var(--border); color: var(--text-dim); width: 38px; height: 38px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; font-size: 1.1rem; } .icon-btn:hover { color: var(--text); } .content { padding: 1.4rem; max-width: 1200px; width: 100%; } .menu-toggle { display: none; } /* ---- Cards / panels ---- */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .card .card-body { padding: 1.2rem; } .card .card-head { padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .6rem; font-weight: 700; } .grid { display: grid; gap: 1rem; } .stat-grid { grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); } .stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); } .stat .k { font-size: 1.9rem; font-weight: 800; line-height: 1; } .stat .t { color: var(--text-dim); font-size: .85rem; margin-top: .35rem; } .stat .ic { width: 40px; height: 40px; border-radius: 11px; float: right; display: grid; place-items: center; font-size: 1.2rem; background: rgba(20,184,166,.14); color: var(--primary); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: .45rem; justify-content: center; padding: .55rem 1rem; border-radius: 10px; border: 1px solid transparent; font-weight: 600; cursor: pointer; font-size: .92rem; line-height: 1; background: var(--bg-3); color: var(--text); transition: filter .15s, background .15s; } .btn:hover { text-decoration: none; filter: brightness(1.08); } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #04201d; } .btn-accent { background: var(--accent); color: #3a2503; } .btn-success { background: var(--success); color: #04210f; } .btn-danger { background: var(--danger); color: #fff; } .btn-outline { background: transparent; border-color: var(--border); color: var(--text); } .btn-sm { padding: .38rem .7rem; font-size: .82rem; border-radius: 8px; } .btn-block { width: 100%; } .btn[disabled] { opacity: .55; cursor: not-allowed; } /* ---- Forms ---- */ .form-group { margin-bottom: 1rem; } label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .88rem; color: var(--text-dim); } .form-control, select, textarea { width: 100%; padding: .6rem .75rem; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); font-size: .95rem; font-family: inherit; } .form-control:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(20,184,166,.18); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .help { font-size: .8rem; color: var(--muted); margin-top: .3rem; } .req { color: var(--danger); } /* ---- Tables ---- */ .table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); } table.data { width: 100%; border-collapse: collapse; background: var(--panel); } table.data th, table.data td { padding: .7rem .85rem; text-align: left; white-space: nowrap; } table.data thead th { background: var(--bg-3); color: var(--text-dim); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); } table.data tbody tr { border-bottom: 1px solid var(--border); } table.data tbody tr:hover { background: var(--bg-3); } table.data tbody tr:last-child { border-bottom: none; } /* ---- Badges ---- */ .badge { display: inline-block; padding: .25rem .55rem; border-radius: 30px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; } .badge-success { background: rgba(34,197,94,.16); color: #4ade80; } .badge-warning { background: rgba(245,158,11,.16); color: #fbbf24; } .badge-danger { background: rgba(239,68,68,.16); color: #f87171; } .badge-secondary { background: rgba(148,163,184,.16);color: #cbd5e1; } .badge-dark { background: rgba(15,23,42,.5); color: #94a3b8; } .badge-info { background: rgba(56,189,248,.16); color: #7dd3fc; } /* ---- Alerts ---- */ .alert { padding: .8rem 1rem; border-radius: 10px; margin-bottom: 1rem; border: 1px solid transparent; } .alert-success { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); color: #86efac; } .alert-error, .alert-danger { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); color: #fca5a5; } .alert-info { background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.3); color: #bae6fd; } .alert-warning { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); color: #fcd34d; } /* ---- Auth pages ---- */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.2rem; } .auth-card { width: 100%; max-width: 420px; } .auth-logo { width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 1rem; background: linear-gradient(135deg, var(--primary), var(--accent)); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 1.4rem; } /* ---- Misc ---- */ .row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; } .mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mb-0{margin-bottom:0}.mb-3{margin-bottom:1rem} .flex{display:flex}.gap{gap:.6rem}.items-center{align-items:center} /* ---- Responsive ---- */ @media (max-width: 900px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); box-shadow: var(--shadow); } .main { margin-left: 0; } .menu-toggle { display: grid; } .form-row { grid-template-columns: 1fr; } .backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 35; } .backdrop.show { display: block; } } /* ===================================================================== Phase 3 — charts (dependency-free) + print ===================================================================== */ .chart { display: flex; flex-direction: column; gap: .55rem; } .chart .row { display: grid; grid-template-columns: 150px 1fr 70px; align-items: center; gap: .6rem; } .chart .row .lbl { font-size: .85rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chart .track { background: var(--bg-3); border-radius: 8px; height: 16px; overflow: hidden; } .chart .fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-2)); border-radius: 8px; min-width: 2px; } .chart .fill.accent { background: linear-gradient(90deg, var(--accent), #d97706); } .chart .val { font-size: .82rem; font-weight: 700; text-align: right; } .cols { display: flex; align-items: flex-end; gap: .5rem; height: 170px; padding-top: .5rem; } .cols .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .35rem; height: 100%; } .cols .col .b { width: 100%; background: linear-gradient(180deg, var(--primary), var(--primary-2)); border-radius: 6px 6px 0 0; min-height: 2px; } .cols .col .cl { font-size: .68rem; color: var(--muted); } .cols .col .cv { font-size: .72rem; font-weight: 700; } .report-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; } @media (max-width: 900px) { .report-grid { grid-template-columns: 1fr; } } @media print { .sidebar, .topbar, .no-print { display: none !important; } .main { margin-left: 0 !important; } .content { padding: 0 !important; max-width: none !important; } .card { box-shadow: none; border-color: #ccc; } body { background: #fff; color: #000; } .chart .fill, .cols .col .b { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ===================================================================== App-like UI (Phase 6): sticky bar, bottom tabs, reveal, PWA, share ===================================================================== */ /* Smooth, native-feeling transitions */ .sidebar .nav a, .btn, .card, .stat, .feature { transition: background .2s ease, transform .18s ease, box-shadow .2s ease, border-color .2s ease; } .card:hover { box-shadow: 0 18px 40px -28px rgba(0,0,0,.55); } .btn:active { transform: scale(.97); } /* Sticky app bar + safe areas */ .topbar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg-2) 88%, transparent); backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px); padding-top: max(0px, env(safe-area-inset-top)); } .topbar .icon-btn { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--border); background: var(--bg-3); color: var(--text-dim); cursor: pointer; font-size: 1.15rem; line-height: 1; } .topbar .icon-btn:hover { color: var(--text); } .topbar .menu-toggle { display: none; } /* Page load + reveal */ .content > * { animation: pkpage .42s cubic-bezier(.22,1,.36,1) both; } @keyframes pkpage { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); transition-delay: var(--d, 0ms); } .reveal.in { opacity: 1; transform: none; } /* Install banner / button */ .install-banner { display: none; align-items: center; gap: .8rem; margin-bottom: 1rem; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(135deg, rgba(20,184,166,.12), rgba(245,158,11,.1)); } .pwa-install .install-banner, .install-banner.pwa-install { display: flex; } .install-banner .ib-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; color: #042722; background: linear-gradient(135deg, var(--primary), var(--accent)); flex: none; } .install-banner .ib-tx { flex: 1; min-width: 0; } .install-banner .ib-tx b { display: block; } .install-banner .ib-tx span { color: var(--text-dim); font-size: .85rem; } /* Sidebar install button */ .sidebar .install-btn { margin: .4rem .6rem; } /* WhatsApp share button */ .wa-btn { background: #25D366 !important; color: #04210f !important; border-color: #25D366 !important; } .wa-btn:hover { filter: brightness(1.05); } .wa-btn .wa-i { font-weight: 700; } /* Bottom tab bar (mobile app feel) */ .bottomnav { display: none; } @media (max-width: 900px) { .topbar .menu-toggle { display: grid; place-items: center; } .topbar .user-chip .small { display: none; } .content { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } .bottomnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: color-mix(in srgb, var(--bg-2) 92%, transparent); backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px); border-top: 1px solid var(--border); padding: .4rem .3rem calc(.4rem + env(safe-area-inset-bottom)); } .bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .35rem 0; color: var(--text-dim); font-size: .68rem; font-weight: 600; text-decoration: none; border-radius: 12px; } .bottomnav a .bi { font-size: 1.25rem; line-height: 1; } .bottomnav a.active { color: var(--primary); } .bottomnav a.active .bi { transform: translateY(-1px); } .bottomnav a:active { background: var(--bg-3); } } /* Larger tap targets on mobile */ @media (max-width: 900px) { .btn { padding: .6rem 1rem; } .btn-sm { padding: .42rem .8rem; } .card-body { padding: 1rem; } } @media (prefers-reduced-motion: reduce) { body, .content > *, .reveal { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } } /* Live meeting indicator */ .badge-live { background: #ef4444; color: #fff; display: inline-flex; align-items: center; gap: .35rem; } .live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239,68,68,.6); animation: livePulse 1.6s infinite; } @keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.6); } 70% { box-shadow: 0 0 0 10px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } } .live-banner { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; border-radius: var(--radius); margin-bottom: 1rem; background: linear-gradient(135deg, rgba(239,68,68,.16), rgba(245,158,11,.1)); border: 1px solid rgba(239,68,68,.35); } .live-banner .lb-tx { flex: 1; min-width: 0; } @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }