/* Тема клініки для Samoilenko Fit (спека 031 сайту, етап 5).
   Клас body.theme-clinic ставлять base.html і admin/base.html — уся видима частина fit
   (кабінет і адмінка) у стилі сайту клініки. Стилі шаблонів писались під темну тему
   (напівпрозорий білий поверх чорного, білий текст), тому тут — перекриття.
   Токени: dark #2A3E2A, accent #475B40, soft #F4F6F1, cream #FAF8F4, line #E5E5E5, muted #6B6B6B. */

body.theme-clinic {
  --primary-color: #475B40;
  --primary-hover: #2A3E2A;
  --primary-dark: #2A3E2A;
  --primary-color-dark: #2A3E2A;
  --secondary-color: #2A3E2A;
  --background-color: #F4F6F1;
  --surface-color: #FFFFFF;
  --surface-light: #F4F6F1;
  --border-color: #E5E5E5;
  --text-color: #1F2A1B;
  --text-secondary: #6B6B6B;
  --plyr-color-main: #475B40;
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #F4F6F1;
  color: #1F2A1B;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.theme-clinic h1, .theme-clinic h2, .theme-clinic h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: #2A3E2A;
}

/* ── Верхній рядок, логотип і підвал (base.html) ── */
.clinic-topbar, .clinic-footer, .brand-clinic { display: none; }
.theme-clinic .clinic-topbar { display: block; background: #2A3E2A; color: #fff; font-size: 11px; }
.theme-clinic .clinic-topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: .55rem; padding-bottom: .55rem; }
.theme-clinic .clinic-topbar a { color: #fff; opacity: .8; text-decoration: none; white-space: nowrap; }
.theme-clinic .clinic-topbar a:hover { opacity: 1; }
.theme-clinic .clinic-footer { display: block; padding: 0 0 2rem; }
.theme-clinic .clinic-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; background: #fff; border: 1px solid #E5E5E5; border-radius: 16px; padding: 1.1rem 1.25rem; font-size: 12px; color: #6B6B6B; }
.theme-clinic .clinic-footer a { color: #475B40; text-decoration: none; font-weight: 500; }
.theme-clinic .navbar-brand .logo, .theme-clinic .navbar-brand .brand-fit-name { display: none; }
.theme-clinic .brand-clinic { display: inline-flex; align-items: center; gap: .6rem; }
.theme-clinic .brand-clinic .word { display: inline-block; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .14em; color: #2A3E2A; }
.theme-clinic .brand-clinic .fit { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .3em; font-weight: 600; padding: .25rem .65rem; border-radius: 999px; background: #475B40; color: #fff; }

/* ── Верхня навігація: біла картка, як на сайті ── */
.theme-clinic .navbar { background: transparent; box-shadow: none; border: 0; padding: 1rem 0 0; margin-bottom: 1.5rem; }
.theme-clinic .navbar .container { background: #fff; border: 1px solid #E5E5E5; border-radius: 16px; padding: .85rem 1.25rem; flex-wrap: wrap; gap: .75rem; }
.theme-clinic .navbar .navbar-nav { gap: .35rem; flex-wrap: wrap; }
.theme-clinic .navbar .nav-link { color: #2A3E2A; opacity: 1; font-size: 14px; border-radius: 999px; padding: .5rem .9rem; }
.theme-clinic .navbar .nav-link:hover { color: #475B40; background: #F4F6F1; }
.theme-clinic .navbar span.nav-link, .theme-clinic .navbar span.nav-link:hover { color: #6B6B6B !important; font-weight: 500 !important; background: transparent; }
.theme-clinic .navbar .nav-link.btn-primary { background: #2A3E2A; color: #fff !important; padding: .55rem 1.25rem; font-weight: 600; width: auto; }
.theme-clinic .navbar .nav-link.btn-primary:hover { background: #475B40; }
.theme-clinic .navbar .nav-link.btn-outline { border: 1.5px solid #E5E5E5; padding: .5rem 1.15rem; font-weight: 500; }
.theme-clinic .navbar .nav-link.btn-outline:hover { border-color: #2A3E2A; }

/* ── Повідомлення ── */
.theme-clinic .alert { border-radius: 16px; padding: 1rem 1.25rem; font-size: 14px; border: 1px solid transparent; }
.theme-clinic .alert-success { background: #EEF3EA; color: #2A3E2A; border-color: #D5E0CD; }
.theme-clinic .alert-danger { background: #FBEDEA; color: #8A2B1F; }
.theme-clinic .alert-warning { background: #F7EEDF; color: #6E4E1F; }
.theme-clinic .alert-info { background: #EEF2F6; color: #2E4A66; }

/* ── Кнопки (base.html фарбує .btn-primary у var(--text-color) з !important — у світлій темі це темний текст) ── */
body.theme-clinic .btn-primary, body.theme-clinic .btn-success, body.theme-clinic .btn-view, body.theme-clinic .btn-send { color: #fff !important; }
body.theme-clinic .btn-primary, body.theme-clinic .btn-view, body.theme-clinic .btn-send { background: #2A3E2A; border-color: #2A3E2A; box-shadow: none; }
body.theme-clinic .btn-primary:hover, body.theme-clinic .btn-view:hover, body.theme-clinic .btn-send:hover { background: #475B40; border-color: #475B40; }
body.theme-clinic .btn-success { background: #475B40; border-color: #475B40; }
body.theme-clinic .btn-secondary, body.theme-clinic .btn-edit { background: #fff; color: #2A3E2A; border: 1.5px solid #E5E5E5; }
body.theme-clinic .btn-secondary:hover, body.theme-clinic .btn-edit:hover { border-color: #2A3E2A; }
body.theme-clinic .btn-info { background: #EAF1F8; color: #2E4A66; border: 1px solid #CFDCEA; }
body.theme-clinic .btn-info:hover { background: #DCE8F4; color: #2E4A66; }
body.theme-clinic .btn-danger { background: #FBEDEA; color: #8A2B1F; border: 1px solid #F1D3CD; }
body.theme-clinic .btn-danger:hover { background: #F6DCD6; color: #8A2B1F; }

/* ── Вхід ── */
.theme-clinic .login-container { max-width: 440px; margin: 2.5rem auto 3rem; padding: 2.5rem 2rem; background: #fff; border: 1px solid #E5E5E5; border-radius: 24px; box-shadow: none; }
.theme-clinic .login-container h2 { font-size: 34px; line-height: 1.1; color: #2A3E2A; text-align: left; margin-bottom: 1.75rem; }
.theme-clinic .login-container .form-group label { color: #2A3E2A; font-size: 13px; font-weight: 500; }
.theme-clinic .login-container .remember-me, .theme-clinic .login-container .remember-me label { color: #6B6B6B; font-size: 14px; font-weight: 400; margin: 0; }
.theme-clinic .login-container .btn-primary { border-radius: 999px; padding: .9rem; font-weight: 600; letter-spacing: .02em; font-family: inherit; font-size: 14px; }

/* ── Мої відео ── */
.theme-clinic .dashboard-container { padding: .5rem 0 3rem; }
.theme-clinic .dashboard-container > h2 { font-size: clamp(32px, 5vw, 48px); line-height: 1.05; margin: 0 0 .5rem; }
.theme-clinic .video-card { border: 1px solid #E5E5E5; border-radius: 20px; box-shadow: none; }
.theme-clinic .video-card:hover { box-shadow: 0 10px 30px rgba(42, 62, 42, .08); }
.theme-clinic .video-card .video-info { padding: 1rem 1.15rem 1.25rem; }
.theme-clinic .video-card .video-title { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 16px; color: #2A3E2A; }
.theme-clinic .video-card .video-description, .theme-clinic .video-card .video-meta { color: #6B6B6B; }
.theme-clinic .no-videos-container { background: #fff; color: #1F2A1B; border: 1px solid #E5E5E5; border-radius: 24px; box-shadow: none; }
.theme-clinic .no-videos-container h3 { color: #2A3E2A; }
.theme-clinic .no-videos-container .subtitle { color: #6B6B6B; }

/* ── Плеєр ── */
.theme-clinic .video-container { background: #fff; color: #1F2A1B; border: 1px solid #E5E5E5; border-radius: 24px; padding: 1.5rem; margin: 0 auto 3rem; font-family: 'Inter', sans-serif; }
.theme-clinic .video-info-message { color: #6E4E1F !important; background: #F7EEDF !important; margin: 0 0 1.25rem !important; font-size: 14px !important; border-radius: 16px !important; }
.theme-clinic .video-wrapper { background: #1F2A1B; border-radius: 20px; box-shadow: none; margin-bottom: 1.5rem; }
.theme-clinic .video-metadata { background: #F4F6F1; border-radius: 20px; box-shadow: none; padding: 1.5rem; }
.theme-clinic .video-metadata .video-title { font-family: 'Montserrat', sans-serif; color: #2A3E2A; font-weight: 300; font-size: clamp(26px, 4vw, 36px); letter-spacing: -.02em; }
.theme-clinic .description h2 { color: #2A3E2A; font-weight: 500; font-size: 16px; letter-spacing: 0; }
.theme-clinic .description p { color: #6B6B6B; }
.theme-clinic .video-actions .btn-edit { background: #2A3E2A; color: #fff; border: 0; border-radius: 999px; padding: .55rem 1.1rem; font-weight: 600; }
.theme-clinic .plyr__control--overlaid { background: rgba(71, 91, 64, .92); }
.theme-clinic .plyr--full-ui input[type=range] { color: #A8C09E; }
.theme-clinic .plyr__control.plyr__tab-focus,
.theme-clinic .plyr__control:hover,
.theme-clinic .plyr__control[aria-expanded=true] { background: #475B40; }
.theme-clinic .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before { background: #475B40; }

/* ── Результат оплати: розмітка в стилі Bootstrap без Bootstrap ── */
:is(.page-payment-success, .page-payment-cancel) .card { max-width: 720px; margin: 1rem auto 3rem; border-radius: 24px; }
body:is(.page-payment-success, .page-payment-cancel) .card-header.bg-success { background-color: #2A3E2A !important; color: #fff !important; border: 0 !important; }
body:is(.page-payment-success, .page-payment-cancel) .card-header.bg-warning { background-color: #F7EEDF !important; color: #6E4E1F !important; border: 0 !important; }
:is(.page-payment-success, .page-payment-cancel) .card-header { padding: 1.25rem 1.75rem; }
:is(.page-payment-success, .page-payment-cancel) .card-header h4 { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 18px; margin: 0; color: inherit; }
:is(.page-payment-success, .page-payment-cancel) .card-body { padding: 2rem 1.75rem; text-align: center; }
:is(.page-payment-success, .page-payment-cancel) .card-title { font-size: 28px; margin-bottom: 1.25rem; }
:is(.page-payment-success, .page-payment-cancel) .card-body .alert { text-align: left; margin: 1.25rem 0; }
:is(.page-payment-success, .page-payment-cancel) .card-body .alert h5 { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 15px; margin-bottom: .35rem; }
:is(.page-payment-success, .page-payment-cancel) .card-body p { color: #6B6B6B; font-size: 14px; margin-bottom: .5rem; }
:is(.page-payment-success, .page-payment-cancel) .card-body .alert p { color: inherit; }
:is(.page-payment-success, .page-payment-cancel) .text-success { color: #475B40; }
:is(.page-payment-success, .page-payment-cancel) .text-warning { color: #B07A2A; }
:is(.page-payment-success, .page-payment-cancel) .my-4 { margin: 1.25rem 0; }
:is(.page-payment-success, .page-payment-cancel) .mb-4 { margin-bottom: 1.25rem; }
:is(.page-payment-success, .page-payment-cancel) .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 999px; padding: .85rem 1.6rem !important; font-size: 14px !important; font-weight: 600; text-decoration: none; margin: .25rem; border: 0; }

/* ── Адмінка: картки, таблиці, форми ── */
body.theme-clinic .card { background-color: #fff; border: 1px solid #E5E5E5; border-radius: 20px; box-shadow: none; color: #1F2A1B; overflow: hidden; }
body.theme-clinic .card-header { background-color: #F4F6F1; color: #2A3E2A; border-bottom: 1px solid #E5E5E5; }
body.theme-clinic .table, body.theme-clinic td { color: #1F2A1B; }
body.theme-clinic td { background-color: transparent; border-color: #EFEFEA; }
body.theme-clinic th, body.theme-clinic .table th, body.theme-clinic .table thead th { background-color: #F4F6F1; color: #6B6B6B; border-color: #E5E5E5; font-weight: 600; }
body.theme-clinic tr:hover, body.theme-clinic tr:hover td, body.theme-clinic .table tbody tr:hover { background-color: #FAF8F4; }
body.theme-clinic .table-striped tbody tr:nth-of-type(odd) { background-color: #FBFBF8; }
body.theme-clinic .videos-list, body.theme-clinic .users-list { background: #fff; border: 1px solid #E5E5E5; border-radius: 20px; box-shadow: none; overflow: hidden; }
body.theme-clinic .create-user-form, body.theme-clinic .edit-user-form { background: #fff; border: 1px solid #E5E5E5; border-radius: 20px; box-shadow: none; }
body.theme-clinic .form-control, body.theme-clinic .form-select, body.theme-clinic input[type="date"], body.theme-clinic .extend-period select {
  background-color: #fff; border: 1px solid #E5E5E5; color: #1F2A1B; border-radius: 12px;
}
body.theme-clinic .form-control:focus, body.theme-clinic .form-select:focus, body.theme-clinic input[type="date"]:focus, body.theme-clinic .extend-period select:focus {
  background-color: #fff; border-color: #475B40; color: #1F2A1B; box-shadow: 0 0 0 3px rgba(71, 91, 64, .15); outline: none;
}
body.theme-clinic .form-control::placeholder { color: #9A9A94; }
body.theme-clinic .form-select option { background-color: #fff; color: #1F2A1B; }
body.theme-clinic .form-label, body.theme-clinic .create-user-form label, body.theme-clinic .edit-user-form label { color: #2A3E2A; font-weight: 500; }
body.theme-clinic .form-text { color: #6B6B6B; }
body.theme-clinic .form-check-input { background-color: #fff; border: 1px solid #C9CEC4; }
body.theme-clinic .form-check-input:checked { background-color: #475B40; border-color: #475B40; }
body.theme-clinic .invalid-feedback, body.theme-clinic .error { color: #B3261E; }

/* бейджі й статуси: світлий фон, темний текст того ж відтінку */
body.theme-clinic .bg-success, body.theme-clinic .badge-success, body.theme-clinic .status.success { background-color: #EEF3EA !important; color: #2F5A2A !important; border-color: #D5E0CD !important; }
body.theme-clinic .bg-info { background-color: #EAF1F8 !important; color: #2E4A66 !important; border-color: #CFDCEA !important; }
body.theme-clinic .bg-secondary { background-color: #F1F1EE !important; color: #5A5A55 !important; border-color: #E0E0DA !important; }
body.theme-clinic .bg-warning, body.theme-clinic .status.pending { background-color: #F7EEDF !important; color: #6E4E1F !important; border-color: #EBDCC2 !important; }
body.theme-clinic .bg-danger, body.theme-clinic .badge-danger, body.theme-clinic .status.failed { background-color: #FBEDEA !important; color: #8A2B1F !important; border-color: #F1D3CD !important; }

/* панель адміністратора й аналітика */
body.theme-clinic .admin-dashboard, body.theme-clinic .admin-dashboard h2, body.theme-clinic .users-header h2, body.theme-clinic .header-actions h2 { color: #2A3E2A; }
body.theme-clinic .stat-card { background: #fff; border: 1px solid #E5E5E5; border-radius: 20px; box-shadow: none; }
body.theme-clinic .stat-card h3, body.theme-clinic .stat-label { color: #6B6B6B; font-family: 'Inter', sans-serif; font-weight: 500; letter-spacing: 0; }
body.theme-clinic .stat-value, body.theme-clinic .stat-number { color: #2A3E2A; font-family: 'Montserrat', sans-serif; font-weight: 300; }
body.theme-clinic .analytics-card, body.theme-clinic .stats-selector { background: #fff; border: 1px solid #E5E5E5; border-radius: 20px; }
body.theme-clinic .analytics-card h3 { color: #2A3E2A; }
body.theme-clinic .chart-container { background: #FAF8F4; border: 1px solid #E5E5E5; border-radius: 16px; }
body.theme-clinic .selector-btn { background: #fff; color: #2A3E2A; border: 1px solid #E5E5E5; }
body.theme-clinic .selector-btn:hover { background: #F4F6F1; }
body.theme-clinic .selector-btn.active { background: #2A3E2A; color: #fff; border-color: #2A3E2A; }

/* керування відео */
body.theme-clinic .admin-videos { background: transparent; }
body.theme-clinic .info-hint { background: #fff; border: 1px solid #E5E5E5; color: #6B6B6B; border-radius: 16px; }
body.theme-clinic .info-hint code { background: #F4F6F1; color: #2A3E2A; }
body.theme-clinic .info-hint .sub { color: #6B6B6B; }

/* бічна панель admin/base.html (запрошення, періоди доступу) */
body.theme-clinic .sidebar { background: #fff; border-right: 1px solid #E5E5E5; }
body.theme-clinic .sidebar-header { border-bottom: 1px solid #E5E5E5; }
body.theme-clinic .sidebar .logo { color: #2A3E2A; }
body.theme-clinic .sidebar .nav-link { color: #2A3E2A; opacity: 1; border-radius: 12px; }
body.theme-clinic .sidebar .nav-link:hover { background: #F4F6F1; color: #475B40; }
body.theme-clinic .sidebar .nav-link.active { background: #2A3E2A; color: #fff; }
body.theme-clinic .page-title { font-family: 'Montserrat', sans-serif; font-weight: 300; color: #2A3E2A; }

/* admin/base.html (періоди доступу, запрошення): сторінки писались під Bootstrap, якого не підключено —
   таблиця без ширини й відступів, кнопки без базового вигляду. Лише в межах .main-content цього макета. */
body.theme-clinic .main-content .table { width: 100%; border-collapse: collapse; font-size: 14px; }
body.theme-clinic .main-content .table th, body.theme-clinic .main-content .table td { padding: .75rem .9rem; text-align: left; vertical-align: middle; border-bottom: 1px solid #EFEFEA; }
body.theme-clinic .main-content .table-responsive { overflow-x: auto; }
body.theme-clinic .main-content .d-flex { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
body.theme-clinic .main-content .btn { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .95rem; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; line-height: 1.2; white-space: nowrap; }
body.theme-clinic .main-content .btn-sm { padding: .3rem .7rem; font-size: 12px; }
body.theme-clinic .main-content .badge { display: inline-block; padding: .3rem .65rem; border-radius: 999px; font-size: 12px; font-weight: 600; }
body.theme-clinic .badge-info { background-color: #EAF1F8 !important; color: #2E4A66 !important; }
body.theme-clinic .main-content .card-header { padding: 1rem 1.5rem; }
body.theme-clinic .main-content .card-header h5 { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 15px; color: #2A3E2A; margin: 0; }
body.theme-clinic .main-content .extend-period select { padding: .3rem .5rem; font-size: 12px; }

/* заголовки сторінок адмінки — тонкі, як на сайті (шаблони ставили 600) */
body.theme-clinic .admin-dashboard h2, body.theme-clinic .users-header h2, body.theme-clinic .header-actions h2,
body.theme-clinic .page-title, body.theme-clinic .container > h2, body.theme-clinic .container-fluid > h2 {
  font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.02em; color: #2A3E2A;
}

@media (max-width: 768px) {
  .theme-clinic .clinic-topbar .container span { display: none; }
  .theme-clinic .navbar .navbar-nav { display: flex; }
  .theme-clinic .navbar span.nav-link { display: none; }
  .theme-clinic .login-container { margin: 1rem auto 2rem; padding: 2rem 1.25rem; }
  .theme-clinic .video-container { padding: 1rem; border-radius: 20px; }
}