:root {
    --da-primary: #1f3a5f;
    --da-accent: #2d6cdf;
}

body {
    background: #f4f6fa;
    min-height: 100vh;
}

.da-navbar {
    background: linear-gradient(90deg, var(--da-primary), var(--da-accent));
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.da-card {
    border: none;
    border-radius: .65rem;
    box-shadow: 0 1px 4px rgba(20, 30, 60, .08);
}

/* Stat tiles on dashboard */
.stat-tile {
    border-radius: .65rem;
    color: #fff;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 2px 8px rgba(20, 30, 60, .12);
}
.stat-tile .stat-value { font-size: 2rem; font-weight: 700; line-height: 1; }
.stat-tile .stat-label { opacity: .9; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.stat-tile .bi { font-size: 1.6rem; opacity: .35; }

.bg-grad-1 { background: linear-gradient(135deg, #2d6cdf, #4f8bff); }
.bg-grad-2 { background: linear-gradient(135deg, #11998e, #38ef7d); }
.bg-grad-3 { background: linear-gradient(135deg, #f7971e, #ffd200); color:#3a2e00 !important; }
.bg-grad-4 { background: linear-gradient(135deg, #cb2d3e, #ef473a); }

/* Login */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1f3a5f, #2d6cdf);
}
.login-card {
    width: 100%;
    max-width: 410px;
    border-radius: .8rem;
}

.table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; color:#5a6b85; }
.th-sort { color: inherit; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .25rem; }
.th-sort:hover { color: var(--da-primary); }
.th-sort i { font-size: .72rem; opacity: .45; }
.th-sort.active, .th-sort.active i { color: var(--da-primary); opacity: 1; }
.task-title-link { text-decoration: none; color: var(--da-primary); font-weight: 600; }
.task-title-link:hover { color: var(--da-accent); }

.row-overdue { background: #fff5f5 !important; }

.comment-item { border-left: 3px solid var(--da-accent); }
.history-item { font-size: .85rem; }

.kanban-col { min-width: 0; }

/* ---- Customizable dashboard (gadgets) ---- */
.dash-col { min-height: 60px; }
.dash-widget .card-header { padding: .5rem .75rem; }
.dash-widget .card-body { padding: .85rem; }

/* Drag handle + actions hidden until edit mode */
.drag-handle,
.widget-actions { display: none; }
.dash-editing .drag-handle { display: inline; cursor: grab; color: #adb5bd; }
.dash-editing .widget-actions { display: inline-flex; align-items: center; }
.dash-editing .dash-widget .card { outline: 1px dashed #c3cfe2; }
.dash-editing .dash-col {
    background: repeating-linear-gradient(45deg, #eef2f9, #eef2f9 10px, #e9eef7 10px, #e9eef7 20px);
    border-radius: .5rem;
    padding: .25rem;
}
.dash-ghost { opacity: .45; }

.chart-box { position: relative; height: 230px; }
.dash-list .list-group-item { border-color: #eef0f4; }
.dash-list .list-group-item:first-child { border-top: 0; }
.stat-tile .stat-value { font-size: 1.6rem; }

.two-dim th { white-space: nowrap; background: #f6f8fb; }
.two-dim td { vertical-align: middle; }
.two-dim-link { color: inherit; text-decoration: none; display: block; }
.two-dim-link:hover { color: var(--da-primary, #0052CC); text-decoration: underline; }
.two-dim td:has(.two-dim-link):hover { background: #eef4ff; }

/* ---- Inline (click-to-edit) fields ---- */
.inline-edit { display: inline-block; }
.inline-edit .ie-display {
    cursor: pointer;
    border-radius: .25rem;
    padding: .1rem .35rem;
    margin: -.1rem -.35rem;
    transition: background .12s;
}
.inline-edit .ie-display:hover {
    background: #eef2f9;
    box-shadow: inset 0 0 0 1px #cdd8ea;
}
.inline-edit.editing { display: block; }
.inline-edit .ie-editor select,
.inline-edit .ie-editor input { min-width: 140px; }

/* ---- Avatars ---- */
.da-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    color: #fff; font-size: .72rem; font-weight: 600; flex: 0 0 auto;
}
.da-avatar-stack { display: inline-flex; }
.da-avatar-stack .da-avatar { margin-left: -6px; box-shadow: 0 0 0 2px #fff; }
.da-avatar-stack .da-avatar-link:first-child .da-avatar { margin-left: 0; }
/* Clickable assignee filter avatars */
.da-avatar-link { display: inline-flex; text-decoration: none; transition: transform .1s; }
.da-avatar-link:hover { transform: translateY(-2px); z-index: 2; }
.da-avatar-link.active .da-avatar { box-shadow: 0 0 0 2px var(--da-accent); }
.da-avatar-stack.filtering .da-avatar-link:not(.active) { opacity: .4; }
.da-avatar-stack.filtering .da-avatar-link:not(.active):hover { opacity: 1; }

/* ---- Project board (Kanban) ---- */
.board-scroll {
    display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start;
}
.board-col {
    flex: 0 0 300px; max-width: 300px;
    background: #f1f3f8; border-radius: .6rem; padding: 8px;
}
.board-col-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 8px 8px; border-top: 3px solid #ced4da; border-radius: 4px 4px 0 0;
}
.board-col-body { min-height: 24px; max-height: 68vh; overflow-y: auto; padding-right: 2px; }
.board-more {
    display: block; text-align: center; padding: 6px; margin-top: 4px;
    font-size: .78rem; color: var(--da-accent); text-decoration: none;
    background: #e6eaf2; border-radius: .4rem;
}
.board-more:hover { background: #dbe2f0; }
.board-card {
    background: #fff; border-radius: .5rem; padding: 10px 12px; margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(20,30,60,.12); cursor: grab;
}
.board-editable .board-card:active { cursor: grabbing; }
.board-card-title { font-weight: 600; color: var(--da-primary); text-decoration: none; display: block; }
.board-card-title:hover { color: var(--da-accent); }
.board-ghost { opacity: .4; }
.board-saving { opacity: .5; pointer-events: none; }
.board-add {
    display: block; text-align: center; padding: 6px; border-radius: .4rem;
    color: #5a6b85; text-decoration: none; font-size: .9rem;
}
.board-add:hover { background: #e6eaf2; color: var(--da-accent); }

/* ---- Project calendar ---- */
.da-calendar { table-layout: fixed; }
.da-cal-cell { height: 110px; vertical-align: top; padding: 4px !important; overflow: hidden; }
.da-cal-today { background: #eef4ff; }
.da-cal-day { font-size: .8rem; margin-bottom: 2px; }
.da-cal-task {
    display: block; font-size: .72rem; line-height: 1.3; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; text-decoration: none; color: #2b3a55; padding: 1px 3px;
    border-radius: 3px; margin-bottom: 2px; background: #f3f5fa;
}
.da-cal-task:hover { background: #e6eaf2; }
.da-cal-task.overdue { color: #cb2d3e; }
.da-cal-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }

/* ---- Notifications ---- */
.notif-menu { width: 340px; max-height: 420px; overflow-y: auto; }
.notif-item { white-space: normal; border-bottom: 1px solid #f0f2f6; }
.notif-item.unread { background: #f3f8ff; }
.notif-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--da-accent); flex: 0 0 auto; }
.notif-unread-row { background: #f3f8ff; }

/* ---- @mentions ---- */
.mention { color: var(--da-accent); background: #eaf1fd; border-radius: .25rem; padding: 0 .2rem; font-weight: 600; }
.mention-box {
    position: absolute; z-index: 2000; background: #fff; border: 1px solid #cdd8ea;
    border-radius: .4rem; box-shadow: 0 4px 14px rgba(20,30,60,.18); max-height: 230px; overflow-y: auto;
}
.mention-item { padding: .4rem .7rem; cursor: pointer; font-size: .9rem; white-space: nowrap; }
.mention-item.active, .mention-item:hover { background: #eef2f9; }

/* ===== Mobile / native-app shell ===== */
/* Fixed bottom tab bar (shown only below lg via .d-lg-none) */
.da-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; background: #fff; border-top: 1px solid #e6eaf2;
    box-shadow: 0 -2px 12px rgba(20, 30, 60, .10);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.da-tab {
    position: relative; flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 0 6px; text-decoration: none;
    color: #8a95a8; font-size: .67rem; font-weight: 500;
    -webkit-tap-highlight-color: transparent; transition: color .12s;
}
.da-tab i { font-size: 1.32rem; line-height: 1; }
.da-tab span { line-height: 1; }
.da-tab.active { color: var(--da-accent); }
.da-tab.active i { transform: translateY(-1px); }
.da-tab:active { background: #f1f4fa; }
.da-tab-badge {
    position: absolute; top: 3px; left: calc(50% + 6px);
    background: #e03131; color: #fff; font-size: .58rem; font-weight: 700;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff;
}

/* "More" bottom sheet */
.da-sheet { height: auto; max-height: 82vh; border-radius: 18px 18px 0 0; }
.da-sheet .offcanvas-body { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.da-sheet .list-group-item { border: 0; padding: .8rem .25rem; font-size: 1rem; }

/* Below lg: app-bar stays on top, content clears the bottom bar */
@media (max-width: 991.98px) {
    body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
    .da-navbar { position: sticky; top: 0; z-index: 1020; padding-top: env(safe-area-inset-top, 0px); }
    main.container-fluid { padding-top: 1rem !important; }
}

/* In-app only (class added by footer JS when running in the Parchi app) */
.parchi-app .da-navbar { box-shadow: 0 1px 6px rgba(0,0,0,.12); }

/* ===== Responsive "stack" tables → cards on mobile ===== */
@media (max-width: 991.98px) {
    table.table-stack { display: block; }
    table.table-stack thead { display: none; }
    table.table-stack tbody { display: block; }
    table.table-stack tr {
        display: block; border: 1px solid #e6eaf2; border-radius: .6rem;
        padding: .5rem .85rem; margin: .55rem; box-shadow: 0 1px 3px rgba(20, 30, 60, .06);
    }
    table.table-stack td {
        display: flex; justify-content: space-between; align-items: center; gap: 1rem;
        border: 0 !important; padding: .32rem 0; text-align: right; min-width: 0;
    }
    table.table-stack td::before {
        content: attr(data-label); flex: 0 0 auto;
        font-weight: 600; color: #5a6b85; font-size: .72rem;
        text-transform: uppercase; letter-spacing: .02em; text-align: left;
    }
    /* Title cell: full-width, prominent, no label */
    table.table-stack td.cell-title {
        display: block; text-align: left; font-size: 1.02rem; font-weight: 600;
        padding: .15rem 0 .45rem; border-bottom: 1px solid #f0f2f6 !important; margin-bottom: .3rem;
    }
    table.table-stack td.cell-title::before { content: none; }
    table.table-stack td.cell-title .task-title-link { white-space: normal; }
    /* Progress bar value should take the row width */
    table.table-stack td[data-label="Progress"] { display: block; text-align: left; }
    table.table-stack td[data-label="Progress"]::before { display: block; margin-bottom: .25rem; }
    /* Actions cell: buttons left-aligned, wrap, full width */
    table.table-stack td.cell-actions { justify-content: flex-start; flex-wrap: wrap; gap: .4rem; padding-top: .5rem; }
    table.table-stack td.cell-actions::before { content: none; }
    table.table-stack td.cell-actions .btn { flex: 1 1 auto; }
    /* Empty-state row stays centered */
    table.table-stack td[colspan] { display: block; text-align: center; }
    table.table-stack td[colspan]::before { content: none; }
    /* Inline status select fills available space */
    table.table-stack td[data-label="Status"] select { width: auto !important; max-width: 60%; }
}

/* ===== Bigger status "button" on the task view header ===== */
.status-hero .ie-display { padding: .35rem .7rem; }
.status-hero .badge {
    font-size: 1rem; padding: .55em .95em; border-radius: 2rem;
    box-shadow: 0 1px 3px rgba(20,30,60,.18); letter-spacing: .01em;
}
.status-hero .inline-edit .ie-display:hover { box-shadow: inset 0 0 0 2px #cdd8ea; }

/* ===== Attachments (thumbnail gallery + lightbox) ===== */
.att-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.att-card { width: 152px; }
.att-card-media {
    position: relative; width: 152px; height: 112px; border-radius: .55rem; overflow: hidden;
    background: #1b2330; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.att-card[data-kind="file"] .att-card-media,
.att-card[data-kind="audio"] .att-card-media { background: #eef1f6; cursor: default; }
.att-card[data-kind="audio"] .att-card-media { cursor: pointer; }
.att-card-media img, .att-card-media video { width: 100%; height: 100%; object-fit: cover; }
.att-fileicon { font-size: 2.8rem; color: #8a95a8; }
.att-play {
    position: absolute; width: 48px; height: 48px; border-radius: 50%;
    background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; pointer-events: none;
}
.att-card-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 5px; opacity: 0; transition: opacity .12s; }
.att-card-media:hover .att-card-actions, .att-card-media:focus-within .att-card-actions { opacity: 1; }
.att-act {
    background: #fff; border: 0; border-radius: .4rem; width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center; color: #374151;
    box-shadow: 0 1px 4px rgba(0,0,0,.3); text-decoration: none; cursor: pointer; padding: 0;
}
.att-act:hover { color: var(--da-accent); }
.att-del:hover { color: #e03131; }
.att-card-name { font-weight: 600; font-size: .82rem; margin-top: .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 152px; }
.att-card-date { font-size: .72rem; color: #8a95a8; }

/* Upload progress (JIRA-style: bar + % stay on the thumbnail) */
.att-uploading .att-card-media { cursor: default; }
.att-uploading .att-card-media img { opacity: .55; }
.att-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(0,0,0,.35); }
.att-progress-bar { height: 100%; width: 0; background: var(--da-primary, #0052CC); transition: width .15s ease; }
.att-progress-pct {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    background: rgba(0,0,0,.6); color: #fff; font-size: .72rem; font-weight: 600;
    padding: 2px 8px; border-radius: 999px;
}
.att-failed .att-card-media { background: #fdeced; }
.att-failmark { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #e03131; font-size: 1.8rem; }

/* Drag-and-drop dropzone */
.att-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
    width: 100%; padding: 1.1rem; cursor: pointer; text-align: center;
    border: 1.5px dashed #c4ccd8; border-radius: .6rem; color: #5a6b85; background: #f8fafc;
    transition: border-color .12s, background .12s;
}
.att-dropzone:hover { border-color: var(--da-primary, #0052CC); background: #f0f5ff; }
.att-dropzone.dragover { border-color: var(--da-primary, #0052CC); background: #e6f0ff; color: var(--da-primary, #0052CC); }
.att-dropzone i { font-size: 1.5rem; }
.att-dropzone-hint { font-size: .74rem; color: #8a95a8; }
@media (max-width: 575.98px) {
    .att-card, .att-card-name { width: 44vw; }
    .att-card-media { width: 44vw; height: 33vw; }
}

/* Lightbox */
.att-lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.86); display: flex; align-items: center; justify-content: center; padding: 20px; }
.att-lightbox img, .att-lightbox video { max-width: 92vw; max-height: 88vh; border-radius: .4rem; }
.att-lightbox-close { position: absolute; top: 12px; right: 18px; color: #fff; font-size: 2.4rem; line-height: 1; background: none; border: 0; cursor: pointer; }
.att-audio-wrap { color: #fff; text-align: center; }

/* ===== Floating "New Task" action button (sticky on Dashboard / Tasks) ===== */
.da-fab {
    position: fixed; right: 18px; z-index: 1029;
    bottom: 22px;
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--da-accent); color: #fff; text-decoration: none;
    padding: .8rem 1.05rem; border-radius: 2rem; font-weight: 600;
    box-shadow: 0 4px 14px rgba(45,108,223,.45);
}
.da-fab:hover { color: #fff; background: #245bc0; }
.da-fab .fab-label { display: inline; }
@media (max-width: 991.98px) {
    /* sit above the bottom tab bar + safe area */
    .da-fab { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); right: 14px; }
    .da-fab .fab-label { display: none; } /* icon-only FAB on mobile */
    .da-fab { padding: .85rem; border-radius: 50%; font-size: 1.15rem; }
}

/* Inline-editable description (block, not inline-pill) */
.inline-edit[data-field="description"] { display: block; }
.inline-edit[data-field="description"] .ie-display { display: block; padding: .4rem .5rem; margin: -.2rem 0; border-radius: .4rem; }
.inline-edit[data-field="description"] .ie-editor { display: block; }

/* ===== Universal search ===== */
.da-search { max-width: 320px; }
.da-search .form-control { background: rgba(255,255,255,.92); border: 0; }
.search-result-link { text-decoration: none; }