/* ============================================= */
/* BINFORD LTD. THEME VARIABLES                  */
/* ============================================= */
:root {
    /* Core Palette */
    --theme-bg-deep: #100E17;
    --theme-bg-surface: #1A1724;
    --theme-bg-card: #231F32;
    --theme-bg-card-hover: #2C2840;

    --theme-text-primary: #FFFFFF;
    --theme-text-secondary: #A8A5B8;
    --theme-text-muted: #7A768F;

    --theme-accent-primary: #8A3FFC;
    --theme-accent-secondary: #C879FF;
    --theme-accent-hover: #A050FC;

    --theme-border-soft: #3A374A;
    --theme-border-strong: var(--theme-accent-secondary);

    /* Sizing & Spacing */
    --theme-font-family: 'Inter', 'Montserrat', sans-serif;
    --theme-container-width: 1140px;
    --theme-border-radius-small: 6px;
    --theme-border-radius-medium: 8px;
    --theme-border-radius-large: 12px;
    --theme-section-padding-y: 100px;

    /* Shadows */
    --theme-shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.25);
    --theme-shadow-medium: 0 12px 30px rgba(0, 0, 0, 0.3);
    --theme-shadow-glow-primary: 0 0 20px rgba(138, 63, 252, 0.3);

    /* Status Colors */
    --theme-success: #28a745; /* Bootstrap Success Green */
    --theme-success-bg: rgba(40, 167, 69, 0.15);
    --theme-success-hover: #218838;
    --theme-danger: #dc3545; /* Bootstrap Danger Red */
    --theme-danger-bg: rgba(220, 53, 69, 0.15);
    --theme-danger-hover: #c82333;
    --theme-warning: #ffc107; /* Bootstrap Warning Yellow */
    --theme-warning-bg: rgba(255, 193, 7, 0.15);
    --theme-info: #17a2b8; /* Bootstrap Info Cyan */
    --theme-info-bg: rgba(23, 162, 184, 0.1);
}

/* ============================================= */
/* BASE & GLOBAL STYLES                          */
/* ============================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--theme-font-family); line-height: 1.7;
    background-color: var(--theme-bg-deep); color: var(--theme-text-primary);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
.container { width: 90%; max-width: var(--theme-container-width); margin: 0 auto; padding: 0 15px; }
h1, h2, h3, h4, h5, h6 { line-height: 1.3; margin-bottom: 0.6em; color: var(--theme-text-primary); font-weight: 600; }
h1 { font-size: clamp(2.4rem, 5vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 4vw, 2.8rem); text-align: center; margin-bottom: 1.2em; }
h3 { font-size: clamp(1.3rem, 3vw, 1.7rem); } h4 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); }
p { margin-bottom: 1.2em; color: var(--theme-text-secondary); font-size: clamp(0.95rem, 1.5vw, 1.05rem); }
a { text-decoration: none; color: var(--theme-accent-secondary); transition: color 0.2s ease; }
a:hover { color: var(--theme-text-primary); }
ul { list-style: none; } img { max-width: 100%; height: auto; display: block; }

/* ============================================= */
/* HEADER (GLOBAL - FOR HOMEPAGE)                */
/* ============================================= */
header {
    background-color: var(--theme-bg-surface);
    padding: 1em 0;
    border-bottom: 1px solid var(--theme-border-soft);
    position: sticky;
    top: 0;
    z-index: 1000;
    position: relative; /* Required for absolute centering of nav */
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--theme-text-primary);
}
.logo-link:hover {
    color: var(--theme-text-primary);
}
.logo-icon {
    width: 28px;
    height: 28px;
    background-color: var(--theme-accent-primary);
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z' fill='%23000'%3E%3C/path%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
}
.custom-logo-img {
    max-height: 35px !important;
    width: auto !important;
    vertical-align: middle;
}
.logo-text {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

/* ---------------- Centered Navigation ---------------- */
nav#main-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
header nav#main-nav ul {
    display: flex;
    gap: 30px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translateX(-20px); /* ? THIS is the new line */
}
header nav ul li a {
    color: var(--theme-text-secondary);
    font-weight: 500;
    padding: 0.3em 0;
    font-size: 0.9rem;
    position: relative;
}
header nav ul li a:hover,
header nav ul li a.active {
    color: var(--theme-text-primary);
}
header nav ul li a.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background-color: var(--theme-accent-primary);
    border-radius: 50%;
}

/* ---------------- Header Actions (Right Side) ---------------- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.header-actions .btn {
    padding: 0.5em 1.2em;
    font-size: 0.85rem;
}
.connect-wallet-btn {
    background-color: var(--theme-accent-primary);
    color: var(--theme-text-primary);
}
.connect-wallet-btn:hover {
    background-color: var(--theme-accent-hover);
    color: var(--theme-text-primary);
}

/* ---------------- Mobile Navigation ---------------- */
.mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--theme-text-primary);
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 1100;
}
.mobile-nav-panel {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--theme-bg-surface);
    z-index: 1050;
    padding: 80px 20px 20px 20px;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%);
}
.mobile-nav-panel.active {
    display: flex;
    transform: translateX(0);
}
.mobile-nav-panel ul {
    flex-direction: column;
    gap: 20px;
    width: 100%;
}
.mobile-nav-panel ul li a {
    font-size: 1.2rem;
    display: block;
    padding: 10px;
    color: var(--theme-text-secondary);
}
.mobile-nav-panel ul li a.active,
.mobile-nav-panel ul li a:hover {
    color: var(--theme-text-primary);
}
.mobile-nav-panel .btn {
    margin-top: 15px;
    font-size: 1rem;
    padding: 0.7em 1.5em;
    width: 80%;
    max-width: 250px;
}

/* ============================================= */
/* BUTTONS (UNIFIED - BINFORD STYLE)             */
/* ============================================= */
.btn { display: inline-block; padding: 0.75em 1.5em; border-radius: var(--theme-border-radius-medium); font-weight: 500; text-align: center; transition: all 0.2s ease; border: none; cursor: pointer; font-size: 0.9rem; line-height: 1.4; }
.btn:active { transform: scale(0.98); }
.btn-primary { background-color: var(--theme-accent-primary); color: var(--theme-text-primary); }
.btn-primary:hover { background-color: var(--theme-accent-hover); color: var(--theme-text-primary); }
.btn-secondary, .btn-outline { background-color: transparent; color: var(--theme-text-secondary); border: 1px solid var(--theme-border-soft); }
.btn-secondary:hover, .btn-outline:hover { background-color: var(--theme-bg-card-hover); color: var(--theme-text-primary); border-color: var(--theme-border-strong); }
.btn-success { background-color: var(--theme-success) !important; color: white !important; border-color: var(--theme-success) !important; }
.btn-success:hover { background-color: var(--theme-success-hover) !important; border-color: var(--theme-success-hover) !important; }
.btn-danger { background-color: var(--theme-danger) !important; color: white !important; border-color: var(--theme-danger) !important; }
.btn-danger:hover { background-color: var(--theme-danger-hover) !important; border-color: var(--theme-danger-hover) !important; }
.btn-large { padding: 0.9em 2.2em; font-size: 1rem; }
.app-store-buttons { display: flex; gap: 15px; justify-content: center; margin-top: 1.5em; }
.app-store-buttons img { height: 45px; width: auto; }

/* ============================================= */
/* HOMEPAGE SECTIONS (BINFORD STYLE)             */
/* ============================================= */
.section-padding { padding: var(--theme-section-padding-y) 0; }
.hero-section { padding: calc(var(--theme-section-padding-y) + 20px) 0 var(--theme-section-padding-y) 0; text-align: left; position: relative; }
.hero-content { display: flex; align-items: center; gap: 50px; } .hero-text { flex: 1; max-width: 550px; }
.hero-text h1 { font-size: clamp(2.8rem, 6vw, 4rem); margin-bottom: 0.5em; line-height: 1.2; font-weight: 700;}
.hero-text h1 .highlight { color: var(--theme-accent-secondary); }
.hero-text p.subtitle { font-size: clamp(1rem, 2vw, 1.2rem); color: var(--theme-text-secondary); margin-bottom: 2em; }
.hero-actions { display: flex; gap: 15px; align-items: center; } .hero-image { flex: 0 0 45%; display: flex; justify-content: flex-end; }
.hero-image img { max-width: 100%; height: auto; }
.trusted-by-section { padding: 40px 0; border-top: 1px solid var(--theme-border-soft); border-bottom: 1px solid var(--theme-border-soft); }
.trusted-by-logos { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 30px; }
.trusted-by-logos img, .trusted-by-logos span { max-height: 30px; width: auto; opacity: 0.7; filter: grayscale(50%) brightness(1.5); color: var(--theme-text-muted); font-weight: 500;}
.key-features-section { display: flex; gap: 50px; align-items: flex-start; } .key-features-text { flex: 1; max-width: 400px; }
.key-features-text h2 { text-align: left; margin-bottom: 0.5em; } .key-features-text p { margin-bottom: 1.5em; }
.key-features-grid { flex: 1.5; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.feature-card { background-color: var(--theme-bg-card); padding: 25px; border-radius: var(--theme-border-radius-medium); text-align: left; border: 1px solid transparent; transition: background-color 0.2s ease, border-color 0.2s ease; }
.feature-card:hover { background-color: var(--theme-bg-card-hover); border-color: var(--theme-border-strong); }
.feature-card-icon { width: 24px; height: 24px; background-color: var(--theme-accent-primary); border-radius: 50%; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; color: white; }
.feature-card h4 { font-size: 1.1rem; margin-bottom: 0.3em; color: var(--theme-text-primary); } .feature-card p { font-size: 0.85rem; color: var(--theme-text-secondary); margin-bottom: 0; }
.team-section h2 { margin-bottom: 1.5em; } .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; position: relative; }
.team-card { background-color: var(--theme-bg-card); padding: 30px; border-radius: var(--theme-border-radius-large); text-align: center; box-shadow: var(--theme-shadow-soft); }
.team-card-image { width: 100px; height: 100px; border-radius: 50%; margin: 0 auto 15px auto; overflow: hidden; border: 3px solid var(--theme-accent-secondary); }
.team-card-image img { width: 100%; height: 100%; object-fit: cover; } .team-card h4 { font-size: 1.2rem; margin-bottom: 0.2em; color: var(--theme-text-primary); }
.team-card .title { font-size: 0.85rem; color: var(--theme-accent-secondary); margin-bottom: 1em; display: block; }
.team-card p.team-bio-hidden { font-size: 0.85rem; color: var(--theme-text-muted); margin-bottom: 1.5em; display: none; }
.team-social-links a { color: var(--theme-text-muted); margin: 0 8px; font-size: 1.1rem; } .team-social-links a:hover { color: var(--theme-accent-primary); }
.join-platform-cta { text-align: center; } .join-platform-cta h2 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 0.4em; }
.join-platform-cta p { max-width: 600px; margin: 0 auto 2em auto; }

/* ============================================= */
/* FOOTER (BINFORD STYLE)                        */
/* ============================================= */
footer { background-color: var(--theme-bg-surface); color: var(--theme-text-secondary); padding: 60px 0 30px; border-top: 1px solid var(--theme-border-soft); margin-top: var(--theme-section-padding-y); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; margin-bottom: 40px; }
.footer-column .logo-link { margin-bottom: 15px; } .footer-column .logo-text { font-size: 1.3rem; }
.footer-column p.tagline { font-size: 0.85rem; color: var(--theme-text-muted); margin-bottom: 20px; }
.footer-social-inline a { margin-right: 15px; font-size: 1.2rem; color: var(--theme-text-muted); } .footer-social-inline a:hover { color: var(--theme-text-primary); }
.footer-column h5 { color: var(--theme-text-primary); font-size: 1rem; margin-bottom: 1em; font-weight: 500; }
.footer-column ul li { margin-bottom: 0.7em; } .footer-column ul li a { color: var(--theme-text-secondary); font-size: 0.9rem; }
.footer-column ul li a:hover { color: var(--theme-text-primary); text-decoration: underline; }
.newsletter-form label { display: block; font-size: 0.8rem; color: var(--theme-text-muted); margin-bottom: 8px; } .newsletter-input-group { display: flex; }
.newsletter-input-group input[type="email"] { flex-grow: 1; padding: 0.7em 1em; border: 1px solid var(--theme-border-soft); background-color: var(--theme-bg-deep); color: var(--theme-text-primary); border-radius: var(--theme-border-radius-small) 0 0 var(--theme-border-radius-small); font-size: 0.9rem; outline: none; }
.newsletter-input-group input[type="email"]:focus { border-color: var(--theme-accent-primary); }
.newsletter-input-group button[type="submit"] { padding: 0.7em 1.2em; background-color: var(--theme-accent-primary); color: var(--theme-text-primary); border: none; border-radius: 0 var(--theme-border-radius-small) var(--theme-border-radius-small) 0; cursor: pointer; font-size: 0.9rem; font-weight: 500; }
.newsletter-input-group button[type="submit"]:hover { background-color: var(--theme-accent-hover); }
.footer-bottom { border-top: 1px solid var(--theme-border-soft); padding-top: 25px; text-align: center; font-size: 0.85rem; color: var(--theme-text-muted); }

/* ============================================= */
/* RESPONSIVE ADJUSTMENTS (GLOBAL)               */
/* ============================================= */
@media (max-width: 992px) {
    .hero-content, .key-features-section { flex-direction: column; text-align: center; }
    .hero-text, .key-features-text { max-width: 100%; margin-bottom: 30px; }
    .hero-text h1, .key-features-text h2 { text-align: center; }
    .hero-actions { justify-content: center; } .hero-image { max-width: 70%; margin-top: 30px; justify-content: center; }
    .team-nav-arrow { display: none; }
    header nav#main-nav { display: none; } .mobile-nav-toggle { display: block; }
}
@media (max-width: 768px) {
    body { font-size: 15px; } h1 { font-size: 2.2rem; } h2 { font-size: 1.8rem; }
    .section-padding { --theme-section-padding-y: 60px; }
    header { padding: 0.8em 0; }
    .header-actions .connect-wallet-btn { font-size: 0.8rem; padding: 0.5em 1em;}
    .hero-actions { flex-direction: column; gap: 10px; }
    .trusted-by-logos img, .trusted-by-logos span { max-height: 22px; }
    .key-features-grid, .team-grid, .footer-grid { grid-template-columns: 1fr; }
    .join-platform-cta h2 { font-size: 1.8rem; }
    .app-store-buttons { flex-direction: column; align-items: center; }
    .footer-column { text-align: center; } .footer-column .logo-link, .footer-social-inline { justify-content: center; }
    .newsletter-input-group { justify-content: center; }
}

/* ============================================= */
/* AUTH PAGES (LOGIN & REGISTER)                 */
/* ============================================= */
.auth-section { padding: 60px 15px; min-height: calc(100vh - 120px); display: flex; align-items: center; justify-content: center; background-color: var(--theme-bg-deep); }
.auth-container { width: 100%; max-width: 450px; background-color: var(--theme-bg-card); padding: 30px 35px; border-radius: var(--theme-border-radius-large); box-shadow: var(--theme-shadow-medium); text-align: center; border: 1px solid var(--theme-border-soft); }
.auth-container h2 { text-align: center; margin-bottom: 1.5em; font-size: 1.6rem; color: var(--theme-text-primary); font-weight: 600; }
.auth-form { text-align: left; } .form-group { margin-bottom: 1.3rem; }
.form-label, .auth-form label { display: block; margin-bottom: 0.5em; font-weight: 500; font-size: 0.85rem; color: var(--theme-text-secondary); }
.auth-form input[type="text"], .auth-form input[type="email"], .auth-form input[type="password"], .auth-form .form-control {
    display: block; width: 100%; padding: 10px 14px; font-size: 0.9rem; color: var(--theme-text-primary);
    background-color: var(--theme-bg-surface); border: 1px solid var(--theme-border-soft);
    border-radius: var(--theme-border-radius-medium); transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}
.auth-form input[type="text"]::placeholder, .auth-form input[type="email"]::placeholder, .auth-form input[type="password"]::placeholder, .auth-form .form-control::placeholder { color: var(--theme-text-muted); opacity: 1; }
.auth-form input[type="text"]:focus, .auth-form input[type="email"]:focus, .auth-form input[type="password"]:focus, .auth-form .form-control:focus { border-color: var(--theme-accent-primary); box-shadow: 0 0 0 3px rgba(138, 63, 252, 0.2); }
.auth-form .btn-block, .auth-form button[type="submit"] { display: block; width: 100%; padding: 10px 15px; font-size: 0.95rem; margin-top: 0.5rem; }
.auth-switch { text-align: center; margin-top: 1.5em; font-size: 0.9rem; color: var(--theme-text-secondary); }
.auth-switch a { font-weight: 500; color: var(--theme-accent-secondary); } .auth-switch a:hover { color: var(--theme-text-primary); text-decoration: underline; }
.alert { padding: 10px 15px; margin-bottom: 1.2rem; border: 1px solid transparent; border-radius: var(--theme-border-radius-medium); font-size: 0.85rem; text-align: left; }
.alert-danger { color: #ffc6d1; background-color: var(--theme-danger-bg); border-color: var(--theme-danger); }
.alert-danger ul { margin-bottom: 0; padding-left: 20px; list-style-type: disc; } .alert-danger li { margin-bottom: 0.3em; }
.alert-success { color: #c3e6cb; background-color: var(--theme-success-bg); border-color: var(--theme-success); }

/* ============================================= */
/* DASHBOARD LAYOUT & COMPONENTS                 */
/* ============================================= */
.dashboard-layout { display: flex; min-height: 100vh; }
.dashboard-sidebar {
    width: 250px; background-color: var(--theme-bg-surface); padding: 0;
    position: fixed; left: 0; top: 0; height: 100vh; overflow-y: auto;
    z-index: 1010; display: flex; flex-direction: column;
    transition: transform 0.3s ease-in-out, width 0.3s ease;
    border-right: 1px solid var(--theme-border-soft);
}
.dashboard-sidebar .sidebar-header {
    padding: 20px 25px; margin-bottom: 10px; /* Removed border-bottom for cleaner look */
    display: flex; align-items: center; /* For logo alignment */
}
.dashboard-sidebar .sidebar-header .logo-link { text-decoration: none; display: flex; align-items: center; gap: 8px;}
.dashboard-sidebar .sidebar-header .logo-link .custom-logo-img { max-height: 30px; width: auto; }
.dashboard-sidebar .sidebar-header h1, /* For text logo */
.dashboard-sidebar .sidebar-header .logo-text { /* For text logo if wrapped in span */
    font-size: 1.25rem; color: var(--theme-text-primary); margin-bottom: 0; font-weight: 600;
    text-align: left; line-height: 1; /* Ensure proper vertical alignment */
}

.sidebar-nav {
    padding-top: 10px; /* Space above first nav item */
    flex-grow: 1;
}
.sidebar-nav ul { list-style: none; padding: 0; margin: 0; }
.sidebar-nav .nav-section-title { padding: 15px 25px 8px 25px; font-size: 0.7rem; text-transform: uppercase; color: var(--theme-text-muted); font-weight: 500; letter-spacing: 0.5px; }
.sidebar-nav ul li a { /* Unified style for all sidebar links */
    display: flex; align-items: center; padding: 10px 20px; margin: 0 10px 4px 10px;
    color: var(--theme-text-secondary); font-size: 0.9rem; border-radius: var(--theme-border-radius-small);
    transition: background-color 0.2s ease, color 0.2s ease; position: relative; text-decoration: none;
}
.sidebar-nav ul li a .nav-icon { margin-right: 12px; font-size: 0.95rem; width: 18px; text-align: center; color: var(--theme-text-muted); transition: color 0.2s ease; }
.sidebar-nav ul li a:hover { background-color: var(--theme-bg-card-hover); color: var(--theme-text-primary); }
.sidebar-nav ul li a:hover .nav-icon { color: var(--theme-accent-primary); }
.sidebar-nav ul li.active > a { background-color: var(--theme-accent-primary); color: var(--theme-text-primary); }
.sidebar-nav ul li.active > a .nav-icon { color: var(--theme-text-primary); }

/* Remove submenu and arrow styles as they are not used for now */
.sidebar-nav ul li.has-submenu > a .arrow,
.sidebar-nav ul li.has-submenu > .submenu-toggle .arrow,
.sidebar-nav .submenu {
    display: none !important;
}

.sidebar-footer { margin-top: auto; padding: 20px 25px; border-top: 1px solid var(--theme-border-soft); }
.sidebar-footer .btn { width: 100%; }
.sidebar-footer .btn-outline { border-color: var(--theme-border-soft); color: var(--theme-text-secondary); }
.sidebar-footer .btn-outline:hover { border-color: var(--theme-accent-secondary); background-color: var(--theme-bg-card-hover); color: var(--theme-text-primary); }

.dashboard-main-content { flex-grow: 1; padding: 25px 30px; margin-left: 250px; background-color: var(--theme-bg-deep); }
.dashboard-main-content .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid var(--theme-border-soft); }
.dashboard-main-content h2.page-title, .dashboard-main-content .page-header h2 { text-align: left !important; margin-bottom: 0 !important; font-size: 1.6rem !important; color: var(--theme-text-primary) !important; font-weight:600 !important;}
.dashboard-main-content p { color: var(--theme-text-secondary); font-size: 0.95rem; }

.search-form-container { display: flex; gap: 10px; margin-bottom: 25px; }
.search-form-container input[type="text"] { flex-grow: 1; padding: 10px 15px; background-color: var(--theme-bg-surface); border: 1px solid var(--theme-border-soft); border-radius: var(--theme-border-radius-medium); color: var(--theme-text-primary); font-size: 0.9rem; }
.search-form-container input[type="text"]:focus { border-color: var(--theme-accent-primary); box-shadow: 0 0 0 3px rgba(138, 63, 252, 0.2); }
.search-form-container .btn { padding: 10px 18px; font-size: 0.9rem; } /* Adjusted padding */

/* ============================================= */
/* DASHBOARD - PRESENTATIONS LIST (SIMPLIFIED CLICKABLE CARD) */
/* ============================================= */

.presentations-list-container {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.presentation-item-card {
    background-color: var(--theme-bg-card);
    border-radius: var(--theme-border-radius-medium);
    border: 1px solid var(--theme-border-soft);
    box-shadow: var(--theme-shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;         
    flex-direction: column; 
    min-height: 170px;     
    position: relative; 
}

.presentation-item-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--theme-shadow-medium);
    border-color: var(--theme-accent-primary); /* Card border still gets accent on hover */
}

/* This area becomes the main clickable link */
.presentation-card-clickable-area {
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
    padding: 20px; 
    text-decoration: none; 
    color: inherit; 
}
.presentation-card-clickable-area:hover .presentation-card-title {
    text-decoration: none; /* Example: add underline to title on hover */
    /* color: var(--theme-text-primary); /* Explicitly keep it primary if needed */
}


.presentation-card-content-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}

.presentation-card-title { 
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--theme-text-primary); /* Title is always primary text color */
    /* The <a> tag for the title is now the parent .presentation-card-clickable-area */
}

.presentation-card-body {
    margin-bottom: 1rem; 
}
.presentation-card-body p {
    font-size: 0.85rem;
    margin-bottom: 6px;
    line-height: 1.4;
    color: var(--theme-text-secondary);
}
.presentation-card-body p:last-child {
    margin-bottom: 0;
}
.presentation-card-body p strong {
    color: var(--theme-text-muted);
    font-weight: 500;
}

/* Footer containing date and the delete button */
.presentation-card-footer.separated-actions {
    /* margin-top: auto; /* This pushes the footer to the bottom IF its parent is flex and this is not part of the main clickable area */
    /* Since the clickable area takes flex-grow, this footer will naturally be at the bottom */
    padding: 10px 20px; /* Reduced top padding, consistent side padding */
    border-top: 1px solid var(--theme-border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--theme-bg-card); /* Ensure it has card background if padding makes it distinct */
}
.presentation-card-footer .card-meta {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
    margin-bottom: 0; 
}

.presentation-delete-btn {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.75rem !important;
    line-height: 1 !important;
    /*border-color: var(--theme-danger) !important; /* Red border */
    /*color: var(--theme-danger) !important; /* Red icon/text */
    background-color: transparent; /* Ensure it's outline style */
}

.presentation-delete-btn i.fas {
    margin-right: 0 !important;
    /*color: var(--theme-danger) !important; /* Ensure icon is red */
}

.presentation-delete-btn:hover,
.presentation-delete-btn:focus {
    background-color: var(--theme-danger) !important; /* Red background on hover */
    color: var(--theme-text-primary) !important; /* White icon/text on hover */
    border-color: var(--theme-danger) !important;
}

.presentation-delete-btn:hover i.fas,
.presentation-delete-btn:focus i.fas {
    color: var(--theme-text-primary) !important; /* White icon on hover */
}



.folder-actions-footer .dropdown {
    position: static; /* Or relative, depending on context */
}

/* Style the trigger button (the three dots) */
.folder-actions-footer .btn-card-action[data-bs-toggle="dropdown"] {
    /* Uses the existing btn-card-action style, perfect! */
}

/* Style the dropdown menu itself */
.folder-actions-footer .dropdown-menu {
    /* Bootstrap's default dark theme is good, but we can refine it */
    background-color: #212529; /* Darker than default */
    border: 1px solid var(--theme-border-soft, #444);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
}

/* Style the items within the dropdown menu */
.folder-actions-footer .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

/* Hover/focus effect for dropdown items */
.folder-actions-footer .dropdown-item:hover,
.folder-actions-footer .dropdown-item:focus {
    background-color: var(--theme-accent-primary, #8a3ffc);
    color: #fff;
}

/* Style for the delete item specifically on hover */
.folder-actions-footer .dropdown-item.delete-presentation-folder-btn:hover,
.folder-actions-footer .dropdown-item.delete-presentation-folder-btn:focus {
    background-color: #dc3545; /* Red for delete action */
    color: #fff;
}

/* Dashboard Forms (Create Presentation, Account Settings, Whitelabel) */
.dashboard-main-content .auth-form { /* Re-using auth-form for styling consistency */
    max-width: 100%; /* Allow it to take width of its container in dashboard */
    background-color: var(--theme-bg-card);
    padding: 25px 30px;
    border-radius: var(--theme-border-radius-large);
    border: 1px solid var(--theme-border-soft);
    margin-top: 0; /* Remove top margin if inside a .col-md-6 or similar */
}
.dashboard-main-content .auth-form h4.card-title-large { /* For titles inside form cards */
    color: var(--theme-text-primary);
    font-size: 1.2rem; /* Subdued title for form sections */
    margin-bottom: 1.5em;
    text-align: left;
    font-weight: 500;
}

@media (max-width: 992px) {
    .dashboard-sidebar { width: 220px; } .dashboard-main-content { margin-left: 220px; }
    .dashboard-main-content .page-header { flex-direction: column; align-items: flex-start; gap: 15px; }
    .presentations-list-container { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* Adjusted */
}
@media (max-width: 768px) {
    .dashboard-sidebar { transform: translateX(-100%); width: 260px; z-index: 1100; box-shadow: 5px 0 20px rgba(0,0,0,0.4); }
    .dashboard-sidebar.mobile-active { transform: translateX(0); }
    .dashboard-main-content { margin-left: 0; padding: 20px; }
    .search-form-container { flex-direction: column; }
    .presentations-list-container,
    .dashboard-main-content .row > .col-md-6 { /* Stack columns in account settings */
        grid-template-columns: 1fr;
        margin-bottom: 20px; /* Space between stacked form cards */
    }
    .dashboard-main-content .row > .col-md-6:last-child { margin-bottom: 0; }
}

/* Modals */
.modal { display: none; position: fixed; z-index: 1050; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.65); }
.modal-content { background-color: var(--theme-bg-card); margin: 8% auto; padding: 20px 25px; border: 1px solid var(--theme-border-soft); width: 90%; max-width: 500px; border-radius: var(--theme-border-radius-medium); box-shadow: var(--theme-shadow-medium); position: relative; color: var(--theme-text-primary); }
.modal-dialog-centered .modal-content { margin: auto; } /* For Bootstrap centering */
.modal-header { padding-bottom: 12px; border-bottom: 1px solid var(--theme-border-soft); margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; }
.modal-header .modal-title, .modal-header h4, .modal-header h5 { margin-bottom: 0; color: var(--theme-text-primary); font-size: 1.2rem; font-weight: 500; }
.modal-close-btn, .modal-header .btn-close { color: var(--theme-text-muted); font-size: 1.5rem; background: none; border: none; cursor: pointer; padding: 0; line-height: 1; opacity: 0.7; }
.modal-close-btn:hover, .modal-header .btn-close:hover { color: var(--theme-text-primary); opacity: 1; }
.modal-header .btn-close { filter: invert(1) grayscale(1) brightness(1.5); /* Make Bootstrap 'x' white */ }
.modal-body { margin-bottom: 18px; } .modal-body p { font-size: 0.9rem; }
.modal-body .form-label { color: var(--theme-text-secondary) !important; }
.modal-body .form-control { background-color: var(--theme-bg-surface) !important; color: var(--theme-text-primary) !important; border-color: var(--theme-border-soft) !important; }
.modal-body .form-control:focus { border-color: var(--theme-accent-primary) !important; box-shadow: 0 0 0 3px rgba(138, 63, 252, 0.2) !important; }
.modal-footer { padding-top: 12px; border-top: 1px solid var(--theme-border-soft); text-align: right; display:flex; justify-content: flex-end; gap: 10px; }
/* .modal-footer .btn { margin-left: 10px; } */ /* Replaced by gap */
.modal-footer .btn-outline, .modal-footer .btn-secondary { color: var(--theme-text-secondary) !important; background-color: transparent !important; border-color: var(--theme-border-soft) !important; }
.modal-footer .btn-outline:hover, .modal-footer .btn-secondary:hover { color: var(--theme-text-primary) !important; background-color: var(--theme-bg-card-hover) !important; border-color: var(--theme-border-strong) !important; }
.modal-footer .btn-primary { background-color: var(--theme-accent-primary) !important; border-color: var(--theme-accent-primary) !important; color: var(--theme-text-primary) !important; }
.modal-footer .btn-primary:hover { background-color: var(--theme-accent-hover) !important; border-color: var(--theme-accent-hover) !important; }

/* Media Library Cards */
.media-library-grid {
    display: grid;
    /* For desktop: Aim for 4 columns. Calc subtracts gap from total width. */
    /* Adjust 240px if your cards have a different ideal width */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Start with responsive auto-fill */
    gap: 20px;
    margin-top: 20px;
}

.media-card {
    background-color: var(--theme-bg-card);
    border: 1px solid var(--theme-border-soft);
    border-radius: var(--theme-border-radius-medium);
    overflow: hidden; /* Important for containing the preview */
    box-shadow: var(--theme-shadow-soft);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.media-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--theme-shadow-medium);
}

.media-preview {
    width: 100%;
    /* Aspect ratio for preview area - adjust as needed for your media */
    aspect-ratio: 16 / 10; /* Common for images/videos, or use 4/3, 1/1 for square */
    /* height: 150px; /* Remove fixed height if using aspect-ratio */
    background-color: var(--theme-bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.media-preview img,
.media-preview video {
    max-width: 100%;
    max-height: 100%;
    width: 100%; /* Make image/video fill the preview area based on object-fit */
    height: 100%;
    object-fit: cover; /* Or 'contain' if you want to see the whole item without cropping */
}
.media-preview a, /* For PDF/File links */
.media-preview div { /* For 3D/File icon wrappers */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.media-preview i { /* Styling for Font Awesome icons in preview */
    font-size: 2.5rem; /* Adjust icon size */
    margin-bottom: 8px;
}
.media-preview i.fa-file-pdf { color: var(--theme-danger); }
.media-preview i.fa-cube, .media-preview i.fa-file { color: var(--theme-text-muted); }
.media-preview small { font-size: 0.8rem; color: var(--theme-text-muted); }


.media-info {
    padding: 12px 15px;
    text-align: left; /* Align text to left for a cleaner look */
    flex-grow: 1; /* Allow info to take space if card height is fixed elsewhere */
    display: flex;
    flex-direction: column; /* Stack info elements */
}
.media-name {
    font-weight: 500;
    font-size: 0.85rem;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--theme-text-primary);
    line-height: 1.3;
}
.media-date, .media-size {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
    line-height: 1.3;
    margin-bottom: 2px;
}
.media-actions {
    margin-top: auto; /* Push actions to the bottom */
    padding-top: 10px; /* Space above actions */
    display: flex; /* Align buttons if multiple */
    justify-content: flex-end; /* Align buttons to the right */
    gap: 8px;
}
.media-actions .btn-sm {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
}
.media-actions .btn-outline-danger {
    /* Uses existing .btn-outline and theme danger colors */
}


/* Specific Media Queries for column count - adjust breakpoints as needed */
@media (min-width: 1200px) { /* Large desktops - Aim for 4-5 columns */
    .media-library-grid {
        grid-template-columns: repeat(4, 1fr); /* Explicitly 4 columns */
        /* Or use auto-fill with a larger minmax if you prefer more responsiveness */
        /* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); */
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) { /* Desktops - Aim for 3-4 columns */
    .media-library-grid {
        grid-template-columns: repeat(3, 1fr); /* Explicitly 3 columns */
    }
}
@media (min-width: 768px) and (max-width: 991.98px) { /* Tablets - Aim for 2-3 columns */
    .media-library-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* More flexible for tablets */
        /* Or grid-template-columns: repeat(2, 1fr); for exactly 2 */
    }
}
@media (max-width: 767.98px) {
    .presentations-list-container {
        grid-template-columns: 1fr; /* Single column */
        gap: 15px;
    }
    .presentation-item-card { padding: 15px 20px; min-height: auto; }
    .presentation-item-card h5 { font-size: 1rem; }
}

/* In style.css */
model-viewer > .progress-bar {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--theme-accent-primary);
    position: absolute;
    bottom: 0;
    left:0;
    opacity: 0.7;
}
model-viewer > .progress-bar.hide {
    display: none;
}
model-viewer > .progress-bar > .update-bar {
    background-color: var(--theme-text-primary);
    width: 0%;
    height: 100%;
    transition: width 0.3s; /* Smooth progress update */
}
/* Optional styling for the AR button if needed */
model-viewer button[slot="ar-button"] {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    border: none;
    position: absolute;
    bottom: 16px;
    right: 16px;
    padding: 8px 12px;
    font-family: var(--theme-font-family);
    font-size: 0.8rem;
    color: var(--theme-bg-deep);
    cursor: pointer;
}
model-viewer button[slot="ar-button"]:hover {
    background-color: white;
}

/* ============================================= */
/* DASHBOARD - EDIT PRESENTATION PAGE            */
/* ============================================= */
.presentation-editor-container .dashboard-card { /* Style for individual slide items in editor */
    background-color: var(--theme-bg-surface); /* Slightly different background for nested cards */
    border: 1px dashed var(--theme-border-soft); /* Dashed border for editable items */
}

.presentation-element-item h5 {
    font-size: 1rem;
    color: var(--theme-text-secondary);
    margin-bottom: 10px;
    font-weight: 500;
}
.presentation-element-item p small {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
}
.presentation-element-item .remove-element-btn {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    margin-top: 10px;
    float: right; /* Example positioning */
}

/* Styles for view_presentation.php (from previous response, ensure they are there) */
/* body { background-color: var(--theme-bg-deep); ... } /* Already there */
.presentation-viewer-main { max-width: 1200px; width:90%; margin: 20px auto; padding: 20px; background-color: var(--theme-bg-surface); border-radius: var(--theme-border-radius-large); box-shadow: var(--theme-shadow-medium); flex-grow: 1; display: flex; flex-direction: column; }
.presentation-header { padding-bottom: 15px; margin-bottom:20px; border-bottom: 1px solid var(--theme-border-soft); display:flex; justify-content: space-between; align-items:center;}
.presentation-title { color: var(--theme-text-primary); font-size: 1.6rem; margin-bottom: 0;}
.presentation-slide-container { flex-grow: 1; display: flex; position: relative; background-color: var(--theme-bg-deep); border-radius:var(--theme-border-radius-medium); overflow:hidden;}
.presentation-slide { width: 100%; height: auto; display: none; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; aspect-ratio: 16 / 9; }
.presentation-slide.active { display: flex; }
.presentation-slide img, .presentation-slide video, .presentation-slide model-viewer { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--theme-border-radius-small); }
.presentation-slide .text-content { width:100%; height:100%; overflow-y:auto; padding:10px; font-size:1.1rem; line-height:1.6;}
.presentation-slide .text-content h3 { font-size: 1.5rem; color: var(--theme-accent-primary); margin-bottom: 0.5em;}
.slide-navigation { display: flex; justify-content: center; align-items: center; padding: 15px 0; }
.slide-nav-btn { background-color: var(--theme-accent-primary); color: white; border: none; padding: 8px 15px; margin: 0 10px; border-radius: var(--theme-border-radius-small); cursor: pointer; font-size: 0.9rem; }
.slide-nav-btn:disabled { background-color: var(--theme-text-muted); cursor: not-allowed; }
.slide-nav-btn:hover:not(:disabled) { background-color: var(--theme-accent-hover); }
.slide-counter { font-size: 0.9rem; color: var(--theme-text-secondary); }
.presentation-actions { margin-top: 20px; padding-top:20px; border-top: 1px solid var(--theme-border-soft); text-align: right; display:flex; justify-content:space-between; align-items:center; }
.presentation-actions .action-group a { margin-left: 10px; }
.hotspot-dot-display { position: absolute; width: 14px; height: 14px; background-color: var(--theme-accent-primary); border-radius: 50%; transform: translate(-50%, -50%); cursor: pointer; border: 2px solid white; box-shadow: 0 0 8px rgba(0,0,0,0.5); z-index: 10; }
.hotspot-popup { position: absolute; background-color: var(--theme-bg-card); color: var(--theme-text-secondary); padding: 10px 15px; border-radius: var(--theme-border-radius-small); box-shadow: var(--theme-shadow-soft); z-index: 20; display: none; min-width: 150px; max-width: 300px; font-size: 0.9rem; border: 1px solid var(--theme-border-soft); }

.dashboard-card .admin-table {
    margin-top: 0; /* Remove top margin if table is first element in card */
    box-shadow: none; /* Remove shadow if card already has one */
    border: none; /* Remove border if card already has one */
}
.dashboard-card .admin-table thead tr {
    /* Ensure header background matches card surface or slightly darker */
    background-color: var(--theme-bg-surface); /* or var(--theme-bg-card-hover) */
}

/* Responsive table if not already handled by Bootstrap or other means */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* General styling for Bootstrap's .row and .col-md-6 if you use them in forms */
.row {
    --bs-gutter-x: 1.5rem; /* Match Bootstrap or your theme's gutter */
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}
.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}
@media (min-width: 768px) {
    .presentations-list-container {
        grid-template-columns: repeat(2, 1fr); /* Two columns */
    }
}

@media (min-width: 992px) {
    .presentations-list-container {
        grid-template-columns: repeat(3, 1fr); /* Three columns */
    }
}

@media (min-width: 1200px) {
    .presentations-list-container {
        grid-template-columns: repeat(4, 1fr); /* Four columns */
    }
}
/* Overriding or enhancing .admin-table for dashboard context */
.dashboard-main-content .admin-table {
    width: 100%;
    border-collapse: separate; /* Allows for border-spacing and rounded corners on table */
    border-spacing: 0;
    margin-top: 0; /* Remove if card handles padding */
    font-size: 0.875rem; /* Slightly smaller font for table data */
    background-color: var(--theme-bg-card); /* Ensure table itself has card background */
    border-radius: var(--theme-border-radius-medium); /* Rounded corners for the table if not wrapped in p-0 card */
    /* box-shadow: none; /* If card provides shadow */
}

.dashboard-main-content .admin-table thead th {
    background-color: var(--theme-bg-surface); /* Slightly different header bg */
    color: var(--theme-text-secondary);
    font-weight: 500; /* Less bold header text */
    text-align: left;
    padding: 12px 15px;
    border-bottom: 2px solid var(--theme-border-soft); /* Softer border */
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}
.dashboard-main-content .admin-table thead th:first-child {
    border-top-left-radius: var(--theme-border-radius-medium);
}
.dashboard-main-content .admin-table thead th:last-child {
    border-top-right-radius: var(--theme-border-radius-medium);
}

.dashboard-main-content .admin-table tbody td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--theme-border-soft);
    color: var(--theme-text-secondary);
    vertical-align: middle;
}

.dashboard-main-content .admin-table tbody tr {
    transition: background-color 0.15s ease-in-out;
}
.dashboard-main-content .admin-table tbody tr:hover {
    background-color: var(--theme-bg-card-hover); /* Hover effect for rows */
}
.dashboard-main-content .admin-table tbody tr:last-child td {
    border-bottom: none; /* No border for the last row */
}
.dashboard-main-content .admin-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--theme-border-radius-medium);
}
.dashboard-main-content .admin-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--theme-border-radius-medium);
}

.dashboard-main-content .admin-table td a { /* Links within table cells */
    color: var(--theme-accent-secondary);
    font-weight: 500;
}
.dashboard-main-content .admin-table td a:hover {
    color: var(--theme-text-primary);
    text-decoration: underline;
}

.dashboard-main-content .admin-table .actions-cell {
    text-align: right; /* Align action buttons to the right */
    white-space: nowrap; /* Prevent buttons from wrapping */
}
.dashboard-main-content .admin-table .actions-cell .btn-sm {
    padding: 0.3rem 0.6rem; /* Consistent small button padding */
    font-size: 0.8rem;
    line-height: 1.2; /* Ensure icon and text align well */
    margin-left: 5px; /* Space between action buttons */
}
.dashboard-main-content .admin-table .actions-cell .btn-sm i {
    margin-right: 0; /* Remove margin if only icon */
}
.dashboard-main-content .admin-table .actions-cell .btn-sm.me-1 i {
    margin-right: 4px !important; /* Add back margin if text follows icon */
}

/* Adjustments for dashboard card containing a table */
.dashboard-card.p-0 .table-responsive {
    /* If card has p-0, the table-responsive might need rounded corners if table itself doesn't have them */
    /* border-radius: var(--theme-border-radius-large); */
    /* overflow: hidden; */ /* To clip table corners */
}
.dashboard-card .table-responsive .admin-table {
    border-radius: 0; /* Table inside card doesn't need its own radius if card handles it */
}
.form-control,
.form-select {
    display: block;
    width: 100%;
    padding: 10px 14px; /* Your theme's padding */
    font-size: 0.9rem;   /* Your theme's font-size */
    font-weight: 400;
    line-height: 1.5;
    color: var(--theme-text-primary);
    background-color: var(--theme-bg-surface); /* Your theme's input background */
    background-clip: padding-box;
    border: 1px solid var(--theme-border-soft); /* Your theme's input border */
    appearance: none; /* Remove default system appearance for select */
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: var(--theme-border-radius-medium); /* Your theme's border radius */
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Ensure search form elements look good too */
.search-form-container input[type="text"].form-control {
    /* Already styled by global .form-control, can add specific tweaks */
    font-size: 0.9rem;
}
.search-form-container .btn {
    /* Already styled by global .btn, can add specific tweaks */
    font-size: 0.9rem;
}
.search-form-container .btn i {
    margin-right: 6px;
}
.dashboard-main-content .whitelabel-form .dashboard-card {
    /* If you want nested cards to look slightly different or have less margin */
    /* margin-bottom: 20px; */
}
.dashboard-main-content .whitelabel-form .card-title-large {
    /* Already styled globally, this is just a reminder */
}
.current-logo-preview img {
    max-height: 60px;
    background: var(--theme-bg-surface); /* Ensure good contrast for potentially light logos */
    padding: 8px;
    border-radius: var(--theme-border-radius-small);
    border: 1px solid var(--theme-border-soft);
    vertical-align: middle;
}
.form-control-color { /* Bootstrap class, or your own for input[type="color"] */
    width: 70px; /* Or adjust as needed */
    height: calc(1.5em + 0.75rem + 2px); /* Match other form-control heights */
    padding: 0.25rem 0.5rem; /* Minimal padding */
    border-radius: var(--theme-border-radius-medium);
    border: 1px solid var(--theme-border-soft);
    background-color: var(--theme-bg-surface); /* Match other inputs */
    cursor: pointer;
}
.form-control-color:focus {
    border-color: var(--theme-accent-primary);
    box-shadow: 0 0 0 3px rgba(138, 63, 252, 0.2); /* Use your theme's focus glow */
}

/* Ensure file input gets some reasonable styling */
.dashboard-main-content .auth-form input[type="file"].form-control {
    padding: 8px 12px; /* Adjust padding */
    line-height: 1.5;
    /* You might not be able to style the "Choose File" button itself much with CSS */
}

/* Adjust spacing for the d-flex group with color picker and hex input */
.whitelabel-form .d-flex.align-items-center .form-control {
    height: calc(1.5em + 0.75rem + 2px); /* Match color picker height if needed */
}
.color-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Space between elements */
}
.color-input-group input[type="color"].form-control-color {
    padding: 0.2rem; /* Minimal padding */
    border-radius: var(--theme-border-radius-small);
    border: 1px solid var(--theme-border-soft);
    background-color: var(--theme-bg-surface);
    min-width: 40px; /* Ensure it's clickable */
    height: calc(1.5em + 0.75rem + 2px); /* Match other form-control heights */
    cursor: pointer;
}
.color-input-group input[type="color"].form-control-color:focus {
    border-color: var(--theme-accent-primary);
    box-shadow: 0 0 0 3px rgba(138, 63, 252, 0.2);
}
.color-input-group input[type="text"].hex-color-input {
    max-width: 100px; /* Or adjust as needed */
    font-size: 0.85rem;
    /* It will inherit .form-control styles already */
}
.color-input-group .btn-default-color {
    /* It will inherit .btn and .btn-sm .btn-outline styles */
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem; /* Adjust padding */
}
.form-select {
    display: block;
    width: 100%;
    padding: 10px 14px; /* Match your .form-control padding */
    font-size: 0.9rem;   /* Match your .form-control font-size */
    font-weight: 400;  /* Standard font weight */
    line-height: 1.5;  /* Standard line height */
    color: var(--theme-text-primary); /* Text color */
    background-color: var(--theme-bg-surface); /* Background to match inputs */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A8A5B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); /* Custom SVG arrow, color matches --theme-text-secondary */
    background-repeat: no-repeat;
    background-position: right 0.75rem center; /* Bootstrap's default position */
    background-size: 16px 12px; /* Bootstrap's default size */
    border: 1px solid var(--theme-border-soft); /* Border to match inputs */
    border-radius: var(--theme-border-radius-medium); /* Rounded corners to match inputs */
    appearance: none; /* Remove default system appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; /* Match input transitions */
}

.form-select:focus {
    border-color: var(--theme-accent-primary); /* Focus border color */
    outline: 0;
    box-shadow: 0 0 0 3px rgba(138, 63, 252, 0.2); /* Focus shadow, match your input focus */
}

/* For disabled state if you use it */
.form-select:disabled {
    background-color: var(--theme-bg-deep); /* Darker, less interactive background */
    opacity: 0.7;
}

/* Option styling (limited, but can help with dark themes) */
.form-select option {
    background-color: var(--theme-bg-surface); /* Or var(--theme-bg-deep) if you prefer darker dropdown options */
    color: var(--theme-text-primary);
}
.dashboard-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Responsive columns */
    gap: 20px; /* Space between cards */
    margin-top: 30px;
}

.overview-card {
    background-color: var(--theme-bg-card);
    padding: 20px 25px;
    border-radius: var(--theme-border-radius-medium);
    border: 1px solid var(--theme-border-soft);
    box-shadow: var(--theme-shadow-soft);
    text-decoration: none; /* If the whole card is a link */
    color: var(--theme-text-secondary); /* Default text color inside card */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column; /* Align items vertically */
}

.overview-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--theme-shadow-medium);
}

.overview-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.overview-card-icon {
    font-size: 1.8rem; /* Icon size */
    color: var(--theme-accent-primary); /* Accent color for icon */
    margin-right: 15px;
    width: 40px; /* Give icon some space */
    text-align: center;
}

.overview-card-title {
    font-size: 1.1rem; /* Title size for the card stat */
    color: var(--theme-text-primary);
    font-weight: 500;
    margin-bottom: 0;
}

.overview-card-stat {
    font-size: 2.2rem; /* Big number for the stat */
    font-weight: 600;
    color: var(--theme-text-primary);
    margin-bottom: 8px;
    line-height: 1.1;
}

.overview-card-description {
    font-size: 0.85rem;
    color: var(--theme-text-muted);
    line-height: 1.5;
    margin-bottom: 0;
    flex-grow: 1; /* Allow description to take space if card heights vary due to content */
}

.overview-card-link {
    display: inline-block; /* Or block if you want it full width */
    margin-top: auto; /* Pushes link to the bottom if card content varies */
    padding-top: 15px; /* Space above link */
    font-size: 0.9rem;
    color: var(--theme-accent-secondary);
    text-decoration: none;
    font-weight: 500;
}
.overview-card-link:hover {
    color: var(--theme-text-primary);
    text-decoration: underline;
}
.overview-card-link i {
    margin-left: 5px;
}
.page-header-breadcrumbs {
    font-size: 0.9rem; /* Iets groter voor betere leesbaarheid */
    margin-top: 0.4rem; /* Kleine ruimte tussen titel en breadcrumbs */
    margin-bottom: 1.5rem; /* Meer ruimte na de breadcrumbs, voor de zoekbalk */
}

.custom-folder-breadcrumb {
    --bs-breadcrumb-divider: '/'; /* Definieert het scheidingsteken voor Bootstrap 5 */
    list-style: none !important;   /* Verwijder eventuele standaard list-style (zoals nummers) */
    padding-left: 0 !important;   /* Verwijder default padding */
    margin-bottom: 0 !important;  /* Geen extra marge onder de breadcrumb-lijst zelf */
    display: flex;                /* Items horizontaal uitlijnen */
    flex-wrap: wrap;              /* Toestaan dat items wrappen op kleine schermen */
    align-items: center;          /* Verticaal centreren als items wrappen */
    background-color: transparent !important; /* Zekerstellen dat achtergrond transparant is */
}

/* Stijl voor het scheidingsteken zelf (de '/') */
.custom-folder-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    /* content: var(--bs-breadcrumb-divider); Bootstrap 5 regelt dit al via de variabele hierboven */
    padding-right: 0.6rem; /* Ruimte RECHTS van het scheidingsteken (vóór de tekst van het huidige item) */
    color: #a0a0c0;       /* Een gedempte kleur voor de '/', pas aan naar wens */
                           /* Zorg ervoor dat deze kleur voldoende contrasteert met je achtergrond */
}

.presentation-card-footer.separated-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--theme-border-soft, #2a344a);
    background-color: rgba(0,0,0,0.1);
}

/* This is the container for the folder's Edit and Delete buttons */
.folder-actions-footer .presentation-folder-actions-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px space between the buttons */
}

.btn-card-action {
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--theme-text-secondary, #a9a9a9);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
/* Style for the icon inside the button */
.btn-card-action i {
    font-size: 0.85rem;
}

/* Generic hover state for all action buttons */
.btn-card-action:hover {
    background-color: var(--theme-bg-card-hover, #181522);
    color: var(--theme-text-primary, #fff);
}


/* --- Specific hover colors --- */

/* Hover color for the DELETE button */
.btn-card-action.delete-btn:hover {
    background-color: rgba(220, 53, 69, 0.1); /* Red background tint */
    color: #dc3545; /* Red icon color */
    border-color: rgba(220, 53, 69, 0.3);
}

/* Hover color for the RENAME/EDIT button */
.btn-card-action.rename-btn:hover {
    background-color: rgba(138, 63, 252, 0.1); /* Purple background tint */
    color: var(--theme-accent-primary, #8a3ffc); /* Purple icon color */
    border-color: rgba(138, 63, 252, 0.3);
}

/* Voeg ruimte toe LINKS van het scheidingsteken */
.custom-folder-breadcrumb .breadcrumb-item + .breadcrumb-item {
    padding-left: 0.6rem; /* Ruimte LINKS van het scheidingsteken (ná de tekst van het vorige item) */
}

/* Stijl voor de links in de breadcrumbs */
.custom-folder-breadcrumb .breadcrumb-item a {
    color: #c8caff; /* Lichter paars/blauw voor links, voor goede zichtbaarheid */
    text-decoration: none;
    font-weight: 400; /* Normaal gewicht voor niet-actieve items */
}

.custom-folder-breadcrumb .breadcrumb-item a:hover {
    color: #e0e0ff; /* Iets helderder bij hover */
    text-decoration: underline;
}

/* Stijl voor het actieve (huidige) breadcrumb-item */
.custom-folder-breadcrumb .breadcrumb-item.active {
    color: #f0f0f0;   /* Helderder wit/lichtgrijs voor het actieve item */
    font-weight: 600; /* Iets dikker lettertype voor het actieve item */
}
.slide-element.selected {
    outline: 2px solid var(--theme-accent-primary) !important;
    outline-offset: 1px; /* Zorgt dat outline iets buiten de border valt voor duidelijkheid */
    box-shadow: 0 0 8px var(--theme-accent-border); /* Subtiele gloed */
    z-index: 1000 !important; /* Moet boven andere niet-geselecteerde elementen komen */
}

/* Optioneel: resize handles (vereist JS om ze toe te voegen en functioneel te maken) */
.resize-handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: var(--theme-accent-primary);
    border: 1px solid var(--theme-text-primary);
    border-radius: 50%;
    z-index: 1001; /* Boven het geselecteerde element */
}
.resize-handle.nw { top: -4px; left: -4px; cursor: nwse-resize; }
.resize-handle.ne { top: -4px; right: -4px; cursor: nesw-resize; }
.resize-handle.sw { bottom: -4px; left: -4px; cursor: nesw-resize; }
.resize-handle.se { bottom: -4px; right: -4px; cursor: nwse-resize; }
/* Voeg meer handles toe (n, s, e, w) indien nodig */
/* ============================================= */
/* PRESENTATION EDITOR - GAMMA.APP STYLE LAYOUT  */
/* ============================================= */
.dashboard-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 25px;
}