/* Tremac Phases 3–4: desktop record inspector and accessible mobile sheets.
   Scoped to the existing portal modal. Day Mode/Night Mode variables remain
   owned by the existing theme engine and base styles. */
:root {
  --record-divider: var(--line);
  --record-highlight: rgba(199,154,74,.12);
  --record-sheet-overlay: rgba(2,8,18,.68);
}
.record-shortcuts { display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px; }
.record-shortcuts .button { display:inline-flex;align-items:center;text-decoration:none;min-height:40px; }
.record-site-assets { border-top:1px solid var(--record-divider);padding-top:14px;margin-top:18px;display:flex;gap:8px;flex-wrap:wrap; }
.record-site-assets h3 { width:100%;margin:0 0 4px;color:var(--text); }
.record-site-assets p { color:var(--muted); }
.record-selected > td { background:var(--record-highlight)!important; }
#modal .modal-head h2, #modal .modal-head p { overflow-wrap:anywhere; }
#modal .button:focus-visible, #modal .icon-button:focus-visible,
#modal a:focus-visible { outline:2px solid var(--gold);outline-offset:3px; }
body.sheet-open { overflow:hidden; }
@media (min-width:1100px) {
  .main.inspector-open {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(360px,.88fr);
    align-content:start;
    align-items:start;
  }
  .main.inspector-open > .topbar { grid-column:1/-1; }
  .main.inspector-open > .view {
    width:100%;
    max-width:none;
    min-width:0;
    padding-right:14px;
    grid-column:1;
    grid-row:2;
  }
  #modal.record-docked {
    position:sticky;
    top:91px;
    bottom:auto;
    left:auto;
    right:auto;
    grid-column:2;
    grid-row:2;
    display:block;
    width:100%;
    min-width:0;
    height:calc(100dvh - 91px);
    padding:12px 16px 18px 0;
    z-index:4;
  }
  #modal.record-docked .modal-backdrop { display:none; }
  #modal.record-docked .modal-card {
    width:100%;
    max-height:100%;
    height:100%;
    border-radius:12px;
    border:1px solid var(--record-divider);
    background:var(--card);
    box-shadow:none;
  }
  #modal.record-docked .modal-body { flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain; }
  #modal.record-docked .modal-head { flex-shrink:0; }
  #modal.record-docked .modal-foot { display:none; }
  #modal.record-docked .form-grid { gap:14px 12px; }
  #modal.record-docked .field { min-width:0;overflow-wrap:anywhere; }
  .inspector-open #assetTable table, .inspector-open #requestTable table,
  .inspector-open #clientSitesTable table, .inspector-open #clientAssetsTable table { min-width:0; }
  .inspector-open #assetTable th:nth-child(n+4):not(:last-child),
  .inspector-open #assetTable td:nth-child(n+4):not(:last-child),
  .inspector-open #requestTable th:nth-child(n+3):not(:last-child),
  .inspector-open #requestTable td:nth-child(n+3):not(:last-child),
  .inspector-open #clientSitesTable th:nth-child(n+3):not(:last-child),
  .inspector-open #clientSitesTable td:nth-child(n+3):not(:last-child),
  .inspector-open #clientAssetsTable th:nth-child(n+4):not(:last-child),
  .inspector-open #clientAssetsTable td:nth-child(n+4):not(:last-child) { display:none; }
  .inspector-open .actions { flex-wrap:wrap;white-space:normal; }
  .inspector-open td { padding:9px;overflow-wrap:anywhere; }
}
@media (max-width:1099px) {
  #modal:not(.hidden) {
    display:flex;
    position:fixed;
    inset:0;
    margin:0;
    padding:0;
    align-items:flex-end;
    justify-content:center;
    background:var(--record-sheet-overlay);
    max-height:none;
    border-radius:0;
  }
  #modal .modal-backdrop { position:absolute;inset:0; }
  #modal .modal-card {
    width:100%;
    max-width:100%;
    max-height:calc(94dvh - env(safe-area-inset-top));
    height:auto;
    min-height:0;
    margin:0;
    border-radius:14px 14px 0 0;
    background:var(--card);
    animation:tremac-sheet-rise .22s ease-out;
    padding-top:10px;
    display:flex;
    flex-direction:column;
    box-shadow:0 -12px 36px rgba(0,0,0,.22);
  }
  #modal .modal-card::before {
    content:"";width:36px;height:4px;flex:0 0 4px;
    background:var(--muted);opacity:.7;border-radius:4px;
    align-self:center;
  }
  #modal .modal-head { flex:0 0 auto;padding:14px 16px;display:flex;gap:12px;align-items:start; }
  #modal .modal-head > div { min-width:0; }
  #modal .icon-button { min-width:44px;min-height:44px;flex-shrink:0; }
  #modal .modal-body {
    flex:1 1 auto;
    min-height:0;
    padding:16px;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  #modal .modal-foot {
    flex:0 0 auto;
    position:static;
    display:flex;
    flex-wrap:wrap;
    padding:12px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background:var(--card);
    border-top:1px solid var(--record-divider);
  }
  #modal .form-grid { grid-template-columns:minmax(0,1fr); }
  #modal .form-grid .full { grid-column:1; }
  #modal .field { min-width:0;overflow-wrap:anywhere; }
  #modal input, #modal select, #modal textarea { font-size:16px; }
  #modal .record-shortcuts .button { min-height:44px; }
}
@keyframes tremac-sheet-rise {
  from { transform:translateY(32px);opacity:0; }
  to { transform:none;opacity:1; }
}
@media (prefers-reduced-motion:reduce) {
  #modal .modal-card { animation:none; }
}