/* ========================================
   MODERN INFO TICKET PAGE OVERRIDES
   Replace old gradients/colors with new theme
   ======================================== */

/* === OBSERVATII CARDS - cleaner design === */
.obs-card {
    background: var(--bg-secondary) !important;
    background-image: none !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--radius-lg) !important;
    padding: 16px 18px !important;
    height: 100%;
    transition: all var(--transition-fast);
}

.obs-card:hover {
    border-color: var(--border-secondary) !important;
}

.obs-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

.obs-card-header h6 {
    margin: 0 !important;
    font-size: 0.8rem !important;
    font-weight: var(--font-semibold) !important;
    color: var(--text-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.obs-card-header h6 i {
    color: var(--accent-blue);
    font-size: 0.95rem;
}

/* Count badge */
.obs-count-badge {
    background: var(--accent-blue-alpha) !important;
    color: var(--accent-blue) !important;
    border: 1px solid var(--accent-blue) !important;
    border-radius: var(--radius-full) !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 7px !important;
    font-size: 0.7rem !important;
    font-weight: var(--font-bold) !important;
}

/* "+ Adauga" button */
.obs-add-btn {
    background: transparent !important;
    border: 1px solid var(--border-secondary) !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-md) !important;
    padding: 4px 10px !important;
    font-size: 0.72rem !important;
    font-weight: var(--font-medium) !important;
    transition: all var(--transition-fast);
}

.obs-add-btn:hover {
    background: var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
    color: white !important;
}

.obs-add-btn i {
    font-size: 0.7rem;
}

/* Observation items */
.obs-item {
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

.obs-item:last-child {
    border-bottom: none !important;
}

.obs-item-ctx {
    color: var(--text-primary) !important;
    font-size: 0.78rem !important;
    font-weight: var(--font-semibold) !important;
}

.obs-item-user {
    color: var(--text-tertiary) !important;
    font-size: 0.7rem !important;
}

.obs-date {
    color: var(--text-tertiary) !important;
    font-size: 0.7rem !important;
    margin-bottom: 4px !important;
}

.obs-text {
    color: var(--text-secondary) !important;
    font-size: 0.82rem !important;
    line-height: 1.5;
}

.obs-empty {
    color: var(--text-tertiary) !important;
    padding: 20px !important;
    text-align: center;
}

.obs-empty i {
    color: var(--text-tertiary) !important;
    opacity: 0.4 !important;
    font-size: 1.5rem !important;
    margin-bottom: 8px !important;
    display: block;
}

/* Observation action buttons (edit/delete) */
.obs-item-actions button {
    background: transparent !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-tertiary) !important;
    border-radius: var(--radius-sm) !important;
    width: 26px !important;
    height: 26px !important;
    transition: all var(--transition-fast);
}

.obs-item-actions button:hover {
    background: var(--accent-blue-alpha) !important;
    color: var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
}

.obs-item-actions button.obs-delete-btn:hover {
    background: var(--danger-bg) !important;
    color: var(--danger) !important;
    border-color: var(--danger) !important;
}

/* === DOCUMENT BUTTONS === */
.doc-btn-group {
    display: flex !important;
    gap: 0 !important;
    margin-bottom: 8px !important;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.btn-document {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
    padding: 10px 14px !important;
    font-size: 0.85rem !important;
    font-weight: var(--font-medium) !important;
    transition: all var(--transition-fast) !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-document:hover {
    background: var(--bg-quaternary) !important;
    color: var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
}

.btn-document i {
    color: var(--accent-blue) !important;
    width: 18px;
    text-align: center;
}

.btn-document i[style*="#2b579a"] {
    color: #4d8cff !important;
}

.btn-doc-main {
    flex: 1 !important;
    border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
    border-right: none !important;
    text-align: left;
    justify-content: flex-start !important;
}

.btn-doc-preview {
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
    border-left: 1px solid var(--border-secondary) !important;
    width: 44px;
    justify-content: center !important;
}

.btn-doc-preview i {
    color: var(--text-secondary) !important;
}

.btn-doc-preview:hover i {
    color: var(--accent-blue) !important;
}

/* === ACTION BUTTONS (Notificare SMS / Email, AMEF Details Export & Add Ticket) === */
.btn-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.85rem !important;
    font-weight: var(--font-semibold) !important;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

.btn-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    filter: brightness(1.1);
}

.btn-action:active {
    transform: translateY(0);
    filter: brightness(0.95);
}

/* Variants used on AMEF Details (Export PDF / Excel / Adauga Ticket).
   The inline linear-gradient is preserved by inline style="background:..." but we add a visible
   tinted border per variant via attribute selector so the buttons read as buttons even when the
   gradient renders as a uniform fill. */
.btn-action[onclick*="ExportToPdf"] {
    background: var(--danger) !important;
    background-image: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    border: 1px solid #ef4444 !important;
}

.btn-action[onclick*="ExportToExcel"] {
    background: #6366f1 !important;
    background-image: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border: 1px solid #818cf8 !important;
}

a.btn-action[href*="/Tickets/AddNew"],
.btn-action[href*="amefId"] {
    background: var(--success) !important;
    background-image: linear-gradient(135deg, #10b981, #059669) !important;
    border: 1px solid #34d399 !important;
}

/* Override inline styles for SMS/Email buttons */
#btnNotificareSms,
button#btnNotificareSms[style] {
    background: var(--info-bg) !important;
    border: 1px solid var(--info) !important;
    color: var(--info) !important;
}

#btnNotificareSms:hover,
button#btnNotificareSms[style]:hover {
    background: var(--info) !important;
    color: white !important;
}

#btnNotificareEmail,
button#btnNotificareEmail[style] {
    background: var(--success-bg) !important;
    border: 1px solid var(--success) !important;
    color: var(--success) !important;
}

#btnNotificareEmail:hover,
button#btnNotificareEmail[style]:hover {
    background: var(--success) !important;
    color: white !important;
}

/* === MODERN TABS === */
.modern-tabs {
    border-bottom: 1px solid var(--border-primary) !important;
    margin-bottom: 16px !important;
}

.modern-tabs .nav-link {
    color: var(--text-secondary) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 10px 16px !important;
    font-size: 0.85rem !important;
    font-weight: var(--font-medium) !important;
    transition: all var(--transition-fast);
}

.modern-tabs .nav-link:hover {
    color: var(--text-primary) !important;
    background: var(--bg-tertiary) !important;
}

.modern-tabs .nav-link.active {
    background: transparent !important;
    background-image: none !important;
    color: var(--accent-blue) !important;
    border-bottom: 2px solid var(--accent-blue) !important;
}

/* === TICKET HERO === */
.ticket-hero {
    background: var(--bg-secondary) !important;
    background-image: none !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--radius-lg) !important;
}

.ticket-hero-stats {
    background: var(--bg-tertiary) !important;
    border-left: 1px solid var(--border-primary) !important;
}

.ticket-hero-stats .stat-value {
    color: var(--accent-blue) !important;
}

.ticket-hero-stats .stat-label {
    color: var(--text-tertiary) !important;
}

/* === OPERATIONS TABLE === */
.operations-table thead th {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-secondary) !important;
}

.operations-table tbody td {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

/* === LUCRU TICKET CARD === */
.lucru-ticket-card,
.lucru-ticket {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-primary) !important;
}

.lucru-ticket-header {
    background: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
}

/* === TICKET PROFILE PANEL (sidebar) === */
.ticket-profile-panel {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--radius-lg) !important;
}

.ticket-profile-panel .panel-section {
    border-bottom: 1px solid var(--border-primary) !important;
    padding: 14px !important;
}

.ticket-profile-panel .panel-section:last-child {
    border-bottom: none !important;
}

.ticket-profile-panel .panel-section-title {
    color: var(--accent-blue) !important;
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--font-semibold);
    margin-bottom: 8px;
}

/* === PILLS (Status, Alt motiv, etc) === */
.ticket-pill,
.status-pill {
    background: var(--bg-tertiary) !important;
    background-image: none !important;
    border: 1px solid var(--border-secondary) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-full) !important;
    padding: 4px 12px !important;
    font-size: 0.72rem !important;
    font-weight: var(--font-medium) !important;
}

.ticket-pill.status-nou,
.status-pill.status-nou,
.ticket-pill.status-new {
    background: var(--info-bg) !important;
    color: var(--info) !important;
    border-color: var(--info) !important;
}

.ticket-pill.status-finalizat,
.status-pill.status-finalizat,
.ticket-pill.status-completed {
    background: var(--success-bg) !important;
    color: var(--success) !important;
    border-color: var(--success) !important;
}

.ticket-pill.status-asteptare,
.status-pill.status-asteptare,
.ticket-pill.status-pending {
    background: var(--warning-bg) !important;
    color: var(--warning) !important;
    border-color: var(--warning) !important;
}

/* === MODIFICA TICKET BUTTON (bottom of left panel) === */
#btnModificaTicket,
.btn-modifica-ticket {
    background: var(--accent-blue) !important;
    background-image: none !important;
    color: white !important;
    border: 1px solid var(--accent-blue) !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 16px !important;
    font-weight: var(--font-medium) !important;
    box-shadow: none !important;
    width: 100%;
}

#btnModificaTicket:hover,
.btn-modifica-ticket:hover {
    background: var(--accent-blue-hover) !important;
    border-color: var(--accent-blue-hover) !important;
    color: white !important;
}