/* -- PALLETS SHELL -- build 10 | v2.1.26 */

#app { display:flex; flex-direction:column; height:100vh; overflow:hidden; }
#topbar { height:48px; background:var(--shell-deep); border-bottom:1px solid var(--shell-edge); display:flex; align-items:center; justify-content:space-between; padding:0 var(--sp-5); flex-shrink:0; z-index:100; }
#layout { display:flex; flex:1; overflow:hidden; }
#sidebar { width:200px; min-width:200px; background:var(--shell); border-right:1px solid var(--shell-edge); overflow-y:auto; flex-shrink:0; }
#main-content { flex:1; overflow-y:auto; background:var(--workspace); color:var(--text-on-workspace); }

/* TOPBAR */
.topbar-mark { display:flex; align-items:center; gap:10px; }
.topbar-wordmark { display:flex; align-items:baseline; gap:6px; }
.topbar-divider { width:1px; height:16px; background:rgba(255,255,255,0.1); margin:0 4px; }
.topbar-project-name { font-size:10px; color:rgba(255,255,255,0.35); }
.topbar-right { display:flex; align-items:center; gap:var(--sp-4); }
.topbar-user { font-size:12px; color:var(--text-muted); }
.topbar-signout { font-size:12px; color:var(--text-muted); transition:color var(--transition); }
.topbar-signout:hover { color:var(--text-on-shell); }
.topbar-avatar { width:26px; height:26px; border-radius:50%; background:rgba(0,245,212,0.12); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:500; }
.ps-project-label { font-size:10px; color:rgba(255,255,255,0.35); }
.ps-project-label:empty { display:none; }

/* SIDEBAR */
.sidebar-nav { padding:var(--sp-4) 0; display:flex; flex-direction:column; }
.sidebar-section { padding:var(--sp-1) 0; }
.sidebar-org { margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--shell-edge); }
.sidebar-label { display:block; font-size:8px; font-weight:600; text-transform:uppercase; letter-spacing:0.15em; color:rgba(255,255,255,0.2); padding:0 var(--sp-5) var(--sp-2); }
.sidebar-item { display:block; width:100%; text-align:left; padding:9px var(--sp-5); font-size:11px; color:rgba(255,255,255,0.3); border-left:3px solid transparent; transition:background var(--transition),color var(--transition),border-color var(--transition); position:relative; }
.sidebar-item:hover { background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.7); }
.sidebar-item.active { color:var(--accent); border-left-color:var(--accent); background:rgba(0,245,212,0.07); }
.sidebar-back { display:block; width:100%; text-align:left; padding:var(--sp-3) var(--sp-5); font-size:11px; color:rgba(255,255,255,0.3); transition:color var(--transition); }
.sidebar-back:hover { color:var(--accent); }
.sidebar-project-name { padding:var(--sp-2) var(--sp-5) var(--sp-3); font-size:12px; font-weight:500; color:var(--text-on-shell); border-bottom:1px solid var(--shell-edge); margin-bottom:var(--sp-2); line-height:1.4; }

/* MODULE STUB */
.module-coming-soon { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:var(--sp-3); color:var(--text-muted); }
.module-coming-soon p { font-size:18px; font-weight:500; color:var(--text-on-workspace); }
.module-coming-soon span { font-size:13px; }

/* ── MOBILE SIDEBAR DRAWER ──────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
}
.sidebar-overlay.active { display: block; }

/* ── MOBILE TOPBAR ──────────────────────────────────────── */
.topbar-hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-2);
  cursor: pointer;
  margin-right: var(--sp-2);
}
.topbar-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-muted);
  border-radius: 1px;
  transition: background var(--transition);
}
.topbar-hamburger:hover span { background: var(--text-on-shell); }

@media (max-width: 768px) {
  /* Topbar: hide username, show hamburger */
  .topbar-hamburger { display: flex; }
  .topbar-user { display: none; }
  .ps-wordmark { font-size: 12px; letter-spacing: 0.16em; }
  .ps-sub { font-size: 10px; }

  /* Sidebar: off-canvas drawer */
  #sidebar {
    position: fixed;
    top: 48px;
    left: 0;
    bottom: 0;
    z-index: 210;
    transform: translateX(-100%);
    transition: transform 200ms ease;
    width: 240px;
    min-width: 240px;
  }
  #sidebar.open { transform: translateX(0); }

  /* Main content fills full width */
  #main-content { width: 100%; }
}

.sidebar-signout {
  display: none;
  margin-top: auto;
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--shell-edge);
}
.sidebar-signout button {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  transition: color var(--transition);
  text-align: left;
  width: 100%;
}
.sidebar-signout button:hover { color: var(--accent); }

@media (max-width: 768px) {
  .sidebar-signout { display: block; }
  .topbar-signout  { display: none; }
  .topbar-user     { display: none; }
}

/* TOPBAR RIGHT */
.topbar-name { font-size: 12px; color: var(--text-muted); }

/* SYNC INDICATOR */
.topbar-sync {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: background var(--transition);
  flex-shrink: 0;
}
.topbar-sync--synced  { background: var(--accent-dark); }  /* green = online + saved */
.topbar-sync--syncing { background: #ffd166; }              /* yellow = saving */
.topbar-sync--error   { background: #ff6b6b; }              /* red = error */
.topbar-sync--offline { background: var(--text-muted); }    /* gray = offline */

/* AVATAR DROPDOWN */
.topbar-right { position: relative; }

.topbar-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--shell-mid);
  border: 1px solid var(--shell-edge);
  border-radius: var(--radius);
  min-width: 160px;
  z-index: 500;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.topbar-dropdown.open { display: block; }

.topbar-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  font-size: 13px;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
}
.topbar-dropdown-item:hover { background: var(--shell-edge); color: var(--text-on-shell); }
.topbar-dropdown-item--danger:hover { color: #ff9999; }

/* SIDEBAR BOTTOM */
#sidebar { display: flex; flex-direction: column; }
.sidebar-nav { flex: 1; }
.sidebar-bottom {
  border-top: 1px solid var(--shell-edge);
  padding: var(--sp-2) 0;
  flex-shrink: 0;
}
.sidebar-item--settings { color: var(--text-muted); }

/* HIDE topbar signout — now in dropdown only */
.topbar-signout { display: none; }

@media (max-width: 768px) {
  .topbar-name { display: none; }
}

/* NOTIFICATIONS BELL */
.topbar-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: color var(--transition), background var(--transition);
}
.topbar-bell:hover { color: var(--text-on-shell); background: var(--shell-edge); }

.topbar-bell-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--shell);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
}

/* BELL DROPDOWN */
.bell-dropdown {
  position: absolute;
  top: 48px;
  right: 80px;
  width: 320px;
  background: var(--shell-mid);
  border: 1px solid var(--shell-edge);
  border-radius: var(--radius);
  z-index: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  overflow: hidden;
}

.bell-dropdown-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--shell-edge);
}

.bell-dropdown-empty {
  padding: var(--sp-5) var(--sp-4);
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.bell-item {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--shell-edge);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.bell-item:last-child { border-bottom: none; }

.bell-item-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.bell-item-body {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.bell-item-body strong { color: var(--text-on-shell); font-weight: 500; }

.bell-item-actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.bell-btn {
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
}

.bell-btn--accept {
  background: var(--accent);
  color: var(--shell);
}
.bell-btn--accept:hover { background: var(--accent-dark); }

.bell-btn--decline {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--shell-edge);
}
.bell-btn--decline:hover { color: var(--text-on-shell); border-color: var(--text-muted); }

@media (max-width: 768px) {
  .bell-dropdown {
    right: var(--sp-3);
    left: var(--sp-3);
    width: auto;
  }
}

/* PARSE MODAL */
.parse-modal-box {
  width: 100%;
  max-width: 540px;
}

.parse-modal-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-6);
}

.parse-modal-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-on-shell);
}

.parse-modal-filename {
  font-size: 12px;
  color: var(--text-muted);
  font-family: monospace;
}

.parse-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: center;
}

/* SPINNER */
.parse-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--shell-edge);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: parse-spin 700ms linear infinite;
}
@keyframes parse-spin {
  to { transform: rotate(360deg); }
}

.parse-status {
  font-size: 13px;
  color: var(--text-muted);
}

/* PROGRESS BAR */
.parse-progress {
  width: 100%;
  height: 4px;
  background: var(--shell-edge);
  border-radius: 2px;
  overflow: hidden;
}
.parse-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  width: 0%;
  transition: width 200ms ease;
}

/* REVIEW */
.parse-review-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-on-shell);
  margin-bottom: var(--sp-4);
  align-self: flex-start;
}

.parse-section {
  width: 100%;
  margin-bottom: var(--sp-4);
}

.parse-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

.parse-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}

.parse-field-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

.parse-field-input {
  background: var(--shell);
  border: 1px solid var(--shell-edge);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  color: var(--text-on-shell);
  font-family: var(--font-ui);
  font-size: 13px;
  outline: none;
  width: 100%;
  transition: border-color var(--transition);
}
.parse-field-input:focus { border-color: var(--accent); }

.parse-field-value {
  font-size: 13px;
  color: var(--text-on-shell);
  padding: var(--sp-1) 0;
  opacity: 0.8;
}

.parse-error {
  width: 100%;
  padding: var(--sp-4);
  background: rgba(255,107,107,0.1);
  border: 1px solid rgba(255,107,107,0.3);
  border-radius: var(--radius);
}
.parse-error p { font-size: 13px; color: #ffaaaa; }

.parse-modal-actions {
  justify-content: flex-end;
  width: 100%;
  margin-top: var(--sp-2);
}

/* CONFIRM MODAL */
.modal-confirm-msg {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--sp-4);
}
.btn--danger {
  background: #c0392b;
  color: #fff;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  transition: background var(--transition);
}
.btn--danger:hover { background: #a93226; }

/* PROJECT SETTINGS MODAL */
.modal-box--wide { max-width: 560px; }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-6); }
.modal-title { font-size:18px; font-weight:500; color:var(--text-on-shell); }
.modal-close { font-size:22px; color:var(--text-muted); line-height:1; transition:color var(--transition); }
.modal-close:hover { color:var(--text-on-shell); }
.ps-body { display:flex; flex-direction:column; gap:var(--sp-6); margin-bottom:var(--sp-6); }
.ps-section { display:flex; flex-direction:column; gap:var(--sp-4); }
.ps-section-title { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); }
.ps-section--danger { padding-top:var(--sp-5); border-top:1px solid var(--shell-edge); }
.ps-section-title--danger { color:#ff6b6b; }
.ps-danger-row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); }
.ps-danger-label { font-size:14px; color:var(--text-on-shell); font-weight:500; }
.ps-danger-hint { font-size:12px; color:var(--text-muted); margin-top:2px; }
.ps-body .settings-field input,
.ps-body .settings-field select {
  background:var(--shell); border:1px solid var(--shell-edge);
  border-radius:var(--radius-sm); padding:var(--sp-2) var(--sp-3);
  color:var(--text-on-shell); font-family:var(--font-ui); font-size:14px;
  outline:none; width:100%; transition:border-color var(--transition);
}
.ps-body .settings-field input:focus,
.ps-body .settings-field select:focus { border-color:var(--accent); }
.ps-body .settings-field input:disabled,
.ps-body .settings-field select:disabled { opacity:0.5; cursor:not-allowed; }
.ps-body .settings-field label {
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--text-muted);
}
.ps-body .settings-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }