/* styles.css - Custom styles for Workspace CRM */

:root {
    --bg: #0d1117;
    --card: #161b22;
    --text: #f0f6fc;
    --text-secondary: #c9d1d9;
    --muted: #8b949e;
    --border: #30363d;
    --primary: #58a6ff;
    --primary-hover: #79c0ff;
    --hover-bg: #21262d;
}

[data-theme="light"] {
    --bg: #f8f9fa;
    --card: #ffffff;
    --text: #1c1f26;
    --text-secondary: #4a5568;
    --muted: #6c757d;
    --border: #dfe3e8;
    --primary: #0d6efd;
    --primary-hover: #0b5ed7;
    --hover-bg: #f0f0f0;
}

body, html {
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
    font-size: 14px;
}

.card {
    background-color: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
    color: var(--text);
}

.card-header {
    background-color: var(--hover-bg);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-weight: 600;
}

.card-body {
    color: var(--text);
}

.navbar {
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.4);
    background-color: var(--card) !important;
    border-bottom: 1px solid var(--border);
}

.navbar-brand, .navbar-text {
    color: var(--text) !important;
    font-weight: 600;
}

.table {
    color: var(--text);
    background-color: var(--card);
    font-size: 13px;
}

.table > :not(caption) > * > * {
    /* Override Bootstrap's default white cell background */
    background-color: transparent !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}

.table thead th {
    color: var(--text) !important;
    background-color: var(--hover-bg) !important;
    border-bottom: 2px solid var(--border) !important;
    font-weight: 600 !important;
}

.table tbody tr {
    background-color: var(--card);
}

.table tbody tr:nth-child(even) {
    background-color: #111827; /* slightly darker for striping */
}

.table td {
    color: var(--text-secondary);
    border-color: var(--border);
}

.table-hover tbody tr:hover {
    background-color: var(--hover-bg);
}

.table tbody tr[onclick] {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.table tbody tr[onclick]:hover {
    background-color: rgba(88, 166, 255, 0.15);
}

.table-active {
    background-color: rgba(88, 166, 255, 0.25) !important;
}

.badge {
    font-weight: 600;
    padding: 0.4em 0.7em;
}

.list-group-item {
    background-color: var(--card);
    color: var(--text-secondary);
    border-color: var(--border);
    transition: all 0.2s ease;
}

.list-group-item:hover {
    background-color: var(--hover-bg);
    color: var(--text);
    border-color: var(--primary);
}

.list-group-item-action {
    color: var(--text-secondary);
}

.list-group-item-action:hover {
    color: var(--text);
}

.form-control,
.form-select {
    background-color: var(--hover-bg);
    color: var(--text);
    border-color: var(--border);
    transition: all 0.2s ease;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--card);
    color: var(--text);
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.25);
}

.form-control::placeholder {
    color: var(--muted);
    opacity: 0.7;
}

.form-label {
    color: var(--text);
    font-weight: 500;
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(88, 166, 255, 0.3);
}

.btn-outline-light {
    color: var(--text);
    border-color: var(--border);
    background-color: transparent;
    transition: all 0.2s ease;
}

.btn-outline-light:hover {
    background-color: var(--hover-bg);
    border-color: var(--primary);
    color: var(--text);
}

.btn-secondary {
    background-color: var(--muted);
    border-color: var(--muted);
    color: #fff;
}

.btn-success {
    background-color: #238636;
    border-color: #238636;
}

.btn-success:hover {
    background-color: #2ea043;
    border-color: #2ea043;
}

.text-muted {
    color: var(--muted) !important;
}

.alert {
    border: 1px solid var(--border);
}

.alert-danger {
    background-color: rgba(248, 81, 73, 0.15);
    border-color: #f85149;
    color: #ff7b72;
}

.alert-success {
    background-color: rgba(35, 134, 54, 0.15);
    border-color: #238636;
    color: #3fb950;
}

.lead {
    color: var(--text-secondary);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    font-weight: 600;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--primary-hover);
}

strong {
    color: var(--text);
    font-weight: 600;
}

/* Activity cards */
.card .card {
    border-left: 3px solid var(--primary);
    background-color: var(--hover-bg);
}

/* Modal styling */
.modal-content {
    background-color: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
}

.modal-header {
    border-bottom: 1px solid var(--border);
}

.modal-title {
    color: var(--text);
}

.modal-footer {
    border-top: 1px solid var(--border);
}

.btn-close {
    filter: invert(1);
}

.btn-link {
    color: var(--primary);
    text-decoration: none;
}

.btn-link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* Smooth transitions */
* {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Opportunities table enhancements */
#opportunitiesTable {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
}

#opportunitiesTable th,
#opportunitiesTable td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
}

#opportunitiesTable tbody td {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* Group Owner column visually */
#opportunitiesTable th.followup-group,
#opportunitiesTable td.followup-group {
    background-color: var(--hover-bg);
    border-left: 2px solid var(--border);
    border-right: 2px solid var(--border);
}

/* Priority select styling */
.priority-select {
    font-size: 10px !important;
    padding: 0.1rem 0.2rem !important;
    min-width: 60px;
}

.priority-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.25);
}

/* Brighter text for latest status and follow-up */
.latest-status-text {
    color: var(--primary-hover) !important;
    font-weight: 500;
}

.latest-followup-text {
    color: var(--primary-hover) !important;
    font-weight: 500;
}

[data-theme="light"] .latest-status-text,
[data-theme="light"] .latest-followup-text {
    color: var(--primary) !important;
}

/* Sticky filters and header */
.sticky-filters {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--bg);
    padding-top: 0.5rem;
    margin-bottom: 1rem;
}

.sticky-filters .card {
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--hover-bg) !important;
}

.sticky-header th {
    background-color: var(--hover-bg) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
}

/* When filters are present, adjust header position */
.sticky-filters ~ .table-responsive .sticky-header th {
    top: 0;
}

/* Filter styling improvements */
.sticky-filters .form-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.sticky-filters .form-control,
.sticky-filters .form-select {
    font-size: 13px;
}

/* Header nav tabs in navbar - make them look like large square tabs */
.header-tabs-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.header-tabs {
    border-bottom: none;
    padding: 0.5rem 0;
    gap: 0.75rem;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-tabs .nav-item {
    margin: 0;
}

.header-tabs .nav-link {
    border: 2px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.85rem 2rem;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: var(--card);
    transition: all 0.2s ease;
    min-width: 150px;
    text-align: center;
    display: block;
    text-decoration: none;
}

.header-tabs .nav-link:hover {
    background-color: var(--hover-bg);
    color: var(--text);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

.header-tabs .nav-link.active {
    background-color: var(--primary);
    color: #fff !important;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(88, 166, 255, 0.4);
    transform: translateY(-2px);
}

.header-tabs .nav-link.active:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff !important;
}

/* Expanded opportunity row content - use more vertical space */
.collapse.show {
    max-height: none !important;
}

.expanded-opp-content {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    min-height: 650px;
}

/* Ensure expanded content doesn't get cut off */
.table-responsive {
    position: relative;
}

/* Highlight the expanded row - main row only */
tr[data-bs-toggle="collapse"][aria-expanded="true"] {
    background-color: var(--hover-bg) !important;
}

tr[data-bs-toggle="collapse"][aria-expanded="true"] td {
    background-color: var(--hover-bg) !important;
    border-left: 3px solid var(--primary);
}

/* Expanded content row - no highlighting */
.collapse.show > td {
    position: relative;
    z-index: 10;
    background-color: transparent !important;
    border-left: none !important;
    box-shadow: none !important;
}

/* Ensure expanded content div has no background */
.expanded-opp-content {
    background-color: transparent !important;
}

/* Override any table hover effects on expanded rows */
tr.collapse.show {
    background-color: transparent !important;
}

tr.collapse.show:hover {
    background-color: transparent !important;
}

tr.collapse.show td {
    background-color: transparent !important;
}

tr.collapse.show:hover td {
    background-color: transparent !important;
}

/* Active user avatars in header */
.user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    margin-right: 4px;
}

.user-avatar:last-child {
    margin-right: 0;
}