/* ============================================================
   Quickgrind PMS — ExtJS shell styles (index.html)
   Dashboard pages keep their own styles in views/*.html
   ============================================================ */

:root{
  --accent:#007AC2;
  --surface:#FFFFFF;
  --ink:#1A1D21;
  --ink-2:#55606B;
  --ink-3:#8A939C;
  --line:#DFE3E7;
  --bg:#F2F3F5;
  --red:#C2382C;
  --accent-2:#66B2E0;
  --sans:'IBM Plex Sans',sans-serif;
}

html,body{height:100%;margin:0}

/* Header */
.qg-header{
  background:var(--surface);
  border-top:3px solid var(--accent);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  box-sizing:border-box;
}
.qg-header.x-toolbar,
.qg-header.x-toolbar-default{
  padding:8px !important;
  box-sizing:border-box !important;
}
.qg-header .x-box-inner{
  box-sizing:border-box !important;
}
.qg-brand{
  width:34px;height:34px;background:var(--accent);color:#fff;font-weight:600;
  display:flex;align-items:center;justify-content:center;border-radius:6px;
  font-size:15px;letter-spacing:.5px;font-family:var(--sans);
  margin-right:8px;
}
.qg-h1{font-family:var(--sans);font-size:17px;font-weight:600;color:var(--ink);line-height:1.2}
.qg-h1-screen{letter-spacing:.04em}
.qg-sub{font-family:var(--sans);font-size:12px;color:var(--ink-2);line-height:1.4}

.qg-nav .x-btn-inner{font-family:var(--sans) !important;font-weight:500}

/* Shared header control box style */
.qg-shell-toggle,
.qg-shell-toggle.x-btn,
.qg-shell-toggle.x-btn-default-small,
.qg-shell-toggle.x-btn-over,
.qg-shell-toggle.x-btn-focus,
.qg-shell-toggle.x-btn-pressed,
.qg-user-btn,
.qg-user-btn.x-btn,
.qg-user-btn.x-btn-default-small,
.qg-user-btn.x-btn-over,
.qg-user-btn.x-btn-focus,
.qg-user-btn.x-btn-pressed,
.qg-user-btn.x-btn-menu-active{
  background:#FFFFFF !important;
  background-image:none !important;
  border:1px solid var(--line) !important;
  border-radius:6px !important;
  box-shadow:none !important;
  outline:none !important;
  height:32px !important;
  min-height:32px !important;
  margin:0 !important;
  padding:0 10px !important;
  box-sizing:border-box !important;
}
.qg-shell-toggle,
.qg-shell-toggle.x-btn,
.qg-shell-toggle.x-btn-default-small,
.qg-shell-toggle.x-btn-over,
.qg-shell-toggle.x-btn-focus,
.qg-shell-toggle.x-btn-pressed{
  margin:0 8px 0 0 !important;
}
.qg-shell-toggle.qg-nav.x-btn-arrow-right,
.qg-shell-toggle.x-btn-arrow-right{
  padding:0 10px !important;
}
.qg-user-btn,
.qg-user-btn.x-btn,
.qg-user-btn.x-btn-default-small,
.qg-user-btn.x-btn-over,
.qg-user-btn.x-btn-focus,
.qg-user-btn.x-btn-pressed,
.qg-user-btn.x-btn-menu-active{
  width:32px !important;
  min-width:32px !important;
  max-width:32px !important;
  padding:0 !important;
}
.qg-shell-toggle .x-btn-button,
.qg-shell-toggle .x-btn-wrap,
.qg-user-btn .x-btn-button,
.qg-user-btn .x-btn-wrap{
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  border:none !important;
  padding:0 !important;
}
.qg-shell-toggle .x-btn-icon-el.fa{
  font-size:14px !important;
  color:var(--accent) !important;
  line-height:1 !important;
  margin:0 6px 0 0 !important;
  position:static !important;
}
.qg-shell-toggle .x-btn-inner{
  font-family:var(--sans) !important;
  font-size:13px !important;
  font-weight:500 !important;
  color:var(--ink-2) !important;
  padding:0 !important;
  line-height:1 !important;
}
.qg-shell-toggle.x-btn-over,
.qg-user-btn.x-btn-over,
.qg-user-btn.x-btn-menu-active{
  border-color:var(--accent) !important;
  background:#FFFFFF !important;
}
.qg-shell-toggle.x-btn-over .x-btn-inner,
.qg-shell-toggle.x-btn-over .x-btn-icon-el.fa{
  color:var(--accent) !important;
}
.qg-user-btn .x-btn-inner{display:none !important;width:0 !important;padding:0 !important}
.qg-user-btn .x-btn-icon-el.fa{
  font-size:16px !important;
  color:var(--ink-2) !important;
  line-height:1 !important;
  margin:0 !important;
  position:static !important;
}
.qg-user-btn.x-btn-over .x-btn-icon-el.fa,
.qg-user-btn.x-btn-menu-active .x-btn-icon-el.fa{
  color:var(--accent) !important;
}
.qg-screen-menu,
.qg-screen-menu.x-btn,
.qg-screen-menu.x-btn-default-small,
.qg-screen-menu.x-btn-over,
.qg-screen-menu.x-btn-focus,
.qg-screen-menu.x-btn-pressed,
.qg-screen-menu.x-btn-menu-active{
  background:#FFFFFF !important;
  background-image:none !important;
  border:1px solid var(--line) !important;
  border-radius:6px !important;
  box-shadow:none !important;
  outline:none !important;
  width:32px !important;
  min-width:32px !important;
  max-width:32px !important;
  height:32px !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}
.qg-screen-menu .x-btn-inner{display:none !important;width:0 !important;padding:0 !important;margin:0 !important}
.qg-screen-menu .x-btn-icon-el.fa{
  font-size:14px !important;
  color:var(--ink-2) !important;
  line-height:1 !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  position:static !important;
  display:block !important;
  text-align:center;
}
.qg-screen-menu.x-btn-over,
.qg-screen-menu.x-btn-menu-active{
  border-color:var(--accent) !important;
  background:#FFFFFF !important;
}
.qg-screen-menu.x-btn-over .x-btn-icon-el.fa,
.qg-screen-menu.x-btn-menu-active .x-btn-icon-el.fa{
  color:var(--accent) !important;
}
.qg-screen-menu .x-btn-button,
.qg-screen-menu .x-btn-wrap,
.qg-screen-menu .x-btn-button-center,
.qg-screen-menu .x-btn-button-default-small{
  border:none !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  height:100% !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}
.qg-screen-menu .x-btn-icon-el{
  position:static !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  margin:0 !important;
}

.qg-burger .x-btn-icon-el.fa,
.qg-kebab .x-btn-icon-el.fa{font-size:18px;color:var(--ink-2)}
.qg-kebab:not(.qg-screen-menu),
.qg-kebab.x-btn:not(.qg-screen-menu),
.qg-kebab.x-btn-default-small:not(.qg-screen-menu),
.qg-kebab.x-btn-over:not(.qg-screen-menu),
.qg-kebab.x-btn-focus:not(.qg-screen-menu),
.qg-kebab.x-btn-pressed:not(.qg-screen-menu),
.qg-kebab.x-btn-menu-active:not(.qg-screen-menu){
  background:transparent !important;
  background-image:none !important;
  border:none !important;
  border-width:0 !important;
  box-shadow:none !important;
  outline:none !important;
  min-width:24px !important;
  margin:0 !important;
  padding:0 !important;
}
.qg-kebab:not(.qg-screen-menu) .x-btn-inner{display:none !important;width:0 !important;padding:0 !important}
.qg-kebab:not(.qg-screen-menu).x-btn-over .x-btn-icon-el.fa,
.qg-kebab:not(.qg-screen-menu).x-btn-menu-active .x-btn-icon-el.fa{color:var(--accent)}
.qg-kebab:not(.qg-screen-menu) .x-btn-button,
.qg-kebab:not(.qg-screen-menu) .x-btn-wrap{
  border:none !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
}

.x-menu-item-icon.fa,
.x-btn-icon-el.fa{font-size:14px;line-height:16px;text-align:center;color:var(--accent)}

.qg-nav .x-btn-arrow-right:after,
.qg-week-filter .x-btn-arrow-right:after{
  content:"" !important;width:0 !important;padding:0 !important;margin:0 !important;display:none !important;
}
.qg-nav.x-btn-arrow-right,
.qg-week-filter.x-btn-arrow-right{padding-right:0 !important}

/* Wall chrome — scrolls with wall content */
.qg-dash.wall .qg-main{padding:0}
.qg-wall-chrome{
  display:flex;
  align-items:center;
  gap:12px;
  background:#0E1216;
  padding:8px 22px;
  box-sizing:border-box;
  width:100%;
  max-width:1240px;
  margin:0 auto;
}
.qg-wall-chrome-title{
  color:#EDF0F3 !important;
  letter-spacing:.04em;
  font-size:22px !important;
  line-height:1.2;
}
.qg-wall-chrome-titles{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  flex:1 1 auto;
  padding:4px 0;
}
.qg-wall-chrome-filter{
  font-family:var(--sans);
  font-size:15px;
  font-weight:500;
  color:#A6B0BA;
  line-height:1.3;
  margin-top:4px;
}
.qg-wall-desk-btn{
  appearance:none;
  background:#FFFFFF;
  border:1px solid #DFE3E7;
  border-radius:6px;
  box-shadow:none;
  padding:6px 12px 6px 10px;
  margin:0;
  min-width:0;
  height:32px;
  cursor:pointer;
  color:#55606B;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  line-height:1;
  box-sizing:border-box;
}
.qg-wall-desk-btn .fa{
  font-size:14px;
  line-height:1;
  color:#007AC2;
}
.qg-wall-desk-btn span{
  color:#55606B;
}
.qg-wall-desk-btn:hover{
  background:#F2F3F5;
  border-color:#DFE3E7;
}
.qg-wall-desk-btn:hover .fa,
.qg-wall-desk-btn:hover span{
  color:#007AC2;
}
.qg-dash.wall .qg-wall > .w-tiles,
.qg-dash.wall .qg-wall > .w-sec,
.qg-dash.wall .qg-wall > .w-grid-wrap,
.qg-dash.wall .qg-wall > .w-strip{
  max-width:1240px;
  margin-left:auto;
  margin-right:auto;
  padding-left:22px;
  padding-right:22px;
  box-sizing:border-box;
}
.qg-dash.wall .qg-wall > .w-tiles{margin-top:20px}
.qg-dash.wall .qg-wall > .w-strip{margin-bottom:20px}

.qg-mode-chrome{
  background:var(--bg);
  border-bottom:none;
}
.x-docked-top.qg-mode-chrome,
.x-panel-body .qg-mode-chrome,
.x-docked.qg-mode-chrome{
  background:var(--bg) !important;
  border:none !important;
}
.qg-mode-chrome-hidden,
.qg-mode-chrome.x-hidden,
.qg-mode-chrome.x-hidden-display,
.qg-mode-chrome.x-hidden-offsets{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
  border:none !important;
  padding:0 !important;
  margin:0 !important;
}
.qg-mode-chrome-inner{
  width:100%;
  max-width:1240px;
  box-sizing:border-box;
  background:transparent;
}
.qg-mode-chrome .x-toolbar,
.qg-modebar-title,
.qg-modebar-filter{
  border:none !important;
  box-shadow:none !important;
  background:transparent !important;
}
.qg-modebar{
  background:transparent !important;
  padding:0 !important;
  box-sizing:border-box;
}
.qg-modebar-title,
.qg-modebar-filter{
  padding-left:22px !important;
  padding-right:22px !important;
}
.qg-modebar-title{
  padding-top:8px !important;
  padding-bottom:10px !important;
  height:auto !important;
  min-height:40px;
}
.qg-modebar-filter{
  padding-top:2px !important;
  padding-bottom:8px !important;
  min-height:36px;
  height:auto !important;
}
.qg-modebar-title .x-toolbar-item,
.qg-modebar-filter .x-toolbar-item{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
.qg-modebar-title .x-box-target,
.qg-modebar-filter .x-box-target{
  align-items:center;
}
.qg-filter-sub-row{
  display:flex;
  align-items:center;
  min-width:0;
  flex:1 1 auto;
}

/* Match right-edge controls */
.qg-modebar-title .qg-screen-menu,
.qg-modebar-filter .qg-week-filter{
  margin-right:0 !important;
}
.qg-week-filter{
  margin-left:0 !important;
  height:32px !important;
  min-height:32px !important;
  box-sizing:border-box !important;
}
.qg-week-filter .x-btn-inner{
  font-family:var(--sans);font-size:12px;font-weight:500;
  color:var(--ink-2);max-width:420px;overflow:hidden;text-overflow:ellipsis;
  line-height:30px !important;
}
.qg-week-filter .x-btn-button,
.qg-week-filter .x-btn-wrap{
  height:100% !important;
  display:flex !important;
  align-items:center !important;
}
.qg-week-filter,
.qg-week-filter.x-btn,
.qg-week-filter.x-btn-default-small{
  border-radius:6px !important;
}

/* Dropdown menus — soft rounded boxes */
.qg-screen-menu-panel,
.qg-week-menu,
.qg-user-menu,
.qg-week-select-list.x-boundlist{
  border:1px solid var(--line) !important;
  border-radius:8px !important;
  overflow:hidden !important;
  box-shadow:0 8px 24px rgba(26,29,33,.12) !important;
  background:#FFFFFF !important;
}
.qg-screen-menu-panel .x-menu-body,
.qg-week-menu .x-menu-body,
.qg-user-menu .x-menu-body{
  border-radius:8px !important;
  background:#FFFFFF !important;
  overflow:hidden !important;
}
.qg-screen-menu-panel .x-menu-item-link{
  position:relative !important;
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  min-height:36px !important;
  padding:0 14px 0 36px !important;
  text-align:left !important;
  direction:ltr !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  box-sizing:border-box !important;
}
.qg-screen-menu-panel .x-menu-item-text{
  text-align:left !important;
  float:none !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.3 !important;
  display:inline-block !important;
  vertical-align:middle !important;
}
.qg-screen-menu-panel .x-menu-item-icon,
.qg-screen-menu-panel .x-menu-item-icon.fa{
  position:absolute !important;
  left:12px !important;
  right:auto !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
  width:16px !important;
  height:16px !important;
  line-height:16px !important;
  font-size:14px !important;
  text-align:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.qg-screen-menu-panel .x-menu-item-active .x-menu-item-link{
  background:rgba(0,122,194,.08) !important;
}
.qg-week-select-list.x-boundlist{
  padding:4px 0 !important;
}

/* Desk content panel — same bg as title/filter so they read as one */
.x-viewport,
.x-viewport > .x-panel,
.x-viewport > .x-panel > .x-panel-bodyWrap,
.x-viewport > .x-panel > .x-panel-body,
.x-viewport > .x-panel > .x-panel-body-default{
  background:var(--bg) !important;
}

.qg-pagetitle{
  font-family:var(--sans);
  font-size:22px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:.04em;
  line-height:1.2;
}
.qg-pagesub{font-family:var(--sans);font-size:12px;color:var(--ink-3);margin-left:10px}
.qg-pagesub-only{margin-left:0;font-size:15px;color:var(--ink-2)}
.qg-tabs{display:flex;gap:2px;align-items:center}
.qg-tab{
  font-family:var(--sans);font-size:13px;font-weight:500;
  color:var(--ink-2);padding:11px 15px;cursor:pointer;
  border-bottom:2px solid transparent;user-select:none;
}
.qg-tab:hover{color:var(--ink)}
.qg-tab.on{color:var(--accent);border-bottom-color:var(--accent)}

/* Week / month filter menu */
.qg-week-menu .x-menu-body{padding:0;min-width:400px;overflow:visible !important;max-height:none !important}
.qg-week-menu .x-menu-item,
.qg-week-menu .x-menu-item-text,
.qg-week-menu .x-box-inner{overflow:visible !important}
.qg-week-menu .x-menu-item-link{padding-left:0 !important;margin-left:0 !important}
.qg-week-menu .x-menu-item-icon,
.qg-week-menu .x-menu-item-indent{display:none !important;width:0 !important;margin:0 !important}
.qg-week-menu .x-menu-item-text{margin-left:0 !important;padding-left:0 !important}
.qg-week-menu .x-form-item-label{font-family:var(--sans);font-size:12px;color:var(--ink-2)}
.qg-filter-col-calendar{overflow:visible;width:260px;flex:0 0 260px}
.qg-filter-calendar-wrap{width:100%;flex:0 0 auto}
.qg-filter-date-row{width:100%;flex:0 0 auto}
.qg-filter-date-col{overflow:visible;min-width:0}
.qg-filter-col-calendar .x-form-item{margin-bottom:0;overflow:visible}
.qg-filter-col-calendar .x-form-item-label-top{margin-bottom:5px;padding:0}
.qg-filter-col-calendar .qg-date-input{width:100%}
.qg-filter-col-calendar .qg-date-input .x-form-item-body,
.qg-filter-col-calendar .qg-date-input .x-form-item-body-default{width:100% !important;overflow:visible}
.qg-filter-col-calendar .qg-date-input .x-form-trigger-wrap{
  position:relative;width:100% !important;box-sizing:border-box;padding-left:30px;overflow:visible;
}
.qg-filter-col-calendar .qg-date-input .x-form-text-wrap{display:block;width:100% !important;box-sizing:border-box}
.qg-filter-col-calendar .qg-date-input input.x-form-field{
  width:100% !important;box-sizing:border-box;padding-left:7px;padding-right:6px;min-height:30px;font-size:12px;
}
.qg-filter-col-calendar .qg-date-input .x-form-date-trigger{
  position:absolute;left:0;top:0;bottom:0;width:30px !important;
  background:none !important;background-image:none !important;
  border:none !important;border-right:1px solid var(--line) !important;cursor:pointer;
}
.qg-filter-col-calendar .qg-date-input .x-form-date-trigger::before{
  font-family:FontAwesome;content:"\f073";font-size:12.5px;color:var(--accent);
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;line-height:1;
}
.qg-filter-calendar,
.qg-filter-calendar.x-datepicker,
.qg-filter-calendar.x-layer{
  position:relative !important;left:0 !important;top:0 !important;
  margin:0 !important;padding:0 !important;
}
.qg-filter-calendar{
  border:1px solid var(--line) !important;border-radius:8px !important;
  width:100% !important;height:auto !important;
  overflow:hidden !important;
  background:var(--surface) !important;
  box-shadow:0 1px 3px rgba(26,29,33,.06);
  box-sizing:border-box !important;
}
.qg-filter-calendar > .x-datepicker,
.qg-filter-calendar .x-datepicker{
  width:100% !important;height:auto !important;
  border:none !important;border-radius:0 !important;
  background:transparent !important;box-shadow:none !important;
  overflow:hidden;box-sizing:border-box !important;
  margin:0 !important;padding:0 !important;
}
.qg-filter-calendar div.x-datepicker-inner{
  width:100% !important;padding:0 !important;margin:0 !important;
  border:none !important;border-radius:0 !important;
  background:transparent !important;box-sizing:border-box !important;overflow:hidden;
}
.qg-filter-calendar .x-datepicker-header{
  display:flex;align-items:center;justify-content:space-between;
  width:100% !important;box-sizing:border-box !important;min-height:0;
  padding:5px 8px !important;margin:0 !important;
  border:none !important;border-bottom:1px solid var(--line) !important;
  border-radius:0 !important;background:var(--bg) !important;
  position:relative;overflow:hidden;
}
.qg-filter-calendar .x-datepicker-header .x-box-inner{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;box-sizing:border-box;
}
.qg-filter-calendar .x-datepicker-header .x-datepicker-month{
  flex:1 1 auto;text-align:center;min-width:0;padding:0 4px;
}
.qg-filter-calendar .x-datepicker-header .x-datepicker-month .x-btn,
.qg-filter-calendar .x-datepicker-header .x-datepicker-month button{
  width:100%;max-width:100%;margin:0;padding:0 !important;min-height:0 !important;
  border:0 !important;background:transparent !important;
}
.qg-filter-calendar .x-datepicker-header .x-btn-inner{
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  color:var(--ink);padding:0;line-height:1.2;text-align:center;
}
.qg-filter-calendar .x-datepicker-date-table,
.qg-filter-calendar table.x-datepicker-inner{
  width:100% !important;table-layout:fixed;border-collapse:collapse;border-spacing:0;
  margin:0 !important;padding:6px 8px 8px !important;box-sizing:border-box !important;
  display:table !important;border:none !important;border-radius:0 !important;
}
.qg-filter-calendar .x-datepicker-header + div.x-datepicker-inner,
.qg-filter-calendar .x-datepicker-header + table.x-datepicker-inner{
  margin:0 !important;padding:0 !important;
}
.qg-filter-calendar .x-datepicker-column-header{
  font-family:var(--sans);font-size:11px;font-weight:500;
  color:var(--ink-3);text-align:center;padding:0 0 4px;line-height:16px;
}
.qg-filter-calendar td.x-datepicker-date{
  font-family:var(--sans);font-size:12px;text-align:center;padding:1px;
  vertical-align:middle;
}
.qg-filter-calendar td.x-datepicker-date div{
  box-sizing:border-box;width:100%;max-width:100%;height:28px;line-height:28px;
  margin:0;padding:0;border-radius:50%;font-weight:500;
  font-size:12px;
  transition:background-color .15s ease,color .15s ease;
}
.qg-filter-calendar td.x-datepicker-date a:hover div,
.qg-filter-calendar td.x-datepicker-date a:focus div{
  background:rgba(0,122,194,.1);color:var(--accent);
}
.qg-filter-calendar .x-datepicker-prev,
.qg-filter-calendar .x-datepicker-next{
  position:static;top:auto;left:auto;right:auto;
  flex:0 0 18px;width:18px;height:18px;margin:0;z-index:1;
}
.qg-filter-calendar .x-datepicker-prev a,
.qg-filter-calendar .x-datepicker-next a{
  display:flex;align-items:center;justify-content:center;width:18px;height:18px;
}
.qg-filter-calendar td.x-datepicker-prevday div,
.qg-filter-calendar td.x-datepicker-nextday div{color:var(--ink-3);opacity:.65}
.qg-filter-calendar td.qg-range-day div{
  width:100%;border-radius:0;background:rgba(0,122,194,.12);color:var(--accent);
}
.qg-filter-calendar td.qg-range-start div{
  width:100%;border-radius:14px 0 0 14px;background:var(--accent) !important;color:#fff !important;
}
.qg-filter-calendar td.qg-range-end div{
  width:100%;border-radius:0 14px 14px 0;background:var(--accent) !important;color:#fff !important;
}
.qg-filter-calendar td.qg-range-single div{
  width:100%;max-width:100%;height:28px;line-height:28px;border-radius:50%;
  background:var(--accent) !important;color:#fff !important;
}
.qg-filter-col-week{
  padding-top:4px;
  padding-left:8px;
}
.qg-week-select .x-form-item-label-top{
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  color:var(--ink-2);
  padding:0 0 6px 0;
}
.qg-week-select .x-form-trigger-wrap{
  border:1px solid var(--line) !important;
  border-radius:6px !important;
  background:#fff !important;
  overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.qg-week-select.x-form-focus .x-form-trigger-wrap,
.qg-week-select .x-form-trigger-wrap-focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(0,122,194,.12);
}
.qg-week-select input.x-form-field{
  font-family:var(--sans) !important;
  font-size:13px !important;
  font-weight:500 !important;
  color:var(--ink) !important;
  padding:8px 10px !important;
  height:34px !important;
  line-height:18px !important;
  background:transparent !important;
  cursor:pointer;
}
.qg-week-select .x-form-trigger{
  border:none !important;
  background:transparent !important;
  width:28px !important;
}
.qg-week-select .x-form-trigger-default:before{
  color:var(--ink-3);
  font-size:12px;
}
.qg-week-select-list .x-boundlist-item{
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  color:var(--ink-2);
  padding:8px 12px;
  border:none !important;
}
.qg-week-select-list .x-boundlist-item-over{
  background:rgba(0,122,194,.08) !important;
  color:var(--accent) !important;
}
.qg-week-select-list .x-boundlist-selected{
  background:rgba(0,122,194,.12) !important;
  color:var(--accent) !important;
  font-weight:600;
}
.qg-filter-apply-btn{
  font-family:var(--sans) !important;
  font-size:12px !important;font-weight:600 !important;
  padding:6px 16px !important;
  background:var(--accent) !important;border-color:var(--accent) !important;
}
.qg-filter-apply-btn .x-btn-inner{color:#fff !important}
.qg-filter-apply-btn.x-btn-over{background:#006aad !important;border-color:#006aad !important}
.qg-filter-footer{
  border-top:1px solid var(--line);padding-top:10px;
  min-height:40px;overflow:visible !important;
}
.qg-timezone-wrap{
  flex:0 0 200px !important;width:200px !important;min-width:200px !important;
}
.qg-timezone-select{width:100% !important;min-width:200px !important}
.qg-timezone-select .x-form-trigger-wrap,
.qg-timezone-select .x-form-text-wrap{width:100% !important}
.qg-timezone-select .x-form-trigger{display:none !important;width:0 !important}
.qg-timezone-select input.x-form-field{
  font-family:var(--sans);font-size:11.5px;color:var(--ink-2);
  width:100% !important;cursor:pointer;padding-right:8px !important;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.qg-frame{border:0;width:100%;height:100%;display:block;background:var(--bg)}
.qg-shell-frame{width:100%;height:100%}
.qg-shell-frame .qg-frame{width:100%;height:100%;min-height:100%}
.qg-shell-content{position:relative;background:var(--bg)}

/* Smooth page / shell loading mask */
.qg-load-mask{
  position:absolute;
  inset:0;
  z-index:12000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(242,243,245,.88);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .24s ease, visibility .24s ease;
}
.qg-load-mask.qg-load-mask-noanim{
  transition:none !important;
}
.qg-load-mask.qg-load-mask-on{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.qg-load-mask-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 22px;
  background:#fff;
  border:1px solid #DFE3E7;
  border-radius:10px;
  box-shadow:0 8px 28px rgba(26,29,33,.08);
  font-family:'IBM Plex Sans',sans-serif;
  font-size:14px;
  font-weight:500;
  color:#1A1D21;
  letter-spacing:.01em;
  transform:translateY(4px) scale(.98);
  transition:transform .24s ease;
}
.qg-load-mask-noanim .qg-load-mask-card{
  transition:none !important;
  transform:none;
}
.qg-load-mask-on .qg-load-mask-card{
  transform:translateY(0) scale(1);
}
.qg-load-mask-spinner{
  width:18px;
  height:18px;
  border:2.5px solid #D5DEE6;
  border-top-color:#007AC2;
  border-radius:50%;
  animation:qg-load-spin .7s linear infinite;
  flex:0 0 auto;
}
.qg-load-mask-text{line-height:1}
.qg-content-pending{
  opacity:0 !important;
  pointer-events:none;
}
/* Wall New Tools ↔ Regrind: sequential fade-out then fade-in */
.qg-dash.qg-wall-crossfade{
  transition:opacity .9s ease-in-out;
  will-change:opacity;
}
.qg-dash.qg-wall-crossfade-noanim{
  transition:none !important;
}
.qg-dash.qg-wall-crossfade-out{
  opacity:0 !important;
  pointer-events:none;
}
.qg-dash.qg-wall-crossfade-in{
  opacity:1;
}
@keyframes qg-load-spin{
  to{ transform:rotate(360deg); }
}

@media (max-width:640px){
  .qg-header.x-toolbar,
  .qg-header.x-toolbar-default{padding:8px !important}
  .qg-brand{width:28px;height:28px;font-size:13px;margin-right:8px}
  .qg-h1{font-size:14px}
  .qg-sub{display:none}
  .qg-modebar{padding:0 12px !important}
  .qg-pagetitle{font-size:18px}
  .qg-modebar-filter .qg-pagesub{display:block}
  .qg-tab{padding:11px 11px;font-size:12px}
  .qg-week-filter{margin-left:6px}
  .qg-week-filter .x-btn-inner{max-width:110px;font-size:11px}
  .qg-nav .x-btn-inner{font-size:12px !important}
}
@media (max-width:380px){
  .qg-h1{font-size:13px}
  .qg-pagetitle{font-size:16px}
  .qg-tab{padding:11px 8px}
}

/* Login */
.qg-login{background:var(--bg)}
.qg-login-card{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 4px 24px rgba(26,29,33,.08);
}
.qg-login-brand{
  width:42px;height:42px;background:var(--accent);color:#fff;font-weight:600;
  display:flex;align-items:center;justify-content:center;border-radius:8px;
  font-size:16px;letter-spacing:.5px;font-family:var(--sans);
  margin-bottom:14px;
}
.qg-login-title{font-family:var(--sans);font-size:20px;font-weight:600;color:var(--ink)}
.qg-login-sub{font-family:var(--sans);font-size:13px;color:var(--ink-2);margin-top:4px}
.qg-login-field .x-form-item-label{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--ink-2)}
.qg-login-field input.x-form-field{
  font-family:var(--sans);font-size:14px;min-height:36px;
}
.qg-login-error{
  font-family:var(--sans);font-size:12px;color:var(--red);
  background:#FBEDEB;border:1px solid #E8C4BF;border-radius:6px;padding:8px 10px;
}
.qg-login-btn{
  font-family:var(--sans) !important;font-weight:600 !important;
  background:var(--accent) !important;border-color:var(--accent) !important;
  padding:8px 0 !important;
}
.qg-login-btn .x-btn-inner{color:#fff !important;font-size:14px !important}
.qg-login-btn.x-btn-over{background:#006aad !important;border-color:#006aad !important}

/* User account menu */
.qg-user-label{
  font-family:var(--sans);font-size:12px;font-weight:500;color:var(--ink-2);
  margin-right:8px;
}
.qg-user-menu .x-menu-body{padding:4px 0;min-width:200px}
.qg-user-menu .x-menu-item-link{
  position:relative;display:flex;align-items:center;min-height:32px;
  padding-left:32px !important;
}
.qg-user-menu .x-menu-item-icon,
.qg-user-menu .x-menu-item-icon.fa{
  position:absolute !important;left:8px !important;top:50% !important;
  transform:translateY(-50%);margin:0 !important;
  width:16px;height:16px;display:flex;align-items:center;justify-content:center;
  line-height:1;text-align:left;
}
.qg-user-menu .x-menu-item-indent{display:none !important;width:0 !important;margin:0 !important}
.qg-user-menu .x-menu-item-text{margin-left:0 !important;padding-left:0 !important}
.qg-user-menu-profile-item .x-menu-item-link{cursor:default}
.qg-user-menu-profile-item.x-menu-item-active,
.qg-user-menu-profile-item.x-menu-item-active .x-menu-item-link{
  background:transparent !important;
}
.qg-user-menu-profile-item .x-menu-item-text{
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);
}
.qg-user-menu .x-menu-item-text{font-family:var(--sans);font-size:13px}