/* ==========================================================================
   WHMCS PRO TURKISH THEME — WHMCS CORE OVERRIDES
   Modern styling for WHMCS tables, forms, alerts, navigation, and client panels
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TABLES & DATATABLES
   -------------------------------------------------------------------------- */
.table {
  width: 100%;
  margin-bottom: 1.5rem;
  color: var(--theme-text-main);
  background-color: var(--theme-surface);
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius-md);
  overflow: hidden;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 0.875rem 1.15rem;
  line-height: 1.45;
  vertical-align: middle;
  border-top: 1px solid var(--theme-border);
  border-bottom: none;
}

.theme-card > .theme-table-responsive > .table {
  border: none;
  border-radius: 0;
  margin-bottom: 0;
}

.table > thead > tr > th {
  background-color: var(--theme-surface-alt);
  color: var(--theme-text-muted);
  font-family: var(--theme-font-heading);
  font-weight: 700;
  font-size: var(--theme-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-top: none;
  white-space: nowrap;
}

.table td .theme-badge,
.table td .btn-theme {
  white-space: nowrap;
}

.table-hover > tbody > tr:hover {
  background-color: var(--theme-surface-hover);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--theme-surface-alt);
}

/* DataTables pagination and search controls */
.dataTables_wrapper {
  color: var(--theme-text-main);
  padding: 1rem 0;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background-color: var(--theme-surface);
  color: var(--theme-text-main);
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius-sm);
  padding: 0.4rem 0.75rem;
  font-family: var(--theme-font-sans);
  font-size: var(--theme-text-sm);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--theme-primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.2);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--theme-radius-sm) !important;
  color: var(--theme-text-main) !important;
  border: 1px solid var(--theme-border) !important;
  background: var(--theme-surface) !important;
  padding: 0.35rem 0.75rem !important;
  margin: 0 2px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--theme-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--theme-primary) !important;
}

/* --------------------------------------------------------------------------
   2. FORMS & INPUT CONTROLS
   -------------------------------------------------------------------------- */
.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-family: var(--theme-font-heading);
  font-weight: 600;
  font-size: var(--theme-text-sm);
  color: var(--theme-text-main);
}

.form-control {
  display: block;
  width: 100%;
  height: auto;
  padding: 0.75rem 1rem;
  font-family: var(--theme-font-sans);
  font-size: var(--theme-text-base);
  line-height: 1.5;
  color: var(--theme-text-main);
  background-color: var(--theme-surface);
  background-image: none;
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius-md);
  box-shadow: var(--theme-shadow-sm);
  transition: border-color var(--theme-transition-fast), box-shadow var(--theme-transition-fast);
}

.form-control:focus {
  border-color: var(--theme-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.2);
}

.form-control::placeholder {
  color: var(--theme-text-subtle);
}

select.form-control {
  appearance: auto;
  padding-right: 2rem;
}

textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

/* Input Group Addons */
.input-group-addon {
  padding: 0.75rem 1rem;
  font-size: var(--theme-text-base);
  font-weight: 500;
  line-height: 1;
  color: var(--theme-text-muted);
  text-align: center;
  background-color: var(--theme-surface-alt);
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius-md);
}

/* Checkboxes and Radios */
.checkbox label, .radio label {
  color: var(--theme-text-main);
  font-weight: 400;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   3. BUTTON OVERRIDES (WHMCS Standard Classes)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--theme-font-sans);
  font-weight: 600;
  padding: 0.65rem 1.25rem;
  font-size: var(--theme-text-base);
  line-height: 1.4;
  border-radius: var(--theme-radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--theme-transition-fast);
  text-decoration: none;
}

.btn-primary {
  color: var(--theme-btn-primary-text, #FFFFFF) !important;
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb), 0.25);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  color: var(--theme-btn-primary-text, #FFFFFF) !important;
  background-color: var(--theme-primary-hover);
  border-color: var(--theme-primary-hover);
}

.btn-default {
  color: var(--theme-text-main) !important;
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
}

.btn-default:hover, .btn-default:focus, .btn-default:active {
  background-color: var(--theme-surface-hover);
  border-color: var(--theme-border);
  color: var(--theme-primary) !important;
}

.btn-success {
  color: #FFFFFF !important;
  background-color: var(--theme-success);
  border-color: var(--theme-success);
}

.btn-success:hover {
  background-color: var(--theme-success-hover);
  border-color: var(--theme-success-hover);
}

.btn-warning {
  color: #FFFFFF !important;
  background-color: var(--theme-warning);
  border-color: var(--theme-warning);
}

.btn-warning:hover {
  background-color: var(--theme-warning-hover);
  border-color: var(--theme-warning-hover);
}

.btn-danger {
  color: #FFFFFF !important;
  background-color: var(--theme-danger);
  border-color: var(--theme-danger);
}

.btn-danger:hover {
  background-color: var(--theme-danger-hover);
  border-color: var(--theme-danger-hover);
}

.btn-info {
  color: #FFFFFF !important;
  background-color: var(--theme-info);
  border-color: var(--theme-info);
}

.btn-info:hover {
  background-color: var(--theme-info-hover);
  border-color: var(--theme-info-hover);
}

/* --------------------------------------------------------------------------
   4. ALERTS
   -------------------------------------------------------------------------- */
.alert {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--theme-radius-md);
  font-size: var(--theme-text-base);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.alert-success {
  color: #065F46;
  background-color: #ECFDF5;
  border-color: #A7F3D0;
}

.alert-info {
  color: #1E40AF;
  background-color: #EFF6FF;
  border-color: #BFDBFE;
}

.alert-warning {
  color: #92400E;
  background-color: #FFFBEB;
  border-color: #FDE68A;
}

.alert-danger {
  color: #991B1B;
  background-color: #FEF2F2;
  border-color: #FECACA;
}

/* Dark mode alerts */
[data-theme="dark"] .alert-success,
html.dark .alert-success {
  color: #A7F3D0;
  background-color: rgba(6, 95, 70, 0.3);
  border-color: #065F46;
}

[data-theme="dark"] .alert-info,
html.dark .alert-info {
  color: #BFDBFE;
  background-color: rgba(30, 64, 175, 0.3);
  border-color: #1E40AF;
}

[data-theme="dark"] .alert-warning,
html.dark .alert-warning {
  color: #FDE68A;
  background-color: rgba(146, 64, 14, 0.3);
  border-color: #78350F;
}

[data-theme="dark"] .alert-danger,
html.dark .alert-danger {
  color: #FECACA;
  background-color: rgba(153, 27, 27, 0.3);
  border-color: #991B1B;
}

/* --------------------------------------------------------------------------
   5. PANELS & TILES (WHMCS Client Area Dashboard)
   -------------------------------------------------------------------------- */
.panel {
  margin-bottom: 1.5rem;
  background-color: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius-card);
  box-shadow: var(--theme-shadow-card);
  overflow: hidden;
}

.panel-heading {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--theme-border);
  background-color: var(--theme-surface-alt);
  color: var(--theme-text-main);
  font-family: var(--theme-font-heading);
  font-weight: 700;
  font-size: var(--theme-text-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-body {
  padding: 1.5rem;
  color: var(--theme-text-main);
}

.panel-footer {
  padding: 1rem 1.5rem;
  background-color: var(--theme-surface-alt);
  border-top: 1px solid var(--theme-border);
}

/* Stat Tiles (Active Services, Invoices, Tickets, Domains) */
.tile {
  background-color: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius-card);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--theme-shadow-card);
  transition: transform var(--theme-transition-normal), box-shadow var(--theme-transition-normal);
  display: block;
  text-decoration: none !important;
  color: var(--theme-text-main) !important;
}

.tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--theme-shadow-card-hover);
  border-color: var(--theme-border-highlight);
}

.tile .stat {
  font-size: 2.25rem;
  font-weight: 800;
  font-family: var(--theme-font-heading);
  line-height: 1;
  color: var(--theme-primary);
  margin-bottom: 0.5rem;
}

.tile .title {
  font-size: var(--theme-text-sm);
  color: var(--theme-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   6. STATUS BADGES (WHMCS Invoices, Services, Tickets)
   -------------------------------------------------------------------------- */
.status, .status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  border-radius: var(--theme-radius-full);
  font-size: var(--theme-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.status-active, .status-paid, .status-closed {
  background-color: #ECFDF5;
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.25);
}

.status-pending, .status-unpaid, .status-open {
  background-color: #FFFBEB;
  color: #D97706;
  border: 1px solid rgba(217, 119, 6, 0.25);
}

.status-suspended, .status-cancelled, .status-fraud {
  background-color: #FEF2F2;
  color: #DC2626;
  border: 1px solid rgba(220, 38, 38, 0.25);
}

.status-customer-reply, .status-answered {
  background-color: #EFF6FF;
  color: #2563EB;
  border: 1px solid rgba(37, 99, 235, 0.25);
}

/* Dark mode status badges */
[data-theme="dark"] .status-active,
[data-theme="dark"] .status-paid,
html.dark .status-active,
html.dark .status-paid {
  background-color: rgba(5, 150, 105, 0.25);
  color: #34D399;
}

[data-theme="dark"] .status-pending,
[data-theme="dark"] .status-unpaid,
html.dark .status-pending,
html.dark .status-unpaid {
  background-color: rgba(217, 119, 6, 0.25);
  color: #FBBF24;
}

[data-theme="dark"] .status-suspended,
[data-theme="dark"] .status-cancelled,
html.dark .status-suspended,
html.dark .status-cancelled {
  background-color: rgba(220, 38, 38, 0.25);
  color: #F87171;
}

/* --------------------------------------------------------------------------
   7. MODALS
   -------------------------------------------------------------------------- */
.modal-content {
  background-color: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius-card);
  box-shadow: var(--theme-shadow-lg);
  color: var(--theme-text-main);
  overflow: hidden;
}

.modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--theme-border);
  background-color: var(--theme-surface-alt);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header .close {
  background: transparent;
  border: none;
  padding: 0.25rem 0.5rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--theme-text-muted);
  cursor: pointer;
  order: 2;
}

.modal-header .close:hover {
  color: var(--theme-danger);
}

.modal-header .modal-title {
  font-family: var(--theme-font-heading);
  font-weight: 700;
  font-size: var(--theme-text-lg);
  color: var(--theme-text-main);
  margin: 0;
  order: 1;
}

.modal-body {
  padding: 1.5rem;
  color: var(--theme-text-main);
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--theme-border);
  background-color: var(--theme-surface-alt);
}

/* --------------------------------------------------------------------------
   8. SIDEBAR & BREADCRUMBS
   -------------------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  list-style: none;
  background-color: var(--theme-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius-md);
  font-size: var(--theme-text-sm);
  color: var(--theme-text-muted);
}

.breadcrumb > li + li::before {
  display: inline-block;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  color: var(--theme-text-subtle);
  content: "/";
}

.breadcrumb > .active {
  color: var(--theme-text-main);
  font-weight: 600;
}

/* Sidebar Navigation */
.sidebar .panel,
.panel-sidebar {
  margin-bottom: 1.25rem;
}

.panel-sidebar .panel-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.list-group {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar .list-group-item,
.panel-sidebar .list-group-item {
  background-color: var(--theme-surface);
  border-top: 1px solid var(--theme-border);
  color: var(--theme-text-main);
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--theme-text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--theme-transition-fast), color var(--theme-transition-fast);
}

.sidebar .list-group-item:hover,
.panel-sidebar .list-group-item:hover {
  background-color: var(--theme-surface-hover);
  color: var(--theme-primary);
}

.sidebar .list-group-item.active,
.panel-sidebar .list-group-item.active {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  color: #FFFFFF !important;
}

.list-group-item.disabled {
  opacity: 0.55;
  pointer-events: none;
}

.theme-sidebar-item-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.sidebar .list-group-item .badge,
.panel-sidebar .list-group-item .badge {
  background-color: var(--theme-surface-alt);
  color: var(--theme-text-muted);
  border-radius: var(--theme-radius-full);
}

.sidebar .list-group-item.active .badge,
.panel-sidebar .list-group-item.active .badge {
  background-color: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

/* Ticket & Sidebar Status Labels (WHMCS Native .label) */
.panel-sidebar .label,
.sidebar .label,
.ticket-details-children .label {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--theme-radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 0.15rem;
}

.panel-sidebar .ticket-details-children .title {
  display: block;
  font-size: 0.75rem;
  color: var(--theme-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}

/* WHMCS Utility Classes (.w-hidden, .hidden) */
.w-hidden,
.hidden {
  display: none;
}