html {
    overflow-x: hidden;
}

body {
    min-width: 320px;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

button,
input,
select,
textarea {
    max-width: 100%;
}

/* Большие ноутбуки */
@media (max-width: 1440px) {
    main {
        padding-left: 16px;
        padding-right: 16px;
    }

    #hm {
        width: min(75vw, 1000px);
    }
}

/* Планшеты */
@media (max-width: 1300px) {
    /* Общая навигация */
    nav {
        gap: 12px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .parent h1,
    nav h1 {
        font-size: 22px;
    }

    nav img {
        width: 34px;
        height: 34px;
        padding-right: 0;
        object-fit: contain;
    }

    header {
        height: auto;
        min-height: 78px;
        gap: 12px;
        padding: 12px 16px;
    }

    header h2 {
        text-align: center;
        font-size: 22px;
    }

    header button,
    button {
        min-height: 40px;
    }

    #search {
        width: min(45vw, 360px);
    }

    #userName {
        display: none;
    }

    /* Главная и архив */
    #orderTable,
    #archiveTable {
        width: 100%;
        overflow-x: auto;
    }

    #workerHead,
    .tdWorker {
        display: none;
    }

    #mainHead,
    .mainTable {
        display: grid;
        grid-template-columns: 46px minmax(170px, 1.4fr) minmax(120px, 0.8fr) minmax(190px, 1.6fr) minmax(80px, 0.7fr) minmax(110px, 0.8fr) minmax(115px, 0.8fr);
        width: 100%;
        min-width: 840px;
    }

    #mainHead div,
    .mainTable div {
        min-width: 0;
    }

    .tdEdit button {
        min-height: 34px;
        padding: 6px 10px;
        white-space: nowrap;
    }

    .statusInput {
        width: 100%;
        min-height: 32px;
    }

    /* Модальное окно заказа */
    #modal {
        align-items: flex-start;
        padding: 12px;
    }

    #modal-window {
        width: 100%;
        max-height: calc(100vh - 24px);
        padding: 18px;
    }

    .modal-row-2,
    .modal-row-3 {
        grid-template-columns: 1fr;
    }

    .modal-actions {
        flex-direction: column;
    }

    .modal-actions section {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    #modal-button,
    .dop-button {
        width: 100%;
    }

    /* Стартовая страница */
    * {
        overflow-y: visible;
    }

    .hero section {
        height: auto !important;
        min-height: 420px;
        padding: 7vh 6vw;
        overflow: hidden;
    }

    .features-grid {
        gap: 20px;
    }

    .feature-card {
        width: 22vw;
        min-height: 170px;
    }

    /* Настройки и админ-панель */
    main {
        gap: 5vw;
    }

    #sidebar button,
    #tab-ai button,
    #tab-system button,
    .addButton {
        width: auto;
        min-width: 150px;
    }

    input,
    select,
    textarea {
        width: 100%;
    }

    .AI-card,
    .user-card,
    .company-card {
        width: 100%;
    }

    .admin-grid,
    .company-grid {
        grid-template-columns: 1fr;
    }

    .status-form,
    .status-card,
    .device-card {
        flex-direction: column;
        align-items: stretch;
    }

    .worker-form,
    .worker-card {
        grid-template-columns: 1fr;
    }

    .worker-actions {
        flex-direction: column;
    }

    .worker-actions button,
    .delete-device-button,
    .delete-status-button {
        width: 100% !important;
        min-height: 40px;
    }

    .device-form input {
        margin-bottom: 10px;
    }

    .device-form input,
    #timeDiv input {
        width: 100% !important;
    }

    #filler {
        flex-direction: column;
        gap: 20px;
    }

    #dayDiv {
        flex-wrap: wrap;
    }

    .day {
        width: 56px;
        min-width: 56px;
    }

    /* Статистика */
    .workers {
        flex-wrap: wrap;
        padding: 0 16px 20px;
    }
}

/* Маленькие планшеты */
@media (max-width: 1000px) {
    /* Общая навигация */
    nav {
        height: auto;
        min-height: 64px;
        align-items: center;
    }

    #nameShop {
        display: none;
    }

    #menu {
        display: inline-block !important;
        width: 20px;
        height: 20px;
        cursor: pointer;
        margin-right: 10px;
    }

    .admin-head-button {
        display: none;
    }

    #headName {
        width: auto;
        flex: 1;
    }

    #search {
        width: 42vw;
        min-width: 150px;
    }

    #filter {
        width: 150px;
    }

    /* Главная и архив */
    #priceHead,
    .tdPrice,
    #dateHead,
    .days-cell {
        display: none;
    }

    #mainHead,
    .mainTable {
        grid-template-columns: 44px minmax(160px, 1.3fr) minmax(125px, 0.9fr) minmax(190px, 1.6fr) minmax(120px, 0.8fr);
        min-width: 650px;
    }

    /* Старт */
    .hero section {
        background-image: none;
        min-height: 360px;
        margin-left: 3vw;
        margin-right: 3vw;
        padding: 48px 6vw;
    }

    .hero section div,
    .hero-buttons {
        flex-wrap: wrap;
    }

    .hero section h1 {
        font-size: 28px;
    }

    .double {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .features-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        margin-left: 4vw;
        margin-right: 4vw;
    }

    .feature-card {
        width: 100%;
        height: 200px;
        min-height: 165px;
        padding: 18px;
    }

    /* Настройки и админ-панель */
    main:has(#sidebar),
    body:has(#sidebar) main {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    #sidebar {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 8px;
        width: 100%;
    }

    #sidebar p {
        margin: 0;
        flex: 0 0 auto;
    }

    #sidebar button,
    #tab-ai button,
    #tab-system button,
    .addButton {
        min-width: 140px;
        width: auto;
        white-space: nowrap;
    }

    #hm {
        flex-direction: column;
        width: 100%;
    }

    .settings-panel.active {
        width: 100%;
    }

    .company-grid {
        grid-template-columns: 1fr;
    }

    /* Логи */
    .log-card {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 14px;
    }

    #logsList {
        width: 100%;
    }

    /* Статистика */
    main section {
        flex-wrap: wrap;
    }

    .workers {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Телефоны */
@media (max-width: 750px) {
    /* Общая навигация */
    nav {
        padding: 10px 12px;
        gap: 8px;
    }

    .parent h1,
    nav h1 {
        display: none;
    }

    nav img {
        width: 32px;
        height: 32px;
    }

    #headName {
        justify-content: flex-start;
    }

    nav > div:nth-child(2) {
        flex: 1;
        justify-content: flex-end;
    }

    #search {
        width: 100%;
        min-width: 0;
        height: 38px;
        border-radius: 10px 0 0 10px;
    }

    #filter {
        width: 118px;
        height: 38px;
        font-size: 12px;
    }

    header {
        min-height: auto;
        padding: 10px 12px 14px;
    }

    header h2,
    .parent h2 {
        display: none;
    }

    header a,
    header button {
        width: 100%;
    }

    header button {
        padding-left: 12px;
        padding-right: 12px;
    }

    .novis,
    header button[style*="visibility: hidden"],
    header a[style*="visibility: hidden"],
    header p[style*="visibility: hidden"] {
        display: none !important;
    }

    #statusHead,
    #bugHead,
    #dateBeginHead,
    .tdStatus,
    .tdBug,
    .tdBegin {
        display: none;
    }

    #mainHead,
    .mainTable {
        grid-template-columns: 44px minmax(135px, 1fr) minmax(98px, 0.8fr);
        min-width: 0;
        width: 100%;
    }

    #mainHead div,
    .mainTable div {
        padding: 8px 6px;
        font-size: 13px;
        align-items: center;
    }

    #editHead,
    .tdEdit {
        justify-content: flex-end;
    }

    .tdEdit {
        gap: 6px;
        flex-wrap: wrap;
    }

    .tdEdit button {
        min-height: 34px;
        padding: 6px 8px;
        font-size: 12px;
    }

    .statusInput {
        min-height: 34px;
        font-size: 12px;
    }

    #noTask,
    #noSearch {
        font-size: 22px;
        padding: 0 16px;
    }

    #menu-window,
    #menu-window button {
        width: min(78vw, 300px);
    }

    #menu-window button {
        min-height: 48px;
        text-align: left;
        padding-left: 18px;
    }

    /* Модальное окно */
    #modal {
        padding: 8px;
    }

    #modal-window {
        padding: 16px 12px 14px;
        border-radius: 10px;
    }

    #closeButton {
        top: 10px;
        right: 10px;
    }

    #modal-content {
        gap: 12px;
        padding-top: 28px;
    }

    .field label {
        font-size: 13px;
    }

    #modal-window input,
    #modal-window select {
        height: 42px;
        font-size: 14px;
    }

    /* Старт */
    .end-nav {
        width: 100%;
        justify-content: center;
        gap: 8px;
    }

    .end-nav a,
    .end-nav button {
        display: none;
    }

    .hero section {
        min-height: auto;
        height: auto !important;
        margin: 0 12px;
        padding: 34px 18px;
    }

    .hero section h1 {
        font-size: 24px;
        line-height: 1.2;
    }

    .hero section p {
        font-size: 15px;
    }

    .hero-buttons {
        width: 100%;
        gap: 10px;
    }

    .hero-buttons a,
    .hero-buttons button {
        width: 100%;
    }

    .features-grid {
        display: flex;
        flex-direction: column;
        margin-left: 12px;
        margin-right: 12px;
    }

    .feature-card {
        width: 100%;
        min-height: auto;
        margin: 0 0 14px;
        padding: 16px;
    }

    .features {
        height: auto !important;
    }

    footer {
        height: auto;
        min-height: 52px;
        padding: 12px;
        text-align: center;
    }

    /* Регистрация и вход */
    #form {
        min-height: calc(100vh - 64px);
        height: auto;
        padding: 18px 12px;
        background-image: none;
    }

    #jojoin,
    #form > div {
        width: 100%;
        padding: 24px 18px;
        border-radius: 18px;
    }

    #form input,
    main input {
        width: 100%;
        height: 42px;
    }

    #form button,
    #jojoin button {
        width: 100%;
    }

    /* Настройки и админ */
    main:has(#sidebar),
    body:has(#sidebar) main {
        padding: 0 12px 20px;
    }

    #sidebar button,
    #tab-ai button,
    #tab-system button,
    .addButton {
        min-width: 126px;
        min-height: 42px;
        font-size: 14px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .settings-panel h3 {
        font-size: 20px;
    }

    .worker-card,
    .device-card,
    .status-card,
    .user-card,
    .company-card,
    .AI-card,
    .admin-stat,
    .log-card,
    .empty-state {
        padding: 14px;
        border-radius: 12px;
    }

    .device-form,
    .status-form,
    .worker-form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-left: 0;
        padding: 0;
    }

    .device-form p,
    .worker-form p,
    .status-form p {
        margin: 0;
    }

    #dayDiv {
        gap: 8px;
    }

    .day {
        width: calc((100% - 24px) / 4);
        min-width: 0;
        height: 42px;
    }

    #timeDiv {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 8px;
        align-items: center;
    }

    #aiPromptInput {
        min-height: 220px;
    }

    /* Статистика */
    body:has(#dayIncome) main {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 0 12px;
    }

    body:has(#dayIncome) main > div,
    .workers > div {
        width: 100%;
        text-align: center;
    }

    main section button {
        min-width: 92px;
    }

    .workers {
        padding: 0 12px 20px;
        gap: 18px;
    }

    /* Логи */
    body:has(#logsList) main {
        padding: 0 12px 20px;
    }

    body:has(#logsList) #hm {
        width: 100%;
    }

    .log-card pre {
        max-height: 260px;
        overflow: auto;
    }
}

/* Очень маленькие телефоны */
@media (max-width: 360px) {
    nav {
        padding-left: 8px;
        padding-right: 8px;
    }

    #filter {
        width: 104px;
    }

    #mainHead,
    .mainTable {
        grid-template-columns: 38px minmax(112px, 1fr) minmax(82px, 0.8fr);
    }

    #mainHead div,
    .mainTable div {
        font-size: 12px;
        padding: 7px 4px;
    }

    .tdEdit button {
        font-size: 11px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .hero section h1 {
        font-size: 22px;
    }

    .hero section button,
    button {
        font-size: 13px;
    }

    #menu-window,
    #menu-window button {
        width: 86vw;
    }
}

@media (max-width: 1024px) {
    #archiveTable #mainHead,
    #archiveTable .mainTable {
        grid-template-columns:
            46px
            minmax(160px, 1.2fr)
            minmax(120px, 0.8fr)
            minmax(180px, 1.4fr)
            minmax(80px, 0.6fr)
            minmax(110px, 0.8fr)
            minmax(130px, 0.9fr)
            minmax(100px, 0.7fr);
        min-width: 930px;
    }
}

@media (max-width: 768px) {
    #archiveTable #mainHead,
    #archiveTable .mainTable {
        grid-template-columns:
            44px
            minmax(150px, 1.2fr)
            minmax(120px, 0.9fr)
            minmax(180px, 1.4fr)
            minmax(110px, 0.8fr)
            minmax(100px, 0.7fr);
        min-width: 720px;
    }
}

@media (max-width: 480px) {
    #archiveTable #mainHead,
    #archiveTable .mainTable {
        grid-template-columns:
            44px
            minmax(120px, 1fr)
            minmax(90px, 0.8fr);
        min-width: 0;
    }
}