/* Common Component Styles */
@charset "utf-8"; 
/* Base Layout */
/* body { height: 100vh; overflow: hidden; } */

/* Base Typography */
.h1 { font-weight: 700; font-size: 22px; margin-bottom: 8px; color: #0f172a; } 
.h2 { font-weight: 700; font-size: 20px; margin-top: 10px; margin-bottom: 12px; color: #0f172a; } 
.hint { color: #64748b; font-size: 14px; line-height: 1.5; } 
.hint span.bold { font-weight: bold; color: #333; font-size: 14px; } 
.muted { color: #94a3b8; font-size: 12px; } 
/* Layout Components */
.wrap { display: flex; flex-direction: column; padding: 24px; height: 100%; box-sizing: border-box; } 
.wrap_fbx { margin-bottom: 24px; align-items: center; display: flex; justify-content: space-between; width: 100%; } 
.wrap_fbx .wrap_bx { display: flex; flex-direction: column; } 

/* Cards */
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } 
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 24px 0; } 
.cards.col-2 { grid-template-columns: repeat(2, 1fr); } 
.card .title { margin-top: 16px; font-size: 20px; font-weight: 600; } 
.card .muted { margin-top: 6px; font-size: 14px; color: #5d6063; } 
.card .value { margin-top: 10px; font-size: 36px; font-weight: 900; } 
/* Card Main Content */
.card-main { display: flex; align-items: center; justify-content: center; width: 100%; height: 34px; border-radius: 5px; font-size: 16px; font-weight: 600; margin-bottom: 8px; text-align: center; min-width: 60px; } 
.card-main.purple { background: #f3e8ff; color: #7e22ce; } 
.card-main.amber { background: #fef3c7; color: #b45309; } 
.card-main.green { background: #dcfce7; color: #166534; } 
.card-main.blue { background: #e0ecff; color: #1d4ed8; } 
.card-main.rose { background: #ffe4e6; color: #be123c; } 
/* Badges */
.badge { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; } 
.badge.b-purple { background: #f3e8ff; color: #7e22ce; } 
.badge.b-amber { background: #fef3c7; color: #b45309; } 
.badge.b-green { background: #dcfce7; color: #166534; } 
.badge.b-blue { background: #e0ecff; color: #1d4ed8; } 
.badge.b-rose { background: #ffe4e6; color: #be123c; } 
.badge.b-yellow { background: #fef3c7; color: #b45309; } 

/* Badge Size Variants */
.badge.small { padding: 6px 12px; font-size: 12px; font-weight: 500; } 
.badge.mini { padding: 4px 8px; font-size: 11px; } 

/* Common Badge Patterns */
.badge-status { 
 padding: 4px 10px; 
 border-radius: 6px; 
 font-size: 12px; 
 font-weight: bold; 
 color: white; 
 } 
.badge-status-primary { background: var(--ai-primary); } 
.badge-status-secondary { background: var(--ai-secondary); } 
.badge-status-danger { background: var(--ai-danger); } 
.badge-status-warning { background: var(--ai-warning); } 
 
/* Tables */
table { border: 1px solid #e2e8f0; border-top: none; position: relative; width: 100%; border-collapse: separate; border-spacing: 0; } 
th, td { padding: 12px 14px; border-bottom: 1px solid #e2e8f0; text-align: left; } 
th { border-top: 1px solid #e2e8f0; position: sticky; top: 0; z-index: 10; color: #333; font-weight: 600; background: #f8f9fa; font-size: 13px; box-shadow: 0 1px 0 #e2e8f0; } 
/* thead { border-top: 1px solid #e2e8f0; } */
tbody { background: #fff; } 
tbody tr:last-child td { border-bottom: 0; } 
tbody tr:hover { background: #f8f9fa; } 

td { font-size: 16px; color: #444; } 
.time,
td.time { font-size: 16px; color: #555; } 
.blue,
td.blue { font-size: 16px; color: #5067e3; font-weight: 500; } 
.bold,
td.bold { font-size: 16px; font-weight: bold; color: #333; } 

/* Table Scroll System */
.table-wrap { display: flex; flex-direction: column; min-height: 0; height: 100%; } 
.table-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; } 
/* Sticky header is now applied to all th elements by default */ 

/* Table Variants */
.table-consultant tbody tr { cursor: pointer; transition: all 0.2s; } 
.table-consultant tbody tr:hover { background: #f8faff; border-left: 3px solid #4880FF; } 
.table-consultant tbody tr.selected { background: #eff3fe; border-left: 3px solid #4880FF; } 
.table-assignment { margin-bottom: 20px; } 
.table-assignment th { background: #f8f9fa; } 
.table-assignment td { padding: 8px 14px; } 
/* Form Elements */
input, select, textarea { font-family: "Pretendard"; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 12px; background: #fff; font-size: 14px; transition: border-color 0.2s, box-shadow 0.2s; } 
input, select { height: 40px; } 
textarea { min-height: 80px; resize: vertical; } 
select { padding-right: 34px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: white url(/assets/img/public/arrow-down.png) no-repeat calc(100% - 12px) 50%; } 
input:focus, select:focus, textarea:focus { outline: none; border-color: #2e6ff2; box-shadow: 0 0 0 3px rgba(46, 111, 242, 0.1); } 
input::placeholder, textarea::placeholder { color: #94a3b8; } 

.input-box { display: flex; flex-direction: column; gap: 5px; } 
.input-box .title { font-size: 12px; font-weight: 500; color: #292929; } 
/* Buttons */
button, .btn { border: 1px solid #c7d2fe; background: #e9efff; color: #1d4ed8; border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; display: flex; justify-content: center; align-items: center; gap: 6px; } 
button:hover, .btn:hover { background: #dbeafe; border-color: #a5b4fc; } 
button:active, .btn:active { background: #bfdbfe; } 
button:disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; } 
.btn-disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; } 
button>svg, .btn>svg,
button .icon, .btn .icon { display: flex; align-items: center; justify-content: center; width: 18px; height: auto; aspect-ratio: 1/1; } 
button .icon svg, .btn .icon svg,
button .icon img, .btn .icon img { width: 100%; height: 100%; } 
/* Button Variants */
.btn-primary { background: #2e6ff2; border-color: #2e6ff2; color: #fff; } 
.btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; } 
.btn-secondary { background: #f1f5f9; border-color: #e2e8f0; color: #475569; } 
.btn-secondary:hover { background: #e2e8f0; border-color: #cbd5e1; } 

/* Button Size Variants */
.btn.small { padding: 6px 12px; font-size: 12px; } 
.btn.medium { padding: 8px 16px; font-size: 14px; } 
.btn.large { padding: 12px 20px; font-size: 16px; } 

/* Common Button Patterns */
.btn-icon { 
 display: flex; 
 align-items: center; 
 gap: 6px; 
 font-size: 14px; 
 } 
.btn-icon svg, 
.btn-icon i { 
 width: 16px; 
 height: 16px; 
 } 
/* Status Components */
.status-btn { background: #4880FF; color: #fff; border: 1px solid #4880FF; border-radius: 12px; height: 32px; padding: 6px 10px; font-size: 13px; cursor: pointer; font-weight: 500; } 
.certifications { display: flex; gap: 6px; flex-wrap: wrap; } 

/* Search & Filter Components */
.search-filters { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 24px; align-items: center; } 
.search-filters .search-filters-left { flex: 1; } 
.search-filters .search-filters-right { flex: 1; display: flex; justify-content: flex-end; gap: 16px; } 
.search-filters .search-filters-right .filter-select { min-width: 120px; } 
.search-input { display: flex; align-items: center; gap: 6px; flex: 1; max-width: 400px; position: relative; } 
.search-input .icon { width: 16px; height: 16px; display: block; flex-shrink: 0; position: absolute; left: 12px; } 
.search-input .icon img { width: 100%; height: 100%; display: block; flex-shrink: 0; } 
.search-input input { padding-left: 36px; width: 100%; } 
/* .filter-select { min-width: 120px; } */
.filter-date { display: flex; align-items: center; gap: 8px; } 

/* Section Headers */
.section-header { display: flex; flex-direction: column; margin-bottom: 16px; } 
.popup-content .section-header { margin-top: 24px; } 
.popup-content .section-header:first-child { margin-top: 0; } 
.section-title { font-size: 18px; font-weight: 600; color: #0f172a; } 

/* Batch Actions */
.batch-actions { border: 1px solid #e2e8f0; border-radius: 8px; justify-content: space-between; padding: 8px 14px; background: #fff; display: flex; align-items: center; gap: 12px; font-size: 14px; color: #64748b; } 
.batch-actions label { display: flex; align-items: center; gap: 4px; cursor: pointer; } 

/* Checkboxes */
.checkbox { width: 16px; height: 16px; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer; } 
.checkbox:checked { background: #4880FF; border-color: #4880FF; } 

/* Checkbox Groups */
.checkbox-group { display: flex; flex-wrap: wrap; gap: 12px; } 
.checkbox-item { display: flex; align-items: center; gap: 8px; } 
.checkbox-item input[type="checkbox"] { width: 18px; height: 18px; } 
.checkbox-item label { font-size: 14px; color: #475569; cursor: pointer; margin: 0; width: auto; } 

/* Image Upload */
.image-upload-container { display: flex; flex-direction: column; gap: 12px; } 
.image-preview { width: 120px; height: 120px; border: 2px dashed #e2e8f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } 
.image-preview.has-image { border-style: solid; border-color: #cbd5e1; } 
.image-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #94a3b8; } 
.image-placeholder .upload-icon { width: 32px; height: 32px; } 
.image-placeholder span { font-size: 12px; text-align: center; } 
#previewImage { width: 100%; height: 100%; object-fit: cover; } 

/* Status Badges */
.status-badge { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; min-width: 60px; text-align: center; } 
.status-complete { background: #dcfce7; color: #166534; } 
.status-progress { background: #dbeafe; color: #1d4ed8; } 
.status-pending { background: #fef3c7; color: #b45309; } 
.status-rejected { background: #fee2e2; color: #dc2626; } 

/* Priority Badges */
.priority-badge { font-weight: 600; min-width: 40px; text-align: center; } 
.priority-high { color: #dc2626; } 
.priority-medium { color: #f59e0b; } 
.priority-low { color: #10b981; } 

/* Action Buttons */
.action-btn { background: #4880FF; color: #fff; border: 1px solid #4880FF; border-radius: 12px; height: 32px; padding: 0 12px; font-size: 14px; cursor: pointer; font-weight: 500; display: flex; align-items: center; } 
.action-btn:hover { background: #3b6ff0; } 

/* Pagination */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 24px; } 
.page-btn { width: 32px; height: 32px; border: 1px solid #e2e8f0; background: #fff; color: #64748b; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; } 
.page-btn.active { background: #4880FF; border-color: #4880FF; color: #fff; } 
.page-btn:hover:not(.active) { background: #f8fafc; } 
/* Form Layout */
.form { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; } 

/* Form Elements */
.form-container { 
 display: grid; 
 grid-template-columns: 1fr 1fr; 
 gap: 24px; 
 margin-bottom: 24px; 
 } 

@media (max-width: 768px) { 
 .form-container { 
 grid-template-columns: 1fr; 
 gap: 16px; 
 } 
 } 

.form-group { 
 margin-bottom: 25px; 
 display: flex; 
 flex-direction: column; 
 } 

.form-group .input-box { 
 flex: 1; 
 min-width: 200px; 
 } 

.form-label { 
 display: block; 
 margin-bottom: 8px; 
 font-weight: 600; 
 color: #0f172a; 
 font-size: 14px; 
 } 
.form textarea { width: 100%; } 
.row { display: flex; gap: 12px; margin-bottom: 12px; align-items: center; } 
.row label { white-space: nowrap; font-size: 13px; color: #64748b; font-weight: 500; flex-shrink: 0; } 
.row input, .row select { flex: 1; } 
.row-dual { align-items: flex-start; } 
.row-dual .col { flex: 1; display: flex; flex-direction: column; gap: 6px; } 
.row-dual .col label { width: auto; margin-bottom: 0; } 
.row-dual .col input, .row-dual .col select { width: 100%; } 
.actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; } 
/* Filter Components */
.filter { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; } 
/* Value Display */
.value { font-size: 24px; font-weight: 800; margin-top: 8px; color: #0f172a; } 
/* Utility Classes */
.text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } 
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } 
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } 
.flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: 8px; } .gap-2 { gap: 16px; } 

/* Common Flex Layouts */
.flex-between-center { display: flex; justify-content: space-between; align-items: center; } 
.flex-center-center { display: flex; align-items: center; justify-content: center; } 
.flex-align-center { display: flex; align-items: center; } 
.flex-gap-12 { gap: 12px; } 

/* Common Layout Patterns */
.layout-header { 
 display: flex; 
 justify-content: space-between; 
 align-items: start; 
 } 
.layout-grid-3 { 
 display: grid; 
 grid-template-columns: repeat(3, 1fr); 
 gap: 20px; 
 } 
.layout-grid-2 { 
 display: grid; 
 grid-template-columns: repeat(2, 1fr); 
 gap: 20px; 
 } 
.layout-actions { 
 display: flex; 
 flex-direction: column; 
 gap: 10px; 
 } 

/* Common Text Styles */
.text-weight-600 { font-weight: 600; } 
.text-weight-bold { font-weight: bold; } 
.text-sm { font-size: 12px; } 
.text-md { font-size: 14px; } 
.text-lg { font-size: 16px; } 
.text-xl { font-size: 28px; } 

/* Color Utilities */
.text-dark { color: #0f172a; } 
.text-gray { color: #64748b; } 
.text-muted { color: #64748b; } 
.text-success { color: #166534; } 
.text-warning { color: #b45309; } 
.text-danger { color: #ef4444; } 
.text-primary { color: #10b981; } 

/* Status Colors */
.status-available { font-size: 12px; color: #166534; } 
.status-busy { font-size: 12px; color: #b45309; } 

/* Consultant Profile */
.consultant-profile { display: flex; align-items: center; gap: 12px; } 
.consultant-name { font-weight: 600; margin-bottom: 2px; } 
.consultant-position { font-size: 12px; color: #64748b; } 

/* Icon Containers */
.icon-container-sm { width: 16px; height: 16px; } 
.icon-container-md { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; } 
.icon-container-all { background: #2e6ff2; } 
.icon-container-success { background: #10b981; } 
.icon-container-warning { background: #f59e0b; } 
.icon-container-danger { background: #ef4444; } 

/* Common Icon Container Base */
.icon-container { 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 color: white; 
 border-radius: 6px; 
 } 
.icon-container-16 { width: 16px; height: 16px; } 
.icon-container-32 { width: 32px; height: 32px; } 
.icon-container-48 { width: 48px; height: 48px; } 
.icon-container-64 { width: 64px; height: 64px; } 

/* Dashboard Card Headers */
.dashboard-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } 
.dashboard-card-title { font-size: 16px; font-weight: 600; color: #0f172a; } 
.dashboard-card-value { font-size: 28px; font-weight: bold; margin-bottom: 8px; } 
.dashboard-card-desc { color: #64748b; font-size: 14px; margin-bottom: 16px; } 

/* Common Card Header Pattern */
.card-header { 
 display: flex; 
 justify-content: space-between; 
 align-items: center; 
 margin-bottom: 16px; 
 } 
.card-header-title { 
 font-size: 18px; 
 font-weight: 600; 
 color: #0f172a; 
 } 
.card-header-icon { 
 width: 32px; 
 height: 32px; 
 border-radius: 6px; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 color: white; 
 } 

/* Common Display Utilities */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

/* Form Validation Styles */
input.error, select.error, textarea.error {
  border-color: var(--ai-danger) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.error-message {
  color: var(--ai-danger);
  font-size: 12px;
  margin-top: 4px;
  display: block;
} 

/* Risk List Styles */
.risk-list { 
 padding: 20px 0; 
 } 

/* Risk Item Styles */
.risk-item { 
 padding: 20px; 
 border-radius: 12px; 
 margin-bottom: 16px; 
 border-left: 4px solid; 
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); 
 transition: all 0.2s ease; 
 } 

.risk-item:hover { 
 transform: translateY(-2px); 
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); 
 } 

.risk-item.high { 
 background: linear-gradient(135deg, #fef2f2, #fee2e2); 
 border-left-color: var(--ai-danger); 
 } 

.risk-item.medium { 
 background: linear-gradient(135deg, #fffbeb, #fed7aa); 
 border-left-color: var(--ai-warning); 
 } 

.risk-item.low { 
 background: linear-gradient(135deg, #f0fdf4, #dcfce7); 
 border-left-color: var(--ai-secondary); 
 } 

.risk-item-container { 
 display: flex; 
 justify-content: space-between; 
 align-items: flex-start; 
 gap: 16px; 
 } 

.risk-content { 
 flex: 1; 
 } 

.risk-title { 
 font-weight: 700; 
 font-size: 18px; 
 margin-bottom: 8px; 
 line-height: 1.4; 
 } 

.risk-title.high { color: #991b1b; } 
.risk-title.medium { color: #92400e; } 
.risk-title.low { color: #14532d; } 

.risk-description { 
 font-size: 15px; 
 margin-bottom: 12px; 
 line-height: 1.5; 
 } 

.risk-description.high { color: #7f1d1d; } 
.risk-description.medium { color: #78350f; } 
.risk-description.low { color: #166534; } 

.risk-stats { 
 display: flex; 
 flex-wrap: wrap; 
 gap: 16px; 
 font-size: 14px; 
 color: var(--ai-gray); 
 } 

.risk-stat-item { 
 display: flex; 
 align-items: center; 
 gap: 4px; 
 } 

.risk-stat-label { 
 font-weight: 600; 
 } 

.risk-stat-value { 
 font-weight: 500; 
 } 

.risk-action { 
 flex-shrink: 0; 
 } 

.risk-badge-container { 
 background: var(--ai-danger); 
 color: white; 
 padding: 4px 10px; 
 border-radius: 6px; 
 font-size: 12px; 
 font-weight: 600; 
 margin-right: 8px; 
 } 

.risk-badge-medium { 
 background: var(--ai-warning); 
 } 

.risk-badge-low { 
 background: var(--ai-secondary); 
 } 

/* Dashboard value styles */
.dashboard-value-success { 
 font-size: 32px; 
 font-weight: bold; 
 color: var(--secondary); 
 margin-bottom: 8px; 
 } 

.dashboard-value-danger { 
 font-size: 32px; 
 font-weight: bold; 
 color: var(--danger); 
 margin-bottom: 8px; 
 } 

.dashboard-value-primary { 
 font-size: 32px; 
 font-weight: bold; 
 color: var(--primary); 
 margin-bottom: 8px; 
 } 

/* Sidebar Popup */
.popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; opacity: 0; visibility: hidden; transition: 0.3s; } 
.popup-overlay.active { opacity: 1; visibility: visible; } 
body:has(.popup-overlay.active) { height: 100vh; overflow: hidden; } 
.popup-sidebar { opacity: 0; position: fixed; top: 0; right: -400px; min-width: 400px; width: 50vw; height: 100%; background: #fff; z-index: 1001; transition: 0.3s; overflow-y: auto; } 
.popup-sidebar.active { opacity: 1; right: 0; } 
.popup-header { padding: 20px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; } 
.popup-title { font-size: 18px; font-weight: 600; color: #0f172a; } 
.popup-close { background: none; border: none; font-size: 24px; color: #64748b; cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } 
.popup-close:hover { color: #374151; } 
.popup-content { padding: 20px; }

/* Enhanced AI Popup Sidebar Styles */
.ai-popup-sidebar { 
 background: linear-gradient(135deg, #f8fafc, #ffffff); 
 box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1); 
 border-left: 1px solid #e2e8f0; 
 } 

.ai-popup-sidebar .popup-header { 
 background: linear-gradient(135deg, var(--ai-primary), #3b82f6); 
 color: white; 
 border-bottom: none; 
 padding: 24px 20px; 
 border-radius: 0; 
 } 

.ai-popup-sidebar .popup-title { 
 font-size: 20px; 
 font-weight: 700; 
 color: white; 
 margin: 0; 
 line-height: 1.3; 
 } 

.ai-popup-sidebar .popup-close { 
 color: white; 
 background: rgba(255, 255, 255, 0.1); 
 border-radius: 8px; 
 transition: all 0.2s ease; 
 } 

.ai-popup-sidebar .popup-close:hover { 
 background: rgba(255, 255, 255, 0.2); 
 transform: scale(1.05); 
 } 

.ai-popup-content { 
 padding: 24px 20px; 
 font-size: 15px; 
 line-height: 1.6; 
 } 

.ai-popup-content h3 { 
 font-size: 18px; 
 font-weight: 600; 
 color: var(--ai-dark); 
 margin: 0 0 16px 0; 
 padding-bottom: 8px; 
 border-bottom: 2px solid var(--ai-primary); 
 display: flex; 
 align-items: center; 
 gap: 8px; 
 } 

.ai-popup-content h3 i { 
 color: var(--ai-primary); 
 } 

.ai-popup-content p { 
 margin: 0 0 16px 0; 
 color: var(--ai-gray); 
 } 

.ai-popup-content .form-group { 
 margin-bottom: 20px; 
 } 

.ai-popup-content .form-group label { 
 display: block; 
 font-weight: 600; 
 color: var(--ai-dark); 
 margin-bottom: 8px; 
 font-size: 14px; 
 } 

.ai-popup-content .form-group input, 
.ai-popup-content .form-group select, 
.ai-popup-content .form-group textarea { 
 width: 100%; 
 padding: 12px 16px; 
 border: 2px solid #e2e8f0; 
 border-radius: 8px; 
 font-size: 14px; 
 transition: all 0.2s ease; 
 background: white; 
 } 

.ai-popup-content .form-group input:focus, 
.ai-popup-content .form-group select:focus, 
.ai-popup-content .form-group textarea:focus { 
 outline: none; 
 border-color: var(--ai-primary); 
 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); 
 } 

.ai-popup-content .info-section { 
 background: #f8fafc; 
 border: 1px solid #e2e8f0; 
 border-radius: 12px; 
 padding: 20px; 
 margin-bottom: 20px; 
 } 

.ai-popup-content .info-section h4 { 
 font-size: 16px; 
 font-weight: 600; 
 color: var(--ai-dark); 
 margin: 0 0 12px 0; 
 display: flex; 
 align-items: center; 
 gap: 8px; 
 } 

.ai-popup-content .info-section h4 i { 
 color: var(--ai-primary); 
 } 

.ai-popup-content .info-item { 
 display: flex; 
 justify-content: space-between; 
 align-items: center; 
 padding: 8px 0; 
 border-bottom: 1px solid #e2e8f0; 
 } 

.ai-popup-content .info-item:last-child { 
 border-bottom: none; 
 } 

.ai-popup-content .info-label { 
 font-weight: 500; 
 color: var(--ai-gray); 
 font-size: 14px; 
 } 

.ai-popup-content .info-value { 
 font-weight: 600; 
 color: var(--ai-dark); 
 font-size: 14px; 
 } 

.ai-popup-footer { 
 padding: 20px; 
 border-top: 1px solid #e2e8f0; 
 background: #f8fafc; 
 display: flex; 
 gap: 12px; 
 justify-content: flex-end; 
 } 

/* Popup Content Cards */
.ai-popup-content .content-card { 
 background: white; 
 border: 1px solid #e2e8f0; 
 border-radius: 12px; 
 padding: 20px; 
 margin-bottom: 16px; 
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); 
 transition: all 0.2s ease; 
 } 

.ai-popup-content .content-card:hover { 
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
 transform: translateY(-1px); 
 } 

.ai-popup-content .content-card h5 { 
 font-size: 16px; 
 font-weight: 600; 
 color: var(--ai-dark); 
 margin: 0 0 12px 0; 
 display: flex; 
 align-items: center; 
 gap: 8px; 
 } 

.ai-popup-content .content-card h5 i { 
 color: var(--ai-primary); 
 } 

/* Status Badges in Popup */
.ai-popup-content .status-badge { 
 display: inline-flex; 
 align-items: center; 
 gap: 6px; 
 padding: 6px 12px; 
 border-radius: 20px; 
 font-size: 12px; 
 font-weight: 600; 
 } 

.ai-popup-content .status-badge.active { 
 background: #dcfce7; 
 color: #166534; 
 } 

.ai-popup-content .status-badge.pending { 
 background: #fef3c7; 
 color: #92400e; 
 } 

.ai-popup-content .status-badge.inactive { 
 background: #fee2e2; 
 color: #991b1b; 
 }

/* Checklist Items in Popup */
.ai-popup-content .checklist-item { 
 display: flex; 
 align-items: center; 
 gap: 12px; 
 padding: 12px 16px; 
 margin-bottom: 8px; 
 border-radius: 8px; 
 transition: all 0.2s ease; 
 font-size: 14px; 
 font-weight: 500; 
 } 

.ai-popup-content .checklist-item i { 
 width: 16px; 
 height: 16px; 
 flex-shrink: 0; 
 } 

.ai-popup-content .checklist-item.completed { 
 background: #f0fdf4; 
 color: #166534; 
 border-left: 4px solid var(--ai-secondary); 
 } 

.ai-popup-content .checklist-item.completed i { 
 color: var(--ai-secondary); 
 } 

.ai-popup-content .checklist-item.pending { 
 background: #fefbf2; 
 color: #92400e; 
 border-left: 4px solid var(--ai-warning); 
 } 

.ai-popup-content .checklist-item.pending i { 
 color: var(--ai-warning); 
 } 

.ai-popup-content .checklist-item.incomplete { 
 background: #fef2f2; 
 color: #991b1b; 
 border-left: 4px solid var(--ai-danger); 
 } 

.ai-popup-content .checklist-item.incomplete i { 
 color: var(--ai-danger); 
 } 

.ai-popup-content .checklist-item:hover { 
 transform: translateX(4px); 
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
 } 
.popup-footer { padding: 20px; border-top: 1px solid #e2e8f0; display: flex; gap: 12px; justify-content: flex-end; } 

/* Profile Components */
.profile-grid { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 16px; margin-bottom: 24px; } 
.profile-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; display: flex; gap: 16px; transition: all 0.2s; cursor: pointer; } 
.profile-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-color: #cbd5e1; } 
.profile-card.selected { border-color: #4880FF; box-shadow: 0 0 0 3px rgba(72, 128, 255, 0.1); background: #fafbff; } 

.profile-avatar { width: 140px; height: 100%; border-radius: 10px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #64748b; font-size: 28px; flex-shrink: 0; overflow: hidden; } 
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; } 

.profile-info { flex: 1; display: flex; flex-direction: column; gap: 8px; } 
.profile-header { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } 
.profile-name { font-size: 20px; font-weight: 600; color: #0f172a; } 
.profile-position { margin-top: 6px; font-size: 14px; color: #64748b; font-weight: 500; } 

.profile-contacts { display: flex; gap: 20px; margin-bottom: 12px; } 
.profile-contact { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #475569; } 
.profile-contact .icon { width: 16px; height: 16px; color: #94a3b8; } 

.profile-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } 
.profile-description { font-size: 13px; color: #64748b; line-height: 1.4; } 

/* Consultant Assignment Specific Styles */
.consultant-avatar { width: 40px; height: 40px; border-radius: 50%; background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #64748b; } 

/* Assignment Summary */
.assignment-summary { margin-bottom: 20px; } 
.popup-content h4 { font-size: 16px; font-weight: 600; color: #0f172a; margin-bottom: 12px; } 

/* Success State */
.success-icon { width: 64px; height: 64px; background: #dcfce7; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: #166534; font-size: 32px; } 
.success-message { text-align: center; margin-bottom: 24px; } 
.success-message h3 { font-size: 18px; font-weight: 600; color: #0f172a; margin-bottom: 8px; } 
.success-message p { font-size: 14px; color: #64748b; } 

/* Toast Messages */
.toast { position: fixed; top: 20px; right: 20px; z-index: 9999; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: flex; align-items: center; gap: 10px; min-width: 300px; max-width: 500px; transform: translateX(100%); opacity: 0; transition: all 0.3s ease; } 
.toast.toast-show { transform: translateX(0); opacity: 1; } 

.toast-success { border-left: 4px solid #10b981; } 
.toast-warning { border-left: 4px solid #f59e0b; } 
.toast-error { border-left: 4px solid #ef4444; } 

.toast-icon { width: 20px; height: 20px; flex-shrink: 0; } 
.toast-success .toast-icon { color: #10b981; } 
.toast-warning .toast-icon { color: #f59e0b; } 
.toast-error .toast-icon { color: #ef4444; } 

.toast-message { flex: 1; font-size: 14px; color: #374151; font-weight: 500; } 
.toast-close { background: none; border: none; font-size: 18px; color: #9ca3af; cursor: pointer; padding: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } 
.toast-close:hover { color: #6b7280; } 

/* Settings Page Styles */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; height: calc(100vh - 140px); } 
.settings-card { padding: 20px; } 
.settings-section-header { flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 20px; } 

/* Status Code Management */
.status-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid #f0f0f0; border-radius: 6px; } 
.status-item .badte { margin-bottom: 0; } 
.status-left { display: flex; align-items: center; gap: 12px; } 
.status-info { display: flex; flex-direction: column; gap: 4px; } 
.status-sla { font-size: 16px; font-weight: 600; } 
.status-desc { font-size: 14px; color: #666; } 
.status-right { display: flex; align-items: center; gap: 8px; } 
.status-indicator { width: 12px; height: 12px; border-radius: 50%; background: #10b981; } 

/* Priority Rules */
.priority-item { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-radius: 8px; } 
.priority-high { background: #fef2f2; border: 1px solid #fecaca; } 
.priority-medium { background: #fefbf2; border: 1px solid #fde68a; } 
.priority-low { background: #f0fdf4; border: 1px solid #bbf7d0; } 
.priority-title { font-weight: 600; font-size: 16px; margin-bottom: 8px; } 
.priority-high .priority-title { color: #dc2626; } 
.priority-medium .priority-title { color: #f59e0b; } 
.priority-low .priority-title { color: #10b981; } 
.priority-desc { font-size: 13px; color: #666; line-height: 1.4; } 

/* Role Management */
.role-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0; } 
.role-item:last-child { border-bottom: none; } 
.role-info { display: flex; flex-direction: column; } 
.role-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; } 
.role-desc { font-size: 12px; color: #666; } 
.role-actions { display: flex; align-items: center; gap: 8px; } 

/* Template Management */
.template-item { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; } 
.template-item:last-child { border-bottom: none; } 
.template-header { display: flex; align-items: center; justify-content: space-between; } 
.template-name { font-size: 14px; font-weight: 600; } 
.template-preview { font-size: 12px; color: #666; line-height: 1.4; } 

/* Common Flex Layouts */
.flex-col { display: flex; flex-direction: column; } 
.flex-col-gap { overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } 
.flex-between { display: flex; align-items: center; justify-content: space-between; } 
.flex-center { display: flex; align-items: center; } 
.flex-gap-8 { gap: 8px; } 
.flex-gap-12 { gap: 12px; } 
.flex-gap-16 { gap: 16px; } 

/* My Page */
.process_bbx { width: 100%; gap: 6px; display: flex; flex-direction: column; position: relative; } 
.process_bbx .percent { font-weight: 500; font-size: 16px; } 
.process_bbx .bar { width: 100%; height: 10px; position: relative; background: #E1EFFE; border-radius: 10px; } 
.process_bbx .bar_inner { height: 100%; background: #4880FF; border-radius: 5px; } 

.mb20 { margin-bottom: 20px; } 
.mb30 { margin-bottom: 30px; } 
.mt20 { margin-top: 20px; } 
.mt30 { margin-top: 30px; } 

.df { display: flex; } 
.fdc { flex-direction: column; } 
.aic { align-items: center; } 

.gap8 { gap: 8px; } 

.overflow-y-auto { overflow-y: auto; } 

/* Request Card Styles */
.request-info-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-bottom: 24px; } 
.request-info-item { display: flex; flex-direction: column; } 
.request-info-label { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-bottom: 8px; color: #6b7280; } 
.request-info-label .icon { width: 16px; height: 16px; color: #6b7280; } 
.request-info-value { color: #222; border: 1px solid #9eb8ff; border-radius: 6px; padding: 6px 10px; } 
.request-special-list { border-radius: 6px; background: #f5f8fe; padding: 16px 12px 16px 30px; line-height: 1.6; color: #111; margin: 0; } 
.request-special-list li { position: relative; } 
.request-special-list li:before { content: ''; position: absolute; left: -12px; top: 10px; width: 4px; height: auto; aspect-ratio: 1/1; border-radius: 50%; background: #666; } 

/* ===== ISO AI PLATFORM STYLES ===== */

/* Root Variables for ISO AI Platform */
:root { 
 --ai-primary: #4880FF; 
 --ai-primary-dark: #3b6ff0; 
 --ai-primary-light: #6b8fff; 
 --ai-secondary: #10b981; 
 --ai-danger: #ef4444; 
 --ai-warning: #f59e0b; 
 --ai-dark: #1f2937; 
 --ai-gray: #64748b; 
 --ai-light: #f1f5f9; 
 --ai-white: #ffffff; 
 } 

/* Common Color Classes */
.color-primary { color: var(--ai-primary); } 
.color-secondary { color: var(--ai-secondary); } 
.color-danger { color: var(--ai-danger); } 
.color-warning { color: var(--ai-warning); } 
.color-gray { color: var(--ai-gray); } 
.color-dark { color: var(--ai-dark); } 

/* Common Background Color Classes */
.bg-primary { background-color: var(--ai-primary); } 
.bg-secondary { background-color: var(--ai-secondary); } 
.bg-danger { background-color: var(--ai-danger); } 
.bg-warning { background-color: var(--ai-warning); } 
.bg-light { background-color: var(--ai-light); } 
.bg-white { background-color: var(--ai-white); } 

/* Dashboard Grid */
.dashboard-grid { 
 display: grid; 
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
 gap: 25px; 
 margin-bottom: 30px; 
 } 

/* AI Dashboard Cards */
.ai-card { 
 background: #fff; 
 border-radius: 10px; 
 padding: 12px 16px; 
 position: relative; 
 overflow: hidden; 
 border: 1px solid #e2e8f0; 
 } 

 .ai-card-flex { 
 display: flex; 
 align-items: center; justify-content: space-between; 
 } 

 .ai-card-left { display: flex; flex-direction: column; gap: 8px; width: 100%; flex-shrink: 1; } 
 .ai-card-right { width: 100px; flex-shrink: 0; } 

.ai-card-header { 
 display: flex; 
 justify-content: space-between; 
 align-items: center; 
 margin-bottom: 10px; 
 } 

.ai-card-title { 
 font-size: 18px; 
 font-weight: 600; 
 color: var(--ai-dark); 
 } 

.ai-card-icon { 
 width: 32px; 
 height: 32px; 
 background: linear-gradient(135deg, var(--ai-primary-light) 0%, var(--ai-primary) 100%); 
 border-radius: 10px; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 } 

 .ai-card-icon svg { 
 width: 16px; 
 height: 16px; 
 color: #fff; 
 } 

 .ai-card-icon img { 
 width: 16px; 
 height: 16px; 
 } 

.ai-card-value { 
 font-size: 32px; 
 font-weight: bold; 
 background: linear-gradient(135deg, var(--ai-primary) 0%, var(--ai-secondary) 100%); 
 -webkit-background-clip: text; 
 -webkit-text-fill-color: transparent; 
 background-clip: text; 
 margin-bottom: 6px;
 } 

.ai-card-description { 
 color: var(--ai-gray); 
 font-size: 14px; 
 } 

/* Progress Bars */
.ai-progress-bar { 
 width: 100%; 
 height: 8px; 
 background: var(--ai-light); 
 border-radius: 10px; 
 overflow: hidden; 
 margin-top: 15px; 
 } 

.ai-progress-fill { 
 height: 100%; 
 background: linear-gradient(90deg, var(--ai-primary), var(--ai-secondary)); 
 border-radius: 10px; 
 transition: width 1s ease; 
 } 

/* Common Progress Bar Patterns */
.progress-bar { 
 width: 100%; 
 height: 10px; 
 background: #E1EFFE; 
 border-radius: 10px; 
 overflow: hidden; 
 position: relative; 
 } 
.progress-fill { 
 height: 100%; 
 background: var(--ai-primary); 
 border-radius: 5px; 
 transition: width 1s ease; 
 } 
.progress-fill-warning { background: var(--ai-warning); } 
.progress-fill-danger { background: var(--ai-danger); } 
.progress-fill-secondary { background: var(--ai-secondary); } 


/* AI Header Styles */
.ai-header { 
 border-radius: 10px; 
 padding: 12px 16px; 
 margin-bottom: 30px; 
 background: #fff; 
 border: 1px solid #e2e8f0; 
 } 

.ai-header-top { 
 display: flex; 
 justify-content: space-between; 
 align-items: center; 
 margin-bottom: 10px; 
 } 

.ai-header-title { 
 font-size: 24px; 
 font-weight: bold; 
 color: #487AF5; 
 } 

.ai-header-actions { 
 display: flex; 
 gap: 15px; 
 } 



/* Chat Container */
.chat-container { 
 height: 100%; 
 display: flex; 
 flex-direction: column; 
 } 

/* Chat specific styles */
.chat-assistant-name { 
 font-weight: bold; 
 font-size: 18px; 
 } 

.chat-assistant-desc { 
 color: var(--ai-gray); 
 font-size: 14px; 
 margin-top: 4px;
 } 

.chat-header-actions { 
 margin-left: auto; 
 } 

.chat-quick-buttons { 
 margin-top: 15px; 
 display: flex; 
 flex-wrap: wrap; 
 gap: 8px; 
 } 

.chat-quick-btn { 
 padding: 6px 12px; 
 font-size: 12px; 
 } 

.typing-indicator-content { 
 display: flex; 
 align-items: center; 
 gap: 8px; 
 } 

/* AI Chat Section */
.ai-chat-section { 
 background: rgba(255, 255, 255, 0.95); 
 backdrop-filter: blur(10px); 
 border-radius: 20px; 
 padding: 25px; 
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 
 height: calc(100vh - 48px); 
 border: 1px solid #e2e8f0; 
 display: flex; 
 flex-direction: column; 
 } 

.ai-chat-header { 
 display: flex; 
 align-items: center; 
 padding-bottom: 20px; 
 border-bottom: 2px solid var(--ai-light); 
 margin-bottom: 20px; 
 } 

.ai-avatar { 
 width: 50px; 
 height: 50px; 
 background: linear-gradient(135deg, var(--ai-secondary) 0%, var(--ai-primary) 100%); 
 border-radius: 15px; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 color: white; 
 font-weight: bold; 
 margin-right: 15px; 
 } 

.ai-chat-messages { 
 flex: 1; 
 overflow-y: auto; 
 padding: 20px 0; 
 } 

.ai-message { 
 display: flex; 
 margin-bottom: 20px; 
 animation: slideIn 0.3s ease; 
 } 

@keyframes slideIn { 
 from { 
 opacity: 0; 
 transform: translateY(10px); 
 } 
 to { 
 opacity: 1; 
 transform: translateY(0); 
 } 
 } 

.ai-message-content { 
 max-width: 70%; 
 padding: 15px 20px; 
 border-radius: 15px; 
 position: relative; 
 } 

.ai-message.user { 
 justify-content: flex-end; 
 } 

.ai-message.user .ai-message-content { 
 background: linear-gradient(135deg, var(--ai-primary) 0%, var(--ai-primary-dark) 100%); 
 color: white; 
 } 

.ai-message.ai .ai-message-content { 
 background: var(--ai-light); 
 color: var(--ai-dark); 
 } 

 

 



/* Dashboard Timeline */
.dashboard-timeline { 
 position: relative; 
 padding-left: 30px; 
 margin-top: 20px; 
 } 

.timeline-item { 
 position: relative; 
 margin-bottom: 20px; 
 padding-left: 20px; 
 border-left: 2px solid #e2e8f0; 
 } 

.timeline-dot { 
 position: absolute; 
 left: -6px; 
 top: 5px; 
 width: 10px; 
 height: 10px; 
 border-radius: 50%; 
 border: 2px solid white; 
 } 

.timeline-dot-primary { background: #4880FF; } 
.timeline-dot-success { background: #10b981; } 
.timeline-dot-warning { background: #f59e0b; } 
.timeline-dot-danger { background: #ef4444; } 

.timeline-content { 
 background: #f8fafc; 
 padding: 12px; 
 border-radius: 8px; 
 } 

.timeline-date { 
 font-size: 12px; 
 color: #64748b; 
 margin-bottom: 4px; 
 } 

.timeline-title { 
 font-weight: 600; 
 margin-bottom: 4px; 
 } 

.timeline-desc { 
 font-size: 14px; 
 color: #475569; 
 } 

 

/* AI File Upload */
.ai-file-upload { 
 border: 2px dashed var(--ai-primary-light); 
 border-radius: 15px; 
 padding: 30px; 
 text-align: center; 
 background: white; 
 cursor: pointer; 
 transition: all 0.3s ease; 
 } 

.ai-file-upload:hover { 
 background: var(--ai-light); 
 border-color: var(--ai-primary); 
 } 

.ai-file-upload.dragover { 
 background: var(--ai-light); 
 border-color: var(--ai-primary); 
 } 

/* AI Loading Animation */
.ai-loading { 
 display: inline-block; 
 width: 20px; 
 height: 20px; 
 border: 3px solid var(--ai-light); 
 border-top-color: var(--ai-primary); 
 border-radius: 50%; 
 animation: spin 1s linear infinite; 
 } 

@keyframes spin { 
 to { transform: rotate(360deg); } 
 } 

/* Document Generation Styles */
.doc-upload-card { 
 background: linear-gradient(135deg, #eff6ff, #f0f9ff); 
 border: 2px dashed var(--ai-primary-light); 
 margin-bottom: 30px; 
 } 

.doc-upload-container { 
 display: flex; 
 gap: 20px; 
 align-items: stretch; 
 } 

.doc-upload-main { 
 flex: 1; 
 } 

.doc-upload-desc { 
 color: var(--ai-gray); 
 margin-bottom: 15px; 
 font-size: 14px; 
 } 

.doc-file-icon { 
 font-size: 40px; 
 margin-bottom: 10px; 
 } 

.doc-upload-title { 
 font-weight: bold; 
 margin-bottom: 5px; 
 } 

.doc-upload-note { 
 color: var(--ai-gray); 
 font-size: 14px; 
 } 

.doc-uploaded-files { 
 margin-top: 15px; 
 } 

.doc-upload-sidebar { 
 width: 250px; 
 } 

.doc-data-info { 
 background: var(--ai-light); 
 border-radius: 10px; 
 padding: 15px; 
 } 

.doc-data-title { 
 font-weight: bold; 
 margin-bottom: 10px; 
 font-size: 14px; 
 } 

.doc-data-item { 
 margin-bottom: 8px; display: flex; align-items: center; gap: 4px; 
 } 

.doc-header-desc { 
 color: var(--ai-gray); 
 } 

.doc-icon-lg { 
 width: 64px; 
 height: 64px; 
 margin: 0 auto 20px; 
 } 

.doc-result-title { 
 font-size: 20px; 
 font-weight: bold; 
 margin-bottom: 15px; 
 text-align: center; 
 } 

.doc-result-desc { 
 color: var(--ai-gray); 
 margin-bottom: 20px; 
 text-align: center; 
 } 

.doc-result-actions { 
 display: flex; 
 gap: 10px; 
 justify-content: center; 
 margin-bottom: 30px; 
 } 

.doc-result-list { 
 background: var(--ai-light); 
 border-radius: 10px; 
 padding: 20px; 
 } 

.doc-result-item { 
 padding: 12px 0; 
 border-bottom: 1px solid #e2e8f0; 
 display: flex; 
 justify-content: space-between; 
 align-items: center; 
 } 

.doc-result-item:last-child { 
 border-bottom: none; 
 } 

.doc-result-name { 
 font-weight: 600; 
 } 

.doc-result-size { 
 color: var(--ai-gray); 
 font-size: 12px; 
 } 

/* AI Document Generator */
.ai-document-generator { 
 background: rgba(255, 255, 255, 0.95); 
 backdrop-filter: blur(10px); 
 border-radius: 20px; 
 padding: 30px; 
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 
 border: 1px solid #e2e8f0; 
 } 

/* AI Risk Matrix */
.ai-risk-matrix { 
 display: grid; 
 grid-template-columns: repeat(3, 1fr); 
 gap: 15px; 
 margin-top: 20px; 
 } 

.ai-risk-cell { 
 border-radius: 15px; 
 height: 40px; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 font-weight: bold; 
 color: white; 
 cursor: pointer; 
 transition: all 0.3s ease; 
 position: relative; 
 overflow: hidden; 
 } 

.ai-risk-cell:before { 
 content: ''; 
 position: absolute; 
 top: 0; 
 left: 0; 
 right: 0; 
 bottom: 0; 
 background: rgba(255, 255, 255, 0.2); 
 transform: scale(0); 
 border-radius: 50%; 
 transition: transform 0.5s ease; 
 } 

.ai-risk-cell:hover:before { 
 transform: scale(2); 
 } 

.ai-risk-low { 
 background: linear-gradient(135deg, #10b981 0%, #059669 100%); 
 } 

.ai-risk-medium { 
 background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); 
 } 

.ai-risk-high { 
 background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); 
 } 

/* Compliance Gauge */
.compliance-gauge { 
 height: 200px; 
 width: 100%; 
 min-width: 200px; 
 } 

/* AI Compliance Gauge */
.ai-compliance-gauge { 
 width: 200px; 
 height: 200px; 
 margin: 20px auto; 
 position: relative; 
 } 

.ai-gauge-circle { 
 width: 100%; 
 height: 100%; 
 border-radius: 50%; 
 background: conic-gradient(
 var(--ai-secondary) 0deg,
 var(--ai-secondary) calc(var(--percentage) * 3.6deg),
 var(--ai-light) calc(var(--percentage) * 3.6deg)
 ); 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 position: relative; 
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 
 } 

.ai-gauge-inner { 
 width: 85%; 
 height: 85%; 
 border-radius: 50%; 
 background: white; 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
 justify-content: center; 
 } 

.ai-gauge-value { 
 font-size: 36px; 
 font-weight: bold; 
 background: linear-gradient(135deg, var(--ai-primary) 0%, var(--ai-secondary) 100%); 
 -webkit-background-clip: text; 
 -webkit-text-fill-color: transparent; 
 background-clip: text; 
 } 

.ai-gauge-label { 
 color: var(--ai-gray); 
 font-size: 14px; 
 margin-top: 5px; 
 } 

/* Audit Management Styles */
.audit-tabs { 
 display: flex; 
 gap: 10px; 
 padding: 20px; 
 border-bottom: 2px solid var(--ai-light); 
 } 

.audit-tab { 
 padding: 10px 20px; 
 border: none; 
 border-radius: 10px; 
 cursor: pointer; 
 font-weight: 600; 
 transition: all 0.3s ease; 
 display: flex; 
 align-items: center; 
 gap: 8px; 
 font-size: 14px; 
 } 

.audit-tab:not(.active) { 
 background: var(--ai-light); 
 color: var(--ai-dark); 
 border: 1px solid #e2e8f0; 
 } 

.audit-tab:not(.active):hover { 
 background: #e5e7eb; 
 } 

.audit-tab-content { 
 padding: 20px; 
 }

/* Audit Item Styles */
.audit-item { 
 padding: 20px; 
 border-radius: 12px; 
 margin-bottom: 16px; 
 border-left: 4px solid; 
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); 
 transition: all 0.2s ease; 
 } 

.audit-item:hover { 
 transform: translateY(-2px); 
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); 
 } 

.audit-item.upcoming { 
 background: linear-gradient(135deg, #fef2f2, #fee2e2); 
 border-left-color: var(--ai-danger); 
 } 

.audit-item.ongoing { 
 background: linear-gradient(135deg, #eff6ff, #dbeafe); 
 border-left-color: var(--ai-primary); 
 } 

.audit-item.completed { 
 background: linear-gradient(135deg, #f0fdf4, #dcfce7); 
 border-left-color: var(--ai-secondary); 
 } 

.audit-item-container { 
 display: flex; 
 justify-content: space-between; 
 align-items: flex-start; 
 gap: 16px; 
 } 

.audit-content { 
 flex: 1; 
 } 

.audit-header { 
 display: flex; 
 align-items: center; 
 gap: 10px; 
 margin-bottom: 12px; 
 } 

.audit-badge { 
 padding: 4px 10px; 
 border-radius: 6px; 
 font-size: 12px; 
 font-weight: 600; 
 color: white; 
 } 

.audit-badge.upcoming { background: var(--ai-danger); } 
.audit-badge.ongoing { background: var(--ai-primary); } 
.audit-badge.completed { background: var(--ai-secondary); } 

.audit-title { 
 font-weight: 700; 
 font-size: 18px; 
 margin: 0; 
 line-height: 1.4; 
 } 

.audit-title.upcoming { color: #991b1b; } 
.audit-title.ongoing { color: #1e40af; } 
.audit-title.completed { color: #14532d; } 

.audit-details { 
 display: grid; 
 grid-template-columns: repeat(3, 1fr); 
 gap: 20px; 
 margin-top: 15px; 
 font-size: 14px; 
 } 

.audit-detail-item { 
 display: flex; 
 flex-direction: column; 
 gap: 4px; 
 } 

.audit-detail-label { 
 color: var(--ai-gray); 
 font-weight: 500; 
 font-size: 13px; 
 } 

.audit-detail-value { 
 font-weight: 600; 
 color: var(--ai-dark); 
 } 

.audit-detail-value.warning { color: var(--ai-warning); } 

.audit-actions { 
 display: flex; 
 flex-direction: column; 
 gap: 10px; 
 flex-shrink: 0; 
 } 

.audit-progress { 
 margin-top: 15px; 
 } 

.audit-progress-bar { 
 width: 100%; 
 height: 10px; 
 background: rgba(255, 255, 255, 0.5); 
 border-radius: 10px; 
 overflow: hidden; 
 } 

.audit-progress-fill { 
 height: 100%; 
 border-radius: 5px; 
 transition: width 1s ease; 
 } 

.audit-progress-fill.upcoming { background: var(--ai-warning); } 
.audit-progress-fill.ongoing { background: var(--ai-primary); } 
.audit-progress-fill.completed { background: var(--ai-secondary); } 

 

/* Responsive Design */
@media (max-width: 768px) { 
 .dashboard-grid { 
 grid-template-columns: 1fr; 
 } 
 
 .ai-header-title { 
 font-size: 20px; 
 } 
 
 .ai-header-actions { 
 flex-direction: column; 
 gap: 10px; 
 } 
 
 .ai-card { 
 padding: 20px; 
 } 
 

 }