/* Design Time Tracker — Dashboard Styles (matching mockup) */

/* ── Period buttons ── */
.pb { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pb-periods { display: flex; gap: 4px; }
.pb-b { padding: 5px 14px; border: 1px solid #e0e0e0; background: #fff; border-radius: 4px; font-size: 11px; cursor: pointer; color: #757575; transition: .12s; font-family: inherit; }
.pb-b:hover { border-color: #1976d2; color: #1976d2; }
.pb-b.on { background: #1976d2; color: #fff; border-color: #1976d2; }
.pb-nav { display: flex; align-items: center; gap: 4px; }
.pb-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.pb-nav-btn { width: 28px; height: 28px; border: 1px solid #e0e0e0; background: #fff; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #757575; transition: .12s; }
.pb-nav-btn:hover:not(:disabled) { border-color: #1976d2; color: #1976d2; background: #e3f2fd; }
.pb-nav-btn:disabled { opacity: 0.3; cursor: default; }
.pb-today { width: auto; padding: 0 8px; font-size: 11px; gap: 2px; }
.pb-label { font-size: 13px; color: #333; font-weight: 500; user-select: none; white-space: nowrap; }
.pb-ai-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border: 1px solid #1976d2; background: #fff; border-radius: 4px; cursor: pointer; color: #1976d2; font-family: inherit; transition: .15s; margin-left: 8px; }
.pb-ai-btn:hover { background: #e3f2fd; }
.pb-ai-btn:disabled { opacity: 0.5; cursor: default; }
.pb-ai-spin { animation: pb-spin 1.2s linear infinite; }
@keyframes pb-spin { to { transform: rotate(360deg); } }
.pb-ai-popup { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #e8f5e9; border: 1px solid #a5d6a7; border-radius: 4px; margin-bottom: 12px; cursor: pointer; font-size: 12px; color: #2e7d32; transition: background .15s; }
.pb-ai-popup:hover { background: #c8e6c9; }
.pb-ai-inline-msg { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 4px; font-size: 11px; cursor: pointer; margin-left: 8px; white-space: nowrap; transition: opacity .15s; }
.pb-ai-inline-ok { background: #e8f5e9; color: #2e7d32; }
.pb-ai-inline-ok:hover { background: #c8e6c9; }
.pb-ai-inline-err { background: #fff3e0; color: #e65100; }
.pb-ai-inline-err:hover { background: #ffe0b2; }
.pb-ai-inline-progress { background: #e3f2fd; color: #1565c0; cursor: default; }

/* AI Chat layout (used by /sohbet and /ai) */
.ch-layout { display: flex; height: calc(100vh - 82px); background: #fafafa; overflow: hidden; margin: -16px; }
.ch-sidebar { width: 240px; background: #fff; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; flex-shrink: 0; }
.ch-new-btn { display: flex; align-items: center; gap: 6px; margin: 10px; padding: 8px 12px; background: #1976d2; color: #fff; border: none; border-radius: 4px; font-size: 12px; cursor: pointer; font-family: inherit; transition: background .12s; }
.ch-new-btn:hover { background: #1565c0; }
.ch-session-list { flex: 1; overflow-y: auto; padding: 0 4px; }
.ch-session-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 4px; cursor: pointer; font-size: 11px; color: #616161; transition: background .1s; position: relative; }
.ch-session-item:hover { background: #f5f5f5; }
.ch-session-item.on { background: #e3f2fd; color: #1976d2; font-weight: 500; }
.ch-session-icon { font-size: 16px; color: #9e9e9e; flex-shrink: 0; }
.ch-session-item.on .ch-session-icon { color: #1976d2; }
.ch-session-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-session-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ch-session-date { font-size: 9px; color: #9e9e9e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-session-item.on .ch-session-date { color: #1976d2; opacity: .7; }
.ch-session-del { display: none; border: none; background: none; color: #bdbdbd; cursor: pointer; padding: 2px; border-radius: 3px; flex-shrink: 0; }
.ch-session-item:hover .ch-session-del { display: flex; }
.ch-session-del:hover { color: #e53935; background: #ffebee; }
.ch-main { flex: 1; display: flex; flex-direction: column; padding: 14px; min-height: 0; overflow: hidden; }
.ch-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.ch-welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; }
.ch-msg { max-width: 80%; }
.ch-user { align-self: flex-end; }
.ch-assistant { align-self: flex-start; }
.ch-bubble { padding: 8px 12px; border-radius: 8px; font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
.ch-user .ch-bubble { background: #1976d2; color: #fff; border-bottom-right-radius: 2px; }
.ch-assistant .ch-bubble { background: #fff; border: 1px solid #e0e0e0; border-bottom-left-radius: 2px; }
.ch-thinking { color: #9e9e9e !important; font-style: italic; display: flex; align-items: center; gap: 6px; }
.ch-status-icon { font-size: 14px; animation: ch-spin 1.5s linear infinite; }
@keyframes ch-spin { to { transform: rotate(360deg); } }
.ch-dots { display: flex; gap: 4px; padding: 4px 0; }
.ch-dots span { width: 6px; height: 6px; background: #bdbdbd; border-radius: 50%; animation: ch-bounce .6s infinite alternate; }
.ch-dots span:nth-child(2) { animation-delay: .2s; }
.ch-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes ch-bounce { to { opacity: .3; transform: translateY(-4px); } }
.ch-ctx { font-size: 10px; color: #1976d2; font-style: italic; margin-bottom: 4px; }
.ch-time { font-size: 9px; color: #9e9e9e; margin-top: 2px; }
.ch-user .ch-time { text-align: right; }
.ch-assistant .ch-time { text-align: left; }
.ch-input { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid #e0e0e0; margin-top: 8px; }
.ch-input input { flex: 1; padding: 10px 14px; border: 1px solid #e0e0e0; border-radius: 20px; font-size: 12px; font-family: inherit; outline: none; background: #fff; }
.ch-input input:focus { border-color: #1976d2; }
.ch-input button { width: 38px; height: 38px; background: #1976d2; color: #fff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s; flex-shrink: 0; }
.ch-input button:hover { background: #1565c0; }
.ch-input button:disabled { opacity: .4; cursor: default; }
.ch-pending-ctx { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: #fff3e0; border: 1px solid #ffcc80; border-radius: 4px; font-size: 11px; color: #e65100; margin-bottom: 4px; }

/* Timeline shortcuts hint */
.tl-shortcuts { display: inline-flex; gap: 10px; padding: 0; font-size: 10px; color: #bdbdbd; margin-right: 8px; }
.tl-shortcuts > span { display: inline-flex; align-items: center; gap: 3px; cursor: default; }
.tl-shortcuts kbd { padding: 0 4px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 2px; font-size: 9px; font-family: inherit; color: #9e9e9e; line-height: 1.6; }
.tl-mouse { width: 10px; height: 15px; flex-shrink: 0; }

/* AI Smart Panel */
/* ai-row removed, using g2b layout */
.ai-pn { min-height: 0; }
.ai-pn-b { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; }
.ai-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 4px; font-size: 11px; line-height: 1.4; transition: background .1s; }
.ai-item:hover { background: #f5f5f5; }
.ai-item-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #424242; }
.ai-empty { text-align: center; padding: 16px 8px; color: #9e9e9e; font-size: 11px; }
.ai-quick-action { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; margin-top: 4px; border-top: 1px solid #f0f0f0; color: #1976d2; font-size: 11px; cursor: pointer; border-radius: 0 0 4px 4px; transition: background .1s; }
.ai-quick-action:hover { background: #e3f2fd; }

/* ── Summary cards ── */
.cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.cd { background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 14px; box-shadow: 0 2px 4px rgba(0,0,0,.08); text-align: center; }
.cd-v { font-size: 26px; font-weight: 700; color: #1976d2; }
.cd-l { font-size: 11px; color: #757575; margin-top: 3px; }
.cd-s { font-size: 10px; color: #9e9e9e; margin-top: 1px; }

/* ── Panels ── */
.pn { background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,.08); }
.pn-h { padding: 8px 14px; border-bottom: 1px solid #e0e0e0; font-size: 12px; font-weight: 500; }
.pn-b { padding: 12px 14px; }

/* ── 2:1 grid (provider bars + timeline) ── */
.g2 { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; margin-bottom: 16px; }

/* ── Provider bar rows ── */
.br { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; border-radius: 4px; padding: 2px 4px; transition: background 0.15s; }
.br:hover { background: #f5f5f5; }
.br-sel { background: #e3f2fd !important; outline: 2px solid #1976d2; }
.br-l { width: 100px; font-size: 11px; white-space: nowrap; }
.br-t { flex: 1; height: 7px; background: #f0f0f0; border-radius: 3px; }
.br-f { height: 100%; border-radius: 3px; }
.br-v { width: 44px; font-size: 11px; color: #757575; text-align: right; }

/* ── Timeline ── */
.tl { display: flex; height: 24px; border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.tl > div { transition: opacity .15s; cursor: pointer; }
.tl > div:hover { opacity: .7; }
.tl-a { display: flex; justify-content: space-between; font-size: 9px; color: #9e9e9e; }
.tl2 { position: relative; height: 28px; background: #f5f5f5; border-radius: 4px; margin-bottom: 4px; overflow: hidden; user-select: none; }
.tl-row { user-select: none; }
.tl-a { user-select: none; }
.tl2-seg { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; min-width: 2px; opacity: 0.85; cursor: pointer; transition: left .25s ease, width .25s ease, opacity .15s; }
.tl2.panning .tl2-seg { transition: opacity .15s; }
.tl2-seg:hover { opacity: 1; z-index: 1; box-shadow: 0 0 4px rgba(0,0,0,0.3); }
.tl2-sel { z-index: 2; outline: 2px solid #1976d2; outline-offset: 1px; }
.tl-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tl-row-label { width: 75px; font-size: 10px; color: #757575; text-align: right; flex-shrink: 0; white-space: nowrap; }
.tl-row-bar { flex: 1; min-width: 0; }
.tl-day-divider { position: absolute; top: 0; bottom: 0; width: 1px; background: #e0e0e0; z-index: 1; pointer-events: none; }
.tl-day-headers { display: flex; }
.tl-day-header { flex: 1; text-align: center; font-size: 9px; color: #9e9e9e; }
.tl-gray { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(0,0,0,0.06) 3px, rgba(0,0,0,0.06) 6px); z-index: 3; pointer-events: none; border-radius: 3px; }
.tl-zoom-btn { width: 22px; height: 22px; border: 1px solid #ccc; border-radius: 3px; background: #fff; cursor: pointer; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; color: #555; }
.tl-zoom-btn:hover { background: #e3f2fd; border-color: #1976d2; color: #1976d2; }

/* ── DataGrid ── */
.dg { width: 100%; margin-bottom: 16px; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,.08); overflow: hidden; }
.dg-tb { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid #e0e0e0; background: #fafafa; }
.dg-tb-l { font-size: 12px; font-weight: 500; }
.dg-tb-r { display: flex; gap: 4px; }
.dg-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid #e0e0e0; background: #fff; border-radius: 4px; font-size: 11px; cursor: pointer; color: #757575; font-family: inherit; transition: .12s; }
.dg-btn:hover { border-color: #1976d2; color: #1976d2; }
.dg-btn .material-icons { font-size: 14px; }

/* ── Table ── */
.dg table { width: 100%; border-collapse: collapse; }
.dg thead { background: #f5f5f5; }
.dg th { padding: 8px 12px; text-align: left; font-size: 11px; font-weight: 500; color: #757575; border-bottom: 1px solid #e0e0e0; cursor: pointer; user-select: none; white-space: nowrap; }
.dg th:hover { color: #1976d2; }
.dg th .material-icons { font-size: 12px; vertical-align: middle; margin-left: 2px; opacity: .4; }
.dg th:hover .material-icons { opacity: 1; color: #1976d2; }
.dg td { padding: 7px 12px; border-bottom: 1px solid #f5f5f5; font-size: 12px; }
.dg tr:hover td { background: #fafcff; }
.dg tr.sel td { background: #e3f2fd; }

/* ── Badges ── */
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 500; color: #fff; min-width: 58px; text-align: center; }
.b-a { background: #1976d2; }
.b-n { background: #388e3c; }
.b-v { background: #7b1fa2; }
.b-c { background: #f57c00; }
.b-cu { background: #00838f; }
.b-e { background: #0078D4; }

/* ── DataGrid footer + pagination ── */
.dg-ft { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; border-top: 1px solid #e0e0e0; background: #fafafa; font-size: 11px; color: #757575; }
.dg-ft-pg { display: flex; gap: 2px; }
.pg-b { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: 1px solid #e0e0e0; border-radius: 4px; cursor: pointer; font-size: 11px; background: #fff; }
.pg-b.on { background: #1976d2; color: #fff; border-color: #1976d2; }
.pg-b:hover:not(.on):not(.disabled) { border-color: #1976d2; color: #1976d2; }
.pg-b.disabled { opacity: .4; cursor: default; pointer-events: none; }

/* ── Filter row ── */
.flt-row { display: flex; gap: 8px; padding: 6px 12px; background: #f9f9f9; border-bottom: 1px solid #eee; }
.flt-cell { display: flex; align-items: center; gap: 4px; }
.flt-inp { padding: 3px 6px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 10px; width: 90px; font-family: inherit; }
.flt-sel { padding: 3px 4px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 10px; font-family: inherit; background: #fff; }
.filter-row th { padding: 2px 4px; }
.col-filter { width: 100%; padding: 3px 6px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 11px; font-family: inherit; box-sizing: border-box; }
.col-filter:focus { outline: none; border-color: #1976d2; }
.col-filter::placeholder { color: #bbb; font-size: 10px; }

/* ── Bottom 1:1 grid (trend + project) ── */
.g2b { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }

/* ── Bar chart (trend) ── */
.tb { display: flex; align-items: flex-end; gap: 6px; height: 70px; }
.tc { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tb-b { width: 100%; border-radius: 3px 3px 0 0; }
.tb-l { font-size: 9px; color: #9e9e9e; }

/* ── Project list ── */
.pr { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; border-radius: 4px; padding: 2px 4px; transition: background 0.15s; }
.pr:hover { background: #f5f5f5; }
.pr-sel { background: #e3f2fd !important; outline: 2px solid #1976d2; }
.pr-d { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.pr-n { flex: 1; font-size: 11px; }
.pr-v { font-size: 11px; font-weight: 500; }

/* ── Empty text ── */
.empty-text { color: #9e9e9e; font-size: 12px; }

/* ── Provider badges (for other pages) ── */
.provider-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 500; color: white; }
.provider-altium, .provider-altiumdesigner { background-color: #1976d2; }
.provider-nx, .provider-siemensnx { background-color: #388e3c; }
.provider-solidworks { background-color: #F44336; }
.provider-catia, .provider-catiav5 { background-color: #f57c00; }
.provider-vscode { background-color: #7b1fa2; }
.provider-cursor { background-color: #00838f; }
.provider-edge, .provider-microsoftedge { background-color: #0078D4; }
.provider-autocad { background-color: #E91E63; }
.provider-default { background-color: #607D8B; }

/* ── Event type badges ── */
.event-type-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 0.75rem; font-weight: 500; }
.event-focus { background-color: #E8F5E9; color: #2E7D32; }
.event-blur { background-color: #FFF3E0; color: #E65100; }
.event-start { background-color: #E3F2FD; color: #1565C0; }
.event-stop { background-color: #FCE4EC; color: #C62828; }
.event-default { background-color: #F5F5F5; color: #616161; }

/* ── Machine status ── */
.status-online { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #4CAF50; }
.status-offline { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #9E9E9E; }

/* ── Login ── */
.login-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: var(--rz-base-background-color); }
.login-card { width: 400px; padding: 2rem; }