/* Custom tweaks for Bootstrap-based admin layout */

/* Ensure navbar stays at the top if you want it fixed */
.absolute-top {
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Footer styling */
.site-footer {
    padding: 1rem 0;
    font-size: 0.95rem;
    color: #555;
    border-top: 1px solid #e5e5e5;
}

    .site-footer .copy {
        text-align: center;
    }

/* Optional: Make main content stand out */
main[role="main"] {
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    padding: 2rem 1rem;
    margin-bottom: 2rem;
}

/* Responsive tweaks for navbar brand centering */
@media (max-width: 767.98px) {
    .navbar-brand {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

h1, h2, h3, h4, h5, h6 {
    color: #1a237e; /* Navy - change this to your preferred color */
}

/* ── Color Grade Picker ─────────────────────────────── */
.colorgrade-picker { min-height: 3rem; }
.colorgrade-swatch {
    width: 44px; height: 44px;
    border: 2px solid rgba(0,0,0,0.15);
    border-radius: 6px; padding: 0; cursor: pointer;
    transition: transform .1s ease, box-shadow .1s ease, border-color .1s ease;
    font-size: .75rem; color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.35); line-height: 1;
}
.colorgrade-swatch:hover { transform: scale(1.08); }
.colorgrade-swatch:focus { outline: none; box-shadow: 0 0 0 3px rgba(13,110,253,.35); }
.colorgrade-swatch.selected {
    border-color: #000;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
}
.colorgrade-swatch-none { width: auto; min-width: 64px; padding: 0 10px; }
.colorgrade-separator { border: none; border-top: 1px solid #dee2e6; }

/* Tools of Maturity teacher entry matrix */
.tom-scroll { overflow-x: auto; }

.tom-matrix th, .tom-matrix td { white-space: nowrap; vertical-align: middle; }

.tom-matrix .tom-tool-col {
    position: sticky;
    left: 0;
    background: #fff;
    min-width: 280px;
    max-width: 360px;
    white-space: normal;
    z-index: 1;
    box-shadow: 1px 0 0 #dee2e6;
}

.tom-matrix .tom-section th {
    background: #fef3c7;
    color: #000;
    font-weight: 600;
    position: sticky;
    left: 0;
}

.tom-matrix .tom-cell {
    position: relative;
    padding: 2px;
    text-align: center;
}

.tom-matrix .tom-cell input[type="number"] {
    width: 56px;
    text-align: center;
    border: 1px solid #ced4da;
    border-radius: 3px;
    padding: 2px 4px;
    -moz-appearance: textfield;
}

.tom-matrix .tom-cell input[type="number"]::-webkit-outer-spin-button,
.tom-matrix .tom-cell input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tom-matrix .tom-cell input[type="number"]:disabled {
    background: #f1f3f5;
    color: #adb5bd;
}

.tom-badge {
    position: absolute;
    top: -4px;
    right: 2px;
    font-size: 9px;
    line-height: 1;
    padding: 1px 3px;
    border-radius: 3px;
    pointer-events: none;
}

.tom-badge.saving { color: #6c757d; background: #e9ecef; }
.tom-badge.saved  { color: #fff; background: #198754; opacity: 1; transition: opacity 0.6s ease-out; }
.tom-badge.saved.fading { opacity: 0; }
.tom-badge.error  { color: #fff; background: #c0533a; pointer-events: auto; cursor: pointer; }