@import './constants.css';

* {
    border-radius: 0.25em;
    vertical-align: middle;
}

a, a:visited {
    color: var(--link);
    text-decoration:none;
    cursor: pointer;
}

html { height: 100%; }
body {
    font-family: sans-serif;
    font-size: 1em;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: grid;
    grid-template-rows: [header-start] auto [header-end] 1fr [bottom];
}

.divider {
    background-color: var(--border);
    height: 1px;
    width: 100%;
    margin: 8px 0 8px 0;
    overflow: hidden;
}

progress {
    width: 100%;
}


/* --TEXT-- */
h1 { margin:0.25em 0; padding:0 }
h2 { margin:0.25em 0; padding:0; }
h3 { margin:0.25em 0; padding:0; }
h4 { margin:0.25em 0; padding:0; }
h5 { margin:0.25em 0; padding:0; }
small { color:grey; }

p {
    margin: 0.25em 0;
}

.ProseMirror {
    min-height: 7em;
    padding: 0.5em;
}

/* ---UTILITY--- */
.center {
    display: flex;
    justify-content: center;
}

/* ---HEADER--- */
header {
    height: 100%;
    padding-inline: 1em;
    position: relative;
    top: 0;
    grid-row-end: header-end;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}

.nav-link {
    display: block;
    padding: 0.25rem 0.5rem;
    border: 0;
    color: var(--nav_link) !important;
}
.nav-link:hover {
    background-color: var(--secondary);
    color: var(--secondary_text) !important;
}

#create-ticket-container {
    margin-left: 0.5rem;
    border-left: 3px solid var(--border);
    border-radius: 0;
}

#create-ticket-button {
    padding: 0.25rem 0.5rem;
    margin: 0 0.25rem;
}


/* ---SIDENAV--- */
.sidenav-container {
    width: 260px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 3px solid var(--border);
    flex-shrink: 0;
    overflow: hidden auto;
}

.sidenav {
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: auto;
    padding: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    list-style: none;
}

.sidenav-submenu { padding: 0.5rem 0; }

.sidenav-item {
    width: 100%;
    height: 100%;
    display: list-item;
    padding: 0.25rem;
    list-style: none;
}
.sidenav-item:hover {
    background-color: var(--secondary);
    color: var(--secondary_text) !important;
    cursor: pointer;
}

/* ---CONTENT WRAPPER--- */
#content {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-inline: 1rem;
}

.wrapper {
    overflow-y: auto;
    justify-self: center;
    width: 100%;
    height: 100%;
}

main {
    width: 100%;
    height: 100%;
    display: grid;
    overflow-x: visible;
    z-index: 888;
    grid-template-columns: [start] auto [ticket-info] auto [end];
    justify-content: center;
}


/* ---SCROLLBAR--- */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background: white; }
::-webkit-scrollbar-thumb { background: gainsboro; }
::-webkit-scrollbar-thumb:hover { background: lightgray}


/* ---MODALS--- */
.modal {
    background-color:rgba(0,0,0,0.4);
    display:none;
    align-items: center;
    justify-content: center;
    left:0;
    right:0;
    top:0;
    bottom:0;
    position:fixed;
    z-index:900;
}
  
.modal-content {
    min-width: 20%;
    width: auto;
    height: auto;
    margin: auto;
    padding: 50px;
    overflow-y: scroll;
    background-color: white;
    border: 1px solid var(--border);
}

.modal-content-small {
    width: 20%;
    max-height: 30%;
    margin: auto;
    padding: 50px;
    overflow-y: scroll;
    background-color: white;
    border: 1px solid var(--border);
}


/* ---BUTTONS, ICONS--- */
#logo {
    max-width: 100%;
    max-height: 75px;
}

button {
    background-color: var(--primary);
    border: none;
    color: var(--primary_text);
    font-weight: 550;
    font-size: 1.05em;
    text-align: center;
    cursor: pointer;
}

input[type="file"] { 
    width: auto;
    height: auto;
}

#btnUploadAttachment {
    cursor: pointer;
    width: 1em;
    height: 1em;
}

.iconBlocked, .iconBlocked:hover {
    width: 1.5em;
    height: 1.5em;
    margin: auto;
    display: block;
    cursor: default;
}

.btn {
    min-width: max-content;
    max-width: 100%;
    padding: 0.25em 0.5rem;
    float: right;
}

.btn:hover {
    background-color: var(--secondary);
    color: var(--secondary_text);
}


.btnTable {
    margin:0;
    text-align:center;
    width:1.5em;
    height:1.5em;
}

.btnCloseModal, .btnCloseModal:hover {
    width: 1.5em;
    height: 1.5em;
    float: right;
    padding: 0;
    position: relative;
    top: -2em;
    right: -2em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='var(--border)' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'%3E%3C/path%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    z-index: 2;
    color: gray;
}

.btnDeleteAttachment, .btnDeleteAttachment:hover {
    width: 1.25em;
    height: 1.25em;
    align-self: end;
    position: relative;
    right: 0.25em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='var(--border)' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'%3E%3C/path%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    color: gray;
}

.btnSubmit {
    background-color: var(--primary);
    background-image: none;
    color: var(--primary_text);
    font-size: 1.05em;
    text-align: center; 
}

/* --Button icons-- */
.btnIcon, .btnIcon:hover {
    width: 1.5em;
    height: 1.5em;
    margin: auto;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
}

.btnDelete, .btnDelete:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-trash' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z'/%3E%3Cpath d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z'/%3E%3C/svg%3E");
}

.btnEditModal, .btnEditModal:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' font-weight='bold' fill='black' class='bi bi-pencil' viewBox='0 0 16 16'%3E%3Cpath d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z'%3E%3C/path%3E%3C/svg%3E");
}


/* ---TABLES--- */
table {
    border-spacing: 0;
    display: table;
    margin: 0.25em 0;
    width: 100%;
}

tr:first-child th:first-child { border-top-left-radius: 0.25em; }
tr:first-child th:last-child { border-top-right-radius: 0.25em; }

tr:last-child td:first-child { border-bottom-left-radius: 0.25em; }
tr:last-child td:last-child { border-bottom-right-radius: 0.25em; }

th {
    background-color: var(--primary);
    color: var(--primary_text);
    text-align: left;
}

th, td {
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 5px;
}

td input {
    display:block;
    margin:8px;
}

tr:nth-child(even) { background-color:var(--alternate_bg_color); }


/* ---PAGINATION--- */
#pagination-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.pagination-item {
    margin: 8px;
    text-align: center;
    width: 20px;
    height: 20px;
    outline: solid 2px var(--nav_bg_colour);
}

#current-page { outline:none; text-decoration:underline; }


/* ---INPUT FIELDS--- */
input {
    appearance: none;
    width: 1.25em;
    height: 1.25em;
    padding: 0.25em;
    display: inline-block;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid var(--border);
    font-size: 1.05em;
}
input:checked { background-color:var(--primary); }

input[type="checkbox"] {
    margin:0;
    border: 1px solid var(--border) !important;
}
input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

input[type="radio"] { border-radius: 50%; }
input[type="radio"] {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==);
}

textarea, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="search"] {
    width: 100%;
    height: auto;
    margin: 4px 0;
    border: 1px solid var(--border);
    box-sizing: border-box;
    cursor: text;
    resize: vertical;
}
input:read-only {
    border: none;
    font-weight: normal;
    color: var(--secondary_text);
    cursor: pointer;
}

input[type="number"] { text-align:right; }

textarea:focus, input:focus, select:focus {
    border-color: rgba(0, 0, 0, 0.5);
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--nav_bg_colour);
}

select {
    appearance: none;
    font-size: 1em;
    width: fit-content;
    margin: 4px 0;
    padding: 0.25em 1.5em 0.25em 0.25em;
    text-transform: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.25em center;
    background-size: 1em;
    border: 1px solid var(--border);
}

.multi-select {
    width: max-content;
    max-height: 240px;
    margin: 4px 0;
    overflow-y: scroll;
    background-color: var(--bg_color);
    border: 1px solid var(--border);
}

.multi-select label {
    display: block;
    width: 100%;
    padding: 0.25em 0;
    font-size: 1em;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.multi-select input {
    overflow: visible;
    width: 1.25em;
    height: 1.25em;
    margin-left: 0.25em;
}

option {
    padding: 0.25em;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.plaintext {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background-color: transparent !important;
    border: solid transparent !important;
    border-width: 1px 0 !important;
}

.create-multiple label { cursor:default }

.deleteButton {
    padding-left: 0.25em;
}
svg {
    width: 1em;
    height: 1em;
    padding: 0;
    cursor: pointer;
}

/* ---PAGE SPECIFIC--- */
/* dashboard */
#dash-wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: 48% 48%;
    column-gap: 2%;
    align-items: stretch;
}

/* /tickets/{ticket_id} */
.ticket-view-wrapper {
    width: 100%;
    height: 100%;
    display: grid;
    overflow-x: visible;
    z-index: 999;
    grid-template-columns: [start] auto [ticket-info] 250px [end];
}

.ticket-view-info {
    height: auto;
    padding: 0.5em;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-column-start: ticket-info;
    overflow-y: auto;
}

.ticket-view-content {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-width: 820px;
    height: 100%;
}

.ticket-view-description {
    display: flex;
    flex-direction: column;
}

.ticket-view-description-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.ticket-view-title {
    font-size: 2.5em;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.ticket-view-attachments {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    width: 100%;
    min-height: 180px;
}

.attachment {
    min-width: 140px;
    max-width: 180px;
    min-height: 140px;
    margin: 8px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.attachment:first-child { margin-left: 0 }
.attachment:last-child { margin-right: 0 }

.attachment-icon { margin:auto 0; }
.attachment-icon svg { width:3em; height:3em; }

.attachment-download {
    width: 95%;
    height: 3.65em;
    margin: 0 0.25em 0.25em 0.25em;
    font-size: 0.8em;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
}

.ticket-view-add-comment {
    position: sticky;
}

.comment-header { font-size:0.6em; padding:0.5em 0; }