/*!
 * DOMN Portal layout — sidebar + topbar + content shell.
 * Used by customer, trainee, and staff portals.
 */

.domn-portal {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  min-height: calc(100vh - 4rem);
  gap: 0;
}

@media (min-width: 960px) {
  .domn-portal { grid-template-columns: 260px 1fr; grid-template-rows: 1fr; }
  .domn-portal-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}

/* Topbar */
.domn-portal-topbar {
  background: var(--domn-surface);
  border-bottom: 1px solid var(--domn-border);
  padding: var(--domn-space-3) var(--domn-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--domn-space-3);
}
.domn-portal-topbar .domn-greet {
  font-weight: 600;
  color: var(--domn-text);
}
.domn-portal-topbar .domn-greet small { display:block; font-weight:400; color: var(--domn-text-muted); font-size: var(--domn-fs-xs); }
.domn-portal-topbar-actions { display: flex; align-items: center; gap: var(--domn-space-3); }

.domn-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--domn-surface-alt); color: var(--domn-text-muted);
}
.domn-bell-count {
  position: absolute; top: -4px; left: -4px;
  background: var(--domn-danger); color: #fff;
  font-size: 0.7rem; font-weight: 700;
  min-width: 1.25rem; padding: 0 .35rem; height: 1.25rem;
  border-radius: var(--domn-radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
}

/* Sidebar */
.domn-portal-sidebar {
  background: var(--domn-surface);
  border-left: 1px solid var(--domn-border);
  padding: var(--domn-space-5) 0;
}
.domn-portal-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--domn-space-3); }
.domn-portal-nav a {
  display: flex; align-items: center; gap: var(--domn-space-3);
  padding: var(--domn-space-3) var(--domn-space-4);
  border-radius: var(--domn-radius);
  color: var(--domn-text);
  font-weight: 500;
  font-size: var(--domn-fs-sm);
  text-decoration: none;
  transition: background var(--domn-transition), color var(--domn-transition);
}
.domn-portal-nav a:hover  { background: var(--domn-surface-alt); text-decoration:none; }
.domn-portal-nav a.is-active {
  background: var(--domn-primary-soft);
  color: var(--domn-primary);
}
.domn-portal-nav-icon { font-size: 1.15rem; width: 1.5rem; text-align: center; }
.domn-portal-nav-section {
  text-transform: uppercase; font-size: var(--domn-fs-xs); font-weight: 700;
  color: var(--domn-text-soft); padding: var(--domn-space-4) var(--domn-space-5) var(--domn-space-2);
}

/* Content area */
.domn-portal-content {
  padding: var(--domn-space-6) var(--domn-space-5);
  max-width: 100%;
  overflow-x: hidden;
}
.domn-portal-content > h1:first-child,
.domn-portal-content > .domn-page-head:first-child { margin-top: 0; }

.domn-page-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--domn-space-3);
  margin-bottom: var(--domn-space-5);
  flex-wrap: wrap;
}
.domn-page-head h1 { margin: 0; }

/* Stat cards */
.domn-stat-card {
  display: flex; align-items: center; gap: var(--domn-space-3);
  background: var(--domn-surface);
  border: 1px solid var(--domn-border);
  border-radius: var(--domn-radius-lg);
  padding: var(--domn-space-5);
  text-decoration: none; color: inherit;
  transition: transform var(--domn-transition), box-shadow var(--domn-transition);
}
.domn-stat-card:hover { transform: translateY(-2px); box-shadow: var(--domn-shadow); text-decoration: none; }
.domn-stat-icon {
  width: 3rem; height: 3rem; border-radius: var(--domn-radius);
  background: var(--domn-primary-soft); color: var(--domn-primary);
  display:flex; align-items:center; justify-content:center; font-size: 1.5rem;
  flex-shrink: 0;
}
.domn-stat-value { font-size: var(--domn-fs-2xl); font-weight: 800; line-height: 1; }
.domn-stat-label { color: var(--domn-text-muted); font-size: var(--domn-fs-sm); margin-top: .15rem; }

/* Activity feed */
.domn-activity { display: flex; flex-direction: column; gap: var(--domn-space-2); }
.domn-activity-item {
  display: flex; align-items: flex-start; gap: var(--domn-space-3);
  padding: var(--domn-space-3) var(--domn-space-4);
  border-radius: var(--domn-radius);
  background: var(--domn-surface); border: 1px solid var(--domn-border);
}
.domn-activity-icon { width: 2rem; height: 2rem; border-radius: 50%; background: var(--domn-surface-alt); display:flex; align-items:center; justify-content:center; }
.domn-activity-body  { flex: 1; min-width: 0; }
.domn-activity-title { font-weight: 600; }
.domn-activity-time  { color: var(--domn-text-muted); font-size: var(--domn-fs-xs); }

/* List cards (quotes / maintenance / parts items) */
.domn-list-card {
  background: var(--domn-surface);
  border: 1px solid var(--domn-border);
  border-radius: var(--domn-radius-lg);
  padding: var(--domn-space-4) var(--domn-space-5);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--domn-space-4);
}
.domn-list-card + .domn-list-card { margin-top: var(--domn-space-3); }
.domn-list-card .domn-list-body { flex: 1; min-width: 0; }
.domn-list-card .domn-list-meta { color: var(--domn-text-muted); font-size: var(--domn-fs-sm); }
.domn-list-card .domn-list-actions { display: flex; gap: var(--domn-space-2); flex-wrap: wrap; }

/* Chat bubbles for quote/maintenance threads */
.domn-chat {
  display: flex; flex-direction: column; gap: var(--domn-space-3);
  padding: var(--domn-space-4); background: var(--domn-surface-alt);
  border-radius: var(--domn-radius-lg); max-height: 480px; overflow-y: auto;
}
.domn-msg { max-width: 75%; padding: var(--domn-space-3) var(--domn-space-4); border-radius: var(--domn-radius-lg); }
.domn-msg-customer { align-self: flex-start;  background: var(--domn-surface); border: 1px solid var(--domn-border); }
.domn-msg-staff    { align-self: flex-end;    background: var(--domn-primary); color: #fff; }
.domn-msg-meta { font-size: var(--domn-fs-xs); opacity: 0.75; margin-bottom: .25rem; }
.domn-msg p { margin: 0; }


/* Product Picker */
.domn-product-picker { background: var(--domn-surface-alt); padding: var(--domn-space-3); border-radius: var(--domn-radius); }
.domn-pp-tabs { display:flex; gap:.25rem; margin-bottom: var(--domn-space-3); border-bottom: 2px solid var(--domn-border); }
.domn-pp-tabs button { background:transparent; border:0; padding:.5rem .9rem; font-weight:600; font-size:var(--domn-fs-sm); color:var(--domn-text-muted); cursor:pointer; border-bottom: 2px solid transparent; margin-bottom:-2px; }
.domn-pp-tabs button.is-active { color: var(--domn-primary); border-bottom-color: var(--domn-primary); }
.domn-pp-search { width:100%; padding:.55rem .9rem; border:1px solid var(--domn-border-strong); border-radius: var(--domn-radius); margin-bottom: var(--domn-space-2); }
.domn-pp-results { max-height: 280px; overflow-y: auto; display:grid; grid-template-columns:repeat(5, 1fr); gap:.4rem; }
.domn-pp-item { display:flex; flex-direction:column; align-items:center; gap:.25rem; width:100%; text-align:center; padding:.4rem; background:var(--domn-surface); border:1px solid var(--domn-border); border-radius:var(--domn-radius-sm); margin:0; cursor:pointer; transition: border-color 120ms, background 120ms; font-size:var(--domn-fs-xs); line-height:1.15; }
.domn-pp-item:hover { border-color: var(--domn-primary); background: #FCE5E5; }
.domn-pp-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; flex-shrink:0; }
.domn-pp-noimg { width:44px; height:44px; background:var(--domn-border); border-radius:4px; flex-shrink:0; }
.domn-pp-info { display:flex; flex-direction:column; gap:0; min-width:0; width:100%; line-height:1.15; text-align:center; }
.domn-pp-info strong { font-size: 0.7rem; color:var(--domn-text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%; display:block; }
.domn-pp-info small { color: var(--domn-text-muted); font-size: 0.6rem; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%; display:block; }
.domn-pp-empty { padding: var(--domn-space-4); text-align:center; color:var(--domn-text-muted); font-size:var(--domn-fs-sm); }
.domn-pp-selected { margin-top: var(--domn-space-3); }
.domn-pp-chip { display:inline-flex; align-items:center; gap:.6rem; padding:.5rem .75rem; background:var(--domn-surface); border:2px solid var(--domn-primary); border-radius: var(--domn-radius); }
.domn-pp-chip img { width: 32px; height: 32px; object-fit: cover; border-radius: var(--domn-radius-sm); }
.domn-pp-clear { background:transparent; border:0; font-size:1.2rem; color:var(--domn-danger); cursor:pointer; line-height:1; padding:0 .25rem; }
.domn-pp-helper { font-size: var(--domn-fs-xs); color: var(--domn-text-muted); margin-top: var(--domn-space-2); }


/* Product Picker grid responsive (domn-pp-results responsive) */
@media (max-width: 960px) { .domn-pp-results { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) { .domn-pp-results { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .domn-pp-results { grid-template-columns: repeat(2, 1fr); } }


/* ============== Mobile / Tablet Bottom Navigation ============== */
#dbn { display: none; }

@media (max-width: 1024px) {
  #dbn {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 99999;
    justify-content: space-around;
    align-items: flex-end;
    padding: 8px 4px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    direction: rtl;
  }
  #dbn .dbn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-decoration: none !important;
    color: #9ca3af !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 4px 2px;
    gap: 4px;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
  }
  #dbn .dbn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    color: currentColor;
  }
  #dbn .dbn-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
  }
  #dbn .dbn-label {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    color: inherit;
    transition: all 0.25s ease;
    font-family: inherit;
    max-width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Active state - branded */
  #dbn .dbn-item.is-active { color: var(--domn-primary, #C52C35) !important; }
  #dbn .dbn-item.is-active .dbn-icon {
    background: var(--domn-primary, #C52C35);
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(197, 44, 53, 0.35);
  }
  #dbn .dbn-item.is-active .dbn-icon svg { stroke: #fff; }
  #dbn .dbn-item.is-active .dbn-label { font-weight: 700; }

  /* Hover */
  #dbn .dbn-item:not(.is-active):hover { color: var(--domn-primary, #C52C35) !important; }
  #dbn .dbn-item:not(.is-active):hover .dbn-icon {
    background: var(--domn-primary-soft, #FCE5E5);
  }

  /* Push page content above the bar */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); } /* aligned with theme dock; plugin dock disabled */
}

/* ===================================================================
   Audit fixes (cross-cutting): RTL code, mobile page-head, contrast, chat
   =================================================================== */

/* Code / SKU / tracking numbers always render LTR even inside RTL text */
.domn-app code,
.domn-app .domn-ltr { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* Mobile page-head: stack the title block + back button cleanly */
@media (max-width: 600px) {
  .domn-page-head { flex-direction: column; align-items: stretch; gap: var(--domn-space-2); }
  .domn-page-head > a,
  .domn-page-head > div > a { align-self: flex-start; }
  .domn-page-head h1 { font-size: var(--domn-fs-2xl); }
}

/* Status badges: ensure WCAG AA contrast (darker text on soft bg) */
.domn-status {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .7rem; border-radius: var(--domn-radius-pill);
  font-size: var(--domn-fs-xs); font-weight: 700; line-height: 1.6;
}
.domn-status-new        { background: #dbeafe; color: #1e40af; }
.domn-status-reviewing  { background: #fef3c7; color: #92400e; }
.domn-status-progress   { background: #cffafe; color: #155e75; }
.domn-status-completed  { background: #dcfce7; color: #166534; }
.domn-status-cancelled  { background: #f1f5f9; color: #475569; }
.domn-status-rejected   { background: #fee2e2; color: #991b1b; }

/* Unified chat bubble component (used across quote/maintenance/parts) */
.domn-chat { display: flex; flex-direction: column; gap: var(--domn-space-3); max-height: 480px; overflow-y: auto; padding: var(--domn-space-2); }
.domn-msg { max-width: 78%; padding: .6rem .9rem; border-radius: var(--domn-radius-lg); border: 1px solid var(--domn-border); }
.domn-msg-meta { font-size: var(--domn-fs-xs); opacity: .75; margin-bottom: .2rem; }
.domn-msg p { margin: 0; line-height: var(--domn-lh-normal); white-space: pre-wrap; }
.domn-msg-customer { align-self: flex-start; background: var(--domn-surface); }
.domn-msg-staff    { align-self: flex-end; background: var(--domn-primary-soft); border-color: var(--domn-primary-soft); }

/* Tables: enable horizontal scroll on small screens */
.domn-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.domn-table { min-width: 520px; }
@media (max-width: 600px) { .domn-table { min-width: 480px; } }

/* Long Arabic names / product titles never overflow their card */
.domn-list-card .domn-list-body > div:first-child,
.domn-stat-label { overflow-wrap: anywhere; }

/* Avatar sizing consistency */
.domn-avatar { border-radius: 50%; object-fit: cover; }