/* AN Office — portal shell (home, users & access, activity).
   Builds on /assets/app.css (same colours, type, buttons, fields, modals). */

.of-crest{width:64px;height:64px;object-fit:contain;display:block;margin:0 auto 6px}
.of-tag{font-size:13px;color:var(--muted);text-align:center;margin-top:2px}
.lc-brand{flex-direction:column}

#office{display:none;min-height:100vh;flex-direction:column}
body.app-mode #office{display:flex}

/* top bar */
.of-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:20px;padding:0 24px;height:64px;
  background:var(--side-bg);color:var(--side-ink);box-shadow:0 1px 0 var(--side-line)}
.of-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;font-size:17px;letter-spacing:.2px}
.of-brand img{width:34px;height:34px;object-fit:contain;background:#fff;border-radius:8px;padding:2px}
.of-nav{display:flex;gap:4px;flex:1}
.of-nav a{color:var(--side-ink);text-decoration:none;font-size:14px;font-weight:500;padding:8px 12px;border-radius:var(--r-sm)}
.of-nav a:hover{background:var(--side-hover)}
.of-nav a.active{background:var(--side-active-bg);color:var(--side-active-ink)}
body:not(.is-admin) .adm-only{display:none}
.of-user{position:relative}
.of-userbtn{display:flex;align-items:center;gap:10px;background:none;border:none;color:inherit;cursor:pointer;padding:6px 8px;border-radius:var(--r-sm);text-align:left}
.of-userbtn:hover{background:var(--side-hover)}
.of-avatar{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.of-uname{display:flex;flex-direction:column;line-height:1.2}
.of-uname b{font-size:14px;color:#fff;font-weight:600}
.of-uname small{font-size:12px;color:var(--side-muted)}
.of-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);min-width:190px;padding:6px;z-index:50}
.of-menu.open{display:block}
.of-menu button{display:block;width:100%;text-align:left;background:none;border:none;padding:9px 12px;border-radius:var(--r-sm);font-size:14px;color:var(--ink);cursor:pointer}
.of-menu button:hover{background:var(--sunk)}

.of-main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:32px 24px 40px}
.of-h1{font-size:26px;font-weight:700;letter-spacing:-.2px;color:var(--ink)}
.of-lead{color:var(--muted);margin:4px 0 22px}
.of-foot{text-align:center;font-size:12px;color:var(--faint);padding:18px}

/* module cards */
.of-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.of-card{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;
  box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:transform .12s,box-shadow .12s,border-color .12s;min-height:200px}
a.of-card:hover{transform:translateY(-2px);border-color:var(--brand-100);box-shadow:0 2px 4px rgba(13,38,34,.05),0 14px 32px -12px rgba(13,38,34,.25)}
.of-card .ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--brand-50);color:var(--brand)}
.of-card .ic svg{width:24px;height:24px}
.of-card h2{font-size:18px;font-weight:650;color:var(--ink)}
.of-card p{font-size:14px;color:var(--muted);flex:1}
.of-card .go{align-self:flex-start;background:var(--brand);color:#fff;font-weight:600;font-size:14px;padding:8px 14px;border-radius:var(--r-sm)}
.of-card.soon{opacity:.72;box-shadow:none;cursor:default}
.of-card.soon .go{background:var(--sunk);color:var(--muted);border:1px dashed var(--line-2)}
.of-card[data-k="MIS_DASHBOARD"] .ic{background:var(--blue-bg);color:var(--blue)}
.of-card[data-k="JAMAN_MENU"] .ic{background:var(--amber-bg);color:var(--amber)}
.of-card[data-k="PASSPORT_RELEASE"] .ic{background:#f1ecfb;color:#5b3fa0}
.of-empty{background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:28px;text-align:center;color:var(--ink-2)}

/* users & access */
.of-headrow{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.of-toolbar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.of-toolbar input{flex:1 1 280px}
.of-toolbar select{flex:0 0 220px}
.of-tablewrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:auto;box-shadow:var(--shadow-sm)}
.of-table th{position:sticky;top:0;background:var(--sunk);font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600;
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.of-table th.c,.of-table td.c{text-align:center}
.of-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.of-table tr:last-child td{border-bottom:none}
.of-table tr.dirty td{background:#fffbea}
.of-table tr.off td{color:var(--faint)}
.of-table td .nm{font-weight:600;color:var(--ink)}
.of-table td small{display:block;color:var(--muted);font-size:12px}
.of-table input[type=checkbox]{width:18px;height:18px}
.of-table .acts{white-space:nowrap;text-align:right}
.of-pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--brand-50);color:var(--brand-700)}
.of-pill.off{background:var(--red-bg);color:var(--red)}
.of-pill.adm{background:#f1ecfb;color:#5b3fa0}
.of-pager{display:flex;align-items:center;justify-content:space-between;margin-top:12px}

.modal.of-wide{max-width:620px}
.of-form{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.of-sec{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin:4px 0 8px}
.of-modchecks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.of-modchecks label,.of-check{display:flex;align-items:center;gap:8px;font-size:14px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer}
.of-modchecks label.soon span::after{content:" (coming soon)";color:var(--faint);font-size:12px}
.of-check{border:none;padding:4px 0 10px}
.of-check input,.of-modchecks input{width:18px;height:18px}

@media (max-width:760px){
  .of-top{padding:0 12px;gap:10px;height:auto;min-height:58px;flex-wrap:wrap}
  .of-nav{order:3;flex-basis:100%;overflow-x:auto;padding-bottom:8px}
  .of-uname{display:none}
  .of-brand{flex:1}
  .of-main{padding:20px 16px 32px}
  .of-h1{font-size:22px}
  .of-form,.of-modchecks{grid-template-columns:1fr}
  .of-toolbar select{flex:1 1 100%}
  .of-table .hide-sm{display:none}
}

/* tall forms (Add / Edit user) scroll inside the window on small screens */
.modal.of-wide{max-height:calc(100vh - 40px);overflow-y:auto}
@media (max-width:760px){ .modal.of-wide{padding:20px 16px} }
.of-table [data-save]:disabled{opacity:.35;cursor:default}
.of-table tr.dirty [data-save]{background:var(--brand);border-color:var(--brand);color:#fff}
/* phone: the person's name stays in view while the module columns scroll */
@media (max-width:760px){
  .of-table td:first-child,.of-table th:first-child{position:sticky;left:0;z-index:2;background:var(--surface);box-shadow:1px 0 0 var(--line);min-width:130px}
  .of-table th:first-child{background:var(--sunk);z-index:3}
  .of-table tr.dirty td:first-child{background:#fffbea}
}

/* greeting: "Salaam e Jameel" over the name */
.of-salaam{font-size:15px;font-weight:600;color:var(--brand);letter-spacing:.3px;margin-bottom:2px}
.of-name{font-size:28px;font-weight:700}

/* module cards: centred, name large and bold */
.of-card{align-items:center;text-align:center}
.of-card .ic{width:56px;height:56px;border-radius:14px}
.of-card .ic svg{width:28px;height:28px}
.of-card h2{font-size:21px;font-weight:700;letter-spacing:-.2px}
.of-card .go{align-self:center}

.of-codehint{font-size:12.5px;color:var(--brand-700);background:var(--brand-50);border-radius:var(--r-sm);padding:7px 10px;margin-top:8px;line-height:1.45}
.of-btns{display:flex;gap:8px;flex-wrap:wrap}
.of-bulkres{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;margin:6px 0 12px;font-size:14px;max-height:220px;overflow:auto}
.of-bulkres.ok{border-color:var(--green-line)}
.of-bulkres li{margin-left:18px;color:var(--ink-2)}
.of-pill.code{background:var(--amber-bg);color:var(--amber)}
.up-actions{display:flex;flex-wrap:wrap;margin:6px 0 10px}
@media (max-width:760px){ .of-name{font-size:24px} }

/* role drop-down per module (Users & access) */
.of-rolesel{width:auto;min-width:96px;padding:6px 26px 6px 8px;font-size:13px;color:var(--faint);background-color:var(--sunk)}
.of-rolesel.has{color:var(--brand-700);font-weight:600;background-color:var(--brand-50);border-color:var(--brand-100)}
#um_mods .of-rolesel{width:100%;font-size:14px;padding:9px 30px 9px 10px}
.of-card .of-pill{font-size:12px}
.of-table .of-rolesel{max-width:132px;text-overflow:ellipsis}
.of-main{max-width:1280px}
.of-table td,.of-table th{padding-left:9px;padding-right:9px}
.of-card[data-k="AN_MIQAAT"] .ic{background:#fdf1e6;color:#a4520f}
.of-pill.held{background:#fdecea;color:#b42318}
.of-nomail{display:flex;gap:8px;align-items:flex-start;font-size:14px;margin:4px 0 12px;cursor:pointer}
.of-nomail input{flex:none;width:auto;margin-top:3px}
.of-altlink{text-align:center;margin:10px 0 0}
.of-altlink:has(#usePwLink[hidden]){display:none}