/* ============================================================================ MGIoT — Warehouse Suite re-polish (silky & minimal) Scope: Products, Warehouses, SIM stock, Stock Transfers Every rule is scoped to the four warehouse view IDs so nothing leaks into the rest of the dashboard. Loaded last → wins on equal specificity. ========================================================================== */ :root { --whs-line: #EAEEF3; /* hairline */ --whs-line-soft: #F1F5F9; --whs-ink: #0F172A; --whs-ink-mid: #475569; --whs-ink-soft: #64748B; --whs-ink-faint: #94A3B8; --whs-bg-soft: #F8FAFC; --whs-brand: #0F4D96; --whs-brand-soft: #EEF4FB; --whs-radius: 16px; --whs-radius-sm: 12px; --whs-radius-pill: 999px; --whs-shadow: 0 1px 2px rgba(15,23,42,.04); --whs-shadow-lift: 0 10px 28px -12px rgba(15,23,42,.18), 0 2px 6px -2px rgba(15,23,42,.06); --whs-ease: 220ms cubic-bezier(.2,.7,.2,1); } #viewProducts, #viewWarehouses, #viewSims, #viewStockTransfers { -webkit-font-smoothing: antialiased; } /* ── Page rhythm ─────────────────────────────────────────────────────── */ #viewProducts .mg-page, #viewWarehouses .mg-page, #viewSims .mg-page { gap: 22px; } /* ── Cards ───────────────────────────────────────────────────────────── */ #viewProducts .mg-card, #viewWarehouses .mg-card, #viewSims .mg-card { border: 1px solid var(--whs-line); border-radius: var(--whs-radius); box-shadow: var(--whs-shadow); padding: 22px 22px 24px; } #viewProducts .mg-card-head, #viewWarehouses .mg-card-head, #viewSims .mg-card-head { gap: 14px; margin-bottom: 4px; } #viewProducts .mg-card-title, #viewWarehouses .mg-card-title, #viewSims .mg-card-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--whs-ink); } #viewProducts .mg-strip, #viewWarehouses .mg-strip, #viewSims .mg-strip { height: 3px; width: 34px; border-radius: var(--whs-radius-pill); background: linear-gradient(90deg, var(--whs-brand), #3B82F6); } /* ── Buttons (scoped) ────────────────────────────────────────────────── */ #viewProducts .mg-btn, #viewWarehouses .mg-btn, #viewSims .mg-btn, #viewStockTransfers .mg-btn { border-radius: 11px; border: 1px solid var(--whs-line); background: #fff; color: var(--whs-ink-mid); font-weight: 700; padding: 9px 14px; transition: background var(--whs-ease), border-color var(--whs-ease), box-shadow var(--whs-ease), transform var(--whs-ease); } #viewProducts .mg-btn:hover, #viewWarehouses .mg-btn:hover, #viewSims .mg-btn:hover, #viewStockTransfers .mg-btn:hover { background: var(--whs-bg-soft); border-color: #D7DEE8; transform: translateY(-1px); } #viewProducts .mg-btn:active, #viewWarehouses .mg-btn:active, #viewSims .mg-btn:active { transform: translateY(0); } #viewProducts .mg-btn--primary, #viewWarehouses .mg-btn--primary, #viewSims .mg-btn--primary { background: var(--whs-brand); border-color: var(--whs-brand); color: #fff; box-shadow: 0 6px 16px -8px rgba(15,77,150,.7); } #viewProducts .mg-btn--primary:hover, #viewWarehouses .mg-btn--primary:hover, #viewSims .mg-btn--primary:hover { background: #0B3E78; border-color: #0B3E78; } /* ── Toolbar: search + select ────────────────────────────────────────── */ #viewProducts .mg-toolbar, #viewSims .mg-toolbar { gap: 12px; margin-top: 18px; } #viewProducts .mg-search, #viewSims .mg-search { border: 1px solid var(--whs-line); border-radius: var(--whs-radius-pill); background: var(--whs-bg-soft); transition: border-color var(--whs-ease), background var(--whs-ease), box-shadow var(--whs-ease); } #viewProducts .mg-search:focus-within, #viewSims .mg-search:focus-within { background: #fff; border-color: var(--whs-brand); box-shadow: 0 0 0 4px rgba(15,77,150,.10); } #viewProducts .mg-search-input, #viewSims .mg-search-input { background: transparent; } #viewProducts .mg-select, #viewSims .mg-select { border: 1px solid var(--whs-line); border-radius: var(--whs-radius-pill); background: #fff; color: var(--whs-ink-mid); font-weight: 700; padding: 9px 16px; transition: border-color var(--whs-ease), box-shadow var(--whs-ease); } #viewProducts .mg-select:focus, #viewSims .mg-select:focus { border-color: var(--whs-brand); box-shadow: 0 0 0 4px rgba(15,77,150,.10); outline: none; } #viewProducts .mg-result-count, #viewSims .mg-result-count { color: var(--whs-ink-faint); font-size: 12px; font-weight: 700; } /* ── Stat tiles ──────────────────────────────────────────────────────── */ #viewProducts .mg-stat, #viewSims .mg-stat, #viewStockTransfers .mg-stat { border: 1px solid var(--whs-line); border-radius: var(--whs-radius); box-shadow: var(--whs-shadow); padding: 18px 20px; transition: box-shadow var(--whs-ease), transform var(--whs-ease); } #viewProducts .mg-stat:hover, #viewSims .mg-stat:hover, #viewStockTransfers .mg-stat:hover { transform: translateY(-2px); box-shadow: var(--whs-shadow-lift); } #viewProducts .mg-stat-value, #viewSims .mg-stat-value, #viewStockTransfers .mg-stat-value { font-size: 27px; font-weight: 800; letter-spacing: -.02em; color: var(--whs-ink); } #viewProducts .mg-stat-label, #viewSims .mg-stat-label, #viewStockTransfers .mg-stat-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--whs-ink-faint); margin-top: 2px; } /* ── Empty state ─────────────────────────────────────────────────────── */ #viewProducts .mg-empty, #viewWarehouses .mg-empty, #viewSims .mg-empty { padding: 56px 24px; text-align: center; } #viewProducts .mg-empty-icon, #viewWarehouses .mg-empty-icon, #viewSims .mg-empty-icon { font-size: 44px; opacity: .55; } #viewProducts .mg-empty-title, #viewWarehouses .mg-empty-title, #viewSims .mg-empty-title { font-weight: 800; color: var(--whs-ink); margin-top: 10px; } #viewProducts .mg-empty-text, #viewWarehouses .mg-empty-text, #viewSims .mg-empty-text { color: var(--whs-ink-faint); font-size: 13px; margin-top: 4px; } /* ════════════════════════════════════════════════════════════════════════ PRODUCTS ═══════════════════════════════════════════════════════════════════════ */ #viewProducts .prod-grid { gap: 18px; margin-top: 6px; } #viewProducts .mg-row-card { background: #fff; border: 1px solid var(--whs-line); border-radius: var(--whs-radius); box-shadow: var(--whs-shadow); padding: 18px 18px 16px; transition: box-shadow var(--whs-ease), transform var(--whs-ease), border-color var(--whs-ease); } #viewProducts .mg-row-card:hover { transform: translateY(-3px); box-shadow: var(--whs-shadow-lift); border-color: #DCE6F3; } #viewProducts .mg-row-card-head { align-items: flex-start; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--whs-line-soft); } #viewProducts .mg-row-card-title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--whs-ink); } #viewProducts .mg-row-card-sub { font-size: 12px; color: var(--whs-ink-faint); margin-top: 3px; line-height: 1.5; } #viewProducts .prodWh-total { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--whs-brand); line-height: 1; } #viewProducts .prodWh-grid { gap: 10px; } #viewProducts .prodWh-box { position: relative; background: var(--whs-bg-soft); border: 1px solid var(--whs-line); border-radius: var(--whs-radius-sm); padding: 12px 14px; overflow: hidden; transition: background var(--whs-ease), border-color var(--whs-ease), box-shadow var(--whs-ease); } #viewProducts .prodWh-box:hover { background: #fff; box-shadow: var(--whs-shadow); } /* status accent on the leading edge */ #viewProducts .prodWh-box::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px; background: #CBD5E1; transition: background var(--whs-ease); } #viewProducts .prodWh-box[data-stock="ok"]::before { background: #10B981; } #viewProducts .prodWh-box[data-stock="low"]::before { background: #F59E0B; } #viewProducts .prodWh-box[data-stock="out"]::before { background: #F43F5E; } #viewProducts .prodWh-box[data-stock="out"] { background: #FFF7F8; border-color: #FBD9DF; } #viewProducts .prodWh-head { gap: 8px; } #viewProducts .prodWh-wh { font-size: 12px; font-weight: 800; color: var(--whs-ink-mid); } #viewProducts .prodWh-qty { display: flex; align-items: baseline; gap: 6px; margin: 8px 0 2px; } #viewProducts .prodWh-num { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--whs-ink); direction: ltr; } #viewProducts .prodWh-unit { font-size: 11px; font-weight: 700; color: var(--whs-ink-faint); } #viewProducts .prodWh-box[data-stock="out"] .prodWh-num { color: #BE123C; } /* thin stock bar */ #viewProducts .prodWh-bar { height: 5px; border-radius: var(--whs-radius-pill); background: #E7ECF2; overflow: hidden; margin: 6px 0 2px; } #viewProducts .prodWh-bar > span { display: block; height: 100%; border-radius: inherit; background: #CBD5E1; transition: width var(--whs-ease); } #viewProducts .prodWh-box[data-stock="ok"] .prodWh-bar > span { background: linear-gradient(90deg,#10B981,#34D399); } #viewProducts .prodWh-box[data-stock="low"] .prodWh-bar > span { background: linear-gradient(90deg,#F59E0B,#FBBF24); } #viewProducts .prodWh-box[data-stock="out"] .prodWh-bar > span { background: #F43F5E; } #viewProducts .prodWh-actions { display: flex; gap: 6px; justify-content: flex-end; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--whs-line-soft); } #viewProducts .prodWh-act { width: 32px; height: 32px; padding: 0; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; } #viewProducts .prodWh-act--danger { border-color: #FBD9DF; background: #FFF1F2; color: #BE123C; } #viewProducts .prodWh-act--danger:hover { background: #FFE4E6; border-color: #F9C5CD; } /* badges inside product cards */ #viewProducts .mg-badge { border-radius: var(--whs-radius-pill); font-weight: 800; font-size: 10.5px; padding: 3px 9px; } /* ════════════════════════════════════════════════════════════════════════ WAREHOUSES ═══════════════════════════════════════════════════════════════════════ */ #viewWarehouses .whc-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } #viewWarehouses .whc { display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--whs-line); border-radius: var(--whs-radius); box-shadow: var(--whs-shadow); padding: 18px; transition: box-shadow var(--whs-ease), transform var(--whs-ease), border-color var(--whs-ease); } #viewWarehouses .whc:hover { transform: translateY(-3px); box-shadow: var(--whs-shadow-lift); border-color: #DCE6F3; } #viewWarehouses .whc-top { display: flex; align-items: center; gap: 12px; } #viewWarehouses .whc-ico { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; display: grid; place-items: center; font-size: 21px; background: var(--whs-brand-soft); border: 1px solid #DCE8F6; } #viewWarehouses .whc-id { flex: 1; min-width: 0; } #viewWarehouses .whc-name { margin: 0; font-size: 16px; font-weight: 800; color: var(--whs-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #viewWarehouses .whc-tag { display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: var(--whs-radius-pill); } #viewWarehouses .whc-tag--installation { background: #EFF6FF; color: #1D4ED8; } #viewWarehouses .whc-tag--sales { background: #ECFDF5; color: #047857; } #viewWarehouses .whc-tag--none { background: #FFFBEB; color: #B45309; } #viewWarehouses .whc-actions { display: flex; gap: 6px; } #viewWarehouses .whc-act { width: 32px; height: 32px; border-radius: 9px; cursor: pointer; border: 1px solid var(--whs-line); background: #fff; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; transition: background var(--whs-ease), border-color var(--whs-ease), transform var(--whs-ease); } #viewWarehouses .whc-act:hover { background: var(--whs-bg-soft); transform: translateY(-1px); } #viewWarehouses .whc-act--danger { color: #BE123C; } #viewWarehouses .whc-act--danger:hover { background: #FFF1F2; border-color: #FBD9DF; } #viewWarehouses .whc-metrics { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--whs-bg-soft); border: 1px solid var(--whs-line-soft); border-radius: var(--whs-radius-sm); overflow: hidden; } #viewWarehouses .whc-metric { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; } #viewWarehouses .whc-metric + .whc-metric { border-inline-start: 1px solid var(--whs-line); } #viewWarehouses .whc-metric b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--whs-ink); direction: ltr; } #viewWarehouses .whc-metric span { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--whs-ink-faint); } #viewWarehouses .whc-warn { font-size: 12px; font-weight: 700; color: #B45309; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 10px; padding: 8px 12px; } #viewWarehouses .whc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--whs-ink-soft); } #viewWarehouses .whc-dot { color: var(--whs-ink-faint); } /* ════════════════════════════════════════════════════════════════════════ SIM STOCK ═══════════════════════════════════════════════════════════════════════ */ #viewSims .sim-strip-list { gap: 6px; } #viewSims .simS-row { border: 1px solid var(--whs-line); border-radius: var(--whs-radius-sm); padding: 11px 16px; transition: box-shadow var(--whs-ease), border-color var(--whs-ease), transform var(--whs-ease); } #viewSims .simS-row:hover { box-shadow: var(--whs-shadow); border-color: #DCE6F3; transform: translateY(-1px); } #viewSims .simS-header { background: transparent; border-color: transparent; color: var(--whs-ink-faint); letter-spacing: .05em; } #viewSims .simS-header:hover { transform: none; box-shadow: none; } #viewSims .simS-provider { font-weight: 800; color: var(--whs-ink); } #viewSims .simS-qty { color: var(--whs-brand); } #viewSims .simS-btn { width: 28px; height: 28px; border-radius: 8px; } #viewSims .mg-badge { border-radius: var(--whs-radius-pill); font-weight: 800; } /* ════════════════════════════════════════════════════════════════════════ STOCK TRANSFERS ═══════════════════════════════════════════════════════════════════════ */ #viewStockTransfers .mg-table-wrap { background: #fff; border: 1px solid var(--whs-line); border-radius: var(--whs-radius); box-shadow: var(--whs-shadow); overflow: hidden; } #viewStockTransfers .mg-table { border-collapse: separate; border-spacing: 0; width: 100%; } #viewStockTransfers .mg-table thead th { background: var(--whs-bg-soft); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--whs-ink-faint); padding: 12px 16px; border-bottom: 1px solid var(--whs-line); } #viewStockTransfers .mg-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--whs-line-soft); font-size: 13px; } #viewStockTransfers .mg-table tbody tr { transition: background var(--whs-ease); } #viewStockTransfers .mg-table tbody tr:hover { background: var(--whs-bg-soft); } #viewStockTransfers .mg-table tbody tr:last-child td { border-bottom: none; } #viewStockTransfers .mg-badge { border-radius: var(--whs-radius-pill); font-weight: 800; font-size: 11px; padding: 3px 10px; } #viewStockTransfers .mg-btn { padding: 7px 11px; font-size: 12px; } /* ════════════════════════════════════════════════════════════════════════ ADD-STOCK MODAL (renders at level — uniquely named, safe globally) ═══════════════════════════════════════════════════════════════════════ */ .ps-form { display: flex; flex-direction: column; gap: 14px; } .ps-field { display: flex; flex-direction: column; gap: 6px; } .ps-lbl { font-size: 12px; font-weight: 800; color: var(--whs-ink-mid); letter-spacing: .01em; } .ps-form .mg-input { border: 1px solid var(--whs-line); border-radius: 11px; padding: 10px 12px; font-size: 14px; background: #fff; transition: border-color var(--whs-ease), box-shadow var(--whs-ease); } .ps-form .mg-input:focus { border-color: var(--whs-brand); box-shadow: 0 0 0 4px rgba(15,77,150,.10); outline: none; } .ps-hint { font-size: 12.5px; font-weight: 700; color: var(--whs-ink-soft); background: var(--whs-bg-soft); border: 1px solid var(--whs-line-soft); border-radius: 10px; padding: 9px 12px; } /* ════════════════════════════════════════════════════════════════════════ MODAL SHELLS — silky restyle (scoped via :has so only these modals change) Applies to: Add Stock (.ps-form), Device Details (.whs-detail), Installation preview (.instP-grid). ═══════════════════════════════════════════════════════════════════════ */ .mg-modal:has(.ps-form), .mg-modal:has(.whs-detail), .mg-modal:has(.instP-grid) { border-radius: 22px; box-shadow: 0 30px 70px -24px rgba(15,23,42,.45), 0 8px 24px -12px rgba(15,23,42,.18); max-width: 560px; } .mg-modal:has(.ps-form) .mg-modal-head, .mg-modal:has(.whs-detail) .mg-modal-head, .mg-modal:has(.instP-grid) .mg-modal-head { position: relative; padding: 20px 24px; background: linear-gradient(180deg, #FAFCFE 0%, #fff 100%); border-bottom: 1px solid var(--whs-line); } .mg-modal:has(.ps-form) .mg-modal-head::after, .mg-modal:has(.whs-detail) .mg-modal-head::after, .mg-modal:has(.instP-grid) .mg-modal-head::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, rgba(15,77,150,.35), transparent); } .mg-modal:has(.ps-form) .mg-modal-title, .mg-modal:has(.whs-detail) .mg-modal-title, .mg-modal:has(.instP-grid) .mg-modal-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--whs-brand); } .mg-modal:has(.ps-form) .mg-modal-x, .mg-modal:has(.whs-detail) .mg-modal-x, .mg-modal:has(.instP-grid) .mg-modal-x { border-radius: 10px; transition: background var(--whs-ease), color var(--whs-ease); } .mg-modal:has(.ps-form) .mg-modal-body, .mg-modal:has(.whs-detail) .mg-modal-body, .mg-modal:has(.instP-grid) .mg-modal-body { padding: 22px 24px; } .mg-modal:has(.ps-form) .mg-modal-foot, .mg-modal:has(.whs-detail) .mg-modal-foot, .mg-modal:has(.instP-grid) .mg-modal-foot { padding: 16px 24px; gap: 10px; background: var(--whs-bg-soft); border-top: 1px solid var(--whs-line); } .mg-modal:has(.ps-form) .mg-modal-foot .mg-btn, .mg-modal:has(.whs-detail) .mg-modal-foot .mg-btn, .mg-modal:has(.instP-grid) .mg-modal-foot .mg-btn { border-radius: 11px; padding: 10px 18px; font-weight: 800; border: 1px solid var(--whs-line); background: #fff; color: var(--whs-ink-mid); transition: background var(--whs-ease), border-color var(--whs-ease), transform var(--whs-ease), box-shadow var(--whs-ease); } .mg-modal:has(.ps-form) .mg-modal-foot .mg-btn:hover, .mg-modal:has(.whs-detail) .mg-modal-foot .mg-btn:hover, .mg-modal:has(.instP-grid) .mg-modal-foot .mg-btn:hover { background: var(--whs-bg-soft); transform: translateY(-1px); } /* Add-Stock save = brand primary */ .mg-modal:has(.ps-form) .mg-modal-foot [data-act="ok"] { background: var(--whs-brand); border-color: var(--whs-brand); color: #fff; box-shadow: 0 8px 18px -8px rgba(15,77,150,.7); } .mg-modal:has(.ps-form) .mg-modal-foot [data-act="ok"]:hover { background: #0B3E78; } /* Print-certificate = warm amber CTA (matches the certificate action) */ .mg-modal:has(.whs-detail) .mg-modal-foot [data-act="ok"], .mg-modal:has(.instP-grid) .mg-modal-foot [data-act="ok"] { background: linear-gradient(135deg, #F0A33B, #E8862A); border-color: #E0922F; color: #fff; box-shadow: 0 10px 22px -10px rgba(224,146,47,.85); } .mg-modal:has(.whs-detail) .mg-modal-foot [data-act="ok"]:hover, .mg-modal:has(.instP-grid) .mg-modal-foot [data-act="ok"]:hover { filter: brightness(1.05); transform: translateY(-1px); } /* ── Device Details panel (Tawjeh-style) ─────────────────────────────── */ .whs-d-panel { background: var(--whs-bg-soft); border: 1px solid var(--whs-line); border-radius: 16px; padding: 6px 18px; } .whs-d-grid { display: grid; grid-template-columns: 1fr 1fr; } .whs-d-cell { padding: 16px 8px; border-bottom: 1px solid var(--whs-line); } .whs-d-grid .whs-d-cell:nth-child(odd) { border-inline-start: 0; } .whs-d-grid .whs-d-cell:nth-child(even) { border-inline-start: 1px solid var(--whs-line); padding-inline-start: 22px; } .whs-d-grid .whs-d-cell:nth-last-child(1), .whs-d-grid .whs-d-cell:nth-last-child(2) { border-bottom: 0; } .whs-d-lbl { font-size: 12px; font-weight: 800; color: var(--whs-ink-faint); letter-spacing: .01em; } .whs-d-val { font-size: 15px; font-weight: 800; color: var(--whs-ink); margin-top: 5px; word-break: break-word; } /* ── Installation preview boxes (silky) ──────────────────────────────── */ .mg-modal:has(.instP-grid) .instP-grid { gap: 12px; } .mg-modal:has(.instP-grid) .instP-box { background: var(--whs-bg-soft); border: 1px solid var(--whs-line); border-radius: 13px; padding: 12px 14px; } .mg-modal:has(.instP-grid) .instP-lbl { font-size: 11px; font-weight: 800; color: var(--whs-ink-faint); letter-spacing: .03em; } .mg-modal:has(.instP-grid) .instP-val { font-size: 14px; font-weight: 800; color: var(--whs-ink); } /* ════════════════════════════════════════════════════════════════════════ STOCK-TRANSFER MODALS (own modal system: .modal-bg / .modal-card) ═══════════════════════════════════════════════════════════════════════ */ #newTransferModal.modal-bg, #sendTransferModal.modal-bg, #recvTransferModal.modal-bg, #rejectTransferModal.modal-bg { background: rgba(15,23,42,.5); backdrop-filter: blur(2px); } #newTransferModal .modal-card, #sendTransferModal .modal-card, #recvTransferModal .modal-card, #rejectTransferModal .modal-card { border-radius: 22px; border: 1px solid var(--whs-line); box-shadow: 0 30px 70px -24px rgba(15,23,42,.45); overflow: hidden; } #newTransferModal .modal-hd, #sendTransferModal .modal-hd, #recvTransferModal .modal-hd, #rejectTransferModal .modal-hd { padding: 18px 22px; background: linear-gradient(180deg, #FAFCFE, #fff); border-bottom: 1px solid var(--whs-line); } #newTransferModal .modal-hd h3, #sendTransferModal .modal-hd h3, #recvTransferModal .modal-hd h3, #rejectTransferModal .modal-hd h3 { font-size: 16px; font-weight: 800; color: var(--whs-brand); margin: 0; } #newTransferModal .modal-x, #sendTransferModal .modal-x, #recvTransferModal .modal-x, #rejectTransferModal .modal-x { border-radius: 10px; transition: background var(--whs-ease); } #newTransferModal .modal-x:hover, #sendTransferModal .modal-x:hover, #recvTransferModal .modal-x:hover, #rejectTransferModal .modal-x:hover { background: var(--whs-bg-soft); } #newTransferModal .modal-body, #sendTransferModal .modal-body, #recvTransferModal .modal-body, #rejectTransferModal .modal-body { padding: 20px 22px; } #newTransferModal .modal-lbl, #sendTransferModal .modal-lbl, #recvTransferModal .modal-lbl, #rejectTransferModal .modal-lbl { font-size: 12px; font-weight: 800; color: var(--whs-ink-mid); margin-bottom: 6px; } #newTransferModal select, #newTransferModal input[type="text"], #sendTransferModal select, #sendTransferModal input[type="text"], #recvTransferModal select, #recvTransferModal input[type="text"], #rejectTransferModal select, #rejectTransferModal input[type="text"], #rejectTransferModal textarea { border: 1px solid var(--whs-line); border-radius: 11px; padding: 10px 12px; font-size: 14px; background: #fff; width: 100%; box-sizing: border-box; transition: border-color var(--whs-ease), box-shadow var(--whs-ease); } #newTransferModal select:focus, #newTransferModal input[type="text"]:focus, #sendTransferModal select:focus, #recvTransferModal select:focus, #rejectTransferModal textarea:focus { border-color: var(--whs-brand); box-shadow: 0 0 0 4px rgba(15,77,150,.10); outline: none; } #newTransferModal .modal-card > div:last-child, #sendTransferModal .modal-card > div:last-child, #recvTransferModal .modal-card > div:last-child, #rejectTransferModal .modal-card > div:last-child { background: var(--whs-bg-soft) !important; border-top: 1px solid var(--whs-line) !important; } #newTransferModal .modal-card .mg-btn, #sendTransferModal .modal-card .mg-btn, #recvTransferModal .modal-card .mg-btn, #rejectTransferModal .modal-card .mg-btn { border-radius: 11px; font-weight: 800; transition: background var(--whs-ease), transform var(--whs-ease), box-shadow var(--whs-ease); } #newTransferModal .modal-card .btn-primary, #sendTransferModal .modal-card .btn-primary, #recvTransferModal .modal-card .btn-primary { background: var(--whs-brand); border-color: var(--whs-brand); color: #fff; box-shadow: 0 8px 18px -8px rgba(15,77,150,.7); } #newTransferModal .modal-card .btn-primary:hover, #sendTransferModal .modal-card .btn-primary:hover, #recvTransferModal .modal-card .btn-primary:hover { background: #0B3E78; transform: translateY(-1px); } /* ── Clickable activated-device rows ─────────────────────────────────── */ #viewActivations .act-row { cursor: pointer; } #viewActivations table.mg-table tbody tr.act-row:hover { background: var(--whs-bg-soft); } #viewActivations .mg-row-card.act-row { transition: box-shadow var(--whs-ease), transform var(--whs-ease); } #viewActivations .mg-row-card.act-row:hover { transform: translateY(-2px); box-shadow: var(--whs-shadow-lift); } /* ── Reduced motion ──────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { #viewProducts *, #viewWarehouses *, #viewSims *, #viewStockTransfers * { transition: none !important; } }