@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* Shared DugsiHage typography and interface. Loaded after each page's styles. */
:root {
    --ui-font: 'Plus Jakarta Sans', system-ui, sans-serif;
    --ui-border: #e2e8f0;
    --ui-shadow: 0 1px 2px rgb(15 23 42 / 3%);
    --ui-accent: #434fe8;
    --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: #5560eb; 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 #7680f0; 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: #434fe8; box-shadow: 0 3px 8px rgb(37 99 235 / 16%); }
.sms-btn-primary:hover { background: #3340cc; 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: #e0e4fd; color: #1f3aa8; }
.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: #eef0fe; color: #3340cc; box-shadow: none; font-weight: 600;
}
.sms-sidebar-link.active i, .nav-link.active i { color: #434fe8 !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, #e0e4fd, 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; }
}

/* ── Portal home screens (student, teacher, parent) ───────────────────── */
body:has(.app-container) { background: #f5f6fa !important; }
.app-container { background: #f5f6fa !important; box-shadow: none !important; }
.header-top { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.88) !important; backdrop-filter: blur(14px); border-bottom: 1px solid #e8ebf2 !important; padding: 12px 18px !important; }
.header-logo { width: 42px !important; height: 42px !important; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #e8ebf2; padding: 4px; }
.header-title { color: #0f172a !important; font-weight: 800 !important; font-size: 15px !important; letter-spacing: -.01em; }
.avatar-circle { border-radius: 12px !important; border: 0 !important; background: #023899 !important; }

/* Greeting card */
.hero-banner { width: auto !important; margin: 16px 16px 4px !important; padding: 22px 22px 24px !important; border-radius: 22px; align-items: stretch !important; justify-content: flex-start !important; text-align: left; overflow: hidden !important; color: #fff;
  background: #023899 !important; box-shadow: none; }
.hero-banner .hero-date { position: relative; font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.72); margin: 0; }
.hero-banner .hero-hello { position: relative; font-size: 22px; font-weight: 800; line-height: 1.2; margin: 4px 0 0; letter-spacing: -.02em; color: #fff; }
.hero-banner .hero-sub { position: relative; font-size: 13px; color: rgba(255,255,255,.75); margin: 4px 0 0; }
.hero-banner .hero-chips { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.hero-banner .hero-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.hero-title-bar, .hero-image-placeholder { display: none !important; }

/* Shortcut tiles */
.grid-section-title { margin: 18px 18px 0; font-size: 13px; font-weight: 700; color: #64748b; }
.grid-container { padding: 12px 16px 28px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
.grid-item { min-width: 0; }
.item-label { overflow-wrap: anywhere; }
@media (min-width: 640px) { .grid-container { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; gap: 12px !important; } }
.grid-item { flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; gap: 12px !important; padding: 14px; background: #fff; border-radius: 16px; border: 1px solid #e8ebf2; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 20px -16px rgba(16,24,40,.18); transition: transform .15s, box-shadow .15s, border-color .15s !important; }
.grid-item:hover { transform: translateY(-2px); border-color: #c7cdfb; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 14px 26px -18px rgba(2,56,153,.35); }
.icon-box { width: 42px !important; height: 42px !important; border-radius: 12px !important; box-shadow: none !important; flex-shrink: 0; background: #eef0fe !important; }
.icon-box i { font-size: 18px !important; color: #2b39c9 !important; }
.grid-item:nth-child(6n+2) .icon-box { background: #ecfdf3 !important; } .grid-item:nth-child(6n+2) .icon-box i { color: #079455 !important; }
.grid-item:nth-child(6n+3) .icon-box { background: #f0f9ff !important; } .grid-item:nth-child(6n+3) .icon-box i { color: #0284c7 !important; }
.grid-item:nth-child(6n+4) .icon-box { background: #fffaeb !important; } .grid-item:nth-child(6n+4) .icon-box i { color: #dc6803 !important; }
.grid-item:nth-child(6n+5) .icon-box { background: #f4f3ff !important; } .grid-item:nth-child(6n+5) .icon-box i { color: #6938ef !important; }
.grid-item:nth-child(6n+6) .icon-box { background: #fff1f3 !important; } .grid-item:nth-child(6n+6) .icon-box i { color: #e31b54 !important; }
.item-label { color: #0f172a !important; font-size: 14px !important; font-weight: 700 !important; text-align: left !important; line-height: 1.25; }

/* Bottom navigation (phone) / side navigation (tablet and up) */
.bottom-nav { background: rgba(255,255,255,.96) !important; backdrop-filter: blur(14px); border-top: 1px solid #e8ebf2; padding: 8px 4px max(8px, env(safe-area-inset-bottom)) !important; box-shadow: 0 -8px 24px -18px rgba(15,23,42,.25); }
.bottom-nav .nav-item { color: #94a3b8 !important; font-size: 11px !important; font-weight: 600 !important; gap: 3px !important; border-radius: 12px; padding: 4px 6px; }
.bottom-nav .nav-item i { font-size: 18px !important; }
.bottom-nav .nav-item.active { color: #023899 !important; }
.bottom-nav .nav-item.active i { background: #eef0fe; border-radius: 999px; padding: 4px 14px; }
@media (min-width: 768px) {
  .hero-banner { margin: 24px 28px 4px !important; padding: 28px 30px !important; }
  .hero-banner .hero-hello { font-size: 26px; }
  .grid-section-title { margin: 22px 30px 0; }
  .grid-container { padding: 14px 28px 32px !important; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; gap: 14px !important; }
  .header-top { padding: 14px 28px !important; }
  .bottom-nav { background: #023899 !important; border-top: 0; box-shadow: none; padding: 24px 12px !important; gap: 2px; }
  .bottom-nav .nav-item { color: #b9c6e4 !important; font-size: 14px !important; padding: 10px 14px !important; gap: 12px !important; }
  .bottom-nav .nav-item i { font-size: 16px !important; width: 22px !important; }
  .bottom-nav .nav-item:hover { color: #fff !important; background: rgba(255,255,255,.07); }
  .bottom-nav .nav-item.active { color: #fff !important; background: rgba(255,255,255,.13); }
  .bottom-nav .nav-item.active i { background: none; padding: 0; }
}

/* ── Portal inner pages: header, back button, menu ────────────────────── */
.header-top { display: flex !important; align-items: center; gap: 12px; color: #0f172a !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: -.01em; }
.header-top > div:not(.header-title):not([style]) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back-btn { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 12px; background: #eef0fe; color: #023899 !important; font-size: 16px !important; text-decoration: none; transition: background-color .15s; }
.back-btn:hover { background: #e0e4fd; }
.back-btn:active { transform: scale(.96); }
.bottom-nav { position: fixed !important; left: 0 !important; right: 0; bottom: 0; transform: none !important; width: 100% !important; max-width: 100% !important; display: flex; justify-content: space-around; z-index: 50; }
.bottom-nav .nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; }
body:has(.bottom-nav) .app-container { padding-bottom: 96px !important; }
@media (min-width: 768px) {
  .bottom-nav { top: 0; bottom: 0; width: 250px !important; max-width: 250px !important; height: 100vh; flex-direction: column; justify-content: flex-start; }
  .bottom-nav .nav-item { flex-direction: row; justify-content: flex-start; width: calc(100% - 24px); margin-inline: 12px; }
  body:has(.bottom-nav) .app-container { margin-left: 250px !important; width: calc(100% - 250px) !important; padding-bottom: 32px !important; }
}
/* Portal data tables (attendance, results) */
.app-container .content-area table:not(.sms-table) { width: 100%; border-collapse: separate !important; border-spacing: 0; background: #fff !important; border: 1px solid #e8ebf2 !important; border-radius: 16px !important; overflow: hidden; box-shadow: none !important; }
.app-container .content-area table:not(.sms-table) th { background: #f8fafc !important; color: #64748b !important; font-size: 12px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; border: 0 !important; border-bottom: 1px solid #e8ebf2 !important; padding: 12px 16px !important; }
.app-container .content-area table:not(.sms-table) td { background: #fff !important; border: 0 !important; border-bottom: 1px solid #f1f3f8 !important; padding: 13px 16px !important; color: #1e293b !important; font-size: 14px; font-weight: 600 !important; }
.app-container .content-area table:not(.sms-table) tr { background: #fff !important; }
.app-container .content-area table:not(.sms-table) tbody tr:last-child td { border-bottom: 0 !important; }