/*
 *  Rapi Admin — Mismo estilo que la web
 */

:root {
    --bg:          #f5f5f5;
    --white:       #ffffff;
    --surface:     #fafafa;
    --border:      #e5e5e5;
    --border-dark: #d4d4d4;
    --text:        #555555;
    --text-strong: #1a1a1a;
    --text-muted:  #888888;
    --red:         #dc3545;
    --red-dark:    #c82333;
    --red-light:   #fef2f2;
    --red-border:  #fecaca;
    --r:           .75rem;
    --r-sm:        .5rem;
    --shadow:      0 1px 3px rgba(0,0,0,.08);
    --shadow-hover:0 .5rem 1.5rem rgba(0,0,0,.12);
    --t:           .2s ease;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    -webkit-font-smoothing: antialiased;
}

/* ═══════════════ SIDEBAR ═══════════════ */

#nav-sidebar {
    background: var(--white) !important;
    border-right: 1px solid var(--border) !important;
}
#nav-sidebar-inner { background: transparent !important; }

#nav-sidebar-inner > div:first-child {
    padding: 18px 20px 14px !important;
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: 2px !important;
    background: var(--red) !important;
}
#nav-sidebar-inner > div:first-child a {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: -0.01em !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
}
#nav-sidebar-inner > div:first-child a span:first-child {
    width: 30px !important;
    height: 30px !important;
    background: rgba(255,255,255,.2) !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    color: #fff !important;
}

#nav-sidebar h2[class*="font-semibold"] {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--text-muted) !important;
    padding: 14px 18px 6px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: color var(--t) !important;
}
#nav-sidebar h2[class*="font-semibold"]:hover { color: var(--red) !important; }
#nav-sidebar h2[class*="font-semibold"] span[class*="chevron"] {
    font-size: 15px !important;
    opacity: 0.3 !important;
    margin-left: auto !important;
    transition: transform .2s ease, opacity var(--t) !important;
}
#nav-sidebar h2[class*="font-semibold"]:hover span[class*="chevron"] { opacity: 0.6 !important; }
#nav-sidebar h2[class*="font-semibold"] span[class*="rotate-90"] { opacity: 0.6 !important; }

#nav-sidebar ol[class*="flex-col"] { padding: 0 10px !important; gap: 0 !important; }

#nav-sidebar a,
#nav-sidebar ol a {
    position: relative !important;
    color: var(--text) !important;
    font-size: 13.5px !important;
    font-weight: 450 !important;
    padding: 7px 10px 7px 14px !important;
    margin: 1px 6px !important;
    border-radius: var(--r-sm) !important;
    text-decoration: none !important;
    transition: all var(--t) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border: none !important;
    height: 36px !important;
    overflow: visible !important;
}
#nav-sidebar a:hover {
    background: #f5f5f5 !important;
    color: var(--red) !important;
}
#nav-sidebar a[class*="active"] {
    background: var(--red-light) !important;
    color: var(--red) !important;
    font-weight: 500 !important;
}
#nav-sidebar a[class*="active"]::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    background: var(--red);
    border-radius: 2px;
}
#nav-sidebar a span[class*="material"] { opacity: 0.45; font-size: 17px; transition: opacity var(--t); width: 18px; text-align: center; }
#nav-sidebar a:hover span[class*="material"] { opacity: 0.7; }
#nav-sidebar a[class*="active"] span[class*="material"] { opacity: 0.9; }

#nav-sidebar table { background: transparent !important; }
#nav-sidebar thead { display: none !important; }
#nav-sidebar tbody td { padding: 0 !important; border: none !important; background: transparent !important; }
#nav-sidebar tbody tr, #nav-sidebar tbody tr:hover { background: transparent !important; }
#nav-sidebar form[class*="search"],
#nav-sidebar [class*="resize"],
#nav-sidebar [class*="cursor-col"] { display: none !important; }

#nav-sidebar-inner > div:last-child {
    margin-top: auto !important;
    border-top: 1px solid var(--border) !important;
    padding: 12px 16px !important;
}

/* ═══════════════ DROPDOWNS ═══════════════ */

nav[class*="absolute"][x-show*="openUser"] {
    background: var(--white) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r) !important;
    padding: 6px !important;
    box-shadow: var(--shadow-hover) !important;
}
nav[class*="absolute"] > div:first-child {
    padding: 2px !important;
    border-bottom: 1px solid var(--border) !important;
}
nav[class*="absolute"] a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 14px !important;
    margin: 2px 0 !important;
    border-radius: var(--r-sm) !important;
    font-size: 13.5px !important;
    color: var(--text) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all var(--t) !important;
    border: none !important;
}
nav[class*="absolute"] a:hover { background: #f5f5f5 !important; color: var(--red) !important; }
nav[class*="absolute"] a span[class*="material"] { font-size: 17px !important; opacity: 0.5 !important; }
nav[class*="absolute"] a:hover span[class*="material"] { opacity: 0.8 !important; }

/* ═══════════════ MAIN ═══════════════ */

#main { background: var(--bg) !important; }
#content {
    padding: 28px 36px 60px !important;
    max-width: 1280px !important;
}

#content h1 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--text-strong) !important;
    margin-bottom: 24px !important;
    letter-spacing: -0.02em !important;
}

.breadcrumbs {
    padding: 14px 36px 0 !important;
    font-size: 13px !important;
    color: var(--text-muted) !important;
    background: transparent !important;
    border: none !important;
}
.breadcrumbs a { color: var(--red) !important; transition: color var(--t) !important; text-decoration: none !important; }
.breadcrumbs a:hover { color: var(--red-dark) !important; }

/* ═══════════════ CARDS ═══════════════ */

.module {
    background: var(--white) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r) !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow) !important;
}
.module h2, .module caption {
    background: var(--surface) !important;
    color: var(--text-strong) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 13px 22px !important;
    border-bottom: 1px solid var(--border) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.grid a[class*="bg-base-800"] {
    background: var(--white) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r) !important;
    padding: 20px 22px !important;
    box-shadow: var(--shadow) !important;
    transition: all var(--t) !important;
}
.grid a[class*="bg-base-800"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-hover) !important;
}

/* ═══════════════ TABLES ═══════════════ */

#changelist .results {
    border: 1px solid var(--border) !important;
    border-radius: var(--r) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow) !important;
}
#result_list {
    width: 100% !important;
    border-collapse: collapse !important;
    background: var(--white) !important;
}
#result_list thead th {
    background: var(--surface) !important;
    color: var(--text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 11px 16px !important;
    border-bottom: 2px solid var(--border) !important;
    text-align: left !important;
}
#result_list thead th:first-child { padding-left: 22px !important; }
#result_list thead th:last-child { padding-right: 22px !important; }
#result_list thead th a { color: var(--text-muted) !important; transition: color var(--t) !important; }
#result_list thead th a:hover { color: var(--red) !important; }
#result_list tbody td {
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: 13.5px !important;
    color: var(--text) !important;
    vertical-align: middle !important;
}
#result_list tbody td:first-child { padding-left: 22px !important; }
#result_list tbody td:last-child { padding-right: 22px !important; }
#result_list tbody tr { background: var(--white) !important; transition: background var(--t) !important; }
#result_list tbody tr:hover { background: #fafafa !important; }
#result_list tbody tr:last-child td { border-bottom: none !important; }

#result_list .action-checkbox-column { width: 42px !important; text-align: center !important; }
#result_list input[type="checkbox"] { accent-color: var(--red) !important; width: 15px !important; height: 15px !important; cursor: pointer !important; }

#changelist .paginator {
    background: var(--white) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r) !important;
    padding: 10px 22px !important;
    margin-top: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    color: var(--text-muted) !important;
    box-shadow: var(--shadow) !important;
}
#changelist .paginator a {
    background: #f5f5f5 !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    padding: 5px 13px !important;
    border-radius: var(--r-sm) !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: all var(--t) !important;
}
#changelist .paginator a:hover { border-color: var(--red) !important; color: var(--red) !important; }
#changelist .paginator .this-page {
    background: var(--red) !important;
    color: #fff !important;
    border: none !important;
    padding: 5px 13px !important;
    border-radius: var(--r-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

table { width: 100% !important; border-collapse: collapse !important; }
thead th {
    background: var(--surface) !important;
    color: var(--text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 11px 16px !important;
    border-bottom: 2px solid var(--border) !important;
}
thead th a { color: var(--text-muted) !important; }
tbody td {
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: 13.5px !important;
    color: var(--text) !important;
}
tbody tr { background: var(--white) !important; }
tbody tr:nth-child(even) { background: #fafafa !important; }
tbody tr:hover { background: #f5f5f5 !important; }

/* ═══════════════ LINKS ═══════════════ */

a { color: var(--red) !important; text-decoration: none !important; transition: color var(--t) !important; }
a:hover { color: var(--red-dark) !important; }
#nav-sidebar a { color: var(--text) !important; }
#nav-sidebar a:hover { color: var(--red) !important; }
#nav-sidebar a[class*="active"] { color: var(--red) !important; }

/* ═══════════════ FORMS ═══════════════ */

.form-row { padding: 0 0 16px 0 !important; border: none !important; }
.aligned label, .form-row label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-strong) !important;
    margin-bottom: 5px !important;
}
input[type="text"], input[type="password"], input[type="email"],
input[type="url"], input[type="number"], textarea, select,
.vTextField, .vURLField, .vIntegerField, .vDateField, .vTimeField,
.vEmailField, .vLargeTextField {
    background: var(--white) !important;
    color: var(--text-strong) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    padding: 9px 13px !important;
    font-size: 13.5px !important;
    font-family: inherit !important;
    outline: none !important;
    transition: border-color var(--t), box-shadow var(--t) !important;
    line-height: 1.5 !important;
}
input:hover, textarea:hover, select:hover { border-color: var(--border-dark) !important; }
input:focus, textarea:focus, select:focus {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 3px rgba(220,53,69,.12) !important;
}
input[readonly] { background: var(--surface) !important; color: var(--text-muted) !important; }
textarea { min-height: 100px !important; resize: vertical !important; }
select[multiple] { min-height: 130px !important; }

.select2-container--admin-autocomplete .select2-selection {
    background: var(--white) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    min-height: 38px !important;
}
.selector-available h2, .selector-chosen h2 {
    background: var(--surface) !important;
    color: var(--text-strong) !important;
    border-color: var(--border) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

fieldset.module {
    border: 1px solid var(--border) !important;
    border-radius: var(--r) !important;
    overflow: hidden !important;
    margin-bottom: 18px !important;
    box-shadow: var(--shadow) !important;
}
fieldset.module h2 {
    background: var(--surface) !important;
    color: var(--text-strong) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 14px 22px !important;
    border-bottom: 1px solid var(--border) !important;
}
fieldset .form-row {
    padding: 15px 22px !important;
    border-bottom: 1px solid var(--border) !important;
    background: var(--white) !important;
}
fieldset .form-row:last-child { border-bottom: none !important; }

.inline-group {
    border: 1px solid var(--border) !important;
    border-radius: var(--r) !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
    box-shadow: var(--shadow) !important;
}
.inline-group h2 {
    background: var(--surface) !important;
    color: var(--text-strong) !important;
    padding: 11px 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid var(--border) !important;
}
.inline-related { border-bottom: 1px solid var(--border) !important; background: var(--white) !important; }
.inline-related:last-child { border-bottom: none !important; }
.inline-related h3 {
    background: var(--surface) !important;
    color: var(--text-muted) !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-bottom: 1px solid var(--border) !important;
}

/* ═══════════════ BUTTONS ═══════════════ */

.button, input[type="submit"], input[type="button"],
.submit-row input, .object-tools a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-radius: var(--r-sm) !important;
    padding: 8px 17px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    border: 1px solid var(--border) !important;
    background: var(--white) !important;
    color: var(--text-strong) !important;
    text-decoration: none !important;
    font-family: inherit !important;
    transition: all var(--t) !important;
}
.button:hover, .object-tools a:not(.addlink):hover {
    background: #f5f5f5 !important;
    border-color: var(--border-dark) !important;
}
.button.default, input[type="submit"].default,
.object-tools .addlink, .object-tools a.addlink {
    background: var(--red) !important;
    color: #fff !important;
    border-color: var(--red) !important;
    font-weight: 600 !important;
}
.button.default:hover, .object-tools .addlink:hover {
    background: var(--red-dark) !important;
    border-color: var(--red-dark) !important;
}
.deletelink, a.deletelink {
    background: var(--white) !important;
    color: var(--red) !important;
    border-color: var(--red-border) !important;
}
.deletelink:hover, a.deletelink:hover {
    background: var(--red-light) !important;
    border-color: var(--red) !important;
}
.submit-row {
    background: transparent !important;
    border: none !important;
    padding: 18px 0 0 !important;
    display: flex !important;
    gap: 10px !important;
}
.object-tools { display: flex !important; gap: 6px !important; margin-bottom: 16px !important; }

/* ═══════════════ MESSAGES ═══════════════ */

.messagelist li {
    border-radius: var(--r-sm) !important;
    padding: 11px 16px !important;
    margin-bottom: 8px !important;
    font-size: 13.5px !important;
    border: 1px solid !important;
}
.messagelist li.success { background: #f0fdf4 !important; border-color: #bbf7d0 !important; color: #15803d !important; }
.messagelist li.warning { background: #fffbeb !important; border-color: #fde68a !important; color: #a16207 !important; }
.messagelist li.error   { background: var(--red-light) !important; border-color: var(--red-border) !important; color: var(--red-dark) !important; }

/* ═══════════════ FILTER ═══════════════ */

#changelist-filter {
    background: var(--white) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r) !important;
    padding: 18px !important;
    margin-left: 20px !important;
    min-width: 190px !important;
    box-shadow: var(--shadow) !important;
}
#changelist-filter h2 {
    font-size: 11px !important; text-transform: uppercase !important;
    letter-spacing: 0.07em !important; color: var(--text-muted) !important;
    padding-bottom: 12px !important; border-bottom: 1px solid var(--border) !important;
    margin-bottom: 14px !important; background: transparent !important;
}
#changelist-filter h3 { font-size: 12.5px !important; font-weight: 600 !important; margin: 16px 0 8px !important; color: var(--text-strong) !important; }
#changelist-filter li { padding: 3px 0 !important; font-size: 13px !important; }
#changelist-filter a { color: var(--text) !important; transition: color var(--t) !important; }
#changelist-filter a:hover { color: var(--red) !important; }
#changelist-filter .selected a { color: var(--red) !important; font-weight: 600 !important; }

/* ═══════════════ SEARCH ═══════════════ */

#changelist-search {
    background: var(--white) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r) !important;
    padding: 14px 18px !important;
    margin-bottom: 16px !important;
    display: flex !important; align-items: center !important; gap: 12px !important;
    box-shadow: var(--shadow) !important;
}
#searchbar {
    background: var(--white) !important;
    color: var(--text-strong) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    padding: 9px 13px !important;
    font-size: 13.5px !important;
    min-width: 280px !important;
    outline: none !important;
    transition: border-color var(--t), box-shadow var(--t) !important;
}
#searchbar:hover { border-color: var(--border-dark) !important; }
#searchbar:focus {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 3px rgba(220,53,69,.12) !important;
}
#searchbar::placeholder { color: var(--text-muted) !important; }

#toolbar {
    background: var(--white) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r) !important;
    padding: 14px 20px !important;
    margin-bottom: 16px !important;
    display: flex !important; align-items: center !important; gap: 10px !important;
    box-shadow: var(--shadow) !important;
}
#toolbar form { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; }
#toolbar label { font-size: 13px !important; color: var(--text-strong) !important; font-weight: 500 !important; margin: 0 !important; }
#toolbar select {
    background: var(--white) !important;
    color: var(--text-strong) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-family: inherit !important;
    outline: none !important;
}
#toolbar button {
    background: var(--red) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--r-sm) !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: background var(--t) !important;
}
#toolbar button:hover { background: var(--red-dark) !important; }

/* ═══════════════ HELP ═══════════════ */

.help { font-size: 12px !important; color: var(--text-muted) !important; margin-top: 4px !important; }
.actions { padding: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; }

/* ═══════════════ LOGIN ═══════════════ */

.login #container {
    background: var(--bg) !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.login #header, .login .breadcrumbs { display: none !important; }
.login #content { background: transparent !important; padding: 0 !important; }
.login #content-main {
    background: var(--white) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r) !important;
    padding: 48px !important;
    width: 420px !important;
    max-width: 90vw !important;
    box-shadow: var(--shadow-hover) !important;
}
.login #content-main h1 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--text-strong) !important;
    margin-bottom: 32px !important;
    text-align: center !important;
    letter-spacing: -0.02em !important;
}
.login .form-row { padding: 0 0 18px 0 !important; border: none !important; }
.login .form-row label {
    font-size: 13px !important;
    color: var(--text-strong) !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
}
.login .form-row input { width: 100% !important; padding: 10px 14px !important; }
.login .submit-row { padding: 6px 0 0 !important; border: none !important; background: transparent !important; }
.login .submit-row input {
    width: 100% !important;
    padding: 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}
.login .errornote {
    border-radius: var(--r-sm) !important; padding: 11px 16px !important; font-size: 13px !important;
    background: var(--red-light) !important; border: 1px solid var(--red-border) !important;
    color: var(--red) !important; margin-bottom: 20px !important;
}

/* ═══════════════ UNFOLD OVERRIDES ═══════════════ */

.bg-base-50:not(#nav-sidebar *) { background: var(--bg) !important; }
.text-font-default-light { color: var(--text) !important; }
.text-font-important-light { color: var(--text-strong) !important; }
.border-base-200 { border-color: var(--border) !important; }

/* ═══════════════ RESPONSIVE ═══════════════ */

@media (max-width: 768px) {
    #content { padding: 16px !important; }
    #changelist-filter { margin: 0 0 14px 0 !important; width: 100% !important; }
    #searchbar { min-width: auto !important; width: 100% !important; }
    .breadcrumbs { padding: 12px 16px 0 !important; }
}