/* Custom Styles for Skykru Office */

/* Black Checkbox for Permissions Page */

/* Base style for unchecked state - Light Mode */
input[type="checkbox"].checkbox-black {
    appearance: none;
    /* Remove default appearance to fully control styling */
    -webkit-appearance: none;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    /* gray-300 */
    border-radius: 6px !important;
    /* Increased radius */
    width: 1.25rem;
    /* h-5 */
    height: 1.25rem;
    /* w-5 */
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    user-select: none;
    flex-shrink: 0;
    transition: all 0.2s ease-in-out;
    accent-color: #2563eb !important;
    /* Blue-600 */
}

/* Checked State - Both Modes */
input[type="checkbox"].checkbox-black:checked {
    background-color: #2563eb !important;
    /* Blue-600 */
    border-color: #2563eb !important;
    color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* Focus State */
input[type="checkbox"].checkbox-black:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-color: #2563eb;
    /* Blue-600 */
    --tw-ring-opacity: 0.2;
    box-shadow: 0 0 0 2px var(--tw-ring-color);
}

/* Dark Mode - Unchecked State */
.dark input[type="checkbox"].checkbox-black {
    background-color: #0f172a !important;
    /* Slate 900 */
    border-color: #475569 !important;
    /* Slate 600 */
}

/* Dark Mode - Checked State */
.dark input[type="checkbox"].checkbox-black:checked {
    background-color: #2563eb !important;
    /* Blue-600 */
    border-color: #2563eb !important;
}

/* ------------------------------------------------------------
   Flatpickr Custom Theme (Blue/Slate) matching Trevo Design
   ------------------------------------------------------------ */

/* Container */
.flatpickr-calendar {
    font-family: 'Inter', sans-serif !important;
    border: 1px solid #e2e8f0 !important;
    /* Slate-200 */
    border-radius: 1rem !important;
    /* Rounded-2xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    background: #ffffff !important;
    width: 320px !important;
    padding: 0.5rem !important;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
    border-bottom-color: #ffffff !important;
}

/* Header (Month/Year) */
.flatpickr-months {
    background: transparent !important;
    color: #1e293b !important;
    /* Slate-800 */
    fill: #1e293b !important;
    margin-bottom: 0.5rem !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: #64748b !important;
    /* Slate-500 */
    fill: #64748b !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: #2563eb !important;
    /* Blue-600 */
}

.flatpickr-current-month {
    color: #1e293b !important;
    font-weight: 600 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: 600 !important;
}

/* Weekdays */
.flatpickr-weekdays {
    background: transparent !important;
}

.flatpickr-weekday {
    background: transparent !important;
    color: #94a3b8 !important;
    /* Slate-400 */
    font-weight: 500 !important;
    font-size: 0.75rem !important;
}

/* Days */
.flatpickr-day {
    color: #64748b !important;
    /* Slate-500 for non-current month */
    border-radius: 0.5rem !important;
    /* Rounded-lg */
    font-weight: 400 !important;
    /* Normal weight */
}

/* Current Month Days - Bold & Darker */
.flatpickr-day:not(.prevMonthDay):not(.nextMonthDay) {
    color: #1e293b !important;
    /* Slate-800 */
    font-weight: 700 !important;
    /* Bold */
}

.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus {
    background: #f1f5f9 !important;
    /* Slate-100 */
    border-color: #f1f5f9 !important;
}

.flatpickr-day.today {
    border-color: #eff6ff !important;
    /* Blue-50 */
    background: #eff6ff !important;
    color: #2563eb !important;
    /* Blue-600 */
    font-weight: 700 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: #2563eb !important;
    /* Blue-600 */
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2) !important;
}

/* Dark Mode Overrides for Flatpickr */
.dark .flatpickr-calendar {
    background: #1e293b !important;
    /* Slate-800 */
    border-color: #334155 !important;
    /* Slate-700 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15) !important;
}

.dark .flatpickr-calendar.arrowTop:before,
.dark .flatpickr-calendar.arrowTop:after {
    border-bottom-color: #1e293b !important;
}

.dark .flatpickr-months {
    color: #f8fafc !important;
    /* Slate-50 */
    fill: #f8fafc !important;
}

.dark .flatpickr-current-month {
    color: #f8fafc !important;
}

.dark .flatpickr-weekday {
    color: #64748b !important;
    /* Slate-500 */
}

.dark .flatpickr-day {
    color: #64748b !important;
    /* Slate-500 for non-current month */
}

.dark .flatpickr-day:not(.prevMonthDay):not(.nextMonthDay) {
    color: #f8fafc !important;
    /* Slate-50 */
    font-weight: 700 !important;
    /* Bold */
}

.dark .flatpickr-day:hover,
.dark .flatpickr-day.prevMonthDay:hover,
.dark .flatpickr-day.nextMonthDay:hover,
.dark .flatpickr-day:focus {
    background: #334155 !important;
    /* Slate-700 */
    border-color: #334155 !important;
}

.dark .flatpickr-day.today {
    background: #1e293b !important;
    /* Slate-800 */
    border-color: #3b82f6 !important;
    /* Blue-500 */
    color: #3b82f6 !important;
}

.dark .flatpickr-day.selected,
.dark .flatpickr-day.startRange,
.dark .flatpickr-day.endRange {
    background: #2563eb !important;
    /* Blue-600 */
    border-color: #2563eb !important;
    color: #ffffff !important;
}

/* Month Dropdown in Dark Mode */
.dark .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: #1e293b !important;
}

/* ------------------------------------------------------------
   Tom Select Custom Theme (Blue/Slate) 
   ------------------------------------------------------------ */

/* Tom Select Wrapper */
.ts-wrapper {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    /* Explicitly remove any padding */
    margin: 0 !important;
    /* Explicitly remove any margin */
    box-sizing: border-box !important;
    border: none !important;
    /* Explicitly remove any border */
    box-shadow: none !important;
}

/* Control (Input Trigger) */
.ts-control {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background-color: #f8fafc !important;
    /* bg-slate-50 */
    border: 1px solid #cbd5e1 !important;
    /* border-slate-300 */
    border-radius: 0.75rem !important;
    /* rounded-xl */
    padding: 0 1rem 0 1rem !important;
    /* Horizontal padding only */
    font-size: 0.875rem !important;
    /* text-sm */
    line-height: 1.25rem !important;
    color: #1e293b !important;
    /* text-slate-800 */
    box-shadow: none !important;
    height: 42px !important;
    /* Exact fixed height */
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    transition: all 0.2s ease !important;
    overflow: hidden !important;
    position: relative !important;
    padding-right: 2.5rem !important;
    /* Space for chevron */
    cursor: pointer !important;
}

/* Custom Chevron Arrow */
.ts-control::after {
    content: "\f078";
    /* FontAwesome chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    /* text-xs */
    color: #64748b;
    /* text-slate-500 */
    pointer-events: none;
}

/* Ensure Input inside Control is visible and sized correctly */
.ts-control>input {
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    min-width: 4px !important;
    opacity: 1 !important;
    /* Force visibility */
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    flex: 1 1 auto !important;
    width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
}

/* Item (Selected Value) */
.ts-control .item {
    display: flex !important;
    align-items: center !important;
    color: inherit !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100% - 1.5rem) !important;
}

/* Focus State */
.ts-control.focus {
    border-color: #3b82f6 !important;
    /* border-blue-500 */
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
    /* ring-4 ring-blue-500/10 */
}

/* Dropdown Menu */
.ts-dropdown {
    border: 1px solid #e2e8f0 !important;
    /* border-slate-200 */
    border-radius: 0.75rem !important;
    /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    background-color: #ffffff !important;
    margin-top: 0.5rem !important;
    padding: 0.5rem !important;
    z-index: 50 !important;
    overflow: hidden !important;
}

/* Dropdown Options */
.ts-dropdown .option,
.ts-dropdown .no-results {
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    /* text-sm */
    color: #475569 !important;
    /* text-slate-600 */
    cursor: pointer !important;
}

/* No Results Message - Specific Color */
.ts-dropdown .no-results {
    color: #ef4444 !important;
    /* text-red-500 as requested for "change color" - assume distinct */
    text-align: center !important;
    font-weight: 500 !important;
    background: transparent !important;
    cursor: default !important;
}

/* Active/Hover Option */
.ts-dropdown .option.active,
.ts-dropdown .option:hover {
    background-color: #f1f5f9 !important;
    /* bg-slate-100 */
    color: #1e293b !important;
    /* text-slate-800 */
}

/* Selected Option */
.ts-dropdown .option.selected {
    background-color: #eff6ff !important;
    /* bg-blue-50 */
    color: #2563eb !important;
    /* text-blue-600 */
    font-weight: 600 !important;
}

/* Dark Mode Overrides for Tom Select */
.dark .ts-control {
    background-color: #0f172a !important;
    /* bg-slate-900 */
    border-color: #334155 !important;
    /* border-slate-700 */
    color: #ffffff !important;
    /* text-white */
}

.dark .ts-control.focus {
    border-color: #3b82f6 !important;
    /* border-blue-500 */
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
}

.dark .ts-control>input {
    color: #ffffff !important;
}

.dark .ts-dropdown {
    background-color: #1e293b !important;
    /* bg-slate-800 */
    border-color: #334155 !important;
    /* border-slate-700 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15) !important;
}

.dark .ts-dropdown .option {
    color: #94a3b8 !important;
    /* text-slate-400 */
}

.dark .ts-dropdown .no-results {
    color: #f87171 !important;
    /* text-red-400 */
}

.dark .ts-dropdown .option.active,
.dark .ts-dropdown .option:hover {
    background-color: #334155 !important;
    /* bg-slate-700 */
    color: #ffffff !important;
}

.dark .ts-dropdown .option.selected {
    background-color: #1e293b !important;
    /* bg-slate-800 */
    color: #60a5fa !important;
    /* text-blue-400 */
}

/* Inline/Filter select overrides to prevent double borders/backgrounds */
.searchable-select-inline.ts-wrapper .ts-control,
.searchable-select-inline + .ts-wrapper .ts-control {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}
.searchable-select-inline.ts-wrapper .ts-control::after,
.searchable-select-inline + .ts-wrapper .ts-control::after {
    display: none !important;
}

/* ------------------------------------------------------------
   DataTables Custom Theme (Tailwind Consistency)
   ------------------------------------------------------------ */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_processing {
    display: none !important;
}

.dataTables_wrapper .dataTables_length {
    padding-left: 2rem !important;
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
    font-size: 0.8125rem !important;
    color: #64748b !important;
}

.dataTables_wrapper .dataTables_length select {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 0.25rem 0.5rem !important;
    margin: 0 0.5rem !important;
    color: #1e293b !important;
    outline: none !important;
}

.dark .dataTables_wrapper .dataTables_length select {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

table.dataTable {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    border: none !important;
}

table.dataTable thead th {
    background-color: #f8fafc !important;
    /* bg-slate-50 */
    color: #334155 !important;
    /* text-slate-700 */
    font-weight: 600 !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
    /* border-slate-200 */
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
}

.dark table.dataTable thead th {
    background-color: #0f172a !important;
    /* bg-slate-900 */
    color: #94a3b8 !important;
    /* text-slate-400 */
    border-bottom: 1px solid #334155 !important;
    /* border-slate-700 */
}

table.dataTable tbody td {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.dark table.dataTable tbody td {
    border-bottom: 1px solid #334155 !important;
}

table.dataTable.no-footer {
    border-bottom: none !important;
}

table.dataTable tbody tr:last-child td {
    border-bottom: none !important;
}

table.dataTable::after,
.dataTables_wrapper::after {
    display: none !important;
}

/* DataTables Custom Theme (Tailwind Consistency) */
.dataTables_wrapper {
    padding-top: 0 !important;
    /* Fixed: Removed unwanted spacing */
    padding-bottom: 2rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.dataTables_info {
    font-size: 0.8125rem !important;
    color: #64748b !important;
    padding-left: 2rem !important;
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

.dataTables_paginate {
    padding-right: 2rem !important;
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.dataTables_paginate .paginate_button {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 0.4rem 0.8rem !important;
    color: #475569 !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    margin: 0 0 0 0.5rem !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 34px !important;
    line-height: 1 !important;
}

.dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #2563eb !important;
}

.dataTables_paginate .paginate_button.current {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3) !important;
}

.dataTables_paginate .paginate_button.disabled {
    opacity: 0.5 !important;
    cursor: default !important;
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
}

.dark .dataTables_paginate .paginate_button {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

.dark .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
    background: #334155 !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}

.dark .dataTables_paginate .paginate_button.current {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 15px -3px rgba(37, 99, 235, 0.5) !important;
}

.dark .dataTables_paginate .paginate_button.disabled {
    background: #0f172a !important;
    color: #475569 !important;
    border-color: #1e293b !important;
}

.dark .dataTables_info {
    color: #94a3b8 !important;
}

.dataTables_empty {
    text-align: center !important;
    padding: 2rem !important;
    color: #64748b !important;
}

/* Hide scrollbar utility */
.scrollbar-hide::-webkit-scrollbar {
    display: none !important;
}

.scrollbar-hide {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* Hide scrollbars in TomSelect dropdown lists */
.ts-dropdown-content::-webkit-scrollbar {
    display: none !important;
    width: 0px !important;
    background: transparent !important;
}
.ts-dropdown-content {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}