/* ==========================================================================
   public/css/restaurant.css  —  إضافات نظام المطعم
   مؤسسة المنهل لنظم المعلومات  |  مشروع المطعم
   --------------------------------------------------------------------------
   يُقرأ بعد manhl-ui.css ولا يعدّله. لا لون مباشر — كل الألوان من المعيار.
   الزاوية موحّدة 4px كما في شاشة البيع.
   ========================================================================== */


/* ==========================================================================
   1 · الأساس
   ========================================================================== */

/* --------------------------------------------------------------------------
   هوية المشروع: لون واحد يُكتب هنا فقط، وكل الدرجات تُشتق منه.
   manhl-ui يبني كل شيء على متغيرات --purple-*؛ نعيد تعريفها هنا بدرجات
   لون الهوية، فتتلوّن الشاشات كلها (الرؤوس، الأزرار، الروابط، التركيز…)
   دون لمس manhl-ui.css — ويبقى الذهبي والتركوازي كما في المعيار.
   لتغيير هوية المطعم كلها: غيّر --brand فقط.
   -------------------------------------------------------------------------- */
:root{
  --brand:         #34A853;          /* أخضر حرف L في شعار Google */

  --purple:        color-mix(in srgb, var(--brand) 78%, #000);
  --purple-2:      var(--brand);
  --purple-dark:   color-mix(in srgb, var(--brand) 58%, #000);
  --purple-darker: color-mix(in srgb, var(--brand) 44%, #000);
  --purple-soft:   color-mix(in srgb, var(--brand) 16%, #fff);
  --purple-softer: color-mix(in srgb, var(--brand) 6%,  #fff);
  --purple-text:   color-mix(in srgb, var(--brand) 22%, #fff);
  --purple-label:  color-mix(in srgb, var(--brand) 62%, #fff);

  --info:          var(--purple);
  --info-line:     color-mix(in srgb, var(--brand) 28%, #fff);
  --info-bg:       var(--purple-softer);
  --row-hover:     var(--purple-softer);
  --row-selected:  var(--purple-soft);

  /* لوحة ألوان التصنيفات — مستقلة عن الهوية حتى لا تتغير مع --brand */
  --cat-red:    #D93025;
  --cat-orange: #E8710A;
  --cat-gold:   #F5B301;
  --cat-green:  #1E8E3E;
  --cat-teal:   #0F9D8F;
  --cat-blue:   #1A73E8;
  --cat-purple: #7B3FC4;
  --cat-pink:   #D01884;
  --cat-brown:  #8D5A2B;

  /* إطارات ناعمة: خط رفيع وزاوية 4px وظل خفيف — كشاشة البيع */
  --frame-w:           1px;
  --frame-color:       var(--frame-color-strong);
  --frame-radius:      4px;
  --frame-radius-sm:   4px;
  --frame-radius-lg:   4px;
}

:root{
  --rp-r:4px;
  --sidebar-w:5.25cm;          /* عرض السايدبار (≈ 198px) — الشريط العلوي والمحتوى يتبعانه تلقائيًا */
  --rp-side-bg:color-mix(in srgb, var(--purple-soft) 70%, var(--purple-softer));

  /* القائمة الجانبية بنفس أخضر رؤوس الإطارات (.frame-head): من الغامق إلى الأفتح */
  --sidebar-bg:    var(--purple-dark);
  --sidebar-bg-2:  var(--purple);
  --sidebar-line:  rgba(255,255,255,.18);
  --sidebar-hover: rgba(255,255,255,.14);
  --sidebar-text:  var(--white);
  --sidebar-soft:  rgba(255,255,255,.78);
}

body{ background:var(--white); }

/* ---- الإطارات الناعمة ---- */
.frame,.table-frame,.stat,.report-doc{ box-shadow:var(--shadow-sm); }
.frame-head{ border-radius:3px 3px 0 0; border-bottom-width:1px; }
.frame-foot{ border-radius:0 0 3px 3px; border-top-width:1px; }
/* كروت الأرقام: إطار ذهبي ثابت وواضح */
.stat{ border:1.5px solid var(--gold); }
.stat:hover{ border-color:var(--gold-dark); }
.btn,.btn-ico,.page-link,.badge,.alert,.chip,.form-control,.form-select,.btn-logout{ border-radius:var(--rp-r); }
.btn-ico{ border-width:1px; border-color:var(--frame-color-strong); }
table.tbl thead th{ border-bottom-width:1px; }

/* ---- ما كتبه المعيار بقيمة ثابتة بدل متغير: نعيده للهوية ---- */
.form-control:focus,.form-select:focus{ box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.switch input:focus-visible + .track{ box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.ic-purple{ background:linear-gradient(135deg,var(--purple-dark),var(--purple-2)); }
.badge-posted{ border-color:var(--info-line); }
.topbar{ border-bottom-color:var(--row-line); }
.num{ font-variant-numeric:tabular-nums; }
.row-actions form{ display:inline-flex; margin:0; }
.form-narrow{ max-width:760px; }


/* ==========================================================================
   2 · القائمة الجانبية — خلفية خضراء ونصوص بيضاء
   --------------------------------------------------------------------------
   اللون من --sidebar-bg أعلى الملف، والرابط النشط يبقى ذهبيًا كما في المعيار.
   ========================================================================== */

.sidebar{
  background:linear-gradient(180deg,var(--sidebar-bg) 0%,var(--sidebar-bg-2) 100%);
}
.sidebar .brand{ border-bottom-color:var(--sidebar-line); }
.sidebar .brand div{ color:var(--sidebar-text); }

.side-menu a,
.side-menu .group-toggle{ color:var(--sidebar-text); }
.side-menu a i,
.side-menu .group-toggle i.lead-icon{ color:var(--gold-2); }
.side-menu .group-toggle .chevron{ color:var(--sidebar-soft); }
.side-menu .group-body a{ color:var(--sidebar-soft); }

.side-menu a:hover,
.side-menu .group-toggle:hover{ background:var(--sidebar-hover); color:var(--sidebar-text); }

.side-menu .menu-group.open > .group-toggle{ background:var(--sidebar-hover); color:var(--sidebar-text); }

.side-menu a.active{ background:var(--gold); color:var(--purple-dark); box-shadow:var(--shadow-sm); }
.side-menu a.active i{ color:var(--purple-dark); }

.side-menu .menu-label{ color:var(--sidebar-soft); }
.side-menu::-webkit-scrollbar-thumb{ background:var(--sidebar-line); }

.sidebar .brand{ display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.brand-mark{
  width:52px; height:52px; border-radius:var(--rp-r);
  display:flex; align-items:center; justify-content:center;
  background:var(--gold); color:var(--purple-dark); font-size:1.6rem;
}

/* رابط لم يُبنَ مساره بعد */
.side-menu a.soon{ opacity:.45; cursor:default; }
.side-menu a.soon:hover{ background:transparent; color:var(--sidebar-soft); }
.side-menu a.soon em{
  margin-inline-start:auto; font-style:normal; font-size:var(--fs-xs); font-weight:700;
  padding:0 .45rem; border-radius:var(--rp-r); background:var(--sidebar-hover); color:var(--sidebar-text);
}

.topbar .user-chip form{ margin:0; }


/* ==========================================================================
   3 · شاشة الدخول وصفحة المنع
   ========================================================================== */

body.auth-page{
  min-height:100vh; margin:0; padding:1rem;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 15% 20%, rgba(245,179,1,.14), transparent 40%),
    linear-gradient(160deg,var(--purple-darker),var(--purple-dark) 60%,var(--purple-darker));
}

.auth-card{
  width:100%; max-width:400px;
  background:var(--white); border-radius:var(--rp-r);
  padding:2rem 1.8rem 1.4rem;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.auth-brand{ text-align:center; margin-bottom:1.4rem; }
.auth-brand img{ height:64px; margin-bottom:.6rem; }
.auth-mark{
  width:64px; height:64px; margin:0 auto .7rem; border-radius:var(--rp-r);
  display:flex; align-items:center; justify-content:center;
  background:var(--gold); color:var(--purple-dark); font-size:2rem;
}
.auth-brand h1{ font-size:1.6rem; font-weight:900; color:var(--purple-dark); }
.auth-brand p{ margin:.2rem 0 0; font-size:var(--fs-md); font-weight:600; color:var(--ink-muted); }

.auth-form{ display:grid; gap:1rem; }
.auth-field{ position:relative; }
.auth-field > i{
  position:absolute; top:50%; inset-inline-start:.8rem; transform:translateY(-50%);
  color:var(--ink-faint); font-size:1.1rem; pointer-events:none;
}
.auth-field .form-control{
  min-height:46px; font-size:1.1rem; padding-inline-start:2.5rem; padding-inline-end:2.6rem;
  border-radius:var(--rp-r); background:var(--rp-side-bg); border-color:var(--purple-soft);
}
.auth-field .form-control:focus{ background:var(--white); }
.auth-eye{
  position:absolute; top:50%; inset-inline-end:.4rem; transform:translateY(-50%);
  width:36px; height:36px; border:none; background:transparent; color:var(--ink-muted);
  border-radius:var(--rp-r); cursor:pointer; font-size:1.1rem;
}
.auth-eye:hover{ color:var(--purple); }
.auth-form .btn-save{ min-height:50px; font-size:1.2rem; border-radius:var(--rp-r); margin-top:.3rem; }

.auth-foot{
  margin-top:1.4rem; padding-top:.8rem; border-top:1px solid var(--row-line);
  text-align:center; font-size:var(--fs-xs); font-weight:700; color:var(--ink-faint);
}

/* صفحة المنع 403 */
.denied-card{ text-align:center; display:grid; gap:.5rem; justify-items:center; }
.denied-icon{
  width:72px; height:72px; border-radius:var(--rp-r);
  display:flex; align-items:center; justify-content:center;
  background:var(--danger-bg); color:var(--danger); font-size:2.2rem;
}
.denied-card h1{ font-size:1.6rem; font-weight:900; color:var(--danger); }
.denied-card p{ margin:0; font-size:1.1rem; font-weight:700; color:var(--ink); }
.denied-card small{ color:var(--ink-muted); font-weight:600; margin-bottom:.8rem; }
.denied-card .btn{ border-radius:var(--rp-r); }


/* ==========================================================================
   4 · الأدوار
   ========================================================================== */

/* شريط صغير يبيّن نسبة الصلاحيات */
.perm-meter{
  display:inline-block; width:46px; height:6px; margin-inline-end:.4rem; vertical-align:middle;
  border-radius:3px; background:var(--row-line); overflow:hidden;
}
.perm-meter span{ display:block; height:100%; width:var(--p); background:var(--teal-2); border-radius:3px; }


/* ==========================================================================
   5 · مصفوفة الصلاحيات
   ========================================================================== */

.perm-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:1rem; align-items:start; margin-bottom:5rem;
}
.perm-group{ margin:0; border-width:1px; border-color:var(--row-line); border-radius:var(--rp-r); box-shadow:var(--shadow-sm); }
.perm-group .frame-head{ border-radius:var(--rp-r) var(--rp-r) 0 0; border-bottom-width:1px; }
.perm-group.full{ border-color:var(--teal-line); }
.perm-group.full .frame-head{ background:var(--teal-bg); }

.perm-all .label{ font-size:var(--fs-sm); color:var(--ink-muted); font-variant-numeric:tabular-nums; }

.perm-list{ padding:.3rem 0; }
.perm-item{
  display:flex; align-items:center; gap:.8rem;
  padding:.55rem 1rem; cursor:pointer;
  border-bottom:1px dashed var(--row-line);
  transition:background var(--t-fast);
}
.perm-item:last-child{ border-bottom:none; }
.perm-item:hover{ background:var(--row-hover); }
.perm-txt{ flex:1; min-width:0; }
.perm-txt b{ display:block; font-size:var(--fs-base); font-weight:700; color:var(--ink); }
.perm-txt code{ font-size:var(--fs-xs); color:var(--ink-faint); background:none; padding:0; direction:ltr; }
.perm-item:has(input:checked) .perm-txt b{ color:var(--teal-dark); }

/* شريط الحفظ الثابت أسفل الشاشة — لا يبحث المدير عن الزر بعد التمرير */
.perm-savebar{
  position:fixed; bottom:0; inset-inline-start:var(--sidebar-w); inset-inline-end:0; z-index:1020;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem 1.4rem; background:var(--white);
  border-top:1px solid var(--row-line); box-shadow:0 -6px 20px rgba(55,34,110,.08);
  font-weight:700; color:var(--ink-2);
}
.perm-savebar b{ color:var(--teal-dark); font-size:var(--fs-lg); }
.perm-savebar .btn{ border-radius:var(--rp-r); }


/* ==========================================================================
   6 · النماذج والقوائم العامة
   ========================================================================== */

/* حقول تُكتب بالإنجليزية أو أرقام: من اليسار */
.ltr-input{ direction:ltr; text-align:right; }
.ltr-input:placeholder-shown{ direction:rtl; }        /* التلميح العربي يُقرأ صحيحًا والحقل فارغ */
.frame-head.plain .badge{ background:var(--teal-soft); color:var(--teal-dark); border-color:var(--teal-line); }
.ltr-inline{ direction:ltr; unicode-bidi:isolate; }
.pin-input{ letter-spacing:.5em; font-weight:800; }

.frame.filter-bar{ border-width:1px; border-color:var(--row-line); }
.filter-bar .frame-body{ padding:.7rem .9rem; }
.filter-bar .form-select{ width:auto; min-width:150px; }
.filter-bar .date-input{ width:auto; flex:0 0 auto; min-width:0; }

.form-stack{ display:grid; gap:.9rem; }

/* شريط الحفظ أسفل النموذج */
.form-actions{
  display:flex; justify-content:flex-end; gap:.6rem;
  padding:.9rem 0 .4rem; border-top:1px solid var(--row-line); margin-top:.4rem;
}
.form-actions .btn{ border-radius:var(--rp-r); }

/* اختيار بأزرار (بديل القائمة المنسدلة للخيارات القليلة) */
.choice-row{ display:flex; flex-wrap:wrap; gap:.45rem; }
.choice{ cursor:pointer; margin:0; }
.choice input{ position:absolute; opacity:0; width:0; height:0; }
.choice span{
  display:inline-flex; align-items:center; gap:.35rem;
  min-height:38px; padding:0 .95rem; border-radius:var(--rp-r);
  border:1.5px solid var(--frame-color-strong); background:var(--white);
  font-weight:700; font-size:var(--fs-sm); color:var(--ink-2);
  transition:all var(--t-fast);
}
.choice input:checked + span{ border-color:var(--teal); background:var(--teal-bg); color:var(--teal-dark); }
.choice input:focus-visible + span{ outline:3px solid var(--gold); outline-offset:2px; }

/* نسخ الرابط */
.copy-row{ display:flex; gap:.45rem; }
.copy-row .form-control{ flex:1; background:var(--rp-side-bg); }
.copy-row .btn{ border-radius:var(--rp-r); }


/* ==========================================================================
   7 · المستخدمون
   ========================================================================== */

.user-cell{ display:flex; align-items:center; gap:.6rem; }
.user-ava{
  width:34px; height:34px; flex:0 0 34px; border-radius:var(--rp-r);
  display:flex; align-items:center; justify-content:center;
  background:var(--purple-soft); color:var(--purple-dark); font-weight:900;
}
table.tbl tbody tr.row-off td{ color:var(--ink-faint); }
table.tbl tbody tr.row-off .user-ava{ background:var(--thead-bg); color:var(--ink-faint); }
.device-cell{ font-size:var(--fs-xs); color:var(--ink-muted); max-width:320px; }


/* ==========================================================================
   8 · الإعدادات
   ========================================================================== */

.settings-brand{ display:grid; grid-template-columns:1fr 200px; gap:1.4rem; align-items:start; }
.logo-box{ display:grid; gap:.5rem; justify-items:start; }
.logo-preview{
  width:140px; height:140px; border-radius:var(--rp-r);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  border:1.5px dashed var(--purple-label); background:var(--rp-side-bg);
  color:var(--purple-label); font-size:2.4rem;
}
.logo-preview img{ max-width:100%; max-height:100%; object-fit:contain; }
.logo-box .btn{ border-radius:var(--rp-r); cursor:pointer; }


/* ==========================================================================
   9 · قائمة الطعام
   ========================================================================== */

/* نقطة لون التصنيف */
.cat-dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  background:var(--cc, var(--cat-teal)); margin-inline-end:.35rem; vertical-align:1px; flex-shrink:0;
}

/* شريط التصنيفات أعلى الأصناف */
.cat-tabs{ display:flex; gap:.4rem; overflow-x:auto; padding-bottom:.4rem; margin-bottom:.8rem; scrollbar-width:thin; }
.cat-tabs a{
  display:inline-flex; align-items:center; gap:.2rem; flex:0 0 auto;
  min-height:38px; padding:0 .9rem; border-radius:var(--rp-r);
  border:1px solid var(--row-line); background:var(--white); box-shadow:var(--shadow-sm);
  font-weight:700; font-size:var(--fs-sm); color:var(--ink); white-space:nowrap;
}
.cat-tabs a b{ font-size:var(--fs-xs); color:var(--ink-faint); font-weight:700; margin-inline-start:.2rem; }
.cat-tabs a:hover{ border-color:var(--purple-label); color:var(--ink); }
.cat-tabs a.active{ background:var(--purple-dark); border-color:var(--purple-dark); color:var(--white); }
.cat-tabs a.active b{ color:var(--purple-text); }
.cat-tabs a.active .cat-dot{ box-shadow:0 0 0 2px var(--white); }

.choice.swatch span{ gap:.1rem; }

/* أزرار السطر السريعة */
.btn-ico.star{ color:var(--ink-faint); }
.btn-ico.star.on{ color:var(--gold-dark); border-color:var(--gold-line); background:var(--gold-soft); }
.btn-ico.soldout{ color:var(--danger); border-color:var(--danger-line); background:var(--danger-bg); }

/* شارات نوع المجموعة */
.badge.type-one { background:var(--info-bg);   color:var(--purple-dark); border-color:var(--info-line); }
.badge.type-many{ background:var(--gold-soft); color:var(--gold-deep);   border-color:var(--gold-line); }
.badge.type-no  { background:var(--danger-bg); color:var(--danger);      border-color:var(--danger-line); }
.frame-head.plain .badge.type-one { background:var(--info-bg);   color:var(--purple-dark); }
.frame-head.plain .badge.type-many{ background:var(--gold-soft); color:var(--gold-deep); }
.frame-head.plain .badge.type-no  { background:var(--danger-bg); color:var(--danger); }

.type-legend{
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; margin-bottom:1rem;
  font-size:var(--fs-sm); font-weight:600; color:var(--ink-2);
}

/* بطاقات المجموعات */
.mod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; align-items:start; }
.mod-card{ margin:0; display:flex; flex-direction:column; }
.mod-card.off{ opacity:.6; }
.mod-card .frame-title small{ font-weight:600; font-size:var(--fs-xs); }
.mod-opts{ list-style:none; margin:0; padding:.3rem 0; }
.mod-opts li{
  display:flex; justify-content:space-between; gap:.5rem;
  padding:.35rem 1rem; font-size:var(--fs-base); font-weight:600; color:var(--ink);
  border-bottom:1px dashed var(--row-line);
}
.mod-opts li:last-child{ border-bottom:none; }
.mod-opts li.off{ color:var(--ink-faint); text-decoration:line-through; }
.mod-opts li b{ color:var(--gold-deep); font-weight:800; }
.mod-foot{
  display:flex; align-items:center; gap:.6rem; margin-top:auto;
  padding:.5rem 1rem; border-top:1px solid var(--row-line); background:var(--thead-bg);
}
.mod-foot .row-actions{ margin-inline-start:auto; }

/* جدول الخيارات في نموذج المجموعة */
.opt-table td{ padding:.45rem .6rem; }
.opt-table .opt-price{ max-width:110px; margin:0 auto; }
.opt-default{ display:inline-flex; cursor:pointer; }
.opt-default input{ position:absolute; opacity:0; }
.opt-default span{
  width:22px; height:22px; border-radius:50%;
  border:2px solid var(--frame-color-strong); background:var(--white);
  transition:all var(--t-fast);
}
.opt-default input:checked + span{ border:7px solid var(--purple); }
.opt-default input:focus-visible + span{ outline:3px solid var(--gold); outline-offset:2px; }

/* الأعمدة تظهر حسب نوع المجموعة */
#modForm [data-only]{ display:none; }
#modForm[data-type="one"]  [data-only="one"],
#modForm[data-type="one"]  [data-only="price"],
#modForm[data-type="many"] [data-only="many"],
#modForm[data-type="many"] [data-only="price"]{ display:revert; }

/* اختيار المجموعات في نموذج الصنف */
.group-picks{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.6rem; }
.group-pick{ cursor:pointer; margin:0; }
.group-pick input{ position:absolute; opacity:0; }
.gp-box{
  display:grid; gap:.3rem; height:100%; padding:.65rem .8rem;
  border:1.5px solid var(--row-line); border-radius:var(--rp-r); background:var(--white);
  transition:all var(--t-fast);
}
.gp-head{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.gp-head b{ font-weight:800; color:var(--ink); }
.gp-head small{ color:var(--ink-muted); font-weight:600; }
.gp-head .badge{ margin-inline-start:auto; }
.gp-opts{ font-size:var(--fs-sm); color:var(--ink-muted); font-weight:600; line-height:1.5; }
.group-pick:hover .gp-box{ border-color:var(--purple-label); }
.group-pick input:checked + .gp-box{ border-color:var(--purple); background:var(--purple-softer); box-shadow:inset 0 0 0 1px var(--purple); }
.group-pick input:focus-visible + .gp-box{ outline:3px solid var(--gold); outline-offset:2px; }

/* معاينة بطاقة الصنف كما في شاشة البيع */
.pos-preview-wrap{ background:var(--rp-side-bg); display:flex; justify-content:center; padding:1.4rem 1rem; }
.pos-preview{
  --cc:var(--cat-teal);
  position:relative; width:170px; min-height:66px;
  display:flex; flex-direction:column; justify-content:space-between; gap:.25rem;
  padding:.6rem .8rem .5rem;
  background:linear-gradient(180deg,var(--teal-bg),var(--teal-bg-2));
  border:1px solid var(--teal-line); border-radius:var(--rp-r); box-shadow:var(--shadow-md);
}
.pos-preview .pp-dot{ position:absolute; top:.75rem; inset-inline-end:.75rem; width:6px; height:6px; border-radius:50%; background:var(--cc); }
.pos-preview .pp-name{ font-size:.95rem; font-weight:700; color:var(--ink); line-height:1.35; padding-inline-end:.8rem; }
.pos-preview .pp-foot{ display:flex; align-items:center; justify-content:space-between; gap:.3rem; }
.pos-preview .pp-price b{ font-size:1.1rem; font-weight:800; color:var(--teal-dark); font-variant-numeric:tabular-nums; }
.pos-preview .pp-price small{ font-size:.65rem; color:var(--teal-muted); margin-inline-start:2px; }
.pos-preview .pp-opt{ font-size:.62rem; font-weight:700; color:var(--purple-label); background:rgba(255,255,255,.75); border-radius:20px; padding:0 .45rem; }
.pos-preview .pp-soldout{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.72); border-radius:var(--rp-r);
  color:var(--danger); font-weight:900; font-size:1.1rem;
}
.pos-preview.soldout .pp-name,.pos-preview.soldout .pp-price b{ color:var(--ink-faint); }


/* ==========================================================================
   10 · التجاوب
   ========================================================================== */

@media (max-width:991.98px){
  .perm-savebar{ inset-inline-start:0; }
  .settings-brand{ grid-template-columns:1fr; }
}

@media (max-width:767.98px){
  .perm-grid{ grid-template-columns:1fr; }
  .perm-savebar{ padding:.6rem .8rem; }
  .perm-savebar .btn{ flex:1; justify-content:center; }
  .auth-card{ padding:1.6rem 1.2rem 1.2rem; }
  .filter-bar .form-select,.filter-bar .date-input{ width:100%; }
  .copy-row{ flex-wrap:wrap; }
  .copy-row .form-control{ flex-basis:100%; }
  .form-actions .btn{ flex:1; justify-content:center; }
}