/* ============================================================ HRMS — Clean Corporate theme (blue / white) Drop-in replacement for public/css/app.css Icons: add Font Awesome CDN to your layout (see note), they are injected via CSS based on each sidebar link's URL. ============================================================ */ :root{ --primary:#2563eb; --primary-dark:#1d4ed8; --primary-2:#1e40af; --bg:#eef2f7; --surface:#ffffff; --line:#e6eaf0; --border:#e6eaf0; --text:#0f172a; --muted:#64748b; --side:#0f2244; --side-2:#0b1b38; --side-text:#c7d2e4; --side-active:#1d4ed8; --success:#16a34a; --warning:#f59e0b; --danger:#ef4444; --info:#0891b2; --secondary:#64748b; --radius:12px; --shadow:0 1px 2px rgba(16,24,40,.04),0 4px 16px rgba(16,24,40,.06); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; } a{color:var(--primary); text-decoration:none} hr{border:none;border-top:1px solid var(--line);margin:16px 0} /* ---------------- Layout ---------------- */ .layout{display:flex; min-height:100vh} .main{flex:1; min-width:0; display:flex; flex-direction:column} .content{padding:24px; flex:1} /* ---------------- Sidebar ---------------- */ .sidebar{ width:248px; flex-shrink:0; background:linear-gradient(180deg,var(--side),var(--side-2)); color:var(--side-text); padding:0 14px 24px; position:sticky; top:0; height:100vh; overflow-y:auto; } .sidebar .brand{ font-size:16px; font-weight:800; letter-spacing:.3px; color:#fff; padding:20px 10px 18px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,.08); position:sticky; top:0; background:var(--side); z-index:2; } .sidebar .group{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#7f93b5; margin:18px 10px 6px; font-weight:700; } .sidebar a{ display:flex; align-items:center; gap:2px; color:var(--side-text); padding:10px 12px; border-radius:9px; margin:2px 0; font-weight:500; transition:background .15s,color .15s; white-space:nowrap; } .sidebar a:hover{background:rgba(255,255,255,.07); color:#fff} .sidebar a.active{background:var(--side-active); color:#fff; box-shadow:0 6px 14px rgba(29,78,216,.35)} /* Icons injected by URL — needs Font Awesome loaded in */ .sidebar a::before{ font-family:"Font Awesome 6 Free"; font-weight:900; content:"\f111"; width:20px; margin-right:10px; text-align:center; font-size:13px; opacity:.95; } .sidebar a[href$="/dashboard"]::before{content:"\f624"} .sidebar a[href*="/company-profile"]::before{content:"\f1ad"} .sidebar a[href*="/projects"]::before{content:"\f542"} .sidebar a[href*="/tasks"]::before{content:"\f0ae"} .sidebar a[href*="/issues"]::before{content:"\f188"} .sidebar a[href*="/screenshots"]::before{content:"\f03e"} .sidebar a[href*="/bills"]::before{content:"\f571"} .sidebar a[href*="/quotations"]::before{content:"\f15c"} .sidebar a[href*="/expenses"]::before{content:"\f555"} .sidebar a[href*="/staff"]::before{content:"\f0c0"} .sidebar a[href*="/attendance"]::before{content:"\f274"} .sidebar a[href*="/leaves"]::before{content:"\f073"} .sidebar a[href*="/salary"]::before{content:"\f0d6"} .sidebar a[href*="/events"]::before{content:"\f133"} .sidebar a[href*="/roles"]::before{content:"\f505"} .sidebar a[href*="/branches"]::before{content:"\f0e8"} .sidebar a[href*="/reports"]::before{content:"\f080"} .sidebar a[href*="/settings"]::before{content:"\f013"} /* icons for the newer menu items */ .sidebar a[href*="/activity"]::before, .sidebar a[href*="/audit"]::before { content: "\f1da"; } /* history/clock */ .sidebar a[href*="/holidays"]::before { content: "\f781"; } /* calendar-star */ .sidebar a[href*="/custom-fields"]::before { content: "\f1de"; } /* sliders */ /* ---------------- Topbar ---------------- */ .topbar{ height:64px; background:var(--surface); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 24px; position:sticky; top:0; z-index:20; } .topbar .right{display:flex; align-items:center; gap:18px} .topbar select{width:auto; min-width:150px} .bell{position:relative; cursor:pointer; font-size:18px; color:var(--muted)} .bell .dot{ position:absolute; top:-6px; right:-8px; background:var(--danger); color:#fff; font-size:10px; min-width:16px; height:16px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; font-weight:700; } /* Dropdowns */ .dropdown{position:relative} .dropdown-menu{ display:none; position:absolute; right:0; top:calc(100% + 10px); min-width:240px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:6px; z-index:50; overflow:hidden; } .dropdown-menu.show{display:block} .dropdown-menu .item{padding:9px 12px; border-radius:8px; font-size:13px} .dropdown-menu .item:hover{background:var(--bg)} .dropdown-menu .item a{color:var(--text); display:block} /* ---------------- Page head ---------------- */ .page-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; flex-wrap:wrap} .page-head h1{font-size:22px; font-weight:800; margin:0; letter-spacing:-.01em} /* ---------------- Cards ---------------- */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); } .card > b{display:block; margin-bottom:12px; font-size:15px} /* Stat cards */ .stat{display:flex; flex-direction:column; gap:2px; position:relative; overflow:hidden} .stat .n{font-size:26px; font-weight:800; line-height:1.1; color:var(--text)} .stat .l{font-size:12.5px; color:var(--muted); font-weight:500} .stat-card{border-left:4px solid var(--primary)} .grid{display:grid; gap:16px} /* ---------------- Buttons ---------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--primary); color:#fff; border:1px solid var(--primary); padding:10px 18px; border-radius:9px; font-size:13.5px; font-weight:600; cursor:pointer; transition:filter .15s,box-shadow .15s,transform .02s; line-height:1; } .btn:hover{filter:brightness(1.06); box-shadow:0 6px 16px rgba(37,99,235,.28)} .btn:active{transform:translateY(1px)} .btn.sm{padding:6px 12px; font-size:12.5px; border-radius:8px} .btn.gray{background:#f1f5f9; color:var(--text); border-color:var(--line)} .btn.gray:hover{background:#e9eef5; box-shadow:none} .btn.ghost{background:transparent; color:var(--primary); border-color:var(--primary)} .btn.ghost:hover{background:#eef4ff; box-shadow:none} .btn.danger{background:var(--danger); border-color:var(--danger)} .btn.danger:hover{box-shadow:0 6px 16px rgba(239,68,68,.28)} .btn.secondary{background:var(--secondary); border-color:var(--secondary)} /* ---------------- Forms ---------------- */ .form-row{margin-bottom:14px; display:flex; flex-direction:column; gap:6px} label{font-size:12.5px; font-weight:600; color:#334155} input,select,textarea{ width:100%; padding:10px 12px; border:1px solid #d7dee8; border-radius:9px; font-size:14px; font-family:inherit; background:#fff; color:var(--text); transition:border .15s,box-shadow .15s; } input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); } input[disabled]{background:#f4f6fa; color:var(--muted)} textarea{resize:vertical} .two-col{display:grid; grid-template-columns:1fr 1fr; gap:14px} .three-col{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px} .filters{display:flex; gap:14px; flex-wrap:wrap; align-items:end; margin-bottom:16px} .filters .form-row,.filters > div{margin-bottom:0} /* ---------------- Tables ---------------- */ table{width:100%; border-collapse:collapse; font-size:13.5px} thead th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; padding:10px 12px; border-bottom:2px solid var(--line); background:#fafbfd; } tbody td{padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle} tbody tr:hover{background:#f8fafc} tbody tr:last-child td{border-bottom:none} /* ---------------- Badges ---------------- */ .badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700; line-height:1.4; background:#eef2f7; color:#475569; } .badge-primary{background:#e0edff; color:var(--primary-2)} .badge-success{background:#dcfce7; color:#15803d} .badge-info{background:#cffafe; color:#0e7490} .badge-warning{background:#fef3c7; color:#b45309} .badge-danger{background:#fee2e2; color:#b91c1c} .badge-secondary{background:#e2e8f0; color:#475569} /* ---------------- Progress ---------------- */ .progress{height:7px; background:#e9eef5; border-radius:999px; overflow:hidden; margin-bottom:4px} .progress span{display:block; height:100%; background:linear-gradient(90deg,var(--primary),#60a5fa); border-radius:999px} /* ---------------- Alerts ---------------- */ .alert{padding:12px 16px; border-radius:10px; margin-bottom:18px; font-size:13.5px; font-weight:500; border:1px solid transparent} .alert-ok{background:#ecfdf5; color:#065f46; border-color:#a7f3d0} .alert-err{background:#fef2f2; color:#991b1b; border-color:#fecaca} /* ---------------- Auth (login) ---------------- */ .auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:radial-gradient(1200px 600px at 20% -10%,#dbeafe,transparent), radial-gradient(1000px 500px at 100% 110%,#e0e7ff,transparent), linear-gradient(135deg,#0f2244,#1e3a8a); } .auth-card{ width:100%; max-width:400px; background:var(--surface); border-radius:16px; padding:36px 32px; box-shadow:0 20px 60px rgba(2,6,23,.35); } .auth-card h2{margin:0 0 4px; font-size:24px; font-weight:800; text-align:center} .auth-card > p{margin:0 0 22px; text-align:center; color:var(--muted); font-size:13.5px} .auth-card .btn{width:100%; padding:12px; font-size:15px} .auth-card .form-row{margin-bottom:16px} /* ---------------- Misc / responsive ---------------- */ img{max-width:100%} @media (max-width:900px){ .sidebar{position:fixed; left:0; top:0; z-index:60; transform:translateX(-100%); transition:transform .2s; box-shadow:0 0 40px rgba(0,0,0,.3)} .sidebar.show{transform:translateX(0)} .two-col,.three-col{grid-template-columns:1fr} .grid[style*="repeat(4"]{grid-template-columns:repeat(2,1fr)!important} } /* ===== Auto-hiding mini sidebar: icons only, expands on hover ===== */ @media (min-width: 901px) { .sidebar{ position: fixed; left: 0; top: 0; height: 100vh; width: 74px; z-index: 60; overflow: hidden; transition: width .2s ease; } .main{ margin-left: 74px; } .sidebar .group{ opacity: 0; height: 0; margin: 0; padding: 0; overflow: hidden; } .sidebar .brand{ font-size: 0; } .sidebar a{ font-size: 0; justify-content: center; padding: 12px 0; } .sidebar a::before{ margin-right: 0; width: auto; font-size: 17px; } .sidebar:hover{ width: 248px; overflow-y: auto; box-shadow: 8px 0 30px rgba(2,6,23,.28); } .sidebar:hover .group{ opacity: 1; height: auto; margin: 18px 10px 6px; } .sidebar:hover .brand{ font-size: 16px; } .sidebar:hover a{ font-size: 14px; justify-content: flex-start; padding: 10px 12px; } .sidebar:hover a::before{ margin-right: 10px; width: 20px; font-size: 13px; } } /* ============================================================ MOBILE FIXES — responsive tables, no horizontal zoom ============================================================ */ /* stop the whole page from overflowing sideways */ html, body { max-width: 100%; overflow-x: hidden; } @media (max-width: 900px) { /* content padding smaller on phones */ .content { padding: 14px !important; } /* stack any 2/3-column form rows */ .two-col, .three-col { grid-template-columns: 1fr !important; } /* stack dashboard/stat grids to 2 or 1 across */ .grid[style*="repeat(4"], .grid[style*="repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; } .grid[style*="1fr 2fr"], .grid[style*="2fr 1fr"] { grid-template-columns: 1fr !important; } /* page heading + buttons wrap instead of overflow */ .page-head { flex-wrap: wrap; gap: 10px; } .page-head h1 { font-size: 19px; } /* MOST IMPORTANT: make every table scroll inside its card instead of pushing the page wide / disappearing */ .card { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { min-width: 560px; } /* table scrolls horizontally within the card */ /* filters (month/year) stack nicely */ .filters { flex-direction: column; align-items: stretch; } .filters > div, .filters .form-row { width: 100%; } /* header spacing */ .topbar { padding: 0 12px; height: 56px; } .topbar select { min-width: 120px; } } /* very small phones */ @media (max-width: 480px) { .grid[style*="repeat(4"], .grid[style*="repeat(3"] { grid-template-columns: 1fr !important; } .stat .n { font-size: 22px; } } /* ===== Payment modal ===== */ .pay-overlay{ display:none; position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:200; align-items:center; justify-content:center; padding:16px; } .pay-box{ background:#fff; border-radius:14px; padding:24px; width:100%; max-width:380px; box-shadow:0 20px 60px rgba(2,6,23,.35); } /* ===== Nicer stat cards (used on dashboard, projects, tasks) ===== */ /* ===== Stat grids responsive on mobile ===== */ @media (max-width:900px){ .grid[style*="repeat(6"]{ grid-template-columns:repeat(3,1fr) !important; } .grid[style*="repeat(4"]{ grid-template-columns:repeat(2,1fr) !important; } } @media (max-width:560px){ .grid[style*="repeat(6"], .grid[style*="repeat(4"]{ grid-template-columns:repeat(2,1fr) !important; } .stat{ padding:14px; } .stat .n{ font-size:22px; } } /* ===== Mobile: stack 2-col layouts, contain inner tables ===== */ @media (max-width: 820px) { /* any inline "2fr 1fr" / "1fr 2fr" / "2fr 1fr" grid → single column */ .grid[style*="2fr 1fr"], .grid[style*="1fr 2fr"], .grid[style*="1fr 1fr"] { grid-template-columns: 1fr !important; } /* cards never exceed the screen; inner tables scroll inside the card */ .card { overflow-x: auto; -webkit-overflow-scrolling: touch; } .card table { min-width: 460px; } /* progress-log images shrink */ .card img { max-width: 100%; height: auto; } /* badges wrap instead of pushing width */ td { word-break: break-word; } } /* ===== PWA install / open banner ===== */ #pwaBanner{ position:fixed; left:0; right:0; bottom:0; z-index:9999; background:#0f2244; color:#fff; box-shadow:0 -6px 24px rgba(2,6,23,.35); animation:pwaUp .28s ease-out; } @keyframes pwaUp{ from{ transform:translateY(100%);} to{ transform:translateY(0);} } #pwaBanner .pwa-inner{ display:flex; align-items:center; gap:12px; padding:12px 14px; max-width:900px; margin:0 auto; } #pwaBanner img{ width:40px; height:40px; border-radius:9px; flex-shrink:0; background:#fff; } #pwaBanner .pwa-txt{ display:flex; flex-direction:column; line-height:1.3; flex:1; min-width:0; } #pwaBanner .pwa-txt b{ font-size:14px; } #pwaBanner .pwa-txt span{ font-size:12px; color:#c7d2e4; } #pwaBanner .pwa-btn{ background:#2563eb; color:#fff; border:0; padding:9px 18px; border-radius:9px; font-weight:700; font-size:13.5px; cursor:pointer; white-space:nowrap; } #pwaBanner .pwa-btn:hover{ filter:brightness(1.08); } #pwaBanner .pwa-x{ background:transparent; border:0; color:#8fa3c4; font-size:26px; line-height:1; cursor:pointer; padding:0 4px; } @media (max-width:420px){ #pwaBanner .pwa-txt span{ display:none; } #pwaBanner .pwa-btn{ padding:9px 14px; } } /* ===== PWA install / open banner ===== */ #pwaBanner{ position:fixed; left:0; right:0; bottom:0; z-index:9999; background:#0f2244; color:#fff; box-shadow:0 -6px 24px rgba(2,6,23,.35); animation:pwaUp .28s ease-out; } @keyframes pwaUp{ from{ transform:translateY(100%);} to{ transform:translateY(0);} } #pwaBanner .pwa-inner{ display:flex; align-items:center; gap:12px; padding:12px 14px; max-width:900px; margin:0 auto; } #pwaBanner img{ width:40px; height:40px; border-radius:9px; flex-shrink:0; background:#fff; object-fit:contain; } #pwaBanner .pwa-txt{ display:flex; flex-direction:column; line-height:1.3; flex:1; min-width:0; } #pwaBanner .pwa-txt b{ font-size:14px; } #pwaBanner .pwa-txt span{ font-size:12px; color:#c7d2e4; } #pwaBanner .pwa-btn{ background:#2563eb; color:#fff; border:0; padding:9px 18px; border-radius:9px; font-weight:700; font-size:13.5px; cursor:pointer; white-space:nowrap; } #pwaBanner .pwa-btn:hover{ filter:brightness(1.08); } #pwaBanner .pwa-x{ background:transparent; border:0; color:#8fa3c4; font-size:26px; line-height:1; cursor:pointer; padding:0 4px; } @media (max-width:420px){ #pwaBanner .pwa-txt span{ display:none; } #pwaBanner .pwa-btn{ padding:9px 14px; } } /* ===== App-like behaviour: no zoom, no text-select, no bounce ===== */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; /* kills double-tap zoom */ } body { overscroll-behavior-y: contain; /* stops pull-to-refresh bounce */ -webkit-tap-highlight-color: transparent; /* no blue flash on tap */ } /* prevent accidental text selection on UI chrome (keep it in inputs/content) */ .sidebar, .topbar, .btn, .badge, .page-head, label, th { -webkit-user-select: none; user-select: none; } /* iOS zooms in when an input's font-size is under 16px — this prevents it */ input, select, textarea { font-size: 16px !important; } /* safe area for notched phones in standalone mode */ @media (display-mode: standalone) { body { padding-bottom: env(safe-area-inset-bottom); } .topbar { padding-top: env(safe-area-inset-top); } }