:root{
  --bg: #0b1120;
  --panel: #111827;
  --muted: #8A8F98;
  --text: #F7F8F8;
  --accent: #5E6AD2;
  --accent-2: #818cf8;
  --danger: #EB5757;
  --success: #27A644;
  --ring: rgba(94,106,210,.3);
}
*{box-sizing:border-box}
html,body{height:100%; overflow:hidden}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background 0.25s, color 0.25s;
}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:16px; top:16px; background:#fff; color:#000; padding:8px 12px; border-radius:6px}

/* ============ LAYOUT ============ */
.layout-app{display:flex; min-height:100vh}

/* ============ SIDEBAR ============ */
.sidebar{
  width:250px; min-width:250px; background:var(--panel); border-right:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column; height:100vh; position:sticky; top:0;
  transition: width 0.25s ease, min-width 0.25s ease, background 0.25s;
  overflow:hidden; z-index:50;
}
.sidebar.collapsed{width:64px; min-width:64px}
/* Hover-to-expand when collapsed: overlay without affecting layout */
.sidebar.collapsed.hover-expand{
  width:250px; min-width:250px; position:fixed; left:0; top:0;
  box-shadow:4px 0 24px rgba(0,0,0,.18); z-index:60;
}
.sidebar.collapsed.hover-expand + .main-content{margin-left:64px}
.sidebar.collapsed.hover-expand .sidebar-brand{display:inline}
.sidebar.collapsed.hover-expand .nav-group-label{opacity:1; height:auto; padding:4px 10px 6px}
.sidebar.collapsed.hover-expand .nav-item .nav-label{opacity:1; width:auto}
.sidebar.collapsed.hover-expand .nav-item .count-badge{display:inline-flex; padding:2px 7px}
.sidebar.collapsed.hover-expand .nav-item{justify-content:flex-start; padding:9px 10px}
.sidebar.collapsed.hover-expand .user-meta{opacity:1; width:auto}
.sidebar.collapsed.hover-expand .sidebar-footer{justify-content:flex-start; padding:12px 14px}
.sidebar.collapsed.hover-expand .sidebar-header{justify-content:flex-start; padding:16px 14px}

.sidebar-header{
  padding:16px 14px; border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; gap:10px; min-height:56px;
}
.sidebar-logo{
  width:32px; height:32px; object-fit:contain; flex-shrink:0;
}
.sidebar.collapsed .sidebar-logo{width:28px; height:28px}
.sidebar-brand{
  font-size:15px; font-weight:700; color:var(--text); white-space:nowrap;
  opacity:1; transition:opacity 0.2s;
}
.sidebar-brand span{color:inherit}
.sidebar.collapsed .sidebar-brand{display:none}

.sidebar-toggle{
  width:28px; height:28px; border-radius:6px; border:1px solid rgba(255,255,255,.1);
  background:var(--panel); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--muted); margin-left:auto; flex-shrink:0;
  transition:all 0.15s;
}
.sidebar-toggle:hover{background:#1f2937; color:var(--text)}
.sidebar-toggle svg{width:14px; height:14px; transition:transform 0.25s}
.sidebar.collapsed .sidebar-toggle svg{transform:rotate(180deg)}
.sidebar.collapsed .sidebar-header{justify-content:center; padding:16px 0}

.sidebar-nav{flex:1; padding:12px 8px; overflow-y:auto; overflow-x:hidden}
.nav-group{margin-bottom:14px}
.nav-group-label{
  font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:0.8px; padding:4px 10px 6px; display:block;
  white-space:nowrap; overflow:hidden; transition:opacity 0.2s;
}
.sidebar.collapsed .nav-group-label{opacity:0; height:0; padding:0; margin:0}

.nav-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  font-size:13px; font-weight:500; color:var(--muted); cursor:pointer; transition:all 0.15s;
  text-decoration:none; margin-bottom:1px; white-space:nowrap; overflow:hidden;
}
.nav-item:hover{background:#1f2937; color:var(--text)}
.nav-item.active{background:rgba(99,102,241,.15); color:var(--accent); font-weight:600}
.nav-item svg{width:18px; height:18px; flex-shrink:0}
.nav-item .nav-label{transition:opacity 0.2s}
.sidebar.collapsed .nav-item .nav-label{opacity:0; width:0}
.nav-item .count-badge{
  margin-left:auto; font-size:10px; background:#fee2e2; color:#dc2626;
  padding:2px 7px; border-radius:100px; font-weight:600; flex-shrink:0;
  transition:opacity 0.2s;
}
.sidebar.collapsed .nav-item .count-badge{display:none}
.sidebar.collapsed .nav-item{justify-content:center; padding:9px 0}

.sidebar-settings-wrap{padding:4px 8px 0}

.sidebar-footer{
  padding:10px 12px; border-top:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; gap:10px; overflow:hidden; cursor:pointer;
  border-radius:8px; margin:4px 6px 6px; transition:background .15s;
}
.sidebar-footer:hover{ background:rgba(255,255,255,.05); }
.avatar{
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg, #6366f1, #a78bfa);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:600; flex-shrink:0;
}
.user-meta{white-space:nowrap; overflow:hidden; transition:opacity 0.2s; flex:1; min-width:0;}
.user-name{font-size:13px; font-weight:600; color:var(--text)}
.user-role{font-size:11px; color:var(--muted)}
.sidebar-footer-chevron{
  width:14px; height:14px; flex-shrink:0; color:var(--muted);
  transition:transform .2s, opacity .15s; opacity:.6;
}
.sidebar-footer:hover .sidebar-footer-chevron{ opacity:1; }
#userMenu[style*="block"] ~ * .sidebar-footer-chevron,
.sidebar-footer.menu-open .sidebar-footer-chevron{ transform:rotate(180deg); }
.sidebar.collapsed .user-meta{opacity:0; width:0}
.sidebar.collapsed .sidebar-footer-chevron{display:none}
.sidebar.collapsed .sidebar-footer{justify-content:center; padding:10px 0; margin:4px 6px 6px;}

/* User menu popup */
.sidebar-user-menu{
  position:fixed; bottom:62px; left:10px; width:236px;
  background:#1a2235; border:1px solid rgba(255,255,255,.09); border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25);
  z-index:70; overflow:hidden;
}
.sidebar.collapsed .sidebar-user-menu{left:10px; width:236px}
/* User menu — profile header */
.user-menu-profile{
  display:flex; align-items:center; gap:10px; padding:14px 14px 12px;
}
.user-menu-avatar{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, #6366f1, #a78bfa);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:600;
}
.user-menu-info{ overflow:hidden; min-width:0; }
.user-menu-name{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-menu-email{ font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
/* Divider */
.user-menu-sep{ height:1px; margin:0; }
/* Sign out action */
.user-menu-action{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:11px 14px;
  background:none; border:none; border-radius:0;
  font-size:13px; font-family:inherit; font-weight:500;
  cursor:pointer; text-align:left; transition:background .12s, color .12s;
}
.user-menu-action:hover{ background:rgba(235,87,87,.1); color:#f87171; }
.user-menu-action svg{ flex-shrink:0; transition:color .12s; }

/* ============ TOPBAR ============ */
.topbar{
  height:56px; display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; background:var(--panel); border-bottom:1px solid rgba(255,255,255,.06); flex-shrink:0;
  position:sticky; top:0; z-index:40; transition:background 0.25s;
}
.topbar-left{display:flex; align-items:center; gap:16px}
.topbar-left h1{font-size:18px; font-weight:700; color:var(--text); margin:0}
.topbar-right{display:flex; align-items:center; gap:14px}
.topbar-hamburger{
  display:none; width:36px; height:36px; border-radius:8px; border:1px solid rgba(255,255,255,.1);
  background:transparent; cursor:pointer; color:var(--text); align-items:center; justify-content:center;
}
.topbar-hamburger svg{width:20px; height:20px}
.icon-btn{background:transparent; border:1px solid rgba(255,255,255,.1); color:var(--text); padding:6px 10px; border-radius:8px}

/* Notification bell (new design) */
.topbar-bell{position:relative; cursor:pointer; padding:6px; border-radius:8px; display:flex; align-items:center; justify-content:center}
.topbar-bell:hover{background:#1f2937}
.topbar-bell svg{width:20px; height:20px; color:var(--muted)}
.bell-dot{
  position:absolute; top:2px; right:2px; width:9px; height:9px;
  background:#ef4444; border-radius:50%; border:2px solid var(--panel);
}

/* ============ MAIN CONTENT ============ */
.main-content{flex:1; display:flex; flex-direction:column; min-width:0; position:relative}

/* ── Notification dropdown ────────────────────────────────────────────── */
.notif-dropdown{
  position:absolute; right:24px; top:60px; width:360px; z-index:9999;
  background:var(--panel); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.2);
  overflow:hidden; display:flex; flex-direction:column;
}
/* Header */
.notif-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 12px; border-bottom:1px solid rgba(255,255,255,.06); flex-shrink:0;
}
.notif-header-title{ font-size:14px; font-weight:700; color:var(--text); letter-spacing:-.1px; }
.notif-mark-all{
  background:none; border:none; cursor:pointer; font-size:12px; font-weight:500;
  color:var(--accent); font-family:inherit; padding:4px 8px; border-radius:6px;
  transition:background .12s;
}
.notif-mark-all:hover{ background:rgba(94,106,210,.12); }
/* Scrollable list */
.notif-list{
  list-style:none; margin:0; padding:6px; overflow-y:auto; max-height:calc(60vh - 56px);
  display:flex; flex-direction:column; gap:2px;
}
/* Notification item */
.notif-item{
  display:flex; align-items:flex-start; gap:11px;
  padding:10px 10px 10px 12px; border-radius:9px; cursor:pointer;
  transition:background .12s; position:relative;
}
.notif-item:hover{ background:rgba(255,255,255,.05); }
.notif-item--unread{ background:rgba(94,106,210,.08); }
.notif-item--unread:hover{ background:rgba(94,106,210,.13); }
/* Icon */
.notif-item-icon{
  width:32px; height:32px; border-radius:8px; flex-shrink:0;
  background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
}
.notif-item-icon svg{ width:15px; height:15px; color:var(--accent-2); }
/* Text */
.notif-item-body{ flex:1; min-width:0; padding-right:8px; }
.notif-item-title{ font-size:13px; font-weight:600; color:var(--text); line-height:1.35; }
.notif-item-desc{ font-size:12px; color:var(--muted); margin-top:2px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notif-item-time{ font-size:11px; color:var(--muted); margin-top:4px; opacity:.7; }
/* Unread dot */
.notif-item-dot{
  position:absolute; top:12px; right:10px;
  width:7px; height:7px; border-radius:50%; background:#5E6AD2; flex-shrink:0;
}
/* Empty state */
.notif-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 20px; gap:10px; color:var(--muted);
}
.notif-empty svg{ opacity:.35; }
.notif-empty p{ margin:0; font-size:13px; font-weight:500; }

.content{height:calc(100vh - 56px); overflow:hidden; padding-right:8px}
.content.page-scroll{overflow:auto}
.content.editor-open{overflow:auto}
.card{background:rgba(17,24,39,.8); border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden; margin-bottom:12px}
.card-header{display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid rgba(255,255,255,.06)}
.card-header .tabs{border-bottom:0; padding:0; margin:0}
.card-title{margin:0; font-size:16px}
.actions{display:flex; gap:10px}

/* ============ MOBILE ============ */
@media (max-width: 900px){
  .sidebar{position:fixed; left:-250px; top:0; transition:left 0.25s ease; z-index:60}
  .sidebar.mobile-open{left:0; box-shadow:4px 0 24px rgba(0,0,0,.25)}
  .sidebar.collapsed{left:-64px}
  .sidebar.collapsed.mobile-open{left:0}
  .topbar-hamburger{display:flex}
  .mobile-overlay{position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:55; display:none}
  .mobile-overlay.active{display:block}
}

.btn{background:rgba(255,255,255,.1); color:var(--text); border:1px solid #475569; border-radius:10px; padding:6px 10px; cursor:pointer; font-size:14px}
.btn:hover{filter:brightness(1.1)}
.btn:disabled,
.btn[disabled],
button:disabled{
  opacity:0.55;
  cursor:not-allowed;
  filter:none;
  box-shadow:none;
}
.btn:disabled:hover,
.btn[disabled]:hover,
button:disabled:hover{
  filter:none;
}
.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2)); border-color:transparent}
.btn.secondary{background:#fbbf24; border:1px solid #f59e0b; color:#1f2937;}
.btn.secondary:hover{background:#f59e0b; border-color:#d97706; color:#111827;}
.dark .btn.secondary{background:#d97706; border:1px solid #b45309; color:#0b0f1a;}
.dark .btn.secondary:hover{background:#b45309; border-color:#92400e; color:#000;}
.btn.danger{background:#1f2937; border-color:#ef4444; color:#fecaca}
.btn.success{background:#16a34a; border-color:#16a34a; color:#fff}
.btn.success:hover{background:#15803d; border-color:#15803d}
.btn.icon{padding:2px 6px; font-size:12px}
.btn.icon.success{border-color: var(--success); color: var(--success); background:transparent}
.btn.icon.reject{border-color: var(--danger); color: var(--danger); background:transparent}
.btn.icon.edit{border-color: var(--accent); color: var(--text); background:transparent}
.btn.icon.eye{border-color: #475569; color: var(--text); background:transparent}
.btn.is-loading{pointer-events:none; opacity:.75}
.btn .btn-spinner{display:inline-block; width:12px; height:12px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:btnSpin .8s linear infinite; margin-left:6px; vertical-align:middle}
.muted{color:var(--muted); font-size:12px}

.notice-meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 24px; padding:12px 0; border-top:1px solid var(--section-divider,#E2E8F0); color:#64748b; font-size:12px}
.notice-meta .meta-item{background:#f1f5f9; border:1px solid #e2e8f0; border-radius:8px; padding:6px 8px; font-weight:500}
.section-title{margin:0 0 8px; font-size:14px}
.notice-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.notice-list li{padding:8px 10px; border:1px solid rgba(255,255,255,.06); border-radius:10px; background:var(--bg)}
.notice-actions{display:flex; gap:10px; align-items:center; margin-top:8px; flex-wrap:wrap}
.notice-comment-form{display:flex; gap:8px; align-items:flex-end; padding-bottom:12px}
.notice-comment-form textarea{flex:1; max-width:400px; min-width:200px; resize:vertical}
.notice-comment-file-wrap{display:flex; flex-direction:column; gap:2px}
.notice-comment-file-wrap .file-label{font-size:11px; text-align:left; padding-left:2px}
.notice-comment-form input[type="file"]{font-size:13px; padding:6px 8px; min-width:200px}
.notice-comment-form button{white-space:nowrap}
#noticeCommentsSection .note-form{margin-bottom:0}
#noticeCommentsSection .note-list{margin-top:14px}
#noticeStakeholdersWrap{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
#noticeStakeholdersWrap .ms-display{min-width:220px}
.timeline{display:flex; flex-direction:column; gap:8px}
.timeline .timeline-item{padding:8px 10px; border:1px solid rgba(255,255,255,.06); border-radius:10px; background:var(--bg)}
.timeline .timeline-time{font-size:11px; color:var(--muted)}

/* Comment items with avatar circles */
.note-list{display:flex; flex-direction:column; gap:0; margin-top:14px}
.comment-item{display:flex; gap:10px; padding:10px 0; border-bottom:1px solid #f1f5f9; position:relative}
.comment-item:last-child{border-bottom:none}
.comment-avatar{width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:12px; flex-shrink:0; letter-spacing:.5px}
.comment-content{flex:1; min-width:0}
.comment-header{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:2px}
.comment-author{font-size:13px; font-weight:600; color:#0f172a}
.comment-right-info{display:flex; align-items:center; font-size:11px; color:#94a3b8; flex-shrink:0}
.comment-time{display:inline-flex; align-items:center; gap:4px; color:#64748b; background:#f1f5f9; padding:2px 8px; border-radius:6px; font-size:10.5px; font-weight:500; letter-spacing:.01em}
.comment-time svg{opacity:.55; flex-shrink:0}
.comment-second-row{display:flex; flex-direction:column; gap:4px}
.comment-body{font-size:13px; color:#475569; line-height:1.5; word-wrap:break-word}
.comment-attachment-col{font-size:11px; white-space:nowrap; color:#94a3b8; display:flex; align-items:center; gap:4px}
.comment-attachment-col .attachment-label{color:#6366f1; font-weight:600}
.comment-attachment-col .attachment-link{color:#6366f1; text-decoration:none; font-weight:500}
.comment-attachment-col .attachment-link:hover{text-decoration:underline}
.note-reason{color:#ef4444; font-weight:600; font-size:12px}

@keyframes btnSpin{to{transform:rotate(360deg)}}

.search-panel{border-bottom:1px solid rgba(255,255,255,.06); padding:8px 6px}
.search-panel.one-line .grid{grid-template-columns: 0.7fr 0.7fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.6fr 0.4fr; align-items:end; gap:4px}
.search-panel.two-line .grid{grid-template-columns: repeat(6, minmax(0,1fr)); gap:6px}
.search-panel.two-line .grid .grid-actions{grid-column: 2; grid-row: 2; justify-self:start}
.search-panel .grid > *{min-width:0}
.search-panel select, .search-panel input{max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.search-panel.one-line .grid .grid-actions{justify-content:flex-start}
.search-panel .grid label span{font-size:13px; margin-left:8px}
.search-panel input, .search-panel select{padding:4px 6px; font-size:13px}
.search-panel .btn{padding:6px 10px; font-size:13px}
.grid{display:grid; grid-template-columns:repeat(6, 1fr); gap:12px}
.grid label{display:flex; flex-direction:column; gap:6px}
.grid .span-2{grid-column: span 2}
.grid-actions{display:flex; gap:10px; align-items:end}
@media (max-width: 900px){
  .grid{grid-template-columns:repeat(2, 1fr)}
  .grid .span-2, .grid .span-3{grid-column:1 / -1}
}
input, select, textarea{background:var(--bg); color:var(--text); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:7px 10px; font-size:13px; font-family:inherit}
input:focus, select:focus, textarea:focus{outline:none; box-shadow:0 0 0 3px var(--ring)}
select{appearance:none; -webkit-appearance:none; padding-right:32px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat:no-repeat; background-position:right 10px center; background-size:12px; cursor:pointer}
select:hover{border-color:#94a3b8}

.tabs{display:flex; gap:6px; padding:8px 0; border-bottom:0}
.tabs [role=tab]{background:var(--bg); color:var(--text); border:1px solid rgba(255,255,255,.1); padding:6px 10px; border-radius:999px}
.btn.secondary#toggleSearch{background:transparent; border-color: var(--accent); color: #e0e7ff}
.btn.secondary#toggleSearch:hover{background: rgba(124,58,237,0.12)}
.tabs [aria-selected=true]{background:linear-gradient(135deg, var(--accent), var(--accent-2)); border-color:transparent}

.table-wrap{overflow:auto}
.table{width:100%; min-width:900px; border-collapse:separate; border-spacing:0}
.table th, .table td{padding:6px 6px; border-bottom:1px solid rgba(255,255,255,.06); text-align:left; font-size:13px; line-height:1.25}
.table th{font-weight:600}
.table tbody tr:hover{background:var(--bg)}
.th-sort{background:transparent; border:0; color:inherit; cursor:pointer; font:inherit; padding:0}

.form-actions{display:flex; gap:10px; padding:10px 0}
.task-status-chip{display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; border:1px solid #e2e8f0; background:#f8fafc; color:#475569; font-size:11px; font-weight:600; white-space:nowrap; margin-left:auto}
.task-status-label{font-weight:600}
.attachment small{color:var(--muted)}
.file-preview{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.file-list{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}
.file-list:empty{display:none}
.file-chip{background:#f8fafc; border:1px solid #e2e8f0; padding:6px 10px; border-radius:8px; display:inline-flex; gap:6px; align-items:center; max-width:260px; font-size:12px; transition:all .12s}
.file-chip:hover{background:#f1f5f9; border-color:#cbd5e1}
.file-chip a{display:inline-block; max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#4f46e5; text-decoration:none; font-weight:500}
.file-chip a:hover{text-decoration:underline}
.file-chip .file-name{display:inline-block; max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#0f172a; font-weight:500}
.file-chip button{background:transparent; color:#94a3b8; border:0; cursor:pointer; font-size:14px; line-height:1; padding:0 2px; transition:color .12s}
.file-chip button:hover{color:#ef4444}
.file-list-empty{font-size:12px; color:#94a3b8; font-style:italic; padding:6px 2px}

.alert{margin:12px 16px; padding:10px 12px; border-radius:10px}
.alert.info{background:var(--bg); border:1px solid rgba(255,255,255,.1); color:#c7d2fe}

.notes{padding:0 16px 16px}
.notes-header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px}
.notes-header h3{margin:0}
.note-form{display:flex; gap:8px; align-items:flex-end}
.note-file-wrap{display:flex; flex-direction:column; gap:2px; margin-top:2px}
.note-file-wrap .file-label{font-size:11px; text-align:left; padding-left:2px}
.note-form input[type="file"]{font-size:13px; padding:6px 8px; min-width:200px}
.note{background:var(--bg); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:10px}
.note .meta{color:var(--muted); font-size:12px}
/* Override note-form in editor notes section */
.notes-section .note-form{display:block; align-items:initial}
.notes-section .editor-section-title{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; padding-bottom:12px}
.notes-section .editor-section-title .btn.logs-btn{font-size:11px; padding:4px 10px; border-radius:6px; display:inline-flex; align-items:center; gap:4px; background:var(--section-accent-bg,rgba(99,102,241,.04)); border:1px solid var(--section-accent,#6366f1); color:var(--section-accent,#6366f1); font-weight:600; transition:all .12s}
.notes-section .editor-section-title .btn.logs-btn:hover{background:rgba(99,102,241,.1); color:var(--section-accent,#6366f1)}

.toast{position:fixed; top:10px; left:50%; transform:translateX(-50%); background:var(--panel); border:1px solid rgba(255,255,255,.1); padding:12px 16px; border-radius:10px; z-index:1000}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Full-screen login overlay */
.auth .sidebar{display:none}
.auth .topbar{display:none}
.auth .main-content{width:100%}
#panelLogin{position:fixed; inset:0; background:rgba(15,23,42,.92); z-index:50; display:none}
.auth #panelLogin:not([hidden]){display:grid; place-items:center}

/* Improve visibility of calendar icons on date inputs */
input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:1;
  cursor:pointer;
}
.dark input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(72%) sepia(52%) saturate(522%) hue-rotate(180deg) brightness(105%) contrast(98%);
}
.dark input[type="date"]:hover::-webkit-calendar-picker-indicator{
  filter: invert(80%) sepia(60%) saturate(600%) hue-rotate(185deg) brightness(110%) contrast(100%);
}
.dark input[type="date"]:focus::-webkit-calendar-picker-indicator{
  filter: invert(90%) sepia(70%) saturate(800%) hue-rotate(190deg) brightness(115%) contrast(105%);
}

/* Horizontal scroll for wide data tables */
.table-wrap{overflow-x:visible}
.card .table-wrap + form{margin-top:12px}
.table{min-width:0}
/* Keep selection + action columns compact and tight */
.table th:first-child, .table td:first-child{width:34px}
.table th:nth-child(2), .table td:nth-child(2){width:100px}
.table td:nth-child(4){white-space:normal; word-break:break-word}

/* Custom multi-select dropdown */
.ms{position:relative}
.table.settings-table{width:100%; table-layout:auto;}
.table.settings-table td, .table.settings-table th{padding:14px 16px; vertical-align:middle;}
.table.settings-table td:first-child{min-width:360px; max-width:520px; white-space:normal; word-break:normal;}
.table.settings-table td:nth-child(2){min-width:140px;}
.table.settings-table td:nth-child(3){min-width:260px;}
.inline-toggle{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border-color); border-radius:8px; background:var(--surface-color); font-size:13px; white-space:nowrap;}
.inline-toggle input{width:16px; height:16px; accent-color:var(--accent);}
.btn.secondary{background:#fbbf24; border:1px solid #f59e0b; color:#1f2937;}
.btn.secondary:hover{background:#f59e0b; border-color:#d97706; color:#111827;}
.dark .btn.secondary{background:#d97706; border:1px solid #b45309; color:#0b0f1a;}
.dark .btn.secondary:hover{background:#b45309; border-color:#92400e; color:#000;}
.btn.danger{background:#ef4444; color:#fff; border:1px solid #ef4444;}
.btn.danger:hover{background:#dc2626; border-color:#dc2626;}
.grid-actions label span,
.inline-actions label span{white-space:nowrap;}
.ms select{display:none}
.ms-display{background:var(--bg); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:7px 30px 7px 10px; cursor:pointer; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat:no-repeat; background-position:right 10px center; background-size:12px; transition:border-color .15s, box-shadow .15s}
.ms-display:hover{border-color:#94a3b8}
.ms-display.open{box-shadow:0 0 0 3px var(--ring); border-color:#6366f1}
.ms-menu{position:fixed; background:var(--bg); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:4px; z-index:90; min-width:220px; box-shadow:0 12px 40px rgba(0,0,0,.35); animation:msMenuIn .12s ease-out}
@keyframes msMenuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.ms-list{max-height:240px; overflow:auto; padding:2px}
.ms-search{padding:4px 4px 6px}
.ms-search input{width:100%; padding:7px 10px; border:1px solid rgba(255,255,255,.1); border-radius:8px; background:var(--bg); color:var(--text); font-size:13px}
.ms-search input:focus{border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.ms-item{display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; font-size:13px; cursor:pointer; transition:background .1s}
.ms-item:hover{background:var(--panel)}
.ms-item input{accent-color:var(--accent); width:15px; height:15px; cursor:pointer}
.ms-item label{cursor:pointer; flex:1}
.ms-actions{display:flex; justify-content:space-between; gap:8px; padding:6px 4px; border-top:1px solid rgba(255,255,255,.1); margin-top:2px}
.ms-actions .btn{padding:5px 10px; font-size:12px; border-radius:6px; font-weight:600}

/* ── Searchable single-select (editor form) ────────────────── */
.ss-wrap{position:relative}
.ss-wrap select{display:none}
.ss-display{padding:7px 32px 7px 10px; border:1px solid rgba(255,255,255,.1); border-radius:8px; background:var(--bg); color:var(--text); font-size:13px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat:no-repeat; background-position:right 10px center; background-size:12px; transition:border-color .15s, box-shadow .15s}
.ss-display:hover{border-color:#94a3b8}
.ss-display.open{border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.ss-display.ss-placeholder{color:#64748b}
.ss-menu{position:fixed; display:flex; flex-direction:column; background:var(--bg); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:4px; z-index:100; min-width:220px; box-shadow:0 12px 40px rgba(0,0,0,.35); animation:msMenuIn .12s ease-out}
.ss-search{padding:4px 4px 6px}
.ss-search input{width:100%; padding:7px 10px; border:1px solid rgba(255,255,255,.1); border-radius:8px; background:var(--bg); color:var(--text); font-size:13px; font-family:inherit}
.ss-search input:focus{outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.ss-list{overflow:auto; max-height:240px; padding:2px}
.ss-item{padding:7px 10px; border-radius:6px; font-size:13px; cursor:pointer; transition:background .1s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ss-item:hover{background:var(--panel)}
.ss-item.selected{background:#1e293b; color:#a5b4fc; font-weight:600}
.ss-item--add{color:#818cf8; font-style:italic; border-top:1px solid #1e293b; margin-top:2px; padding-top:8px}
.ss-display.ss-disabled{opacity:.5; cursor:not-allowed; pointer-events:none}

/* Compliances: use table area as scroll container; remove outer card scrollbar */
.content > .card:first-of-type .tab-panels{flex:1 1 auto; overflow:hidden; display:flex; flex-direction:column; min-height:0}
#panelForMe:not([hidden]), #panelByMe:not([hidden]){flex:1; display:flex; flex-direction:column; min-height:0}
#panelForMe .table-wrap,
#panelByMe .table-wrap{flex:1 1 auto; overflow:auto; position:relative; margin:0 16px 16px; min-height:0}
#panelNotices:not([hidden]){height:calc(100vh - 56px); display:flex; flex-direction:column; overflow:visible}
#panelNotices .tab-panels{flex:1 1 auto; overflow:hidden; display:flex; flex-direction:column; min-height:0}
#panelNoticesForMe:not([hidden]),
#panelNoticesOthers:not([hidden]){flex:1 1 auto; display:flex; flex-direction:column; min-height:0}
#panelNoticesForMe .table-wrap,
#panelNoticesOthers .table-wrap{flex:1 1 auto; overflow:auto; min-height:0; position:relative; margin:0 16px 16px}

/* Sticky headers for Compliances lists */
#panelForMe .table thead th,
#panelByMe .table thead th{position:sticky; top:0; background:var(--panel); z-index:2}
#panelNoticesForMe .table thead th,
#panelNoticesOthers .table thead th{position:sticky; top:0; background:var(--panel); z-index:2}

/* Make the first (list) card fixed-height with its own vertical scroll */
.content > .card:first-of-type:not([hidden]){height:calc(100vh - 56px); display:flex; flex-direction:column; background:transparent; border:0; border-radius:0}
/* Unify all main panels into a single container card */
.content > .card{background:transparent; border:0; border-radius:0; margin-bottom:0}
.content > .card:first-of-type .search-panel{flex:0 0 auto}
.content > .card:first-of-type .tabs{flex:0 0 auto}
.content > .card:first-of-type .tab-panels{flex:1 1 auto; overflow:hidden}

/* ── Editor: layout ─────────────────────────────────────────── */
#editor:not([hidden]), #noticeEditor:not([hidden]){height:calc(100vh - 56px); overflow-y:auto; overflow-x:visible; margin-bottom:0; background:var(--bg-color,#f8fafc)}
#editor .card-header, #noticeEditor .card-header{position:sticky; top:0; background:var(--panel); z-index:2}
#editor .grid, #noticeEditor .grid{min-width:0; grid-template-columns:repeat(3, 1fr); gap:14px}
#editor form, #noticeEditor form{padding:20px 24px 28px}
.span-3{grid-column:1 / -1}

/* ── Editor: action bar ─────────────────────────────────────── */
.editor-header{padding:0 !important; border-bottom:none !important; background:transparent !important}
.editor-bar{display:flex; align-items:center; gap:5px; margin:14px 24px; padding:8px 12px; background:#fff; border:1px solid var(--border-color,#e2e8f0); border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)}
.editor-bar__back{width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border-color,#e2e8f0); background:#fff; border-radius:8px; color:#64748b; cursor:pointer; flex-shrink:0; transition:all .12s}
.editor-bar__back:hover{background:#f1f5f9; color:#0f172a}
.editor-bar__title{font-size:13px; font-weight:700; color:#0f172a; padding:0 4px; white-space:nowrap}
.editor-bar__sep{width:1px; height:20px; background:var(--border-color,#e2e8f0); margin:0 3px; flex-shrink:0}
.editor-bar__btn{padding:6px 14px; border:1px solid transparent; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; transition:all .12s}
.editor-bar__btn:hover{filter:brightness(.95)}
.editor-bar__btn:disabled{opacity:.4; cursor:not-allowed; filter:none}
.editor-bar__btn--primary{background:#4f46e5; color:#fff}
.editor-bar__btn--primary:hover{background:#4338ca}
.editor-bar__btn--complete{background:#16a34a; color:#fff}
.editor-bar__btn--complete:hover{background:#15803d}
.editor-bar__btn--reject{background:#fef2f2; color:#dc2626; border-color:#fecaca}
.editor-bar__btn--reject:hover{background:#fee2e2}
.editor-bar__btn--neutral{background:#f8fafc; color:#475569; border-color:#e2e8f0}
.editor-bar__btn--neutral:hover{background:#f1f5f9}
.editor-bar__btn--request-edit{background:#fff7ed; color:#c2410c; border-color:#fdba74; box-shadow:0 4px 12px rgba(249,115,22,.14)}
.editor-bar__btn--request-edit:hover{background:#ffedd5; border-color:#fb923c}
.editor-bar__btn--delete{background:#fff; color:#dc2626; border-color:#fecaca}
.editor-bar__btn--delete:hover{background:#fef2f2}

/* ── Editor: section cards ─────────────────────────────────── */
.editor-section{background:var(--surface-color,#fff); border:1px solid var(--border-color,#e2e8f0); border-radius:12px; padding:20px 22px; margin-bottom:18px; box-shadow:var(--section-shadow, 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04)); transition:box-shadow .2s ease, border-color .2s ease}
.editor-section:hover{box-shadow:0 2px 6px rgba(0,0,0,.08), 0 8px 20px rgba(0,0,0,.06)}
.editor-section:last-of-type{margin-bottom:0}
.editor-section-title{font-size:13px; font-weight:700; color:var(--section-header-color,#1E293B); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--section-divider,#E2E8F0); display:flex; align-items:center; justify-content:space-between; gap:8px; position:relative; padding-left:14px}
.editor-section-title::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:3px; background:var(--section-accent,#6366f1)}
.section-title-left{display:inline-flex; align-items:center; gap:8px}
.section-icon{width:15px; height:15px; color:var(--section-accent,#6366f1); flex-shrink:0; opacity:.8}

/* ── Editor: labels ────────────────────────────────────────── */
.editor-label{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:#64748b; margin-bottom:2px}
.req{color:#ef4444; margin-left:1px}

/* ── Editor: inputs ────────────────────────────────────────── */
#editor input, #editor select, #editor textarea, #noticeEditor input, #noticeEditor select, #noticeEditor textarea{border-radius:8px; padding:7px 10px; font-size:13px; transition:border-color .15s, box-shadow .15s}
#editor input:focus, #editor select:focus, #editor textarea:focus, #noticeEditor input:focus, #noticeEditor select:focus, #noticeEditor textarea:focus{border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15)}
#editor textarea{line-height:1.5}

/* ── Editor: dropzone ──────────────────────────────────────── */
.editor-dropzone{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:18px 16px; border:2px dashed var(--border-color,rgba(255,255,255,.1)); border-radius:10px; cursor:pointer; transition:border-color .15s, background .15s}
.editor-dropzone:hover{border-color:#6366f1; background:rgba(99,102,241,.04)}
.editor-dropzone svg{opacity:.4; color:#475569}
.editor-dropzone span{font-size:12px; font-weight:500; color:#475569}
.editor-dropzone small{font-size:11px; color:#64748b}
.editor-dropzone input[type="file"]{position:absolute; inset:0; opacity:0; cursor:pointer}

/* ── FC Image dropzone ─────────────────────────────────────── */
.fc-image-dropzone{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:16px 12px; border:2px dashed var(--border-color,rgba(255,255,255,.1)); border-radius:10px; cursor:pointer; transition:border-color .15s, background .15s; margin-top:4px}
.fc-image-dropzone:hover{border-color:#6366f1; background:rgba(99,102,241,.04)}
.fc-image-dropzone.drag-over{border-color:#6366f1; background:rgba(99,102,241,.08)}
.fc-image-dropzone svg{opacity:.4; color:#475569}
.fc-image-dropzone span{font-size:12px; font-weight:500; color:#475569}
.fc-image-dropzone small{font-size:11px; color:#64748b}
.fc-image-dropzone input[type="file"]{position:absolute; inset:0; opacity:0; cursor:pointer}
.fc-image-preview{align-items:center; gap:10px; margin-top:8px; padding:8px 10px; border:1px solid var(--border-color,#e2e8f0); border-radius:8px; background:var(--surface-color,#fff)}
.fc-image-preview:not([hidden]){display:flex}
.fc-image-preview img{width:48px; height:48px; object-fit:cover; border-radius:6px; border:1px solid var(--border-color,#e2e8f0)}
.fc-image-preview .fc-image-info{flex:1; min-width:0}
.fc-image-preview .fc-image-name{font-size:12px; font-weight:600; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fc-image-preview .fc-image-size{font-size:11px; color:#64748b}
.fc-image-preview .fc-image-remove{width:24px; height:24px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; color:#ef4444; cursor:pointer; border-radius:6px; flex-shrink:0}
.fc-image-preview .fc-image-remove:hover{background:#fef2f2}

/* ── Editor: notes section ─────────────────────────────────── */
.notes-section{margin:0 24px 32px; padding:20px 22px !important; border-bottom:none}
.notes-section .editor-section-title{margin-bottom:16px; padding-bottom:12px}
.note-form{margin-bottom:0; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:10px; transition:border-color .15s}
.note-form:focus-within{border-color:#6366f1}
.note-form-input{display:flex; flex-direction:column; gap:0}
.note-form-input textarea{border:none; background:transparent; padding:6px 4px; font-size:13px; line-height:1.5; min-height:36px; resize:vertical; outline:none; color:inherit}
.note-form-input textarea::placeholder{color:#94a3b8}
.note-form-bottom{display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:6px; border-top:1px solid #e2e8f0}
.note-file-label{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; color:#6366f1; cursor:pointer; padding:4px 8px; border-radius:6px; transition:background .12s}
.note-file-label:hover{background:rgba(99,102,241,.08)}
.note-file-label input[type="file"]{display:none}
.note-file-label svg{opacity:.7}
.note-file-actions{display:flex; align-items:center; gap:6px; flex:1; min-width:0}
.note-file-chip{align-items:center; gap:5px; padding:3px 8px; background:#eef2ff; border:1px solid #c7d2fe; border-radius:6px; font-size:11px; font-weight:500; color:#4f46e5; max-width:220px; animation:editorIn .15s ease-out}
.note-file-chip:not([hidden]){display:inline-flex}
.note-file-chip svg{flex-shrink:0; opacity:.6}
.note-file-chip span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.note-file-chip button{background:none; border:none; color:#6366f1; cursor:pointer; font-size:14px; line-height:1; padding:0 1px; flex-shrink:0; opacity:.6; transition:opacity .12s}
.note-file-chip button:hover{opacity:1}
.note-form-bottom .btn.primary{font-size:12px; padding:5px 14px; border-radius:6px}
.note-list-empty{text-align:center; padding:24px 16px; color:#94a3b8; font-size:13px}
.note-list-empty svg{display:block; margin:0 auto 8px; opacity:.3}

/* ── Editor: animation ─────────────────────────────────────── */
#editor:not([hidden]){animation:editorIn .2s ease}
@keyframes editorIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Due Date N/A inline UI */
.inline-na .na-wrap{display:flex; align-items:center; gap:8px}
.inline-na .na-toggle{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border:1px solid #e2e8f0; border-radius:8px; cursor:pointer; user-select:none; background:#f8fafc; font-size:12px; font-weight:600; color:#64748b; transition:all .15s; white-space:nowrap}
.inline-na .na-toggle:hover{background:#f1f5f9; border-color:#cbd5e1}
.inline-na .na-toggle input[type="checkbox"]{accent-color:#6366f1; width:14px; height:14px; margin:0; cursor:pointer}
.inline-na.na-selected .na-toggle{background:#eef2ff; border-color:#c7d2fe; color:#4f46e5}
.inline-na.na-selected .date-input{opacity:.45; pointer-events:none}

/* Settings panels: avoid forced horizontal scrolling */
#panelCategories .table,
#panelNoticeTypes .table,
#panelNotifications .table,
#panelCompanies .table,
#panelUsers .table,
#panelReminderPolicies .table{min-width:0}
#panelCategories .table-wrap,
#panelNoticeTypes .table-wrap,
#panelNotifications .table-wrap,
#panelCompanies .table-wrap,
#panelUsers .table-wrap,
#panelReminderPolicies .table-wrap{overflow-x:visible}
#panelReminderPolicies .table input{width:110px; max-width:110px; text-align:right}
#panelReminderPolicies .table{width:auto; min-width:0; display:inline-table}
#panelReminderPolicies .table th:first-child,
#panelReminderPolicies .table td:first-child{padding-right:16px}
#panelReminderPolicies .table th:nth-child(2),
#panelReminderPolicies .table td:nth-child(2){padding-right:8px}
#panelReminderPolicies .table th:last-child,
#panelReminderPolicies .table td:last-child{padding-left:8px}
#panelReminderPolicies .table td{white-space:normal}

/* ── Compliance Builder (Standards) ────────────────────────── */
#panelStandards{background:transparent; border:none; box-shadow:none; border-radius:0; overflow:visible}
.builder-header{border-bottom:none !important; padding:16px 24px !important; background:transparent !important}
.builder-title-row{display:flex; align-items:center; justify-content:space-between; width:100%}
.builder-heading{font-size:16px; font-weight:700; color:var(--section-header-color,#1E293B)}
.builder-search{display:flex; align-items:center; gap:8px; border:1px solid var(--border-color,#e2e8f0); border-radius:8px; padding:2px 12px; background:var(--surface-color,#fff); transition:border-color .15s}
.builder-search:focus-within{border-color:#6366f1}
.builder-search svg{color:#b0b8c4; flex-shrink:0}
.builder-search input{border:none; outline:none; font-size:13px; color:var(--text); width:200px; font-family:inherit; background:transparent}
.builder-search input::placeholder{color:#b0b8c4}
.builder-body{display:flex; flex-direction:column; flex:1 1 auto; min-height:0; padding:0 24px}
.builder-body .table-wrap{flex:1 1 auto; overflow:auto; min-height:0; border:1px solid var(--border-color,#e2e8f0); border-radius:12px 12px 0 0; box-shadow:var(--section-shadow,0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04))}
.builder-add-row{flex:0 0 auto; background:var(--surface-color,#fff); border:1px solid var(--border-color,#e2e8f0); border-top:none; border-radius:0 0 12px 12px; padding:14px 18px; box-shadow:var(--section-shadow,0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04))}
.builder-add-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr auto; gap:10px; align-items:end}
.builder-field{display:flex; flex-direction:column; gap:4px; min-width:0}
.builder-field--title{min-width:140px}
.builder-field--btn{display:flex; align-items:flex-end}
#panelStandards .table{min-width:0}
#panelStandards .table th:nth-child(1),
#panelStandards .table td:nth-child(1){width:40%; white-space:normal; word-break:break-word}
#panelStandards .table th:nth-child(2),
#panelStandards .table td:nth-child(2){width:13%}
#panelStandards .table th:nth-child(3),
#panelStandards .table td:nth-child(3){width:11%}
#panelStandards .table th:nth-child(4),
#panelStandards .table td:nth-child(4){width:10%}
#panelStandards .table th:nth-child(5),
#panelStandards .table td:nth-child(5){width:9%}
#panelStandards .table th:nth-child(6),
#panelStandards .table td:nth-child(6){width:9%}
#panelStandards .table th:nth-child(7),
#panelStandards .table td:nth-child(7){width:8%}
#panelStandards .table-wrap{overflow-x:visible}
#panelStandards .table thead th{padding:10px 14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; position:sticky; top:0; z-index:2}
#panelStandards .table td{padding:10px 14px; font-size:13px; vertical-align:middle}

/* ── Site Builder: layout ─────────────────────────────────── */
.site-builder-form{display:flex; flex-direction:column; height:100%}
.site-builder-top{display:flex; align-items:flex-end; gap:16px; padding:0 0 14px}
.site-builder-fc{display:flex; flex-direction:column; gap:4px}
.site-builder-fc select{min-width:260px; padding:7px 10px; border-radius:8px; font-size:13px}
.site-builder-fc .ss-wrap{min-width:260px; max-width:360px}
.site-builder-fc .ss-display{width:100%}
.site-builder-count{font-size:13px; color:#64748b; margin-left:auto; white-space:nowrap}
.site-builder-form{flex:1 1 auto; overflow:hidden; display:flex; flex-direction:column; min-height:0}
.site-builder-top{flex:0 0 auto}
.site-builder-table-wrap{flex:1 1 auto; overflow:auto; min-height:0; border:1px solid var(--border-color,#e2e8f0); border-radius:12px 12px 0 0; box-shadow:var(--section-shadow,0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04))}
#stdHeaderRow{position:sticky; top:0; z-index:2; background:var(--surface-color,#fafbfc); border-bottom:2px solid var(--border-color,#e2e8f0)}
#stdHeaderRow .grid{padding:10px 14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#64748b; align-items:center}
.site-builder-table-wrap .grid{padding:8px 14px; border-bottom:1px solid var(--border-color,#e2e8f0); font-size:13px; align-items:center}
#stdApplyRows > .grid:nth-child(even){background:#f1f5f9}
#stdApplyRows .grid:hover{background:rgba(99,102,241,.04)}
#stdApplyRows .ss-wrap{width:100%}
#stdApplyRows .ss-display{padding:5px 28px 5px 8px; border-radius:6px; font-size:12px; width:100%}
.site-builder-footer{flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; padding:12px 18px; background:var(--surface-color,#fff); border:1px solid var(--border-color,#e2e8f0); border-top:none; border-radius:0 0 12px 12px; box-shadow:var(--section-shadow,0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04))}
.site-builder-footer .btn.primary{display:inline-flex; align-items:center; gap:6px; padding:8px 20px; font-size:13px; font-weight:600; border-radius:8px}

/* Settings: Notifications tab spacing */
#panelNotifications .table th,
#panelNotifications .table td{padding:10px 18px}
#panelNotifications .table th:nth-child(1),
#panelNotifications .table td:nth-child(1){width:180px}
#panelNotifications .table th:nth-child(2),
#panelNotifications .table td:nth-child(2){width:260px}
#panelNotifications .table th:nth-child(3),
#panelNotifications .table td:nth-child(3){width:200px}

/* ── Auth / Login Screen ───────────────────────────────────────────────── */
.auth-overlay{position:fixed; inset:0; z-index:70; display:none; background:#080e1c}
.auth .auth-overlay:not([hidden]){display:flex}

/* Split container */
.auth-split{display:flex; width:100%; height:100%}

/* ── Left: brand panel ── */
.auth-brand-panel{
  flex:0 0 52%;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:56px 64px;
  background:linear-gradient(135deg, #0d1525 0%, #0f1e3a 50%, #111827 100%);
  border-right:1px solid rgba(255,255,255,.06);
  position:relative; overflow:hidden;
}
/* Subtle geometric accent */
.auth-brand-panel::before{
  content:''; position:absolute; top:-120px; right:-120px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(94,106,210,.18) 0%, transparent 70%);
  pointer-events:none;
}
.auth-brand-panel::after{
  content:''; position:absolute; bottom:-80px; left:-60px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(129,140,248,.1) 0%, transparent 70%);
  pointer-events:none;
}
.auth-brand-logo{display:flex; align-items:center; gap:10px}
.auth-brand-svg{width:34px; height:34px; flex-shrink:0}
.auth-brand-name{font-size:18px; font-weight:700; letter-spacing:-.3px; color:#F7F8F8}
.auth-brand-body{flex:1; display:flex; flex-direction:column; justify-content:center; padding:48px 0 32px}
.auth-brand-headline{
  font-size:36px; font-weight:700; line-height:1.2; letter-spacing:-.5px;
  margin:0 0 16px;
  background:linear-gradient(135deg, #F7F8F8 40%, #818cf8 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.auth-brand-sub{font-size:15px; color:#94a3b8; line-height:1.6; margin:0 0 40px; max-width:340px}
.auth-feat-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px}
.auth-feat-list li{display:flex; align-items:center; gap:12px; font-size:14px; color:#cbd5e1; font-weight:500}
.auth-feat-icon{width:20px; height:20px; flex-shrink:0; display:flex; align-items:center; justify-content:center}
.auth-feat-icon svg{width:16px; height:16px}
.auth-brand-footer{font-size:12px; color:#475569; letter-spacing:.2px}

/* ── Right: auth form panel ── */
.auth-form-panel{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  background:#080e1c;
  padding:40px 32px;
}
.auth-card{
  width:100%; max-width:380px;
  display:flex; flex-direction:column; gap:0;
}
.auth-card-logo{display:flex; align-items:center; gap:9px; margin-bottom:36px}
.auth-card-svg{width:28px; height:28px; flex-shrink:0}
.auth-card-brand{font-size:15px; font-weight:700; color:#F7F8F8; letter-spacing:-.2px}
.auth-card-title{font-size:26px; font-weight:700; letter-spacing:-.4px; color:#F7F8F8; margin:0 0 8px}
.auth-card-sub{font-size:13.5px; color:#64748b; line-height:1.55; margin:0 0 32px}
.auth-form{display:flex; flex-direction:column; gap:0}
.auth-form .full{width:100%}
.auth-form label{display:flex; flex-direction:column; gap:6px}
.auth-actions{display:flex; gap:10px; align-items:center; justify-content:flex-start}
.auth-actions .spacer{flex:1}
.auth-form .alert{white-space:normal; overflow:visible; text-overflow:clip; margin-bottom:16px}
/* Custom Google sign-in button */
.auth-google-outer{
  position:relative; width:100%; height:48px; margin-top:4px;
  border-radius:10px; overflow:hidden;
}
.auth-google-custom-btn{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; height:100%; padding:0;
  background:#ffffff; border:1.5px solid rgba(0,0,0,.12);
  border-radius:10px; cursor:pointer;
  font-size:14.5px; font-weight:500; color:#3c4043; font-family:inherit; letter-spacing:.1px;
  pointer-events:none; /* real clicks go to the iframe overlay above */
  transition:background .12s, box-shadow .12s;
}
.auth-google-outer:hover .auth-google-custom-btn{
  background:#f8f9fa; box-shadow:0 2px 10px rgba(0,0,0,.14);
}
.auth-google-outer:active .auth-google-custom-btn{ background:#f1f3f4; }
/* Invisible Google iframe — sits above the custom button and handles real auth clicks */
#googleBtnWrap{
  position:absolute; inset:0; z-index:2;
  opacity:0.001; overflow:hidden; cursor:pointer;
}
#googleBtnWrap > div{ width:100% !important; height:100% !important; }
#googleBtnWrap iframe{ width:100% !important; height:48px !important; min-width:0 !important; }
/* De-emphasize the JS-injected hint — we have our own copy in HTML */
#googleHint{display:none !important}
.auth-card-footnote{font-size:11.5px; color:#374151; line-height:1.5; margin:28px 0 0; border-top:1px solid rgba(255,255,255,.05); padding-top:20px}

/* ── Responsive: stack on small screens ── */
@media(max-width:768px){
  .auth-split{flex-direction:column}
  .auth-brand-panel{flex:0 0 auto; padding:36px 28px 32px; border-right:none; border-bottom:1px solid rgba(255,255,255,.06)}
  .auth-brand-headline{font-size:24px}
  .auth-brand-body{padding:24px 0 16px}
  .auth-brand-sub{margin-bottom:24px}
  .auth-feat-list{display:none}
  .auth-form-panel{padding:32px 24px 40px}
  .auth-card{max-width:100%}
}
/* Legacy style.css overrides for light/dark modes — neutralise */
.auth-card header,.dark .auth-card header{border:none; padding:0}
.auth-hint{display:none}



/* Skeletons */
.skeleton{background:linear-gradient(90deg, var(--bg), #0f172a, var(--bg)); background-size:200% 100%; animation:shimmer 1.2s infinite}
.skeleton.text{height:12px; border-radius:6px}
.skeleton.row{height:36px; border-bottom:1px solid rgba(255,255,255,.06)}
@keyframes shimmer{0%{background-position:200% 0} 100%{background-position:-200% 0}}

/* Dashboard filters — compact SaaS style */
#panelDashboard .grid.two-line{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-bottom:20px}
#panelDashboard .grid.two-line > label{display:flex; flex-direction:column; gap:3px; flex:1 1 130px; min-width:120px}
#panelDashboard .grid.two-line label > span{font-size:10px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.4px; margin:0}
#panelDashboard .grid.two-line .ms-display{padding:7px 12px; border-radius:8px; font-size:13px; width:100%}
#panelDashboard .grid.two-line input{padding:7px 12px; border-radius:8px; font-size:13px; width:100%}
#panelDashboard .grid.two-line input.date-input{padding-right:36px}
#panelDashboard .grid.two-line select{padding:7px 12px; border-radius:8px; font-size:13px; width:100%}
#panelDashboard .grid.two-line > label.filter-narrow{flex:0 0 auto; max-width:130px}
#panelDashboard .grid.two-line > .filter-reset-wrap{display:flex; align-items:flex-end; flex:0 0 auto}
#panelDashboard .grid.two-line .filter-reset{padding:7px 16px; border-radius:8px; font-size:12px; font-weight:600; background:transparent; color:#94a3b8; border:1px solid rgba(255,255,255,.1); cursor:pointer; transition:all .15s; font-family:inherit}
#panelDashboard .grid.two-line .filter-reset:hover{background:#1e293b; color:#cbd5e1}
#panelDashboard .grid.two-line .filter-reset.secondary{background:#fbbf24; border-color:#f59e0b; color:#1f2937}
#panelDashboard .grid.two-line .filter-reset.secondary:hover{background:#f59e0b; border-color:#d97706; color:#111827}
#panelDashboard .grid.two-line input:focus,
#panelDashboard .grid.two-line select:focus{border-color:var(--accent, #6366f1); box-shadow:0 0 0 3px rgba(99,102,241,.12)}
#panelDashboard .grid.two-line .ms-display.open{border-color:var(--accent, #6366f1); box-shadow:0 0 0 3px rgba(99,102,241,.12)}

/* Dashboard tab group */
.tab-group{display:inline-flex; gap:2px; background:#1e293b; border-radius:10px; padding:3px}
.tab-item{padding:7px 18px; border-radius:8px; font-size:13px; font-weight:500; color:#94a3b8; cursor:pointer; transition:all .15s; border:none; background:none; font-family:inherit}
.tab-item:hover{color:#cbd5e1}
.tab-item.active, .tab-item[aria-selected="true"]{background:#0f172a; color:#f1f5f9; font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.2)}
.dash-tab-bar{padding:16px 16px 0; flex:0 0 auto}

/* Dashboard KPI cards */
.kpi-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:24px}
@media (max-width: 1100px){ .kpi-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 600px){ .kpi-grid{grid-template-columns:1fr} }
.kpi-card{background:var(--bg); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:18px; transition:background .25s, border-color .25s}
.kpi-card:hover{border-color:#2d3748}
.kpi-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.kpi-label{font-size:12px; color:#94a3b8; font-weight:500}
.kpi-icon{width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.kpi-icon svg{width:18px; height:18px}
.kpi-icon.green{background:rgba(34,197,94,.15); color:#22c55e}
.kpi-icon.red{background:rgba(239,68,68,.15); color:#ef4444}
.kpi-icon.blue{background:rgba(59,130,246,.15); color:#3b82f6}
.kpi-icon.amber{background:rgba(245,158,11,.15); color:#f59e0b}
.kpi-value{font-size:30px; font-weight:800; color:#f1f5f9; line-height:1}
.kpi-sub{font-size:12px; color:#64748b; margin-top:4px}
.kpi-bar{height:5px; background:#1e293b; border-radius:100px; margin-top:12px; overflow:hidden}
.kpi-bar-fill{height:100%; border-radius:100px; transition:width .6s ease}
/* KPI loading skeleton */
.kpi-card.loading .kpi-value,
.kpi-card.loading .kpi-sub{background:linear-gradient(90deg, var(--bg), #1f2937, var(--bg)); background-size:200% 100%; animation:chartSpin .7s linear infinite; border-radius:4px; color:transparent}

/* Dashboard charts layout */
.charts-row{display:grid; grid-template-columns:5fr 3fr; gap:14px; margin-bottom:20px}
@media (max-width: 900px){ .charts-row{grid-template-columns:1fr} }
.charts-secondary{display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:14px; margin-bottom:20px}
.chart-subtitle{font-size:12px; color:#64748b; margin-top:2px}
/* Compact chart card heights in primary row */
.charts-row .chart-card .chart-canvas-wrap{min-height:160px; max-height:240px}
.charts-row .chart-card:last-child .chart-canvas-wrap{min-height:140px; max-height:220px}

/* Chart cards */
.chart-card{background:var(--bg); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:10px; display:flex; flex-direction:column; min-height:0; position:relative; min-width:0; overflow:hidden}
.chart-card-header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 2px 4px}
.chart-card-header h3{margin:0; font-size:14px; font-weight:600; color:#cbd5e1; letter-spacing:.01em}
.chart-canvas-wrap{position:relative; width:100%; flex:1 1 auto; min-height:170px; overflow-x:auto; overflow-y:hidden}
.chart-scroll-inner{position:relative; height:100%; min-width:100%}
.chart-scroll-inner canvas{position:absolute; inset:0; width:100% !important; height:100% !important}
.chart-max{padding:4px 8px}
/* Chart loading overlay */
.chart-loading{display:none; position:absolute; inset:0; z-index:10; background:rgba(11,18,32,.75); border-radius:12px; align-items:center; justify-content:center}
.chart-loading.active{display:flex}
.chart-spinner{width:36px; height:36px; border:3px solid #1f2937; border-top-color:#8b5cf6; border-radius:50%; animation:chartSpin .7s linear infinite}
@keyframes chartSpin{to{transform:rotate(360deg)}}
/* Chart empty state */
.chart-empty{display:none; position:absolute; inset:0; z-index:9; align-items:center; justify-content:center; flex-direction:column; gap:8px; pointer-events:none}
.chart-empty.visible{display:flex}
.chart-empty-icon{font-size:28px; opacity:.35}
.chart-empty-text{font-size:13px; color:#64748b; font-weight:500}

/* Activity series toggle */
.series-toggle{display:flex; justify-content:center; align-items:center; gap:16px; padding:8px 0 6px; flex-wrap:wrap}
.series-label{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; cursor:pointer; user-select:none; color:#475569; transition:opacity .15s}
.series-label input[type=checkbox]{display:none}
.series-label .legend-box{width:12px; height:12px; border-radius:3px; flex-shrink:0; transition:opacity .15s}
.series-label.inactive{opacity:.45; text-decoration:line-through}
.series-label.inactive .legend-box{opacity:.4}
.series-under-review .legend-box{background:#f59e0b}
.series-completed .legend-box{background:#22c55e}
.series-rejected .legend-box{background:#ef4444}

/* Chart modal */
.chart-modal{position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.55); z-index:80}
.chart-modal[hidden]{display:none !important}
.chart-modal-card{width:min(1200px, 96vw); height:min(80vh, 800px); background:var(--bg); border:1px solid rgba(255,255,255,.06); border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.45)}
.chart-modal-card header{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #111827}
.chart-modal-card h3{margin:0; font-size:16px}
.chart-modal-body{position:relative; height:calc(100% - 48px); padding:8px; overflow-x:auto; overflow-y:hidden}
.chart-modal-scroll-inner{position:relative; height:100%; min-width:100%}
.chart-modal-scroll-inner canvas{position:absolute; inset:0; width:100% !important; height:100% !important}

/* Fixed-height Dashboard, Standards, and Site Builder cards with internal scroll */
/* Dashboard panel: visually remove card styling but keep .card class for JS panel switching */
#panelDashboard.dashboard-panel{background:transparent; border:none; padding:0; box-shadow:none; border-radius:0}
#panelDashboard:not([hidden]),
#panelStandards:not([hidden]){
  height:calc(100vh - 56px);
  display:flex;
  flex-direction:column;
  margin-bottom:0;
}
/* ── Site Builder ──────────────────────────────────────────── */
#panelSiteBuilder{background:transparent; border:none; box-shadow:none; border-radius:0; overflow:visible}
#panelSiteBuilder:not([hidden]){height:calc(100vh - 56px); display:flex; flex-direction:column; margin-bottom:0}
#panelDashboard:not([hidden]) > .dash-tab-bar,
#panelStandards:not([hidden]) > header{flex:0 0 auto}
#panelDashboard:not([hidden]) > div:not(.dash-tab-bar){flex:1 1 auto; overflow:auto; overflow-x:hidden; min-height:0}
#panelStandards:not([hidden]) > .builder-body{flex:1 1 auto; overflow:hidden; display:flex; flex-direction:column; min-height:0}
#panelStandards .builder-body .table-wrap{flex:1 1 auto; overflow:auto; min-height:0}
#panelStandards .builder-add-row{flex:0 0 auto; position:sticky; bottom:0; z-index:3}
#panelSiteBuilder:not([hidden]) > .builder-body{flex:1 1 auto; overflow:hidden; display:flex; flex-direction:column; min-height:0}

/* Fixed-height Settings card with internal vertical scroll */
#panelSettings:not([hidden]){height:calc(100vh - 56px); display:flex; flex-direction:column; margin-bottom:0}
#panelSettings:not([hidden]) > header{flex:0 0 auto}
#panelSettings:not([hidden]) > div{flex:1 1 auto; overflow:hidden; display:flex; flex-direction:column; min-height:0}
/* Within settings, keep tabs fixed and panels filling remaining space */
#panelSettings .tabs{flex:0 0 auto}
#panelSettings [role="tabpanel"]{flex:1 1 auto; min-height:0}

/* In Settings: keep add forms fixed at bottom; list scrolls */
#panelSettings #panelCategories:not([hidden]),
#panelSettings #panelNoticeTypes:not([hidden]),
#panelSettings #panelNotifications:not([hidden]),
#panelSettings #panelCompanies:not([hidden]),
#panelSettings #panelUsers:not([hidden]),
#panelSettings #panelReminderPolicies:not([hidden]){display:flex; flex-direction:column; height:100%; overflow:hidden; min-height:0}
#panelSettings #panelCategories .table-wrap,
#panelSettings #panelNoticeTypes .table-wrap,
#panelSettings #panelNotifications .table-wrap,
#panelSettings #panelCompanies .table-wrap,
#panelSettings #panelUsers .table-wrap,
#panelSettings #panelReminderPolicies .table-wrap{flex:1 1 auto; overflow:auto; min-height:0}
#panelForMe .table-wrap::-webkit-scrollbar,
#panelByMe .table-wrap::-webkit-scrollbar{width:6px; height:0}
#panelForMe .table-wrap::-webkit-scrollbar-track,
#panelByMe .table-wrap::-webkit-scrollbar-track{background:transparent}
#panelForMe .table-wrap::-webkit-scrollbar-thumb,
#panelByMe .table-wrap::-webkit-scrollbar-thumb{background:rgba(15,23,42,.15); border-radius:999px}
/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge{display:inline-flex; align-items:center; padding:3px 10px; border-radius:100px; font-size:11px; font-weight:600; white-space:nowrap}
.badge-success{background:#dcfce7; color:#16a34a}
.badge-warning{background:#fef3c7; color:#d97706}
.badge-danger{background:#fee2e2; color:#dc2626}
.badge-info{background:#dbeafe; color:#2563eb}
.badge-neutral{background:#1e293b; color:#94a3b8}
.badge-purple{background:#2e1065; color:#a78bfa}

/* ── Act buttons (row actions: approve/reject/edit) ──────────────────────── */
.act-btn{width:24px; height:24px; border-radius:5px; border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; transition:opacity .15s; flex-shrink:0}
.act-btn:hover{opacity:.75}
.act-approve{background:#dcfce7; color:#16a34a}
.act-reject{background:#fee2e2; color:#dc2626}
.act-edit{background:#dbeafe; color:#2563eb}
.act-btn svg{width:13px; height:13px}
.row-actions{display:flex; gap:4px; align-items:center}

/* ── Compliance tracker: outer panel neutralised (body-level filters) ────── */
#panelTasks.tracker-panel{background:transparent; border:none; box-shadow:none; border-radius:0; overflow:visible; margin-bottom:0; position:relative}
/* ── Bulk action bar: floating pill ─────────────────────────────────────── */
.bulk-bar{position:absolute; bottom:20px; left:0; right:0; display:flex; justify-content:center; pointer-events:none; z-index:20}
.bulk-bar__pill{display:inline-flex; align-items:center; gap:4px; padding:5px 8px; background:#0f172a; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12); pointer-events:auto; animation:bulkBarIn .18s ease}
@keyframes bulkBarIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.bulk-bar__clear{width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); border:none; border-radius:6px; color:rgba(255,255,255,.6); cursor:pointer; transition:background .15s,color .15s; flex-shrink:0; padding:0}
.bulk-bar__clear:hover{background:rgba(255,255,255,.15); color:#fff}
.bulk-bar__clear svg{width:10px; height:10px}
.bulk-bar__count{font-size:12px; font-weight:600; color:rgba(255,255,255,.85); padding:0 6px; white-space:nowrap; margin-left:4px}
.bulk-bar__divider{width:1px; height:16px; background:rgba(255,255,255,.15); margin:0 4px; flex-shrink:0}
.bulk-bar__btn{display:inline-flex; align-items:center; padding:5px 10px; border:none; border-radius:7px; font-size:12px; font-weight:600; cursor:pointer; transition:opacity .15s; white-space:nowrap; font-family:inherit; line-height:1}
.bulk-bar__btn:hover{opacity:.8}
.bulk-bar__btn--complete{background:#16a34a; color:#fff}
.bulk-bar__btn--reject{background:rgba(239,68,68,.18); color:#f87171; border:1px solid rgba(239,68,68,.25)}
.bulk-bar__btn--neutral{background:rgba(255,255,255,.08); color:rgba(255,255,255,.8)}
.bulk-bar__btn--neutral:hover{background:rgba(255,255,255,.14); opacity:1}
.bulk-bar__btn--delete{background:#dc2626; color:#fff}

/* ── Compliance tracker: card-header ─────────────────────────────────────── */
#panelTasks .card-header{border-bottom:none; padding:12px 16px 12px}

/* ── Compliance tracker: filter bar ─────────────────────────────────────── */
#panelTasks .search-panel{border-bottom:0; padding:0 16px 16px; background:transparent}
#panelTasks .search-panel .grid{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end}
#panelTasks .search-panel .grid > label{display:flex; flex-direction:column; gap:3px; flex:1 1 120px; min-width:100px}
#panelTasks .search-panel .grid label > span{font-size:10px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.4px; margin:0}
#panelTasks .search-panel .grid .ms-display{padding:7px 12px; border-radius:8px; font-size:13px; width:100%}
#panelTasks .search-panel .grid input{padding:7px 12px; border-radius:8px; font-size:13px; width:100%}
#panelTasks .search-panel .grid select{padding:7px 12px; border-radius:8px; font-size:13px; width:100%}
#panelTasks .search-panel .grid > label.filter-narrow{flex:0 0 auto; max-width:130px}
#panelTasks .search-panel .grid-actions{display:flex; align-items:flex-end; flex:0 0 auto}
#panelTasks .search-panel .filter-reset{padding:7px 16px; border-radius:8px; font-size:12px; font-weight:600; background:transparent; color:#94a3b8; border:1px solid rgba(255,255,255,.1); cursor:pointer; transition:all .15s; font-family:inherit}
#panelTasks .search-panel .filter-reset.secondary{background:#fbbf24; border-color:#f59e0b; color:#1f2937}

/* ── Compliance tracker: table cell sizing ───────────────────────────────── */
#panelForMe .table td, #panelByMe .table td{padding:10px 12px; vertical-align:middle; font-size:12px}
#panelForMe .table thead th, #panelByMe .table thead th{padding:10px 12px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap}
/* Ensure .th-sort buttons inside tracker headers match plain-th styling exactly */
#panelForMe .table thead th .th-sort, #panelByMe .table thead th .th-sort{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#64748b}
/* ── Compliance tracker: table visual improvements ───────────────────────── */
/* FC Name: prevent 2-line wrap, anchor each row visually */
#panelForMe .table th:nth-child(3), #panelByMe .table th:nth-child(3),
#panelForMe .table td:nth-child(3), #panelByMe .table td:nth-child(3){min-width:160px; max-width:180px; white-space:normal; word-break:break-word; font-weight:500}
/* Title: minimum room to prevent very tight wrapping */
#panelForMe .table th:nth-child(5), #panelByMe .table th:nth-child(5),
#panelForMe .table td:nth-child(5), #panelByMe .table td:nth-child(5){min-width:160px}
/* Criticality column: single-letter badge, compact */
#panelForMe .table th:nth-child(6), #panelByMe .table th:nth-child(6),
#panelForMe .table td:nth-child(6), #panelByMe .table td:nth-child(6){width:52px; min-width:52px; max-width:52px; text-align:center; padding-left:4px; padding-right:4px}
/* Crit. badge: circle */
#panelForMe .table td:nth-child(6) .badge,
#panelByMe .table td:nth-child(6) .badge{width:24px; height:24px; padding:0; border-radius:50%; justify-content:center; font-size:11px}
/* Low badge: darker background so it's visible on #f1f5f9 zebra rows */
#panelForMe .table td:nth-child(6) .badge-neutral,
#panelByMe .table td:nth-child(6) .badge-neutral{background:#e2e8f0; color:#64748b}
/* Checkbox column: compact */
#panelForMe .table th:first-child, #panelByMe .table th:first-child,
#panelForMe .table td:first-child, #panelByMe .table td:first-child{width:40px; min-width:40px; max-width:40px; padding-left:8px; padding-right:4px}
/* Docs (attachments) column — compact, just fits the eye button */
#panelForMe .table th:nth-child(7), #panelByMe .table th:nth-child(7),
#panelForMe .table td:nth-child(7), #panelByMe .table td:nth-child(7){width:52px; min-width:52px; max-width:52px; text-align:center; padding-left:4px; padding-right:4px}
.eye-menu-wrap{position:relative}
.eye-menu{position:absolute; right:0; top:calc(100% + 4px); display:none; z-index:50; background:#fff; box-shadow:0 8px 24px rgba(15,23,42,.15); padding:4px; border-radius:10px; min-width:140px; animation:eyeMenuIn .14s ease}
@keyframes eyeMenuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.eye-menu--open{display:block}
.eye-menu-item{display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px; border:none; background:transparent; border-radius:7px; font-size:12px; font-weight:500; cursor:pointer; transition:background .12s; text-align:left; white-space:nowrap}
.eye-menu-item svg{flex-shrink:0; opacity:.65}

/* ── Notices tracker: outer panel neutralised ─────────────────────────── */
#panelNotices.tracker-panel{background:transparent; border:none; box-shadow:none; border-radius:0; overflow:visible; margin-bottom:0; position:relative}
#panelNotices .card-header{border-bottom:none; padding:12px 16px 12px}
#panelNotices .search-panel{border-bottom:0; padding:0 16px 16px; background:transparent; flex:0 0 auto}
#panelNotices .search-panel .grid{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end}
#panelNotices .search-panel .grid > label{display:flex; flex-direction:column; gap:3px; flex:1 1 120px; min-width:100px}
#panelNotices .search-panel .grid label > span{font-size:10px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.4px; margin:0}
#panelNotices .search-panel .grid .ms-display{padding:7px 12px; border-radius:8px; font-size:13px; width:100%}
#panelNotices .search-panel .grid input{padding:7px 12px; border-radius:8px; font-size:13px; width:100%}
#panelNotices .search-panel .grid-actions{display:flex; align-items:flex-end; flex:0 0 auto}
#panelNotices .search-panel .filter-reset{padding:7px 16px; border-radius:8px; font-size:12px; font-weight:600; background:transparent; color:#94a3b8; border:1px solid rgba(255,255,255,.1); cursor:pointer; transition:all .15s; font-family:inherit}
#panelNotices .search-panel .filter-reset.secondary{background:#fbbf24; border-color:#f59e0b; color:#1f2937}
/* ── Notices tracker: table styling ───────────────────────────────────── */
#panelNoticesForMe .table td, #panelNoticesOthers .table td{padding:10px 12px; vertical-align:middle; font-size:12px}
#panelNoticesForMe .table thead th, #panelNoticesOthers .table thead th{padding:10px 12px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap}
#panelNoticesForMe .table thead th .th-sort, #panelNoticesOthers .table thead th .th-sort{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#64748b}
/* Checkbox column */
#panelNoticesForMe .table th:first-child, #panelNoticesOthers .table th:first-child,
#panelNoticesForMe .table td:first-child, #panelNoticesOthers .table td:first-child{width:40px; min-width:40px; max-width:40px; padding-left:8px; padding-right:4px}
/* Title column */
#panelNoticesForMe .table th:nth-child(3), #panelNoticesOthers .table th:nth-child(3),
#panelNoticesForMe .table td:nth-child(3), #panelNoticesOthers .table td:nth-child(3){min-width:120px; max-width:180px; white-space:normal; word-break:break-word; font-weight:500}
/* Criticality column: compact circle badge */
#panelNoticesForMe .table th:nth-child(6), #panelNoticesOthers .table th:nth-child(6),
#panelNoticesForMe .table td:nth-child(6), #panelNoticesOthers .table td:nth-child(6){width:68px; min-width:68px; text-align:center; padding-left:4px; padding-right:4px}
#panelNoticesForMe .table td:nth-child(6) .badge,
#panelNoticesOthers .table td:nth-child(6) .badge{width:24px; height:24px; padding:0; border-radius:50%; justify-content:center; font-size:11px}
#panelNoticesForMe .table td:nth-child(6) .badge-neutral,
#panelNoticesOthers .table td:nth-child(6) .badge-neutral{background:#e2e8f0; color:#64748b}

/* HR Returns tracker — mirror the Compliance tracker layout */
#panelHrReturns .search-panel{border-bottom:0; padding:0 16px 16px; background:transparent}
#panelHrReturns .search-panel .grid{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end}
#panelHrReturns .search-panel .grid > label{display:flex; flex-direction:column; gap:3px; flex:1 1 120px; min-width:100px}
#panelHrReturns .search-panel .grid label > span{font-size:10px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.4px; margin:0}
#panelHrReturns .search-panel .grid .ms-display{padding:7px 12px; border-radius:8px; font-size:13px; width:100%}
#panelHrReturns .search-panel .grid input{padding:7px 12px; border-radius:8px; font-size:13px; width:100%}
#panelHrReturns .search-panel .grid select{padding:7px 12px; border-radius:8px; font-size:13px; width:100%}
#panelHrReturns .search-panel .grid-actions{display:flex; align-items:flex-end; flex:0 0 auto}
/* HR Returns detail page */
#panelHrReturnDetail:not([hidden]), #panelHrDashboard:not([hidden]){display:block; height:calc(100vh - 56px); overflow-y:auto; overflow-x:hidden; background:transparent; border:none; box-shadow:none; margin:0; padding:0}
/* HR Return Builder / HR Site Builder — mirror the Compliance Builder/Site Builder flex layout */
#panelHrBuilder, #panelHrSiteBuilder{background:transparent; border:none; box-shadow:none; border-radius:0; overflow:visible}
#panelHrBuilder:not([hidden]), #panelHrSiteBuilder:not([hidden]){height:calc(100vh - 56px); display:flex; flex-direction:column; margin-bottom:0}
#panelHrBuilder:not([hidden]) > header{flex:0 0 auto}
#panelHrBuilder:not([hidden]) > .builder-body, #panelHrSiteBuilder:not([hidden]) > .builder-body{flex:1 1 auto; overflow:hidden; display:flex; flex-direction:column; min-height:0}
#panelHrBuilder .builder-body .table-wrap{flex:1 1 auto; overflow:auto; min-height:0}
#panelHrBuilder .builder-add-row{flex:0 0 auto; position:sticky; bottom:0; z-index:3}
#panelStandards:not([hidden]) > .dash-tab-bar,
#panelSiteBuilder:not([hidden]) > .dash-tab-bar,
#panelHrBuilder:not([hidden]) > .dash-tab-bar,
#panelHrSiteBuilder:not([hidden]) > .dash-tab-bar{flex:0 0 auto}
#panelHrBuilder .builder-add-grid{grid-template-columns:2fr 1.3fr 1fr 1fr 1fr auto}
#panelHrBuilder .table thead th, #panelHrSiteBuilder .table thead th{padding:10px 14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; position:sticky; top:0; z-index:2; background:var(--panel)}
#panelHrBuilder .table td, #panelHrSiteBuilder .table td{padding:10px 14px; font-size:13px; vertical-align:middle}
/* HR dashboard reuses the compliance .kpi-grid/.kpi-card and .charts-row/.chart-card; only the canvas box is custom */
.hr-canvas-wrap{position:relative; height:240px; margin-top:6px}
.hr-detail-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px 24px}
.hr-detail-grid .hr-field{display:flex; flex-direction:column; gap:3px}
.hr-detail-grid .hr-field .hr-k{font-size:10px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.4px}
.hr-detail-grid .hr-field .hr-v{font-size:14px; color:var(--text-color,#0f172a)}
.hr-filing-card{border:1px solid var(--border-color,#e2e8f0); border-radius:12px; padding:14px 16px; margin-bottom:12px; background:var(--surface-color,#fff)}
.dark .hr-filing-card{border-color:rgba(255,255,255,.08); background:var(--surface-color)}
.hr-filing-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.hr-filing-fy{font-size:15px; font-weight:700; color:var(--text-color,#0f172a)}
.hr-filing-meta{display:flex; gap:18px; flex-wrap:wrap; margin:10px 0 0; font-size:13px; color:var(--muted-text-color,#64748b)}
.hr-filing-actions{display:flex; gap:8px; flex-wrap:wrap; margin-left:auto}
.hr-doc-list{display:flex; flex-direction:column; gap:6px; margin-top:10px}
.hr-doc-row{display:flex; align-items:center; gap:8px}
.hr-doc{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#6366f1; cursor:pointer; text-decoration:none}
.hr-doc:hover{text-decoration:underline}
.hr-doc-del{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:1px solid var(--border-color,#e2e8f0); border-radius:6px; background:transparent; color:#94a3b8; cursor:pointer; flex-shrink:0; transition:all .12s}
.hr-doc-del:hover{background:#fef2f2; color:#dc2626; border-color:#fecaca}
.dark .hr-doc-del{border-color:rgba(255,255,255,.12)}
.dark .hr-doc-del:hover{background:rgba(239,68,68,.12); color:#f87171; border-color:rgba(239,68,68,.3)}
.hr-note{border:1px solid var(--border-color,#e2e8f0); border-radius:8px; padding:8px 10px; margin-top:6px; font-size:13px; background:var(--bg-color,#f8fafc)}
.dark .hr-note{border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.03)}
/* HR modals: cap height so they never exceed the viewport; body scrolls */
.modal-box.hr-modal{max-height:90vh; display:flex; flex-direction:column; overflow:hidden}
.modal-box.hr-modal .modal-header, .modal-box.hr-modal .modal-footer{flex:0 0 auto}
.modal-box.hr-modal .modal-body{overflow-y:auto; flex:1 1 auto; min-height:0}
.modal-box.hr-modal .modal-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.modal-box.hr-modal .modal-row .modal-field{margin-bottom:14px}
.modal-box.hr-modal input[type=file]{width:100%; font-size:13px; padding:6px 0}
/* HR forms/modals: searchable single-select (.ss) — full width + menu above modal */
#panelHrReturnDetail .ss-wrap, .modal-box.hr-modal .ss-wrap{display:block; width:100%}
#panelHrReturnDetail .ss-display, .modal-box.hr-modal .ss-display{width:100%; box-sizing:border-box; padding:8px 32px 8px 10px}
.ss-menu{z-index:300}
#panelHrReturns .search-panel .filter-reset{padding:7px 16px; border-radius:8px; font-size:12px; font-weight:600; background:transparent; color:#94a3b8; border:1px solid rgba(255,255,255,.1); cursor:pointer; transition:all .15s; font-family:inherit}
/* HR tracker: make the panel a full-height flex column so the table body scrolls (mirrors Notices) */
#panelHrReturns:not([hidden]){height:calc(100vh - 56px); display:flex; flex-direction:column; overflow:visible}
#panelHrReturns .card-header{flex:0 0 auto}
#panelHrReturns .search-panel{flex:0 0 auto}
#panelHrReturns .tab-panels{flex:1 1 auto; overflow:hidden; display:flex; flex-direction:column; min-height:0}
#hrPanelForMe:not([hidden]),
#hrPanelOthers:not([hidden]){flex:1 1 auto; display:flex; flex-direction:column; min-height:0}
#hrPanelForMe .table-wrap,
#hrPanelOthers .table-wrap{flex:1 1 auto; overflow:auto; position:relative; margin:0 16px 16px; min-height:0}
#hrPanelForMe .table thead th,
#hrPanelOthers .table thead th{position:sticky; top:0; background:var(--panel); z-index:2}
#hrPanelForMe .table td:nth-child(4) .badge,
#hrPanelOthers .table td:nth-child(4) .badge{width:24px; height:24px; padding:0; border-radius:50%; justify-content:center; font-size:11px}
#hrPanelForMe .table td:nth-child(4) .badge-neutral,
#hrPanelOthers .table td:nth-child(4) .badge-neutral{background:#e2e8f0; color:#64748b}
/* HR tracker column widths: give FC Name + Legislation more room, tighten the rest */
#hrPanelForMe .table th:nth-child(1), #hrPanelOthers .table th:nth-child(1),
#hrPanelForMe .table td:nth-child(1), #hrPanelOthers .table td:nth-child(1){min-width:72px}
#hrPanelForMe .table th:nth-child(2), #hrPanelOthers .table th:nth-child(2),
#hrPanelForMe .table td:nth-child(2), #hrPanelOthers .table td:nth-child(2){min-width:210px}
#hrPanelForMe .table th:nth-child(3), #hrPanelOthers .table th:nth-child(3),
#hrPanelForMe .table td:nth-child(3), #hrPanelOthers .table td:nth-child(3){min-width:210px}
#hrPanelForMe .table th:nth-child(5), #hrPanelOthers .table th:nth-child(5),
#hrPanelForMe .table td:nth-child(5), #hrPanelOthers .table td:nth-child(5),
#hrPanelForMe .table th:nth-child(6), #hrPanelOthers .table th:nth-child(6),
#hrPanelForMe .table td:nth-child(6), #hrPanelOthers .table td:nth-child(6){width:128px; max-width:132px}
#hrPanelForMe .table th:nth-child(7), #hrPanelOthers .table th:nth-child(7),
#hrPanelForMe .table td:nth-child(7), #hrPanelOthers .table td:nth-child(7),
#hrPanelForMe .table th:nth-child(8), #hrPanelOthers .table th:nth-child(8),
#hrPanelForMe .table td:nth-child(8), #hrPanelOthers .table td:nth-child(8),
#hrPanelForMe .table th:nth-child(9), #hrPanelOthers .table th:nth-child(9),
#hrPanelForMe .table td:nth-child(9), #hrPanelOthers .table td:nth-child(9){width:96px; max-width:100px}
/* HR Return Builder — Return Name (1) + Legislation (2) wider */
#panelHrBuilder .table th:nth-child(1), #panelHrBuilder .table td:nth-child(1),
#panelHrBuilder .table th:nth-child(2), #panelHrBuilder .table td:nth-child(2){min-width:230px}
/* HR Site Builder — Return Name (2) + Legislation (3) wider; checkbox (1) tight */
#panelHrSiteBuilder .table th:nth-child(1), #panelHrSiteBuilder .table td:nth-child(1){width:36px}
#panelHrSiteBuilder .table th:nth-child(2), #panelHrSiteBuilder .table td:nth-child(2),
#panelHrSiteBuilder .table th:nth-child(3), #panelHrSiteBuilder .table td:nth-child(3){min-width:230px}
#panelHrSiteBuilder .table th:nth-child(6), #panelHrSiteBuilder .table td:nth-child(6),
#panelHrSiteBuilder .table th:nth-child(7), #panelHrSiteBuilder .table td:nth-child(7){width:140px; min-width:140px}
#panelHrSiteBuilder .table td .ss-wrap{width:100%; min-width:0; max-width:none}
#panelHrSiteBuilder .table td .ss-display{width:100%; padding:5px 28px 5px 8px; border-radius:6px; font-size:12px}
#panelHrSiteBuilder .table td select.hr-sb-sel{width:100%; padding:5px 8px; border-radius:6px; font-size:12px}
/* Scrollbar styling */
#panelNoticesForMe .table-wrap::-webkit-scrollbar,
#panelNoticesOthers .table-wrap::-webkit-scrollbar{width:6px; height:0}
#panelNoticesForMe .table-wrap::-webkit-scrollbar-track,
#panelNoticesOthers .table-wrap::-webkit-scrollbar-track{background:transparent}
#panelNoticesForMe .table-wrap::-webkit-scrollbar-thumb,
#panelNoticesOthers .table-wrap::-webkit-scrollbar-thumb{background:rgba(15,23,42,.15); border-radius:999px}

/* ── Export page ──────────────────────────────────────────── */
#panelExport, #panelImport{background:transparent; border:none; box-shadow:none; border-radius:0; overflow:visible}
#panelExport:not([hidden]), #panelImport:not([hidden]){height:calc(100vh - 56px); overflow-y:auto}
.export-page{padding:24px 28px}
.export-desc{font-size:13px; color:#64748b; margin:-8px 0 18px 14px}
.export-grid{grid-template-columns:repeat(3, 1fr) !important; gap:14px}
.export-actions{grid-column:1 / -1; display:flex; gap:10px; padding-top:6px}
.export-actions .btn.primary{display:inline-flex; align-items:center; gap:6px}
.export-actions .btn.filter-reset{display:inline-flex; align-items:center; gap:6px}

/* ── Activity page ────────────────────────────────────────── */
#panelActivity{background:transparent; border:none; box-shadow:none; border-radius:0; overflow:visible}
#panelActivity:not([hidden]){height:calc(100vh - 56px); overflow-y:auto}
.activity-page{padding:20px 28px}
.activity-filters-bar{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:20px}
.activity-filter{display:flex; flex-direction:column; gap:3px; flex:1 1 120px; min-width:100px; max-width:200px}
.activity-filter--toggle{max-width:none; flex:0 0 auto}
.activity-filter select{padding:7px 10px; border-radius:8px; font-size:13px}
/* Toggle switch */
.toggle-switch{position:relative; width:36px; height:20px; cursor:pointer; display:inline-block; flex-shrink:0}
.toggle-switch input{opacity:0; width:0; height:0; position:absolute}
.toggle-switch .toggle-slider{position:absolute; inset:0; background:#cbd5e1; border-radius:100px; transition:background .2s}
.toggle-switch .toggle-slider::before{content:''; position:absolute; width:14px; height:14px; background:#fff; border-radius:50%; top:3px; left:3px; transition:transform .2s; box-shadow:0 1px 2px rgba(0,0,0,.1)}
.toggle-switch input:checked + .toggle-slider{background:#6366f1}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(16px)}
.activity-filter .ms-display{padding:7px 12px; border-radius:8px; font-size:13px; width:100%}
.activity-charts-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.activity-charts-grid .chart-card{padding:20px}
.activity-charts-grid .chart-card .chart-canvas-wrap{min-height:260px}
.activity-charts-grid .chart-card-header h3{font-size:14px; font-weight:600; margin:0}
.activity-charts-grid .chart-subtitle{font-size:12px; color:#94a3b8; margin-top:2px}

.import-upload-area{margin-bottom:18px}
.import-upload-area .note-file-chip:not([hidden]){display:inline-flex; margin-top:10px}

/* ── Modal system ─────────────────────────────────────────── */
.modal-overlay:not([hidden]){position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:200;animation:modalOverlayIn .18s ease}
@keyframes modalOverlayIn{from{opacity:0}to{opacity:1}}
.modal-box{border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.2);min-width:300px;max-width:520px;width:90%;animation:modalBoxIn .2s cubic-bezier(.34,1.56,.64,1)}
@keyframes modalBoxIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--border-color)}
.modal-header-left{display:flex;align-items:flex-start;gap:10px}
.modal-header-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.modal-header-title{font-size:14px;font-weight:700;line-height:1.3}
.modal-header-subtitle{font-size:12px;margin-top:2px;line-height:1.4}
.modal-close{width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;margin-left:8px}
.modal-close svg{width:12px;height:12px}
.modal-body{padding:16px 20px}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 16px;border-top:1px solid var(--border-color)}
.modal-field{margin-bottom:14px}
.modal-field:last-child{margin-bottom:0}
.modal-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.modal-input,.modal-select,.modal-textarea{width:100%;padding:8px 10px;border:1px solid var(--border-color);border-radius:8px;font-size:13px;font-family:inherit;background:var(--surface-color);color:var(--text-color);box-sizing:border-box}
.modal-textarea{resize:vertical;min-height:80px;line-height:1.5}
.modal-ctrl-hint{font-size:11px;margin-top:6px;text-align:right}
.modal-na-wrap{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.modal-input-icon-wrap{position:relative}
.modal-input-icon-wrap .modal-input.has-icon{padding-right:34px}
.modal-input-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted-text-color);display:flex;align-items:center;opacity:.6}
.virtual-spacer td{padding:0 !important; border:none !important; line-height:0; background:transparent}
.skeleton.row td{background:linear-gradient(110deg,#e2e8f0 8%,#f8fafc 18%,#e2e8f0 33%); background-size:200% 100%; animation:skeletonPulse 1.6s linear infinite; height:32px}
@keyframes skeletonPulse{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* Inner lists scroll within available space */
#panelSettings #panelCategories .table-wrap,
#panelSettings #panelNoticeTypes .table-wrap,
#panelSettings #panelCompanies .table-wrap,
#panelSettings #panelUsers .table-wrap{padding-bottom:0}
/* Reserve space so last rows don't hide behind sticky add form */
#panelSettings #panelCategories .table-wrap,
#panelSettings #panelNoticeTypes .table-wrap,
#panelSettings #panelCompanies .table-wrap,
#panelSettings #panelUsers .table-wrap{padding-bottom:0}
#panelSettings #panelCategories:not([hidden]) .form-actions,
#panelSettings #panelNoticeTypes:not([hidden]) .form-actions,
#panelSettings #panelCompanies:not([hidden]) .form-actions,
#panelSettings #panelUsers:not([hidden]) .form-actions{flex:0 0 auto; background:var(--panel); border-top:1px solid rgba(255,255,255,.06); position:sticky; bottom:0}

/* Sticky headers for Settings lists so Name/Action row stays visible */
#panelCategories .table thead th,
#panelNoticeTypes .table thead th,
#panelNotifications .table thead th,
#panelCompanies .table thead th,
#panelUsers .table thead th{position:sticky; top:0; background:var(--panel); z-index:2}

/* Redesigned Settings shell */
#panelSettings.settings-shell{background:transparent; border:none; box-shadow:none; border-radius:0; overflow:visible}
#panelSettings .settings-page{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:16px 24px 20px}
#panelSettings .settings-tabs{display:flex; gap:2px; flex-wrap:wrap; border-bottom:1px solid var(--border-color, rgba(255,255,255,.08)); margin-bottom:14px}
#panelSettings .settings-tabs [role=tab]{padding:10px 16px; font-size:13px; font-weight:500; color:var(--muted-text-color, var(--muted)); cursor:pointer; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; border-radius:0; transition:color .15s}
#panelSettings .settings-tabs [role=tab]:hover{color:var(--text-color, var(--text))}
#panelSettings .settings-tabs [aria-selected=true]{color:var(--primary-color, var(--accent)); border-bottom-color:var(--primary-color, var(--accent)); font-weight:600}
#panelSettings .settings-tabs [role=tab]:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(41,121,255,.12)}
#panelSettings .settings-tab-description{margin:0 0 16px; font-size:13px; line-height:1.5; color:var(--muted-text-color, var(--muted))}
#panelSettings .settings-tab-panel{flex:1 1 auto; min-height:0}
#panelSettings .settings-tab-panel:not([hidden]){display:flex; flex-direction:column}
#panelSettings .settings-tab-panel[hidden]{display:none !important}
#panelSettings .settings-surface{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; border-radius:12px; border:1px solid var(--border-color, rgba(255,255,255,.08)); background:var(--surface-color, var(--panel)); box-shadow:var(--section-shadow, 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04))}
#panelSettings .settings-surface--table .table-wrap{margin:0; border:none; box-shadow:none; overflow:auto}
#panelSettings .settings-scroll{flex:1 1 auto; min-height:0; overflow:auto}
#panelSettings .settings-scroll::-webkit-scrollbar{width:6px; height:6px}
#panelSettings .settings-scroll::-webkit-scrollbar-track{background:transparent}
#panelSettings .settings-scroll::-webkit-scrollbar-thumb{background:rgba(148,163,184,.45); border-radius:999px}
#panelSettings .settings-list{display:flex; flex-direction:column}
#panelSettings .settings-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 18px; border-bottom:1px solid var(--border-color, rgba(255,255,255,.08)); transition:background .1s}
#panelSettings .settings-row:last-child{border-bottom:none}
#panelSettings .settings-row:nth-child(even){background:var(--bg-color,#f8fafc)}
#panelSettings .settings-row__content{display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 auto}
#panelSettings .settings-row__headline{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0}
#panelSettings .settings-row__title{font-size:14px; font-weight:400; color:var(--text-color, var(--text)); line-height:1.4; word-break:break-word}
#panelSettings .settings-row__meta{font-size:12px; color:var(--muted-text-color, var(--muted)); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
#panelSettings .settings-row__actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex-shrink:0}
#panelSettings .settings-inline-btn{display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:7px 12px; border-radius:999px; border:1px solid var(--border-color, rgba(255,255,255,.08)); background:transparent; color:var(--text-color, var(--text)); cursor:pointer; font:inherit; font-size:12px; font-weight:600}
#panelSettings .settings-row__actions .settings-inline-btn{min-width:92px}
#panelSettings .settings-inline-btn.is-active{color:#B91C1C; background:rgba(254,226,226,.65); border-color:rgba(248,113,113,.32)}
#panelSettings .settings-inline-btn.is-inactive{color:#166534; background:rgba(220,252,231,.8); border-color:rgba(74,222,128,.3)}
#panelSettings .settings-delete-btn{width:30px; height:30px; border-radius:6px; background:transparent; border:none; color:#94a3b8; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:all .12s}
#panelSettings .settings-delete-btn:hover{background:#fee2e2; color:#dc2626}
#panelSettings .settings-delete-btn svg{width:14px; height:14px}
#panelSettings .settings-status-pill{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap}
#panelSettings .settings-status-pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85}
#panelSettings .settings-status-pill.is-active{background:#DCFCE7; color:#16A34A}
#panelSettings .settings-status-pill.is-inactive{background:#F1F5F9; color:#64748B}
#panelSettings .settings-empty{padding:48px 20px; text-align:center; font-size:13px; color:var(--muted-text-color, var(--muted))}
#panelSettings .settings-add-bar{flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:12px 18px; border-top:1px solid var(--border-color, rgba(255,255,255,.08)); background:var(--surface-color, var(--panel)); border-radius:0 0 12px 12px}
#panelSettings .settings-add-bar--compact{display:grid; grid-template-columns:260px auto; justify-content:start; align-items:center}
#panelSettings .settings-add-bar--users{display:grid; grid-template-columns:180px 210px 130px auto; justify-content:start; align-items:center}
#panelSettings .settings-add-bar--actions{justify-content:flex-end}
#panelSettings .settings-panel-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-bottom:1px solid var(--border-color, rgba(255,255,255,.08))}
#panelSettings .settings-panel-toolbar__copy{display:flex; flex-direction:column; gap:2px; min-width:0}
#panelSettings .settings-panel-toolbar__label{font-size:12px; font-weight:700; color:var(--text-color, var(--text)); text-transform:uppercase; letter-spacing:.4px}
#panelSettings .settings-panel-toolbar__hint{font-size:12px; color:var(--muted-text-color, var(--muted)); line-height:1.4}
#panelSettings .settings-add-field{display:flex; flex-direction:column; gap:6px; flex:1 1 auto; min-width:0}
#panelSettings .settings-add-bar--compact .settings-add-field{flex:none}
#panelSettings .settings-add-bar--users .settings-add-field{flex:none}
#panelSettings .settings-add-bar input,
#panelSettings .settings-add-bar select{width:100%; min-width:0; padding:9px 12px; border-radius:10px; font-size:13px}
#panelSettings .settings-add-bar--users .btn{width:auto; justify-self:start}
#panelSettings .settings-add-submit-btn{display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:0 14px; border-radius:9px; white-space:nowrap; font-size:12px; width:auto; justify-self:start}
#panelSettings .settings-add-submit-btn svg{width:13px; height:13px; flex-shrink:0}
#panelSettings .settings-add-user-btn{display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:0 14px; border-radius:9px; white-space:nowrap; font-size:12px}
#panelSettings .settings-add-user-btn svg{width:13px; height:13px; flex-shrink:0}
#panelSettings .settings-utility-btn{display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:0 12px; border-radius:9px; white-space:nowrap; font-size:12px; font-weight:600}
#panelSettings .settings-utility-btn svg{width:13px; height:13px; flex-shrink:0}
#panelSettings .settings-users-table,
#panelSettings .settings-policy-table{width:100%; min-width:0; background:transparent}
#panelSettings .settings-users-table th,
#panelSettings .settings-users-table td,
#panelSettings .settings-policy-table th,
#panelSettings .settings-policy-table td{padding:14px 16px; vertical-align:middle}
#panelSettings .settings-users-table input,
#panelSettings .settings-users-table select{width:100%}
#panelUsers.settings-users--readonly-admin .settings-users-table th:nth-child(6),
#panelUsers.settings-users--readonly-admin .settings-users-table td:nth-child(6){display:none}
#panelSettings .settings-role-ss{width:100%; min-width:0}
#panelSettings .settings-role-ss .ss-display{width:100%; min-width:0; padding:9px 32px 9px 12px; border-radius:10px; font-size:13px; background:var(--surface-color, var(--panel)); border:1px solid var(--border-color)}
#panelSettings .settings-users-table td .settings-role-ss .ss-display{font-weight:400}
#panelSettings .settings-add-bar--users .settings-role-ss .ss-display{font-weight:400}
#panelSettings .settings-user-access-text{display:inline-flex; align-items:center; min-height:36px; color:var(--muted-text-color, var(--muted)); font-size:13px}
#panelSettings .settings-user-actions{display:inline-flex; align-items:center; gap:8px; flex-wrap:nowrap; white-space:nowrap}
#panelSettings .settings-table-empty{text-align:center; color:var(--muted-text-color, var(--muted)); padding:32px 16px}

@media (max-width: 1024px){
  #panelSettings .settings-add-bar--users{grid-template-columns:1fr 1fr; align-items:stretch}
  #panelSettings .settings-add-bar--users .btn{width:100%}
}

@media (max-width: 720px){
  #panelSettings .settings-page{padding:12px 12px 12px}
  #panelSettings .settings-row{padding:14px}
  #panelSettings .settings-row,
  #panelSettings .settings-row__actions{align-items:flex-start}
  #panelSettings .settings-row{flex-direction:column}
  #panelSettings .settings-panel-toolbar{flex-direction:column; align-items:flex-start}
  #panelSettings .settings-add-bar,
  #panelSettings .settings-add-bar--compact,
  #panelSettings .settings-add-bar--users{display:flex; flex-direction:column; align-items:stretch}
  #panelSettings .settings-add-bar .btn{width:100%}
}

/* Modal styles */
.modal{position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); z-index:10000; display:flex; align-items:flex-start; justify-content:center; padding:80px 20px 20px 20px}
.modal[hidden]{display:none !important}
.modal-content{background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:12px; max-width:800px; width:100%; max-height:calc(90vh - 80px); display:flex; flex-direction:column; box-shadow:0 20px 25px -5px rgba(0,0,0,0.3); position:relative; z-index:10001}
.modal-header{display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid rgba(255,255,255,.06); position:relative; z-index:10002}
.modal-header h2{margin:0; font-size:20px; font-weight:600; color:var(--text)}
.modal-close{background:transparent; border:none; color:var(--text); font-size:28px; cursor:pointer; padding:0; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:6px; transition:background 0.2s; line-height:1; position:relative; z-index:10003}
.modal-close:hover{background:rgba(255,255,255,0.1)}
.modal-body{padding:24px; overflow-y:auto; flex:1}

/* ── Logs timeline ─────────────────────────────────────────── */
.logs-timeline{overflow-y:auto; max-height:60vh; padding:0}
.log-item{display:flex; gap:12px; padding:12px 20px; border-bottom:1px solid #f1f5f9; transition:background .1s}
.log-item:hover{background:#f8fafc}
.log-item:last-child{border-bottom:none}
.log-dot-col{display:flex; flex-direction:column; align-items:center; flex-shrink:0; padding-top:2px}
.log-dot{width:8px; height:8px; border-radius:50%; background:#6366f1; flex-shrink:0}
.log-line{width:1px; flex:1; background:#e2e8f0; margin-top:4px}
.log-item:last-child .log-line{display:none}
.log-content{flex:1; min-width:0}
.log-text{font-size:13px; color:#0f172a; line-height:1.5; word-wrap:break-word}
.log-meta{display:flex; align-items:center; gap:8px; margin-top:3px; font-size:11px; color:#94a3b8}
.log-meta svg{flex-shrink:0; opacity:.5}
.logs-empty{text-align:center; padding:40px 20px; color:#94a3b8; font-size:13px}
.logs-empty svg{display:block; margin:0 auto 8px; opacity:.25}