/* * Plugin: IMG01943800 Cloud Storage
 * Scoped CSS - Theme Conflict Prevention 
 * Note: !important is used strictly to prevent any WordPress theme from breaking this App-like UI.
 */

/* ==========================================
   1. Base App Container Styles
   ========================================== */
#img0194-app {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    background: #1e272e !important; /* Dark App Background */
    padding: 20px !important;
    border-radius: 20px !important;
    color: #ffffff !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}

#img0194-app * { 
    box-sizing: border-box !important; 
}

/* ==========================================
   2. Custom Login Form UI
   ========================================== */
.custom-login-wrapper { 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    min-height: 400px !important; 
}

.login-card { 
    background: #2f3640 !important; 
    padding: 30px !important; 
    border-radius: 15px !important; 
    width: 100% !important; 
    max-width: 400px !important; 
    text-align: center !important; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.4) !important; 
}

.login-card h2 { 
    color: #2ed573 !important; /* Green Accent */
    margin: 0 0 10px 0 !important; 
    font-size: 24px !important; 
}

.login-card p { 
    color: #a4b0be !important; 
    margin-bottom: 25px !important; 
}

.input-group { 
    text-align: left !important; 
    margin-bottom: 15px !important; 
}

.input-group label { 
    display: block !important; 
    margin-bottom: 5px !important; 
    color: #fff !important; 
    font-weight: bold !important; 
}

.input-group input { 
    width: 100% !important; 
    padding: 12px !important; 
    border-radius: 8px !important; 
    border: 1px solid #57606f !important; 
    background: #1e272e !important; 
    color: #fff !important; 
    font-size: 16px !important; 
}

.input-group input:focus { 
    border-color: #2ed573 !important; 
    outline: none !important; 
}

/* ==========================================
   3. App Header & Buttons
   ========================================== */
#img0194-app .app-header { 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    margin-bottom: 25px !important; 
    border-bottom: 1px solid rgba(255,255,255,0.1) !important; 
    padding-bottom: 15px !important; 
}

#img0194-app .app-header h2 { 
    color: #fff !important; 
    margin: 0 !important; 
    font-size: 24px !important; 
}

/* Common Button Styles */
#img0194-app .btn-logout, 
#img0194-app .btn-primary, 
#img0194-app .btn-secondary,
#img0194-app .btn-transfer,
#img0194-app .btn-copy,
#img0194-app .btn-delete { 
    padding: 10px 20px !important; 
    border-radius: 10px !important; 
    border: none !important; 
    cursor: pointer !important; 
    font-weight: bold !important; 
    transition: 0.3s !important; 
    text-decoration: none !important; 
    display: inline-block !important; 
    font-size: 14px !important; 
}

/* Button Colors */
#img0194-app .btn-primary   { background: #2ed573 !important; color: #1e272e !important; } /* Green */
#img0194-app .btn-secondary { background: #57606f !important; color: #fff !important; } /* Gray */
#img0194-app .btn-logout    { background: #ff4757 !important; color: #fff !important; } /* Red */
#img0194-app .btn-transfer  { background: #f39c12 !important; color: #fff !important; } /* Orange/Yellow */
#img0194-app .btn-copy      { background: #0984e3 !important; color: #fff !important; } /* Blue */
#img0194-app .btn-delete    { background: #d63031 !important; color: #fff !important; } /* Dark Red */

#img0194-app button:hover { opacity: 0.9 !important; transform: scale(0.98) !important; }

/* ==========================================
   4. Stats Grid (Colorful App UI Cards)
   ========================================== */
#img0194-app .stats-grid { 
    display: grid !important; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; 
    gap: 20px !important; 
    margin-bottom: 30px !important; 
}

#img0194-app .stat-card { 
    padding: 25px !important; 
    border-radius: 15px !important; 
    text-align: center !important; 
    color: #fff !important; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important; 
    transition: transform 0.3s ease !important;
}

#img0194-app .stat-card:hover { transform: translateY(-5px) !important; }

#img0194-app .stat-card h4 { 
    margin: 0 0 10px 0 !important; 
    font-size: 16px !important; 
    opacity: 0.9 !important; 
}

#img0194-app .stat-card p { 
    margin: 0 !important; 
    font-size: 28px !important; 
    font-weight: bold !important; 
}

/* Card Gradients */
#img0194-app .card-green { background: linear-gradient(135deg, #1abc9c, #16a085) !important; }
#img0194-app .card-pink  { background: linear-gradient(135deg, #fd79a8, #e84393) !important; }
#img0194-app .card-blue  { background: linear-gradient(135deg, #74b9ff, #0984e3) !important; }

/* ==========================================
   5. Smart Upload Zone & Progress Bar
   ========================================== */
#img0194-app .upload-zone { 
    border: 2px dashed #74b9ff !important; 
    border-radius: 15px !important; 
    padding: 40px 20px !important; 
    text-align: center !important; 
    background: rgba(116, 185, 255, 0.05) !important; 
    margin-bottom: 30px !important; 
    transition: background 0.3s !important; 
}

#img0194-app .upload-zone.dragover { background: rgba(116, 185, 255, 0.2) !important; }

#img0194-app #img-preview { 
    max-width: 150px !important; 
    border-radius: 10px !important; 
    margin: 15px auto !important; 
    display: block !important; 
}

#img0194-app .progress-bar-container { 
    width: 100% !important; 
    background: #57606f !important; 
    border-radius: 10px !important; 
    margin-top: 15px !important; 
    overflow: hidden !important; 
    height: 20px !important; 
}

#img0194-app .progress-bar { 
    height: 100% !important; 
    background: #fd79a8 !important; /* Pink Loading Bar */
    width: 0% !important; 
    text-align: center !important; 
    line-height: 20px !important; 
    font-size: 12px !important; 
    transition: width 0.2s ease !important; 
}

/* ==========================================
   6. Search, Admin Controls & File List
   ========================================== */
#img0194-app .search-input { 
    width: 100% !important; 
    padding: 15px !important; 
    border-radius: 10px !important; 
    border: 1px solid rgba(255,255,255,0.1) !important; 
    background: #2f3640 !important; 
    color: #fff !important; 
    margin-bottom: 20px !important; 
    font-size: 16px !important; 
}

#img0194-app .search-input:focus { border-color: #74b9ff !important; outline: none !important; }

/* Admin Limit Box */
#img0194-app #admin-user-limit-box {
    background: #2f3640 !important; 
    padding: 20px !important; 
    border-radius: 10px !important; 
    margin-bottom: 20px !important; 
    border-left: 5px solid #2ed573 !important; 
}

#img0194-app .user-status-msg {
    margin-top: 5px !important;
    font-size: 14px !important;
    font-weight: bold !important;
}
.user-found { color: #2ed573 !important; }
.user-not-found { color: #ff4757 !important; }

/* File List UI */
#img0194-app .file-list { 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 15px !important; 
}

#img0194-app .img-file-item { 
    background: #ffffff !important; 
    color: #2d3436 !important; 
    padding: 15px 20px !important; 
    border-radius: 12px !important; 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

#img0194-app .img-file-item strong { 
    display: block !important; 
    margin-bottom: 5px !important; 
    word-break: break-all !important; 
    font-size: 16px !important;
}

#img0194-app .img-file-item span { 
    font-size: 13px !important; 
    color: #636e72 !important; 
}

#img0194-app .pagination { 
    display: flex !important; 
    justify-content: space-between !important; 
    margin-top: 25px !important; 
}

/* ==========================================
   7. Custom Modal System (Replaces Browser Alerts)
   ========================================== */
.custom-modal { 
    display: none; 
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100% !important; 
    height: 100% !important; 
    background: rgba(0,0,0,0.8) !important; 
    z-index: 999999 !important; 
    align-items: center !important; 
    justify-content: center !important; 
}

.custom-modal .modal-content { 
    background: #ffffff !important; 
    color: #2d3436 !important; 
    padding: 30px !important; 
    border-radius: 15px !important; 
    text-align: center !important; 
    max-width: 450px !important; 
    width: 90% !important; 
    box-shadow: 0 15px 30px rgba(0,0,0,0.3) !important;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important; 
}

.custom-modal h3 { 
    margin-top: 0 !important; 
    color: #d63031 !important; 
    font-size: 22px !important;
    margin-bottom: 15px !important;
}

@keyframes popIn { 
    from { transform: scale(0.8); opacity: 0; } 
    to { transform: scale(1); opacity: 1; } 
}

/* ==========================================
   8. Mobile Responsive Rules
   ========================================== */
@media (max-width: 768px) {
    #img0194-app .app-header {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    #img0194-app .img-file-item { 
        flex-direction: column !important; 
        align-items: flex-start !important; 
        gap: 15px !important; 
    }
    
    #img0194-app .file-actions { 
        display: flex !important; 
        width: 100% !important; 
        gap: 8px !important; 
        flex-wrap: wrap !important; 
    }
    
    #img0194-app .file-actions button { 
        flex: 1 !important; 
        min-width: 30% !important; 
        padding: 12px 10px !important;
        text-align: center !important;
    }
}
```