body { background: #f6f8fb; }
.card { border-radius: 14px; }

.header-blue { background: #bfe8ff; }
.hdr-main { font-size: 22px; font-weight: 700; color: #0f2a3d; line-height: 1.15; }
.hdr-sub { font-size: 14px; color: #1f4059; margin-top: 2px; }
.hdr-author { font-size: 14px; color: #0f2a3d; margin-top: 2px; text-align: right; }

.header-bottom-nav{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #a8d8f3;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.nav-btn{
  height: 30px;
  min-width: 128px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  text-decoration: none;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 30px;
}
.nav-btn i{ font-size: 18px; line-height: 1; }

.nav-btn-home{ background: #111111; }
.nav-btn-home:hover{ background: #000000; color:#fff; }

.nav-btn-sr{ background: #0b3d91; }
.nav-btn-sr:hover{ background: #082f6f; color:#fff; }

.nav-btn-cab{ background: #1f8b3a; }
.nav-btn-cab:hover{ background: #17692c; color:#fff; }

.drawer-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(70px, 1fr));
  gap: 8px;
}
.drawer-cell {
  display: block;
  text-decoration: none;
  border-radius: 10px;
  padding: 8px;
  border: 1px solid #dce3ee;
  background: #fff;
  color: #1c2430;
  min-height: 62px;
}
.drawer-cell .label { display:block; font-size:.82rem; font-weight:600; }
.drawer-cell .meta { display:block; font-size:.72rem; opacity:.8; }
.drawer-cell.empty { background:#fff; }
.drawer-cell.filled { background:#e8f7ea; border-color:#b9e3c0; }
.drawer-cell.blocked { background:#ffe7e7; border-color:#f2b3b3; color:#8b1d1d; }

.icon-btn {
  border: 1px solid #d6deea;
  background: #fff;
  border-radius: 8px;
  padding: 4px 8px;
  color: #1f3b57;
  text-decoration: none;
}
.icon-btn:hover { background: #eef4ff; }
.icon-btn.danger { color: #a11a1a; border-color: #efc4c4; }
.icon-btn.danger:hover { background: #ffecec; }

.inline-add .form-label { font-size:.78rem; margin-bottom:.25rem; }

.mini-input{
  width: 64px !important;
  text-align: center;
}
.icon-only-btn{
  width: 32px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-only-btn i{ font-size: 14px; line-height: 1; }

@media (max-width: 576px){
  .drawer-grid { grid-template-columns: repeat(var(--cols), minmax(56px, 1fr)); gap: 6px; }
  .drawer-cell { padding: 6px; min-height: 54px; }
  .hdr-main { font-size: 18px; }
  .nav-btn{ min-width: 110px; font-size: 11px; }
}