/**
 * Twisto Bootstrap Theme
 * Barvy podle oficiálního loga twisto.cz:
 *   Fialová:   #420A87
 *   Tyrkysová: #3BBAB2
 * =====================================================
 * Použití: přidat PO bootstrap.min.css
 * <link rel="stylesheet" href="css/bootstrap.min.css">
 * <link rel="stylesheet" href="css/twisto-bootstrap-theme.css">
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* =====================================================
   1. PROMĚNNÉ
   ===================================================== */
:root {
  /* Primární — fialová (z loga) */
  --tw-purple-900:  #1A0040;
  --tw-purple-800:  #2D0670;
  --tw-purple-700:  #420A87;   /* hlavní brand */
  --tw-purple-600:  #5C1AAA;
  --tw-purple-500:  #7830C8;
  --tw-purple-400:  #9B5FD8;
  --tw-purple-300:  #C09AEE;
  --tw-purple-200:  #DEC8F7;
  --tw-purple-100:  #EFE3FB;
  --tw-purple-50:   #F8F2FE;

  /* Akcent — tyrkysová (z loga) */
  --tw-teal-700:    #1F7A76;
  --tw-teal-600:    #289A94;
  --tw-teal-500:    #3BBAB2;   /* hlavní akcent */
  --tw-teal-400:    #5DCFC8;
  --tw-teal-300:    #8DDEDA;
  --tw-teal-100:    #D4F3F1;
  --tw-teal-50:     #EDFAF9;

  /* Zelená / success */
  --tw-green-700:   #1A7A50;
  --tw-green-500:   #2EAA72;
  --tw-green-50:    #EDFBF4;

  /* Červená / danger */
  --tw-red-700:     #B52020;
  --tw-red-500:     #E83A3A;
  --tw-red-50:      #FEF5F5;

  /* Oranžová / warning */
  --tw-orange-500:  #F5821F;
  --tw-orange-50:   #FEF3E8;

  /* Neutrální */
  --tw-n-900:  #1A1025;
  --tw-n-800:  #2E1F40;
  --tw-n-700:  #4A3860;
  --tw-n-600:  #6B5880;
  --tw-n-500:  #9080A8;
  --tw-n-400:  #B8AAC8;
  --tw-n-300:  #D8D0E4;
  --tw-n-200:  #EDE8F4;
  --tw-n-100:  #F5F2F9;
  --tw-n-50:   #FAFAFA;

  /* Bootstrap overrides */
  --bs-primary:       #420A87;
  --bs-primary-rgb:   66, 10, 135;
  --bs-secondary:     #9080A8;
  --bs-secondary-rgb: 144, 128, 168;
  --bs-success:       #2EAA72;
  --bs-success-rgb:   46, 170, 114;
  --bs-danger:        #E83A3A;
  --bs-danger-rgb:    232, 58, 58;
  --bs-warning:       #F5821F;
  --bs-warning-rgb:   245, 130, 31;
  --bs-info:          #3BBAB2;
  --bs-info-rgb:      59, 186, 178;
  --bs-light:         #F5F2F9;
  --bs-light-rgb:     245, 242, 249;
  --bs-dark:          #1A1025;
  --bs-dark-rgb:      26, 16, 37;

  --bs-body-font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --bs-body-color:       #2E1F40;
  --bs-body-bg:          #FAFAFA;

  --bs-border-radius:      0.75rem;
  --bs-border-radius-sm:   0.5rem;
  --bs-border-radius-lg:   1rem;
  --bs-border-radius-xl:   1.5rem;
  --bs-border-radius-xxl:  2rem;
  --bs-border-radius-pill: 50rem;

  --bs-border-color:             #D8D0E4;
  --bs-border-color-translucent: rgba(66, 10, 135, .1);

  --bs-link-color:       #420A87;
  --bs-link-hover-color: #2D0670;

  --bs-focus-ring-color: rgba(66, 10, 135, .22);
  --bs-focus-ring-width: 0.25rem;

  /* Stíny */
  --tw-shadow-xs: 0 1px 3px  rgba(66, 10, 135, .06);
  --tw-shadow-sm: 0 2px 8px  rgba(66, 10, 135, .09);
  --tw-shadow:    0 4px 16px rgba(66, 10, 135, .12);
  --tw-shadow-lg: 0 8px 28px rgba(66, 10, 135, .16);
  --tw-shadow-xl: 0 16px 48px rgba(66, 10, 135, .20);

  --bs-box-shadow:    var(--tw-shadow);
  --bs-box-shadow-sm: var(--tw-shadow-sm);
  --bs-box-shadow-lg: var(--tw-shadow-lg);
}

/* =====================================================
   2. BASE
   ===================================================== */
body {
  font-family: var(--bs-body-font-family);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 800;
  color: var(--tw-n-900);
  letter-spacing: -.025em;
}

.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--tw-n-900);
}

.lead { color: var(--tw-n-600); }
code, pre { font-family: 'DM Mono', monospace; }
a { color: var(--tw-purple-700); text-decoration: none; transition: color .18s; }
a:hover { color: var(--tw-purple-800); }

/* =====================================================
   3. TLAČÍTKA
   ===================================================== */
.btn {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  border-radius: var(--bs-border-radius-pill);
  padding: .6rem 1.5rem;
  transition: all .2s cubic-bezier(.25, .46, .45, .94);
  letter-spacing: -.01em;
  border-width: 2px;
}
.btn:focus-visible {
  box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.btn-primary {
  background: var(--tw-purple-700);
  border-color: var(--tw-purple-700);
  color: #fff;
  box-shadow: 0 2px 10px rgba(66, 10, 135, .28);
}
.btn-primary:hover {
  background: var(--tw-purple-800);
  border-color: var(--tw-purple-800);
  color: #fff;
  box-shadow: 0 4px 16px rgba(66, 10, 135, .38);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: none; }

.btn-outline-primary {
  border-color: var(--tw-purple-700);
  color: var(--tw-purple-700);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--tw-purple-50);
  border-color: var(--tw-purple-700);
  color: var(--tw-purple-800);
}

.btn-info {
  background: var(--tw-teal-500);
  border-color: var(--tw-teal-500);
  color: #fff;
  box-shadow: 0 2px 10px rgba(59, 186, 178, .26);
}
.btn-info:hover {
  background: var(--tw-teal-600);
  border-color: var(--tw-teal-600);
  color: #fff;
  transform: translateY(-1px);
}

.btn-success {
  background: var(--tw-green-500);
  border-color: var(--tw-green-500);
  color: #fff;
}
.btn-success:hover {
  background: var(--tw-green-700);
  border-color: var(--tw-green-700);
  color: #fff;
  transform: translateY(-1px);
}

.btn-danger {
  background: var(--tw-red-500);
  border-color: var(--tw-red-500);
  color: #fff;
}
.btn-danger:hover {
  background: var(--tw-red-700);
  border-color: var(--tw-red-700);
  color: #fff;
  transform: translateY(-1px);
}

.btn-warning {
  background: var(--tw-orange-500);
  border-color: var(--tw-orange-500);
  color: #fff;
}
.btn-warning:hover {
  background: #D96A10;
  border-color: #D96A10;
  color: #fff;
  transform: translateY(-1px);
}

.btn-light {
  background: var(--tw-purple-50);
  border-color: var(--tw-n-300);
  color: var(--tw-n-800);
}
.btn-light:hover {
  background: var(--tw-purple-100);
  border-color: var(--tw-purple-300);
  color: var(--tw-purple-700);
}

.btn-dark {
  background: var(--tw-n-900);
  border-color: var(--tw-n-900);
  color: #fff;
}
.btn-dark:hover {
  background: var(--tw-n-800);
  border-color: var(--tw-n-800);
  color: #fff;
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--tw-n-200);
  border-color: transparent;
  color: var(--tw-n-700);
}
.btn-secondary:hover {
  background: var(--tw-n-300);
  border-color: transparent;
  color: var(--tw-n-900);
}

.btn-sm { padding: .35rem 1rem; font-size: .8125rem; }
.btn-lg { padding: .8rem 2rem; font-size: 1.0625rem; }

/* =====================================================
   4. NAVBAR
   ===================================================== */
.navbar { padding: .9rem 0; }

.navbar-light {
  background: rgba(255, 255, 255, .97) !important;
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--tw-n-200);
}
.navbar-light .nav-link {
  color: var(--tw-n-700) !important;
  font-weight: 600;
  border-radius: var(--bs-border-radius-pill);
  padding: .4rem .85rem !important;
  transition: all .16s;
}
.navbar-light .nav-link:hover  { color: var(--tw-purple-700) !important; background: var(--tw-purple-50); }
.navbar-light .nav-link.active { color: var(--tw-purple-700) !important; background: var(--tw-purple-100); font-weight: 700; }

.navbar-dark,
.navbar-twisto { background: var(--tw-n-900) !important; }
.navbar-dark .nav-link,
.navbar-twisto .nav-link {
  color: rgba(255, 255, 255, .75) !important;
  font-weight: 600;
  border-radius: var(--bs-border-radius-pill);
  padding: .4rem .85rem !important;
  transition: all .16s;
}
.navbar-dark .nav-link:hover,
.navbar-twisto .nav-link:hover  { color: #fff !important; background: rgba(255, 255, 255, .1); }
.navbar-dark .nav-link.active,
.navbar-twisto .nav-link.active { color: #fff !important; background: rgba(66, 10, 135, .5); }

/* =====================================================
   5. CARDS
   ===================================================== */
.card {
  border: 1px solid var(--tw-n-200);
  border-radius: var(--bs-border-radius-xl) !important;
  box-shadow: var(--tw-shadow-xs);
  background: #fff;
  transition: box-shadow .2s, transform .2s;
  overflow: hidden;
}
.card:hover { box-shadow: var(--tw-shadow); transform: translateY(-2px); }

.card-header {
  background: var(--tw-n-50);
  border-bottom: 1px solid var(--tw-n-200);
  font-weight: 700;
  color: var(--tw-n-900);
  padding: 1rem 1.4rem;
}
.card-body   { padding: 1.5rem; }
.card-footer {
  background: var(--tw-n-50);
  border-top: 1px solid var(--tw-n-200);
  padding: .9rem 1.4rem;
}
.card-title { font-weight: 800; color: var(--tw-n-900); letter-spacing: -.025em; }
.card-text  { color: var(--tw-n-600); }

.card-purple     { background: var(--tw-purple-700); border-color: transparent; }
.card-purple *   { color: #fff; }
.card-purple-soft{ background: var(--tw-purple-50); border-color: var(--tw-purple-200); }
.card-teal       { background: var(--tw-teal-500); border-color: transparent; }
.card-teal *     { color: #fff; }

/* =====================================================
   6. FORMULÁŘE
   ===================================================== */
.form-control,
.form-select {
  border: 2px solid var(--tw-n-300);
  border-radius: var(--bs-border-radius-lg) !important;
  padding: .6rem 1rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--tw-n-900);
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
  font-size: .9375rem;
}
.form-control::placeholder { color: var(--tw-n-400); }
.form-control:focus,
.form-select:focus {
  border-color: var(--tw-purple-600);
  box-shadow: 0 0 0 3px rgba(66, 10, 135, .13);
  outline: none;
}
.form-control.is-valid   { border-color: var(--tw-green-500); }
.form-control.is-valid:focus { box-shadow: 0 0 0 3px rgba(46, 170, 114, .13); }
.form-control.is-invalid { border-color: var(--tw-red-500); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(232, 58, 58, .13); }

.form-label { font-weight: 700; color: var(--tw-n-800); font-size: .875rem; margin-bottom: .4rem; }
.form-text  { color: var(--tw-n-500); font-size: .8125rem; }

.form-check-input { border-color: var(--tw-n-400); }
.form-check-input:checked { background-color: var(--tw-purple-700); border-color: var(--tw-purple-700); }
.form-check-input:focus   { box-shadow: 0 0 0 3px rgba(66, 10, 135, .13); }

.input-group-text {
  background: var(--tw-n-100);
  border: 2px solid var(--tw-n-300);
  color: var(--tw-n-600);
  font-weight: 600;
}

/* =====================================================
   7. ALERTS
   ===================================================== */
.alert {
  border: none;
  border-radius: var(--bs-border-radius-xl) !important;
  padding: 1rem 1.2rem;
  font-weight: 500;
  border-left: 3px solid transparent;
}
.alert-primary   { background: var(--tw-purple-100); color: var(--tw-purple-800); border-left-color: var(--tw-purple-700); }
.alert-success   { background: var(--tw-green-50);   color: var(--tw-green-700);  border-left-color: var(--tw-green-500); }
.alert-danger    { background: var(--tw-red-50);     color: var(--tw-red-700);    border-left-color: var(--tw-red-500); }
.alert-warning   { background: var(--tw-orange-50);  color: #8B4510;              border-left-color: var(--tw-orange-500); }
.alert-info      { background: var(--tw-teal-50);    color: var(--tw-teal-700);   border-left-color: var(--tw-teal-500); }
.alert-secondary { background: var(--tw-n-100);      color: var(--tw-n-700);      border-left-color: var(--tw-n-400); }

/* =====================================================
   8. BADGES
   ===================================================== */
.badge {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  border-radius: var(--bs-border-radius-pill) !important;
  padding: .3em .75em;
}
.bg-primary   { background: var(--tw-purple-700) !important; }
.bg-success   { background: var(--tw-green-500)  !important; color: #fff !important; }
.bg-danger    { background: var(--tw-red-500)    !important; }
.bg-warning   { background: var(--tw-orange-500) !important; color: #fff !important; }
.bg-info      { background: var(--tw-teal-500)   !important; color: #fff !important; }
.bg-light     { background: var(--tw-n-100)      !important; color: var(--tw-n-700) !important; }
.bg-dark      { background: var(--tw-n-900)      !important; }
.bg-secondary { background: var(--tw-n-400)      !important; color: #fff !important; }

/* =====================================================
   9. TABULKY
   ===================================================== */
.table { color: var(--tw-n-800); }
.table > thead { background: var(--tw-purple-50); }
.table > thead > tr > th {
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tw-n-600);
  border-bottom: 2px solid var(--tw-purple-200);
  padding: .8rem 1rem;
}
.table > tbody > tr > td {
  padding: .85rem 1rem;
  vertical-align: middle;
  border-color: var(--tw-n-200);
}
.table-hover > tbody > tr:hover > td { background: var(--tw-purple-50); }
.table-striped > tbody > tr:nth-of-type(odd) > td { background: var(--tw-n-50); }

/* =====================================================
   10. PAGINATION
   ===================================================== */
.pagination { gap: .2rem; }
.page-link {
  border: 2px solid var(--tw-n-300);
  border-radius: var(--bs-border-radius-lg) !important;
  color: var(--tw-purple-700);
  font-weight: 700;
  padding: .4rem .8rem;
  transition: all .16s;
}
.page-link:hover {
  background: var(--tw-purple-100);
  border-color: var(--tw-purple-400);
  color: var(--tw-purple-800);
}
.page-item.active .page-link {
  background: var(--tw-purple-700);
  border-color: var(--tw-purple-700);
  color: #fff;
  box-shadow: 0 2px 8px rgba(66, 10, 135, .28);
}
.page-item.disabled .page-link {
  color: var(--tw-n-400);
  border-color: var(--tw-n-200);
}

/* =====================================================
   11. TABS & PILLS
   ===================================================== */
.nav-tabs { border-bottom: 2px solid var(--tw-n-200); gap: .2rem; }
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -2px;
  color: var(--tw-n-600);
  font-weight: 600;
  padding: .6rem 1rem;
  transition: all .16s;
}
.nav-tabs .nav-link:hover  { color: var(--tw-purple-700); border-bottom-color: var(--tw-purple-300); }
.nav-tabs .nav-link.active { color: var(--tw-purple-700); border-bottom-color: var(--tw-purple-700); font-weight: 800; background: transparent; }

.nav-pills .nav-link {
  border-radius: var(--bs-border-radius-pill) !important;
  color: var(--tw-n-600);
  font-weight: 600;
  padding: .4rem 1rem;
  transition: all .16s;
}
.nav-pills .nav-link:hover  { background: var(--tw-purple-50); color: var(--tw-purple-700); }
.nav-pills .nav-link.active { background: var(--tw-purple-700); color: #fff; box-shadow: 0 2px 8px rgba(66, 10, 135, .26); }

/* =====================================================
   12. DROPDOWN
   ===================================================== */
.dropdown-menu {
  border: 1px solid var(--tw-n-200);
  border-radius: var(--bs-border-radius-xl) !important;
  box-shadow: var(--tw-shadow-lg);
  padding: .5rem;
}
.dropdown-item {
  border-radius: var(--bs-border-radius-lg) !important;
  color: var(--tw-n-700);
  font-weight: 500;
  padding: .5rem .85rem;
  transition: all .14s;
}
.dropdown-item:hover  { background: var(--tw-purple-50); color: var(--tw-purple-700); }
.dropdown-item.active { background: var(--tw-purple-700); color: #fff; }
.dropdown-divider { border-color: var(--tw-n-200); }
.dropdown-header {
  color: var(--tw-n-500);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* =====================================================
   13. MODAL
   ===================================================== */
.modal-content {
  border: none;
  border-radius: var(--bs-border-radius-xxl) !important;
  box-shadow: var(--tw-shadow-xl);
  overflow: hidden;
}
.modal-header {
  background: var(--tw-n-50);
  border-bottom: 1px solid var(--tw-n-200);
  padding: 1.2rem 1.5rem;
}
.modal-title { font-weight: 800; color: var(--tw-n-900); letter-spacing: -.025em; }
.modal-body  { padding: 1.5rem; color: var(--tw-n-700); }
.modal-footer { border-top: 1px solid var(--tw-n-200); padding: 1rem 1.5rem; background: var(--tw-n-50); }

/* =====================================================
   14. PROGRESS
   ===================================================== */
.progress {
  border-radius: var(--bs-border-radius-pill) !important;
  background: var(--tw-n-200);
  height: 8px;
}
.progress-bar            { background: var(--tw-purple-700) !important; border-radius: var(--bs-border-radius-pill) !important; }
.progress-bar.bg-success { background: var(--tw-green-500)  !important; }
.progress-bar.bg-info    { background: var(--tw-teal-500)   !important; }
.progress-bar.bg-warning { background: var(--tw-orange-500) !important; }
.progress-bar.bg-danger  { background: var(--tw-red-500)    !important; }

/* =====================================================
   15. ACCORDION
   ===================================================== */
.accordion-item {
  border: 1px solid var(--tw-n-200);
  border-radius: var(--bs-border-radius-xl) !important;
  margin-bottom: .4rem;
  overflow: hidden;
}
.accordion-button { font-weight: 700; color: var(--tw-n-900); background: #fff; border-radius: var(--bs-border-radius-xl) !important; }
.accordion-button:not(.collapsed) { color: var(--tw-purple-700); background: var(--tw-purple-50); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(66, 10, 135, .13); }
.accordion-body { color: var(--tw-n-600); }

/* =====================================================
   16. LIST GROUP
   ===================================================== */
.list-group-item { border-color: var(--tw-n-200); color: var(--tw-n-700); font-weight: 500; }
.list-group-item:first-child { border-top-left-radius: var(--bs-border-radius-xl) !important; border-top-right-radius: var(--bs-border-radius-xl) !important; }
.list-group-item:last-child  { border-bottom-left-radius: var(--bs-border-radius-xl) !important; border-bottom-right-radius: var(--bs-border-radius-xl) !important; }
.list-group-item-action:hover { background: var(--tw-purple-50); color: var(--tw-purple-700); }
.list-group-item.active { background: var(--tw-purple-700); border-color: var(--tw-purple-700); }

/* =====================================================
   17. UTILITY
   ===================================================== */
.text-primary { color: var(--tw-purple-700) !important; }
.text-success { color: var(--tw-green-500)  !important; }
.text-info    { color: var(--tw-teal-500)   !important; }
.text-warning { color: var(--tw-orange-500) !important; }
.text-danger  { color: var(--tw-red-500)    !important; }
.text-muted   { color: var(--tw-n-500)      !important; }
.text-dark    { color: var(--tw-n-900)      !important; }

.shadow    { box-shadow: var(--tw-shadow)    !important; }
.shadow-sm { box-shadow: var(--tw-shadow-sm) !important; }
.shadow-lg { box-shadow: var(--tw-shadow-lg) !important; }

/* =====================================================
   18. HERO SEKCE
   ===================================================== */
.tw-hero {
  background: var(--tw-n-900);
  position: relative;
  overflow: hidden;
}
.tw-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 65% 40%, rgba(66, 10, 135, .6) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 80%, rgba(59, 186, 178, .2) 0%, transparent 45%);
}

/* =====================================================
   19. STAT KARTA
   ===================================================== */
.tw-stat-card {
  background: #fff;
  border: 1px solid var(--tw-n-200);
  border-radius: var(--bs-border-radius-xl);
  padding: 1.5rem;
  box-shadow: var(--tw-shadow-xs);
  transition: all .2s;
}
.tw-stat-card:hover { box-shadow: var(--tw-shadow); transform: translateY(-2px); }
.tw-stat-card .stat-value {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--tw-n-900);
  line-height: 1;
}
.tw-stat-card .stat-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--tw-n-500);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: .4rem;
}
.tw-stat-card .stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
.stat-icon-purple { background: var(--tw-purple-100); color: var(--tw-purple-700); }
.stat-icon-teal   { background: var(--tw-teal-100);   color: var(--tw-teal-600); }
.stat-icon-green  { background: var(--tw-green-50);   color: var(--tw-green-500); }
.stat-icon-dark   { background: var(--tw-n-100);      color: var(--tw-n-700); }

/* =====================================================
   20. FEATURE ICON
   ===================================================== */
.tw-feature-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: var(--tw-purple-100);
  color: var(--tw-purple-700);
  margin-bottom: 1.2rem;
  transition: all .2s;
}
.tw-feature-icon:hover { background: var(--tw-purple-700); color: #fff; transform: scale(1.06); }
.tw-feature-icon-teal { background: var(--tw-teal-100); color: var(--tw-teal-600); }
.tw-feature-icon-teal:hover { background: var(--tw-teal-500); color: #fff; }

/* =====================================================
   21. SIDEBAR
   ===================================================== */
.tw-sidebar {
  background: #fff;
  border-right: 1px solid var(--tw-n-200);
  min-height: 100vh;
  padding: 1.5rem 0;
}
.tw-sidebar .sidebar-brand {
  padding: 0 1.5rem 1.5rem;
  border-bottom: 1px solid var(--tw-n-200);
  margin-bottom: 1rem;
}
.tw-sidebar .sidebar-section {
  padding: .75rem 1.5rem .25rem;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tw-n-400);
}
.tw-sidebar .nav-link {
  color: var(--tw-n-600);
  font-weight: 600;
  border-radius: var(--bs-border-radius-lg) !important;
  margin: .1rem .75rem;
  padding: .55rem .85rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  transition: all .16s;
}
.tw-sidebar .nav-link:hover  { background: var(--tw-purple-50);  color: var(--tw-purple-700); }
.tw-sidebar .nav-link.active { background: var(--tw-purple-100); color: var(--tw-purple-700); font-weight: 700; }
.tw-sidebar .nav-link .nav-icon { width: 18px; text-align: center; opacity: .7; }
.tw-sidebar .nav-link.active .nav-icon { opacity: 1; }

/* =====================================================
   22. FOOTER
   ===================================================== */
.tw-footer {
  background: var(--tw-n-900);
  color: rgba(255, 255, 255, .6);
  padding: 3rem 0 1.5rem;
}
.tw-footer h5 {
  color: rgba(255, 255, 255, .45);
  font-weight: 800;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 1rem;
}
.tw-footer a {
  color: rgba(255, 255, 255, .6);
  font-size: .875rem;
  transition: color .16s;
  display: block;
  margin-bottom: .4rem;
}
.tw-footer a:hover { color: #fff; }
.tw-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin-top: 2rem;
  padding-top: 1.25rem;
  font-size: .8rem;
  color: rgba(255, 255, 255, .3);
}

/* =====================================================
   23. NETTE
   ===================================================== */
.flashes .flash,
.flashes .alert {
  border-radius: var(--bs-border-radius-xl) !important;
  font-weight: 500;
  animation: tw-flash-in .25s ease;
}
@keyframes tw-flash-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nette-error {
  color: var(--tw-red-700);
  font-size: .8125rem;
  margin-top: .3rem;
  font-weight: 600;
}
ul.errors { list-style: none; padding: 0; margin: .3rem 0 0; }
ul.errors li { color: var(--tw-red-700); font-size: .8125rem; font-weight: 600; }

/* =====================================================
   24. LAYOUT HELPERY
   ===================================================== */
.tw-section    { padding: 4rem 0; }
.tw-section-lg { padding: 6rem 0; }
.tw-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tw-n-200), transparent);
  border: none;
  margin: 2rem 0;
}

@media (max-width: 768px) {
  .tw-section    { padding: 2.5rem 0; }
  .tw-section-lg { padding: 3.5rem 0; }
}