/* =============================================================
   Cavilam — Admin UI
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');

:root {
    --red:    #e40521;
    --red-h:  #b8041a;
    --dark:   #1a1d21;
    --dark-2: #2B2F35;
    --dark-3: #3a3f47;
    --cream:  #F6F5EA;
    --cream-2:#e6d5b6;
    --white:  #ffffff;
    --muted:  rgba(246,245,234,0.55);
    --border: rgba(43,47,53,0.10);
}

/* ── Global font ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body.wp-admin,
#wpcontent, #wpbody, #adminmenu, #wpadminbar,
.wrap, input, select, textarea, button, .button {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR LOGO (injected via JS)
   ═══════════════════════════════════════════════════════════ */
#cav-sidebar-logo {
    display: flex;
    align-items: center;
    padding: 20px 18px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 8px;
}

#cav-sidebar-logo a {
    display: block;
    line-height: 1;
}

#cav-sidebar-logo img {
    height: 32px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* ═══════════════════════════════════════════════════════════
   ADMIN BAR
   ═══════════════════════════════════════════════════════════ */
#wpadminbar {
    background: var(--dark) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

#wpadminbar .ab-item,
#wpadminbar a.ab-item,
#wpadminbar > #wp-toolbar span.ab-label {
    color: var(--muted) !important;
    font-size: 13px;
}

#wpadminbar li:hover > .ab-item,
#wpadminbar li:hover > a.ab-item,
#wpadminbar .ab-top-menu > li.hover > .ab-item {
    background: rgba(255,255,255,0.06) !important;
    color: var(--white) !important;
}

#wpadminbar .menupop .ab-sub-wrapper {
    background: var(--dark-2) !important;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

#wpadminbar .ab-submenu .ab-item { color: var(--muted) !important; }

#wpadminbar .ab-submenu .ab-item:hover {
    background: var(--red) !important;
    color: var(--white) !important;
}

/* Brand quote marks at the far left (node added in functions.php, replaces the WP logo) */
#wpadminbar #wp-admin-bar-cavilam-brand > .ab-item { padding: 0 12px; display: flex; align-items: center; height: 32px; }
#wpadminbar #wp-admin-bar-cavilam-brand > .ab-item img { display: block; width: 22px; height: 22px; }
#wpadminbar #wp-admin-bar-cavilam-brand:hover > .ab-item { background: var(--red) !important; }

/* Site name: no second glyph in the admin (the brand node already carries the quote marks) */
#wpadminbar #wp-admin-bar-site-name > .ab-item { color: var(--white) !important; font-weight: 500; }
#wpadminbar #wp-admin-bar-site-name img.site-icon { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════ */
#adminmenuback,
#adminmenuwrap,
#adminmenu { background: var(--dark) !important; }

#adminmenuwrap,
#adminmenuback { width: 220px !important; }

#adminmenu { padding-top: 0 !important; width: 220px !important; }

/* Offset content area to match wider sidebar */
#wpcontent, #wpfooter { margin-left: 220px !important; }

/* Collapsed state */
.folded #adminmenuwrap,
.folded #adminmenuback { width: 36px !important; }
.folded #wpcontent,
.folded #wpfooter { margin-left: 36px !important; }

/* Menu items */
#adminmenu .wp-menu-name { font-size: 13px; font-weight: 400; }

#adminmenu a,
#adminmenu .wp-submenu a {
    color: var(--muted) !important;
    transition: color 0.15s, background 0.15s;
}

#adminmenu li.menu-top { margin-bottom: 1px; }

#adminmenu li.menu-top > a {
    padding: 8px 12px 8px 16px !important;
    border-left: 3px solid transparent;
    transition: all 0.15s;
}

#adminmenu li.menu-top:hover > a {
    background: rgba(255,255,255,0.05) !important;
    color: var(--white) !important;
    border-left-color: rgba(228,5,33,0.4);
}

/* Active item */
#adminmenu li.current a.menu-top,
#adminmenu li.wp-has-current-submenu > a.wp-has-current-submenu {
    background: rgba(228,5,33,0.12) !important;
    color: var(--white) !important;
    border-left-color: var(--red) !important;
    font-weight: 500;
}

/* Flyout arrow on active */
#adminmenu li.current a.menu-top:after,
#adminmenu li.wp-has-current-submenu > a.wp-has-current-submenu:after {
    border-right-color: var(--cream) !important;
}

/* ── Inline sub-menus (open/active item expanded in sidebar) ── */
body:not(.folded) #adminmenu li.wp-menu-open > .wp-submenu,
body:not(.folded) #adminmenu li.wp-has-current-submenu > .wp-submenu {
    display: block !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    background: rgba(0,0,0,0.25) !important;
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
    padding: 4px 0 8px !important;
}

/* ── Flyout sub-menus (hover on non-open items only) ───────── */
#adminmenu li.wp-not-current-submenu:not(.wp-menu-open) > .wp-submenu,
#adminmenu li.opensub:not(.wp-menu-open) > .wp-submenu,
#adminmenu li:not(.wp-menu-open):hover > .wp-submenu {
    left: 220px !important;
    min-width: 210px !important;
    width: auto !important;
    background: var(--dark-2) !important;
    border: none !important;
    border-left: 3px solid var(--red) !important;
    box-shadow: 8px 6px 24px rgba(0,0,0,0.4) !important;
    padding: 6px 0 12px !important;
}

/* ── Folded sidebar: 36px icon rail, every submenu is a flyout ── */
.folded #adminmenu { width: 36px !important; }
.folded #cav-sidebar-logo { display: none; }
.folded #adminmenu li.menu-top > a { padding: 0 !important; border-left-width: 0 !important; }
body.folded #adminmenu li.menu-top > .wp-submenu {
    position: absolute !important;
    left: 36px !important;
    top: -1000em !important;
    width: auto !important;
    min-width: 210px !important;
    margin: 0 !important;
    background: var(--dark-2) !important;
    border: none !important;
    border-left: 3px solid var(--red) !important;
    box-shadow: 8px 6px 24px rgba(0,0,0,0.4) !important;
    padding: 6px 0 12px !important;
}
body.folded #adminmenu li.menu-top.opensub > .wp-submenu,
body.folded #adminmenu li.menu-top:hover > .wp-submenu,
body.folded #adminmenu li.menu-top > a.menu-top:focus + .wp-submenu { top: -1px !important; }
.folded #adminmenu .wp-submenu-head {
    display: block !important;
    color: var(--white) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 8px 16px 6px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 4px;
}
.folded #adminmenu .wp-submenu a {
    font-size: 13px !important;
    padding: 8px 20px !important;
    color: rgba(246,245,234,0.65) !important;
    display: block;
    line-height: 1.4;
    transition: background 0.12s, color 0.12s, padding-left 0.1s;
}
.folded #adminmenu .wp-submenu a:hover {
    background: rgba(228,5,33,0.12) !important;
    color: var(--white) !important;
    padding-left: 24px !important;
}
.folded #adminmenu .wp-submenu li.current > a { color: var(--red) !important; font-weight: 600 !important; }

/* Flyout header (parent item title) — flyout only */
#adminmenu .wp-not-current-submenu .wp-submenu-head,
#adminmenu li:not(.wp-menu-open) .wp-submenu-head {
    color: var(--white) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 8px 16px 6px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 4px;
}

/* Hide the redundant title in inline/open submenu */
body:not(.folded) #adminmenu li.wp-menu-open .wp-submenu-head,
body:not(.folded) #adminmenu li.wp-has-current-submenu .wp-submenu-head {
    display: none !important;
}

/* All submenu links — flyout context */
#adminmenu .wp-not-current-submenu .wp-submenu a,
#adminmenu li:not(.wp-menu-open) .wp-submenu a {
    font-size: 13px !important;
    padding: 8px 20px !important;
    color: rgba(246,245,234,0.65) !important;
    display: block;
    transition: background 0.12s, color 0.12s, padding-left 0.1s;
    line-height: 1.4;
}

/* All submenu links — inline/open context */
body:not(.folded) #adminmenu li.wp-menu-open .wp-submenu a,
body:not(.folded) #adminmenu li.wp-has-current-submenu .wp-submenu a {
    font-size: 13px !important;
    padding: 7px 16px 7px 48px !important;
    color: rgba(246,245,234,0.6) !important;
    display: block;
    transition: background 0.12s, color 0.12s;
    line-height: 1.4;
}

/* Hover — flyout context */
#adminmenu .wp-not-current-submenu .wp-submenu a:hover,
#adminmenu li:not(.wp-menu-open) .wp-submenu a:hover {
    background: rgba(228,5,33,0.12) !important;
    color: var(--white) !important;
    padding-left: 24px !important;
}

/* Hover — inline/open context */
body:not(.folded) #adminmenu li.wp-menu-open .wp-submenu a:hover,
body:not(.folded) #adminmenu li.wp-has-current-submenu .wp-submenu a:hover {
    background: rgba(255,255,255,0.05) !important;
    color: var(--white) !important;
}

/* Active sub-item — inline context */
body:not(.folded) #adminmenu li.wp-menu-open .wp-submenu li.current > a,
body:not(.folded) #adminmenu li.wp-has-current-submenu .wp-submenu li.current > a {
    color: var(--red) !important;
    font-weight: 600 !important;
    background: transparent !important;
    border-left: none !important;
}

body:not(.folded) #adminmenu li.wp-menu-open .wp-submenu li.current > a:hover,
body:not(.folded) #adminmenu li.wp-has-current-submenu .wp-submenu li.current > a:hover {
    background: rgba(228,5,33,0.08) !important;
}

/* Icons */
#adminmenu .wp-menu-image:before { color: var(--muted) !important; }
#adminmenu li.current .wp-menu-image:before,
#adminmenu li.wp-has-current-submenu .wp-menu-image:before,
#adminmenu li:hover .wp-menu-image:before { color: var(--white) !important; }

/* Separator */
#adminmenu li.wp-menu-separator {
    border-color: rgba(255,255,255,0.06) !important;
    margin: 6px 0 !important;
}

/* Notification badge */
#adminmenu .awaiting-mod,
#adminmenu .update-plugins {
    background: var(--red) !important;
    color: var(--white) !important;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 9px;
}

/* Collapse button */
#collapse-menu, #collapse-button { background: rgba(255,255,255,0.04) !important; }
#collapse-menu *, #collapse-button * { color: var(--muted) !important; }
#collapse-menu:hover, #collapse-menu:hover * { color: var(--white) !important; }

/* ═══════════════════════════════════════════════════════════
   CONTENT AREA
   ═══════════════════════════════════════════════════════════ */
body.wp-admin { background: var(--cream) !important; }
#wpcontent, #wpbody-content { background: var(--cream); }

/* Page heading */
.wrap > h1,
.wrap > h2:first-child {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--dark-2) !important;
    letter-spacing: -0.02em;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--dark-2);
    margin-bottom: 20px !important;
}

/* Postboxes / meta boxes */
.postbox {
    background: var(--white) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.postbox .postbox-header {
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
    min-height: 44px;
}

.postbox h2.hndle, .postbox .hndle {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--dark-2) !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.postbox .inside { padding: 16px; }

/* Tabs (e.g. ACF) */
.nav-tab-wrapper {
    border-bottom: 2px solid var(--dark-2) !important;
}

.nav-tab {
    border-radius: 0 !important;
    border: 1px solid transparent !important;
    color: var(--dark-3) !important;
    font-weight: 500;
}

.nav-tab-active {
    background: var(--dark-2) !important;
    color: var(--white) !important;
    border-color: var(--dark-2) !important;
    margin-bottom: -2px;
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.button-primary, .button.button-primary,
input[type=submit].button-primary {
    background: var(--dark-2) !important;
    border-color: var(--dark-2) !important;
    color: var(--white) !important;
    border-radius: 0 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 0 16px !important;
    height: 34px !important;
    line-height: 32px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: background 0.15s, border-color 0.15s;
}

.button-primary:hover, .button.button-primary:hover,
.button-primary:focus, .button.button-primary:focus,
input[type=submit].button-primary:hover {
    background: var(--red) !important;
    border-color: var(--red) !important;
    color: var(--white) !important;
    box-shadow: none !important;
}

.button, .button-secondary {
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 400 !important;
    height: 34px !important;
    line-height: 32px !important;
    border-color: var(--border) !important;
    color: var(--dark-2) !important;
    transition: all 0.15s;
}

.button:hover, .button-secondary:hover {
    border-color: var(--dark-2) !important;
    color: var(--dark-2) !important;
    background: var(--cream) !important;
}

/* ═══════════════════════════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════════════════════════ */
input[type=text], input[type=password], input[type=email],
input[type=number], input[type=url], input[type=search],
select, textarea {
    border-radius: 0 !important;
    border-color: rgba(43,47,53,0.2) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    color: var(--dark-2) !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--dark-2) !important;
    box-shadow: 0 0 0 1px var(--dark-2) !important;
    outline: none !important;
}

/* ═══════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════ */
.wp-list-table {
    border: 1px solid var(--border) !important;
    background: var(--white);
}

.wp-list-table thead,
.wp-list-table tfoot { background: var(--dark-2); }

.wp-list-table thead th,
.wp-list-table tfoot th {
    color: var(--cream) !important;
    border: none !important;
    font-weight: 500 !important;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 10px !important;
}

.wp-list-table thead th a,
.wp-list-table tfoot th a { color: var(--cream) !important; }

.wp-list-table thead .sorted,
.wp-list-table thead .asc,
.wp-list-table thead .desc { background: var(--dark) !important; }

.wp-list-table tbody tr { border-bottom: 1px solid var(--border) !important; }
.wp-list-table tbody tr:hover td { background: rgba(246,245,234,0.7) !important; }
.wp-list-table td { padding: 10px !important; }

.wp-list-table .row-actions { color: var(--dark-3) !important; }
.wp-list-table .row-actions a { color: var(--dark-3) !important; }
.wp-list-table .row-actions a:hover { color: var(--red) !important; }
.wp-list-table .row-actions .delete a:hover { color: var(--red) !important; }

/* ═══════════════════════════════════════════════════════════
   LINKS
   ═══════════════════════════════════════════════════════════ */
#wpcontent a { color: var(--dark-2); }
#wpcontent a:hover { color: var(--red); }

.page-title-action {
    border-radius: 0 !important;
    border-color: var(--dark-2) !important;
    color: var(--dark-2) !important;
    font-weight: 500 !important;
}

.page-title-action:hover {
    background: var(--dark-2) !important;
    color: var(--white) !important;
}

/* ═══════════════════════════════════════════════════════════
   NOTICES
   ═══════════════════════════════════════════════════════════ */
.notice, div.updated, div.error {
    border-radius: 0 !important;
    border-left-width: 4px !important;
    box-shadow: none !important;
}

.notice-success, div.updated { border-left-color: var(--dark-2) !important; }
.notice-error, div.error     { border-left-color: var(--red) !important; }
.notice-warning               { border-left-color: #f59e0b !important; }
.notice-info                  { border-left-color: var(--dark-3) !important; }

/* ═══════════════════════════════════════════════════════════
   ADMIN FOOTER
   ═══════════════════════════════════════════════════════════ */
#wpfooter {
    border-top: 1px solid var(--border) !important;
    padding: 12px 20px !important;
}

#wpfooter p { color: var(--dark-3) !important; font-size: 12px !important; }

/* ═══════════════════════════════════════════════════════════
   ACF FIELDS
   ═══════════════════════════════════════════════════════════ */
.acf-field .acf-label label {
    color: var(--dark-2);
    font-weight: 500;
    font-size: 13px;
}

.acf-tab-wrap .acf-tab-button {
    border-radius: 0 !important;
    font-weight: 500;
    transition: all 0.15s;
}

.acf-tab-wrap .acf-tab-button.active {
    background: var(--dark-2) !important;
    color: var(--white) !important;
    border-color: var(--dark-2) !important;
}

.acf-tab-wrap .acf-tab-button:hover:not(.active) {
    background: var(--cream) !important;
    border-color: var(--dark-2) !important;
}

.acf-btn.acf-btn-primary {
    background: var(--dark-2) !important;
    border-color: var(--dark-2) !important;
    border-radius: 0 !important;
    transition: all 0.15s;
}

.acf-btn.acf-btn-primary:hover {
    background: var(--red) !important;
    border-color: var(--red) !important;
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD WELCOME PANEL
   ═══════════════════════════════════════════════════════════ */
#welcome-panel {
    background: var(--dark-2);
    border: none;
    border-radius: 0;
    border-left: 4px solid var(--red);
    box-shadow: none;
}

#welcome-panel .welcome-panel-content h2,
#welcome-panel .welcome-panel-content p,
#welcome-panel .welcome-panel-content li { color: var(--cream) !important; }

#welcome-panel .about-description { color: rgba(246,245,234,0.7) !important; }

#welcome-panel .button-primary {
    background: var(--red) !important;
    border-color: var(--red) !important;
}

#welcome-panel .button-primary:hover {
    background: var(--red-h) !important;
    border-color: var(--red-h) !important;
}

/* ═══════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════ */
body.login {
    background: var(--cream) !important;
    font-family: 'DM Sans', sans-serif !important;
}

/* Logo */
body.login #login h1 a {
    background-image: url('https://cavilam-media.b-cdn.net/2025/07/07134007/cropped-cavilam_logo.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    width: 300px !important;
    height: 105px !important;
    display: block;
}

/* Form card */
body.login #login { width: 340px; }

body.login #loginform,
body.login #lostpasswordform,
body.login #registerform {
    background: var(--white) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 24px rgba(43,47,53,0.10) !important;
    padding: 32px !important;
    position: relative;
}

body.login #loginform::before,
body.login #lostpasswordform::before {
    content: '';
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--red);
}

body.login .login label {
    color: var(--dark-2) !important;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.login input[type=text],
body.login input[type=password],
body.login input[type=email] {
    border: 1px solid rgba(43,47,53,0.18) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 40px;
    font-size: 14px !important;
    padding: 8px 12px !important;
    color: var(--dark-2) !important;
    transition: border-color 0.15s;
}

body.login input[type=text]:focus,
body.login input[type=password]:focus {
    border-color: var(--dark-2) !important;
    box-shadow: 0 0 0 2px rgba(43,47,53,0.1) !important;
}

body.login .button-primary {
    background: var(--dark-2) !important;
    border-color: var(--dark-2) !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.04em;
    height: 42px !important;
    line-height: 42px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: background 0.15s;
    width: 100%;
    text-align: center;
}

body.login .button-primary:hover {
    background: var(--red) !important;
    border-color: var(--red) !important;
}

body.login #nav,
body.login #backtoblog { text-align: center; }

body.login #nav a,
body.login #backtoblog a {
    color: var(--dark-3) !important;
    font-size: 12px;
    text-decoration: none;
}

body.login #nav a:hover,
body.login #backtoblog a:hover { color: var(--red) !important; }

/* "Mot de passe oublié ?" relocated under the password field (injected via the
   login_form hook). Hide the original bottom link on the main login screen only,
   so the lost-password / register screens keep their own #nav links. */
body.login.login-action-login #nav { display: none !important; }

body.login .cav-login-forgot {
    margin: 8px 0 8px !important;
    text-align: left;
}
body.login .cav-login-forgot a {
    color: var(--dark-3) !important;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-decoration: none;
}
body.login .cav-login-forgot a:hover { color: var(--red) !important; }

/* Show "Se souvenir de moi" BELOW the "Se connecter" button. The form markup is
   fixed by WordPress (remember-me before submit), so reorder visually via flex
   order. Scoped to the main login screen. Other children keep default order:0
   and stay in source order above the button. */
body.login.login-action-login #loginform { display: flex; flex-direction: column; }
body.login.login-action-login #loginform .submit { order: 1; }
body.login.login-action-login #loginform .forgetmenot { order: 2; margin-top: 16px; }

body.login .privacy-policy-page-link a { color: var(--dark-3); font-size: 12px; }