/* ═══════════════════════════════════════════════════════
   portal.css — shared styles for all company portal pages
   (dashboard, profile, manage-products, manage-jobs)
   ═══════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
body { margin:0; background:#f0f5fb; font-family:'Inter',system-ui,sans-serif; color:#1a2532; }
a { text-decoration:none; }

/* ── CSS vars ── */
:root { --sw:240px; --th:56px; }

/* ── Sidebar ── */
#portal-sidebar {
  position:fixed; top:0; left:0; width:var(--sw); height:100vh;
  background:#0d3660; color:#cfd8dc; display:flex; flex-direction:column; z-index:1040;
  transition:transform .25s ease;
}
.sb-brand    { padding:16px 16px 14px; border-bottom:1px solid rgba(255,255,255,.1); }
.sb-avatar   { width:100%; height:72px; border-radius:10px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:2.2rem; overflow:hidden; margin-bottom:10px; }
.sb-avatar img { width:100%; height:100%; object-fit:contain; padding:6px; }
.sb-name     { font-size:.875rem; font-weight:700; color:#fff; margin:0; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-nav      { flex:1; overflow-y:auto; padding:8px 0; }
.sb-nav a    { display:flex; align-items:center; gap:10px; padding:10px 20px; color:rgba(255,255,255,.62); font-size:.875rem; border-left:3px solid transparent; transition:all .15s; }
.sb-nav a:hover, .sb-nav a.active { background:rgba(255,255,255,.08); color:#fff; border-left-color:#38bdf8; }
.sb-nav a .sni { font-size:1rem; width:20px; text-align:center; }
.sb-footer   { padding:14px 20px 18px; border-top:1px solid rgba(255,255,255,.08); }
.sb-view-link { display:flex; align-items:center; gap:6px; font-size:.78rem; color:rgba(255,255,255,.5); margin-bottom:10px; }
.sb-view-link:hover { color:#fff; }
.sb-logout   { width:100%; padding:8px; background:rgba(220,38,38,.2); color:#fca5a5; border:1px solid rgba(220,38,38,.35); border-radius:7px; font-size:.82rem; font-weight:600; cursor:pointer; margin-bottom:10px; transition:background .15s; }
.sb-logout:hover { background:rgba(220,38,38,.35); }
.sb-copy     { font-size:.68rem; color:rgba(255,255,255,.25); }

/* ── Main layout ── */
#portal-main   { margin-left:var(--sw); min-height:100vh; }
#portal-topbar { height:var(--th); background:#fff; border-bottom:1px solid #e0e0e0; display:flex; align-items:center; padding:0 24px; gap:12px; position:sticky; top:0; z-index:1030; }
.pt-title      { font-weight:700; font-size:1rem; color:#1a2532; flex:1; }
.portal-content { padding:28px 24px 60px; }

/* ── Mobile overlay + toggle ── */
#sb-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1039; }
#sb-overlay.show { display:block; }
#sb-toggle  { display:none; width:36px; height:36px; border:none; background:none; cursor:pointer; border-radius:6px; font-size:1.3rem; color:#6c757d; flex-shrink:0; }
#sb-toggle:hover { background:#f0f4ff; }

/* ── Shared: empty state ── */
.empty-state      { text-align:center; padding:60px 20px; color:#a0aec0; background:#fff; border-radius:12px; }
.empty-state .icon { font-size:3rem; margin-bottom:12px; }

/* ── Shared: form groups (modal) ── */
.form-group       { margin-bottom:15px; }
.form-group label { display:block; font-size:.8rem; font-weight:600; color:#4a5568; margin-bottom:4px; }
.form-group input,
.form-group textarea,
.form-group select { width:100%; padding:9px 12px; border:1.5px solid #dce3ec; border-radius:7px; font-size:.9rem; color:#1a2532; font-family:inherit; outline:none; transition:border-color .2s; }
.form-group textarea { resize:vertical; min-height:80px; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color:#1a5c8a; box-shadow:0 0 0 3px rgba(26,92,138,.1); }

/* ── Shared: cloud checkboxes (modal) ── */
.clouds-grid  { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.cloud-check  { display:flex; align-items:center; gap:6px; padding:6px 10px; border:1.5px solid #dce3ec; border-radius:7px; cursor:pointer; font-size:.8rem; color:#4a5568; transition:all .15s; }
.cloud-check:hover { border-color:#1a5c8a; }
.cloud-check input { width:14px; height:14px; accent-color:#1a5c8a; cursor:pointer; }
.cloud-check.checked { border-color:#1a5c8a; background:#eff6ff; color:#1a5c8a; font-weight:600; }

/* ── Mobile ── */
@media(max-width:900px) {
  #sb-toggle     { display:flex; align-items:center; justify-content:center; }
  #portal-sidebar { transform:translateX(-100%); box-shadow:none; }
  #portal-sidebar.open { transform:translateX(0); box-shadow:6px 0 24px rgba(0,0,0,.2); }
  #portal-main   { margin-left:0; }
  .portal-content { padding:16px 14px 48px; }
}