/*
  Plain Bootstrap-first styling.
  This file only adds small compatibility rules for legacy markup + print friendliness.
*/

:root {
  --mc-radius: 1rem;
}

body {
  background: var(--bs-gray-100, #f8f9fa);
}

a { text-decoration: none; }

/* Cards: many views use <section class="card"> without .card-body */
section.card,
div.card,
.card {
  border-radius: var(--mc-radius);
}

section.card,
div.card {
  padding: 1rem;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--bs-box-shadow-sm);
  background: #fff;
}

.card.inner {
  background: var(--bs-gray-100, #f8f9fa);
  box-shadow: none;
}

/* Toolbar blocks (legacy) */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.toolbar h1, .toolbar h2, .toolbar h3 {
  margin: 0;
}
.toolbar h1 { font-size: 1.25rem; font-weight: 700; }
.toolbar h2 { font-size: 1.1rem; font-weight: 700; }
.toolbar-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Simple text utilities */
.muted { color: var(--bs-secondary-color, #6c757d); }
.small { font-size: .875rem; }

/* Forms (legacy .field / .form-grid) */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.field span {
  display: block;
  font-weight: 600;
  margin-bottom: .25rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
}
/* Give reasonable styling when .form-control isn't used */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.field select,
.field textarea {
  padding: .375rem .5rem;
  border-radius: .5rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  background: #fff;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: rgba(13,110,253,.5);
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.15);
}

/* Legacy buttons like <button class="btn primary"> */
.btn.primary {
  color: #fff;
  background-color: var(--bs-primary, #0d6efd);
  border-color: var(--bs-primary, #0d6efd);
}
.btn.primary:hover {
  filter: brightness(.95);
}

.btn.secondary {
  color: #fff;
  background-color: var(--bs-secondary, #6c757d);
  border-color: var(--bs-secondary, #6c757d);
}

.btn.danger {
  color: #fff;
  background-color: var(--bs-danger, #dc3545);
  border-color: var(--bs-danger, #dc3545);
}

/* Small icon buttons used in lists */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .75rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  background: #fff;
}
.icon-btn.small {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: .65rem;
}
.icon-btn.danger {
  border-color: rgba(220,53,69,.35);
}

/* Alerts (legacy: .alert success/error/info) */
.alert.success { border-color: rgba(25,135,84,.25); background: rgba(25,135,84,.08); }
.alert.error { border-color: rgba(220,53,69,.25); background: rgba(220,53,69,.08); }
.alert.info { border-color: rgba(13,110,253,.25); background: rgba(13,110,253,.06); }

/* Print */
@media print {
  body { background: #fff !important; }
  .no-print { display: none !important; }
  section.card, div.card { box-shadow: none !important; border: none !important; }
}
/* =========================================================
   Global polish (edges + accent lines) – Bootstrap-first
   ========================================================= */

/* Background */
body{
  background: #f6f8fb;
}

/* More breathing room for the whole app */
.app-content{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

/* Make all cards look “finished” + add bold top accent line */
.card{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  border-top: 6px solid rgba(var(--bs-primary-rgb), 1);
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}

/* Increase inside padding => fixes “text too close to edges” everywhere */
.card-body{
  padding: 1.5rem;
}
@media (min-width: 992px){
  .card-body{
    padding: 2rem;
  }
}

/* Nice “section title” line (auto-applies to first H1 inside cards) */
.card h1:first-child{
  font-weight: 800;
  letter-spacing: -0.02em;
  padding-left: .75rem;
  border-left: 6px solid rgba(var(--bs-primary-rgb), 1);
  margin-bottom: 1rem;
}

/* Toolbar separator line (if you wrap filters/actions in .toolbar) */
.toolbar{
  padding-bottom: .75rem;
  margin-bottom: 1rem;
  border-bottom: 4px solid rgba(var(--bs-primary-rgb), .15);
}

/* Optional: for list-style items (workers/projects/etc) */
.list-item-accent{
  background: #fff;
  border-left: 5px solid rgba(var(--bs-primary-rgb), 1);
  border-radius: 14px;
  padding: .85rem 1rem;
  margin-bottom: .75rem;
}
.list-item-accent .title{ font-weight: 700; }
.list-item-accent .meta{ color: var(--bs-secondary-color); font-size: .9rem; }

/* Print stays clean */
@media print{
  body{ background: #fff !important; }
  .card{
    box-shadow: none !important;
    border-top: 2px solid #999 !important;
  }
}