/* ==========================================================================
   BARK — portal surfaces: auth, profile, dashboards, chat, attendance,
   daily reports, payroll, finance tools and receipts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Auth
   -------------------------------------------------------------------------- */

.auth-section{display:grid;justify-items:center;padding-block:var(--tp-space-8)}

.auth-card{
    display:grid;
    justify-items:center;
    gap:var(--tp-space-4);
    width:100%;
    max-width:460px;
    padding:var(--tp-space-7) var(--tp-space-6);
    background:var(--tp-surf);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-lg);
    box-shadow:var(--tp-sh)
}

.auth-card h1{margin:0;text-align:center}

.auth-logo{width:96px;height:96px;object-fit:contain;border-radius:var(--tp-r)}

.auth-card .form-panel{width:100%}

.auth-card .button{width:100%}

/* --------------------------------------------------------------------------
   Profile
   -------------------------------------------------------------------------- */

.profile-hero{
    display:flex;
    align-items:center;
    gap:var(--tp-space-6);
    margin-top:var(--tp-space-6);
    padding:var(--tp-space-7);
    background:var(--tp-ink);
    color:var(--tp-surf);
    border-radius:var(--tp-r-lg)
}

.profile-hero h1{color:var(--tp-surf);margin:0}

.profile-hero .section-kicker{color:var(--tp-acc)}

.profile-hero .section-kicker::before{background:var(--tp-acc)}

.profile-avatar{
    display:grid;
    place-items:center;
    width:96px;
    height:96px;
    flex:none;
    border-radius:var(--tp-r-btn);
    background:var(--tp-acc);
    color:var(--tp-acc-ink);
    font-family:var(--tp-font-display);
    font-size:var(--tp-text-3xl);
    font-weight:var(--tp-w-display);
    line-height:1
}

.profile-role-list{display:flex;flex-wrap:wrap;gap:var(--tp-space-2);margin-top:var(--tp-space-3)}

.profile-role-list>span{
    padding:var(--tp-space-1) var(--tp-space-3);
    border:var(--tp-bw) solid var(--tp-acc);
    border-radius:var(--tp-r-btn);
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--tp-surf)
}

.profile-role-list>span.is-active{border-color:var(--tp-acc);background:var(--tp-acc);color:var(--tp-acc-ink)}

.profile-role-list>span.is-blocked{border-color:var(--tp-surf);color:var(--tp-surf);opacity:.7}

.profile-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
    gap:var(--tp-space-4)
}

.profile-stats>article{
    display:grid;
    gap:var(--tp-space-1);
    padding:var(--tp-space-5);
    background:var(--tp-surf);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-lg)
}

.profile-stats i{font-size:var(--tp-text-lg);color:var(--tp-acc-2)}

.profile-stats>article>span{
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--tp-mute)
}

.profile-stats>article>strong{
    font-family:var(--tp-font-display);
    font-size:var(--tp-text-xl);
    font-weight:var(--tp-w-display);
    letter-spacing:var(--tp-track-display)
}

.profile-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
    gap:var(--tp-space-5);
    padding-block:0
}

.profile-panel{
    display:grid;
    align-content:start;
    gap:var(--tp-space-4);
    padding:var(--tp-space-6);
    background:var(--tp-surf);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-lg)
}

.profile-panel__heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--tp-space-4)
}

.profile-panel__heading h2{margin:0;font-size:var(--tp-text-lg)}

.profile-panel__heading i{font-size:var(--tp-text-lg);color:var(--tp-acc-2)}

.profile-details{display:grid;gap:var(--tp-space-3);margin:0}

.profile-details>div{
    display:grid;
    grid-template-columns:minmax(0,140px) minmax(0,1fr);
    gap:var(--tp-space-3);
    padding-bottom:var(--tp-space-3);
    border-bottom:var(--tp-bw) solid var(--tp-line)
}

.profile-details>div:last-child{padding-bottom:0;border-bottom:0}

.profile-details dt{
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--tp-mute)
}

.profile-details dd{
    display:flex;
    flex-wrap:wrap;
    gap:var(--tp-space-2);
    margin:0;
    font-weight:600
}

.profile-pill{
    padding:var(--tp-space-1) var(--tp-space-3);
    background:var(--tp-surf-2);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-btn);
    font-size:var(--tp-text-sm)
}

.profile-form{align-items:start}

.profile-form .button{justify-self:start}

.profile-shortcuts{padding-block:var(--tp-space-6)}

.profile-shortcut-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
    gap:var(--tp-space-4)
}

.profile-shortcut-grid>a{
    display:flex;
    align-items:center;
    gap:var(--tp-space-3);
    min-height:var(--tp-tap);
    padding:var(--tp-space-4) var(--tp-space-5);
    background:var(--tp-surf);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-lg);
    font-weight:700;
    transition:transform var(--tp-dur) var(--tp-ease),border-color var(--tp-dur) var(--tp-ease)
}

.profile-shortcut-grid>a:hover{transform:translateY(-3px);border-color:var(--tp-acc)}

.profile-shortcut-grid i{color:var(--tp-acc-2);font-size:var(--tp-text-lg)}

/* --------------------------------------------------------------------------
   Dashboards
   -------------------------------------------------------------------------- */

.dashboard-hero{
    display:grid;
    gap:var(--tp-space-6);
    margin-top:var(--tp-space-6);
    padding:var(--tp-space-7);
    background:var(--tp-ink);
    color:var(--tp-surf);
    border-radius:var(--tp-r-lg)
}

.dashboard-hero>div:first-child{display:grid;justify-items:start;gap:var(--tp-space-2)}

.dashboard-hero h1{color:var(--tp-surf);margin:0}

.dashboard-hero .section-kicker{color:var(--tp-acc)}

.dashboard-hero .section-kicker::before{background:var(--tp-acc)}

.dashboard-hero>div>p{color:var(--tp-acc);margin:0}

.dashboard-logo{
    position:absolute;
    top:var(--tp-space-6);
    inset-inline-end:var(--tp-space-6);
    width:72px;
    height:72px;
    object-fit:contain;
    opacity:.9;
    border-radius:var(--tp-r)
}

.dashboard-hero{position:relative}

.metric-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));
    gap:var(--tp-space-4)
}

.metric-card{
    display:grid;
    gap:var(--tp-space-1);
    padding:var(--tp-space-5);
    background:var(--tp-surf);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-lg);
    color:var(--tp-ink)
}

.metric-card>span{
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--tp-mute)
}

.metric-card>strong{
    font-family:var(--tp-font-display);
    font-size:var(--tp-text-2xl);
    font-weight:var(--tp-w-display);
    line-height:1;
    letter-spacing:var(--tp-track-display)
}

.dashboard-section{padding-block:var(--tp-space-7)}

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
    gap:var(--tp-space-5);
    padding-block:var(--tp-space-5)
}

.card-heading{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--tp-space-3);
    padding-bottom:var(--tp-space-3);
    border-bottom:2px solid var(--tp-line)
}

.card-heading h2{margin:0;font-size:var(--tp-text-lg)}

.list-row{
    display:grid;
    gap:var(--tp-space-1);
    padding:var(--tp-space-4) 0;
    border-bottom:var(--tp-bw) solid var(--tp-line)
}

.list-row:last-child{border-bottom:0;padding-bottom:0}

.list-row>strong{font-size:var(--tp-text-base)}

.list-row>span{
    font-size:var(--tp-text-sm);
    color:var(--tp-mute);
    overflow-wrap:anywhere
}

.list-row-elevated{
    padding:var(--tp-space-4) var(--tp-space-5);
    background:var(--tp-surf-2);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r);
    transition:transform var(--tp-dur) var(--tp-ease),border-color var(--tp-dur) var(--tp-ease)
}

.list-row-elevated:hover{transform:translateX(4px);border-color:var(--tp-acc)}

[dir="rtl"] .list-row-elevated:hover{transform:translateX(-4px)}

.student-card{gap:var(--tp-space-2)}

.student-card .status-pill{justify-self:start;margin-top:var(--tp-space-2)}

.report-photo-grid,
.report-photo-strip{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,96px),1fr));
    gap:var(--tp-space-2);
    margin-top:var(--tp-space-2)
}

.report-photo-grid a,
.report-photo-strip a{display:block;overflow:hidden;border-radius:var(--tp-r-sm)}

.report-photo-grid img,
.report-photo-strip img{
    display:block;
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
    border-radius:var(--tp-r-sm);
    filter:var(--tp-img-filter)
}

/* --------------------------------------------------------------------------
   Notification cards
   -------------------------------------------------------------------------- */

.notification-list{display:grid;gap:var(--tp-space-4)}

.notification-card{
    position:relative;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:var(--tp-space-4);
    align-items:start;
    padding:var(--tp-space-5);
    background:var(--tp-surf);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-lg)
}

.notification-card.is-unread{border-inline-start:6px solid var(--tp-acc)}

.notification-card__icon{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    flex:none;
    border-radius:var(--tp-r);
    background:var(--tp-surf-2);
    border:var(--tp-bw) solid var(--tp-line);
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.04em
}

.notification-card.is-unread .notification-card__icon{background:var(--tp-acc);border-color:var(--tp-acc);color:var(--tp-acc-ink)}

.notification-card__body{display:grid;gap:var(--tp-space-2);min-width:0}

.notification-card__body h3{margin:0;font-size:var(--tp-text-md)}

.notification-card__body p{margin:0;color:var(--tp-mute);font-size:var(--tp-text-sm)}

.notification-card__meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--tp-space-2);
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--tp-mute)
}

.notification-card__unread{
    padding:var(--tp-space-1) var(--tp-space-3);
    border-radius:var(--tp-r-btn);
    background:var(--tp-acc);
    color:var(--tp-acc-ink);
    font-weight:700
}

.notification-card__context{display:flex;flex-wrap:wrap;gap:var(--tp-space-2)}

.notification-card__context>span{
    padding:var(--tp-space-1) var(--tp-space-3);
    background:var(--tp-surf-2);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-btn);
    font-size:var(--tp-text-xs);
    color:var(--tp-mute)
}

.notification-card__attachments{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,84px),1fr));
    gap:var(--tp-space-2)
}

.notification-card__attachments img{
    display:block;
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
    border-radius:var(--tp-r-sm);
    filter:var(--tp-img-filter)
}

.notification-card__actions{display:grid;gap:var(--tp-space-2);justify-items:end}

.notification-card.is-compact{grid-template-columns:auto minmax(0,1fr);padding:var(--tp-space-4);gap:var(--tp-space-3)}

.notification-card.is-compact .notification-card__actions{grid-column:2;justify-items:start}

.notification-card.is-compact .notification-card__icon{width:36px;height:36px}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.portal-pagination{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--tp-space-4);
    margin-top:var(--tp-space-6);
    padding-top:var(--tp-space-5);
    border-top:var(--tp-bw) solid var(--tp-line);
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--tp-mute)
}

.portal-pagination__links,
.pagination{display:flex;flex-wrap:wrap;align-items:center;gap:var(--tp-space-1);margin:0;padding:0}

.portal-pagination__links>a,
.page-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:var(--tp-tap);
    min-height:var(--tp-tap);
    padding:0 var(--tp-space-3);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-btn);
    background:var(--tp-surf);
    color:var(--tp-ink);
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-sm);
    font-weight:700;
    transition:background var(--tp-dur) var(--tp-ease),color var(--tp-dur) var(--tp-ease),border-color var(--tp-dur) var(--tp-ease)
}

.portal-pagination__links>a:hover,
.page-link:hover{background:var(--tp-acc);border-color:var(--tp-acc);color:var(--tp-acc-ink)}

.portal-pagination__links>a.is-active,
.page-item.active .page-link{background:var(--tp-ink);border-color:var(--tp-ink);color:var(--tp-surf)}

.portal-pagination__links>a.is-disabled,
.page-item.disabled .page-link{opacity:.4;pointer-events:none}

.portal-pagination__links>span{padding:0 var(--tp-space-2)}

/* --------------------------------------------------------------------------
   Chat
   -------------------------------------------------------------------------- */

.conversation-create{display:grid;gap:var(--tp-space-5);max-width:var(--tp-shell-narrow)}

.chat-shell{
    display:grid;
    gap:var(--tp-space-5);
    padding:var(--tp-space-6);
    background:var(--tp-surf);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-lg)
}

.chat-messages{display:grid;gap:var(--tp-space-4);max-height:60vh;overflow-y:auto;padding-inline-end:var(--tp-space-2)}

.chat-message{
    display:grid;
    gap:var(--tp-space-1);
    justify-self:start;
    max-width:min(680px,88%);
    padding:var(--tp-space-4) var(--tp-space-5);
    background:var(--tp-surf-2);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-lg);
    border-start-start-radius:var(--tp-r-sm)
}

.chat-message.is-own{
    justify-self:end;
    background:var(--tp-ink);
    border-color:var(--tp-ink);
    color:var(--tp-surf);
    border-start-start-radius:var(--tp-r-lg);
    border-start-end-radius:var(--tp-r-sm)
}

.chat-message strong{
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--tp-mute)
}

.chat-message.is-own strong{color:var(--tp-acc)}

.chat-message p{margin:0;overflow-wrap:anywhere}

.chat-message>span{
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    color:var(--tp-mute)
}

.chat-message.is-own>span{color:var(--tp-acc)}

.chat-form{display:grid;gap:var(--tp-space-3);align-items:end}

.chat-form .button{justify-self:end}

.closed-note{
    margin:0;
    padding:var(--tp-space-4) var(--tp-space-5);
    background:var(--tp-surf-2);
    border:var(--tp-bw) dashed var(--tp-mute);
    border-radius:var(--tp-r);
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-sm);
    letter-spacing:.04em;
    color:var(--tp-mute)
}

/* --------------------------------------------------------------------------
   Compact page heading variant used by portal list screens
   -------------------------------------------------------------------------- */

.compact-heading{padding:var(--tp-space-6) var(--tp-space-6);gap:var(--tp-space-2)}

.compact-heading h1{font-size:var(--tp-text-2xl)}

.payment-ledger{display:grid;gap:var(--tp-space-4);padding-block:var(--tp-space-6)}
/* --------------------------------------------------------------------------
   Attendance board
   -------------------------------------------------------------------------- */

.attendance-filters{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
    gap:var(--tp-space-4);
    align-items:end;
    padding:var(--tp-space-6);
    margin-bottom:var(--tp-space-5);
    background:var(--tp-surf);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-lg)
}

.attendance-board{display:grid;gap:var(--tp-space-4)}

.attendance-toolbar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--tp-space-4);
    padding:var(--tp-space-4) var(--tp-space-5);
    background:var(--tp-surf-2);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r);
    position:sticky;
    top:calc(var(--tp-header-h) + var(--tp-space-2));
    z-index:20
}

.attendance-toolbar>div{display:flex;flex-wrap:wrap;gap:var(--tp-space-2)}

.attendance-toolbar>strong{
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--tp-mute)
}

.attendance-row{
    display:grid;
    grid-template-columns:minmax(0,240px) minmax(0,1fr);
    gap:var(--tp-space-4) var(--tp-space-5);
    align-items:start;
    padding:var(--tp-space-5);
    background:var(--tp-surf);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-lg)
}

.attendance-row__student{display:grid;gap:2px;min-width:0}

.attendance-row__student strong{font-family:var(--tp-font-display);font-size:var(--tp-text-md)}

.attendance-row__student>span{
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--tp-mute)
}

.attendance-status-options{display:flex;flex-wrap:wrap;gap:var(--tp-space-2);align-self:center}

.attendance-status-choice{
    display:inline-flex;
    align-items:center;
    gap:var(--tp-space-2);
    min-height:var(--tp-tap);
    padding:var(--tp-space-2) var(--tp-space-4);
    background:var(--tp-bg);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-btn);
    font-family:var(--tp-font-body);
    font-size:var(--tp-text-sm);
    font-weight:600;
    letter-spacing:normal;
    text-transform:none;
    color:var(--tp-ink);
    cursor:pointer;
    transition:background var(--tp-dur) var(--tp-ease),border-color var(--tp-dur) var(--tp-ease),color var(--tp-dur) var(--tp-ease)
}

.attendance-status-choice input{
    width:16px;
    height:16px;
    min-height:0;
    margin:0;
    flex:none;
    accent-color:var(--tp-acc-2)
}

.attendance-status-choice:has(input:checked){
    background:var(--tp-ink);
    border-color:var(--tp-ink);
    color:var(--tp-surf)
}

.attendance-status-choice.status-present:has(input:checked){
    background:var(--tp-acc);
    border-color:var(--tp-acc);
    color:var(--tp-acc-ink)
}

.attendance-status-choice.status-absent:has(input:checked){
    background:var(--tp-acc-2);
    border-color:var(--tp-acc-2);
    color:var(--tp-surf)
}

.attendance-summary-field,
.attendance-photo-field,
.attendance-row .report-photo-strip{grid-column:1 / -1}

.attendance-summary-field input,
.attendance-photo-field input[type="file"]{
    background:var(--tp-bg)
}

.attendance-photo-field input[type="file"]{padding:var(--tp-space-2) var(--tp-space-3)}

.attendance-savebar{
    position:sticky;
    bottom:var(--tp-space-4);
    z-index:20;
    justify-content:flex-end;
    margin-top:var(--tp-space-2);
    padding:var(--tp-space-4) var(--tp-space-5);
    background:var(--tp-surf);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-lg);
    box-shadow:var(--tp-sh-sm)
}

.staff-attendance-metrics{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
    gap:var(--tp-space-3);
    margin-bottom:var(--tp-space-5)
}

.staff-attendance-metric{
    display:grid;
    gap:2px;
    padding:var(--tp-space-4);
    background:var(--tp-surf);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r)
}

.staff-attendance-metric>span{
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--tp-mute)
}

.staff-attendance-metric>strong{
    font-family:var(--tp-font-display);
    font-size:var(--tp-text-xl);
    font-weight:var(--tp-w-display);
    line-height:1
}

.staff-attendance-row{
    display:grid;
    grid-template-columns:minmax(0,260px) minmax(0,1fr);
    gap:var(--tp-space-4) var(--tp-space-5);
    align-items:start;
    padding:var(--tp-space-5);
    background:var(--tp-surf);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-lg)
}

.staff-attendance-state{display:flex;flex-wrap:wrap;gap:var(--tp-space-2)}

/* --------------------------------------------------------------------------
   Daily reports
   -------------------------------------------------------------------------- */

.daily-report-detail{display:grid;gap:var(--tp-space-5);max-width:var(--tp-shell-narrow)}

.daily-report-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
    gap:var(--tp-space-4);
    padding:var(--tp-space-6);
    background:var(--tp-surf-2);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-lg)
}

.daily-report-summary>div{display:grid;gap:var(--tp-space-1);justify-items:start}

.daily-report-summary>div>span{
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--tp-mute)
}

.daily-report-summary>div>strong{font-family:var(--tp-font-display);font-size:var(--tp-text-md)}

.daily-report-note,
.daily-report-attachments{
    display:grid;
    gap:var(--tp-space-3);
    padding:var(--tp-space-6);
    background:var(--tp-surf);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-lg)
}

.daily-report-note h2,
.daily-report-attachments h2{margin:0;font-size:var(--tp-text-lg)}

.daily-report-note p{margin:0;color:var(--tp-mute)}

.daily-report-attachments .card-heading span{
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-sm);
    font-weight:700;
    color:var(--tp-mute)
}

/* --------------------------------------------------------------------------
   Payment receipt — printable document
   -------------------------------------------------------------------------- */

.receipt-page{
    width:100%;
    max-width:820px;
    margin-inline:auto;
    padding:var(--tp-space-7) var(--tp-space-5);
    background:transparent
}

.receipt-card{
    display:grid;
    gap:var(--tp-space-6);
    padding:var(--tp-space-8) var(--tp-space-7);
    background:var(--tp-surf);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-lg);
    box-shadow:var(--tp-sh-sm)
}

.receipt-header{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--tp-space-5);
    padding-bottom:var(--tp-space-5);
    border-bottom:3px solid var(--tp-acc)
}

.receipt-brand{display:flex;align-items:center;gap:var(--tp-space-4)}

.receipt-brand img{width:64px;height:64px;object-fit:contain;border-radius:var(--tp-r-sm)}

.receipt-brand>div{display:grid}

.receipt-brand strong{
    font-family:var(--tp-font-display);
    font-size:var(--tp-text-lg);
    font-weight:var(--tp-w-display);
    letter-spacing:var(--tp-track-display)
}

.receipt-brand span{
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--tp-mute)
}

.receipt-title{display:grid;gap:var(--tp-space-1);text-align:end}

.receipt-title h1{margin:0;font-size:var(--tp-text-xl)}

.receipt-title span{
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-sm);
    font-weight:700;
    letter-spacing:.08em;
    color:var(--tp-acc-2)
}

.receipt-amount{
    display:grid;
    justify-items:center;
    gap:var(--tp-space-1);
    padding:var(--tp-space-6);
    background:var(--tp-ink);
    border-radius:var(--tp-r-lg);
    color:var(--tp-surf)
}

.receipt-amount>span{
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--tp-acc)
}

.receipt-amount>strong{
    font-family:var(--tp-font-display);
    font-size:var(--tp-text-3xl);
    font-weight:var(--tp-w-display);
    letter-spacing:var(--tp-track-display);
    color:var(--tp-surf)
}

.receipt-lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0 var(--tp-space-6);margin:0}

.receipt-lines>div{
    display:grid;
    grid-template-columns:minmax(0,150px) minmax(0,1fr);
    gap:var(--tp-space-3);
    padding-block:var(--tp-space-3);
    border-bottom:var(--tp-bw) solid var(--tp-line)
}

.receipt-lines dt{
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--tp-mute)
}

.receipt-lines dd{margin:0;font-weight:600}

.receipt-note{
    margin:0;
    padding:var(--tp-space-4) var(--tp-space-5);
    background:var(--tp-surf-2);
    border-inline-start:4px solid var(--tp-acc);
    border-radius:var(--tp-r-sm);
    font-size:var(--tp-text-sm);
    color:var(--tp-mute)
}

.receipt-signature{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    justify-content:space-between;
    gap:var(--tp-space-6);
    padding-top:var(--tp-space-5);
    border-top:var(--tp-bw) solid var(--tp-line)
}

.receipt-signature>div:first-child{display:grid;gap:var(--tp-space-1)}

.receipt-signature>div:first-child>span{
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--tp-mute)
}

.receipt-stamp{
    display:grid;
    place-items:center;
    min-width:220px;
    min-height:110px;
    padding:var(--tp-space-4);
    border:2px dashed var(--tp-line);
    border-radius:var(--tp-r);
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--tp-mute);
    text-align:center
}

.receipt-footer{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--tp-space-4);
    padding-top:var(--tp-space-5);
    border-top:var(--tp-bw) solid var(--tp-line)
}

.receipt-footer>span{
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    letter-spacing:.06em;
    color:var(--tp-mute);
    max-width:52ch
}

@media print{
    body{background:var(--tp-surf)}
    .site-header,
    .site-footer,
    .app-loader,
    .receipt-footer .button{display:none!important}
    .receipt-page{padding:0;max-width:none}
    .receipt-card{border:0;box-shadow:none;border-radius:0}
}