/* ============================================================
 * Bookkeeping Module – elegant modern styling
 * Scope: all rules are prefixed with .bk- or a .bk section ancestor
 * Mobile-first; fluid stat grid; tactile 44px targets.
 * ============================================================ */

.bk-hero {
  position: relative;
  border-radius: 18px;
  padding: 28px 32px;
  margin: 0 0 24px;
  color: #fff;
  background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 50%, #8b5cf6 100%);
  box-shadow: 0 14px 38px -18px rgba(14,165,233,.6),
              0 6px 18px -10px rgba(99,102,241,.45);
  overflow: hidden;
}
.bk-hero::after {
  content: "";
  position: absolute; inset: auto -60px -60px auto;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 65%);
  pointer-events: none;
}
.bk-hero h1 { margin: 0 0 6px; font-size: 1.6rem; font-weight: 700; letter-spacing:-.01em; }
.bk-hero p  { margin: 0; opacity: .9; font-size: .95rem; max-width: 640px; }
.bk-hero .bk-hero-actions { margin-top: 16px; display:flex; flex-wrap:wrap; gap:8px; }

.bk-stats-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 24px;
}
.bk-stat {
  background: #fff;
  border-radius: 14px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 2px 8px -4px rgba(15,23,42,.12);
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.bk-stat:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(15,23,42,.28); }
.bk-stat .bk-stat-label { font-size:.75rem; color:#64748b; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.bk-stat .bk-stat-value { font-size:1.7rem; font-weight:700; color:#0f172a; margin-top:4px; }
.bk-stat .bk-stat-sub   { font-size:.8rem; color:#94a3b8; margin-top:2px; }
.bk-stat .bk-stat-icon {
  position:absolute; top:14px; right:14px;
  width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center; color:#fff;
  background: linear-gradient(135deg,#0ea5e9,#6366f1);
  font-size:1rem;
}
.bk-stat--success .bk-stat-icon { background: linear-gradient(135deg,#10b981,#059669); }
.bk-stat--warn    .bk-stat-icon { background: linear-gradient(135deg,#f59e0b,#ef4444); }
.bk-stat--violet  .bk-stat-icon { background: linear-gradient(135deg,#8b5cf6,#a78bfa); }
.bk-stat--slate   .bk-stat-icon { background: linear-gradient(135deg,#475569,#1e293b); }

.bk-card {
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px -6px rgba(15,23,42,.1);
}
.bk-card-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 14px; gap:10px; flex-wrap:wrap;
}
.bk-card-head h3 { margin:0; font-size:1.05rem; font-weight:600; color:#0f172a; }
.bk-card-head .bk-tools { display:flex; gap:8px; flex-wrap:wrap; }

.bk-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size:.9rem;
}
.bk-table th, .bk-table td {
  padding: 11px 12px;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
}
.bk-table th {
  font-size:.72rem; text-transform: uppercase; letter-spacing:.05em;
  color:#64748b; font-weight:700; background:#f8fafc;
}
.bk-table tr:hover td { background:#f8fafc; }
.bk-table-wrap { overflow-x:auto; border-radius:12px; border:1px solid #e2e8f0; }

.bk-btn {
  display:inline-flex; align-items:center; gap:6px;
  min-height: 40px; padding: 8px 14px;
  border-radius: 10px; border:1px solid transparent;
  font-weight:600; font-size:.85rem; cursor:pointer;
  transition: all .15s ease;
  background:#f1f5f9; color:#0f172a;
}
.bk-btn:hover { background:#e2e8f0; }
.bk-btn--primary {
  background: linear-gradient(135deg,#0ea5e9,#6366f1);
  color:#fff;
}
.bk-btn--primary:hover { filter: brightness(1.07); }
.bk-btn--success { background: linear-gradient(135deg,#10b981,#059669); color:#fff; }
.bk-btn--danger  { background: linear-gradient(135deg,#ef4444,#b91c1c); color:#fff; }
.bk-btn--ghost   { background: transparent; border-color:#cbd5e1; }
.bk-btn--sm { min-height:32px; padding:5px 10px; font-size:.78rem; border-radius:8px; }

.bk-pill {
  display:inline-block; font-size:.72rem; font-weight:700;
  padding: 3px 10px; border-radius: 999px;
  text-transform:uppercase; letter-spacing:.04em;
}
.bk-pill--open      { background:#ecfeff; color:#0e7490; }
.bk-pill--in_review { background:#fef3c7; color:#92400e; }
.bk-pill--closed    { background:#dcfce7; color:#166534; }
.bk-pill--reopened  { background:#fee2e2; color:#991b1b; }
.bk-pill--draft     { background:#f1f5f9; color:#475569; }
.bk-pill--posted    { background:#dcfce7; color:#166534; }
.bk-pill--reversed  { background:#fee2e2; color:#991b1b; }
.bk-pill--low       { background:#f1f5f9; color:#334155; }
.bk-pill--medium    { background:#e0f2fe; color:#075985; }
.bk-pill--high      { background:#fef3c7; color:#92400e; }
.bk-pill--urgent    { background:#fee2e2; color:#991b1b; }

.bk-progress {
  width:100%; height:8px; background:#e2e8f0; border-radius:999px; overflow:hidden;
}
.bk-progress > span {
  display:block; height:100%;
  background: linear-gradient(90deg,#0ea5e9,#6366f1);
  transition: width .35s ease;
}

.bk-empty {
  padding: 40px 20px; text-align:center; color:#64748b;
  border:2px dashed #e2e8f0; border-radius:14px;
  background:#f8fafc;
}
.bk-empty i { font-size:2rem; color:#94a3b8; margin-bottom:8px; }

.bk-form-row {
  display:grid; gap:10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 12px;
}
.bk-form-row label {
  display:flex; flex-direction:column; font-size:.78rem; font-weight:600; color:#475569; gap:4px;
}
.bk-form-row input,
.bk-form-row select,
.bk-form-row textarea {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1; border-radius: 8px;
  font-size:.9rem; background:#fff; color:#0f172a;
  font-family: inherit;
}
.bk-form-row textarea { min-height: 72px; resize: vertical; }
.bk-form-row input:focus,
.bk-form-row select:focus,
.bk-form-row textarea:focus {
  outline:none; border-color:#6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}

.bk-checklist-item {
  display:flex; gap:12px; align-items:flex-start;
  padding: 12px 14px;
  border:1px solid #e2e8f0; border-radius:12px;
  margin-bottom:10px; background:#fff;
  transition: background .15s ease;
}
.bk-checklist-item:hover { background:#f8fafc; }
.bk-checklist-item.is-done .bk-cl-title { text-decoration: line-through; color:#94a3b8; }
.bk-checklist-item input[type="checkbox"] {
  width:20px; height:20px; margin-top:3px; accent-color:#10b981; cursor:pointer;
}
.bk-cl-body { flex:1; min-width:0; }
.bk-cl-title { font-weight:600; color:#0f172a; margin-bottom:2px; }
.bk-cl-meta  { font-size:.78rem; color:#64748b; display:flex; gap:10px; flex-wrap:wrap; }

.bk-note {
  border-left: 4px solid #6366f1;
  padding: 12px 14px;
  background: #fafbff;
  border-radius: 10px;
  margin-bottom: 10px;
}
.bk-note.bk-note--pinned { border-left-color:#f59e0b; background:#fffbeb; }
.bk-note h4 { margin:0 0 4px; font-size:.95rem; color:#0f172a; }
.bk-note .bk-note-meta { font-size:.72rem; color:#64748b; margin-bottom:6px; }
.bk-note p { margin:0; white-space:pre-wrap; color:#334155; font-size:.88rem; }

/* Mobile optimisations */
@media (max-width: 768px) {
  .bk-hero { padding: 22px 18px; border-radius: 14px; }
  .bk-hero h1 { font-size: 1.3rem; }
  .bk-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .bk-card { padding:16px; border-radius:12px; }
  .bk-form-row { grid-template-columns: 1fr; }
  .bk-btn { width:auto; }
}
@media (max-width: 480px) {
  .bk-stats-grid { grid-template-columns: 1fr; }
  .bk-card-head { flex-direction: column; align-items: flex-start; }
  .bk-card-head .bk-tools { width: 100%; }
  .bk-card-head .bk-tools .bk-btn { flex: 1; justify-content:center; }
}