/* Defines the header text font class / anything that mentions "head" in the class will apply */
[class^="head"]{
    font-family: 'Verdana';
    color: white;
    text-align: center;
    font-size: 16px;
    margin-top: 1rem;
}

    /* headerTables */
    .headTable, td {
        border: none;
        border-collapse: collapse;
    }
    td {
        padding: 2px
    }

    /* Header buttons when button's page isn't active */
    .headButtonDefault {
        background-color: #7fa8eb;
        border: 2px solid #bccbe4;
        border: none;
        padding: 15px 32px;
        text-decoration: none;
        /* font-family: 'Lucida Sans'; */
        display: inline-block;
        border-radius: 1cap;
        /* margin: 4px 2px; */
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    /* Header buttons when button's page is active */
    .headButtonActive {
        background-color: #bccbe4;
        border: 2px solid #7fa8eb;
        border: none;
        padding: 15px 32px;
        text-decoration: none;
        /* font-family: 'Lucida Sans'; */
        display: inline-block;
        border-radius: 1cap;
        /* margin: 4px 2px; */
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

/* Authentification row "buttons" */
.authRow {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px;
}

    /* Sub auth row or Login bar classes */
    .loginBar {
        max-width: 1000px;
        padding: 1rem;
        border: 2px solid #bccbe4;
        border-radius: 1rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: cadetblue;
        text-align: center;
        transition: border-color 0.3s ease;
        font-family: Verdana;
        font-size: small;
        color: white;
    }
        .loginBar input {
            padding: 3px;
            background-color: #bccbe4;
        }
        .loginBar button {
            padding: 5px 7px;
            border-radius: 0.5cap;
            background-color: #7fa8eb;
            color: white;
            font-weight: bolder;
            cursor: pointer;
        }

/* Account login form */
.loginPanel {
    max-width: 1000px;
    padding: 1rem;
    border: 2px solid #bccbe4;
    border-radius: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: rgb(255, 112, 112);
    text-align: center;
    transition: border-color 0.3s ease;
    font-family: Verdana;
    font-size: medium;
    color: white;
}
    .loginPanel button {
        padding: 5px 7px;
        border-radius: 0.5cap;
        background-color: #7fa8eb;
        color: white;
        font-weight: bolder;
        cursor: pointer;        
    }

.registerPanel {
    max-width: 1000px;
    padding: 1rem;
    border: 2px solid #bccbe4;
    border-radius: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: rgb(255, 112, 112);
    text-align: left;
    justify-content: left;
    transition: border-color 0.3s ease;
    font-family: Verdana;
    font-size: medium;
    color: white;
    line-height: 2cap;
}

    .registerPanel button {
        padding: 5px 7px;
        border-radius: 0.5cap;
        background-color: #d8ffed;
        color: rgb(65, 57, 59);
        font-weight: bolder;
        cursor: pointer;
    }

    .registerPanelForm {
        max-width: 1000px;
        padding: 1rem;
        border: 2px solid #bccbe4;
        border-radius: 1rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: rgb(183, 255, 207);
        text-align: left;
        justify-content: left;
        transition: border-color 0.3s ease;
        font-family: Verdana;
        font-size: medium;
        color: rgb(41, 36, 36);
        line-height: 2cap;
    }

.accountManager {
    max-width: 1000px;
    padding: 1rem;
    border: 2px solid #bccbe4;
    border-radius: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: rgb(160, 236, 204);
    text-align: left;
    justify-content: left;
    transition: border-color 0.3s ease;
    font-family: Verdana;
    font-size: medium;
    color: rgb(68, 63, 63);
    line-height: 2cap;
}

    .accountManager button {
        padding: 5px 7px;
        border-radius: 0.5cap;
        background-color: #d3e2fa;
        color: rgb(75, 83, 85);
        font-weight: bolder;
        cursor: pointer;
    }

    .accountManageFields {
        max-width: 1000px;
        padding: 1rem;
        border: 2px solid #bccbe4;
        border-radius: 1rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: rgb(197, 204, 238);
        text-align: left;
        justify-content: left;
        transition: border-color 0.3s ease;
        font-family: Verdana;
        font-size: medium;
        color: rgb(49, 49, 53);
        line-height: 2cap;
    }

.mainAdminContainer {
    max-width: 1000px;
    padding: 1rem;
    border: 2px solid #bccbe4;
    border-radius: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: rgb(236, 160, 166);
    text-align: left;
    justify-content: left;
    transition: border-color 0.3s ease;
    font-family: Verdana;
    font-size: medium;
    color: rgb(36, 33, 33);
    line-height: 2cap;
}

    .mainAdminContainer button {
        padding: 5px 7px;
        border-radius: 0.5cap;
        background-color: #d8ffed;
        color: rgb(65, 57, 59);
        font-weight: bolder;
        cursor: pointer;
    }

    /* These appear within the mainAdminContainer */
    
    .subAdminDetailsContainer {
    max-width: 1000px;
    padding: 1rem;
    border: 2px solid #bccbe4;
    border-radius: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: rgb(186, 223, 229);
    text-align: left;
    justify-content: left;
    transition: border-color 0.3s ease;
    font-family: Verdana;
    font-size: medium;
    color: rgb(36, 33, 33);
    line-height: 2cap;
    }

    .subAdminPermContainer {
    max-width: 1000px;
    padding: 1rem;
    border: 2px solid #bccbe4;
    border-radius: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: rgb(219, 186, 229);
    text-align: left;
    justify-content: left;
    transition: border-color 0.3s ease;
    font-family: Verdana;
    font-size: medium;
    color: rgb(36, 33, 33);
    line-height: 2cap;
    }

    .subAdminDeleteContainer {
    max-width: 1000px;
    padding: 1rem;
    border: 2px solid #bccbe4;
    border-radius: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: rgb(59, 10, 10);
    text-align: left;
    justify-content: left;
    transition: border-color 0.3s ease;
    font-family: Verdana;
    font-size: medium;
    color: rgb(255, 211, 211);
    line-height: 2cap;
    }
    
        .subAdminDeleteContainer button {
        padding: 5px 7px;
        border-radius: 0.5cap;
        background-color: red;
        color: rgb(255, 216, 216);
        font-weight: bolder;
        cursor: pointer;            
        }

    .usersTable {
        max-width: 1000px;
        width: 100%;
        padding: 1rem;
        border: 2px solid #bccbe4;
        border-radius: 1rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: rgb(236, 160, 166);
        text-align: left;
        justify-content: left;
        transition: border-color 0.3s ease;
        font-family: Verdana;
        font-size: medium;
        color: rgb(36, 33, 33);
        line-height: 2cap;
        border-collapse: collapse;
    }

        .usersTable th, .usersTable td {
            border: 1px solid #ccc;
            background-color: #e2eaf7;
            padding: 8px 12px;
            text-align: left;
        }

        .usersTable th {
            background-color: #c4d6f3;
        }

        .usersTable button {
            padding: 5px 7px;
            border-radius: 0.5cap;
            background-color: #d8ffed;
            color: rgb(65, 57, 59);
            font-weight: bolder;
            cursor: pointer;
        }

.inventoryContainer {
    max-width: 1000px;
    padding: 1rem;
    border: 2px solid #bccbe4;
    border-radius: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: rgb(187, 160, 236);
    text-align: left;
    justify-content: left;
    transition: border-color 0.3s ease;
    font-family: Verdana;
    font-size: medium;
    color: rgb(23, 26, 25);
    line-height: 2cap;
}

    .createRecordForm {
        max-width: 1000px;
        padding: 1rem;
        border: 2px solid #bccbe4;
        border-radius: 1rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: rgb(160, 199, 236);
        text-align: left;
        justify-content: left;
        transition: border-color 0.3s ease;
        font-family: Verdana;
        font-size: medium;
        color: rgb(23, 26, 25);
        line-height: 2cap;
    }

        .createRecordForm input, .createRecordForm select {
            width: 300px;
            height: 18px;
            margin-bottom: 5px;
        }

        .createRecordForm #stockComments {
            width: 300px;
            height: 50px;
            resize: none;
        }

        .invAddRequired {
            max-width: 1000px;
            padding: 1rem;
            border: 2px solid #bccbe4;
            border-radius: 1rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            background-color: rgb(255, 209, 209);
            text-align: left;
            justify-content: left;
            transition: border-color 0.3s ease;
            font-family: Verdana;
            font-size: medium;
            color: rgb(23, 26, 25);
            line-height: 2cap;
        }

       .invAddOptional {
            max-width: 1000px;
            padding: 1rem;
            border: 2px solid #bccbe4;
            border-radius: 1rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            background-color: rgb(203, 255, 192);
            text-align: left;
            justify-content: left;
            transition: border-color 0.3s ease;
            font-family: Verdana;
            font-size: medium;
            color: rgb(23, 26, 25);
            line-height: 2cap;
        }

    .inventoryContainer button {
        padding: 5px 7px;
        border-radius: 0.5cap;
        background-color: #d8ffed;
        color: rgb(65, 57, 59);
        font-weight: bolder;
        cursor: pointer;        
    }

    .inventoryTable {
        max-width: 1000px;
        width: 100%;
        padding: 1rem;
        border: 2px solid #bccbe4;
        border-radius: 1rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: rgb(236, 160, 166);
        text-align: left;
        justify-content: left;
        transition: border-color 0.3s ease;
        font-family: Verdana;
        font-size: medium;
        color: rgb(36, 33, 33);
        line-height: 2cap;
        border-collapse: collapse;        
    }

        .inventoryTable th, .inventoryTable td {
            border: 1px solid #ccc;
            background-color: #e2eaf7;
            padding: 8px 12px;
            text-align: left;
            font-size: small;
        }

        .inventoryTable th {
            background-color: #c4d6f3;
        }

        .inventoryTable button {
            padding: 5px 7px;
            border-radius: 0.5cap;
            background-color: #d8ffed;
            color: rgb(65, 57, 59);
            font-weight: bolder;
            cursor: pointer;
        }

/* Main body class in the event the above classes are not applicable*/
.mainBody {
    font-family: Verdana;
}

.modal-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
  z-index: 9999;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s ease-out forwards;
}

.modal-box {
  background-color: #fff;
  padding: 1.5rem 2rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  animation: scaleIn 0.3s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}