/* css/admin.css */
/* Yönetici Paneli stilleri */

/* Admin Paneli Genel Layout */
#adminPageContainer{
	max-width:1005px;
}

.admin-layout {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.admin-sidebar {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--glass-bg-color);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid var(--glass-border-color);
    box-shadow: 0 4px 16px var(--glass-shadow-color);
}

.admin-menu-item {
    background: none;
    border: none;
    color: var(--text-main);
    padding: 10px 15px;
    text-align: left;
    font-size: 0.9em;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s, color 0.2s;
}

.admin-menu-item:hover {
    background-color: rgba(255,255,255,0.1);
}

.admin-menu-item.active {
    background-color: #a678f2;
    color: white;
    font-weight: bold;
}

.admin-content {
    flex: 1;
    background-color: var(--glass-bg-color);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid var(--glass-border-color);
    box-shadow: 0 4px 16px var(--glass-shadow-color);
    min-height: 770px;
	max-width:750px;
}

.admin-content-section h2,
.admin-content-section h3 {
    text-align: left;
    margin-bottom: 20px;
    font-size: 1.3em; /* Profil başlığı ile tutarlılık için */
    color: var(--text-main);
}
body.light .admin-content-section h2, body.light .admin-content-section h3 {
    color: var(--text-main);
}
/* Tablo Stilleri (Kullanıcı Listesi ve Dil Anahtarları) */
.admin-table-container {
    overflow-x: auto; /* Tablo konteynerini kaydırılabilir yapar */
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    color: var(--text-main);
    font-size: 0.8em;
    overflow: hidden;
}

.admin-table th,
.admin-table td {
    border: 1px solid var(--glass-border-color);
    padding: 10px;
    text-align: left;
    vertical-align: top;
}

.admin-table th {
    background-color: rgba(255,255,255,0.08);
    font-weight: bold;
}

.admin-table tbody tr:nth-child(odd) {
    background-color: rgba(255,255,255,0.03);
}

.admin-table tbody tr:hover {
    background-color: rgba(255,255,255,0.1);
}

.admin-table input[type="number"],
.admin-table input[type="text"],
.admin-table input[type="email"],
.admin-table textarea {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid var(--glass-input-border);
    background-color: rgba(255,255,255,0.08);
    color: var(--text-main);
    width: calc(100% - 12px);
    box-sizing: border-box;
}

.admin-table textarea {
    min-height: 50px;
    resize: vertical;
}

.admin-table .actions button {
    padding: 6px 10px;
    font-size: 0.8em;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
}

/* Checkbox'lar */
.admin-table input[type="checkbox"] {
    width: auto;
    height: auto;
    margin: 0;
    vertical-align: middle;
}

/* Dil Yönetimi Özel Stiller */
.language-add-section form {
    margin-top: 10px;
    align-items: unset;
}
.language-add-section .input-group {
    flex: 1 1 20px !important;
    margin-bottom: 5px;
}
.language-keys-table .lang-key-input {
    background: none;
    border: none;
    font-weight: bold;
    color: var(--text-main);
    cursor: default;
}
.language-keys-table .lang-value-input {
    width: calc(100% - 12px);
}
body.light .admin-sidebar,
body.light .admin-content {
    background-color: var(--light-glass-bg-color);
    border: 1px solid var(--light-glass-border-color);
    box-shadow: 0 4px 16px var(--light-glass-shadow-color);
}
body.light .admin-menu-item:hover {
    background-color: rgba(0,0,0,0.05);
}
body.light .admin-menu-item.active {
    background-color: #643dc0;
    color: white;
}
body.light .admin-table {
    background-color: var(--light-glass-input-bg);
    border: 1px solid var(--light-glass-border-color);
    color: var(--text-main);
}
body.light .admin-table th {
    background-color: rgba(0,0,0,0.05);
}
body.light .admin-table tbody tr:nth-child(odd) {
    background-color: rgba(0,0,0,0.02);
}
body.light .admin-table tbody tr:hover {
    background-color: rgba(0,0,0,0.08);
}
body.light .admin-table input,
body.light .admin-table textarea {
    background-color: rgba(0,0,0,0.05);
    border: 1px solid var(--light-glass-input-border);
    color: var(--text-main);
}
body.light .language-keys-table .lang-key-input {
    color: var(--text-main);
}
/* Mobil uyumluluk */
@media (max-width: 768px) {
    .admin-layout {
        flex-direction: column;
    }
    .admin-sidebar {
        flex: 0 0 auto;
        width: 100%;
        flex-direction: row;
        justify-content: space-around;
        padding: 10px;
        overflow-x: auto;
		box-sizing: border-box;
    }
    .admin-menu-item {
        flex-shrink: 0;
        font-size: 0.9em;
        padding: 8px 10px;
    }
    .admin-content {
        padding: 15px;
    }
    .admin-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        width: 100%;
        box-sizing: border-box;
    }
    .admin-table thead, .admin-table tbody, .admin-table th, .admin-table td, .admin-table tr {
        display: block;
    }
    .admin-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    .admin-table tr {
        border: 1px solid var(--glass-border-color);
        margin-bottom: 10px;
        border-radius: 8px;
        overflow: hidden;
    }
    .admin-table td {
        border: none;
        position: relative;
        padding-left: 25%;
        text-align: left;
        padding-bottom: 5px;
        padding-top: 5px;
    }
    .admin-table td:before {
        content: attr(data-label);
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        top: 5px;
    }
    .admin-table td input[type="number"],
    .admin-table td input[type="text"],
    .admin-table td input[type="email"],
    .admin-table td textarea {
        width: calc(100% - 10px);
        padding: 5px;
        font-size: 0.9em;
        margin-top: 5px;
        box-sizing: border-box;
    }
    .admin-table .actions button {
        display: inline-block;
        width: auto;
        max-width: calc(33% - 10px);
        box-sizing: border-box;
        margin-right: 5px;
        margin-bottom: 5px;
        font-size: 0.8em;
        padding: 6px 10px;
    }
    .admin-table .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
}
.admin-section .settings-form .form-group {
    margin-bottom: 15px;
}

.admin-section .settings-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--text-main);
}
.form-message {
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
}
#userAvatarPreview {
    cursor: pointer;
    transition: filter 0.3s ease-in-out;
}
#userAvatarPreview:hover {
    filter: brightness(0.7);
}
.stats-details h3 {
    font-size: 1.1em;
    margin-top: 15px;
    margin-bottom: 10px;
}
.stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.stats-list li {
    background-color: var(--glass-input-bg);
    border: 1px solid var(--glass-input-border);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 0.9em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.stats-list-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}
.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px;
    background-color: var(--glass-input-bg);
    border: 1px solid var(--glass-input-border);
    border-radius: 8px;
    width: 99px;
    box-sizing: border-box;
    text-align: center;
}
.stat-card img {
    width: 79px;
    height: auto;
    border-radius: 5px;
}
.stat-card-name {
    font-size: 0.8em;
    font-weight: bold;
    color: var(--text-main);
    line-height: 1.2;
}
.stat-card-count {
    font-size: 0.8em;
    color: #f7c843;
    background-color: rgba(247, 200, 67, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
}
@media (max-width: 768px) {
    .stat-card {
        width: calc(33.33% - 8px);
    }
}
@media (max-width: 480px) {
    .stat-card {
        width: calc(50% - 6px);
    }
    .stat-card img {
        width: 60px;
    }
    .stat-card-name, .stat-card-count {
        font-size: 0.75em;
    }
}
#siteSettingsSection .language-select {
    min-width: 100%;
    border: 1px solid #a678f2;
	margin-left:0px;
	Padding:12px;
}
.note-frame {
    color: #fff !important; 
}
/* admin.css dosyasının sonuna eklenecek */

#aiVariablesCheckboxContainer .checkbox-group-item label {
    display: flex;       
    flex-direction: row; 
    align-items: center;  
    gap: 10px;            
    cursor: pointer;     
    font-weight: normal;   
}

/* Paket düzenleme paneli (modal yerine inline panel) */
.package-edit-panel {
    display: none;
    margin-top: 18px;
}
.package-edit-panel .panel-box {
    background: var(--glass-input-bg);
    border: 1px solid var(--glass-border-color);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.package-edit-panel .panel-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom: 10px;
}
.package-edit-panel .panel-header h3 { margin:0; }
.package-edit-panel .panel-close { background:none; border:none; font-size:20px; cursor:pointer; }
.package-edit-panel .panel-body .form-group { margin-bottom: 10px; }


.admin-table .package-action-btn.reorder {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--text-main);
    padding: 4px 6px;
    border-radius: 4px;
    margin-left: 6px;
}
.admin-table .package-action-btn.reorder:hover { background: rgba(255,255,255,0.03); }


#aiVariablesCheckboxContainer .checkbox-group-item input[type="checkbox"] {
    width: auto;        
    height: auto;
    flex-shrink: 0; 
}

/* Admin paneli silme butonları için genel stil */
.admin-table .delete-fortune-type-btn,
.admin-table .delete-page-btn {
	background-color: #ccc;
    color: #222;
}

.admin-table .delete-fortune-type-btn:hover,
.admin-table .delete-page-btn:hover {
    background-color: #a92824; /* Fare üzerine gelince oluşacak renk */
    border-color: #a92824;
	color: #fff;
}


.sort-actions button {
    padding: 5px 7px 5px 6px;
    border-radius: 12px;
    margin-left: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffe780;
}
.sort-actions button:hover {
    background-color: #a92824; /* Fare üzerine gelince oluşacak renk */
    border-color: #a92824;
	color: #fff;
}
/* css/admin.css dosyasının en sonuna ekleyin */

/* --- İpucu Planlayıcı Stilleri --- */
.planner-controls {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.planner-controls select {
    max-width: 300px;
}

.planner-container {
    display: flex;
    gap: 20px;
}

.planner-column {
    flex: 1;
    background-color: rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    height: 600px;
}

.tip-item.sortable-ghost {
    background-color: #a678f2;
    opacity: 0.5;
}


/* --- Gelişmiş İpucu Planlayıcı Stilleri --- */
.tip-planner-wrapper {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-top: 20px;
}

/* --- Gelişmiş İpucu Planlayıcısı Stilleri V2 --- */
.planner-main-actions {
    display: flex;
    gap: 10px;
}

.planner-column h3 {
    margin-top: 0;
    font-size: 0.8em;
    border-bottom: 1px solid var(--glass-border-color);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.planner-filter {
    margin-bottom: 10px;
}

.planner-filter input {
    width: 100%;
    padding: 8px;
    font-size: 0.9em;
}

.planner-list {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px dashed var(--glass-input-border);
    padding: 10px;
    border-radius: 6px;
}

.planner-list .empty-list-message {
    margin: auto;
    color: var(--text-main);
    opacity: 0.6;
    text-align: center;
}

.planner-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: center;
}

.planner-actions .button {
    padding: 10px;
    font-size: 1.2em;
    line-height: 1;
}

.tip-item {
    background-color: var(--glass-input-bg);
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--glass-input-border);
    font-size: 0.9em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s, border-color 0.2s;
}

.tip-item.selected {
    background-color: #a678f2;
    border-color: #f7c843;
    color: white;
}

.tip-item .tip-category {
    font-size: 0.8em;
    background-color: rgba(255,255,255,0.1);
    padding: 3px 6px;
    border-radius: 4px;
    opacity: 0.8;
}

.tip-item.selected .tip-category {
    background-color: rgba(0,0,0,0.2);
}

body.light .planner-column {
    background-color: rgba(0,0,0,0.05);
}

body.light .tip-item {
    background-color: #fff;
    border-color: var(--light-glass-border-color);
}

body.light .tip-item.selected {
    background-color: #643dc0;
    border-color: #f7c843;
}

/* css/admin.css dosyasının en sonuna ekleyin */

/* --- Admin Ödeme Ayarları UI İyileştirmeleri --- */
.payment-settings-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.payment-settings-card {
    background: linear-gradient(135deg, rgba(166, 120, 242, 0.1) 0%, rgba(247, 200, 67, 0.1) 100%);
    border: 1px solid rgba(166, 120, 242, 0.3);
    border-radius: 15px;
    padding: 20px;
    transition: all 0.3s ease;
}

.payment-settings-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(166, 120, 242, 0.2);
}

.payment-settings-card h3 {
    color: #a678f2;
    margin-bottom: 15px;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.payment-settings-card h3::before {
    content: "💳";
    font-size: 1.2em;
}

.crypto-settings-card h3::before {
    content: "₿";
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.9em;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid rgba(166, 120, 242, 0.2);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    font-size: 0.9em;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #a678f2;
    background-color: rgba(166, 120, 242, 0.1);
    box-shadow: 0 0 0 3px rgba(166, 120, 242, 0.1);
}

.settings-actions {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(166, 120, 242, 0.2);
}

.settings-actions .button {
    flex: 1;
    padding: 12px 20px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.settings-actions .button.primary {
    background: linear-gradient(135deg, #a678f2 0%, #6f42c1 100%);
    border: none;
    color: white;
}

.settings-actions .button.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(166, 120, 242, 0.4);
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
}

.status-indicator.active {
    background-color: rgba(40, 167, 69, 0.2);
    color: #28a745;
}

.status-indicator.inactive {
    background-color: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}

/* Light theme için admin kart stilleri */
body.light .payment-settings-card {
    background: linear-gradient(135deg, rgba(166, 120, 242, 0.05) 0%, rgba(247, 200, 67, 0.05) 100%);
    border-color: rgba(166, 120, 242, 0.2);
}

body.light .form-group input,
body.light .form-group select,
body.light .form-group textarea {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: rgba(166, 120, 242, 0.15);
}

/* --- Admin Kart Stilleri --- */
.admin-card {
    background-color: var(--glass-input-bg);
    border: 1px solid var(--glass-input-border);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}

.admin-card:hover {
    background-color: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.2);
}

.btn-mini {
    padding: 4px 8px;
    font-size: 0.8em;
    border-radius: 4px;
    border: 1px solid transparent;
    background-color: #6c757d;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 4px;
    margin-bottom: 4px;
}

.btn-mini:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-mini.warn {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-mini.warn:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

.btn-mini.gray {
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-mini.gray:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

.badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.75em;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 4px;
}

/* Light theme için admin kart stilleri */
body.light .admin-card {
    background-color: var(--light-glass-input-bg);
    border-color: var(--light-glass-input-border);
}

body.light .admin-card:hover {
    background-color: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.1);
}

/* --- Playlist Yönetim Modalı Stilleri --- */
.playlist-management-layout {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}
.playlist-list-container {
    flex: 1;
}
.playlist-editor-container {
    flex: 1.2;
    padding-left: 20px;
    border-left: 1px solid var(--light-glass-input-border);
}
.playlist-list-items {
    max-height: 400px;
    overflow-y: auto;
    padding: 5px;
}
.playlist-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: var(--light-glass-input-bg);
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    border: 1px solid transparent;
}
.playlist-list-item:hover {
    border-color: #f7c843;
}
.playlist-list-item-info span {
    display: block;
    font-size: 0.8em;
    opacity: 0.7;
}
.playlist-list-item-actions .button {
    padding: 5px 8px;
    font-size: 0.8em;
}
.playlist-form-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

/* YENİ: Dikey layout için ana sarmalayıcı */
.tip-planner-vertical-layout {
    display: flex;
    flex-direction: column; /* Öğeleri alt alta sırala */
    gap: 15px;
    margin-top: 20px;
}

/* YENİ: Dikey buton hizalaması */
.planner-actions-vertical {
    display: flex;
    flex-direction: row; /* Butonları yan yana sırala */
    gap: 10px;
    justify-content: center; /* Butonları yatayda ortala */
    margin: 10px 0;
}

.planner-actions-vertical .button {
    padding: 10px;
    font-size: 1em;
    line-height: 1;
    width: 50px; /* Butonlara sabit bir genişlik ver */
}

/* Package Management Styles */
.package-categories {
    margin-top: 20px;
}

.package-category-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.package-tab {
    background: none;
    border: none;
    color: var(--text-main);
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    font-weight: 500;
}

.package-tab:hover {
    color: #a678f2;
}

.package-tab.active {
    color: #a678f2;
    border-bottom-color: #a678f2;
}

.package-category-content {
    display: none;
}

.package-category-content.active {
    display: block;
}

.package-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.package-actions .button {
    background: linear-gradient(135deg, #a678f2 0%, #6f42c1 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.package-actions .button:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(166, 120, 242, 0.4);
}

/* (Deprecated) Package Edit Modal styles removed to avoid overriding global .modal. */

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

.modal-header h3 {
    margin: 0;
    color: var(--text-main);
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-main);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.modal-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.modal-body {
    padding: 20px;
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 5px;
}

.form-actions .button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-actions .button[type="submit"] {
    background: linear-gradient(135deg, #a678f2 0%, #6f42c1 100%);
    color: white;
}

.form-actions .button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(166, 120, 242, 0.4);
}

/* Package table styles */
.admin-table td, .admin-table th {
    padding: 9px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.package-status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: bold;
}

.package-status-badge.active {
    background: #28a745;
    color: white;
}

.package-status-badge.inactive {
    background: #6c757d;
    color: white;
}

.package-badge {
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 0.7em;
    font-weight: bold;
}

.package-badge.popular {
    background: linear-gradient(135deg, #f7c843 0%, #ff6b6b 100%);
    color: white;
}

.package-badge.best_value {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.package-badge.limited {
    background: linear-gradient(135deg, #dc3545 0%, #e056fd 100%);
    color: white;
}

.package-action-btn {
    background: none;
    border: 1px solid #a678f2;
    color: #a678f2;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8em;
    margin-right: 5px;
    transition: all 0.3s ease;
}

.package-action-btn:hover {
    background: #a678f2;
    color: white;
}

.package-action-btn.delete {
    border-color: #dc3545;
    color: #dc3545;
}

.package-action-btn.delete:hover {
    background: #dc3545;
    color: white;
}

/* Language fill indicators for package rows */
.package-label-cell { display:flex; flex-direction:column; gap:6px; }
.package-label-text { font-weight:600; }

/* Responsive Design */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        margin: 10px;
    }
    
    .package-category-tabs {
        flex-direction: column;
    }
    
    .admin-table {
        font-size: 0.8em;
    }
    
    .form-actions {
        flex-direction: column;
    }
}
.package-edit-panel .form-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

/* Category Tabs Styling */
.category-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--glass-border-color);
    padding-bottom: 10px;
}

.category-tab-btn {
    padding: 10px 18px;
    background-color: var(--glass-input-bg);
    border: 1px solid var(--glass-input-border);
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-tab-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-color);
}

.category-tab-btn.active {
    background-color: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
    box-shadow: 0 0 10px rgba(var(--accent-color-rgb), 0.5);
}