/* ===== GENUINE JAPANESE MINIMALIST (ZEN) THEME ===== */

/* Global Font Stack - Prioritize Noto Sans JP for that crisp look */
.fi-body,
.fi-main,
.fi-sidebar,
.fi-topbar {
    font-family: "Poppins", "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
    background-color: #FAFAFA !important;
    /* Very subtle off-white */
}

.fi-logo {
    height: 3.5rem !important;
    width: auto !important;
}

/* ===== KPI CARDS: SHOJI SCREEN STYLE ===== */
/* Flat, white, subtle border, no gradients, no heavy shadows */
.kpi-card {
    background-color: #FFFFFF !important;
    border: 1px solid #E5E5E5 !important;
    /* Very light subtle border */
    border-radius: 4px !important;
    /* Slightly sharper corners */
    padding: 24px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    /* Barely there shadow */
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

/* Accent line on hover (Red for distinctiveness/Logo echo) */
.kpi-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #8CC63F;
    /* Deha Green */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.kpi-card:hover {
    border-color: #8CC63F !important;
    box-shadow: 0 4px 12px rgba(140, 198, 63, 0.1) !important;
}

.kpi-card:hover::after {
    transform: scaleX(1);
}

/* KPI Card color variants - Gradient backgrounds */
.kpi-card-blue {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.kpi-card-green {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
}

.kpi-card-red {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
}

.kpi-card-orange {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
}

/* Icon: Glass effect on colored cards */
.kpi-icon-container {
    background: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 12px !important;
    display: inline-flex;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Value: White text on colored cards */
.kpi-value {
    color: white !important;
    font-family: "Poppins", sans-serif !important;
    letter-spacing: -0.025em !important;
    font-weight: 800 !important;
    font-size: 2rem !important;
    line-height: 1.2 !important;
}

.kpi-label {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

/* Trend indicators: Glass pill */
.kpi-trend {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
    border-radius: 9999px !important;
    color: white !important;
}

/* ===== UI ELEMENTS ===== */

/* Buttons: Flat with no shadow, solid colors */
.fi-btn {
    box-shadow: none !important;
    border-radius: 4px !important;
    /* Sharper */
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.fi-btn-primary {
    background-color: #0060A9 !important;
    /* Deha Blue */
}

.fi-btn-primary:hover {
    background-color: #004d88 !important;
}

/* Tables: Clean, airy */
.fi-ta-table {
    background: #FFFFFF !important;
    border: 1px solid #F4F4F5 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.fi-ta-header-cell {
    background: #FAFAFA !important;
    color: #52525B !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase;
    font-size: 0.7rem !important;
    border-bottom: 2px solid #E4E4E7 !important;
}

.fi-ta-row:hover {
    background-color: #FAFAFA !important;
}

/* Form Inputs: Understated */
.fi-input,
.fi-select-input {
    background-color: #FFFFFF !important;
    border-color: #E4E4E7 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

.fi-input:focus,
.fi-select-input:focus {
    border-color: #71717A !important;
    /* Zinc 500 */
    box-shadow: none !important;
    ring: 1px #71717A !important;
}

/* Badges/Pills: Outline style or very soft pastel */
.status-pill {
    background: transparent !important;
    border: 1px solid currentColor !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    padding: 4px 12px !important;
}

/* Progress Bars: Thin and sharp */
.progress-bar-container {
    height: 6px !important;
    border-radius: 9999px !important;
    background: #F4F4F5 !important;
}

.progress-bar-fill {
    border-radius: 9999px !important;
    background: #0060A9 !important;
    /* Blue fill */
    box-shadow: none !important;
}

/* Sidebar: Pure white with thin right border */
.fi-sidebar {
    background-color: #FFFFFF !important;
    border-right: 1px solid #F4F4F5 !important;
    box-shadow: none !important;
}

.fi-sidebar-item-active {
    background-color: #F0F9FF !important;
    /* Light blue tint */
    color: #0060A9 !important;
    /* Blue text */
}

/* Header/Topbar: White, minimal border */
.fi-topbar {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #F4F4F5 !important;
    box-shadow: none !important;
}

/* ===== ACTIVE TOPBAR NAVIGATION ITEM ===== */
/* Light blue background for active navigation items */
.fi-topbar-item-button.bg-gray-50 {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

/* Hover state for topbar items - light blue instead of gray */
.fi-topbar-item-button:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

/* Override Actions column header alignment */
th span.justify-end {
    justify-content: flex-start !important;
}

.fi-ta-actions {
    justify-content: flex-start !important;
}

/* ===== Table-like Repeater Styles ===== */

/* Remove card styling from repeater items */
.fi-fo-repeater-item {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    ring: none !important;
}

/* Remove divider between header and content */
.fi-fo-repeater-item.divide-y {
    border: none !important;
}

/* Hide the collapsible header with title - but NOT for requirement-points-table and test-case-repeater */
.fi-fo-repeater-item-header {
    display: none !important;
}

/* SHOW header for test-case-repeater - contains action buttons, positioned in Actions column */
.test-case-repeater .fi-fo-repeater-item-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    gap: 2px !important;
    min-height: auto !important;
    background: transparent !important;
    border: none !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: calc(100% * 2 / 30) !important;
    /* Match 2 column span out of 30 */
    z-index: 10 !important;
}

/* Remove ms-auto margin from second UL to center all buttons */
.test-case-repeater .fi-fo-repeater-item-header>ul.ms-auto {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Both UL containers - no gap, centered, remove any auto margin */
.test-case-repeater .fi-fo-repeater-item-header>ul {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

/* All li items - no margin */
.test-case-repeater .fi-fo-repeater-item-header li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide label/title in test-case-repeater header */
.test-case-repeater .fi-fo-repeater-item-label {
    display: none !important;
}

/* All action buttons - uniform size */
.test-case-repeater .fi-fo-repeater-item-header button.fi-icon-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    padding: 4px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.15s ease !important;
}

.test-case-repeater .fi-fo-repeater-item-header button.fi-icon-btn:hover {
    background: #f3f4f6 !important;
}

.dark .test-case-repeater .fi-fo-repeater-item-header button.fi-icon-btn:hover {
    background: #374151 !important;
}

/* Icon size */
.test-case-repeater .fi-fo-repeater-item-header button.fi-icon-btn svg {
    width: 14px !important;
    height: 14px !important;
}

/* Drag handle - gray color */
.test-case-repeater .fi-fo-repeater-item-header li[x-sortable-handle] button {
    color: #9ca3af !important;
    cursor: grab !important;
}

.test-case-repeater .fi-fo-repeater-item-header li[x-sortable-handle] button:hover {
    color: #6b7280 !important;
}

/* Clone/Duplicate button - amber/warning (fi-color-warning) */
.test-case-repeater .fi-fo-repeater-item-header button.fi-color-warning {
    color: #d97706 !important;
}

.test-case-repeater .fi-fo-repeater-item-header button.fi-color-warning:hover {
    color: #b45309 !important;
    background: #fef3c7 !important;
}

/* Delete button - red/danger (fi-color-danger) */
.test-case-repeater .fi-fo-repeater-item-header button.fi-color-danger {
    color: #dc2626 !important;
}

.test-case-repeater .fi-fo-repeater-item-header button.fi-color-danger:hover {
    color: #b91c1c !important;
    background: #fee2e2 !important;
}

.dark .test-case-repeater .fi-fo-repeater-item-header button.fi-color-warning:hover {
    background: #422006 !important;
}

.dark .test-case-repeater .fi-fo-repeater-item-header button.fi-color-danger:hover {
    background: #450a0a !important;
}

/* Ensure repeater items have relative positioning */
.test-case-repeater li.fi-fo-repeater-item,
.test-case-repeater .fi-fo-repeater-item {
    position: relative !important;
}

/* Make content always visible */
.fi-fo-repeater-item-content {
    padding: 0 !important;
    display: block !important;
}

/* Grid becomes table row - remove gap */
.fi-fo-repeater .fi-fo-component-ctn {
    gap: 0 !important;
}

/* Each column cell */
.fi-fo-repeater [class*="col-"][class*="col-span"] {
    border: 1px solid #e5e7eb !important;
    margin: -0.5px !important;
    padding: 0 !important;
}

.dark .fi-fo-repeater [class*="col-"][class*="col-span"] {
    border-color: #4b5563 !important;
}

/* Input wrapper - remove all styling */
.fi-fo-repeater .fi-input-wrp {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    ring: none !important;
    background: transparent !important;
}

.fi-fo-repeater .fi-input-wrp:focus-within {
    ring: none !important;
    box-shadow: none !important;
}

/* Textarea styling - content-based sizing
   height: auto overrides Filament's h-full class so textarea sizes to its content.
   JS sets min-height = scrollHeight to ensure all content is visible.
   CSS Grid then stretches ALL cells in the row to match the tallest cell (Test Steps).
   UNIFIED: padding/min-height matches PHP extraInputAttributes (6px 8px, 32px) */
.fi-fo-repeater textarea {
    height: auto !important;
    /* override h-full → size to content */
    padding: 6px 8px !important;
    min-height: 32px;
    /* NO !important — JS needs to override this with scrollHeight */
    max-height: none !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    resize: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: background-color 0.15s ease !important;
}

.fi-fo-repeater textarea:focus {
    outline: none !important;
    ring: none !important;
    box-shadow: none !important;
    background: rgba(240, 249, 255, 0.6) !important;
}

.dark .fi-fo-repeater textarea:focus {
    background: rgba(30, 58, 95, 0.6) !important;
}

/* Textarea container (wire:ignore.self wrapper)
   height: auto overrides Filament's inline height so wrapper follows textarea size.
   CSS Grid row height = tallest cell → all cells stretch automatically. */
.fi-fo-repeater .fi-input-wrp-input>div {
    height: auto !important;
    /* override Filament inline height */
    min-height: 32px !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Parent containers - no height restriction, no overflow clipping */
.fi-fo-repeater .fi-input-wrp,
.fi-fo-repeater .fi-fo-field-wrp,
.fi-fo-repeater .fi-fo-component-ctn {
    max-height: none !important;
    overflow: visible !important;
}

/* Textarea wrapper - no overflow restriction */
.fi-fo-repeater .fi-fo-textarea {
    overflow: visible !important;
}

.fi-fo-repeater .fi-input-wrp {
    overflow: visible !important;
}

/* Choices.js select - clean look */
.fi-fo-repeater .choices {
    border-radius: 0 !important;
}

.fi-fo-repeater .choices__inner {
    min-height: 40px !important;
    padding: 8px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 13px !important;
}

.fi-fo-repeater .choices__list--single {
    padding: 0 !important;
}

/* Hide the remove button in Category select within repeaters only - field is required */
.fi-fo-repeater .choices__button {
    display: none !important;
}

/* Field wrapper */
.fi-fo-repeater .fi-fo-field-wrp {
    padding: 0 !important;
}

/* Row number styling */
.fi-fo-repeater [class*="row_number"] .flex {
    min-height: 40px !important;
    padding: 8px !important;
    font-weight: 500 !important;
}

/* Repeater list - no gap between rows */
.fi-fo-repeater ul>div {
    gap: 0 !important;
}

/* Add Test Case button */
.fi-fo-repeater>div:last-child {
    margin-top: 8px !important;
}

/* FOR OTHER REPEATERS (not test-case-repeater, not requirement-points-table): show hover actions */
.fi-fo-repeater:not(.test-case-repeater):not(.requirement-points-table) li {
    position: relative !important;
}

.fi-fo-repeater:not(.test-case-repeater):not(.requirement-points-table) .fi-fo-repeater-item-actions {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 0 !important;
    transition: opacity 0.2s !important;
    background: white !important;
    padding: 4px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    z-index: 10 !important;
}

.fi-fo-repeater:not(.test-case-repeater):not(.requirement-points-table) li:hover .fi-fo-repeater-item-actions {
    opacity: 1 !important;
}

.fi-fo-repeater:not(.test-case-repeater):not(.requirement-points-table) .fi-fo-repeater-item-actions button {
    width: 24px !important;
    height: 24px !important;
}

.fi-fo-repeater:not(.test-case-repeater):not(.requirement-points-table) .fi-fo-repeater-item-actions button svg {
    width: 14px !important;
    height: 14px !important;
}

/* ===== REQUIREMENT POINTS SIMPLE - Clean Table Layout ===== */

/* Container styling */
.requirement-points-simple {
    margin-top: 8px !important;
}

/* Remove gap between items for table-like look */
.requirement-points-simple>div>div {
    gap: 0 !important;
}

/* Each row (li element) - table row styling */
.requirement-points-simple li {
    position: relative !important;
}

/* Repeater item - table row styling */
.requirement-points-simple .fi-fo-repeater-item {
    display: flex !important;
    align-items: center !important;
    border: 1px solid #e5e7eb !important;
    border-bottom: none !important;
    background: white !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.requirement-points-simple li:last-child .fi-fo-repeater-item {
    border-bottom: 1px solid #e5e7eb !important;
}

.requirement-points-simple li:first-child .fi-fo-repeater-item {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

.requirement-points-simple li:last-child .fi-fo-repeater-item {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.dark .requirement-points-simple .fi-fo-repeater-item {
    border-color: #374151 !important;
    background: #1f2937 !important;
}

/* Hover effect on rows */
.requirement-points-simple .fi-fo-repeater-item:hover {
    background: #f9fafb !important;
}

.dark .requirement-points-simple .fi-fo-repeater-item:hover {
    background: #111827 !important;
}

/* SHOW the header but hide the label, only show actions */
.requirement-points-simple .fi-fo-repeater-item-header {
    display: flex !important;
    align-items: center !important;
    padding: 0 12px 0 0 !important;
    background: transparent !important;
    border: none !important;
    min-height: auto !important;
    flex-shrink: 0 !important;
    order: 2 !important;
    /* Move header (with delete button) to the right */
}

/* Hide the item label text in header */
.requirement-points-simple .fi-fo-repeater-item-label {
    display: none !important;
}

/* Hide collapse toggle */
.requirement-points-simple .fi-fo-repeater-item-header>button:first-child {
    display: none !important;
}

/* Content area - take full width */
.requirement-points-simple .fi-fo-repeater-item-content {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    min-height: 48px !important;
    order: 1 !important;
    /* Content comes first (before header with delete button) */
}

/* Grid inside content */
.requirement-points-simple .fi-fo-repeater-item-content>div {
    width: 100% !important;
}

.requirement-points-simple .fi-fo-repeater-item-content>div>div {
    gap: 0 !important;
}

/* Input wrapper */
.requirement-points-simple .fi-input-wrp {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100% !important;
}

/* Text input styling */
.requirement-points-simple input[type="text"] {
    padding: 12px 16px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
}

.requirement-points-simple input[type="text"]:focus {
    outline: none !important;
    background: #eff6ff !important;
}

.dark .requirement-points-simple input[type="text"]:focus {
    background: #1e3a5f !important;
}

/* Actions container - always visible, positioned right */
.requirement-points-simple .fi-fo-repeater-item-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 12px !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}

/* Delete button styling */
.requirement-points-simple .fi-fo-repeater-item-actions button {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}

/* Delete button - red styling */
.requirement-points-simple .fi-fo-repeater-item-actions button.text-danger-600 {
    background-color: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
    color: #dc2626 !important;
}

.requirement-points-simple .fi-fo-repeater-item-actions button.text-danger-600:hover {
    background-color: #dc2626 !important;
    color: white !important;
    border-color: #dc2626 !important;
}

.dark .requirement-points-simple .fi-fo-repeater-item-actions button.text-danger-600 {
    background-color: #450a0a !important;
    border-color: #7f1d1d !important;
    color: #f87171 !important;
}

.dark .requirement-points-simple .fi-fo-repeater-item-actions button.text-danger-600:hover {
    background-color: #dc2626 !important;
    color: white !important;
}

/* Add button styling */
.requirement-points-simple>div>button {
    margin-top: 12px !important;
}

/* Zebra striping for better readability */
.requirement-points-simple li:nth-child(even) .fi-fo-repeater-item {
    background: #fafafa !important;
}

.dark .requirement-points-simple li:nth-child(even) .fi-fo-repeater-item {
    background: #111827 !important;
}

/* ===== MODAL CANCEL BUTTON STYLING ===== */
/* Make Cancel button more visible with border and better color */
.fi-modal-footer button.fi-btn.fi-color-gray,
.fi-modal-footer-actions button.fi-btn.fi-color-gray,
.fi-modal-footer-actions button.fi-btn[wire\\:click*="cancel"],
.fi-modal .fi-btn.fi-btn-color-gray {
    background-color: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.fi-modal-footer button.fi-btn.fi-color-gray:hover,
.fi-modal-footer-actions button.fi-btn.fi-color-gray:hover,
.fi-modal-footer-actions button.fi-btn[wire\\:click*="cancel"]:hover,
.fi-modal .fi-btn.fi-btn-color-gray:hover {
    background-color: #e5e7eb !important;
    border-color: #9ca3af !important;
    color: #1f2937 !important;
}

/* Alternative: Target Cancel button by its text content using adjacent selectors */
.fi-modal-footer .fi-btn:not(.fi-color-danger):not(.fi-color-success):not(.fi-color-warning):not(.fi-color-primary):not(.fi-color-info) {
    background-color: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
}

.fi-modal-footer .fi-btn:not(.fi-color-danger):not(.fi-color-success):not(.fi-color-warning):not(.fi-color-primary):not(.fi-color-info):hover {
    background-color: #e5e7eb !important;
    border-color: #9ca3af !important;
}

/* Ensure action buttons in modal have proper spacing */
.fi-modal-footer-actions {
    gap: 12px !important;
}