/* -- PALLETS BASE -- build 9 | v2.1.26 | Tokens, resets, shared primitives */

:root {
  --shell:             #0c0f0e;
  --shell-mid:         #141918;
  --shell-edge:        #1e2422;
  --shell-deep:        #0a0d0c;
  --accent:            #00f5d4;
  --accent-dark:       #009e88;
  --accent-deeper:     #006e5e;
  --workspace:         #f4fdfb;
  --tabs:              #e0f5f0;
  --tabs-border:       #c8ece6;
  --text-on-shell:     #ffffff;
  --text-on-workspace: #0c0f0e;
  --text-muted:        #8a9e9a;
  --font-ui:           'Outfit', sans-serif;
  --font-display:      'Lora', Georgia, serif;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --radius-sm:4px; --radius:8px; --radius-lg:12px;
  --transition:150ms ease;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body {
  height:100%; font-family:var(--font-ui); font-size:14px; line-height:1.5;
  background:var(--shell); color:var(--text-on-shell); -webkit-font-smoothing:antialiased;
}
button { font-family:var(--font-ui); cursor:pointer; border:none; background:none; }
input, textarea, select { font-family:var(--font-ui); font-size:14px; }

.ps-mark { display:grid; gap:3px; flex-shrink:0; }
.ps-mark--3x2 { grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); width:30px; height:20px; gap:2px; }
.ps-mark--2x2 { grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); width:28px; height:28px; gap:3px; }
.ps-mark div { border-radius:2px; }

.ps-wordmark { font-family:var(--font-ui); font-weight:500; font-size:14px; letter-spacing:0.2em; color:var(--text-on-shell); text-transform:uppercase; opacity:0.9; }
.ps-sub { font-family:var(--font-display); font-style:italic; font-size:11px; letter-spacing:0.12em; color:var(--accent); }

.btn { display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-4); border-radius:var(--radius-sm); font-size:13px; font-weight:500; transition:background var(--transition),color var(--transition); }
.btn--primary { background:var(--accent); color:var(--shell); }
.btn--primary:hover { background:var(--accent-dark); }
.btn--ghost { background:transparent; color:var(--text-on-shell); border:1px solid var(--shell-edge); }
.btn--ghost:hover { background:var(--shell-mid); }

#toast-container { position:fixed; bottom:var(--sp-6); right:var(--sp-6); z-index:9999; display:flex; flex-direction:column; gap:var(--sp-2); }
.toast { padding:var(--sp-3) var(--sp-5); border-radius:var(--radius); font-size:13px; font-weight:500; color:var(--shell); background:var(--accent); box-shadow:0 4px 16px rgba(0,0,0,0.3); animation:toast-in 200ms ease; }
.toast--error { background:#ff6b6b; color:#fff; }
.toast--warning { background:#ffd166; color:var(--shell); }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal-box { background:var(--shell-mid); border:1px solid var(--shell-edge); border-radius:var(--radius-lg); padding:var(--sp-8); max-width:400px; width:100%; display:flex; flex-direction:column; gap:var(--sp-5); color:var(--text-on-shell); }
.modal-msg { font-size:15px; line-height:1.6; }
.modal-actions { display:flex; gap:var(--sp-3); justify-content:flex-end; }

@media print { body { background:#fff; color:#000; } }

/* DENSITY */
:root, [data-density="comfortable"] {
  --row-height:    40px;
  --card-padding:  var(--sp-4) var(--sp-5);
  --font-size-ui:  14px;
  --item-gap:      var(--sp-2);
  --section-gap:   var(--sp-8);
}
[data-density="compact"] {
  --row-height:    28px;
  --card-padding:  var(--sp-2) var(--sp-3);
  --font-size-ui:  12px;
  --item-gap:      var(--sp-1);
  --section-gap:   var(--sp-5);
}

/* Sidebar items respond to density */
.sidebar-item { height: var(--row-height); display: flex; align-items: center; }

/* Buttons respond to density */
[data-density="compact"] .btn {
  padding: var(--sp-1) var(--sp-3);
  font-size: 12px;
}
[data-density="compact"] .auth-btn {
  padding: var(--sp-2) var(--sp-4);
  font-size: 13px;
}

/* THEME — dark forces shell colors into workspace */
[data-theme="dark"] #main-content {
  background: var(--shell-mid);
  color: var(--text-on-shell);
}

/* Dashboard cards */
[data-theme="dark"] .dash-project-card,
[data-theme="dark"] .dash-feed-item {
  background: var(--shell);
  border-color: var(--shell-edge);
  color: var(--text-on-shell);
}
[data-theme="dark"] .dash-project-name,
[data-theme="dark"] .dash-title,
[data-theme="dark"] .dash-feed-label { color: var(--text-on-shell); }
[data-theme="dark"] .dash-section-title,
[data-theme="dark"] .dash-project-meta,
[data-theme="dark"] .dash-feed-project,
[data-theme="dark"] .dash-feed-date,
[data-theme="dark"] .dash-empty,
[data-theme="dark"] .dash-loading { color: var(--text-muted); }
[data-theme="dark"] .dash-project-group-label { color: var(--text-muted); }

/* Settings */
[data-theme="dark"] .settings { color: var(--text-on-shell); }
[data-theme="dark"] .settings-title { color: var(--text-on-shell); }
[data-theme="dark"] .settings-tab { color: var(--text-muted); }
[data-theme="dark"] .settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
[data-theme="dark"] .settings-tabs { border-color: var(--shell-edge); }
[data-theme="dark"] .settings-section { border-color: var(--shell-edge); }
[data-theme="dark"] .settings-section-title { color: var(--text-muted); }
[data-theme="dark"] .settings-field label { color: var(--text-muted); }
[data-theme="dark"] .settings-field input,
[data-theme="dark"] .settings-field select {
  background: var(--shell);
  border-color: var(--shell-edge);
  color: var(--text-on-shell);
}
[data-theme="dark"] .settings-value { color: rgba(255,255,255,0.45); }
[data-theme="dark"] .settings-field--readonly .settings-value { color: rgba(255,255,255,0.45); }
[data-theme="dark"] .settings-hint { color: var(--text-muted); }
[data-theme="dark"] .settings-toggle-label { color: var(--text-on-shell); }
[data-theme="dark"] .settings-toggle-row { border-color: var(--shell-edge); }
[data-theme="dark"] .settings-footer { background: var(--shell-mid); border-color: var(--shell-edge); }
[data-theme="dark"] .settings-discard-btn {
  color: var(--text-muted);
  border-color: var(--shell-edge);
}
[data-theme="dark"] .settings-discard-btn:hover { color: var(--text-on-shell); }
[data-theme="dark"] .settings-field input::placeholder { color: var(--text-muted); }
[data-theme="dark"] .settings-field select option { background: var(--shell); color: var(--text-on-shell); }
[data-theme="dark"] .settings-no-company { background: var(--shell); }
[data-theme="dark"] .settings-no-company p { color: var(--text-muted); }
[data-theme="dark"] .settings-role-badge { background: var(--shell-edge); color: var(--text-muted); }

/* Module coming soon */
[data-theme="dark"] .module-coming-soon p { color: var(--text-on-shell); }

/* MOBILE SCROLL FIX */
@media (max-width: 768px) {
  body { overflow:hidden; position:fixed; width:100%; height:100%; }
  #app { height:100%; overflow:hidden; }
  #layout { overflow:hidden; }
  #main-content { overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; }
  #sidebar { overflow-y:auto; -webkit-overflow-scrolling:touch; }
}