/* Lifted from the <style> block of mocks/admin/setup/offers.html.
   That page defines its own --navy / --text-muted / --light / --shadow; those are
   mapped onto the tokens admin.css already carries rather than redefined, which is
   what the removal of the second palette was for. */

/* The tab strip and the body under it are one card, and it stood at the page edge
   while the title above it stood at 20 - measured 0→1260 against a header at
   20→1340. On the axis now, like every other screen. */
/* Not a card any more. The tabs are a switcher now, not a strip attached to a
   sheet, so what is under them is the page - and the bands on it carry their own
   panels, the same as the orders, invoices, customers and returns screens.
   The name stays because the chips are scoped to it. */
.tab-body{display:contents}

.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px}
.search-box{position:relative;flex:1;min-width:200px;max-width:300px}
.search-box input{width:100%;padding:8px 14px 8px 36px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;outline:none;transition:border .2s;direction:rtl}
.search-box input:focus{border-color:var(--primary)}
.search-box .icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px}
select.filter-sel{padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;outline:none;background:var(--card);cursor:pointer}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-ll)}
.btn-icon{padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--card);cursor:pointer;font-size:14px;transition:all .2s}
.btn-icon:hover{border-color:var(--primary);background:var(--primary-ll)}

/* ── The chips on this screen ────────────────────────────────────────────────
   admin.css carries the .badge-* colours and no base rule for the name, so these
   were painted text with no padding and no corner - measured 0px on both. Exactly
   the mock bug recorded on 11 September for the delivery screen, still sitting on
   this one.

   Scoped to .tab-body rather than a bare .badge: admin.css uses that name for the
   counter on the notification bell, and a page sheet is linked on every screen. */
.tab-body .badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;
    border-radius:20px;font-size:11px;font-weight:700;line-height:1.45;white-space:nowrap}

/* And the tints came from Bootstrap and Material, not from us - five greens and two
   reds that exist nowhere else in the system. On the tokens now. */
.badge-active{background:var(--success-l);color:var(--success)}
.badge-inactive{background:var(--danger-l);color:var(--danger)}
.badge-scheduled{background:var(--warning-l);color:var(--warning)}
.badge-expired{background:var(--slate-ll);color:var(--muted)}
/* The kind of discount, not its state - so none of them borrows a status colour. */
.badge-pct{background:var(--primary-ll);color:var(--primary)}
.badge-fixed{background:var(--slate-l);color:var(--slate)}
.badge-bxgy{background:var(--orange-l);color:var(--orange)}
/* Delivery gets the brand's movement colour - it is the one offer about getting there. */
.badge-ship{background:var(--accent-l);color:var(--accent-d)}
.badge-flash{background:var(--accent-l);color:var(--accent-d)}

/* Not stretched: a bundle genuinely says more than a percentage offer does, so an
   equal box manufactures a hole in the short one - 51px of nothing under its dates,
   measured. The same call as the points side panel earlier today, for the same
   reason. Each card takes the height its own facts need. */
.offers-grid{margin:0 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
             gap:16px;align-items:start}
/* A block card inside a stretched grid leaves its slack *under the footer*: a taller
   neighbour in the same row gave every short card a 42px empty strip inside its own
   border. The exact fault the product card was fixed for on 9 September, and the same
   fix - a column that pins the footer to the bottom and lets the body take up the
   difference.

   And nothing in here was ever given a line-height, so all of it fell on the browser's
   `normal` - tight on Arabic, and tightest of all on the small text that wraps. */
.offer-card{display:flex;flex-direction:column;line-height:1.45;
            border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
            background:var(--card);transition:box-shadow .2s}
.offer-card:hover{box-shadow:var(--elev-1)}
.offer-card .card-header{padding:14px 16px;display:flex;align-items:flex-start;gap:12px;border-bottom:1px solid var(--border)}
/* The type glyph, now standing in the frame rather than beside the name. */
.offer-icon{font-size:44px;line-height:1}
.offer-icon.pct{color:var(--slate)}
.offer-icon.fixed{color:var(--success)}
.offer-icon.bxgy{color:var(--warning)}
.offer-icon.ship{color:var(--accent-d)}
.offer-icon.is-flash{color:var(--danger)}
/* The name is the subject of the card and was the lightest thing on it - 600 against
   three 700 pills right underneath. And 1.3 on bold 14px Arabic clips the descenders,
   the same measurement that took the product card's name to 1.45. */
.offer-card .card-title{font-weight:700;font-size:14px}
.offer-card .card-desc{font-size:12px;color:var(--muted);margin-top:2px}
.offer-card .card-body{padding:12px 16px;flex:1}
.offer-card .card-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
/* `.card-meta` asked for 12px and `.card-meta-item` - a plain div - put it straight
   back to 14 off `*{font-size:14px}` in admin.css, so the dates were reading the same
   size as the name above them. That rule re-sets, it does not inherit (9 September),
   and `_shared.css` only lets text elements back through - a div in between takes it
   again. So the size goes where the text actually is. */
.offer-card .card-meta-item label{color:var(--muted);display:block;font-size:11px}
.offer-card .card-meta-item span{font-weight:700;font-size:12px}
/* The buttons stay quiet in the corner rather than shouting on every card - the same
   decision the brand card settled on 9 September. */
.offer-card .card-footer{padding:10px 16px;border-top:1px solid var(--border);
                         display:flex;align-items:center;justify-content:space-between;gap:8px}

.progress-bar-wrap{background:#f0f2f5;border-radius:6px;height:6px;overflow:hidden;margin-top:6px;width:100%}
.progress-bar{height:100%;border-radius:6px;background:var(--primary)}
.progress-bar.warning{background:var(--warning)}
.progress-bar.danger{background:var(--danger)}
.progress-bar.success{background:var(--success)}

/* On the 20px axis the rest of the screen stands on, and not stretched.

   It was running 0 → 1360 while the control panel, the tabs and the offers grid beside
   it all sit 20 → 1340 - so the cards ran under the sidebar on one side and the
   scrollbar on the other. And every card was being forced to the tallest: a banner with
   no dead-destination line carries one row fewer and was given the space anyway. */
.banners-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
              gap:16px;margin:0 20px;align-items:start}
/* Nothing in here was given a line-height, so all of it fell on the browser's
   `normal` - tight on Arabic and tightest on the 11px meta rows that wrap. */
.banner-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
             background:var(--card);line-height:1.45}
/* The banner's own picture, not a gradient with its sort number written across it.
   ImageUrl is required on the entity - every banner has always had one and the card was
   the only thing not showing it.

   `cover`, unlike the offer card's thumbnail and unlike a logo: a banner is artwork cut
   to a strip in the first place, and the storefront will crop it too. The ground under
   it stays --bg for the moment the picture is still loading. */
.banner-preview{width:100%;height:140px;background:var(--bg);position:relative;overflow:hidden}
.bp-img{position:absolute;inset:0;background-size:cover;background-position:center;
        background-repeat:no-repeat}
/* Behind the picture, so it only ever shows when there is no picture to cover it. */
.bp-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;color:#A9B7CE}
/* The order as a corner mark: a fact about the banner rather than a stand-in for it. */
.banner-preview .banner-num{position:absolute;top:8px;inset-inline-start:8px;
                            min-width:22px;height:22px;padding:0 6px;border-radius:20px;
                            background:rgba(10,22,40,.55);color:#fff;font-size:11px;
                            font-weight:800;display:flex;align-items:center;justify-content:center}
.banner-info{padding:12px 14px}
.banner-info .b-name{font-weight:700;font-size:13px}
.banner-info .b-meta{font-size:11px;color:var(--muted);margin-top:4px;display:flex;gap:10px;flex-wrap:wrap}
.banner-info .b-actions{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:8px}
.position-badge{padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600;background:var(--primary-ll);color:var(--primary)}

.coupon-code{font-family:monospace;font-size:13px;font-weight:700;background:var(--bg);padding:3px 8px;border-radius:6px;letter-spacing:1px;color:var(--primary);border:1px solid var(--border)}
/* The count and its ceiling belong together - spread across a wide column they
   read as two separate figures. The cell takes what it needs and no more, and
   the bar under it follows the same width. */
.usage-cell{width:1%;white-space:nowrap}
.usage-count{display:flex;justify-content:flex-start;gap:4px;font-size:11px;color:var(--text2)}
.usage-count b{font-weight:700;color:var(--text)}
.usage-cell .progress-bar-wrap{max-width:110px}

/* Three icons do not need the widest column on the table - it was measured at 179px,
   wider than the code everyone is reading.

   Not .col-act: that name belongs to the orders table, where it is a 190px sticky
   column with a shadow. Every page sheet is linked on every screen, so the orders
   rule was landing on this table - the collision the naming rule exists to stop. */
.cp-act{width:1%;white-space:nowrap}

/* The picture is what the offer is selling, so it gets a surface of its own across
   the top of the card instead of a 38px square beside the name - at that size it read
   as a favicon rather than an image.

   The same band the product card already uses: 150px on --bg with `cover`, so a card
   with a picture and a card with a product photo are the same object on two screens.

   And it is on *every* card, not only the ones with a picture. Drawing it conditionally
   made a card with an image 150px taller than its neighbours, and in a grid that is a
   row of holes rather than a gallery - measured at 363 against 213. Without a picture
   the type glyph stands in the frame, the way a product card draws a placeholder rather
   than leaving a gap, and it carries the colour the header icon used to.
   `cover` and not `contain` here for the reason the thumbnail wanted the opposite -
   a strip built for the image can fill it, where a tiny square could only crop it to
   nothing. The uploads measured 16:9 and wider, so the crop is off the top and bottom. */
.offer-shot{height:150px;background:var(--bg);border-bottom:1px solid var(--border);
            flex-shrink:0;display:flex;align-items:center;justify-content:center}
.offer-shot img{width:100%;height:100%;object-fit:cover;display:block}

.points-layout{margin:0 20px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* The panel was painted --bg, which is the page background to the byte - so it read
   as a hole punched in the page rather than a surface holding anything. Same fault
   as the category tree floor on 9 September, and the same fix: the panel is white
   and the objects standing on it keep their own edge.

   The heading is the panel's own bar, the way .pts-set-head is the card's - a title
   with a 2px near-white rule under it was drawing a line nobody could see. */
.settings-section{background:var(--card);border-radius:var(--radius-lg);padding:16px;border:1px solid var(--border)}
.settings-section h3{font-size:13px;font-weight:800;color:var(--primary);
                     margin:-16px -16px 14px;padding:11px 14px;
                     border-bottom:1px solid var(--border);
                     border-radius:var(--radius-lg) var(--radius-lg) 0 0;
                     background:var(--bg);
                     display:flex;align-items:center;gap:8px}
.tier-table{width:100%;border-collapse:collapse;font-size:13px}
.tier-table th{background:var(--bg);color:var(--muted);padding:10px 14px;text-align:right;font-size:11px;font-weight:700;border-bottom:2px solid var(--border)}
.tier-table td{padding:8px 12px;border-bottom:1px solid var(--border)}
.tier-table tr:last-child td{border-bottom:none}

.hint-note{margin:0 20px 12px;display:flex;gap:8px;align-items:center;padding:10px 14px;background:var(--primary-ll);border-radius:8px;font-size:12px;color:var(--primary)}

/* ── Names for what used to be style attributes in the markup ─────────────────
   Eight of them, all static. The screens carry no inline styles; the one left is
   the usage bar's width, which is a figure and belongs there. */
.card-grow{flex:1;min-width:0}
/* The name and what it covers are one identity and sit tight together; the chips are
   a different fact about the offer, so they get a real break rather than the 6px that
   was spacing them like part of the name. Same rhythm the product card settled on. */
.card-chips{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.card-foot-note{font-size:11px;color:var(--muted)}
.is-untargeted{color:var(--warning)}
.b-head{display:flex;align-items:center;justify-content:space-between}
.b-meta.is-dead{color:var(--danger)}

/* A row that opens something says so under the cursor - the same as the order, the
   invoice and the return rows. */
.is-clickable{cursor:pointer}

/* ── Who may use a coupon ─────────────────────────────────────────────────────
   The conditions read as chips rather than a list of checkboxes: the set is short,
   and what matters is seeing at a glance which of them are on. */
.aud-note{display:flex;gap:8px;align-items:flex-start;background:var(--primary-ll);border:1px solid var(--primary-l);border-radius:var(--radius);padding:10px 12px;font-size:12px;line-height:1.6;color:var(--primary);margin-bottom:14px}
.aud-note i{font-size:15px;flex-shrink:0;margin-top:1px}
.aud-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.aud-chip{padding:6px 12px;border:1px solid var(--border);border-radius:20px;background:var(--card);color:var(--text2);font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:.15s}
.aud-chip:hover{border-color:var(--primary)}
.aud-chip.is-on{background:var(--primary);border-color:var(--primary);color:#fff}
.aud-picked{display:inline-flex;align-items:center;gap:6px;padding:5px 8px 5px 4px;border:1px solid var(--primary-l);border-radius:20px;background:var(--primary-ll);color:var(--primary);font-size:12px;font-weight:600}
.aud-picked button{border:none;background:none;color:inherit;cursor:pointer;display:flex;padding:0;font-size:13px}
/* The search answers under the box it belongs to, not over the form. */
.aud-results{margin-top:6px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.aud-result{display:flex;flex-direction:column;gap:2px;width:100%;padding:8px 12px;border:none;border-bottom:1px solid var(--border);background:var(--card);text-align:start;cursor:pointer;font-family:inherit}
.aud-result:last-child{border-bottom:none}
.aud-result:hover{background:var(--primary-ll)}
.aud-result strong{font-size:13px;color:var(--text)}
.aud-result span{font-size:11px;color:var(--muted)}
/* The audience under the code, quieter than it - the code is what you look for. */
.coupon-aud{margin-top:4px;font-size:11px;color:var(--muted);line-height:1.5}
/* The number of areas under a governorate, on its chip - a governorate with none of
   them yet covers nothing, and the chip should say so before it is ticked. */
.aud-n{font-size:10px;font-weight:800;padding:0 5px;border-radius:10px;background:rgba(0,0,0,.1)}
.aud-chip.is-on .aud-n{background:rgba(255,255,255,.25)}

/* ── The sections of the coupon form ──────────────────────────────────────────
   The same hairline the toggle rows already draw between themselves, used between
   the sections too: four of them in one scrolling window, and a heading alone was
   not enough to say where one ended and the next began.

   On the section rather than under the heading, so the line sits in the gap and
   not tucked under a title with its fields hanging below it. Scoped to this modal:
   .form-section is shared with every admin form, and most of them have one. */
.coupon-form .form-section + .form-section{
    border-top:1px solid var(--border);
    padding-top:18px;
}

/* ── The points programme ─────────────────────────────────────────────────────
   A scheme is published and never edited, so the screen's job is to say which one
   is in force, what it does differently from the others, and what is coming. */

/* The bar carries what the cards cannot: that a change is dated and when. It used
   to repeat the live scheme's own facts, which the card below already said.

   It is a notice, not a row of controls, so it is not a .control-panel: that shape
   pads only the bands it knows (.filters-row, .status-tabs, .ops-bar), and a notice
   dropped into it came out as a 20px stripe with the text flush against the border.
   Same tinted shape as .hint-note and .aud-note already on this screen. */
.pts-notice{margin:12px 20px;padding:11px 14px;border-radius:var(--radius);
            display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.6}
.pts-notice .ti{font-size:16px;flex-shrink:0}
.pts-notice strong{font-weight:800}
.pts-ahead{background:var(--orange-l);color:var(--orange)}
.pts-ahead strong{color:var(--text2)}
/* Nothing published means no order earns anything, which is worth shouting. */
.pts-now-off{background:var(--danger-l);color:var(--danger);font-size:13px;font-weight:700}

/* The lists are as tall as their contents; stretching them left a column of air
   under the shorter one. */
.points-layout{align-items:start}
.pts-side{display:flex;flex-direction:column;gap:20px}
/* A button in a section heading sits at the far end of it. */
.pts-h-btn{margin-inline-start:auto}

.pts-set{border:1px solid var(--border);border-radius:var(--radius);padding:14px;background:var(--card)}
.pts-set + .pts-set{margin-top:12px}
/* The live one is the answer to "what is running", so it carries the brand edge and
   a tinted head - the scheduled and retired ones are reference beside it. */
.pts-set.is-live{border-color:var(--primary-l);box-shadow:var(--elev-1)}
.pts-set-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
               margin:-14px -14px 12px;padding:11px 14px;border-bottom:1px solid var(--border);
               border-radius:var(--radius) var(--radius) 0 0}
.pts-set.is-live .pts-set-head{background:var(--primary-ll);border-bottom-color:var(--primary-l)}
.pts-set-head strong{font-size:14px;font-weight:800;margin-inline-end:8px}
.pts-set-date{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px}

/* What the scheme does, as label and value. Five chips of one weight buried the one
   line that differs between two schemes. */
/* Label and value sit next to each other. Letting the value column take the rest of
   the card put half a card of air between a label and the thing it names. */
/* Nothing here was given a line-height, so every row fell on the browser's `normal`
   - a 16px box on 14px text, which is tight on Arabic and tightest on the letters
   that hang below the line (the ض in مضاعف, the ط in بيتطبّق). Five rows of it read
   as one block of text rather than five facts. */
.pts-spec{display:grid;grid-template-columns:max-content max-content;justify-content:start;
          gap:9px 16px;margin:0 0 14px;font-size:12px;line-height:1.6}
.pts-spec dt{color:var(--muted);font-weight:700}
.pts-spec dd{margin:0;color:var(--text2)}

/* The two tables are the same shape, so each says which one it is. */
.pts-band + .pts-band{margin-top:12px}
.pts-band-cap{display:flex;align-items:center;gap:5px;margin-bottom:5px;
              font-size:11px;font-weight:700;color:var(--primary)}
.pts-set .tier-table td{font-size:12px}
/* A band that earns nothing is silent otherwise. */
.pts-warn{color:var(--orange);margin-inline-start:5px}

.pts-set-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;
                 padding-top:12px;border-top:1px solid var(--border)}

@media (max-width:900px){
    .points-layout{grid-template-columns:1fr}
}

/* The card opens the form, the way the offer card does. */
.banner-card.is-clickable{cursor:pointer;transition:box-shadow .2s}
.banner-card.is-clickable:hover{box-shadow:var(--elev-1)}

/* admin.css gives .alert-banner no side margin, which is right inside a modal and wrong
   on a page: on the banners tab it was the only thing running edge to edge. Scoped to
   the tab body so the one in every modal keeps its full width. */
.tab-body > .alert-banner{margin:0 20px 12px}
.tab-body > .hint-note{margin-bottom:12px}

/* ── What else is already on these products ───────────────────────────────────
   Offers are written one at a time and land on the same shelf. Three figures, the
   offers involved, and the rows that actually lose money - the whole touched set
   would be thousands of products on a brand offer and would say nothing. */
.ovl-stats{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.ovl-stat{
    flex:1;min-width:120px;display:flex;flex-direction:column;gap:2px;
    padding:10px 12px;background:var(--bg);border:1px solid var(--border);
    border-radius:var(--radius);
}
.ovl-n{font-size:18px;font-weight:800;color:var(--text2);line-height:1.2}
.ovl-n.is-bad{color:var(--danger)}
.ovl-lbl{font-size:11px;color:var(--muted);line-height:1.45}

/* The table can outgrow the window on a narrow screen; it scrolls inside its own
   box rather than pushing the modal sideways. */
.ovl-wrap{max-height:260px;overflow:auto;margin-bottom:10px}

.ovl-loss{color:var(--danger);font-weight:700}

/* The deliberate tick, the way the return window override is deliberate: a red row
   on its own is something you stop seeing. */
.ovl-ack{
    display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;
    background:var(--danger-l);border:1px solid var(--danger);
    border-radius:var(--radius);font-size:12px;font-weight:600;color:var(--danger);
    cursor:pointer;
}
.ovl-ack input{accent-color:var(--danger);cursor:pointer}