/**
 * Frontend CSS - Laporan Keuangan Yayasan Pendidikan 2026
 */

:root { --lkypend-color: #1a5276; }

.lkypend-wrap {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    color: #222;
    max-width: 960px;
    margin: 0 auto 40px;
    border: 1px solid #dde3ea;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

/* Header */
.lkypend-header {
    background: var(--lkypend-color);
    color: #fff;
    padding: 28px 32px 22px;
    text-align: center;
}
.lkypend-header .lkypend-logo { margin-bottom: 10px; }
.lkypend-header .lkypend-logo img { max-height: 60px; border-radius: 4px; }
.lkypend-nama-yayasan { font-size: 1.5em; font-weight: 700; margin: 0 0 4px; letter-spacing: .5px; }
.lkypend-jenis { font-size: 1.05em; font-weight: 600; margin: 0 0 8px; opacity: .9; }
.lkypend-periode { font-size: .88em; opacity: .8; margin: 0; }

/* Table */
.lkypend-table-wrap { padding: 0 24px 24px; overflow-x: auto; }
.lkypend-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: .93em; }
.lkypend-table thead tr { background: var(--lkypend-color); color: #fff; }
.lkypend-table thead th { padding: 11px 13px; text-align: left; font-weight: 600; }
.lkypend-table thead th.col-jumlah { text-align: right; }
.lkypend-table tbody tr:nth-child(even) { background: #f7fbff; }
.lkypend-table tbody tr:hover { background: #edf4fb; }
.lkypend-table td { padding: 9px 13px; border-bottom: 1px solid #e8edf2; }
.lkypend-table td.col-jumlah { text-align: right; font-variant-numeric: tabular-nums; }
.lkypend-table td.col-no { width: 48px; color: #888; text-align: center; }
.lkypend-table td.col-kategori { font-weight: 600; }

.lkypend-row-total td { background: #eaf3fb !important; font-weight: 600; color: var(--lkypend-color); }
.lkypend-table tfoot tr.lkypend-row-grandtotal th {
    background: var(--lkypend-color); color: #fff;
    padding: 12px 13px; text-align: left;
}
.lkypend-table tfoot th.col-jumlah { text-align: right; font-size: 1.05em; }

/* Ringkasan */
.lkypend-ringkasan { padding: 20px 24px; }
.lkypend-ringkasan-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; margin-bottom: 8px;
    background: #f4f8fc; border-left: 4px solid var(--lkypend-color); border-radius: 3px;
}
.lkypend-ringkasan-kat { font-weight: 600; }
.lkypend-ringkasan-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--lkypend-color); }

/* Catatan */
.lkypend-catatan { margin: 0 24px 20px; padding: 14px 16px; background: #fffbea; border-left: 4px solid #f0ad4e; border-radius: 3px; font-size: .9em; }
.lkypend-catatan p { margin: 4px 0 0; }

/* Footer */
.lkypend-footer { background: #f5f7fa; border-top: 1px solid #dde3ea; padding: 12px 24px; text-align: center; font-size: .8em; color: #888; }

/* Error/info */
.lkypend-error { padding: 12px 16px; background: #fdecea; color: #c0392b; border-left: 4px solid #c0392b; border-radius: 3px; }
.lkypend-info  { padding: 12px 16px; background: #e8f4fd; color: #2471a3; border-left: 4px solid #2471a3; border-radius: 3px; }

/* Daftar laporan */
.lkypend-daftar { padding: 20px 0; }
.lkypend-daftar-judul { color: var(--lkypend-color); border-bottom: 2px solid var(--lkypend-color); padding-bottom: 8px; }
.lkypend-daftar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 18px; }
.lkypend-daftar-card {
    background: #fff; border: 1px solid #dde3ea; border-radius: 6px;
    padding: 18px 20px; box-shadow: 0 2px 6px rgba(0,0,0,.06);
    transition: box-shadow .2s, transform .2s;
}
.lkypend-daftar-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.1); transform: translateY(-2px); }
.lkypend-badge {
    display: inline-block; padding: 3px 10px; border-radius: 12px;
    background: var(--lkypend-color); color: #fff; font-size: .75em; font-weight: 600; margin-bottom: 10px;
}
.lkypend-daftar-card h4 { margin: 0 0 8px; font-size: 1.05em; }
.lkypend-daftar-card p { margin: 0 0 5px; font-size: .88em; color: #555; }
.lkypend-periode-kecil { color: #999 !important; font-size: .82em !important; }
.lkypend-btn-detail {
    display: inline-block; margin-top: 12px; padding: 7px 16px;
    background: var(--lkypend-color); color: #fff !important; border-radius: 4px;
    font-size: .88em; font-weight: 600; text-decoration: none;
    transition: opacity .15s;
}
.lkypend-btn-detail:hover { opacity: .85; }

@media (max-width: 600px) {
    .lkypend-header { padding: 18px 16px; }
    .lkypend-table-wrap { padding: 0 10px 16px; }
    .lkypend-table td, .lkypend-table th { padding: 7px 7px; font-size: .85em; }
    .lkypend-daftar-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   MULTI-TENANT APP STYLES
   ========================================================= */

.lkypend-app { font-family: 'Segoe UI', Arial, sans-serif; max-width: 960px; margin: 0 auto; }

/* Nav */
.lkypend-app-nav { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 2px solid var(--lkypend-color, #1a5276); margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.lkypend-app-greeting { font-weight: 600; color: var(--lkypend-color, #1a5276); }
.lkypend-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.lkypend-tab { padding: 7px 14px; border-radius: 20px; background: #f0f4f8; color: #555; text-decoration: none; font-size: .88em; font-weight: 600; transition: all .2s; }
.lkypend-tab.active, .lkypend-tab:hover { background: var(--lkypend-color, #1a5276); color: #fff; }

/* Section */
.lkypend-section { background: #fff; border: 1px solid #dde3ea; border-radius: 8px; padding: 24px; margin-bottom: 20px; }
.lkypend-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.lkypend-section-header h3 { margin: 0; color: var(--lkypend-color, #1a5276); }

/* Buttons */
.lkypend-btn { display: inline-block; padding: 8px 16px; border-radius: 6px; font-size: .88em; font-weight: 600; cursor: pointer; border: 2px solid #dde3ea; background: #f5f7fa; color: #444; text-decoration: none; transition: all .15s; }
.lkypend-btn:hover { opacity: .85; }
.lkypend-btn-primary { background: var(--lkypend-color, #1a5276); color: #fff; border-color: var(--lkypend-color, #1a5276); }
.lkypend-btn-outline { background: transparent; color: var(--lkypend-color, #1a5276); border-color: var(--lkypend-color, #1a5276); }
.lkypend-btn-green { background: #27ae60; color: #fff; border-color: #27ae60; }
.lkypend-btn-red { background: #e74c3c; color: #fff; border-color: #e74c3c; }
.lkypend-btn-sm { padding: 5px 10px; font-size: .82em; }

/* Cards laporan */
.lkypend-list { display: flex; flex-direction: column; gap: 12px; }
.lkypend-card-laporan { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border: 1px solid #dde3ea; border-radius: 8px; background: #fafbfc; flex-wrap: wrap; gap: 10px; }
.lkypend-card-info h4 { margin: 4px 0; font-size: 1em; }
.lkypend-card-info p { margin: 2px 0; font-size: .82em; color: #888; }
.lkypend-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Status badges */
.lkypend-status-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .75em; font-weight: 700; margin-left: 6px; }
.lkypend-status-published { background: #d4edda; color: #155724; }
.lkypend-status-draft { background: #fff3cd; color: #856404; }

/* Form */
.lkypend-form { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.lkypend-form-row label { display: block; font-weight: 600; font-size: .88em; margin-bottom: 5px; color: #555; }
.lkypend-form-row input, .lkypend-form-row select, .lkypend-form-row textarea { width: 100%; padding: 9px 12px; border: 1px solid #c5d0da; border-radius: 6px; font-size: .92em; box-sizing: border-box; }
.lkypend-form-row input:focus, .lkypend-form-row select:focus, .lkypend-form-row textarea:focus { outline: none; border-color: var(--lkypend-color, #1a5276); box-shadow: 0 0 0 3px rgba(26,82,118,.12); }
.lkypend-form-half { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lkypend-form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.lkypend-form-msg { padding: 10px 14px; border-radius: 6px; font-size: .88em; display: none; }
.lkypend-form-msg.lkypend-success { display: block; background: #d4edda; color: #155724; }
.lkypend-form-msg.lkypend-error { display: block; background: #fdecea; color: #c0392b; }
.lkypend-info-text { color: #888; font-size: .88em; margin-top: 0; }

/* Items table in form */
.lkypend-items-section { border: 1px solid #dde3ea; border-radius: 6px; overflow: hidden; }
.lkypend-items-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #f5f7fa; border-bottom: 1px solid #dde3ea; }
.lkypend-items-header label { font-weight: 700; font-size: .9em; margin: 0; }
.lkypend-items-table { width: 100%; border-collapse: collapse; }
.lkypend-items-table th { background: #f0f4f8; padding: 8px 10px; text-align: left; font-size: .82em; color: #666; }
.lkypend-items-table td { padding: 6px 8px; border-bottom: 1px solid #f0f0f0; }
.lkypend-items-table td input, .lkypend-items-table td select { width: 100%; padding: 5px 8px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: .85em; }
.lkypend-input-jml { width: 120px !important; }

/* Locked */
.lkypend-locked { text-align: center; padding: 60px 20px; background: #f8f9fa; border-radius: 12px; border: 2px dashed #dde3ea; }
.lkypend-locked-icon { font-size: 3em; margin-bottom: 12px; }
.lkypend-locked h3 { color: #333; margin-bottom: 8px; }
.lkypend-locked p { color: #777; max-width: 400px; margin: 0 auto 20px; }
.lkypend-locked-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Empty state */
.lkypend-empty { padding: 40px 20px; text-align: center; color: #888; }

@media (max-width: 600px) {
    .lkypend-app-nav { flex-direction: column; align-items: flex-start; }
    .lkypend-form-half { grid-template-columns: 1fr; }
    .lkypend-card-laporan { flex-direction: column; }
    .lkypend-table-wrap { overflow-x: auto; }
}