/* platform.css – small additions on top of the copied Portal styles */

/* Password toggle: closed-eye icon starts hidden (no inline style attributes under our CSP).
   login.js switches the icons through element.style, which the CSP allows. */
.eye-closed { display: none; }

/* Logout is a POST form with CSRF, not a link */
.inline-form { display: inline; margin: 0; }
button.sidebar-logout { background: none; border: 0; cursor: pointer; }
button.topbar-logout-btn { background: #ffffff; font-family: inherit; cursor: pointer; }


/* One-time API secret display */
.form-card--wide { max-width: 720px; }

.secret-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.secret-label {
    flex: 0 0 110px;
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.secret-value {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-family: Consolas, 'Courier New', monospace;
    font-size: 13px;
    word-break: break-all;
}



/* School form */
.form-card + .form-card { margin-top: 20px; }

.form-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 4px 0 14px;
}

.form-card > .form-section-title:not(:first-child),
form > .form-section-title:not(:first-child) { margin-top: 26px; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 12px;
}

.slug-input { display: flex; align-items: center; gap: 8px; }
.slug-input .form-input { flex: 1; min-width: 0; }
.slug-suffix { font-size: 13px; color: var(--gray-500); white-space: nowrap; }

.status-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0;
}

.card-note {
    font-size: 12px;
    color: var(--gray-500);
    line-height: 1.5;
    margin-bottom: 14px;
}


/* School admin: purchases filter bar */
.filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
}
.filter-bar .form-input { width: 260px; max-width: 100%; }
.filter-bar select.form-input { width: 170px; }

/* Pagination (CodeIgniter's default pager markup) */
.pagination {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    flex-wrap: wrap;
}
.pagination li a {
    display: block;
    padding: 7px 12px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    color: var(--gray-700);
    text-decoration: none;
    font-size: 13px;
    background: #ffffff;
}
.pagination li.active a {
    background: #1a1060;
    border-color: #1a1060;
    color: #ffffff;
}

/* Settings form */
.price-input { display: flex; align-items: center; gap: 8px; }
.price-input .form-input { flex: 1; min-width: 0; }
.price-prefix { font-weight: 700; color: var(--gray-500); }

.check-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background: var(--gray-50);
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
}
.check-row input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; }
.check-row strong { display: block; margin-bottom: 2px; }


/* Settings: options that apply only while PINs are on */
.settings-options { transition: opacity 0.15s ease; }
.settings-options.is-disabled { opacity: 0.55; }
.settings-options.is-disabled label { cursor: not-allowed; }