/**
 * PharmaPulse CRM - Dedicated Fabrik 4/5 Component Skin
 * Professional clinical UI styling for Fabrik Lists, Forms, and Visualizations
 */

/* ==========================================================================
   1. Fabrik List / Data Tables
   ========================================================================== */
.fabrikList {
    background-color: var(--crm-surface);
    border-radius: var(--crm-radius-lg);
    box-shadow: var(--crm-shadow-sm);
    border: 1px solid var(--crm-border);
    overflow: hidden;
    margin-bottom: 2rem;
}

/* List Header Toolbar */
.fabrikList .list-header,
.fabrikList .fabrikNav {
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    border-bottom: 1px solid var(--crm-border);
    background-color: var(--crm-surface);
}

.fabrikList h1, 
.fabrikList h2, 
.fabrikList .page-header {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--crm-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

[data-bs-theme="dark"] .fabrikList h1, 
[data-bs-theme="dark"] .fabrikList h2 {
    color: #fff;
}

/* Fabrik Action Buttons (Add, Export, Delete) */
.fabrik_buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.fabrik_buttons .btn,
.fabrikNav .btn {
    border-radius: var(--crm-radius-md);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.45rem 0.95rem;
    transition: var(--crm-transition);
}

.fabrik_buttons .btn-primary,
.fabrik_buttons .addbutton {
    background-color: var(--crm-primary);
    border-color: var(--crm-primary);
    color: #fff;
}

.fabrik_buttons .btn-primary:hover,
.fabrik_buttons .addbutton:hover {
    background-color: var(--crm-primary-dark);
    border-color: var(--crm-primary-dark);
}

.fabrik_buttons .csvExportButton {
    background-color: var(--crm-surface);
    border: 1px solid var(--crm-border);
    color: var(--crm-text-secondary);
}

.fabrik_buttons .csvExportButton:hover {
    background-color: var(--crm-bg);
    border-color: var(--crm-teal);
    color: var(--crm-teal);
}

/* Fabrik Filter Ribbon */
.fabrik_filter {
    background-color: var(--crm-bg);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--crm-border);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.fabrik_filter input[type="text"],
.fabrik_filter select {
    background-color: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-md);
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    color: var(--crm-text);
    min-width: 180px;
    transition: var(--crm-transition);
}

.fabrik_filter input[type="text"]:focus,
.fabrik_filter select:focus {
    border-color: var(--crm-teal);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
    outline: none;
}

/* Fabrik Data Table Skin */
.fabrikList .table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--crm-text);
}

.fabrikList .table thead th {
    background-color: #F8FAFC;
    color: var(--crm-text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.85rem 1.25rem;
    border-top: none;
    border-bottom: 2px solid var(--crm-border);
    white-space: nowrap;
    position: sticky;
    top: var(--crm-topbar-height);
    z-index: 5;
}

[data-bs-theme="dark"] .fabrikList .table thead th {
    background-color: #1E293B;
    color: #94A3B8;
}

.fabrikList .table tbody tr {
    transition: background-color 0.15s ease;
}

.fabrikList .table tbody tr:hover {
    background-color: rgba(13, 148, 136, 0.04) !important;
}

[data-bs-theme="dark"] .fabrikList .table tbody tr:hover {
    background-color: rgba(13, 148, 136, 0.12) !important;
}

.fabrikList .table tbody td {
    padding: 0.95rem 1.25rem;
    vertical-align: middle;
    font-size: 0.88rem;
    border-top: none;
    border-bottom: 1px solid var(--crm-border-light);
}

/* Checkbox Column Styling */
.fabrikList .table td.fabrik_select,
.fabrikList .table th.fabrik_select {
    width: 44px;
    text-align: center;
    padding-left: 1.25rem;
    padding-right: 0.5rem;
}

/* Action Icons in Rows (Edit, Delete, View) */
.fabrik_rowactions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.fabrik_rowactions .btn,
.fabrik_rowactions a {
    width: 32px;
    height: 32px;
    border-radius: var(--crm-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--crm-text-muted);
    transition: var(--crm-transition);
    text-decoration: none;
    border: 1px solid transparent;
}

.fabrik_rowactions a:hover {
    background-color: var(--crm-bg);
    color: var(--crm-teal);
    border-color: var(--crm-border);
}

/* ==========================================================================
   2. Clinical Status Badges & Pills
   ========================================================================== */
.status-badge,
.badge-active,
.badge-approved,
.badge-instock,
.status-completed {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    background-color: rgba(16, 185, 129, 0.12);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.badge-pending,
.badge-scheduled,
.status-warning {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    background-color: rgba(245, 158, 11, 0.12);
    color: #B45309;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.badge-expired,
.badge-cancelled,
.badge-danger,
.status-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    background-color: rgba(239, 68, 68, 0.12);
    color: #B91C1C;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.badge-sample,
.badge-review,
.badge-info {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    background-color: rgba(2, 132, 199, 0.12);
    color: #0369A1;
    border: 1px solid rgba(2, 132, 199, 0.25);
}

/* Pagination in Fabrik */
.fabrikList .pagination,
.crm-data-viewport .pagination {
    margin: 1.25rem 0;
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
}

.fabrikList .page-item .page-link,
.crm-data-viewport .page-item .page-link {
    border-radius: var(--crm-radius-sm);
    border: 1px solid var(--crm-border);
    color: var(--crm-text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
}

.fabrikList .page-item.active .page-link,
.crm-data-viewport .page-item.active .page-link {
    background-color: var(--crm-primary);
    border-color: var(--crm-primary);
    color: #fff;
}

/* ==========================================================================
   3. Fabrik Forms (Data Entry / Medical Records)
   ========================================================================== */
.fabrikForm {
    background-color: var(--crm-surface);
    border-radius: var(--crm-radius-lg);
    box-shadow: var(--crm-shadow-sm);
    border: 1px solid var(--crm-border);
    padding: 2rem;
    margin-bottom: 2rem;
}

.fabrikForm legend,
.fabrikGroupHeading {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--crm-primary);
    border-bottom: 2px solid var(--crm-border-light);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[data-bs-theme="dark"] .fabrikForm legend,
[data-bs-theme="dark"] .fabrikGroupHeading {
    color: #fff;
}

.fabrikGroupHeading::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 18px;
    background: var(--crm-teal);
    border-radius: 2px;
}

.fabrikGroup {
    margin-bottom: 2rem;
}

.fabrikElementContainer {
    margin-bottom: 1.25rem;
}

.fabrikElementContainer label,
.control-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--crm-text-secondary);
    margin-bottom: 0.35rem;
    display: block;
}

/* Form Inputs */
.fabrikElementContainer input[type="text"],
.fabrikElementContainer input[type="email"],
.fabrikElementContainer input[type="date"],
.fabrikElementContainer input[type="number"],
.fabrikElementContainer select,
.fabrikElementContainer textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.95rem;
    font-size: 0.9rem;
    font-family: inherit;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-md);
    background-color: var(--crm-surface);
    color: var(--crm-text);
    transition: var(--crm-transition);
}

.fabrikElementContainer input:focus,
.fabrikElementContainer select:focus,
.fabrikElementContainer textarea:focus {
    border-color: var(--crm-teal);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
    outline: none;
}

/* Validation Errors */
.fabrikElementContainer.error input,
.fabrikElementContainer.error select {
    border-color: #EF4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.fabrikErrorMessage {
    color: #DC2626;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.35rem;
}

/* Form Action Buttons Bar */
.fabrikActions {
    border-top: 1px solid var(--crm-border);
    padding-top: 1.5rem;
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.fabrikActions .btn-primary,
.fabrikActions input[type="submit"] {
    background: linear-gradient(135deg, var(--crm-primary) 0%, #154c7d 100%);
    border: none;
    color: #fff;
    padding: 0.65rem 1.5rem;
    border-radius: var(--crm-radius-md);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(14, 58, 95, 0.2);
    transition: var(--crm-transition);
}

.fabrikActions .btn-primary:hover,
.fabrikActions input[type="submit"]:hover {
    background: linear-gradient(135deg, #09253d 0%, var(--crm-primary) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(14, 58, 95, 0.3);
}

/* ==========================================================================
   4. Fabrik Details View
   ========================================================================== */
.fabrikDetails {
    background-color: var(--crm-surface);
    border-radius: var(--crm-radius-lg);
    box-shadow: var(--crm-shadow-sm);
    border: 1px solid var(--crm-border);
    padding: 2rem;
}

.fabrikDetails .fabrikElementContainer {
    display: flex;
    border-bottom: 1px solid var(--crm-border-light);
    padding: 0.75rem 0;
    margin-bottom: 0;
}

.fabrikDetails .fabrikElementContainer label {
    width: 200px;
    min-width: 200px;
    font-weight: 600;
    color: var(--crm-text-muted);
}

.fabrikDetails .fabrikElement {
    font-weight: 500;
    color: var(--crm-text);
}