/* ===========================================================================
   lab/forms.css — form structure + the two styles' colour deltas.

   FIXED (identical in both styles):
     - text fields are WHITE, black moderate-weight text, 4-side soft inner shadow.
   THEMED (changes per style):
     - panel background, field border colour, label colour.
   SELECTS (see the two clearly-marked blocks at the bottom):
     - (A) a select that is a FIELD inside a form  -> WHITE + black text
           (matches its sibling text fields).
     - (B) a standalone / toolbar select lives in tables.css and FOLLOWS the style.
   =========================================================================== */

/* ---- structure (same in every style) ------------------------------------- */
.form                 { display: flex; flex-direction: column; gap: 14px;
                        padding: 18px; border-radius: 10px; max-width: 460px; }
.form .row            { display: flex; flex-direction: column; gap: 5px; }
.form label           { font-size: 13px; font-weight: 500; }

/* ---- text fields — FIXED: always white, black moderate text, 4-side shadow */
.form input[type=text],
.form input[type=email],
.form input[type=password],
.form input[type=search],
.form input[type=number],
.form textarea        { background: #ffffff; color: #1a1a1a; font-weight: 500;
                        height: 32px; padding: 0 10px; border-radius: 6px;
                        box-shadow: inset 0 0 5px rgba(0,0,0,0.16);
                        font-family: inherit; font-size: 14px; outline: none; }
.form textarea        { height: auto; min-height: 76px; padding: 8px 10px;
                        resize: vertical; }

/* ---- DARK style deltas ---------------------------------------------------- */
.form.dark            { background: #303030; }      /* panel lifts off the #262626 page */
.form.dark label      { color: #e0e0e0; }
.form.dark input[type=text],
.form.dark input[type=email],
.form.dark input[type=password],
.form.dark input[type=search],
.form.dark input[type=number],
.form.dark textarea   { border: 1px solid #555; }   /* field border = themed */

/* ---- LIGHT style deltas --------------------------------------------------- */
.form.light           { background: #ffffff; border: 1px solid #d8d8d8; }  /* edge so the white card reads on #f5f5f5 */
.form.light label     { color: #2a2a2a; }
.form.light input[type=text],
.form.light input[type=email],
.form.light input[type=password],
.form.light input[type=search],
.form.light input[type=number],
.form.light textarea  { border: 1px solid #aaaaaa; }   /* darker = more delineation */

/* =========================================================================
   (A) FORM-FIELD SELECT — white + black text, like the text fields.
       Same in both styles except the border (themed). Custom dark arrow.
   ========================================================================= */
.form select          { background-color: #ffffff; color: #1a1a1a; font-weight: 500;
                        height: 32px; padding: 0 30px 0 10px; border-radius: 6px;
                        box-shadow: inset 0 0 5px rgba(0,0,0,0.16);
                        font-family: inherit; font-size: 14px; outline: none;
                        cursor: pointer; appearance: none; -webkit-appearance: none;
                        background-repeat: no-repeat;
                        background-position: right 10px center;
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23555555' stroke-width='1.5'/%3E%3C/svg%3E"); }
.form.dark select     { border: 1px solid #555; }
.form.light select    { border: 1px solid #aaaaaa; }