/* Petit Happiness Admin - Huisstijl */

body {
    font-family: 'Montserrat', Arial, sans-serif;
    background-color: #F7F4EF;
    color: #3B4C59;
    margin: 0;
}

h1, h2, h3 {
    color: #3B4C59;
    font-weight: 600;
}

.card {
    background: #ffffff;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.button,
button {
    background-color: #E1A730;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 14px 22px;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    font-size: 16px;
}

button:hover,
.button:hover {
    opacity: 0.9;
}

input,
select,
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}

label {
    font-weight: 500;
}

/* Login pagina */

.login-subtitle {
    text-align: center;
    margin-bottom: 25px;
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F7F4EF;
}


.login-box {
    background: #ffffff;
    padding: 40px;
    width: 340px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}


.login-box label {
    display: block;
    margin-top: 18px;
    margin-bottom: 8px;
}


.login-box input {
    margin-bottom: 5px;
}


.login-box button {
    margin-top: 25px;
}

.login-box button {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
}

.login-box button {
    width: 100%;
    min-height: 48px;
    margin-top: 25px;
}

.login-box h1 {
    text-align: center;
    margin-bottom: 5px;
}

.login-subtitle {
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
}

.login-subtitle {
    color: #3B4C59;
    opacity: 0.75;
    font-size: 15px;
}

/* Login branding */

.login-box h1 {
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: 1px;
}


.login-tagline {
    text-align: center;
    font-size: 12px;
    color: #3B4C59;
    opacity: 0.75;
    margin-top: 0;
    margin-bottom: 25px;
}

.login-subtitle {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 25px;
}

/* Dashboard */

.dashboard-page {
    padding: 25px;
}


.dashboard-header {
    background: white;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    margin-bottom: 20px;
}


.dashboard-header h1 {
    margin: 0;
    letter-spacing: 1px;
    font-size: 28px;
}


.dashboard-header p {
    margin-top: 8px;
    margin-bottom: 0;
    color: #3B4C59;
    opacity: 0.75;
}


.dashboard-user {
    background: white;
    padding: 18px 25px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    margin-bottom: 25px;
    font-weight: 500;
    text-align: center;
}

.dashboard-greeting-heart {
    color: #E1A730;
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
}

.dashboard-role-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #F3E4BE;
    color: #3B4C59;
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
}

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.dashboard-card {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    text-align: center;
}


.dashboard-card h3 {
    margin-top: 0;
    font-size: 18px;
}


.dashboard-number {
    font-size: 34px;
    font-weight: 600;
    margin: 15px 0;
}

.dashboard-number {
    font-size: 28px;
    font-weight: 600;
}


.dashboard-actions {
    margin-top: 30px;
}


.dashboard-actions a {
    display: block;
    text-decoration: none;
    text-align: center;
    margin-bottom: 15px;
}

.dashboard-actions {
    display: grid;
    gap: 15px;
    margin-top: 35px;
    max-width: 400px;
}


.dashboard-actions .button {
    display: block;
    text-align: center;
    text-decoration: none;
    min-height: 50px;
    line-height: 50px;
    padding: 0 20px;
}

.welcome-text {
    display: flex;
    justify-content: center;    
    align-items: center;
    gap: 8px;
    Font-weight: 500;
}


.welcome-icon {
    font-size: 22px;
}


.heart {
    color: #E1A730;
    font-size: 25px;
}

.logout-button {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #3B4C59;
    text-decoration: none;
    font-size: 14px;
    opacity: 0.75;
}


.logout-button:hover {
    color: #E1A730;
}

/* Nieuw artikel formulier */

.form-container {
    max-width: 900px;
    margin: 30px auto;
}


.form-container .card {
    margin-bottom: 30px;
    padding: 30px;
}


.form-container h2 {
    margin-bottom: 25px;
}


.form-container label {
    display: block;
    font-size: 17px;
    margin-top: 18px;
    margin-bottom: 8px;
}


.form-container input,
.form-container select,
.form-container textarea {
    font-size: 17px;
    min-height: 48px;
}


.form-container textarea {
    padding-top: 12px;
}


.form-container button {
    display: block;
    margin: 35px auto;
    min-width: 250px;
    font-size: 18px;
}

/* Ruimte tussen header en formulier */

.dashboard-header {
    margin-bottom: 35px;
}

.form-container {
    margin-top: 0;
}

/* ==========================
   Actiekaarten navigatie
========================== */


.action-cards {

    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:25px;

    margin:30px 0;

}

.action-card-form {
    margin: 0;
}

.action-card-form .action-card {
    width: 100%;
    height: 100%;
}



.action-card {

    background:#ffffff;

    border-radius:16px;

    padding:25px;

    text-align:center;

    text-decoration:none;

    color:#3B4C59;

    box-shadow:0 4px 15px rgba(0,0,0,0.08);

    transition:0.2s;

}



.action-card:hover {

    transform:translateY(-3px);

}



.action-icon {

    font-size:38px;

    margin-bottom:15px;

    color:#E1A730;

}



.action-card h3 {

    margin:0;

    font-size:20px;

}



.action-card p {

    margin-top:8px;

    font-size:15px;

    color:#3B4C59;

}

.action-cards {

    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:25px;
    margin:35px 0;

}

/* Gebruikersbeheer */

.gebruikers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.beheer-card {
    margin-top: 25px;
}

.beheer-card form button {
    margin-bottom: 0;
}

.beheer-card small {
    display: block;
    margin-top: 6px;
    color: #6b7780;
}

.beheer-melding {
    margin: 20px 0;
    padding: 14px 18px;
    border-radius: 10px;
    font-weight: 600;
}

.beheer-melding-succes {
    background: #e5f4e8;
    color: #2e6b3a;
}

.beheer-melding-fout {
    background: #fde8e8;
    color: #9b2c2c;
}

.instellingen-grid {
    margin-top: 25px;
}

.instellingen-grid .beheer-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 35px;
}

.instellingen-regel {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid #ece8e1;
}

.instellingen-regel strong {
    text-align: right;
}

.instellingen-uitleg {
    margin-top: 20px;
    color: #6b7780;
    line-height: 1.5;
}

.instellingen-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 48px;
    box-sizing: border-box;
    margin: 32px 0 0 0;
    text-align: center;
    text-decoration: none !important;
    color: #ffffff !important;
}

.instellingen-knop:link,
.instellingen-knop:visited,
.instellingen-knop:hover,
.instellingen-knop:active {
    text-decoration: none !important;
    color: #ffffff !important;
}


.action-card {

    background:#ffffff;
    border-radius:16px;
    padding:25px;
    text-align:center;
    text-decoration:none;
    color:#3B4C59;
    box-shadow:0 4px 15px rgba(0,0,0,0.08);

}


.action-icon {

    font-size:36px;
    margin-bottom:12px;

}


.action-card h3 {

    margin:5px 0;
    font-size:20px;

}


.action-card p {

    margin:0;
    font-size:15px;

}

/* ==========================
   Luxe actiekaarten dashboard
========================== */

.action-cards {

    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:25px;

    margin:35px 0;

}


.action-card {

    background:#ffffff;

    border-radius:16px;

    padding:22px 20px;

    text-align:center;

    text-decoration:none;

    color:#3B4C59;

    box-shadow:0 4px 15px rgba(0,0,0,0.08);

    transition:all 0.25s ease;

    min-height:140px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


.action-card:hover {

    transform:translateY(-5px);

    box-shadow:0 8px 22px rgba(0,0,0,0.12);

}


.action-icon {

    font-size:38px;

    margin-bottom:12px;

    color:#E1A730;

}


.action-card h3 {

    margin:0;

    font-size:20px;

    font-weight:600;

    color:#3B4C59;

}


.action-card p {

    margin-top:10px;

    font-size:15px;

    color:#6b7780;

}

/* ==========================
   Voorraad kaarten
========================== */


.stock-grid {

    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:25px;

}


.stock-card {

    background:#ffffff;

    border-radius:16px;

    padding:25px;

    box-shadow:0 4px 15px rgba(0,0,0,0.08);

    transition:all 0.2s ease;

    text-decoration:none;

    color:#3B4C59;

    display:block;

}


.stock-card:visited {

    color:#3B4C59;

    text-decoration:none;

}


.stock-card:hover {

    color:#3B4C59;

    text-decoration:none;

    transform:translateY(-3px);

}


.stock-card:active {

    color:#3B4C59;

    text-decoration:none;

}


.stock-number {

    font-size:14px;

    color:#E1A730;

    font-weight:600;

    margin-bottom:15px;

}


.stock-card h3 {

    margin:0 0 15px 0;

    color:#3B4C59;

    font-size:22px;

}


.stock-card p {

    margin:8px 0;

    color:#3B4C59;

}


.stock-price {

    font-size:22px;

    font-weight:700;

    color:#E1A730 !important;

    margin-top:15px !important;

}

/* ==========================
   Artikel detailpagina
========================== */

.article-page {

    max-width:900px;

    margin:35px auto;

}


.article-card {

    background:#ffffff;

    border-radius:16px;

    padding:35px;

    box-shadow:0 4px 15px rgba(0,0,0,0.08);

}


.article-number {

    color:#E1A730;

    font-size:16px;

    font-weight:600;

    margin-bottom:10px;

}


.article-card h2 {

    margin:0 0 30px 0;

    color:#3B4C59;

    font-size:28px;

}


.article-info {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px 40px;

}


.article-info-row {

    display:flex;

    justify-content:space-between;

    gap:20px;

    padding:14px 0;

    border-bottom:1px solid #eee;

    font-size:17px;

}


.article-info-row span {

    color:#6b7780;

}


.article-info-row strong {

    color:#3B4C59;

}


.article-description {

    margin-top:30px;

    padding-top:25px;

    border-top:1px solid #eee;

}


.article-description h3 {

    margin:0 0 10px 0;

    color:#3B4C59;

    font-size:20px;

}


.article-description p {

    margin:0;

    color:#3B4C59;

    font-size:17px;

    line-height:1.6;

}


.article-prices {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-top:30px;

}


.price-box {

    background:#F7F4EF;

    border-radius:12px;

    padding:20px;

    text-align:center;

}


.price-box span {

    display:block;

    color:#6b7780;

    font-size:16px;

    margin-bottom:8px;

}


.price-box strong {

    color:#E1A730;

    font-size:25px;

}


/* ==========================
   Artikel knoppen
========================== */

.article-actions {

    display:grid;

    grid-template-columns:1fr 1fr 1fr;

    gap:15px;

    margin-top:25px;

}


.article-actions .button {

    display:flex;

    align-items:center;

    justify-content:center;

    height:56px;

    padding:0 20px;

    box-sizing:border-box;

    text-align:center;

    text-decoration:none;

    line-height:1.2;

}


/* Alle artikelknoppen goud */

.article-actions .button {

    background:#E1A730;

    color:#ffffff;

    border-radius:10px;

}


/* Hover */

.article-actions .button:hover {

    background:#c99222;

    color:#ffffff;

    transform:translateY(-2px);

}


/* Verwijder de witte secundaire stijl */

.article-actions .secondary-button {

    background:#E1A730 !important;

    color:#ffffff !important;

    border:none;

}

/* ==========================
   Definitieve kaart-styling
========================== */


/* Klikbare voorraadkaarten */

a.stock-card,
a.stock-card:visited,
a.stock-card:hover,
a.stock-card:active {

    display:block;

    background:#ffffff;

    color:#3B4C59;

    text-decoration:none !important;

}


/* Tekst binnen voorraadkaarten */

a.stock-card .stock-number {

    color:#E1A730 !important;

}


a.stock-card h3 {

    color:#3B4C59 !important;

    text-decoration:none !important;

}


a.stock-card p {

    color:#3B4C59 !important;

    text-decoration:none !important;

}


a.stock-card .stock-price {

    color:#E1A730 !important;

    text-decoration:none !important;

}


/* Artikelpagina */

.article-page {

    width:100%;

    max-width:900px;

    margin:35px auto;

}


.article-card {

    display:block;

    width:100%;

    box-sizing:border-box;

    background:#ffffff !important;

    border-radius:16px;

    padding:35px;

    box-shadow:0 4px 15px rgba(0,0,0,0.08);

}


/* Artikelgegevens */

.article-info-row span {

    color:#6b7780 !important;

}


.article-info-row strong {

    color:#3B4C59 !important;

}


/* Prijsblokken */

.price-box {

    background:#F7F4EF !important;

}


/* Artikelknoppen */

.article-actions {

    width:100%;

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:15px;

    margin-top:25px;

}


.article-actions .button {

    width:100%;

    min-height:56px;

    height:56px;

    padding:0 20px;

    box-sizing:border-box;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    text-decoration:none !important;

    background:#E1A730 !important;

    color:#ffffff !important;

    border-radius:10px;

}


.article-actions .button:hover {

    background:#c99222 !important;

    color:#ffffff !important;

}

/* ==========================
   Terug naar dashboard knop
========================== */

.form-container > .button {

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    min-height:56px;

    height:56px;

    box-sizing:border-box;

    padding:0 20px;

    margin:20px 0 30px 0;

    background:#E1A730 !important;

    color:#ffffff !important;

    text-decoration:none !important;

    border-radius:10px;

    text-align:center;

    line-height:1.2;

}


.form-container > .button:hover {

    background:#c99222 !important;

    color:#ffffff !important;

    text-decoration:none !important;

}

/* ==========================
   Verkoopoverzicht
========================== */

.sales-table-wrapper {
    width: 100%;
    overflow-x: auto;
}


.sales-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 16px;
}


.sales-table th {
    text-align: left;
    padding: 15px 12px;
    background: #F7F4EF;
    color: #3B4C59;
    font-weight: 600;
    white-space: nowrap;
}


.sales-table td {
    padding: 16px 12px;
    border-bottom: 1px solid #eeeeee;
    color: #3B4C59;
    white-space: nowrap;
}


.sales-table tbody tr:last-child td {
    border-bottom: none;
}


.sales-table tbody tr:hover {
    background: #faf9f6;
}


.sales-price {
    color: #E1A730 !important;
    font-weight: 700;
}


/* Verkoopoverzicht kaarten */

.sales-stat-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    text-align: center;
}


.sales-stat-card h3 {
    margin-top: 0;
    font-size: 18px;
}


.sales-stat-card .sales-number {
    font-size: 30px;
    font-weight: 600;
    color: #3B4C59;
    margin: 15px 0;
}


.sales-stat-card p {
    margin: 0;
    color: #6b7780;
}

/* ==========================
   Klikbare verkoopkaart
========================== */

.dashboard-card-link {

    display:block;

    text-decoration:none !important;

    color:#3B4C59 !important;

    cursor:pointer;

    transition:all 0.25s ease;

}


.dashboard-card-link:visited {

    color:#3B4C59 !important;

    text-decoration:none !important;

}


.dashboard-card-link:hover {

    color:#3B4C59 !important;

    text-decoration:none !important;

    transform:translateY(-5px);

    box-shadow:0 8px 22px rgba(0,0,0,0.12);

}


.dashboard-card-link h3 {

    color:#3B4C59 !important;

    text-decoration:none !important;

}


.dashboard-card-link p {

    color:#3B4C59 !important;

    text-decoration:none !important;

}


.dashboard-card-link .dashboard-number {

    color:#3B4C59 !important;

}

/* ==========================
   Voorraad zoeken & filteren
========================== */

.stock-search {
    display: grid;
    grid-template-columns: minmax(240px, 2fr) 1fr 0.8fr 1fr 1fr auto auto;
    gap: 16px;
    align-items: center;
    margin: 20px 0 30px 0;
}

.stock-search input,
.stock-search select {
    min-height: 52px;
    font-size: 17px;
    margin: 0;
}

.stock-search button {
    min-height: 52px;
    padding: 0 24px;
    margin: 0;
    font-size: 17px;
    white-space: nowrap;
}

.search-reset {
    min-height: 52px;
    padding: 0 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;
    color: #3B4C59;

    border: 1px solid #ddd;
    border-radius: 10px;

    text-decoration: none !important;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
}

.search-reset:hover {
    color: #E1A730;
    border-color: #E1A730;
    text-decoration: none !important;
}

/* Tablet */

@media (max-width: 950px) {

    .stock-search {
        grid-template-columns: 1fr 1fr;
    }

}

/* Mobiel */

@media (max-width: 600px) {

    .stock-search {
        grid-template-columns: 1fr;
    }

    .stock-search button,
    .search-reset {
        width: 100%;
    }

}

/* ==========================
   Bulkartikelen
========================== */

.bulk-grid {

    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:25px;

}


.bulk-card {

    background:#ffffff;
    border-radius:16px;
    padding:25px;

    box-shadow:0 4px 15px rgba(0,0,0,0.08);

}


.bulk-number {

    color:#E1A730;
    font-size:14px;
    font-weight:600;
    margin-bottom:12px;

}


.bulk-card h3 {

    margin:0 0 18px 0;
    font-size:22px;
    color:#3B4C59;

}


.bulk-card p {

    margin:10px 0;
    color:#3B4C59;

}

/* ==========================
   Bulkactie knop
========================== */

.bulk-action-button {
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:50px;
    box-sizing:border-box;

    margin-top:22px;
    padding:0 18px;

    background:#E1A730;
    color:#ffffff !important;

    border-radius:10px;

    text-decoration:none !important;
    text-align:center;

    font-size:16px;
}


.bulk-action-button:hover {
    color:#ffffff !important;
    text-decoration:none !important;
    transform:translateY(-2px);
}
/* ==========================
   Bulk detailpagina
========================== */

.bulk-detail-actions {
    max-width:900px;
    margin:25px auto 30px auto;

    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:15px;
}


.bulk-detail-actions .button {
    min-height:56px;

    display:flex;
    align-items:center;
    justify-content:center;

    box-sizing:border-box;

    text-decoration:none !important;
    text-align:center;

    color:#ffffff !important;
}


.bulk-history-card {
    margin-top:30px;
}


.article-prices {
    grid-template-columns:repeat(2, 1fr);
}


@media (max-width:750px) {

    .bulk-detail-actions {
        grid-template-columns:1fr;
    }

    .article-prices {
        grid-template-columns:1fr;
    }

}

/* ==========================
   Bulkkaart klikbaar
========================== */

.bulk-item {
    display:flex;
    flex-direction:column;
}


.bulk-card-link {
    text-decoration:none !important;
    color:#3B4C59 !important;
    flex:1;
}


.bulk-card-link:hover {
    text-decoration:none !important;
    color:#3B4C59 !important;
    transform:translateY(-3px);
}


.bulk-card-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:12px;
}


.bulk-card-actions .bulk-action-button {
    margin-top:0;
    min-height:50px;
    padding:0 12px;
    font-size:14px;
}

/* ==========================
   Bulk voorraad waarschuwing
========================== */

.stock-warning {
    margin:14px 0;

    padding:10px 14px;

    border-radius:8px;

    background:#FFF4D6;

    color:#8A6716;

    font-size:14px;
    font-weight:600;

    text-align:center;
}


.stock-empty {
    background:#FCE8E8;
    color:#9B3A3A;
}

/* ==========================
   Dashboard lage voorraad
========================== */

.dashboard-stock-warning {
    display:flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    margin-bottom:25px;
    padding:16px 20px;

    background:#FFF4D6;

    border-radius:12px;

    color:#8A6716 !important;

    font-size:15px;
    font-weight:600;

    text-decoration:none !important;

    box-shadow:0 4px 15px rgba(0,0,0,0.05);

    transition:all 0.2s ease;
}


.dashboard-stock-warning:hover {
    transform:translateY(-2px);

    box-shadow:0 6px 18px rgba(0,0,0,0.08);

    color:#8A6716 !important;

    text-decoration:none !important;
}


.dashboard-stock-warning-icon {
    font-size:20px;
}

/* ==========================
   Omruiling berekening
========================== */

.exchange-calculation {
    margin-top:18px;
    padding:14px;

    background:#F7F4EF;

    border-radius:10px;
}


.exchange-calculation p {
    margin:6px 0;
}


.exchange-calculation strong {
    color:#E1A730;
}

/* ==========================
   Omruilhistorie
========================== */

.exchange-history {
    margin-top:20px;
    padding:18px;
    background:#ffffff;
    border-radius:12px;
    border:1px solid #eee;
}


.exchange-history h3 {
    margin-top:0;
}


.exchange-history-row {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:10px 0;
    border-bottom:1px solid #eee;
}


.exchange-history-row:last-child {
    border-bottom:none;
}


.exchange-giftcard-button {
    display:flex;
    align-items:center;
    justify-content:center;

    margin-top:20px;

    min-height:54px;

    text-decoration:none !important;
}

/* ==========================
   Retour historie
========================== */

.return-history-item {
    margin: 0 0 24px 0;
    padding: 24px;

    background: #F7F4EF;
    border-radius: 12px;
}

.return-history-item:last-child {
    margin-bottom: 0;
}

.return-history-item p {
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.return-history-status {
    margin-top: 20px !important;
}


/* Knoppen */

.return-history-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 24px;
    margin-bottom: 6px;
}

.return-history-actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 0 22px;
    margin: 0;

    box-sizing: border-box;

    background: #E1A730;
    color: #ffffff !important;

    border-radius: 10px;

    text-decoration: none !important;
    text-align: center;
}

.return-history-actions .button:hover {
    background: #c99222;
    color: #ffffff !important;
    text-decoration: none !important;
}


/* Mobiel */

@media (max-width: 600px) {

    .return-history-actions {
        flex-direction: column;
        gap: 12px;
    }

    .return-history-actions .button {
        width: 100%;
    }

}

/* ==========================
   DEFINITIEVE RETOUR KNOPPEN
========================== */

.return-history-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;

    margin-top: 28px !important;
    padding-top: 20px !important;

    border-top: 1px solid #e4ded5;
}

.return-history-actions .button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 54px !important;

    margin: 0 !important;
    padding: 0 22px !important;

    box-sizing: border-box !important;

    background: #E1A730 !important;
    color: #ffffff !important;

    border-radius: 10px !important;

    text-decoration: none !important;
    line-height: 1.2 !important;
}

.return-history-actions .button:hover,
.return-history-actions .button:visited,
.return-history-actions .button:active {
    color: #ffffff !important;
    text-decoration: none !important;
}

.return-history-actions .button:only-child {
    grid-column: 1 / -1;
    max-width: 320px;
}

@media (max-width: 600px) {

    .return-history-actions {
        grid-template-columns: 1fr !important;
    }

    .return-history-actions .button:only-child {
        max-width: none;
    }

}

/* ==========================
   Verkoopoverzicht actieknoppen
========================== */

.sales-table .button,
.sales-table .button:visited,
.sales-table .button:hover,
.sales-table .button:active {
    text-decoration: none !important;
    color: #ffffff !important;
}

.sales-table .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 0 16px;

    white-space: nowrap;
}

/* Alleen het plusteken bij Nieuw artikel gebruikt de goudkleur. */
.action-icon-plus {
    color: #E1A730;
}

/*
 * Houd het plusteken goud, ook wanneer een oudere versie van header.php nog
 * geen action-icon-plus-klasse bevat of Safari een algemene tekstkleur erft.
 */
.action-cards > a.action-card[href="nieuw_artikel.php"] > .action-icon {
    color: #E1A730 !important;
    -webkit-text-fill-color: #E1A730;
}

/* Gestapelde pakketdozen bij Bulkartikelen. */
.action-icon-boxes-svg {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Houd het uitlogicoon iets kleiner dan de overige kaarticonen. */
.action-card-form .action-icon-svg {
    display: block;
    width: 38px;
    height: 38px;
    margin: 0 auto;
}


/* ==========================
   Financiële module
   (bedrijfskosten + overzicht)
========================== */

.sales-table .wijzig-cel {

    text-align: center;
    white-space: nowrap;

}

button.button-klein,
.sales-table button.button-klein {

    display: inline-block;
    background: transparent;
    color: #E1A730;
    border: 1.5px solid #E1A730;
    border-radius: 20px;
    padding: 6px 16px;
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    width: auto;
    height: auto;

}

button.button-klein:hover,
.sales-table button.button-klein:hover {

    background: #E1A730;
    color: #ffffff;

}

.hint {

    font-size: 0.85rem;
    color: #6b7a84;
    margin-top: 10px;
    margin-bottom: 15px;
    line-height: 1.5;

}

.finance-table-wrapper {

    overflow-x: auto;
    margin-top: 15px;

}

.finance-table {

    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;

}

.finance-table th,
.finance-table td {

    padding: 12px 14px;
    text-align: right;

}

.finance-table th:first-child,
.finance-table td:first-child {

    text-align: left;

}

.finance-table thead th {

    background: #F7F4EF;
    color: #3B4C59;
    font-weight: 600;
    font-size: 0.78rem;
    white-space: normal;
    line-height: 1.3;
    vertical-align: bottom;

}

.finance-table tbody tr {

    border-bottom: 1px solid #eeeeee;

}

.finance-table tbody tr:nth-child(even) {

    background: #FBFAF7;

}

.finance-table tbody tr:hover {

    background: #F3EFE6;

}

.finance-table tfoot td {

    font-weight: 700;
    border-top: 2px solid #3B4C59;
    background: #F7F4EF;

}

.finance-negative {

    color: #b3372c;

}

.finance-positive {

    color: #2f7a4f;

}

.finance-summary-cards {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px;
    margin: 25px 0 30px;

}

.finance-summary-card {

    background: #ffffff;
    border-radius: 16px;
    padding: 18px 15px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);

}

.finance-summary-card span {

    display: block;
    font-size: 0.8rem;
    color: #6b7a84;
    margin-bottom: 6px;

}

.finance-summary-card strong {

    font-size: 1.2rem;

}

.export-form select {

    margin-bottom: 15px;

}

.export-buttons {

    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;

}

.export-buttons .button {

    flex: 1 1 220px;

}

.dashboard-card-waarschuwing {

    background: #FBEAE8 !important;
    border: 1.5px solid #b3372c;

}

.dashboard-card-waarschuwing .dashboard-number {

    color: #b3372c;

}

.dashboard-section-title {

    font-size: 0.95rem;
    font-weight: 600;
    color: #6b7a84;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 35px 0 12px;

}

.dashboard-section-title:first-of-type {

    margin-top: 25px;

}

.global-search-card {

    margin-bottom: 10px;

}

.global-search-form {

    display: flex;
    gap: 12px;
    flex-wrap: wrap;

}

.global-search-form input[type="text"] {

    flex: 1 1 300px;
    padding: 12px 16px;
    border: 1.5px solid #e5ded1;
    border-radius: 10px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 1rem;

}

.global-search-form .button {

    flex: 0 0 auto;

}

.beginvoorraad-veld {

    background: #F7F4EF;
    border-radius: 10px;
    padding: 15px 18px;
    margin: 20px 0;

}

.beginvoorraad-veld label {

    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: #3B4C59;
    cursor: pointer;

}

.beginvoorraad-veld input[type="checkbox"] {

    margin-top: 3px;
    flex-shrink: 0;

}