/*
 * modern-override.css
 * -------------------
 * shadcn-inspired visual refinements on top of Velzon.
 *
 * To enable:  uncomment the <link> in head-css.php
 * To disable: comment it out — everything reverts to stock Velzon.
 *
 * Changes are organised into sections so you can toggle individual
 * groups by commenting out the section you don't want.
 */


/* ==========================================================================
   1. TYPOGRAPHY — tighter headings, keep Velzon default body size (13px)
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: -0.01em;
    font-weight: 600;
}


/* ==========================================================================
   2. BORDER RADIUS — standardise to 6px (0.375rem)

   Velzon mixes 3px, 4px, 5px across components.
   shadcn uses a consistent radius that gives a soft but not bubbly feel.
   ========================================================================== */

:root,
[data-bs-theme=light] {
    --vz-border-radius:    0.375rem;       /* 6px — was 4px */
    --vz-border-radius-sm: 0.25rem;        /* 4px — was 3.2px */
    --vz-border-radius-lg: 0.5rem;         /* 8px — was 4.8px */
    --vz-border-radius-xl: 0.75rem;        /* 12px — was 16px */
}


/* ==========================================================================
   3. CARDS — border-only, no shadow (the biggest visual shift)

   Velzon doubles up: border + box-shadow on every card.
   Removing the shadow and using a subtle border is the single change
   that most makes an interface feel "modern product" vs "admin template".
   ========================================================================== */

.card {
    box-shadow: none;
    border: 1px solid var(--vz-border-color);
}

/* Remove nested card shadows that Velzon adds to specific components */
.card .card,
.card-body .card {
    box-shadow: none;
}


/* ==========================================================================
   4. BODY & SURFACE COLOURS — cooler, calmer backgrounds

   Velzon's #f2f2f7 has a slight purple tint from the primary.
   A neutral warm-gray reads as cleaner.
   ========================================================================== */

:root,
[data-bs-theme=light] {
    /* body-bg left as Velzon default (#f2f2f7) */
    --vz-border-color: #e5e5e5;            /* softer borders */
    --vz-input-border-custom: #d4d4d8;     /* form input borders */
}


/* ==========================================================================
   5. BUTTONS — subtler primary, ghost-style secondary

   The stock #4b38b3 is fine for brand but quite heavy for every CTA.
   We keep the hue but soften hover/focus states and make secondary
   buttons feel like shadcn's "outline" variant.
   ========================================================================== */

.btn {
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, box-shadow 0.15s ease;
}

/* Softer focus ring (shadcn uses ring-offset pattern) */
.btn:focus-visible {
    box-shadow: 0 0 0 2px var(--vz-body-bg),
                0 0 0 4px rgba(var(--vz-primary-rgb), 0.3);
}

/* Secondary / outline buttons — lighter, cleaner */
.btn-light,
.btn-soft-secondary {
    background-color: transparent;
    border-color: var(--vz-border-color);
    color: var(--vz-body-color);
}
.btn-light:hover,
.btn-soft-secondary:hover {
    background-color: var(--vz-gray-100);
    border-color: var(--vz-gray-300);
}


/* ==========================================================================
   6. FORM CONTROLS — taller inputs, subtler borders

   Default inputs feel cramped. Adding height and softening the border
   makes forms feel more considered.
   ========================================================================== */

.form-control,
.form-select {
    border-color: var(--vz-input-border-custom);
    padding: 0.5rem 0.75rem;              /* slightly taller */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--vz-primary);
    box-shadow: 0 0 0 3px rgba(var(--vz-primary-rgb), 0.1);
}

/* Smaller form variant used in task details sidebar */
.form-control-sm,
.form-select-sm {
    padding: 0.35rem 0.625rem;
}


/* ==========================================================================
   7. TABLES — cleaner row styling

   Remove heavy striping and dark header backgrounds in favour of
   subtle bottom borders (like shadcn's data tables).
   ========================================================================== */

.table {
    --vz-table-border-color: var(--vz-border-color);
}

.table > thead > tr > th {
    background-color: var(--vz-gray-100);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vz-gray-600);
    border-bottom-width: 1px;
    padding: 0.625rem 0.75rem;
}

.table > tbody > tr > td {
    padding: 0.625rem 0.75rem;
    vertical-align: middle;
}

/* Softer striped rows */
.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(0, 0, 0, 0.015);
}

/* Hover state */
.table-hover > tbody > tr:hover > td {
    background-color: rgba(0, 0, 0, 0.025);
}


/* ==========================================================================
   8. BADGES — subtler, pill-shaped

   shadcn badges are always rounded-full with muted backgrounds.
   ========================================================================== */

.badge {
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 0.3em 0.65em;
    border-radius: 9999px;                 /* pill shape */
}

/* Make soft/subtle badges even softer */
[class*="bg-"][class*="-subtle"] {
    border: 1px solid transparent;
}


/* ==========================================================================
   9. DROPDOWN MENUS — cleaner, tighter
   ========================================================================== */

.dropdown-menu {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07),
                0 2px 4px -2px rgba(0, 0, 0, 0.05);
    border-color: var(--vz-border-color);
    padding: 0.25rem;
}

.dropdown-item {
    border-radius: var(--vz-border-radius-sm);
    padding: 0.45rem 0.75rem;
    font-size: 0.8125rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--vz-gray-100);
}

.dropdown-divider {
    margin: 0.25rem 0;
}


/* ==========================================================================
   10. NAVIGATION — tabs & sidebar refinements
   ========================================================================== */

/* Project sub-nav tabs — remove heavy bottom border, use subtle indicator */
.nav-tabs-custom .nav-link {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--vz-gray-600);
    padding: 0.5rem 1rem;
    border: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-tabs-custom .nav-link:hover {
    color: var(--vz-body-color);
}

.nav-tabs-custom .nav-link.active {
    color: var(--vz-primary);
    border-bottom-color: var(--vz-primary);
    background: transparent;
}


/* ==========================================================================
   11. MODALS — cleaner header/footer, no heavy borders
   ========================================================================== */

.modal-content {
    border: 1px solid var(--vz-border-color);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.modal-header {
    border-bottom: 1px solid var(--vz-border-color);
    padding: 1rem 1.25rem;
}

.modal-footer {
    border-top: 1px solid var(--vz-border-color);
    padding: 0.75rem 1.25rem;
}


/* ==========================================================================
   12. AVATARS & AVATAR GROUPS — consistent sizing
   ========================================================================== */

.avatar-xs {
    width: 1.75rem;
    height: 1.75rem;
}

.avatar-title {
    font-size: 0.7rem;
    font-weight: 600;
}


/* ==========================================================================
   13. TASK CARDS (kanban) — cleaner card styling
   ========================================================================== */

.tasks-box {
    border: 1px solid var(--vz-border-color);
    border-radius: var(--vz-border-radius);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tasks-box:hover {
    border-color: var(--vz-gray-300);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Keep the overdue red border from custom.css but refine it */
.tasks-box.task-overdue {
    border-left-width: 3px;
}


/* ==========================================================================
   14. PROGRESS BARS — slimmer, more refined
   ========================================================================== */

.progress {
    height: 6px;
    border-radius: 9999px;
    background-color: var(--vz-gray-200);
}

.progress-bar {
    border-radius: 9999px;
}


/* ==========================================================================
   15. SCROLLBAR — subtle, thin scrollbar (webkit + firefox)
   ========================================================================== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--vz-gray-300);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--vz-gray-400);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--vz-gray-300) transparent;
}


/* ==========================================================================
   16. SKELETON / PLACEHOLDER LOADING — smoother animation
   ========================================================================== */

.placeholder-glow .placeholder {
    border-radius: var(--vz-border-radius-sm);
}


/* ==========================================================================
   17. PROJECT STATUS BUTTONS — softer, badge-like styling

   The editable status dropdowns use solid btn-primary/btn-success etc.
   which are heavy and inconsistent with the read-only subtle badges.
   This makes them use the soft/subtle palette instead, with consistent
   sizing and rounded corners.
   ========================================================================== */

/* Status dropdown triggers on project cards and list rows */
a[class*="btn-"][class*="status-"].dropdown-toggle,
a.btn-sm[class*="btn-"][class*="status-"].dropdown-toggle {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25em 0.65em;
    border-radius: 9999px;
    line-height: 1.4;
    border: 1px solid transparent;
    min-width: 5.5rem;
    text-align: center;
}

/* Convert solid buttons to subtle/soft style per colour */
a.btn-primary.dropdown-toggle[class*="status-"] {
    background-color: var(--vz-primary-bg-subtle);
    color: var(--vz-primary);
    border-color: var(--vz-primary-border-subtle);
}
a.btn-primary.dropdown-toggle[class*="status-"]:hover {
    background-color: var(--vz-primary);
    color: #fff;
}

a.btn-secondary.dropdown-toggle[class*="status-"] {
    background-color: var(--vz-secondary-bg-subtle);
    color: var(--vz-secondary);
    border-color: var(--vz-secondary-border-subtle);
}
a.btn-secondary.dropdown-toggle[class*="status-"]:hover {
    background-color: var(--vz-secondary);
    color: #fff;
}

a.btn-success.dropdown-toggle[class*="status-"] {
    background-color: var(--vz-success-bg-subtle);
    color: var(--vz-success);
    border-color: var(--vz-success-border-subtle);
}
a.btn-success.dropdown-toggle[class*="status-"]:hover {
    background-color: var(--vz-success);
    color: #fff;
}

a.btn-warning.dropdown-toggle[class*="status-"] {
    background-color: var(--vz-warning-bg-subtle);
    color: var(--vz-warning-text-emphasis);
    border-color: var(--vz-warning-border-subtle);
}
a.btn-warning.dropdown-toggle[class*="status-"]:hover {
    background-color: var(--vz-warning);
    color: #fff;
}

a.btn-danger.dropdown-toggle[class*="status-"] {
    background-color: var(--vz-danger-bg-subtle);
    color: var(--vz-danger);
    border-color: var(--vz-danger-border-subtle);
}
a.btn-danger.dropdown-toggle[class*="status-"]:hover {
    background-color: var(--vz-danger);
    color: #fff;
}

a.btn-info.dropdown-toggle[class*="status-"] {
    background-color: var(--vz-info-bg-subtle);
    color: var(--vz-info);
    border-color: var(--vz-info-border-subtle);
}
a.btn-info.dropdown-toggle[class*="status-"]:hover {
    background-color: var(--vz-info);
    color: #fff;
}

/* Dropdown caret — subtler */
a[class*="btn-"][class*="status-"].dropdown-toggle::after {
    margin-left: 0.35em;
    vertical-align: 0.15em;
    border-top-width: 0.3em;
    border-right-width: 0.3em;
    border-left-width: 0.3em;
    opacity: 0.6;
}

/* Status dropdown items — highlight active selection */
.dropdown-menu .dropdown-item.btn-project-status {
    font-size: 0.8125rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--vz-border-radius-sm);
}

/* Section 17b (page header / topbar) removed — kept as Velzon default intentionally */


/* ==========================================================================
   19. TASK DETAIL VIEW — visual hierarchy, icon cluster, comments

   Targets default-task-v3.php and its partials (flat layout, no cards
   on left column). Right column keeps its card for Comments & Activities.
   ========================================================================== */

/* --- 19a. Task title — clear focal point (scoped to detail view) --- */
#taskInfo .task-title,
h3.task-title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

/* --- 19b. Header metadata row (priority + status + assignee + tags) --- */
#taskInfo > .row:first-child .d-flex.gap-2.align-items-center {
    gap: 0.625rem !important;
}

/* Priority & status pills — consistent pill sizing */
.priority,
a.priority,
span.priority {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.2em 0.7em;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    line-height: 1.5;
}

.status,
a.status,
span.status {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.2em 0.7em;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    line-height: 1.5;
}

/* --- 19c. Top-right icon cluster (Subtasks / Attachments / Time) --- */
.task-info-section {
    flex-wrap: nowrap;
}

.task-info-dropdown {
    display: inline-flex;
    flex-shrink: 0;
}

.task-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.5rem 0.75rem;
    border-radius: var(--vz-border-radius);
    transition: background-color 0.15s ease;
    white-space: nowrap;
    border: none;
    background: transparent;
}

.task-icon:hover {
    background-color: var(--vz-gray-100);
}

/* Make the inner <span> a flex column too */
.task-icon > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

.task-icon .big-icon {
    font-size: 1.25rem;
    color: var(--vz-gray-600);
    line-height: 1;
}

.task-icon:hover .big-icon {
    color: var(--vz-primary);
}

.task-icon h6 {
    font-size: 0.5625rem;
    font-weight: 500;
    color: var(--vz-gray-500);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* Badge — sits next to icon inline, not overlapping */
.task-icon .badge {
    font-size: 0.5rem;
    padding: 0.1rem 0.35rem;
    min-width: unset;
    line-height: 1;
    position: static;
    margin: 0;
}

/* --- 19d. Description block — flat, no card wrapper --- */
.task-description-block {
    padding-bottom: 0.5rem;
}

.task-section-toolbar {
    border-bottom: 1px solid var(--vz-gray-200);
    padding: 0.5rem 0;
}

.toolbar-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vz-gray-600);
}

/* Save button in description toolbar */
#saveTaskDescription {
    font-size: 0.6875rem;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
}

/* Quill toolbar buttons — consistent size */
.task-section-toolbar button[class^="ql-"],
#toolbar button[class^="ql-"] {
    width: 1.75rem;
    height: 1.75rem;
}

/* Description editor area */
.task-description-editor {
    min-height: 80px;
    padding: 0.5rem 0;
}

/* --- 19e. Metadata row (Due Date, Project, Created by) — flat --- */
.task-meta-row {
    border-top: 1px solid var(--vz-border-color);
}

.task-meta-field {
    min-width: 7.5rem;
    flex: 0 0 auto;
}

/* Field labels — small, uppercase, muted with icon */
.task-meta-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vz-gray-500);
    margin-bottom: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.task-meta-label i {
    font-size: 0.875rem;
    opacity: 0.6;
    flex-shrink: 0;
}

/* Field values */
.task-meta-field > p:last-child,
.task-meta-field > div:last-child {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--vz-body-color);
}

/* Due date display */
.due-date,
[class*="due-date-"],
[class*="estimate-start-date"],
[class*="estimate-end-date"] {
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

/* --- 19f. Estimates row — flat, mirrors metadata row --- */
.task-estimates-row {
    border-top: 1px solid var(--vz-border-color);
}

/* Estimated hours input group — compact */
.estimated-hrs-group {
    max-width: 180px;
}

.estimated-hrs-group .form-control-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
}

.estimated-hrs-group .input-group-text {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    color: var(--vz-gray-500);
}

/* --- 19g. Comments section — clean thread --- */

/* Remove the old-school caret arrow */
.commenter-caret {
    display: none !important;
}

/* Comment avatar — cleaner */
.comment-avatar {
    width: 2rem;
    height: 2rem;
    border: none !important;
    padding: 0 !important;
    max-width: 2rem;
    max-height: 2rem;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--vz-primary-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-avatar .avatar-text {
    width: 2rem;
    height: 2rem;
    font-size: 0.6875rem;
}

.comment-avatar img {
    width: 2rem;
    height: 2rem;
    object-fit: cover;
}

/* Comment cards — remove border, use subtle background */
.comment-card {
    border: none !important;
    background-color: var(--vz-gray-100);
    border-radius: var(--vz-border-radius) !important;
}

.comment-card .card-header {
    background-color: transparent !important;
    border-bottom: none !important;
    padding: 0.5rem 0.75rem 0 !important;
}

.comment-card .card-header h6 {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--vz-body-color);
}

.comment-card .card-header h6 .text-muted,
.comment-card .card-header h6:after {
    font-weight: 400;
    color: var(--vz-gray-500);
}

.comment-card .card-body {
    padding: 0.375rem 0.75rem 0.5rem !important;
    font-size: 0.875rem;
    line-height: 1.6;
}

.comment-card:hover {
    transform: none;
    background-color: var(--vz-gray-200);
}

/* Prevent comment text from overflowing */
.min-width-0 {
    min-width: 0;
}

/* Comment editor — sits in card-footer, no extra box */
#commentEditor .notes-editor {
    border: 1px solid var(--vz-border-color);
    border-radius: var(--vz-border-radius);
    min-height: 80px;
}

#addTaskComment {
    border-radius: var(--vz-border-radius);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.4rem 1rem;
}

/* Comments & Activities card header */
.card-header .form-check-label {
    font-size: 0.75rem;
    color: var(--vz-gray-500);
}

/* --- 19h. Activity log items --- */
.activities-list .activity-item,
#activitiesContainer .activity-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--vz-gray-100);
    font-size: 0.8125rem;
}

/* --- 19i. Task description editor — better placeholder and focus --- */
.notes-editor.ql-editor:empty:before,
.notes-editor .ql-editor:empty:before {
    color: var(--vz-gray-400);
    font-style: italic;
    font-size: 0.875rem;
}

/* --- 19j. Subtasks list — clean spacing below content --- */
.subtasks-list {
    padding-top: 0.5rem;
}



/* ==========================================================================
   18. MISC REFINEMENTS
   ========================================================================== */

/* Dividers */
hr,
.dropdown-divider {
    border-color: var(--vz-border-color);
    opacity: 1;
}

/* Tooltips — slightly larger */
.tooltip-inner {
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
    border-radius: var(--vz-border-radius-sm);
}

/* Links — no underline by default, subtle hover */
a {
    text-decoration: none;
    transition: color 0.15s ease;
}

/* Empty state text — larger for better visual hierarchy */
.empty-state h5 {
    font-size: 1.125rem;
    font-weight: 600;
}

.empty-state p {
    font-size: 0.875rem;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}