/* Simplified phase flow UI */
.phase-cell.phase-compact { min-width:260px; }
.phase-flow-bar { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:6px; }
.phase-flow-item { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4px 8px; border:1px solid var(--color-border); border-radius:6px; background:#fff; font-size:0.55rem; min-width:60px; position:relative; cursor:default; }
.phase-flow-item.is-active { border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,0.15); }
.phase-flow-bar.collapsed .phase-flow-item:nth-child(n+6) { display:none; }
.phase-flow-more-toggle { display:inline-flex; align-items:center; justify-content:center; padding:4px 8px; border:1px dashed var(--color-border); border-radius:6px; background:#f8fafc; font-size:0.55rem; cursor:pointer; font-weight:600; }
.phase-flow-more-toggle:hover { background:#e2e8f0; }
.phase-flow-item.phase-status-completada { background:#ecfdf5; border-color:#4ade80; opacity:0.9; }
.phase-flow-item.phase-status-pendiente { background:#f8fafc; }
.phase-flow-item.phase-status-en_proceso { background:#fff7ed; border-color:#fcd34d; }
.phase-flow-item.phase-status-pausada { background:#f1f5f9; border-color:#cbd5e1; }
.phase-flow-item.phase-status-cancelada { background:#fef2f2; border-color:#fecaca; }
.phase-flow-order { font-weight:600; font-size:0.55rem; background:#f1f5f9; padding:0 6px; border-radius:999px; margin-bottom:2px; }
.phase-flow-name { font-weight:600; letter-spacing:0.3px; text-transform:capitalize; }
/* Compact summary above controls */
.phase-summary {
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
font-size:0.62rem;
margin:4px 0;
}
.chip-lite { background:#f1f5f9; color:#334155; padding:2px 6px; border-radius:999px; border:1px solid #e2e8f0; font-weight:600; }
.phase-toggle { background:transparent; border:1px solid #cbd5e1; color:#475569; border-radius:4px; padding:2px 8px; cursor:pointer; font-size:0.62rem; }
.phase-toggle:hover { background:#f1f5f9; }
/* Phase controls: clear visual hierarchy */
.phase-active-controls {
display:flex;
flex-direction:column;
gap:6px;
font-size:0.62rem;
padding:6px 8px;
background:#f8fafc;
border-radius:6px;
border:1px solid #e2e8f0;
margin-top:4px;
}
.phase-control-row {
display:flex;
align-items:center;
gap:6px;
}
.phase-control-row.phase-control-actions {
margin-top:2px;
padding-top:6px;
border-top:1px solid #e2e8f0;
justify-content:space-between;
}
.phase-control-label {
font-weight:600;
color:#475569;
font-size:0.62rem;
text-transform:uppercase;
letter-spacing:0.3px;
white-space:nowrap;
min-width:84px;
}
.phase-control-label-inline {
font-weight:600;
color:#64748b;
font-size:0.6rem;
white-space:nowrap;
min-width:80px;
}
.phase-active-select {
font-size:0.62rem;
padding:4px 6px;
border:1px solid #cbd5e1;
border-radius:4px;
background:#fff;
font-weight:500;
flex:1;
min-width:0;
}
.phase-active-select:focus {
outline:none;
border-color:#3b82f6;
box-shadow:0 0 0 3px rgba(59,130,246,0.1);
}
.phase-assignment-select,
.phase-status-select {
font-size:0.6rem;
padding:4px 6px;
border:1px solid #cbd5e1;
border-radius:4px;
background:#fff;
flex:1;
min-width:0;
}
.phase-assignment-select:focus,
.phase-status-select:focus {
outline:none;
border-color:#3b82f6;
box-shadow:0 0 0 2px rgba(59,130,246,0.1);
}
.phase-active-dynamic {
display:flex;
flex-direction:column;
gap:4px;
}
.phase-complete-switch {
display:flex;
align-items:center;
gap:6px;
font-size:0.62rem;
color:#64748b;
cursor:pointer;
user-select:none;
}
.phase-complete-switch input[type="checkbox"] {
cursor:pointer;
}
.phase-next-btn {
font-size:0.6rem;
padding:3px 8px;
background:#3b82f6;
color:#fff;
border:none;
border-radius:4px;
cursor:pointer;
font-weight:600;
white-space:nowrap;
transition:all 0.2s ease;
}
.phase-next-btn:hover {
background:#2563eb;
transform:translateX(2px);
}
.phase-active-dynamic select { font-size:0.6rem; }
/* Phase help text: clear educational design */
.phase-help {
background:#f0f9ff;
border-left:3px solid #3b82f6;
padding:8px 10px;
border-radius:4px;
max-width:220px;
}
/* Info banner: collapsible help section */
.info-banner {
background: #f8fafc;
border: 1px solid #cbd5e1;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.info-banner-toggle {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: transparent;
border: none;
cursor: pointer;
font-family: inherit;
font-size: 0.8rem;
font-weight: 600;
color: #475569;
text-align: left;
transition: background 0.2s ease;
}
.info-banner-toggle:hover {
background: #f1f5f9;
}
.info-icon {
font-size: 1.2rem;
flex-shrink: 0;
}
.info-title {
flex: 1;
}
.info-arrow {
font-size: 0.7rem;
color: #64748b;
transition: transform 0.2s ease;
}
.info-banner-toggle[aria-expanded="true"] .info-arrow {
transform: rotate(180deg);
}
.info-banner-content {
background: #fff;
border-top: 1px solid #e2e8f0;
animation: slideDown 0.2s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Design System: Dental Lab Platform */
:root {
--color-bg: #f7fafc;
--color-surface: #ffffff;
--color-border: #e2e8f0;
--color-text: #1f2937;
--color-text-light: #64748b;
--color-accent: #3b82f6; /* Light blue accent */
--color-accent-hover: #2563eb;
--color-accent-soft: #e0f2fe;
--color-danger: #dc2626;
--color-danger-bg: #fee2e2;
--color-warning: #f59e0b;
--color-success: #16a34a;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 2px 6px rgba(0,0,0,0.08);
--shadow-lg: 0 12px 30px rgba(15,23,42,0.12);
--transition: 0.15s ease;
--font-base: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
}
html, body { margin:0; padding:0; font-family: var(--font-base); background: var(--color-bg); color: var(--color-text); }
body { line-height: 1.4; }
[hidden] { display:none !important; }
header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: var(--space-3) var(--space-5); display:flex; align-items:center; justify-content:space-between; gap: var(--space-4); }
header h1 { font-size: 1.25rem; margin:0; font-weight:600; }
.main-nav { display:flex; align-items:center; gap: var(--space-4); width:100%; justify-content:space-between; }
.nav-links { display:flex; flex-wrap:wrap; gap: var(--space-2); }
.nav-link { text-decoration:none; color: var(--color-text-light); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); transition: var(--transition); font-weight:500; }
.nav-link:hover { background: var(--color-accent-soft); color: var(--color-accent); }
.nav-link.is-active { background: var(--color-accent); color:#fff; box-shadow: var(--shadow-sm); }
.nav-user { position:relative; display:flex; align-items:center; }
.nav-user-trigger { border:none; background: var(--color-accent-soft); color: var(--color-accent); border-radius: 999px; width: 38px; height: 38px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: var(--transition); }
.nav-user-trigger:hover, .nav-user-trigger:focus { background: var(--color-accent); color:#fff; outline:none; }
.nav-user-trigger svg { width:20px; height:20px; }
.nav-user-menu { position:absolute; top: calc(100% + 10px); right:0; background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3); box-shadow: var(--shadow-lg); display:flex; flex-direction:column; gap: var(--space-2); min-width: 200px; opacity:0; transform: translateY(-6px); pointer-events:none; transition: opacity 0.2s ease, transform 0.2s ease; z-index:20; }
.nav-user:hover .nav-user-menu, .nav-user:focus-within .nav-user-menu { opacity:1; transform: translateY(0); pointer-events:auto; }
.nav-user-role { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.6px; color: var(--color-text-light); }
.nav-user-note { font-size:0.8rem; color: var(--color-text-light); }
.nav-user-action { text-decoration:none; font-size:0.85rem; font-weight:600; color: var(--color-accent); padding: var(--space-2); border-radius: var(--radius-md); transition: var(--transition); text-align:center; }
.nav-user-action:hover { background: rgba(59,130,246,0.1); }
.nav-user-action[href="/logout"] { color: var(--color-danger); }
.nav-user-action[href="/logout"]:hover { background: rgba(220,38,38,0.1); }
main { max-width: 1400px; margin: var(--space-5) auto; padding: 0 var(--space-5); }
.page-header { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); margin-bottom: var(--space-5); }
.page-header h2 { margin:0 0 var(--space-2); font-size:1.5rem; }
.page-header p { margin:0; color: var(--color-text-light); font-size:0.9rem; }
.page-header.stack { display:flex; flex-direction:column; gap: var(--space-3); }
.page-header-main { display:flex; flex-direction:column; gap: var(--space-2); }
.summary-grid { display:grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: var(--space-4); }
.stat-card { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); display:flex; flex-direction:column; gap: var(--space-1); }
.stat-card.highlight { border-color: var(--color-accent); box-shadow: 0 8px 24px rgba(59,130,246,0.08); }
.stat-label { font-size:0.75rem; letter-spacing:0.5px; text-transform:uppercase; color: var(--color-text-light); }
.stat-value { font-size:1.6rem; font-weight:700; color: var(--color-text); }
.stat-hint { font-size:0.75rem; color: var(--color-text-light); }
.metrics-filter { margin-top: var(--space-4); background: rgba(59,130,246,0.06); border:1px solid rgba(59,130,246,0.15); border-radius: var(--radius-md); padding: var(--space-3); display:flex; flex-direction:column; gap: var(--space-2); box-shadow: var(--shadow-sm); max-width:360px; }
.metrics-filter label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.5px; color: var(--color-text-light); }
.metrics-filter-controls { display:flex; gap: var(--space-2); align-items:center; }
.metrics-filter select { flex:1; padding: var(--space-2); border:1px solid var(--color-border); border-radius: var(--radius-md); background:#fff; font-size:0.85rem; }
.metrics-filter .btn-primary { padding: var(--space-2) var(--space-3); font-size:0.8rem; }
.metric-summary-grid { display:grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: var(--space-5); }
.metric-card { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); display:flex; flex-direction:column; gap: var(--space-2); min-height:150px; position:relative; overflow:hidden; }
.metric-card::after { content:""; position:absolute; inset:0; opacity:0.08; pointer-events:none; }
.metric-card-title { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.5px; color: var(--color-text-light); }
.metric-card-value { font-size:2rem; font-weight:700; color: var(--color-text); }
.metric-card-subtitle { font-size:0.8rem; color: var(--color-text-light); }
.metric-card-accent::after { background: var(--color-accent); }
.metric-card-success::after { background: var(--color-success); }
.metric-card-warning::after { background: var(--color-warning); }
.metric-card-soft::after { background: var(--color-accent-soft); }
.metric-card-neutral::after { background:#cbd5f5; }
.metrics-columns { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-bottom: var(--space-6); }
.metrics-column { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); display:flex; flex-direction:column; gap: var(--space-4); }
.section-subtitle { margin-top:0; font-size:0.85rem; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; color: var(--color-text-light); }
.progress-stack { display:flex; flex-direction:column; gap: var(--space-3); }
.progress-row { display:flex; flex-direction:column; gap: var(--space-2); }
.progress-header { display:flex; justify-content:space-between; align-items:center; font-size:0.85rem; font-weight:600; color: var(--color-text); }
.progress-meta { font-size:0.75rem; color: var(--color-text-light); }
.progress-bar { height:10px; background: rgba(148,163,184,0.2); border-radius: var(--radius-md); overflow:hidden; }
.progress-fill { height:100%; background: linear-gradient(90deg, var(--color-accent), #60a5fa); width: var(--fill, 0%); transition: width 0.3s ease; }
.metric-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: var(--space-2); }
.metric-list li { display:flex; justify-content:space-between; align-items:center; padding: var(--space-2) var(--space-3); border:1px dashed rgba(148,163,184,0.4); border-radius: var(--radius-md); font-size:0.85rem; }
.metric-list-name { font-weight:600; color: var(--color-text); }
.metric-list-meta { font-size:0.75rem; color: var(--color-text-light); }
.metric-list-empty { justify-content:center; color: var(--color-text-light); font-style:italic; }
.trend-stack { display:flex; flex-direction:column; gap: var(--space-2); }
.trend-item { display:grid; grid-template-columns: 1fr auto auto; gap: var(--space-2); align-items:center; padding: var(--space-2) var(--space-3); border:1px solid rgba(148,163,184,0.25); border-radius: var(--radius-md); background: rgba(148,163,184,0.08); font-size:0.85rem; row-gap: var(--space-1); }
.trend-label { font-weight:600; color: var(--color-text); }
.trend-value { font-size:1.2rem; font-weight:700; color: var(--color-text); text-align:right; }
.trend-delta { font-size:0.8rem; font-weight:600; }
.trend-delta.positive { color: var(--color-success); }
.trend-delta.negative { color: var(--color-danger); }
.highlight-list { list-style:disc; padding-left: var(--space-4); display:flex; flex-direction:column; gap: var(--space-2); font-size:0.85rem; color: var(--color-text); }
.highlight-list li { line-height:1.4; }
.empty-note { font-size:0.8rem; color: var(--color-text-light); background: rgba(148,163,184,0.12); border-radius: var(--radius-md); padding: var(--space-3); }
.callout { border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-3); font-size:0.9rem; }
.callout-success { background:#ecfdf5; color:#166534; border-left:4px solid var(--color-success); }
.callout-warning { background:#fef3c7; color:#92400e; border-left:4px solid var(--color-warning); }
.order-form { display:flex; flex-direction:column; gap: var(--space-5); margin-bottom: var(--space-6); }
.form-card { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.form-card header { margin-bottom: var(--space-4); }
.form-card h3 { margin:0 0 var(--space-2); font-size:1.1rem; }
.helper-text { margin:0; font-size:0.8rem; color: var(--color-text-light); }
.filters-form { display:flex; flex-wrap:wrap; gap: var(--space-3); align-items:flex-end; background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); margin-bottom: var(--space-4); }
.filters-group { display:flex; flex-direction:column; gap:6px; min-width:160px; }
.filters-group label { font-size:0.7rem; letter-spacing:0.5px; text-transform:uppercase; color: var(--color-text-light); }
.filters-group input,
.filters-group select { padding: var(--space-2); border:1px solid var(--color-border); border-radius: var(--radius-md); background:#fff; font-size:0.85rem; }
.filters-group.checkbox { padding-top: 24px; min-width:220px; }
.filters-group.checkbox label.inline { display:flex; align-items:center; gap: var(--space-2); font-size:0.8rem; letter-spacing:0; text-transform:none; color: var(--color-text-light); }
.filters-group.checkbox input[type=checkbox] { width:16px; height:16px; }
.filters-actions { display:flex; gap: var(--space-2); margin-left:auto; }
.input-grid { display:grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.input-grid .field { display:flex; flex-direction:column; gap: var(--space-2); }
.input-grid .field label { font-weight:600; font-size:0.85rem; color: var(--color-text); }
.input-grid .field input,
.input-grid .field select,
.input-grid .field textarea { padding: var(--space-3); border:1px solid var(--color-border); border-radius: var(--radius-md); font-size:0.9rem; background:#fff; transition: border-color var(--transition), box-shadow var(--transition); }
.input-grid .field textarea { resize: vertical; min-height: 120px; }
.input-grid .field input:focus,
.input-grid .field select:focus,
.input-grid .field textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); outline:none; }
.required { color: var(--color-danger); }
.form-actions { display:flex; justify-content:flex-end; align-items:center; gap: var(--space-3); }
.btn-primary,
.btn-secondary,
.btn-ghost { display:inline-flex; align-items:center; justify-content:center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font-weight:600; font-size:0.9rem; cursor:pointer; text-decoration:none; transition: var(--transition); }
.btn-primary { background: var(--color-accent); color:#fff; border:none; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-secondary { background:#e2e8f0; color: var(--color-text); border:1px solid var(--color-border); }
.btn-secondary:hover { background:#cbd5f5; }
.btn-ghost { background: transparent; color: var(--color-text-light); border:1px dashed var(--color-border); }
.btn-ghost[disabled] { cursor:not-allowed; opacity:0.6; }
.upload-dropzone { border:2px dashed var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); text-align:center; background:#f8fafc; display:flex; flex-direction:column; align-items:center; gap: var(--space-3); }
.upload-dropzone:hover { border-color: var(--color-accent); }
.upload-dropzone p { margin:0; }
.upload-illustration { font-size:2.5rem; }
.page-header + .order-form .form-card:first-of-type { margin-top:0; }
.materials-list { display:flex; flex-direction:column; gap: var(--space-3); }
.material-row { display:grid; grid-template-columns: minmax(0, 1fr) 140px auto; gap: var(--space-3); align-items:end; padding: var(--space-3); background:#f8fafc; border:1px dashed var(--color-border); border-radius: var(--radius-md); }
.material-row .field { margin:0; }
.material-row .btn-ghost { height:42px; align-self:center; }
.materials-actions { margin-top: var(--space-3); display:flex; align-items:center; gap: var(--space-3); flex-wrap:wrap; }
.radio-group { display:flex; align-items:center; gap: var(--space-4); flex-wrap:wrap; }
.fieldset-label { display:block; font-weight:600; font-size:0.85rem; color: var(--color-text); margin-bottom: var(--space-2); }
@media (max-width: 900px) {
.summary-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.metric-summary-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.metrics-columns { grid-template-columns: 1fr; }
.metrics-filter { max-width:100%; }
.metrics-filter-controls { flex-direction:column; align-items:stretch; }
.metrics-filter .btn-primary { width:100%; }
.trend-item { grid-template-columns: 1fr auto; }
.filters-form { padding: var(--space-3); }
.filters-actions { width:100%; justify-content:flex-start; margin-left:0; }
.filters-group { min-width:140px; }
.filters-group.checkbox { padding-top:12px; min-width:140px; }
.filters-group.checkbox label.inline { font-size:0.75rem; }
.input-grid { grid-template-columns: 1fr; }
.form-card { padding: var(--space-4); }
.form-actions { flex-direction:column; align-items:stretch; }
.form-actions .btn-secondary,
.form-actions .btn-primary { width:100%; text-align:center; }
.material-row { grid-template-columns: 1fr; }
.material-row .btn-ghost { justify-content:flex-start; }
.finance-grid { grid-template-columns: 1fr; }
.finance-sidebar { order:-1; }
.finance-summary-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.finance-order-header { grid-template-columns: 1fr; gap: var(--space-2); }
.finance-order-amounts { align-items:flex-start; }
.finance-filter-actions { flex-wrap:wrap; }
}
@media (max-width: 720px) {
header { flex-direction:column; align-items:flex-start; gap: var(--space-3); }
.main-nav { flex-direction:column; align-items:flex-start; gap: var(--space-3); width:100%; }
.nav-links { width:100%; }
.nav-user { align-self:flex-end; }
}
/* Tighter brand sizing on very small screens */
@media (max-width: 640px) {
header h1 { font-size: 1.05rem; }
}
@media (max-width: 600px) {
.finance-filters { grid-template-columns: 1fr; }
.finance-filter-field.stretch { grid-column: span 1; }
.finance-order summary { padding: var(--space-3); }
.finance-order-body { padding: var(--space-3); }
.finance-forms { grid-template-columns: 1fr; }
.finance-order-context { grid-template-columns: 1fr; }
}
/* Panel Filters */
.filters-bar { background: var(--color-surface); padding: var(--space-3); border:1px solid var(--color-border); border-radius: var(--radius-md); display:flex; flex-wrap:wrap; gap: var(--space-3); align-items:flex-end; box-shadow: var(--shadow-sm); }
.filters-bar label { font-size: 0.75rem; text-transform:uppercase; letter-spacing:0.5px; color: var(--color-text-light); display:block; margin-bottom:2px; }
.filters-bar input[type=text], .filters-bar select { padding: var(--space-2); border:1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; min-width:140px; font-size:0.85rem; }
.filters-bar button { background: var(--color-accent); color:#fff; border:none; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); cursor:pointer; font-weight:600; letter-spacing:0.5px; font-size:0.75rem; }
.filters-bar button:hover { background: var(--color-accent-hover); }
.view-options { display:flex; gap:10px; align-items:center; }
.view-toggle { display:flex; align-items:center; gap:6px; font-size:0.7rem; color: var(--color-text-light); text-transform:uppercase; letter-spacing:0.4px; }
.view-toggle input { accent-color: var(--color-accent); cursor:pointer; }
/* Table */
table { width:100%; border-collapse: collapse; background: var(--color-surface); margin-top: var(--space-4); box-shadow: var(--shadow-sm); }
table.orders-table { margin-top:0; }
thead th { text-align:left; font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; padding: var(--space-2) var(--space-3); background: var(--color-accent-soft); border-bottom:1px solid var(--color-border); position:sticky; top:0; z-index:3; }
tbody td { padding: var(--space-2) var(--space-3); font-size:0.8rem; border-bottom:1px solid var(--color-border); vertical-align:middle; }
tbody tr:hover { background: #f1f5f9; }
/* Inline form controls */
tbody input[type=text], tbody input[type=date], tbody select { width:100%; box-sizing:border-box; padding: var(--space-1) var(--space-2); font-size:0.75rem; border:1px solid var(--color-border); border-radius: var(--radius-sm); background:#fff; }
/* Assignment select styling */
.assignment-select {
min-width: 180px;
max-width: 220px;
font-size: 0.8rem;
}
.phase-assignment-select {
width: 100%;
max-width: 200px;
font-size: 0.75rem;
padding: 4px 8px;
border: 1px solid #cbd5e1;
border-radius: 4px;
background: white;
margin-bottom: 4px;
}
.phase-assignment-select:focus {
outline: 2px solid var(--color-accent);
outline-offset: 1px;
}
.phase-active-select {
font-size:0.65rem;
padding:2px 6px;
border:1px solid #cbd5e1;
border-radius:4px;
background:#ffffff;
max-width:180px;
}
.phase-active-select:focus { outline:2px solid #2563eb; outline-offset:1px; }
.phase-active-control { display:flex; gap:8px; align-items:center; margin-left:auto; }
.phase-active-label { display:flex; align-items:center; gap:4px; font-size:0.6rem; font-weight:600; color: var(--color-text-light); }
.phase-active-text { text-transform:uppercase; letter-spacing:0.5px; }
.phase-complete-switch { display:flex; align-items:center; gap:4px; font-size:0.6rem; color: var(--color-text-light); cursor:pointer; }
.phase-complete-switch input { margin:0; }
.phase-complete-switch:hover { color: var(--color-text); }
.phase-status-select {
width: 100%;
max-width: 140px;
font-size: 0.7rem;
padding: 3px 6px;
border: 1px solid #cbd5e1;
border-radius: 4px;
background: #f8fafc;
margin-bottom: 4px;
}
.phase-status-select:focus {
outline: 2px solid #6366f1;
outline-offset: 1px;
}
.phase-chip.phase-status-en_proceso {
border: 2px solid #2563eb;
box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}
.phase-chip.phase-status-completada {
opacity: 0.85;
}
.phase-chip.phase-status-pausada {
border: 2px dashed #f59e0b;
}
tbody button { background: var(--color-accent); color:#fff; border:none; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); cursor:pointer; font-size:0.7rem; white-space:nowrap; transition:all 0.2s ease; }
tbody button:hover { background: var(--color-accent-hover); transform:translateY(-1px); box-shadow:0 2px 8px rgba(59,130,246,0.3); }
tbody button:active { transform:translateY(0); }
/* Allow Acciones icon buttons to keep their own palette */
tbody td[data-label="Acciones"] button.btn-icon {
background: transparent;
color: inherit;
padding:0;
border:none;
box-shadow:0 1px 2px rgba(15,23,42,0.08);
width:32px; height:32px;
border-radius:8px;
}
.btn-save {
font-weight:600;
white-space:nowrap;
display:inline-flex;
align-items:center;
gap:6px;
font-size:0.75rem;
padding:6px 12px;
}
/* Icon-only compact buttons */
.btn-icon {
display:inline-flex; align-items:center; justify-content:center;
width:30px; height:30px; padding:0; border:none;
background: var(--color-accent); color:#fff; border-radius:6px;
font-size:1rem; cursor:pointer; transition: var(--transition);
box-shadow:0 1px 2px rgba(15,23,42,0.08);
}
.btn-icon:hover { background: var(--color-accent-hover); transform:translateY(-1px); box-shadow:0 4px 10px rgba(59,130,246,0.25); }
.btn-icon:active { transform:translateY(0); box-shadow:0 1px 2px rgba(15,23,42,0.12); }
.btn-icon[disabled] { opacity:0.5; cursor:not-allowed; }
.btn-icon-outline {
background:#fff; color: var(--color-text-light); border:1px solid var(--color-border);
}
.btn-icon-outline:hover { background:#f1f5f9; color: var(--color-text); }
/* Compact, color-coded actions column */
.order-actions { display:flex; flex-direction:column; align-items:center; gap:8px; }
.order-actions .action-stack { display:flex; flex-direction:column; align-items:center; gap:8px; }
.order-actions .btn-icon {
margin:0;
width:32px; height:32px;
border-radius:8px;
background:transparent;
color:inherit;
}
.order-actions .btn-icon i { font-size:1rem; }
.btn-action-edit { background:#fef3c7 !important; color:#92400e !important; }
.btn-action-edit:hover { background:#fde68a !important; color:#7c2d12 !important; }
.btn-action-save { background:#bbf7d0 !important; color:#166534 !important; }
.btn-action-save:hover { background:#86efac !important; color:#14532d !important; }
.btn-action-cancel { background:#e2e8f0 !important; color:#334155 !important; border:1px solid #cbd5e1 !important; }
.btn-action-cancel:hover { background:#cbd5e1 !important; color:#1f2937 !important; }
.btn-action-attach { background:#e0e7ff !important; color:#1e3a8a !important; }
.btn-action-attach:hover { background:#c7d2fe !important; color:#1e3a8a !important; }
.btn-action-locked { background:#cbd5e1 !important; color:#475569 !important; }
.btn-action-locked:hover { background:#cbd5e1 !important; color:#475569 !important; }
/* Notes button badge dot */
.btn-notes { position: relative; }
.btn-notes .notes-dot { position:absolute; right:-2px; top:-2px; width:10px; height:10px; border-radius:999px; background:#ef4444; border:2px solid #fff; display:none; }
.btn-notes.has-notes .notes-dot { display:block; }
td[data-label="Acciones"] { white-space:normal; min-width:98px; text-align:center; }
td[data-label="Acciones"] .btn-icon { margin:0; }
td[data-label="Acciones"] .dirty-indicator { display:block; margin-top:2px; font-size:0.55rem; letter-spacing:0.5px; text-align:right; }
.btn-save:disabled {
opacity:0.6;
cursor:not-allowed;
}
.btn-save.dirty {
background: var(--color-warning);
border:1px solid #d97706;
box-shadow:0 0 0 3px rgba(245,158,11,0.2);
animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { box-shadow:0 0 0 3px rgba(245,158,11,0.2); }
50% { box-shadow:0 0 0 5px rgba(245,158,11,0.3); }
}
/* Ensure Acciones cell keeps buttons contained */
td[data-label="Acciones"] form { display:flex; flex-direction:column; gap:6px; align-items:flex-end; margin:0; }
/* In compact mode, never clip action buttons; wrap if needed */
.orders-table.orders-compact td[data-label="Acciones"] {
white-space: normal;
overflow: visible;
text-overflow: initial;
min-width: 98px;
}
.cell-primary { font-weight:600; color: var(--color-text); }
.cell-meta { font-size:0.72rem; color: var(--color-text-light); margin-top:2px; }
.cell-tags { display:flex; gap: var(--space-2); flex-wrap:wrap; margin-top: var(--space-2); }
.cell-tags-right { justify-content:flex-end; }
.chip { display:inline-flex; align-items:center; padding:2px 10px; border-radius:999px; font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; }
.chip-express { background:#fef3c7; color:#92400e; }
.chip-urgent { background: var(--color-danger-bg); color: var(--color-danger); }
.status-pill { display:inline-flex; align-items:center; justify-content:center; padding:4px 12px; border-radius:999px; font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.status-pill.estado-recibida { background:#e2e8f0; color:#334155; }
.status-pill.estado-en_proceso { background:#fef9c3; color:#92400e; }
.status-pill.estado-ajuste { background:linear-gradient(120deg, #fff1f2 0%, #fef3c7 100%); color:#9f1239; box-shadow:0 1px 0 rgba(255,255,255,0.7) inset; }
.status-pill.estado-terminada { background:#bbf7d0; color:#166534; }
.status-pill.estado-entregada { background:#e0e7ff; color:#3730a3; }
.status-pill.estado-cancelada { background:#fee2e2; color:#b91c1c; }
.balance-chip { display:inline-flex; align-items:center; justify-content:center; padding:2px 12px; border-radius:999px; font-size:0.65rem; font-weight:600; text-transform:uppercase; letter-spacing:0.45px; }
.balance-pendiente { background: var(--color-danger-bg); color: var(--color-danger); }
.balance-abonado { background:#fef3c7; color:#92400e; }
.balance-pagado { background:#dcfce7; color:#15803d; }
.empty-state { text-align:center; background: var(--color-surface); border:1px dashed var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); margin-top: var(--space-4); }
.empty-state h3 { margin:0 0 var(--space-2); font-size:1.2rem; }
.empty-state p { margin:0 0 var(--space-4); color: var(--color-text-light); }
.dirty-indicator { display:none; margin-left: var(--space-2); font-size:0.65rem; font-weight:600; color: var(--color-warning); text-transform:uppercase; letter-spacing:0.5px; }
form[data-dirty="true"] .dirty-indicator { display:inline-block; }
/* Notes modal */
.notes-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.notes-modal-overlay[aria-hidden="false"] { display: flex; }
.notes-modal { width: min(720px, 96vw); max-height: 90vh; overflow: auto; background: #fff; border-radius: 10px; box-shadow: 0 20px 60px rgba(2,6,23,0.3); border: 1px solid var(--color-border); }
.notes-modal-header { display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom: 1px solid var(--color-border); }
.notes-modal-header h3 { margin: 0; font-size: 1rem; color: var(--color-text); }
.notes-modal-body { display:flex; flex-direction:column; gap: 12px; padding: 12px 16px; }
.notes-field { display:flex; flex-direction:column; gap: 6px; }
.notes-field span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-light); }
.notes-field textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 0.85rem; border: 1px solid var(--color-border); border-radius: 6px; background: #fff; }
.notes-field textarea[readonly] { background: #f8fafc; color: #64748b; }
.notes-modal-actions { display:flex; gap: 8px; justify-content:flex-end; padding: 12px 16px; border-top: 1px solid var(--color-border); }
.notes-modal-actions .btn-primary { background: var(--color-accent); color:#fff; border:none; padding: 8px 12px; border-radius: 6px; font-size:0.85rem; font-weight:600; cursor:pointer; }
.notes-modal-actions .btn-primary:hover { background: var(--color-accent-hover); }
.notes-modal-actions .btn-secondary { background:#fff; color: var(--color-text); border:1px solid var(--color-border); padding: 8px 12px; border-radius: 6px; font-size:0.85rem; font-weight:600; cursor:pointer; }
.notes-modal-actions .btn-secondary:hover { background:#f8fafc; }
/* Small toast notification */
.toast-notice { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: rgba(15,23,42,0.95); color: #fff; padding: 10px 14px; border-radius: 8px; font-size: 0.85rem; box-shadow: 0 6px 20px rgba(2,6,23,0.3); z-index: 1100; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.toast-notice.show { opacity: 1; }
/* Status & Priority Badges */
.badge { display:inline-block; padding:2px 6px; font-size:0.65rem; font-weight:600; border-radius: var(--radius-sm); letter-spacing:0.5px; }
.badge.estado-recibida, .status-recibida { background:#e2e8f0; color:#334155; }
.badge.estado-en_proceso, .status-en_proceso { background:#fef9c3; color:#92400e; }
.badge.estado-ajuste, .status-ajuste { background:linear-gradient(120deg, #fff1f2 0%, #fef3c7 100%); color:#9f1239; }
.badge.estado-terminada, .status-terminada { background:#bbf7d0; color:#166534; }
.badge.estado-entregada, .status-entregada { background:#e0e7ff; color:#3730a3; }
.badge.estado-cancelada, .status-cancelada { background:#fee2e2; color:#b91c1c; }
.prioridad-normal { background:#e0f2fe; color:#0369a1; }
.prioridad-urgente { background: var(--color-danger-bg); color: var(--color-danger); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(220,38,38,0.6);} 70% { box-shadow:0 0 0 6px rgba(220,38,38,0);} 100% { box-shadow:0 0 0 0 rgba(220,38,38,0);} }
/* Pipeline Progress - Compact Version */
.pipeline { display:flex; gap:3px; align-items:center; flex-wrap: wrap; margin-top:4px; }
.stage { position:relative; padding:3px 8px; font-size:0.6rem; font-weight:600; border-radius:3px; background: var(--stage-bg, #e2e8f0); color: var(--stage-fg, #475569); border: 1px solid var(--stage-border, #cbd5e1); cursor:pointer; transition: var(--transition); text-transform:uppercase; letter-spacing:0.3px; white-space:nowrap; }
.stage:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 1px 3px rgba(0,0,0,0.12); filter: brightness(1.05); }
.stage:disabled { cursor:not-allowed; opacity:0.5; }
/* Stage base palette */
.stage.stage-recibida { --stage-bg:#f1f5f9; --stage-fg:#374151; --stage-border:#cbd5e1; }
.stage.stage-en_proceso { --stage-bg:#fef3c7; --stage-fg:#92400e; --stage-border:#fcd34d; }
.stage.stage-ajuste { --stage-bg:#fff1f2; --stage-fg:#9f1239; --stage-border:#fecdd3; box-shadow:0 0 0 1px #ffe4e6 inset; }
.stage.stage-terminada { --stage-bg:#dcfce7; --stage-fg:#166534; --stage-border:#86efac; }
.stage.stage-entregada { --stage-bg:#e0e7ff; --stage-fg:#4338ca; --stage-border:#c7d2fe; }
/* Stage states */
.stage.active { background:#2563eb; color:#fff; border-color:#1d4ed8; box-shadow: 0 0 0 2px rgba(37,99,235,0.15); }
.stage.done { background:#16a34a; color:#ecfdf5; border-color:#15803d; }
.stage.next { background:#f97316; color:#fff; border-color:#ea580c; animation: nudge 1.4s ease-in-out infinite; }
.stage.blocked { background:#e5e7eb; color:#6b7280; border-color:#d1d5db; }
@keyframes nudge { 0% { transform: translateY(0); box-shadow: 0 1px 3px rgba(0,0,0,0.12); } 50% { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(249,115,22,0.25);} 100% { transform: translateY(0); box-shadow: 0 1px 3px rgba(0,0,0,0.12);} }
.status-subnote { margin-top:8px; padding:8px 10px; border-radius:12px; border:1px solid #e2e8f0; background:#f8fafc; display:flex; align-items:center; gap:10px; font-size:0.72rem; line-height:1.2; flex-wrap:wrap; }
.status-subnote .cta-copy { display:flex; flex-direction:column; flex:1; min-width:180px; }
.status-subnote.rework-flag { background:linear-gradient(135deg, #fff1f2, #fef3c7); border-color:#fecdd3; color:#9f1239; box-shadow:0 12px 24px rgba(255,241,242,0.6) inset; }
.status-subnote.rework-cta { background:linear-gradient(135deg, #ecfeff, #eff6ff); border-color:#bae6fd; color:#0f172a; justify-content:flex-start; flex-wrap:wrap; align-items:center; gap:8px; }
.status-subnote i { color:inherit; }
.pill-action { border:none; background:#0ea5e9; color:#fff; border-radius:999px; padding:6px 12px; font-weight:700; font-size:0.7rem; display:inline-flex; align-items:center; gap:6px; cursor:pointer; box-shadow:0 8px 20px rgba(14,165,233,0.25); transition: var(--transition); flex-shrink:0; }
.pill-action:hover { transform: translateY(-1px); box-shadow:0 10px 24px rgba(14,165,233,0.35); }
.pill-action:focus { outline:2px solid #0ea5e9; outline-offset:2px; }
.pill-action:disabled { opacity:0.6; cursor:not-allowed; box-shadow:none; }
.pill-action.pill-compact { padding:6px 8px; }
/* Column customizer */
.columns-toggle { margin-left:auto; }
.columns-panel { position:absolute; right: var(--space-5); top: calc(var(--space-5) + 40px); background: var(--color-surface); border:1px solid var(--color-border); padding: var(--space-3); border-radius: var(--radius-md); width:220px; box-shadow: var(--shadow-md); z-index:10; }
.columns-panel h4 { margin:0 0 var(--space-2); font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.columns-panel label { display:flex; align-items:center; gap:6px; font-size:0.7rem; margin-bottom:4px; }
/* Resizable columns */
th { position:relative; }
th .resize-handle { position:absolute; top:0; right:0; bottom:0; width:5px; cursor:col-resize; user-select:none; background:transparent; transition:background 0.15s; }
th .resize-handle:hover, th .resize-handle.resizing { background:rgba(37,99,235,0.3); }
th.resizing { user-select:none; }
/* Utility */
.flex { display:flex; }
.gap-2 { gap: var(--space-2); }
.hidden { display:none !important; }
.text-right { text-align:right; }
.w-6rem { width:6rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); border:0; }
.estado-cell { min-width:160px; max-width:200px; }
.estado-header { display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.status-chip { font-size:0.65rem; text-transform:uppercase; padding:3px 8px; }
.status-chip, .priority-chip { display:inline-flex; align-items:center; justify-content:center; padding:4px 10px; border-radius:999px; font-weight:600; letter-spacing:0.4px; }
.priority-chip { font-size:0.7rem; text-transform:uppercase; }
.priority-normal { background:#e0f2fe; color:#0369a1; }
.priority-urgente { background:#fee2e2; color:#b91c1c; }
/* Phase summaries */
.phase-cell { min-width:220px; }
.phase-current { font-size:0.72rem; color: var(--color-text-light); margin-bottom: var(--space-1); display:flex; gap: var(--space-1); align-items:center; }
.phase-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: var(--space-2); }
.phase-list.is-collapsed li:nth-child(n+4) { display:none; }
.phase-chip { border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2); background:#f8fafc; display:flex; flex-direction:column; gap: var(--space-1); box-shadow: var(--shadow-sm); }
.phase-chip-main { display:flex; flex-wrap:wrap; gap: var(--space-2); align-items:center; font-size:0.75rem; font-weight:600; color: var(--color-text); }
.phase-name { text-transform:capitalize; }
.phase-status-label { font-size:0.7rem; font-weight:600; color: var(--color-text-light); letter-spacing:0.4px; text-transform:uppercase; }
.phase-order { font-size:0.65rem; color: var(--color-text-light); background: rgba(148,163,184,0.18); border-radius:999px; padding:1px 8px; }
.phase-chip-meta { display:flex; flex-wrap:wrap; gap: var(--space-2); font-size:0.7rem; color: var(--color-text-light); align-items:center; }
.phase-tech { font-weight:600; color: var(--color-text); }
.phase-tech-unassigned { color: var(--color-warning); }
.phase-dates { font-size:0.7rem; color: var(--color-text-light); }
.phase-toggle { margin-top: var(--space-2); background: transparent; border:1px dashed var(--color-border); color: var(--color-accent); padding:4px 10px; font-size:0.7rem; border-radius: var(--radius-md); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.phase-toggle:hover { border-color: var(--color-accent); }
.phase-chip.phase-status-pendiente { border-color:#e2e8f0; background:#f8fafc; }
.phase-chip.phase-status-en_proceso { border-color:#fcd34d; background:#fff7ed; }
.phase-chip.phase-status-pausada { border-color:#cbd5e1; background:#f1f5f9; }
.phase-chip.phase-status-completada { border-color:#4ade80; background:#ecfdf5; }
.phase-chip.phase-status-cancelada { border-color:#fecaca; background:#fef2f2; }
/* Orders table compact layout */
.orders-table.orders-compact { table-layout: fixed; width: 100%; }
.orders-table.orders-compact th,
.orders-table.orders-compact td { padding: 6px 8px; }
.orders-table.orders-compact th { font-size: 0.72rem; letter-spacing: 0.2px; }
.orders-table.orders-compact td { font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Allow wrapping for text-heavy columns to improve readability when resized */
.orders-table.orders-compact td[data-label="Piezas"] {
max-width: 150px;
white-space: normal;
overflow-wrap: anywhere;
text-overflow: initial;
line-height: 1.25;
}
.orders-table.orders-compact td[data-label="Doctor"],
.orders-table.orders-compact td[data-label="Trabajo"],
.orders-table.orders-compact td[data-label="Comentarios"],
.orders-table.orders-compact td[data-label="Notas clínica"],
.orders-table.orders-compact td[data-label="Notas laboratorio"] {
white-space: normal;
overflow: visible;
text-overflow: initial;
overflow-wrap: anywhere;
}
.orders-table.orders-dense th,
.orders-table.orders-dense td {
padding: 4px 6px;
font-size: 0.75rem;
line-height: 1.2;
}
.orders-table.orders-wrap td {
white-space: normal;
overflow-wrap: anywhere;
text-overflow: initial;
}
.orders-table td[data-label="Piezas"] {
max-width: 180px;
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.3;
}
.orders-table.orders-compact td[data-label="Sel"],
.orders-table.orders-compact th:first-child { width: 42px; min-width: 42px; }
.orders-table.orders-compact td[data-label="Express"],
.orders-table.orders-compact th:has(> :where(span,i)) { text-align: center; }
/* Estado column vertical pipeline to save horizontal space */
.orders-table.orders-compact .estado-cell { min-width: 150px; max-width: 180px; }
.orders-table.orders-compact .estado-cell .estado-header { gap: 4px; margin-bottom: 2px; }
.orders-table.orders-compact .estado-cell .pipeline { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 2px; }
.orders-table.orders-compact .estado-cell .stage { padding: 3px 8px; font-size: 0.58rem; }
/* Large screen optimizations: let table auto-size and expand main width */
@media (min-width: 1400px) {
.orders-table.orders-compact { table-layout: auto; }
}
@media (min-width: 1600px) {
main { max-width: 1600px; }
}
@media (min-width: 1920px) {
main { max-width: 1800px; }
}
/* Phase catalog admin */
.phase-admin { display:grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-bottom: var(--space-5); }
.phase-card { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); display:flex; flex-direction:column; gap: var(--space-3); }
.phase-card header { display:flex; justify-content:space-between; align-items:flex-start; gap: var(--space-3); }
.phase-card-body { display:flex; flex-direction:column; gap: var(--space-3); }
.phase-type-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: var(--space-2); }
.phase-type-row { display:grid; grid-template-columns: minmax(0,1fr) auto auto; gap: var(--space-2); align-items:center; border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); background:#f8fafc; }
.phase-type-info { display:flex; flex-direction:column; gap:2px; }
.phase-type-meta { font-size:0.75rem; color: var(--color-text-light); }
.phase-type-status { font-size:0.75rem; font-weight:600; }
.phase-type-status.is-active { color: var(--color-success); }
.phase-type-status.is-inactive { color: var(--color-danger); }
.phase-type-form .field-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.phase-type-form label { font-size:0.8rem; color: var(--color-text); font-weight:600; display:flex; flex-direction:column; gap: var(--space-1); }
.phase-type-form input[type=text],
.phase-type-form input[type=number] { border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2); font-size:0.9rem; }
.phase-type-form input.is-readonly { background:#f1f5f9; cursor:not-allowed; }
.inline-control { display:flex; align-items:center; gap: var(--space-2); font-size:0.85rem; color: var(--color-text-light); }
.phase-job-picker { display:flex; flex-direction:column; gap: var(--space-2); }
.phase-job-picker label { font-size:0.8rem; font-weight:600; }
.phase-job-picker select { border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2); }
.phase-assigned-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: var(--space-2); }
.phase-assigned-item { display:flex; justify-content:space-between; align-items:center; gap: var(--space-3); border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); background:#f8fafc; }
.phase-assigned-info { display:flex; flex-direction:column; gap:2px; }
.phase-assigned-controls { display:flex; gap: var(--space-1); }
.phase-assigned-controls button { border:1px solid var(--color-border); background:#fff; border-radius: var(--radius-sm); width:32px; height:32px; cursor:pointer; }
.phase-assigned-controls button:hover { background: var(--color-accent-soft); border-color: var(--color-accent); }
.phase-empty { font-size:0.85rem; color: var(--color-text-light); margin: var(--space-1) 0; }
.phase-add { display:flex; flex-direction:column; gap: var(--space-2); }
.phase-add-controls { display:flex; gap: var(--space-2); align-items:center; flex-wrap:wrap; }
.phase-add select { border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2); min-width:220px; }
.phase-actions { display:flex; gap: var(--space-2); justify-content:flex-end; flex-wrap:wrap; }
.phase-feedback { font-size:0.8rem; color: var(--color-text-light); min-height:1em; }
@media (max-width: 640px) {
.phase-type-row { grid-template-columns: minmax(0,1fr); }
.phase-assigned-item { flex-direction:column; align-items:flex-start; }
.phase-assigned-controls { width:100%; }
.phase-assigned-controls button { flex:1; }
.phase-add-controls { flex-direction:column; align-items:stretch; }
.phase-actions { flex-direction:column; align-items:stretch; }
}
.finance-filters { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); align-items:end; background: var(--color-surface); border:1px solid var(--color-border); padding: var(--space-4); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: var(--space-5); }
.finance-filter-field { display:flex; flex-direction:column; gap: var(--space-1); }
.finance-filter-field label { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.4px; color: var(--color-text-light); }
.finance-filter-field input,
.finance-filter-field select { border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2); font-size:0.85rem; background:#fff; }
.finance-filter-field.stretch { grid-column: span 2; }
.finance-filter-actions { display:flex; gap: var(--space-2); align-items:center; }
.finance-summary-grid { display:grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: var(--space-5); }
.finance-grid { display:grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-5); align-items:start; }
.finance-orders { display:flex; flex-direction:column; gap: var(--space-3); }
.finance-order { border:1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); overflow:hidden; }
.finance-order summary { list-style:none; cursor:pointer; padding: var(--space-4); background: rgba(148,163,184,0.12); display:flex; flex-direction:column; gap: var(--space-3); }
.finance-order summary::-webkit-details-marker { display:none; }
.finance-order[open] > summary { border-bottom:1px solid var(--color-border); background: var(--color-surface); }
.finance-order-header { display:grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-4); align-items:center; }
.finance-order-main h3 { margin:0; font-size:1.1rem; }
.finance-order-main p { margin:0; color: var(--color-text-light); font-size:0.85rem; }
.finance-order-tags { display:flex; flex-wrap:wrap; gap: var(--space-2); margin-top: var(--space-2); }
.finance-order-tag { background: rgba(148,163,184,0.16); color: var(--color-text-light); border:1px solid rgba(148,163,184,0.3); border-radius:999px; padding:2px 12px; font-size:0.65rem; font-weight:600; text-transform:uppercase; letter-spacing:0.45px; }
.finance-order-status { display:flex; flex-direction:column; gap: var(--space-2); align-items:flex-start; }
.finance-order-amounts { display:flex; flex-direction:column; align-items:flex-end; gap: var(--space-1); font-size:0.8rem; }
.finance-order-amounts .total { font-size:1.2rem; font-weight:700; color: var(--color-text); }
.finance-order-amounts .balance { font-weight:600; }
.balance-pending { color: var(--color-danger); }
.balance-credit { color: var(--color-success); }
.balance-settled { color: var(--color-text-light); }
.finance-order-body { display:flex; flex-direction:column; gap: var(--space-4); padding: var(--space-4); }
.finance-order-meta { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-2); font-size:0.8rem; color: var(--color-text-light); }
.finance-order-meta strong { color: var(--color-text); }
.finance-meta-materials { grid-column: 1 / -1; }
.finance-notes-inline { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); font-size:0.8rem; color: var(--color-text); }
.finance-notes-inline strong { display:block; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.4px; color: var(--color-text-light); margin-bottom:4px; }
.finance-notes-inline p { margin:0; line-height:1.4; }
.finance-forms { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.finance-form { display:flex; flex-direction:column; gap: var(--space-2); background: rgba(148,163,184,0.08); border:1px solid rgba(148,163,184,0.25); border-radius: var(--radius-md); padding: var(--space-3); box-shadow: inset 0 0 0 1px rgba(148,163,184,0.1); }
.finance-form h4 { margin:0; font-size:0.95rem; }
.finance-form label { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.4px; color: var(--color-text-light); }
.finance-form input, .finance-form textarea { border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2); font-size:0.85rem; background:#fff; }
.finance-form textarea { resize:vertical; }
.finance-form .form-row { display:flex; flex-direction:column; gap: var(--space-1); }
.finance-form .btn-primary, .finance-form .btn-secondary { align-self:flex-start; }
.field-hint { font-size:0.7rem; color: var(--color-text-light); margin:0; }
/* Collector Dashboard */
/* ============================================
Collector Dashboard - Mobile-First Design
============================================ */
.collector-dashboard { display:flex; flex-direction:column; gap: var(--space-4); padding-bottom: var(--space-6); }
/* Hero Section with Gamification */
.collector-hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: var(--radius-lg); padding: var(--space-5); color:#fff; box-shadow: 0 10px 40px rgba(102,126,234,0.3); }
.collector-hero h1 { margin:0 0 var(--space-1); font-size:1.75rem; font-weight:800; }
.collector-hero__subtitle { margin:0; font-size:0.95rem; opacity:0.9; }
/* Streak Display */
.collector-streak { display:flex; align-items:center; gap: var(--space-3); padding: var(--space-4); background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border-radius: var(--radius-md); margin-top: var(--space-4); }
.collector-streak__badge { font-size:2.5rem; line-height:1; }
.collector-streak__badge.is-fire { animation: fireGlow 1.5s ease-in-out infinite; }
.collector-streak__badge.is-muted { opacity:0.4; }
.collector-streak__info { flex:1; }
.collector-streak__count { display:block; font-size:2rem; font-weight:800; line-height:1; }
.collector-streak__label { display:block; font-size:0.75rem; opacity:0.8; text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }
.collector-streak__message { font-size:0.85rem; font-weight:600; background: rgba(255,255,255,0.2); padding:6px 12px; border-radius:999px; white-space:nowrap; }
@keyframes fireGlow {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(255,150,0,0.8)); }
50% { transform: scale(1.1); filter: drop-shadow(0 0 16px rgba(255,100,0,1)); }
}
/* Progress Bar */
.collector-progress { position:relative; width:100%; height:32px; background: rgba(255,255,255,0.2); border-radius:999px; overflow:hidden; margin-top: var(--space-4); }
.collector-progress__bar { position:absolute; inset:0; background: linear-gradient(90deg, #10b981, #34d399); transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1); width: var(--progress, 0%); box-shadow: inset 0 -2px 4px rgba(0,0,0,0.1); }
.collector-progress__label { position:absolute; left:0; right:0; top:50%; transform: translateY(-50%); text-align:center; font-size:0.85rem; font-weight:700; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.3); z-index:1; }
/* Stats Grid */
.collector-stats-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
.collector-stat { background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border-radius: var(--radius-md); padding: var(--space-3); display:flex; align-items:center; gap: var(--space-2); }
.collector-stat__icon { font-size:1.75rem; line-height:1; }
.collector-stat__content { flex:1; }
.collector-stat__value { display:block; font-size:1.5rem; font-weight:800; line-height:1; }
.collector-stat__label { display:block; font-size:0.7rem; opacity:0.85; text-transform:uppercase; letter-spacing:0.4px; margin-top:4px; }
/* Flash Messages */
.collector-flash { display:flex; align-items:center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-weight:600; font-size:0.9rem; box-shadow: var(--shadow-md); transition: all 0.3s ease; }
.collector-flash__icon { font-size:1.25rem; line-height:1; }
.collector-flash.is-success { background:#d1fae5; color:#065f46; border:2px solid #10b981; }
.collector-flash.is-error { background:#fee2e2; color:#991b1b; border:2px solid #dc2626; }
/* Sections */
.collector-section { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.collector-section.is-primary { border-top:4px solid #3b82f6; }
.collector-section.is-warning { border-top:4px solid #f59e0b; }
.collector-section.is-success { border-top:4px solid #10b981; }
.collector-section__toggle { background:none; border:none; cursor:pointer; padding:0; width:100%; text-align:left; transition: all 0.2s ease; }
.collector-section__toggle:hover { opacity:0.8; }
.collector-section__toggle:focus { outline: 2px solid #3b82f6; outline-offset: 2px; border-radius: var(--radius-md); }
.collector-section__header { display:flex; align-items:center; gap: var(--space-2); justify-content:space-between; margin-bottom:0; }
.collector-section__title { display:flex; align-items:center; gap: var(--space-2); margin-bottom: var(--space-1); flex:1; }
.collector-section__icon { font-size:1.5rem; line-height:1; }
.collector-section__title h2 { margin:0; font-size:1.25rem; font-weight:700; flex:1; }
.collector-badge { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 8px; background:#3b82f6; color:#fff; border-radius:999px; font-size:0.75rem; font-weight:700; }
.collector-section__chevron { display:flex; align-items:center; font-size:1.25rem; transition: transform 0.3s ease; transform: rotate(0deg); }
.collector-section__toggle[aria-expanded="false"] .collector-section__chevron { transform: rotate(-90deg); }
.collector-section__subtitle { margin:0; font-size:0.85rem; color: var(--color-text-light); padding-left:0; }
.collector-section__content { max-height:100vh; overflow:hidden; transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease; opacity:1; padding-top: var(--space-3); }
.collector-section__toggle[aria-expanded="false"] + .collector-section__content { max-height:0; opacity:0; overflow:hidden; padding-top:0; }
/* Card List */
.collector-list { display:flex; flex-direction:column; gap: var(--space-3); margin:0; padding:0; list-style:none; }
.collector-list.is-compact .collector-card { padding: var(--space-3); }
.collector-section__content .collector-list { gap: var(--space-2); }
.collector-section__content .collector-card { margin:0; }
/* Cards - Optimized for Touch */
.collector-card { background:#fff; border:2px solid #e5e7eb; border-radius: var(--radius-lg); padding: var(--space-4); transition: all 0.2s ease; position:relative; }
.collector-card.is-ready { border-left:4px solid #3b82f6; }
.collector-card.is-collect { border-left:4px solid #f59e0b; }
.collector-card.is-delivered { border-left:4px solid #10b981; opacity:0.85; }
.collector-card__header { display:flex; align-items:center; gap: var(--space-3); margin-bottom: var(--space-3); }
.collector-card__avatar { width:48px; height:48px; border-radius:50%; background: linear-gradient(135deg, #667eea, #764ba2); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.25rem; font-weight:700; box-shadow: 0 2px 8px rgba(102,126,234,0.3); flex-shrink:0; }
.collector-card__avatar.is-success { background: linear-gradient(135deg, #10b981, #059669); }
.collector-card__info { flex:1; min-width:0; }
.collector-card__doctor { margin:0; font-size:1.05rem; font-weight:700; color: var(--color-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.collector-card__clinic { margin:2px 0 0; font-size:0.8rem; color: var(--color-text-light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.collector-card__badges { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.collector-badge.is-express { background:#fbbf24; color:#78350f; font-size:0.7rem; padding:4px 8px; font-weight:700; }
.collector-badge.is-urgent { background:#ef4444; color:#fff; font-size:0.7rem; padding:4px 8px; font-weight:700; animation: urgentPulse 2s ease infinite; }
@keyframes urgentPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); box-shadow: 0 0 0 4px rgba(239,68,68,0.2); }
}
/* Card Details */
.collector-card__details { display:flex; flex-direction:column; gap: var(--space-2); margin-bottom: var(--space-3); }
.collector-detail { display:flex; align-items:flex-start; gap: var(--space-2); }
.collector-detail__icon { font-size:1.15rem; line-height:1.4; flex-shrink:0; }
.collector-detail__content { flex:1; min-width:0; }
.collector-detail__label { display:block; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.5px; color: var(--color-text-light); margin-bottom:2px; }
.collector-detail__value { display:block; font-size:0.95rem; font-weight:600; color: var(--color-text); word-wrap:break-word; }
/* Financial Summary */
.collector-card__financial { background:#f8fafc; border:2px solid #e2e8f0; border-radius: var(--radius-md); padding: var(--space-3); }
.collector-card__financial.is-pending { background:#fef3c7; border-color:#fbbf24; }
.collector-financial-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; }
.collector-financial-row.is-highlight { font-size:1.05rem; font-weight:700; padding-top: var(--space-2); border-top:2px solid rgba(0,0,0,0.1); margin-top:4px; }
.collector-financial__label { color: var(--color-text-light); font-size:0.85rem; }
.collector-financial__value { font-weight:600; color: var(--color-text); }
.collector-financial__value.is-large { font-size:1.15rem; color:#dc2626; }
.collector-card__paid { display:flex; align-items:center; justify-content:center; gap: var(--space-2); padding: var(--space-3); background:#d1fae5; border-radius: var(--radius-md); }
.collector-paid__icon { font-size:1.25rem; }
.collector-paid__label { font-weight:600; color:#065f46; }
/* Card Actions - Large Touch Targets */
.collector-card__actions { display:grid; gap: var(--space-2); margin-top: var(--space-3); }
.collector-card__actions:has(.collector-btn:only-child) { grid-template-columns: 1fr; }
.collector-card__actions:has(.collector-btn:nth-child(2)) { grid-template-columns: 1fr 1fr; }
/* Delivered Card Compact View */
.collector-card.is-delivered .collector-card__header { margin-bottom: var(--space-2); }
.collector-card__summary { display:flex; align-items:center; gap:8px; font-size:0.9rem; color: var(--color-text-light); flex-wrap:wrap; }
.collector-dot { opacity:0.5; }
.collector-check { font-size:1.5rem; color:#10b981; line-height:1; }
.collector-empty { margin:0; padding: var(--space-5); text-align:center; font-size:0.9rem; color: var(--color-text-light); background:#f8fafc; border-radius: var(--radius-md); border:2px dashed #cbd5e1; }
/* Buttons - Large Touch-Friendly */
.collector-btn { display:flex; align-items:center; justify-content:center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border:none; border-radius: var(--radius-md); font-weight:600; font-size:0.95rem; cursor:pointer; transition: all 0.2s ease; text-decoration:none; min-height:48px; }
.collector-btn__icon { font-size:1.15rem; line-height:1; }
.collector-btn__label { flex:1; text-align:center; }
.collector-btn.is-primary { background: linear-gradient(135deg, #3b82f6, #2563eb); color:#fff; box-shadow: 0 2px 8px rgba(59,130,246,0.3); }
.collector-btn.is-primary:hover, .collector-btn.is-primary:focus { background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 4px 12px rgba(59,130,246,0.4); transform: translateY(-1px); }
.collector-btn.is-primary:active { transform: translateY(0); }
.collector-btn.is-secondary { background:#f1f5f9; color: var(--color-text); border:2px solid #cbd5e1; }
.collector-btn.is-secondary:hover { background:#e2e8f0; border-color:#94a3b8; }
.collector-btn.is-warning { background: linear-gradient(135deg, #f59e0b, #d97706); color:#fff; box-shadow: 0 2px 8px rgba(245,158,11,0.3); }
.collector-btn.is-warning:hover { background: linear-gradient(135deg, #d97706, #b45309); box-shadow: 0 4px 12px rgba(245,158,11,0.4); }
.collector-btn.is-success { background: linear-gradient(135deg, #10b981, #059669); color:#fff; box-shadow: 0 2px 8px rgba(16,185,129,0.3); }
.collector-btn.is-success:hover { background: linear-gradient(135deg, #059669, #047857); box-shadow: 0 4px 12px rgba(16,185,129,0.4); }
.collector-btn.is-ghost { background:transparent; color: var(--color-text-light); border:none; }
.collector-btn.is-ghost:hover { background:#f1f5f9; color: var(--color-text); }
.collector-btn.is-large { font-size:1rem; padding: var(--space-4); min-height:56px; }
.collector-btn.is-full { width:100%; }
.collector-btn:disabled { opacity:0.5; cursor:not-allowed; pointer-events:none; }
/* Modals */
.collector-modal { position:fixed; inset:0; display:flex; align-items:flex-end; justify-content:center; z-index:1000; opacity:0; pointer-events:none; transition: opacity 0.3s ease; }
.collector-modal.is-active { opacity:1; pointer-events:auto; }
.collector-modal__backdrop { position:absolute; inset:0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
.collector-modal__content { position:relative; background:#fff; border-radius: var(--radius-lg) var(--radius-lg) 0 0; width:100%; max-width:540px; max-height:90vh; overflow-y:auto; box-shadow: 0 -4px 24px rgba(0,0,0,0.2); z-index:1; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
.collector-modal.is-active .collector-modal__content { transform: translateY(0); }
.collector-modal__content.is-compact { max-height:auto; }
.collector-modal__header { display:flex; align-items:center; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3); border-bottom:2px solid #e5e7eb; }
.collector-modal__title-row { display:flex; align-items:center; gap: var(--space-2); flex:1; }
.collector-modal__icon { font-size:1.5rem; line-height:1; }
.collector-modal__header h2 { margin:0; font-size:1.25rem; font-weight:700; }
.collector-modal__close { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:none; background:#f1f5f9; border-radius:50%; font-size:1.5rem; line-height:1; color: var(--color-text); cursor:pointer; transition: all 0.2s ease; }
.collector-modal__close:hover { background:#e2e8f0; transform: rotate(90deg); }
.collector-modal__summary { margin:0; padding: var(--space-3) var(--space-4); background:#f8fafc; border-bottom:1px solid #e5e7eb; font-size:0.9rem; color: var(--color-text-light); font-weight:500; }
.collector-modal__message { display:flex; align-items:center; gap: var(--space-2); padding: var(--space-4); font-size:1rem; color: var(--color-text); line-height:1.5; }
.collector-modal__message-icon { font-size:1.5rem; line-height:1; }
.collector-modal__actions { padding: var(--space-4); display:flex; flex-direction:column; gap: var(--space-2); }
/* Form Styles */
.collector-form { padding: var(--space-4); display:flex; flex-direction:column; gap: var(--space-4); }
.collector-form__group { display:flex; flex-direction:column; gap: var(--space-2); }
.collector-form__label { display:flex; flex-direction:column; gap:4px; }
.collector-form__label-text { font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color: var(--color-text); }
.collector-form__label-hint { font-size:0.75rem; color: var(--color-text-light); font-weight:400; text-transform:none; letter-spacing:0; }
.collector-form__input-wrapper { position:relative; display:flex; align-items:center; }
.collector-form__prefix { position:absolute; left: var(--space-3); font-weight:600; color: var(--color-text-light); pointer-events:none; }
.collector-form__input, .collector-form__select, .collector-form__textarea { width:100%; padding: var(--space-3); border:2px solid #d1d5db; border-radius: var(--radius-md); font-size:1rem; transition: all 0.2s ease; }
.collector-form__input:focus, .collector-form__select:focus, .collector-form__textarea:focus { outline:none; border-color:#3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.collector-form__input.is-large { padding: var(--space-4); font-size:1.25rem; font-weight:600; padding-left:40px; }
.collector-form__textarea { resize:vertical; min-height:80px; font-family: var(--font-base); }
.collector-form__select { appearance:none; background-image: url('data:image/svg+xml;charset=UTF-8,'); background-repeat:no-repeat; background-position: right var(--space-3) center; padding-right:40px; }
.collector-form__details { border:none; margin-top: var(--space-2); }
.collector-form__summary { padding: var(--space-3); background:#f8fafc; border:2px solid #e5e7eb; border-radius: var(--radius-md); cursor:pointer; font-weight:600; font-size:0.85rem; color: var(--color-text); text-align:center; transition: all 0.2s ease; list-style:none; }
.collector-form__summary::-webkit-details-marker { display:none; }
.collector-form__summary:hover { background:#e5e7eb; }
.collector-form__details[open] .collector-form__summary { border-radius: var(--radius-md) var(--radius-md) 0 0; border-bottom-color:transparent; }
.collector-form__details-content { border:2px solid #e5e7eb; border-top:none; border-radius: 0 0 var(--radius-md) var(--radius-md); padding: var(--space-4); display:flex; flex-direction:column; gap: var(--space-4); }
/* Doctor Filter */
.collector-filter { background:#fff; border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: 0 2px 8px rgba(0,0,0,0.06); border:2px solid #e5e7eb; }
.collector-filter__header { display:flex; align-items:center; gap: var(--space-2); margin-bottom: var(--space-3); }
.collector-filter__icon { font-size:1.25rem; line-height:1; }
.collector-filter__header h3 { margin:0; font-size:1rem; font-weight:700; }
.collector-filter__controls { display:flex; gap: var(--space-2); align-items:stretch; }
.collector-filter__select { flex:1; padding: var(--space-3); border:2px solid #d1d5db; border-radius: var(--radius-md); font-size:0.95rem; font-weight:500; appearance:none; background:#fff url('data:image/svg+xml;charset=UTF-8,') no-repeat right var(--space-3) center; padding-right:40px; transition: all 0.2s ease; cursor:pointer; }
.collector-filter__select:focus { outline:none; border-color:#3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.collector-filter__clear { padding: var(--space-3) var(--space-4); background:#ef4444; color:#fff; border:none; border-radius: var(--radius-md); font-weight:600; font-size:0.9rem; cursor:pointer; display:flex; align-items:center; gap:6px; transition: all 0.2s ease; }
.collector-filter__clear:hover { background:#dc2626; transform: scale(1.02); }
.collector-filter__clear span:first-child { font-size:1.1rem; line-height:1; }
/* Order Info Button */
.collector-card__info-btn { position:absolute; top: var(--space-3); right: var(--space-3); display:flex; align-items:center; gap:6px; padding:8px 12px; background:rgba(59,130,246,0.1); border:2px solid rgba(59,130,246,0.3); border-radius: var(--radius-md); font-size:0.8rem; font-weight:600; color:#2563eb; cursor:pointer; transition: all 0.2s ease; }
.collector-card__info-btn:hover { background:#3b82f6; color:#fff; border-color:#3b82f6; transform: scale(1.05); }
.collector-card__info-icon { font-size:1rem; line-height:1; }
.collector-card__info-text { display:none; }
/* Order Details Modal Content */
.collector-details { padding: var(--space-4); display:flex; flex-direction:column; gap: var(--space-4); max-height:60vh; overflow-y:auto; }
.collector-details__section { padding-bottom: var(--space-3); border-bottom:1px solid #e5e7eb; }
.collector-details__section:last-child { border-bottom:none; }
.collector-details__section.is-highlight { background:linear-gradient(135deg, rgba(59,130,246,0.05), rgba(139,92,246,0.05)); padding: var(--space-3); border-radius: var(--radius-md); border:2px solid rgba(59,130,246,0.2); }
.collector-details__heading { display:flex; align-items:center; gap: var(--space-2); margin:0 0 var(--space-2); font-size:0.85rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color: var(--color-text-light); }
.collector-details__icon { font-size:1.15rem; line-height:1; }
.collector-details__value { margin:0; font-size:1rem; font-weight:500; color: var(--color-text); line-height:1.5; }
.collector-details__empty { margin:0; font-size:0.9rem; color: var(--color-text-light); font-style:italic; }
.collector-details__badge-section { display:flex; align-items:center; gap: var(--space-2); }
.collector-details__badge-text { font-size:0.9rem; font-weight:600; color: var(--color-text); }
.collector-details__materials { display:flex; flex-direction:column; gap: var(--space-2); }
.collector-details__material-item { display:flex; align-items:center; justify-content:space-between; padding: var(--space-2) var(--space-3); background:#f8fafc; border-radius: var(--radius-md); font-size:0.9rem; }
.collector-details__material-name { font-weight:600; }
.collector-details__material-qty { color: var(--color-text-light); }
.collector-details__financial { display:flex; flex-direction:column; gap: var(--space-2); }
.collector-details__financial-row { display:flex; justify-content:space-between; align-items:center; font-size:0.95rem; }
.collector-details__financial-row.is-highlight { font-size:1.15rem; font-weight:700; padding-top: var(--space-2); border-top:2px solid rgba(0,0,0,0.1); margin-top: var(--space-1); color:#dc2626; }
/* Responsive - Tablet and Desktop */
@media (min-width: 640px) {
.collector-stats-grid { grid-template-columns: repeat(4, 1fr); }
.collector-modal { align-items:center; padding: var(--space-4); }
.collector-modal__content { border-radius: var(--radius-lg); transform: scale(0.9); max-height:85vh; }
.collector-modal.is-active .collector-modal__content { transform: scale(1); }
}
@media (min-width: 768px) {
.collector-list:not(.is-compact) { display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); }
.collector-card__actions:has(.collector-btn:nth-child(2)) { grid-template-columns: 1fr 1fr; }
.collector-card__info-text { display:inline; }
.collector-card__info-btn { padding:8px 16px; }
.collector-list-wrapper { max-height: 70vh; }
}
/* Scrollable List Wrapper with Fade Effect */
.collector-list-wrapper {
position: relative;
max-height: 80vh;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
padding-bottom: 8px;
}
.collector-list-wrapper::-webkit-scrollbar {
width: 8px;
}
.collector-list-wrapper::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
border-radius: 10px;
}
.collector-list-wrapper::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
border-radius: 10px;
transition: background 0.3s ease;
}
.collector-list-wrapper::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #2563eb, #7c3aed);
}
/* Fade effect at bottom when scrollable */
.collector-list-wrapper::after {
content: '';
position: sticky;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.collector-list-wrapper.has-scroll::after {
opacity: 1;
}
.finance-payments ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: var(--space-2); }
.finance-payments li { display:flex; flex-direction:column; gap:2px; padding: var(--space-2) var(--space-3); border:1px solid rgba(148,163,184,0.2); border-radius: var(--radius-md); background:#fff; }
.payment-amount { font-weight:700; color: var(--color-text); }
.payment-meta { font-size:0.75rem; color: var(--color-text-light); }
.payment-notes { font-size:0.75rem; color: var(--color-text); }
.finance-sidebar { display:flex; flex-direction:column; gap: var(--space-4); }
.finance-sidebar-card { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); display:flex; flex-direction:column; gap: var(--space-3); }
.finance-sidebar-card h3 { margin:0; font-size:1rem; }
.finance-jobtypes { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: var(--space-2); font-size:0.85rem; }
.finance-jobtypes li { display:flex; justify-content:space-between; align-items:center; padding: var(--space-2) var(--space-3); border:1px dashed rgba(148,163,184,0.4); border-radius: var(--radius-md); }
.finance-jobtypes .key { font-size:0.7rem; color: var(--color-text-light); text-transform:uppercase; letter-spacing:0.4px; }
.finance-order-body .btn-primary,
.finance-order-body .btn-secondary { font-size:0.8rem; }
.finance-order-body .btn-primary { padding: var(--space-2) var(--space-4); }
.finance-order-body .btn-secondary { padding: var(--space-2) var(--space-4); }
/* Collapsible Sections */
.collector-section__toggle { background:none; border:none; cursor:pointer; padding:0; width:100%; text-align:left; transition: all 0.2s ease; }
.collector-section__toggle:hover { opacity:0.8; }
.collector-section__toggle:focus { outline: 2px solid #3b82f6; outline-offset: 2px; border-radius: var(--radius-md); }
.collector-section__header { display:flex; align-items:center; gap: var(--space-2); justify-content:space-between; }
.collector-section__title { display:flex; align-items:center; gap: var(--space-2); flex:1; }
.collector-section__title h2 { margin:0; }
.collector-section__chevron { display:flex; align-items:center; font-size:1.25rem; transition: transform 0.3s ease; transform: rotate(0deg); }
.collector-section__toggle[aria-expanded="false"] .collector-section__chevron { transform: rotate(-90deg); }
.collector-section__subtitle { margin:0; font-size:0.85rem; color: var(--color-text-light); padding-left: calc(1.5rem + var(--space-2)); }
.collector-section__content { max-height:100vh; overflow:hidden; transition: max-height 0.3s ease, opacity 0.3s ease; opacity:1; }
.collector-section__toggle[aria-expanded="false"] + .collector-section__content { max-height:0; opacity:0; overflow:hidden; }
tbody tr.dirty { background: linear-gradient(90deg, rgba(245,158,11,0.12), #fff); box-shadow: inset 0 0 0 2px rgba(245,158,11,0.25); }
tbody tr.dirty:hover { background: linear-gradient(90deg, rgba(245,158,11,0.16), #f9fafb); }
/* Urgent row highlight */
tr.urgent { background: linear-gradient(90deg, var(--color-danger-bg), #fff); }
tr.urgent:hover { background: linear-gradient(90deg, var(--color-danger-bg), #f1f5f9); }
tr.rework { background: linear-gradient(90deg, #fff7ed 0%, #fff1f2 45%, #fff); border-left:4px solid #f97316; }
tr.rework:hover { background: linear-gradient(90deg, #fff7ed 0%, #ffe4e6 45%, #f8fafc); }
/* Assigned-to-me (technician) subtle highlight */
tr.mine { border-left: 4px solid #2563eb; }
/* User Management & Button Styles */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
text-decoration: none;
transition: var(--transition);
border: none;
}
.btn--primary {
background: var(--color-accent);
color: #fff;
box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
background: var(--color-accent-hover);
box-shadow: var(--shadow-md);
}
.btn--primary:active {
transform: scale(0.98);
}
.users-actions {
display: flex;
gap: var(--space-3);
align-items: center;
flex-wrap: wrap;
margin-bottom: var(--space-4);
}
.users-table {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.users-table table {
margin-top: 0;
}
/* Responsive */
@media (max-width: 900px) {
thead { display:none; }
table, tbody, tr, td { display:block; width:100%; }
tbody tr { border:1px solid var(--color-border); margin-bottom: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); }
tbody td { border:none; padding: var(--space-2) var(--space-3); position:relative; }
tbody td::before { content: attr(data-label); font-size:0.55rem; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color: var(--color-text-light); display:block; margin-bottom:2px; }
tbody form { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
tbody button { grid-column: span 2; }
}