* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f4f4f0;
  min-height: 100vh;
}

.app {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem;
}
.app.app--wide {
  max-width: 1000px;
}
.app.app--narrow {
  max-width: 760px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid #e5e5e0;
  margin-bottom: 1.25rem;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
}
.topbar h1 {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
}
.topbar p {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}

.assistant-tag {
  font-size: 11px;
  background: #E1F5EE;
  color: #085041;
  padding: 2px 9px;
  border-radius: 10px;
  font-weight: 600;
}

.logout-btn {
  font-size: 13px;
  color: #666;
  background: none;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  text-decoration: none;
}
.logout-btn:hover {
  background: #f0f0ec;
}

.logout-form button {
  font-size: 13px;
  color: #666;
  background: none;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
}
.logout-form button:hover {
  background: #f0f0ec;
}

.pin-btn {
  font-size: 13px;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  text-decoration: none;
}
.pin-btn:hover {
  background: #f0f0ec;
}

.back-btn {
  font-size: 13px;
  color: #555;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 7px 14px;
  text-decoration: none;
}
.back-btn:hover {
  background: #f0f0ec;
}

.btn-primary {
  padding: 9px 20px;
  background: #0F6E56;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  width: 100%;
}
.btn-primary:hover {
  background: #085041;
}

.btn-secondary {
  padding: 9px 16px;
  background: none;
  border: 1px solid #ddd;
  border-radius: 8px;
  color: #555;
  font-size: 13px;
  cursor: pointer;
}
.btn-secondary:hover {
  background: #f0f0ec;
}

.btn-danger {
  padding: 9px 20px;
  background: #c0392b;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-danger:hover {
  background: #a93226;
}

.btn-save {
  padding: 6px 14px;
  background: #0F6E56;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn-save:hover {
  background: #085041;
}

.btn-delete {
  padding: 6px 12px;
  background: none;
  border: 1px solid #e8b4b0;
  border-radius: 8px;
  color: #c0392b;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn-delete:hover {
  background: #fdf0ef;
}

.btn-add {
  padding: 9px 20px;
  background: #0F6E56;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  height: 40px;
}
.btn-add:hover {
  background: #085041;
}

.btn-add-top {
  padding: 7px 16px;
  background: #0F6E56;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-add-top:hover {
  background: #085041;
}

.add-btn {
  padding: 7px 16px;
  background: #0F6E56;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.add-btn:hover {
  background: #085041;
}

.print-btn {
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  color: #555;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.print-btn:hover {
  background: #f0f0ec;
  border-color: #bbb;
}

.send-btn {
  padding: 8px 16px;
  background: #0F6E56;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.send-btn:hover {
  background: #085041;
}
.send-btn:disabled {
  background: #5DCAA5;
  cursor: default;
}
.send-btn.send-btn--muted:disabled {
  background: #ccc;
  color: #999;
}

.btn-edit {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #f5f5f2;
  color: #555;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-edit:hover {
  background: #e8e8e4;
  border-color: #bbb;
}

.btn-delete {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #e8b4b0;
  background: #FDECEA;
  color: #c0392b;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-delete:hover {
  background: #f9d9d7;
}

.btn-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #f5f5f2;
  color: #555;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon:hover {
  background: #e8e8e4;
  border-color: #bbb;
}
.btn-icon.del {
  border-color: #e8b4b0;
  background: #FDECEA;
  color: #c0392b;
}
.btn-icon.del:hover {
  background: #f9d9d7;
}

.card {
  background: #fff;
  border: 1px solid #e5e5e0;
  border-radius: 10px;
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e5e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-header h2 {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}
.card-body {
  padding: 1.25rem;
}

.itbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.itbl th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #888;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e5e0;
  background: #fafaf8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.itbl td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0ec;
  color: #1a1a1a;
  vertical-align: middle;
}
.itbl tr:last-child td {
  border-bottom: none;
}
.itbl tr:hover td {
  background: #fafaf8;
}
.itbl tr.row-depleted td {
  background: #FDF0EF;
}
.itbl tr.row-depleted:hover td {
  background: #FAE3E1;
}
.itbl tr.row-depleted td:first-child {
  border-left: 3px solid #E05A47;
}
.itbl tr.row-low td {
  background: #FFF3E0;
}
.itbl tr.row-low:hover td {
  background: #FFE9C6;
}
.itbl tr.row-low td:first-child {
  border-left: 3px solid #EF9F27;
}
.itbl tr.row-restock td {
  background: #FEFBF0;
}
.itbl tr.row-restock:hover td {
  background: #FDF5D8;
}
.itbl tr.row-restock td:first-child {
  border-left: 3px solid #D4C04A;
}
.itbl tr.row-partial td {
  background: #F7F7F5;
}
.itbl tr.row-partial:hover td {
  background: #F0F0EC;
}
.itbl tr.row-partial td:first-child {
  border-left: 3px solid #C5C5BF;
}
.itbl tr.hidden-row {
  display: none;
}

.fg {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fg label {
  font-size: 11px;
  color: #555;
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.fg input, .fg select, .fg textarea {
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: none;
  font-family: inherit;
  background: #fff;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color: #0F6E56;
  box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.1);
}
.fg textarea {
  resize: vertical;
  min-height: 80px;
}
.fg .hint {
  font-size: 11px;
  color: #aaa;
  margin-top: 4px;
}
.fg-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.field-error {
  font-size: 11px;
  color: #c0392b;
  margin-top: 4px;
}

.add-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.edit-form {
  display: flex;
  gap: 6px;
  align-items: center;
}
.edit-form input {
  width: 200px;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: none;
  font-family: inherit;
}
.edit-form input:focus {
  border-color: #0F6E56;
  box-shadow: 0 0 0 2px rgba(15, 110, 86, 0.1);
}

.pin-form {
  display: flex;
  gap: 6px;
  align-items: center;
}
.pin-form input {
  width: 90px;
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  letter-spacing: 4px;
  text-align: center;
  outline: none;
}
.pin-form input:focus {
  border-color: #0F6E56;
  box-shadow: 0 0 0 2px rgba(15, 110, 86, 0.1);
}

.color-form {
  display: flex;
  gap: 6px;
  align-items: center;
}
.color-form input {
  width: 86px;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: none;
  font-family: monospace;
}
.color-form input:focus {
  border-color: #0F6E56;
  box-shadow: 0 0 0 2px rgba(15, 110, 86, 0.1);
}

.group-form {
  display: flex;
  gap: 6px;
  align-items: center;
}
.group-form select {
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: none;
  font-family: inherit;
  background: #fff;
  max-width: 160px;
}
.group-form select:focus {
  border-color: #0F6E56;
}

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open {
  display: flex;
}

.modal {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
}
.modal-head {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid #e5e5e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.modal-head h2 {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}
.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  color: #aaa;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
}
.modal-close:hover {
  background: #f0f0ec;
  color: #555;
}
.modal-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
.modal-foot {
  padding: 1rem 1.25rem;
  border-top: 1px solid #e5e5e0;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
}

.alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 1.25rem;
}
.alert-success {
  background: #E1F5EE;
  border: 1px solid #5DCAA5;
  color: #085041;
}
.alert-error {
  background: #FDECEA;
  border: 1px solid #f0b4b0;
  color: #8B1A1A;
}

.filters {
  background: #fff;
  border: 1px solid #e5e5e0;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.filters .fg select, .filters .fg input[type=date] {
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  outline: none;
  font-family: inherit;
  color: #1a1a1a;
}
.filters .fg select:focus, .filters .fg input[type=date]:focus {
  border-color: #0F6E56;
  box-shadow: 0 0 0 2px rgba(15, 110, 86, 0.1);
}

.btn-filter {
  padding: 7px 18px;
  background: #0F6E56;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-end;
}
.btn-filter:hover {
  background: #085041;
}

.btn-reset {
  padding: 7px 14px;
  background: none;
  border: 1px solid #ddd;
  border-radius: 8px;
  color: #666;
  font-size: 13px;
  cursor: pointer;
  align-self: flex-end;
  text-decoration: none;
}
.btn-reset:hover {
  background: #f0f0ec;
}

.day-group {
  margin-bottom: 1rem;
  background: #fff;
  border: 1px solid #e5e5e0;
  border-radius: 10px;
  overflow: hidden;
}

.day-label {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 16px;
  border-bottom: 1px solid #e5e5e0;
  background: #fafaf8;
}

.day-entries {
  padding: 0 16px;
}

.entry {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0ec;
}
.day-entries .entry:last-child {
  border-bottom: none;
}
.entry-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}
.entry-body {
  flex: 1;
  min-width: 0;
}
.entry-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.entry-type {
  font-size: 12px;
  font-weight: 600;
}
.entry-meta {
  font-size: 11px;
  color: #aaa;
  white-space: nowrap;
  flex-shrink: 0;
}
.entry-detail {
  font-size: 13px;
  color: #333;
  margin-top: 3px;
  line-height: 1.4;
}
.entry-note {
  font-size: 11px;
  color: #999;
  margin-top: 2px;
  font-style: italic;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.pagination a, .pagination span {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  text-decoration: none;
  color: #555;
  background: #fff;
}
.pagination a:hover {
  background: #f0f0ec;
}
.pagination .active {
  background: #0F6E56;
  border-color: #0F6E56;
  color: #fff;
}
.pagination .disabled {
  color: #ccc;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 1.25rem;
}
@media (max-width: 600px) {
  .stats-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stat-card {
  background: #fff;
  border: 1px solid #e5e5e0;
  border-radius: 10px;
  padding: 1rem;
}
.stat-card .lbl {
  font-size: 11px;
  color: #888;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stat-card .val {
  font-size: 26px;
  font-weight: 700;
  color: #1a1a1a;
}
@media (max-width: 600px) {
  .stat-card .val {
    font-size: 20px;
  }
}
.stat-card .sub {
  font-size: 11px;
  color: #aaa;
  margin-top: 2px;
}

.types-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  justify-content: space-between;
}
.types-bar__label {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  margin-right: 4px;
}

.type-chip {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.type-chip:hover {
  background: #f0f0ec;
  border-color: #bbb;
}
.type-chip.active {
  background: #0F6E56;
  border-color: #0F6E56;
  color: #fff;
}
.type-chip.all {
  background: #f0f0ec;
  border-color: #ddd;
  color: #333;
}
.type-chip.all.active {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background: #fff;
  border: 1px solid #e5e5e0;
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 900px) {
  .admin-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }
}

.acard {
  border: 1px solid #e5e5e0;
  border-radius: 8px;
  padding: 1rem;
  background: #fafaf8;
  transition: border 0.15s;
}
.acard:hover {
  border-color: #aaa;
}
.acard.active {
  border: 2px solid #0F6E56;
}
.acard .cn {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.acard .cdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.acard .cs {
  font-size: 12px;
  color: #666;
  margin-bottom: 3px;
}
.acard .cs strong {
  color: #1a1a1a;
}

.view-btn {
  margin-top: 10px;
  width: 100%;
  padding: 6px;
  font-size: 12px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  color: #555;
  text-align: center;
  text-decoration: none;
  display: block;
}
.view-btn:hover {
  background: #f0f0ec;
}

.used-btn {
  margin-top: 6px;
  width: 100%;
  padding: 6px;
  font-size: 12px;
  background: #FDECEA;
  border: 1px solid #f0b4b0;
  border-radius: 6px;
  cursor: pointer;
  color: #8B1A1A;
  font-weight: 600;
  text-align: center;
}
.used-btn:hover:not(:disabled) {
  background: #fbd5d3;
}
.used-btn:disabled {
  opacity: 0.4;
  cursor: default;
  background: #f9f9f7;
  color: #aaa;
  border-color: #ddd;
}

.restock-alert {
  margin: 6px 0;
  padding: 6px 10px;
  background: #FAEEDA;
  border-radius: 6px;
  border-left: 3px solid #EF9F27;
  font-size: 12px;
  color: #633806;
}

.sec-label {
  font-size: 11px;
  font-weight: 700;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.counter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cnt-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #f5f5f2;
  color: #1a1a1a;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
}
.cnt-btn:hover:not(:disabled) {
  background: #e8e8e4;
  border-color: #bbb;
}
.cnt-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.cnt-btn.minus {
  color: #c0392b;
  border-color: #e8b4b0;
  background: #FDECEA;
}
.cnt-btn.minus:hover:not(:disabled) {
  background: #f9d9d7;
}
.cnt-btn.plus {
  color: #085041;
  border-color: #5DCAA5;
  background: #E1F5EE;
}
.cnt-btn.plus:hover:not(:disabled) {
  background: #9FE1CB;
}

.cnt-val {
  min-width: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  display: inline-block;
}
.cnt-val.nonzero {
  color: #D85A30;
}

.used-today {
  font-size: 11px;
  color: #c0392b;
  font-weight: 600;
}

.me-badge {
  font-size: 10px;
  background: #E1F5EE;
  color: #085041;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  margin-left: 6px;
}

.count-badge {
  font-size: 11px;
  background: #f0f0ec;
  color: #666;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.group-badge {
  font-size: 11px;
  background: #f0f0ec;
  color: #555;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

.low-badge {
  font-size: 10px;
  background: #FEF3CD;
  color: #7a4f00;
  border: 1px solid #EF9F27;
  padding: 1px 7px;
  border-radius: 8px;
  font-weight: 600;
}

.type-badge {
  font-size: 11px;
  background: #f0f0ec;
  color: #555;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 500;
}

.key-badge {
  font-size: 12px;
  font-family: monospace;
  background: #f0f0ec;
  color: #333;
  padding: 2px 8px;
  border-radius: 6px;
}

.assistant-tag {
  font-size: 11px;
  background: #E1F5EE;
  color: #085041;
  padding: 2px 9px;
  border-radius: 10px;
  font-weight: 600;
}

.color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  flex-shrink: 0;
}

.pin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0ec;
}
.pin-row:last-child {
  border-bottom: none;
}

.pin-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pin-name {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pin-group {
  font-size: 11px;
  color: #999;
  background: #f0f0ec;
  padding: 2px 7px;
  border-radius: 8px;
  white-space: nowrap;
}

.pin-field {
  width: 90px;
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  letter-spacing: 4px;
  text-align: center;
  outline: none;
  flex-shrink: 0;
}
.pin-field:focus {
  border-color: #0F6E56;
  box-shadow: 0 0 0 2px rgba(15, 110, 86, 0.1);
}

.pin-desc {
  letter-spacing: 0;
  text-align: left;
  font-size: 13px;
  width: 190px;
  flex-shrink: 0;
}

.pin-email {
  letter-spacing: 0;
  text-align: left;
  font-size: 13px;
  width: 210px;
  flex-shrink: 0;
}

.pin-ok {
  padding: 6px 14px;
  background: #0F6E56;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.pin-ok:hover {
  background: #085041;
}
.pin-ok:disabled {
  background: #aaa;
  cursor: default;
}
.pin-ok.saved {
  background: #5DCAA5;
}

.pin-err {
  font-size: 11px;
  color: #c0392b;
  display: none;
}

.group-sep {
  font-size: 10px;
  font-weight: 700;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 0 4px;
}

.new-type-wrap {
  display: none;
  margin-top: 8px;
}
.new-type-wrap.visible {
  display: flex;
  gap: 6px;
}
.new-type-wrap input {
  flex: 1;
  padding: 8px 11px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: none;
  font-family: inherit;
}
.new-type-wrap input:focus {
  border-color: #0F6E56;
  box-shadow: 0 0 0 2px rgba(15, 110, 86, 0.1);
}

.btn-create-type {
  padding: 8px 14px;
  background: #0F6E56;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn-create-type:hover {
  background: #085041;
}

.type-err {
  font-size: 11px;
  color: #c0392b;
  margin-top: 4px;
  display: none;
}

.clinic-checks {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.clinic-check-item {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid #e5e5e0;
  border-radius: 8px;
  cursor: pointer;
}
.clinic-check-item:hover {
  background: #f5f5f2;
}
.clinic-check-item input[type=checkbox] {
  width: 15px;
  height: 15px;
  accent-color: #0F6E56;
  flex-shrink: 0;
  cursor: pointer;
}
.clinic-check-item input[type=number] {
  width: 70px !important;
  flex-shrink: 0;
  padding: 5px 8px !important;
}
.clinic-check-item .cdot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.clinic-check-item .cname {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}

.select-all-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  cursor: pointer;
}
.select-all-row input[type=checkbox] {
  width: 15px;
  height: 15px;
  accent-color: #0F6E56;
  cursor: pointer;
}
.select-all-row span {
  font-size: 12px;
  color: #666;
  font-weight: 600;
}

.empty {
  text-align: center;
  color: #aaa;
  padding: 3rem;
  font-size: 14px;
}

.panel-loading {
  text-align: center;
  color: #aaa;
  padding: 2rem;
  font-size: 13px;
}

#clinicPanel {
  display: none;
  margin-top: 1.5rem;
}

#clinicPanel.visible {
  display: block;
}

body.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-wrap {
  max-width: 380px;
  width: 100%;
  margin: 3rem auto;
  padding: 2rem;
  background: #fff;
  border: 1px solid #e5e5e0;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
}

.login-logo {
  text-align: center;
  margin-bottom: 1.5rem;
}
.login-logo img {
  width: 120px;
  height: auto;
  margin: 0 auto 0.75rem;
  display: block;
}
.login-logo h2 {
  font-size: 19px;
  font-weight: 600;
  color: #1a1a1a;
}
.login-logo p {
  font-size: 13px;
  color: #777;
  margin-top: 4px;
}

.clinic-btn {
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 10px;
  background: #f9f9f7;
  border: 1px solid #e5e5e0;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 0.15s;
  text-align: left;
}
.clinic-btn:hover {
  background: #f0f0ec;
}
.clinic-btn.selected {
  border: 2px solid #0F6E56;
  background: #E1F5EE;
}
.clinic-btn .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.clinic-btn .cname {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}
.clinic-btn .hint {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.pin-wrap {
  margin-top: 1.25rem;
  display: none;
}

.step-label {
  font-size: 12px;
  color: #555;
  margin-bottom: 6px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.step-badge {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #E1F5EE;
  color: #085041;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pin-input {
  width: 100%;
  padding: 11px 14px;
  font-size: 18px;
  border: 1px solid #ccc;
  border-radius: 8px;
  letter-spacing: 8px;
  text-align: center;
  outline: none;
}
.pin-input:focus {
  border-color: #0F6E56;
  box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.1);
}

.name-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  color: #1a1a1a;
  outline: none;
}
.name-input:focus {
  border-color: #0F6E56;
  box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.1);
}

.pin-error {
  font-size: 12px;
  color: #c0392b;
  margin-top: 6px;
  display: none;
}

.btn-primary.btn-full {
  width: 100%;
  margin-top: 10px;
}

.name-section {
  display: none;
  margin-top: 14px;
}

.btn-secondary.btn-secondary--sm {
  padding: 9px 16px;
}

.logo-img {
  width: 34px;
  height: auto;
}

.admin-nav {
  display: flex;
  gap: 10px;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.admin-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid #e5e5e0;
  border-radius: 10px;
  text-decoration: none;
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 600;
}
.admin-nav-link:hover {
  background: #f5f5f2;
  border-color: #ccc;
}

.clinic-section {
  margin-top: 0.5rem;
}

.clinic-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 8px;
}
.clinic-section-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}

.clinic-section-actions {
  display: flex;
  gap: 8px;
}

.btn-order {
  font-size: 11px;
  padding: 5px 12px;
  background: #185FA5;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  font-weight: 600;
}
.btn-order:hover {
  background: #0e4a82;
}
.btn-order:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn-reset-stock {
  font-size: 11px;
  padding: 5px 12px;
  background: none;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  color: #888;
}
.btn-reset-stock:hover {
  background: #f0f0ec;
}

.view-btn--monthly {
  margin-top: 6px;
  background: #E6F1FB;
  border-color: #378ADD;
  color: #0C447C;
}

.view-btn--history {
  margin-top: 4px;
  background: #E6F1FB;
  border-color: #378ADD;
  color: #0C447C;
}

.clinic-list-section {
  margin-top: 0.5rem;
}

.clinic-list-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #e5e5e0;
  border-radius: 10px;
  text-decoration: none;
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 600;
}
.clinic-list-link:hover {
  background: #f5f5f2;
}

.clinic-color-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.td-num {
  color: #aaa;
  width: 36px;
}

.td-center {
  text-align: center;
}

.td-right {
  text-align: right;
}

.td-muted {
  color: #555;
}

.td-actions {
  text-align: center;
  white-space: nowrap;
}

.td-empty {
  text-align: center;
  color: #aaa;
  padding: 2rem !important;
}

.clinic-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.topbar-clinic {
  display: flex;
  align-items: center;
  gap: 8px;
}

.products-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  flex-wrap: wrap;
  gap: 8px;
}
.products-bottom-bar__info {
  font-size: 13px;
  color: #666;
}
.products-bottom-bar__actions {
  display: flex;
  gap: 8px;
}

.modal--sm {
  max-width: 360px;
}

.modal-delete-text {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

.modal-foot-row {
  display: flex;
  gap: 8px;
}

.input-disabled {
  background: #f5f5f2;
  color: #888;
}

.entry-size {
  color: #888;
  font-weight: 400;
}

.entry-delta {
  font-weight: 600;
}

.entry-clinic {
  color: #555;
}

.val--green {
  color: #0F6E56;
}

.admin-clinics-wrap {
  margin-bottom: 1.5rem;
}

/* Setai */
.set-name-input{flex:1;font-size:13px;font-weight:600;border:none;background:transparent;color:#1a1a1a;outline:none;min-width:0;}
.set-name-input:focus{border-bottom:1px solid #0F6E56;}

/* Užduotys */
.alert{padding:10px 16px;border-radius:8px;margin-bottom:1rem;font-size:13px;font-weight:600}
.alert--success{background:#E1F5EE;color:#085041;border:1px solid #5DCAA5}
.field-error{font-size:11px;color:#c0392b;margin-top:3px;display:block}
.fg-optional{color:#aaa;font-weight:400}

/* Todo grid (super_admin vaizdas) */
.todo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:700px){.todo-grid{grid-template-columns:1fr}}

.todo-col{background:#fafaf8;border:1px solid #e5e5e0;border-radius:10px;padding:1rem}
.todo-col-header{display:flex;align-items:center;gap:8px;margin-bottom:1rem}
.todo-col-header strong{font-size:14px;color:#1a1a1a}
.todo-col-count{font-size:11px;color:#aaa;margin-left:4px}

/* Todo kortelė */
.todo-card{background:#fff;border:1px solid #e5e5e0;border-radius:8px;padding:10px;margin-bottom:8px}
.todo-card--overdue{background:#fff5f5;border-color:#f0b4b0}
.todo-card--expiring{background:#fff9f0;border-color:#f5c97a}
.todo-card--done{background:#E1F5EE;border:1px solid #5DCAA5}
.todo-card-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.todo-card-body{flex:1}
.todo-card-title{font-size:13px;font-weight:600;color:#1a1a1a;margin-bottom:3px}
.todo-card-desc{font-size:11px;color:#666;margin-bottom:4px}
.todo-card-meta{font-size:10px;color:#aaa}
.todo-card-actions{display:flex;gap:4px;flex-shrink:0}

/* Todo mygtukai */
.todo-btn{padding:4px 8px;border-radius:6px;cursor:pointer;font-size:11px;font-weight:600;border:1px solid;white-space:nowrap;flex-shrink:0}
.todo-btn--done{background:#E1F5EE;border-color:#5DCAA5;color:#085041}
.todo-btn--done:hover{background:#9FE1CB}
.todo-btn--done-lg{padding:5px 12px}
.todo-btn--del{width:26px;height:26px;background:#FDECEA;border-color:#e8b4b0;color:#c0392b;font-size:12px;display:flex;align-items:center;justify-content:center}
.todo-btn--del:hover{background:#fbd5d3}
.todo-btn--del-done{width:22px;height:22px;background:none;border-color:#5DCAA5;color:#5DCAA5;font-size:10px;display:flex;align-items:center;justify-content:center}
.todo-btn--del-done:hover{background:#c8f5ea}

/* Atlikta sekcija */
.todo-done-details{margin-top:6px}
.todo-done-details summary{font-size:11px;color:#0F6E56;font-weight:600;cursor:pointer;padding:4px 0}

/* Tuščia būsena */
.todo-empty{font-size:12px;color:#aaa;text-align:center;padding:1rem}
.todo-empty--page{margin-top:3rem;font-size:14px;text-align:center}

/* "+ Nauja užduotis" mygtukas topbare */
.todo-add-btn{padding:7px 14px;background:#0F6E56;border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:600;cursor:pointer}
.todo-add-btn:hover{background:#085041}

/* Modal */
.todo-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:200;align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow-y:auto}
.todo-modal-overlay.active{display:flex}
.todo-modal{background:#fff;border-radius:12px;padding:1.75rem;width:100%;max-width:460px;box-shadow:0 8px 30px rgba(0,0,0,0.15);margin:auto}
.todo-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.todo-modal-header h3{font-size:16px;font-weight:700;color:#1a1a1a}
.todo-modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:#aaa;line-height:1}
.todo-modal-close:hover{color:#333}
.todo-modal-foot{display:flex;gap:10px;margin-top:1rem}
.cancel-btn{padding:10px 16px;background:none;border:1px solid #ddd;border-radius:8px;font-size:13px;cursor:pointer;color:#333;text-decoration:none;display:inline-block;}
.cancel-btn:hover{background:#f0f0ec}
.todo-modal-foot .cancel-btn{flex:1;padding:10px}
.todo-modal-foot .cancel-btn:hover{background:#f0f0ec}
.confirm-btn{padding:10px 20px;background:#0F6E56;border:none;border-radius:8px;color:#fff;font-size:13px;font-weight:600;cursor:pointer}
.confirm-btn:hover{background:#085041}
.todo-modal-foot .confirm-btn{flex:2;padding:10px}


/* Vartotojo pasirinkimas modaly */
.todo-user-radio{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #e5e5e0;border-radius:8px;cursor:pointer;margin-bottom:6px}
.todo-user-radio:hover{background:#fafaf8}
.todo-user-radio--selected{border-color:#0F6E56;background:#E1F5EE}
.todo-user-radio-name{font-size:13px;font-weight:600;color:#1a1a1a}
.todo-user-radio-email{font-size:11px;color:#888;margin-left:auto}

/*# sourceMappingURL=style.css.map */

/* ── KPI modulis ─────────────────────────────────────────── */

/* Istorija */
.kpi-history{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}
.kpi-month-block{border:1px solid #e5e5e0;border-radius:10px;padding:1rem;background:#fff}
.kpi-month-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:8px}
.kpi-month-title{font-size:15px;font-weight:700;color:#1a1a1a}
.kpi-month-meta{display:flex;align-items:center;gap:10px}
.kpi-avg-badge{font-size:12px;background:#E1F5EE;color:#085041;padding:3px 12px;border-radius:12px;font-weight:600}
.kpi-print-btn{font-size:11px;padding:5px 12px;background:none;border:1px solid #ddd;border-radius:6px;cursor:pointer;color:#555}
.kpi-print-btn:hover{background:#f5f5f5}
.kpi-eval-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid #f5f5f5}
.kpi-eval-info{flex:1}
.kpi-eval-name{font-size:13px;font-weight:600;color:#1a1a1a}
.kpi-eval-sub{font-size:11px;color:#888;margin-left:8px}
.kpi-eval-comment{font-size:11px;color:#666;margin-top:3px}
.kpi-eval-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.kpi-eval-score{font-size:16px;font-weight:700;white-space:nowrap}
.kpi-detail-btn{font-size:11px;padding:4px 10px;background:#f0f0ec;border:1px solid #ddd;border-radius:6px;cursor:pointer;color:#555;text-decoration:none}
.kpi-detail-btn:hover{background:#e5e5e0}

/* Klinikos pasirinkimas */
.kpi-clinic-select{max-width:460px;margin:2rem auto;text-align:center}
.kpi-section-title{font-size:15px;font-weight:700;color:#1a1a1a;margin-bottom:1rem}
.kpi-clinic-grid{display:flex;flex-direction:column;gap:8px}
.kpi-clinic-btn{display:flex;align-items:center;gap:10px;padding:12px 18px;background:#f9f9f7;border:1px solid #e5e5e0;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;color:#1a1a1a;text-decoration:none}
.kpi-clinic-btn:hover{background:#f0f0ec;border-color:#ccc}

/* Forma */
.kpi-form-wrap{margin-top:1.5rem}
.kpi-table-wrap{overflow-x:auto;border-radius:8px;border:1px solid #e5e5e0}
.kpi-table{width:100%;border-collapse:collapse;font-size:13px}
.kpi-table thead tr{background:#f0f0ec}
.kpi-table th{padding:9px 10px;text-align:left;font-size:11px;font-weight:600;color:#555;text-transform:uppercase}
.kpi-th-score{width:120px;text-align:center}
.kpi-th-note{min-width:180px}
.kpi-row-even{background:#fafaf8}
.kpi-td-text{padding:8px 10px;border-bottom:1px solid #f0f0ec}
.kpi-td-score{padding:8px 10px;border-bottom:1px solid #f0f0ec;text-align:center}
.kpi-td-note{padding:8px 10px;border-bottom:1px solid #f0f0ec}
.kpi-score-wrap{display:flex;align-items:center;justify-content:center;gap:4px}
.kpi-score-input{width:56px;padding:5px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-weight:600;text-align:center;background:#fff;color:#1a1a1a;transition:border-color .15s,color .15s}
.kpi-score-denom{font-size:10px;color:#aaa}
.kpi-note-input{width:100%;padding:5px 8px;border:1px solid #ddd;border-radius:6px;font-size:12px;background:#fff;color:#1a1a1a}
.kpi-form-actions{display:flex;gap:10px;margin-top:1.25rem;flex-wrap:wrap}
.kpi-score-badge{font-size:15px;font-weight:700}

/* Detalus vaizdas */
.kpi-detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:1.5rem;flex-wrap:wrap}
.kpi-detail-name{font-size:18px;font-weight:700;color:#1a1a1a}
.kpi-detail-sub{font-size:13px;color:#888;margin-top:4px}
.kpi-detail-score-box{text-align:right;flex-shrink:0}
.kpi-big-score{font-size:32px;font-weight:700;line-height:1.1}

/* Kriterijų redaktorius */
.kpi-crit-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #f5f5f5}
.kpi-crit-num{font-size:11px;color:#aaa;min-width:22px}
.kpi-crit-input{flex:1;padding:7px 10px;border:1px solid #ddd;border-radius:6px;font-size:13px;background:#fff;color:#1a1a1a}
.kpi-add-crit-row{display:flex;gap:8px}

.admin-grid .acard:last-child {
    grid-column: 1 / 5;
    padding: 0 10px;
    position: relative;
    text-align: right;
}
.admin-grid .acard:last-child .cn, .admin-grid .acard:last-child .cs, .admin-grid .acard:last-child .restock-alert, .admin-grid .acard:last-child  .view-btn {
    display: inline-block;
    width: auto;
 }
.admin-grid .acard:last-child .cn {
    position: absolute;
    left: 10px;
    top: 15px;
}