/* ============================================================
   AI BookAgents — Complete Dark Purple Theme
   Matches the dashboard design exactly.
   Loaded AFTER style.css to override all defaults.
   ============================================================ */

/* ---- 1. CSS Variables override ---- */
:root {
    --primary:        #a855f7;
    --primary-dark:   #7c3aed;
    --primary-light:  #c084fc;
    --primary-soft:   rgba(168,85,247,.15);

    --bg:             #0f0720;
    --bg-card:        rgba(255,255,255,.06);
    --sidebar-bg:     #160b2e;
    --sidebar-border: rgba(255,255,255,.08);
    --navbar-bg:      #160b2e;

    --text:           #f3f0ff;
    --text-muted:     rgba(243,240,255,.55);
    --text-soft:      rgba(243,240,255,.35);
    --border:         rgba(255,255,255,.1);
    --border-soft:    rgba(255,255,255,.06);

    --shadow-sm:  0 1px 3px  rgba(0,0,0,.4);
    --shadow-md:  0 4px 16px rgba(0,0,0,.45);
    --shadow-lg:  0 8px 32px rgba(0,0,0,.5);
}

/* ---- 2. Body / root background ---- */
html, body {
    background: linear-gradient(160deg, #0f0720 0%, #1a0a3d 40%, #0d1550 100%);
    background-attachment: fixed;
    color: var(--text);
}

/* ---- 3. Scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(168,85,247,.4); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(168,85,247,.7); }

/* ---- 4. Sidebar ---- */
.app-sidebar {
    background: #160b2e;
    border-right: 1px solid rgba(255,255,255,.07);
}
.sidebar-brand { border-bottom: 1px solid rgba(255,255,255,.07); background: #160b2e; }
.brand-link, .brand-link:hover { color: #f3f0ff; }
.brand-badge {
    background: linear-gradient(135deg, #a855f7, #6366f1);
    color: #fff;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .95rem;
}

.nav-section-title { color: rgba(255,255,255,.3); }
.app-sidebar .nav-link { color: rgba(255,255,255,.55); }
.app-sidebar .nav-link:hover {
    background: rgba(168,85,247,.18);
    color: #e9d5ff;
}
.app-sidebar .nav-link.active {
    background: linear-gradient(135deg, rgba(168,85,247,.35), rgba(99,102,241,.3));
    color: #fff !important;
    border: 1px solid rgba(168,85,247,.3);
}
.app-sidebar .nav-link.active i { color: #c084fc; }
.sidebar-footer { border-top: 1px solid rgba(255,255,255,.07); }

/* ---- 5. Navbar ---- */
.app-navbar {
    background: #160b2e;
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.navbar-brand-mini .fw-bold { color: #f3f0ff !important; }
.brand-badge {
    background: linear-gradient(135deg, #a855f7, #6366f1);
}

/* Navbar buttons */
.btn-icon { color: rgba(255,255,255,.5); }
.btn-icon:hover { background: rgba(255,255,255,.08); color: #fff; }
.btn-user-menu { color: var(--text); }
.btn-user-menu:hover { background: rgba(255,255,255,.08); }

/* Navbar avatar fallback */
.navbar-avatar-fallback {
    background: linear-gradient(135deg, #a855f7, #6366f1);
    color: #fff;
}

/* Navbar dropdowns */
.user-dropdown,
.notif-dropdown,
.dropdown-menu {
    background: #1e0f3d;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.dropdown-item { color: rgba(255,255,255,.75); }
.dropdown-item:hover, .dropdown-item:focus {
    background: rgba(168,85,247,.2);
    color: #fff;
}
.dropdown-divider { border-color: rgba(255,255,255,.08); }
.dropdown-item.text-danger { color: #f87171 !important; }
.dropdown-item.text-danger:hover { background: rgba(239,68,68,.15) !important; color: #fca5a5 !important; }

/* Credits badge */
.navbar-credits-badge {
    background: rgba(168,85,247,.2);
    color: #c084fc;
    border: 1px solid rgba(168,85,247,.35);
}
.navbar-credits-badge:hover { background: #a855f7; color: #fff; border-color: #a855f7; }
.navbar-credits-badge.low { background: rgba(239,68,68,.2); color: #f87171; border-color: rgba(239,68,68,.4); }

/* ---- 6. Content area ---- */
.app-content { background: transparent; }

/* ---- 7. Content cards ---- */
.content-card, .stat-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 4px 24px rgba(0,0,0,.3);
    backdrop-filter: blur(10px);
    color: var(--text);
}
.content-card:hover { border-color: rgba(168,85,247,.25); }

/* ---- 8. Stat cards ---- */
.bg-soft-primary   { background: rgba(168,85,247,.18) !important; }
.bg-soft-success   { background: rgba(16,185,129,.18)  !important; }
.bg-soft-warning   { background: rgba(245,158,11,.18)  !important; }
.bg-soft-info      { background: rgba(6,182,212,.18)   !important; }
.bg-soft-danger    { background: rgba(239,68,68,.18)   !important; }
.bg-soft-secondary { background: rgba(148,163,184,.18) !important; }

.text-primary  { color: #c084fc !important; }
.text-success  { color: #34d399 !important; }
.text-warning  { color: #fbbf24 !important; }
.text-info     { color: #22d3ee !important; }
.text-danger   { color: #f87171 !important; }
.text-muted    { color: rgba(243,240,255,.45) !important; }

.stat-label { color: rgba(243,240,255,.5); }
.stat-value { color: #f3f0ff; }

/* ---- 9. Buttons ---- */
.btn-primary {
    background: linear-gradient(135deg, #a855f7, #6366f1);
    border-color: transparent;
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #9333ea, #4f46e5);
    border-color: transparent;
    color: #fff;
}
.btn-outline-primary { color: #c084fc; border-color: rgba(168,85,247,.5); }
.btn-outline-primary:hover { background: rgba(168,85,247,.2); color: #e9d5ff; border-color: #a855f7; }
.btn-outline-secondary { color: rgba(243,240,255,.6); border-color: rgba(255,255,255,.15); }
.btn-outline-secondary:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.25); }
.btn-outline-danger { color: #f87171; border-color: rgba(239,68,68,.4); }
.btn-outline-danger:hover { background: rgba(239,68,68,.15); color: #fca5a5; }
.btn-outline-light { color: rgba(243,240,255,.8); border-color: rgba(255,255,255,.2); }
.btn-outline-light:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ---- 10. Forms ---- */
.form-control, .form-select {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.12);
    color: #f3f0ff;
}
.form-control:focus, .form-select:focus {
    background: rgba(255,255,255,.1);
    border-color: #a855f7;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(168,85,247,.2);
}
.form-control::placeholder { color: rgba(243,240,255,.3); }
.form-label { color: rgba(243,240,255,.8); }
.form-text  { color: rgba(243,240,255,.4); }
.form-select option { background: #1e0f3d; color: #f3f0ff; }
.input-group-text {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.12);
    color: rgba(243,240,255,.6);
}

/* ---- 11. Tables ---- */
.table {
    color: var(--text);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255,255,255,.03);
    --bs-table-hover-bg: rgba(168,85,247,.1);
    --bs-table-border-color: rgba(255,255,255,.07);
    --bs-table-striped-color: var(--text);
    --bs-table-hover-color: var(--text);
    --bs-table-active-bg: rgba(168,85,247,.15);
    --bs-table-active-color: var(--text);
}
.table > :not(caption) > * > * {
    background-color: var(--bs-table-bg);
    border-color: rgba(255,255,255,.07);
    color: var(--text);
}
.table thead th {
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.1);
    color: rgba(243,240,255,.5);
}
.table-hover tbody tr:hover > * {
    background-color: rgba(168,85,247,.1);
    color: var(--text);
}
.table-hover tbody tr:hover { background: rgba(168,85,247,.1); }
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255,.03);
    --bs-table-accent-bg: rgba(255,255,255,.03);
}
/* Force white bg override on all table cells */
.table tbody tr td,
.table tbody tr th,
.table thead tr th,
.table tfoot tr td {
    background-color: transparent !important;
    color: rgba(243,240,255,.85);
}
.table tbody tr {
    background-color: transparent !important;
}
.table tbody tr:hover td,
.table tbody tr:hover th {
    background-color: rgba(168,85,247,.1) !important;
}

/* ---- 12. Badges ---- */
.badge {
    font-weight: 600;
}
.bg-success-subtle  { background: rgba(16,185,129,.2)  !important; }
.bg-danger-subtle   { background: rgba(239,68,68,.2)   !important; }
.bg-warning-subtle  { background: rgba(245,158,11,.2)  !important; }
.bg-primary-subtle  { background: rgba(168,85,247,.2)  !important; }
.bg-info-subtle     { background: rgba(6,182,212,.2)   !important; }
.bg-secondary-subtle{ background: rgba(148,163,184,.2) !important; }
.bg-light           { background: rgba(255,255,255,.1)  !important; }
.bg-dark            { background: rgba(255,255,255,.15) !important; }

.text-success-emphasis  { color: #34d399 !important; }
.text-danger-emphasis   { color: #f87171 !important; }
.text-warning-emphasis  { color: #fbbf24 !important; }
.text-primary-emphasis  { color: #c084fc !important; }
.text-info-emphasis     { color: #22d3ee !important; }
.text-secondary-emphasis{ color: #94a3b8 !important; }
.text-dark              { color: #f3f0ff !important; }

/* ---- 13. Alerts ---- */
.alert-info {
    background: rgba(6,182,212,.12);
    border-color: rgba(6,182,212,.25);
    color: #67e8f9;
}
.alert-warning {
    background: rgba(245,158,11,.12);
    border-color: rgba(245,158,11,.25);
    color: #fde68a;
}
.alert-danger {
    background: rgba(239,68,68,.12);
    border-color: rgba(239,68,68,.25);
    color: #fca5a5;
}
.alert-success {
    background: rgba(16,185,129,.12);
    border-color: rgba(16,185,129,.25);
    color: #6ee7b7;
}

/* ---- 14. Progress bars ---- */
.progress {
    background: rgba(255,255,255,.1);
}
.progress-bar {
    background: linear-gradient(90deg, #a855f7, #6366f1);
}
.progress-bar.bg-success { background: linear-gradient(90deg,#10b981,#34d399) !important; }
.progress-bar.bg-warning { background: linear-gradient(90deg,#f59e0b,#fbbf24) !important; }
.progress-bar.bg-danger  { background: linear-gradient(90deg,#ef4444,#f87171) !important; }

/* ---- 15. Modals ---- */
.modal-content {
    background: #1a0a3d;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 20px 60px rgba(0,0,0,.7);
    color: var(--text);
}
.modal-header {
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.modal-footer {
    border-top: 1px solid rgba(255,255,255,.08);
}
.modal-title { color: #f3f0ff; }
.btn-close { filter: invert(1) brightness(0.7); }

/* ---- 16. Footer ---- */
.app-footer {
    background: #160b2e;
    border-top: 1px solid rgba(255,255,255,.07);
    color: rgba(243,240,255,.4);
}

/* ---- 17. Page header ---- */
.page-title   { color: #f3f0ff; }
.page-subtitle { color: rgba(243,240,255,.5); }

/* ---- 18. Dividers / hr ---- */
hr, .dropdown-divider { border-color: rgba(255,255,255,.08); opacity: 1; }

/* ---- 19. Tabs ---- */
.nav-tabs-bordered { border-bottom: 1px solid rgba(255,255,255,.1); }
.nav-tabs-bordered .nav-link { color: rgba(243,240,255,.5); }
.nav-tabs-bordered .nav-link.active {
    color: #c084fc;
    border-bottom-color: #a855f7;
}

/* ---- 20. Recent project items ---- */
.recent-project-item {
    border-color: rgba(255,255,255,.08);
    color: var(--text);
}
.recent-project-item:hover {
    background: rgba(168,85,247,.15);
    border-color: rgba(168,85,247,.3);
    color: #fff;
}

/* ---- 21. Empty states ---- */
.empty-state i { color: rgba(168,85,247,.4); }
.empty-state h6 { color: rgba(243,240,255,.7); }

/* ---- 22. SweetAlert2 dark ---- */
.swal2-popup {
    background: #1e0f3d !important;
    color: #f3f0ff !important;
    border: 1px solid rgba(255,255,255,.1) !important;
}
.swal2-title { color: #f3f0ff !important; }
.swal2-html-container { color: rgba(243,240,255,.75) !important; }
.swal2-confirm { background: linear-gradient(135deg,#a855f7,#6366f1) !important; border: none !important; }
.swal2-cancel { background: rgba(255,255,255,.1) !important; color: #f3f0ff !important; }

/* ---- 23. CKEditor dark ---- */
.ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #f3f0ff !important;
}
.ck.ck-editor__editable.ck-focused {
    background: rgba(255,255,255,.07) !important;
    border-color: #a855f7 !important;
    color: #f3f0ff !important;
}
.ck.ck-toolbar, .ck.ck-toolbar__separator {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.1) !important;
}
.ck.ck-button { color: rgba(243,240,255,.7) !important; }
.ck.ck-button:hover { background: rgba(168,85,247,.2) !important; color: #fff !important; }

/* ---- 24. Breadcrumb ---- */
.breadcrumb-item { color: rgba(243,240,255,.5); }
.breadcrumb-item.active { color: rgba(243,240,255,.8); }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(243,240,255,.25); }

/* ---- 25. Plan checkbox UI (admin) ---- */
.plan-check-item {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.1) !important;
    color: var(--text);
}
.plan-check-item:hover {
    background: rgba(168,85,247,.15);
    border-color: rgba(168,85,247,.4) !important;
}
.plan-check-item.border-primary { border-color: #a855f7 !important; background: rgba(168,85,247,.15); }

/* ---- 26. Agency sub-user cards ---- */
.content-card table td { color: rgba(243,240,255,.8); }
.content-card table th { color: rgba(243,240,255,.45); }

/* ---- 27. Scrollspy / nav pills ---- */
.nav-pills .nav-link { color: rgba(243,240,255,.6); }
.nav-pills .nav-link.active { background: linear-gradient(135deg,#a855f7,#6366f1); }

/* ---- 28. Auth pages (login / register) ---- */
.auth-card {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    backdrop-filter: blur(12px);
}

/* ---- 29. Glow effect on primary elements ---- */
.btn-primary:focus,
.btn-primary:active {
    box-shadow: 0 0 0 3px rgba(168,85,247,.3) !important;
}
.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 3px rgba(168,85,247,.2) !important;
}

/* ---- 30. Module photo cards on sub-pages ---- */
.module-photo-card {
    border-color: rgba(255,255,255,.1);
}

/* ---- 31. List groups ---- */
.list-group-item {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
    color: var(--text);
}
.list-group-item:hover {
    background: rgba(168,85,247,.12);
}

/* ---- 32. Code blocks ---- */
code, pre {
    background: rgba(255,255,255,.08);
    color: #c084fc;
    border-radius: 6px;
    padding: 2px 6px;
}

/* ---- 33. Toasts (SweetAlert) ---- */
.swal2-toast {
    background: #1e0f3d !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    color: #f3f0ff !important;
}

/* ---- Auth pages (login / register) dark ---- */
.auth-body {
    background: linear-gradient(160deg, #0f0720 0%, #1a0a3d 50%, #0d1550 100%) !important;
    background-attachment: fixed !important;
}
.auth-card {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.5) !important;
    backdrop-filter: blur(12px);
    color: #f3f0ff !important;
}
.auth-card h1, .auth-card h2, .auth-card h3,
.auth-card h4, .auth-card h5, .auth-card h6 { color: #f3f0ff; }
.auth-card p, .auth-card label { color: rgba(243,240,255,.75); }
.auth-card a { color: #c084fc; }
.auth-card a:hover { color: #e9d5ff; }

/* ---- Brand badge large ---- */
.brand-badge, .brand-badge-lg {
    background: linear-gradient(135deg, #a855f7, #6366f1);
    color: #fff;
    border-radius: 10px;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.1rem;
    box-shadow: 0 4px 16px rgba(168,85,247,.4);
}

/* ---- Sidebar credits widget ---- */
.sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}
.sidebar-credits {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(168,85,247,.1);
    border: 1px solid rgba(168,85,247,.2);
    border-radius: 10px;
    padding: 10px 14px;
}
.sidebar-credits-label {
    font-size: .78rem;
    color: rgba(243,240,255,.5);
    display: flex;
    align-items: center;
    gap: 5px;
}
.sidebar-credits-label i { color: #fbbf24; }
.sidebar-credits-val {
    font-size: .9rem;
    font-weight: 800;
    color: #c084fc;
}
.sidebar-credits-val.low { color: #f87171; }

/* ---- Sidebar badge (Soon) ---- */
.sidebar-badge {
    font-size: .6rem;
    font-weight: 700;
    background: rgba(245,158,11,.2);
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,.3);
    border-radius: 999px;
    padding: 2px 7px;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* ---- Sidebar mobile toggle ---- */
@media (max-width: 991.98px) {
    .app-main { margin-left: 0 !important; }
}

/* ---- Buy Credits sidebar button ---- */
.sidebar-buy-credits {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(168,85,247,.25), rgba(99,102,241,.2));
    border: 1px solid rgba(168,85,247,.35);
    color: #e9d5ff;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .15s;
}
.sidebar-buy-credits:hover {
    background: linear-gradient(135deg, rgba(168,85,247,.4), rgba(99,102,241,.35));
    border-color: #a855f7;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(168,85,247,.3);
}
.sidebar-buy-credits i:first-child {
    color: #fbbf24;
    font-size: .9rem;
}

/* ---- Image Action Overlay (all agents) ---- */
.page-img-wrap {
    position: relative !important;
    overflow: hidden;
    border-radius: 10px;
    display: block;
    cursor: pointer;
}
.img-action-overlay {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(3px);
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: opacity .2s ease;
    border-radius: 10px;
    z-index: 2;
}
.page-img-wrap:hover .img-action-overlay { opacity: 1; }
.img-act-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: transform .15s, background .15s, border-color .15s;
    background: rgba(255,255,255,.15);
    color: #fff;
    backdrop-filter: blur(4px);
    flex-shrink: 0;
}
.img-act-btn:hover { transform: scale(1.15); border-color: rgba(255,255,255,.7); }
.img-upload-btn:hover { background: rgba(16,185,129,.8) !important; }
.img-regen-btn:hover  { background: rgba(168,85,247,.8) !important; }
.img-delete-btn:hover { background: rgba(239,68,68,.8) !important; }