/* CSS Document */

/* All the Tupperware 
========================================================================================================================== */
    body                { padding: 0; margin: 0; background-color: #F4F7F2; font-family: helvetica, sans-serif;   }
    #mainContainer      { width: 100%; min-height: 150px; background: #FFF; }
    
    #headContainer      { width: 100%; min-height: 1px; background-color: #254A14; box-shadow: 0 10px 10px -12px black; position: relative; z-index: 1; }
    #logo               { width: auto; height: 35px; padding:15px;  }
    #logo img           { width: auto; height: 100%; }

    #contentContainer   { width: 100%;  min-height: 250px; background-color: #F4F7F2; margin: 0; padding: 0; vertical-align: top; display: inline-block; position: relative; z-index: 0; }
    #loginformContainer { width: 350px; min-height: 150px; background-color: #d7e1d7; margin: 25px auto; padding: 10px; border-radius: 15px; }
    #statusBar          { width: 100%;  min-height: 35px;  background-color: #d7e1d7; margin: 0; padding: 10px 0; text-align: right; }
    #statusBar .button  { margin-right: 25px; } 

    #dataContainer      { min-width: 550px; max-width: 950px; min-height: 150px; background-color: #d7e1d7; margin: 25px auto; padding: 10px; border-radius: 15px; }

    .left      { width: 25%; float: left; }
    .left img  { width: 99%; }

    .right     { width: 70%; float: left; padding-left: 15px;}    

    
    #footerContainer    { width: 100%; min-height: 1px;   background-color: #F4F7F2; }
/* ======================================================================================================================= */

/* Headings 
========================================================================================================================== */
    H1 { margin: 0; padding: 10px; text-align: center; }
    H2 { margin: 0; padding: 10px; text-align: center; }
/* ======================================================================================================================= */

/* Buttons
========================================================================================================================== */
    .button         { color: #f7fdf7; background-color: #1d4622; border: 1px solid #1d4622; padding: 8px 16px; font-size: 16px; cursor: pointer; border-radius: 4px; transition: background-color 0.2s ease; }
    .button:hover   { color: #1d4622; background-color: #ffffff; border: 1px solid #1d4622; }
/* ======================================================================================================================= */

/* Forms
========================================================================================================================== */
    input { margin: 0 0 5px 0; padding: 10px; border: 0; border-radius: 5px; box-sizing: border-box; }

    input[type="text"]      { width: 100%; }
    input[type="password"]  { width: 100%; }
    input[type="email"]     { width: 100%; }

    input[type="submit"]       { width: 100px; color: #f7fdf7; background-color: #1d4622; cursor: pointer; box-shadow: 0 10px 10px -12px black; text-transform: uppercase; }
    input[type="submit"]:hover { width: 100px; color: #1d4622; background-color: #ffffff; cursor: pointer; box-shadow: 0 0 0 0 black; }
/* ======================================================================================================================= */

/* Password visibility toggle
========================================================================================================================== */
    .password-field-wrapper                  { position: relative; width: 100%; }
    .password-field-wrapper input            { width: 100%; padding-right: 40px; box-sizing: border-box; } /* padding right gives space for the eye */
    .password-field-wrapper .toggle-password { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); cursor: pointer; color: #1d4622; font-size: 18px; pointer-events: all; }
/* ======================================================================================================================= */

/* User Cards on the manage users page
========================================================================================================================== */
    .user-cards-container   { display: flex; flex-wrap: wrap; gap: 20px; }
    .user-card              { background-color: #f7f7f7; border-radius: 8px; padding: 15px; width: 180px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
    .user-card .user-avatar { margin-bottom: 10px; color: #1d4622; }
    .user-card .user-info p { font-weight: bold; margin-bottom: 10px; }
    .user-card .button      { display: inline-block; padding: 6px 12px; background-color: #1d4622; color: #f7fdf7; text-decoration: none; border: 1px solid #1d4622;border-radius: 4px; font-size: 0.9em; }
    .user-card.empty-user   { border: 2px dashed #1d4622; color: #1d4622; }

    .user-card .button:hover,
    .user-card.empty-user .button:hover { color: #1d4622; background-color: #ffffff; border: 1px solid #1d4622;}
/* ======================================================================================================================= */