html {
    box-sizing: border-box;
    font-family: arial, sans-serif;
}

body {
    position: relative;
    font-family: arial, sans-serif;
    font-size: 0.8em;
    background-color: white;
    line-height: 1.4;
    overflow-x: hidden;
    align-content: center;
    align-items: center;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: rgb(38, 38 ,38);
    color: white;
    font-size: 0.9em;
}

.nav-menu-button {
    background-color: rgb(38, 38, 38);
    color: darkgray;
    border: 0.3px solid darkgrey;
    text-decoration: none;
    padding: 8px;
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 5px;
    font-size: 0.9em;
}

.nav-menu-button-left {
    background-color: rgb(38, 38, 38);
    color: darkgray;
    border: 0.3px solid darkgrey;
    text-decoration: none;
    padding: 8px;
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 5px;
    float: left;
}

.nav-menu-button-right {
    background-color: rgb(38, 38, 38);
    color: darkgray;
    border: 0.3px solid darkgrey;
    text-decoration: none;
    padding: 8px;
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 5px;
    float: right;
}

#div-left {
    float: left;
    margin-left: 5px;
}

#div-right {
    float: right;
    margin-right: 5px;
}
    
.main-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    padding-top: 20px;
    column-gap: 1px;
    row-gap: 1px;
}

.button-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    padding-top: 20px;
    column-gap: 1px;
    row-gap: 8px;
}

/* ************* FLOATING LABEL SECTION (FIXED) ************* */

.floating-label {
    position: relative;
    margin: 8px 0;
    width: 100%;
}

.floating-label input,
.floating-label select,
.floating-label textarea {
    width: 85%;
    padding: 9px 5px;
    padding-left: 10px;
    font-size: 12px; 
    border: 0.9px solid #bbb;
    border-radius: 3px;
    outline: none;
    background: transparent;
    transition: border-color 0.2s ease;
    box-sizing: border-box; 
}

.floating-label input:focus,
.floating-label select:focus,
.floating-label textarea:focus {
    border-color: #3f51b5; /* Material blue */
}

.floating-label label {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 10px;
    color: #777;
    pointer-events: none;
    transition: 0.2s ease;
    background: white;
    padding: 0 5px;
}

/* FLOATING EFFECT */
.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label,
.floating-label textarea:focus + label,
.floating-label textarea:not(:placeholder-shown) + label,
.floating-label select:focus + label,
.floating-label select:not([value="SELECT ASSET CATEGORY"]) + label {
    top: -8px;
    left: 8px;
    font-size: 10px;
    color: #3f51b5;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

input[type=number],
input[type=text],
input[type=decimal],
input[type=password],
input[type=date],
input[type="text"]:read-only,
input[type="text"].calculated:read-only,
input[type="text"].verified:read-only {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* READ ONLY INPUT */
input[type="text"]:read-only {
    border: 0.9px solid rgb(191, 191, 191);
    background-color: rgb(242, 242, 242);
    cursor: not-allowed;
}

input[type="text"].calculated:read-only {
    border: 0.9px solid rgb(153, 175, 255);
    background-color: rgb(204, 215, 255);
    cursor: not-allowed;
}

input[type="text"].verified:read-only {
    border: 0.9px solid rgb(255, 153, 153);
    background-color: rgb(255, 204, 204);
    cursor: not-allowed;
}

.floating-label input:read-only + label {
    color: rgb(102, 102, 102);
}

/* Error message */
.input-error {
    background-color: white !important;  
    border: 1px solid red !important; 
    color: #d32f2f;
    font-size: 12px;
    margin-top: 4px;
}

label.error {
    color: red !important;
    font-weight: 500;
}

.card {
    display: block;
    border: none;  
    /* border: 1px solid grey; */
    border-radius: 0px;
    margin: 0;
}

.card-title {
    color: rgb(102, 102, 102);
    padding-left: 10px;
    font-weight: 500;
    font-size: 0.9em;
}

input {
    padding: 9px 5px;
    border: 0.9px solid rgb(166, 166, 166);
    border-radius: 3px;
    background-color: white;
    box-sizing: border-box;
    width: 85%;
    font-size: 0.9em;
    margin: 2px 2px;
}

select {
    padding: 9px 5px;
    border: 0.9px solid rgb(166, 166, 166);
    border-radius: 3px;
    background-color: white;
    box-sizing: border-box;
    width: 85%;
    font-size: 0.8em;
    margin: 2px 2px;
}

input[type=number] {
    padding: 9px 5px;
    border: 0.9px solid rgb(166, 166, 166);
    border-radius: 3px;
    background-color: white;
    box-sizing: border-box;
    width: 85%;
    font-size: 0.9em;
    margin: 2px 2px;
}

input[type=text] {
    padding: 9px 5px;
    border: 0.9px solid rgb(166, 166, 166);
    border-radius: 3px;
    background-color: white;
    box-sizing: border-box;
    width: 85%;
    font-size: 0.9em;
    margin: 2px 2px;
}

input[type=decimal] {
    padding: 9px 5px;
    border: 0.9px solid rgb(166, 166, 166);
    border-radius: 3px;
    background-color: white;
    box-sizing: border-box;
    width: 85%;
    font-size: 0.9em;
    margin: 2px 2px;
}

input[type=password] {
    padding: 9px 5px;
    border: 0.9px solid rgb(166, 166, 166);
    border-radius: 3px;
    background-color: white;
    box-sizing: border-box;
    width: 85%;
    font-size: 0.9em;
    margin: 2px;
}

input[type=submit] {
    padding: 9px 5px;
    border: 0.9px solid rgb(51, 51, 51);
    border-radius: 3px;
    background-color: rgb(51, 51, 51);
    color: white;
    box-sizing: border-box;
    width: 85%;
    font-size: 0.8em;
    margin: 2px;
}

input[type=date] {
    font-size: 0.9em;
}

.main-menu-button {
    width: 350px;
    font-size: 0.8em;
    border: 0.5px solid black;
    border-radius: 0px;
    padding: 10px;
    margin: 1px;
}

#menu-item {
    width: 350px;
    font-size: 0.8em;
    border: 0.5px solid black;
    border-radius: 0px;
    padding: 10px;
    margin: 1px;
}

/* IDS */
#filled-text-field {
    border: 0.9px solid rgb(166, 166, 166);
    background-color: rgb(217, 217, 217);
}

#required-text-field {
    border: 0.9px solid rgb(166, 166, 166);
    background-color: rgb(255, 204, 204);
}

#take-on-cost-text-field {
    border: 0.9px solid rgb(166, 166, 166);
    background-color: rgb(224, 225, 229);
}

#disposal-text-field {
    border: 0.9px solid rgb(255, 153, 255);
    background-color: rgb(255, 153, 255);
}

#scrapped-text-field {
    border: 0.9px solid rgb(255, 153, 153);
    background-color: rgb(255, 153, 153);
}

#blue-text-field {
    border: 0.9px solid rgb(166, 166, 166);
    background-color: rgb(230, 238, 255);
}

#filled-text-field-calculation {
    border: 0.9px solid rgb(153, 175, 255);
    background-color: rgb(204, 215, 255);
}

#filled-text-field-verification {
    border: 0.9px solid rgb(255, 153, 153);
    background-color: rgb(255, 204, 204);
}

/*  CLASSES  */
.filled-text-field {
    border: 0.9px solid rgb(166, 166, 166);
    background-color: rgb(217, 217, 217);
}

.required-text-field {
    border: 0.9px solid rgb(166, 166, 166);
    background-color: rgb(255, 204, 204);
}

.take-on-cost-text-field {
    border: 0.9px solid rgb(166, 166, 166);
    background-color: rgb(224, 225, 229);
}

.disposal-text-field {
    border: 0.9px solid rgb(255, 153, 255);
    background-color: rgb(255, 153, 255);
}

.scrapped-text-field {
    border: 0.9px solid rgb(255, 153, 153);
    background-color: rgb(255, 153, 153);
}

.blue-text-field {
    border: 0.9px solid rgb(166, 166, 166);
    background-color: rgb(230, 238, 255);
}

.filled-text-field-calculation {
    border: 0.9px solid rgb(153, 175, 255);
    background-color: rgb(204, 215, 255);
}

.filled-text-field-verification {
    border: 0.9px solid rgb(255, 153, 153);
    background-color: rgb(255, 204, 204);
}

#spreadsheet-item {
    width: 350px;
    height: 45px;
    background-color:  rgb(0, 71, 0);
    color: white;
    text-decoration: none;
    padding: 0.8em 0.8em;
    margin: 5px;
    border-radius: 3px;
    border: none;
}

#hide-show {
    display: none;
}

#hot-button {

    color: rgb(230, 230, 230);
    font-weight: 600;
    border: 0.9px solid rgb(64, 64, 64); 
    background-color: rgb(128, 0, 0);
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    /* Elevation (shadow) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.hot-button {
    color: rgb(230, 230, 230);
    font-weight: 600;
    border: 0.9px solid rgb(64, 64, 64); 
    background-color: rgb(128, 0, 0);
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    /* Elevation (shadow) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.remittance-button {

    color: rgb(230, 230, 230);
    border: 0.9px solid rgb(64, 64, 64); 
    background-color: red;
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

#error-button {

    color: rgb(230, 230, 230);
    border: 0.9px solid rgb(204, 0, 0); 
    background-color: rgb(204, 0, 0);
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

#black-button {

    color: rgb(230, 230, 230);
    border: 0.9px solid black; 
    background-color: black;
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

#disposal-button {

    color: rgb(230, 230, 230);
    border: 0.9px solid rgb(255, 153, 255); 
    background-color: rgb(255, 153, 255);
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

#disabled-button {

    color: rgb(230, 230, 230);
    border: 0.9px solid rgb(179, 179, 179);
    background-color: rgb(179, 179, 179);
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.disabled-button {

    color: rgb(230, 230, 230);
    border: 0.9px solid rgb(179, 179, 179);
    background-color: rgb(179, 179, 179);
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

#verification-border {

    border: 0.9px solid rgb(255, 26, 26);
}

#navbar-button {

    background-color: rgb(38, 38, 38);
    color: darkgray;
    border: 0.3px solid darkgrey; 
    padding: 8px;
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 25px;
    font-size: 1em;
}

.spinner {
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: #fff;
    width: 15px;
    height: 15px;
    animation: spin 1s ease-in-out infinite;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== ANDROID MATERIAL SNACKBAR ===== */
#snackbar-container {
    position: fixed;
    font-family: arial, sans-serif;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Base snackbar */
.snackbar {
    min-width: 320px;
    max-width: 90vw;
    background: #323232;
    color: #fff;
    padding: 14px 18px;
    border-radius: 2px;

    font-size: 12px;
    letter-spacing: 0.3px;

    display: flex;
    align-items: center;
    gap: 20px;

    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    opacity: 0;
    transform: translateY(80px);
    transition: all .35s cubic-bezier(.4,0,.2,1);
}

/* Visible */
.snackbar.show {
    opacity: 1;
    transform: translateY(0);
}

/* Text */
.snackbar-text {
    flex: 1;
}

/* Action button */
.snackbar-action {
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.snackbar-action:hover {
    background: rgba(255,255,255,0.08);
}

/* Ripple effect */
.snackbar-action::after {
    content: "";
    position: absolute;
    border-radius: 10%;
    transform: scale(0);
    background: rgba(255,255,255,0.4);
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    pointer-events: none;
}

.snackbar-action:active::after {
    transform: scale(3);
    opacity: 0;
    transition: transform .5s, opacity 1s;
}

/* ===== TYPES ===== */
.snackbar.success { background: #323232; }
.snackbar.error { background: #c62828; }
.snackbar.warning { background: #ed6c02; }
.snackbar.info { background: #323232; }

/* Mobile stacked like Android */
@media (max-width: 600px) {
    #snackbar-container {
        width: 95%;
        left: 50%;
        transform: translateX(-50%);
    }

    .snackbar {
        width: 100%;
        border-radius: 4px;
    }
}