/* Add styles here */

/* ===== Global Typography ===== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
}

/* ===== Card Styles ===== */
.card {
    background: white;
    padding: 1.25rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* ===== Section Headers ===== */
.section-header {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.875rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
}

/* ===== Link Hover Effects ===== */
#class-info-display a,
#assignments-container a,
#schedule-table-container a,
#links-container a {
    transition: color 0.15s ease;
}

#class-info-display a:hover,
#assignments-container a:hover,
#links-container a:hover {
    color: #3b82f6;
}

/* ===== Scrollbar Styling ===== */
.max-h-128::-webkit-scrollbar,
.max-h-64::-webkit-scrollbar {
    width: 6px;
}

.max-h-128::-webkit-scrollbar-track,
.max-h-64::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.max-h-128::-webkit-scrollbar-thumb,
.max-h-64::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.max-h-128::-webkit-scrollbar-thumb:hover,
.max-h-64::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Generic multi-column helpers */
.columns-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 768px) {
    .columns-2 {
        grid-template-columns: 1fr;
    }
}

.columns-2 img {
    max-width: 100%;
    height: auto;
}

/* Make assignment optgroup labels readable */
#content-assignment optgroup {
    color: #111 !important;
    font-weight: 700;
}

#content-assignment option {
    color: #111;
}

#content-assignment optgroup[label^='🟠'] {
    color: #a63e00 !important;
}

#content-assignment optgroup[label^='🟣'] {
    color: #5b21b6 !important;
}

/* Ensure images inside the editor honor inline sizing/alignment */
.ql-editor img {
    max-width: 100%;
    height: auto;
}

/* Ensure image conforms to resize overlay box by limiting to its container width */
.ql-editor .ql-image-resize img,
.ql-editor img.ql-image {
    max-width: 100% !important;
}

/* Prevent late layout shifts on image load by reserving space */
.ql-editor img[style*="width"] {
    display: inline-block;
}

/* Apply percent-based widths quickly on load */
/* Note: attr() width is not supported cross-browser; widths are applied via JS */

/* Normalize figures/tables pasted from external sources */
figure {
    margin: 0 0 1rem 0;
}

figure img {
    height: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

td,
th {
    border: 1px solid #e5e7eb;
    padding: 0.5rem;
    vertical-align: top;
}

/* Make schedule table show only horizontal rules (match prior look) */
#schedule-table-container td,
#schedule-table-container th {
    border-left: none;
    border-right: none;
}

/* Remove custom Quill buttons (no longer used) */
.ql-toolbar .ql-pasteHtml,
.ql-toolbar .ql-columns2 {
    display: none !important;
}

/* Ensure links in the main feed excerpts are visibly clickable (scope to excerpt only) */
#recent-posts .line-clamp-3 a {
    text-decoration: underline;
    color: #1d4ed8;
    /* blue-700 */
}

#recent-posts .line-clamp-3 a:hover {
    text-decoration: underline;
}

/* Pages feed excerpts */
#recent-pages .line-clamp-3 a {
    text-decoration: underline;
    color: #1d4ed8;
}

/* Underline clickable names (students) in the sidebar feed */
#class-info-display a,
#class-info-display .user-link {
    text-decoration: none;
}

/* Underline clickable assignments in the sidebar feed */
#assignments-container a,
#assignments-container .assignment-link {
    text-decoration: none;
}

/* Remove underline for links in schedule table */
#schedule-table-container a {
    text-decoration: none;
}

/* Underline links within feed content body only (avoid buttons) */
#assignment-content-container .prose a,
#user-content-container .prose a {
    text-decoration: underline;
    color: #1d4ed8;
}

#assignment-content-container .prose a:hover,
#user-content-container .prose a:hover {
    text-decoration: underline;
}

/* Keep button-like anchors readable */
a.bg-gray-600,
a.bg-blue-600 {
    color: #ffffff !important;
    text-decoration: none;
}

/* Header title link styles are handled via inline classes in markup */

/* Limit image size in announcements on main page */
#announcements-container img {
    max-width: 25%;
    height: auto;
}

/* Custom max-height for taller columns (Tailwind 2.x doesn't include max-h-128) */
.max-h-128 {
    max-height: 32rem; /* 512px - taller than max-h-96 (384px) */
}