/* catalog/static/catalog/css/components/buttons.css */

/* ============================================================
   DESIGN TOKENS (LIGHT + DARK)
   ============================================================ */

:root {
    --btn-bg-light: #fafafa;
    --btn-bg-hover-light: #eaeaea;
    --btn-focus-ring: rgba(120, 160, 255, 0.55);
    --btn-size-sm: 26px;
    --btn-size-md: 32px;
    --btn-size-lg: 40px;
    --btn-radius: 8px;
    --btn-border-width: 1.25px;
}

html[data-bs-theme="dark"] {
    --btn-bg-dark: var(--apple-surface);
    --btn-bg-hover-dark: var(--apple-surface-2);
    --btn-focus-ring: rgba(160, 200, 255, 0.45);
}

/* ============================================================
   BASE BUTTON COMPONENT
   ============================================================ */

.book-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: var(--btn-size-md);
    height: var(--btn-size-md);
    border-radius: var(--btn-radius);
    border: var(--btn-border-width) solid transparent;
    background: var(--btn-bg-light);
    color: inherit;
    font-size: 18px;
    cursor: pointer;
    transition:
        background-color .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

/* HOVER + ACTIVE */
.book-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.book-btn:active {
    transform: scale(0.96);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* FOCUS RINGS */
.book-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--btn-focus-ring);
}

/* DISABLED */
.book-btn:disabled,
.book-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* SIZE VARIANTS */
.book-btn--sm {
    width: var(--btn-size-sm);
    height: var(--btn-size-sm);
    font-size: 14px;
}
.book-btn--md {
    width: var(--btn-size-md);
    height: var(--btn-size-md);
    font-size: 18px;
}
.book-btn--lg {
    width: var(--btn-size-lg);
    height: var(--btn-size-lg);
    font-size: 22px;
}

/* ICON-ONLY vs ICON+LABEL */
.book-btn--icon-only {
    padding: 0;
}
.book-btn--with-label {
    width: auto;
    padding: 0 12px;
    gap: 6px;
}

/* ============================================================
   READ / EDIT / DELETE — LIGHT MODE
   ============================================================ */

.book-btn.read-btn {
    border-color: #28a745;
    color: #28a745;
    background: #fafafa;
}
.book-btn.read-btn:hover {
    background: #28a745;
    color: #fff;
    box-shadow: 0 0 12px rgba(40, 167, 69, 0.45);
    transform: scale(1.12);
}

.book-btn.edit-btn {
    border-color: #007bff;
    color: #007bff;
    background: #fafafa;
}
.book-btn.edit-btn:hover {
    background: #007bff;
    color: #fff;
    box-shadow: 0 0 12px rgba(0, 123, 255, 0.45);
    transform: scale(1.12);
}

.book-btn.delete-btn {
    border-color: #dc3545;
    color: #dc3545;
    background: #fafafa;
}
.book-btn.delete-btn:hover {
    background: #dc3545;
    color: #fff;
    box-shadow: 0 0 12px rgba(220, 53, 69, 0.45);
    transform: scale(1.12);
}

/* ============================================================
   DARK MODE OVERRIDES
   ============================================================ */

html[data-bs-theme="dark"] .book-btn {
    background: var(--btn-bg-dark);
    box-shadow: none;
}
html[data-bs-theme="dark"] .book-btn:hover {
    background: var(--btn-bg-hover-dark);
    box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}

/* Black background (non-hover) for colored buttons in dark mode */
html[data-bs-theme="dark"] .book-btn.read-btn:not(:hover),
html[data-bs-theme="dark"] .book-btn.edit-btn:not(:hover),
html[data-bs-theme="dark"] .book-btn.delete-btn:not(:hover) {
    background: #000 !important;
}

/* READ — dark mode */
html[data-bs-theme="dark"] .book-btn.read-btn {
    border-color: #28a745;
    color: #28a745;
}
html[data-bs-theme="dark"] .book-btn.read-btn:hover {
    background: #28a745 !important;
    color: #000;
    box-shadow: 0 0 14px rgba(40, 167, 69, 0.45);
    transform: scale(1.12);
}

/* EDIT — dark mode */
html[data-bs-theme="dark"] .book-btn.edit-btn {
    border-color: #007bff;
    color: #007bff;
}
html[data-bs-theme="dark"] .book-btn.edit-btn:hover {
    background: #007bff !important;
    color: #000;
    box-shadow: 0 0 14px rgba(0, 123, 255, 0.45);
    transform: scale(1.12);
}

/* DELETE — dark mode */
html[data-bs-theme="dark"] .book-btn.delete-btn {
    border-color: #dc3545;
    color: #dc3545;
}
html[data-bs-theme="dark"] .book-btn.delete-btn:hover {
    background: #dc3545 !important;
    color: #000;
    box-shadow: 0 0 14px rgba(220, 53, 69, 0.55);
    transform: scale(1.12);
}

/* ============================================================
   ICON COLORS
   ============================================================ */

/* Light mode */
.book-btn.read-btn .bi-eye::before {
    color: #28a745 !important;
}
.book-btn.edit-btn .bi-pencil::before {
    color: #007bff !important;
}
.book-btn.delete-btn .bi-trash::before {
    color: #dc3545 !important;
}
.book-btn.read-btn:hover .bi-eye::before,
.book-btn.edit-btn:hover .bi-pencil::before,
.book-btn.delete-btn:hover .bi-trash::before {
    color: #fff !important;
}

/* Dark mode */
html[data-bs-theme="dark"] .book-btn.read-btn .bi-eye::before {
    color: #28a745 !important;
}
html[data-bs-theme="dark"] .book-btn.edit-btn .bi-pencil::before {
    color: #007bff !important;
}
html[data-bs-theme="dark"] .book-btn.delete-btn .bi-trash::before {
    color: #dc3545 !important;
}
html[data-bs-theme="dark"] .book-btn.read-btn:hover .bi-eye::before,
html[data-bs-theme="dark"] .book-btn.edit-btn:hover .bi-pencil::before,
html[data-bs-theme="dark"] .book-btn.delete-btn:hover .bi-trash::before {
    color: #fff !important;
}

/* ============================================================
   MOBILE: ICON ONLY (hide labels)
   ============================================================ */

@media (max-width: 767px) {
    .book-footer-action-bar .book-btn--with-label {
        width: var(--btn-size-md);
        height: var(--btn-size-md);
        padding: 0;
        gap: 0;
    }
    .book-footer-action-bar .book-btn--with-label span {
        display: none;
    }
    .book-footer-action-bar .book-btn--with-label i {
        margin: 0;
    }
}

/* ============================================================
   LABEL COLORS (explicit, matches button borders)
   ============================================================ */

/* Normal state — light mode */
.book-footer-action-bar .book-btn.read-btn span,
.book-footer-action-bar .book-btn.edit-btn span,
.book-footer-action-bar .book-btn.delete-btn span {
    text-decoration: none !important;
}
.book-footer-action-bar .book-btn.read-btn span {
    color: #28a745 !important;
}
.book-footer-action-bar .book-btn.edit-btn span {
    color: #007bff !important;
}
.book-footer-action-bar .book-btn.delete-btn span {
    color: #dc3545 !important;
}

/* Normal state — dark mode (same colors) */
html[data-bs-theme="dark"] .book-footer-action-bar .book-btn.read-btn span {
    color: #28a745 !important;
}
html[data-bs-theme="dark"] .book-footer-action-bar .book-btn.edit-btn span {
    color: #007bff !important;
}
html[data-bs-theme="dark"] .book-footer-action-bar .book-btn.delete-btn span {
    color: #dc3545 !important;
}

/* Hover state — turn label white (both modes) */
.book-footer-action-bar .book-btn.read-btn:hover span,
.book-footer-action-bar .book-btn.edit-btn:hover span,
.book-footer-action-bar .book-btn.delete-btn:hover span {
    color: #fff !important;
}
html[data-bs-theme="dark"] .book-footer-action-bar .book-btn.read-btn:hover span,
html[data-bs-theme="dark"] .book-footer-action-bar .book-btn.edit-btn:hover span,
html[data-bs-theme="dark"] .book-footer-action-bar .book-btn.delete-btn:hover span {
    color: #fff !important;
}

/* Remove underline on button hover (prevents "line" effect) */
.book-footer-action-bar .book-btn:hover {
    text-decoration: none !important;
}