:root {
  --generic-border: #aaa;
  --error-cell-color: #f00;
  --import-table-border: #888;
  --indicators: #00f;
  --danger: #f00;

  --header-background: #ccc;

  --import-stripe-size: 16px;
  --stripe-empty: #ddd;
  --stripe-back: transparent;
  --stripe-back-error: #f00;
  --hover-back: rgb(249, 247, 230);
  --stripe-hover: var(--hover-back);

  --column-controls-border: #888;

  --table-header-background: #ddd;

  --selected-back: #8ff;
  --delete-border: #f00;
  --delete-background: #f88;

  --popup-background: #fff;
  --popup-foreground: #000;
  --popup-foreground-hover: #fff;
  --popup-border: #5595e5;

  --active-menu-back: var(--popup-border);

  --state-idle: #fff;
  --state-processing: #8ff;
  --state-failed: #f88;
  --state-partial-success: #ff8;
  --state-success: #8f8;

  --problems-border: #f00;
  --problems-background: #fbb;
  --warnings-border: #ff0;
  --warnings-background: #ffb;
}

.stickyTop {
  position: sticky;
  top: 39px;
}

/* The main importer container */
#import {
  line-height: 1;
}

/* The top tabs are simulated using button elements, so they can be disabled easily */
#import button.tab {
  display: inline-block;
  padding: 10px;
  background: #ddd;
  color: #000;
  border: 1px solid var(--generic-border);
  text-align: center;
  cursor: default;
}

#import button.tab.selected {
  background: #fff;
  border-bottom: 1px solid #fff;
}

#import nav {
  display: flex;
  flex-direction: rows;
}

#import button.tab:disabled {
  color: #888;
}

#import nav button.tab {
  width: calc(50% - 8px);   /* ewww... */
  margin: 0;
  margin-left: 5px;
}

#import section {
  border-top: 1px solid var(--generic-border);
  margin: -1px 0 0 0;
}

.sourceContents { }

.sourceContents textarea {
  margin: 5px 0 0 0;
  resize: vertical;
}

#import header {
  font-size: 150%;
  font-weight: bold;
  background: var(--header-background);
  padding: 5px;
  margin: 0;
}

#import summary {
  padding: 5px;
  cursor: default;
}

#import summary:hover, details[open] > summary {
  background: #ddd;
}

#import p.error {
  background: #f44;
  color: #fff;
  padding: 5px;
  margin: 0;
}

.inferTable table { border-collapse: collapse; }
.inferTable th { background: #ddd; }

.inferTable th, .inferTable td {
  border: 1px solid #000;
  padding: 5px;
}

#import input#fileUpload {
  border: 1px solid var(--generic-border);
  padding: 5px;
}

#import .settingRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

#import div#controls {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#import div#controls div.row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

#import div#controls button {
  margin: 0;
}

#import div#controls select /*, #import div#controls button*/ {
  padding: 2px 5px;
}

#import div#problems {
  display: flex;
  flex-direction: rows;
  gap: 10px;
}

#import div.problems {
  display: block;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  padding: 10px;
  line-height: 1.5;
}

#import div.problems ul {
  margin: 2px;
  padding: 5px 0 0 20px;
}

#import div.problems p {
  margin: 0;
  padding: 0;
}

#import div.errors {
  border-color: var(--problems-border);
  background: var(--problems-background);
}

#import div.warnings {
  border-color: var(--warnings-border);
  background: var(--warnings-background);
}

/*
  The import preview and working table. Both share the same styles, but the actual table
  has some extra styles applied to it (see the .notPreview selector).
*/
#import .importTable {
  border-top: 1px solid var(--import-table-border);
  border-right: 1px solid var(--import-table-border);
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
}

/* Row status indicators */
.importTable th.state.idle { background: var(--state-idle); }
.importTable th.state.processing { background: var(--state-processing); }
.importTable th.state.failed { background: var(--state-failed); }
.importTable th.state.partialSuccess { background: var(--state-partial-success); }
.importTable th.state.success { background: var(--state-success); }
.importTable th.state.failed i { color: #f00; }

.importTable td {
  border-bottom: 1px solid var(--import-table-border);
  border-left: 1px solid var(--import-table-border);
  padding: 5px;
}

.importTable th {
  border-bottom: 1px solid var(--import-table-border);
  border-left: 1px solid var(--import-table-border);
  background: var(--table-header-background);
  padding: 0;
}

.importTable thead th {
  padding: 5px;
}

#import div#legend {
  display: none;
  position: absolute;
  top: auto;
  left: auto;
  border: 1px solid #ccc;
  background: #fff;
  padding: 5px;
  margin-top: 5px;
  font-weight: normal;
  box-shadow: 0 0 10px #000;
  z-index: 2;
}

#import div#legend ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

#import div#legend ul li {
  display: flex;
  flex-direction: rows;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
}

#import div#legend ul li div {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #000;
}

#import div#legend ul li div.idle { background: var(--state-idle); }
#import div#legend ul li div.processing { background: var(--state-processing); }
#import div#legend ul li div.failed { background: var(--state-failed); }
#import div#legend ul li div.partialSuccess { background: var(--state-partial-success); }
#import div#legend ul li div.success { background: var(--state-success); }

#import .importTable th span#legendToggle:hover + div#legend {
  display: block !important;
}

.importTable th.checkbox input {
  width: 25px;
  height: 25px;
}

.importTable th select {
  background: #fff;
  border: 1px solid var(--column-controls-border);
}

.importTable th button.controls {
  margin-left: 5px;
  padding: 2px 5px;
  font-family: puavo-icons;
  background: #eee;
  border: 1px solid var(--column-controls-border);
  color: #000;
}

.importTable th button.controls:disabled {
  color: #000;
}

.importTable .colType {
  background: #fff;
  padding: 2px 5px;
  border: 1px solid var(--column-controls-border);
  font-weight: normal;
  font-size: 90%;
}

.activeMenu {
  background: var(--active-menu-back) !important;
  border-color: var(--popup-border) !important;
}

.importTable td.value {
  user-select: none;    /* The JavaScript-based multi-cell selection prevents normal text selection anyway */
  cursor: cell;
}

.importTable td.skipped {
  color: #888;
}

.importTable td.password {
  font-family: monospace;
  font-size: 120%;
}

.importTable td.error {
  border: 1px solid var(--error-cell-color);
}

.importTable td.divider { }

.importTable .selectedCell {
  background: var(--selected-back);
}

/* Indicate empty values with colored stripes. Pure CSS only, no background images! */
#import .importTable .empty {
  background-size: var(--import-stripe-size) var(--import-stripe-size);

  background-image: linear-gradient(135deg,
      var(--stripe-empty) 25%, var(--stripe-back)  25%,
      var(--stripe-back)  50%, var(--stripe-empty) 50%,
      var(--stripe-empty) 75%, var(--stripe-back)  75%,
      var(--stripe-back)  100%
  );
}

#import .importTable .empty.error {
  background-size: var(--import-stripe-size) var(--import-stripe-size);

  background-image: linear-gradient(135deg,
      var(--stripe-empty)      25%, var(--stripe-back-error) 25%,
      var(--stripe-back-error) 50%, var(--stripe-empty)      50%,
      var(--stripe-empty)      75%, var(--stripe-back-error) 75%,
      var(--stripe-back-error) 100%
  );
}

#import .importTable .empty.selectedCell {
  background-size: var(--import-stripe-size) var(--import-stripe-size);

  background-image: linear-gradient(135deg,
      var(--stripe-empty)  25%, var(--selected-back) 25%,
      var(--selected-back) 50%, var(--stripe-empty)  50%,
      var(--stripe-empty)  75%, var(--selected-back) 75%,
      var(--selected-back) 100%
  );
}

#import .importTable .empty.selectedCell.error {
  background-size: var(--import-stripe-size) var(--import-stripe-size);

  background-image: linear-gradient(135deg,
      var(--selected-back)     25%, var(--stripe-back-error) 25%,
      var(--stripe-back-error) 50%, var(--selected-back)     50%,
      var(--selected-back)     75%, var(--stripe-back-error) 75%,
      var(--stripe-back-error) 100%
  );
}

/*
div.popup {
  border: 2px solid var(--popup-border);
  background: var(--popup-background);
  padding: 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.75);
  font-size: 80%;
}
*/

div.popup header {
  font-size: 110%;
  font-weight: bold;
  padding: 5px;
  border-bottom: 1px solid var(--popup-border);
  text-align: center;
}

div.popup .buttons {
  display: flex;
  flex-direction: rows;
  justify-content: center;
  border-top: 1px solid var(--popup-border);
  padding-top: 5px;
  gap: 5px;
}

div.directButtons {
  display: flex;
  flex-direction: rows;
  justify-content: center;
  gap: 5px;
}

div.directButtons button {
  white-space: nowrap;
  width: 50%;
}

/* It just doesn't seem to work otherwise */
.cellEdit { font-family: "Arial"; }
.cellEditPassword { font-family: "monospace"; font-size: 90%; }

.columnMenu {
  padding: 0;
}

.columnMenu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.columnMenu li.separator {
  border-bottom: 1px solid var(--popup-border);
  padding-top: 5px;
  margin-bottom: 5px;
}

div.columnMenu .icon {
  /* The event handlers need the item ID and the icons don't have it */
  pointer-events: none;
}

.columnMenu a {
  padding: 5px;
  display: block;
  background: transparent;
  text-decoration: none;
  color: var(--popup-foreground);
  white-space: nowrap;
  cursor: default;        /* no href set, these aren't really links */
}

.columnMenu a:hover {
  color: var(--popup-foreground-hover);
  background: var(--popup-border);
}

.columnMenu a.danger {
  color: var(--danger);
}

#columnDialog {
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#columnDialog .buttons button {
  width: 125px;
}

#columnDialog select {
  width: 100%;
}

#columnDialog table.fixUsernamesPreview th,
#columnDialog table.fixUsernamesPreview td {
  padding: 2px 5px;
  border: 1px solid #000;
}

#columnDialog div#parseGroupsTable {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 250px;
  overflow: scroll;
}

#columnDialog div#parseGroupsTable table th,
#columnDialog div#parseGroupsTable table td {
  padding: 3px;
  border-bottom: 1px solid #ccc;
}

div.popup div#contents {
  margin-bottom: 10px;
}

div.popup div#contents input[type="text"]#value {
  width: 100%;
}

div.popup div.popupContainer {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 5px;
}

#import fieldset {
  border: 1px solid var(--generic-border);
}

p.methodExplanation {
  margin-top: 0;
  margin-left: 20px;
  margin-bottom: 5px;
}

#import #status {
  border: 1px solid var(--generic-border);
  padding: 5px;
  display: flex;
  flex-direction: rows;
  align-items: center;
  gap: 5px;
}

#import #status #rowCounts {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 40%;
}

#import #status progress {
  height: 20px;
  border: 1px solid #000;
  width: 100%;
}

#import #status #rowCounts span.success { background: var(--state-success); }
#import #status #rowCounts span.partial_success { background: var(--state-partial-success); }
#import #status #rowCounts span.failed { background: var(--state-failed); }

#import #status.error {
  border: 1px solid #f00;
  background: #f44;
  color: #fff;
}
