/* SACCO Documents — Frontend Styles */
:root {
    --sdoc-green: #18541f;
    --sdoc-green-dark: #0f3614;
    --sdoc-green-pale: #e8f5e9;
    --sdoc-gold: #c9a227;
    --sdoc-text: #0f172a;
    --sdoc-muted: #64748b;
    --sdoc-border: #e2e8f0;
    --sdoc-white: #ffffff;
    --sdoc-bg: #f8fafc;
    --sdoc-radius: 12px;
    --sdoc-shadow: 0 2px 14px rgba(0,0,0,.07);
}

.sdoc-wrap { font-family: 'Outfit','Inter',-apple-system,sans-serif; }
.sdoc-wrap * { box-sizing: border-box; }

/* ── Toolbar ── */
.sdoc-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.sdoc-search-form { display:flex; align-items:center; gap:8px; flex:1; flex-wrap:wrap; }
.sdoc-search-box { position:relative; flex:1; min-width:200px; }
.sdoc-search-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--sdoc-muted); pointer-events:none; }
.sdoc-search-input { width:100%; padding:10px 12px 10px 36px; border:1.5px solid var(--sdoc-border); border-radius:8px; font-size:14px; font-family:inherit; transition:border-color .15s; }
.sdoc-search-input:focus { border-color:var(--sdoc-green); outline:none; box-shadow:0 0 0 3px rgba(24,84,31,.1); }
.sdoc-filter-select { padding:10px 12px; border:1.5px solid var(--sdoc-border); border-radius:8px; font-size:14px; font-family:inherit; background:var(--sdoc-white); cursor:pointer; min-width:160px; }
.sdoc-filter-select:focus { border-color:var(--sdoc-green); outline:none; }
.sdoc-search-btn { background:var(--sdoc-green); color:#fff; padding:10px 20px; border:none; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; transition:.15s; }
.sdoc-search-btn:hover { background:var(--sdoc-green-dark); }
.sdoc-clear-btn { font-size:13px; color:var(--sdoc-muted); text-decoration:none; padding:10px; }
.sdoc-clear-btn:hover { color:var(--sdoc-green); }
.sdoc-results-count { font-size:13px; color:var(--sdoc-muted); white-space:nowrap; }
.sdoc-results-count strong { color:var(--sdoc-green); }

/* ── Grid ── */
.sdoc-grid { display:grid; gap:24px; }
.sdoc-grid--cols-1 { grid-template-columns:1fr; }
.sdoc-grid--cols-2 { grid-template-columns:repeat(2,1fr); }
.sdoc-grid--cols-3 { grid-template-columns:repeat(3,1fr); }
.sdoc-grid--cols-4 { grid-template-columns:repeat(4,1fr); }

/* ── Card ── */
.sdoc-card { background:var(--sdoc-white); border:1.5px solid var(--sdoc-border); border-radius:var(--sdoc-radius); box-shadow:var(--sdoc-shadow); display:flex; flex-direction:column; overflow:hidden; transition:transform .2s,box-shadow .2s,border-color .2s; }
.sdoc-card:hover { transform:translateY(-4px); box-shadow:0 10px 32px rgba(0,0,0,.11); border-color:var(--sdoc-green); }

/* Thumbnail */
.sdoc-card__thumb { position:relative; aspect-ratio:16/9; overflow:hidden; background:#f1f5f9; }
.sdoc-card__thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.sdoc-card:hover .sdoc-card__thumb img { transform:scale(1.04); }
.sdoc-card__ext { position:absolute; top:10px; right:10px; background:var(--sdoc-green); color:#fff; font-size:10px; font-weight:800; letter-spacing:.08em; padding:3px 8px; border-radius:4px; }

/* Icon area (no thumbnail) */
.sdoc-card__icon-area { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; padding:28px 20px 20px; background:var(--sdoc-green-pale); position:relative; }
.sdoc-card__file-icon { font-size:42px; }
.sdoc-card__icon-area .sdoc-card__ext { position:static; display:inline-block; }

/* Body */
.sdoc-card__body { padding:16px 18px; flex:1; }
.sdoc-card__cat { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sdoc-gold); display:block; margin-bottom:6px; }
.sdoc-card__title { font-size:15px; font-weight:700; color:var(--sdoc-text); margin:0 0 8px; line-height:1.35; }
.sdoc-card__desc { font-size:13px; color:var(--sdoc-muted); margin:0 0 12px; line-height:1.6; }
.sdoc-card__meta { display:flex; gap:14px; flex-wrap:wrap; }
.sdoc-card__size, .sdoc-card__count { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--sdoc-muted); }

/* Footer */
.sdoc-card__footer { padding:12px 18px 16px; border-top:1px solid var(--sdoc-border); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sdoc-download-btn { display:inline-flex; align-items:center; gap:7px; background:var(--sdoc-green); color:#fff; border:none; padding:10px 18px; border-radius:7px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; transition:.15s; flex:1; justify-content:center; }
.sdoc-download-btn:hover { background:var(--sdoc-green-dark); transform:translateY(-1px); }
.sdoc-download-btn:disabled { opacity:.6; cursor:wait; }
.sdoc-download-btn.success { background:#059669; }
.sdoc-preview-btn { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--sdoc-muted); text-decoration:none; padding:10px 12px; border:1.5px solid var(--sdoc-border); border-radius:7px; transition:.15s; }
.sdoc-preview-btn:hover { border-color:var(--sdoc-green); color:var(--sdoc-green); text-decoration:none; }

/* Empty state */
.sdoc-empty { text-align:center; padding:60px 24px; }
.sdoc-empty__icon { font-size:48px; margin-bottom:16px; }
.sdoc-empty h3 { font-size:20px; color:var(--sdoc-text); margin:0 0 8px; }
.sdoc-empty p { color:var(--sdoc-muted); margin:0; }

/* ── Modal ── */
.sdoc-modal { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:99999; display:flex; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(3px); }
.sdoc-modal__box { background:#fff; border-radius:16px; padding:32px 28px; max-width:420px; width:100%; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.sdoc-modal__close { position:absolute; top:12px; right:16px; background:none; border:none; font-size:18px; cursor:pointer; color:var(--sdoc-muted); line-height:1; padding:4px; }
.sdoc-modal__box { position:relative; }
.sdoc-modal__icon { font-size:40px; margin-bottom:14px; }
.sdoc-modal__box h3 { font-size:18px; font-weight:700; color:var(--sdoc-text); margin:0 0 8px; }
.sdoc-modal__box p { font-size:14px; color:var(--sdoc-muted); margin:0 0 16px; }
.sdoc-modal__input { width:100%; padding:11px 13px; border:1.5px solid var(--sdoc-border); border-radius:8px; font-size:14px; margin-bottom:16px; font-family:inherit; }
.sdoc-modal__input:focus { border-color:var(--sdoc-green); outline:none; }
.sdoc-modal__actions { display:flex; gap:10px; }
.sdoc-modal__cancel { flex:1; padding:11px; border:1.5px solid var(--sdoc-border); background:#fff; border-radius:8px; font-size:14px; cursor:pointer; font-family:inherit; }
.sdoc-modal__confirm { flex:2; display:inline-flex; align-items:center; justify-content:center; gap:7px; background:var(--sdoc-green); color:#fff; border:none; padding:11px 20px; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; transition:.15s; }
.sdoc-modal__confirm:hover { background:var(--sdoc-green-dark); }

/* Toast */
.sdoc-toast { position:fixed; bottom:28px; right:28px; background:#18541f; color:#fff; padding:13px 20px; border-radius:10px; font-size:14px; font-weight:600; z-index:999999; box-shadow:0 6px 24px rgba(0,0,0,.2); animation:sdoc-slide-up .3s ease; }
@keyframes sdoc-slide-up { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }

/* Pagination */
.sdoc-pagination { display:flex; justify-content:center; gap:6px; margin-top:32px; flex-wrap:wrap; }
.sdoc-page-btn { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px; border:1.5px solid var(--sdoc-border); border-radius:7px; font-size:13px; font-weight:600; color:var(--sdoc-muted); text-decoration:none; transition:.15s; }
.sdoc-page-btn:hover, .sdoc-page-btn.active { background:var(--sdoc-green); border-color:var(--sdoc-green); color:#fff; text-decoration:none; }

/* Responsive */
@media (max-width:900px) {
    .sdoc-grid--cols-3, .sdoc-grid--cols-4 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:580px) {
    .sdoc-grid--cols-2,.sdoc-grid--cols-3,.sdoc-grid--cols-4 { grid-template-columns:1fr; }
    .sdoc-toolbar { flex-direction:column; align-items:stretch; }
    .sdoc-search-form { flex-direction:column; }
}