IS A DATA GRID.
Several libraries here use tables for LAYOUT, and turning one into a block
scroll box takes its geometry apart. FullCalendar 1.x builds both its header
bar and its month grid out of tables; the datepickers do the same. These
keep table layout, and the rule above is a data-grid rule only.
Found by rendering the calendar, not by reading the stylesheet. */
#main .fc table,
#main table.fc-header,
#main table.fc-border-separate,
#main .datepicker table,
#main .ui-datepicker table,
#main .uib-datepicker table,
#main .bootstrap-datetimepicker-widget table,
#main .ui-timepicker table {
display: table;
overflow-x: visible;
width: 100%;
max-width: 100%;
min-width: 0;
}
/* A two-column key/value table is not a grid either. The docket's two money
widgets — order profit; total to pay / paid / balance — are one label
and one value per row, 350px at most. As a block scroll box the table
shrink-wraps to its content and, in RTL, hugs the right edge with the
leading-edge hairline painted over the empty left half: the CTO's
screenshot of 2026-09-14. Table layout at full width, no scroller, the two
columns split evenly. */
#main #order-profit-widget table,
#main #order-totals-widget table {
display: table;
overflow-x: visible;
width: 100%;
max-width: 100%;
min-width: 0;
background-image: none;
}
#main #order-profit-widget table th,
#main #order-profit-widget table td,
#main #order-totals-widget table th,
#main #order-totals-widget table td {
width: 50%;
vertical-align: middle;
}
/* the theme's own scrollers get momentum scrolling on iOS */
.table-responsive,
.dataTables_scrollBody,
.custom-scroll {
-webkit-overflow-scrolling: touch;
}
/* ---------------------------------------------------------------------------
3b. BARS THAT WERE MEASURED ONCE, AT DESKTOP WIDTH, AND PINNED
st-bulk-actions.directive.js:68 reads its parent's width and writes it back
as an inline pixel value, then adds `.sticky`, which is `position:fixed`.
A fixed box with no `left`/`right` falls back to its static position, so the
stale number decides where it lands. Measured on the orders grid at 390px:
`width:1531px` at x=-1163 — the bar is on screen, but only its trailing edge
is; the action button and its label sit 1100px off to the side and cannot be
reached or even seen.
The measurement is taken from a `$timeout(sticky(), 2000)` — note that this
calls `sticky()` immediately and hands `$timeout` its return value, so it
runs once, early, and never again. Nothing re-measures on resize or rotate.
A stylesheet `!important` outranks a non-important inline style, which is
what lets this be fixed without touching the directive. Pinning both edges
also makes `width` irrelevant, so a future stale measurement cannot resurrect
the bug. Same treatment for the two sibling implementations.
--------------------------------------------------------------------------- */
#main .bulk-actions.sticky,
#main st-bulk-actions.sticky,
#main invoice-bulk-actions.sticky,
#main mt-bulk-actions.sticky {
left: 0 !important;
right: 0 !important;
width: auto !important;
min-width: 0 !important; /* the bookkeeping grid's bar carries an inline min-width: 1000px, which would outrank the max-width */
max-width: 100% !important;
z-index: 900;
}
/* its inner grid is a `.smart-form` column set sized in percentages of that
stale width; once the bar is pinned they have to be re-based on it */
#main .bulk-actions.sticky .row,
#main .bulk-actions.sticky .smart-form,
#main .bulk-actions.sticky section[class*="col-"] {
width: auto !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
float: none !important;
}
/* ---------------------------------------------------------------------------
3c. THE CALENDAR
Two faults, both measured at 390px on #/calendar.
(a) THE WIDGET TOOLBAR DOES NOT CONTAIN ITS OWN CONTENT. `.widget-body-
toolbar` holds a floated smart-form column; the filter checkboxes inside
it wrap to 139px of content while the toolbar itself reports a height of
42px, because a float does not extend its parent. The calendar begins at
the toolbar's declared bottom and the two overlap by ~97px — the month
name, the today button and the arrows land on top of the date grid.
(b) FULLCALENDAR 1.x LAYS ITS HEADER OUT AS A THREE-CELL TABLE ROW (title,
today, prev/next). At 307px those three cells cannot coexist and the
buttons ride over the day-name row. Stacking them costs one line of
vertical space and makes all three usable.
--------------------------------------------------------------------------- */
#main .widget-body-toolbar {
overflow: hidden;
height: auto !important;
min-height: 0 !important;
}
/* `#calendar-buttons{position:absolute;right:14px;top:5px}` parks the filter
checkboxes and the new-event button OVER the calendar header, which works
when the header has 900px of slack and collides at 390px — the checkboxes
sat on top of the month name and the navigation arrows. Absolute also takes
the box out of flow, which is why containing the toolbar's floats above did
not help: there were no floats left to contain. Put it back in the flow. */
#main #calendar-buttons {
position: static !important;
right: auto !important;
left: auto !important;
top: auto !important;
width: 100% !important;
margin-bottom: 6px;
}
/* four one-per-line checkboxes cost most of the screen before the calendar
even starts; two per row is enough at 360px and up */
#main #calendar-buttons > section[class*="col-"] {
display: inline-block !important;
width: 49% !important;
vertical-align: top;
}
#main #calendar-buttons > .btn-group {
margin-top: 4px;
}
/* `#calendar .fc-button-today{margin-top:-18px}` lifts the button into the row
above it — off its own cell once the header is stacked */
#main .fc-button-today,
#main #calendar .fc-button-today {
margin-top: 0 !important;
top: 0 !important;
}
#main .fc-header .fc-button {
margin-bottom: 4px;
vertical-align: middle;
}
#main .widget-body-toolbar > [class*="col-"],
#main .widget-body-toolbar > .row > [class*="col-"] {
width: 100% !important;
float: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#main .fc-header,
#main .fc-header tbody,
#main .fc-header tr {
display: block !important;
width: 100% !important;
}
#main .fc-header td {
display: block !important;
width: 100% !important;
text-align: center !important;
padding: 3px 0 !important;
white-space: normal !important;
}
#main .fc-header-title h2 {
font-size: 17px;
line-height: 1.4;
margin: 0;
}
/* the arrows and the today button need a real target */
#main .fc-button {
min-height: 34px;
padding: 0 12px;
line-height: 34px;
}
/* a month cell holding one event is unreadable below about 40px */
#main .fc-view-month .fc-week,
#main .fc-view-month .fc-row {
min-height: 46px;
}
/* ---------------------------------------------------------------------------
4. STOP iOS SAFARI ZOOMING ON EVERY FIELD
Mobile Safari zooms the viewport whenever a focused control renders below
16px. The theme's controls are 12-13px, and smart.blade.php sends
`user-scalable=no`, which iOS 10+ ignores for this purpose — so the page
zooms in on focus and the user cannot pinch back out. 16px removes the
trigger entirely.
⚠️ Specificity matters here, and a bare `input` selector is NOT enough — this
was caught on the live site after deployment. The theme styles form controls
through two-class descendant selectors such as `.smart-form .input input`
(0,2,1), which outrank a type selector (0,0,1) no matter how late this file
loads. On the login screen — the first thing a phone user sees — the fields
stayed at 13px and iOS kept zooming. Anchoring on `#main` (1,0,1) and on the
theme's own wrapper classes wins without resorting to `!important`.
--------------------------------------------------------------------------- */
#main input,
#main select,
#main textarea,
#main .form-control,
.smart-form .input input,
.smart-form .select select,
.smart-form .textarea textarea,
.smart-form .input-file input,
.modal input,
.modal select,
.modal textarea,
.ta-modal-dialog input,
.ta-modal-dialog select,
.ta-modal-dialog textarea {
font-size: 16px;
}
/* ---------------------------------------------------------------------------
5. TOUCH TARGETS
The theme is built for a mouse; several controls render well under the ~44px
a finger needs. Heights only — no repositioning, so nothing reflows.
--------------------------------------------------------------------------- */
.btn,
.input-group-addon,
.smart-form .button {
min-height: 38px;
}
.btn-xs,
.btn-sm {
min-height: 32px;
}
/* ACTION ICONS INSIDE A GRID ROW.
Measured on the orders grid at 390px: 18 bare icon links at 13x15px and 22
row checkboxes at 13x13px. A finger pad is about 45px across; at that size
the wrong row gets opened or the wrong order gets selected. An earlier
revision here kept them small on purpose, to hold dense columns dense — that
trade no longer applies, because the grid now scrolls horizontally instead
of compressing, so a wider action column costs nothing but a swipe.
Stated as minimums, so a control that is already big enough does not move. */
#main table td > a,
#main table th > a,
#main td .btn,
#main th .btn,
#main .btn-circle {
display: inline-block;
min-width: 34px;
min-height: 34px;
line-height: 34px;
text-align: center;
vertical-align: middle;
}
/* the row-selection and filter checkboxes: 13px native controls */
#main input[type="checkbox"],
#main input[type="radio"] {
width: 20px;
height: 20px;
vertical-align: middle;
}
/* the theme renders .smart-form checkboxes as a styled , and sizing the
hidden input behind one would only misalign it */
#main .smart-form .checkbox input[type="checkbox"],
#main .smart-form .radio input[type="radio"],
#main .onoffswitch input[type="checkbox"] {
width: auto;
height: auto;
}
/* the widget title-bar controls (collapse, fullscreen, delete) are 11-12px */
#main .jarviswidget-ctrls a,
#main .widget-toolbar > a {
min-width: 32px;
min-height: 32px;
text-align: center;
}
/* ---------------------------------------------------------------------------
6. FLEX AND GRID CHILDREN MUST BE ALLOWED TO SHRINK
A flex item defaults to `min-width:auto`, i.e. "never smaller than my
content". On a desktop that is invisible; at 390px it is the reason a flex
row silently pushes past the screen edge instead of wrapping — measured in
b-customer-info, the chat list, the hotel review header and the
in-country-tourism flight rows.
Table internals are excluded: their min-width is what keeps columns legible,
and they now live inside a horizontal scroller anyway.
⚠️ Anchors, buttons and inputs are excluded too, and that exclusion is not
cosmetic. Each `:not()` here contributes a type selector, so this rule is
(1,0,6) — higher than the (1,0,3) of the touch-target minimums in section 5,
which it therefore silently reset to zero. Measured after the section 5 rules
were added: the grid action icons were 13px wide, exactly as before. The
purpose of this rule is to let flex and grid CONTAINERS' children shrink; a
control's minimum tap size is not what it was written to defeat.
--------------------------------------------------------------------------- */
#main *:not(table):not(thead):not(tbody):not(tfoot):not(tr):not(th):not(td):not(a):not(button):not(input) {
min-width: 0;
}
/* ---------------------------------------------------------------------------
7. NOTHING WIDER THAN ITS COLUMN
Long option text, images, preformatted blocks and grid columns all
size to their content rather than their container in this theme.
(`.input-group` needs more than this — see the note below it.)
--------------------------------------------------------------------------- */
#main select,
#main .form-control,
#main [class*="col-"],
#main img,
#main .well,
#main pre {
max-width: 100%;
}
/* `.input-group` is `display:table` in Bootstrap 3. A table box with automatic
layout treats `width` as a MINIMUM and ignores `max-width` when its content
needs more room, so neither declaration can shrink it — measured at 679px
inside a 353px column on the landing-page settings screen.
`table-layout:fixed` does make the percentages binding, but it also takes
Bootstrap's `width:1%` on the addon cell literally and squeezes it to ~7px,
which pushes the button's icon out of the group. Flex is the layout Bootstrap
itself moved to for exactly this reason: the control takes the remaining room
and the addons keep their natural size. */
#main .input-group {
display: flex;
width: 100%;
max-width: 100%;
}
#main .input-group > .form-control,
#main .input-group > .form-control-static {
flex: 1 1 auto;
width: 1%;
min-width: 0;
}
/* `flex: 0 1 auto`, not `0 0 auto`: an addon holding a long label ("סכום מקדמה")
must be able to give ground rather than push the field off the screen. */
#main .input-group > .input-group-addon,
#main .input-group > .input-group-btn {
flex: 0 1 auto;
width: auto;
min-width: 0;
display: flex;
align-items: center;
}
#main .input-group > .input-group-addon {
white-space: normal;
word-break: break-word;
}
#main .input-group > .input-group-btn > .btn {
white-space: nowrap;
}
#main img {
height: auto;
}
/* Bootstrap 3's `.container` is a FIXED 750px from 768px upwards, so on a tablet
held in portrait it is 750 + 30px of padding against a 768px screen and spills
by exactly the amount measured on the register view. Fluid is the right
behaviour for every width this file governs. */
#main .container {
width: auto;
max-width: 100%;
}
/* ---------------------------------------------------------------------------
7b. MULTI-SELECTS INSIDE A COLUMN FILTER
The bookkeeping-transactions grid puts a ui-select multiple in each column's
``. On a desktop that header is wide; at 390px it is 98px, so the select
is 87px and every selected value wraps into a four-line tower. Measured with
five document types chosen: a header cell 658px tall, taller than the phone,
with the grid pushed off the bottom of the screen.
Two changes. A selected value stays on one line and ellipsises, like the
grid's own `.max-char` cells do. And the filter gets a workable minimum
width — the column simply becomes wider, which costs nothing now that the
grid scrolls sideways instead of compressing.
--------------------------------------------------------------------------- */
#main th .select2-container,
#main th .ui-select-container {
min-width: 150px;
}
#main .select2-search-choice,
#main .ui-select-match-item {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* many values chosen should scroll inside the control, not grow the header:
the chips wrap (select2 sets nowrap on the list, which with real rows in
the grid made the type column of the bookkeeping grid 705px wide at
768px — measured 2026-09-15), inside a control no wider than 320px */
#main th .select2-choices,
#main th .ui-select-multiple {
max-height: 96px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
white-space: normal;
}
#main th .ui-select-container.ui-select-multiple {
max-width: 320px;
}
/* ---------------------------------------------------------------------------
8. LONG HEBREW BUTTON LABELS WRAP INSTEAD OF OVERFLOWING
The theme sets white-space:nowrap on buttons. Hebrew action labels are long
("שלח הצעת מחיר ללקוח"), so a single button can measure 572px. Buttons inside
a table or a button group keep nowrap — those areas scroll on purpose.
--------------------------------------------------------------------------- */
#main .btn,
#main .btn-link,
#main button,
#main a.button_in_border,
#main .ta-button {
white-space: normal;
max-width: 100%;
word-break: break-word;
}
#main td .btn,
#main th .btn,
#main .btn-group .btn {
white-space: nowrap;
word-break: normal;
}
/* a button group keeps its buttons together but must not exceed the screen */
#main .btn-group,
#main .btn-toolbar {
max-width: 100%;
}
/* stacked radio/checkbox groups in the theme's smart-form */
#main .inline-group,
#main .inline-group label {
max-width: 100%;
}
/* Bootstrap 3 floats tab items, so a tab strip never wraps and the last tabs are
pushed off the screen (measured at 360px on the car-programs dialog).
inline-block keeps the same appearance but lets the strip flow onto two rows. */
#main .nav-tabs > li,
.modal .nav-tabs > li {
float: none;
display: inline-block;
}
/* the home dashboard's micro-chart strip carries -10px side margins, which put
its trend arrows past the screen edge */
#main .show-stat-microcharts {
margin-left: 0;
margin-right: 0;
}
/* ---------------------------------------------------------------------------
9. MODALS AND POPUPS FIT THE SCREEN
Several dialogs carry a desktop width (the agent balance report popup renders
at 1493px). Bounding them is enough — their internals already reflow. These
are not scoped to #main: a dialog can be attached anywhere in the document.
--------------------------------------------------------------------------- */
.modal-dialog,
.modal-content,
.modal-header,
.modal-body,
.modal-footer,
.ta-modal-dialog,
#popup,
.popup-body {
max-width: 100%;
}
.modal-header h3,
.modal-header h4,
.modal-title {
max-width: 100%;
word-break: break-word;
}
/* ---------------------------------------------------------------------------
10. FIXED-WIDTH PANELS THAT ARE NOT WORTH THEIR SPACE ON A PHONE
--------------------------------------------------------------------------- */
/* THE CHAT PANEL WAS NEVER FULLY OFF THE SCREEN.
The theme parks it with `#chat-container{position:absolute; right:-251px}`,
which is measured from its CONTAINING BLOCK, not from the viewport. On the
dashboard at 390px that containing block ends well short of the right edge,
so the panel lands at x=350 and a 40px strip of it sits on the page — a
stray bordered sliver down the side of the dashboard with nothing to
explain it. Pre-existing: measured at 40px with this layer disabled and
33px with it enabled, so this is not a regression, just something the
template sweep never looked at.
Translating by its own width is measured from the ELEMENT, so it is off the
screen wherever its containing block happens to end. The theme opens the
panel with `#chat-container.open{right:0}`; clearing the transform there
hands it straight back, so opening and closing still work exactly as they
do on a desktop. */
#chat-container {
transform: translateX(100%);
}
#chat-container.open {
transform: none;
}
#chat-container,
#chat-container .chat-list-body,
#shortcut {
max-width: 100%;
}
/* the fuelux wizard lays its steps out at a hard 4000px */
#main .wizard > .steps,
#main .fuelux .wizard ul.steps {
width: auto;
max-width: 100%;
}
/* the in-country-tourism flight-details popover is a fixed 600px card */
#in-country-tourism-flight-details-popup {
max-width: 100%;
}
/* The car-results grid declares a FIXED track — `repeat(auto-fill, 320px)`, and
320px even in the module's own smallest breakpoint (cars.css:1512/1719/1824).
A fixed track cannot fit a 320px screen once the page padding is taken off, so
the card overflows its container no matter what is done to the card itself.
A single flexible column is the only thing that can be right at these widths.
`minmax(0, 1fr)` rather than plain `1fr`: a grid track's default minimum is
min-content, which would let a wide card push the track open again. */
#main .car-container,
#main .hotel-container,
#main .search-result-container > .car-container {
grid-template-columns: minmax(0, 1fr);
}
/* The car-hire form's helper lines are laid out for a desktop-width row. The
module's own rules are extremely long selectors
(`.car-form.desktop .form-block form .desktop-form-row-1 ...`), so this needs
the flag to win rather than a longer selector of its own. */
#main p.elements-info,
#main .car-form p,
#main .car-form .form-group > p {
max-width: 100% !important;
width: auto !important;
word-break: break-word;
}
/* ---------------------------------------------------------------------------
11. THE UNAUTHENTICATED SCREENS (login, forgot-password, lock, register)
These render OUTSIDE the application shell: layout.tpl.html is behind
`ng-if="isAuthenticated()"`, so a signed-out visitor gets the view's own
`` with no page padding
at all. The Bootstrap row inside it therefore has nothing to absorb its 15px
negative margins and pushes past the screen edge — on the very first screen a
phone user ever sees.
A row that is a DIRECT child of #main only occurs in these standalone views;
inside the application every row sits within #content. So this selector is
precise, and covers all four views without naming each one.
--------------------------------------------------------------------------- */
#main > .row {
margin-left: 0;
margin-right: 0;
}
#main.login-page .welcome-form,
#main.login-page .smart-form,
#main .welcome-form {
max-width: 100%;
}
/* ---------------------------------------------------------------------------
13b. THE TOTALS STRIP — `ul#sparks`
Used by the order list (inside `article.orders_total`), the project order
list and the project flight list: a row of figures — orders, open, problem,
total due, paid, percent paid. The theme lays it out as a strip of
`inline-block` `li.sparks-info`, each capped at `max-height:47px`, whose
`
` label FLOATS LEFT (`#sparks li h5 {float:left; margin:-3px 0 0}`) and
whose value is either a `` inside that h5 (counts, percentage) or a
sibling `div.currency` holding the amount and the currency sign as two
inline-block spans (the two money figures).
With real figures at 390px — "5,243,566.57 $" — that is the CTO's screenshot
of 2026-09-11: the floated label and the `.currency` block share one line
and print over each other, and the sign drops to a line of its own. The
previous version of this section put the six in a grid but left the float
standing, so it fixed the three h5-only figures and not the two money ones.
The sweep could not see it: the mock back end answered /orders/stats with an
order list, so every figure was blank, and an empty strip measures as
perfect. mock-api.js now answers with figures at a real tenant's scale.
Label above value, value and sign on one line, three columns. The float is
cancelled, the 47px cap lifted, and the `label */
#main ul#sparks > li.sparks-info > br {
display: none;
}
/* the label — the theme floats it, and a float beside a block is the overlap */
#main ul#sparks > li.sparks-info h5 {
float: none;
display: block;
margin: 0 0 2px;
padding: 0;
line-height: 1.25;
white-space: normal;
}
/* the value: a span inside the h5 for the counts and the percentage, a sibling
.currency for the two amounts — both promoted to a line of their own */
#main ul#sparks > li.sparks-info h5 > span,
#main ul#sparks > li.sparks-info .currency {
display: block !important;
margin: 0;
}
#main ul#sparks > li.sparks-info h5 > span {
white-space: nowrap;
}
/* amount and sign side by side. The amount itself never breaks; the sign may
drop to a second line — which happens only when an amount is too long for
its column (a 15-character shekel total on a 360px phone), and beats running
into the neighbouring figure. */
#main ul#sparks > li.sparks-info .currency > span {
display: inline-block !important;
white-space: nowrap;
}
}
/* =============================================================================
PHONE-ONLY (<= 480px)
Rules that would be wrong on a small tablet in landscape live here.
============================================================================= */
@media screen and (max-width: 480px) {
/* ---------------------------------------------------------------------------
11. FILTER AND FORM PAIRS STACK
`col-xs-6` is used 849 times, mostly to place two fields side by side. At
360-430px that leaves ~165px per field, too narrow for a Hebrew label with an
Israeli ID or a phone number. Full width, one per line.
`col-xs-3` / `col-xs-2` are left alone: they are used for genuinely small
things (icons, checkboxes, currency codes) where stacking would look worse.
--------------------------------------------------------------------------- */
#main .col-xs-6 {
width: 100%;
float: none;
}
/* ---------------------------------------------------------------------------
13. THE ORDER LISTS BECOME CARDS
`#orders_list` and `#project_orders_list` are the two screens an agent spends
the day in, and on a phone they showed a docket number and nothing else.
WHY, precisely. The application already has a mobile mechanism for wide
grids — `st-table-responsive` — and this is what it does:
watchIfMobile() fires below 992px or on a mobile user agent
getCurrentElement() walks the columns adding up their widths and stops at
the first one that does not fit
elementsHideShow() .hide()s every column from that index on
addToggleButton() prepends a `+` that expands the rest into a
Before this layer existed the cut landed after column four (the select
box, the row number, the group icon and the order id), so a phone showed
the docket number and nothing else. WITH this layer NOTHING survives the
cut: the header row is `display:none` below (its labels mean nothing
above a card), every `th` measures 0 wide, and `getCurrentElement` stops
at the first zero — its cut index is 0. Measured on a booted app at
320-480px: columns 1-19 all carry an inline `display:none`, and the `+`
panel lists every titled column, 4 to 19 — the card is visible solely
because the rules below re-show its cells with `!important`. Between 481
and 991px the header is visible and the cut lands where the widths run
out: after column 6 at 600px, after column 8 at 768px (the directive's
index, 0-based, is 6 and 8; `run.js cards` reports the same number) —
see the flight-code line for what that means for a tablet. The
directive also takes this path at ANY width on a mobile user agent
(iPhone|iPod|iPad|Android|BlackBerry), so an Android tablet in landscape
gets a `+` too. (Corrected 2026-09-15; an earlier version of this
comment described the pre-layer cut as if it still applied.)
It also cannot recover. `getCurrentElement` breaks out on `width == 0` as
well as on running out of room, and a hidden column reports `clientWidth` 0 —
so every re-run sees a zero at the first already-hidden column and cuts
*there*. The cut can only ever move earlier, never later.
WHAT THIS DOES. Below the breakpoint each row becomes a card: order number
and status on the first line, the customer's name on the second, then the
project, business customer, group, clerk, end date and the two flight
codes as label: value lines, and the three money figures as tiles.
`!important` is what brings the cells back, because the directive hides
them with an inline style and a stylesheet !important outranks that. The
`+` is deliberately kept — it still reveals branch, start date, order date
and the rest, so nothing becomes unreachable.
HOW THE LINES ARE GUARANTEED. Flexbox decides line breaks from each item's
flex BASIS, before any growing, so "it will probably wrap" is not good
enough. Each group's bases sum to exactly 100%, which forces the next group
onto a new line at every viewport width. The row-number cell, which has no
value on a phone, is reused as a zero-height full-width spacer rather than
hidden, so the header line always closes.
Columns 1-6 are identical in both grids, which is why the two share these
rules; the later columns diverge (the project grid carries flight numbers
where the main grid carries dates) and are handled separately below.
--------------------------------------------------------------------------- */
/* THE TABLE BOX HAS TO GO FIRST.
A `tr` set to `display:flex` inside a box that is still `display:table` gets
an indefinite main size, and a percentage `flex-basis` then resolves against
nothing: measured, the 50%-basis date cells came out 75px wide and the money
cells shared their line instead of starting a new one — the exact thing the
percentages were chosen to guarantee. Taking the whole table out of table
layout makes each row an ordinary block-level flex container with a definite
width, and the percentages hold. */
#main #orders_list,
#main #project_orders_list,
#main #orders_list > thead,
#main #project_orders_list > thead,
#main #orders_list > tbody,
#main #project_orders_list > tbody,
#main #orders_list > tfoot,
#main #project_orders_list > tfoot {
display: block !important;
}
#main #orders_list > tbody > tr,
#main #project_orders_list > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 10px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #orders_list > tbody > tr > td,
#main #project_orders_list > tbody > tr > td {
display: none !important;
border: 0 !important;
padding: 0;
white-space: normal;
text-align: inherit;
vertical-align: middle;
/* The theme sizes these cells for a dense desktop grid and does it with
!important: `td.tables-dates-col{min-width:65px!important;max-width:75px
!important}` is one of several. Inside a card those caps clamp the flex
bases the line breaks depend on — measured, a 50%-basis date cell came out
75px and the money row joined its line instead of starting a new one. */
max-width: none !important;
min-width: 0 !important;
}
/* the cells the card is built from, in the order they appear on it */
#main #orders_list > tbody > tr > td:nth-child(1),
#main #orders_list > tbody > tr > td:nth-child(2),
#main #orders_list > tbody > tr > td:nth-child(3),
#main #orders_list > tbody > tr > td:nth-child(4),
#main #orders_list > tbody > tr > td:nth-child(5),
#main #orders_list > tbody > tr > td:nth-child(6),
#main #orders_list > tbody > tr > td:last-child,
#main #project_orders_list > tbody > tr > td:nth-child(1),
#main #project_orders_list > tbody > tr > td:nth-child(2),
#main #project_orders_list > tbody > tr > td:nth-child(3),
#main #project_orders_list > tbody > tr > td:nth-child(4),
#main #project_orders_list > tbody > tr > td:nth-child(5),
#main #project_orders_list > tbody > tr > td:nth-child(6),
#main #project_orders_list > tbody > tr > td:last-child {
display: block !important;
}
/* line 1 — select, group flag, order number, actions */
#main #orders_list > tbody > tr > td:nth-child(1),
#main #project_orders_list > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
margin-inline-end: 8px;
white-space: nowrap;
}
#main #orders_list > tbody > tr > td:nth-child(3),
#main #project_orders_list > tbody > tr > td:nth-child(3) {
order: 2;
flex: 0 0 auto;
margin-inline-end: 6px;
}
#main #orders_list > tbody > tr > td:nth-child(4),
#main #project_orders_list > tbody > tr > td:nth-child(4) {
order: 3;
flex: 1 1 auto;
min-width: 0;
font-size: 16px;
font-weight: 700;
white-space: nowrap;
}
#main #orders_list > tbody > tr > td:last-child,
#main #project_orders_list > tbody > tr > td:last-child {
order: 4;
flex: 0 0 auto;
white-space: nowrap;
}
/* THE LINE BREAK. The row number is worthless on a phone, so instead of hiding
it, it becomes a full-width zero-height item — which closes line 1 no matter
how wide the screen is. */
#main #orders_list > tbody > tr > td:nth-child(2),
#main #project_orders_list > tbody > tr > td:nth-child(2) {
order: 5;
flex: 1 0 100%;
height: 0;
min-height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
}
/* line 2 — the customer. Surname and forename size to their own text and sit
next to each other, so the line reads as one name rather than as two columns
with a gap between them. The line is closed by a second spacer below rather
than by percentages, which is what lets them be content-sized. */
#main #orders_list > tbody > tr > td:nth-child(5),
#main #project_orders_list > tbody > tr > td:nth-child(5) {
order: 6;
flex: 0 1 auto;
padding-inline-end: 5px;
}
#main #orders_list > tbody > tr > td:nth-child(6),
#main #project_orders_list > tbody > tr > td:nth-child(6) {
order: 7;
flex: 1 1 auto;
text-align: start;
}
/* the second line break. A cell the card never shows earns its keep closing
the name line: the start date on the main grid, the outbound flight's
status on the project grid. (Until 2026-09-15 this was cell 8 on both
grids; cell 8 now carries a flight code on both — see line 6 below.) */
#main #orders_list > tbody > tr > td:nth-child(7),
#main #project_orders_list > tbody > tr > td:nth-child(9) {
display: block !important;
order: 8;
flex: 1 0 100%;
height: 0;
min-height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
padding: 0;
}
/* `.max-char` caps a cell at 70px and ellipsises it — right for a dense desktop
grid, wrong for the one line of the card that carries the name */
#main #orders_list > tbody > tr > td.name_col,
#main #project_orders_list > tbody > tr > td.name_col {
max-width: none !important;
overflow: visible;
text-overflow: clip;
font-size: 15px;
font-weight: 600;
line-height: 1.5;
padding-top: 2px;
}
#main #orders_list > tbody > tr > td.name_col span,
#main #project_orders_list > tbody > tr > td.name_col span {
max-width: 100%;
}
/* WHAT THE CARD CARRIES.
Lines 3 onward, on the CTO's instruction of 2026-09-14 — every one of them
a column the desktop grid already shows: project, business customer
("agent" in this code base is a business customer, not a travel agent —
see CLAUDE.md), group, clerk, end date, and the three money figures — and,
since 2026-09-15, the internal codes of the outbound and return flights
(line 6 below). The text fields go two to a line as `label: value`; the
money figures are three tiles, label above value, the way the totals strip
above the list does it. The `+` still expands whatever is left (start
date, branch, order date, flight status …), and the desktop grid is
untouched.
THE CARD IS ADDRESSED BY COLUMN NUMBER, AND NOTHING ELSE PINS THOSE.
Both grids have 20 columns, in the compiled bundle production serves and
in the source templates alike (the source carries `status_go` /
`status_back` cells at positions 11-12, but commented out — a first read
of it counted them and wrongly concluded the two differed). Anyone who
adds, removes or reorders a column and rebuilds moves every nth-child
below this line onto the wrong cell, silently. `run.js cards` reads the
header text at each index the card uses and compares it with the
translation before trusting anything, so that would fail loudly.
#orders_list 8 outbound code (inside start info) · 9 end date
10 return code (inside end info) · 11 group
12 agent · 14 clerk · 16 sum · 17 paid · 18 debt
19 project
#project_orders_list 7 outbound code · 8 return code · 11 group
12 agent · 17 sum · 18 paid · 19 debt
(it IS one project; it has no clerk or end-date
column, so those lines do not exist there) */
/* the text fields: a label, then the value, 12px, wrapping inside the card */
#main #orders_list > tbody > tr > td:nth-child(8),
#main #orders_list > tbody > tr > td:nth-child(9),
#main #orders_list > tbody > tr > td:nth-child(10),
#main #orders_list > tbody > tr > td:nth-child(11),
#main #orders_list > tbody > tr > td:nth-child(12),
#main #orders_list > tbody > tr > td:nth-child(14),
#main #orders_list > tbody > tr > td:nth-child(19),
#main #project_orders_list > tbody > tr > td:nth-child(7),
#main #project_orders_list > tbody > tr > td:nth-child(8),
#main #project_orders_list > tbody > tr > td:nth-child(11),
#main #project_orders_list > tbody > tr > td:nth-child(12) {
display: block !important;
box-sizing: border-box;
min-width: 0;
/* the row centres its items; a two-line business customer next to a
one-line group would float the group's label to mid-height */
align-self: flex-start;
padding-top: 3px;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
text-align: start;
white-space: normal;
word-break: break-word;
overflow: visible;
text-overflow: clip;
}
/* the labels: #666 is 5.7:1 on the white card — the #999 the first version
used is 2.9:1, under AA for 12px text, and the review that set that bar
had already rejected a 3.25:1 label on the totals strip */
/* line 3 — the project, alone: its names run long */
#main #orders_list > tbody > tr > td:nth-child(19) {
order: 9;
flex: 1 1 100%;
}
/* lines 4 and 5 — two fields each. The bases sum to exactly 100% so the
break is certain; the inline-end padding is inside the box, so it cannot
push the pair onto three lines. */
#main #orders_list > tbody > tr > td:nth-child(12),
#main #project_orders_list > tbody > tr > td:nth-child(12) {
order: 10; /* business customer */
flex: 1 1 50%;
padding-inline-end: 8px;
}
#main #orders_list > tbody > tr > td:nth-child(11),
#main #project_orders_list > tbody > tr > td:nth-child(11) {
order: 11; /* group */
flex: 1 1 50%;
}
#main #orders_list > tbody > tr > td:nth-child(14) {
order: 12; /* clerk */
flex: 1 1 50%;
padding-inline-end: 8px;
}
#main #orders_list > tbody > tr > td:nth-child(9) {
order: 13; /* end date */
flex: 1 1 50%;
}
/* the date itself never breaks; the label before it may — "Дата окончания:
04/01/2027" at 12px is wider than half a 320px card, and a nowrap cell
with min-width:0 and overflow:visible ran that past the card's edge */
#main #orders_list > tbody > tr > td:nth-child(9) > span {
white-space: nowrap;
}
/* line 6 — THE FLIGHT CODES, on the CTO's instruction of 2026-09-15: the
agency's own internal number of the outbound flight and of the return
flight (`flight.number_internal` of `order.go_flight` / `order.back_flight`
— the first flight of the order with direction 1, resp. 2 — which the list
endpoint already returns as `go_flight_internal_number` /
`back_flight_internal_number`). An order may have neither, one or both.
On the project grid these are columns 7 and 8, shown on the desktop and
hidden on the phone until now; the cells are simply brought back. The
main grid has no such column, so its row template gained one extra span
in cell 8 (start info) and one in cell 10 (end info) — bound exactly like
the project grid's cell, carrying Bootstrap's `.hidden`
(`display:none !important`, screen medium) and the `hidden` attribute
(the UA stylesheet, every medium, print included) — which keeps the
desktop grid pixel-identical at every width above 480: the span only
exists on the card, where the rules below outrank both on specificity
(2 ids + 2 classes + 3 types against 0,1,0). That template lives in
build/templates.cache.js, patched by hand like app.min.js; `run.js gate`
proves the compiled copy and the source agree. The desktop cell's own
text (LY381, airline code and flight number) is hidden on the card, so
the line reads "קוד הלוך: MRK-2026-01" — the wording is the lang files'
report.go_number_internal / report.back_number_internal, the CTO's own
words for this datum ("the internal code of the outbound") and what the
printed reports call it, rather than the project grid's column header
"טיסת הלוך", which reads as a flight number; a different wording is a
one-line change here and in the harness oracle, never a template patch.
THE LABEL IS DRAWN ON THE SPAN, NOT ON THE CELL — on purpose. This
stylesheet and the template patch ship as two files, and a phone can
hold any pairing of old and new (a deploy in progress, a rollback of one
file, a browser that fetched one of them under the new version id before
the other landed). With the label on the cell, the new stylesheet over
the OLD template would print "קוד הלוך:" / "קוד חזור:" with nothing after
them on every card (measured); with the label on the span, a cell
without the span shows nothing at all — a 3px gap — and the old
stylesheet over the new template is the 2026-09-14 card, spans hidden.
Every pairing is inert; the order of the deploy does not matter for
correctness (it is still cache first, stylesheet second, /version last —
see docs/05 §10).
WHAT THE `+` PANEL SHOWS. It reads each hidden cell's textContent, so at
<=480px the start-info line there reads "פרטי התחלה: LY381 MRK-2026-01"
— the airline number, a space, the internal code, under the card that
already shows the code labelled. Between 481 and 991px (a landscape phone,
a tablet), or at any width on a mobile user agent, there is no card, and
the `+` is the only place the main grid shows the code: behind the
start-info title at 600px (cut after column 6), and at 768px (cut after
column 8) the outbound one not at all, because cell 8 is then a visible
desktop cell — the theme declares it 40px wide, table layout ignores
that — whose hidden span stays hidden. The project grid shows both in
its own columns at those widths.
A code is an identifier and never breaks across lines: it drops whole
under its label when the half-card is too narrow for both (320px in
Hebrew, the end-date precedent) — the label's own space is the one break
opportunity inside the span, so the label wraps normally and the code
does not — and a pathological value (the column is VARCHAR 255) is
clipped with an ellipsis by the span's own box instead of running into
the neighbouring cell; `vertical-align: top` because an inline-block
with hidden overflow puts its baseline at its bottom edge and would
otherwise sit raised in its line. In Hebrew the clipped part is the
start of the code, and a code mixing
digit and letter runs is drawn as the bidi algorithm draws it on every
other screen of the app (the docket, the invoices, the project grid, the
wizard's own input) — the card does not isolate it, so it reads the same
here as there. A whitespace-only code (the column is never trimmed) is
not `:empty`: label with nothing after it and no dash, the same as the
desktop project grid shows for it. */
#main #orders_list > tbody > tr > td:nth-child(8),
#main #project_orders_list > tbody > tr > td:nth-child(7) {
order: 14; /* outbound flight code */
flex: 1 1 50%;
padding-inline-end: 8px;
}
#main #orders_list > tbody > tr > td:nth-child(10),
#main #project_orders_list > tbody > tr > td:nth-child(8) {
order: 15; /* return flight code */
flex: 1 1 50%;
}
/* the desktop text of the main grid's cells (airline code + flight number)
stays off the card; the `+` panel still carries it */
#main #orders_list > tbody > tr > td:nth-child(8) > span:not(.order-card-flight),
#main #orders_list > tbody > tr > td:nth-child(10) > span:not(.order-card-flight) {
display: none;
}
#main #orders_list > tbody > tr > td:nth-child(8) > .order-card-flight,
#main #orders_list > tbody > tr > td:nth-child(10) > .order-card-flight,
#main #project_orders_list > tbody > tr > td:nth-child(7) > span,
#main #project_orders_list > tbody > tr > td:nth-child(8) > span {
display: inline-block !important;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
}
/* the label, inside the span: its trailing space is where the line may
break (the span's own text, the code, may not) */
#main #orders_list > tbody > tr > td:nth-child(8) > .order-card-flight::before,
#main #orders_list > tbody > tr > td:nth-child(10) > .order-card-flight::before,
#main #project_orders_list > tbody > tr > td:nth-child(7) > span::before,
#main #project_orders_list > tbody > tr > td:nth-child(8) > span::before {
white-space: normal;
color: #666;
}
/* no flight in that direction: a dash after the label, drawn on the span
itself — `:empty` on the span needs no `:has()`, so an older iPhone gets
the dash too (the other fields' dashes, below, ride on `:has()`) */
#main #orders_list > tbody > tr > td:nth-child(8) > .order-card-flight:empty::after,
#main #orders_list > tbody > tr > td:nth-child(10) > .order-card-flight:empty::after,
#main #project_orders_list > tbody > tr > td:nth-child(7) > span:empty::after,
#main #project_orders_list > tbody > tr > td:nth-child(8) > span:empty::after {
content: '—';
color: #777;
}
#main #orders_list > tbody > tr > td:nth-child(8) > .order-card-flight::before,
#main #project_orders_list > tbody > tr > td:nth-child(7) > span::before { content: 'קוד הלוך: '; }
#main #orders_list > tbody > tr > td:nth-child(10) > .order-card-flight::before,
#main #project_orders_list > tbody > tr > td:nth-child(8) > span::before { content: 'קוד חזור: '; }
#main #orders_list > tbody > tr > td:nth-child(19)::before { content: 'פרוייקט: '; color: #666; }
#main #orders_list > tbody > tr > td:nth-child(12)::before,
#main #project_orders_list > tbody > tr > td:nth-child(12)::before { content: 'לקוח עסקי: '; color: #666; }
#main #orders_list > tbody > tr > td:nth-child(11)::before,
#main #project_orders_list > tbody > tr > td:nth-child(11)::before { content: 'קבוצה: '; color: #666; }
#main #orders_list > tbody > tr > td:nth-child(14)::before { content: 'פקיד: '; color: #666; }
#main #orders_list > tbody > tr > td:nth-child(9)::before { content: 'תאריך סיום: '; color: #666; }
/* An empty value gets a dash, so "קבוצה:" is never left hanging. The project
cell has two shapes — a link inside a span for a user with manage_project,
a bare span for one without — and both are covered. `:has()` is Safari
15.4 / Chrome 105; older browsers show the label alone, as before. */
#main #orders_list > tbody > tr > td:nth-child(9):has(> span:empty)::after,
#main #orders_list > tbody > tr > td:nth-child(11):has(> span:empty)::after,
#main #orders_list > tbody > tr > td:nth-child(12):has(> span:empty)::after,
#main #orders_list > tbody > tr > td:nth-child(14):has(> span:empty)::after,
#main #orders_list > tbody > tr > td:nth-child(19):has(a:empty)::after,
#main #orders_list > tbody > tr > td:nth-child(19):has(> span:empty)::after,
#main #project_orders_list > tbody > tr > td:nth-child(11):has(> span:empty)::after,
#main #project_orders_list > tbody > tr > td:nth-child(12):has(> span:empty)::after {
content: '—';
color: #777;
}
/* The project cell holds a link to the project; keep it looking like one, and
give a 14px line of text a 30px thumb target. Vertical padding on an INLINE
box does not change the line's height but does extend what a finger hits —
and unlike inline-block it lets the name break after the label instead of
dropping whole to the next line. */
#main #orders_list > tbody > tr > td:nth-child(19) a {
display: inline;
color: #3276b1;
padding: 8px 0;
}
/* line 7 — the money: three tiles, label above value. `align-self: stretch`
because the row centres its items and a tile whose sign wrapped would
otherwise stand taller than its neighbours' background. */
#main #orders_list > tbody > tr > td:nth-child(16),
#main #orders_list > tbody > tr > td:nth-child(17),
#main #orders_list > tbody > tr > td:nth-child(18),
#main #project_orders_list > tbody > tr > td:nth-child(17),
#main #project_orders_list > tbody > tr > td:nth-child(18),
#main #project_orders_list > tbody > tr > td:nth-child(19) {
display: block !important;
flex: 1 1 33.333%;
align-self: stretch;
box-sizing: border-box;
min-width: 0;
margin-top: 8px;
padding: 4px 4px 5px;
background: #f2f4f7;
text-align: center;
font-size: 14px;
font-weight: 700;
line-height: 1.25;
color: #333;
/* the amount never breaks; the sign may drop to a second line on a 320px
phone rather than run into the next tile — same rule as the totals strip */
white-space: normal;
overflow: visible;
text-overflow: clip;
}
#main #orders_list > tbody > tr > td:nth-child(16),
#main #project_orders_list > tbody > tr > td:nth-child(17) {
order: 16; /* total to pay */
border-start-start-radius: 6px;
border-end-start-radius: 6px;
}
/* the hairline between tiles: `!important`, because the cell rule above
zeroes every border with !important and a logical border of ordinary
weight loses to that whatever its specificity — the first version's
divider never drew */
#main #orders_list > tbody > tr > td:nth-child(17),
#main #project_orders_list > tbody > tr > td:nth-child(18) {
order: 17; /* paid */
border-inline-start: 1px solid #fff !important;
}
#main #orders_list > tbody > tr > td:nth-child(18),
#main #project_orders_list > tbody > tr > td:nth-child(19) {
order: 18; /* debt */
border-inline-start: 1px solid #fff !important;
border-start-end-radius: 6px;
border-end-end-radius: 6px;
}
#main #orders_list > tbody > tr > td:nth-child(16) > span,
#main #orders_list > tbody > tr > td:nth-child(17) > span,
#main #orders_list > tbody > tr > td:nth-child(18) > span,
#main #project_orders_list > tbody > tr > td:nth-child(17) > span,
#main #project_orders_list > tbody > tr > td:nth-child(18) > span,
#main #project_orders_list > tbody > tr > td:nth-child(19) > span {
display: inline-block;
max-width: 100%;
white-space: nowrap;
}
/* A seven-digit amount — a whole group's booking, "1,234,567.89" — is 95px
at 14px bold, and a third of a 320px card is 80. One size down and two
pixels less padding each side is what it takes on the order list; the
project page's cards are 30px narrower still (its column layout), and
there it is half a size more. Both measured. */
@media (max-width: 359px) {
#main #orders_list > tbody > tr > td:nth-child(16),
#main #orders_list > tbody > tr > td:nth-child(17),
#main #orders_list > tbody > tr > td:nth-child(18),
#main #project_orders_list > tbody > tr > td:nth-child(17),
#main #project_orders_list > tbody > tr > td:nth-child(18),
#main #project_orders_list > tbody > tr > td:nth-child(19) {
padding-left: 2px;
padding-right: 2px;
font-size: 13px;
}
#main #project_orders_list > tbody > tr > td:nth-child(17),
#main #project_orders_list > tbody > tr > td:nth-child(18),
#main #project_orders_list > tbody > tr > td:nth-child(19) {
font-size: 12.5px;
}
}
#main #orders_list > tbody > tr > td:nth-child(16)::before,
#main #orders_list > tbody > tr > td:nth-child(17)::before,
#main #orders_list > tbody > tr > td:nth-child(18)::before,
#main #project_orders_list > tbody > tr > td:nth-child(17)::before,
#main #project_orders_list > tbody > tr > td:nth-child(18)::before,
#main #project_orders_list > tbody > tr > td:nth-child(19)::before {
display: block;
margin-bottom: 1px;
font-size: 11px;
font-weight: 400;
line-height: 1.2;
color: #666; /* 5.2:1 on the tile; #888 was 3.2:1 */
}
/* "סה"כ לתשלום" is the CTO's wording for this tile (order.total_to_pay, the
same as the totals strip above the list); the column's own header says
"סכום" (order.sum), and the `+` panel, which titles from the header, will
say that too */
#main #orders_list > tbody > tr > td:nth-child(16)::before,
#main #project_orders_list > tbody > tr > td:nth-child(17)::before { content: 'סה"כ לתשלום'; }
#main #orders_list > tbody > tr > td:nth-child(17)::before,
#main #project_orders_list > tbody > tr > td:nth-child(18)::before { content: 'שולם'; }
#main #orders_list > tbody > tr > td:nth-child(18)::before,
#main #project_orders_list > tbody > tr > td:nth-child(19)::before { content: 'חוב'; }
/* The application marks the debt cell `label-danger` past the debt tolerance
and `label-success` under it (so-class on the td). WHICH class applies is
the application's decision and stays its decision; the COLOURS here are
the card's own, chosen on purpose. Every build runs the smart-style-6
skin (app.config.js), whose desktop cell is #c06060 / #6dc060 with dark
text — 3.1:1 and 5.6:1 — and neither of those reds carries white or dark
text to 4.5:1. So the tile takes a darker red and a darker green with
white text: 7.7:1 and 5.0:1, label included. Same meaning, readable. */
#main #orders_list > tbody > tr > td:nth-child(18).label-danger,
#main #project_orders_list > tbody > tr > td:nth-child(19).label-danger {
background: #a90329;
color: #fff;
}
#main #orders_list > tbody > tr > td:nth-child(18).label-success,
#main #project_orders_list > tbody > tr > td:nth-child(19).label-success {
background: #4f7a4f;
color: #fff;
}
#main #orders_list > tbody > tr > td:nth-child(18).label-danger::before,
#main #orders_list > tbody > tr > td:nth-child(18).label-success::before,
#main #project_orders_list > tbody > tr > td:nth-child(19).label-danger::before,
#main #project_orders_list > tbody > tr > td:nth-child(19).label-success::before {
color: #fff;
}
/* the `+` that reveals the remaining columns, and the row it opens */
#main #orders_list .table-responsive-toggle-info-button,
#main #project_orders_list .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
#main #orders_list > tbody > tr.table-responsive-toggle-tr,
#main #project_orders_list > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa;
}
#main #orders_list > tbody > tr.table-responsive-toggle-tr > td,
#main #project_orders_list > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main .table-toggle-li {
list-style: none;
padding: 3px 0;
font-size: 12px;
border-bottom: 1px solid #eee;
}
/* THE HEADER. Column labels mean nothing above a card, so the label row goes;
the search row stays, because searching an order list by surname is the whole
reason to open it on a phone. Only the three searches that match what the
card shows are kept. */
#main #orders_list > thead > tr:first-child,
#main #project_orders_list > thead > tr:first-child {
display: none;
}
#main #orders_list > thead > tr[search-tab-indexing],
#main #project_orders_list > thead > tr[search-tab-indexing] {
display: flex;
flex-wrap: wrap;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #orders_list > thead > tr[search-tab-indexing] > th,
#main #project_orders_list > thead > tr[search-tab-indexing] > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #orders_list > thead > tr[search-tab-indexing] > th:nth-child(4),
#main #orders_list > thead > tr[search-tab-indexing] > th:nth-child(5),
#main #orders_list > thead > tr[search-tab-indexing] > th:nth-child(6),
#main #project_orders_list > thead > tr[search-tab-indexing] > th:nth-child(4),
#main #project_orders_list > thead > tr[search-tab-indexing] > th:nth-child(5),
#main #project_orders_list > thead > tr[search-tab-indexing] > th:nth-child(6) {
display: block !important;
max-width: none !important;
min-width: 0 !important;
padding: 0 3px 4px;
/* these cells are content-box, so a 50% basis becomes 50% PLUS the padding
and two of them no longer fit on one line — measured, each search box ended
up alone on its own row */
box-sizing: border-box;
}
/* the order number gets its own line, the two name searches share the next */
#main #orders_list > thead > tr[search-tab-indexing] > th:nth-child(4),
#main #project_orders_list > thead > tr[search-tab-indexing] > th:nth-child(4) {
flex: 1 1 100%;
}
#main #orders_list > thead > tr[search-tab-indexing] > th:nth-child(5),
#main #orders_list > thead > tr[search-tab-indexing] > th:nth-child(6),
#main #project_orders_list > thead > tr[search-tab-indexing] > th:nth-child(5),
#main #project_orders_list > thead > tr[search-tab-indexing] > th:nth-child(6) {
flex: 1 1 50%;
}
/* the label row above is gone, so without these the search boxes are three
unexplained underlines */
#main #orders_list > thead > tr[search-tab-indexing] > th::before,
#main #project_orders_list > thead > tr[search-tab-indexing] > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #orders_list > thead > tr[search-tab-indexing] > th:nth-child(4)::before,
#main #project_orders_list > thead > tr[search-tab-indexing] > th:nth-child(4)::before {
content: 'חיפוש לפי מספר הזמנה';
}
#main #orders_list > thead > tr[search-tab-indexing] > th:nth-child(5)::before,
#main #project_orders_list > thead > tr[search-tab-indexing] > th:nth-child(5)::before {
content: 'שם משפחה';
}
#main #orders_list > thead > tr[search-tab-indexing] > th:nth-child(6)::before,
#main #project_orders_list > thead > tr[search-tab-indexing] > th:nth-child(6)::before {
content: 'שם פרטי';
}
#main #orders_list > thead > tr[search-tab-indexing] input,
#main #project_orders_list > thead > tr[search-tab-indexing] input {
width: 100%;
}
/* THE LABELS IN THE USER'S LANGUAGE. The blade writes the user's
system_language into , so an English or Russian user gets the
same strings the desktop column headers use in that language (app/lang/
en, ru — order.project, order.agent, order.group, order.user,
layout.end_date, report.go_number_internal, report.back_number_internal,
order.total_to_pay, order.paid, order.debt). Hebrew is the default above,
as it is everywhere else in this layer. The two flight-code labels sit on
the value span rather than the cell — see line 6 for why. */
html[lang="en"] #main #orders_list > tbody > tr > td:nth-child(19)::before { content: 'Project: '; }
html[lang="en"] #main #orders_list > tbody > tr > td:nth-child(12)::before,
html[lang="en"] #main #project_orders_list > tbody > tr > td:nth-child(12)::before { content: 'Business Client: '; }
html[lang="en"] #main #orders_list > tbody > tr > td:nth-child(11)::before,
html[lang="en"] #main #project_orders_list > tbody > tr > td:nth-child(11)::before { content: 'Group: '; }
html[lang="en"] #main #orders_list > tbody > tr > td:nth-child(14)::before { content: 'User: '; }
html[lang="en"] #main #orders_list > tbody > tr > td:nth-child(9)::before { content: 'End date: '; }
html[lang="en"] #main #orders_list > tbody > tr > td:nth-child(8) > .order-card-flight::before,
html[lang="en"] #main #project_orders_list > tbody > tr > td:nth-child(7) > span::before { content: 'Flight Number: '; }
html[lang="en"] #main #orders_list > tbody > tr > td:nth-child(10) > .order-card-flight::before,
html[lang="en"] #main #project_orders_list > tbody > tr > td:nth-child(8) > span::before { content: 'Return Flight Number: '; }
html[lang="en"] #main #orders_list > tbody > tr > td:nth-child(16)::before,
html[lang="en"] #main #project_orders_list > tbody > tr > td:nth-child(17)::before { content: 'Total payment'; }
html[lang="en"] #main #orders_list > tbody > tr > td:nth-child(17)::before,
html[lang="en"] #main #project_orders_list > tbody > tr > td:nth-child(18)::before { content: 'Paid'; }
html[lang="en"] #main #orders_list > tbody > tr > td:nth-child(18)::before,
html[lang="en"] #main #project_orders_list > tbody > tr > td:nth-child(19)::before { content: 'Debt'; }
html[lang="en"] #main #orders_list > thead > tr[search-tab-indexing] > th:nth-child(4)::before,
html[lang="en"] #main #project_orders_list > thead > tr[search-tab-indexing] > th:nth-child(4)::before { content: 'Search by order number'; }
html[lang="en"] #main #orders_list > thead > tr[search-tab-indexing] > th:nth-child(5)::before,
html[lang="en"] #main #project_orders_list > thead > tr[search-tab-indexing] > th:nth-child(5)::before { content: 'Last name'; }
html[lang="en"] #main #orders_list > thead > tr[search-tab-indexing] > th:nth-child(6)::before,
html[lang="en"] #main #project_orders_list > thead > tr[search-tab-indexing] > th:nth-child(6)::before { content: 'First name'; }
html[lang="ru"] #main #orders_list > tbody > tr > td:nth-child(19)::before { content: 'Проект: '; }
html[lang="ru"] #main #orders_list > tbody > tr > td:nth-child(12)::before,
html[lang="ru"] #main #project_orders_list > tbody > tr > td:nth-child(12)::before { content: 'Бизнес-клиент: '; }
html[lang="ru"] #main #orders_list > tbody > tr > td:nth-child(11)::before,
html[lang="ru"] #main #project_orders_list > tbody > tr > td:nth-child(11)::before { content: 'Группа: '; }
html[lang="ru"] #main #orders_list > tbody > tr > td:nth-child(14)::before { content: 'Пользователь: '; }
html[lang="ru"] #main #orders_list > tbody > tr > td:nth-child(9)::before { content: 'Дата окончания: '; }
html[lang="ru"] #main #orders_list > tbody > tr > td:nth-child(8) > .order-card-flight::before,
html[lang="ru"] #main #project_orders_list > tbody > tr > td:nth-child(7) > span::before { content: 'Номер рейса: '; }
html[lang="ru"] #main #orders_list > tbody > tr > td:nth-child(10) > .order-card-flight::before,
html[lang="ru"] #main #project_orders_list > tbody > tr > td:nth-child(8) > span::before { content: 'Номер обратного рейса: '; }
html[lang="ru"] #main #orders_list > tbody > tr > td:nth-child(16)::before,
html[lang="ru"] #main #project_orders_list > tbody > tr > td:nth-child(17)::before { content: 'Всего к оплате'; }
html[lang="ru"] #main #orders_list > tbody > tr > td:nth-child(17)::before,
html[lang="ru"] #main #project_orders_list > tbody > tr > td:nth-child(18)::before { content: 'Оплачено'; }
html[lang="ru"] #main #orders_list > tbody > tr > td:nth-child(18)::before,
html[lang="ru"] #main #project_orders_list > tbody > tr > td:nth-child(19)::before { content: 'Долг'; }
html[lang="ru"] #main #orders_list > thead > tr[search-tab-indexing] > th:nth-child(4)::before,
html[lang="ru"] #main #project_orders_list > thead > tr[search-tab-indexing] > th:nth-child(4)::before { content: 'Поиск по номеру заказа'; }
html[lang="ru"] #main #orders_list > thead > tr[search-tab-indexing] > th:nth-child(5)::before,
html[lang="ru"] #main #project_orders_list > thead > tr[search-tab-indexing] > th:nth-child(5)::before { content: 'Фамилия'; }
html[lang="ru"] #main #orders_list > thead > tr[search-tab-indexing] > th:nth-child(6)::before,
html[lang="ru"] #main #project_orders_list > thead > tr[search-tab-indexing] > th:nth-child(6)::before { content: 'Имя'; }
/* the grid no longer needs to be a horizontal scroller, and leaving it one
puts a stray scrollbar under a list of cards */
#main #orders_list,
#main #project_orders_list {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #orders-table-widget .table-responsive,
#main #project-table-widget .table-responsive {
overflow-x: visible;
}
/* the pagination and bulk-action footers, now that tfoot is a block */
#main #orders_list > tfoot > tr,
#main #project_orders_list > tfoot > tr,
#main #orders_list > tfoot > tr > td,
#main #project_orders_list > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
/* ---------------------------------------------------------------------------
13d. THE PROJECT LIST BECOMES CARDS
`#project_list` (app.projects.projectsList) has fourteen columns and the
⚠️ THE ID IS NOT UNIQUE: twelve settings grids (airports, airlines,
cities, countries, suppliers, banks, logos, nationalities, currencies,
e-ticket templates, payment methods, service categories) reuse
`id="project_list"`, and from 2026-09-14 to 2026-09-15 these rules
painted every one of them as a project card — "start date: Ben Gurion",
seat tiles under a supplier, "NaN %". Found by the sweep's inventory on
2026-09-15; every selector below is pinned to `[st-table="projects"]`,
which only the real list carries.
same `st-table-responsive` mechanism as the order grids: on a phone it
showed the project number, a truncated name and half of the operations
cell, with everything else behind the `+`. Each row is a card now, on the
CTO's instruction of 2026-09-14, built the way the order card is — the
cells brought back with !important, flex bases that sum to 100% per line:
line 1 `+` and number · name (bold link, wraps) · "future" flag · lock
line 2 start date · project status
line 3 four seat tiles: capacity · sold · leads · available
line 4 three money tiles: sales · debt · profit (permission-gated)
line 5 the six operations, each a 44px target
THE COLUMN NUMBERS MOVE WITH A PERMISSION. Cells 9 (sales), 10 (debt) and
12 (profit) carry `ng-permission="view_cost_elements"`, and ng-permission
is transclude:'element' — without the permission the cells are NOT in the
DOM and every later cell shifts: lock is 11 of 14 or 9 of 11, status 13 or
10, operations 14 or 11. So the trailing cells are addressed from the END
(`:nth-last-child`), and each money cell by BOTH ends at once, so that a
no-permission row's 9th cell (the lock) can never be painted as a money
tile. `run.js cards` measures both users.
with view_cost_elements 1 # · 2 name · 3 date · 4 future · 5 capacity
6 sold · 7 leads · 8 available · 9 sales
10 debt · 11 lock · 12 profit · 13 status · 14 ops
without 1-8 the same · 9 lock · 10 status · 11 ops
--------------------------------------------------------------------------- */
#main #project_list[st-table="projects"],
#main #project_list[st-table="projects"] > thead,
#main #project_list[st-table="projects"] > tbody,
#main #project_list[st-table="projects"] > tfoot {
display: block !important;
}
#main #project_list[st-table="projects"] > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 6px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #project_list[st-table="projects"] > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
/* the theme's column classes carry `min-width:100px!important`
(tables-projects-col) and 80px (date-table-col); inside a 250px card
those minimums pushed the lock onto the next line and the tiles into
pairs — measured at 320px */
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
/* line 1 — the `+` and the number, then the name, which takes the rest. A
long name wraps to three lines; the number, flag and lock sit on its first
line rather than floating to its middle. */
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
font-size: 14px;
font-weight: 700;
line-height: 21px;
color: #333;
}
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(2) {
order: 2;
flex: 1 1 0;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
word-break: break-word;
}
/* THE LINE BREAK AFTER THE NAME. Flexbox breaks lines on the items' flex
BASES, before any growing: the name's basis is 0 so that it can share a
line with three content-sized cells, which leaves line 1 with room for
the date to join it — measured, the date sat beside a one-letter-per-line
name. A zero-height full-width item after the lock closes the line at
every width; the row has no spare cell, so it is the row's own ::after. */
#main #project_list[st-table="projects"] > tbody > tr::after {
content: '';
display: block;
order: 5;
flex: 1 0 100%;
height: 0;
}
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(2) a {
display: inline;
color: #3276b1;
padding: 8px 0; /* a taller thumb target on an inline box */
}
/* the "future project" check and the lock/unlock. The check cell is empty on
a past project: it still closes the line (auto basis, zero width). */
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(4) {
order: 3;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-start: 6px;
line-height: 21px;
white-space: nowrap;
color: #3d8b3d;
}
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(4):has(i)::before {
content: 'עתידי ';
font-size: 11px;
}
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(11):nth-last-child(4),
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(9):nth-last-child(3) {
order: 4;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-start: 8px;
line-height: 21px;
font-size: 16px;
color: #777;
}
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(11):nth-last-child(4) .project_status,
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(9):nth-last-child(3) .project_status {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin: -8px 0; /* a 36px target on a 21px line */
color: inherit;
}
/* line 2 — start date and status, half each; the label is the column's name */
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(3) {
order: 6;
flex: 1 1 50%;
padding-top: 4px;
padding-inline-end: 8px;
}
#main #project_list[st-table="projects"] > tbody > tr > td:nth-last-child(2) {
order: 7;
flex: 1 1 50%;
padding-top: 4px;
}
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(3)::before { content: 'תאריך התחלה: '; color: #666; }
#main #project_list[st-table="projects"] > tbody > tr > td:nth-last-child(2)::before { content: 'מצב: '; color: #666; }
/* line 3 — the seats: four tiles, label above value */
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(5),
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(6),
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(7),
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(8) {
flex: 1 1 25%;
align-self: stretch;
margin-top: 8px;
padding: 4px 2px 5px;
background: #f2f4f7;
text-align: center;
font-size: 14px;
font-weight: 700;
line-height: 1.25;
color: #333;
white-space: nowrap;
}
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(5) { order: 8; border-start-start-radius: 6px; border-end-start-radius: 6px; }
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(6) { order: 9; border-inline-start: 1px solid #fff !important; }
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(7) { order: 10; border-inline-start: 1px solid #fff !important; }
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(8) { order: 11; border-inline-start: 1px solid #fff !important; border-start-end-radius: 6px; border-end-end-radius: 6px; }
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(5)::before,
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(6)::before,
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(7)::before,
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(8)::before {
display: block;
margin-bottom: 1px;
font-size: 11px;
font-weight: 400;
line-height: 1.2;
color: #666;
white-space: normal;
}
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(5)::before { content: 'מקומות'; }
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(6)::before { content: 'נמכרו'; }
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(7)::before { content: 'לידים'; }
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(8)::before { content: 'פנויים'; }
/* line 4 — the money, only in a row that has it (see the header comment) */
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(9):nth-last-child(6),
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(10):nth-last-child(5),
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(12):nth-last-child(3) {
flex: 1 1 33.333%;
align-self: stretch;
margin-top: 6px;
padding: 4px 3px 5px;
background: #f2f4f7;
text-align: center;
/* a project's sales run to seven digits as a matter of course, so these
are a size smaller than the order card's: "1,234,567.89 $" is 91px at
13px bold, and a third of a 390px card is 94 */
font-size: 13px;
font-weight: 700;
line-height: 1.25;
color: #333;
/* the amount is one unbreakable token; the sign after it may drop to a
second line rather than run into the next tile, and a long label
("Общая задолженность") wraps */
white-space: normal;
}
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(9):nth-last-child(6) { order: 12; border-start-start-radius: 6px; border-end-start-radius: 6px; }
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(10):nth-last-child(5) { order: 13; border-inline-start: 1px solid #fff !important; }
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(12):nth-last-child(3) { order: 14; border-inline-start: 1px solid #fff !important; border-start-end-radius: 6px; border-end-end-radius: 6px; }
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(9):nth-last-child(6)::before,
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(10):nth-last-child(5)::before,
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(12):nth-last-child(3)::before {
display: block;
margin-bottom: 1px;
font-size: 11px;
font-weight: 400;
line-height: 1.2;
color: #666;
white-space: normal;
}
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(9):nth-last-child(6)::before { content: 'סהכ מכירות'; }
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(10):nth-last-child(5)::before { content: 'סהכ חוב'; }
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(12):nth-last-child(3)::before { content: 'סה"כ רווח'; }
/* and half a size less again on a 320px phone, whose card is 228px wide */
@media (max-width: 359px) {
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(9):nth-last-child(6),
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(10):nth-last-child(5),
#main #project_list[st-table="projects"] > tbody > tr > td:nth-child(12):nth-last-child(3) {
padding-left: 2px;
padding-right: 2px;
font-size: 12.5px;
}
}
/* line 5 — the operations: edit, copy, delete, commissions, payment methods,
SMS. Six icons that were 14px links a few pixels apart become six 44px
targets spread across the card. */
#main #project_list[st-table="projects"] > tbody > tr > td:last-child {
display: flex !important;
order: 15;
flex: 1 1 100%;
justify-content: space-around;
margin-top: 4px;
border-top: 1px solid #eee !important;
}
#main #project_list[st-table="projects"] > tbody > tr > td:last-child a {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1 1 44px; /* six of them need 264px; a 320px card
has 228, so there they shrink to 38 */
max-width: 56px;
height: 44px;
color: #3276b1;
}
#main #project_list[st-table="projects"] > tbody > tr > td:last-child a i {
font-size: 18px;
}
/* THE HEADER: the label row goes; of the filter row only the name search and
the status select stay, each labelled. The status filter is the second
cell from the end, for the same permission reason as above. */
#main #project_list[st-table="projects"] > thead > tr:first-child {
display: none;
}
#main #project_list[st-table="projects"] > thead > tr.smart-form {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #project_list[st-table="projects"] > thead > tr.smart-form > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #project_list[st-table="projects"] > thead > tr.smart-form > th:nth-child(2),
#main #project_list[st-table="projects"] > thead > tr.smart-form > th:nth-last-child(2) {
display: block !important;
box-sizing: border-box;
max-width: none !important;
min-width: 0 !important;
padding: 0 3px 4px;
}
#main #project_list[st-table="projects"] > thead > tr.smart-form > th:nth-child(2) { flex: 1 1 60%; }
#main #project_list[st-table="projects"] > thead > tr.smart-form > th:nth-last-child(2) { flex: 1 1 40%; }
#main #project_list[st-table="projects"] > thead > tr.smart-form > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #project_list[st-table="projects"] > thead > tr.smart-form > th:nth-child(2)::before { content: 'חיפוש לפי שם פרוייקט'; }
#main #project_list[st-table="projects"] > thead > tr.smart-form > th:nth-last-child(2)::before { content: 'מצב הפרוייקט'; }
#main #project_list[st-table="projects"] > thead > tr.smart-form input,
#main #project_list[st-table="projects"] > thead > tr.smart-form select {
width: 100%;
}
/* the grid is no longer a scroller, and the pagination footer is a block */
#main #project_list[st-table="projects"] {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #project_list[st-table="projects"] > tfoot > tr,
#main #project_list[st-table="projects"] > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
/* the `+` row the directive opens under a card */
#main #project_list[st-table="projects"] > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa;
}
#main #project_list[st-table="projects"] > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #project_list[st-table="projects"] .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
/* the "show landing-page projects" button above the grid, full width */
#main .table-responsive > .btn.btn-warning.pull-left {
float: none;
display: block;
width: 100%;
margin-bottom: 8px;
}
/* THE LABELS IN THE USER'S LANGUAGE — the lang files' column names */
html[lang="en"] #main #project_list[st-table="projects"] > tbody > tr > td:nth-child(4):has(i)::before { content: 'Future '; }
html[lang="en"] #main #project_list[st-table="projects"] > tbody > tr > td:nth-child(3)::before { content: 'Starting Date: '; }
html[lang="en"] #main #project_list[st-table="projects"] > tbody > tr > td:nth-last-child(2)::before { content: 'Status: '; }
html[lang="en"] #main #project_list[st-table="projects"] > tbody > tr > td:nth-child(5)::before { content: 'Seats'; }
html[lang="en"] #main #project_list[st-table="projects"] > tbody > tr > td:nth-child(6)::before { content: 'Sold'; }
html[lang="en"] #main #project_list[st-table="projects"] > tbody > tr > td:nth-child(7)::before { content: 'Leads'; }
html[lang="en"] #main #project_list[st-table="projects"] > tbody > tr > td:nth-child(8)::before { content: 'Available'; }
html[lang="en"] #main #project_list[st-table="projects"] > tbody > tr > td:nth-child(9):nth-last-child(6)::before { content: 'Total Sales'; }
html[lang="en"] #main #project_list[st-table="projects"] > tbody > tr > td:nth-child(10):nth-last-child(5)::before { content: 'Total Debt'; }
html[lang="en"] #main #project_list[st-table="projects"] > tbody > tr > td:nth-child(12):nth-last-child(3)::before { content: 'Total profit'; }
html[lang="en"] #main #project_list[st-table="projects"] > thead > tr.smart-form > th:nth-child(2)::before { content: 'Search by project name'; }
html[lang="en"] #main #project_list[st-table="projects"] > thead > tr.smart-form > th:nth-last-child(2)::before { content: 'Project status'; }
html[lang="ru"] #main #project_list[st-table="projects"] > tbody > tr > td:nth-child(4):has(i)::before { content: 'Будущий '; }
html[lang="ru"] #main #project_list[st-table="projects"] > tbody > tr > td:nth-child(3)::before { content: 'Дата начала: '; }
html[lang="ru"] #main #project_list[st-table="projects"] > tbody > tr > td:nth-last-child(2)::before { content: 'Статус: '; }
html[lang="ru"] #main #project_list[st-table="projects"] > tbody > tr > td:nth-child(5)::before { content: 'Места'; }
html[lang="ru"] #main #project_list[st-table="projects"] > tbody > tr > td:nth-child(6)::before { content: 'Продано'; }
html[lang="ru"] #main #project_list[st-table="projects"] > tbody > tr > td:nth-child(7)::before { content: 'Лиды'; }
html[lang="ru"] #main #project_list[st-table="projects"] > tbody > tr > td:nth-child(8)::before { content: 'Свободно'; }
html[lang="ru"] #main #project_list[st-table="projects"] > tbody > tr > td:nth-child(9):nth-last-child(6)::before { content: 'Общие продажи'; }
html[lang="ru"] #main #project_list[st-table="projects"] > tbody > tr > td:nth-child(10):nth-last-child(5)::before { content: 'Общая задолженность'; }
html[lang="ru"] #main #project_list[st-table="projects"] > tbody > tr > td:nth-child(12):nth-last-child(3)::before { content: 'Общая прибыль'; }
html[lang="ru"] #main #project_list[st-table="projects"] > thead > tr.smart-form > th:nth-child(2)::before { content: 'Поиск по названию проекта'; }
html[lang="ru"] #main #project_list[st-table="projects"] > thead > tr.smart-form > th:nth-last-child(2)::before { content: 'Статус проекта'; }
/* ---------------------------------------------------------------------------
13e. THE PROJECT'S FLIGHT LIST BECOMES CARDS
`#flights_list` (app.projects.current.flights, the project's "טיסות"
tab) has twenty-three columns and the same `st-table-responsive` cut as
the order grids: on a phone it showed a row number, a select box and the
three action icons, and every fact about the flight was behind the `+` —
the CTO's screenshot of 2026-09-15. Each row is a card now, built the way
the order and project cards are — the cells brought back with !important,
flex bases that sum to 100% per line:
line 1 `+` and select · direction · INTERNAL CODE (bold)
line 2 airline · flight number
line 3 origin ← destination
line 4 day · date · departure time
line 5 four seat tiles: seats · sold · reserved · available
line 6 four money tiles: customer price · total net · paid · balance
line 7 the three actions (edit, delete, clone), each a 44px target
THE COLUMN NUMBERS MOVE WITH PERMISSIONS, in three groups. Cells 13-16
(seats, sold, stock, reserved) carry `view_seats_details`, 17 (available)
`view_availible_seats`, 19-22 (net per pax, total net, paid, balance)
`view_cost_elements`, and 23 (the actions) `manage_flights`; ng-permission
is transclude:'element', so a cell a user may not see is NOT in the DOM.
The leading twelve never move (cell 3, the landing checkbox, is in the DOM
under ng-hide whatever the user may do and is never shown here). The
trailing cells are pinned by BOTH ends at once, so a row of another shape
can never have a seat count painted as money: the full row has 23 cells,
a row with none of the four permissions has 13 (the harness's perm=none
user), and any other combination shows the leading lines and keeps its
figures behind the `+`, which lists them with their headers.
23 cells 1 select · 2 # · 3 landing · 4 internal code · 5 number
6 origin · 7 destination · 8 airline · 9 direction · 10 date
11 time · 12 day · 13 seats · 14 sold · 15 stock · 16 reserved
17 available · 18 customer price · 19 net/pax · 20 total net
21 paid · 22 balance · 23 actions
13 cells 1-12 the same · 13 customer price
Stock (15) and net per pax (19) stay behind the `+`: four tiles is what a
320px card carries per line, and both are derivable from their neighbours.
The "show extra columns" checkbox is hidden on the card: it inserts a
column at position 4 and would move every cell of the card by one; what
it reveals (the default-item flag, a landing checkbox) has no place here.
The theme paints a sold-out row `warning` and an oversold row `danger`
(`available` 0 / negative); the card keeps that signal on its own
background, and the available tile turns red when negative.
--------------------------------------------------------------------------- */
#main #flights_list,
#main #flights_list > thead,
#main #flights_list > tbody,
#main #flights_list > tfoot {
display: block !important;
}
#main #flights_list > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #flights_list > tbody > tr.warning { background: #fff8e1; border-color: #f3e2a9; }
#main #flights_list > tbody > tr.danger { background: #fdecea; border-color: #f1b8b3; }
#main #flights_list > tbody > tr > td {
display: none !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent; /* the theme paints warning/danger on the td; the card paints the row */
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
/* the cells the card is built from, in every shape */
#main #flights_list > tbody > tr > td:nth-child(1),
#main #flights_list > tbody > tr > td:nth-child(2),
#main #flights_list > tbody > tr > td:nth-child(4),
#main #flights_list > tbody > tr > td:nth-child(5),
#main #flights_list > tbody > tr > td:nth-child(6),
#main #flights_list > tbody > tr > td:nth-child(7),
#main #flights_list > tbody > tr > td:nth-child(8),
#main #flights_list > tbody > tr > td:nth-child(9),
#main #flights_list > tbody > tr > td:nth-child(10),
#main #flights_list > tbody > tr > td:nth-child(11),
#main #flights_list > tbody > tr > td:nth-child(12) {
display: block !important;
}
/* line 1 — the `+` and the select box, the direction, the internal code.
The code is the card's identity: 15px bold, one line, an ellipsis for a
pathological value (the column is VARCHAR 255). The three actions were
on this line in the first draft and left an 11-character code 90px —
ellipsised on every card; they close the card instead. */
#main #flights_list > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
margin-inline-end: 8px;
white-space: nowrap;
}
#main #flights_list > tbody > tr > td:nth-child(9) {
order: 2;
flex: 0 0 auto;
margin-inline-end: 8px;
padding: 1px 6px;
border-radius: 3px;
background: #e9ecef;
font-size: 11px;
line-height: 1.5;
color: #555;
white-space: nowrap;
}
#main #flights_list > tbody > tr > td:nth-child(4) {
order: 3;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 700;
line-height: 1.5;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* a flight without an internal code: the number stands in on line 1 */
#main #flights_list > tbody > tr > td:nth-child(4):empty::after {
content: '—';
color: #999;
}
/* line 7 — the actions: edit, delete, clone; three 14px links a few pixels
apart become three 44px targets spread across the card */
#main #flights_list > tbody > tr > td:nth-child(23):last-child {
display: flex !important;
order: 21;
flex: 1 1 100%;
justify-content: space-around;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #flights_list > tbody > tr > td:nth-child(23):last-child a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: #3276b1;
}
/* THE LINE BREAK. The row number is worthless on a phone, so it becomes a
full-width zero-height item that closes line 1 at every width. */
#main #flights_list > tbody > tr > td:nth-child(2) {
order: 5;
flex: 1 0 100%;
height: 0;
min-height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
}
/* line 2 — the airline (long: "רויאל אייר מרוק — החברה הלאומית המלכותית
(AT)" is a real name) and the flight number, three fifths / two fifths */
#main #flights_list > tbody > tr > td:nth-child(8) {
order: 6;
flex: 1 1 60%;
padding-top: 3px;
padding-inline-end: 8px;
word-break: break-word;
}
#main #flights_list > tbody > tr > td:nth-child(5) {
order: 7;
flex: 1 1 40%;
padding-top: 3px;
}
#main #flights_list > tbody > tr > td:nth-child(5)::before { content: 'מספר טיסה: '; color: #666; }
/* line 3 — the route: origin, an arrow pointing the way the card reads,
destination. Half each, so the line is certain. */
#main #flights_list > tbody > tr > td:nth-child(6) {
order: 8;
flex: 1 1 50%;
padding-top: 3px;
padding-inline-end: 8px;
word-break: break-word;
}
#main #flights_list > tbody > tr > td:nth-child(7) {
order: 9;
flex: 1 1 50%;
padding-top: 3px;
word-break: break-word;
}
#main #flights_list > tbody > tr > td:nth-child(7)::before {
content: '← ';
color: #999;
}
/* the blade drops `smart-rtl` for a non-Hebrew user; that is the LTR signal */
body:not(.smart-rtl) #main #flights_list > tbody > tr > td:nth-child(7)::before { content: '→ '; }
/* line 4 — day, date, departure time: a quarter, two fifths, the rest; all
three are self-evident and carry no label */
#main #flights_list > tbody > tr > td:nth-child(12) {
order: 10;
flex: 1 1 25%;
padding-top: 3px;
white-space: nowrap;
}
#main #flights_list > tbody > tr > td:nth-child(10) {
order: 11;
flex: 1 1 40%;
padding-top: 3px;
white-space: nowrap;
}
#main #flights_list > tbody > tr > td:nth-child(11) {
order: 12;
flex: 1 1 35%;
padding-top: 3px;
white-space: nowrap;
color: #333;
font-weight: 600;
}
/* line 5 — the seats, in the 23-cell row only: four tiles, label above value */
#main #flights_list > tbody > tr > td:nth-child(13):nth-last-child(11),
#main #flights_list > tbody > tr > td:nth-child(14):nth-last-child(10),
#main #flights_list > tbody > tr > td:nth-child(16):nth-last-child(8),
#main #flights_list > tbody > tr > td:nth-child(17):nth-last-child(7),
/* line 6 — the money, in the 23-cell row only */
#main #flights_list > tbody > tr > td:nth-child(18):nth-last-child(6),
#main #flights_list > tbody > tr > td:nth-child(20):nth-last-child(4),
#main #flights_list > tbody > tr > td:nth-child(21):nth-last-child(3),
#main #flights_list > tbody > tr > td:nth-child(22):nth-last-child(2) {
display: block !important;
flex: 1 1 25%;
align-self: stretch;
margin-top: 8px;
padding: 4px 2px 5px;
background: #f2f4f7;
text-align: center;
font-size: 13px;
font-weight: 700;
line-height: 1.25;
color: #333;
/* an amount is one token; the sign after it may drop to a second line
rather than run into the next tile; a seat count never wraps */
white-space: normal;
}
#main #flights_list > tbody > tr > td:nth-child(13):nth-last-child(11) { order: 13; border-start-start-radius: 6px; border-end-start-radius: 6px; }
#main #flights_list > tbody > tr > td:nth-child(14):nth-last-child(10) { order: 14; border-inline-start: 1px solid #fff !important; }
#main #flights_list > tbody > tr > td:nth-child(16):nth-last-child(8) { order: 15; border-inline-start: 1px solid #fff !important; }
#main #flights_list > tbody > tr > td:nth-child(17):nth-last-child(7) { order: 16; border-inline-start: 1px solid #fff !important; border-start-end-radius: 6px; border-end-end-radius: 6px; }
#main #flights_list > tbody > tr > td:nth-child(18):nth-last-child(6) { order: 17; margin-top: 4px; border-start-start-radius: 6px; border-end-start-radius: 6px; }
#main #flights_list > tbody > tr > td:nth-child(20):nth-last-child(4) { order: 18; margin-top: 4px; border-inline-start: 1px solid #fff !important; }
#main #flights_list > tbody > tr > td:nth-child(21):nth-last-child(3) { order: 19; margin-top: 4px; border-inline-start: 1px solid #fff !important; }
#main #flights_list > tbody > tr > td:nth-child(22):nth-last-child(2) { order: 20; margin-top: 4px; border-inline-start: 1px solid #fff !important; border-start-end-radius: 6px; border-end-end-radius: 6px; }
/* the tiles on a tinted (sold-out / oversold) card keep their own grey, so
the figures read the same on every card; the oversold count is red */
#main #flights_list > tbody > tr.danger > td:nth-child(17):nth-last-child(7) { color: #a90329; }
#main #flights_list > tbody > tr > td:nth-child(13):nth-last-child(11)::before,
#main #flights_list > tbody > tr > td:nth-child(14):nth-last-child(10)::before,
#main #flights_list > tbody > tr > td:nth-child(16):nth-last-child(8)::before,
#main #flights_list > tbody > tr > td:nth-child(17):nth-last-child(7)::before,
#main #flights_list > tbody > tr > td:nth-child(18):nth-last-child(6)::before,
#main #flights_list > tbody > tr > td:nth-child(20):nth-last-child(4)::before,
#main #flights_list > tbody > tr > td:nth-child(21):nth-last-child(3)::before,
#main #flights_list > tbody > tr > td:nth-child(22):nth-last-child(2)::before {
display: block;
margin-bottom: 1px;
font-size: 11px;
font-weight: 400;
line-height: 1.2;
color: #666;
white-space: normal;
}
/* the seat labels are the column names shortened to fit four across, as on
the project card ("מספר מקומות" → "מקומות", "מקומות שמורים" → "שמורים") */
#main #flights_list > tbody > tr > td:nth-child(13):nth-last-child(11)::before { content: 'מקומות'; }
#main #flights_list > tbody > tr > td:nth-child(14):nth-last-child(10)::before { content: 'נמכרו'; }
#main #flights_list > tbody > tr > td:nth-child(16):nth-last-child(8)::before { content: 'שמורים'; }
#main #flights_list > tbody > tr > td:nth-child(17):nth-last-child(7)::before { content: 'זמין'; }
#main #flights_list > tbody > tr > td:nth-child(18):nth-last-child(6)::before { content: 'מחיר ללקוח'; }
#main #flights_list > tbody > tr > td:nth-child(20):nth-last-child(4)::before { content: 'נטו שירות'; }
#main #flights_list > tbody > tr > td:nth-child(21):nth-last-child(3)::before { content: 'שולם'; }
#main #flights_list > tbody > tr > td:nth-child(22):nth-last-child(2)::before { content: 'יתרה'; }
/* the 13-cell row (no seat, availability, cost or flight permissions): the
customer price is a label: value line of its own */
#main #flights_list > tbody > tr > td:nth-child(13):last-child {
display: block !important;
order: 17;
flex: 1 1 100%;
padding-top: 3px;
}
#main #flights_list > tbody > tr > td:nth-child(13):last-child::before { content: 'מחיר ללקוח: '; color: #666; }
/* on a 320px phone a quarter of the card is 57px and "$63,990.00" is 62 —
measured, the amount broke inside the number — so the money goes two
tiles to a line there (the seat counts, four digits at most, stay four
across) */
@media (max-width: 359px) {
#main #flights_list > tbody > tr > td:nth-child(18):nth-last-child(6),
#main #flights_list > tbody > tr > td:nth-child(20):nth-last-child(4),
#main #flights_list > tbody > tr > td:nth-child(21):nth-last-child(3),
#main #flights_list > tbody > tr > td:nth-child(22):nth-last-child(2) {
flex: 1 1 50%;
border-radius: 0;
}
#main #flights_list > tbody > tr > td:nth-child(18):nth-last-child(6),
#main #flights_list > tbody > tr > td:nth-child(21):nth-last-child(3) { border-inline-start: 0 !important; }
#main #flights_list > tbody > tr > td:nth-child(21):nth-last-child(3),
#main #flights_list > tbody > tr > td:nth-child(22):nth-last-child(2) { margin-top: 1px; }
}
/* THE HEADER: the label row goes, the search row keeps the two code
searches (internal code, flight number) with captions */
#main #flights_list > thead > tr:first-child {
display: none;
}
#main #flights_list > thead > tr.st-filters-row {
display: flex;
flex-wrap: wrap;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #flights_list > thead > tr.st-filters-row > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #flights_list > thead > tr.st-filters-row > th:nth-child(4),
#main #flights_list > thead > tr.st-filters-row > th:nth-child(5) {
display: block !important;
flex: 1 1 50%;
max-width: none !important;
min-width: 0 !important;
box-sizing: border-box;
padding: 0 3px 4px;
}
#main #flights_list > thead > tr.st-filters-row > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #flights_list > thead > tr.st-filters-row > th:nth-child(4)::before { content: 'קוד פנימי'; }
#main #flights_list > thead > tr.st-filters-row > th:nth-child(5)::before { content: 'מספר טיסה'; }
#main #flights_list > thead > tr.st-filters-row input {
width: 100%;
}
/* the "show extra columns" toggle — see the header comment */
#main input[ng-model="ctrl.show_columns"],
#main input[ng-model="ctrl.show_columns"] + span {
display: none;
}
/* the grid is no longer a scroller; the footers are blocks */
#main #flights_list {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #flights_list > tfoot > tr,
#main #flights_list > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
/* the labels in the user's language (app/lang/en, ru: flight.number,
flight.seats, flight.sold, flight.reserved, flight.available,
flight.price_gross, flight.total_net, payment.paid, payment.balance,
flight.number_internal) */
html[lang="en"] #main #flights_list > tbody > tr > td:nth-child(5)::before { content: 'Flight Number: '; }
html[lang="en"] #main #flights_list > tbody > tr > td:nth-child(13):nth-last-child(11)::before { content: 'Seats'; }
html[lang="en"] #main #flights_list > tbody > tr > td:nth-child(14):nth-last-child(10)::before { content: 'Sold'; }
html[lang="en"] #main #flights_list > tbody > tr > td:nth-child(16):nth-last-child(8)::before { content: 'Reserved'; }
html[lang="en"] #main #flights_list > tbody > tr > td:nth-child(17):nth-last-child(7)::before { content: 'Available'; }
html[lang="en"] #main #flights_list > tbody > tr > td:nth-child(18):nth-last-child(6)::before { content: 'Customer price'; }
html[lang="en"] #main #flights_list > tbody > tr > td:nth-child(20):nth-last-child(4)::before { content: 'total net'; }
html[lang="en"] #main #flights_list > tbody > tr > td:nth-child(21):nth-last-child(3)::before { content: 'Paid'; }
html[lang="en"] #main #flights_list > tbody > tr > td:nth-child(22):nth-last-child(2)::before { content: 'Balance'; }
html[lang="en"] #main #flights_list > tbody > tr > td:nth-child(13):last-child::before { content: 'Customer price: '; }
html[lang="en"] #main #flights_list > thead > tr.st-filters-row > th:nth-child(4)::before { content: 'Internal Code'; }
html[lang="en"] #main #flights_list > thead > tr.st-filters-row > th:nth-child(5)::before { content: 'Flight Number'; }
html[lang="ru"] #main #flights_list > tbody > tr > td:nth-child(5)::before { content: 'Номер рейса: '; }
html[lang="ru"] #main #flights_list > tbody > tr > td:nth-child(13):nth-last-child(11)::before { content: 'Места'; }
html[lang="ru"] #main #flights_list > tbody > tr > td:nth-child(14):nth-last-child(10)::before { content: 'Продано'; }
html[lang="ru"] #main #flights_list > tbody > tr > td:nth-child(16):nth-last-child(8)::before { content: 'Забронировано'; }
html[lang="ru"] #main #flights_list > tbody > tr > td:nth-child(17):nth-last-child(7)::before { content: 'Доступно'; }
html[lang="ru"] #main #flights_list > tbody > tr > td:nth-child(18):nth-last-child(6)::before { content: 'Цена клиента'; }
html[lang="ru"] #main #flights_list > tbody > tr > td:nth-child(20):nth-last-child(4)::before { content: 'Всего нетто'; }
html[lang="ru"] #main #flights_list > tbody > tr > td:nth-child(21):nth-last-child(3)::before { content: 'Оплачено'; }
html[lang="ru"] #main #flights_list > tbody > tr > td:nth-child(22):nth-last-child(2)::before { content: 'Баланс'; }
html[lang="ru"] #main #flights_list > tbody > tr > td:nth-child(13):last-child::before { content: 'Цена клиента: '; }
html[lang="ru"] #main #flights_list > thead > tr.st-filters-row > th:nth-child(4)::before { content: 'Внутренний код'; }
html[lang="ru"] #main #flights_list > thead > tr.st-filters-row > th:nth-child(5)::before { content: 'Номер рейса'; }
/* ---------------------------------------------------------------------------
13f. THE PROJECT'S SERVICE LIST BECOMES CARDS
`#service_list` (app.projects.current.services, the project's "שירותים"
tab) — PINNED by its `st-service`, because the services price list
(app.services, §13p) has the same id and twenty different columns; the
CTO found it painted with these labels on 2026-09-15. Twenty-four columns; on a phone the `st-table-responsive` cut left
the select box and five action icons per row and nothing else — the
CTO's screenshot of 2026-09-15. Each row is a card now:
line 1 `+` and select · type · NAME (bold, wraps) · active check
line 2 category · status
line 3 start date · end date
line 4 origin
line 5 supplier
line 6 four count tiles: capacity · stock · sold · available
line 7 four money tiles: pax price · total net · paid · balance
line 8 the actions (edit, delete, clone, voucher, customers), 44px each
THE COLUMN NUMBERS MOVE WITH PERMISSIONS, interleaved: cells 12, 15, 16,
19-22 carry `view_cost_elements`, 17 `view_seats_details`, 24
`manage_services`. A full row has 24 cells, a row with none of the three
has 15; each trailing cell is pinned by both ends, any other combination
keeps its leading lines and its figures behind the `+`. Cell 4 (a landing
checkbox under ng-hide) is never shown.
24 cells 1 select · 2 name · 3 type · 4 landing · 5 category
6 status · 7 start · 8 end · 9 days · 10 origin · 11 supplier
12 unit net · 13 units · 14 capacity · 15 stock · 16 sold
17 available · 18 pax price · 19 net/pax · 20 total net
21 paid · 22 balance · 23 active · 24 actions
15 cells 1-11 the same · 12 units · 13 capacity · 14 pax price · 15 active
Days (9), units (13), unit net (12) and net per pax (19) stay behind the
`+`. The theme's `warning` (sold out) and `danger` (oversold) become the
card's background.
--------------------------------------------------------------------------- */
#main #service_list[st-service="servicesProjectController.servicesService"],
#main #service_list[st-service="servicesProjectController.servicesService"] > thead,
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody,
#main #service_list[st-service="servicesProjectController.servicesService"] > tfoot {
display: block !important;
}
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* the theme's three-way signal — blue with room (`highlight-line-blue`,
`!important` in vendor.min.css), yellow sold out, red oversold — kept, in
card tints */
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr.highlight-line-blue { background: #f3f8fc !important; border-color: #cfe0ee; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr.warning { background: #fff8e1; border-color: #f3e2a9; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr.danger { background: #fdecea; border-color: #f1b8b3; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td {
display: none !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent;
width: auto !important; /* the template sizes several cells inline (width: 35px, 110px, 125px) */
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(1),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(2),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(3),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(5),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(6),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(7),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(8),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(10),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(11),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td.check-field {
display: block !important;
}
/* line 1 — the `+` and the select box, the type as a small badge, the name
(the card's identity; it wraps), the active check */
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
}
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(3) {
order: 2;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
padding: 1px 6px;
border-radius: 3px;
background: #e9ecef;
font-size: 11px;
line-height: 19px;
color: #555;
white-space: nowrap;
}
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(2) {
order: 3;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td.check-field {
order: 4;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-start: 6px;
line-height: 21px;
color: #3d8b3d;
}
/* THE LINE BREAK after the name: the name's basis is 0 so it can share a
line with three content-sized cells, which would let the category join
line 1; the row's own ::after is a zero-height full-width item (cell 4,
the landing checkbox, is under ng-hide and cannot be the spacer) */
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr::after {
content: '';
display: block;
order: 5;
flex: 1 0 100%;
height: 0;
}
/* line 2 — category and status, three fifths / two fifths */
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(5) {
order: 6;
flex: 1 1 60%;
padding-top: 3px;
padding-inline-end: 8px;
word-break: break-word;
}
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(6) {
order: 7;
flex: 1 1 40%;
padding-top: 3px;
}
/* line 3 — the dates, half each; line 4 origin; line 5 supplier */
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(7) {
order: 8;
flex: 1 1 50%;
padding-top: 3px;
padding-inline-end: 8px;
}
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(8) {
order: 9;
flex: 1 1 50%;
padding-top: 3px;
}
/* the date itself never breaks; its label may ("Дата окончания: 12/10" is
wider than half a 320px card) */
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(7) > span,
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(8) > span {
white-space: nowrap;
}
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(10) {
order: 10;
flex: 1 1 100%;
padding-top: 3px;
word-break: break-word;
}
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(11) {
order: 11;
flex: 1 1 100%;
padding-top: 3px;
word-break: break-word;
}
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(5)::before { content: 'קטגוריה: '; color: #666; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(6)::before { content: 'סטטוס: '; color: #666; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(7)::before { content: 'תאריך תחילה: '; color: #666; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(8)::before { content: 'תאריך סיום: '; color: #666; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(10)::before { content: 'מוצא: '; color: #666; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(11)::before { content: 'ספק: '; color: #666; }
/* an empty value gets a dash: the dates are a span under ng-if (absent
without a date), origin and supplier plain text */
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(7):empty::after,
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(8):empty::after,
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(10):empty::after,
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(11):empty::after {
content: '—';
color: #777;
}
/* line 6 — the counts and line 7 — the money, in the 24-cell row only */
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(14):nth-last-child(11),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(15):nth-last-child(10),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(16):nth-last-child(9),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(17):nth-last-child(8),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(18):nth-last-child(7),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(20):nth-last-child(5),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(21):nth-last-child(4),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(22):nth-last-child(3) {
display: block !important;
flex: 1 1 25%;
align-self: stretch;
margin-top: 8px;
padding: 4px 2px 5px;
background: #f2f4f7;
text-align: center;
font-size: 13px;
font-weight: 700;
line-height: 1.25;
color: #333;
white-space: normal;
}
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(14):nth-last-child(11) { order: 12; border-start-start-radius: 6px; border-end-start-radius: 6px; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(15):nth-last-child(10) { order: 13; border-inline-start: 1px solid #fff !important; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(16):nth-last-child(9) { order: 14; border-inline-start: 1px solid #fff !important; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(17):nth-last-child(8) { order: 15; border-inline-start: 1px solid #fff !important; border-start-end-radius: 6px; border-end-end-radius: 6px; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(18):nth-last-child(7) { order: 16; margin-top: 4px; border-start-start-radius: 6px; border-end-start-radius: 6px; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(20):nth-last-child(5) { order: 17; margin-top: 4px; border-inline-start: 1px solid #fff !important; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(21):nth-last-child(4) { order: 18; margin-top: 4px; border-inline-start: 1px solid #fff !important; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(22):nth-last-child(3) { order: 19; margin-top: 4px; border-inline-start: 1px solid #fff !important; border-start-end-radius: 6px; border-end-end-radius: 6px; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr.danger > td:nth-child(17):nth-last-child(8) { color: #a90329; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(14):nth-last-child(11)::before,
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(15):nth-last-child(10)::before,
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(16):nth-last-child(9)::before,
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(17):nth-last-child(8)::before,
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(18):nth-last-child(7)::before,
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(20):nth-last-child(5)::before,
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(21):nth-last-child(4)::before,
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(22):nth-last-child(3)::before {
display: block;
margin-bottom: 1px;
font-size: 11px;
font-weight: 400;
line-height: 1.2;
color: #666;
white-space: normal;
}
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(14):nth-last-child(11)::before { content: 'תפוסה'; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(15):nth-last-child(10)::before { content: 'מלאי'; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(16):nth-last-child(9)::before { content: 'נמכרו'; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(17):nth-last-child(8)::before { content: 'זמין'; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(18):nth-last-child(7)::before { content: 'מחיר לאדם'; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(20):nth-last-child(5)::before { content: 'סה”כ נטו'; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(21):nth-last-child(4)::before { content: 'שולם'; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(22):nth-last-child(3)::before { content: 'יתרה'; }
/* the 15-cell row: capacity and pax price as a pair of label: value lines */
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(13):nth-last-child(3),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(14):nth-last-child(2) {
display: block !important;
flex: 1 1 50%;
padding-top: 3px;
}
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(13):nth-last-child(3) { order: 12; padding-inline-end: 8px; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(14):nth-last-child(2) { order: 13; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(13):nth-last-child(3)::before { content: 'תפוסה: '; color: #666; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(14):nth-last-child(2)::before { content: 'מחיר לאדם: '; color: #666; }
/* on a 320px phone the money goes two tiles to a line, as on the flight card */
@media (max-width: 359px) {
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(18):nth-last-child(7),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(20):nth-last-child(5),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(21):nth-last-child(4),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(22):nth-last-child(3) {
flex: 1 1 50%;
border-radius: 0;
}
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(18):nth-last-child(7),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(21):nth-last-child(4) { border-inline-start: 0 !important; }
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(21):nth-last-child(4),
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(22):nth-last-child(3) { margin-top: 1px; }
}
/* line 8 — the actions, in the 24-cell row: five 14px links become five
44px targets spread across the card */
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(24):last-child {
display: flex !important;
order: 20;
flex: 1 1 100%;
justify-content: space-around;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(24):last-child a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: #3276b1;
}
/* THE HEADER: the totals row and the label row go; the search row keeps
the name and type searches with captions */
#main #service_list[st-service="servicesProjectController.servicesService"] > thead > tr:not(.st-filters-row) {
display: none;
}
#main #service_list[st-service="servicesProjectController.servicesService"] > thead > tr.st-filters-row {
display: flex;
flex-wrap: wrap;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #service_list[st-service="servicesProjectController.servicesService"] > thead > tr.st-filters-row > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #service_list[st-service="servicesProjectController.servicesService"] > thead > tr.st-filters-row > th:nth-child(2),
#main #service_list[st-service="servicesProjectController.servicesService"] > thead > tr.st-filters-row > th:nth-child(3) {
display: block !important;
max-width: none !important;
min-width: 0 !important;
width: auto !important;
box-sizing: border-box;
padding: 0 3px 4px;
}
#main #service_list[st-service="servicesProjectController.servicesService"] > thead > tr.st-filters-row > th:nth-child(2) { flex: 1 1 60%; }
#main #service_list[st-service="servicesProjectController.servicesService"] > thead > tr.st-filters-row > th:nth-child(3) { flex: 1 1 40%; }
#main #service_list[st-service="servicesProjectController.servicesService"] > thead > tr.st-filters-row > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #service_list[st-service="servicesProjectController.servicesService"] > thead > tr.st-filters-row > th:nth-child(2)::before { content: 'שם שירות'; }
#main #service_list[st-service="servicesProjectController.servicesService"] > thead > tr.st-filters-row > th:nth-child(3)::before { content: 'סוג'; }
#main #service_list[st-service="servicesProjectController.servicesService"] > thead > tr.st-filters-row input {
width: 100%;
}
#main #service_list[st-service="servicesProjectController.servicesService"] {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #service_list[st-service="servicesProjectController.servicesService"] > tfoot > tr,
#main #service_list[st-service="servicesProjectController.servicesService"] > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
/* the labels in the user's language (app/lang/en, ru: service.category,
service.status, service.start_d, service.end_d, service.origin,
service.supplier, service.qu, service.stock, service.sold,
service.available, service.c_price, service.total_net_2, payment.paid,
payment.balance, service.s_name, service.s_type) */
html[lang="en"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(5)::before { content: 'Category: '; }
html[lang="en"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(6)::before { content: 'Status: '; }
html[lang="en"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(7)::before { content: 'start d: '; }
html[lang="en"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(8)::before { content: 'end d: '; }
html[lang="en"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(10)::before { content: 'origin: '; }
html[lang="en"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(11)::before { content: 'Supplier: '; }
html[lang="en"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(14):nth-last-child(11)::before { content: 'Capacity'; }
html[lang="en"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(15):nth-last-child(10)::before { content: 'Stock'; }
html[lang="en"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(16):nth-last-child(9)::before { content: 'Sold'; }
html[lang="en"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(17):nth-last-child(8)::before { content: 'Available'; }
html[lang="en"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(18):nth-last-child(7)::before { content: 'Pax price'; }
html[lang="en"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(20):nth-last-child(5)::before { content: 'total net'; }
html[lang="en"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(21):nth-last-child(4)::before { content: 'Paid'; }
html[lang="en"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(22):nth-last-child(3)::before { content: 'Balance'; }
html[lang="en"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(13):nth-last-child(3)::before { content: 'Capacity: '; }
html[lang="en"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(14):nth-last-child(2)::before { content: 'Pax price: '; }
html[lang="en"] #main #service_list[st-service="servicesProjectController.servicesService"] > thead > tr.st-filters-row > th:nth-child(2)::before { content: 'name'; }
html[lang="en"] #main #service_list[st-service="servicesProjectController.servicesService"] > thead > tr.st-filters-row > th:nth-child(3)::before { content: 's type'; }
html[lang="ru"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(5)::before { content: 'Категория: '; }
html[lang="ru"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(6)::before { content: 'Статус: '; }
html[lang="ru"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(7)::before { content: 'Дата начала: '; }
html[lang="ru"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(8)::before { content: 'Дата окончания: '; }
html[lang="ru"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(10)::before { content: 'Направление: '; }
html[lang="ru"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(11)::before { content: 'Поставщик: '; }
html[lang="ru"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(14):nth-last-child(11)::before { content: 'Кол-во'; }
html[lang="ru"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(15):nth-last-child(10)::before { content: 'Акции'; }
html[lang="ru"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(16):nth-last-child(9)::before { content: 'Продано'; }
html[lang="ru"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(17):nth-last-child(8)::before { content: 'Доступно'; }
html[lang="ru"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(18):nth-last-child(7)::before { content: 'Цена для клиента'; }
html[lang="ru"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(20):nth-last-child(5)::before { content: 'Итоговая цена'; }
html[lang="ru"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(21):nth-last-child(4)::before { content: 'Оплачено'; }
html[lang="ru"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(22):nth-last-child(3)::before { content: 'Баланс'; }
html[lang="ru"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(13):nth-last-child(3)::before { content: 'Кол-во: '; }
html[lang="ru"] #main #service_list[st-service="servicesProjectController.servicesService"] > tbody > tr > td:nth-child(14):nth-last-child(2)::before { content: 'Цена для клиента: '; }
html[lang="ru"] #main #service_list[st-service="servicesProjectController.servicesService"] > thead > tr.st-filters-row > th:nth-child(2)::before { content: 'Название сервиса'; }
html[lang="ru"] #main #service_list[st-service="servicesProjectController.servicesService"] > thead > tr.st-filters-row > th:nth-child(3)::before { content: 'Тип сервиса'; }
/* ---------------------------------------------------------------------------
13g. THE PROJECT'S INCOME LIST BECOMES CARDS
The "ניהול הכנסות" tab (app.projects.current.manage_project) is one
grid with no id — `table[st-table="elements"]` under the tab's own
`.content > .table-responsive`, which keeps the handling-fee modal's
twin grid (a form in a modal) out of these rules — eleven columns, two
totals rows above the labels. On a phone it was a scroll box showing a
type and a name. Each row is a card now:
line 1 `+` and row number · type · NAME (bold, wraps)
line 2 dates ("03/10 - 12/10 (9D)") · supplier
line 3 voucher
line 4 two tiles: sales · expenses
line 5 three tiles: commission · profit · %
11 cells 1 # · 2 type · 3 name · 4 voucher · 5 dates · 6 supplier
7 sales · 8 expenses · 9 commission · 10 profit · 11 %
No permission removes a cell here (the whole tab is gated), so the
numbers are plain. The name cell exists in one of three ng-if variants
(a service, a refund with its origin, a handling-fee invoice with a
link) — always exactly one. A foreign-currency row prints its ILS
equivalent in parentheses under the amount.
--------------------------------------------------------------------------- */
#main .content > .table-responsive > table[st-table="elements"],
#main .content > .table-responsive > table[st-table="elements"] > thead,
#main .content > .table-responsive > table[st-table="elements"] > tbody,
#main .content > .table-responsive > table[st-table="elements"] > tfoot {
display: block !important;
}
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important; /* the theme stripes odd rows */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important; /* the template sizes cells inline (76px, 100px, 115px) */
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
/* line 1 */
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
color: #999;
}
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(2) {
order: 2;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
padding: 1px 6px;
border-radius: 3px;
background: #e9ecef;
font-size: 11px;
line-height: 19px;
color: #555;
white-space: nowrap;
}
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(3) {
order: 3;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr::after {
content: '';
display: block;
order: 4;
flex: 1 0 100%;
height: 0;
}
/* line 2 — the dates and the supplier; line 3 — the voucher */
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(5) {
order: 5;
flex: 1 1 45%;
padding-top: 3px;
padding-inline-end: 8px;
white-space: nowrap;
}
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(6) {
order: 6;
flex: 1 1 55%;
padding-top: 3px;
word-break: break-word;
}
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(4) {
order: 7;
flex: 1 1 100%;
padding-top: 3px;
word-break: break-word;
}
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(6)::before { content: 'ספק: '; color: #666; }
/* the lang file's own word for this column is the English "Voucher"; in a
Hebrew line the colon would land on its far side, so the label is an
isolated LTR run */
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(4)::before { content: 'Voucher: '; color: #666; direction: ltr; unicode-bidi: isolate; }
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(5):empty::after,
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(6):empty::after,
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(4):empty::after {
content: '—';
color: #777;
}
/* lines 4 and 5 — the money: two tiles, then three */
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(7),
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(8),
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(9),
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(10),
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(11) {
align-self: stretch;
margin-top: 8px;
padding: 4px 3px 5px;
background: #f2f4f7 !important;
text-align: center;
font-size: 13px;
font-weight: 700;
line-height: 1.25;
color: #333;
white-space: normal;
}
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(7) { order: 8; flex: 1 1 50%; border-start-start-radius: 6px; border-end-start-radius: 6px; }
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(8) { order: 9; flex: 1 1 50%; border-inline-start: 1px solid #fff !important; border-start-end-radius: 6px; border-end-end-radius: 6px; }
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(9) { order: 10; flex: 1 1 33.333%; margin-top: 4px; border-start-start-radius: 6px; border-end-start-radius: 6px; }
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(10) { order: 11; flex: 1 1 33.333%; margin-top: 4px; border-inline-start: 1px solid #fff !important; }
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(11) { order: 12; flex: 1 1 33.333%; margin-top: 4px; border-inline-start: 1px solid #fff !important; border-start-end-radius: 6px; border-end-end-radius: 6px; }
/* the ILS equivalent of a foreign sale is a span of its own and goes under
the amount, smaller; the expenses cell prints its equivalent as loose
text and simply wraps */
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(7) > span:last-child:not(:first-child) {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
}
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(7)::before,
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(8)::before,
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(9)::before,
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(10)::before,
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(11)::before {
display: block;
margin-bottom: 1px;
font-size: 11px;
font-weight: 400;
line-height: 1.2;
color: #666;
white-space: normal;
}
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(7)::before { content: 'נמכרו'; }
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(8)::before { content: 'הוצאות'; }
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(9)::before { content: 'סך עמלה'; }
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(10)::before { content: 'סה"כ רווח'; }
#main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(11)::before { content: '%'; }
/* THE HEADER: the two totals rows and the label row go; the search row
keeps the type and name searches. Its cells are `th` under `thead > tr`
number four. */
#main .content > .table-responsive > table[st-table="elements"] > thead > tr:not(:nth-child(4)) {
display: none;
}
#main .content > .table-responsive > table[st-table="elements"] > thead > tr:nth-child(4) {
display: flex;
flex-wrap: wrap;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main .content > .table-responsive > table[st-table="elements"] > thead > tr:nth-child(4) > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main .content > .table-responsive > table[st-table="elements"] > thead > tr:nth-child(4) > th:nth-child(2),
#main .content > .table-responsive > table[st-table="elements"] > thead > tr:nth-child(4) > th:nth-child(3) {
display: block !important;
max-width: none !important;
min-width: 0 !important;
width: auto !important;
box-sizing: border-box;
padding: 0 3px 4px;
}
#main .content > .table-responsive > table[st-table="elements"] > thead > tr:nth-child(4) > th:nth-child(2) { flex: 1 1 40%; }
#main .content > .table-responsive > table[st-table="elements"] > thead > tr:nth-child(4) > th:nth-child(3) { flex: 1 1 60%; }
#main .content > .table-responsive > table[st-table="elements"] > thead > tr:nth-child(4) > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main .content > .table-responsive > table[st-table="elements"] > thead > tr:nth-child(4) > th:nth-child(2)::before { content: 'סוג'; }
#main .content > .table-responsive > table[st-table="elements"] > thead > tr:nth-child(4) > th:nth-child(3)::before { content: 'שם שירות'; }
#main .content > .table-responsive > table[st-table="elements"] > thead > tr:nth-child(4) input {
width: 100%;
}
#main .content > .table-responsive > table[st-table="elements"] {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main .content > .table-responsive > table[st-table="elements"] > tfoot > tr,
#main .content > .table-responsive > table[st-table="elements"] > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
/* the labels in the user's language (app/lang/en, ru: supplier.supplier,
voucher.voucher, project.sells, manage_revenue.expenses,
service.commission, order.total_profit, service.s_type, service.s_name) */
html[lang="en"] #main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(6)::before { content: 'Supplier: '; }
html[lang="en"] #main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(7)::before { content: 'sells'; }
html[lang="en"] #main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(8)::before { content: 'Expenses'; }
html[lang="en"] #main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(9)::before { content: 'Commission'; }
html[lang="en"] #main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(10)::before { content: 'Total profit'; }
html[lang="en"] #main .content > .table-responsive > table[st-table="elements"] > thead > tr:nth-child(4) > th:nth-child(2)::before { content: 's type'; }
html[lang="en"] #main .content > .table-responsive > table[st-table="elements"] > thead > tr:nth-child(4) > th:nth-child(3)::before { content: 'name'; }
html[lang="ru"] #main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(6)::before { content: 'Поставщик: '; }
html[lang="ru"] #main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(4)::before { content: 'Ваучер: '; }
html[lang="ru"] #main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(7)::before { content: 'Продажи'; }
html[lang="ru"] #main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(8)::before { content: 'Расходы'; }
html[lang="ru"] #main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(9)::before { content: 'Комиссия'; }
html[lang="ru"] #main .content > .table-responsive > table[st-table="elements"] > tbody > tr > td:nth-child(10)::before { content: 'Общая прибыль'; }
html[lang="ru"] #main .content > .table-responsive > table[st-table="elements"] > thead > tr:nth-child(4) > th:nth-child(2)::before { content: 'Тип сервиса'; }
html[lang="ru"] #main .content > .table-responsive > table[st-table="elements"] > thead > tr:nth-child(4) > th:nth-child(3)::before { content: 'Название сервиса'; }
/* ---------------------------------------------------------------------------
13h. THE PROJECT'S SERVICE CATEGORIES — THE TREE ROWS
The "קטגוריות שירותים" tab (app.projects.current.service_categories)
is not a grid but an angular-ui-tree: one `div.tree-node-content` per
category — a chevron, the name, "(Avaliable n) (Stock n)", and four
`pull-right` buttons (new service, edit, new sub-category, delete) —
and, under an expanded category, one `li.tree-node-content` per
service with three icon links. On a phone the floated buttons wrapped
under and over each other (the CTO's screenshot of 2026-09-15): four
22px buttons floated right in a 330px row with a two-line name.
Each row is a flex card now: the chevron and the name on the first
line(s), the buttons on a line of their own as 40px targets spread
across the row — the same shape as the other cards' operations line.
The theme's #7c9eb2 text on #f8faff is 2.6:1; the name is #333 here.
--------------------------------------------------------------------------- */
#main #tree-root .tree-node-content {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px !important;
color: #333;
font-size: 14px;
line-height: 1.4;
}
/* the chevron that expands a category: a real target, at the start —
order -1, because the name is a bare text node, an anonymous flex item
at order 0 that would otherwise precede it */
#main #tree-root div.tree-node-content > a.btn:not(.pull-right) {
order: -1;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin-inline-end: 8px;
padding: 0;
}
/* the counts after the name */
#main #tree-root .tree-node-content > span {
font-size: 11px;
color: #666;
margin-inline-start: 4px;
}
/* THE LINE BREAK before the buttons: a zero-height full-width item */
#main #tree-root .tree-node-content::after {
content: '';
display: block;
order: 3;
flex: 1 0 100%;
height: 0;
}
/* the four category buttons (pull-right in the template) and the three
service icons: no float, one line, 40px targets */
#main #tree-root .tree-node-content > a.pull-right,
#main #tree-root li.tree-node-content > a {
float: none !important;
order: 4;
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
margin: 6px 2px 0 !important;
padding: 0 8px;
}
#main #tree-root .tree-node-content > a.pull-right { flex: 1 1 22%; }
#main #tree-root li.tree-node-content > a { flex: 1 1 30%; color: #3276b1; }
/* a service row under an expanded category: the template paints it with
an inline blue; keep it, readable */
#main #tree-root li.tree-node-content {
margin-top: 4px;
color: #333;
font-size: 13px;
}
/* the nested lists indent from the start side, not always the left */
#main #tree-root .angular-ui-tree-nodes .angular-ui-tree-nodes {
padding-left: 0;
padding-inline-start: 16px;
}
/* ---------------------------------------------------------------------------
13i. THE PROJECT'S PACKAGE LIST BECOMES CARDS
`#project_service_packages_list` (app.projects.current.packages): ten
columns — id, a landing checkbox under ng-show, name, the services in
the package (a list), each service's net (view_cost_elements) and gross
(lists), the package's customer price, a default-item check, sold,
actions. On a phone the cut showed the id and half a name. Each row:
line 1 id · NAME (bold, wraps) · default-item check
line 2 the services in the package, one per line
line 3 two tiles: customer price · sold
line 4 the two actions, 44px each
One permission cell (net per service, cell 5) sits BEFORE every cell the
card uses on the trailing side, so those are addressed from the end and
hold in both shapes (10 cells with view_cost_elements, 9 without). The
per-service price lists stay behind the `+`.
--------------------------------------------------------------------------- */
#main #project_service_packages_list,
#main #project_service_packages_list > thead,
#main #project_service_packages_list > tbody,
#main #project_service_packages_list > tfoot {
display: block !important;
}
#main #project_service_packages_list > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #project_service_packages_list > tbody > tr > td {
display: none !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #project_service_packages_list > tbody > tr > td:nth-child(1),
#main #project_service_packages_list > tbody > tr > td:nth-child(3),
#main #project_service_packages_list > tbody > tr > td:nth-child(4),
#main #project_service_packages_list > tbody > tr > td:nth-last-child(4),
#main #project_service_packages_list > tbody > tr > td:nth-last-child(3),
#main #project_service_packages_list > tbody > tr > td:nth-last-child(2) {
display: block !important;
}
#main #project_service_packages_list > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
color: #999;
}
#main #project_service_packages_list > tbody > tr > td:nth-child(3) {
order: 2;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #project_service_packages_list > tbody > tr > td:nth-last-child(3) {
order: 3;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-start: 6px;
line-height: 21px;
color: #3d8b3d;
}
#main #project_service_packages_list > tbody > tr::after {
content: '';
display: block;
order: 4;
flex: 1 0 100%;
height: 0;
}
/* line 2 — the services: the template's per service, made a plain list */
#main #project_service_packages_list > tbody > tr > td:nth-child(4) {
order: 5;
flex: 1 1 100%;
padding-top: 3px;
}
#main #project_service_packages_list > tbody > tr > td:nth-child(4)::before { content: 'שירותים: '; color: #666; }
#main #project_service_packages_list > tbody > tr > td:nth-child(4) ul {
display: inline;
margin: 0;
padding: 0;
list-style: none;
}
#main #project_service_packages_list > tbody > tr > td:nth-child(4) li {
display: block;
padding-inline-start: 10px;
}
#main #project_service_packages_list > tbody > tr > td:nth-child(4) li::before { content: '· '; color: #999; }
#main #project_service_packages_list > tbody > tr > td:nth-child(4):empty::after { content: '—'; color: #777; }
/* line 3 — the package's price and its sales, two tiles */
#main #project_service_packages_list > tbody > tr > td:nth-last-child(4),
#main #project_service_packages_list > tbody > tr > td:nth-last-child(2) {
flex: 1 1 50%;
align-self: stretch;
margin-top: 8px;
padding: 4px 3px 5px;
background: #f2f4f7 !important;
text-align: center;
font-size: 13px;
font-weight: 700;
line-height: 1.25;
color: #333;
white-space: normal;
}
#main #project_service_packages_list > tbody > tr > td:nth-last-child(4) { order: 6; border-start-start-radius: 6px; border-end-start-radius: 6px; }
#main #project_service_packages_list > tbody > tr > td:nth-last-child(2) { order: 7; border-inline-start: 1px solid #fff !important; border-start-end-radius: 6px; border-end-end-radius: 6px; }
#main #project_service_packages_list > tbody > tr > td:nth-last-child(4)::before,
#main #project_service_packages_list > tbody > tr > td:nth-last-child(2)::before {
display: block;
margin-bottom: 1px;
font-size: 11px;
font-weight: 400;
line-height: 1.2;
color: #666;
white-space: normal;
}
#main #project_service_packages_list > tbody > tr > td:nth-last-child(4)::before { content: 'מחיר ללקוח'; }
#main #project_service_packages_list > tbody > tr > td:nth-last-child(2)::before { content: 'נמכרו'; }
/* line 4 — edit and delete as 44px targets */
#main #project_service_packages_list > tbody > tr > td:last-child {
display: flex !important;
order: 8;
flex: 1 1 100%;
justify-content: space-around;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #project_service_packages_list > tbody > tr > td:last-child a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: #3276b1;
}
/* the header goes: this grid has no search row */
#main #project_service_packages_list > thead {
display: none !important;
}
#main #project_service_packages_list {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #project_service_packages_list > tfoot > tr,
#main #project_service_packages_list > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
html[lang="en"] #main #project_service_packages_list > tbody > tr > td:nth-child(4)::before { content: 'Services: '; }
html[lang="en"] #main #project_service_packages_list > tbody > tr > td:nth-last-child(4)::before { content: 'Customer price'; }
html[lang="en"] #main #project_service_packages_list > tbody > tr > td:nth-last-child(2)::before { content: 'Sold'; }
html[lang="ru"] #main #project_service_packages_list > tbody > tr > td:nth-child(4)::before { content: 'Сервисы: '; }
html[lang="ru"] #main #project_service_packages_list > tbody > tr > td:nth-last-child(4)::before { content: 'Цена клиента'; }
html[lang="ru"] #main #project_service_packages_list > tbody > tr > td:nth-last-child(2)::before { content: 'Продано'; }
/* ---------------------------------------------------------------------------
13j. THE PROJECT'S GROUPS AND ATTACHMENTS — TABLES THAT FIT
`#groups_list` (four columns: #, landing, name, actions) and
`#attachment_list` (three: #, name, actions) fit a phone as tables; what
they need is the theme's 44px targets for their action icons and a
header cell that does not stack "AD-RE" letter by letter.
--------------------------------------------------------------------------- */
#main #groups_list > tbody > tr > td:last-child a,
#main #attachment_list > tbody > tr > td:last-child a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin: -8px 0;
}
#main #groups_list > thead > tr > th:nth-child(2) {
white-space: nowrap;
}
/* a group's name wraps instead of being cut at the cell's edge */
#main #groups_list > tbody > tr > td.name,
#main #attachment_list > tbody > tr > td:nth-child(2) {
white-space: normal;
word-break: break-word;
}
/* ---------------------------------------------------------------------------
13k. PAYMENT CONTROL — THE PAYMENT LIST BECOMES CARDS
`#payments` under app.accounting.paymentControl.payments is the widest
grid in the application: twenty-six columns, the same id as the
commissions module's payment grid (pinned apart here by the service the
`st-service` attribute names). On a phone the cut left the select box,
a row number and a receipt number. Each row is a card now:
line 1 `+` and select · DOCKET # (link, bold) · received ✓ · storno ✓
line 2 the customer's name (first, last)
line 3 payment date · payment method
line 4 project
line 5 business customer · clerk
line 6 three tiles: amount · currency · receipt number
TWO CELLS COME AND GO WITH THE FILTER FORM, not with permissions: a
cell at position 2 when the payment-method filter is "credit" (3), and
one after the docket number when any method is filtered. The card
addresses every cell by both ends for the 26-cell row the screen opens
with; a filtered row (27 or 28 cells) keeps its leading lines and its
figures behind the `+`.
26 cells 1 select · 2 # · 3 receipt · 4 received · 5 storno
6 received by · 7 docket · 8 project · 9 payment date
10 value date · 11 amount · 12 currency · 13 rate
14 method · 15 card · 16 card company · 17 instalments
18 transaction · 19 account · 20 first name · 21 last name
22 business customer · 23 network · 24 branch · 25 clerk
26 batch
--------------------------------------------------------------------------- */
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"],
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > thead,
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody,
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tfoot {
display: block !important;
}
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 10px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr.highlight-line { background: #fff8e1 !important; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td {
display: none !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(1):nth-last-child(26),
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(2):nth-last-child(25),
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(3):nth-last-child(24),
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(4):nth-last-child(23),
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(5):nth-last-child(22),
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(7):nth-last-child(20),
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(8):nth-last-child(19),
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(9):nth-last-child(18),
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(11):nth-last-child(16),
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(12):nth-last-child(15),
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(14):nth-last-child(13),
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(20):nth-last-child(7),
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(21):nth-last-child(6),
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(22):nth-last-child(5),
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(25):nth-last-child(2),
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(6):nth-last-child(21) {
display: block !important;
}
/* line 1 */
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(1):nth-last-child(26) {
order: 1;
flex: 0 0 auto;
margin-inline-end: 8px;
white-space: nowrap;
}
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(7):nth-last-child(20) {
order: 2;
flex: 1 1 auto;
min-width: 0 !important;
font-size: 16px;
font-weight: 700;
white-space: nowrap;
}
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(7):nth-last-child(20) a { color: #3276b1; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(7):nth-last-child(20)::before { content: 'דוקט '; font-weight: 400; color: #666; }
/* the received / storno checks: a check icon when set, nothing when not */
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(4):nth-last-child(23),
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(5):nth-last-child(22) {
flex: 0 0 auto;
margin-inline-start: 8px;
white-space: nowrap;
font-size: 11px;
}
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(4):nth-last-child(23) { order: 3; color: #3d8b3d; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(5):nth-last-child(22) { order: 4; color: #a90329; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(4):nth-last-child(23) > span.fa::after { content: ' התקבל'; font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(5):nth-last-child(22) > span.fa::after { content: ' מבוטל'; font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; }
/* THE LINE BREAK: the row number, worthless on a phone */
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(2):nth-last-child(25) {
order: 5;
flex: 1 0 100%;
height: 0;
min-height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
}
/* line 2 — the customer: first name then surname, content-sized; line 3's
percentages close the line */
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(20):nth-last-child(7) {
order: 6;
flex: 0 1 auto;
padding-inline-end: 5px;
font-size: 15px;
font-weight: 600;
line-height: 1.5;
padding-top: 2px;
}
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(21):nth-last-child(6) {
order: 7;
flex: 1 1 auto;
font-size: 15px;
font-weight: 600;
line-height: 1.5;
padding-top: 2px;
}
/* the second line break: the name cells are content-sized, so a short name
would let the date join its line — the "received by" cell, which the card
does not show, closes it (the order card does the same with start info) */
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(6):nth-last-child(21) {
order: 8;
flex: 1 0 100%;
height: 0;
min-height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
}
/* line 3 — date and method; line 4 — project; line 5 — business customer and clerk */
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(9):nth-last-child(18) { order: 9; flex: 1 1 58%; padding-top: 3px; padding-inline-end: 8px; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(14):nth-last-child(13) { order: 10; flex: 1 1 42%; padding-top: 3px; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(8):nth-last-child(19) { order: 11; flex: 1 1 100%; padding-top: 3px; word-break: break-word; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(22):nth-last-child(5) { order: 12; flex: 1 1 50%; padding-top: 3px; padding-inline-end: 8px; word-break: break-word; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(25):nth-last-child(2) { order: 13; flex: 1 1 50%; padding-top: 3px; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(8):nth-last-child(19) a { display: inline; color: #3276b1; padding: 8px 0; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(9):nth-last-child(18)::before { content: 'תאריך תשלום: '; color: #666; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(14):nth-last-child(13)::before { content: 'סוג תשלום: '; color: #666; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(8):nth-last-child(19)::before { content: 'פרוייקט: '; color: #666; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(22):nth-last-child(5)::before { content: 'לקוח עסקי: '; color: #666; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(25):nth-last-child(2)::before { content: 'פקיד: '; color: #666; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(8):nth-last-child(19):has(> a:empty)::after,
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(22):nth-last-child(5):empty::after,
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(25):nth-last-child(2):empty::after {
content: '—';
color: #777;
}
/* line 6 — amount, currency, receipt: three tiles */
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(11):nth-last-child(16),
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(12):nth-last-child(15),
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(3):nth-last-child(24) {
flex: 1 1 33.333%;
align-self: stretch;
margin-top: 8px;
padding: 4px 3px 5px;
background: #f2f4f7 !important;
text-align: center;
font-size: 14px;
font-weight: 700;
line-height: 1.25;
color: #333;
white-space: nowrap;
}
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(11):nth-last-child(16) { order: 14; border-start-start-radius: 6px; border-end-start-radius: 6px; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(12):nth-last-child(15) { order: 15; border-inline-start: 1px solid #fff !important; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(3):nth-last-child(24) { order: 16; border-inline-start: 1px solid #fff !important; border-start-end-radius: 6px; border-end-end-radius: 6px; white-space: normal; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(3):nth-last-child(24) a { color: #3276b1; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(11):nth-last-child(16)::before,
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(12):nth-last-child(15)::before,
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(3):nth-last-child(24)::before {
display: block;
margin-bottom: 1px;
font-size: 11px;
font-weight: 400;
line-height: 1.2;
color: #666;
white-space: normal;
}
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(11):nth-last-child(16)::before { content: 'סכום'; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(12):nth-last-child(15)::before { content: 'מטבע'; }
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(3):nth-last-child(24)::before { content: 'מספר קבלה'; }
/* THE HEADER: this grid's header is one label row; the search boxes live
in the filter form above the grid, so the whole header goes */
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > thead {
display: none !important;
}
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tfoot > tr,
#main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
/* the labels in the user's language (app/lang/en, ru: payment.order_id,
payment.payment_date, payment.payment_method, payment.project_name,
payment.agent, payment.user, payment.amount, payment.currency,
payment.invoice_number, payment.verified, payment.storno_item) */
html[lang="en"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(7):nth-last-child(20)::before { content: 'Order Number '; }
html[lang="en"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(4):nth-last-child(23) > span.fa::after { content: ' Verified'; }
html[lang="en"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(5):nth-last-child(22) > span.fa::after { content: ' Canceled Payment'; }
html[lang="en"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(9):nth-last-child(18)::before { content: 'Payment Date: '; }
html[lang="en"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(14):nth-last-child(13)::before { content: 'Payment Method: '; }
html[lang="en"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(8):nth-last-child(19)::before { content: 'Project Name: '; }
html[lang="en"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(22):nth-last-child(5)::before { content: 'Business Client: '; }
html[lang="en"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(25):nth-last-child(2)::before { content: 'User: '; }
html[lang="en"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(11):nth-last-child(16)::before { content: 'Amount'; }
html[lang="en"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(12):nth-last-child(15)::before { content: 'Currency'; }
html[lang="en"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(3):nth-last-child(24)::before { content: 'Receipt Number'; }
html[lang="ru"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(7):nth-last-child(20)::before { content: 'Номер заказа '; }
html[lang="ru"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(4):nth-last-child(23) > span.fa::after { content: ' Подтвержденный'; }
html[lang="ru"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(5):nth-last-child(22) > span.fa::after { content: ' Отмененный платеж'; }
html[lang="ru"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(9):nth-last-child(18)::before { content: 'Дата платежа: '; }
html[lang="ru"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(14):nth-last-child(13)::before { content: 'Способ оплаты: '; }
html[lang="ru"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(8):nth-last-child(19)::before { content: 'Имя проекта: '; }
html[lang="ru"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(22):nth-last-child(5)::before { content: 'Бизнес-клиент: '; }
html[lang="ru"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(25):nth-last-child(2)::before { content: 'Пользователь: '; }
html[lang="ru"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(11):nth-last-child(16)::before { content: 'Сумма'; }
html[lang="ru"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(12):nth-last-child(15)::before { content: 'Валюта'; }
html[lang="ru"] #main #payments[st-table="payments"][st-service="paymentsController.paymentControlService"] > tbody > tr > td:nth-child(3):nth-last-child(24)::before { content: 'Номер квитанции'; }
/* ---------------------------------------------------------------------------
13l. COMMISSIONS — THE PAYMENT LIST BECOMES CARDS
`#payments` under app.accounting.commissions.payments (fourteen fixed
columns, the other grid with this id — pinned apart by its service):
each row an order with its money and the commission due. On a phone
the cut left a select box and a first name. Each row:
line 1 `+` and select · DOCKET # (link, bold) · paid ✓
line 2 the customer's name
line 3 project
line 4 business customer · group
line 5 four tiles: order amount · paid net · profitability · commission
(two to a line under 360px)
14 cells 1 select · 2 first name · 3 last name · 4 project
5 order amount · 6 paid net · 7 paid gross · 8 profitability
9 commission · 10 business customer · 11 institute · 12 group
13 docket · 14 paid
Paid gross (7) stays behind the `+`; the institute cell (11), which the
card does not show, closes the name line.
--------------------------------------------------------------------------- */
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"],
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > thead,
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody,
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tfoot {
display: block !important;
}
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 10px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td {
display: none !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(1),
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(2),
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(3),
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(4),
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(5),
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(6),
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(8),
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(9),
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(10),
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(11),
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(12),
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(13),
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(14) {
display: block !important;
}
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(1) { order: 1; flex: 0 0 auto; margin-inline-end: 8px; white-space: nowrap; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(13) {
order: 2;
flex: 1 1 auto;
min-width: 0 !important;
font-size: 16px;
font-weight: 700;
white-space: nowrap;
}
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(13) a { color: #3276b1; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(13)::before { content: 'דוקט '; font-weight: 400; color: #666; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(14) { order: 3; flex: 0 0 auto; margin-inline-start: 8px; font-size: 11px; color: #3d8b3d; white-space: nowrap; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(14) > span.fa::after { content: ' שולם'; font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; }
/* the line break after line 1: the row's own ::after */
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr::after {
content: '';
display: block;
order: 4;
flex: 1 0 100%;
height: 0;
}
/* line 2 — the name, content-sized; the institute cell closes the line */
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(2) { order: 5; flex: 0 1 auto; padding-inline-end: 5px; font-size: 15px; font-weight: 600; line-height: 1.5; padding-top: 2px; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(3) { order: 6; flex: 1 1 auto; font-size: 15px; font-weight: 600; line-height: 1.5; padding-top: 2px; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(11) {
order: 7;
flex: 1 0 100%;
height: 0;
min-height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
}
/* lines 3 and 4 */
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(4) { order: 8; flex: 1 1 100%; padding-top: 3px; word-break: break-word; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(10) { order: 9; flex: 1 1 50%; padding-top: 3px; padding-inline-end: 8px; word-break: break-word; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(12) { order: 10; flex: 1 1 50%; padding-top: 3px; word-break: break-word; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(4) a { display: inline; color: #3276b1; padding: 8px 0; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(4)::before { content: 'פרוייקט: '; color: #666; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(10)::before { content: 'לקוח עסקי: '; color: #666; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(12)::before { content: 'קבוצה: '; color: #666; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(4):has(> a:empty)::after,
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(10):empty::after,
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(12):empty::after {
content: '—';
color: #777;
}
/* line 5 — four money tiles */
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(5),
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(6),
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(8),
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(9) {
flex: 1 1 25%;
align-self: stretch;
margin-top: 8px;
padding: 4px 2px 5px;
background: #f2f4f7 !important;
text-align: center;
font-size: 13px;
font-weight: 700;
line-height: 1.25;
color: #333;
white-space: normal;
}
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(5) { order: 11; border-start-start-radius: 6px; border-end-start-radius: 6px; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(6) { order: 12; border-inline-start: 1px solid #fff !important; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(8) { order: 13; border-inline-start: 1px solid #fff !important; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(9) { order: 14; border-inline-start: 1px solid #fff !important; border-start-end-radius: 6px; border-end-end-radius: 6px; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(5)::before,
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(6)::before,
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(8)::before,
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(9)::before {
display: block;
margin-bottom: 1px;
font-size: 11px;
font-weight: 400;
line-height: 1.2;
color: #666;
white-space: normal;
}
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(5)::before { content: 'סכום העסקה'; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(6)::before { content: 'שולם נטו'; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(8)::before { content: 'רווחיות'; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(9)::before { content: 'עמלה'; }
@media (max-width: 359px) {
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(5),
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(6),
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(8),
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(9) { flex: 1 1 50%; border-radius: 0; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(5),
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(8) { border-inline-start: 0 !important; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(8),
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(9) { margin-top: 1px; }
}
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > thead { display: none !important; }
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tfoot > tr,
#main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
html[lang="en"] #main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(13)::before { content: 'Order Number '; }
html[lang="en"] #main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(14) > span.fa::after { content: ' Paid'; }
html[lang="en"] #main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(4)::before { content: 'Project Name: '; }
html[lang="en"] #main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(10)::before { content: 'Business Client: '; }
html[lang="en"] #main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(12)::before { content: 'Group: '; }
html[lang="en"] #main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(5)::before { content: 'Order Amount'; }
html[lang="en"] #main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(6)::before { content: 'Amount Net'; }
html[lang="en"] #main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(8)::before { content: 'Profitability'; }
html[lang="en"] #main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(9)::before { content: 'Commission'; }
html[lang="ru"] #main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(13)::before { content: 'Номер заказа '; }
html[lang="ru"] #main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(14) > span.fa::after { content: ' Оплачено'; }
html[lang="ru"] #main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(4)::before { content: 'Имя проекта: '; }
html[lang="ru"] #main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(10)::before { content: 'Бизнес-клиент: '; }
html[lang="ru"] #main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(12)::before { content: 'Группа: '; }
html[lang="ru"] #main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(5)::before { content: 'Сумма заказа'; }
html[lang="ru"] #main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(6)::before { content: 'Сумма нетто'; }
html[lang="ru"] #main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(8)::before { content: 'Прибыльность'; }
html[lang="ru"] #main #payments[st-table="payments"][st-service="commissionsController.commissionsControlService"] > tbody > tr > td:nth-child(9)::before { content: 'Комиссия'; }
/* ---------------------------------------------------------------------------
13m. ACCOUNTS — THE ACCOUNT LIST BECOMES CARDS
app.accounting.accounts.list: eleven fixed columns under — again —
`id="project_list"`, pinned here by `st-table="accounts"`. Each row:
line 1 `+` and id · NAME (bold) · active ✓
line 2 currency · bookkeeping code
line 3 bank · branch · account number
line 4 two tiles: balance · updated
line 5 the operations (edit, delete), 44px each
11 cells 1 id · 2 name · 3 currency · 4 code · 5 active · 6 bank
7 branch · 8 account number · 9 balance · 10 updated
11 operations
--------------------------------------------------------------------------- */
#main #project_list[st-table="accounts"],
#main #project_list[st-table="accounts"] > thead,
#main #project_list[st-table="accounts"] > tbody,
#main #project_list[st-table="accounts"] > tfoot {
display: block !important;
}
#main #project_list[st-table="accounts"] > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #project_list[st-table="accounts"] > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(1) { order: 1; flex: 0 0 auto; align-self: flex-start; margin-inline-end: 8px; white-space: nowrap; line-height: 21px; color: #999; }
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(2) { order: 2; flex: 1 1 0; min-width: 0 !important; font-size: 15px; font-weight: 600; line-height: 1.4; color: #333; word-break: break-word; }
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(5) { order: 3; flex: 0 0 auto; align-self: flex-start; margin-inline-start: 6px; line-height: 21px; color: #3d8b3d; text-align: start !important; }
#main #project_list[st-table="accounts"] > tbody > tr::after {
content: '';
display: block;
order: 4;
flex: 1 0 100%;
height: 0;
}
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(3) { order: 5; flex: 1 1 50%; padding-top: 3px; padding-inline-end: 8px; }
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(4) { order: 6; flex: 1 1 50%; padding-top: 3px; }
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(6) { order: 7; flex: 1 1 33%; }
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(7) { order: 8; flex: 1 1 33%; }
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(8) { order: 9; flex: 1 1 34%; }
/* the bank details: three columns, each its label over its number */
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(6),
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(7),
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(8) {
align-self: flex-start;
min-width: 0 !important;
padding: 5px 3px 0 0;
white-space: normal;
overflow-wrap: anywhere;
}
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(6)::before,
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(7)::before,
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(8)::before {
display: block;
font-size: 11px;
line-height: 1.2;
color: #666;
white-space: normal;
}
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(3)::before { content: 'מטבע: '; color: #666; }
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(4)::before { content: 'קוד הנהח: '; color: #666; }
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(6)::before { content: 'מספר בנק'; }
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(7)::before { content: 'מספר סניף'; }
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(8)::before { content: 'מספר חשבון'; }
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(3):empty::after,
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(4):empty::after,
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(6):empty::after,
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(7):empty::after,
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(8):empty::after {
content: '—';
color: #777;
}
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(9),
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(10) {
flex: 1 1 50%;
align-self: stretch;
margin-top: 8px;
padding: 4px 3px 5px;
background: #f2f4f7 !important;
text-align: center;
font-size: 13px;
font-weight: 700;
line-height: 1.25;
color: #333;
white-space: normal;
}
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(9) { order: 10; border-start-start-radius: 6px; border-end-start-radius: 6px; }
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(10) { order: 11; border-inline-start: 1px solid #fff !important; border-start-end-radius: 6px; border-end-end-radius: 6px; font-weight: 400; font-size: 12px; }
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(9)::before,
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(10)::before {
display: block;
margin-bottom: 1px;
font-size: 11px;
font-weight: 400;
line-height: 1.2;
color: #666;
white-space: normal;
}
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(9)::before { content: 'מאזן'; }
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(10)::before { content: 'תאריך עדכון'; }
/* the operations are two text links around a "|": each a 44px-tall target */
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(11) {
display: flex !important;
order: 12;
flex: 1 1 100%;
align-items: center;
justify-content: center;
margin-top: 6px;
border-top: 1px solid #eee !important;
color: #bbb;
}
#main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(11) a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 14px;
font-size: 13px;
color: #3276b1;
white-space: nowrap;
}
/* THE HEADER: the label row goes; of the search row only the name search
and the active/not-active select stay, each labelled */
#main #project_list[st-table="accounts"] > thead > tr:first-child { display: none; }
#main #project_list[st-table="accounts"] > thead > tr:nth-child(2) {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #project_list[st-table="accounts"] > thead > tr:nth-child(2) > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #project_list[st-table="accounts"] > thead > tr:nth-child(2) > th:nth-child(2),
#main #project_list[st-table="accounts"] > thead > tr:nth-child(2) > th:nth-child(5) {
display: block !important;
box-sizing: border-box;
max-width: none !important;
min-width: 0 !important;
padding: 0 3px 4px;
}
#main #project_list[st-table="accounts"] > thead > tr:nth-child(2) > th:nth-child(2) { flex: 1 1 60%; }
#main #project_list[st-table="accounts"] > thead > tr:nth-child(2) > th:nth-child(5) { flex: 1 1 40%; }
#main #project_list[st-table="accounts"] > thead > tr:nth-child(2) > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #project_list[st-table="accounts"] > thead > tr:nth-child(2) > th:nth-child(2)::before { content: 'שם'; }
#main #project_list[st-table="accounts"] > thead > tr:nth-child(2) > th:nth-child(5)::before { content: 'פעיל'; }
#main #project_list[st-table="accounts"] > thead > tr:nth-child(2) input,
#main #project_list[st-table="accounts"] > thead > tr:nth-child(2) select {
width: 100% !important;
}
/* the `+` row the directive opens under a card */
#main #project_list[st-table="accounts"] > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa;
}
#main #project_list[st-table="accounts"] > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #project_list[st-table="accounts"] .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
#main #project_list[st-table="accounts"] {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #project_list[st-table="accounts"] > tfoot > tr,
#main #project_list[st-table="accounts"] > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
html[lang="en"] #main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(3)::before { content: 'Currency: '; }
html[lang="en"] #main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(4)::before { content: 'Code: '; }
html[lang="en"] #main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(6)::before { content: 'Bank number'; }
html[lang="en"] #main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(7)::before { content: 'Branch number'; }
html[lang="en"] #main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(8)::before { content: 'Account number'; }
html[lang="en"] #main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(9)::before { content: 'Balance'; }
html[lang="en"] #main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(10)::before { content: 'Updated at'; }
html[lang="en"] #main #project_list[st-table="accounts"] > thead > tr:nth-child(2) > th:nth-child(2)::before { content: 'Name'; }
html[lang="en"] #main #project_list[st-table="accounts"] > thead > tr:nth-child(2) > th:nth-child(5)::before { content: 'Active'; }
html[lang="ru"] #main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(3)::before { content: 'в валюте: '; }
html[lang="ru"] #main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(4)::before { content: 'Код: '; }
html[lang="ru"] #main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(6)::before { content: 'Номер банка'; }
html[lang="ru"] #main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(7)::before { content: 'Номер отделения'; }
html[lang="ru"] #main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(8)::before { content: 'Номер счета'; }
html[lang="ru"] #main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(9)::before { content: 'Баланс'; }
html[lang="ru"] #main #project_list[st-table="accounts"] > tbody > tr > td:nth-child(10)::before { content: 'Обновлено в'; }
html[lang="ru"] #main #project_list[st-table="accounts"] > thead > tr:nth-child(2) > th:nth-child(2)::before { content: 'Название'; }
html[lang="ru"] #main #project_list[st-table="accounts"] > thead > tr:nth-child(2) > th:nth-child(5)::before { content: 'Активен'; }
/* ---------------------------------------------------------------------------
13n. USER BALANCES — THE CLERKS' BALANCE LIST BECOMES CARDS
app.accounting.userBalances.list: `#user-balances`, two fixed cells, then
ONE CELL PER ENABLED CURRENCY (an ng-repeat — the count is the tenant's),
then the edit link. The currency columns' headers are the currencies'
names, data rather than translations, so the tiles carry no label: each
shows the currency's own symbol before the amount, as the cell already
does on the desktop.
line 1 `+` and clerk number · CLERK NAME (bold)
line 2+ the balances, two tiles to a line, as many lines as needed
last the edit link, 44px
cells 1 clerk id · 2 clerk name · 3…n-1 one per currency · n edit
--------------------------------------------------------------------------- */
#main #user-balances,
#main #user-balances > thead,
#main #user-balances > tbody,
#main #user-balances > tfoot {
display: block !important;
}
#main #user-balances > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #user-balances > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #user-balances > tbody > tr > td:nth-child(1) { order: 1; flex: 0 0 auto; align-self: flex-start; margin-inline-end: 8px; white-space: nowrap; line-height: 21px; color: #999; }
#main #user-balances > tbody > tr > td:nth-child(2) { order: 2; flex: 1 1 0; min-width: 0 !important; font-size: 15px; font-weight: 600; line-height: 1.4; color: #333; word-break: break-word; }
#main #user-balances > tbody > tr::after {
content: '';
display: block;
order: 3;
flex: 1 0 100%;
height: 0;
}
/* the balances: a tile per currency, two to a line, the symbol the cell
already carries in front of the amount. The tile is laid out LTR so a
negative balance reads "₪-1589520.55", not "1589520.55-₪" as the bidi
algorithm orders the raw number in a Hebrew row */
#main #user-balances > tbody > tr > td:nth-child(n+3):not(:last-child) {
order: 4;
direction: ltr;
unicode-bidi: isolate;
flex: 0 0 50%;
max-width: 50% !important;
align-self: stretch;
margin-top: 8px;
padding: 5px 3px 6px;
background: #f2f4f7 !important;
border: 1px solid #fff !important;
text-align: center;
font-size: 13px;
font-weight: 700;
line-height: 1.25;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#main #user-balances > tbody > tr > td:nth-child(n+3):not(:last-child) > span {
margin-inline-end: 2px;
font-weight: 400;
color: #666;
}
#main #user-balances > tbody > tr > td:last-child {
display: flex !important;
order: 5;
flex: 1 1 100%;
align-items: center;
justify-content: center;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #user-balances > tbody > tr > td:last-child a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 14px;
font-size: 13px;
color: #3276b1;
white-space: nowrap;
}
/* THE HEADER: one label row and nothing to search — the whole header goes */
#main #user-balances > thead {
display: none !important;
}
#main #user-balances {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #user-balances > tfoot > tr,
#main #user-balances > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
/* the `+` row the directive opens under a card */
#main #user-balances > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa;
}
#main #user-balances > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #user-balances .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
/* ---------------------------------------------------------------------------
13p. THE SERVICES PRICE LIST BECOMES CARDS
`#service_list` under app.services ("מחירון שירותים") — the same id as
the project's service list, a different grid: twenty columns, pinned by
`st-service`. Each row:
line 1 `+` and id · type (badge) · NAME (bold, wraps)
line 2 category · date
line 3 supplier (view_cost_elements)
line 4 money tiles: customer price · purchase price · total customer
· total purchase (the purchase figures under view_cost_elements)
line 5 count tiles: units · stock · sold · available (view_seats_details)
line 6 the checks that are on, as chips: enabled · voucher · default
· shared
line 7 comments
line 8 the actions (assign, print, edit, delete, clone), 44px each
(manage_services)
20 cells 1 id · 2 name · 3 type · 4 category · 5 customer price
6 purchase price* · 7 units · 8 total customer · 9 total
purchase* · 10 supplier* · 11 date · 12 enabled · 13 voucher
14 default · 15 shared · 16 stock · 17 sold · 18 available**
19 comments · 20 actions*** (* view_cost_elements,
** view_seats_details, *** manage_services)
THE COLUMN NUMBERS MOVE WITH PERMISSIONS, so the cells are addressed
by the classes the template gives them wherever it does (id, name,
category, date, the four checks, the three counts, comments), by
position for the first five, and — for the five between the price and
the date — by which of the two shapes the row has: the date cell is
the 11th child with `view_cost_elements`, the 8th without. Any of the
eight permission combinations lays out correctly.
--------------------------------------------------------------------------- */
#main #service_list[st-service="servicesListController.servicesService"],
#main #service_list[st-service="servicesListController.servicesService"] > thead,
#main #service_list[st-service="servicesListController.servicesService"] > tbody,
#main #service_list[st-service="servicesListController.servicesService"] > tfoot {
display: block !important;
}
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start !important;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
/* line 1 — the id, the type as a small badge, the name (the theme pins
the name's span to 100px and one line; here it wraps) */
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.tables-id-col-fix {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
color: #999;
}
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:nth-child(3) {
order: 2;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
padding: 1px 6px;
border-radius: 3px;
background: #e9ecef !important;
font-size: 11px;
line-height: 19px;
color: #555;
white-space: nowrap;
}
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.tables-category-col {
order: 3;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.tables-category-col > span {
display: inline;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
overflow: visible;
text-overflow: clip;
text-align: start;
}
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.tables-category-col > a {
margin-inline-end: 6px;
}
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr::after {
content: '';
display: block;
order: 4;
flex: 1 0 100%;
height: 0;
}
/* line 2 — category and date; line 3 — the supplier */
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:nth-child(4) {
order: 5;
flex: 1 1 60%;
padding-top: 3px;
padding-inline-end: 8px;
word-break: break-word;
}
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.date-table-col {
order: 6;
flex: 1 1 40%;
padding-top: 3px;
}
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(10) {
order: 7;
flex: 1 1 100%;
padding-top: 3px;
word-break: break-word;
}
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:nth-child(4)::before { content: 'קטגוריה: '; color: #666; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.date-table-col::before { content: 'תאריך: '; color: #666; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(10)::before { content: 'ספק: '; color: #666; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:nth-child(4):empty::after,
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.date-table-col:empty::after,
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(10):empty::after {
content: '—';
color: #777;
}
/* lines 4 and 5 — the money and the counts, each a rounded tile */
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:nth-child(5),
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(6),
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(7),
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(8),
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(9),
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(8)) > td:nth-child(6),
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(8)) > td:nth-child(7),
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.check-field + td.number-table-col,
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.check-field + td.number-table-col + td.number-table-col,
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.number-table-col + td.number-table-col + td.number-table-col {
flex: 1 1 22%;
align-self: stretch;
margin-top: 6px;
margin-inline-end: 4px;
padding: 4px 2px 5px;
border-radius: 6px;
background: #f2f4f7 !important;
text-align: center !important;
font-size: 13px;
font-weight: 700;
line-height: 1.25;
color: #333;
white-space: normal;
}
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:nth-child(5) { order: 8; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(6) { order: 9; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(8) { order: 10; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(9) { order: 11; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(8)) > td:nth-child(7) { order: 10; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(7) { order: 12; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(8)) > td:nth-child(6) { order: 12; }
/* without the purchase figures the money is two tiles, each half the
line, so the counts start a line of their own */
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(8)) > td:nth-child(5),
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(8)) > td:nth-child(7) {
flex: 1 1 46%;
}
/* THE LINE BREAK before the chips: the counts may leave room on their
line (three tiles without view_seats_details) and a chip would take it */
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr::before {
content: '';
display: block;
order: 16;
flex: 1 0 100%;
height: 0;
}
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.check-field + td.number-table-col { order: 13; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.check-field + td.number-table-col + td.number-table-col { order: 14; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.number-table-col + td.number-table-col + td.number-table-col { order: 15; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:nth-child(5)::before,
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(6)::before,
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(7)::before,
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(8)::before,
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(9)::before,
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(8)) > td:nth-child(6)::before,
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(8)) > td:nth-child(7)::before,
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.check-field + td.number-table-col::before,
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.check-field + td.number-table-col + td.number-table-col::before,
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.number-table-col + td.number-table-col + td.number-table-col::before {
display: block;
margin-bottom: 1px;
font-size: 11px;
font-weight: 400;
line-height: 1.2;
color: #666;
white-space: normal;
}
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:nth-child(5)::before { content: 'מחיר ללקוח'; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(6)::before { content: 'מחיר קנייה'; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(8)::before,
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(8)) > td:nth-child(7)::before { content: 'סה"כ ללקוח'; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(9)::before { content: 'סה"כ קנייה'; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(7)::before,
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(8)) > td:nth-child(6)::before { content: 'יחידות'; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.check-field + td.number-table-col::before { content: 'מלאי'; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.check-field + td.number-table-col + td.number-table-col::before { content: 'נמכרו'; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.number-table-col + td.number-table-col + td.number-table-col::before { content: 'זמין'; }
/* on a 320px phone the tiles go two to a line */
@media (max-width: 359px) {
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:nth-child(5),
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(6),
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(7),
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(8),
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(9),
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(8)) > td:nth-child(6),
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(8)) > td:nth-child(7),
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.check-field + td.number-table-col,
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.check-field + td.number-table-col + td.number-table-col,
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.number-table-col + td.number-table-col + td.number-table-col {
flex: 1 1 46%;
}
}
/* line 6 — the checks that are on, as chips; a check that is off is an
empty cell and takes no room */
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.check-field {
order: 17;
flex: 0 0 auto;
margin-top: 8px;
margin-inline-end: 6px;
padding: 1px 8px;
border-radius: 12px;
background: #e6f4ea !important;
font-size: 11px;
line-height: 18px;
color: #2e7d32;
white-space: nowrap;
}
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.check-field:empty {
display: none !important;
}
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.check-field > i::after {
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 400;
}
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:not(.check-field) + td.check-field > i::after { content: ' פעיל'; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:not(.check-field) + td.check-field + td.check-field > i::after { content: ' פריט שובר'; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:not(.check-field) + td.check-field + td.check-field + td.check-field > i::after { content: ' ברירת מחדל'; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:not(.check-field) + td.check-field + td.check-field + td.check-field + td.check-field > i::after { content: ' פריט משותף'; }
/* line 7 — the comments */
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.number-table-col + td.tables-projects-col {
order: 18;
flex: 1 1 100%;
margin-top: 6px;
word-break: break-word;
}
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.number-table-col + td.tables-projects-col::before { content: 'הערות: '; color: #666; }
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.number-table-col + td.tables-projects-col:empty::after { content: '—'; color: #777; }
/* line 8 — the actions: five 14px icons become five 44px targets */
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:last-child:not(.tables-projects-col) {
display: flex !important;
order: 19;
flex: 1 1 100%;
justify-content: space-around;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:last-child:not(.tables-projects-col) a,
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:last-child:not(.tables-projects-col) select-language {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
font-size: 18px;
color: #3276b1;
}
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:last-child:not(.tables-projects-col) select-language a {
width: 100%;
height: 100%;
}
/* THE HEADER: the label row goes; of the filter row the name search and
the type select stay, labelled */
#main #service_list[st-service="servicesListController.servicesService"] > thead > tr:first-child {
display: none;
}
#main #service_list[st-service="servicesListController.servicesService"] > thead > tr.st-filters-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #service_list[st-service="servicesListController.servicesService"] > thead > tr.st-filters-row > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #service_list[st-service="servicesListController.servicesService"] > thead > tr.st-filters-row > th:nth-child(2),
#main #service_list[st-service="servicesListController.servicesService"] > thead > tr.st-filters-row > th:nth-child(3) {
display: block !important;
box-sizing: border-box;
max-width: none !important;
min-width: 0 !important;
width: auto !important;
padding: 0 3px 4px;
}
#main #service_list[st-service="servicesListController.servicesService"] > thead > tr.st-filters-row > th:nth-child(2) { flex: 1 1 60%; }
#main #service_list[st-service="servicesListController.servicesService"] > thead > tr.st-filters-row > th:nth-child(3) { flex: 1 1 40%; }
#main #service_list[st-service="servicesListController.servicesService"] > thead > tr.st-filters-row > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #service_list[st-service="servicesListController.servicesService"] > thead > tr.st-filters-row > th:nth-child(2)::before { content: 'שם השירות'; }
#main #service_list[st-service="servicesListController.servicesService"] > thead > tr.st-filters-row > th:nth-child(3)::before { content: 'סוג'; }
#main #service_list[st-service="servicesListController.servicesService"] > thead > tr.st-filters-row input,
#main #service_list[st-service="servicesListController.servicesService"] > thead > tr.st-filters-row select {
width: 100% !important;
}
#main #service_list[st-service="servicesListController.servicesService"] {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #service_list[st-service="servicesListController.servicesService"] > tfoot > tr,
#main #service_list[st-service="servicesListController.servicesService"] > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
/* the `+` row the directive opens under a card */
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa !important;
}
#main #service_list[st-service="servicesListController.servicesService"] > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #service_list[st-service="servicesListController.servicesService"] .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
/* THE LABELS IN THE USER'S LANGUAGE (app/lang/en, ru: service.category,
service.service_date, service.supplier, service.price_gross,
service.price_net, service.price_total, service.passengers_quantity,
service.stock, service.sold, service.available, service.enabled,
service.hasVoucher, service.default_item, service.general_item,
layout.comments, service.name, report.type) */
html[lang="en"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:nth-child(4)::before { content: 'Category: '; }
html[lang="en"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.date-table-col::before { content: 'Date: '; }
html[lang="en"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(10)::before { content: 'Supplier: '; }
html[lang="en"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:nth-child(5)::before { content: 'Customer price'; }
html[lang="en"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(6)::before { content: 'Purchase price'; }
html[lang="en"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(8)::before,
html[lang="en"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(8)) > td:nth-child(7)::before { content: 'Total customer'; }
html[lang="en"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(9)::before { content: 'Total purchase'; }
html[lang="en"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(7)::before,
html[lang="en"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(8)) > td:nth-child(6)::before { content: 'Units'; }
html[lang="en"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.check-field + td.number-table-col::before { content: 'Stock'; }
html[lang="en"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.check-field + td.number-table-col + td.number-table-col::before { content: 'Sold'; }
html[lang="en"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.number-table-col + td.number-table-col + td.number-table-col::before { content: 'Available'; }
html[lang="en"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:not(.check-field) + td.check-field > i::after { content: ' Enabled'; }
html[lang="en"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:not(.check-field) + td.check-field + td.check-field > i::after { content: ' Voucher'; }
html[lang="en"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:not(.check-field) + td.check-field + td.check-field + td.check-field > i::after { content: ' Default Item'; }
html[lang="en"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:not(.check-field) + td.check-field + td.check-field + td.check-field + td.check-field > i::after { content: ' Shared Item'; }
html[lang="en"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.number-table-col + td.tables-projects-col::before { content: 'Comments: '; }
html[lang="en"] #main #service_list[st-service="servicesListController.servicesService"] > thead > tr.st-filters-row > th:nth-child(2)::before { content: 'Service Name'; }
html[lang="en"] #main #service_list[st-service="servicesListController.servicesService"] > thead > tr.st-filters-row > th:nth-child(3)::before { content: 'Type'; }
html[lang="ru"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:nth-child(4)::before { content: 'Категория: '; }
html[lang="ru"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.date-table-col::before { content: 'Дата: '; }
html[lang="ru"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(10)::before { content: 'Поставщик: '; }
html[lang="ru"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:nth-child(5)::before { content: 'Цена клиента'; }
html[lang="ru"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(6)::before { content: 'Цена покупки'; }
html[lang="ru"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(8)::before,
html[lang="ru"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(8)) > td:nth-child(7)::before { content: 'Всего клиент'; }
html[lang="ru"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(9)::before { content: 'Всего покупка'; }
html[lang="ru"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(11)) > td:nth-child(7)::before,
html[lang="ru"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr:has(> td.date-table-col:nth-child(8)) > td:nth-child(6)::before { content: 'Единицы'; }
html[lang="ru"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.check-field + td.number-table-col::before { content: 'Акции'; }
html[lang="ru"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.check-field + td.number-table-col + td.number-table-col::before { content: 'Продано'; }
html[lang="ru"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.number-table-col + td.number-table-col + td.number-table-col::before { content: 'Доступно'; }
html[lang="ru"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:not(.check-field) + td.check-field > i::after { content: ' Доступно'; }
html[lang="ru"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:not(.check-field) + td.check-field + td.check-field > i::after { content: ' Ваучер'; }
html[lang="ru"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:not(.check-field) + td.check-field + td.check-field + td.check-field > i::after { content: ' Элемент по умолчанию'; }
html[lang="ru"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td:not(.check-field) + td.check-field + td.check-field + td.check-field + td.check-field > i::after { content: ' Общий элемент'; }
html[lang="ru"] #main #service_list[st-service="servicesListController.servicesService"] > tbody > tr > td.number-table-col + td.tables-projects-col::before { content: 'Комментарии: '; }
html[lang="ru"] #main #service_list[st-service="servicesListController.servicesService"] > thead > tr.st-filters-row > th:nth-child(2)::before { content: 'Название сервиса'; }
html[lang="ru"] #main #service_list[st-service="servicesListController.servicesService"] > thead > tr.st-filters-row > th:nth-child(3)::before { content: 'Тип'; }
/* ---------------------------------------------------------------------------
13q. THE CUSTOMER LIST BECOMES CARDS
`#customer_list` under app.customers.default (the CTO's second find of
2026-09-15 16:02): fourteen fixed columns, pinned by `st-service` (the
id is shared with the accounting tab's customer grid). Each row:
line 1 select · HEBREW NAME (first, last — bold) · gender
line 2 the Latin name (first, last)
line 3 id / company number · passport
line 4 mobile · birth date
line 5 city · last business client
line 6 the balance tile, red or green as the grid paints it
line 7 edit · delete, 44px each
14 cells 1 select · 2 id number · 3 last name (heb) · 4 first name
(heb) · 5 last name · 6 first name · 7 passport · 8 gender
9 last business client · 10 city · 11 mobile · 12 birth date
13 balance · 14 actions
THE FILTERS STAY: ten of the twelve column filters are laid out above
the cards, labelled, two to a line (the birth-date range and the
balance range — two-input widgets — are left out).
--------------------------------------------------------------------------- */
#main #customer_list[st-service="ctrl.customersReportService"],
#main #customer_list[st-service="ctrl.customersReportService"] > thead,
#main #customer_list[st-service="ctrl.customersReportService"] > tbody,
#main #customer_list[st-service="ctrl.customersReportService"] > tfoot {
display: block !important;
}
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start !important;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
/* line 1 — select, the Hebrew name (first then last; the cells' DOM order
is the reverse), the gender */
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
}
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(4) {
order: 2;
flex: 0 1 auto;
margin-inline-end: 5px;
}
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(3) {
order: 3;
flex: 1 1 0;
}
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(3),
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(4) {
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(8) {
order: 4;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-start: 6px;
padding: 1px 6px;
border-radius: 3px;
background: #e9ecef !important;
font-size: 11px;
line-height: 19px;
color: #555;
white-space: nowrap;
}
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(8):empty {
display: none !important;
}
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr::after {
content: '';
display: block;
order: 5;
flex: 1 0 100%;
height: 0;
}
/* line 2 — the Latin name in one grey line, read left to right: in this
RTL row the last name takes the start (right) and the first name the
rest, pushed towards it, so the eye reads "Avraham Rozenblat" */
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(5) {
order: 6;
flex: 0 1 auto;
margin-inline-start: 4px;
}
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(6) {
order: 7;
flex: 1 1 0;
}
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(5),
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(6) {
min-width: 0 !important;
direction: ltr;
unicode-bidi: isolate;
text-align: end !important;
color: #777;
word-break: break-word;
}
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(5):empty,
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(6):empty {
display: none !important;
}
/* THE LINE BREAK after the Latin name (its last cell has a zero basis
and would share its line with the id number) */
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr::before {
content: '';
display: block;
order: 8;
flex: 1 0 100%;
height: 0;
}
/* lines 3–5 — label: value, two to a line */
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(2) { order: 9; flex: 1 1 60%; }
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(7) { order: 10; flex: 1 1 40%; }
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(11) { order: 11; flex: 1 1 50%; }
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(12) { order: 12; flex: 1 1 50%; }
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(10) { order: 13; flex: 1 1 50%; }
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(9) { order: 14; flex: 1 1 50%; }
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(2),
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(7),
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(11),
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(12),
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(10),
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(9) {
padding-top: 3px;
padding-inline-end: 6px;
word-break: break-word;
}
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(2)::before { content: 'תז / מספר חברה: '; color: #666; }
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(7)::before { content: 'דרכון: '; color: #666; }
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(11)::before { content: 'מספר נוסף: '; color: #666; }
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(12)::before { content: 'תאריך לידה: '; color: #666; }
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(10)::before { content: 'עיר: '; color: #666; }
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(9)::before { content: 'לקוח עסקי אחרון: '; color: #666; }
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(2):empty::after,
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(7):empty::after,
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(11):empty::after,
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(12):empty::after,
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(10):empty::after,
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(9):empty::after {
content: '—';
color: #777;
}
/* the city is a span under ng-bind-html: the cell is never empty, the
span is when there is no city */
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(10):has(> span:empty)::after {
content: '—';
color: #777;
}
/* line 6 — the balance: the grid's own label-danger / label-success
decision kept, in the darker shades the order card uses (white text
at 7.7:1 / 5.0:1) */
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(13) {
order: 15;
flex: 1 1 100%;
align-self: stretch;
margin-top: 8px;
padding: 4px 3px 5px;
border-radius: 6px;
background: #f2f4f7 !important;
text-align: center !important;
font-size: 13px;
font-weight: 700;
line-height: 1.25;
color: #333;
white-space: nowrap;
direction: ltr;
unicode-bidi: isolate;
}
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(13)::before {
content: 'חוב';
display: block;
margin-bottom: 1px;
font-size: 11px;
font-weight: 400;
line-height: 1.2;
color: #666;
direction: rtl;
}
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(13).label-danger { background: #a90329 !important; color: #fff; }
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(13).label-success { background: #4f7a4f !important; color: #fff; }
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(13).label-danger::before,
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(13).label-success::before { color: rgba(255, 255, 255, 0.85); }
/* line 7 — edit and delete (each under its own permission) as 44px targets */
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(14) {
display: flex !important;
order: 16;
flex: 1 1 100%;
justify-content: space-around;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(14):empty {
display: none !important;
}
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(14) a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
font-size: 18px;
color: #3276b1;
}
/* THE FILTERS: the label row goes; ten filters stay, labelled */
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr:first-child {
display: none;
}
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form input,
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form select {
width: 100% !important;
min-width: 0 !important;
}
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(2),
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(3),
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(4),
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(5),
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(6),
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(7),
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(8),
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(9),
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(10),
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(11) {
display: block !important;
box-sizing: border-box;
flex: 1 1 50%;
max-width: 50% !important;
min-width: 0 !important;
width: auto !important;
padding: 0 3px 4px;
}
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(3) { order: 1; }
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(4) { order: 2; }
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(5) { order: 3; }
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(6) { order: 4; }
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(2) { order: 5; }
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(7) { order: 6; }
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(11) { order: 7; }
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(8) { order: 8; }
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(10) { order: 9; }
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(9) { order: 10; }
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(2)::before { content: 'תז / מספר חברה'; }
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(3)::before { content: 'שם משפחה'; }
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(4)::before { content: 'שם פרטי'; }
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(5)::before { content: 'Last Name'; }
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(6)::before { content: 'First Name'; }
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(7)::before { content: 'דרכון'; }
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(8)::before { content: 'מגדר'; }
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(9)::before { content: 'לקוח עסקי אחרון'; }
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(10)::before { content: 'עיר'; }
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(11)::before { content: 'מספר נוסף'; }
/* the city filter is an autocomplete widget; it is sized by its cell */
#main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(10) > * {
max-width: 100%;
}
#main #customer_list[st-service="ctrl.customersReportService"] {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #customer_list[st-service="ctrl.customersReportService"] > tfoot > tr,
#main #customer_list[st-service="ctrl.customersReportService"] > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
/* the `+` row the directive opens under a card */
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa !important;
}
#main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #customer_list[st-service="ctrl.customersReportService"] .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
html[lang="en"] #main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(2)::before { content: 'Id Number: '; }
html[lang="en"] #main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(7)::before { content: 'Passports: '; }
html[lang="en"] #main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(11)::before { content: 'Mobile Number: '; }
html[lang="en"] #main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(12)::before { content: 'Birth Date: '; }
html[lang="en"] #main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(10)::before { content: 'City: '; }
html[lang="en"] #main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(9)::before { content: 'Last Business Client: '; }
html[lang="en"] #main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(13)::before { content: 'Balance'; }
html[lang="en"] #main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(2)::before { content: 'Id Number'; }
html[lang="en"] #main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(3)::before { content: 'Last Name'; }
html[lang="en"] #main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(4)::before { content: 'First Name'; }
html[lang="en"] #main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(7)::before { content: 'Passports'; }
html[lang="en"] #main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(8)::before { content: 'Gender'; }
html[lang="en"] #main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(9)::before { content: 'Last Business Client'; }
html[lang="en"] #main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(10)::before { content: 'City'; }
html[lang="en"] #main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(11)::before { content: 'Mobile Number'; }
html[lang="ru"] #main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(2)::before { content: 'Идентификационный номер: '; }
html[lang="ru"] #main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(7)::before { content: 'Номер паспорта: '; }
html[lang="ru"] #main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(11)::before { content: 'Мобильный номер: '; }
html[lang="ru"] #main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(12)::before { content: 'Дата рождения: '; }
html[lang="ru"] #main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(10)::before { content: 'Город: '; }
html[lang="ru"] #main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(9)::before { content: 'Последний бизнес-клиент: '; }
html[lang="ru"] #main #customer_list[st-service="ctrl.customersReportService"] > tbody > tr > td:nth-child(13)::before { content: 'Баланс'; }
html[lang="ru"] #main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(2)::before { content: 'Идентификационный номер'; }
html[lang="ru"] #main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(3)::before { content: 'Фамилия'; }
html[lang="ru"] #main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(4)::before { content: 'Имя'; }
html[lang="ru"] #main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(5)::before { content: 'Фамилия (лат.)'; }
html[lang="ru"] #main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(6)::before { content: 'Имя (лат.)'; }
html[lang="ru"] #main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(7)::before { content: 'Номер паспорта'; }
html[lang="ru"] #main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(8)::before { content: 'Пол'; }
html[lang="ru"] #main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(9)::before { content: 'Последний бизнес-клиент'; }
html[lang="ru"] #main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(10)::before { content: 'Город'; }
html[lang="ru"] #main #customer_list[st-service="ctrl.customersReportService"] > thead > tr.smart-form > th:nth-child(11)::before { content: 'Мобильный номер'; }
/* ---------------------------------------------------------------------------
13r. THE BUSINESS CUSTOMER LIST BECOMES CARDS
`#users` under app.customers.agents (/customers/business — an id five
grids share; pinned by `st-service`): eleven fixed columns. Each row:
line 1 row number · NAME (bold) · enabled / disabled label
line 2 email
line 3 phone · department
line 4 accounting code · user code
line 5 two tiles: obligo 1 · obligo 2
line 6 edit · delete, 44px each
11 cells 1 row number · 2 name · 3 email · 4 accounting code · 5 user
code · 6 obligo 1 · 7 obligo 2 · 8 phone · 9 department
10 enabled · 11 actions
THE FILTERS STAY: six of the eight (the two obligo ranges left out).
--------------------------------------------------------------------------- */
#main #users[st-service="agentListController.agentsService"],
#main #users[st-service="agentListController.agentsService"] > thead,
#main #users[st-service="agentListController.agentsService"] > tbody,
#main #users[st-service="agentListController.agentsService"] > tfoot {
display: block !important;
}
#main #users[st-service="agentListController.agentsService"] > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start !important;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
color: #999;
}
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(2) {
order: 2;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(10) {
order: 3;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-start: 6px;
line-height: 21px;
}
#main #users[st-service="agentListController.agentsService"] > tbody > tr::after {
content: '';
display: block;
order: 4;
flex: 1 0 100%;
height: 0;
}
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(3) { order: 5; flex: 1 1 100%; }
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(8) { order: 6; flex: 1 1 50%; }
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(9) { order: 7; flex: 1 1 50%; }
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(4) { order: 8; flex: 1 1 50%; }
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(5) { order: 9; flex: 1 1 50%; }
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(3),
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(8),
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(9),
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(4),
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(5) {
padding-top: 3px;
padding-inline-end: 6px;
direction: inherit !important; /* the theme's ltr-important; the label is Hebrew */
word-break: break-word;
}
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(3)::before { content: 'דוא"ל: '; color: #666; }
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(8)::before { content: 'מספר טלפון: '; color: #666; }
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(9)::before { content: 'מחלקה: '; color: #666; }
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(4)::before { content: 'קוד הנה״ח: '; color: #666; }
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(5)::before { content: 'קוד משתמש: '; color: #666; }
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(3):empty::after,
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(8):empty::after,
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(9):empty::after,
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(4):empty::after,
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(5):empty::after {
content: '—';
color: #777;
}
/* line 5 — the two obligo tiles */
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(6),
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(7) {
flex: 1 1 50%;
align-self: stretch;
margin-top: 8px;
padding: 4px 3px 5px;
background: #f2f4f7 !important;
text-align: center !important;
font-size: 13px;
font-weight: 700;
line-height: 1.25;
color: #333;
white-space: nowrap;
direction: ltr;
unicode-bidi: isolate;
}
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(6) { order: 10; border-start-start-radius: 6px; border-end-start-radius: 6px; }
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(7) { order: 11; border-inline-start: 1px solid #fff !important; border-start-end-radius: 6px; border-end-end-radius: 6px; }
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(6)::before,
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(7)::before {
display: block;
margin-bottom: 1px;
font-size: 11px;
font-weight: 400;
line-height: 1.2;
color: #666;
direction: rtl;
}
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(6)::before { content: 'אובליגו 1'; }
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(7)::before { content: 'אובליגו 2'; }
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(6):empty::after,
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(7):empty::after {
content: '—';
color: #777;
}
/* line 6 — edit and delete as 44px targets */
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(11) {
display: flex !important;
order: 12;
flex: 1 1 100%;
justify-content: space-around;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(11) a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
font-size: 18px;
color: #3276b1;
}
/* THE FILTERS: the label row goes; six filters stay, labelled */
#main #users[st-service="agentListController.agentsService"] > thead > tr:first-child {
display: none;
}
#main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form input,
#main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form select {
width: 100% !important;
min-width: 0 !important;
}
#main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(2),
#main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(3),
#main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(4),
#main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(5),
#main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(9),
#main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(10) {
display: block !important;
box-sizing: border-box;
flex: 1 1 50%;
max-width: 50% !important;
min-width: 0 !important;
width: auto !important;
padding: 0 3px 4px;
}
#main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(2),
#main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(3) {
flex: 1 1 100%;
max-width: none !important;
}
#main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(2)::before { content: 'שם'; }
#main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(3)::before { content: 'דוא"ל'; }
#main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(4)::before { content: 'קוד הנה״ח'; }
#main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(5)::before { content: 'קוד משתמש'; }
#main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(9)::before { content: 'מחלקה'; }
#main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(10)::before { content: 'פעיל'; }
#main #users[st-service="agentListController.agentsService"] {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #users[st-service="agentListController.agentsService"] > tfoot > tr,
#main #users[st-service="agentListController.agentsService"] > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
/* the `+` row the directive opens under a card */
#main #users[st-service="agentListController.agentsService"] > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa !important;
}
#main #users[st-service="agentListController.agentsService"] > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #users[st-service="agentListController.agentsService"] .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
html[lang="en"] #main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(3)::before { content: 'Email: '; }
html[lang="en"] #main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(8)::before { content: 'Phone Number: '; }
html[lang="en"] #main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(9)::before { content: 'Department: '; }
html[lang="en"] #main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(4)::before { content: 'Accounting code: '; }
html[lang="en"] #main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(5)::before { content: 'User Code: '; }
html[lang="en"] #main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(6)::before { content: 'Obligo 1'; }
html[lang="en"] #main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(7)::before { content: 'Obligo 2'; }
html[lang="en"] #main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(2)::before { content: 'Business Client name'; }
html[lang="en"] #main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(3)::before { content: 'Email'; }
html[lang="en"] #main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(4)::before { content: 'Accounting code'; }
html[lang="en"] #main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(5)::before { content: 'User Code'; }
html[lang="en"] #main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(9)::before { content: 'Department'; }
html[lang="en"] #main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(10)::before { content: 'Enabled'; }
html[lang="ru"] #main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(3)::before { content: 'Эл.адрес: '; }
html[lang="ru"] #main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(8)::before { content: 'Номер телефона: '; }
html[lang="ru"] #main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(9)::before { content: 'Отделы: '; }
html[lang="ru"] #main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(4)::before { content: 'Код бухгалтерии: '; }
html[lang="ru"] #main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(5)::before { content: 'Код пользователя: '; }
html[lang="ru"] #main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(6)::before { content: 'Облиго 1'; }
html[lang="ru"] #main #users[st-service="agentListController.agentsService"] > tbody > tr > td:nth-child(7)::before { content: 'Облиго 2'; }
html[lang="ru"] #main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(2)::before { content: 'Имя бизнес-клиента'; }
html[lang="ru"] #main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(3)::before { content: 'Эл.адрес'; }
html[lang="ru"] #main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(4)::before { content: 'Код бухгалтерии'; }
html[lang="ru"] #main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(5)::before { content: 'Код пользователя'; }
html[lang="ru"] #main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(9)::before { content: 'Отделы'; }
html[lang="ru"] #main #users[st-service="agentListController.agentsService"] > thead > tr.smart-form > th:nth-child(10)::before { content: 'Активен'; }
/* ---------------------------------------------------------------------------
13s. BOOKKEEPING TRANSACTIONS BECOME CARDS
`#bookkeepingTransactions` under app.accounting.bookkeepingTransactions
.transactions: eighteen fixed columns, the accounting audit grid. Each
row:
line 1 select · row number · TYPE (bold) · command (badge)
line 2 debit · credit
line 3 currency · rate
line 4 export id
line 5 two tiles: amount (foreign) · total NIS
line 6 create date · value date
line 7 three references, each its label over its value
line 8 project
line 9 details
18 cells 1 select · 2 row number · 3 export id · 4 type · 5 command
6 debit · 7 credit · 8 currency · 9 rate · 10 amount · 11 total
NIS · 12 create date · 13 value date · 14 reference 1
15 reference 2 · 16 reference 3 · 17 project · 18 details
THE FILTERS STAY: eleven of the sixteen (the three numeric ranges and
the two date ranges left out), two to a line.
--------------------------------------------------------------------------- */
#main #bookkeepingTransactions,
#main #bookkeepingTransactions > thead,
#main #bookkeepingTransactions > tbody,
#main #bookkeepingTransactions > tfoot {
display: block !important;
}
#main #bookkeepingTransactions > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #bookkeepingTransactions > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start !important;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #bookkeepingTransactions > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
}
#main #bookkeepingTransactions > tbody > tr > td:nth-child(2) {
order: 2;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
color: #999;
}
#main #bookkeepingTransactions > tbody > tr > td:nth-child(4) {
order: 3;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #bookkeepingTransactions > tbody > tr > td:nth-child(5) {
order: 4;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-start: 6px;
padding: 1px 6px;
border-radius: 3px;
background: #e9ecef !important;
font-size: 11px;
line-height: 19px;
color: #555;
white-space: nowrap;
}
#main #bookkeepingTransactions > tbody > tr::after {
content: '';
display: block;
order: 5;
flex: 1 0 100%;
height: 0;
}
#main #bookkeepingTransactions > tbody > tr > td:nth-child(6) { order: 6; flex: 1 1 50%; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(7) { order: 7; flex: 1 1 50%; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(8) { order: 8; flex: 1 1 50%; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(9) { order: 9; flex: 1 1 50%; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(3) { order: 10; flex: 1 1 100%; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(6),
#main #bookkeepingTransactions > tbody > tr > td:nth-child(7),
#main #bookkeepingTransactions > tbody > tr > td:nth-child(8),
#main #bookkeepingTransactions > tbody > tr > td:nth-child(9),
#main #bookkeepingTransactions > tbody > tr > td:nth-child(3) {
padding-top: 3px;
padding-inline-end: 6px;
word-break: break-word;
}
#main #bookkeepingTransactions > tbody > tr > td:nth-child(6)::before { content: 'חובה: '; color: #666; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(7)::before { content: 'זכות: '; color: #666; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(8)::before { content: 'מטבע: '; color: #666; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(9)::before { content: 'שער: '; color: #666; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(3)::before { content: 'מס ייצוא: '; color: #666; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(8):empty::after,
#main #bookkeepingTransactions > tbody > tr > td:nth-child(9):empty::after,
#main #bookkeepingTransactions > tbody > tr > td:nth-child(3):empty::after {
content: '—';
color: #777;
}
/* line 5 — the money */
#main #bookkeepingTransactions > tbody > tr > td:nth-child(10),
#main #bookkeepingTransactions > tbody > tr > td:nth-child(11) {
flex: 1 1 50%;
align-self: stretch;
margin-top: 8px;
padding: 4px 3px 5px;
background: #f2f4f7 !important;
text-align: center !important;
font-size: 13px;
font-weight: 700;
line-height: 1.25;
color: #333;
white-space: nowrap;
direction: ltr;
unicode-bidi: isolate;
}
#main #bookkeepingTransactions > tbody > tr > td:nth-child(10) { order: 11; border-start-start-radius: 6px; border-end-start-radius: 6px; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(11) { order: 12; border-inline-start: 1px solid #fff !important; border-start-end-radius: 6px; border-end-end-radius: 6px; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(10)::before,
#main #bookkeepingTransactions > tbody > tr > td:nth-child(11)::before {
display: block;
margin-bottom: 1px;
font-size: 11px;
font-weight: 400;
line-height: 1.2;
color: #666;
direction: rtl;
}
#main #bookkeepingTransactions > tbody > tr > td:nth-child(10)::before { content: 'סכום מטח'; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(11)::before { content: 'סה"כ שקלים'; }
/* line 6 — the dates */
#main #bookkeepingTransactions > tbody > tr > td:nth-child(12) { order: 13; flex: 1 1 50%; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(13) { order: 14; flex: 1 1 50%; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(12),
#main #bookkeepingTransactions > tbody > tr > td:nth-child(13) {
padding-top: 6px;
padding-inline-end: 6px;
}
#main #bookkeepingTransactions > tbody > tr > td:nth-child(12)::before { content: 'תאריך יצירה: '; color: #666; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(13)::before { content: 'תאריך ערך: '; color: #666; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(12):empty::after,
#main #bookkeepingTransactions > tbody > tr > td:nth-child(13):empty::after {
content: '—';
color: #777;
}
/* line 7 — the three references, each its label over its value */
#main #bookkeepingTransactions > tbody > tr > td:nth-child(14) { order: 15; flex: 1 1 33%; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(15) { order: 16; flex: 1 1 33%; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(16) { order: 17; flex: 1 1 34%; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(14),
#main #bookkeepingTransactions > tbody > tr > td:nth-child(15),
#main #bookkeepingTransactions > tbody > tr > td:nth-child(16) {
align-self: flex-start;
padding: 5px 3px 0 0;
overflow-wrap: anywhere;
}
#main #bookkeepingTransactions > tbody > tr > td:nth-child(14)::before,
#main #bookkeepingTransactions > tbody > tr > td:nth-child(15)::before,
#main #bookkeepingTransactions > tbody > tr > td:nth-child(16)::before {
display: block;
font-size: 11px;
line-height: 1.2;
color: #666;
}
#main #bookkeepingTransactions > tbody > tr > td:nth-child(14)::before { content: 'אסמכתא 1'; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(15)::before { content: 'אסמכתא 2'; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(16)::before { content: 'אסמכתא 3'; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(14):empty::after,
#main #bookkeepingTransactions > tbody > tr > td:nth-child(15):empty::after,
#main #bookkeepingTransactions > tbody > tr > td:nth-child(16):empty::after {
content: '—';
color: #777;
}
/* lines 8 and 9 — project and details */
#main #bookkeepingTransactions > tbody > tr > td:nth-child(17) { order: 18; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(18) { order: 19; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(17),
#main #bookkeepingTransactions > tbody > tr > td:nth-child(18) {
flex: 1 1 100%;
padding-top: 5px;
word-break: break-word;
}
#main #bookkeepingTransactions > tbody > tr > td:nth-child(17)::before { content: 'פרוייקט: '; color: #666; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(18)::before { content: 'פרטים: '; color: #666; }
#main #bookkeepingTransactions > tbody > tr > td:nth-child(17):empty::after,
#main #bookkeepingTransactions > tbody > tr > td:nth-child(18):empty::after {
content: '—';
color: #777;
}
/* THE FILTERS: the label row goes; eleven filters stay, labelled */
#main #bookkeepingTransactions > thead > tr:first-child {
display: none;
}
#main #bookkeepingTransactions > thead > tr.smart-form {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #bookkeepingTransactions > thead > tr.smart-form > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #bookkeepingTransactions > thead > tr.smart-form > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #bookkeepingTransactions > thead > tr.smart-form input,
#main #bookkeepingTransactions > thead > tr.smart-form select {
width: 100% !important;
min-width: 0 !important;
}
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(3),
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(4),
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(5),
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(6),
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(7),
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(8),
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(14),
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(15),
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(16),
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(17),
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(18) {
display: block !important;
box-sizing: border-box;
flex: 1 1 50%;
max-width: 50% !important;
min-width: 0 !important;
width: auto !important;
padding: 0 3px 4px;
}
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(4),
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(18) {
flex: 1 1 100%;
max-width: none !important;
}
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(3)::before { content: 'מס ייצוא'; }
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(4)::before { content: 'סוג'; }
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(5)::before { content: 'פעולה'; }
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(6)::before { content: 'חובה'; }
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(7)::before { content: 'זכות'; }
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(8)::before { content: 'מטבע'; }
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(14)::before { content: 'אסמכתא 1'; }
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(15)::before { content: 'אסמכתא 2'; }
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(16)::before { content: 'אסמכתא 3'; }
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(17)::before { content: 'פרוייקט'; }
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(18)::before { content: 'פרטים'; }
/* the type filter is a ui-select; it takes its cell's width */
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(4) .ui-select-container,
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(4) .ui-select-match,
#main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(4) .select2-container {
width: 100% !important;
max-width: 100%;
}
#main #bookkeepingTransactions {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #bookkeepingTransactions > tfoot > tr,
#main #bookkeepingTransactions > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
/* the `+` row the directive opens under a card */
#main #bookkeepingTransactions > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa !important;
}
#main #bookkeepingTransactions > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #bookkeepingTransactions .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
html[lang="en"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(6)::before { content: 'Debit: '; }
html[lang="en"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(7)::before { content: 'Credit: '; }
html[lang="en"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(8)::before { content: 'Currency: '; }
html[lang="en"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(9)::before { content: 'Rate: '; }
html[lang="en"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(3)::before { content: 'Export ID: '; }
html[lang="en"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(10)::before { content: 'Amount'; }
html[lang="en"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(11)::before { content: 'Total Nis'; }
html[lang="en"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(12)::before { content: 'Create Date: '; }
html[lang="en"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(13)::before { content: 'Value Date: '; }
html[lang="en"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(14)::before { content: 'Document Number'; }
html[lang="en"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(15)::before { content: 'Connected With'; }
html[lang="en"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(16)::before { content: 'Reference 3'; }
html[lang="en"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(17)::before { content: 'Project: '; }
html[lang="en"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(18)::before { content: 'Details: '; }
html[lang="en"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(3)::before { content: 'Export ID'; }
html[lang="en"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(4)::before { content: 'Type'; }
html[lang="en"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(5)::before { content: 'Command'; }
html[lang="en"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(6)::before { content: 'Debit'; }
html[lang="en"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(7)::before { content: 'Credit'; }
html[lang="en"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(8)::before { content: 'Currency'; }
html[lang="en"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(14)::before { content: 'Document Number'; }
html[lang="en"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(15)::before { content: 'Connected With'; }
html[lang="en"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(16)::before { content: 'Reference 3'; }
html[lang="en"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(17)::before { content: 'Project'; }
html[lang="en"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(18)::before { content: 'Details'; }
html[lang="ru"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(6)::before { content: 'Дебет: '; }
html[lang="ru"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(7)::before { content: 'Кредит: '; }
html[lang="ru"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(8)::before { content: 'Валюта: '; }
html[lang="ru"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(9)::before { content: 'Курс: '; }
html[lang="ru"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(3)::before { content: 'Экспорт ID: '; }
html[lang="ru"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(10)::before { content: 'Сумма'; }
html[lang="ru"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(11)::before { content: 'Всего шекелей'; }
html[lang="ru"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(12)::before { content: 'Дата создания: '; }
html[lang="ru"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(13)::before { content: 'Дата валютирования: '; }
html[lang="ru"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(14)::before { content: 'Номер документа'; }
html[lang="ru"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(15)::before { content: 'Связано с'; }
html[lang="ru"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(16)::before { content: 'Справка 3'; }
html[lang="ru"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(17)::before { content: 'Проект: '; }
html[lang="ru"] #main #bookkeepingTransactions > tbody > tr > td:nth-child(18)::before { content: 'Подробности: '; }
html[lang="ru"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(3)::before { content: 'Экспорт ID'; }
html[lang="ru"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(4)::before { content: 'Тип'; }
html[lang="ru"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(5)::before { content: 'Команда'; }
html[lang="ru"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(6)::before { content: 'Дебет'; }
html[lang="ru"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(7)::before { content: 'Кредит'; }
html[lang="ru"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(8)::before { content: 'Валюта'; }
html[lang="ru"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(14)::before { content: 'Номер документа'; }
html[lang="ru"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(15)::before { content: 'Связано с'; }
html[lang="ru"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(16)::before { content: 'Справка 3'; }
html[lang="ru"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(17)::before { content: 'Проект'; }
html[lang="ru"] #main #bookkeepingTransactions > thead > tr.smart-form > th:nth-child(18)::before { content: 'Подробности'; }
/* ---------------------------------------------------------------------------
13t. THE REPORT LIST BECOMES CARDS
`#reports-list-table` under app.reports: eight fixed columns — the
generated reports, each with its parameters behind a dropdown and its
download / e-mail / delete links. Each row:
line 1 row number · TYPE (bold) · status (badge)
line 2 generated at · created by
line 3 comments
line 4 the parameters dropdown, full width
line 5 download · e-mail · delete (or "no data"), 44px each
8 cells 1 row number · 2 type · 3 generated at · 4 created by
5 comments · 6 parameters · 7 status · 8 actions
--------------------------------------------------------------------------- */
#main #reports-list-table,
#main #reports-list-table > thead,
#main #reports-list-table > tbody,
#main #reports-list-table > tfoot {
display: block !important;
}
#main #reports-list-table > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #reports-list-table > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start !important;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #reports-list-table > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
color: #999;
}
#main #reports-list-table > tbody > tr > td:nth-child(2) {
order: 2;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #reports-list-table > tbody > tr > td:nth-child(7) {
order: 3;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-start: 6px;
padding: 1px 6px;
border-radius: 3px;
background: #e9ecef !important;
font-size: 11px;
line-height: 19px;
color: #555;
white-space: nowrap;
}
#main #reports-list-table > tbody > tr::after {
content: '';
display: block;
order: 4;
flex: 1 0 100%;
height: 0;
}
#main #reports-list-table > tbody > tr > td:nth-child(3) { order: 5; flex: 1 1 50%; }
#main #reports-list-table > tbody > tr > td:nth-child(4) { order: 6; flex: 1 1 50%; }
#main #reports-list-table > tbody > tr > td:nth-child(5) { order: 7; flex: 1 1 100%; }
#main #reports-list-table > tbody > tr > td:nth-child(3),
#main #reports-list-table > tbody > tr > td:nth-child(4),
#main #reports-list-table > tbody > tr > td:nth-child(5) {
padding-top: 3px;
padding-inline-end: 6px;
word-break: break-word;
}
#main #reports-list-table > tbody > tr > td:nth-child(3)::before { content: 'תאריך יצירה: '; color: #666; }
#main #reports-list-table > tbody > tr > td:nth-child(4)::before { content: 'נוצר ע"י: '; color: #666; }
#main #reports-list-table > tbody > tr > td:nth-child(5)::before { content: 'הערות: '; color: #666; }
#main #reports-list-table > tbody > tr > td:nth-child(3):empty::after,
#main #reports-list-table > tbody > tr > td:nth-child(4):empty::after,
#main #reports-list-table > tbody > tr > td:nth-child(5):empty::after {
content: '—';
color: #777;
}
/* line 4 — the parameters dropdown, full width; the template makes the
cell `overflow: inherit` inline so the menu can open below it */
#main #reports-list-table > tbody > tr > td:nth-child(6) {
order: 8;
flex: 1 1 100%;
margin-top: 6px;
}
#main #reports-list-table > tbody > tr > td:nth-child(6):empty,
#main #reports-list-table > tbody > tr > td:nth-child(6):not(:has(.btn-group)) {
display: none !important;
}
#main #reports-list-table > tbody > tr > td:nth-child(6) .btn-group,
#main #reports-list-table > tbody > tr > td:nth-child(6) .btn-group > .btn {
display: block;
width: 100%;
}
#main #reports-list-table > tbody > tr > td:nth-child(6) .btn-group > .btn {
min-height: 44px;
white-space: normal;
}
#main #reports-list-table > tbody > tr > td:nth-child(6) .dropdown-menu {
position: static;
float: none;
display: none;
width: 100%;
max-width: 100%;
margin-top: 2px;
box-shadow: none;
}
#main #reports-list-table > tbody > tr > td:nth-child(6) .btn-group.open .dropdown-menu {
display: block;
}
#main #reports-list-table > tbody > tr > td:nth-child(6) .dropdown-menu > li > a {
white-space: normal;
word-break: break-word;
padding: 6px 12px;
}
/* line 5 — the actions as 44px targets; "no data" as text */
#main #reports-list-table > tbody > tr > td:nth-child(8) {
display: flex !important;
order: 9;
flex: 1 1 100%;
align-items: center;
justify-content: space-around;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #reports-list-table > tbody > tr > td:nth-child(8) a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
font-size: 18px;
color: #3276b1;
}
#main #reports-list-table > tbody > tr > td:nth-child(8) > span {
line-height: 44px;
color: #777;
}
/* THE HEADER: one label row and no filters — it goes */
#main #reports-list-table > thead {
display: none !important;
}
#main #reports-list-table {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #reports-list-table > tfoot > tr,
#main #reports-list-table > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
/* the `+` row the directive opens under a card */
#main #reports-list-table > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa !important;
}
#main #reports-list-table > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #reports-list-table .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
html[lang="en"] #main #reports-list-table > tbody > tr > td:nth-child(3)::before { content: 'Generated at: '; }
html[lang="en"] #main #reports-list-table > tbody > tr > td:nth-child(4)::before { content: 'Created by: '; }
html[lang="en"] #main #reports-list-table > tbody > tr > td:nth-child(5)::before { content: 'Comments: '; }
html[lang="ru"] #main #reports-list-table > tbody > tr > td:nth-child(3)::before { content: 'Создано в: '; }
html[lang="ru"] #main #reports-list-table > tbody > tr > td:nth-child(4)::before { content: 'Создано: '; }
html[lang="ru"] #main #reports-list-table > tbody > tr > td:nth-child(5)::before { content: 'Комментарии: '; }
/* ---------------------------------------------------------------------------
13u. SUPPLIERS (SETTINGS) — CARDS
app.settings.suppliers: ten fixed columns on the shared `project_list` id, pinned by st-table.
id · NAME · code; manager; commission type · rate; value-date plan; two commission tiles; edit · delete.
--------------------------------------------------------------------------- */
#main #project_list[st-table="suppliers"],
#main #project_list[st-table="suppliers"] > thead,
#main #project_list[st-table="suppliers"] > tbody,
#main #project_list[st-table="suppliers"] > tfoot {
display: block !important;
}
#main #project_list[st-table="suppliers"] > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #project_list[st-table="suppliers"] > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start !important;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
color: #999;
}
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(2) {
order: 2;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(3) {
order: 3;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-start: 6px;
margin-inline-end: 6px;
padding: 1px 6px;
border-radius: 3px;
background: #e9ecef !important;
font-size: 11px;
line-height: 19px;
color: #555;
white-space: nowrap;
}
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(3):empty {
display: none !important;
}
#main #project_list[st-table="suppliers"] > tbody > tr::after {
content: '';
display: block;
order: 4;
flex: 1 0 100%;
height: 0;
}
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(4) { order: 5; flex: 1 1 100%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(4)::before { content: 'משתמש מנהל: '; color: #666; }
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(4):empty::after { content: '\2014'; color: #777; }
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(5) { order: 6; flex: 1 1 60%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(5)::before { content: 'סוג עמלה: '; color: #666; }
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(5):empty::after { content: '\2014'; color: #777; }
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(6) { order: 7; flex: 1 1 40%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(6)::before { content: 'עמלת מכרטס: '; color: #666; }
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(6):empty::after { content: '\2014'; color: #777; }
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(7) { order: 8; flex: 1 1 100%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(7)::before { content: 'תוכנית תשלום: '; color: #666; }
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(7):empty::after { content: '\2014'; color: #777; }
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(8),
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(9) {
flex: 1 1 50%;
align-self: stretch;
margin-top: 8px;
padding: 4px 3px 5px;
background: #f2f4f7 !important;
text-align: center !important;
font-size: 13px;
font-weight: 700;
line-height: 1.25;
color: #333;
white-space: nowrap;
direction: ltr;
unicode-bidi: isolate;
}
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(8)::before,
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(9)::before {
display: block;
margin-bottom: 1px;
font-size: 11px;
font-weight: 400;
line-height: 1.2;
color: #666;
direction: rtl;
white-space: normal;
}
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(8) { order: 9; border-start-start-radius: 6px; border-end-start-radius: 6px; }
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(8)::before { content: 'עמלה על טיסות'; }
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(8):empty::after { content: '\2014'; color: #777; }
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(9) { order: 10; border-start-end-radius: 6px; border-end-end-radius: 6px; border-inline-start: 1px solid #fff !important; }
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(9)::before { content: 'עמלה על שירותים'; }
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(9):empty::after { content: '\2014'; color: #777; }
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(10) {
display: flex !important;
order: 11;
flex: 1 1 100%;
align-items: center;
justify-content: space-around;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(10):empty {
display: none !important;
}
#main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(10) a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 10px;
font-size: 18px;
color: #3276b1;
white-space: nowrap;
}
#main #project_list[st-table="suppliers"] > thead > tr:first-child {
display: none;
}
#main #project_list[st-table="suppliers"] > thead > tr.smart-form {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #project_list[st-table="suppliers"] > thead > tr.smart-form > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #project_list[st-table="suppliers"] > thead > tr.smart-form > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #project_list[st-table="suppliers"] > thead > tr.smart-form input,
#main #project_list[st-table="suppliers"] > thead > tr.smart-form select {
width: 100% !important;
min-width: 0 !important;
}
#main #project_list[st-table="suppliers"] > thead > tr.smart-form > th:nth-child(2) { display: block !important; box-sizing: border-box; flex: 1 1 60%; max-width: 60% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="suppliers"] > thead > tr.smart-form > th:nth-child(2)::before { content: 'שם הספק'; }
#main #project_list[st-table="suppliers"] > thead > tr.smart-form > th:nth-child(3) { display: block !important; box-sizing: border-box; flex: 1 1 40%; max-width: 40% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="suppliers"] > thead > tr.smart-form > th:nth-child(3)::before { content: 'קוד'; }
#main #project_list[st-table="suppliers"] {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #project_list[st-table="suppliers"] > tfoot > tr,
#main #project_list[st-table="suppliers"] > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
#main #project_list[st-table="suppliers"] > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa !important;
}
#main #project_list[st-table="suppliers"] > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #project_list[st-table="suppliers"] .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
html[lang="en"] #main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(4)::before { content: 'User Manager: '; }
html[lang="en"] #main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(5)::before { content: 'Commission type: '; }
html[lang="en"] #main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(6)::before { content: 'Commission: '; }
html[lang="en"] #main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(7)::before { content: 'Value date strategy: '; }
html[lang="en"] #main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(8)::before { content: 'Commission on flights'; }
html[lang="en"] #main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(9)::before { content: 'Commission on services'; }
html[lang="en"] #main #project_list[st-table="suppliers"] > thead > tr.smart-form > th:nth-child(2)::before { content: 'Supplier Name'; }
html[lang="en"] #main #project_list[st-table="suppliers"] > thead > tr.smart-form > th:nth-child(3)::before { content: 'Code'; }
html[lang="ru"] #main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(4)::before { content: 'Менеджер пользователей: '; }
html[lang="ru"] #main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(5)::before { content: 'Тип комиссии: '; }
html[lang="ru"] #main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(6)::before { content: 'Комиссия: '; }
html[lang="ru"] #main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(7)::before { content: 'Стратегия даты валютирования: '; }
html[lang="ru"] #main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(8)::before { content: 'Комиссия на рейсы'; }
html[lang="ru"] #main #project_list[st-table="suppliers"] > tbody > tr > td:nth-child(9)::before { content: 'Комиссия on сервисы'; }
html[lang="ru"] #main #project_list[st-table="suppliers"] > thead > tr.smart-form > th:nth-child(2)::before { content: 'Наименование поставщика'; }
html[lang="ru"] #main #project_list[st-table="suppliers"] > thead > tr.smart-form > th:nth-child(3)::before { content: 'Код'; }
/* ---------------------------------------------------------------------------
13v. AIRPORTS (SETTINGS) — CARDS
app.settings.airport: seven fixed columns. id · HEBREW NAME · code; the Latin name; city · country; edit · delete.
The filter inputs carry placeholders, so they stay unlabelled.
--------------------------------------------------------------------------- */
#main #project_list[st-table="airports"],
#main #project_list[st-table="airports"] > thead,
#main #project_list[st-table="airports"] > tbody,
#main #project_list[st-table="airports"] > tfoot {
display: block !important;
}
#main #project_list[st-table="airports"] > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #project_list[st-table="airports"] > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start !important;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #project_list[st-table="airports"] > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
color: #999;
}
#main #project_list[st-table="airports"] > tbody > tr > td:nth-child(2) {
order: 2;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #project_list[st-table="airports"] > tbody > tr > td:nth-child(4) {
order: 3;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-start: 6px;
margin-inline-end: 6px;
padding: 1px 6px;
border-radius: 3px;
background: #e9ecef !important;
font-size: 11px;
line-height: 19px;
color: #555;
white-space: nowrap;
}
#main #project_list[st-table="airports"] > tbody > tr > td:nth-child(4):empty {
display: none !important;
}
#main #project_list[st-table="airports"] > tbody > tr::after {
content: '';
display: block;
order: 4;
flex: 1 0 100%;
height: 0;
}
#main #project_list[st-table="airports"] > tbody > tr > td:nth-child(3) {
order: 5;
flex: 1 1 100%;
direction: ltr;
unicode-bidi: isolate;
text-align: end !important;
color: #777;
word-break: break-word;
}
#main #project_list[st-table="airports"] > tbody > tr > td:nth-child(3):empty {
display: none !important;
}
#main #project_list[st-table="airports"] > tbody > tr > td:nth-child(5) { order: 6; flex: 1 1 50%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #project_list[st-table="airports"] > tbody > tr > td:nth-child(5)::before { content: 'עיר: '; color: #666; }
#main #project_list[st-table="airports"] > tbody > tr > td:nth-child(5):empty::after { content: '\2014'; color: #777; }
#main #project_list[st-table="airports"] > tbody > tr > td:nth-child(6) { order: 7; flex: 1 1 50%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #project_list[st-table="airports"] > tbody > tr > td:nth-child(6)::before { content: 'מדינה: '; color: #666; }
#main #project_list[st-table="airports"] > tbody > tr > td:nth-child(6):empty::after { content: '\2014'; color: #777; }
#main #project_list[st-table="airports"] > tbody > tr > td:nth-child(7) {
display: flex !important;
order: 8;
flex: 1 1 100%;
align-items: center;
justify-content: space-around;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #project_list[st-table="airports"] > tbody > tr > td:nth-child(7):empty {
display: none !important;
}
#main #project_list[st-table="airports"] > tbody > tr > td:nth-child(7) a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 10px;
font-size: 18px;
color: #3276b1;
white-space: nowrap;
}
#main #project_list[st-table="airports"] > thead > tr:first-child {
display: none;
}
#main #project_list[st-table="airports"] > thead > tr:nth-child(2) {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #project_list[st-table="airports"] > thead > tr:nth-child(2) > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #project_list[st-table="airports"] > thead > tr:nth-child(2) > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #project_list[st-table="airports"] > thead > tr:nth-child(2) input,
#main #project_list[st-table="airports"] > thead > tr:nth-child(2) select {
width: 100% !important;
min-width: 0 !important;
}
#main #project_list[st-table="airports"] > thead > tr:nth-child(2) > th:nth-child(2) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="airports"] > thead > tr:nth-child(2) > th:nth-child(3) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="airports"] > thead > tr:nth-child(2) > th:nth-child(4) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="airports"] > thead > tr:nth-child(2) > th:nth-child(5) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="airports"] > thead > tr:nth-child(2) > th:nth-child(6) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="airports"] {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #project_list[st-table="airports"] > tfoot > tr,
#main #project_list[st-table="airports"] > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
#main #project_list[st-table="airports"] > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa !important;
}
#main #project_list[st-table="airports"] > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #project_list[st-table="airports"] .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
html[lang="en"] #main #project_list[st-table="airports"] > tbody > tr > td:nth-child(5)::before { content: 'City: '; }
html[lang="en"] #main #project_list[st-table="airports"] > tbody > tr > td:nth-child(6)::before { content: 'Israel: '; }
html[lang="ru"] #main #project_list[st-table="airports"] > tbody > tr > td:nth-child(5)::before { content: 'Город: '; }
html[lang="ru"] #main #project_list[st-table="airports"] > tbody > tr > td:nth-child(6)::before { content: 'Страна: '; }
/* ---------------------------------------------------------------------------
13w. AIRLINES (SETTINGS) — CARDS
app.settings.airlines: eight fixed columns. select · id · HEBREW NAME · code; the Latin name; commission · supplier; edit · delete.
--------------------------------------------------------------------------- */
#main #project_list[st-table="airlines"],
#main #project_list[st-table="airlines"] > thead,
#main #project_list[st-table="airlines"] > tbody,
#main #project_list[st-table="airlines"] > tfoot {
display: block !important;
}
#main #project_list[st-table="airlines"] > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #project_list[st-table="airlines"] > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start !important;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #project_list[st-table="airlines"] > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
}
#main #project_list[st-table="airlines"] > tbody > tr > td:nth-child(2) {
order: 2;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
color: #999;
}
#main #project_list[st-table="airlines"] > tbody > tr > td:nth-child(3) {
order: 3;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #project_list[st-table="airlines"] > tbody > tr > td:nth-child(5) {
order: 4;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-start: 6px;
margin-inline-end: 6px;
padding: 1px 6px;
border-radius: 3px;
background: #e9ecef !important;
font-size: 11px;
line-height: 19px;
color: #555;
white-space: nowrap;
}
#main #project_list[st-table="airlines"] > tbody > tr > td:nth-child(5):empty {
display: none !important;
}
#main #project_list[st-table="airlines"] > tbody > tr::after {
content: '';
display: block;
order: 5;
flex: 1 0 100%;
height: 0;
}
#main #project_list[st-table="airlines"] > tbody > tr > td:nth-child(4) {
order: 6;
flex: 1 1 100%;
direction: ltr;
unicode-bidi: isolate;
text-align: end !important;
color: #777;
word-break: break-word;
}
#main #project_list[st-table="airlines"] > tbody > tr > td:nth-child(4):empty {
display: none !important;
}
#main #project_list[st-table="airlines"] > tbody > tr > td:nth-child(6) { order: 7; flex: 1 1 40%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #project_list[st-table="airlines"] > tbody > tr > td:nth-child(6)::before { content: 'אחוז עמלה: '; color: #666; }
#main #project_list[st-table="airlines"] > tbody > tr > td:nth-child(6):empty::after { content: '\2014'; color: #777; }
#main #project_list[st-table="airlines"] > tbody > tr > td:nth-child(7) { order: 8; flex: 1 1 60%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #project_list[st-table="airlines"] > tbody > tr > td:nth-child(7)::before { content: 'ספק: '; color: #666; }
#main #project_list[st-table="airlines"] > tbody > tr > td:nth-child(7):empty::after { content: '\2014'; color: #777; }
#main #project_list[st-table="airlines"] > tbody > tr > td:nth-child(8) {
display: flex !important;
order: 9;
flex: 1 1 100%;
align-items: center;
justify-content: space-around;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #project_list[st-table="airlines"] > tbody > tr > td:nth-child(8):empty {
display: none !important;
}
#main #project_list[st-table="airlines"] > tbody > tr > td:nth-child(8) a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 10px;
font-size: 18px;
color: #3276b1;
white-space: nowrap;
}
#main #project_list[st-table="airlines"] > thead > tr:first-child {
display: none;
}
#main #project_list[st-table="airlines"] > thead > tr.smart-form {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #project_list[st-table="airlines"] > thead > tr.smart-form > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #project_list[st-table="airlines"] > thead > tr.smart-form > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #project_list[st-table="airlines"] > thead > tr.smart-form input,
#main #project_list[st-table="airlines"] > thead > tr.smart-form select {
width: 100% !important;
min-width: 0 !important;
}
#main #project_list[st-table="airlines"] > thead > tr.smart-form > th:nth-child(3) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="airlines"] > thead > tr.smart-form > th:nth-child(4) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="airlines"] > thead > tr.smart-form > th:nth-child(5) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="airlines"] > thead > tr.smart-form > th:nth-child(7) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="airlines"] > thead > tr.smart-form > th:nth-child(7)::before { content: 'ספק'; }
#main #project_list[st-table="airlines"] {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #project_list[st-table="airlines"] > tfoot > tr,
#main #project_list[st-table="airlines"] > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
#main #project_list[st-table="airlines"] > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa !important;
}
#main #project_list[st-table="airlines"] > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #project_list[st-table="airlines"] .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
html[lang="en"] #main #project_list[st-table="airlines"] > tbody > tr > td:nth-child(6)::before { content: 'Commission: '; }
html[lang="en"] #main #project_list[st-table="airlines"] > tbody > tr > td:nth-child(7)::before { content: 'Supplier: '; }
html[lang="en"] #main #project_list[st-table="airlines"] > thead > tr.smart-form > th:nth-child(7)::before { content: 'Supplier'; }
html[lang="ru"] #main #project_list[st-table="airlines"] > tbody > tr > td:nth-child(6)::before { content: 'Комиссия: '; }
html[lang="ru"] #main #project_list[st-table="airlines"] > tbody > tr > td:nth-child(7)::before { content: 'Поставщик: '; }
html[lang="ru"] #main #project_list[st-table="airlines"] > thead > tr.smart-form > th:nth-child(7)::before { content: 'Поставщик'; }
/* ---------------------------------------------------------------------------
13x. USERS (OFFICE SETTINGS) — CARDS
app.settings.officeSettings.users: seven fixed columns on the shared `users` id. id · USERNAME; e-mail; first · last name; current project; edit · delete.
--------------------------------------------------------------------------- */
#main #users[st-table="users"],
#main #users[st-table="users"] > thead,
#main #users[st-table="users"] > tbody,
#main #users[st-table="users"] > tfoot {
display: block !important;
}
#main #users[st-table="users"] > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #users[st-table="users"] > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start !important;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #users[st-table="users"] > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
color: #999;
}
#main #users[st-table="users"] > tbody > tr > td:nth-child(2) {
order: 2;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #users[st-table="users"] > tbody > tr::after {
content: '';
display: block;
order: 3;
flex: 1 0 100%;
height: 0;
}
#main #users[st-table="users"] > tbody > tr > td:nth-child(5) {
order: 4;
flex: 1 1 100%;
direction: ltr;
unicode-bidi: isolate;
text-align: end !important;
color: #777;
word-break: break-word;
}
#main #users[st-table="users"] > tbody > tr > td:nth-child(5):empty {
display: none !important;
}
#main #users[st-table="users"] > tbody > tr > td:nth-child(4) { order: 5; flex: 1 1 50%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #users[st-table="users"] > tbody > tr > td:nth-child(4)::before { content: 'שם פרטי: '; color: #666; }
#main #users[st-table="users"] > tbody > tr > td:nth-child(4):empty::after { content: '\2014'; color: #777; }
#main #users[st-table="users"] > tbody > tr > td:nth-child(3) { order: 6; flex: 1 1 50%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #users[st-table="users"] > tbody > tr > td:nth-child(3)::before { content: 'שם משפחה: '; color: #666; }
#main #users[st-table="users"] > tbody > tr > td:nth-child(3):empty::after { content: '\2014'; color: #777; }
#main #users[st-table="users"] > tbody > tr > td:nth-child(6) { order: 7; flex: 1 1 100%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #users[st-table="users"] > tbody > tr > td:nth-child(6)::before { content: 'פרוייקט נוכחי: '; color: #666; }
#main #users[st-table="users"] > tbody > tr > td:nth-child(6):empty::after { content: '\2014'; color: #777; }
#main #users[st-table="users"] > tbody > tr > td:nth-child(7) {
display: flex !important;
order: 8;
flex: 1 1 100%;
align-items: center;
justify-content: space-around;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #users[st-table="users"] > tbody > tr > td:nth-child(7):empty {
display: none !important;
}
#main #users[st-table="users"] > tbody > tr > td:nth-child(7) a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 10px;
font-size: 18px;
color: #3276b1;
white-space: nowrap;
}
#main #users[st-table="users"] > thead > tr:first-child {
display: none;
}
#main #users[st-table="users"] > thead > tr.smart-form {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #users[st-table="users"] > thead > tr.smart-form > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #users[st-table="users"] > thead > tr.smart-form > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #users[st-table="users"] > thead > tr.smart-form input,
#main #users[st-table="users"] > thead > tr.smart-form select {
width: 100% !important;
min-width: 0 !important;
}
#main #users[st-table="users"] > thead > tr.smart-form > th:nth-child(2) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #users[st-table="users"] > thead > tr.smart-form > th:nth-child(2)::before { content: 'שם משתמש'; }
#main #users[st-table="users"] > thead > tr.smart-form > th:nth-child(5) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #users[st-table="users"] > thead > tr.smart-form > th:nth-child(5)::before { content: 'דוא"ל'; }
#main #users[st-table="users"] > thead > tr.smart-form > th:nth-child(4) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #users[st-table="users"] > thead > tr.smart-form > th:nth-child(4)::before { content: 'שם פרטי'; }
#main #users[st-table="users"] > thead > tr.smart-form > th:nth-child(3) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #users[st-table="users"] > thead > tr.smart-form > th:nth-child(3)::before { content: 'שם משפחה'; }
#main #users[st-table="users"] > thead > tr.smart-form > th:nth-child(6) { display: block !important; box-sizing: border-box; flex: 1 1 100%; max-width: none !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #users[st-table="users"] > thead > tr.smart-form > th:nth-child(6)::before { content: 'פרוייקט נוכחי'; }
#main #users[st-table="users"] {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #users[st-table="users"] > tfoot > tr,
#main #users[st-table="users"] > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
#main #users[st-table="users"] > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa !important;
}
#main #users[st-table="users"] > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #users[st-table="users"] .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
html[lang="en"] #main #users[st-table="users"] > tbody > tr > td:nth-child(4)::before { content: 'First Name: '; }
html[lang="en"] #main #users[st-table="users"] > tbody > tr > td:nth-child(3)::before { content: 'Last Name: '; }
html[lang="en"] #main #users[st-table="users"] > tbody > tr > td:nth-child(6)::before { content: 'Current project: '; }
html[lang="en"] #main #users[st-table="users"] > thead > tr.smart-form > th:nth-child(2)::before { content: 'Username'; }
html[lang="en"] #main #users[st-table="users"] > thead > tr.smart-form > th:nth-child(5)::before { content: 'Email'; }
html[lang="en"] #main #users[st-table="users"] > thead > tr.smart-form > th:nth-child(4)::before { content: 'First Name'; }
html[lang="en"] #main #users[st-table="users"] > thead > tr.smart-form > th:nth-child(3)::before { content: 'Last Name'; }
html[lang="en"] #main #users[st-table="users"] > thead > tr.smart-form > th:nth-child(6)::before { content: 'Current project'; }
html[lang="ru"] #main #users[st-table="users"] > tbody > tr > td:nth-child(4)::before { content: 'Имя: '; }
html[lang="ru"] #main #users[st-table="users"] > tbody > tr > td:nth-child(3)::before { content: 'Фамилия: '; }
html[lang="ru"] #main #users[st-table="users"] > tbody > tr > td:nth-child(6)::before { content: 'Текущий проект: '; }
html[lang="ru"] #main #users[st-table="users"] > thead > tr.smart-form > th:nth-child(2)::before { content: 'Имя пользователя'; }
html[lang="ru"] #main #users[st-table="users"] > thead > tr.smart-form > th:nth-child(5)::before { content: 'Эл.адрес'; }
html[lang="ru"] #main #users[st-table="users"] > thead > tr.smart-form > th:nth-child(4)::before { content: 'Имя'; }
html[lang="ru"] #main #users[st-table="users"] > thead > tr.smart-form > th:nth-child(3)::before { content: 'Фамилия'; }
html[lang="ru"] #main #users[st-table="users"] > thead > tr.smart-form > th:nth-child(6)::before { content: 'Текущий проект'; }
/* ---------------------------------------------------------------------------
13y. SERVICE TYPES (SETTINGS) — CARDS
app.settings.serviceType: eleven fixed columns. id · NAME · the three checks as chips (voucher, VAT item, shared);
accounting code; two VAT-rate tiles; the two remarks; edit · delete.
--------------------------------------------------------------------------- */
#main #service_types_list,
#main #service_types_list > thead,
#main #service_types_list > tbody,
#main #service_types_list > tfoot {
display: block !important;
}
#main #service_types_list > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #service_types_list > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start !important;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #service_types_list > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
color: #999;
}
#main #service_types_list > tbody > tr > td:nth-child(2) {
order: 2;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #service_types_list > tbody > tr > td:nth-child(6) {
order: 3;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-start: 6px;
padding: 1px 8px;
border-radius: 12px;
background: #e6f4ea !important;
font-size: 11px;
line-height: 18px;
color: #2e7d32;
white-space: nowrap;
}
#main #service_types_list > tbody > tr > td:nth-child(6):empty {
display: none !important;
}
#main #service_types_list > tbody > tr > td:nth-child(6) i::after {
content: ' Voucher';
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 400;
}
#main #service_types_list > tbody > tr > td:nth-child(7) {
order: 4;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-start: 6px;
padding: 1px 8px;
border-radius: 12px;
background: #e6f4ea !important;
font-size: 11px;
line-height: 18px;
color: #2e7d32;
white-space: nowrap;
}
#main #service_types_list > tbody > tr > td:nth-child(7):empty {
display: none !important;
}
#main #service_types_list > tbody > tr > td:nth-child(7) i::after {
content: ' פריט מע"מ';
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 400;
}
#main #service_types_list > tbody > tr > td:nth-child(8) {
order: 5;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-start: 6px;
padding: 1px 8px;
border-radius: 12px;
background: #e6f4ea !important;
font-size: 11px;
line-height: 18px;
color: #2e7d32;
white-space: nowrap;
}
#main #service_types_list > tbody > tr > td:nth-child(8):empty {
display: none !important;
}
#main #service_types_list > tbody > tr > td:nth-child(8) i::after {
content: ' שירות משותף';
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 400;
}
#main #service_types_list > tbody > tr::after {
content: '';
display: block;
order: 6;
flex: 1 0 100%;
height: 0;
}
#main #service_types_list > tbody > tr > td:nth-child(3) { order: 7; flex: 1 1 100%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #service_types_list > tbody > tr > td:nth-child(3)::before { content: 'קוד הנהלת חשבונות: '; color: #666; }
#main #service_types_list > tbody > tr > td:nth-child(3):empty::after { content: '\2014'; color: #777; }
#main #service_types_list > tbody > tr > td:nth-child(4),
#main #service_types_list > tbody > tr > td:nth-child(5) {
flex: 1 1 50%;
align-self: stretch;
margin-top: 8px;
padding: 4px 3px 5px;
background: #f2f4f7 !important;
text-align: center !important;
font-size: 13px;
font-weight: 700;
line-height: 1.25;
color: #333;
white-space: nowrap;
direction: ltr;
unicode-bidi: isolate;
}
#main #service_types_list > tbody > tr > td:nth-child(4)::before,
#main #service_types_list > tbody > tr > td:nth-child(5)::before {
display: block;
margin-bottom: 1px;
font-size: 11px;
font-weight: 400;
line-height: 1.2;
color: #666;
direction: rtl;
white-space: normal;
}
#main #service_types_list > tbody > tr > td:nth-child(4) { order: 8; border-start-start-radius: 6px; border-end-start-radius: 6px; }
#main #service_types_list > tbody > tr > td:nth-child(4)::before { content: 'אחוז מעמ על העמלה'; }
#main #service_types_list > tbody > tr > td:nth-child(4):empty::after { content: '\2014'; color: #777; }
#main #service_types_list > tbody > tr > td:nth-child(5) { order: 9; border-start-end-radius: 6px; border-end-end-radius: 6px; border-inline-start: 1px solid #fff !important; }
#main #service_types_list > tbody > tr > td:nth-child(5)::before { content: 'אחוז מעמ על דמי טיפול'; }
#main #service_types_list > tbody > tr > td:nth-child(5):empty::after { content: '\2014'; color: #777; }
#main #service_types_list > tbody > tr > td:nth-child(11) {
display: flex !important;
order: 10;
flex: 1 1 100%;
align-items: center;
justify-content: space-around;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #service_types_list > tbody > tr > td:nth-child(11):empty {
display: none !important;
}
#main #service_types_list > tbody > tr > td:nth-child(11) a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 10px;
font-size: 18px;
color: #3276b1;
white-space: nowrap;
}
#main #service_types_list > thead > tr:first-child {
display: none;
}
#main #service_types_list > thead > tr:nth-child(2) {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #service_types_list > thead > tr:nth-child(2) > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #service_types_list > thead > tr:nth-child(2) > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #service_types_list > thead > tr:nth-child(2) input,
#main #service_types_list > thead > tr:nth-child(2) select {
width: 100% !important;
min-width: 0 !important;
}
#main #service_types_list > thead > tr:nth-child(2) > th:nth-child(2) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #service_types_list > thead > tr:nth-child(2) > th:nth-child(3) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #service_types_list {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #service_types_list > tfoot > tr,
#main #service_types_list > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
#main #service_types_list > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa !important;
}
#main #service_types_list > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #service_types_list .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
html[lang="en"] #main #service_types_list > tbody > tr > td:nth-child(6) i::after { content: ' Voucher'; }
html[lang="en"] #main #service_types_list > tbody > tr > td:nth-child(7) i::after { content: ' Vat Item'; }
html[lang="en"] #main #service_types_list > tbody > tr > td:nth-child(8) i::after { content: ' Is shared?'; }
html[lang="en"] #main #service_types_list > tbody > tr > td:nth-child(3)::before { content: 'Accounting Code: '; }
html[lang="en"] #main #service_types_list > tbody > tr > td:nth-child(4)::before { content: 'Commission VAT rate'; }
html[lang="en"] #main #service_types_list > tbody > tr > td:nth-child(5)::before { content: 'Handling fee VAT rate'; }
html[lang="ru"] #main #service_types_list > tbody > tr > td:nth-child(6) i::after { content: ' Voucher'; }
html[lang="ru"] #main #service_types_list > tbody > tr > td:nth-child(7) i::after { content: ' Пункт НДС'; }
html[lang="ru"] #main #service_types_list > tbody > tr > td:nth-child(8) i::after { content: ' Является ли общим?'; }
html[lang="ru"] #main #service_types_list > tbody > tr > td:nth-child(3)::before { content: 'Бухгалтерский код: '; }
html[lang="ru"] #main #service_types_list > tbody > tr > td:nth-child(4)::before { content: 'Комиссия ставки НДС'; }
html[lang="ru"] #main #service_types_list > tbody > tr > td:nth-child(5)::before { content: 'Плата за обработку ставки НДС'; }
#main #service_types_list > tbody > tr > td:nth-child(9) { order: 90; flex: 1 1 100%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #service_types_list > tbody > tr > td:nth-child(9)::before { content: 'הקלד הערה באנגלית: '; color: #666; }
#main #service_types_list > tbody > tr > td:nth-child(9):empty::after { content: '\2014'; color: #777; }
#main #service_types_list > tbody > tr > td:nth-child(10) { order: 91; flex: 1 1 100%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #service_types_list > tbody > tr > td:nth-child(10)::before { content: 'הקלד הערה בעברית: '; color: #666; }
#main #service_types_list > tbody > tr > td:nth-child(10):empty::after { content: '\2014'; color: #777; }
#main #service_types_list > tbody > tr > td:nth-child(11) { order: 99; }
html[lang="en"] #main #service_types_list > tbody > tr > td:nth-child(9)::before { content: 'Type remark en: '; }
html[lang="en"] #main #service_types_list > tbody > tr > td:nth-child(10)::before { content: 'Type remark heb: '; }
html[lang="ru"] #main #service_types_list > tbody > tr > td:nth-child(9)::before { content: 'Ввести примечание на английском: '; }
html[lang="ru"] #main #service_types_list > tbody > tr > td:nth-child(10)::before { content: 'Ввести примечание на иврите: '; }
/* ---------------------------------------------------------------------------
13z. SERVICE CATEGORIES (SETTINGS) — CARDS
app.settings.serviceCategory: three columns. id · NAME; edit · delete.
--------------------------------------------------------------------------- */
#main #project_list[st-table="categories"],
#main #project_list[st-table="categories"] > thead,
#main #project_list[st-table="categories"] > tbody,
#main #project_list[st-table="categories"] > tfoot {
display: block !important;
}
#main #project_list[st-table="categories"] > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #project_list[st-table="categories"] > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start !important;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #project_list[st-table="categories"] > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
color: #999;
}
#main #project_list[st-table="categories"] > tbody > tr > td:nth-child(2) {
order: 2;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #project_list[st-table="categories"] > tbody > tr::after {
content: '';
display: block;
order: 3;
flex: 1 0 100%;
height: 0;
}
#main #project_list[st-table="categories"] > tbody > tr > td:nth-child(3) {
display: flex !important;
order: 4;
flex: 1 1 100%;
align-items: center;
justify-content: space-around;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #project_list[st-table="categories"] > tbody > tr > td:nth-child(3):empty {
display: none !important;
}
#main #project_list[st-table="categories"] > tbody > tr > td:nth-child(3) a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 10px;
font-size: 18px;
color: #3276b1;
white-space: nowrap;
}
#main #project_list[st-table="categories"] > thead > tr:first-child {
display: none;
}
#main #project_list[st-table="categories"] > thead > tr:nth-child(2) {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #project_list[st-table="categories"] > thead > tr:nth-child(2) > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #project_list[st-table="categories"] > thead > tr:nth-child(2) > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #project_list[st-table="categories"] > thead > tr:nth-child(2) input,
#main #project_list[st-table="categories"] > thead > tr:nth-child(2) select {
width: 100% !important;
min-width: 0 !important;
}
#main #project_list[st-table="categories"] > thead > tr:nth-child(2) > th:nth-child(2) { display: block !important; box-sizing: border-box; flex: 1 1 100%; max-width: none !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="categories"] {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #project_list[st-table="categories"] > tfoot > tr,
#main #project_list[st-table="categories"] > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
#main #project_list[st-table="categories"] > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa !important;
}
#main #project_list[st-table="categories"] > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #project_list[st-table="categories"] .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
/* ---------------------------------------------------------------------------
13aa. AIRPLANES (SETTINGS) — CARDS
app.settings.airplanes: five columns. id · HEBREW NAME · code; the Latin name; edit · delete.
--------------------------------------------------------------------------- */
#main #project_list[st-table="airplanes"],
#main #project_list[st-table="airplanes"] > thead,
#main #project_list[st-table="airplanes"] > tbody,
#main #project_list[st-table="airplanes"] > tfoot {
display: block !important;
}
#main #project_list[st-table="airplanes"] > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #project_list[st-table="airplanes"] > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start !important;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #project_list[st-table="airplanes"] > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
color: #999;
}
#main #project_list[st-table="airplanes"] > tbody > tr > td:nth-child(2) {
order: 2;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #project_list[st-table="airplanes"] > tbody > tr > td:nth-child(4) {
order: 3;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-start: 6px;
margin-inline-end: 6px;
padding: 1px 6px;
border-radius: 3px;
background: #e9ecef !important;
font-size: 11px;
line-height: 19px;
color: #555;
white-space: nowrap;
}
#main #project_list[st-table="airplanes"] > tbody > tr > td:nth-child(4):empty {
display: none !important;
}
#main #project_list[st-table="airplanes"] > tbody > tr::after {
content: '';
display: block;
order: 4;
flex: 1 0 100%;
height: 0;
}
#main #project_list[st-table="airplanes"] > tbody > tr > td:nth-child(3) {
order: 5;
flex: 1 1 100%;
direction: ltr;
unicode-bidi: isolate;
text-align: end !important;
color: #777;
word-break: break-word;
}
#main #project_list[st-table="airplanes"] > tbody > tr > td:nth-child(3):empty {
display: none !important;
}
#main #project_list[st-table="airplanes"] > tbody > tr > td:nth-child(5) {
display: flex !important;
order: 6;
flex: 1 1 100%;
align-items: center;
justify-content: space-around;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #project_list[st-table="airplanes"] > tbody > tr > td:nth-child(5):empty {
display: none !important;
}
#main #project_list[st-table="airplanes"] > tbody > tr > td:nth-child(5) a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 10px;
font-size: 18px;
color: #3276b1;
white-space: nowrap;
}
#main #project_list[st-table="airplanes"] > thead > tr:first-child {
display: none;
}
#main #project_list[st-table="airplanes"] > thead > tr:nth-child(2) {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #project_list[st-table="airplanes"] > thead > tr:nth-child(2) > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #project_list[st-table="airplanes"] > thead > tr:nth-child(2) > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #project_list[st-table="airplanes"] > thead > tr:nth-child(2) input,
#main #project_list[st-table="airplanes"] > thead > tr:nth-child(2) select {
width: 100% !important;
min-width: 0 !important;
}
#main #project_list[st-table="airplanes"] > thead > tr:nth-child(2) > th:nth-child(2) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="airplanes"] > thead > tr:nth-child(2) > th:nth-child(3) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="airplanes"] > thead > tr:nth-child(2) > th:nth-child(4) { display: block !important; box-sizing: border-box; flex: 1 1 100%; max-width: none !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="airplanes"] {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #project_list[st-table="airplanes"] > tfoot > tr,
#main #project_list[st-table="airplanes"] > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
#main #project_list[st-table="airplanes"] > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa !important;
}
#main #project_list[st-table="airplanes"] > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #project_list[st-table="airplanes"] .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
/* ---------------------------------------------------------------------------
13ab. BRANCHES (OFFICE SETTINGS) — CARDS
app.settings.officeSettings.branches: six columns on the shared `users` id. row number · NAME · enabled check; address; phone; edit · delete.
--------------------------------------------------------------------------- */
#main #users[st-table="branches"],
#main #users[st-table="branches"] > thead,
#main #users[st-table="branches"] > tbody,
#main #users[st-table="branches"] > tfoot {
display: block !important;
}
#main #users[st-table="branches"] > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #users[st-table="branches"] > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start !important;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #users[st-table="branches"] > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
color: #999;
}
#main #users[st-table="branches"] > tbody > tr > td:nth-child(2) {
order: 2;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #users[st-table="branches"] > tbody > tr > td:nth-child(5) {
order: 3;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-start: 6px;
line-height: 21px;
color: #3d8b3d;
}
#main #users[st-table="branches"] > tbody > tr > td:nth-child(5):empty {
display: none !important;
}
#main #users[st-table="branches"] > tbody > tr::after {
content: '';
display: block;
order: 4;
flex: 1 0 100%;
height: 0;
}
#main #users[st-table="branches"] > tbody > tr > td:nth-child(3) { order: 5; flex: 1 1 100%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #users[st-table="branches"] > tbody > tr > td:nth-child(3)::before { content: 'כתובת: '; color: #666; }
#main #users[st-table="branches"] > tbody > tr > td:nth-child(3):empty::after { content: '\2014'; color: #777; }
#main #users[st-table="branches"] > tbody > tr > td:nth-child(4) { order: 6; flex: 1 1 100%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #users[st-table="branches"] > tbody > tr > td:nth-child(4)::before { content: 'מספר טלפון: '; color: #666; }
#main #users[st-table="branches"] > tbody > tr > td:nth-child(4):empty::after { content: '\2014'; color: #777; }
#main #users[st-table="branches"] > tbody > tr > td:nth-child(6) {
display: flex !important;
order: 7;
flex: 1 1 100%;
align-items: center;
justify-content: space-around;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #users[st-table="branches"] > tbody > tr > td:nth-child(6):empty {
display: none !important;
}
#main #users[st-table="branches"] > tbody > tr > td:nth-child(6) a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 10px;
font-size: 18px;
color: #3276b1;
white-space: nowrap;
}
#main #users[st-table="branches"] > thead > tr:first-child {
display: none;
}
#main #users[st-table="branches"] > thead > tr.smart-form {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #users[st-table="branches"] > thead > tr.smart-form > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #users[st-table="branches"] > thead > tr.smart-form > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #users[st-table="branches"] > thead > tr.smart-form input,
#main #users[st-table="branches"] > thead > tr.smart-form select {
width: 100% !important;
min-width: 0 !important;
}
#main #users[st-table="branches"] > thead > tr.smart-form > th:nth-child(2) { display: block !important; box-sizing: border-box; flex: 1 1 60%; max-width: 60% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #users[st-table="branches"] > thead > tr.smart-form > th:nth-child(2)::before { content: 'שם'; }
#main #users[st-table="branches"] > thead > tr.smart-form > th:nth-child(5) { display: block !important; box-sizing: border-box; flex: 1 1 40%; max-width: 40% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #users[st-table="branches"] > thead > tr.smart-form > th:nth-child(5)::before { content: 'פעיל'; }
#main #users[st-table="branches"] {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #users[st-table="branches"] > tfoot > tr,
#main #users[st-table="branches"] > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
#main #users[st-table="branches"] > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa !important;
}
#main #users[st-table="branches"] > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #users[st-table="branches"] .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
html[lang="en"] #main #users[st-table="branches"] > tbody > tr > td:nth-child(3)::before { content: 'Address: '; }
html[lang="en"] #main #users[st-table="branches"] > tbody > tr > td:nth-child(4)::before { content: 'Phone Number: '; }
html[lang="en"] #main #users[st-table="branches"] > thead > tr.smart-form > th:nth-child(2)::before { content: 'Branch name'; }
html[lang="en"] #main #users[st-table="branches"] > thead > tr.smart-form > th:nth-child(5)::before { content: 'Enabled'; }
html[lang="ru"] #main #users[st-table="branches"] > tbody > tr > td:nth-child(3)::before { content: 'Адрес: '; }
html[lang="ru"] #main #users[st-table="branches"] > tbody > tr > td:nth-child(4)::before { content: 'Номер телефона: '; }
html[lang="ru"] #main #users[st-table="branches"] > thead > tr.smart-form > th:nth-child(2)::before { content: 'Название филиала'; }
html[lang="ru"] #main #users[st-table="branches"] > thead > tr.smart-form > th:nth-child(5)::before { content: 'Активные'; }
/* ---------------------------------------------------------------------------
13ac. DEPARTMENTS (OFFICE SETTINGS) — CARDS
app.settings.officeSettings.agent_network: eight columns on the shared `users` id. row number · NAME · enabled check; e-mail; user code · phone; the branches dropdown; edit · delete.
--------------------------------------------------------------------------- */
#main #users[st-table="agentNetworks"],
#main #users[st-table="agentNetworks"] > thead,
#main #users[st-table="agentNetworks"] > tbody,
#main #users[st-table="agentNetworks"] > tfoot {
display: block !important;
}
#main #users[st-table="agentNetworks"] > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #users[st-table="agentNetworks"] > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start !important;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
color: #999;
}
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(2) {
order: 2;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(7) {
order: 3;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-start: 6px;
line-height: 21px;
color: #3d8b3d;
}
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(7):empty {
display: none !important;
}
#main #users[st-table="agentNetworks"] > tbody > tr::after {
content: '';
display: block;
order: 4;
flex: 1 0 100%;
height: 0;
}
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(3) {
order: 5;
flex: 1 1 100%;
direction: ltr;
unicode-bidi: isolate;
text-align: end !important;
color: #777;
word-break: break-word;
}
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(3):empty {
display: none !important;
}
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(4) { order: 6; flex: 1 1 50%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(4)::before { content: 'קוד משתמש: '; color: #666; }
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(4):empty::after { content: '\2014'; color: #777; }
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(5) { order: 7; flex: 1 1 50%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(5)::before { content: 'מספר טלפון: '; color: #666; }
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(5):empty::after { content: '\2014'; color: #777; }
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(6) {
order: 8;
flex: 1 1 100%;
margin-top: 6px;
}
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(6):not(:has(.btn-group)) {
display: none !important;
}
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(6) .btn-group,
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(6) .btn-group > .btn {
display: block;
width: 100%;
}
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(6) .btn-group > .btn {
min-height: 44px;
white-space: normal;
}
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(6) .dropdown-menu {
position: static;
float: none;
display: none;
width: 100%;
max-width: 100%;
margin-top: 2px;
box-shadow: none;
}
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(6) .btn-group.open .dropdown-menu {
display: block;
}
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(6) .dropdown-menu > li > a {
white-space: normal;
word-break: break-word;
padding: 6px 12px;
}
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(8) {
display: flex !important;
order: 9;
flex: 1 1 100%;
align-items: center;
justify-content: space-around;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(8):empty {
display: none !important;
}
#main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(8) a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 10px;
font-size: 18px;
color: #3276b1;
white-space: nowrap;
}
#main #users[st-table="agentNetworks"] > thead > tr:first-child {
display: none;
}
#main #users[st-table="agentNetworks"] > thead > tr.smart-form {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #users[st-table="agentNetworks"] > thead > tr.smart-form > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #users[st-table="agentNetworks"] > thead > tr.smart-form > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #users[st-table="agentNetworks"] > thead > tr.smart-form input,
#main #users[st-table="agentNetworks"] > thead > tr.smart-form select {
width: 100% !important;
min-width: 0 !important;
}
#main #users[st-table="agentNetworks"] > thead > tr.smart-form > th:nth-child(2) { display: block !important; box-sizing: border-box; flex: 1 1 100%; max-width: none !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #users[st-table="agentNetworks"] > thead > tr.smart-form > th:nth-child(2)::before { content: 'שם מחלקה'; }
#main #users[st-table="agentNetworks"] > thead > tr.smart-form > th:nth-child(3) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #users[st-table="agentNetworks"] > thead > tr.smart-form > th:nth-child(3)::before { content: 'דוא"ל'; }
#main #users[st-table="agentNetworks"] > thead > tr.smart-form > th:nth-child(4) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #users[st-table="agentNetworks"] > thead > tr.smart-form > th:nth-child(4)::before { content: 'קוד משתמש'; }
#main #users[st-table="agentNetworks"] > thead > tr.smart-form > th:nth-child(7) { display: block !important; box-sizing: border-box; flex: 1 1 100%; max-width: none !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #users[st-table="agentNetworks"] > thead > tr.smart-form > th:nth-child(7)::before { content: 'פעיל'; }
#main #users[st-table="agentNetworks"] {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #users[st-table="agentNetworks"] > tfoot > tr,
#main #users[st-table="agentNetworks"] > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
#main #users[st-table="agentNetworks"] > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa !important;
}
#main #users[st-table="agentNetworks"] > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #users[st-table="agentNetworks"] .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
html[lang="en"] #main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(4)::before { content: 'User Code: '; }
html[lang="en"] #main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(5)::before { content: 'Phone Number: '; }
html[lang="en"] #main #users[st-table="agentNetworks"] > thead > tr.smart-form > th:nth-child(2)::before { content: 'Department name'; }
html[lang="en"] #main #users[st-table="agentNetworks"] > thead > tr.smart-form > th:nth-child(3)::before { content: 'Email'; }
html[lang="en"] #main #users[st-table="agentNetworks"] > thead > tr.smart-form > th:nth-child(4)::before { content: 'User Code'; }
html[lang="en"] #main #users[st-table="agentNetworks"] > thead > tr.smart-form > th:nth-child(7)::before { content: 'Enabled'; }
html[lang="ru"] #main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(4)::before { content: 'Код пользователя: '; }
html[lang="ru"] #main #users[st-table="agentNetworks"] > tbody > tr > td:nth-child(5)::before { content: 'Номер телефона: '; }
html[lang="ru"] #main #users[st-table="agentNetworks"] > thead > tr.smart-form > th:nth-child(2)::before { content: 'Название отдела'; }
html[lang="ru"] #main #users[st-table="agentNetworks"] > thead > tr.smart-form > th:nth-child(3)::before { content: 'Эл.адрес'; }
html[lang="ru"] #main #users[st-table="agentNetworks"] > thead > tr.smart-form > th:nth-child(4)::before { content: 'Код пользователя'; }
html[lang="ru"] #main #users[st-table="agentNetworks"] > thead > tr.smart-form > th:nth-child(7)::before { content: 'Активные'; }
/* ---------------------------------------------------------------------------
13ad. MESSAGE TEMPLATES (SETTINGS) — CARDS
app.settings.messageTemplates: eight fixed columns. id · NAME · status label; the channels (WhatsApp / Email / SMS labels);
the allowed roles; created by · created at; edit · delete. The name and status filters stay.
--------------------------------------------------------------------------- */
#main #message_templates_list,
#main #message_templates_list > thead,
#main #message_templates_list > tbody,
#main #message_templates_list > tfoot {
display: block !important;
}
#main #message_templates_list > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #message_templates_list > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start !important;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #message_templates_list > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
color: #999;
}
#main #message_templates_list > tbody > tr > td:nth-child(2) {
order: 2;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #message_templates_list > tbody > tr > td:nth-child(5) {
order: 3;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-start: 6px;
line-height: 21px;
color: #3d8b3d;
}
#main #message_templates_list > tbody > tr > td:nth-child(5):empty {
display: none !important;
}
#main #message_templates_list > tbody > tr::after {
content: '';
display: block;
order: 4;
flex: 1 0 100%;
height: 0;
}
#main #message_templates_list > tbody > tr > td:nth-child(3) { order: 5; flex: 1 1 100%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #message_templates_list > tbody > tr > td:nth-child(3)::before { content: 'אמצעים: '; color: #666; }
#main #message_templates_list > tbody > tr > td:nth-child(3):empty::after { content: '\2014'; color: #777; }
#main #message_templates_list > tbody > tr > td:nth-child(4) { order: 6; flex: 1 1 100%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #message_templates_list > tbody > tr > td:nth-child(4)::before { content: 'תפקידים מורשים: '; color: #666; }
#main #message_templates_list > tbody > tr > td:nth-child(4):empty::after { content: '\2014'; color: #777; }
#main #message_templates_list > tbody > tr > td:nth-child(6) { order: 7; flex: 1 1 40%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #message_templates_list > tbody > tr > td:nth-child(6)::before { content: 'נוצר על ידי: '; color: #666; }
#main #message_templates_list > tbody > tr > td:nth-child(6):empty::after { content: '\2014'; color: #777; }
#main #message_templates_list > tbody > tr > td:nth-child(7) { order: 8; flex: 1 1 60%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #message_templates_list > tbody > tr > td:nth-child(7)::before { content: 'נוצר בתאריך: '; color: #666; }
#main #message_templates_list > tbody > tr > td:nth-child(7):empty::after { content: '\2014'; color: #777; }
#main #message_templates_list > tbody > tr > td:nth-child(8) {
display: flex !important;
order: 9;
flex: 1 1 100%;
align-items: center;
justify-content: space-around;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #message_templates_list > tbody > tr > td:nth-child(8):empty {
display: none !important;
}
#main #message_templates_list > tbody > tr > td:nth-child(8) a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 10px;
font-size: 18px;
color: #3276b1;
white-space: nowrap;
}
#main #message_templates_list > thead > tr:first-child {
display: none;
}
#main #message_templates_list > thead > tr:nth-child(2) {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #message_templates_list > thead > tr:nth-child(2) > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #message_templates_list > thead > tr:nth-child(2) > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #message_templates_list > thead > tr:nth-child(2) input,
#main #message_templates_list > thead > tr:nth-child(2) select {
width: 100% !important;
min-width: 0 !important;
}
#main #message_templates_list > thead > tr:nth-child(2) > th:nth-child(2) { display: block !important; box-sizing: border-box; flex: 1 1 60%; max-width: 60% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #message_templates_list > thead > tr:nth-child(2) > th:nth-child(5) { display: block !important; box-sizing: border-box; flex: 1 1 40%; max-width: 40% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #message_templates_list > thead > tr:nth-child(2) > th:nth-child(5)::before { content: 'סטטוס'; }
#main #message_templates_list {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #message_templates_list > tfoot > tr,
#main #message_templates_list > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
#main #message_templates_list > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa !important;
}
#main #message_templates_list > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #message_templates_list .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
html[lang="en"] #main #message_templates_list > tbody > tr > td:nth-child(3)::before { content: 'Methods: '; }
html[lang="en"] #main #message_templates_list > tbody > tr > td:nth-child(4)::before { content: 'Allowed Roles: '; }
html[lang="en"] #main #message_templates_list > tbody > tr > td:nth-child(6)::before { content: 'Created By: '; }
html[lang="en"] #main #message_templates_list > tbody > tr > td:nth-child(7)::before { content: 'Created At: '; }
html[lang="en"] #main #message_templates_list > thead > tr:nth-child(2) > th:nth-child(5)::before { content: 'Status'; }
html[lang="ru"] #main #message_templates_list > tbody > tr > td:nth-child(3)::before { content: 'Методы: '; }
html[lang="ru"] #main #message_templates_list > tbody > tr > td:nth-child(4)::before { content: 'Разрешенные роли: '; }
html[lang="ru"] #main #message_templates_list > tbody > tr > td:nth-child(6)::before { content: 'Создано пользователем: '; }
html[lang="ru"] #main #message_templates_list > tbody > tr > td:nth-child(7)::before { content: 'Создано: '; }
html[lang="ru"] #main #message_templates_list > thead > tr:nth-child(2) > th:nth-child(5)::before { content: 'Статус'; }
/* ---------------------------------------------------------------------------
13ae. CITIES (SETTINGS) — CARDS
app.settings.city: four columns. id · HEBREW NAME; the Latin name; edit · delete.
--------------------------------------------------------------------------- */
#main #project_list[st-table="cities"],
#main #project_list[st-table="cities"] > thead,
#main #project_list[st-table="cities"] > tbody,
#main #project_list[st-table="cities"] > tfoot {
display: block !important;
}
#main #project_list[st-table="cities"] > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #project_list[st-table="cities"] > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start !important;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #project_list[st-table="cities"] > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
color: #999;
}
#main #project_list[st-table="cities"] > tbody > tr > td:nth-child(2) {
order: 2;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #project_list[st-table="cities"] > tbody > tr::after {
content: '';
display: block;
order: 3;
flex: 1 0 100%;
height: 0;
}
#main #project_list[st-table="cities"] > tbody > tr > td:nth-child(3) {
order: 4;
flex: 1 1 100%;
direction: ltr;
unicode-bidi: isolate;
text-align: end !important;
color: #777;
word-break: break-word;
}
#main #project_list[st-table="cities"] > tbody > tr > td:nth-child(3):empty {
display: none !important;
}
#main #project_list[st-table="cities"] > tbody > tr > td:nth-child(4) {
display: flex !important;
order: 5;
flex: 1 1 100%;
align-items: center;
justify-content: space-around;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #project_list[st-table="cities"] > tbody > tr > td:nth-child(4):empty {
display: none !important;
}
#main #project_list[st-table="cities"] > tbody > tr > td:nth-child(4) a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 10px;
font-size: 18px;
color: #3276b1;
white-space: nowrap;
}
#main #project_list[st-table="cities"] > thead > tr:first-child {
display: none;
}
#main #project_list[st-table="cities"] > thead > tr:nth-child(2) {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #project_list[st-table="cities"] > thead > tr:nth-child(2) > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #project_list[st-table="cities"] > thead > tr:nth-child(2) > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #project_list[st-table="cities"] > thead > tr:nth-child(2) input,
#main #project_list[st-table="cities"] > thead > tr:nth-child(2) select {
width: 100% !important;
min-width: 0 !important;
}
#main #project_list[st-table="cities"] > thead > tr:nth-child(2) > th:nth-child(2) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="cities"] > thead > tr:nth-child(2) > th:nth-child(3) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="cities"] {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #project_list[st-table="cities"] > tfoot > tr,
#main #project_list[st-table="cities"] > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
#main #project_list[st-table="cities"] > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa !important;
}
#main #project_list[st-table="cities"] > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #project_list[st-table="cities"] .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
/* ---------------------------------------------------------------------------
13af. COUNTRIES (SETTINGS) — CARDS
app.settings.country: four columns. id · HEBREW NAME; the Latin name; edit · delete.
--------------------------------------------------------------------------- */
#main #project_list[st-table="countries"],
#main #project_list[st-table="countries"] > thead,
#main #project_list[st-table="countries"] > tbody,
#main #project_list[st-table="countries"] > tfoot {
display: block !important;
}
#main #project_list[st-table="countries"] > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #project_list[st-table="countries"] > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start !important;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #project_list[st-table="countries"] > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
color: #999;
}
#main #project_list[st-table="countries"] > tbody > tr > td:nth-child(2) {
order: 2;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #project_list[st-table="countries"] > tbody > tr::after {
content: '';
display: block;
order: 3;
flex: 1 0 100%;
height: 0;
}
#main #project_list[st-table="countries"] > tbody > tr > td:nth-child(3) {
order: 4;
flex: 1 1 100%;
direction: ltr;
unicode-bidi: isolate;
text-align: end !important;
color: #777;
word-break: break-word;
}
#main #project_list[st-table="countries"] > tbody > tr > td:nth-child(3):empty {
display: none !important;
}
#main #project_list[st-table="countries"] > tbody > tr > td:nth-child(4) {
display: flex !important;
order: 5;
flex: 1 1 100%;
align-items: center;
justify-content: space-around;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #project_list[st-table="countries"] > tbody > tr > td:nth-child(4):empty {
display: none !important;
}
#main #project_list[st-table="countries"] > tbody > tr > td:nth-child(4) a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 10px;
font-size: 18px;
color: #3276b1;
white-space: nowrap;
}
#main #project_list[st-table="countries"] > thead > tr:first-child {
display: none;
}
#main #project_list[st-table="countries"] > thead > tr:nth-child(2) {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #project_list[st-table="countries"] > thead > tr:nth-child(2) > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #project_list[st-table="countries"] > thead > tr:nth-child(2) > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #project_list[st-table="countries"] > thead > tr:nth-child(2) input,
#main #project_list[st-table="countries"] > thead > tr:nth-child(2) select {
width: 100% !important;
min-width: 0 !important;
}
#main #project_list[st-table="countries"] > thead > tr:nth-child(2) > th:nth-child(2) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="countries"] > thead > tr:nth-child(2) > th:nth-child(3) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="countries"] {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #project_list[st-table="countries"] > tfoot > tr,
#main #project_list[st-table="countries"] > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
#main #project_list[st-table="countries"] > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa !important;
}
#main #project_list[st-table="countries"] > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #project_list[st-table="countries"] .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
/* ---------------------------------------------------------------------------
13ag. BANKS (SETTINGS) — CARDS
app.settings.banks: four columns. id · NAME · code; edit · delete.
--------------------------------------------------------------------------- */
#main #project_list[st-table="banks"],
#main #project_list[st-table="banks"] > thead,
#main #project_list[st-table="banks"] > tbody,
#main #project_list[st-table="banks"] > tfoot {
display: block !important;
}
#main #project_list[st-table="banks"] > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #project_list[st-table="banks"] > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start !important;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #project_list[st-table="banks"] > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
color: #999;
}
#main #project_list[st-table="banks"] > tbody > tr > td:nth-child(2) {
order: 2;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #project_list[st-table="banks"] > tbody > tr > td:nth-child(3) {
order: 3;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-start: 6px;
margin-inline-end: 6px;
padding: 1px 6px;
border-radius: 3px;
background: #e9ecef !important;
font-size: 11px;
line-height: 19px;
color: #555;
white-space: nowrap;
}
#main #project_list[st-table="banks"] > tbody > tr > td:nth-child(3):empty {
display: none !important;
}
#main #project_list[st-table="banks"] > tbody > tr::after {
content: '';
display: block;
order: 4;
flex: 1 0 100%;
height: 0;
}
#main #project_list[st-table="banks"] > tbody > tr > td:nth-child(4) {
display: flex !important;
order: 5;
flex: 1 1 100%;
align-items: center;
justify-content: space-around;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #project_list[st-table="banks"] > tbody > tr > td:nth-child(4):empty {
display: none !important;
}
#main #project_list[st-table="banks"] > tbody > tr > td:nth-child(4) a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 10px;
font-size: 18px;
color: #3276b1;
white-space: nowrap;
}
#main #project_list[st-table="banks"] > thead > tr:first-child {
display: none;
}
#main #project_list[st-table="banks"] > thead > tr:nth-child(2) {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #project_list[st-table="banks"] > thead > tr:nth-child(2) > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #project_list[st-table="banks"] > thead > tr:nth-child(2) > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #project_list[st-table="banks"] > thead > tr:nth-child(2) input,
#main #project_list[st-table="banks"] > thead > tr:nth-child(2) select {
width: 100% !important;
min-width: 0 !important;
}
#main #project_list[st-table="banks"] > thead > tr:nth-child(2) > th:nth-child(2) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="banks"] > thead > tr:nth-child(2) > th:nth-child(3) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="banks"] {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #project_list[st-table="banks"] > tfoot > tr,
#main #project_list[st-table="banks"] > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
#main #project_list[st-table="banks"] > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa !important;
}
#main #project_list[st-table="banks"] > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #project_list[st-table="banks"] .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
/* ---------------------------------------------------------------------------
13ah. NATIONALITIES (SETTINGS) — CARDS
app.settings.nationality: six columns (the two code columns share one header key). row number · HEBREW NAME · code; the Latin name; the ISO code; edit · delete.
--------------------------------------------------------------------------- */
#main #project_list[st-table="nationalities"],
#main #project_list[st-table="nationalities"] > thead,
#main #project_list[st-table="nationalities"] > tbody,
#main #project_list[st-table="nationalities"] > tfoot {
display: block !important;
}
#main #project_list[st-table="nationalities"] > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #project_list[st-table="nationalities"] > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start !important;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #project_list[st-table="nationalities"] > tbody > tr > td:nth-child(1) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
color: #999;
}
#main #project_list[st-table="nationalities"] > tbody > tr > td:nth-child(2) {
order: 2;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #project_list[st-table="nationalities"] > tbody > tr > td:nth-child(4) {
order: 3;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-start: 6px;
margin-inline-end: 6px;
padding: 1px 6px;
border-radius: 3px;
background: #e9ecef !important;
font-size: 11px;
line-height: 19px;
color: #555;
white-space: nowrap;
}
#main #project_list[st-table="nationalities"] > tbody > tr > td:nth-child(4):empty {
display: none !important;
}
#main #project_list[st-table="nationalities"] > tbody > tr::after {
content: '';
display: block;
order: 4;
flex: 1 0 100%;
height: 0;
}
#main #project_list[st-table="nationalities"] > tbody > tr > td:nth-child(3) {
order: 5;
flex: 1 1 100%;
direction: ltr;
unicode-bidi: isolate;
text-align: end !important;
color: #777;
word-break: break-word;
}
#main #project_list[st-table="nationalities"] > tbody > tr > td:nth-child(3):empty {
display: none !important;
}
#main #project_list[st-table="nationalities"] > tbody > tr > td:nth-child(5) { order: 6; flex: 1 1 100%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #project_list[st-table="nationalities"] > tbody > tr > td:nth-child(5)::before { content: 'קוד: '; color: #666; }
#main #project_list[st-table="nationalities"] > tbody > tr > td:nth-child(5):empty::after { content: '\2014'; color: #777; }
#main #project_list[st-table="nationalities"] > tbody > tr > td:nth-child(6) {
display: flex !important;
order: 7;
flex: 1 1 100%;
align-items: center;
justify-content: space-around;
margin-top: 6px;
border-top: 1px solid #eee !important;
}
#main #project_list[st-table="nationalities"] > tbody > tr > td:nth-child(6):empty {
display: none !important;
}
#main #project_list[st-table="nationalities"] > tbody > tr > td:nth-child(6) a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 10px;
font-size: 18px;
color: #3276b1;
white-space: nowrap;
}
#main #project_list[st-table="nationalities"] > thead > tr:first-child {
display: none;
}
#main #project_list[st-table="nationalities"] > thead > tr:nth-child(2) {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #project_list[st-table="nationalities"] > thead > tr:nth-child(2) > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #project_list[st-table="nationalities"] > thead > tr:nth-child(2) > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #project_list[st-table="nationalities"] > thead > tr:nth-child(2) input,
#main #project_list[st-table="nationalities"] > thead > tr:nth-child(2) select {
width: 100% !important;
min-width: 0 !important;
}
#main #project_list[st-table="nationalities"] > thead > tr:nth-child(2) > th:nth-child(2) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="nationalities"] > thead > tr:nth-child(2) > th:nth-child(3) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="nationalities"] > thead > tr:nth-child(2) > th:nth-child(4) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="nationalities"] > thead > tr:nth-child(2) > th:nth-child(5) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #project_list[st-table="nationalities"] {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #project_list[st-table="nationalities"] > tfoot > tr,
#main #project_list[st-table="nationalities"] > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
#main #project_list[st-table="nationalities"] > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa !important;
}
#main #project_list[st-table="nationalities"] > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #project_list[st-table="nationalities"] .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
html[lang="en"] #main #project_list[st-table="nationalities"] > tbody > tr > td:nth-child(5)::before { content: 'Code: '; }
html[lang="ru"] #main #project_list[st-table="nationalities"] > tbody > tr > td:nth-child(5)::before { content: 'Код: '; }
/* the channel and role labels of a message template wrap inside their line */
#main #message_templates_list > tbody > tr > td:nth-child(3) .label,
#main #message_templates_list > tbody > tr > td:nth-child(4) .label {
display: inline-block;
margin: 2px 0 2px 4px;
white-space: nowrap;
}
/* ---------------------------------------------------------------------------
13ai. THE BUSINESS CUSTOMER'S ACCOUNTING GRID BECOMES CARDS
app.accounting.bCustomers: nineteen fixed columns under a two-row header (the "sum" header spans debit and credit).
select · row number · TYPE · number; created · pay date; paid · canceled; voucher · start date; project · reconcile;
details; client; four money tiles (amount, debit, credit, total in USD); statement. Seven of the filters stay.
--------------------------------------------------------------------------- */
#main #business_customer_accounting_table,
#main #business_customer_accounting_table > thead,
#main #business_customer_accounting_table > tbody,
#main #business_customer_accounting_table > tfoot {
display: block !important;
}
#main #business_customer_accounting_table > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px 8px;
margin-bottom: 8px;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#main #business_customer_accounting_table > tbody > tr > td {
display: block !important;
box-sizing: border-box;
border: 0 !important;
padding: 0;
background: transparent !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal;
text-align: start !important;
vertical-align: middle;
overflow: visible;
text-overflow: clip;
font-size: 12px;
line-height: 1.4;
color: #4c4f53;
}
#main #business_customer_accounting_table > tbody > tr > td:nth-child(2) {
order: 1;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
}
#main #business_customer_accounting_table > tbody > tr > td:nth-child(1) {
order: 2;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-end: 8px;
white-space: nowrap;
line-height: 21px;
color: #999;
}
#main #business_customer_accounting_table > tbody > tr > td:nth-child(3) {
order: 3;
flex: 1 1 0;
min-width: 0 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #333;
word-break: break-word;
}
#main #business_customer_accounting_table > tbody > tr > td:nth-child(8) {
order: 4;
flex: 0 0 auto;
align-self: flex-start;
margin-inline-start: 6px;
margin-inline-end: 6px;
padding: 1px 6px;
border-radius: 3px;
background: #e9ecef !important;
font-size: 11px;
line-height: 19px;
color: #555;
white-space: nowrap;
}
#main #business_customer_accounting_table > tbody > tr > td:nth-child(8):empty {
display: none !important;
}
#main #business_customer_accounting_table > tbody > tr::after {
content: '';
display: block;
order: 5;
flex: 1 0 100%;
height: 0;
}
#main #business_customer_accounting_table > tbody > tr > td:nth-child(4) { order: 6; flex: 1 1 50%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(4)::before { content: 'תאריך יצירה: '; color: #666; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(4):empty::after { content: '\2014'; color: #777; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(5) { order: 7; flex: 1 1 50%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(5)::before { content: 'תאריך תשלום: '; color: #666; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(5):empty::after { content: '\2014'; color: #777; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(6) { order: 8; flex: 1 1 50%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(6)::before { content: 'שולם: '; color: #666; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(6):empty::after { content: '\2014'; color: #777; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(7) { order: 9; flex: 1 1 50%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(7)::before { content: 'מבוטל: '; color: #666; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(7):empty::after { content: '\2014'; color: #777; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(9) { order: 10; flex: 1 1 50%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(9)::before { content: 'מספר שובר: '; color: #666; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(9):empty::after { content: '\2014'; color: #777; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(10) { order: 11; flex: 1 1 50%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(10)::before { content: 'תאריך יציאה: '; color: #666; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(10):empty::after { content: '\2014'; color: #777; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(11) { order: 12; flex: 1 1 60%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(11)::before { content: 'שם הפרוייקט: '; color: #666; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(11):empty::after { content: '\2014'; color: #777; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(13) { order: 13; flex: 1 1 40%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(13)::before { content: 'התאמה: '; color: #666; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(13):empty::after { content: '\2014'; color: #777; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(12) { order: 14; flex: 1 1 100%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(12)::before { content: 'פרטים: '; color: #666; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(12):empty::after { content: '\2014'; color: #777; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(15) { order: 15; flex: 1 1 100%; padding-top: 3px; padding-inline-end: 6px; word-break: break-word; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(15)::before { content: 'לקוח: '; color: #666; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(15):empty::after { content: '\2014'; color: #777; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(14),
#main #business_customer_accounting_table > tbody > tr > td:nth-child(16),
#main #business_customer_accounting_table > tbody > tr > td:nth-child(17),
#main #business_customer_accounting_table > tbody > tr > td:nth-child(19) {
flex: 1 1 50%;
align-self: stretch;
margin-top: 8px;
padding: 4px 3px 5px;
background: #f2f4f7 !important;
text-align: center !important;
font-size: 13px;
font-weight: 700;
line-height: 1.25;
color: #333;
white-space: nowrap;
direction: ltr;
unicode-bidi: isolate;
}
#main #business_customer_accounting_table > tbody > tr > td:nth-child(14)::before,
#main #business_customer_accounting_table > tbody > tr > td:nth-child(16)::before,
#main #business_customer_accounting_table > tbody > tr > td:nth-child(17)::before,
#main #business_customer_accounting_table > tbody > tr > td:nth-child(19)::before {
display: block;
margin-bottom: 1px;
font-size: 11px;
font-weight: 400;
line-height: 1.2;
color: #666;
direction: rtl;
white-space: normal;
}
#main #business_customer_accounting_table > tbody > tr > td:nth-child(14) { order: 16; border-start-start-radius: 6px; border-end-start-radius: 6px; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(14)::before { content: 'סכום'; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(14):empty::after { content: '\2014'; color: #777; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(16) { order: 17; margin-top: 8px; border-start-end-radius: 6px; border-end-end-radius: 6px; border-inline-start: 1px solid #fff !important; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(16)::before { content: 'חובה'; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(16):empty::after { content: '\2014'; color: #777; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(17) { order: 18; margin-top: 8px; border-start-start-radius: 6px; border-end-start-radius: 6px; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(17)::before { content: 'זכות'; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(17):empty::after { content: '\2014'; color: #777; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(19) { order: 19; border-start-end-radius: 6px; border-end-end-radius: 6px; border-inline-start: 1px solid #fff !important; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(19)::before { content: 'סה"כ בדולר'; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(19):empty::after { content: '\2014'; color: #777; }
#main #business_customer_accounting_table > thead > tr:first-child {
display: none;
}
#main #business_customer_accounting_table > thead > tr.smart-form {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding: 8px 6px;
margin-bottom: 8px;
background: #f4f6f9;
border: 1px solid #e2e6ea;
border-radius: 6px;
}
#main #business_customer_accounting_table > thead > tr.smart-form > th {
display: none !important;
border: 0 !important;
padding: 0;
}
#main #business_customer_accounting_table > thead > tr.smart-form > th::before {
display: block;
font-size: 11px;
font-weight: 400;
color: #666;
padding-bottom: 1px;
}
#main #business_customer_accounting_table > thead > tr.smart-form input,
#main #business_customer_accounting_table > thead > tr.smart-form select {
width: 100% !important;
min-width: 0 !important;
}
#main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(3) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(3)::before { content: 'סוג'; }
#main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(6) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(6)::before { content: 'שולם'; }
#main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(7) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(7)::before { content: 'מבוטל'; }
#main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(8) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(8)::before { content: 'מספר'; }
#main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(9) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(9)::before { content: 'מספר שובר'; }
#main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(12) { display: block !important; box-sizing: border-box; flex: 1 1 50%; max-width: 50% !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(12)::before { content: 'פרטים'; }
#main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(15) { display: block !important; box-sizing: border-box; flex: 1 1 100%; max-width: none !important; min-width: 0 !important; width: auto !important; padding: 0 3px 4px; }
#main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(15)::before { content: 'לקוח'; }
#main #business_customer_accounting_table {
min-width: 0 !important;
width: 100% !important;
background-image: none;
}
#main #business_customer_accounting_table > tfoot > tr,
#main #business_customer_accounting_table > tfoot > tr > td {
display: block !important;
width: 100%;
border: 0 !important;
}
#main #business_customer_accounting_table > tbody > tr.table-responsive-toggle-tr {
display: block;
margin-top: -8px;
margin-bottom: 8px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fafafa !important;
}
#main #business_customer_accounting_table > tbody > tr.table-responsive-toggle-tr > td {
display: block !important;
width: 100%;
}
#main #business_customer_accounting_table .table-responsive-toggle-info-button {
font-size: 18px;
padding: 6px;
margin-inline-end: 4px;
vertical-align: middle;
cursor: pointer;
}
html[lang="en"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(4)::before { content: 'Create date: '; }
html[lang="en"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(5)::before { content: 'Pay date: '; }
html[lang="en"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(6)::before { content: 'Paid: '; }
html[lang="en"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(7)::before { content: 'Canceled: '; }
html[lang="en"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(9)::before { content: 'Voucher Number: '; }
html[lang="en"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(10)::before { content: 'Start Date: '; }
html[lang="en"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(11)::before { content: 'Project Name: '; }
html[lang="en"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(13)::before { content: 'reconcile: '; }
html[lang="en"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(12)::before { content: 'Details: '; }
html[lang="en"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(15)::before { content: 'Client: '; }
html[lang="en"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(14)::before { content: 'Amount'; }
html[lang="en"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(16)::before { content: 'Debit'; }
html[lang="en"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(17)::before { content: 'Credit'; }
html[lang="en"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(19)::before { content: 'Total in USD'; }
html[lang="en"] #main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(3)::before { content: 'Type'; }
html[lang="en"] #main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(6)::before { content: 'Paid'; }
html[lang="en"] #main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(7)::before { content: 'Canceled'; }
html[lang="en"] #main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(8)::before { content: 'Number'; }
html[lang="en"] #main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(9)::before { content: 'Voucher Number'; }
html[lang="en"] #main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(12)::before { content: 'Details'; }
html[lang="en"] #main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(15)::before { content: 'Client'; }
html[lang="ru"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(4)::before { content: 'Создать дату: '; }
html[lang="ru"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(5)::before { content: 'Дата оплаты: '; }
html[lang="ru"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(6)::before { content: 'Оплачено: '; }
html[lang="ru"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(7)::before { content: 'Отменено: '; }
html[lang="ru"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(9)::before { content: 'Номер ваучера: '; }
html[lang="ru"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(10)::before { content: 'Дата выезда: '; }
html[lang="ru"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(11)::before { content: 'Название проекта: '; }
html[lang="ru"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(13)::before { content: 'согласование: '; }
html[lang="ru"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(12)::before { content: 'Подробности: '; }
html[lang="ru"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(15)::before { content: 'Клиент: '; }
html[lang="ru"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(14)::before { content: 'Сумма'; }
html[lang="ru"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(16)::before { content: 'Дебет'; }
html[lang="ru"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(17)::before { content: 'Кредит'; }
html[lang="ru"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(19)::before { content: 'Сумма в USD'; }
html[lang="ru"] #main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(3)::before { content: 'Тип'; }
html[lang="ru"] #main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(6)::before { content: 'Оплачено'; }
html[lang="ru"] #main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(7)::before { content: 'Отменено'; }
html[lang="ru"] #main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(8)::before { content: 'Номер'; }
html[lang="ru"] #main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(9)::before { content: 'Номер ваучера'; }
html[lang="ru"] #main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(12)::before { content: 'Подробности'; }
html[lang="ru"] #main #business_customer_accounting_table > thead > tr.smart-form > th:nth-child(15)::before { content: 'Клиент'; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(18) { order: 90; flex: 1 1 100%; padding-top: 5px; word-break: break-word; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(18)::before { content: 'חשבון לקוח עסקי: '; color: #666; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(18):empty::after { content: '\2014'; color: #777; }
html[lang="en"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(18)::before { content: 'Statement: '; }
html[lang="ru"] #main #business_customer_accounting_table > tbody > tr > td:nth-child(18)::before { content: 'Выписку: '; }
/* the header's second label row (debit / credit under "sum") goes too;
the bulk-actions row the template puts in the header stays a block */
#main #business_customer_accounting_table > thead > tr:nth-child(2) { display: none; }
#main #business_customer_accounting_table > thead > tr:last-child:not(.smart-form) > td { display: block !important; width: 100%; }
/* the type is the raw code (inv / rct / rec) and the number cell may hold
a print link; the tiles carry the currency sign the cell prints */
#main #business_customer_accounting_table > tbody > tr > td:nth-child(8) select-language { cursor: pointer; }
/* the project cell is a link that may be empty */
#main #business_customer_accounting_table > tbody > tr > td:nth-child(11):has(> a:empty)::after { content: '4'; color: #777; }
#main #business_customer_accounting_table > tbody > tr > td:nth-child(8) { flex: 0 1 auto; max-width: 55% !important; overflow: hidden; text-overflow: ellipsis; }
#main #business_customer_accounting_table > tbody > tr > td.item-align-center { text-align: start !important; }
/* the page nests the grid in three padded containers: 60px lost on each
side of a 320px phone. Their side padding goes while the grid is inside */
#main .ta-container:has(#business_customer_accounting_table) {
padding-left: 3px !important;
padding-right: 3px !important;
}
/* the details span is ellipsised by the theme; on the card it wraps */
#main #business_customer_accounting_table > tbody > tr > td:nth-child(12) .details {
display: inline;
width: auto;
max-width: none;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
/* ---------------------------------------------------------------------------
13b (phone sizes). THE TOTALS STRIP AT PORTRAIT-PHONE WIDTH
The grid is stated in the all-widths block above. Here the figures come down
from the theme's 18px to 14px bold — "5,243,566.57 $" is 93px at that size,
measured in the harness — and the column floor with them, so a 360px phone
still gets three columns and a 320px one falls back to two.
--------------------------------------------------------------------------- */
#main ul#sparks {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(auto-fit, minmax(max(94px, 30%), 1fr));
}
#main ul#sparks > li.sparks-info h5 > span,
#main ul#sparks > li.sparks-info .currency > span {
font-size: 14px;
font-weight: 700;
line-height: 1.2;
}
/* ---------------------------------------------------------------------------
13c. THE FOUR REFERENCE SEARCHES ABOVE THE ORDER LIST
Order number / PNR, invoice, voucher, e-ticket. Each is an `.input-group` in
its own `col-sm-3`, so on a phone they stack to four full-width rows and cost
about 190px before the list starts. Two by two halves that, and the fields
stay wide enough for their placeholder text.
--------------------------------------------------------------------------- */
#main #orders-table-widget .widget-body-toolbar > .row > .col-sm-12 > [class*="col-sm-3"],
#main #project-table-widget .widget-body-toolbar > .row > .col-sm-12 > [class*="col-sm-3"] {
float: right;
width: 50%;
padding-left: 3px;
padding-right: 3px;
}
#main #orders-table-widget .widget-body-toolbar > .row > .col-sm-12 > [class*="col-sm-3"]:nth-of-type(odd),
#main #project-table-widget .widget-body-toolbar > .row > .col-sm-12 > [class*="col-sm-3"]:nth-of-type(odd) {
clear: both;
}
#main #orders-table-widget .widget-body-toolbar .input-group,
#main #project-table-widget .widget-body-toolbar .input-group {
margin-bottom: 6px;
}
/* At half width the longest placeholder — "PNR / מס הזמנה" — needs 112px in a
116px box, i.e. it just fits and looks clipped. The field cannot use a
smaller font: anything under 16px makes iOS zoom on focus (section 4), and
that trade is not worth four pixels. Take the pixels from the magnifier
instead, which needs 30px to be tappable, not 35. */
#main #orders-table-widget .widget-body-toolbar .input-group-addon,
#main #orders-table-widget .widget-body-toolbar .input-group-btn,
#main #project-table-widget .widget-body-toolbar .input-group-addon,
#main #project-table-widget .widget-body-toolbar .input-group-btn {
min-width: 0;
padding-left: 6px;
padding-right: 6px;
}
#main #orders-table-widget .widget-body-toolbar .input-group .form-control,
#main #project-table-widget .widget-body-toolbar .input-group .form-control {
padding-left: 5px;
padding-right: 5px;
}
/* ---------------------------------------------------------------------------
14. THE DASHBOARD TILES AT THE TOP OF THE ORDER LIST
Four `article.col-sm-3` widgets — pending orders, orders in debt, open
service calls, leads — stack to full width on a phone and occupy y=21 to
y=471. That is 450px of an 844px screen spent on four numbers before the
first thing you can act on. Two by two puts the same four numbers in about
160px and leaves the list on the first screen.
--------------------------------------------------------------------------- */
#main #content article[class*="col-sm-3"] {
float: right;
width: 50%;
padding-left: 4px;
padding-right: 4px;
}
/* Two floats per row only look like a grid if each pair starts its own row —
otherwise a shorter tile lets the next one ride up beside it and the four
come out as a staircase (measured: y = 118, 118, 168, 219). `clear` on every
odd tile is what a float layout has instead of `:has()`, which is not old
enough to rely on across the phones this has to work on. */
#main #content article[class*="col-sm-3"]:nth-of-type(odd) {
clear: both;
}
/* and an even height, so a tile whose number has not loaded yet does not
shrink away from the one beside it */
#main #content article[class*="col-sm-3"] .jarviswidget {
min-height: 76px;
}
#main #content article[class*="col-sm-3"] .jarviswidget {
margin-bottom: 8px;
}
#main #content article[class*="col-sm-3"] .jarviswidget > header {
height: auto;
min-height: 0;
padding: 4px 8px;
/* the title is a floated h2, so it contributes nothing to its parent's
height: measured, the header came out 9px tall — its padding and border —
around a 16px title, and the label was sliced off. Same float-containment
fault as the calendar's widget toolbar. */
overflow: hidden;
}
#main #content article[class*="col-sm-3"] .jarviswidget > header > h2 {
font-size: 12px !important;
font-weight: 600;
line-height: 1.3;
white-space: normal !important;
max-width: 100% !important;
}
/* the icon repeats what the label says and costs a third of the tile */
#main #content article[class*="col-sm-3"] .jarviswidget > header > .widget-icon,
#main #content article[class*="col-sm-3"] .jarviswidget > header > .widget-toolbar {
display: none !important;
}
#main .small-boxes-body {
padding: 2px 8px 6px !important;
}
#main .small-boxes-body h1 {
font-size: 22px !important;
margin: 0 !important;
line-height: 1.2;
}
/* ---------------------------------------------------------------------------
15. THE PROJECT TABS
The project screen ships two tab controls: `.mt-tabs-screen`, the real strip,
and `.mt-tabs-mobile`, a dropdown. The theme swaps them at 670px, so a phone
already gets the dropdown — but its trigger is a small button reading
"Project tabs", in English, because `project.project_tabs` has no Hebrew
translation. On a Hebrew screen it does not read as navigation at all, which
is why it was reported as the tabs being missing.
The dropdown is also short: the strip offers nine tabs, the dropdown eight —
`service_categories` (קטגוריות שירותים) was never added to it. Fixing that
means editing the template, which means rebuilding `templates.cache.js`.
So the strip is what gets shown, as a horizontal scroller. Every tab, in
Hebrew, with its icon, and the missing one included — without touching a
template.
--------------------------------------------------------------------------- */
/* EVERY TAB STRIP SCROLLS SIDEWAYS INSTEAD OF STACKING.
`.mt-tabs.horizontal` is used twice: for the project tabs, and for the strip
of open order tabs at the top of every screen. Its tabs are floated, so when
they run out of room they wrap — and the strip grows downwards. Measured with
only three dockets open: two lines, 77px. Someone who opens a dozen and never
taps the ✕ ends up with five lines of tab chrome above every screen, which is
exactly what was reported. Scrolling sideways keeps it one line however many
are open, and closing them stays entirely optional. */
#main .mt-tabs.horizontal {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
max-width: 100%;
}
#main .mt-tabs.horizontal > div,
#main .mt-tabs.horizontal > .mt-tab,
#main .mt-tabs.horizontal a.mt-tab {
display: inline-block !important;
float: none !important;
white-space: nowrap;
vertical-align: bottom;
}
/* the project strip is hidden below 670px in favour of a dropdown whose only
label is untranslated English — see the note in the section above */
#main .mt-tabs-screen {
display: block !important;
}
#main .mt-tabs-screen > div {
min-width: 100%;
}
#main .mt-tabs-screen a.mt-tab {
min-height: 38px;
line-height: 26px;
padding: 6px 10px;
font-size: 13px;
}
/* the ✕ on an order tab is the only way to close it; it must be tappable
without hitting the tab itself and switching screens */
#main ribbon-tabs .mt-tabs.horizontal .mt-tab {
padding-inline-start: 4px;
}
#main ribbon-tabs .mt-tabs.horizontal .fa-close {
padding: 10px 6px;
margin: -10px 0;
font-size: 13px;
}
/* a hairline on the leading edge shows there is more to the side */
#main ribbon-tabs .mt-tabs.horizontal {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0));
background-size: 16px 100%;
background-repeat: no-repeat;
background-position: left center;
background-attachment: local;
}
/* the English dropdown is now redundant */
#main .mt-tabs-mobile {
display: none !important;
}
/* ---------------------------------------------------------------------------
12. PAGE FURNITURE SHRINKS SO CONTENT GETS THE SCREEN
--------------------------------------------------------------------------- */
#content {
padding: 8px 10px;
}
/* WIDGET TITLES GET THE ROOM THEY ACTUALLY HAVE.
The application carries `@media (max-width:1024px) .small-box-header
{width:60px !important}`, and the dashboard's widget headings wear that
class. At 390px the heading is pinned to 60px inside a 335px header, so
"משתמשים פעילים" renders as "משתמ…" while 240px sits empty beside it.
`!important` on both sides means specificity decides, and anchoring on
`#main` wins. `calc` leaves room for the widget icon and its toolbar. */
#main .jarviswidget > header > h2,
#main .jarviswidget > header > h2.small-box-header {
width: auto !important;
max-width: calc(100% - 110px);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#ribbon .breadcrumb {
padding: 0 10px;
}
.page-title {
font-size: 20px;
}
.jarviswidget > header h2 {
font-size: 14px;
}
}