:root {
    --bg: #f3f6fb;
    --card: #ffffff;
    --muted: #6b7280;
    --accent: #0f766e;
    --school: #0b3b52;
}

* {
    box-sizing: border-box;
    font-family: Inter, system-ui, Arial, sans-serif
}

body {
    margin: 0;
    background: var(--bg);
    padding: 22px;
    color: #0b1720
}

.container {
    max-width: 1100px;
    margin: 0 auto
}

.panel {
    background: var(--card);
    padding: 18px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.08)
}

h1 {
    text-align: center;
    color: var(--school);
    margin: 0 0 6px;
    font-size: 20px
}

.helper {
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px
}

.controls-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center
}

input {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #dbeafe;
    min-width: 160px
}

.btn {
    background: linear-gradient(90deg, var(--accent), #059669);
    border: 0;
    color: white;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer
}

.mutebtn {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--muted);
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer
}

.mutebtn[disabled] {
    opacity: 0.5;
    cursor: not-allowed
}

.actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center
}

/* Report area: set to A4 size in mm so html2pdf maps exactly to PDF */
#reportWrap {
    margin-top: 16px;
    display: none;
    justify-content: center
}

.report {
    /* A4 width = 210mm, use padding for printable margins */
    width: 210mm;
    max-width: 100%;
    padding: 12mm 12mm 14mm 12mm;
    /* top/right/bottom/left in mm */
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
    position: relative;
    overflow: visible;
    margin: 0 auto;
    box-sizing: border-box;
}

/* define page size for print */
@page {
    size: A4 portrait;
    margin: 10mm;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    body {
        margin: 0;
    }

    .controls-row, .download-area {
        display: none;
    }

    .report {
        box-shadow: none;
        border: 0;
    }
}

/* Transparent watermark behind everything */
.report::before {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 70% auto;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    filter: saturate(0) brightness(1.05);
}

.report .content {
    position: relative;
    z-index: 1
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.logo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #e6eef6;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.school {
    text-align: center;
    flex: 1
}

.school h2 {
    margin: 0;
    font-size: 20px;
    color: var(--school)
}

.school p {
    margin: 4px 0;
    font-size: 12px;
    color: var(--muted)
}

.meta {
    margin-top: 12px;
    border-top: 2px solid #e6eef6;
    padding-top: 12px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.meta .row {
    flex: 1;
    min-width: 160px
}

table.rc {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    table-layout: fixed
}

table.rc th, table.rc td {
    border: 1px solid #cfd9e4;
    padding: 8px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.95);
    word-wrap: break-word
}

table.rc th {
    background: rgba(248, 250, 252, 0.95)
}

.center {
    text-align: center
}

.small {
    font-size: 12px;
    color: var(--muted)
}

.signs {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    gap: 12px
}

.sign {
    width: 48%;
    text-align: center
}

.sign img {
    max-width: 160px;
    max-height: 60px;
    object-fit: contain;
    display: block;
    margin: 0 auto 6px
}

/* ensure table rows don't get half-cut badly (best effort) */
tr, td, th {
    page-break-inside: avoid;
}

table {
    page-break-after: auto;
}

thead {
    display: table-header-group;
}

tfoot {
    display: table-footer-group;
}

.download-area {
    display: none;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px
}

/* HIDE by default */

.unpaid-msg {
    background: #fff3f2;
    border: 1px solid #ffd1cf;
    padding: 14px;
    border-radius: 8px;
    color: #9a1f0d;
    font-weight: 600;
    text-align: center;
    margin-top: 12px
}



  :root{
    --bg:#f3f6fb; --card:#ffffff; --muted:#6b7280; --accent:#0f766e; --school:#0b3b52;
    --maxContent:1100px;
  }
  *{box-sizing:border-box;font-family:Inter,system-ui,Arial,sans-serif}
  html,body{height:100%;margin:0}
  body{background:var(--bg);color:#0b1720;margin:0;padding:0 12px 40px}

  /* NAVBAR (if present) keep above container fixed) */
  .navbar{width:100%;position:sticky;top:0;z-index:40}
  .container{max-width:var(--maxContent);margin:0 auto;padding-top:18px}

  /* Main panel */
  .panel{background:var(--card);padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(2,6,23,0.06)}
  h1{font-size:20px;margin:0;text-align:center;color:var(--school)}
  .helper{font-size:13px;color:var(--muted);text-align:center;margin:6px 0 12px}

  .controls-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .controls-row input, .controls-row select{padding:11px;border-radius:8px;border:1px solid #e6eef6;background:#fff;min-width:150px;flex:1}
  .actions{display:flex;gap:8px}
  .btn{background:linear-gradient(90deg,var(--accent),#059669);border:0;color:#fff;padding:10px 14px;border-radius:8px;cursor:pointer}
  .mutebtn{background:transparent;border:1px solid rgba(0,0,0,0.06);padding:10px 12px;border-radius:8px;color:var(--muted);cursor:pointer}

  /* download area initially hidden (JS controls) */
  .download-area{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}

  /* Report: responsive — on screen take 100% (max 210mm for print) */
  #reportWrap{margin-top:16px;display:none;justify-content:center}
  .report{
    width:100%;
    max-width:210mm; /* keeps A4 width when printing/exporting */
    background:#fff;padding:18px;border:1px solid #ddd;border-radius:6px;
    box-shadow:0 8px 24px rgba(2,6,23,0.06);
    position:relative;overflow:visible;margin:0 auto;box-sizing:border-box;
  }

  .report::before{content:"";position:absolute;inset:0;background-repeat:no-repeat;background-position:center center;background-size:70%;opacity:0.08;pointer-events:none;z-index:0}
  .report .content{position:relative;z-index:1}

  .header{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .logo{width:72px;height:72px;border-radius:10px;overflow:hidden;border:3px solid #eef6fb;background:#fff;display:flex;align-items:center;justify-content:center}
  .logo img{width:100%;height:100%;object-fit:cover}
  .school{text-align:center;flex:1}
  .school h2{margin:0;font-size:20px;color:var(--school)}
  .school p{margin:4px 0;font-size:12px;color:var(--muted)}

  .meta{margin-top:12px;border-top:2px solid #e6eef6;padding-top:12px;display:flex;gap:12px;flex-wrap:wrap}
  .meta .row{flex:1;min-width:120px}

  table.rc{width:100%;border-collapse:collapse;margin-top:12px;table-layout:fixed}
  table.rc th, table.rc td{border:1px solid #d8e0ea;padding:10px;font-size:13px;background:rgba(255,255,255,0.95);word-wrap:break-word}
  table.rc th{background:#f8fafc}
  table.rc td.center, table.rc th.center{text-align:center}

  /* Make table horizontally scrollable on small screens */
  .table-responsive{width:100%;overflow:auto;margin-top:8px;-webkit-overflow-scrolling:touch}

  /* small elements */
  .small{font-size:12px;color:var(--muted)}
  .signs{display:flex;justify-content:space-between;margin-top:18px;gap:12px;flex-wrap:wrap}
  .sign{width:48%;text-align:center}
  .sign img{max-width:160px;max-height:60px;object-fit:contain;display:block;margin:0 auto 6px}

  .unpaid-msg{background:#fff3f2;border:1px solid #ffd1cf;padding:12px;border-radius:8px;color:#9a1f0d;font-weight:600;text-align:center;margin-top:12px}

  /* modal (edit etc) should be full-screen on very small */
  .modal .dialog{max-width:720px}
  @media (max-width:720px){
    .modal .dialog{width:94vw;padding:12px;border-radius:8px}
    .controls-row input{min-width:0}
    .controls-row{align-items:stretch}
    .actions{flex-direction:row;gap:8px}
    .btn, .mutebtn{padding:10px 8px;font-size:14px}
    .header{flex-direction:column;align-items:center;text-align:center;gap:6px}
    .logo{width:64px;height:64px}
    .meta{flex-direction:column;align-items:flex-start}
    .sign{width:100%}
    .school h2{font-size:18px}
    /* tables: scroll horizontally */
    .table-responsive{overflow:auto}
    table.rc th, table.rc td{padding:8px;font-size:12px}
  }

  /* make PDF friendly but allow mobile visualization */
  @media print{
    body{background:#fff}
    .controls-row, .download-area{display:none}
    .report{box-shadow:none;border:0;margin:0;padding:12mm}
    .report::before{opacity:0.08}
  }

  /* small tweaks for very small phones */
  @media (max-width:420px){
    .controls-row{gap:6px}
    .controls-row input{padding:10px}
    .nav-logo{font-size:14px}
  }