/* PHP Timeclock - responsive layer.
 *
 * Loaded AFTER css/default.css, so it overrides rather than replaces it.
 * Delete the <link> in header.php to revert everything here.
 *
 * The markup is still nested tables, so this works by turning the layout
 * tables into blocks below the breakpoint and letting the data table
 * scroll sideways on its own.
 */

:root {
    --tc-bg:        #f6f7f9;
    --tc-surface:   #ffffff;
    --tc-border:    #dcdfe4;
    --tc-text:      #1e2227;
    --tc-muted:     #5b6572;
    --tc-accent:    #27408b;
    --tc-accent-dk: #1b2d63;
    --tc-stripe:    #f2f4f7;
    --tc-radius:    8px;
    --tc-gap:       16px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background: var(--tc-bg);
    color: var(--tc-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
}

/* ------------------------------------------------ kill the legacy heights --
 * height="89%" and height="90%" were how the old layout stretched to fill
 * the window. Browsers handle them badly and they are what produces the
 * large empty area under the footer.
 */

table[height="89%"],
table[height="100%"] { height: auto !important; }
td[height="90%"]     { height: auto !important; display: none; }
html, body           { height: auto; min-height: 0; }

/* --------------------------------------------------------------- top bar --*/

table.header {
    width: 100%;
    background: var(--tc-surface);
    border-bottom: 1px solid var(--tc-border);
    border-collapse: collapse;
}

table.header td { padding: 10px 16px; vertical-align: middle; }

.site_logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 240px;
    max-height: 56px;
    border: 0;
}

table.topmain_row_color {
    width: 100%;
    background: var(--tc-accent);
    border-collapse: collapse;
}

table.topmain_row_color td { padding: 10px 8px; vertical-align: middle; }
table.topmain_row_color a  { color: #ffffff !important; text-decoration: none; }
table.topmain_row_color a:hover,
table.topmain_row_color a:focus-visible { text-decoration: underline; }
table.topmain_row_color img { vertical-align: middle; }

/* ------------------------------------------------------- the two columns --*/

td.left_main {
    background: var(--tc-surface);
    border-right: 1px solid var(--tc-border);
    padding: var(--tc-gap);
    vertical-align: top;
}

td.right_main {
    background: var(--tc-bg);
    padding: var(--tc-gap);
    vertical-align: top;
}

/* ----------------------------------------------------------- the sidebar --*/

td.left_rows, td.current_left_rows {
    padding: 6px 4px;
    border-bottom: 1px solid var(--tc-border);
}

td.current_left_rows { background: var(--tc-stripe); font-weight: 600; }

td.left_rows_headings {
    padding: 14px 4px 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tc-muted);
}

a.admin_headings { color: var(--tc-accent); text-decoration: none; }
a.admin_headings:hover, a.admin_headings:focus-visible { text-decoration: underline; }

/* -------------------------------------------------------- form controls --*/

input[type="text"],
input[type="password"],
select {
    width: 100%;
    max-width: 320px;
    padding: 9px 10px;
    border: 1px solid var(--tc-border);
    border-radius: 6px;
    background: var(--tc-surface);
    color: var(--tc-text);
    /* 16px stops iOS zooming the page when a field is focused. */
    font-size: 16px;
    font-family: inherit;
}

input[type="text"]:focus,
input[type="password"]:focus,
select:focus {
    outline: 2px solid var(--tc-accent);
    outline-offset: 1px;
    border-color: var(--tc-accent);
}

input[type="submit"], input[type="image"] {
    min-height: 44px;
    padding: 10px 18px;
    border: 0;
    border-radius: 6px;
    background: var(--tc-accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

input[type="submit"]:hover { background: var(--tc-accent-dk); }
input[type="image"] { background: none; padding: 0; min-height: 0; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }
label { cursor: pointer; }

/* ------------------------------------------------------- the data table --*/

table.misc_items {
    width: 100%;
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius);
    border-collapse: collapse;
    overflow: hidden;
}

table.misc_items td, table.misc_items th { padding: 9px 10px; }

tr.display_row { border-top: 1px solid var(--tc-border); }
tr.display_row:hover td { background: var(--tc-stripe) !important; }

table.table_border { width: 100%; border-collapse: collapse; }
th.table_heading, th.table_heading_no_color {
    padding: 10px;
    text-align: left;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tc-muted);
    border-bottom: 1px solid var(--tc-border);
}
td.table_rows { padding: 9px 10px; border-bottom: 1px solid var(--tc-border); }

/* ------------------------------------------------------------ breakpoint --*/

@media (max-width: 860px) {

    /* Turn the layout table into a stack. The sidebar goes above the table. */
    table[height="89%"],
    table[height="89%"] > tbody,
    table[height="89%"] > tbody > tr {
        display: block;
        width: 100%;
    }

    td.left_main, td.right_main {
        display: block;
        width: 100% !important;
        border-right: 0;
    }

    td.left_main {
        border-bottom: 1px solid var(--tc-border);
    }

    /* The status table keeps its columns and scrolls sideways instead of
       squashing every cell into two characters. */
    table.misc_items, table.table_border {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    table.header, table.header > tbody, table.header > tbody > tr { display: block; }
    table.header td { display: block; width: 100% !important; text-align: left; }

    table.topmain_row_color,
    table.topmain_row_color > tbody,
    table.topmain_row_color > tbody > tr { display: block; }
    table.topmain_row_color td {
        display: inline-block;
        width: auto !important;
        padding: 8px 6px;
    }

    .site_logo { max-width: 160px; max-height: 44px; }

    input[type="text"], input[type="password"], select { max-width: 100%; }
}

@media (max-width: 480px) {
    body { font-size: 14px; }
    td.left_main, td.right_main { padding: 12px; }
}

/* ---------------------------------------------------------------- print --*/

@media print {
    table.topmain_row_color, td.left_main, .notprint { display: none !important; }
    body { background: #fff; font-size: 11px; }
    td.right_main { padding: 0; }
    table.misc_items { border: 0; border-radius: 0; }
}