.nbsp-portal-content {
max-width: 1080px;
margin: 0 auto;
padding: 24px 16px 40px;
box-sizing: border-box;
}
.nbsp-top-nav {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.nbsp-nav-pill {
display: inline-block;
padding: 8px 14px;
border-radius: 6px;
background: #c99a18;
color: #fff;
text-decoration: none;
font-size: 13px;
line-height: 1;
}
.nbsp-nav-pill.active { background: #a37a0d; }
.nbsp-portal-content h2 {
margin: 0 0 18px;
font-size: 28px;
color: #b58a1b;
}
.nbsp-portal-content h3 {
margin: 0 0 12px;
font-size: 20px;
color: #b58a1b;
}
.nbsp-grid-cards,
.nbsp-stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.nbsp-stat-grid { margin: 0 0 18px; }
.nbsp-simple-card,
.nbsp-table-card,
.nbsp-stat-card,
.nbsp-form-wrap {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 16px;
box-shadow: 0 4px 14px rgba(0,0,0,.04);
}
.nbsp-stat-label { font-size: 12px; color: #667085; }
.nbsp-stat-value { font-size: 26px; font-weight: 700; margin-top: 6px; }
.nbsp-table-card { overflow: auto; }
.nbsp-data-table {
width: 100%;
border-collapse: collapse;
}
.nbsp-data-table th,
.nbsp-data-table td {
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid #edf2f7;
font-size: 14px;
}
.nbsp-data-table th {
font-size: 12px;
color: #667085;
text-transform: uppercase;
}
.nbsp-form-page {
display: flex;
justify-content: center;
padding: 24px 16px 40px;
}
.nbsp-form-wrap {
width: 100%;
max-width: 760px;
}
.nbsp-form-centered { margin: 0 auto; }
.nbsp-form-wrap form p { margin: 0 0 14px; }
.nbsp-form-wrap label {
display: block;
font-weight: 600;
color: #1f2937;
}
.nbsp-form-wrap input[type="text"],
.nbsp-form-wrap input[type="date"],
.nbsp-form-wrap input[type="time"],
.nbsp-form-wrap input[type="number"],
.nbsp-form-wrap select,
.nbsp-form-wrap textarea {
width: 100%;
max-width: 100%;
min-height: 40px;
margin-top: 6px;
padding: 10px 12px;
border: 1px solid #d0d7de;
border-radius: 8px;
box-sizing: border-box;
font-size: 14px;
}
.nbsp-form-wrap textarea {
min-height: 110px;
resize: vertical;
}
.nbsp-portal-content .button,
.nbsp-portal-content button,
.nbsp-portal-content input[type="submit"],
.nbsp-form-wrap .button,
.nbsp-form-wrap button,
.nbsp-form-wrap input[type="submit"] {
display: inline-block;
min-height: 38px;
padding: 9px 16px;
border: 0;
border-radius: 999px;
background: #c99a18;
color: #fff;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.nbsp-card-actions { margin: 14px 0 0; }
.notice.notice-success,
.notice.notice-error {
margin: 0 0 14px;
padding: 10px 12px;
border-radius: 8px;
}
.notice.notice-success { background: #ecfdf3; border: 1px solid #abefc6; }
.notice.notice-error { background: #fef3f2; border: 1px solid #fecdca; }
@media (max-width: 767px) {
.nbsp-portal-content,
.nbsp-form-page {
padding: 18px 12px 32px;
}
.nbsp-portal-content h2 { font-size: 24px; }
.nbsp-form-wrap { max-width: 100%; padding: 14px; }
.nbsp-data-table th,
.nbsp-data-table td {
padding: 8px 10px;
font-size: 13px;
}
.nbsp-portal-content .button,
.nbsp-portal-content button,
.nbsp-portal-content input[type="submit"],
.nbsp-form-wrap .button,
.nbsp-form-wrap button,
.nbsp-form-wrap input[type="submit"] {
width: 100%;
text-align: center;
}
}
.nbsp-table-title {
font-size: 16px;
font-weight: 700;
color: #1f2937;
margin: 0 0 12px;
}
.nbsp-form-hint {
margin-top: -4px;
color: #667085;
font-size: 13px;
line-height: 1.5;
}
.nbsp-geo-status {
color: #667085;
font-size: 13px;
}
@media (min-width: 768px) {
.nbsp-form-wrap {
max-width: 680px;
}
}
@media (max-width: 767px) {
.nbsp-form-wrap input[type="text"],
.nbsp-form-wrap input[type="number"],
.nbsp-form-wrap select,
.nbsp-form-wrap textarea {
font-size: 16px;
}
}