@import './fonts.css';

:root {
    --font-family: "ttsevers", sans-serif;
    --second-family: "Roboto", sans-serif;
    --third-family: "Ubuntu", sans-serif;
    --font3: "Inter", sans-serif;
    --font4: "Arial", sans-serif;
    --font5: "Montserrat", sans-serif;
    --font6: "Montserrat_Alternates", sans-serif;
}

[class$="-container-main"] {
    display: flex;
}

/* [class$="-content"] {
    flex: 1;
    background: white;
    padding: 20px;
    border-radius: 8px;
} */
.main-content {
    height: fit-content;
    padding: 0 16px 30px 16px;
}
.light-theme .main-content {
    background: #1c1b1c;
    height: auto;
    min-height: inherit;
}
.light-theme .container-fluid {
    background: #1c1b1c;
}
.main-content-font > .title-h2 {
    border-bottom: 1px solid #e20714;
    margin-bottom: 20px;
    padding-bottom: 20px;
}
.main-content-action__title {
    border-bottom: 1px solid #e20714;
    margin-bottom: 20px;
}
.main-content-action__title h2 {
    font-weight: 400;
    font-size: 28px;
    line-height: 86%;
    letter-spacing: 0.02em;
    color: #000;
    padding-top: 10px;
    margin-left: 10px;
    margin-bottom: 20px;
}
.light-theme .main-content-action__title h2 {
    color: #fff;
}
.main-content-font > .title-h2 h2 {
    font-weight: 400;
    font-size: 28px;
    line-height: 86%;
    letter-spacing: 0.02em;
    color: #000;
    margin-top: 34px;
    margin-left: 10px;
}
.light-theme .main-content-font > .title-h2 h2 {
    color: #fff;
}

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    font-size: 14px;
}
.light-theme .pagination {
    color: #fff;
}

.pagination-left {
    display: flex;
    position: relative;
    align-items: center;
    gap: 8px;
}

.btn-i-actions-pagination {
    position: absolute;
    left: 42px;
    top: 41%;
}

.pagination-select {
    width: 62px;
    padding: 4px 8px 4px 13px;
    border-radius: 6px;
    border: 1px solid #e74c3c; /* красная рамка, как на скрине */
    appearance: none;
    background-color: white;
    font-size: 14px;
    cursor: pointer;
}

.light-theme .pagination-select {
    background-color: #1c1b1c;
    color: white;
}

.pagination-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.light-theme .pagination-nav {
    color: #fff;
}
.pagination-nav {
    cursor: default;
    user-select: none;
    text-decoration: none;
    padding: 5px;
    cursor: pointer;
}
.pagination-nav.disabled {
    color: #ccc;
    opacity: 0;
    pointer-events: none;
    cursor: default;
}


.settings-sidebar ul {
    gap: 10px;
    display: grid;
    list-style: none;
    padding: 0;
    margin: 0;
}

.settings-sidebar li {
    position: relative;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 4px;
    background: #fff;
}
.light-theme .settings-sidebar li {
    background: #1c1b1c;
}

.settings-sidebar li.active {
    border: 1px solid #e20714;
    background: #fff;
}
.settings-sidebar li:not(.active):hover {
    box-shadow: 0 0 0 1px #e20714;
}
.settings-sidebar li:hover a {
    color: #e20714;
}
.settings-sidebar li.active a {
    color: #e20714;
}
.light-theme .settings-sidebar li.active {
    background: #1c1b1c;
}
.light-theme .active .settings-sidebar__item {
    color: #e20714;
}
.light-theme .settings-sidebar__item:hover {
    color: #e20714;
}


.btn-theme {
    border: none;
    border-radius: 100px;
    cursor: pointer;
    border-radius: 4px;
    text-decoration: none;
    color: #000;
    padding: 12px 20px !important;
}
.btn-theme a {
    color: #000;
}
.breadcrumb {
    margin-bottom: 10px;
}
.breadcrumb a {
    margin-right: 5px;
}
.light-theme .btn-theme a {
    color: #fff;
    border-radius: 100%;
}
.btn-theme a:hover {
    text-decoration: none;
    color: #a70909;
}

.btn-theme:hover {
    background: #e20714;
    color: #fff;
}

.light-theme .btn-theme:hover {
    background: #e20714;
    color: #fff;
}
.btn-theme:hover a {
    text-decoration: none;
    color: #fff;
}
.btn-red {
    border-radius: 100px;
    background: #e20714;
    color: #fff !important;
}
.btn-red a {
    text-decoration: none;
    color: #fff;
    padding: 10px 20px;
    height: 16px;
    font-weight: 500;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: 0.01em;
    text-align: center;
    display: block;
}
.btn-red a:active {
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: 0.01em;
    text-align: center;
    color: #fff;
}

.btn-red_no-a {
    color: #fff;
    padding: 13px 20px;
}

.btn-outline {
    display: flex;
    box-shadow: 0 0 0 1px #e20714;
    border-radius: 100px;
    padding: 10px 0px;
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0.01em;
    text-align: center;
    justify-content: center;
    color: #000;
    gap: 5px;
    white-space: nowrap;
}
.btn-add {
    background: #e20714;
    color: #fff;
}
.btn-add:hover {
    background: #fff;
    color: #000;
}

.btn-action-pt10 {
  padding-top: 10px !important;
}
.btn-action-pb10 {
  padding-bottom: 10px !important;
}
.actions-cell {
    display: grid;
    column-gap: .5rem;
    align-items: center;
    grid-template-columns: 120px 80px 80px;
}
.light-theme .btn-outline {
    color: #fff;
    background: #1c1b1c;
    display: flex;
    align-items: center;
}
.light-theme .btn-outline:hover {
    background-color: #e20714   ;
}
.btn.btn-outline a {
    text-decoration: none;
}
.btn-outline:hover .btn-i-edit {
    background-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="red" xmlns="http://www.w3.org/2000/svg"><path d="M8.25 3.00017H3C2.60218 3.00017 2.22064 3.15821 1.93934 3.43951C1.65804 3.72081 1.5 4.10234 1.5 4.50017V15.0002C1.5 15.398 1.65804 15.7795 1.93934 16.0608C2.22064 16.3421 2.60218 16.5002 3 16.5002H13.5C13.8978 16.5002 14.2794 16.3421 14.5607 16.0608C14.842 15.7795 15 15.398 15 15.0002V9.75017M13.875 1.87517C14.1734 1.5768 14.578 1.40918 15 1.40918C15.422 1.40918 15.8266 1.5768 16.125 1.87517C16.4234 2.17354 16.591 2.57821 16.591 3.00017C16.591 3.42213 16.4234 3.8268 16.125 4.12517L9 11.2502L6 12.0002L6.75 9.00017L13.875 1.87517Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>');;
}

.btn-outline-action {
    text-decoration: none;
    color: #000;
    padding: 10px 20px;
}
.btn-outline-action:hover {
    background: #fff;
    color: #000 !important;
}


.btn-disabled {
    background: #ccc;
    padding: 10px 20px;
    border-radius: 100px;
    color: #666;
    cursor: not-allowed;
}


[class*="-grid"] > div:not(.device-search) {
    border-radius: 100px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.43;
    letter-spacing: 0.01em;
    text-align: start;
    cursor: pointer;
    color: #000;
    overflow-wrap: anywhere;
}

.light-theme [class*="-grid"] > div:not(.device-search):not(.grid-header-about):not(.form-actions):not(.form-grid__password-wrapper):not(.form-grid__toggle-password):not(.form-grid__password-input):not(.color-picker):not(.threshold-block):not(.input-wrapper) {
    color: #fff;
    background: #484647;
}

.light-theme [class*="-grid"]:not(.info-grid.grid-8):not(.form-grid):not(.charts-grid):not(.form-grid__username-label):not(.form-grid__password-label):not(.form-grid__password-wrapper):not(.form-grid__toggle-password):not(.form-grid__password-input):not(.input-wrapper) {
    border: 0.2px solid #fff;
}

.light-theme .about-content .info-grid.grid-8 {
    background: #1c1b1c;
}

.light-theme [class*="-grid"]:not(.form-grid):not(.charts-grid):not(.form-grid__username-label):not(.form-grid__password-label):not(.form-grid__username-input):not(.form-grid__password-wrapper):not(.form-grid__toggle-password):not(.form-grid__password-input):not(.input-wrapper) {
    background: #484647;
}


/* Исключения */
[class*="-grid"] .grid-header,
[class*="-grid"] .chart-card,
[class*="-grid"] .label-box,
[class*="-grid"] .label-count,
[class*="-grid"] .color-swatch,
[class*="-grid"] .custom-select,
[class*="-grid"] .form-actions,
[class*="-grid"] .form-grid__password-wrapper,
[class*="-grid"] .form-grid__toggle-password,
[class*="-grid"] canvas {
}

.status-indicator {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}
.fa-search-button {
    position: absolute;
    margin-right: 7px;
    border: none;
    background: none;
    cursor: pointer;
}
.fa-search {
    width: 18px;
    height: 18px;
    display: block;
    background-size: contain; /* или cover — если нужно, чтобы иконка не обрезалась */
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.6 18L10.3 11.7C9.8 12.1 9.225 12.4167 8.575 12.65C7.925 12.8833 7.23333 13 6.5 13C4.68333 13 3.14583 12.3708 1.8875 11.1125C0.629167 9.85417 0 8.31667 0 6.5C0 4.68333 0.629167 3.14583 1.8875 1.8875C3.14583 0.629167 4.68333 0 6.5 0C8.31667 0 9.85417 0.629167 11.1125 1.8875C12.3708 3.14583 13 4.68333 13 6.5C13 7.23333 12.8833 7.925 12.65 8.575C12.4167 9.225 12.1 9.8 11.7 10.3L18 16.6L16.6 18ZM6.5 11C7.75 11 8.8125 10.5625 9.6875 9.6875C10.5625 8.8125 11 7.75 11 6.5C11 5.25 10.5625 4.1875 9.6875 3.3125C8.8125 2.4375 7.75 2 6.5 2C5.25 2 4.1875 2.4375 3.3125 3.3125C2.4375 4.1875 2 5.25 2 6.5C2 7.75 2.4375 8.8125 3.3125 9.6875C4.1875 10.5625 5.25 11 6.5 11Z" fill="%2349454F" /></svg>');
}
.status {
    display: flex;
    align-items: center;
    gap: 5px;
}

.status-on { background: green; }
.status-off { background: red; }

.color-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}


@media (max-width: 768px) {
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    [class*="-grid"] {
        min-width: 800px;
    }
}

/* Общий контейнер прокрутки таблиц */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* для iOS */
}

/* Общий грид */
.data-grid {
    display: grid;
    gap: 10px;
    padding: 10px;
    background: #f4f4f4;
    border-radius: 8px;
    min-width: 800px;
}

/* Заголовки таблиц */
.grid-header:not(.grid-header-about) {
    padding: 10px 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: 0.01em;
    text-align: start;
    color: #000;
    white-space: nowrap;
}
.light-theme .info-block .grid-header-about {
    color: #fff;
}

/* Ячейки */
.data-grid div {
    padding: 10px;
    background: white;
    border-radius: 4px;
    text-align: center;
}

/* Кнопки действий */
.action-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

/* Статусные индикаторы */
.green {
    background: green;
}
.yellow {
    background: orange;
}
.red {
    background: red;
}

/* Сайдбар */
.settings-sidebar {
    width: 380px;
    min-width: 320px;
    padding: 20px 20px;
};