/*
 * Client Service Manager — My Account (public) Styles
 * Professional, responsive, table→cards on mobile
 */

:root {
  --csm-primary:       #1e40af;
  --csm-primary-hover: #1d3a9a;
  --csm-primary-light: #eff6ff;
  --csm-primary-mid:   #3b82f6;
  --csm-success:       #059669;
  --csm-success-light: #ecfdf5;
  --csm-danger:        #dc2626;
  --csm-warning:       #d97706;
  --csm-text:          #1e293b;
  --csm-text-muted:    #64748b;
  --csm-border:        #e2e8f0;
  --csm-bg:            #f8fafc;
  --csm-radius:        8px;
  --csm-radius-sm:     5px;
  --csm-shadow:        0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --csm-shadow-md:     0 4px 12px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.06);
  --csm-transition:    all .2s ease;
}

/* ═══ WRAP ═══════════════════════════════════════════════════════ */
.csm-myaccount-wrap { margin: 24px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.csm-myaccount-wrap h2 { margin-bottom: 18px; font-size: 20px; font-weight: 700; color: var(--csm-primary); }
.csm-myaccount-wrap h3 { font-size: 16px; font-weight: 700; color: var(--csm-text); margin: 20px 0 12px; }

/* ═══ CONTRACT SELECTOR ══════════════════════════════════════════ */
.csm-myaccount-panel {
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid var(--csm-border);
  border-radius: var(--csm-radius);
  padding: 18px 20px;
  box-shadow: var(--csm-shadow);
}
.csm-myaccount-panel label {
  font-size: 12px;
  font-weight: 700;
  color: var(--csm-text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  display: block;
  margin-bottom: 8px;
}
.csm-myaccount-panel select.csm-select {
  padding: 9px 12px;
  font-size: 14px;
  min-width: 260px;
  max-width: 100%;
  border: 1.5px solid var(--csm-border);
  border-radius: var(--csm-radius-sm);
  background: #fff;
  color: var(--csm-text);
  transition: border-color .15s, box-shadow .15s;
  appearance: auto;
}
.csm-myaccount-panel select.csm-select:focus {
  outline: none;
  border-color: var(--csm-primary-mid);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

/* ═══ CONTRACT INFO CARD ═════════════════════════════════════════ */
#csm-contract-info {
  background: linear-gradient(135deg, var(--csm-primary) 0%, #2563eb 100%);
  color: #fff;
  border-radius: var(--csm-radius);
  padding: 18px 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 14px rgba(30,64,175,.25);
  font-size: 14px;
  line-height: 1.7;
}
#csm-contract-info strong { opacity: .75; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }

/* ═══ INVOICE TABLE ══════════════════════════════════════════════ */
#csm-invoice-list { margin-top: 16px; }

.csm-table,
.csm-table-charges {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: var(--csm-radius);
  overflow: hidden;
  box-shadow: var(--csm-shadow-md);
  font-size: 14px;
}
.csm-table th,
.csm-table-charges th {
  background: linear-gradient(135deg, var(--csm-primary) 0%, #2563eb 100%);
  color: #fff;
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 13px 16px;
  text-align: left;
  white-space: nowrap;
}
.csm-charge-date-header { cursor: pointer; text-decoration: underline; }
.csm-charge-date-header::after { content: ' ⇅'; font-size: 10px; opacity: .7; }
.csm-table td,
.csm-table-charges td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--csm-border);
  color: var(--csm-text);
  vertical-align: middle;
}
.csm-table tr:last-child td,
.csm-table-charges tr:last-child td { border-bottom: none; }
.csm-table tbody tr,
.csm-table-charges tbody tr { transition: background .15s; }
.csm-table tbody tr:hover,
.csm-table-charges tbody tr:hover { background: var(--csm-primary-light); }
.csm-table tbody tr:nth-child(even),
.csm-table-charges tbody tr:nth-child(even) { background: #fafbfc; }
.csm-table tbody tr:nth-child(even):hover,
.csm-table-charges tbody tr:nth-child(even):hover { background: var(--csm-primary-light); }

/* ═══ BUTTONS ════════════════════════════════════════════════════ */
.csm-myaccount-wrap .csm-button,
.csm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--csm-primary);
  color: #fff !important;
  border: none;
  padding: 8px 16px;
  border-radius: var(--csm-radius-sm);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: var(--csm-transition);
  min-height: 38px;
  box-shadow: 0 1px 2px rgba(30,64,175,.2);
}
.csm-button:hover { background: var(--csm-primary-hover); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(30,64,175,.3); }

.csm-pending-invoice {
  background: var(--csm-danger);
  color: #fff !important;
  border: none;
  padding: 8px 16px;
  border-radius: var(--csm-radius-sm);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  transition: var(--csm-transition);
  box-shadow: 0 1px 2px rgba(220,38,38,.2);
}
.csm-pending-invoice:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(220,38,38,.3); }

.csm-paid-invoice {
  background: var(--csm-success);
  color: #fff !important;
  border: none;
  padding: 7px 14px;
  border-radius: var(--csm-radius-sm);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  transition: var(--csm-transition);
  box-shadow: 0 1px 2px rgba(5,150,105,.2);
}
.csm-paid-invoice:hover { background: #047857; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(5,150,105,.3); }
.csm-paid-invoice.disabled { opacity: .5; cursor: default; pointer-events: none; transform: none; }

/* ═══ STATUS CHIP ════════════════════════════════════════════════ */
td[data-label="Status"],
td[data-label="status"] {
  font-weight: 600;
}

/* ═══ NOTIFICATIONS ══════════════════════════════════════════════ */
.csm-notification {
  position: fixed;
  top: 20px; right: 20px;
  padding: 14px 20px;
  border-radius: var(--csm-radius);
  color: #fff;
  z-index: 9999;
  max-width: 320px;
  box-shadow: var(--csm-shadow-md);
  font-size: 14px;
  font-weight: 500;
  animation: csmSlideIn .3s ease;
}
.csm-notification-error   { background: var(--csm-danger); }
.csm-notification-success { background: var(--csm-success); }
.csm-notification-warning { background: var(--csm-warning); color: #fff; }
.csm-notification-info    { background: #0ea5e9; }
@keyframes csmSlideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ═══ FOCUS ACCESSIBILITY ════════════════════════════════════════ */
.csm-button:focus-visible,
.csm-pending-invoice:focus-visible,
.csm-paid-invoice:focus-visible,
.csm-select:focus-visible { outline: 3px solid var(--csm-primary-mid); outline-offset: 2px; }

/* ═══ RESPONSIVE — TABLE → CARDS ON MOBILE ═══════════════════════ */
@media (max-width: 768px) {
  .csm-table thead,
  .csm-table-charges thead { display: none; }

  .csm-table,
  .csm-table tbody,
  .csm-table tr,
  .csm-table td,
  .csm-table-charges,
  .csm-table-charges tbody,
  .csm-table-charges tr,
  .csm-table-charges td { display: block; width: 100%; box-sizing: border-box; }

  .csm-table tr,
  .csm-table-charges tr {
    margin-bottom: 14px;
    border: 1px solid var(--csm-border);
    border-radius: var(--csm-radius);
    box-shadow: var(--csm-shadow);
    background: #fff;
    overflow: hidden;
  }
  .csm-table tr:first-child::before,
  .csm-table-charges tr:first-child::before {
    content: 'Fatura';
    display: block;
    background: linear-gradient(135deg, var(--csm-primary) 0%, #2563eb 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 6px 14px;
  }

  .csm-table td,
  .csm-table-charges td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-bottom: 1px solid var(--csm-border);
    gap: 12px;
  }
  .csm-table td:last-child,
  .csm-table-charges td:last-child { border-bottom: none; }

  .csm-table td::before,
  .csm-table-charges td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--csm-text-muted);
    flex-shrink: 0;
    min-width: 80px;
  }

  .csm-table tbody tr:nth-child(even),
  .csm-table-charges tbody tr:nth-child(even) { background: #fff; }

  .csm-pending-invoice,
  .csm-paid-invoice,
  .csm-button { width: 100%; justify-content: center; padding: 11px 16px; font-size: 15px; }

  .csm-myaccount-panel select.csm-select { min-width: 100%; width: 100%; font-size: 15px; }
}

@media (max-width: 480px) {
  .csm-myaccount-panel { padding: 14px; }
  .csm-notification { left: 10px; right: 10px; max-width: none; }
  .csm-myaccount-wrap h2 { font-size: 18px; }
}