/* Bridge AI — kabinet (dashboard) uslublari. Umumiy uslublar va mavzu tokenlari ../assets/site.css da. */

.card:hover { transform: none; border-color: var(--card-border); box-shadow: var(--card-shadow); }
a.card:hover, .card.hoverable:hover { transform: translateY(-4px); border-color: rgb(var(--magenta) / 0.45); }

/* yon menyu */
.app-aside { background: rgb(var(--surface) / 0.7); border-color: rgb(var(--line)); }
[data-theme="light"] .app-aside { background: rgb(var(--surface)); }
.side-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .65rem .9rem;
    border-radius: .85rem;
    color: rgb(var(--s300));
    font-weight: 500;
    font-size: .93rem;
    transition: background-color .2s ease, color .2s ease;
}
.side-link:hover { background: var(--tint); color: rgb(var(--fg)); }
.side-link.active {
    background: linear-gradient(90deg, rgb(var(--magenta) / 0.16), rgb(var(--violet) / 0.06));
    color: rgb(var(--magenta));
    box-shadow: inset 3px 0 0 rgb(var(--magenta));
}
.badge {
    min-width: 1.4rem;
    padding: 0 .4rem;
    height: 1.4rem;
    display: inline-grid;
    place-items: center;
    border-radius: 9999px;
    background: rgb(var(--g1, 226 59 255));
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
}

.input, .select, .textarea {
    width: 100%;
    background: rgb(var(--bg) / 0.7);
    border: 1px solid rgb(var(--line));
    border-radius: .85rem;
    padding: .75rem 1rem;
    color: rgb(var(--fg));
    font-weight: 400;
    transition: border-color .2s ease, box-shadow .2s ease;
}
[data-theme="light"] .input, [data-theme="light"] .select, [data-theme="light"] .textarea { background: rgb(var(--surface-2)); border-color: #d1d5db; }
.input::placeholder, .textarea::placeholder { color: rgb(var(--s500)); }
.textarea { min-height: 14rem; line-height: 1.6; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: rgb(var(--magenta));
    box-shadow: 0 0 0 3px rgb(var(--magenta) / 0.18);
}
.select option { background: rgb(var(--surface)); color: rgb(var(--fg)); }
.select optgroup { background: rgb(var(--surface)); color: rgb(var(--s400)); font-style: normal; }

/* vazifa sahifasini himoyalash (assets/task-guard.js) */
.task-protect { position: relative; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.task-protect::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background-image: var(--wm); background-repeat: repeat;
}
.task-protect > * { transition: filter .2s ease; }
.guard-away .task-protect > *, .guard-hide .task-protect > * { filter: blur(9px); }
.guard-away .task-protect::before {
    content: 'Vazifaga qayting — boshqa oynaga o‘tishlar qayd etiladi';
    position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 1rem; text-align: center;
    color: rgb(var(--fg)); font-size: .95rem; background: rgb(var(--bg) / 0.6); border-radius: inherit;
}
.guard-toast {
    position: fixed; z-index: 60; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
    padding: .7rem 1.1rem; border-radius: .85rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--magenta)); color: rgb(var(--fg));
    font-size: .9rem; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); transition: opacity .2s ease, transform .2s ease;
}
.guard-toast.show { opacity: 1; transform: translate(-50%, 0); }
.task-timer {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .8rem; padding: .7rem 1rem;
    border: 1px solid rgb(var(--line)); border-radius: .85rem; background: rgb(var(--surface-2));
}
.task-timer-value { font: 600 1.35rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: rgb(var(--fg)); min-width: 4.5ch; }
.task-timer.is-low { border-color: rgb(var(--amber) / 0.5); }
.task-timer.is-low .task-timer-value { color: rgb(var(--amber)); }
.task-timer.is-critical { border-color: rgb(var(--rose) / 0.6); }
.task-timer.is-critical .task-timer-value { color: rgb(var(--rose)); }
.guard-rules { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .8rem; color: rgb(var(--s400)); }
.guard-rules span::before { content: '•'; color: rgb(var(--magenta)); margin-right: .4rem; }
@media print {
    .task-protect { display: none !important; }
    html.guard-page body { display: none !important; }
}

/* qidiruvli ro'yxat (assets/combo.js) */
.combo { position: relative; }
.combo-input {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2394a3b8' stroke-width='1.6' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    text-overflow: ellipsis;
}
.combo-input::placeholder { color: rgb(var(--s500)); }
.combo-list {
    position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + .35rem);
    max-height: 18rem; overflow-y: auto; margin: 0; padding: .35rem; list-style: none;
    background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: .85rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}
.combo-option { padding: .55rem .75rem; border-radius: .6rem; color: rgb(var(--s200)); cursor: pointer; font-size: .95rem; line-height: 1.35; }
.combo-option:hover, .combo-option.is-active { background: rgb(var(--magenta) / 0.12); color: rgb(var(--fg-strong)); }
.combo-option.is-selected { color: rgb(var(--magenta)); }
.combo-group { padding: .6rem .75rem .25rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--s400)); }
.combo-empty { padding: .6rem .75rem; color: rgb(var(--s400)); font-size: .9rem; }
.label { display: block; font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--s400)); margin-bottom: .4rem; }
.btn-glow, .btn-ghost { cursor: pointer; }
button.btn-glow { border: 0; }

.flash { padding: .8rem 1.1rem; border-radius: .85rem; margin-bottom: 1.25rem; font-size: .95rem; font-weight: 400; }
.flash-ok { background: rgb(var(--teal) / 0.1); border: 1px solid rgb(var(--teal) / 0.4); color: rgb(var(--teal)); }
.flash-error { background: rgb(var(--rose) / 0.1); border: 1px solid rgb(var(--rose) / 0.45); color: rgb(var(--rose)); }

.bar { height: 8px; border-radius: 9999px; background: rgb(var(--line)); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 9999px; background: linear-gradient(90deg, rgb(var(--teal)), rgb(var(--magenta))); }

.score {
    display: inline-grid;
    place-items: center;
    min-width: 2.6rem;
    height: 2rem;
    padding: 0 .5rem;
    border-radius: .6rem;
    font-weight: 600;
    font-size: .95rem;
}
.score-high { background: rgb(var(--teal) / 0.14); color: rgb(var(--teal)); }
.score-mid { background: rgb(var(--amber) / 0.14); color: rgb(var(--amber)); }
.score-low { background: rgb(var(--rose) / 0.12); color: rgb(var(--rose)); }

.status { display: inline-block; padding: .2rem .7rem; border-radius: 9999px; font-size: .75rem; font-weight: 500; white-space: nowrap; }
.st-pending { background: rgb(var(--amber) / 0.14); color: rgb(var(--amber)); }
.st-ok { background: rgb(var(--teal) / 0.14); color: rgb(var(--teal)); }
.st-no { background: rgb(var(--s400) / 0.14); color: rgb(var(--s400)); }
.st-late { background: rgb(var(--rose) / 0.14); color: rgb(var(--rose)); }

.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th { text-align: left; font-weight: 500; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--s500)); padding: .75rem 1rem; white-space: nowrap; }
.table td { padding: .85rem 1rem; border-top: 1px solid rgb(var(--line)); vertical-align: middle; }
.table tr.me td { background: rgb(var(--magenta) / 0.08); }
.table-wrap { overflow-x: auto; }

.ring { box-shadow: none !important; --v: 0; width: 148px; height: 148px; border-radius: 9999px; display: grid; place-items: center; flex-shrink: 0;
    background: conic-gradient(rgb(var(--magenta)) calc(var(--v) * 1%), rgb(var(--line)) 0); }
.ring > div { width: 122px; height: 122px; border-radius: 9999px; background: rgb(var(--surface)); display: grid; place-items: center; text-align: center; }

.prose-task { white-space: pre-line; line-height: 1.7; color: rgb(var(--s300)); }
.answer-box { white-space: pre-wrap; word-break: break-word; line-height: 1.6; color: rgb(var(--s300)); font-size: .92rem; max-height: 16rem; overflow: auto; }

.view-switch { display: inline-flex; padding: 3px; border: 1px solid rgb(var(--line)); border-radius: .9rem; background: rgb(var(--surface)); flex-shrink: 0; }
.view-switch a { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem; border-radius: .7rem; font-size: .85rem; font-weight: 500; color: rgb(var(--s400)); transition: color .2s ease, background-color .2s ease; }
.view-switch a:hover { color: rgb(var(--fg)); }
.view-switch a.active { background: var(--tint); color: rgb(var(--magenta)); }

.board { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .board { grid-template-columns: 1fr; } }
.board-col { background: rgb(var(--bg) / 0.55); border: 1px solid rgb(var(--line)); border-radius: 1rem; padding: .9rem; min-height: 7rem; }
.board-col > h3 { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--s400)); margin-bottom: .75rem; display: flex; justify-content: space-between; }
.task-card { background: rgb(var(--surface-2)); border: 1px solid rgb(var(--line)); border-radius: .8rem; padding: .8rem .9rem; margin-bottom: .7rem; }
.task-card.mine { border-color: rgb(var(--magenta) / 0.55); }
.mini { background: none; border: 1px solid rgb(var(--line)); border-radius: 9999px; color: rgb(var(--s300)); font-size: .72rem; padding: .15rem .6rem; cursor: pointer; font-family: inherit; }
.mini:hover { border-color: rgb(var(--teal)); color: rgb(var(--teal)); }
.mini.danger:hover { border-color: rgb(var(--rose)); color: rgb(var(--rose)); }
.msg { padding: .7rem .9rem; border-radius: .9rem; background: rgb(var(--surface-2)); border: 1px solid rgb(var(--line)); }
.msg.own { background: rgb(var(--magenta) / 0.08); border-color: rgb(var(--magenta) / 0.35); }
.late { color: rgb(var(--rose)); }

.note { display: block; padding: .9rem 1.1rem; border-radius: .9rem; border: 1px solid rgb(var(--line)); background: rgb(var(--surface-2)); }
.note.unread { border-color: rgb(var(--magenta) / 0.5); background: rgb(var(--magenta) / 0.07); }

/* rang klasslari kun rejimida o'qiladigan bo'lsin */
[data-theme="light"] .text-rose-400 { color: rgb(var(--rose)); }
[data-theme="light"] .text-amber-300 { color: rgb(var(--amber)); }

/* grafiklar (view.php: sparkline) */
.chart-grid { stroke: rgb(var(--line)); }
.chart-line { stroke: rgb(var(--magenta)); }
.chart-dot { fill: rgb(var(--magenta)); }
.chart-area { stop-color: rgb(var(--magenta)); }
.chart-forecast { stroke: rgb(var(--teal)); }
.chart-forecast-dot { fill: rgb(var(--teal)); }

/* kirish / ro'yxatdan o'tish sahifalari */
.guest-card { border-radius: 1.75rem; }