/* Спільна темна тема для index.php / tasks.php / motion-detail.php.
   Критичні для першого кадру правила (background на <html>) залишені інлайн
   у кожній сторінці — щоб фон не блимав білим, поки завантажиться саме цей
   файл (стилі тут кешуються браузером, тож цей запит "коштує" лише один раз). */

body {
    font-family: system-ui, sans-serif;
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 16px;
    background: #0a0a0a;
    color: #e6e6e6;
}

body.narrow {
    max-width: 640px;
}

nav {
    margin-bottom: 24px;
}

a {
    color: #7db2ff;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid #2a2a2a;
}

th {
    color: #999;
    font-weight: 600;
}

.meta {
    color: #8a8a8a;
    font-size: 0.85em;
}

.err {
    color: #ff6b6b;
}

.ref {
    color: #777;
    font-size: 0.8em;
    font-family: monospace;
}

.status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: #242424;
    color: #ddd;
    font-size: 0.85em;
}

.status.InProgress {
    background: #4a3b00;
    color: #ffdf8a;
}

.status.Completed,
.status.Done {
    background: #123c22;
    color: #8de8ac;
}

.btn {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    background: #1f1f1f;
    border: 1px solid #333;
    color: #e6e6e6;
    text-decoration: none;
    font-size: 0.85em;
    transition: background .15s ease, border-color .15s ease;
}

.btn:hover {
    background: #2a2a2a;
    border-color: #444;
}

.btn-device {
    background: #12283f;
    border-color: #1c4468;
    color: #9cd4ff;
    font-weight: 600;
}

.btn-device:hover {
    background: #17324f;
    border-color: #245a8c;
}

.btn-map {
    background: #10331f;
    border-color: #1d5233;
    color: #8de8ac;
    font-family: monospace;
    white-space: nowrap;
}

.btn-map:hover {
    background: #164027;
    border-color: #266b43;
}

.btn-map::before {
    content: "📍 ";
}

/* tasks.php */
li {
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.title {
    flex: 1;
}

.done .title {
    text-decoration: line-through;
    color: #777;
}

form {
    display: inline;
}

input[type="text"] {
    padding: 4px 6px;
    background: #161616;
    color: #e6e6e6;
    border: 1px solid #333;
    border-radius: 4px;
}

button {
    cursor: pointer;
    background: #1f1f1f;
    color: #e6e6e6;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 4px 10px;
}

button:hover {
    background: #2a2a2a;
}
