* { box-sizing: border-box; }
:root { font-family: "Tajawal", Tahoma, sans-serif; color: #1b2938; --teal: #128d84; --line: #e5edef; --muted: #82919a; }
body { min-width: 320px; margin: 0; background: #f5f8f9; } body.modal-open { overflow: hidden; } button, input, select { font: inherit; } button { cursor: pointer; }
.app-sidebar { position: fixed; z-index: 10; top: 0; right: 0; width: 260px; height: 100vh; padding: 28px 18px; color: #f2e9df; background: linear-gradient(165deg,#202733 0%,#16232e 62%,#9e481c 100%); }.sidebar-brand { display:flex; align-items:center; gap:11px; padding:0 9px 38px; color:inherit; text-decoration:none; }.sidebar-brand img { width:40px; height:40px; border:2px solid rgba(239,145,61,.72); border-radius:12px; object-fit:cover; background:#fff; }.sidebar-brand strong,.sidebar-brand small { display:block; }.sidebar-brand strong { color:#fff; font-size:16px; }.sidebar-brand small { margin-top:4px; color:#f1c9a8; font-size:10px; }.sidebar-nav { display:grid; gap:6px; }.sidebar-nav p { margin:0 12px 11px; color:#d8a77d; font-size:10px; font-weight:700; }.sidebar-nav a { display:flex; align-items:center; gap:13px; padding:13px 14px; border-radius:9px; color:#ddc7b4; text-decoration:none; font-size:13px; }.sidebar-nav a:hover,.sidebar-nav a.active { color:#fff; background:rgba(224,103,27,.32); }.sidebar-nav b { display:inline-grid; place-items:center; width:21px; color:#e5a66f; font-size:20px; }.sidebar-toggle { margin:0 0 12px auto; width:36px; height:36px; border:1px solid rgba(255,255,255,.18); border-radius:10px; color:#fff; background:rgba(255,255,255,.08); font-size:18px; }.sidebar-dropdown { display:block; }.sidebar-dropdown summary { display:flex; align-items:center; gap:13px; padding:13px 14px; border-radius:9px; color:#ddc7b4; cursor:pointer; list-style:none; font-size:13px; }.sidebar-dropdown summary::-webkit-details-marker { display:none; }.sidebar-dropdown summary i { margin-right:auto; color:#e5a66f; font-style:normal; }.sidebar-dropdown > div { margin-right:10px; padding-right:14px; border-right:1px solid rgba(229,166,111,.35); }.sidebar-dropdown > div a { padding:8px 12px; color:#e8c8ad; font-size:11px; }
.recruitment-page { width:min(1400px,calc(100% - 320px)); margin-right:290px; padding:42px 30px 60px; }.page-heading { display:flex; align-items:center; justify-content:space-between; min-height:118px; margin:-42px -30px 27px; padding:20px 30px; border-bottom:1px solid var(--line); background:#fff; }.breadcrumb { margin:0 0 9px; color:#9aa7b0; font-size:10px; }.breadcrumb span { padding:0 6px; color:#c5cdd1; }.page-heading h1 { margin:0 0 6px; font-size:21px; }.page-heading p:last-child { margin:0; color:var(--muted); font-size:11px; }.head-actions,.heading-actions { display:flex; align-items:center; gap:10px; }.primary-button { padding:11px 16px; border:0; border-radius:7px; color:#fff; background:#117f79; font-size:11px; box-shadow:0 5px 12px rgba(17,127,121,.16); }.heading-date { min-width:190px; padding:11px 14px; border:1px solid #dceceb; border-radius:12px; background:#f3fbfa; }.heading-date span,.heading-date strong { display:block; }.heading-date span { color:#8a9aa1; font-size:9px; }.heading-date strong { margin-top:3px; font-size:11px; }.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:18px; }.summary-card { display:flex; align-items:center; gap:13px; padding:19px; border:1px solid var(--line); border-radius:10px; background:#fff; }.summary-card span,.summary-card strong { display:block; }.summary-card > div span { color:var(--muted); font-size:11px; }.summary-card strong { margin-top:8px; font-size:25px; }.summary-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; font-size:19px; }.summary-icon.teal { color:#158e84; background:#e2f6f3; }.summary-icon.green { color:#28a783; background:#e6f7ef; }.summary-icon.orange { color:#e6a143; background:#fff3df; }.recruitment-card { padding:24px; border:1px solid var(--line); border-radius:10px; background:#fff; }.section-heading { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; }.section-heading h2 { margin:0 0 7px; font-size:16px; }.section-heading p { margin:0; color:var(--muted); font-size:10px; }.search-box { display:flex; align-items:center; gap:7px; width:230px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; color:#9aa8af; }.search-box input { width:100%; border:0; outline:0; background:transparent; font-size:10px; }.heading-actions select { min-width:130px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; outline:0; color:#70808a; background:#fff; font-size:10px; }.table-wrap { overflow-x:auto; } table { width:100%; min-width:850px; border-collapse:collapse; } th { padding:0 10px 13px; color:#9aa7ae; text-align:right; font-size:10px; font-weight:500; white-space:nowrap; } td { padding:14px 10px; border-top:1px solid #f0f3f4; color:#687985; font-size:10px; white-space:nowrap; } td:first-child { color:#1b2938; font-weight:700; }.assignment-status { padding:5px 9px; border-radius:20px; color:#209b81; background:#e3f7f0; font-size:9px; }.assignment-status.paused { color:#cd8a26; background:#fff3de; }.table-empty { padding:44px 15px; color:var(--muted); text-align:center; font-size:12px; }
.modal-backdrop { position:fixed; z-index:30; inset:0; display:grid; place-items:center; padding:20px; background:rgba(20,31,39,.58); backdrop-filter:blur(5px); }.modal-backdrop[hidden] { display:none; }.assignment-modal { width:min(700px,100%); max-height:calc(100vh - 40px); overflow-y:auto; padding:27px; border-radius:14px; background:#fff; box-shadow:0 24px 70px rgba(13,32,41,.25); }.modal-header { display:flex; justify-content:space-between; gap:18px; margin-bottom:24px; }.modal-kicker { display:block; margin-bottom:7px; color:var(--teal); font-size:10px; font-weight:700; }.modal-header h2 { margin:0 0 7px; font-size:19px; }.modal-header p { margin:0; color:var(--muted); font-size:10px; }.modal-close { width:31px; height:31px; border:0; border-radius:8px; color:#82919a; background:#f2f6f7; font-size:22px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.form-grid label { color:#647780; font-size:10px; }.form-grid input,.form-grid select { display:block; width:100%; margin-top:7px; padding:11px 12px; border:1px solid #e2eaec; border-radius:7px; outline:0; color:#344754; background:#fbfdfd; font-size:11px; }.modal-footer { display:flex; gap:9px; margin-top:25px; padding-top:18px; border-top:1px solid #edf2f3; }.secondary-button { padding:10px 17px; border:1px solid #dfeaec; border-radius:7px; color:#647780; background:#fff; font-size:11px; }.row-actions { display:flex; flex-wrap:wrap; gap:5px; }.row-action { padding:6px 8px; border:1px solid #dfeaec; border-radius:6px; color:#60747d; background:#fff; font-size:10px; }.row-action:hover { border-color:var(--teal); color:var(--teal); }.delete-action:hover { border-color:#c84d4d; color:#c84d4d; }.assignment-details { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.assignment-detail { padding:12px; border:1px solid #edf2f3; border-radius:8px; background:#f8fbfb; }.assignment-detail span,.assignment-detail strong { display:block; }.assignment-detail span { margin-bottom:5px; color:var(--muted); font-size:10px; }.assignment-detail strong { font-size:12px; }
@media(max-width:900px){.app-sidebar{width:74px;padding:20px 10px}.sidebar-brand{justify-content:center;padding:0 0 28px}.sidebar-brand strong,.sidebar-brand small,.sidebar-nav p,.sidebar-nav a span,.sidebar-dropdown summary span,.sidebar-dropdown summary i,.sidebar-dropdown>div{display:none}.sidebar-nav a,.sidebar-dropdown summary{justify-content:center;padding:13px 8px}.recruitment-page{width:calc(100% - 100px);margin-right:84px;padding:25px 15px 45px}.page-heading{margin:-25px -15px 27px;padding:20px 15px}.summary-grid{grid-template-columns:repeat(3,1fr)}.section-heading{display:block}.heading-actions{margin-top:18px}}
@media(max-width:560px){.recruitment-page{width:calc(100% - 88px);margin-right:74px;padding:20px 14px 40px}.page-heading{display:block;margin:-20px -14px 25px;padding:15px 14px}.head-actions{flex-wrap:wrap;margin-top:18px}.heading-date{flex:1 1 100%;min-width:0}.summary-grid{grid-template-columns:1fr;gap:10px}.recruitment-card{padding:16px}.heading-actions{display:grid}.search-box,.heading-actions select{width:100%}.assignment-modal{padding:20px 17px}.form-grid{grid-template-columns:1fr}.modal-footer{flex-direction:column}.modal-footer button{width:100%}}