/* K-Team Manager — front-end dashboard */ /* Standalone full-page mode (no theme header/footer): give the bare a * pleasant backdrop + breathing room; the .kteam-dash inside already centres * itself (max-width + margin auto). */ body.kteam-standalone { --kt-page: #f4f5f7; margin: 0; background: var(--kt-page); } body.kteam-standalone .kteam-dash { padding: 24px 16px 56px; } .kteam-dash { --kt-accent: #6c5ce7; --kt-border: #e6e8ee; --kt-muted: #8a8f99; /* Phase-1 structural tokens (Dark-mode groundwork; values = current light). */ --kt-surface: #fff; --kt-surface-2: #fafbfc; --kt-text: #333; --kt-text-soft: #50575e; /* Phase-1b: neutral fills + accent washes (values = current light). */ --kt-surface-3: #fbfbfc; --kt-fill: #eef0f4; --kt-fill-2: #f3f4f6; --kt-fill-3: #f5f5f7; --kt-fill-4: #f6f7fb; --kt-fill-5: #f1f1f4; --kt-fill-6: #f7f8fa; --kt-fill-7: #fafbfd; --kt-wash: #f6f5ff; --kt-wash-2: #faf9ff; --kt-wash-3: #f3f1ff; --kt-wash-4: #f4f2ff; --kt-wash-5: #efeafe; --kt-wash-6: #f0eefe; --kt-wash-7: #e7e2fd; --kt-wash-8: #eef0ff; --kt-wash-9: #f7f5ff; max-width: 1080px; margin: 0 auto; font-size: 15px; line-height: 1.7; } .kteam-dash * { box-sizing: border-box; } .kteam-dash-head h2 { margin: 0 0 14px; font-size: 24px; } .kteam-muted { color: var(--kt-muted); } /* Buttons */ .kteam-btn { display: inline-block; background: var(--kt-accent); color: #fff !important; border: 0; border-radius: 8px; padding: 9px 16px; font-size: 14px; cursor: pointer; text-decoration: none; transition: opacity .15s; } .kteam-btn:hover { opacity: .9; } /* Small button variants (used in the per-unit «کارکرد» tab + finance link). */ .kteam-btn-sm { padding: 5px 12px; font-size: 12.5px; border-radius: 7px; line-height: 1.4; } .kteam-btn-ghost { background: var(--kt-surface); color: var(--kt-accent) !important; border: 1px solid var(--kt-border); } .kteam-btn-ghost:hover { border-color: var(--kt-accent); opacity: 1; } .kteam-btn-danger { background: #d63031; } /* Per-unit row action cell + finance "go to units" block. */ .kteam-unit-actions { white-space: nowrap; } .kteam-unit-actions form { display: inline-block; margin: 0 2px; } .kteam-fin-unit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--kt-border); border-radius: 12px; margin-bottom: 10px; } .kteam-fin-unit .kteam-unit-go { margin-inline-start: auto; } .kteam-chip-unit { background: var(--kt-accent); color: #fff; } .kteam-link { background: none; border: 0; color: var(--kt-accent); cursor: pointer; padding: 0; font-size: 13px; } .kteam-link-danger { background: none; border: 0; color: #d63031; cursor: pointer; padding: 0; font-size: 13px; } .kteam-back, .kteam-pill-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--kt-accent); font-size: 13px; font-weight: 600; padding: 6px 14px; border: 1px solid var(--kt-border); border-radius: 999px; background: var(--kt-surface); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .kteam-back:hover, .kteam-pill-link:hover { border-color: var(--kt-accent); background: var(--kt-wash-2); box-shadow: 0 2px 8px rgba(108,92,231,.12); } /* A row of mixed action buttons (e.g. Save / Test / Disconnect) kept aligned. */ .kteam-btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .kteam-btn-row .kteam-pill-link, .kteam-btn-row .kteam-pill-danger { cursor: pointer; } /* Cards */ .kteam-card { background: var(--kt-surface); border: 1px solid var(--kt-border); border-radius: 12px; padding: 18px 20px; margin: 0 0 18px; } .kteam-card h3 { margin: 0 0 14px; font-size: 17px; } /* Stats */ .kteam-stats { display: flex; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; } .kteam-stat { flex: 1; min-width: 120px; background: var(--kt-surface); border: 1px solid var(--kt-border); border-radius: 12px; padding: 16px; text-align: center; } .kteam-stat strong { display: block; font-size: 28px; color: var(--kt-accent); } .kteam-stat span { color: var(--kt-muted); font-size: 13px; } a.kteam-stat-link { text-decoration: none; transition: box-shadow .15s, transform .15s; } a.kteam-stat-link:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-2px); } /* Tables */ .kteam-table-wrap { overflow-x: auto; } .kteam-table { width: 100%; border-collapse: collapse; } .kteam-table th, .kteam-table td { padding: 10px 12px; border-bottom: 1px solid var(--kt-border); text-align: start; } .kteam-table th { font-size: 13px; color: var(--kt-muted); font-weight: 600; } .kteam-table td a { color: var(--kt-accent); text-decoration: none; } /* Chips */ .kteam-chip { display: inline-block; padding: 2px 10px; border-radius: 20px; color: #fff; font-size: 12px; white-space: nowrap; } .kteam-chip-amber { background: #f0932b !important; } .kteam-chip-green { background: #1e9e57 !important; } /* Tabs — refined underline style with a soft hover. */ .kteam-tabnav { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid var(--kt-border); margin-bottom: 16px; } .kteam-tab-btn { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 10px 16px; cursor: pointer; font-size: 14px; color: var(--kt-muted); font-family: inherit; border-radius: 8px 8px 0 0; transition: color .15s ease, background .15s ease, border-color .15s ease; } .kteam-tab-btn:hover { color: var(--kt-accent); background: var(--kt-wash); } .kteam-tab-btn.active { color: var(--kt-accent); border-bottom-color: var(--kt-accent); font-weight: 600; } /* Comment actions & nested replies */ .kteam-comment-actions { margin-top: 8px; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .kteam-comment-actions .kteam-inline { display: inline; } .kteam-replies { margin: 10px 0 0; padding-inline-start: 18px; border-inline-start: 2px solid var(--kt-border); } .kteam-reply-form { margin-top: 8px; width: 100%; } /* File name label */ .kteam-file-name { padding: 6px 10px 0; font-size: 13px; font-weight: 600; } .kteam-file-actions { padding: 4px 10px 0; font-size: 12px; } /* Sub-tabs (task buckets inside a project tab) — pill style, filled when active. */ .kteam-subtabs { margin-top: 6px; } .kteam-subtabs .kteam-tabnav { border-bottom: 0; gap: 6px; margin-bottom: 14px; } .kteam-subtabs .kteam-tab-btn { border: 1px solid var(--kt-border); border-radius: 999px; padding: 6px 14px; font-size: 13px; margin-bottom: 0; background: var(--kt-surface); } .kteam-subtabs .kteam-tab-btn:hover { border-color: #c9b8ff; color: var(--kt-accent); background: var(--kt-wash-2); } .kteam-subtabs .kteam-tab-btn.active { background: var(--kt-accent); border-color: var(--kt-accent); color: #fff; font-weight: 600; } /* Pagination */ .kteam-pager { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; } .kteam-page { display: inline-block; padding: 5px 11px; border: 1px solid var(--kt-border); border-radius: 6px; text-decoration: none; color: #444; font-size: 13px; } .kteam-page:hover { border-color: var(--kt-accent); } .kteam-page-active { background: var(--kt-accent); color: #fff; border-color: var(--kt-accent); } .kteam-edit-row > td { background: var(--kt-fill-6); } /* Tasks */ .kteam-tasklist { list-style: none; margin: 0; padding: 0; } .kteam-tasklist li { padding: 10px 0; border-bottom: 1px solid var(--kt-border); } .kteam-tasklist li.kteam-done .kteam-task-title { text-decoration: line-through; color: var(--kt-muted); } .kteam-task-desc { color: var(--kt-muted); font-size: 13px; margin-top: 4px; } .kteam-inline { display: inline; } /* Task cards */ .kteam-tasklist li.kteam-task-item { padding: 12px 14px; border: 1px solid var(--kt-border); border-bottom: 1px solid var(--kt-border); border-radius: 10px; background: var(--kt-surface); margin-bottom: 10px; } /* Task grid: up to 3 cards per row, collapsing on narrower screens. Cards stretch to equal height in a row (align-items:stretch) and lay their content out as a flex column so the status box can be pinned to the bottom — keeping the row tidy even when one task's text is longer than the others. */ .kteam-taskgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; } .kteam-taskgrid li.kteam-task-item { margin-bottom: 0; display: flex; flex-direction: column; } /* Pin the buttons row to the card bottom: they then line up across every card in a row, and the status box (with its top separator) sits just under them. */ .kteam-taskgrid .kteam-task-item .kteam-task-foot { margin-top: auto; } @media (max-width: 900px) { .kteam-taskgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .kteam-taskgrid { grid-template-columns: 1fr; } } /* Priority badge pushed to the far (top-left in RTL) corner of the card header. */ .kteam-task-head { gap: 8px; } .kteam-task-prio { margin-inline-start: auto; } /* Clickable "depends on" link in a task's meta row. */ .kteam-deplink { background: none; border: 0; padding: 0; font: inherit; color: var(--kt-accent); cursor: pointer; text-align: start; } .kteam-deplink:hover { text-decoration: underline; } .kteam-task-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .kteam-task-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; margin: 6px 0; } .kteam-task-item.kteam-done .kteam-task-title { text-decoration: line-through; color: var(--kt-muted); } .kteam-task-item .kteam-status-form { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--kt-border); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } button.kteam-task-title { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--kt-accent); cursor: pointer; text-align: start; } button.kteam-task-title:hover { text-decoration: underline; } /* Task modal */ .kteam-modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: flex-start; justify-content: center; z-index: 99999; padding: 40px 16px; overflow: auto; } .kteam-modal-box { background: var(--kt-surface); border-radius: 12px; max-width: 560px; width: 100%; padding: 24px; position: relative; box-shadow: 0 12px 44px rgba(0,0,0,.25); } .kteam-modal-close { position: absolute; top: 12px; inset-inline-end: 12px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--kt-fill-5); border: 0; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; color: #555; transition: background .15s ease, color .15s ease; } .kteam-modal-close:hover { background: #e2342e; color: #fff; } /* Leave room for the close button so the title never sits under it. */ .kteam-modal-title { margin: 0 0 12px; padding-inline-end: 38px; font-size: 19px; } /* Task discussion affordances */ .kteam-task-foot { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .kteam-soft-btn { background: var(--kt-wash-6); color: var(--kt-accent); border: 1px solid #ddd6fe; border-radius: 8px; padding: 5px 12px; font-size: 13px; cursor: pointer; } .kteam-soft-btn:hover { background: var(--kt-wash-7); } .kteam-soft-danger { background: #fdeceb; color: #b3261e; border-color: #f6c9c5; } .kteam-soft-danger:hover { background: #fbdbd8; } /* Client-side table pager (e.g. team work-log detail). */ .kteam-pagi { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; } .kteam-pagi-btn { min-width: 34px; padding: 4px 10px; font-size: 15px; line-height: 1.2; } .kteam-pagi-btn:disabled { opacity: .45; cursor: default; } .kteam-pagi-info { font-size: 12px; } .kteam-count-badge { display: inline-block; background: var(--kt-accent); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 11px; line-height: 18px; min-width: 18px; text-align: center; } .kteam-note-preview { font-size: 12px; font-style: italic; } /* Last-note preview on its own line under the task buttons (never crowds them). */ .kteam-task-note { margin-top: 6px; font-size: 12px; font-style: italic; } /* Collapsible "add task" box above the task list. Green toggle so it doesn't clash with the purple (accent) active sub-tab pills. */ .kteam-addtask { margin-bottom: 18px; } .kteam-addtask-toggle.kteam-btn { background: #1e9e57; } .kteam-addtask-toggle.kteam-btn:hover { background: #1b8e4e; } .kteam-addtask-body { margin-top: 12px; padding: 14px; border: 1px solid var(--kt-border); border-radius: 10px; background: var(--kt-surface-3); } .kteam-addtask-body .kteam-form { margin-top: 0; } /* File upload drop-zone (multi-file). */ .kteam-upload-form { display: flex; flex-direction: column; gap: 10px; } .kteam-upload-form .kteam-btn { align-self: flex-start; } .kteam-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; border: 2px dashed #cfd2da; border-radius: 10px; background: var(--kt-surface); cursor: pointer; text-align: center; transition: border-color .15s ease, background .15s ease; } .kteam-dropzone:hover { border-color: var(--kt-accent); background: var(--kt-wash-2); } .kteam-dropzone input[type=file] { display: none; } .kteam-dropzone-text { font-size: 13px; color: var(--kt-muted); } .kteam-dropzone-files { font-size: 12px; font-weight: 600; color: var(--kt-accent); } /* Project-detail status chip / dropdown straddling the card's top border. */ .kteam-detail-status { position: absolute; top: -14px; inset-inline-end: 16px; } .kteam-detail-status .kteam-chip { box-shadow: 0 2px 8px rgba(0,0,0,.14); } .kteam-statusset-select { color: #fff; border: 0; border-radius: 999px; padding: 6px 14px 6px 30px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.14); -webkit-appearance: none; appearance: none; background-position: left 11px center; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23fff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); } .kteam-statusset-select option { color: #222; background: var(--kt-surface); } /* Financial tab summary list. */ .kteam-detail-meta-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; } /* Deadline countdown chip in the project header. */ .kteam-dl-count { font-size: 12px; color: var(--kt-accent); font-weight: 600; } /* Two cards side by side (time-log + availability); stacks on narrow screens. */ .kteam-half-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .kteam-half-grid > .kteam-card { margin-bottom: 0; } @media (max-width: 760px) { .kteam-half-grid { grid-template-columns: 1fr; } } /* Unified task-assignment chip box: one control with people (👤) and roles (🏷); a person is single & exclusive with roles, roles are multi. */ .kteam-assign2 { margin: 10px 0; } .kteam-assign2-cap { display: block; font-size: 13px; margin-bottom: 4px; } .kteam-assign2-field { position: relative; } .kteam-assign2-control { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--kt-border); border-radius: 10px; background: var(--kt-surface); cursor: text; } .kteam-assign2-control:focus-within { border-color: var(--kt-accent); box-shadow: 0 0 0 3px rgba(108,92,231,.12); } .kteam-assign2-chips { display: contents; } .kteam-assign2-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 4px 3px 12px; font-size: 13px; } .kteam-assign2-chip.is-user { background: var(--kt-wash-6); color: var(--kt-accent); border: 1px solid #ddd6fe; } .kteam-assign2-chip.is-role { background: #eaf7f0; color: #1e7e57; border: 1px solid #bfe7d2; } .kteam-assign2-x { background: none; border: 0; color: inherit; cursor: pointer; font-size: 12px; line-height: 1; padding: 2px 5px; border-radius: 50%; opacity: .7; } .kteam-assign2-x:hover { opacity: 1; background: rgba(0,0,0,.08); } .kteam-assign2-search { flex: 1; min-width: 130px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; padding: 4px 2px; } .kteam-assign2-menu { position: absolute; z-index: 60; inset-inline: 0; top: calc(100% + 4px); max-height: 240px; overflow-y: auto; background: var(--kt-surface); border: 1px solid var(--kt-border); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.14); padding: 6px; } .kteam-assign2-grp { font-size: 11px; font-weight: 700; color: var(--kt-muted); padding: 8px 8px 4px; } .kteam-assign2-opt { display: block; width: 100%; text-align: start; background: none; border: 0; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; cursor: pointer; color: var(--kt-text); } .kteam-assign2-opt:hover { background: var(--kt-wash); color: var(--kt-accent); } .kteam-assign2-empty { padding: 8px 10px; font-size: 13px; } /* Labelled task-form fields: a small caption above each control. */ .kteam-tf { display: flex; flex-direction: column; gap: 4px; } .kteam-tf > span { font-size: 12px; color: var(--kt-muted); font-weight: 600; } .kteam-tf input, .kteam-tf select, .kteam-tf textarea { margin-bottom: 0; } .kteam-taskform .kteam-form-row { align-items: flex-end; } .kteam-form-row > .kteam-tf { flex: 1; margin-bottom: 10px; } .kteam-form-row > .kteam-tf-grow { flex: 2 1 200px; } .kteam-form-row > .kteam-assign2 { flex: 2 1 240px; margin: 0 0 10px; } .kteam-taskform .kteam-assign2-cap { font-weight: 600; } /* Weekly availability editor: a row per weekday, each with an on/off switch and (when on) one or more «from – to» time ranges. */ /* Right dashboard column: leave card stacked above the weekly availability card. */ .kteam-avail-col { display: flex; flex-direction: column; gap: 18px; } .kteam-avail-col > .kteam-card { margin-bottom: 0; } .kteam-avail2 { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .kteam-avail-row { border: 1px solid var(--kt-border); border-radius: 10px; padding: 10px 12px; transition: border-color .15s ease, background .15s ease; } .kteam-avail-row.is-on { border-color: #cdbcff; background: var(--kt-wash-2); } .kteam-avail-row.is-today { box-shadow: 0 0 0 2px rgba(108,92,231,.16); } /* Head: toggle on the start side, the summary/expand button pushed to the end. */ .kteam-avail-head { display: flex; align-items: center; gap: 10px; } .kteam-avail-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 14px; } .kteam-avail-todaytag { font-size: 11px; font-weight: 600; color: var(--kt-accent); background: rgba(108,92,231,.12); border-radius: 999px; padding: 1px 8px; } /* The checkbox rendered as a sliding switch (RTL-aware via inset-inline). */ .kteam-avail-on { -webkit-appearance: none; appearance: none; flex: none; width: 38px; height: 22px; border-radius: 999px; background: #d7d9e0; position: relative; cursor: pointer; transition: background .15s ease; margin: 0; } .kteam-avail-on::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--kt-surface); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: inset-inline-start .15s ease; } .kteam-avail-on:checked { background: var(--kt-accent); } .kteam-avail-on:checked::after { inset-inline-start: 18px; } /* Summary doubles as the expand button; hidden entirely when the day is off. */ .kteam-avail-edit { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; color: var(--kt-muted); font: inherit; font-size: 13px; padding: 4px 8px; border-radius: 8px; transition: background .15s ease, color .15s ease; } .kteam-avail-edit:hover { background: rgba(108,92,231,.08); color: var(--kt-accent); } .kteam-avail-summary { font-weight: 600; } .kteam-avail-chevron { font-size: 11px; transition: transform .15s ease; } .kteam-avail-row:not(.is-on) .kteam-avail-edit { display: none; } .kteam-avail-row.is-editing .kteam-avail-summary { display: none; } .kteam-avail-row.is-editing .kteam-avail-chevron { transform: rotate(180deg); } /* Collapsible time-range editor: only when the day is on AND being edited. */ .kteam-avail-editor { display: none; } .kteam-avail-row.is-on.is-editing .kteam-avail-editor { display: block; } .kteam-avail-slots { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .kteam-avail-slot { display: inline-flex; align-items: center; gap: 8px; } .kteam-avail-slot input[type=time] { height: 38px; padding: 4px 8px; border: 1px solid var(--kt-border); border-radius: 8px; font-family: inherit; font-size: 14px; background: var(--kt-surface); } .kteam-avail-dash { color: var(--kt-muted); font-size: 13px; } .kteam-slot-del { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 0; background: #fdeceb; color: #b3261e; cursor: pointer; font-size: 16px; line-height: 1; } .kteam-slot-del:hover { background: #f7c9c5; } .kteam-avail-slots-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .kteam-slot-add { background: none; border: 1px dashed var(--kt-accent); color: var(--kt-accent); border-radius: 8px; padding: 5px 12px; font-size: 13px; cursor: pointer; } .kteam-slot-add:hover { background: var(--kt-wash-2); } .kteam-avail-allday { font-size: 12px; } /* Read-only weekly availability board (project «team» tab + team-manager report). */ .kteam-avgrid-wrap { overflow-x: auto; margin-top: 6px; } /* table-layout:fixed → the 7 weekday columns share the remaining width EQUALLY (the name column is the only one with an explicit width), so the grid never looks ragged. Cells clip with an ellipsis; the full content is in the hover tooltip. */ .kteam-avgrid { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 12px; table-layout: fixed; } .kteam-avgrid th, .kteam-avgrid td { border: 1px solid var(--kt-border); padding: 6px 8px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kteam-avgrid thead th { background: var(--kt-wash); font-weight: 700; } .kteam-avgrid th.is-today, .kteam-avgrid td.is-today { box-shadow: inset 0 0 0 2px rgba(108,92,231,.25); } .kteam-avgrid .kteam-avgrid-name { width: 188px; text-align: start; font-weight: 600; background: var(--kt-fill-7); position: sticky; inset-inline-start: 0; } .kteam-avon { background: #eaf7ee; color: #1e7e34; font-weight: 600; } .kteam-avhours { font-size: 11px; } .kteam-avoff { color: #c9ccd3; } /* Rich name cell (presence dot + avatar + role chips) and the leave cell — mirrors the wp-admin availability matrix. */ .kteam-avgrid-pname { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; } .kteam-avgrid-pname img { border-radius: 50%; } .kteam-avgrid-prole { display: block; font-size: 11px; font-weight: 400; color: var(--kt-muted); padding-inline-start: 28px; } .kteam-avgrid-today { font-size: 10px; font-weight: 700; color: #6c5ce7; } .kteam-avleave { background: rgba(245,158,11,.14); color: #b45309; font-weight: 600; white-space: nowrap; } .kteam-avleavelbl { font-size: 11px; } /* Live presence dot (online / idle / offline). Rendered server-side at page load; the viewer's own tab reports presence via the Heartbeat reporter. */ .kteam-dot-presence { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #c3c7cf; vertical-align: middle; flex: 0 0 auto; } .kteam-dot-presence.is-active, .kteam-dot-presence.is-online { background: #2fb344; box-shadow: 0 0 0 3px rgba(47,179,68,.18); } .kteam-dot-presence.is-idle { background: #f0932b; box-shadow: 0 0 0 3px rgba(240,147,43,.18); } .kteam-dot-presence.is-offline { background: #c3c7cf; } /* Instant, multi-line hover tooltip (frontend.js positions it on [data-tip]). One time-range per line via white-space:pre-line; no native title delay. */ .kteam-hovertip { position: fixed; z-index: 100000; display: none; max-width: 260px; padding: 6px 10px; background: #1d2327; color: #fff; font-size: 12px; line-height: 1.8; border-radius: 6px; white-space: pre-line; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,.18); pointer-events: none; } /* Generic live-search box (projects/tasks lists). */ .kteam-search-input { width: 100%; max-width: 360px; padding: 9px 12px; margin: 0 0 12px; border: 1px solid var(--kt-border); border-radius: 999px; font-family: inherit; font-size: 14px; } /* Tasks: list/kanban view toggle + kanban board. */ .kteam-view-toggle { display: inline-flex; gap: 0; border: 1px solid var(--kt-border); border-radius: 999px; overflow: hidden; margin: 8px 0 12px; } .kteam-vbtn { background: var(--kt-surface); border: 0; padding: 6px 16px; font: inherit; font-size: 13px; cursor: pointer; color: var(--kt-muted); } .kteam-vbtn.is-active { background: var(--kt-accent); color: #fff; } .kteam-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; } .kteam-kcol { background: var(--kt-fill-4); border: 1px solid var(--kt-border); border-radius: 12px; min-height: 80px; display: flex; flex-direction: column; transition: background .12s ease, box-shadow .12s ease; } .kteam-kcol.is-over { background: var(--kt-wash-5); box-shadow: 0 0 0 2px var(--kt-accent) inset; } .kteam-kcol-head { font-weight: 700; font-size: 13px; padding: 8px 10px; border-top: 3px solid var(--kt-accent); border-radius: 12px 12px 0 0; display: flex; align-items: center; gap: 6px; } .kteam-kcount { margin-inline-start: auto; font-size: 12px; color: var(--kt-muted); background: var(--kt-surface); border-radius: 999px; padding: 0 8px; } .kteam-kcol-body { display: flex; flex-direction: column; gap: 8px; padding: 8px; flex: 1; } .kteam-kcard { background: var(--kt-surface); border: 1px solid var(--kt-border); border-radius: 10px; padding: 9px 11px; box-shadow: 0 1px 2px rgba(16,24,40,.05); } .kteam-kanban.is-draggable .kteam-kcard { cursor: grab; } .kteam-kcard.is-dragging { opacity: .5; } .kteam-kcard-meta { font-size: 12px; margin-top: 4px; } /* Per-member work-hours bar chart (pure CSS, no library). */ .kteam-bars { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; } .kteam-bar-row { display: flex; align-items: center; gap: 10px; } .kteam-bar-label { flex: 0 0 130px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kteam-bar { flex: 1; height: 12px; background: var(--kt-fill); border-radius: 7px; overflow: hidden; } .kteam-bar-fill { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #7c6cf0, var(--kt-accent)); } .kteam-bar-val { flex: 0 0 auto; font-size: 12px; color: var(--kt-muted, #667085); min-width: 64px; text-align: left; } /* Touch fallback: a status picker on each card, hidden on mouse, shown on touch. */ .kteam-kmove { display: none; width: 100%; margin-top: 7px; font-size: 12px; padding: 4px 6px; border: 1px solid var(--kt-border); border-radius: 8px; background: var(--kt-surface); } @media (pointer: coarse) { .kteam-kanban.is-draggable .kteam-kmove { display: block; } } /* Running / parked work timer banner. */ .kteam-timer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px; border-radius: 12px; background: var(--kt-wash-8); border: 1px solid #c9b8ff; } .kteam-timer-bar.kteam-timer-pending { background: #fff4e5; border-color: #ffd8a8; } .kteam-timer-ico { font-size: 18px; } .kteam-timer-info { font-size: 14px; } .kteam-timer-clock { font-variant-numeric: tabular-nums; font-weight: 700; font-family: Consolas, Menlo, monospace; direction: ltr; } .kteam-timer-bar form { display: inline-flex; align-items: center; gap: 6px; margin: 0; } .kteam-timer-bar form.kteam-timer-stopform { margin-inline-start: auto; } .kteam-timer-desc { padding: 7px 10px; border: 1px solid var(--kt-border); border-radius: 8px; font-family: inherit; font-size: 13px; } .kteam-timer-bar input[type=number] { padding: 6px 8px; border: 1px solid var(--kt-border); border-radius: 7px; } .kteam-timer-start { margin-bottom: 6px; } /* Leave / absence. */ .kteam-absence-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .kteam-absence-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--kt-border); border-radius: 8px; font-size: 13px; } .kteam-leave-badge { font-size: 11px; font-weight: 700; color: #b26a00; background: #fff4e5; border-radius: 999px; padding: 1px 8px; } /* A row of back pills. */ .kteam-backrow { display: flex; flex-wrap: wrap; gap: 8px; } /* Small pill button (e.g. table «جزئیات»). */ .kteam-pill-sm { padding: 4px 12px; font-size: 12px; } /* A task title rendered as a link-styled button that opens the task modal. */ .kteam-tasklink { background: none; border: 0; padding: 0; margin: 0; color: var(--kt-accent); cursor: pointer; font: inherit; font-weight: 600; text-align: start; } .kteam-tasklink:hover { text-decoration: underline; } /* Team-manager «team» card accent. */ .kteam-team-card { border-inline-start: 4px solid var(--kt-accent); } /* Team members: searchable card grid + typeahead dropdown. */ .kteam-memsearch { position: relative; max-width: 360px; } .kteam-memsearch-drop { position: absolute; z-index: 40; inset-inline: 0; top: 46px; margin: 0; padding: 4px; list-style: none; background: var(--kt-surface); border: 1px solid var(--kt-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(16,24,40,.12); max-height: 260px; overflow-y: auto; } .kteam-memsearch-opt { padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; } .kteam-memsearch-opt:hover { background: var(--kt-wash-3); } .kteam-mem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; } .kteam-mem-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--kt-border); border-radius: 12px; background: var(--kt-surface); text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .kteam-mem-card:hover { box-shadow: 0 6px 18px rgba(108,92,231,.14); transform: translateY(-2px); border-color: #cdbcff; color: inherit; } .kteam-mem-av img { width: 44px; height: 44px; border-radius: 50%; display: block; } .kteam-mem-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .kteam-mem-info b { font-size: 14px; } .kteam-mem-role { font-size: 12px; } .kteam-mem-stats { font-size: 12px; } /* Member profile header. */ .kteam-mem-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; } .kteam-mem-head img { width: 56px; height: 56px; border-radius: 50%; } /* Branch-report date-range filter (preset pills + custom from/to). */ .kteam-range-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; } .kteam-range-filter .kteam-pill-link.is-active { border-color: var(--kt-accent); background: var(--kt-wash-5); color: var(--kt-accent); } .kteam-range-custom { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-inline-start: 6px; } .kteam-range-custom label { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; } .kteam-range-custom input[type=date] { padding: 6px 8px; border: 1px solid var(--kt-border); border-radius: 7px; direction: ltr; } /* Description box with a faint label + collapsible long text */ .kteam-desc-box { position: relative; border: 1px solid var(--kt-border); border-radius: 8px; padding: 16px 12px 10px; margin: 10px 0; background: var(--kt-surface-3); } .kteam-desc-label { position: absolute; top: -9px; inset-inline-start: 12px; background: var(--kt-surface); padding: 1px 8px; font-size: 11px; color: var(--kt-muted); border: 1px solid var(--kt-border); border-radius: 6px; } .kteam-desc-text { line-height: 1.5; font-size: 14px; word-break: break-word; } .kteam-desc-text.kteam-clamp { max-height: 4.6em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); } .kteam-desc-toggle { display: block; margin: 4px auto 0; background: none; border: 0; color: var(--kt-accent); cursor: pointer; font-size: 18px; line-height: 1; } .kteam-modal-edit { margin-top: 8px; } /* Comments */ .kteam-comments { list-style: none; margin: 0 0 16px; padding: 0; } .kteam-comments li { padding: 12px 14px; border: 1px solid var(--kt-border); border-radius: 10px; margin-bottom: 10px; background: var(--kt-surface-2); } .kteam-comment-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; margin-bottom: 8px; } .kteam-cdate { font-size: 12px; } .kteam-comment-body { line-height: 1.8; } .kteam-comment-doneby { font-size: 12px; margin-top: 4px; } /* Author-based colours: member / client / staff */ /* Comment author tint: members get their role-tag colour inline (≈7% fill); these are the fallbacks — member (no role colour), client (teal), staff/owner (violet). */ .kteam-comment-item.kteam-by-member { background: #f3f6ff; border-color: #dbe6ff; } .kteam-comment-item.kteam-by-client { background: rgba(20,168,160,.10); border-color: rgba(20,168,160,.45); } .kteam-comment-item.kteam-by-staff { background: rgba(108,92,231,.08); border-color: rgba(108,92,231,.4); } /* Thread composer separated from the list */ .kteam-thread-composer { padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--kt-border); } /* Status dropdown in the actions row */ .kteam-status-form { display: inline-flex; align-items: center; gap: 4px; } .kteam-status-form select { padding: 3px 8px; border: 1px solid var(--kt-border); border-radius: 6px; font-family: inherit; font-size: 12px; } /* Forms */ .kteam-form { margin-top: 14px; } .kteam-form textarea, .kteam-form input[type=text], .kteam-form input[type=date], .kteam-form input[type=datetime-local], .kteam-form input[type=number], .kteam-form input[type=email], .kteam-form input[type=password], .kteam-form input[type=tel], .kteam-form select { width: 100%; padding: 9px 11px; border: 1px solid var(--kt-border); border-radius: 8px; margin-bottom: 10px; font-family: inherit; font-size: 14px; } .kteam-form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .kteam-form-row > * { flex: 1; margin-bottom: 10px; } .kteam-form-inline { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .kteam-form-inline label { display: flex; flex-direction: column; font-size: 13px; gap: 4px; } .kteam-form-inline .kteam-grow { flex: 1; min-width: 180px; } /* Equal control heights so the row's fields + button bottom-align regardless of how long each field's label is. Typed input selectors are needed to out-rank the base `.kteam-form input[type=number]{margin-bottom}` rule (same specificity, later in source) — otherwise the number field keeps a bottom margin and sits too high. */ .kteam-form-inline input[type=text], .kteam-form-inline input[type=date], .kteam-form-inline input[type=datetime-local], .kteam-form-inline input[type=number], .kteam-form-inline input[type=email], .kteam-form-inline input[type=tel], .kteam-form-inline select { margin: 0; height: 40px; padding: 8px 10px; border: 1px solid var(--kt-border); border-radius: 8px; box-sizing: border-box; } .kteam-form-inline .kteam-btn { height: 40px; display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; } .kteam-checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } /* Detail meta */ .kteam-detail-meta { position: relative; } .kteam-detail-title { margin: 2px 0 0; font-size: 22px; display: flex; align-items: center; gap: 10px; } /* Project visual identifier (featured image or first-letter monogram) — twin of the admin.css rules; sized inline by Projects::thumb_html(). */ .kteam-pthumb { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 10px; overflow: hidden; background: #eeedfe; color: #3c3489; font-weight: 600; vertical-align: middle; } .kteam-pthumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Image-less monogram: white letter over the per-project gradient (inline). */ .kteam-pthumb-mono { color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.22); } .kteam-pcell { display: inline-flex; align-items: center; gap: 8px; } .kteam-detail-meta ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; } /* Flash */ .kteam-flash { background: #e6f7ec; border: 1px solid #b7e4c7; color: #1e7e34; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; } .kteam-flash-error { background: #fdecea; border-color: #f5c2c0; color: #b32d2e; } /* "Connect Telegram" nudge banner (a flash variant) */ .kteam-tg-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #eaf3ff; border-color: #b6d4fb; color: #1c4f8a; } .kteam-tg-nudge-text { font-weight: 600; } .kteam-tg-nudge-actions { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; } .kteam-tg-nudge-actions form { margin: 0; } .kteam-tg-nudge-later { background: transparent; border: none; cursor: pointer; color: inherit; opacity: .7; font: inherit; padding: 4px 8px; } .kteam-tg-nudge-later:hover { opacity: 1; text-decoration: underline; } /* Per-category e-mail preferences (chips that highlight when checked) */ .kteam-cat-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .kteam-cat-grid .kteam-check { background: var(--kt-wash); border: 1px solid var(--kt-border); border-radius: 999px; padding: 6px 13px; font-size: 13px; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .kteam-cat-grid .kteam-check:has(input:checked) { border-color: var(--kt-accent); background: var(--kt-wash-5); color: var(--kt-accent); font-weight: 600; } /* List scaffolding: sub-tabs + filter bar + pagination (team boards). * Scope the flex row to the plain pill-row variant only: when .kteam-subtabs is * ALSO a .kteam-tabs-wrap (comment/task threads: nav + stacked panels), it must * stay block — otherwise the nav + panels lay out side-by-side and the tabnav * collapses into a vertical strip. */ .kteam-subtabs:not(.kteam-tabs-wrap) { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; } .kteam-subtab { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--kt-muted); font-size: 13px; font-weight: 600; padding: 6px 13px; border: 1px solid var(--kt-border); border-radius: 999px; background: var(--kt-surface); transition: border-color .15s ease, background .15s ease, color .15s ease; } .kteam-subtab:hover { border-color: var(--kt-accent); color: var(--kt-accent); } .kteam-subtab.active { border-color: var(--kt-accent); background: var(--kt-wash-5); color: var(--kt-accent); } .kteam-subtab .kteam-badge { font-size: 11px; font-weight: 700; background: var(--kt-fill); color: var(--kt-text-soft); border-radius: 999px; padding: 0 7px; min-width: 18px; text-align: center; } .kteam-subtab.active .kteam-badge { background: var(--kt-accent); color: #fff; } .kteam-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 14px; padding: 12px; background: var(--kt-wash-2); border: 1px solid var(--kt-border); border-radius: 10px; } .kteam-filterbar label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--kt-muted); } .kteam-filterbar select { height: 36px; border: 1px solid var(--kt-border); border-radius: 8px; background: var(--kt-surface); padding: 0 8px; font: inherit; } .kteam-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px; font-size: 13px; } .kteam-pager-nav { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; } .kteam-pager-per { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; } .kteam-pill-link.is-active { border-color: var(--kt-accent); background: var(--kt-wash-5); color: var(--kt-accent); } /* Searchable parent-project picker (datalist combobox). */ .kteam-parent-pick-wrap { display: block; } .kteam-parent-pick { width: 100%; } /* AJAX board: dim + lock while a tab/filter/page swap is in flight. */ .kteam-board-inner { transition: opacity .15s ease; } .kteam-board-inner.is-loading { opacity: .5; pointer-events: none; } /* Quick inline reply on the team-comments list. */ .kteam-inline-reply { display: flex; gap: 8px; margin-top: 8px; } .kteam-inline-reply input[type=text] { flex: 1; height: 34px; border: 1px solid var(--kt-border); border-radius: 8px; padding: 0 10px; font: inherit; } .kteam-login-gate { text-align: center; padding: 40px 0; } /* Account menu (Gravatar button + dropdown) */ .kteam-acct { position: relative; display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: 14px; } /* Notifications bell + unread badge (in the top account row) */ .kteam-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; text-decoration: none; border: 2px solid var(--kt-border); background: var(--kt-surface); line-height: 0; } .kteam-bell:hover { background: var(--kt-fill-2); } .kteam-bell-badge { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #e03131; color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } /* Notifications inbox list */ .kteam-notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .kteam-notif { border: 1px solid var(--kt-border); border-radius: 10px; padding: 10px 12px; background: var(--kt-surface); } .kteam-notif-unread { background: var(--kt-wash-6); border-color: #c9b8ff; } /* Tone accents (payment decisions): green = approved/paid, red = rejected */ .kteam-notif-good { border-inline-start: 4px solid #2f9e44; } .kteam-notif-bad { border-inline-start: 4px solid #e03131; } .kteam-notif-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .kteam-notif-date { font-size: 12px; white-space: nowrap; } .kteam-notif-body { margin-top: 4px; color: var(--kt-text-soft); font-size: 14px; line-height: 1.7; } .kteam-notif-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } /* Live-pulse refresh pill: appears above the list when new notifications arrive. */ .kteam-notif-fresh { display: block; width: 100%; margin: 0 0 10px; padding: 8px 14px; background: var(--kt-wash-5); color: var(--kt-accent); border: 1px dashed var(--kt-accent); border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease; } .kteam-notif-fresh:hover { background: var(--kt-accent); color: #fff; border-style: solid; } .kteam-notif-actions { margin-top: 8px; display: flex; align-items: center; gap: 8px; } /* "مشاهده" = primary pill button; "خوانده شد" = soft outline button */ .kteam-notif-view { display: inline-flex; align-items: center; gap: 4px; background: var(--kt-accent); color: #fff; text-decoration: none; font-size: 13px; padding: 5px 14px; border-radius: 999px; transition: background .15s ease; } .kteam-notif-view:hover { background: #574bd1; color: #fff; } .kteam-notif-readbtn { background: var(--kt-surface); border: 1px solid var(--kt-border); color: var(--kt-text-soft); font-size: 13px; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .kteam-notif-readbtn:hover { background: var(--kt-fill-2); border-color: #c2c6cf; } /* Meetings list (Phase 4) — mirrors the notifications list. */ .kteam-meet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .kteam-meet { border: 1px solid var(--kt-border); border-radius: 10px; padding: 12px 14px; background: var(--kt-surface); border-inline-start: 4px solid var(--kt-accent); display: flex; flex-direction: column; } .kteam-meet-head { font-weight: 600; } .kteam-meet-desc { margin-top: 6px; color: var(--kt-text-soft); font-size: 14px; line-height: 1.7; } .kteam-meet .kteam-inline { display: inline; } /* Single-line rows get a consistent height so the same field lines up across the cards of a row (date with date, location with location, …). */ .kteam-meet-when-line, .kteam-meet-loc, .kteam-meet-proj, .kteam-meet-count { min-height: 1.7em; font-size: 13px; margin-top: 4px; } .kteam-meet-when-line { font-weight: 600; color: #3a3f47; } .kteam-meet-people { margin-top: 6px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .kteam-att-chip { background: var(--kt-fill-2); border: 1px solid var(--kt-border); border-radius: 999px; padding: 2px 10px; font-size: 12px; } /* Footer (created + actions) sticks to the bottom so it lines up across a row. */ .kteam-meet-created { margin-top: auto; padding-top: 8px; font-size: 12px; } .kteam-meet-actions { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Compact meeting card → click opens a modal. */ .kteam-meet-open { cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; } .kteam-meet-open:hover { border-color: var(--kt-accent); box-shadow: 0 2px 10px rgba(108,92,231,.12); } .kteam-meet-modal .kteam-meet-head { font-size: 16px; margin-bottom: 6px; } /* Telegram glyph sized to the surrounding text. */ .kteam-tg-ico { display: inline-block; vertical-align: -0.15em; } /* "Add to calendar" — a native

dropdown that asks which calendar. */ .kteam-cal { position: relative; display: inline-block; } .kteam-cal > summary { list-style: none; cursor: pointer; user-select: none; } .kteam-cal > summary::-webkit-details-marker { display: none; } .kteam-cal[open] > summary { border-color: var(--kt-accent); background: var(--kt-wash-2); } .kteam-cal-menu { position: absolute; z-index: 30; inset-inline-start: 0; top: calc(100% + 6px); min-width: 190px; background: var(--kt-surface); border: 1px solid var(--kt-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(16,24,40,.14); padding: 6px; display: flex; flex-direction: column; gap: 2px; } .kteam-cal-menu a { display: block; text-decoration: none; color: inherit; font-size: 13px; padding: 8px 10px; border-radius: 7px; } .kteam-cal-menu a:hover { background: var(--kt-wash-4); color: var(--kt-accent); } .kteam-pill-danger { background: var(--kt-surface); border: 1px solid #f1c4c4; color: #d63031; border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .kteam-pill-danger:hover { background: #fff5f5; border-color: #e03131; } /* Meetings grid: 1 card = full row, 2 = halves, 3+ = thirds; cards in a row are equal height (align-items: stretch) so footers line up. */ .kteam-meet-grid { display: grid; gap: 12px; align-items: stretch; } .kteam-meet-grid.cols-1 { grid-template-columns: 1fr; } .kteam-meet-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .kteam-meet-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .kteam-meet-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .kteam-meet-grid { grid-template-columns: 1fr; } } /* "This week's meetings" overview card — subtle accent + tighter list. */ .kteam-week-meet .kteam-meet-list { margin-top: 4px; } /* Meeting create form: scope row + date field + attendee picker. */ .kteam-check-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; } .kteam-check-row .kteam-check { background: var(--kt-wash); border: 1px solid var(--kt-border); border-radius: 999px; padding: 5px 12px; } .kteam-check-row .kteam-check:has(input:checked) { border-color: var(--kt-accent); background: var(--kt-wash-5); } /* Firefox renders datetime-local as separate date + time spinners and CLIPS the time part (horizontally, or by wrapping under the fixed 40px height) when the field is too narrow. Give it generous room so the clock segment always shows; widen the flex cell too so the inline row doesn't squeeze it back. */ .kteam-meet-when-field input[type=datetime-local] { min-width: 240px; width: 100%; } .kteam-form-inline .kteam-meet-when-field { min-width: 240px; } /* Date inputs render LTR (their value is inherently LTR) so RTL doesn't reorder them. */ .kteam-dash input[type=date] { direction: ltr; text-align: start; } /* Custom time / datetime picker (hour + minute lower); this row has no button child, so top-aligning is safe here. */ .kteam-timelog-row { margin-bottom: 12px; gap: 14px; align-items: flex-start; } /* Equal control height so date/select/number all line up on one row. */ .kteam-timelog-row input, .kteam-timelog-row select { height: 40px; box-sizing: border-box; } .kteam-timelog-row .kt-tl-date input { width: 150px; } .kteam-timelog-row .kt-tl-project { flex: 0 1 260px; min-width: 170px; } .kteam-timelog-row .kt-tl-project select { width: 100%; } .kteam-timelog-row .kt-tl-num { flex: 0 0 auto; } .kteam-timelog-row .kt-tl-num input { width: 96px; text-align: center; } /* Make