/* ============================================================
   admin.css — Custom CSS Admin Dashboard
   Portal Kegiatan Lingkungan Wilayah
   ============================================================ */

/* ----------------------------------------------------------
   CSS VARIABLES
   ---------------------------------------------------------- */
:root {
    --admin-primary:      #2563eb;
    --admin-primary-dark: #1d4ed8;
    --admin-sidebar-bg:   #0f172a;
    --admin-sidebar-w:    260px;
    --admin-topbar-h:     64px;
    --admin-body-bg:      #f1f5f9;
    --admin-card-bg:      #ffffff;
    --admin-text:         #1e293b;
    --admin-text-muted:   #64748b;
    --admin-border:       #e2e8f0;
    --admin-success:      #059669;
    --admin-warning:      #d97706;
    --admin-danger:       #dc2626;
    --admin-purple:       #7c3aed;
    --admin-orange:       #ea580c;
    --admin-green:        #16a34a;
    --shadow-sm:          0 1px 3px rgba(0,0,0,.08);
    --shadow-md:          0 4px 16px rgba(0,0,0,.10);
    --shadow-lg:          0 10px 40px rgba(0,0,0,.15);
    --radius-sm:          6px;
    --radius-md:          12px;
    --radius-lg:          20px;
    --transition:         all .3s cubic-bezier(.4,0,.2,1);
    --font-base:          'Poppins', sans-serif;
}

/* ----------------------------------------------------------
   RESET & BASE
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body.admin-body {
    font-family:    var(--font-base);
    font-size:      14px;
    color:          var(--admin-text);
    background:     var(--admin-body-bg);
    margin:         0;
    padding:        0;
    overflow-x:     hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color:       var(--admin-text);
    margin:      0;
}

a { transition: var(--transition); }

/* ----------------------------------------------------------
   LAYOUT: WRAPPER
   ---------------------------------------------------------- */
.admin-wrapper {
    display:   flex;
    min-height: 100vh;
}

/* ----------------------------------------------------------
   SIDEBAR
   ---------------------------------------------------------- */
.admin-sidebar {
    width:      var(--admin-sidebar-w);
    background: var(--admin-sidebar-bg);
    position:   fixed;
    top:        0;
    left:       0;
    height:     100vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index:    1000;
    transition: var(--transition);
    display:    flex;
    flex-direction: column;
    box-shadow: 4px 0 24px rgba(0,0,0,.3);
}

/* Scrollbar Sidebar */
.admin-sidebar::-webkit-scrollbar { width: 4px; }
.admin-sidebar::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

/* Sidebar Collapsed (toggle) */
.admin-sidebar.collapsed { transform: translateX(-100%); }

/* Sidebar Brand */
.sidebar-brand {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       20px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink:   0;
}

.brand-icon-wrap {
    width:          44px;
    height:         44px;
    background:     linear-gradient(135deg, var(--admin-primary) 0%, var(--admin-purple) 100%);
    border-radius:  var(--radius-sm);
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      20px;
    color:          #fff;
    flex-shrink:    0;
    box-shadow:     0 4px 12px rgba(37,99,235,.4);
}

.brand-name {
    display:     block;
    font-size:   14px;
    font-weight: 700;
    color:       #fff;
    line-height: 1.2;
}
.brand-sub {
    font-size:  11px;
    color:      rgba(255,255,255,.4);
    font-weight: 400;
}

/* Sidebar User */
.sidebar-user {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       16px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink:   0;
}
.user-avatar {
    font-size: 36px;
    color:     rgba(255,255,255,.5);
    flex-shrink: 0;
}
.user-name {
    display:     block;
    font-size:   13px;
    font-weight: 600;
    color:       rgba(255,255,255,.9);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
    max-width:   160px;
}
.user-role {
    font-size: 11px;
    color:     rgba(255,255,255,.4);
}

/* Sidebar Menu */
.sidebar-menu {
    list-style:  none;
    padding:     12px 0;
    margin:      0;
    flex-grow:   1;
}

.menu-header {
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color:          rgba(255,255,255,.3);
    padding:        12px 20px 6px;
    margin-top:     4px;
}

.menu-item {}

.menu-link {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       11px 20px;
    color:         rgba(255,255,255,.65) !important;
    font-size:     14px;
    font-weight:   500;
    text-decoration: none;
    transition:    var(--transition);
    border-left:   3px solid transparent;
    position:      relative;
}
.menu-link:hover {
    background:   rgba(255,255,255,.06);
    color:        rgba(255,255,255,.9) !important;
    border-left-color: rgba(37,99,235,.5);
    padding-left: 24px;
}
.menu-item.active .menu-link {
    background:       rgba(37,99,235,.15);
    color:            #fff !important;
    border-left-color: var(--admin-primary);
}
.menu-item.active .menu-link .menu-icon {
    color: var(--admin-primary);
}

.menu-icon {
    font-size:  16px;
    width:      20px;
    text-align: center;
    flex-shrink: 0;
    color:      rgba(255,255,255,.4);
    transition: var(--transition);
}

.menu-link-logout { color: rgba(239,68,68,.7) !important; }
.menu-link-logout:hover { background: rgba(239,68,68,.1) !important; color: #ef4444 !important; border-left-color: #ef4444 !important; }
.menu-link-logout .menu-icon { color: rgba(239,68,68,.5); }

/* ----------------------------------------------------------
   MAIN CONTENT AREA
   ---------------------------------------------------------- */
.admin-main {
    margin-left: var(--admin-sidebar-w);
    flex:        1;
    display:     flex;
    flex-direction: column;
    transition:  var(--transition);
    min-height:  100vh;
}

.admin-main.expanded {
    margin-left: 0;
}

/* ----------------------------------------------------------
   TOPBAR
   ---------------------------------------------------------- */
.admin-topbar {
    height:         var(--admin-topbar-h);
    background:     var(--admin-card-bg);
    border-bottom:  1px solid var(--admin-border);
    display:        flex;
    align-items:    center;
    padding:        0 24px;
    position:       sticky;
    top:            0;
    z-index:        999;
    box-shadow:     var(--shadow-sm);
    gap:            16px;
}

.btn-icon {
    width:          40px;
    height:         40px;
    border:         1px solid var(--admin-border);
    border-radius:  var(--radius-sm);
    background:     #fff;
    display:        flex;
    align-items:    center;
    justify-content: center;
    color:          var(--admin-text-muted);
    font-size:      16px;
    transition:     var(--transition);
    flex-shrink:    0;
}
.btn-icon:hover {
    background: var(--admin-primary);
    color:      #fff;
    border-color: var(--admin-primary);
}

.topbar-title {
    font-weight: 600;
    font-size:   15px;
    color:       var(--admin-text);
    flex-grow:   1;
}

.topbar-right {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
}

.topbar-user {
    font-size:  13px;
    color:      var(--admin-text-muted);
    font-weight: 500;
}

.btn-topbar-logout {
    background:    transparent;
    color:         var(--admin-danger);
    border:        1px solid rgba(220,38,38,.3);
    font-size:     12px;
    font-weight:   600;
    padding:       6px 14px;
    border-radius: var(--radius-sm);
    transition:    var(--transition);
}
.btn-topbar-logout:hover {
    background:  var(--admin-danger);
    color:       #fff;
    border-color: var(--admin-danger);
}

/* ----------------------------------------------------------
   CONTENT AREA
   ---------------------------------------------------------- */
.admin-content {
    padding:    28px;
    flex-grow:  1;
}

.content-header {
    margin-bottom: 28px;
}
.content-title {
    font-size:   1.4rem;
    font-weight: 800;
    color:       var(--admin-text);
    margin-bottom: 4px;
}

/* ----------------------------------------------------------
   ADMIN CARD
   ---------------------------------------------------------- */
.admin-card {
    background:    var(--admin-card-bg);
    border-radius: var(--radius-md);
    border:        1px solid var(--admin-border);
    box-shadow:    var(--shadow-sm);
    overflow:      hidden;
    transition:    var(--transition);
}
.admin-card:hover {
    box-shadow: var(--shadow-md);
}
.admin-card-header {
    padding:       16px 20px;
    border-bottom: 1px solid var(--admin-border);
    background:    #f8fafc;
}
.admin-card-body {
    padding: 20px;
}

/* ----------------------------------------------------------
   STAT CARDS (Dashboard)
   ---------------------------------------------------------- */
.stat-card {
    border-radius: var(--radius-md);
    padding:       24px;
    display:       flex;
    flex-direction: column;
    gap:           16px;
    position:      relative;
    overflow:      hidden;
    color:         #fff;
    box-shadow:    var(--shadow-md);
    transition:    var(--transition);
}
.stat-card:hover {
    transform:  translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.stat-card::before {
    content:  '';
    position: absolute;
    top:      -20px;
    right:    -20px;
    width:    100px;
    height:   100px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
}

.stat-card-blue   { background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); }
.stat-card-green  { background: linear-gradient(135deg, #059669 0%, #0d9488 100%); }
.stat-card-orange { background: linear-gradient(135deg, #ea580c 0%, #d97706 100%); }
.stat-card-purple { background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%); }

.stat-card-icon {
    font-size: 32px;
    opacity:   .9;
}
.stat-card-number {
    display:     block;
    font-size:   2.5rem;
    font-weight: 800;
    line-height: 1;
}
.stat-card-label {
    display:    block;
    font-size:  13px;
    font-weight: 500;
    opacity:    .85;
    margin-top: 4px;
}
.stat-card-sub {
    font-size:  12px;
    opacity:    .7;
}
.stat-card-link {
    color:       rgba(255,255,255,.8);
    font-size:   13px;
    font-weight: 500;
    text-decoration: none;
    margin-top:  auto;
    transition:  var(--transition);
}
.stat-card-link:hover { color: #fff; text-decoration: none; }

/* ----------------------------------------------------------
   QUICK ACTION BUTTONS (Dashboard)
   ---------------------------------------------------------- */
.quick-action-btn {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    padding:        24px 16px;
    background:     #f8fafc;
    border:         2px dashed var(--admin-border);
    border-radius:  var(--radius-md);
    color:          var(--admin-text-muted);
    text-decoration: none;
    transition:     var(--transition);
    gap:            10px;
    min-height:     110px;
    text-align:     center;
}
.quick-action-btn i    { font-size: 28px; color: var(--admin-primary); }
.quick-action-btn span { font-size: 13px; font-weight: 600; }
.quick-action-btn:hover {
    background:   var(--admin-primary);
    border-color: var(--admin-primary);
    color:        #fff;
    text-decoration: none;
    transform:    translateY(-4px);
    box-shadow:   0 8px 24px rgba(37,99,235,.3);
}
.quick-action-btn:hover i { color: #fff; }

/* ----------------------------------------------------------
   TABLE ADMIN
   ---------------------------------------------------------- */
.table-admin {
    font-size: 14px;
}
.table-admin thead tr {
    background: #f8fafc;
}
.table-admin thead th {
    font-weight:    700;
    font-size:      12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color:          var(--admin-text-muted);
    border-top:     none;
    border-bottom:  2px solid var(--admin-border) !important;
    padding:        12px 16px;
    white-space:    nowrap;
}
.table-admin tbody td {
    padding:        12px 16px;
    vertical-align: middle;
    border-color:   var(--admin-border);
}
.table-admin tbody tr:hover { background: #f8faff; }

.thumb-table {
    width:         56px;
    height:        56px;
    object-fit:    cover;
    border-radius: var(--radius-sm);
    border:        2px solid var(--admin-border);
}
.thumb-table-placeholder {
    width:          56px;
    height:         56px;
    background:     #e0e7ff;
    border-radius:  var(--radius-sm);
    display:        flex;
    align-items:    center;
    justify-content: center;
    color:          var(--admin-primary);
    font-size:      20px;
    opacity:        .7;
}

/* Tombol Aksi XS */
.btn-xs {
    padding:       4px 10px;
    font-size:     12px;
    border-radius: var(--radius-sm);
    font-weight:   600;
    transition:    var(--transition);
}
.btn-xs:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* ----------------------------------------------------------
   GALERI ADMIN CARDS
   ---------------------------------------------------------- */
.galeri-admin-card {
    background:    var(--admin-card-bg);
    border-radius: var(--radius-md);
    border:        1px solid var(--admin-border);
    overflow:      hidden;
    box-shadow:    var(--shadow-sm);
    transition:    var(--transition);
}
.galeri-admin-card:hover {
    box-shadow: var(--shadow-lg);
    transform:  translateY(-4px);
}
.galeri-admin-img-wrap {
    position:   relative;
    overflow:   hidden;
    height:     180px;
}
.galeri-admin-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.galeri-admin-card:hover .galeri-admin-img { transform: scale(1.06); }
.galeri-admin-overlay {
    position:    absolute;
    inset:       0;
    background:  rgba(15,23,42,.7);
    display:     flex;
    align-items: center;
    justify-content: center;
    gap:         10px;
    opacity:     0;
    transition:  var(--transition);
}
.galeri-admin-card:hover .galeri-admin-overlay { opacity: 1; }

.galeri-admin-info   { padding: 14px; }
.galeri-admin-title  { font-size: 13px; font-weight: 700; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.galeri-admin-desc   { font-size: 12px; color: var(--admin-text-muted); margin-bottom: 8px; }

/* ----------------------------------------------------------
   FORM ELEMENTS
   ---------------------------------------------------------- */
.form-label-admin {
    font-size:   13px;
    font-weight: 600;
    color:       var(--admin-text);
    margin-bottom: 8px;
    display:     block;
}

.form-control-admin {
    border:        1px solid var(--admin-border);
    border-radius: var(--radius-sm);
    font-size:     14px;
    font-family:   var(--font-base);
    color:         var(--admin-text);
    padding:       10px 14px;
    transition:    var(--transition);
}
.form-control-admin:focus {
    border-color: var(--admin-primary);
    box-shadow:   0 0 0 3px rgba(37,99,235,.12);
    outline:      none;
}

/* Upload Area */
.upload-area {
    border:        2px dashed var(--admin-border);
    border-radius: var(--radius-md);
    padding:       28px 20px;
    text-align:    center;
    position:      relative;
    cursor:        pointer;
    transition:    var(--transition);
    background:    #f8fafc;
    overflow:      hidden;
}
.upload-area:hover {
    border-color: var(--admin-primary);
    background:   #eff6ff;
}
.upload-area-large { padding: 40px 20px; }

.upload-placeholder {}
.upload-input {
    position:  absolute;
    inset:     0;
    opacity:   0;
    cursor:    pointer;
    width:     100%;
    height:    100%;
}

/* Guide items (galeri tambah) */
.guide-item {
    display:       flex;
    align-items:   flex-start;
    gap:           14px;
    margin-bottom: 16px;
}
.guide-icon {
    width:          30px;
    height:         30px;
    border-radius:  50%;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      13px;
    font-weight:    700;
    flex-shrink:    0;
}

/* ----------------------------------------------------------
   LOGIN PAGE
   ---------------------------------------------------------- */
.login-card {
    background:    #fff;
    border-radius: var(--radius-lg);
    overflow:      hidden;
    box-shadow:    0 25px 60px rgba(0,0,0,.4);
    animation:     slideUp .5s ease;
}

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

.login-header {
    background:  linear-gradient(135deg, var(--admin-sidebar-bg) 0%, #0c1445 100%);
    padding:     36px 32px;
    text-align:  center;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.login-logo {
    width:          70px;
    height:         70px;
    background:     linear-gradient(135deg, var(--admin-primary) 0%, var(--admin-purple) 100%);
    border-radius:  var(--radius-md);
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      32px;
    color:          #fff;
    margin:         0 auto 16px;
    box-shadow:     0 8px 24px rgba(37,99,235,.5);
}
.login-header h4 {
    color:         #fff;
    font-weight:   800;
    font-size:     1.2rem;
    margin-bottom: 4px;
}
.login-header p {
    color:  rgba(255,255,255,.55);
    font-size: 13px;
    margin:  0;
}

.login-body { padding: 32px; }

.form-control-login {
    border:        1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    padding:       11px 16px;
    font-size:     14px;
    font-family:   var(--font-base);
    transition:    var(--transition);
}
.form-control-login:focus {
    border-color: var(--admin-primary);
    box-shadow:   0 0 0 3px rgba(37,99,235,.12);
}

.btn-login {
    background:    linear-gradient(135deg, var(--admin-primary) 0%, var(--admin-purple) 100%);
    color:         #fff;
    font-size:     15px;
    font-weight:   700;
    padding:       13px;
    border-radius: var(--radius-sm);
    border:        none;
    transition:    var(--transition);
    letter-spacing: 0.3px;
}
.btn-login:hover {
    transform:  translateY(-2px);
    box-shadow: 0 8px 24px rgba(37,99,235,.4);
    color:      #fff;
}
.btn-login:disabled {
    opacity: .7;
    cursor:  not-allowed;
}

.login-footer {
    background:  #f8fafc;
    padding:     20px 32px;
    text-align:  center;
    border-top:  1px solid #e2e8f0;
    font-size:   12px;
    color:       var(--admin-text-muted);
}

/* ----------------------------------------------------------
   PROFIL ADMIN
   ---------------------------------------------------------- */
.profil-avatar {
    width:          100px;
    height:         100px;
    background:     linear-gradient(135deg, var(--admin-primary) 0%, var(--admin-purple) 100%);
    border-radius:  50%;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      48px;
    color:          #fff;
    box-shadow:     0 8px 30px rgba(37,99,235,.4);
}

.profil-meta-item {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       8px 0;
    font-size:     14px;
    border-bottom: 1px solid #f1f5f9;
}
.profil-meta-item:last-child { border-bottom: none; }

/* Password strength */
.password-strength { margin-top: 8px; }

/* ----------------------------------------------------------
   RESPONSIVE (Admin)
   ---------------------------------------------------------- */
@media (max-width: 991px) {
    .admin-sidebar {
        transform: translateX(-100%);
    }
    .admin-sidebar.mobile-open {
        transform: translateX(0);
    }
    .admin-main {
        margin-left: 0;
    }
    .admin-content { padding: 16px; }
    .topbar-user   { display: none; }
    .stat-card-number { font-size: 2rem; }
}

@media (max-width: 767px) {
    .content-title { font-size: 1.1rem; }
    .admin-content { padding: 14px; }
    .admin-card-header { padding: 12px 14px; }
    .admin-card-body   { padding: 14px; }
    .galeri-admin-img-wrap { height: 140px; }
    .stat-card { padding: 18px; }
    .stat-card-number { font-size: 1.7rem; }
}

/* ----------------------------------------------------------
   MODUL ORGANISASI — ADMIN CARDS
   ---------------------------------------------------------- */

.admin-modul-card {
    background:    var(--admin-card-bg);
    border-radius: var(--radius-md);
    border:        1px solid var(--admin-border);
    box-shadow:    var(--shadow-sm);
    overflow:      hidden;
    transition:    var(--transition);
    display:       flex;
    flex-direction: column;
    height:        100%;
}
.admin-modul-card:hover {
    box-shadow:  var(--shadow-lg);
    transform:   translateY(-4px);
    border-color: var(--modul-color);
}

/* Gradient header */
.admin-modul-card-header {
    padding:  20px;
    position: relative;
    overflow: hidden;
}
.admin-modul-card-header::after {
    content:       '';
    position:      absolute;
    bottom:        -20px;
    right:         -20px;
    width:         80px;
    height:        80px;
    border-radius: 50%;
    background:    rgba(255,255,255,.1);
}

.admin-modul-icon {
    width:           48px;
    height:          48px;
    background:      rgba(255,255,255,.2);
    border-radius:   var(--radius-sm);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       22px;
    color:           #fff;
    margin-bottom:   10px;
    transition:      var(--transition);
}
.admin-modul-card:hover .admin-modul-icon {
    background: rgba(255,255,255,.3);
    transform:  scale(1.05);
}

.admin-modul-count-badge {
    background:    rgba(255,255,255,.2);
    color:         #fff;
    font-size:     11px;
    font-weight:   700;
    padding:       4px 10px;
    border-radius: 50px;
    white-space:   nowrap;
}

.admin-modul-num {
    font-size:   36px;
    font-weight: 900;
    color:       rgba(255,255,255,.15);
    line-height: 1;
    margin-top:  4px;
}

/* Card Body */
.admin-modul-card-body {
    padding:   16px;
    flex-grow: 1;
}
.admin-modul-nama {
    font-size:     14px;
    font-weight:   700;
    color:         var(--admin-text);
    margin-bottom: 6px;
    line-height:   1.3;
}
.admin-modul-desc {
    font-size:   12.5px;
    color:       var(--admin-text-muted);
    line-height: 1.6;
    margin:      0;
}

/* Card Footer */
.admin-modul-card-footer {
    padding:     12px 16px;
    border-top:  1px solid var(--admin-border);
    background:  #f8fafc;
}