/* Custom styles to complement Bootstrap */
:root {
    --pink-primary: #FF9BB3 !important;
    --pink-secondary: #FFD1DC !important;
    --pink-light: #FFF0F5 !important;
    --pink-dark: #FF85A1 !important;
    --pink-hover: #FF7B9C !important;
    --pink-muted: #FFB6C1 !important;
}

/* Flash message styling */
.flash-messages {
    position: relative;
    z-index: 1000;
    margin-bottom: 1rem;
}

.alert {
    background: rgba(255, 255, 255, 0.95);
    border-left: 4px solid;
    margin-bottom: 0.5rem;
    padding: 1rem;
    border-radius: 0.25rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.alert-warning {
    border-left-color: var(--pink-dark);
    color: var(--pink-dark);
    background-color: var(--pink-light);
}

.alert-info {
    border-left-color: var(--pink-primary);
    color: var(--pink-primary);
    background-color: var(--pink-light);
}

.alert-success {
    border-left-color: #28a745;
    color: #155724;
    background-color: #d4edda;
}

.alert-danger {
    border-left-color: #dc3545;
    color: #721c24;
    background-color: #f8d7da;
}

.alert .btn-close {
    padding: 1.05rem;
}

/* General styles */
body {
    background-color: #ffffff;
    color: #212529;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
    -webkit-tap-highlight-color: rgba(255, 155, 179, 0.2);
}

.navbar {
    margin-bottom: 1rem;
    background-color: var(--pink-primary);
}

.card {
    margin-bottom: 1rem;
    border-color: var(--pink-secondary);
    border-radius: 0.5rem;
}

.card-header {
    background-color: var(--pink-secondary);
    border-bottom: 1px solid var(--pink-muted);
    border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0 !important;
}

/* Enhanced table styles for mobile */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    margin: 0 -1rem;
    padding: 0 1rem;
    position: relative;
}

/* Custom scrollbar for table scroll */
.table-responsive::-webkit-scrollbar {
    height: 6px;
}

.table-responsive::-webkit-scrollbar-track {
    background: var(--pink-light);
    border-radius: 3px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--pink-muted);
    border-radius: 3px;
}

/* Table styles */
.table {
    margin-bottom: 0;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .table {
        font-size: 0.9rem;
    }

    .table td, 
    .table th {
        padding: 0.75rem 0.5rem;
        min-height: 48px; /* Minimum touch target size */
        vertical-align: middle;
    }

    /* Stack certain columns on mobile */
    .table-stack-mobile td {
        display: block;
        width: 100%;
        text-align: left;
        border: none;
        padding: 0.5rem;
    }

    .table-stack-mobile td:before {
        content: attr(data-label);
        font-weight: 600;
        display: inline-block;
        width: 40%;
    }

    /* Improve touch targets */
    .table .btn,
    .table .btn-group .btn {
        padding: 0.625rem;
        min-height: 44px;
        min-width: 44px;
        margin: 0.125rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .table .feather {
        width: 18px;
        height: 18px;
    }

    /* Better spacing for action buttons */
    .table .btn-group {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    /* Improved mobile card layout */
    .card-body {
        padding: 1rem;
    }

    /* Enhanced form controls */
    .form-control,
    .form-select {
        min-height: 44px;
        font-size: 16px; /* Prevent iOS zoom */
        padding: 0.625rem;
    }

    /* Better button touch targets */
    .btn {
        min-height: 44px;
        padding: 0.625rem 1rem;
        font-size: 1rem;
    }

    /* Improved dropdown menus */
    .dropdown-menu {
        min-width: 200px;
        padding: 0.5rem;
    }

    .dropdown-item {
        padding: 0.625rem 1rem;
        min-height: 44px;
    }
}

/* Client table specific text styling */
.table tbody tr td,
.table tbody tr td *,
.table tbody tr td a,
.table tbody tr td span,
.table tbody tr td div,
#clientsTable tbody tr td,
#clientsTable tbody tr td *,
#clientsTable tbody tr td a,
#clientsTable tbody tr td span,
#clientsTable tbody tr td div {
    color: var(--bs-gray-700) !important;
    text-decoration: none !important;
}

/* Ensure muted text and small text uses lighter gray */
.table .text-muted,
.table .small,
.table td .small,
#clientsTable .text-muted,
#clientsTable .small,
#clientsTable td .small {
    color: var(--bs-gray-600) !important;
}

/* Table header styling */
.table thead th,
.table th,
#clientsTable thead th,
#clientsTable th {
    color: var(--bs-gray-700) !important;
}

/* Client name hover styling */
.table tbody tr td a:hover,
.table tbody tr td a:active,
#clientsTable tbody tr td a:hover,
#clientsTable tbody tr td a:active,
.table a:not(.btn):hover,
.table a:not(.btn):active {
    color: var(--pink-primary) !important;
}

/* Ensure client names have proper contrast in normal state */
.table tbody tr td a,
.table tbody tr td a:link,
.table tbody tr td a:visited,
#clientsTable tbody tr td a,
#clientsTable tbody tr td a:link,
#clientsTable tbody tr td a:visited,
.table a:not(.btn),
.table a:not(.btn):link,
.table a:not(.btn):visited {
    color: var(--bs-gray-700) !important;
}

/* Button styling */
.btn-primary {
    background-color: var(--pink-primary);
    border-color: var(--pink-primary);
}

.btn-primary:hover {
    background-color: var(--pink-hover);
    border-color: var(--pink-hover);
}

.btn-outline-primary {
    color: var(--pink-primary);
    border-color: var(--pink-primary);
}

.btn-outline-primary:hover {
    background-color: var(--pink-primary);
    border-color: var(--pink-primary);
}

/* Update outline button styling */
.btn-outline-secondary {
    color: var(--bs-gray-700);
    border-color: var(--bs-gray-400);
}

.btn-outline-secondary:hover {
    color: white;
    background-color: var(--bs-gray-600);
    border-color: var(--bs-gray-600);
}

/* Ensure consistent button styling in tables */
.table .btn-outline-secondary,
.table .btn-outline-primary {
    border-color: var(--bs-gray-400);
}

.table .btn-outline-secondary:hover,
.table .btn-outline-primary:hover {
    border-color: var(--bs-gray-600);
}

/* Support ticket styling improvements */
.message-bubble {
    border-radius: 15px;
    padding: 1rem;
    margin-bottom: 1rem;
    max-width: 80%;
}

.message-bubble.admin {
    background-color: var(--pink-secondary);
    margin-right: auto;
}

.message-bubble.user {
    background-color: var(--pink-primary);
    color: white;
    margin-left: auto;
}

.message-meta {
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

/* Form improvements */
.form-control:focus {
    border-color: var(--pink-primary);
    box-shadow: 0 0 0 0.25rem rgba(255, 155, 179, 0.25);
}

/* Alert styling */
.alert {
    background: transparent;
    border-color: var(--pink-primary);
    color: var(--pink-dark);
    margin: 1rem 0;
    border-radius: 0.5rem;
}

.alert .btn-close {
    color: var(--pink-dark);
}

.alert a.btn {
    background-color: var(--pink-primary);
    color: white;
}

.alert a.btn:hover {
    background-color: var(--pink-hover);
}

/* Mobile Improvements */
@media (max-width: 768px) {
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .card {
        margin-bottom: 1rem;
    }

    /* Improved table responsiveness */
    .table-responsive {
        margin: 0;
        padding: 0;
        border-radius: 0.5rem;
    }

    /* Better button sizing and spacing */
    .btn {
        padding: 0.6rem 1rem;
        font-size: 1rem;
        margin: 0.25rem 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 42px;
    }

    /* Improved action buttons */
    .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        width: 100%;
    }

    .btn-group .btn {
        flex: 1;
        margin: 0;
    }

    /* Card improvements */
    .card-body {
        padding: 1rem;
    }

    /* Form improvements */
    .form-group {
        margin-bottom: 1rem;
    }

    .form-control {
        min-height: 42px;
    }

    /* Table improvements */
    .table th,
    .table td {
        padding: 0.75rem 0.5rem;
        vertical-align: middle;
    }

    .table .btn {
        padding: 0.4rem;
        min-height: 32px;
    }

    .table .feather {
        width: 16px;
        height: 16px;
    }

    /* Quick actions card */
    .card .d-grid {
        gap: 0.5rem;
    }

    .card .d-grid .btn {
        margin: 0;
    }

    /* Alert improvements */
    .alert {
        margin: 1rem 0;
        padding: 1rem;
    }

    /* Row and column spacing */
    .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .col, [class*="col-"] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Date picker and form inputs */
    input[type="date"].form-control {
        min-height: 42px;
    }

    /* Better dropdown positioning */
    .dropdown-menu {
        width: 100%;
        min-width: 200px;
    }
}

/* Feather icon improvements */
.feather {
    stroke-width: 2;
    vertical-align: middle;
    width: 20px;
    height: 20px;
}

/* Support for dark mode */
@media (prefers-color-scheme: dark) {
    .btn-outline-secondary {
        color: var(--bs-gray-300);
        border-color: var(--bs-gray-600);
    }

    .btn-outline-secondary:hover {
        color: var(--bs-white);
        background-color: var(--bs-gray-700);
        border-color: var(--bs-gray-700);
    }
}