/* Shared Y SYSTEM typography and interface. Loaded after each page's styles. */
:root {
    --ui-font: 'Poppins', sans-serif;
    --ui-border: #e2e8f0;
    --ui-shadow: 0 1px 2px rgb(15 23 42 / 3%);
    --ui-accent: #2563eb;
    --ui-canvas: #f5f7fb;
    --ui-ink: #1e293b;
    --ui-muted: #64748b;
}
html { scroll-behavior: smooth; }
body, .font-sans, input, select, textarea, button {
    font-family: var(--ui-font) !important;
}
body { color: #334155; -webkit-font-smoothing: antialiased; line-height: 1.6; }
button, input, select, textarea { font-size: inherit; }
h1, h2, h3, h4 { line-height: 1.3; letter-spacing: -.025em; }
.font-black, .font-extrabold { font-weight: 700 !important; }
.uppercase:not(input):not(textarea), .sms-label, .sms-table thead th,
.input-group label { text-transform: none !important; letter-spacing: .015em !important; }
.tracking-widest, .tracking-wider { letter-spacing: .025em !important; }
.sms-label, .input-group label { font-size: .75rem; font-weight: 600; }
.sms-table { border-collapse: collapse; }
.sms-table thead th { font-size: .75rem; font-weight: 600; color: #475569; padding: .85rem 1rem; }
.sms-table tbody td { padding: .8rem 1rem; }
.sms-table tbody tr { transition: background-color 160ms ease; }
.sms-id-badge {
    display: inline-flex; align-items: center; white-space: nowrap;
    padding: .35rem .65rem; border-radius: .5rem;
    font-size: .75rem; font-weight: 600; line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.sms-directory-table { min-width: 960px; }
.sms-directory-table th { white-space: nowrap; }
.sms-directory-table td { vertical-align: middle; }
.sms-directory-table th:first-child, .sms-directory-table td:first-child { min-width: 240px; }
.sms-directory-table th:nth-child(2), .sms-directory-table td:nth-child(2) { width: 130px; min-width: 130px; }
.sms-directory-table td:last-child { white-space: nowrap; }
.sms-directory-table td:last-child > div { flex-wrap: nowrap; }
.sms-directory-table td:last-child a { flex-shrink: 0; }
/* Students include a selection column before the directory's name and ID. */
.sms-students-table th:first-child, .sms-students-table td:first-child {
    width: 48px; min-width: 48px;
}
.sms-students-table th:nth-child(2), .sms-students-table td:nth-child(2) {
    width: auto; min-width: 260px;
}
.sms-students-table th:nth-child(3), .sms-students-table td:nth-child(3) {
    width: 130px; min-width: 130px;
}
.sms-students-table th:nth-child(4), .sms-students-table td:nth-child(4) {
    min-width: 170px; white-space: nowrap;
}
.sms-students-table th:last-child, .sms-students-table td:last-child {
    width: 124px; min-width: 124px;
}
.sms-students-table .avatar-circle { flex-shrink: 0; }
.sms-students-table td:nth-child(2) p { overflow-wrap: anywhere; }
.sms-teachers-table { min-width: 1080px; }
.sms-teachers-table td:nth-child(3) { min-width: 240px; }
.sms-teachers-table td:nth-child(4) { min-width: 170px; }
.sms-teachers-table td:nth-child(5) { white-space: nowrap; }
.sms-card, .portal-card, .stat-card, .form-card {
    border: 1px solid var(--ui-border); border-radius: 1rem; box-shadow: var(--ui-shadow);
}
/* Consistent full outlines instead of colored stripes on one card edge. */
.sms-card, .portal-card, .stat-card, .form-card,
.notice-card, .notice-card.pinned, .fee-card, .fee-card[class*="status-"], .overall-box {
    border: 1px solid var(--ui-border) !important;
    border-radius: 12px;
    box-shadow: var(--ui-shadow) !important;
}
.notice-title { font-weight: 600; }
.notice-card .pin-icon { color: #64748b; }
.target-badge { text-transform: none; font-weight: 500; background: #f1f5f9; }
.notice-card, .sms-card.announcement-card {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 4px rgb(15 23 42 / 3%) !important;
}
.notice-card.pinned, .sms-card.announcement-card.pinned {
    border: 1.5px solid #93b4dd !important;
    background: #fbfdff;
}
.notice-header { gap: 16px; }
.notice-body { line-height: 1.65; overflow-wrap: anywhere; }
.notice-title { overflow-wrap: anywhere; }
.notice-date, .target-badge { border: 1px solid #e2e8f0; }
.notice-card.pinned .pin-icon { color: #416da4; }
.chat-message-bubble { border: 1px solid #cbd5e1 !important; box-shadow: none !important; }
.chat-message-bubble.is-outgoing { border-color: #4338ca !important; }
@media (max-width: 480px) {
    .notice-header { flex-wrap: wrap; gap: 8px; }
}
.stat-card { padding: 1.5rem; }
.sms-input, .input-group input, .input-group select, .input-group textarea {
    border: 1px solid #cbd5e1; border-radius: .75rem;
    padding: .7rem .9rem; font-size: .875rem; line-height: 1.5;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
input::placeholder, textarea::placeholder { color: #94a3b8; opacity: 1; }
.sms-input:focus, .input-group input:focus, .input-group select:focus, .input-group textarea:focus {
    border-color: #3b82f6; box-shadow: 0 0 0 3px rgb(59 130 246 / 12%); outline: none;
}
a, button, .sms-sidebar-link, .nav-link, .grid-item {
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease,
        box-shadow 160ms ease, transform 160ms ease;
}
:is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #60a5fa; outline-offset: 3px;
}
button:not(:disabled), select { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
.sms-btn-primary, .sms-btn-secondary, .sms-btn-danger, .btn-primary {
    border-radius: .75rem; font-weight: 600; min-height: 40px;
}
.sms-btn-primary { background: #2563eb; box-shadow: 0 3px 8px rgb(37 99 235 / 16%); }
.sms-btn-primary:hover { background: #1d4ed8; transform: translateY(-1px); }
.sms-btn-primary, .sms-btn-secondary, .sms-btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    line-height: 1.4; padding: .65rem 1rem; white-space: nowrap;
}
.sms-btn-secondary { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.sms-btn-secondary:hover { background: #e2e8f0; color: #1e293b; }
.sms-btn-danger { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }
.sms-badge-green { background: #dcfce7; color: #166534; }
.sms-badge-red { background: #fee2e2; color: #991b1b; }
.sms-badge-yellow { background: #fef3c7; color: #92400e; }
.sms-badge-blue { background: #dbeafe; color: #1e40af; }
.avatar-circle { flex-shrink: 0; }
#smsColumn > main { background: var(--ui-canvas); min-width: 0; }
#smsColumn > main > .sms-card { margin-bottom: 1.25rem; }
#smsColumn > header { gap: 1rem; }
#smsColumn main .text-gray-400, .content-area .text-gray-400 { color: var(--ui-muted); }
#smsColumn main .text-gray-800, .content-area .text-gray-800 { color: var(--ui-ink); }
#smsColumn .sms-card form > .sms-input.w-auto { width: auto; max-width: 100%; }
#smsColumn .sms-card form > div.flex-1 { min-width: min(100%, 12rem); }
#smsColumn .sms-card form input { min-width: 0; }
.sms-table input[type=checkbox] { width: 1rem; height: 1rem; accent-color: var(--ui-accent); vertical-align: middle; }
.sms-table td:last-child a[title] { min-width: 32px; min-height: 32px; }
.content-area { line-height: 1.6; }
.header-top { box-shadow: 0 1px 0 rgb(15 23 42 / 8%); }
.bottom-nav .nav-item { border-radius: .75rem; }
.bottom-nav .nav-item.active { background: rgb(255 255 255 / 12%); }
@media (min-width: 768px) {
    .bottom-nav { gap: .35rem; }
    .bottom-nav .nav-item { width: calc(100% - 24px); margin-inline: 12px; }
}
@media (min-width: 640px) and (max-width: 1279px) {
    #smsColumn > header { flex-wrap: wrap; }
    #smsColumn > header > div:last-child { flex-wrap: wrap; gap: .75rem; }
    #sms-search-form { width: 13rem; }
}
@media (max-width: 640px) {
    #smsColumn .sms-card form > .sms-input.w-auto { width: 100%; }
    #smsColumn .sms-card form > div.flex-1 { flex-basis: 100%; }
    #smsColumn .sms-card > .flex.justify-between { flex-wrap: wrap; gap: .75rem; padding: 1rem; }
    #smsColumn .sms-card > .flex.justify-between > .flex { flex-wrap: wrap; }
    #smsColumn > header { padding-inline: 1rem; }
    .sms-table td:last-child a[title] { min-width: 40px; min-height: 40px; }
    .content-area { padding: 16px; }
}
.sms-sidebar-link, .nav-link { font-weight: 500; border-radius: .75rem; }
.sms-sidebar-link.active, .nav-link.active {
    background: #eff6ff; color: #1d4ed8; box-shadow: none; font-weight: 600;
}
.sms-sidebar-link.active i, .nav-link.active i { color: #2563eb !important; }
#smsSidebar, #portal-sidebar { border-color: var(--ui-border); }
#smsSidebar nav { padding-top: 1rem; }
#smsSidebar nav a { margin-bottom: .25rem; padding-top: .65rem; padding-bottom: .65rem; }
#smsSidebar h2, #portal-sidebar h2 { font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }
#smsSidebar h2 + p { font-size: .625rem; line-height: 1.5; }
.app-container { box-shadow: none; }
.header-top { min-height: 72px; }
.form-title { font-weight: 600; }
.icon-box { border-radius: 1.25rem; box-shadow: 0 6px 16px rgb(15 23 42 / 10%); }
.bottom-nav { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.auth-page {
    background: radial-gradient(ellipse at top left, #dbeafe, transparent 55%), #f8fafc !important;
    min-height: 100dvh;
}
.auth-page > form, .auth-page > div.bg-white {
    border: 1px solid var(--ui-border); box-shadow: 0 20px 60px rgb(30 64 175 / 9%);
}
.auth-page input:not([type=checkbox]):not([type=radio]) {
    border: 1px solid #cbd5e1; border-radius: .75rem; min-height: 48px;
}
.auth-page label { font-weight: 500; }
.auth-page button[type=submit], .auth-page form > button { min-height: 48px; }
@media (hover: hover) {
    .stat-card:hover { transform: none; }
    .grid-item:hover { transform: translateY(-3px); }
}
@media (max-width: 640px) {
    input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
    .sms-table thead th, .sms-table tbody td { padding: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
    body { color: #000; }
    .sms-card, .portal-card, .stat-card, .form-card { box-shadow: none; }
}