/* Q-Max admin panel */
:root { --qm-maroon: #5F080A; --qm-maroon-2: #7A1B1D; --qm-red: #B9282C; --qm-gold: #F3C102; --qm-dark: #2a0405; }
body { font-family: "Open Sans", sans-serif; font-size: 14px; background: #f4f5f7; color: #333; }
a { color: var(--qm-maroon-2); }
.btn, .form-control, .form-select, .card, .alert, .input-group-text { border-radius: 2px; }
.btn-maroon { background: var(--qm-maroon); color: #fff; border-color: var(--qm-maroon); }
.btn-maroon:hover, .btn-maroon:focus, .btn-maroon.show { background: var(--qm-maroon-2); color: #fff; border-color: var(--qm-maroon-2); }
.btn-outline-maroon { border-color: var(--qm-maroon); color: var(--qm-maroon); }
.btn-outline-maroon:hover { background: var(--qm-maroon); color: #fff; }
.form-control:focus, .form-select:focus { border-color: var(--qm-maroon-2); box-shadow: 0 0 0 .15rem rgba(95,8,10,.15); }
.form-label { font-weight: 600; font-size: 13px; margin-bottom: 4px; }

.adm-wrap { display: flex; min-height: 100vh; }
.adm-side { width: 245px; flex: 0 0 245px; background: var(--qm-dark); color: #ddd; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.adm-brand { display: flex; align-items: center; gap: 10px; padding: 16px 18px; background: var(--qm-maroon); color: #fff; text-decoration: none; font-weight: 700; font-size: 16px; border-bottom: 3px solid var(--qm-gold); }
.adm-brand img { height: 38px; background: #fff; border-radius: 50%; padding: 2px; }
.adm-brand .mk { width: 38px; height: 38px; border-radius: 50%; background: var(--qm-gold); color: var(--qm-maroon); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.adm-brand:hover { color: var(--qm-gold); }
.adm-nav { padding: 8px 0 30px; }
.adm-nav-head { padding: 16px 20px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #a98a8a; }
.adm-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 20px; color: #e6d6d6; text-decoration: none; font-weight: 600; font-size: 13.5px; border-radius: 6px; margin: 1px 10px; }
.adm-nav a i { width: 18px; text-align: center; color: #c79a9a; }
.adm-nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.adm-nav a.active { background: var(--qm-maroon); color: #fff; }
.adm-nav a.active i { color: var(--qm-gold); }

.adm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-top { background: #fff; display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid #e5e5e5; position: sticky; top: 0; z-index: 50; }
.adm-title { font-size: 19px; font-weight: 700; margin: 0; color: var(--qm-maroon); }
.adm-content { padding: 24px; flex: 1; }
.adm-foot { padding: 14px 24px; font-size: 12px; color: #888; border-top: 1px solid #e5e5e5; background: #fff; }

.panel { background: #fff; border: 1px solid #e5e5e5; margin-bottom: 22px; }
.panel-head { padding: 12px 18px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.panel-head h2 { font-size: 15px; font-weight: 700; margin: 0; color: #333; }
.panel-body { padding: 18px; }
.table-adm { margin: 0; }
.table-adm th { background: #faf6f6; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #666; white-space: nowrap; border-bottom: 2px solid #eadede; }
.table-adm td { vertical-align: middle; }
.thumb-sm { width: 54px; height: 54px; object-fit: cover; border: 1px solid #ddd; }
.thumb-wide { width: 110px; height: 56px; object-fit: cover; border: 1px solid #ddd; }
.preview-img { max-width: 220px; max-height: 150px; border: 1px solid #ddd; padding: 3px; background: #fff; }

.dash-tile { background: #fff; border: 1px solid #e5e5e5; border-radius: 10px; padding: 18px; display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: inherit; transition: .2s; }
.dash-tile:hover { box-shadow: 0 6px 18px rgba(0,0,0,.07); color: inherit; }
.dash-tile h3 { margin: 0; font-size: 28px; font-weight: 700; color: var(--qm-maroon); }
.dash-tile span { font-size: 12px; text-transform: uppercase; color: #777; font-weight: 600; }
.dash-tile i { font-size: 30px; color: var(--qm-gold); }

.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--qm-dark), var(--qm-maroon)); padding: 20px; }
.login-box { background: #fff; width: 100%; max-width: 400px; padding: 34px; border-top: 4px solid var(--qm-gold); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.login-box .ico { width: 70px; height: 70px; border-radius: 50%; background: var(--qm-maroon); color: var(--qm-gold); display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 12px; }

.note-editor.note-frame { border-radius: 2px; }

@media (max-width: 991px) {
    .adm-side { position: fixed; left: -260px; z-index: 1000; transition: left .25s; }
    .adm-side.open { left: 0; box-shadow: 0 0 40px rgba(0,0,0,.4); }
    .adm-content { padding: 16px; }
}