/* ================================================================
   keys.css — стили главной страницы (облачные ключи + ключи)
   Подключается в _Layout.cshtml как <link rel="stylesheet" href="~/css/keys.css">
   ================================================================ */

/* Глобальные ссылки (Проезды / История) */
.global-links {
    display: flex;
    gap: 8px;
    margin: 14px 12px 0;
}

.glink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1.5px solid #c5d4e0;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #003A6E;
    text-decoration: none;
    cursor: pointer;
}

.glink i {
    font-size: 16px;
    color: #5b7a99;
}

/* Секция (заголовок + список карточек) */
.sec {
    margin: 20px 12px 0;
}

.sec-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #d7e3ed;
    margin-bottom: 10px;
}

.sec-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #003A6E;
}

.sec-title {
    font-size: 16px;
    font-weight: 700;
    color: #003A6E;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex: 1;
}

.sec-add {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 20px;
    background: #003A6E;
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Rubik', sans-serif;
    text-decoration: none;
}

.sec-add i {
    font-size: 16px;
}

/* Список карточек */
.key-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Карточка ключа */
.kcard {
    border-radius: 12px;
    border: 0.5px solid #d4dde8;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.3s, background 0.3s;
}

.kcard.inactive {
    opacity: 0.5;
}

/* Состояния облачного ключа */
.kcard.opening {
    border-color: #b5d4f4;
    background: #f0f7ff;
}

.kcard.opened {
    border-color: #9fe1cb;
    background: #f0faf5;
}

/* Верхняя часть карточки */
.kcard-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 13px 10px;
}

.kinfo {
    flex: 1;
    min-width: 0;
}

.ksub {
    font-size: 12px;
    color: #5b7a99;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 3px;
    transition: color 0.3s;
}

.kcard.opening .ksub { color: #185fa5; }
.kcard.opened  .ksub { color: #0f6e56; }

.ksub i {
    font-size: 14px;
}

.kname {
    font-size: 15px;
    font-weight: 700;
    color: #003A6E;
    line-height: 1.3;
}

/* Пинкод — кликабельное большое значение */
.kpin {
    font-size: 22px;
    font-weight: 700;
    color: #003A6E;
    margin-top: 4px;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: color 0.2s;
}

/* Подсказка состояния замка */
.state-hint {
    font-size: 11px;
    font-weight: 600;
    height: 16px;
    margin-top: 3px;
    transition: color 0.3s;
}

.kcard.opening .state-hint { color: #185fa5; }
.kcard.opened  .state-hint { color: #1d9e75; }

/* Кнопка замка (облачный ключ) */
.cloud-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #003A6E;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.3s;
}

.cloud-btn i {
    font-size: 22px;
    transition: transform 0.3s;
}

.cloud-btn.processing { background: #185fa5; }
.cloud-btn.opened     { background: #1d9e75; }
.cloud-btn.opened i   { transform: rotate(-15deg); }

/* Тоггл активности физического ключа */
.toggle {
    width: 44px;
    height: 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 2px 3px;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.2s;
}

.toggle.on  { background: #003A6E; justify-content: flex-end; }
.toggle.off { background: #c5d4e0; justify-content: flex-start; }

.toggle-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-thumb i { font-size: 13px; }
.toggle.on  .toggle-thumb i { color: #003A6E; }
.toggle.off .toggle-thumb i { color: #8aaccc; }

/* Нижняя панель карточки */
.kcard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 0.5px solid #edf1f6;
    padding: 9px 13px 11px;
    gap: 8px;
    transition: border-color 0.3s;
}

.kcard.opening .kcard-footer { border-top-color: #b5d4f4; }
.kcard.opened  .kcard-footer { border-top-color: #9fe1cb; }

.kbtns {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.kbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 22px;
    border: 1.5px solid;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: #fff;
    white-space: nowrap;
    font-family: 'Rubik', sans-serif;
}

.kbtn i { font-size: 16px; }

.kbtn-sec { border-color: #185fa5; color: #0c447c; }
.kbtn-del { border-color: #003A6E; color: #003A6E; }

/* Кнопка-иконка (редактировать) */
.kbtn-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #003A6E;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

.kbtn-icon i { font-size: 18px; }

/* Панель редактирования */
.kedit {
    display: none;
    border-top: 0.5px solid #d4dde8;
    padding: 13px 13px 15px;
    background: #f7fafd;
}

.kedit.open { display: block; }

.kedit-label {
    font-size: 10px;
    font-weight: 700;
    color: #5b7a99;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 5px;
}

.kedit-field { margin-bottom: 12px; }

.kedit-input {
    width: 100%;
    border: 1.5px solid #c5d4e0;
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 14px;
    color: #003A6E;
    font-family: 'Rubik', sans-serif;
    outline: none;
    background: #fff;
}

.kedit-input:focus { border-color: #003A6E; }

/* Радиолист считывателей */
.radio-list { display: flex; flex-direction: column; }

.radio-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 2px;
    border-bottom: 0.5px solid #e8eef5;
    cursor: pointer;
}

.radio-row:last-child { border-bottom: none; }

.radio-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #c5d4e0;
    flex-shrink: 0;
    background: #fff;
}

.radio-dot.sel {
    border-color: #003A6E;
    background: #003A6E;
    box-shadow: inset 0 0 0 4px #fff;
}

.radio-name { font-size: 14px; color: #003A6E; }

/* Список зон доступа */
.toggle-list { display: flex; flex-direction: column; }

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 2px;
    border-bottom: 0.5px solid #e8eef5;
}

.toggle-row:last-child { border-bottom: none; }

.toggle-row-name { font-size: 14px; color: #003A6E; }

/* Строка «Шаблон» — отделена чертой сверху */
.toggle-row.tmpl {
    margin-top: 6px;
    padding-top: 13px;
    border-top: 1px solid #c5d4e0;
    border-bottom: none;
}