/* =============================================
   Custom Order Edit Page Styles
   Pure CSS — no Tailwind dependency
   ============================================= */

/* === Full-width container === */
.fi-main-ctn {
    max-width: 100% !important;
}

/* === Card block === */
.oe-card {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    border: 1px solid rgb(3 7 18 / 0.05);
    padding: 1rem;
}
.dark .oe-card {
    background: rgb(17 24 39);
    border-color: rgb(255 255 255 / 0.1);
}

/* === Flex helpers === */
.oe-row { display: flex; align-items: center; }
.oe-row-wrap { display: flex; align-items: center; flex-wrap: wrap; }
.oe-row-between { display: flex; align-items: center; justify-content: space-between; }
.oe-gap-1 { gap: 0.25rem; }
.oe-gap-2 { gap: 0.5rem; }
.oe-gap-3 { gap: 0.75rem; }
.oe-gap-4 { gap: 1rem; }

/* === Grid === */
.oe-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.oe-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }

/* === Spacing === */
.oe-mt-3 { margin-top: 0.75rem; }
.oe-mb-3 { margin-bottom: 0.75rem; }
.oe-space-y > *+* { margin-top: 0.5rem; }

/* === Separator === */
.oe-sep {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgb(229 231 235);
}
.dark .oe-sep { border-top-color: rgb(55 65 81); }

/* === Typography === */
.oe-label { font-size: 0.875rem; color: rgb(107 114 128); }
.oe-label-xs { font-size: 0.75rem; color: rgb(156 163 175); }
.oe-label-upper {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(156 163 175);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.oe-value { font-weight: 500; }
.oe-value-lg { font-size: 1.125rem; font-weight: 700; }
.oe-value-xl { font-size: 1.25rem; font-weight: 700; }
.oe-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.oe-bold { font-weight: 700; }
.oe-text-lg { font-size: 1.125rem; }
.oe-text-2xl { font-size: 1.5rem; }

/* === Colors === */
.oe-muted { color: rgb(107 114 128); }
.dark .oe-muted { color: rgb(156 163 175); }
.oe-amber { color: rgb(217 119 6); }
.dark .oe-amber { color: rgb(251 191 36); }
.oe-green { color: rgb(22 163 74); }
.dark .oe-green { color: rgb(74 222 128); }

/* === Status badge (order header) === */
.oe-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}
.oe-badge-blue { background: rgb(219 234 254); color: rgb(30 64 175); }
.oe-badge-yellow { background: rgb(254 249 195); color: rgb(133 77 14); }
.oe-badge-orange { background: rgb(255 237 213); color: rgb(154 52 18); }
.oe-badge-green { background: rgb(220 252 231); color: rgb(22 101 52); }
.oe-badge-purple { background: rgb(243 232 255); color: rgb(107 33 168); }
.oe-badge-emerald { background: rgb(209 250 229); color: rgb(6 95 70); }
.oe-badge-red { background: rgb(254 226 226); color: rgb(153 27 27); }
.oe-badge-gray { background: rgb(243 244 246); color: rgb(31 41 55); }

.dark .oe-badge-blue { background: rgb(30 58 138); color: rgb(191 219 254); }
.dark .oe-badge-yellow { background: rgb(113 63 18); color: rgb(254 240 138); }
.dark .oe-badge-orange { background: rgb(124 45 18); color: rgb(254 215 170); }
.dark .oe-badge-green { background: rgb(20 83 45); color: rgb(187 247 208); }
.dark .oe-badge-purple { background: rgb(88 28 135); color: rgb(233 213 255); }
.dark .oe-badge-emerald { background: rgb(6 78 59); color: rgb(167 243 208); }
.dark .oe-badge-red { background: rgb(127 29 29); color: rgb(254 202 202); }

/* === Item status badge === */
.oe-item-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    white-space: nowrap;
}
.oe-item-badge-ok { background: rgb(220 252 231); color: rgb(22 101 52); }
.oe-item-badge-replaced { background: rgb(219 234 254); color: rgb(30 64 175); }
.oe-item-badge-excluded { background: rgb(254 226 226); color: rgb(153 27 27); }
.oe-item-badge-substitute { background: rgb(207 250 254); color: rgb(21 94 117); }
.oe-item-badge-changed { background: rgb(254 243 199); color: rgb(146 64 14); }
.oe-item-badge-new { background: rgb(232 121 249 / 0.15); color: rgb(134 25 143); }

.dark .oe-item-badge-ok { background: rgb(20 83 45); color: rgb(187 247 208); }
.dark .oe-item-badge-replaced { background: rgb(30 58 138); color: rgb(191 219 254); }
.dark .oe-item-badge-excluded { background: rgb(127 29 29); color: rgb(254 202 202); }
.dark .oe-item-badge-substitute { background: rgb(22 78 99); color: rgb(165 243 252); }
.dark .oe-item-badge-changed { background: rgb(120 53 15); color: rgb(253 230 138); }
.dark .oe-item-badge-new { background: rgb(134 25 143 / 0.3); color: rgb(232 121 249); }

/* === Comment block === */
.oe-comment {
    background: rgb(255 251 235);
    border-radius: 0.5rem;
    padding: 0.75rem;
    font-size: 0.875rem;
}
.oe-comment-label { font-weight: 500; color: rgb(180 83 9); }
.oe-comment-text { color: rgb(120 53 15); }
.dark .oe-comment { background: rgb(120 53 15 / 0.2); }
.dark .oe-comment-label { color: rgb(251 191 36); }
.dark .oe-comment-text { color: rgb(253 230 138); }

/* === Link === */
.oe-link { color: rgb(217 119 6); font-weight: 500; text-decoration: none; }
.oe-link:hover { text-decoration: underline; }
.oe-link-green { color: rgb(22 163 74); font-weight: 700; text-decoration: none; }
.oe-link-green:hover { text-decoration: underline; }
.dark .oe-link { color: rgb(251 191 36); }
.dark .oe-link-green { color: rgb(74 222 128); }

/* === Icon 16px === */
.oe-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.oe-icon-muted { color: rgb(156 163 175); }
.oe-icon-green { color: rgb(34 197 94); }

/* === Details/Summary === */
.oe-details { border-radius: 0.75rem; }
.oe-details summary {
    padding: 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(55 65 81);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dark .oe-details summary { color: rgb(209 213 219); }
.oe-details-body {
    padding: 0 1rem 1rem;
    font-size: 0.875rem;
}

/* === Payment/delivery meta === */
.oe-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

/* === Stats row === */
.oe-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.oe-stat-label { font-size: 0.875rem; color: rgb(75 85 99); }
.dark .oe-stat-label { color: rgb(209 213 219); }


/* =================================================================
   PRODUCTS TABLE — override Filament repeater table for compact look
   ================================================================= */

/* Remove inner padding from the products section content */
.fi-section:has(.fi-fo-repeater) .fi-section-content-ctn {
    padding: 0 !important;
}
.fi-section:has(.fi-fo-repeater) .fi-section-content {
    padding: 0 !important;
    gap: 0 !important;
}

/* Table itself */
.fi-fo-repeater table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

/* Table header */
.fi-fo-repeater table thead th {
    background: rgb(249 250 251);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(107 114 128);
    padding: 0.5rem 0.5rem;
    border-bottom: 2px solid rgb(229 231 235);
    text-align: left;
    white-space: nowrap;
}
.dark .fi-fo-repeater table thead th {
    background: rgb(31 41 55);
    color: rgb(156 163 175);
    border-bottom-color: rgb(55 65 81);
}

/* Table rows */
.fi-fo-repeater table tbody tr {
    border-bottom: 1px solid rgb(243 244 246);
    transition: background 0.1s;
}
.fi-fo-repeater table tbody tr:hover {
    background: rgb(249 250 251);
}
.dark .fi-fo-repeater table tbody tr {
    border-bottom-color: rgb(55 65 81);
}
.dark .fi-fo-repeater table tbody tr:hover {
    background: rgb(31 41 55);
}

/* Table cells */
.fi-fo-repeater table tbody td {
    padding: 0.25rem 0.5rem;
    vertical-align: middle;
}

/* Compact inputs inside the table */
.fi-fo-repeater table .fi-input-wrp {
    min-height: 0 !important;
    height: auto !important;
    border-radius: 0.375rem;
}

.fi-fo-repeater table .fi-input {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8125rem !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.5 !important;
}

/* Suffix inside input */
.fi-fo-repeater table .fi-input-wrp .fi-input-suffix {
    padding-right: 0.375rem;
    font-size: 0.75rem;
    color: rgb(156 163 175);
}

/* Placeholder text inside table */
.fi-fo-repeater table .fi-fo-placeholder {
    font-size: 0.8125rem;
    padding: 0 !important;
    min-height: 0 !important;
}

/* Action buttons inside table */
.fi-fo-repeater table .fi-ac-btn {
    padding: 0.25rem !important;
    min-height: 0 !important;
    border-radius: 0.375rem;
}
.fi-fo-repeater table .fi-ac-btn .fi-icon {
    width: 1rem;
    height: 1rem;
}

/* Actions column */
.fi-fo-repeater table td:last-child {
    white-space: nowrap;
}

/* The add-item button row below the table */
.fi-fo-repeater .fi-fo-repeater-add-action-ctn {
    padding: 0.5rem;
    border-top: 1px solid rgb(243 244 246);
}
.dark .fi-fo-repeater .fi-fo-repeater-add-action-ctn {
    border-top-color: rgb(55 65 81);
}

/* Removed item row — dim it */
.fi-fo-repeater table tbody tr:has([value="1"][name*="is_removed"]) {
    opacity: 0.45;
    background: rgb(254 242 242);
}
.dark .fi-fo-repeater table tbody tr:has([value="1"][name*="is_removed"]) {
    background: rgb(127 29 29 / 0.15);
}

/* =================================================================
   FILAMENT SECTIONS — proper padding & gap
   ================================================================= */

/* Section header always has padding */
.fi-section .fi-section-header-ctn {
    padding: 0.75rem 1rem !important;
}

/* Sections WITHOUT repeater get inner padding */
.fi-section:not(:has(.fi-fo-repeater)) .fi-section-content-ctn {
    padding: 0 1rem 1rem !important;
}
.fi-section:not(:has(.fi-fo-repeater)) .fi-section-content {
    padding: 0 !important;
    gap: 0.75rem !important;
}

/* =================================================================
   FILAMENT FORM INPUTS — polish globally
   ================================================================= */

/* Select inputs */
.fi-select-input-btn {
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(209 213 219);
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}
.dark .fi-select-input-btn {
    background: rgb(17 24 39);
    border-color: rgb(55 65 81);
    color: rgb(229 231 235);
}
.fi-select-input-btn:hover {
    border-color: rgb(156 163 175);
}
.fi-select-input-value-ctn {
    flex: 1;
    min-width: 0;
    text-align: left;
}
.fi-select-input-value-label {
    font-size: 0.875rem;
}

/* Select dropdown */
.fi-select-input-ctn {
    position: relative;
}
.fi-dropdown-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid rgb(209 213 219);
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    margin-top: 0.25rem;
    max-height: 15rem;
    overflow-y: auto;
}
.dark .fi-dropdown-panel {
    background: rgb(31 41 55);
    border-color: rgb(55 65 81);
}
.fi-dropdown-list {
    list-style: none;
    padding: 0.25rem;
    margin: 0;
}
.fi-dropdown-list-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    cursor: pointer;
}
.fi-dropdown-list-item:hover {
    background: rgb(243 244 246);
}
.dark .fi-dropdown-list-item:hover {
    background: rgb(55 65 81);
}
.fi-dropdown-list-item.fi-selected {
    background: rgb(254 243 199);
    font-weight: 500;
}
.dark .fi-dropdown-list-item.fi-selected {
    background: rgb(120 53 15 / 0.3);
    color: rgb(253 230 138);
}

/* Clear button in select */
.fi-select-input-value-remove-btn {
    background: none;
    border: none;
    color: rgb(156 163 175);
    cursor: pointer;
    padding: 0.125rem;
    display: flex;
    align-items: center;
    border-radius: 0.25rem;
}
.fi-select-input-value-remove-btn:hover {
    color: rgb(239 68 68);
    background: rgb(254 226 226);
}

/* Text inputs (outside table) */
.fi-fo-field-wrp .fi-input-wrp {
    border: 1px solid rgb(209 213 219);
    border-radius: 0.5rem;
    background: #fff;
    overflow: hidden;
}
.dark .fi-fo-field-wrp .fi-input-wrp {
    background: rgb(17 24 39);
    border-color: rgb(55 65 81);
}
.fi-fo-field-wrp .fi-input-wrp:focus-within {
    border-color: rgb(217 119 6);
    box-shadow: 0 0 0 1px rgb(217 119 6);
}
.fi-fo-field-wrp .fi-input {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    min-height: 2.25rem;
}
.dark .fi-fo-field-wrp .fi-input {
    color: rgb(229 231 235);
}

/* Textarea */
.fi-fo-field-wrp textarea.fi-input {
    resize: vertical;
    min-height: 2.5rem;
}

/* Labels */
.fi-fo-field-wrp .fi-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(55 65 81);
    margin-bottom: 0.25rem;
}
.dark .fi-fo-field-wrp .fi-label {
    color: rgb(209 213 219);
}

/* =================================================================
   FILAMENT ACTION BUTTONS
   ================================================================= */

.fi-ac-btn-action.fi-color-primary,
.fi-ac-action.fi-color-primary button {
    background: rgb(217 119 6) !important;
    color: #fff !important;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.fi-ac-btn-action.fi-color-primary:hover,
.fi-ac-action.fi-color-primary button:hover {
    background: rgb(180 83 9) !important;
}

.fi-ac-btn-action.fi-color-danger,
.fi-ac-action.fi-color-danger button {
    background: rgb(239 68 68) !important;
    color: #fff !important;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}
.fi-ac-btn-action.fi-color-danger:hover,
.fi-ac-action.fi-color-danger button:hover {
    background: rgb(220 38 38) !important;
}

.fi-ac-btn-action.fi-color-success,
.fi-ac-action.fi-color-success button {
    background: rgb(34 197 94) !important;
    color: #fff !important;
}

.fi-ac-btn-action.fi-color-warning,
.fi-ac-action.fi-color-warning button {
    background: rgb(234 179 8) !important;
    color: #fff !important;
}

/* Icon-only buttons */
.fi-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    border-radius: 0.375rem;
    border: none;
    background: transparent;
    cursor: pointer;
    color: rgb(107 114 128);
    transition: all 0.15s;
}
.fi-icon-btn:hover {
    background: rgb(243 244 246);
    color: rgb(55 65 81);
}
.fi-icon-btn.fi-color-danger { color: rgb(239 68 68); }
.fi-icon-btn.fi-color-danger:hover { background: rgb(254 226 226); color: rgb(220 38 38); }
.fi-icon-btn.fi-color-success { color: rgb(34 197 94); }
.fi-icon-btn.fi-color-success:hover { background: rgb(220 252 231); color: rgb(22 163 74); }
.fi-icon-btn.fi-color-warning { color: rgb(234 179 8); }
.fi-icon-btn.fi-color-warning:hover { background: rgb(254 243 199); color: rgb(180 83 9); }

.fi-icon-btn .fi-icon,
.fi-icon-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* =================================================================
   SECTION HEADER
   ================================================================= */
.fi-section-header-heading {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(17 24 39);
}
.dark .fi-section-header-heading {
    color: rgb(243 244 246);
}

.fi-section-collapse-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    border-radius: 0.375rem;
    cursor: pointer;
    color: rgb(156 163 175);
}
.fi-section-collapse-btn:hover {
    background: rgb(243 244 246);
    color: rgb(107 114 128);
}

/* =================================================================
   FILAMENT GRID inside sections
   ================================================================= */
.fi-sc.fi-grid {
    display: grid;
    gap: 0.75rem;
}
.fi-grid.lg\:fi-grid-cols-3,
.fi-grid[class*="fi-grid-cols-3"] {
    grid-template-columns: repeat(3, 1fr);
}
.fi-sc.fi-sc-has-gap {
    gap: 0.75rem;
}
.fi-section-content.fi-sc {
    display: grid;
}

/* =================================================================
   TOGGLE
   ============================================================== */
.fi-toggle-input {
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: rgb(209 213 219);
    position: relative;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}
.fi-toggle-input:checked,
.fi-toggle-input[aria-checked="true"] {
    background: rgb(217 119 6);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 768px) {
    .oe-grid-2, .oe-grid-3 { grid-template-columns: 1fr; }
    .fi-grid[class*="fi-grid-cols-3"] { grid-template-columns: 1fr; }
    .fi-fo-repeater table { font-size: 0.75rem; }
    .fi-fo-repeater table thead th { font-size: 0.625rem; padding: 0.375rem 0.25rem; }
    .fi-fo-repeater table tbody td { padding: 0.25rem; }
}