/* ==========================================================
   Atlas Translation Office — Dashboard
   Single consolidated stylesheet.

   Design tokens below are copied verbatim from the original
   assets/css/variables.css. Colours, radii, shadows, sidebar
   width and header height are unchanged — this file only adds
   the component rules index.html was missing.
========================================================== */

/* ==========================================================
   1. DESIGN TOKENS
========================================================== */
:root{
  /* Brand */
  --primary:#2563EB;
  --primary-light:#60A5FA;
  --primary-dark:#1D4ED8;
  --secondary:#0EA5E9;
  --success:#22C55E;
  --warning:#F59E0B;
  --danger:#EF4444;
  --info:#3B82F6;

  /* Light surfaces */
  --background:#F8FAFC;
  --surface:#FFFFFF;
  --surface-hover:#F1F5F9;
  --card-bg:#FFFFFF;
  --border:#E2E8F0;
  --text:#0F172A;
  --text-light:#64748B;

  /* Sidebar */
  --sidebar-bg:#0F172A;
  --sidebar-text:#E2E8F0;
  --sidebar-active:#0F766E;
  --sidebar-hover:rgba(59,130,246,.12);

  /* Header */
  --header-bg:rgba(255,255,255,.85);

  /* Radius */
  --radius-xs:8px;
  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:24px;
  --radius-xl:30px;

  /* Shadow */
  --shadow-sm:0 4px 12px rgba(15,23,42,.05);
  --shadow-md:0 10px 30px rgba(15,23,42,.08);
  --shadow-lg:0 18px 45px rgba(15,23,42,.12);

  /* Layout */
  --sidebar-width:270px;
  --header-height:72px;
  --container-padding:28px;

  --transition:.25s ease;

  --font-en:"Inter",sans-serif;
  --font-ar:"Cairo",sans-serif;
}

[data-theme="dark"]{
  --background:#08131A;
  --surface:#12212C;
  --surface-hover:#172A37;
  --card-bg:#13232D;
  --header-bg:rgba(19,35,45,.9);
  --sidebar-bg:#0F1B24;
  --sidebar-hover:#182A36;
  --sidebar-text:#CBD5E1;
  --sidebar-active:#14B8A6;
  --border:#223443;
  --text:#F8FAFC;
  --text-light:#94A3B8;
  --shadow-sm:0 5px 15px rgba(0,0,0,.25);
  --shadow-md:0 12px 35px rgba(0,0,0,.35);
  --shadow-lg:0 20px 50px rgba(0,0,0,.45);
}

/* ==========================================================
   2. RESET
========================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-en);
  background:var(--background);
  color:var(--text);
  line-height:1.55;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  transition:background var(--transition),color var(--transition);
}
/* Arabic switches the whole shell to Cairo and RTL */
html[dir="rtl"] body{font-family:var(--font-ar)}

img,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
ul,ol{list-style:none}

/* Visible focus for keyboard users only — the original had no focus style
   at all, which made the dashboard unusable without a mouse. */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-xs)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:999px}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#334155}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ==========================================================
   3. APP SHELL
========================================================== */
.app-shell{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-width);
  flex:0 0 var(--sidebar-width);
  background:var(--sidebar-bg);
  color:var(--sidebar-text);
  display:flex;
  flex-direction:column;
  padding:22px 16px;
  position:sticky;
  top:0;
  height:100vh;
  z-index:60;
  transition:transform var(--transition);
}

.brand{display:flex;align-items:center;gap:12px;padding:0 8px 22px}
.brand-mark{
  width:44px;height:44px;flex:0 0 44px;
  border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--primary),var(--sidebar-active));
  color:#fff;font-weight:800;font-size:20px;
  display:flex;align-items:center;justify-content:center;
}
.brand-text{min-width:0}
.brand-title{font-weight:800;font-size:17px;line-height:1.2;color:#fff}
.brand-sub{font-size:12px;color:var(--text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav{display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto}
.nav-item{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:12px 14px;
  border-radius:var(--radius-sm);
  color:var(--sidebar-text);
  font-size:15px;font-weight:500;
  text-align:start;
  transition:background var(--transition),color var(--transition);
}
.nav-item svg{width:20px;height:20px;flex:0 0 20px}
.nav-item:hover{background:var(--sidebar-hover)}
.nav-item.active{background:var(--sidebar-active);color:#fff;font-weight:600}

.sidebar-footer{padding:16px 10px 4px;border-top:1px solid rgba(255,255,255,.08);margin-top:12px}
.office-name{font-weight:700;font-size:14px;color:#fff}
.office-loc{font-size:12px;color:var(--text-light)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}

/* ==========================================================
   4. TOPBAR
========================================================== */
.topbar{
  height:var(--header-height);
  display:flex;align-items:center;gap:14px;
  padding:0 var(--container-padding);
  background:var(--header-bg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
}
.topbar-spacer{flex:1}

.search-box{
  display:flex;align-items:center;gap:10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  padding:9px 16px;
  min-width:220px;max-width:380px;flex:1;
  transition:border-color var(--transition),box-shadow var(--transition);
}
.search-box:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.search-box svg{width:18px;height:18px;flex:0 0 18px;color:var(--text-light)}
.search-box input{border:0;background:none;outline:none;width:100%;font-size:14px}

.icon-btn{
  width:40px;height:40px;flex:0 0 40px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  transition:background var(--transition),transform var(--transition);
}
.icon-btn:hover{background:var(--surface-hover)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:19px;height:19px}

.select-pill{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:999px;
  padding:9px 14px;
  font-size:14px;
  cursor:pointer;
  transition:border-color var(--transition);
}
.select-pill:hover{border-color:var(--primary)}

.profile{display:flex;align-items:center;gap:10px}
.profile-avatar{
  width:40px;height:40px;flex:0 0 40px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.profile-name{font-size:14px;font-weight:600;line-height:1.2}
.profile-role{font-size:12px;color:var(--text-light)}

/* ==========================================================
   5. CONTENT + PAGES
========================================================== */
.content{padding:var(--container-padding);flex:1}

/* Only the active page is rendered. The original had no rule for this,
   so every page stacked on top of each other. */
.page{display:none;animation:pageIn .28s ease}
.page.active{display:block}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.page-header{margin-bottom:24px}
.page-title{font-size:28px;font-weight:800;letter-spacing:-.02em}
.page-subtitle{color:var(--text-light);font-size:14px;margin-top:2px}

/* ==========================================================
   6. GRID
========================================================== */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-actions{grid-template-columns:repeat(4,1fr)}
.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

/* ==========================================================
   7. CARDS
========================================================== */
.card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  padding:22px;
  transition:box-shadow var(--transition),transform var(--transition),border-color var(--transition);
}
.card-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:18px;
}
.card-title{font-size:16px;font-weight:700}

.stat-card{
  position:relative;overflow:hidden;
  display:flex;justify-content:space-between;align-items:center;
  min-height:150px;
}
.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.stat-label{font-size:13px;color:var(--text-light);font-weight:500}
.stat-value{font-size:30px;font-weight:800;letter-spacing:-.02em;margin-top:6px}
.stat-icon{
  width:52px;height:52px;flex:0 0 52px;
  border-radius:var(--radius-sm);
  background:rgba(37,99,235,.10);
  color:var(--primary);
  display:flex;align-items:center;justify-content:center;
}
.stat-icon svg{width:24px;height:24px}

.action-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;cursor:pointer;
  min-height:130px;font-weight:600;font-size:14px;
}
.action-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--primary)}
.action-card:active{transform:translateY(-1px)}

/* ==========================================================
   8. BUTTONS
========================================================== */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 20px;
  border-radius:var(--radius-sm);
  font-size:14px;font-weight:600;
  border:1px solid transparent;
  transition:background var(--transition),transform var(--transition),box-shadow var(--transition);
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);box-shadow:var(--shadow-sm)}
.btn-ghost{background:transparent;color:var(--primary);border-color:transparent;padding:8px 12px}
.btn-ghost:hover{background:rgba(37,99,235,.08)}
.btn-danger{background:var(--danger);color:#fff}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

.ripple{
  position:absolute;border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  background:rgba(255,255,255,.5);
  width:220px;height:220px;
  animation:ripple .6s ease-out;pointer-events:none;
}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ==========================================================
   9. BADGES
========================================================== */
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 14px;border-radius:999px;
  font-size:13px;font-weight:600;white-space:nowrap;
}
.badge-success{background:rgba(34,197,94,.12);color:#16A34A}
.badge-warning{background:rgba(245,158,11,.12);color:#D97706}
.badge-danger{background:rgba(239,68,68,.12);color:#DC2626}
.badge-info{background:rgba(59,130,246,.12);color:#2563EB}
.badge-muted{background:rgba(100,116,139,.14);color:var(--text-light)}

/* ==========================================================
   10. TABLES
========================================================== */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{font-size:14px;min-width:520px}
thead th{
  text-align:start;
  font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-light);
  padding:0 14px 12px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
tbody td{padding:14px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--transition)}
tbody tr:hover{background:var(--surface-hover)}
.table-empty{text-align:center;color:var(--text-light);padding:34px 14px}

/* ==========================================================
   11. INPUTS
========================================================== */
.search-input,.field-input{
  width:100%;
  padding:11px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  font-size:14px;
  outline:none;
  transition:border-color var(--transition),box-shadow var(--transition);
}
.search-input{margin-bottom:16px}
.field-input{margin-bottom:10px}
.search-input:focus,.field-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.field-input[readonly]{background:var(--surface-hover);color:var(--text-light);cursor:default}
.field-input[readonly]:focus{border-color:var(--border);box-shadow:none}

/* ==========================================================
   12. AUTOMATION CONTROL (Start / Stop)
========================================================== */
.agent-panel{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.agent-card{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px;
}
.agent-info{display:flex;align-items:center;gap:14px;min-width:0}
.agent-name{font-weight:700;font-size:15px}
.agent-state-label{font-size:13px;color:var(--text-light);margin-top:2px}

.agent-dot{
  width:12px;height:12px;flex:0 0 12px;border-radius:50%;
  background:var(--text-light);
  transition:background var(--transition),box-shadow var(--transition);
}
.agent-dot.is-running{background:var(--success);box-shadow:0 0 0 4px rgba(34,197,94,.18);animation:pulse 2s infinite}
.agent-dot.is-stopped{background:var(--danger);box-shadow:0 0 0 4px rgba(239,68,68,.16)}
.agent-dot.is-error{background:var(--warning);box-shadow:0 0 0 4px rgba(245,158,11,.18)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(34,197,94,.18)}50%{box-shadow:0 0 0 8px rgba(34,197,94,.05)}}

/* Toggle switch */
.switch{position:relative;display:inline-block;width:52px;height:30px;flex:0 0 52px}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.switch input:disabled{cursor:not-allowed}
.switch-track{
  position:absolute;inset:0;
  background:#CBD5E1;
  border-radius:999px;
  transition:background var(--transition);
}
[data-theme="dark"] .switch-track{background:#334155}
.switch-track::after{
  content:"";position:absolute;
  top:3px;inset-inline-start:3px;
  width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);
  transition:transform var(--transition);
}
.switch input:checked + .switch-track{background:var(--success)}
.switch input:checked + .switch-track::after{transform:translateX(22px)}
html[dir="rtl"] .switch input:checked + .switch-track::after{transform:translateX(-22px)}
.switch input:disabled + .switch-track{opacity:.5}
.switch input:focus-visible + .switch-track{outline:2px solid var(--primary);outline-offset:2px}
.switch.is-busy .switch-track{animation:switchBusy 1s ease-in-out infinite}
@keyframes switchBusy{0%,100%{opacity:1}50%{opacity:.45}}

/* ==========================================================
   13. ACTIVITY LIST
========================================================== */
.activity-list{display:flex;flex-direction:column;gap:2px;max-height:320px;overflow-y:auto}
.activity-item{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 4px;border-bottom:1px solid var(--border);
}
.activity-item:last-child{border-bottom:0}
.activity-dot{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:var(--primary);margin-top:7px}
.activity-text{font-size:14px;line-height:1.4}
.activity-time{font-size:12px;color:var(--text-light);margin-top:2px}

/* ==========================================================
   14. MESSAGES
========================================================== */
.messages-layout{display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:start}
.conversation-list-card{max-height:calc(100vh - 240px);display:flex;flex-direction:column}
.conversation-list{overflow-y:auto;display:flex;flex-direction:column;gap:6px;flex:1}

.conversation-item{
  display:flex;flex-direction:column;gap:3px;
  padding:12px 14px;border-radius:var(--radius-sm);
  cursor:pointer;border:1px solid transparent;
  transition:background var(--transition),border-color var(--transition);
}
.conversation-item:hover{background:var(--surface-hover)}
.conversation-item.active{background:rgba(37,99,235,.10);border-color:var(--primary)}
.conversation-name{font-weight:600;font-size:14px}
.conversation-preview{
  font-size:12px;color:var(--text-light);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.chat-panel{display:flex;flex-direction:column;height:calc(100vh - 240px);padding:0}
.chat-header{
  padding:18px 22px;border-bottom:1px solid var(--border);
  font-weight:600;font-size:15px;flex:0 0 auto;
}
.chat-thread{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:12px}

.message{max-width:76%;padding:11px 15px;border-radius:var(--radius-md);font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.message.client{align-self:flex-start;background:var(--surface-hover);border-bottom-left-radius:6px}
.message.bot{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:6px}
[data-theme="dark"] .message.bot{background:var(--sidebar-active)}
.message-time{font-size:11px;opacity:.75;margin-top:5px}

/* ==========================================================
   15. CHARTS
========================================================== */
.chart-box{position:relative;height:300px}
.chart-box canvas{max-height:100%}

/* ==========================================================
   16. SETTINGS
========================================================== */
.integration-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 0;border-bottom:1px solid var(--border);font-size:14px;
}
.integration-row:last-child{border-bottom:0}

/* ==========================================================
   17. TOAST / TOOLTIP
========================================================== */
.toast{
  position:fixed;inset-inline-end:24px;bottom:24px;z-index:9999;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-inline-start:4px solid var(--primary);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);
  padding:14px 18px;max-width:340px;
  transition:opacity .3s ease,transform .3s ease;
}
.toast.is-success{border-inline-start-color:var(--success)}
.toast.is-error{border-inline-start-color:var(--danger)}
.toast strong{display:block;font-size:13px;margin-bottom:2px}
.toast p{font-size:14px;color:var(--text-light)}

.tooltip{
  position:fixed;z-index:9999;pointer-events:none;
  background:var(--text);color:var(--background);
  font-size:12px;padding:6px 10px;border-radius:var(--radius-xs);
  white-space:nowrap;
}

/* ==========================================================
   18. LOADING
========================================================== */
.skeleton{
  background:linear-gradient(90deg,var(--surface-hover) 25%,var(--border) 50%,var(--surface-hover) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
  border-radius:var(--radius-xs);
  color:transparent!important;
}
@keyframes shimmer{to{background-position:-200% 0}}

.spinner{
  width:16px;height:16px;
  border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;display:inline-block;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==========================================================
   19. LOGIN
========================================================== */
.login-body{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:24px;
  background:linear-gradient(135deg,#0F172A 0%,#0F766E 100%);
}
.login-card{
  width:100%;max-width:420px;
  background:var(--card-bg);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:40px 34px;
}
.login-brand{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:26px}
.login-title{font-size:22px;font-weight:800;text-align:center}
.login-sub{font-size:14px;color:var(--text-light);text-align:center;margin:4px 0 26px}
.login-label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.login-error{
  display:none;
  background:rgba(239,68,68,.10);
  color:#DC2626;
  border:1px solid rgba(239,68,68,.28);
  border-radius:var(--radius-sm);
  padding:11px 14px;font-size:14px;margin-bottom:16px;
}
.login-error.is-visible{display:block;animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.login-btn{width:100%;padding:13px;margin-top:6px}
.login-foot{text-align:center;font-size:12px;color:var(--text-light);margin-top:20px}

/* ==========================================================
   20. RESPONSIVE
   The original stylesheet stopped at a single 768px rule, which
   left the 4-column grids overflowing on tablets.
========================================================== */
@media (max-width:1280px){
  .grid-4,.grid-actions{grid-template-columns:repeat(2,1fr)}
  .messages-layout{grid-template-columns:300px 1fr}
}

@media (max-width:1024px){
  :root{--container-padding:20px}
  .grid-2,.settings-grid{grid-template-columns:1fr}
  .agent-panel{grid-template-columns:1fr}
  .search-box{min-width:0}
}

@media (max-width:900px){
  .sidebar{
    position:fixed;inset-block:0;inset-inline-start:0;
    transform:translateX(-100%);
    box-shadow:var(--shadow-lg);
  }
  html[dir="rtl"] .sidebar{transform:translateX(100%)}
  .sidebar.is-open{transform:translateX(0)}
  #mobileMenuBtn{display:inline-flex!important}

  .sidebar-backdrop{
    position:fixed;inset:0;z-index:55;
    background:rgba(15,23,42,.5);
    opacity:0;visibility:hidden;
    transition:opacity var(--transition),visibility var(--transition);
  }
  .sidebar-backdrop.is-open{opacity:1;visibility:visible}

  .messages-layout{grid-template-columns:1fr}
  .conversation-list-card{max-height:300px}
  .chat-panel{height:60vh}
}

@media (max-width:720px){
  .grid-4,.grid-actions{grid-template-columns:1fr 1fr}
  .page-title{font-size:23px}
  .stat-card{min-height:120px;padding:18px}
  .stat-value{font-size:24px}
  .stat-icon{width:44px;height:44px;flex:0 0 44px}
  .profile>div{display:none}   /* keep the avatar, drop the name — it wrapped */
  .chart-box{height:240px}
}

@media (max-width:520px){
  :root{--container-padding:14px}
  .grid-4,.grid-actions{grid-template-columns:1fr}
  .topbar{gap:8px}
  .select-pill{padding:8px 10px;font-size:13px}
  .card{padding:16px}
  .agent-card{flex-direction:row;align-items:center}
  .toast{inset-inline:14px;max-width:none}
  .login-card{padding:28px 20px}
}

@media print{
  .sidebar,.topbar,.action-card,.btn{display:none!important}
  .content{padding:0}
  .card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
}

/* ==========================================================
   21. ORDERS TOOLBAR (search + office-number filter)
========================================================== */
.orders-toolbar{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px;
}
.orders-toolbar .search-input{flex:1;min-width:200px;margin-bottom:0}
.orders-toolbar .select-pill{flex:0 0 auto}
.conversation-name .badge{font-size:11px;padding:2px 8px;margin-inline-start:6px;vertical-align:middle}
tbody td .badge{font-size:11px;padding:3px 9px;margin-inline-start:6px}
@media (max-width:520px){
  .orders-toolbar{flex-direction:column;align-items:stretch}
}