/* Tabular view styles */

:root {
  --table-row-stripped-background-color: var(--background-7);
}

.icon-button[role=button] {
  background: none;
}

.minified .full b {
  font-size: 0.7em;
}

.minified:not(.show-full) .full {display: none;}

.minified .btn {
  color: orange;
  cursor: pointer;
  padding-left: 10px;
  font-weight: bold;
}

.minified.show-full .mini {display: none;}

.minified.show-full .btn {color: green;}

.minified .full b {
  color: var(--color-2);
}

.page-header .header-left .title {
  font-family: 'Roboto';
  font-weight: 100;
  font-size: 1.2rem;
  color: var(--color-3);
  margin-left: 1rem;
  display: inline-block;
  line-height: 2rem;
  vertical-align: middle;
}

#tables {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
  margin: 0;
  padding: 0;
}

#tables .tables-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--background-1);
  border-radius: 0.5rem;
  min-height: 0;
  min-width: 0;
  margin: 0;
}

#tables .copilot-pane {
  margin: 0 0 0 0.5rem;
  width: 25rem;
  background: var(--background-1);
}

/*** copilot styles ***/

@media not screen and (max-width:1100px) {
  #tables.copilot-active .open-copilot,
  #tables.copilot-active-maybe .open-copilot,
  #tables:not(.copilot-active,.copilot-active-maybe) .close-copilot,
  #tables:not(.copilot-active,.copilot-active-maybe) .copilot-pane { display: none; }
}

@media screen and (max-width:1100px) {
  #tables {
    flex-direction: column;
  }

  #tables.copilot-active .open-copilot,
  #tables:not(.copilot-active) .close-copilot { display: none; }

  #tables .tables-pane,
  #tables .copilot-pane {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 1;
  }

  #tables:not(.copilot-active) .tables-pane { z-index:2; }
  #tables.copilot-active .copilot-pane { z-index:2; }
}

#copilot-area {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#copilot {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

#copilot .copilot-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: auto;
}

#copilot .copilot-content iframe {
  flex: 1;
  border-radius: 0.5rem;
  z-index: 1;
}

#copilot-ui-context-selector {
  display: flex;
  background: var(--background-3);
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

#copilot-ui-context-selector select {
  flex: 1;
  max-width: unset;
  margin: 0;
  background-color: var(--background-1);
}

#copilot-ui-context-selector select:not(:focus) {
  border-color: transparent;
}

/* tables-area */

.tables-pane .tables-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  min-height: 0;
  min-width: 0;
}

/* toolbar */

.tables-area .toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  background: var(--background-3);
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin: 0;
}

.tables-area .toolbar > * {
  margin: 0.125rem;
}

.tables-area .toolbar select {
  background-color: var(--background-1);
}

.tables-area .toolbar select:not(:focus) {
  border-color: transparent;
}

.tables-area .toolbar .icon-button {
  font-size: 0.8rem;
}

.tables-area .toolbar .icon-button:first-of-type {
  margin-left: auto;
}

#select-source,
#select-summary,
#select-tab,
#select-view {
  width: 10rem;
}

/* view area */

.tables-area .view-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
}

.view-area .source-view {
  flex: 1;
  display: flex;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0.5rem 0 0 0;
}

/* view filters */

.source-view .source-view-filters {
  display: flex;
  flex-direction: column;
  margin: 0 0.5rem 0 0;
  padding: 0;
  width: 14rem;
  min-width: 0;
}

/* desktop */
@media not screen and (max-width:1100px) {
  .tables-area:not(.filters-active):not(.filters-active-maybe) .source-view-filters { display: none; }
}

/* mobile */
@media screen and (max-width:1100px) {

  #select-source,
  #select-summary,
  #select-tab,
  #select-view {
    width: calc(50% - 0.25rem);
  }

  .tables-area.filters-active .source-view-body { display: none; }

  .tables-area:not(.filters-active) .source-view-filters { display: none; }

  .tables-area .source-view-filters {
    width: 100%;
    margin: 0;
  }
}

.source-view-filters .table-filter {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--background-2);
  border-radius: 0.5rem;
  padding: 0;
  margin: 0 0 0.5rem 0;
  min-height: 0;
  min-width: 0;
}

.table-filter .title {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
}

.table-filter input.search {
  height: 1.5rem;
  margin: 0 0.5rem 0.5rem 0.5rem;
  border-radius: 0.75rem;
  background-color: var(--background-1);
  background-image: var(--icon-search);
  background-repeat: no-repeat;
  background-position: calc(100% - 0.5rem);
  background-size: 1rem;
  padding: 0.5rem 2rem 0.5rem 0.7rem;
}

.table-filter input.search:not(:focus) {
  border-color: transparent;
}

.table-filter .table-filter-body {
  flex: 1;
  padding: 0 0.5rem;
  margin: 0 0.25rem;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--background-6) transparent;
}

.table-filter-body .filter-option {
  font-size: 0.5rem;
  padding: 0.25rem 0;
}

.table-filter-body .filter-option.hidden { display: none; }

.table-filter .filter-option label.all {
  font-weight: 700;
  color: #b60;
}

.table-filter .filter-option label.group {
  font-weight: 700;
  color: #cb7;
}

/* view body */

.source-view .source-view-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1rem;
  min-height: 0;
  min-width: 0;
  background: var(--background-2);
  border-radius: 0.5rem;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--background-6) transparent;
}

/* table */

.source-view-body.source-view-body-table {}

.source-view-body.source-view-body-table > .table {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.source-view-body-table th.binary-one,
.source-view-body-table td.binary-one {
  background: linear-gradient(30deg, transparent, #93c);
}

.source-view-body-table th.binary-zero,
.source-view-body-table td.binary-zero {
  background: linear-gradient(30deg, transparent, #33c);
}

.view-area table {
  position: relative;
  font-size: 0.6rem;
  --font-size: 0.6rem;
}

.view-area table .sticky-header {
  position: sticky;
  top: 0;
  background: var(--background-3);
}

.view-area td {
  color: #ccc;
}

.view-area .col-summary:not(.data),
.view-area .row-summary:not(.data) {
  font-weight: bold;
  color: var(--color-1);
}

.view-area:not(.data) td.data {
  display: none;
}

.view-area:not(.row-summary) td.row-summary {
  display: none;
}

.view-area:not(.data):not(.row-summary) th.row-summary {
  display: none;
}

.view-area:not(.col-summary) td.col-summary {
  display: none;
}

.view-area:not(.data):not(.col-summary) th.col-summary {
  display: none;
}

.view-area:not(.col-summary.row-summary) td:not(.data):not(.row-summary):not(.col-summary) {
  display: none;
}

.multi-line {
  font-size: 0.875em;
  color: #ccc;
  margin-bottom: 0.625rem;  
}

/* record */

.source-view-body.source-view-body-record {}

.source-view-body .record {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.source-view-body .record .record-head {
  display: flex;
  flex-wrap: wrap;
}

.source-view-body .record-head .navbar {
  display: flex;
  margin-left: auto;
}

.source-view-body .navbar .nav {
  font-size: 0.7rem;
  margin: 0 0.25rem;
}

.source-view-body .navbar .nav:not(.disabled) {
  cursor: pointer;
}

.source-view-body .navbar .nav.disabled {
  color: var(--color-3);
}

.source-view-body .record-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* histogram */

.source-view-body.source-view-body-histogram {
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
}

.histogram {
  width: 30rem;
  margin: 0.5rem;
  padding: 0.5rem;
  background: var(--background-1);
  border-radius: 0.5rem;
}

.histogram .title {
  margin: 0 0 0.5rem 0;
}

.histogram .chart {
  width: 100%;
}

/* current cell */

.source-view-body-table th.current-cell,
.source-view-body-table td.current-cell,
.source-view-body-record th.current-cell,
.source-view-body-record td.current-cell {
  border-radius: 0.25rem;
  background: var(--background-3);
  box-shadow: inset var(--background-1) 0 0 0.125rem 0.125rem;
}

/* cell link */

.source-view-body-table [role=link],
.source-view-body-table [role=link] p,
.source-view-body-table a,
.source-view-body-table a p,
.source-view-body-record [role=link],
.source-view-body-record [role=link] p,
.source-view-body-record a,
.source-view-body-record a p {
  color: cornsilk;
  cursor: pointer;
}