/* Roster Nerd - Tailwind-Compatible Custom Styles */

/* Bootstrap compatibility for JavaScript */
.d-none {
    display: none !important;
}

.hide {
    display: none !important;
}

.show {
    display: block !important;
}

/* Position Statistics Display */
.position-stats {
    @apply text-sm flex flex-wrap items-center gap-2;
}

.stat-item {
    @apply inline-flex items-center gap-1;
}

.stat-item small {
    @apply font-medium;
}

.year-distribution {
    @apply inline-flex items-center gap-2;
}

.year-counts {
    @apply inline-flex items-center gap-1 font-semibold;
}

.year-count {
    @apply whitespace-nowrap;
}

.year-counts .separator {
    @apply text-base-300 mx-0.5;
}

/* Mobile responsive statistics - using Tailwind responsive utilities */
@media (max-width: 991px) {
    .position-stats {
        @apply flex-wrap text-xs gap-2;
    }

    .stat-item {
        @apply flex-auto;
    }

    .year-distribution {
        @apply w-full justify-start;
    }
}

@media (max-width: 575px) {
    .position-stats {
        @apply mt-2 w-full;
    }

    .year-counts {
        @apply text-xs;
    }
}

/* Position Headers - New Layout */
.position-header-sticky {
    @apply transition-all duration-200 hover:bg-base-200/70;
}

.position-header-sticky:hover {
    @apply shadow-sm;
}

/* Unit Headers with Expand/Collapse Controls */
.unit-header {
    @apply p-4 border-b border-base-300/50;
}

.unit-header h2 {
    @apply text-lg font-bold;
}

.unit-header .join {
    @apply flex-shrink-0;
}

.unit-header .btn {
    @apply transition-all duration-200;
}

.unit-header .btn:hover {
    @apply scale-105;
}

.unit-header .btn.btn-disabled {
    @apply opacity-50 cursor-not-allowed;
}

.unit-header .btn.btn-disabled:hover {
    @apply scale-100;
}

/* Position Quick Jump Navigation */
.position-nav-container {
    @apply relative;
}

.position-nav-scroll {
    @apply overflow-x-auto flex-1;
    -webkit-overflow-scrolling: touch;
}

.position-nav-links {
    @apply flex-nowrap py-1;
}

.position-jump-link {
    @apply text-sm px-2.5 py-1.5 whitespace-nowrap transition-all duration-200 cursor-pointer;
}

.position-jump-link:hover {
    @apply -translate-y-0.5 shadow-md;
}

.position-jump-link:active {
    @apply translate-y-0;
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Add some offset to account for fixed headers */
.position-group {
    scroll-margin-top: 20px;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .position-nav-links {
        gap: 0.375rem !important;
    }

    .position-jump-link {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .position-nav-container .text-muted {
        font-size: 0.75rem;
    }

    /* Unit header mobile responsiveness */
    .unit-header {
        @apply flex-col gap-3 items-start;
    }

    .unit-header .join {
        @apply w-full justify-center;
    }

    .unit-header .join .btn {
        @apply flex-1;
    }
}

/* Back to Top Button */
#backToTopBtn {
    @apply hidden fixed bottom-5 right-5 z-50 w-12 h-12 rounded-full border-0 bg-primary text-primary-content cursor-pointer shadow-lg transition-all duration-300 p-0 flex items-center justify-center;
}

#backToTopBtn:hover {
    @apply -translate-y-0.5 shadow-xl opacity-85;
}

#backToTopBtn:active {
    @apply -translate-y-px;
}

#backToTopBtn i {
    @apply text-xl;
}

/* Mobile adjustments for back to top button */
@media (max-width: 767px) {
    #backToTopBtn {
        width: 45px;
        height: 45px;
        bottom: 15px;
        right: 15px;
    }

    #backToTopBtn i {
        font-size: 1.25rem;
    }
}

/* Hide dropdown arrows in table to save space */
.table .select {
    @apply appearance-none bg-transparent border-0 cursor-pointer;
}

.table .select:hover {
    @apply bg-base-200;
}

.table .select:focus {
    @apply bg-base-100 border-primary ring-2 ring-primary/25;
}

/* Override the base container to be wider for better screen utilization */
@media (min-width: 1280px) {
    body .container {
        @apply max-w-[96%];
    }
}
@media (min-width: 1536px) {
    body .container {
        @apply max-w-[94%];
    }
}
@media (min-width: 1920px) {
    body .container {
        @apply max-w-7xl;
    }
}

/* Draft/Unsaved Player Row Styles */
.player-row[data-unsaved="true"] {
    @apply relative bg-base-50 rounded-lg border-2 border-dashed border-base-300;
}

/* Style form fields in draft rows to be clearly editable */
.player-row[data-unsaved="true"] .input,
.player-row[data-unsaved="true"] .select {
    @apply border border-base-300 bg-base-100 rounded;
}

/* Focus styles for form fields in draft rows */
.player-row[data-unsaved="true"] .input:focus,
.player-row[data-unsaved="true"] .select:focus {
    @apply border-primary ring-2 ring-primary/25;
}

/* Layout and Navigation */
.navbar {
    @apply mb-5;
}

.card {
    @apply mb-5;
}

/* Footer spacing - removed conflicting text-center that interferes with custom layouts */
.footer {
    @apply mt-12 py-5 bg-base-200;
}

.navbar-brand {
    @apply font-bold;
}

.user-dropdown {
    @apply text-white;
}

/* Position Cards - DaisyUI Compatible */
.position-card {
    @apply transition-all duration-300 card bg-base-100 shadow-lg hover:shadow-2xl;
}

.position-card:hover {
    @apply -translate-y-1;
}

.recruit-needed {
    @apply bg-warning/20;
}

.recruit-complete {
    @apply bg-success/20;
}

.roster-shortage {
    @apply bg-error/20;
}

/* Active Navigation Styles - DaisyUI Compatible */
/* Desktop navbar active states */
.navbar .menu a.active {
    background-color: rgba(0, 116, 217, 0.1); /* primary/10 */
    color: #0074d9; /* primary */
    font-weight: 600;
    border-bottom: 2px solid #0074d9; /* primary */
    position: relative;
    transition: all 0.2s ease;
}

/* Mobile dropdown active states */
.navbar .dropdown .menu a.active {
    background-color: rgba(0, 116, 217, 0.15); /* primary/15 */
    color: #0074d9; /* primary */
    font-weight: 600;
    border-left: 4px solid #0074d9; /* primary */
    border-bottom: 0;
    transition: all 0.2s ease;
}

.navbar .dropdown .menu a.active::before {
    display: none;
}

/* Active dropdown summary (parent) when child is active */
.navbar .menu details:has(a.active) > summary {
    color: #0074d9; /* primary */
    font-weight: 600;
}

/* Hover states that don't conflict with active */
.navbar .menu a:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.7); /* base-200/70 */
    transition: all 0.2s ease;
}

.navbar .dropdown .menu a:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.9); /* base-200 */
    transition: all 0.2s ease;
}

/* Dark theme adjustments */
[data-theme="dark"] .navbar .menu a.active {
    background-color: rgba(0, 116, 217, 0.2);
}

[data-theme="dark"] .navbar .dropdown .menu a.active {
    background-color: rgba(0, 116, 217, 0.25);
}

[data-theme="dark"] .navbar .menu a:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .navbar .dropdown .menu a:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Tab active states for roster pages */
.tabs .tab.tab-active {
    color: #0074d9; /* primary */
    font-weight: 600;
    border-bottom: 2px solid #0074d9; /* primary */
    position: relative;
    transition: all 0.2s ease;
}

.tabs .tab.tab-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px; /* -bottom-2 */
    width: 8px; /* w-2 */
    height: 8px; /* h-2 */
    background-color: #0074d9; /* primary */
    border-radius: 50%; /* rounded-full */
    transform: translateX(-50%);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Tab hover states */
.tabs .tab:not(.tab-active):hover {
    color: rgba(0, 116, 217, 0.7); /* primary/70 */
    border-color: rgba(0, 116, 217, 0.3); /* primary/30 */
    transition: all 0.2s ease;
}

/* Legacy styles for backward compatibility */
.nav-link.active {
    @apply bg-primary/10 text-primary font-semibold;
}

.dropdown-item.active {
    @apply bg-primary text-primary-content;
}

/* Inline Editable Table Styles */
.player-field {
    @apply bg-base-200 border border-base-300 transition-all duration-200 cursor-text input input-sm input-bordered;
}

.player-field:hover {
    @apply bg-base-300 border-base-400;
}

.player-field:focus {
    @apply bg-base-100 border-2 border-primary ring-2 ring-primary/25;
}

.player-field[type="number"],
.player-field select {
    cursor: pointer;
}

.player-row:hover {
    @apply bg-base-100;
}

/* Table Layout and Responsiveness */
.table-responsive {
    overflow-x: auto;
}

.table-sm th,
.table-sm td {
    @apply px-1;
}

.table .select {
    @apply pr-1;
}

/* Height Input Styling */
.height-input {
    width: 30px;
}

.height-input.feet {
    width: 50px;
}

.height-input.inches {
    width: 55px;
}

.height-container {
    white-space: nowrap;
}

/* Jersey Number Input Styling */
.jersey-input {
    width: 55px;
}

/* Start OVR Editing Styles */
.start-ovr-display {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    min-height: 1.5rem;
    min-width: 30px;
    text-align: center;
}

.start-ovr-display:hover {
    background-color: #e9ecef;
}

.start-ovr-input {
    width: 60px;
}

/* Remove dropdown arrow for cleaner navigation */
.navbar .dropdown-toggle::after {
    @apply hidden;
}

/* Improve dropdown spacing and mobile experience */
.dropdown-menu {
    @apply border-0 shadow-lg mt-0.5;
}

.dropdown-item {
    @apply px-4 py-2 transition-all duration-150;
}

.dropdown-item:hover {
    @apply bg-primary text-primary-content translate-x-1;
}

/* Batch Editing Styles - Changed Fields Highlighting */
.player-field.field-changed {
    @apply bg-warning/20 border-2 border-warning relative;
}

.player-field.field-changed:focus {
    @apply bg-base-100 border-2 border-warning ring-2 ring-warning/25;
}

/* Player row with unsaved changes */
.player-row.has-changes {
    @apply bg-warning/10 border-l-4 border-warning;
}

/* Save/Cancel Button Group */
.batch-edit-controls {
    @apply sticky right-0 bg-base-100/95 backdrop-blur-sm z-10 min-w-[120px];
}

.batch-edit-controls.show {
    @apply opacity-100 visible translate-x-0 transition-all duration-300;
}

.batch-edit-controls.hide {
    @apply opacity-0 invisible translate-x-5 transition-all duration-300;
}

/* Loading state for batch operations */
.player-row.saving {
    @apply opacity-70 pointer-events-none;
}

.player-row.saving::after {
    @apply absolute top-1/2 left-1/2 w-5 h-5 -ml-2.5 -mt-2.5 border-2 border-primary rounded-full border-t-transparent animate-spin z-[1000];
    content: "";
}

/* Change indicator badge */
.changes-indicator {
    @apply absolute -top-2 -right-2 text-xs min-w-[18px] h-[18px] leading-[14px] rounded-full bg-error text-error-content text-center border-2 border-base-100 z-[5];
}

/* Mobile optimization for dropdowns */
@media (max-width: 991.98px) {
    .dropdown-menu {
        @apply static w-auto m-0 bg-transparent border-0 shadow-none;
        float: none;
    }

    .dropdown-item {
        @apply py-2 px-6 text-white/85;
    }

    .dropdown-item:hover {
        @apply bg-white/10 transform-none;
    }

    .dropdown-item.active {
        @apply bg-white/20;
    }

    /* Stack batch edit controls on mobile */
    .batch-edit-controls {
        @apply relative min-w-0 bg-transparent;
    }

    .batch-edit-controls .btn-group {
        @apply flex-col gap-1;
    }
}

/* Mobile Responsive Card Layout - Enhanced Mobile Experience */
@media (max-width: 767.98px) {
    /* Mobile-specific form field optimizations */
    .mobile-player-field {
        @apply min-h-[44px] text-base;
    }

    .mobile-player-field.input {
        @apply px-4 py-3;
    }

    .mobile-player-field.select {
        @apply px-3 py-3;
    }

    /* Enhanced mobile touch targets for buttons */
    .btn-md {
        @apply min-h-[44px] px-4 py-3 text-base;
    }

    .btn-sm {
        @apply min-h-[40px] px-3 py-2 text-sm;
    }

    /* Mobile card improvements */
    .player-card {
        @apply shadow-md;
    }

    .player-card:hover {
        @apply shadow-lg transform-none;
    }

    /* Improved mobile collapse sections */
    .collapse-title {
        @apply min-h-[48px] text-base font-medium;
    }

    .collapse-arrow:after {
        @apply w-4 h-4;
    }

    /* Mobile dropdown improvements */
    .dropdown-content {
        @apply min-w-[180px] shadow-xl border border-base-200;
    }

    .dropdown-content .menu li > * {
        @apply py-3 px-4 text-base min-h-[44px] flex items-center;
    }

    .dropdown-content .menu li > *:hover {
        @apply transform-none;
    }

    /* Mobile badge sizing */
    .badge-md {
        @apply h-7 px-3 text-sm;
    }

    .badge-sm {
        @apply h-6 px-2 text-xs;
    }

    /* Mobile star rating improvements */
    .rating input {
        @apply w-6 h-6;
    }

    .rating-sm input {
        @apply w-5 h-5;
    }

    /* Mobile join component improvements */
    .join-item {
        @apply border-r border-base-300;
    }

    .join-item:last-child {
        @apply border-r-0;
    }

    /* Mobile form improvements */
    .form-control .label {
        @apply pb-2;
    }

    .label-text {
        @apply text-base font-medium;
    }

    /* Mobile progressive disclosure improvements */
    .collapse {
        @apply rounded-lg border border-base-200;
    }

    .collapse-title {
        @apply bg-base-50 rounded-t-lg;
    }

    .collapse[open] .collapse-title {
        @apply rounded-t-lg rounded-b-none;
    }

    .collapse-content {
        @apply bg-base-25 rounded-b-lg;
    }

    /* Enhanced mobile spacing and layout */
    .space-y-4 > :not([hidden]) ~ :not([hidden]) {
        @apply mt-6;
    }

    .gap-3 {
        @apply gap-4;
    }

    .gap-2 {
        @apply gap-3;
    }

    /* Mobile card body spacing */
    .card-body {
        @apply p-5;
    }

    .card-compact .card-body {
        @apply p-4;
    }

    /* Position card styling */
    .position-card-mobile {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        margin-bottom: 2rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        position: relative;
    }

    /* Add visual separation between positions */
    .position-card-mobile::after {
        content: "";
        position: absolute;
        bottom: -1rem;
        left: 50%;
        transform: translateX(-50%);
        width: 50%;
        height: 2px;
        background: linear-gradient(90deg, transparent, #dee2e6, transparent);
    }

    .position-card-mobile .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem 0.5rem 0 0;
    }

    .position-card-mobile .card-body {
        padding: 1rem;
    }

    /* Player card within position */
    .player-card-mobile {
        background: #ffffff;
        border: 2px solid #dee2e6;
        border-radius: 0.5rem;
        padding: 1rem;
        margin-bottom: 1rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        position: relative;
    }

    .player-card-mobile:last-child {
        margin-bottom: 0;
    }

    /* Add subtle left border color coding */
    .player-card-mobile:nth-child(odd) {
        border-left: 4px solid #007bff;
    }

    .player-card-mobile:nth-child(even) {
        border-left: 4px solid #28a745;
    }

    /* Enhanced hover effect */
    .player-card-mobile:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        border-color: #adb5bd;
        transition: all 0.2s ease;
    }

    /* Mobile sections for organized field grouping */
    .mobile-section {
        @apply mb-6 pb-4 border-b-2 border-base-200;
    }

    .mobile-section:last-of-type {
        @apply border-b-0 mb-0 pb-0;
    }

    .mobile-section-title {
        @apply text-base font-semibold text-base-content/80 mb-4 p-3 bg-base-200/50 rounded-md border-l-4 border-primary;
    }

    /* Field rows for horizontal layout */
    .mobile-field-row {
        @apply flex flex-wrap gap-3 mb-4;
    }

    .mobile-field-row:last-child {
        @apply mb-0;
    }

    /* Field groups in mobile cards */
    .mobile-field-group {
        @apply flex-1 min-w-[140px] flex flex-col gap-2;
    }

    .mobile-field-label {
        @apply font-medium text-base-content/60 text-sm uppercase tracking-wider;
    }

    .mobile-field-value {
        @apply flex-1;
    }

    .mobile-field-value .form-control,
    .mobile-field-value .form-select {
        @apply w-full text-base;
    }

    /* Height fields in mobile */
    .mobile-height-inputs {
        @apply flex gap-2 items-center;
    }

    .mobile-height-inputs input {
        @apply flex-1 max-w-[70px];
    }

    .mobile-height-inputs .form-text {
        @apply text-sm text-base-content/60 font-medium;
    }

    /* Name field special handling */
    .mobile-name-group {
        margin: -1rem -1rem 0.75rem -1rem;
        padding: 0.75rem 1rem;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-bottom: 2px solid #dee2e6;
        border-radius: 0.5rem 0.5rem 0 0;
        position: relative;
    }

    .mobile-name-group::before {
        content: "👤";
        position: absolute;
        top: 0.5rem;
        right: 1rem;
        font-size: 1.2rem;
        opacity: 0.3;
    }

    .mobile-name-inputs {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.25rem;
    }

    .mobile-name-inputs input {
        flex: 1;
        background: #ffffff;
        border: 1px solid #ced4da;
    }

    /* Actions in mobile cards */
    .mobile-actions {
        margin: 0.75rem -1rem -1rem -1rem;
        padding: 0.75rem 1rem;
        background: #f8f9fa;
        border-top: 1px solid #dee2e6;
        border-radius: 0 0 0.5rem 0.5rem;
        text-align: center;
    }

    /* Player count indicator */
    .position-card-mobile .card-header::after {
        content: "Player " counter(player-counter);
        counter-increment: player-counter;
        font-size: 0.75rem;
        color: #6c757d;
        float: right;
        background: #fff;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        border: 1px solid #dee2e6;
    }

    .position-card-mobile .card-body {
        counter-reset: player-counter;
    }

    /* Simple mode position counter card */
    .simple-position-card-mobile {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
        overflow: hidden;
    }

    .simple-position-header-mobile {
        background-color: #f8f9fa;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #dee2e6;
        font-weight: 600;
    }

    .simple-position-body-mobile {
        padding: 1rem;
    }

    .simple-year-row-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
        padding: 0.5rem;
        background: #f8f9fa;
        border-radius: 0.375rem;
    }

    .simple-year-row-mobile:last-child {
        margin-bottom: 0;
    }

    .simple-year-label-mobile {
        font-weight: 500;
        color: #495057;
        min-width: 80px;
    }

    .simple-year-input-mobile {
        width: 80px;
    }

    .simple-total-mobile {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 2px solid #007bff;
        text-align: center;
        font-weight: 600;
        color: #007bff;
    }
}

/* Desktop styles - removed conflicting display rules to let Tailwind responsive classes work properly */
@media (min-width: 768px) {
    /* Removed conflicting display rules to let Tailwind responsive classes work properly */
}

/* Custom style to shrink jersey number input on specific laptop screen sizes */
@media (min-width: 1295px) and (max-width: 1535px) {
  input[name="jersey_number"] {
    width: 4rem; /* equivalent to w-16, down from w-20 */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}