html
{
    font-size: 14px;
    font-family: Consolas;
    position: relative;
    min-height: 100%;
    overflow-y: scroll;
}

header
{
    background: var(--background-color);
    border-bottom: 1px solid var(--line-color);
}

body
{
    background: var(--background-color);
}

footer
{
    background: var(--background-color);
    border-top: 1px solid var(--line-color);
}

input
{
    background: #1e1e1e;
    border-width: 1px;
    border-radius: 4px;
    border-color: #1e1e1e;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

h1
{
    font-size: 40px;
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 40px;
    color: var(--text-50);
}

h2
{
    font-size: 32px;
    font-weight: 600;
    /*margin-top: 40px;*/
    color: var(--text-50);
}

h3
{
    font-size: 24px;
    color: var(--text-25);
}

h4
{
    color: var(--text-50);
}

p
{
    font-size: 18px;
    color: var(--text-50);
}

label
{
    color: var(--text-25);
    display: block;
    font-size: 18px;
    margin-bottom: 5px;
}

.value
{
    font-size: 18px;
    color: var(--text-50);
}

a
{
    color: var(--text-50);
}

    a:hover
    {
        color: var(--text-75);
    }

    a:visited
    {
        color: var(--text-25);
    }

.nav-link,
.nav-link:visited
{
    color: var(--text-50);
}

    .nav-link:hover
    {
        color: var(--text-75);
    }

    .nav-link.active
    {
        color: var(--text-50);
    }

.navbar
{
    align-self: end;
}

form div
{
    margin-bottom: 8px;
}

button
{
    width: fit-content;
    margin: 0 auto;
    padding: 12px 14px;
    border: none;
    border-radius: 10px;
    background: #050;
    color: #CCC;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    text-align: center;
}

    button:hover
    {
        background: #0A0;
        color: #FFF;
    }

.button
{
    width: fit-content;
    margin: 0 auto;
    padding: 12px 14px;
    border: none;
    border-radius: 10px;
    background: #050;
    color: #CCC;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    text-align: center;
}

    .button:hover
    {
        background: #0A0;
        color: #FFF;
    }

.card
{
    width: 100%;
    background: #2e2e2e;
    backdrop-filter: blur(12px);
    border: 1px solid #363636;
    border-radius: 14px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    gap: 8px;
}

.card input[type="text"],
.card input[type="password"]
{
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 16px;
    /* Background */
    background: #1e1e1e;
    background-clip: padding-box;
    /* Border + shape */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    /* Text */
    color: #e2e8f0;
    font-size: 14px;
    /* Remove default styling */
    outline: none;
    appearance: none;
    /* Smooth interaction */
    transition: all 0.2s ease;
}

/* Placeholder styling */
.card input::placeholder
{
    color: rgba(226, 232, 240, 0.5);
}

/* Focus state */
.card input:focus
{
    border-color: #0a0;
    background: rgba(15, 23, 42, 0.9);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

table
{
    width: 100%;
    border-collapse: collapse;
    color: #e2e8f0;
}

    table th,
    table td
    {
        padding: 10px 12px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    table th
    {
        text-align: left;
        color: #888;
    }

/*    table tbody tr:nth-child(odd)
    {
        background: var(--background-color);
    }*/

    table tbody tr:hover
    {
        background: rgba(255,255,255,0.05);
    }

select
{
    background: #575757;
    color: var(--text-50);
    border: 0px solid black;
}

label
{
    color: var(--text-25);
    font-weight: 500;
}

dl
{
    color: var(--text-50);
}

span
{
    color: var(--text-50);
}

.date
{
    text-wrap: nowrap;
}

.dropdown-menu
{
    display: none; /* Hides the list items by default */
    position: absolute;
    top: 100%; /* Positions menu directly beneath the parent item */
    left: 0;
    background-color: #444;
    min-width: 180px;
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 100;
}

    .dropdown-menu li
    {
        width: 100%;
    }

    .dropdown-menu a
    {
        padding: 12px 16px; /* Vertical stacking layout inside menu */
    }

/* Interaction Logic */
.dropdown:hover .dropdown-menu
{
    display: block; /* Reveals the list items when hovering over parent */
}