/* ============================================================
   بريد tn.sa — الإعدادات وجهات الاتصال والمجلّدات والحوارات
   بوتستراب وelastic يفرضان أحجامًا وظلالًا لا تشبه جيميل،
   فهذه الطبقة تلغيها وتعيد بناء الحقول والأزرار والقوائم
   من رموز السمة وحدها ليعمل الوضع الداكن بلا استثناءات.
   ============================================================ */

/* ============ ١) إطار الإعدادات ============ */
/* صفحات الإعدادات تُحمَّل داخل iframe، فتلوينه يجب أن يطابق البطاقة الحاضنة */
body.tn-iframe.task-settings,
body.tn-iframe.task-addressbook {
  background: var(--tn-surface) !important;
  color: var(--tn-text);
}

.formcontent,
#contact-details.formcontent {
  padding: 24px 32px 32px !important;
  max-inline-size: 880px;
  background: transparent !important;
  border: 0 !important;
}

/* العنوان الفرعي لكل مجموعة حقول — بديل خطّ fieldset الرمادي */
.formcontent fieldset {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
  min-inline-size: 0;
}
.formcontent fieldset > legend {
  display: block;
  inline-size: 100%;
  padding: 0 0 12px !important;
  margin: 0 0 8px !important;
  border: 0 !important;
  border-block-end: 1px solid var(--tn-divider-soft) !important;
  font-size: var(--tn-fs-lg);
  font-weight: 600;
  color: var(--tn-text);
  float: none !important;
}
.formcontent legend.voice { display: none !important; }

/* صفّ الحقل: عنوان على اليمين وقيمة على اليسار */
.formcontent table.propform { inline-size: 100%; border-collapse: collapse; }
.formcontent .form-group.row,
.formcontent tr.form-group { border: 0 !important; }
.formcontent td,
.formcontent td.title {
  padding: 6px 0 !important;
  border: 0 !important;
  vertical-align: middle;
}
.formcontent td.title,
.formcontent label.col-form-label,
.formcontent td.title label {
  font-size: var(--tn-fs-md);
  font-weight: 400;
  color: var(--tn-text-2);
  padding-inline-end: 16px !important;
  margin: 0;
}
.formcontent .row.form-group { margin: 0 0 4px !important; align-items: center; }
.formcontent div[class^='col-'], .formcontent div[class*=' col-'] { padding-inline: 0 !important; }

/* ============ ٢) الحقول ============ */
.formcontent input[type='text'],
.formcontent input[type='email'],
.formcontent input[type='password'],
.formcontent input[type='number'],
.formcontent input[type='url'],
.formcontent input[type='tel'],
.formcontent input[type='search'],
.formcontent input.form-control,
.formcontent select.form-control,
.formcontent select.custom-select,
.formcontent textarea.form-control,
.ui-dialog input.form-control,
.ui-dialog select.custom-select,
input.form-control,
select.custom-select,
textarea.form-control {
  block-size: 44px;
  min-block-size: 44px;
  inline-size: 100%;
  max-inline-size: 420px;
  padding-inline: 14px;
  padding-block: 0;
  font-family: var(--tn-font) !important;
  font-size: var(--tn-fs-md);
  color: var(--tn-text);
  background: var(--tn-surface);
  border: 1px solid var(--tn-divider);
  border-radius: var(--tn-r-sm);
  box-shadow: none !important;
  outline: none !important;
  transition: border-color var(--tn-d-2) var(--tn-ease),
              box-shadow var(--tn-d-2) var(--tn-ease),
              background-color var(--tn-d-2) var(--tn-ease);
}
textarea.form-control {
  block-size: auto;
  min-block-size: 120px;
  padding-block: 12px;
  line-height: var(--tn-lh);
  resize: vertical;
}
input.form-control:hover,
select.custom-select:hover,
textarea.form-control:hover { border-color: var(--tn-outline); }

/* التركيز: حدّ مزدوج بالظلّ الداخلي حتى لا يتزحزح المقاس */
input.form-control:focus,
select.form-control:focus,
select.custom-select:focus,
textarea.form-control:focus {
  border-color: var(--tn-primary) !important;
  box-shadow: inset 0 0 0 1px var(--tn-primary) !important;
}
input.form-control::placeholder,
textarea.form-control::placeholder { color: var(--tn-text-3); opacity: 1; }
input.form-control:disabled,
select.custom-select:disabled { background: var(--tn-surface-2); color: var(--tn-text-3); }

/* سهم القائمة المنسدلة: سهم المتصفّح الأصلي يتبع color-scheme ويقف في
   نهاية السطر تلقائيًّا، بخلاف صورة بوتستراب الثابتة التي تختفي في الوضع الداكن */
select.custom-select, select.form-control, .formcontent select {
  appearance: auto;
  -webkit-appearance: auto;
  background-image: none !important;
  padding-inline-end: 10px;
}

/* الحقول المركّبة (البريد/الهاتف في جهة الاتصال) */
.formcontent .input-group { gap: 8px; align-items: center; flex-wrap: nowrap; }
.formcontent .input-group > select.custom-select { max-inline-size: 140px; flex: none; }
/* الغلاف وحده يُفرَّغ — أمّا select داخله فيحتفظ بحدّه */
.formcontent span.input-group-append,
.formcontent span.input-group-prepend,
.formcontent .input-group-text {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.formcontent .input-group-append .btn,
.formcontent .input-group-append a.button,
.formcontent a.button.icon.delete {
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  flex: none;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--tn-r-pill);
  background: transparent !important;
  color: var(--tn-icon) !important;
  transition: background-color var(--tn-d-2) var(--tn-ease);
}
.formcontent .input-group-append a.button:hover,
.formcontent a.button.icon.delete:hover { background: var(--tn-surface-2) !important; }
/* حقول العنوان المركّبة تُرصّ عموديًّا بمسافة بدل الالتصاق */
.formcontent .input-group.composite { flex-wrap: wrap; }
.formcontent .input-group > .content { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }

/* ============ ٣) مفاتيح التبديل ============ */
.custom-control.custom-switch { padding: 0 !important; margin: 0; min-block-size: 32px; display: inline-flex; align-items: center; }
.custom-switch .custom-control-input {
  position: absolute;
  inline-size: 52px;
  block-size: 32px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.custom-switch .custom-control-label {
  position: relative;
  display: block;
  inline-size: 52px !important;
  block-size: 32px;
  min-block-size: 32px !important;
  margin: 0;
  padding: 0 !important;
  cursor: pointer;
}
.custom-switch .custom-control-label::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 52px !important;
  block-size: 32px !important;
  margin: 0 !important;
  border-radius: var(--tn-r-pill) !important;
  background: var(--tn-surface-3);
  border: 2px solid var(--tn-outline);
  box-shadow: none;
  transition: background-color var(--tn-d-2) var(--tn-ease), border-color var(--tn-d-2) var(--tn-ease);
}
.custom-switch .custom-control-label::after {
  content: '';
  position: absolute;
  inset-block-start: 8px !important;
  inset-inline-start: 8px;
  inline-size: 16px !important;
  block-size: 16px !important;
  margin: 0 !important;
  transform: none !important;
  border-radius: 50% !important;
  background: var(--tn-outline);
  box-shadow: none;
  transition: margin-inline-start var(--tn-d-2) var(--tn-ease),
              inline-size var(--tn-d-2) var(--tn-ease-spring),
              block-size var(--tn-d-2) var(--tn-ease-spring),
              inset-block-start var(--tn-d-2) var(--tn-ease),
              background-color var(--tn-d-2) var(--tn-ease);
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--tn-primary);
  border-color: var(--tn-primary);
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  inline-size: 24px !important;
  block-size: 24px !important;
  inset-block-start: 4px !important;
  inset-inline-start: 4px;
  margin-inline-start: 20px !important;
  background: var(--tn-surface);
}
.custom-switch .custom-control-input:focus-visible ~ .custom-control-label::before {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tn-primary) 22%, transparent);
}

/* مربّعات الاختيار العادية */
.formcontent input[type='checkbox']:not(.custom-control-input),
.formcontent input[type='radio'] { accent-color: var(--tn-primary); inline-size: 18px; block-size: 18px; }

/* ============ ٤) الأزرار ============ */
.btn {
  font-family: var(--tn-font) !important;
  font-size: var(--tn-fs-md);
  font-weight: 500;
  border-radius: var(--tn-r-pill);
  box-shadow: none !important;
  transition: background-color var(--tn-d-2) var(--tn-ease),
              box-shadow var(--tn-d-2) var(--tn-ease),
              color var(--tn-d-2) var(--tn-ease);
}
.btn-primary,
.btn.mainaction,
.ui-dialog-buttonpane button.mainaction {
  block-size: 40px;
  padding-inline: 24px;
  background: var(--tn-primary) !important;
  border: 1px solid var(--tn-primary) !important;
  color: var(--tn-surface) !important;
}
.btn-primary:hover,
.ui-dialog-buttonpane button.mainaction:hover {
  background: var(--tn-primary-hover) !important;
  border-color: var(--tn-primary-hover) !important;
  box-shadow: var(--tn-e1) !important;
}
.btn-secondary,
.ui-dialog-buttonpane button:not(.mainaction) {
  block-size: 40px;
  padding-inline: 24px;
  background: transparent !important;
  border: 1px solid var(--tn-outline) !important;
  color: var(--tn-primary) !important;
}
.btn-secondary:hover,
.ui-dialog-buttonpane button:not(.mainaction):hover {
  background: color-mix(in srgb, var(--tn-primary) 8%, transparent) !important;
  border-color: var(--tn-primary) !important;
}
.btn-danger { background: var(--tn-danger) !important; border-color: var(--tn-danger) !important; color: var(--tn-surface) !important; }
/* أيقونة FontAwesome في ::before تظهر مربّعًا داخل زرّ نصّي — تُصفَّر */
.formbuttons .btn::before,
.ui-dialog-buttonpane button::before { content: none !important; }

.formbuttons {
  position: sticky;
  inset-block-end: 0;
  z-index: 5;
  display: flex;
  gap: 12px;
  padding: 16px 32px;
  margin: 0;
  background: var(--tn-surface);
  border-block-start: 1px solid var(--tn-divider);
}

/* ============ ٥) القوائم الجانبية — حبّات كالمجلّدات ============ */
#settings-menu,
#directorylist,
#sections-table {
  border: 0 !important;
  background: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0 2px;
  inline-size: 100%;
}
#settings-menu li,
#directorylist li,
#sections-table tr { border: 0 !important; background: transparent !important; }

#settings-menu li > a,
#directorylist li > a,
#sections-table td.section {
  display: flex !important;
  align-items: center;
  gap: 18px;
  block-size: 36px;
  padding-inline: 20px 12px !important;
  border: 0 !important;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--tn-r-lg);
  border-end-end-radius: var(--tn-r-lg);
  color: var(--tn-text-2) !important;
  font-size: var(--tn-fs-md);
  font-weight: 400;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color var(--tn-d-2) var(--tn-ease), color var(--tn-d-2) var(--tn-ease);
}
#settings-menu li > a:hover,
#directorylist li > a:hover,
#sections-table tr:hover td.section { background: var(--tn-surface-3) !important; }

#settings-menu li.selected > a,
#directorylist li.selected > a,
#sections-table tr.selected td.section,
#sections-table tr.focused td.section {
  background: var(--tn-selected) !important;
  color: var(--tn-on-selected) !important;
  font-weight: 600;
}

/* أيقونات القوائم: قناع بدل محرف FontAwesome */
#settings-menu li > a::before,
#directorylist li > a::before,
#sections-table td.section::before {
  content: '' !important;
  position: static !important;
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  margin: 0 !important;
  background-color: currentColor;
  font-family: inherit !important;
  font-size: 0 !important;
  -webkit-mask: var(--icon, var(--i-settings)) center / contain no-repeat;
  mask: var(--icon, var(--i-settings)) center / contain no-repeat;
}
#settingstabpreferences > a { --icon: var(--i-settings); }
#settingstabfolders    > a { --icon: var(--i-folder); }
#settingstabidentities > a { --icon: var(--i-person); }
#settingstabresponses  > a { --icon: var(--i-reply); }
#settings-menu li.filter > a, #settingstabpluginmanagesieve > a { --icon: var(--i-tune); }
#directorylist li > a { --icon: var(--i-contacts); }

#rcmrowgeneral     td.section { --icon: var(--i-tune); }
#rcmrowmailbox     td.section { --icon: var(--i-inbox); }
#rcmrowmailview    td.section { --icon: var(--i-mail); }
#rcmrowcompose     td.section { --icon: var(--i-pencil); }
#rcmrowaddressbook td.section { --icon: var(--i-contacts); }
#rcmrowfolders     td.section { --icon: var(--i-folder); }
#rcmrowserver      td.section { --icon: var(--i-settings); }
#rcmrowencryption  td.section { --icon: var(--i-important); }

/* ============ ٦) الجداول ============ */
table.listing,
table.records-table {
  inline-size: 100%;
  border: 0 !important;
  border-collapse: collapse;
  background: transparent !important;
}
table.listing tr,
table.records-table tr { border: 0 !important; }
table.listing td,
table.records-table td,
table.records-table th {
  block-size: 44px;
  padding: 0 16px !important;
  border: 0 !important;
  border-block-end: 1px solid var(--tn-divider-soft) !important;
  font-size: var(--tn-fs-md);
  color: var(--tn-text);
  vertical-align: middle;
}
table.records-table th { color: var(--tn-text-3); font-weight: 500; font-size: var(--tn-fs-sm); }
#folderlist tr:hover td,
#identities-table tr:hover td,
#contacts-table tr:hover td,
table.records-table tbody tr:hover td { background: var(--tn-surface-2) !important; }
#folderlist tr.selected td,
#identities-table tr.selected td,
#contacts-table tr.selected td {
  background: var(--tn-selected) !important;
  color: var(--tn-on-selected) !important;
}
#folderlist td.subscription, #folderlist td.subscribed { inline-size: 64px; text-align: center; }
#folderlist tr.unsubscribed td.name { color: var(--tn-text-3); }

/* ============ ٧) القوائم المنبثقة والحوارات ============ */
.popupmenu,
.ui-dialog {
  background: var(--tn-surface) !important;
  border: 0 !important;
  border-radius: var(--tn-r-lg) !important;
  box-shadow: var(--tn-e3) !important;
  color: var(--tn-text);
  overflow: hidden;
  animation: tn-pop var(--tn-d-3) var(--tn-ease-out) both;
}
@keyframes tn-pop {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
.popupmenu { padding-block: 8px; }
.popupmenu ul.toolbarmenu,
.popupmenu ul.listing { border: 0 !important; background: transparent !important; }
.popupmenu ul > li { border: 0 !important; background: transparent !important; }
.popupmenu ul > li > a {
  display: flex;
  align-items: center;
  gap: 14px;
  block-size: 40px;
  padding-inline: 20px 16px !important;
  color: var(--tn-text) !important;
  font-size: var(--tn-fs-md);
  text-decoration: none !important;
  transition: background-color var(--tn-d-1) var(--tn-ease);
}
.popupmenu ul > li > a:hover,
.popupmenu ul > li > a.active:hover { background: var(--tn-surface-2) !important; }
.popupmenu ul > li > a.disabled { color: var(--tn-text-3) !important; opacity: .6; }

.ui-widget-overlay {
  background: var(--tn-backdrop) !important;
  opacity: 1 !important;
  animation: tn-fade var(--tn-d-3) var(--tn-ease) both;
}
@keyframes tn-fade { from { opacity: 0; } to { opacity: 1; } }

.ui-dialog .ui-dialog-titlebar {
  background: transparent !important;
  border: 0 !important;
  padding: 20px 24px 8px !important;
  font-size: var(--tn-fs-xl);
  font-weight: 500;
  color: var(--tn-text);
}
.ui-dialog .ui-dialog-content {
  padding: 8px 24px 16px !important;
  min-block-size: 0 !important;
  color: var(--tn-text-2);
  font-size: var(--tn-fs-md);
  line-height: var(--tn-lh);
}
.ui-dialog .ui-dialog-buttonpane {
  border: 0 !important;
  background: transparent !important;
  padding: 8px 24px 20px !important;
  margin: 0 !important;
}
.ui-dialog .ui-dialog-buttonset { display: flex; gap: 8px; justify-content: flex-end; }
.ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  inline-size: 40px !important;
  block-size: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--tn-r-pill) !important;
  background: transparent !important;
  color: var(--tn-icon) !important;
  box-shadow: none !important;
  transition: background-color var(--tn-d-2) var(--tn-ease);
}
.ui-dialog .ui-dialog-titlebar-close:hover { background: var(--tn-surface-2) !important; }
.ui-dialog .ui-dialog-titlebar-close::before {
  content: '' !important;
  display: block;
  inline-size: 20px;
  block-size: 20px;
  margin: auto;
  background-color: currentColor;
  font-family: inherit !important;
  -webkit-mask: var(--i-close) center / contain no-repeat;
  mask: var(--i-close) center / contain no-repeat;
}
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close span { display: none !important; }
.ui-dialog .ui-dialog-titlebar { position: relative; padding-inline-end: 64px !important; }

/* ============ ٨) شرائح التنبيه ============ */
:root { --tn-toast-bg: color-mix(in srgb, var(--tn-text) 92%, var(--tn-bg)); --tn-toast-fg: var(--tn-bg); }
html.dark-mode { --tn-toast-bg: var(--tn-surface-3); --tn-toast-fg: var(--tn-text); }

#messagestack {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-start: 24px;
  inset-inline-end: auto;
  inline-size: auto;
  max-inline-size: min(520px, calc(100vw - 48px));
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
#messagestack div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 48px;
  padding: 12px 20px;
  border: 0 !important;
  border-radius: var(--tn-r-pill);
  background: var(--tn-toast-bg) !important;
  color: var(--tn-toast-fg) !important;
  font-size: var(--tn-fs-md);
  line-height: var(--tn-lh-tight);
  box-shadow: var(--tn-e3);
  pointer-events: auto;
  animation: tn-toast-in var(--tn-d-3) var(--tn-ease-out) both;
}
@keyframes tn-toast-in {
  from { opacity: 0; transform: translateY(24px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
#messagestack div::before {
  content: '';
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  background-color: currentColor;
  font-family: inherit !important;
  -webkit-mask: var(--icon, var(--i-mail)) center / contain no-repeat;
  mask: var(--icon, var(--i-mail)) center / contain no-repeat;
}
#messagestack div::before { background-color: var(--tn-toast-accent, currentColor); }
#messagestack div.confirmation { --icon: var(--i-check);     --tn-toast-accent: var(--tn-success); }
#messagestack div.error        { --icon: var(--i-close);     --tn-toast-accent: var(--tn-danger); }
#messagestack div.warning      { --icon: var(--i-important); --tn-toast-accent: var(--tn-warning); }
#messagestack div.loading      { --icon: var(--i-refresh); }
/* أيقونة FontAwesome التي يحقنها elastic داخل الشريحة تُخفى لئلّا تتكرّر */
#messagestack div > span.icon,
#messagestack div > i,
#messagestack div::after { display: none !important; content: none !important; }
#messagestack div.loading::before { animation: tn-spin-slow 1s linear infinite; }
@keyframes tn-spin-slow { to { transform: rotate(360deg); } }

/* ============ ٩) تبويبات جهة الاتصال ============ */
.formcontent ul.nav-tabs {
  border: 0 !important;
  border-block-end: 1px solid var(--tn-divider) !important;
  gap: 8px;
  margin-block-end: 20px;
}
.formcontent .nav-tabs .nav-link {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
  color: var(--tn-text-2) !important;
  font-size: var(--tn-fs-md);
  font-weight: 500;
  background: transparent !important;
  box-shadow: inset 0 -3px 0 0 transparent;
  transition: color var(--tn-d-2) var(--tn-ease), box-shadow var(--tn-d-2) var(--tn-ease);
}
.formcontent .nav-tabs .nav-link:hover { color: var(--tn-text) !important; }
.formcontent .nav-tabs .nav-link.active {
  color: var(--tn-primary) !important;
  box-shadow: inset 0 -3px 0 0 var(--tn-primary);
}

/* صورة جهة الاتصال */
#contactpic { border-radius: var(--tn-r-lg); overflow: hidden; background: var(--tn-surface-2); }