document-processor/app/static/app.css

5463 lines
122 KiB
CSS

:root {
--bg: #f3f5f9;
--panel: #ffffff;
--panel-muted: #f8fafc;
--border: #d8dee8;
--text: #1f2937;
--text-muted: #6b7280;
--accent: #2563eb;
--accent-soft: #dbeafe;
--success: #166534;
--success-soft: #dcfce7;
--warn: #92400e;
--warn-soft: #fef3c7;
--danger: #991b1b;
--danger-soft: #fee2e2;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 20px rgba(0,0,0,0.04);
--radius: 12px;
--sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
--rail-closed: 52px;
--rail-open: 230px;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
min-height: 100%;
background: var(--bg);
color: var(--text);
font-family: var(--sans);
}
body {
min-height: 100vh;
}
a {
color: var(--accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.app-shell {
min-height: 100vh;
}
.sidebar {
position: fixed;
inset: 0 auto 0 0;
width: var(--rail-closed);
background: #08142f;
color: #e5e7eb;
overflow-x: hidden;
overflow-y: auto;
padding: 0.75rem 0.45rem 1rem 0.45rem;
z-index: 100;
transition: width 0.18s ease;
}
.app-shell.nav-open .sidebar {
width: var(--rail-open);
}
.main {
margin-left: var(--rail-closed);
padding: calc(var(--topbar-height) + 1.25rem) 1.25rem 1.25rem 1.25rem;
min-height: 100vh;
transition: margin-left 0.18s ease;
}
.app-shell.nav-open .main {
margin-left: var(--rail-open);
}
.sidebar-top {
display: flex;
align-items: center;
gap: 0.7rem;
min-height: 36px;
margin-bottom: 1rem;
}
.sidebar-toggle {
width: 24px;
height: 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
flex: 0 0 24px;
margin-left: 2px;
}
.sidebar-toggle span {
display: block;
width: 100%;
height: 2px;
background: #94a3b8;
border-radius: 999px;
}
.sidebar-toggle:hover span {
background: #e2e8f0;
}
.brand {
font-weight: 700;
font-size: 1rem;
white-space: nowrap;
display: none;
}
.sidebar-section-title {
color: #94a3b8;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 1rem 0 0.5rem 0;
white-space: nowrap;
display: none;
}
.nav-list {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.nav-link {
display: flex;
align-items: center;
gap: 0.65rem;
color: #e5e7eb;
border-radius: 10px;
padding: 0.72rem 0.6rem;
white-space: nowrap;
overflow: hidden;
}
.nav-link:hover {
background: rgba(255,255,255,0.08);
text-decoration: none;
}
.nav-link.active {
background: rgba(59,130,246,0.28);
color: #fff;
}
.nav-link-short {
display: inline-flex;
min-width: 1rem;
justify-content: center;
font-weight: 600;
}
.nav-link-text {
display: none;
}
.app-shell.nav-open .brand,
.app-shell.nav-open .sidebar-section-title,
.app-shell.nav-open .nav-link-text {
display: initial;
}
.app-shell:not(.nav-open) .nav-link {
justify-content: center;
}
.page-title {
margin: 0;
font-size: 1.7rem;
}
.page-subtitle {
margin: 0.25rem 0 0 0;
color: var(--text-muted);
font-size: 0.95rem;
}
.card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1rem;
margin-bottom: 1rem;
}
.card-title {
margin: 0 0 0.75rem 0;
font-size: 1.05rem;
}
.button-row {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
align-items: center;
}
button,
.button-link {
appearance: none;
border: 1px solid var(--border);
background: var(--panel);
color: var(--text);
border-radius: 10px;
padding: 0.65rem 0.95rem;
cursor: pointer;
font: inherit;
}
button:hover,
.button-link:hover {
background: #f3f4f6;
text-decoration: none;
}
button.primary,
.button-link.primary {
background: var(--accent);
color: white;
border-color: var(--accent);
}
button.danger {
background: var(--danger-soft);
color: var(--danger);
border-color: #fecaca;
}
.badges {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.badge {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 0.28rem 0.7rem;
font-size: 0.82rem;
border: 1px solid var(--border);
background: var(--panel-muted);
color: var(--text);
}
.badge.reviewed {
background: var(--success-soft);
color: var(--success);
border-color: #bbf7d0;
}
.badge.pending {
background: var(--warn-soft);
color: var(--warn);
border-color: #fde68a;
}
.badge.trashed {
background: var(--danger-soft);
color: var(--danger);
border-color: #fecaca;
}
.table-wrap {
overflow: auto;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
}
th, td {
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--border);
padding: 0.7rem 0.6rem;
}
th {
color: var(--text-muted);
font-weight: 600;
font-size: 0.83rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.grid-2 {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 1rem;
align-items: start;
}
.meta-grid {
display: grid;
grid-template-columns: repeat(2, minmax(220px, 1fr));
gap: 0.65rem 1rem;
}
.meta-item {
background: var(--panel-muted);
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.65rem 0.8rem;
}
.meta-label {
display: block;
color: var(--text-muted);
font-size: 0.78rem;
margin-bottom: 0.25rem;
}
.preview-frame {
width: 100%;
height: 950px;
border: 1px solid var(--border);
border-radius: 10px;
background: white;
}
.preview-image {
width: 100%;
max-height: 950px;
object-fit: contain;
border: 1px solid var(--border);
border-radius: 10px;
background: white;
}
.sticky-actions {
position: sticky;
top: 0;
z-index: 20;
background: rgba(243,245,249,0.94);
padding: 0.25rem 0 0.75rem 0;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem 1rem;
}
.form-field {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.form-field.full {
grid-column: 1 / -1;
}
label {
font-size: 0.86rem;
color: var(--text-muted);
}
input[type="text"],
input[type="date"],
textarea {
width: 100%;
border: 1px solid var(--border);
background: white;
border-radius: 10px;
padding: 0.7rem 0.75rem;
font: inherit;
color: var(--text);
}
textarea {
font-family: var(--mono);
line-height: 1.45;
}
.editor-wrap {
display: grid;
grid-template-columns: 4rem minmax(0, 1fr);
border: 1px solid var(--border);
border-radius: 0.85rem;
overflow: hidden;
background: #fff;
align-items: stretch;
}
.line-numbers {
margin: 0;
padding: 0.9rem 0.75rem;
background: var(--panel-muted);
border-right: 1px solid var(--border);
color: var(--text-muted);
text-align: right;
user-select: none;
white-space: pre;
overflow-y: auto;
overflow-x: hidden;
height: 34rem;
min-height: 34rem;
font: 500 0.95rem/1.55 var(--mono);
scrollbar-width: none;
-ms-overflow-style: none;
}
.line-numbers::-webkit-scrollbar {
display: none;
}
.editor-wrap textarea {
margin: 0;
border: 0;
border-radius: 0;
resize: none;
height: 34rem;
min-height: 34rem;
padding: 0.9rem 1rem;
overflow: auto;
white-space: pre;
font: 500 0.95rem/1.55 var(--mono);
line-height: 1.55;
outline: none;
}
.detail-sticky-header {
position: sticky;
top: 0;
z-index: 30;
background: rgba(243,245,249,0.96);
backdrop-filter: blur(8px);
padding-bottom: 0.75rem;
margin-bottom: 1rem;
}
.workspace-grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(380px, 0.9fr);
gap: 1rem;
align-items: start;
margin-bottom: 1rem;
}
.preview-card {
position: sticky;
top: 7.5rem;
}
.right-pane-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--border);
padding-bottom: 0.75rem;
}
pre.codeblock {
white-space: pre-wrap;
word-break: break-word;
font-family: var(--mono);
background: #f8fafc;
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.8rem;
max-height: 18rem;
overflow: auto;
}
.error-box {
background: var(--danger-soft);
color: var(--danger);
border: 1px solid #fecaca;
border-radius: 10px;
padding: 0.9rem 1rem;
margin-bottom: 1rem;
}
.empty-state {
color: var(--text-muted);
padding: 0.4rem 0;
}
.mobile-header,
.sidebar-overlay {
display: none !important;
}
@media (max-width: 1100px) {
.grid-2,
.form-grid,
.meta-grid,
.workspace-grid {
grid-template-columns: 1fr;
}
.preview-frame {
height: 720px;
}
.preview-card {
position: static;
}
}
.doc-header-sticky {
position: sticky;
top: 0;
z-index: 30;
background: rgba(243,245,249,0.96);
backdrop-filter: blur(8px);
padding-bottom: 0.75rem;
margin-bottom: 1rem;
}
.tabbar {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.tab-button {
appearance: none;
border: 1px solid var(--border);
background: var(--panel);
color: var(--text);
border-radius: 999px;
padding: 0.5rem 0.85rem;
cursor: pointer;
font: inherit;
}
.tab-button.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
}
.queue-nav-row {
display: flex;
gap: 0.65rem;
flex-wrap: wrap;
align-items: center;
margin-top: 0.75rem;
}
.queue-label {
color: var(--text-muted);
font-size: 0.9rem;
}
/* GLOBAL TOP BAR */
.global-topbar {
width: 100%;
min-height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
background: #06153d;
color: #f8fafc;
border-radius: 12px;
padding: 0.75rem 1rem;
margin: 0 0 1rem 0;
box-sizing: border-box;
}
.global-topbar-left {
flex: 1 1 auto;
}
.global-topbar-right {
margin-left: auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.65rem;
flex-wrap: nowrap;
}
.global-topbar-user {
display: flex;
flex-direction: column;
align-items: flex-end;
line-height: 1.1;
}
.global-topbar-name {
font-weight: 700;
font-size: 0.95rem;
color: #f8fafc;
}
.global-topbar-username {
font-size: 0.8rem;
color: #cbd5e1;
}
.global-topbar-logout {
height: 34px;
padding: 0 0.75rem;
border-radius: 10px;
white-space: nowrap;
}
@media (max-width: 700px) {
.global-topbar {
min-height: 48px;
padding: 0.6rem 0.75rem;
}
.global-topbar-right {
gap: 0.5rem;
}
.global-topbar-name {
font-size: 0.88rem;
}
.global-topbar-username {
font-size: 0.75rem;
}
.global-topbar-logout {
height: 32px;
padding: 0 0.6rem;
}
}
/* CONNECT SIDEBAR + HEADER */
.app-shell {
display: grid;
grid-template-columns: 240px 1fr;
}
.sidebar {
border-top-left-radius: 12px;
}
.global-topbar {
border-top-right-radius: 12px;
border-top-left-radius: 0;
margin: 0;
}
/* inline brand */
.brand-inline {
font-weight: 700;
font-size: 1rem;
}
/* MAKE HEADER PART OF FRAME */
.main {
display: flex;
flex-direction: column;
}
.global-topbar {
margin: 0;
border-radius: 0 12px 0 0;
}
/* remove extra top spacing from pages */
.main > *:first-child:not(.global-topbar) {
margin-top: 1rem;
}
/* APP FRAME */
.app-shell {
display: grid;
grid-template-columns: 190px 1fr;
min-height: 100vh;
}
.sidebar {
background: #06153d;
color: #f8fafc;
border-radius: 0 !important;
margin: 0 !important;
min-height: 100vh;
}
.main {
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
}
.main-content {
padding: 1rem;
}
.global-topbar {
height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
background: #06153d;
color: #f8fafc;
border-radius: 0 !important;
margin: 0 !important;
padding: 0 1rem;
box-sizing: border-box;
border-left: 1px solid rgba(255,255,255,0.08);
}
.global-topbar-left,
.global-topbar-right {
display: flex;
align-items: center;
gap: 0.6rem;
}
.global-topbar-right {
margin-left: auto;
}
.global-topbar-user {
text-align: right;
line-height: 1.1;
}
.global-topbar-name {
font-weight: 700;
font-size: 0.9rem;
color: #f8fafc;
}
.global-topbar-username {
font-size: 0.75rem;
color: #cbd5e1;
}
.global-topbar-logout {
height: 30px;
padding: 0 0.6rem;
border-radius: 8px;
}
.sidebar-top {
min-height: 52px;
display: flex;
align-items: center;
padding: 0 0.75rem;
box-sizing: border-box;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.brand {
font-weight: 700;
font-size: 0.95rem;
}
.page-header {
margin-bottom: 1rem;
}
.page-title {
margin: 0;
font-size: 1.7rem;
}
.page-subtitle {
margin: 0.25rem 0 0 0;
color: var(--text-muted);
font-size: 0.95rem;
}
:root {
--topbar-height: 72px;
}
.global-topbar {
position: fixed;
top: 0;
right: 0;
left: var(--rail-closed);
height: var(--topbar-height);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0 1.25rem;
background: var(--panel);
border-bottom: 1px solid var(--border);
z-index: 90;
transition: left 0.18s ease;
}
.app-shell.nav-open .global-topbar {
left: var(--rail-open);
}
.global-topbar-left {
display: flex;
align-items: center;
min-width: 0;
}
.global-app-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
}
.global-topbar-right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
flex-wrap: wrap;
}
.global-topbar-user {
display: flex;
flex-direction: column;
align-items: flex-end;
line-height: 1.2;
}
.global-topbar-name {
font-weight: 600;
color: var(--text);
}
.global-topbar-username {
font-size: 0.88rem;
color: var(--text-muted);
}
.global-topbar-logout {
appearance: none;
border: 1px solid var(--border);
background: var(--panel);
color: var(--text);
border-radius: 10px;
padding: 0.55rem 0.9rem;
cursor: pointer;
font: inherit;
}
.global-topbar-logout:hover {
background: #f3f4f6;
}
.main {
margin-left: var(--rail-closed);
min-height: 100vh;
padding: calc(var(--topbar-height) + 1.25rem) 1.25rem 1.25rem 1.25rem;
transition: margin-left 0.18s ease;
}
.app-shell.nav-open .main {
margin-left: var(--rail-open);
}
.main-content {
padding-top: 0;
}
.page-header {
margin-bottom: 1rem;
}
/* ==== final shell override ==== */
:root {
--topbar-height: 72px;
}
.sidebar {
position: fixed !important;
inset: 0 auto 0 0 !important;
width: var(--rail-closed) !important;
z-index: 100 !important;
}
.app-shell.nav-open .sidebar {
width: var(--rail-open) !important;
}
.global-topbar {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: var(--rail-closed) !important;
height: var(--topbar-height) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 1rem !important;
padding: 0 1.25rem !important;
background: var(--panel) !important;
border-bottom: 1px solid var(--border) !important;
z-index: 90 !important;
transition: left 0.18s ease !important;
}
.app-shell.nav-open .global-topbar {
left: var(--rail-open) !important;
}
.main {
margin-left: var(--rail-closed) !important;
min-height: 100vh !important;
padding: calc(var(--topbar-height) + 1.25rem) 1.25rem 1.25rem 1.25rem !important;
transition: margin-left 0.18s ease !important;
}
.app-shell.nav-open .main {
margin-left: var(--rail-open) !important;
}
.main-content {
padding-top: 0 !important;
}
.page-header {
display: block !important;
margin-bottom: 1rem !important;
}
.global-topbar-left {
display: flex !important;
align-items: center !important;
min-width: 0 !important;
}
.global-app-title {
font-size: 1.05rem !important;
font-weight: 700 !important;
color: var(--text) !important;
white-space: nowrap !important;
}
.global-topbar-right {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 0.75rem !important;
flex-wrap: wrap !important;
}
.global-topbar-user {
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
line-height: 1.2 !important;
}
.global-topbar-name {
font-weight: 600 !important;
}
.global-topbar-username {
font-size: 0.88rem !important;
color: var(--text-muted) !important;
}
.global-topbar-logout {
border: 1px solid var(--border) !important;
background: var(--panel) !important;
color: var(--text) !important;
border-radius: 10px !important;
padding: 0.55rem 0.9rem !important;
}
.global-topbar-logout:hover {
background: #f3f4f6 !important;
}
/* ==== end final shell override ==== */
/* ===== shell final enforced layout ===== */
body {
background: var(--bg);
}
.app-shell {
min-height: 100vh;
}
.sidebar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
width: var(--rail-closed) !important;
z-index: 1000 !important;
}
.app-shell.nav-open .sidebar {
width: var(--rail-open) !important;
}
.global-topbar {
position: fixed !important;
top: 0 !important;
left: var(--rail-closed) !important;
right: 0 !important;
height: 72px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 1.25rem !important;
background: var(--panel) !important;
border-bottom: 1px solid var(--border) !important;
z-index: 900 !important;
}
.app-shell.nav-open .global-topbar {
left: var(--rail-open) !important;
}
.main {
margin-left: var(--rail-closed) !important;
min-height: 100vh !important;
padding: 96px 1.25rem 1.25rem 1.25rem !important;
background: var(--bg) !important;
}
.app-shell.nav-open .main {
margin-left: var(--rail-open) !important;
}
.main-content {
padding-top: 0 !important;
}
.page-header {
margin-bottom: 1rem !important;
}
.page-title {
margin: 0 !important;
font-size: 1.7rem !important;
}
.page-subtitle {
margin: 0.25rem 0 0 0 !important;
color: var(--text-muted) !important;
font-size: 0.95rem !important;
}
/* ===== end shell final enforced layout ===== */
/* ===== clean final shell layout ===== */
:root {
--topbar-height: 72px;
}
body {
background: var(--bg);
}
.app-shell {
min-height: 100vh;
}
/* left rail */
.sidebar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
width: var(--rail-closed) !important;
background: #08142f !important;
color: #e5e7eb !important;
z-index: 1000 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
padding: 0.75rem 0.45rem 1rem 0.45rem !important;
}
.app-shell.nav-open .sidebar {
width: var(--rail-open) !important;
}
/* top bar */
.global-topbar {
position: fixed !important;
top: 0 !important;
left: var(--rail-closed) !important;
right: 0 !important;
min-height: var(--topbar-height) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 1rem !important;
padding: 0.75rem 1rem !important;
background: #ffffff !important;
border-bottom: 1px solid var(--border) !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
z-index: 900 !important;
}
.app-shell.nav-open .global-topbar {
left: var(--rail-open) !important;
}
/* content region */
.main {
margin-left: var(--rail-closed) !important;
min-height: 100vh !important;
padding: calc(var(--topbar-height) + 1.25rem) 1rem 1rem 1rem !important;
background: var(--bg) !important;
}
.app-shell.nav-open .main {
margin-left: var(--rail-open) !important;
}
.main-content {
padding-top: 0 !important;
}
/* top bar content */
.global-topbar-left {
display: flex !important;
align-items: center !important;
min-width: 0 !important;
}
.global-app-title {
font-size: 1rem !important;
font-weight: 700 !important;
color: var(--text) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.global-topbar-right {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 0.6rem !important;
flex-wrap: nowrap !important;
min-width: 0 !important;
}
.global-topbar-user {
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
line-height: 1.15 !important;
}
.global-topbar-name {
font-weight: 600 !important;
color: var(--text) !important;
font-size: 0.95rem !important;
}
.global-topbar-username {
color: var(--text-muted) !important;
font-size: 0.8rem !important;
}
.global-topbar-logout {
appearance: none !important;
border: 1px solid var(--border) !important;
background: var(--panel) !important;
color: var(--text) !important;
border-radius: 10px !important;
padding: 0.5rem 0.85rem !important;
cursor: pointer !important;
font: inherit !important;
}
.global-topbar-logout:hover {
background: #f3f4f6 !important;
}
/* page header under global top bar */
.page-header {
margin-bottom: 1rem !important;
}
.page-title {
margin: 0 !important;
font-size: 1.7rem !important;
line-height: 1.1 !important;
}
.page-subtitle {
margin: 0.3rem 0 0 0 !important;
color: var(--text-muted) !important;
font-size: 0.95rem !important;
line-height: 1.35 !important;
}
/* sidebar label behavior */
.brand,
.sidebar-section-title,
.nav-link-text {
display: none !important;
}
.app-shell.nav-open .brand,
.app-shell.nav-open .sidebar-section-title,
.app-shell.nav-open .nav-link-text {
display: initial !important;
}
.app-shell:not(.nav-open) .nav-link {
justify-content: center !important;
}
/* mobile */
@media (max-width: 700px) {
.global-topbar {
padding: 0.65rem 0.75rem !important;
}
.global-app-title {
font-size: 0.92rem !important;
max-width: 120px !important;
}
.global-topbar-user {
display: none !important;
}
.badge.reviewed {
display: none !important;
}
.global-topbar-logout {
padding: 0.42rem 0.7rem !important;
font-size: 0.88rem !important;
}
.main {
padding: calc(var(--topbar-height) + 1rem) 0.75rem 0.75rem 0.75rem !important;
}
.page-title {
font-size: 1.25rem !important;
}
.page-subtitle {
font-size: 0.88rem !important;
}
}
/* ===== end clean final shell layout ===== */
/* ===== width + blue topbar fix ===== */
.global-topbar {
background: #0b3b91 !important;
color: #ffffff !important;
border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}
.global-app-title,
.global-topbar-name,
.global-topbar-username {
color: #ffffff !important;
}
.global-topbar-logout {
background: rgba(255,255,255,0.12) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,0.18) !important;
}
.global-topbar-logout:hover {
background: rgba(255,255,255,0.18) !important;
}
/* force the main region to use full width */
.main,
.main-content,
.page-header,
.card,
.table-wrap,
.right-pane-tabs,
.tab-panel,
form,
.form-grid,
.form-field,
input,
textarea,
select {
max-width: none !important;
}
.main {
width: auto !important;
}
.main-content {
width: 100% !important;
}
.card,
.tab-panel,
.table-wrap,
form {
width: 100% !important;
}
.tab-panel {
display: block !important;
}
/* prevent tiny wrapped buttons/labels */
.button-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.65rem !important;
}
.button-link,
button,
.tab-button {
white-space: nowrap !important;
}
/* forms should fill horizontally */
.form-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
gap: 1rem !important;
width: 100% !important;
}
.form-field.full {
grid-column: 1 / -1 !important;
}
input,
textarea,
select {
width: 100% !important;
}
/* tables should occupy full width */
table {
width: 100% !important;
}
/* document page tabs/buttons */
.right-pane-tabs {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.65rem !important;
margin-bottom: 1rem !important;
}
/* ===== end width + blue topbar fix ===== */
/* ===== top bar color sync ===== */
.global-topbar {
background: #08142f !important;
color: #ffffff !important;
border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}
.global-topbar-name,
.global-topbar-username {
color: #ffffff !important;
}
.global-topbar-logout {
background: rgba(255,255,255,0.10) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,0.16) !important;
}
.global-topbar-logout:hover {
background: rgba(255,255,255,0.16) !important;
}
.global-topbar-left {
flex: 1 1 auto !important;
}
.global-topbar-right {
flex: 0 0 auto !important;
}
/* ===== end top bar color sync ===== */
/* ===== documents/page width fix ===== */
/* top bar: same color as side pane, no title text needed there */
.global-topbar {
background: #08142f !important;
color: #fff !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.global-topbar-left {
display: none !important;
}
.global-topbar-name,
.global-topbar-username {
color: #fff !important;
}
.global-topbar-logout {
background: rgba(255,255,255,0.10) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,0.14) !important;
}
/* restore sidebar branding */
.sidebar .brand {
display: block !important;
}
/* main region must consume available width */
.main {
margin-left: var(--rail-closed) !important;
width: calc(100vw - var(--rail-closed)) !important;
max-width: none !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.app-shell.nav-open .main {
margin-left: var(--rail-open) !important;
width: calc(100vw - var(--rail-open)) !important;
}
.main-content {
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
/* all normal content containers should stretch */
.page-header,
.card,
.table-wrap,
form,
.form-grid,
.form-field,
.button-row,
.right-pane-tabs,
.tab-panel {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* cards should stack normally */
.card {
display: block !important;
}
/* tab strip */
.right-pane-tabs {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.65rem !important;
margin-bottom: 1rem !important;
}
/* IMPORTANT: only active tab panel should show */
.tab-panel {
display: none !important;
}
.tab-panel.active {
display: block !important;
}
/* forms */
.form-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
gap: 1rem !important;
}
.form-field.full {
grid-column: 1 / -1 !important;
}
input,
textarea,
select {
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* buttons should not collapse into vertical word wrapping */
.button-link,
button,
.tab-button {
white-space: nowrap !important;
}
/* text should wrap normally, not per-character */
.page-title,
.page-subtitle,
.card-title,
label,
p,
td,
th,
a,
span,
div {
word-break: normal !important;
overflow-wrap: break-word !important;
}
/* tables */
table {
width: 100% !important;
}
/* mobile */
@media (max-width: 700px) {
.main {
width: calc(100vw - var(--rail-closed)) !important;
padding: 96px 0.75rem 0.75rem 0.75rem !important;
}
.app-shell.nav-open .main {
width: calc(100vw - var(--rail-open)) !important;
}
}
/* ===== end documents/page width fix ===== */
/* ===== topbar locked-right behavior ===== */
.global-topbar {
left: 0 !important;
right: 0 !important;
padding-left: 56px !important; /* leave room for collapsed rail + toggle */
justify-content: flex-end !important;
}
.app-shell.nav-open .global-topbar {
left: 0 !important;
right: 0 !important;
}
.global-topbar-left {
display: none !important;
}
.global-topbar-right {
margin-left: auto !important;
padding-right: 0.25rem !important;
justify-content: flex-end !important;
max-width: calc(100vw - 70px) !important;
overflow: hidden !important;
}
.global-topbar-user {
min-width: 0 !important;
}
.global-topbar-name,
.global-topbar-username {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* sidebar should sit above the top bar when opened */
.sidebar {
z-index: 1000 !important;
}
.global-topbar {
z-index: 900 !important;
}
/* keep main sizing tied to rail, not top bar */
.main {
width: calc(100vw - var(--rail-closed)) !important;
}
.app-shell.nav-open .main {
width: calc(100vw - var(--rail-open)) !important;
}
/* mobile trim */
@media (max-width: 700px) {
.global-topbar {
padding-left: 52px !important;
padding-right: 0.4rem !important;
}
.global-topbar-right {
max-width: calc(100vw - 60px) !important;
gap: 0.4rem !important;
}
.global-topbar-name {
font-size: 0.9rem !important;
}
.global-topbar-username {
font-size: 0.75rem !important;
}
}
/* ===== end topbar locked-right behavior ===== */
/* ===== topbar username visibility fix ===== */
.global-topbar {
left: 0 !important;
right: 0 !important;
padding-left: 0.5rem !important;
padding-right: 0.75rem !important;
justify-content: flex-end !important;
}
.global-topbar-right {
margin-left: auto !important;
max-width: calc(100vw - 3.5rem) !important;
overflow: visible !important;
}
.global-topbar-user {
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
white-space: nowrap !important;
}
.global-topbar-name,
.global-topbar-username {
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
}
@media (max-width: 700px) {
.global-topbar-username {
display: none !important;
}
}
/* ===== end topbar username visibility fix ===== */
/* ===== document detail page tweaks ===== */
.detail-sticky-header .topbar {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
flex-wrap: nowrap !important;
gap: 0.75rem !important;
width: 100% !important;
}
.detail-sticky-header .topbar > div:first-child {
min-width: 0 !important;
flex: 1 1 auto !important;
}
.detail-sticky-header .topbar .badges {
margin-left: auto !important;
justify-content: flex-end !important;
align-items: center !important;
flex: 0 0 auto !important;
width: auto !important;
max-width: 55% !important;
}
.detail-sticky-header .topbar .badge {
white-space: nowrap !important;
}
.detail-doc-actions-row {
display: flex !important;
align-items: flex-end !important;
gap: 0.75rem !important;
flex-wrap: nowrap !important;
width: 100% !important;
}
.detail-sticky-header form {
width: auto !important;
max-width: none !important;
}
.detail-doc-type-form {
display: flex !important;
align-items: flex-end !important;
gap: 0.6rem !important;
flex-wrap: nowrap !important;
margin: 0 !important;
width: auto !important;
flex: 0 0 auto !important;
}
.detail-review-flags-form {
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
flex-wrap: nowrap !important;
margin: 0 !important;
width: auto !important;
flex: 0 0 auto !important;
}
.detail-check-label {
display: inline-flex !important;
align-items: center !important;
gap: 0.35rem !important;
white-space: nowrap !important;
}
.detail-trash-form {
width: auto !important;
margin: 0 !important;
}
@media (max-width: 900px) {
.detail-sticky-header .topbar {
flex-wrap: wrap !important;
}
.detail-sticky-header .topbar .badges {
margin-left: 0 !important;
justify-content: flex-start !important;
max-width: none !important;
}
.detail-doc-actions-row {
flex-wrap: wrap !important;
}
.detail-doc-type-form,
.detail-review-flags-form {
flex-wrap: wrap !important;
}
}
/* ===== end document detail page tweaks ===== */
/* ===== detail page progress restore ===== */
.detail-sticky-header .topbar {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
flex-wrap: nowrap !important;
gap: 0.75rem !important;
width: 100% !important;
}
.detail-sticky-header .topbar > div:first-child {
min-width: 0 !important;
flex: 1 1 auto !important;
}
.detail-sticky-header .topbar .badges {
margin-left: auto !important;
justify-content: flex-end !important;
align-items: center !important;
flex: 0 0 auto !important;
width: auto !important;
max-width: 55% !important;
}
.detail-sticky-header .topbar .badge {
white-space: nowrap !important;
}
.detail-doc-actions-row {
display: flex !important;
align-items: flex-end !important;
gap: 0.75rem !important;
flex-wrap: nowrap !important;
width: 100% !important;
}
.detail-sticky-header form {
width: auto !important;
max-width: none !important;
}
.detail-doc-type-form {
display: flex !important;
align-items: flex-end !important;
gap: 0.6rem !important;
flex-wrap: nowrap !important;
margin: 0 !important;
width: auto !important;
flex: 0 0 auto !important;
}
.detail-review-flags-form {
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
flex-wrap: nowrap !important;
margin: 0 !important;
width: auto !important;
flex: 0 0 auto !important;
}
.detail-check-label {
display: inline-flex !important;
align-items: center !important;
gap: 0.35rem !important;
white-space: nowrap !important;
}
.detail-trash-form {
width: auto !important;
margin: 0 !important;
}
@media (max-width: 900px) {
.detail-sticky-header .topbar {
flex-wrap: wrap !important;
}
.detail-sticky-header .topbar .badges {
margin-left: 0 !important;
justify-content: flex-start !important;
max-width: none !important;
}
.detail-doc-actions-row {
flex-wrap: wrap !important;
}
.detail-doc-type-form,
.detail-review-flags-form {
flex-wrap: wrap !important;
}
}
/* ===== end detail page progress restore ===== */
/* ===== detail controls restore ===== */
.detail-doc-actions-row {
display: flex;
align-items: flex-end;
gap: 0.75rem;
flex-wrap: wrap;
width: 100%;
}
.detail-doc-type-form {
display: flex;
align-items: flex-end;
gap: 0.6rem;
flex-wrap: wrap;
margin: 0;
}
.detail-review-flags-form {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
margin: 0;
}
.detail-check-label {
display: inline-flex;
align-items: center;
gap: 0.35rem;
white-space: nowrap;
}
.detail-trash-form {
margin: 0;
width: auto;
}
@media (min-width: 901px) {
.detail-doc-actions-row {
flex-wrap: nowrap;
}
.detail-doc-type-form,
.detail-review-flags-form {
flex-wrap: nowrap;
}
.detail-trash-form {
align-self: flex-start;
}
}
/* ===== end detail controls restore ===== */
/* ===== document detail top-card restore ===== */
.detail-sticky-header .topbar {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
flex-wrap: nowrap !important;
gap: 0.75rem !important;
width: 100% !important;
}
.detail-sticky-header .topbar > div:first-child {
flex: 1 1 auto !important;
min-width: 0 !important;
}
.detail-sticky-header .topbar .badges {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 0.5rem !important;
margin-left: auto !important;
width: auto !important;
}
.detail-sticky-header .topbar .badge {
white-space: nowrap !important;
}
.detail-doc-actions-row {
display: flex !important;
flex-wrap: nowrap !important;
align-items: flex-end !important;
gap: 0.75rem !important;
width: 100% !important;
}
.detail-doc-type-form {
display: flex !important;
flex-wrap: nowrap !important;
align-items: flex-end !important;
gap: 0.6rem !important;
margin: 0 !important;
width: auto !important;
flex: 0 0 auto !important;
}
.detail-review-flags-form {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 0.75rem !important;
margin: 0 !important;
width: auto !important;
flex: 0 0 auto !important;
}
.detail-check-label {
display: inline-flex !important;
align-items: center !important;
gap: 0.35rem !important;
white-space: nowrap !important;
}
.detail-trash-form {
margin: 0 !important;
width: auto !important;
align-self: flex-start !important;
}
@media (max-width: 900px) {
.detail-sticky-header .topbar {
flex-wrap: wrap !important;
}
.detail-sticky-header .topbar .badges {
justify-content: flex-start !important;
margin-left: 0 !important;
}
.detail-doc-actions-row,
.detail-doc-type-form,
.detail-review-flags-form {
flex-wrap: wrap !important;
}
}
/* ===== end document detail top-card restore ===== */
/* ===== detail page reconstructed restore ===== */
.detail-sticky-header .topbar {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
flex-wrap: nowrap !important;
gap: 0.75rem !important;
width: 100% !important;
}
.detail-sticky-header .topbar > div:first-child {
min-width: 0 !important;
flex: 1 1 auto !important;
}
.detail-sticky-header .topbar .badges {
margin-left: auto !important;
justify-content: flex-end !important;
align-items: center !important;
flex: 0 0 auto !important;
width: auto !important;
max-width: 55% !important;
}
.detail-sticky-header .topbar .badge {
white-space: nowrap !important;
}
.detail-doc-actions-row {
display: flex !important;
align-items: flex-end !important;
gap: 0.75rem !important;
flex-wrap: nowrap !important;
width: 100% !important;
}
.detail-sticky-header form {
width: auto !important;
max-width: none !important;
}
.detail-doc-type-form {
display: flex !important;
align-items: flex-end !important;
gap: 0.6rem !important;
flex-wrap: nowrap !important;
margin: 0 !important;
width: auto !important;
flex: 0 0 auto !important;
}
.detail-review-flags-form {
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
flex-wrap: nowrap !important;
margin: 0 !important;
width: auto !important;
flex: 0 0 auto !important;
}
.detail-check-label {
display: inline-flex !important;
align-items: center !important;
gap: 0.35rem !important;
white-space: nowrap !important;
}
.detail-trash-form {
width: auto !important;
margin: 0 !important;
align-self: flex-start !important;
}
@media (max-width: 900px) {
.detail-sticky-header .topbar {
flex-wrap: wrap !important;
}
.detail-sticky-header .topbar .badges {
margin-left: 0 !important;
justify-content: flex-start !important;
max-width: none !important;
}
.detail-doc-actions-row,
.detail-doc-type-form,
.detail-review-flags-form {
flex-wrap: wrap !important;
}
}
/* ===== end detail page reconstructed restore ===== */
/* ===== detail page mobile split restore ===== */
.workspace-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 1rem !important;
align-items: start !important;
}
.workspace-grid > section {
min-width: 0 !important;
}
.preview-card {
position: static !important;
}
.preview-frame {
width: 100% !important;
min-height: 720px !important;
height: 72vh !important;
}
.detail-review-flags-form {
display: inline-flex !important;
align-items: center !important;
gap: 0.75rem !important;
flex-wrap: nowrap !important;
}
.detail-check-label {
display: inline-flex !important;
align-items: center !important;
gap: 0.35rem !important;
white-space: nowrap !important;
}
.detail-check-label input[type="checkbox"] {
margin: 0 !important;
width: auto !important;
height: auto !important;
flex: 0 0 auto !important;
}
.tab-panel label[style*="display:block"] {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 1rem !important;
}
.tab-panel label[style*="display:block"] input[type="checkbox"] {
width: auto !important;
margin: 0 !important;
flex: 0 0 auto !important;
}
@media (max-width: 900px) {
.workspace-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}
.preview-frame {
min-height: 620px !important;
height: 62vh !important;
}
}
/* ===== end detail page mobile split restore ===== */
/* ===== detail mobile controlled zoom / pan ===== */
@media (max-width: 900px) {
/* keep general UI close to previous size */
.main-content {
font-size: 1rem !important;
}
/* document detail should behave more like a desktop canvas on mobile */
.detail-sticky-header,
.workspace-grid {
min-width: 1100px !important;
}
/* do not collapse the detail workspace into a single column */
.workspace-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr) !important;
gap: 1rem !important;
}
/* allow horizontal panning inside the page instead of browser zoom gymnastics */
.main,
.main-content {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
/* keep top controls readable but not oversized */
.detail-sticky-header .topbar {
flex-wrap: nowrap !important;
}
.detail-sticky-header .topbar .badges {
width: auto !important;
max-width: 50% !important;
margin-left: auto !important;
justify-content: flex-end !important;
}
.detail-doc-actions-row {
display: flex !important;
flex-direction: row !important;
align-items: flex-end !important;
gap: 0.6rem !important;
flex-wrap: wrap !important;
}
.detail-doc-type-form,
.detail-review-flags-form,
.detail-trash-form {
width: auto !important;
}
.detail-doc-type-form button,
.detail-review-flags-form button,
.detail-trash-form button {
width: auto !important;
}
.queue-nav-row .button-link {
flex: 0 0 auto !important;
}
/* OCR/editor should stay comfortable to edit */
.editor-wrap textarea,
.line-numbers {
font-size: 0.96rem !important;
line-height: 1.52 !important;
}
}
/* ===== end detail mobile controlled zoom / pan ===== */
/* ===== mobile detail view modes ===== */
.detail-view-mode-bar {
display: none;
}
@media (max-width: 900px) {
.detail-view-mode-bar {
display: flex;
gap: 0.5rem;
margin: 0 0 0.85rem 0;
position: sticky;
top: 3.8rem;
z-index: 35;
background: rgba(243,245,249,0.96);
padding: 0.35rem 0;
}
.detail-view-mode-button {
appearance: none;
border: 1px solid var(--border);
background: var(--panel);
color: var(--text);
border-radius: 999px;
padding: 0.5rem 0.85rem;
font: inherit;
cursor: pointer;
}
.detail-view-mode-button.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
body.detail-mode-preview .workspace-grid,
body.detail-mode-review .workspace-grid {
min-width: 0 !important;
grid-template-columns: 1fr !important;
}
body.detail-mode-preview .workspace-grid > section:last-child {
display: none !important;
}
body.detail-mode-review .workspace-grid > section:first-child {
display: none !important;
}
body.detail-mode-preview .detail-sticky-header,
body.detail-mode-review .detail-sticky-header {
min-width: 0 !important;
}
body.detail-mode-preview .preview-frame,
body.detail-mode-review .preview-frame,
body.detail-mode-preview .preview-image,
body.detail-mode-review .preview-image {
height: 72vh !important;
}
}
/* ===== end mobile detail view modes ===== */
/* ===== mobile main button tighten ===== */
@media (max-width: 900px) {
.main-content button,
.main-content .button-link,
.main-content .tab-button {
font-size: 0.82rem !important;
padding: 0.42rem 0.72rem !important;
border-radius: 9px !important;
}
.main-content .detail-view-mode-button {
font-size: 0.84rem !important;
padding: 0.42rem 0.85rem !important;
border-radius: 999px !important;
}
.main-content .queue-nav-row .button-link,
.main-content .detail-trash-form button,
.main-content .detail-review-flags-form button,
.main-content .detail-doc-type-form button,
.main-content #toggle-path-edit,
.main-content .btn,
.main-content .button-row button {
font-size: 0.8rem !important;
padding: 0.4rem 0.68rem !important;
}
.main-content input,
.main-content select,
.main-content textarea {
font-size: 16px !important;
}
}
/* ===== end mobile main button tighten ===== */
/* ===== mobile detail compact polish ===== */
@media (max-width: 900px) {
.main-content {
font-size: 1rem !important;
}
.page-title {
font-size: 1.1rem !important;
line-height: 1.08 !important;
margin-bottom: 0.15rem !important;
}
.page-subtitle {
font-size: 0.78rem !important;
line-height: 1.2 !important;
margin-top: 0 !important;
}
.detail-sticky-header {
padding-bottom: 0.35rem !important;
margin-bottom: 0.55rem !important;
}
.detail-sticky-header .topbar {
gap: 0.45rem !important;
margin-bottom: 0.4rem !important;
}
.detail-sticky-header .topbar .badges {
gap: 0.3rem !important;
}
.detail-sticky-header .topbar .badge {
font-size: 0.68rem !important;
padding: 0.18rem 0.45rem !important;
}
.card {
padding: 0.7rem !important;
margin-bottom: 0.7rem !important;
border-radius: 16px !important;
}
.card-title {
font-size: 0.95rem !important;
margin-bottom: 0.5rem !important;
}
.detail-doc-actions-row {
gap: 0.45rem !important;
}
.detail-doc-type-form,
.detail-review-flags-form,
.detail-trash-form {
gap: 0.45rem !important;
}
.detail-check-label {
gap: 0.22rem !important;
font-size: 0.8rem !important;
}
.main-content label {
font-size: 0.8rem !important;
margin-bottom: 0.15rem !important;
}
.main-content input[type="text"],
.main-content input[type="date"],
.main-content select,
.main-content textarea {
padding: 0.52rem 0.68rem !important;
border-radius: 12px !important;
font-size: 16px !important;
}
.main-content button,
.main-content .button-link,
.main-content .tab-button,
.main-content .detail-view-mode-button {
font-size: 0.76rem !important;
padding: 0.38rem 0.62rem !important;
border-radius: 10px !important;
}
.detail-view-mode-bar {
gap: 0.35rem !important;
margin: 0 0 0.55rem 0 !important;
top: 3.3rem !important;
}
.detail-view-mode-button {
min-width: 0 !important;
border-radius: 999px !important;
padding: 0.42rem 0.75rem !important;
font-size: 0.78rem !important;
}
.right-pane-tabs {
gap: 0.35rem !important;
margin-bottom: 0.55rem !important;
padding-bottom: 0.45rem !important;
}
.right-pane-tabs .tab-button {
border-radius: 999px !important;
padding: 0.38rem 0.7rem !important;
font-size: 0.74rem !important;
}
.queue-nav-row {
gap: 0.4rem !important;
margin-top: 0.45rem !important;
}
.queue-nav-row .button-link {
padding: 0.38rem 0.6rem !important;
}
.preview-card {
margin-top: 0.1rem !important;
}
.preview-frame,
.preview-image {
height: 58vh !important;
min-height: 420px !important;
}
.editor-wrap textarea,
.line-numbers {
font-size: 0.88rem !important;
line-height: 1.42 !important;
}
.button-row {
gap: 0.45rem !important;
}
p {
margin: 0.45rem 0 !important;
}
}
/* ===== end mobile detail compact polish ===== */
/* ===== mobile detail refine 2 ===== */
@media (max-width: 900px) {
.detail-sticky-header {
margin-bottom: 0.4rem !important;
padding-bottom: 0.2rem !important;
}
.detail-sticky-header .topbar {
align-items: flex-start !important;
gap: 0.3rem !important;
}
.detail-sticky-header .topbar > div:first-child {
flex: 1 1 auto !important;
min-width: 0 !important;
}
.page-title {
font-size: 1rem !important;
line-height: 1.05 !important;
margin: 0 !important;
}
.page-subtitle {
font-size: 0.74rem !important;
line-height: 1.15 !important;
margin: 0.08rem 0 0 0 !important;
}
.detail-sticky-header .topbar .badges {
gap: 0.22rem !important;
flex-wrap: wrap !important;
justify-content: flex-end !important;
max-width: 48% !important;
}
.detail-sticky-header .topbar .badge {
font-size: 0.64rem !important;
padding: 0.16rem 0.4rem !important;
}
.detail-sticky-header > .card > div {
gap: 0.5rem !important;
}
.detail-doc-actions-row {
display: grid !important;
grid-template-columns: 1fr auto !important;
column-gap: 0.45rem !important;
row-gap: 0.45rem !important;
align-items: end !important;
}
.detail-doc-type-form {
display: grid !important;
grid-template-columns: 1fr auto !important;
gap: 0.45rem !important;
align-items: end !important;
width: 100% !important;
}
.detail-doc-type-form > div:first-child {
min-width: 0 !important;
}
.detail-review-flags-form {
grid-column: 1 / -1 !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 0.4rem !important;
align-items: center !important;
width: 100% !important;
}
.detail-trash-form {
grid-column: 1 / -1 !important;
width: auto !important;
}
.detail-trash-form button {
width: auto !important;
}
.main-content input[type="text"],
.main-content input[type="date"],
.main-content select,
.main-content textarea {
padding: 0.46rem 0.62rem !important;
}
.main-content button,
.main-content .button-link,
.main-content .tab-button,
.main-content .detail-view-mode-button {
font-size: 0.73rem !important;
padding: 0.34rem 0.58rem !important;
}
.detail-view-mode-bar {
margin: 0 0 0.42rem 0 !important;
}
.detail-view-mode-button {
font-size: 0.74rem !important;
padding: 0.36rem 0.64rem !important;
}
.right-pane-tabs {
gap: 0.28rem !important;
margin-bottom: 0.45rem !important;
padding-bottom: 0.38rem !important;
}
.right-pane-tabs .tab-button {
font-size: 0.71rem !important;
padding: 0.34rem 0.58rem !important;
}
.queue-nav-row {
gap: 0.34rem !important;
}
.queue-nav-row .button-link {
padding: 0.34rem 0.56rem !important;
}
}
/* ===== end mobile detail refine 2 ===== */
/* ===== mobile title spacing tweak ===== */
@media (max-width: 900px) {
.detail-sticky-header .topbar > div:first-child {
padding-right: 0.5rem !important;
}
.page-title {
margin-bottom: 0.22rem !important;
}
.page-subtitle {
margin-top: 0.08rem !important;
margin-bottom: 0.18rem !important;
}
}
/* ===== end mobile title spacing tweak ===== */
/* ===== mobile document header gap fix ===== */
@media (max-width: 900px) {
.detail-sticky-header .topbar {
margin-bottom: 0.7rem !important;
}
.detail-sticky-header .topbar > div:first-child {
padding-bottom: 0.35rem !important;
}
.page-title {
margin: 0 0 0.28rem 0 !important;
}
.page-subtitle {
margin: 0 !important;
line-height: 1.2 !important;
}
}
/* ===== end mobile document header gap fix ===== */
/* ===== mobile subtitle to card gap ===== */
@media (max-width: 900px) {
.detail-sticky-header .topbar {
margin-bottom: 0.15rem !important;
}
.detail-sticky-header > .card {
margin-top: 0.85rem !important;
}
.page-title {
margin: 0 0 0.16rem 0 !important;
}
.page-subtitle {
margin: 0 !important;
line-height: 1.18 !important;
}
}
/* ===== end mobile subtitle to card gap ===== */
/* ===== inspired mobile polish ===== */
@media (max-width: 900px) {
/* Jira-like: compact context header */
.detail-sticky-header {
background: rgba(243,245,249,0.98) !important;
padding-bottom: 0.18rem !important;
margin-bottom: 0.38rem !important;
}
.detail-sticky-header .topbar {
align-items: flex-start !important;
gap: 0.35rem !important;
margin-bottom: 0.28rem !important;
}
.detail-sticky-header .topbar > div:first-child {
min-width: 0 !important;
flex: 1 1 auto !important;
padding-right: 0.45rem !important;
}
.page-title {
font-size: 1.02rem !important;
line-height: 1.08 !important;
margin: 0 0 0.14rem 0 !important;
font-weight: 700 !important;
}
.page-subtitle {
font-size: 0.74rem !important;
line-height: 1.18 !important;
color: var(--text-muted) !important;
margin: 0 !important;
}
.detail-sticky-header .topbar .badges {
max-width: 46% !important;
gap: 0.22rem !important;
justify-content: flex-end !important;
align-items: flex-start !important;
}
.detail-sticky-header .topbar .badge {
font-size: 0.63rem !important;
padding: 0.15rem 0.38rem !important;
border-radius: 999px !important;
}
/* Asana-like: tighter top action card */
.detail-sticky-header > .card {
margin-top: 0.55rem !important;
padding: 0.62rem !important;
}
.detail-sticky-header > .card > div {
gap: 0.42rem !important;
}
.detail-doc-actions-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-end !important;
gap: 0.38rem !important;
}
.detail-doc-type-form,
.detail-review-flags-form,
.detail-trash-form {
gap: 0.35rem !important;
}
.detail-check-label {
gap: 0.2rem !important;
font-size: 0.77rem !important;
}
/* Airtable-like: cleaner mode switch pills */
.detail-view-mode-bar {
gap: 0.32rem !important;
margin: 0 0 0.5rem 0 !important;
top: 3.05rem !important;
padding: 0.2rem 0 !important;
}
.detail-view-mode-button {
font-size: 0.72rem !important;
padding: 0.34rem 0.62rem !important;
border-radius: 999px !important;
border-width: 1px !important;
}
/* Cleaner section tabs */
.right-pane-tabs {
gap: 0.26rem !important;
margin-bottom: 0.42rem !important;
padding-bottom: 0.34rem !important;
}
.right-pane-tabs .tab-button {
font-size: 0.7rem !important;
padding: 0.32rem 0.56rem !important;
border-radius: 999px !important;
}
/* Smaller mobile controls */
.main-content button,
.main-content .button-link {
font-size: 0.74rem !important;
padding: 0.34rem 0.56rem !important;
border-radius: 10px !important;
}
.main-content input[type="text"],
.main-content input[type="date"],
.main-content select,
.main-content textarea {
padding: 0.44rem 0.58rem !important;
border-radius: 11px !important;
font-size: 16px !important;
}
.queue-nav-row {
gap: 0.3rem !important;
margin-top: 0.35rem !important;
}
.queue-nav-row .button-link {
padding: 0.32rem 0.52rem !important;
}
}
/* ===== end inspired mobile polish ===== */
/* ===== mobile micro polish ===== */
@media (max-width: 900px) {
.page-subtitle {
max-width: 92% !important;
word-break: break-word !important;
}
#proposed_storage_path_input {
font-size: 0.88rem !important;
line-height: 1.2 !important;
}
.detail-sticky-header > .card {
margin-bottom: 0.45rem !important;
}
.detail-view-mode-bar {
margin-top: 0.15rem !important;
}
}
/* ===== end mobile micro polish ===== */
/* ===== mobile button normalize ===== */
@media (max-width: 900px) {
.main-content button,
.main-content .button-link,
.main-content .tab-button,
.main-content .detail-view-mode-button,
.main-content #toggle-path-edit,
.main-content .btn,
.main-content .global-topbar-logout {
font-size: 0.72rem !important;
line-height: 1.1 !important;
padding: 0.34rem 0.62rem !important;
border-radius: 999px !important;
min-height: 2.2rem !important;
}
.main-content .tab-button.active,
.main-content .detail-view-mode-button.active {
border-radius: 999px !important;
}
.detail-doc-type-form button,
.detail-review-flags-form button,
.detail-trash-form button,
.queue-nav-row .button-link,
.button-row button {
font-size: 0.72rem !important;
padding: 0.34rem 0.62rem !important;
min-height: 2.2rem !important;
border-radius: 999px !important;
}
.right-pane-tabs .tab-button,
.detail-view-mode-button {
min-height: 2.1rem !important;
padding: 0.34rem 0.62rem !important;
font-size: 0.72rem !important;
}
.detail-sticky-header .topbar .badge {
font-size: 0.61rem !important;
padding: 0.16rem 0.38rem !important;
border-radius: 999px !important;
}
.main-content label {
font-size: 0.78rem !important;
}
#proposed_storage_path_input {
font-size: 0.82rem !important;
}
}
/* ===== end mobile button normalize ===== */
/* ===== mobile button pass 2 ===== */
@media (max-width: 900px) {
.main-content button,
.main-content .button-link,
.main-content .tab-button,
.main-content .detail-view-mode-button,
.main-content #toggle-path-edit,
.main-content .btn {
font-size: 0.68rem !important;
line-height: 1 !important;
padding: 0.18rem 0.42rem !important;
min-height: 1.95rem !important;
border-radius: 999px !important;
}
.right-pane-tabs .tab-button,
.detail-view-mode-button,
.button-row button,
.queue-nav-row .button-link,
.detail-doc-type-form button,
.detail-review-flags-form button,
.detail-trash-form button {
font-size: 0.68rem !important;
line-height: 1 !important;
padding: 0.18rem 0.42rem !important;
min-height: 1.95rem !important;
border-radius: 999px !important;
}
.detail-sticky-header .topbar .badge {
font-size: 0.58rem !important;
line-height: 1 !important;
padding: 0.12rem 0.3rem !important;
}
.detail-view-mode-bar {
gap: 0.26rem !important;
}
.right-pane-tabs {
gap: 0.24rem !important;
}
.main-content label {
font-size: 0.76rem !important;
}
#proposed_storage_path_input {
font-size: 0.78rem !important;
}
}
/* ===== end mobile button pass 2 ===== */
/* ===== mobile top card button match ===== */
@media (max-width: 900px) {
.detail-doc-type-form button,
.detail-review-flags-form button,
.detail-trash-form button,
#toggle-path-edit,
.queue-nav-row .button-link,
.button-row button,
.right-pane-tabs .tab-button,
.detail-view-mode-button {
font-size: 0.72rem !important;
line-height: 1 !important;
min-height: 2.15rem !important;
padding: 0.24rem 0.62rem !important;
border-radius: 999px !important;
}
.detail-doc-type-form button,
.detail-review-flags-form button,
.detail-trash-form button,
#toggle-path-edit {
min-width: 0 !important;
}
.detail-doc-actions-row {
gap: 0.32rem !important;
}
.queue-nav-row {
gap: 0.28rem !important;
}
.detail-sticky-header > .card {
margin-top: 0.35rem !important;
}
}
/* ===== end mobile top card button match ===== */
/* ===== mobile scale refine ===== */
@media (max-width: 900px) {
.page-title {
font-size: 0.96rem !important;
}
.page-subtitle {
font-size: 0.7rem !important;
}
.detail-sticky-header > .card,
.card {
padding: 0.56rem !important;
border-radius: 15px !important;
}
.main-content label {
font-size: 0.72rem !important;
}
.main-content input[type="text"],
.main-content input[type="date"],
.main-content select,
.main-content textarea {
font-size: 15px !important;
padding: 0.38rem 0.52rem !important;
border-radius: 10px !important;
}
.main-content button,
.main-content .button-link,
.main-content .tab-button,
.main-content .detail-view-mode-button,
.main-content #toggle-path-edit,
.main-content .btn {
font-size: 0.64rem !important;
padding: 0.14rem 0.38rem !important;
min-height: 1.8rem !important;
border-radius: 999px !important;
}
.right-pane-tabs,
.detail-view-mode-bar,
.queue-nav-row {
gap: 0.2rem !important;
}
.detail-view-mode-button,
.right-pane-tabs .tab-button {
font-size: 0.64rem !important;
min-height: 1.8rem !important;
padding: 0.14rem 0.4rem !important;
}
#proposed_storage_path_input {
font-size: 0.74rem !important;
}
}
/* ===== end mobile scale refine ===== */
/* ===== mobile control density 3 ===== */
@media (max-width: 900px) {
.page-title {
font-size: 0.92rem !important;
}
.page-subtitle {
font-size: 0.66rem !important;
}
.detail-sticky-header > .card,
.card {
padding: 0.5rem !important;
border-radius: 14px !important;
}
.main-content label {
font-size: 0.69rem !important;
}
.main-content input[type="text"],
.main-content input[type="date"],
.main-content select,
.main-content textarea {
font-size: 14px !important;
padding: 0.34rem 0.48rem !important;
border-radius: 10px !important;
}
.main-content button,
.main-content .button-link,
.main-content .tab-button,
.main-content .detail-view-mode-button,
.main-content #toggle-path-edit,
.main-content .btn {
font-size: 0.6rem !important;
padding: 0.12rem 0.34rem !important;
min-height: 1.68rem !important;
border-radius: 999px !important;
}
.detail-view-mode-button,
.right-pane-tabs .tab-button {
font-size: 0.6rem !important;
min-height: 1.68rem !important;
padding: 0.12rem 0.36rem !important;
}
.queue-nav-row,
.detail-view-mode-bar,
.right-pane-tabs {
gap: 0.16rem !important;
}
#proposed_storage_path_input {
font-size: 0.7rem !important;
}
}
/* ===== end mobile control density 3 ===== */
/* ===== mobile card density tweak 4 ===== */
@media (max-width: 900px) {
.detail-sticky-header .topbar {
margin-bottom: 0.45rem !important;
}
.page-title {
font-size: 0.9rem !important;
line-height: 1.08 !important;
margin: 0 0 0.12rem 0 !important;
}
.page-subtitle {
font-size: 0.64rem !important;
line-height: 1.18 !important;
margin: 0 !important;
}
.detail-sticky-header > .card,
.card {
padding: 0.46rem !important;
border-radius: 14px !important;
}
.main-content label {
font-size: 0.67rem !important;
}
.main-content input[type="text"],
.main-content input[type="date"],
.main-content select,
.main-content textarea {
font-size: 14px !important;
padding: 0.32rem 0.46rem !important;
border-radius: 10px !important;
}
.main-content button,
.main-content .button-link,
.main-content .tab-button,
.main-content .detail-view-mode-button,
.main-content #toggle-path-edit,
.main-content .btn {
font-size: 0.58rem !important;
padding: 0.11rem 0.32rem !important;
min-height: 1.62rem !important;
border-radius: 999px !important;
}
.detail-view-mode-button,
.right-pane-tabs .tab-button {
font-size: 0.58rem !important;
min-height: 1.62rem !important;
padding: 0.11rem 0.34rem !important;
}
.queue-nav-row,
.detail-view-mode-bar,
.right-pane-tabs {
gap: 0.14rem !important;
}
#proposed_storage_path_input {
font-size: 0.68rem !important;
}
}
/* ===== end mobile card density tweak 4 ===== */
/* ===== mobile top card layout fix ===== */
@media (max-width: 900px) {
.detail-sticky-header > .card form[action$="/save-pdf"] {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0.38rem !important;
}
.detail-sticky-header > .card form[action$="/save-pdf"] > div:first-child {
width: 100% !important;
min-width: 0 !important;
flex: 0 0 auto !important;
}
#path-override-hint {
white-space: normal !important;
line-height: 1.2 !important;
}
.detail-sticky-header > .card form[action$="/save-pdf"] > button {
align-self: flex-start !important;
margin-right: 0.28rem !important;
}
.detail-sticky-header > .card .queue-nav-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.22rem !important;
margin-top: 0.28rem !important;
}
.detail-sticky-header > .card .queue-nav-row .button-link {
flex: 0 0 auto !important;
}
}
/* ===== end mobile top card layout fix ===== */
/* ===== mobile path buttons row fix ===== */
@media (max-width: 900px) {
.detail-sticky-header > .card form[action$="/save-pdf"] {
display: grid !important;
grid-template-columns: 1fr auto auto !important;
column-gap: 0.22rem !important;
row-gap: 0.32rem !important;
align-items: end !important;
}
.detail-sticky-header > .card form[action$="/save-pdf"] > div:first-child {
grid-column: 1 / -1 !important;
width: 100% !important;
min-width: 0 !important;
}
.detail-sticky-header > .card form[action$="/save-pdf"] > button {
align-self: center !important;
margin: 0 !important;
}
#toggle-path-edit {
justify-self: start !important;
}
.detail-sticky-header > .card form[action$="/save-pdf"] > button[type="submit"] {
justify-self: start !important;
}
.detail-sticky-header > .card .queue-nav-row {
margin-top: 0.32rem !important;
}
}
/* ===== end mobile path buttons row fix ===== */
/* ===== mobile detail header tighten ===== */
@media (max-width: 900px) {
.detail-sticky-header .topbar {
margin-bottom: 0.18rem !important;
}
.detail-sticky-header > .card {
margin-top: 0.12rem !important;
}
.page-title {
margin-bottom: 0.06rem !important;
}
}
/* ===== end mobile detail header tighten ===== */
/* ===== canonical mobile top card compact ===== */
@media (max-width: 900px) {
.detail-sticky-header > .card {
padding: 0.28rem !important;
}
.detail-sticky-header .topbar {
margin-bottom: 0.12rem !important;
}
.detail-sticky-header form,
.detail-sticky-header .form-field {
margin-bottom: 0 !important;
}
.detail-doc-actions-row {
gap: 0.32rem !important;
align-items: center !important;
flex-wrap: wrap !important;
}
.detail-doc-type-form,
.detail-review-flags-form,
.detail-trash-form {
gap: 0.22rem !important;
align-items: center !important;
}
.detail-sticky-header form[action$="/save-document-type"] button,
.detail-sticky-header form[action$="/save-review-flags"] button,
.detail-sticky-header form[action$="/move-to-trash"] button {
font-size: 0.70rem !important;
line-height: 1 !important;
font-weight: 500 !important;
height: 1.46rem !important;
min-height: 1.46rem !important;
padding: 0 0.30rem !important;
border-radius: 999px !important;
width: auto !important;
}
.detail-sticky-header input[type="text"],
.detail-sticky-header select {
font-size: 0.84rem !important;
min-height: 1.72rem !important;
padding: 0.18rem 0.42rem !important;
}
.detail-sticky-header label {
font-size: 0.68rem !important;
margin-bottom: 0.06rem !important;
}
.detail-sticky-header form[action$="/save-pdf"] {
display: flex !important;
flex-wrap: wrap !important;
align-items: end !important;
gap: 0.18rem !important;
}
.detail-sticky-header form[action$="/save-pdf"] > div:first-child {
flex: 1 1 100% !important;
min-width: 0 !important;
width: 100% !important;
}
.detail-sticky-header form[action$="/save-pdf"] > button {
font-size: 0.72rem !important;
line-height: 1 !important;
font-weight: 500 !important;
height: 1.50rem !important;
min-height: 1.50rem !important;
padding: 0 0.34rem !important;
border-radius: 999px !important;
width: auto !important;
}
.detail-sticky-header .queue-nav-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.12rem !important;
margin-top: 0.14rem !important;
}
.detail-sticky-header .queue-nav-row .button-link {
font-size: 0.72rem !important;
line-height: 1 !important;
font-weight: 500 !important;
min-height: 1.50rem !important;
height: 1.50rem !important;
padding: 0 0.34rem !important;
border-radius: 999px !important;
width: auto !important;
flex: 0 0 auto !important;
white-space: nowrap !important;
}
#path-override-hint {
margin-top: 0.10rem !important;
font-size: 0.66rem !important;
line-height: 1.14 !important;
}
}
/* ===== end canonical mobile top card compact ===== */
/* ===== queue simplify polish ===== */
@media (max-width: 900px) {
.detail-sticky-header .queue-nav-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.12rem !important;
margin-top: 0.14rem !important;
}
.detail-sticky-header .queue-nav-row .button-link {
font-size: 0.72rem !important;
line-height: 1 !important;
font-weight: 500 !important;
min-height: 1.50rem !important;
height: 1.50rem !important;
padding: 0 0.34rem !important;
border-radius: 999px !important;
width: auto !important;
flex: 0 0 auto !important;
white-space: nowrap !important;
}
}
/* ===== end queue simplify polish ===== */
/* ===== path row inline cleanup ===== */
@media (max-width: 900px) {
#path-override-hint {
display: none !important;
}
.detail-save-pdf-form {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.12rem !important;
align-items: end !important;
}
.detail-path-row {
display: flex !important;
align-items: end !important;
gap: 0.12rem !important;
width: 100% !important;
flex-wrap: nowrap !important;
}
.detail-path-row > div:first-child {
flex: 1 1 auto !important;
min-width: 0 !important;
}
.detail-save-pdf-form > button[type="submit"] {
width: auto !important;
margin-left: auto !important;
}
#toggle-path-edit {
width: auto !important;
flex: 0 0 auto !important;
align-self: end !important;
}
}
/* ===== end path row inline cleanup ===== */
/* ===== save document into nav row ===== */
@media (max-width: 900px) {
.detail-save-pdf-form {
display: block !important;
}
.detail-path-row {
display: flex !important;
align-items: end !important;
gap: 0.12rem !important;
width: 100% !important;
flex-wrap: nowrap !important;
margin-bottom: 0.12rem !important;
}
.detail-path-row > div:first-child {
flex: 1 1 auto !important;
min-width: 0 !important;
}
.detail-save-pdf-form > button[type="submit"] {
display: none !important;
}
.detail-sticky-header .queue-nav-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.12rem !important;
margin-top: 0.12rem !important;
align-items: center !important;
}
}
/* ===== end save document into nav row ===== */
/* ===== queue button vertical align fix ===== */
@media (max-width: 900px) {
.detail-sticky-header .queue-nav-row .button-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
vertical-align: middle !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
/* ===== end queue button vertical align fix ===== */
/* ===== trash button into nav row ===== */
@media (max-width: 900px) {
.detail-trash-inline {
display: inline-flex !important;
margin: 0 !important;
padding: 0 !important;
order: -0.5 !important;
}
.detail-trash-inline button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.72rem !important;
line-height: 1 !important;
font-weight: 500 !important;
min-height: 1.50rem !important;
height: 1.50rem !important;
padding: 0 0.34rem !important;
border-radius: 999px !important;
white-space: nowrap !important;
}
}
/* ===== end trash button into nav row ===== */
/* ===== flags inline with document type ===== */
@media (max-width: 900px) {
.detail-doc-type-form {
display: flex !important;
align-items: end !important;
gap: 0.16rem !important;
flex-wrap: wrap !important;
width: 100% !important;
}
.detail-doc-type-form > div:first-child {
flex: 1 1 100% !important;
min-width: 0 !important;
}
.detail-check-inline {
display: inline-flex !important;
align-items: center !important;
gap: 0.20rem !important;
white-space: nowrap !important;
margin: 0 !important;
font-size: 0.72rem !important;
line-height: 1 !important;
}
.detail-check-inline input[type="checkbox"] {
width: 0.92rem !important;
height: 0.92rem !important;
margin: 0 !important;
}
.detail-doc-type-form > button[type="submit"] {
font-size: 0.72rem !important;
line-height: 1 !important;
font-weight: 500 !important;
height: 1.50rem !important;
min-height: 1.50rem !important;
padding: 0 0.34rem !important;
border-radius: 999px !important;
}
.detail-review-flags-form {
margin: 0 !important;
}
.detail-review-flags-form button {
font-size: 0.72rem !important;
line-height: 1 !important;
font-weight: 500 !important;
height: 1.50rem !important;
min-height: 1.50rem !important;
padding: 0 0.34rem !important;
border-radius: 999px !important;
}
}
/* ===== end flags inline with document type ===== */
/* ===== unified top card controls ===== */
@media (max-width: 900px) {
.detail-sticky-header > .card {
padding: 0.28rem !important;
}
.detail-doc-actions-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: end !important;
gap: 0.10rem !important;
margin-bottom: 0.10rem !important;
}
.unified-top-form {
display: flex !important;
flex-wrap: wrap !important;
align-items: end !important;
gap: 0.10rem !important;
flex: 1 1 auto !important;
margin: 0 !important;
}
.detail-type-input-wrap {
flex: 1 1 100% !important;
min-width: 0 !important;
}
.detail-type-input-wrap input {
width: 100% !important;
}
.detail-check-inline {
display: inline-flex !important;
align-items: center !important;
gap: 0.18rem !important;
white-space: nowrap !important;
font-size: 0.72rem !important;
line-height: 1 !important;
margin: 0 !important;
}
.detail-check-inline input[type="checkbox"] {
width: 0.90rem !important;
height: 0.90rem !important;
margin: 0 !important;
}
.unified-flags-form {
display: inline-flex !important;
align-items: end !important;
margin: 0 !important;
}
.top-pill-button,
.detail-sticky-header .queue-nav-row .button-link,
.detail-trash-inline button,
.detail-save-pdf-form {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.10rem !important;
margin-bottom: 0.10rem !important;
}
.detail-path-row {
display: flex !important;
align-items: end !important;
gap: 0.10rem !important;
width: 100% !important;
flex-wrap: nowrap !important;
}
.detail-path-row > div:first-child {
flex: 1 1 auto !important;
min-width: 0 !important;
}
.detail-save-pdf-form > button[type="submit"] {
display: none !important;
}
.detail-sticky-header .queue-nav-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.10rem !important;
margin-top: 0.10rem !important;
align-items: center !important;
}
#path-override-hint {
display: none !important;
}
}
/* ===== end unified top card controls ===== */
/* ===== flags + document type one row ===== */
@media (max-width: 900px) {
.detail-doc-actions-row {
display: flex !important;
flex-wrap: nowrap !important;
align-items: end !important;
gap: 0.10rem !important;
width: 100% !important;
overflow-x: auto !important;
padding-bottom: 0.02rem !important;
}
.unified-top-form {
display: flex !important;
flex-wrap: nowrap !important;
align-items: end !important;
gap: 0.10rem !important;
flex: 1 1 auto !important;
min-width: max-content !important;
margin: 0 !important;
}
.detail-type-input-wrap {
flex: 1 1 13rem !important;
min-width: 11rem !important;
max-width: none !important;
}
.detail-type-input-wrap input {
width: 100% !important;
min-width: 0 !important;
}
.detail-check-inline {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
margin: 0 !important;
}
.unified-flags-form {
display: inline-flex !important;
flex: 0 0 auto !important;
align-items: end !important;
margin: 0 !important;
}
}
/* ===== end flags + document type one row ===== */
/* ===== stack approved/excluded ===== */
@media (max-width: 900px) {
.unified-top-form {
display: flex !important;
flex-wrap: nowrap !important;
align-items: end !important;
gap: 0.10rem !important;
min-width: max-content !important;
}
.detail-type-input-wrap {
flex: 1 1 12rem !important;
min-width: 10.5rem !important;
}
.detail-doc-type-form .detail-check-inline:nth-of-type(1),
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
margin: 0 !important;
}
.detail-doc-type-form {
align-items: end !important;
}
.detail-doc-type-form::after {
content: "";
display: block;
}
.detail-doc-type-form .detail-check-inline {
font-size: 0.70rem !important;
line-height: 1 !important;
}
.detail-doc-type-form .detail-check-inline input[type="checkbox"] {
width: 0.88rem !important;
height: 0.88rem !important;
}
/* stack the two flags in a compact column */
.detail-doc-type-form .detail-check-inline:nth-of-type(1) {
align-self: center !important;
}
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
align-self: center !important;
}
.detail-doc-type-form .detail-check-inline:nth-of-type(1),
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
display: flex !important;
}
.detail-doc-type-form .detail-check-inline:nth-of-type(1) {
margin-bottom: -0.10rem !important;
}
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
margin-top: -0.10rem !important;
}
.detail-doc-type-form {
position: relative !important;
}
.detail-doc-type-form .detail-check-inline:nth-of-type(1),
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
flex: 0 0 auto !important;
}
.detail-doc-type-form .detail-check-inline:nth-of-type(1) span,
.detail-doc-type-form .detail-check-inline:nth-of-type(2) span {
white-space: nowrap !important;
}
/* wrap only the two checks into a visual stacked column */
.detail-doc-type-form .detail-check-inline:nth-of-type(1) {
order: 2 !important;
}
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
order: 3 !important;
}
.detail-doc-type-form > button[type="submit"] {
order: 4 !important;
}
.detail-type-input-wrap {
order: 1 !important;
}
.detail-doc-type-form {
display: grid !important;
grid-template-columns: minmax(10.5rem, 1fr) auto auto !important;
grid-template-rows: auto auto !important;
column-gap: 0.10rem !important;
row-gap: 0.04rem !important;
align-items: center !important;
}
.detail-type-input-wrap {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
}
.detail-doc-type-form .detail-check-inline:nth-of-type(1) {
grid-column: 2 !important;
grid-row: 1 !important;
}
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
grid-column: 2 !important;
grid-row: 2 !important;
}
.detail-doc-type-form > button[type="submit"] {
grid-column: 3 !important;
grid-row: 1 / span 2 !important;
align-self: center !important;
}
}
/* ===== end stack approved/excluded ===== */
/* ===== swap update and stacked flags ===== */
@media (max-width: 900px) {
.detail-doc-type-form {
display: grid !important;
grid-template-columns: minmax(10.5rem, 1fr) auto auto !important;
grid-template-rows: auto auto !important;
column-gap: 0.10rem !important;
row-gap: 0.04rem !important;
align-items: center !important;
}
.detail-type-input-wrap {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
}
.detail-doc-type-form > button[type="submit"] {
grid-column: 2 !important;
grid-row: 1 / span 2 !important;
align-self: center !important;
}
.detail-doc-type-form .detail-check-inline:nth-of-type(1) {
grid-column: 3 !important;
grid-row: 1 !important;
}
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
grid-column: 3 !important;
grid-row: 2 !important;
}
}
/* ===== end swap update and stacked flags ===== */
/* ===== top row alignment polish ===== */
@media (max-width: 900px) {
.detail-doc-actions-row {
align-items: start !important;
}
.detail-doc-type-form {
display: grid !important;
grid-template-columns: minmax(11.5rem, 1fr) auto auto auto !important;
grid-template-rows: auto auto !important;
column-gap: 0.12rem !important;
row-gap: 0.06rem !important;
align-items: center !important;
width: 100% !important;
}
.detail-type-input-wrap {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
min-width: 0 !important;
}
.detail-type-input-wrap label {
margin-bottom: 0.08rem !important;
}
.detail-type-input-wrap input {
height: 1.72rem !important;
}
.detail-doc-type-form > button[type="submit"] {
grid-column: 2 !important;
grid-row: 1 / span 2 !important;
align-self: center !important;
justify-self: start !important;
margin: 0 !important;
}
.detail-doc-type-form .detail-check-inline:nth-of-type(1) {
grid-column: 3 !important;
grid-row: 1 !important;
align-self: end !important;
justify-self: start !important;
margin: 0 !important;
}
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
grid-column: 3 !important;
grid-row: 2 !important;
align-self: start !important;
justify-self: start !important;
margin: 0 !important;
}
.detail-review-flags-form {
display: inline-flex !important;
align-items: center !important;
align-self: center !important;
margin-top: 1.02rem !important;
margin-left: 0.04rem !important;
}
.detail-review-flags-form button {
margin: 0 !important;
}
.detail-check-inline {
min-height: 0 !important;
height: auto !important;
}
.detail-check-inline span {
display: inline-block !important;
transform: translateY(-0.01rem) !important;
}
.detail-check-inline input[type="checkbox"] {
transform: translateY(0.01rem) !important;
}
}
/* ===== end top row alignment polish ===== */
/* ===== align update with save flags ===== */
@media (max-width: 900px) {
.detail-doc-type-form {
display: grid !important;
grid-template-columns: minmax(11.5rem, 1fr) auto auto !important;
grid-template-rows: auto auto !important;
column-gap: 0.12rem !important;
row-gap: 0.06rem !important;
align-items: center !important;
width: 100% !important;
}
.detail-type-input-wrap {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
min-width: 0 !important;
}
.detail-doc-type-form > button[type="submit"] {
grid-column: 2 !important;
grid-row: 1 / span 2 !important;
align-self: center !important;
justify-self: start !important;
margin: 0 !important;
}
.detail-doc-type-form .detail-check-inline:nth-of-type(1) {
grid-column: 3 !important;
grid-row: 1 !important;
align-self: end !important;
justify-self: start !important;
margin: 0 !important;
}
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
grid-column: 3 !important;
grid-row: 2 !important;
align-self: start !important;
justify-self: start !important;
margin: 0 !important;
}
.detail-review-flags-form {
display: inline-flex !important;
align-items: center !important;
align-self: center !important;
margin: 0 !important;
padding-top: 1.02rem !important;
}
.detail-review-flags-form button {
margin: 0 !important;
}
}
/* ===== end align update with save flags ===== */
/* ===== level update and save-flags buttons ===== */
@media (max-width: 900px) {
.detail-doc-actions-row {
align-items: start !important;
}
.detail-doc-type-form {
display: grid !important;
grid-template-columns: minmax(11.5rem, 1fr) auto auto !important;
grid-template-rows: auto auto !important;
column-gap: 0.12rem !important;
row-gap: 0.02rem !important;
align-items: center !important;
width: 100% !important;
}
.detail-type-input-wrap {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
min-width: 0 !important;
}
.detail-doc-type-form > button[type="submit"] {
grid-column: 2 !important;
grid-row: 1 / span 2 !important;
align-self: center !important;
justify-self: start !important;
margin: 0 !important;
transform: translateY(0.10rem) !important;
}
.detail-doc-type-form .detail-check-inline:nth-of-type(1) {
grid-column: 3 !important;
grid-row: 1 !important;
align-self: end !important;
justify-self: start !important;
margin: 0 !important;
}
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
grid-column: 3 !important;
grid-row: 2 !important;
align-self: start !important;
justify-self: start !important;
margin: 0 !important;
}
.detail-review-flags-form {
display: inline-flex !important;
align-items: center !important;
align-self: start !important;
margin: 0 !important;
padding-top: 0 !important;
transform: translateY(1.12rem) !important;
}
.detail-review-flags-form button {
margin: 0 !important;
}
}
/* ===== end level update and save-flags buttons ===== */
/* ===== save flags same grid as update ===== */
@media (max-width: 900px) {
.detail-doc-actions-row {
display: block !important;
margin-bottom: 0.10rem !important;
}
.detail-doc-actions-grid {
display: grid !important;
grid-template-columns: minmax(11.5rem, 1fr) auto auto auto !important;
grid-template-rows: auto auto !important;
column-gap: 0.12rem !important;
row-gap: 0.04rem !important;
align-items: center !important;
width: 100% !important;
}
.detail-doc-type-form {
display: contents !important;
}
.detail-type-input-wrap {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
min-width: 0 !important;
}
.detail-type-input-wrap input {
width: 100% !important;
}
.detail-update-button {
grid-column: 2 !important;
grid-row: 1 / span 2 !important;
align-self: center !important;
justify-self: start !important;
margin: 0 !important;
}
.detail-flags-stack {
grid-column: 3 !important;
grid-row: 1 / span 2 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 0.08rem !important;
align-self: center !important;
}
.detail-saveflags-button {
grid-column: 4 !important;
grid-row: 1 / span 2 !important;
align-self: center !important;
justify-self: start !important;
margin: 0 !important;
}
.detail-review-flags-form {
display: contents !important;
margin: 0 !important;
}
.detail-check-inline {
display: inline-flex !important;
align-items: center !important;
gap: 0.20rem !important;
white-space: nowrap !important;
font-size: 0.72rem !important;
line-height: 1 !important;
margin: 0 !important;
}
.detail-check-inline input[type="checkbox"] {
width: 0.92rem !important;
height: 0.92rem !important;
margin: 0 !important;
}
}
/* ===== end save flags same grid as update ===== */
/* ===== real save button in queue row ===== */
@media (max-width: 900px) {
.detail-sticky-header .queue-nav-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 0.14rem !important;
row-gap: 0.12rem !important;
}
.detail-save-document-button {
background: #2563eb !important;
color: #ffffff !important;
border-color: #2563eb !important;
box-shadow: none !important;
margin: 0 !important;
}
.detail-sticky-header .queue-nav-row .button-link,
.detail-trash-inline button,
.detail-save-document-button {
margin: 0 !important;
}
}
/* ===== end real save button in queue row ===== */
/* ===== center text inside top-row pills ===== */
@media (max-width: 900px) {
.detail-update-button,
.detail-saveflags-button,
#toggle-path-edit,
.detail-sticky-header button,
.detail-sticky-header .button-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
vertical-align: middle !important;
}
.detail-update-button,
.detail-saveflags-button,
#toggle-path-edit {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.detail-update-button span,
.detail-saveflags-button span,
#toggle-path-edit span {
display: inline-flex !important;
align-items: center !important;
}
}
/* ===== end center text inside top-row pills ===== */
/* ===== tighten document type vs proposed path spacing ===== */
@media (max-width: 900px) {
.detail-doc-actions-row {
margin-bottom: 0.02rem !important;
}
.detail-doc-actions-grid {
margin-bottom: 0 !important;
}
.detail-sticky-header > .card > div {
gap: 0.22rem !important;
}
.detail-type-input-wrap {
align-self: end !important;
margin-bottom: 0 !important;
}
.detail-type-input-wrap label,
.detail-sticky-header form[action$="/save-pdf"] label {
margin-bottom: 0.08rem !important;
}
.detail-type-input-wrap input {
margin-bottom: 0 !important;
}
.detail-sticky-header form[action$="/save-pdf"] {
margin-top: 0 !important;
align-items: end !important;
gap: 0.10rem !important;
}
.detail-sticky-header form[action$="/save-pdf"] > div:first-child {
margin-bottom: 0 !important;
}
#proposed_storage_path_input {
margin-bottom: 0 !important;
}
}
/* ===== end tighten document type vs proposed path spacing ===== */
/* ===== lower document-type right controls slightly ===== */
@media (max-width: 900px) {
.detail-update-button,
.detail-flags-stack,
.detail-saveflags-button {
transform: translateY(0.30rem) !important;
}
.detail-flags-stack {
justify-content: center !important;
}
}
/* ===== end lower document-type right controls slightly ===== */
/* ===== OCR status text matches field-label size ===== */
@media (max-width: 900px) {
.tab-panel[data-panel="ocr-review"] > p,
.tab-panel[data-panel="ocr-review"] #line-warning,
.tab-panel[data-panel="ocr-review"] #expected-lines,
.tab-panel[data-panel="ocr-review"] #actual-lines {
font-size: 0.85rem !important;
line-height: 1.35 !important;
}
}
/* ===== end OCR status text matches field-label size ===== */
/* ===== OCR label + warning one line same size ===== */
@media (max-width: 900px) {
.tab-panel[data-panel="ocr-review"] label[for="reviewed_text"] {
display: block !important;
white-space: nowrap !important;
font-size: 0.85rem !important;
line-height: 1.25 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.tab-panel[data-panel="ocr-review"] label[for="reviewed_text"] #line-warning {
display: inline !important;
font-size: inherit !important;
line-height: inherit !important;
white-space: nowrap !important;
color: inherit !important;
}
}
/* ===== end OCR label + warning one line same size ===== */
/* ===== OCR current-version line one-row ===== */
@media (max-width: 900px) {
.tab-panel[data-panel="ocr-review"] > p:first-of-type {
font-size: 0.76rem !important;
line-height: 1.15 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
}
/* ===== end OCR current-version line one-row ===== */
/* ===== OCR meta block uniform small text ===== */
@media (max-width: 900px) {
.tab-panel[data-panel="ocr-review"] > p:first-of-type,
.tab-panel[data-panel="ocr-review"] > p:nth-of-type(2),
.tab-panel[data-panel="ocr-review"] label[for="reviewed_text"] {
font-size: 0.76rem !important;
line-height: 1.15 !important;
}
.tab-panel[data-panel="ocr-review"] > p:nth-of-type(2),
.tab-panel[data-panel="ocr-review"] label[for="reviewed_text"] {
margin-top: 0.18rem !important;
margin-bottom: 0.18rem !important;
}
.tab-panel[data-panel="ocr-review"] > p:nth-of-type(2) {
white-space: normal !important;
}
.tab-panel[data-panel="ocr-review"] label[for="reviewed_text"] {
display: block !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.tab-panel[data-panel="ocr-review"] #expected-lines,
.tab-panel[data-panel="ocr-review"] #actual-lines,
.tab-panel[data-panel="ocr-review"] #line-warning {
font-size: inherit !important;
line-height: inherit !important;
}
}
/* ===== end OCR meta block uniform small text ===== */
/* ===== tighten OCR meta line spacing ===== */
@media (max-width: 900px) {
.tab-panel[data-panel="ocr-review"] > p:first-of-type,
.tab-panel[data-panel="ocr-review"] > p:nth-of-type(2),
.tab-panel[data-panel="ocr-review"] label[for="reviewed_text"] {
margin-top: 0.06rem !important;
margin-bottom: 0.06rem !important;
line-height: 1.05 !important;
}
.tab-panel[data-panel="ocr-review"] > h2.card-title {
margin-bottom: 0.18rem !important;
}
.tab-panel[data-panel="ocr-review"] form[action$="/rerun-ocr"] {
margin: 0.28rem 0 !important;
}
.tab-panel[data-panel="ocr-review"] .form-field.full:first-of-type {
margin-top: 0.18rem !important;
}
}
/* ===== end tighten OCR meta line spacing ===== */
/* ===== rerun OCR inline with Reviewed OCR title ===== */
@media (max-width: 900px) {
.ocr-review-header-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.4rem !important;
margin-bottom: 0.18rem !important;
}
.ocr-review-header-row .card-title {
margin: 0 !important;
}
.ocr-rerun-inline-form {
margin: 0 !important;
flex: 0 0 auto !important;
}
.ocr-rerun-inline-form .button-row {
margin: 0 !important;
}
.ocr-rerun-inline-form button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.72rem !important;
line-height: 1 !important;
font-weight: 500 !important;
height: 1.5rem !important;
min-height: 1.5rem !important;
padding: 0 0.34rem !important;
border-radius: 999px !important;
margin: 0 !important;
}
}
/* ===== end rerun OCR inline with Reviewed OCR title ===== */
/* ===== Reviewed OCR title + rerun button clean one-row layout ===== */
@media (max-width: 900px) {
.ocr-review-header-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
column-gap: 0.35rem !important;
margin-bottom: 0.18rem !important;
}
.ocr-review-header-row .card-title {
margin: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
word-break: normal !important;
overflow-wrap: normal !important;
min-width: 0 !important;
font-size: 0.98rem !important;
line-height: 1.05 !important;
}
.ocr-rerun-inline-form {
margin: 0 !important;
justify-self: end !important;
}
.ocr-rerun-inline-form button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
margin: 0 !important;
}
}
/* ===== end Reviewed OCR title + rerun button clean one-row layout ===== */
/* ===== tighten OCR editor spacing v2 ===== */
@media (max-width: 900px) {
.tab-panel[data-panel="ocr-review"] .form-field.full {
margin-top: 0 !important;
margin-bottom: 0.2rem !important;
}
.tab-panel[data-panel="ocr-review"] .form-field.full label[for="reviewed_text"] {
display: block !important;
margin: 0 0 0.02rem 0 !important;
padding: 0 !important;
}
.tab-panel[data-panel="ocr-review"] .editor-wrap {
margin: 0 !important;
padding: 0 !important;
}
.tab-panel[data-panel="ocr-review"] .line-numbers,
.tab-panel[data-panel="ocr-review"] #reviewed_text {
margin-top: 0 !important;
}
}
/* ===== end tighten OCR editor spacing v2 ===== */
/* ===== reduce OCR line-number gutter ===== */
@media (max-width: 900px) {
.tab-panel[data-panel="ocr-review"] .editor-wrap {
grid-template-columns: 2.1rem minmax(0, 1fr) !important;
column-gap: 0 !important;
}
.tab-panel[data-panel="ocr-review"] .line-numbers {
width: 2.1rem !important;
min-width: 2.1rem !important;
padding-left: 0.18rem !important;
padding-right: 0.22rem !important;
text-align: right !important;
}
}
/* ===== end reduce OCR line-number gutter ===== */
/* ===== slightly reduce OCR editor text size ===== */
@media (max-width: 900px) {
.tab-panel[data-panel="ocr-review"] #reviewed_text,
.tab-panel[data-panel="ocr-review"] .line-numbers {
font-size: 0.88rem !important;
line-height: 1.35 !important;
}
}
/* ===== end slightly reduce OCR editor text size ===== */
/* ===== tighten metadata panel on mobile (real classes) ===== */
@media (max-width: 900px) {
.meta-grid {
gap: 0.38rem !important;
}
.meta-item {
padding: 0.45rem 0.55rem !important;
border-radius: 0.9rem !important;
}
.meta-label {
font-size: 0.72rem !important;
line-height: 1.1 !important;
margin-bottom: 0.16rem !important;
}
.meta-item,
.meta-item div,
.meta-item span:not(.meta-label) {
font-size: 0.78rem !important;
line-height: 1.22 !important;
}
.meta-grid + .card-title,
.tab-panel[data-panel="source-options"] .card-title,
.tab-panel[data-panel="source-options"] h2.card-title {
margin-bottom: 0.35rem !important;
}
.tab-panel[data-panel="source-options"] .card[style*="padding:1rem"] {
padding: 0.7rem !important;
}
.tab-panel[data-panel="source-options"] form[style*="gap:1rem"] {
gap: 0.55rem !important;
}
.tab-panel[data-panel="source-options"] h3 {
font-size: 0.88rem !important;
line-height: 1.1 !important;
margin-bottom: 0.35rem !important;
}
.tab-panel[data-panel="source-options"] label[style*="display:flex"] {
font-size: 0.76rem !important;
line-height: 1.15 !important;
}
}
/* ===== end tighten metadata panel on mobile (real classes) ===== */
/* ===== tighten non-OCR detail tabs on mobile ===== */
@media (max-width: 900px) {
.tab-panel[data-panel="extracted-fields"],
.tab-panel[data-panel="additional-fields"],
.tab-panel[data-panel="line-items"],
.tab-panel[data-panel="versions"],
.tab-panel[data-panel="raw-ocr"],
.tab-panel[data-panel="source-options"] {
font-size: 0.8rem !important;
line-height: 1.22 !important;
}
.tab-panel[data-panel="extracted-fields"] .card-title,
.tab-panel[data-panel="additional-fields"] .card-title,
.tab-panel[data-panel="line-items"] .card-title,
.tab-panel[data-panel="versions"] .card-title,
.tab-panel[data-panel="raw-ocr"] .card-title,
.tab-panel[data-panel="source-options"] .card-title {
font-size: 0.98rem !important;
line-height: 1.08 !important;
margin: 0 0 0.3rem 0 !important;
}
.tab-panel[data-panel="extracted-fields"] > p,
.tab-panel[data-panel="additional-fields"] > p,
.tab-panel[data-panel="line-items"] > p,
.tab-panel[data-panel="versions"] > p,
.tab-panel[data-panel="raw-ocr"] > p,
.tab-panel[data-panel="source-options"] > p {
font-size: 0.76rem !important;
line-height: 1.15 !important;
margin: 0.08rem 0 !important;
}
.tab-panel[data-panel="extracted-fields"] .form-grid,
.tab-panel[data-panel="additional-fields"] .form-grid {
gap: 0.42rem !important;
}
.tab-panel[data-panel="extracted-fields"] .form-field,
.tab-panel[data-panel="additional-fields"] .form-field {
margin: 0 !important;
}
.tab-panel[data-panel="extracted-fields"] .form-field label,
.tab-panel[data-panel="additional-fields"] .form-field label,
.tab-panel[data-panel="line-items"] th,
.tab-panel[data-panel="versions"] th,
.tab-panel[data-panel="source-options"] .meta-label {
font-size: 0.72rem !important;
line-height: 1.1 !important;
margin-bottom: 0.14rem !important;
}
.tab-panel[data-panel="extracted-fields"] input,
.tab-panel[data-panel="extracted-fields"] textarea,
.tab-panel[data-panel="extracted-fields"] select,
.tab-panel[data-panel="additional-fields"] input,
.tab-panel[data-panel="additional-fields"] textarea,
.tab-panel[data-panel="additional-fields"] select,
.tab-panel[data-panel="line-items"] input,
.tab-panel[data-panel="line-items"] textarea,
.tab-panel[data-panel="line-items"] select {
font-size: 0.8rem !important;
line-height: 1.2 !important;
padding-top: 0.42rem !important;
padding-bottom: 0.42rem !important;
}
.tab-panel[data-panel="extracted-fields"] textarea,
.tab-panel[data-panel="additional-fields"] textarea {
min-height: 5.5rem !important;
}
.tab-panel[data-panel="extracted-fields"] .button-row,
.tab-panel[data-panel="additional-fields"] .button-row,
.tab-panel[data-panel="line-items"] .button-row,
.tab-panel[data-panel="versions"] .button-row,
.tab-panel[data-panel="raw-ocr"] .button-row,
.tab-panel[data-panel="source-options"] .button-row {
margin-top: 0.35rem !important;
margin-bottom: 0.35rem !important;
gap: 0.24rem !important;
}
.tab-panel[data-panel="extracted-fields"] .button-row button,
.tab-panel[data-panel="additional-fields"] .button-row button,
.tab-panel[data-panel="line-items"] .button-row button,
.tab-panel[data-panel="versions"] .button-row button,
.tab-panel[data-panel="raw-ocr"] .button-row button,
.tab-panel[data-panel="source-options"] .button-row button,
.tab-panel[data-panel="additional-fields"] .button-row .button-link,
.tab-panel[data-panel="source-options"] .button-row .button-link {
font-size: 0.74rem !important;
line-height: 1 !important;
min-height: 1.6rem !important;
height: 1.6rem !important;
padding: 0 0.42rem !important;
border-radius: 999px !important;
}
.tab-panel[data-panel="line-items"] table th,
.tab-panel[data-panel="line-items"] table td,
.tab-panel[data-panel="versions"] table th,
.tab-panel[data-panel="versions"] table td {
padding: 0.22rem !important;
font-size: 0.72rem !important;
line-height: 1.15 !important;
}
.tab-panel[data-panel="raw-ocr"] pre,
.tab-panel[data-panel="raw-ocr"] textarea {
font-size: 0.78rem !important;
line-height: 1.2 !important;
}
.tab-panel[data-panel="source-options"] .meta-grid {
gap: 0.34rem !important;
}
.tab-panel[data-panel="source-options"] .meta-item {
padding: 0.38rem 0.48rem !important;
border-radius: 0.85rem !important;
}
.tab-panel[data-panel="source-options"] .meta-label {
font-size: 0.7rem !important;
margin-bottom: 0.12rem !important;
}
.tab-panel[data-panel="source-options"] .meta-item,
.tab-panel[data-panel="source-options"] .meta-item div,
.tab-panel[data-panel="source-options"] .meta-item span:not(.meta-label) {
font-size: 0.76rem !important;
line-height: 1.18 !important;
}
}
/* ===== end tighten non-OCR detail tabs on mobile ===== */
/* ===== extracted fields header inline action ===== */
@media (max-width: 900px) {
.extracted-fields-header-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
column-gap: 0.35rem !important;
margin-bottom: 0.18rem !important;
}
.extracted-fields-header-row .card-title {
margin: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
min-width: 0 !important;
font-size: 0.98rem !important;
line-height: 1.05 !important;
}
.extracted-autofill-inline-form {
margin: 0 !important;
justify-self: end !important;
}
.extracted-autofill-inline-form button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
font-size: 0.72rem !important;
line-height: 1 !important;
font-weight: 500 !important;
min-height: 1.5rem !important;
height: 1.5rem !important;
padding: 0 0.34rem !important;
border-radius: 999px !important;
margin: 0 !important;
}
}
/* ===== end extracted fields header inline action ===== */
/* ===== extracted version line spacing ===== */
@media (max-width: 900px) {
.tab-panel[data-panel="extracted-fields"] > p:first-of-type {
margin-top: 0.16rem !important;
margin-bottom: 0.28rem !important;
line-height: 1.18 !important;
}
.extracted-fields-header-row {
margin-bottom: 0.12rem !important;
}
}
/* ===== end extracted version line spacing ===== */
/* ===== line items header inline action ===== */
@media (max-width: 900px) {
.line-items-header-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
column-gap: 0.35rem !important;
margin-bottom: 0.12rem !important;
}
.line-items-header-row .card-title {
margin: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
min-width: 0 !important;
font-size: 0.98rem !important;
line-height: 1.05 !important;
}
.line-items-regenerate-inline-form {
margin: 0 !important;
justify-self: end !important;
}
.line-items-regenerate-inline-form button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
font-size: 0.72rem !important;
line-height: 1 !important;
font-weight: 500 !important;
min-height: 1.5rem !important;
height: 1.5rem !important;
padding: 0 0.34rem !important;
border-radius: 999px !important;
margin: 0 !important;
}
.tab-panel[data-panel="line-items"] > p:first-of-type {
margin-top: 0.16rem !important;
margin-bottom: 0.28rem !important;
line-height: 1.18 !important;
}
}
/* ===== end line items header inline action ===== */
/* ===== additional fields preset controls one row ===== */
@media (max-width: 900px) {
.tab-panel[data-panel="additional-fields"] form[style*="margin-bottom: 1rem;"] .button-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto auto !important;
align-items: center !important;
gap: 0.22rem !important;
margin: 0.18rem 0 0.35rem 0 !important;
}
.tab-panel[data-panel="additional-fields"] form[style*="margin-bottom: 1rem;"] .button-row select {
min-width: 0 !important;
width: 100% !important;
font-size: 0.78rem !important;
line-height: 1.1 !important;
height: 1.7rem !important;
padding: 0 0.45rem !important;
}
.tab-panel[data-panel="additional-fields"] form[style*="margin-bottom: 1rem;"] .button-row button,
.tab-panel[data-panel="additional-fields"] form[style*="margin-bottom: 1rem;"] .button-row .button-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
font-size: 0.72rem !important;
line-height: 1 !important;
min-height: 1.7rem !important;
height: 1.7rem !important;
padding: 0 0.42rem !important;
border-radius: 999px !important;
margin: 0 !important;
}
}
/* ===== end additional fields preset controls one row ===== */
/* ===== source options dropdown + tighter mobile layout ===== */
@media (max-width: 900px) {
.tab-panel[data-panel="source-options"] .card-title {
margin-bottom: 0.22rem !important;
}
.tab-panel[data-panel="source-options"] > form {
gap: 0.34rem !important;
}
.tab-panel[data-panel="source-options"] .card {
padding: 0.56rem !important;
border-radius: 0.9rem !important;
}
.tab-panel[data-panel="source-options"] h3 {
margin: 0 0 0.2rem 0 !important;
font-size: 0.88rem !important;
line-height: 1.05 !important;
}
.source-options-select-row {
display: grid !important;
grid-template-columns: 4.2rem minmax(0, 1fr) !important;
gap: 0.18rem !important;
align-items: center !important;
}
.source-options-inline-label {
font-size: 0.7rem !important;
line-height: 1.05 !important;
color: #6b7280 !important;
margin: 0 !important;
}
.source-options-select-row select,
.tab-panel[data-panel="source-options"] select {
font-size: 0.74rem !important;
line-height: 1.05 !important;
min-height: 1.6rem !important;
height: 1.6rem !important;
padding: 0 0.4rem !important;
}
.tab-panel[data-panel="source-options"] .button-row {
margin-top: 0.18rem !important;
margin-bottom: 0 !important;
gap: 0.18rem !important;
}
.tab-panel[data-panel="source-options"] .button-row button,
.tab-panel[data-panel="source-options"] .button-row .button-link {
font-size: 0.7rem !important;
line-height: 1 !important;
min-height: 1.5rem !important;
height: 1.5rem !important;
padding: 0 0.36rem !important;
border-radius: 999px !important;
}
}
/* ===== end source options dropdown + tighter mobile layout ===== */
/* ===== metadata card matches source-options styling ===== */
@media (max-width: 900px) {
.meta-grid {
gap: 0.34rem !important;
}
.meta-item {
padding: 0.56rem !important;
border-radius: 0.9rem !important;
}
.meta-label {
font-size: 0.7rem !important;
line-height: 1.05 !important;
margin-bottom: 0.14rem !important;
color: #6b7280 !important;
}
.meta-item,
.meta-item div,
.meta-item span:not(.meta-label) {
font-size: 0.74rem !important;
line-height: 1.18 !important;
}
.meta-grid + .card-title,
h2.card-title + .meta-grid,
.card-title {
margin-bottom: 0.22rem !important;
}
}
/* ===== end metadata card matches source-options styling ===== */
/* ===== metadata card matches source-options styling v2 ===== */
@media (max-width: 900px) {
.tab-panel[data-panel="source-options"] > h2.card-title:last-of-type {
font-size: 0.98rem !important;
line-height: 1.08 !important;
margin: 0.1rem 0 0.22rem 0 !important;
}
.tab-panel[data-panel="source-options"] > .meta-grid {
gap: 0.34rem !important;
margin: 0 !important;
}
.tab-panel[data-panel="source-options"] > .meta-grid > .meta-item {
padding: 0.56rem !important;
border-radius: 0.9rem !important;
margin: 0 !important;
}
.tab-panel[data-panel="source-options"] > .meta-grid > .meta-item > .meta-label {
display: block !important;
font-size: 0.7rem !important;
line-height: 1.05 !important;
margin-bottom: 0.14rem !important;
color: #6b7280 !important;
}
.tab-panel[data-panel="source-options"] > .meta-grid > .meta-item,
.tab-panel[data-panel="source-options"] > .meta-grid > .meta-item > span:not(.meta-label),
.tab-panel[data-panel="source-options"] > .meta-grid > .meta-item > div {
font-size: 0.74rem !important;
line-height: 1.18 !important;
}
}
/* ===== end metadata card matches source-options styling v2 ===== */
/* ===== data reset matches file source box ===== */
@media (max-width: 900px) {
.tab-panel[data-panel="source-options"] .card h3 {
margin: 0 0 0.18rem 0 !important;
font-size: 0.88rem !important;
line-height: 1.05 !important;
}
.tab-panel[data-panel="source-options"] .card:has(select[name="ocr_action"]) {
padding: 0.56rem !important;
}
.tab-panel[data-panel="source-options"] .card:has(select[name="ocr_action"]) > div[style*="display:grid"] {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0.22rem !important;
}
.tab-panel[data-panel="source-options"] .card:has(select[name="ocr_action"]) > div[style*="display:grid"] > div {
display: grid !important;
grid-template-columns: 7.2rem minmax(0, 1fr) !important;
align-items: center !important;
gap: 0.28rem !important;
margin: 0 !important;
}
.tab-panel[data-panel="source-options"] .card:has(select[name="ocr_action"]) label {
font-size: 0.74rem !important;
line-height: 1.1 !important;
margin: 0 !important;
color: #111827 !important;
font-weight: 600 !important;
}
.tab-panel[data-panel="source-options"] .card:has(select[name="ocr_action"]) select {
width: 100% !important;
min-width: 0 !important;
font-size: 0.74rem !important;
line-height: 1.05 !important;
min-height: 1.6rem !important;
height: 1.6rem !important;
padding: 0 0.4rem !important;
}
}
/* ===== end data reset matches file source box ===== */
/* ===== data reset relayout ===== */
@media (max-width: 900px) {
.data-reset-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0.22rem !important;
}
.data-reset-row {
display: grid !important;
grid-template-columns: 7.2rem minmax(0, 1fr) !important;
align-items: center !important;
gap: 0.28rem !important;
margin: 0 !important;
}
.data-reset-row label {
font-size: 0.74rem !important;
line-height: 1.1 !important;
margin: 0 !important;
color: #111827 !important;
font-weight: 600 !important;
}
.data-reset-row select {
width: 100% !important;
min-width: 0 !important;
font-size: 0.74rem !important;
line-height: 1.05 !important;
min-height: 1.6rem !important;
height: 1.6rem !important;
padding: 0 0.4rem !important;
}
}
/* ===== end data reset relayout ===== */
/* ===== source-options data reset matches file source v3 ===== */
@media (max-width: 900px) {
.tab-panel[data-panel="source-options"] > form > .card:nth-of-type(2) {
padding: 0.56rem !important;
border-radius: 0.9rem !important;
}
.tab-panel[data-panel="source-options"] > form > .card:nth-of-type(2) > h3 {
margin: 0 0 0.18rem 0 !important;
font-size: 0.88rem !important;
line-height: 1.05 !important;
}
.tab-panel[data-panel="source-options"] > form > .card:nth-of-type(2) .data-reset-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0.22rem !important;
margin: 0 !important;
}
.tab-panel[data-panel="source-options"] > form > .card:nth-of-type(2) .data-reset-row {
display: grid !important;
grid-template-columns: 6.8rem minmax(0, 1fr) !important;
align-items: center !important;
gap: 0.22rem !important;
margin: 0 !important;
}
.tab-panel[data-panel="source-options"] > form > .card:nth-of-type(2) .data-reset-row label {
font-size: 0.74rem !important;
line-height: 1.08 !important;
font-weight: 500 !important;
margin: 0 !important;
color: #6b7280 !important;
}
.tab-panel[data-panel="source-options"] > form > .card:nth-of-type(2) .data-reset-row select {
width: 100% !important;
min-width: 0 !important;
font-size: 0.74rem !important;
line-height: 1.05 !important;
min-height: 1.6rem !important;
height: 1.6rem !important;
padding: 0 0.4rem !important;
margin: 0 !important;
}
.tab-panel[data-panel="source-options"] > form > div:last-child {
margin-top: 0.18rem !important;
}
.tab-panel[data-panel="source-options"] > form > div:last-child .btn {
font-size: 0.72rem !important;
line-height: 1 !important;
min-height: 1.5rem !important;
height: 1.5rem !important;
padding: 0 0.42rem !important;
border-radius: 999px !important;
}
}
/* ===== end source-options data reset matches file source v3 ===== */
/* ===== extra json matches OCR editor ===== */
@media (max-width: 900px) {
.tab-panel[data-panel="extracted-fields"] .extra-json-editor-field {
margin-top: 0.12rem !important;
}
.tab-panel[data-panel="extracted-fields"] .extra-json-editor-wrap {
display: block !important;
background: #f8fafc !important;
border: 1px solid #d7dce5 !important;
border-radius: 1rem !important;
overflow: hidden !important;
margin-top: 0.08rem !important;
}
.tab-panel[data-panel="extracted-fields"] .extra-json-editor-wrap textarea {
display: block !important;
width: 100% !important;
min-height: 10rem !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
font-size: 0.88rem !important;
line-height: 1.35 !important;
padding: 0.6rem 0.7rem !important;
resize: vertical !important;
box-sizing: border-box !important;
}
.tab-panel[data-panel="extracted-fields"] .extra-json-editor-wrap textarea:focus {
outline: none !important;
box-shadow: none !important;
}
}
/* ===== end extra json matches OCR editor ===== */
/* ===== extra json matches OCR editor with line numbers ===== */
@media (max-width: 900px) {
.tab-panel[data-panel="extracted-fields"] .extra-json-editor-wrap {
display: grid !important;
grid-template-columns: 2.1rem minmax(0, 1fr) !important;
column-gap: 0 !important;
background: #f8fafc !important;
border: 1px solid #d7dce5 !important;
border-radius: 1rem !important;
overflow: hidden !important;
margin-top: 0.08rem !important;
}
.tab-panel[data-panel="extracted-fields"] .extra-json-editor-wrap .line-numbers {
width: 2.1rem !important;
min-width: 2.1rem !important;
margin: 0 !important;
padding: 0.6rem 0.22rem 0.6rem 0.18rem !important;
text-align: right !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
font-size: 0.88rem !important;
line-height: 1.35 !important;
color: #6b7280 !important;
background: #f3f4f6 !important;
border-right: 1px solid #d7dce5 !important;
overflow: hidden !important;
user-select: none !important;
box-sizing: border-box !important;
}
.tab-panel[data-panel="extracted-fields"] .extra-json-editor-wrap textarea {
display: block !important;
width: 100% !important;
min-height: 10rem !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
font-size: 0.88rem !important;
line-height: 1.35 !important;
padding: 0.6rem 0.7rem !important;
resize: vertical !important;
box-sizing: border-box !important;
overflow: auto !important;
white-space: pre !important;
overflow-wrap: normal !important;
}
.tab-panel[data-panel="extracted-fields"] .extra-json-editor-wrap textarea:focus {
outline: none !important;
box-shadow: none !important;
}
}
/* ===== end extra json matches OCR editor with line numbers ===== */
/* ===== line items mobile final sizing ===== */
@media (max-width: 900px) {
.tab-panel[data-panel="line-items"] table {
min-width: 68rem !important;
}
/* # */
.tab-panel[data-panel="line-items"] table th:nth-child(1),
.tab-panel[data-panel="line-items"] table td:nth-child(1) {
min-width: 2.4rem !important;
width: 2.4rem !important;
}
/* Date */
.tab-panel[data-panel="line-items"] table th:nth-child(2),
.tab-panel[data-panel="line-items"] table td:nth-child(2) {
min-width: 6.2rem !important;
width: 6.2rem !important;
}
/* Description - larger */
.tab-panel[data-panel="line-items"] table th:nth-child(3),
.tab-panel[data-panel="line-items"] table td:nth-child(3) {
min-width: 13rem !important;
width: 13rem !important;
}
/* Qty */
.tab-panel[data-panel="line-items"] table th:nth-child(4),
.tab-panel[data-panel="line-items"] table td:nth-child(4) {
min-width: 3rem !important;
width: 3rem !important;
}
/* Unit */
.tab-panel[data-panel="line-items"] table th:nth-child(5),
.tab-panel[data-panel="line-items"] table td:nth-child(5) {
min-width: 4rem !important;
width: 4rem !important;
}
/* Total - larger */
.tab-panel[data-panel="line-items"] table th:nth-child(6),
.tab-panel[data-panel="line-items"] table td:nth-child(6) {
min-width: 6rem !important;
width: 6rem !important;
}
/* Tax - smaller */
.tab-panel[data-panel="line-items"] table th:nth-child(7),
.tab-panel[data-panel="line-items"] table td:nth-child(7) {
min-width: 2.8rem !important;
width: 2.8rem !important;
}
/* Category */
.tab-panel[data-panel="line-items"] table th:nth-child(8),
.tab-panel[data-panel="line-items"] table td:nth-child(8) {
min-width: 7rem !important;
width: 7rem !important;
}
/* Notes */
.tab-panel[data-panel="line-items"] table th:nth-child(9),
.tab-panel[data-panel="line-items"] table td:nth-child(9) {
min-width: 7rem !important;
width: 7rem !important;
}
.tab-panel[data-panel="line-items"] input {
min-width: 100% !important;
width: 100% !important;
font-size: 0.82rem !important;
padding-left: 0.45rem !important;
padding-right: 0.45rem !important;
}
/* numeric columns align right */
.tab-panel[data-panel="line-items"] table td:nth-child(4) input,
.tab-panel[data-panel="line-items"] table td:nth-child(5) input,
.tab-panel[data-panel="line-items"] table td:nth-child(6) input,
.tab-panel[data-panel="line-items"] table td:nth-child(7) input {
text-align: right !important;
font-variant-numeric: tabular-nums !important;
}
}
/* ===== end line items mobile final sizing ===== */
/* ===== dashboard mobile polish ===== */
@media (max-width: 900px) {
.page-header {
margin-bottom: 0.28rem !important;
}
.page-title {
font-size: 1.0rem !important;
line-height: 1.06 !important;
margin: 0 0 0.04rem 0 !important;
}
.page-subtitle {
font-size: 0.72rem !important;
line-height: 1.14 !important;
margin: 0 !important;
}
.card {
padding: 0.56rem !important;
border-radius: 0.95rem !important;
margin-bottom: 0.42rem !important;
}
.card-title {
font-size: 0.96rem !important;
line-height: 1.08 !important;
margin: 0 0 0.22rem 0 !important;
}
.button-row {
gap: 0.18rem !important;
margin: 0 !important;
}
.button-row .button-link,
.button-row button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
font-size: 0.72rem !important;
line-height: 1 !important;
min-height: 1.55rem !important;
height: 1.55rem !important;
padding: 0 0.4rem !important;
border-radius: 999px !important;
margin: 0 !important;
}
.meta-grid {
gap: 0.34rem !important;
}
.meta-item {
padding: 0.48rem 0.56rem !important;
border-radius: 0.9rem !important;
}
.meta-label {
font-size: 0.7rem !important;
line-height: 1.05 !important;
margin-bottom: 0.12rem !important;
color: #6b7280 !important;
}
.meta-item,
.meta-item div,
.meta-item span:not(.meta-label) {
font-size: 0.76rem !important;
line-height: 1.18 !important;
}
.table-wrap {
margin-top: 0.12rem !important;
}
.table-wrap table th,
.table-wrap table td {
padding: 0.24rem !important;
font-size: 0.72rem !important;
line-height: 1.12 !important;
}
.empty-state {
font-size: 0.74rem !important;
line-height: 1.18 !important;
margin: 0.1rem 0 0 0 !important;
}
}
/* ===== end dashboard mobile polish ===== */