/* ---- Responsive IRIS-Like Modern Admin Panel Theme (GELİŞTİRİLMİŞ) ---- */

/* --- BASE --- */
body {
    font-family: 'Inter', 'Montserrat', Arial, sans-serif;
    background: linear-gradient(120deg,#e8f3ff 60%,#f8fafc 100%);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* --- HEADER --- */
.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #324a5e;
    color: #fff;
    min-height: 70px;
    padding: 0;
    border-bottom: 3px solid #2581c6;
    box-shadow: 0 4px 18px #324a5e36;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0 0 20px 20px;
}
.admin-header-left {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 32px;
}
.admin-header-logo {
    width: 52px; height: 52px; border-radius: 18px; background:#fff; border: 3px solid #fff;
    box-shadow: 0 4px 16px #2581c633;
}
.admin-header-title {
    font-size: 2.05rem; font-weight: 900; letter-spacing: 1.1px;
    text-shadow: 0 2px 8px #324a5e33;
}
.admin-header-right {
    display: flex; align-items: center; gap: 18px; padding: 0 32px;
}
.admin-header-user {
    font-size: 1.15rem; font-weight: 700; background: #fff2; padding: 7px 18px; border-radius: 14px;
}
.admin-header-role {
    font-size: 1.15rem; background: #fff2; padding: 7px 14px; border-radius: 11px;
}

/* --- DASHBOARD WRAPPER --- */
.dashboard-wrapper {
    display: flex;
    min-height: calc(100vh - 70px);
    background: none;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 0 0 26px 26px;
    box-shadow: 0 4px 32px #2581c614;
}

/* --- SIDEBAR --- */
.admin-sidebar {
    background: linear-gradient(120deg, #3a4e65 80%, #324a5e 100%);
    color: #fff;
    flex: 0 0 340px;
    min-width: max-content;
    max-width: max-content;
    width: 100%;
    min-height: 100vh;
    position: sticky;
    top: 0;
    box-shadow: 2px 0 24px #324a5e44;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 42px 0 36px 0;
    box-sizing: border-box;
    overflow-y: auto;
    border-radius: 0 0 0 26px;
}
.admin-sidebar h2 {
    font-size: 1.25rem;
    color: #fff;
    margin: 0 28px 14px 28px;
    font-weight: 800;
    letter-spacing: 1px;
    opacity: .93;
}
.add-group-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 28px 18px 28px;
    background: #324a5e;
    padding: 22px 17px;
    border-radius: 12px;
    box-shadow: 0 2px 12px #2581c624;
}
.add-group-form .group-input {
    padding: 12px 14px;
    font-size: 1.18rem;
    border-radius: 8px;
    border: 1.5px solid #2581c6;
    outline: none;
    background: #3a4e65;
    color: #fff;
    margin-bottom: 4px;
    transition: border .2s;
}
.add-group-form .group-input:focus { border-color: #43d47b; }
.add-group-form .btn-add-group {
    background: #43d47b;
    color: #fff;
    border: none;
    padding: 12px 0;
    border-radius: 9px;
    cursor:pointer;
    font-size: 1.15rem;
    font-weight: 800;
    transition: background 0.2s, color 0.2s;
    outline: none;
    box-shadow: 0 2px 8px #43d47b33;
}
.add-group-form .btn-add-group:hover { background: #2581c6; color: #fff; }
.group-search {
    width: calc(100% - 56px);
    margin: 0 28px 18px 28px;
    padding: 15px 17px;
    font-size: 1.18rem;
    border-radius: 11px;
    border: 1.5px solid #2581c6;
    outline: none;
    background: #26384a;
    color: #ececec;
    box-shadow: 0 1px 7px #2581c610;
    transition: border .2s;
}
.group-search:focus { border-color: #43d47b; box-shadow: 0 2px 11px #43d47b33; }
.group-list-ul {
    list-style: none;
    padding: 0 14px 0 0;
    margin: 0;
    max-height: 65vh;
    overflow-y: auto;
}
.group-list-item {
    margin: 10px 0;
    padding: 15px 22px;
    border-radius: 14px;
    background: #486080;
    transition: background 0.2s, box-shadow .2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    word-break: break-word;
    min-width: 0;
    box-shadow: 0 2px 10px #2581c622;
    cursor: pointer;
    font-size: 1.08rem;
    border: 0;
}
.group-list-item.active-group {
    background: #43d47b;
    font-weight: 700;
    color: #fff;
    border: 2px solid #2581c6;
    box-shadow: 0 2px 16px #324a5e44;
}
.group-list-item:hover {
    background: #e8f3ff;
    color: #324a5e;
    box-shadow: 0 2px 16px #43d47b44;
}
.group-list-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
    transition: box-shadow .2s;
}
.group-name {
    font-size: 1.20rem;
    color: inherit;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 180px;
    display: inline-block;
}
.group-id {
    font-size: 1.08rem;
    color: #c5e5ff;
    margin-left: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 120px;
    display: inline-block;
    font-weight: 500;
}
.btn-edit-group {
    background: #2581c6;
    color: #fff;
    border: none;
    padding: 11px 26px;
    border-radius: 10px;
    cursor:pointer;
    font-size: 1.09rem;
    font-weight: 800;
    transition: background 0.2s, color 0.2s;
    outline: none;
    margin-left: 10px;
    white-space: nowrap;
    box-shadow: 0 2px 12px #2581c633;
}
.btn-edit-group:hover { background: #43d47b; color: #fff; }

@media (max-width:1200px){
    .admin-sidebar {
        flex: 0 0 100vw;
        min-width: unset;
        max-width: unset;
        width: 100vw;
        position: static;
        box-shadow: none;
        border-radius: 0;
        padding: 22px 0 14px 0;
    }
    .group-name { max-width: 110vw;}
    .group-id { max-width: 60vw;}
    .add-group-form, .group-search { margin-left: 14px; margin-right: 14px; }
}
@media (max-width:700px){
    .admin-sidebar {
        padding: 12px 0 10px 0;
    }
    .add-group-form, .group-search { margin-left: 4px; margin-right: 4px; }
    .group-list-item { padding: 12px 7px; }
    .group-name { font-size: 1rem; max-width: 90vw;}
    .group-id { font-size: .9rem; max-width: 45vw;}
}

/* --- MAIN CONTENT --- */
.admin-content {
    flex: 1 1 0;
    background: #f8fafc;
    border-radius: 24px;
    box-shadow: 0 0 40px #324a5e12, 0 2px 22px #2581c613;
    padding: 54px 42px 38px 42px;
    min-width: 0;
    max-width: 1180px;
    margin: 44px auto 38px auto;
    overflow-x: auto;
    box-sizing: border-box;
    word-break: break-word;
}
.admin-content-title {
    font-size: 1.52rem;
    color: #324a5e;
    font-weight: 800;
    margin-bottom: 37px;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 6px #2581c613;
}
.empty {
    text-align: center;
    margin-top: 56px;
    color: #2581c6;
    font-size: 1.22rem;
    font-weight: 700;
}
.drop-table {
    border-collapse: collapse;
    width: 100%;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 0 12px #43d47b22;
    overflow: auto;
    margin-bottom: 22px;
    font-size: 1.15rem;
    table-layout: auto;
    word-break: break-word;
}
.drop-table th, .drop-table td {
    border-bottom: 1px solid #eee;
    padding: 16px 15px;
    text-align: center;
    vertical-align: middle;
    font-size: 1.15rem;
    word-break: break-word;
}
.drop-table th {
    background: linear-gradient(90deg,#e8f3ff 70%,#43d47b11 100%);
    color: #324a5e;
    font-weight: 900;
    font-size: 1.18rem;
    letter-spacing: 0.25px;
    border-top: 0;
}
.drop-table td {
    color: #334;
}
.drop-table tr:last-child td { border-bottom: none; }
.drop-table tbody tr:hover {
    background: #43d47b11;
    color: #324a5e;
    transition: background 0.2s, color 0.2s;
}
.icon-img {
    max-width: 44px;
    max-height: 44px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    background: #fafaff;
    box-shadow: 0 2px 4px #43d47b22;
    margin: 0 auto;
}
.icon-missing {
    color: #b01a5e;
    font-size: 1.05rem;
    font-style: italic;
    padding: 3px 13px;
    background: #e1f2ff;
    border-radius: 9px;
}
.table-action a, .btn-edit, .btn-delete, .btn-save, .btn-cancel, .btn-add {
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 12px;
    font-size: 1.09rem;
    font-weight: 800;
    margin: 0 2px;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
    border: none;
    outline: none;
    display: inline-block;
    word-break: break-word;
}
.btn-edit { background: #e8f3ff; color: #2581c6; }
.btn-edit:hover { background: #43d47b; color: #fff; }
.btn-delete { background: #ffeaea; color: #b01a7e; }
.btn-delete:hover { background: #ffd3e0; color: #a00; }
.btn-save { background: #e2ffe7; color: #2581c6; }
.btn-save:hover { background: #43d47b; color: #fff; }
.btn-cancel { background: #f6f6f6; color: #333; }
.btn-cancel:hover { background: #ededed; color: #2581c6; }
.btn-add { background: #2581c6; color: #fff; }
.btn-add:hover { background: #43d47b; color: #fff; }
.add-form {
    margin-top: 26px;
    background: #e8f3ff;
    border-radius: 14px;
    box-shadow: 0 0 12px #43d47b14;
    padding: 26px 18px;
    display: flex;
    gap: 18px;
    align-items: center;
    font-size: 1.13rem;
    flex-wrap: wrap;
}
.add-form input {
    width: 120px;
    font-size: 1.13rem;
    border-radius: 10px;
    border: 1px solid #ddd;
    padding: 12px 15px;
    box-sizing: border-box;
    min-width: 80px;
    max-width: 100%;
    margin-right: 6px;
}

/* --- TOAST NOTIFICATION --- */
.toast-notify {
    position: fixed;
    top: 38px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 280px;
    max-width: 440px;
    z-index: 99998;
    background: #43d47b;
    color: #fff;
    font-weight: 700;
    font-size: 1.19rem;
    padding: 18px 44px 18px 58px;
    border-radius: 16px;
    box-shadow: 0 8px 30px #43d47b44;
    display: flex;
    align-items: center;
    gap: 18px;
    animation: toastIn 0.32s cubic-bezier(.42,1.65,.78,1.01);
    pointer-events: all;
}
.toast-success {
    background: #43d47b;
}
.toast-notify .toast-icon {
    font-size: 2.3rem;
    margin-right: 8px;
}
.toast-notify .toast-close {
    position: absolute;
    top: 9px;
    right: 20px;
    font-size: 1.6rem;
    color: #fff;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.toast-notify .toast-close:hover { opacity: 1; }
@keyframes toastIn {
    from { opacity: 0; transform:translateY(-44px) translateX(-50%);}
    to   { opacity: 1; transform:translateY(0px) translateX(-50%);}
}

/* --- MODAL --- */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    overflow: auto;
    background: linear-gradient(120deg,#324a5ecc 55%,#2581c6cc 100%);
    backdrop-filter: blur(2px);
    transition: opacity 0.2s;
}
.modal.show {
    display: block;
    opacity: 1;
    animation: fadeInModalBg 0.22s ease;
}
@keyframes fadeInModalBg {
    from { opacity: 0; }
    to { opacity: 1; }
}
.modal-content {
    background: #fff;
    margin: 70px auto;
    padding: 54px 42px 38px 42px;
    border-radius: 22px;
    width: 96%;
    max-width: 860px;
    position: relative;
    box-shadow: 0 12px 40px #2581c629;
    animation: popmodal 0.18s cubic-bezier(.42,1.65,.78,1.01);
    box-sizing: border-box;
    overflow-x: auto;
}
@keyframes popmodal {
    from { transform:scale(0.85); opacity:0; }
    to   { transform:scale(1); opacity:1; }
}
.close-modal {
    color: #b01a7e;
    position: absolute;
    top: 24px;
    right: 38px;
    font-size: 46px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
    padding: 8px 15px;
    border-radius: 50%;
    background: #f9f1f7;
    box-shadow: 0 2px 10px #e7c6d8;
}
.close-modal:hover { color: #fff; background: #2581c6; }
.modal-title {
    font-size: 1.7rem;
    font-weight: 900;
    color: #324a5e;
    letter-spacing: 0.7px;
    margin-bottom: 24px;
    display: inline-block;
    text-shadow: 0 1px 4px #2581c613;
}
.modal-header { 
    margin-bottom: 10px;
    display: flex; 
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #e4e8fa;
    padding-bottom: 18px;
}
body.modal-open { overflow: hidden; }

/* --- RESPONSIVE --- */
@media (max-width:1200px){
    .dashboard-wrapper{flex-direction:column;}
    .admin-sidebar {
        flex: 0 0 100vw;
        min-width: unset;
        max-width: unset;
        width: 100vw;
        position: static;
        box-shadow: none;
        border-radius: 0;
        padding: 18px 0 12px 0;
    }
    .group-name { max-width: 110vw;}
    .group-id { max-width: 60vw;}
    .add-group-form, .group-search { margin-left: 14px; margin-right: 14px; }
    .admin-content {
        margin: 18px 0;
        padding: 18px 2vw;
        max-width: 99vw;
        border-radius: 14px;
    }
    .drop-table th, .drop-table td { padding: 10px 7px; font-size: 1rem;}
    .add-form input {width: 80px;}
    .modal-content {padding:16px 2vw;}
}
@media (max-width:700px){
    .admin-header-left, .admin-header-right{padding:0 4px;}
    .admin-header-title{font-size:1.1rem;}
    .admin-header-logo{width:34px;height:34px;}
    .admin-content{padding:6px 2px;}
    .modal-content{padding:8px 2px;}
    .toast-notify{min-width:120px;max-width:99vw;padding:8px 12px 8px 28px;}
    .add-form input{width:60px;}
}