/*! 
 * molybdenum v1.0.250619.1428 Companion CSS
 * Copyright 2025 PT Nusa Angkasa Siber
 * Released  under the MIT License 
 */
:root {
    color-scheme: light only;
    --secondary-table: #1e634a;
    --primary-table: #1182a4;
    --primary-foreground: #050607;
    --secondary-foreground: #aaaaac;
    --primary-background: #fefdfc;
    --secondary-background: #d9d9dc;
    --semi-background: #fdfcf975;
    --primary-accent: #1b5d76;
    --semi-primary: #1b5d76bb;
    --secondary-accent: #4eaacc;
    --semi-secondary: #4eaaccbb;
    --negative-accent: #ad0400;
    --positive-accent: #4ecc89;
    --neutral-p-accent: #5fc4ff;
    --neutral-n-accent: #f6c267;
    --semi-negative: #ad0400bb;
    --semi-positive: #4ecc89bb;
    --semi-neutral-p: #5fc4ffbb;
    --semi-neutral-n: #f6c267bb;
    --input-background: #ebf2f4;
    --blend-color: inherit;
    height: 100vh;
}
* {
    box-sizing: border-box;
    position: relative;
    font-family: 'Source Sans 3';
}
body
{
    font-size: 13pt;
    color: var(--primary-foreground);
    background-color: var(--primary-background);
}
thead
{
    background-color: var(--primary-accent);
    color: var(--primary-background);
    position: sticky;
    top: 1px;
    z-index: 1;
}
button
{
    border: 1px solid var(--secondary-foreground);
    color: var(--primary-foreground);
    padding: .125em .35em .125em .35em;
    border-radius: .15em;
    margin: .15em 0 .15em 0;
    font-size: .9em;
}
button.accented
{
    background-color: var(--primary-accent);
    color: var(--primary-background);
}
button.p-accent
{
    background-color: var(--neutral-p-accent);
}
button.s-accent
{
    background-color: var(--secondary-accent);
}
button.n-accent
{
    background-color: var(--neutral-n-accent);
}
button.positive
{
    background-color: var(--positive-accent);
}
button.negative
{
    background-color: var(--negative-accent);
    color: var(--primary-background);
}
button:hover:not(:disabled)
{
    filter: brightness(1.15);
}
button:active:not(:disabled)
{
    border: 1px inset var(--secondary-foreground);
    filter: brightness(.95);
}
button:disabled
{
    background-color: var(--secondary-foreground);
    color: var(--primary-foreground)
}
table
{
    isolation: isolate;
}
table, table th, table td {
    border-collapse: collapse;
    padding: .2ch .25ch .2ch .25ch;
    margin: auto;
}
table.bordered, table.bordered th , table.bordered td {
    border: 1px solid var(--primary-background);
}
table.fullwidth{
    width: calc(100% - 2ch);
}
table.selectable tr:not(thead tr){
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}
table.selectable tr:hover:not(thead tr)
{
    background-color: var(--semi-neutral-p);
}
tr:nth-child(odd):not(thead tr){
    background-color: white;
}
tr:not(thead tr){
    background-color: var(--input-background);
}
table.selectable tr.selected:not(thead tr), table.selectable tr.odd.selected:not(thead tr){
    background-color: var(--semi-positive);
}
table.selectablecell td:hover:not(.block)
{
    cursor: pointer;
    background-color: var(--semi-neutral-p);
}
table.selectablecell td.selected:not(.block)
{
    background-color: var(--semi-positive);
}
textarea
{
    min-height: 1.85em;
    resize: vertical;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select
{
    background-color: var(--primary-background);
    border: 1px solid var(--secondary-foreground);
    border-radius: .15em;
    font-size: 1em;
    padding-inline-start: .35em;
    padding-inline-end: .35em;
    width: 25ch;
    outline: none;
    margin-bottom: .25em;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus-visible, textarea:focus-visible, select:focus-visible
{
    border: 1px solid var(--secondary-background);
    border-bottom: 1px solid var(--primary-accent);
    background-color: var(--input-background);
}
input.icon
{
    padding-left: 3.5ch !important;
}
input[type="password"].peek
{
    padding-right: 3.5ch !important;
}
sep-bar{
    -webkit-user-select: none;
    user-select: none;
    color: var(--secondary-foreground);
    margin-inline-start: .75ch;
    margin-inline-end: .5ch;
}
sep-bar::after{
    content: "|";
}
background-screen, load-screen, dialog-screen
{
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--semi-background);
    backdrop-filter: blur(5px);
    user-select: none;
    justify-content: center;
    align-items: center;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}
dialog-box load-screen
{
    top: 2.5em;
}
load-screen:not(body>load-screen):not(dialog-box load-screen)
{
    position: absolute;
}
load-screen
{
    flex-direction: column;
}
dialog-box
{
    display: grid;
    grid-template-rows: auto 1fr;
    row-gap: .75em;
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    min-width: 25ch;
    min-height: 10em;
    width: max-content;
    height: max-content;
    background-color: var(--primary-background);
    border: 1px solid var(--secondary-foreground);
    border-radius: .25em;
    padding: .5em;
    transition: scale .25s;
    scale: 0;
    overflow: hidden;
}
/* dialog-box div:has(load-screen)
{
    overflow-y: clip !important;
} */
dialog-title
{
    display: grid;
    grid-template-columns: 1fr auto;
    border-bottom: 1px solid var(--secondary-foreground);
    font-weight: 500;
    padding-left: .25em;
    height: 1.65em;
}
load-screen.opaque
{
    background-color: var(--primary-background);
}
a, confirm-handle
{
    display: inline;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    color: var(--primary-accent);
    margin-inline-start: .5ch;
    margin-inline-end: .5ch;
    white-space: nowrap;
    text-decoration: none;
    filter: brightness(1);
}
a
{
    transition: filter .35s ease, text-shadow .35s ease;
}
 a:hover /*, confirm-handle:hover */
{
    filter: brightness(1.25);
    text-shadow: 0 0 .25em var(--semi-primary);
}
a:active /*, confirm-handle:active*/
{
    filter: brightness(1.25);
    text-shadow: 0 0 .75em var(--semi-primary);
}
button.notifier::after
{
    content: ".";
    background-color: var(--negative-accent);
    color: var(--negative-accent);
    width: 2em;
    height: 2em;
    border-radius: 1em;
    display: block;
    position: absolute;
    top: -.75em;
    right: -.75em;
    font-size: .3em;
}
a-button.notifier::after
{
    content: ".";
    background-color: var(--negative-accent);
    color: var(--negative-accent);
    width: 2em;
    height: 2em;
    border-radius: 1em;
    display: block;
    position: absolute;
    top: -.1em;
    right: -1.25em;
    font-size: .26em;
}
/* .ellipsis
{
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
} */
.noscroll
{
    overflow: hidden;
}
/* ANIMATIONS */
load-message
{
    display: block;
    margin: .4em;
}
chat-load { /* POSSIBLE load-anim DEFINITION */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
  
chat-load span {  /* ALSO PUT load-anim span IF USED */
    width: 1em;
    height: 1em;
    background-color: var(--primary-accent);
    border-radius: 50%;
    opacity: 0.3;
    animation: pulse 1.5s infinite ease-in-out;
}
  
chat-load span:nth-child(1) {
    animation-delay: 0s;
}
chat-load span:nth-child(2) {
    animation-delay: 0.2s;
}
chat-load span:nth-child(3) {
    animation-delay: 0.4s;
}
  
@keyframes pulse {
    0%, 100% {
      opacity: 0.3;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.3);
    }
}
sonar-ping
 {  /* POSSIBLE load-anim DEFINITION */
    width: 2em;
    height: 2em;
    border: 2px solid var(--primary-accent);
    border-radius: 50%;
    position: relative;
    animation: expandRing 1.5s infinite ease-out;
}

@keyframes expandRing {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
} 
skeleton-view {
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite linear;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
progress-loop {  /* POSSIBLE load-anim DEFINITION */
    width: 95%;
    height: .25em;
    background: var(--secondary-background);
    position: relative;
    overflow: hidden;
}
  
progress-loop::after { /* ALSO PUT load-anim::after IF USED */
    content: "";
    width: 50%;
    height: 100%;
    background: var(--primary-accent);
    position: absolute;
    left: -50%;
    animation: progress-loop 2s infinite linear;
}
  
@keyframes progress-loop {
    0% { left: -50%; }
    100% { left: 100%; }
}

m-icon {
    max-width: 1ch;
    width: 1ch;
    overflow: hidden;
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1.3em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
m-inline {
    max-width: 1ch;
    width: 1ch;
    overflow: hidden;
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1.25em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    padding-bottom: .17em;
    vertical-align: middle;
}
button>m-inline
{
    padding-bottom: .07em;
}
m-inline.icon
{
    position: absolute;
    left: 0;
    font-size: 1.2em;
    padding-top: .25em;
    padding-left: .2em;
    max-width: 1.2ch;
    width: 1.2ch;
}

/* ALERT BOX */
alert-screen, confirm-screen
{
    display: flex;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--semi-background);
    backdrop-filter: blur(5px);
    user-select: none;
    justify-content: center;
    align-items: center;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}
alert-box, confirm-box
{
    border: 1px solid var(--secondary-foreground);
    display: block;
    width: calc(100vw - .75em);
    max-width: 450px;
    position: fixed;
    height: 12.25em;
    max-height: 12.25em;
    padding: .5em;
    background-color: var(--semi-background);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: .25em;
    scale: 0;
    transition: scale .25s;
    text-align: center;
}
confirm-box
{
    height: 14.25em;
    max-height: 14.25em;
}
alert-handle
{
    display: inline;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    color: var(--primary-accent);
    margin-inline-start: .5ch;
    margin-inline-end: .5ch;
    white-space: nowrap;
    text-decoration: none;
    filter: brightness(1);
}
confirm-handle
{
    display: grid;
    grid-template-rows: 1fr 1fr;
    position: absolute;
    bottom: .25em;
    left: -.2em;
    right: -.2em;
    text-align: center;
    height: 3.5em;
    outline: none;
    color: var(--primary-foreground);
}
alert-title, confirm-title
{
    display: block;
    white-space: nowrap;
    font-weight: 600;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    margin-bottom: .25em;
    border-bottom: 1px solid var(--secondary-background);
}
alert-text, confirm-text
{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: .25em;
    border-bottom: 1px solid var(--secondary-background);
    text-align: justify;
    height: 7.75em;
    margin-bottom: .25em;
}