/*
 * ============================================================================
 * Global Stylesheet - Hamza Chicken Management System
 * ============================================================================
 * This file contains custom styling for the application, including:
 * - Border radius utilities
 * - Shadow and scale effects
 * - Table and accordion styling
 * - Button components with multiple variants
 * - Typography and utility classes
 * ============================================================================
 */

/* ============================================================================
 * SECTION 1: Border Radius Utilities
 * ============================================================================
 * Provides consistent rounded corner styling for various UI components
 */

/* Large border radius (16px) with overflow hidden to prevent content overflow */
.outer-radius {
    border-radius: 16px;
    overflow: hidden;
}

/* Medium border radius (12px) with overflow hidden */
.inner-radius {
    border-radius: 12px;
    overflow: hidden;
}

/* ============================================================================
 * SECTION 2: Shadow Effects
 * ============================================================================
 * Provides shadow utilities for depth and visual hierarchy
 */

/* Subtle shadow effect with slight elevation on hover */
.card-shadow {
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
}

/* Increased shadow on hover for interactive feedback */
.card-shadow::hover {
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.2);
}

/* ============================================================================
 * SECTION 3: Scale/Transform Utilities
 * ============================================================================
 * Provides hover scale animations with different magnification levels
 */

/* Large scale effect: 5% increase on hover (0.4s transition) */
.scale-lg {
    transition: all 0.4s ease;
    will-change: transform;
}

.scale-lg:hover {
    transform: scale(1.05);
}

/* Small scale effect: 2% increase on hover (0.4s transition) */
.scale-sm {
    transition: all 0.4s ease;
    will-change: transform;
}

.scale-sm:hover {
    transform: scale(1.02);
}

/* Extra small scale effect: 0.7% increase on hover (0.4s transition) */
.scale-xs {
    transition: all 0.4s ease;
    will-change: transform;
}

.scale-xs:hover {
    transform: scale(1.007);
}

/* ============================================================================
 * SECTION 4: Photo Container
 * ============================================================================
 * Styling for image containers with overlaid text elements
 */

/* Container for positioning overlaid text on images */
.photo-container {
    position: relative;
    display: inline-block;
}

/* Image within container - responsive sizing */
.photo-container img {
    width: 100%;
    /* Adjust as needed */
    height: auto;
    /* Adjust as needed */
}

/* Text overlay positioned at top-left with semi-transparent background */
.photo-text {
    position: absolute;
    top: 10px;
    /* Adjust as needed */
    left: 10px;
    /* Adjust as needed */
    color: white;
    /* Adjust as needed */
    background-color: rgba(0, 0, 0, 0.5);
    /* Optional: background color with transparency */
    padding: 5px;
    /* Adjust as needed */
    font-size: 16px;
    /* Adjust as needed */
}

/* ============================================================================
 * SECTION 5: Icon Sizing (Feather Icons)
 * ============================================================================
 * Predefined size classes for Feather icon library
 */

/* Small icon size: 18px x 18px */
.feather-sm {
    width: 18px !important;
    height: 18px !important;
}

/* Medium icon size: 20px x 20px */
.feather-md {
    width: 20px !important;
    height: 20px !important;
}

/* Large icon size: 24px x 24px */
.feather-lg {
    width: 24px !important;
    height: 24px !important;
}

/* ============================================================================
 * SECTION 6: Table Styling
 * ============================================================================
 * Comprehensive styling for data tables with custom borders, padding, and effects
 */

/* Custom compact padding for table cells and headers (0.5rem) */
.custom-p2-table td,
.custom-p2-table th {
    padding: 0.5rem !important;
}

/* Horizontal divider between rows with negative margin to adjust alignment */
.cell-divider {
    border-top: 1px solid #dee2e6;
    margin: 12px -0.75rem;
    /* width: 100%; */
}

[data-bs-theme="dark"] .cell-divider,
body[data-theme="dark"] .cell-divider {
    border-top: 1px solid #4e5863;
}

/* Table with internal borders - cells separated by lines */
.inner-border {
    border-collapse: separate;
    border-spacing: 0;
}

/* Borders on right and bottom of all cells */
.inner-border th,
.inner-border td {
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

/* Remove right border from last column */
.inner-border th:last-child,
.inner-border td:last-child {
    border-right: none;
}

/* Remove bottom border from last row */
.inner-border tbody tr:last-child td {
    border-bottom: none;
}

/* Truncate cell content with ellipsis for long text */
.table > tbody > tr > td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pagination: Left button border radius (12px) */
.pagination .page-link.rounded-left-12 {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

/* Pagination: Right button border radius (12px) */
.pagination .page-link.rounded-right-12 {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* Base table styling with rounded corners and shadow */
.table {
    border-radius: 12px;
    overflow: hidden;
}

/* Table header styling: gray color, bold, uppercase, small font */
.table thead th {
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
}

/* Table row styling with subtle shadow and transition effects */
.table tbody tr {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    transition:
        transform 0.5s,
        box-shadow 0.5s;
}

/* Enhanced shadow on row hover for better interactivity */
.table tbody tr:hover {
    /* transform: scale(1.007); */
    box-shadow:
        0 -10px 12px rgba(0, 0, 0, 0.06),
        0 10px 12px rgba(0, 0, 0, 0.06);
    /* cursor: pointer; */
}

body[data-theme="dark"] .table tbody tr {
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.02);
    transition:
        transform 0.5s,
        box-shadow 0.5s;
}

body[data-theme="dark"] .table tbody tr:hover {
    box-shadow:
        0 -10px 12px rgba(255, 255, 255, 0.06),
        0 10px 12px rgba(255, 255, 255, 0.06);
}

/* Table cell vertical padding and alignment */
.table tbody td {
    padding-top: 1rem;
    padding-bottom: 1rem;
    vertical-align: middle;
}

/* ============================================================================
 * SECTION 7: Accordion Component Styling
 * ============================================================================
 * Styling for accordion items with rounded corners on first and last items
 */

/* Accordion item base styling with hidden overflow */
.accordion-item {
    /* border-radius: 0; */
    overflow: hidden;
}

/* Top border radius for the first accordion item */
.accordion-item:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* Bottom border radius for the last accordion item */
.accordion-item:last-child {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* Accordion button (clickable header) - apply top radius to first item */
.accordion-item:first-child .accordion-button {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* Accordion collapse area - apply bottom radius to last item */
.accordion-item:last-child .accordion-collapse {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* ============================================================================
 * SECTION 8: Dropdown Menu Styling
 * ============================================================================
 * Styling for dropdown menus and custom dropdown items
 */

/* Standard dropdown item with rounded corners and margin spacing */
.dropdown-item {
    border-radius: 8px;
    margin: 4px;
    width: calc(100% - 8px);
}

/* Custom dropdown item with rounded corners and margin spacing */
.custom-dropdown-item {
    border-radius: 8px;
    margin: 4px;
    width: calc(100% - 8px);
}

/* Custom dropdown item hover state with light blue background and blue text */
.custom-dropdown-item:hover {
    background: rgba(59, 125, 221, 0.1) !important;
    color: #3b7ddd;
}

/* ============================================================================
 * SECTION 9: Button Components
 * ============================================================================
 * Modern button styling with multiple color variants and interactive states
 */

/* Base button styling - applies to all buttons */
.btn {
    transition: all 0.4s ease;
}

/* ============================================================================
 * SOLID BUTTON VARIANTS - Filled background with white text
 * ============================================================================
 */

/* PRIMARY BUTTON - Bootstrap primary blue color */
.btn-primary {
    background: var(--bs-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(59, 125, 221, 0.3);
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--bs-primary-hover, #24539e) !important;
    color: #fff !important;
    border: 1px solid var(--bs-primary-hover, #24539e) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 125, 221, 0.4);
}

/* SECONDARY BUTTON - Bootstrap secondary gray color */
.btn-secondary {
    background: var(--bs-secondary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(92, 99, 106, 0.3);
}
.btn-secondary:hover,
.btn-secondary:focus {
    background: var(--bs-secondary-hover, #6c757d) !important;
    color: #fff !important;
    border: 1px solid var(--bs-secondary-hover, #6c757d) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(92, 99, 106, 0.4);
}

/* SUCCESS BUTTON - Bootstrap success green color */
.btn-success {
    background: var(--bs-success) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(28, 187, 140, 0.3);
}
.btn-success:hover,
.btn-success:focus {
    background: var(--bs-success-hover, #198754) !important;
    color: #fff !important;
    border: 1px solid var(--bs-success-hover, #198754) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(28, 187, 140, 0.4);
}

/* DANGER BUTTON - Bootstrap danger red color */
.btn-danger {
    background: var(--bs-danger) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}
.btn-danger:hover,
.btn-danger:focus {
    background: var(--bs-danger-hover, #a71d2a) !important;
    color: #fff !important;
    border: 1px solid var(--bs-danger-hover, #a71d2a) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(220, 53, 69, 0.4);
}

/* WARNING BUTTON - Bootstrap warning yellow color with dark text */
.btn-warning {
    background: var(--bs-warning) !important;
    color: #393e46 !important;
    box-shadow: 0 4px 12px rgba(252, 185, 44, 0.3);
}
.btn-warning:hover,
.btn-warning:focus {
    background: var(--bs-warning-hover, #fcb92c) !important;
    color: #393e46 !important;
    border: 1px solid var(--bs-warning-hover, #fcb92c) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(252, 185, 44, 0.4);
}

/* INFO BUTTON - Bootstrap info cyan color */
.btn-info {
    background: var(--bs-info) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(91, 192, 235, 0.3);
}
.btn-info:hover,
.btn-info:focus {
    background: var(--bs-info-hover, #148a9c) !important;
    color: #fff !important;
    border: 1px solid var(--bs-info-hover, #148a9c) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(91, 192, 235, 0.4);
}

/* LIGHT BUTTON - Light gray with dark text */
.btn-light {
    background: var(--bs-light) !important;
    color: #393e46 !important;
    box-shadow: 0 4px 12px rgba(246, 246, 246, 0.3);
}
.btn-light:hover,
.btn-light:focus {
    background: var(--bs-light-hover, #e9ecef) !important;
    color: #393e46 !important;
    border: 1px solid var(--bs-light-hover, #e9ecef) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(233, 236, 239, 0.4);
}

/* DARK BUTTON - Dark gray/black */
.btn-dark {
    background: var(--bs-dark) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(57, 62, 70, 0.3);
}
.btn-dark:hover,
.btn-dark:focus {
    background: var(--bs-dark-hover, #212529) !important;
    color: #fff !important;
    border: 1px solid var(--bs-dark-hover, #212529) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(33, 37, 41, 0.4);
}

/* ============================================================================
 * OUTLINE BUTTON VARIANTS - Transparent background with colored border
 * ============================================================================
 */

/* OUTLINE PRIMARY - Transparent with primary border, fills on hover */
.btn-outline-primary {
    background: transparent !important;
    color: var(--bs-primary) !important;
    box-shadow: none;
    transition: all 0.3s;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--bs-primary) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 125, 221, 0.15);
}

/* OUTLINE SECONDARY - Transparent with secondary border, fills on hover */
.btn-outline-secondary {
    background: transparent !important;
    color: var(--bs-secondary) !important;
    box-shadow: none;
    transition: all 0.3s;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: var(--bs-secondary) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(92, 99, 106, 0.15);
}

/* OUTLINE SUCCESS - Transparent with success border, fills on hover */
.btn-outline-success {
    background: transparent !important;
    color: var(--bs-success) !important;
    box-shadow: none;
    transition: all 0.3s;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
    background: var(--bs-success) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(28, 187, 140, 0.15);
}

/* OUTLINE DANGER - Transparent with danger border, fills on hover */
.btn-outline-danger {
    background: transparent !important;
    color: var(--bs-danger) !important;
    box-shadow: none;
    transition: all 0.3s;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background: var(--bs-danger) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15);
}

/* OUTLINE WARNING - Transparent with warning border, fills on hover */
.btn-outline-warning {
    background: transparent !important;
    color: var(--bs-warning) !important;
    box-shadow: none;
    transition: all 0.3s;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background: var(--bs-warning) !important;
    color: #393e46 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(252, 185, 44, 0.15);
}

/* OUTLINE INFO - Transparent with info border, fills on hover */
.btn-outline-info {
    background: transparent !important;
    color: var(--bs-info) !important;
    box-shadow: none;
    transition: all 0.3s;
}
.btn-outline-info:hover,
.btn-outline-info:focus {
    background: var(--bs-info) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(91, 192, 235, 0.15);
}

/* OUTLINE LIGHT - Transparent with light border, fills on hover */
.btn-outline-light {
    background: transparent !important;
    color: var(--bs-light) !important;
    box-shadow: none;
    transition: all 0.3s;
}
.btn-outline-light:hover,
.btn-outline-light:focus {
    background: var(--bs-light) !important;
    color: #393e46 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(246, 246, 246, 0.15);
}

/* OUTLINE DARK - Transparent with dark border, fills on hover */
.btn-outline-dark {
    background: transparent !important;
    color: var(--bs-dark) !important;
    box-shadow: none;
    transition: all 0.3s;
}
.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background: var(--bs-dark) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 37, 41, 0.15);
}

/* ============================================================================
 * SECTION 10: Utility Classes
 * ============================================================================
 */

/* Pointer cursor for interactive elements */
.d-pointer {
    cursor: pointer;
}

/* ============================================================================
 * SECTION 11: Typography - Urdu Font Support
 * ============================================================================
 * Styling for Urdu language text with right-to-left support
 */

/* Standard Urdu text with Noto Nastaliq font family */
.urdu-text {
    font-family: "Noto Nastaliq Urdu", "Times New Roman", serif;
    font-weight: 400;
    /* direction: rtl;
    text-align: right; */
}

/* Bold Urdu text with increased font weight (600) */
.urdu-text-bold {
    font-family: "Noto Nastaliq Urdu", "Times New Roman", serif;
    font-weight: 600;
    /* direction: rtl;
    text-align: right; */
}

/* Print stylesheet - Urdu text with right-to-left direction for printing */
@media print {
    .urdu-text,
    .urdu-text-bold {
        font-family: "Noto Nastaliq Urdu", "Times New Roman", serif;
        direction: rtl;
        text-align: right;
    }
}

/* ============================================================================
 * SECTION 12: Flatpickr Dark Theme Support
 * ============================================================================
 * Aligns the flatpickr calendar with the app's dark theme palette.
 */
[data-bs-theme="dark"] .flatpickr-calendar,
body[data-theme="dark"] .flatpickr-calendar {
    background: #222e3c;
    border: 1px solid #4e5863;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    color: #e9eaec;
    border-radius: 12px;
    overflow: visible;
}

[data-bs-theme="dark"] .flatpickr-months .flatpickr-month,
body[data-theme="dark"] .flatpickr-months .flatpickr-month {
    color: #e9eaec;
}

[data-bs-theme="dark"] .flatpickr-weekdays,
body[data-theme="dark"] .flatpickr-weekdays {
    background: #222e3c;
    color: #bdc0c5;
}

[data-bs-theme="dark"] .flatpickr-weekday,
body[data-theme="dark"] .flatpickr-weekday {
    color: #bdc0c5;
}

[data-bs-theme="dark"] .flatpickr-day,
body[data-theme="dark"] .flatpickr-day {
    color: #e9eaec;
    border-color: transparent;
}

[data-bs-theme="dark"] .flatpickr-day.prevMonthDay,
[data-bs-theme="dark"] .flatpickr-day.nextMonthDay,
[data-bs-theme="dark"] .flatpickr-day.disabled,
body[data-theme="dark"] .flatpickr-day.prevMonthDay,
body[data-theme="dark"] .flatpickr-day.nextMonthDay,
body[data-theme="dark"] .flatpickr-day.disabled {
    color: #7a828a;
}

[data-bs-theme="dark"] .flatpickr-day:hover,
body[data-theme="dark"] .flatpickr-day:hover {
    background: rgba(59, 125, 221, 0.15);
    color: #fff;
}

[data-bs-theme="dark"] .flatpickr-day.selected,
[data-bs-theme="dark"] .flatpickr-day.startRange,
[data-bs-theme="dark"] .flatpickr-day.endRange,
body[data-theme="dark"] .flatpickr-day.selected,
body[data-theme="dark"] .flatpickr-day.startRange,
body[data-theme="dark"] .flatpickr-day.endRange {
    background: #3b7ddd;
    border-color: #3b7ddd;
    color: #fff;
}

[data-bs-theme="dark"] .flatpickr-day.inRange,
body[data-theme="dark"] .flatpickr-day.inRange {
    background: rgba(59, 125, 221, 0.12);
    color: #e9eaec;
}

[data-bs-theme="dark"] .flatpickr-day.today,
body[data-theme="dark"] .flatpickr-day.today {
    border-color: #3b7ddd;
    color: #e9eaec;
}

[data-bs-theme="dark"] .flatpickr-calendar.arrowTop:before,
body[data-theme="dark"] .flatpickr-calendar.arrowTop:before {
    border-bottom-color: #4e5863;
}

[data-bs-theme="dark"] .flatpickr-calendar.arrowTop:after,
body[data-theme="dark"] .flatpickr-calendar.arrowTop:after {
    border-bottom-color: #222e3c;
}

[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:before,
body[data-theme="dark"] .flatpickr-calendar.arrowBottom:before {
    border-top-color: #4e5863;
}

[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:after,
body[data-theme="dark"] .flatpickr-calendar.arrowBottom:after {
    border-top-color: #222e3c;
}

[data-bs-theme="dark"] .flatpickr-time,
body[data-theme="dark"] .flatpickr-time {
    border-top: 1px solid #4e5863;
}

[data-bs-theme="dark"] .flatpickr-time input,
body[data-theme="dark"] .flatpickr-time input {
    color: #e9eaec;
}

[data-bs-theme="dark"] .flatpickr-time .flatpickr-time-separator,
body[data-theme="dark"] .flatpickr-time .flatpickr-time-separator {
    color: #bdc0c5;
}

[data-bs-theme="dark"] .flatpickr-prev-month svg,
[data-bs-theme="dark"] .flatpickr-next-month svg,
body[data-theme="dark"] .flatpickr-prev-month svg,
body[data-theme="dark"] .flatpickr-next-month svg {
    fill: #e9eaec;
    stroke: #e9eaec;
}