/*
   table.css: Default formatting and transition behaviors for Smart Tables
   SmartTable
   Daniel Bromberg, BaseZen Consulting
   Copyright 2019. All Rights Reserved.
*/

/** Common basic L&F **/
body {
    font-family: sans-serif;
    overflow-y: scroll; /* don't let things jump when scrollbar appears / disappears, changing width */
}

div.controls {
    margin: 5px 5px;
}

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

label {
    margin-right: 5px;
    margin-left:  5px;
}

/* Handle totally empty content */
tr {
    min-height: 1.3em;
}

td {
    border: 1px solid gray;
    transition: background-color 0.5s ease; /* pleasing fades in/out of editing mode */
}

td, th {
    white-space: nowrap;
    overflow: hidden;
    padding: 3px 5px;
    font-family: Arial, sans-serif;
    font-size: 13pt;
}

td > .datum {
    display: block; /* necessary to hide overflow when parent cell needs overflow visible */
    overflow: hidden;
}

/** Editing behaviors **/
input[type=checkbox] {
    left: 50%;
    transform: translate(-50%, 0%);
}

td > .editor, input[type=button], input[type=file], select {
    font-family: Arial, sans-serif;
    font-size: 13pt;
}

tr.deleting {
    color: darkgray;
    background-color: lightgray;
}

td > .editor {
    position: absolute;
    /* top/left/right determined at runtime */
}

td > input.editor, td > textarea.editor {
    background-color: rgba(255, 250, 205, 0.80);
    overflow: visible;
    padding: 1px 3px; /* input border is already 2 px, compensate */
}

td > select.editor {
    margin-top: 1px;
    margin-left: 1px;
    margin-right: 1px;
}

td > input:read-only {
    background-color: rgb(240, 240, 240);
}

div.delete-record:hover {
    color: #CC3355;
}

.delete-record {
    color: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* https://css-tricks.com/centering-css-complete-guide */
    user-select: none;
    font-size: 1.3em;
}

td.id {
    position: relative; /* for positioning delete overlay */
}

td.idle {
    background-color: #F0F0F0;
}

td.editing {
    background-color: #C0C0C0;
}

td.edit-complete {
    background-color: #A0A0A0;
}

td.invalid {
    background-color: rgb(222,184,135);
}

td.change-pending {
    background-color: #E6E6FA; /* lavender */
}

td.change-success {
    background-color: #EEFFCC;
}

td.change-failure {
    background-color: #FFC0CB; /* pink */
}

td.editing {
    overflow: visible;
}

td.idle, td.change-pending, td.change-success, td.change-failure {
    overflow: hidden;
}

@keyframes savefadeout {
    0% { background-color: #E6E6FA; }
    25% { background-color: #98FB98; }
    100% { background-color: #EEFFCC; }
}


/** Scrolling support **/
/* Perpendicular to the extent, we don't want scrolling. Make a record fit. */
/* 
  TODO: Implies all actual content in DOM; May ultimately need a virtual / custom scroller for very large
  datasets 
*/
div.scroller {
    overflow-y: scroll;
    overflow-x: hidden;
    height:     100%; /* by taking parent size, content forced to scroll */
}

/** Collapse support **/
div.collapse-label {
    position: absolute;
    top: -22px;
    left: 0;
    opacity: 0.8;
    font-size: 11pt;
    background-color: rgba(200, 200, 200, 0.7);
    color: rgba(0, 100, 150, 1.0);
    padding: 3px 5px;
    box-sizing: border-box;
}

div.collapser {
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    user-select: none;
    transition-delay: 0.1s;
    transition-property: transform;
    transition-duration: 0.4s;
    transition-timing-function: linear;
}

div.collapsible {
    border-right: 2px solid rgb(200, 200, 200);
    border-top: 4px solid rgb(230, 230, 230);
    margin-top: 25px;
    position: relative;
    transition-property: color,height;
    transition-duration: 0.4s;
    transition-timing-function: linear;
}

div.collapsed {
    height: 1em;
}

/* 
  UI is now generated programmatically.
  All ID-based need to be synced manually with init.js. 
  Keep this minimal. TODO: Move to database view model
*/
div#container_display_columns.expanded {
    height: 20vh;
}

div#container_display_main.expanded {
    height: 61vh;
}

table#display_columns td {
    background-color: rgba(224, 240, 230, 1.0);
}