/* ============================================================
   AgentBlazer — shared app shell
   Clean, airy SaaS shell with AWS branding.
   Smile orange #FF9900 (accent, used sparingly), Squid Ink
   #232F3E (text), Cloudscape blue #0972D3 (links).
   ============================================================ */
:root {
  --bg:        #ffffff;
  --surface:   #ffffff;
  --rail:      #fbfbfa;   /* sidebar */
  --ink:       #232f3e;   /* Squid Ink */
  --ink-soft:  #5f6b7a;
  --ink-faint: #8d99a8;
  --line:      #eceef1;   /* hairline */
  --line-2:    #e3e7ec;
  --hover:     #f6f7f9;
  --active:    #fff4e5;   /* faint orange wash for active nav */

  --accent:    #ff9900;   /* AWS Smile orange */
  --accent-ink:#b56b00;
  --link:      #0972d3;   /* Cloudscape blue */
  --positive:  #1a7f53;   /* done / consensus */
  --positive-bg:#e9f5ef;

  --customer:  #7a3b5e;
  --partner:   #3c6e8f;
  --aws:       #ec7211;   /* AWS entity color (deeper orange) */

  --r: 8px;
  --rail-w: 244px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05", "ss01";
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: rgba(255,153,0,.22); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- App layout ---------- */
.app { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.rail {
  background: var(--rail);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 16px 12px;
  position: sticky; top: 0; height: 100vh;
}
.rail .brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 16px;
}
.rail .brand .logo {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: linear-gradient(135deg, #ff9900 0%, #ec7211 100%);
  display: grid; place-items: center;
  box-shadow: 0 1px 2px rgba(35,47,62,.18);
}
.rail .brand .logo svg { width: 15px; height: 15px; }
.rail .brand .name { font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--ink); }
.rail .brand .name span { color: var(--accent-ink); }

.searchbox {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 7px 10px; margin: 0 4px 14px; color: var(--ink-faint);
}
.searchbox input {
  border: 0; outline: 0; background: transparent; flex: 1; font: inherit; font-size: 13px; color: var(--ink);
}
.searchbox .kbd {
  font-size: 11px; color: var(--ink-faint); border: 1px solid var(--line-2);
  border-radius: 5px; padding: 1px 5px; background: var(--rail);
}

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav .sec-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); padding: 14px 10px 6px;
}
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px; color: var(--ink-soft);
  font-weight: 500; font-size: 13.5px;
}
.nav a:hover { background: var(--hover); text-decoration: none; color: var(--ink); }
.nav a.active { background: var(--active); color: var(--accent-ink); font-weight: 600; }
.nav a svg { width: 17px; height: 17px; flex: none; color: currentColor; }
.nav a .badge {
  margin-left: auto; font-size: 11px; font-weight: 600; color: var(--ink-soft);
  background: var(--line); border-radius: 100px; padding: 0 7px; min-width: 20px; text-align: center;
}
.rail .foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 12px; }

/* ---------- Main column ---------- */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 28px; border-bottom: 1px solid var(--line);
}
.topbar .title { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.topbar .breadcrumb { font-size: 13px; color: var(--ink-faint); display: flex; gap: 7px; align-items: center; }
.topbar .breadcrumb a { color: var(--ink-soft); }
.topbar .right { display: flex; align-items: center; gap: 12px; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border-radius: 7px; padding: 8px 13px; border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: #1a1206; box-shadow: 0 1px 2px rgba(35,47,62,.14); }
.btn-primary:hover { background: #f08f00; }
/* blue variant — published/primary-create action (Cloudscape blue) */
.btn-primary.btn-blue { background: var(--link); color: #fff; }
.btn-primary.btn-blue:hover { background: #0860b3; }
.btn-ghost { background: #fff; border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { background: var(--hover); }

.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg,#ec7211,#ff9900); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
  border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
button.avatar:hover { box-shadow: 0 0 0 2px var(--active); }
.iconbtn {
  width: 32px; height: 32px; border-radius: 7px; border: 1px solid transparent;
  background: transparent; color: var(--ink-soft); display: grid; place-items: center; cursor: pointer;
}
.iconbtn:hover { background: var(--hover); }
.iconbtn svg { width: 18px; height: 18px; }

.content { padding: 22px 28px 60px; }

/* ---------- Tabs + toolbar ---------- */
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tabs a {
  padding: 0 1px 12px; color: var(--ink-soft); font-weight: 500; font-size: 13.5px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 6px; }
.toolbar .search {
  display: flex; align-items: center; gap: 8px; flex: 1; max-width: 320px;
  background: #fff; border: 1px solid var(--line-2); border-radius: 7px; padding: 7px 11px; color: var(--ink-faint);
}
.toolbar .search input { border: 0; outline: 0; background: transparent; flex: 1; font: inherit; font-size: 13px; color: var(--ink); }
.toolbar .controls { display: flex; gap: 8px; }

/* ---------- Document list (dashboard) ---------- */
.list { display: flex; flex-direction: column; }
.row {
  display: grid;
  grid-template-columns: 1fr 150px 120px 120px 36px;
  align-items: center; gap: 14px;
  padding: 13px 8px; border-bottom: 1px solid var(--line);
  cursor: pointer; color: inherit;
}
.row:hover { background: var(--hover); text-decoration: none; }
.row .name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.row .doc-ic { width: 18px; height: 18px; color: var(--ink-faint); flex: none; }
.row .name .t { min-width: 0; display: block; }
.row .name .t .title { display: block; font-weight: 600; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .name .t .sub { display: block; font-size: 12px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .cell { font-size: 13px; color: var(--ink-soft); }
.row .cell.dim { color: var(--ink-faint); }

.pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 100px; border: 1px solid transparent;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.live { color: var(--positive); background: var(--positive-bg); }
.pill.draft { color: var(--ink-soft); background: var(--line); }
.pill.archived { color: var(--ink-faint); background: var(--line); }

/* small blazed progress on dashboard */
.blz { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); }
.blz .track { width: 46px; height: 5px; border-radius: 100px; background: var(--line); overflow: hidden; }
.blz .fill { height: 100%; background: var(--positive); border-radius: 100px; }

.kebab { color: var(--ink-faint); display: grid; place-items: center; }
.kebab:hover { color: var(--ink); }

/* ---------- Empty / responsive ---------- */
/* ============================================================
   Finder-style icon canvas
   ============================================================ */
.canvas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px 14px;
  align-items: start;
  margin-top: 14px;
}

/* A selectable tile: artwork on top, label beneath (Finder convention). */
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 12px 8px 10px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid transparent; position: relative;
  -webkit-user-select: none; user-select: none;
}
.tile:hover { background: var(--hover); }
.tile.selected { background: var(--active); border-color: rgba(255,153,0,.4); }
.tile.drop-target { background: #fff4e5; border-color: var(--accent); }
.tile:focus-visible { outline: none; border-color: var(--accent); }

/* artwork box reserves a fixed footprint so folder stacks and single docs align */
.art { width: 132px; height: 168px; position: relative; }

/* ---- Document preview miniature ---- */
/* The .page is rendered at a real width then scaled down, so the thumbnail is a
   faithful miniature of the actual document — not a fake graphic. */
.thumb {
  width: 124px; height: 160px; background: #fff; border-radius: 6px;
  border: 1px solid var(--line-2);
  box-shadow: 0 1px 2px rgba(35,47,62,.10), 0 6px 16px -10px rgba(35,47,62,.30);
  overflow: hidden; position: relative;
}
.thumb .page {
  width: 360px; transform: scale(.3444); transform-origin: top left;
  padding: 22px 20px; position: absolute; top: 0; left: 0;
}
.thumb .status-strip { position: absolute; top: 0; left: 0; width: 100%; height: 4px; z-index: 1; }
.thumb .status-strip.live { background: var(--link); }       /* published — Cloudscape blue */
.thumb .status-strip.draft { background: var(--ink-faint); } /* draft — neutral grey */
.thumb .status-strip.archived { background: var(--ink-faint); }
/* archived: fade the whole preview so it reads as closed-out, not active */
.thumb.status-archived .page { filter: grayscale(1); opacity: .55; }
/* draft badge — its CENTRE is anchored to the preview's top-right corner, so it
   straddles the corner diagonally (intentionally offset outside the thumb).
   Lives in .art (not the overflow-hidden .thumb) so it isn't clipped. The thumb
   is 124px wide and top-left within the 132px .art, so its corner is at 124,0. */
.art .draft-tag {
  position: absolute; top: 3px; left: 112px; transform: translate(-50%, -50%); z-index: 6;
  background: #aab2bd; color: #fff; font-size: 9px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; line-height: 1.2;
  box-shadow: 0 1px 2px rgba(35,47,62,.25);
}

/* miniature internal layout (rendered large, scaled down) */
.pv-eyebrow { font-size: 13px; color: var(--ink-faint); font-weight: 500; }
.pv-title { font-size: 23px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 6px 0 0; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv-rule { height: 3px; width: 46px; background: var(--accent); border-radius: 3px; margin: 12px 0; }
.pv-summary { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pv-recs { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.pv-rec { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink); }
.pv-check { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; }
.pv-check.done { background: var(--positive); border-color: var(--positive); }
.pv-rec .rt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-cdots { margin-left: auto; display: inline-flex; gap: 3px; flex: none; }
.pv-cdots i { width: 7px; height: 7px; border-radius: 50%; background: #fff; border: 1.5px solid var(--line-2); display: block; }
.pv-cdots i.signed { background: var(--positive); border-color: var(--positive); }

/* ---- Folder = a diagonally-offset stack of real previews ---- */
.stack { width: 132px; height: 168px; position: relative; }
.stack .thumb { position: absolute; }
.stack .thumb.s0 { top: 0;  left: 0;  transform: rotate(-3deg); z-index: 1; filter: brightness(.985); }
.stack .thumb.s1 { top: 4px; left: 7px; transform: rotate(1.5deg); z-index: 2; }
.stack .thumb.s2 { top: 8px; left: 14px; transform: rotate(4deg); z-index: 3; box-shadow: 0 2px 4px rgba(35,47,62,.12), 0 10px 22px -12px rgba(35,47,62,.4); }
.stack.empty { display: grid; place-items: center; }
.stack.empty .ph { width: 124px; height: 160px; border: 1.5px dashed var(--line-2); border-radius: 6px; display: grid; place-items: center; color: var(--ink-faint); }

.tile .label { text-align: center; max-width: 150px; }
.tile .label .lt { font-size: 12.5px; font-weight: 600; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3;
  border-radius: 5px; padding: 1px 5px; cursor: text; }
.tile .label .lt:hover { background: var(--line); box-shadow: inset 0 0 0 1px var(--line-2); }
.tile.folder .label .lt:hover { background: var(--line); }
.tile .label .ls { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.tile.folder .label .lt { display: flex; align-items: center; justify-content: center; gap: 8px; }
.tile.folder .label .lt .folder-ico { flex: none; color: var(--ink-faint); }
.tile .badge-count {
  position: absolute; top: 8px; right: 10px; z-index: 5;
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 100px; min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* count-up folder-naming inline input */
.folder-name-input {
  font: inherit; font-size: 12.5px; font-weight: 600; text-align: center;
  border: 1px solid var(--accent); border-radius: 5px; padding: 2px 5px; width: 120px; outline: none;
}

.canvas-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.canvas-bar .left { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); }
.canvas-bar .sel-count { color: var(--ink-faint); }
.backchip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--ink); cursor: pointer; padding: 6px 10px; border-radius: 7px; border: 1px solid var(--line-2); background: #fff;
}
.backchip:hover { background: var(--hover); }
.backchip.drop-target { background: #fff4e5; border-color: var(--accent); }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .rail { display: none; }
  .canvas { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}
/* ---- Salesforce search modal (BFF tool) ---- */
.modal-overlay { position: fixed; inset: 0; background: rgba(35,47,62,.45); display: grid; place-items: start center; z-index: 1000; padding-top: 12vh; }
.modal-card { width: min(560px, 92vw); background: #fff; border-radius: 12px; padding: 22px; position: relative;
  box-shadow: 0 12px 40px -8px rgba(35,47,62,.4); }
.modal-x { position: absolute; top: 12px; right: 14px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--ink-faint); cursor: pointer; }
.modal-x:hover { color: var(--ink); }
.modal-title { font-size: 18px; font-weight: 700; margin: 0 0 16px; color: var(--ink); }
.sf-searchrow { display: flex; gap: 8px; }
.sf-searchrow .e-input { flex: 1; }
.sf-results { margin-top: 16px; max-height: 50vh; overflow: auto; }
.sf-msg { color: var(--ink-soft); font-size: 13.5px; padding: 10px 2px; line-height: 1.5; }
.sf-msg.err { color: #b3261e; }
.sf-row { padding: 10px 2px; border-top: 1px solid var(--line); }
.sf-row:first-child { border-top: 0; }
.sf-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.sf-meta { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }
.sf-meta a { color: var(--link); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }