/*
 * PixelPlein – Theme variable definitions
 * Loaded BEFORE style.css. style.css uses these vars everywhere.
 *
 * Themes:
 *   2003          – original CU2 happy colours (default)
 *   modern-light  – Hyper Modern 2026, light (indigo/violet accents, zinc surfaces)
 *   modern-dark   – Hyper Modern 2026, dark  (true black, neon violet/rose glows)
 *
 * Dutch Flat UI palette (flatuicolors.com/palette/nl):
 *   Sunflower      #FFC312   Radiant Yellow  #F79F1F
 *   Energos        #C4E538   Android Green   #A3CB38
 *   Pixelated Grass#009432   Blue Martina    #12CBC4
 *   Mediterranean  #1289A7   Merchant Marine #0652DD
 *   Nassau Blue    #1B1464   Lavender Rose   #FDA7DF
 *   Lavender Pink  #D980FA   Forgotten Purple#9980FA
 *   Circumorbital  #5758BB   Hollyhock       #833471
 *   Bara Red       #ED4C67   Red Pigment     #B53471
 *   Puffins Bill   #EE5A24   Turkish Aqua    #006266
 *   Magenta Purple #6F1E51
 */

/* ═══════════════════════════════════════════════════════════════
   2003 – default (also :root fallback)
═══════════════════════════════════════════════════════════════ */
:root, [data-theme="2003"] {
    --v-nav-bg:            linear-gradient(90deg, #FF6600 0%, #FF3399 45%, #9933FF 100%);
    --v-nav-border:        #FFCC00;

    --v-body-bg:           #FFFFCC;
    --v-body-dot1:         #FF99CC;
    --v-body-dot2:         #99CCFF;

    --v-main-bg:           #ffffff;
    --v-main-border:       #3399FF;

    /* Left sidebar */
    --v-sl-bg:             #CC66FF;
    --v-sl-border:         #9933FF;
    --v-sl-header:         #9933FF;
    --v-sl-ad:             #9900CC;
    --v-sl-ad-border:      #9933FF;

    /* Right sidebar */
    --v-sr-bg:             #66BBFF;
    --v-sr-header:         #3399FF;
    --v-sr-account:        #0077CC;
    --v-sr-account-h:      #005FA3;

    /* Sidebar shared */
    --v-sb-text:           #fff;
    --v-sb-hover-text:     #FFCC00;
    --v-sb-item-border:    rgba(255,255,255,.2);
    --v-sb-active-bg:      #FFCC00;
    --v-sb-active-text:    #3399FF;

    --v-footer-bg:         linear-gradient(90deg, #9933FF 0%, #3399FF 55%, #00CCFF 100%);
    --v-footer-border:     #FFCC00;

    /* Text / links */
    --v-text:              #333333;
    --v-link:              #FF3399;
    --v-border:            #CC99FF;
    --v-heading:           #9933FF;
    --v-heading-border:    #FF3399;

    /* Inputs */
    --v-input-bg:          #FFFEF8;
    --v-input-border:      #CC99FF;
    --v-input-focus:       #FF3399;
    --v-label:             #9933FF;

    /* Auth boxes */
    --v-auth-bg:           linear-gradient(135deg, #FFCCFF 0%, #CCFFFF 50%, #FFFFCC 100%);
    --v-auth-border:       #FF3399;
    --v-auth-shadow:       #9933FF;
    --v-auth-h2:           #9933FF;
    --v-auth-sub:          #FF3399;
    --v-auth-link:         #FF3399;
    --v-auth-link-h:       #9933FF;

    /* Profile cards */
    --v-card-bg:           linear-gradient(135deg, #FFCCFF, #CCFFFF);
    --v-card-border:       #9933FF;
    --v-card-shadow:       #9933FF;
    --v-card-name:         #9933FF;
    --v-card-date:         #3399FF;

    /* Welcome banner */
    --v-welcome-bg:        linear-gradient(135deg, #FF99CC, #FFCCFF, #CCFFFF, #CCFFCC);
    --v-welcome-border:    #FF3399;
    --v-welcome-h1:        #9933FF;

    /* Public profile header */
    --v-ph-bg:             linear-gradient(135deg, #FFCCFF, #CCFFFF);
    --v-ph-border:         #FF3399;
    --v-ph-avatar-border:  #FFCC00;
    --v-ph-name:           #9933FF;
    --v-ph-since:          #3399FF;

    /* Bio */
    --v-bio-bg:            #FFFEF0;
    --v-bio-border:        #FFCC00;
    --v-bio-heading:       #9933FF;
    --v-bio-link:          #FF3399;
    --v-bio-img-border:    #FF3399;

    /* Account section boxes */
    --v-section-bg:        linear-gradient(135deg, #FFFCCC, #FFCCFF);
    --v-section-border:    #FFCC00;
    --v-section-h:         #FF6600;
    --v-section-hborder:   #FFCC00;

    /* Groups */
    --v-group-bg:          linear-gradient(135deg, #FFCCFF, #CCCCFF);
    --v-group-border:      #9933FF;
    --v-group-h:           #9933FF;
    --v-group-create-bg:   linear-gradient(135deg, #FFFFCC, #CCFFFF);
    --v-group-create-bdr:  #3399FF;
    --v-group-create-h:    #3399FF;

    /* Photos */
    --v-photo-add-bg:      linear-gradient(135deg, #FFFFCC, #FFCCFF);
    --v-photo-add-bdr:     #FFCC00;
    --v-photo-add-h:       #FF6600;
    --v-photo-border:      #FF3399;
    --v-photo-overlay:     rgba(153,51,255,.82);

    /* Modal */
    --v-modal-bg:          linear-gradient(135deg, #FFCCFF, #CCFFFF);
    --v-modal-border:      #9933FF;
    --v-modal-h:           #9933FF;

    /* Editor */
    --v-editor-border:     #FF3399;
    --v-editor-toolbar:    linear-gradient(135deg, #FFCCFF, #CCCCFF);
    --v-editor-preview:    #FFFEF0;

    /* Messaging */
    --v-msg-active:        #FF6600;
    --v-msg-border:        #CC99FF;
    --v-msg-bg:            #fff;
    --v-msg-unread-bg:     #FFF0FF;
    --v-msg-unread-subj:   #9933FF;
    --v-msg-who:           #FF6600;
    --v-msg-vh-bg:         linear-gradient(135deg, #FFCCFF, #CCCCFF);
    --v-msg-vbody-bg:      #FFFEF0;
    --v-msg-vbody-border:  #CC99FF;

    /* Misc */
    --v-divider:           #CC99FF;

    /* Admin */
    --v-adm-th:            #333;
    --v-adm-th-text:       #FFCC00;
    --v-adm-hover:         #FFFEF0;
}

/* ═══════════════════════════════════════════════════════════════
   Modern Light  — UniConf / Flat Material stijl
   Donkere Flat-UI nav (#2c3e50) · Lichtgrijs body (#ecf0f1) · Emerald accent (#1abc9c)
═══════════════════════════════════════════════════════════════ */
[data-theme="modern-light"] {
    --v-nav-bg:            #2c3e50;
    --v-nav-border:        #1abc9c;

    --v-body-bg:           #ecf0f1;
    --v-body-dot1:         transparent;
    --v-body-dot2:         transparent;

    --v-main-bg:           #ffffff;
    --v-main-border:       #bdc3c7;

    --v-sl-bg:             #2c3e50;
    --v-sl-border:         #1a252f;
    --v-sl-header:         #1a252f;
    --v-sl-ad:             #102028;
    --v-sl-ad-border:      #1abc9c;

    --v-sr-bg:             #2c3e50;
    --v-sr-header:         #1a252f;
    --v-sr-account:        #1a252f;
    --v-sr-account-h:      #0d1a22;

    --v-sb-text:           #ecf0f1;
    --v-sb-hover-text:     #1abc9c;
    --v-sb-item-border:    rgba(255,255,255,.10);
    --v-sb-active-bg:      #1abc9c;
    --v-sb-active-text:    #ffffff;

    --v-footer-bg:         #2c3e50;
    --v-footer-border:     #1abc9c;

    --v-text:              #2c3e50;
    --v-link:              #16a085;
    --v-border:            #bdc3c7;
    --v-heading:           #2c3e50;
    --v-heading-border:    #1abc9c;

    --v-input-bg:          #ffffff;
    --v-input-border:      #bdc3c7;
    --v-input-focus:       #1abc9c;
    --v-label:             #7f8c8d;

    --v-auth-bg:           #ffffff;
    --v-auth-border:       #1abc9c;
    --v-auth-shadow:       rgba(26,188,156,.12);
    --v-auth-h2:           #2c3e50;
    --v-auth-sub:          #7f8c8d;
    --v-auth-link:         #16a085;
    --v-auth-link-h:       #1abc9c;

    --v-card-bg:           #ffffff;
    --v-card-border:       #bdc3c7;
    --v-card-shadow:       rgba(0,0,0,.06);
    --v-card-name:         #2c3e50;
    --v-card-date:         #7f8c8d;

    --v-welcome-bg:        #ecf0f1;
    --v-welcome-border:    #1abc9c;
    --v-welcome-h1:        #2c3e50;

    --v-ph-bg:             #ecf0f1;
    --v-ph-border:         #1abc9c;
    --v-ph-avatar-border:  #1abc9c;
    --v-ph-name:           #2c3e50;
    --v-ph-since:          #7f8c8d;

    --v-bio-bg:            #ecf0f1;
    --v-bio-border:        #bdc3c7;
    --v-bio-heading:       #2c3e50;
    --v-bio-link:          #16a085;
    --v-bio-img-border:    #1abc9c;

    --v-section-bg:        #ecf0f1;
    --v-section-border:    #bdc3c7;
    --v-section-h:         #16a085;
    --v-section-hborder:   #1abc9c;

    --v-group-bg:          #ecf0f1;
    --v-group-border:      #bdc3c7;
    --v-group-h:           #2c3e50;
    --v-group-create-bg:   #ffffff;
    --v-group-create-bdr:  #1abc9c;
    --v-group-create-h:    #16a085;

    --v-photo-add-bg:      #ecf0f1;
    --v-photo-add-bdr:     #1abc9c;
    --v-photo-add-h:       #16a085;
    --v-photo-border:      #1abc9c;
    --v-photo-overlay:     rgba(44,62,80,.88);

    --v-modal-bg:          #ffffff;
    --v-modal-border:      #1abc9c;
    --v-modal-h:           #2c3e50;

    --v-editor-border:     #bdc3c7;
    --v-editor-toolbar:    #ecf0f1;
    --v-editor-preview:    #ffffff;

    --v-msg-active:        #1abc9c;
    --v-msg-border:        #bdc3c7;
    --v-msg-bg:            #ffffff;
    --v-msg-unread-bg:     #eafaf1;
    --v-msg-unread-subj:   #16a085;
    --v-msg-who:           #16a085;
    --v-msg-vh-bg:         #ecf0f1;
    --v-msg-vbody-bg:      #ffffff;
    --v-msg-vbody-border:  #bdc3c7;

    --v-divider:           #bdc3c7;

    --v-adm-th:            #2c3e50;
    --v-adm-th-text:       #1abc9c;
    --v-adm-hover:         #eafaf1;
}

/* ═══════════════════════════════════════════════════════════════
   Modern Dark  — UniConf / Flat Material stijl
   Bijna-zwart body (#111416) · Donkere nav (#0d1013) · Emerald accent (#1abc9c)
═══════════════════════════════════════════════════════════════ */
[data-theme="modern-dark"] {
    --v-nav-bg:            #0d1013;
    --v-nav-border:        #1abc9c;

    --v-body-bg:           #111416;
    --v-body-dot1:         transparent;
    --v-body-dot2:         transparent;

    --v-main-bg:           #1a1d20;
    --v-main-border:       #252a2e;

    --v-sl-bg:             #0d1013;
    --v-sl-border:         #1c2026;
    --v-sl-header:         #060708;
    --v-sl-ad:             #060708;
    --v-sl-ad-border:      #1abc9c;

    --v-sr-bg:             #0d1013;
    --v-sr-header:         #060708;
    --v-sr-account:        #060708;
    --v-sr-account-h:      #010102;

    --v-sb-text:           #8a9099;
    --v-sb-hover-text:     #1abc9c;
    --v-sb-item-border:    rgba(255,255,255,.05);
    --v-sb-active-bg:      #1abc9c;
    --v-sb-active-text:    #ffffff;

    --v-footer-bg:         #0d1013;
    --v-footer-border:     #1c2026;

    --v-text:              #e8eaed;
    --v-link:              #1abc9c;
    --v-border:            #252a2e;
    --v-heading:           #e8eaed;
    --v-heading-border:    #1abc9c;

    --v-input-bg:          #0d1013;
    --v-input-border:      #252a2e;
    --v-input-focus:       #1abc9c;
    --v-label:             #8a9099;

    --v-auth-bg:           #1a1d20;
    --v-auth-border:       #1abc9c;
    --v-auth-shadow:       rgba(26,188,156,.15);
    --v-auth-h2:           #e8eaed;
    --v-auth-sub:          #8a9099;
    --v-auth-link:         #1abc9c;
    --v-auth-link-h:       #16a085;

    --v-card-bg:           #1a1d20;
    --v-card-border:       #252a2e;
    --v-card-shadow:       rgba(0,0,0,.5);
    --v-card-name:         #e8eaed;
    --v-card-date:         #8a9099;

    --v-welcome-bg:        #1a1d20;
    --v-welcome-border:    #1abc9c;
    --v-welcome-h1:        #e8eaed;

    --v-ph-bg:             #1a1d20;
    --v-ph-border:         #1abc9c;
    --v-ph-avatar-border:  #1abc9c;
    --v-ph-name:           #e8eaed;
    --v-ph-since:          #8a9099;

    --v-bio-bg:            #1a1d20;
    --v-bio-border:        #252a2e;
    --v-bio-heading:       #e8eaed;
    --v-bio-link:          #1abc9c;
    --v-bio-img-border:    #252a2e;

    --v-section-bg:        #1a1d20;
    --v-section-border:    #252a2e;
    --v-section-h:         #1abc9c;
    --v-section-hborder:   #252a2e;

    --v-group-bg:          #1a1d20;
    --v-group-border:      #252a2e;
    --v-group-h:           #e8eaed;
    --v-group-create-bg:   #1a1d20;
    --v-group-create-bdr:  #1abc9c;
    --v-group-create-h:    #1abc9c;

    --v-photo-add-bg:      #1a1d20;
    --v-photo-add-bdr:     #252a2e;
    --v-photo-add-h:       #1abc9c;
    --v-photo-border:      #252a2e;
    --v-photo-overlay:     rgba(13,16,19,.92);

    --v-modal-bg:          #1a1d20;
    --v-modal-border:      #1abc9c;
    --v-modal-h:           #e8eaed;

    --v-editor-border:     #252a2e;
    --v-editor-toolbar:    #1a1d20;
    --v-editor-preview:    #1a1d20;

    --v-msg-active:        #1abc9c;
    --v-msg-border:        #252a2e;
    --v-msg-bg:            #1a1d20;
    --v-msg-unread-bg:     #0e2218;
    --v-msg-unread-subj:   #1abc9c;
    --v-msg-who:           #1abc9c;
    --v-msg-vh-bg:         #1a1d20;
    --v-msg-vbody-bg:      #1a1d20;
    --v-msg-vbody-border:  #252a2e;

    --v-divider:           #1c2026;

    --v-adm-th:            #0d1013;
    --v-adm-th-text:       #1abc9c;
    --v-adm-hover:         #0e2218;
}

/* ═══════════════════════════════════════════════════════════════
   Modern Visual Layer — Corporate Sharp / Zero Radius
   Teal accent · Uppercase labels · Volledig scherpe hoeken
═══════════════════════════════════════════════════════════════ */

/* Inter font via Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── Font stack ── */
[data-theme="modern-light"],
[data-theme="modern-dark"] {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
[data-theme="modern-light"] body,
[data-theme="modern-dark"] body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-image: none;
}

/* ── ZERO BORDER-RADIUS: alles volledig scherp ── */
[data-theme="modern-light"] *,
[data-theme="modern-dark"] * {
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* Uitzondering: ronde avatars blijven rond */
[data-theme="modern-light"] .pp-avatar-small,
[data-theme="modern-dark"]  .pp-avatar-small,
[data-theme="modern-light"] .pp-profile-avatar,
[data-theme="modern-dark"]  .pp-profile-avatar,
[data-theme="modern-light"] .pp-profile-card img,
[data-theme="modern-dark"]  .pp-profile-card img {
    border-radius: 50% !important;
}

/* ── Nav ── */
[data-theme="modern-light"] .pp-topnav,
[data-theme="modern-dark"] .pp-topnav {
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    border-bottom-width: 2px;
}
[data-theme="modern-light"] .pp-admin-link,
[data-theme="modern-dark"] .pp-admin-link {
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.1);
}

/* ── Auth box ── */
[data-theme="modern-light"] .pp-auth-container,
[data-theme="modern-dark"] .pp-auth-container {
    border-width: 2px;
}

/* ── Labels uppercase ── */
[data-theme="modern-light"] .pp-form-group label,
[data-theme="modern-dark"] .pp-form-group label {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
}

/* ── Input focus teal ring (geen shadow, wel border) ── */
[data-theme="modern-light"] .pp-form-group input:focus,
[data-theme="modern-light"] .pp-form-group textarea:focus,
[data-theme="modern-light"] .pp-form-group select:focus,
[data-theme="modern-light"] .pp-input:focus {
    outline: 2px solid #00bfa5 !important;
    outline-offset: -2px;
    border-color: #00bfa5;
}
[data-theme="modern-dark"] .pp-form-group input:focus,
[data-theme="modern-dark"] .pp-form-group textarea:focus,
[data-theme="modern-dark"] .pp-form-group select:focus,
[data-theme="modern-dark"] .pp-input:focus {
    outline: 2px solid #00bfa5 !important;
    outline-offset: -2px;
    border-color: #00bfa5;
}

/* ── Buttons ── */
[data-theme="modern-light"] .pp-btn,
[data-theme="modern-dark"] .pp-btn {
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    font-size: 11px;
    border: none;
    transition: background .15s;
}
[data-theme="modern-light"] .pp-btn:active,
[data-theme="modern-dark"] .pp-btn:active { transform: none; }

[data-theme="modern-light"] .pp-btn-primary,
[data-theme="modern-dark"] .pp-btn-primary { background: #00bfa5; color: #fff; }
[data-theme="modern-light"] .pp-btn-primary:hover,
[data-theme="modern-dark"] .pp-btn-primary:hover { background: #009688; }

[data-theme="modern-light"] .pp-btn-pink,
[data-theme="modern-dark"] .pp-btn-pink { background: #e53935; color: #fff; }
[data-theme="modern-light"] .pp-btn-pink:hover,
[data-theme="modern-dark"] .pp-btn-pink:hover { background: #c62828; }

[data-theme="modern-light"] .pp-btn-red,
[data-theme="modern-dark"] .pp-btn-red { background: #e53935; color: #fff; }
[data-theme="modern-light"] .pp-btn-red:hover,
[data-theme="modern-dark"] .pp-btn-red:hover { background: #c62828; }

[data-theme="modern-light"] .pp-btn-blue,
[data-theme="modern-dark"] .pp-btn-blue { background: #1565c0; color: #fff; }
[data-theme="modern-light"] .pp-btn-blue:hover,
[data-theme="modern-dark"] .pp-btn-blue:hover { background: #0d47a1; }

/* ── Profile cards ── */
[data-theme="modern-light"] .pp-profile-card {
    border-width: 1px;
    transition: border-color .15s;
}
[data-theme="modern-light"] .pp-profile-card:hover {
    transform: none;
    border-color: #00bfa5;
}
[data-theme="modern-dark"] .pp-profile-card {
    border-width: 1px;
    transition: border-color .15s;
}
[data-theme="modern-dark"] .pp-profile-card:hover {
    transform: none;
    border-color: #00bfa5;
}

/* ── Content blocks & groups ── */
[data-theme="modern-light"] .pp-content-block,
[data-theme="modern-light"] .pp-group-item,
[data-theme="modern-light"] .pp-profile-header,
[data-theme="modern-dark"] .pp-content-block,
[data-theme="modern-dark"] .pp-group-item,
[data-theme="modern-dark"] .pp-profile-header {
    border-width: 1px;
}

/* ── Section title ── */
[data-theme="modern-light"] .pp-section-title,
[data-theme="modern-dark"] .pp-section-title {
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 11px;
    font-weight: 700;
    border-bottom-width: 2px;
}

/* ── Nav actief item ── */
[data-theme="modern-light"] .pp-right-nav-item.active,
[data-theme="modern-dark"] .pp-right-nav-item.active {
    background: #00bfa5;
    color: #ffffff;
    border-left: 3px solid #00897b;
}

/* ── Alerts ── */
[data-theme="modern-light"] .pp-alert-error,
[data-theme="modern-dark"] .pp-alert-error   { background: #1c0608; color: #ef9a9a; border: 1px solid #e53935; }
[data-theme="modern-light"] .pp-alert-success,
[data-theme="modern-dark"] .pp-alert-success  { background: #071a13; color: #80cbc4; border: 1px solid #00bfa5; }
[data-theme="modern-light"] .pp-alert-ok,
[data-theme="modern-dark"] .pp-alert-ok       { background: #071a13; color: #80cbc4; border: 1px solid #00bfa5; }
[data-theme="modern-light"] .pp-alert-info    { background: #eaf6ff; color: #1a2632; border: 1px solid #90caf9; }
[data-theme="modern-dark"] .pp-alert-info     { background: #0d1117; color: #8b949e; border: 1px solid #30363d; }

/* ── Sidebar hover ── */
[data-theme="modern-light"] .pp-profile-item,
[data-theme="modern-dark"] .pp-profile-item {
    transition: background .15s, color .15s, padding-left .15s;
}
[data-theme="modern-light"] .pp-profile-item:hover,
[data-theme="modern-dark"] .pp-profile-item:hover {
    background: rgba(0,191,165,.12);
    color: #00bfa5;
    padding-left: 12px;
}