/* Glboal */
.mobile-only {
    display: none !important;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
    .mobile-only {
        display: block !important;
    }
}

/* CKE ditor */
.ck-editor__editable {
    height: 420px;
    max-height: 420px;
    overflow-y: auto;
}

.ck-editor__editable {
    scrollbar-width: thin;
}

/* Buttons */
.digicart-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
}

.digicart-btn.primary {
    background: var(--primary-dark);
    color: var(--bg);
}

/* Wrapper */
.digicart-dashboard {
    padding: 24px;
    background: var(--bg);
}

/* Dashboard Grid */
.digicart-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.digicart-dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
    align-items: start;
}

.card-header {
    margin-bottom: 15px;
}

@media (max-width: 1024px) {
    .digicart-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 487px) {
    .digicart-dashboard-grid .product-cell .product-name {
        display: none;
    }
}

.digicart-card {
    background: var(--card);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.stat-card h2 {
    font-size: 28px;
    margin: 12px 0;
}

.stat-header {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
}

.stat-badge,
.digicart-badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.digicart-badge.success,
.digicart-badge.paid,
.stat-badge.success {
    background: #dcfce7;
    color: #15803d;
}

.digicart-badge.expired {
    background: #f3f4f6;
    color: #6b7280;
}

.digicart-badge.warning,
.digicart-badge.confirmed,
.stat-badge.danger {
    background: #fff7ed;
    color: #c2410c;
}

.digicart-badge.cancelled {
    background: #fee2e2;
    color: #b91c1c;
}

.stat-badge.info,
.digicart-badge.unpaid {
    background: #e0f2fe;
    color: #0369a1;
}

.digicart-table {
    width: 100%;
    border-collapse: collapse;
}

.digicart-table th {
    text-align: left;
    font-size: 13px;
    color: var(--muted);
    padding-bottom: 12px;
}

.digicart-table td {
    padding: 14px 0;
    border-top: 1px solid var(--border);
    font-size: 14px;
}

.digicart-order-card {
    display: flex;
    flex-direction: column;
}

.product-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-cell img {
    flex: none !important;
    object-fit: cover;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #f1f5f9;
}

.product-cell span {
    font-weight: 500;
    color: #0f172a;
}

.digicart-order-table td {
    vertical-align: middle;
}

.order-card-footer {
    margin-top: 18px;
    display: flex;
    justify-content: center;
}

.order-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #64748b;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 999px;
    transition: all 0.2s ease;
}

.order-view-all:hover {
    background: #f1f5f9;
    color: #2563eb;
}

.digicart-badge.refunded {
    background: #ede9fe;
    color: #6d28d9;
}

.digicart-top-users-card .top-user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f1f1f1;
}

.top-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-user-info img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.top-user-amount {
    font-weight: 600;
}

.card-subtitle {
    color: var(--muted);
}

/* Dashboard Reviews Pages */
.digicart-review-table td {
    vertical-align: top;
}

.review-summary-grid {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
}

.review-customer {
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-customer img {
    width: 40px;
    height: 40px;
    border-radius: 999px;
}

.review-customer strong {
    display: block;
    font-size: 14px;
    color: #0f172a;
}

.review-customer span {
    font-size: 12px;
    color: #64748b;
}

.review-text {
    width: 400px;
}

.stars {
    color: #f59e0b;
    font-size: 14px;
    letter-spacing: 1px;
}

.review-rating p {
    margin-top: 4px;
    font-size: 13px;
    color: #475569;
    line-height: 1.4;
    max-width: 320px;
}

@media (min-width: 769px) {
    .review-mobile-card {
        display: none;
    }
}

@media (max-width: 768px) {
    .digicart-review-table thead {
        display: none;
    }

    .review-row {
        display: block;
        margin-bottom: 12px;
    }

    .review-row td {
        padding: 0;
        border: none;
    }

    .review-mobile-card {
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 12px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    }

    .review-mobile-card summary {
        cursor: pointer;
        list-style: none;
    }

    .review-mobile-card summary::-webkit-details-marker {
        display: none;
    }

    .review-summary {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
        align-items: center;
    }

    .review-customer {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .review-customer img {
        width: 36px;
        height: 36px;
        border-radius: 999px;
    }

    .review-customer span {
        font-size: 13px;
        color: #f59e0b;
    }

    .review-mobile-card[open] .review-detail {
        max-height: 200px;
        opacity: 1;
    }

    .review-detail {
        margin-top: 12px;
        font-size: 14px;
        color: #475569;
        line-height: 1.6;
        max-height: 0;
        overflow: hidden;
        transition:
            max-height 0.35s ease,
            opacity 0.3s ease;
        opacity: 0;
    }
}

/* Products Pages */
.digicart-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.digicart-page-header .header-left {
    display: block;
}

.header-left h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.header-left p {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-search {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: #94a3b8;
    pointer-events: none;
    z-index: 1;
}

.search-input {
    padding: 10px 40px 10px 42px;
    font-size: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #1e293b;
    transition: all 0.3s ease;
    font-family: inherit;
}

.search-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    width: 320px;
}

.search-input::placeholder {
    color: #94a3b8;
}

.search-clear {
    position: absolute;
    right: 10px;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #f1f5f9;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-clear:hover {
    background: #e2e8f0;
}

.search-clear svg {
    width: 14px;
    height: 14px;
    color: #64748b;
}

.digicart-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}

.digicart-btn.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(102, 126, 234, 0.3);
}

.digicart-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(102, 126, 234, 0.4);
}

.digicart-btn svg {
    width: 18px;
    height: 18px;
}

.product-type {
    display: block;
    font-size: 12px;
    color: #64748b;
}

.access-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 500;
}

.access-badge.internal {
    background: #ecfeff;
    color: #0369a1;
}

.access-badge.external {
    background: #fef3c7;
    color: #92400e;
}

.action-cell {
    white-space: nowrap;
}

.action-cell button {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 6px;
}

.action-cell button:last-child {
    margin-right: 0;
}

.action-cell button svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.action-cell button.danger {
    background: #fee2e2;
    color: #b91c1c;
}

.digicart-pagination {
    border-top: 1px solid var(--border-color);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    font-size: 13px;
    color: #64748b;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

@media (max-width: 768px) {
    .digicart-product-table thead {
        display: none;
    }

    .digicart-product-table,
    .digicart-product-table tbody,
    .digicart-product-table tr {
        display: block;
        width: 100%;
    }

    .digicart-product-table tr {
        background: #fff;
        border-radius: 14px;
        padding: 14px;
        margin-bottom: 16px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
        border: 1px solid #eef0f4;
    }

    .digicart-product-table td {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 6px 0;
        border: none;
        font-size: 14px;
        line-height: 1.4;
    }

    .digicart-product-table td::before {
        content: attr(data-label);
        min-width: 90px;
        font-weight: 600;
        color: #64748b;
        flex-shrink: 0;
    }

    .digicart-product-table td > * {
        flex: 1;
    }

    .product-cell {
        display: flex !important;
        align-items: flex-start;
        gap: 12px;
    }

    .product-cell::before {
        display: none;
    }

    .product-cell img {
        width: 42px;
        height: 42px;
        border-radius: 10px;
    }

    .product-cell strong {
        font-size: 15px;
        display: block;
    }

    .product-type {
        font-size: 12px;
        color: #94a3b8;
    }

    .action-cell {
        display: flex;
        justify-content: flex-start;
        gap: 6px;
        margin-top: 4px;
    }

    .action-cell button {
        margin-right: 0;
        flex: 1;
        max-width: 100px;
    }
}

@media (max-width: 768px) {
    .digicart-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .digicart-page-header .header-left {
        display: block;
        text-align: center;
    }

    .header-right {
        flex-direction: column;
        gap: 12px;
    }

    .header-search {
        width: 100%;
    }

    .search-input {
        width: 100%;
    }

    .search-input:focus {
        width: 100%;
    }

    .digicart-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .header-left h2 {
        font-size: 20px;
    }

    .digicart-btn span {
        display: inline;
    }
}

/* Add Product Page */
.product-form-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
    background: var(--gray-50);
}

.form-header {
    background: linear-gradient(
        135deg,
        var(--primary-color) 0%,
        var(--secondary-color) 100%
    );
    padding: 32px;
    border-radius: var(--border-radius);
    margin-bottom: 24px;
    box-shadow: var(--shadow-lg);
}

.header-content {
    max-width: 600px;
}

.header-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 8px 0;
}

.header-subtitle {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.product-form-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
}

.form-card {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    margin-bottom: 24px;
    transition: var(--transition);
}

.form-card:hover {
    box-shadow: var(--shadow-md);
}

.card-header-section {
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-200);
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title svg {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
}

.card-body {
    padding: 24px;
}

.input-group {
    margin-bottom: 24px;
}

.input-group:last-child {
    margin-bottom: 0;
}

.input-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 8px;
}

.required {
    color: var(--danger-color);
    margin-left: 4px;
}

.input-field {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius-sm);
    background: var(--white);
    color: var(--gray-800);
    transition: var(--transition);
    font-family: inherit;
}

.input-field:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.input-field::placeholder {
    color: var(--gray-400);
}

.product-slug-inline{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed #e5e7eb;
  background: #f8fafc;
}

.product-slug-label{
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}

.product-slug-input{
  flex: 1;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  background: #fff;
  transition: .2s ease;
}

.product-slug-input:focus{
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .12);
}

.select-field {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
    appearance: none;
}

.textarea-field {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.input-hint {
    display: block;
    font-size: 13px;
    color: var(--gray-500);
    margin-top: 6px;
}

.input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.input-with-icon {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-500);
    pointer-events: none;
}

.input-with-prefix {
    padding-left: 48px;
}

.thumbnail-upload-wrapper {
    text-align: center;
}

.thumbnail-preview {
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    cursor: pointer;
    border: 2px dashed var(--gray-300);
    transition: var(--transition);
}

.thumbnail-preview:hover {
    border-color: var(--primary-color);
}

.thumbnail-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: var(--transition);
    color: var(--white);
}

.thumbnail-preview:hover .thumbnail-overlay {
    opacity: 1;
}

.thumbnail-overlay svg {
    width: 32px;
    height: 32px;
}

.thumbnail-input {
    display: none;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--border-radius-sm);
    border: none;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.btn svg {
    width: 18px;
    height: 18px;
}

.btn-primary {
    background: linear-gradient(
        135deg,
        var(--primary-color) 0%,
        var(--secondary-color) 100%
    );
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: var(--gray-200);
    color: var(--gray-700);
}

.btn-secondary:hover {
    background: var(--gray-300);
}

.btn-outline {
    background: transparent;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

.btn-outline:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.btn-block {
    width: 100%;
    margin-bottom: 12px;
}

.btn-block:last-child {
    margin-bottom: 0;
}

.form-actions {
    position: sticky;
    top: 24px;
}

.form-actions .card-body {
    padding: 16px;
}

.selected-access-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.selected-access-items:empty {
    display: none;
}

.selected-access-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
}

.selected-access-item:hover {
    border-color: var(--primary-color);
}

.selected-access-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.selected-access-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.selected-access-item-icon.file {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.selected-access-item-icon.course {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.selected-access-item-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.selected-access-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.selected-access-item-info strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selected-access-item-info .access-type {
    font-size: 12px;
    color: var(--text-secondary);
}

.selected-access-item-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.selected-access-item-type-badge.file {
    background: #e0e7ff;
    color: #4338ca;
}

.selected-access-item-type-badge.course {
    background: #fef3c7;
    color: #92400e;
}

.selected-access-item-type-badge svg {
    width: 12px;
    height: 12px;
}

.selected-access-item-remove {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.selected-access-item-remove:hover {
    background: var(--danger-color);
    border-color: var(--danger-color);
}

.selected-access-item-remove:hover svg {
    color: white;
}

.selected-access-item-remove svg {
    width: 16px;
    height: 16px;
    color: var(--danger-color);
}

.access-selector-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.access-selector-modal-overlay.active {
    display: flex;
}

.access-selector-modal {
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    max-width: 800px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: modalSlideIn 0.3s ease;
}

.access-selector-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.access-selector-modal-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.access-selector-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
}

.access-selector-modal-close:hover {
    background: var(--bg-tertiary);
}

.access-selector-modal-close svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.access-selector-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    flex-shrink: 0;
}

.access-selector-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.access-selector-tab:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.access-selector-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: var(--bg-tertiary);
}

.access-selector-tab svg {
    width: 18px;
    height: 18px;
}

.access-selector-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.access-selector-tab-content {
    display: none;
}

.access-selector-tab-content.active {
    display: block;
}

.access-selector-search {
    position: relative;
    margin-bottom: 20px;
}

.access-selector-search svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.access-selector-search input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    transition: var(--transition);
}

.access-selector-search input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.access-selector-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.access-selector-item {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    transition: var(--transition);
}

.access-selector-item:hover {
    border-color: var(--primary-color);
    background: var(--bg-tertiary);
}

.access-selector-checkbox {
    display: flex;
    align-items: center;
    padding: 16px;
    cursor: pointer;
    margin: 0;
}

.access-selector-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 16px;
}

.access-selector-item-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.access-selector-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.access-selector-item-icon.file {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.access-selector-item-icon.course {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.access-selector-item-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.access-selector-item-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.access-selector-item-info strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.access-selector-item-info .access-type {
    font-size: 12px;
    color: var(--text-secondary);
}

.access-selector-item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.license-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.license-badge svg {
    width: 11px;
    height: 11px;
}

.license-badge.enabled {
    background: #dcfce7;
    color: #166534;
}

.license-badge.disabled {
    background: #fee2e2;
    color: #991b1b;
}

.file-version {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
}

.course-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
}

.course-meta svg {
    width: 12px;
    height: 12px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.status-badge svg {
    width: 11px;
    height: 11px;
}

.status-badge.published {
    background: #dcfce7;
    color: #166534;
}

.status-badge.draft {
    background: #fef3c7;
    color: #92400e;
}

.access-selector-modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.access-selector-modal-footer .btn {
    flex: 1;
}

.commission-preview {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    border-left: 4px solid var(--primary-color);
}

.commission-preview-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.commission-preview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.commission-preview-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.commission-preview-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.commission-preview-value.highlight {
    color: var(--primary-color);
}

.input-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.input-hint svg {
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
    margin-top: 2px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .access-selector-modal {
        max-width: 100%;
        max-height: 90vh;
    }

    .access-selector-modal-header {
        padding: 20px;
    }

    .access-selector-modal-body {
        padding: 20px;
    }

    .access-selector-modal-footer {
        flex-direction: column;
        padding: 16px 20px;
    }

    .access-selector-item-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

@media (max-width: 1024px) {
    .product-form-layout {
        grid-template-columns: 1fr;
    }

    .form-actions {
        position: static;
    }
}

@media (max-width: 640px) {
    .product-form-wrapper {
        padding: 16px;
    }

    .form-header {
        padding: 24px;
    }

    .header-title {
        font-size: 24px;
    }

    .input-row {
        grid-template-columns: 1fr;
    }

    .card-body {
        padding: 20px;
    }
}

@media (max-width: 640px) {
    .access-type-selector {
        grid-template-columns: 1fr;
    }
}

/* Dashboard Settings */
.dashboard-settings-page {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden;
}

.dashboard-settings-header {
    margin-bottom: 24px;
}

.dashboard-settings-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.dashboard-settings-header p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.dashboard-settings-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    overflow-x: auto;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0;

    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.dashboard-settings-tabs::-webkit-scrollbar {
    height: 4px;
}

.dashboard-settings-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.dashboard-settings-tabs::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.dashboard-settings-tabs::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

.dashboard-settings-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    margin-bottom: -2px;
}

.dashboard-settings-tab:hover {
    color: var(--primary-color);
}

.dashboard-settings-tab.active {
    color: var(--primary-color);
}

.dashboard-settings-tab svg {
    width: 18px;
    height: 18px;
}

.dashboard-settings-content {
    position: relative;
}

.dashboard-settings-tab-content {
    display: none;
}

.dashboard-settings-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard-settings-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 24px;
    margin-bottom: 20px;
}

.dashboard-settings-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.dashboard-settings-color-picker {
    display: flex;
    gap: 10px;
    align-items: center;
}

.dashboard-settings-color-picker input[type="color"] {
    width: 50px;
    height: 42px;
    padding: 2px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
}

.dashboard-settings-color-picker
    input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.dashboard-settings-color-picker input[type="color"]::-webkit-color-swatch {
    border-radius: 4px;
    border: none;
}

.dashboard-settings-color-picker input[type="text"] {
    flex: 1;
    font-family: "Monaco", "Consolas", monospace;
    font-size: 13px;
}

.dashboard-settings-input-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #64748b;
}

.dashboard-settings-email-preview {
    margin-top: 20px;
}

.dashboard-settings-email-preview-box {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #f9fafb;
    max-width: 400px;
}

.dashboard-settings-email-preview-box .preview-header {
    padding: 20px;
    text-align: center;
    border-bottom: 3px solid #3b82f6;
    background: #fff;
}

.dashboard-settings-email-preview-box .preview-body {
    padding: 24px;
    background: #fff;
    margin: 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
}

.dashboard-settings-email-preview-box .preview-body p {
    margin: 0 0 12px 0;
}

.dashboard-settings-email-preview-box .preview-body a {
    color: #3b82f6;
    text-decoration: none;
}

.dashboard-settings-email-preview-box .preview-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 8px;
}

.dashboard-settings-email-preview-box .preview-footer {
    padding: 16px;
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
    background: #f9fafb;
}

.dashboard-settings-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 20px 0;
}

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

.dashboard-settings-input-group {
    margin-bottom: 20px;
}

.dashboard-settings-input-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.dashboard-settings-input-label .required {
    color: var(--danger-color);
}

.dashboard-settings-input-field {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    transition: var(--transition);
    font-family: inherit;
}

.dashboard-settings-input-field:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.dashboard-settings-input-field textarea {
    resize: vertical;
}

.dashboard-settings-input-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.dashboard-settings-input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.dashboard-settings-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.dashboard-settings-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.dashboard-settings-checkbox span {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.whatsapp-bubble {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    background-color: #25d366;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.whatsapp-bubble:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

.whatsapp-bubble svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.dashboard-settings-file-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
    text-align: center;
    background: var(--bg-tertiary);
}

.dashboard-settings-file-preview img {
    max-width: 120px;
    height: auto;
    border-radius: var(--border-radius-sm);
}

.dashboard-settings-file-preview input[type="file"] {
    font-size: 13px;
}

.dashboard-settings-file-preview small {
    font-size: 12px;
    color: var(--text-secondary);
}

.dashboard-settings-payment-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dashboard-settings-payment-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
}

.dashboard-settings-payment-item:hover {
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

.dashboard-settings-payment-icon {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.dashboard-settings-payment-icon img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.dashboard-settings-payment-info {
    flex: 1;
}

.dashboard-settings-payment-info strong {
    display: block;
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.dashboard-settings-payment-details {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.dashboard-settings-payment-details span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}

.dashboard-settings-payment-details svg {
    width: 14px;
    height: 14px;
}

.dashboard-settings-payment-actions {
    display: flex;
    gap: 6px;
}

.dashboard-settings-btn-primary,
.dashboard-settings-btn-secondary,
.dashboard-settings-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-settings-btn-primary {
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color: white;
}

.dashboard-settings-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dashboard-settings-btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.dashboard-settings-btn-secondary:hover {
    background: var(--bg-secondary);
}

.dashboard-settings-btn-outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.dashboard-settings-btn-outline:hover {
    background: var(--primary-color);
    color: white;
}

.dashboard-settings-btn-primary svg,
.dashboard-settings-btn-secondary svg,
.dashboard-settings-btn-outline svg {
    width: 18px;
    height: 18px;
}

.dashboard-settings-action-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-settings-action-btn:hover:not(.danger) {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.dashboard-settings-action-btn:hover:not(.danger) svg {
    color: white;
}

.dashboard-settings-action-btn.danger:hover {
    background: var(--danger-color);
    border-color: var(--danger-color);
}

.dashboard-settings-action-btn.danger:hover svg {
    color: white;
}

.dashboard-settings-action-btn svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.dashboard-settings-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.dashboard-settings-modal {
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.dashboard-settings-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-settings-modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.dashboard-settings-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-settings-modal-close:hover {
    background: var(--danger-color);
}

.dashboard-settings-modal-close:hover svg {
    color: white;
}

.dashboard-settings-modal-close svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.dashboard-settings-modal-body {
    padding: 24px;
}

.dashboard-settings-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
}

.dashboard-settings-template-section {
    padding: 20px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    margin-bottom: 20px;
    border-left: 4px solid var(--primary-color);
}

.dashboard-settings-template-section:last-child {
    margin-bottom: 0;
}

.dashboard-settings-template-subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-settings-template-subtitle svg {
    width: 18px;
    height: 18px;
    color: var(--primary-color);
}

.settings-variables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.settings-variables-group {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
}

.settings-variables-group h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.settings-variables-group h4 svg {
    width: 16px;
    height: 16px;
    color: #3b82f6;
}

.settings-variables-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.settings-variables-group li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed #e2e8f0;
    font-size: 13px;
}

.settings-variables-group li:last-child {
    border-bottom: none;
}

.settings-variables-group code {
    background: #3b82f6;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-family: "Monaco", "Consolas", monospace;
    cursor: pointer;
    transition: background 0.2s;
}

.settings-variables-group code:hover {
    background: #2563eb;
}

.settings-variables-group li span {
    color: #64748b;
    font-size: 12px;
    text-align: right;
}

.dashboard-settings-textarea-css {
    width: 100%;
    min-height: 280px;
    padding: 16px;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 1.6;
    color: #e5e7eb;
    background-color: #0f172a;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    resize: vertical;
    outline: none;
    white-space: pre;
    caret-color: var(--primary-color);
}

.dashboard-settings-textarea-css:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.dashboard-settings-textarea-css::placeholder {
    color: #94a3b8;
}

.dashboard-settings-css-helper {
    margin-top: 8px;
    font-size: 12px;
    color: #64748b;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-settings-css-helper span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 768px) {
    .dashboard-settings-page {
        padding: 16px;
        overflow-x: hidden;
        max-width: 100vw;
    }

    .dashboard-settings-header h2 {
        font-size: 20px;
    }

    .dashboard-settings-header p {
        font-size: 13px;
    }

    .dashboard-settings-tabs {
        gap: 4px;
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        max-width: 100vw;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-settings-tab {
        padding: 10px 14px;
        font-size: 13px;
    }

    .dashboard-settings-tab svg {
        width: 16px;
        height: 16px;
    }

    .dashboard-settings-card {
        padding: 20px;
    }

    .dashboard-settings-card-title {
        font-size: 16px;
    }

    .dashboard-settings-input-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .dashboard-settings-input-field {
        padding: 10px 14px;
        font-size: 16px;
    }

    .dashboard-settings-file-preview {
        padding: 12px;
    }

    .dashboard-settings-file-preview img {
        max-width: 80px;
    }

    .dashboard-settings-payment-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .dashboard-settings-payment-icon {
        width: 56px;
        height: 56px;
    }

    .dashboard-settings-payment-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .dashboard-settings-btn-primary,
    .dashboard-settings-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .dashboard-settings-modal {
        max-width: 100%;
        border-radius: 0;
        max-height: 100vh;
    }

    .dashboard-settings-modal-header,
    .dashboard-settings-modal-body {
        padding: 20px;
    }

    .dashboard-settings-modal-footer {
        flex-direction: column;
        gap: 10px;
    }

    .dashboard-settings-modal-footer button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .dashboard-settings-page {
        padding: 12px;
    }

    .dashboard-settings-card {
        padding: 16px;
    }

    .dashboard-settings-tab {
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* Dashboard User Management */
.dashboard-users-manage-page {
    padding: 24px;
}

.dashboard-users-manage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.dashboard-users-manage-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.dashboard-users-manage-header p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.dashboard-users-manage-header-right {
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.dashboard-users-manage-search {
    position: relative;
    display: flex;
    align-items: center;
}

.dashboard-users-manage-search-icon {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    pointer-events: none;
}

.dashboard-users-manage-search-input {
    padding: 10px 40px 10px 40px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    width: 280px;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.dashboard-users-manage-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.dashboard-users-manage-search-clear {
    position: absolute;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    cursor: pointer;
}

.dashboard-users-manage-search-clear:hover {
    color: var(--danger-color);
}

.dashboard-users-manage-search-clear svg {
    width: 16px;
    height: 16px;
}

.dashboard-users-manage-table-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.dashboard-users-manage-table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-users-manage-table thead {
    background: var(--bg-tertiary);
}

.dashboard-users-manage-table th {
    padding: 14px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.dashboard-users-manage-table td {
    padding: 16px;
    border-top: 1px solid var(--border-color);
    vertical-align: middle;
}

.dashboard-users-manage-table tbody tr:hover {
    background: var(--bg-primary);
}

.dashboard-users-manage-user-cell strong {
    font-size: 14px;
    color: var(--text-primary);
}

.dashboard-users-manage-username {
    color: var(--primary-color);
    font-weight: 500;
}

.dashboard-users-manage-empty {
    text-align: center;
    padding: 24px !important;
    color: var(--text-secondary);
}

.dashboard-users-manage-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.dashboard-users-manage-badge-admin {
    background: #fee2e2;
    color: #991b1b;
}

.dashboard-users-manage-badge-subscriber {
    background: #dbeafe;
    color: #1e40af;
}

.dashboard-users-manage-actions {
    white-space: nowrap;
}

.dashboard-users-manage-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
    margin-right: 6px;
}

.dashboard-users-manage-btn:last-child {
    margin-right: 0;
}

.dashboard-users-manage-btn svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    transition: var(--transition);
}

.dashboard-users-manage-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.dashboard-users-manage-btn:hover:not(.dashboard-users-manage-btn-danger) {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.dashboard-users-manage-btn:hover:not(.dashboard-users-manage-btn-danger) svg {
    color: white;
}

.dashboard-users-manage-btn-danger:hover {
    background: var(--danger-color);
    border-color: var(--danger-color);
}

.dashboard-users-manage-btn-danger:hover svg {
    color: white;
}

.dashboard-users-manage-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}

.dashboard-users-manage-pagination-info {
    font-size: 14px;
    color: var(--text-secondary);
}

.dashboard-users-manage-pagination-info strong {
    color: var(--text-primary);
    font-weight: 600;
}

.dashboard-users-manage-mobile {
    display: none;
}

.dashboard-users-manage-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    margin-bottom: 12px;
}

.dashboard-users-manage-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-users-manage-card-header strong {
    display: block;
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.dashboard-users-manage-card-body {
    margin-bottom: 12px;
}

.dashboard-users-manage-card-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.dashboard-users-manage-card-item svg {
    width: 16px;
    height: 16px;
    color: var(--text-tertiary);
}

.dashboard-users-manage-user-meta{
  margin-top: 6px;
  font-size: 12px;
  opacity: .85;
}

.user-verify{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.user-verify svg{
  width: 14px;
  height: 14px;
}

.user-verify.verified svg{
  stroke: #16a34a;
}

.user-verify.unverified svg{
  stroke: #f59e0b;
}

.dashboard-users-manage-card-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.dashboard-users-manage-action-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-primary);
}

.dashboard-users-manage-action-btn:hover:not(
        .dashboard-users-manage-action-btn-danger
    ) {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.dashboard-users-manage-action-btn-danger:hover {
    background: var(--danger-color);
    border-color: var(--danger-color);
    color: white;
}

.dashboard-users-manage-action-btn svg {
    width: 16px;
    height: 16px;
}

.dashboard-users-manage-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.dashboard-users-manage-modal {
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.dashboard-users-manage-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-users-manage-modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.dashboard-users-manage-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-users-manage-modal-close:hover {
    background: var(--danger-color);
}

.dashboard-users-manage-modal-close:hover svg {
    color: white;
}

.dashboard-users-manage-modal-close svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.dashboard-users-manage-modal-body {
    padding: 24px;
}

.dashboard-users-manage-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
}

.dashboard-users-manage-input-group {
    margin-bottom: 20px;
}

.dashboard-users-manage-input-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.dashboard-users-manage-input-field {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    transition: var(--transition);
    font-family: inherit;
}

.dashboard-users-manage-input-field:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.dashboard-users-manage-input-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.dashboard-users-manage-btn-primary,
.dashboard-users-manage-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-users-manage-btn-primary {
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color: white;
}

.dashboard-users-manage-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dashboard-users-manage-btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.dashboard-users-manage-btn-secondary:hover {
    background: var(--bg-secondary);
}

.dashboard-users-manage-btn-primary svg,
.dashboard-users-manage-btn-secondary svg {
    width: 18px;
    height: 18px;
}

.dashboard-users-manage-desktop {
    display: block;
}

.dashboard-users-manage-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.dashboard-users-manage-modal.small {
    max-width: 450px;
}

.dashboard-users-manage-delete-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: var(--border-radius-sm);
    margin: 0;
    font-size: 14px;
    color: #92400e;
    line-height: 1.6;
}

.dashboard-users-manage-delete-message i {
    color: var(--warning-color);
    flex-shrink: 0;
}

.dashboard-users-manage-btn-modal-cancel {
    flex: 1;
    padding: 12px 24px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-users-manage-btn-modal-cancel:hover {
    background: var(--bg-secondary);
}

.dashboard-users-manage-btn-modal-delete {
    background: var(--danger-color);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    transition: all 0.2s;
}

.dashboard-users-manage-btn-modal-delete:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

.dashboard-users-manage-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    background: white;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInRight 0.3s ease-out;
}

.dashboard-users-manage-toast.success {
    border-left: 4px solid var(--success-color);
}

.dashboard-users-manage-toast.error {
    border-left: 4px solid var(--danger-color);
}

.dashboard-users-manage-toast .toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-users-manage-toast.success i {
    color: var(--success-color);
}

.dashboard-users-manage-toast.error i {
    color: var(--danger-color);
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .dashboard-users-manage-page {
        padding: 16px;
    }

    .dashboard-users-manage-header {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-users-manage-header h2 {
        font-size: 20px;
        text-align: center;
    }

    .dashboard-users-manage-header p {
        text-align: center;
    }

    .dashboard-users-manage-header-right {
        flex-direction: column;
    }

    .dashboard-users-manage-search-input {
        width: 100%;
    }

    .dashboard-users-manage-desktop {
        display: none !important;
    }

    .dashboard-users-manage-mobile {
        display: block !important;
    }

    .dashboard-users-manage-pagination-mobile {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .dashboard-users-manage-modal {
        max-width: 100%;
        border-radius: 0;
    }

    .dashboard-users-manage-modal-footer {
        flex-direction: column;
    }

    .dashboard-users-manage-modal-footer button {
        width: 100%;
    }
}

/* Dashboard Media Files */
.media-files-page {
    padding: 24px;
}

.media-files-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.media-files-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.media-files-header p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.media-files-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-upload:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-upload i {
    width: 18px;
    height: 18px;
}

.media-files-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.media-files-card .digicart-pagination {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}

.media-files-table {
    width: 100%;
    border-collapse: collapse;
}

.media-files-table thead {
    background: var(--bg-tertiary);
}

.media-files-table th {
    padding: 14px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    vertical-align: top;
}

.media-files-table td {
    padding: 16px;
    border-top: 1px solid var(--border-color);
    vertical-align: middle;
}

.media-files-table tbody tr:hover {
    background: var(--bg-primary);
}

.file-cell {
    display: flex;
    gap: 12px;
    align-items: center;
}

.file-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.file-icon svg {
    stroke: #fff;
}

.file-icon i {
    width: 24px;
    height: 24px;
    color: white;
}

.file-icon.zip {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.file-icon.pdf {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.file-icon.doc {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.file-icon.excel {
    background: linear-gradient(135deg, #10b981, #059669);
}

.file-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.file-info strong {
    font-size: 14px;
    color: var(--text-primary);
}

.file-info small {
    font-size: 12px;
    color: var(--text-secondary);
}

.file-type-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.file-type-badge.zip {
    background: #e0e7ff;
    color: #4338ca;
}

.file-type-badge.pdf {
    background: #fee2e2;
    color: #991b1b;
}

.file-type-badge.doc {
    background: #dbeafe;
    color: #1e40af;
}

.file-type-badge.excel {
    background: #d1fae5;
    color: #065f46;
}

.file-size,
.file-date {
    font-size: 13px;
    color: var(--text-secondary);
}

.file-actions {
    display: flex;
    gap: 6px;
}

.action-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.action-btn:hover:not(.danger) {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.action-btn svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    transition: var(--transition);
}

.action-btn:hover:not(.danger) svg {
    color: white;
}

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

.action-btn.danger:hover svg {
    color: white;
}

.action-btn.preview {
    background: var(--info-color);
    color: white;
}

/* .action-btn.preview:hover {
    background: var(--info-hover);
} */

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

.media-files-mobile {
    display: none;
}

.file-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    margin-bottom: 12px;
}

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

.file-card-info {
    flex: 1;
}

.file-card-info strong {
    font-size: 14px;
    color: var(--text-primary);
    display: block;
    margin-bottom: 6px;
}

.file-card-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.file-card-description {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.file-card-description small {
    font-size: 12px;
    color: var(--text-secondary);
}

.file-card-actions {
    display: flex;
    gap: 8px;
}

.file-card-actions .action-btn {
    flex: 1;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.dashboard-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    animation: fadeIn 0.25s ease;
}

.dashboard-modal {
    width: 100%;
    max-width: 460px;
    background: #ffffff;
    border-radius: 14px;
    padding: 24px;

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.15),
        0 4px 10px rgba(0, 0, 0, 0.08);

    animation: slideUp 0.3s ease;
}

.dashboard-modal h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 16px;
}

.dashboard-modal input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px dashed #c7d2fe;
    border-radius: 10px;
    background: #f8fafc;
    cursor: pointer;
}

.dashboard-modal textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    resize: vertical;
}

.dashboard-settings-btn-primary {
    flex: 1;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color: white;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: 0.2s ease;
}

.dashboard-settings-btn-secondary {
    flex: 1;
    background: #f3f4f6;
    color: #374151;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: 0.2s ease;
}

.dashboard-settings-btn-secondary:hover {
    background: #e5e7eb;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px) scale(0.98);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .dashboard-modal {
        max-width: 90%;
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .media-files-page {
        padding: 16px;
    }

    .media-files-header {
        flex-direction: column;
        align-items: stretch;
    }

    .media-files-header h2 {
        font-size: 20px;
        text-align: center;
    }

    .media-files-header p {
        text-align: center;
    }

    .media-files-actions {
        flex-direction: column;
    }

    .btn-upload {
        width: 100%;
        justify-content: center;
    }

}

/* Dashboard Media Images */
.media-images-page {
    padding: 24px;
}

.media-images-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.media-images-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.media-images-header p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.media-images-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.media-actions-mobile {
    display: none;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.media-actions-mobile .action-btn {
    width: 100%;
    text-decoration: none;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    font-size: 13px;
    border-radius: 6px;
    background: var(--bg-tertiary);
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.media-actions-mobile .action-btn i {
    width: 16px;
    height: 16px;
}

.media-actions-mobile .action-btn:hover {
    background: var(--primary-color);
    color: #fff;
}

.media-actions-mobile .action-btn.danger:hover {
    background: var(--danger-color);
}

.btn-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-upload:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-upload i {
    width: 18px;
    height: 18px;
}

.media-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.media-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
}

.media-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.media-image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--bg-tertiary);
}

.media-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.media-card:hover .media-image img {
    transform: scale(1.05);
}

.media-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    transition: var(--transition);
}

.media-card:hover .media-overlay {
    opacity: 1;
}

.overlay-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
}

.overlay-btn:hover {
    background: var(--primary-color);
    transform: scale(1.1);
}

.overlay-btn i {
    width: 18px;
    height: 18px;
    color: var(--text-primary);
}

.overlay-btn:hover i {
    color: white;
}

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

.media-info {
    padding: 16px;
}

.media-filename {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.media-size,
.media-date {
    font-size: 12px;
    color: var(--text-secondary);
}

.media-alt,
.media-caption {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    line-height: 1.5;
}

.media-alt strong,
.media-caption strong {
    color: var(--text-primary);
}

.digicart-pagination {
    margin-top: 24px;
}

.media-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.media-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.media-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
}

.media-modal-content {
    position: relative;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
}

.media-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.media-modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.media-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
}

.media-modal-close i {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.media-modal-close:hover i {
    color: white;
}

.media-modal-body {
    padding: 24px;
}

.modal-image-preview {
    width: 100%;
    height: 250px;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    margin-bottom: 20px;
    background: var(--bg-tertiary);
}

.modal-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--text-primary);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group input[readonly] {
    background: var(--bg-tertiary);
    cursor: not-allowed;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.media-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
}

.btn-cancel,
.btn-save {
    padding: 10px 20px;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.btn-cancel {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.btn-cancel:hover {
    background: var(--bg-primary);
}

.btn-save {
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    border: none;
    color: white;
}

.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
    .media-images-page {
        padding: 16px;
    }

    .media-images-header {
        flex-direction: column;
        align-items: stretch;
    }

    .media-images-header h2 {
        font-size: 20px;
        text-align: center;
    }

    .media-images-header p {
        text-align: center;
    }

    .media-images-actions {
        flex-direction: column;
    }

    .btn-upload {
        width: 100%;
        justify-content: center;
    }

    .media-images-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
    }

    .media-modal-content {
        max-width: 100%;
        margin: 20px;
    }
}

@media (max-width: 480px) {
    .media-images-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .media-overlay {
        display: none;
    }

    .media-actions-mobile {
        display: flex;
    }
}

/* Dashboard Coupons Pages */
.dashboard-coupons-page {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

.dashboard-coupons-desktop-only {
    display: block !important;
}

.dashboard-coupons-mobile-only {
    display: none !important;
}

.dashboard-coupons-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
}

.dashboard-coupons-header-content h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.dashboard-coupons-header-content p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.dashboard-coupons-btn-add {
    padding: 12px 24px;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    white-space: nowrap;
}

.dashboard-coupons-btn-add:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dashboard-coupons-btn-add svg {
    width: 18px;
    height: 18px;
}

.dashboard-coupons-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.dashboard-coupons-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.dashboard-coupons-stat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.dashboard-coupons-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-coupons-stat-icon svg {
    width: 28px;
    height: 28px;
    color: white;
}

.dashboard-coupons-stat-icon.total {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.dashboard-coupons-stat-icon.active {
    background: linear-gradient(135deg, #10b981, #059669);
}

.dashboard-coupons-stat-icon.used {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.dashboard-coupons-stat-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-coupons-stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
}

.dashboard-coupons-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.dashboard-coupons-filter-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-coupons-search-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.dashboard-coupons-search-wrapper svg {
    position: absolute;
    left: 16px;
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.dashboard-coupons-search-input {
    width: 100%;
    padding: 12px 16px 12px 48px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    transition: var(--transition);
}

.dashboard-coupons-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.dashboard-coupons-filter-select {
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    min-width: 180px;
}

.dashboard-coupons-filter-select:hover {
    border-color: var(--primary-color);
}

.dashboard-coupons-filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.dashboard-coupons-table-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 24px;
}

.dashboard-coupons-table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-coupons-table thead {
    background: var(--bg-tertiary);
}

.dashboard-coupons-table th {
    padding: 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.dashboard-coupons-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.dashboard-coupons-table tbody tr {
    transition: var(--transition);
}

.dashboard-coupons-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.dashboard-coupons-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-coupons-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.dashboard-coupons-scope {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    display: inline-block;
    width: fit-content;
}

.dashboard-coupons-scope.global {
    background: #dbeafe;
    color: #1e40af;
}

.dashboard-coupons-scope.specific {
    background: #fef3c7;
    color: #92400e;
}

.dashboard-coupons-code {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    font-family: "Courier New", monospace;
    background: var(--bg-tertiary);
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

.dashboard-coupons-discount {
    font-size: 15px;
    font-weight: 700;
    color: #10b981;
}

.dashboard-coupons-usage {
    font-size: 13px;
    color: var(--text-secondary);
}

.dashboard-coupons-date {
    font-size: 13px;
    color: var(--text-secondary);
}

.dashboard-coupons-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-coupons-status-badge svg {
    width: 14px;
    height: 14px;
}

.dashboard-coupons-status-badge.active {
    background: #dcfce7;
    color: #166534;
}

.dashboard-coupons-status-badge.inactive {
    background: #fee2e2;
    color: #991b1b;
}

.dashboard-coupons-actions {
    display: flex;
    gap: 8px;
}

.dashboard-coupons-btn-action {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-coupons-btn-action svg {
    width: 16px;
    height: 16px;
}

.dashboard-coupons-btn-action.edit {
    color: var(--primary-color);
}

.dashboard-coupons-btn-action.edit:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.dashboard-coupons-btn-action.delete {
    color: var(--danger-color);
}

.dashboard-coupons-btn-action.delete:hover {
    background: var(--danger-color);
    color: white;
    border-color: var(--danger-color);
}

.dashboard-coupons-cards-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-coupons-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    transition: var(--transition);
}

.dashboard-coupons-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--primary-color);
}

.dashboard-coupons-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-coupons-card .dashboard-coupons-info {
    flex: 1;
    min-width: 0;
}

.dashboard-coupons-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

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

.dashboard-coupons-card-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
}

.dashboard-coupons-card-footer {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.dashboard-coupons-card-footer .dashboard-coupons-btn-action {
    flex: 1;
    gap: 6px;
}

.dashboard-coupons-card-footer .dashboard-coupons-btn-action span {
    font-size: 13px;
    font-weight: 600;
}

.dashboard-coupons-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.dashboard-coupons-modal-overlay.active {
    display: flex;
}

.dashboard-coupons-modal {
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    max-width: 600px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    animation: modalSlideIn 0.3s ease;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.dashboard-coupons-modal.small {
    max-width: 450px;
}

.dashboard-coupons-product-search {
    position: relative;
    margin-bottom: 12px;
}

.dashboard-coupons-product-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    width: 18px;
    height: 18px;
}

.dashboard-coupons-product-search input {
    padding-left: 40px;
}

.dashboard-coupons-product-list {
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    background: var(--bg-secondary);
}

.dashboard-coupons-checkbox-label {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.dashboard-coupons-checkbox-label:hover {
    background: var(--bg-hover);
}

.dashboard-coupons-checkbox-label input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.dashboard-coupons-checkbox-label span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-price {
    color: var(--text-secondary);
    font-size: 13px;
}

.dashboard-coupons-product-count {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--bg-info);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

.dashboard-coupons-product-count span {
    font-weight: 600;
    color: var(--primary-color);
}

.product-item.hidden {
    display: none;
}

.dashboard-coupons-product-list::-webkit-scrollbar {
    width: 6px;
}

.dashboard-coupons-product-list::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

.dashboard-coupons-product-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    transition: background 0.3s;
}

.dashboard-coupons-product-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.dashboard-coupons-product-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

.dashboard-coupons-product-list {
    scroll-behavior: smooth;
}

.product-item {
    position: relative;
}

.product-item input[type="checkbox"]:checked ~ span {
    font-weight: 600;
    color: var(--primary-color);
}

.product-item input[type="checkbox"]:checked {
    accent-color: var(--primary-color);
}

.product-item:has(input:checked)
    + .product-item:not(:has(input:checked))::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    height: 1px;
    background: var(--border-color);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard-coupons-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.dashboard-coupons-modal-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.dashboard-coupons-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-coupons-modal-close:hover {
    background: var(--bg-tertiary);
}

.dashboard-coupons-modal-close svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.dashboard-coupons-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.dashboard-coupons-form-group {
    margin-bottom: 20px;
}

.dashboard-coupons-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.dashboard-coupons-form-label .required {
    color: var(--danger-color);
}

.dashboard-coupons-form-input,
.dashboard-coupons-form-select {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    transition: var(--transition);
}

.dashboard-coupons-form-input:focus,
.dashboard-coupons-form-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.dashboard-coupons-form-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.dashboard-coupons-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.dashboard-coupons-radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dashboard-coupons-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
}

.dashboard-coupons-radio-label:hover {
    border-color: var(--primary-color);
}

.dashboard-coupons-radio-label input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.dashboard-coupons-radio-label span {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

.dashboard-coupons-product-list {
    max-height: 350px;
    overflow-y: auto;
    padding: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dashboard-coupons-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: var(--transition);
}

.dashboard-coupons-checkbox-label:hover {
    background: var(--bg-secondary);
}

.dashboard-coupons-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.dashboard-coupons-checkbox-label span {
    font-size: 13px;
    color: var(--text-primary);
}

.dashboard-coupons-toggle-group {
    display: flex;
    align-items: center;
}

.dashboard-coupons-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.dashboard-coupons-toggle input[type="checkbox"] {
    display: none;
}

.dashboard-coupons-toggle-slider {
    width: 48px;
    height: 24px;
    background: #cbd5e1;
    border-radius: 24px;
    position: relative;
    transition: var(--transition);
}

.dashboard-coupons-toggle-slider::after {
    content: "";
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: var(--transition);
}

.dashboard-coupons-toggle input:checked + .dashboard-coupons-toggle-slider {
    background: var(--primary-color);
}

.dashboard-coupons-toggle
    input:checked
    + .dashboard-coupons-toggle-slider::after {
    left: 27px;
}

.dashboard-coupons-toggle-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.dashboard-coupons-delete-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: var(--border-radius-sm);
    margin: 0;
    font-size: 14px;
    color: #92400e;
    line-height: 1.6;
}

.dashboard-coupons-delete-message svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.dashboard-coupons-modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.dashboard-coupons-btn-modal-cancel {
    flex: 1;
    padding: 12px 24px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-coupons-btn-modal-cancel:hover {
    background: var(--bg-secondary);
}

.dashboard-coupons-btn-modal-save,
.dashboard-coupons-btn-modal-delete {
    flex: 1;
    padding: 12px 24px;
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition);
}

.dashboard-coupons-btn-modal-save {
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
}

.dashboard-coupons-btn-modal-save:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dashboard-coupons-btn-modal-delete {
    background: var(--danger-color);
}

.dashboard-coupons-btn-modal-delete:hover {
    background: #dc2626;
}

.dashboard-coupons-btn-modal-save svg,
.dashboard-coupons-btn-modal-delete svg {
    width: 16px;
    height: 16px;
}

.dashboard-coupons-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 25px;
    margin-top: 25px;
}

.dashboard-coupons-pagination-btn {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.dashboard-coupons-pagination-btn:hover:not(.disabled) {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.dashboard-coupons-pagination-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.dashboard-coupons-pagination-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dashboard-coupons-pagination-btn svg {
    width: 18px;
    height: 18px;
}

.dashboard-coupons-pagination-dots {
    color: var(--text-secondary);
    font-weight: 600;
}

@media (max-width: 1200px) {
    .dashboard-coupons-stats-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-coupons-table-container {
        overflow-x: auto;
    }

    .dashboard-coupons-table {
        min-width: 1000px;
    }
}

@media (max-width: 768px) {
    .dashboard-coupons-page {
        padding: 16px;
    }

    .dashboard-coupons-desktop-only {
        display: none !important;
    }

    .dashboard-coupons-mobile-only {
        display: flex !important;
    }

    .dashboard-coupons-header {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 24px;
    }

    .dashboard-coupons-header-content h1 {
        font-size: 24px;
        margin-bottom: 6px;
    }

    .dashboard-coupons-header-content p {
        font-size: 13px;
    }

    .dashboard-coupons-btn-add {
        width: 100%;
        justify-content: center;
    }

    .dashboard-coupons-stats-grid {
        margin-bottom: 24px;
    }

    .dashboard-coupons-stat-card {
        padding: 16px;
    }

    .dashboard-coupons-stat-icon {
        width: 48px;
        height: 48px;
    }

    .dashboard-coupons-stat-icon svg {
        width: 24px;
        height: 24px;
    }

    .dashboard-coupons-stat-value {
        font-size: 20px;
    }

    .dashboard-coupons-filter-bar {
        flex-direction: column;
        gap: 12px;
    }

    .dashboard-coupons-filter-select {
        min-width: auto;
    }

    .dashboard-coupons-pagination {
        gap: 6px;
    }

    .dashboard-coupons-pagination-btn {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .dashboard-coupons-pagination-dots {
        display: none;
    }

    .dashboard-coupons-modal {
        max-width: 100%;
        max-height: 95vh;
    }

    .dashboard-coupons-modal-header {
        padding: 20px;
    }

    .dashboard-coupons-modal-body {
        padding: 20px;
    }

    .dashboard-coupons-modal-footer {
        flex-direction: column;
        padding: 16px 20px;
    }

    .dashboard-coupons-form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .dashboard-coupons-page {
        padding: 12px;
    }

    .dashboard-coupons-header-content h1 {
        font-size: 20px;
    }

    .dashboard-coupons-stat-value {
        font-size: 18px;
    }

    .dashboard-coupons-card {
        padding: 14px;
    }
}

/* Dashboard File License */
.dashboard-files-license-page {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

.dashboard-files-license-desktop-only {
    display: block !important;
}

.dashboard-files-license-mobile-only {
    display: none !important;
}

.dashboard-files-license-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
}

.dashboard-files-license-header-content h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.dashboard-files-license-header-content p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.dashboard-files-license-btn-add {
    padding: 12px 24px;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    white-space: nowrap;
}

.dashboard-files-license-btn-add:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dashboard-files-license-btn-add svg {
    width: 18px;
    height: 18px;
}

.dashboard-files-license-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.dashboard-files-license-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.dashboard-files-license-stat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.dashboard-files-license-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-files-license-stat-icon svg {
    width: 28px;
    height: 28px;
    color: white;
}

.dashboard-files-license-stat-icon.total {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.dashboard-files-license-stat-icon.licensed {
    background: linear-gradient(135deg, #10b981, #059669);
}

.dashboard-files-license-stat-icon.downloads {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.dashboard-files-license-stat-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-files-license-stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
}

.dashboard-files-license-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.dashboard-files-license-search-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-files-license-search-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.dashboard-files-license-search-wrapper svg {
    position: absolute;
    left: 16px;
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.dashboard-files-license-search-input {
    width: 100%;
    padding: 12px 16px 12px 48px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    transition: var(--transition);
}

.dashboard-files-license-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.dashboard-files-license-filter-select {
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    min-width: 180px;
}

.dashboard-files-license-filter-select:hover {
    border-color: var(--primary-color);
}

.dashboard-files-license-filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.dashboard-files-license-table-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 24px;
}

.dashboard-files-license-table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-files-license-table thead {
    background: var(--bg-tertiary);
}

.dashboard-files-license-table th {
    padding: 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.dashboard-files-license-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.dashboard-files-license-table tbody tr {
    transition: var(--transition);
}

.dashboard-files-license-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.dashboard-files-license-file-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-files-license-file-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-files-license-file-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.dashboard-files-license-file-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dashboard-files-license-file-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.dashboard-files-license-file-type {
    font-size: 12px;
    color: var(--text-secondary);
}

.dashboard-files-license-id-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-files-license-id {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    font-family: "Courier New", monospace;
    background: var(--bg-tertiary);
    padding: 4px 8px;
    border-radius: 4px;
}

.dashboard-files-license-btn-copy-id {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-files-license-btn-copy-id:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.dashboard-files-license-btn-copy-id:hover svg {
    color: white;
}

.dashboard-files-license-btn-copy-id svg {
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
}

.dashboard-files-license-no-license {
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
}

.dashboard-files-license-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-files-license-status-badge svg {
    width: 14px;
    height: 14px;
}

.dashboard-files-license-status-badge.enabled {
    background: #dcfce7;
    color: #166534;
}

.dashboard-files-license-status-badge.disabled {
    background: #fee2e2;
    color: #991b1b;
}

.dashboard-files-license-version,
.dashboard-files-license-size,
.dashboard-files-license-downloads {
    font-size: 13px;
    color: var(--text-secondary);
}

.dashboard-files-license-actions {
    display: flex;
    gap: 8px;
}

.dashboard-files-license-btn-action {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-files-license-btn-action svg {
    width: 16px;
    height: 16px;
}

.dashboard-files-license-btn-action.edit {
    color: var(--primary-color);
}

.dashboard-files-license-btn-action.edit:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.dashboard-files-license-btn-action.delete {
    color: var(--danger-color);
}

.dashboard-files-license-btn-action.delete:hover {
    background: var(--danger-color);
    color: white;
    border-color: var(--danger-color);
}

.dashboard-files-license-cards-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-files-license-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    transition: var(--transition);
}

.dashboard-files-license-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--primary-color);
}

.dashboard-files-license-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-files-license-card .dashboard-files-license-file-info {
    flex: 1;
    min-width: 0;
}

.dashboard-files-license-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.dashboard-files-license-card-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-files-license-card-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
}

.dashboard-files-license-card-footer {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.dashboard-files-license-card-footer .dashboard-files-license-btn-action {
    flex: 1;
    gap: 6px;
}

.dashboard-files-license-card-footer .dashboard-files-license-btn-action span {
    font-size: 13px;
    font-weight: 600;
}

.dashboard-files-license-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.dashboard-files-license-modal-overlay.active {
    display: flex;
}

.dashboard-files-license-modal {
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    max-width: 700px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    animation: modalSlideIn 0.3s ease;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.dashboard-files-license-modal.small {
    max-width: 450px;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard-files-license-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.dashboard-files-license-modal-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.dashboard-files-license-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-files-license-modal-close:hover {
    background: var(--bg-tertiary);
}

.dashboard-files-license-modal-close svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.dashboard-files-license-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.dashboard-files-license-form-group {
    margin-bottom: 20px;
}

.dashboard-files-license-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.dashboard-files-license-form-label .required {
    color: var(--danger-color);
}

.dashboard-files-license-form-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    transition: var(--transition);
}

.dashboard-files-license-form-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.dashboard-files-license-form-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.dashboard-files-license-tab-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.dashboard-files-license-tab {
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dashboard-files-license-tab:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.dashboard-files-license-tab.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.dashboard-files-license-tab svg {
    width: 16px;
    height: 16px;
}

.dashboard-files-license-file-select-wrapper {
    display: flex;
    gap: 8px;
}

.dashboard-files-license-file-select-wrapper
    .dashboard-files-license-form-input {
    flex: 1;
}

.dashboard-files-license-btn-browse {
    padding: 12px 20px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.dashboard-files-license-btn-browse:hover {
    background: var(--secondary-color);
}

.dashboard-files-license-btn-browse svg {
    width: 16px;
    height: 16px;
}

.dashboard-files-license-media-list {
    margin-top: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-tertiary);
    overflow: hidden;
}

.dashboard-files-license-media-search {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    display: flex;
    align-items: center;
}

.dashboard-files-license-media-search svg {
    position: absolute;
    left: 20px;
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
}

.dashboard-files-license-media-search input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-primary);
}

.dashboard-files-license-media-search input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.dashboard-files-license-media-items {
    max-height: 250px;
    overflow-y: auto;
}

.dashboard-files-license-media-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-files-license-media-item:last-child {
    border-bottom: none;
}

.dashboard-files-license-media-item:hover {
    background: var(--bg-secondary);
}

.dashboard-files-license-media-item svg {
    width: 24px;
    height: 24px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.dashboard-files-license-media-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-files-license-media-item-info strong {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
}

.dashboard-files-license-media-item-info span {
    font-size: 11px;
    color: var(--text-secondary);
}

.dashboard-files-license-form-section {
    margin-top: 24px;
    padding: 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
}

.dashboard-files-license-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-files-license-section-title svg {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
}

.dashboard-files-license-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
}

.dashboard-files-license-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.dashboard-files-license-toggle input[type="checkbox"] {
    display: none;
}

.dashboard-files-license-toggle-slider {
    width: 48px;
    height: 24px;
    background: #cbd5e1;
    border-radius: 24px;
    position: relative;
    transition: var(--transition);
}

.dashboard-files-license-toggle-slider::after {
    content: "";
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: var(--transition);
}

.dashboard-files-license-toggle
    input:checked
    + .dashboard-files-license-toggle-slider {
    background: var(--primary-color);
}

.dashboard-files-license-toggle
    input:checked
    + .dashboard-files-license-toggle-slider::after {
    left: 27px;
}

.dashboard-files-license-toggle-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-files-license-toggle-info strong {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
}

.dashboard-files-license-toggle-info span {
    font-size: 12px;
    color: var(--text-secondary);
}

.dashboard-files-license-id-input-wrapper {
    display: flex;
    gap: 8px;
}

.dashboard-files-license-id-input-wrapper .dashboard-files-license-form-input {
    flex: 1;
    font-family: "Courier New", monospace;
    font-weight: 700;
    color: var(--primary-color);
}

.dashboard-files-license-btn-generate {
    padding: 12px 20px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.dashboard-files-license-btn-generate:hover {
    background: var(--secondary-color);
}

.dashboard-files-license-btn-generate svg {
    width: 16px;
    height: 16px;
}

.dashboard-files-license-delete-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: var(--border-radius-sm);
    margin: 0;
    font-size: 14px;
    color: #92400e;
    line-height: 1.6;
}

.dashboard-files-license-delete-message svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.dashboard-files-license-modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.dashboard-files-license-btn-modal-cancel {
    flex: 1;
    padding: 12px 24px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-files-license-btn-modal-cancel:hover {
    background: var(--bg-secondary);
}

.dashboard-files-license-btn-modal-save,
.dashboard-files-license-btn-modal-delete {
    flex: 1;
    padding: 12px 24px;
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition);
}

.dashboard-files-license-btn-modal-save {
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
}

.dashboard-files-license-btn-modal-save:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dashboard-files-license-btn-modal-delete {
    background: var(--danger-color);
}

.dashboard-files-license-btn-modal-delete:hover {
    background: #dc2626;
}

.dashboard-files-license-btn-modal-save svg,
.dashboard-files-license-btn-modal-delete svg {
    width: 16px;
    height: 16px;
}

.dashboard-files-license-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.dashboard-files-license-pagination-btn {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-files-license-pagination-btn:hover:not(.disabled) {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.dashboard-files-license-pagination-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.dashboard-files-license-pagination-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dashboard-files-license-pagination-btn svg {
    width: 18px;
    height: 18px;
}

.dashboard-files-license-pagination-dots {
    color: var(--text-secondary);
    font-weight: 600;
}

@media (max-width: 1200px) {
    .dashboard-files-license-stats-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-files-license-table-container {
        overflow-x: auto;
    }

    .dashboard-files-license-table {
        min-width: 1100px;
    }
}

@media (max-width: 768px) {
    .dashboard-files-license-page {
        padding: 16px;
    }

    .dashboard-files-license-desktop-only {
        display: none !important;
    }

    .dashboard-files-license-mobile-only {
        display: flex !important;
    }

    .dashboard-files-license-header {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 24px;
    }

    .dashboard-files-license-header-content h1 {
        font-size: 24px;
        margin-bottom: 6px;
    }

    .dashboard-files-license-header-content p {
        font-size: 13px;
    }

    .dashboard-files-license-btn-add {
        width: 100%;
        justify-content: center;
    }

    .dashboard-files-license-stats-grid {
        margin-bottom: 24px;
    }

    .dashboard-files-license-stat-card {
        padding: 16px;
    }

    .dashboard-files-license-stat-icon {
        width: 48px;
        height: 48px;
    }

    .dashboard-files-license-stat-icon svg {
        width: 24px;
        height: 24px;
    }

    .dashboard-files-license-stat-value {
        font-size: 20px;
    }

    .dashboard-files-license-search-bar {
        flex-direction: column;
        gap: 12px;
    }

    .dashboard-files-license-filter-select {
        min-width: auto;
    }

    .dashboard-files-license-pagination {
        gap: 6px;
    }

    .dashboard-files-license-pagination-btn {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .dashboard-files-license-pagination-dots {
        display: none;
    }

    .dashboard-files-license-modal {
        max-width: 100%;
        max-height: 95vh;
    }

    .dashboard-files-license-modal-header {
        padding: 20px;
    }

    .dashboard-files-license-modal-body {
        padding: 20px;
    }

    .dashboard-files-license-modal-footer {
        flex-direction: column;
        padding: 16px 20px;
    }
}

@media (max-width: 480px) {
    .dashboard-files-license-page {
        padding: 12px;
    }

    .dashboard-files-license-header-content h1 {
        font-size: 20px;
    }

    .dashboard-files-license-stat-value {
        font-size: 18px;
    }

    .dashboard-files-license-card {
        padding: 14px;
    }
}

/* Dashboard e Course */
.dashboard-courses-page {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

.dashboard-courses-desktop-only {
    display: block !important;
}

.dashboard-courses-mobile-only {
    display: none !important;
}

.dashboard-courses-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
}

.dashboard-courses-header-content h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.dashboard-courses-header-content p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.dashboard-courses-btn-add {
    padding: 12px 24px;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    white-space: nowrap;
}

.dashboard-courses-btn-add:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dashboard-courses-btn-add svg {
    width: 18px;
    height: 18px;
}

.dashboard-courses-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.dashboard-courses-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.dashboard-courses-stat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.dashboard-courses-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-courses-stat-icon svg {
    width: 28px;
    height: 28px;
    color: white;
}

.dashboard-courses-stat-icon.total {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.dashboard-courses-stat-icon.published {
    background: linear-gradient(135deg, #10b981, #059669);
}

.dashboard-courses-stat-icon.modules {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.dashboard-courses-stat-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-courses-stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
}

.dashboard-courses-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.dashboard-courses-search-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-courses-search-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.dashboard-courses-search-wrapper svg {
    position: absolute;
    left: 16px;
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.dashboard-courses-search-input {
    width: 100%;
    padding: 12px 16px 12px 48px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    transition: var(--transition);
}

.dashboard-courses-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.dashboard-courses-filter-select {
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    min-width: 180px;
}

.dashboard-courses-filter-select:hover {
    border-color: var(--primary-color);
}

.dashboard-courses-filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.dashboard-courses-table-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 24px;
}

.dashboard-courses-table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-courses-table thead {
    background: var(--bg-tertiary);
}

.dashboard-courses-table th {
    padding: 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.dashboard-courses-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.dashboard-courses-table tbody tr {
    transition: var(--transition);
}

.dashboard-courses-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.dashboard-courses-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dashboard-courses-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.dashboard-courses-description {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dashboard-courses-slug {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    font-family: "Courier New", monospace;
    background: var(--bg-tertiary);
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

.dashboard-courses-modules {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.dashboard-courses-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-courses-status-badge svg {
    width: 14px;
    height: 14px;
}

.dashboard-courses-status-badge.published {
    background: #dcfce7;
    color: #166534;
}

.dashboard-courses-status-badge.draft {
    background: #fef3c7;
    color: #92400e;
}

.dashboard-courses-actions {
    display: flex;
    gap: 8px;
}

.dashboard-courses-btn-action {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-courses-btn-action svg {
    width: 16px;
    height: 16px;
}

.dashboard-courses-btn-action.edit {
    color: var(--primary-color);
}

.dashboard-courses-btn-action.edit:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.dashboard-courses-btn-action.modules {
    text-decoration: none;
    color: #f59e0b;
}

.dashboard-courses-btn-action.modules:hover {
    background: #f59e0b;
    color: white;
    border-color: #f59e0b;
}

.dashboard-courses-btn-action.delete {
    color: var(--danger-color);
}

.dashboard-courses-btn-action.delete:hover {
    background: var(--danger-color);
    color: white;
    border-color: var(--danger-color);
}

.dashboard-courses-cards-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-courses-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    transition: var(--transition);
}

.dashboard-courses-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--primary-color);
}

.dashboard-courses-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-courses-card .dashboard-courses-info {
    flex: 1;
    min-width: 0;
}

.dashboard-courses-card-body {
    margin-bottom: 16px;
}

.dashboard-courses-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.dashboard-courses-card-meta .dashboard-courses-modules {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dashboard-courses-card-meta .dashboard-courses-modules svg {
    width: 16px;
    height: 16px;
}

.dashboard-courses-card-footer {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.dashboard-courses-card-footer .dashboard-courses-btn-action {
    flex: 1;
    gap: 6px;
}

.dashboard-courses-card-footer .dashboard-courses-btn-action span {
    font-size: 13px;
    font-weight: 600;
}

.dashboard-courses-card-footer .dashboard-courses-btn-action.delete {
    /* flex: 0 0 auto; */
    padding: 10px 12px;
}

.dashboard-courses-card-footer .dashboard-courses-btn-action.delete span {
    display: none;
}

.dashboard-courses-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.dashboard-courses-modal-overlay.active {
    display: flex;
}

.dashboard-courses-modal {
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    max-width: 600px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    animation: modalSlideIn 0.3s ease;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.dashboard-courses-modal.small {
    max-width: 450px;
}

.dashboard-courses-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.dashboard-courses-modal-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.dashboard-courses-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-courses-modal-close:hover {
    background: var(--bg-tertiary);
}

.dashboard-courses-modal-close svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.dashboard-courses-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.dashboard-courses-form-group {
    margin-bottom: 20px;
}

.dashboard-courses-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.dashboard-courses-form-label .required {
    color: var(--danger-color);
}

.dashboard-courses-form-input,
.dashboard-courses-form-select,
.dashboard-courses-form-textarea {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    transition: var(--transition);
    font-family: inherit;
}

.dashboard-courses-form-input:focus,
.dashboard-courses-form-select:focus,
.dashboard-courses-form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.dashboard-courses-form-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

.dashboard-courses-form-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.dashboard-courses-form-hint strong {
    color: var(--primary-color);
}

.dashboard-courses-info-box {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: #dbeafe;
    border-left: 4px solid #3b82f6;
    border-radius: var(--border-radius-sm);
    margin-top: 24px;
}

.dashboard-courses-info-box svg {
    width: 20px;
    height: 20px;
    color: #3b82f6;
    flex-shrink: 0;
    margin-top: 2px;
}

.dashboard-courses-info-box-content {
    flex: 1;
}

.dashboard-courses-info-box-content strong {
    display: block;
    font-size: 13px;
    color: #1e40af;
    margin-bottom: 4px;
}

.dashboard-courses-info-box-content p {
    font-size: 13px;
    color: #1e40af;
    line-height: 1.5;
    margin: 0;
}

.dashboard-courses-delete-message {
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: var(--border-radius-sm);
    margin: 0;
    font-size: 14px;
    color: #92400e;
    line-height: 1.6;
}

.dashboard-courses-delete-message svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.dashboard-courses-modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.dashboard-courses-btn-modal-cancel {
    flex: 1;
    padding: 12px 24px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-courses-btn-modal-cancel:hover {
    background: var(--bg-secondary);
}

.dashboard-courses-btn-modal-save,
.dashboard-courses-btn-modal-delete {
    flex: 1;
    padding: 12px 24px;
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition);
}

.dashboard-courses-btn-modal-save {
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
}

.dashboard-courses-btn-modal-save:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dashboard-courses-btn-modal-delete {
    background: var(--danger-color);
}

.dashboard-courses-btn-modal-delete:hover {
    background: #dc2626;
}

.dashboard-courses-btn-modal-save svg,
.dashboard-courses-btn-modal-delete svg {
    width: 16px;
    height: 16px;
}

.dashboard-courses-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.dashboard-courses-pagination-btn {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-courses-pagination-btn:hover:not(.disabled) {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.dashboard-courses-pagination-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.dashboard-courses-pagination-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dashboard-courses-pagination-btn svg {
    width: 18px;
    height: 18px;
}

/* Responsive */
@media (max-width: 1200px) {
    .dashboard-courses-stats-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-courses-table-container {
        overflow-x: auto;
    }

    .dashboard-courses-table {
        min-width: 1000px;
    }
}

@media (max-width: 768px) {
    .dashboard-courses-page {
        padding: 16px;
    }

    .dashboard-courses-desktop-only {
        display: none !important;
    }

    .dashboard-courses-mobile-only {
        display: flex !important;
    }

    .dashboard-courses-header {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-courses-header-content h1 {
        font-size: 24px;
    }

    .dashboard-courses-btn-add {
        width: 100%;
        justify-content: center;
    }

    .dashboard-courses-stats-grid {
        margin-bottom: 24px;
    }

    .dashboard-courses-stat-card {
        padding: 16px;
    }

    .dashboard-courses-stat-icon {
        width: 48px;
        height: 48px;
    }

    .dashboard-courses-stat-icon svg {
        width: 24px;
        height: 24px;
    }

    .dashboard-courses-stat-value {
        font-size: 20px;
    }

    .dashboard-courses-search-bar {
        flex-direction: column;
        gap: 12px;
    }

    .dashboard-courses-filter-select {
        min-width: auto;
    }

    .dashboard-courses-modal {
        max-width: 100%;
        max-height: 95vh;
    }

    .dashboard-courses-modal-header,
    .dashboard-courses-modal-body {
        padding: 20px;
    }

    .dashboard-courses-modal-footer {
        flex-direction: column;
        padding: 16px 20px;
    }
}

@media (max-width: 480px) {
    .dashboard-courses-page {
        padding: 12px;
    }

    .dashboard-courses-header-content h1 {
        font-size: 20px;
    }

    .dashboard-courses-card-footer {
        flex-wrap: wrap;
    }

    .dashboard-courses-btn-action {
        flex: 1 1 calc(50% - 4px);
    }

    .dashboard-courses-btn-action.delete {
        flex: 1 1 100%;
    }
}

/* Dashboard Courses Modules */
.dashboard-course-modules-page {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.dashboard-course-modules-header {
    margin-bottom: 32px;
}

.dashboard-course-modules-header-content h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.dashboard-course-modules-header-content p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.dashboard-course-modules-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.dashboard-course-modules-course-select-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-course-modules-filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.dashboard-course-modules-filter-label svg {
    width: 18px;
    height: 18px;
    color: var(--primary-color);
}

.dashboard-course-modules-course-select {
    flex: 1;
    max-width: 400px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-course-modules-course-select:hover {
    border-color: var(--primary-color);
}

.dashboard-course-modules-course-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.dashboard-course-modules-btn-add-module {
    padding: 12px 24px;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    white-space: nowrap;
}

.dashboard-course-modules-btn-add-module:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dashboard-course-modules-btn-add-module svg {
    width: 18px;
    height: 18px;
}

.dashboard-course-modules-course-info {
    padding: 24px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: var(--border-radius);
    margin-bottom: 32px;
    color: white;
}

.dashboard-course-modules-course-info-content h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: white;
}

.dashboard-course-modules-course-info-content p {
    font-size: 14px;
    margin: 0 0 16px 0;
    opacity: 0.95;
    line-height: 1.6;
}

.dashboard-course-modules-course-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.dashboard-course-modules-course-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.dashboard-course-modules-course-meta .meta-item svg {
    width: 16px;
    height: 16px;
    color: #fff;
}

.dashboard-course-modules-course-meta .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.dashboard-course-modules-course-meta .status-badge svg {
    width: 14px;
    height: 14px;
}

.dashboard-course-modules-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dashboard-course-modules-module-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
}

.dashboard-course-modules-module-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.dashboard-course-modules-module-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: var(--bg-tertiary);
    border-bottom: 2px solid var(--border-color);
}

.dashboard-course-modules-module-number {
    padding: 8px 16px;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color: white;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-course-modules-module-info {
    flex: 1;
    min-width: 0;
}

.dashboard-course-modules-module-info h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.dashboard-course-modules-module-lessons {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
}

.dashboard-course-modules-module-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-course-modules-btn-action {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-course-modules-btn-action svg {
    width: 16px;
    height: 16px;
}

.dashboard-course-modules-btn-action.edit {
    color: var(--primary-color);
}

.dashboard-course-modules-btn-action.edit:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.dashboard-course-modules-btn-action.add-lesson {
    color: #10b981;
}

.dashboard-course-modules-btn-action.add-lesson:hover {
    background: #10b981;
    color: white;
    border-color: #10b981;
}

.dashboard-course-modules-btn-action.delete {
    color: var(--danger-color);
}

.dashboard-course-modules-btn-action.delete:hover {
    background: var(--danger-color);
    color: white;
    border-color: var(--danger-color);
}

.dashboard-course-modules-btn-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-course-modules-btn-toggle svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    transition: var(--transition);
}

.dashboard-course-modules-btn-toggle:hover {
    background: var(--bg-tertiary);
}

.dashboard-course-modules-btn-toggle.rotated svg {
    transform: rotate(180deg);
}

.dashboard-course-modules-lessons-list {
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.dashboard-course-modules-lessons-list.collapsed {
    max-height: 0;
}

.dashboard-course-modules-lesson-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition);
}

.dashboard-course-modules-lesson-item:last-child {
    border-bottom: none;
}

.dashboard-course-modules-lesson-item:hover {
    background: var(--bg-tertiary);
}

.dashboard-course-modules-lesson-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-course-modules-lesson-icon svg {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
}

.dashboard-course-modules-lesson-info {
    flex: 1;
    min-width: 0;
}

.dashboard-course-modules-lesson-info strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    margin-bottom: 4px;
}

.dashboard-course-modules-lesson-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

.dashboard-course-modules-lesson-actions {
    display: flex;
    gap: 8px;
}

.dashboard-course-modules-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.dashboard-course-modules-empty-state svg {
    width: 80px;
    height: 80px;
    color: var(--text-secondary);
    opacity: 0.3;
    margin-bottom: 20px;
}

.dashboard-course-modules-empty-state h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.dashboard-course-modules-empty-state p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 24px 0;
}

.dashboard-course-modules-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.dashboard-course-modules-modal-overlay.active {
    display: flex;
}

.dashboard-course-modules-modal {
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    max-width: 600px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    animation: modalSlideIn 0.3s ease;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.dashboard-course-modules-modal.small {
    max-width: 450px;
}

.dashboard-course-modules-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.dashboard-course-modules-modal-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.dashboard-course-modules-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-course-modules-modal-close:hover {
    background: var(--bg-tertiary);
}

.dashboard-course-modules-modal-close svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.dashboard-course-modules-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.video-list-wrapper {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

.video-list-wrapper::-webkit-scrollbar {
    width: 6px;
}

.video-list-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.video-list-wrapper::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.video-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
}

.video-list-item:last-child {
    border-bottom: none;
}

.video-list-item:hover {
    background: #f9f9f9;
}

.video-list-item:has(input:checked) {
    background: #e0e7ff;
}

.video-list-item input[type="radio"] {
    accent-color: #4f46e5;
}

#mediaVideoId {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

#mediaVideoId::-webkit-scrollbar {
    width: 6px;
}

#mediaVideoId::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

#mediaVideoId::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

#mediaVideoId::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

.dashboard-course-modules-form-group {
    margin-bottom: 20px;
}

.dashboard-course-modules-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.dashboard-course-modules-form-label .required {
    color: var(--danger-color);
}

.dashboard-course-modules-form-input,
.dashboard-course-modules-form-textarea {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    transition: var(--transition);
    font-family: inherit;
}

.dashboard-course-modules-form-input:focus,
.dashboard-course-modules-form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.dashboard-course-modules-form-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

.dashboard-course-modules-form-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.dashboard-course-modules-lesson-type-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.dashboard-course-modules-type-tab {
    padding: 12px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dashboard-course-modules-type-tab:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.dashboard-course-modules-type-tab.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.dashboard-course-modules-type-tab svg {
    width: 16px;
    height: 16px;
}

.dashboard-course-modules-delete-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: var(--border-radius-sm);
    margin: 0;
    font-size: 14px;
    color: #92400e;
    line-height: 1.6;
}

.dashboard-course-modules-delete-message svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.dashboard-course-modules-modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.dashboard-course-modules-btn-modal-cancel {
    flex: 1;
    padding: 12px 24px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-course-modules-btn-modal-cancel:hover {
    background: var(--bg-secondary);
}

.dashboard-course-modules-btn-modal-save,
.dashboard-course-modules-btn-modal-delete {
    flex: 1;
    padding: 12px 24px;
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition);
}

.dashboard-course-modules-btn-modal-save {
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
}

.dashboard-course-modules-btn-modal-save:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dashboard-course-modules-btn-modal-delete {
    background: var(--danger-color);
}

.dashboard-course-modules-btn-modal-delete:hover {
    background: #dc2626;
}

.dashboard-course-modules-btn-modal-save svg,
.dashboard-course-modules-btn-modal-delete svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 768px) {
    .dashboard-course-modules-page {
        padding: 16px;
    }

    .dashboard-course-modules-header-content h1 {
        font-size: 24px;
    }

    .dashboard-course-modules-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-course-modules-course-select-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-course-modules-course-select {
        max-width: none;
    }

    .dashboard-course-modules-btn-add-module {
        width: 100%;
        justify-content: center;
    }

    .dashboard-course-modules-module-header {
        flex-wrap: wrap;
    }

    .dashboard-course-modules-module-info {
        flex: 1 1 100%;
        order: -1;
        margin-bottom: 12px;
    }

    .dashboard-course-modules-module-actions {
        flex-wrap: wrap;
    }

    .dashboard-course-modules-lesson-item {
        flex-wrap: wrap;
    }

    .dashboard-course-modules-lesson-info {
        flex: 1 1 100%;
    }

    .dashboard-course-modules-lesson-actions {
        margin-left: 56px;
    }

    .dashboard-course-modules-modal {
        max-width: 100%;
        max-height: 95vh;
    }

    .dashboard-course-modules-modal-header,
    .dashboard-course-modules-modal-body {
        padding: 20px;
    }

    .dashboard-course-modules-modal-footer {
        flex-direction: column;
        padding: 16px 20px;
    }
}

/* Dashboard Alert */
.dashboard-alerts {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 360px;
    width: 100%;
}

.dashboard-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    animation: slideIn 0.3s ease;
}

.dashboard-alert ul {
    list-style: none;
    padding-left: 0;
    margin: 8px 0 0;
}

.dashboard-alert ul li {
    margin-bottom: 4px;
}

.dashboard-alert-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    flex-shrink: 0;
}

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

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

.dashboard-alert-message {
    font-size: 14px;
    line-height: 1.5;
}

.dashboard-alert-close {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    opacity: 0.6;
}

.dashboard-alert-close:hover {
    opacity: 1;
}

.alert-success {
    border-color: #bbf7d0;
}

.alert-success .dashboard-alert-icon {
    background: #22c55e;
}

.alert-success .dashboard-alert-title,
.alert-success .dashboard-alert-message {
    color: #166534;
}

.alert-error {
    border-color: #fecaca;
}

.alert-error .dashboard-alert-icon {
    background: #ef4444;
}

.alert-error .dashboard-alert-icon {
    list-style: none;
}

.alert-error .dashboard-alert-title,
.alert-error .dashboard-alert-message {
    color: #7f1d1d;
}

.alert-validation {
    border-color: #fecaca;
}

.alert-validation ul {
    padding-left: 18px;
    margin: 6px 0 0;
}

.alert-validation li {
    font-size: 14px;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dashboard Invoice Manage */
/* ================================================
   INVOICE MANAGEMENT STYLES
   ================================================ */

.dashboard-invoice-manage-container {
    padding: 24px;
}

.dashboard-invoice-manage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.dashboard-invoice-manage-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.dashboard-invoice-manage-header p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.dashboard-invoice-manage-search {
    position: relative;
    max-width: 400px;
    flex: 1;
}

.dashboard-invoice-manage-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.dashboard-invoice-manage-search-input {
    width: 100%;
    padding: 10px 12px 10px 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-secondary);
    transition: var(--transition);
}

.dashboard-invoice-manage-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.dashboard-invoice-manage-table-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.dashboard-invoice-manage-table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-invoice-manage-table thead {
    background: var(--bg-tertiary);
}

.dashboard-invoice-manage-table th {
    padding: 14px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dashboard-invoice-manage-table td {
    padding: 16px;
    border-top: 1px solid var(--border-color);
    vertical-align: top;
}

.dashboard-invoice-manage-table tbody tr {
    transition: background-color 0.2s;
}

.dashboard-invoice-manage-table tbody tr:hover {
    background: var(--bg-primary);
}

.dashboard-invoice-manage-cell-invoice,
.dashboard-invoice-manage-cell-customer,
.dashboard-invoice-manage-cell-product {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-invoice-manage-cell-invoice strong {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 600;
}

.dashboard-invoice-manage-cell-invoice small,
.dashboard-invoice-manage-cell-customer small,
.dashboard-invoice-manage-cell-product small {
    font-size: 12px;
    color: var(--text-secondary);
}

.dashboard-invoice-manage-cell-customer strong {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
}

.dashboard-invoice-manage-cell-product span {
    font-size: 14px;
    color: var(--text-primary);
}

.dashboard-invoice-manage-cell-product strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
}

.dashboard-invoice-manage-order-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
    font-family: "Courier New", monospace;
    margin-top: 4px;
}

.dashboard-invoice-manage-order-link:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.dashboard-invoice-manage-order-link i {
    width: 14px;
    height: 14px;
}

.dashboard-invoice-manage-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.dashboard-invoice-manage-badge:hover {
    opacity: 0.8;
}

.dashboard-invoice-manage-badge-payment {
    background: #e0e7ff;
    color: #3730a3;
}

.dashboard-invoice-manage-badge-new {
    background: #dcfce7;
    color: #166534;
}

.dashboard-invoice-manage-badge-renewal {
    background: #e0e7ff;
    color: #3730a3;
}

.dashboard-invoice-manage-badge-paid {
    background: #dcfce7;
    color: #166534;
}

.dashboard-invoice-manage-badge-cancelled {
    color: rgba(245, 110, 40, 1);
    background: rgba(245, 110, 40, 0.3);
}

.dashboard-invoice-manage-badge-unpaid {
    background: #fee2e2;
    color: #991b1b;
}

.dashboard-invoice-manage-badge-confirmed {
    background: #fed7aa;
    color: #c2410c;
}

.dashboard-invoice-manage-badge-expired {
    background: #f3f4f6;
    color: #6b7280;
}

.dashboard-invoice-manage-action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-invoice-manage-action-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.dashboard-invoice-manage-action-btn i {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.dashboard-invoice-manage-action-btn:hover i {
    color: white;
}

.dashboard-invoice-manage-empty {
    padding: 48px 16px !important;
    text-align: center;
}

.dashboard-invoice-manage-empty i {
    width: 48px;
    height: 48px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.dashboard-invoice-manage-empty p {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0;
}

.dashboard-invoice-manage-empty-state {
    padding: 48px 16px;
    text-align: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.dashboard-invoice-manage-empty-state i {
    width: 48px;
    height: 48px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.dashboard-invoice-manage-empty-state p {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0;
}

.dashboard-invoice-manage-pagination {
    padding: 16px;
    border-top: 1px solid var(--border-color);
}

.dashboard-invoice-manage-mobile {
    display: none;
}

.dashboard-invoice-manage-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 12px;
    overflow: hidden;
}

.dashboard-invoice-manage-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    cursor: pointer;
}

.dashboard-invoice-manage-card-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.dashboard-invoice-manage-card-summary strong {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 600;
}

.dashboard-invoice-manage-toggle-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.dashboard-invoice-manage-toggle-icon i {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}

.dashboard-invoice-manage-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.dashboard-invoice-manage-detail-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    align-items: start;
}

.dashboard-invoice-manage-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.dashboard-invoice-manage-label::after {
    content: ":";
    margin-left: 2px;
}

.dashboard-invoice-manage-detail-row > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-invoice-manage-detail-row strong {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
}

.dashboard-invoice-manage-detail-row small {
    font-size: 12px;
    color: var(--text-secondary);
}

.dashboard-invoice-manage-card-footer {
    padding: 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
}

.dashboard-invoice-manage-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dashboard-invoice-manage-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
}

.dashboard-invoice-manage-modal-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    background: var(--bg-secondary);
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.dashboard-invoice-manage-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-invoice-manage-modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.dashboard-invoice-manage-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-invoice-manage-modal-close:hover {
    background: var(--border-color);
}

.dashboard-invoice-manage-modal-close i {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.dashboard-invoice-manage-modal-body {
    padding: 24px;
    overflow-y: auto;
}

.dashboard-invoice-manage-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    gap: 16px;
}

.dashboard-invoice-manage-summary-row:last-child {
    border-bottom: none;
}

.dashboard-invoice-manage-summary-row > span:first-child {
    font-size: 14px;
    color: var(--text-secondary);
    min-width: 120px;
}

.dashboard-invoice-manage-summary-row strong {
    font-size: 14px;
    color: var(--text-primary);
    text-align: right;
}

.dashboard-invoice-manage-summary-row small {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.dashboard-invoice-manage-amount {
    color: var(--primary-color) !important;
    font-size: 16px !important;
}

.dashboard-invoice-manage-status-text {
    text-transform: uppercase;
}

.dashboard-invoice-manage-modal-footer {
    display: flex;
    gap: 5px;
    padding: 20px 20px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.dashboard-invoice-manage-form-inline {
    display: inline-block;
}

.dashboard-invoice-manage-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.dashboard-invoice-manage-btn i {
    width: 16px;
    height: 16px;
}

.dashboard-invoice-manage-btn-view {
    background: var(--primary-color);
    color: white;
}

.dashboard-invoice-manage-btn-view:hover {
    background: var(--primary-hover);
}

.dashboard-invoice-manage-btn-success {
    background: #10b981;
    color: white;
}

.dashboard-invoice-manage-btn-success:hover {
    background: #059669;
}

.dashboard-invoice-manage-btn-danger {
    background: #ef4444;
    color: white;
}

.dashboard-invoice-manage-btn-danger:hover {
    background: #dc2626;
}

.dashboard-invoice-manage-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.dashboard-invoice-manage-btn-ghost:hover {
    background: var(--bg-tertiary);
}

@media (max-width: 768px) {
    .dashboard-invoice-manage-container {
        padding: 16px;
    }

    .dashboard-invoice-manage-header {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-invoice-manage-header h2 {
        font-size: 20px;
    }

    .dashboard-invoice-manage-search {
        max-width: 100%;
    }

    .dashboard-invoice-manage-mobile {
        display: block !important;
    }

    .dashboard-invoice-manage-modal-content {
        max-width: 100%;
    }

    .dashboard-invoice-manage-modal-footer {
        flex-direction: column;
    }

    .dashboard-invoice-manage-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Dashboard Order Manage */
.dashboard-order-manage-container {
    padding: 24px;
}

.dashboard-order-manage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.dashboard-order-manage-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.dashboard-order-manage-header p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.dashboard-order-manage-search {
    position: relative;
    max-width: 400px;
    flex: 1;
}

.dashboard-order-manage-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.dashboard-order-manage-search-input {
    width: 100%;
    padding: 10px 40px 10px 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-secondary);
    transition: var(--transition);
}

.dashboard-order-manage-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.dashboard-order-manage-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--transition);
}

.dashboard-order-manage-search-clear:hover {
    color: var(--text-primary);
}

.dashboard-order-manage-search-clear i {
    width: 16px;
    height: 16px;
}

.dashboard-order-manage-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.dashboard-order-manage-filter-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: var(--transition);
}

.dashboard-order-manage-filter-btn:hover {
    background: var(--bg-tertiary);
}

.dashboard-order-manage-filter-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.dashboard-order-manage-table-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.dashboard-order-manage-table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-order-manage-table thead {
    background: var(--bg-tertiary);
}

.dashboard-order-manage-table th {
    padding: 14px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dashboard-order-manage-table td {
    padding: 16px;
    border-top: 1px solid var(--border-color);
    vertical-align: top;
}

.dashboard-order-manage-table tbody tr {
    transition: background-color 0.2s;
}

.dashboard-order-manage-table tbody tr:hover {
    background: var(--bg-primary);
}

.dashboard-order-manage-cell-order,
.dashboard-order-manage-cell-customer,
.dashboard-order-manage-cell-product {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-order-manage-order-code {
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 700;
    font-family: "Courier New", monospace;
    word-break: break-all;
    line-height: 1.4;
    background-color: #f1f3f5;
    padding: 4px 8px;
    border-radius: 6px;
}

.dashboard-order-manage-invoice-link {
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.dashboard-order-manage-cell-order small,
.dashboard-order-manage-cell-customer small,
.dashboard-order-manage-cell-product small {
    font-size: 12px;
    color: var(--text-secondary);
}

.dashboard-order-manage-renewal-price {
    color: #10b981;
    font-weight: 600;
}

.dashboard-order-manage-cell-customer strong {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
}

.dashboard-order-manage-username {
    font-weight: 500 !important;
}

.dashboard-order-manage-cell-product span {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.5;
}

.dashboard-order-manage-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-order-manage-badge-active {
    background: #dcfce7;
    color: #166534;
}

.dashboard-order-manage-badge-inactive {
    background: #fee2e2;
    color: #991b1b;
}

.dashboard-order-manage-badge-expired {
    background: #f3f4f6;
    color: #6b7280;
}

.dashboard-order-manage-action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-order-manage-action-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.dashboard-order-manage-action-btn i {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.dashboard-order-manage-action-btn:hover i {
    color: white;
}

.dashboard-order-manage-empty {
    padding: 48px 16px !important;
    text-align: center;
}

.dashboard-order-manage-empty i {
    width: 48px;
    height: 48px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.dashboard-order-manage-empty p {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0;
}

.dashboard-order-manage-empty-state {
    padding: 48px 16px;
    text-align: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.dashboard-order-manage-empty-state i {
    width: 48px;
    height: 48px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.dashboard-order-manage-empty-state p {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0;
}

.dashboard-order-manage-pagination {
    padding: 16px;
    border-top: 1px solid var(--border-color);
}

.dashboard-order-manage-mobile {
    display: none;
}

.dashboard-order-manage-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 12px;
    overflow: hidden;
}

.dashboard-order-manage-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    cursor: pointer;
}

.dashboard-order-manage-card-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.dashboard-order-manage-order-code-short {
    color: var(--primary-color);
    font-size: 13px;
    font-family: "Courier New", monospace;
    font-weight: 700;
}

.dashboard-order-manage-toggle-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.dashboard-order-manage-toggle-icon i {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}

.dashboard-order-manage-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.dashboard-order-manage-detail-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    align-items: start;
}

.dashboard-order-manage-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.dashboard-order-manage-label::after {
    content: ":";
    margin-left: 2px;
}

.dashboard-order-manage-detail-row > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-order-manage-detail-row strong {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
}

.dashboard-order-manage-detail-row small {
    font-size: 12px;
    color: var(--text-secondary);
}

.dashboard-order-manage-order-code-full {
    font-size: 12px;
    font-family: "Courier New", monospace;
    color: var(--primary-color);
    word-break: break-all;
    line-height: 1.5;
    background-color: #f1f3f5;
    padding: 4px 8px;
    border-radius: 6px;
}

.dashboard-order-manage-card-footer {
    padding: 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
}

.dashboard-order-manage-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dashboard-order-manage-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
}

.dashboard-order-manage-modal-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    background: var(--bg-secondary);
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.dashboard-order-manage-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-order-manage-modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.dashboard-order-manage-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-order-manage-modal-close:hover {
    background: var(--border-color);
}

.dashboard-order-manage-modal-close i {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.dashboard-order-manage-modal-body {
    padding: 24px;
    overflow-y: auto;
}

.dashboard-order-manage-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    gap: 16px;
}

.dashboard-order-manage-summary-row:last-child {
    border-bottom: none;
}

.dashboard-order-manage-summary-row > span:first-child {
    font-size: 14px;
    color: var(--text-secondary);
    min-width: 120px;
}

.dashboard-order-manage-summary-row strong {
    font-size: 14px;
    color: var(--text-primary);
    text-align: right;
}

.dashboard-order-manage-summary-row small {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.dashboard-order-manage-status-text {
    text-transform: uppercase;
}

.dashboard-order-manage-modal-footer {
    display: flex;
    gap: 8px;
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.dashboard-order-manage-form-inline {
    display: inline-block;
}

.dashboard-order-manage-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.dashboard-order-manage-btn i {
    width: 16px;
    height: 16px;
}

.dashboard-order-manage-btn-view {
    background: var(--primary-color);
    color: white;
}

.dashboard-order-manage-btn-view:hover {
    background: var(--primary-hover);
}

.dashboard-order-manage-btn-success {
    background: #10b981;
    color: white;
}

.dashboard-order-manage-btn-success:hover {
    background: #059669;
}

.dashboard-order-manage-btn-warning {
    background: #f59e0b;
    color: white;
}

.dashboard-order-manage-btn-warning:hover {
    background: #d97706;
}

.dashboard-order-manage-btn-danger {
    background: #ef4444;
    color: white;
}

.dashboard-order-manage-btn-danger:hover {
    background: #dc2626;
}

.dashboard-order-manage-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.dashboard-order-manage-btn-ghost:hover {
    background: var(--bg-tertiary);
}

.text-danger {
    color: #ef4444 !important;
}

.text-muted {
    color: var(--text-secondary) !important;
}

.dashboard-order-manage-info-section {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border-color);
}

.dashboard-order-manage-edit-form {
    margin-top: 16px;
}

.dashboard-order-manage-form-group {
    margin-bottom: 16px;
}

.dashboard-order-manage-form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.dashboard-order-manage-form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    background: var(--bg-secondary);
    transition: var(--transition);
}

.dashboard-order-manage-form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.dashboard-order-manage-form-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
}

.dashboard-order-manage-extend-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.dashboard-order-manage-btn-extend {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    background: var(--bg-tertiary);
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-order-manage-btn-extend:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

@media (max-width: 768px) {
    .dashboard-order-manage-extend-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dashboard-order-manage-container {
        padding: 16px;
    }

    .dashboard-order-manage-header {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-order-manage-header h2 {
        font-size: 20px;
    }

    .dashboard-order-manage-search {
        max-width: 100%;
    }

    .dashboard-order-manage-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
    }

    .dashboard-order-manage-mobile {
        display: block !important;
    }

    .dashboard-order-manage-modal-content {
        max-width: 100%;
    }

    .dashboard-order-manage-modal-footer {
        flex-direction: column;
    }

    .dashboard-order-manage-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Dashboard Review Pages */
.dashboard-reviews-page {
    padding: 24px;
    margin: 0 auto;
}

.dashboard-reviews-header {
    margin-bottom: 32px;
}

.dashboard-reviews-header h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.dashboard-reviews-header p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.dashboard-reviews-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.dashboard-reviews-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.dashboard-reviews-stat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.dashboard-reviews-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-reviews-stat-icon svg {
    width: 28px;
    height: 28px;
    color: white;
}

.dashboard-reviews-stat-icon.total {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.dashboard-reviews-stat-icon.pending {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.dashboard-reviews-stat-icon.rating {
    background: linear-gradient(135deg, #10b981, #059669);
}

.dashboard-reviews-stat-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-reviews-stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
}

.dashboard-reviews-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.dashboard-reviews-filter-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.dashboard-reviews-filter-select {
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
}

.dashboard-reviews-filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.dashboard-reviews-search-wrapper {
    flex: 1;
    position: relative;
    min-width: 250px;
}

.dashboard-reviews-search-wrapper svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.dashboard-reviews-search-wrapper input {
    width: 100%;
    padding: 12px 16px 12px 48px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    color: var(--text-primary);
}

.dashboard-reviews-search-wrapper input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.dashboard-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-reviews-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    transition: var(--transition);
}

.dashboard-reviews-item:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.dashboard-reviews-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.dashboard-reviews-reviewer-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-reviews-reviewer-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    border: 2px solid var(--border-color);
}

.dashboard-reviews-reviewer-info strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
}

.dashboard-reviews-date {
    font-size: 12px;
    color: var(--text-secondary);
}

.dashboard-reviews-rating {
    display: flex;
    gap: 4px;
}

.dashboard-reviews-star {
    width: 16px;
    height: 16px;
    color: #d1d5db;
}

.dashboard-reviews-star.filled {
    color: #fbbf24;
}

.dashboard-reviews-status {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.dashboard-reviews-status.approved {
    background: #dcfce7;
    color: #166534;
}

.dashboard-reviews-status.pending {
    background: #fef3c7;
    color: #92400e;
}

.dashboard-reviews-status.spam {
    background: #fee2e2;
    color: #991b1b;
}

.dashboard-reviews-item-body {
    margin-bottom: 16px;
}

.dashboard-reviews-product {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.dashboard-reviews-product svg {
    width: 16px;
    height: 16px;
    color: var(--primary-color);
}

.dashboard-reviews-product > span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.dashboard-reviews-product-type {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.dashboard-reviews-product-type.course {
    background: #dbeafe;
    color: #1e40af;
}

.dashboard-reviews-product-type.digital {
    background: #fce7f3;
    color: #9f1239;
}

.dashboard-reviews-text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
}

.dashboard-reviews-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dashboard-reviews-btn-action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg-tertiary);
}

.dashboard-reviews-btn-action svg {
    width: 14px;
    height: 14px;
}

.dashboard-reviews-btn-action.pending {
    background: #d25353;
    color: #fff;
}

.dashboard-reviews-btn-action.pending:hover {
    background: #fff;
    color: #d25353;
}

.dashboard-reviews-btn-action.approve {
    color: #10b981;
    border-color: #10b981;
}

.dashboard-reviews-btn-action.approve:hover {
    background: #10b981;
    color: white;
}

.dashboard-reviews-btn-action.spam {
    color: #f59e0b;
    border-color: #f59e0b;
}

.dashboard-reviews-btn-action.spam:hover {
    background: #f59e0b;
    color: white;
}

.dashboard-reviews-btn-action.delete {
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.dashboard-reviews-btn-action.delete:hover {
    background: var(--danger-color);
    color: white;
}

.dashboard-reviews-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-reviews-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
}

.dashboard-reviews-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-reviews-card-body {
    margin-bottom: 16px;
}

.dashboard-reviews-card-body .dashboard-reviews-rating {
    margin-bottom: 12px;
}

.dashboard-reviews-card-footer {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.dashboard-reviews-card-footer .dashboard-reviews-btn-action {
    flex: 1;
    justify-content: center;
    padding: 10px;
}

.dashboard-reviews-card-footer .dashboard-reviews-btn-action span {
    display: none;
}

.dashboard-reviews-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dashboard-reviews-modal-overlay.active {
    display: flex;
}

.dashboard-reviews-modal {
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    max-width: 450px;
    width: 100%;
    box-shadow: var(--shadow-lg);
}

.dashboard-reviews-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-reviews-modal-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.dashboard-reviews-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.dashboard-reviews-modal-close:hover {
    background: var(--bg-tertiary);
}

.dashboard-reviews-modal-close svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.dashboard-reviews-modal-body {
    padding: 24px;
}

.dashboard-reviews-delete-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: var(--border-radius-sm);
    margin: 0;
    font-size: 14px;
    color: #92400e;
    line-height: 1.6;
}

.dashboard-reviews-delete-message svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.dashboard-reviews-modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
}

.dashboard-reviews-btn-cancel {
    flex: 1;
    padding: 12px 24px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.dashboard-reviews-btn-cancel:hover {
    background: var(--bg-secondary);
}

.dashboard-reviews-btn-delete {
    flex: 1;
    padding: 12px 24px;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dashboard-reviews-btn-delete:hover {
    background: #dc2626;
}

.dashboard-reviews-btn-delete svg {
    width: 16px;
    height: 16px;
}

.dashboard-reviews-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.dashboard-reviews-pagination-btn {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}

.dashboard-reviews-pagination-btn:hover:not(.disabled) {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.dashboard-reviews-pagination-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.dashboard-reviews-pagination-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dashboard-reviews-pagination-btn svg {
    width: 18px;
    height: 18px;
}

.dashboard-reviews-desktop-only {
    display: flex !important;
}

.dashboard-reviews-mobile-only {
    display: none !important;
}

@media (max-width: 1200px) {
    .dashboard-reviews-stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-reviews-page {
        padding: 16px;
    }

    .dashboard-reviews-header h1 {
        font-size: 24px;
    }

    .dashboard-reviews-desktop-only {
        display: none !important;
    }

    .dashboard-reviews-mobile-only {
        display: flex !important;
    }

    .dashboard-reviews-filter-bar {
        flex-direction: column;
    }

    .dashboard-reviews-filter-select,
    .dashboard-reviews-search-wrapper {
        min-width: auto;
    }

    .dashboard-reviews-stat-card {
        padding: 16px;
    }

    .dashboard-reviews-stat-icon {
        width: 48px;
        height: 48px;
    }

    .dashboard-reviews-stat-icon svg {
        width: 24px;
        height: 24px;
    }

    .dashboard-reviews-stat-value {
        font-size: 20px;
    }

    .dashboard-reviews-modal {
        max-width: 100%;
    }

    .dashboard-reviews-modal-header,
    .dashboard-reviews-modal-body {
        padding: 20px;
    }

    .dashboard-reviews-modal-footer {
        flex-direction: column;
    }
}

/* Dashboard Media Video */
.dashboard-media-video-container {
    padding: 24px;
}

.dashboard-media-video-filter form {
    display: flex;
    gap: 12px;
}

.dashboard-media-video-filter input,
.dashboard-media-video-filter select {
    padding: 8px 12px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    font-size: 14px;
}

.dashboard-media-video-filter input {
    width: 220px;
}

.dashboard-media-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.dashboard-media-video-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dashboard-media-video-thumbnail {
    position: relative;
    aspect-ratio: 16/9;
    background: #1a1a2e;
}

.dashboard-media-video-thumbnail video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dashboard-media-video-info {
    padding: 16px;
}

.dashboard-media-video-info h3 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a2e;
}

.dashboard-media-video-info p {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

.dashboard-media-video-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 0 15px 15px;
}

.dashboard-media-video-actions form {
    margin: 0;
}

.dashboard-media-video-actions .btn-action {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f1f5f9;
    color: #334155;
}

.dashboard-media-video-actions .btn-action.delete {
    background: #fee2e2;
    color: #b91c1c;
}

.dashboard-media-video-actions .btn-action.delete:hover {
    background: #fecaca;
    color: #991b1b;
}

.dashboard-media-video-actions .btn-action svg {
    width: 18px;
    height: 18px;
}

.dashboard-media-video-empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 48px;
    color: #6b7280;
}

.dashboard-media-video-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 400px;
}

.dashboard-media-video-modal::backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
}

.dashboard-media-video-modal[open] {
    display: block;
}

.dashboard-media-video-modal h2 {
    margin: 0 0 20px;
    font-size: 18px;
    color: #1a1a2e;
}

.dashboard-media-video-modal label {
    display: block;
    margin-bottom: 16px;
    font-size: 14px;
    color: #374151;
}

.dashboard-media-video-modal input {
    width: 100%;
    padding: 10px 12px;
    margin-top: 6px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-sizing: border-box;
}

.dashboard-media-video-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.dashboard-media-video-modal .btn-cancel {
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    cursor: pointer;
}

.dashboard-media-video-modal .btn-submit {
    padding: 10px 20px;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    border: none;
    color: white;
    border-radius: 6px;
    cursor: pointer;
}

.dashboard-media-video-actions .btn-icon {
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
}

.dashboard-media-video-actions .btn-icon:hover {
    background: #f5f5f5;
}

/* Dashboard Reports */
.dashboard-reports-wrapper {
    padding: 24px;
}

.dashboard-reports-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-reports-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
}

.dashboard-reports-header p {
    color: #64748b;
    margin: 4px 0 0;
}

.dashboard-reports-filter-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dashboard-reports-select {
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
}

.dashboard-reports-custom-date {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-reports-date-input {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
}

.dashboard-reports-btn-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: #667eea;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.dashboard-reports-btn-filter:hover {
    background: #5a6fd6;
}

.dashboard-reports-btn-filter svg {
    width: 16px;
    height: 16px;
}

.dashboard-reports-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.dashboard-reports-stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.dashboard-reports-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-reports-stat-icon svg {
    width: 24px;
    height: 24px;
}

.dashboard-reports-stat-card.revenue .dashboard-reports-stat-icon {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.dashboard-reports-stat-card.leads .dashboard-reports-stat-icon {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.dashboard-reports-stat-card.sales .dashboard-reports-stat-icon {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.dashboard-reports-stat-card.conversion .dashboard-reports-stat-icon {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.dashboard-reports-stat-label {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 4px;
}

.dashboard-reports-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 8px;
}

.dashboard-reports-stat-change {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.dashboard-reports-stat-change svg {
    width: 14px;
    height: 14px;
}

.dashboard-reports-stat-change.positive {
    color: #10b981;
}

.dashboard-reports-stat-change.negative {
    color: #ef4444;
}

.dashboard-reports-content-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
}

@media (max-width: 1024px) {
    .dashboard-reports-content-grid {
        grid-template-columns: 1fr;
    }
}

.dashboard-reports-chart-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.dashboard-reports-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
}

.dashboard-reports-chart-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
}

.dashboard-reports-chart-period {
    font-size: 12px;
    color: #64748b;
}

.dashboard-reports-chart-body {
    padding: 20px;
}

#revenueChart {
    max-height: 280px;
}

.dashboard-reports-products-list {
    display: flex;
    flex-direction: column;
}

.dashboard-reports-product-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

.dashboard-reports-product-item:last-child {
    border-bottom: none;
}

.dashboard-reports-product-rank {
    width: 32px;
    height: 32px;
    background: #f1f5f9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.dashboard-reports-product-info {
    flex: 1;
}

.dashboard-reports-product-info h4 {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a2e;
    margin: 0 0 2px;
}

.dashboard-reports-product-info span {
    font-size: 12px;
    color: #64748b;
}

.dashboard-reports-product-revenue {
    font-size: 14px;
    font-weight: 600;
    color: #10b981;
}

.dashboard-reports-empty {
    text-align: center;
    color: #94a3b8;
    padding: 24px;
    margin: 0;
}

/* Dashboard Course Student */
.course-students-page {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

.page-header {
    margin-bottom: 32px;
}

.page-header h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.page-header p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.course-students-page .stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.course-students-page .stat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.course-students-page .stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-students-page .stat-icon svg {
    width: 28px;
    height: 28px;
    color: white;
}

.course-students-page .stat-icon.total {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.course-students-page .stat-icon.active {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.course-students-page .stat-icon.completed {
    background: linear-gradient(135deg, #10b981, #059669);
}

.course-students-page .stat-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.course-students-page .stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
}

.course-students-page .stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.course-students-page .filter-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.course-students-page .filter-select {
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    min-width: 300px;
}

.course-students-page .filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.course-students-page .search-wrapper {
    flex: 1;
    position: relative;
}

.course-students-page .search-wrapper svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.course-students-page .search-wrapper input {
    width: 100%;
    padding: 12px 16px 12px 48px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    color: var(--text-primary);
}

.course-students-page .search-wrapper input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.students-table {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.student-row {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
}

.student-row:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.student-main {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
}

.expand-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
}

.expand-btn:hover {
    background: var(--bg-tertiary);
}

.expand-btn svg {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    transition: var(--transition);
}

.expand-btn.rotated svg {
    transform: rotate(90deg);
}

.student-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 250px;
}

.student-info img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
}

.student-info strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
}

.student-info span {
    font-size: 12px;
    color: var(--text-secondary);
}

.course-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
}

.courses-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.avg-progress {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
}

.avg-progress.completed {
    color: #10b981;
}

.last-activity {
    font-size: 13px;
    color: var(--text-secondary);
    min-width: 120px;
}

.course-students-page .btn-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.course-students-page .btn-detail:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.course-students-page .btn-detail svg {
    width: 14px;
    height: 14px;
}

.course-students-page .btn-detail.full {
    width: 100%;
    justify-content: center;
}

.student-courses {
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
}

.student-courses.collapsed {
    max-height: 0;
    border-top: none;
}

.course-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px 16px 64px;
    border-bottom: 1px solid var(--border-color);
}

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

.course-item svg {
    width: 18px;
    height: 18px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.course-name {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

.progress-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--primary-color),
        var(--secondary-color)
    );
    border-radius: 10px;
}

.progress-text {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 45px;
    text-align: right;
}

.progress-text.completed {
    color: #10b981;
}

.students-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.student-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
}

.course-students-page .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.course-students-page .card-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-item .label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
}

.info-item .value {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
}

.info-item .value.completed {
    color: #10b981;
}

.card-courses {
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    margin-bottom: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.card-courses.collapsed {
    max-height: 0;
    padding-top: 0;
    border-top: none;
    margin-bottom: 0;
}

.card-courses .course-item {
    padding: 12px 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.card-courses .progress-wrapper {
    min-width: auto;
}

.card-footer {
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    max-width: 700px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.modal-close:hover {
    background: var(--bg-tertiary);
}

.modal-close svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.detail-user {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}

.detail-user img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
}

.detail-user h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.detail-user p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 8px 0;
}

.enrolled-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.enrolled-badge svg {
    width: 14px;
    height: 14px;
}

.detail-section {
    margin-bottom: 24px;
}

.detail-section h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-section h5 svg {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
}

.enrolled-courses {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.enrolled-item {
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
}

.enrolled-item strong {
    font-size: 15px;
    color: var(--text-primary);
    display: block;
    margin-bottom: 12px;
}

.enrolled-item .progress-wrapper {
    margin-bottom: 8px;
}

.lessons-count {
    font-size: 13px;
    color: var(--text-secondary);
}

.modal-footer {
    display: flex;
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
}

.btn-close {
    flex: 1;
    padding: 12px 24px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.btn-close:hover {
    background: var(--bg-secondary);
}

@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .course-students-page {
        padding: 16px;
    }

    .page-header h1 {
        font-size: 24px;
    }

    .filter-bar {
        flex-direction: column;
    }

    .filter-select {
        min-width: auto;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-icon {
        width: 48px;
        height: 48px;
    }

    .stat-icon svg {
        width: 24px;
        height: 24px;
    }

    .stat-value {
        font-size: 20px;
    }

    .modal {
        max-width: 100%;
    }

    .modal-header,
    .modal-body {
        padding: 20px;
    }

    .detail-user {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Dashboard Affiliate */
.dashboard-affiliate-page {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

.dashboard-affiliate-desktop-only {
    display: block !important;
}

.dashboard-affiliate-mobile-only {
    display: none !important;
}

.dashboard-affiliate-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 32px;
    margin-bottom: 24px;
}

.dashboard-affiliate-header-content {
    flex-shrink: 0;
}

.dashboard-affiliate-header-content h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.dashboard-affiliate-header-content p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.dashboard-affiliate-search-filter {
    display: flex;
    gap: 12px;
    align-items: center;
    flex: 1;
    max-width: 900px;
}

.dashboard-affiliate-search-form {
    flex: 1;
    display: flex;
    gap: 12px;
}

.dashboard-affiliate-search-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.dashboard-affiliate-search-wrapper svg {
    position: absolute;
    left: 16px;
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.dashboard-affiliate-search-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    transition: var(--transition);
}

.dashboard-affiliate-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--bg-primary);
}

.dashboard-affiliate-btn-search {
    padding: 14px 24px;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    white-space: nowrap;
}

.dashboard-affiliate-btn-search:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dashboard-affiliate-btn-search svg {
    width: 18px;
    height: 18px;
}

.dashboard-affiliate-filter-select {
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    min-width: 140px;
}

.dashboard-affiliate-filter-select:hover {
    border-color: var(--primary-color);
}

.dashboard-affiliate-filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.dashboard-affiliate-table-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 24px;
}

.dashboard-affiliate-table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-affiliate-table thead {
    background: var(--bg-tertiary);
}

.dashboard-affiliate-table th {
    padding: 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.dashboard-affiliate-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.dashboard-affiliate-table tbody tr {
    transition: var(--transition);
}

.dashboard-affiliate-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.dashboard-affiliate-code {
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 13px;
    color: #475569;
}

.dashboard-affiliate-empty {
    text-align: center;
    padding: 48px;
    color: #94a3b8;
}

.dashboard-affiliate-empty i {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
}

.dashboard-affiliate-empty p {
    margin: 0;
}

.dashboard-affiliate-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
}

.dashboard-affiliate-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--border-color);
}

.dashboard-affiliate-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dashboard-affiliate-user-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.dashboard-affiliate-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-affiliate-username {
    font-size: 12px;
    color: var(--primary-color);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-affiliate-email {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-affiliate-date-text {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.dashboard-affiliate-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-affiliate-status-badge svg {
    width: 14px;
    height: 14px;
}

.dashboard-affiliate-status-badge.active {
    background: #dcfce7;
    color: #166534;
}

.dashboard-affiliate-status-badge.inactive {
    background: #fee2e2;
    color: #991b1b;
}

.dashboard-affiliate-cards-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-affiliate-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    transition: var(--transition);
}

.dashboard-affiliate-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--primary-color);
}

.dashboard-affiliate-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-affiliate-card .dashboard-affiliate-user-info {
    min-width: 0;
    flex: 1;
}

.dashboard-affiliate-card-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dashboard-affiliate-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.dashboard-affiliate-card-meta svg {
    width: 14px;
    height: 14px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.dashboard-affiliate-card-meta strong {
    color: var(--text-primary);
}

@media (max-width: 1200px) {
    .dashboard-affiliate-header-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 24px;
    }

    .dashboard-affiliate-search-filter {
        max-width: 100%;
        flex-wrap: wrap;
    }

    .dashboard-affiliate-search-form {
        width: 100%;
    }

    .dashboard-affiliate-filter-select {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .dashboard-affiliate-page {
        padding: 16px;
    }

    .dashboard-affiliate-desktop-only {
        display: none !important;
    }

    .dashboard-affiliate-mobile-only {
        display: flex !important;
    }

    .dashboard-affiliate-header-bar {
        padding: 20px 16px;
        margin-bottom: 16px;
    }

    .dashboard-affiliate-header-content h1 {
        font-size: 24px;
        margin-bottom: 6px;
    }

    .dashboard-affiliate-header-content p {
        font-size: 13px;
    }

    .dashboard-affiliate-search-filter {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .dashboard-affiliate-search-form {
        flex-direction: column;
        width: 100%;
    }

    .dashboard-affiliate-btn-search {
        width: 100%;
        justify-content: center;
    }

    .dashboard-affiliate-filter-select {
        width: 100%;
        min-width: auto;
    }

    .dashboard-affiliate-user-info {
        min-width: 0;
    }

    .dashboard-affiliate-avatar {
        width: 40px;
        height: 40px;
    }

    .dashboard-affiliate-user-name {
        font-size: 13px;
    }

    .dashboard-affiliate-username,
    .dashboard-affiliate-email {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .dashboard-affiliate-page {
        padding: 12px;
    }

    .dashboard-affiliate-header-bar {
        padding: 16px 12px;
    }

    .dashboard-affiliate-header-content h1 {
        font-size: 20px;
    }

    .dashboard-affiliate-search-input {
        padding: 12px 16px 12px 44px;
        font-size: 13px;
    }

    .dashboard-affiliate-btn-search {
        padding: 10px 16px;
        font-size: 13px;
    }

    .dashboard-affiliate-filter-select {
        padding: 10px 14px;
        font-size: 12px;
    }

    .dashboard-affiliate-card {
        padding: 14px;
    }

    .dashboard-affiliate-status-badge {
        padding: 5px 10px;
        font-size: 10px;
    }
}

/* Dashboard Affiliate Comission */
.dashboard-aff-commission-page {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

.dashboard-aff-commission-desktop-only {
    display: block !important;
}

.dashboard-aff-commission-mobile-only {
    display: none !important;
}

.dashboard-aff-commission-header {
    margin-bottom: 32px;
}

.dashboard-aff-commission-header-content h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.dashboard-aff-commission-header-content p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.dashboard-aff-commission-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.dashboard-aff-commission-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.dashboard-aff-commission-stat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.dashboard-aff-commission-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-aff-commission-stat-icon svg {
    width: 28px;
    height: 28px;
    color: white;
}

.dashboard-aff-commission-stat-icon.total {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.dashboard-aff-commission-stat-icon.paid {
    background: linear-gradient(135deg, #10b981, #059669);
}

.dashboard-aff-commission-stat-icon.pending {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.dashboard-aff-commission-stat-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-aff-commission-stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
}

.dashboard-aff-commission-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.dashboard-aff-commission-filter-bar {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    padding: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.dashboard-aff-commission-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 180px;
}

.dashboard-aff-commission-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dashboard-aff-commission-filter-label svg {
    width: 14px;
    height: 14px;
}

.dashboard-aff-commission-filter-select,
.dashboard-aff-commission-date-input {
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-aff-commission-filter-select:hover,
.dashboard-aff-commission-date-input:hover {
    border-color: var(--primary-color);
}

.dashboard-aff-commission-filter-select:focus,
.dashboard-aff-commission-date-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.dashboard-aff-commission-btn-filter {
    padding: 12px 24px;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    white-space: nowrap;
}

.dashboard-aff-commission-btn-filter:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dashboard-aff-commission-btn-filter svg {
    width: 16px;
    height: 16px;
}

.dashboard-aff-commission-table-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 24px;
}

.dashboard-aff-commission-table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-aff-commission-table thead {
    background: var(--bg-tertiary);
}

.dashboard-aff-commission-table th {
    padding: 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.dashboard-aff-commission-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.dashboard-aff-commission-table tbody tr {
    transition: var(--transition);
}

.dashboard-aff-commission-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.dashboard-aff-commission-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
}

.dashboard-aff-commission-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--border-color);
}

.dashboard-aff-commission-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dashboard-aff-commission-user-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.dashboard-aff-commission-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-aff-commission-username {
    font-size: 12px;
    color: var(--primary-color);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-aff-commission-amount {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.dashboard-aff-commission-amount.unpaid {
    color: #f59e0b;
}

.dashboard-aff-commission-amount.paid {
    color: #10b981;
}

.dashboard-aff-commission-amount.pending {
    color: #f59e0b;
}

.dashboard-aff-commission-btn-detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
}

.dashboard-aff-commission-btn-detail:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dashboard-aff-commission-btn-detail svg {
    width: 14px;
    height: 14px;
}

.dashboard-aff-commission-btn-detail.full {
    width: 100%;
}

.dashboard-aff-commission-cards-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-aff-commission-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    transition: var(--transition);
}

.dashboard-aff-commission-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--primary-color);
}

.dashboard-aff-commission-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-aff-commission-card .dashboard-aff-commission-user-info {
    min-width: 0;
    flex: 1;
}

.dashboard-aff-commission-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.dashboard-aff-commission-card-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-aff-commission-card-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

.dashboard-aff-commission-card-footer {
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 1200px) {
    .dashboard-aff-commission-stats-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dashboard-aff-commission-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-aff-commission-filter-group {
        min-width: auto;
    }

    .dashboard-aff-commission-btn-filter {
        width: 100%;
        justify-content: center;
    }

    .dashboard-aff-commission-table-container {
        overflow-x: auto;
    }

    .dashboard-aff-commission-table {
        min-width: 900px;
    }
}

@media (max-width: 768px) {
    .dashboard-aff-commission-page {
        padding: 16px;
    }

    .dashboard-aff-commission-desktop-only {
        display: none !important;
    }

    .dashboard-aff-commission-mobile-only {
        display: flex !important;
    }

    .dashboard-aff-commission-header {
        margin-bottom: 24px;
    }

    .dashboard-aff-commission-header-content h1 {
        font-size: 24px;
        margin-bottom: 6px;
    }

    .dashboard-aff-commission-header-content p {
        font-size: 13px;
    }

    .dashboard-aff-commission-stats-grid {
        margin-bottom: 24px;
    }

    .dashboard-aff-commission-stat-card {
        padding: 16px;
    }

    .dashboard-aff-commission-stat-icon {
        width: 48px;
        height: 48px;
    }

    .dashboard-aff-commission-stat-icon svg {
        width: 24px;
        height: 24px;
    }

    .dashboard-aff-commission-stat-value {
        font-size: 20px;
    }

    .dashboard-aff-commission-filter-bar {
        padding: 16px;
        margin-bottom: 16px;
    }

    .dashboard-aff-commission-avatar {
        width: 40px;
        height: 40px;
    }

    .dashboard-aff-commission-user-name {
        font-size: 13px;
    }

    .dashboard-aff-commission-username {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .dashboard-aff-commission-page {
        padding: 12px;
    }

    .dashboard-aff-commission-header-content h1 {
        font-size: 20px;
    }

    .dashboard-aff-commission-stat-value {
        font-size: 18px;
    }

    .dashboard-aff-commission-filter-bar {
        padding: 12px;
    }

    .dashboard-aff-commission-card {
        padding: 14px;
    }

    .dashboard-aff-commission-amount {
        font-size: 13px;
    }
}

/* Dashboard Affiliate Comission Detail */
.dashboard-aff-comm-details-page {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

.dashboard-aff-comm-details-desktop-only {
    display: block !important;
}

.dashboard-aff-comm-details-mobile-only {
    display: none !important;
}

.dashboard-aff-comm-details-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
    margin-bottom: 24px;
}

.dashboard-aff-comm-details-btn-back:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.dashboard-aff-comm-details-btn-back svg {
    width: 18px;
    height: 18px;
}

.dashboard-aff-comm-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 32px;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    border-radius: var(--border-radius);
    margin-bottom: 32px;
    color: white;
}

.dashboard-aff-comm-details-user-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.dashboard-aff-comm-details-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.dashboard-aff-comm-details-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dashboard-aff-comm-details-user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-aff-comm-details-user-name {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
}

.dashboard-aff-comm-details-username {
    font-size: 14px;
    opacity: 0.9;
    font-weight: 600;
}

.dashboard-aff-comm-details-email {
    font-size: 13px;
    opacity: 0.8;
}

.dashboard-aff-comm-details-link-stats {
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dashboard-aff-comm-details-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-aff-comm-details-stat-item svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.dashboard-aff-comm-details-stat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-aff-comm-details-stat-label {
    font-size: 12px;
    opacity: 0.9;
    font-weight: 600;
    text-transform: uppercase;
}

.dashboard-aff-comm-details-stat-value {
    font-size: 24px;
    font-weight: 700;
}

.dashboard-aff-comm-details-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.dashboard-aff-comm-details-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.dashboard-aff-comm-details-stat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.dashboard-aff-comm-details-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-aff-comm-details-stat-icon svg {
    width: 26px;
    height: 26px;
    color: white;
}

.dashboard-aff-comm-details-stat-icon.total {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.dashboard-aff-comm-details-stat-icon.paid {
    background: linear-gradient(135deg, #10b981, #059669);
}

.dashboard-aff-comm-details-stat-icon.pending {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.dashboard-aff-comm-details-stat-icon.unpaid {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.dashboard-aff-comm-details-stat-icon.cancelled {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.dashboard-aff-comm-details-stat-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-aff-comm-details-stat-content
    .dashboard-aff-comm-details-stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
}

.dashboard-aff-comm-details-stat-content
    .dashboard-aff-comm-details-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.dashboard-aff-comm-details-filter-bar {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 24px;
}

.dashboard-aff-comm-details-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.dashboard-aff-comm-details-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dashboard-aff-comm-details-filter-label svg {
    width: 14px;
    height: 14px;
}

.dashboard-aff-comm-details-filter-select {
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-aff-comm-details-filter-select:hover {
    border-color: var(--primary-color);
}

.dashboard-aff-comm-details-filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.dashboard-aff-comm-details-btn-filter {
    padding: 12px 24px;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    white-space: nowrap;
}

.dashboard-aff-comm-details-btn-filter:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dashboard-aff-comm-details-btn-filter svg {
    width: 16px;
    height: 16px;
}

.dashboard-aff-comm-details-table-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 24px;
}

.dashboard-aff-comm-details-table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-aff-comm-details-table thead {
    background: var(--bg-tertiary);
}

.dashboard-aff-comm-details-table th {
    padding: 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.dashboard-aff-comm-details-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.dashboard-aff-comm-details-table tbody tr {
    transition: var(--transition);
}

.dashboard-aff-comm-details-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.dashboard-aff-comm-details-date {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.dashboard-aff-comm-details-product-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-aff-comm-details-product-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.dashboard-aff-comm-details-product-meta {
    font-size: 12px;
    color: var(--text-secondary);
    font-family: "Courier New", monospace;
}

.dashboard-aff-comm-details-commission-amount {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
}

.dashboard-aff-comm-details-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-aff-comm-details-status-info {
    display: block;
    font-size: 11px;
    color: #6b7280;
    margin-top: 4px;
}

.dashboard-aff-comm-details-status-reason {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
    cursor: help;
}

.dashboard-aff-comm-details-status-reason i {
    width: 12px;
    height: 12px;
}

.dashboard-aff-comm-details-status-reason svg {
    width: 15px;
    height: 15px;
}

.dashboard-aff-comm-details-status-badge svg {
    width: 14px;
    height: 14px;
}

.dashboard-aff-comm-details-status-badge.paid {
    background: #dcfce7;
    color: #166534;
}

.dashboard-aff-comm-details-status-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

.dashboard-aff-comm-details-status-badge.unpaid {
    background: #fef3c7;
    color: #92400e;
}

.dashboard-aff-comm-details-status-badge.cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.dashboard-aff-comm-details-btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.dashboard-aff-comm-details-btn-cancel:hover:not(.disabled) {
    background: var(--danger-color);
    color: white;
    border-color: var(--danger-color);
}

.dashboard-aff-comm-details-btn-cancel.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dashboard-aff-comm-details-btn-cancel svg {
    width: 14px;
    height: 14px;
}

.dashboard-aff-comm-details-btn-cancel.full {
    width: 100%;
}

.dashboard-aff-comm-details-cards-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-aff-comm-details-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    transition: var(--transition);
}

.dashboard-aff-comm-details-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--primary-color);
}

.dashboard-aff-comm-details-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-aff-comm-details-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.dashboard-aff-comm-details-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
    border-top: 1px solid var(--border-color);
}

.dashboard-aff-comm-details-card-action {
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.dashboard-aff-comm-details-card-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
}

.dashboard-aff-comm-details-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dashboard-aff-comm-details-modal-overlay.active {
    display: flex;
}

.dashboard-aff-comm-details-modal {
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    max-width: 500px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard-aff-comm-details-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-aff-comm-details-modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.dashboard-aff-comm-details-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-aff-comm-details-modal-close:hover {
    background: var(--bg-tertiary);
}

.dashboard-aff-comm-details-modal-close svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.dashboard-aff-comm-details-modal-body {
    padding: 24px;
}

.dashboard-aff-comm-details-modal-info {
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: var(--border-radius-sm);
    margin-bottom: 24px;
    font-size: 14px;
    color: #92400e;
    line-height: 1.6;
}

.dashboard-aff-comm-details-modal-info svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.dashboard-aff-comm-details-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dashboard-aff-comm-details-form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.dashboard-aff-comm-details-form-label .required {
    color: var(--danger-color);
}

.dashboard-aff-comm-details-form-textarea {
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    font-family: inherit;
    resize: vertical;
    transition: var(--transition);
}

.dashboard-aff-comm-details-form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.dashboard-aff-comm-details-form-hint {
    font-size: 12px;
    color: var(--text-secondary);
}

.dashboard-aff-comm-details-modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
}

.dashboard-aff-comm-details-btn-modal-cancel {
    flex: 1;
    padding: 12px 24px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-aff-comm-details-btn-modal-cancel:hover {
    background: var(--bg-secondary);
}

.dashboard-aff-comm-details-btn-modal-confirm {
    flex: 1;
    padding: 12px 24px;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition);
}

.dashboard-aff-comm-details-btn-modal-confirm:hover {
    background: #dc2626;
}

.dashboard-aff-comm-details-btn-modal-confirm svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 1200px) {
    .dashboard-aff-comm-details-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-aff-comm-details-filter-bar {
        flex-wrap: wrap;
    }

    .dashboard-aff-comm-details-btn-filter {
        width: 100%;
        justify-content: center;
    }

    .dashboard-aff-comm-details-table-container {
        overflow-x: auto;
    }

    .dashboard-aff-comm-details-table {
        min-width: 900px;
    }
}

@media (max-width: 768px) {
    .dashboard-aff-comm-details-page {
        padding: 16px;
    }

    .dashboard-aff-comm-details-desktop-only {
        display: none !important;
    }

    .dashboard-aff-comm-details-mobile-only {
        display: flex !important;
    }

    .dashboard-aff-comm-details-btn-back {
        margin-bottom: 16px;
        font-size: 13px;
        padding: 8px 12px;
    }

    .dashboard-aff-comm-details-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 20px;
        margin-bottom: 24px;
    }

    .dashboard-aff-comm-details-user-section {
        width: 100%;
    }

    .dashboard-aff-comm-details-avatar {
        width: 60px;
        height: 60px;
    }

    .dashboard-aff-comm-details-user-name {
        font-size: 20px;
    }

    .dashboard-aff-comm-details-username {
        font-size: 13px;
    }

    .dashboard-aff-comm-details-email {
        font-size: 12px;
    }

    .dashboard-aff-comm-details-link-stats {
        width: 100%;
        padding: 16px;
    }

    .dashboard-aff-comm-details-stat-item svg {
        width: 24px;
        height: 24px;
    }

    .dashboard-aff-comm-details-stat-value {
        font-size: 20px;
    }

    .dashboard-aff-comm-details-stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 24px;
    }

    .dashboard-aff-comm-details-stat-card {
        padding: 16px;
    }

    .dashboard-aff-comm-details-stat-icon {
        width: 44px;
        height: 44px;
    }

    .dashboard-aff-comm-details-stat-icon svg {
        width: 22px;
        height: 22px;
    }

    .dashboard-aff-comm-details-stat-content
        .dashboard-aff-comm-details-stat-value {
        font-size: 16px;
    }

    .dashboard-aff-comm-details-filter-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        margin-bottom: 16px;
    }

    .dashboard-aff-comm-details-filter-group {
        width: 100%;
    }

    .dashboard-aff-comm-details-modal {
        max-width: 100%;
    }

    .dashboard-aff-comm-details-modal-header {
        padding: 16px 20px;
    }

    .dashboard-aff-comm-details-modal-body {
        padding: 20px;
    }

    .dashboard-aff-comm-details-modal-footer {
        flex-direction: column;
        padding: 16px 20px;
    }
}

@media (max-width: 480px) {
    .dashboard-aff-comm-details-page {
        padding: 12px;
    }

    .dashboard-aff-comm-details-header {
        padding: 20px 16px;
    }

    .dashboard-aff-comm-details-user-name {
        font-size: 18px;
    }

    .dashboard-aff-comm-details-filter-bar {
        padding: 12px;
    }

    .dashboard-aff-comm-details-card {
        padding: 14px;
    }
}

/* Dashboard Affiliate Payouts */
.dashboard-aff-payout-page {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

.dashboard-aff-payout-header {
    margin-bottom: 32px;
}

.dashboard-aff-payout-header-content h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.dashboard-aff-payout-header-content p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.dashboard-aff-payout-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.dashboard-aff-payout-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.dashboard-aff-payout-stat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.dashboard-aff-payout-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-aff-payout-stat-icon svg {
    width: 28px;
    height: 28px;
    color: white;
}

.dashboard-aff-payout-stat-icon.pending {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.dashboard-aff-payout-stat-icon.total {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.dashboard-aff-payout-stat-icon.completed {
    background: linear-gradient(135deg, #10b981, #059669);
}

.dashboard-aff-payout-stat-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-aff-payout-stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
}

.dashboard-aff-payout-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.dashboard-aff-payout-filter-bar {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 24px;
}

.dashboard-aff-payout-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.dashboard-aff-payout-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dashboard-aff-payout-filter-label svg {
    width: 14px;
    height: 14px;
}

.dashboard-aff-payout-filter-select {
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-aff-payout-filter-select:hover {
    border-color: var(--primary-color);
}

.dashboard-aff-payout-filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.dashboard-aff-payout-btn-filter {
    padding: 12px 24px;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    white-space: nowrap;
}

.dashboard-aff-payout-btn-filter:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dashboard-aff-payout-btn-filter svg {
    width: 16px;
    height: 16px;
}

.dashboard-aff-payout-table-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 24px;
}

.dashboard-aff-payout-table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-aff-payout-table thead {
    background: var(--bg-tertiary);
}

.dashboard-aff-payout-table th {
    padding: 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.dashboard-aff-payout-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.dashboard-aff-payout-table tbody tr {
    transition: var(--transition);
}

.dashboard-aff-payout-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.dashboard-aff-payout-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
}

.dashboard-aff-payout-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--border-color);
}

.dashboard-aff-payout-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dashboard-aff-payout-user-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.dashboard-aff-payout-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-aff-payout-username {
    font-size: 12px;
    color: var(--primary-color);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-aff-payout-commission-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
}

.dashboard-aff-payout-payment-method {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-aff-payout-payment-method svg {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.dashboard-aff-payout-payment-method.small svg {
    width: 16px;
    height: 16px;
}

.dashboard-aff-payout-payment-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-aff-payout-payment-details strong {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
}

.dashboard-aff-payout-payment-details span {
    font-size: 12px;
    color: var(--text-secondary);
}

.dashboard-aff-payout-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-aff-payout-status-badge svg {
    width: 14px;
    height: 14px;
}

.dashboard-aff-payout-status-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

.dashboard-aff-payout-btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.dashboard-aff-payout-btn-action:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dashboard-aff-payout-btn-action svg {
    width: 14px;
    height: 14px;
}

.dashboard-aff-payout-btn-action.full {
    width: 100%;
}

.dashboard-aff-payout-cards-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-aff-payout-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    transition: var(--transition);
}

.dashboard-aff-payout-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--primary-color);
}

.dashboard-aff-payout-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-aff-payout-card .dashboard-aff-payout-user-info {
    min-width: 0;
    flex: 1;
}

.dashboard-aff-payout-card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

.dashboard-aff-payout-card-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dashboard-aff-payout-card-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
}

.dashboard-aff-payout-card-footer {
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.aff-payout-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}

.aff-payout-modal-overlay.active {
    display: flex;
}

.aff-payout-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal Header */
.aff-payout-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.aff-payout-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.aff-payout-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: #f3f4f6;
    border-radius: 10px;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.2s;
}

.aff-payout-modal-close:hover {
    background: #e5e7eb;
    color: #111827;
}

.aff-payout-modal-content {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.aff-payout-modal-section {
    margin-bottom: 20px;
}

.aff-payout-modal-section:last-of-type {
    margin-bottom: 0;
}

.aff-payout-modal-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.aff-payout-modal-label .required {
    color: #ef4444;
}

.aff-payout-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #f9fafb;
    border-radius: 12px;
}

.aff-payout-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.aff-payout-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aff-payout-user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.aff-payout-user-details strong {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.aff-payout-user-details span {
    font-size: 13px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aff-payout-amount-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 18px 20px;
    border-radius: 12px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.aff-payout-amount-value {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
}

.aff-payout-amount-info {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.aff-payout-bank-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.aff-payout-bank-info i {
    width: 20px;
    height: 20px;
    color: #6b7280;
    flex-shrink: 0;
}

.aff-payout-bank-info span {
    font-size: 14px;
    color: #374151;
    font-weight: 500;
}

.aff-payout-upload-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aff-payout-upload-area input[type="file"] {
    display: none;
}

.aff-payout-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.aff-payout-upload-btn:hover {
    border-color: #667eea;
    color: #667eea;
    background: #f5f3ff;
}

.aff-payout-upload-btn i {
    width: 20px;
    height: 20px;
}

.aff-payout-upload-hint {
    font-size: 12px;
    color: #9ca3af;
}

.aff-payout-file-preview {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    margin-top: 10px;
}

.aff-payout-file-preview.show {
    display: flex;
}

.aff-payout-file-preview i {
    width: 20px;
    height: 20px;
    color: #10b981;
    flex-shrink: 0;
}

.aff-payout-file-preview span {
    flex: 1;
    font-size: 13px;
    color: #065f46;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.aff-payout-file-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #fee2e2;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #ef4444;
    flex-shrink: 0;
    transition: background 0.2s;
}

.aff-payout-file-remove:hover {
    background: #fecaca;
}

.aff-payout-file-remove i {
    width: 14px;
    height: 14px;
    color: #ef4444;
}

.aff-payout-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: #374151;
    resize: vertical;
    min-height: 80px;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
    box-sizing: border-box;
}

.aff-payout-textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.aff-payout-textarea::placeholder {
    color: #9ca3af;
}

.aff-payout-modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.aff-payout-btn-cancel,
.aff-payout-btn-submit {
    flex: 1;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.aff-payout-btn-cancel {
    background: #f3f4f6;
    color: #4b5563;
}

.aff-payout-btn-cancel:hover {
    background: #e5e7eb;
}

.aff-payout-btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.aff-payout-btn-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.aff-payout-btn-submit i {
    width: 18px;
    height: 18px;
}

.dashboard-aff-payout-filter-input {
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    color: #334155;
    background-color: #fff;
    min-width: 160px;
    transition: all 0.2s ease;
}

.dashboard-aff-payout-filter-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.dashboard-aff-payout-filter-input::placeholder {
    color: #94a3b8;
}

.dashboard-aff-payout-filter-input[type="date"] {
    cursor: pointer;
}

.dashboard-aff-payout-filter-input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.dashboard-aff-payout-filter-input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.custom-date-filter {
    animation: fadeIn 0.3s ease;
}

.aff-payout-detail-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}

.aff-payout-detail-modal-overlay.active {
    display: flex;
}

.aff-payout-detail-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.aff-payout-detail-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.aff-payout-detail-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.aff-payout-detail-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: #f3f4f6;
    border-radius: 10px;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.2s;
}

.aff-payout-detail-modal-close:hover {
    background: #e5e7eb;
    color: #111827;
}

.aff-payout-detail-modal-content {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.aff-payout-detail-section {
    margin-bottom: 20px;
}

.aff-payout-detail-section:last-child {
    margin-bottom: 0;
}

.aff-payout-detail-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.aff-payout-detail-code-date {
    display: flex;
    gap: 20px;
    padding: 14px;
    background: #f9fafb;
    border-radius: 12px;
}

.aff-payout-detail-code-date > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aff-payout-detail-code-date label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
}

.aff-payout-detail-code-date strong {
    font-size: 14px;
    color: #111827;
}

.aff-payout-detail-code-date span {
    font-size: 13px;
    color: #374151;
}

.aff-payout-detail-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #f9fafb;
    border-radius: 12px;
}

.aff-payout-detail-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.aff-payout-detail-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aff-payout-detail-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aff-payout-detail-user-info strong {
    font-size: 14px;
    color: #111827;
}

.aff-payout-detail-user-info span {
    font-size: 13px;
    color: #6b7280;
}

.aff-payout-detail-amount-box {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.aff-payout-detail-amount-value {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.aff-payout-detail-amount-info {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.aff-payout-detail-bank-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.aff-payout-detail-bank-info i {
    width: 18px;
    height: 18px;
    color: #6b7280;
}

.aff-payout-detail-bank-info span {
    font-size: 14px;
    color: #374151;
}

.aff-payout-detail-proof-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    color: #2563eb;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
}

.aff-payout-detail-proof-link:hover {
    background: #dbeafe;
}

.aff-payout-detail-proof-link i {
    width: 18px;
    height: 18px;
}

.aff-payout-detail-proof-link span {
    flex: 1;
}

.aff-payout-detail-no-proof {
    padding: 12px 14px;
    background: #f9fafb;
    border-radius: 10px;
    color: #9ca3af;
    font-size: 14px;
}

.aff-payout-detail-notes {
    padding: 12px 14px;
    background: #f9fafb;
    border-radius: 10px;
    font-size: 14px;
    color: #374151;
    min-height: 60px;
}

.aff-payout-detail-processed-by {
    padding: 12px 14px;
    background: #f9fafb;
    border-radius: 10px;
    font-size: 14px;
    color: #374151;
}

.aff-payout-detail-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
}

.aff-payout-detail-btn-close {
    width: 100%;
    padding: 12px 20px;
    background: #f3f4f6;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s;
}

.aff-payout-detail-btn-close:hover {
    background: #e5e7eb;
}

.dashboard-aff-payout-history-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-aff-payout-history-stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.dashboard-aff-payout-history-stat-label {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
}

.dashboard-aff-payout-history-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

.dashboard-aff-payout-history-btn-detail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.dashboard-aff-payout-history-btn-detail:hover {
    background: #dbeafe;
}

.dashboard-aff-payout-history-btn-detail i {
    width: 16px;
    height: 16px;
}

.dashboard-aff-payout-history-btn-detail.full {
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
}

.dashboard-aff-payout-history-amount-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-aff-payout-history-commission-count {
    font-size: 12px;
    color: #6b7280;
}

.dashboard-aff-payout-history-code {
    font-size: 12px;
    font-weight: 600;
    color: #667eea;
    background: #eff6ff;
    padding: 4px 8px;
    border-radius: 6px;
}

.dashboard-aff-payout-history-card-footer {
    padding: 14px;
    border-top: 1px solid #e5e7eb;
}

@media (max-width: 480px) {
    .aff-payout-detail-modal-overlay {
        padding: 12px;
    }

    .aff-payout-detail-modal {
        max-height: 95vh;
    }

    .aff-payout-detail-modal-content {
        padding: 18px;
    }

    .aff-payout-detail-amount-value {
        font-size: 20px;
    }

    .dashboard-aff-payout-history-stats {
        flex-direction: column;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .dashboard-aff-payout-filter-input {
        width: 100%;
        min-width: unset;
    }

    .dashboard-aff-payout-filter-bar {
        flex-direction: column;
        gap: 12px;
    }

    .dashboard-aff-payout-filter-group {
        width: 100%;
    }

    .dashboard-aff-payout-filter-select,
    .dashboard-aff-payout-filter-input {
        width: 100%;
    }

    .dashboard-aff-payout-btn-filter {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 1200px) {
    .dashboard-aff-payout-stats-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-aff-payout-filter-bar {
        flex-wrap: wrap;
    }

    .dashboard-aff-payout-btn-filter {
        width: 100%;
        justify-content: center;
    }

    .dashboard-aff-payout-table-container {
        overflow-x: auto;
    }

    .dashboard-aff-payout-table {
        min-width: 1000px;
    }
}

@media (max-width: 768px) {
    .dashboard-aff-payout-page {
        padding: 16px;
    }

    .dashboard-aff-payout-desktop-only {
        display: none !important;
    }

    .dashboard-aff-payout-mobile-only {
        display: flex !important;
    }

    .dashboard-aff-payout-header {
        margin-bottom: 24px;
    }

    .dashboard-aff-payout-header-content h1 {
        font-size: 24px;
        margin-bottom: 6px;
    }

    .dashboard-aff-payout-header-content p {
        font-size: 13px;
    }

    .dashboard-aff-payout-stats-grid {
        margin-bottom: 24px;
    }

    .dashboard-aff-payout-stat-card {
        padding: 16px;
    }

    .dashboard-aff-payout-stat-icon {
        width: 48px;
        height: 48px;
    }

    .dashboard-aff-payout-stat-icon svg {
        width: 24px;
        height: 24px;
    }

    .dashboard-aff-payout-stat-value {
        font-size: 20px;
    }

    .dashboard-aff-payout-filter-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        margin-bottom: 16px;
    }

    .dashboard-aff-payout-filter-group {
        width: 100%;
    }

    .dashboard-aff-payout-avatar {
        width: 40px;
        height: 40px;
    }

    .dashboard-aff-payout-user-name {
        font-size: 13px;
    }

    .dashboard-aff-payout-username {
        font-size: 11px;
    }

    .dashboard-aff-payout-modal {
        max-width: 100%;
        max-height: 95vh;
    }

    .dashboard-aff-payout-modal-header {
        padding: 20px;
    }

    .dashboard-aff-payout-modal-body {
        padding: 20px;
    }

    .dashboard-aff-payout-modal-footer {
        flex-direction: column;
        padding: 16px 20px;
    }

    .dashboard-aff-payout-modal-amount-value {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .dashboard-aff-payout-page {
        padding: 12px;
    }

    .dashboard-aff-payout-header-content h1 {
        font-size: 20px;
    }

    .dashboard-aff-payout-stat-value {
        font-size: 18px;
    }

    .dashboard-aff-payout-filter-bar {
        padding: 12px;
    }

    .dashboard-aff-payout-card {
        padding: 14px;
    }

    .dashboard-aff-payout-commission-amount {
        font-size: 14px;
    }
}

/* Dashboard Affiliate History */
.dashboard-aff-payout-history-page {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

.dashboard-aff-payout-history-desktop-only {
    display: block !important;
}

.dashboard-aff-payout-history-mobile-only {
    display: none !important;
}

.dashboard-aff-payout-history-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 32px;
    margin-bottom: 24px;
}

.dashboard-aff-payout-history-header-content {
    flex-shrink: 0;
}

.dashboard-aff-payout-history-header-content h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.dashboard-aff-payout-history-header-content p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.dashboard-aff-payout-history-search-form {
    flex: 1;
    display: flex;
    gap: 12px;
    max-width: 500px;
}

.dashboard-aff-payout-history-search-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.dashboard-aff-payout-history-search-wrapper svg {
    position: absolute;
    left: 16px;
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.dashboard-aff-payout-history-search-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    transition: var(--transition);
}

.dashboard-aff-payout-history-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--bg-primary);
}

.dashboard-aff-payout-history-btn-search {
    padding: 14px 24px;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    white-space: nowrap;
}

.dashboard-aff-payout-history-btn-search:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dashboard-aff-payout-history-btn-search svg {
    width: 18px;
    height: 18px;
}

.dashboard-aff-payout-history-table-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 24px;
}

.dashboard-aff-payout-history-table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-aff-payout-history-table thead {
    background: var(--bg-tertiary);
}

.dashboard-aff-payout-history-table th {
    padding: 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.dashboard-aff-payout-history-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.dashboard-aff-payout-history-table tbody tr {
    transition: var(--transition);
}

.dashboard-aff-payout-history-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.dashboard-aff-payout-history-date {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.dashboard-aff-payout-history-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
}

.dashboard-aff-payout-history-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--border-color);
}

.dashboard-aff-payout-history-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dashboard-aff-payout-history-user-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.dashboard-aff-payout-history-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-aff-payout-history-username {
    font-size: 12px;
    color: var(--primary-color);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-aff-payout-history-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
}

.dashboard-aff-payout-history-payment-method {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-aff-payout-history-payment-method svg {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.dashboard-aff-payout-history-payment-method.small svg {
    width: 16px;
    height: 16px;
}

.dashboard-aff-payout-history-payment-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-aff-payout-history-payment-details strong {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
}

.dashboard-aff-payout-history-payment-details span {
    font-size: 12px;
    color: var(--text-secondary);
}

.dashboard-aff-payout-history-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-aff-payout-history-status-badge svg {
    width: 14px;
    height: 14px;
}

.dashboard-aff-payout-history-status-badge.paid {
    background: #dcfce7;
    color: #166534;
}

.dashboard-aff-payout-history-cards-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-aff-payout-history-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    transition: var(--transition);
}

.dashboard-aff-payout-history-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--primary-color);
}

.dashboard-aff-payout-history-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-aff-payout-history-card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dashboard-aff-payout-history-card .dashboard-aff-payout-history-user-info {
    min-width: 0;
}

.dashboard-aff-payout-history-card-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dashboard-aff-payout-history-card-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dashboard-aff-payout-history-card-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
}

.dashboard-aff-payout-history-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.dashboard-aff-payout-history-pagination-btn {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
}

.dashboard-aff-payout-history-pagination-btn:hover:not(.disabled) {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.dashboard-aff-payout-history-pagination-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.dashboard-aff-payout-history-pagination-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dashboard-aff-payout-history-pagination-btn svg {
    width: 18px;
    height: 18px;
}

.dashboard-aff-payout-history-pagination-dots {
    color: var(--text-secondary);
    font-weight: 600;
}

@media (max-width: 1200px) {
    .dashboard-aff-payout-history-header-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 24px;
    }

    .dashboard-aff-payout-history-search-form {
        max-width: 100%;
    }

    .dashboard-aff-payout-history-table-container {
        overflow-x: auto;
    }

    .dashboard-aff-payout-history-table {
        min-width: 900px;
    }
}

@media (max-width: 768px) {
    .dashboard-aff-payout-history-page {
        padding: 16px;
    }

    .dashboard-aff-payout-history-desktop-only {
        display: none !important;
    }

    .dashboard-aff-payout-history-mobile-only {
        display: flex !important;
    }

    .dashboard-aff-payout-history-header-bar {
        padding: 20px 16px;
        margin-bottom: 16px;
    }

    .dashboard-aff-payout-history-header-content h1 {
        font-size: 24px;
        margin-bottom: 6px;
    }

    .dashboard-aff-payout-history-header-content p {
        font-size: 13px;
    }

    .dashboard-aff-payout-history-search-form {
        flex-direction: column;
    }

    .dashboard-aff-payout-history-btn-search {
        width: 100%;
        justify-content: center;
    }

    .dashboard-aff-payout-history-avatar {
        width: 40px;
        height: 40px;
    }

    .dashboard-aff-payout-history-user-name {
        font-size: 13px;
    }

    .dashboard-aff-payout-history-username {
        font-size: 11px;
    }

    .dashboard-aff-payout-history-pagination {
        gap: 6px;
    }

    .dashboard-aff-payout-history-pagination-btn {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .dashboard-aff-payout-history-pagination-dots {
        display: none;
    }
}

@media (max-width: 480px) {
    .dashboard-aff-payout-history-page {
        padding: 12px;
    }

    .dashboard-aff-payout-history-header-bar {
        padding: 16px 12px;
    }

    .dashboard-aff-payout-history-header-content h1 {
        font-size: 20px;
    }

    .dashboard-aff-payout-history-search-input {
        padding: 12px 16px 12px 44px;
        font-size: 13px;
    }

    .dashboard-aff-payout-history-btn-search {
        padding: 10px 16px;
        font-size: 13px;
    }

    .dashboard-aff-payout-history-card {
        padding: 14px;
    }

    .dashboard-aff-payout-history-amount {
        font-size: 14px;
    }
}

/* Settings Pixel Tracker */
.settings-pixel-tracker-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.settings-pixel-tracker-header h3 {
    margin: 0 0 4px 0;
    font-size: 18px;
    color: #1e293b;
}

.settings-pixel-tracker-header p {
    margin: 0;
    font-size: 14px;
    color: #64748b;
}

.settings-pixel-tracker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    white-space: nowrap;
}

.settings-pixel-tracker-btn svg {
    width: 16px;
    height: 16px;
}

.settings-pixel-tracker-btn-primary {
    background: #3b82f6;
    color: white;
}

.settings-pixel-tracker-btn-primary:hover {
    background: #2563eb;
}

.settings-pixel-tracker-btn-secondary {
    background: #f1f5f9;
    color: #475569;
}

.settings-pixel-tracker-btn-secondary:hover {
    background: #e2e8f0;
}

.settings-pixel-tracker-btn-danger {
    background: #fee2e2;
    color: #dc2626;
}

.settings-pixel-tracker-btn-danger:hover {
    background: #fecaca;
}

.settings-pixel-tracker-btn-sm {
    padding: 6px 10px;
    font-size: 13px;
}

.settings-pixel-tracker-btn-sm svg {
    width: 14px;
    height: 14px;
}

.settings-pixel-tracker-empty {
    text-align: center;
    padding: 40px 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px dashed #e2e8f0;
}

.settings-pixel-tracker-empty-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    border-radius: 50%;
}

.settings-pixel-tracker-empty-icon svg {
    width: 28px;
    height: 28px;
    color: #94a3b8;
}

.settings-pixel-tracker-empty h4 {
    margin: 0 0 8px 0;
    color: #334155;
    font-size: 16px;
}

.settings-pixel-tracker-empty p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

.settings-pixel-tracker-table-wrapper {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.settings-pixel-tracker-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.settings-pixel-tracker-table th,
.settings-pixel-tracker-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.settings-pixel-tracker-table th {
    background: #f8fafc;
    font-weight: 600;
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.settings-pixel-tracker-table td {
    font-size: 14px;
    color: #334155;
}

.settings-pixel-tracker-table tbody tr:hover {
    background: #f8fafc;
}

.settings-pixel-tracker-table tbody tr:last-child td {
    border-bottom: none;
}

.settings-pixel-tracker-platform {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.settings-pixel-tracker-platform svg,
.settings-pixel-tracker-platform i {
    width: 16px;
    height: 16px;
}

.settings-pixel-tracker-platform-facebook {
    background: #1877f220;
    color: #1877f2;
}

.settings-pixel-tracker-platform-tiktok {
    background: #00000015;
    color: #000;
}

.settings-pixel-tracker-code {
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #475569;
    font-family: monospace;
}

.settings-pixel-tracker-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    margin-right: 4px;
    margin-bottom: 4px;
    background: #f1f5f9;
    color: #475569;
}

.settings-pixel-tracker-badge-info {
    background: #dbeafe;
    color: #1d4ed8;
}

.settings-pixel-tracker-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    background: #f1f5f9;
    color: #64748b;
}

.settings-pixel-tracker-toggle.active {
    background: #dcfce7;
    color: #16a34a;
}

.settings-pixel-tracker-toggle-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.3;
}

.settings-pixel-tracker-toggle.active .settings-pixel-tracker-toggle-dot {
    opacity: 1;
    background: #16a34a;
}

.settings-pixel-tracker-actions {
    display: flex;
    gap: 8px;
}

.settings-pixel-tracker-info {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 12px;
    margin-top: 24px;
}

.settings-pixel-tracker-info-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0ea5e9;
    color: white;
    border-radius: 10px;
}

.settings-pixel-tracker-info-icon svg {
    width: 20px;
    height: 20px;
}

.settings-pixel-tracker-info-content h4 {
    margin: 0 0 8px 0;
    color: #0c4a6e;
    font-size: 15px;
}

.settings-pixel-tracker-info-content p {
    margin: 0 0 12px 0;
    color: #0369a1;
    font-size: 14px;
}

.settings-pixel-tracker-info-content ul {
    margin: 0;
    padding-left: 20px;
    color: #0369a1;
    font-size: 14px;
}

.settings-pixel-tracker-info-content li {
    margin-bottom: 4px;
}

.settings-pixel-tracker-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    overflow-y: auto;
}

.settings-pixel-tracker-modal-overlay.active {
    display: flex;
}

.settings-pixel-tracker-modal {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.settings-pixel-tracker-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.settings-pixel-tracker-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: #1e293b;
}

.settings-pixel-tracker-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-pixel-tracker-modal-close:hover {
    background: #f1f5f9;
    color: #334155;
}

.settings-pixel-tracker-modal-close svg {
    width: 20px;
    height: 20px;
}

.settings-pixel-tracker-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.settings-pixel-tracker-modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 16px 16px;
    flex-shrink: 0;
}

.settings-pixel-tracker-form-group {
    margin-bottom: 20px;
}

.settings-pixel-tracker-form-group:last-child {
    margin-bottom: 0;
}

.settings-pixel-tracker-form-group > label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #334155;
    font-size: 14px;
}

.settings-pixel-tracker-required {
    color: #ef4444;
}

.settings-pixel-tracker-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    background: white;
}

.settings-pixel-tracker-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.settings-pixel-tracker-hint {
    margin-top: 6px;
    font-size: 13px;
    color: #64748b;
}

.settings-pixel-tracker-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.settings-pixel-tracker-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
    font-size: 14px;
    color: #475569;
    user-select: none;
}

.settings-pixel-tracker-checkbox:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.settings-pixel-tracker-checkbox-single {
    background: transparent;
    border: none;
    padding: 0;
}

.settings-pixel-tracker-checkbox-single:hover {
    background: transparent;
}

.settings-pixel-tracker-checkbox input[type="checkbox"] {
    display: none;
}

.settings-pixel-tracker-checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.settings-pixel-tracker-checkbox
    input:checked
    + .settings-pixel-tracker-checkmark {
    background: #3b82f6;
    border-color: #3b82f6;
}

.settings-pixel-tracker-checkbox
    input:checked
    + .settings-pixel-tracker-checkmark::after {
    content: "✓";
    color: white;
    font-size: 12px;
    font-weight: bold;
}

#pixelAccessTokenGroup {
    display: none;
}

@media (max-width: 640px) {
    .settings-pixel-tracker-header {
        flex-direction: column;
        align-items: stretch;
    }

    .settings-pixel-tracker-header .settings-pixel-tracker-btn {
        width: 100%;
        justify-content: center;
    }

    .settings-pixel-tracker-info {
        flex-direction: column;
    }

    .settings-pixel-tracker-modal {
        max-height: calc(100vh - 20px);
        margin: 10px;
    }

    .settings-pixel-tracker-checkbox-group {
        flex-direction: column;
    }

    .settings-pixel-tracker-checkbox {
        width: 100%;
    }
}