/*
 * TichaPharmacy / Mauzo System — visual refinements on top of the Velzon theme.
 * Loaded after app.min.css / custom.min.css so these rules win without
 * touching the vendor Bootstrap/Velzon build.
 */

:root {
    --pharm-radius: 0.6rem;
    --pharm-shadow: 0 2px 10px rgba(30, 41, 59, 0.06);
    --pharm-shadow-hover: 0 6px 18px rgba(30, 41, 59, 0.10);
}

body {
    letter-spacing: 0.1px;
}

/* ---------- Cards ---------- */
.card {
    border: 1px solid rgba(60, 76, 128, 0.08);
    border-radius: var(--pharm-radius);
    box-shadow: var(--pharm-shadow);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.card.card-animate:hover {
    box-shadow: var(--pharm-shadow-hover);
    transform: translateY(-2px);
}

.card-header {
    border-bottom: 1px solid rgba(60, 76, 128, 0.08);
    background-color: rgba(64, 81, 137, 0.02);
}

.card-header .card-title {
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* Report hub cards on the Reports landing page */
.report-hub-card {
    cursor: pointer;
}

.report-hub-card:hover {
    border-color: rgba(64, 81, 137, 0.25);
}

/* ---------- Tables ---------- */
.table {
    font-size: 0.875rem;
}

.table thead th {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.4px;
    color: #6b7280;
    background-color: #f8f9fc;
    border-bottom-width: 1px;
    white-space: nowrap;
}

.table-bordered td,
.table-bordered th {
    border-color: rgba(60, 76, 128, 0.08);
}

.table > tbody > tr:hover > * {
    background-color: rgba(64, 81, 137, 0.035);
}

/* ---------- Badges ---------- */
.badge {
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: 0.45rem;
    font-weight: 500;
}

.btn-soft-primary:hover,
.btn-soft-success:hover,
.btn-soft-danger:hover,
.btn-soft-info:hover {
    box-shadow: 0 2px 8px rgba(30, 41, 59, 0.12);
}

/* ---------- Sidebar branding ---------- */
.navbar-brand-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-menu .menu-title span {
    font-size: 0.7rem;
    letter-spacing: 0.6px;
    font-weight: 700;
    opacity: 0.65;
}

/* ---------- Footer ---------- */
.footer {
    border-top: 1px solid rgba(60, 76, 128, 0.08);
    font-size: 0.8125rem;
    color: #8a92a3;
}

/* ==========================================================================
 * Button / action preloaders
 * Paired with public/build/js/pharmacy-preloader.js which toggles the
 * `.btn-loading` class on any control while its request is in flight.
 * ========================================================================== */
.btn-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

.btn-loading .btn-loading-label {
    visibility: hidden;
}

.btn-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1rem;
    margin: -0.5rem 0 0 -0.5rem;
    border-radius: 50%;
    border: 0.15rem solid rgba(255, 255, 255, 0.55);
    border-top-color: #fff;
    animation: pharm-btn-spin 0.6s linear infinite;
}

/* Light/outline/soft buttons need a dark spinner, not a white one */
.btn-light.btn-loading::after,
.btn-soft-primary.btn-loading::after,
.btn-soft-success.btn-loading::after,
.btn-soft-danger.btn-loading::after,
.btn-soft-info.btn-loading::after,
.btn-soft-warning.btn-loading::after,
.btn-outline-primary.btn-loading::after,
.btn-outline-secondary.btn-loading::after,
a.btn-loading::after,
.dropdown-item.btn-loading::after {
    border-color: rgba(64, 81, 137, 0.25);
    border-top-color: #405189;
}

@keyframes pharm-btn-spin {
    to { transform: rotate(360deg); }
}

/* Small inline spinner used for anchor/dropdown "export" style links,
   where the whole label shouldn't be hidden. */
.export-btn.btn-loading {
    color: inherit !important;
    pointer-events: none;
    opacity: 0.65;
}

.export-btn.btn-loading::after {
    position: static;
    display: inline-block;
    margin: 0 0 0 6px;
    top: auto;
    left: auto;
    width: 0.8rem;
    height: 0.8rem;
    border-width: 0.12rem;
    vertical-align: -1px;
}

/* ==========================================================================
 * Login / auth split-panel layout
 * Paired with resources/views/auth/login.blade.php - a branded panel on the
 * left (with the existing particles.js background wired in) and a plain
 * sign-in form on the right, replacing the old single centered card.
 * ========================================================================== */
.auth-split-wrapper {
    min-height: 100vh;
    width: 100%;
    display: flex;
}

.auth-brand-panel {
    position: relative;
    flex: 0 0 55%;
    max-width: 55%;
    background: linear-gradient(135deg, #405189 0%, #2a355e 100%);
    overflow: hidden;
}

.auth-brand-panel > *:not(.auth-particles) {
    position: relative;
    z-index: 2;
}

.auth-brand-heading {
    font-size: 2rem;
    line-height: 1.3;
    max-width: 480px;
}

.auth-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.auth-form-panel {
    flex: 1;
    min-width: 0;
    background-color: #fff;
    min-height: 100vh;
}

.auth-form-inner {
    max-width: 380px;
    margin: 0 auto;
}

/* ---------- Print styles for receipts / printable pages ---------- */
@media print {
    #page-topbar,
    .app-menu,
    .footer,
    .vertical-overlay,
    .customizer-setting,
    #back-to-top {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .card {
        box-shadow: none !important;
        border: none !important;
    }
}

/* ---------- Toastify color classes ----------
   Toastify() is called throughout the app with className: "success" /
   "error" / "errors" (both spellings are used in the codebase) but the
   library never shipped any color rules for those classes, so every
   toast rendered with its default blue gradient regardless of outcome.
   These map each className to the same semantic colors used elsewhere
   in the Velzon theme (success/danger/warning/info). */
.toastify.success {
    background: var(--vz-success, #0ab39c) !important;
}

.toastify.error,
.toastify.errors,
.toastify.danger {
    background: var(--vz-danger, #f06548) !important;
}

.toastify.warning {
    background: var(--vz-warning, #f7b84b) !important;
    color: #1a1a1a !important;
}

.toastify.warning .toast-close {
    color: #1a1a1a !important;
}

.toastify.info {
    background: var(--vz-info, #299cdb) !important;
}