/* ══ Kasaloma CRM — Tenancy Module ══ */

/* Sub-nav tabs */
.ktn-subnav { display:flex; gap:4px; margin-bottom:20px; border-bottom:2px solid #e2e8f0; padding-bottom:0; }
.ktn-subnav-tab {
    padding:10px 18px; font-size:13px; font-weight:600; color:#64748b;
    text-decoration:none; border-radius:8px 8px 0 0;
    border:1px solid transparent; border-bottom:none;
    transition:all .18s; margin-bottom:-2px;
}
.ktn-subnav-tab:hover { color:#1a3a5c; background:#f8fafc; }
.ktn-subnav-tab.active { color:#1a3a5c; background:#fff; border-color:#e2e8f0; border-bottom-color:#fff; }

/* Summary pills */
.ktn-summary-pills { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.ktn-summary-pill {
    display:flex; flex-direction:column; align-items:center;
    padding:14px 20px; border-radius:14px; text-decoration:none;
    background:#fff; border:1.5px solid color-mix(in srgb, var(--pill-color) 25%, #e2e8f0);
    min-width:90px; transition:all .18s;
}
.ktn-summary-pill:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.08); }
.ktn-pill-count { font-size:28px; font-weight:800; color:var(--pill-color); line-height:1; }
.ktn-pill-label { font-size:11px; font-weight:600; color:#64748b; margin-top:4px; text-transform:uppercase; letter-spacing:.5px; }

/* Spaces grid */
.ktn-spaces-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.ktn-space-card {
    background:#fff; border:1px solid #e2e8f0; border-radius:16px;
    padding:20px; display:flex; flex-direction:column; gap:12px;
    transition:all .2s;
}
.ktn-space-card:hover { box-shadow:0 8px 28px rgba(15,36,64,.1); transform:translateY(-2px); }
.ktn-space-card-header { display:flex; align-items:flex-start; gap:12px; }
.ktn-space-icon { font-size:24px; flex-shrink:0; width:44px; height:44px; border-radius:12px; background:#f1f5f9; display:flex; align-items:center; justify-content:center; }
.ktn-space-info { flex:1; min-width:0; }
.ktn-space-name { font-size:14px; font-weight:700; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ktn-space-sub  { font-size:12px; color:#64748b; margin-top:2px; }
.ktn-space-meta { display:flex; flex-wrap:wrap; gap:6px; }
.ktn-meta-tag { font-size:11px; font-weight:600; color:#475569; background:#f1f5f9; padding:4px 10px; border-radius:20px; }
.ktn-space-tenant { display:flex; align-items:center; gap:8px; font-size:12.5px; color:#1a3a5c; font-weight:600; }
.ktn-tenant-dot { width:8px; height:8px; border-radius:50%; background:#10b981; flex-shrink:0; }
.ktn-space-vacant { font-size:12.5px; color:#94a3b8; }
.ktn-card-actions { display:flex; gap:8px; margin-top:4px; }

/* Status badge */
.ktn-status-badge { display:inline-block; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:700; white-space:nowrap; }

/* Danger button */
.ktn-btn-danger { color:#ef4444 !important; border-color:#fecaca !important; }
.ktn-btn-danger:hover { background:#fff2f2 !important; }

/* Detail view */
.ktn-detail-header { display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:16px; }
.ktn-detail-avatar {
    width:64px; height:64px; border-radius:18px; flex-shrink:0;
    background:linear-gradient(135deg,#1a3a5c,#2a5280);
    color:#fff; font-size:24px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
}
.ktn-detail-info { flex:1; min-width:0; }
.ktn-detail-info h2 { margin:0 0 8px; font-size:22px; font-weight:800; color:#0f172a; }
.ktn-detail-meta { display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:13px; color:#475569; }
.ktn-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }

/* Info table */
.ktn-info-table { width:100%; border-collapse:collapse; }
.ktn-info-table td { padding:8px 0; font-size:13px; border-bottom:1px solid #f1f5f9; }
.ktn-info-table td:first-child { color:#64748b; width:40%; font-weight:500; }
.ktn-info-table td:last-child { color:#0f172a; font-weight:600; }
.ktn-info-table tr:last-child td { border-bottom:none; }

/* Payment summary stats */
.ktn-pay-summary { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.ktn-pay-stat {
    background:color-mix(in srgb, var(--c) 8%, #fff);
    border:1px solid color-mix(in srgb, var(--c) 20%, #e2e8f0);
    border-radius:12px; padding:14px; text-align:center;
}
.ktn-pay-stat-num { display:block; font-size:28px; font-weight:800; color:var(--c); line-height:1; }
.ktn-pay-stat-label { display:block; font-size:11px; color:#64748b; font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-top:4px; }
.ktn-pay-stat-amt { display:block; font-size:12px; font-weight:700; color:var(--c); margin-top:6px; }

/* Payment table row states */
.ktn-row-overdue td { background:#fff5f5; }
.ktn-row-due td { background:#fffbeb; }

/* Report grid */
.ktn-report-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* Mobile */
@media (max-width:768px) {
    .ktn-spaces-grid { grid-template-columns:1fr; }
    .ktn-detail-grid { grid-template-columns:1fr; }
    .ktn-report-grid { grid-template-columns:1fr; }
    .ktn-report-grid .kcrm-card[style*="grid-column"] { grid-column:1; }
    .ktn-pay-summary { grid-template-columns:repeat(2,1fr); }
    .ktn-subnav-tab { padding:8px 12px; font-size:12px; }
    .ktn-summary-pills { gap:8px; }
    .ktn-summary-pill { min-width:72px; padding:12px 14px; }
    .ktn-pill-count { font-size:22px; }
}