﻿/*
  admin.css — CMS Poznámky
  Malé doplnky nad Bootstrap 5.3 pre admin obrazovky.
  - Čistý, vzdušný layout
  - Jemné tiene a oblých rohy
  - Lepšia čitateľnosť tabuliek
  - Mobile-first typografia: 8px / 10px / 12px (mobile / tablet / desktop)
*/

/* ---------- Základ / typografia ---------- */
/* Mobil a malé šírky */
@media (max-width: 767.98px) {
  :root, html { 
    font-size: 14px !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body { font-size: 1rem !important; } /* 1rem = 14px */
}

/* Tablet (nechaj tiež 14px, ak chceš) */
@media (min-width: 768px) and (max-width: 991.98px) {
  :root, html { font-size: 14px !important; }
  body { font-size: 1rem !important; }
}

/* Desktop */
@media (min-width: 992px) {
  :root, html { font-size: 16px !important; } /* 1rem = 16px */
  body { font-size: 1rem !important; }
}

:root{
  --admin-radius: 1rem;
  --admin-radius-sm: .6rem;
  --admin-shadow: 0 10px 24px rgba(0,0,0,.06);
  --admin-shadow-sm: 0 6px 16px rgba(0,0,0,.05);
  --admin-primary: #0d6efd;
  --admin-success: #198754;
  --admin-danger: #dc3545;
  --admin-muted: #6c757d;
  --admin-border: rgba(0,0,0,.08);
  --admin-header-bg: #f8f9fa;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: #f6f7f9;
}

a {
  text-underline-offset: .15em;
}

.container, .container-fluid {
  max-width: 1200px;
}

/* ---------- Navbar ---------- */
.navbar {
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.navbar-brand {
  letter-spacing: .2px;
}

/* ---------- Karty ---------- */
.card {
  border-radius: var(--admin-radius);
  border-color: var(--admin-border);
  box-shadow: var(--admin-shadow-sm);
}

.card-header {
  border-top-left-radius: var(--admin-radius);
  border-top-right-radius: var(--admin-radius);
  background: var(--admin-header-bg);
  border-bottom-color: var(--admin-border);
  font-weight: 600;
}

.card.shadow-sm { box-shadow: var(--admin-shadow); }

/* ---------- Tabuľky ---------- */
.table {
  margin-bottom: 0;
  vertical-align: middle;
}

.table thead th {
  font-weight: 600;
  white-space: nowrap;
}

.table-hover tbody tr:hover {
  background-color: rgba(13,110,253,.04);
}

.table td, .table th {
  border-color: var(--admin-border);
}

.table-responsive {
  overflow: auto;
  /* lepšia použiteľnosť na menších obrazovkách */
}

.table-responsive .table thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}

/* ---------- Badges ---------- */
.badge.bg-secondary {
  background-color: #737a84 !important;
}

.badge {
  border-radius: .5rem;
  font-weight: 600;
}

/* ---------- Tlačidlá ---------- */
.btn {
  border-radius: .6rem;
}

.btn-outline-primary {
  border-color: rgba(13,110,253,.4);
}

.btn-outline-danger[disabled],
.btn[disabled] {
  cursor: not-allowed;
  opacity: .6;
}

/* Lepšie rozostupy medzi mini tlačidlami v akciách tabuľky */
.table .text-end .btn,
.table .btn-group .btn {
  margin-inline-start: .25rem;
}

/* ---------- Formuláre ---------- */
.form-control, .form-select {
  border-radius: var(--admin-radius-sm);
  border-color: var(--admin-border);
}

.form-control:focus, .form-select:focus {
  border-color: rgba(13,110,253,.45);
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}

.form-text {
  color: var(--admin-muted);
}

/* Checkbox o kúsok väčší pre klikateľnosť */
.form-check-input {
  width: 1.1em;
  height: 1.1em;
}

/* ---------- Alerty ---------- */
.alert {
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  box-shadow: 0 8px 20px rgba(0,0,0,.03);
}

/* ---------- Utility ---------- */
.muted { color: var(--admin-muted) !important; }
.smallcaps {
  font-variant-caps: all-small-caps;
  letter-spacing: .5px;
}

.page-actions { gap: .5rem; }

/* Väčší vnútorný dych pri sekciách */
.section {
  padding: 1rem;
}

/* ---------- Zoznamy / prázdny stav ---------- */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--admin-muted);
}

/* ---------- Tlač (print) ---------- */
@media print {
  .navbar, .btn, .alert, .card-header { display: none !important; }
  .card { border: none; box-shadow: none; }
  body { background: #fff; }
  html { font-size: 14px; }
}
