/* ============================================================ THEME Do theme hain — dark (default) aur light. Har rang yahan variable ki soorat mein hai, is liye theme badalne par poora portal ek saath badal jaata hai. Toggle laga deta hai. ============================================================ */ :root{ /* surfaces */ --bg:#05070D; --bg-2:#0A0E18; --panel:rgba(255,255,255,.045); --sunken:rgba(0,0,0,.22); /* andar dhansi hui dibbiyan (facts, break box) */ --input-bg:rgba(0,0,0,.30); --input-off:rgba(0,0,0,.15); /* disabled input */ --hover:rgba(255,255,255,.05); /* link/row hover */ --hover-soft:rgba(255,255,255,.02); --head-bg:rgba(255,255,255,.03); /* table/section ka sar */ --chip-bg:rgba(255,255,255,.07); /* neutral chip aur grey pill */ --track:rgba(255,255,255,.09); /* progress bar ka track */ --side-bg:rgba(9,13,22,.94); /* left menu */ --bar-bg:rgba(10,14,24,.92); /* mobile topbar */ --scrim:rgba(0,0,0,.55); --shadow:rgba(0,0,0,.6); --page-glow-1:rgba(0,174,239,.12); --page-glow-2:rgba(0,114,181,.10); /* lines + text */ --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --text:#EAF1FA; --muted:#8B97AD; --faint:#5C667D; --on-blue:#021018; /* neeli button par likhai */ /* brand + states */ --blue:#00AEEF; --blue-2:#36C5FF; --blue-deep:#0072B5; --glow:rgba(0,174,239,.4); --green:#22c55e; --red:#ef4444; --amber:#f59e0b; --ok-text:#7ee2a8; --err-text:#ff9a9a; --warn-text:#ffcb70; --red-text:#ffb4b4; /* bade number aur timer ki gradient likhai */ --num-grad:linear-gradient(180deg,#fff,var(--blue-2)); --num-grad-warn:linear-gradient(180deg,#fff,#ffcb70); /* chart ke rang — JS yahin se uthata hai */ --chart-worked:#22c55e; --chart-break:#f59e0b; --chart-ot:#36C5FF; --chart-net:#36C5FF; --chart-ded:#ef4444; --chart-grid:rgba(255,255,255,.08); --chart-tick:#8B97AD; --chart-tip-bg:#0A0E18; --chart-tip-tx:#EAF1FA; --display:'Space Grotesk',sans-serif; --body:'Inter',sans-serif; } /* ---------------- LIGHT THEME ---------------- */ :root[data-theme="light"]{ --bg:#F1F5FA; --bg-2:#FFFFFF; --panel:#FFFFFF; --sunken:#F3F7FB; --input-bg:#FFFFFF; --input-off:#EEF2F7; --hover:rgba(12,30,55,.045); --hover-soft:rgba(12,30,55,.022); --head-bg:#F6F9FC; --chip-bg:rgba(12,30,55,.06); --track:rgba(12,30,55,.12); --side-bg:rgba(255,255,255,.95); --bar-bg:rgba(255,255,255,.94); --scrim:rgba(12,30,55,.35); --shadow:rgba(12,30,55,.14); --page-glow-1:rgba(0,174,239,.10); --page-glow-2:rgba(0,114,181,.07); --line:rgba(12,30,55,.11); --line-2:rgba(12,30,55,.20); --text:#101F38; --muted:#566A85; --faint:#627186; /* halke background par gehra neela chahiye, warna parhna mushkil hota hai */ --blue-2:#0286C2; --glow:rgba(0,174,239,.28); --green:#15803d; --red:#dc2626; --ok-text:#127a41; --err-text:#c02626; --warn-text:#8a5a00; --red-text:#c02626; --num-grad:linear-gradient(180deg,#12304C,var(--blue-deep)); --num-grad-warn:linear-gradient(180deg,#5a3c00,#b07600); --chart-worked:#16a34a; --chart-break:#e08800; --chart-ot:#0286C2; --chart-net:#0286C2; --chart-ded:#dc2626; --chart-grid:rgba(12,30,55,.10); --chart-tick:#566A85; --chart-tip-bg:#101F38; --chart-tip-tx:#FFFFFF; } *{box-sizing:border-box;margin:0;padding:0} body{font-family:var(--body);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh} body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(55% 40% at 85% -5%, var(--page-glow-1), transparent 70%),radial-gradient(45% 40% at 0% 100%, var(--page-glow-2), transparent 70%)} /* ---------- logo theme ke saath badalta hai ---------- Logo transparent hai: gehre background par safed siyahi wala, halke par gehri siyahi wala. Dono chhapte hain, CSS wahi dikhati hai jo parha ja sake. (img. se specificity zyada hai taake .auth-logo/.brand-mark ka display na jeet jaye) */ img.logo-on-light{display:none} :root[data-theme="light"] img.logo-on-dark{display:none} :root[data-theme="light"] img.logo-on-light{display:block} /* ---------- theme toggle (top right corner) ---------- */ .theme-toggle{position:fixed;top:13px;right:18px;z-index:60; display:inline-flex;align-items:center;gap:.45rem; background:var(--panel);border:1px solid var(--line-2);color:var(--text); border-radius:22px;padding:.42em .85em;font-family:var(--body);font-size:.79rem;font-weight:600; cursor:pointer;backdrop-filter:blur(10px);box-shadow:0 6px 20px -10px var(--shadow)} .theme-toggle:hover{border-color:var(--blue);color:var(--blue-2)} .theme-toggle .ti{font-size:.95rem;line-height:1} /* Button wo dikhata hai jis par jaana hai: abhi dark hai -> "☀️ Light" · abhi light hai -> "🌙 Dark" */ .theme-toggle .t-to-dark{display:none} :root[data-theme="light"] .theme-toggle .t-to-dark{display:inline} :root[data-theme="light"] .theme-toggle .t-to-light{display:none} a{color:var(--blue-2);text-decoration:none} h1{font-family:var(--display);font-weight:600;font-size:1.8rem;letter-spacing:-.02em;margin-bottom:.3rem} h2{font-family:var(--display);font-weight:600;font-size:1.25rem;margin:2rem 0 1rem} h3{font-family:var(--display);font-weight:600;font-size:1rem} .muted{color:var(--muted)} .center{text-align:center} .small{font-size:.84rem} .num{text-align:right;font-variant-numeric:tabular-nums} .code{font-family:var(--display);color:var(--blue-2);font-size:.9rem} .opt{color:var(--faint);font-weight:400} /* ---------- auth (login / setup) ---------- */ .auth-body{display:grid;place-items:center;padding:24px} .auth-card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:2.4rem 2rem;backdrop-filter:blur(10px)} .auth-logo{display:block;width:auto;height:auto;max-width:250px;max-height:110px; margin:0 auto 1.2rem;object-fit:contain} .brand-lg{font-family:var(--display);font-weight:700;font-size:1.5rem;text-align:center} .brand-lg b{color:var(--blue-2)} .auth-card .sub{text-align:center;color:var(--muted);font-size:.92rem;margin:.4rem 0 1.8rem} .auth-card label{display:block;font-size:.82rem;color:var(--muted);margin:1rem 0 .4rem;font-weight:500} .auth-card input{width:100%;background:var(--input-bg);border:1px solid var(--line-2);border-radius:11px;padding:.85em 1em;color:var(--text);font-family:var(--body);font-size:.98rem} .auth-card input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,174,239,.15)} /* ---------- login: Admin / Agent ---------- */ .role-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.3rem;background:var(--sunken); border:1px solid var(--line);border-radius:12px;padding:.28rem;margin-bottom:1.3rem} .role-tab{display:inline-flex;align-items:center;justify-content:center;gap:.45rem; background:none;border:0;border-radius:9px;padding:.6em .5em;cursor:pointer; font-family:var(--body);font-size:.88rem;font-weight:600;color:var(--muted)} .role-tab:hover{color:var(--text)} .role-tab.on{background:linear-gradient(180deg,var(--blue-2),var(--blue));color:var(--on-blue)} .rt-ico{font-size:1rem;line-height:1} .hint{color:var(--faint);font-size:.85rem;margin-top:1.2rem;text-align:center} .hint.left{text-align:left} .hint code{background:var(--chip-bg);padding:.1em .4em;border-radius:5px;color:var(--blue-2)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;width:100%;margin-top:1.6rem;background:linear-gradient(180deg,var(--blue-2),var(--blue));color:var(--on-blue);font-family:var(--body);font-weight:600;font-size:.98rem;padding:.9em 1.4em;border:0;border-radius:11px;cursor:pointer;box-shadow:0 10px 30px -12px var(--glow);transition:transform .2s} .btn:hover{transform:translateY(-2px)} .btn.big{font-size:1.1rem;padding:1.1em;max-width:280px;margin:1.4rem auto 0} .btn.danger{background:linear-gradient(180deg,#ff6b6b,#e23b3b);color:#fff} .btn-sm{display:inline-flex;align-items:center;gap:.4em;background:linear-gradient(180deg,var(--blue-2),var(--blue));color:var(--on-blue);font-weight:600;font-size:.82rem;padding:.5em 1em;border:0;border-radius:9px;cursor:pointer;text-decoration:none;white-space:nowrap} .btn-sm:hover{opacity:.9} .btn-sm.ghost{background:transparent;border:1px solid var(--line-2);color:var(--text)} .btn-sm.ghost:hover{border-color:var(--blue);color:var(--blue-2)} .link-danger{background:none;border:0;color:var(--err-text);font-family:var(--body);font-size:.82rem;cursor:pointer;padding:0;text-decoration:underline} /* ---------- alerts ---------- */ .alert{padding:.8em 1em;border-radius:11px;font-size:.9rem;margin-bottom:1rem} .alert.ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.4);color:var(--ok-text)} .alert.err{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.4);color:var(--err-text)} /* ============================================================ LEFT SIDEBAR LAYOUT Menu baayen taraf fixed rehta hai, click karne par uska saara data daayen (content) mein khulta hai. ============================================================ */ :root{--side-w:250px} .shell{display:flex;min-height:100vh} .sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--side-w);z-index:40; display:flex;flex-direction:column;gap:.5rem;padding:1.1rem .9rem; background:var(--side-bg);backdrop-filter:blur(14px);border-right:1px solid var(--line);overflow-y:auto} .content{flex:1;min-width:0;margin-left:var(--side-w)} /* ---------- brand ---------- */ .side-brand{display:flex;align-items:center;gap:.65rem;padding:.35rem .5rem 1rem;color:var(--text); font-family:var(--display);font-weight:700;font-size:.98rem;line-height:1.25; border-bottom:1px solid var(--line)} .side-brand b{color:var(--blue-2)} .sb-name{min-width:0;overflow:hidden} .side-brand small{display:block;color:var(--faint);font-size:.68rem;font-weight:400; font-family:var(--body);letter-spacing:.02em;margin-top:.1rem} .brand-mark{width:30px;height:30px;border-radius:9px;flex:none;object-fit:contain} .brand-mark.lg{width:38px;height:38px;border-radius:11px} /* ---------- nav items ---------- */ .side-nav{flex:1;display:flex;flex-direction:column;gap:.18rem;padding-top:.7rem} .nv{position:relative;display:flex;align-items:center;gap:.75rem;padding:.66em .75em; border-radius:10px;font-size:.9rem;font-weight:500;color:var(--muted);white-space:nowrap} /* icon ki naap yahin bandh hai — SVG kabhi phail nahi sakta */ .nv .nvi{width:20px;height:20px;flex:0 0 20px;opacity:.85} .nvl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis} .nv:hover{color:var(--text);background:var(--hover)} .nv.on{color:var(--blue-2);background:rgba(0,174,239,.12);font-weight:600} .nv.on .nvi{opacity:1} /* chalu item par baayen taraf roshan patti (Jibble jaisi) */ .nv.on::before{content:"";position:absolute;left:-.9rem;top:50%;transform:translateY(-50%); width:3px;height:24px;border-radius:0 3px 3px 0;background:var(--blue-2)} .nv-sep{height:1px;background:var(--line);margin:.75rem .2rem} .badge{background:var(--red);color:#fff;font-size:.68rem;font-weight:700;line-height:1; padding:.28em .5em;border-radius:20px;min-width:18px;text-align:center;flex:none} .badge.inline{display:inline-block;vertical-align:middle;margin-left:.4rem} /* ---------- neeche user card + collapse ---------- */ .side-foot{border-top:1px solid var(--line);padding-top:.8rem;display:flex;flex-direction:column;gap:.55rem} .side-user{display:flex;align-items:center;gap:.65rem;padding:.5rem;border-radius:12px;color:var(--text)} .side-user:hover{background:var(--hover)} .avatar{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center; background:linear-gradient(180deg,var(--blue-2),var(--blue-deep));color:var(--on-blue); font-family:var(--display);font-weight:700;font-size:.95rem} .avatar.lg{width:44px;height:44px;border-radius:14px;font-size:1.15rem} .su-txt{min-width:0;flex:1} .su-txt b{display:block;font-size:.85rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .su-txt small{color:var(--faint);font-size:.72rem} .su-arrow{color:var(--faint);font-size:1.1rem;line-height:1;flex:none} .side-links{display:flex;align-items:center;justify-content:space-between;gap:.5rem} .side-mini{background:none;border:0;padding:.35em .5em;border-radius:8px;cursor:pointer; color:var(--faint);font-family:var(--body);font-size:.76rem;font-weight:600; letter-spacing:.04em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.35rem} .side-mini:hover{color:var(--text);background:var(--hover)} .cl-ico{font-size:.95rem;line-height:1} .btn-sm.full{justify-content:center;width:100%} /* ---------- menu sikra hua (collapsed) ---------- */ html.nav-collapsed{--side-w:74px} html.nav-collapsed .sb-name, html.nav-collapsed .nvl, html.nav-collapsed .su-txt, html.nav-collapsed .su-arrow, html.nav-collapsed .cl-txt, html.nav-collapsed .side-mini:not(.collapse-btn){display:none} html.nav-collapsed .sidebar{padding:1.1rem .6rem;align-items:center} html.nav-collapsed .side-brand{justify-content:center;padding:.35rem 0 1rem;width:100%} html.nav-collapsed .nv{justify-content:center;padding:.7em 0;gap:0} html.nav-collapsed .nv.on::before{left:-.6rem} html.nav-collapsed .badge{position:absolute;top:.25rem;right:.35rem;padding:.15em .35em;font-size:.6rem} html.nav-collapsed .side-user{justify-content:center;padding:.4rem 0} html.nav-collapsed .side-links{justify-content:center} html.nav-collapsed .cl-ico{transform:rotate(180deg)} /* mobile ki topbar + slide-in menu */ .mobile-bar{display:none;position:sticky;top:0;z-index:30;align-items:center;gap:.8rem; padding:0 16px;height:56px;background:var(--bar-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .hamburger{background:transparent;border:1px solid var(--line-2);color:var(--text); border-radius:9px;padding:.3em .6em;font-size:1.1rem;cursor:pointer;line-height:1} .brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:600;font-size:1rem;color:var(--text)} .brand b{color:var(--blue-2)} .scrim{display:none;position:fixed;inset:0;background:var(--scrim);z-index:35} .wrap{max-width:1080px;margin:0 auto;padding:2rem 26px 4rem} .wrap.wide{max-width:1320px} .quick-links{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem} /* ---------- status card (agent) ---------- */ .status-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:2.4rem 1.5rem;text-align:center;margin:1.6rem 0 1rem;backdrop-filter:blur(10px)} .status{font-family:var(--display);font-size:1.3rem;font-weight:600;margin-bottom:.4rem} .status.pending{color:var(--muted)} .status.active{color:var(--blue-2)} .status.done{color:var(--green)} .btn-row{display:flex;gap:.6rem;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:1.2rem} .btn-row form{margin:0} .btn-sm.danger-sm{background:linear-gradient(180deg,#ff6b6b,#e23b3b);color:#fff} /* ---------- stat row ---------- */ .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.4rem 0} .stat-row.four{grid-template-columns:repeat(4,1fr)} .stat-row.five{grid-template-columns:repeat(5,1fr)} .mini{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.4rem;text-align:center} .mini .n{font-family:var(--display);font-weight:700;font-size:1.7rem;background:var(--num-grad);-webkit-background-clip:text;background-clip:text;color:transparent;word-break:break-word} .mini .l{color:var(--muted);font-size:.82rem;margin-top:.3rem} /* clickable card — click par neeche ka roster chhanta hai */ a.mini.pick{display:block;color:inherit;cursor:pointer;transition:border-color .15s,transform .15s} a.mini.pick:hover{border-color:var(--line-2);transform:translateY(-2px)} a.mini.pick:hover .l{color:var(--text)} a.mini.pick.on{border-color:rgba(0,174,239,.55);box-shadow:0 0 0 1px rgba(0,174,239,.22)} a.mini.pick.on .l{color:var(--blue-2)} a.mini.pick::after{content:"";display:block;height:2px;width:26px;margin:.55rem auto 0;border-radius:2px; background:var(--line-2);opacity:0;transition:opacity .15s} a.mini.pick:hover::after{opacity:.7} a.mini.pick.on::after{background:var(--blue-2);opacity:1} /* ---------- tables ---------- */ .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--panel)} table{width:100%;border-collapse:collapse;min-width:520px} th{text-align:left;font-family:var(--body);font-weight:600;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);padding:1rem;border-bottom:1px solid var(--line);white-space:nowrap} th.num{text-align:right} td{padding:.9rem 1rem;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:middle} tr:last-child td{border-bottom:0} tbody tr:hover td{background:var(--hover-soft)} /* pills */ .pill{display:inline-block;padding:.25em .8em;border-radius:20px;font-size:.72rem;font-weight:600;white-space:nowrap} .pill.green{background:rgba(34,197,94,.15);color:var(--ok-text)} .pill.red{background:rgba(239,68,68,.15);color:var(--err-text)} .pill.blue{background:rgba(0,174,239,.15);color:var(--blue-2)} .pill.amber{background:rgba(245,158,11,.15);color:var(--warn-text)} .pill.grey{background:var(--chip-bg);color:var(--muted)} /* ---------- panels + forms ---------- */ .panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:1.8rem;margin-bottom:1.2rem} .panel h2{margin-top:0} .form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;align-items:end} .form-grid .f{min-width:0} .form-grid .f.grow{grid-column:span 2} .form-grid .f.grow-2{grid-column:span 2} .form-grid .f.row-2{display:flex;gap:.6rem;align-items:center} /* form ke andar section ka heading (Work / Personal / Bank) */ .sec-head{grid-column:1/-1;font-family:var(--display);font-size:.72rem;font-weight:600; letter-spacing:.11em;text-transform:uppercase;color:var(--blue-2); padding-bottom:.4rem;margin-top:.6rem;border-bottom:1px solid var(--line)} .sec-head:first-child{margin-top:0} label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:.35rem} input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select{ width:100%;background:var(--input-bg);border:1px solid var(--line-2);border-radius:10px; padding:.65em .8em;color:var(--text);font-family:var(--body);font-size:.92rem} input:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,174,239,.13)} input:disabled{color:var(--faint);background:var(--input-off)} select option{background:var(--bg-2);color:var(--text)} .form-grid .btn{margin-top:0;width:auto} .filter{display:flex;gap:.6rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap} .filter input,.filter select{width:auto} .actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center} .actions form{margin:0} .inline-reset{display:flex;gap:.4rem} .inline-reset input{width:130px;font-size:.82rem;padding:.4em .6em} /* ---------- salary page ---------- */ .toolbar{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center;margin-bottom:.5rem} .toolbar .filter{margin-bottom:0} .toolbar-right{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap} .toolbar-right form{margin:0} .slip-row{background:var(--panel);border:1px solid var(--line);border-radius:16px;margin-bottom:1rem;overflow:hidden} .slip-row.pending{border-style:dashed} .sr-head{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 1.3rem;background:var(--head-bg);border-bottom:1px solid var(--line);flex-wrap:wrap} .sr-who{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap} .sr-who strong{font-size:1rem} .sr-net .l{color:var(--muted);font-size:.8rem;margin-right:.4rem} .sr-net .v{font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--blue-2)} .sr-body{padding:1.2rem 1.3rem} .sr-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap} .sr-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line)} .sr-foot form{margin:0} .facts{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem;margin-bottom:1rem} .facts>div{background:var(--sunken);border:1px solid var(--line);border-radius:11px;padding:.65rem .8rem} .facts span{display:block;color:var(--faint);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em} .facts b{font-family:var(--display);font-size:.98rem;font-variant-numeric:tabular-nums} .ded-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem} .chip{display:inline-block;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.28);color:var(--red-text);border-radius:20px;padding:.25em .8em;font-size:.8rem} .chip.sm{font-size:.74rem;padding:.15em .6em;margin:.1rem .15rem .1rem 0} .chip b{font-variant-numeric:tabular-nums} .chip.total{background:var(--chip-bg);border-color:var(--line-2);color:var(--text)} .ded-form{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;align-items:end} .ded-form .f.grow{grid-column:span 3} .ded-form .f.end{grid-column:span 2;justify-self:end} .chip.plain{background:var(--chip-bg);border-color:var(--line-2);color:var(--muted)} .chip.plain b{color:var(--text)} .tiny{font-size:.7rem;font-weight:400} .alert.warn{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.4);color:var(--warn-text)} .slip-row.needs-action{border-color:rgba(245,158,11,.55);box-shadow:0 0 0 1px rgba(245,158,11,.18)} /* ---------- agents roster ---------- */ .roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:1rem} .rcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.2rem; display:flex;flex-direction:column;gap:.9rem} .rcard.off{opacity:.62} .rc-top{display:flex;gap:.8rem;align-items:flex-start} .rc-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem} .rc-id strong{font-size:1.02rem;line-height:1.25} .rc-id .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .code.big{font-size:.98rem;font-weight:700;letter-spacing:.02em} .rc-flags{display:flex;flex-direction:column;gap:.3rem;align-items:flex-end;flex:none} .rc-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem} .rc-facts>div{background:var(--sunken);border:1px solid var(--line);border-radius:10px;padding:.5rem .65rem;min-width:0} .rc-facts span{display:block;color:var(--faint);font-size:.66rem;text-transform:uppercase;letter-spacing:.04em} .rc-facts b{font-family:var(--display);font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block} .rc-more{border-top:1px solid var(--line);padding-top:.6rem} .rc-more>summary{cursor:pointer;list-style:none;color:var(--muted);font-size:.8rem;font-weight:500; display:flex;align-items:center;gap:.5rem;padding:.15rem 0} .rc-more>summary::-webkit-details-marker{display:none} .rc-more>summary::before{content:"▸";color:var(--blue-2);transition:transform .15s;display:inline-block} .rc-more[open]>summary::before{transform:rotate(90deg)} .rc-more>summary:hover{color:var(--text)} .rc-more .rc-facts{margin-top:.6rem} .rc-addr{margin-top:.5rem} .rc-month{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;padding-top:.7rem;border-top:1px solid var(--line)} .rm-title{font-family:var(--display);font-size:.74rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-right:.2rem} .rc-actions{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;padding-top:.7rem;border-top:1px solid var(--line)} .rc-actions form{margin:0} /* ============================================================ AGENT DASHBOARD — punch hero (Jibble jaisa layout) ============================================================ */ .punch-hero{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;align-items:center; background:var(--panel);border:1px solid var(--line);border-radius:22px; padding:1.8rem 2rem;margin:1.4rem 0 1.8rem;backdrop-filter:blur(10px);position:relative;overflow:hidden} .punch-hero::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 90% at 50% 0%,rgba(0,174,239,.10),transparent 70%)} .punch-hero.state-in::after{background:radial-gradient(60% 90% at 50% 0%,rgba(34,197,94,.12),transparent 70%)} .punch-hero.state-break::after{background:radial-gradient(60% 90% at 50% 0%,rgba(245,158,11,.12),transparent 70%)} .punch-hero>*{position:relative;z-index:1} /* left: live clock */ .ph-time{font-family:var(--display);font-weight:700;font-size:2.5rem;line-height:1;letter-spacing:-.02em; font-variant-numeric:tabular-nums} .ph-date{color:var(--muted);font-size:.95rem;margin-top:.25rem} .ph-tz{color:var(--faint);font-size:.76rem;margin-top:.35rem} /* middle: bada punch button */ .ph-action{display:flex;flex-direction:column;align-items:center;gap:.55rem} .ph-action form{margin:0} .punch{width:104px;height:104px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center; transition:transform .18s ease,box-shadow .18s ease} .punch svg{width:44px;height:44px;fill:#fff} .punch.go{background:linear-gradient(180deg,#34d47a,#16a34a);box-shadow:0 14px 40px -14px rgba(34,197,94,.85)} .punch.stop{background:linear-gradient(180deg,#ff6b6b,#dc2626);box-shadow:0 14px 40px -14px rgba(239,68,68,.85)} /* shift mukammal — button nahi, sirf nishan (dobara check-in nahi hota) */ .punch.done{background:var(--sunken);border:2px solid var(--line-2);cursor:default} .punch.done svg{fill:none;stroke:var(--chart-worked);stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round;width:40px;height:40px} /* check-in ka waqt abhi nahi hua */ .punch.locked{background:var(--sunken);border:2px dashed var(--line-2);cursor:not-allowed} .punch.locked svg{fill:none;stroke:var(--faint);stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round;width:36px;height:36px} button.punch:hover{transform:translateY(-3px) scale(1.03)} button.punch:active{transform:translateY(0) scale(.98)} .ph-label{font-family:var(--display);font-weight:600;font-size:.98rem} .ph-hint{color:var(--faint);font-size:.76rem} .state-done .ph-state .dot{background:var(--blue-2)} .ph-break{margin-top:.15rem} .btn-sm.warn-btn{background:linear-gradient(180deg,#ffcb70,var(--amber));color:#2a1a00} /* right: status + timer */ .ph-status{text-align:right} .ph-state{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:600; font-size:1.05rem;margin-bottom:.3rem;flex-wrap:wrap;justify-content:flex-end} .ph-state .dot{width:10px;height:10px;border-radius:50%;background:var(--faint);flex:none} .state-in .ph-state .dot{background:var(--chart-worked);box-shadow:0 0 0 4px rgba(34,197,94,.18); animation:pulse 2s ease-in-out infinite} .state-break .ph-state .dot{background:var(--amber);box-shadow:0 0 0 4px rgba(245,158,11,.18)} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}} .ph-timer{font-family:var(--display);font-weight:700;font-size:2.3rem;line-height:1.1; font-variant-numeric:tabular-nums;background:var(--num-grad); -webkit-background-clip:text;background-clip:text;color:transparent} .ph-timer.paused{background:var(--num-grad-warn);-webkit-background-clip:text;background-clip:text;color:transparent} .ph-timer.idle{opacity:.35} .ph-sub{color:var(--muted);font-size:.82rem;margin-top:.15rem} .ph-status .break-box{margin:.8rem 0 0;max-width:none} /* ---------- section bar + tabs ---------- */ .sec-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin:2rem 0 .5rem} .sec-bar.tight{margin:0 0 1rem} .sec-bar h2,.sec-bar h3{margin:0} .tabs{display:inline-flex;gap:.2rem;background:var(--sunken);border:1px solid var(--line); border-radius:11px;padding:.25rem} .tab{padding:.42em 1.1em;border-radius:8px;font-size:.85rem;font-weight:600;color:var(--muted)} .tab:hover{color:var(--text)} .tab.on{background:linear-gradient(180deg,var(--blue-2),var(--blue));color:var(--on-blue)} .range-note{margin-bottom:1rem} .period-nav{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap} .period-nav .cal-nav .btn-sm{padding:.42em .8em} /* ---------- tracked hours cards ---------- */ .track-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.2rem} .track-cards.four{grid-template-columns:repeat(4,1fr)} .tcard{display:flex;align-items:center;gap:1rem;background:var(--panel);border:1px solid var(--line); border-radius:16px;padding:1.2rem 1.3rem} .tc-ico{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:1.15rem} .tcard.worked .tc-ico{background:rgba(34,197,94,.14);color:var(--chart-worked)} .tcard.brk .tc-ico{background:rgba(245,158,11,.14);color:var(--amber)} .tcard.ot .tc-ico{background:rgba(0,174,239,.14);color:var(--blue-2)} .tcard.net .tc-ico{background:rgba(34,197,94,.14);color:var(--chart-worked)} .tcard.leave .tc-ico{background:rgba(0,174,239,.14);color:var(--blue-2)} .tcard.absent .tc-ico{background:rgba(239,68,68,.14);color:var(--err-text)} .tc-n{font-family:var(--display);font-weight:700;font-size:1.55rem;line-height:1.15;font-variant-numeric:tabular-nums} .tc-l{color:var(--muted);font-size:.82rem} /* ---------- chart ---------- */ .chart-panel{padding:1.4rem 1.5rem} .chart-box{position:relative;height:250px} .legend{display:flex;gap:1rem;color:var(--muted);font-size:.8rem;flex-wrap:wrap} .legend span{display:inline-flex;align-items:center;gap:.4rem} .sw{width:10px;height:10px;border-radius:3px;display:inline-block} .sw.worked{background:var(--chart-worked)} .sw.brk{background:var(--chart-break)} .sw.ot{background:var(--chart-ot)} .sw.net{background:var(--chart-net)} .sw.ded{background:var(--chart-ded)} /* ---------- time off / leave ---------- */ .tabs.wide-tabs{margin:1.2rem 0} .tab .badge{margin-left:.4rem;padding:.15em .45em;font-size:.62rem;vertical-align:middle} .check{display:inline-flex;align-items:center;gap:.5rem;font-size:.88rem;color:var(--text); margin:0;padding:.62em .2em;cursor:pointer} .check input[type=checkbox]{width:16px;height:16px;accent-color:var(--blue);cursor:pointer;flex:none} .neg{color:var(--err-text)} tr.row-flag td{background:rgba(245,158,11,.07)} tr.row-flag:hover td{background:rgba(245,158,11,.11)} .bal-row .form-grid{margin-top:.4rem} .bal-big{font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--blue-2);white-space:nowrap} .bal-big.neg{color:var(--err-text)} /* ---------- leave calendar ---------- */ .cal-nav{display:flex;gap:.4rem;flex-wrap:wrap} .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:.45rem} .cal-h{color:var(--faint);font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase; text-align:center;padding:.3rem 0} .cal-d{min-height:86px;background:var(--panel);border:1px solid var(--line);border-radius:11px; padding:.5rem .55rem;display:flex;flex-direction:column;gap:.3rem;align-items:flex-start} .cal-d.empty{background:transparent;border:0;min-height:0} .cal-d.off{opacity:.55} .cal-d.today{border-color:rgba(0,174,239,.55);box-shadow:0 0 0 1px rgba(0,174,239,.22)} .cal-d.pend{border-style:dashed} .cd-n{font-family:var(--display);font-weight:700;font-size:1rem;line-height:1} .cd-t{color:var(--faint);font-size:.68rem;margin-top:auto} .cal-d .pill{font-size:.63rem;padding:.2em .5em;white-space:normal;line-height:1.3} .cal-legend{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:1rem;color:var(--muted);font-size:.8rem} .cal-legend span{display:inline-flex;align-items:center;gap:.4rem} .cal-legend .pill{width:12px;height:12px;padding:0;border-radius:4px;display:inline-block} /* ---------- health check ---------- */ .steps-list{margin:.6rem 0 0 1.2rem;color:var(--muted);font-size:.9rem;line-height:1.9} .steps-list li{padding-left:.2rem} .steps-list code{background:var(--chip-bg);padding:.1em .4em;border-radius:5px;color:var(--blue-2);font-size:.85em} .steps-list b{color:var(--text)} /* ---------- payroll run ---------- */ .steps{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.2rem 0} .stp{display:flex;align-items:center;gap:.55rem;background:var(--panel);border:1px solid var(--line); border-radius:11px;padding:.55rem .9rem;color:var(--muted);font-size:.85rem;font-weight:500} .stp-n{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center; background:var(--chip-bg);color:var(--muted);font-family:var(--display);font-weight:700;font-size:.72rem} .stp.done{color:var(--text)} .stp.done .stp-n{background:var(--chart-worked);color:#04120a} .stp.now{border-color:rgba(0,174,239,.45);box-shadow:0 0 0 1px rgba(0,174,239,.18)} .stp.now .stp-n{background:linear-gradient(180deg,var(--blue-2),var(--blue));color:var(--on-blue)} .pay-table{min-width:1150px} .pay-table td{padding:.55rem .5rem;vertical-align:top} .pay-table th{padding:.7rem .5rem} .pay-table .ded-in{min-width:82px;text-align:right} .pay-table .auto-col{background:var(--hover-soft)} .pay-table tfoot td{border-top:1px solid var(--line-2);border-bottom:0;padding:.8rem .5rem; font-variant-numeric:tabular-nums;background:var(--head-bg)} .pay-table tfoot tr:hover td{background:var(--head-bg)} .pay-table .rem-row td{padding-top:0;border-bottom:1px solid var(--line)} .pay-table .rem-row .mini-in{width:100%;max-width:520px} .pay-table tr.row-locked td{opacity:.7} .row-net.neg{color:var(--err-text)} /* ---------- email ---------- */ textarea{width:100%;background:var(--input-bg);border:1px solid var(--line-2);border-radius:10px; padding:.7em .85em;color:var(--text);font-family:var(--body);font-size:.92rem;line-height:1.6;resize:vertical} textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,174,239,.13)} .form-grid .f.grow-4{grid-column:1/-1} .pick-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.2rem .8rem; max-height:220px;overflow-y:auto;background:var(--sunken);border:1px solid var(--line); border-radius:11px;padding:.6rem .8rem} .pick-list .check{padding:.3em .1em} .smtp-log{background:var(--sunken);border:1px solid var(--line);border-radius:11px;padding:.8rem 1rem; margin-top:1rem;font-family:ui-monospace,Consolas,monospace;font-size:.76rem;line-height:1.6; white-space:pre-wrap;word-break:break-all;max-height:280px;overflow-y:auto;color:var(--muted)} /* ---------- my profile ---------- */ .prof-head{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap} .avatar.xl{width:76px;height:76px;border-radius:22px;font-size:2rem;flex:none} .ph-info{min-width:0;flex:1} .ph-info h2{margin:.1rem 0 .15rem;font-size:1.45rem} .prof-pills{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem} .prof-facts{grid-template-columns:repeat(3,1fr);margin-bottom:.4rem} .prof-facts b{white-space:normal;word-break:break-word} /* ---------- salary report ---------- */ .salary-cta{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;flex-wrap:wrap} .salary-cta h3{margin:0 0 .2rem} .calc-table{width:100%;min-width:0;border-collapse:collapse} .calc-table td{padding:.6rem .2rem;border-bottom:1px solid var(--line);font-size:.9rem} .calc-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .calc-table tr:last-child td{border-bottom:0} .calc-table tr.ded td{color:var(--err-text)} .calc-table tr.sum td{font-weight:700;border-top:1px solid var(--line-2);border-bottom:0;padding-top:.75rem} .calc-table tr.sum.net td{font-family:var(--display);font-size:1.05rem;color:var(--blue-2)} .calc-table tbody tr:hover td{background:transparent} /* ---------- work schedule calendar ---------- */ .sched-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem} .sd-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:.8rem .9rem; display:flex;flex-direction:column;gap:.15rem} .sd-card.off{opacity:.6} .sd-card.today{border-color:rgba(0,174,239,.5);box-shadow:0 0 0 1px rgba(0,174,239,.2)} .sd-dow{color:var(--faint);font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;font-weight:600} .sd-day{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1} .sd-mon{color:var(--muted);font-size:.72rem;margin-top:-.15rem} .sd-body{font-size:.8rem;margin:.4rem 0 .5rem} .sd-card .pill{align-self:flex-start} /* Chart.js na khule to ye saadi bars (CSS only) */ .bars-fallback{position:absolute;inset:0;display:flex;align-items:flex-end;gap:.5rem;padding:.5rem 0 0} .fb-col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;height:100%} .fb-stack{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;min-height:0} .fb-seg{border-radius:4px;min-height:0} .fb-seg.wk{background:var(--chart-worked)} .fb-seg.ot{background:var(--chart-ot)} .fb-seg.brk{background:var(--chart-break)} .fb-seg.net{background:var(--chart-net)} .fb-seg.ded{background:var(--chart-ded)} .fb-lbl{color:var(--chart-tick);font-size:.68rem;text-align:center;padding-top:.35rem; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---------- live timer + break countdown ---------- */ .timer-wrap{margin:1.4rem 0 .4rem} .timer-label{color:var(--faint);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase} .timer{font-family:var(--display);font-weight:700;font-size:3.1rem;line-height:1.1;letter-spacing:-.02em; font-variant-numeric:tabular-nums; background:var(--num-grad);-webkit-background-clip:text;background-clip:text;color:transparent; margin:.15rem 0 .25rem} .timer.paused{background:var(--num-grad-warn);-webkit-background-clip:text;background-clip:text;color:transparent} .timer-sub{color:var(--muted);font-size:.86rem} .break-box{max-width:420px;margin:1.3rem auto .3rem;background:var(--sunken); border:1px solid var(--line-2);border-radius:14px;padding:.85rem 1rem;text-align:left} .break-box.on{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.08)} .break-box.over{border-color:rgba(239,68,68,.55);background:rgba(239,68,68,.08)} .bb-top{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem} .bb-title{color:var(--muted);font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase} .bb-time{font-family:var(--display);font-weight:700;font-size:1.5rem;font-variant-numeric:tabular-nums;color:var(--text)} .break-box.on .bb-time{color:var(--warn-text)} .break-box.over .bb-time{color:var(--err-text)} .bb-bar{height:6px;border-radius:6px;background:var(--track);overflow:hidden;margin:.55rem 0 .45rem} .bb-bar span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--blue-2),var(--blue)); transition:width .4s ease} .break-box.on .bb-bar span{background:linear-gradient(90deg,var(--warn-text),var(--amber))} .break-box.over .bb-bar span{background:linear-gradient(90deg,var(--err-text),var(--red))} .bb-note{color:var(--faint);font-size:.78rem;line-height:1.5} /* ---------- shift bar (dashboard par) ---------- */ .shift-bar{background:linear-gradient(180deg,rgba(0,174,239,.10),rgba(0,174,239,.04)); border:1px solid rgba(0,174,239,.28);border-radius:14px;padding:.9rem 1.1rem;margin:1.2rem 0; display:flex;flex-direction:column;gap:.25rem} .shift-bar>div:first-child{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap} .shift-bar b{font-family:var(--display);font-size:1.02rem} .sb-l{color:var(--faint);font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;font-weight:600} .sb-detail{font-size:.84rem;color:var(--muted)} .sb-detail b{font-family:var(--body);font-size:.84rem;color:var(--text)} .arw{color:var(--blue-2);padding:0 .25rem} .shift-news{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap} .shift-news form{margin:0} .shift-now .shift-big{font-family:var(--display);font-size:1.6rem;font-weight:700; display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:.3rem 0 .4rem} .shift-now .arw{font-size:1.3rem} .shift-note{background:rgba(0,174,239,.09);border:1px solid rgba(0,174,239,.25); border-radius:11px;padding:.75rem .9rem;margin-top:.9rem;font-size:.88rem;line-height:1.7} .prev-box{background:var(--sunken);border:1px solid var(--line-2);border-radius:10px; padding:.6em .8em;font-size:.88rem} /* check-in kab khulega — shift form ke andar live line */ .open-note{background:rgba(0,174,239,.09);border:1px solid rgba(0,174,239,.28);border-radius:10px; padding:.62em .85em;font-size:.86rem;line-height:1.5;min-height:2.6em;display:flex;align-items:center} .ok-txt{color:var(--ok-text);font-size:.82rem} /* ---------- attendance editor ---------- */ .edit-table{min-width:1120px} .shift-cell{white-space:nowrap} .shift-cell .mini-in{display:inline-block;width:80px;min-width:80px;margin-right:.15rem} .nextday{display:inline-block;background:rgba(245,158,11,.16);color:var(--warn-text); border-radius:6px;padding:.05em .4em;margin-left:.25rem} .edit-table td{padding:.4rem .55rem} .edit-table th{padding:.7rem .55rem} .mini-in{width:100%;min-width:96px;padding:.35em .5em;font-size:.82rem;border-radius:8px} .mini-in.narrow{min-width:78px} .mini-in.wide{min-width:150px} .edit-table .row-off td{background:var(--hover-soft);opacity:.55} .edit-table .row-today td{background:rgba(0,174,239,.07)} .edit-table tbody tr:hover td{background:var(--head-bg)} /* ============================================================ SALARY SLIP SHEET (screen + print) ============================================================ */ /* Slip ka kaghaz dono themes mein safed rehta hai (ye chhapne wali cheez hai), sirf uske ird gird ka background theme ke saath badalta hai. */ .slip-body{background:var(--bg-2);padding:0 0 3rem} :root:not([data-theme="light"]) .slip-body{background:#0A0E18} .slip-toolbar{display:flex;justify-content:space-between;gap:1rem;padding:1rem 24px;max-width:820px;margin:0 auto} .sheet{max-width:820px;margin:0 auto;background:#fff;color:#0e1726;border-radius:14px;padding:38px 42px; box-shadow:0 30px 80px -30px rgba(0,0,0,.8);font-size:14px} .sheet-head{display:flex;justify-content:space-between;gap:2rem;align-items:flex-start; border-bottom:3px solid #00AEEF;padding-bottom:18px;margin-bottom:22px} .sh-left{display:flex;flex-direction:column;gap:10px;align-items:flex-start} /* company ka logo — kisi bhi naap ki tasveer poori nazar aati hai */ .sheet-logo{width:auto;height:58px;max-width:230px;object-fit:contain;display:block} .sh-company{font-family:var(--display);font-weight:700;font-size:1.35rem;color:#0b2233;letter-spacing:-.01em} .sh-meta{color:#5b6a7d;font-size:12px;line-height:1.55;margin-top:2px} .sh-right{text-align:right;position:relative} .sh-title{font-family:var(--display);font-weight:700;font-size:1.1rem;color:#00779e;text-transform:uppercase;letter-spacing:.06em} .sh-period{font-weight:600;font-size:15px;margin-top:2px} .sh-no{color:#5b6a7d;font-size:12px} .stamp{display:inline-block;margin-top:8px;border:2px solid;border-radius:6px;padding:.1em .6em; font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;transform:rotate(-4deg)} .stamp.paid{color:#128a45;border-color:#128a45} .stamp.approved{color:#00779e;border-color:#00779e} .stamp.draft{color:#96a1b0;border-color:#96a1b0} .sheet-table .tiny{color:#8c98a8} .sheet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px} .sheet-grid>div{background:#f4f7fa;border:1px solid #e2e8f0;border-radius:9px;padding:8px 11px} .sheet-grid span{display:block;color:#6b7a8d;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em} .sheet-grid b{font-size:13px;word-break:break-word} .sheet-grid .span-2{grid-column:span 2} .bank-grid{margin-bottom:18px} .bank-grid>div{background:#eaf6fb;border-color:#c9e6f3} .sheet-h{font-family:var(--display);font-size:12px;text-transform:uppercase;letter-spacing:.08em; color:#00779e;margin:0 0 8px;padding-bottom:5px;border-bottom:1px solid #dde5ee} .sheet-table{width:100%;min-width:0;border-collapse:collapse;margin-bottom:18px} .sheet-table td{padding:7px 10px;border-bottom:1px solid #eef2f7;font-size:13px;color:#1b2637} .sheet-table td.num{text-align:right;font-variant-numeric:tabular-nums} .sheet-table tr:hover td{background:transparent} .sheet-table tr.sum td{font-weight:700;background:#f4f7fa;border-top:1px solid #cfd9e4;border-bottom:0} .sheet-table .muted{color:#8c98a8} .sheet-two{display:grid;grid-template-columns:1fr 1fr;gap:24px} .net-box{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap; background:linear-gradient(135deg,#00AEEF,#0072B5);color:#fff;border-radius:11px;padding:16px 20px;margin-top:4px} .nb-label{font-family:var(--display);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.06em} .nb-words{font-size:11.5px;opacity:.9} .nb-v{font-family:var(--display);font-weight:700;font-size:1.6rem;font-variant-numeric:tabular-nums} .sheet-remarks{margin-top:14px;font-size:12.5px;color:#41506380} .sheet-remarks b{color:#1b2637} /* signature ki jagah — computer se bani slip par dastkhat nahi lagte */ .no-sign{margin-top:26px;padding:11px 16px;border:1px dashed #c9d4e0;border-radius:9px; background:#f7fafd;color:#5b6a7d;font-size:12.5px;text-align:center} .no-sign b{color:#1b2637} .sheet-foot{margin-top:26px;padding-top:12px;border-top:1px solid #e6ecf3;color:#8c98a8;font-size:11px;text-align:center} /* ---------- print ---------- */ @media print{ @page{size:A4;margin:12mm} body,.slip-body{background:#fff!important;padding:0!important} body::before{display:none} .no-print{display:none!important} .sheet{max-width:none;margin:0;border-radius:0;box-shadow:none;padding:0;font-size:12.5px} .net-box{-webkit-print-color-adjust:exact;print-color-adjust:exact} .sheet-head,.sheet-grid>div,.sheet-table tr.sum td,.stamp{-webkit-print-color-adjust:exact;print-color-adjust:exact} .sheet-two{gap:18px} } /* ============================================================ RESPONSIVE — screen ke naap ke hisaab se ------------------------------------------------------------ Tiers: >1500 bare screen — chaurai barh jaati hai 1280 laptop 1100 chhota laptop / bara tablet 980 TABLET — left menu slide-in ban jaata hai 860 chhota tablet 680 MOBILE 420 chhota mobile ============================================================ */ /* page kabhi daayen-baayen na sarke */ html,body{max-width:100%;overflow-x:hidden} img,svg,canvas{max-width:100%} /* lambi table/chart apni dibbi ke andar sarakti hai, page nahi */ .table-wrap{-webkit-overflow-scrolling:touch} /* ---------- bare screen: jagah ka faida ---------- */ @media(min-width:1500px){ .wrap{max-width:1180px} .wrap.wide{max-width:1500px} .roster-grid{grid-template-columns:repeat(auto-fill,minmax(460px,1fr))} } @media(max-width:1280px){ .stat-row.five{grid-template-columns:repeat(3,1fr)} .roster-grid{grid-template-columns:1fr} .facts{grid-template-columns:repeat(3,1fr)} } @media(max-width:1100px){ .ded-form{grid-template-columns:repeat(3,1fr)} .ded-form .f.grow,.ded-form .f.end{grid-column:span 3;justify-self:stretch} .form-grid{grid-template-columns:repeat(2,1fr)} .stat-row.four{grid-template-columns:repeat(2,1fr)} .track-cards.four{grid-template-columns:repeat(2,1fr)} .prof-facts{grid-template-columns:repeat(2,1fr)} } /* ---- 980px se neeche: TABLET — left menu slide-in ban jaata hai ---- */ @media(max-width:980px){ .mobile-bar{display:flex} .content{margin-left:0} .sidebar{transform:translateX(-100%);transition:transform .22s ease;width:270px; box-shadow:0 0 40px var(--shadow)} body.nav-open .sidebar{transform:translateX(0)} body.nav-open .scrim{display:block} body.nav-open{overflow:hidden} /* sikRa hua menu mobile par bemani hai */ html.nav-collapsed{--side-w:250px} html.nav-collapsed .sb-name, html.nav-collapsed .nvl, html.nav-collapsed .su-txt, html.nav-collapsed .su-arrow, html.nav-collapsed .cl-txt{display:revert} html.nav-collapsed .sidebar{padding:1.1rem .9rem;align-items:stretch} html.nav-collapsed .nv{justify-content:flex-start;padding:.66em .75em;gap:.75rem} html.nav-collapsed .side-brand{justify-content:flex-start} html.nav-collapsed .side-user{justify-content:flex-start} .collapse-btn{display:none} /* theme toggle mobile bar ke saath na takraye */ .theme-toggle{top:10px;right:12px;padding:.35em .7em;font-size:.74rem} .stat-row.five{grid-template-columns:repeat(2,1fr)} } @media(max-width:860px){ /* punch hero: clock ooper, button beech mein, status neeche */ .punch-hero{grid-template-columns:1fr;text-align:center;gap:1.2rem;padding:1.5rem 1.2rem} .ph-status{text-align:center} .ph-state{justify-content:center} .ph-status .break-box{margin-left:auto;margin-right:auto;max-width:420px} .track-cards,.track-cards.two,.track-cards.four{grid-template-columns:1fr} .chart-box{height:230px} .sec-bar{align-items:flex-start} .toolbar,.period-nav{width:100%} .cal-legend{gap:.7rem;font-size:.74rem} } /* ---------- MOBILE ---------- */ @media(max-width:680px){ .wrap{padding:1.2rem 14px 3rem} h1{font-size:1.5rem} h2{font-size:1.12rem;margin:1.6rem 0 .8rem} .stat-row,.stat-row.four,.stat-row.five{grid-template-columns:1fr} .mini{padding:1.1rem} .mini .n{font-size:1.5rem} /* punch hero */ .ph-time{font-size:2rem} .ph-timer{font-size:1.85rem} .punch{width:88px;height:88px} .punch svg{width:36px;height:36px} .btn-row{gap:.5rem} /* tabs + navigation poori chaurai */ .tabs{width:100%;justify-content:center} .tab{flex:1;text-align:center;padding:.45em .5em} .period-nav{flex-direction:column;align-items:stretch;gap:.5rem} .cal-nav{justify-content:center} .quick-links .btn-sm{flex:1 1 auto;justify-content:center} /* forms ek column */ .form-grid,.ded-form{grid-template-columns:1fr} .form-grid .f.grow,.form-grid .f.grow-2,.form-grid .f.grow-4, .ded-form .f.grow,.ded-form .f.end{grid-column:span 1;justify-self:stretch} .form-grid .btn,.btn{width:100%} .filter{width:100%} .filter select,.filter input{flex:1 1 140px;width:auto;min-width:0} .inline-reset{width:100%} .inline-reset input{flex:1;width:auto} .facts,.rc-facts,.prof-facts{grid-template-columns:repeat(2,1fr)} .prof-head{flex-direction:column;text-align:center} .prof-pills{justify-content:center} .pick-list{grid-template-columns:1fr;max-height:200px} /* roster cards */ .rc-top{flex-wrap:wrap} .rc-flags{flex-direction:row;flex-wrap:wrap;align-items:flex-start;width:100%} .rc-actions .btn-sm{flex:1 1 auto;justify-content:center} .sr-head{flex-direction:column;align-items:flex-start} .sr-foot{flex-direction:column;align-items:flex-start} /* leave calendar */ .cal{gap:.2rem} .cal-d{min-height:58px;padding:.3rem .25rem;gap:.15rem} .cal-d .pill{font-size:.52rem;padding:.1em .3em} .cd-n{font-size:.85rem} .cd-t{display:none} .cal-h{font-size:.6rem} .sched-grid{grid-template-columns:repeat(2,1fr)} /* payroll ke kadam */ .steps{gap:.35rem} .stp{flex:1 1 calc(50% - .35rem);font-size:.78rem;padding:.5rem .6rem} /* salary slip */ .slip-toolbar{padding:.8rem 14px} .sheet{padding:20px 16px} .sheet-grid{grid-template-columns:repeat(2,1fr)} .sheet-grid .span-2{grid-column:span 2} .sheet-two{grid-template-columns:1fr;gap:0} .sheet-head{flex-direction:column;gap:14px} .sh-right{text-align:left} .net-box{flex-direction:column;align-items:flex-start;gap:.4rem} .nb-v{font-size:1.35rem} /* email */ .smtp-log{font-size:.7rem} } /* ---------- chhota mobile ---------- */ @media(max-width:420px){ .wrap{padding:1rem 11px 2.5rem} h1{font-size:1.32rem} .theme-toggle .t-to-light,.theme-toggle .t-to-dark{display:none} :root[data-theme="light"] .theme-toggle .ti.t-to-dark{display:inline} .theme-toggle{padding:.4em .55em} .ph-time{font-size:1.75rem} .ph-timer{font-size:1.6rem} .punch{width:78px;height:78px} .punch svg{width:32px;height:32px} .facts,.rc-facts,.prof-facts,.sheet-grid{grid-template-columns:1fr} .sheet-grid .span-2{grid-column:span 1} .sched-grid{grid-template-columns:1fr} .stp{flex:1 1 100%} .tab{font-size:.78rem} .cal-d{min-height:48px} .cal-d .pill{display:none} .avatar.xl{width:64px;height:64px;font-size:1.6rem} } /* ---------- chhoti height (landscape phone) ---------- */ @media(max-height:520px) and (max-width:980px){ .punch-hero{padding:1rem} .punch{width:70px;height:70px} } /* ---------- print: sirf kaghaz wali cheez ---------- */ @media print{ .sidebar,.mobile-bar,.scrim,.theme-toggle,.no-print{display:none!important} .content{margin-left:0} .shell{display:block} }