:root{--bg:#141414;--panel:#1c1c1c;--muted:#737373;--text:#d4d4d4;--primary:#22c55e;--accent:#38bdf8;--danger:#ef4444;--warn:#f59e0b}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}.app-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--panel);border-bottom:1px solid #262626}.app-title{margin:0;font-size:16px;font-weight:600}.app-nav{display:flex;gap:12px}.nav-link{color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:6px}.nav-link:hover{background:#242424;color:var(--text)}.nav-link.active{background:#242424;color:var(--text);border:1px solid #333333}.app-container{max-width:1100px;margin:0 auto;padding:16px}.panel{background:var(--panel);border:1px solid #262626;border-radius:10px;padding:16px}.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px}.btn{appearance:none;border:0;border-radius:8px;padding:8px 12px;background:#242424;color:var(--text);cursor:pointer}.btn.primary{background:var(--primary);color:#052e16}.btn.danger{background:var(--danger);color:#fff}.list{display:grid;gap:6px}.row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:10px;border-radius:8px;background:#111111;border:1px solid #262626;text-align:left}.row:hover{outline:1px solid #334155}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:start}.kv{display:grid;grid-template-columns:120px 1fr;gap:8px;align-items:center;margin:8px 0}.kv input,.kv select{background:#111111;color:var(--text);border:1px solid #262626;border-radius:6px;padding:6px}
.kv input:hover,.kv select:hover,.input:hover,textarea:hover,input[type=color]:hover{border-color:var(--accent);background:#141414;box-shadow:0 0 0 2px rgba(56,189,248,0.25)}
.kv input,.kv select,.input,textarea,input[type=color]{transition:border-color .15s ease, box-shadow .15s ease, background .15s ease}
.kv-break{grid-column:1 / -1;height:0}
/* Specific list grid templates */
#users-list .row{grid-template-columns:1.2fr 0.8fr}
#clients-list .row{grid-template-columns:1.2fr 0.8fr}
/* Header row */
.row.header{background:#141414;font-weight:600;pointer-events:none;border-color:#333333}
/* Ensure list row text is visible and selection clear */
.row{color:var(--text);cursor:pointer}
.row.selected{outline:2px solid var(--accent);background:#141414}
/* Priority badge */
.badge{display:inline-flex;align-items:center;gap:6px}
.dot{display:inline-block;width:20px;height:20px;border-radius:50%}
/* Green ticks for assigned permissions */
input[type=checkbox]:checked{accent-color:#16a34a}
.perm-item input[data-readonly='1']{pointer-events:none}
.dot.low{background:#10b981}
.dot.medium{background:#f59e0b}
.dot.high{background:#ef4444}
.dot.premium{background:linear-gradient(135deg,#e5e4e2,#b3b3b3,#e5e4e2)}
/* Table styling for Roles & Permissions */
.table{width:100%;border-collapse:collapse;margin:8px 0;background:#111111;border:1px solid #262626;border-radius:8px;overflow:hidden}
.table th,.table td{padding:8px 10px;border-bottom:1px solid #262626;vertical-align:top}
.table tr:last-child td{border-bottom:0}
/* Role card wrapper for spacing */
.role-card{margin:12px 0;padding:10px;background:#111111;border:1px solid #262626;border-radius:8px}
.role-card h4{margin:0 0 6px 0}
/* Permission tabs and items */
.perm-tabs{display:flex;gap:8px;margin-bottom:8px;overflow-x:auto;white-space:nowrap}
.perm-tab{flex:0 0 auto}
.perm-tab{padding:6px 10px;border:1px solid #333333;border-radius:6px;background:#111111;color:var(--text);cursor:pointer}
.perm-tab.active{background:#242424;border-color:var(--accent)}
.perm-item{display:flex;align-items:center;justify-content:space-between;border:1px solid #262626;border-radius:8px;padding:8px;margin:6px 0;background:#111111}
.perm-item .left{display:flex;align-items:center;gap:8px;border:1px dashed #333333;border-radius:6px;padding:6px;cursor:pointer}
.perm-item .right{display:flex;align-items:center;gap:8px}
.icon-pencil{display:inline-block;width:14px;height:14px;border:1px solid #333333;border-radius:3px;background:#242424;position:relative}
.icon-pencil:before{content:'';position:absolute;left:3px;top:7px;width:8px;height:2px;background:var(--accent);transform:rotate(-45deg)}

/* =====================================================
   Light Mode Overrides — Slate Clean
   ===================================================== */
body.light-mode {
  --bg: #f8fafc;
  --panel: #ffffff;
  --panel-hover: #f1f5f9;
  --border: #d1d5db;
  --border-light: #9ca3af;
  --muted: #6b7280;
  --text: #374151;
  --text-bright: #111827;
  --accent: #0284c7;
}
body.light-mode .app-header { background: #c8cdd5; border-bottom-color: #b0b7c3; }
body.light-mode input, body.light-mode select, body.light-mode textarea, body.light-mode .input { background: #ffffff; color: #111827; border-color: #d1d5db; }
body.light-mode input:focus, body.light-mode select:focus, body.light-mode textarea:focus, body.light-mode .input:focus { border-color: #0284c7; box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12); }
body.light-mode input:disabled, body.light-mode select:disabled, body.light-mode textarea:disabled { background: #f1f5f9; color: #6b7280; }
body.light-mode .row { background: #ffffff; border-color: #d1d5db; }
body.light-mode .row:hover { background: #f1f5f9; border-color: #9ca3af; }
body.light-mode th { background: #c8cdd5; color: #374151; }
body.light-mode tbody tr:hover { background: #f1f5f9; }
body.light-mode .status-filter-tab { background: rgba(0, 0, 0, 0.04); color: #6b7280; }
body.light-mode .status-filter-tab:hover { background: rgba(0, 0, 0, 0.07); color: #374151; }
body.light-mode .perm-tab { background: #f1f5f9; border-color: #d1d5db; color: #374151; }
body.light-mode .perm-tab.active { background: #ffffff; border-color: #0284c7; }
body.light-mode .perm-item { background: #ffffff; border-color: #d1d5db; }
body.light-mode .role-card { background: #ffffff; border-color: #d1d5db; }
body.light-mode .table { background: #ffffff; border-color: #d1d5db; }
body.light-mode .table th, body.light-mode .table td { border-color: #d1d5db; }

/* Settings modal (shared) */
.modal { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); z-index:1000; align-items:center; justify-content:center; padding:20px; }
.modal.open { display:flex; }
.modal-content { background:var(--panel); border:1px solid var(--border); border-radius:12px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:0 20px 50px rgba(0,0,0,0.5); }
.modal-sm { max-width:380px; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--border); }
.modal-header h2 { margin:0; font-size:18px; font-weight:600; color:var(--text-bright); }
.modal-body { padding:20px 24px; }
.modal-footer { display:flex; gap:12px; justify-content:flex-end; padding:16px 24px; border-top:1px solid var(--border); }
.settings-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; }
.settings-row label { margin:0; font-weight:500; color:var(--text); }
.settings-btns { display:flex; gap:8px; }

/* Groups tab */
.split-view { display:grid; grid-template-columns:1fr 1.6fr; gap:12px; align-items:start; }
.list-pane { background:var(--panel); border:1px solid #262626; border-radius:10px; padding:12px; }
.detail-pane { background:var(--panel); border:1px solid #262626; border-radius:10px; padding:16px; min-height:180px; }
.list-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.list-items { display:grid; gap:6px; }
.detail-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; border-bottom:1px solid #262626; padding-bottom:10px; }
.detail-header h3 { margin:0; font-size:15px; }
.detail-actions { display:flex; gap:6px; }
.detail-fields { display:grid; grid-template-columns:130px 1fr; gap:8px 12px; align-items:center; margin:8px 0; }
.field-row { display:contents; }
.label { color:var(--muted); font-size:13px; }
.edit-form { display:grid; gap:10px; }
.form-row { display:grid; grid-template-columns:130px 1fr; gap:8px; align-items:center; }
.form-actions { display:flex; gap:8px; margin-top:8px; }
.data-table { width:100%; border-collapse:collapse; }
.data-table th, .data-table td { padding:6px 8px; border:1px solid #262626; text-align:left; }
.data-table th { background:#141414; color:var(--muted); font-size:12px; font-weight:600; }
.muted { color:var(--muted); }
.detail-placeholder { color:var(--muted); font-style:italic; }