/*
 * Neumorphic light theme for the Emerald Vault plugin
 *
 * This stylesheet replaces the original dark emerald design with a clean,
 * mobile‑friendly neumorphism aesthetic inspired by the provided mockup. The
 * look relies on light backgrounds and soft shadows to create a raised or
 * inset effect for interface elements. All styles are scoped to the
 * plugin’s containers to avoid interfering with the host theme.
 */

/* Global font import. Poppins provides a modern, clean look; fall back to sans‑serif. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* Base styling for the vault container */
.vault-container {
    /* Constrain width for smartphone layouts and remove the heavy outer shadow. */
    max-width: 380px;
    margin: 1rem auto;
    background: #e0e5ec;
    padding: 1.5rem;
    border-radius: 30px;
    box-shadow: none;
    color: #4a4a4a;
    font-family: 'Poppins', sans-serif;
}

.vault-container h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
    color: #4a4a4a;
    text-align: center;
}

/* Keypad grid */
.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
    justify-items: center;
}

/* Individual keypad buttons */
.ev-key {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #4a4a4a;
    background: #e0e5ec;
    box-shadow: 6px 6px 12px #c8ccd1, -6px -6px 12px #ffffff;
    cursor: pointer;
    border: none;
    user-select: none;
    transition: box-shadow 0.2s;
}

/* Clear button inherits the same style but stands out via a subtle tint */
.ev-key.ev-key-clear {
    width: 100%;
    height: 50px;
    border-radius: 12px;
    font-size: 1rem;
    background: #e0e5ec;
    box-shadow: 6px 6px 12px #c8ccd1, -6px -6px 12px #ffffff;
}

/* Button press (active) state */
.ev-key:active {
    box-shadow: inset 6px 6px 12px #c8ccd1, inset -6px -6px 12px #ffffff;
}

/* Serial input display */
.ev-input {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    font-size: 1.5rem;
    text-align: center;
    color: #4a4a4a;
    background: #e0e5ec;
    border: none;
    border-radius: 12px;
    box-shadow: inset 6px 6px 12px #c8ccd1, inset -6px -6px 12px #ffffff;
}

/* Status lights container */
.status-lights {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #4a4a4a;
}

.light {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.light-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e0e5ec;
    box-shadow: inset 2px 2px 4px #c8ccd1, inset -2px -2px 4px #ffffff;
}

#ev-light-valid.on {
    background: #4caf50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

#ev-light-invalid.on {
    background: #e53935;
    box-shadow: 0 0 8px rgba(229, 57, 53, 0.6);
}

/* Primary button style */
.button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    margin-top: 1rem;
    font-size: 1rem;
    border-radius: 12px;
    background: #e0e5ec;
    color: #4a4a4a;
    box-shadow: 6px 6px 12px #c8ccd1, -6px -6px 12px #ffffff;
    border: none;
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.button:active {
    box-shadow: inset 6px 6px 12px #c8ccd1, inset -6px -6px 12px #ffffff;
}

/* Result container and panels */
.ev-result {
    margin-top: 1rem;
    color: #4a4a4a;
    font-size: 0.95rem;
}

.ev-result .panel {
    background: #e0e5ec;
    padding: 1.5rem;
    border-radius: 20px;
    box-shadow: 6px 6px 12px #c8ccd1, -6px -6px 12px #ffffff;
    color: #4a4a4a;
    margin-top: 1rem;
}

/* Form layout and fields */
.ev-form {
    margin-top: 1rem;
}

.ev-field {
    margin-bottom: 1rem;
}

.ev-field label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    color: #4a4a4a;
}

.ev-field input,
.ev-field textarea,
.ev-field select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 12px;
    background: #e0e5ec;
    box-shadow: inset 6px 6px 12px #c8ccd1, inset -6px -6px 12px #ffffff;
    color: #4a4a4a;
    font-size: 1rem;
}

/* Catalogue grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.art-card {
    background: #e0e5ec;
    padding: 1.5rem;
    border-radius: 20px;
    box-shadow: 6px 6px 12px #c8ccd1, -6px -6px 12px #ffffff;
    color: #4a4a4a;
}

.art-card h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #4a4a4a;
}

/* Modal overlay and content */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* =========================
   Collector Dashboard (responsive, desktop + mobile)
   Style inspired by the provided neumorphic dashboard reference.
   ========================= */

.evdash-wrap{
    max-width: 1100px;
    margin: 1.5rem auto;
    padding: 1.25rem;
    background:#e0e5ec;
    border-radius: 28px;
    font-family: 'Poppins', sans-serif;
    color:#4a4a4a;
}

.evdash-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1rem;
}

.evdash-title{
    font-size:2rem;
    font-weight:600;
    margin:0;
}

.evdash-grid{
    display:grid;
    grid-template-columns: 320px 1fr;
    gap:1.25rem;
    align-items:start;
}

.ev-card{
    background:#e0e5ec;
    border-radius:22px;
    padding:1.25rem;
    box-shadow: 10px 10px 20px #c8ccd1, -10px -10px 20px #ffffff;
}

.ev-card h3{
    margin:0 0 .75rem 0;
    font-weight:600;
}

.evdash-art-list a{
    display:block;
    text-decoration:none;
    color:inherit;
}

.evdash-art-item{
    padding:0.85rem 0.9rem;
    border-radius:16px;
    box-shadow: inset 6px 6px 12px #c8ccd1, inset -6px -6px 12px #ffffff;
    margin-bottom:0.75rem;
}

.evdash-art-item.active{
    box-shadow: 6px 6px 12px #c8ccd1, -6px -6px 12px #ffffff;
}

.evdash-art-item .meta{
    font-size:0.9rem;
    opacity:0.85;
    margin-top:0.25rem;
}

.evdash-actions{
    display:flex;
    gap:0.75rem;
    flex-wrap:wrap;
    margin-top:1rem;
}

.evdash-actions .button{ margin-top:0; }

.evdash-hidden{ display:none; }

/* collapsible sections */
.evdash-section{ display:none; }
.evdash-section.is-open{ display:block; }

.evdash-toast{
    position:fixed;
    left:50%;
    bottom:24px;
    transform:translateX(-50%);
    background:#e0e5ec;
    color:#2f2f2f;
    padding:0.9rem 1.1rem;
    border-radius:16px;
    box-shadow: 10px 10px 20px #c8ccd1, -10px -10px 20px #ffffff;
    z-index:9999;
    font-weight:500;
}

/* Provenance list within dashboard */
.evdash-provenance ul{
    list-style:none;
    padding-left:0;
    margin:0.5rem 0 0 0;
}

.evdash-provenance li{
    padding:0.85rem 0.9rem;
    border-radius:16px;
    box-shadow: inset 6px 6px 12px #c8ccd1, inset -6px -6px 12px #ffffff;
    margin-bottom:0.75rem;
}

.evdash-provenance .ev-badge{
    display:inline-block;
    padding:0.15rem 0.5rem;
    border-radius:999px;
    font-size:0.8rem;
    margin-left:0.35rem;
    box-shadow: inset 3px 3px 6px #c8ccd1, inset -3px -3px 6px #ffffff;
}

.evdash-provenance .ev-badge.flagged{ color:#b94040; }

/* Attached provenance records (files/photos) */
.evdash-records{ margin-top: 1rem; }
.evdash-record-card{
    padding: 1rem;
    border-radius: 20px;
    background: #e0e5ec;
    box-shadow: 6px 6px 12px #c8ccd1, -6px -6px 12px #ffffff;
    margin: 0.75rem 0;
}
.evdash-record-head{ margin: 0 0 0.25rem 0; font-weight: 600; }
.evdash-record-meta{ font-size: 0.9rem; opacity: 0.85; margin-bottom: 0.5rem; }
.evdash-record-actions a{
    display: inline-block;
    margin-right: 0.5rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    text-decoration: none;
    color: #4a4a4a;
    background: #e0e5ec;
    box-shadow: inset 3px 3px 6px #c8ccd1, inset -3px -3px 6px #ffffff;
}
.evdash-record-thumb{ margin-top: 0.75rem; }
.evdash-record-thumb img{ width: 100%; height: auto; border-radius: 16px; }

/* Mobile */
@media (max-width: 820px){
    .evdash-wrap{ max-width: 420px; margin: 1rem auto; }
    .evdash-grid{ grid-template-columns: 1fr; }
    .evdash-title{ font-size:1.7rem; }
}

/* =========================
   Collector Portal (new design)
   These classes implement the refreshed collector experience based off the
   provided wireframes. Pages are constructed with a top bar, a sidebar
   navigation and a main content area. Use of soft shadows and rounded
   corners maintain the neumorphic aesthetic of the rest of the plugin.
   ========================= */

.ev-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-family: 'Poppins', sans-serif;
}

.ev-topbar-link {
    color: #4a4a4a;
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.45rem 1rem;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 6px 6px 12px #dcdfe3, -6px -6px 12px #ffffff;
    transition: box-shadow 0.2s;
}

.ev-topbar-link:hover {
    box-shadow: inset 6px 6px 12px #dcdfe3, inset -6px -6px 12px #ffffff;
}

.ev-container {
    display: flex;
    gap: 1.25rem;
    max-width: 1100px;
    margin: 1.5rem auto;
    padding: 1rem;
    font-family: 'Poppins', sans-serif;
    color: #4a4a4a;
    background: #f7f8fa;
    border-radius: 28px;
    box-shadow: 12px 12px 24px #dcdfe3, -12px -12px 24px #ffffff;
}

.ev-side-nav {
    flex: 0 0 220px;
    background: #f7f8fa;
    padding: 1rem;
    border-radius: 24px;
    box-shadow: 10px 10px 20px #dcdfe3, -10px -10px 20px #ffffff;
}

.ev-side-nav .ev-nav-item {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.75rem;
    border-radius: 18px;
    background: #f7f8fa;
    box-shadow: inset 6px 6px 12px #dcdfe3, inset -6px -6px 12px #ffffff;
    transition: box-shadow 0.2s;
}

.ev-side-nav .ev-nav-item.active, .ev-side-nav .ev-nav-item:hover {
    box-shadow: 6px 6px 12px #dcdfe3, -6px -6px 12px #ffffff;
}

.ev-main {
    flex: 1;
    background: #f7f8fa;
    padding: 1.5rem;
    border-radius: 24px;
    box-shadow: 10px 10px 20px #dcdfe3, -10px -10px 20px #ffffff;
}

/* Add record form specifics */
.ev-add-record-form label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
    font-weight: 500;
}
.ev-add-record-form input[type="text"],
.ev-add-record-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 12px;
    background: #e0e5ec;
    color: #4a4a4a;
    box-shadow: inset 6px 6px 12px #c8ccd1, inset -6px -6px 12px #ffffff;
}
.ev-add-record-form button.button {
    margin-top: 1rem;
}

/* Responsive adjustments */
@media (max-width: 820px) {
    .ev-container {
        flex-direction: column;
        max-width: 420px;
    }
    .ev-side-nav {
        width: 100%;
        flex: none;
        margin-bottom: 1rem;
    }
    .ev-main {
        width: 100%;
    }
}

.modal-content {
    position: relative;
    background: #e0e5ec;
    padding: 2rem;
    border-radius: 20px;
    max-width: 500px;
    width: 90%;
    box-shadow: 6px 6px 12px #c8ccd1, -6px -6px 12px #ffffff;
    color: #4a4a4a;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #8a8a8a;
}

/* Responsive tweaks */
@media (max-width: 480px) {
    .vault-container {
        padding: 1rem;
    }
    .ev-key {
        width: 60px;
        height: 60px;
        font-size: 1.25rem;
    }
    .ev-key.ev-key-clear {
        height: 45px;
    }
    .ev-input {
        font-size: 1.25rem;
    }
}

/* =================================================================
   Neumorphic overrides for the collector portal
   The following rules override earlier definitions to more closely
   match the provided wireframe examples. They adjust colours,
   radii and shadow sizes on the portal containers, navigation and
   form elements. New classes for layout and content styling are also
   defined here.
   ================================================================= */

/* Top bar wrapper and controls */
.ev-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    font-family: 'Poppins', sans-serif;
}

.ev-topbar-control {
    display: inline-block;
}

.ev-topbar-link {
    color: #4a4a4a;
    text-decoration: none;
    font-size: 1rem;
    padding: 0.75rem 2rem;
    border-radius: 30px;
    background: #ffffff;
    box-shadow: 12px 12px 24px #e6e9f0, -12px -12px 24px #ffffff;
    transition: box-shadow 0.2s;
    font-weight: 600;
}

.ev-topbar-link:hover {
    box-shadow: inset 12px 12px 24px #e6e9f0, inset -12px -12px 24px #ffffff;
}

/* Layout container */
.ev-container {
    display: flex;
    gap: 2rem;
    max-width: 1200px;
    margin: 2rem auto;
    padding: 2rem;
    font-family: 'Poppins', sans-serif;
    color: #4a4a4a;
    background: #f9f9f9;
    border-radius: 40px;
    box-shadow: 20px 20px 40px #e6e9f0, -20px -20px 40px #ffffff;
    flex-wrap: wrap;
}

/* Side navigation container */
.ev-side-nav {
    flex: 0 0 240px;
    background: #f9f9f9;
    padding: 2rem 1.5rem;
    border-radius: 36px;
    box-shadow: 18px 18px 36px #e6e9f0, -18px -18px 36px #ffffff;
}

.ev-nav-wrapper {
    margin-bottom: 1.5rem;
}

.ev-nav-item {
    display: block;
    text-decoration: none;
    color: #4a4a4a;
    padding: 1rem 1.6rem;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: inset 10px 10px 20px #e6e9f0, inset -10px -10px 20px #ffffff;
    transition: box-shadow 0.2s;
    font-weight: 600;
    font-size: 1rem;
}

.ev-nav-item.active,
.ev-nav-item:hover {
    box-shadow: 10px 10px 20px #e6e9f0, -10px -10px 20px #ffffff;
}

/* Override default nav item styles inside side nav to ensure our
   neumorphic settings trump earlier descendant selectors */
.ev-side-nav .ev-nav-item {
    display: block;
    text-decoration: none;
    color: #4a4a4a;
    padding: 1rem 1.6rem;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: inset 10px 10px 20px #e6e9f0, inset -10px -10px 20px #ffffff;
    transition: box-shadow 0.2s;
    font-weight: 600;
    font-size: 1rem;
}

.ev-side-nav .ev-nav-item.active,
.ev-side-nav .ev-nav-item:hover {
    box-shadow: 10px 10px 20px #e6e9f0, -10px -10px 20px #ffffff;
}

/* Main content area */
.ev-main {
    flex: 1;
    background: #f9f9f9;
    padding: 2.5rem;
    border-radius: 36px;
    box-shadow: 18px 18px 36px #e6e9f0, -18px -18px 36px #ffffff;
    min-width: 0;
}

/* Overview card layout */
.ev-overview-card {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
    background: #ffffff;
    border-radius: 36px;
    padding: 2.5rem;
    box-shadow: 20px 20px 40px #e6e9f0, -20px -20px 40px #ffffff;
    flex-wrap: wrap;
}

.ev-overview-image {
    flex: 0 0 55%;
    max-width: 55%;
    background: #f5f5f5;
    border-radius: 30px;
    box-shadow: inset 12px 12px 24px #e6e9f0, inset -12px -12px 24px #ffffff;
    overflow: hidden;
}

.ev-overview-image img {
    width: 100%;
    height: auto;
    display: block;
}

.ev-overview-info {
    flex: 1;
    padding: 0.5rem;
}

.ev-overview-title {
    margin-top: 0;
    margin-bottom: 1.2rem;
    font-size: 1.6rem;
    font-weight: 600;
    color: #333333;
}

.ev-overview-info p {
    margin: 0.5rem 0;
    font-size: 1rem;
}

/* Records page layout */
.ev-records-container {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.ev-record-nav {
    flex: 0 0 240px;
    max-width: 240px;
    padding-right: 1rem;
}

.ev-record-detail {
    flex: 1;
    background: #ffffff;
    border-radius: 36px;
    padding: 2.5rem;
    box-shadow: 20px 20px 40px #e6e9f0, -20px -20px 40px #ffffff;
    min-width: 0;
}

.ev-record-date {
    margin-top: 0;
    margin-bottom: 0.8rem;
    font-size: 0.85rem;
    color: #888888;
    font-weight: 500;
}

.ev-record-title {
    margin-top: 0;
    margin-bottom: 0.8rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: #333333;
}

.ev-record-description {
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.4;
}

.ev-record-media {
    margin-top: 1.2rem;
}

.ev-record-media img {
    max-width: 100%;
    border-radius: 24px;
    box-shadow: 12px 12px 24px #e6e9f0, -12px -12px 24px #ffffff;
}

/* Add record/transfer sections */
.ev-section-title {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
}

.ev-form-card,
.ev-transfer-card {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 36px;
    box-shadow: 20px 20px 40px #e6e9f0, -20px -20px 40px #ffffff;
}

.ev-add-record-form .ev-form-field {
    margin-bottom: 1.5rem;
}

.ev-add-record-form label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.ev-add-record-form input[type="text"],
.ev-add-record-form textarea {
    width: 100%;
    padding: 0.9rem 1.4rem;
    border: none;
    border-radius: 28px;
    background: #f5f5f5;
    color: #4a4a4a;
    box-shadow: inset 10px 10px 20px #e6e9f0, inset -10px -10px 20px #ffffff;
    font-size: 1rem;
    resize: vertical;
}

.ev-add-record-form .ev-file-fields {
    display: flex;
    gap: 1.5rem;
}

.ev-add-record-form .ev-file-input label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.ev-add-record-form .ev-file-input input[type="file"] {
    display: block;
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: none;
    border-radius: 24px;
    background: #f5f5f5;
    color: #4a4a4a;
    box-shadow: inset 8px 8px 16px #e6e9f0, inset -8px -8px 16px #ffffff;
    font-size: 0.9rem;
}

.ev-add-record-form button.button {
    margin-top: 1rem;
}

.ev-transfer-card p {
    margin-top: 0;
    margin-bottom: 1.2rem;
    font-size: 1rem;
}

/* Responsive behaviours for the new portal overrides */
@media (max-width: 820px) {
    .ev-container {
        flex-direction: column;
        max-width: 600px;
    }
    .ev-side-nav {
        width: 100%;
        flex: none;
        margin-bottom: 2rem;
    }
    .ev-main {
        width: 100%;
    }
    .ev-overview-card {
        flex-direction: column;
    }
    .ev-overview-image {
        flex: none;
        max-width: 100%;
        margin-bottom: 2rem;
    }
    .ev-records-container {
        flex-direction: column;
    }
    .ev-record-nav {
        flex: none;
        max-width: none;
        margin-bottom: 2rem;
    }
    .ev-record-detail {
        width: 100%;
    }
    .ev-add-record-form .ev-file-fields {
        flex-direction: column;
    }
}

/* ====================================================================
   Classic Emerald Vault portal style

   The following rules apply a simple, high‑contrast layout reminiscent of
   the original dashboard mockups. A dark sidebar, clear buttons and
   generous spacing ensure that navigation links are obvious and that the
   interface remains usable on both desktop and mobile screens. These
   styles override the neumorphic defaults above. If you prefer a
   different colour palette you can adjust the variables below.
   ==================================================================== */

/* Colour palette for the classic theme */
:root {
    --ev-classic-bg: #ffffff;
    --ev-classic-sidebar-bg: #171717;
    --ev-classic-sidebar-item-bg: #2e2e2e;
    --ev-classic-sidebar-item-hover: #444444;
    --ev-classic-sidebar-item-active: #555555;
    --ev-classic-text: #f5f5f5;
    --ev-classic-main-text: #1a1a1a;
    --ev-classic-accent: #0077cc;
}

/* Container holds the sidebar and main panel side by side on desktop */
.ev-container {
    background: var(--ev-classic-bg) !important;
    color: var(--ev-classic-main-text) !important;
    display: flex !important;
    gap: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: 100% !important;
}

/* Sidebar styling */
.ev-side-nav {
    background: var(--ev-classic-sidebar-bg) !important;
    color: var(--ev-classic-text) !important;
    width: 240px !important;
    padding: 1rem 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* Sidebar links */
.ev-side-nav .ev-nav-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}
.ev-side-nav .ev-nav-item {
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
    color: var(--ev-classic-text) !important;
    padding: 0.8rem 1.2rem !important;
    background: var(--ev-classic-sidebar-item-bg) !important;
    margin: 0 0 4px 0 !important;
    border-radius: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    transition: background 0.2s ease !important;
    /* Remove any halo/box shadow inherited from earlier styles */
    box-shadow: none !important;
}
.ev-side-nav .ev-nav-item:active {
    /* Provide feedback only on press/click instead of on hover */
    background: var(--ev-classic-sidebar-item-hover) !important;
}
.ev-side-nav .ev-nav-item.active {
    background: var(--ev-classic-sidebar-item-active) !important;
}

/* Top bar styling */
.ev-topbar {
    background: var(--ev-classic-sidebar-bg) !important;
    color: var(--ev-classic-text) !important;
    padding: 1rem 1.5rem !important;
    margin: 0 0 1rem 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
.ev-topbar-link {
    color: var(--ev-classic-text) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    background: transparent !important;
    padding: 0.5rem 1rem !important;
    border-radius: 4px !important;
    transition: background 0.2s ease !important;
}
.ev-topbar-link:active {
    background: var(--ev-classic-sidebar-item-hover) !important;
}

/* Main content area */
.ev-main {
    flex: 1 !important;
    background: var(--ev-classic-bg) !important;
    color: var(--ev-classic-main-text) !important;
    padding: 2rem !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 100vh !important;
}

/* Overview and record cards simplified for classic theme */
.ev-overview-card,
.ev-record-detail,
.ev-form-card,
.ev-transfer-card {
    background: var(--ev-classic-bg) !important;
    color: var(--ev-classic-main-text) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 1.5rem !important;
}

.ev-overview-image {
    background: #f0f0f0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    margin-bottom: 1rem !important;
}

.ev-records-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 1rem !important;
}
.ev-record-nav {
    width: 200px !important;
    margin-right: 1rem !important;
}
.ev-record-nav .ev-nav-item {
    padding: 0.6rem 1rem !important;
    font-size: 0.9rem !important;
}

/* Adjust add record form fields to use minimal styling */
.ev-add-record-form input[type="text"],
.ev-add-record-form textarea {
    border: 1px solid #ccc !important;
    background: #fff !important;
    border-radius: 4px !important;
    padding: 0.6rem 0.8rem !important;
    box-shadow: none !important;
}
.ev-add-record-form .ev-file-input input[type="file"] {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--ev-classic-main-text) !important;
}
.ev-add-record-form button.button {
    background: var(--ev-classic-sidebar-bg) !important;
    color: var(--ev-classic-text) !important;
    border-radius: 4px !important;
    padding: 0.6rem 1.2rem !important;
    box-shadow: none !important;
}
.ev-add-record-form button.button:hover {
    background: var(--ev-classic-sidebar-item-hover) !important;
}

/* Responsive layout for classic portal */
@media (max-width: 768px) {
    .ev-container {
        flex-direction: column !important;
    }

/* Simple action links (e.g., view records, download certificate) within the overview
   card. Make them clearly distinguishable without heavy styling. */
.ev-overview-action {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--ev-classic-accent);
    text-decoration: underline;
    font-weight: 500;
}
.ev-overview-action:hover {
    color: var(--ev-classic-text);
    background: var(--ev-classic-sidebar-item-hover);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    text-decoration: none;
}

/* Grouped action buttons within the artwork overview. Each anchor styled as
   a button for better visibility. */
.ev-overview-actions {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.ev-overview-button {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background: var(--ev-classic-sidebar-bg);
    color: var(--ev-classic-text);
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.2s ease;
}
.ev-overview-button:hover {
    background: var(--ev-classic-sidebar-item-hover);
}
    .ev-side-nav {
        width: 100% !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: stretch !important;
    }
    .ev-side-nav .ev-nav-item {
        flex: 1 !important;
        margin: 0 !important;
        text-align: center !important;
        border-radius: 0 !important;
    }
    .ev-records-container {
        flex-direction: column !important;
    }
    .ev-record-nav {
        width: 100% !important;
        margin: 0 0 1rem 0 !important;
        display: flex !important;
        overflow-x: auto !important;
    }
    .ev-record-nav .ev-nav-item {
        flex: none !important;
        margin-right: 0.5rem !important;
        white-space: nowrap !important;
    }
    .ev-record-detail {
        width: 100% !important;
    }
    .ev-topbar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    .ev-main {
        padding: 1rem !important;
    }
}

/* Override generic button styles for the classic theme. Remove the
   neumorphic halo/shadow and apply a simple dark button with light text.
   This applies to any element with class "button" inside the portal.
*/
.ev-container .button {
    background: var(--ev-classic-sidebar-bg) !important;
    color: var(--ev-classic-text) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 0.6rem 1.2rem !important;
    box-shadow: none !important;
    transition: background 0.2s ease !important;
}
.ev-container .button:active {
    background: var(--ev-classic-sidebar-item-hover) !important;
}

/* Informational text on forms. Use a subdued colour and spacing */
.ev-form-info {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    color: #5f5f5f;
    line-height: 1.4;
}

/* Reset any remaining neumorphic shadows and rounded corners inside the portal.
   Apply these globally within the portal container to ensure a flat look. */
.ev-container, .ev-container * {
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Additional responsive rules to stack the sidebar items on small screens.
   This ensures no buttons are hidden and they wrap vertically in the
   available space. */
@media (max-width: 768px) {
    .ev-side-nav {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
    }
    .ev-side-nav .ev-nav-item {
        flex: none !important;
        margin: 0 0 4px 0 !important;
        text-align: left !important;
    }
    .ev-record-nav {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        overflow: visible !important;
    }
    .ev-record-nav .ev-nav-item {
        flex: 1 1 45% !important;
        margin: 0 !important;
    }
}

/* Override default button styles to match neumorphic design */
.button {
    display: inline-block;
    padding: 0.9rem 1.8rem;
    font-size: 1rem;
    border-radius: 28px;
    background: #ffffff;
    color: #4a4a4a;
    box-shadow: 10px 10px 20px #e6e9f0, -10px -10px 20px #ffffff;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: box-shadow 0.2s;
}

.button:hover,
.button:focus {
    box-shadow: inset 10px 10px 20px #e6e9f0, inset -10px -10px 20px #ffffff;
}

.button:active {
    box-shadow: inset 10px 10px 20px #e6e9f0, inset -10px -10px 20px #ffffff;
}

/* Custom styling for the authenticity check button on the vault page. The default
   white button blended into the light background, so we override it to use the
   same neumorphic surface colour as other elements. The button now looks
   consistent with the keypad buttons and responds to press with an inset shadow. */
#ev-check {
    background: #e0e5ec !important;
    color: #4a4a4a !important;
    border: none !important;
    border-radius: 28px !important;
    box-shadow: 6px 6px 12px #c8ccd1, -6px -6px 12px #ffffff !important;
    padding: 0.9rem 1.8rem !important;
    font-weight: 600 !important;
    transition: box-shadow 0.2s !important;
}
#ev-check:active {
    box-shadow: inset 6px 6px 12px #c8ccd1, inset -6px -6px 12px #ffffff !important;
}

/* === Emerald Vault Login Page === */
/* Wrapper card for login/register/forgot forms. Uses a soft background and subtle shadows. */
.ev-login-wrapper {
    max-width: 420px;
    margin: 2rem auto;
    padding: 2rem;
    background: #e0e5ec;
    border-radius: 30px;
    box-shadow: -8px -8px 16px rgba(255,255,255,0.6), 8px 8px 16px rgba(0,0,0,0.1);
    color: #4a4a4a;
    font-family: 'Poppins', sans-serif;
}
/* Emerald icon placeholder: round badge with letter E. Replace with your own logo if needed */
.ev-login-icon .icon {
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    background: #e0e5ec;
    box-shadow: -6px -6px 12px #ffffff, 6px 6px 12px #c8ccd1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #229954;
    margin: 0 auto 1rem;
}
/* Tabs to switch between login/register/forgot. */
.ev-login-tabs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 0.5rem;
}
.ev-login-tabs button {
    flex: 1;
    padding: 0.6rem 0.8rem;
    border: none;
    border-radius: 20px;
    background: #e0e5ec;
    color: #4a4a4a;
    font-weight: 500;
    box-shadow: 6px 6px 12px #c8ccd1, -6px -6px 12px #ffffff;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ev-login-tabs button.active {
    box-shadow: inset 6px 6px 12px #c8ccd1, inset -6px -6px 12px #ffffff;
}
.ev-login-form {
    display: none;
}
.ev-login-form.active {
    display: block;
}
.ev-login-form input[type="text"],
.ev-login-form input[type="email"],
.ev-login-form input[type="password"] {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: none;
    border-radius: 15px;
    background: #e0e5ec;
    box-shadow: inset 4px 4px 8px #c8ccd1, inset -4px -4px 8px #ffffff;
    color: #4a4a4a;
    font-size: 1rem;
}
.ev-login-form button[type="submit"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 20px;
    background: #e0e5ec;
    color: #229954;
    font-weight: 600;
    box-shadow: -6px -6px 12px #ffffff, 6px 6px 12px #c8ccd1;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ev-login-form button[type="submit"]:active {
    box-shadow: inset 6px 6px 12px #c8ccd1, inset -6px -6px 12px #ffffff;
}
.ev-login-form label {
    color: #4a4a4a;
    font-size: 0.8rem;
}
.ev-info {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.5rem;
    text-align: center;
}
/* Google sign‑in container alignment */
.ev-google-login .g_id_signin {
    margin: 0 auto;
}

/*
 * Classic collector portal theme
 *
 * These rules style the updated collector portal views. A dark sidebar
 * and top bar create high contrast against white content panels. On
 * smaller screens the sidebar collapses into a horizontal row to
 * ensure all navigation remains visible. Buttons adopt an emerald
 * accent colour without raised halo effects.
 */

/* Top navigation bar */
.ev-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #111;
    color: #fff;
    padding: 1rem 1.5rem;
}

/* Top bar links */
.ev-topbar-link {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    display: inline-block;
    transition: background-color 0.15s ease;
}
.ev-topbar-link:hover {
    background: #222;
}

/* Portal layout container */
.ev-container {
    display: flex;
    flex-direction: row;
    min-height: calc(100vh - 70px);
    width: 100%;
}

/* Sidebar */
.ev-side-nav {
    width: 220px;
    background: #111;
    color: #fff;
    padding: 2rem 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.ev-side-nav .ev-nav-wrapper {
    margin-bottom: 0.5rem;
}
.ev-side-nav .ev-nav-item {
    display: block;
    padding: 0.7rem 1rem;
    border-radius: 0.5rem;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.15s ease;
}
.ev-side-nav .ev-nav-item:hover {
    background: #222;
}
.ev-side-nav .ev-nav-item.active {
    background: #333;
}

/* Main content */
.ev-main {
    flex: 1;
    padding: 2rem;
    background: #f5f5f5;
    box-sizing: border-box;
}

/* Overview card */
.ev-overview-card {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    background: #fff;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    flex-wrap: wrap;
}
.ev-overview-image {
    flex: 0 0 40%;
    max-width: 40%;
}
.ev-overview-image img {
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
}
.ev-overview-info {
    flex: 1;
}
.ev-overview-title {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.75rem;
    font-weight: 600;
    color: #222;
}

/* Records page */
.ev-records-container {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
.ev-record-nav {
    flex: 0 0 200px;
    max-width: 200px;
}
.ev-record-detail {
    flex: 1;
    background: #fff;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.ev-record-date {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}
.ev-record-title {
    font-size: 1.5rem;
    margin: 0.5rem 0 1rem;
    color: #222;
    font-weight: 600;
}
.ev-record-description {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #444;
    line-height: 1.4;
}
.ev-record-media {
    margin-top: 0.5rem;
    font-size: 0.9rem;
}
.ev-record-media img {
    max-width: 100%;
    height: auto;
    margin-top: 0.25rem;
    border-radius: 0.5rem;
}

/* Form card and fields */
.ev-section-title {
    font-size: 1.75rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 1rem;
    color: #222;
}
.ev-form-info {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1.5rem;
}
.ev-form-card {
    background: #fff;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}
.ev-form-field {
    margin-bottom: 1rem;
}
.ev-form-field label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 500;
    color: #333;
}
.ev-form-field input,
.ev-form-field textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    background: #fff;
    font-size: 1rem;
    color: #333;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.ev-form-field textarea {
    resize: vertical;
}
.ev-file-fields {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.ev-file-input {
    flex: 1;
}
.button {
    display: inline-block;
    background: #229954;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
    text-decoration: none;
}
.button:hover {
    background: #1e7f48;
}
.button:active {
    background: #186638;
}

/* Transfer and certificate cards */
.ev-transfer-card {
    background: #fff;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

/* Responsive rules */
@media (max-width: 768px) {
    .ev-container {
        flex-direction: column;
    }
    .ev-side-nav {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 1rem 0.5rem;
    }
    .ev-side-nav .ev-nav-wrapper {
        flex: 1 0 auto;
        margin-bottom: 0;
        margin-right: 0.5rem;
    }
    .ev-side-nav .ev-nav-item {
        text-align: center;
        padding: 0.5rem 0.5rem;
    }
    .ev-records-container {
        flex-direction: column;
    }
    .ev-record-nav {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        max-width: 100%;
        margin-bottom: 1rem;
    }
    .ev-record-nav .ev-nav-wrapper {
        flex: 1 0 auto;
        margin-right: 0.5rem;
    }
    .ev-record-detail {
        padding: 1.5rem;
    }
    .ev-overview-card {
        flex-direction: column;
    }
    .ev-overview-image,
    .ev-overview-info {
        max-width: 100%;
    }
}