/* =============================================================================
   QuickBooks Replace — chrome.css
   The application frame: title bar, menu bar, left icon bar, the MDI client
   and its child windows.
   ========================================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  font-family: var(--qb-font-ui);
  font-size: var(--qb-fs);
  color: var(--qb-text);
  background: var(--qb-app-bg);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: default;
}
input, select, textarea, button { font-family: inherit; font-size: inherit; color: inherit; }
::-webkit-scrollbar { width: 16px; height: 16px; background: #F0F0F0; }
::-webkit-scrollbar-thumb { background: #CDCDCD; border: 3px solid #F0F0F0; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #B0B0B0; }
::-webkit-scrollbar-corner { background: #F0F0F0; }

#app { display: flex; flex-direction: column; height: 100%; }

/* -------------------------------------------------------------------------
   1.  Title bar
   ---------------------------------------------------------------------- */
.qb-titlebar {
  height: var(--qb-titlebar-h);
  flex: 0 0 auto;
  background: linear-gradient(to bottom, var(--qb-navy-top), var(--qb-navy-bot));
  color: #fff;
  display: flex; align-items: center;
  padding: 0 0 0 8px;
  font-size: 12px;
  -webkit-app-region: drag;
}
.qb-titlebar .qb-tb-icon {
  width: 16px; height: 16px; margin-right: 7px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.qb-titlebar .qb-tb-text {
  flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .1px;
}
.qb-titlebar .qb-tb-buttons { display: flex; -webkit-app-region: no-drag; }
.qb-titlebar .qb-tb-btn {
  width: 45px; height: var(--qb-titlebar-h);
  display: flex; align-items: center; justify-content: center;
  color: #E6EEF5; font-size: 11px; line-height: 1;
}
.qb-titlebar .qb-tb-btn:hover { background: rgba(255,255,255,.14); }
.qb-titlebar .qb-tb-btn.close:hover { background: #C42B1C; color: #fff; }

/* -------------------------------------------------------------------------
   2.  Menu bar
   ---------------------------------------------------------------------- */
.qb-menubar {
  height: var(--qb-menubar-h);
  flex: 0 0 auto;
  background: linear-gradient(to bottom, var(--qb-menubar-top), var(--qb-menubar-bot));
  border-bottom: 1px solid #A9A9A9;
  display: flex; align-items: stretch;
  position: relative; z-index: 400;
  font-size: 12px;
}
.qb-menubar .qb-menu-title {
  padding: 0 9px; display: flex; align-items: center; cursor: default;
  white-space: nowrap;
}
.qb-menubar .qb-menu-title:hover,
.qb-menubar .qb-menu-title.open {
  background: linear-gradient(to bottom, #DCE7F5, #C3D6EE);
  box-shadow: inset 0 0 0 1px #93B4DC;
}
.qb-menubar .qb-menu-spacer { flex: 1 1 auto; }
.qb-menubar .qb-menu-right {
  display: flex; align-items: center; gap: 8px; padding-right: 8px; font-size: 11px;
}
/* the release-era switch */
.qb-menubar .qb-era-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 17px; padding: 0 8px 0 6px; border-radius: 9px;
  background: linear-gradient(to bottom, #FBFBFB, #E9E9E9);
  border: 1px solid #B0B0B0; font-size: 10.5px; color: #33414E;
  letter-spacing: .2px; cursor: pointer;
}
.qb-menubar .qb-era-btn i {
  width: 7px; height: 7px; border-radius: 50%; background: #A8B0B8; display: block;
}
.qb-menubar .qb-era-btn.modern { border-color: #4E9E19; color: #2A5A0E; }
.qb-menubar .qb-era-btn.modern i { background: #4E9E19; }
.qb-menubar .qb-era-btn:hover { background: linear-gradient(to bottom, #FFF, #DCE9F8); border-color: #7BA2CE; }
.qb-menubar .qb-era-info {
  width: 14px; height: 14px; border-radius: 50%; border: 1px solid #A8B0B8;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; color: #5C6874; cursor: pointer;
}
.qb-menubar .qb-era-info:hover { border-color: #2A5DB0; color: #2A5DB0; background: #EAF2FB; }
.qb-menubar .qb-menu-sep-v { width: 1px; height: 13px; background: #C4C4C4; }

.qb-menubar .qb-badge {
  background: #D0342C; color: #fff; border-radius: 9px; min-width: 17px; height: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; padding: 0 5px;
}
.qb-menubar .qb-mdi-sysbtns { display: flex; align-items: stretch; }
.qb-menubar .qb-mdi-sysbtn {
  width: 26px; display: flex; align-items: center; justify-content: center;
  border-left: 1px solid #C4C4C4; font-size: 11px; color: #333;
}
.qb-menubar .qb-mdi-sysbtn:hover { background: #D8E5F4; }
.qb-menubar .qb-mdi-sysbtn.close:hover { background: #C42B1C; color: #fff; }

/* ---- drop-down menus ---------------------------------------------------- */
.qb-menu-popup {
  position: absolute; z-index: 900;
  background: #F7F7F7;
  border: 1px solid #9E9E9E;
  box-shadow: 2px 3px 7px rgba(0,0,0,.28);
  padding: 2px 0;
  min-width: 190px;
  font-size: 12px;
}
.qb-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 3px 22px 3px 26px; white-space: nowrap; position: relative;
}
.qb-menu-item .qb-mi-label { flex: 1 1 auto; }
.qb-menu-item .qb-mi-key { color: #6A6A6A; font-size: 11px; padding-left: 22px; }
.qb-menu-item .qb-mi-arrow { font-size: 9px; color: #4A4A4A; margin-left: 8px; }
.qb-menu-item:hover, .qb-menu-item.open { background: #CDE3F7; }
.qb-menu-item.disabled { color: #9A9A9A; }
.qb-menu-item.disabled:hover { background: transparent; }
.qb-menu-item.checked::before {
  content: '✓'; position: absolute; left: 8px; font-size: 11px; color: #12508A;
}
.qb-menu-sep { height: 1px; background: #D0D0D0; margin: 3px 2px 3px 24px; }
.qb-menu-underline { text-decoration: underline; }

/* -------------------------------------------------------------------------
   3.  Body: icon bar + MDI client
   ---------------------------------------------------------------------- */
.qb-body { flex: 1 1 auto; display: flex; min-height: 0; }

.qb-iconbar {
  width: var(--qb-iconbar-w);
  flex: 0 0 auto;
  background: var(--qb-iconbar);
  border-right: 1px solid var(--qb-iconbar-edge);
  display: flex; flex-direction: column;
  color: var(--qb-iconbar-text);
  font-size: 12px;
  transition: width .12s ease;
}
.qb-iconbar.collapsed { width: 18px; }
.qb-iconbar.collapsed .qb-ib-scroll,
.qb-iconbar.collapsed .qb-ib-sections,
.qb-iconbar.collapsed .qb-ib-search input { display: none; }

.qb-ib-search {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 4px 6px 8px; flex: 0 0 auto;
}
.qb-ib-search input {
  flex: 1 1 auto; height: 22px; min-width: 0;
  background: #fff; border: 1px solid #4A6076; padding: 0 5px;
  font-size: 11px; color: #222; outline: none;
}
.qb-ib-search .qb-ib-find {
  width: 22px; height: 22px; flex: 0 0 auto;
  background: #2B4A68; border: 1px solid #4A6076;
  display: flex; align-items: center; justify-content: center; color: #DCE8F2;
}
.qb-ib-collapse {
  width: 14px; flex: 0 0 auto; text-align: center; color: var(--qb-iconbar-dim);
  font-size: 11px; cursor: pointer;
}
.qb-ib-collapse:hover { color: #fff; }

.qb-ib-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
.qb-ib-scroll::-webkit-scrollbar { width: 10px; background: var(--qb-iconbar); }
.qb-ib-scroll::-webkit-scrollbar-thumb { background: #3B5670; border: 2px solid var(--qb-iconbar); }

.qb-ib-item {
  display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 8px 0 11px; white-space: nowrap; overflow: hidden;
}
.qb-ib-item .qb-ib-ico { width: 20px; height: 20px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.qb-ib-item:hover { background: var(--qb-iconbar-hover); }
.qb-ib-item.active { background: var(--qb-iconbar-active); box-shadow: inset 3px 0 0 #5B9BD5; }
.qb-ib-item .qb-ib-val { margin-left: auto; color: var(--qb-iconbar-dim); font-size: 11px; }

.qb-ib-sectionhdr {
  background: var(--qb-iconbar-section);
  padding: 5px 10px; font-size: 11px; letter-spacing: .3px;
  border-top: 1px solid #16283C; border-bottom: 1px solid #16283C;
  display: flex; align-items: center; justify-content: space-between;
}
.qb-ib-sections { flex: 0 0 auto; border-top: 1px solid #16283C; }
.qb-ib-sections .qb-ib-sect {
  padding: 7px 12px; font-size: 12px; border-bottom: 1px solid #16283C;
  display: flex; align-items: center; justify-content: space-between;
}
.qb-ib-sections .qb-ib-sect:hover { background: var(--qb-iconbar-hover); }
.qb-ib-sections .qb-ib-sect.active { background: var(--qb-iconbar-active); color: #fff; }
.qb-ib-link { padding: 6px 12px; color: #8FC3F0; font-size: 11px; }
.qb-ib-link:hover { text-decoration: underline; }

/* ---- top icon bar variant ----------------------------------------------- */
.qb-topbar {
  flex: 0 0 auto; height: 46px;
  background: var(--qb-iconbar);
  border-bottom: 1px solid var(--qb-iconbar-edge);
  display: flex; align-items: center; gap: 2px; padding: 0 6px;
  color: var(--qb-iconbar-text); overflow-x: auto;
}
.qb-topbar .qb-tbi {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 54px; height: 42px; padding: 0 6px; font-size: 10px; gap: 2px;
}
.qb-topbar .qb-tbi:hover { background: var(--qb-iconbar-hover); }
.qb-topbar .qb-tb-sep { width: 1px; height: 30px; background: #3B5670; margin: 0 4px; }

/* -------------------------------------------------------------------------
   4.  MDI client and child windows
   ---------------------------------------------------------------------- */
.qb-mdi {
  flex: 1 1 auto; position: relative; overflow: hidden;
  background: var(--qb-app-bg);
  min-width: 0;
}
.qb-mdi::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 1px 1px 0 #D5D5D5;
}

.qb-win {
  position: absolute;
  background: var(--qb-panel);
  border: 1px solid #7A8B99;
  box-shadow: 2px 2px 6px rgba(0,0,0,.22);
  display: flex; flex-direction: column;
  min-width: 320px; min-height: 160px;
  overflow: hidden;
}
.qb-win.maximized {
  left: 0 !important; top: 0 !important;
  width: 100% !important; height: 100% !important;
  border: none; box-shadow: none;
}
.qb-win.maximized > .qb-win-caption { display: none; }

.qb-win-caption {
  height: 26px; flex: 0 0 auto;
  background: var(--qb-mdi-caption);
  color: #fff; display: flex; align-items: center;
  padding: 0 2px 0 7px; font-size: 12px; cursor: default;
}
.qb-win:not(.active) > .qb-win-caption {
  background: linear-gradient(to bottom, var(--qb-mdi-caption-in-top), var(--qb-mdi-caption-in-bot));
}
.qb-win-caption .qb-wc-title {
  flex: 1 1 auto; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qb-win-caption .qb-wc-btn {
  width: 28px; height: 22px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #EAF1F7;
}
.qb-win-caption .qb-wc-btn:hover { background: rgba(255,255,255,.2); }
.qb-win-caption .qb-wc-btn.close:hover { background: #C42B1C; }

.qb-win-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

.qb-win-resize {
  position: absolute; right: 0; bottom: 0; width: 14px; height: 14px;
  cursor: nwse-resize; z-index: 5;
  background: repeating-linear-gradient(-45deg, #9AA7B2 0 1px, transparent 1px 3px);
}
.qb-win.maximized .qb-win-resize { display: none; }

/* -------------------------------------------------------------------------
   5.  Status / bottom hint strip (our own affordance, not in real QuickBooks)
   ---------------------------------------------------------------------- */
.qb-statusbar {
  flex: 0 0 auto; height: 22px;
  background: linear-gradient(to bottom, #F4F4F4, #DDDDDD);
  border-top: 1px solid #B4B4B4;
  display: flex; align-items: center; gap: 14px;
  padding: 0 10px; font-size: 11px; color: #4A4A4A;
}
.qb-statusbar .qb-sb-sep { width: 1px; height: 13px; background: #C4C4C4; }
.qb-statusbar .qb-sb-right { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.qb-statusbar b { font-weight: 600; color: #222; }