/* 
================================================================================
General Theme & Root Variables - Inspired by SHADCN
================================================================================
*/

:root {
    /* Base Colors */
    --background: #ffffff; /* Page background */
    --foreground: #020817; /* Default text color */

    /* Cards & Containers */
    --card: #ffffff;
    --card-foreground: #020817;
    --popover: #ffffff;
    --popover-foreground: #020817;

    /* Primary/Accent Colors */
    --primary: #1a1a1a; /* Dark primary for buttons */
    --primary-foreground: #fafafa; /* Text on primary buttons */

    /* Secondary/Muted Colors */
    --secondary: #f1f5f9;
    --secondary-foreground: #0f172a;
    --muted: #f1f5f9;
    --muted-foreground: #3c4553;

    /* Borders & Rings */
    --border: #e2e8f0;
    --input: #e2e8f0;
    --ring: #94a3b8; /* Focus ring color */

    /* Other Variables */
    --radius: 0.5rem; /* Border radius */

    /* Overriding Baserow Page Styles */
    --page-background-color: #f8fafc; /* Slightly off-white background */
    --body-text-color: var(--foreground);
    --body-font-family: "Inter", "sans-serif";
    --heading-h1-color: #1e293b;
    --heading-h2-color: #1e293b;
    --heading-h3-color: #334155;
    --heading-h4-color: #334155;
}

/* 
================================================================================
Typography & Headings
================================================================================
*/

.ab-heading {
    font-family: "Inter", sans-serif;
    font-weight: 600;
}

.ab-text {
    color: var(--muted-foreground);
}

/* 
================================================================================
Buttons - .ab-button
================================================================================
*/

/* General Button Styling - Applied to ALL buttons */
.ab-button {
    border-radius: var(--radius) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* A modern hover effect that darkens the button's original color */
.ab-button:hover {
    filter: brightness(95%);
}

.ab-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

/* Secondary/Ghost Buttons (Gray buttons like Főoldal, Vissza) */
.ab-button[style*="--button-background-color:#777777"],
.ab-button[style*="--button-background-color:#cccccc"] {
    background-color: var(--secondary) !important;
    color: var(--secondary-foreground) !important;
    border: 1px solid var(--border) !important;
}

.ab-button[style*="--button-background-color:#777777"]:hover,
.ab-button[style*="--button-background-color:#cccccc"]:hover {
    background-color: #e2e8f0 !important;
    filter: none; /* Reset the brightness filter for these specific buttons */
}

/* Decision Buttons - We can enhance their default colors for more impact */
.button-element[style*="--button-background-color:#0eaa42ff"] .ab-button { /* Jóváhagyás */
    background-color: #22c55e !important;
}

.button-element[style*="--button-background-color:#FF5A4A"] .ab-button { /* Elutasítás */
    background-color: #ef4444 !important;
}

.button-element[style*="--button-background-color:#FCC74A"] .ab-button { /* Üzenet */
    background-color: #f59e0b !important;
}

/* 
================================================================================
Inputs, Textareas & Dropdowns - .ab-input, .ab-dropdown
================================================================================
*/

/* Input and Textarea Styling */
.ab-input, 
textarea.ab-input {
    border-radius: var(--radius) !important;
    border: 1px solid var(--input) !important;
    background-color: var(--background) !important;
    transition: all 0.2s ease-in-out;
    padding: 8px 12px !important;
    color: var(--foreground);
}

.ab-input:focus, 
textarea.ab-input:focus {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px var(--ring) !important;
}

/* Dropdown (Select) Styling */
.ab-dropdown__selected {
    border-radius: var(--radius) !important;
    border: 1px solid var(--input) !important;
    background-color: var(--background) !important;
    transition: all 0.2s ease-in-out;
    padding: 8px 12px;
}

.ab-dropdown:focus-within .ab-dropdown__selected {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px var(--ring) !important;
}

.ab-dropdown__items {
    border-radius: var(--radius) !important;
    border: 1px solid var(--border) !important;
    background-color: var(--popover) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    margin-top: 4px !important;
}

.ab-dropdownitem__item-link {
    border-radius: 4px;
}

.ab-dropdownitem__item--no-options:hover {
    background-color: var(--muted) !important;
}

/* Form Labels */
.ab-form-group__label {
    font-weight: 500;
    color: var(--foreground);
}


/* 
================================================================================
Tables - .baserow-table (CORRECTED SECTION)
================================================================================
*/

.baserow-table-wrapper.ab-table {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden; /* Ensures border radius is applied to corners */
}

.baserow-table {
    border-collapse: collapse;
    width: 100%;
}

/* Table Header */
.baserow-table thead {
    background-color: var(--muted);
}

.baserow-table th.ab-table__header-cell {
    padding: 12px 24px;
    text-align: left;
    font-weight: 500;
    color: var(--muted-foreground);
    border-bottom: 1px solid var(--border);
}

/* Table Body */
.baserow-table tbody tr.baserow-table__row {
    transition: background-color 0.15s ease-in-out;
}

.baserow-table tbody tr.baserow-table__row:not(:last-child) {
    border-bottom: 1px solid var(--border);
}

.baserow-table tbody tr.baserow-table__row:hover {
    background-color: var(--muted);
}

/* UPDATED TABLE CELL STYLES */
.baserow-table td.ab-table__cell {
    vertical-align: middle;
}

/* 
================================================================================
Layout & Containers - .element__wrapper
================================================================================
*/
/* This is a bit tricky, but we can style the form container to look like a card */
.element > div[style*="--button-alignment"] {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* Style the gray header bar */
body > #__nuxt > #__layout > div > .page > .element__wrapper[style*="--element-background-color:#dadada"] {
    background-color: var(--card) !important;
    border-bottom: 1px solid var(--border);
}