/* ================================================================================
   KLASSO ADMIN - v136 FINAL
   DATE: 2025-01-14 13:45 (Amsterdam tijd)
   
   NIEUWE FIXES in v136:
   1. Toolbar inputs: 500px → 450px
   2. Actions input: 500px → 450px
   3. Object-tools buttons: 180px → 250px (ALLE admin pagina's)
   4. Animaties: Consistent op alle buttons
   5. Gap toegevoegd voor icons in buttons
   
   AFMETINGEN:
   - Object-tools buttons: 250px × 42px (overal)
   - Toolbar inputs: 450px
   - Toolbar buttons: 120px
   
   Previous fixes (v130-v135):
   - Hover animaties: translateY(-2px)
   - Active animaties: translateY(0)
   - Alle buttons: Hoofdletters
================================================================================ */

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

:root {
    --primary-coral: #FF6B6B;
    --primary-peach: #FF8E53;
    --primary-light: #FFE5D9;
    --primary-hover: #FF5252;
    --secondary-slate: #475569;
    --secondary-slate-hover: #334155;
    --success: #10B981;
    --success-bg: #ECFDF5;
    --warning: #F59E0B;
    --warning-bg: #FFFBEB;
    --error: #EF4444;
    --error-bg: #FEF2F2;
    --bg-light: #F8FAFC;
    --border-light: #E2E8F0;
    --text-dark: #1E293B;
    --text-gray: #64748B;
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

* {
    font-family: 'Inter', -apple-system, sans-serif !important;
    box-sizing: border-box !important;
}

html,
body {
    background: var(--bg-light) !important;
    color: var(--text-dark) !important;
    margin: 0 !important;
    padding: 0 !important;
}

#container,
#main,
.colM,
.colMS,
#content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

#content-main {
    padding: 14px !important;
    margin: 0 !important;
}

/* ============================================================
   VERSION TEKST VERBERGEN
============================================================ */

.breadcrumbs::before,
.breadcrumbs::after {
    content: none !important;
    display: none !important;
}

.version-info,
.debug-info,
[class*="version"],
[class*="VERSION"],
.module caption {
    display: none !important;
}

/* ============================================================
   HEADER
============================================================ */

#header {
    background: linear-gradient(135deg, var(--primary-coral) 0%, var(--primary-peach) 100%) !important;
    padding: 14px 24px !important;
    box-shadow: var(--shadow-lg) !important;
}

#branding h1 {
    color: white !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

#user-tools {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 13px !important;
}

#user-tools a {
    color: white !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

/* ============================================================
   FIX 1: BREADCRUMBS - GELIJKE ACHTERGROND ALS SCHERM
============================================================ */

.breadcrumbs {
    background: #F5F7FA !important;
    padding: 16px 24px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--border-light) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #000000 !important;
}

.breadcrumbs a {
    color: var(--primary-coral) !important;
    text-decoration: none !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

#content h1 {
    display: none !important;
}

/* ============================================================
   FILTER SIDEBAR - VERBERG
============================================================ */

#changelist-filter {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============================================================
   CHANGELIST
============================================================ */

#changelist {
    width: 100% !important;
}

#changelist-form {
    width: 100% !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--border-light) !important;
}

/* ============================================================
   FIX 2: OBJECT TOOLS - ALLE BUTTONS 180px BREED
============================================================ */

.object-tools {
    float: right !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 10px !important;
    clear: both !important;
}

.object-tools li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ALLE buttons in object-tools - 250px MET ANIMATIES */
.object-tools a,
.object-tools button,
.addlink,
.import_link,
.export_link,
.btn-import,
.btn-export,
.column-toggle-button {
    background: linear-gradient(135deg, var(--primary-coral) 0%, var(--primary-peach) 100%) !important;
    color: white !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 7px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 250px !important;
    min-width: 250px !important;
    height: 42px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    gap: 8px !important;
}

.object-tools a:hover,
.object-tools button:hover,
.addlink:hover,
.import_link:hover,
.export_link:hover,
.btn-import:hover,
.btn-export:hover,
.column-toggle-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;
}

.object-tools a:active,
.object-tools button:active,
.addlink:active,
.btn-import:active,
.btn-export:active,
.column-toggle-button:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================================
   FIX 3 & 4: TOOLBAR - SIMPEL & DUIDELIJK
============================================================ */

#toolbar {
    background: white !important;
    padding: 12px !important;
    border-bottom: 2px solid var(--border-light) !important;
    display: flex !important;
    gap: 12px !important;
    align-items: stretch !important;
}

#toolbar form {
    display: flex !important;
    gap: 12px !important;
    flex: 1 !important;
    align-items: stretch !important;
}

/* ALLE INPUTS - VAST 500px (GEEN FLEX MEER) */
#searchbar,
.filter-dropdown,
#filter-dropdown,
#toolbar input[type="text"],
#toolbar input[type="search"],
#toolbar select {
    padding: 0 15px !important;
    border: 2px solid var(--border-light) !important;
    border-radius: 7px !important;
    font-size: 14px !important;
    background: white !important;
    color: var(--text-dark) !important;
    height: 46px !important;
    line-height: 42px !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
    width: 450px !important;
    min-width: 450px !important;
    max-width: 450px !important;
}

/* Filter dropdown arrow */
.filter-dropdown,
#filter-dropdown {
    padding-right: 42px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23FF6B6B' d='M7 10L2 5h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
}

#searchbar:focus,
.filter-dropdown:focus,
#filter-dropdown:focus {
    outline: none !important;
    border-color: var(--primary-coral) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1) !important;
}

/* ALLE BUTTONS - 120px VAST */
#toolbar button[type="submit"],
#toolbar input[type="submit"],
.filter-button,
button.filter-button {
    background: linear-gradient(135deg, var(--secondary-slate) 0%, var(--secondary-slate-hover) 100%) !important;
    color: white !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 7px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    height: 46px !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    white-space: nowrap !important;
    transition: all 0.2s !important;
    text-align: center !important;
    box-sizing: border-box !important;
    text-transform: uppercase !important;
}

#toolbar button:hover,
.filter-button:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* ============================================================
   ACTIONS BAR - SIMPEL & DUIDELIJK
============================================================ */

.actions {
    background: white !important;
    padding: 12px !important;
    border-bottom: 2px solid var(--border-light) !important;
    display: flex !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.actions label {
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
}

/* Actie dropdown - VAST 500px (GEEN FLEX MEER) */
.actions select,
select[name="action"] {
    background: #FFFFFF !important;
    border: 2px solid var(--border-light) !important;
    border-radius: 7px !important;
    padding: 0 42px 0 15px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    cursor: pointer !important;
    width: 450px !important;
    min-width: 450px !important;
    max-width: 450px !important;
    height: 46px !important;
    line-height: 42px !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23FF6B6B' d='M7 10L2 5h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
    box-sizing: border-box !important;
}

.actions select:hover,
.actions select:focus {
    border-color: var(--primary-coral) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1) !important;
    outline: none !important;
}

.actions select option {
    padding: 10px !important;
    font-size: 14px !important;
    color: #000000 !important;
    background: #FFFFFF !important;
    font-weight: 600 !important;
}

/* Uitvoeren button - 120px VAST - KRACHTIGE SELECTOR */
.actions button,
.actions input[type="submit"],
.actions button[type="button"],
.actions button[name="index"],
button[name="index"] {
    background: linear-gradient(135deg, var(--secondary-slate) 0%, var(--secondary-slate-hover) 100%) !important;
    color: white !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 7px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    height: 46px !important;
    line-height: 46px !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    white-space: nowrap !important;
    transition: all 0.2s !important;
    text-align: center !important;
    box-sizing: border-box !important;
    text-transform: uppercase !important;
}

.actions button:hover,
.actions input[type="submit"]:hover,
button[name="index"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* ============================================================
   TABLE
============================================================ */

.results {
    overflow-x: auto !important;
    width: 100% !important;
    padding-right: 8px !important;
}

#result_list {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
    min-width: max-content !important;
}

#result_list thead th {
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%) !important;
    color: var(--text-dark) !important;
    padding: 10px 10px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    border-bottom: 2px solid var(--border-light) !important;
    text-align: left !important;
    white-space: nowrap !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

#result_list thead th:last-child {
    padding-right: 20px !important;
    min-width: 140px !important;
}

#result_list tbody td:last-child {
    padding-right: 20px !important;
}

#result_list thead th a {
    color: var(--text-dark) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

#result_list thead th:hover {
    background: #E2E8F0 !important;
}

#result_list thead th.sorted {
    background: var(--primary-light) !important;
}

#result_list thead th.sorted a {
    color: var(--primary-coral) !important;
}

#result_list tbody tr {
    background: white !important;
    border-bottom: 1px solid #F1F5F9 !important;
    transition: background 0.15s !important;
}

#result_list tbody tr:hover {
    background: #F8FAFC !important;
}

#result_list tbody td {
    padding: 9px 10px !important;
    font-size: 11px !important;
    color: var(--text-dark) !important;
    white-space: nowrap !important;
}

#result_list tbody td a {
    color: var(--primary-coral) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    cursor: pointer !important;
    accent-color: var(--primary-coral) !important;
}

/* ============================================================
   BUTTONS
============================================================ */

.button,
input[type="submit"]:not(#toolbar input):not(.actions input),
button[type="submit"]:not(#toolbar button):not(.actions button),
.deletelink {
    background: linear-gradient(135deg, var(--primary-coral) 0%, var(--primary-peach) 100%) !important;
    color: white !important;
    border: none !important;
    padding: 0 24px !important;
    border-radius: 7px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 140px !important;
    height: 42px !important;
    box-shadow: var(--shadow-sm) !important;
    text-transform: uppercase !important;
}

.button:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

.deletelink {
    background: linear-gradient(135deg, var(--error) 0%, #DC2626 100%) !important;
}

/* ============================================================
   BULK BUTTONS
============================================================ */

.btn-bulk {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 24px !important;
    border-radius: 7px !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    min-width: 160px !important;
    height: 42px !important;
    text-transform: uppercase !important;
}

.btn-blue {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important;
}

.btn-orange {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
}

.btn-red {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
}

.btn-green {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
}

/* ============================================================
   MESSAGES
============================================================ */

.messagelist {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 14px 0 !important;
}

.messagelist li {
    padding: 12px 18px !important;
    border-radius: 7px !important;
    margin-bottom: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: var(--shadow-md) !important;
    animation: slideIn 0.3s !important;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.messagelist .success {
    background: var(--success-bg) !important;
    border-left: 4px solid var(--success) !important;
    color: #065F46 !important;
}

.messagelist .success::before {
    content: "✅" !important;
    font-size: 22px !important;
}

.messagelist .error {
    background: var(--error-bg) !important;
    border-left: 4px solid var(--error) !important;
    color: #991B1B !important;
}

.messagelist .error::before {
    content: "❌" !important;
    font-size: 22px !important;
}

.messagelist .warning {
    background: var(--warning-bg) !important;
    border-left: 4px solid var(--warning) !important;
    color: #92400E !important;
}

.messagelist .warning::before {
    content: "⚠️" !important;
    font-size: 22px !important;
}

/* ============================================================
   PAGINATION
============================================================ */

.paginator {
    padding: 11px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
}

.paginator a,
.paginator .this-page {
    padding: 6px 12px !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.paginator a {
    background: white !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-gray) !important;
}

.paginator a:hover {
    background: var(--primary-coral) !important;
    color: white !important;
}

.paginator .this-page {
    background: var(--secondary-slate) !important;
    color: white !important;
}

/* ============================================================
   FORMS
============================================================ */

.form-row {
    padding: 11px 14px !important;
    border-bottom: 1px solid var(--border-light) !important;
}

.form-row label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    margin-bottom: 6px !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select:not([name="action"]):not(.filter-dropdown),
textarea {
    border: 2px solid var(--border-light) !important;
    border-radius: 7px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
}

input:focus,
textarea:focus,
select:not([name="action"]):not(.filter-dropdown):focus {
    outline: none !important;
    border-color: var(--primary-coral) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1) !important;
}

.submit-row {
    background: var(--bg-light) !important;
    padding: 11px 14px !important;
    border-top: 1px solid var(--border-light) !important;
    display: flex !important;
    gap: 10px !important;
}

.inline-group {
    background: white !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 8px !important;
    padding: 13px !important;
    margin: 0 0 13px 0 !important;
}

.inline-group h2 {
    background: var(--bg-light) !important;
    padding: 10px 13px !important;
    margin: -13px -13px 13px -13px !important;
    border-radius: 8px 8px 0 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* ============================================================
   DASHBOARD
============================================================ */

#content-main:has(.dashboard) {
    background: transparent !important;
}

/* ============================================================
   SCROLLBAR
============================================================ */

::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: var(--bg-light) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-coral) !important;
    border-radius: 4px !important;
}

/* ============================================================
   FORCEER HORIZONTALE HEADERS
============================================================ */

#changelist table thead th {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    text-orientation: mixed !important;
}