/* ================================================================
   Obscura CMS — app.css
   Custom overrides on top of Bootstrap 5.3
   ================================================================ */

/* ----------------------------------------------------------------
   CSS custom properties (both themes inherit from :root)
   ---------------------------------------------------------------- */
:root {
    --sidebar-width      : 240px;
    --sidebar-bg         : #1a1d23;
    --sidebar-color      : #c9ced8;
    --sidebar-active-bg  : rgba(99,102,241,.18);
    --sidebar-active-color: #6366f1;
    --topbar-height      : 54px;
    --card-radius        : .75rem;
    --item-thumb-height  : 160px;
    --collection-cover-h : 140px;
    --transition         : .18s ease;
}

[data-bs-theme="dark"] {
    --sidebar-bg         : #111318;
    --sidebar-color      : #a0a6b4;
}

/* ----------------------------------------------------------------
   Layout
   ---------------------------------------------------------------- */
body { overflow-x: hidden; }

#wrapper { min-height: 100vh; }

/* ---- Sidebar ---- */
#sidebar {
    width              : var(--sidebar-width);
    min-height         : 100vh;
    background         : var(--sidebar-bg);
    color              : var(--sidebar-color);
    transition         : transform var(--transition);
    z-index            : 1040;
    flex-shrink        : 0;
}

#sidebar .nav-link {
    color       : var(--sidebar-color);
    border-radius: .5rem;
    padding     : .5rem .75rem;
    font-size   : .875rem;
    transition  : background var(--transition), color var(--transition);
}

#sidebar .nav-link:hover,
#sidebar .nav-link.active {
    background : var(--sidebar-active-bg);
    color      : var(--sidebar-active-color);
}

#sidebar .nav-link i { width: 1.2em; text-align: center; }

/* Mobile: slide-in sidebar */
@media (max-width: 991.98px) {
    #sidebar {
        position  : fixed;
        top       : 0; left: 0; bottom: 0;
        transform : translateX(-100%);
    }
    #sidebar.sidebar--open { transform: translateX(0); }
    #page-content { width: 100%; }
}

/* ---- Top bar ---- */
.topbar {
    height     : var(--topbar-height);
    background : var(--bs-body-bg);
    position   : sticky;
    top        : 0;
    z-index    : 100;
}

/* ----------------------------------------------------------------
   Cards
   ---------------------------------------------------------------- */
.card { border-radius: var(--card-radius); border: 1px solid var(--bs-border-color); }

/* Stat cards */
.stat-card { transition: box-shadow var(--transition); }
.stat-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.08); }

.stat-icon {
    width        : 48px; height: 48px;
    border-radius: .6rem;
    display      : flex;
    align-items  : center;
    justify-content: center;
    flex-shrink  : 0;
}

/* Collection cards */
.collection-card { transition: box-shadow var(--transition), transform var(--transition); }
.collection-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1); transform: translateY(-2px); }

.collection-cover {
    width       : 100%;
    height      : var(--collection-cover-h);
    object-fit  : cover;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.collection-cover-placeholder {
    height      : var(--collection-cover-h);
    background  : var(--bs-secondary-bg);
    border-radius: var(--card-radius) var(--card-radius) 0 0;
}

/* ----------------------------------------------------------------
   Item cards
   ---------------------------------------------------------------- */
.item-card {
    position   : relative;
    transition : box-shadow var(--transition);
}
.item-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.1); }

/* Thumbnail */
.item-thumb {
    height     : var(--item-thumb-height);
    overflow   : hidden;
    cursor     : pointer;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    background : var(--bs-secondary-bg);
}
.item-thumb img { transition: transform .3s ease; }
.item-thumb:hover img { transform: scale(1.04); }

/* Checkbox overlay */
.item-select-overlay {
    position : absolute;
    top: .5rem; left: .5rem;
    z-index  : 1;
    opacity  : 0;
    transition: opacity var(--transition);
}
.item-card:hover .item-select-overlay,
.item-select-overlay:has(:checked) { opacity: 1; }

/* List view */
.view-list .item-col { flex: 0 0 100%; max-width: 100%; }
.view-list .item-card { flex-direction: row; }
.view-list .item-thumb { width: 120px; height: 80px; flex-shrink: 0; border-radius: var(--card-radius) 0 0 var(--card-radius); }
.view-list .item-card .card-body { padding: .5rem .75rem; }

/* Buttons */
.btn-xs { padding: .15rem .35rem; font-size: .75rem; line-height: 1.4; }
.btn-ghost { background: transparent; border: none; color: inherit; }
.btn-ghost:hover { background: var(--bs-secondary-bg); }

/* Favorite button */
.btn-fav { color: var(--bs-secondary-color); }
.btn-fav.active, .btn-fav:hover { color: #f59e0b; }

/* Tags */
.tag-badge {
    background : var(--bs-secondary-bg);
    color      : var(--bs-secondary-color);
    font-size  : .7rem;
    font-weight: 500;
    border-radius: 20px;
    padding    : .2em .55em;
}

/* ----------------------------------------------------------------
   Drop zone
   ---------------------------------------------------------------- */
.drop-zone {
    border     : 2px dashed var(--bs-border-color);
    cursor     : pointer;
    transition : border-color var(--transition), background var(--transition);
    min-height : 120px;
}
.drop-zone:hover,
.drop-zone--active {
    border-color: var(--bs-primary);
    background  : rgba(99,102,241,.05);
}

/* ----------------------------------------------------------------
   Type radio buttons (item modal)
   ---------------------------------------------------------------- */
.type-btn {
    cursor     : pointer;
    padding    : .5rem;
    border-radius: .5rem;
    font-size  : .8rem;
    transition : background var(--transition), color var(--transition), border-color var(--transition);
}
input[name="type"]:checked + .type-btn {
    background  : rgba(99,102,241,.12);
    border-color: #6366f1;
    color       : #6366f1;
}

/* ----------------------------------------------------------------
   Auth page
   ---------------------------------------------------------------- */
.auth-card { border-radius: var(--card-radius); }

/* ----------------------------------------------------------------
   Utilities
   ---------------------------------------------------------------- */
.min-w-0 { min-width: 0; }
.object-fit-cover { object-fit: cover; }

/* Scrollbar (Webkit) */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: 3px; }

/* ----------------------------------------------------------------
   Sidebar backdrop (mobile)
   ---------------------------------------------------------------- */
.sidebar-backdrop {
    display         : none;
    position        : fixed;
    inset           : 0;
    background      : rgba(0,0,0,.55);
    z-index         : 1039;
    backdrop-filter : blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.sidebar-backdrop.show { display: block; }

/* ----------------------------------------------------------------
   Mobile bottom navigation
   ---------------------------------------------------------------- */
.mobile-bottom-nav {
    position        : fixed;
    bottom          : 0; left: 0; right: 0;
    height          : calc(60px + env(safe-area-inset-bottom));
    padding-bottom  : env(safe-area-inset-bottom);
    background      : var(--sidebar-bg);
    border-top      : 1px solid var(--bs-border-color);
    display         : flex;
    align-items     : stretch;
    z-index         : 1050;
}

.mobile-nav-item {
    flex            : 1;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : 3px;
    text-decoration : none;
    color           : var(--sidebar-color);
    font-size       : .62rem;
    font-weight     : 500;
    padding         : 6px 2px;
    transition      : color .15s ease;
    border          : none;
    background      : none;
    cursor          : pointer;
    -webkit-tap-highlight-color: transparent;
}
.mobile-nav-item i { font-size: 1.3rem; line-height: 1; }
.mobile-nav-item.active,
.mobile-nav-item:hover { color: var(--sidebar-active-color); }

/* Larger touch targets for all interactive elements on mobile  */
@media (max-width: 991.98px) {
    /* Pad main content above the bottom nav */
    main {
        padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }

    /* Topbar: hide page title on very small screens to save space */
    .topbar h6 { display: none; }

    /* Buttons – min 44 px touch target */
    .btn { min-height: 38px; }
    .btn-sm { min-height: 32px; }

    /* Collection / item cards: 2-col minimum grid */
    .item-thumb { --item-thumb-height: 130px; }

    /* Modals full-screen on mobile */
    .modal-dialog:not(.modal-fullscreen) {
        margin: .5rem;
        max-width: calc(100vw - 1rem);
    }

    /* Fix toast position above bottom nav */
    .toast-container {
        bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    }
}