@import url('style.css');

/* Styles spécifiques pour la page d'administration */
:root {
    /* Increased for wider admin layout on desktop; mobile/tablet media queries unchanged */
    --admin-max-width: 1100px;
}

body.admin-page {
    padding: 40px 20px 40px 20px;
    background-color: transparent;
    background-image: url("../images/background/PHOTO B.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}
/* Logo centered at top of admin pages - in flow so it scrolls with the page */
body.admin-page::before {
    content: "";
    display: block;
    width: 520px;
    height: 200px;
    margin: 10px auto 20px auto;
    background-image: url("../images/logo/LOGO B.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

@media (max-width: 1024px) {
    body.admin-page::before {
        width: 420px;
        height: 160px;
    }
}

@media (max-width: 720px) {
    body.admin-page::before {
        width: 280px;
        height: 100px;
    }
}

.admin-container {
    max-width: var(--admin-max-width);
    margin: 0 auto;
    background: #ffffff;
    padding: 28px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.admin-container { position: relative; }

/* Wider admin layout for specific pages (e.g. admin_projects.php) */
.admin-container.admin-wide { max-width: 1200px; }

.admin-menu { display:flex; gap:12px; margin:12px 0 18px; }
.admin-menu a {
    display:inline-block;
    background: var(--action);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    border: 0;
}
.admin-menu a:hover { background: #1f332e; }

/* Admin menu hamburger toggle for mobile/tablet */
.admin-menu-wrapper { display:flex; align-items:center; gap:12px; justify-content:flex-start; position:relative; }
.admin-menu-toggle {
    display:none;
    background:var(--action);
    color:#fff;
    border:0;
    padding:8px 12px;
    border-radius:8px;
    font-weight:700;
    cursor:pointer;
}

/* Mobile/tablet: place toggle on the left and reduce menu framing */
@media (max-width:900px) {
    .admin-menu-wrapper { padding-left:4px; z-index:1200; }
    .admin-menu-toggle { display:inline-block; position:relative; z-index:1300; }
    /* Ensure the admin hamburger stays left-aligned and doesn't expand full-width */
    .admin-menu-toggle { width: auto; text-align: left; margin: 0; }
    /* Small, left-aligned menu overlay */
    .admin-menu { display:none; flex-direction:column; width:auto; background:#ffffff; padding:8px; gap:6px; position:absolute; left:12px; top:56px; box-shadow:0 6px 20px rgba(0,0,0,0.12); border-radius:8px; min-width:160px; max-width:260px; z-index:1400; overflow:visible; }
    .admin-menu a { display:block; width:100%; margin:4px 0; padding:8px 12px; border-radius:6px; font-size:15px; }
    .admin-menu[aria-hidden="false"] { display:flex; }
    /* Ensure admin container doesn't clip the absolute menu */
    .admin-container { overflow: visible; }
    /* Place admin header inline with the hamburger on tablet/phone */
    .admin-menu-wrapper { display:flex; align-items:center; gap:8px; }
    .admin-menu-wrapper .admin-header { position:static; display:flex; flex-direction:row; align-items:center; gap:8px; margin-left:4px; z-index:1250; }
    .admin-menu-wrapper .admin-header .admin-user { display:none; }
    .admin-menu-wrapper .admin-header .admin-open-frontend,
    .admin-menu-wrapper .admin-header .admin-logout { padding:6px 10px; font-size:14px; border-radius:6px; }
    .admin-menu-wrapper .admin-header .admin-open-frontend { margin-left:0; }
    .admin-menu-wrapper .admin-header .admin-logout { margin-left:4px; }
    /* Add extra spacing between the hamburger and page content on tablet/phone */
    .admin-menu-wrapper { margin-bottom: 16px; }
    .admin-top { margin-top: 16px; }
    .action-row { margin-top: 12px; }
    /* Increase space between the admin header (connected as) and the main H1 on tablets/phones */
    .admin-container h1 { margin-top: 36px; }
}

/* Admin header with connected user */
    .admin-header { position: absolute; top: -28px; right: 16px; display:flex; flex-direction:column; align-items:flex-end; gap:6px; z-index:1500; }
.admin-user { font-size:14px; color:var(--txt-secondary); }
.admin-user strong { color:var(--txt-main); }
.admin-logout { display:inline-block; background:var(--action); color:#fff; padding:6px 10px; border-radius:6px; text-decoration:none; font-weight:700; }
.admin-logout:hover { background:#1f332e; }

/* Button to open frontend from admin header */
.admin-open-frontend { display:inline-block; background:var(--action); color:#fff; padding:6px 10px; border-radius:6px; text-decoration:none; font-weight:700; border:0; }
.admin-open-frontend:hover { background:#1f332e; }

/* More professional admin page styling to match frontend */
.admin-container h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 36px;
    color: #121212;
    margin: 8px 0 16px;
}

.admin-top h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    margin: 0 0 12px;
    color: #121212;
}

.admin-form {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    margin-bottom: 18px;
}

/* Visual frame for important admin blocks (enhanced for visibility) */
.panel {
    border: 2px solid var(--action);
    background: #fffdf8;
    padding: 22px;
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(46,74,67,0.12);
}

.admin-form label { display:block; margin-bottom:12px; font-weight:600; color:var(--txt-main); }
.admin-form .small { font-size:13px; color:var(--txt-secondary); margin-top:6px; }

input[type="file"] { width:100%; padding:8px 6px; border-radius:6px; border:1px solid rgba(0,0,0,0.08); }

.admin-form button { margin-top:10px; }

.btn-secondary {
    background: #e6e1da;
    color: var(--txt-main);
    padding: 10px 16px;
    border-radius: 8px;
    border: 0;
    font-weight: 700;
}
.btn-secondary:hover { background: #d9d3c6; }

/* Ensure messages look integrated */
.err, .msg { max-width: 820px; }

@media (max-width: 768px) {
    .admin-container h1 { font-size: 28px; }
    .admin-form { padding:16px; }
}

form label { display:block; margin-bottom:12px; font-weight:600; color:var(--txt-main); }
form input[type="text"], form input[type="password"] {
    width:100%; padding:12px 14px; border:1px solid rgba(0,0,0,0.12); border-radius:6px; font-size:15px; margin-top:6px; box-sizing:border-box;
}

button {
    background: var(--action); color:#fff; border:0; padding:10px 16px; border-radius:8px; cursor:pointer; font-weight:700; margin-top:10px;
}

/* Actions row for forms: primary action left, secondary action right */
.form-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; }
.form-actions a, .form-actions button { margin-top:0; }
@media (max-width:600px) {
    .form-actions { flex-direction:column; align-items:stretch; }
    .form-actions a, .form-actions button { width:100%; }
}

/* Cleanup inline styles moved from templates */
.form-actions form { margin: 0; }
.forgot-form { max-width: 520px; margin: 1rem auto; }
.pw-reset-code-label { margin-right: 8px; display: inline-block; }
.twofa-actions { align-items: flex-start; }
.twofa-secondary { display:flex; gap:8px; }
.mt-1 { margin-top: 1em; }
/* Utility spacing used by setup_2fa.php */
.mt-2-5 { margin-top: 2.5em; }

/* Reuse action-row class from admin_config for upload buttons in admin_projects */
.action-row { display:flex; gap:10px; flex-wrap:wrap; }
.action-row button { margin:0; }

/* Force a short informational sentence to remain on one line */
.single-line { white-space: nowrap; }

@media (max-width: 720px) {
    /* Allow informational sentences to wrap on small screens to avoid overflow */
    .single-line { white-space: normal; }
}

/* Prevent wrapping for long inline code like otpauth URIs; allow horizontal scroll if needed */
.nowrap-code {
    white-space: nowrap;
    overflow-x: auto;
    display: inline-block;
    max-width: 100%;
}

.err { background:#fff0f0; border:1px solid #f3c2c2; padding:12px 18px 12px 56px; border-radius:6px; color:#b00; margin-bottom:14px; position:relative; max-width:100%; }
.err::before {
    content: "\26A0"; /* warning triangle */
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
    color: #b00;
}
/* Remove default list bullet inside error blocks */
.err ul { list-style: none; margin: 0; padding: 0; }
.err li { margin: 0; }
.msg { background:#f0fff4; border:1px solid #c8efda; padding:10px 12px; border-radius:6px; color:#0a6; margin-bottom:14px; }

.admin-top { margin-bottom:16px; }

/* Upload form with preview layout */
.upload-with-preview { display:flex; gap:20px; align-items:flex-start; }
.upload-with-preview form { flex: 1 1 auto; min-width: 0; }
.image-preview { width:220px; flex-shrink:0; margin-left: auto; }
.image-preview .preview-box { width:220px; height:220px; background:#f6f6f6; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center; border:1px solid rgba(0,0,0,0.06); }
.image-preview .preview-box img { width:100%; height:100%; object-fit:cover; display:block; }
.image-preview p.small { margin-top:8px; color:var(--txt-secondary); }

@media (max-width:720px) {
    .upload-with-preview { flex-direction:column; }
    .image-preview { width:100%; }
    .image-preview .preview-box { width:100%; height:220px; }
}

/* Gallery for managing project images */
.projects-gallery { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.gallery-item { width:120px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.gallery-item img { width:120px; height:120px; object-fit:cover; border-radius:6px; border:1px solid rgba(0,0,0,0.06); }
.gallery-meta { font-size:13px; color:var(--txt-main); }
.gallery-meta .meta-top { display:flex; align-items:center; gap:6px; }
.gallery-meta .meta-caption { margin-top:6px; font-size:12px; color:var(--txt-secondary); max-width:120px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Pagination styles for project gallery */
.pagination { display:flex; gap:8px; align-items:center; justify-content:center; margin:12px 0; }
.pagination .page-number, .pagination a { display:inline-block; padding:6px 10px; border-radius:6px; background:#ffffff; border:1px solid rgba(0,0,0,0.06); color:var(--txt-main); text-decoration:none; }
.pagination .page-number.current { background:var(--action); color:#fff; border-color:transparent; font-weight:700; }
.pagination a.page-prev, .pagination a.page-next { font-weight:600; }

@media (max-width:720px) {
    .gallery-item { width:30%; }
}

@media (max-width:600px) {
    .admin-container { padding:18px; }
}

/* Responsive rules for admin page */
@media (max-width:1024px) {
    .admin-container {
        width: 92%;
        padding: 20px;
    }
    .admin-container h1 { font-size: 28px; text-align: center; margin-top: 28px; }
    .admin-top h2 { font-size: 18px; }
    /* Center form action buttons (e.g. 'Revenir') on tablet and smaller */
    .form-actions { justify-content: center; text-align: center; }
    /* Slight spacing on larger tablets to keep hamburger separated from nearby controls */
    .admin-menu-wrapper { margin-bottom: 12px; }
    .admin-top { margin-top: 10px; }
    .action-row { margin-top: 10px; }
}

@media (max-width:600px) {
    .admin-container {
        width: 96%;
        padding: 14px;
        border-radius: 8px;
    }
    .admin-container h1 { font-size: 22px; text-align: center; margin-bottom: 8px; }
    .admin-top h2 { font-size: 16px; }
    form label { font-size: 14px; }
    form input[type="text"], form input[type="password"] { padding: 10px; font-size: 15px; }
    button { width: 100%; padding: 12px; font-size: 16px; }
}

@media (max-width:480px) {
    .admin-container { padding: 12px; }
    .admin-container h1 { font-size: 20px; }
    form input[type="text"], form input[type="password"] { font-size: 14px; }
}

/* Tabbed admin UI */
.tabs { margin-top: 18px; }
.tab-buttons { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.tab-buttons [data-tab] { display:inline-block; padding:8px 14px; border-radius:8px; border:1px solid rgba(0,0,0,0.12); background:var(--bg-secondary); color:var(--txt-main); cursor:pointer; font-weight:600; box-shadow: 0 4px 12px rgba(0,0,0,0.04); text-decoration:none; }
.tab-buttons [data-tab].active { background:var(--action); color:#fff; border-color:transparent; box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
.tab-buttons [data-tab]:focus { outline:3px solid rgba(46,74,67,0.12); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* Alignement du lien "Mot de passe oublié" dans le formulaire de connexion */
.forgot { text-align: right; margin-top: 8px; }
.forgot a:not(.btn-secondary) { color: var(--txt-main); text-decoration: underline; }
.forgot a.btn-secondary { text-decoration: none; }

/* On mobile et tablette: centrer le lien et augmenter l'espace au-dessus */
@media (max-width: 1024px) {
    .forgot { text-align: center; margin-top: 18px; }
    .forgot a.btn-secondary { display: inline-block; }
}

@media (max-width: 600px) {
    .forgot { margin-top: 20px; }
}

/* Utility: align content to the right */
.align-right { text-align: right; }

/* Modal for password expiry (moved from inline <style>) */
.pw-modal{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}
.pw-modal-content{background:#fff;padding:20px;border-radius:6px;max-width:420px;text-align:center}
.pw-modal-icon{font-size:40px;margin-bottom:8px}
.pw-modal-icon.critical{color:#c00}
.pw-modal-icon.warn{color:#f39c12}
.pw-modal-actions{margin-top:12px;display:flex;gap:8px;justify-content:center}

/* Debug box used for admin-only debug output */
.debug-box{background:#fff8c4;padding:10px;border:1px solid #e2c044;margin-bottom:14px}

/* Admin table row card styling for better visibility */
.admin-table { width:100%; border-collapse: separate; border-spacing: 0 10px; margin-top:12px; }
.admin-table thead { display: table-header-group; }
.admin-table thead th { background: transparent; padding: 8px 12px; text-align: left; font-weight:700; color:var(--txt-main); }
.admin-table tbody tr { background: transparent; }
.admin-table tbody td { background: #ffffff; padding: 12px 14px; border: 1px solid rgba(0,0,0,0.06); }
.admin-table tbody td:first-child { border-top-left-radius:8px; border-bottom-left-radius:8px; }
.admin-table tbody td:last-child { border-top-right-radius:8px; border-bottom-right-radius:8px; }
.admin-table tbody tr:hover td { box-shadow: 0 8px 20px rgba(0,0,0,0.06); }

/* Actions column: left side for delete/edit, right stacked buttons for move up/down */
.actions-cell { display:flex; align-items:center; gap:12px; flex-wrap:nowrap; }
.actions-cell .action-left { display:flex; gap:8px; align-items:flex-start; flex-direction:column; }
.actions-cell .action-left .btn-danger,
.actions-cell .action-left .btn-edit,
.actions-cell .action-left .admin-open-frontend {
    display:inline-block;
    background: var(--action);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    border: 0;
    white-space: nowrap;
    cursor: pointer;
}
.actions-cell .action-move { margin-left: auto; display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.actions-cell .action-move form { display:block; }
.actions-cell .btn-move { background: transparent; color: var(--txt-main); border:1px solid rgba(0,0,0,0.06); padding:6px 8px; border-radius:6px; cursor:pointer; width:auto; }
.actions-cell .btn-move[disabled] { opacity:0.45; cursor:not-allowed; }
.actions-cell button { width: auto; }

@media (max-width:720px) {
    .actions-cell { flex-direction:column; align-items:stretch; }
    .actions-cell .action-move { margin-left:0; align-items:flex-start; flex-direction:row; gap:8px; }
}

/* If only one move button is present, center it vertically */
.actions-cell.action-move.single, .actions-cell .action-move.single {
    align-items:center;
    justify-content:center;
}

/* Unified visual style for move buttons (Monter/Descendre) */
.actions-cell .btn-move {
    background: var(--action);
    border: 0;
    color: #fff;
    padding: 0;
    border-radius: 10px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    width: 40px;
    height: 40px;
    display:flex; align-items:center; justify-content:center;
    font-weight:700;
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.actions-cell .btn-move:hover:not([disabled]){
    background: #1f332e;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.16);
}
.actions-cell .btn-move:active:not([disabled]){
    transform: translateY(0);
}
.actions-cell .btn-move[disabled] {
    background:#f5f5f5; color:#999; border-color:rgba(0,0,0,0.04); box-shadow:none; cursor:not-allowed;
}