/* FiniteOffice — shared Office-style ribbon framework (Word/Excel/PowerPoint feel) */
:root {
  --rb-bar: #f3f3f3;
  --rb-surface: #ffffff;
  --rb-ink: #201f1e;
  --rb-muted: #616161;
  --rb-line: #e1dfdd;
  --rb-hover: #ecebea;
  --rb-active: #e6e2f5;
  --rb-tab-ink: #444;
}

/* ---- App title/command bar (above the ribbon) ---- */
.fo-appbar {
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 12px;
  background: var(--app-accent, #185abd); color: #fff;
}
.fo-appbar .fo-app-badge {
  width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center;
  background: rgba(255,255,255,.2); font-weight: 800; font-size: 12px;
}
.fo-appbar .fo-doc-title {
  flex: 1; max-width: 460px; background: transparent; border: 1px solid transparent;
  color: #fff; font-size: 13px; font-weight: 600; padding: 4px 8px; border-radius: 4px;
}
.fo-appbar .fo-doc-title::placeholder { color: rgba(255,255,255,.7); }
.fo-appbar .fo-doc-title:hover { background: rgba(255,255,255,.12); }
.fo-appbar .fo-doc-title:focus { outline: none; background: #fff; color: var(--rb-ink); }
.fo-appbar .fo-appbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 12px; }
.fo-appbar .fo-save { opacity: .9; }
.fo-appbar .fo-plan { background: rgba(255,255,255,.2); border-radius: 999px; padding: 2px 9px; font-weight: 600; }

/* ---- Tab strip ---- */
.rb-tabs {
  display: flex; align-items: center; gap: 2px;
  background: var(--app-accent, #185abd); padding: 0 8px;
}
.rb-tab {
  appearance: none; border: none; background: transparent; color: rgba(255,255,255,.92);
  font-size: 13px; padding: 7px 13px 8px; cursor: pointer; border-radius: 4px 4px 0 0;
  white-space: nowrap;
}
.rb-tab:hover { background: rgba(255,255,255,.14); }
.rb-tab.file { background: #106ebe; font-weight: 600; }
.rb-tab.active { background: var(--rb-surface); color: var(--rb-ink); font-weight: 600; }

/* ---- Ribbon body ---- */
.rb-body { background: var(--rb-surface); border-bottom: 1px solid var(--rb-line); }
.rb-page { display: none; align-items: stretch; gap: 0; padding: 4px 6px 2px; min-height: 92px; }
.rb-page.active { display: flex; }

.rb-group { display: flex; flex-direction: column; padding: 2px 8px 0; border-right: 1px solid var(--rb-line); }
.rb-group:last-child { border-right: none; }
.rb-group-body { display: flex; align-items: flex-start; gap: 3px; flex: 1; }
.rb-group-label { text-align: center; color: var(--rb-muted); font-size: 11px; padding: 3px 0 2px; }

/* Control column (stacks small buttons/rows) */
.rb-col { display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.rb-row { display: flex; align-items: center; gap: 2px; }

/* Buttons */
.rb-btn {
  appearance: none; border: 1px solid transparent; background: transparent; color: var(--rb-ink);
  border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; padding: 4px 6px; font-size: 13px; min-width: 26px; min-height: 24px; line-height: 1;
}
.rb-btn:hover { background: var(--rb-hover); border-color: var(--rb-line); }
.rb-btn.active { background: var(--rb-active); border-color: #c8bfe7; }
.rb-btn:disabled { opacity: .4; cursor: not-allowed; }
.rb-btn .ic { font-size: 15px; line-height: 1; }
.rb-btn.caret::after { content: "▾"; font-size: 9px; color: var(--rb-muted); margin-left: 1px; }

/* Big (tall) button, e.g. Paste */
.rb-btn.big {
  flex-direction: column; gap: 3px; padding: 4px 10px; min-height: 66px; font-size: 12px;
}
.rb-btn.big .ic { font-size: 22px; }

/* Selects / inputs */
.rb-select, .rb-input {
  border: 1px solid var(--rb-line); background: #fff; border-radius: 3px; height: 24px;
  font-size: 12px; padding: 0 4px; color: var(--rb-ink);
}
.rb-select:hover, .rb-input:hover { border-color: #b9b7b4; }
.rb-font { width: 130px; }
.rb-size { width: 48px; }

/* Color swatch buttons */
.rb-color { position: relative; }
.rb-color .bar { display: block; width: 15px; height: 3px; border-radius: 1px; margin-top: 1px; }

/* Style gallery */
.rb-styles { display: flex; gap: 4px; align-items: center; }
.rb-style {
  border: 1px solid var(--rb-line); border-radius: 4px; background: #fff; cursor: pointer;
  min-width: 66px; height: 52px; padding: 4px 8px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; text-align: center;
}
.rb-style:hover { border-color: var(--app-accent, #185abd); }
.rb-style.s-normal { font-size: 12px; }
.rb-style.s-h1 { font-size: 15px; color: var(--app-accent, #185abd); font-weight: 600; }
.rb-style.s-h2 { font-size: 13px; color: #2e74b5; font-weight: 600; }
.rb-style.s-title { font-size: 16px; font-weight: 700; }

/* Dropdown menu (File, Line spacing, etc.) */
.rb-menu {
  position: absolute; z-index: 60; background: #fff; border: 1px solid var(--rb-line);
  border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.16); padding: 5px; min-width: 190px;
}
.rb-menu[hidden] { display: none; }
.rb-menu a, .rb-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 10px; border: none; background: none; border-radius: 4px; cursor: pointer; font-size: 13px; color: var(--rb-ink);
}
.rb-menu a:hover, .rb-menu button:hover { background: var(--rb-hover); }
.rb-menu .sep { height: 1px; background: var(--rb-line); margin: 4px 2px; }

/* Color popover grid */
.rb-swatches { position: absolute; z-index: 61; background:#fff; border:1px solid var(--rb-line);
  border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,.16); padding:8px; display:grid;
  grid-template-columns: repeat(8, 18px); gap:4px; }
.rb-swatches[hidden] { display:none; }
.rb-swatches i { width:18px; height:18px; border-radius:3px; cursor:pointer; border:1px solid rgba(0,0,0,.15); display:block; }
.rb-swatches i:hover { outline: 2px solid var(--app-accent,#185abd); }