/* ── Переменные ─────────────────────────────────────────────────────────── */
:root {
    --r-primary:    #2563eb;
    --r-primary-h:  #1d4ed8;
    --r-primary-l:  #eff6ff;

    --r-success:    #16a34a;
    --r-success-l:  #f0fdf4;
    --r-danger:     #dc2626;
    --r-danger-l:   #fef2f2;
    --r-warning:    #d97706;
    --r-warning-l:  #fffbeb;
    --r-info:       #0284c7;
    --r-info-l:     #f0f9ff;

    --r-gray-50:    #f9fafb;
    --r-gray-100:   #f3f4f6;
    --r-gray-200:   #e5e7eb;
    --r-gray-300:   #d1d5db;
    --r-gray-400:   #9ca3af;
    --r-gray-500:   #6b7280;
    --r-gray-600:   #4b5563;
    --r-gray-700:   #374151;
    --r-gray-800:   #1f2937;

    --r-radius:     6px;
    --r-radius-lg:  10px;
    --r-shadow:     0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --r-shadow-lg:  0 10px 25px rgba(0,0,0,.15);
    --r-font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Сброс ──────────────────────────────────────────────────────────────── */
.r-layout, .r-layout *, .r-layout *::before, .r-layout *::after,
.r-widget, .r-widget *, .r-widget *::before, .r-widget *::after {
    box-sizing: border-box;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.r-layout {
    font-family: var(--r-font);
    color: var(--r-gray-800);
    min-height: 100vh;
    padding-bottom: 40px;
}

.r-topbar {
    display:        flex;
    align-items:    center;
    gap:            20px;
    flex-wrap:      wrap;
    padding:        18px 24px 14px;
    border-bottom:  1px solid var(--r-gray-200);
    margin-bottom:  20px;
    background:     #fff;
}

.r-topbar__title {
    font-size:   22px;
    font-weight: 700;
    color:       var(--r-gray-800);
    margin:      0;
    white-space: nowrap;
}

/* ── Вкладки ────────────────────────────────────────────────────────────── */
.r-tabs {
    display: flex;
    gap:     4px;
}

.r-tab {
    padding:        7px 16px;
    border:         1px solid var(--r-gray-200);
    border-radius:  var(--r-radius);
    background:     #fff;
    color:          var(--r-gray-600);
    font-size:      13px;
    font-weight:    500;
    cursor:         pointer;
    transition:     background .15s, color .15s, border-color .15s;
    white-space:    nowrap;
}

.r-tab:hover {
    background:    var(--r-gray-100);
    border-color:  var(--r-gray-300);
}

.r-tab--active {
    background:    var(--r-primary);
    border-color:  var(--r-primary);
    color:         #fff;
}

/* ── Секция ─────────────────────────────────────────────────────────────── */
.r-section {
    padding:       16px 24px;
    border-bottom: 1px solid var(--r-gray-100);
}

.r-section__title {
    font-size:     14px;
    font-weight:   600;
    color:         var(--r-gray-700);
    margin-bottom: 12px;
}

/* ── Статистика ─────────────────────────────────────────────────────────── */
.r-stats {
    display:        flex;
    gap:            1px;
    background:     var(--r-gray-200);
    border-bottom:  1px solid var(--r-gray-200);
    overflow-x:     auto;
}

.r-stat {
    flex:        1 1 100px;
    padding:     14px 18px;
    background:  #fff;
    text-align:  center;
    transition:  background .1s;
    min-width:   80px;
}

.r-stat:hover {
    background: var(--r-gray-50);
}

.r-stat__val {
    font-size:   26px;
    font-weight: 700;
    line-height: 1;
}

.r-stat__label {
    font-size:  11px;
    color:      var(--r-gray-500);
    margin-top: 3px;
    font-weight: 500;
}

/* ── Фильтры ────────────────────────────────────────────────────────────── */
.r-filters {
    display:      flex;
    gap:          10px;
    align-items:  center;
    flex-wrap:    wrap;
    padding:      14px 24px;
    border-bottom: 1px solid var(--r-gray-100);
    background:   var(--r-gray-50);
}

/* ── Кнопки ─────────────────────────────────────────────────────────────── */
.r-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       7px 14px;
    border-radius: var(--r-radius);
    font-size:     13px;
    font-weight:   500;
    cursor:        pointer;
    border:        1px solid transparent;
    transition:    background .15s, border-color .15s, opacity .15s;
    white-space:   nowrap;
    font-family:   var(--r-font);
    line-height:   1.4;
}

.r-btn:disabled {
    opacity: .55;
    cursor:  default;
}

.r-btn--primary {
    background:  var(--r-primary);
    color:       #fff;
    border-color: var(--r-primary);
}

.r-btn--primary:hover:not(:disabled) {
    background:   var(--r-primary-h);
    border-color: var(--r-primary-h);
}

.r-btn--ghost {
    background:   #fff;
    color:        var(--r-gray-700);
    border-color: var(--r-gray-300);
}

.r-btn--ghost:hover:not(:disabled) {
    background: var(--r-gray-100);
}

.r-btn--danger {
    background:   var(--r-danger);
    color:        #fff;
    border-color: var(--r-danger);
}

.r-btn--danger:hover:not(:disabled) {
    background: #b91c1c;
}

.r-btn--sm {
    padding:   4px 10px;
    font-size: 12px;
}

.r-ml-auto { margin-left: auto; }

/* ── Inputs ─────────────────────────────────────────────────────────────── */
.r-input, .r-select, .r-textarea {
    padding:       6px 10px;
    border:        1px solid var(--r-gray-300);
    border-radius: var(--r-radius);
    font-size:     13px;
    font-family:   var(--r-font);
    color:         var(--r-gray-800);
    background:    #fff;
    transition:    border-color .15s, box-shadow .15s;
    outline:       none;
}

.r-input:focus, .r-select:focus, .r-textarea:focus {
    border-color: var(--r-primary);
    box-shadow:   0 0 0 3px rgba(37,99,235,.12);
}

.r-textarea {
    resize: vertical;
    width:  100%;
}

/* ── Таблица ────────────────────────────────────────────────────────────── */
.r-table-wrap {
    overflow-x: auto;
}

.r-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       13px;
}

.r-table th {
    padding:      10px 16px;
    text-align:   left;
    font-size:    11px;
    font-weight:  600;
    color:        var(--r-gray-500);
    text-transform: uppercase;
    letter-spacing: .5px;
    background:   var(--r-gray-50);
    border-bottom: 1px solid var(--r-gray-200);
    white-space:  nowrap;
}

.r-table td {
    padding:      10px 16px;
    border-bottom: 1px solid var(--r-gray-100);
    vertical-align: middle;
}

.r-table--clickable tbody tr {
    cursor:     pointer;
    transition: background .1s;
}

.r-table--clickable tbody tr:hover {
    background: var(--r-primary-l);
}

/* ── Бейджи статусов ────────────────────────────────────────────────────── */
.r-badge {
    display:       inline-flex;
    align-items:   center;
    padding:       2px 8px;
    border-radius: 99px;
    font-size:     11px;
    font-weight:   600;
    white-space:   nowrap;
    background:    var(--r-gray-100);
    color:         var(--r-gray-600);
}

.r-badge--pending   { background: var(--r-warning-l); color: var(--r-warning); }
.r-badge--confirmed { background: var(--r-info-l);    color: var(--r-info);    }
.r-badge--active    { background: var(--r-success-l); color: var(--r-success); }
.r-badge--overdue   { background: var(--r-danger-l);  color: var(--r-danger);  }
.r-badge--completed { background: var(--r-gray-100);  color: var(--r-gray-600);}
.r-badge--canceled  { background: var(--r-gray-100);  color: var(--r-gray-400);}

/* ── Пагинация ──────────────────────────────────────────────────────────── */
.r-pagination {
    display:     flex;
    gap:         4px;
    align-items: center;
    padding:     14px 24px;
    flex-wrap:   wrap;
}

.r-page-btn {
    min-width:     32px;
    height:        32px;
    padding:       0 8px;
    border:        1px solid var(--r-gray-200);
    border-radius: var(--r-radius);
    background:    #fff;
    color:         var(--r-gray-700);
    font-size:     13px;
    cursor:        pointer;
    transition:    background .1s;
}

.r-page-btn:hover:not(:disabled) {
    background: var(--r-gray-100);
}

.r-page-btn:disabled {
    opacity: .4;
    cursor:  default;
}

.r-page-btn--active {
    background:   var(--r-primary);
    border-color: var(--r-primary);
    color:        #fff;
}

/* ── Пустое состояние ───────────────────────────────────────────────────── */
.r-empty {
    text-align:  center;
    padding:     60px 24px;
    color:       var(--r-gray-500);
}

.r-empty__icon {
    font-size:     48px;
    margin-bottom: 12px;
}

.r-empty__text {
    font-size: 15px;
}

/* ── Спиннер ────────────────────────────────────────────────────────────── */
@keyframes r-spin { to { transform: rotate(360deg); } }

.r-spinner {
    display:       inline-block;
    width:         20px;
    height:        20px;
    border:        2px solid var(--r-gray-200);
    border-top-color: var(--r-primary);
    border-radius: 50%;
    animation:     r-spin .7s linear infinite;
    flex-shrink:   0;
}

.r-spinner--sm {
    width:  14px;
    height: 14px;
    border-width: 2px;
}

.r-spinner--lg {
    width:        36px;
    height:       36px;
    border-width: 3px;
}

/* ── Модальное окно ─────────────────────────────────────────────────────── */
.r-modal-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(17,24,39,.5);
    z-index:         9000;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         20px;
    backdrop-filter: blur(2px);
}

.r-modal {
    background:    #fff;
    border-radius: var(--r-radius-lg);
    box-shadow:    var(--r-shadow-lg);
    width:         100%;
    max-width:     560px;
    max-height:    90vh;
    display:       flex;
    flex-direction: column;
    overflow:      hidden;
}

.r-modal__head {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     16px 20px;
    border-bottom: 1px solid var(--r-gray-200);
    flex-shrink: 0;
}

.r-modal__title {
    font-size:   16px;
    font-weight: 600;
    flex:        1;
}

.r-modal__close {
    background:    none;
    border:        none;
    color:         var(--r-gray-400);
    font-size:     18px;
    cursor:        pointer;
    padding:       2px 6px;
    border-radius: var(--r-radius);
    line-height:   1;
    transition:    color .1s;
}

.r-modal__close:hover { color: var(--r-gray-700); }

.r-modal__body {
    padding:    20px;
    overflow-y: auto;
    flex:       1;
}

.r-modal__foot {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     14px 20px;
    border-top:  1px solid var(--r-gray-200);
    flex-shrink: 0;
}

/* ── Детальные строки ───────────────────────────────────────────────────── */
.r-detail-row {
    display:     flex;
    gap:         12px;
    padding:     7px 0;
    border-bottom: 1px solid var(--r-gray-50);
    font-size:   13px;
}

.r-detail-row:last-of-type { border-bottom: none; }

.r-detail-row__key {
    width:       120px;
    min-width:   120px;
    color:       var(--r-gray-500);
    font-weight: 500;
}

.r-detail-row__val { color: var(--r-gray-800); }

/* ── Формы ──────────────────────────────────────────────────────────────── */
.r-form-row {
    display:   grid;
    gap:       12px;
    grid-template-columns: repeat(2, 1fr);
}

.r-form-row--3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 600px) {
    .r-form-row, .r-form-row--3 {
        grid-template-columns: 1fr;
    }
}

.r-form-group { display: flex; flex-direction: column; gap: 4px; }

.r-form-label {
    font-size:   12px;
    font-weight: 600;
    color:       var(--r-gray-600);
}

.r-checkbox-label {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   13px;
    cursor:      pointer;
    user-select: none;
}

.r-checkbox {
    width:  15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--r-primary);
}

/* ── Алерты ─────────────────────────────────────────────────────────────── */
.r-alert {
    padding:       10px 14px;
    border-radius: var(--r-radius);
    font-size:     13px;
    line-height:   1.5;
}

.r-alert--success { background: var(--r-success-l); color: var(--r-success); }
.r-alert--error   { background: var(--r-danger-l);  color: var(--r-danger);  }
.r-alert--info    { background: var(--r-info-l);    color: var(--r-info);    }

/* ── Отступы ────────────────────────────────────────────────────────────── */
.r-mt-1 { margin-top:    6px;  }
.r-mt-2 { margin-top:    12px; }
.r-mb-1 { margin-bottom: 6px;  }
.r-mb-2 { margin-bottom: 12px; }

/* ── Текст ──────────────────────────────────────────────────────────────── */
.r-text-sm    { font-size: 12px; }
.r-text-bold  { font-weight: 600; }
.r-text-muted { color: var(--r-gray-400); }

/* ── Таблица тарифов ────────────────────────────────────────────────────── */
.r-tiers {
    border-collapse: collapse;
    font-size: 13px;
    width: auto;
}

.r-tiers th, .r-tiers td {
    padding:       5px 10px;
    border:        1px solid var(--r-gray-200);
    text-align:    left;
}

.r-tiers th {
    background:  var(--r-gray-50);
    font-weight: 600;
    font-size:   11px;
    color:       var(--r-gray-600);
}

.r-tiers td .r-input { padding: 4px 8px; }

/* ── Календарь ──────────────────────────────────────────────────────────── */
.r-calendar {
    border:        1px solid var(--r-gray-200);
    border-radius: var(--r-radius-lg);
    margin:        0 24px;
    overflow:      hidden;
}

.r-calendar__nav {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px 16px;
    background:      var(--r-gray-50);
    border-bottom:   1px solid var(--r-gray-200);
}

.r-calendar__title {
    font-size:   15px;
    font-weight: 600;
}

.r-calendar__grid {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
}

.r-calendar__dow {
    padding:     8px 4px;
    text-align:  center;
    font-size:   11px;
    font-weight: 600;
    color:       var(--r-gray-500);
    background:  var(--r-gray-50);
    border-right: 1px solid var(--r-gray-100);
    border-bottom: 1px solid var(--r-gray-200);
}

.r-calendar__dow:last-child { border-right: none; }

.r-calendar__day {
    min-height:  72px;
    padding:     6px;
    border-right: 1px solid var(--r-gray-100);
    border-bottom: 1px solid var(--r-gray-100);
    font-size:   13px;
    position:    relative;
}

.r-calendar__day:nth-child(7n) { border-right: none; }
.r-calendar__day--empty        { background: var(--r-gray-50); }
.r-calendar__day--free         { background: #fff; }
.r-calendar__day--busy         { background: #fef9c3; }
.r-calendar__day--full         { background: var(--r-danger-l); }

.r-calendar__day-num {
    font-weight: 600;
    font-size:   13px;
    color:       var(--r-gray-700);
}

.r-calendar__day-qty {
    margin-top: 4px;
    font-size:  11px;
    font-weight: 600;
    color:      var(--r-danger);
    background: rgba(220,38,38,.08);
    border-radius: 3px;
    padding:    1px 4px;
    display:    inline-block;
}

/* ── Продуктовый виджет аренды ──────────────────────────────────────────── */
.r-widget {
    font-family:   var(--r-font);
    border:        1px solid var(--r-gray-200);
    border-radius: var(--r-radius-lg);
    box-shadow:    var(--r-shadow);
    overflow:      hidden;
    margin:        16px 0;
    max-width:     420px;
    color:         var(--r-gray-800);
}

.r-widget__head {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     14px 18px;
    background:  var(--r-primary-l);
    border-bottom: 1px solid #dbeafe;
}

.r-widget__head-title {
    font-size:   16px;
    font-weight: 700;
    margin:      0;
    color:       var(--r-primary);
}

.r-widget__body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Выбор дат */
.r-date-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.r-date-label {
    display:     block;
    font-size:   11px;
    font-weight: 600;
    color:       var(--r-gray-600);
    margin-bottom: 4px;
}

.r-date-input {
    width:         100%;
    padding:       8px 10px;
    border:        1px solid var(--r-gray-300);
    border-radius: var(--r-radius);
    font-size:     14px;
    font-family:   var(--r-font);
    color:         var(--r-gray-800);
    outline:       none;
    transition:    border-color .15s, box-shadow .15s;
}

.r-date-input:focus {
    border-color: var(--r-primary);
    box-shadow:   0 0 0 3px rgba(37,99,235,.12);
}

.r-date-input:disabled {
    background: var(--r-gray-50);
    color:      var(--r-gray-400);
}

/* Количество */
.r-qty-row {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-size:   13px;
}

/* Полоса доступности */
.r-avail-bar {
    height:        6px;
    background:    var(--r-gray-200);
    border-radius: 99px;
    overflow:      hidden;
    margin-bottom: 6px;
}

.r-avail-fill {
    height:     100%;
    border-radius: 99px;
    transition: width .3s;
}

/* Итоговая сумма */
.r-price-summary {
    background:    var(--r-gray-50);
    border:        1px solid var(--r-gray-200);
    border-radius: var(--r-radius);
    padding:       10px 14px;
}

.r-price-row {
    display:         flex;
    justify-content: space-between;
    font-size:       13px;
    padding:         3px 0;
    color:           var(--r-gray-600);
}

.r-price-row--total {
    padding-top:  8px;
    margin-top:   6px;
    border-top:   1px solid var(--r-gray-200);
    font-size:    16px;
    font-weight:  700;
    color:        var(--r-gray-800);
}

/* Мои аренды */
.r-my-rentals__title {
    font-size:     12px;
    font-weight:   600;
    color:         var(--r-gray-500);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom:  8px;
}

.r-my-rental-row {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       7px 0;
    border-bottom: 1px solid var(--r-gray-100);
    font-size:     12px;
    flex-wrap:     wrap;
}

.r-my-rental-row:last-child { border-bottom: none; }