/* ===== Settings view (scoped) ===== */

/* ---- 2×2 squares layout ----
   top: appearance | about
   bottom: integrations | data
*/
#view-settings .settings-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  grid-template-areas:
    "appearance about"
    "integrations data";
  gap:14px;
  align-items:stretch;
}

/* Square tiles — content starts at the top */
#view-settings .set-card{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:240px;
}

/* Map cards to areas (works with or without helper classes) */
#view-settings .set-card:has(#btn-theme){ grid-area: appearance; }
#view-settings .set-card.appearance-card{ grid-area: appearance; }

#view-settings .about-card,
#view-settings .set-card:has(.about, .app-version, .about-text){ grid-area: about; }

#view-settings .integrations-card{ grid-area: integrations; }

#view-settings .data-card{ grid-area: data; }
#view-settings .set-card:has(#btn-export, #btn-import){ grid-area: data; }

/* Mobile stack */
@media (max-width:720px){
  #view-settings .settings-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "appearance"
      "about"
      "integrations"
      "data";
  }
}

/* Rows & microcopy */
#view-settings .set-row{ display:flex; align-items:center; gap:12px; padding:8px 0; }
#view-settings .set-row .desc{ color:var(--sub); font-size:12px; }
#view-settings .shortcut-list{ margin:6px 0 0; padding-left:16px; display:grid; gap:6px; }

/* --- Pretty toggle switch (scoped) --- */
#view-settings .switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
#view-settings .switch input{ position:absolute; opacity:0; pointer-events:none; }
#view-settings .switch .track{
  inline-size:42px; block-size:24px; border-radius:999px;
  background: color-mix(in oklab, var(--text) 12%, transparent);
  position:relative; transition: background .18s ease, box-shadow .18s ease;
  border:1px solid var(--border);
}
#view-settings .switch .track::after{
  content:""; position:absolute; inset:3px auto 3px 3px;
  inline-size:18px; block-size:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.15);
  transition: transform .18s ease, background .18s ease;
}
#view-settings .switch input:checked + .track{
  background: var(--accent, var(--brand, #3a74ff)); border-color: var(--accent, var(--brand, #3a74ff));
  box-shadow: 0 2px 10px color-mix(in oklab, var(--accent, #3a74ff) 30%, transparent);
}
#view-settings .switch input:checked + .track::after{ transform: translateX(18px); }
#view-settings .switch .label{ font-weight:600; color:var(--text); }

/* Preferences toggled by body classes */
body.compact-rows .task-row{ padding:8px 10px; border-radius:10px; }
body.row-actions-hover .row-actions{ opacity:0; transform:translateY(2px); pointer-events:none; }
body.row-actions-hover .task-row:hover .row-actions,
body.row-actions-hover .task-row:focus-within .row-actions{ opacity:1; transform:none; pointer-events:auto; }

/* ===== Integrations & Data rows (shared visuals) ===== */

#view-settings .integrations-card .connector-list,
#view-settings .data-card .data-list{
  display:flex; flex-direction:column; gap:10px; margin-top:6px;
}

#view-settings .connector{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  padding:14px; border:1px solid var(--border); border-radius:12px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
}
#view-settings .connector:hover{ box-shadow:0 6px 18px rgba(10,20,30,.06); }

#view-settings .actions{ display:flex; align-items:center; gap:12px; }
#view-settings .actions .pill{ min-width:120px; justify-content:center; }

/* Info + status */
#view-settings .info .name{ font-weight:700; color:var(--text); }
#view-settings .info .desc{ color:var(--sub); font-size:12px; }

#view-settings .status-chip{
  font-size:.78rem; padding:4px 8px; border-radius:999px;
  background: color-mix(in oklab, var(--text) 10%, transparent);
  color: var(--text); border:1px solid var(--border);
}
#view-settings .connector.connected .status-chip{ background:#e9f9ee; color:#246b3d; border-color:#b9e4c8; }

/* Connect / Disconnect button uses .pill */
#view-settings .btn-connect.pill{ min-width:110px; justify-content:center; }
#view-settings .connector.connected .btn-connect{ background:#d93b3b; border-color:#d93b3b; color:#fff; }
#view-settings .connector.connected .btn-connect:hover{ filter:brightness(0.95); }

/* Small screens */
@media (max-width:560px){
  #view-settings .connector{ grid-template-columns:1fr; justify-items:start; }
  #view-settings .actions{ width:100%; justify-content:space-between; }
}

/* ===== Logos (integrations) ===== */

#view-settings .logo{
  inline-size:56px; block-size:56px; border-radius:14px;
  display:grid; place-items:center; color:#fff; font-weight:700; position:relative;
  box-shadow:0 6px 18px rgba(10,20,30,.08);
}
@media (min-width:1200px){
  #view-settings .logo{ inline-size:64px; block-size:64px; border-radius:16px; }
}
#view-settings .logo.gdrive{ background: conic-gradient(#ea4335 0 25%, #fbbc04 0 50%, #34a853 0 75%, #4285f4 0); }
#view-settings .logo.dropbox{ background:#0061ff; }
#view-settings .logo.box{ background:#0061d5; }
#view-settings .logo.onedrive{ background:#0364b8; }

#view-settings .logo::before{
  content:""; inline-size:28px; block-size:28px; background:currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain; opacity:.95;
}
#view-settings .logo.gdrive{ --icon: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M7 4h5l5 8-5 8H7L2 12l5-8z"/></svg>'); }
#view-settings .logo.dropbox{ --icon: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M7 3l5 4-5 4-5-4 5-4zm10 0l5 4-5 4-5-4 5-4zM7 13l5 4-5 4-5-4 5-4zm10 0l5 4-5 4-5-4 5-4z"/></svg>'); }
#view-settings .logo.box{ --icon: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M7 10h10v4H7z" fill="white"/></svg>'); }
#view-settings .logo.onedrive{ --icon: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M9 10a5 5 0 018.7-2.9A4 4 0 1120 19H8a4 4 0 010-8c.3 0 .6 0 1 .1z"/></svg>'); }

#view-settings .logo::after{
  content:""; position:absolute; right:-3px; top:-3px; inline-size:12px; block-size:12px; border-radius:50%;
  background:#a7abb3; box-shadow:0 0 0 2px var(--surface, #fff), 0 1px 2px rgba(0,0,0,.25);
}
#view-settings .connector.connected .logo::after{
  background:#2ecc71;
  box-shadow:0 0 0 2px var(--surface, #fff), 0 0 0 6px color-mix(in oklab, #2ecc71 22%, transparent), 0 1px 2px rgba(0,0,0,.25);
}

/* ===== Data & Backups — same row look as Integrations ===== */

#view-settings .data-card .data-list{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }

/* Big friendly icons for Export / Import / Reset */
#view-settings .data-card .logo{ /* base from .logo */ }
#view-settings .data-card .logo::before{ /* base from .logo::before */ }

#view-settings .data-card .logo.export{
  background:#3a74ff;
  --icon:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M12 3v10"/><path d="m8 9 4 4 4-4"/><path d="M4 20h16"/></svg>');
}
#view-settings .data-card .logo.import{
  background:#38d996;
  --icon:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M12 21V11"/><path d="m16 15-4-4-4 4"/><path d="M4 4h16"/></svg>');
}
#view-settings .data-card .logo.reset{
  background:#d93b3b;
  --icon:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M21 12a9 9 0 1 1-9-9"/><path d="M3 3v6h6"/></svg>');
}

/* Notes panel under the rows */
#view-settings .data-card .data-notes{
  margin:10px 0 0;
  padding:10px 12px;
  border:1px dashed var(--border);
  border-radius:10px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  color:var(--sub);
  font-size:12px;
  display:grid; gap:6px;
}
#view-settings .data-card .data-notes li{
  margin-left:1.1em; list-style:disc;
}

/* Master Reset button: keep premium danger look */
#view-settings #btn-reset-app.pill{
  min-width:120px; justify-content:center;
  background:#d93b3b; border-color:#d93b3b; color:#fff;
  box-shadow:0 6px 16px rgba(217,59,59,.18);
}
#view-settings #btn-reset-app.pill:hover{ filter:brightness(0.96); box-shadow:0 8px 20px rgba(217,59,59,.22); }
#view-settings #btn-reset-app.pill:active{ transform:translateY(1px); }