/* style.css — Минимализм + мобильная адаптация */

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #f6f7fa;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    color: #222;
}
.topbar {
    display: flex;
    align-items: center;
    padding: 0.7em 1.5em;
    background: #22223b;
    color: #fff;
    justify-content: space-between;
}
.logo {
    width: 38px;
    height: 38px;
    border-radius: 8px;
}
.header-title {
    font-size: 1.4em;
    font-weight: bold;
}
.userbar {
    display: flex;
    align-items: center;
    gap: 1em;
}
.logout-btn {
    background: #9a8c98;
    color: #fff;
    border: none;
    padding: 0.3em 1.2em;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
}
main {
    padding: 2em 1em 1em 1em;
    max-width: 980px;
    margin: 0 auto;
}
h2, h3 {
    margin-top: 1.7em;
    color: #22223b;
}
.upload-section,
.table-section,
.history-section {
    background: #fff;
    margin-bottom: 2em;
    border-radius: 12px;
    box-shadow: 0 4px 18px #0001;
    padding: 1.5em 1em;
}
input[type="file"],
input[type="number"],
input[type="text"],
input[type="email"],
input[type="password"],
select {
    padding: 0.6em;
    margin: 0.5em 0;
    border-radius: 7px;
    border: 1px solid #bcbcbc;
    width: 100%;
    max-width: 340px;
    font-size: 1em;
}
button {
    background: #22223b;
    color: #fff;
    border: none;
    padding: 0.6em 2em;
    margin-top: 1em;
    margin-bottom: 1em;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    font-size: 1em;
    transition: background .18s;
}
button:hover {
    background: #9a8c98;
}
.progress-bar {
    width: 100%;
    background: #e2e2e2;
    border-radius: 6px;
    height: 9px;
    margin-top: 8px;
    margin-bottom: 1em;
    overflow: hidden;
    display: none;
}
.progress-bar div {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,#9a8c98,#22223b);
    transition: width .4s;
}
.alert, .success {
    background: #ffe5e5;
    color: #8b0000;
    padding: 0.8em;
    border-radius: 8px;
    margin-bottom: 1em;
    font-size: 1em;
    display: block;
}
.success {
    background: #e6ffe6;
    color: #075d07;
}
.data-table {
    width: 100%;
    overflow-x: auto;
    margin-top: 1.3em;
}
.data-table table {
    border-collapse: collapse;
    width: 100%;
    min-width: 760px;
    background: #faf8f8;
}
.data-table th, .data-table td {
    padding: 0.6em 1em;
    border: 1px solid #ececec;
    font-size: 1em;
}
.data-table th {
    background: #22223b;
    color: #fff;
    font-weight: bold;
    text-align: left;
}
.data-table tr:nth-child(even) {
    background: #f7f5f5;
}
.mass-edit {
    margin-top: 1.3em;
    display: flex;
    align-items: center;
    gap: 0.8em;
}
@media (max-width: 650px) {
    main {
        padding: 1em 0.1em;
    }
    .topbar {
        flex-direction: column;
        gap: 0.5em;
    }
    .header-title {
        font-size: 1.05em;
    }
    .data-table table, .data-table th, .data-table td {
        font-size: 0.91em;
    }
}
.login-box, .reset-box {
    max-width: 350px;
    margin: 7vh auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 30px #22223b22;
    padding: 2.5em 2em 2em 2em;
}
.login-box h1, .reset-box h1 { color: #22223b; }
.reset-link { font-size: 0.99em; color: #22223b; text-decoration: underline; display: inline-block; margin-top: 1.1em; }
.modal {
    position: fixed;
    left: 0; top: 0; width: 100vw; height: 100vh;
    background: #22223bb0;
    display: flex; align-items: center; justify-content: center;
    z-index: 60;
}
.modal-content {
    background: #fff;
    border-radius: 13px;
    padding: 2.5em 2em 2em 2em;
    min-width: 270px;
    max-width: 95vw;
}
@media (max-width: 480px) {
    .modal-content {
        padding: 1.1em 0.5em;
    }
}

.actions-cell { position: relative; display: inline-block; }
.action-btn { background: #F44336; border: none; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 18px;}
.actions-menu { background: #fff; border: 1px solid #ddd; border-radius: 8px; min-width: 140px; box-shadow: 0 2px 8px #0002; position: absolute; right:0; top:110%; }
.actions-menu button { display: block; width: 100%; border: none; background: none; padding: 9px 16px; text-align: left; cursor: pointer; font-size: 15px;color: #000;}
.actions-menu button:hover { background: #f6f7f9; }