/* Art Contact — Artist Portal */

:root {
    --accent: #64C814;
    --accent-dark: #4ea30f;
    --ink: #222;
    --ink-soft: #555;
    --line: #e3e3e3;
    --bg: #f6f7f5;
    --card: #ffffff;
    --danger: #c0392b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Ensure the hidden attribute always wins over display:flex rules */
[hidden] { display: none !important; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
}

button { font: inherit; cursor: pointer; }
input, select { font: inherit; }

/* ---------- Login ---------- */
#view-login,
#view-forgot,
#view-reset {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 40px 36px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.07);
    text-align: center;
}

.login-logo { height: 56px; margin-bottom: 14px; }

.login-card h1 { font-size: 1.5em; font-weight: 600; margin-bottom: 4px; }
.login-sub { color: var(--ink-soft); font-size: 0.95em; margin-bottom: 24px; }

#login-form,
.auth-form { text-align: left; }
#login-form label,
.auth-form label { display: block; font-size: 0.85em; font-weight: 600; margin: 14px 0 4px; }
#login-form input,
.auth-form input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
}
#login-form input:focus,
.auth-form input:focus { outline: 2px solid var(--accent); border-color: transparent; }

#login-form button[type="submit"],
.auth-form button[type="submit"] {
    width: 100%;
    margin-top: 22px;
    padding: 11px;
    background: var(--accent);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
}
#login-form button[type="submit"]:hover,
.auth-form button[type="submit"]:hover { background: var(--accent-dark); }
#login-form button[type="submit"]:disabled,
.auth-form button[type="submit"]:disabled { opacity: 0.6; cursor: wait; }

.login-extra { margin-top: 16px; text-align: center; }

.form-error { color: var(--danger); font-size: 0.9em; margin-top: 12px; }
.form-msg { font-size: 0.9em; margin: 12px 0; }
.form-msg.ok { color: var(--accent-dark); }
.form-msg.bad { color: var(--danger); }

/* ---------- Top bar ---------- */
.topbar {
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.brand { font-weight: 700; font-size: 1.05em; }
.brand-sub { font-weight: 400; color: var(--ink-soft); font-size: 0.9em; }

.topbar nav { display: flex; gap: 6px; }

.nav-btn {
    background: none;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    color: var(--ink-soft);
    font-weight: 600;
}
.nav-btn:hover { background: var(--bg); }
.nav-btn.active { background: var(--accent); color: #fff; }

.topbar-user { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-size: 0.92em; }

.link-btn {
    background: none;
    border: none;
    color: var(--accent-dark);
    font-weight: 600;
    padding: 4px 6px;
}
.link-btn:hover { text-decoration: underline; }

/* ---------- Pages ---------- */
.page { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }

/* ---------- Dashboard ---------- */
.dash-welcome { font-size: 1.6em; font-weight: 700; }
.dash-sub { color: var(--ink-soft); margin: 4px 0 24px; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

.stat-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px 20px;
}
.stat-card.clickable { cursor: pointer; transition: box-shadow 0.15s ease; }
.stat-card.clickable:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.09); }

.stat-value { font-size: 1.9em; font-weight: 700; line-height: 1.2; }
.stat-label { color: var(--ink-soft); font-size: 0.88em; margin-top: 2px; }
.stat-card.accent .stat-value { color: var(--accent-dark); }
.stat-card.red .stat-value { color: var(--danger); }

.dash-panel { max-width: none; }

.dash-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 760px) {
    .dash-panels { grid-template-columns: 1fr; }
}

#dash-text-form textarea,
.form-block textarea {
    width: 100%;
    min-height: 180px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    resize: vertical;
    font: inherit;
    line-height: 1.45;
}
#dash-text-form textarea:focus,
.form-block textarea:focus {
    outline: 2px solid var(--accent);
    border-color: transparent;
}

#dash-text-save {
    margin-top: 16px;
    padding: 10px 22px;
    background: var(--accent);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
}
#dash-text-save:hover { background: var(--accent-dark); }
#dash-text-save:disabled { opacity: 0.6; cursor: wait; }

.form-block { margin: 18px 0; }
.form-block label { display: block; font-size: 0.82em; font-weight: 600; margin-bottom: 6px; }

/* Filters */
.filters-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
}

.filters-bar select {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    min-width: 140px;
}

.count-label { color: var(--ink-soft); font-size: 0.9em; margin-left: auto; }

/* Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.1); transform: translateY(-2px); }

.card-img {
    aspect-ratio: 4 / 3;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-img .no-img { color: #aaa; font-size: 0.85em; }

.card-body { padding: 12px 14px 14px; }
.card-title { font-weight: 600; font-size: 0.97em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-meta { color: var(--ink-soft); font-size: 0.85em; margin-top: 2px; }
.card-price { margin-top: 6px; font-weight: 700; }
.card-price.muted { font-weight: 400; color: var(--ink-soft); font-style: italic; }
.muted-date { font-weight: 400; color: var(--ink-soft); font-size: 0.85em; }
.card-status { font-size: 0.8em; margin-top: 4px; }
.card-status.ok { color: var(--accent-dark); }
.card-status.sold { color: var(--danger); }

.empty { text-align: center; color: var(--ink-soft); padding: 60px 0; }

/* Pager */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 28px;
}
.pager button {
    padding: 8px 16px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 6px;
}
.pager button:disabled { opacity: 0.45; cursor: default; }
#pg-label { color: var(--ink-soft); font-size: 0.9em; }

/* ---------- Panels (profile / terms) ---------- */
.panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 30px 34px;
    max-width: 760px;
}
.panel h2 { margin-bottom: 6px; }
.panel-sub { color: var(--ink-soft); font-size: 0.92em; margin-bottom: 22px; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px 18px;
    margin-bottom: 18px;
}
.form-grid label { display: block; font-size: 0.82em; font-weight: 600; margin-bottom: 3px; }
.form-grid input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 6px;
}
.form-grid input:disabled { background: var(--bg); color: var(--ink-soft); }
.form-grid input:focus { outline: 2px solid var(--accent); border-color: transparent; }

#profile-form > button {
    padding: 10px 22px;
    background: var(--accent);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
}
#profile-form > button:hover { background: var(--accent-dark); }

#terms-body p { margin-bottom: 12px; color: var(--ink-soft); }

/* ---------- Modal ---------- */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 50;
}

.modal-box {
    background: #fff;
    border-radius: 10px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.6em;
    color: var(--ink-soft);
    z-index: 2;
}

.modal-body { display: flex; gap: 26px; padding: 28px; flex-wrap: wrap; }

.modal-img-wrap {
    flex: 1 1 380px;
    min-width: 280px;
    background: #f0f0f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-img-wrap img { max-width: 100%; max-height: 70vh; border-radius: 8px; }

.modal-info { flex: 1 1 280px; min-width: 240px; }
.modal-info h2 { margin-bottom: 4px; }
.status { font-weight: 600; margin-bottom: 16px; }
.status.ok { color: var(--accent-dark); }
.status.sold { color: var(--danger); }

#m-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 0.93em; }
#m-facts dt { font-weight: 600; color: var(--ink-soft); }
#m-facts dd { margin: 0; }

@media (max-width: 640px) {
    .topbar-inner { gap: 10px; }
    .topbar-user { width: 100%; margin-left: 0; }
    .panel { padding: 22px 18px; }
}