/* CHOONGSHIN LAWY HIGH SCHOOL – component styles (plain CSS; brand colours come from --p-* / --a-* vars). */

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border-radius: .6rem; padding: .5rem .95rem;
       font-size: .875rem; font-weight: 600; line-height: 1.25rem; border: 1px solid transparent; cursor: pointer;
       transition: background-color .15s, box-shadow .15s, color .15s, border-color .15s; white-space: nowrap; text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--p-200); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-sm { padding: .35rem .7rem; font-size: .8rem; border-radius: .5rem; }
.btn-primary { background: var(--p-600); color: #fff; box-shadow: 0 1px 2px rgba(28,25,23,.15); }
.btn-primary:hover { background: var(--p-700); }
.btn-accent { background: var(--a-500); color: var(--p-950); }
.btn-accent:hover { background: var(--a-400); }
.btn-light { background: #fff; color: #44403c; border-color: #d6d3d1; box-shadow: 0 1px 2px rgba(28,25,23,.05); }
.btn-light:hover { background: #fafaf9; border-color: #a8a29e; }
.btn-danger { background: #e11d48; color: #fff; }
.btn-danger:hover { background: #be123c; }
.btn-ghost { background: transparent; color: var(--p-700); }
.btn-ghost:hover { background: var(--p-50); }
.btn-success { background: #059669; color: #fff; }
.btn-success:hover { background: #047857; }

/* Cards */
.card { background: #fff; border: 1px solid #e7e5e4; border-radius: 1rem; box-shadow: 0 1px 2px rgba(28,25,23,.04); }
.card-header { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: 1rem 1.25rem; border-bottom: 1px solid #efedeb; }
.card-title { font-weight: 700; color: #1c1917; font-size: .95rem; }
.card-body { padding: 1.25rem; }

/* Forms */
.label { display: block; font-size: .78rem; font-weight: 600; color: #57534e; margin-bottom: .35rem; }
.label .req { color: #e11d48; }
.hint { font-size: .75rem; color: #78716c; margin-top: .25rem; }
select.select { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2378716c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right .5rem center; background-repeat: no-repeat; background-size: 1.25em 1.25em; padding-right: 2.25rem; }
.check { height: 1rem; width: 1rem; border-radius: .25rem; accent-color: var(--p-600); }

/* Tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.table thead th { position: sticky; top: 0; background: #fafaf9; color: #57534e; font-size: .72rem; font-weight: 700; text-transform: uppercase;
                  letter-spacing: .04em; text-align: left; padding: .7rem 1rem; border-bottom: 1px solid #e7e5e4; white-space: nowrap; }
.table tbody td { padding: .7rem 1rem; border-bottom: 1px solid #f5f5f4; vertical-align: middle; }
.table tbody tr:hover td { background: #fdfaf6; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: center; }
.table .right { text-align: right; }
.table th[data-sort] { cursor: pointer; user-select: none; }
.table th[data-sort]::after { content: '↕'; margin-left: .35rem; opacity: .35; font-size: .8em; }
.table th[data-sort].asc::after { content: '↑'; opacity: .9; }
.table th[data-sort].desc::after { content: '↓'; opacity: .9; }

/* DataTable controls */
.dt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .85rem 1.25rem; border-bottom: 1px solid #efedeb; }
.dt-search { position: relative; flex: 1 1 220px; max-width: 340px; }
.dt-search input { width: 100%; padding: .5rem .75rem .5rem 2.1rem; border: 1px solid #d6d3d1; border-radius: .6rem; font-size: .875rem; }
.dt-search input:focus { outline: none; border-color: var(--p-500); box-shadow: 0 0 0 3px var(--p-100); }
.dt-search svg { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: #a8a29e; }
.dt-size { font-size: .8rem; color: #78716c; display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.dt-size select { border: 1px solid #d6d3d1; border-radius: .5rem; padding: .3rem 1.6rem .3rem .5rem; font-size: .8rem; }
.dt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1.25rem; border-top: 1px solid #efedeb; font-size: .8rem; color: #78716c; }
.dt-pages { display: flex; gap: .25rem; flex-wrap: wrap; }
.dt-pages button { min-width: 2rem; height: 2rem; padding: 0 .5rem; border-radius: .5rem; border: 1px solid #e7e5e4; background: #fff; font-weight: 600; color: #44403c; }
.dt-pages button.active { background: var(--p-600); color: #fff; border-color: var(--p-600); }
.dt-pages button:disabled { opacity: .45; cursor: default; }
.dt-empty td { text-align: center; color: #a8a29e; padding: 2rem !important; }

/* Grade spreadsheet */
.sheet-input { width: 4.75rem; text-align: center; border: 1px solid #e7e5e4; border-radius: .45rem; padding: .35rem .25rem; font-size: .875rem;
               font-variant-numeric: tabular-nums; background: #fff; }
.sheet-input:focus { outline: none; border-color: var(--p-500); box-shadow: 0 0 0 3px var(--p-100); background: var(--p-50); }
.sheet-input.invalid { border-color: #f43f5e; background: #fff1f2; }
.sheet-input.dirty { border-color: var(--a-500); }
.tabnum { font-variant-numeric: tabular-nums; }

/* Modals */
.modal { display: none; }
.modal.open { display: flex; }
body.modal-open { overflow: hidden; }

/* Toasts */
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: .65rem; width: 100%; max-width: 24rem; padding: .8rem 1rem;
         border-radius: .85rem; background: #fff; border: 1px solid #e7e5e4; box-shadow: 0 12px 30px -8px rgba(28,25,23,.25);
         font-size: .875rem; animation: toast-in .25s ease-out; }
.toast .bar { width: .3rem; align-self: stretch; border-radius: 9px; }
.toast.success .bar { background: #10b981; } .toast.error .bar { background: #f43f5e; }
.toast.warning .bar { background: #f59e0b; } .toast.info .bar { background: var(--p-500); }
.toast.hide { animation: toast-out .2s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } }

/* Misc */
.stat-icon { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: .8rem; }
.prose-ann p { margin-bottom: .5rem; }
@media print { aside, header, #toasts, .no-print { display: none !important; } .lg\:pl-72 { padding-left: 0 !important; } }

/* Let grid/flex children shrink so wide tables scroll inside .table-wrap instead of widening the page on phones */
main .grid > *, main .card { min-width: 0; }
main { overflow-x: clip; }