/* Khalid Networks v12.8 — Staff profile/editor + staff portal experience */

/* ===== Admin: Manage Staff Profile ===== */
#work-dialog.staff-profile-dialog{width:min(1180px,calc(100vw - 32px))!important;max-width:1180px!important;max-height:92vh!important}
#work-dialog.staff-profile-dialog form{padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;max-height:92vh!important}
#work-dialog.staff-profile-dialog .work-dialog-titlebar{flex:0 0 auto!important}
#work-dialog.staff-profile-dialog #work-fields{padding:0!important;overflow:hidden!important;flex:1 1 auto!important;min-height:0!important}
#work-dialog.staff-profile-dialog #work-fields>.kn-staff-editor{display:grid!important;grid-template-columns:190px minmax(0,1fr)!important;width:100%!important;height:100%!important;min-height:610px!important;background:#f7f9fd!important}
#work-dialog.staff-profile-dialog .kn-staff-tabs{position:static!important;inset:auto!important;width:auto!important;min-width:0!important;height:auto!important;display:flex!important;flex-direction:column!important;gap:6px!important;padding:18px 12px!important;background:#fff!important;border:0!important;border-right:1px solid #e5eaf3!important;overflow:auto!important}
#work-dialog.staff-profile-dialog .kn-staff-tabs button{display:flex!important;align-items:center!important;gap:10px!important;width:100%!important;min-height:44px!important;padding:10px 12px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:#4d5a73!important;text-align:left!important;white-space:normal!important;line-height:1.2!important}
#work-dialog.staff-profile-dialog .kn-staff-tabs button:hover{background:#f1f5ff!important;color:#2449d8!important}
#work-dialog.staff-profile-dialog .kn-staff-tabs button.active{background:linear-gradient(135deg,#eef3ff,#f5f0ff)!important;color:#2456e8!important;box-shadow:inset 3px 0 #4f6df5!important}
#work-dialog.staff-profile-dialog .kn-staff-editor-main{padding:16px!important;overflow:auto!important;min-width:0!important;background:#f7f9fd!important}
#work-dialog.staff-profile-dialog .kn-staff-summary{display:flex!important;align-items:center!important;gap:12px!important;padding:4px 4px 14px!important;margin-bottom:0!important;border:0!important;background:transparent!important}
#work-dialog.staff-profile-dialog .kn-staff-avatar{flex:0 0 54px!important;width:54px!important;height:54px!important;border-radius:50%!important;background:linear-gradient(135deg,#4f7cff,#6b4cf6)!important;color:#fff!important;display:grid!important;place-items:center!important;font-size:19px!important;font-weight:800!important;box-shadow:0 8px 22px rgba(79,108,245,.24)!important}
#work-dialog.staff-profile-dialog .kn-active-pill{margin-left:auto!important}

.kn-staff-sections{display:grid!important;gap:12px!important}
.kn-editor-card{background:#fff!important;border:1px solid #e1e7f1!important;border-radius:14px!important;padding:14px!important;box-shadow:0 8px 24px rgba(30,48,84,.05)!important;scroll-margin-top:12px!important;min-width:0!important}
.kn-editor-card:hover{box-shadow:0 12px 30px rgba(47,82,160,.09)!important;border-color:#d7e0f3!important}
.kn-editor-card h4{margin:0 0 12px!important;font-size:14px!important;color:#16233f!important}
.kn-editor-card .form-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.kn-editor-card label{min-width:0!important}
.kn-editor-card input,.kn-editor-card select,.kn-editor-card textarea{width:100%!important;max-width:none!important;box-sizing:border-box!important}

#kn-section-villages .kn-village-tools-pro{display:grid!important;grid-template-columns:minmax(220px,1fr) auto auto!important;gap:8px!important;margin-bottom:10px!important}
#kn-section-villages .kn-selected-villages{display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin:0 0 10px!important;min-height:0!important}
#kn-section-villages .kn-selected-villages span{display:inline-flex!important;align-items:center!important;max-width:100%!important;padding:5px 8px!important;border-radius:999px!important;background:#edf3ff!important;color:#40516f!important;font-size:11px!important;white-space:normal!important;overflow-wrap:anywhere!important}
#kn-section-villages .kn-village-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;max-height:280px!important;overflow:auto!important;padding:8px!important;border:1px solid #e7ebf3!important;border-radius:11px!important;background:#fbfcff!important}
#kn-section-villages .kn-village-option{display:grid!important;grid-template-columns:20px minmax(0,1fr) auto!important;align-items:start!important;gap:7px!important;min-width:0!important;padding:9px!important;border:1px solid #e8edf5!important;border-radius:9px!important;background:#fff!important;font-weight:500!important;color:#34415c!important;line-height:1.3!important}
#kn-section-villages .kn-village-option:hover{border-color:#bfcdf0!important;background:#f7f9ff!important}
#kn-section-villages .kn-village-option input{width:16px!important;height:16px!important;margin:1px 0 0!important}
#kn-section-villages .kn-village-option span{display:block!important;min-width:0!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere!important;word-break:normal!important}
#kn-section-villages .kn-village-option small{font-size:9px!important;color:#ef5555!important;white-space:nowrap!important;margin-top:1px!important}

#kn-section-tasks .kn-task-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
#kn-section-tasks .kn-task-card{position:relative!important;display:grid!important;grid-template-columns:42px minmax(0,1fr) 42px!important;align-items:start!important;gap:10px!important;min-width:0!important;min-height:118px!important;padding:12px!important;border-radius:12px!important;border:1px solid #e0e7f1!important;background:#fff!important;overflow:hidden!important}
#kn-section-tasks .kn-task-card.green{background:linear-gradient(135deg,#f1fff7,#f8fffb)!important;border-color:#bfead0!important}
#kn-section-tasks .kn-task-card.blue{background:linear-gradient(135deg,#f2f7ff,#f9fbff)!important;border-color:#c7d9fb!important}
#kn-section-tasks .kn-task-card.orange{background:linear-gradient(135deg,#fff7f2,#fffaf7)!important;border-color:#ffd4c1!important}
#kn-section-tasks .kn-task-icon{display:grid!important;place-items:center!important;width:38px!important;height:38px!important;border-radius:10px!important;background:#ffffffc9!important;font-size:17px!important}
#kn-section-tasks .kn-task-copy{display:block!important;min-width:0!important;padding-top:1px!important}
#kn-section-tasks .kn-task-copy b{display:block!important;font-size:12px!important;line-height:1.3!important;color:#182640!important;white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important}
#kn-section-tasks .kn-task-copy small{display:block!important;margin-top:5px!important;font-size:10px!important;line-height:1.45!important;color:#62708a!important;white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important}
#kn-section-tasks .kn-switch{align-self:start!important;margin-top:2px!important}
#kn-section-tasks .kn-task-card>input{position:absolute!important;opacity:0!important;pointer-events:none!important}

#kn-section-account .kn-zone-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
#kn-section-account .kn-zone-option{display:flex!important;align-items:center!important;gap:8px!important;padding:9px!important;border:1px solid #e7ebf3!important;border-radius:9px!important;background:#fbfcff!important}
#kn-section-account .kn-zone-option input{width:16px!important;height:16px!important}

#work-dialog.staff-profile-dialog .toolbar{flex:0 0 auto!important;margin:0!important;padding:12px 16px!important;border-top:1px solid #e5eaf3!important;background:#fff!important}
#work-dialog.staff-profile-dialog .kn-editor-hint{display:none!important}

/* ===== Staff portal ===== */
.staff-app-body{background:radial-gradient(circle at 8% 0,#dff5ff 0,transparent 31%),radial-gradient(circle at 95% 10%,#eee4ff 0,transparent 31%),#f4f7fb!important}
.staff-app-shell{max-width:1180px!important;width:min(1180px,100%)!important}
.staff-app-card{border:1px solid #e0e7f2!important;border-radius:22px!important;box-shadow:0 22px 60px rgba(29,50,91,.12)!important;background:#fff!important;overflow:hidden!important}
.staff-app-brand{display:flex!important;align-items:center!important;justify-content:space-between!important;background:linear-gradient(135deg,#f8fbff,#f7f5ff)!important;margin:-28px -28px 0!important;padding:18px 28px!important;border-bottom:1px solid #e5eaf3!important}
.staff-app-brand::before{content:"";display:block;width:180px;height:54px;background:url('khalid-networks-logo.png') left center/contain no-repeat}
.staff-app-brand .brand-mark,.staff-app-brand>div{display:none!important}
.staff-app-head{display:grid!important;grid-template-columns:84px minmax(0,1fr)!important;gap:16px!important;align-items:center!important;padding:24px 0 12px!important}
.staff-hero-avatar{width:76px;height:76px;border-radius:20px;background:linear-gradient(135deg,#3158e7,#7c4df3);display:grid;place-items:center;color:#fff;font-size:24px;font-weight:800;overflow:hidden;box-shadow:0 12px 25px rgba(70,78,225,.22)}
.staff-hero-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.staff-app-head h1{margin:4px 0!important;font-size:28px!important;color:#12203a!important}
.staff-app-head p{margin:0!important;color:#65718a!important}
.staff-message{border-radius:12px!important;background:linear-gradient(135deg,#eef4ff,#f4f0ff)!important;border-color:#dce4ff!important;color:#4653a8!important}
.staff-session-bar{padding:8px 0!important}
.duty-details{background:#fbfcff!important;border-radius:12px!important}
.workspace-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}
.workspace-stats>div{position:relative!important;overflow:hidden!important;padding:17px!important;border-radius:14px!important;background:#fff!important;transition:.18s ease!important}
.workspace-stats>div:nth-child(1){border-top:3px solid #3a7bfd!important;background:linear-gradient(180deg,#f4f8ff,#fff)!important}
.workspace-stats>div:nth-child(2){border-top:3px solid #ef5b62!important;background:linear-gradient(180deg,#fff5f6,#fff)!important}
.workspace-stats>div:nth-child(3){border-top:3px solid #8b5cf6!important;background:linear-gradient(180deg,#f8f5ff,#fff)!important}
.workspace-stats>div:nth-child(4){border-top:3px solid #16b979!important;background:linear-gradient(180deg,#f1fff9,#fff)!important}
.workspace-stats>div:hover{transform:translateY(-2px)!important;box-shadow:0 12px 28px rgba(43,70,122,.10)!important}
#staff-work h2{margin-top:24px!important;color:#14223d!important}
#staff-work .toolbar{display:flex!important;gap:7px!important;flex-wrap:wrap!important;padding:6px!important;background:#f2f5fb!important;border-radius:12px!important;width:max-content!important;max-width:100%!important}
#staff-work .toolbar button{min-height:38px!important;padding:8px 13px!important;border:0!important;background:transparent!important;color:#5b6881!important;border-radius:9px!important;font-weight:700!important}
#staff-work .toolbar button:hover{background:#fff!important;color:#2f55d8!important;box-shadow:0 5px 14px rgba(42,73,141,.09)!important}
#staff-work .toolbar button.primary{background:linear-gradient(135deg,#3158e7,#6c55f5)!important;color:#fff!important;border:0!important;box-shadow:0 7px 16px rgba(71,76,224,.22)!important}
#staff-work .workflow-card{border-radius:16px!important;border:1px solid #e0e7f1!important;box-shadow:0 10px 28px rgba(29,50,91,.06)!important;background:#fff!important}
.staff-profile-card{display:grid!important;grid-template-columns:100px minmax(0,1fr)!important;gap:18px!important;align-items:start!important}
.staff-profile-photo{width:92px;height:92px;border-radius:20px;background:linear-gradient(135deg,#3158e7,#7b4ff3);display:grid;place-items:center;color:#fff;font-size:28px;font-weight:800;overflow:hidden;box-shadow:0 12px 25px rgba(64,78,214,.20)}
.staff-profile-photo img{width:100%;height:100%;object-fit:cover;display:block}
.staff-photo-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.staff-photo-actions label,.staff-photo-actions button{font-size:11px!important;min-height:34px!important;padding:7px 10px!important;border-radius:8px!important}
.staff-photo-actions label{display:inline-flex;align-items:center;background:#edf3ff;color:#3158d8;cursor:pointer}
.staff-photo-actions input{display:none}
.staff-profile-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
.staff-profile-meta-grid div{padding:10px 12px;background:#f8faff;border:1px solid #e6ebf4;border-radius:10px}
.staff-profile-meta-grid small{display:block;color:#7a879c;font-size:10px;margin-bottom:3px}.staff-profile-meta-grid b{color:#24314e;font-size:12px;overflow-wrap:anywhere}

@media(max-width:900px){
 #work-dialog.staff-profile-dialog #work-fields>.kn-staff-editor{grid-template-columns:1fr!important;min-height:0!important}
 #work-dialog.staff-profile-dialog .kn-staff-tabs{flex-direction:row!important;border-right:0!important;border-bottom:1px solid #e5eaf3!important;overflow-x:auto!important;padding:8px!important}
 #work-dialog.staff-profile-dialog .kn-staff-tabs button{width:auto!important;min-width:max-content!important}
 #kn-section-villages .kn-village-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #kn-section-tasks .kn-task-grid{grid-template-columns:1fr!important}
 #kn-section-account .kn-zone-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .workspace-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:620px){
 #work-dialog.staff-profile-dialog{width:calc(100vw - 12px)!important}
 #work-dialog.staff-profile-dialog .kn-staff-editor-main{padding:10px!important}
 .kn-editor-card .form-grid{grid-template-columns:1fr!important}
 #kn-section-villages .kn-village-tools-pro{grid-template-columns:1fr 1fr!important}
 #kn-section-villages .kn-village-tools-pro input{grid-column:1/-1!important}
 #kn-section-villages .kn-village-list{grid-template-columns:1fr!important}
 #kn-section-account .kn-zone-list{grid-template-columns:1fr!important}
 .workspace-stats{grid-template-columns:1fr 1fr!important}
 .staff-app-head{grid-template-columns:64px minmax(0,1fr)!important}
 .staff-hero-avatar{width:60px;height:60px;border-radius:16px!important}
 .staff-profile-card{grid-template-columns:1fr!important}
 .staff-profile-meta-grid{grid-template-columns:1fr!important}
}

.person-avatar img,#work-dialog.staff-profile-dialog .kn-staff-avatar img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:inherit!important;display:block!important}