/*
 * HRMS Freelancer - Main Stylesheet
 * Styles for the freelancer management module
 */

:root {
  --fl-primary: #0066cc;
  --fl-primary-light: rgba(0, 102, 204, 0.1);
  --fl-success: #28a745;
  --fl-success-light: rgba(40, 167, 69, 0.1);
  --fl-warning: #ffc107;
  --fl-warning-light: rgba(255, 193, 7, 0.1);
  --fl-danger: #dc3545;
  --fl-danger-light: rgba(220, 53, 69, 0.1);
  --fl-info: #17a2b8;
  --fl-info-light: rgba(23, 162, 184, 0.1);
  --fl-muted: #6c757d;
  --fl-muted-light: rgba(108, 117, 125, 0.1);
}

/* Freelancer Form Styles */
.frappe-form[data-doctype="Freelancer"] .form-section,
.frappe-form[data-doctype="Freelancer Contract"] .form-section,
.frappe-form[data-doctype="Freelancer Payment"] .form-section {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Compliance Dashboard in Freelancer Form */
.freelancer-compliance-dashboard {
  padding: 15px;
  background: var(--bg-color);
  border-radius: 8px;
  margin-bottom: 15px;
}

.compliance-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  margin: 5px 0;
}

.compliance-item i {
  margin-right: 10px;
  font-size: 18px;
}

.compliance-item.compliant {
  background: var(--fl-success-light);
  color: var(--fl-success);
}

.compliance-item.non-compliant {
  background: var(--fl-danger-light);
  color: var(--fl-danger);
}

.compliance-item.pending {
  background: var(--fl-warning-light);
  color: var(--fl-warning);
}

.compliance-item.na {
  background: var(--fl-muted-light);
  color: var(--fl-muted);
}

/* Contract Summary Dashboard */
.contract-summary-dashboard {
  padding: 15px;
  background: var(--bg-color);
  border-radius: 8px;
  margin-bottom: 15px;
}

.summary-card {
  text-align: center;
  padding: 15px;
  background: var(--card-bg);
  border-radius: 8px;
}

.summary-card h6 {
  color: var(--text-muted);
  margin-bottom: 5px;
  font-size: 12px;
  text-transform: uppercase;
}

.summary-card .value {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-color);
}

/* Payment Tax Breakdown */
.payment-tax-breakdown {
  padding: 15px;
  background: var(--bg-color);
  border-radius: 8px;
  margin-bottom: 15px;
}

.payment-tax-breakdown table {
  margin-bottom: 0;
  width: 100%;
}

.payment-tax-breakdown td {
  padding: 10px;
}

.payment-tax-breakdown .subtotal td {
  background: var(--subtle-fg);
  font-weight: 500;
}

.payment-tax-breakdown .total td {
  background: var(--fl-primary);
  color: white;
  font-weight: bold;
}

.payment-tax-breakdown .withholding td {
  background: var(--fl-danger-light);
}

.reverse-charge-notice {
  margin-top: 10px;
  padding: 10px 15px;
  background: var(--fl-info-light);
  border-radius: 5px;
  color: var(--fl-info);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* EU Status Badges */
.eu-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 500;
}

.eu-status-badge.eu-resident {
  background: var(--fl-primary-light);
  color: var(--fl-primary);
}

.eu-status-badge.non-eu-resident {
  background: var(--fl-muted-light);
  color: var(--fl-muted);
}

/* VAT Status */
.vat-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 500;
}

.vat-badge.registered {
  background: var(--fl-success-light);
  color: var(--fl-success);
}

.vat-badge.not-registered {
  background: var(--fl-muted-light);
  color: var(--fl-muted);
}

/* Payment Status Badges */
.payment-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

.payment-status.draft {
  background: var(--fl-muted-light);
  color: var(--fl-muted);
}

.payment-status.pending-approval {
  background: var(--fl-warning-light);
  color: #856404;
}

.payment-status.approved {
  background: var(--fl-primary-light);
  color: var(--fl-primary);
}

.payment-status.paid {
  background: var(--fl-success-light);
  color: var(--fl-success);
}

.payment-status.rejected {
  background: var(--fl-danger-light);
  color: var(--fl-danger);
}

/* Contract Status */
.contract-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

.contract-status.active {
  background: var(--fl-success-light);
  color: var(--fl-success);
}

.contract-status.draft {
  background: var(--fl-muted-light);
  color: var(--fl-muted);
}

.contract-status.expired {
  background: var(--fl-danger-light);
  color: var(--fl-danger);
}

.contract-status.terminated {
  background: var(--fl-warning-light);
  color: #856404;
}

/* Milestone Progress */
.milestone-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.milestone-progress .progress-bar {
  flex: 1;
  height: 8px;
  background: var(--fl-muted-light);
  border-radius: 4px;
  overflow: hidden;
}

.milestone-progress .progress-fill {
  height: 100%;
  background: var(--fl-primary);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.milestone-progress .progress-text {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Currency Display */
.currency-amount {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
  font-size: 14px;
}

.currency-amount.large {
  font-size: 24px;
  font-weight: bold;
}

.currency-amount.negative {
  color: var(--fl-danger);
}

.currency-amount.positive {
  color: var(--fl-success);
}

/* Tax Calculator Widget */
.tax-calculator-widget {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.tax-calculator-widget h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
}

.tax-breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
}

.tax-breakdown-row:last-child {
  border-bottom: none;
}

.tax-breakdown-row.total {
  font-weight: bold;
  font-size: 18px;
  padding-top: 15px;
  margin-top: 10px;
  border-top: 2px solid var(--fl-primary);
}

/* List View Customizations */
.list-row[data-doctype="Freelancer Payment"] .list-row-container,
.list-row[data-doctype="Freelancer Contract"] .list-row-container,
.list-row[data-doctype="Freelancer"] .list-row-container {
  transition: background 0.2s;
}

.list-row[data-doctype="Freelancer Payment"]:hover .list-row-container,
.list-row[data-doctype="Freelancer Contract"]:hover .list-row-container,
.list-row[data-doctype="Freelancer"]:hover .list-row-container {
  background: var(--fl-primary-light);
}

/* Compliance Alert Banners */
.compliance-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 15px;
}

.compliance-alert.warning {
  background: var(--fl-warning-light);
  border-left: 4px solid var(--fl-warning);
}

.compliance-alert.danger {
  background: var(--fl-danger-light);
  border-left: 4px solid var(--fl-danger);
}

.compliance-alert.info {
  background: var(--fl-info-light);
  border-left: 4px solid var(--fl-info);
}

.compliance-alert i {
  font-size: 20px;
}

.compliance-alert .alert-content {
  flex: 1;
}

.compliance-alert .alert-title {
  font-weight: 600;
  margin-bottom: 3px;
}

.compliance-alert .alert-message {
  font-size: 13px;
  color: var(--text-muted);
}

/* GDPR Consent Indicator */
.gdpr-consent-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 8px;
  font-size: 13px;
}

.gdpr-consent-status.obtained {
  background: var(--fl-success-light);
  color: var(--fl-success);
}

.gdpr-consent-status.not-obtained {
  background: var(--fl-danger-light);
  color: var(--fl-danger);
}

/* Print Styles */
@media print {
  .frappe-form .page-actions,
  .frappe-form .form-sidebar {
    display: none !important;
  }
  
  .payment-tax-breakdown {
    border: 1px solid #ddd;
  }
  
  .reverse-charge-notice {
    border: 1px solid #17a2b8;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :root {
    --fl-primary-light: rgba(0, 102, 204, 0.2);
    --fl-success-light: rgba(40, 167, 69, 0.2);
    --fl-warning-light: rgba(255, 193, 7, 0.2);
    --fl-danger-light: rgba(220, 53, 69, 0.2);
    --fl-info-light: rgba(23, 162, 184, 0.2);
    --fl-muted-light: rgba(108, 117, 125, 0.2);
  }
}

/* Animation for status changes */
@keyframes statusPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.status-updated {
  animation: statusPulse 0.3s ease-out;
}

/* Loading states */
.fl-loading {
  position: relative;
  pointer-events: none;
}

.fl-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .contract-summary-dashboard .row {
    flex-direction: column;
  }
  
  .compliance-item {
    flex-direction: column;
    text-align: center;
  }
  
  .compliance-item i {
    margin-right: 0;
    margin-bottom: 5px;
  }
  
  .payment-tax-breakdown table {
    font-size: 12px;
  }
}

/* Freelancer self-service portal */
.freelancer-portal .portal-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
}
.freelancer-portal .portal-card {
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.freelancer-portal .portal-preview {
  margin-top: 1rem;
  max-height: 360px;
  overflow: auto;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 0.75rem;
  white-space: pre-wrap;
}

.portal-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.portal-list { margin-top: 1rem; }
.portal-list-item, .candidate-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem; margin-bottom: .75rem; background: #fff; }
.candidate-profile { border-left: 4px solid #e5e7eb; padding: .75rem 1rem; margin: .75rem 0; background: #fafafa; max-height: 450px; overflow: auto; }
.feedback-row { display: grid; gap: .5rem; grid-template-columns: minmax(120px, 180px) 1fr auto; align-items: start; }
@media (max-width: 768px) { .feedback-row { grid-template-columns: 1fr; } }

/* HRMS Freelancer 5.0 portal surfaces */
.fl-v5-page { max-width: 1440px; margin: 0 auto; padding: 28px 18px 60px; }
.fl-v5-header { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:22px; }
.fl-v5-header h1 { margin:4px 0 6px; font-size:32px; font-weight:750; letter-spacing:-.02em; }
.fl-v5-header p { margin:0; color:#667085; max-width:760px; }
.fl-v5-actions,.fl-button-row { display:flex; gap:10px; flex-wrap:wrap; }
.fl-eyebrow { display:block; font-size:11px; font-weight:800; letter-spacing:.12em; color:#0066cc; }
.fl-notice { padding:12px 14px; border-radius:10px; margin:12px 0 18px; border:1px solid #d7e7f7; background:#f3f8ff; color:#31597e; }
.fl-notice.success { background:#ecfdf3; border-color:#cbeed8; color:#166534; }
.fl-notice.danger { background:#fff1f2; border-color:#ffd4da; color:#9f1239; }
.fl-notice.info { background:#f3f8ff; border-color:#d7e7f7; color:#31597e; }
.fl-metric-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.fl-metric { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:16px; min-height:88px; box-shadow:0 2px 12px rgba(15,23,42,.04); }
.fl-metric strong { display:block; font-size:24px; line-height:1.2; margin-bottom:8px; }
.fl-metric span { color:#667085; font-size:12px; }
.fl-dashboard-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:16px; align-items:start; }
.fl-panel { background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:18px; box-shadow:0 2px 14px rgba(15,23,42,.04); margin-bottom:0; }
.fl-panel-wide { min-width:0; }
.fl-panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:16px; }
.fl-panel-head h3 { margin:0; font-size:18px; }
.fl-panel-head span { color:#667085; font-size:12px; max-width:55%; text-align:right; }
.fl-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.fl-form-grid label,.fl-auth-form label,.fl-feedback-grid label,.fl-panel>label { display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:650; color:#475467; }
.fl-span-2 { grid-column:span 2; }
.fl-list-row { display:flex; flex-direction:column; gap:3px; padding:12px 0; border-bottom:1px solid #eef2f6; color:#1f2937; text-decoration:none; }
.fl-list-row:last-child { border-bottom:0; }
.fl-list-row span { color:#475467; font-size:12px; }
.fl-list-row small { color:#667085; }
.fl-kanban { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; }
.fl-kanban-col { min-width:250px; max-width:280px; flex:1; background:#f7f9fc; border-radius:14px; padding:10px; }
.fl-kanban-title { display:flex; justify-content:space-between; align-items:center; padding:4px 4px 10px; }
.fl-kanban-title span { background:#eaf3ff; color:#0066cc; border-radius:999px; padding:2px 8px; font-size:11px; font-weight:700; }
.fl-request-card { display:flex; flex-direction:column; gap:5px; background:#fff; border:1px solid #e1e7ef; border-radius:12px; padding:12px; margin-bottom:9px; color:#1f2937; text-decoration:none; box-shadow:0 1px 4px rgba(15,23,42,.03); }
.fl-request-card:hover { border-color:#b9d8fb; text-decoration:none; }
.fl-request-top { display:flex; gap:8px; justify-content:space-between; }
.fl-request-card>span,.fl-request-card>small { color:#667085; font-size:11px; }
.fl-request-card em { color:#a15c00; font-size:10px; font-style:normal; background:#fff7e8; border-radius:6px; padding:4px 6px; }
.fl-fit { color:#087443; background:#eaf8ef; padding:2px 6px; border-radius:999px; font-size:11px; white-space:nowrap; }
.fl-capacity-summary { display:flex; align-items:baseline; gap:8px; padding-bottom:14px; }
.fl-capacity-summary strong { font-size:28px; }
.fl-capacity-summary span { color:#667085; font-size:12px; }
.fl-capacity-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #eef2f6; }

.fl-ai-diff { margin-top:14px; max-height:520px; overflow:auto; }
.fl-diff-row { border-top:1px solid #eef2f6; padding:12px 0; display:grid; grid-template-columns:120px 1fr 1fr; gap:10px; }
.fl-diff-row>strong { font-size:12px; color:#344054; }
.fl-diff-row>div>span { font-size:10px; color:#667085; text-transform:uppercase; letter-spacing:.06em; }
.fl-diff-row pre { white-space:pre-wrap; word-break:break-word; background:#f8fafc; border:1px solid #e6ebf1; border-radius:8px; padding:8px; margin:4px 0 0; font-size:11px; }

.fl-shortlist { margin-bottom:24px; }
.fl-shortlist-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:14px; }
.fl-shortlist-head h2 { margin:4px 0 4px; }
.fl-shortlist-head>div:last-child { display:flex; flex-direction:column; align-items:flex-end; gap:4px; color:#667085; }
.fl-candidate-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.fl-candidate-card { background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:18px; box-shadow:0 2px 12px rgba(15,23,42,.04); min-width:0; }
.fl-candidate-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.fl-candidate-head h3 { margin:4px 0 0; font-size:18px; }
.fl-fit-badge { background:#eaf8ef; color:#087443; border-radius:999px; padding:7px 10px; font-size:12px; font-weight:750; white-space:nowrap; }
.fl-candidate-profile { max-height:430px; overflow:auto; background:#f8fafc; border:1px solid #eef2f6; border-radius:12px; padding:14px; margin:14px 0; }
.fl-interview-box { display:flex; flex-direction:column; gap:8px; border:1px solid #d9e7f7; background:#f4f8fd; border-radius:12px; padding:12px; margin:12px 0; }
.fl-interview-box.active { background:#ecfdf3; border-color:#cbeed8; }
.fl-feedback-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:12px; }
.fl-feedback-grid .btn { align-self:end; }

.fl-auth-shell { min-height:72vh; display:grid; grid-template-columns:minmax(320px,1.1fr) minmax(360px,.9fr); max-width:1180px; margin:40px auto; border:1px solid #dfe7ef; border-radius:22px; overflow:hidden; background:#fff; box-shadow:0 20px 70px rgba(15,23,42,.10); }
.fl-auth-brand { padding:58px; background:linear-gradient(145deg,#082d48,#005a9c); color:#fff; display:flex; flex-direction:column; justify-content:center; gap:24px; }
.fl-auth-brand .fl-eyebrow { color:#9dccff; }
.fl-auth-brand h1 { font-size:38px; margin:4px 0 8px; }
.fl-auth-brand p { color:#d9eafb; max-width:520px; }
.fl-brand-mark { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:#fff; color:#0066cc; font-weight:900; }
.fl-auth-benefits { display:grid; gap:12px; margin-top:12px; }
.fl-auth-benefits>div { display:flex; align-items:center; gap:10px; color:#e6f2ff; }
.fl-auth-benefits strong { width:24px; height:24px; border-radius:999px; display:grid; place-items:center; background:rgba(255,255,255,.14); }
.fl-auth-card { padding:42px; display:flex; align-items:center; }
.fl-auth-card-inner { width:100%; max-width:440px; margin:auto; }
.fl-auth-card h2 { margin:4px 0 20px; font-size:26px; }
.fl-social-stack { display:grid; gap:10px; }
.fl-social-button { min-height:46px; display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid #d7dee8; border-radius:10px; color:#1f2937; font-weight:650; text-decoration:none; background:#fff; }
.fl-social-button:hover { background:#f8fafc; text-decoration:none; }
.fl-social-button img { width:20px; height:20px; }
.fl-auth-divider { display:flex; align-items:center; gap:12px; color:#98a2b3; font-size:11px; margin:18px 0; }
.fl-auth-divider:before,.fl-auth-divider:after { content:""; height:1px; flex:1; background:#e6ebf1; }
.fl-auth-form { display:grid; gap:12px; }
.fl-auth-links { text-align:center; margin-top:14px; }
.fl-auth-footnote { margin-top:18px; color:#667085; font-size:11px; text-align:center; }
.fl-login-message.error { color:#b42318; margin-top:10px; font-size:12px; }

@media (max-width:1100px){ .fl-metric-grid{grid-template-columns:repeat(3,1fr)} .fl-candidate-grid{grid-template-columns:1fr} }
@media (max-width:820px){ .fl-dashboard-grid{grid-template-columns:1fr}.fl-v5-header,.fl-shortlist-head{flex-direction:column}.fl-metric-grid{grid-template-columns:repeat(2,1fr)}.fl-auth-shell{grid-template-columns:1fr;margin:18px}.fl-auth-brand{padding:34px}.fl-auth-card{padding:30px}.fl-panel-head{flex-direction:column}.fl-panel-head span{max-width:none;text-align:left}.fl-feedback-grid{grid-template-columns:1fr}.fl-feedback-grid .fl-span-2{grid-column:span 1} }
@media (max-width:560px){ .fl-form-grid,.fl-metric-grid{grid-template-columns:1fr}.fl-span-2{grid-column:span 1}.fl-diff-row{grid-template-columns:1fr}.fl-v5-page{padding:18px 10px 40px}.fl-auth-brand{display:none}.fl-auth-shell{min-height:auto}.fl-auth-card{padding:24px} }