/* Jasmine Auto — admin panel and staff login */
:root {
    --navy: #0b2a4a; --navy-2: #123e6b; --ink: #172233; --steel: #6b7787;
    --mist: #eef1f4; --paper: #f7f8fa; --plate: #f7c948; --stamp: #b3261e;
    --nav-w: 240px; --radius: 10px;
    --bs-primary: #123e6b; --bs-primary-rgb: 18, 62, 107; --bs-link-color: #123e6b;
}
[x-cloak] { display: none !important; }
body.admin { font-family: 'Manrope', system-ui, sans-serif; background: var(--paper); color: var(--ink); margin: 0; }
.btn-primary { --bs-btn-bg: var(--navy-2); --bs-btn-border-color: var(--navy-2); --bs-btn-hover-bg: var(--navy); --bs-btn-hover-border-color: var(--navy); --bs-btn-active-bg: var(--navy); font-weight: 700; }
.form-label { font-weight: 700; font-size: .82rem; color: var(--steel); margin-bottom: .25rem; }
.form-control:focus, .form-select:focus { border-color: var(--navy-2); box-shadow: 0 0 0 .2rem rgba(18,62,107,.15); }

/* Sidebar */
.admin-nav { position: fixed; inset: 0 auto 0 0; width: var(--nav-w); background: var(--navy); color: #dbe3ec; display: flex; flex-direction: column; z-index: 1030; transition: transform .2s; }
.admin-nav__brand { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem; color: #fff; text-decoration: none; font-weight: 800; border-bottom: 1px solid rgba(255,255,255,.1); }
.admin-nav__brand img { border-radius: 50%; }
.admin-nav__brand span { display: flex; flex-direction: column; line-height: 1.1; }
.admin-nav__brand small { color: var(--plate); font-size: .7rem; font-weight: 700; }
.admin-nav nav { padding: .75rem 0; flex: 1; overflow-y: auto; }
.admin-nav nav a, .admin-nav__foot a, .admin-nav__foot button { display: flex; align-items: center; gap: .7rem; padding: .6rem 1.1rem; color: #cfd8e3; text-decoration: none; font-weight: 600; font-size: .92rem; border-left: 3px solid transparent; background: none; border-top: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left; }
.admin-nav nav a:hover, .admin-nav__foot a:hover, .admin-nav__foot button:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-nav nav a.active { background: rgba(255,255,255,.1); color: #fff; border-left-color: var(--plate); }
.admin-nav .bi { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.admin-nav__foot { border-top: 1px solid rgba(255,255,255,.1); padding: .5rem 0; }

/* Main */
.admin-main { margin-left: var(--nav-w); min-height: 100vh; display: flex; flex-direction: column; }
.admin-top { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 1rem; padding: .75rem 1.5rem; background: #fff; border-bottom: 1px solid #dfe4ea; }
.admin-top h1 { font-size: 1.15rem; font-weight: 800; margin: 0; color: var(--navy); }
.admin-body { padding: 1.5rem; flex: 1; max-width: 1500px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.table thead th { font-size: .78rem; color: var(--steel); font-weight: 700; border-bottom-width: 2px; }
.table td { vertical-align: middle; }
.alert { border-radius: var(--radius); }

/* Panels & tiles */
.panel { background: #fff; border: 1px solid #dfe4ea; border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem; }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.panel__head h2 { font-size: 1rem; font-weight: 800; margin: 0; color: var(--navy); }
.panel__head a { font-size: .85rem; font-weight: 700; }
.sticky-side { position: sticky; top: 76px; }
.stat-tile { display: flex; flex-direction: column; gap: .15rem; background: #fff; border: 1px solid #dfe4ea; border-left: 4px solid var(--navy-2); border-radius: var(--radius); padding: 1rem; text-decoration: none; color: var(--ink); height: 100%; transition: box-shadow .15s; }
.stat-tile:hover { box-shadow: 0 8px 24px rgba(11,42,74,.10); }
.stat-tile:hover { border-color: var(--navy-2); }
.stat-tile .bi { color: var(--navy-2); font-size: 1.3rem; }
.stat-tile strong { font-size: 1.5rem; font-weight: 800; color: var(--navy); line-height: 1.1; }
.stat-tile span { font-size: .8rem; color: var(--steel); font-weight: 600; }
.mini-card { display: block; text-decoration: none; color: var(--ink); border: 1px solid #dfe4ea; border-radius: 8px; overflow: hidden; background: #fff; font-size: .8rem; }
.mini-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.mini-card span, .mini-card strong, .mini-card em { display: block; padding: 0 .6rem; }
.mini-card span { padding-top: .4rem; color: var(--steel); font-size: .72rem; font-weight: 700; }
.mini-card strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-card em { font-style: normal; color: var(--steel); padding-bottom: .5rem; }

/* Stock table */
.stock-table { background: #fff; border: 1px solid #dfe4ea; border-radius: var(--radius); overflow: hidden; }
.stock-table th { font-size: .78rem; color: var(--steel); text-transform: none; }
.stock-thumb { width: 72px; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; }
.status-select { min-width: 150px; font-weight: 700; }
.status-badge, .status-select { border-radius: 6px; }
.status-badge.status-new, .status-select.status-available { background: #e3f3eb; color: #1c7c54; border-color: #bfe3d0; }
.status-badge.status-contacted, .status-select.status-reserved { background: #fff4d1; color: #7a5a00; border-color: #f0dd9a; }
.status-select.status-in_transit, .status-select.status-coming_soon { background: #e2ecf7; color: var(--navy-2); border-color: #bfd3ec; }
.status-badge.status-closed, .status-select.status-sold { background: #f6e3e1; color: var(--stamp); border-color: #ecc3bf; }
.status-badge { font-weight: 700; }

/* Photo grid */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.photo-item { position: relative; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: var(--mist); cursor: grab; }
.photo-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.photo-item.is-cover { border-color: var(--plate); }
.photo-item.is-cover::after { content: "Cover"; position: absolute; top: .35rem; left: .35rem; background: var(--plate); color: var(--ink); font-size: .68rem; font-weight: 800; padding: .1rem .45rem; border-radius: 4px; }
.photo-item.is-dragging { opacity: .4; }
.photo-item__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: .25rem; justify-content: flex-end; padding: .35rem; background: linear-gradient(transparent, rgba(0,0,0,.55)); opacity: 0; }
.photo-item:hover .photo-item__bar, .photo-item:focus-within .photo-item__bar { opacity: 1; }

/* Login */
body.login-page { font-family: 'Manrope', system-ui, sans-serif; min-height: 100vh; margin: 0; display: grid; place-items: center; background: radial-gradient(120% 90% at 10% 0%, #123e6b 0%, #0b2a4a 55%, #071c33 100%); padding: 1rem; }
.login-card { width: 100%; max-width: 380px; background: #fff; border-radius: 14px; padding: 2rem; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.login-logo { display: block; width: 150px; height: auto; margin: 0 auto 1.25rem; border-radius: 8px; }
.login-card h1 { font-weight: 800; color: var(--navy); }

@media (max-width: 991px) {
    .admin-nav { transform: translateX(-100%); }
    .admin-nav.is-open { transform: none; box-shadow: 0 0 0 100vw rgba(0,0,0,.4); }
    .admin-main { margin-left: 0; }
    .admin-body { padding: 1rem; }
    .sticky-side { position: static; }
}