/* ui.css */

/* No padding or margins by default */

/* Indivisible elments */

.ui-button {}
.ui-link {}

/* Page layout */

.ui-layout {}
.ui-layout > div {}

/* Common interface components */

.ui-alert {}

/* Headered block. */

.ui-block {}
.ui-block :first-child {}   /* Header */
.ui-block :last-child {}    /* Content */

/*
 * Normal content
 */

.ui-content h2 { font-weight:bold; font-size:125%; margin:0 0 1em 0; }
.ui-content p { margin:0 0 1em 0; }

/*
 * Splitters
 */

.ui-split-1 { display:grid; grid-template-columns: repeat(1,1fr); }
.ui-split-2 { display:grid; grid-template-columns: repeat(2,1fr); }
.ui-split-3 { display:grid; grid-template-columns: repeat(3,1fr); }
.ui-split-4 { display:grid; grid-template-columns: repeat(4,1fr); }
.ui-split-5 { display:grid; grid-template-columns: repeat(5,1fr); }
.ui-split-6 { display:grid; grid-template-columns: repeat(6,1fr); }
.ui-split-7 { display:grid; grid-template-columns: repeat(7,1fr); }

/*
 * ui-mobile   <---   Only split on mobile
 * ui-desktop  <---   Only split on desktop
 */

.ui-split-1.ui-mobile,
.ui-split-2.ui-mobile,
.ui-split-3.ui-mobile,
.ui-split-4.ui-mobile,
.ui-split-5.ui-mobile,
.ui-split-6.ui-mobile,
.ui-split-7.ui-mobile { display:block; }
@media screen and (max-width:800px) {
    .ui-split-1.ui-mobile,
    .ui-split-2.ui-mobile,
    .ui-split-3.ui-mobile,
    .ui-split-4.ui-mobile,
    .ui-split-5.ui-mobile,
    .ui-split-6.ui-mobile,
    .ui-split-7.ui-mobile { display:grid; }
}
@media screen and (max-width:800px) {
    .ui-split-1.ui-desktop,
    .ui-split-2.ui-desktop,
    .ui-split-3.ui-desktop,
    .ui-split-4.ui-desktop,
    .ui-split-5.ui-desktop,
    .ui-split-6.ui-desktop,
    .ui-split-7.ui-desktop { display: block; }
}

.ui-place-1 { grid-column-start:1; grid-column-end:2; grid-row-start:1; }
.ui-place-2 { grid-column-start:2; grid-column-end:3; grid-row-start:1; }
.ui-place-3 { grid-column-start:3; grid-column-end:4; grid-row-start:1; }
.ui-place-4 { grid-column-start:4; grid-column-end:5; grid-row-start:1; }
.ui-place-5 { grid-column-start:5; grid-column-end:6; grid-row-start:1; }
.ui-place-6 { grid-column-start:6; grid-column-end:7; grid-row-start:1; }
.ui-place-7 { grid-column-start:7; grid-column-end:8; grid-row-start:1; }

.ui-expand { grid-column: span 2; }

.ui-split-2.ui-thumb { grid-template-columns: 5em 1fr; }
.ui-split-2.ui-thumb-right { grid-template-columns: 1fr 5em; }

.ui-split-2.ui-weak-left { grid-template-columns: 1fr 2fr; }
.ui-split-2.ui-weak-right { grid-template-columns: 2fr 1fr; }

.ui-pad { padding:0.5em; }
.ui-pad-half { padding:0.25em; }
.ui-pad-double { padding:1em; }

.ui-splitv-1 { display:grid; grid-template-rows: repeat(1,1fr); }
.ui-splitv-2 { display:grid; grid-template-rows: repeat(2,1fr); }
.ui-splitv-3 { display:grid; grid-template-rows: repeat(3,1fr); }
.ui-splitv-4 { display:grid; grid-template-rows: repeat(4,1fr); }
.ui-splitv-5 { display:grid; grid-template-rows: repeat(5,1fr); }
.ui-splitv-6 { display:grid; grid-template-rows: repeat(6,1fr); }

/*
 * Spacing
 */

/* Horizontal / in-element spacing
 *
 * |  One  ||  Two  ||  Three  |
 *
 * .ui-breathe
 *     |  One  | |  Two  | |  Three  |
 *
 */

.ui-breathe { column-gap:var(--padding); row-gap:var(--padding); }

/* Vertical stacked element spacing */

.ui-space { margin-top:1em; margin-bottom:1em; }
.ui-space-above { margin-top:1em; }
.ui-space-below { margin-bottom:1em; }
.ui-space-big { margin-top:2em; margin-bottom:2em; }
.ui-space-big-above { margin-top:2em; }
.ui-space-big-below { margin-bottom:2em; }

/*
 * Split modifiers
 *
 * .ui-null
 *     |   One   |   Two   |   Three   |
 *
 * .ui-spread
 *     |One      |   Two   |      Three|
 *
 * .ui-shrink (NOT YET IMPLEMENTED)
 *     |      One|   Two   |Three      |
 */

.ui-spread > div { text-align:center; }
.ui-spread > :first-child { text-align:left; justify-self:start; }
.ui-spread > :last-child { text-align:right;  justify-self:end; }
@media screen and (max-width:800px) {
    .ui-spread > div,
    .ui-spread > :first-child,
    .ui-spread > :last-child { justify-self:stretch; }
}

/*
 * Highlighted link
 */
.ui-highlight {
    background:rgba(0,0,0,0.1); 
    padding:5px 8px; 
    border-radius:2px; 
    display:inline-block; 
    margin-bottom:1px; 
    text-decoration:none;
}


.ui-weak { opacity:0.65; }

/*
 * Left/right flow alignment
 */

.ui-left { text-align:left; }
.ui-center { text-align:center; }
.ui-right { text-align:right; }
.ui-left-desktop { text-align:left; }
.ui-center-desktop { text-align:center; }
.ui-right-desktop { text-align:right; }
.ui-left-mobile {}
.ui-center-mobile {}
.ui-right-mobile {}
.ui-fill-mobile {}
@media screen and (max-width:800px) {
    .ui-left-desktop { text-align:inherit; }
    .ui-center-desktop { text-align:inherit; }
    .ui-right-desktop { text-align:inherit; }
    .ui-left-mobile { text-align:left; }
    .ui-center-mobile { text-align:center; }
    .ui-right-mobile { text-align:right; }
    .ui-fill-mobile { width:100%; }
}

/*
 * Cells
 */

.ui-cell { background:white; border-radius:0.25em; box-shadow: 0em 0em 0.25em rgba(0,0,0,0.125); }
.ui-cell.ui-on { border:3px solid #44FF44; background:#CCFFCC; }
.ui-cell.ui-fixed { overflow:hidden; }

/*
 * Calendar fragments
 */

.ui-cal-md { text-align:center; }
.ui-cal-md .ui-month { display:block; color:#888; text-transform:uppercase; font-weight:bold; }
.ui-cal-md .ui-day { display:block; font-size:200%; }

/* Alert boxes
 *
 * .ui-alert
 * .ui-empty
 *
 * Note that ui-empty is a standard alert box with implict styling. Maybe should be .ui-alert.ui-empty
 */

.ui-empty,
.ui-alert { padding:0.75em 1em; background:#EEE; border:1px solid #DDD; border-radius:0.25em; }
.ui-empty { color:#888; font-style:italic; }

.ui-alert.ui-warning { background:#FFD580; border:2px solid orange; }
.ui-alert.ui-danger { background:#FDD; border:2px solid #FF0000; }
.ui-alert.ui-success { background:#DFD; border:2px solid #00FF00; }
.ui-alert.ui-demote { opacity:0.5; font-style:italic; }

.ui-alert.ui-promote { box-shadow:0 0.25em 0.5em rgba(0,0,0,0.125); background:#e0eedf; border:2px solid #97f973; }
.ui-alert.ui-promote a { color:green; }

/*
 * Forms
 */

.ui-form {}
.ui-form .ui-field { display:grid; grid-template-columns:8em 1fr; margin-bottom:0.5em; }
.ui-form .ui-field .ui-label { text-align:right; padding-right:0.5em; }
.ui-form .ui-field .ui-control {}
.ui-form .ui-field .ui-control textarea { height:4em; width:100%; margin:0; box-sizing:border-box; border:1px solid #ddd; }
.ui-form .ui-buttons { padding-left:8em; }

@media screen and (max-width:800px) {
    .ui-form .ui-field {  }
    .ui-form .ui-field .ui-label { display:none; }
    .ui-form .ui-field .ui-control { grid-column: span 2; }
    .ui-form .ui-field .ui-control textarea {  }
    .ui-form .ui-buttons { padding-left:0; }

    .ui-form .ui-control input { padding:1em; width:100%; box-sizing:border-box; border-style:solid; border-radius:0.25em; border-width:1px; border-color:#CCC; }
    .ui-form .ui-buttons input { }
}

/*
 * Buttons
 */

/* Individual button */

a.ui-button,
span.ui-button,
input[type=submit].ui-button,
input[type=button].ui-button {
    display:inline-block;
    padding:1em;
    background:#eee; 
    background: linear-gradient(180deg, rgba(238,238,238,1) 0%, rgba(230,230,230,1) 100%);
    border-radius:0.25em; 
    text-decoration:none; 
    border:1px solid #CCC;
    color:#111;
    font-size:110%;
    margin-right:0; /* Override JQuertUI */
}

a.ui-button:hover,
span.ui-button:hover,
input[type=submit].ui-button:hover,
input[type=button].ui-button:hover {
    background:#ddd; 
    background: linear-gradient(180deg, rgba(230,230,230,1) 0%, rgba(220,220,220,1) 100%);
    border:1px solid #BBB;
    color:#000;
}

/* Button styles */

.ui-button.ui-small { 
    padding:0.35em 0.5em 0.25em 0.5em;
    font-size:90%; 
}

/* Button states */

.ui-button.ui-on { border-width:1px; border-color:#888; background:#ccc; background: linear-gradient(180deg, rgba(230,230,230,1) 0%, rgba(220,220,220,1) 100%); }
.ui-button.ui-danger { border:2px solid #FF0000; color:white; background:#FF6666; background: linear-gradient(180deg, #FF6666 0%, #FF5555 100%); }

/*
 * Groups of buttons
 *
 * Default
 *
 * [ButtonA][ButtonB][ButtonC]
 *
 * .ui-button-group
 *     [ButtonA|ButtonB|ButtonC]
 *
 */

.ui-button-group .ui-button { border-radius:0; }
.ui-button-group .ui-button:first-child { border-top-left-radius:0.25em; border-bottom-left-radius:0.25em; }
.ui-button-group .ui-button:last-child { border-top-right-radius:0.25em; border-bottom-right-radius:0.25em; }

/*
 * Badges : Small inline chunks of highlighted text
 */

.ui-badge { background:silver; color:black; display:inline-block; padding:1px 5px; border-radius:0.25em; position:relative; top:-1px; }
.ui-badge.ui-danger { background:red; color:white; }
.ui-badge.ui-warning { background:orange; color:white; }
.ui-badge.ui-success { background:green; color:white; }

/*
 * Hints
 */

.ui-hint { font-size:11px; color:#888; }

/*
 * Mobile / desktop targeting
 */

.ui-mobile-only { display:none; }
.ui-desktop-only { display:block; }
@media screen and (max-width:600px) {  /* TODO : Use common cuttoff */
    .ui-mobile-only { display:block; }
    .ui-desktop-only { display:none; }
}

/* Explicit structural instructions HNMMMM - GET RID OF IN FAVOUR OF SPLIT ABOVE */

.ux-grid { display: grid;  }
.ux-grid._2 { grid-template-columns: repeat(2,1fr); }
.ux-grid._3 { grid-template-columns: repeat(3,1fr); }
.ux-grid._4 { grid-template-columns: repeat(4,1fr); }
.ux-span-2 { grid-column: span 2; }
.ux-span-3 { grid-column: span 3; }

/* Bordered */

.ui-bordered { border:1px solid #aaa; border-radius:var(--padding-half); padding:var(--padding); }

.ui-hover:hover { background:#eee; }

/*
 * Table styling
 */

.ui-table { width:100%; text-align:left; border-collapse:collapse; }
.ui-table td,
.ui-table th { text-align:inherit; padding:0.25em 0.5em; }
.ui-table thead th { background:#333; color:white; }
.ui-table tbody td { background:#FFFFFF; }
.ui-table tbody tr:nth-child(even) td { background:#EEEEEE; }

/* Standard theme */

.ux-button { background:#E6E6E6; border:1px solid #999999; color:#222; border-radius:2px; padding:0 0.5em; display:inline-block; text-decoration:none; }
.ux-button:hover { background:#E0E0E0; border:1px solid #888888; color:#111; text-decoration:none; }

.ux-label { font-weight:bold; }

/* Clean */

.ux-clean {}
.ux-clean dl,
.ux-clean dt,
.ux-clean dd { margin:0; padding:0; }

/* Text formatting. */

.ui-format p { margin-bottom:0.75em; }

/* Basic theme (comes after clean) - TODO : move into own file */

:root {
    --padding: 1em;
    --padding-half: calc(var(--padding)/2);
}

.ut-base dt { font-weight:bold; margin-top:var(--padding-half); }
.ut-base dt:first-child { margin-top:0; }
.ut-base dd { padding-left:var(--padding-half); }

.ut-base .ui-alert { padding:var(--padding); margin:var(--padding) 0; background:#EEE; border:1px solid #DDD; border-radius:0.25em; }

.ui-distinct { margin-top:var(--padding); margin-bottom:var(--padding); }