body { font-family: 'Segoe UI', Arial; background: #f0f2f5; margin: 0; color: #333; line-height: 1.6; }
        header { background: #003366; color: white; padding: 20px; text-align: center; border-bottom: 5px solid #d9534f; }
        header h1 { margin: 0; font-size: 1.8rem; }
        nav { background: #222; padding: 10px; text-align: center; position: sticky; top: 0; z-index: 1000; }
        nav a { color: #fff; margin: 0 10px; text-decoration: none; font-weight: bold; font-size: 0.9rem; white-space: nowrap; }
        .container { max-width: 1100px; margin: 15px auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); width: 90%; }
        .card { border: 1px solid #ddd; padding: 15px; margin-bottom: 20px; border-radius: 8px; background: #fafafa; }
        
        /* Form Layout */
        .flex { display: flex; gap: 15px; flex-wrap: wrap; }
        .flex > * { flex: 1; min-width: 250px; }
        input { padding: 12px; margin: 8px 0; width: 100%; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; } /* 16px prevents iOS zoom */
        
        .btn { padding: 12px 20px; border: none; cursor: pointer; border-radius: 4px; font-weight: bold; color: white; display: inline-block; text-decoration: none; text-align: center; transition: 0.3s; }
        .btn-red { background: #d9534f; width: 100%; }
        .btn-blue { background: #003366; }
        .btn-green { background: #28a745; }

        /* Responsive Table */
        .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
        table { width: 100%; border-collapse: collapse; margin-top: 15px; min-width: 600px; }
        th, td { text-align: left; padding: 12px; border-bottom: 1px solid #eee; font-size: 0.9rem; }
        th { background: #003366; color: white; }

  body { font-family: 'Segoe UI', Arial; background: #f0f2f5; margin: 0; color: #333; line-height: 1.6; }
header { background: #003366; color: white; padding: 15px; text-align: center; border-bottom: 5px solid #d9534f; }
nav { background: #222; padding: 10px; text-align: center; position: sticky; top: 0; z-index: 1000; }
nav a { color: #fff; margin: 0 8px; text-decoration: none; font-weight: bold; font-size: 0.85rem; }

.container { max-width: 1100px; margin: 10px auto; background: white; padding: 15px; border-radius: 8px; width: 92%; }
.card { border: 1px solid #ddd; padding: 15px; margin-bottom: 20px; border-radius: 8px; background: #fafafa; }

/* TABLE MOBILE FIX */
.table-wrapper { 
    width: 100%; 
    overflow-x: auto; /* Allows side-swiping on phone */
    -webkit-overflow-scrolling: touch; 
}

table { width: 100%; border-collapse: collapse; min-width: 500px; } /* Ensures table doesn't shrink too much */
th, td { text-align: left; padding: 10px; border-bottom: 1px solid #eee; font-size: 0.85rem; }
th { background: #003366; color: white; }

input { padding: 12px; margin: 8px 0; width: 100%; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; }
.btn { padding: 10px 15px; border: none; cursor: pointer; border-radius: 4px; font-weight: bold; color: white; display: inline-block; text-decoration: none; text-align: center; }
.btn-red { background: #d9534f; }
.btn-blue { background: #003366; }
.btn-green { background: #28a745; }

@media (max-width: 600px) {
    header h2 { font-size: 1.2rem; }
    .container { width: 96%; padding: 10px; }
    nav a { margin: 0 4px; font-size: 0.75rem; }
}