/* =========================
   Base
   ========================= */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f8ff;
    margin: 0;
    padding: 0;
}

/* =========================
   Banner/Header
   ========================= */
.banner {
    background-color: #1e3a8a;
    color: #fff;
    text-align: center;
    padding: 30px 0;
}
.banner img {
    height: 70px;
    vertical-align: middle;
    margin-right: 20px;
}

/* =========================
   Layout Container
   ========================= */
.container {
    max-width: 960px;
    margin: 0 auto;
}

/* =========================
   Form Panels
   ========================= */
.panel {
    margin-bottom: 30px;
    /* default field width for all panels; can be overridden per panel */
    --field-width: 100%;
}
.panel label {
    font-weight: bold;
}

/* Panel 1: make Contest Type much narrower (~50% of its cell) */
#panel1 { 
    --field-width: 50%;
}

/* Panel 2: slightly smaller fields (~10% less) */
#panel2 {
    --field-width: 90%;
}

/* =========================
   Table-based form layout (Panels 1 & 2)
   ========================= */
.form-table {
    width: 100%;
    table-layout: fixed;
}
.form-table td {
    padding: 8px;
    vertical-align: middle;
}
.form-table td:first-child {
    width: 25%;
    text-align: right;         /* aligns labels near the input edge */
    padding-right: 10px;       /* optional space between label and field */
    white-space: nowrap;
}
.form-table td:last-child {
    width: 60%;
}

/* Form controls inside .form-table use the panel's field width */
.form-table input:not([type="submit"]),
.form-table select,
.form-table textarea {
    width: var(--field-width);
    box-sizing: border-box;
}

/* Submit buttons */
.form-table input[type="submit"] {
    width: auto;
    background-color: #1e3a8a;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

/* Optional: subtle visual for readonly fields */
.readonly,
[readonly] {
    background-color: #f7f7f7;
    color: #666;
}

/* =========================
   Panel 3: Entries Grid
   ========================= */
#panel3 {
    overflow-x: auto; /* prevent overflow; allow horizontal scrolling if needed */
}

#itemsGrid {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

#itemsGrid th,
#itemsGrid td {
    padding: 6px 8px;
    vertical-align: top;
}

/* Column widths:
   1) Product Type: smaller
   2) Entry Name: larger
   3) Entry Description: larger
   4) Action: compact */
#itemsGrid th:nth-child(1),
#itemsGrid td:nth-child(1) { width: 18%; }  /* Product Type */
#itemsGrid th:nth-child(2),
#itemsGrid td:nth-child(2) { width: 36%; }  /* Entry Name */
#itemsGrid th:nth-child(3),
#itemsGrid td:nth-child(3) { width: 38%; }  /* Entry Description */
#itemsGrid th:nth-child(4),
#itemsGrid td:nth-child(4) { width: 8%; white-space: nowrap; } /* Action */

/* Controls fill their cells in the grid */
#itemsGrid select,
#itemsGrid input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

/* Secure payments label */
#paymentLabel {
  font-size: 12px;
  font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
  color: #555;
}

/* Hyperlink style */
#paymentLabel a {
  font-weight: 600;
  color: #0072bc; /* Brand color */
  text-decoration: none;
}

#paymentLabel a:hover {
  text-decoration: underline;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 768px) {
    /* Full-width fields on small screens */
    #panel2 { --field-width: 100%; }

    /* Rebalance columns a bit on small screens */
    #itemsGrid th:nth-child(1),
    #itemsGrid td:nth-child(1) { width: 28%; }
    #itemsGrid th:nth-child(2),
    #itemsGrid td:nth-child(2) { width: 32%; }
    #itemsGrid th:nth-child(3),
    #itemsGrid td:nth-child(3) { width: 32%; }
    #itemsGrid th:nth-child(4),
    #itemsGrid td:nth-child(4) { width: 8%; }
}