:root{
  --bg:#f5f1e8;
  --bg-2:#f0ebe1;
  --panel:#fffdfa;
  --panel-soft:#fff8ef;
  --line:#decfb8;
  --line-strong:#c8b28f;
  --text:#211c15;
  --muted:#6e6455;
  --accent:#b5682f;
  --accent-2:#7f3b1d;
  --accent-soft:#f8e4d1;
  --success:#206847;
  --success-soft:#e5f4ec;
  --warning:#9b6614;
  --warning-soft:#fff2db;
  --danger:#9f2f2f;
  --danger-soft:#fde9e9;
  --shadow:0 18px 55px rgba(80, 52, 18, .12);
  --radius:18px;
}

*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
  min-height:100%;
}

body{
  font-family:"Tajawal", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top right, rgba(181, 104, 47, .14), transparent 22rem),
    linear-gradient(180deg, #f9f5ee 0%, var(--bg) 100%);
}

a{
  color:var(--accent-2);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

code{
  padding:.15rem .35rem;
  border-radius:8px;
  background:#f1e5d4;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
}

.config-banner{
  background:#2a2119;
  color:#fff3e6;
  text-align:center;
  padding:.8rem 1rem;
  font-size:.95rem;
}

.page-wrap{
  width:min(1680px, calc(100% - 2rem));
  margin:1rem auto 2rem;
}

.auth-page{
  width:min(520px, calc(100% - 2rem));
  margin:4rem auto;
}

.auth-card,
.panel,
.side-card,
.modal-card{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,249,240,.98));
  border:1px solid rgba(201, 176, 141, .65);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.auth-card{
  padding:1.5rem;
}

.auth-card__header h1,
.panel-header h2,
.hero-copy h2{
  margin:.35rem 0 .45rem;
  font-size:1.75rem;
}

.auth-card__header p,
.hero-copy p{
  color:var(--muted);
  margin:0;
  line-height:1.7;
}

.auth-card__footer{
  margin-top:1rem;
  text-align:center;
  color:var(--muted);
}

.brand-kicker{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:var(--accent-2);
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.02em;
}

.brand-kicker::before{
  content:"";
  display:inline-block;
  width:.6rem;
  height:.6rem;
  border-radius:999px;
  background:var(--accent);
}

.topbar{
  width:min(1680px, calc(100% - 2rem));
  margin:1.2rem auto 0;
  padding:1rem 1.25rem;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:1rem;
  align-items:center;
  background:rgba(255, 250, 244, .92);
  border:1px solid rgba(201, 176, 141, .7);
  border-radius:22px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
}

.brand-block h1{
  margin:.15rem 0 0;
  font-size:1.4rem;
}

.topnav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem;
}

.topnav a{
  padding:.7rem 1rem;
  border-radius:999px;
  color:var(--text);
  font-weight:700;
}

.topnav a.active{
  background:linear-gradient(135deg, var(--accent), #d28b42);
  color:#fff;
}

.user-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:7rem;
  padding:.7rem 1rem;
  border-radius:999px;
  background:var(--panel-soft);
  border:1px solid var(--line);
  font-weight:700;
}

.hero-panel{
  display:flex;
  gap:1.2rem;
  justify-content:space-between;
  align-items:end;
  padding:1.35rem;
  margin-bottom:1rem;
  overflow:hidden;
  position:relative;
}

.hero-panel::after{
  content:"";
  position:absolute;
  inset:auto -4rem -4rem auto;
  width:18rem;
  height:18rem;
  background:radial-gradient(circle, rgba(181, 104, 47, .17), transparent 68%);
  pointer-events:none;
}

.hero-copy{
  max-width:52rem;
  position:relative;
  z-index:1;
}

.upload-form{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:end;
  justify-content:flex-end;
  position:relative;
  z-index:1;
}

.file-field{
  min-width:18rem;
}

.stack-form label,
.controls-grid label,
.file-field{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  font-weight:700;
  color:var(--text);
}

input[type="text"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="file"],
select,
textarea{
  width:100%;
  padding:.8rem .9rem;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fffefb;
  color:var(--text);
  font:inherit;
}

textarea{
  resize:vertical;
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(181, 104, 47, .14);
}

.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  border-radius:14px;
  padding:.9rem 1.15rem;
  font:inherit;
  font-weight:800;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn-primary{
  background:linear-gradient(135deg, var(--accent-2), var(--accent));
  color:#fff;
  box-shadow:0 12px 24px rgba(127, 59, 29, .22);
}

.btn-secondary{
  background:#f5ecdf;
  color:var(--text);
  border:1px solid var(--line);
}

.icon-btn{
  width:2.5rem;
  height:2.5rem;
  border:none;
  border-radius:999px;
  background:#f6ecdf;
  color:var(--text);
  font-size:1.5rem;
  cursor:pointer;
}

.slim-panel{
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
}

.panel{
  padding:1.2rem;
  margin-bottom:1rem;
}

.stat-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:.85rem;
  margin-bottom:1rem;
}

.stat-grid.compact{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.stat-card{
  padding:1rem 1.05rem;
  border-radius:18px;
  background:linear-gradient(180deg, var(--panel-soft), #fffdf9);
  border:1px solid var(--line);
}

.stat-card span{
  color:var(--muted);
  display:block;
  margin-bottom:.45rem;
  font-weight:700;
}

.stat-card strong{
  font-size:1.15rem;
}

.dashboard-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 320px;
  gap:1rem;
}

.dashboard-main{
  min-width:0;
}

.dashboard-side{
  min-width:0;
}

.controls-panel{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fffdf9;
  margin-bottom:.9rem;
  overflow:hidden;
}

.controls-panel summary{
  cursor:pointer;
  list-style:none;
  padding:1rem 1rem;
  font-weight:800;
  background:linear-gradient(180deg, #fff7ec, #fffdf9);
}

.controls-panel summary::-webkit-details-marker{
  display:none;
}

.controls-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:.85rem;
  padding:1rem;
}

.display-controls{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.85rem;
  padding:1rem;
}

.sort-group{
  border:1px solid var(--line);
  border-radius:16px;
  padding:.9rem;
  background:#fffaf3;
}

.sort-group h3{
  margin:0 0 .75rem;
  font-size:1rem;
}

.sort-row{
  display:grid;
  grid-template-columns:1fr 120px;
  gap:.55rem;
  margin-bottom:.55rem;
}

.sort-row:last-child{
  margin-bottom:0;
}

.sort-row.single{
  grid-template-columns:1fr;
}

.column-picker-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.5rem;
}

.column-picker-grid label{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:.5rem;
  padding:.45rem .55rem;
  border-radius:12px;
  background:#fff;
  border:1px solid #f0dfc6;
  font-weight:700;
}

.column-picker-grid input{
  width:auto;
}

.table-toolbar{
  display:flex;
  gap:1rem;
  justify-content:space-between;
  align-items:center;
  margin-bottom:.75rem;
}

.view-summary{
  color:var(--muted);
  font-weight:700;
}

.toolbar-actions{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}

.table-wrap{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:auto;
  height:calc(100vh - 185px);
  min-height:78vh;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.jobs-table,
.history-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

.jobs-table thead th,
.history-table thead th{
  position:sticky;
  top:0;
  z-index:3;
  padding:.9rem .75rem;
  background:#f8efe1;
  border-bottom:1px solid var(--line-strong);
  color:#3e3428;
  text-align:right;
  white-space:nowrap;
}

.jobs-table tbody td,
.history-table tbody td{
  padding:.82rem .75rem;
  border-bottom:1px solid #efe2cd;
  vertical-align:top;
}

.jobs-table tbody tr:hover,
.history-table tbody tr:hover{
  background:#fffcf7;
}

.jobs-table tbody tr.is-removed{
  background:#fcf7f3;
  color:#6f6257;
}

.jobs-table tbody tr.is-removed td{
  opacity:.9;
}

.group-row td{
  background:#f7efe4;
  color:#523f2e;
  font-weight:800;
  position:sticky;
  top:49px;
  z-index:2;
  border-bottom:1px solid var(--line);
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:.35rem .65rem;
  font-size:.85rem;
  font-weight:800;
  white-space:nowrap;
}

.badge-new{ background:#e6f4ea; color:#206847; }
.badge-changed{ background:#fff0d9; color:#9b6614; }
.badge-removed{ background:#fdeaea; color:#9f2f2f; }
.badge-unchanged{ background:#ece7df; color:#5e574c; }

.badge-active{ background:#ebf6ef; color:#24684a; }
.badge-state-removed{ background:#f6ece7; color:#80513d; }

.badge-not_applied{ background:#eee7dd; color:#5d5448; }
.badge-applied{ background:#e0f3e7; color:#206847; }
.badge-contacted{ background:#e7f0ff; color:#28539a; }
.badge-interview{ background:#fff0db; color:#a05a15; }
.badge-rejected{ background:#fdeaea; color:#9f2f2f; }
.badge-accepted{ background:#e1f7ec; color:#0d7a4c; }
.badge-saved{ background:#f4eafc; color:#6f3ca8; }

.table-actions{
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
}

.link-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.45rem .7rem;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff9f0;
  color:var(--accent-2);
  font-weight:800;
}

.link-btn:hover{
  text-decoration:none;
  background:#f8eddc;
}

.side-card{
  padding:1rem;
}

.side-card__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  margin-bottom:.8rem;
}

.side-card__header h3{
  margin:0;
}

.import-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}

.import-list li a{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  padding:.85rem;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fffaf4;
}

.import-list li a:hover{
  text-decoration:none;
  background:#fff5e7;
}

.import-list small{
  color:var(--muted);
}

.history-layout{
  display:grid;
  grid-template-columns:380px minmax(0, 1fr);
  gap:1rem;
}

.history-list,
.history-detail{
  min-width:0;
}

.history-table tbody tr.is-selected{
  background:#fff4e4;
}

.table-card{
  border:1px solid var(--line);
  border-radius:18px;
  overflow:auto;
  background:#fff;
}

.alert{
  border-radius:16px;
  padding:.95rem 1rem;
  font-weight:700;
}

.alert-success{
  background:var(--success-soft);
  color:var(--success);
  border:1px solid #b8dfca;
}

.alert-warning{
  background:var(--warning-soft);
  color:var(--warning);
  border:1px solid #f0d3a2;
}

.alert-danger{
  background:var(--danger-soft);
  color:var(--danger);
  border:1px solid #efc3c3;
}

.empty-state{
  padding:2rem 1rem;
  text-align:center;
  color:var(--muted);
}

.modal[hidden]{
  display:none;
}

.modal{
  position:fixed;
  inset:0;
  z-index:40;
}

.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(17, 13, 9, .52);
}

.modal-card{
  position:relative;
  width:min(560px, calc(100% - 2rem));
  margin:6vh auto 0;
  padding:1rem;
  z-index:1;
}

.modal-header{
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:1rem;
  margin-bottom:1rem;
}

.modal-header h3{
  margin:.35rem 0 0;
}

.modal-actions{
  display:flex;
  gap:.6rem;
  justify-content:flex-end;
}

.notes-snippet{
  color:var(--muted);
  max-width:24rem;
  white-space:normal;
  line-height:1.6;
}

.muted{
  color:var(--muted);
}

@media (max-width: 1200px){
  .dashboard-grid,
  .history-layout{
    grid-template-columns:1fr;
  }

  .display-controls,
  .controls-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .stat-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .topbar{
    grid-template-columns:1fr;
    justify-items:start;
  }
}

@media (max-width: 780px){
  .page-wrap,
  .topbar{
    width:min(100% - 1rem, 100%);
  }

  .hero-panel{
    flex-direction:column;
    align-items:stretch;
  }

  .upload-form{
    justify-content:stretch;
  }

  .controls-grid,
  .display-controls,
  .stat-grid,
  .stat-grid.compact,
  .column-picker-grid{
    grid-template-columns:1fr;
  }

  .table-toolbar{
    flex-direction:column;
    align-items:flex-start;
  }

  .table-wrap{
    height:80vh;
    min-height:70vh;
  }
}


/* ===== إصلاح عرض جدول الوظائف ===== */

/* إعطاء الجدول كامل عرض اللوحة بدل ضغطه بجانب سجل الاستيرادات */
.dashboard-grid{
  grid-template-columns:minmax(0, 1fr);
}

.dashboard-main,
.dashboard-side{
  width:100%;
  min-width:0;
}

.dashboard-side{
  order:2;
}

.dashboard-side .side-card{
  margin-top:1rem;
}

/* منع المتصفح من ضغط الأعمدة إلى كلمات متكسرة وضيقة */
.table-wrap{
  width:100%;
  max-width:100%;
  overflow:auto;
  height:calc(100vh - 150px);
  min-height:760px;
  scrollbar-gutter:stable both-edges;
}

.jobs-table{
  width:max-content;
  min-width:100%;
  table-layout:auto;
}

.jobs-table thead th,
.jobs-table tbody td{
  min-width:125px;
  line-height:1.55;
  overflow-wrap:normal;
  word-break:normal;
}

/* أعمدة قصيرة */
.jobs-table [data-field="latest_change_type"],
.jobs-table [data-field="current_state"],
.jobs-table [data-field="salary_amount"],
.jobs-table [data-field="openings"],
.jobs-table [data-field="application_status"],
.jobs-table [data-field="applied_at"]{
  min-width:115px;
  white-space:nowrap;
}

/* أعمدة تحتاج مساحة أوسع */
.jobs-table [data-field="vacancy_code"]{
  min-width:120px;
  white-space:nowrap;
}

.jobs-table [data-field="title"]{
  min-width:210px;
  max-width:280px;
}

.jobs-table [data-field="company"]{
  min-width:230px;
  max-width:330px;
}

.jobs-table [data-field="location"],
.jobs-table [data-field="qualification"],
.jobs-table [data-field="job_type"],
.jobs-table [data-field="schedule"]{
  min-width:160px;
}

.jobs-table [data-field="specialization_group"],
.jobs-table [data-field="requirements"],
.jobs-table [data-field="notes"]{
  min-width:260px;
  max-width:380px;
}

.jobs-table [data-field="actions"],
.jobs-table [data-field="apply_url"]{
  min-width:145px;
  white-space:nowrap;
}

/* إبقاء العناوين واضحة أثناء التمرير */
.jobs-table thead th{
  top:0;
  z-index:5;
  box-shadow:0 1px 0 var(--line-strong);
}

/* على الشاشات الأصغر يبقى التمرير أفقيًا بدل تشويه الأعمدة */
@media (max-width: 900px){
  .table-wrap{
    height:calc(100vh - 110px);
    min-height:680px;
  }

  .jobs-table thead th,
  .jobs-table tbody td{
    min-width:135px;
  }
}


/* ===== تحسين ثانٍ للتخطيط ===== */

/* اجعل محتوى الوظائف بعرض الصفحة بالكامل مهما كانت قواعد الشبكة السابقة */
.panel.dashboard-grid{
  display:block !important;
}

.dashboard-main,
.dashboard-side{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}

.dashboard-side{
  margin-top:1rem !important;
}

/* منع صناديق الفرز والتجميع من التمدد رأسيًا بسبب أطول صندوق */
.display-controls{
  align-items:start !important;
}

.sort-group{
  align-self:start !important;
  height:auto !important;
  min-height:0 !important;
}

/* سجل الاستيرادات يظهر كشريط أفقي مختصر أسفل الجدول */
.dashboard-side .side-card{
  width:100%;
}

.dashboard-side .import-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:.75rem;
}

.dashboard-side .import-list li{
  margin:0;
}

/* الجدول يبدأ قريبًا من الأعلى ويستخدم معظم الشاشة */
.table-wrap{
  height:calc(100vh - 120px) !important;
  min-height:780px !important;
  max-height:none !important;
}

/* الأقسام الكبيرة تكون مطوية عند فتح الصفحة ويمكن فتحها عند الحاجة */
.controls-panel:not([open]){
  margin-bottom:.6rem;
}

.controls-panel:not([open]) summary{
  border-radius:18px;
}

@media (max-width: 900px){
  .table-wrap{
    height:calc(100vh - 90px) !important;
    min-height:680px !important;
  }
}


/* ===== الإصلاح النهائي لعرض الجدول وسجل الاستيرادات ===== */

/* لوحة الوظائف لا تحتوي أي عمود جانبي بعد الآن */
.panel.dashboard-grid{
  display:block !important;
  width:100% !important;
}

.dashboard-main{
  width:100% !important;
  max-width:none !important;
}

/* سجل الاستيرادات أصبح قسمًا مستقلًا أسفل الجدول */
.dashboard-side{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:1rem 0 0 !important;
}

.dashboard-side .side-card{
  width:100% !important;
  margin:0 !important;
}

.dashboard-side .import-list{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap:.75rem !important;
}

.dashboard-side .import-list li{
  margin:0 !important;
}

/* استخدام كامل العرض المتاح للجدول */
.table-wrap{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:auto !important;
}

/* إخفاء عمود العدد المطلوب الضيق الذي ظهر كعمود مشوّه */
.jobs-table [data-field="openings"]{
  display:none !important;
}

/* تأكيد أن باقي الأعمدة لا تنضغط */
.jobs-table{
  min-width:100% !important;
  width:max-content !important;
}

.jobs-table th,
.jobs-table td{
  flex:none !important;
}

/* المحافظة على وضوح حافة الجدول في الاتجاه العربي */
.jobs-table thead th:first-child,
.jobs-table tbody td:first-child{
  border-inline-start:none;
}


/* ===== تحسين تمدد الجدول عند قلة الأعمدة ===== */

/* عند قلة الأعمدة، يمتد الجدول ليملأ كامل العرض */
.jobs-table{
  width:100% !important;
  min-width:100% !important;
  table-layout:auto !important;
}

/* توسيع الأعمدة الأساسية بنسب مريحة */
.jobs-table [data-field="latest_change_type"],
.jobs-table [data-field="current_state"]{
  width:9%;
}

.jobs-table [data-field="vacancy_code"]{
  width:11%;
}

.jobs-table [data-field="title"]{
  width:18%;
}

.jobs-table [data-field="company"]{
  width:18%;
}

.jobs-table [data-field="salary_amount"]{
  width:10%;
}

.jobs-table [data-field="location"]{
  width:13%;
}

.jobs-table [data-field="job_type"],
.jobs-table [data-field="qualification"]{
  width:10%;
}

/* عند إظهار أعمدة كثيرة، لا يتم ضغطها؛ يظهر تمرير أفقي بدلًا من التشويه */
.jobs-table:has(th:nth-child(n+11)){
  width:max-content !important;
  min-width:100% !important;
}

.jobs-table:has(th:nth-child(n+11)) th,
.jobs-table:has(th:nth-child(n+11)) td{
  min-width:130px;
}

.jobs-table:has(th:nth-child(n+11)) [data-field="title"]{
  min-width:210px;
}

.jobs-table:has(th:nth-child(n+11)) [data-field="company"]{
  min-width:230px;
}

/* Safari القديم الذي لا يطبق :has سيظل يستخدم عرض 100% بصورة سليمة */


/* ===== سجل تغييرات الوظائف ===== */

.change-fields-summary{
  display:block;
  margin-top:.35rem;
  max-width:180px;
  color:var(--muted);
  font-size:.76rem;
  line-height:1.45;
}

.change-btn{
  background:#fff5df;
  color:#8a5b15;
}

.modal-card-wide{
  width:min(980px, calc(100vw - 2rem));
  max-height:90vh;
  overflow:auto;
}

.modal-subtitle{
  margin:.25rem 0 0;
  color:var(--muted);
}

.change-history-content{
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding:.25rem 0;
}

.change-history-item{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fffdf9;
  overflow:hidden;
}

.change-history-item.is-latest{
  border-color:#d7a85d;
  box-shadow:0 0 0 2px rgba(215,168,93,.12);
}

.change-history-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:1rem;
  background:#fbf4e9;
  border-bottom:1px solid var(--line);
}

.change-history-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.2rem;
  color:var(--muted);
  font-size:.88rem;
}

.latest-change-label{
  display:inline-flex;
  margin-inline-start:.45rem;
  padding:.25rem .55rem;
  border-radius:999px;
  background:#fff2cd;
  color:#81520c;
  font-size:.78rem;
  font-weight:800;
}

.change-comparison-list{
  display:flex;
  flex-direction:column;
}

.change-comparison-row{
  display:grid;
  grid-template-columns:minmax(130px, .7fr) minmax(180px, 1fr) 42px minmax(180px, 1fr);
  gap:.75rem;
  align-items:stretch;
  padding:.9rem 1rem;
  border-bottom:1px solid #f0e4d2;
}

.change-comparison-row:last-child{
  border-bottom:0;
}

.change-field-name{
  display:flex;
  align-items:center;
  font-weight:900;
  color:#493a2a;
}

.change-old-value,
.change-new-value{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  padding:.75rem;
  border-radius:12px;
  overflow-wrap:anywhere;
}

.change-old-value{
  background:#fff0f0;
  border:1px solid #f3cccc;
}

.change-new-value{
  background:#ecf8ef;
  border:1px solid #c9e8d1;
}

.change-old-value span,
.change-new-value span{
  color:var(--muted);
  font-size:.78rem;
  font-weight:700;
}

.change-old-value strong{
  color:#8e3434;
}

.change-new-value strong{
  color:#22683e;
}

.change-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  color:#9c7a48;
}

.empty-state.compact{
  padding:1rem;
}

@media (max-width:760px){
  .change-history-header{
    flex-direction:column;
  }

  .change-history-meta{
    align-items:flex-start;
  }

  .change-comparison-row{
    grid-template-columns:1fr;
  }

  .change-arrow{
    transform:rotate(-90deg);
    min-height:20px;
  }
}