/* =============================================================================
   grid-styles.css — shared CSS for every page using grid-engine.js (v88+).
   =============================================================================
   Before v88: this ~140-line block was copy-pasted inline into each of 17
   grid pages. Any styling change required touching all pages. Extract into
   this file; grid pages link it via
     <link rel="stylesheet" href="grid-styles.css?v=1">
   Page-specific additions (yellow diff on raw-data, etc.) stay inline in
   that page's <style> block after the link.
   ============================================================================= */

.projects-table-wrap { overflow:auto; max-height:calc(100vh - 240px); scrollbar-gutter:stable; }

.g-th { white-space:nowrap; cursor:pointer; user-select:none; position:relative; }
.g-th:hover { background:#f0f4ff; }
.g-th.col-sel-active { background:#e0e7ff; color:#4f46e5; }
.g-th-num { width:42px; text-align:center !important; padding-left:6px !important; color:#94a3b8; padding:0 !important; vertical-align:middle; position:relative; }
.g-num { width:42px; text-align:center !important; padding-left:6px !important; color:#94a3b8; font-size:12px; user-select:none; padding:4px 0 !important; position:relative; }

.g-cell { position:relative; padding:0 !important; vertical-align:middle; cursor:default; border-right:1px solid #f1f5f9; }
.g-cell-dd::after { content:''; position:absolute; right:9px; top:50%; transform:translateY(-50%); border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid #b0bec5; pointer-events:none; transition:border-top-color .15s; }
.g-cell-dd:hover::after, .g-cell-dd.g-sel::after { border-top-color:#6366f1; }
.g-cell-dd.g-active::after { display:none; }
.g-cell-dd .g-val { padding-right:26px; }

.g-row:hover .g-cell { background:#f8faff; }
.g-val { padding:7px 10px; height:36px; display:flex; align-items:center; font-size:13px; color:#1e293b; gap:3px; overflow:hidden; }
.g-val > span:not(.g-tag):not(.g-empty) { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; flex:1; }
.g-empty { color:#c7d2fe; font-size:12px; }

.g-tag { display:inline-block; padding:2px 8px; border-radius:5px; font-size:12px; font-weight:500; border:1px solid; }
.g-tag-blue   { background:#f0f4ff; color:#4f46e5; border-color:#e0e7ff; }
.g-tag-green  { background:#f0fdf4; color:#059669; border-color:#a7f3d0; }
.g-tag-yellow { background:#fffbeb; color:#d97706; border-color:#fde68a; }
.g-tag-grey   { background:#f8fafc; color:#94a3b8; border-color:#e2e8f0; }

.g-cell.g-sel { outline:2px solid #6366f1; outline-offset:-2px; z-index:5; }
.g-cell.g-active { outline:2px solid #6366f1; outline-offset:-2px; z-index:10; background:#fff !important; overflow:visible !important; }
.g-fill-handle { position:absolute; bottom:-2px; right:-2px; width:10px; height:10px; background:#6366f1; border:1.5px solid #fff; border-radius:2px; opacity:0; cursor:crosshair; z-index:6; }
.g-row:hover .g-fill-handle, .g-cell.g-active .g-fill-handle { opacity:1; }
.g-fill-highlight { background:#eef2ff !important; outline:1px solid #a5b4fc; outline-offset:-1px; }

.g-editor-input { position:absolute; inset:0; width:100%; height:100%; box-sizing:border-box; padding:6px 10px; border:none; outline:none; background:transparent; font-size:13px; color:#1e293b; font-family:inherit; z-index:2; }
.g-select-dd { position:absolute; top:calc(100% + 1px); left:-1px; min-width:calc(100% + 2px); z-index:300; background:#fff; border:1.5px solid #c7d2fe; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12); max-height:220px; overflow-y:auto; }
.g-select-opt { padding:7px 12px; font-size:13px; color:#1e293b; cursor:pointer; border-bottom:1px solid #f1f5f9; }
.g-select-opt:last-child { border-bottom:none; }
.g-select-opt:hover, .g-select-opt.active { background:#f0f4ff; color:#6366f1; }
.g-select-opt.muted { color:#94a3b8; font-style:italic; cursor:default; pointer-events:none; }

.g-search-wrap { position:absolute; inset:0; display:flex; flex-direction:column; z-index:2; }
.g-search-input { flex:none; width:100%; height:100%; min-height:36px; box-sizing:border-box; padding:6px 10px; border:none; outline:none; background:transparent; font-size:13px; color:#1e293b; font-family:inherit; }

.g-expanded-editor { position:fixed; z-index:400; background:#fff; border:2px solid #6366f1; border-radius:8px; box-shadow:0 8px 30px rgba(0,0,0,.18); padding:10px 12px; font-size:13px; font-family:inherit; color:#1e293b; line-height:1.6; resize:none; outline:none; box-sizing:border-box; white-space:pre-wrap; word-break:break-word; }

.g-cell-blocked { cursor:default; }
.g-cell-blocked .g-val { opacity:1; }
.g-cell-blocked::after { display:none !important; }

.g-th-num .g-head-num { transition:opacity .1s; }
.g-head-cb { width:14px; height:14px; accent-color:#6366f1; cursor:pointer; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); opacity:0; transition:opacity .1s; }
.g-th-num:hover .g-head-cb { opacity:1; }
.g-th-num:hover .g-head-num { opacity:0; }
.g-head-cb.partial { opacity:1; }

.g-row-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; transition:opacity .1s; font-size:12px; color:#94a3b8; }
.g-row-cb-wrap { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .1s; }
.g-row-cb { width:14px; height:14px; cursor:pointer; accent-color:#6366f1; }
.g-row:hover .g-row-cb-wrap, .g-row.g-sel .g-row-cb-wrap { opacity:1; }
.g-row:hover .g-row-num, .g-row.g-sel .g-row-num { opacity:0; }
.g-row.g-sel td { background:#eef2ff !important; }
.g-row:hover td[style*="sticky"] { background:#f8faff !important; }
.g-row.g-sel td[style*="sticky"] { background:#eef2ff !important; }

.g-toolbar { display:flex; align-items:center; gap:4px; padding:6px 0 6px; position:sticky; left:0; z-index:20; }
.g-tb-wrap { position:relative; }
.g-tb-btn { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; font-size:12.5px; font-weight:500; color:#64748b; background:none; border:1px solid transparent; border-radius:6px; cursor:pointer; transition:all .15s; white-space:nowrap; }
.g-tb-btn:hover { background:#f1f5f9; border-color:#e2e8f0; color:#334155; }
.g-tb-btn.active { background:#eef2ff; border-color:#c7d2fe; color:#6366f1; }

.g-search-global { margin-left:auto; position:relative; }
.g-search-global input { width:220px; padding:5px 10px 5px 30px; font-size:12.5px; border:1.5px solid #e2e8f0; border-radius:7px; color:#334155; outline:none; transition:all .15s; background:#fff; }
.g-search-global input:focus { border-color:#a5b4fc; width:300px; box-shadow:0 0 0 3px rgba(99,102,241,.1); }
.g-search-global input::placeholder { color:#94a3b8; }
.g-search-global svg { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:#94a3b8; pointer-events:none; }
.g-search-global .g-search-clear { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:18px; height:18px; border:none; background:none; color:#94a3b8; cursor:pointer; font-size:14px; line-height:1; padding:0; border-radius:50%; display:none; }
.g-search-global .g-search-clear:hover { color:#6366f1; background:#f0f4ff; }

.g-panel { position:absolute; top:calc(100% + 4px); left:0; z-index:600; background:#fff; border:1.5px solid #e2e8f0; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.1); padding:14px 16px; min-width:380px; }
.g-panel.hidden { display:none; }
.g-panel-hd { font-size:11px; font-weight:600; color:#94a3b8; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }
.g-panel-empty { font-size:12.5px; color:#94a3b8; padding:4px 0 8px; }
.g-panel-rule { display:flex; align-items:center; gap:6px; margin-bottom:7px; }
.g-panel-sel { padding:5px 8px; font-size:12.5px; border:1.5px solid #e2e8f0; border-radius:6px; background:#fff; color:#334155; cursor:pointer; outline:none; min-width:0; }
.g-panel-sel:focus { border-color:#a5b4fc; }
.g-panel-input { flex:1; padding:5px 8px; font-size:12.5px; border:1.5px solid #e2e8f0; border-radius:6px; color:#334155; outline:none; min-width:80px; }
.g-panel-input:focus { border-color:#a5b4fc; }

.g-filter-multi { flex:1; display:inline-flex; align-items:center; padding:4px 8px; font-size:12.5px; border:1.5px solid #e2e8f0; border-radius:6px; color:#334155; cursor:pointer; background:#fff; min-width:100px; position:relative; gap:4px; min-height:28px; overflow:hidden; white-space:nowrap; }
.g-filter-multi:hover { border-color:#a5b4fc; }
.g-filter-chip { display:inline-flex; align-items:center; gap:3px; padding:1px 6px; background:#eef2ff; color:#4f46e5; border-radius:4px; font-size:11px; font-weight:500; white-space:nowrap; }
.g-filter-chip-x { cursor:pointer; opacity:0.7; font-size:14px; line-height:1; padding:2px 4px; margin:-2px -4px -2px 0; border-radius:3px; }
.g-filter-chip-x:hover { opacity:1; background:rgba(79,70,229,.15); }
.g-filter-ph { color:#94a3b8; font-size:12px; }
.g-filter-dd { position:absolute; top:calc(100% + 4px); left:0; z-index:600; background:#fff; border:1.5px solid #c7d2fe; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.14); min-width:220px; max-width:320px; }
.g-filter-dd-search { width:100%; box-sizing:border-box; padding:8px 10px; border:none; border-bottom:1px solid #f1f5f9; font-size:12.5px; outline:none; border-radius:8px 8px 0 0; }
.g-filter-dd-list { max-height:200px; overflow-y:auto; padding:4px 0; }
.g-filter-dd-item { display:flex; align-items:center; gap:8px; padding:5px 10px; font-size:12.5px; color:#334155; cursor:pointer; }
.g-filter-dd-item:hover { background:#f0f4ff; }
.g-filter-dd-item input { accent-color:#6366f1; }

.g-panel-rm { padding:2px 6px; font-size:15px; line-height:1; color:#94a3b8; background:none; border:none; cursor:pointer; border-radius:4px; }
.g-panel-rm:hover { color:#ef4444; background:#fef2f2; }
.g-panel-add { display:inline-flex; align-items:center; gap:5px; margin-top:4px; padding:4px 10px; font-size:12px; font-weight:500; color:#6366f1; background:none; border:1.5px dashed #c7d2fe; border-radius:6px; cursor:pointer; }
.g-panel-add:hover { background:#eef2ff; }

.content { min-width:0 !important; overflow:hidden !important; }
.projects-layout { overflow:hidden; }
.projects-table th { position:relative; }
.g-th-resize { position:absolute; top:0; right:0; width:14px; cursor:col-resize; z-index:20; user-select:none; }
.g-th-resize:hover, .g-th-resize.active { background:rgba(99,102,241,.5); }
th[draggable="true"] { cursor:grab; }
th[draggable="true"]:active { cursor:grabbing; }
.g-th-dragging { opacity:0.4; }
.g-th-drag-left { box-shadow:inset 3px 0 0 0 #6366f1 !important; }
.g-th-drag-right { box-shadow:inset -3px 0 0 0 #6366f1 !important; }

.projects-table { table-layout:fixed; border-collapse:collapse; }
.projects-table thead { position:sticky; top:0; z-index:10; background:#f8fafc; }
.projects-table th, .projects-table td { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.g-bulk-bar { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:10px 18px; background:#1e293b; color:#fff; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.25); font-size:13px; z-index:600; transition:opacity .2s, transform .2s; }
.g-bulk-bar.hidden { opacity:0; pointer-events:none; transform:translateX(-50%) translateY(10px); }
.g-bulk-btn { padding:5px 12px; font-size:12.5px; font-weight:500; border:none; border-radius:6px; cursor:pointer; }
.g-bulk-btn.danger { background:#ef4444; color:#fff; }
.g-bulk-btn.ghost { background:rgba(255,255,255,.15); color:#fff; }
.g-bulk-btn:hover { opacity:.85; }

.g-pagination { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; font-size:12.5px; color:#64748b; border-top:1px solid #f1f5f9; margin-bottom:80px; position:sticky; left:0; }
.g-pagination-info { display:flex; align-items:center; gap:8px; }
.g-pagination-btns { display:flex; align-items:center; gap:4px; }
.g-pagination-btns button { padding:4px 10px; font-size:12px; font-weight:500; color:#64748b; background:#fff; border:1px solid #e2e8f0; border-radius:6px; cursor:pointer; transition:all .15s; }
.g-pagination-btns button:hover:not(:disabled) { background:#f0f4ff; border-color:#c7d2fe; color:#6366f1; }
.g-pagination-btns button:disabled { opacity:.4; cursor:default; }
.g-pagination-btns .g-page-current { background:#eef2ff; border-color:#c7d2fe; color:#6366f1; font-weight:600; min-width:32px; text-align:center; }
.g-pagination select { padding:3px 6px; font-size:12px; border:1px solid #e2e8f0; border-radius:5px; color:#64748b; cursor:pointer; outline:none; }
.g-pagination select:focus { border-color:#a5b4fc; }

.btn-proj-action { padding:4px; background:none; border:none; cursor:pointer; color:#94a3b8; border-radius:4px; transition:all .15s; }
.btn-proj-action:hover { color:#6366f1; background:#f0f4ff; }
.btn-proj-action svg { width:15px; height:15px; }

.g-kebab-wrap { position:relative; display:inline-flex; }
.g-kebab-btn { display:flex; align-items:center; justify-content:center; width:28px; height:28px; background:none; border:1px solid transparent; border-radius:6px; cursor:pointer; color:#94a3b8; font-size:18px; line-height:1; transition:all .15s; letter-spacing:1px; }
.g-kebab-btn:hover { color:#6366f1; background:#f0f4ff; border-color:#e0e7ff; }
.g-kebab-dd { position:fixed; z-index:500; background:#fff; border:1.5px solid #e2e8f0; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12); min-width:160px; padding:4px; }
.g-kebab-dd.hidden { display:none; }
.g-kebab-opt { display:flex; align-items:center; gap:8px; padding:7px 12px; font-size:13px; color:#334155; border-radius:6px; cursor:pointer; border:none; background:none; width:100%; text-align:left; transition:all .1s; }
.g-kebab-opt:hover { background:#f0f4ff; color:#6366f1; }
.g-kebab-opt.danger { color:#ef4444; }
.g-kebab-opt.danger:hover { background:#fef2f2; color:#dc2626; }
.g-kebab-opt svg { width:14px; height:14px; flex-shrink:0; }

@keyframes g-spin { to { transform:rotate(360deg); } }
.g-spinner { display:inline-block; width:10px; height:10px; border:1.5px solid #c7d2fe; border-top-color:#6366f1; border-radius:50%; animation:g-spin .7s linear infinite; flex-shrink:0; }

.btn-add-row { display:flex; align-items:center; gap:6px; padding:8px 14px; font-size:12.5px; font-weight:500; color:#94a3b8; background:#fff; border:none; border-top:1px solid #e2e8f0; cursor:pointer; transition:all .15s; position:sticky; bottom:0; left:0; z-index:5; width:100%; box-shadow:0 -1px 0 0 #e2e8f0; }
.btn-add-row:hover { color:#6366f1; background:#f8faff; }

.g-frozen-col { box-shadow:inset -1px 0 0 0 #cbd5e1; }

/* -- Shared across multiple grid pages (extracted from inline blocks in v88+) -- */

/* "Filter Errors" pill (7 pages: gen pipelines + task-log) */
.problems-pill { border:1px solid #fde68a !important; background:#fef3c7 !important; color:#d97706 !important; }
.problems-pill:hover { background:#fde68a !important; }
.problems-pill.active { background:#d97706 !important; color:#fff !important; border-color:#d97706 !important; }
.problems-pill.active:hover { background:#b45309 !important; }

/* Generation + stats column cells (used by Article Brand/General, Article Builder v2/t2, Outline Gen, Static) */
.g-gen { min-width:140px; }
.g-gen-label { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:6px; font-size:11.5px; font-weight:600; white-space:nowrap; transition:all .2s; }
.g-stats { min-width:130px; }
.g-stats-col { display:flex; flex-direction:column; align-items:flex-start; gap:1px; line-height:1.4; }
.g-stats-row { display:flex; align-items:center; gap:5px; flex-wrap:wrap; font-size:12px; }
.g-stats-wc { font-size:10.5px; color:#64748b; white-space:nowrap; }
.g-stats-wc .sep { color:#cbd5e1; margin:0 2px; }
.g-stats-sep { color:#cbd5e1; }
.g-stats-cost { color:#059669; font-weight:600; font-size:11px; }
.g-stats-link { display:inline-flex; align-items:center; color:#6366f1; opacity:.8; transition:opacity .15s; }
.g-stats-link:hover { opacity:1; }

/* Run-toggle button (post-scheduler v2+t2, task-log v2+t2) */
.btn-run-toggle { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:7px; border:1.5px solid #e2e8f0; background:#fff; color:#64748b; cursor:pointer; transition:all .15s; margin:0 auto; }
.btn-run-toggle:hover { border-color:#6366f1; color:#6366f1; background:#f0f4ff; }
.btn-run-toggle.running { background:#059669; border-color:#059669; color:#fff; }
.btn-run-toggle.running:hover { background:#dc2626; border-color:#dc2626; }
.btn-run-toggle.disabled { opacity:.35; cursor:not-allowed; }
.btn-run-toggle.disabled:hover { border-color:#e2e8f0; color:#64748b; background:#fff; }

/* Extra g-tag color used by static page (v88+ unified palette) */
.g-tag-purple { background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe; }

/* =============================================================================
   v98.2 — Global profile slot + DiceBear avatar + dropdown + change-password modal
   ============================================================================= */

/* Fixed top-right container holding page action buttons + user avatar */
#global-profile-slot {
  position: fixed;
  top: 14px;
  right: 20px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 40px);
  flex-wrap: wrap;
  justify-content: flex-end;
  pointer-events: none; /* child elements re-enable via their own styles */
}
#global-profile-slot > * { pointer-events: auto; flex-shrink: 0; }
/* Always keep avatar pill visible — wrap action buttons if space is tight */
#user-avatar-btn { order: 10; } /* rendered last visually */

/* Page action slot — auto-fills with [data-action-slot="true"] buttons */
#page-action-slot {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}
#page-action-slot > * { flex-shrink: 0; }
#page-action-slot:empty { display: none; }

/* Push/sync status badge shown next to the Push button (server-polled state) */
.g-push-status-badge {
  font-size: 11.5px;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 3px 10px;
  white-space: nowrap;
  font-family: inherit;
}
.g-push-status-badge.active { color: #4338ca; background: #e0e7ff; border-color: #c7d2fe; }
.g-push-status-badge.ok { color: #059669; background: #d1fae5; border-color: #a7f3d0; }
.g-push-status-badge.err { color: #b91c1c; background: #fee2e2; border-color: #fecaca; }

/* Primary action button — unified visual language for all pages */
.g-header-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
  text-decoration: none; /* covers <a class="g-header-action"> */
  font-family: inherit;
  line-height: 1.2;
}
.g-header-action:hover:not(:disabled) { opacity: 0.92; }
.g-header-action:active:not(:disabled) { transform: scale(0.98); }
.g-header-action:disabled { opacity: 0.55; cursor: not-allowed; }
.g-header-action.secondary {
  background: #fff;
  color: #475569;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.g-header-action.secondary:hover:not(:disabled) { background: #f8fafc; border-color: #94a3b8; }
.g-header-action svg { display: inline-block; }

/* User avatar pill button */
#user-avatar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 3px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
#user-avatar-btn:hover { border-color: #cbd5e1; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10); }
#user-avatar-btn .ua-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  flex-shrink: 0;
}
#user-avatar-btn .ua-avatar .ua-avatar-img { width: 100%; height: 100%; display: block; }
#user-avatar-btn .ua-avatar .ua-avatar-fallback {
  position: absolute; inset: 0;
  display: none; /* shown only via onerror JS swap */
  align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 12px; letter-spacing: 0.5px;
}
#user-avatar-btn .ua-name {
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dropdown menu */
#user-dropdown {
  position: fixed;
  top: 58px;
  right: 20px;
  min-width: 260px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  padding: 8px;
  display: none;
  z-index: 1001;
}
#user-dropdown.open { display: block; }
#user-dropdown .ud-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 12px;
}
#user-dropdown .ud-head-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  flex-shrink: 0;
}
#user-dropdown .ud-head-avatar .ud-head-img { width: 100%; height: 100%; display: block; }
#user-dropdown .ud-head-avatar .ud-head-fallback {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 15px;
}
#user-dropdown .ud-head-info { min-width: 0; flex: 1; }
#user-dropdown .ud-name {
  font-size: 14px; font-weight: 600; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#user-dropdown .ud-email {
  font-size: 12px; color: #64748b; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#user-dropdown .ud-role { margin-top: 6px; }
#user-dropdown .ud-sep {
  height: 1px; background: #f1f5f9; margin: 4px 0;
}
#user-dropdown .ud-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  transition: background .12s;
  text-decoration: none;
  font-family: inherit;
  text-align: left;
}
#user-dropdown .ud-item:hover { background: #f1f5f9; color: #0f172a; }
#user-dropdown .ud-item svg { color: #94a3b8; flex-shrink: 0; }
#user-dropdown .ud-item.ud-danger { color: #dc2626; }
#user-dropdown .ud-item.ud-danger:hover { background: #fef2f2; color: #b91c1c; }
#user-dropdown .ud-item.ud-danger svg { color: #dc2626; }

/* Change Password modal */
#cpwd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#cpwd-overlay .cpwd-card {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
#cpwd-overlay .cpwd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
}
#cpwd-overlay .cpwd-head h3 {
  margin: 0; font-size: 16px; font-weight: 600; color: #0f172a;
}
#cpwd-overlay .cpwd-x {
  background: none; border: none; font-size: 24px; line-height: 1;
  color: #94a3b8; cursor: pointer; padding: 0 4px;
}
#cpwd-overlay .cpwd-x:hover { color: #334155; }
#cpwd-overlay .cpwd-body {
  padding: 18px 20px 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#cpwd-overlay .cpwd-lbl {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
}
#cpwd-overlay .cpwd-lbl input {
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13.5px;
  color: #0f172a;
  font-family: inherit;
  background: #f8fafc;
  outline: none;
  transition: border-color .15s, background .15s;
}
#cpwd-overlay .cpwd-lbl input:focus {
  border-color: #6366f1; background: #fff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
#cpwd-overlay .cpwd-msg {
  font-size: 12.5px;
  min-height: 18px;
  text-align: center;
  padding: 0 20px;
}
#cpwd-overlay .cpwd-msg.err { color: #dc2626; }
#cpwd-overlay .cpwd-msg.ok { color: #059669; }
#cpwd-overlay .cpwd-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 18px;
}
#cpwd-overlay .cpwd-btn {
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: opacity .15s;
}
#cpwd-overlay .cpwd-btn:disabled { opacity: 0.55; cursor: not-allowed; }
#cpwd-overlay .cpwd-cancel {
  background: #fff; color: #475569; border: 1px solid #cbd5e1;
}
#cpwd-overlay .cpwd-cancel:hover:not(:disabled) { background: #f8fafc; }
#cpwd-overlay .cpwd-submit {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}
#cpwd-overlay .cpwd-submit:hover:not(:disabled) { opacity: 0.92; }

/* Responsive: hide name on narrow screens, keep only avatar */
@media (max-width: 768px) {
  #global-profile-slot { gap: 6px; right: 10px; top: 10px; }
  #user-avatar-btn .ua-name { display: none; }
  #user-avatar-btn { padding: 2px; border-radius: 50%; }
  #page-action-slot { gap: 4px; }
  .g-header-action { font-size: 12px; padding: 6px 10px; }
  #user-dropdown { right: 10px; top: 50px; min-width: 240px; }
}