.rgft-oe{
    --oe-accent: #2f5fe0;
    --oe-ink: #15171b;
    --oe-line: #e3e3e6;
    --oe-muted: #78787b;
    --oe-faint: #969699;
    --oe-bg: #faf9f7;
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
    color: #15171b;
    background: #f7f7f5;
    -webkit-font-smoothing: antialiased;
}
.rgft-oe *{ box-sizing: border-box; }
.rgft-oe a{ color: var(--oe-accent); text-decoration: none; }
.rgft-oe a:hover{ color: #1e42a8; }

.rgft-oe > .rgft-page-head-v2{ max-width: 1180px; margin: 0 auto; padding: 0 26px; }
@media (max-width: 900px){ .rgft-oe > .rgft-page-head-v2{ padding-left: 14px; padding-right: 14px; } }

.rgft-oe .rgft-order-form__back{
    display: block;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 26px;
    font-size: 12.5px;
    color: var(--oe-muted);
}
@media (max-width: 900px){ .rgft-oe .rgft-order-form__back{ padding: 0 14px; } }
.rgft-oe .rgft-order-form__back:hover{ color: var(--oe-accent); }

/* ── Shared page column ────────────────────────────────────────────── */
.rgft-oe .rgft-notes-area,
.rgft-oe .rgft-order-form,
.rgft-oe > .rgft-order-form__section,
.rgft-oe .rgft-order-form__submit{
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
}
.rgft-oe .rgft-order-form{ display: flex; flex-direction: column; gap: 16px; padding: 0 26px; }
.rgft-oe > .rgft-order-form__section{ margin: 0 auto 0; padding-left: 26px; padding-right: 26px; }
.rgft-oe .rgft-notes-area{ padding: 0 26px; }
.rgft-oe .rgft-order-form__submit{ padding: 0 26px 120px; }
@media (max-width: 900px){
    .rgft-oe .rgft-order-form,
    .rgft-oe > .rgft-order-form__section,
    .rgft-oe .rgft-notes-area,
    .rgft-oe .rgft-order-form__submit{ padding-left: 14px; padding-right: 14px; }
}

/* ── Cards (every section) ─────────────────────────────────────────── */
.rgft-oe .rgft-card.rgft-order-form__section{
    background: #fff;
    border: 1px solid var(--oe-line);
    border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px -10px rgba(15,23,42,.10);transition:box-shadow .18s ease,transform .18s ease;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
}
.rgft-oe .rgft-card.rgft-order-form__section:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(15,23,42,.05),0 16px 36px -12px rgba(15,23,42,.14)}
.rgft-oe .rgft-order-form__section-title{
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
}
.rgft-oe .rgft-order-form__section-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.rgft-oe .rgft-order-form__subhead{
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--oe-muted);
    font-family: inherit;
}
.rgft-oe .rgft-order-form__price-source{
    font-weight: 400;
    font-size: 12px;
    color: var(--oe-faint);
}

/* ── Field grids ────────────────────────────────────────────────────── */
.rgft-oe .rgft-order-form__grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
}
@media (max-width: 560px){ .rgft-oe .rgft-order-form__grid{ grid-template-columns: 1fr; } }

.rgft-oe .rgft-order-form__field{
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.rgft-oe .rgft-order-form__field > span{ font-size: 11.5px; color: var(--oe-faint); }
.rgft-oe .rgft-order-form__field--wide{ grid-column: 1 / -1; }
.rgft-oe .rgft-order-form__field input,
.rgft-oe .rgft-order-form__field select,
.rgft-oe .rgft-order-form__field textarea{
    font-family: inherit;
    font-size: 13.5px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--oe-line);
    background: var(--oe-bg);
    border-radius: 10px;
    width: 100%;
}
.rgft-oe .rgft-order-form__field textarea{
    height: auto;
    padding: 12px;
    line-height: 1.7;
    resize: vertical;
}
.rgft-oe .rgft-order-form__field input:focus,
.rgft-oe .rgft-order-form__field select:focus,
.rgft-oe .rgft-order-form__field textarea:focus{
    outline: none;
    border-color: var(--oe-accent);
    background: #fff;
}

.rgft-oe .rgft-order-form__hint{
    font-size: 11.5px;
    color: var(--oe-faint);
    line-height: 1.7;
    margin: 0;
    grid-column: 1 / -1;
}
.rgft-oe .rgft-order-form__hint--warn{
    color: #a06a15;
    background: #eeeef7;
    border: 1px solid #f0e0a8;
    border-radius: 8px;
    padding: 8px 12px;
}

/* ── Existing product rows ─────────────────────────────────────────── */
.rgft-oe .rgft-order-form__rows{ display: flex; flex-direction: column; gap: 12px; }
.rgft-oe .rgft-order-form__row--existing{
    border: 1px solid #e8e8eb;
    border-radius: 12px;
    padding: 14px;
    background: #fcfcfa;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rgft-oe .rgft-order-form__row-main{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.rgft-oe .rgft-order-form__row-thumb{
    width: 48px; height: 48px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--oe-line);
    flex: none;
}
.rgft-oe .rgft-order-form__row-thumb--empty{
    display: flex; align-items: center; justify-content: center;
    background: #ededef; color: #acacaf; font-size: 13px;
}
.rgft-oe .rgft-order-form__row-id{
    font-weight: 600;
    font-size: 12.5px;
    color: var(--oe-accent);
    font-variant-numeric: tabular-nums;
    flex: none;
}
.rgft-oe .rgft-order-form__row-main select,
.rgft-oe .rgft-order-form__row-main input[type="number"]{
    font-family: inherit;
    font-size: 13.5px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--oe-line);
    background: #fff;
    border-radius: 10px;
    flex: 1 1 160px;
    min-width: 110px;
}
.rgft-oe .rgft-order-form__row-price{
    border-color: #e2d4ae !important;
    background: #f6f6fa !important;
}
@media (max-width: 640px){
    /* Stack every child of the row full-width instead of fighting for
       horizontal space — with up to 8 differently-sized items (thumb,
       id, product select, units, price, status badge, lock checkbox,
       image-swap button) on one row, flex-wrap alone left some
       combinations not shrinking cleanly at narrow widths. One item
       per line always fits, regardless of item count or width. */
    .rgft-oe .rgft-order-form__row-main{
        flex-direction: column;
        align-items: stretch;
    }
    .rgft-oe .rgft-order-form__row-main select,
    .rgft-oe .rgft-order-form__row-main input[type="number"]{
        max-width: none;
        width: 100%;
    }
    .rgft-oe .rgft-order-form__row-thumb,
    .rgft-oe .rgft-order-form__row-thumb--empty,
    .rgft-oe .rgft-order-form__row-id,
    .rgft-oe .rgft-badge,
    .rgft-oe .rgft-order-form__row-image-swap{
        align-self: flex-start;
    }
}
.rgft-oe .rgft-badge{
    flex: none;
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
    background: #f1f1f3;
    color: var(--oe-muted);
}
.rgft-oe .rgft-badge--active{ background: #eef2ff; color: #1e42a8; }
.rgft-oe .rgft-badge--idle{ background: #eeeef7; color: #8a6a12; }
.rgft-oe .rgft-badge--completed{ background: #e9f5ee; color: #0f7a4a; }
.rgft-oe .rgft-badge--cancelled{ background: #fbeeec; color: #b4372c; }
.rgft-oe .rgft-order-form__row-image-swap{
    flex: none;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.rgft-oe .rgft-order-form__row-image-swap input[type="file"]{ display: none; }
.rgft-oe .rgft-order-form__row-image-swap span{
    font-family: inherit;
    font-size: 12.5px;
    height: 44px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    border: 1px dashed #d5d5d8;
    border-radius: 10px;
    background: #fff;
    color: var(--oe-faint);
    white-space: nowrap;
}
/* The per-product price now gets its own clearly-labeled, visually
   distinct zone below the identity row (thumb/id/type/units/status),
   instead of being one more small input crammed among 6-7 other
   elements — direct fix for "price placement isn't clear" feedback. */
.rgft-oe .rgft-order-form__row-price-box{
    background: #f6f6fa;
    border: 1px solid #d7d7e4;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rgft-oe .rgft-order-form__row-price-box .rgft-order-form__field{ max-width: 320px; }
.rgft-oe .rgft-order-form__row-pl{
    font-size: 11.5px;
    color: var(--oe-faint);
}
.rgft-oe .rgft-order-form__row-pl span{ font-variant-numeric: tabular-nums; font-weight: 600; color: var(--oe-muted); }

.rgft-oe .rgft-order-form__stations-label{
    font-size: 11.5px;
    color: var(--oe-faint);
}
.rgft-oe .rgft-order-form__stations-original-note{
    color: #a8281b;
    font-weight: 600;
}
.rgft-oe .rgft-order-form__stations-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 8px;
}
@media (max-width: 900px){ .rgft-oe .rgft-order-form__stations-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .rgft-oe .rgft-order-form__stations-grid{ grid-template-columns: 1fr; } }
.rgft-oe .rgft-order-form__stations-grid select{
    font-family: inherit;
    font-size: 12.5px;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--oe-line);
    background: #fff;
    border-radius: 10px;
    width: 100%;
}
.rgft-oe .rgft-order-form__row-lock{
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--oe-muted);
}
.rgft-oe .rgft-order-form__row-lock input{ width: 17px; height: 17px; accent-color: var(--oe-ink); cursor: pointer; }

/* ── New-product rows (JS-generated) reuse the same field/station rules
   above; just the outer card + delete button need their own styling. ── */
.rgft-oe #rgft-product-rows .rgft-order-form__row,
.rgft-oe #rgft-cost-rows .rgft-order-form__row{
    border: 1px solid #e8e8eb;
    border-radius: 12px;
    padding: 14px;
    background: #fcfcfa;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rgft-oe .rgft-order-form__row-remove{
    align-self: flex-start;
    font-family: inherit;
    font-size: 12.5px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #f2d4cf;
    border-radius: 10px;
    background: #fff;
    color: #b4372c;
    cursor: pointer;
}
.rgft-oe .rgft-order-form__row-remove:hover{ background: #f2f2f5; }
.rgft-oe .rgft-order-form__add-btn{
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--oe-line);
    border-radius: 10px;
    background: #fff;
    color: var(--oe-ink);
    cursor: pointer;
    white-space: nowrap;
}
.rgft-oe .rgft-order-form__add-btn:hover{ border-color: var(--oe-accent); color: var(--oe-accent); }

/* ── Submit row ─────────────────────────────────────────────────────── */
.rgft-oe .rgft-order-form__submit--split{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
@media (max-width: 560px){ .rgft-oe .rgft-order-form__submit--split{ flex-direction: column-reverse; align-items: stretch; } }
.rgft-oe .rgft-order-form__delete-btn{
    font-family: inherit;
    font-size: 13px;
    height: 46px;
    padding: 0 18px;
    border: 1px solid #f2d4cf;
    border-radius: 11px;
    background: #fff;
    color: #b4372c;
    cursor: pointer;
    white-space: nowrap;
}
.rgft-oe .rgft-order-form__delete-btn:hover{ background: #f2f2f5; }
.rgft-oe .rgft-orders__new-btn{
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    height: 46px;
    padding: 0 26px;
    border: 0;
    border-radius: 11px;
    background: var(--oe-ink);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}
.rgft-oe .rgft-orders__new-btn:hover{ opacity: .92; }

/* ── Cost summary cards (KPI-style, 4-up) ──────────────────────────── */
.rgft-oe .rgft-cost-summary{
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
}
@media (max-width: 900px){ .rgft-oe .rgft-cost-summary{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .rgft-oe .rgft-cost-summary{ grid-template-columns: 1fr; } }
.rgft-oe .rgft-cost-summary__item{
    border: 1px solid var(--oe-line);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.rgft-oe .rgft-cost-summary__item span{ font-size: 12px; color: var(--oe-muted); }
.rgft-oe .rgft-cost-summary__item strong{ font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rgft-oe .rgft-cost-summary__item--total{
    border-color: var(--oe-ink);
    background: var(--oe-ink);
    color: #fff;
}
.rgft-oe .rgft-cost-summary__item--total span{ color: #b5b5b8; }
.rgft-oe .rgft-cost-summary__breakdown{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11.5px;
    color: var(--oe-faint);
}

/* ── Tables ─────────────────────────────────────────────────────────── */
.rgft-oe .rgft-cost-table-wrap{ overflow-x: auto; }
.rgft-oe .rgft-cost-table{ width: 100%; border-collapse: collapse; min-width: 560px; }
.rgft-oe .rgft-cost-table th{
    text-align: right;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--oe-faint);
    padding: 0 12px 10px;
    white-space: nowrap;
}
.rgft-oe .rgft-cost-table td{
    font-size: 13px;
    padding: 12px;
    border-top: 1px solid #ededef;
    white-space: nowrap;
}
.rgft-oe .rgft-cost-table__general td{ color: var(--oe-faint); font-style: italic; }

/* ── Add-cost form ──────────────────────────────────────────────────── */
.rgft-oe .rgft-cost-form{
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid #ededef;
    padding-top: 16px;
}
.rgft-oe .rgft-cost-form .rgft-order-form__field select,
.rgft-oe .rgft-cost-form .rgft-order-form__field input{ background: var(--oe-bg); }
.rgft-oe #cost_amount_btn,
.rgft-oe .rgft-cost-form button[type="submit"]{
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: var(--oe-accent);
    color: #fff;
    cursor: pointer;
    align-self: flex-end;
}
.rgft-oe .rgft-cost-form button[type="submit"]:hover{ opacity: .92; }

/* ── Entries table delete buttons ──────────────────────────────────── */
.rgft-oe .rgft-cost-table button{
    font-family: inherit;
    font-size: 12px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #f2d4cf;
    border-radius: 9px;
    background: #fff;
    color: #b4372c;
    cursor: pointer;
}
.rgft-oe .rgft-cost-table button:hover{ background: #f2f2f5; }

/* ── Notes area (classes preserved exactly for dashboard.js) ─────────── */
.rgft-oe .rgft-notes-area{
    background: #fff;
    border: 1px solid var(--oe-line);
    border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px -10px rgba(15,23,42,.10);transition:box-shadow .18s ease,transform .18s ease;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.rgft-oe .rgft-notes-area:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(15,23,42,.05),0 16px 36px -12px rgba(15,23,42,.14)}
.rgft-oe .rgft-notes-list{ display: flex; flex-direction: column; gap: 8px; }
.rgft-oe .rgft-note{
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--oe-bg);
    font-size: 12.5px;
}
.rgft-oe .rgft-note__icon{ flex: none; margin-top: 2px; color: var(--oe-faint); }
.rgft-oe .rgft-note--recent{ background: #eef2ff; }
.rgft-oe .rgft-note__head{ display: flex; align-items: center; gap: 6px; }
.rgft-oe .rgft-pulse-dot{
    width: 7px; height: 7px; border-radius: 50%; background: var(--oe-accent); flex: none;
}
.rgft-oe .rgft-note__label{ font-size: 12px; }
.rgft-oe .rgft-note__meta{ font-size: 11px; color: var(--oe-faint); }
.rgft-oe .rgft-note__body{ font-size: 12.5px; color: var(--oe-ink); line-height: 1.6; }
.rgft-oe .rgft-note-form{ display: flex; gap: 8px; }
.rgft-oe .rgft-note-form__input{
    flex: 1;
    font-family: inherit;
    font-size: 13px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--oe-line);
    background: var(--oe-bg);
    border-radius: 10px;
}
.rgft-oe .rgft-note-form__btn{
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: var(--oe-ink);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}

/* ── Notice banner ──────────────────────────────────────────────────── */
.rgft-oe .rgft-orders__notice{
    max-width: 1180px;
    margin: 0 auto 16px;
    padding: 12px 26px;
    background: #e9f5ee;
    color: #0f7a4a;
    border-radius: 10px;
    font-size: 13px;
}
.rgft-oe .rgft-orders__notice--error{ background: #fbeeec; color: #b4372c; }
@media (max-width: 900px){ .rgft-oe .rgft-orders__notice{ padding: 12px 14px; } }

/* LTR (English) override — see the equivalent block in rtl.css for the
   full rationale. Only this file's one local text-align:right rule needs
   re-declaring; the padding-left/padding-right pairs elsewhere in this
   file are already symmetric and need no change. */
.rgft-oe[dir="ltr"] .rgft-cost-table th{
    text-align: left;
}