.company-brand{
  width:min(1200px, calc(100% - 48px));
  margin:0 auto;
  padding:18px 0 14px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  text-align:left;
}
.company-logo{
  width:86px;
  height:86px;
  flex:0 0 86px;
  object-fit:contain;
}
.company-name{
  margin:0;
  font-size:30px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:.1px;
  color:#111827;
}
@media (max-width:640px){
  .company-brand{
    width:min(100% - 32px, 1200px);
    gap:12px;
    padding:14px 0 10px;
  }
  .company-logo{
    width:68px;
    height:68px;
    flex-basis:68px;
  }
  .company-name{
    font-size:22px;
  }
}
.company-logo{width:96px}
}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f4f6f8;color:#1f2937}.app{max-width:1200px;margin:0 auto;padding:24px}.hero{display:flex;justify-content:space-between;gap:16px;align-items:center;background:#fff;border-radius:18px;padding:24px;margin-bottom:20px;box-shadow:0 10px 30px rgba(15,23,42,.08)}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:#2563eb;font-weight:700}h1,h2{margin:0 0 10px}.status{padding:10px 14px;background:#eef6ff;border-radius:999px;font-weight:700}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.card{background:#fff;border-radius:18px;padding:22px;box-shadow:0 10px 30px rgba(15,23,42,.08)}label{display:block;font-weight:700;margin:14px 0 6px}input,select,textarea{width:100%;margin-top:6px;padding:12px;border:1px solid #d1d5db;border-radius:12px;font-size:15px;background:#fff}input[readonly]{background:#f3f4f6;color:#4b5563}textarea{min-height:86px;resize:vertical}small{display:block;margin-top:5px;color:#6b7280;font-weight:400}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hidden{display:none!important}.buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}button{border:0;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer;background:#111827;color:#fff}button[type=button]{background:#2563eb}button:disabled{opacity:.6;cursor:not-allowed}.preview-card pre{white-space:pre-wrap;background:#111827;color:#f9fafb;border-radius:14px;padding:18px;min-height:320px;line-height:1.6}.result{margin-top:12px;padding:12px;border-radius:12px;background:#ecfdf5;color:#065f46;min-height:44px}.result.error{background:#fef2f2;color:#991b1b}.history-card{margin-top:20px}.history-head{display:flex;align-items:center;justify-content:space-between}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;border-bottom:1px solid #e5e7eb;padding:10px;font-size:14px}th{background:#f9fafb}@media(max-width:850px){.grid,.two-col{grid-template-columns:1fr}.hero{display:block}}


#messagePreview.rtl-preview {
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
  font-family: Tahoma, Arial, sans-serif;
}

#messagePreview.ltr-preview {
  direction: ltr;
  text-align: left;
  unicode-bidi: plaintext;
}

.history-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.history-actions button{padding:10px 12px}
.history-filters{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  margin:14px 0 8px;
  padding:22px;
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:14px;
}
.history-filters label{
  display:flex;
  flex-direction:column;
  min-width:0;
  margin:0;
  padding:10px;
  font-size:13px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
}
.history-filters input,
.history-filters select{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  margin:8px 0 0;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
}
.history-summary{margin:10px 0 12px;color:#4b5563;font-weight:700}.status-badge{display:inline-block;padding:5px 9px;border-radius:999px;background:#e5e7eb;font-weight:700;font-size:12px}.status-sent{background:#dcfce7;color:#166534}.status-draft{background:#e0f2fe;color:#075985}.status-failed{background:#fee2e2;color:#991b1b}.status-sending{background:#fef3c7;color:#92400e}@media(max-width:1100px){.history-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.history-filters{grid-template-columns:1fr;gap:14px;padding:14px}.history-head{align-items:flex-start;gap:10px;flex-direction:column}.history-actions{justify-content:flex-start}}

.import-card{margin-bottom:20px}.import-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.import-head p{margin:5px 0}.download-link{display:inline-block;text-decoration:none;background:#0f766e;color:#fff;padding:12px 16px;border-radius:12px;font-weight:700;white-space:nowrap}.import-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding:14px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:14px}.import-controls input[type=file]{width:auto;min-width:280px;margin:0;background:#fff}.import-summary{margin:12px 0;color:#374151;font-weight:700}.import-table-wrap{max-height:520px;border:1px solid #e5e7eb;border-radius:12px}.import-table{min-width:1500px}.import-table thead th{position:sticky;top:0;z-index:2}.import-table td{vertical-align:top}.import-table select{min-width:110px;margin:0;padding:8px}.import-select{width:18px;height:18px;margin:2px 0}.invalid-row{background:#fff7f7}.import-valid{background:#dcfce7;color:#166534}.import-invalid{white-space:normal;max-width:280px;background:#fee2e2;color:#991b1b;border-radius:10px}.row-actions{white-space:nowrap}.row-actions button{padding:8px 10px;margin:0 4px 4px 0;font-size:12px}.row-send-status{margin-top:6px;font-size:12px;font-weight:700}.row-send-status.ok{color:#166534}.row-send-status.bad{color:#991b1b}@media(max-width:850px){.import-head{flex-direction:column}.import-controls input[type=file]{min-width:100%;width:100%}}

.cloud-safety{margin:-6px 0 20px;padding:14px 18px;border-radius:14px;font-weight:700;line-height:1.45;border:1px solid transparent}.cloud-warn{background:#fffbeb;color:#92400e;border-color:#fde68a}.cloud-ok{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}.cloud-error{background:#fef2f2;color:#991b1b;border-color:#fecaca}

/* V11 secure login and user administration */
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#eef6ff,#f8fafc)}
.auth-card{width:min(480px,100%);background:#fff;border-radius:20px;padding:28px;box-shadow:0 18px 48px rgba(15,23,42,.14)}
.auth-card h1{font-size:28px}.auth-subtitle,.muted{color:#6b7280}.auth-form button{width:100%;margin-top:18px}.hero-account{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.account-box{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.role-badge{font-size:12px;font-weight:800;padding:5px 9px;border-radius:999px}.role-admin{background:#ede9fe;color:#5b21b6}.role-sender{background:#dcfce7;color:#166534}.role-viewer{background:#e0f2fe;color:#075985}.small-btn{padding:8px 10px!important;font-size:12px}.danger-btn{background:#991b1b!important}.admin-card{margin-top:20px}.admin-create-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:18px;row-gap:16px;align-items:end;background:#f9fafb;border:1px solid #e5e7eb;border-radius:14px;padding:18px;margin:14px 0}.admin-create-grid label{margin:0}.admin-create-action{padding-top:25px}.users-table{min-width:1050px}.users-table input,.users-table select{margin:0;padding:8px}.users-table input[type=checkbox]{width:18px;height:18px}#changePasswordCard{margin-top:20px}@media(max-width:900px){.hero-account{align-items:flex-start}.account-box{justify-content:flex-start}.admin-create-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.admin-create-grid{grid-template-columns:1fr}}


/* =========================================================
   V17 — universal field-layout hardening
   Prevents touching/overlapping controls at any browser width.
   ========================================================= */

input,
select,
textarea {
  display:block;
  width:100%;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

label,
.two-col > *,
.history-filters > *,
.admin-create-grid > * {
  min-width:0 !important;
  max-width:100%;
  box-sizing:border-box;
}

/* General two-column forms: real space between controls. */
.two-col {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  column-gap:22px !important;
  row-gap:18px !important;
}
.two-col > label {
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Message History: browser-width-independent layout. */
.history-filters {
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important;
  gap:24px 28px !important;
  padding:22px !important;
  align-items:start !important;
  overflow:hidden;
}

.history-filters > label {
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  border-radius:0 !important;
}

.history-filters > label > input,
.history-filters > label > select {
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:8px 0 0 !important;
  padding:12px 14px !important;
  border:1px solid #cbd5e1 !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.01);
}

/* Chrome/Windows date controls can keep a large intrinsic width.
   Force the date field to respect its grid cell. */
.history-filters input[type="date"],
.two-col input[type="date"] {
  inline-size:100% !important;
  min-inline-size:0 !important;
  max-inline-size:100% !important;
}

/* User creation form also uses auto-fit instead of fixed columns. */
.admin-create-grid {
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) !important;
  gap:22px !important;
  padding:20px !important;
}
.admin-create-grid > label {
  margin:0 !important;
}

/* User table: actual physical spacing between editable cells. */
.users-table {
  border-collapse:separate !important;
  border-spacing:10px 8px !important;
  min-width:1150px;
}
.users-table th,
.users-table td {
  border-bottom:0 !important;
  padding:10px 12px !important;
  vertical-align:middle;
  background:#fff;
}
.users-table thead th {
  background:#f8fafc;
}
.users-table input,
.users-table select {
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
}
.users-table input[type="checkbox"] {
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
}

/* File import controls should never press into neighbouring buttons. */
.import-controls {
  gap:16px !important;
}
.import-controls input[type="file"] {
  max-width:100% !important;
}

/* Narrow screens: one field per row. */
@media (max-width:720px) {
  .two-col,
  .history-filters,
  .admin-create-grid {
    grid-template-columns:1fr !important;
  }
  .history-filters {
    gap:18px !important;
    padding:16px !important;
  }
}

/* V18 bilingual message preview */
#messagePreview {
  direction:ltr !important;
  text-align:left;
}
#messagePreview .bilingual-block {
  display:block;
  white-space:pre-wrap;
  width:100%;
}
#messagePreview .bilingual-rtl {
  direction:rtl;
  text-align:right;
  font-family:Tahoma, Arial, sans-serif;
}
#messagePreview .bilingual-ltr {
  direction:ltr;
  text-align:left;
}
#messagePreview .bilingual-divider {
  display:block;
  direction:ltr;
  text-align:center;
  opacity:.65;
  padding:14px 0;
}


/* V20 — Admin-managed company settings */
.admin-settings-grid{
  display:grid;
  grid-template-columns:minmax(280px,520px) auto;
  gap:18px;
  align-items:end;
  margin:16px 0 20px;
  padding:18px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:14px;
}
.admin-settings-grid label{margin:0;min-width:0}
.admin-settings-grid input{width:100%;min-width:0}
@media(max-width:720px){
  .admin-settings-grid{grid-template-columns:1fr}
}

.admin-settings-title{margin:18px 0 8px}
.admin-settings-title h3{margin:0 0 4px}
.admin-settings-title p{margin:0;color:#64748b;font-size:13px}