/*
 * Support page.
 *
 * Nothing here is a style of its own: colours, radii, spacing, buttons and form elements come
 * from the stylesheets of the website, and each rule names the one it follows. Buttons are the
 * website's .btn / .btn1 / .btnselected, tables its .customTable, form fields Bootstrap's
 * .form-control — all used as they are, without a rule in this file.
 */

/* The top bar — the markup is that of the website's navbar (logo, .customnav, .nav-link), so
   its look comes from style.css. The margin is the one navbar.php sets inline; the page the
   user is on carries the red the website uses for a hovered link. */
.support-header {
    margin-top: 20px;
}

.support-nav-current {
    color: red;
}

/* Who is signed in, at the end of the top bar — avatar, name and dropdown as in the website's
   user menu; the values are the inline styles of includes/login_steam.php */
.support-nav-user {
    display: inline-block;
}

.support-nav-menu {
    margin-left: 16px;
}

.support-nav-avatar {
    width: 30px;
    margin-right: 10px;
}

/* The content box — #rulesBox in style.css */
.support-box {
    margin-top: 2rem;
    background: var(--backgroundcolor);
    border-radius: 20px;
    color: white;
    padding: 30px;
    margin-bottom: 20px;
}

/* Headlines — the bold h2 of the website's text pages, .info-box h5 in style.css */
.support-title {
    font-weight: bold;
    margin-bottom: 1rem;
}

.support-subtitle {
    font-weight: 700;
}

/* The two choices on the start page — .info-box and .steamdataborder in style.css,
   the red hover border of .whotoordersingle in oneorder.css */
.support-choice {
    display: block;
    height: calc(100% - 20px);
    margin: 10px 0;
    padding: 20px;
    text-align: center;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid white;
    border-radius: 20px;
    transition: border-color 1s ease;
}

.support-choice:hover {
    color: white;
    border-color: red;
}

.support-choice h5 {
    font-weight: 700;
}

/* Notices — box of `details` in style-growth.css; the error colours are those of
   .input_validation_msg in oneorder.css, the success colour is `lightgreen` from style-growth.css */
.support-notice {
    margin-bottom: 1rem;
    padding: 10px 20px;
    color: #d1d1d1;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #ccc;
    border-radius: 10px;
}

.support-notice--success {
    color: lightgreen;
    border-color: lightgreen;
}

.support-notice--error {
    color: #ff4444;
    font-weight: bold;
    background-color: #ffCCCC;
    border-color: #ff4444;
}

/* Tables — .customTable does the rows. The website centres every td; the headings follow,
   and text columns read left */
.support-table td,
.support-table th {
    vertical-align: middle;
}

.support-table th {
    text-align: center;
}

.support-table .support-cell-left {
    text-align: left;
}

.support-table .support-cell-actions {
    white-space: nowrap;
}

.support-cell-actions form {
    display: inline;
}

/* The line under a ticket title — size and colour of #steamID / td in style.css */
.support-meta {
    font-size: 0.8rem;
    color: #d1d1d1;
}

.support-meta > span {
    display: inline-block;
    margin-left: 10px;
}

/* Small labels — #tableUpdateTime in style.css. The colours are the website's:
   lightgreen (style-growth.css), grey (.quick_deactive), #ff7003 (.failing in oneorder.css),
   #df0101 (.playerADMIN) */
.support-tag {
    display: inline-block;
    padding: 0 8px;
    font-size: 0.8rem;
    font-weight: bold;
    color: white;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid white;
    border-radius: 5px;
}

.support-tag--open {
    color: lightgreen;
    border-color: lightgreen;
}

.support-tag--closed {
    color: grey;
    border-color: grey;
}

.support-tag--waiting {
    color: #ff7003;
    border-color: #ff7003;
}

/* The VIP level of a user — filled with the colour of the rank, as the rank tags of the server
   cards are (--wsc-rank-vip, --wsc-rank-pro, --wsc-rank-legend and the text colours beside them
   in servercards_theme_default.css). That stylesheet is not loaded here, so the values are. */
.support-tag--vip {
    color: #ffffff;
    background: #6b3fa0;
    border-color: #6b3fa0;
}

.support-tag--pro {
    color: #ffffff;
    background: #d92b2b;
    border-color: #d92b2b;
}

.support-tag--legend {
    color: #0c0c0e;
    background: #e8c020;
    border-color: #e8c020;
}

.support-tag--staff {
    color: #df0101;
    border-color: #df0101;
}

/* One message of a ticket — box of `details` in style-growth.css, row colour of .customTable;
   an answer of the support carries the red border of .btn1 */
.support-message {
    margin-bottom: 10px;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #ccc;
    border-radius: 10px;
}

.support-message--staff {
    border-color: red;
}

.support-message-head {
    margin-bottom: 5px;
    font-size: 0.8rem;
    color: #d1d1d1;
}

.support-message-author {
    font-size: 1rem;
    font-weight: bold;
    color: white;
}

.support-message-time {
    float: right;
}

.support-message-body {
    overflow-wrap: anywhere;
}

/* "Save as canned text" on an answer already sent — a quiet text button in the colours of the
   website's links in running text (.link-intextlink in style.css, red on hover like every link) */
.support-message-actions {
    margin-top: 5px;
    text-align: right;
}

.support-message-action {
    padding: 0;
    font-size: 0.8rem;
    color: #bceff5;
    background: none;
    border: none;
}

.support-message-action:hover,
.support-message-action:focus {
    color: red;
}

/* Forms */
.support-form {
    margin-top: 1rem;
}

.support-form label {
    font-weight: bold;
}

.support-back {
    margin-top: 1rem;
}

.support-hint {
    color: #d1d1d1;
    font-style: italic;
}

/* The side bar with the canned texts, next to the answer of a ticket — a box like a message
   (`details` in style-growth.css), which stays in view while the conversation scrolls. The
   list scrolls on its own, like .dropsettings in stylenew.css. */
.support-canned {
    position: sticky;
    top: 20px;
    margin-bottom: 10px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #ccc;
    border-radius: 10px;
}

.support-canned-list {
    position: relative;
    max-height: 60vh;
    margin-top: 10px;
    overflow-y: auto;
}

/* Category headings — the small uppercase line of #includes in style.css */
.support-canned-category {
    margin: 15px 0 5px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #d1d1d1;
}

.support-canned-group:first-child .support-canned-category {
    margin-top: 5px;
}

/* One canned text — row colour of .customTable, the red hover border of .whotoordersingle */
.support-canned-item {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    padding: 5px 10px;
    text-align: left;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #ccc;
    border-radius: 5px;
}

.support-canned-item:hover,
.support-canned-item:focus {
    border-color: red;
}

/* "by Anna · edited by Ben" in the table of the canned texts — small and quiet like
   .support-canned-preview; a click opens the history. style-growth.css frames every
   <details> as a box with a +/– button beside it; here it stays a line, with the same +/– small
   and right after the text. */
.support-canned-history {
    margin: 0;
    padding: 0;
    font-size: 0.75rem;
    color: #d1d1d1;
    border: none;
    border-radius: 0;
}

.support-canned-history[open],
.support-canned-history[open]:hover {
    background: none;
}

.support-canned-history summary,
.support-canned-history[open] summary {
    display: inline;
    font-weight: normal;
    background: none;
    border-radius: 0;
}

.support-canned-history summary:hover,
.support-canned-history summary:focus {
    color: red;
    background: none;
}

.support-canned-history summary::after {
    content: "+";
    position: static;
    margin-left: 5px;
    padding: 0 3px;
    font-size: inherit;
    color: inherit;
    background: none;
    border: 1px solid currentColor;
    border-radius: 3px;
    transform: none;
}

.support-canned-history[open] summary::after {
    content: "–";
}

.support-canned-history ol {
    margin: 3px 0 0;
    padding-left: 0;
    list-style: none;
}

.support-canned-history-time {
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

/* The table of the canned texts. It has no heading row. Its columns (<col>) keep their width
   when a category is folded up or the search hides rows, and its categories are parted by their
   headings alone: Bootstrap draws a line between two <tbody>. */
.support-table--canned {
    table-layout: fixed;
}

.support-table--canned .support-col-title {
    width: 20%;
}

.support-table--canned .support-col-author {
    width: 22%;
}

.support-table--canned .support-col-actions {
    width: 170px;
}

.support-table--canned tbody + tbody {
    border-top: none;
}

/* The heading of a category in the table of the canned texts — the small uppercase line of
   the side bar (.support-canned-category), as a button that folds the category up or down.
   The hook before it points down while the category is open and to the right while folded. */
.support-canned-head th {
    padding-top: 15px;
    padding-bottom: 5px;
}

.support-canned-toggle {
    padding: 0;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #d1d1d1;
    background: none;
    border: none;
}

.support-canned-toggle:hover,
.support-canned-toggle:focus {
    color: red;
}

.support-canned-chevron {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 10px 3px 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.support-canned-toggle[aria-expanded="false"] .support-canned-chevron {
    margin-bottom: 1px;
    transform: rotate(-45deg);
}

.support-canned-count {
    margin-left: 5px;
    font-weight: normal;
    opacity: 0.8;
}

/* Search and category above the table of the canned texts */
.support-filter {
    margin-bottom: 10px;
}

.support-filter .col-md-8,
.support-filter .col-md-4 {
    margin-bottom: 5px;
}

/* The name of a new category, under the dropdown */
.support-category-new {
    margin-top: 5px;
}

.support-canned-title {
    display: block;
    font-weight: bold;
}

.support-canned-preview {
    display: block;
    overflow: hidden;
    font-size: 0.8rem;
    color: #d1d1d1;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The answer form while it saves a text as a canned text (support.js): category and title above
   the field, "Save" instead of "Send answer". Same box as the side bar, framed red so that it
   does not pass for an answer being written. */
.support-form--saving {
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid red;
    border-radius: 10px;
}

.support-save {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.support-save-status {
    margin-left: 10px;
}

/* A text that was just saved flies into the side bar (support.js). The copy in flight looks
   like an answer of the support; on arrival the new entry lights up in the red glow the website
   uses on hover (box-shadow of .career-video:hover in style-growth.css). */
.support-canned-ghost {
    position: fixed;
    z-index: 1500;
    padding: 10px 20px;
    overflow: hidden;
    color: white;
    white-space: pre-wrap;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid red;
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(220, 53, 69, 0.7);
    transform-origin: top left;
}

.support-canned-item--new {
    animation: support-canned-arrive 2s ease-out;
}

@keyframes support-canned-arrive {
    from {
        border-color: red;
        box-shadow: 0 0 25px rgba(220, 53, 69, 0.7);
    }

    to {
        border-color: #ccc;
        box-shadow: none;
    }
}