body {
  font-family: "IBM Plex Sans Arabic", var(--bs-body-font-family) !important;
}

[dir="auto"] {
  text-align: right;  /* Site dir is rtl */
}

label {
  font-weight: bold;
}

.overflow-wrap {
  overflow-wrap: anywhere;
}

.asteriskField {
  color: var(--bs-danger);
}

.cursor-pointer, a {
  cursor: pointer;
}

.cursor-grab {
  cursor: grab;
}

.sortable-ghost {
  opacity: 0.5;
}

[x-cloak] { 
  display: none !important; 
}

.my-indicator {
  display:none;
}
.htmx-request .my-indicator {
  display:inline-block;
}
.htmx-request.my-indicator {
  display:inline-block;
}

.placeholder-container::before {
  content: var(--placeholder-content, 'لا توجد عناصر');
  color: gray;
  display: block;
  text-align: center;
  padding: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.placeholder-container.has-items::before {
  content: '';
  display: none;
}

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.alert-warning a {
  color: var(--bs-warning-text-emphasis);
}

.spin-icon {
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-soft {
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  color: var(--bs-body-color) !important;
  transition: all 0.2s ease;
}

.btn-soft:hover:not(:disabled):not(.disabled) {
  background: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
}

.btn-soft:disabled,
.btn-soft.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color-translucent, var(--bs-border-color));
  color: var(--bs-secondary-color) !important;
}

input[name="nickname"], #div_id_nickname {  
  /* hpf */
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
  z-index: -1;
}


/* Light/Dark mode element handling */
[data-bs-theme="dark"] .light-only {
  display: none;
}

[data-bs-theme="dark"] .dark-only {
  display: inline-block;
}

[data-bs-theme="light"] .dark-only {
  display: none;
}

[data-bs-theme="light"] .light-only {
  display: inline-block;
}


/* 
  Show or hide elements in PWA vs browser
  (assumes display mode in PWA manifest is set to standalone)
*/

.show-when-installed {
  display: none !important;
}

@media (display-mode: standalone) { 
  .hide-when-installed {
    display: none !important;
  }
  .show-when-installed {
    display: revert !important; /* respects original display property */
  }
}

/* =========================================
   App Shell Layout
   A full-viewport layout with a fixed navbar,
   independent sidenav and main scroll areas.
   ========================================= */

.app-shell {
    height: 100vh;    /* fallback for older browsers */
    height: 100svh;   /* overrides on supported browsers. Chrome: v108 (released Nov 2022); Safari: v15.4; Firefox: v101 */
    width: 100vw;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Fills the remaining vertical space below the navbar */
.app-body {
    flex: 1 1 0;
    min-height: 0; /* critical: allows flex child to shrink below content size */
}

/* Sidenav: full height of app-body, scrolls on its own */
.app-sidenav {
    overflow-y: auto;
    width: 200px;
    height: 100%;
}

/* Main content: takes remaining width */
.app-main {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;   /* critical: prevents overflow when content is wider than available space */
    overflow-y: auto;
    position: relative; /* for absolute positioning of children if needed */
    display: flex;
    flex-direction: column;
}

.pagenav-btn-half {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0; 
}

.min-h-0 {
  min-height: 0;
}

.min-w-0 {
  min-width: 0;
}