/* ---------- Company font: Merel (LICENSED version pending) ---------- Merel is a commercial typeface (Inhouse Type / Adobe Fonts) — the earlier free-download copy was unlicensed and has been removed. Wire in ONE of these once you have a proper licence: A) Adobe Fonts web project — add the Adobe gives you to each page's , then the "Merel" already in --font below just works (no @font-face). B) Foundry webfont files — drop Merel-*.woff2 into public/fonts/ and re-add @font-face blocks here, e.g.: @font-face { font-family:"Merel"; font-weight:400; font-display:swap; src:url("/fonts/Merel-Regular.woff2") format("woff2"); } Until then the site falls back to the system font — nothing breaks. */ :root { --navy: #16237a; --royal: #3a63b8; --bright: #1e7fd0; --ink: #1b2433; --muted: #6b7689; --line: #e2e7f0; --bg-1: #eef2fb; --bg-2: #dde6f7; --white: #ffffff; --danger: #c0392b; --danger-bg: #fdecea; --shadow: 0 18px 50px rgba(22, 35, 122, 0.18); --radius: 16px; --font: "Merel", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } /* The `hidden` attribute must always win, even over rules like display:flex (otherwise hidden modals/forms stay visible). */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; font-family: var(--font); color: var(--ink); } /* ---------- Login page ---------- */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(1200px 600px at 50% -10%, var(--bg-2), transparent 60%), linear-gradient(160deg, var(--bg-1) 0%, #ffffff 55%, var(--bg-1) 100%); } .login-card { width: 100%; max-width: 420px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 40px 36px 28px; animation: rise 0.4s ease both; } @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .brand { display: flex; justify-content: center; margin-bottom: 18px; } .brand-logo { width: 220px; max-width: 80%; height: auto; } .login-title { text-align: center; margin: 4px 0 2px; font-size: 26px; font-weight: 700; color: var(--navy); letter-spacing: 0.2px; } .login-subtitle { text-align: center; margin: 0 0 26px; color: var(--muted); font-size: 14px; } .field { margin-bottom: 18px; } .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; color: var(--ink); } .field input { width: 100%; padding: 12px 14px; font-size: 15px; border: 1px solid var(--line); border-radius: 10px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; background: #fbfcfe; } .field input:focus { border-color: var(--royal); box-shadow: 0 0 0 3px rgba(58, 99, 184, 0.15); background: var(--white); } .hint { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); } .password-wrap { position: relative; } .password-wrap input { padding-right: 64px; } .toggle-pw { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--bright); font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: 8px; } .toggle-pw:hover { background: var(--bg-1); } .btn-primary { width: 100%; padding: 13px 16px; font-size: 15px; font-weight: 700; color: var(--white); background: linear-gradient(135deg, var(--navy), var(--bright)); border: none; border-radius: 10px; cursor: pointer; margin-top: 4px; transition: transform 0.05s, filter 0.15s, opacity 0.15s; letter-spacing: 0.3px; } .btn-primary:hover { filter: brightness(1.06); } .btn-primary:active { transform: translateY(1px); } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .error-banner { background: var(--danger-bg); color: var(--danger); border: 1px solid #f5c6c2; border-radius: 10px; padding: 11px 13px; font-size: 13px; margin-bottom: 16px; } .login-footer { margin-top: 24px; text-align: center; font-size: 12px; color: var(--muted); } /* Vendor business & bank details in the contact form */ .vendor-fields { margin: 6px 0 4px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe; } .vendor-fields legend { padding: 0 6px; font-weight: 600; font-size: 13px; color: var(--ink); } .vendor-fields .muted { font-weight: 400; } .vendor-docs { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; } .vendor-docs-head { font-weight: 600; font-size: 13px; margin-bottom: 8px; } .vendor-docs-hint { font-size: 12px; margin: 10px 0 0; } .doc-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; } .doc-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); font-size: 13px; } .doc-list .doc-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--royal); background: #eef2fb; border-radius: 5px; padding: 2px 6px; font-weight: 600; } .doc-list .doc-fname { flex: 1; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .doc-list .doc-empty { color: var(--muted); font-style: italic; border: none; background: none; padding: 0; } .doc-upload-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .doc-upload-row select, .doc-upload-row input[type="file"] { font-size: 13px; } .bc-line .bc-doc-link { margin-right: 10px; } /* ---------- To-Do List ---------- */ .todo-section { margin-top: 22px; } .todo-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .todo-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 10px; background: var(--white); } .todo-item.prio-high { border-left-color: var(--danger); } .todo-item.is-done { background: #f6f8fc; opacity: 0.75; } .todo-check { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; cursor: pointer; font-weight: 400; } .todo-check input { width: 18px; height: 18px; flex: none; } .todo-text { font-size: 15px; color: var(--ink); } .is-done .todo-text { text-decoration: line-through; color: var(--muted); } .todo-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .todo-prio { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 8px; border-radius: 999px; } .todo-prio.prio-high { background: var(--danger-bg); color: var(--danger); } .todo-prio.prio-low { background: #eef2f7; color: var(--muted); } .todo-due { font-size: 12px; font-weight: 600; color: var(--muted); background: #eef2fb; border-radius: 6px; padding: 2px 8px; } .todo-due.due-today { background: #fff3d6; color: #a16207; } .todo-due.due-overdue { background: var(--danger-bg); color: var(--danger); } .todo-assign { font-size: 12px; color: var(--muted); font-style: italic; } .todo-actions { display: flex; gap: 6px; margin-left: auto; } .todo-done .todo-item .todo-prio { display: none; } /* Site-wide copyright footer (author owns the IP) */ .app-footer { margin: 40px auto 20px; padding: 16px; text-align: center; font-size: 12px; color: var(--muted); } .app-footer a { color: inherit; text-decoration: none; } @media print { .app-footer { display: none !important; } } /* ---------- Dashboard ---------- */ .app-page { background: var(--bg-1); min-height: 100vh; } .topbar { background: var(--white); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; } .topbar img { height: 40px; } .topbar-right { display: flex; align-items: center; gap: 14px; } .user-chip { text-align: right; line-height: 1.25; } .user-chip .name { font-weight: 600; font-size: 14px; color: var(--ink); } .user-chip .role { font-size: 12px; color: var(--bright); font-weight: 600; } .btn-ghost { border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: 9px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; } .btn-ghost:hover { background: var(--bg-1); } .container { max-width: 960px; margin: 0 auto; padding: 32px 24px; } .welcome-h { font-size: 24px; color: var(--navy); margin: 0 0 4px; } .welcome-sub { color: var(--muted); margin: 0 0 28px; } /* ---------- Function tiles (coloured squares) ---------- */ .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; } .tile { position: relative; aspect-ratio: 1 / 1; border: none; border-radius: 16px; cursor: pointer; color: #fff; background: var(--tile-color, var(--royal)); background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.14)); box-shadow: 0 10px 24px rgba(22, 35, 122, 0.16); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; gap: 10px; transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease; } .tile:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(22, 35, 122, 0.26); filter: brightness(1.05); } .tile:active { transform: translateY(-1px); } .tile:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.85); outline-offset: 3px; } .tile-title { font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: 0.2px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } .tile-tags { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; opacity: 0.9; } /* Count badge (e.g. Payments awaiting the CEO/DCEO) shown on a tile. */ .tile-badge { position: absolute; top: 10px; right: 10px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: #e11d48; color: #fff; font-size: 13px; font-weight: 800; line-height: 24px; text-align: center; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); } /* Voided payment voucher banner. */ .void-banner { background: #fdecec; border: 1px solid #e0a3a3; color: #b00; font-weight: 800; letter-spacing: 1px; text-align: center; padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; } /* Payment-voucher line total under the items editor. */ .pv-total-row { margin-top: 8px; text-align: right; font-size: 14px; } .pv-total-row strong { color: var(--navy); } /* HR landing cards */ .hr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 8px; } .hr-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--white); text-decoration: none; color: var(--ink); border-left: 6px solid var(--c, #2c3e8f); box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease; } a.hr-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16,24,45,.12); } .hr-card-title { font-size: 17px; font-weight: 800; color: var(--navy); } .hr-card-sub { font-size: 12.5px; color: var(--muted); } .hr-card-soon { opacity: .6; cursor: default; } /* Onboarding checklist */ .onb-req { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: #fbfcfe; } .onb-req .req-label { flex: 1; font-weight: 600; font-size: 13px; } .onb-req a.req-link { color: var(--royal); text-decoration: none; } .onb-req a.req-link:hover { text-decoration: underline; } .onb-req .req-status { font-size: 12px; } .onb-ok { color: #1a8a4f; font-weight: 700; } .onb-miss { color: #b45309; font-weight: 700; } .onb-na { color: #6b7689; font-weight: 700; } .onb-actions { display: flex; gap: 6px; align-items: center; } .onb-group-head { margin: 12px 0 6px; font-size: 13px; color: var(--navy); border-bottom: 1px dashed var(--line); padding-bottom: 5px; } .forms-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; } .token-ref { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: #f0f3f9; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: #33507e; line-height: 1.9; } .token-ref code { background: #dfe7f5; border-radius: 4px; padding: 1px 5px; cursor: pointer; } .form-tmpl textarea { width: 100%; min-height: 220px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; resize: vertical; line-height: 1.6; } .tmpl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .tmpl-cols label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; color: var(--navy); } @media (max-width: 720px) { .tmpl-cols { grid-template-columns: 1fr; } } /* Search bar (e.g. Outgoing Register). */ .filter-row { margin: 14px 0 10px; } .search-input { width: 100%; max-width: 420px; font-size: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; font-family: inherit; } .search-input:focus { outline: none; border-color: var(--royal, #2a6db0); } .empty-state { background: var(--white); border: 1px dashed var(--line); border-radius: 12px; padding: 28px; text-align: center; color: var(--muted); } /* ---------- Topbar extras ---------- */ .topbar-brand { display: inline-flex; } .back-link { display: inline-block; margin-bottom: 12px; color: var(--bright); text-decoration: none; font-size: 13px; font-weight: 600; } .back-link:hover { text-decoration: underline; } /* ---------- Notifications ---------- */ .notif { position: relative; } .notif-bell { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; font-size: 16px; cursor: pointer; line-height: 1; } .notif-bell:hover { background: var(--bg-1); } .notif-count { position: absolute; top: -6px; right: -6px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; } .notif-panel { position: absolute; right: 0; top: 46px; width: 340px; max-width: 86vw; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); z-index: 50; overflow: hidden; } .notif-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); } .notif-readall { background: none; border: none; color: var(--bright); font-size: 12px; font-weight: 600; cursor: pointer; } .notif-list { max-height: 360px; overflow-y: auto; } .notif-empty { padding: 22px; text-align: center; color: var(--muted); font-size: 13px; } .notif-item { padding: 12px 14px; border-bottom: 1px solid var(--line); } .notif-item.unread { background: #f3f7ff; } .notif-title { font-size: 13px; font-weight: 700; color: var(--ink); } .notif-body { font-size: 12px; color: var(--muted); margin-top: 2px; } .notif-when { font-size: 11px; color: #9aa3b2; margin-top: 4px; } /* ---------- Document table ---------- */ .table-wrap { background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; overflow-x: auto; } .doc-table { width: 100%; border-collapse: collapse; font-size: 14px; } .doc-table th { text-align: left; padding: 13px 16px; background: #f6f8fc; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--line); } .doc-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; } .doc-table tr:last-child td { border-bottom: none; } .doc-table tr.row-click { cursor: pointer; } .doc-table tr.row-click:hover { background: #f7faff; } /* ---- Offboarding case page ---- */ .ob-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; } @media (max-width: 900px) { .ob-grid { grid-template-columns: 1fr; } } .ob-banner { border-radius: 10px; padding: 10px 14px; margin: 10px 0 4px; font-size: 13px; border: 1px solid var(--line); } .ob-b-draft { background: #fff7ed; border-color: #f4c98a; color: #92500f; } .ob-b-pending { background: #fef9c3; border-color: #e6cf5a; color: #825e05; } .ob-b-approved { background: #ecfdf5; border-color: #86e0b8; color: #0b6b45; } .ob-b-rejected { background: #fef2f2; border-color: #f1a3a3; color: #a11b1b; } .ob-b-done { background: #eef2ff; border-color: #b4c0ee; color: #2c3e8f; } .ob-check { display: flex; flex-direction: row; align-items: center; gap: 8px; } .ob-check input { width: auto; } .ob-preview-sec { position: sticky; top: 84px; } .sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; } .sp-tile { background: var(--bg-1); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; text-align: center; } .sp-lbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; } .sp-val { font-size: 17px; font-weight: 800; color: var(--ink); } .sp-sub { font-size: 10.5px; color: var(--muted); } .sp-lines { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .sp-line { display: flex; justify-content: space-between; padding: 7px 12px; border-bottom: 1px solid var(--line); font-size: 13px; } .sp-line:last-child { border-bottom: none; } .sp-line .neg { color: var(--danger); } .sp-net { background: #eef2ff; font-weight: 800; } .ob-actions { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; } .ob-sub { font-size: 13px; font-weight: 800; color: var(--ink); margin: 0 0 8px; } .ob-note input { width: 100%; } .btn-block { display: block; text-align: center; margin: 6px 0; } .doc-name { font-weight: 600; color: var(--ink); } .doc-sub { font-size: 12px; color: var(--muted); } .muted { color: var(--muted); } .muted-cell { padding: 26px; text-align: center; color: var(--muted); } .actions-col { white-space: nowrap; } .cat { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.4px; } .cat.license { background: #e7f1fb; color: #1f5fb0; } .cat.legal { background: #eee9f7; color: #6c3fb0; } /* Leave / vacation summary tiles */ .leave-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 8px 0 20px; } .leave-stat { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; } .leave-stat .ls-label { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; } .leave-stat .ls-value { font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1.15; margin-top: 4px; } .leave-stat .ls-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; } .leave-stat.accent { border-left: 4px solid var(--c, #0f766e); } .leave-legend { font-size: 12px; color: var(--muted); margin: 0 0 16px; } .type-annual { background: #e7f1fb; color: #1f5fb0; } .type-sick { background: #fdeaea; color: #c0392b; } .type-unpaid { background: var(--bg-2); color: var(--muted); } .type-other { background: #eee9f7; color: #6c3fb0; } /* Users' Admin — privileges matrix */ .priv-fn { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; } .priv-fn-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .priv-fn-name { font-weight: 800; color: var(--navy); border-left: 4px solid var(--c, #556); padding-left: 8px; } .priv-acts { display: flex; flex-wrap: wrap; gap: 6px 18px; } .priv-act { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; } .priv-act input { width: auto; margin: 0; } .priv-quick { font-size: 12px; color: var(--muted); } .link-btn { background: none; border: 0; color: var(--royal); cursor: pointer; font-size: 12px; padding: 0; font-weight: 600; } .link-btn:hover { text-decoration: underline; } .badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; } .badge-ok { background: #e6f6ec; color: #1f8a4c; } .badge-warn { background: #fef3e0; color: #b9760f; } .badge-danger { background: var(--danger-bg); color: var(--danger); } .btn-primary.btn-danger { background: var(--danger); } .badge-muted { background: var(--bg-2); color: var(--muted); } .row-btn { border: 1px solid var(--line); background: var(--white); color: var(--navy); border-radius: 8px; padding: 6px 11px; font-size: 12px; font-weight: 600; cursor: pointer; margin-left: 6px; } .row-btn:first-child { margin-left: 0; } .row-btn:hover { background: var(--bg-1); border-color: var(--royal); } .row-btn-danger { color: var(--danger); } .row-btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); } /* Payment terms section + due highlights */ .pt-title { margin: 18px 0 4px; font-size: 14px; color: var(--navy); border-top: 1px solid var(--line); padding-top: 14px; } .payment-terms textarea { font-size: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfe; font-family: inherit; resize: vertical; } .pay-overdue { color: var(--danger); font-weight: 700; } /* ---------- Upload card / form ---------- */ .upload-card { margin-bottom: 20px; } .btn-inline { width: auto; display: inline-block; padding: 10px 18px; } .upload-form { margin-top: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 20px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-grid label { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; gap: 6px; color: var(--ink); } .form-grid label.full { grid-column: 1 / -1; } .form-grid label.chk { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; } .form-grid label.chk input { width: auto; } .onb-actions .chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; } .form-grid input, .form-grid select, .form-grid textarea { font-size: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfe; font-weight: 400; font-family: inherit; } .form-grid textarea { resize: vertical; min-height: 68px; } .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline: none; border-color: var(--royal); } .form-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; } .form-actions .btn-primary, .form-actions .btn-ghost { width: auto; } .form-msg { font-size: 13px; } .form-msg.error { color: var(--danger); } .form-msg.ok { color: #1f8a4c; } /* ---------- Contacts toolbar ---------- */ .contacts-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .contacts-toolbar #search { flex: 1; min-width: 220px; font-size: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfe; } .contacts-toolbar select { font-size: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfe; } .contacts-toolbar #search:focus, .contacts-toolbar select:focus { outline: none; border-color: var(--royal); } .container-wide { max-width: 1320px; } /* ---------- Contacts table ---------- */ .contacts-table { min-width: 900px; } .contacts-table th, .contacts-table td { padding: 11px 8px; } .contacts-table th:first-child, .contacts-table td:first-child { padding-left: 16px; } .contacts-table th:last-child, .contacts-table td:last-child { padding-right: 16px; } .contacts-table th { white-space: nowrap; } .contacts-table td { white-space: nowrap; vertical-align: middle; } .contacts-table tbody tr { transition: background 0.12s ease; } .contacts-table tbody tr:hover { background: #f7faff; } .contacts-table .col-type { width: 1%; } .contacts-table .col-company { white-space: normal; min-width: 140px; max-width: 190px; } .contacts-table .col-company .doc-name { line-height: 1.3; } .contacts-table .col-name .cn-en { font-weight: 600; color: var(--ink); } .contacts-table .col-name .cn-ar { font-size: 15px; color: var(--muted); font-weight: 400; margin-top: 3px; text-align: center; } .contacts-table .col-phone { font-variant-numeric: tabular-nums; width: 1%; } .contacts-table .col-phone .ph-num { display: block; white-space: nowrap; } .contacts-table .col-phone .ph-ext { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; } .contacts-table .col-job { white-space: normal; min-width: 140px; max-width: 200px; line-height: 1.35; font-size: 13px; } .contacts-table .actions-col .row-btn { padding: 5px 9px; margin-left: 4px; } /* ---------- Pagination ---------- */ .pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 18px; flex-wrap: wrap; } .page-btn { min-width: 36px; padding: 7px 11px; border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; } .page-btn:hover:not(:disabled):not(.page-btn-current) { background: var(--bg-1); border-color: var(--royal); } .page-btn-current { background: var(--royal); border-color: var(--royal); color: #fff; cursor: default; } .page-btn:disabled { opacity: 0.45; cursor: default; } .page-gap { padding: 0 4px; color: var(--muted); } .type-field { display: flex; gap: 8px; align-items: stretch; } .type-field .type-select { flex: 1; min-width: 0; } .add-type-btn { flex: none; border: 1px solid var(--line); background: #fbfcfe; color: var(--royal); border-radius: 9px; padding: 0 12px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; } .add-type-btn:hover { background: var(--bg-1); border-color: var(--royal); } .contacts-toolbar .toolbar-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .contact-link { color: var(--royal); text-decoration: none; } .contact-link:hover { text-decoration: underline; } /* ---------- Business card ---------- */ .modal-card { max-width: 420px; } .business-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--white); box-shadow: 0 2px 10px rgba(16,24,45,0.06); } .bc-top { background: var(--navy, #16235a); color: #fff; padding: 20px 22px; position: relative; } .bc-top .bc-logo { position: absolute; top: 16px; right: 18px; height: 26px; opacity: 0.9; } .business-card .bc-name { font-size: 21px; font-weight: 700; margin: 0; color: #fff; } .bc-arabic { font-size: 15px; opacity: 0.92; margin-top: 2px; } .bc-job { font-size: 13px; opacity: 0.85; margin-top: 6px; } .bc-type { display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 700; background: rgba(255,255,255,0.16); padding: 3px 10px; border-radius: 999px; } .bc-body { padding: 16px 22px 20px; } .bc-company { font-weight: 700; color: var(--navy, #16235a); margin-bottom: 12px; } .bc-line { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; } .bc-line:first-of-type { border-top: none; } .bc-line .bc-label { width: 74px; flex: none; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .bc-line a { color: var(--royal); text-decoration: none; } .bc-note { margin-top: 12px; font-size: 13px; color: var(--muted); } /* Print: show only the business card */ @media print { body.app-page > .topbar, body.app-page > .container { display: none !important; } #card-modal { position: static; background: none; padding: 0; display: block; } #card-modal[hidden] { display: none !important; } #card-modal .modal { box-shadow: none; max-width: none; padding: 0; } .card-actions, #card-share-menu { display: none !important; } .business-card { border: none; box-shadow: none; } } /* ---------- HR ---------- */ .hr-table { min-width: 1080px; } .hr-table th, .hr-table td { padding: 11px 10px; white-space: nowrap; vertical-align: middle; } .hr-table th:first-child, .hr-table td:first-child { padding-left: 16px; } .hr-table tbody tr { transition: background 0.12s ease; } .hr-table tbody tr:hover { background: #f7faff; } .hr-table .col-name { font-weight: 600; color: var(--ink); } .hr-table .col-arabic { color: var(--ink); text-align: right; } .modal-lg { max-width: 760px; } .modal-md { max-width: 560px; } .split-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .split-head .btn-primary { width: auto; align-self: center; } .req-tag { display: inline-block; font-size: 10px; font-weight: 700; color: var(--danger); background: var(--danger-bg); padding: 1px 6px; border-radius: 6px; vertical-align: middle; } .staff-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-left: auto; } .staff-actions .btn-inline { width: auto; padding: 7px 12px; } .form-sec { grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--navy); border-bottom: 1px solid var(--line); padding-bottom: 5px; margin-top: 20px; } .form-grid > .form-sec:first-child { margin-top: 4px; } .emp-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin: 10px 0 6px; } .ed-sec { grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--navy); border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-top: 12px; } .ed-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid #f0f3f8; font-size: 13px; } .ed-label { color: var(--muted); } .ed-val { font-weight: 600; text-align: right; } .ed-gross { grid-column: 1 / -1; background: #f7f9fd; padding: 8px 10px; border-radius: 8px; border: none; margin-top: 4px; } .ed-gross .ed-val { color: var(--navy); font-size: 15px; } /* ---------- Procurement ---------- */ .po-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; } .po-panel { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; margin-bottom: 20px; } .po-panel .section-h { margin-top: 0; } .po-sub { font-size: 14px; color: var(--navy); margin: 18px 0 6px; } .items-table { margin-bottom: 8px; } .items-table .num-col { width: 130px; } .items-table input { width: 100%; font-size: 14px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; } .items-table td.it-amount { font-weight: 600; text-align: right; } th.num-col, td.num-col { text-align: right; } .terms-check { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; } .term-item { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; } .term-item input { margin-top: 2px; } .quote-form { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; } .waiver-row { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .waiver-check { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink); } .approvals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .appr { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } .appr-role { font-size: 12px; font-weight: 700; color: var(--navy); } .appr-name { font-size: 13px; } .issue-reqs { margin: 14px 0 0; padding: 12px 16px 12px 30px; background: #fdf6e9; border: 1px solid #e7c98a; border-radius: 9px; } .issue-reqs li { font-size: 13px; color: #8a5a12; margin: 3px 0; } .issue-reqs li.req-head { list-style: none; margin-left: -14px; font-weight: 700; } .issue-actions { margin-top: 16px; gap: 10px; } .issue-actions .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .terms-manage { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; max-height: 320px; overflow: auto; } .term-manage-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; } .term-add { display: flex; gap: 8px; margin: 12px 0; } .term-add input { flex: 1; font-size: 14px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; } .term-add-col { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; } .term-add-col textarea { width: 100%; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; font-family: inherit; resize: vertical; } .term-manage-row span:first-child { flex: 1; white-space: normal; line-height: 1.4; } .term-manage-row .tm-actions { display: flex; gap: 6px; flex: none; } .pt-select { width: 100%; } .po-panel .form-grid select.pt-select { min-height: 40px; } td.c, th.c { text-align: center; } @media (max-width: 640px) { .approvals { grid-template-columns: 1fr; } } /* ---------- Sections ---------- */ .doc-section { margin-bottom: 28px; } .section-h { font-size: 16px; color: var(--navy); margin: 0 0 12px; display: flex; align-items: baseline; gap: 8px; } .section-sub { font-size: 13px; font-weight: 400; } .section-count { font-size: 13px; color: var(--muted); font-weight: 600; } .doc-sub.num { font-size: 12px; } /* ---------- Modal ---------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(16, 24, 45, 0.45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; } .modal { background: var(--white); border-radius: 14px; padding: 24px; width: 100%; max-width: 480px; box-shadow: var(--shadow); max-height: calc(100vh - 40px); overflow-y: auto; /* never taller than the screen */ } .modal.modal-sm { max-width: 380px; } .modal h3 { margin: 0 0 6px; color: var(--navy); } /* Long forms (e.g. HR): keep the title and the Save/Cancel bar visible while scrolling. */ .modal-lg h3 { position: sticky; top: -24px; background: var(--white); padding-top: 4px; z-index: 1; } .modal-lg .form-actions { position: sticky; bottom: -24px; background: var(--white); margin: 12px -24px -24px; padding: 14px 24px; border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; } .small { font-size: 12px; margin-top: 12px; } /* Share options */ .share-options { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 4px; } .share-opt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; } .share-opt span { font-size: 18px; } .share-opt:hover { background: var(--bg-1); border-color: var(--royal); } @media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } } /* Candidate self-intake (Step 1) */ .intake-status { margin: 4px 0 12px; } .intake-linkbox { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .intake-linkbox input { flex: 1 1 320px; min-width: 220px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-1); font-family: monospace; font-size: 13px; } .intake-file { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; margin-right: 6px; font-size: 13px; } /* Fixed Assets */ .inline-add { display: flex; gap: 6px; align-items: center; } .inline-add select { flex: 1; } .dep-out { grid-column: 1 / -1; display: flex; gap: 24px; flex-wrap: wrap; background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; } .dep-out > div { display: flex; flex-direction: column; } .dep-out strong { font-size: 16px; } .link-btn { background: none; border: none; color: var(--royal); cursor: pointer; font-size: 12px; padding: 0 4px; } .link-btn:hover { text-decoration: underline; } /* Company landing — 'coming soon' tile */ .tile-soon { opacity: 0.72; } .tile-soon .tile-tags { font-style: italic; }